/* Site shell: header, mega menu, dropdowns, search overlay, phone drawer, footer.
   Every value is a design-spec measurement of utzsnacks.com
   (docs/design-spec.md §3–§7, §12, Appendix A) through the tokens in /tokens.css. The few
   component sizes tokens.css has no variable for are named once below (--sh-*), each with
   the spec section it comes from. Hover effects only under (hover: hover) and
   (pointer: fine); all motion goes through the duration tokens, which are 0 under
   prefers-reduced-motion (plus the explicit animation/transform resets at the bottom). */

:root {
  --sh-dur-nav: calc(var(--dur-fast) * 1.25);   /* 250 ms: row 2 hide/show (§3.3) */
  --sh-dur-zoom: calc(var(--dur-slow) * 1.4);   /* 700 ms: tile image zoom (§4.3) */
  --sh-burger-delay: calc(var(--dur-fast) * 1.1); /* 220 ms (§7.1) */
  --sh-search-w: 684px;      /* §3.1 search wrapper (field 600 = 684 - 2 x 42 inset) */
  --sh-search-inset: 42px;   /* §3.1 */
  --sh-field-pad-l: 24px;    /* §3.1 field padding 0 50 0 24 */
  --sh-field-pad-r: 50px;
  --sh-icon: 24px;           /* header icon buttons (24 x 24 glyphs) */
  --sh-hit: 44px;            /* A11Y: 44 px hit area around the 24 px glyphs */
  --sh-close-w: 32px;        /* §3.1 search ✕ box: 12 px padding + 20 px glyph */
  --sh-close-icon: 20px;
  --sh-caret: 12px;          /* §3.2 nav caret; §7.2 drawer chevron */
  --sh-arrow: 16px;          /* §4.2 group chevron; §7.3 back chevron; accordion signs */
  --sh-logo-h: 52px;         /* our horizontal logo's height inside Utz's 120 px logo box */
  --sh-logo-h-tablet: 60px;  /* … inside the 120 px box at 768-1023 (Utz's mascot fills it) */
  --sh-logo-h-phone: 40px;   /* … inside the 65 px phone box */
  --sh-groups-w: 240px;      /* §4.2 mega group column */
  --sh-group-h: 50px;        /* §4.2 group row */
  --sh-drop-w: 250px;        /* §5 dropdown */
  --sh-drop-row: 32px;       /* §5 dropdown link row */
  --sh-others-w: 350px;      /* §6.1 search right column (>= 1024) */
  --sh-others-w-tablet: 250px;
  --sh-strip-card: 163.8px;  /* §6.2 phone search strip card */
  --sh-drawer-w: 500px;      /* §7.2 drawer width at 768-1023 */
  --sh-drawer-row: 49.6px;   /* §7.2 */
  --sh-footer-col: 256px;    /* §12 footer column */
  --sh-footer-logo-h: 40px;  /* footer wordmark height (our addition; Utz has payment icons there) */
  --sh-az-btn: 32px;         /* §9.10 pagination circle, reused for the A–Z letters */
  /* A11Y: Utz's search pill has no edge (#EDEDED on white is 1.2:1). A 1 px edge mixed from the
     text and surface tokens (#8A8A8A, 3.5:1 on white) marks the field; focus is a 2 px ring. */
  --sh-field-edge: color-mix(in srgb, var(--color-text) 46%, var(--color-surface));
  --sh-field-focus: 0 0 0 2px var(--color-border-strong);
  --sh-row1-bottom: var(--header-row1-h);
  --sh-header-bottom: var(--header-h);
}

/* ---------- sliding 1 px underline (Appendix A.2), used by nav, dropdown, suggestions, footer ---------- */
.sh-u {
  background: linear-gradient(currentColor, currentColor) no-repeat right bottom / 0 1px;
  transition: background-size var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  a:hover > .sh-u, button:hover > .sh-u { background-size: 100% 1px; background-position: left bottom; }
}

/* =====================================================================================
   HEADER
   ===================================================================================== */
/* Sticky wrapper. Its own box is see-through and click-through (row 2 slides away under row 1
   when pinned, leaving that strip to the page); the rows take pointer events back. */
#site-header.sh { position: sticky; top: 0; z-index: var(--z-header); pointer-events: none; }
.sh-row1, .sh-nav { pointer-events: auto; }

.sh-row1 {
  position: relative; z-index: 2; background: var(--color-surface);
  transition: box-shadow var(--dur-base) var(--ease-sticky);
}
.sh.is-pinned .sh-row1 { box-shadow: var(--shadow-md); }
.sh.is-pinned.is-nav-shown .sh-row1 { box-shadow: none; }
/* Searching (desktop): a hairline under row 1, as the field takes focus (search-focus-1440). */
.sh.is-searching .sh-row1 { box-shadow: 0 1px 0 var(--color-border); }

.sh-row1__inner {
  display: grid; grid-template-columns: auto var(--sh-search-w) 1fr; align-items: center;
  column-gap: var(--space-3); height: var(--header-row1-h); padding-inline: var(--gutter);
}

