/* ==========================================================
   pages/gator-tobacco.css — Gator Tobacco Smoke Shop

   This page runs its OWN design language, deliberately split
   from the cigar side of the site. The cigar pages are warm,
   earthy, amber-on-brown. This one is a Florida summer night:
   a blue-violet black base with saturated cyan / magenta /
   violet / lime neon, and one amber thread kept as the bridge
   back to the brand.

   Nothing here reads from the cigar pages' surface tokens.
   The typography scale, spacing rhythm, and reveal timing are
   shared with the rest of the site; the colour is not.

   Written mobile-first. Base rules target narrow portrait;
   min-width queries add desktop. The "what we carry" section
   is a native scroll-snap carousel — the browser owns swiping
   and momentum, which is both faster and better-feeling on a
   phone than any transform-drag implementation.

   Placeholder art lives in assets/images/showcase/ and is
   referenced only through --plate-* / --cat-* custom
   properties, so swapping in real photography is a one-line
   change per image.
   ========================================================== */

.page-smokeshop {
  /* ─ Night palette ─ */
  --nt-void:    #050409;
  --nt-base:    #0a0812;
  --nt-panel:   #14111f;
  --nt-panel-2: #1c1730;
  --nt-cyan:    #22d3ee;
  --nt-magenta: #ff2d95;
  --nt-violet:  #a855f7;
  --nt-lime:    #b6f34a;
  --nt-amber:   #ffb77d;
  --nt-text:    #ece8f7;
  --nt-muted:   #a79dc2;
  --nt-rule:    rgba(168, 85, 247, 0.22);

  /* Default slide accent; each category overrides it below. */
  --accent:     var(--nt-cyan);

  /* ─ Plates ─ */
  --plate-hero:       url('../../assets/images/showcase/night_hero_wide.svg');
  --plate-storefront: url('../../assets/images/showcase/night_storefront_wide.svg');
  --plate-break:      url('../../assets/images/showcase/night_break_wide.svg');
  --grain:            url('../../assets/images/plates/grain_tile.svg');

  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(1.1rem, 4vw, 3rem);

  position: relative;
  min-height: 100svh;
  background-color: var(--nt-base);
  color: var(--nt-text);
  font-family: var(--font-body);
  /* overflow:clip (not hidden) — see css/pages/brand.css .brand-page for why */
  overflow: clip;
}

/* ── Fixed background plates ──────────────────────────────
   LOCKED. These never translate — on desktop or mobile. Only
   opacity animates, so each plate rasterises once and the
   compositor crossfades them with no repaint. Height is pinned
   to --locked-bg-height (set from window.screen.height by
   main.js) so the mobile address bar sliding in and out cannot
   resize the plate mid-scroll, which is the actual cause of the
   fixed-background jank this site works around elsewhere. */
.ss-plate {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--locked-bg-height, 100lvh);
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transform: translateZ(0);
  transition: opacity 1.1s var(--ease-out-soft);
  will-change: opacity;
}
.ss-plate.is-active { opacity: 1; }

.ss-plate[data-plate="hero"]       { background-image: var(--plate-hero); }
.ss-plate[data-plate="storefront"] { background-image: var(--plate-storefront); }
.ss-plate[data-plate="break"]      { background-image: var(--plate-break); }

.ss-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--grain);
  background-repeat: repeat;
  opacity: 0.04;
  mix-blend-mode: overlay;
}

.ss-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  background: linear-gradient(90deg, var(--nt-cyan), var(--nt-violet), var(--nt-magenta));
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

.ss-flow { position: relative; z-index: 20; }

.ss-inner {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.ss-solid  { background-color: var(--nt-base); }
.ss-sunken { background-color: var(--nt-void); }

/* ── Shared type ─────────────────────────────────────────── */
.ss-label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
  color: var(--nt-cyan);
  text-shadow: 0 0 18px rgba(34, 211, 238, 0.5);
}
.ss-label::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  margin-top: 0.7rem;
  background: linear-gradient(90deg, var(--nt-cyan), transparent);
  transition: width 1.4s var(--ease-out-soft) 0.2s;
}
.reveal-on-scroll.visible .ss-label::after { width: 4.5rem; }

