:root{
    --bone:#F5F1E5;
    --card:#ECE5D2;
    --card-2:#E4DBC3;
    --off-white:#FBFAF6;
    --ink:#030A30;
    --ink-soft:#38415C;
    --amber:#B86F2C;
    --amber-deep:#8A4E1A;
    /* Lighter tint for amber text on dark (--ink) backgrounds — --amber itself
       only hits ~3.8:1 there, below WCAG AA's 4.5:1. This hits ~5.3:1. Only use
       on dark grounds; --amber stays the button/accent color everywhere else. */
    --amber-tint:#D08A45;
    --line:rgba(3,10,48,0.14);
    --max:1440px;
    --font-head: var(--font-schibsted), system-ui, sans-serif;
    --font-body: var(--font-hanken), system-ui, -apple-system, sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--bone);
    -webkit-font-smoothing:antialiased;
    font-size:16px;
    line-height:1.5;
  }
  img{display:block;width:100%;height:100%;object-fit:cover;}
  a{color:inherit;text-decoration:none;}
  svg{display:block;}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 48px;}

  h1,h2,h3,h4,h5,h6{font-family:var(--font-head);font-weight:700;letter-spacing:-.005em;line-height:1.14;}
  p{max-width:62ch;}

  .rule{width:46px;height:2px;background:var(--amber);margin:24px 0;border:none;}

  /* ---------- BUTTONS: minimal underline-link, no boxes/fills ---------- */
  .btn-line{
    position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;
    font-family:var(--font-body);font-size:13px;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em;color:var(--amber-deep);
    border-bottom:1.5px solid var(--amber);padding-bottom:4px;
    transition:opacity .2s ease-out,transform .15s ease-out;
    cursor:pointer;background:none;border-left:none;border-right:none;border-top:none;
  }
  .btn-line:hover{opacity:.65;}
  .btn-line:active{transform:scale(.97);}
  .btn-line svg{width:14px;height:14px;}

  /* On dark/photographic grounds (hero video) */
  .btn-line.on-dark{color:#fff;border-bottom-color:rgba(255,255,255,.65);}
  .btn-line.on-dark.secondary{color:rgba(255,255,255,.82);border-bottom-color:rgba(255,255,255,.4);}

  /* Hero's one real call to action - solid weight so it reads as THE next step,
     with "Explore Our Products" staying a quieter text link beside it. Same
     amber-deep pill used for Checkout/Pay/Chat-on-WhatsApp elsewhere. */
  .hero-btn-primary{
    display:inline-flex;align-items:center;gap:8px;min-height:44px;background:var(--amber-deep);color:#fff;
    padding:13px 26px;border-radius:100px;font-family:var(--font-body);font-size:13px;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em;transition:opacity .2s ease-out,transform .15s ease-out;
  }
  .hero-btn-primary svg{width:14px;height:14px;}
  .hero-btn-primary:hover{opacity:.85;}
  .hero-btn-primary:active{transform:scale(.97);}

  /* ---------- NAV ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(245,241,229,.92);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav{
    max-width:var(--max);margin:0 auto;padding:18px 48px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .logo-img{height:46px;width:auto;object-fit:contain;}
  .navlinks{display:flex;gap:32px;font-size:12px;letter-spacing:.07em;font-weight:700;text-transform:uppercase;color:var(--ink-soft);}
  .navlinks a{transition:color .2s ease-out;}
  .navlinks a:hover{color:var(--ink);}
  .navright{display:flex;align-items:center;gap:20px;}
  .nav-cart{position:relative;display:flex;align-items:center;color:var(--ink);transition:color .2s ease-out;}
  .nav-cart:hover{color:var(--amber-deep);}
  .nav-cart svg{width:21px;height:21px;}
  .nav-cart-badge{
    position:absolute;top:-7px;right:-8px;min-width:16px;height:16px;padding:0 4px;border-radius:100px;
    background:var(--amber-deep);color:#fff;font-size:10px;font-weight:800;line-height:16px;text-align:center;
  }
  .account-menu{position:relative;}
  .account-link{
    display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;
    font-family:var(--font-body);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink);
    transition:color .2s ease-out;
  }
  .account-link:hover{color:var(--amber-deep);}
  .account-link svg{width:20px;height:20px;flex-shrink:0;}
  .account-link .caret{width:11px;height:11px;flex-shrink:0;margin-left:-2px;transition:transform .2s ease-out;}
  .account-menu.is-open .account-link .caret{transform:rotate(180deg);}

  .account-dropdown{
    position:absolute;top:calc(100% + 18px);right:0;min-width:190px;z-index:60;
    background:var(--off-white);border:1px solid var(--line);padding:8px 0;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .2s ease-out,transform .2s ease-out,visibility .2s;
  }
  .account-menu.is-open .account-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
  .account-dropdown a{
    display:block;padding:11px 20px;font-size:13px;font-weight:600;color:var(--ink);
    transition:background .2s ease-out,color .2s ease-out;
  }
  .account-dropdown a:hover{background:var(--card);color:var(--amber-deep);}

  /* ---------- MOBILE NAV DRAWER (hamburger replaces .navlinks under 980px) ----------
     Touch targets sized 44x44 minimum per WCAG/mobile HIG - the hamburger and close
     button are the two smallest interactive elements added here, so they get the
     strictest sizing. */
  .nav-toggle{
    display:none;width:44px;height:44px;background:none;border:none;margin:0 -10px 0 0;cursor:pointer;
    color:var(--ink);align-items:center;justify-content:center;flex-shrink:0;touch-action:manipulation;
  }
  .nav-toggle svg{width:24px;height:24px;}
  .mobile-drawer-backdrop{
    position:fixed;inset:0;z-index:90;background:rgba(3,10,48,.5);
    opacity:0;pointer-events:none;transition:opacity .25s ease-out;
  }
  .mobile-drawer-backdrop.is-open{opacity:1;pointer-events:auto;}
  .mobile-drawer{
    position:fixed;top:0;right:0;bottom:0;z-index:95;width:min(320px,80vw);
    background:var(--ink);padding:16px 24px 28px;
    display:flex;flex-direction:column;
    transform:translateX(100%);transition:transform .32s cubic-bezier(.16,1,.3,1);
    box-shadow:-12px 0 36px rgba(0,0,0,.22);
  }
  .mobile-drawer.is-open{transform:translateX(0);}
  .mobile-drawer-close{
    align-self:flex-end;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
    background:none;border:none;color:var(--bone);margin:0 -10px 8px 0;cursor:pointer;touch-action:manipulation;
  }
  .mobile-drawer-close svg{width:20px;height:20px;}
  .mobile-drawer a{
    display:flex;align-items:center;min-height:44px;
    color:var(--bone);font-family:var(--font-body);font-size:16px;font-weight:700;
    padding:14px 0;border-top:1px solid rgba(245,241,229,.14);transition:color .2s ease-out;
    touch-action:manipulation;
  }
  .mobile-drawer a:first-of-type{border-top:none;}
  .mobile-drawer a:hover{color:var(--amber-tint);}

  /* Pinned to the bottom of the drawer's flex column - the six nav links alone
     left a lot of empty ink-green space beneath them on a full-height phone
     screen. Account links belong here anyway on mobile, since there's no
     separate account-menu dropdown once the drawer is the primary nav. */
  .mobile-drawer-account{margin-top:auto;}
  .mobile-drawer-label{
    font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:rgba(245,241,229,.55);padding-top:20px;margin-top:20px;border-top:1px solid rgba(245,241,229,.14);
  }
  .mobile-drawer-account a{font-size:15px;}

  /* ---------- HERO: the one true full-bleed moment ---------- */
  .hero{position:relative;min-height:640px;overflow:hidden;display:flex;align-items:center;}
  .hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  /* Portrait-cropped stand-in for phones, swapped in under 640px - the desktop
     video is a horizontal composition that a tall mobile frame only ever sees a
     sliver of. Placeholder now; sized/positioned for a real vertical shoot later. */
  .hero-media-mobile{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:32% 28%;}
  .hero-overlay{
    position:absolute;inset:0;
    background:
      linear-gradient(180deg, rgba(14,16,10,.48) 0%, rgba(14,16,10,.24) 26%, rgba(14,16,10,.42) 58%, rgba(14,16,10,.62) 100%),
      radial-gradient(60% 55% at 50% 46%, rgba(14,16,10,.28), transparent 70%);
  }
  .hero-content{
    position:relative;width:100%;max-width:920px;margin:0 auto;padding:0 48px;
    display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;
  }
  .hero-content h1{font-size:clamp(2rem,4.1vw,3.4rem);color:#fff;max-width:16ch;}
  .hero-btns{display:flex;align-items:center;gap:28px;margin-top:36px;flex-wrap:wrap;justify-content:center;}

  .hero-strip{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    padding:20px 0;
    background:rgba(14,16,10,.55);backdrop-filter:blur(2px);
    border-top:1px solid rgba(255,255,255,.14);
  }
  .hero-strip-row{
    max-width:var(--max);margin:0 auto;padding:0 48px;
    display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  }
  .hero-strip-row span{
    color:rgba(255,255,255,.92);
    font-family:var(--font-head);font-style:italic;font-weight:500;
    font-size:clamp(.95rem,1.6vw,1.15rem);letter-spacing:.01em;
  }

  /* ---------- SECTION SCAFFOLDING ---------- */
  section{padding:96px 0;}
  .section-head{max-width:1040px;margin:0 auto 48px;text-align:center;}
  .section-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem);}
  .section-head p{margin:18px auto 0;font-size:1.1rem;line-height:1.65;color:var(--ink-soft);max-width:none;}

  /* ---------- WHY (asymmetric editorial: intro column + list, no boxed grid) ---------- */
  .promise{background:var(--bone);}
  .why-grid{
    display:grid;grid-template-columns:.85fr 1px 1.15fr;column-gap:36px;align-items:start;
  }
  .why-divider{background:var(--line);align-self:stretch;min-height:100%;}
  .why-intro{position:sticky;top:110px;}
  .why-intro h2{font-size:clamp(2rem,3.6vw,2.75rem);}
  .why-intro p{margin-top:18px;font-size:1.08rem;line-height:1.68;color:var(--ink-soft);}
  /* Moved here from mid-section (was in the sticky intro column) to close the
     section instead - matches how Heritage's and Quality's own quotes already
     read as a final line, not a mid-argument aside. Smaller and centered to
     read as a caption under the six values, not a second headline competing
     with them. */
  .why-pullquote{
    max-width:760px;margin:48px auto 0;padding-bottom:28px;border-bottom:1px solid var(--line);
    text-align:center;font-size:1rem;font-weight:700;line-height:1.55;color:var(--ink);font-style:normal;
  }
  .why-list{display:flex;flex-direction:column;}
  .why-row{
    display:flex;align-items:center;gap:24px;margin:0 -20px;padding:26px 20px;border-top:1px solid var(--line);
    transition:background .25s ease-out;
  }
  .why-row:first-child{border-top:none;}
  .why-row:hover{background:var(--card);}
  .why-row .icon{width:auto;height:108px;object-fit:contain;flex-shrink:0;}
  .why-row .rt .name{font-size:1.15rem;font-weight:800;letter-spacing:-.005em;}
  .why-row .rt .desc{margin-top:6px;font-size:1rem;line-height:1.5;color:var(--ink-soft);}

  /* ---------- FARM REVEAL: full-width image, cream panel slides in on scroll, manual collapse ---------- */
  .fr-frame{
    position:relative;width:100%;aspect-ratio:16/8;overflow:hidden;border-radius:3px;
    background:var(--card);
  }
  .fr-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .fr-panel{
    position:absolute;top:0;left:0;height:100%;width:min(480px,46%);
    background:var(--off-white);display:flex;align-items:center;
  }
  .fr-panel.right{left:auto;right:0;}
  .fr-panel-inner{padding:52px 48px;}
  .fr-panel-inner h2{font-size:clamp(1.8rem,2.8vw,2.3rem);}
  .fr-panel-inner p{margin-top:18px;font-size:1.05rem;line-height:1.68;color:var(--ink-soft);}
  .fr-panel-inner p + p{margin-top:12px;}
  .fr-toggle{
    position:absolute;top:50%;right:0;transform:translate(100%,-50%);
    width:40px;height:68px;background:var(--off-white);
    border:1px solid var(--line);border-left:none;border-radius:0 3px 3px 0;
    display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
    transition:background .2s ease-out;
  }
  .fr-toggle:hover{background:var(--card);}
  .fr-toggle:focus-visible{outline:2px solid var(--amber-deep);outline-offset:-2px;}
  .fr-toggle svg{width:16px;height:16px;color:var(--ink);transition:transform .4s cubic-bezier(.16,1,.3,1);}
  .fr-panel.is-minimized .fr-toggle svg{transform:rotate(180deg);}
  /* Right-mounted panel: toggle mirrors to the panel's left edge, icon direction flips to match */
  .fr-panel.right .fr-toggle{
    right:auto;left:0;transform:translate(-100%,-50%);
    border-left:1px solid var(--line);border-right:none;border-radius:3px 0 0 3px;
  }
  .fr-panel.right .fr-toggle svg{transform:rotate(180deg);}
  .fr-panel.right.is-minimized .fr-toggle svg{transform:rotate(0deg);}

  /* Default: panel fully visible, no animation dependency (safe if JS fails or reduced-motion is on) */
  .fr-panel{transform:translateX(0);}
  @media (prefers-reduced-motion: no-preference){
    .fr-panel.reveal-slide{transform:translateX(-100%);}
    .fr-panel.right.reveal-slide{transform:translateX(100%);}
    /* First reveal: deliberately slow, with a pause up front so the full image reads before the panel moves */
    .fr-panel.reveal-slide.is-visible{
      transform:translateX(0);
      transition:transform 2.4s cubic-bezier(.22,1,.36,1) .6s;
    }
    /* Once settled, the manual toggle is quick and responsive - not tied to the slow entrance timing */
    .fr-panel.reveal-slide.is-visible.panel-settled{
      transition:transform .55s cubic-bezier(.16,1,.3,1);
    }
  }
  /* Manual minimize always wins, in both motion modes - it's a deliberate user action, not ambient motion */
  .fr-panel.is-minimized{transform:translateX(calc(-100% + 36px)) !important;}
  .fr-panel.right.is-minimized{transform:translateX(calc(100% - 36px)) !important;}

  /* Green block: used once on the page (Gau Mata panel) - a deliberate earthy accent, not a repeated pattern */
  .fr-panel.on-green{background:var(--ink);}
  .fr-panel.on-green h2{color:#fff;}
  .fr-panel.on-green p{color:#fff;}
  .fr-panel.on-green .rule{background:rgba(245,241,229,.35);}
  .fr-panel.on-green .btn-line{color:var(--bone);border-bottom-color:rgba(245,241,229,.5);}
  .fr-panel.on-green .fr-toggle{background:var(--ink);border-color:rgba(245,241,229,.25);}
  .fr-panel.on-green .fr-toggle:hover{background:var(--ink-soft);}
  .fr-panel.on-green .fr-toggle svg{color:var(--bone);}

  .farm-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;}
  .farm-strip-photo{position:relative;aspect-ratio:5/4;overflow:hidden;border-radius:3px;}
  .farm-strip-photo img{transition:transform .7s cubic-bezier(.16,1,.3,1);}
  .farm-strip-photo:hover img{transform:scale(1.06);}

  /* ---------- GAU MATA (same reveal-panel aesthetic as Farm, mirrored to the right) ---------- */
  .heritage{background:var(--card);}
  .heritage .farm-strip{margin-top:16px;}
  .heritage-mobile-head{display:none;}

  .heritage-body{max-width:1040px;margin:0 auto;text-align:center;}
  .heritage-body h2{font-size:clamp(1.9rem,3.4vw,2.6rem);}
  .heritage-body p{margin:20px auto 0;font-size:1.1rem;line-height:1.7;color:var(--ink-soft);max-width:none;}
  .heritage-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    margin:56px auto 0;max-width:840px;
  }
  .heritage-item{
    text-align:center;padding:6px 26px 0;border-left:1px solid var(--line);
    transition:transform .35s cubic-bezier(.16,1,.3,1);
  }
  .heritage-item:first-child{border-left:none;}
  .heritage-item:hover{transform:translateY(-6px);}
  .v-icon{width:auto;height:160px;object-fit:contain;margin:0 auto 4px;transition:transform .35s cubic-bezier(.16,1,.3,1);}
  .heritage-item:hover .v-icon{transform:scale(1.12);}
  .heritage-item .t{
    font-family:var(--font-body);font-weight:800;font-size:1.4rem;letter-spacing:-.01em;
    color:var(--ink);margin-bottom:10px;
  }
  .heritage-item .d{font-size:14px;line-height:1.5;color:var(--ink-soft);}
  .heritage-quote{
    max-width:760px;margin:48px auto 0;text-align:center;font-size:1.05rem;font-weight:600;
    line-height:1.55;color:var(--ink);
  }

  /* ---------- PRODUCTS (plain centered heading + uniform grid, no side panel, no hover tricks) ---------- */
  .products{background:var(--bone);}

  .purchase-toggle{display:flex;align-items:center;justify-content:center;gap:32px;margin-bottom:44px;}
  .pt-option{
    background:none;border:none;padding:8px 0 6px;cursor:pointer;
    font-family:var(--font-body);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    color:var(--ink-soft);border-bottom:1.5px solid transparent;transition:color .2s ease-out,border-color .2s ease-out;
  }
  .pt-option:hover{color:var(--ink);}
  .pt-option.is-active{color:var(--ink);border-bottom-color:var(--amber);}

  .product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px 28px;}
  .product-card{display:flex;flex-direction:column;}
  .product-media{position:relative;overflow:hidden;border-radius:3px;aspect-ratio:4/5;}
  .product-media.empty{
    background:linear-gradient(160deg,var(--card),var(--card-2));
    display:flex;align-items:center;justify-content:center;
  }
  .product-media.empty span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);opacity:.55;}
  .product-cap{padding-top:18px;}
  .product-cap .name{font-size:1.05rem;font-weight:700;}
  .product-cap .note{margin-top:6px;font-size:14px;color:var(--ink-soft);line-height:1.45;min-height:2.9em;}
  .cap-buy{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;}
  .cap-buy .price{font-size:17px;font-weight:800;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;}
  .cap-buy .price .unit{display:block;font-size:11px;font-weight:500;color:var(--ink-soft);}
  .cap-buy .price-subscribe{display:none;}
  .products.mode-subscribe .price-onetime{display:none;}
  .products.mode-subscribe .price-subscribe{display:inline;}
  .price-subscribe .was{margin-left:6px;font-size:12px;font-weight:500;color:var(--ink-soft);text-decoration:line-through;font-variant-numeric:tabular-nums;}
  .cap-buy .buy-btn{
    flex-shrink:0;padding:8px 0 6px;background:none;border:none;border-bottom:1.5px solid var(--amber);
    font-family:var(--font-body);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    color:var(--amber-deep);cursor:pointer;transition:opacity .2s ease-out;
    white-space:nowrap;
  }
  .cap-buy .buy-btn:hover{opacity:.65;}
  .buy-control{flex-shrink:0;}
  .qty-stepper{
    display:flex;align-items:center;gap:12px;background:var(--ink);border-radius:100px;padding:6px 8px;
  }
  .qty-stepper button{
    width:22px;height:22px;border-radius:50%;border:none;background:rgba(245,241,229,.14);color:var(--bone);
    cursor:pointer;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;
    transition:background .15s ease-out;
  }
  .qty-stepper button:hover{background:rgba(245,241,229,.28);}
  .qty-stepper span{color:var(--bone);font-weight:800;font-size:13px;min-width:12px;text-align:center;}

  /* ---------- QUALITY (contained panel) ---------- */
  .quality{background:var(--ink);color:var(--bone);}
  .quality .section-head p{color:rgba(245,241,229,.78);}
  .quality-panel{border:1px solid rgba(245,241,229,.18);padding:48px 44px;}
  .badge-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
  .badge{padding:0 24px;border-left:1px solid rgba(245,241,229,.18);text-align:center;}
  .badge:first-child{border-left:none;padding-left:0;}
  .quality-icon{width:auto;height:84px;object-fit:contain;margin:0 auto 14px;}
  .badge .t{font-size:14px;font-weight:700;line-height:1.35;}
  .quality-quote{
    max-width:760px;margin:44px auto 0;text-align:center;font-size:.92rem;font-weight:500;
    color:rgba(245,241,229,.82);line-height:1.6;
  }
  .quality-cta{text-align:center;margin-top:36px;}
  .quality .btn-line{color:var(--amber-tint);}

  /* ---------- CONTACT (light ground, distinct from Quality's dark ink) ----------
     Single centered column, sized to its content rather than a fixed section
     height - just enough to state the question and offer the one real answer
     (WhatsApp), so it doesn't linger like the heavier sections around it. */
  .contact{background:var(--card);padding:64px 0;}
  .contact-inline{max-width:480px;margin:0 auto;text-align:center;}
  .contact-inline h2{font-size:clamp(1.9rem,3.4vw,2.6rem);}
  .contact-inline p{margin:16px 0 28px;font-size:1rem;line-height:1.6;color:var(--ink-soft);}
  .contact-wa-btn{
    display:inline-flex;align-items:center;gap:10px;background:var(--amber-deep);color:#fff;
    padding:15px 30px;border-radius:100px;font-family:var(--font-body);font-size:12.5px;font-weight:700;
    text-transform:uppercase;letter-spacing:.05em;transition:opacity .2s ease-out;
  }
  .contact-wa-btn svg{width:18px;height:18px;flex-shrink:0;}
  .contact-wa-btn:hover{opacity:.85;}

  /* ---------- FOOTER ---------- */
  footer{background:var(--bone);}
  .footer-top{
    display:grid;grid-template-columns:1.5fr 1fr 1fr;align-items:start;gap:48px;
    padding-top:72px;padding-bottom:48px;
  }
  .footer-brand{display:flex;flex-direction:column;align-items:flex-start;}
  .footer-logo-img{height:36px;width:auto;object-fit:contain;margin-bottom:18px;}
  .footer-brand p{font-size:1rem;line-height:1.6;color:var(--ink-soft);max-width:34ch;}
  .footer-brand .btn-line{margin-top:16px;}
  .footer-nav{display:flex;flex-direction:column;gap:12px;}
  .footer-nav .h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);margin-bottom:6px;}
  .footer-nav a{font-size:14px;font-weight:600;color:var(--ink);transition:color .2s ease-out;}
  .footer-nav a:hover{color:var(--amber-deep);}
  .footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
  .footer-contact .h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);margin-bottom:2px;}
  .footer-social{display:flex;gap:10px;}
  .footer-social a{
    width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
    display:flex;align-items:center;justify-content:center;transition:background .2s ease-out,border-color .2s ease-out;
  }
  .footer-social a:hover{background:var(--ink);border-color:var(--ink);}
  .footer-social a:hover svg{color:var(--bone);}
  .footer-social svg{width:17px;height:17px;color:var(--ink);transition:color .2s ease-out;}
  .footer-bottom{
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
    padding:24px 0 48px;border-top:1px solid var(--line);
  }
  .footer-bottom-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
  .footer-bottom p{font-size:12.5px;color:var(--ink-soft);}
  .footer-bottom .credit{position:relative;padding-left:16px;}
  .footer-bottom .credit::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:3px;border-radius:50%;background:var(--ink-soft);}
  .footer-bottom .credit a{color:var(--ink-soft);font-weight:700;text-decoration:underline;text-underline-offset:2px;transition:color .2s ease-out;}
  .footer-bottom .credit a:hover{color:var(--amber-deep);}
  .footer-bottom .legal{display:flex;gap:20px;}
  .footer-bottom .legal a{font-size:12.5px;color:var(--ink-soft);transition:color .2s ease-out;}
  .footer-bottom .legal a:hover{color:var(--ink);}

  /* ---------- MOTION ---------- */
  @media (prefers-reduced-motion: no-preference){
    .hero-content > *{opacity:0;transform:translateY(18px);animation:heroIn .8s cubic-bezier(.16,1,.3,1) forwards;}
    .hero-content h1{animation-delay:.05s;}
    .hero-content .hero-btns{animation-delay:.25s;}
    @keyframes heroIn{to{opacity:1;transform:translateY(0);}}

    .reveal{
      opacity:0;transform:translateY(24px);
      transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
    }
    .reveal.is-visible{opacity:1;transform:translateY(0);}
  }
  @media (prefers-reduced-motion: reduce){
    /* FR-MOTION: .product-media img dropped - no base transition targets it
       anywhere in this file (confirmed by search), so it was cancelling a
       transition that was never declared. .farm-strip-photo img (line ~295)
       is the one that's real. */
    .farm-strip-photo img{transition:none;}
  }

  @media (max-width:980px){
    .navlinks{display:none;}
    .nav-toggle{display:flex;}
    .account-label{display:none;}
    .account-link{gap:0;width:44px;height:44px;justify-content:center;touch-action:manipulation;}
    .account-link .caret{display:none;}
    .nav-cart{width:44px;height:44px;justify-content:center;touch-action:manipulation;}
    .navright{gap:8px;}
    .hero{min-height:560px;}
    .hero-strip-row{justify-content:center;text-align:center;}
    .fr-frame{aspect-ratio:auto;display:flex;flex-direction:column;border-radius:0;}
    .fr-image{position:relative;aspect-ratio:4/3;}
    .fr-panel{position:static;width:100%;height:auto;transform:none !important;transition:none;}
    .fr-panel-inner{padding:32px 4px 0;}
    .fr-toggle{display:none;}
    .why-grid{grid-template-columns:1fr;}
    .why-divider{display:none;}
    .why-intro{position:static;margin-bottom:8px;}
    /* Six stacked rows ran ~1.7 phone-screens tall - a 2-col grid roughly halves
       that, and switching each cell to a centered icon-over-text card (instead of
       the desktop's left-aligned row) matches how Heritage's value cards already
       read on mobile, so the two "value prop" sections finally feel like one family. */
    .why-list{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;row-gap:36px;}
    .why-row{
      flex-direction:column;align-items:center;text-align:center;
      margin:0;padding:0;border-top:none;
    }
    .why-row:hover{background:none;}
    .why-row .icon{height:72px;margin-bottom:4px;}
    .farm-strip{grid-template-columns:1fr 1fr;}
    .farm-strip-photo:nth-child(3){grid-column:1 / -1;}
    .heritage-grid{grid-template-columns:1fr;row-gap:28px;}
    .heritage-item{border-left:none;padding-left:0;}
    .product-grid{grid-template-columns:1fr 1fr;gap:28px 20px;}
    .cap-buy{flex-direction:column;align-items:flex-start;gap:8px;}
    /* Add to Cart is the page's single most-repeated conversion action - a thin
       underlined link is a precise mouse target but a poor thumb one. Full pill
       button on mobile, same amber-deep weight used for every other primary CTA. */
    .cap-buy .buy-btn{
      min-height:44px;padding:0 22px;border:none;border-radius:100px;
      background:var(--amber-deep);color:#fff;font-size:12px;
    }
    .cap-buy .buy-btn:hover{opacity:.85;}
    /* Scoped to .product-grid, not the bare class - .qty-stepper is reused
       inside .cart-line on /buy-once's narrow order-summary sidebar, where a
       44px pair of buttons has no room and blew the calendar/sidebar grid
       out past the 360px viewport (FR-MOBILE). The cart-line's own stepper
       gets its own appropriately-sized rule below. */
    .product-grid .qty-stepper{padding:6px 10px;gap:14px;}
    .product-grid .qty-stepper button{width:44px;height:44px;font-size:17px;touch-action:manipulation;}
    /* Generous buffer, not a precise measurement - just needs to clear the
       sticky basket bar (~70-100px depending on device safe-area) so the
       scrollIntoView() in site.js actually lands above it. Has to sit on
       .buy-control itself - scroll-margin only applies to the exact element
       passed to scrollIntoView(), not an ancestor. */
    .buy-control{scroll-margin-bottom:110px;}
    .badge-row{grid-template-columns:repeat(2,1fr);row-gap:28px;}
    .badge{border-left:none;padding-left:0;}
    .footer-top{grid-template-columns:1fr;text-align:center;gap:36px;}
    .footer-brand{align-items:center;}
    .footer-contact{align-items:center;}
    .footer-bottom{flex-direction:column;text-align:center;}
    /* The "." separator is an absolutely-positioned pseudo-element tied to the
       credit line's own left edge - fine inline on desktop, but once the two
       lines wrap onto their own rows on mobile it strands the dot at the start
       of a blank new line instead of "between" the two lines. Just drop it and
       let the two lines stand as plain stacked text. */
    .footer-bottom-left{flex-direction:column;gap:4px;}
    .footer-bottom .credit{padding-left:0;}
    .footer-bottom .credit::before{display:none;}
    .wa-bar{flex-direction:column;text-align:center;}
    .wa-bar-left{flex-direction:column;}
    .wa-btn{width:100%;justify-content:center;}
    .wrap{padding:0 24px;}
    nav{padding:16px 24px;}
    section{padding:64px 0;}
  }

  /* ---------- HOMEPAGE HERO, phone-native pass ----------
     A taller, portrait-leaning frame with its own image (see .hero-media-mobile
     above) instead of a cropped sliver of the desktop video, side padding that
     matches the rest of the mobile page instead of the desktop's 48px, and the
     three-phrase strip stacked one-per-line instead of wrapping 2-then-1. */
  @media (max-width:640px){
    .hero{min-height:640px;}
    .hero-media{display:none;}
    .hero-media-mobile{display:block;}
    .hero-content{padding:0 24px;}
    .hero-btns{flex-direction:column;gap:14px;margin-top:32px;}
    .hero-strip-row{padding:0 24px;flex-direction:column;gap:10px;}
  }

  /* ---------- SUB-PAGE HERO (shorter than the homepage's, same video treatment) ---------- */
  .hero.compact{min-height:440px;}
  @media (max-width:980px){ .hero.compact{min-height:380px;} }

  /* ---------- CONTENT NEEDED: flagged placeholder for anything the client must supply ---------- */
  .content-needed{
    border:1px dashed var(--line);background:var(--card);border-radius:3px;
    padding:44px 36px;text-align:center;display:flex;flex-direction:column;align-items:center;
  }
  .content-needed.media{aspect-ratio:16/9;justify-content:center;}
  .content-needed .icon{width:26px;height:26px;color:var(--amber-deep);margin-bottom:14px;}
  .content-needed .q{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--amber-deep);margin-bottom:8px;}
  .content-needed p{margin:0 auto;font-size:14px;line-height:1.55;color:var(--ink-soft);max-width:42ch;}

  /* ---------- PAGE HEADER (for sub-pages: eyebrow-free centered intro, reuses section-head rhythm) ---------- */
  .page-lede{max-width:760px;margin:0 auto 64px;text-align:center;}
  .page-lede h2{font-size:clamp(1.9rem,3.4vw,2.6rem);}
  .page-lede p{margin:18px auto 0;font-size:1.1rem;line-height:1.7;color:var(--ink-soft);max-width:none;}

  /* ---------- GALLERY GRID (Our Farm) ---------- */
  .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .gallery-grid .g-tall{grid-row:span 2;}
  .gallery-photo{position:relative;overflow:hidden;border-radius:3px;height:100%;min-height:220px;}
  .gallery-photo img{transition:transform .7s cubic-bezier(.16,1,.3,1);}
  .gallery-photo:hover img{transform:scale(1.05);}
  @media (max-width:980px){
    .gallery-grid{grid-template-columns:1fr 1fr;}
    .gallery-grid .g-tall{grid-row:span 1;}
    .gallery-photo{min-height:0;aspect-ratio:4/5;}
  }

  /* ---------- STATS STRIP ---------- */
  .stats-strip{display:grid;grid-template-columns:repeat(4,1fr);}
  .stat{text-align:center;padding:0 20px;border-left:1px solid var(--line);}
  .stat:first-child{border-left:none;}
  .stat .n{font-family:var(--font-head);font-weight:700;font-size:clamp(1.8rem,3vw,2.4rem);color:var(--ink);}
  .stat .l{margin-top:6px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);}
  @media (max-width:980px){
    .stats-strip{grid-template-columns:1fr 1fr;row-gap:28px;}
    .stat{border-left:none;}
  }

  /* ---------- PROCESS STEPS (Our Process) ---------- */
  .process-steps{display:flex;flex-direction:column;}
  .process-step{
    display:grid;grid-template-columns:64px 1fr;gap:28px;padding:40px 0;border-top:1px solid var(--line);
  }
  .process-step:first-child{border-top:none;padding-top:0;}
  .process-step .num{font-family:var(--font-head);font-weight:700;font-size:2rem;color:var(--amber-deep);}
  .process-step .name{font-size:1.3rem;font-weight:800;}
  .process-step .desc{margin-top:10px;font-size:1.02rem;line-height:1.65;color:var(--ink-soft);}
  @media (max-width:980px){
    .process-step{grid-template-columns:1fr;gap:10px;}
  }

  /* ---------- COMPARE TABLE (Quality) ---------- */
  .compare-table{width:100%;border-collapse:collapse;}
  .compare-table th,.compare-table td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px;}
  .compare-table th{font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);}
  .compare-table td:first-child{font-weight:700;color:var(--ink);}
  .compare-table td.yes{color:var(--amber-deep);font-weight:700;}
  @media (max-width:980px){
    .compare-table{display:block;overflow-x:auto;}
  }

  /* Mobile-only stand-in for the table above - same data, stacked cards instead
     of a side-scrolling grid nothing on screen hints is scrollable. */
  .compare-cards{display:none;}
  @media (max-width:640px){
    .compare-table{display:none;}
    .compare-cards{display:flex;flex-direction:column;max-width:480px;margin:0 auto;}
    .compare-card{padding:20px 0;border-top:1px solid var(--line);}
    .compare-card:first-child{border-top:none;}
    .compare-label{font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);margin-bottom:12px;}
    .compare-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:5px 0;font-size:14px;}
    .compare-row .compare-who{color:var(--ink-soft);flex-shrink:0;}
    .compare-row .compare-val{text-align:right;color:var(--ink);}
    .compare-row.yes .compare-val{color:var(--amber-deep);font-weight:700;}
  }

  /* ---------- FAQ (native <details>/<summary> - accessible and keyboard-friendly by default) ---------- */
  .faq-list{display:flex;flex-direction:column;gap:10px;}
  .faq-item{
    background:var(--card);border-radius:8px;padding:20px 24px;border:1px solid transparent;
    transition:background .2s ease-out,border-color .2s ease-out;
  }
  .faq-item[open]{background:var(--off-white);border-color:var(--line);}
  .faq-item summary{
    display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;
    list-style:none;font-family:var(--font-head);font-size:1.08rem;font-weight:700;color:var(--ink);
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{
    content:'+';flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);
    background:var(--off-white);
    display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--amber-deep);
    transition:transform .2s ease-out;
  }
  .faq-item[open] summary::after{content:'\2212';}
  .faq-item:not([open]) summary:hover::after{border-color:var(--amber);}
  .faq-a{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);max-width:64ch;}
  .faq-a p{font-size:.98rem;line-height:1.68;color:var(--ink-soft);}
  .faq-a p + p{margin-top:10px;}

  /* FR-MOTION: grid-template-rows 0fr->1fr instead of an arbitrary
     max-height ceiling - animates a fr unit, not a real pixel height, so
     there's no per-frame reflow against a fake 4000px target and no skewed
     perceived speed from animating toward a value far past the real
     content height. .faq-more-inner is the single grid item whose own
     overflow:hidden does the actual clipping while the row track grows. */
  .faq-more{
    display:grid;grid-template-rows:0fr;overflow:hidden;
    transition:grid-template-rows .35s ease-out;
  }
  .faq-more.is-open{grid-template-rows:1fr;}
  .faq-more-inner{display:flex;flex-direction:column;gap:10px;overflow:hidden;min-height:0;}
  .faq-toggle-row{text-align:center;margin-top:24px;}
  .faq-toggle-btn{
    display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;
    font-family:var(--font-body);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    color:var(--amber-deep);padding-bottom:4px;border-bottom:1.5px solid var(--amber);
    transition:opacity .2s ease-out;
  }
  .faq-toggle-btn:hover{opacity:.65;}
  .faq-toggle-btn svg{width:13px;height:13px;transition:transform .3s ease-out;}
  .faq-toggle-btn.is-open svg{transform:rotate(180deg);}

  /* ---------- PROSE (long-form narrative copy, centered reading column) ---------- */
  .prose{max-width:640px;margin:0 auto;}
  .prose p{font-size:1.08rem;line-height:1.75;color:var(--ink-soft);margin-top:20px;}
  .prose p:first-child{margin-top:0;}
  .prose p.emphasis{font-weight:700;color:var(--ink);}

  /* ---------- VALUES STRIP (compact 3-across recap, no card chrome) ---------- */
  .values-strip{display:grid;grid-template-columns:repeat(3,1fr);max-width:840px;margin:0 auto;}
  .values-strip .heritage-item{padding-top:0;}
  @media (max-width:980px){
    .values-strip{grid-template-columns:1fr;row-gap:28px;}
  }

  /* ==================== SUBSCRIPTION / WALLET APP ==================== */

  .sub-hero{padding:56px 0 40px;text-align:center;}
  /* These are plain <section> tags, which otherwise inherit the site's default
     96px top padding - stacked on the hero's own bottom padding that made for
     a huge, unintentional gap before the calendar. */
  #builderSection, #hasPlanSection, #emptySection, #orderSection, #emptyCartSection{padding-top:8px;}
  .sub-hero h1{font-size:clamp(2rem,3.6vw,2.75rem);}
  .sub-hero p{margin:14px auto 0;font-size:1.05rem;color:var(--ink-soft);max-width:60ch;}

  /* ---- Layout: calendar (main) + sidebar ---- */
  /* minmax(0,...) tracks, not bare 1.55fr/1fr - a bare fr track sizes to its
     item's max-content when the item can't shrink (grid's default
     min-width:auto on items), which is exactly what caused FR-MOBILE's
     360px overflow: the sidebar's cart-line content refused to shrink below
     its own intrinsic width and blew both grid tracks out past the
     container. minmax(0,fr) clamps the item's minimum back to 0 so it
     shrinks to the track's actual available space like a normal box. */
  .sub-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:44px;align-items:start;padding-bottom:96px;}
  /* The section itself already carries a 64px bottom pad on mobile (see the
     980px breakpoint further down) - this rule's own 96px stacked on top of
     that left ~160px of dead space before the footer. Mobile doesn't need it. */
  @media (max-width:980px){ .sub-layout{grid-template-columns:minmax(0,1fr);gap:36px;padding-bottom:0;} }

  /* ---- Calendar card ---- */
  /* Pinned while the (now taller, with the wallet card) sidebar scrolls past -
     same sticky pattern as .why-intro on the homepage, same top offset for consistency.
     Previously a tall (aspect-ratio:1, ~75-80px-per-row) grid meant a sticky element's
     own bottom overflow could go below the fold and stay trapped there for as long as
     it was stuck (an internal scrollbox was tried as a fix and reverted - see below).
     The real fix is the compact fixed-height .cal-day rows further down: at ~44px/row
     even a full 6-row month comfortably fits under a sticky top:110px on any normal
     viewport, so there's nothing left to trap and no internal scroll is needed. */
  .cal-card{background:var(--off-white);border-radius:6px;padding:32px;position:sticky;top:110px;}
  .cal-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
  .cal-card-header h3{font-family:var(--font-head);font-size:1.4rem;font-weight:700;}
  .cal-nav{display:flex;gap:8px;}
  .cal-nav-btn{
    width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:none;
    display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease-out;
  }
  .cal-nav-btn:hover{background:var(--card);}
  .cal-nav-btn svg{width:15px;height:15px;color:var(--ink);}
  .cal-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line);}
  .cal-legend-item{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-soft);}
  .cal-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

  .cal-dow-row{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:6px;}
  .cal-dow{text-align:center;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);padding-bottom:6px;}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
  /* Fixed, compact row height instead of aspect-ratio:1 (which made each row as tall
     as the column was wide - ~75-80px, the actual cause of a full month overflowing a
     sticky calendar's available space). The number and dots are independently
     absolutely-positioned (not flex-centered as one group) so the number always sits
     dead-center regardless of whether a day has dots - previously a day WITH dots had
     a taller combined block get centered as a whole, pushing the number up off-center
     compared to a plain day; now the dots are pinned to the bottom edge on their own
     and never affect the number's position. */
  .cal-day{
    height:48px;position:relative;border-radius:4px;font-size:15px;color:var(--ink);
    transition:background .15s ease-out;
  }
  .cal-day.empty{visibility:hidden;}
  .cal-daynum{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    display:flex;align-items:center;justify-content:center;line-height:1;
  }
  .cal-day.today .cal-daynum{
    width:22px;height:22px;border-radius:50%;
    background:var(--ink);color:var(--bone);font-weight:800;
  }
  .cal-day.past,
  .cal-day.disabled{color:var(--ink-soft);opacity:.45;}
  .cal-day.clickable{cursor:pointer;}
  .cal-day.clickable:hover{background:var(--card);}
  .cal-day .dots{
    position:absolute;left:50%;bottom:5px;transform:translateX(-50%);
    display:flex;gap:3px;flex-wrap:wrap;justify-content:center;max-width:34px;
  }
  .cal-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
  .cal-dot-onetime{background:none !important;border:1.5px solid;box-sizing:border-box;}

  /* Chosen delivery date on the Buy Once page - a full-cell highlight, distinct from
     the "today" ring, so which date was picked is never ambiguous. */
  .cal-day.selected{background:var(--amber-deep);border-radius:4px;}
  .cal-day.selected .cal-daynum{color:#fff;font-weight:800;}
  .cal-day.selected.today .cal-daynum{background:#fff;color:var(--amber-deep);}
  .cal-day.selected .dots .cal-dot{box-shadow:0 0 0 1.5px rgba(255,255,255,.85);}
  .cal-day.selected:hover{background:var(--amber-deep);}

  .cal-help{margin-top:16px;font-size:12.5px;color:var(--ink-soft);line-height:1.5;}

  .order-date-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:22px 0;}
  .order-date-val{font-size:13.5px;font-weight:700;color:var(--ink-soft);text-align:right;}
  .order-date-val.is-set{color:var(--ink);font-family:var(--font-head);font-size:1rem;}

  /* ---- Sidebar cards ---- */
  .sub-sidebar{display:flex;flex-direction:column;gap:24px;}
  .sub-card{background:var(--card);border-radius:6px;padding:26px;}
  .sub-card h4{font-family:var(--font-head);font-size:1.15rem;font-weight:700;margin-bottom:18px;}

  /* ---- Wallet card (sits below the plan/products card in the sidebar) ---- */
  .wallet-locked{text-align:center;padding:6px 4px 2px;}
  .wallet-lock-icon{width:28px;height:28px;color:var(--ink-soft);margin-bottom:14px;}
  .wallet-locked p{font-size:13px;color:var(--ink-soft);line-height:1.55;margin:0 0 18px;}
  .wallet-summary-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;}
  .wallet-summary-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);}
  .wallet-summary-amt{font-family:var(--font-body);font-size:1.7rem;font-weight:700;font-variant-numeric:tabular-nums;}
  .wallet-card-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;}
  .wallet-logout-btn{
    background:none;border:none;cursor:pointer;font-size:11px;font-weight:700;text-transform:uppercase;
    letter-spacing:.04em;color:var(--ink-soft);transition:color .15s ease-out;
  }
  .wallet-logout-btn:hover{color:var(--amber-deep);}

  .sub-field-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:10px;display:block;}
  .sub-product-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px;}
  .sub-chip{
    border:1.5px solid var(--line);border-radius:4px;padding:10px 8px;text-align:center;cursor:pointer;
    font-size:12.5px;font-weight:700;background:var(--off-white);transition:border-color .2s,background .2s;line-height:1.3;
  }
  .sub-chip .price{display:block;font-size:11px;font-weight:600;color:var(--ink-soft);margin-top:3px;font-variant-numeric:tabular-nums;}
  .sub-chip.active{border-color:var(--ink);background:var(--ink);color:var(--bone);}
  .sub-chip.active .price{color:rgba(245,241,229,.75);}

  .sub-preset-row{display:flex;gap:14px;margin-bottom:12px;flex-wrap:wrap;}
  .sub-preset{
    font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--amber-deep);
    border-bottom:1.5px solid var(--amber);cursor:pointer;padding-bottom:2px;background:none;border-left:none;border-right:none;border-top:none;
  }
  .sub-day-row{display:flex;gap:6px;margin-bottom:20px;}
  .sub-day-pill{
    flex:1 1 0;max-width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);
    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;cursor:pointer;
    background:var(--off-white);transition:all .15s ease-out;
  }
  .sub-day-pill.active{background:var(--ink);border-color:var(--ink);color:var(--bone);}
  .sub-day-summary{font-size:12.5px;color:var(--ink-soft);margin:-8px 0 20px;}

  .sub-qty-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
  .sub-qty-controls{display:flex;align-items:center;gap:14px;}
  .sub-qty-btn{
    width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--off-white);
    cursor:pointer;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;color:var(--ink);
  }
  .sub-qty-btn:hover{background:var(--card-2);}
  .sub-qty-val{font-weight:800;font-size:15px;min-width:16px;text-align:center;}

  .sub-add-btn{
    width:100%;height:50px;background:var(--ink);color:var(--bone);border:none;border-radius:3px;
    font-family:var(--font-body);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;
    cursor:pointer;transition:opacity .2s ease-out;
  }
  .sub-add-btn:hover{opacity:.85;}

  /* ---- Plan list ---- */
  .plan-item{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line);}
  .plan-item:first-child{border-top:none;padding-top:0;}
  .plan-item .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
  .plan-item .info{flex:1;min-width:0;}
  .plan-item .info .n{display:block;font-weight:700;font-size:13.5px;}
  .plan-item .info .f{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:2px;}
  .plan-item .price{font-weight:800;font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums;}
  .plan-item .remove-btn{background:none;border:none;cursor:pointer;color:var(--ink-soft);padding:4px;flex-shrink:0;transition:color .2s;}
  .plan-item .remove-btn:hover{color:var(--amber-deep);}
  .plan-item .remove-btn svg{width:14px;height:14px;display:block;}
  .plan-empty{text-align:center;padding:20px 0;color:var(--ink-soft);font-size:13.5px;}
  .plan-total-row{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px;margin-top:6px;border-top:1.5px solid var(--ink);}
  .plan-total-row .lbl{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);}
  .plan-total-row .val{font-family:var(--font-body);font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums;}

  .wallet-check{margin-top:18px;padding:14px 16px;border-radius:4px;font-size:12.5px;line-height:1.5;}
  .wallet-check.ok{background:rgba(74,93,58,.12);color:#3B4A2E;}
  .wallet-check.low{background:rgba(184,111,44,.14);color:var(--amber-deep);}
  .wallet-check a{font-weight:700;text-decoration:underline;text-underline-offset:2px;}

  .sub-confirm-btn{
    width:100%;height:52px;margin-top:16px;background:var(--amber-deep);color:#fff;border:none;border-radius:3px;
    font-family:var(--font-body);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;
    cursor:pointer;transition:opacity .2s ease-out;
  }
  /* Solid muted colors, not opacity - opacity on white-on-amber washed the label out unreadably. */
  .sub-confirm-btn:disabled{background:var(--card-2);color:var(--ink-soft);cursor:not-allowed;}
  .sub-confirm-btn:not(:disabled):hover{opacity:.85;}

  /* ---- Day popover ---- */
  .popover-backdrop{position:fixed;inset:0;z-index:70;background:transparent;}
  .day-popover{
    position:fixed;z-index:80;background:var(--off-white);border:1px solid var(--line);border-radius:6px;
    padding:18px;width:250px;box-shadow:0 16px 40px rgba(3,10,48,.18);
  }
  .day-popover h5{font-family:var(--font-head);font-size:1rem;font-weight:700;margin-bottom:12px;}
  .day-popover .pop-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);}
  .day-popover .pop-item:first-of-type{border-top:none;}
  .day-popover .pop-item .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
  .day-popover .pop-item .n{flex:1;font-size:13px;font-weight:600;}
  .day-popover .pop-item .qty{font-size:12px;color:var(--ink-soft);}
  .day-popover .pop-action{
    background:none;border:none;cursor:pointer;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
    color:var(--amber-deep);padding:2px;
  }
  .day-popover .pop-action:hover{opacity:.7;}
  .day-popover .pop-item .n em{font-style:normal;color:var(--ink-soft);font-weight:500;font-size:11px;}
  .day-popover .pop-empty{font-size:12.5px;color:var(--ink-soft);padding:2px 0 4px;}

  .pop-onetime{margin-top:14px;padding-top:14px;border-top:1.5px dashed var(--line);}
  .pop-onetime-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin-bottom:10px;}
  .pop-onetime-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
  .pop-onetime-select, .pop-onetime-size{
    width:100%;height:36px;border:1px solid var(--line);border-radius:3px;padding:0 8px;
    font-family:var(--font-body);font-size:12.5px;background:var(--off-white);color:var(--ink);
  }
  .pop-onetime-select{margin-bottom:8px;}
  .pop-onetime-size{flex:1;min-width:0;}
  .pop-onetime-qty{display:flex;align-items:center;gap:8px;flex-shrink:0;}
  .pop-onetime-qty .qty-btn{
    width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:var(--off-white);
    cursor:pointer;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;color:var(--ink);
  }
  .pop-onetime-qty .qty-btn:hover{background:var(--card-2);}
  .pop-onetime-qty .qty-num{font-weight:800;font-size:13px;min-width:14px;text-align:center;}
  .pop-onetime-add{
    width:100%;height:38px;background:var(--ink);color:var(--bone);border:none;border-radius:3px;
    font-family:var(--font-body);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
    cursor:pointer;transition:opacity .2s ease-out;
  }
  .pop-onetime-add:hover{opacity:.85;}

  /* ---- Confirmation state ---- */
  .sub-confirm-box{max-width:520px;margin:64px auto;text-align:center;}
  .sub-confirm-icon{
    width:76px;height:76px;margin:0 auto 24px;border-radius:50%;background:var(--card);
    display:flex;align-items:center;justify-content:center;
  }
  .sub-confirm-icon svg{width:34px;height:34px;color:var(--amber-deep);}
  .sub-confirm-box h2{font-size:1.9rem;}
  .sub-confirm-box p{margin:14px auto 0;color:var(--ink-soft);font-size:1.02rem;}
  .sub-confirm-actions{display:flex;gap:24px;justify-content:center;margin-top:32px;flex-wrap:wrap;}

  /* ---- Wallet page ---- */
  /* Named grid areas rather than the generic .sub-layout - this page's cards
     don't split cleanly into "one column, one column" the way the calendar
     pages do, and areas let mobile freely reorder Balance/Top Up/Activity
     without touching desktop's left-column-stacked, right-column-tall shape. */
  .wallet-layout{
    display:grid;grid-template-columns:1fr 1.3fr;gap:24px;
    grid-template-areas:"balance topup" "activity topup";
  }
  .wallet-balance-card{grid-area:balance;background:var(--ink);color:var(--bone);border-radius:8px;padding:40px;text-align:center;}
  .wallet-activity-card{grid-area:activity;}
  .wallet-topup-card{grid-area:topup;}
  @media (max-width:640px){
    /* Balance first (glanceable), Top Up second (the actual reason most people
       land here), Recent Activity last - on the old stacked layout an empty
       activity card sat between the balance and the one thing there was to do. */
    .wallet-layout{grid-template-columns:1fr;grid-template-areas:"balance" "topup" "activity";gap:20px;}
    .wallet-balance-card{padding:28px;}
    .wallet-balance-card .amt{font-size:2.4rem;}
  }
  .wallet-balance-card .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:rgba(245,241,229,.7);}
  .wallet-balance-card .amt{font-family:var(--font-body);font-size:3rem;font-weight:700;margin-top:10px;font-variant-numeric:tabular-nums;}
  .topup-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:24px 0 16px;}
  .topup-chip{
    height:52px;border:1.5px solid var(--line);border-radius:4px;background:var(--off-white);
    font-weight:700;font-size:14px;cursor:pointer;transition:all .15s ease-out;color:var(--ink);
  }
  .topup-chip.active{border-color:var(--ink);background:var(--ink);color:var(--bone);}
  .topup-custom{
    width:100%;height:48px;border:1px solid var(--line);border-radius:4px;padding:0 16px;
    font-family:var(--font-body);font-size:14px;background:var(--off-white);color:var(--ink);margin-bottom:20px;
  }
  .pay-method-list{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;}
  .pay-method{
    display:flex;align-items:center;gap:14px;padding:16px;border:1.5px solid var(--line);border-radius:4px;
    cursor:pointer;transition:border-color .15s ease-out,background .15s ease-out;
  }
  .pay-method.active{border-color:var(--amber-deep);background:var(--card);}
  .pay-method input{width:16px;height:16px;accent-color:var(--amber-deep);}
  .pay-method .n{font-weight:700;font-size:13.5px;}

  .history-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-top:1px solid var(--line);}
  .history-row:first-child{border-top:none;}
  .history-row .d{display:block;font-size:13.5px;font-weight:600;}
  .history-row .t{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:2px;}
  .history-row .a{font-weight:800;font-size:14px;}
  .history-row .a.credit{color:#3B4A2E;}
  .history-empty{text-align:center;padding:28px 0;color:var(--ink-soft);font-size:13.5px;}

  /* ---- Manage subscription page ---- */
  .manage-item{display:flex;align-items:center;gap:16px;padding:18px 0;border-top:1px solid var(--line);}
  .manage-item:first-child{border-top:none;}
  .manage-item .dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;}
  .manage-item .info{flex:1;}
  .manage-item .info .n{display:block;font-weight:700;font-size:14.5px;}
  .manage-item .info .f{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:3px;}
  .manage-item .price{font-weight:800;font-size:13.5px;font-variant-numeric:tabular-nums;}
  .manage-item .pause-btn{
    background:none;border:1px solid var(--line);border-radius:3px;padding:8px 14px;font-size:11px;font-weight:700;
    text-transform:uppercase;letter-spacing:.04em;cursor:pointer;color:var(--ink-soft);transition:all .15s ease-out;
  }
  .manage-item .pause-btn:hover{border-color:var(--amber-deep);color:var(--amber-deep);}
  .manage-item-actions{display:flex;gap:8px;flex-shrink:0;}
  /* Muted look on the description only - opacity on the whole row was dimming
     Edit/Resume/Remove too, making the button you'd most want (Resume) hard to read. */
  .manage-item.is-paused .dot{opacity:.35;}
  .manage-item.is-paused .info .n{color:var(--ink-soft);}
  .manage-item.is-paused .info .f{opacity:.7;}
  .paused-tag{
    display:inline-block;margin-left:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    color:var(--amber-deep);background:rgba(184,111,44,.14);padding:2px 7px;border-radius:3px;vertical-align:middle;
  }
  .manage-edit-panel{background:var(--card);border-radius:6px;padding:20px 20px 18px;margin:-2px 0 16px;}
  .manage-edit-panel .sub-product-grid{margin-bottom:14px;}
  .manage-edit-panel .sub-day-row{margin-bottom:14px;}
  .manage-edit-panel .sub-qty-row{margin-bottom:18px;}
  .edit-warn{font-size:12px;color:var(--amber-deep);margin:-6px 0 14px;}
  .manage-edit-actions{display:flex;align-items:center;gap:18px;}
  .manage-edit-save{width:auto;height:42px;padding:0 24px;}
  .manage-edit-cancel{
    background:none;border:none;cursor:pointer;font-size:11.5px;font-weight:700;text-transform:uppercase;
    letter-spacing:.04em;color:var(--ink-soft);transition:color .15s ease-out;
  }
  .manage-edit-cancel:hover{color:var(--ink);}
  .manage-empty{text-align:center;padding:64px 24px;}
  .manage-empty p{margin:14px auto 24px;color:var(--ink-soft);max-width:44ch;}

  @media (max-width:980px){
    .sub-product-grid{grid-template-columns:1fr 1fr;}
    .topup-grid{grid-template-columns:1fr 1fr;}
    .cal-day{font-size:12px;}
    .day-popover{width:calc(100vw - 48px);max-width:280px;}
    .cal-card{position:static;}
    /* Day pills, qty +/-, and the Every Day/Weekdays/Clear presets are all
       under the 44px touch-target guideline at their desktop size - nudged up
       as far as each layout has room for without wrapping or overflowing. */
    .sub-day-pill{max-width:41px;height:41px;}
    .sub-day-row{gap:4px;}
    .sub-qty-btn{width:38px;height:38px;}
    .sub-preset{min-height:44px;display:inline-flex;align-items:center;}
    /* Label-left/value-right reads fine with room either side of it - on a
       390px card it just strands the date at the far edge with a dead gap
       between. Stack label above value instead. */
    .order-date-row{flex-direction:column;align-items:flex-start;gap:4px;margin:18px 0;}
    .order-date-val{text-align:left;}
  }

  /* ---------- STICKY BASKET (app-wide, appears once the one-time cart has items) ---------- */
  .sticky-basket{
    position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);
    box-shadow:0 -8px 24px rgba(0,0,0,.14);padding-bottom:env(safe-area-inset-bottom);
  }
  .sticky-basket-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 48px;}
  .sticky-basket-info{display:flex;align-items:baseline;gap:12px;color:var(--bone);flex-shrink:0;}
  .sticky-basket-count{font-size:13px;color:rgba(245,241,229,.7);}
  .sticky-basket-total{font-family:var(--font-body);font-size:1.2rem;font-weight:700;font-variant-numeric:tabular-nums;}

  /* Item chips fill the wide empty middle of the bar with what's actually in the
     basket, so the bar reads as a live order summary rather than a bare total. */
  .sticky-basket-items{
    display:flex;align-items:center;gap:16px;flex:1;min-width:0;overflow:hidden;
    padding-left:20px;border-left:1px solid rgba(245,241,229,.15);
  }
  .sb-item{display:flex;align-items:center;gap:7px;flex-shrink:0;color:rgba(245,241,229,.85);font-size:12.5px;white-space:nowrap;}
  .sb-item-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
  .sb-item-more{color:rgba(245,241,229,.55);font-size:12.5px;flex-shrink:0;}

  .sticky-basket-btn{
    display:inline-flex;align-items:center;gap:8px;flex-shrink:0;background:var(--amber-deep);color:#fff;
    padding:12px 22px;border-radius:100px;font-family:var(--font-body);font-size:12.5px;font-weight:700;
    text-transform:uppercase;letter-spacing:.05em;transition:opacity .2s ease-out;
  }
  .sticky-basket-btn:hover{opacity:.85;}
  .sticky-basket-btn svg{width:14px;height:14px;}
  @media (max-width:900px){
    .sticky-basket-items{display:none;}
  }
  @media (max-width:640px){
    .sticky-basket-inner{padding:14px 24px;}
  }

  /* ---------- CHECKOUT (cart line items + delivery form) ---------- */
  .cart-line{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line);}
  .cart-line:first-child{border-top:none;padding-top:0;}
  .cart-line .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
  .cart-line .info{flex:1;min-width:0;}
  .cart-line .info .n{display:block;font-weight:700;font-size:13.5px;}
  .cart-line .info .f{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:2px;}
  .cart-line .line-price{font-weight:800;font-size:13px;white-space:nowrap;flex-shrink:0;min-width:64px;text-align:right;}

  .checkout-input{
    width:100%;height:46px;border:1px solid var(--line);border-radius:4px;padding:0 14px;
    font-family:var(--font-body);font-size:14px;background:var(--off-white);color:var(--ink);
    margin-bottom:4px;transition:border-color .15s ease-out;
  }
  .checkout-input.has-error{border-color:var(--critical, #9C3B2E);}
  .checkout-field-error{display:none;font-size:11.5px;color:var(--amber-deep);margin-bottom:12px;}
  .checkout-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  @media (max-width:640px){ .checkout-field-row{grid-template-columns:1fr;} }

  /* ---------- PHONE-WIDE: repeating-card grids become horizontal swipe strips ----------
     Placed last on purpose - these selectors also have desktop and 980px-tablet
     rules earlier in the file, and an earlier position here previously lost the
     cascade to those later, higher-source-order rules despite its narrower media
     query (media-query width doesn't grant priority; only source order and
     specificity do, and these are all plain single-class selectors).
     Every one of these was a stacked or 2-col grid whose real content is "a few
     browsable, roughly-equivalent items" - a shape that reads better as a swipe
     strip than a tall column on a narrow screen. Same bleed-to-edge technique as
     the farm-strip filmstrip: negative margin cancels .wrap's padding, the strip
     gets its own matching padding back so the first/last card still aligns with
     the rest of the page, and a peek of the next card signals "more here."
     Comparison tables/cards are the deliberate exception - those need consistent
     vertical scanning to compare rows, not swiping. */
  @media (max-width:640px){
    .why-list{
      display:flex;flex-direction:row;grid-template-columns:unset;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;
      margin-left:-24px;margin-right:-24px;padding:4px 24px 8px;-webkit-overflow-scrolling:touch;
    }
    .why-row{flex:0 0 auto;width:66vw;max-width:260px;scroll-snap-align:start;}

    .product-grid{
      display:flex;grid-template-columns:unset;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;
      margin-left:-24px;margin-right:-24px;padding:4px 24px 8px;-webkit-overflow-scrolling:touch;
    }
    .product-card{flex:0 0 auto;width:72vw;max-width:280px;scroll-snap-align:start;}

    .badge-row{
      display:flex;grid-template-columns:unset;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;
      margin-left:-24px;margin-right:-24px;padding:4px 24px 8px;-webkit-overflow-scrolling:touch;
    }
    .badge{flex:0 0 auto;width:42vw;max-width:170px;scroll-snap-align:start;border-left:none;padding-left:0;}

    .heritage-grid, .values-strip{
      display:flex;grid-template-columns:unset;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;
      margin:40px -24px 0;padding:4px 24px 8px;max-width:none;-webkit-overflow-scrolling:touch;
    }
    .heritage-item{flex:0 0 auto;width:74vw;max-width:290px;scroll-snap-align:start;border-left:none;padding-left:0;}

    .gallery-grid{
      display:flex;grid-template-columns:unset;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
      margin-left:-24px;margin-right:-24px;padding:4px 24px 8px;-webkit-overflow-scrolling:touch;
    }
    .gallery-grid .g-tall{grid-row:unset;}
    .gallery-photo{flex:0 0 auto;width:58vw;max-width:230px;aspect-ratio:4/5;scroll-snap-align:start;}

    /* Steps are sequential (01-04), not interchangeable options - but swiping
       through a numbered journey one card at a time is a familiar pattern in
       its own right (onboarding flows, recipe steps), and it cuts four stacked
       paragraphs down to one row. */
    .process-steps{
      display:flex;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;
      margin-left:-24px;margin-right:-24px;padding:4px 24px 8px;-webkit-overflow-scrolling:touch;
    }
    .process-step{
      flex:0 0 auto;width:78vw;max-width:310px;scroll-snap-align:start;
      grid-template-columns:1fr;gap:10px;padding:0;border-top:none;
    }
  }

  /* Small uppercase "chapter" label - used on both Farm and Heritage's mobile
     heads so the two read as sequential chapters in one story, not two copies
     of the same card. Desktop doesn't get it; the existing panel titles there
     already carry enough weight on their own. */
  .chapter-eyebrow{
    display:none;font-family:var(--font-body);font-size:11px;font-weight:800;letter-spacing:.12em;
    text-transform:uppercase;color:var(--amber-deep);margin-bottom:10px;
  }

  /* ---------- FARM + HERITAGE, phone-native pass v2 ----------
     Placed last for the same cascade-order reason as the horizontal-scroll
     block above - these selectors have earlier desktop/980px rules elsewhere
     in the file, and this needs to win regardless of media-query width.
     First attempt made both sections photo-forward cards (text overlaid on
     the image) - same template as each other and the same "dark gradient +
     white text" look everywhere else on the web. Second pass gives the two
     sections an actual conceptual difference instead of just a fresh coat of
     paint: Farm is photo-led (read the story, then see the farm, clean and
     unobstructed - no text ever sits on top of the image); Heritage drops its
     photo entirely and becomes a dark, values-forward chapter break, closer
     in spirit to how the Quality section already earns a tonal shift further
     down the page. Photo strips stay a horizontal filmstrip either way. */
  /* Hidden everywhere by default - only the Farm mobile block below turns it on. */
  .fr-carousel{display:none;}

  @media (max-width:640px){
    .chapter-eyebrow{display:block;}

    /* Farm v3: the photo(s) become a swipeable carousel filling the whole
       card - the same horizontal-swipe interaction already working well for
       the Gau Seva/Sanrakshan/Pooja cards, applied here instead of a second,
       separate filmstrip lower on the page. The text becomes a bottom sheet
       that slides up over the carousel and can be pulled back down to a thin
       handle - the exact expand/minimize mechanic the desktop panel already
       has (same .fr-toggle, same .reveal-slide/.is-minimized classes, same
       JS - just rotated from a horizontal slide to a vertical one). */
    .farm .fr-frame{
      position:relative;display:block;height:580px;min-height:0;aspect-ratio:auto;
      border-radius:14px;overflow:hidden;background:var(--off-white);
      box-shadow:0 2px 20px rgba(3,10,48,.09);
    }
    .farm .fr-image{display:none;}
    .farm .fr-carousel{
      display:flex;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;
      overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    }
    .farm .fr-slide{flex:0 0 100%;scroll-snap-align:start;height:100%;}
    .farm .fr-slide img{width:100%;height:100%;object-fit:cover;display:block;}

    .farm .fr-panel{
      position:absolute;left:0;bottom:0;top:auto;right:auto;width:100%;height:auto;max-height:72%;
      z-index:2;border-radius:16px 16px 0 0;display:flex;flex-direction:column;
    }
    .farm .fr-panel-inner{padding:2px 24px 26px;overflow-y:auto;}
    .farm .fr-panel-inner h2{color:#fff;}
    .farm .fr-panel-inner p{color:rgba(245,241,229,.82);}
    .farm .fr-panel-inner .rule{margin:16px 0;background:rgba(245,241,229,.3);}
    .farm .fr-panel-inner .btn-line{color:var(--bone);border-bottom-color:rgba(245,241,229,.5);}

    /* Toggle becomes a drag-handle bar centered above the text, not the
       desktop's edge-mounted arrow tab - the recognizable "bottom sheet"
       affordance on every native mobile OS. */
    .farm .fr-toggle{
      position:static;order:-1;align-self:center;flex-shrink:0;transform:none;
      width:100%;height:44px;background:none;border:none;border-radius:0;
      display:flex;align-items:center;justify-content:center;
    }
    .farm .fr-toggle svg{display:none;}
    .farm .fr-toggle::before{content:"";width:44px;height:5px;border-radius:3px;background:rgba(245,241,229,.65);}

    /* One consistent transition speed for both the entrance and every later
       toggle (desktop's slow-entrance-then-fast-toggle split depends on a
       transitionend handoff that isn't worth reproducing here - a single
       speed reads fine for a vertical sheet and removes that dependency). */
    /* !important throughout this block: an older, broader mobile rule
       (.fr-panel{transform:none !important}, ~line 472) targets every
       .fr-panel at this width for the desktop-style chapter pages, and
       silently wins over a plain declaration regardless of specificity.
       These have to out-rank it directly to actually animate. */
    .farm .fr-panel{transform:translateY(0) !important;}
    @media (prefers-reduced-motion:no-preference){
      .farm .fr-panel.reveal-slide{transform:translateY(100%) !important;transition:transform .6s cubic-bezier(.16,1,.3,1);}
      .farm .fr-panel.reveal-slide.is-visible{transform:translateY(0) !important;}
    }
    .farm .fr-panel.reveal-slide.is-minimized{transform:translateY(calc(100% - 44px)) !important;}

    /* Heritage: no photo, no panel - a dark values chapter instead. */
    .heritage{background:var(--ink);}
    .heritage-mobile-head{display:block;text-align:left;margin-bottom:32px;}
    .heritage-mobile-head h2{font-size:clamp(1.7rem,6vw,2.1rem);color:#fff;}
    .heritage-mobile-head p{margin-top:12px;font-size:.98rem;line-height:1.6;color:rgba(245,241,229,.75);}
    .heritage-mobile-head .btn-line{
      margin-top:18px;color:var(--bone);border-bottom-color:rgba(245,241,229,.5);
    }
    .heritage .fr-frame, .heritage .farm-strip{display:none;}
    .heritage-grid .t{color:#fff;}
    .heritage-grid .d{color:rgba(245,241,229,.7);}
    .heritage-quote{color:#fff;border-bottom-color:rgba(245,241,229,.25);}

    /* The old separate filmstrip is gone on mobile - its three photos moved
       into the carousel above instead of living twice on the page. */
    .farm .farm-strip{display:none;}

    /* Swipe dots: sit in the sliver of photo the panel leaves uncovered, so
       they read regardless of expanded/minimized state. JS-generated (one
       set per .fr-carousel), see site.js. */
    .fr-dots{
      position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:3;
      display:flex;gap:6px;padding:6px 9px;border-radius:100px;
      background:rgba(20,24,18,.35);backdrop-filter:blur(3px);
    }
    .fr-dot{
      width:6px;height:6px;padding:0;border:none;border-radius:50%;
      background:rgba(255,255,255,.45);transition:background .25s,transform .25s;
    }
    .fr-dot.is-active{background:#fff;transform:scale(1.35);}
  }

  /* Purchase-type toggle, phone-native pass: the desktop version (two
     underlined text labels) is a precise, obviously-clickable mouse target,
     but on a touch screen it reads as two nav links, not a switch that
     re-prices all four cards at once - and at ~33px tall it's under the
     44px minimum besides. Matches the .cap-buy .buy-btn precedent (~980px
     block) of trading a thin underline for a filled, unmistakably tappable
     shape. Kept at the very end of the file, same as the rest of this
     project's mobile overrides, so it reliably outranks the desktop rule
     regardless of source order elsewhere. */
  @media (max-width:980px){
    .purchase-toggle{
      display:flex;gap:4px;margin:0 auto 36px;max-width:420px;
      background:var(--card);border-radius:100px;padding:4px;
    }
    .pt-option{
      flex:1;min-height:44px;padding:0 10px;border-radius:100px;
      border-bottom:none;font-size:11px;
      transition:background .2s ease-out,color .2s ease-out;
    }
    .pt-option:hover{color:var(--ink-soft);}
    .pt-option.is-active{background:var(--ink);color:#fff;}
    .pt-option.is-active:hover{color:#fff;}
  }

  /* ---------- WP5: accessibility, newsletter, legal pages ----------
     Kept at the very end of the file (see the note above the purchase-toggle
     block) so these reliably win the cascade regardless of source order
     elsewhere. */

  /* Screen-reader-only utility (visually hidden, still in the a11y tree). */
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }

  /* Global focus-visible ring. --amber-deep only hits ~2.3:1 against --ink,
     below the 3:1 non-text-contrast minimum, so dark-ground sections
     (Quality, the mobile drawer, the hero video) override to --amber-tint
     below instead of reusing this default. */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
  select:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible{
    outline:2px solid var(--amber-deep); outline-offset:2px; border-radius:2px;
  }
  .quality a:focus-visible, .quality button:focus-visible, .quality [tabindex]:focus-visible,
  .mobile-drawer a:focus-visible, .mobile-drawer button:focus-visible,
  .hero a:focus-visible, .hero button:focus-visible{
    outline-color:var(--amber-tint);
  }
  @media (max-width:980px){
    .heritage a:focus-visible, .heritage button:focus-visible, .heritage [tabindex]:focus-visible{
      outline-color:var(--amber-tint);
    }
  }

  /* Footer newsletter signup — lives inside .footer-brand, so it inherits
     that column's width/alignment rather than needing its own grid track. */
  .footer-newsletter{margin-top:28px;}
  .footer-newsletter .h{
    font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
    color:var(--ink-soft);margin-bottom:6px;
  }
  .footer-newsletter-tag{font-size:13px;color:var(--ink-soft);margin-bottom:12px;}
  .newsletter-form{display:flex;gap:8px;max-width:340px;}
  .newsletter-input{
    flex:1;min-width:0;height:44px;border:1px solid var(--line);border-radius:100px;
    padding:0 16px;font-family:var(--font-body);font-size:13px;
    background:var(--off-white);color:var(--ink);transition:border-color .15s ease-out;
  }
  .newsletter-input.has-error{border-color:var(--critical, #9C3B2E);}
  .newsletter-submit{
    flex-shrink:0;height:44px;padding:0 20px;border-radius:100px;background:var(--amber-deep);
    color:#fff;font-family:var(--font-body);font-size:12px;font-weight:700;
    text-transform:uppercase;letter-spacing:.04em;transition:opacity .2s ease-out;cursor:pointer;
  }
  .newsletter-submit:hover{opacity:.85;}
  .newsletter-submit:disabled{opacity:.5;cursor:default;}
  .newsletter-status{font-size:12.5px;margin-top:8px;min-height:1em;}
  .newsletter-status.is-error{color:var(--critical, #9C3B2E);}
  .newsletter-status.is-ok{color:var(--amber-deep);}
  @media (max-width:640px){
    .footer-newsletter{margin-top:24px;display:flex;flex-direction:column;align-items:center;}
    .newsletter-form{max-width:360px;width:100%;}
  }

  /* Legal pages (privacy / terms / refund-policy) — simple prose, no new
     layout system, reusing the palette + type scale everywhere else uses. */
  .legal-content{max-width:760px;margin:0 auto;padding:64px 24px 96px;}
  .legal-content h1{
    font-family:var(--font-head);font-weight:700;font-size:clamp(1.9rem,4vw,2.6rem);
    color:var(--ink);margin-bottom:8px;
  }
  .legal-content .legal-meta{font-size:13px;color:var(--ink-soft);margin-bottom:8px;}
  .legal-content .legal-notice{
    font-size:14px;color:var(--ink-soft);background:var(--card);border:1px solid var(--line);
    border-radius:6px;padding:14px 18px;margin:16px 0 40px;line-height:1.6;
  }
  .legal-content h2{
    font-family:var(--font-head);font-weight:700;font-size:1.25rem;color:var(--ink);
    margin:36px 0 12px;
  }
  .legal-content p{font-size:.98rem;line-height:1.75;color:var(--ink-soft);margin-bottom:14px;}
  .legal-content ul{padding-left:22px;margin-bottom:14px;}
  .legal-content li{font-size:.98rem;line-height:1.75;color:var(--ink-soft);margin-bottom:4px;}
  .legal-content a{color:var(--amber-deep);text-decoration:underline;text-underline-offset:2px;}
  .legal-content strong{color:var(--ink);}
  .legal-placeholder{
    background:rgba(184,111,44,.14);color:var(--amber-deep);font-weight:700;
    padding:1px 6px;border-radius:4px;
  }

  /* 404 + loading full-page states. */
  .state-page{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:var(--bone);padding:24px;
  }
  .state-page-inner{max-width:480px;text-align:center;}
  .state-page-eyebrow{
    font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--amber-deep);margin-bottom:14px;
  }
  .state-page-heading{
    font-family:var(--font-head);font-weight:700;font-style:italic;
    font-size:clamp(1.6rem,4vw,2.2rem);color:var(--ink);line-height:1.35;margin-bottom:28px;
  }
  .state-page .btn-line{margin:0 auto;}
  .state-page-loading .state-page-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
  }
  .state-page-loading .state-page-eyebrow::before{
    content:'';width:7px;height:7px;border-radius:50%;background:var(--amber);
    animation:state-pulse 1.1s ease-in-out infinite;
  }
  @media (prefers-reduced-motion:reduce){
    .state-page-loading .state-page-eyebrow::before{animation:none;}
  }
  @keyframes state-pulse{
    0%,100%{opacity:.35;transform:scale(.85);}
    50%{opacity:1;transform:scale(1.1);}
  }

  /* ---- Interactive calendar (CALENDAR-PLAN.md): the day popover already had
     a full design from an earlier revision (.day-popover/.pop-item/.pop-onetime-*
     above) - it just needed two extra sections' worth of room, a scroll
     ceiling now that it holds recurring + one-off + skip actions instead of
     one add row, and a close button. Everything below is new. ---- */
  .day-popover{width:300px;max-height:calc(100vh - 40px);overflow-y:auto;}
  @media (max-width:640px){
    .day-popover{width:calc(100vw - 32px);max-width:320px;max-height:calc(100vh - 32px);}
  }
  .day-popover-close{
    position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;
    background:none;border:none;font-size:18px;line-height:1;color:var(--ink-soft);cursor:pointer;
  }
  .day-popover-close:hover{background:var(--card);color:var(--ink);}
  .day-popover h5{padding-right:28px;}
  .pop-inline-error{display:none;font-size:11.5px;color:var(--amber-deep);margin-top:8px;}
  .pop-onetime-note{font-size:11.5px;color:var(--ink-soft);line-height:1.5;margin:10px 0;}

  /* Calendar "+N" overflow badge - a 5th+ distinct product on a busy day gets
     folded into a count instead of an ever-widening dot row. */
  .cal-dot-more{
    font-size:9px;font-weight:800;color:var(--ink-soft);line-height:1;align-self:center;
  }

  /* Hover preview: one shared floating element (subscription-app.js appends it
     once, positions it per-cell) rather than a title attribute, so it can be
     styled to match the rest of the app instead of the browser's native tooltip. */
  .cal-tooltip{
    position:fixed;z-index:85;transform:translate(-50%,-100%);
    background:var(--ink);color:var(--bone);border-radius:5px;padding:8px 12px;
    font-family:var(--font-body);font-size:11.5px;line-height:1.6;white-space:nowrap;
    pointer-events:none;opacity:0;transition:opacity .12s ease-out;box-shadow:0 8px 20px rgba(3,10,48,.22);
  }
  .cal-tooltip.is-visible{opacity:1;}
  .cal-tooltip-row em{font-style:normal;opacity:.7;}
  @media (max-width:980px){
    /* Hover has no meaning on touch - the tooltip would only ever show via a
       stray mouseenter-emulation tap right before the click that opens the
       popover anyway, so suppress it below the breakpoint the rest of the
       calendar already treats as "touch". */
    .cal-tooltip{display:none;}
  }

  /* ---- /account profile page ---- */
  .account-layout{display:flex;flex-direction:column;gap:24px;max-width:640px;margin:0 auto;}
  .acct-save-status{font-size:12.5px;margin-top:10px;min-height:1em;}
  .acct-save-status.ok{color:#3B4A2E;}
  .acct-save-status.error{color:var(--amber-deep);}

  /* ---- Structured address fields (buy-once / subscribe / account / manage) ----
     New field types this pass introduces (multi-line note, boolean toggle) -
     appended here rather than inline with .checkout-input above so the
     signed-off cascade above this point is never touched. */
  .checkout-textarea{height:auto;min-height:64px;padding:12px 14px;resize:vertical;font-family:var(--font-body);}
  .checkout-checkbox-row{
    display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-soft);
    margin:14px 0 4px;cursor:pointer;
  }
  .checkout-checkbox-row input[type="checkbox"]{width:16px;height:16px;flex-shrink:0;accent-color:var(--amber, #B86F2C);}
  /* Manage-subscription edit panel: pincode/area are create-only (see
     lib/subscriptions PATCH route) - this caption is the only explanation a
     customer gets for why those two fields aren't here to edit. */
  .edit-area-fixed-note{font-size:11.5px;color:var(--ink-faint);margin:2px 0 14px;}

  /* ---- FR-LEGAL: DPDP consent (newsletter checkbox, checkout/subscribe
     notice, product-info modal) — all appended here, no existing rule
     touched, so the signed-off cascade above is unaffected. ---- */
  .newsletter-consent-row{
    display:flex;align-items:flex-start;gap:7px;font-size:11px;line-height:1.5;
    color:var(--ink-soft);margin-top:8px;max-width:340px;cursor:pointer;
  }
  .newsletter-consent-row input[type="checkbox"]{
    width:14px;height:14px;flex-shrink:0;margin-top:1px;accent-color:var(--amber,#B86F2C);
  }
  .newsletter-consent-row a{color:var(--amber-deep,#8A4E1A);text-decoration:underline;}

  .checkout-consent-notice{
    font-size:11.5px;line-height:1.5;color:var(--ink-soft);margin:10px 0 0;
  }
  .checkout-consent-notice a{color:var(--amber-deep,#8A4E1A);text-decoration:underline;}

  .checkout-price-breakdown{
    margin:14px 0;padding:12px 14px;background:rgba(184,111,44,.06);
    border:1px solid rgba(184,111,44,.18);border-radius:6px;font-size:13px;
  }
  .checkout-price-breakdown .cpb-row{display:flex;justify-content:space-between;padding:3px 0;color:var(--ink-soft);}
  .checkout-price-breakdown .cpb-row.cpb-total{
    font-weight:700;color:var(--ink);border-top:1px solid rgba(184,111,44,.25);margin-top:4px;padding-top:8px;
  }

  .name-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .product-info-btn{
    display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
    border-radius:50%;border:1px solid var(--line);background:var(--off-white);color:var(--ink-soft);
    cursor:pointer;flex-shrink:0;font-size:13px;line-height:1;
  }
  .product-info-btn:hover{border-color:var(--amber,#B86F2C);color:var(--amber-deep,#8A4E1A);}
  .product-info-modal-backdrop{
    position:fixed;inset:0;background:rgba(3,10,48,.45);z-index:200;
    display:none;align-items:center;justify-content:center;padding:20px;
  }
  .product-info-modal-backdrop.is-open{display:flex;}
  .product-info-modal{
    background:var(--off-white);border-radius:10px;padding:26px 28px;max-width:420px;width:100%;
    max-height:80vh;overflow-y:auto;position:relative;
  }
  .product-info-modal h4{margin:0 0 14px;font-size:1.15rem;}
  .product-info-modal dl{margin:0;}
  .product-info-modal dt{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint,#a49c8e);margin-top:12px;}
  .product-info-modal dt:first-child{margin-top:0;}
  .product-info-modal dd{margin:2px 0 0;font-size:14px;color:var(--ink);}
  .product-info-modal-close{
    position:absolute;top:14px;right:14px;background:none;border:none;cursor:pointer;
    color:var(--ink-soft);width:28px;height:28px;
  }
  @media (max-width:480px){
    .product-info-modal{padding:22px 20px;}
  }

  /* ---- FR-MOBILE: fixes for real defects found at 360px, within the
     signed-off mobile design - every rule below overrides an existing
     selector purely by source order (same or higher specificity), so the
     original signed-off declarations above are never edited in place. ---- */

  /* H1: .cart-line's own qty-stepper (the /buy-once order-summary sidebar)
     is narrower than the product-grid cards .qty-stepper was designed for -
     the shared 44px mobile buttons had no room here and blew the calendar/
     sidebar grid past the 360px viewport. Sized to match the site's own
     other narrow-context steppers (.sub-qty-btn, 38px) instead. */
  @media (max-width:980px){
    .cart-line .qty-stepper{padding:4px 6px;gap:8px;}
    .cart-line .qty-stepper button{width:38px;height:38px;font-size:15px;touch-action:manipulation;}
  }

  /* M1: DPDP consent checkboxes (hand-to-guard, newsletter) had a real
     tappable area under 20px tall - the label already covers the whole row
     (tapping text works), it just needed more room to tap into. Visual
     checkbox size unchanged. */
  .checkout-checkbox-row{min-height:44px;padding:6px 0;margin:6px 0 4px;align-items:flex-start;}
  .checkout-checkbox-row input[type="checkbox"]{margin-top:3px;}
  .newsletter-consent-row{min-height:44px;padding:6px 0;align-items:flex-start;}
  .newsletter-consent-row input[type="checkbox"]{margin-top:3px;}

  /* H3: Legal Metrology modal close button - was 28x28, under the 44px
     target every other primary control on the site gets. Icon itself stays
     visually the same size (set on the inner <svg>, not this box). */
  .product-info-modal-close{width:44px;height:44px;top:6px;right:6px;}

  /* L1: wallet one-off popover's qty stepper - was 24x24, the one stepper
     on the site that never got the touch-target pass the others did.
     Matches the same 38px size used above for .cart-line's stepper (same
     narrow-popover context, same constraint). */
  .pop-onetime-qty .qty-btn{width:38px;height:38px;}

  /* M5: .chapter-eyebrow (Farm/Heritage mobile chapter label) used
     --amber-deep against Heritage's dark mobile panel - 2.27:1, needs
     4.5:1. --amber-tint is the token already established for amber-on-dark
     elsewhere (.mobile-drawer a:hover, .quality .btn-line); this element
     was just missed when that pass ran. */
  .chapter-eyebrow{color:var(--amber-tint);}

/* FR-FLOW §D: the pincode field's inline error doubles as a retry affordance
   when a serviceability check fails on a network error (not a real
   unserviceable answer) - buy-once-page.js/subscribe-page.js toggle this
   class on, cursor is the only visual cue needed since the text itself says
   "tap to retry". */
.checkout-field-error.is-retry{cursor:pointer;text-decoration:underline;}

/* ---------- FR-MOTION ---------- */

/* One shared pressed/:active treatment, reused everywhere a control had a
   :hover but nothing for the moment of contact - critical on mobile, where
   :hover never fires and a tap otherwise gave zero visual response until
   whatever happens next (if anything) resolves. Deliberately one plain
   scale+darken reused unchanged across all of these rather than a bespoke
   feel per control - .sub-confirm-btn (Pay/Confirm) already has its own
   in-flight "Placing order..."/"Saving..." busy-label for the high-stakes
   feedback; this only needs to confirm the tap itself registered.
   transition-property/duration/timing-function (not the `transition`
   shorthand) so this only ever redefines timing for the properties each
   control already animates on hover/state-change - it can't silently drop
   an existing hover transition the way overwriting the whole shorthand
   would. .btn-line/.hero-btn-primary already had their own :active
   (scale(.97)) from WP1 - left untouched, this doesn't duplicate them. */
.cal-day.clickable,
.sub-confirm-btn:not(:disabled),
.qty-stepper button,
.sub-day-pill,
.sub-preset,
.sub-qty-btn,
.manage-item .pause-btn,
.day-popover .pop-action,
.topup-chip,
.pay-method{
  transition-property:background,border-color,color,opacity,transform;
  transition-duration:.1s;
  transition-timing-function:ease-out;
}
.cal-day.clickable:active,
.sub-confirm-btn:not(:disabled):active,
.qty-stepper button:active,
.sub-day-pill:active,
.sub-preset:active,
.sub-qty-btn:active,
.manage-item .pause-btn:active,
.day-popover .pop-action:active,
.topup-chip:active,
.pay-method:active{
  transform:scale(.97);
  filter:brightness(.96);
}

/* Sticky basket bar: was a hard style.display none/block toggle with zero
   transition - the single most-repeated commerce action on the site (Add to
   Cart) had no animated confirmation anywhere in its chain. site.js now
   flips `display` the same as before (still needed so it's out of the way
   entirely when empty, not just invisible) but adds/removes this class on
   top for the actual slide+fade. No reduced-motion gate, same reasoning as
   the mobile drawer's slide (site.css ~130): this is direct feedback that a
   deliberate action worked, not ambient motion. */
.sticky-basket{
  transform:translateY(100%);opacity:0;pointer-events:none;
  transition:transform .2s ease-out,opacity .2s ease-out;
}
.sticky-basket.is-visible{transform:translateY(0);opacity:1;pointer-events:auto;}

/* Day-popover: was a hard style.display none/block toggle, the one overlay
   on the site with zero entrance/exit animation (mobile drawer and the
   account dropdown both have one for the same "overlay open" interaction).
   Same translateY(-6px)+opacity language as .account-dropdown (site.css
   ~102) for a consistent motion vocabulary, just faster since this one
   opens anchored right where the visitor just tapped. subscription-app.js
   toggles .is-visible; see DayPopover.open/close there. */
.day-popover{
  opacity:0;transform:translateY(-6px);
  transition:opacity .15s ease-out,transform .15s ease-out;
}
.day-popover.is-visible{opacity:1;transform:translateY(0);}

/* Legal Metrology modal: same "zero entrance/exit animation" gap as the day
   popover above, plus aria-modal="true" was never backed by a real
   body-scroll lock (product-info-modal.js now adds one, matching the mobile
   drawer's existing document.body.style.overflow pattern). Fade+scale here
   rather than day-popover's translateY, since this is a centered modal, not
   an anchored popover - matches the account-dropdown/mobile-drawer split
   already established (a directional entrance for anchored/edge-mounted
   UI, a plain fade for centered overlays). */
.product-info-modal-backdrop{opacity:0;transition:opacity .18s ease-out;}
.product-info-modal-backdrop.is-visible{opacity:1;}
.product-info-modal{transform:scale(.97);transition:transform .18s ease-out;}
.product-info-modal-backdrop.is-visible .product-info-modal{transform:scale(1);}

/* Targeted (hover:hover) guard (FR-MOTION review, Q2: targeted, not
   sitewide - only these two rules actually add a visible effect on
   :hover from inside a touch-primary max-width:980px block; every other
   :hover in this file either lives outside that range or - like
   .why-row:hover{background:none} just above - already neutralizes itself
   at this width, so wrapping it would be a no-op). Cancels the "still
   looks tapped" stuck-hover look a touch device otherwise leaves behind
   until the next tap elsewhere; a real :hover-capable input (mouse, trackpad)
   at this width keeps the effect unchanged, since (hover:none) never
   matches it. The new :active states above are what actually give touch
   its press feedback now. */
@media (max-width:980px) and (hover:none){
  .cap-buy .buy-btn:hover{opacity:1;}
  .pt-option:hover{color:var(--ink-soft);}
}

/* FR-CONTENT #7: known store location, footer "Get in Touch" - .footer-contact
   is already a flex column with a 14px gap, so no margin needed here, same
   sizing/colour as .footer-newsletter-tag's muted caption treatment. */
.footer-address{font-size:13px;color:var(--ink-soft);margin:0;}

/* FR-CONTENT #1: the wallet page's transaction-history retry state - same
   cursor/underline affordance as .checkout-field-error.is-retry above. The
   sidebar wallet-card's retry state (subscription-app.js's walletCardHTML)
   needs no new rule - it reuses .wallet-locked/.sub-add-btn as-is. */
.history-empty.is-retry{cursor:pointer;text-decoration:underline;}

/* Hero title: forced 2-line break on desktop; natural wrap on mobile. */
@media (max-width:640px){ .hero-br{ display:none; } }

/* ==========================================================================
   PRODUCT PAGE (src/app/products/[slug], WP-PRODUCT) — first individual
   product page, built as the template milk/paneer/butter will reuse. All
   `pp-` prefixed, append-only per this file's own convention (no existing
   rule above touched). Reuses .wrap/.reveal/.btn-line/.section-head/
   .badge-row/.badge/.quality-icon/.faq-item/.faq-list/.faq-a/.legal-placeholder
   as-is rather than duplicating them. Money uses tabular-nums throughout,
   same as .price-subscribe .was elsewhere in this file. */

.pp-breadcrumb{padding:20px 0;font-size:13px;color:var(--ink-soft);}
.pp-breadcrumb a{color:var(--amber-deep);text-decoration:underline;text-underline-offset:2px;}
.pp-breadcrumb span[aria-hidden]{margin:0 8px;}

.pp-buy-section{padding:8px 0 64px;}
.pp-buy-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;}

/* ---------- Gallery ---------- */
.pp-gallery{position:sticky;top:24px;}
.pp-gallery-main{
  aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--card);
}
.pp-gallery-main img{width:100%;height:100%;object-fit:cover;}
.pp-gallery-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:2px;}
.pp-gallery-thumb{
  flex:0 0 auto;width:72px;height:72px;border-radius:8px;overflow:hidden;
  border:2px solid transparent;background:var(--card);cursor:pointer;padding:0;
  transition:border-color .15s ease-out;
}
.pp-gallery-thumb.active{border-color:var(--amber);}
.pp-gallery-thumb img{width:100%;height:100%;object-fit:cover;}
.pp-gallery-placeholder{
  display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px dashed var(--line);cursor:default;
}
.pp-gallery-placeholder span{font-size:9px;line-height:1.3;color:var(--amber-deep);padding:4px;font-weight:700;}

/* ---------- Buy panel ---------- */
.pp-buy-panel h1{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-bottom:12px;}
.pp-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.pp-badge{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--amber-deep);background:rgba(184,111,44,.1);border-radius:20px;padding:5px 12px;
}
.pp-desc{font-size:1.05rem;line-height:1.6;color:var(--ink-soft);margin-bottom:24px;}

.pp-variant-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;}
.pp-variant{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  min-height:44px;padding:10px 16px;border-radius:8px;border:1.5px solid var(--line);
  background:var(--off-white);font-family:var(--font-body);font-weight:700;font-size:.92rem;
  color:var(--ink);cursor:pointer;transition:border-color .15s ease-out,background .15s ease-out;
}
.pp-variant:hover{border-color:var(--amber-tint);}
.pp-variant.active{border-color:var(--amber);background:rgba(184,111,44,.08);}
.pp-variant-price{font-size:.82rem;font-weight:500;color:var(--ink-soft);font-variant-numeric:tabular-nums;}

.pp-qty-row{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.pp-qty-label{font-size:.9rem;color:var(--ink-soft);}
.pp-qty-stepper{display:flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:8px;overflow:hidden;}
.pp-qty-btn{
  width:40px;height:40px;border:none;background:var(--off-white);font-size:1.1rem;
  color:var(--ink);cursor:pointer;transition:background .15s ease-out;
}
.pp-qty-btn:hover{background:var(--card);}
.pp-qty-val{min-width:36px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;}

.pp-price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:24px;}
.pp-price{font-family:var(--font-head);font-weight:700;font-size:1.8rem;font-variant-numeric:tabular-nums;}
.pp-price-note{font-size:.82rem;color:var(--ink-soft);}

.pp-cta-card{
  border:1.5px solid var(--line);border-radius:12px;padding:20px;margin-bottom:14px;
}
.pp-cta-card-primary{border-color:var(--amber);background:rgba(184,111,44,.05);}
.pp-cta-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.pp-cta-title{font-family:var(--font-head);font-weight:700;font-size:1.1rem;}
.pp-cta-tag{
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--amber-deep);border-radius:20px;padding:3px 10px;
}
.pp-cta-benefits{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:6px;}
.pp-cta-benefits li{
  font-size:.9rem;color:var(--ink-soft);padding-left:20px;position:relative;
}
.pp-cta-benefits li::before{
  content:'';position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;
  background:var(--amber);
}
.pp-cta-sub{font-size:.9rem;color:var(--ink-soft);margin-bottom:16px;}
.pp-cta-btn{
  display:block;width:100%;min-height:48px;border:none;border-radius:8px;
  font-family:var(--font-body);font-weight:700;font-size:.95rem;letter-spacing:.02em;
  cursor:pointer;transition:opacity .15s ease-out,transform .1s ease-out;
}
.pp-cta-btn:active{transform:scale(.98);}
.pp-cta-btn-primary{background:var(--amber-deep);color:#fff;}
.pp-cta-btn-primary:hover{opacity:.9;}
.pp-cta-btn-secondary{background:none;border:1.5px solid var(--ink);color:var(--ink);}
.pp-cta-btn-secondary:hover{background:var(--ink);color:#fff;}

.pp-service-row{margin:20px 0;}
.pp-service-label{display:block;font-size:.85rem;font-weight:700;color:var(--ink);margin-bottom:8px;}
.pp-service-input-row{display:flex;gap:10px;}
.pp-service-input{
  flex:1;min-height:44px;padding:0 14px;border:1.5px solid var(--line);border-radius:8px;
  font-family:var(--font-body);font-size:.95rem;background:var(--off-white);color:var(--ink);
}
.pp-service-input:focus{outline:none;border-color:var(--amber);}
.pp-service-msg{margin-top:8px;font-size:.85rem;min-height:1.2em;}
.pp-service-msg.is-ok{color:#3D6B3D;}
.pp-service-msg.is-error{color:var(--amber-deep);}
.pp-service-msg.is-retry{cursor:pointer;text-decoration:underline;}
.pp-cutoff-note{margin-top:4px;font-size:.8rem;color:var(--ink-soft);}

.pp-trust-row{
  display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--ink-soft);
  padding-top:16px;border-top:1px solid var(--line);
}

/* ---------- Why It's Different ---------- */
.pp-why{background:var(--bone);padding:64px 0;}
.pp-why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px;}
.pp-why-item{text-align:center;}
.pp-why-icon{width:auto;height:56px;object-fit:contain;margin:0 auto 14px;}
.pp-why-item .t{font-family:var(--font-head);font-weight:700;font-size:1rem;margin-bottom:6px;}
.pp-why-item .d{font-size:.88rem;line-height:1.55;color:var(--ink-soft);}

/* ---------- The Story ---------- */
.pp-story{padding:64px 0;}
.pp-story-wrap{max-width:720px;margin:0 auto;text-align:center;}
.pp-story-motif{width:180px;height:auto;color:var(--amber);margin:0 auto 28px;}
.pp-story-body p{max-width:none;font-size:1.02rem;line-height:1.75;color:var(--ink-soft);margin-bottom:16px;text-align:left;}
.pp-story-note{font-size:.92rem;}

/* ---------- How It's Made ---------- */
.pp-how-made{background:var(--bone);padding:64px 0;}
.pp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.pp-step{text-align:center;padding:24px 16px;background:var(--off-white);border-radius:12px;border:1px solid var(--line);}
.pp-step-icon{width:44px;height:44px;color:var(--amber-deep);margin:0 auto 12px;}
.pp-step-num{font-family:var(--font-head);font-weight:700;font-size:.78rem;color:var(--amber);letter-spacing:.08em;margin-bottom:6px;}
.pp-step-t{font-family:var(--font-head);font-weight:700;font-size:1rem;margin-bottom:8px;}
.pp-step-d{font-size:.85rem;line-height:1.55;color:var(--ink-soft);}

/* ---------- Tested & Pure ---------- */
.pp-quality{padding:64px 0;}

/* ---------- Nutrition & Label (Legal Metrology) ---------- */
.pp-legal{background:var(--bone);padding:64px 0;}
.pp-legal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;}
.pp-legal-card{background:var(--off-white);border:1px solid var(--line);border-radius:12px;padding:24px;}
.pp-legal-card h3{font-family:var(--font-head);font-weight:700;font-size:1rem;margin-bottom:14px;}
.pp-nutrition-table{width:100%;border-collapse:collapse;font-size:.88rem;}
.pp-nutrition-table td{padding:7px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);}
.pp-nutrition-table td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);}
.pp-legal-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:.85rem;}
.pp-legal-dl dt{color:var(--ink-soft);font-weight:700;}
.pp-legal-dl dd{color:var(--ink);}

/* ---------- How to Use ---------- */
.pp-usage{padding:64px 0;}
.pp-usage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px;}
.pp-usage-item{text-align:center;}
.pp-usage-icon{width:48px;height:48px;color:var(--amber-deep);margin:0 auto 14px;}
.pp-usage-icon-img{width:auto;height:48px;object-fit:contain;}
.pp-usage-item .t{font-family:var(--font-head);font-weight:700;font-size:.98rem;margin-bottom:6px;}
.pp-usage-item .d{font-size:.86rem;line-height:1.55;color:var(--ink-soft);}

/* ---------- Reviews ---------- */
.pp-reviews{background:var(--bone);padding:64px 0;}
.pp-reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
.pp-review-card{background:var(--off-white);border:1px solid var(--line);border-radius:12px;padding:24px;}
.pp-review-body{font-size:.94rem;line-height:1.65;color:var(--ink-soft);font-style:italic;margin-bottom:14px;}
.pp-review-by{font-size:.82rem;font-weight:700;color:var(--ink);}

/* ---------- FAQ section wrapper (content reuses .faq-list/.faq-item as-is) ---------- */
.pp-faq{padding:64px 0;}

/* ---------- Complete Your Kitchen (cross-sell) ---------- */
.pp-crosssell{background:var(--bone);padding:64px 0 96px;}
.pp-crosssell-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.pp-crosssell-card{display:block;border-radius:12px;overflow:hidden;background:var(--off-white);border:1px solid var(--line);transition:transform .15s ease-out;}
.pp-crosssell-card:hover{transform:translateY(-3px);}
.pp-crosssell-media{aspect-ratio:4/3;background:var(--card);}
.pp-crosssell-media img{width:100%;height:100%;object-fit:cover;}
.pp-crosssell-media.empty{display:flex;align-items:center;justify-content:center;}
.pp-crosssell-media.empty span{font-size:.8rem;color:var(--ink-soft);}
.pp-crosssell-name{padding:14px 16px;font-family:var(--font-head);font-weight:700;font-size:.95rem;text-align:center;}

/* ---------- Mobile sticky bar ---------- */
.pp-sticky-bar{display:none;}

@media (max-width:980px){
  .pp-buy-grid{grid-template-columns:minmax(0,1fr);gap:32px;}
  .pp-gallery{position:static;}
  .pp-steps{grid-template-columns:repeat(2,1fr);}
  .pp-legal-grid{grid-template-columns:1fr;}
  .pp-crosssell-grid{grid-template-columns:repeat(3,1fr);gap:14px;}
}

@media (max-width:640px){
  .pp-buy-section{padding:0 0 40px;}
  .pp-gallery-main{aspect-ratio:4/3;}
  .pp-steps{grid-template-columns:1fr;}
  .pp-why-grid,.pp-usage-grid{grid-template-columns:repeat(2,1fr);}
  .pp-crosssell-grid{grid-template-columns:repeat(3,1fr);gap:10px;}
  .pp-crosssell-name{padding:10px 8px;font-size:.82rem;}

  /* Room at the bottom of the page so the fixed sticky bar never covers
     the footer's own content/links (same spirit as buy-control's
     scroll-margin-bottom elsewhere in this file). */
  .pp-main{padding-bottom:76px;}

  .pp-sticky-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    align-items:center;justify-content:space-between;gap:12px;
    padding:12px 16px;background:var(--off-white);border-top:1px solid var(--line);
    box-shadow:0 -4px 16px rgba(3,10,48,.08);
    transform:translateY(100%);transition:transform .2s ease-out;
  }
  .pp-sticky-bar.is-visible{transform:translateY(0);}
  .pp-sticky-price{font-family:var(--font-head);font-weight:700;font-size:1.15rem;font-variant-numeric:tabular-nums;}
  .pp-sticky-cta{
    flex:1;max-width:220px;min-height:44px;border:none;border-radius:8px;
    background:var(--amber-deep);color:#fff;font-family:var(--font-body);font-weight:700;
    font-size:.9rem;cursor:pointer;
  }
}

@media (prefers-reduced-motion:reduce){
  .pp-sticky-bar{transition:none;}
  .pp-crosssell-card{transition:none;}
}

/* ==========================================================================
   PRODUCT PAGE — milk/ghee/butter/paneer additions (WP-PRODUCT round 2).
   Append-only, same `pp-` prefix and token usage as the block above. */

/* Placeholder inline-SVG "Why Choose Us" icons — sized/positioned to match
   .pp-why-icon (the real PNG icons) exactly, so a grid mixing both (see
   milk.ts) reads as one consistent set, not two different components. */
.pp-why-icon-svg{width:56px;height:56px;color:var(--amber-deep);margin:0 auto 14px;}

/* Six-step (milk) and three-step (butter) How It's Made sequences reuse
   .pp-steps' existing responsive collapse (980px -> 2 cols, 640px -> 1 col)
   as-is; only the desktop column count differs from the default 4, so this
   is scoped to widths ABOVE the existing max-width breakpoints rather than
   overriding .pp-steps itself, which stays the 4-step (ghee/paneer) case. */
@media (min-width:981px){
  .pp-steps-6{grid-template-columns:repeat(3,1fr);}
  .pp-steps-3{grid-template-columns:repeat(3,1fr);}
}

/* Ghee's "136" signature callout — a distinct highlighted block alongside
   (not one of) the four numbered How It's Made steps, echoing .pp-cta-card's
   amber-bordered treatment so it reads as a deliberate emphasis, not a
   missed step. */
.pp-signature-block{
  margin-top:28px;max-width:640px;margin-left:auto;margin-right:auto;text-align:center;
  border:1.5px solid var(--amber);border-radius:12px;padding:28px 32px;background:rgba(184,111,44,.05);
}
.pp-signature-num{font-family:var(--font-head);font-weight:700;font-size:2.4rem;color:var(--amber-deep);line-height:1;margin-bottom:10px;}
.pp-signature-block p{max-width:none;font-size:.94rem;line-height:1.6;color:var(--ink-soft);}

/* Health Benefits — intro line lives in .section-head (reused as-is); the
   bullet list reuses .pp-cta-benefits' exact dot-list styling (already used
   inside the Subscribe card) rather than a new list treatment. */
.pp-benefits{padding:64px 0;}
.pp-benefits-body{max-width:640px;margin:0 auto;}
.pp-benefits-lead{font-weight:700;margin-bottom:14px;}
.pp-benefits-list{margin-bottom:0;}
.pp-benefits-close{margin-top:20px;font-size:.94rem;color:var(--ink-soft);font-style:italic;}

/* Closing "GALACTICA - ..." sign-off, just above the footer. */
.pp-signoff{padding:48px 0;text-align:center;border-top:1px solid var(--line);}
.pp-signoff-line{max-width:640px;margin:0 auto;font-size:.98rem;line-height:1.7;color:var(--ink-soft);}
.pp-signoff-line strong{font-family:var(--font-head);color:var(--ink);letter-spacing:.04em;}

/* Butter: no real product photo yet — the gallery's main slot becomes a
   placeholder box instead of a fabricated/stock image, same visual language
   as .pp-crosssell-media.empty's "Photo coming soon" pattern. */
.pp-gallery-main.empty{display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;}
.pp-gallery-main.empty span{font-size:.85rem;line-height:1.5;color:var(--ink-soft);}

/* Paneer: the one real photo used has no visible Galactica branding, so it's
   flagged in-place rather than presented as a confirmed product shot. */
.pp-gallery-main{position:relative;}
.pp-gallery-flag{
  position:absolute;top:10px;left:10px;font-size:10px;font-weight:700;letter-spacing:.04em;
  background:rgba(184,111,44,.14);color:var(--amber-deep);padding:3px 8px;border-radius:4px;
}

@media (max-width:640px){
  .pp-signature-block{padding:22px 20px;}
}

/* PDP click-through: product-card image + name open the product page */
.product-media-link{display:block;}
.product-cap a.name{color:inherit;text-decoration:none;transition:color .18s ease-out;}
.product-cap a.name:hover{color:var(--amber-deep);}

/* ==========================================================================
   PRODUCT PAGE — milk redesign (PRODUCT-PAGE-REDESIGN.md, flagship pass).
   Append-only. Two kinds of rule below:
   (a) brand-new `pp-` classes (trust strip, story grid, why-lead, journey,
       quality layout) — only milk's markup renders these, so they're bare
       selectors, safe for ghee/paneer/butter as-is.
   (b) overrides of classes ghee/paneer/butter still use — every one of
       these is scoped under `.pp-main.pdp-v2` so the other
       three pages stay pixel-identical. When they inherit this template,
       fold (b) into the base rules and drop the scoping.
   Left-aligned running text throughout (section-head intros, card/step
   descriptions, the sign-off line) — centering kept only for the short
   h2s, the folk-art motif, and label chips, per the redesign's type rules. */

/* ---------- Buy block: bigger gallery, bigger name + price ---------- */
.pp-main.pdp-v2 .pp-gallery-main{aspect-ratio:4/5;border-radius:16px;}
.pp-main.pdp-v2 .pp-buy-panel h1{font-size:clamp(2.2rem,4.5vw,3.2rem);}
.pp-main.pdp-v2 .pp-price{font-size:2.15rem;}

/* ---------- Trust strip (new) — thin hairline band right under the fold ---------- */
.pp-trust-strip{background:var(--off-white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;}
.pp-trust-strip-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:32px;}
.pp-trust-item{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:700;font-size:.85rem;color:var(--ink);}
.pp-trust-icon{width:24px;height:24px;color:var(--amber-deep);flex-shrink:0;}
@media (max-width:640px){
  .pp-trust-strip-inner{gap:18px 22px;}
  .pp-trust-item{font-size:.78rem;}
}

/* ---------- The Story: full-bleed navy, photo + left-aligned narrative ---------- */
/* padding-top (not the motif's own margin-top) carries the top gap here —
   a margin on .pp-story-motif, the wrap's first child, collapses straight
   through .pp-story-wrap's and .pp-story's zero padding and pushes the
   whole navy band down, leaving a stray band of --bone above it instead of
   a clean full-bleed edge. Padding on the section itself can't collapse. */
.pp-main.pdp-v2 .pp-story{background:var(--ink);padding:48px 0 0;}
.pp-main.pdp-v2 .pp-story-wrap{max-width:1160px;padding:0;text-align:center;}
.pp-main.pdp-v2 .pp-story-motif{margin:0 auto;color:var(--amber-tint);}
.pp-story-grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0;margin-top:32px;}
.pp-story-media{min-height:560px;}
.pp-story-media img{width:100%;height:100%;object-fit:cover;display:block;}
.pp-story-copy{display:flex;flex-direction:column;justify-content:center;padding:64px 64px 72px;text-align:left;}
.pp-story-eyebrow{font-family:var(--font-body);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-tint);margin-bottom:14px;}
.pp-story-copy h2{color:var(--bone);text-align:left;margin-bottom:0;}
.pp-main.pdp-v2 .pp-story-body{margin-top:20px;}
.pp-main.pdp-v2 .pp-story-body p{color:rgba(245,241,229,.86);text-align:left;max-width:60ch;}
.pp-story-pullquote{
  font-family:var(--font-head);font-style:italic;font-weight:500;
  font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.45;color:var(--amber-tint);
  margin-top:8px;max-width:56ch;
}
@media (max-width:980px){
  .pp-story-grid{grid-template-columns:1fr;}
  .pp-story-media{min-height:340px;}
  .pp-story-copy{padding:48px 32px 56px;}
}

/* ---------- Why It's Different: lead card + support grid, benefits folded in ---------- */
.pp-main.pdp-v2 .pp-why-grid{display:block;}
.pp-why-lead{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;
  margin-bottom:40px;background:var(--off-white);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;
}
.pp-why-lead img{width:100%;height:100%;min-height:280px;object-fit:cover;display:block;}
.pp-why-lead-copy{padding:32px 40px;text-align:left;}
.pp-why-lead-copy .t{font-family:var(--font-head);font-weight:700;font-size:1.4rem;color:var(--ink);margin-bottom:12px;}
.pp-why-lead-copy .d{font-size:1.02rem;line-height:1.65;color:var(--ink-soft);max-width:50ch;}
.pp-why-support-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;align-items:stretch;}
/* Bare icon+title+desc with no container reads as unstyled text floating
   in empty space once left-aligned (the old centered short-line version
   hid this; ranged-left paragraphs of uneven length don't). Same card
   recipe as .pp-legal-card/.pp-review-card elsewhere on this page, so a
   stretched grid row shows as an intentional bordered card, not a gap. */
.pp-main.pdp-v2 .pp-why-support-grid .pp-why-item{
  text-align:left;background:var(--off-white);border:1px solid var(--line);
  border-radius:12px;padding:22px;
}
.pp-main.pdp-v2 .pp-why-icon-svg{margin:0 0 14px;}
.pp-main.pdp-v2 .pp-why-item .d{text-align:left;}
.pp-benefits-strip{
  max-width:720px;margin:40px 0 0;padding:36px 40px;text-align:left;
  background:var(--off-white);border:1px solid var(--line);border-radius:16px;
}
.pp-benefits-strip-intro{font-size:1.02rem;line-height:1.65;color:var(--ink-soft);margin-bottom:20px;}
@media (max-width:980px){
  .pp-why-lead{grid-template-columns:1fr;}
  .pp-why-lead img{min-height:220px;}
}

/* ---------- How It's Made: numbered photo journey, replaces the icon-row card grid ---------- */
.pp-main.pdp-v2 .pp-how-made{background:var(--off-white);}
.pp-journey{display:flex;flex-direction:column;}
.pp-journey-step{display:grid;grid-template-columns:220px 1fr;align-items:center;gap:32px;padding:28px 0;border-top:1px solid var(--line);}
.pp-journey-step:first-child{border-top:none;padding-top:0;}
.pp-journey-media{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--card);}
.pp-journey-media img{width:100%;height:100%;object-fit:cover;display:block;}
.pp-journey-media--icon{display:flex;align-items:center;justify-content:center;}
.pp-journey-media--icon .pp-step-icon{width:52px;height:52px;color:var(--amber-deep);margin:0;}
.pp-journey-body{text-align:left;max-width:620px;}
.pp-journey-num{font-family:var(--font-head);font-weight:700;font-size:.78rem;color:var(--amber);letter-spacing:.08em;margin-bottom:6px;}
@media (max-width:640px){
  .pp-journey-step{grid-template-columns:1fr;gap:16px;}
  .pp-journey-media{aspect-ratio:16/10;}
}

/* ---------- Tested & Pure: one navy claim card pulling a claim forward ---------- */
.pp-quality-layout{display:grid;grid-template-columns:300px 1fr;align-items:center;gap:40px;}
.pp-quality-claim{background:var(--ink);border-radius:16px;padding:32px 28px;}
.pp-quality-claim p{font-family:var(--font-head);font-weight:700;font-size:1.15rem;line-height:1.4;color:var(--bone);text-align:left;max-width:none;margin:0;}
@media (max-width:640px){
  .pp-quality-layout{grid-template-columns:1fr;gap:24px;}
}

/* ---------- Nutrition & Label: 2 cards now the table is hidden ---------- */
@media (min-width:981px){
  .pp-main.pdp-v2 .pp-legal-grid{grid-template-columns:repeat(2,1fr);max-width:900px;margin:0 auto;}
}

.pp-legal-pending{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.85rem;line-height:1.55;color:var(--ink-soft);font-style:italic;}

/* ---------- How to Use: warm band, left-aligned icon cards ---------- */
.pp-main.pdp-v2 .pp-usage{background:var(--card-2);}
.pp-main.pdp-v2 .pp-usage-grid{align-items:stretch;}
.pp-main.pdp-v2 .pp-usage-item{
  text-align:left;background:var(--off-white);border:1px solid var(--line);
  border-radius:12px;padding:22px;
}
.pp-main.pdp-v2 .pp-usage-icon{margin:0 0 14px;}

/* ---------- Complete Your Kitchen: warm card ground ---------- */
.pp-main.pdp-v2 .pp-crosssell{background:var(--card);}

/* ---------- Section-head intros and sign-off: left-align the running text,
   keep the block centered on the page and the short h2 centered above it ---------- */
.pp-main.pdp-v2 .section-head p{text-align:left;max-width:65ch;width:fit-content;margin-left:auto;margin-right:auto;}
.pp-main.pdp-v2 .pp-signoff-line{text-align:left;}

/* ---------- Free-delivery progress, on the one-off checkout summary.
   At the end of the file per this stylesheet's convention (a later rule wins;
   media-query width alone doesn't grant priority). ---------- */
.free-ship-bar{margin-top:12px;}
.free-ship-msg{margin:0 0 7px;font-size:12.5px;line-height:1.45;color:var(--ink-soft);}
.free-ship-msg strong{color:var(--ink);font-weight:600;}
.free-ship-bar.is-free .free-ship-msg{color:var(--amber-deep);}
.free-ship-track{height:5px;border-radius:3px;background:var(--line);overflow:hidden;}
.free-ship-fill{height:100%;width:0;border-radius:3px;background:var(--amber);
  transition:width .28s ease;}
.free-ship-bar.is-free .free-ship-fill{background:var(--amber-deep);}
@media (prefers-reduced-motion: reduce){.free-ship-fill{transition:none;}}

/* Phone + PIN accounts (2026-09-28): PIN/code inputs, the "I have a code"
   text button, and the inline account block on /subscribe and /buy-once. */
.pin-input { font-size: 1.25rem; letter-spacing: .4em; font-variant-numeric: tabular-nums; }
.auth-text-btn {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--amber-deep); font-weight: 700; border-bottom: 1px solid var(--amber);
}
.acct-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.acct-block-title { font-weight: 700; font-size: 14px; margin: 0 0 4px; color: var(--ink); }
.acct-block-help { font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; }
.acct-block .checkout-field-row input { letter-spacing: .3em; }
.acct-status { font-size: 13px; margin: 10px 0 0; padding: 10px 12px; border-radius: 6px; background: rgba(184,111,44,.08); color: var(--ink); }
.acct-status.bad { background: rgba(156,59,46,.08); color: #9C3B2E; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.acct-btn {
  min-height: 44px; padding: 0 16px; border-radius: 4px; border: 1px solid var(--amber-deep);
  background: var(--amber-deep); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer;
}
.acct-btn.ghost { background: transparent; color: var(--amber-deep); }
.acct-btn:disabled { opacity: .6; cursor: default; }
.acct-optin { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; margin-top: 16px; cursor: pointer; }
.acct-optin input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.footer-wa-updates { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; }

/* Shop: the intro (.sub-hero, 40px bottom) and the product section (96px /
   64px top from the generic section rule) stacked into one ~136px gap under
   the intro. The intro already supplies the spacing, so the section adds none. */
.sub-hero + .products{padding-top:8px;}

/* ---- My Account (2026-10-01): wallet + subscription + details on one screen.
   One DOM for every width; desktop puts wallet and subscription side by side
   with details full-width beneath, phones stack them in that order. ---- */
.acct-hero .acct-phone{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
.acct-logout{background:none;border:none;padding:6px 2px;font:inherit;color:var(--amber-deep);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.acct-section{padding:8px 0 96px;}
.acct-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;max-width:1040px;margin:0 auto;align-items:stretch;}
.acct-details{grid-column:1 / -1;}

.acct-wallet{
  background:var(--ink);color:var(--bone);border-radius:8px;padding:32px;
  display:flex;flex-direction:column;min-height:260px;
}
.acct-eyebrow{font-family:var(--font-body);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:rgba(245,241,229,.7);margin:0;}
.acct-wallet-amt{font-family:var(--font-body);font-size:2.9rem;font-weight:700;line-height:1.1;margin-top:10px;font-variant-numeric:tabular-nums;}
.acct-wallet-note{font-size:14px;line-height:1.55;color:rgba(245,241,229,.82);margin:12px 0 0;max-width:40ch;}
.acct-wallet-note strong{color:var(--bone);}
.acct-wallet.is-low .acct-wallet-note{color:#F3C9A0;}
.acct-wallet.is-low .acct-wallet-note strong{color:#FFE2C6;}
.acct-wallet-actions{display:flex;align-items:center;gap:20px;margin-top:auto;padding-top:26px;flex-wrap:wrap;}
.acct-btn-amber{
  display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 26px;border-radius:3px;
  background:var(--amber);color:#fff;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;
  transition:background .2s ease-out;
}
.acct-btn-amber:hover{background:var(--amber-deep);}
.acct-link-light{display:inline-flex;align-items:center;gap:8px;color:var(--bone);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;padding:12px 0;}
.acct-link-light svg{width:14px;height:14px;}
.acct-inline-btn{background:none;border:none;padding:4px 0;font:inherit;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}

.acct-card{background:var(--card);border-radius:8px;padding:28px 30px;}
.acct-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px;}
.acct-card-head h2{font-size:1.25rem;margin:0;}
.acct-head-link{
  display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;padding:8px 0;
  font-family:var(--font-body);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--amber-deep);text-decoration:none;
}
.acct-head-link svg{width:13px;height:13px;}
.acct-head-link[hidden]{display:none;}
.acct-muted{font-size:14px;color:var(--ink-soft);line-height:1.55;margin:0;max-width:52ch;}

.acct-sub-list{list-style:none;margin:0;padding:0;}
.acct-sub-item{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line);}
.acct-sub-item:first-child{border-top:none;padding-top:2px;}
.acct-sub-item.is-paused .acct-sub-main{opacity:.6;}
.acct-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.acct-sub-main{flex:1;min-width:0;}
.acct-sub-name{font-weight:700;font-size:15px;}
.acct-sub-size{font-weight:500;color:var(--ink-soft);}
.acct-sub-meta{font-size:13px;color:var(--ink-soft);margin-top:2px;font-variant-numeric:tabular-nums;}
.acct-pill{flex-shrink:0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:4px 10px;border-radius:100px;background:#DCE8DA;color:#2F5A2C;white-space:nowrap;}
.acct-pill.is-paused{background:#F1DDCB;color:var(--amber-deep);text-transform:none;letter-spacing:0;}
.acct-sub-next{max-width:none;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-soft);}
.acct-sub-next strong{color:var(--ink);}
.acct-sub-empty-title{font-family:var(--font-head);font-size:1.1rem;font-weight:700;margin:0 0 6px;}
.acct-btn-ink{
  display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 26px;margin-top:18px;border-radius:3px;
  background:var(--ink);color:var(--bone);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;
}
.acct-btn-ink:hover{opacity:.88;}

.acct-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 32px;margin:0;}
.acct-summary-wide{grid-column:1 / -1;}
.acct-summary dt{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:4px;}
.acct-summary dd{margin:0;font-size:15px;line-height:1.5;}
.acct-summary-sub{display:block;font-size:13px;color:var(--ink-soft);margin-top:4px;}
.acct-summary[hidden],.acct-form[hidden]{display:none;}
.acct-form{max-width:640px;}
.acct-form .sub-field-label{margin-top:14px;}
.acct-form .sub-field-label:first-child{margin-top:0;}
.acct-opt{text-transform:none;font-weight:400;}
.acct-form-actions{display:flex;align-items:center;gap:18px;margin-top:22px;}
.acct-form-actions .sub-add-btn{width:auto;flex:1;max-width:260px;}
.acct-cancel{background:none;border:none;padding:12px 4px;font-family:var(--font-body);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);cursor:pointer;}
.acct-details .acct-save-status:empty{display:none;}

@media (max-width:860px){
  .acct-grid{grid-template-columns:minmax(0,1fr);gap:16px;}
  .acct-section{padding:0 0 64px;}
  .acct-wallet{padding:26px 22px;min-height:0;}
  .acct-wallet-amt{font-size:2.5rem;}
  .acct-card{padding:22px 20px;}
  .acct-summary{grid-template-columns:minmax(0,1fr);gap:14px;}
  .acct-form-actions .sub-add-btn{max-width:none;}
}
.acct-sub-foot{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.acct-sub-foot .acct-sub-next{margin:0;padding:0;border:none;}
.acct-btn-sm{height:40px;padding:0 18px;margin-top:0;font-size:12px;}
@media (max-width:860px){ .acct-sub-foot .acct-btn-sm{width:100%;} }

/* My Account: delete-account request — deliberately quiet, at the foot of
   Your details, so it is easy to find but never competes with the page. */
.acct-delete{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);}
.acct-delete-link{background:none;border:none;padding:8px 0;font:inherit;font-size:13px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.acct-delete-link:hover{color:var(--amber-deep);}
.acct-delete-link[hidden],.acct-delete-panel[hidden],.acct-delete-pending[hidden]{display:none;}
.acct-delete-title{font-family:var(--font-head);font-weight:700;font-size:1.05rem;margin:4px 0 8px;}
.acct-delete-list{margin:0 0 14px;padding-left:18px;font-size:14px;line-height:1.6;color:var(--ink-soft);max-width:60ch;}
.acct-delete-btn{
  height:46px;padding:0 22px;border:none;border-radius:3px;cursor:pointer;background:#8F2F23;color:#fff;
  font-family:var(--font-body);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;
}
.acct-delete-btn:disabled{opacity:.6;}
.acct-delete-pending p{font-size:14px;margin:0 0 4px;max-width:60ch;}
.acct-delete .acct-form-actions{flex-wrap:wrap;gap:8px 18px;}
.acct-delete-btn,.acct-delete .acct-cancel{white-space:nowrap;}

/* =====================================================================
   Milk product page v2 (2026-10-02) — `mk-` classes are rendered only by
   src/content/products/milk.ts. Surfaces alternate down the page (bone →
   off-white numbers band → navy story → bone → off-white → card → bone),
   headings are left-aligned, and no two sections share a layout.
   ===================================================================== */
.mk-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* Buy block */
.pp-main.pdp-v2 .pp-buy-section{padding-bottom:56px;}
.mk-eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-deep);margin:0 0 10px;}
.pp-main.pdp-v2 .pp-buy-panel h1{margin-bottom:6px;}
.mk-aka{font-family:var(--font-head);font-style:italic;font-size:1.05rem;color:var(--ink-soft);margin:0 0 14px;}
.pp-main.pdp-v2 .pp-desc{margin-bottom:22px;max-width:46ch;}
.mk-per-l{font-size:.74rem;font-weight:500;color:var(--ink-soft);opacity:.8;font-variant-numeric:tabular-nums;}
.mk-mode{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--ink);border-radius:8px;overflow:hidden;margin:4px 0 10px;}
.mk-mode-btn{
  min-height:46px;border:none;background:transparent;color:var(--ink);cursor:pointer;
  font-family:var(--font-body);font-weight:700;font-size:.92rem;transition:background .15s ease-out,color .15s ease-out;
}
.mk-mode-btn + .mk-mode-btn{border-left:1.5px solid var(--ink);}
.mk-mode-btn.active{background:var(--ink);color:var(--bone);}
.mk-mode-note{font-size:.88rem;line-height:1.55;color:var(--ink-soft);margin:0 0 20px;min-height:2.7em;max-width:46ch;}
.mk-buy-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;}
.mk-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.pp-main.pdp-v2 .mk-price .pp-price{line-height:1;}
#ppActions .pp-cta-btn[hidden]{display:none;}
#ppActions .pp-cta-btn{min-height:52px;font-size:1rem;}
.pp-main.pdp-v2 .pp-service-row{margin:22px 0 0;padding-top:20px;border-top:1px solid var(--line);}

