/* Fallback tokens (agar styles.css me already hai toh bhi ok) */
:root{
  --brand: #0b6b57;
  --accent:#d14b2a;
  --brandText:#ffffff;
  --ink-rgb: 21,21,21;
}

/* Keep checkout scroll lock */
body.co-lock{ overflow:hidden; }

/* =========================
   PRODUCT (Scoped)
========================= */
.pd{
  --bg:#fff;
  --ink:#151515;
  --muted: rgba(21,21,21,.65);
  --border: rgba(21,21,21,.12);

  background: var(--bg);
  color: var(--ink);
  font-family:"Assistant", system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.pd-wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 14px 28px;
}

.pd-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items:start;
}
@media (max-width: 900px){
  .pd-grid{ grid-template-columns: 1fr; }
}

/* Gallery */
.pd-gallery{
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.05);
}
.pd-main{
  width:100%;
  aspect-ratio: 1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
  touch-action: pan-y;
}
.pd-main img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
  transition: opacity .16s ease;
}

.pd-thumbs{
  border-top:1px solid var(--border);
  padding:10px;
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:10px;
  background: linear-gradient(180deg,#fff, rgba(11,107,87,.04));
}
.pd-thumb{
  height:54px;
  border-radius:10px;
  border:1px solid rgba(21,21,21,.14);
  overflow:hidden;
  background:#fff;
  padding:0;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.pd-thumb:hover{ transform: translateY(-1px); box-shadow:0 12px 22px rgba(0,0,0,.06); }
.pd-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-thumb.is-active{ border-color: var(--brand); box-shadow:0 0 0 2px rgba(11,107,87,.14); }

/* Info */
.pd-info{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  padding:16px 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,.05);
}
.pd-title{ margin:0; font-size:22px; font-weight:900; line-height:1.2; }
.pd-sub{ margin-top:6px; font-size:13px; font-weight:800; color: var(--muted); }

/*.pd-pricebox{*/
/*  margin-top:14px;*/
/*  padding:12px;*/
/*  border-radius:12px;*/
/*  border:1px solid rgba(11,107,87,.18);*/
/*  background: linear-gradient(180deg, rgba(11,107,87,.06), rgba(11,107,87,.03));*/
/*}*/
/*.pd-pricerow{ display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }*/
/*.pd-price{ font-size:26px; font-weight:950; }*/
/*.pd-compare{ font-weight:850; color: var(--muted); text-decoration: line-through; }*/
/*.pd-off{ font-weight:950; color: var(--accent); }*/
/*.pd-tax{ margin-top:6px; font-size:12px; font-weight:800; color: rgba(21,21,21,.60); }*/
/* ✅ Price layout like your screenshot (strip style)
   Paste this AFTER your existing price CSS (so it overrides)
*/

/* ✅ UPDATED PRICE CSS (₹ gap + compare empty spacing fix)
   Paste this AFTER your existing price CSS (or replace your price block with this)
*/

/* Default: tax price ke paas (no big empty gap) */
.pd-pricebox{
  margin-top:14px;
  padding:10px 12px;
  border-radius:14px;

  display:flex;
  align-items:baseline;
  justify-content:flex-start; /* ✅ not space-between */
  gap:10px;
  flex-wrap:nowrap;           /* ✅ keep one line */
}

/* price row always single line */
.pd-pricerow{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.pd-price,
.pd-compare,
.pd-off,
.pd-tax{
  flex:0 0 auto;
  white-space:nowrap;
}

/* ₹ gap tighten (helps even if some font shows spacing) */
.pd-price,
.pd-compare{
  letter-spacing:0;
  word-spacing:-0.18em; /* ✅ visually removes ₹ gap */
}

.pd-price{ font-size:40px; font-weight:950; }

.pd-compare{
  font-size:18px;
  font-weight:850;
  color:rgba(21,21,21,.55);
  text-decoration:line-through;
}

.pd-off{
  font-size:12px;
  font-weight:950;
  line-height:1;
  padding:5px 8px;
  border-radius:8px;
  color:#7f8620;
  border:1.6px solid #7f8620;
  background:rgba(255,255,255,.55);
}

/* tax normal flow */
.pd-tax{
  margin-top:0 !important;
  font-size:14px;
  font-weight:850;
  color:rgba(21,21,21,.78);
}

/* ✅ When compare/off is visible, tax ko right push karo
   (JS will toggle .has-compare on .pd-pricebox) */
.pd-pricebox.has-compare .pd-tax{
  margin-left:auto;
}

/* Mobile: keep one line by shrinking compare/off */
@media (max-width: 640px){
  .pd-pricebox{ gap:8px; }
  .pd-price{ font-size:34px; }
  .pd-compare{ font-size:14px; }
  .pd-off{ font-size:10.5px; padding:3px 6px; }
  .pd-tax{ font-size:12px; }
}

@media (max-width: 360px){
  .pd-price{ font-size:32px; }
  .pd-compare{ font-size:13px; }
  .pd-off{ font-size:10px; padding:3px 5px; }
  .pd-tax{ font-size:11.5px; }
}



/* ✅ Badges */
.pd-badges{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
/* ✅ Badges: Desktop slightly bigger, Mobile smaller + centered one-line */

/* Desktop (default) */
.pd-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.pd-badge{
  position:relative;
  border-radius:999px !important;

  /* desktop size */
  padding: 7px 11px !important;
  font-size: 12.2px !important;
  line-height: 1 !important;
  font-weight: 900 !important;

  background: linear-gradient(180deg, rgba(11,107,87,.07), rgba(11,107,87,.02)) !important;
  border: 1.5px dashed rgba(11,107,87,.55) !important;

  box-shadow:
    0 6px 14px rgba(0,0,0,.05),
    inset 0 0 0 1px rgba(255,255,255,.85) !important;

  white-space:nowrap;
}

.pd-badge::before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:999px;
  border:1px solid rgba(21,21,21,.07);
  pointer-events:none;
}

.pd-badge::after{
  content:"";
  position:absolute;
  top:-55%;
  left:-35%;
  width:55%;
  height:220%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
  opacity:.22;
  pointer-events:none;
}

/* Mobile: smaller + single line + centered */
@media (max-width: 640px){
  .pd-badges{
    justify-content:center;     /* ✅ center */
    flex-wrap:nowrap;           /* ✅ one line */
    overflow-x:auto;            /* scroll if needed */
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
    scrollbar-width:none;
  }
  .pd-badges::-webkit-scrollbar{ display:none; }

  .pd-badge{
    flex:0 0 auto;
    padding: 5px 8px !important;
    font-size: 10.8px !important;
    border-width: 1.3px !important;
  }

  .pd-badge::before{ inset:1.5px; }
}

.pd-badge-ic{ font-size:14px; }

/* =========================
   ✅ UPDATED VARIANTS (No right overflow)
   - Desktop/Tablet: auto-fit
   - Mobile: 3 variants one-line WITHOUT scroll (compact)
   Replace your whole variants block with this
========================= */

/* Variants */
.pd-variant{ margin-top:14px; }
.pd-variant-head{ font-size:14px; font-weight:950; margin-bottom:10px; }

/* ✅ Desktop/Tablet: auto-fit */
.pd-variant-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:10px;
}

/* ✅ Important: prevent layout pushing to right */
.pd-grid > *{ min-width:0; }
.pd-info{ min-width:0; }
.pd-variant-grid > label{ min-width:0; display:block; margin:0; }

/* ✅ Mobile: 3 in one line (no scroll) */
/* ✅ Mobile me 3rd variant niche na aaye: min width aur text aur chhota
   Replace ONLY your mobile @media block with this
*/
@media (max-width: 640px){
  .pd-variant-grid{
    display:grid !important;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important; /* ✅ smaller */
    gap:7px !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    overflow:visible !important;
    padding:0 !important;
    margin:0 !important;
  }

  /* more compact */
  .pd-vcard{ min-height: 72px !important; border-radius:10px !important; }
  .pd-vtop{ padding:6px !important; font-size:10.6px !important; }
  .pd-vbot{ padding:6px !important; }
  .pd-vprice{ font-size:10.6px !important; }
  .pd-vstrike{ margin-left:5px !important; font-size:10.4px !important; }
  .pd-vmeta{ font-size:10px !important; }
}


/* Card styles */
.pd-vradio{ display:none; }

.pd-vcard{
  border:1.5px solid rgba(21,21,21,.18);
  border-radius:12px;
  background: rgba(209,75,42,.05);
  overflow:hidden;
  cursor:pointer;
  min-height:92px;
  display:flex;
  flex-direction:column;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.pd-vcard:hover{ transform: translateY(-1px); box-shadow:0 12px 24px rgba(0,0,0,.06); }

.pd-vtop{
  padding:10px;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pd-vbot{
  margin-top:auto;
  padding:10px;
  background: rgba(255,255,255,.8);
  border-top:1px solid rgba(21,21,21,.08);
}
.pd-vprice{
  font-weight:950;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pd-vstrike{
  margin-left:8px;
  font-weight:850;
  color:rgba(21,21,21,.55);
  text-decoration:line-through;
}
.pd-vmeta{
  margin-top:4px;
  font-size:12px;
  font-weight:900;
  color: rgba(11,107,87,.95);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pd-vradio:checked + .pd-vcard{
  border-color: var(--brand);
  background: rgba(11,107,87,.06);
}
.pd-vradio:checked + .pd-vcard .pd-vtop{
  background: var(--brand);
  color: var(--brandText);
}


/* Promo (milk trial) */
.pd-promo{
  margin-top:14px;
  padding:14px 12px;
  border-radius:12px;
  border:1px solid rgba(209,75,42,.24);
  background: rgba(209,75,42,.08);
  font-weight:950;
  text-align:center;
}

/* Qty + CTA */
.pd-cta{
  display:flex;
  gap:10px;
  margin-top:14px;
  align-items:center;
}
.pd-qty{
  display:flex;
  align-items:center;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  height:48px;
  background:#fff;
  flex:0 0 auto;
}
.pd-qty button{
  width:44px; height:48px;
  border:0;
  background: rgba(11,107,87,.08);
  cursor:pointer;
  font-size:18px;
  font-weight:950;
}
.pd-qty input{
  width:56px;
  height:48px;
  border:0;
  outline:none;
  text-align:center;
  font-weight:950;
}

/* ✅ ORDER BUTTON animation back */
.pd-btn{
  position:relative;
  overflow:hidden;
  height:48px;
  border-radius:12px;
  border:2px solid rgba(11,107,87,.95);
  background: var(--brand);
  color: var(--brandText);
  font-weight:950;
  font-size:15px;
  cursor:pointer;
  flex:1;
  transition: transform .10s ease, box-shadow .16s ease, filter .16s ease;
}
.pd-btn:hover{ transform: translateY(-1px); box-shadow:0 16px 28px rgba(0,0,0,.12); filter:brightness(.99); }

.pd-btn.is-attn{
  animation: pdPulse 1.8s ease-in-out infinite;
}
.pd-btn.is-attn::after{
  content:"";
  position:absolute;
  top:0;
  left:-45%;
  width:45%;
  height:100%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
  animation: pdShine 2.2s ease-in-out infinite;
  pointer-events:none;
}
.pd-btn.is-clicked{
  transform: translateY(0) scale(.99);
  filter:brightness(.97);
}

@keyframes pdPulse{
  0%,100%{ box-shadow: 0 14px 28px rgba(0,0,0,.12); }
  50%{ box-shadow: 0 18px 36px rgba(0,0,0,.18); }
}
@keyframes pdShine{
  0%{ left:-45%; opacity:0; }
  25%{ opacity:.75; }
  55%{ opacity:.25; }
  100%{ left:110%; opacity:0; }
}

@media (max-width: 640px){
  .pd-cta{ gap:8px; }
  .pd-qty{ flex:0 0 92px; }
  .pd-qty button{ width:30px; }
  .pd-qty input{ width:36px; }
}

/* Description */
.pd-desc{
  margin-top:14px;
  padding:16px 14px;
  border-radius:14px;
  border:2px dashed rgba(21,21,21,.32);
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
}
.pd-desc-title{
  font-size:13px;
  font-weight:950;
  letter-spacing:.6px;
  text-transform:uppercase;
  padding-bottom:10px;
  border-bottom:2px dotted rgba(11,107,87,.35);
}
.pd-desc-text{ margin:10px 0 0; font-size:13.5px; font-weight:650; color: rgba(21,21,21,.72); line-height:1.6; }

/* =========================
   Reviews (SMALL image thumbnail)
========================= */
.pd-reviews{ padding: 0 14px 28px; }
.pd-reviews-inner{
  max-width:1180px;
  margin:0 auto;
  border:1px solid rgba(21,21,21,.12);
  border-radius:14px;
  padding:16px;
  background:#fff;
}
.pd-reviews-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.pd-reviews-title{ margin:0; font-weight:950; font-size:18px; }

.pd-rev-score{
  display:grid;
  gap:4px;
  text-align:right;
}
.pd-rev-avg{ font-size:22px; font-weight:999; }
.pd-rev-stars{ font-weight:999; letter-spacing:1px; color: rgba(209,75,42,.95); }
.pd-rev-count{ font-size:12.5px; font-weight:850; color: rgba(21,21,21,.60); }
.pd-rev-empty{ font-weight:850; color: rgba(21,21,21,.60); }

.pd-reviews-list{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:12px;
}

/* ✅ grid layout so image stays small and realistic */
.pd-rev-card{
  border:1px solid rgba(21,21,21,.12);
  border-radius:14px;
  padding:12px;
  background:#fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.05);

  display:grid;
  grid-template-columns: 56px 1fr;
  column-gap:10px;
  row-gap:6px;
  align-items:start;
}

.pd-rev-img{
  width:56px;
  height:56px;
  border-radius:16px;
  object-fit:cover;
  border:1px solid rgba(21,21,21,.10);
  background:#fff;
  grid-column:1;
  grid-row:1 / span 10; /* enough to cover all rows */
}

.pd-rev-top,
.pd-rev-title,
.pd-rev-text,
.pd-rev-date{
  grid-column:2;
}

.pd-rev-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.pd-rev-name{ font-weight:950; }
.pd-rev-title{ font-weight:950; }
.pd-rev-text{ font-weight:750; color: rgba(21,21,21,.72); line-height:1.5; }
.pd-rev-date{ font-size:12px; font-weight:850; color: rgba(21,21,21,.55); }

/* =========================
   CHECKOUT (Reusable)
========================= */
.co-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.48);
  opacity:0;
  pointer-events:none;
  transition: opacity .28s cubic-bezier(.2,.8,.2,1);
  z-index:10998;
}
.co-overlay.is-open{ opacity:1; pointer-events:auto; }

.co{
  position:fixed;
  z-index:10999;
  background:#fff;
  border:1px solid rgba(var(--ink-rgb), .12);
  box-shadow: 0 26px 70px rgba(0,0,0,.22);
  opacity:0;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  overflow:hidden;

  transition:
    transform .42s cubic-bezier(.18,.9,.18,1),
    opacity .30s cubic-bezier(.2,.8,.2,1);
  will-change: transform, opacity;
}

@media (min-width: 769px){
  .co{
    top:0; right:0;
    height:100vh;
    width:min(440px, 92vw);
    border-radius: 18px 0 0 18px;
    transform: translateX(104%);
  }
}
@media (max-width: 768px){
  .co{
    left:0; right:0; bottom:0;
    width:100%;
    max-height:90vh;
    border-radius: 18px 18px 0 0;
    transform: translateY(104%);
  }
}
.co.is-open{ opacity:1; pointer-events:auto; transform: translate(0,0); }

.co-head{
  padding:14px 16px 10px;
  border-bottom:1px solid rgba(var(--ink-rgb), .10);
  display:flex;
  justify-content:space-between;
  gap:10px;
  background:
    radial-gradient(900px 420px at 12% -25%, rgba(11,107,87,.18), transparent 55%),
    radial-gradient(760px 420px at 90% 0%, rgba(0,120,255,.10), transparent 55%),
    #fff;
}
.co-kicker{ font-size:12px; font-weight:950; text-transform:uppercase; letter-spacing:.4px; color: rgba(11,107,87,.95); }
.co-title{ margin:4px 0 0; font-size:17px; font-weight:950; color: rgba(var(--ink-rgb), .92); }
.co-trust{ margin-top:6px; font-size:12.5px; font-weight:850; color: rgba(var(--ink-rgb), .62); }

.co-close{
  width:42px; height:42px;
  border-radius:14px;
  border:1px solid rgba(var(--ink-rgb), .10);
  background: rgba(255,255,255,.8);
  cursor:pointer;
  font-weight:950;
}

.co-body{ padding:14px 16px 16px; overflow:auto; }

.co-sum{
  display:flex; align-items:center; gap:12px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(var(--ink-rgb), .10);
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
  margin-bottom:12px;
}
.co-sum-img{ width:64px; height:64px; border-radius:18px; object-fit:cover; border:1px solid rgba(var(--ink-rgb), .10); background:#fff; }
.co-sum-name{ font-weight:950; font-size:14.5px; color: rgba(var(--ink-rgb), .92); }
.co-sum-sub{ margin-top:6px; font-size:12.8px; font-weight:850; color: rgba(var(--ink-rgb), .62); }

.co-stepper{ display:flex; align-items:center; gap:8px; margin: 2px 0 12px; }
.co-stepper .dot{ width:8px; height:8px; border-radius:999px; background: rgba(0,0,0,.18); }
.co-stepper .dot.is-on{ background: rgba(0,120,255,.95); }
.co-steptext{ margin-left:auto; font-weight:850; font-size:12px; color: rgba(var(--ink-rgb), .62); }

.co-step{ display:none; animation: coIn .18s ease; }
.co-step.is-active{ display:block; }
@keyframes coIn{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none;} }

.co-row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.co-row.onecol{ grid-template-columns: 1fr; }
@media (max-width:420px){ .co-row{ grid-template-columns:1fr; } }

.co-field label{
  display:block;
  font-size:12.5px;
  font-weight:950;
  margin-bottom:6px;
  color: rgba(var(--ink-rgb), .86);
}
.co input, .co textarea{
  width:100%;
  border-radius:12px;
  padding:10px 12px;
  border:1px solid rgba(11,107,87,.22);
  background: rgba(255,255,255,.94);
  outline:none;
  font-weight:900;
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
  transition: border-color .12s ease, box-shadow .12s ease, transform .10s ease;
}
.co textarea{ resize:vertical; min-height: 92px; line-height:1.45; }
.co input:focus, .co textarea:focus{
  border-color: rgba(11,107,87,.95);
  box-shadow: 0 0 0 4px rgba(11,107,87,.14), 0 16px 28px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

.co-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.co-tags .tag{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(11,107,87,.18);
  background: rgba(11,107,87,.06);
  font-weight:950;
  font-size:12px;
  color: rgba(11,107,87,.95);
}

.co-status{ margin-top:8px; font-size:12.5px; font-weight:900; min-height:16px; color: rgba(var(--ink-rgb), .62); }
.co-status.ok{ color: rgba(0,140,80,.95); }
.co-status.bad{ color: rgba(210,40,40,.95); }

.co-back{
  border:0;
  background:transparent;
  color: rgba(11,107,87,.95);
  font-weight:999;
  cursor:pointer;
  padding:0;
  margin: 2px 0 10px;
}

.co-btn{
  margin-top:12px;
  width:100%;
  height:46px;
  border-radius:14px;
  background: var(--brand);
  color: var(--brandText);
  border:2px solid rgba(11,107,87,.95);
  font-weight:999;
  cursor:pointer;
  transition: transform .10s ease, box-shadow .16s ease;
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
}
.co-btn:hover{ transform: translateY(-1px); box-shadow:0 20px 42px rgba(0,0,0,.16); }
.co-btn.ghost{
  background:#fff;
  color: rgba(var(--ink-rgb), .92);
  border:1px solid rgba(var(--ink-rgb), .14);
}

.co-note{ margin-top:10px; font-size:12px; font-weight:800; color: rgba(var(--ink-rgb), .62); line-height:1.45; }

.co-success{ display:grid; gap:10px; justify-items:center; text-align:center; padding:10px 2px; }
.co-success-icon{
  width:56px; height:56px;
  border-radius:18px;
  display:grid; place-items:center;
  background: rgba(0,140,80,.10);
  border:1px solid rgba(0,140,80,.18);
  font-size:22px;
}
.co-success-title{ font-weight:999; font-size:16px; color: rgba(var(--ink-rgb), .92); }
.co-success-text{ font-weight:850; font-size:13px; color: rgba(var(--ink-rgb), .62); line-height:1.5; }

@media (prefers-reduced-motion: reduce){
  .co, .co-overlay{ transition:none !important; }
  .co-step{ animation:none !important; }
  .pd-btn.is-attn{ animation:none !important; }
  .pd-btn.is-attn::after{ animation:none !important; }
}