/* ════════════════════════════════════════════════════════════════
   store desktop polish — extracted from the inline critical CSS
   in store.html to keep the raw inline payload under the 202 KB
   budget (see scripts/check-store-budget.js).

   Mobile is the canonical layout. This file ONLY adds rules at
   ≥1280px, so phones and tablets never download it on the critical
   path (it's preload+swap from the shell so it arrives in parallel
   with the LCP image and applies non-blocking).

   Strategy: a single max-width container (--v2-col:1200px) is
   applied via per-section margin:auto + max-width. The page body
   stays full-bleed so backgrounds (chip strip, bundles' gold wash)
   still extend edge-to-edge, but the content inside each section
   sits inside the centered column.
   ──────────────────────────────────────────────────────────────── */
@media (min-width:1280px){
  :root{
    --v2-col:1200px;          /* max content width */
    --v2-gutter:24px;         /* side padding inside the column */
  }

  /* Section width clamp — keep the section's background full-bleed
     (chip strip wash, bundles gold gradient) but constrain the inner
     content to --v2-col, centered. */
  .v2-hero,
  .v2-coll-head, .v2-coll-row,
  .v2-featured-head, .v2-featured-row,
  .v2-fy-head, .v2-fy-row,
  .v2-bundles-head, .v2-bundles-row,
  .v2-menu-head,
  .v2-grid,
  .v2-pantry-head, .v2-pantry-grid{
    max-width:var(--v2-col);
    margin-left:auto;margin-right:auto;
    padding-left:var(--v2-gutter);padding-right:var(--v2-gutter);
  }

  /* Pantry section is full-bleed (border-top wash); its inner head + grid
     are centered to the 1200px column above, so zero the wrapper's side
     padding to keep them aligned with every other rail's left edge. */
  .v2-pantry{padding-left:0;padding-right:0;}

  /* Chip strip — full-bleed background, content aligned to the centered
     1200px column. The search button is pulled out of the flex flow
     (position:absolute, far-left icon) so the in-flow items start at the
     column's left gutter. The dietary control is the first in-flow item
     (the first option on the left), then the category chips scroll to its
     right. Bar padding pushes the flow to the column's left edge so
     "dietary" lines up with the hero/cards left edge. */
  .v2-chips{
    padding-left:calc((100% - var(--v2-col)) / 2 + var(--v2-gutter));
    padding-right:calc((100% - var(--v2-col)) / 2 + var(--v2-gutter));
  }
  .v2-chips-row{
    max-width:none;
    margin-left:0;margin-right:0;
    padding-left:0;
    padding-right:32px; /* room for the right fade mask */
  }
  .v2-search{
    position:absolute;
    left:var(--v2-gutter);
    top:50%;
    transform:translateY(-50%);
    margin-left:0;
    z-index:2; /* above the chips + dietary so the expanded input is clickable */
  }
  /* When the search input is expanded ([data-search-open="1"]), fade the
     dietary slot + chip pills out so the expanded search has the bar to
     itself. The base inline rules have no opacity transition — add one
     here so the fade is smooth. !important because another cascade rule
     keeps opacity:1; pragmatic given the single-page scope. */
  .v2-chips-row,
  .diet-filter-slot{transition:opacity .18s ease;}
  .v2-chips[data-search-open="1"] .v2-chips-row,
  .v2-chips[data-search-open="1"] .diet-filter-slot{
    opacity:0 !important;
    pointer-events:none;
  }

  /* Dietary control — first option on the left, flowing naturally at the
     column's left edge (no special positioning needed now). The
     active-chips strip stays full-bleed but aligns its chips to the
     column; the dropdown panel drops as a left-aligned card under the
     trigger instead of a full-width sheet. */
  .diet-filter-row{
    padding-left:calc((100% - var(--v2-col)) / 2 + var(--v2-gutter));
    padding-right:calc((100% - var(--v2-col)) / 2 + var(--v2-gutter));
  }
  .diet-filter-panel{
    margin-left:calc((100% - var(--v2-col)) / 2 + var(--v2-gutter));
    margin-right:auto;
    max-width:440px;
  }

  /* Hero — bigger title, no internal top padding. The body's padding-top
     already provides the 8px gap below the chip bar (matching the 8px
     gap above the chip bar — symmetric breathing). If the hero
     re-introduces its own padding-top, the gap below the chip bar
     would grow to (body-pad-bottom-edge − chip-bottom) + hero-pad-top,
     which is the asymmetry that read as "way too much padding". */
  .v2-hero{padding-top:0;padding-bottom:8px;}
  .v2-hero h1{font-size:34px;letter-spacing:-.024em;font-weight:900;}
  .v2-hero p{font-size:15px;margin-top:8px;}

  /* Fulfillment row — full-bleed at mobile; on desktop cap it so the
     "change ›" affordance doesn't drift miles from the icon+label. */
  .v2-hero-control{max-width:640px;}

  /* "this week's picks" featured rail — hidden by default at desktop
     in the inline critical CSS (.v2-featured{display:none}), bring
     it back as a styled horizontal rail. */
  .v2-featured{display:block;background:#fff;padding:18px 0 22px;border-bottom:1px solid var(--line);}
  .v2-featured[data-hide="1"]{display:none;}
  .v2-featured-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:0;padding-bottom:10px;}
  .v2-featured-head h2{margin:0;font-size:22px;font-weight:900;letter-spacing:-.018em;color:var(--ink);}
  .v2-featured-head em{font-style:normal;color:var(--accent);}
  /* Collections heading matches the other rail headings on desktop too. */
  .v2-coll-head h2{margin:0;font-size:22px;font-weight:900;letter-spacing:-.018em;color:var(--ink);}
  .v2-coll-head h2 em{font-style:normal;color:var(--accent);}
  .v2-featured-head .v2-featured-sub{display:inline;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
  .v2-featured-row{
    display:flex;gap:14px;
    overflow-x:auto;overflow-y:hidden;
    /* Disable scroll-snap on desktop. With scroll-snap-type:x mandatory
       + first card has scroll-snap-align:start + row padding-left:24,
       the browser auto-scrolls the row by 24px to snap the first card's
       edge to the snap-port left. That pulls the visible first card
       back from x=144 (column inner edge) to x=120 (row outer edge),
       misaligning it from the section headings and hero. Desktop has
       all 4 cards in view at once so snap behavior wasn't useful anyway. */
    scroll-snap-type:none;
    padding-top:4px;padding-bottom:4px;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .v2-featured-row::-webkit-scrollbar{display:none;}
  .v2-feat-card{flex:0 0 calc((100% - 42px) / 4); /* 4 cards per row, 14px gap × 3 */ max-width:none;scroll-snap-align:start;}
  .v2-feat-thumb{aspect-ratio:1/1 !important;}

  /* For-you rail — cap cards so 3-4 fit per row instead of one
     huge card stretching the column. Specificity bump (.v2-fy-row > …)
     wins over the lower-specificity base rule injected by
     /scripts/foryou.js at runtime. Without the parent selector, the
     cascade tie goes to foryou.js (later in document order via runtime
     <style> append) and the cards stay at mobile flex:0 0 88% width. */
  /* IMPORTANT — keep left/right gutter padding from the shared
     "Section width clamp" rule above (padding-left:var(--v2-gutter)).
     The original `padding:18px 0 8px` shorthand zero'd those out,
     causing the h2 to sit 24px left of where every other section's
     content starts. Explicit padding-top/padding-bottom only. */
  .v2-fy-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:18px;padding-bottom:8px;}
  .v2-fy-head h2{margin:0;font-size:22px;font-weight:900;letter-spacing:-.018em;color:var(--ink);}
  .v2-fy-head em{font-style:normal;color:var(--accent);}
  .v2-fy-sub{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
  .v2-fy-row{
    display:flex;gap:14px;
    overflow-x:auto;
    padding-top:2px;padding-bottom:14px;
    scrollbar-width:none;-ms-overflow-style:none;
    min-height:108px;
  }
  .v2-fy-row::-webkit-scrollbar{display:none;}
  .v2-fy-row .v2-fy-card,
  .v2-fy-row .v2-fy-skel{flex:0 0 calc((100% - 28px) / 3); /* 3 per row, 14px gap × 2 */ max-width:none;}

  /* Bundles — currently has NO desktop CSS (all .is-phone-prefixed
     in bundles.js), so the row falls back to block display with one
     card stranded on the left. Wire it as a 3-up grid here.
     Specificity-bumped via `.v2-bundles-row` parent — same reason
     as .v2-fy-card above. */
  .v2-bundles{background:linear-gradient(160deg,#FAF6EC 0%,#F4EFE3 55%,#E9DDC4 100%);border-top:1px solid rgba(200,169,110,.30);border-bottom:1px solid rgba(200,169,110,.30);padding:6px 0 22px;}
  /* Same gutter-preserving fix as .v2-fy-head. */
  .v2-bundles-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:18px;padding-bottom:10px;}
  .v2-bundles-head h2{margin:0;font-size:22px;font-weight:900;letter-spacing:-.018em;color:var(--ink);}
  .v2-bundles-head em{font-style:normal;color:var(--accent);}
  .v2-bundles-sub{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
  .v2-bundles-row{
    display:flex;gap:14px;
    overflow-x:auto;
    padding-top:4px;padding-bottom:6px;
    scrollbar-width:none;-ms-overflow-style:none;
    /* Same scroll-snap disable as .v2-featured-row above — keeps the
       first bundle card aligned to the column inner edge. */
    scroll-snap-type:none;
  }
  .v2-bundles-row::-webkit-scrollbar{display:none;}
  .v2-bundles-row .v2-bundle-card{flex:0 0 calc((100% - 28px) / 3); /* 3 per row */ max-width:none;scroll-snap-align:start;}

  /* Collections rail — the ONE rail that shipped without a desktop pass.
     Its head kept the 15px/brand phone styling (so the "collections."
     title read smaller + a different color than every sibling head), and
     its cards kept the fixed 188–214px phone width — which left the row
     well short of the column's right edge, so the shelf looked narrower /
     misaligned next to bundles + top-picks. Bring it in line: head matches
     the featured/bundles heads (22px/900/ink, accent em, same gutter +
     vertical padding), and the cards fill the 1200px column 4-up (any 5th+
     collection scrolls, with the next card peeking). Mirrors the
     .v2-bundles-row card-sizing pattern above. */
  .v2-coll{padding:6px 0 22px;}
  .v2-coll-head{padding-top:18px;padding-bottom:10px;}
  .v2-coll-head h2{font-size:22px;font-weight:900;letter-spacing:-.018em;color:var(--ink);}
  .v2-coll-head h2 em{color:var(--accent);}
  .v2-coll-sub{display:inline;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
  .v2-coll-row{
    scroll-snap-type:none; /* same reason as .v2-featured-row — keep first card flush to the column edge */
    padding-top:4px;padding-bottom:6px;
  }
  .v2-coll-row .v2-coll-card{flex:0 0 calc((100% - 36px) / 4); /* 4 per row, 12px gap × 3 */ width:auto;height:260px;}

  /* Section header — match the rail head sizing. Same gutter-preserving
     fix as .v2-fy-head. */
  .v2-menu-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:24px;padding-bottom:10px;}
  .v2-menu-head h2{margin:0;font-size:22px;font-weight:900;letter-spacing:-.018em;color:var(--ink);}
  .v2-menu-head em{font-style:normal;color:var(--accent);}
  .v2-menu-sub{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}

  /* Main grid — already 4-col at 1280; constrain the column and add
     a touch more gap. The base `.v2-grid` rule uses fluid 1fr columns,
     so constraining the container is enough to right-size the cards
     (no need to redefine grid-template-columns). */
  .v2-grid{gap:18px;padding-top:6px;padding-bottom:96px;}

  /* Card macros — match the mobile reference exactly: inline
     label-value pairs side by side ("P 40g  C 10g  F 10g  Cal 500"),
     NOT stacked. Each .v2-macro-col is flex-direction:row with the
     label and value on the same baseline. Labels are sentence-case
     (not UPPERCASE) and slightly muted; values are bold dark ink.
     Mirrors .is-phone .v2-card-macros from the inline shell. */
  .v2-card-macros,
  .v2-feat-macros{
    gap:12px;
    margin-top:4px;
    flex-wrap:nowrap;
  }
  .v2-card-macros .v2-macro-col,
  .v2-feat-macros .v2-macro-col{
    flex-direction:row;
    align-items:baseline;
    gap:4px;
  }
  /* Mobile macro colors/weights as reference (from inline shell):
       label: weight 700, color #B4B6C5
       value: weight 700, color #8084A0
     Desktop matches the same dimmed treatment so the macros read as a
     soft secondary line, not a bold primary one. Sizes are slightly
     bumped (8px→10px label, 10px→13px value) since desktop cards are
     wider — visual weight stays consistent with mobile despite the
     bigger size. */
  .v2-card-macros .v2-macro-lbl,
  .v2-feat-macros .v2-macro-lbl{
    font-size:10px;
    color:#B4B6C5;
    font-weight:700;
    letter-spacing:.02em;
    text-transform:none;
  }
  .v2-card-macros .v2-macro-val,
  .v2-feat-macros .v2-macro-val{
    font-size:13px;
    color:#8084A0;
    font-weight:700;
  }

  /* Sticky checkout pill — constrain to the column so it doesn't
     span 1920px on big monitors. Keep position:fixed; just clamp
     width and recenter horizontally.

     IMPORTANT — combined translate. The base .v2-pill rule uses
     transform:translateY(120%) for the hidden state and
     transform:translateY(0) for [data-on="1"] (the slide-up
     entrance). If we only set translateX(-50%) here, the
     [data-on="1"] rule replaces our transform entirely and the
     pill un-centers when it becomes visible. Combine both axes
     in a single transform so the show animation preserves
     horizontal centering. */
  /* Pill width: size to content but with a min-width so the three
     chunks (count/total · tier nudge · checkout) have room to breathe
     instead of crowding each other. Min 640 / max 760 at desktop.
     Height bumped 56 → 64 for vertical breathing room. */
  .v2-pill{
    left:50%;right:auto;
    transform:translate(-50%, 120%);
    width:auto;
    min-width:min(640px, calc(100vw - 32px));
    max-width:min(760px, calc(100vw - 32px));
    height:64px;
    border-radius:36px;
    padding:0 10px 0 28px;
    gap:16px;
  }
  .v2-pill[data-on="1"]{transform:translate(-50%, 0);}

  /* Tier-nudge chunk inside the pill — fills the space between the
     count/total and the checkout button. Desktop-only (@media
     min-width:1280px wraps it). White-on-navy. */
  .v2-pill-tier{
    /* Two-line stack: current rate on top, next-tier nudge below.
       Vertical flex column with the dot separator hidden. */
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    flex:1 1 auto;
    text-align:center;
    color:rgba(255,255,255,.78);
    font-size:11.5px;font-weight:600;letter-spacing:-.005em;
    line-height:1.15;
    padding:0 14px;
    min-width:0;
    white-space:nowrap;overflow:hidden;
    pointer-events:none;
  }
  /* Re-color the nested tier-text spans so they're visible against navy. */
  .v2-pill-tier .v2-hero-tier-cur{color:rgba(255,255,255,.72);font-weight:700;}
  /* Hide the inline separator in the stacked layout — the two lines
     are visually paired by proximity, no dot needed. */
  .v2-pill-tier .v2-hero-tier-sep{display:none;}
  .v2-pill-tier .v2-hero-tier-next{color:#fff;font-weight:700;font-size:11.5px;}
  .v2-pill-tier .v2-hero-tier-next b{color:#E8C87A;font-weight:900;}
  .v2-pill-tier .v2-hero-tier-arrow{color:#E8C87A;font-weight:900;}

  /* Nav-hide on scroll-down — on desktop the VISIBLE nav is actually
     `.nav-desktop` (the 60px cream editorial bar created by
     /scripts/nav-drawer.js at ≥960px). The floating pill `.nav` is
     hidden via `display:none` on desktop. /scripts/nav-drawer.js
     adds `.hidden` to `#mainNav` (=.nav) on scroll-down at every
     viewport, but the matching translate rule lives only inside
     @media(max-width:720px), so on desktop the class flips with no
     visual effect.

     Piggyback on the existing class-toggle: use the body:has
     selector to translate `.nav-desktop` off-screen whenever
     `#mainNav.hidden` is set. When the nav slides off, the chip
     bar simultaneously slides up to top:0 (the page's existing
     inline `body:has(#mainNav.hidden) .v2-chips{top:0}` rule
     handles this — no override needed) so the filter strip
     glues to the top of the viewport, filling the space the nav
     just vacated. */
  body:has(#mainNav.hidden) .nav-desktop{
    transform:translateY(-100%);
    transition:transform .25s cubic-bezier(.22,1,.36,1);
  }
  .nav-desktop{transition:transform .25s cubic-bezier(.22,1,.36,1);}

  /* Chip filter bar — flush against the .nav-desktop bar above
     AND flush against the hero below. Both 0px gaps so no body
     background leaks through. When the nav slides off-screen
     (body:has(#mainNav.hidden)), the page's inline rule animates
     the chip to top:safe-area-top — i.e. glued to the top of the
     viewport.
     Slim internal chip-row vertical padding (5/5) so the bar
     reads as a filter strip, not a hero band. Fully opaque
     background so page content scrolling behind it can't show
     through. */
  .v2-chips{
    top:calc(60px + env(safe-area-inset-top, 0px));
    background:rgba(248,249,255,.985);
  }
  .v2-chips-row{padding-top:5px;padding-bottom:5px;}

  /* Body padding-top — chip-top 60 + chip-bar height ~53 =
     chip-bottom 113. No gap below the bar either; the hero's own
     line-height + the body-level zero gap mean the h1 sits flush
     under the chip bar with no empty body background showing. */
  body{padding-top:calc(113px + env(safe-area-inset-top, 0px));}
}

/* Mid-range nudge — 1280-1439 viewports get a slightly narrower
   column so the page doesn't feel too sparse on a 13-inch laptop. */
@media (min-width:1280px) and (max-width:1439px){
  :root{--v2-col:1120px;}
  .v2-grid{gap:14px;}
}

/* Very-wide nudge — keep the column at 1200 (don't grow). At 1920+,
   the gutters carry the eye and the cards stay at a comfortable size.
   Also bump grid to 5 columns since 4 × ~280 leaves room. */
@media (min-width:1680px){
  .v2-grid{grid-template-columns:repeat(5,1fr);}
  .v2-feat-card{flex:0 0 calc((100% - 56px) / 5); /* 5 cards per row */}
  .v2-bundles-row .v2-bundle-card{flex:0 0 calc((100% - 42px) / 4); /* 4 bundle cards on big screens */}
  .v2-fy-row .v2-fy-card,.v2-fy-row .v2-fy-skel{flex:0 0 calc((100% - 42px) / 4); /* 4 fy cards */}
}