.ss-title {
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 7vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin-bottom: 0.9rem;
}

.ss-desc {
  color: var(--nt-muted);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 38rem;
}
.ss-desc + .ss-desc { margin-top: 0.9rem; }
.ss-desc a { color: var(--nt-cyan); text-decoration: underline; text-underline-offset: 3px; }

/* ── HERO ─────────────────────────────────────────────────── */
.ss-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-height-mobile) + 3rem) var(--gutter) 7rem;
}
.ss-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20svh;
  background: linear-gradient(to bottom, transparent, var(--nt-base));
  pointer-events: none;
}

.ss-hero-eyebrow {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.5625rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--nt-text);
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--nt-rule);
  background: rgba(10, 8, 18, 0.55);
  box-shadow: 0 0 30px -6px rgba(168, 85, 247, 0.55) inset;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-bottom: 1.5rem;
}

.ss-hero-title {
  font-family: var(--font-headline);
  font-size: clamp(2.35rem, 12vw, 6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 1rem;
  /* Neon fill: bright core, cool falloff, plus a soft bloom. */
  background: linear-gradient(178deg, #ffffff 8%, var(--nt-text) 42%, var(--nt-violet) 108%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 34px rgba(168, 85, 247, 0.5));
}
.ss-hero-title em {
  display: block;
  font-style: normal;
  font-family: var(--font-label);
  font-size: 0.19em;
  font-weight: 300;
  letter-spacing: 0.26em;
  margin-top: 1.1rem;
  background: none;
  color: var(--nt-cyan);
  -webkit-text-fill-color: var(--nt-cyan);
  filter: none;
  text-shadow: 0 0 20px rgba(34, 211, 238, 0.6);
}

.ss-hero-desc {
  max-width: 36rem;
  margin: 0 auto;
  color: rgba(236, 232, 247, 0.84);
  font-size: clamp(0.95rem, 3.6vw, 1.15rem);
  line-height: 1.72;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
}

.ss-hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.9rem;
}
.ss-hero-meta span {
  font-family: var(--font-label);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nt-muted);
  padding: 0.55rem 0.85rem;
  border-radius: 0.5rem;
  border: 1px solid var(--nt-rule);
  background: rgba(10, 8, 18, 0.6);
}

.ss-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: max(2.25rem, env(safe-area-inset-bottom));
  color: var(--nt-cyan);
  opacity: 0.7;
  z-index: 2;
  filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.7));
}

/* ── STORY ────────────────────────────────────────────────── */
.ss-story {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  padding: clamp(3.5rem, 10svh, 7rem) 0;
}

.ss-story-media {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--nt-rule);
  box-shadow: 0 26px 80px -30px rgba(0, 0, 0, 0.95),
              0 0 60px -30px rgba(168, 85, 247, 0.6);
}
.ss-story-media::before {
  content: '';
  position: absolute;
  inset: -6%;
  background-image: var(--plate-storefront);
  background-size: cover;
  background-position: center;
  animation: ss-drift 26s ease-in-out infinite alternate;
}
@keyframes ss-drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.08) translate3d(-1.5%, -2%, 0); }
}

.ss-timeline {
  margin-top: 1.75rem;
  padding-left: 1.6rem;
  position: relative;
}
.ss-timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 1px;
  height: 0;
  background: linear-gradient(to bottom, var(--nt-cyan), var(--nt-violet), transparent);
  transition: height 1.8s var(--ease-out-soft) 0.3s;
}
.reveal-on-scroll.visible .ss-timeline::before { height: calc(100% - 0.8rem); }

.ss-timeline-item { position: relative; }
.ss-timeline-item + .ss-timeline-item { margin-top: 1.3rem; }
.ss-timeline-item::before {
  content: '';
  position: absolute;
  left: -1.6rem;
  top: 0.5rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nt-cyan);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.14), 0 0 14px rgba(34, 211, 238, 0.9);
}
.ss-timeline-year {
  display: block;
  font-family: var(--font-label);
  font-size: 0.5625rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--nt-cyan);
  margin-bottom: 0.2rem;
}
.ss-timeline-text { color: var(--nt-muted); font-size: 0.9rem; line-height: 1.68; }