/* Brand cell: hamburger (hidden on desktop until pinned) + logo. */
.sh-brand { display: flex; align-items: center; }
.sh-logo { display: flex; align-items: center; height: var(--logo-size); border-radius: var(--radius-sm); }
.sh-logo__img { width: auto; height: var(--sh-logo-h); }
.sh-logo__img { border-radius: var(--radius-sm); }
/* The ring hugs the logo image, not the 120 px logo box (which would run into the nav row). */
.sh-logo:focus-visible { outline: none; }
.sh-logo:focus-visible .sh-logo__img { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.sh-toggle {
  position: relative; display: grid; place-items: center; flex: none;
  width: var(--sh-icon); height: var(--sh-icon); color: var(--color-text);
}
.sh-toggle::after { content: ""; position: absolute; inset: calc((var(--sh-icon) - var(--sh-hit)) / 2); }
.sh-toggle:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-sm); }
/* Three 20 x 2 bars (§7.1); the X is the centre bar at 45°, ::after at -45°, ::before folded in. */
.sh-burger, .sh-burger::before, .sh-burger::after {
  display: block; width: 20px; height: 2px; border-radius: 10px; background: currentColor;
}
.sh-burger { position: relative; transition: transform var(--dur-fast); }
.sh-burger::before, .sh-burger::after {
  content: ""; position: absolute; left: 0;
  transition: top var(--dur-fast) var(--sh-burger-delay), opacity var(--dur-fast), width var(--dur-fast), transform var(--dur-fast);
}
.sh-burger::before { top: -7px; }
.sh-burger::after { top: 7px; }
.sh-toggle.is-x .sh-burger { transform: rotate(45deg); }
.sh-toggle.is-x .sh-burger::before { top: 0; opacity: 0; width: 0; transition: top var(--dur-fast), opacity var(--dur-fast), width var(--dur-fast), transform var(--dur-fast); }
.sh-toggle.is-x .sh-burger::after { top: 0; transform: rotate(-90deg); transition: top var(--dur-fast), opacity var(--dur-fast), width var(--dur-fast), transform var(--dur-fast); }

@media (min-width: 1024px) {
  /* §3.3: the toggle fades in left of the logo once pinned (width/opacity/visibility .3 s). */
  .sh-toggle {
    width: 0; margin-right: 0; opacity: 0; visibility: hidden; overflow: visible;
    transition: width var(--dur-base), margin var(--dur-base), opacity var(--dur-base), visibility var(--dur-base);
  }
  /* Pinned: the box is the 44 px target; the negative margins keep Utz's 24 px + 12 px footprint. */
  .sh.is-pinned .sh-toggle {
    width: var(--sh-hit); height: var(--sh-hit); margin: calc((var(--sh-icon) - var(--sh-hit)) / 2);
    margin-right: calc(var(--space-3) + (var(--sh-icon) - var(--sh-hit)) / 2); opacity: 1; visibility: visible;
  }
  .sh.is-pinned .sh-toggle::after { content: none; }
  .sh.is-pinned .sh-toggle:focus-visible { outline-offset: calc(-1 * var(--space-1)); }
}

/* ---------- search field (§3.1) ---------- */
.sh-search { position: relative; padding-inline: var(--sh-search-inset); }
.sh-search__form { position: relative; display: flex; align-items: center; transition: margin var(--dur-base); }
.sh-search__input {
  width: 100%; height: var(--field-h); margin: 0; padding: 0 var(--sh-field-pad-r) 0 var(--sh-field-pad-l);
  border: 0; border-radius: var(--radius-pill); background: var(--color-field); color: var(--color-text);
  font: var(--fw-body) var(--fs-base) / var(--field-h) var(--font-body); letter-spacing: var(--ls-normal);
  outline: 0; appearance: none; -webkit-appearance: none; box-shadow: inset 0 0 0 1px var(--sh-field-edge);
  transition: background-color var(--dur-base), box-shadow var(--dur-base);
}
.sh-search__input::placeholder { color: var(--color-placeholder); opacity: 1; }
.sh-search__input::-webkit-search-cancel-button, .sh-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
/* Focus = white field with a 2 px black ring (Utz: 1 px; A11Y: 2 px is the focus indicator, so no extra outline). */
.sh-search.is-active .sh-search__input, .sh-search__input:focus { background: var(--color-surface); box-shadow: var(--sh-field-focus); }
.sh-search__input:focus-visible { outline: none; }

.sh-search__submit, .sh-search__clear {
  position: absolute; top: 0; right: var(--space-4); height: var(--field-h);
  display: grid; place-items: center; color: var(--color-text);
}
/* A 44 x 48 box with the 24 px glyph where Utz draws it (16 px in from the field's edge). */
.sh-search__submit { width: var(--sh-hit); right: calc(var(--space-4) + (var(--sh-icon) - var(--sh-hit)) / 2); }
.sh-search__submit .icon { width: var(--sh-icon); height: var(--sh-icon); stroke-width: 2; }
.sh-search__clear {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: capitalize;
  opacity: 0; visibility: hidden; transition: opacity var(--dur-fast), visibility var(--dur-fast);
}
.sh-search.has-text .sh-search__clear { opacity: 1; visibility: visible; }
.sh-search.has-text .sh-search__submit { opacity: 0; visibility: hidden; }
/* Keyboard rings for the field's buttons sit around the glyph or word, inside the 48 px field
   (a ring around the full-height hit box would cross the field's own edge). */
