/* ============================================================================
   VIOLET GROCERY — STYLESHEET
   ----------------------------------------------------------------------------
   Structure follows the reference storefront. The visual language does not:
   an offset split hero, shelf-label category tiles, framed image wells, and a
   pill control set built on three radii.
   ========================================================================= */

/* ============================== RESET ============================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

:where(button, a, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-control);
}

body.is-locked { overflow: hidden; }

/* ============================== PRIMITIVES ============================== */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon { width: 20px; height: 20px; flex: none; }
.icon-xs { width: 14px; height: 14px; }
.icon-sm { width: 17px; height: 17px; }
.icon-lg { width: 30px; height: 30px; }

/* The sprite is a definitions container, not content. Without this it is an
   inline SVG at its intrinsic 300x150 and pushes the whole page down. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -140%);
  z-index: 100;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.625rem 1.125rem;
  border-radius: 0 0 var(--r-control) var(--r-control);
  font-size: var(--fs-md);
  font-weight: 600;
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ============================== BUTTONS ============================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 44px;
  padding: 0 1.25rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--sh-2);
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: var(--sh-3);
}

.btn-outline {
  border-color: var(--border-strong);
  color: var(--text-strong);
  background: var(--surface);
}
.btn-outline:hover:not(:disabled) {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-text);
}

.btn-ghost { color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { color: var(--text-strong); background: var(--surface-hover); }

.btn-block { width: 100%; }

.btn-wa {
  background: var(--whatsapp);
  color: #fff;
  box-shadow: var(--sh-2);
}
.btn-wa:hover:not(:disabled) { background: var(--whatsapp-hover); }

.iconbtn {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-tile);
  color: var(--text-muted);
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.iconbtn:hover { background: var(--surface-hover); color: var(--accent-text); }

/* ============================== HEADER ==============================
   One tier, three zones. The brand is a lockup: rounded mark, name, and
   the live status as a paired dot. At 900px the live search is promoted
   into the bar itself so the toolbar below stays a filter control.
   ================================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgb(255 255 255 / 0.9);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
}

.header__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--header-h);
}

/* --- Brand lockup --- */
.brand {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  min-width: 0;
  flex: 0 1 auto;
}

.brand__mark {
  width: 42px; height: 42px;
  border-radius: var(--r-tile);
  object-fit: cover;
  flex: none;
  border: 1px solid var(--border);
  box-shadow: var(--sh-1);
}

.brand__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.brand__name {
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--text-subtle);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
}

.brand__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok-text);
  flex: none;
  box-shadow: 0 0 0 3px var(--ok-bg);
}

/* --- Header search: hidden until 900px where there is room for it --- */
.header__search {
  display: none;
  position: relative;
  z-index: 40;
  align-items: center;
  gap: 0.5rem;
  height: 42px;
  padding: 0 0.4375rem 0 0.875rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  flex: 1 1 auto;
  max-width: 420px;
  margin-inline: auto;
  transition: border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.header__search:focus-within {
  border-color: var(--accent-border);
  background: var(--surface);
  box-shadow: var(--ring);
}
@media (min-width: 900px) { .header__search { display: flex; } }

.header__search .search__icon { color: var(--text-subtle); flex: none; }

.header__search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  outline: none;
  font-size: var(--fs-md);
  color: var(--text-strong);
}
.header__search input::placeholder { color: var(--text-subtle); }
.header__search input::-webkit-search-cancel-button { display: none; }

/* Filter control lives inside the search field, as one combined tool. */
.search__filter {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  transition: border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.search__filter:hover {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-text);
}
.search__filter .filterbtn__n {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  font-size: 9px;
  border: 1.5px solid var(--surface-2);
}

/* ---- Suggestions ---- */
.suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: min(420px, 62vh);
  overflow-y: auto;
  padding: 0.375rem;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--sh-4);
  transform-origin: top center;
  animation: suggestIn var(--dur) var(--ease-out);
}
.suggest[hidden] { display: none; }