/* ══════════════════════════════════════════════════════════
   WHAT WE CARRY — category carousel
   Each category gets the full stage rather than a grid cell,
   so the imagery can carry it and the brands can be large
   enough to actually register.
   ══════════════════════════════════════════════════════════ */
.ss-cats { padding: clamp(3.5rem, 10svh, 7rem) 0; }

.ss-cats-head {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto clamp(2rem, 5svh, 3rem);
  padding: 0 var(--gutter);
}
.ss-cats-head .ss-desc { margin-inline: auto; }
.ss-cats-head .ss-label::after { margin-inline: auto; }

.ss-carousel { position: relative; }

/* The scroll container.

   DO NOT set touch-action here. This is load-bearing and was the cause
   of a total scroll lockout on mobile.

   touch-action does NOT mean "this element claims this axis, others
   pass through". The browser computes the effective behaviour as the
   INTERSECTION of the value on the touched element and every one of
   its ancestors. Because this track is an ancestor of every card,
   putting `pan-x` here forbade vertical panning for the entire
   carousel subtree — a swipe on a card image could no longer scroll
   the page at all. Worse, combined with `pan-y` on the nested brand
   list, the intersection was empty and that area scrolled in neither
   direction.

   Left at the default `auto`, the browser routes a horizontal drag to
   this track and a vertical drag up to the page, from anywhere in the
   section. That is the behaviour we want.

   scroll-snap-type is proximity, not mandatory: mandatory forces a
   full snap-to-card animation on every release, which reads as the
   carousel fighting the user rather than following them.

   overscroll-behavior-x:contain stops a swipe past the last slide from
   triggering browser back-navigation. It is -x scoped on purpose so it
   cannot interfere with vertical scroll chaining. */
.ss-carousel-track {
  position: relative;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  padding: 0.5rem var(--gutter) 1.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ss-carousel-track::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Flex column so .ss-cat-body can own the leftover height and hand
   it to the scroll region. The track's default align-items:stretch
   makes every card match the tallest, so the scrollers absorb the
   difference between a 3-brand category and a 12-brand one and the
   carousel stays visually even. */
.ss-cat {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: min(86vw, 26rem);
  scroll-snap-align: center;
  position: relative;
  isolation: isolate;
  border-radius: 1.15rem;
  overflow: hidden;
  border: 1px solid var(--nt-rule);
  background: linear-gradient(168deg, var(--nt-panel-2), var(--nt-void) 68%);
  transition: border-color 0.5s ease, box-shadow 0.7s var(--ease-out-soft), transform 0.7s var(--ease-out-soft);
}

/* Per-category accent. Drives the image glow, index chip, and
   brand-tile hover — one variable re-skins the whole slide.
   These must stay in sync with the key colours in
   scripts/generate-smokeshop-assets.js (and, later, with the
   lighting of the real photograph that replaces each card). */
.ss-cat[data-cat="vape"]       { --accent: var(--nt-cyan); }
.ss-cat[data-cat="hardware"]   { --accent: var(--nt-violet); }
.ss-cat[data-cat="cigarillo"]  { --accent: var(--nt-amber); }
.ss-cat[data-cat="wraps"]      { --accent: var(--nt-amber); }
.ss-cat[data-cat="papers"]     { --accent: var(--nt-lime); }
.ss-cat[data-cat="hookah"]     { --accent: var(--nt-violet); }
.ss-cat[data-cat="glass"]      { --accent: var(--nt-cyan); }
.ss-cat[data-cat="hemp"]       { --accent: var(--nt-lime); }
.ss-cat[data-cat="kratom"]     { --accent: var(--nt-lime); }
.ss-cat[data-cat="ambience"]   { --accent: var(--nt-magenta); }
.ss-cat[data-cat="essentials"] { --accent: var(--nt-magenta); }

.ss-cat-figure {
  position: relative;
  flex: none;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.ss-cat[data-cat="vape"]       .ss-cat-figure { background-image: url('../../assets/images/showcase/category_vape.svg'); }
.ss-cat[data-cat="hardware"]   .ss-cat-figure { background-image: url('../../assets/images/showcase/category_hardware.svg'); }
.ss-cat[data-cat="cigarillo"]  .ss-cat-figure { background-image: url('../../assets/images/showcase/category_cigarillo.svg'); }
.ss-cat[data-cat="wraps"]      .ss-cat-figure { background-image: url('../../assets/images/showcase/category_wraps.svg'); }
.ss-cat[data-cat="papers"]     .ss-cat-figure { background-image: url('../../assets/images/showcase/category_papers.svg'); }
.ss-cat[data-cat="hookah"]     .ss-cat-figure { background-image: url('../../assets/images/showcase/category_hookah.svg'); }
.ss-cat[data-cat="glass"]      .ss-cat-figure { background-image: url('../../assets/images/showcase/category_glass.svg'); }
.ss-cat[data-cat="hemp"]       .ss-cat-figure { background-image: url('../../assets/images/showcase/category_hemp.svg'); }
.ss-cat[data-cat="kratom"]     .ss-cat-figure { background-image: url('../../assets/images/showcase/category_kratom.svg'); }
.ss-cat[data-cat="ambience"]   .ss-cat-figure { background-image: url('../../assets/images/showcase/category_ambience.svg'); }
.ss-cat[data-cat="essentials"] .ss-cat-figure { background-image: url('../../assets/images/showcase/category_essentials.svg'); }

/* Bottom fade so the image dissolves into the card body. */
.ss-cat-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 42%, var(--nt-void));
}

