/* frontend/pdp/index.css */
.is-hidden{ display:none !important; } 

/* PDP uses same :root vars from main.css */

.pdpPage{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ===================== FIXED TOPBAR + SPACER ===================== */
.pdpTopStack{
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--bg);
  z-index: 130;
  border-bottom: 1px solid var(--line);
}

.pdpTopBar{
  max-width: var(--maxw);
  margin: 0 auto;
}

.pdpBackBtn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
  flex: 0 0 auto;
}

.pdpBackBtn i{ color: var(--text); font-size: 16px; }

.pdpTopSpacer{
  height: calc(var(--topbar-h) + 10px);
}

/* ===================== STICKY TIER BADGE (NO LAYOUT GAPS) ===================== */
.tierBadge{
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  z-index: 129;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.tierBadge__pill{
  pointer-events: auto;
  max-width: var(--maxw);
  margin: 6px auto 0;
  padding: 10px var(--pad);
}

.tierBadge__pill{
  display:flex;
  align-items:center;
  justify-content:center;
}

.tierBadge__pill > div{ width: 100%; }

.tierBadge__pill{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(243,107,33,0.28);
  box-shadow: var(--shadow-soft);
  border-radius: 999px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 12px;
  gap: 10px;
  font-size: x-large;
  font-weight: 900;
  color: rgba(15,23,42,0.86);
}

.tierBadge__dot{ opacity: 0.45; }

.tierBadge--show{
  opacity: 1;
  transform: translateY(0);
}

/* ===================== FLOATING LIST BADGE (MID RIGHT, TOUCH EDGE) ===================== */
.floatListBadge{
  position: fixed;
  right: 0;                 /* touches viewport edge */
  top: 50%;
  transform: translateY(-50%);
  z-index: 140;
  display: flex;
  align-items:center;
  gap: 8px;

  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(15,23,42,0.12);
  box-shadow: var(--shadow);
  padding: 10px 12px 10px 10px;
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;

  font-weight: 950;
  font-size: 12.5px;
}

.floatListBadge__icon i{ color: var(--brand-deep); font-size: large;}
.floatListBadge__text{ color: var(--text); font-size: large;}
.floatListBadge__count{
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: large;
  font-weight: 600;
}

.floatListBadge--hidden{ display: none; }

/* ===================== CARDS ===================== */
.pdpCard{
  margin-top: 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.pdpCard--flush{
  padding: 0;
}

.pdpCard--click{
  padding: 0;
}

/* ===================== IMAGE CAROUSEL ===================== */
/* Square the image carousel card only */
.pdpCard--flush{
  border-radius: 0 !important;
}

.imgCarousel{
  position: relative;
  border-radius: 0 !important;
  height: 320px;
  background: rgba(15,23,42,0.04);
  overflow: hidden; /* ✅ carousel clips slides, not the track */
}

.imgTrack{
  height: 100%;
  width: 100%;
  display:flex;
  will-change: transform;
  transform: translate3d(0,0,0);
  touch-action: pan-y; /* ✅ allow vertical scroll + horizontal swipe */
}

.imgSlide{
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  width: 100%;
  scroll-snap-align: start;
  position: relative;
  background: rgba(15,23,42,0.06);
}

.imgSlideInner{
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(255,255,255,0.6);
}

.imgSlide img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}


/* Make placeholder slide visible too */
.imgSlide--placeholder .imgPlaceholder{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.imgSlide::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 30% 25%, rgba(243,107,33,.10), transparent 55%),
              radial-gradient(circle at 80% 70%, rgba(15,23,42,.10), transparent 55%);
  opacity: 0.35;
}

.imgPlaceholder{
  position:absolute;
  inset: 0;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 8px;
  color: rgba(15,23,42,0.55);
  font-weight: 850;
}

.imgPlaceholder i{ font-size: 22px; opacity: 0.7; }

.swipeHint{
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  background: rgba(15,23,42,0.72);
  color: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.1px;
  opacity: 1;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.swipeHint--hide{ opacity: 0; }

.imgMeta{
  position:absolute;
  left: 0; right: 0; bottom: 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 0 12px;
  pointer-events: none;
}

.imgDots{
  display:flex;
  gap: 6px;
  pointer-events: none;
}

.imgDot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.48);
  border: 1px solid rgba(255,255,255,0.65);
}
.imgDot--active{
  width: 18px;
  background: rgba(255,255,255,0.92);
}