@keyframes suggestIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.suggest__group {
  padding: 0.5rem 0.625rem 0.25rem;
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.suggest__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.4375rem 0.625rem;
  border-radius: var(--r-control);
  text-align: left;
  color: var(--text);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.suggest__item:hover,
.suggest__item.is-active {
  background: var(--accent-soft);
}

.suggest__thumb {
  width: 40px; height: 40px;
  border-radius: var(--r-frame);
  border: 1px solid var(--border);
  background: #fff;
  object-fit: contain;
  padding: 2px;
  flex: none;
}

.suggest__text { min-width: 0; }
.suggest__name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggest__meta {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--text-subtle);
}
/* Matched substring, marked up by highlight() */
.suggest__hit { color: var(--accent-text); background: var(--accent-soft-2); border-radius: 2px; }

.suggest__price {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--text-strong);
  white-space: nowrap;
}

.suggest__term {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4375rem 0.625rem;
  border-radius: var(--r-control);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: left;
}
.suggest__term:hover,
.suggest__term.is-active { background: var(--accent-soft); color: var(--accent-text); }
.suggest__term .icon { color: var(--text-subtle); flex: none; }

.suggest__empty {
  padding: 1.25rem 0.875rem;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.suggest__empty b { color: var(--text-strong); }

.suggest__all {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem 0.625rem;
  border-top: 1px solid var(--border-faint);
  border-radius: 0 0 var(--r-control) var(--r-control);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent-text);
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.suggest__all:hover,
.suggest__all.is-active { background: var(--accent-soft); }

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  margin-left: auto;
}
@media (min-width: 900px) { .header__actions { margin-left: 0; } }

.cartbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 44px;
  padding: 0 1rem 0 0.875rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-md);
  font-weight: 700;
  box-shadow: var(--sh-2);
  transition: background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.cartbtn:hover { background: var(--accent-hover); box-shadow: var(--sh-3); }
.cartbtn:active { transform: translateY(1px); }

.cartbtn__label { display: none; }
@media (min-width: 480px) { .cartbtn__label { display: inline; } }

.cartbtn__count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.22);
  color: var(--on-accent);
  font-size: var(--fs-2xs);
  font-weight: 800;
  font-family: var(--font-mono);
  display: grid;
  place-items: center;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.cartbtn__count[data-empty="true"] { display: none; }
.cartbtn__count.is-bump { transform: scale(1.28); }

/* Utility strip — a quiet ink bar, not a coloured slab. It carries the
   store's live status and terms, then gets out of the way. */
.utility {
  background: var(--text-strong);
  color: rgb(255 255 255 / 0.82);
  font-size: var(--fs-2xs);
  letter-spacing: 0.01em;
}
.utility__row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 32px;
  overflow: hidden;
}
.utility__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}
.utility__item .icon { color: rgb(255 255 255 / 0.5); }
.utility__spacer { margin-left: auto; }
.utility__free { color: #fff; font-weight: 600; }

/* ============================== HERO ==============================
   One framed stage. The store's own banner fills it, the copy sits on
   it over a directional scrim, and a fact rail runs along the bottom
   edge. Under 900px the copy unpins and the panel becomes a normal
   stacked card.
   ================================================================ */
.page { padding-bottom: 4.5rem; }

.hero { margin-top: var(--page-start); }

.hero__stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--text-strong);
  isolation: isolate;
}

/* --- Backdrop: the banner, held back so type stays legible --- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 42%;
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(94deg,
      rgb(18 12 38 / 0.95) 0%,
      rgb(24 16 50 / 0.88) 34%,
      rgb(30 20 62 / 0.62) 58%,
      rgb(35 24 70 / 0.28) 100%),
    radial-gradient(120% 100% at 8% 20%, rgb(109 40 217 / 0.4) 0%, transparent 62%);
}

/* --- Copy --- */
.hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.75rem var(--panel-padding) 1.5rem;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.3125rem 0.75rem 0.3125rem 0.5rem;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgb(255 255 255 / 0.94);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 1.125rem;
}
.hero__eyebrow .icon { color: #c4b5fd; }

.hero__title {
  font-size: clamp(1.875rem, 7.4vw, var(--fs-4xl));
  line-height: 1.06;
  letter-spacing: -0.038em;
  font-weight: 800;
  color: #fff;
  max-width: 16ch;
  text-wrap: balance;
}

.hero__title em {
  font-style: normal;
  color: #c4b5fd;
}

.hero__sub {
  margin-top: 0.9375rem;
  font-size: var(--fs-base);
  color: rgb(255 255 255 / 0.76);
  max-width: 44ch;
  line-height: 1.62;
}

/* The trailing reassurance is dropped below 480px where it costs a line
   and the page has a sticky bottom bar taking space anyway. */
.sm-only { display: none; }
@media (min-width: 480px) { .sm-only { display: inline; } }

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.5rem;
}