/* Index chip riding the top-left of the image. */
.ss-cat-index {
  position: absolute;
  z-index: 2;
  top: 0.85rem;
  left: 0.85rem;
  font-family: var(--font-headline);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  padding: 0.3rem 0.6rem;
  border-radius: 0.4rem;
  border: 1px solid currentColor;
  background: rgba(5, 4, 9, 0.7);
  text-shadow: 0 0 14px currentColor;
}

.ss-cat-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;   /* lets the scroll region actually shrink inside flex */
  margin-top: -2.5rem;
  padding: 0 1.25rem 1.25rem;
}

.ss-cat-title {
  font-family: var(--font-headline);
  font-size: 1.35rem;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.ss-cat-desc {
  color: var(--nt-muted);
  font-size: 0.875rem;
  line-height: 1.68;
  margin-bottom: 0.9rem;
}

/* ── Inventory region ─────────────────────────────────────
   Some categories carry a dozen-plus tiles. On a POINTER DEVICE this
   is a bounded scroller so cards stay a tidy uniform height and the
   wheel can run the list.

   On touch it is NOT a scroller — see the (pointer: coarse) block in
   the responsive section. A nested vertical scroller inside a
   horizontal carousel is the root cause of "which axis owns this
   swipe" ambiguity: even when it works, it eats the first stretch of
   any upward drag before the page starts moving, which is exactly the
   hang-up this section was reported for. Collapsing it on touch leaves
   precisely one vertical scroller (the page) and one horizontal
   scroller (the track), so no gesture is ever contested.

   Note touch-action is deliberately NOT set here either — see the
   .ss-carousel-track comment for why it is actively harmful.

   The bottom mask fades the final rows so it is visually obvious the
   list continues; the site hides scrollbars globally, so there would
   otherwise be no affordance at all. It is removed on touch, where
   the list is fully expanded and nothing is being cut off. */
.ss-cat-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 13.5rem;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-top: 0.9rem;
  padding-right: 0.15rem;
  border-top: 1px solid rgba(168, 85, 247, 0.18);
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent);
          mask-image: linear-gradient(to bottom, #000 88%, transparent);
}
.ss-cat-scroll::-webkit-scrollbar { display: none; width: 0; }