.imgCount{
  pointer-events: none;
  background: rgba(15,23,42,0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
}

/* ===================== TITLE ===================== */
.titleRow{
  padding: 12px 12px 10px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  justify-content: space-between;
}

.pdpTitle{
  margin: 0;
  font-size: large;
  font-weight: 400;
  letter-spacing: -0.2px;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}

.iconBtn{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,0.04);
  cursor: pointer;
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.iconBtn i{ color: var(--text); }

.reviewTeaser{
  padding: 0 12px 12px;
  font-size: x-large;
  font-weight: 800;
  color: rgba(15,23,42,0.82);
}

.reviewTeaser i {
  color: #D4AF37;
  font-size: x-large;
}


.fa-regular fa-star {
  font-size: x-large;
}


.muted{ color: var(--muted); font-weight: 700; }

/* ===================== PRICING ===================== */
.cardHeadRow{
  padding: 12px 12px 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.cardHeadTitle{
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: large;
}

.miniBtn{
  border: 1px solid rgba(243,107,33,0.22);
  background: rgba(243,107,33,0.06);
  color: var(--brand-deep);
  font-weight: 950;
  border-radius: 999px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 12px;
}

.tierTable{
  padding: 0 12px 10px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.tierRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.03);
  font-weight: 900;
  font-size: large;
}

.tierRow--active{
  border-color: rgba(243,107,33,0.28);
  background: rgba(243,107,33,0.08);
}

.tierLeft{ color: rgba(15,23,42,0.86); font-size: x-large;}
.tierRight{ color: rgba(15,23,42,0.90); font-size: x-large;}

.moqLine{
  padding: 0 12px 12px;
  font-size: large;
  font-weight: 800;
  color: rgba(15,23,42,0.86);
}

/* ===================== ROW NAV BUTTONS ===================== */
.rowNav{
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px 12px 8px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.rowNav__title{
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: large;
  color: var(--text);
}

.rowNav__chev{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,0.04);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.rowNav__chev i{ color: var(--muted); }

.hintLine{
  padding: 0 12px 10px;
  font-size: large;
}











/* ===================== VARIANTS (FINAL) ===================== */

#variantsBlock{
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.98);
}

/* Header row */
.rowNav--variants{
  width: 100%;
}

/* Summary (matrix only) */
.variantSummary{
  padding: 0 12px 10px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  font-size: 14px;
  font-weight: 950;
  color: rgba(15,23,42,0.86);
}
.variantSummary__text{
  display:flex;
  flex-direction: column;
  gap: 4px;
}
.variantSummary__sku{
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,0.62);
  white-space: nowrap;
}

/* ===================== NONE MODE (CENTERED) ===================== */
.variantNoneRow{
  padding: 12px;
  display: block;
  justify-content:center;
  padding: 0 12px 12px; /* ✅ removes useless top space */
}

.variantNoneBar{
  padding-top: 12px;
  border-top: 1px solid rgba(15,23,42,0.10); /* ✅ thin top border like pro sections */
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.variantNoneBar__price{
  min-width: 0;
  display:flex;
  flex-direction: column;
  gap: 4px;
}

.nonePriceLine{
  font-size: large;
  font-weight: 950;
  color: rgba(15,23,42,0.92);
  line-height: 1.1;
}

.noneRange{
  font-size: large;
  font-weight: 900;
  color: rgba(15,23,42,0.60);
}

.variantNoneCenter{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between; /* ✅ price left, qty right */
  gap: 12px;
  text-align:left;
}

.variantNoneCenter__price{
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  gap: 4px;
  min-width: 0;
}
.nonePriceLine{
  font-size: large;
  font-weight: 950;
  color: rgba(15,23,42,0.92);
}
.noneRange{
  font-size: large;
  font-weight: 850;
  color: rgba(15,23,42,0.60);
}

/* Shared qty control */
.qtyCtrl.qtyCtrl--inline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}
.qtyCtrl--inline .qtyBtn{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.98);
  font-weight: 950;
}
.qtyCtrl--inline .qtyVal{
  min-width: 42px;
  text-align:center;
  font-weight: 950;
  color: rgba(15,23,42,0.88);
}

/* ===================== LEGACY MODE (CHIPS + ONE QTY) ===================== */
.variantLegacy{
  padding: 0 0 12px;
}
.legacyInner{
  padding: 12px;
  border-top: 1px solid rgba(15,23,42,0.08);
}
.legacyAttrTitle{
  font-weight: 950;
  font-size: 13.5px;
  color: rgba(15,23,42,0.90);
  letter-spacing: -0.2px;
}

/* Chips */
.chipRow{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.chip{
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.98);
  padding: 10px 12px;
  font-weight: 950;
  font-size: 13px;
  color: rgba(15,23,42,0.84);
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  transition: transform .06s ease, background .12s ease, border-color .12s ease;
}
.chip:active{ transform: scale(0.98); }
.chip--active{
  border-color: rgba(243,107,33,0.34);
  background: rgba(243,107,33,0.10);
  color: rgba(15,23,42,0.92);
}
.chip--active::after{
  content: "✓";
  font-size: 12px;
  color: var(--brand-deep);
  margin-left: 6px;
}
.chip--disabled{
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  border-color: rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.03);
  color: rgba(15,23,42,0.55);
}

/* Centered qty block (legacy + matrix) */
.variantQtyBlock{
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.02);
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 10px;
}

/* ===================== MATRIX MODE (WIRE-FRAME STACKED) ===================== */
.variantMatrix{
  padding: 12px;
  border-top: 1px solid rgba(15,23,42,0.08);
}

/* --- Top summary stack --- */
.matrixSummaryLine,
.matrixSkuLine,
.matrixStatusLine{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 950;
  color: rgba(15,23,42,0.90);
  font-size: 13.2px;
  letter-spacing: -0.2px;
  margin-bottom: 8px;
}

.matrixSummaryLine b,
.matrixSkuLine b{
  font-weight: 950;
}