/* Ghost button inverted for use on the dark stage */
.hero__ghost {
  border-color: rgb(255 255 255 / 0.28);
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero__ghost:hover {
  border-color: rgb(255 255 255 / 0.5);
  background: rgb(255 255 255 / 0.16);
  color: #fff;
}

/* --- Fact rail along the bottom edge --- */
.hero__facts {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgb(255 255 255 / 0.14);
  background: rgb(12 8 26 / 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero__fact {
  min-width: 0;
  padding: 0.75rem 0.75rem 0.75rem var(--panel-padding);
}
.hero__fact + .hero__fact { border-left: 1px solid rgb(255 255 255 / 0.12); }

.hero__fact b {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  font-family: var(--font-mono);
  line-height: 1.2;
}
.hero__fact span {
  display: block;
  margin-top: 0.1875rem;
  font-size: var(--fs-2xs);
  color: rgb(255 255 255 / 0.62);
  letter-spacing: 0.02em;
  line-height: 1.35;
}

/* On a phone the rail is a single compact row. Splitting it into two
   columns just pushes the products further down the page. */
@media (max-width: 419px) {
  .hero__fact { padding: 0.625rem 0.375rem 0.625rem var(--panel-padding); }
  .hero__fact b { font-size: var(--fs-base); }
  .hero__fact span { font-size: var(--fs-3xs); }
}

/* --- Heritage stamp, pinned to the top-right of the stage --- */
.hero__stamp {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  display: none;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.94);
  color: var(--text-strong);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: var(--sh-3);
}
.hero__stamp .icon { color: var(--accent); }
@media (min-width: 900px) { .hero__stamp { display: inline-flex; } }

@media (min-width: 900px) {
  .hero__copy {
    padding: 3.25rem 2.5rem 2.5rem;
    max-width: 62%;
  }
  .hero__stage {
    grid-template-columns: minmax(0, 1fr);
    min-height: 430px;
  }
  .hero__bg img { object-position: 72% 45%; }
  .hero__fact { padding: 1rem 2.5rem; }
  .hero__fact b { font-size: var(--fs-xl); }
}

/* --- Image panel with breaking stat card --- */
.hero__panel {
  position: relative;
  border-radius: var(--r-card);
  overflow: visible;
}

.hero__shot {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--bg-sunken);
  aspect-ratio: 4 / 3;
}
.hero__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgb(76 29 149 / 0.34) 0%, rgb(25 21 39 / 0.06) 58%);
}

.hero__tag {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.6875rem;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.94);
  color: var(--text-strong);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: var(--sh-2);
}

.hero__stat {
  position: absolute;
  right: 0.75rem;
  bottom: -1.375rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--r-control);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-4);
}
.hero__staticon {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--r-tile);
  background: var(--accent-soft);
  color: var(--accent-text);
  flex: none;
}
.hero__stat b {
  display: block;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}
.hero__stat span {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--text-subtle);
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
  }
  .hero__title { max-width: 13ch; }
  .hero__shot { aspect-ratio: 5 / 4; }
}

/* ============================== AISLE RAIL ==============================
   Shelf-label tiles. Each is a small framed glyph plus a name, laid out
   in a snapping rail on mobile and a row on desktop.
   ==================================================================== */
.catbar {
  position: sticky;
  top: var(--top-offset);
  z-index: 20;
  margin-top: var(--section-gap);
  padding-block: 0.75rem;
  background: var(--bg);
  transition: box-shadow var(--dur) var(--ease-out);
}

/* The rail sits inside <main class="shell">, so it must not add a second
   gutter of its own: it aligns to the same edge as the hero and the grid. */
.catbar .rail { padding-block: 0.125rem; }
/* Divider under the aisle rail. Stretched to the full bleed of the page,
   not just the rail, so it reads as a section rule at the site's cap width. */
.catbar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100vw;
  transform: translateX(-50%);
  height: 1px;
  background: var(--border);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.catbar.is-stuck::after { opacity: 1; }