/* Numbers band */
.mk-numbers{background:var(--off-white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:36px 0 30px;}
.mk-numbers-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;}
.mk-numbers-grid > div{padding:0 24px;border-left:1px solid var(--line);}
.mk-numbers-grid > div:first-child{border-left:none;padding-left:0;}
.mk-numbers-grid dt{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px;}
.mk-numbers-grid dd{margin:0;font-family:var(--font-head);font-weight:700;font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;}
.mk-numbers-grid dd span{font-size:.45em;font-weight:600;color:var(--amber-deep);margin-left:3px;}
.mk-numbers-note{font-size:.82rem;color:var(--ink-soft);margin:18px 0 0;max-width:70ch;}

/* Story (navy band — the v1 milk-scoped .pp-story rules still apply) */
.pp-main.pdp-v2 .pp-story{padding-top:0;}
.pp-main.pdp-v2 .pp-story-grid{margin-top:0;}
.pp-main.pdp-v2 .pp-story-copy h2{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.2;max-width:18ch;margin-top:2px;}
.mk-story-farm{color:var(--amber-tint) !important;font-size:.92rem !important;}

/* Shared section rhythm */
.mk-section{padding:88px 0;}
.mk-section h2{text-align:left;font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.15;margin:0 0 20px;}

/* One ingredient + nutrition */
.mk-inside{background:var(--bone);}
.mk-inside-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:72px;align-items:start;}
.mk-inside-copy p{font-size:1.02rem;line-height:1.7;color:var(--ink-soft);max-width:52ch;margin:0 0 14px;}
.mk-inside-copy .mk-lead{font-size:1.15rem;color:var(--ink);}
.mk-quiet{font-family:var(--font-head);font-style:italic;color:var(--amber-deep) !important;margin-top:20px !important;}
.mk-nutrition{background:var(--off-white);border:1px solid var(--line);border-radius:14px;padding:26px 28px 20px;}
.mk-nutrition h3{font-size:1rem;margin:0 0 12px;}
.mk-nutrition table{width:100%;border-collapse:collapse;font-size:.95rem;}
.mk-nutrition th,.mk-nutrition td{padding:10px 0;border-top:1px solid var(--line);font-weight:500;text-align:left;}
.mk-nutrition td{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;}
.mk-nutrition td span{font-weight:500;color:var(--ink-soft);}
.mk-nutrition tr:first-child th,.mk-nutrition tr:first-child td{border-top:2px solid var(--ink);}
.mk-nutrition .mk-sub th{padding-left:16px;color:var(--ink-soft);font-style:italic;}
.mk-nutrition-note{font-size:.78rem;color:var(--ink-soft);margin:10px 0 0;}

