:root {
  --bg: #ffffff;
  --soft: #f4f4f4;
  --ink: #111111;
  --muted: #6b6b6b;
  --line: #e6e6e6;
  --red: #c8312b;
  --radius: 12px;
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; scrollbar-width: none; }
/* No visible scrollbars anywhere; wheel, trackpad and touch scrolling still work. */
::-webkit-scrollbar { display: none; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 500 15px/1.5 var(--font);
}
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.warning {
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 9px 16px;
}

/* Header */
.header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 56px; height: 56px; }
.brand span { font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; }
.brand small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em; color: var(--muted); }
/* Search sits at the right end of the category row; on phones it folds into an icon. */
.search {
  display: flex; align-items: center; gap: 10px;
  flex: 0 1 300px; min-width: 0; margin-left: auto;
  background: var(--soft);
  border-radius: 999px;
  padding: 0 16px;
  color: var(--muted);
}
.search input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: 0;
  font: 500 14px var(--font); color: var(--ink);
  padding: 10px 0;
}
.icon-btn {
  display: none; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer;
}
.icon-btn:hover { background: var(--soft); }
.menu-call { display: none; }
.search:focus-within { box-shadow: 0 0 0 2px var(--ink); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.call { font-weight: 700; font-size: 14px; text-decoration: none; }
.call:hover { color: var(--red); }

.nav { border-top: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; gap: 16px; }
.tabs { display: flex; gap: 4px; min-width: 0; overflow-x: auto; }
.tabs button {
  border: 0; background: none; cursor: pointer;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 14px 16px;
  color: var(--ink);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tabs button:hover { color: var(--red); }
.tabs button[aria-pressed="true"] { border-bottom-color: var(--ink); }

.storebar { background: var(--soft); font-size: 13px; }
.storebar-inner { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: center; padding-top: 10px; padding-bottom: 10px; color: #333; }
.storebar a { text-underline-offset: 3px; }
.open { color: #1d7a3a; font-weight: 700; }
.closed { color: var(--red); font-weight: 700; }

/* Product grid */
.list-head { display: flex; align-items: baseline; justify-content: space-between; margin: 32px 0 18px; scroll-margin-top: 80px; }
.list-head h2 { margin: 0; font-size: 26px; font-weight: 800; }
.count { color: var(--muted); font-size: 13px; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  padding-bottom: 72px;
}
.card {
  display: flex; flex-direction: column;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  color: var(--ink);
  transition: border-color .15s;
}
.card:hover { border-color: #bbb; }
.card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.thumb {
  position: relative;
  aspect-ratio: 1;
  background: var(--soft);
  display: grid; place-items: center;
  overflow: hidden;
}
.thumb:has(img), .detail-media:has(img) { background: #fff; }
/* Photos sit inside the square; tall or wide images never stretch the card. */
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.thumb .ph { font-weight: 800; font-size: 20px; text-transform: uppercase; color: #c9c9c9; padding: 16px; text-align: center; }
.badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.card-brand { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.card-name { font-size: 14px; font-weight: 700; line-height: 1.3; }
.card-meta { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-foot { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card-price { font-weight: 700; font-size: 14px; }
.card-flv { font-size: 12px; color: var(--muted); }
.card-match { font-size: 12px; color: var(--ink); margin-top: 4px; }
mark { background: #ffe58a; color: inherit; border-radius: 2px; }
.status, .empty { grid-column: 1 / -1; color: var(--muted); padding: 40px 0; text-align: center; }

/* Detail dialog */
.detail {
  width: min(880px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  border: 0; border-radius: 16px; padding: 0;
  display: none;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  color: var(--ink);
}
.detail[open] { display: grid; }
.detail::backdrop { background: rgba(0, 0, 0, .45); }
.close {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: #fff; font-size: 24px; line-height: 1; cursor: pointer;
}
.close:hover { background: var(--soft); }
.detail-media { position: relative; background: var(--soft); display: grid; place-items: center; min-height: 340px; }
/* The photo fills its panel without ever setting the panel's height, so it is never cut off;
   only the flavor list scrolls. */
.detail-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 24px; }
.detail-media .ph { font-weight: 800; font-size: 28px; text-transform: uppercase; color: #c9c9c9; }
.detail-body { padding: 32px 28px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.detail-brand { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.detail-body h2 { margin: 4px 0 6px; font-size: 24px; font-weight: 800; line-height: 1.2; }
.detail-meta { margin: 0; color: var(--muted); font-size: 14px; }
.detail-price { margin: 12px 0 0; font-size: 22px; font-weight: 800; }
.detail-price:empty { display: none; }
.detail-body h3 { margin: 22px 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; }
.pill.out { color: #aaa; text-decoration: line-through; background: var(--soft); }
.pill.hit { border-color: var(--ink); }
button.pill { font: inherit; font-size: 13px; font-weight: 600; background: #fff; color: var(--ink); cursor: pointer; }
button.pill:hover { border-color: var(--ink); }
button.pill.out { background: var(--soft); color: #aaa; }
.pill[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.pills .none { color: var(--muted); font-size: 14px; }
.detail-note { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* Footer */
/* Footer */
.footer { background: var(--ink); color: #c9c9c9; padding: 56px 0 28px; font-size: 14px; line-height: 1.6; }
.footer a { color: inherit; text-decoration: none; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-logo { display: inline-flex; align-items: center; gap: 12px; color: #fff; }
.footer-logo img { width: 52px; height: 52px; }
.footer-logo span { font-weight: 800; font-size: 17px; text-transform: uppercase; letter-spacing: .04em; line-height: 1.15; color: #fff; }
.footer-logo small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .18em; color: #8a8a8a; }
.footer-brand p { margin: 14px 0 16px; max-width: 30ch; }
.footer-social {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid #3a3a3a; border-radius: 50%; color: #fff;
}
.footer-social:hover { border-color: #fff; }
.footer h2 { margin: 4px 0 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #8a8a8a; }
.footer-col p { margin: 0 0 10px; color: #e6e6e6; }
.footer-link { font-weight: 700; color: #fff !important; }
.footer-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-hours { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 4px 18px; margin: 0; }
.footer-hours dt { color: #8a8a8a; }
.footer-hours dd { margin: 0; color: #e6e6e6; }
.footer-contact { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: #e6e6e6 !important; }
.footer-contact svg { flex: none; color: #8a8a8a; }
.footer-contact:hover span { text-decoration: underline; text-underline-offset: 3px; }
.footer-actions { display: none; }
.footer .btn-light { color: var(--ink); }
.footer .btn-outline-light { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 12px 24px;
  margin-top: 44px; padding-top: 20px; border-top: 1px solid #2c2c2c;
  font-size: 12px; color: #8a8a8a;
}
.footer-bottom p { margin: 0; }
.footer-login { color: #6f6f6f !important; }
.footer-login:hover { color: #ccc !important; }

/* Buttons + age gate */
.btn {
  display: inline-block;
  font: 700 14px var(--font);
  padding: 13px 26px;
  background: var(--ink); color: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: #333; border-color: #333; }
.btn-ghost { background: #fff; color: var(--ink); }
.btn-ghost:hover { background: var(--soft); border-color: var(--ink); }
.agegate { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0, 0, 0, .6); padding: 16px; }
.agegate[hidden] { display: none; }
.agegate-box { background: #fff; border-radius: 16px; padding: 36px 28px; text-align: center; max-width: 400px; width: 100%; }
.agegate-box img { margin: 0 auto 10px; }
.agegate-box h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.agegate-box p { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
.agegate-actions { display: flex; gap: 10px; justify-content: center; }
body.gated { overflow: hidden; }

@media (max-width: 900px) {
  .search { flex-basis: 220px; }
  .list-head { scroll-margin-top: 80px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* Home / landing */
.home { padding-top: 24px; }
.home[hidden] { display: none; }
.hero[hidden] { display: none; }
.hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 24px;
  background: var(--ink);
  color: #fff;
  border-radius: 20px;
  padding: 56px 56px;
  overflow: hidden;
}
.hero-eyebrow { margin: 0 0 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #ff6b63; }
.hero h1 { margin: 0; font-size: clamp(34px, 5vw, 58px); font-weight: 800; line-height: 1.03; letter-spacing: -.02em; max-width: 13ch; }
.hero-sub { margin: 18px 0 28px; font-size: 16px; color: #c9c9c9; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-light { background: #fff; color: var(--ink); border-color: #fff; }
.btn-light:hover { background: #e9e9e9; border-color: #e9e9e9; }
.btn-outline-light { background: transparent; color: #fff; border-color: #555; }
.btn-outline-light:hover { background: transparent; border-color: #fff; }
.hero-logo { justify-self: center; width: min(100%, 300px); height: auto; transform: rotate(-6deg); }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.tile {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  background: var(--soft); border: 0; border-radius: var(--radius);
  padding: 22px 22px; cursor: pointer; text-align: left; color: var(--ink);
}
.tile span { font-size: 18px; font-weight: 800; }
.tile small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.tile:hover { background: #ebebeb; }
.tile-red { background: var(--red); color: #fff; }
.tile-red small { color: #ffd9d6; }
.tile-red:hover { background: #b12a25; }

.row { margin-top: 44px; }
.row[hidden] { display: none; }
.row-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.row-head h2 { margin: 0; font-size: 22px; font-weight: 800; }
.row-link { border: 0; background: none; cursor: pointer; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; color: var(--ink); padding: 0; }
/* Swipe rows: a flex strip that snaps each card's left edge into place, like Apple's carousels.
   --per-view sets how many cards fit across; a fraction leaves the next card peeking in. */
.rail {
  --per-view: 5;
  --gap: 16px;
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;  /* a sideways swipe never drags the page or triggers "back" */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.rail > * {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  min-width: 0;
  scroll-snap-align: start;
}
/* Brands: one even row of cards, each with a photo from that brand. */
.rail.brands { --per-view: 7; }
.brand-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 10px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink); cursor: pointer;
}
.brand-card:hover { border-color: #bbb; }
.brand-thumb { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 8px; overflow: hidden; }
.brand-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.brand-thumb .ph { font-weight: 800; font-size: 13px; text-transform: uppercase; color: #c9c9c9; }
.brand-name { font-size: 14px; font-weight: 700; }
.brand-card small { font-size: 12px; color: var(--muted); }
.home + .list-head { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.home[hidden] + .list-head { margin-top: 32px; padding-top: 0; border-top: 0; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 40px 28px; }
  .hero-logo { display: none; }
  .rail { --per-view: 2.5; }
  .rail.brands { --per-view: 4.5; }
}

/* Banners span the window. Each is "rounded" (inside the page margins, like the rest of the
   content) or "full" (edge to edge, flush under the store bar when it comes first). The owner
   picks the layout: stacked down the page, or a rotating carousel. */
.banners {
  --inner: min(100vw - 40px, 1200px);   /* the page's content width (.wrap) */
  --ratio: 12 / 5;
  --radius: 20px;
  --gap: 12px;
  --top: 24px;                          /* space above a rounded banner at the top */
  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  display: flex; flex-direction: column; gap: var(--gap);
}
.home.has-banners { padding-top: 0; }
.banner { display: block; width: 100%; border: 0; padding: 0; margin: 0; background: none; cursor: default; }
button.banner { cursor: pointer; }
.banner img { display: block; width: 100%; aspect-ratio: var(--ratio); object-fit: cover; }
.banner.rounded { padding-inline: calc((100vw - var(--inner)) / 2); }
.banner.rounded:first-child { padding-top: var(--top); }
.banner.rounded img { border-radius: var(--radius); }

/* Carousel: one banner at a time. Every slide has the same height (the rounded size plus its
   top space) so mixed shapes rotate without the page jumping. */
.banners.carousel { display: block; overflow: hidden; }
.banner-track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.banner-track .banner { flex: 0 0 100%; scroll-snap-align: start; height: calc(var(--inner) / (var(--ratio)) + var(--top)); }
.banner-track .banner img { height: 100%; aspect-ratio: auto; }
.banner-track .banner.rounded { padding-top: var(--top); }
.banner-nav {
  position: absolute; top: calc(50% + var(--top) / 2); transform: translateY(-50%);
  width: 52px; height: 52px; padding: 0;
  border: 0; background: none; color: #fff; cursor: pointer;
  display: grid; place-items: center;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
  opacity: 0; transition: opacity .15s;
}
.banner-nav.prev { left: calc((100vw - var(--inner)) / 2 + 8px); }
.banner-nav.next { right: calc((100vw - var(--inner)) / 2 + 8px); }
.banners:hover .banner-nav, .banner-nav:focus-visible { opacity: 1; }
.dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; }
.dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); cursor: pointer; transition: width .2s; }
.dots button[aria-current="true"] { width: 24px; background: #fff; }

/* Spotlight: two big product panels */
.spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.spotlight[hidden] { display: none; }
.spot {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  border: 0; border-radius: 20px; padding: 28px 12px 28px 32px;
  text-align: left; cursor: pointer; color: var(--ink);
  min-height: 260px; overflow: hidden;
}
.spot-0 { background: #f1ece4; }
.spot-1 { background: #e7edf0; }
.spot img { width: 100%; max-height: 240px; object-fit: contain; mix-blend-mode: multiply; transition: transform .25s; }
.spot:hover img { transform: scale(1.04); }
.spot-text { display: flex; flex-direction: column; gap: 4px; }
.spot-brand { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.spot-name { font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.spot-meta { font-size: 14px; color: #444; }
.spot-cta { margin-top: 14px; align-self: flex-start; font-size: 13px; font-weight: 700; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #fff; }

/* Rail arrows (mouse only; touch just swipes) */
.rail-nav { display: none; gap: 2px; margin-right: -6px; }
.rail-nav button {
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border: 0; background: none; color: var(--ink); cursor: pointer;
}
.rail-nav button:hover { color: var(--red); }
@media (hover: hover) { .rail-nav { display: flex; } }

/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: -4px 0 20px; }
.filters label { display: flex; align-items: center; gap: 8px; background: var(--soft); border-radius: 999px; padding: 0 6px 0 16px; }
.filters label span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.filters select {
  border: 0; background: transparent; font: 600 14px var(--font); color: var(--ink);
  padding: 10px 8px; cursor: pointer; max-width: 180px;
}
.filters select:focus-visible { outline: none; }
.filters label:focus-within { box-shadow: 0 0 0 2px var(--ink); }
.filters .clear { border: 0; background: none; font: 700 13px var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--red); padding: 8px; }
.filters .clear[hidden] { display: none; }

@media (max-width: 900px) {
  .spot { grid-template-columns: 1.1fr 1fr; padding: 22px 8px 22px 22px; min-height: 200px; }
}
.hint-inline { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); margin-left: 6px; }

/* Phones: everything that changes below 640px lives here. */
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }

  /* Top of page */
  .warning { font-size: 10px; padding: 7px 12px; }
  /* One row, same height as desktop: menu button, logo in the middle, search button. */
  .header-inner { grid-template-columns: 44px 1fr 44px; gap: 8px; padding: 11px 12px; }
  .brand img { width: 48px; height: 48px; }
  .icon-btn { display: grid; }
  .brand { justify-self: center; }
  .brand span { font-size: 15px; }
  .brand small { font-size: 10px; }
  .header-actions { display: none; }
  /* The category row only appears as the open menu or the search field. */
  .nav { display: none; }
  .header.menu-open .nav, .header.searching .nav { display: block; }
  /* The menu and search drop down over the page instead of pushing it down; the menu also dims it. */
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
  }
  .header.menu-open .nav { box-shadow: 0 10px 20px rgba(0, 0, 0, .08), 0 0 0 100vmax rgba(0, 0, 0, .35); clip-path: inset(0 0 -100vmax 0); }
  .nav-inner { flex-direction: column; align-items: stretch; gap: 0; }
  .header.menu-open .tabs { flex-direction: column; gap: 0; }
  .header.menu-open .tabs button {
    text-align: left; font-size: 14px; padding: 15px 4px;
    border-bottom: 1px solid var(--line);
  }
  .header.menu-open .tabs button[aria-pressed="true"] { color: var(--red); border-bottom-color: var(--line); }
  .header.menu-open .menu-call { display: block; padding: 15px 4px; font-weight: 700; text-decoration: none; }
  .header.menu-open .search { display: none; }
  .header.searching .tabs { display: none; }
  .header.searching .search { flex: 1 1 auto; margin: 10px 0; }
  .storebar { font-size: 12px; }
  .storebar-inner { justify-content: center; text-align: center; gap: 2px 14px; padding-top: 8px; padding-bottom: 8px; }

  /* Home */
  .home { padding-top: 14px; }
  .hero { padding: 30px 22px; border-radius: 14px; }
  /* Phones: a little taller and zoomed in so banners pop; 2:1 still keeps edge text on most promo art. */
  .banners { --inner: calc(100vw - 32px); --ratio: 2 / 1; --radius: 14px; --gap: 8px; --top: 14px; }
  .spotlight { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
  .spot {
    grid-template-columns: 1fr; align-content: start; gap: 10px;
    padding: 14px; min-height: 0; border-radius: 14px;
  }
  .spot img { order: -1; height: 120px; max-height: none; }
  .spot-brand { font-size: 10px; }
  .spot-name { font-size: 16px; }
  .spot-meta { font-size: 12px; }
  .spot-cta { margin-top: 8px; padding: 7px 12px; font-size: 12px; }
  .tiles { gap: 8px; margin-top: 8px; }
  .tile {
    flex-direction: column; justify-content: space-between; align-items: flex-start;
    gap: 6px; padding: 12px; min-height: 70px;
  }
  .tile span { font-size: 14px; line-height: 1.2; }
  .tile small { font-size: 11px; }
  .row { margin-top: 32px; }
  .row-head { margin-bottom: 10px; }
  .row-head h2 { font-size: 19px; }
  /* Edge to edge: cards start at the page gutter and can scroll under the screen edge. The
     ::after spacer keeps the same gutter after the last card (padding there is unreliable). */
  .rail {
    --per-view: 2.15; --gap: 10px;
    margin-inline: -16px; padding-left: 16px; scroll-padding-left: 16px;
  }
  .rail::after { content: ""; flex: 0 0 6px; }
  .rail.brands { --per-view: 3.3; }
  .brand-card { padding: 10px 8px 12px; }
  .brand-name { font-size: 13px; }
  .brand-card small { font-size: 11px; }
  .home + .list-head { margin-top: 36px; padding-top: 24px; }

  /* Product list */
  .list-head { margin: 24px 0 12px; scroll-margin-top: 90px; }
  .list-head h2 { font-size: 21px; }
  .filters { flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  .filters label { flex: 1 1 0; min-width: 0; padding-left: 12px; }
  .filters label span { display: none; }  /* the selected value says enough on a phone */
  .filters select { flex: 1; min-width: 0; max-width: none; font-size: 13px; padding: 9px 6px; }
  .filters .clear { flex-basis: 100%; text-align: left; padding: 2px 0; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 48px; }
  .thumb img { padding: 8px; }
  .card-body { padding: 10px 12px 12px; }
  .card-brand { font-size: 10px; }
  .card-name { font-size: 13px; }
  .card-meta, .card-flv { font-size: 11px; }
  .card-price { font-size: 13px; }

  /* Product popup */
  .detail { grid-template-columns: 1fr; }
  .detail-media { min-height: 0; height: 240px; }
  .detail-media img { padding: 16px; }
  .detail-body { padding: 20px 18px 24px; max-height: calc(100dvh - 32px - 240px); }
  .detail-body h2 { font-size: 21px; }
  .pill { padding: 6px 12px; font-size: 12px; }
  button.pill { font-size: 12px; }

  /* Footer */
  /* Phones: brand, then big Call / Directions buttons, then address and hours side by side. */
  .footer { padding: 36px 0 24px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 26px 16px; }
  .footer-brand { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; }
  .footer-brand p { grid-column: 1 / -1; grid-row: 2; margin: 12px 0 0; }
  .footer-social { grid-column: 2; grid-row: 1; }
  .footer-link { display: none; }  /* the Directions button covers it */
  .footer-actions { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .footer-actions .btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; font-size: 14px; }
  .footer-contact-col { display: none; }  /* covered by the Call button and the Instagram icon */
  .footer h2 { margin-bottom: 8px; }
  .footer-col p, .footer-hours { font-size: 13px; }
  .footer-hours { gap: 2px 12px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 30px; line-height: 1.5; }
}