.rail {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-block: 0.125rem;
}
.rail::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  scroll-snap-align: start;
  height: 42px;
  padding: 0 0.875rem 0 0.5rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-md);
  font-weight: 600;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.chip:hover {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-text);
}

.chip__icon {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--r-tile);
  background: var(--surface-hover);
  color: var(--text-muted);
  flex: none;
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.chip__n {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--surface-hover);
  color: var(--text-subtle);
}

.chip[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.chip[aria-selected="true"] .chip__icon {
  background: rgb(255 255 255 / 0.2);
  color: var(--on-accent);
}
.chip[aria-selected="true"] .chip__n {
  background: rgb(255 255 255 / 0.22);
  color: var(--on-accent);
}

/* ============================== SECTIONS ============================== */
.sec { margin-top: var(--section-gap); }

.sec__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.125rem;
}

.sec__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-strong);
}

.sec__sub {
  margin-top: 0.25rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.sec__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-text);
  flex: none;
  transition: gap var(--dur-fast) var(--ease-out);
}
.sec__link:hover { gap: 0.5rem; }

/* ============================== BEST RAIL ============================== */
.grid-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 160px;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}
.grid-rail::-webkit-scrollbar { display: none; }

@media (min-width: 640px) { .grid-rail { grid-auto-columns: 176px; gap: 1rem; } }
@media (min-width: 1024px) { .grid-rail { grid-auto-columns: 190px; } }

/* ============================== TOOLBAR ============================== */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.125rem;
}

.toolbar__left {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex: 1 1 260px;
  min-width: 0;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 40px;
  padding: 0 0.375rem 0 0.75rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  flex: 1 1 auto;
  min-width: 0;
  max-width: 340px;
  transition: border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.search:focus-within {
  border-color: var(--accent-border);
  background: var(--surface);
  box-shadow: var(--ring);
}
.search__icon { color: var(--text-subtle); flex: none; }
.search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  outline: none;
  font-size: var(--fs-md);
  color: var(--text-strong);
}
.search__input::placeholder { color: var(--text-subtle); }
.search__input::-webkit-search-cancel-button { display: none; }

.search__clear {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-pill);
  color: var(--text-subtle);
  flex: none;
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.search__clear:hover { background: var(--surface-hover); color: var(--text-strong); }
.search__clear[data-show="false"] { display: none; }

.resultcount {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
  flex: none;
}
.resultcount b {
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-weight: 700;
}

.toolbar__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filterbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  height: 40px;
  padding: 0 0.875rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-md);
  font-weight: 600;
  transition: border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.filterbtn:hover {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-text);
}

.filterbtn__n {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 800;
}
.filterbtn__n[data-empty="true"] { display: none; }

.segmented {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface-hover);
}

.segmented__btn {
  display: grid;
  place-items: center;
  width: 34px; height: 32px;
  border-radius: var(--r-pill);
  color: var(--text-subtle);
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.segmented__btn[aria-pressed="true"] {
  background: var(--surface);
  color: var(--accent-text);
  box-shadow: var(--sh-1);
}

.select { position: relative; display: inline-flex; align-items: center; }
.select select {
  height: 40px;
  padding: 0 2rem 0 0.875rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-muted);
  font-family: inherit;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.select select:hover { border-color: var(--accent-border); color: var(--accent-text); }
.select__caret {
  position: absolute;
  right: 0.75rem;
  pointer-events: none;
  color: var(--text-subtle);
  width: 12px;
  height: 12px;
}

/* At 900px and up the filter control lives inside the header search, so
   the toolbar copy would be a duplicate. */
@media (min-width: 900px) {
  .toolbar__right .filterbtn { display: none; }
}

@media (max-width: 700px) {
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar__right { justify-content: space-between; }
  .select { flex: 1 1 auto; }
  .select select { width: 100%; }
}

/* ============================== PRODUCT GRID ============================== */
.grid-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 0.75rem;
}