/* Pasture to pouch */
.mk-journey{background:var(--off-white);}
.mk-journey-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:center;}
.mk-journey-photo{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/5;}
.mk-journey-photo img{width:100%;height:100%;object-fit:cover;object-position:70% center;display:block;}
.mk-steps{list-style:none;margin:8px 0 0;padding:0;}
.mk-steps li{display:grid;grid-template-columns:56px 1fr;gap:12px;padding:20px 0;border-top:1px solid var(--line);}
.mk-steps li:first-child{border-top:none;padding-top:4px;}
.mk-step-n{font-family:var(--font-head);font-weight:700;font-size:1.5rem;color:var(--amber);line-height:1.1;}
.mk-steps strong{display:block;font-family:var(--font-head);font-size:1.12rem;margin-bottom:4px;}
.mk-steps p{font-size:.97rem;line-height:1.6;color:var(--ink-soft);margin:0;max-width:48ch;}

/* Keeping it fresh */
.mk-care{background:var(--card);}
.mk-care-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--ink);}
.mk-care-list li{padding:20px 24px 4px 0;font-size:1rem;line-height:1.55;color:var(--ink-soft);}
.mk-care-list strong{display:block;color:var(--ink);font-family:var(--font-head);font-size:1.15rem;margin-bottom:2px;}
.mk-uses{font-family:var(--font-head);font-style:italic;font-size:1.15rem;line-height:1.5;color:var(--amber-deep);margin:32px 0 0;max-width:60ch;}

