:root{
  --navy:#1B1A6B;--navy-dk:#1A1A2E;--navy-lt:#2D2FA8;
  --accent:#2D2FA8;--accent-lt:#4F51D4;
  --green:#34D399;--coral:#C87555;--pop:#FCD34D;
  --white:#FFFFFF;--cream:#FAF8F3;--warm:#FAF8F3;
  --text:#2C2C3A;--muted:#6B6B7B;--border:#EDE8DC;
  --gold:#C8A96E;--gold-dark:#BA7517;--terracotta:#C87555;--blue-pale:#C8C9F5;--sand:#EDE8DC;--midnight:#1A1A2E;
  --r:20px;--rs:12px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Plus Jakarta Sans','Inter',-apple-system,sans-serif;background:var(--warm);color:var(--text);line-height:1.5;overflow-x:hidden;}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans',sans-serif;}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;}

/* ── NAV ──
   Canonical .nav / .nav-brand / .nav-links / .nav-right / .btn-nav-*
   / .btn-cart / .cart-badge / .hamburger rules live in /styles/nav.css.
   Previously duplicated here, which created a base-specificity race
   with nav.css's mobile @media block and prevented the May 2026
   mobile design polish from applying on /store. The only store-
   specific addition kept is .btn-nav-donate (donate CTA used on a
   handful of pages). The custom left-sliding drawer below also stays
   page-local — it's /store's hamburger drawer pattern, different
   from the canonical top-down drawer in nav.css. */