@media (min-width: 640px) {
  .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 1rem; }
}
@media (min-width: 768px) { .grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .grid-products { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem 1.25rem; }
}
@media (min-width: 1280px) { .grid-products { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ============================== PRODUCT CARD ==============================
   A framed tile in three tidy bands: the image well, then a body of
   eyebrow / title+pack / price+action. Every band is a fixed height, so
   cards in a row always bottom out on the same line.

   Motion is deliberately minimal: border colour and a soft shadow. The
   card does not move, the image does not zoom, nothing slides in.
   ====================================================================== */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

.pcard__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.pcard:hover .pcard__frame,
.pcard:focus-within .pcard__frame {
  border-color: var(--accent-border);
  box-shadow: var(--sh-3);
}

/* The image well. Flag, quick actions and the low-stock chip hang off
   this box so they track the image, not the whole card. */
.pcard__well {
  position: relative;
  flex: none;
}

.pcard__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
}

.pcard__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.75rem;
  background: #fff;
}
@media (min-width: 1024px) { .pcard__img { padding: 1rem; } }

/* ---- Status flag, top-left of the well ---- */
.pcard__flag {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.4375rem;
  border-radius: var(--r-frame);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 800;
  letter-spacing: 0.01em;
  background: var(--deal-bg);
  color: var(--deal-text);
  border: 1px solid var(--deal-border);
}
.pcard__flag--out {
  background: var(--bad-bg);
  color: var(--bad-text);
  border-color: var(--bad-border);
}

/* ---- Quick actions, top-right. Always in the layout; they only change
        opacity, so nothing reflows when they appear. ---- */
.pcard__quick {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  display: flex;
  gap: 0.3125rem;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.pcard:hover .pcard__quick,
.pcard:focus-within .pcard__quick { opacity: 1; }

/* Touch devices have no hover, so the actions are always available. */
@media (hover: none) {
  .pcard__quick { opacity: 1; }
}

.quickbtn {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  box-shadow: var(--sh-1);
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.quickbtn:hover { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-text); }
.quickbtn.is-on { color: var(--accent); border-color: var(--accent-border); }

/* ---- Low stock, bottom-left of the well ---- */
.pcard__stock {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.4375rem;
  border-radius: var(--r-frame);
  background: var(--surface);
  border: 1px solid var(--bad-border);
  color: var(--bad-text);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* =================== CARD BODY ===================
   Three bands, each a fixed height. Nothing inside a band wraps, so a
   short title and a long title produce identically sized cards. */
.pcard__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0.625rem 0.75rem 0.75rem;
}
@media (min-width: 1024px) { .pcard__body { padding: 0.75rem 0.875rem 0.875rem; } }

/* --- Band 1: category left, rating right --- */
.pcard__eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: 16px;
  margin-bottom: 0.4375rem;
}

.pcard__cat {
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.pcard__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  flex: none;
  font-size: var(--fs-3xs);
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-muted);
}
.pcard__rating svg { color: var(--star); width: 11px; height: 11px; }
.pcard__rating small {
  color: var(--text-subtle);
  font-weight: 500;
  font-family: var(--font-sans);
}

/* --- Band 2: title, then a quiet pack line --- */
.pcard__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--text-strong);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: calc(2 * 1.35em);
}
.pcard__name button {
  font: inherit;
  color: inherit;
  text-align: left;
  padding: 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.pcard__name button:hover { color: var(--accent-text); }

/* Metadata, not a control that looks like a text input. */
.pcard__pack {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  width: 100%;
  height: 20px;
  margin-top: 0.3125rem;
  padding: 0;
  background: none;
  border: 0;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-align: left;
  transition: color var(--dur-fast) var(--ease-out);
}
.pcard__pack:hover { color: var(--accent-text); }
.pcard__pack span:first-child { overflow: hidden; text-overflow: ellipsis; }
.pcard__pack span[aria-hidden] { color: var(--border-strong); }
.pcard__pack span:last-of-type { color: var(--text-subtle); }
.pcard__pack svg { flex: none; color: var(--text-subtle); }
.pcard__pack:hover svg { color: var(--accent-text); }

/* --- Description: shown at every width, clamped to two lines --- */
.pcard__desc {
  margin-top: 0.4375rem;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--text-subtle);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: calc(2 * 1.45em);
}

/* --- Band 3: price left, action right, one baseline --- */
.pcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.625rem;
  min-height: 2.25rem;
}

.pcard__price {
  display: flex;
  align-items: baseline;
  gap: 0.3125rem;
  flex-wrap: nowrap;
  min-width: 0;
}

/* Neither price may be shrunk by a tight row. If the pair genuinely does
   not fit, the previous price is dropped wholesale rather than collapsed
   to a zero-width sliver the shopper cannot read. */