/* FAQ + label + cross-sell */
.pp-main.pdp-v2 .pp-faq{background:var(--bone);}
.mk-faq-wrap{max-width:820px;}
.mk-label{background:var(--off-white);border-top:1px solid var(--line);padding:56px 0;}
.mk-label h2{font-size:1.3rem;}
.mk-label-dl{max-width:820px;font-size:.92rem;gap:10px 28px;}
.mk-cross-h{text-align:left;font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 24px;}

@media (max-width:980px){
  .mk-inside-grid,.mk-journey-grid{grid-template-columns:minmax(0,1fr);gap:36px;}
  .mk-journey-photo{aspect-ratio:16/11;}
}
@media (max-width:640px){
  .mk-section{padding:60px 0;}
  .mk-numbers{padding:28px 0 24px;}
  .mk-numbers-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px;}
  .mk-numbers-grid > div{padding:0 0 0 18px;}
  .mk-numbers-grid > div:nth-child(odd){border-left:none;padding-left:0;}
  .mk-care-list{grid-template-columns:minmax(0,1fr);}
  .mk-care-list li{padding:16px 0;border-bottom:1px solid var(--line);}
  .mk-nutrition{padding:20px 18px 16px;}
  .mk-steps li{grid-template-columns:44px 1fr;}
  .mk-label-dl{grid-template-columns:minmax(0,1fr);gap:2px;}
  .mk-label-dl dd{margin-bottom:10px;}
}
.mk-faq-wrap{max-width:var(--max);}
.mk-faq-wrap .faq-list{max-width:820px;margin:0;}
.mk-journey-photo{aspect-ratio:4/3;}
.mk-journey-photo img{object-position:35% center;}