.btn-nav-donate{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:99px;font-size:12px;font-weight:700;color:#C87555;border:1.5px solid rgba(200,117,85,.35);background:rgba(200,117,85,.08);transition:all .2s;white-space:nowrap;text-decoration:none;}
.btn-nav-donate:hover{background:rgba(200,117,85,.16);border-color:#C87555;}
/* Drawer CSS — moved to /styles/nav.css (May 2026 unification). Every
   page now uses the same left-sliding sidebar drawer. Don't redeclare
   .nav-drawer / .nav-drawer-backdrop / .drawer-* rules here. */
.acct-wrap{position:relative;}
.acct-dropdown{position:absolute;top:calc(100% + 10px);right:0;background:rgba(248,249,255,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.6);border-radius:18px;box-shadow:0 8px 36px rgba(27,26,107,.14),inset 0 1px 0 rgba(255,255,255,.8);width:210px;padding:7px;display:none;z-index:400;}
.acct-dropdown.open{display:block;}
.acct-info{padding:10px;border-bottom:1px solid var(--border);margin-bottom:4px;}
.acct-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:800;color:var(--navy);}
.acct-email{font-size:11.5px;color:var(--muted);}
.acct-link{display:block;padding:8px 10px;border-radius:10px;font-size:13px;font-weight:600;color:var(--text);text-decoration:none;background:none;border:none;width:100%;text-align:left;cursor:pointer;transition:background .15s;}
.acct-link:hover{background:rgba(27,26,107,.06);}
.acct-link.danger{color:var(--coral);}
@media(min-width:960px){.btn-nav-auth{padding:7px 11px;font-size:12px;}}
@media(max-width:959px){.btn-nav-auth{display:none;}}
/* Narrow phones (≤430px — Dynamic-Island iPhones 15/15 Plus/15 Pro/Pro Max).
   The shorthand `padding:0 12px` resets padding-top to 0, which wipes
   the env(safe-area-inset-top) inset that the canonical mobile nav
   rule in nav.css sets on the top side. Without re-stating the top
   inset, the nav content paints under the iOS pill on these phones.
   Padding right/left also widened from canonical 8px → 12px on this
   page only — keep that delta but re-state the safe-area top. */
@media(max-width:430px){.nav{padding:env(safe-area-inset-top, 0px) 12px 0;}}
@media(max-width:768px){
  /* Filter bar docks as a glass pill flush with the nav. Same 8px side
     gutters as the nav pill. When it actually pins, body.command-bar
     fuses it with the nav (flat shared edge). */
  .filter-bar{
    top:98px!important;
    margin:0 calc(-1 * 5% + 8px) 12px !important;
    padding:0 !important;
    background:rgba(248,249,255,.62) !important;
    backdrop-filter:blur(28px) saturate(200%);
    -webkit-backdrop-filter:blur(28px) saturate(200%);
    border:1px solid rgba(255,255,255,.45) !important;
    border-radius:22px;overflow:hidden;
    box-shadow:0 10px 28px rgba(27,26,107,.12),inset 0 1px 0 rgba(255,255,255,.55) !important;
    border-bottom:none !important;
    transition:top .3s cubic-bezier(.22,1,.36,1),border-radius .25s ease;
  }
  /* Collapse inner padding on mobile so the pill is tight, not tall */
  .filter-bar .filter-inner{padding:8px 10px !important;justify-content:center !important;background:transparent !important;}
  .filter-bar .diet-filter-row{padding:0 10px 8px !important;background:transparent !important;}
  .filter-bar .diet-filter-row:empty{display:none;}
  /* Individual cat pills need translucent bg so the blur shines through */
  .filter-bar .cat-pill{background:rgba(255,255,255,.55) !important;border-color:rgba(255,255,255,.6) !important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
  .filter-bar .cat-pill.active{background:var(--navy) !important;color:#fff !important;border-color:var(--navy) !important;box-shadow:0 3px 10px rgba(27,26,107,.2) !important;}
  body.nav-shrunk .filter-bar{top:88px!important;}
}

/* ── HERO ── */
.hero{background:linear-gradient(140deg,#1A1A2E 0%,var(--navy) 50%,#1B1A6B 100%);padding:130px 5% 80px;position:relative;overflow:hidden;color:#fff;}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 90% 10%,rgba(79,81,212,.45) 0%,transparent 65%),radial-gradient(ellipse 40% 50% at 5% 85%,rgba(200,169,110,.1) 0%,transparent 60%);}
.hero-inner{max-width:1060px;margin:0 auto;position:relative;z-index:1;}
.hero-tag{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:lowercase;color:var(--accent-lt,#4F51D4);margin-bottom:14px;}
.hero-tag::before{content:'';width:16px;height:2px;background:var(--accent-lt,#4F51D4);border-radius:99px;}
.hero h1{font-size:clamp(36px,6.5vw,66px);font-weight:900;line-height:1.0;letter-spacing:-.04em;text-transform:lowercase;margin-bottom:20px;}
.hero h1 em{font-style:italic;color:var(--gold);-webkit-text-fill-color:var(--gold);background:none;}
.hero-sub{font-size:16px;color:rgba(255,255,255,.58);line-height:1.8;max-width:500px;margin-bottom:32px;}
.hero-sub strong{color:rgba(255,255,255,.9);}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;}
.btn-hero{background:linear-gradient(135deg,var(--navy,#1B1A6B) 0%,var(--accent-lt,#4F51D4) 100%);color:#fff;padding:13px 26px;border-radius:99px;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:800;box-shadow:0 6px 24px rgba(45,47,168,.4);transition:all .2s;display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;text-decoration:none;}
.btn-hero:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(45,47,168,.5);}
.btn-ghost-light{color:rgba(255,255,255,.75);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px;padding:13px 20px;border:1.5px solid rgba(255,255,255,.2);border-radius:99px;transition:all .2s;text-decoration:none;}
.btn-ghost-light:hover{border-color:rgba(255,255,255,.42);color:#fff;background:rgba(255,255,255,.08);}
.hero-wave{position:relative;margin-top:-1px;line-height:0;}.hero-wave svg{width:100%;height:auto;display:block;}
@keyframes cartCheckPop{0%{transform:scale(0) rotate(-45deg);opacity:0;}60%{transform:scale(1.3) rotate(0);opacity:1;}100%{transform:scale(1) rotate(0);opacity:1;}}
@keyframes cartBadgePop{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(200,169,110,0);}35%{transform:scale(1.55);box-shadow:0 0 0 8px rgba(200,169,110,.35),0 0 14px rgba(232,200,122,.7);}}
@keyframes cartAddedChip{0%{opacity:0;transform:translateY(10px) scale(.9);}15%{opacity:1;transform:translateY(-4px) scale(1);}75%{opacity:1;transform:translateY(-8px) scale(1);}100%{opacity:0;transform:translateY(-22px) scale(.96);}}
.cart-added-chip{position:fixed;z-index:1000;padding:8px 14px;border-radius:99px;background:linear-gradient(135deg,#8B6914 0%,#C8A96E 45%,#E8C87A 100%);color:#1A1508;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:800;letter-spacing:.01em;box-shadow:0 10px 28px rgba(200,169,110,.45),inset 0 1px 0 rgba(255,255,255,.35);display:inline-flex;align-items:center;gap:6px;pointer-events:none;animation:cartAddedChip 1.6s cubic-bezier(.22,1,.36,1) forwards;}
.cart-added-chip::before{content:"✓";font-size:13px;}
.cart-badge.pop{animation:cartBadgePop .6s cubic-bezier(.34,1.56,.64,1);}
@keyframes salePulse{0%,100%{box-shadow:0 4px 18px rgba(239,68,68,.55);transform:scale(1);}50%{box-shadow:0 6px 28px rgba(239,68,68,.85);transform:scale(1.07);}}
@keyframes bannerShimmer{0%{background-position:200% center;}100%{background-position:-200% center;}}
@keyframes sparkle{0%,100%{opacity:.55;transform:scale(.85) rotate(-10deg);}50%{opacity:1;transform:scale(1.35) rotate(15deg);}}
.sale-badge-ov{position:absolute;top:8px;right:8px;background:linear-gradient(135deg,#EF4444,#FF6A00);color:#fff;font-size:12px;font-weight:900;padding:5px 14px;border-radius:99px;letter-spacing:.07em;text-transform:lowercase;animation:salePulse 1.5s ease-in-out infinite;z-index:3;box-shadow:0 4px 16px rgba(239,68,68,.5);}
.menu-card.on-sale{box-shadow:0 0 0 2px rgba(239,68,68,.35),0 8px 24px rgba(0,0,0,.08)!important;}

/* ── SECTION HEADERS ── */
.section-wrap{max-width:1060px;margin:0 auto;padding:48px 5% 0;}
.section-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px;gap:12px;}
.section-title{font-size:clamp(20px,3vw,28px);font-weight:900;letter-spacing:-.03em;color:var(--navy);}
.section-sub{font-size:13px;color:var(--muted);}

/* ── FILTER BAR ── */
.filter-bar{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:70px;z-index:200;padding:0 5%;}
.filter-inner{max-width:1060px;margin:0 auto;display:flex;gap:4px;overflow-x:auto;padding:12px 0;scrollbar-width:none;}
.filter-inner::-webkit-scrollbar{display:none;}
/* Matches the homepage .filter-pill — rounded liquid-glass pill
   with an explicit active state that turns navy on tap. */
.cat-pill{padding:7px 16px;border-radius:99px;font-size:12px;font-weight:700;border:1.5px solid var(--border);background:#fff;color:var(--muted);cursor:pointer;transition:all .2s;white-space:nowrap;text-transform:lowercase;}
.cat-pill.active{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 3px 10px rgba(27,26,107,.2);}
@media(hover:hover){.cat-pill:hover{background:var(--navy);color:#fff;border-color:var(--navy);}}

/* ── DIETARY / ALLERGEN FILTER ── */
.diet-filter-row{max-width:1060px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 0 12px;min-height:0;}
.diet-filter-row:empty{display:none;}
.diet-filter-trigger{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:99px;font-size:12px;font-weight:700;border:1.5px solid var(--border);background:#fff;color:var(--muted);cursor:pointer;transition:all .2s;white-space:nowrap;font-family:'Inter',-apple-system,sans-serif;}
.diet-filter-trigger:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
.diet-filter-trigger:hover svg line{stroke:#fff;}
.diet-filter-trigger.has-active{background:var(--navy);color:#fff;border-color:var(--navy);}
.diet-filter-trigger.has-active svg line{stroke:#fff;}
.diet-filter-trigger svg{flex-shrink:0;}
.diet-filter-trigger svg line{stroke:var(--muted);transition:stroke .2s;}
.diet-filter-trigger .count{background:var(--gold);color:#1A1508;font-size:10px;font-weight:900;padding:1px 7px;border-radius:99px;min-width:18px;text-align:center;line-height:1.4;}
.diet-filter-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 12px;border-radius:99px;font-size:11px;font-weight:700;background:var(--navy);color:#fff;cursor:default;}
.diet-filter-chip.negative{background:#7F1D1D;}
.diet-filter-chip button{background:rgba(255,255,255,.22);border:none;color:#fff;width:16px;height:16px;border-radius:50%;cursor:pointer;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;}
.diet-filter-chip button:hover{background:rgba(255,255,255,.4);}
.diet-filter-clear{font-size:11px;font-weight:700;color:var(--muted);background:none;border:none;cursor:pointer;padding:5px 8px;text-decoration:underline;}
.diet-filter-clear:hover{color:var(--navy);}

.diet-filter-panel{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 12px 40px rgba(27,26,107,.14);padding:22px 24px;max-width:1020px;margin:0 auto 14px;display:none;}
.diet-filter-panel.open{display:block;}
.diet-filter-section{margin-bottom:18px;}
.diet-filter-section:last-child{margin-bottom:0;}
.diet-filter-section h4{font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:800;color:var(--navy);letter-spacing:.04em;text-transform:lowercase;margin-bottom:10px;}
.diet-filter-options{display:flex;flex-wrap:wrap;gap:6px;}
.diet-filter-option{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;font-size:12px;font-weight:700;border:1.5px solid var(--border);background:#fff;color:var(--muted);cursor:pointer;transition:all .15s;user-select:none;}
.diet-filter-option:hover{border-color:var(--navy);color:var(--navy);}
.diet-filter-option.active{background:var(--navy);color:#fff;border-color:var(--navy);}
.diet-filter-option.active.negative{background:#7F1D1D;border-color:#7F1D1D;}
.diet-filter-option .emoji{font-size:14px;}
.diet-filter-hint{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.5;}
.diet-filter-hint a{color:var(--navy);text-decoration:underline;font-weight:600;}
@media(max-width:600px){
  .diet-filter-panel{border-radius:14px;padding:18px 16px;margin:0 12px 12px;}
}

/* ── MENU CARD v1 (.tc-card) — hero-photo layout, shared with index.html.
   Dormant until buildMenuCard() switches over. Classes are prefixed .tc-*
   to coexist with the legacy .menu-card during the swap. */
.tc-card{background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 1px 2px rgba(27,26,107,.04),0 8px 28px rgba(27,26,107,.08);position:relative;cursor:pointer;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease;}
.tc-card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(27,26,107,.05),0 16px 40px rgba(27,26,107,.14);}
/* Photo slot is locked to 4:3 so every card in the grid reads evenly.
   Photos fill via object-fit:cover and center per-card via object-position
   (matches the menu-modal look). Body absorbs any row-stretch. */
.tc-card-img{position:relative;aspect-ratio:4/3;overflow:hidden;background-color:#e8d4a8;display:flex;align-items:flex-start;justify-content:space-between;padding:12px;flex:0 0 auto;}
.tc-card-img::after{content:'';position:absolute;bottom:0;left:0;right:0;height:45%;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.34) 100%);pointer-events:none;z-index:1;}
.tc-card-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
/* Hover-swap: when the recipe has 2+ uploaded photos, the second one is
   rendered with .tc-card-photo-alt and fades in on hover. Gated to
   `(hover: hover)` so taps on touch devices don't toggle a sticky state. */
.tc-card-photo-alt{opacity:0;transition:opacity .35s ease;pointer-events:none;}
@media (hover: hover){
  .tc-card:hover .tc-card-photo-alt{opacity:1;}
}
.tc-card-cat{position:relative;z-index:2;font-family:'Inter',sans-serif;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:lowercase;color:var(--navy);background:rgba(255,255,255,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:6px 12px;border-radius:99px;box-shadow:0 2px 6px rgba(27,26,107,.1);flex-shrink:0;}
.tc-card-badge{position:relative;z-index:2;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:lowercase;padding:5px 11px;border-radius:99px;box-shadow:0 2px 8px rgba(0,0,0,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap;flex-shrink:0;}
.tc-card-badge-special{background:linear-gradient(135deg,#C8A96E,#E8C87A);color:#1A1508;}
.tc-card-badge-fav{background:rgba(27,26,107,.92);color:#fff;}
.tc-card-badge-sale{background:linear-gradient(135deg,#EF4444,#DC2626);color:#fff;}
.tc-card-overlay{position:absolute;bottom:12px;left:14px;right:14px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;}
.tc-card-name{font-family:'Plus Jakarta Sans',sans-serif;font-weight:900;font-size:22px;color:#fff;letter-spacing:-.02em;line-height:1.05;text-shadow:0 2px 8px rgba(0,0,0,.45);max-width:calc(100% - 90px);margin:0;text-transform:lowercase;flex:1 1 auto;min-width:0;}
.tc-card-rating{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:4px 9px;border-radius:99px;text-shadow:0 1px 2px rgba(0,0,0,.3);white-space:nowrap;flex-shrink:0;}
.tc-card-rating .tc-star{color:#E8C87A;font-size:10px;}
.tc-card-rating .tc-rcount{opacity:.65;font-weight:500;margin-left:1px;}
/* Mobile: keep the review pill inside the card at the bottom-right of the
   picture. The desktop layout reserves 90px for the pill on the name element,
   which a "★4.9(47)"-style pill can exceed and then get clipped by the card's
   overflow:hidden. Shrink the pill and rebalance the reservation on mobile. */
@media(max-width:720px){
  .tc-card-overlay{left:12px;right:12px;bottom:10px;gap:6px;}
  .tc-card-name{font-size:19px;max-width:calc(100% - 72px);}
  .tc-card-rating{font-size:10px;padding:3px 7px;gap:3px;}
  .tc-card-rating .tc-star{font-size:9px;}
}
.tc-card-stripe{height:3px;background:#1d4ed8;}
.tc-card-stripe[data-cat="breakfast"]{background:#d97706;}
.tc-card-stripe[data-cat="bakery"]{background:#be185d;}
.tc-card-stripe[data-cat="smoothies"]{background:#059669;}
.tc-card-body{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1 0 auto;gap:10px;}
/* Macros: inline row, smaller muted labels, dot separators between items */
.tc-card-macros{display:flex;flex-wrap:nowrap;gap:0;align-items:baseline;font-size:12px;line-height:1.2;overflow:hidden;}
.tc-card-macro{display:inline-flex;align-items:baseline;gap:2px;white-space:nowrap;min-width:0;}
.tc-card-macro + .tc-card-macro{margin-left:6px;}
.tc-card-macro + .tc-card-macro::before{content:'·';color:var(--muted);margin-right:6px;opacity:.5;}
.tc-card-macro-val{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;color:var(--navy);letter-spacing:-.01em;}
.tc-card-macro-val .tc-u{font-size:10px;font-weight:700;color:var(--muted);}
.tc-card-macro-lbl{font-size:11px;font-weight:500;color:var(--muted);}
/* Tags: single compact row for allergens (red) + diet (green), no dots or label */
.tc-card-tags{display:flex;align-items:center;flex-wrap:wrap;gap:5px;min-height:0;}
.tc-card-tags:empty{display:none;}
.tc-aller,
.tc-diet{display:inline-flex;align-items:center;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:lowercase;padding:2px 8px;border-radius:99px;white-space:nowrap;flex-shrink:0;border:none;cursor:pointer;font-family:inherit;transition:transform .12s;}
.tc-aller{color:#DC2626;background:#FEE2E2;}
.tc-diet{color:#065F46;background:#D1FAE5;}
.tc-aller:hover,
.tc-diet:hover{transform:translateY(-1px);}
.tc-aller-more{background:#DC2626;color:#fff;}
.tc-card-cta-wrap{position:relative;margin-top:auto;padding-top:10px;}
.tc-card-cta{width:100%;background:var(--navy);color:#fff;border:none;border-radius:99px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:14px;letter-spacing:-.01em;box-shadow:0 4px 14px rgba(27,26,107,.2);cursor:pointer;transition:transform .2s,box-shadow .2s;}
.tc-card-cta:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(27,26,107,.28);}
.tc-card-cta-price{font-weight:900;font-size:15px;display:inline-flex;align-items:baseline;gap:4px;flex-shrink:1;min-width:0;}
.tc-card-cta-price .tc-per{font-size:10px;font-weight:600;opacity:.7;}
.tc-card-cta-price .tc-strike{text-decoration:line-through;font-size:12px;opacity:.55;font-weight:600;}
.tc-card-cta-label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0;font-size:13px;}
.tc-card-cta-frame{position:absolute;top:0;left:14px;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:lowercase;color:var(--navy);background:#F4F1E8;padding:2px 9px;border-radius:99px;box-shadow:0 2px 6px rgba(27,26,107,.15);white-space:nowrap;max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis;z-index:2;}
.tc-card.is-unavailable{opacity:.88;}
.tc-card.is-unavailable .tc-card-img{filter:saturate(.55) brightness(.9);}
.tc-card.is-unavailable .tc-card-img::before{content:'';position:absolute;inset:0;z-index:1;background:rgba(255,255,255,.18);pointer-events:none;}
.tc-card-return{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--navy);background:#F4F1E8;padding:7px 13px;border-radius:99px;margin-bottom:10px;align-self:flex-start;}
.tc-card-return::before{content:'📅';font-size:11px;}
.tc-card-notify{width:100%;background:#fff;color:var(--navy);border:1.5px solid var(--navy);border-radius:99px;padding:12px 18px;text-align:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:13px;letter-spacing:-.005em;cursor:pointer;transition:all .2s;margin-top:auto;}
.tc-card-notify:hover{background:var(--navy);color:#fff;}
.tc-card-notify.sent{background:#F4F1E8;border-color:var(--gold);color:#A88450;}

/* ── MENU GRID ── */
.menu-grid-wrap{max-width:1280px;margin:0 auto;padding:12px 4% 48px;}
.menu-grid{display:grid;grid-template-columns:1fr;gap:14px;}

/* ── MOBILE NAV + BOTTOM TAB BAR (≤720px) — same as homepage ── */
/* ── MOBILE POLISH (≤720px) ── */
@media(max-width:720px){
  html,body{overflow-x:hidden;}
  body{font-size:15px;}
  /* Footer rules live in /styles/footer.css. Match the desktop 24px
     so mobile doesn't get an extra 24px void between FAQ and footer. */
  footer{margin-top:20px;}
  .card-desc,.product-desc,.card-hint{font-size:14.5px !important;line-height:1.55;}
  /* .nav-links a removed — nav font sizing belongs to /styles/nav.css. */
  .card-macros,.filter-pill,.btn-nav-auth{font-size:13px !important;}
  .filter-pill,.card-order,.btn-add,.hero-btn-menu,.btn-cart,.btn-nav-account,.hamburger,.diet-filter-trigger,.diet-filter-chip{min-height:44px;}
  .card-order,.btn-add,.hero-btn-menu,.btn-primary,.item-modal-add{min-height:48px;padding:12px 22px !important;}
  input,textarea{font-size:16px !important;}
}

@media(max-width:720px){
  /* /store mobile nav: the bar layout (full-bleed flat bar, hamburger
     left, brand center, right cluster) is owned by /styles/nav.css —
     do NOT redeclare it here. /store only diverges from the canonical
     in one product way: the cart icon in the nav is hidden because
     this page renders a floating bottom cart pill (see .cart-pill-mobile
     below) and we don't want two cart UIs competing. v3-nav-coin and
     btn-nav-auth are also hidden on this page; coin is rare-use here
     and the bottom-right account avatar already owns the auth entry. */
  .nav-right .v3-nav-coin,
  .nav-right .btn-cart,
  .nav-right .btn-nav-auth{display:none !important;}
}
/* ── FLOATING CART PILL — six-phase state machine, mobile ≤720px ── */
/* Always visible (replaces the legacy qty>0 .show gate). Phase classes
   are toggled by /scripts/cart-pill.js: cp-empty / cp-below-min /
   cp-met / cp-standard / cp-cutoff (+ additive cp-lifted while a toast
   is on screen). cp-standard is the default look; other phases override. */
.cart-pill-mobile{display:none;}
@media(max-width:720px){
  .cart-pill-mobile{
    display:inline-flex;position:fixed;right:12px;bottom:calc(18px + env(safe-area-inset-bottom,0));
    z-index:355;align-items:center;gap:10px;padding:11px 16px 11px 14px;border-radius:99px;
    background:linear-gradient(135deg,#8B6914 0%,#C8A96E 45%,#E8C87A 100%);color:#1A1508;
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:13px;
    box-shadow:0 14px 32px rgba(200,169,110,.5),inset 0 1px 0 rgba(255,255,255,.4);
    text-decoration:none;animation:cartPillIn .45s cubic-bezier(.34,1.56,.64,1);
    max-width:calc(100% - 24px);line-height:1;font-variant-numeric:tabular-nums;
    -webkit-tap-highlight-color:transparent;
    transition:transform .25s cubic-bezier(.2,.9,.2,1.4),box-shadow .25s,background .3s,
               bottom .25s cubic-bezier(.2,.9,.2,1.4),color .3s,opacity .25s;
  }
  .cart-pill-mobile .cp-icon{width:18px;height:18px;flex-shrink:0;color:currentColor;}
  .cart-pill-mobile .cp-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  /* phase: empty — visible but muted (tap-me affordance, no shouting) */
  .cart-pill-mobile.cp-empty{
    background:linear-gradient(135deg,rgba(200,169,110,.78),rgba(232,200,122,.78));
    box-shadow:0 6px 18px rgba(200,169,110,.22),0 2px 6px rgba(0,0,0,.08);
    color:rgba(26,21,8,.78);
  }
  /* phase: below-minimum — white pill, gold pulsing aura, blocking emphasis */
  .cart-pill-mobile.cp-below-min{
    background:#fff;color:#1B1A6B;
    box-shadow:0 8px 24px rgba(200,169,110,.28),0 2px 6px rgba(27,26,107,.08);
    animation:cartPillPulse 2.4s ease-in-out infinite;
  }
  /* phase: minimum-met — tandoco standard: navy with gold-accent check
     + gold pop/glow ring, transient (~1.8s). No off-palette green. */
  .cart-pill-mobile.cp-met{
    background:linear-gradient(135deg,#1B1A6B 0%,#1A1A2E 100%);color:#fff;
    box-shadow:0 8px 24px rgba(27,26,107,.36),0 0 0 0 rgba(232,200,122,.6),0 2px 6px rgba(0,0,0,.12);
    animation:cartPillBump .6s cubic-bezier(.2,.9,.2,1.4),cartPillGlow 1.2s ease-out;
  }
  .cart-pill-mobile.cp-met .cp-icon{color:#E8C87A;}
  /* phase: cutoff — terracotta urgency, replaces standard in last 6h */
  .cart-pill-mobile.cp-cutoff{
    background:linear-gradient(135deg,#c8632e,#d97a3e);color:#fff;
    box-shadow:0 8px 24px rgba(200,99,46,.36),0 2px 6px rgba(0,0,0,.12);
  }
  /* additive: lifted while a cart toast / undo bar is on screen */
  .cart-pill-mobile.cp-lifted{bottom:calc(96px + env(safe-area-inset-bottom,0));}
  /* legacy hooks — drop the old .show requirement since pill is always rendered */
  .cart-pill-mobile.near-footer{transform:translateY(160%);opacity:0;pointer-events:none;}
  body:has(#navDrawer.open) .cart-pill-mobile,
  body:has(#tdcoCartDrawer.open) .cart-pill-mobile{transform:translateY(160%);opacity:0;pointer-events:none;}
  @keyframes cartPillIn{0%{opacity:0;transform:translateY(20px) scale(.85);}100%{opacity:1;transform:translateY(0) scale(1);}}
  @keyframes cartPillPulse{
    0%,100%{box-shadow:0 8px 24px rgba(200,169,110,.28),0 0 0 0 rgba(200,169,110,.55),0 2px 6px rgba(27,26,107,.08);}
    50%{box-shadow:0 8px 24px rgba(200,169,110,.4),0 0 0 10px rgba(200,169,110,0),0 2px 6px rgba(27,26,107,.08);}
  }
  @keyframes cartPillBump{0%{transform:scale(1);}45%{transform:scale(1.12);}100%{transform:scale(1);}}
  @keyframes cartPillGlow{
    0%{box-shadow:0 8px 24px rgba(27,26,107,.36),0 0 0 0 rgba(232,200,122,.7),0 2px 6px rgba(0,0,0,.12);}
    60%{box-shadow:0 8px 24px rgba(27,26,107,.36),0 0 0 14px rgba(232,200,122,0),0 2px 6px rgba(0,0,0,.12);}
    100%{box-shadow:0 8px 24px rgba(27,26,107,.36),0 0 0 0 rgba(232,200,122,0),0 2px 6px rgba(0,0,0,.12);}
  }
  @media(prefers-reduced-motion:reduce){
    .cart-pill-mobile,
    .cart-pill-mobile.cp-below-min,
    .cart-pill-mobile.cp-met{animation:none;}
  }
}

/* ── MENU RAILS (mobile only, ≤720px) ──
   Groups cards into horizontal rails by category. Desktop unaffected. */
@media(max-width:720px){
  .menu-grid.rails{display:block;gap:0;}
  .menu-rail{margin:0 -5% 18px;}
  .menu-rail-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 5% 10px;}
  .menu-rail-head h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:900;letter-spacing:-.02em;text-transform:lowercase;color:var(--text);margin:0;}
  .menu-rail-count{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:lowercase;color:var(--muted);}
  .menu-rail-track{display:flex;gap:12px;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scroll-padding-left:5%;padding:2px 5% 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .menu-rail-track::-webkit-scrollbar{display:none;}
  .menu-rail-track{align-items:stretch;}
  .menu-rail-track > .menu-card,
  .menu-rail-track > .tc-card{flex:0 0 82%;max-width:360px;scroll-snap-align:start;margin:0;position:relative;display:flex;flex-direction:column;}
  /* Card flip — top-left, smaller, so it never overlaps the top-right category tag */
  .menu-rail-track > .menu-card .card-flip-btn{position:absolute;top:10px;left:10px;z-index:6;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);color:var(--navy);font-family:'Plus Jakarta Sans',sans-serif;font-weight:900;font-size:13px;box-shadow:0 4px 12px rgba(27,26,107,.18);cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;transition:background .2s,transform .2s;}

  .menu-rail-track > .menu-card.flipped .card-flip-btn{background:var(--navy);color:var(--gold);}
  .card-back{position:absolute;inset:0;z-index:5;background:linear-gradient(160deg,#1B1A6B 0%,#2D2FA8 100%);color:#fff;padding:24px 22px 24px;border-radius:22px;display:flex;flex-direction:column;gap:14px;opacity:0;pointer-events:none;transform:rotateY(180deg);transform-origin:center;transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1);overflow-y:auto;}
  .menu-rail-track > .menu-card.flipped .card-back{opacity:1;pointer-events:auto;transform:none;}
  .menu-rail-track > .menu-card.flipped > :not(.card-back):not(.card-flip-btn){opacity:.15;transition:opacity .3s;}
  .card-back h5{font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:lowercase;color:var(--gold);margin:0 0 6px;}
  .card-back .cb-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:900;letter-spacing:-.02em;margin:0;line-height:1.15;}
  .card-back .cb-macros{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px;}
  .card-back .cb-macro{padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);}
  .card-back .cb-macro strong{display:block;font-size:18px;font-weight:900;font-family:'Plus Jakarta Sans',sans-serif;color:var(--gold);}
  .card-back .cb-macro span{font-size:10px;color:rgba(255,255,255,.6);text-transform:lowercase;letter-spacing:.1em;}
  .card-back .cb-tags{display:flex;flex-wrap:wrap;gap:6px;}
  .card-back .cb-tag{padding:4px 9px;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);font-size:10.5px;font-weight:700;}
  .menu-rail-track::after{content:"";flex:0 0 5%;}
  .menu-rail-track > .menu-card:hover{transform:none;}
  /* Clamp descriptions to 3 lines with ellipsis */
  .menu-rail-track > .menu-card .card-desc,
  .menu-rail-track > .menu-card .product-desc{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
    overflow:hidden;text-overflow:ellipsis;
  }
}

@media(min-width:600px){.menu-grid{grid-template-columns:repeat(2,1fr);gap:16px;}}
@media(min-width:960px){.menu-grid{grid-template-columns:repeat(3,1fr);gap:20px;}}
@media(min-width:1280px){.menu-grid{grid-template-columns:repeat(3,1fr);gap:22px;}}

/* ── LIQUID GLASS CARD (recipes) ── */
.menu-card{
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(22px) saturate(190%);
  -webkit-backdrop-filter:blur(22px) saturate(190%);
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 4px 24px rgba(27,26,107,.09),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(27,26,107,.04);
  border-radius:22px;overflow:hidden;transition:all .25s;display:flex;flex-direction:column;position:relative;cursor:pointer;
}
.menu-card:hover{box-shadow:0 16px 48px rgba(27,26,107,.14),inset 0 1px 0 rgba(255,255,255,.95);transform:translateY(-3px);background:rgba(255,255,255,.78);}
.menu-card.unavailable{filter:grayscale(45%);opacity:.62;}
.menu-card.unavailable:hover{opacity:.76;transform:translateY(-2px);}
.card-img{height:200px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:linear-gradient(135deg,#C8C9F5 0%,#A8AAEE 100%);}
.card-img img{width:100%;height:100%;object-fit:cover;}
.card-slides{position:absolute;inset:0;}
.card-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease;}
.card-slides img.active{opacity:1;}
.card-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:3;}
.card-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.5);cursor:pointer;transition:all .2s;}
.card-dot.active{background:#fff;transform:scale(1.3);}
.card-slide-btn{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.3);backdrop-filter:blur(4px);border:none;color:#fff;font-size:13px;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;}
.card-img:hover .card-slide-btn{opacity:1;}
.card-slide-btn.prev{left:6px;}
.card-slide-btn.next{right:6px;}
.card-img-placeholder{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:lowercase;color:rgba(255,255,255,.4);}
.card-badge{position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:99px;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:lowercase;}
.badge-available{background:rgba(52,211,153,.9);color:#fff;}
.badge-unavailable{background:rgba(0,0,0,.52);color:#fff;backdrop-filter:blur(4px);}
.card-cat{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);color:var(--accent);font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:lowercase;padding:3px 10px;border-radius:99px;}
.card-body{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column;}
.card-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--text);margin-bottom:5px;text-transform:lowercase;}
.card-diet-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px;}
.card-diet-tag{display:inline-block;padding:2px 8px;border-radius:99px;font-size:8.5px;font-weight:800;letter-spacing:.04em;text-transform:lowercase;color:#fff;cursor:pointer;transition:all .15s;}
.card-diet-tag:hover{transform:scale(1.05);filter:brightness(1.15);}
.card-diet-tag.t-gf{background:#059669;}.card-diet-tag.t-vegan{background:#16a34a;}.card-diet-tag.t-vegetarian{background:#65a30d;}
.card-diet-tag.t-halal{background:#0284c7;}.card-diet-tag.t-kosher{background:#7c3aed;}.card-diet-tag.t-allergen-free{background:#0d9488;}
.card-diet-tag.t-allergen{background:#dc2626;font-size:8px;}
/* Descriptions moved off the front of the card (tap ⓘ on the back
   face to read them). Keeps cards focused on photo + name + macros. */
.menu-card .card-desc,.menu-card .product-desc,.product-card .product-desc{display:none !important;}
.card-desc{font-size:12px;color:var(--muted);line-height:1.6;flex:1;margin-bottom:12px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.card-macros{display:flex;gap:12px;font-size:11px;color:var(--muted);margin-bottom:14px;flex-wrap:wrap;}
.card-macro strong{color:var(--text);font-weight:800;}
.card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;}
.card-price{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:900;letter-spacing:-.02em;}
body:not(.prices-ready) .card-price,body:not(.prices-ready) .card-hint{visibility:hidden;}
.btn-add{background:linear-gradient(135deg,var(--navy) 0%,var(--accent-lt) 100%);color:#fff;border:none;padding:9px 18px;border-radius:99px;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:800;cursor:pointer;transition:all .2s;text-transform:lowercase;box-shadow:0 3px 12px rgba(45,47,168,.3);touch-action:manipulation;}
.btn-add:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(45,47,168,.4);}
.card-hint{font-size:10.5px;color:var(--muted);margin-top:10px;text-align:right;letter-spacing:.02em;opacity:.7;}
.card-stars{display:flex;align-items:center;gap:4px;padding:0 0 4px;cursor:pointer;}
.card-stars-icons{color:var(--gold);font-size:11px;letter-spacing:1px;line-height:1;}
.card-stars-count{font-size:10px;color:var(--muted);font-weight:600;}
.card-return{font-size:11px;color:var(--accent);font-weight:700;margin-bottom:10px;}
.notify-row{display:flex;gap:6px;margin-top:auto;}
.btn-notify{background:var(--navy);color:#fff;border:none;padding:8px 14px;border-radius:10px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .15s;}
.btn-notify:hover{background:var(--accent);}

/* ── WEEKLY SPECIAL SHIMMER ── */
@keyframes goldPulse{0%,100%{box-shadow:0 0 8px rgba(200,169,110,.4),0 0 20px rgba(200,169,110,.15),inset 0 0 0 2px #C8A96E;}50%{box-shadow:0 0 16px rgba(232,200,122,.6),0 0 32px rgba(200,169,110,.25),inset 0 0 0 2px #E8C87A;}}
.menu-card.weekly-special{border:2px solid #C8A96E;animation:goldPulse 2.5s ease-in-out infinite;}
.menu-card.fan-favorite{border:2px solid var(--navy);position:relative;}

/* ── DIVIDER ── */
.store-divider{max-width:1060px;margin:0 auto 0;padding:0 5%;}
.divider-line{border:none;border-top:1.5px solid var(--border);margin:8px 0 0;}

/* ── PRODUCTS GRID ── */
.products-grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media(min-width:500px){.products-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:800px){.products-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1060px){.products-grid{grid-template-columns:repeat(4,1fr);}}

.product-card{background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:all .22s;cursor:pointer;}
.product-card:hover{box-shadow:0 10px 36px rgba(27,26,107,.1);transform:translateY(-2px);}
.product-img{height:180px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,var(--blue-pale) 0%,#A8AAEE 100%);}
.product-img img{width:100%;height:100%;object-fit:cover;}
.product-img-placeholder{font-size:40px;}
.product-body{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column;}
.product-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:800;color:var(--text);margin-bottom:4px;letter-spacing:-.01em;}
.product-desc{font-size:11.5px;color:var(--muted);line-height:1.55;flex:1;margin-bottom:12px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.product-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;}
.product-price{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:900;color:var(--navy);}
.btn-product-add{background:var(--navy);color:#fff;border:none;padding:7px 14px;border-radius:99px;font-size:11px;font-weight:700;cursor:pointer;transition:all .18s;}
.btn-product-add:hover{background:var(--accent);}

/* ── ITEM DETAIL MODAL ── */
.item-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1100;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s;padding:0;}
@media(min-width:600px){.item-modal-overlay{align-items:center;padding:16px;}}
.item-modal-overlay.open{opacity:1;pointer-events:all;}
.item-modal{background:#fff;width:100%;max-width:680px;max-height:92vh;overflow-y:auto;overscroll-behavior:contain;border-radius:24px 24px 0 0;transform:translateY(32px) scale(.98);transition:transform .3s cubic-bezier(.4,0,.2,1);position:relative;}
@media(min-width:600px){.item-modal{border-radius:24px;transform:translateY(20px) scale(.97);}}
.item-modal-overlay.open .item-modal{transform:none;}
.item-modal-photo{width:100%;aspect-ratio:4/3;height:auto;min-height:360px;max-height:60vh;object-fit:cover;border-radius:24px 24px 0 0;display:block;}
.item-modal-photo-placeholder{width:100%;aspect-ratio:4/3;height:auto;min-height:280px;max-height:45vh;border-radius:24px 24px 0 0;display:flex;align-items:center;justify-content:center;font-size:72px;}
.item-modal-close-bar{position:sticky;top:0;height:0;z-index:20;pointer-events:none;}
.item-modal-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50px;background:rgba(0,0,0,.45);border:none;cursor:pointer;color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;gap:0;backdrop-filter:blur(4px);transition:background .5s cubic-bezier(.34,1.2,.64,1),color .5s cubic-bezier(.34,1.2,.64,1),width .5s cubic-bezier(.34,1.2,.64,1),padding .5s cubic-bezier(.34,1.2,.64,1),gap .5s cubic-bezier(.34,1.2,.64,1);z-index:1200;padding:0;pointer-events:all;overflow:hidden;white-space:nowrap;}
/* The close-bar gets promoted to a sibling of .item-modal (inside the
   overlay) by the relocateClose() IIFE in store.html. Once floated, the
   bar lives in the overlay's positioning context — the overlay is
   position:fixed inset:0, so we can anchor the X to its top-right and
   it lands at the VIEWPORT corner, not the modal's corner. Stays in
   place during modal scroll, never clipped by the modal's border-
   radius or the transform-containing-block trap. */
.item-modal-overlay > .item-modal-close-bar--floated{
  position:absolute;
  top:env(safe-area-inset-top, 0px);
  right:env(safe-area-inset-right, 0px);
  height:auto;width:auto;
  z-index:1300;pointer-events:none;
}
.item-modal-overlay > .item-modal-close-bar--floated .item-modal-close{
  position:relative;
  top:auto;right:auto;
  margin:12px 12px 0 0;
  pointer-events:auto;
}
.item-modal-close-lbl{font-size:11px;font-weight:650;letter-spacing:.03em;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;flex-shrink:0;transition:max-width .5s cubic-bezier(.34,1.2,.64,1),opacity .2s .15s;}
.item-modal-close-x{display:inline-block;transition:transform .5s cubic-bezier(.34,1.2,.64,1);}
@media(hover:hover) and (pointer:fine){
  .item-modal-close:hover{background:var(--navy);color:var(--cream);width:156px;padding:0 10px 0 14px;gap:6px;}
  .item-modal-close:hover .item-modal-close-x{transform:rotate(360deg);}
  .item-modal-close:hover .item-modal-close-lbl{max-width:120px;opacity:1;}
}
/* ── MODAL LAYOUT WRAPPERS (mobile: stacked, desktop: 2-col) ── */
.im-left{position:relative;}
.im-photo-collage{display:block;}
.im-photo-main{aspect-ratio:4/3;min-height:280px;max-height:60vh;overflow:hidden;width:100%;}
@media(min-width:600px){.im-photo-main{max-height:none;}}
.im-photo-main img{width:100%;height:100%;object-fit:cover;display:block;border-radius:24px 24px 0 0;}
.im-photo-placeholder{display:flex;align-items:center;justify-content:center;font-size:72px;height:100%;min-height:280px;border-radius:24px 24px 0 0;}
.im-photo-sm{display:none;}
/* Desktop 2-col layout. Modal height is locked to the 560px column width
   so the left photo box becomes a clean square — typical 1:1 food shots
   fit comfortably without being cropped top/bottom. Right-side info panel
   scrolls within the same 560px so all detail is reachable. */
@media(min-width:1080px){
  .item-modal{max-width:1120px;height:min(560px,92vh);max-height:92vh;display:grid;grid-template-columns:560px 1fr;overflow:hidden;border-radius:24px;}
  .item-modal .item-modal-close-bar{position:absolute;left:0;width:560px;}
  .im-left{overflow:hidden;border-radius:24px 0 0 24px;position:relative;}
  .im-photo-collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:2fr 1fr;height:100%;gap:3px;background:#111;}
  .im-photo-main{grid-column:1/3;grid-row:1;aspect-ratio:unset;min-height:unset;max-height:none;height:100%;}
  .im-photo-main img{border-radius:0;object-fit:cover;width:100%;height:100%;display:block;}
  .im-photo-placeholder{border-radius:0;min-height:unset;height:100%;}
  .im-photo-sm{display:block;overflow:hidden;}
  .im-photo-sm img{width:100%;height:100%;object-fit:cover;display:block;}
  /* single photo: fills full left panel, no collage grid */
  .im-photo-collage--single{display:flex;height:100%;}
  .im-photo-collage--single .im-photo-main{flex:1;height:100%;}
  /* slideshow variant: main photo fills full left panel; dots float at the
     bottom edge so users can click-to-jump between every uploaded photo. */
  .im-photo-collage--slides{display:flex;height:100%;background:transparent;position:relative;}
  .im-photo-collage--slides .im-photo-main{flex:1;height:100%;position:relative;}
  /* min-height:0 lets the grid child shrink below its content so overflow-y triggers */
  .im-right{overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;border-radius:0 24px 24px 0;min-height:0;}
  .item-modal-body{flex:1;}
}
/* Modal slideshow shell — used at all breakpoints. Stacks every uploaded
   photo absolutely inside the main slot so .card-slides img + .active rules
   already in place handle the cross-fade. */
.im-photo-collage--slides{position:relative;}
.im-photo-collage--slides .im-photo-main{position:relative;overflow:hidden;}
.im-photo-collage--slides .im-photo-main .card-slides{position:absolute;inset:0;}
.im-photo-collage--slides .im-photo-main .card-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease;border-radius:24px 24px 0 0;}
.im-photo-collage--slides .im-photo-main .card-slides img.active{opacity:1;}
@media(min-width:1080px){
  .im-photo-collage--slides .im-photo-main .card-slides img{border-radius:0;}
}
.im-photo-collage--slides .card-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:3;}
.im-photo-collage--slides .card-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);cursor:pointer;padding:0;transition:all .2s;}
.im-photo-collage--slides .card-dot.active{background:#fff;transform:scale(1.3);}
.item-modal-body{padding:24px 24px 0;}
.item-modal-cat{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:lowercase;color:var(--accent);margin-bottom:6px;}
.item-modal-name{font-size:26px;font-weight:900;letter-spacing:-.03em;color:var(--navy);margin-bottom:10px;line-height:1.15;text-transform:lowercase;}
.item-modal-desc{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:18px;}
.item-modal-macros{display:flex;gap:0;border:1.5px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:20px;}
.item-modal-macro{flex:1;text-align:center;padding:12px 8px;border-right:1px solid var(--border);}
.item-modal-macro:last-child{border-right:none;}
.imm-val{font-size:17px;font-weight:900;color:var(--navy);}
.imm-key{font-size:9.5px;font-weight:700;text-transform:lowercase;letter-spacing:.05em;color:var(--muted);margin-top:2px;}
.nutr-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.nutr-tag{display:inline-block;padding:4px 11px;border-radius:99px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:lowercase;background:#166534;color:#fff;}
.nutr-tag.blue{background:#1e3a8a;color:#fff;}
.nutr-tag.terracotta{background:#9a3412;color:#fff;}
/* Glass Nutrition Label */
.glass-nutrition{background:rgba(27,26,107,.04);border:1px solid rgba(27,26,107,.08);border-radius:18px;padding:20px;margin-bottom:18px;}
.glass-nutrition-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;}
.glass-nutrition-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:900;color:var(--navy);letter-spacing:-.02em;}
.glass-nutrition-serving{font-size:11px;color:var(--muted);font-weight:600;}
.glass-nutrition-cal{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid rgba(27,26,107,.06);}
.gnc-num{font-family:'Plus Jakarta Sans',sans-serif;font-size:40px;font-weight:900;color:var(--navy);letter-spacing:-.04em;}
.gnc-label{font-size:12px;color:var(--muted);font-weight:600;margin-left:6px;text-transform:lowercase;}
.glass-nutrition-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;margin-bottom:14px;}
.glass-nutrition-item{background:rgba(27,26,107,.03);border:1px solid rgba(27,26,107,.06);border-radius:12px;padding:10px;text-align:center;transition:all .15s;}
.glass-nutrition-item.highlight{background:rgba(45,47,168,.08);border-color:rgba(45,47,168,.15);}
.gni-val{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:900;color:var(--navy);}
.gni-label{font-size:9px;color:var(--muted);font-weight:700;text-transform:lowercase;letter-spacing:.04em;margin-top:2px;}
.glass-nutrition-ings{font-size:11px;color:var(--muted);line-height:1.6;padding-top:12px;border-top:1px solid rgba(27,26,107,.06);}
.ntag{display:inline-block;padding:4px 11px;border-radius:99px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:lowercase;background:var(--navy);color:#fff;}
.nutr-ingredients{font-size:13px;color:var(--text);line-height:1.7;margin-bottom:14px;}
.nutr-ingredients strong{font-weight:700;color:var(--navy);}
.nutr-storage{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted);background:var(--cream);border-radius:10px;padding:10px 14px;margin-bottom:20px;border:1px solid var(--border);}
.nutr-ings{font-size:12.5px;line-height:1.55;color:var(--muted);margin-bottom:12px;}
.nutr-ings span{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:lowercase;color:var(--navy);margin-right:4px;}
.item-modal-footer{position:sticky;bottom:0;background:#fff;padding:16px 24px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:14px;box-shadow:0 -4px 20px rgba(0,0,0,.07);}
.item-modal-price{font-size:28px;font-weight:900;color:var(--navy);letter-spacing:-.04em;}
.item-modal-add{background:linear-gradient(135deg,var(--navy) 0%,var(--accent-lt) 100%);color:#fff;border:none;padding:14px 28px;border-radius:99px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:800;cursor:pointer;transition:all .2s;white-space:nowrap;box-shadow:0 4px 14px rgba(45,47,168,.3);touch-action:manipulation;}

/* ── ALLERGEN INFO MODAL ── */
.allergen-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s;padding:16px;}
.allergen-modal-overlay.open{opacity:1;pointer-events:all;}
.allergen-modal{background:#fff;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;border-radius:24px;transform:translateY(20px) scale(.97);transition:transform .3s cubic-bezier(.4,0,.2,1);position:relative;padding:32px 28px 28px;}
.allergen-modal-overlay.open .allergen-modal{transform:none;}
.allergen-modal-close{position:absolute;top:14px;right:14px;width:36px;height:36px;min-width:36px;min-height:36px;max-height:36px;aspect-ratio:1/1;border-radius:50%;background:var(--cream);border:none;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .15s;padding:0;}
.allergen-modal-close:hover{background:var(--border);color:var(--text);}
.allergen-modal h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:22px;font-weight:900;color:var(--navy);margin-bottom:6px;letter-spacing:-.02em;text-transform:lowercase;}
.allergen-modal .subtitle{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:20px;}
.allergen-item-summary{background:#F4F1E8;border:1px solid #EDE8DC;border-radius:16px;padding:16px 18px;margin-bottom:22px;}
.allergen-item-summary[data-empty]{display:none;}
.allergen-item-summary h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:800;color:var(--navy);text-transform:lowercase;letter-spacing:-.01em;margin:0 0 10px;}
.allergen-item-summary .s-row{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap;}
.allergen-item-summary .s-row:first-of-type{margin-top:0;}
.allergen-item-summary .s-lbl{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;flex-shrink:0;}
.allergen-item-summary .s-pill{display:inline-flex;align-items:center;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:lowercase;padding:3px 10px;border-radius:99px;white-space:nowrap;}
.allergen-item-summary .s-pill.s-aller{color:#DC2626;background:#FEE2E2;}
.allergen-item-summary .s-pill.s-diet{color:#065F46;background:#D1FAE5;}
.allergen-item-summary .s-ok{font-size:12px;color:#065F46;font-weight:700;display:inline-flex;align-items:center;gap:5px;}
.allergen-section{margin-bottom:18px;}
.allergen-section h3{font-size:13px;font-weight:800;color:var(--accent);text-transform:lowercase;letter-spacing:.02em;margin-bottom:10px;}
.allergen-card{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:var(--cream);border:1px solid var(--border);border-radius:14px;margin-bottom:8px;}
.allergen-icon{font-size:22px;flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:10px;border:1px solid var(--border);}
.allergen-info h4{font-size:13px;font-weight:800;color:var(--text);margin-bottom:2px;text-transform:lowercase;}
.allergen-info p{font-size:11.5px;color:var(--muted);line-height:1.5;}
.allergen-commitment{background:linear-gradient(135deg,rgba(45,47,168,.06),rgba(45,47,168,.02));border:1px solid rgba(45,47,168,.1);border-radius:16px;padding:18px;margin-top:20px;}
.allergen-commitment h3{font-size:13px;font-weight:800;color:var(--navy);margin-bottom:8px;text-transform:lowercase;letter-spacing:0;}
.allergen-commitment p{font-size:12px;color:var(--muted);line-height:1.65;}
.allergen-commitment ul{font-size:12px;color:var(--muted);line-height:1.65;margin:8px 0 0 16px;}
.allergen-commitment li{margin-bottom:4px;}
.item-modal-add:hover{transform:translateY(-1px);box-shadow:0 7px 22px rgba(45,47,168,.4);}
.item-modal-notify{background:var(--cream);color:var(--navy);border:1.5px solid var(--border);padding:12px 22px;border-radius:99px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:800;cursor:pointer;transition:all .2s;white-space:nowrap;}
.item-modal-notify.done{color:var(--green);border-color:var(--green);}

/* ── MODAL CONVERSION SIGNALS ── */
.im-badge-banner{border-radius:12px;padding:10px 14px;margin-bottom:12px;text-align:center;}
.im-badge-banner span{font-size:11px;font-weight:800;text-transform:lowercase;letter-spacing:.06em;}
.im-badge-banner.is-special{background:linear-gradient(135deg,rgba(200,169,110,.12),rgba(200,169,110,.04));border:1.5px solid rgba(200,169,110,.3);}
.im-badge-banner.is-special span{color:#C8A96E;}
.im-badge-banner.is-top,.im-badge-banner.is-fav{background:linear-gradient(135deg,rgba(27,26,107,.08),rgba(27,26,107,.03));border:1.5px solid rgba(27,26,107,.15);}
.im-badge-banner.is-top span,.im-badge-banner.is-fav span{color:var(--navy);}
/* rating + social proof row */
.item-modal-rating-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.imr-stars{font-size:13px;font-weight:800;color:#C8A96E;}
.imr-count{font-size:12px;color:var(--muted);font-weight:500;}
.imr-social{font-size:11px;font-weight:700;color:var(--accent);background:rgba(45,47,168,.08);padding:2px 8px;border-radius:99px;}
/* trust strip */
.item-modal-trust{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;}
.item-modal-trust span{font-size:11px;font-weight:700;color:#6B6B7B;background:#F2F2F2;border:1.5px solid #E0E0E0;border-radius:99px;padding:3px 10px;}
/* protein hero */
.item-modal-macro.is-protein-hero{background:linear-gradient(135deg,rgba(27,26,107,.07),rgba(27,26,107,.02));}
.imm-val.imm-protein{color:var(--navy);font-size:21px;}
/* tier picker */
.im-tier-section{margin:20px 0 4px;border-top:1px solid var(--border);padding-top:16px;}
.im-tier-label{font-size:10px;font-weight:800;text-transform:lowercase;letter-spacing:.1em;color:var(--muted);margin-bottom:10px;}
.im-tier-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px;}
.im-tier-chip{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 8px;border-radius:14px;border:1.5px solid var(--border);background:#fff;text-align:center;position:relative;overflow:visible;}
.im-tier-chip.is-featured{border-color:var(--navy);background:linear-gradient(135deg,rgba(27,26,107,.06),rgba(27,26,107,.02));}
.imt-meals{font-size:10px;font-weight:700;color:var(--muted);text-transform:lowercase;margin-top:6px;}
.imt-price{font-size:16px;font-weight:900;color:var(--navy);}
.imt-save{font-size:10px;font-weight:700;color:#2a9d5c;}
.imt-badge{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:800;color:#fff;background:var(--navy);padding:2px 9px;border-radius:99px;white-space:nowrap;text-transform:lowercase;letter-spacing:.04em;}
/* allergen section inline in modal */
.im-allergen-section{margin:16px 0 4px;border-top:1px solid var(--border);padding-top:14px;}
.im-aller-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.im-aller-row:last-child{margin-bottom:0;}
.im-aller-lbl{font-size:10px;font-weight:800;text-transform:lowercase;letter-spacing:.08em;color:var(--muted);min-width:54px;}
.im-aller-pill{font-size:11px;font-weight:700;color:#c0392b;background:rgba(192,57,43,.08);border:1px solid rgba(192,57,43,.2);border-radius:99px;padding:2px 8px;}
.im-aller-ok{font-size:12px;font-weight:700;color:#2a9d5c;}
.im-diet-pill{font-size:11px;font-weight:700;color:var(--navy);background:rgba(27,26,107,.07);border:1px solid rgba(27,26,107,.15);border-radius:99px;padding:2px 8px;}
/* heating & storage collapsible */
.im-heat-stor{border:1px solid var(--border);border-radius:12px;margin:14px 0;overflow:hidden;}
.im-heat-stor-sum{list-style:none;padding:12px 14px;font-size:12px;font-weight:800;text-transform:lowercase;letter-spacing:.06em;color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:space-between;background:var(--cream);user-select:none;}
.im-heat-stor-sum::after{content:'▾';font-size:13px;transition:transform .2s;color:var(--muted);}
.im-heat-stor-sum::-webkit-details-marker{display:none;}
details.im-heat-stor[open] .im-heat-stor-sum::after{transform:rotate(-180deg);}
.im-heat-stor-body{padding:14px;display:flex;flex-direction:column;gap:14px;}
.im-heat-section + .im-heat-section{border-top:1px solid var(--border);padding-top:14px;}
.im-heat-lbl{font-size:10px;font-weight:800;text-transform:lowercase;letter-spacing:.08em;color:var(--muted);margin-bottom:4px;}
.im-heat-text{font-size:13px;color:var(--text);line-height:1.7;white-space:pre-wrap;}
/* simplified footer price */
.im-footer-price{display:flex;align-items:baseline;gap:3px;flex-wrap:wrap;}
.im-price-from{font-size:11px;font-weight:600;color:var(--muted);}
.im-price-main{font-size:22px;font-weight:900;color:var(--navy);letter-spacing:-.03em;}
.im-price-per{font-size:11px;font-weight:600;color:var(--muted);}
.im-price-strike{font-size:14px;font-weight:500;color:#aaa;text-decoration:line-through;margin-right:2px;}
.im-price-swap-delta{font-size:11px;font-weight:600;color:var(--accent);align-self:center;}

/* ── TOAST ── */
.shop-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--navy);color:#fff;padding:12px 24px;border-radius:99px;font-size:13px;font-weight:700;box-shadow:0 8px 32px rgba(27,26,107,.3);z-index:1500;transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none;}
.shop-toast.show{transform:translateX(-50%) translateY(0);}

/* ── SKELETON ── */
.skeleton{background:linear-gradient(90deg,#f0f1f7 25%,#e4e5f0 50%,#f0f1f7 75%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:8px;}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none;background:#e4e5f0;}}

/* ── NO ITEMS ── */
.no-items{text-align:center;padding:60px 20px;color:var(--muted);}
.no-items p{font-size:15px;line-height:1.7;}
.products-empty{text-align:center;padding:48px 20px;color:var(--muted);border:1.5px dashed var(--border);border-radius:16px;}
.products-empty p{font-size:14px;line-height:1.7;}

/* footer rules live in /styles/footer.css. The FAQ section above
   already has padding-bottom (24-26px) for breathing room — the
   previous margin-top:64px added another ~64px of dead space between
   the last FAQ row and the dark navy footer, which read as a layout
   bug. 24px keeps a hairline separation without the void. */
footer{margin-top:24px;}
/* Plan selection celebration */
.plan-celebrate{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.plan-celebrate-ring{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,#C8A96E,#E8C87A);display:flex;align-items:center;justify-content:center;animation:celebrateRing .6s cubic-bezier(.4,0,.2,1) forwards;box-shadow:0 0 60px rgba(200,169,110,.5),0 0 120px rgba(200,169,110,.25);}
.plan-celebrate-check{font-size:48px;color:#1A1508;animation:celebrateCheck .4s .3s cubic-bezier(.175,.885,.32,1.275) both;}
@keyframes celebrateRing{0%{transform:scale(0);opacity:0;}50%{transform:scale(1.2);opacity:1;}100%{transform:scale(1);opacity:1;}}
@keyframes celebrateCheck{0%{transform:scale(0) rotate(-20deg);opacity:0;}100%{transform:scale(1) rotate(0);opacity:1;}}
.plan-celebrate-text{position:absolute;bottom:calc(50% - 90px);font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:900;color:#C8A96E;text-align:center;animation:celebrateText .4s .4s cubic-bezier(.175,.885,.32,1.275) both;text-shadow:0 2px 12px rgba(0,0,0,.3);}
@keyframes celebrateText{0%{transform:translateY(10px);opacity:0;}100%{transform:translateY(0);opacity:1;}}
.plan-sparkle{position:absolute;width:8px;height:8px;border-radius:50%;background:#E8C87A;animation:sparkle .8s ease-out forwards;}
@keyframes sparkle{0%{transform:translate(0,0) scale(1);opacity:1;}100%{opacity:0;}}
@media(max-width:599px){
  #planPickerOv{align-items:flex-end !important;justify-content:center !important;padding:0 !important;overflow:hidden !important;}
  #planPickerOv > div{max-width:100% !important;width:100% !important;border-radius:24px 24px 0 0 !important;max-height:92vh !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important;margin:0 !important;padding-bottom:calc(env(safe-area-inset-bottom,16px) + 24px) !important;box-shadow:0 -4px 40px rgba(0,0,0,.18) !important;}
}

/* ═══════════════════════════════════════════════════════════════
   /STORE V2 — collections layout (ported from /store-preview.html)
   ═══════════════════════════════════════════════════════════════ */

/* THIS WEEK hero strip */
.tw-wrap{max-width:1180px;margin:0 auto;padding:104px 24px 0;}
.tw-eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:lowercase;color:var(--gold);margin-bottom:12px;}
.tw-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(28px,4vw,44px);font-weight:900;margin-bottom:10px;color:var(--navy);letter-spacing:-.035em;line-height:1.05;}
.tw-sub{font-size:15px;color:var(--muted);margin-bottom:14px;max-width:580px;line-height:1.6;}
.tw-close-ribbon{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;padding:6px 14px;border-radius:99px;background:linear-gradient(180deg,rgba(200,169,110,.18) 0%,rgba(232,200,122,.06) 100%);border:1px solid rgba(200,169,110,.4);font-family:'Plus Jakarta Sans',sans-serif;font-size:11.5px;font-weight:700;color:#8B6914;letter-spacing:.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.55);}
.tw-close-dot{width:7px;height:7px;border-radius:50%;background:#E8C87A;box-shadow:0 0 10px rgba(232,200,122,.85);animation:twCloseDot 1.8s ease-in-out infinite;flex-shrink:0;}
.tw-close-ribbon .tw-cd-label{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8B6914;opacity:.78;}
.tw-close-ribbon .tw-cd-vals{display:inline-flex;align-items:baseline;gap:2px;font-variant-numeric:tabular-nums;}
.tw-close-ribbon .tw-cd-num{font-size:13px;font-weight:900;color:#8B6914;letter-spacing:-.01em;min-width:18px;text-align:center;display:inline-block;transition:transform .25s;}
.tw-close-ribbon .tw-cd-num.tick{transform:translateY(-1px) scale(1.08);}
.tw-close-ribbon .tw-cd-unit{font-size:9.5px;font-weight:800;color:#8B6914;opacity:.55;text-transform:uppercase;margin-right:4px;}
.tw-close-ribbon .tw-cd-unit:last-of-type{margin-right:0;}
.tw-close-ribbon .tw-cd-sep{opacity:.45;margin:0 2px;}
.tw-close-ribbon .tw-cd-pickup strong{font-weight:800;}
.tw-close-ribbon.under-24h{border-color:rgba(232,200,122,.7);background:linear-gradient(180deg,rgba(232,200,122,.28) 0%,rgba(232,200,122,.10) 100%);}
.tw-close-ribbon.under-24h .tw-close-dot{animation-duration:.9s;}
@keyframes twCloseDot{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.35);opacity:.6;}}
@media (prefers-reduced-motion:reduce){.tw-close-dot{animation:none;}}
.tw-grid{display:grid;gap:16px;grid-template-columns:1fr;}
@media(min-width:900px){.tw-grid{grid-template-columns:1.4fr 1fr;}}
.tw-feature{position:relative;border-radius:26px;overflow:hidden;background:var(--navy);color:#fff;min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;box-shadow:0 18px 56px rgba(27,26,107,.18);cursor:pointer;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;isolation:isolate;}
/* Animated gold shimmer border around the chef's pick feature tile.
   Uses the same flowing-gradient-masked-to-border trick as the bakery
   page so the two hero cards feel like a family. */
.tw-feature::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:2.5px;z-index:5;pointer-events:none;
  background:linear-gradient(110deg,
    rgba(200,169,110,.35) 0%,#C8A96E 15%,#E8C87A 30%,#FFE8A0 42%,#FFF4C2 50%,
    #FFE8A0 58%,#E8C87A 70%,#C8A96E 85%,rgba(200,169,110,.35) 100%);
  background-size:300% 100%;
  -webkit-mask:linear-gradient(#fff,#fff) content-box,linear-gradient(#fff,#fff);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:twFeatureBorderShift 5s linear infinite;
  filter:drop-shadow(0 0 8px rgba(232,200,122,.45));
}
@keyframes twFeatureBorderShift{0%{background-position:0 0;}100%{background-position:300% 0;}}
@media (prefers-reduced-motion:reduce){.tw-feature::before{animation:none;}}
.tw-feature:hover{transform:translateY(-3px);box-shadow:0 26px 72px rgba(27,26,107,.22);}
.tw-feature > .tw-feature-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s ease;z-index:0;}
.tw-feature:hover .tw-feature-bg{transform:scale(1.04);}
/* Bottom gradient scrim — darker + taller so the copy stays legible
   while the photo shows through as much as possible. Softer glass
   plate (barely-there blur) hugs the text without blocking the image. */
.tw-feature::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 15%,rgba(6,6,30,.35) 55%,rgba(6,6,30,.88) 100%);z-index:0;pointer-events:none;}
.tw-feature > *:not(.tw-feature-bg){position:relative;z-index:1;}
.tw-feature .tw-feature-copy{align-self:flex-start;max-width:560px;padding:0;border-radius:0;background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;text-shadow:0 2px 12px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.65);}
.tw-feature .tw-feature-copy > *:last-child{margin-bottom:0;}
.tw-feature .tw-feature-copy p{text-shadow:0 1px 8px rgba(0,0,0,.7);}
.tw-feature .pick{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:lowercase;color:var(--gold-lt,#E8C87A);margin-bottom:8px;}
.tw-feature .pick::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--gold-lt,#E8C87A);box-shadow:0 0 10px rgba(232,200,122,.9);}
.tw-feature h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(20px,2.4vw,28px);font-weight:900;margin-bottom:6px;line-height:1.15;letter-spacing:-.02em;}
.tw-feature p{font-size:13.5px;opacity:.82;max-width:380px;line-height:1.5;margin:0 0 12px;}
.tw-feature .macros{display:flex;gap:12px;font-size:11.5px;opacity:.9;flex-wrap:wrap;}
.tw-feature .macros strong{color:var(--gold-lt,#E8C87A);font-weight:900;margin-right:2px;}
.tw-secondary{display:grid;gap:12px;}
.tw-mini{position:relative;border-radius:20px;overflow:hidden;background:#fff;display:flex;gap:12px;padding:12px;align-items:center;min-height:96px;cursor:pointer;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease;box-shadow:0 3px 20px rgba(27,26,107,.08);border:1px solid rgba(0,0,0,.04);}
.tw-mini:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(27,26,107,.12);}
.tw-mini .tm-img{width:72px;height:72px;flex-shrink:0;border-radius:14px;background-size:cover;background-position:center;background-color:var(--cream);}
.tw-mini .tm-body{flex:1;min-width:0;}
.tw-mini .tm-tag{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:lowercase;color:var(--gold);margin-bottom:2px;}
.tw-mini .tm-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:14.5px;font-weight:800;color:var(--navy);margin-bottom:2px;line-height:1.2;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;word-break:break-word;hyphens:auto;}
.tw-mini .tm-meta{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── Personalized greeting strip (above the rail, logged-in only) ──
   First thing returning customers see. Holds the time-of-day greeting,
   their order streak, and the cutoff countdown to lock in this Sunday's
   pickup. Hidden via the [hidden] attribute until JS resolves auth. */
.store-greeting{max-width:1180px;margin:18px auto 0;padding:0 24px;}
.store-greeting-inner{
  background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.42) 100%);
  border:1px solid rgba(255,255,255,.7);
  border-radius:16px;
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  box-shadow:0 4px 14px rgba(27,26,107,.06),inset 0 1px 0 rgba(255,255,255,.88);
}
.store-greeting-l{display:flex;flex-direction:column;gap:2px;min-width:0;}
.store-greeting .sg-hi{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:900;font-size:clamp(15px,1.6vw,18px);
  color:var(--navy,#1B1A6B);letter-spacing:-.018em;line-height:1.15;text-transform:lowercase;
}
.store-greeting .sg-hi b{color:var(--accent,#2D2FA8);font-weight:900;}
.store-greeting .sg-streak{font-size:11.5px;color:var(--muted,#6B6B7B);font-weight:700;letter-spacing:-.005em;}
.store-greeting .sg-streak b{color:var(--gold,#C8A96E);font-weight:900;}
/* ── Cutoff ticket (oc-1) ─────────────────────────────────────────
   Navy left tab + white card with the time on a tabular-num face.
   Replaces the older gold-pill rendering.                        */
.store-greeting-r{
  position:relative;
  background:#fff;
  border:1px solid rgba(27,26,107,.10);
  border-radius:10px;
  padding:8px 14px 8px 18px;
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  box-shadow:0 2px 10px -6px rgba(27,26,107,.18);
  overflow:hidden;
  font-family:'Plus Jakarta Sans',sans-serif;
  color:var(--navy,#1B1A6B);
}
.store-greeting-r::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--navy,#1B1A6B);border-radius:10px 0 0 10px;
}
.store-greeting-r .sg-cutoff-lab{
  font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted,#6B6B7B);
}
.store-greeting-r .sg-cutoff-time{
  font-size:14px;font-weight:900;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
  color:var(--navy,#1B1A6B);
}
.store-greeting-r .sg-cutoff-time .u{
  font-size:9.5px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;
  color:var(--muted,#6B6B7B);margin-left:1px;margin-right:2px;
}
.store-greeting-r.is-urgent{background:#fff;border-color:rgba(232,77,77,.30);}
.store-greeting-r.is-urgent::before{background:#B33A1A;}
.store-greeting-r.is-urgent .sg-cutoff-lab{color:#B33A1A;}
.store-greeting-r.is-urgent .sg-cutoff-time{color:#B33A1A;}
@media(max-width:600px){
  .store-greeting{padding:0 14px;margin-top:8px;}
  /* Force greeting + cutoff onto a single row — flex-wrap:wrap was
     pushing the cutoff ticket to its own line below the streak. */
  .store-greeting-inner{padding:10px 12px;border-radius:12px;gap:10px;flex-wrap:nowrap;align-items:center;}
  .store-greeting-l{flex:1;min-width:0;}
  .store-greeting .sg-hi{font-size:13.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .store-greeting .sg-streak{font-size:11px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .store-greeting-r{padding:5px 10px 5px 12px;gap:6px;flex-shrink:0;border-radius:9px;}
  .store-greeting-r::before{width:4px;}
  .store-greeting-r .sg-cutoff-lab{font-size:8.5px;letter-spacing:.12em;}
  .store-greeting-r .sg-cutoff-time{font-size:12.5px;}
  .store-greeting-r .sg-cutoff-time .u{font-size:8.5px;}
  /* Coins block: one tight row, sub copy directly under the number. */
  .sg-coins{margin-top:6px;padding:9px 12px;border-radius:11px;}
  .sg-coins-head{gap:10px;align-items:center;}
  .sg-coins-icon{width:24px;height:24px;}
  .sg-coins-line{gap:6px;flex-wrap:nowrap;}
  .sg-coins-num{font-size:19px;}
  .sg-coins-label{font-size:9.5px;letter-spacing:.10em;}
  .sg-coins-pending{font-size:10px;padding:2px 8px;margin-left:auto;white-space:nowrap;}
  .sg-coins-sub{font-size:10.5px;margin-top:1px;line-height:1.3;}
}

/* ── TandoCoins tracker (lives inside the greeting strip) ───────── */
.sg-coins{
  margin-top:10px;
  background:linear-gradient(180deg,rgba(232,200,122,.10) 0%,rgba(200,169,110,.04) 100%);
  border:1px solid rgba(200,169,110,.28);
  border-radius:14px;padding:12px 16px;
}
.sg-coins-head{display:flex;align-items:center;gap:12px;}
.sg-coins-icon{width:30px;height:30px;flex-shrink:0;}
.sg-coins-meta{flex:1;min-width:0;}
.sg-coins-line{
  display:flex;align-items:baseline;gap:8px;font-family:'Plus Jakarta Sans',sans-serif;
  letter-spacing:-.02em;
}
.sg-coins-num{font-size:24px;font-weight:900;color:#8B6914;line-height:1;}
.sg-coins-pending{
  font-size:11px;font-weight:800;color:#8B6914;letter-spacing:.02em;
  display:none;background:rgba(232,200,122,.28);padding:3px 10px;border-radius:99px;
  margin-left:auto;
}
.sg-coins-pending.show{display:inline-block;}
.sg-coins-label{
  font-size:10.5px;font-weight:800;color:#8B6914;text-transform:uppercase;letter-spacing:.14em;
}
.sg-coins-sub{font-size:11.5px;color:var(--muted,#6B6B7B);margin-top:3px;font-weight:600;line-height:1.4;}
.sg-coins-sub b{color:var(--navy,#1B1A6B);font-weight:800;}

/* ── Protein slider — clean white pill, custom track + thumb ────── */
.v2-macro-wrap{
  display:inline-flex;align-items:center;gap:12px;
  padding:8px 16px 8px 14px;border-radius:99px;
  background:#fff;
  border:1px solid var(--border,#EDE8DC);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 4px 14px -8px rgba(27,26,107,.18);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.v2-macro-wrap:hover{border-color:rgba(45,47,168,.28);}
.v2-macro-wrap .v2-macro-label{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:700;color:var(--navy);
  letter-spacing:-.005em;white-space:nowrap;
}
.v2-macro-wrap .v2-macro-label b{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:900;color:var(--accent,#2D2FA8);
  font-variant-numeric:tabular-nums;display:inline-block;min-width:1.4em;text-align:right;
}
.v2-macro-wrap input[type="range"]{
  /* fully custom — no native chrome */
  -webkit-appearance:none;appearance:none;
  width:120px;height:6px;cursor:grab;outline:none;
  background:linear-gradient(90deg,var(--accent,#2D2FA8) 0%,var(--accent,#2D2FA8) var(--pct,0%),rgba(27,26,107,.1) var(--pct,0%),rgba(27,26,107,.1) 100%);
  border-radius:99px;
  margin:0;
}
.v2-macro-wrap input[type="range"]:active{cursor:grabbing;}
.v2-macro-wrap input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid var(--accent,#2D2FA8);
  box-shadow:0 2px 6px rgba(27,26,107,.25);
  cursor:grab;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1);
}
.v2-macro-wrap input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15);}
.v2-macro-wrap input[type="range"]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.05);}
.v2-macro-wrap input[type="range"]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid var(--accent,#2D2FA8);
  box-shadow:0 2px 6px rgba(27,26,107,.25);cursor:grab;
}
.v2-macro-wrap.is-active{border-color:var(--accent,#2D2FA8);box-shadow:0 0 0 3px rgba(45,47,168,.08),0 4px 14px -8px rgba(27,26,107,.18);}
@media(max-width:600px){
  .v2-macro-wrap input[type="range"]{width:88px;}
  .v2-macro-wrap{padding:7px 14px 7px 12px;gap:10px;}
}

/* ── "Surprise me" button ─────────────────────────────────────────── */
.pr-surprise-btn{
  appearance:none;background:linear-gradient(135deg,#C8A96E,#E8C87A);
  color:#1A1508;border:none;cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;font-weight:900;letter-spacing:-.005em;
  padding:9px 18px;border-radius:99px;
  display:inline-flex;align-items:center;gap:7px;
  box-shadow:0 4px 14px rgba(200,169,110,.32),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .15s ease,box-shadow .15s ease;text-transform:lowercase;
  text-decoration:none;white-space:nowrap;
}
.pr-surprise-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(200,169,110,.42);}
.pr-surprise-btn::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#FFE6A8 40%,transparent 70%);
  box-shadow:0 0 8px rgba(255,255,255,.85);
}
.pr-surprise-btn[disabled]{opacity:.5;cursor:wait;}

/* ── "X left" availability badges on item cards ──────────────────── */
.menu-card .stock-pill{
  position:absolute;top:8px;right:8px;z-index:3;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:9.5px;font-weight:900;
  letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:99px;
  background:rgba(255,255,255,.95);color:#7A5A1F;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.menu-card .stock-pill.is-low{background:rgba(232,77,77,.95);color:#fff;}
.menu-card .stock-pill.is-soldout{background:rgba(20,16,68,.92);color:#fff;}

/* Single filter dock (liquid glass) */
.v2-filter-dock{max-width:1180px;margin:24px auto 0;padding:0 24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

/* ── Surprise me trigger (top dock, next to "see full menu") ───────
   Shimmering gold pill — no dot/circle. The shimmer is a diagonal
   white sheen that sweeps across the button continuously, creating
   a subtle metallic gleam that draws the eye without flashing. */
.v2-surprise-trigger{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:0;
  padding:10px 18px;border-radius:99px;cursor:pointer;
  background:linear-gradient(135deg,#8B6914 0%,#C8A96E 35%,#FFE6A8 50%,#C8A96E 65%,#8B6914 100%);
  background-size:200% 100%;
  border:none;color:#1A1508;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:900;
  letter-spacing:-.005em;text-transform:lowercase;
  box-shadow:0 4px 14px rgba(200,169,110,.42),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(20,16,68,.10);
  transition:transform .15s ease,box-shadow .2s ease,background-position .8s ease;
  isolation:isolate;
}
.v2-surprise-trigger:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(200,169,110,.55),inset 0 1px 0 rgba(255,255,255,.65);background-position:100% 0;}

/* The shimmer sheen — a diagonal white band that sweeps across the
   pill every 3.5s. ::before is the moving sheen; the parent has
   overflow:hidden so it disappears off the edge cleanly. */
.v2-surprise-shimmer{
  position:absolute;top:0;left:-30%;height:100%;width:35%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  pointer-events:none;
  animation:v2SurpriseShimmer 3.5s ease-in-out infinite;
}
@keyframes v2SurpriseShimmer{
  0%{transform:translateX(-30%) skewX(-18deg);}
  60%,100%{transform:translateX(420%) skewX(-18deg);}
}

/* ── Sub-dock above the see-everything grid ──────────────────────── */
.v2-subdock{
  max-width:1180px;margin:18px auto 12px;padding:0 24px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.v2-burger{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:99px;cursor:pointer;
  background:#fff;border:1.5px solid var(--border,#EDE8DC);color:var(--navy);
  font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:800;
  letter-spacing:-.005em;text-transform:lowercase;
  transition:transform .15s ease,border-color .15s,box-shadow .2s,background .15s;
}
.v2-burger:hover{border-color:var(--navy);transform:translateY(-1px);box-shadow:0 4px 12px -6px rgba(27,26,107,.20);}
.v2-burger-bars{display:inline-flex;flex-direction:column;gap:3px;width:14px;}
.v2-burger-bars i{display:block;height:2px;background:currentColor;border-radius:99px;}
.v2-burger-count{
  background:var(--accent,#2D2FA8);color:#fff;
  font-size:10.5px;font-weight:900;letter-spacing:.04em;
  padding:1px 8px;border-radius:99px;min-width:20px;text-align:center;
}
.v2-burger.is-active{background:var(--navy);color:#fff;border-color:var(--navy);}
.v2-burger.is-active .v2-burger-count{background:var(--gold,#C8A96E);color:#1A1508;}

/* Personal filters — clean pill matching .v2-filter-trigger geometry.
   Sits next to the burger filters button on the left of the sub-dock.
   Off: white bg + navy text + gold star. On (.is-applied): gold-tinted
   bg + navy text. No more circle-inside-pill. */
.v2-personal-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px 10px 14px;border-radius:99px;cursor:pointer;
  background:#fff;border:1.5px solid var(--border,#EDE8DC);
  color:var(--navy,#1B1A6B);
  font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:-.005em;text-transform:lowercase;line-height:1;
  transition:transform .15s ease,border-color .15s,background .15s,box-shadow .2s,color .15s;
}
.v2-personal-btn:hover{transform:translateY(-1px);border-color:var(--gold,#C8A96E);box-shadow:0 4px 12px -6px rgba(200,169,110,.4);}
.v2-personal-btn.is-applied,
.v2-personal-btn.is-on{
  background:linear-gradient(135deg,rgba(255,230,168,.65) 0%,rgba(200,169,110,.35) 100%);
  border-color:var(--gold,#C8A96E);color:var(--navy,#1B1A6B);
  box-shadow:0 4px 14px rgba(200,169,110,.30),inset 0 1px 0 rgba(255,255,255,.6);
}
.v2-personal-star{
  width:14px;height:14px;flex:0 0 14px;
  color:var(--gold,#C8A96E);
  filter:drop-shadow(0 1px 2px rgba(200,169,110,.3));
}
.v2-personal-btn[disabled]{opacity:.55;cursor:not-allowed;}
.v2-personal-btn[disabled]:hover{transform:none;border-color:var(--border,#EDE8DC);box-shadow:none;}

/* Filter panel — single sleek card that drops in under the sub-dock
   when the filters button is clicked. Built as one unified card
   (not stacked sections with separate borders) so it reads as one
   surface, not three. */
.v2-burger-panel{
  max-width:1180px;margin:-2px auto 16px;padding:0 24px;
}
.v2-burger-panel[hidden]{display:none;}
.v2-burger-panel:not([hidden]){animation:v2BurgerDrop .25s cubic-bezier(.22,1,.36,1);}
@keyframes v2BurgerDrop{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}

.v2-burger-card{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(20,16,68,.08);
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  border-radius:18px;
  box-shadow:0 4px 14px rgba(20,16,68,.06),0 18px 40px -16px rgba(20,16,68,.18);
  overflow:hidden;
}

.v2-burger-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;
  border-bottom:1px solid rgba(20,16,68,.06);
}
.v2-burger-head-eye{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:10.5px;font-weight:900;letter-spacing:.14em;
  color:var(--muted,#6B6B7B);text-transform:uppercase;
}
.v2-burger-close{
  appearance:none;background:none;border:none;cursor:pointer;
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  font-size:18px;font-family:inherit;color:var(--muted);line-height:1;
  transition:background .15s,color .15s;
}
.v2-burger-close:hover{background:rgba(20,16,68,.06);color:var(--navy);}

.v2-burger-section{
  padding:14px 18px;
  border-bottom:1px solid rgba(20,16,68,.04);
}
.v2-burger-section:last-of-type{border-bottom:none;}
.v2-burger-section-label{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:11px;font-weight:800;
  color:var(--ink-2,#3D3E5C);
  letter-spacing:.04em;
  text-transform:lowercase;
  margin-bottom:10px;
}

.v2-burger-chips{
  display:flex;flex-wrap:wrap;gap:6px;
  /* Defensive: empty chips host visibly shows nothing — but at least
     the labels above ensure something is on screen so it doesn't look
     like an unfinished blank rectangle. */
  min-height:34px;
}
.v2-burger-chip{
  appearance:none;
  background:#fff;
  border:1.5px solid var(--border,#EDE8DC);
  font:inherit;font-size:12.5px;font-weight:700;
  color:var(--ink-2,#3D3E5C);
  padding:8px 14px;border-radius:99px;cursor:pointer;
  letter-spacing:-.005em;text-transform:lowercase;
  transition:transform .12s cubic-bezier(.22,1,.36,1),border-color .15s,background .15s,color .15s,box-shadow .2s;
  white-space:nowrap;
}
.v2-burger-chip:hover{
  border-color:var(--navy);transform:translateY(-1px);
  box-shadow:0 4px 10px -6px rgba(20,16,68,.18);
}
.v2-burger-chip.is-on{
  background:var(--navy);color:#fff;border-color:var(--navy);
  box-shadow:0 4px 12px rgba(20,16,68,.24);
}
.v2-burger-chip.is-allergy.is-on{
  background:#B33A1A;border-color:#B33A1A;
  box-shadow:0 4px 12px rgba(232,77,77,.24);
}

.v2-burger-actions{
  display:flex;justify-content:flex-end;align-items:center;gap:8px;
  padding:12px 18px 14px;
  border-top:1px solid rgba(20,16,68,.06);
  background:rgba(255,255,255,.5);
}
.v2-burger-clear{
  appearance:none;background:none;border:none;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:700;color:var(--muted);
  padding:8px 14px;border-radius:99px;
  transition:color .15s,background .15s;
}
.v2-burger-clear:hover{color:var(--navy);background:rgba(20,16,68,.05);}
.v2-burger-apply{
  appearance:none;background:var(--navy);color:#fff;border:none;cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12.5px;font-weight:900;letter-spacing:-.005em;text-transform:lowercase;
  padding:10px 20px;border-radius:99px;
  box-shadow:0 4px 12px rgba(20,16,68,.24);
  transition:transform .15s,background .15s,box-shadow .2s;
}
.v2-burger-apply:hover{background:var(--accent,#2D2FA8);transform:translateY(-1px);box-shadow:0 8px 22px rgba(20,16,68,.32);}

@media(max-width:600px){
  .v2-subdock{padding:0 16px;gap:8px;margin-top:14px;flex-wrap:nowrap;}
  /* Mobile dock: filters pill on the left, protein slider taking the
     remaining width. Personal-filters and the sort pill drop on mobile —
     personal filters stays one tap into the filters panel, and sorting
     a single category at a time isn't a phone-screen-sized job. */
  .v2-personal-btn,
  .v2-sort-wrap{display:none !important;}
  .v2-burger{flex-shrink:0;}
  .v2-macro-wrap{flex:1 1 0;min-width:0;justify-content:space-between;}
  .v2-macro-wrap input[type="range"]{flex:1;width:auto;min-width:0;}
  .v2-burger-panel{padding:0 16px;}
}

/* ── Surprise-me modal — confetti overlay with single picked item ─ */
.v2-surprise-overlay{
  position:fixed;inset:0;z-index:9998;
  background:rgba(15,14,71,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;padding:24px;
}
.v2-surprise-overlay.show{display:flex;animation:v2SurpriseFade .3s ease;}
@keyframes v2SurpriseFade{from{opacity:0;}to{opacity:1;}}
.v2-surprise-card{
  position:relative;background:#fff;border-radius:24px;overflow:hidden;
  max-width:420px;width:100%;
  box-shadow:0 30px 80px rgba(15,14,71,.45),0 0 0 4px rgba(255,255,255,.3);
  transform:scale(.85) translateY(20px);
  animation:v2SurprisePop .55s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes v2SurprisePop{to{transform:scale(1) translateY(0);}}
.v2-surprise-eye{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:10.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:#7A5A1F;background:linear-gradient(135deg,#C8A96E,#E8C87A);
  padding:10px 22px;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.v2-surprise-close{
  appearance:none;background:rgba(26,21,8,.18);border:none;cursor:pointer;
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;color:#1A1508;font-size:16px;font-family:inherit;line-height:1;
}
.v2-surprise-close:hover{background:rgba(26,21,8,.30);}
.v2-surprise-art{
  height:200px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:900;
  font-size:64px;letter-spacing:-.05em;position:relative;overflow:hidden;
}
.v2-surprise-art::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 50% at 30% 0%,rgba(255,255,255,.18),transparent 60%);}
.v2-surprise-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.v2-surprise-body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:12px;}
.v2-surprise-name{font-family:'Plus Jakarta Sans',sans-serif;font-weight:900;font-size:22px;color:var(--navy);letter-spacing:-.025em;line-height:1.15;text-transform:lowercase;}
.v2-surprise-meta{font-size:12.5px;color:var(--muted);line-height:1.5;}
.v2-surprise-meta b{color:var(--navy);font-weight:800;}
.v2-surprise-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:6px;flex-wrap:wrap;}
.v2-surprise-price{font-family:'Plus Jakarta Sans',sans-serif;font-weight:900;font-size:22px;color:var(--navy);letter-spacing:-.025em;}
.v2-surprise-add{
  appearance:none;background:var(--navy);color:#fff;border:none;cursor:pointer;
  padding:12px 22px;border-radius:99px;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:900;letter-spacing:-.005em;
  display:inline-flex;align-items:center;gap:6px;text-transform:lowercase;
  box-shadow:0 4px 14px rgba(20,16,68,.30);transition:transform .15s,box-shadow .2s,background .2s;
}
.v2-surprise-add:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(20,16,68,.40);background:var(--accent);}
.v2-surprise-shuffle{
  appearance:none;background:none;border:1.5px solid var(--border,#EDE8DC);color:var(--muted);
  font:inherit;font-size:12px;font-weight:800;cursor:pointer;
  padding:8px 14px;border-radius:99px;text-transform:lowercase;
}
.v2-surprise-shuffle:hover{border-color:var(--navy);color:var(--navy);}

/* legacy filter-trigger (still used by the top dock for "see full menu") */
.v2-filter-trigger{display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 14px;border-radius:99px;cursor:pointer;background:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.28) 100%);border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;color:var(--navy);transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s ease;box-shadow:0 4px 14px rgba(27,26,107,.08),inset 0 1px 0 rgba(255,255,255,.85);}
.v2-filter-trigger:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(27,26,107,.14),inset 0 1px 0 rgba(255,255,255,.95);}
.v2-filter-trigger .fp-dot{width:8px;height:8px;border-radius:50%;background:var(--navy);}
.v2-filter-trigger .fp-chev{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;margin-left:2px;}
.v2-filter-trigger.active .fp-dot{background:var(--gold);box-shadow:0 0 0 3px rgba(200,169,110,.25);}
.v2-filter-count{font-size:10.5px;font-weight:800;background:rgba(27,26,107,.85);color:#fff;padding:2px 8px;border-radius:99px;}
.v2-sort-pill{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:99px;cursor:pointer;background:linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.18) 100%);border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);font-size:12.5px;font-weight:700;color:var(--navy);font-family:'Plus Jakarta Sans',sans-serif;}
/* Sort menu popover — shown when the sort pill is tapped. Anchored
   under the pill on desktop, pinned as a bottom sheet on mobile. */
.v2-sort-wrap{position:relative;display:inline-block;}
.v2-sort-pill .fp-chev{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-2px;margin-left:3px;transition:transform .2s ease;}
.v2-sort-pill[aria-expanded="true"] .fp-chev{transform:rotate(-135deg);margin-top:3px;}
.v2-sort-menu{
  position:absolute;top:calc(100% + 8px);left:0;z-index:60;
  min-width:220px;padding:6px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.76) 100%);
  border:1px solid rgba(255,255,255,.65);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 14px 40px rgba(27,26,107,.18),inset 0 1px 0 rgba(255,255,255,.9);
  display:none;flex-direction:column;gap:2px;
  animation:v2SortIn .18s cubic-bezier(.22,1,.36,1);
}
.v2-sort-menu.open{display:flex;}
@keyframes v2SortIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.v2-sort-option{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:11px;cursor:pointer;border:0;background:transparent;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;color:var(--navy);
  text-align:left;width:100%;transition:background .15s ease;
}
.v2-sort-option:hover{background:rgba(27,26,107,.06);}
.v2-sort-option.active{background:rgba(200,169,110,.16);font-weight:800;color:#8B6914;}
.v2-sort-option::before{content:'';width:6px;height:6px;border-radius:50%;background:transparent;flex-shrink:0;}
.v2-sort-option.active::before{background:var(--gold);box-shadow:0 0 0 3px rgba(200,169,110,.22);}
@media(max-width:720px){
  .v2-sort-menu{
    position:fixed;left:16px;right:16px;top:auto;bottom:16px;width:auto;min-width:0;
    padding:10px;border-radius:22px;
    box-shadow:0 -4px 32px rgba(27,26,107,.22),inset 0 1px 0 rgba(255,255,255,.9);
  }
  .v2-sort-option{padding:14px 16px;font-size:14.5px;min-height:48px;}
}
/* Backdrop when open */
.v2-sort-backdrop{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .2s ease;}
.v2-sort-backdrop.open{opacity:1;pointer-events:auto;}
.v2-see-all-link{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;background:none;border:none;padding:10px 4px;font-family:'Plus Jakarta Sans',sans-serif;}
.v2-see-all-link:hover{color:var(--navy);}

/* ─────────────────────────────────────────────────────────────────
   "Picked for you" rail — sits above .v2-collections. Only shown
   when the recommendation engine returned at least 3 picks. Visual
   lane mirrors .tw-mini (the secondary hero rail) so the page
   stays cohesive instead of feeling like a separate widget.
   ───────────────────────────────────────────────────────────── */
.v2-picked-rail{max-width:1180px;margin:0 auto;padding:24px 24px 8px;}
.v2-picked-head{margin-bottom:14px;}
.v2-picked-eyebrow{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:lowercase;color:var(--gold);margin-bottom:4px;}
.v2-picked-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(22px,2.6vw,28px);font-weight:900;color:var(--navy);letter-spacing:-.03em;margin:0 0 4px;text-transform:lowercase;}
.v2-picked-sub{font-size:13.5px;color:var(--muted);font-weight:500;margin:0;line-height:1.5;max-width:560px;}
.v2-picked-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
.v2-picked-card{position:relative;background:#fff;border:1px solid rgba(0,0,0,.04);border-radius:18px;overflow:hidden;cursor:pointer;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease;box-shadow:0 3px 20px rgba(27,26,107,.08);}
.v2-picked-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(27,26,107,.12);}
.v2-picked-card .v2p-img{height:148px;background-size:cover;background-position:center;background-color:#EDE8DC;}
.v2-picked-card .v2p-body{padding:12px 14px 14px;}
.v2-picked-card .v2p-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:800;color:var(--navy);line-height:1.25;letter-spacing:-.01em;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;}
.v2-picked-card .v2p-macros{font-size:11.5px;color:var(--muted);margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.v2-picked-card .v2p-macros b{color:var(--navy);font-weight:800;}
.v2-picked-card .v2p-why{display:flex;align-items:flex-start;gap:6px;padding-top:8px;border-top:1px solid rgba(0,0,0,.06);font-size:11.5px;color:var(--navy);line-height:1.4;font-weight:500;}
.v2-picked-card .v2p-why::before{content:'★';color:var(--gold);font-size:10px;line-height:1.5;flex-shrink:0;}
@media (max-width: 720px){
  .v2-picked-rail{padding:18px 16px 4px;}
  .v2-picked-grid{display:flex;overflow-x:auto;gap:10px;padding:0 0 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px 8px;}
  .v2-picked-grid::-webkit-scrollbar{display:none;}
  .v2-picked-card{flex:0 0 78%;scroll-snap-align:start;}
}

/* Collection rails */
.v2-collections{max-width:1180px;margin:0 auto;padding:8px 0 28px;}
.v2-collection{margin-bottom:32px;padding:0 24px;}
.v2-col-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;gap:14px;}
.v2-col-head h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(19px,2.2vw,24px);font-weight:900;color:var(--navy);letter-spacing:-.03em;}
.v2-col-head .v2-col-sub{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:2px;}
.v2-col-rail-wrap{position:relative;margin:0 -24px;padding:0 24px;}
.v2-col-rail-wrap::before,.v2-col-rail-wrap::after{content:'';position:absolute;top:0;bottom:0;width:40px;pointer-events:none;z-index:2;transition:opacity .3s ease;}
.v2-col-rail-wrap::before{left:0;background:linear-gradient(90deg,var(--cream,#FAF8F3) 0%,rgba(250,248,243,0) 100%);opacity:var(--fade-l,0);}
.v2-col-rail-wrap::after{right:0;background:linear-gradient(-90deg,var(--cream,#FAF8F3) 0%,rgba(250,248,243,0) 100%);opacity:var(--fade-r,1);}
.v2-col-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 0 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.v2-col-rail::-webkit-scrollbar{display:none;}
.v2-col-rail > *{scroll-snap-align:start;flex:0 0 auto;}
/* Desktop nav arrows for collection rails. Hidden on touch widths;
   JS toggles disabled state at the rail's start/end so the affordance
   reflects what's actually scrollable. */
.v2-col-arr{
  position:absolute;top:calc(50% - 7px);
  width:38px;height:38px;border-radius:50%;
  background:#fff;border:1.5px solid var(--border,#EDE8DC);
  color:var(--navy,#1B1A6B);
  cursor:pointer;display:grid;place-items:center;padding:0;
  z-index:3;
  box-shadow:0 6px 18px rgba(27,26,107,.14);
  transform:translateY(-50%);
  transition:opacity .2s ease,transform .15s ease,background .15s ease,border-color .15s ease;
}
.v2-col-arr:hover{background:var(--cream,#FAF8F3);border-color:var(--accent,#2D2FA8);}

.v2-col-arr:disabled{opacity:0;pointer-events:none;}
.v2-col-arr svg{width:16px;height:16px;}
.v2-col-arr.prev{left:8px;}
.v2-col-arr.next{right:8px;}
@media(max-width:720px){.v2-col-arr{display:none !important;}}

/* Shop shortcuts (compact tiles, not rails) */
/* ── ROUND OUT YOUR ORDER (more-offerings photo cards) ────────────
   Big-photo card row: 5/3 aspect, full-bleed Unsplash food photo,
   gradient shade at bottom, uppercase pill + name + meta on top.
   Mobile collapses to a horizontal scroll-snap carousel with dots. */
.v2-more-head{max-width:1180px;margin:18px auto 14px;padding:0 24px;}
.v2-more-head h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(19px,2.2vw,24px);font-weight:900;color:var(--navy);letter-spacing:-.03em;}
.v2-more-row{
  max-width:1180px;margin:0 auto 28px;padding:0 24px;
  display:grid;gap:14px;grid-template-columns:repeat(4,1fr);
}
.v2-more-card{
  position:relative;border:0;padding:0;cursor:pointer;
  border-radius:18px;overflow:hidden;
  aspect-ratio:5/3;
  background-color:#ddd;
  background-image:var(--v2-more-img);
  background-size:cover;background-position:center;
  box-shadow:0 6px 20px rgba(27,26,107,.10);
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease;
  color:#fff;text-align:left;
}
.v2-more-card:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(27,26,107,.18);}
.v2-more-shade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 100%);
}
.v2-more-meta{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;}
.v2-more-pill{
  display:inline-block;padding:4px 9px;border-radius:99px;
  background:rgba(255,255,255,.92);color:var(--navy,#1B1A6B);
  font-family:'Plus Jakarta Sans',sans-serif;font-size:9.5px;font-weight:900;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;
}
.v2-more-name{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;font-weight:900;
  letter-spacing:-.02em;line-height:1.05;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.v2-more-line{
  font-size:12px;font-weight:600;color:rgba(255,255,255,.92);
  margin-top:4px;line-height:1.25;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.v2-more-dots{display:none;}
@media(max-width:780px){
  .v2-more-head{padding:0 16px;margin:14px auto 10px;}
  .v2-more-row{
    display:flex;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:0 16px 4px;gap:10px;margin-bottom:10px;
    scrollbar-width:none;
  }
  .v2-more-row::-webkit-scrollbar{display:none;}
  .v2-more-card{
    flex:0 0 86%;scroll-snap-align:center;
    aspect-ratio:5/3;
  }
  .v2-more-dots{
    display:flex;justify-content:center;gap:6px;margin:0 0 22px;
  }
  .v2-more-dots i{
    width:6px;height:6px;border-radius:99px;background:rgba(27,26,107,.20);
    transition:background .2s ease,width .2s ease;
  }
  .v2-more-dots i.is-on{background:var(--navy,#1B1A6B);width:18px;}
}

.v2-shortcuts{max-width:1180px;margin:8px auto;padding:0 24px;display:grid;gap:12px;grid-template-columns:repeat(3,1fr);}
@media(max-width:720px){.v2-shortcuts{grid-template-columns:1fr;padding:0 16px;}}
.v2-ss-tile{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:18px;cursor:pointer;background:linear-gradient(180deg,rgba(255,255,255,.65) 0%,rgba(255,255,255,.3) 100%);border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);box-shadow:0 4px 18px rgba(27,26,107,.08),inset 0 1px 0 rgba(255,255,255,.85);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease;text-decoration:none;color:inherit;}
.v2-ss-tile:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(27,26,107,.14),inset 0 1px 0 rgba(255,255,255,.95);}
.v2-ss-ico{width:42px;height:42px;border-radius:12px;flex-shrink:0;background:linear-gradient(180deg,rgba(200,169,110,.28),rgba(232,200,122,.1));border:1px solid rgba(200,169,110,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;color:#8B6914;}
.v2-ss-body{flex:1;min-width:0;}
.v2-ss-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:14.5px;font-weight:800;color:var(--navy);line-height:1.1;}
.v2-ss-meta{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.3;}
.v2-ss-arr{color:var(--gold);font-size:18px;font-weight:700;width:20px;text-align:center;transition:transform .25s ease;}
/* Active state — shortcut tile has revealed its section below */
.v2-ss-tile.active{background:linear-gradient(180deg,rgba(200,169,110,.22) 0%,rgba(200,169,110,.08) 100%);border-color:rgba(200,169,110,.55);}
.v2-ss-tile.active .v2-ss-arr{transform:rotate(45deg);color:#8B6914;}
button.v2-ss-tile{font:inherit;text-align:left;width:100%;}
.v2-hidden-section{animation:v2SectionIn .35s cubic-bezier(.22,1,.36,1);}
@keyframes v2SectionIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* See everything grid */
.v2-see-all{padding:28px 24px 0;border-top:1.5px solid rgba(27,26,107,.08);margin:20px 24px 0;max-width:1180px;}
@media(min-width:1228px){.v2-see-all{margin-left:auto;margin-right:auto;}}
/* See-everything grid + its mobile per-category rails dropped — every
   item now lives in exactly one category collection. The .v2-see-all*
   styles + the legacy .tc-card-* overrides that stripped the see-all
   chrome are no longer applicable. */

/* Mobile polish for V2 */
@media(max-width:720px){
  .tw-wrap{padding:88px 16px 0;}
  .tw-title{font-size:24px;}
  .tw-sub{font-size:13.5px;margin-bottom:18px;}
  .tw-feature{min-height:260px;padding:18px 18px;border-radius:20px;}
  .tw-feature h3{font-size:19px;}
  .tw-mini{padding:12px;gap:12px;min-height:82px;border-radius:16px;}
  .tw-mini .tm-img{width:64px;height:64px;border-radius:12px;}
  .tw-mini .tm-name{font-size:14px;}
  .v2-filter-dock{position:sticky;top:56px;z-index:50;margin:10px 0 0;padding:8px 16px;gap:8px;background:rgba(250,248,243,.82);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(27,26,107,.06);flex-wrap:nowrap;}
  /* Tighter pills + drop "view collections" so the two remaining
     triggers (full menu + surprise me) fit a single phone row. */
  .v2-filter-trigger,.v2-sort-pill{min-height:34px;font-size:12px;padding:7px 14px !important;}
  .v2-surprise-trigger{padding:7px 14px;font-size:12px;}
  .v2-surprise-trigger .v2-surprise-dice{width:14px;height:14px;}
  #v2ViewCollectionsBtn{display:none;}
  .v2-see-all-link{font-size:12px;}
  .v2-collections{padding:4px 0 20px;}
  .v2-collection{margin-bottom:26px;padding:0 16px;}
  .v2-col-head h2{font-size:19px;}
  .v2-col-rail-wrap{margin:0 -16px;padding:0 16px;}
}
@media (prefers-reduced-motion:reduce){
  .tw-feature:hover .tw-feature-bg{transform:none;}
  .tw-feature:hover,.tw-mini:hover,.v2-ss-tile:hover,.v2-filter-trigger:hover{transform:none;}
}
/* Hide the classic hero's baking-mixes CTA when V2 is on (it's
   duplicated by the V2 shop shortcuts) */
body.store-v2 .hero + .hero-wave + .filter-bar,
body.store-v2 > div[style*="text-align:center"][style*="padding:18px 0"]{display:none !important;}
/* V2 replaces the separate dark hero with the merged this-week
   hero, so hide the classic hero + wave entirely. */
body.store-v2 section.hero,
body.store-v2 section.hero + .hero-wave{display:none !important;}
/* Legacy "products & bulk proteins" section is superseded by the
   shop-shortcut reveal rails. Hide every surface tagged with the
   legacy-products-surface class + any section-wrap that still
   renders products afterwards. */
body.store-v2 .legacy-products-surface,
body.store-v2 #legacyProductsSection,
body.store-v2 #productsAnchor ~ .store-divider,
body.store-v2 #productsAnchor ~ .section-wrap{display:none !important;}
/* V2 override: when the filter pill opens the classic diet panel,
   show it even though body.store-v2 hides the classic chrome. */
body.store-v2 #dietFilterPanel.v2-open{
  display:block !important;
  max-width:1180px;margin:12px auto 0;padding:18px 24px;
  background:linear-gradient(180deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,.45) 100%);
  border:1px solid rgba(255,255,255,.6);border-radius:22px;
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 8px 32px rgba(27,26,107,.1),inset 0 1px 0 rgba(255,255,255,.85);
  animation:v2SectionIn .3s cubic-bezier(.22,1,.36,1);
}
/* Force lowercase across every V2 text surface — catches anything
   that slips through with title-case from Firestore / static markup. */
body.store-v2 .tw-wrap,
body.store-v2 .v2-filter-dock,
body.store-v2 .v2-collections,
body.store-v2 .v2-collection,
body.store-v2 .tw-feature,
body.store-v2 .tw-mini,
body.store-v2 .v2-ss-tile,
body.store-v2 .v2-col-rail .menu-card,
body.store-v2 .v2-see-all-grid .menu-card{text-transform:lowercase;}
/* Keep the SEO title + allergen abbreviation badges intact */
body.store-v2 .tc-aller,
body.store-v2 [data-keep-case]{text-transform:none;}

/* ─── Surprise · slot-machine modal (v3) ───────────────────────────
   Photo-led slot-machine flow ported from preview-surprise.html
   (PR #761, commit 6e607a6). Overrides the old cream/gold-bordered
   .v2-surprise-card with a clean white modal. The reel scrolls
   PHOTOS (4:3) inside a navy frame; gold "FOR YOU" pill animates in
   when the reel stops; confetti fires INSIDE the modal on stop. */

/* Trigger pill — restyle only when .v3 is on, so other pages that
   still use .v2-surprise-trigger keep their existing render. */
.v2-surprise-trigger.v3{
  /* Match the see-full-menu trigger size so the two buttons read as a
     paired set (padding, height-via-padding, font-size, gap, pill
     radius all aligned). The navy→accent→gold gradient + gold ring +
     dice icon keep the surprise's distinct identity. */
  position:relative;overflow:visible;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px 10px 14px;border-radius:99px;
  background:linear-gradient(135deg,#0F0E47 0%,#2D2FA8 50%,#8B6914 100%);
  background-size:160% 160%;background-position:0% 50%;
  border:none;color:#fff;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:800;
  letter-spacing:-.005em;text-transform:lowercase;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 4px 14px rgba(20,16,68,.28),
    0 0 0 1.5px rgba(200,169,110,.42);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,background-position .6s cubic-bezier(.22,.8,.36,1);
}
.v2-surprise-trigger.v3:hover{transform:translateY(-2px) rotate(-1deg);background-position:100% 50%;box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 14px 28px -4px rgba(20,16,68,.55),0 0 0 1.5px rgba(200,169,110,.65);}

.v2-surprise-trigger.v3 .v2-surprise-dice{
  /* slimmer dice to match the smaller pill */
  width:14px;height:14px;color:#F0DDB3;
  animation:v2DiceRoll 3s ease-in-out infinite;
}
@keyframes v2DiceRoll{0%,80%,100%{transform:rotate(0);}85%{transform:rotate(180deg);}90%{transform:rotate(120deg);}95%{transform:rotate(220deg);}}
.v2-surprise-trigger.v3::before,
.v2-surprise-trigger.v3::after{content:"";position:absolute;border-radius:50%;}
.v2-surprise-trigger.v3::before{top:6px;right:10px;width:4px;height:4px;background:#F0DDB3;opacity:.7;}
.v2-surprise-trigger.v3::after{bottom:6px;left:12px;width:4px;height:4px;background:#E879A6;opacity:.6;}
/* The legacy shimmer span is unused on .v3 — hide it if it sneaks back. */
.v2-surprise-trigger.v3 .v2-surprise-shimmer{display:none;}

/* Override the old card chrome — clean white, deep shadow, animated entrance. */
.v2-surprise-overlay{padding:20px;}
.v2-surprise-card.v2-ss-modal{
  position:relative;
  width:100%;max-width:420px;
  background:#fff;border-radius:28px;overflow:hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 28px 60px -10px rgba(0,0,0,.45),
    0 0 0 1px rgba(20,16,68,.04);
  /* `forwards` is critical: without it, the animation ends and the
     modal snaps back to the legacy .v2-surprise-card static rule
     (scale .85), making it appear to shrink ~0.5s after open.
     Holding the end state keeps the modal at scale 1. */
  animation:v2SsModalIn .5s cubic-bezier(.34,1.56,.64,1) forwards;
  /* Belt + braces: also pin the static transform so any other reset
     paths (e.g. the legacy .v2-surprise-card initial transform) can't
     snap us back to a smaller scale once the animation ends. */
  transform:translateY(0) scale(1);
  /* Kill the legacy gold/cream eye + tall art block + body padding by
     making the inner pieces unused — we render a fresh DOM. */
}
@keyframes v2SsModalIn{0%{opacity:0;transform:translateY(40px) scale(.92);}100%{opacity:1;transform:translateY(0) scale(1);}}

/* Header strip */
.v2-ss-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 14px 10px 18px;
}
.v2-ss-eye{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#8B6914;
  background:none;padding:0;
}
.v2-ss-eye .v2-ss-star{
  width:14px;height:14px;color:#8B6914;display:inline-block;
  animation:v2SsHeadStar 2.4s ease-in-out infinite;
}
@keyframes v2SsHeadStar{0%,100%{transform:rotate(0) scale(1);}50%{transform:rotate(20deg) scale(1.15);}}
.v2-ss-close{
  appearance:none;border:none;cursor:pointer;
  width:32px;height:32px;border-radius:50px;
  background:rgba(20,16,68,.06);color:#3D3E5C;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;white-space:nowrap;flex-shrink:0;
  transition:background .5s cubic-bezier(.34,1.2,.64,1),color .5s cubic-bezier(.34,1.2,.64,1),width .5s cubic-bezier(.34,1.2,.64,1),padding .5s cubic-bezier(.34,1.2,.64,1),gap .5s cubic-bezier(.34,1.2,.64,1);
}
.v2-ss-close svg{width:13px;height:13px;flex-shrink:0;transition:transform .5s cubic-bezier(.34,1.2,.64,1);}
.v2-ss-close-lbl{
  display:inline-block;font-size:11px;font-weight:650;letter-spacing:.02em;
  max-width:0;opacity:0;overflow:hidden;
  transition:max-width .5s cubic-bezier(.34,1.2,.64,1),opacity .2s .15s;
}
@media(hover:hover) and (pointer:fine){
  .v2-ss-close:hover{
    background:var(--navy);color:var(--cream);
    width:auto;padding:0 11px 0 9px;gap:5px;
  }
  .v2-ss-close:hover svg{transform:rotate(360deg);}
  .v2-ss-close:hover .v2-ss-close-lbl{max-width:110px;opacity:1;}
}

/* Photo frame (the hero) */
.v2-ss-photo-frame{
  position:relative;
  margin:0 18px;
  aspect-ratio:4/3;
  border-radius:22px;overflow:hidden;
  background:#0F0E47;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 22px 44px -10px rgba(20,16,68,.45),
    0 0 0 1.5px rgba(200,169,110,.32);
  isolation:isolate;
}
.v2-ss-photo-strip{
  position:absolute;top:0;left:0;right:0;
  display:flex;flex-direction:column;
  transition:transform 2.6s cubic-bezier(.18,.85,.18,1);
}
.v2-ss-photo-row{
  position:relative;
  width:100%;
  aspect-ratio:4/3;flex-shrink:0;
  background-size:cover;background-position:center;
}
.v2-ss-photo-row::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(15,14,71,.35));
}
.v2-ss-photo-frame.spinning .v2-ss-photo-strip{filter:blur(1px);}
.v2-ss-photo-frame::before,
.v2-ss-photo-frame::after{
  content:"";position:absolute;left:0;right:0;height:30px;z-index:3;pointer-events:none;
}
.v2-ss-photo-frame::before{top:0;background:linear-gradient(180deg,rgba(15,14,71,.6),transparent);}
.v2-ss-photo-frame::after{bottom:0;background:linear-gradient(0deg,rgba(15,14,71,.5),transparent);}

/* "FOR YOU" gold pill — animates in when reel stops */
.v2-ss-badge{
  position:absolute;top:10px;left:10px;z-index:6;
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:99px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8B6914;
  opacity:0;transform:translateY(-4px) scale(.9);
  transition:opacity .35s cubic-bezier(.22,.8,.36,1),transform .35s cubic-bezier(.34,1.56,.64,1);
}
.v2-ss-badge svg{width:10px;height:10px;}
.v2-ss-photo-frame.stopped .v2-ss-badge{opacity:1;transform:translateY(0) scale(1);}

/* Info block */
.v2-ss-info{
  padding:18px 22px 4px;text-align:left;
  opacity:0;transform:translateY(8px);
  transition:opacity .35s .15s cubic-bezier(.22,.8,.36,1),transform .45s .1s cubic-bezier(.34,1.56,.64,1);
}
.v2-ss-modal.is-stopped .v2-ss-info{opacity:1;transform:translateY(0);}
.v2-ss-cat-pill{
  display:inline-flex;align-items:center;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#8B6914;padding:3px 10px;border-radius:99px;
  background:rgba(200,169,110,.16);
  margin-bottom:8px;
}
.v2-ss-modal.is-spinning .v2-ss-cat-pill{visibility:hidden;}
.v2-ss-name-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
}
.v2-ss-name{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:22px;font-weight:900;letter-spacing:-.025em;color:var(--navy);
  text-transform:lowercase;line-height:1.1;flex:1;min-width:0;
}
.v2-ss-price{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:21px;font-weight:900;color:var(--navy);
  font-variant-numeric:tabular-nums;letter-spacing:-.022em;flex-shrink:0;
}
.v2-ss-meta{
  font-size:13.5px;color:var(--muted);font-weight:500;line-height:1.45;margin-top:6px;
}
/* During spin — info dim + shimmer skeleton */
.v2-ss-modal.is-spinning .v2-ss-info{opacity:.35;}
.v2-ss-modal.is-spinning .v2-ss-name,
.v2-ss-modal.is-spinning .v2-ss-meta,
.v2-ss-modal.is-spinning .v2-ss-price{
  background:linear-gradient(90deg,rgba(20,16,68,.06) 30%,rgba(20,16,68,.12) 50%,rgba(20,16,68,.06) 70%);
  background-size:200% 100%;
  color:transparent !important;
  border-radius:6px;
  animation:v2SsShimmerLoad 1.4s linear infinite;
}
@keyframes v2SsShimmerLoad{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* Footer */
.v2-ss-foot{
  padding:14px 18px 18px;
  display:flex;gap:8px;align-items:center;
}
.v2-ss-shuffle{
  appearance:none;border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:46px;padding:0 18px;border-radius:99px;
  background:rgba(20,16,68,.06);color:#3D3E5C;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;font-size:13.5px;letter-spacing:-.012em;text-transform:lowercase;
  transition:background .15s,color .15s,transform .15s cubic-bezier(.34,1.56,.64,1);
  flex:0 0 auto;
}
.v2-ss-shuffle:hover{background:rgba(20,16,68,.12);color:var(--navy);}

.v2-ss-shuffle svg{width:14px;height:14px;transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.v2-ss-shuffle:hover svg{transform:rotate(-180deg);}
.v2-ss-add{
  appearance:none;border:none;cursor:pointer;
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 22px;border-radius:99px;
  background:var(--navy);color:#fff;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:900;font-size:14.5px;letter-spacing:-.012em;text-transform:lowercase;
  box-shadow:0 6px 18px -4px rgba(20,16,68,.42);
  transition:transform .15s cubic-bezier(.34,1.56,.64,1),background .2s,box-shadow .2s;
  position:relative;overflow:hidden;
}
.v2-ss-add::before{
  content:"";position:absolute;top:0;left:-30%;height:100%;width:35%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.25) 50%,transparent 100%);
  pointer-events:none;
  animation:v2SsBtnSweep 3s ease-in-out infinite;
}
@keyframes v2SsBtnSweep{0%{transform:translateX(-30%) skewX(-18deg);}60%,100%{transform:translateX(420%) skewX(-18deg);}}
.v2-ss-add:hover{background:var(--accent);transform:translateY(-1px);box-shadow:0 12px 26px -4px rgba(20,16,68,.5);}

.v2-ss-add svg{width:16px;height:16px;}

/* Confetti — fires inside the modal on STOP */
.v2-surprise-card.v2-ss-modal .confetti{
  position:absolute;inset:0;pointer-events:none;z-index:40;overflow:hidden;border-radius:inherit;
}
.v2-surprise-card.v2-ss-modal .confetti i{
  position:absolute;width:9px;height:14px;border-radius:2px;
  animation:v2SsConfettiFly 1.6s cubic-bezier(.18,.65,.4,1) forwards;
}
@keyframes v2SsConfettiFly{
  0%{transform:translate(0,0) rotate(0);opacity:1;}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot,540deg));opacity:0;}
}

/* Hide legacy classes when the new modal is in use, in case any are
   referenced by older fragments. The new card's own children replace
   them, but defending against stale CSS clashes keeps the layout clean. */
.v2-surprise-card.v2-ss-modal .v2-surprise-eye,
.v2-surprise-card.v2-ss-modal .v2-surprise-art,
.v2-surprise-card.v2-ss-modal .v2-surprise-body,
.v2-surprise-card.v2-ss-modal > .v2-surprise-name,
.v2-surprise-card.v2-ss-modal > .v2-surprise-meta,
.v2-surprise-card.v2-ss-modal > .v2-surprise-foot,
.v2-surprise-card.v2-ss-modal > .v2-surprise-price,
.v2-surprise-card.v2-ss-modal > .v2-surprise-shuffle,
.v2-surprise-card.v2-ss-modal > .v2-surprise-add{display:none;}

@media (prefers-reduced-motion: reduce){
  .v2-ss-modal,.v2-ss-photo-strip,.v2-ss-info,.v2-ss-shuffle svg,.v2-ss-add::before,.v2-surprise-card.v2-ss-modal .confetti i,.v2-ss-eye .v2-ss-star,.v2-ss-add{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ════════════════════════════════════════════════════════════════════
   Wave 3 — orbit on round-out-your-order, mobile category rails for
   see-all, glassy corner rating-pill, chip-style macro row.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Round-out-your-order: mobile orbit-carousel ────────────────
   Mirrors the .pr-grid (for-you) mobile orbit. Non-active cards pull
   back with a perspective rotateY; the centered card lifts to scale 1
   with a richer shadow. Desktop grid layout untouched. */
@media(max-width:780px){
  .v2-more-row{
    perspective:900px;
    align-items:flex-start;
  }
  .v2-more-row > .v2-more-card{
    transform-origin:center center;
    transform:scale(.92) rotateY(0deg);
    transition:transform .35s cubic-bezier(.22,.8,.36,1),
               box-shadow .35s cubic-bezier(.22,.8,.36,1);
    will-change:transform;
  }
  .v2-more-row > .v2-more-card.is-front{
    transform:scale(1) rotateY(0deg);
    box-shadow:0 18px 36px -10px rgba(27,26,107,.22);
  }
  .v2-more-row > .v2-more-card.is-side-l{
    transform:scale(.88) rotateY(14deg) translateZ(-30px);
  }
  .v2-more-row > .v2-more-card.is-side-r{
    transform:scale(.88) rotateY(-14deg) translateZ(-30px);
  }
}

/* ── 2. See-everything mobile category rails ───────────────────────
   Desktop keeps the existing .v2-see-all-grid (one flat grid).
   Mobile (≤780px) shows the per-category horizontal rails sibling
   (#v2SeeAllRails) and hides the grid. Same UNCURATED data — just
   bucketed by menuCategory so an endless vertical scroll becomes a
   short list of tappable rails. */
.v2-sa-rails{display:none;}
@media(max-width:780px){
  .v2-see-all-grid{display:none !important;}
  .v2-sa-rails{
    display:block;
    margin:6px -16px 24px;
  }
  .v2-sa-cat{margin:18px 0 4px;}
  .v2-sa-cat-h{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:14px;font-weight:900;letter-spacing:-.01em;
    color:var(--navy);text-transform:lowercase;
    margin:0 16px 8px;display:flex;align-items:baseline;gap:8px;
  }
  .v2-sa-cat-ct{
    font-size:11px;font-weight:700;color:var(--muted);
    letter-spacing:.02em;
  }
  .v2-sa-cat-rail{
    display:flex;flex-direction:row;gap:12px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:4px 16px 8px;
  }
  .v2-sa-cat-rail::-webkit-scrollbar{display:none;}
  .v2-sa-cat-rail > .tc-card{
    flex:0 0 220px;max-width:240px;
    scroll-snap-align:start;
  }
  /* Inside the rails, mirror the see-all-grid card chrome (no tags/CTA
     label/stripe etc). The corner rating-pill + macros stay visible. */
  .v2-sa-cat-rail .tc-card-tags,
  .v2-sa-cat-rail .tc-card-cta-frame,
  .v2-sa-cat-rail .tc-card-cta-label,
  .v2-sa-cat-rail .tc-card-stripe,
  .v2-sa-cat-rail .tc-card-rating,
  .v2-sa-cat-rail .tc-card-badge,
  .v2-sa-cat-rail .tc-card-cat,
  .v2-sa-cat-rail .tc-card-hint{display:none !important;}
  .v2-sa-cat-rail .tc-card{border:none !important;}
  .v2-sa-cat-rail .tc-card-name{font-size:15px;font-weight:800;line-height:1.15;}
  .v2-sa-cat-rail .tc-card-body{padding:10px 12px 12px;gap:6px;}
  .v2-sa-cat-rail .tc-card-cta-wrap{padding-top:0;}
  .v2-sa-cat-rail .tc-card-cta{
    background:transparent;color:var(--text);box-shadow:none;
    padding:0;justify-content:flex-start;pointer-events:none;
  }
  .v2-sa-cat-rail .tc-card-cta-price{font-size:13.5px;color:var(--text);}
}

/* ── 3. Card upgrades — glassy corner rating-pill + chip-style macros
   New top-right corner pill. The legacy .tc-card-rating inside the
   overlay is still emitted (empty) for back-compat; the visible pill
   lives in .tc-card-img directly. */
.tc-card-rating-pill{
  position:absolute;top:10px;right:10px;z-index:3;
  display:inline-flex;align-items:center;gap:4px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:11.5px;font-weight:800;letter-spacing:-.01em;
  color:var(--navy,#1B1A6B);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px) saturate(180%);
  -webkit-backdrop-filter:blur(10px) saturate(180%);
  padding:4px 9px;border-radius:99px;
  box-shadow:0 2px 10px rgba(20,16,68,.18),inset 0 1px 0 rgba(255,255,255,.85);
  pointer-events:none;
}
.tc-card-rating-pill .tc-star{color:#E8B547;font-size:11px;}
@media(max-width:720px){
  .tc-card-rating-pill{font-size:10.5px;padding:3px 7px;top:8px;right:8px;}
  .tc-card-rating-pill .tc-star{font-size:10px;}
}

/* Macros chip row — every chip on its own pill, tabular nums, compact.
   Protein chip is bolder + tinted with the brand gold so it reads as
   the headline number (tandoco's whole positioning is "protein-first"). */
.tc-card-macros{
  display:flex;flex-wrap:wrap;gap:4px;align-items:center;
  font-size:11px;line-height:1.15;overflow:visible;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
}
.tc-card-macro{
  display:inline-flex;align-items:baseline;gap:3px;
  white-space:nowrap;
  background:rgba(20,16,68,.05);
  border-radius:6px;
  padding:3px 7px;
  margin:0;
  border:1px solid transparent;
}
.tc-card-macro + .tc-card-macro{margin-left:0;}
.tc-card-macro + .tc-card-macro::before{content:none;margin:0;}
.tc-card-macro-val{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  color:var(--navy,#1B1A6B);letter-spacing:-.01em;font-size:11.5px;
}
.tc-card-macro-val .tc-u{font-size:9.5px;font-weight:700;color:var(--muted,#6B6B7B);margin-left:1px;}
.tc-card-macro-lbl{font-size:10px;font-weight:600;color:var(--muted,#6B6B7B);text-transform:lowercase;}
.tc-card-macro.is-emph{
  background:linear-gradient(135deg,rgba(200,169,110,.18),rgba(232,200,122,.10));
  border-color:rgba(200,169,110,.35);
}
.tc-card-macro.is-emph .tc-card-macro-val{color:#8B6914;font-weight:900;}
.tc-card-macro.is-emph .tc-card-macro-lbl{color:#8B6914;font-weight:700;opacity:.85;}
@media(max-width:720px){
  .tc-card-macros{gap:3px;font-size:10.5px;}
  .tc-card-macro{padding:2px 6px;border-radius:5px;}
  .tc-card-macro-val{font-size:11px;}
  .tc-card-macro-lbl{font-size:9.5px;}
}