.sh-search__submit:focus-visible, .sh-search__clear:focus-visible, .sh-search__close:focus-visible { outline: none; }
.sh-search__submit:focus-visible .icon, .sh-search__close:focus-visible .icon {
  outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-round);
}
.sh-search__clear::before {
  content: ""; position: absolute; inset: var(--space-2) calc(-1 * var(--space-2)); border-radius: var(--radius-pill);
}
.sh-search__clear:focus-visible::before { outline: var(--focus-ring); }

.sh-search__close {
  position: absolute; top: 50%; left: calc(100% - var(--sh-search-inset)); translate: 0 -50%;
  display: none; place-items: center end; width: var(--sh-close-w); height: var(--sh-hit); padding-left: var(--space-3);
  color: var(--color-text); box-sizing: border-box;
}
.sh-search__close .icon { width: var(--sh-close-icon); height: var(--sh-close-icon); stroke-width: 2.25; transition: transform var(--dur-btn); }
.sh-search.is-active .sh-search__close { display: grid; }
@media (hover: hover) and (pointer: fine) {
  .sh-search__close:hover .icon { transform: rotate(180deg); }
}

/* ---------- row 2: nav (§3.2) ---------- */
.sh-nav {
  position: relative; z-index: 1; height: var(--nav-h); padding-inline: var(--gutter);
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
  transition: transform var(--sh-dur-nav) var(--ease-sticky), visibility 0s, box-shadow var(--dur-base);
}
/* The mega panel draws its own top rule one pixel lower (mega-brands-1440). */
.sh.is-mega-open .sh-nav { border-bottom-color: var(--color-surface); }
.sh.is-pinned .sh-nav { transform: translateY(-100%); visibility: hidden; transition: transform var(--sh-dur-nav) var(--ease-sticky), visibility 0s var(--sh-dur-nav); }
.sh.is-pinned.is-nav-shown .sh-nav { transform: none; visibility: visible; box-shadow: var(--shadow-md); transition: transform var(--sh-dur-nav) var(--ease-sticky), visibility 0s; }
.sh-nav__list { display: flex; height: 100%; margin: 0 calc(-1 * var(--space-4)); padding: 0; list-style: none; }
.sh-nav__item { display: flex; align-items: flex-start; }
.sh-nav__link {
  display: inline-flex; align-items: center; gap: var(--space-2); height: 32px; padding: var(--space-1) var(--space-4);
  color: var(--color-text); font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: var(--lh-base);
  text-decoration: none; white-space: nowrap; border-radius: var(--radius-sm);
}
.sh-nav__link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
/* The ring's top edge runs 5 px above the nav row: lift the row over row 1 while it shows. */
.sh-nav:has(.sh-nav__link:focus-visible) { z-index: 3; }
.sh-caret { width: var(--sh-caret); height: var(--sh-caret); stroke-width: 3; }
/* Open menu and current page keep the underline drawn. */
.sh-nav__item.is-open .sh-u, .sh-nav__item.is-active .sh-u { background-size: 100% 1px; background-position: left bottom; }

/* ---------- below 1024: hamburger · logo · (icons) / full-width search (§3.1, §7.1) ---------- */
@media (max-width: 1023.98px) {
  .sh-row1__inner {
    grid-template-columns: auto 1fr auto; grid-template-areas: "brand . icons" "search search search";
    height: auto; padding: var(--space-4) var(--gutter); row-gap: var(--space-4);
  }
  .sh-brand { grid-area: brand; gap: var(--space-3); }
  .sh-icons { grid-area: icons; }
  .sh-search { grid-area: search; padding-inline: 0; }
  .sh-search.is-active .sh-search__form { margin-right: var(--sh-close-w); }
  .sh-search__close { left: auto; right: 0; }
  .sh-nav { display: none; }
  /* Utz draws a 1 px #E5E5E5 rule under the phone / tablet header (r2 L2); pinned, the shadow takes over. */
  .sh-row1 { box-shadow: 0 1px 0 var(--color-border); }
  .sh.is-pinned .sh-row1 { box-shadow: var(--shadow-md); }
  /* The hamburger's own box is the 44 px tap target; negative margins keep the 24 px footprint (§1.5). */
  .sh-toggle { width: var(--sh-hit); height: var(--sh-hit); margin: calc((var(--sh-icon) - var(--sh-hit)) / 2); }
  .sh-toggle::after { content: none; }
  .sh-toggle:focus-visible { outline-offset: calc(-1 * var(--space-1)); }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .sh-logo__img { height: var(--sh-logo-h-tablet); }
}
@media (max-width: 767.98px) {
  .sh-logo { height: var(--logo-size-phone); }
  .sh-logo__img { height: var(--sh-logo-h-phone); }
}