/* v2 template additions (ghee/paneer/butter) */
.mk-journey--text .mk-journey-grid{grid-template-columns:minmax(0,1fr);}
.mk-journey--text .mk-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;}
.mk-journey--text .mk-steps li:nth-child(2){border-top:none;padding-top:4px;}
.mk-ingredients ul{list-style:none;margin:0;padding:0;}
.mk-ingredients li{padding:10px 0;border-top:1px solid var(--line);font-size:.98rem;}
.mk-ingredients li:first-child{border-top:2px solid var(--ink);font-weight:700;}
.mk-frompack{background:var(--ink);color:var(--bone);}
.mk-frompack-wrap{max-width:860px;}
.mk-frompack-eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-tint);margin:0 0 10px;}
.mk-frompack h2{color:var(--bone);}
.mk-frompack p{color:rgba(245,241,229,.86);font-size:1.02rem;line-height:1.7;max-width:62ch;margin:0 0 14px;}
.mk-frompack-list{margin:6px 0 18px;padding-left:20px;color:var(--bone);font-size:1.02rem;line-height:1.7;max-width:62ch;}
.mk-frompack-list li{margin-bottom:6px;}
.mk-frompack-list li::marker{color:var(--amber-tint);}
@media (max-width:640px){
  .mk-journey--text .mk-steps{grid-template-columns:minmax(0,1fr);}
  .mk-journey--text .mk-steps li:nth-child(2){border-top:1px solid var(--line);padding-top:20px;}
}
/* Tabular figures in the heading font put wide gaps around the comma
   ("₹1 , 350"); prices use normal figures. */