.ss-cat-group-label {
  font-family: var(--font-label);
  font-size: 0.5625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
  opacity: 0.9;
}
.ss-cat-group-label + .ss-cat-brands { margin-bottom: 0.9rem; }
.ss-cat-brands + .ss-cat-group-label { margin-top: 0.2rem; }

/* ── Brand tiles ──────────────────────────────────────────
   Promoted from small inline chips to a real grid. These are
   the reason the page exists; they get the size to match. */
.ss-cat-brands {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
}

/* Secondary list — product types rather than brands. Same grid,
   quieter treatment so the brand names stay dominant. */
.ss-cat-brands--plain .ss-brand-tile {
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--nt-muted);
  background: rgba(20, 17, 31, 0.5);
  border-style: dashed;
}
.ss-brand-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(168, 85, 247, 0.2);
  background: rgba(20, 17, 31, 0.8);
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--nt-text);
  transition: border-color 0.35s ease, color 0.35s ease,
              background 0.35s ease, box-shadow 0.45s ease;
}
@media (hover: hover) {
  .ss-brand-tile:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(20, 17, 31, 1);
    box-shadow: 0 0 22px -6px var(--accent);
  }
}

/* Pinned below the scroll region — a compliance note must never be
   something you have to scroll a sub-list to discover. */
.ss-cat-note {
  flex: none;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(168, 85, 247, 0.14);
  font-size: 0.6875rem;
  line-height: 1.55;
  color: rgba(167, 157, 194, 0.78);
  font-style: italic;
}

/* ── Carousel controls ────────────────────────────────────── */
.ss-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.25rem;
  padding: 0 var(--gutter);
}

.ss-carousel-dots {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
/* 44px hit area around a 7px visual dot — the target has to be
   thumb-sized even though the dot should not be. */
.carousel-dot {
  position: relative;
  width: 1.5rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  background: none;
}
.carousel-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: rgba(167, 157, 194, 0.35);
  transition: background 0.4s ease, width 0.5s var(--ease-out-soft), box-shadow 0.4s ease;
}
.carousel-dot.is-active::after {
  width: 1.5rem;
  background: var(--nt-cyan);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.9);
}

.ss-carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid var(--nt-rule);
  background: rgba(20, 17, 31, 0.85);
  color: var(--nt-text);
  transition: color 0.35s ease, border-color 0.35s ease, box-shadow 0.4s ease;
}
.ss-carousel-btn:active { transform: scale(0.94); }
@media (hover: hover) {
  .ss-carousel-btn:hover {
    color: var(--nt-cyan);
    border-color: var(--nt-cyan);
    box-shadow: 0 0 22px -6px var(--nt-cyan);
  }
}

/* ── PARALLAX-FREE QUOTE BREAK ────────────────────────────── */
.ss-break {
  position: relative;
  min-height: 62svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(3.5rem, 10svh, 7rem) var(--gutter);
}
.ss-break::before,
.ss-break::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 15svh;
  pointer-events: none;
}
.ss-break::before { top: 0;    background: linear-gradient(to bottom, var(--nt-base), transparent); }
.ss-break::after  { bottom: 0; background: linear-gradient(to top, var(--nt-void), transparent); }

.ss-break-quote {
  position: relative;
  max-width: 44rem;
  font-family: var(--font-headline);
  font-size: clamp(1.3rem, 5.6vw, 2.5rem);
  line-height: 1.32;
  letter-spacing: -0.015em;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.9);
}
.ss-break-attr {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--font-label);
  font-size: 0.5625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--nt-cyan);
  text-shadow: 0 0 18px rgba(34, 211, 238, 0.6);
}

/* ── BRAND MARQUEE ────────────────────────────────────────── */
.ss-brands { padding: clamp(3.5rem, 10svh, 6rem) 0; }
.ss-brands-head { text-align: center; max-width: 42rem; margin: 0 auto clamp(1.75rem, 4svh, 2.5rem); padding: 0 var(--gutter); }
.ss-brands-head .ss-desc { margin-inline: auto; }
.ss-brands-head .ss-label::after { margin-inline: auto; }