/* ---------- page dim (Appendix A.5) ---------- */
.sh-dim {
  position: fixed; inset: var(--sh-header-bottom) 0 0 0; z-index: var(--z-overlay);
  background: var(--color-overlay); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-overlay) var(--ease-drawer), visibility 0s var(--dur-overlay);
}
/* Only a dim that is on takes clicks (to close the menu); fading out, the page is live again. */
.sh-dim.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--dur-overlay) var(--ease-drawer), visibility 0s; }

/* =====================================================================================
   MEGA MENU (§4)
   ===================================================================================== */
.sh-mega {
  position: fixed; top: var(--sh-header-bottom); left: 0; right: 0; z-index: var(--z-search);
  background: var(--color-surface); border-top: 1px solid var(--color-border);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-nav), visibility 0s var(--dur-slow);
}
.sh-mega.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-slow) var(--ease-nav), visibility 0s; }
.sh-mega.is-instant { transition: none; }
.sh-mega__inner {
  display: grid; grid-template-columns: var(--sh-groups-w) minmax(0, 1fr); grid-template-rows: auto 1fr;
  max-height: 75vh; padding-inline: var(--gutter); overflow: hidden;
  transition: height var(--dur-slow) var(--ease-nav);
}
.sh-mega.is-instant .sh-mega__inner { transition: none; }
.sh-mega__groups { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; padding-top: var(--space-5); }
.sh-mega__group {
  display: flex; align-items: center; justify-content: space-between; width: 100%; height: var(--sh-group-h);
  padding: var(--space-3); border-radius: var(--radius-sm); color: var(--color-text); text-align: left; text-decoration: none;
  font-size: var(--fs-h6); font-weight: var(--fw-bold); line-height: var(--lh-h4);
  transition: background-color var(--dur-base) var(--ease-fast);
}
.sh-mega__group .icon { width: var(--sh-arrow); height: var(--sh-arrow); stroke-width: 2.25; }
.sh-mega__group[aria-selected="true"] { background: var(--color-field); }
.sh-mega__group:focus-visible { outline: var(--focus-ring); outline-offset: calc(-1 * var(--space-1)); }
.sh-mega__group--link { grid-column: 1; grid-row: 2; align-self: start; margin-bottom: var(--space-8); }
@media (hover: hover) and (pointer: fine) {
  .sh-mega__group--link:hover { background: var(--color-field); }
}
.sh-mega__scroll {
  grid-column: 2; grid-row: 1 / span 2; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin-left: var(--card-gap); margin-right: calc(var(--tile-gap) / -2);
  padding: var(--space-5) calc(var(--tile-gap) / 2) var(--space-8) var(--card-gap);
  border-left: 1px solid var(--color-border); scrollbar-width: thin; position: relative;
  container-type: inline-size;
}
/* Brands A–Z index (our addition for long brand lists; Utz's pagination circles, §9.10). */
.sh-az {
  position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-1);
  margin: 0 0 var(--space-5); padding-bottom: var(--space-3); background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
/* In the mega panel the bar sticks to the very top of the scroll area, its white band covering
   the area's 20 px top padding (tiles scrolled past showed through above the bar). */
.sh-mega__scroll .sh-az {
  top: calc(-1 * var(--space-5)); margin-top: calc(-1 * var(--space-5)); padding-top: var(--space-5);
}
/* Always true circles (a shrinking flex item made ovals); a long index wraps to a second row. */
.sh-az__btn {
  display: grid; place-items: center; flex: none; width: var(--sh-az-btn); height: var(--sh-az-btn); border-radius: var(--radius-round);
  color: var(--color-text); font-size: var(--fs-base); font-weight: var(--fw-body); line-height: 1;
  transition: background-color var(--dur-base) var(--ease-fast);
}
.sh-az__btn.is-current { background: var(--color-field); }
.sh-az__btn:focus-visible { outline: var(--focus-ring); outline-offset: calc(-1 * var(--tile-ring)); }
@media (hover: hover) and (pointer: fine) { .sh-az__btn:hover { background: var(--color-field); } }
/* 1024-1279: the tile area is ~700 px, so 32 px letters 4 px apart wrapped and left the last
   few ("T V W") alone on a second row; 28 px letters 2 px apart keep a typical index on one
   row (still above the 24 px target minimum, WCAG 2.5.8) (r2 L6). */
@media (max-width: 1279.98px) {
  .sh-mega__scroll .sh-az { --sh-az-btn: 28px; gap: 2px; }
}
.sh-mega__tiles {
  display: grid; grid-template-columns: repeat(var(--tile-cols), minmax(0, 1fr)); gap: var(--tile-gap);
  margin: 0; padding: 0; list-style: none;
}
/* Below an 800 px tile area (1024-1150 px windows) 7 columns make 73-90 px rings, too small to
   set a name inside at 12 px or more ("Chocolate Chip Cookie Dough" ran to 5 clipped lines);
   6 columns keep every ring at 90 px or more. (Utz keeps 7 because its rings hold logos.) */
@container (max-width: 799.98px) { .sh-mega__tiles { --tile-cols: 6; } }
/* A 300-brand group: the browser lays out (and base.js fits) only the rows near view, so the
   first open does not force layout of every tile at once. A name tile is exactly as tall as
   it is wide (its label is visually hidden), which gives the skipped rows their true height. */