/* Status line uses pill */
.matrixStatusLine{
  margin-bottom: 0;
}

.skuStatus{
  border-radius: 999px;
  padding: 7px 10px;
  border: 1px solid rgba(15,23,42,0.10);
  font-weight: 950;
  font-size: 12px;
  white-space: nowrap;
  line-height: 1;
}

.skuStatus--ok{
  background: rgba(16,185,129,0.10);
  border-color: rgba(16,185,129,0.25);
}

.skuStatus--bad{
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.25);
}

/* --- Dividers like your wireframe sections --- */
.matrixDivider{
  height: 1px;
  background: rgba(15,23,42,0.08);
  margin: 12px 0;
}

/* --- Groups mount --- */
.matrixGroups{
  padding: 0;
}

/* Each group */
.vGroup{
  padding: 0 0 14px;
}
.vGroup:last-child{
  padding-bottom: 0;
}

.vGroupHead{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.vGroupTitle{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: 13.2px;
  color: rgba(15,23,42,0.90);
}

/* --- Quantity section --- */
.matrixQtyWrap{
  padding: 0;
}

.matrixQtyHead{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.matrixQtyTitle{
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: 13.2px;
  color: rgba(15,23,42,0.90);
}

.matrixMoqText{
  font-weight: 950;
  font-size: 12.5px;
  color: rgba(15,23,42,0.65);
  white-space: nowrap;
}

/* Keep your existing control spacing */
.matrixQtyBlock{
  margin-top: 0;
}













/* ===================== PDP SHIPPING OPTIONS (same teaser vibe as List) ===================== */
#shippingBlock .shipSection{
  padding: 0;
}

#shippingBlock .shipHead{
  padding: 12px 12px 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

#shippingBlock .shipHeadTitle{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: x-large;
  color: var(--text);
}

#shippingBlock .shipHeadTitle i{
  color: var(--brand-deep);
}

#shippingBlock .shipHeadBtn{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,0.04);
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

#shippingBlock .shipHeadBtn i{
  color: var(--muted);
  font-size: 16px;
}

#shippingBlock .shipTeaser{
  margin: 0 12px 12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.02);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

#shippingBlock .shipTeaser:active{
  transform: translateY(1px);
}

#shippingBlock .shipTeaserTitle{
  font-weight: 950;
  font-size: x-large;
  color: rgba(15,23,42,0.90);
  margin-bottom: 8px;
}

#shippingBlock .shipTeaserMeta{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  font-weight: 850;
  font-size: large;
  color: rgba(15,23,42,0.72);
  line-height: 1.35;
}

#shippingBlock .shipTeaserMeta + .shipTeaserMeta{
  margin-top: 8px;
}

#shippingBlock .shipTeaserMeta i{
  width: 18px;
  text-align:center;
  margin-top: 2px;
  color: rgba(15,23,42,0.60);
}

/* ===================== BULLET LISTS ===================== */
.bulletList{
  padding: 0 12px 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.bulletList--tight{ gap: 8px; }

.manag{
  text-decoration: underline;
}

.bullet{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: large;
  font-weight: 550;
  color: rgba(15,23,42,0.82);
}
.bullet i{
  width: 20px;
  text-align:center;
  margin-top: 1px;
  color: rgba(15,23,42,0.70);
}
.bullet--brand i{ color: var(--brand-deep); }
.inlineLink{
  color: var(--brand-deep);
  font-weight: 950;
  text-decoration: underline;
  text-underline-offset: 3px;
}


.rowNav__title {
  font-size: x-large;
  padding-bottom: 20px;
}
.cardTitle  {
  font-size: large !important;
  padding-bottom: 20px !important;
}
.eksucartt {
  color: var(--brand);
}
/* ===================== PROTECTIONS NOTE ===================== */
.protectNote{
  padding: 0 12px 12px;
  color: rgba(15,23,42,0.74);
  font-weight: 750;
  font-size: large;
  line-height: 1.35;
}

.tradeAssured{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 208, 0, 0.1);
  border: 1px solid rgba(243,107,33,0.22);
  color: rgba(15,23,42,0.88);
  font-weight: 950;
  margin-left: 4px;
  font-size: x-large;
}
.tradeAssured i{
  color: #caa300; /* gold-ish shield */
}

/* ===================== BODY TEXT ===================== */
.cardTitle{
  padding: 12px 12px 8px;
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: x-large;
}
.bodyText{
  padding: 0 12px 12px;
  color: rgba(15,23,42,0.80);
  font-weight: 650;
  font-size: large;
  line-height: 1.55;
}

/* ===================== KEY/VALUE TABLE ===================== */
.kvTable{
  margin: 0 12px 12px;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 12px;
  overflow: hidden;
}
.kvRow{
  display:grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 10px;
  padding: 10px 10px;
  background: rgba(0, 11, 34, 0.02);
  border-top: 1px solid rgba(15,23,42,0.08);
}
.kvRow:first-child{ border-top: 0; }
.kvK{
  font-weight: 950;
  font-size: large;
  color: rgba(15,23,42,0.78);
}
.kvV{
  text-align:right;
  font-weight: 850;
  font-size: large;
  color: rgba(15,23,42,0.86);
}
.kvTable--full .kvRow{
  grid-template-columns: 1fr 1fr;
}