.pp-main.pdp-v2 .pp-price,.pp-sticky-price{font-variant-numeric:normal;}

/* =====================================================================
   Our Farm v2 (2026-10-02) — same language as the product pages: varied
   sections, left-aligned headings, alternating surfaces. Reuses the bare
   mk- pieces (numbers band, section rhythm, FAQ width, cross-sell heading).
   ===================================================================== */
.fm-page .mk-section h2{max-width:22ch;}
.fm-intro{background:var(--bone);}
.fm-intro-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:72px;align-items:center;}
.fm-intro-copy h2{font-size:clamp(1.8rem,3.2vw,2.6rem);max-width:20ch;}
.fm-intro-copy p{font-size:1.04rem;line-height:1.75;color:var(--ink-soft);max-width:56ch;margin:0 0 16px;}
.fm-lines{font-family:var(--font-head);font-style:italic;color:var(--ink) !important;font-size:1.12rem !important;border-left:2px solid var(--amber);padding-left:18px;}
.fm-intro-photo{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/5;}
.fm-intro-photo img{width:100%;height:100%;object-fit:cover;object-position:30% center;display:block;}

.fm-farms{background:var(--off-white);}
.fm-farms-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:8px;}
.fm-farm{background:var(--bone);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;}
.fm-farm img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;}
.fm-farm-body{padding:24px 26px 26px;}
.fm-farm-place{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-deep);margin:0 0 6px;}
.fm-farm h3{font-size:1.3rem;margin:0 0 8px;}
.fm-farm p{font-size:.98rem;line-height:1.65;color:var(--ink-soft);margin:0 0 14px;}
.fm-link{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--amber-deep);text-decoration:none;}