.ss-marquee {
  position: relative;
  overflow: hidden;
  padding: 0.4rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.ss-marquee + .ss-marquee { margin-top: 0.7rem; }

.ss-marquee-track {
  display: flex;
  gap: 0.7rem;
  width: max-content;
  animation: ss-marquee var(--dur, 48s) linear infinite;
  animation-direction: var(--dir, normal);
}
.ss-marquee:hover .ss-marquee-track { animation-play-state: paused; }
@keyframes ss-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.ss-brand-chip {
  flex: none;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nt-muted);
  padding: 0.65rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--nt-rule);
  background: rgba(20, 17, 31, 0.75);
  white-space: nowrap;
}

/* ── COMPLIANCE BAND ──────────────────────────────────────
   Deliberately the least styled thing on the page. This is a
   legal notice and should read as one. */
.ss-compliance {
  padding: clamp(2.25rem, 6svh, 3.5rem) 0;
  border-top: 1px solid rgba(168, 85, 247, 0.2);
  border-bottom: 1px solid rgba(168, 85, 247, 0.2);
  background: rgba(5, 4, 9, 0.8);
}
.ss-compliance-grid { display: grid; grid-template-columns: 1fr; gap: 1.35rem; }
.ss-compliance-item { display: flex; gap: 0.85rem; align-items: flex-start; }
.ss-compliance-item .material-symbols-outlined {
  color: var(--nt-cyan);
  font-size: 1.3rem;
  flex: none;
  margin-top: 0.1rem;
}
.ss-compliance-title {
  display: block;
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nt-text);
  margin-bottom: 0.3rem;
}
.ss-compliance-text { font-size: 0.8125rem; line-height: 1.68; color: var(--nt-muted); }
.ss-compliance-text a { color: var(--nt-cyan); text-decoration: underline; text-underline-offset: 3px; }

/* ── FAQ ──────────────────────────────────────────────────── */
.ss-faq { padding: clamp(3.5rem, 10svh, 6rem) 0; }
.ss-faq-head { text-align: center; max-width: 42rem; margin: 0 auto clamp(1.75rem, 4svh, 2.5rem); }
.ss-faq-head .ss-desc { margin-inline: auto; }
.ss-faq-head .ss-label::after { margin-inline: auto; }

.ss-faq-list { max-width: 52rem; margin: 0 auto; }
.ss-faq-item { border-bottom: 1px solid rgba(168, 85, 247, 0.18); }

.ss-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  min-height: 3.25rem;
  text-align: left;
  padding: 1.15rem 0;
  font-family: var(--font-headline);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--nt-text);
  transition: color 0.35s ease;
}
.ss-faq-q:hover { color: var(--nt-cyan); }
.ss-faq-q .material-symbols-outlined {
  flex: none;
  color: var(--nt-cyan);
  transition: transform 0.55s var(--ease-out-soft);
}
.ss-faq-item.is-open .ss-faq-q .material-symbols-outlined { transform: rotate(45deg); }

/* grid-template-rows 0fr→1fr animates open without JS height math. */
.ss-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s var(--ease-out-soft);
}
.ss-faq-item.is-open .ss-faq-a { grid-template-rows: 1fr; }
.ss-faq-a > div { overflow: hidden; }
.ss-faq-a p {
  color: var(--nt-muted);
  font-size: 0.875rem;
  line-height: 1.76;
  padding-bottom: 1.25rem;
  max-width: 44rem;
}
.ss-faq-a a { color: var(--nt-cyan); text-decoration: underline; text-underline-offset: 3px; }

/* ── VISIT ────────────────────────────────────────────────── */
.ss-visit {
  position: relative;
  padding: clamp(3.5rem, 10svh, 6rem) 0 clamp(6rem, 14svh, 8rem);
  text-align: center;
  background-image: var(--plate-storefront);
  background-size: cover;
  background-position: center;
}
.ss-visit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--nt-void), rgba(5, 4, 9, 0.88) 40%, var(--nt-void));
}
.ss-visit > * { position: relative; }

