/* GD Checkout Styler — Serving Size theme
   Full visual design (colours, backgrounds, selected-state, banner, shadows)
   from the CollaReplen "Add to Cart Module" reference — but:
     • NO outer container box: .offer-card is layout-only (no bg/border/
       shadow/padding) so the module sits in the page, not in a card.
     • NO font-family anywhere: text inherits the FunnelKit page's font.
   Scoped under .gd-serving. Prices injected by script.js from the
   server-resolved gdCSConfig.servingSize (never hardcoded here). */

.gd-serving{
  --cream:#f4ecdd; --cream-2:#efe5d2;
  --ink:#3a2418; --ink-2:#523629; --brown:#52392a;
  --green:#2a4419; --green-2:#3f6529; --green-3:#5c8a3e;
  --green-soft:#eef5e2; --gold:#c79a3a; --strike:#b85c4e;
  --border:rgba(58,36,24,.10);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  display:block; width:100%; margin:0 auto 20px;
}
.gd-serving *{box-sizing:border-box}

/* layout-only wrapper — no background / border / shadow.
   20px left/right breathing room so it isn't flush to the column/screen
   edges (kept as horizontal padding so the centred max-width still works
   and the radio↔feats alignment is preserved). */
.gd-serving .offer-card{
  width:100%; max-width:520px; margin:0 auto;
  background:none; border:0; border-radius:0; box-shadow:none;
  padding:0 20px;
}

/* ---------------- Step 1: serving picker ---------------- */
.gd-serving .picker-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px; gap:12px; flex-wrap:wrap;
}
/* "How many pouches?" — real <h2> at 18px. !important because making it an
   <h2> pulls in the FunnelKit checkout theme's own h2 rule (14px, margin
   20px 0 10px) which otherwise wins the cascade and shrinks/offsets it. */
.gd-serving .picker-head .label{
  font-weight:600 !important;
  font-size:18px !important;
  line-height:1.3 !important;
  margin:0 !important;
  padding:0 !important;
  color:var(--ink); letter-spacing:-.01em;
}
.gd-serving .promo-pill{
  display:inline-flex; align-items:center; gap:6px;
  background:#ece2c9; color:var(--ink);
  border-radius:999px; padding:6px 12px;
  font-size:.72em; font-weight:600; letter-spacing:.02em;
}
.gd-serving .promo-pill .pp-tag{
  background:var(--gold); color:#fff; padding:2px 7px; border-radius:4px;
  font-size:.82em; font-weight:800; letter-spacing:.06em;
}
.gd-serving .pouch-picker{
  background:#ece2c9; border-radius:999px; padding:5px;
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  margin-bottom:24px; position:relative;
}
.gd-serving .pouch-picker .pp-opt{
  border:0; background:transparent; cursor:pointer;
  padding:13px 10px; border-radius:999px; min-height:44px;
  font:inherit; font-weight:600; color:#8a7d6c;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
  display:flex; flex-direction:column; align-items:center; gap:2px; line-height:1.15;
}
.gd-serving .pouch-picker .pp-opt .n{
  font-weight:700; font-size:1.1em; color:inherit;
}
.gd-serving .pouch-picker .pp-opt .d{
  font-size:.66em; letter-spacing:.04em; text-transform:uppercase;
  font-weight:600; opacity:.85;
}
.gd-serving .pouch-picker .pp-opt.is-active{
  background:var(--green-soft); color:var(--green);
  box-shadow:inset 0 0 0 2px var(--green-2), 0 1px 0 rgba(58,36,24,.04);
}
.gd-serving .pouch-picker .pp-opt:focus-visible{
  outline:3px solid var(--green-3); outline-offset:2px;
}

/* ---------------- Section headers ---------------- */
.gd-serving .step-label{
  font-weight:600; font-size:1.25em; margin:0 0 12px; letter-spacing:-.01em;
}
.gd-serving .step-label .step-tag{
  font-weight:700; font-size:.65em; color:var(--green-2);
  text-transform:uppercase; letter-spacing:.04em; margin-left:4px;
}
.gd-serving .step-label-otp{margin-top:18px}