.fm-family{background:var(--ink);padding:96px 0;}
.fm-family-wrap{max-width:900px;}
.fm-family-eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-tint);margin:0 0 14px;}
.fm-family h2{color:var(--bone);font-size:clamp(2rem,4vw,3.2rem);line-height:1.12;text-align:left;margin:0 0 24px;max-width:18ch;}
.fm-family p{color:rgba(245,241,229,.86);font-size:1.08rem;line-height:1.75;max-width:60ch;margin:0 0 16px;}
.fm-family-close{font-family:var(--font-head);font-style:italic;color:var(--amber-tint) !important;font-size:1.25rem !important;margin-top:24px !important;}

.fm-values{background:var(--bone);}
.fm-values-lead{font-size:1.04rem;line-height:1.7;color:var(--ink-soft);max-width:56ch;margin:0 0 28px;}
.fm-values-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink);}
.fm-values-list li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1.4fr);align-items:baseline;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);}
.fm-dev{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:700;color:var(--amber-deep);line-height:1.2;}
.fm-values-list strong{font-family:var(--font-head);font-size:1.15rem;}
.fm-values-list li > span:last-child{color:var(--ink-soft);font-size:1rem;}

.fm-hands{background:var(--card);}
.fm-hands-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:72px;align-items:center;}
.fm-hands-photo{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/3;}
.fm-hands-photo img{width:100%;height:100%;object-fit:cover;object-position:35% center;display:block;}
.fm-hands-grid p{font-size:1.02rem;line-height:1.7;color:var(--ink-soft);max-width:56ch;margin:0 0 14px;}
.fm-hands-grid .mk-lead{color:var(--ink);font-size:1.15rem;}