/* ===================== SUPPLIER TEASER ===================== */
.supplierBody{
  flex: 1;
  min-width: 0; /* critical for ellipsis inside flex */
}


.supplierTeaser{
  display:flex;
  gap: 12px;
  padding-top: 15px;
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 15px;
  align-items:flex-start;
   flex: 1;
  min-width: 0;
}

.supplierAvatar{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(243,107,33,0.12);
  border: 1px solid rgba(243,107,33,0.22);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  font-size: x-large;
  color: rgba(15,23,42,0.86);
  flex: 0 0 auto;
}

.supplierName{
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: x-large;
  margin-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}


.supplierDesc{
  margin-top: 4px;
  color: rgba(15,23,42,0.65);
  font-weight: 650;
  font-size: large;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.supplierKpis{
  margin-top: 8px;
  display:flex;
  gap: 12px;
  flex-wrap: nowrap;
  overflow: hidden;
  color: rgba(15,23,42,0.78);
  font-weight: 900;
  font-size: large;
}
.kpi{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap;
}
.kpi i{ color: rgba(15,23,42,0.55); }
.kpi:first-child i{ color: #d7a700; }

/* ===================== SUPPLIER RAIL (1px tuck under teaser) ===================== */
.supplierRail{
  margin-top: -1px;
  border-top: 1px solid rgba(15,23,42,0.08);
}
.railTrack{
  display:flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px var(--pad) 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.railItem{
  flex: 0 0 auto;
  scroll-snap-align: start;
   width: 180px;     /* bump this up */
  height: 150px;
}
.railImg{
  width: 100%;
  height: 100%;
  border-radius: 1px;
  background: rgba(15,23,42,0.06);
  box-shadow: inset;
  border: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/* ===================== RECENTLY VIEWED (RAIL) ===================== */
#recentlyViewedCard.is-hidden{ display:none !important; }

.rvTrack{
  display:flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 12px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.rvItem{
  flex: 0 0 auto;
  width: 180px;              /* matches your supplier rail “big tiles” vibe */
  scroll-snap-align: start;

  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.95);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.rvImg{
  width: 100%;
  height: 120px;
  background: rgba(15,23,42,0.06);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.rvBody{
  padding: 10px;
}

.rvName{
  font-weight: 950;
  font-size: medium;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rvMeta{
  margin-top: 6px;
  color: rgba(15,23,42,0.60);
  font-weight: 850;
  font-size: medium;
}


/* ===================== RECOMMENDED GRID ===================== */
.recoGrid{
  padding: 0 12px 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.recoCard{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.95);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.recoImg{
  width: 100%;
  height: 92px;
  background: rgba(15,23,42,0.06);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.recoBody{ padding: 10px; }
.recoName{
  font-weight: 950;
  font-size: medium;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recoMeta{
  margin-top: 6px;
  color: rgba(15,23,42,0.60);
  font-weight: 850;
  font-size: medium;
}

/* ===================== BOTTOM BAR (FIXED) ===================== */
.pdpBottomBar{
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 150;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 10px var(--pad) 12px;
}

.pdpTotals{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  font-weight: 950;
  font-size: medium;
  color: rgba(15,23,42,0.86);
  padding-bottom: 10px;
}
.pdpTotals .dot{ opacity: 0.35; }

.pdpActions{
  display:flex;
  gap: 10px;
}

.actBtn{
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.95);
  font-weight: 950;
  font-size: large;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
}

.actBtn--ghost{
  width: 25%;
}

.actBtn--brand{
  width: 75%;
  background: var(--brand-deep);
  color: #fff;
  border-color: rgba(243,107,33,0.35);
  box-shadow: 0 14px 26px rgba(243,107,33,0.22);
}

.pdpBottomSpacer{
  height: calc(120px + env(safe-area-inset-bottom));
}

/* ===================== FULLSCREEN VIEWER ===================== */
.viewer{
  position: fixed;
  inset: 0;
  z-index: 220;
}

.viewer--hidden{ display:none; }

.viewer__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.78);
}

.viewer__panel{
  position:absolute;
  inset: 0;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
}

.viewer__close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.30);
  color: #fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 3;
}

.viewer__nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.18); /* transparent feel */
  color: #fff;
  cursor:pointer;
  z-index: 3;
}
.viewer__nav--left{ left: 3px; }
.viewer__nav--right{ right: 3px; }

.viewer__stage{
  width: 100%;
  height: 100%;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
  padding: 54px 0 70px;
  overflow: hidden; /* ✅ critical: clips slides while track moves */
}

.viewerTrack{
  width: 100%;
  height: 100%;
  display:flex;
  will-change: transform;
  transform: translate3d(0,0,0);
  touch-action: pan-y;
}

.viewerSlide{
  flex: 0 0 100%;
  min-width: 100%;
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* FULL IMAGE ALWAYS VISIBLE + AUTO FIT */
.viewerImg{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;     /* ✅ show full image always */
  object-position: center;
  border-radius: 0;        /* ✅ square */
  user-select: none;
  -webkit-user-drag: none;
}

.viewerMeta{
  position:absolute;
  left: 0; right: 0;
  bottom: 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 0 14px;
  pointer-events:none;
}

/* ===================== PDP SHEETS (ALWAYS ABOVE BOTTOM BAR) ===================== */
.pdpSheet{
  position: fixed;
  inset: 0;
  z-index: 210; /* higher than bottom bar */
}
.pdpSheet--hidden{ display:none; }

.pdpSheet__overlay{
  position:absolute;
  inset:0;
  background: rgba(15, 23, 42, 0.50);
}

.pdpSheet__panel{
  position:absolute;
  left: 0; right: 0;
  bottom: 0;
  background: var(--card);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction: column;

  /* ✅ never hide under bottom bar */
  max-height: calc(82vh - 110px);
  padding-bottom: env(safe-area-inset-bottom);
}

.pdpSheet__head{
  padding: 14px var(--pad);
  display:flex;
  align-items:center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.pdpSheet__title{
  font-weight: 950;
  font-size: x-large;
  letter-spacing: -0.2px;
}
.pdpSheet__close{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,0.04);
  cursor:pointer;
}

.pdpSheet__body{
  padding: 12px var(--pad) 14px;
  overflow-y: auto;
}

.pdpSheet__foot{
  padding: 12px var(--pad) 14px;
  border-top: 1px solid var(--line);
  display:flex;
  gap: 10px;
}

.footBtn{
  flex: 1;
  height: 46px;
  border-radius: 14px;
  font-weight: 950;
  font-size: x-large;
  cursor:pointer;
  border: 1px solid rgba(15,23,42,0.14);
}
.footBtn--ghost{
  background: rgba(15,23,42,0.04);
}
.footBtn--brand{
  background: var(--brand-deep);
  color: #fff;
  border-color: rgba(243,107,33,0.35);
  box-shadow: 0 14px 26px rgba(243,107,33,0.22);
}

/* Sheet inner blocks */
.sheetInfo{
  padding: 10px 12px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.03);
  border-radius: 12px;
  font-weight: 850;
  font-size: x-large;
  margin-bottom: 12px;
}

.variantLines{
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.vLine{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.96);
  border-radius: 14px;
}

.vName{ font-weight: 950; font-size: large; }
.vPrice{ margin-top: 4px; font-size: large; }

.qtyCtrl{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

.qtyBtn{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(15,23,42,0.04);
  cursor:pointer;
  font-weight: 950;
  font-size: large;
}
.qtyVal{
  min-width: 28px;
  text-align:center;
  font-weight: 950;
  font-size: large;
}

.sheetSummary{
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(243,107,33,0.22);
  background: rgba(243,107,33,0.08);
  display:flex;
  gap: 12px;
  justify-content: space-between;
  font-weight: 950;
  font-size: large;
  flex-wrap: wrap;
}

.sheetBlock{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.02);
  margin-bottom: 10px;
}

.sheetBlock__title{
  font-weight: 950;
  font-size: large;
  display:flex;
  align-items:center;
  gap: 10px;
}
.sheetBlock__title i{ color: var(--brand-deep); }

.sheetBlock__text{
  margin-top: 8px;
  color: rgba(15,23,42,0.72);
  font-weight: 650;
  font-size: large;
  line-height: 1.45;
}

.sheetBigTitle{
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: large;
  margin-bottom: 12px;
}

.payLogos{
  margin-top: 10px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.payLogo{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.88);
  font-weight: 950;
  font-size: large;
}

.sheetLink{
  margin-top: 10px;
  font-weight: 850;
  font-size: large;
}

/* ===================== CENTER MODALS ===================== */
.pdpModal{
  position: fixed;
  inset: 0;
  z-index: 230;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}
.pdpModal--hidden{ display:none; }

.pdpModal__overlay{
  position:absolute;
  inset:0;
  background: rgba(15,23,42,0.50);
}

.pdpModal__panel{
  position: relative;
  width: min(420px, 92vw);
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 16px;
  z-index: 2;
}

.pdpModal__title{
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: x-large;
}

.pdpModal__text{
  margin-top: 8px;
  color: rgba(15,23,42,0.72);
  font-weight: 650;
  font-size: large;
  line-height: 1.4;
}

.pdpModal__actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
}

.modalBtn{
  flex: 1;
  height: 46px;
  border-radius: 14px;
  font-weight: 950;
  font-size: large;
  cursor:pointer;
  border: 1px solid rgba(15,23,42,0.14);
}
.modalBtn--ghost{ background: rgba(15,23,42,0.04); }
.modalBtn--brand{
  background: var(--brand-deep);
  color: #fff;
  border-color: rgba(243,107,33,0.35);
  box-shadow: 0 14px 26px rgba(243,107,33,0.22);
}

/* ===================== RESPONSIVE ===================== */
@media (min-width: 700px){
  .imgCarousel{ height: 360px; }
  .viewerImg{ width: 70%; height: 74%; }
}

/* ===================== VARIANTS (NEW) ===================== */

.variantSummary{
  padding: 0 12px 10px;
  font-size: large;
  font-weight: 900;
  color: rgba(15,23,42,0.86);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}
.variantSummary__text{
  display:flex;
  flex-direction: column;
  gap: 2px;
}
.variantSummary__sku{
  font-size: 12px;
  font-weight: 950;
  color: rgba(15,23,42,0.66);
  white-space: nowrap;
}
.variantNote{
  padding: 0 12px 12px;
  font-weight: 850;
  font-size: 12.8px;
}

/* NONE MODE */
/* NONE MODE */
.variantNone{
  padding: 6px 0 0;
}
.variantNoneRow{
  padding: 10px 12px 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.variantNoneLeft{
  min-width: 0;
  flex: 1;
}
.variantNoneTitle{
  font-weight: 950;
  font-size: 14px;
  color: rgba(15,23,42,0.90);
}

/* NEW: price line (pro look like variant-enabled sections) */
.variantNonePrice{
  margin-top: 6px;
  display:flex;
  align-items:center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12.8px;
  font-weight: 900;
  color: rgba(15,23,42,0.78);
}
.variantNonePrice i{
  color: var(--brand-deep);
}
.variantNonePrice b{
  color: rgba(15,23,42,0.92);
  font-weight: 950;
}
.variantNoneRange{
  color: rgba(15,23,42,0.62);
  font-weight: 900;
}

/* shared dot */
.variantNoneDot{
  opacity: 0.45;
}

.variantNoneMeta{
  margin-top: 6px;
  font-size: 12.6px;
  font-weight: 850;
}
.qtyCtrl--inline .qtyBtn{ width: 38px; height: 38px; border-radius: 12px; }
.qtyCtrl--inline .qtyVal{ min-width: 34px; }

/* LEGACY MODE LIST (ALL OPTIONS) */
.legacyList{
  padding: 0 12px 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.legacyRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.96);
  border-radius: 14px;
}
.legacyLeft{
  min-width: 0;
}
.legacyName{
  font-weight: 950;
  font-size: 13.5px;
  color: rgba(15,23,42,0.92);
}
.legacyPrice{
  margin-top: 4px;
  font-weight: 850;
  font-size: 12.5px;
  color: rgba(15,23,42,0.60);
}

/* MATRIX MODE */
.variantMatrix{ padding: 0 0 12px; }
.matrixStatusRow{
  padding: 0 12px 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.matrixStatusLabel{
  font-weight: 950;
  font-size: 13px;
  color: rgba(15,23,42,0.86);
}
.matrixGroups{ padding: 0 0 6px; }
.vGroup{
  padding: 10px 12px 0;
}
.vGroupHead{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.vGroupTitle{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: 13.2px;
  color: rgba(15,23,42,0.90);
}
.vGroupHint{
  font-size: 12px;
  font-weight: 850;
}
.vGroupTitle i{ color: var(--brand-deep); }

/* Chips still used for MATRIX only (wrap, not scroll) */
/* ===================== VARIANTS — WIRE-FRAME MATCH ===================== */

/* Legacy container padding */
.variantLegacy{
  padding: 0 0 12px;
}
.legacyInner{
  padding: 10px 12px 0;
}
.legacyAttrTitle{
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: 13.2px;
  color: rgba(15,23,42,0.90);
}

/* Reuse the SAME chip style for legacy + matrix */
.chipRow{
  padding: 10px 0 0;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.chipRow--wrap{
  overflow: visible;
  flex-wrap: wrap;
}

/* keep your pill chips (single source of truth) */
.chip{
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.92);
  padding: 10px 12px;
  font-weight: 950;
  font-size: 13px;
  color: rgba(15,23,42,0.84);
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.chip--active{
  border-color: rgba(243,107,33,0.34);
  background: rgba(243,107,33,0.10);
  color: rgba(15,23,42,0.92);
}
.chip--active::after{
  content: "✓";
  font-size: 12px;
  color: var(--brand-deep);
  margin-left: 6px;
}
.chip--disabled{
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  border-color: rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.03);
  color: rgba(15,23,42,0.55);
}

/* Centered Quantity block used by BOTH legacy + matrix */
.variantQtyBlock{
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.02);
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 10px;
}

.variantQtyLabel{
  font-weight: 950;
  font-size: 13px;
  color: rgba(15,23,42,0.86);
  text-align:center;
}

/* Matrix footer spacing polish */
.matrixFooter{
  margin-top: 6px;
  padding: 0 12px;
}
.matrixFooter__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0 0;
}
.matrixSkuLine{
  font-weight: 900;
  color: rgba(15,23,42,0.86);
}
.matrixQtyBlock{
  margin-top: 10px;
}

/* ===================== STARS (single big star) ===================== */
.stars{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  line-height: 1;
}
.stars i{
  color: #D4AF37;
  font-size: large; /* default star */
}

/* Big star for Reviews KPI + sheet meta */
.stars--lg i{ font-size: 29px; }
.stars--xl i{ font-size: 32px; }

/* Avg rating text (bigger) */
.ratingAvg{
  font-weight: 950;
  font-size: 22px;
  letter-spacing: -0.2px;
  color: rgba(15,23,42,0.90);
}
.ratingAvg--sheet{
  font-size: 24px;
}

/* keep count text compact */
.ratingCount{
  font-weight: 850;
  color: rgba(15,23,42,0.62);
}

.ttss{
  font-size: large;
}

/* ===================== REVIEW TEASER (TITLE CARD) ===================== */
.reviewTeaser{
  padding: 0 12px 12px;
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: x-large;
  font-weight: 900;
  color: rgba(15,23,42,0.82);
}

/* ===================== REVIEWS PREVIEW (CARD) ===================== */
.reviewsPreview{
  padding: 0 12px 12px;
}
.reviewsKpi{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 950;
  color: rgba(15,23,42,0.86);
  padding-bottom: 6px;
}
.rPrev{
  padding: 10px 10px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.02);
  border-radius: 14px;
  margin-top: 10px;
}
.rPrev__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 950;
}
.rUser{
  font-weight: 150;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  color: rgba(15,23,42,0.90);
}
.rDate{
  color: rgba(15,23,42,0.55);
  font-weight: 850;
  font-size: 12px;
}
.rPrev__text{
  margin-top: 6px;
  color: rgba(15,23,42,0.78);
  font-weight: 650;
  font-size: large;
  line-height: 1.35;
}