/* ---------------- Offer cards ---------------- */
.gd-serving .offers{display:flex; flex-direction:column; gap:12px; margin-bottom:18px; padding:0 !important}
.gd-serving .offers-otp{margin-bottom:18px; padding:0 !important}
/* padding:0 !important — the live FunnelKit/checkout theme injects ~22px
   padding onto generic divs incl. .offer, which pushed the banner ~24px off
   the corners and over-padded the card. The card's internal spacing is owned
   solely by .banner/.body/.feats below. */
.gd-serving .offer{
  display:block; position:relative; cursor:pointer;
  background:#faf4e6; border:2px solid rgba(58,36,24,.18); border-radius:14px;
  transition:border-color .15s ease, background .15s ease, box-shadow .2s ease;
  overflow:hidden;
  padding:0 !important;
  /* the live FunnelKit theme forces text-align:center on a node between
     .offer-card and .offer; pin our card text left so titles/sub aren't
     centered. .price/.banner/.ltd-banner re-assert their own alignment. */
  text-align:left !important;
}
.gd-serving .offer:focus-visible{outline:3px solid var(--green-3); outline-offset:2px}
.gd-serving .offer.is-selected{
  border-color:var(--green-2); background:var(--green-soft);
  box-shadow:0 0 0 3px rgba(92,138,62,.18), 0 6px 18px rgba(63,101,41,.15);
}
.gd-serving .offer .banner{
  background:var(--green); color:var(--gold); text-align:center !important;
  font-weight:800; font-size:.72em; letter-spacing:.12em;
  padding:8px 12px; margin:0 !important; text-transform:uppercase;
}
.gd-serving .offer .banner em{font-style:normal; color:#fff}
.gd-serving .offer .body{
  padding:16px 18px 14px !important;
  display:grid; grid-template-columns:1fr auto; gap:14px; align-items:start;
}
.gd-serving .offer .info{display:flex; align-items:flex-start; gap:12px; min-width:0}
.gd-serving .offer .radio{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  border:2px solid rgba(58,36,24,.3); background:#fff; margin-top:2px;
  display:flex; align-items:center; justify-content:center; transition:all .15s ease;
}
.gd-serving .offer.is-selected .radio{border-color:var(--green-2); background:var(--green-2)}
.gd-serving .offer.is-selected .radio::after{
  content:""; width:8px; height:8px; border-radius:50%; background:#fff;
}
.gd-serving .offer .info .text{min-width:0}
.gd-serving .offer .info .title{
  font-weight:800; font-size:1.05em; line-height:1.2; color:var(--ink); letter-spacing:-.005em;
}
/* calculated per-serving price, shown directly under the sub text */
.gd-serving .offer .info .per-serving{
  font-size:.8em; color:var(--green-2); font-weight:800;
  margin-top:4px; letter-spacing:.01em;
}
.gd-serving .offer .info .sub{
  font-size:.78em; color:#6b5a45; margin-top:5px; line-height:1.4; font-weight:500;
}
.gd-serving .offer .price{text-align:right !important; min-width:0}
.gd-serving .offer .price .row{display:flex; align-items:baseline; justify-content:flex-end; gap:8px}
.gd-serving .offer .price .p{
  font-weight:800; font-size:1.38em; line-height:1; color:var(--ink);
}
.gd-serving .offer .price .p .mo{font-size:.6em; font-weight:600; color:#6b5a45; margin-left:1px}
.gd-serving .offer .price .total{
  font-weight:700; font-size:.8em; color:var(--ink-2);
}
.gd-serving .offer .price .sub-line{margin-top:5px; gap:6px}
.gd-serving .offer .price .was{
  color:var(--strike); text-decoration:line-through; font-size:.8em; font-weight:600;
}
.gd-serving .offer .price .bogo-tag{
  color:var(--green-2); font-weight:800; letter-spacing:.04em; font-size:.7em;
  text-transform:uppercase; margin-top:6px;
}
.gd-serving .offer .price .per{
  font-weight:600; color:#6b4a2e; font-size:.72em;
  margin-top:6px; letter-spacing:.01em; white-space:nowrap;
}
.gd-serving .offer .price .note{
  font-size:.68em; color:#6b5a45; margin-top:6px; font-weight:600;
}
/* Left padding matches .offer .body (18px) so the ✓ column lines up under
   the radio button. !important + list-style/margin resets defeat the
   FunnelKit/theme global `ul` reset that otherwise zeroes this padding. */
.gd-serving .offer .feats{
  list-style:none !important;
  padding:12px 18px 14px 18px !important;
  margin:0 !important;
  display:flex; flex-direction:column; gap:8px;
  border-top:1px dashed rgba(63,101,41,.25); background:rgba(255,255,255,.25);
}
.gd-serving .offer .feats li{
  display:flex; align-items:center; gap:10px;
  font-size:.8em; color:var(--ink-2); font-weight:500;
  padding-left:0 !important; margin-left:0 !important; list-style:none !important;
}
.gd-serving .offer .feats li::marker{content:""}
.gd-serving .offer .feats li::before{
  content:"\2713"; color:var(--green-2); font-weight:800; font-size:1em;
  flex:0 0 16px; text-align:center;
}
.gd-serving .offer.is-unavailable{opacity:.5; pointer-events:none; filter:grayscale(.4)}

/* ---------------- Footer banner ---------------- */
.gd-serving .ltd-banner{
  background:#f7eed2; border:1px solid rgba(199,154,58,.35);
  border-radius:10px; padding:12px 16px; margin-top:14px; text-align:center !important;
  font-size:.8em; font-weight:600; color:var(--ink); letter-spacing:.005em;
}
.gd-serving .ltd-banner .check{color:var(--green-2); font-weight:800}
/* footer banner is per active offer now (filled/toggled by JS) — no
   blanket hide-on-otp rule */

/* ---------------- State (a11y / error only — never blocks) ---------------- */
.gd-serving .gd-srv-status{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.gd-serving[data-state="hydrating"] .offer-card{opacity:.5}
.gd-serving .gd-srv-error{
  display:none; background:#fbeae7; border:1px solid var(--strike);
  color:#7a2e22; border-radius:10px; padding:12px 14px; margin-top:14px;
  font-size:.82em; font-weight:600; text-align:center;
}
.gd-serving[data-state="error"] .gd-srv-error{display:block}

/* ---------------- Mobile ---------------- */
@media (max-width:520px){
  .gd-serving .pouch-picker .pp-opt{padding:11px 8px}
  .gd-serving .offer .body{padding:14px 14px 12px !important; gap:10px}
  .gd-serving .offer .info{gap:10px}
  /* keep ✓ aligned with the radio at the mobile body padding (14px) */
  .gd-serving .offer .feats{padding-left:14px !important; padding-right:14px !important}

  /* Mobile: break the whole form (#wfacp-e-form) out of the page section's
     24px side gutter to FULL viewport width, then give the inner wrap a
     clean 10px left/right/bottom gutter (top stays flush under the tabs).
     calc(50% - 50vw) = the standard full-bleed negative margin; verified no
     overflow:hidden on any ancestor so it isn't clipped, and no transform so
     sticky/fixed descendants are unaffected. Scoped to serving-size pages
     only (this stylesheet is enqueued solely when theme=serving-size), so it
     never touches default/stacked or other funnels. Step tabs sit above the
     wrap and are untouched. The card's own 20px side padding is zeroed on
     mobile so the net side gutter is exactly the 10px requested (not 10+20). */
  #wfacp-e-form{
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
  }
  .wfacp-inner-form-detail-wrap{
    border:0 !important;
    padding:0 10px 10px !important;
  }
  /* The wrap's 10px padding IS applied, but FunnelKit's `.wfacp-row`
     (Bootstrap-style `margin:0 -8px` gutter row) sits inside it and pulls
     our serving UI back out by 8px, so only ~2px gutter showed. Cancel that
     negative margin ONLY on the row that wraps our serving card (:has) so
     the requested 10px is real; step-2/3 form-field rows keep their gutter. */
  .wfacp-row:has(.gd-serving){
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .gd-serving .offer-card{
    padding-left:0 !important;
    padding-right:0 !important;
  }
}