.sh-mega__tile--word {
  content-visibility: auto;
  contain-intrinsic-block-size: auto calc((100cqi - (var(--tile-cols) - 1) * var(--tile-gap)) / var(--tile-cols));
}
.sh-mega__tiles.is-entering { animation: sh-slide-in var(--dur-slow) var(--ease-nav) both; }
@keyframes sh-slide-in { from { opacity: 0; transform: translateX(10%); } }

/* ---------- tiles (built on base.js roundTile; §4.3 geometry) ---------- */
.sh-tile.cc-tile { width: 100%; gap: var(--space-3); }
.sh-tile .cc-tile__ring {
  position: relative; width: 100%; height: auto; aspect-ratio: 1; container-type: inline-size;
  border: var(--tile-ring) solid var(--color-ring); box-shadow: none; background: var(--color-surface);
}
.sh-tile:hover .cc-tile__ring { box-shadow: none; }
.sh-tile .cc-tile__img, .sh-tile .sh-art {
  width: calc(var(--tile-image-scale) * 100%); height: calc(var(--tile-image-scale) * 100%);
  border-radius: var(--radius-round); object-fit: cover; transition: transform var(--sh-dur-zoom) var(--ease);
}
/* Our artwork is drawn, not photographed: it sits on a light disc the size of Utz's photo. */
.sh-tile--icon .cc-tile__img, .sh-tile--mark .cc-tile__img, .sh-tile .sh-art {
  padding: 7%; background: var(--color-surface-2); object-fit: contain;
}
.sh-tile--mark .cc-tile__img { padding: 16%; }
.sh-tile .sh-art { padding: 9%; }
/* Brand and flavor names: base.css / base.js tileWord, one size per breakpoint. */
.sh-tile .cc-tile__word { transition: transform var(--sh-dur-zoom) var(--ease); }
.sh-tile .cc-tile__label {
  font-size: var(--fs-base); font-weight: var(--fw-body); line-height: var(--lh-base);
  text-underline-offset: .2em; margin-inline: calc(var(--tile-gap) / -4);
}
@media (hover: hover) and (pointer: fine) {
  .sh-tile:hover .cc-tile__img, .sh-tile:hover .sh-art, .sh-tile:hover .cc-tile__word { transform: scale(1.03); }
  .sh-tile:not(.sh-sq):hover .cc-tile__label { text-decoration: underline; }
}
.sh-tile:focus-visible .cc-tile__ring { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
/* Pack artwork colours (same palette as the category icons). */
.sh-art .ink { fill: var(--color-royal); }
.sh-art .accent { fill: var(--color-primary); }
.sh-art .highlight { fill: var(--color-badge); }
.sh-art .paper { fill: var(--color-surface); stroke: var(--color-surface); }

/* =====================================================================================
   DROPDOWNS: Seasonal ▾, About Us ▾ (§5)
   ===================================================================================== */
.sh-drop {
  position: fixed; top: var(--sh-header-bottom); left: var(--sh-drop-x, 0); width: var(--sh-drop-w);
  z-index: var(--z-search); overflow: hidden; visibility: hidden; pointer-events: none;
  transition: visibility 0s var(--dur-drawer);
}
.sh-drop.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.sh-drop__inner {
  padding: var(--space-6) 0; background: var(--color-surface); border-block: 1px solid var(--color-border);
  transform: translateY(-100%); transition: transform var(--dur-drawer) var(--ease-nav);
}
.sh-drop.is-open .sh-drop__inner { transform: none; }
.sh-drop.is-instant, .sh-drop.is-instant .sh-drop__inner { transition: none; }
.sh-drop__list { margin: 0; padding: 0; list-style: none; }
.sh-drop__link {
  display: block; min-height: var(--sh-drop-row); padding: var(--space-1) var(--space-5);
  color: var(--color-text); font-size: var(--fs-base); font-weight: var(--fw-body); line-height: var(--lh-base); text-decoration: none;
}
.sh-drop__link:focus-visible { outline: var(--focus-ring); outline-offset: calc(-1 * var(--space-1)); }

/* =====================================================================================
   SEARCH PANEL (§6)
   ===================================================================================== */
.sh-sp {
  position: fixed; top: var(--sh-row1-bottom); left: 0; right: 0; z-index: calc(var(--z-header) + 1);
  display: none; max-height: calc(100vh - var(--sh-row1-bottom)); max-height: calc(100dvh - var(--sh-row1-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--color-surface); border-top: 1px solid var(--color-border);
}
.sh-sp.is-open { display: block; }
.sh-sp__inner { display: flex; padding-inline: var(--gutter); }
.sh-sp__products { flex: 1 1 auto; min-width: 0; padding: var(--space-5) var(--page-gutter) var(--space-8) 0; }
.sh-sp__others {
  flex: 0 0 var(--sh-others-w); display: flex; flex-direction: column; gap: var(--space-7);
  padding: var(--space-5) 0 var(--space-8) var(--space-6); border-left: 1px solid var(--color-border);
}
.sh-sp__title { margin: 0 0 var(--space-6); font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-bold); }
.sh-sp__hint { color: var(--color-muted); }
.sh-sp__grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--card-gap);
  margin: 0 0 var(--space-6); padding: 0; list-style: none;
}
.sh-sp__card { min-width: 0; }
/* Search cards follow the Utz card (§8.3): 20 px under the image, 15/24 600 title. */
.sh-sp .cc-card { gap: var(--space-1); }
.sh-sp .cc-card__media { margin-bottom: var(--space-4); }
.sh-sp .cc-card__title { margin: 0; font-size: var(--fs-base); font-weight: var(--fw-semibold); line-height: var(--lh-base); -webkit-line-clamp: 4; line-clamp: 4; }
.sh-sp .cc-card__sub { font-size: var(--fs-base); color: var(--color-muted); line-height: var(--lh-base); }
.sh-sp .cc-card > .cc-badge { top: var(--space-2); left: var(--space-2); }
.sh-sp__head { margin: 0 0 var(--space-3); font-size: var(--fs-h6); line-height: var(--lh-h4); font-weight: var(--fw-bold); }
.sh-sp__list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.sh-sp__opt {
  display: flex; align-items: flex-start; gap: var(--space-2); width: fit-content; max-width: 100%;
  color: var(--color-text); font-size: var(--fs-base); font-weight: var(--fw-body); line-height: var(--lh-base);
  text-decoration: none; text-transform: capitalize; border-radius: var(--radius-sm);
}
.sh-sp__opt .icon { width: var(--sh-arrow); height: var(--sh-arrow); stroke-width: 3; margin-top: var(--space-1); }
.sh-sp__opt mark { background: none; color: inherit; }
.sh-sp__opt[aria-selected="true"] { outline: var(--focus-ring); outline-offset: 2px; }
.sh-sp__opt[aria-selected="true"] .sh-u { background-size: 100% 1px; background-position: left bottom; }
.sh-sp__opt:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* "See All Results For …": Utz's black pill (A.1) with the white fill-wipe hover. */
.sh-sp .sh-sp__all {
  position: relative; isolation: isolate; overflow: hidden; height: var(--btn-h); min-height: 0;
  padding: 0 var(--btn-pad-x); border: 1px solid var(--color-button); background: var(--color-button);
  color: var(--color-button-ink); font-size: var(--fs-base); line-height: var(--lh-btn); text-transform: capitalize;
  transition: color var(--dur-base);
}
.sh-sp .sh-sp__all::before {
  content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: 0;
  background: var(--color-surface); transition: width var(--dur-btn) ease;
}
.sh-sp .sh-sp__all:active { transform: scale(.98); }
.sh-sp .sh-sp__all:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
@media (hover: hover) and (pointer: fine) {
  .sh-sp .sh-sp__all:hover { background: var(--color-button); color: var(--color-text); }
  .sh-sp .sh-sp__all:hover::before { width: calc(100% + 1px); }
}