/* ===================== REVIEWS SHEET ===================== */
.reviewsSheetMeta{
  padding: 10px 12px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.03);
  border-radius: 12px;
  font-weight: 950;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.reviewsFull{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.rFull{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.96);
}
.rFull__head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}
.rFull__left{
  display:flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.rFull__text{
  margin-top: 8px;
  color: rgba(15,23,42,0.78);
  font-weight: 650;
  line-height: 1.45;
}



/* SKU availability pill */
.skuStatus{
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 12.5px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(15,23,42,0.04);
  color: rgba(15,23,42,0.86);
  white-space: nowrap;
}
.skuStatus--ok{
  border-color: rgba(34,197,94,0.25);
  background: rgba(34,197,94,0.10);
}
.skuStatus--bad{
  border-color: rgba(239,68,68,0.25);
  background: rgba(239,68,68,0.10);
}

/* Selected lines list (matrix sheet) */
.selectedSkuLines{
  margin-top: 10px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.sLine{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.96);
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}
.sLine__left{ min-width: 0; }
.sLine__sku{
  font-weight: 950;
  font-size: 13px;
  color: rgba(15,23,42,0.92);
}
.sLine__label{
  margin-top: 3px;
  font-weight: 850;
  font-size: 12px;
  color: rgba(15,23,42,0.62);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.sLine__qty{
  font-weight: 950;
  font-size: 13px;
  white-space: nowrap;
}





.rPrev__top{
  display:grid;
  grid-template-columns: 1fr auto auto;
  align-items:center;
  gap: 10px;
}
.rFull__head{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}



/* NONE mode centered layout */
.variantNoneRow { padding-top: 14px; padding-bottom: 14px; }
.variantNoneCenter{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:84px; /* gives the nice centered empty space like your mock */
}
.variantNoneCenter__price{
  font-size: 18px;
  font-weight: 700;
}

/* Chips */
.chipRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.chip{
  border:1px solid var(--line, rgba(255,255,255,.12));
  background: var(--card, rgba(255,255,255,.02));
  color: var(--text, #fff);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 600;
  cursor:pointer;
}
.chip--active{
  border-color: var(--brand, #ff6a00);
  box-shadow: 0 0 0 2px rgba(255,106,0,.18);
}

















/* ===================== SHEETS (SLIDE-UP) ===================== */
.sheet{
  position: fixed;
  inset: 0;
  z-index: 200; /* highest priority on page */
  display:grid;
  align-items:end;
}
.sheetOverlay{
  position:absolute;
  inset:0;
  background: rgba(15,23,42,0.46);
}
.sheetPanel{
  position: relative;
  width: min(720px, 100%);
  margin: 0 auto;
  background:#fff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: var(--shadow);
  max-height: 82vh;

  overflow: hidden; /* keeps rounded corners clean */
  display: flex;
  flex-direction: column;
}
.sheetPanel--top{
  max-height: 92vh;
}
.sheet--hidden{ display:none; }

.sheetHead{
  position: sticky;
  top: 0;
  z-index: 5;
  background:#fff;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(15,23,42,0.10);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.sheetTitle{
  font-weight: 950;
  letter-spacing:-0.2px;
}
.sheetClose{
  border:0;
  background: transparent;
  cursor:pointer;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: rgba(15,23,42,0.62);
}
.sheetBody{
  padding: 12px 12px 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sheetBody::-webkit-scrollbar{ width: 0; height: 0; }


.sheetDivider{
  height: 1px;
  background: rgba(15,23,42,0.10);
  margin: 12px 0;
}
.sheetSectionTitle{
  font-weight: 950;
  letter-spacing:-0.2px;
  margin-bottom: 10px;
}

/* rows */
.rows{
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: var(--r-lg);
  overflow:hidden;
  background:#fff;
}
.row{
  width: 100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border:0;
  background:#fff;
  cursor:pointer;
  text-align:left;
}
.row + .row{ border-top: 1px solid rgba(15,23,42,0.08); }

.row--static{ cursor: default; }
.rowLeft{
  font-weight: 900;
  color: rgba(15,23,42,0.78);
}
.rowRight{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  color: rgba(15,23,42,0.90);
  font-weight: 900;
}
.rowChevron{
  font-size: 14px;
  color: rgba(15,23,42,0.55);
}

.rowSub{
  padding: 10px 12px 12px;
  color: rgba(15,23,42,0.58);
  font-size: 12.5px;
  font-weight: 700;
  border-top: 1px solid rgba(15,23,42,0.08);
  background: rgba(15,23,42,0.02);
}

.rowExpand{
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(15,23,42,0.08);
  background: rgba(15,23,42,0.02);
}
.expandCard{
  background:#fff;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: var(--r-md);
  padding: 12px;
}
.expandTitle{
  font-weight: 950;
  letter-spacing:-0.2px;
  margin-bottom: 10px;
}
.expandDesc{
  color: rgba(15,23,42,0.62);
  font-weight: 750;
  font-size: 12.6px;
  line-height: 1.3;
  margin-top: -6px;
  margin-bottom: 10px;
}
.radioRow{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 12px;
  background: rgba(15,23,42,0.03);
  border: 1px solid rgba(15,23,42,0.08);
  margin-top: 10px;
  font-weight: 100;
  font-size: small;
}
.radioRow input{ transform: scale(1.1); }

.ghostBtn{
  width: 100%;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.14);
  background:#fff;
  font-weight: 950;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}

/* form */
.formGrid{
  display:grid;
  gap: 10px;
}
.fRow{ display:grid; gap: 6px; }
.fRow--full{ grid-column: 1 / -1; }

.fLabel{
  font-size: 12.5px;
  color: rgba(15,23,42,0.70);
  font-weight: 900;
}
.fStatic{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.10);
  font-weight: 900;
}
.fSelect, .fInput, .fTextarea{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.14);
  background: #fff;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  outline: none;
}
.fTextarea{ min-height: 88px; resize: vertical; }
.fSelect:disabled{ background: rgba(15,23,42,0.03); color: rgba(15,23,42,0.55); }
.fHint{
  margin-top: -4px;
  text-align:right;
  font-size: 12px;
  color: rgba(15,23,42,0.55);
  font-weight: 750;
}

/* carriers */
.carrierList{ display:flex; flex-direction:column; gap: 10px; }
.carrierCard{
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid rgba(15,23,42,0.10);
  background:#fff;
  padding: 12px;
  text-align:left;
}
.carrierCard--active{
  border-color: rgba(243,107,33,0.30);
  box-shadow: 0 0 0 4px rgba(243,107,33,0.12);
}
.carrierCard--disabled{
  opacity: .55;
  background: rgba(15,23,42,0.02);
}
.carrierTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}
.carrierName{
  font-weight: 950;
  letter-spacing:-0.2px;
}
.carrierRec{
  color: var(--brand);
  font-weight: 950;
}
.carrierSoon{
  margin-left: 8px;
  font-size: 12.5px;
  color: rgba(15,23,42,0.60);
  font-weight: 850;
}

.cornerTick{
  width: 28px;
  height: 28px;
  border-top-right-radius: 14px;
  border-bottom-left-radius: 14px;
  border: 1px solid rgba(15,23,42,0.12);
  background: var(--brand);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  flex: 0 0 auto;
}
.carrierCols{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.carrierCol{ display:flex; flex-direction:column; gap: 2px; }
.carrierCol--right{ align-items:flex-end; text-align:right; }
.carrierMain{ font-weight: 950; }
.carrierSub{ font-size: 12.2px; color: rgba(15,23,42,0.62); font-weight: 800; }

.carrierNote{
  margin-top: 10px;
  font-size: 12.4px;
  color: rgba(15,23,42,0.62);
  font-weight: 750;
  line-height: 1.3;
}

/* ===================== DROP-SHIP PLAN ===================== */
.dsIntro{
  color: rgba(15,23,42,0.66);
  font-weight: 750;
  font-size: 12.8px;
  line-height: 1.35;
  margin-bottom: 10px;
}
.dsAdd{
  width: 100%;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.14);
  background:#fff;
  font-weight: 950;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}
.recipientList{ margin-top: 12px; display:flex; flex-direction:column; gap: 12px; }

.dsSummary{
  margin-top: 14px;
  padding: 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.03);
}
.dsSumRow{
  font-size: 12.8px;
  color: rgba(15,23,42,0.72);
  font-weight: 800;
}
.dsDot{ margin: 0 6px; color: rgba(15,23,42,0.40); }

.dsSave{
  margin-top: 12px;
  width: 100%;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: var(--brand-deep);
  color:#fff;
  font-weight: 950;
  cursor:pointer;
}

/* responsive */
@media (min-width: 720px){
  .exploreGrid{ grid-template-columns: 1fr 1fr 1fr; }
}



/* Hide scrollbars everywhere (still scrolls) */
html, body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* If your list page uses an inner scroll container, kill its scrollbar too */
[data-section="list"],
[data-section="empty"],
main,
.app,
.page,
.content {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
[data-section="list"]::-webkit-scrollbar,
[data-section="empty"]::-webkit-scrollbar,
main::-webkit-scrollbar,
.app::-webkit-scrollbar,
.page::-webkit-scrollbar,
.content::-webkit-scrollbar {
  width: 0;
  height: 0;
}