.fm-faq{background:var(--bone);}
.fm-visit{background:var(--off-white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:64px 0;}
.fm-visit-wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;}
.fm-visit h2{text-align:left;font-size:clamp(1.6rem,2.8vw,2.2rem);margin:0 0 10px;}
.fm-visit p{font-size:1.02rem;line-height:1.65;color:var(--ink-soft);max-width:58ch;margin:0 0 8px;}
.fm-visit-note{font-style:italic;}
.fm-visit-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border-radius:8px;background:var(--amber-deep);color:#fff;font-weight:700;text-decoration:none;font-size:.98rem;}
.fm-taste{background:var(--bone);}
.fm-taste-grid{grid-template-columns:repeat(4,minmax(0,1fr));}

@media (max-width:980px){
  .fm-intro-grid,.fm-hands-grid{grid-template-columns:minmax(0,1fr);gap:36px;}
  .fm-intro-photo{aspect-ratio:4/3;}
  .fm-visit-wrap{flex-direction:column;align-items:flex-start;}
}
@media (max-width:640px){
  .fm-farms-grid{grid-template-columns:minmax(0,1fr);}
  .fm-family{padding:64px 0;}
  .fm-values-list li{grid-template-columns:minmax(0,1fr);gap:4px;padding:20px 0;}
  .fm-taste-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fm-visit-btn{width:100%;}
}
/* Same comma-gap issue as prices: big numbers use normal figures. */
.mk-numbers-grid dd{font-variant-numeric:normal;}

/* =====================================================================
   Our Story v2 (2026-10-02) — builds on the fm- classes (same main class
   .fm-page) with its own sections.
   ===================================================================== */
.st-strong{font-family:var(--font-head);font-weight:700;color:var(--ink) !important;font-size:1.12rem !important;}
.st-question{background:var(--ink);padding:96px 0;}
.st-question-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center;}
.st-question h2{color:var(--bone);font-size:clamp(2rem,4vw,3.2rem);line-height:1.12;text-align:left;margin:0 0 18px;font-style:italic;}
.st-question-sub{color:rgba(245,241,229,.82);font-size:1.06rem;line-height:1.7;max-width:44ch;margin:0;}
.st-choosing p{color:var(--amber-tint);font-family:var(--font-head);font-size:1.1rem;margin:0 0 14px;}
.st-choosing ol{list-style:none;margin:0;padding:0;border-top:1px solid rgba(245,241,229,.25);counter-reset:ch;}
.st-choosing li{counter-increment:ch;display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(245,241,229,.18);color:var(--bone);font-size:1.12rem;}
.st-choosing li::before{content:counter(ch,decimal-leading-zero);font-family:var(--font-head);font-weight:700;font-size:.85rem;color:var(--amber-tint);min-width:24px;}
.st-gir{background:var(--off-white);}
.st-gir-photo{aspect-ratio:4/5;}
.st-gir-grid strong{color:var(--ink);}
.st-136{background:var(--card);padding:96px 0;overflow:hidden;}
.st-136-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center;}
.st-136-num{font-family:var(--font-head);font-weight:800;font-size:clamp(7rem,18vw,15rem);line-height:.85;color:var(--amber-deep);margin:0;letter-spacing:-.04em;}
.st-136 .fm-family-eyebrow{color:var(--amber-deep);}
.st-136 h2{text-align:left;font-size:clamp(1.7rem,3vw,2.4rem);margin:0 0 18px;max-width:20ch;}
.st-136 p{font-size:1.02rem;line-height:1.75;color:var(--ink-soft);max-width:58ch;margin:0 0 14px;}
.st-136-lines{border-left-color:var(--amber-deep) !important;}
.st-136-link{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--amber-deep);text-decoration:none;}
.st-founder{background:var(--bone);}
.st-founder-wrap{max-width:820px;}
.st-founder p{font-size:1.06rem;line-height:1.75;color:var(--ink-soft);max-width:60ch;}
.st-quote{margin:28px 0;padding:0 0 0 22px;border-left:3px solid var(--amber);font-family:var(--font-head);font-style:italic;font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.45;color:var(--ink);}
.st-back{font-family:var(--font-head);font-weight:700;font-size:1.15rem;color:var(--amber-deep) !important;line-height:1.6;}
.st-next{background:var(--off-white);border-top:1px solid var(--line);padding:56px 0 72px;}
.st-next-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
.st-next-card{display:grid;grid-template-columns:120px 1fr;grid-template-rows:auto auto;column-gap:20px;align-items:center;background:var(--bone);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);padding:0 20px 0 0;}
.st-next-card img{grid-row:1 / 3;width:120px;height:120px;object-fit:cover;display:block;}
.st-next-label{align-self:end;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.st-next-title{align-self:start;font-family:var(--font-head);font-weight:700;font-size:1.1rem;margin-top:4px;}
@media (max-width:980px){
  .st-question-grid,.st-136-grid{grid-template-columns:minmax(0,1fr);gap:28px;}
  .st-gir-grid .st-gir-photo{order:-1;aspect-ratio:4/3;}
}
@media (max-width:640px){
  .st-question,.st-136{padding:64px 0;}
  .st-next-grid{grid-template-columns:minmax(0,1fr);}
  .st-next-card{grid-template-columns:96px 1fr;}
  .st-next-card img{width:96px;height:96px;}
}
/* Shop intro (copy deck "From Our Farm to Your Family"), 2026-10-02 */
.shop-hero .mk-eyebrow{margin-bottom:8px;}
.shop-hero p{max-width:62ch;}
.shop-hero .shop-hero-aside{font-size:.92rem;font-style:italic;color:var(--amber-deep);margin-top:10px;}
.st-136 .st-136-num{font-family:var(--font-head);font-weight:800;font-size:clamp(7rem,18vw,15rem);line-height:.85;color:var(--amber-deep);margin:0;letter-spacing:-.04em;max-width:none;}