/* Product Battle Mini - Fixed 2-column + better card look */

.pbm-wrap{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  background:#fff !important;
  border:1px solid #ececff !important;
  border-radius: 18px !important;
  padding: 18px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}

.pbm-header{display:none !important;}

.pbm-main{
  display:grid !important;
  grid-template-columns: 280px 1fr !important;
  gap:18px !important;
  align-items:start !important;
}

.pbm-sidebar{
  background:#fff !important;
  border:1px solid #eef0ff !important;
  border-radius:16px !important;
  padding:14px !important;
}

.pbm-side-title{
  font-weight:900 !important;
  margin-bottom:12px !important;
  font-size:18px !important;
}

.pbm-cats{display:flex !important;flex-direction:column !important;gap:10px !important;}

.pbm-cat{
  display:flex !important;align-items:center !important;justify-content:space-between !important;
  padding:12px 12px !important;
  border:1px solid #eef0ff !important;
  border-radius:12px !important;
  cursor:pointer !important;
  background:#fff !important;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease !important;
}
.pbm-cat:hover{transform:translateY(-1px) !important; box-shadow:0 10px 24px rgba(17,24,39,.08) !important;}
.pbm-cat.active{border-color:#0f766e !important; box-shadow:0 10px 24px rgba(15,118,110,.20) !important;}
.pbm-cat span{font-weight:900 !important;}
.pbm-cat small{color:#6b7280 !important;}

.pbm-disclaimer{margin-top:14px !important;color:#6b7280 !important;font-size:12px !important;line-height:1.4 !important;}

/* Arena */
.pbm-arena{
  background:#fff !important;
  border:1px solid #eef0ff !important;
  border-radius:16px !important;
  padding:18px !important;
}

/* ✅ ALWAYS 2 columns (until very small screens) */
.pbm-grid{
  display:grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap:22px !important;
  align-items:stretch !important;
  width:100% !important;
}

/* Card */
.pbm-card{
  border:1px solid #eef0ff !important;
  border-radius:16px !important;
  overflow:hidden !important;
  background:#fff !important;
  box-shadow:0 12px 28px rgba(17,24,39,.08) !important;
  display:flex !important;
  flex-direction:column !important;
}

/* iframe area */
.pbm-frame-wrap{
  height:260px !important;
  background:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px !important;
}

.pbm-frame{
  width:100% !important;
  height:240px !important;
  border:0 !important;
  display:block !important;
  background:#fff !important;
  border-radius:14px !important;
}

/* Choose buttons */
.pbm-btn, .pbm-pick{
  border:0 !important;
  padding:12px 14px !important;
  font-weight:900 !important;
  cursor:pointer !important;
  width:100% !important;
  background:#0f766e !important;
  color:#fff !important;
}

/* Button group inside each product card */
.pbm-actions{
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pbm-actions .pbm-btn{
  width: 100%;
  appearance: none;
  border: 0;
  border-radius: 16px;
  padding: 16px 18px;
  font-weight: 800;
  cursor: pointer;
}

/* Keep Choose the “main” button */
.pbm-actions .pbm-pick{
  color: #fff;
}

/* Make Buy Now look like a secondary button */
.pbm-actions .pbm-buy{
  background: #fff;
  border: 2px solid rgba(15,118,110,.45);
  color: #0f766e;
}

/* === Cards: same height + actions pinned bottom === */
.pbm-grid { align-items: stretch !important; }
.pbm-card{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Same image area height on both cards */
.pbm-img-wrap{
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pbm-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Keep titles from pushing buttons down differently */
.pbm-title{
  min-height: 84px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.pbm-price{ min-height: 26px; }

/* === Buttons: separation between Choose and Buy === */
.pbm-actions{
  margin-top: auto;            /* keeps buttons at bottom */
  display: flex;
  flex-direction: column;
  gap: 0;                      /* no gap, we add a divider line */
  border-radius: 18px;
  overflow: hidden;
}

.pbm-actions .pbm-btn{
  width: 100%;
  border: 0;
  padding: 16px 18px;
  font-weight: 800;
  cursor: pointer;
}

/* Choose button */
.pbm-actions .pbm-pick{
  background: #0f766e;
  color: #fff;
  border-bottom: 2px solid rgba(255,255,255,.25); /* visible separation line */
}

/* Buy button (secondary) */
.pbm-actions .pbm-buy{
  background: #fff;
  color: #0f766e;
  border: 2px solid rgba(15,118,110,.45);
  border-top: 0;
}

/* === Category buttons: teal with white text like Choose === */
.pbm-cat{
  background: #0f766e !important;
  color: #fff !important;
  border-radius: 16px;
  padding: 18px;
  cursor: pointer;
  border: 0 !important;
}
.pbm-cat small{ color: rgba(255,255,255,.8) !important; }
.pbm-cat.active{ background: #0b5f59 !important; }

/* === Refresh Pair button styling === */
#pbm-refresh{
  display: block;
  width: 100%;
  background: #0f766e;
  color: #fff;
  border: 0;
  border-radius: 16px;
  padding: 14px 16px;
  font-weight: 800;
  cursor: pointer;
}



/* pair */
.pbm-pair-hidden{display:none !important;}
.pbm-pair-visible{display:block !important;}

/* ✅ Only go 1-column on very small screens */
@media (max-width: 640px){
  .pbm-main{grid-template-columns:1fr !important;}
  .pbm-grid{grid-template-columns:1fr !important;}
}