@media (max-width: 1279.98px) {
  .sh-sp__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) {
  .sh-sp { bottom: 0; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .sh-sp__products { padding-right: var(--space-6); }
  .sh-sp__others { flex-basis: var(--sh-others-w-tablet); }
}
/* Phone: one column, Suggestions first, a sideways strip of cards, the pill last (§6.1, §7.4). */
@media (max-width: 767.98px) {
  .sh-sp__inner { flex-direction: column; gap: var(--space-6); padding: var(--space-6) var(--gutter); }
  .sh-sp__others { order: -1; flex-basis: auto; gap: var(--space-6); padding: 0; border: 0; }
  .sh-sp__products { padding: 0; }
  .sh-sp__grid {
    display: flex; gap: var(--grid-gap-col-phone); overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .sh-sp__grid::-webkit-scrollbar { display: none; }
  .sh-sp__card { flex: 0 0 var(--sh-strip-card); scroll-snap-align: start; }
  .sh-sp .cc-card__media { margin-bottom: var(--space-2); }
}

/* =====================================================================================
   PHONE / TABLET DRAWER (§7.2, §7.3)
   ===================================================================================== */
html.sh-lock, html.sh-lock body { overflow: hidden; }
.sh-drawer {
  position: fixed; top: var(--sh-header-bottom); left: 0; right: 0; bottom: 0; z-index: var(--z-drawer);
  visibility: hidden; transition: visibility 0s var(--dur-drawer);
}
.sh-drawer.is-open { visibility: visible; transition: visibility 0s; }
.sh-drawer__dim {
  position: absolute; inset: 0; background: var(--color-overlay); opacity: 0;
  transition: opacity var(--dur-overlay) var(--ease-drawer);
}
.sh-drawer.is-open .sh-drawer__dim { opacity: 1; }
.sh-drawer__panel {
  position: absolute; top: 0; left: 0; bottom: 0; width: 100%; max-width: var(--sh-drawer-w); overflow: hidden;
  background: var(--color-surface); border-top: 1px solid var(--color-border);
  transform: translateX(-100%); transition: transform var(--dur-drawer) var(--ease-drawer);
}
.sh-drawer.is-open .sh-drawer__panel { transform: none; }
@media (max-width: 767.98px) { .sh-drawer__panel { max-width: none; } }
.sh-drawer__main { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gutter) var(--space-6); }
.sh-drawer__list { margin: 0; padding: 0; list-style: none; }
.sh-drawer__row {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: var(--sh-drawer-row);
  padding: var(--space-3) 0; color: var(--color-text); text-align: left; text-decoration: none;
  font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: var(--lh-base);
}
.sh-drawer__row .icon { width: var(--sh-caret); height: var(--sh-caret); stroke-width: 4; }
.sh-drawer__row:focus-visible, .sh-sub__back:focus-visible { outline: var(--focus-ring); outline-offset: calc(-1 * var(--space-1)); border-radius: var(--radius-sm); }

.sh-sub {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 var(--gutter) var(--space-6); background: var(--color-surface);
  visibility: hidden; transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease), visibility 0s var(--dur-slow);
}
.sh-sub.is-open { visibility: visible; transform: none; transition: transform var(--dur-slow) var(--ease), visibility 0s; }
.sh-sub__back {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-3) 0;
  color: var(--color-placeholder); font-size: var(--fs-base); font-weight: var(--fw-body); line-height: 1.5; text-align: left; /* 46.5 px row (§7.3) */
}
.sh-sub__back .icon { width: var(--sh-arrow); height: var(--sh-arrow); stroke-width: 2.5; }