.ss-visit-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: stretch;
  margin-top: 1.75rem;
}
.ss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.9rem 1.5rem;
  border-radius: 0.6rem;
  border: 1px solid var(--nt-rule);
  color: var(--nt-text);
  background: rgba(20, 17, 31, 0.85);
  transition: transform 0.3s var(--ease-out-soft), border-color 0.4s ease,
              color 0.4s ease, box-shadow 0.4s ease;
}
/* order:-1 pulls the icon back to the visual left. The label has to come
   first in the DOM so Google Sitelinks never reads the ligature word as the
   link's text — see the Sitelinks Isolation note in CLAUDE.md. */
.ss-btn .material-symbols-outlined { font-size: 1.1rem; order: -1; }
.ss-btn:active { transform: scale(0.98); }
.ss-btn--primary {
  background: linear-gradient(100deg, var(--nt-cyan), var(--nt-violet));
  color: #07060d;
  border-color: transparent;
  font-weight: 800;
  box-shadow: 0 0 40px -12px var(--nt-cyan);
}
@media (hover: hover) {
  .ss-btn:hover { color: var(--nt-cyan); border-color: var(--nt-cyan); box-shadow: 0 0 26px -8px var(--nt-cyan); }
  .ss-btn--primary:hover { color: #07060d; filter: brightness(1.1); }
}

/* ══════════════════════════════════════════════════════════
   Touch devices — one vertical scroller, one horizontal scroller
   ══════════════════════════════════════════════════════════
   Collapses each card's bounded inventory list into normal flow, so
   the page is the ONLY thing that scrolls vertically in this section
   and the track is the ONLY thing that scrolls horizontally. With no
   nested scroller there is nothing for a drag to be contested by:
   swipe up anywhere — image, list, note — and the page moves
   immediately; swipe sideways anywhere and the carousel moves.

   Matching on width OR coarse pointer is deliberate. `pointer: coarse`
   is the correct signal but misses desktop devtools emulation, and a
   narrow viewport is a phone in practice; either alone leaves a gap.

   align-items:flex-start replaces the flex default of `stretch` —
   without it every card would inflate to the height of the tallest
   (Rolling Papers, 13 tiles), which would bury short cards like
   Kratom in dead space now that lists are not clipped. */
@media (max-width: 767px), (pointer: coarse) {
  .ss-cat-scroll {
    max-height: none;
    overflow-y: visible;
    overscroll-behavior-y: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .ss-carousel-track { align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════
   Breakpoints — mobile-first, so everything above is portrait
   ══════════════════════════════════════════════════════════ */
@media (min-width: 560px) {
  .ss-visit-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .ss-btn { flex: 0 1 auto; }
  .ss-cat-brands { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
  .ss-hero { padding-top: calc(var(--nav-height-desktop) + 3rem); }
  .ss-compliance-grid { grid-template-columns: repeat(3, 1fr); }
  .ss-cat { width: min(64vw, 27rem); }
  .ss-desc { font-size: 1.0625rem; }
  .ss-cat-desc { font-size: 0.9375rem; }
  .ss-faq-q { font-size: 1.0625rem; }
}

@media (min-width: 1080px) {
  .ss-story { grid-template-columns: 0.9fr 1fr; gap: clamp(3rem, 6vw, 5rem); }
  .ss-story-media { aspect-ratio: 4 / 5; }
  .ss-cat { width: 27rem; }
  .ss-carousel-track { padding-inline: max(var(--gutter), calc((100vw - 78rem) / 2)); }
  /* Hover lift only where there is a real cursor and room to move. */
  .ss-cat:hover { border-color: var(--accent); box-shadow: 0 30px 70px -30px rgba(0,0,0,0.95), 0 0 50px -22px var(--accent); }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ss-marquee-track { animation: none; }
  .ss-story-media::before { animation: none; }
  .ss-label::after { transition: none; width: 4.5rem; }
  .ss-timeline::before { transition: none; height: calc(100% - 0.8rem); }
  .ss-cat { transition: border-color 0.3s ease; }
}