*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --sub:      var(--berry, #B5582F);
      --sub-bg:   var(--petal, #E3F2FD);
      --slt:      var(--soft);
      --rose-rgb: 181,88,47;
      --footer-brand-accent: #B5582F;
      --footer-hash-color: #B5582F;
      --benefits-bg: #9A8A50;
      --f-display: 'Fraunces', Georgia, serif;
      --f-body: 'Inter', system-ui, sans-serif;
    }
    html { scroll-behavior: smooth; }
    body { font-family: var(--font-body, 'Inter', sans-serif); background: var(--cream); color: var(--ink); font-size: var(--body-size, 1rem); line-height: var(--body-lh, 1.7); }
    h1, h2, h3 { font-family: var(--font-heading, 'Syne', sans-serif); }
    h1 { font-weight: var(--h1-weight, 800); line-height: var(--h1-lh, 1.05); }
    h2 { font-weight: var(--h2-weight, 700); line-height: var(--h2-lh, 1.1); }
    h3 { font-weight: var(--h3-weight, 700); line-height: var(--h3-lh, 1.3); }
    a { text-decoration: none; color: inherit; }
    button { cursor: pointer; border: none; font-family: var(--font-body); }

    /* ── Topbar ── */
    .topbar { background: var(--choc); color: var(--cream); text-align: center; padding: 8px 16px; font-size: 12px; letter-spacing: .08em; font-weight: 500; }
    .topbar b { color: var(--clay-soft); }

    /* ── Nav ── */
    nav.bb-nav { background: var(--cream); border-bottom: 1px solid var(--petal); position: sticky; top: 0; z-index: 900;
          padding: 0 28px; display: flex; align-items: center; justify-content: space-between;
          height: 64px; box-shadow: 0 2px 12px rgba(var(--rose-rgb, 181,88,47),.06); }
    body.bb-topbar-sticky .bb-topbar { position: sticky; top: 0; z-index: 950; }
    body.bb-topbar-sticky nav.bb-nav { top: var(--topbar-height, 0px); }
    #bb-sections-wrapper { display:flex; flex-direction:column; width:100%; }
    .brand { font-family: var(--font-heading), sans-serif; font-size: var(--brand-size, 1.5rem); font-weight: 800; color: var(--berry); letter-spacing: -.03em; }
    strong { color: inherit; }
    .rt strong, .sub strong, p strong { color: var(--rose); }
    .brand span { color: var(--rose); }
    .nav-r { display: flex; align-items: center; gap: 16px; }
    .nav-social { display: flex; gap: 12px; }
    .nav-social a { color: var(--mist); transition: color .2s; }
    .nav-social a:hover { color: var(--rose); }
    .cart-pill { background: var(--rose); color: white; padding: 8px 20px; border-radius: 999px;
                 font-size: .84rem; font-weight: 600; display: flex; align-items: center; gap: 8px; transition: background .2s; }
    .cart-pill:hover { background: var(--btn-hover, var(--berry)); }
    .cbadge { background:var(--cream); color: var(--rose); border-radius: 50%; width: 20px; height: 20px;
              font-size: .72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }

    /* ── Hero ── */
    .hero { background: linear-gradient(var(--grad-hero-dir),var(--grad-hero-start),var(--grad-hero-end)); color: var(--hero-text-color, white); background-size: cover; background-position: center;
            padding: 80px 0 64px; text-align: center; position: relative; overflow: hidden; }
    .hero::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 80% 20%,rgba(255,255,255,.08),transparent 60%); }
    .hero-inner { position: relative; max-width: 640px; margin: auto; padding: 0 40px; }
    .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.15);
                  border: 1px solid rgba(255,255,255,.3); border-radius: calc(var(--radius) * 1.25); padding: 5px 16px;
                  font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 20px; }
    .hero h1 { font-size: var(--hero-h1-size, clamp(2rem,5vw,3.2rem)); line-height: var(--h1-lh, 1.05); font-weight: var(--h1-weight, 800); margin-bottom: 16px; letter-spacing: -.03em; }
    .hero p  { font-size: 1rem; opacity: .9; margin-bottom: 30px; font-weight: 300; }
    .hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
    .btn-w { background:var(--cream); color: var(--berry); padding: 12px 28px; border-radius: calc(var(--radius) * 1.4); font-weight: 700; font-size: .92rem; transition: transform .2s,box-shadow .2s; box-shadow: 0 4px 18px rgba(0,0,0,.15); }
    .btn-w:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.2); }
    .btn-g { background: transparent; color: white; border: 2px solid rgba(255,255,255,.6); padding: 12px 28px; border-radius: calc(var(--radius) * 1.4); font-weight: 600; font-size: .92rem; transition: background .2s; }
    .btn-g:hover { background: rgba(255,255,255,.15); }
    .trust-pills { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
    .tp { font-size: .78rem; font-weight: 600; opacity: .9; display: flex; align-items: center; gap: 5px; }

    /* ── Strip ── */
    .strip { background: var(--soft); border-bottom: 1px solid var(--petal); padding: 14px 0; }
    .strip-in { max-width: 900px; margin: auto; padding: 0 40px; display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
    #bb-vis-strip[data-strip-transparent="true"] { background: transparent !important; border-bottom: none !important; }
    body[data-strip-transparent="true"] #bb-vis-strip { background: transparent !important; border-bottom: none !important; }
    .sp { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--berry); }

    /* ── Container system for standardized spacing ── */
    .container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
    .container-narrow { max-width: 1400px; margin: 0 auto; padding: 0 40px; }

    /* ── Products ── */
    section { padding: 100px 0; }
    section.tight { padding: 60px 0; }
    #products { background: var(--products-bg, var(--soft)); }
    .sh { text-align: center; margin-bottom: 48px; }
    .lbl { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rose); margin-bottom: 8px; }
    .ttl { font-size: var(--h2-size, clamp(1.7rem,3vw,2.4rem)); font-weight: var(--h2-weight, 800); line-height: var(--h2-lh, 1.1); margin-bottom: 12px; }
    .sub { font-size: .9rem; color: var(--mist); max-width: 520px; margin: auto; line-height: 1.7; }
    .pgrid { max-width: 1400px; margin: auto; display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 24px; }
    .pc { border-radius: var(--cs-pc-border-radius, calc(var(--radius) * 1.1)); overflow: hidden; border: var(--cs-pc-border-width, 1px) solid var(--cs-pc-border-color, var(--petal)); background: var(--cs-pc-bg, transparent); box-shadow: 0 4px 18px rgba(var(--rose-rgb, 181,88,47),.05); transition: transform .25s,box-shadow .25s; display: flex; flex-direction: column; }
    body[data-pc-border="none"] .pc { border: none; }
    body[data-pc-border="top"] .pc { border: none; border-top: var(--cs-pc-border-width, 1px) solid var(--cs-pc-border-color, var(--petal)); }
    body[data-pc-border="top-bottom"] .pc { border: none; border-top: var(--cs-pc-border-width, 1px) solid var(--cs-pc-border-color, var(--petal)); border-bottom: var(--cs-pc-border-width, 1px) solid var(--cs-pc-border-color, var(--petal)); }
    body[data-product-carousel="true"] .pgrid { display: flex; overflow-x: auto; gap: 24px; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0 4px 12px; scrollbar-width: none; -ms-overflow-style: none; }
    body[data-product-carousel="true"] .pgrid::-webkit-scrollbar { display: none; }
    body[data-product-carousel="true"] .pgrid > * { flex: 0 0 calc(50% - 12px); min-width: 260px; scroll-snap-align: start; scroll-snap-stop: always; }
    @media (min-width: 1100px) { body[data-product-carousel="true"] .pgrid > * { flex: 0 0 calc(33.333% - 16px); } }
    @media (max-width: 768px)  { body[data-product-carousel="true"] .pgrid > * { flex: 0 0 100%; } }
    .prod-carousel-wrap { position: relative; }
    body:not([data-product-carousel="true"]) .prod-carousel-wrap > .carousel-btn { display: none !important; }
    .pc:hover { transform: translateY(-5px); box-shadow: 0 12px 36px rgba(var(--rose-rgb, 181,88,47),.11); }
    .pi { height: 190px; display: flex; align-items: center; justify-content: center; font-size: 4rem; position: relative; }
    .pb-new  { position:absolute; top:10px; right:10px; background:var(--gold); color:white; font-size:.65rem; font-weight:800; padding:3px 9px; border-radius: calc(var(--radius) * 1.25); }
    .pb-kids { position:absolute; top:10px; left:10px;  background:#7B1FA2; color:white; font-size:.65rem; font-weight:800; padding:3px 9px; border-radius: calc(var(--radius) * 1.25); }
    .pbody { padding: 18px 20px; flex:1; display:flex; flex-direction:column; gap:9px; background: var(--card-bg, #fff); }
    .pn { font-family:var(--font-product,var(--font-heading),sans-serif); font-size:var(--product-name-size,1.1rem); font-weight:800; }
    .pt { font-size:.8rem; color:var(--mist); font-style:italic; line-height:1.5; }
    .macs { display:flex; gap:7px; flex-wrap:wrap; }
    .mac { background:var(--soft); border-radius: calc(var(--radius) * 1.25); padding:3px 10px; font-size:.7rem; font-weight:700; color:var(--berry); }
    .psize { font-size:.76rem; color:var(--mist); background:var(--soft); border-radius: calc(var(--radius) * 0.44); padding:6px 10px; border-left:3px solid var(--rose); }
    .pstor { font-size:.76rem; color:var(--sage); background:var(--slt); border-radius: calc(var(--radius) * 0.44); padding:7px 10px; line-height:1.6; }

    /* ── Bundle selector ── */
    .bundle-selector { display:flex; flex-direction:column; gap:6px; margin-top:2px; }
    .bundle-option { display:flex; align-items:center; gap:10px; padding:9px 12px; border:2px solid var(--petal); border-radius: calc(var(--radius) * 0.625); cursor:pointer; transition:border-color .2s,background .2s; background:var(--cream); }
    .bundle-option:hover   { border-color:var(--rose); background:var(--soft); }
    .bundle-option.selected { border-color:var(--rose); background:var(--soft); }
    .bundle-option input[type="radio"] { accent-color:var(--rose); flex-shrink:0; }
    .bundle-label { flex:1; }
    .bundle-name  { font-size:.8rem; font-weight:700; color:var(--ink); }
    .bundle-sub   { font-size:.7rem; color:var(--mist); }
    .bundle-right { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
    .bundle-price { font-size:.88rem; font-weight:800; color:var(--berry); white-space:nowrap; }
    .bundle-save  { font-size:.65rem; background:var(--slt); color:var(--sage); padding:2px 6px; border-radius: calc(var(--radius) * 0.625); font-weight:700; }

    /* ── Subscription toggle ── */
    .sub-toggle { border:2px solid var(--petal); border-radius: calc(var(--radius) * 0.625); overflow:hidden; margin-top:2px; }
    .sub-toggle-head { display:flex; align-items:center; gap:10px; padding:9px 12px; cursor:pointer; background:var(--cream); transition:background .2s; }
    .sub-toggle-head:hover { background:var(--petal); }
    .sub-toggle-head input[type="checkbox"] { accent-color:var(--sub); flex-shrink:0; width:16px; height:16px; }
    .sub-toggle-label { flex:1; }
    .sub-toggle-title { font-size:.8rem; font-weight:700; color:var(--sub); }
    .sub-toggle-desc  { font-size:.69rem; color:var(--mist); }
    .sub-badge { font-size:.65rem; background:var(--sub-bg); color:var(--sub); padding:2px 7px; border-radius: calc(var(--radius) * 0.625); font-weight:700; white-space:nowrap; }
    .sub-plans { display:none; flex-direction:column; gap:0; border-top:1px solid var(--petal); background:var(--soft); }
    .sub-plans.open { display:flex; }
    .sub-plan-opt { display:flex; align-items:center; gap:10px; padding:8px 14px; cursor:pointer; transition:background .2s; border-bottom:1px solid var(--soft); }
    .sub-plan-opt:last-child { border-bottom:none; }
    .sub-plan-opt:hover { background:var(--petal); }
    .sub-plan-opt input[type="radio"] { accent-color:var(--sub); flex-shrink:0; }
    .sub-plan-name  { font-size:.79rem; font-weight:700; color:var(--sub); }
    .sub-plan-price { font-size:.75rem; color:var(--mist); }
    .sub-plan-right { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; }
    .sub-plan-amt   { font-size:.82rem; font-weight:800; color:var(--sub); white-space:nowrap; }
    .sub-plan-save  { font-size:.65rem; background:var(--slt); color:var(--sage); padding:2px 6px; border-radius: calc(var(--radius) * 0.625); font-weight:700; }

    .ab { background:var(--rose); color:white; border-radius: calc(var(--radius) * 1.4); padding:9px 20px; font-size:.84rem; font-weight:700; transition:background .2s; width:100%; cursor:pointer; border:none; }
    .gb { background:transparent; color:var(--rose); border:1.5px solid var(--rose); border-radius: calc(var(--radius) * 1.4); padding:9px 20px; font-size:.84rem; font-weight:700; cursor:pointer; font-family:var(--font-body); transition:all .2s; }
    .gb:hover { background:var(--rose); color:white; }
    .pc-act { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
    .pc-act .gb { flex:1; text-align:center; }
    .pc-view-page { font-size:.78rem; padding:6px 12px; text-decoration:none; white-space:nowrap; }
    .pc-guarantee { display:flex; align-items:center; justify-content:space-between; gap:6px; flex-wrap:wrap; padding:8px 12px; background:var(--soft); border-radius: calc(var(--radius) * 0.625); margin-top:8px; border:1px solid var(--petal); width:100%; box-sizing:border-box; }
    .pc-guarantee-item { display:flex; align-items:center; gap:4px; font-size:.68rem; color:var(--mist); font-weight:600; white-space:nowrap; flex:1; justify-content:center; }
    .pc-guarantee-item span { font-size:.78rem; }
    .ab:hover { background:var(--btn-hover, var(--berry)); }

    /* ── Comparison Section ── */
    .comp-section { background: var(--cream, #F5EFE6); padding: 80px 0; }
    .comp-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
    .comp-wrap { background: var(--cream-2, #EFE7DA); border-radius: 8px; padding: 8px; }
    .comp-cols { display: grid; grid-template-columns: 2fr 1fr 1fr; padding: 20px 32px; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #8A7E70); border-bottom: 1px solid var(--line, #D5C9B7); }
    .comp-col-bb { text-align: center; color: var(--clay, #B5582F); }
    .comp-col-them { text-align: center; }
    .comp-row { display: grid; grid-template-columns: 2fr 1fr 1fr; align-items: center; padding: 20px 32px; border-bottom: 1px solid var(--line-soft, #D8CCBB); font-size: .9375rem; }
    .comp-row:last-child { border-bottom: none; }
    .comp-row-feat { font-weight: 500; color: var(--ink, #1C1614); }
    /* Value cells now show the real text (icon + descriptive value), not just ✓/— */
    .comp-row-val { display: flex; align-items: center; justify-content: center; gap: 7px; text-align: center; }
    .comp-val-txt { font-size: .82rem; line-height: 1.25; color: var(--muted, #8A7E70); }
    .comp-row-val.comp-bb .comp-val-txt { color: var(--ink, #1C1614); font-weight: 500; }
    .comp-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .72rem; font-weight: 700; flex: none; line-height: 1; }
    .comp-ic-yes  { color: var(--clay, #B5582F); background: rgba(181,88,47,0.12); }
    .comp-ic-no   { color: var(--muted, #8A7E70); background: rgba(31,22,20,0.06); }
    .comp-ic-warn { color: #9A7B3F; background: rgba(154,123,63,0.14); }
    /* legacy classes kept for safety */
    .comp-check-bb { color: var(--clay, #B5582F); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(181,88,47,0.12); }
    .comp-check-them { color: var(--muted, #8A7E70); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(31,22,20,0.06); }
    .comp-dash { color: var(--muted, #8A7E70); opacity: 0.5; font-size: 1.2rem; }
    /* 3-way layout when the 2nd competitor is toggled on */
    .comp-3way .comp-cols, .comp-3way .comp-row { grid-template-columns: 1.7fr 1fr 1fr 1fr; }
    @media (max-width: 600px) {
      section { padding: 60px 0; }
      .container, .container-narrow { padding: 0 20px; }
      #bb-sections-wrapper > #bb-vis-trustpills { padding: 32px 20px; }
      .comp-cols, .comp-row { padding: 14px 16px; font-size: .82rem; }
      .comp-val-txt { font-size: .74rem; }
      .comp-row-val { gap: 4px; flex-direction: column; }
      /* 3-way is dense on phones — allow horizontal scroll instead of crushing */
      .comp-3way .comp-wrap { overflow-x: auto; }
      .comp-3way .comp-cols, .comp-3way .comp-row { min-width: 520px; }
    }

    /* ── Freshness Matters ── */
    .stor-banner { background:var(--cream); color:var(--ink); padding:72px 0; }
    .stor-banner > div { max-width:1200px; margin:0 auto; padding:0 40px; display:grid; grid-template-columns:1fr 2fr; gap:80px; align-items:center; }
    .freshness-left { }
    .freshness-left .lbl { color:var(--clay-soft, #D4AF77); font-size:.69rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:0; }
    .stor-banner h2 { font-family:var(--font-heading),sans-serif; color:var(--ink); font-size:clamp(2rem,3.5vw,3rem); font-weight:800; line-height:1.1; margin-top:18px; margin-bottom:0; letter-spacing:-.03em; }
    .stor-banner h2 span { font-style:italic; }
    .stor-banner .stor-sub { font-size:.9375rem; color:var(--ink-2, #3A2F2A); margin-top:20px; line-height:1.7; max-width:100%; }
    .spills { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
    .spill { background:var(--cream-2, #EFE7DA); border:1px solid var(--line-soft, #D8CCBB); border-radius:6px; padding:24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:0; }
    .spill-icon { font-family:var(--f-display, 'Fraunces', Georgia, serif); font-size:2rem; color:var(--clay, #B5582F); line-height:1; margin-bottom:16px; font-style:italic; }
    .spill-title { font-weight:600; font-size:.9375rem; color:var(--ink); margin-bottom:6px; line-height:1.4; }
    .spill-desc { font-size:.8125rem; color:var(--muted, #8A7E70); line-height:1.5; }

    /* ── Subscription explainer banner ── */
    .sub-banner { background:linear-gradient(var(--grad-subscribe-dir),var(--grad-subscribe-start),var(--grad-subscribe-end)); color:white; padding:44px 0; text-align:center; }
    .sub-banner h2 { font-family:var(--font-heading),sans-serif; color:white; font-size:1.6rem; margin-bottom:10px; }
    .sub-banner p  { font-size:.88rem; opacity:.9; max-width:540px; margin:0 auto 24px; line-height:1.8; }
    .sub-perks { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
    .sub-perk  { background: var(--cs-sp-bg, rgba(255,255,255,.14)); border: var(--cs-sp-border-width, 1px) solid var(--cs-sp-border-color, rgba(255,255,255,.28)); border-radius: var(--cs-sp-border-radius, calc(var(--radius) * 1.75)); padding:8px 18px; font-size:.8rem; font-weight:600; color: var(--cs-sp-title-color, inherit); display:flex; align-items:center; gap:6px; }
    body[data-sp-border="none"] .sub-perk { border: none; }
    body[data-sp-border="top"] .sub-perk { border: none; border-top: var(--cs-sp-border-width, 1px) solid var(--cs-sp-border-color, rgba(255,255,255,.28)); }
    body[data-sp-border="top-bottom"] .sub-perk { border: none; border-top: var(--cs-sp-border-width, 1px) solid var(--cs-sp-border-color, rgba(255,255,255,.28)); border-bottom: var(--cs-sp-border-width, 1px) solid var(--cs-sp-border-color, rgba(255,255,255,.28)); }
    .sub-table { max-width:420px; margin:0 auto; border-radius: calc(var(--radius) * 0.75); overflow:hidden; border:1px solid rgba(255,255,255,.2); }
    .sub-table-row { display:grid; grid-template-columns:1.2fr 1fr 0.8fr; column-gap:12px; align-items:center; padding:9px 16px; font-size:.82rem; border-bottom:1px solid rgba(255,255,255,.12); text-align:left; }
    .sub-table-row > :nth-child(1), .sub-table-row > :nth-child(2) { text-align:left; }
    .sub-table-row > :nth-child(3) { text-align:right; }
    .sub-table-row:last-child { border-bottom:none; }
    .sub-table-head { background:rgba(255,255,255,.15); font-weight:700; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }
    /* ── Subscribe v2 editorial two-column ── */
    .sub2-plan-row{display:grid;grid-template-columns:20px 1fr auto auto;align-items:center;gap:16px;padding:18px 22px;border-radius:10px;border:1px solid var(--petal,#f0d6e8);background:transparent;text-align:left;cursor:pointer;transition:border-color .2s,background .2s;font-family:var(--font-body,'Inter',sans-serif);color:var(--ink);width:100%;}
    .sub2-plan-row.sub2-sel{border-color:var(--ink);background:var(--cream,#FDF8F4);}
    .sub2-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--petal,#ccc);display:flex;align-items:center;justify-content:center;transition:border-color .2s;flex-shrink:0;}
    .sub2-plan-row.sub2-sel .sub2-radio{border-color:var(--ink);}
    .sub2-rdot{width:8px;height:8px;border-radius:50%;background:var(--ink);}
    .sub2-plan-label{font-size:.95rem;font-weight:700;color:var(--ink);}
    .sub2-plan-sub{font-size:.76rem;color:var(--mist);margin-top:2px;}
    .sub2-plan-pct{font-size:1.45rem;font-weight:700;color:var(--clay-soft,#B5582F);font-family:var(--f-display,inherit);line-height:1;}
    .sub2-plan-off{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mist);}
    @media(max-width:820px){.sub2-grid{grid-template-columns:1fr !important;gap:36px !important;}#bb-sub-img-wrap{aspect-ratio:3/2 !important;}}

    /* ── How It Works ── */
    #how-it-works { background: #E8DDC9; padding: 72px 0; }
    .hiw-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
    .hiw-header { text-align: center; margin-bottom: 64px; }
    .hiw-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--clay, #B5582F); display: block; margin-bottom: 14px; }
    .hiw-h2 { font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 800; line-height: 1.1; }
    .hiw-h2 span { font-style: italic; }
    .hiw-steps-wrap { position: relative; }
    .hiw-connector { position: absolute; top: 31px; left: 0; right: 0; height: 2px; background: #D8CCBB; z-index: 0; }
    .hiw-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; position: relative; z-index: 1; }
    .hiw-step { text-align: left; }
    .hiw-step-num { width: 64px; height: 64px; border-radius: 50%; background: var(--cream, #F5EFE6); border: 1px solid #E8D5C4; display: grid; place-items: center; font-family: var(--f-display, 'Fraunces', serif); font-size: 22px; color: var(--clay, #B5582F); font-style: italic; }
    .hiw-step h3 { margin-top: 24px; font-size: 1.375rem; font-weight: 700; line-height: 1.3; }
    .hiw-step p { margin-top: 10px; font-size: .875rem; color: var(--ink-2, #3A2F2A); line-height: 1.6; }
    .hiw-locs { margin-top: 80px; padding: 40px; background: var(--cream, #F5EFE6); border-radius: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
    /* Tablet/mid widths: drop the 4-across steps to 2 (was overflowing right) + stack pickup options */
    @media (max-width: 900px) {
      .hiw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hiw-connector { display: none; }
      .hiw-locs { grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
    }
    .hiw-loc-pill { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 500; background: #EFE7DA; color: var(--ink-2, #3A2F2A); border: 1px solid #D8CCBB; }
    .hiw-loc h4 { margin-top: 14px; font-size: 1.125rem; font-weight: 700; }
    .hiw-loc p { margin-top: 8px; font-size: .875rem; color: var(--muted, #8A7E70); }
    .faq-w { max-width:660px; margin:auto; }
    .fi { border-bottom:1px solid var(--petal); }
    .fq { width:100%; background:none; text-align:left; padding:14px 0; font-size:.88rem; font-weight:600; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:10px; font-family:var(--font-body); }
    .fq::after { content:'+'; font-size:1.1rem; color:var(--rose); flex-shrink:0; }
    .fq.open::after { content:'−'; }
    .fa { font-size:.82rem; color:var(--mist); line-height:1.7; padding:0 0 14px; display:none; }
    .fa.open { display:block; }

    /* ── About / Our Story ── */
    #about { background: var(--cream, #F5EFE6); padding: 80px 0; }
    .os-inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
    .os-portrait-col { position: relative; }
    .founder-ph { border-radius: 12px; height: 560px; overflow: hidden; background: linear-gradient(135deg, var(--petal), var(--soft)); }
    .os-name-card { position: absolute; bottom: 24px; left: 24px; right: 24px; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 8px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; }
    .os-name-card-text { }
    .os-sig { font-family: var(--font-heading, 'Fraunces', serif); font-size: 1.25rem; font-weight: 700; color: var(--ink, #1C1614); }
    .os-sig-t { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted, #8A7E70); margin-top: 2px; }
    .os-portrait-tag { font-size: 0.75rem; font-weight: 500; color: var(--muted, #8A7E70); }
    .os-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clay, #B5582F); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
    .os-eyebrow::before { content: ''; display: block; width: 24px; height: 1px; background: currentColor; flex-shrink: 0; }
    .os-h2 { font-family: var(--font-heading, 'Fraunces', serif); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 24px; color: var(--ink, #1C1614); }
    .os-h2 span { font-style: italic; }
    .os-body { font-size: 0.95rem; color: var(--ink-2, #3A2F2A); line-height: 1.8; margin-bottom: 14px; }
    .os-quote { font-style: italic; font-size: 1.0625rem; color: var(--ink, #1C1614); line-height: 1.6; margin: 24px 0; padding: 20px 0; border-top: 1px solid var(--line-soft, #D8CCBB); border-bottom: 1px solid var(--line-soft, #D8CCBB); }
    .os-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 12px 28px; border: 1.5px solid var(--ink, #1C1614); border-radius: 999px; font-size: 0.875rem; font-weight: 600; color: var(--ink, #1C1614); text-decoration: none; transition: background 0.2s, color 0.2s; }
    .os-cta:hover { background: var(--ink, #1C1614); color: #fff; }
    @media (max-width: 768px) {
      .os-inner { grid-template-columns: 1fr; gap: 40px; }
      .founder-ph { height: 420px; }
      .os-portrait-col { display: flex; flex-direction: column; }
      .os-name-card { position: static; margin-top: 12px; border-radius: 8px; }
    }
    @media (max-width: 480px) { .os-inner { padding: 0 20px; } }
    .bb-tp-strip { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
    .bb-view-all-btn { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; border:1.5px solid var(--va-color,var(--ink,#1C1810)); border-radius:999px; font-family:var(--font-body,inherit); font-size:.95rem; font-weight:500; color:var(--va-color,var(--ink,#1C1810)); background:transparent; text-decoration:none; letter-spacing:.01em; transition:background .2s,color .2s,border-color .2s; }
    .bb-view-all-btn:hover { background:var(--va-color,var(--ink,#1C1810)); color:#fff; border-color:var(--va-color,var(--ink,#1C1810)); }
    /* Trust Pills as standalone section (direct child of bb-sections-wrapper) */
    #bb-sections-wrapper > #bb-vis-trustpills { padding:32px 40px; justify-content:center; margin-top:0; background:var(--products-bg,var(--soft)); }
    /* Functional Side section */
    #bb-vis-functionalside { padding:clamp(64px,10vw,96px) 0; background:var(--fs-section-bg,#2A1F1A); --fs-card-bg:rgba(255,255,255,.05); --fs-card-border:rgba(255,255,255,.1); }
    .fs-inner { max-width:1320px; margin:0 auto; padding:0 40px; }
    .fs-header { display:grid; grid-template-columns:1fr 1.5fr; gap:60px; margin-bottom:56px; align-items:flex-start; }
    @media(max-width:900px) { .fs-header { grid-template-columns:1fr; gap:32px; } }
    .fs-heading-wrap { }
    .fs-desc-wrap { padding-top:calc(0.72rem + 12px); }
    .fs-cards { display:grid; grid-template-columns:repeat(var(--fs-card-cols,4),1fr); gap:20px; }
    @media(max-width:1024px) { .fs-cards { grid-template-columns:repeat(2,1fr); } }
    @media(max-width:600px) { .fs-cards { grid-template-columns:1fr; } }
    @media(max-width:600px) { .fs-cards[data-fs-mobile-cols="2"] { grid-template-columns:repeat(2,1fr); } }
    /* FS desktop carousel */
    .fs-cards[data-fs-carousel~="desktop"] { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; gap:20px; padding-bottom:8px; }
    .fs-cards[data-fs-carousel~="desktop"]::-webkit-scrollbar { display:none; }
    .fs-cards[data-fs-carousel~="desktop"] > * { flex:0 0 calc(25% - 15px); min-width:220px; scroll-snap-align:start; }
    /* FS mobile carousel */
    @media(max-width:768px) {
      .fs-cards[data-fs-carousel~="mobile"] { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; gap:16px; padding-bottom:8px; }
      .fs-cards[data-fs-carousel~="mobile"]::-webkit-scrollbar { display:none; }
      .fs-cards[data-fs-carousel~="mobile"] > * { flex:0 0 80%; scroll-snap-align:start; }
    }
    .fs-card { background:var(--fs-card-bg,rgba(255,255,255,.05)); border:1px solid var(--fs-card-border,rgba(255,255,255,.1)); border-radius:12px; padding:28px 24px; display:flex; flex-direction:column; gap:12px; position:relative; }
    .fs-card-header { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
    .fs-card-dot { display:inline-block; border-radius:50%; flex-shrink:0; }
    .fs-card-dot-corner { display:block; border-radius:50%; position:absolute; top:20px; right:20px; width:var(--fs-card-dot-size,14px); height:var(--fs-card-dot-size,14px); }
    .fs-card-tag { font-size:var(--fs-card-tag-size,.65rem); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); }
    .fs-card-name { font-family:var(--font-heading,serif); font-size:var(--fs-card-name-size,1.4rem); font-weight:700; color:white; line-height:1.2; margin:6px 0; }
    .fs-card-tagline { font-size:var(--fs-card-tagline-size,.85rem); font-weight:600; color:var(--clay-soft,#D4A574); margin:4px 0; }
    .fs-card-dose { display:flex; align-items:baseline; gap:6px; margin:12px 0; }
    .fs-dose-num { font-family:var(--font-heading,serif); font-size:var(--fs-card-dose-size,1.6rem); font-weight:800; color:white; }
    .fs-dose-unit { font-size:var(--fs-card-dose-unit-size,.75rem); font-weight:600; color:rgba(255,255,255,.6); }
    .fs-card-desc { font-size:var(--fs-card-desc-size,.8rem); color:rgba(255,255,255,.7); line-height:1.6; margin:8px 0 0; }
    /* Functional side section heading and description sizing */
    .fs-header .ttl { font-size:var(--fs-heading-size,clamp(2.2rem,4vw,3.2rem)); font-family:var(--font-heading,serif); font-weight:600; line-height:1.1; color:white; letter-spacing:-.01em; margin:0; }
    .fs-header .ttl em { font-style:italic; font-weight:inherit; }
    .fs-header .sub { font-size:var(--fs-desc-size,.95rem); color:rgba(255,255,255,.7); line-height:1.8; margin:0; }
    .fs-header .lbl { color:var(--clay-soft,#D4A574); font-size:var(--fs-label-size,.72rem); font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px; }
    .fs-cta-wrap { text-align:center; margin-top:48px; }
    .fs-cta-link { display:inline-block; font-size:var(--fs-cta-size,.85rem); font-weight:600; color:var(--clay-soft,#D4A574); text-decoration:underline; text-underline-offset:5px; letter-spacing:.01em; transition:opacity .2s; }
    .fs-cta-link:hover { opacity:.8; }
    .bb-tp { display:inline-flex; align-items:center; gap:5px; background:var(--cs-tp-bg, var(--petal)); color:var(--cs-tp-title-color, var(--berry)); font-size:var(--trust-pills-size, .75rem); font-weight:600; padding:5px 12px; border: var(--cs-tp-border-width, 0) solid var(--cs-tp-border-color, transparent); border-radius:var(--cs-tp-border-radius, 999px); white-space:nowrap; }
    body[data-tp-border="none"] .bb-tp { border: none; }
    body[data-tp-border="top"] .bb-tp { border: none; border-top: var(--cs-tp-border-width, 1px) solid var(--cs-tp-border-color, var(--petal)); }
    body[data-tp-border="top-bottom"] .bb-tp { border: none; border-top: var(--cs-tp-border-width, 1px) solid var(--cs-tp-border-color, var(--petal)); border-bottom: var(--cs-tp-border-width, 1px) solid var(--cs-tp-border-color, var(--petal)); }
    .asl-wrap { display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
    .asl { display:flex; align-items:center; gap:6px; background:var(--soft); border-radius: calc(var(--radius) * 1.75); padding:7px 14px; font-size:.78rem; font-weight:600; color:var(--berry); border:1px solid var(--petal); transition:background .2s,color .2s; }
    .asl:hover { background:var(--rose); color:white; }

    /* ── Reviews ── */
    #reviews { background:var(--petal); }
    #faq { background:var(--cream); }
    .faq-cta { text-align:center; margin-top:32px; }
    /* Social gallery — UGC grid between reviews and FAQ */
    #social-gallery { background:var(--petal); }
    .sg-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:10px; max-width:1400px; margin:0 auto; }
    .sg-tile { position:relative; aspect-ratio:1; overflow:hidden; border-radius:calc(var(--radius)*.75); background:var(--soft); display:block; }
    .sg-tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
    .sg-tile:hover img { transform:scale(1.06); }
    .sg-tile::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,transparent 55%,rgba(139,96,56,.15)); opacity:0; transition:opacity .25s; pointer-events:none; }
    .sg-tile:hover::after { opacity:1; }
    .sg-cta-wrap { text-align:center; margin-top:28px; }
    @media(max-width:768px) { .sg-grid { grid-template-columns:repeat(3, 1fr); } }
    @media(max-width:480px) { .sg-grid { grid-template-columns:repeat(2, 1fr); } }
    .rg { max-width:1400px; margin:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
    .reviews-carousel { display:flex; gap:20px; padding:0 20px; max-width:100%; flex-wrap:nowrap; scrollbar-width:none; -ms-overflow-style:none; }
    .reviews-carousel::-webkit-scrollbar { display:none; }
    .reviews-carousel .rc { flex:0 0 calc(50% - 10px); min-width:260px; }
    .carousel-btn { position:absolute; top:50%; transform:translateY(-50%); background:var(--berry); color:#fff; border:none; width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:1rem; font-weight:300; line-height:1; padding:0; display:flex;align-items:center;justify-content:center; z-index:10; transition:opacity .2s; }
    .carousel-btn:hover { opacity:.85; }
    .carousel-prev { left:-14px; }
    .carousel-next { right:-14px; }
    @media(max-width:768px)  { .reviews-carousel .rc { flex:0 0 calc(100% - 0px); } }
    @media(min-width:1100px) { .reviews-carousel .rc { flex:0 0 calc(33.333% - 14px); } }
    .stars { color:var(--gold); font-size:.85rem; margin-bottom:9px; letter-spacing:2px; }
    .rt { font-size:.84rem; color:var(--mist); line-height:1.75; font-style:italic; margin-bottom:12px; }
    .rn { font-size:.78rem; font-weight:700; }
    .rn span { font-weight:400; color:var(--mist); }

    /* ── Cart ── */
    .overlay { position:fixed; inset:0; background:rgba(15,14,26,.55); z-index:1000; opacity:0; pointer-events:none; transition:opacity .3s; }
    .overlay.open { opacity:1; pointer-events:all; }
    .cart-sidebar { position:fixed; right:0; top:0; bottom:0; width:min(420px,100vw); background:var(--cream); z-index:1001; transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; box-shadow:-6px 0 28px rgba(0,0,0,.1); }
    .cart-sidebar.open { transform:translateX(0); }
    .cs-head { padding:20px 22px 16px; border-bottom:1px solid var(--petal); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--cream); z-index:2; }
    .cs-head h3 { font-family:var(--font-heading),sans-serif; font-size:1.1rem; }
    .xb { background:none; font-size:1.4rem; color:var(--mist); width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; }
    .xb:hover { background:var(--soft); }
    .cs-items { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:12px; }
    .ci { display:flex; gap:11px; align-items:flex-start; padding:11px; background:var(--soft); border-radius: calc(var(--radius) * 0.625); }
    .ci-e { width:44px; height:44px; flex-shrink:0; border-radius:calc(var(--radius,12px) * 0.6); overflow:hidden; display:flex; align-items:center; justify-content:center; }
    .ci-i { flex:1; min-width:0; }
    .ci-n { font-weight:700; font-size:.86rem; }
    .ci-b { font-size:.72rem; color:var(--mist); }
    .ci-sub { font-size:.69rem; color:var(--sub); font-weight:700; background:var(--sub-bg); border-radius: calc(var(--radius) * 0.5); padding:1px 6px; display:inline-block; margin-top:2px; }
    .ci-p { font-size:.76rem; color:var(--mist); }
    .ci-q { display:flex; align-items:center; gap:6px; margin-top:4px; }
    .qb { background:var(--cream); border:1px solid #DDD; border-radius:50%; width:22px; height:22px; font-size:.9rem; display:flex; align-items:center; justify-content:center; transition:border-color .2s; }
    .qb:hover { border-color:var(--rose); color:var(--rose); }

    /* You May Also Like */
    .upsell-section{padding:14px 20px;border-top:1px solid var(--petal);background:var(--soft);}
    .upsell-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--mist);margin-bottom:10px;}
    .upsell-grid{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;}
    .upsell-grid::-webkit-scrollbar{display:none;}
    .upsell-card{flex-shrink:0;width:110px;background:var(--cream);border-radius:calc(var(--radius)*1.25);overflow:hidden;cursor:pointer;border:1.5px solid var(--petal);transition:all .2s;}
    .upsell-card:hover{border-color:var(--rose);transform:translateY(-2px);box-shadow:var(--card-shadow);}
    .upsell-thumb{width:100%;height:70px;object-fit:cover;background:var(--petal);display:flex;align-items:center;justify-content:center;font-size:1.6rem;}
    .upsell-thumb img{width:100%;height:100%;object-fit:cover;}
    .upsell-info{padding:6px 8px 8px;}
    .upsell-name{font-size:.72rem;font-weight:700;color:var(--ink);line-height:1.2;margin-bottom:4px;}
    .upsell-price{font-size:.7rem;color:var(--mist);}
    .upsell-add{width:100%;margin-top:5px;padding:5px;background:var(--rose);color:#fff;border:none;border-radius:calc(var(--radius)*0.75);font-size:.68rem;font-weight:700;cursor:pointer;transition:opacity .2s;}
    .upsell-add:hover{opacity:.85;}
    .cs-foot { padding:18px 20px; border-top:1px solid var(--petal); }
    .cart-stor-note { background:var(--slt); border-radius: calc(var(--radius) * 0.5); padding:8px 12px; font-size:.74rem; color:var(--sage); line-height:1.6; margin-bottom:12px; border-left:3px solid #4CAF50; }
    .tot-row   { display:flex; justify-content:space-between; font-size:.84rem; margin-bottom:5px; font-weight:500; }
    .tot-tax   { display:flex; justify-content:space-between; font-size:.78rem; color:var(--mist); margin-bottom:12px; }
    .tot-final { display:flex; justify-content:space-between; font-weight:800; font-size:.96rem; padding-top:10px; border-top:1px solid var(--petal); margin-bottom:14px; }
    .empty-cart { text-align:center; padding:50px 16px; color:var(--mist); }
    .proceed-btn { width:100%; background:var(--rose); color:white; padding:13px; border-radius: calc(var(--radius) * 1.75); font-size:.94rem; font-weight:700; transition:background .2s; }
    .proceed-btn:hover { background:var(--berry); }

    /* ── Checkout modal ── */
    .modal-bg { position:fixed; inset:0; background:rgba(15,14,26,.65); z-index:1100;
                display:none; justify-content:center; align-items:flex-start;
                padding:24px 20px; overflow-y:auto; }
    .modal-bg.open { display:flex; }
    .modal { background:var(--cream); border-radius: calc(var(--radius) * 1.25); max-width:560px;
             width:calc(100% - 40px); position:relative; flex-shrink:0;
             margin:0 auto; box-shadow:0 16px 48px rgba(28,24,16,.14); }
    .modal-head { padding:22px 26px 16px; border-bottom:1px solid var(--petal); display:flex;
                  align-items:center; justify-content:space-between;
                  background:var(--cream); z-index:2; border-radius: calc(var(--radius) * 1.25) calc(var(--radius) * 1.25) 0 0; }
    .modal-head h2 { font-family:var(--font-heading),sans-serif; font-size:1.3rem; }
    .modal-body { padding:22px 26px 28px; display:flex; flex-direction:column; gap:16px; }
    .form-section { display:flex; flex-direction:column; gap:12px; }
    .sec-title { font-family:var(--font-heading),sans-serif; font-size:.88rem; font-weight:800; color:var(--ink); padding-bottom:8px; border-bottom:2px solid var(--petal); margin-bottom:4px; }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .fg { display:flex; flex-direction:column; gap:5px; }
    .fg label { font-size:.78rem; font-weight:700; color:var(--ink); }
    .fg input, .fg select, .fg textarea { border:1.5px solid var(--petal); border-radius: calc(var(--radius) * 0.5); padding:10px 13px; font-size:.9rem; font-family:var(--font-body); transition:border-color .2s; background:white; color:var(--ink); width:100%; }
    .fg input:focus, .fg textarea:focus { outline:none; border-color:var(--rose); box-shadow:0 0 0 3px rgba(var(--rose-rgb, 181,88,47),.12); }
    .req { color:var(--rose); }
    .err { color:var(--rose); font-size:.76rem; margin-top:3px; display:none; }
    .pu-box { background:var(--soft); border-radius: calc(var(--radius) * 0.75); padding:14px; display:flex; flex-direction:column; gap:8px; }
    .po { display:flex; align-items:flex-start; gap:10px; padding:11px; background:var(--cream); border-radius: calc(var(--radius) * 0.5); border:2px solid var(--petal); cursor:pointer; transition:border-color .2s; }
    .po:has(input:checked) { border-color:var(--rose); background:var(--soft); }
    .po input { margin-top:3px; accent-color:var(--rose); flex-shrink:0; }
    .poi strong { display:block; font-size:.86rem; font-weight:700; }
    .poi span   { font-size:.76rem; color:var(--mist); line-height:1.5; }
    .tw-note { background:rgba(181,88,47,.06); border:1px solid rgba(181,88,47,.16); border-radius: calc(var(--radius) * 0.5); padding:8px 12px; font-size:.76rem; color:var(--clay,#B5582F); line-height:1.6; }
    .osm { background:var(--soft); border-radius: calc(var(--radius) * 0.75); padding:16px; }
    .osm-title { font-size:.84rem; font-weight:700; margin-bottom:10px; }
    .os-row { display:flex; justify-content:space-between; font-size:.82rem; margin-bottom:4px; }
    .os-sub  { font-size:.72rem; color:var(--mist); padding-left:4px; margin-bottom:2px; }
    .os-sub-badge { font-size:.69rem; color:var(--sub); background:var(--sub-bg); padding:1px 6px; border-radius: calc(var(--radius) * 0.5); font-weight:700; display:inline-block; margin-bottom:6px; }
    .os-div  { border:none; border-top:1px solid #E0D0EE; margin:10px 0; }
    .os-tot  { display:flex; justify-content:space-between; font-weight:800; font-size:.94rem; }
    .stor-note { background:var(--slt); border-radius: calc(var(--radius) * 0.5); padding:12px 14px; font-size:.78rem; color:var(--sage); line-height:1.7; border:1px solid var(--petal); }
    .stor-note strong { display:block; margin-bottom:3px; }
    .pay-section { display:flex; flex-direction:column; gap:10px; }
    #dropin-container { min-height:60px; }
    .adyen-msg { text-align:center; padding:18px; color:var(--mist); font-size:.84rem; background:var(--soft); border-radius: calc(var(--radius) * 0.5); }
    .pay-btn { width:100%; background:var(--rose); color:white; padding:14px; border-radius: calc(var(--radius) * 1.75); font-size:1rem; font-weight:700; transition:background .2s,opacity .2s; }
    .pay-btn:hover:not(:disabled) { background:var(--berry); }
    .pay-btn:disabled { opacity:.65; cursor:not-allowed; }
    /* ── Multi-step checkout ──────────────────────────────────── */
    .co-steps-head { display:flex; align-items:center; gap:12px; margin-bottom:2px; }
    .co-steps-prog { flex:1; height:4px; background:var(--petal); border-radius:99px; overflow:hidden; }
    .co-steps-prog > span { display:block; height:100%; background:var(--rose); border-radius:99px; transition:width .3s ease; width:33.33%; }
    .co-steps-label { font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--mist); white-space:nowrap; }
    .co-step { display:none; flex-direction:column; gap:16px; }
    .co-step.active { display:flex; animation:coFade .25s ease; }
    @keyframes coFade { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
    .co-nav { display:flex; gap:12px; align-items:stretch; margin-top:4px; }
    .co-next { flex:1; background:var(--rose); color:#fff; padding:14px; border-radius:calc(var(--radius)*1.75); font-size:1rem; font-weight:700; border:none; cursor:pointer; transition:background .2s; font-family:var(--font-body); }
    .co-next:hover { background:var(--berry); }
    .co-back { background:transparent; color:var(--mist); border:1.5px solid var(--petal); padding:14px 20px; border-radius:calc(var(--radius)*1.75); font-size:.92rem; font-weight:600; cursor:pointer; transition:border-color .2s,color .2s; font-family:var(--font-body); }
    .co-back:hover { border-color:var(--rose); color:var(--rose); }
    .co-mini { display:flex; justify-content:space-between; align-items:baseline; font-size:.84rem; color:var(--mist); padding-top:12px; border-top:1px solid var(--petal); }
    .co-mini b { font-family:var(--font-heading),serif; font-size:1rem; color:var(--ink); font-weight:700; }
    /* Promo demoted to a quiet "Have a code?" toggle */
    .promo-toggle { display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:var(--rose); font-weight:600; font-size:.86rem; cursor:pointer; padding:2px 0; text-decoration:underline; text-underline-offset:3px; font-family:var(--font-body); }
    .promo-wrap { background:var(--soft); border:1px solid var(--petal); border-radius:calc(var(--radius)*0.75); padding:14px; margin-top:4px; }
    /* Checkout trust badges — displayed next to the Pay / Proceed buttons */
    .trust-badges { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:12px 0 4px; }
    .trust-badge { display:inline-flex; align-items:center; gap:6px; font-size:.7rem; color:var(--mist); padding:6px 10px; background:var(--soft); border:1px solid var(--petal); border-radius:20px; white-space:nowrap; font-weight:600; letter-spacing:.02em; cursor:pointer; position:relative; transition:all .2s; }
    .trust-badge:hover { background:var(--petal); color:var(--ink); border-color:var(--sage); }
    .trust-badge:focus { outline:2px solid var(--sage); outline-offset:2px; }
    .trust-badge svg { width:13px; height:13px; stroke-width:2.2; flex-shrink:0; color:var(--sage); }
    .trust-badge--compact { font-size:.68rem; padding:5px 9px; }
    .trust-tooltip { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:8px; padding:8px 12px; background:var(--ink); color:white; font-size:.75rem; border-radius:6px; white-space:normal; max-width:200px; text-align:center; font-weight:400; z-index:10000; opacity:0; pointer-events:none; transition:opacity .2s; box-shadow:0 4px 12px rgba(0,0,0,.15); }
    .sec-note { text-align:center; font-size:.74rem; color:var(--mist); display:flex; align-items:center; justify-content:center; gap:5px; margin-top:2px; }

    /* ── Confirmation ── */
    .conf-bg { position:fixed; inset:0; background:rgba(15,14,26,.65); z-index:1200; display:none; align-items:center; justify-content:center; padding:20px; }
    .conf-bg.open { display:flex; }
    .conf { background:var(--cream); border-radius: calc(var(--radius) * 1.25); max-width:460px; width:100%; padding:36px 30px; text-align:center; position:relative; }
    .conf-icon { font-size:3.5rem; margin-bottom:12px; }
    .conf h3 { font-family:var(--font-heading),sans-serif; font-size:1.5rem; margin-bottom:10px; }
    .conf p  { font-size:.85rem; color:var(--mist); line-height:1.7; margin-bottom:12px; }
    .conf-care { background:var(--slt); border-radius: calc(var(--radius) * 0.625); padding:14px 16px; text-align:left; margin:14px 0; border:1px solid var(--petal); }
    .conf-care h4 { font-size:.82rem; font-weight:800; color:var(--sage); margin-bottom:6px; }
    .conf-care ul { list-style:none; display:flex; flex-direction:column; gap:4px; }
    .conf-care ul li { font-size:.78rem; color:var(--sage); display:flex; gap:6px; }
    .conf-sub-note { background:var(--sub-bg); border-radius: calc(var(--radius) * 0.625); padding:12px 16px; text-align:left; margin:10px 0; border:1px solid #BBDEFB; }
    .conf-sub-note h4 { font-size:.82rem; font-weight:800; color:var(--sub); margin-bottom:4px; }
    .conf-sub-note p  { font-size:.78rem; color:var(--sub); line-height:1.6; }
    .conf-btn { width:100%; background:var(--rose); color:white; padding:12px; border-radius: calc(var(--radius) * 1.75); font-size:.92rem; font-weight:700; margin-top:10px; }
    .conf-xb  { position:absolute; top:12px; right:14px; background:none; border:none; font-size:1.4rem; color:#9E9E9E; cursor:pointer; line-height:1; padding:4px; }

    /* ── Footer ── */
    footer { background:var(--ink); color:var(--cream, #F9F7F2); padding:56px 24px 28px; }
    .fg-grid { max-width:920px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
    .fb .brand { font-family: var(--f-display, 'Fraunces', serif); font-weight: 500; color:var(--cream, #F9F7F2); display:block; margin-bottom:10px; transition:color .2s; }
    .fb .brand:hover { color:var(--footer-brand-accent, #B5582F); }
    .fb .brand span { color:var(--clay-soft, #B5582F); opacity:1; font-style: italic; }
    .fb p { font-size:.8rem; line-height:1.7; max-width:260px; }
    .f-soc { display:flex; gap:10px; margin-top:14px; }
    .f-soc a { background:transparent; border:1px solid rgba(255,255,255,.2); border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; transition:background .2s,border-color .2s,transform .15s; color:#fff; }
    .f-soc a:hover { background:var(--footer-brand-accent, #B5582F); border-color:var(--footer-brand-accent, #B5582F); transform:translateY(-2px); }
    .f-soc a svg { width:18px; height:18px; }
    .f-nl { margin-top:18px; margin-bottom:2px; }
    .f-nl-label { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; margin-bottom:8px; }
    .f-nl-row { display:flex; align-items:center; background:#fff; border:1px solid rgba(255,255,255,.3); border-radius:6px; overflow:hidden; max-width:280px; }
    .f-nl-input { flex:1; background:transparent; border:none; outline:none; padding:10px 12px; font-size:.82rem; color:var(--ink); font-family:var(--font-body); }
    .f-nl-input::placeholder { color:rgba(0,0,0,.35); }
    .f-nl-btn { background:transparent; border:none; border-left:1px solid rgba(0,0,0,.1); padding:0 12px; height:40px; cursor:pointer; color:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; transition:color .2s,background .2s; flex-shrink:0; }
    .f-nl-btn:hover { color:var(--footer-brand-accent, #B5582F); }
    .f-nl-msg { font-size:.75rem; margin-top:6px; min-height:1em; }
    .fc h4 { font-family:var(--font-body); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:14px; }
    .fc ul { list-style:none; display:flex; flex-direction:column; gap:8px; }
    .fc ul li a { font-size:.83rem; transition:opacity .2s; }
    .fc ul li a:hover { opacity:1; color:var(--footer-brand-accent, #B5582F); }
    .fb-legal-links a { transition:color .2s; }
    .fb-legal-links a:hover { color:var(--footer-brand-accent, #B5582F) !important; }
    #bb-footer-email { transition:color .2s; }
    #bb-footer-email:hover { color:var(--footer-brand-accent, #B5582F) !important; }
    .fb-bot { max-width:920px; margin:0 auto; padding:22px 24px 0; border-top:1px solid var(--footer-divider, rgba(255,255,255,.1)); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
    .fb-bot p { font-size:.74rem; }
    .fb-bot-mid { display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
    .fb-legal-links { display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
    .f-hash { font-size:.78rem; color:var(--footer-brand-accent, #B5582F); font-weight:700; }

    /* ── Toast ── */
    .toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(60px); background:var(--ink); color:white; padding:10px 20px; border-radius: calc(var(--radius) * 1.75); font-size:.84rem; font-weight:600; z-index:2000; transition:transform .4s; white-space:nowrap; box-shadow:0 5px 20px rgba(0,0,0,.2); }
    .toast.show { transform:translateX(-50%) translateY(0); }

    @media (max-width:768px) {
      .ag { grid-template-columns:1fr; }
      .founder-ph { height: 300px; }
      .fg-grid { grid-template-columns:1fr 1fr; gap:24px; }
      .fg-grid .fb { grid-column:1 / -1; }
      .form-row { grid-template-columns:1fr; }
    }


    /* ── Per-product accent colours ──────────────────────── */
    /* Applied in JS via openPD() — these override defaults   */
    .adapt-card.coconut  { background: var(--slt); border-color:#A98C6B; }
    .adapt-card.cocoa    { background: var(--soft); border-color:#6F4A38; }
    .adapt-card.birthday { background: var(--soft); border-color:#C77F73; }

    /* ── Product Detail Modal ─────────────────────────────────── */
    .pd-overlay { position:fixed; inset:0; background:rgba(15,14,26,.65); z-index:1200;
                  display:none; align-items:flex-start; justify-content:center;
                  padding:24px 16px; overflow-y:auto; }
    .pd-overlay.open { display:flex; }
    .pd-modal { background:var(--cream); border-radius: calc(var(--radius) * 1.25); max-width:540px; width:100%;
                overflow:visible; position:relative; flex-shrink:0; margin:auto;
                box-shadow:0 16px 48px rgba(28,24,16,.14); }
    .pd-header { padding:24px 24px 18px; border-bottom:1px solid var(--petal);
                 background:var(--cream); border-radius: calc(var(--radius) * 1.25) calc(var(--radius) * 1.25) 0 0; }
    .pd-header-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
    .pd-thumb { width:68px; height:68px; border-radius:calc(var(--radius,12px) * 0.75); overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
    .pd-header-text { flex:1; }
    .pd-name  { font-family:var(--font-heading),sans-serif; font-size:1.25rem; font-weight:800; color:var(--ink); }
    .pd-tag   { font-size:.78rem; color:var(--mist); font-style:italic; margin-top:3px; line-height:1.5; }
    .pd-line-badge { font-size:.68rem; font-weight:800; padding:3px 9px; border-radius: calc(var(--radius) * 1.25);
                     display:inline-block; margin-top:6px; }
    .pd-close { background:none; font-size:1.5rem; color:var(--mist); width:36px; height:36px;
                border-radius:50%; display:flex; align-items:center; justify-content:center;
                transition:background .2s; flex-shrink:0; border:none; cursor:pointer; }
    .pd-close:hover { background:var(--soft); }
    .pd-body { padding:0 20px 24px; }

    /* Accordion */
    .acc-item { border-bottom:1px solid var(--petal); }
    .acc-item:last-child { border-bottom:none; }
    .acc-btn { width:100%; background:none; border:none; text-align:left; padding:14px 4px;
               display:flex; align-items:center; justify-content:space-between; gap:12px;
               cursor:pointer; font-family:var(--font-body); transition:background .15s; border-radius: calc(var(--radius) * 0.5); }
    .acc-btn:hover { background:var(--soft); padding-left:8px; }
    .acc-title { display:flex; align-items:center; gap:8px; font-size:.9rem; font-weight:700; color:var(--ink); }
    .acc-icon  { font-size:1rem; color:var(--rose); font-weight:800; transition:transform .25s; flex-shrink:0; }
    .acc-btn.open .acc-icon { transform:rotate(45deg); }
    .acc-body  { display:none; padding:0 4px 16px; animation:fadeIn .2s ease; }
    .acc-body.open { display:block; }
    @keyframes fadeIn { from{opacity:0;transform:translateY(-6px);} to{opacity:1;transform:none;} }

    /* Nutrition label */
    .nf-label { border:2px solid black; padding:0; font-family:var(--font-body);
                max-width:280px; margin:0 auto; }
    .nf-title { font-size:1.4rem; font-weight:900; padding:4px 8px 2px; line-height:1.1; }
    .nf-sub   { font-size:.7rem; padding:0 8px 4px; border-bottom:8px solid black; }
    .nf-serving { font-size:.75rem; padding:4px 8px 0; }
    .nf-cal-row { display:flex; justify-content:space-between; align-items:baseline;
                  padding:2px 8px; border-top:4px solid black; border-bottom:1px solid black; }
    .nf-cal-label { font-size:.75rem; font-weight:700; }
    .nf-cal-val   { font-size:2rem; font-weight:900; line-height:1; }
    .nf-dv-header { font-size:.62rem; text-align:right; padding:2px 8px; border-bottom:4px solid black; }
    .nf-row { display:flex; justify-content:space-between; align-items:center;
              padding:2px 8px; border-bottom:1px solid #999; font-size:.72rem; }
    .nf-row.bold { font-weight:700; }
    .nf-row.indent { padding-left:20px; }
    .nf-row.thick-top { border-top:4px solid black; }
    .nf-row.thin { border-bottom:none; padding-top:0; }
    .nf-footer { font-size:.6rem; padding:4px 8px; border-top:4px solid black; line-height:1.4; }

    /* Ingredient chips */
    .ing-text { font-size:.82rem; color:var(--mist); line-height:1.8; }
    .ing-allergen { background:rgba(181,88,47,.06); border:1px solid rgba(181,88,47,.16); border-radius: calc(var(--radius) * 0.5);
                    padding:8px 12px; font-size:.78rem; color:var(--clay,#B5582F); margin-top:10px; }
    .free-chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
    .free-chip  { background:var(--slt); color:var(--sage); border-radius: calc(var(--radius) * 1.25);
                  padding:4px 10px; font-size:.72rem; font-weight:700; border:1px solid var(--petal); }

    /* Adaptogen card */
    .adapt-card { background:linear-gradient(135deg,#E8F5E9,var(--soft)); border-radius: calc(var(--radius) * 0.75);
                  padding:14px 16px; border:1px solid var(--petal); margin-bottom:10px; }
    .adapt-name { font-family:var(--font-heading),sans-serif; font-size:.9rem; font-weight:800; color:var(--sage); }
    .adapt-dose { font-size:.72rem; font-weight:700; color:white; background:var(--sage);
                  border-radius: calc(var(--radius) * 0.625); padding:2px 8px; display:inline-block; margin:4px 0; }
    .adapt-desc { font-size:.78rem; color:var(--mist); line-height:1.6; margin-top:4px; }
    .adapt-benefits { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
    .adapt-benefit { background:var(--cream); border:1px solid var(--petal); border-radius: calc(var(--radius) * 1.25);
                     padding:3px 9px; font-size:.7rem; color:var(--sage); font-weight:600; }

    /* Who it's for */
    .who-card { background:var(--sub-bg); border-radius: calc(var(--radius) * 0.75); padding:14px 16px;
                border:1px solid #BBDEFB; }
    .who-text { font-size:.84rem; color:#1A237E; line-height:1.7; }
    .who-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
    .who-tag  { background:var(--sub); color:white; border-radius: calc(var(--radius) * 1.25);
                padding:4px 10px; font-size:.71rem; font-weight:700; }

    /* Storage */
    .stor-row { display:flex; align-items:center; gap:10px; padding:8px 0;
                border-bottom:1px solid var(--petal); font-size:.82rem; color:var(--mist); }
    .stor-row:last-child { border-bottom:none; }
    .stor-row span:first-child { font-size:1.1rem; flex-shrink:0; }

    /* View details link */
    .view-details-btn { background:none; border:none; color:var(--sub); font-size:.76rem;
                        font-weight:700; cursor:pointer; font-family:var(--font-body);
                        display:flex; align-items:center; gap:4px; padding:2px 0;
                        transition:color .2s; }
    .view-details-btn:hover { color:var(--berry); }

    /* Add to cart from modal */
    .pd-add-btn { width:100%; background:var(--rose); color:white; padding:13px;
                  border-radius: calc(var(--radius) * 1.75); font-size:.94rem; font-weight:700;
                  transition:background .2s; margin-top:16px; border:none; cursor:pointer;
                  font-family:var(--font-body); }
    .pd-add-btn:hover { background:var(--berry); }
    .pd-add-btn-sold, .pd-add-btn-sold:hover { background:#9e9e9e; cursor:not-allowed; opacity:0.75; }


    /* ════════════════════════════════════════════════════════
       MOBILE & DESKTOP IMPROVEMENTS — v2
       ════════════════════════════════════════════════════════ */

    /* ── Base smoothing ──────────────────────────────────── */
    html { -webkit-text-size-adjust: 100%; }
    * { -webkit-tap-highlight-color: transparent; }
    input, select, textarea { font-size: 16px !important; } /* prevents iOS zoom on focus — form fields only; buttons keep their designed sizes (was over-broadly forcing ALL buttons to 16px) */

    /* ── Nav improvements ────────────────────────────────── */
    nav.bb-nav { padding: 0 16px; }
    .brand { font-size: var(--brand-size, 1.35rem); }
    .nav-social { gap: 10px; }

    /* ── Hero improvements ───────────────────────────────── */
    .hero { padding: 56px 20px 48px; }
    .hero p { font-size: .92rem; }
    .trust-pills { gap: 10px 16px; justify-content: center; }
    .tp { font-size: .76rem; }
    .btn-w, .btn-g { padding: 11px 22px; font-size: .88rem; }

    /* ── Strip ───────────────────────────────────────────── */
    .strip-in { gap: 12px 20px; }
    .sp { font-size: .76rem; }

    /* ── Products section ────────────────────────────────── */
    #products { padding: 52px 16px; }
    .sh { margin-bottom: 32px; }
    .pgrid { gap: 16px; }
    .pc { border-radius: calc(var(--radius) * 0.875); }
    .pi  { height: 160px; font-size: 3.5rem; }
    .pbody { padding: 14px 16px; gap: 8px; }
    .pn { font-size: var(--product-name-size, 1rem); }

    /* ── Bundle selector — pill style on all screens ─────── */
    .bundle-selector { gap: 5px; }
    .bundle-option {
      padding: 8px 10px;
      border-radius: calc(var(--radius) * 0.625);
      gap: 8px;
    }
    .bundle-name { font-size: .78rem; }
    .bundle-sub  { font-size: .68rem; }
    .bundle-price { font-size: .84rem; }
    .bundle-save  { font-size: .63rem; padding: 2px 5px; }

    /* ── Subscription toggle ─────────────────────────────── */
    .sub-toggle-title { font-size: .78rem; }
    .sub-toggle-desc  { font-size: .67rem; }
    .sub-badge        { font-size: .63rem; padding: 2px 7px; }
    .sub-plan-name    { font-size: .77rem; }
    .sub-plan-price   { font-size: .68rem; }
    .sub-plan-amt     { font-size: .8rem; }

    /* ── Add to cart button ──────────────────────────────── */
    .ab { padding: 11px 16px; font-size: .86rem; border-radius: calc(var(--radius) * 1.25); }
    .gb { padding: 11px 16px; font-size: .86rem; border-radius: calc(var(--radius) * 1.25); }

    /* ── Cart sidebar ────────────────────────────────────── */
    .cart-sidebar { box-shadow: none; border-left: 1px solid var(--petal); }

    /* ── Checkout modal ──────────────────────────────────── */
    .modal-bg { padding: 16px 12px; }
    .modal { max-width: 560px; width: calc(100% - 24px); border-radius: calc(var(--radius) * 1.25); }
    .modal-head { padding: 18px 20px 14px; }
    .modal-head h2 { font-size: 1.15rem; }





    .modal-body { padding: 16px 20px 24px; gap: 14px; }
    .sec-title { font-size: .84rem; }
    .fg input, .fg textarea { font-size: .9rem; padding: 10px 12px; }
    .poi strong { font-size: .84rem; }
    .poi span   { font-size: .74rem; }
    .pay-btn { padding: 14px; font-size: .96rem; border-radius: calc(var(--radius) * 1.6); }
    .sec-note { font-size: .72rem; }

    /* ── Confirmation modal ──────────────────────────────── */
    .conf-bg { padding: 16px; align-items: flex-end; }
    .conf { border-radius: calc(var(--radius)*1.6) calc(var(--radius)*1.6) calc(var(--radius)*1.25) calc(var(--radius)*1.25); padding: 28px 22px; }
    .conf h3 { font-size: 1.3rem; }
    .conf p  { font-size: .83rem; }

    /* ── Product detail modal ────────────────────────────── */
    .pd-overlay { padding: 12px 12px 24px; align-items: flex-start; }
    .pd-modal {
      border-radius: calc(var(--radius) * 1.25);
      width: 100%;
      max-width: 100%;
      margin: 0;
    }
    .pd-header { padding: 18px 18px 14px; }
    .pd-name { font-size: 1.1rem; }
    .pd-body { padding: 0 14px 24px; }
    .acc-btn { padding: 12px 4px; }
    .acc-title { font-size: .86rem; }

    /* ── Footer ──────────────────────────────────────────── */
    footer { padding: 40px 20px 24px; }
    .fb p { max-width: 100%; }

    /* ══════════════════════════════════════════════════════
       MOBILE  ≤ 480px  — primary mobile breakpoint
       ══════════════════════════════════════════════════════ */
    @media (max-width: 480px) {

      /* Nav */
      nav { height: auto; padding: 10px 16px; flex-wrap: nowrap; gap: 8px; }
      .brand { font-size: var(--brand-size, 1.2rem); }
      .nav-social { display: none; } /* hide social icons on small screens */
      .nav-r { gap: 8px; }
      .cart-pill { padding: 7px 14px; font-size: .78rem; gap: 6px; }
      .cbadge { width: 18px; height: 18px; font-size: .68rem; }
      /* Account icon — no extra shrink needed */

      /* Hero */
      .hero { padding: 44px 16px 36px; }
      .hero h1 { font-size: var(--hero-h1-size, 1.75rem); letter-spacing: -.015em; }
      .hero p  { font-size: .86rem; margin-bottom: 22px; }
      .hero-badge { font-size: .68rem; padding: 4px 12px; }
      .hero-btns { gap: 8px; margin-bottom: 24px; }
      .btn-w, .btn-g { padding: 10px 18px; font-size: .84rem; }
      .trust-pills { gap: 8px 12px; }
      .tp { font-size: .72rem; }

      /* Strip */
      .strip { padding: 10px 14px; }
      .strip-in { gap: 8px 14px; }
      .sp { font-size: .72rem; }

      /* Products */
      #products { padding: 40px 12px; }
      .pgrid {
        grid-template-columns: 1fr;  /* single column on phone */
        gap: 14px;
      }
      .pc { border-radius: var(--radius); }
      .pi { height: 140px; font-size: 3rem; }
      .pbody { padding: 14px 14px 16px; gap: 8px; }
      .pn { font-size: var(--product-name-size, 1rem); }
      .pt { font-size: .78rem; }
      .mac { font-size: .68rem; padding: 3px 8px; }
      .psize { font-size: .72rem; padding: 5px 9px; }
      .pstor { font-size: .72rem; padding: 6px 9px; }

      /* Bundle selector — full pill buttons on mobile */
      .bundle-selector { gap: 5px; }
      .bundle-option {
        padding: 10px 11px;
        border-radius: calc(var(--radius) * 0.625);
        min-height: 44px; /* Apple HIG touch target */
      }
      .bundle-label { flex: 1; }
      .bundle-name  { font-size: .8rem; }
      .bundle-sub   { font-size: .69rem; }
      .bundle-price { font-size: .86rem; }

      /* Subscription toggle */
      .sub-toggle { margin-top: 4px; }
      .sub-toggle-head { padding: 10px 11px; min-height: 44px; }
      .sub-toggle-title { font-size: .8rem; }
      .sub-badge { font-size: .64rem; }
      .sub-plan-opt { padding: 9px 12px; min-height: 44px; }

      /* View details button */
      .view-details-btn { font-size: .74rem; }

      /* Add to cart */
      .ab { padding: 12px; font-size: .88rem; }
      .gb { padding: 12px; font-size: .88rem; }

      /* How It Works */
      .hiw-inner { padding: 40px 16px; }
      .hiw-steps { grid-template-columns: 1fr; }

      /* Freshness Matters */
      .stor-banner { padding: 48px 16px; }
      .stor-banner > div { grid-template-columns: 1fr; gap: 40px; }
      .stor-banner h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-top: 12px; }
      .stor-banner .stor-sub { font-size: .875rem; }
      .spills { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .spill { padding: 16px; }
      .spill-icon { font-size: 1.5rem; margin-bottom: 12px; }
      .spill-title { font-size: .875rem; }
      .spill-desc { font-size: .75rem; }

      /* Subscribe banner */
      .sub-banner { padding: 32px 16px; }
      .sub-banner h2 { font-size: 1.3rem; }
      .sub-perks { gap: 8px; }
      .sub-perk  { font-size: .74rem; padding: 6px 12px; }
      .sub-table-row { font-size: .78rem; padding: 8px 12px; }

      /* How It Works */
      .hiw-inner { padding: 48px 16px; }
      .hiw-header { margin-bottom: 40px; }
      .hiw-eyebrow { font-size: 10px; margin-bottom: 10px; }
      .hiw-h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
      .hiw-connector { display: none; }
      .hiw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
      .hiw-step-num { width: 56px; height: 56px; font-size: 18px; }
      .hiw-step h3 { margin-top: 16px; font-size: 1.1rem; }
      .hiw-step p { margin-top: 8px; font-size: .8rem; }
      .hiw-locs { margin-top: 40px; padding: 24px; grid-template-columns: 1fr; gap: 20px; }
      .hiw-loc-pill { font-size: 11px; }
      .hiw-loc h4 { margin-top: 10px; font-size: 1rem; }
      .hiw-loc p { margin-top: 6px; font-size: .8rem; }
      .fq { font-size: .84rem; padding: 13px 0; }
      .fa { font-size: .8rem; }

      /* About */
      #about { padding: 40px 12px; }
      .founder-ph { height: 280px; font-size: 2.8rem; border-radius: calc(var(--radius) * 0.875); }
      .story { font-size: .86rem; }
      .sig   { font-size: 1.2rem; }
      .asl   { font-size: .76rem; padding: 6px 12px; }

      /* Reviews */
      #reviews { padding: 40px 12px; }
      .rg { grid-template-columns: 1fr; gap: 12px; }
      .reviews-carousel { gap: 12px !important; padding: 0 12px !important; }
      .reviews-carousel .rc { flex:0 0 100% !important; }
      .rc { padding: 18px; border-radius: calc(var(--radius) * 0.75); }
      .rt { font-size: .82rem; }
      .rn { font-size: .76rem; }

      /* Cart sidebar — full width */
      .cart-sidebar { width: 100vw; }
      .cs-head h3 { font-size: 1rem; }
      .ci { padding: 10px; }
      .ci-e { width: 38px; height: 38px; }
      .ci-n { font-size: .84rem; }
      .ci-b { font-size: .7rem; }
      .ci-p { font-size: .74rem; }
      .cs-foot { padding: 14px 16px; }
      .tot-row   { font-size: .82rem; }
      .tot-tax   { font-size: .76rem; }
      .tot-final { font-size: .92rem; }
      .proceed-btn { padding: 13px; font-size: .92rem; border-radius: calc(var(--radius) * 1.6); }

      /* Checkout modal — bottom sheet on mobile */
      .modal-bg { padding: 0; align-items: flex-end; overflow: hidden; }
      .modal {
        border-radius: calc(var(--radius) * 1.25) calc(var(--radius) * 1.25) 0 0;
        max-width: 100vw;
        width: 100vw;
        max-height: 92vh;        /* fallback for older browsers */
        max-height: 92dvh;       /* dynamic viewport: excludes the mobile browser
                                    chrome/keyboard so the form bottom (and Adyen's
                                    pay button) isn't hidden behind it */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }
      .modal-head h2 { font-size: 1.1rem; }
      /* Extra bottom padding so the last card fields / pay button can scroll
         clear of the toolbar + on-screen keyboard. */
      .modal-body { padding: 12px 16px calc(64px + env(safe-area-inset-bottom, 0px)); gap: 12px; }
      .form-row { grid-template-columns: 1fr; gap: 10px; } /* always single col */
      .fg input, .fg textarea, .fg select {
        font-size: 16px !important; /* critical — prevents iOS zoom */
        padding: 11px 12px;
        border-radius: calc(var(--radius) * 0.5);
      }
      .fg label { font-size: .76rem; }
      .sec-title { font-size: .82rem; padding-bottom: 7px; }
      .pu-box { padding: 10px; gap: 6px; }
      .po { padding: 10px; min-height: 52px; border-radius: calc(var(--radius) * 0.5); }
      .poi strong { font-size: .82rem; }
      .poi span   { font-size: .72rem; }
      .tw-note { font-size: .73rem; padding: 7px 10px; }
      .osm { padding: 12px; border-radius: calc(var(--radius) * 0.625); }
      .os-row { font-size: .8rem; }
      .os-sub { font-size: .7rem; }
      .os-tot { font-size: .9rem; }
      .stor-note { font-size: .76rem; padding: 10px 12px; }
      .pay-btn { padding: 15px; font-size: .96rem; border-radius: calc(var(--radius) * 1.75); margin-top: 4px; }
      .sec-note { font-size: .7rem; }

      /* Confirmation */
      .conf-bg { padding: 0; align-items: flex-end; }
      .conf {
        border-radius: calc(var(--radius) * 1.25) calc(var(--radius) * 1.25) 0 0;
        padding: 28px 20px 36px;
        max-width: 100vw;
      }
      .conf-icon { font-size: 2.8rem; }
      .conf h3 { font-size: 1.2rem; }
      .conf p  { font-size: .82rem; }
      .conf-care h4 { font-size: .8rem; }
      .conf-care ul li { font-size: .76rem; }
      .conf-btn { padding: 13px; font-size: .9rem; }

      /* Product detail modal */
      .pd-overlay { padding: 0; align-items: flex-end; }
      .pd-modal {
        border-radius: calc(var(--radius) * 1.25) calc(var(--radius) * 1.25) 0 0;
        max-height: 92vh;
        max-width: 100%;
        width: 100%;
        overflow-y: auto;
      }
      .pd-header { padding: 16px 16px 12px; }
      .pd-thumb { width: 54px; height: 54px; }
      .pd-name  { font-size: 1rem; }
      .pd-tag   { font-size: .72rem; }
      .pd-body  { padding: 0 12px 28px; }
      .acc-btn  { padding: 12px 4px; min-height: 44px; }
      .acc-title { font-size: .84rem; gap: 6px; }
      .who-text { font-size: .8rem; }
      .who-tag  { font-size: .68rem; padding: 3px 8px; }
      .adapt-card { padding: 12px 13px; }
      .adapt-name { font-size: .86rem; }
      .adapt-dose { font-size: .68rem; }
      .adapt-desc { font-size: .76rem; }
      .adapt-benefit { font-size: .68rem; padding: 2px 7px; }
      .ing-text { font-size: .78rem; }
      .ing-allergen { font-size: .75rem; }
      .free-chip { font-size: .7rem; }
      .stor-row { font-size: .78rem; }
      .pd-add-btn { padding: 13px; font-size: .9rem; border-radius: calc(var(--radius) * 1.6); }
      .nf-label { max-width: 100%; }

      /* Account portal (account.html) improvements */
      .auth-wrap { margin: 24px auto; }
      .auth-card { padding: 24px 18px; border-radius: var(--radius); }
      .profile-grid { grid-template-columns: 1fr; }
      .fg.full { grid-column: 1; }

      /* Footer */
      footer { padding: 32px 20px 20px; }
      .fg-grid { gap: 20px; }
      .f-hash { font-size: .74rem; }
      .fb-bot { display: block; }
      .fb-bot > p, .fb-bot-mid, .fb-legal-links { display: block; width: 100%; text-align: center !important; font-size: .72rem; margin: 0 0 4px; }
      .fb-bot-mid a, .fb-bot-mid span { display: inline; }
      .fb-legal-links a { display: inline; }

      /* Toast */
      .toast {
        bottom: 16px;
        font-size: .8rem;
        padding: 9px 16px;
        max-width: calc(100vw - 32px);
        white-space: normal;
        text-align: center;
      }
    }

    /* ══════════════════════════════════════════════════════
       SMALL PHONES  ≤ 375px  (iPhone SE, older models)
       ══════════════════════════════════════════════════════ */
    @media (max-width: 375px) {
      .hero h1 { font-size: var(--hero-h1-size, 1.55rem); }
      .nav-r a[href="/account"] { display: none !important; } /* hide account, keep cart */
      .pgrid { grid-template-columns: 1fr; }
      .sg { grid-template-columns: 1fr; }
      .bundle-option { padding: 9px 10px; }
      .cart-pill { padding: 7px 12px; font-size: .76rem; }
    }

    /* ══════════════════════════════════════════════════════
       TABLET  481px – 768px
       ══════════════════════════════════════════════════════ */
    @media (min-width: 481px) and (max-width: 768px) {
      .pgrid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
      .stor-banner > div { grid-template-columns: 1fr; gap: 48px; }
      .spills { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .modal-bg { padding: 16px; align-items: flex-start; }
      .modal { border-radius: calc(var(--radius) * 1.25); max-width: 560px; width: calc(100% - 32px); }
      .conf-bg { padding: 16px; align-items: center; }
      .conf { border-radius: calc(var(--radius) * 1.25); }
      .form-row { grid-template-columns: 1fr; }
    }

    /* ══════════════════════════════════════════════════════
       DESKTOP IMPROVEMENTS  > 768px
       ══════════════════════════════════════════════════════ */
    @media (min-width: 769px) {
      .pgrid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
      .modal-bg { padding: 24px; }
      .bundle-option:hover { transform: translateX(2px); }
      .pc { cursor: default; }
      /* Smooth accordion on desktop */
      .acc-body {
        overflow: hidden;
        transition: max-height .3s ease;
      }
    }

    /* ── Safe area for iPhone notch / home bar ───────────── */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
      .modal-body  { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
      .conf        { padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
      .pd-modal .pd-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
      .cs-foot     { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
    }


    /* ── Product Card Colors and Sizing from Theme ─────────── */
    .pn { color: var(--product-title-color, inherit); font-family: var(--product-title-font, inherit); }
    .pt { color: var(--product-desc-color, inherit); font-size: var(--product-desc-size, 0.95rem); font-family: var(--product-desc-font, inherit); }
    .pc-from, .pc-price-row { color: var(--product-price-color, inherit); font-size: var(--product-price-size, 1rem); }
    .pc-loyalty { display:inline-flex; align-items:center; gap:3px; margin-left:auto; font-size:.68rem; font-weight:700; color:var(--berry); background:rgba(201,168,76,.16); padding:3px 9px; border-radius:14px; border:1px solid rgba(201,168,76,.4); letter-spacing:.02em; white-space:nowrap; }
    .pc-price-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

    /* ── Product card stock photos ────────────────────────── */
    .pi {
      background-size: cover !important;
      background-position: center !important;
      background-repeat: no-repeat !important;
      font-size: 0 !important;          /* hide emoji */
      position: relative;
      overflow: hidden;
    }
    /* Subtle dark overlay so text/badges stay readable */
    .pi::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,.08) 0%, rgba(0,0,0,.22) 100%);
      pointer-events: none;
    }
    /* ── Transparent-background product image ────────────── */
    .pi.pi-transparent { background: var(--cs-pc-bg, transparent) !important; }
    .pi.pi-transparent::after { display: none; }
    .pi-transparent-img {
      width: 100%; height: 100%; display: block;
      object-fit: cover;
    }
    /* ── Product card video overlay ──────────────────────── */
    .pi-video {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      object-fit: cover; opacity: 0; transition: opacity .35s;
      pointer-events: none; border-radius: inherit; z-index: 1;
    }
    .pi-video.pi-visible { opacity: 1; }
    .pi-play-btn {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
      width: 48px; height: 48px; border-radius: 50%;
      background: rgba(0,0,0,.55); color: white; font-size: 1.2rem;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: background .2s; z-index: 3;
      padding-left: 4px;
    }
    .pi-play-btn:hover { background: rgba(0,0,0,.78); }
    /* Keep badge text visible above overlay */
    .pb-new, .pb-kids { z-index: 2; position: absolute; }

    /* Berry Bliss — mixed berries dark overhead */
    /* Coconut Glow — tropical coconut */
    /* Cocoa Crunch — dark chocolate cacao */
    /* Birthday Cake Bliss — colourful sprinkles */
    /* ══════════════════════════════════════════════════════
       PHASE 2 — DARK CLINICAL ADAPTOGEN SECTION
       ══════════════════════════════════════════════════════ */

    /* Override adaptogen cards inside the modal for dark treatment */
    /* Light, on-brand treatment (Option A) — coordinates with the cream drawer.
       Class names kept (-dark) to avoid churn; colours are now light/clay. */
    .adapt-section-dark {
      background: var(--soft, #EFE7DA);
      border-radius: calc(var(--radius) * 0.875);
      padding: 18px;
      margin-bottom: 10px;
    }
    .adapt-card-dark {
      background: var(--cream, #F5EFE6);
      border: 1px solid var(--line, #E5DAC8);
      border-radius: calc(var(--radius) * 0.75);
      padding: 16px 18px;
      margin-bottom: 10px;
    }
    .adapt-card-dark:last-child { margin-bottom: 0; }
    .adapt-name-dark {
      font-family: var(--font-heading), sans-serif;
      font-size: .92rem;
      font-weight: 800;
      color: var(--clay, #B5582F);
      letter-spacing: -.01em;
    }
    .adapt-origin-dark {
      font-size: .7rem;
      color: var(--mist, #6B5A52);
      margin-bottom: 6px;
    }
    .adapt-dose-dark {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: .72rem;
      font-weight: 700;
      color: var(--cream, #FFFFFF);
      background: var(--clay, #B5582F);
      border-radius: calc(var(--radius) * 0.5);
      padding: 2px 8px;
      margin: 4px 0 8px;
      letter-spacing: .04em;
    }
    .adapt-desc-dark {
      font-size: .8rem;
      color: var(--ink-2, #3A2F2A);
      line-height: 1.7;
      margin-bottom: 10px;
    }
    .adapt-benefits-dark {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .adapt-benefit-dark {
      background: var(--soft, #EFE7DA);
      border: 1px solid var(--line, #E5DAC8);
      border-radius: calc(var(--radius) * 1.25);
      padding: 3px 9px;
      font-size: .68rem;
      color: var(--mist, #6B5A52);
      font-weight: 600;
    }
    .adapt-evidence-dark {
      font-size: .72rem;
      color: var(--mist, #6B5A52);
      line-height: 1.6;
      background: var(--soft, #EFE7DA);
      border: 1px solid var(--line, #E5DAC8);
      padding: 8px 10px;
      border-radius: calc(var(--radius)*0.625);
      font-style: italic;
    }
    .adapt-evidence-dark strong {
      color: var(--clay, #B5582F);
      font-style: normal;
    }

    /* Section label (light, on-brand) */
    .dark-section-label {
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--clay, #B5582F);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .dark-section-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--line, rgba(181,88,47,.2));
    }

    /* Kids line — lighter treatment (no dark background for kids) */
    .adapt-kids .adapt-section-dark {
      background: var(--soft);
    }
    .adapt-kids .adapt-card-dark {
      background:var(--cream);
      border-color: #C77F73;
    }
    .adapt-kids .adapt-name-dark   { color: #D89A3E; }
    .adapt-kids .adapt-dose-dark   { background: #D89A3E; color: white; }
    .adapt-kids .adapt-desc-dark   { color: var(--mist); }
    .adapt-kids .adapt-origin-dark { color: #9E9E9E; }
    .adapt-kids .adapt-benefits-dark .adapt-benefit-dark {
      background: #F3E5F5;
      border-color: #C77F73;
      color: #D89A3E;
    }
    .adapt-kids .adapt-evidence-dark {
      color: var(--mist);
      background: #EFE7DA;
    }
    .adapt-kids .adapt-evidence-dark strong { color: #D89A3E; }
    .adapt-kids .dark-section-label {
      color: #D89A3E;
    }
    .adapt-kids .dark-section-label::after { background: rgba(123,79,160,.2); }


    /* ══════════════════════════════════════════════════════
       PHASE 3 — HORIZONTAL PRODUCT CARDS (desktop only)
       Mobile layout is completely unchanged.
       ══════════════════════════════════════════════════════ */

    /* ── Horizontal product cards (desktop) ─────────────────── */
    /* Only applies when body has data-product-layout="horizontal" */
    @media (min-width: 769px) {
      body[data-product-layout="horizontal"] .pgrid { grid-template-columns: 1fr !important; gap: 20px !important; max-width: var(--product-card-max-width, 860px) !important; }
      body[data-product-layout="horizontal"] .pc { flex-direction: row !important; min-height: 220px !important; border-radius: calc(var(--radius) * 1.1) !important; overflow: hidden !important; transform: none !important; transition: box-shadow .25s !important; }
      body[data-product-layout="horizontal"] .pc:hover { transform: none !important; box-shadow: 0 8px 32px rgba(var(--rose-rgb, 181,88,47),.13) !important; }
      body[data-product-layout="horizontal"] .pi { width: 38% !important; align-self: stretch !important; min-height: 100% !important; height: auto !important; flex-shrink: 0 !important; border-radius: 0 !important; font-size: 0 !important; }
      body[data-product-layout="horizontal"] .pbody { flex: 1 !important; padding: 18px 22px !important; gap: 6px !important; overflow: visible !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; }
      body[data-product-layout="horizontal"] .pn { font-size: var(--product-name-size, 1.15rem) !important; margin-bottom: 0 !important; }
      body[data-product-layout="horizontal"] .pt { font-size: .78rem !important; line-height: 1.5 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin-bottom: 2px !important; }
      body[data-product-layout="horizontal"] .macs { gap: 5px !important; }
      body[data-product-layout="horizontal"] .mac  { font-size: .68rem !important; padding: 2px 8px !important; }
      body[data-product-layout="horizontal"] .psize { display: none !important; }
      body[data-product-layout="horizontal"] .pstor { font-size: .70rem !important; padding: 4px 8px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      body[data-product-layout="horizontal"] .bundle-selector { flex-direction: row !important; gap: 5px !important; flex-wrap: nowrap !important; }
      body[data-product-layout="horizontal"] .bundle-option { flex: 1 !important; flex-direction: column !important; align-items: center !important; padding: 6px 8px !important; gap: 2px !important; border-radius: calc(var(--radius) * 0.625) !important; text-align: center !important; }
      body[data-product-layout="horizontal"] .bundle-option input[type="radio"] { display: none !important; }
      body[data-product-layout="horizontal"] .bundle-label { width: 100% !important; }
      body[data-product-layout="horizontal"] .bundle-name  { font-size: .72rem !important; text-align: center !important; }
      body[data-product-layout="horizontal"] .bundle-sub   { font-size: .64rem !important; }
      body[data-product-layout="horizontal"] .bundle-right { flex-direction: row !important; align-items: center !important; gap: 4px !important; }
      body[data-product-layout="horizontal"] .bundle-price { font-size: .8rem !important; }
      body[data-product-layout="horizontal"] .bundle-save  { font-size: .6rem !important; }
      body[data-product-layout="horizontal"] .sub-toggle { display: block !important; }
      body[data-product-layout="horizontal"] .pc-actions { display: flex !important; align-items: center !important; gap: 10px !important; margin-top: auto !important; }
      body[data-product-layout="horizontal"] .view-details-btn { font-size: .72rem !important; white-space: nowrap !important; }
      body[data-product-layout="horizontal"] .ab { flex: 1 !important; padding: 9px 14px !important; font-size: .82rem !important; margin-top: 0 !important; border-radius: calc(var(--radius) * 1.25) !important; }
      body[data-product-layout="horizontal"] .pb-kids { top: 8px !important; left: 8px !important; font-size: .62rem !important; }
      body[data-product-layout="horizontal"] .pb-new  { top: 8px !important; right: 8px !important; font-size: .62rem !important; }
      body[data-product-layout="horizontal"] .adapt-pill { display: inline-flex !important; align-items: center !important; gap: 5px !important; background: #0F0C08 !important; color: var(--gold) !important; border-radius: calc(var(--radius) * 1.25) !important; padding: 3px 10px !important; font-size: .68rem !important; font-weight: 700 !important; letter-spacing: .03em !important; width: fit-content !important; }
      body[data-product-layout="horizontal"] .pgrid { cursor: default; }
    }

    /* ── Wide desktop 1100px+ — 2 column horizontal ──────── */
    @media (min-width: 1100px) {
      body[data-product-layout="horizontal"] .pgrid { grid-template-columns: 1fr 1fr !important; max-width: 1060px !important; }
      body[data-product-layout="horizontal"] .pc { min-height: 220px !important; }
      body[data-product-layout="horizontal"] .pi { width: 36% !important; }
    }


    /* ══════════════════════════════════════════════════════
       PHASE 4 — MONOSPACE CLINICAL CALLOUTS
       JetBrains Mono applied to all measured/clinical numbers
       ══════════════════════════════════════════════════════ */

    /* Monospace utility class */
    .mono {
      font-family: var(--font-mono);
      letter-spacing: .02em;
    }

    /* ── Adaptogen pill on product card ─────────────────── */
    .adapt-pill {
      font-family: var(--font-body);  /* label stays Inter */
    }
    /* The dose portion inside the pill */
    .adapt-pill .dose {
      font-family: var(--font-mono);
      letter-spacing: .04em;
      font-size: .66rem;
    }

    /* ── Bundle selector prices ──────────────────────────── */
    .bundle-price {
      font-family: var(--font-mono) !important;
      letter-spacing: .02em;
    }
    .bundle-save {
      font-family: var(--font-mono) !important;
      letter-spacing: .01em;
    }

    /* ── Macro chips — protein/fibre/sugar/cal numbers ───── */
    .mac {
      font-family: var(--font-mono) !important;
      letter-spacing: .02em;
    }

    /* ── Order reference numbers everywhere ──────────────── */
    .order-ref,
    .order-ref-mono {
      font-family: var(--font-mono) !important;
      letter-spacing: .04em;
    }

    /* ── Cart totals ─────────────────────────────────────── */
    #cSub, #cTax, #cTot,
    #co-sub, #co-tax, #co-tot {
      font-family: var(--font-mono);
      letter-spacing: .02em;
    }

    /* ── Pay button total ────────────────────────────────── */
    .pay-btn {
      font-family: var(--font-mono) !important;
      letter-spacing: .04em;
    }

    /* ── Nutrition label numbers in product detail modal ─── */
    .nf-cal-val {
      font-family: var(--font-mono) !important;
      letter-spacing: -.02em;
    }
    .nf-row {
      font-family: var(--font-mono) !important;
      font-size: .7rem !important;
      letter-spacing: .01em;
    }
    /* But keep label text in Inter — only numbers monospace */
    .nf-label .nf-title,
    .nf-label .nf-sub,
    .nf-label .nf-serving,
    .nf-label .nf-dv-header,
    .nf-label .nf-footer {
      font-family: var(--font-body) !important;
      letter-spacing: normal;
    }

    /* ── Adaptogen dose badge in dark cards ──────────────── */
    .adapt-dose-dark {
      font-family: var(--font-mono) !important;
      letter-spacing: .05em;
    }

    /* ── Sub plan prices ─────────────────────────────────── */
    .sub-plan-amt {
      font-family: var(--font-mono) !important;
      letter-spacing: .02em;
    }

    /* ── Tracking numbers ────────────────────────────────── */
    .tracking-link,
    #trackInput,
    #trackPostal {
      font-family: var(--font-mono) !important;
      letter-spacing: .04em;
    }

    /* ── Subscription next billing date ─────────────────── */
    .sub-next {
      font-family: var(--font-mono) !important;
      font-size: .78rem !important;
      letter-spacing: .02em;
    }

    /* ── Confirmation order ref ──────────────────────────── */
    #confName {
      font-family: var(--font-body); /* name stays Inter */
    }


    /* ══════════════════════════════════════════════════════
       NAV REDESIGN — Desktop text links + Mobile hamburger
       ══════════════════════════════════════════════════════ */

    /* ── Desktop nav links ───────────────────────────────── */
    .nav-text-links {
      display: flex;
      align-items: center;
      gap: 4px;
      margin: 0 16px;
    }
    .nav-text-link {
      font-size: .82rem;
      font-weight: 600;
      color: var(--mist);
      padding: 6px 10px;
      border-radius: calc(var(--radius) * 0.375);
      transition: color .2s, background .2s;
      white-space: nowrap;
      background: none;
      border: none;
      cursor: pointer;
      font-family: var(--font-body);
    }
    .nav-text-link:hover { color: var(--rose); background: var(--petal); }

    /* ── Desktop icon buttons (Account + Cart) ───────────── */
    .nav-icon-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: .82rem;
      font-weight: 600;
      color: var(--mist);
      padding: 6px 10px;
      border-radius: calc(var(--radius) * 0.375);
      transition: color .2s, background .2s;
      background: none;
      border: none;
      cursor: pointer;
      font-family: var(--font-body);
      text-decoration: none;
    }
    .nav-icon-btn:hover { color: var(--rose); background: var(--petal); }
    .nav-icon-btn svg { flex-shrink: 0; }

    /* Cart badge */
    .nav-cart-badge {
      background: var(--rose);
      color: white;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      font-size: .66rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-mono);
      transition: transform .2s;
    }
    .nav-cart-badge.has-items { transform: scale(1.1); }

    /* Divider between links and icons */
    .nav-divider {
      width: 1px;
      height: 20px;
      background: var(--petal);
      margin: 0 6px;
    }

    /* ── Hamburger button ────────────────────────────────── */
    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 36px;
      height: 36px;
      padding: 6px;
      background: none;
      border: none;
      cursor: pointer;
      border-radius: calc(var(--radius) * 0.5);
      transition: background .2s;
    }
    .hamburger:hover { background: var(--soft); }
    .hamburger span {
      display: block;
      width: 100%;
      height: 2px;
      background: var(--ink);
      border-radius: 2px;
      transition: all .3s;
    }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Mobile cart badge in nav */
    .mobile-cart-wrap {
      display: none;
      position: relative;
      cursor: pointer;
      padding: 4px;
    }
    .mobile-cart-wrap svg { color: var(--ink); }
    .mobile-cart-count {
      position: absolute;
      top: -2px;
      right: -4px;
      background: var(--rose);
      color: white;
      border-radius: 50%;
      width: 16px;
      height: 16px;
      font-size: .6rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-mono);
    }

    /* ── Slide-in panel ──────────────────────────────────── */
    .nav-panel-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15,14,26,.55);
      z-index: 1050;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s;
    }
    .nav-panel-overlay.open {
      opacity: 1;
      pointer-events: all;
    }
    .nav-panel {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(320px, 85vw);
      background:var(--cream);
      z-index: 1051;
      transform: translateX(100%);
      transition: transform .35s cubic-bezier(.4,0,.2,1);
      display: flex;
      flex-direction: column;
      box-shadow: -8px 0 32px rgba(0,0,0,.12);
      overflow-y: auto;
    }
    .nav-panel.open { transform: translateX(0); }

    /* Panel header */
    .panel-head {
      padding: 20px 22px 16px;
      border-bottom: 1px solid var(--petal);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      background:var(--cream);
      z-index: 2;
    }
    .panel-brand {
      font-family: var(--font-heading), sans-serif;
      font-size: 1.2rem;
      font-weight: 800;
      color: var(--berry);
    }
    .panel-brand span { color: var(--rose); }
    .panel-close {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: none;
      border: none;
      font-size: 1.3rem;
      color: var(--mist);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .2s;
    }
    .panel-close:hover { background: var(--soft); }

    /* Panel nav links */
    .panel-links {
      padding: 12px 0;
      border-bottom: 1px solid var(--petal);
    }
    .panel-link {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px 22px;
      font-size: .92rem;
      font-weight: 600;
      color: var(--ink);
      transition: background .2s, color .2s;
      text-decoration: none;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
      cursor: pointer;
      font-family: var(--font-body);
    }
    .panel-link:hover { background: var(--soft); color: var(--rose); }
    .panel-link-icon { font-size: 1.1rem; width: 24px; text-align: center; }

    /* Panel account section */
    .panel-account {
      padding: 12px 0;
      border-bottom: 1px solid var(--petal);
    }
    .panel-account-label {
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--mist);
      padding: 4px 22px 8px;
    }

    /* Subscribe & Save section in panel */
    .panel-sub-section {
      margin: 16px 16px;
      background: linear-gradient(135deg, #8A3D20, #B5582F);
      border-radius: calc(var(--radius) * 0.875);
      padding: 18px;
      color: white;
    }
    .panel-sub-title {
      font-family: var(--font-heading), sans-serif;
      font-size: .96rem;
      font-weight: 800;
      margin-bottom: 4px;
    }
    .panel-sub-desc {
      font-size: .76rem;
      opacity: .85;
      line-height: 1.6;
      margin-bottom: 12px;
    }
    .panel-sub-tiers {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 14px;
    }
    .panel-sub-tier {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(255,255,255,.1);
      border-radius: calc(var(--radius) * 0.5);
      padding: 8px 12px;
      font-size: .8rem;
    }
    .panel-sub-tier-label { font-weight: 600; }
    .panel-sub-tier-save {
      font-family: var(--font-mono);
      font-size: .76rem;
      font-weight: 700;
      color: var(--gold);
      background: rgba(201,168,76,.15);
      padding: 2px 8px;
      border-radius: calc(var(--radius) * 0.5);
    }
    .panel-sub-btn {
      width: 100%;
      background:var(--cream);
      color: #B5582F;
      border: none;
      border-radius: calc(var(--radius) * 1.4);
      padding: 10px;
      font-size: .84rem;
      font-weight: 700;
      cursor: pointer;
      font-family: var(--font-body);
      transition: background .2s;
    }
    .panel-sub-btn:hover { background: var(--petal); }

    /* Panel footer */
    .panel-footer {
      padding: 16px 22px 32px;
      margin-top: auto;
    }
    .panel-social {
      display: flex;
      gap: 10px;
      margin-bottom: 12px;
    }
    .panel-social-link {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: .76rem;
      font-weight: 600;
      color: var(--berry);
      background: var(--soft);
      border-radius: calc(var(--radius) * 1.25);
      padding: 6px 12px;
      transition: all .2s;
      text-decoration: none;
    }
    .panel-social-link:hover { background: var(--rose); color: white; }
    .panel-copy {
      font-size: .72rem;
      color: var(--mist);
      line-height: 1.5;
    }

    /* ── Responsive show/hide ─────────────────────────────── */
    @media (max-width: 768px) {
      .nav-text-links { display: none !important; }
      .nav-icon-btn.account-btn { display: none !important; }
      .nav-divider { display: none !important; }
      .hamburger { display: flex !important; }
      .mobile-cart-wrap { display: flex !important; }
      /* Hide old cart pill on mobile */
      .cart-pill { display: none !important; }
    }
    @media (min-width: 769px) {
      .hamburger { display: none !important; }
      .mobile-cart-wrap { display: none !important; }
      .nav-panel { display: none !important; }
      .nav-panel-overlay { display: none !important; }
    }


    /* Show/hide nav groups at breakpoints */
    @media (max-width: 768px) {
      .nav-desktop-icons { display: none !important; }
      .nav-mobile-icons  { display: flex !important; }
    }
    @media (min-width: 769px) {
      .nav-desktop-icons { display: flex !important; }
      .nav-mobile-icons  { display: none !important; }
    }


    /* ══════════════════════════════════════════════════════
       ITEM 4 — NEWSLETTER SIGNUP
       ══════════════════════════════════════════════════════ */
    .newsletter-section {
      background: var(--cs-ns-bg, linear-gradient(135deg, var(--ink), #2C2018));
      padding: 56px 24px;
      text-align: center;
      border: var(--cs-ns-border-width, 0) solid var(--cs-ns-border-color, transparent);
      border-radius: var(--cs-ns-border-radius, 0);
    }
    body[data-ns-border="none"] .newsletter-section { border: none; }
    body[data-ns-border="all"] .newsletter-section { border: var(--cs-ns-border-width, 1px) solid var(--cs-ns-border-color, var(--petal)); }
    body[data-ns-border="top"] .newsletter-section { border: none; border-top: var(--cs-ns-border-width, 1px) solid var(--cs-ns-border-color, var(--petal)); }
    body[data-ns-border="top-bottom"] .newsletter-section { border: none; border-top: var(--cs-ns-border-width, 1px) solid var(--cs-ns-border-color, var(--petal)); border-bottom: var(--cs-ns-border-width, 1px) solid var(--cs-ns-border-color, var(--petal)); }
    .newsletter-inner { max-width: 520px; margin: auto; }
    .newsletter-label {
      font-size: .72rem; font-weight: 800; letter-spacing: .12em;
      text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
    }
    .newsletter-title {
      font-family: var(--font-heading), sans-serif; font-size: clamp(1.5rem,3vw,2rem);
      font-weight: 800; color: white; margin-bottom: 10px; line-height: 1.15;
    }
    .newsletter-sub {
      font-size: .88rem; color: rgba(255,255,255,.7);
      line-height: 1.7; margin-bottom: 24px;
    }
    .newsletter-form {
      display: flex; gap: 8px; max-width: 420px; margin: 0 auto 12px;
    }
    .newsletter-input {
      flex: 1; padding: 12px 16px; border-radius: calc(var(--radius) * 1.75);
      border: 1.5px solid rgba(255,255,255,.15);
      background: rgba(255,255,255,.08); color: white;
      font-family: var(--font-body); font-size: .9rem;
      transition: border-color .2s;
      outline: none;
    }
    .newsletter-input::placeholder { color: rgba(255,255,255,.4); }
    .newsletter-input:focus { border-color: var(--gold); }
    .newsletter-btn {
      padding: 12px 22px; border-radius: calc(var(--radius) * 1.75);
      background: var(--rose); color: white;
      font-size: .88rem; font-weight: 700;
      border: none; cursor: pointer;
      font-family: var(--font-body);
      transition: background .2s; white-space: nowrap;
      flex-shrink: 0;
    }
    .newsletter-btn:hover { background: var(--berry); }
    .newsletter-btn:disabled { opacity: .65; cursor: not-allowed; }
    .newsletter-note {
      font-size: .72rem; color: rgba(255,255,255,.4); line-height: 1.6;
    }
    .newsletter-success {
      display: none; background: rgba(46,125,50,.2);
      border: 1px solid rgba(46,125,50,.4); border-radius: calc(var(--radius) * 0.75);
      padding: 14px 18px; color: #81C784; font-size: .88rem;
      line-height: 1.6; margin-top: 12px;
    }
    .newsletter-err {
      display: none; color: #EF9A9A; font-size: .8rem; margin-top: 8px;
    }
    .nl-perks {
      display: flex; gap: 16px; justify-content: center;
      flex-wrap: wrap; margin-bottom: 22px;
    }
    .nl-perk {
      font-size: .76rem; color: rgba(255,255,255,.65);
      display: flex; align-items: center; gap: 5px;
    }

    /* ══════════════════════════════════════════════════════
       ITEM 5 — SCROLL ANIMATIONS
       ══════════════════════════════════════════════════════ */
    .fade-up {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .55s ease, transform .55s ease;
    }
    .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }
    /* Stagger children */
    .fade-up-children > * {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .45s ease, transform .45s ease;
    }
    .fade-up-children.visible > * { opacity:1; transform:none; }
    .fade-up-children.visible > *:nth-child(1) { opacity:1; transform:none; transition-delay: .05s; }
    .fade-up-children.visible > *:nth-child(2) { opacity:1; transform:none; transition-delay: .12s; }
    .fade-up-children.visible > *:nth-child(3) { opacity:1; transform:none; transition-delay: .19s; }
    .fade-up-children.visible > *:nth-child(4) { opacity:1; transform:none; transition-delay: .26s; }
    .fade-up-children.visible > *:nth-child(5) { opacity:1; transform:none; transition-delay: .33s; }
    .fade-up-children.visible > *:nth-child(6) { opacity:1; transform:none; transition-delay: .40s; }
    .fade-up-children.visible > *:nth-child(7) { opacity:1; transform:none; transition-delay: .47s; }
    .fade-up-children.visible > *:nth-child(8) { opacity:1; transform:none; transition-delay: .54s; }
    .fade-up-children.visible > *:nth-child(9) { opacity:1; transform:none; transition-delay: .60s; }
    .fade-up-children.visible > *:nth-child(10) { opacity:1; transform:none; transition-delay: .65s; }

    /* Respect reduced motion preference */
    @media (prefers-reduced-motion: reduce) {
      .fade-up, .fade-up-children > * {
        opacity: 1 !important; transform: none !important; transition: none !important;
      }
    }

    @media (max-width: 480px) {
      .newsletter-form { flex-direction: column; }
      .newsletter-btn  { width: 100%; padding: 13px; }
      .newsletter-section { padding: 40px 16px; }
    }


    /* -- Trust Bar ----------------------------------------- */
    .trust-bar {
      background: linear-gradient(var(--grad-trustbar-dir),var(--grad-trustbar-start),var(--grad-trustbar-end));
      padding: 18px 24px;
      border: var(--cs-tb-border-width, 0) solid var(--cs-tb-border-color, rgba(255,255,255,.06));
      border-radius: var(--cs-tb-border-radius, 0);
    }
    body[data-tb-border="none"] .trust-bar { border: none; }
    body[data-tb-border="all"]  .trust-bar { border: var(--cs-tb-border-width, 1px) solid var(--cs-tb-border-color, rgba(255,255,255,.06)); }
    body[data-tb-border="top"]  .trust-bar { border: none; border-top: var(--cs-tb-border-width, 1px) solid var(--cs-tb-border-color, rgba(255,255,255,.06)); }
    body[data-tb-border="top-bottom"] .trust-bar { border: none; border-top: var(--cs-tb-border-width, 1px) solid var(--cs-tb-border-color, rgba(255,255,255,.06)); border-bottom: var(--cs-tb-border-width, 1px) solid var(--cs-tb-border-color, rgba(255,255,255,.06)); }
    .trust-bar-inner {
      max-width: 1060px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      flex-wrap: wrap;
    }
    .trust-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 20px;
    }
    .trust-icon {
      font-size: var(--trust-icon-size, 1.3rem);
      flex-shrink: 0;
    }
    .trust-text {
      display: flex;
      flex-direction: column;
      text-align: center;
      align-items: center;
    }
    .trust-text strong {
      font-size: var(--trust-title-size, .78rem);
      font-weight: 700;
      color: var(--cs-tb-title-color, white);
      white-space: nowrap;
    }
    .trust-text span {
      font-size: var(--trust-subtitle-size, .68rem);
      color: var(--cs-tb-sub-color, rgba(255,255,255,.5));
      white-space: nowrap;
    }
    .trust-divider {
      width: 1px;
      height: 32px;
      background: rgba(255,255,255,.1);
      flex-shrink: 0;
    }
    @media (max-width: 768px) {
      .trust-bar { padding: 12px 16px; }
      .trust-bar-inner { gap: 0; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
      .trust-bar-inner::-webkit-scrollbar { display: none; }
      .trust-item { padding: 4px 14px; }
      .trust-text strong { font-size: .72rem; }
      .trust-text span { display: none; }
      .trust-divider { height: 24px; }
    }


    /* Warm nav shadow */
    nav.bb-nav {
      transition: box-shadow .3s ease;
    }
    nav.bb-nav.scrolled {
      box-shadow: 0 2px 20px rgba(28,24,16,.12) !important;
    }


    /* Fix section anchors hiding under sticky nav */
    #products, #subscribe, #how-it-works, #about, #reviews {
      scroll-margin-top: 72px;
    }




    /* Details button — ghost button style */
    .view-details-btn {
      background: none !important;
      border: 1.5px solid var(--mist) !important;
      color: var(--mist) !important;
      font-size: .74rem !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      font-family: var(--font-body) !important;
      padding: 6px 14px !important;
      border-radius: calc(var(--radius) * 1.25) !important;
      transition: all .2s !important;
      white-space: nowrap !important;
    }
    .view-details-btn:hover {
      border-color: var(--rose) !important;
      color: var(--rose) !important;
      background: var(--petal) !important;
    }


    /* Cart badge pulse on item add */
    @keyframes badgePulse {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.4); }
      100% { transform: scale(1); }
    }
    .nav-cart-badge.pulse { animation: badgePulse .4s ease; }
    .mobile-cart-count.pulse { animation: badgePulse .4s ease; }
    .bb-mobile-cart-badge.pulse { animation: badgePulse .4s ease; }
    .bb-mobile-cart-badge.has-items { transform: scale(1.1); }


    /* Strip hidden - trust bar covers this content */
    .strip { display: none !important; }


    /* ══════════════════════════════════════════════════════
       COMPARISON TABLE SECTION
       ══════════════════════════════════════════════════════ */
    .compare-section {
      background: var(--cream);
      padding: 64px 24px;
      border-top: 1px solid var(--petal);
    }
    .compare-inner { max-width: 860px; margin: 0 auto; }
    .compare-sh { text-align: center; margin-bottom: 40px; }
    .compare-lbl {
      font-size: .72rem; font-weight: 800; letter-spacing: .12em;
      text-transform: uppercase; color: var(--rose); margin-bottom: 8px;
    }
    .compare-title {
      font-family: var(--font-heading), sans-serif;
      font-size: clamp(1.5rem, 3vw, 2.2rem);
      font-weight: 800; color: var(--ink); letter-spacing: -.02em;
      margin-bottom: 10px;
    }
    .compare-sub { font-size: .9rem; color: var(--mist); line-height: 1.7; }

    /* Table */
    .compare-table {
      width: 100%; border-collapse: collapse;
      background:var(--cream); border-radius: var(--radius);
      overflow: hidden; box-shadow: 0 4px 24px rgba(28,24,16,.07);
      border:1px solid var(--petal);
    }
    .compare-table th {
      padding: 16px 20px; font-size: .84rem; font-weight: 800;
      text-align: center; border-bottom: 2px solid var(--petal);
      font-family: var(--font-heading), sans-serif;
    }
    .compare-table th:first-child { text-align: left; width: 38%; }
    .compare-table th.bb-col {
      background: linear-gradient(135deg, var(--berry), var(--rose));
      color: white; font-size: .88rem;
    }
    .compare-table th.other-col { background: var(--cream); color: var(--mist); }
    .compare-table td {
      padding: 14px 20px; font-size: .84rem; border-bottom: 1px solid #F5F0EA;
      text-align: center; vertical-align: middle;
    }
    .compare-table td:first-child {
      text-align: left; font-weight: 600; color: var(--ink);
    }
    .compare-table tr:last-child td { border-bottom: none; }
    .compare-table tr:hover td { background: var(--cream); }
    .compare-table tr:hover td:first-child { background: var(--cream); }

    /* Check / X */
    .chk { color: var(--sage); font-size: 1.1rem; font-weight: 800; }
    .crs { color: #BDBDBD; font-size: 1.1rem; }
    .mby { color: var(--gold); font-size: .78rem; font-weight: 700; }

    /* Row highlight for unique BB advantages */
    .compare-table tr.highlight td {
      background: var(--soft);
    }
    .compare-table tr.highlight td:first-child {
      color: var(--berry); font-weight: 700;
    }

    /* Mobile table scroll */
    .compare-scroll { overflow-x: auto; border-radius: var(--radius); }
    @media (max-width: 600px) {
      .compare-table th, .compare-table td { padding: 12px 14px; font-size: .78rem; }
      .compare-table th:first-child { min-width: 140px; }
    }

    /* ══════════════════════════════════════════════════════
       ADAPTOGEN HIGHLIGHT STRIP
       ══════════════════════════════════════════════════════ */
    .adapt-highlight {
      background: #0F0C08;
      padding: 64px 24px;
      position: relative;
      overflow: hidden;
    }
    /* Subtle grain texture overlay */
    .adapt-highlight::before {
      content: '';
      position: absolute; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
      pointer-events: none; opacity: .4;
    }
    .adapt-highlight-inner { max-width: 960px; margin: 0 auto; position: relative; }
    .adapt-highlight-header { text-align: center; margin-bottom: 48px; }
    .adapt-highlight-label {
      font-size: .72rem; font-weight: 800; letter-spacing: .14em;
      text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
    }
    .adapt-highlight-title {
      font-family: var(--font-heading), sans-serif;
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      font-weight: 800; color: white;
      letter-spacing: -.02em; line-height: 1.1;
      margin-bottom: 12px;
    }
    .adapt-highlight-sub {
      font-size: .9rem; color: rgba(255,255,255,.55);
      max-width: 520px; margin: 0 auto; line-height: 1.7;
    }

    /* Adaptogen cards grid */
    .adapt-cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 16px;
      margin-bottom: 36px;
    }
    .adapt-hl-card {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius);
      padding: 24px 20px;
      transition: border-color .3s, background .3s;
    }
    .adapt-hl-card:hover {
      border-color: rgba(201,168,76,.35);
      background: rgba(201,168,76,.04);
    }
    .adapt-hl-product {
      font-size: .68rem; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: rgba(255,255,255,.35);
      margin-bottom: 10px;
    }
    .adapt-hl-name {
      font-family: var(--font-heading), sans-serif;
      font-size: 1rem; font-weight: 800; color: var(--gold);
      letter-spacing: -.01em; margin-bottom: 4px;
    }
    .adapt-hl-dose {
      font-family: var(--font-mono);
      font-size: .72rem; font-weight: 700;
      color: rgba(201,168,76,.7); margin-bottom: 12px;
      letter-spacing: .06em;
    }
    .adapt-hl-desc {
      font-size: .8rem; color: rgba(255,255,255,.6);
      line-height: 1.7; margin-bottom: 14px;
    }
    .adapt-hl-benefits {
      display: flex; gap: 5px; flex-wrap: wrap;
    }
    .adapt-hl-benefit {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: calc(var(--radius) * 1.25); padding: 3px 9px;
      font-size: .68rem; color: rgba(255,255,255,.65);
      font-weight: 600;
    }
    .adapt-hl-origin {
      font-size: .7rem; color: rgba(255,255,255,.3);
      font-style: italic; margin-bottom: 8px;
    }

    /* Bottom bar */
    .adapt-hl-bottom {
      display: flex; align-items: center; justify-content: center;
      gap: 24px; flex-wrap: wrap; margin-top: 12px;
      padding-top: 28px;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .adapt-hl-stat {
      text-align: center;
    }
    .adapt-hl-stat-val {
      font-family: var(--font-mono);
      font-size: 1.4rem; font-weight: 700; color: var(--gold);
      display: block; letter-spacing: -.02em;
    }
    .adapt-hl-stat-lbl {
      font-size: .72rem; color: rgba(255,255,255,.4);
      margin-top: 3px;
    }
    .adapt-hl-stat-div {
      width: 1px; height: 40px;
      background: rgba(255,255,255,.1);
    }
    .adapt-hl-cta {
      display: inline-block;
      background: var(--rose); color: white;
      padding: 11px 26px; border-radius: calc(var(--radius) * 1.75);
      font-size: .88rem; font-weight: 700;
      transition: background .2s; margin-top: 20px;
      text-align: center;
    }
    .adapt-hl-cta:hover { background: var(--berry); }

    @media (max-width: 480px) {
      .adapt-cards-grid { grid-template-columns: 1fr; gap: 12px; }
      .adapt-hl-bottom { gap: 16px; }
      .adapt-highlight { padding: 40px 14px; }
      .compare-section { padding: 40px 14px; }
    }


    /* ══════════════════════════════════════════════════════
       PRESS / PARTNER LOGOS STRIP
       ══════════════════════════════════════════════════════ */
    .press-strip {
      background: var(--cream);
      padding: var(--press-strip-padding, 16px) 0;
      border: var(--cs-ps-border-width, 0) solid var(--cs-ps-border-color, var(--petal));
      border-radius: var(--cs-ps-border-radius, 0);
      overflow: hidden;
      position: relative;
    }
    .bb-ps-label {
      font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--mist); text-align: center;
      padding: 0 16px 4px;
    }
    .bb-ps-label:empty { display: none; }
    .bb-ps-heading {
      font-size: 1rem; font-weight: 700; color: var(--ink);
      text-align: center; padding: 0 16px 12px; line-height: 1.3;
    }
    .bb-ps-heading:empty { display: none; }
    body[data-ps-border="bottom"]     .press-strip { border: none; border-bottom: var(--cs-ps-border-width, 1px) solid var(--cs-ps-border-color, var(--petal)); }
    body[data-ps-border="top"]        .press-strip { border: none; border-top:    var(--cs-ps-border-width, 1px) solid var(--cs-ps-border-color, var(--petal)); }
    body[data-ps-border="top-bottom"] .press-strip { border: none; border-top:    var(--cs-ps-border-width, 1px) solid var(--cs-ps-border-color, var(--petal)); border-bottom: var(--cs-ps-border-width, 1px) solid var(--cs-ps-border-color, var(--petal)); }
    body[data-ps-border="all"]        .press-strip { border: var(--cs-ps-border-width, 1px) solid var(--cs-ps-border-color, var(--petal)); }
    body[data-ps-border="none"]       .press-strip { border: none; }
    /* fade edges */
    .press-strip::before, .press-strip::after {
      content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
    }
    .press-strip::before { left: 0; background: linear-gradient(to right, var(--cream), transparent); }
    .press-strip::after  { right: 0; background: linear-gradient(to left,  var(--cream), transparent); }
    @keyframes marqueeScroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(var(--marquee-offset, -50%)); }
    }
    .press-marquee {
      display: flex; align-items: center;
      width: max-content;
      animation: marqueeScroll 28s linear infinite;
      gap: 0;
      will-change: transform;
    }
    .press-marquee:hover { animation-play-state: paused; }
    .press-logo {
      display: flex; flex-direction: column;
      align-items: center; gap: 5px;
      flex-shrink: 0; padding: 0 32px;
      border-right: 1px solid var(--petal);
    }
    .press-logo:last-child { border-right: none; }
    .press-logo-icon {
      font-size: var(--press-logo-icon-size, 1.5rem); line-height: 1;
    }
    .press-logo-img {
      height: 32px; width: auto; max-width: 80px;
      object-fit: contain; filter: grayscale(1); opacity: .65;
      transition: opacity .2s, filter .2s;
    }
    .press-logo:hover .press-logo-img { filter: grayscale(0); opacity: 1; }
    .press-logo-name {
      font-size: var(--press-logo-name-size, .6rem); font-weight: 700;
      color: var(--cs-ps-title-color, var(--mist)); letter-spacing: .06em;
      text-transform: uppercase; white-space: nowrap;
    }
    .press-logo-tag {
      font-size: var(--press-logo-tag-size, .56rem); color: var(--cs-ps-sub-color, #BDBDBD);
      white-space: nowrap; font-style: italic;
    }
    @media (max-width: 600px) {
      .press-logo-tag { display: none; }
      .press-logo { padding: 0 20px; }
    }

    /* ══════════════════════════════════════════════════════
       REVIEW STARS + COUNT ON PRODUCT CARDS
       ══════════════════════════════════════════════════════ */
    .pc-reviews {
      display: flex; align-items: center; gap: 6px;
      margin-bottom: 6px;
    }
    .pc-stars {
      color: var(--gold); font-size: .82rem;
      letter-spacing: -.04em;
    }
    .pc-rating {
      font-family: var(--font-mono);
      font-size: .74rem; font-weight: 700;
      color: var(--ink);
    }
    .pc-review-count {
      font-size: .72rem; color: var(--mist);
    }

    /* ── Redesigned product card elements ── */
    .pc .pn { font-size:var(--pc-name-size,1.1rem); }
    .pc .pc-from { font-size:var(--pc-price-size,1rem); font-weight:800; }
    .pc .pc-currency { font-size:0.72em; font-weight:700; vertical-align:top; padding-top:0.08em; letter-spacing:0; }
    .pc-subtitle { font-size:var(--pc-subtitle-size,.74rem); color:var(--muted,#8A7E70); font-style:italic; line-height:1.45; }
    .pc-desc { font-size:var(--pc-subheading-size,.81rem); color:var(--ink-2,#3A2F2A); line-height:1.55; }
    .pc .pbody { gap:14px; }
    .pc-from-label { font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted,#8A7E70); margin-bottom:1px; }
    .pc .mac { background:transparent; border:1.5px solid var(--line,#D5C9B7); border-radius:999px; color:var(--ink-2,#3A2F2A); font-weight:500; }
    .pc .pc-price-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:6px; }
    .pc .ab { background:var(--ink,#1C1614); color:#fff; border-radius:999px; width:auto; flex-shrink:0; }
    .pc .ab:hover { background:var(--ink-2,#3A2F2A); }
    .pc .pc-view-page-link { font-size:var(--pc-link-size,13px); color:var(--clay,#B5582F); text-decoration:none; }
    .pc .pc-view-page-link:hover { text-decoration:underline; }
    .pb-protein { position:absolute; top:10px; left:10px; background:rgba(255,255,255,0.90); color:var(--ink,#1C1614); font-size:.62rem; font-weight:800; padding:4px 12px; border-radius:999px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; z-index:2; }
    .pc-best-badge { display:inline-flex; align-items:center; gap:4px; font-size:.62rem; font-weight:700; color:var(--clay,#B5582F); background:rgba(181,88,47,0.08); border:1px solid rgba(181,88,47,0.25); border-radius:999px; padding:2px 10px; }

    /* ══════════════════════════════════════════════════════
       BEST SELLER BADGE
       ══════════════════════════════════════════════════════ */
    .pb-best {
      position: absolute; top: 10px; left: 10px;
      background: var(--gold); color: #0F0C08;
      font-size: .62rem; font-weight: 800;
      padding: 3px 9px; border-radius: calc(var(--radius) * 1.25);
      z-index: 2; letter-spacing: .04em;
      text-transform: uppercase;
      box-shadow: 0 2px 8px rgba(201,168,76,.3);
    }
    .pb-sold-out {
      position: absolute; top: 10px; right: 10px;
      background: rgba(30,30,30,.75); color: #fff;
      font-size: .62rem; font-weight: 800;
      padding: 3px 9px; border-radius: calc(var(--radius) * 1.25);
      z-index: 2; letter-spacing: .06em;
      text-transform: uppercase;
      backdrop-filter: blur(4px);
    }
    .ab-sold-out {
      background: rgba(120,120,120,.18) !important;
      color: rgba(180,180,180,.7) !important;
      cursor: not-allowed !important;
      opacity: 1 !important;
    }

    /* ══════════════════════════════════════════════════════
       SATISFACTION GUARANTEE ON PRODUCT CARDS
       ══════════════════════════════════════════════════════ */
    .pc-guarantee {
      display: flex; align-items: center; gap: 12px;
      padding: 8px 12px;
      background: var(--soft);
      border-radius: calc(var(--radius) * 0.625);
      margin-top: 8px;
      border:1px solid var(--petal);
    }
    .pc-guarantee-item {
      display: flex; align-items: center; gap: 5px;
      font-size: .68rem; color: var(--mist);
      font-weight: 600; white-space: nowrap;
    }
    .pc-guarantee-item span { font-size: .8rem; }



    /* ── Promo Code ──────────────────────────────────────── */
    .promo-row {
      display: flex; gap: 8px; align-items: flex-start;
    }
    .promo-input {
      flex: 1; border:1.5px solid var(--petal); border-radius: calc(var(--radius) * 0.5);
      padding: 10px 13px; font-size: .88rem; font-family: var(--font-body);
      text-transform: uppercase; letter-spacing: .06em;
      font-family: var(--font-mono);
      transition: border-color .2s; background:var(--cream); color: var(--ink);
    }
    .promo-input:focus { outline: none; border-color: var(--rose); }
    .promo-apply-btn {
      background: var(--soft); color: var(--ink); border:1.5px solid var(--petal);
      padding: 10px 16px; border-radius: calc(var(--radius) * 0.5); font-size: .82rem; font-weight: 700;
      cursor: pointer; white-space: nowrap; transition: all .2s;
      font-family: var(--font-body); flex-shrink: 0;
    }
    .promo-apply-btn:hover { border-color: var(--rose); color: var(--rose); }
    .promo-apply-btn:disabled { opacity: .6; cursor: not-allowed; }
    .promo-success {
      display: none; background: var(--slt); border: 1px solid var(--petal);
      border-radius: calc(var(--radius) * 0.5); padding: 8px 12px; font-size: .8rem;
      color: var(--sage); margin-top: 6px; font-weight: 600;
    }
    .promo-error {
      display: none; background: #FFEBEE; border: 1px solid #FFCDD2;
      border-radius: calc(var(--radius) * 0.5); padding: 8px 12px; font-size: .8rem;
      color: #C62828; margin-top: 6px;
    }
    .promo-remove {
      background: none; border: none; color: var(--rose); font-size: .76rem;
      cursor: pointer; font-weight: 700; margin-left: 8px;
      font-family: var(--font-body);
    }


    .loyalty-section{margin-bottom:12px;}
    .loyalty-bal{font-size:.74rem;color:var(--mist);margin-bottom:6px;}
    .loyalty-bal strong{color:var(--gold);font-family:var(--font-mono);}
    .loyalty-row{display:flex;gap:8px;}
    .loyalty-inp{flex:1;border:1.5px solid var(--petal);border-radius: calc(var(--radius) * 0.5);padding:9px 12px;
      font-size:.86rem;font-family:var(--font-mono);background:var(--cream);color:var(--ink);}
    .loyalty-inp:focus{outline:none;border-color:var(--gold);}
    .loyalty-btn{background:var(--soft);color:var(--ink);border:1.5px solid var(--petal);
      padding:9px 14px;border-radius: calc(var(--radius) * 0.5);font-size:.8rem;font-weight:700;cursor:pointer;
      white-space:nowrap;font-family:var(--font-body);transition:all .2s;}
    .loyalty-btn:hover{border-color:var(--gold);color:var(--gold);}
    .loyalty-ok{display:none;background:#FFF8E1;border:1px solid #FFE082;border-radius: calc(var(--radius) * 0.5);
      padding:7px 11px;font-size:.78rem;color:#795548;margin-top:5px;font-weight:600;}
    .loyalty-err{display:none;background:#FFEBEE;border:1px solid #FFCDD2;border-radius: calc(var(--radius) * 0.5);
      padding:7px 11px;font-size:.78rem;color:#C62828;margin-top:5px;}
    .loyalty-rm{background:none;border:none;color:var(--rose);font-size:.72rem;
      cursor:pointer;font-weight:700;margin-left:6px;font-family:var(--font-body);}


    .receipt-link {
      display: inline-block;
      margin-top: 10px;
      color: var(--rose);
      font-size: .82rem;
      font-weight: 700;
      text-decoration: none;
      border: 1.5px solid var(--rose);
      padding: 8px 18px;
      border-radius: calc(var(--radius) * 1.4);
      transition: all .2s;
    }
    .receipt-link:hover { background: var(--rose); color: white; }


    .nav-shop-btn {
      background: var(--rose);
      color: white;
      padding: 7px 16px;
      border-radius: calc(var(--radius) * 1.4);
      font-size: .8rem;
      font-weight: 700;
      text-decoration: none;
      margin-right: 6px;
      transition: background .2s, transform .15s;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .nav-shop-btn:hover { background: var(--berry); transform: scale(1.03); }
    @media (max-width: 380px) { .nav-shop-btn { padding: 6px 12px; font-size: .74rem; } }

    /* ── Accessibility: reduced motion ──────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ── Accessibility: keyboard focus states ────────────────── */
    :focus-visible {
      outline: 2px solid var(--rose);
      outline-offset: 3px;
      border-radius: 4px;
    }
    :focus:not(:focus-visible) { outline: none; }

    /* ── Hamburger — layout handled by bb-components.css (shows at ≤768px) ── */
    .bb-hamburger:hover { background:var(--soft); }

    /* ── Mobile Nav Drawer — styles in bb-components.css ─── */