/* Shop sub-panel groups: base accordion, restyled to Utz's drawer rows (no rules). */
.sh-acc.cc-acc { border: 0; }
.sh-acc .cc-acc__summary { min-height: 0; padding: var(--space-3) 0; font-size: var(--fs-md); line-height: var(--lh-base); }
.sh-acc .cc-acc__sign .icon { width: var(--sh-arrow); height: var(--sh-arrow); stroke-width: 2.5; }
.sh-acc .cc-acc__body { padding: 0 0 var(--space-3); }
.sh-acc[open] .cc-acc__body { animation: sh-fade-up var(--dur-fast) ease both; }
@keyframes sh-fade-up { from { opacity: 0; transform: translateY(4px); } }

/* Long brand lists in the drawer: A–Z links under a sticky letter strip (our addition). */
.sh-az--strip {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)) var(--space-2);
  padding: var(--space-2) var(--gutter); scroll-padding-inline: var(--gutter);
  --sh-fade-l: 0px; --sh-fade-r: 0px;
  mask-image: linear-gradient(to right, transparent, var(--color-text) var(--sh-fade-l), var(--color-text) calc(100% - var(--sh-fade-r)), transparent);
}
/* More letters off one edge: that edge fades out, so a cut-off letter reads as "swipe for more". */
.sh-az--strip.is-more-before { --sh-fade-l: var(--sh-hit); }
.sh-az--strip.is-more-after { --sh-fade-r: var(--sh-hit); }
.sh-az--strip .sh-az__btn:focus-visible { outline-offset: calc(-1 * var(--space-1)); }
.sh-az--strip::-webkit-scrollbar { display: none; }
.sh-az--strip .sh-az__btn { flex: 0 0 var(--sh-hit); width: var(--sh-hit); height: var(--sh-hit); }
.sh-azl__letter { margin: var(--space-4) 0 var(--space-2); font-size: var(--fs-h6); line-height: var(--lh-h4); font-weight: var(--fw-bold); }
.sh-azl__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-3); margin: 0; padding: 0; list-style: none; }
.sh-azl__link { display: block; padding: var(--space-1) 0; color: var(--color-text); font-size: var(--fs-base); line-height: var(--lh-base); text-decoration: none; }
.sh-azl__link:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Utz's drawer tiles: 2 columns of rounded squares, no ring, label left (§7.3). */
.sh-sq-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-3);
  margin: 0; padding: var(--space-3) 0 0; list-style: none;
}
.sh-sq.cc-tile { width: 100%; align-items: stretch; gap: var(--space-2); text-align: left; }
.sh-sq .cc-tile__ring {
  width: 100%; height: auto; aspect-ratio: 1; border: 0; border-radius: var(--radius-md);
  background: var(--color-surface-2); box-shadow: none;
}
.sh-sq:hover .cc-tile__ring { box-shadow: none; }
.sh-sq .cc-tile__img { width: 58%; height: 58%; padding: 0; border-radius: 0; background: none; object-fit: contain; }
.sh-sq.sh-tile--mark .cc-tile__img { width: 46%; height: 46%; padding: 0; }
.sh-sq .sh-art { width: 64%; height: 64%; padding: 0; background: none; border-radius: 0; }
/* The drawer's 173 px squares take one larger size for every name (fixed, not fitted). */
.sh-sq.cc-tile--word { --cc-tile-fs: var(--fs-xl); }
.sh-sq .cc-tile__label {
  margin-inline: 0; background: linear-gradient(currentColor, currentColor) no-repeat right bottom / 0 1px;
  transition: background-size var(--dur-slow) var(--ease); align-self: flex-start;
}
@media (hover: hover) and (pointer: fine) {
  .sh-sq:hover .cc-tile__label { background-size: 100% 1px; background-position: left bottom; }
}
.sh-sq:focus-visible { outline: none; }
.sh-sq:focus-visible .cc-tile__ring { outline: var(--focus-ring); outline-offset: 2px; }