.pcard__now { flex: none; }

.pcard__now {
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text-strong);
  font-family: var(--font-mono);
}

.pcard__was {
  flex: none;
  font-size: var(--fs-2xs);
  color: var(--text-subtle);
  text-decoration: line-through;
  font-family: var(--font-mono);
}

/* Below 400px a four-digit pair cannot fit beside the button, so the
   previous price is hidden outright instead of being crushed. */
@media (max-width: 399px) { .pcard__was { display: none; } }

.pcard__act { flex: none; }

/* --- Add button --- */
.addbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 62px;
  height: 34px;
  padding: 0 0.75rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.addbtn:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.addbtn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Stepper, replaces the button once the item is in the basket --- */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  height: 34px;
  padding: 0 0.1875rem;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
}
.stepper__btn {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--r-pill);
  color: inherit;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.stepper__btn:hover { background: rgb(255 255 255 / 0.2); }
.stepper__n {
  min-width: 20px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 800;
}
.stepper--sm { height: 30px; }
.stepper--sm .stepper__btn { width: 25px; height: 25px; }

/* ============================== LIST VIEW ==============================
   The same card laid on its side: thumbnail left, everything else in a
   single column. Nothing is hidden, so no information is lost by
   switching view.
   ==================================================================== */
.grid-products.is-list { grid-template-columns: 1fr; gap: 0.625rem; }

.grid-products.is-list .pcard__frame {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: stretch;
  gap: 0.875rem;
  padding: 0.625rem;
}
.grid-products.is-list .pcard__well { align-self: start; }
.grid-products.is-list .pcard__media { aspect-ratio: 1; border-radius: var(--r-frame); }
.grid-products.is-list .pcard__img { padding: 0.3125rem; }
.grid-products.is-list .pcard__body { padding: 0; min-width: 0; justify-content: center; }
.grid-products.is-list .pcard__eyebrow { margin-bottom: 0.25rem; }
.grid-products.is-list .pcard__name { -webkit-line-clamp: 1; height: auto; }
.grid-products.is-list .pcard__pack { margin-top: 0.1875rem; }
.grid-products.is-list .pcard__desc { -webkit-line-clamp: 1; height: auto; margin-top: 0.3125rem; }
.grid-products.is-list .pcard__foot {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-faint);
  min-height: 0;
}
.grid-products.is-list .pcard__quick { display: none; }

@media (min-width: 768px) {
  .grid-products.is-list .pcard__frame {
    grid-template-columns: 104px minmax(0, 1fr);
    padding: 0.875rem;
    gap: 1.25rem;
  }
  .grid-products.is-list .pcard__media { border-radius: var(--r-control); }
  .grid-products.is-list .pcard__desc { -webkit-line-clamp: 2; }
  .grid-products.is-list .pcard__foot { border-top: 0; padding-top: 0.25rem; margin-top: 0.375rem; }
}

/* ============================== EMPTY STATE ============================== */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3.5rem 1.5rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-card);
  background: var(--surface-2);
}

.empty__art {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: var(--r-card);
  background: var(--accent-soft);
  color: var(--accent-text);
  margin-bottom: 1rem;
}

.empty__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.empty__text {
  margin-top: 0.4375rem;
  font-size: var(--fs-md);
  color: var(--text-muted);
  max-width: 42ch;
}

.empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  justify-content: center;
  margin-top: 1.25rem;
}

/* ============================== FOOTER ============================== */
.footer {
  margin-top: calc(var(--section-gap) * 1.6);
  border-top: 1px solid var(--border);
  background: var(--bg-sunken);
  padding-block: 2.5rem 1.5rem;
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .footer__top { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.875rem;
}

.footer__mark {
  width: 38px; height: 38px;
  border-radius: var(--r-tile);
  object-fit: cover;
  border: 1px solid var(--border);
  flex: none;
}

.footer__name {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.footer__blurb {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 46ch;
  line-height: 1.62;
}

.footer__addr {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.875rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

.footer__coltitle {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 0.75rem;
}

.footer__links { display: flex; flex-direction: column; gap: 0.5625rem; }

.footer__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  width: fit-content;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__link:hover { color: var(--accent-text); }

.footer__bottom {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
}
.footer__copy { font-size: var(--fs-xs); color: var(--text-muted); }
.footer__socials { display: flex; gap: 0.375rem; }

.social {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.social:hover {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-text);
}

/* ============================== BOTTOM NAV (mobile) ============================== */
.botnav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.botnav__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 58px;
}

.botnav__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1875rem;
  color: var(--text-subtle);
  font-size: var(--fs-3xs);
  font-weight: 600;
  transition: color var(--dur-fast) var(--ease-out);
}
.botnav__btn[aria-current="page"] { color: var(--accent); }

.botnav__badge {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(6px);
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 800;
  display: grid;
  place-items: center;
}
.botnav__badge[data-empty="true"] { display: none; }

@media (min-width: 1024px) { .botnav { display: none; } }
@media (max-width: 1023px) {
  .page { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 2rem); }
  .footer { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 1.5rem); }
  .lg-only { display: none !important; }
}