/* =====================================================================================
   FOOTER (§12)
   ===================================================================================== */
#site-footer.sf { background: var(--color-footer); color: var(--color-footer-ink); }
.sf__inner { padding: 0 var(--gutter); }
/* Utz's 256 px columns: Shop · Categories (two columns wide, listed in two columns, so 15
   categories do not make one tall column) · About · company. Columns top-align; the company
   column never squeezes below its longest line (the e-mail address). */
.sf__top {
  display: grid; align-items: start; column-gap: var(--card-gap);
  grid-template-columns: minmax(0, var(--sh-footer-col)) minmax(0, calc(2 * var(--sh-footer-col) + var(--card-gap)))
    minmax(0, var(--sh-footer-col)) minmax(max-content, var(--sh-footer-col));
  padding-top: var(--space-8); border-top: 1px solid var(--color-footer-border);
}
.sf__col { min-width: 0; }
.sf__head { display: block; list-style: none; padding-bottom: var(--space-3); cursor: default; }
.sf__head::-webkit-details-marker { display: none; }
.sf__title { margin: 0; font-size: var(--fs-h6); line-height: var(--lh-h4); font-weight: var(--fw-bold); }
.sf__company-title { padding-bottom: var(--space-3); }
.sf__sign { display: none; }
.sf__list { margin: 0; padding: 0; list-style: none; }
.sf__item { font-size: var(--fs-base); line-height: var(--lh-base); }
.sf__item + .sf__item { padding-top: var(--space-2); }
.sf__address { font-style: normal; }
/* The link box is a 32 px tap target (24 px line + padding); negative margins keep the 32 px pitch. */
.sf__link { display: inline-block; padding-block: var(--space-1); margin-block: calc(-1 * var(--space-1)); color: inherit; text-decoration: none; }
.sf a:focus-visible, .sf summary:focus-visible { outline: 2px solid var(--color-focus-on-red); outline-offset: 2px; border-radius: 2px; }
/* Bottom row: the white wordmark left, the copyright right, on one line. */
.sf__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6);
  padding: var(--space-8) 0;
}
.sf__logo { display: inline-flex; height: var(--sh-footer-logo-h); }
.sf__logo-img { width: auto; height: 100%; }
.sf__copy { margin: 0; font-size: var(--fs-base); line-height: var(--lh-base); }
@media (min-width: 1024px) {
  .sf__col--wide > .sf__list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--sf-rows, 8), auto);
    grid-auto-flow: column; column-gap: var(--card-gap); row-gap: var(--space-2);
  }
  .sf__col--wide .sf__item + .sf__item { padding-top: 0; }
}
/* 1024-1279: 256 px columns do not fit; each column takes its content's width and the
   spare room goes between them, so no category name wraps. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .sf__top { grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .sf__col--wide > .sf__list { grid-template-columns: repeat(2, max-content); }
}
/* Utz's section padding is 75 % of its value at 768-1279 (40 -> 30) and 60 % below 768 (24). */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .sf__top { padding-top: calc(var(--space-8) * .75); }
  .sf__bottom { padding-bottom: calc(var(--space-8) * .75); }
}
/* Below 1024: Utz's accordions (52 px rows, white hairlines, + / −). */
@media (max-width: 1023.98px) {
  .sf__top { display: block; }
  details.sf__col { border-bottom: 1px solid var(--color-footer-rule); }
  .sf__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; cursor: pointer; }
  .sf__sign { display: inline-grid; }
  .sf__sign .icon { grid-area: 1 / 1; width: var(--sh-arrow); height: var(--sh-arrow); stroke-width: 2.5; }
  .sf__sign .icon:last-child, details[open] > .sf__head .sf__sign .icon:first-child { visibility: hidden; }
  details[open] > .sf__head .sf__sign .icon:last-child { visibility: visible; }
  details.sf__col > .sf__list { padding: 0 0 var(--space-3); }
  details.sf__col[open] > .sf__list { animation: sh-fade-up var(--dur-fast) ease both; }
  .sf__company { padding-top: var(--space-6); }
}
@media (max-width: 767.98px) {
  .sf__top { padding-top: var(--space-6); }
  .sf__bottom { padding: var(--space-6) 0 var(--space-8); }
}

/* =====================================================================================
   Reduced motion: the duration tokens are already 0; also stop keyframes and transforms.
   ===================================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sh-mega__tiles.is-entering, .sh-acc[open] .cc-acc__body, details.sf__col[open] > .sf__list { animation: none; }
  .sh-tile:hover .cc-tile__img, .sh-tile:hover .sh-art, .sh-tile:hover .cc-tile__word,
  .sh-search__close:hover .icon { transform: none; }
  .sh-burger, .sh-burger::before, .sh-burger::after { transition: none; }
}