/* ============================== OVERLAYS ============================== */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgb(25 21 39 / 0.44);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}
.scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; bottom: 0;
  right: 0;
  z-index: 60;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: var(--sh-drawer);
  transform: translateX(102%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
/* visibility flips on immediately when opening, so the panel is focusable
   at once; it only waits for the slide-out when closing. */
.drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease-out), visibility 0s;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  border-bottom: 1px solid var(--border);
  flex: none;
}

.drawer__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.drawer__n {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 800;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
}

.drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem 1.125rem;
  -webkit-overflow-scrolling: touch;
}

.drawer__foot {
  flex: none;
  padding: 1rem 1.125rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* --- Free-delivery progress --- */
.freeprog { margin-bottom: 1rem; }
.freeprog__text {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.4375rem;
}
.freeprog__track {
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--surface-hover);
  overflow: hidden;
}
.freeprog__fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent) 0%, #8b5cf6 100%);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* --- Cart lines --- */
.cline {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-faint);
}
.cline:last-of-type { border-bottom: 0; }

.cline__img {
  width: 64px; height: 64px;
  object-fit: contain;
  border-radius: var(--r-frame);
  border: 1px solid var(--border);
  background: #fff;
  padding: 0.25rem;
}

.cline__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.35;
}
.cline__unit {
  margin-top: 0.125rem;
  font-size: var(--fs-2xs);
  color: var(--text-subtle);
  font-family: var(--font-mono);
}
.cline__row { margin-top: 0.5rem; }

.cline__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
}
.cline__rm {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--r-pill);
  color: var(--text-subtle);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cline__rm:hover { background: var(--bad-bg); color: var(--bad-text); }
.cline__price {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--text-strong);
  white-space: nowrap;
}

.cart-reorder-note {
  margin-bottom: 0.875rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--r-control);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent-text);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

/* --- Summary rows --- */
.sumrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding: 0.25rem 0;
}
.sumrow b { font-family: var(--font-mono); font-weight: 700; color: var(--text-strong); }
.sumrow--save b { color: var(--ok-text); }
.sumrow--total {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-strong);
}
.sumrow--total b { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.02em; }

.freetag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
  color: var(--ok-text);
  font-size: var(--fs-2xs);
  font-weight: 700;
}

/* ============================== MODAL ============================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal__panel {
  position: relative;
  width: min(940px, 100%);
  max-height: min(88vh, 780px);
  overflow-y: auto;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--sh-4);
  transform: translateY(14px) scale(0.985);
  transition: transform var(--dur-slow) var(--ease-out);
  -webkit-overflow-scrolling: touch;
}
.modal.is-open .modal__panel { transform: translateY(0) scale(1); }

.modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 5;
  background: rgb(255 255 255 / 0.92);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  width: 34px; height: 34px;
}

#qvBody {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  #qvBody { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); }
}

.modal__media {
  position: relative;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  min-height: 260px;
}
.modal__media img {
  width: 100%;
  max-width: 340px;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-frame);
}

.product-photo-note {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.25rem 0.5625rem;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.94);
  border: 1px solid var(--border);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-muted);
  box-shadow: var(--sh-1);
}
.product-photo-caption {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-size: var(--fs-3xs);
  color: var(--text-subtle);
}

.modal__info {
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
@media (min-width: 768px) { .modal__info { padding: 1.75rem; } }

.modal__cat {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  align-self: flex-start;
  padding: 0.25rem 0.625rem;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent-text);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.modal__title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text-strong);
}

.product-meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5625rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 700;
}
.badge--ok {
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
  color: var(--ok-text);
}
.badge--out {
  background: var(--bad-bg);
  border: 1px solid var(--bad-border);
  color: var(--bad-text);
}

.product-unit-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.product-unit-price strong {
  font-family: var(--font-mono);
  font-size: var(--fs-3xl);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text-strong);
}
.product-unit-price s {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--text-subtle);
}
.modal__save {
  padding: 1px 7px;
  border-radius: var(--r-frame);
  background: var(--deal-bg);
  border: 1px solid var(--deal-border);
  color: var(--deal-text);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 800;
}
.product-tax {
  flex: 1 0 100%;
  font-size: var(--fs-2xs);
  color: var(--text-subtle);
  font-family: var(--font-mono);
}

/* --- Pack choice grid --- */
.product-quantity { border: 0; padding: 0; margin: 0; }
.product-quantity legend {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 0.5rem;
}

.pack-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: 0.5rem;
}

.pack-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  padding: 0.5625rem 0.6875rem;
  border-radius: var(--r-control);
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.pack-choice:hover:not(:disabled) { border-color: var(--accent-border); background: var(--accent-soft); }
.pack-choice[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.pack-choice strong { font-size: var(--fs-sm); font-weight: 700; color: var(--text-strong); }
.pack-choice span { font-size: var(--fs-3xs); color: var(--text-subtle); }
.pack-choice b {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--text-strong);
  margin-top: 0.1875rem;
}
.pack-choice small { font-family: var(--font-mono); font-size: var(--fs-3xs); color: var(--text-subtle); }
.pack-choice:disabled { opacity: 0.45; cursor: not-allowed; }

/* --- Quantity row --- */
.product-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--r-control);
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.product-count strong { display: block; font-size: var(--fs-md); font-weight: 700; color: var(--text-strong); }
.product-count small { font-size: var(--fs-2xs); color: var(--text-subtle); }

.product-count__stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.1875rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
}
.product-count__stepper button {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-pill);
  color: var(--text-muted);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.product-count__stepper button:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-text); }
.product-count__stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.product-count__stepper output {
  min-width: 26px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--text-strong);
}

/* --- Details disclosure --- */
.product-details {
  border-top: 1px solid var(--border);
  padding-top: 0.875rem;
}
.product-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-strong);
}
.product-details summary::-webkit-details-marker { display: none; }
.product-details summary svg { transition: transform var(--dur) var(--ease-out); color: var(--text-subtle); }
.product-details[open] summary svg { transform: rotate(180deg); }

.modal__desc {
  margin-top: 0.625rem;
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--text-muted);
}

.specs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.625rem;
  margin-top: 0.875rem;
}
.spec__k {
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.spec__v {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-strong);
  margin-top: 0.125rem;
}

.product-delivery {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.6875rem 0.75rem;
  border-radius: var(--r-control);
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
  color: var(--ok-text);
}
.product-delivery strong { display: block; font-size: var(--fs-sm); font-weight: 700; }
.product-delivery small { font-size: var(--fs-2xs); opacity: 0.85; }

.modal__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.25rem;
}

.product-selection {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 120px;
}
.product-selection span { font-size: var(--fs-2xs); color: var(--text-subtle); }
.product-selection strong {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.product-add { flex: 1 1 auto; min-width: 160px; }
.product-save { width: 44px; padding: 0; flex: none; }
.product-save[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-border); background: var(--accent-soft); }

/* ============================== TOASTS ============================== */
.toaster {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(420px, calc(100vw - 2rem));
  pointer-events: none;
}
@media (max-width: 1023px) { .toaster { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); } }

.toast {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.6875rem 0.875rem;
  border-radius: var(--r-control);
  background: var(--text-strong);
  color: #fff;
  box-shadow: var(--sh-4);
  font-size: var(--fs-sm);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.toast.is-in { opacity: 1; transform: translateY(0); }
.toast--ok { background: var(--accent); }
.toast__icon { display: grid; place-items: center; flex: none; opacity: 0.9; }
.toast__msg { flex: 1 1 auto; line-height: 1.4; }
.toast__act {
  flex: none;
  color: inherit;
  font-weight: 700;
  font-size: var(--fs-xs);
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.95;
}

/* ============================== REVEAL ============================== */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}