/* ==========================================================================
   STONER ZONE — Rawai's Top-Rated Cannabis Dispensary
   Theme: Vice City — neon cyan + hot pink on deep purple night
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --bg:        #0a0618;
  --bg-2:      #150a2e;
  --surface:   #170b30;
  --surface-2: #22123f;
  --line:      rgba(255, 255, 255, 0.10);
  --line-2:    rgba(255, 255, 255, 0.18);

  --text:      #f7f0ff;
  --muted:     #b6a6d9;
  --dim:       #8a78ad;

  /* Cyan = primary action | Pink = highlight | Amber = sunset accent */
  --jade:      #00b8d4;
  --jade-2:    #0088a8;
  --emerald:   #22e6ff;
  --gold:      #ff2d95;
  --gold-2:    #ff7ab8;
  --amber:     #ff9a3d;

  --glow-jade: rgba(34, 230, 255, 0.34);
  --glow-gold: rgba(255, 45, 149, 0.32);

  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 16px 40px -18px rgba(0, 0, 0, 0.85);
  --shadow-lg: 0 40px 90px -40px rgba(0, 0, 0, 0.95);
  --shadow-glow: 0 18px 60px -22px var(--glow-jade);

  --shell: 1200px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 10vw, 9rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0.05, 0.36, 1);

  /* Vice City type: wide geometric display, hot pink slab accents */
  --font-display: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  font-family: var(--font-body);
  font-size: clamp(0.975rem, 0.35vw + 0.9rem, 1.0625rem);
  line-height: 1.68;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--gold); color: #fff; }

/* Ambient page backdrop — Vice City night: pink horizon, cyan glow */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(255, 45, 149, 0.20), transparent 62%),
    radial-gradient(900px 520px at 6% 12%, rgba(34, 230, 255, 0.14), transparent 60%),
    radial-gradient(1000px 700px at 50% 108%, rgba(255, 154, 61, 0.14), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 45%, var(--bg) 100%);
}

/* Neon grid + CRT scanlines */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(34, 230, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 45, 149, 0.05) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
}

/* Full-page CRT scanline film over everything, including fixed chrome */
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.16) 0px,
    rgba(0, 0, 0, 0.16) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.55;
  mix-blend-mode: multiply;
}

.scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 45, 149, 0.05), rgba(34, 230, 255, 0.05));
}

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

section[id] { position: relative; }

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.25rem, 5vw, 3.75rem);
}

.section-head.is-center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-num);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--emerald);
  margin-bottom: 1.05rem;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--emerald));
}

.section-head.is-center .eyebrow { justify-content: center; }

h2.title {
  font-size: clamp(2rem, 1.6vw + 1.6rem, 3.4rem);
  text-transform: uppercase;
  letter-spacing: -0.025em;
}

.title .accent {
  background: linear-gradient(102deg, var(--amber) 0%, var(--gold) 45%, var(--jade) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  filter: drop-shadow(1.5px 0 0 rgba(34, 230, 255, 0.6)) drop-shadow(-1.5px 0 0 rgba(255, 45, 149, 0.6));
}

.lede {
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: 1.06rem;
  max-width: 40rem;
}

.section-head.is-center .lede { margin-inline: auto; }

.hr-glow {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

/* ---------- 4. Buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--line-2);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.82rem 1.45rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bd: transparent;
  color: #0a0618;
  background: linear-gradient(135deg, var(--emerald) 0%, var(--jade) 52%, var(--jade-2) 100%);
  box-shadow: 0 14px 34px -14px var(--glow-jade);
}

.btn--primary:hover { box-shadow: 0 20px 48px -14px rgba(34, 230, 255, 0.55); }

.btn--gold {
  --btn-bd: transparent;
  color: #2a0a1e;
  background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 55%, #c9963f 100%);
  box-shadow: 0 14px 34px -16px var(--glow-gold);
}

.btn--gold:hover { box-shadow: 0 20px 46px -16px rgba(255, 45, 149, 0.5); }

.btn--ghost { background: rgba(255, 255, 255, 0.035); }
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--line-2);
}

.btn--lg { padding: 1rem 1.75rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* Sheen sweep on primary buttons */
.btn--primary::after,
.btn--gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.5) 48%, transparent 66%);
  transform: translateX(-130%);
  transition: transform 0.75s var(--ease);
}

.btn--primary:hover::after,
.btn--gold:hover::after { transform: translateX(130%); }

/* ---------- 5. Pills / badges ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.36rem 0.78rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
}

.pill--jade {
  color: var(--emerald);
  border-color: rgba(255, 45, 149, 0.34);
  background: rgba(255, 45, 149, 0.12);
}

.pill--gold {
  color: var(--gold-2);
  border-color: rgba(255, 45, 149, 0.38);
  background: rgba(255, 45, 149, 0.12);
}

.pill--solid {
  color: #0a0618;
  background: var(--emerald);
  border-color: transparent;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.dot--live {
  box-shadow: 0 0 0 0 rgba(34, 230, 255, 0.75);
  animation: pulse-dot 2.2s infinite;
}

@keyframes pulse-dot {
  70% { box-shadow: 0 0 0 9px rgba(34, 230, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 230, 255, 0); }
}

/* ---------- 6. Glass surfaces ---------- */
.glass {
  position: relative;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.025) 42%, rgba(255, 255, 255, 0.012) 100%),
    rgba(18, 8, 40, 0.78);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.30), transparent 42%, transparent 62%, rgba(255, 45, 149, 0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.8;
  pointer-events: none;
}

/* ---------- 7. Scroll progress ---------- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 90;
  background: linear-gradient(90deg, var(--emerald), var(--gold));
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ---------- 8. Header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  /* Fixed elements size from the initial containing block, which can be wider
     than the layout viewport on mobile — pin it to the actual width. */
  width: 100%;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
    backdrop-filter 0.4s var(--ease), box-shadow 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}

.header.is-stuck {
  background: rgba(10, 6, 24, 0.82);
  border-bottom-color: rgba(255, 45, 149, 0.28);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 18px 40px -34px #000;
}

.header__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  min-height: 74px;
  padding-block: 0.6rem;
}

/* Brand lockup */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
}

.brand__mark {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  overflow: hidden;
  flex: none;
  box-shadow: 0 8px 22px -10px var(--glow-jade);
  transition: transform 0.5s var(--ease);
}

.brand:hover .brand__mark { transform: rotate(-6deg) scale(1.06); }

/* Brand mark: "Stoner" on a green-outlined chip, "Zone" beneath it */
.brand__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.32rem;
  line-height: 1;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text);
  padding: 0.24rem 0.62rem;
  border: 1.5px solid var(--emerald);
  border-radius: 7px;
  background: linear-gradient(140deg, rgba(255, 45, 149, 0.24), rgba(255, 45, 149, 0.06));
  box-shadow: 0 0 16px -4px var(--glow-jade), inset 0 0 12px -6px var(--emerald);
  white-space: nowrap;
}

.brand__tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text);
  padding-left: 0.12rem;
  white-space: nowrap;
}

.brand__tag::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 0.28rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--emerald), rgba(34, 230, 255, 0.15));
}

.nav {
  display: none;
  align-items: center;
  gap: 0.15rem;
  margin-inline: auto;
  padding: 0.3rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}

.header.is-stuck .nav {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.035);
}

.nav a {
  position: relative;
  padding: 0.5rem 0.95rem;
  border-radius: var(--r-pill);
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--muted);
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.nav a:hover { color: var(--text); }

.nav a.is-active {
  color: var(--text);
  background: rgba(255, 45, 149, 0.20);
  box-shadow: inset 0 0 0 1px rgba(255, 45, 149, 0.42);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

.status-chip {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 45, 149, 0.3);
  background: rgba(34, 230, 255, 0.10);
  font-family: var(--font-num);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--emerald);
}

.status-chip.is-closed {
  color: #ff8fc0;
  border-color: rgba(255, 45, 149, 0.35);
  background: rgba(255, 45, 149, 0.10);
}

.header .btn { padding: 0.68rem 1.15rem; font-size: 0.88rem; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}

.nav-toggle span {
  display: block;
  height: 1.5px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 74px 0 auto 0;
  width: 100%;
  z-index: 79;
  padding: 0 var(--gutter) 1.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease), visibility 0.32s;
}

.drawer.is-open { opacity: 1; visibility: visible; transform: none; }

.drawer__panel {
  display: grid;
  gap: 0.2rem;
  padding: 1rem;
  border-radius: var(--r-lg);
  background: rgba(20, 9, 44, 0.95);
  border: 1px solid var(--line);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--shadow-lg);
}

.drawer__panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-radius: var(--r-sm);
  font-weight: 550;
  color: var(--muted);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.drawer__panel a:hover,
.drawer__panel a.is-active { background: rgba(255, 45, 149, 0.14); color: var(--text); }
.drawer__panel a span { font-family: var(--font-num); font-size: 0.7rem; color: var(--dim); }

.drawer__cta { display: grid; gap: 0.6rem; margin-top: 0.5rem; }

/* ---------- 9. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: clamp(7.5rem, 16vh, 10rem);
  padding-bottom: clamp(4rem, 12vh, 7rem);
  overflow: hidden;
  isolation: isolate;
}

/* Vice City sunset scene */
.hero__scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* Readability scrim. The sunset is bright, so darken the left column where the
   copy sits and the very bottom, while leaving the sun visible on the right. */
.hero__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(10, 6, 24, 0.92) 0%, rgba(10, 6, 24, 0.72) 34%, rgba(10, 6, 24, 0.20) 58%, rgba(10, 6, 24, 0) 76%),
    linear-gradient(180deg, rgba(10, 6, 24, 0.65) 0%, rgba(10, 6, 24, 0) 26%, rgba(10, 6, 24, 0.35) 74%, var(--bg) 100%);
}

/* The sun: a hot gradient disc banded by dark stripes, rising behind the
   horizon line at 62% of the hero. Only its top clears the rating card. */
.scene__sun {
  position: absolute;
  left: 80%;
  top: 64%;
  width: min(36vw, 360px);
  aspect-ratio: 1;
  translate: -50% -46%;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe14d 0%, #ff9a3d 38%, #ff2d95 74%, #b3179b 100%);
  box-shadow: 0 0 120px 30px rgba(255, 45, 149, 0.42), 0 0 220px 80px rgba(255, 154, 61, 0.22);
  mask-image: repeating-linear-gradient(
    180deg,
    #000 0 22px,
    transparent 22px 27px,
    #000 27px 56px,
    transparent 56px 62px,
    #000 62px 96px,
    transparent 96px 103px,
    #000 103px 100%
  );
  -webkit-mask-image: repeating-linear-gradient(
    180deg,
    #000 0 22px,
    transparent 22px 27px,
    #000 27px 56px,
    transparent 56px 62px,
    #000 62px 96px,
    transparent 96px 103px,
    #000 103px 100%
  );
  animation: sun-set 9s var(--ease-io) infinite alternate;
}

@keyframes sun-set {
  from { translate: -50% -43%; }
  to   { translate: -50% -50%; }
}

/* Haze layer — sits above the sun so the rating card reads as in front of it */
.scene__glow {
  position: absolute;
  left: 78%;
  top: 20%;
  z-index: 2;
  width: min(74vw, 840px);
  height: 66%;
  translate: -50% 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 45, 149, 0.30), rgba(34, 230, 255, 0.09) 45%, transparent 72%);
  filter: blur(26px);
  pointer-events: none;
}

/* Retro perspective floor grid below the horizon */
.scene__grid {
  position: absolute;
  left: -20%;
  right: -20%;
  top: 62%;
  bottom: 0;
  z-index: 1;
  background-image:
    linear-gradient(90deg, rgba(34, 230, 255, 0.55) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 45, 149, 0.5) 1px, transparent 1px);
  background-size: 84px 42px;
  transform: perspective(340px) rotateX(66deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(180deg, transparent, #000 42%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 42%);
  opacity: 0.5;
  animation: grid-run 2.6s linear infinite;
}

@keyframes grid-run {
  to { background-position: 0 42px, 0 42px; }
}

/* Palm silhouettes either side of the horizon */
.scene__palms {
  position: absolute;
  top: 62%;
  width: min(24vw, 240px);
  height: auto;
  translate: 0 -78%;
  color: #0d0420;
  filter: drop-shadow(0 0 26px rgba(255, 45, 149, 0.45));
  opacity: 0.9;
}

.scene__palms--left { left: 0; }
.scene__palms--right { right: 0; transform: scaleX(-1) scaleX(0.8); translate: 0 -66%; }

@media (max-width: 760px) {
  .scene__sun { width: 54vw; left: 68%; top: 60%; }
  .scene__glow { left: 68%; top: 26%; }
  .scene__palms { width: 32vw; top: 60%; translate: 0 -62%; }
  .scene__palms--right { translate: 0 -54%; }
  .scene__grid { height: 32%; }
}

.hero__leaf {
  position: absolute;
  z-index: -1;
  right: -4vw;
  top: 46%;
  width: min(42vw, 500px);
  translate: 0 -50%;
  color: var(--gold);
  opacity: 0.10;
  pointer-events: none;
  animation: sway 16s ease-in-out infinite alternate;
}

@keyframes sway {
  from { transform: rotate(-5deg); }
  to   { transform: rotate(5deg); }
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
  width: 100%;
}

.hero__copy { max-width: 42rem; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.42rem 0.95rem 0.42rem 0.5rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 1.6rem;
}

.hero__badge b { color: var(--text); font-weight: 650; }
.hero__badge .pill { padding: 0.22rem 0.6rem; font-size: 0.68rem; }

/* GTA-style title: heavy condensed caps, chrome gradient, neon bloom */
.hero h1 {
  font-size: clamp(2.7rem, 8.6vw, 6.4rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.94;
  text-transform: uppercase;
}

.hero h1 .line { display: block; }

/* White-hot chrome with a pink rim */
.hero h1 .line:not(.gold) {
  background: linear-gradient(180deg, #ffffff 0%, #ffe9f6 42%, #ffb3dd 62%, #d86bb8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(2px 0 0 rgba(255, 45, 149, 0.85))
    drop-shadow(-2px 0 0 rgba(34, 230, 255, 0.75))
    drop-shadow(0 0 26px rgba(255, 45, 149, 0.45));
}

.hero h1 .gold {
  background: linear-gradient(180deg, #fff3b0 0%, #ffd34d 34%, #ff9a3d 62%, #ff2d95 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  font-weight: 900;
  filter:
    drop-shadow(2px 0 0 rgba(34, 230, 255, 0.8))
    drop-shadow(-2px 0 0 rgba(255, 45, 149, 0.85))
    drop-shadow(0 0 30px rgba(255, 154, 61, 0.5));
}

/* Section headings get the same chrome treatment, lighter */
.title .accent {
  filter: drop-shadow(1.5px 0 0 rgba(34, 230, 255, 0.6)) drop-shadow(-1.5px 0 0 rgba(255, 45, 149, 0.6));
}

.hero__sub {
  margin-top: 1.5rem;
  font-size: clamp(1rem, 0.5vw + 0.94rem, 1.2rem);
  color: var(--muted);
  max-width: 34rem;
}

.hero__sub strong { color: var(--text); font-weight: 600; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.1rem;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.hero__meta-item { display: flex; align-items: center; gap: 0.7rem; }

.hero__meta-item svg { width: 20px; height: 20px; color: var(--emerald); flex: none; }

.hero__meta-item div { display: grid; line-height: 1.3; }
.hero__meta-item b { font-size: 0.94rem; font-weight: 650; }
.hero__meta-item span { font-size: 0.78rem; color: var(--dim); }

/* Rating block */
.rating-block {
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--r-lg);
  display: grid;
  gap: 1.35rem;
}

.rating-block__top { display: flex; align-items: center; gap: 1.25rem; }

.rating-block__score {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  background: linear-gradient(160deg, #fff, var(--gold-2) 70%, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stars { display: flex; gap: 2px; color: var(--gold); }
.stars svg { width: 16px; height: 16px; }
.stars--lg svg { width: 19px; height: 19px; }

.rating-block__label { font-size: 0.82rem; color: var(--muted); margin-top: 0.4rem; }
.rating-block__label b { color: var(--text); }

.rating-bars { display: grid; gap: 0.4rem; }

.rating-bar {
  display: grid;
  grid-template-columns: 1rem 1fr 2.6rem;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-num);
  font-size: 0.7rem;
  color: var(--dim);
}

.rating-bar__track {
  height: 5px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.rating-bar__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--jade), var(--emerald));
  width: 0;
  transition: width 1.3s var(--ease);
}

.rating-bar:first-child .rating-bar__fill { background: linear-gradient(90deg, var(--gold), var(--gold-2)); }

.rating-block__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}

.rating-block__foot > span { max-width: 15rem; }

/* Scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  translate: -50% 0;
  display: none;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-num);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}

.scroll-cue i {
  display: block;
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, var(--emerald), transparent);
  animation: cue 2.4s var(--ease-io) infinite;
  transform-origin: top;
}

@keyframes cue {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- 10. Ticker / announcement bar ----------

   Rotating announcements. JS repeats the set so the track is wide enough, then
   crossfades between slots every few seconds. Slot width is the measured ticker
   width divided by how many fit (1 on mobile, 2 on tablet, 3 on desktop), so a
   repeated announcement is always exactly one rotation away and can never
   appear alongside its twin. */
.ticker {
  position: relative;
  display: flex;
  overflow: hidden;
  padding-block: 0.95rem;
  border-block: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(255, 45, 149, 0.12), rgba(255, 45, 149, 0.07), rgba(255, 45, 149, 0.12));
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.ticker__track {
  display: flex;
  align-items: center;
  flex: none;
}

.ticker__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  /* Fallback if JS never runs: a sane fixed slot */
  flex: 0 0 22rem;
  font-family: var(--font-num);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}

.ticker__item.is-active { opacity: 1; }

.ticker__item svg { width: 15px; height: 15px; color: var(--emerald); flex: none; }

/* Rotating announcements — slot width is set from JS; the -active class controls
   visibility, so the extra copies in the marquee track stay invisible. */
.ticker__item.is-in { opacity: 1; }

/* Promo / call-to-action styling */
.ticker__item--promo {
  color: var(--gold-2);
  font-weight: 600;
  padding: 0.3rem 0.85rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 45, 149, 0.4);
  background: rgba(255, 45, 149, 0.12);
  box-shadow: 0 0 22px -10px var(--glow-gold);
}

.ticker__item--promo svg { color: var(--gold-2); }

.ticker__item--cta {
  color: var(--emerald);
  font-weight: 600;
  padding: 0.3rem 0.85rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 45, 149, 0.4);
  background: rgba(255, 45, 149, 0.14);
}

.ticker__item--cta svg { color: var(--emerald); }

.ticker__item--rating { color: var(--text); }
.ticker__item--rating svg { color: var(--gold); }

@media (max-width: 640px) {
  .ticker { padding-block: 0.8rem; }
  .ticker__item { font-size: 0.66rem; letter-spacing: 0.05em; gap: 0.45rem; }
  .ticker__item svg { width: 13px; height: 13px; }
  .ticker__item--promo, .ticker__item--cta { padding: 0.26rem 0.6rem; }
}

/* ---------- 11. Trust bar ---------- */
.trust { padding-block: clamp(2.5rem, 5vw, 4rem); }

.trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
}

.trust__item {
  padding: clamp(1.4rem, 3vw, 1.9rem);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  transition: background-color 0.4s var(--ease);
}

.trust__item:hover { background: linear-gradient(170deg, rgba(255, 45, 149, 0.14), rgba(255, 255, 255, 0.015)); }

.trust__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  margin-bottom: 1rem;
  color: var(--emerald);
  background: rgba(255, 45, 149, 0.14);
  border: 1px solid rgba(255, 45, 149, 0.24);
}

.trust__icon svg { width: 20px; height: 20px; }

.trust__item h3 { font-size: 1.02rem; font-weight: 650; letter-spacing: -0.015em; }
.trust__item p { margin-top: 0.5rem; font-size: 0.87rem; color: var(--muted); line-height: 1.6; }

.trust__stat {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
}

.trust__stat small { font-size: 0.9rem; color: var(--dim); font-weight: 600; margin-left: 0.2rem; }

/* ---------- 12. Menu / strains ---------- */
.menu-section { padding-block: var(--section-y); }

.menu-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.05rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease),
    border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.filter:hover { color: var(--text); transform: translateY(-1px); }

/* .filter sets display, which would otherwise beat the `hidden` attribute that
   JS uses to drop categories the menu no longer stocks. */
.filter[hidden] { display: none; }

.filter[aria-pressed="true"] {
  color: #0a0618;
  background: linear-gradient(135deg, var(--emerald), var(--jade));
  border-color: transparent;
  box-shadow: 0 12px 28px -14px var(--glow-jade);
}

.filter small { font-family: var(--font-num); font-size: 0.68rem; opacity: 0.65; }

.menu-count { font-family: var(--font-num); font-size: 0.75rem; color: var(--dim); letter-spacing: 0.05em; }

.menu-grid {
  display: grid;
  /* THREE CARDS PER ROW — the shop's choice, twice confirmed. Do not lower this
     value without checking: the number of columns depends on it AND the window
     width, and lowering it adds a column rather than shrinking the cards.

     With 3 cards per row the card width follows the shell, not this number:
     ~301px on a 1040px window, ~358px on a 1268px one. To make the cards
     smaller, reduce --shell (line 42), not this.

     Measured with scripts/measure-layout.cjs:
       285px -> 3 across from 1024px up        <- current
       265px/230px -> 4 across above ~1075px
       205px -> 5 across above ~1100px */
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
}

.strain {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015) 40%, rgba(12, 6, 28, 0.6));
  overflow: hidden;
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
  animation: card-in 0.55s var(--ease) backwards;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
}

.strain:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 45, 149, 0.4);
  box-shadow: 0 34px 64px -34px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 45, 149, 0.14);
}

.strain.is-hidden { display: none; }

.strain__art {
  position: relative;
  height: 132px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--line);
}

.strain__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.22), transparent 45%),
    linear-gradient(180deg, transparent 45%, rgba(12, 6, 28, 0.82) 100%);
}

.strain__art svg {
  width: 96px;
  height: 96px;
  color: rgba(255, 255, 255, 0.9);
  opacity: 0.34;
  transition: transform 0.7s var(--ease), opacity 0.5s var(--ease);
}

.strain:hover .strain__art:not(.strain__art--photo) svg { transform: scale(1.12) rotate(-7deg); opacity: 0.5; }

.strain__art--emerald { background: linear-gradient(135deg, #0a2f6b, #00b8d4 45%, #22e6ff); }
.strain__art--gold    { background: linear-gradient(135deg, #6b0a3f, #ff2d95 45%, #ff7ab8); }
.strain__art--teal    { background: linear-gradient(135deg, #0a4f5c, #12857f 45%, #4fd6c2); }
.strain__art--violet  { background: linear-gradient(135deg, #3a0f6b, #8b2fd0 45%, #d98cff); }
.strain__art--amber   { background: linear-gradient(135deg, #7a2a00, #ff7a18 45%, #ffc46b); }
.strain__art--hash    { background: linear-gradient(135deg, #2a1405, #7a4a17 45%, #d9a447 75%, #ffd88c); }
.strain__art--ocean   { background: linear-gradient(135deg, #0a1f6b, #1b4fd8 45%, #6bb6ff); }
.strain__art--rose    { background: linear-gradient(135deg, #6b0a3f, #ff2d95 45%, #ff8fc0); }

.strain__badges {
  position: absolute;
  z-index: 1;
  inset: 0.75rem 0.75rem auto 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem;
}

/* Push trailing badges to the right edge; wraps sensibly on narrow cards */
.strain__badges .pill:last-child { margin-left: auto; }

.strain__badges .pill {
  position: relative;
  z-index: 1;
  background: rgba(12, 6, 28, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.strain__badges .pill--hot { color: #ffd89b; border-color: rgba(255, 216, 155, 0.45); }

/* Photo-led card: real bud shot instead of the CSS artwork */
.strain__art--photo {
  height: 190px;
  background: #12062a;
}

.strain__art--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 48%;
  transform: scale(1.02);
  transition: transform 0.9s var(--ease);
}

.strain:hover .strain__art--photo img { transform: scale(1.1); }

/* Keep the top badges legible over a busy photo and tint the bottom edge into
   the page purple so the photo reads as part of the card. */
.strain__art--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 6, 24, 0.66) 0%,
    rgba(10, 6, 24, 0.14) 30%,
    rgba(10, 6, 24, 0) 55%,
    rgba(10, 6, 24, 0.70) 100%
  );
  pointer-events: none;
}

/* Indica / Sativa split badge */
.pill--split {
  color: #ffd9ee;
  border-color: rgba(255, 45, 149, 0.55);
  background: rgba(20, 6, 40, 0.76);
  font-family: var(--font-num);
  font-size: 0.63rem;
  letter-spacing: 0.05em;
}

.strain__body { padding: 1.15rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.85rem; flex: 1; }

.strain__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.strain__title h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em; }

.strain__price {
  font-family: var(--font-num);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gold-2);
  white-space: nowrap;
}

.strain__price small { font-size: 0.68rem; color: var(--dim); display: block; text-align: right; letter-spacing: 0.05em; }

.strain__desc { font-size: 0.86rem; color: var(--muted); line-height: 1.6; }

.strain__notes { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.note {
  padding: 0.2rem 0.58rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.72rem;
  color: var(--muted);
}

/* THC meter */
.meter { display: grid; gap: 0.45rem; margin-top: auto; padding-top: 0.4rem; }

.meter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-num);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}

.meter__head b { color: var(--emerald); font-size: 0.8rem; letter-spacing: 0; }

.meter__track {
  position: relative;
  height: 4px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  width: 0;
  background: linear-gradient(90deg, var(--jade), var(--emerald) 60%, var(--gold));
  transition: width 1.1s var(--ease);
}

.strain__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.9rem;
  margin-top: 0.2rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-num);
  font-size: 0.72rem;
  color: var(--dim);
}

.strain__type {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.strain__type i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--jade);
  font-style: normal;
}

.strain__type[data-type="Sativa"] i  { background: var(--gold); }
.strain__type[data-type="Hybrid"] i  { background: var(--emerald); }
.strain__type[data-type="Indica"] i  { background: #b06bff; }

.menu-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  padding: 1.15rem 1.35rem;
  border-radius: var(--r-md);
  border: 1px dashed var(--line-2);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.85rem;
  color: var(--muted);
}

.menu-note svg { width: 18px; height: 18px; color: var(--gold); flex: none; }

/* ---------- 13. About ---------- */
.about { padding-block: var(--section-y); }

.about__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.about__visual { position: relative; }

.storefront {
  position: relative;
  aspect-ratio: 4 / 3.2;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid rgba(255, 45, 149, 0.35);
  background: linear-gradient(180deg, #12062a 0%, #1d0a3d 55%, #0a0618 100%);
  box-shadow: var(--shadow-lg), 0 0 60px -20px rgba(255, 45, 149, 0.4);
}

/* Vice City dusk behind the shop */
.storefront__sky {
  position: absolute;
  inset: 0 0 42% 0;
  background:
    radial-gradient(circle at 74% 74%, rgba(255, 45, 149, 0.75), transparent 46%),
    linear-gradient(180deg, #1a0538 0%, #5c0a52 45%, #ff7a3d 88%, #ffd34d 100%);
}

.storefront__sun {
  position: absolute;
  right: 12%;
  top: 30%;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff0a8 0%, #ffd34d 30%, #ff7a18 62%, #ff2d95 100%);
  box-shadow: 0 0 50px 8px rgba(255, 122, 24, 0.7);
  mask-image: repeating-linear-gradient(180deg, #000 0 9px, transparent 9px 13px, #000 13px 24px, transparent 24px 29px, #000 29px 100%);
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 9px, transparent 9px 13px, #000 13px 24px, transparent 24px 29px, #000 29px 100%);
  animation: sun-pulse 6s ease-in-out infinite alternate;
}

@keyframes sun-pulse { to { transform: scale(1.08); filter: brightness(1.12); } }

.storefront__hills {
  position: absolute;
  inset: auto 0 42% 0;
  height: 30%;
}

.storefront__hills svg { width: 100%; height: 100%; }

.storefront__shop {
  position: absolute;
  inset: auto 8% 6% 8%;
  height: 52%;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, #1a0b36, #0b0418);
  border: 1px solid rgba(34, 230, 255, 0.35);
  box-shadow:
    0 -18px 60px -18px rgba(255, 45, 149, 0.65),
    0 0 40px -12px rgba(34, 230, 255, 0.5);
  overflow: hidden;
}

.storefront__roof {
  height: 22%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #240f47, #150830);
  border-bottom: 1px solid rgba(34, 230, 255, 0.28);
  position: relative;
  overflow: hidden;
}

/* Hot-pink neon tube sign */
.storefront__sign {
  font-family: var(--font-display);
  font-size: clamp(0.68rem, 1.9vw, 1.05rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffd6ec;
  text-shadow:
    0 0 6px #fff,
    0 0 14px rgba(255, 45, 149, 0.95),
    0 0 30px rgba(255, 45, 149, 0.7),
    0 0 50px rgba(255, 45, 149, 0.4);
  white-space: nowrap;
  animation: neon 3.6s ease-in-out infinite alternate;
}

@keyframes neon {
  50% {
    opacity: 0.78;
    text-shadow: 0 0 5px #fff, 0 0 10px rgba(255, 45, 149, 0.7), 0 0 22px rgba(255, 45, 149, 0.45);
  }
}

.storefront__glass {
  position: absolute;
  inset: 22% 0 0 0;
  display: grid;
  grid-template-columns: 1fr 0.34fr 1fr;
  gap: 4%;
  padding: 5%;
  background: linear-gradient(180deg, rgba(34, 230, 255, 0.14), rgba(255, 45, 149, 0.06));
}

.storefront__pane {
  border-radius: 4px;
  border: 1px solid rgba(34, 230, 255, 0.4);
  background: linear-gradient(180deg, rgba(34, 230, 255, 0.2), rgba(10, 5, 24, 0.6));
  box-shadow: inset 0 0 24px rgba(34, 230, 255, 0.3);
}

.storefront__door {
  border-radius: 4px 4px 0 0;
  border: 1px solid rgba(255, 45, 149, 0.55);
  background: linear-gradient(180deg, rgba(255, 45, 149, 0.3), rgba(8, 3, 20, 0.85));
  box-shadow: inset 0 0 20px rgba(255, 45, 149, 0.35);
}

.storefront__street {
  position: absolute;
  inset: auto 0 0 0;
  height: 8%;
  background: linear-gradient(180deg, #150830, #07021a);
}

.storefront__cap {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
}

.about__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.5rem;
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  background: linear-gradient(160deg, #fff, var(--emerald) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat span { display: block; margin-top: 0.45rem; font-size: 0.8rem; color: var(--dim); letter-spacing: 0.02em; }

.feature-list { display: grid; gap: 1.1rem; margin-top: 1.9rem; }

.feature {
  display: flex;
  gap: 0.95rem;
  align-items: flex-start;
}

.feature__icon {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--gold);
  background: rgba(255, 45, 149, 0.1);
  border: 1px solid rgba(255, 45, 149, 0.22);
}

.feature__icon svg { width: 17px; height: 17px; }

.feature h3 { font-size: 0.98rem; font-weight: 650; }
.feature p { font-size: 0.87rem; color: var(--muted); margin-top: 0.25rem; line-height: 1.6; }

.about__quote {
  margin-top: 2rem;
  padding: 1.35rem 1.5rem;
  border-left: 2px solid var(--jade);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: linear-gradient(90deg, rgba(34, 230, 255, 0.10), transparent);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--text);
}

.about__quote cite {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-num);
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------- 14. Reviews ---------- */
.reviews { padding-block: var(--section-y); }

.reviews__head {
  display: grid;
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.review-carousel {
  position: relative;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

.review-carousel::-webkit-scrollbar { display: none; }

.review {
  flex: 0 0 min(84vw, 360px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}

.review:hover { transform: translateY(-4px); border-color: rgba(255, 45, 149, 0.3); }

.review__quote {
  font-size: 0.96rem;
  line-height: 1.68;
  color: var(--text);
  flex: 1;
}

.review__quote::before { content: "“"; color: var(--gold); font-size: 1.4em; line-height: 0; vertical-align: -0.15em; }
.review__quote::after  { content: "”"; color: var(--gold); font-size: 1.4em; line-height: 0; vertical-align: -0.15em; }

.review__foot { display: flex; align-items: center; gap: 0.8rem; }

.avatar {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: #0a0618;
  background: linear-gradient(140deg, var(--emerald), var(--jade-2));
}

.avatar--gold { background: linear-gradient(140deg, #ff7ab8, #b3126b); color: #2a0a1e; }
.avatar--teal { background: linear-gradient(140deg, #22e6ff, #0072a8); color: #0a0618; }

.review__who { line-height: 1.35; }
.review__who b { font-size: 0.9rem; font-weight: 650; display: block; }
.review__who span { font-size: 0.74rem; color: var(--dim); }

.review__badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-num);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.review__badge svg { width: 13px; height: 13px; color: var(--emerald); }

.carousel-nav { display: flex; gap: 0.55rem; }

.carousel-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease), opacity 0.3s;
}

.carousel-btn:hover { background: rgba(34, 230, 255, 0.20); transform: translateY(-2px); }
.carousel-btn:disabled { opacity: 0.32; cursor: not-allowed; transform: none; }
.carousel-btn svg { width: 18px; height: 18px; }

/* Review source strip */
.review-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--dim);
}

.review-sources a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.review-sources a:hover { color: var(--emerald); border-bottom-color: var(--emerald); }
.review-sources svg { width: 15px; height: 15px; }

/* ---------- 15. Gallery ---------- */
.gallery { padding-block: var(--section-y); }

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.7rem, 1.6vw, 1.1rem);
}

.tile {
  position: relative;
  grid-column: span 6;
  min-height: 170px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  cursor: pointer;
  isolation: isolate;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}

.tile:hover { transform: scale(1.015); border-color: var(--line-2); box-shadow: var(--shadow-md); }
.tile:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; }

.tile > svg {
  width: clamp(52px, 12vw, 84px);
  height: auto;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0.34;
  transition: transform 0.8s var(--ease), opacity 0.5s var(--ease);
}

.tile:hover > svg { transform: scale(1.09) rotate(-5deg); opacity: 0.5; }

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(12, 6, 28, 0.05) 30%, rgba(12, 6, 28, 0.88) 100%);
}

.tile__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.1rem 1.2rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}

.tile__cap b { font-family: var(--font-display); font-size: 0.98rem; font-weight: 650; display: block; }
.tile__cap span { font-size: 0.76rem; color: rgba(255, 255, 255, 0.68); }

.tile__zoom {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(12, 6, 28, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.tile:hover .tile__zoom,
.tile:focus-visible .tile__zoom { opacity: 1; transform: none; }
.tile__zoom svg { width: 15px; height: 15px; }

.tile--a { background: linear-gradient(150deg, #14082e, #ff2d95 55%, #ff9a3d); }
.tile--b { background: linear-gradient(150deg, #071a3a, #22a8ff 55%, #22e6ff); }
.tile--c { background: linear-gradient(150deg, #3a0f6b, #8b2fd0 55%, #d98cff); }
.tile--d { background: linear-gradient(150deg, #6b0a3f, #ff2d95 55%, #ffd34d); }
.tile--e { background: linear-gradient(150deg, #0a1f6b, #1b4fd8 55%, #6bb6ff); }
.tile--f { background: linear-gradient(150deg, #4a0a2e, #c4177f 55%, #ff7ab8); }

.gallery__note {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.83rem;
  color: var(--dim);
}

.gallery__note a { color: var(--emerald); border-bottom: 1px solid rgba(255, 45, 149, 0.35); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(8, 4, 20, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s var(--ease), visibility 0.32s;
}

.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__frame {
  width: min(680px, 100%);
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  transform: scale(0.94) translateY(12px);
  transition: transform 0.42s var(--ease);
}

.lightbox.is-open .lightbox__frame { transform: none; }

.lightbox__art {
  height: clamp(200px, 44vw, 320px);
  display: grid;
  place-items: center;
  position: relative;
}

/* Lightbox reuses the gallery / menu art tokens */
.lightbox__art.tile--a,
.lightbox__art.strain__art--emerald { background: linear-gradient(150deg, #14082e, #ff2d95 55%, #ff9a3d); }
.lightbox__art.tile--b,
.lightbox__art.strain__art--teal    { background: linear-gradient(150deg, #071a3a, #22a8ff 55%, #22e6ff); }
.lightbox__art.tile--c,
.lightbox__art.strain__art--gold    { background: linear-gradient(150deg, #3a0f6b, #8b2fd0 55%, #d98cff); }
.lightbox__art.tile--d,
.lightbox__art.strain__art--violet  { background: linear-gradient(150deg, #3a0f6b, #8b2fd0 55%, #d98cff); }
.lightbox__art.tile--e,
.lightbox__art.strain__art--ocean   { background: linear-gradient(150deg, #0a1f6b, #1b4fd8 55%, #6bb6ff); }
.lightbox__art.tile--f,
.lightbox__art.strain__art--rose    { background: linear-gradient(150deg, #6b0a3f, #ff2d95 55%, #ff7ab8); }
.lightbox__art.strain__art--amber   { background: linear-gradient(150deg, #7a2a00, #ff7a18 55%, #ffc46b); }
.lightbox__art.strain__art--hash    { background: linear-gradient(150deg, #2a1405, #7a4a17 45%, #d9a447 75%, #ffd88c); }

.lightbox__art > svg { width: clamp(80px, 20vw, 130px); height: auto; color: rgba(255, 255, 255, 0.88); opacity: 0.4; }

/* Full-size product photography in the lightbox */
.lightbox__art--photo { height: clamp(230px, 48vw, 400px); background: #12062a; }

.lightbox__art--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lightbox__body { padding: 1.4rem 1.5rem; }
.lightbox__body h3 { font-size: 1.25rem; }
.lightbox__body p { margin-top: 0.55rem; color: var(--muted); font-size: 0.9rem; }

.lightbox__close {
  position: absolute;
  top: max(1rem, 3vw);
  right: max(1rem, 3vw);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.lightbox__close:hover { background: rgba(255, 255, 255, 0.14); }
.lightbox__close svg { width: 18px; height: 18px; }

/* ---------- 16. Popular times ---------- */
.times { padding-block: var(--section-y); }

.times__panel {
  padding: clamp(1.35rem, 3vw, 2.25rem);
  border-radius: var(--r-xl);
}

.times__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.times__live {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.9rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 122, 24, 0.32);
  background: rgba(255, 122, 24, 0.1);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--amber);
}

.times__days { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.75rem; }

.day-tab {
  padding: 0.42rem 0.85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  font-family: var(--font-num);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.day-tab:hover { color: var(--text); }

.day-tab[aria-selected="true"] {
  color: var(--text);
  background: rgba(255, 45, 149, 0.2);
  border-color: rgba(34, 230, 255, 0.48);
}

.chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: clamp(3px, 1.2vw, 35px);
  height: clamp(180px, 26vw, 250px);
  padding-top: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.chart__grid {
  position: absolute;
  inset: 1.5rem 0 0 0;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  pointer-events: none;
}

.chart__grid i { border-top: 1px dashed rgba(255, 255, 255, 0.06); }

.bar {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.bar__fill {
  width: 100%;
  max-width: 46px;
  height: 0;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, rgba(34, 230, 255, 0.95), rgba(255, 45, 149, 0.35));
  transition: height 0.9s var(--ease), background 0.4s var(--ease);
  position: relative;
}

.bar__fill::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: 6px 6px 0 0;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0.6;
}

.bar.is-peak .bar__fill { background: linear-gradient(180deg, var(--gold-2), rgba(255, 122, 24, 0.35)); }
.bar.is-now .bar__fill { background: linear-gradient(180deg, var(--amber), rgba(255, 122, 24, 0.3)); }

.bar__tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  translate: -50% 0;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: rgba(12, 6, 28, 0.94);
  font-family: var(--font-num);
  font-size: 0.66rem;
  white-space: nowrap;
  color: var(--text);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  pointer-events: none;
}

.bar:hover .bar__tip { opacity: 1; transform: none; }

.chart__labels {
  display: flex;
  gap: clamp(3px, 1.2vw, 35px);
  margin-top: 0.6rem;
}

.chart__labels span {
  flex: 1;
  text-align: center;
  font-family: var(--font-num);
  font-size: 0.62rem;
  color: var(--dim);
  letter-spacing: 0.02em;
}

.times__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.75rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
}

.times__foot b { color: var(--text); font-weight: 650; }

/* ---------- 17. Visit / location ---------- */
.visit { padding-block: var(--section-y); }

.visit__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.map-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid rgba(255, 45, 149, 0.3);
  background: #0a0618;
  box-shadow: var(--shadow-lg), 0 0 50px -22px rgba(34, 230, 255, 0.5);
}

.map-card svg.map { width: 100%; height: auto; display: block; }

.map-pin {
  transform-origin: center bottom;
  animation: pin-bob 2.6s var(--ease-io) infinite;
}

@keyframes pin-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.map-ripple {
  transform-origin: center;
  animation: ripple 3s var(--ease-io) infinite;
}

@keyframes ripple {
  0% { transform: scale(0.4); opacity: 0.75; }
  100% { transform: scale(2.2); opacity: 0; }
}

.map-card__actions {
  position: absolute;
  inset: auto 1rem 1rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.map-card__actions .btn {
  background: rgba(20, 9, 44, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--line-2);
}

.map-card__actions .btn:hover { background: rgba(255, 45, 149, 0.92); color: #0a0618; border-color: transparent; }

.visit__panel { display: grid; gap: 1.5rem; }

.info-card { padding: 1.5rem; border-radius: var(--r-lg); }

.info-card h3 {
  font-size: 0.78rem;
  font-family: var(--font-num);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1rem;
}

.info-row {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

.info-row:last-child { border-bottom: 0; padding-bottom: 0; }
.info-row:first-of-type { padding-top: 0; }

.info-row__icon {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  color: var(--emerald);
  background: rgba(255, 45, 149, 0.1);
  border: 1px solid rgba(255, 45, 149, 0.2);
}

.info-row__icon svg { width: 16px; height: 16px; }
.info-row b { display: block; font-size: 0.94rem; font-weight: 620; }
.info-row p, .info-row span { font-size: 0.84rem; color: var(--muted); }

.info-row a:hover { color: var(--emerald); }

.hours-list { display: grid; gap: 0.15rem; }

.hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  font-size: 0.86rem;
  color: var(--muted);
  transition: background-color 0.25s var(--ease);
}

.hours-row span:last-child { font-family: var(--font-num); font-size: 0.8rem; color: var(--text); }

.hours-row.is-today {
  background: rgba(255, 45, 149, 0.14);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(255, 45, 149, 0.26);
}

.hours-row.is-today::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--emerald);
  margin-right: 0.35rem;
  flex: none;
}

.hours-row.is-today span:first-child { margin-right: auto; }

.social-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.84rem;
  font-weight: 550;
  color: var(--muted);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.social-link:hover { color: var(--text); border-color: var(--line-2); transform: translateY(-2px); }
.social-link svg { width: 16px; height: 16px; }

/* CTA banner */
.cta-banner {
  position: relative;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--r-xl);
  overflow: hidden;
  text-align: center;
  border: 1px solid rgba(255, 45, 149, 0.26);
  background:
    radial-gradient(700px 300px at 50% -20%, rgba(255, 45, 149, 0.34), transparent 70%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.012));
}

.cta-banner h2 { font-size: clamp(1.7rem, 4vw, 2.75rem); }
.cta-banner p { margin: 1rem auto 0; max-width: 34rem; color: var(--muted); }

.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2rem;
}

/* ---------- 18. FAQ ---------- */
.faq { padding-block: var(--section-y); }

.faq__list {
  display: grid;
  gap: 0.65rem;
  max-width: 52rem;
  margin-inline: auto;
}

.faq__item {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.028);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.faq__item[open] { border-color: rgba(255, 45, 149, 0.34); background: rgba(255, 45, 149, 0.05); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  list-style: none;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "+";
  font-family: var(--font-num);
  font-size: 1.25rem;
  color: var(--emerald);
  transition: transform 0.35s var(--ease);
  flex: none;
}

.faq__item[open] summary::after { transform: rotate(45deg); }

.faq__answer { padding: 0 1.35rem 1.35rem; color: var(--muted); font-size: 0.91rem; }
.faq__answer a { color: var(--emerald); }

/* ---------- 19. Footer ---------- */
.footer {
  position: relative;
  margin-top: var(--section-y);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}

.footer__grid {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.footer__brand { max-width: 26rem; }
.footer__brand p { margin-top: 1.1rem; font-size: 0.88rem; color: var(--muted); }

.footer h4 {
  font-family: var(--font-num);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1.1rem;
}

.footer__links { display: grid; gap: 0.55rem; }
.footer__links a { font-size: 0.88rem; color: var(--muted); width: fit-content; transition: color 0.25s var(--ease); }
.footer__links a:hover { color: var(--emerald); }

.legal {
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--r-lg);
  border: 1px dashed rgba(255, 45, 149, 0.32);
  background: rgba(255, 45, 149, 0.06);
  margin-bottom: 2rem;
}

.legal h4 { color: #ff8fc0; margin-bottom: 0.85rem; }
.legal p { font-size: 0.83rem; color: var(--muted); line-height: 1.7; }
.legal p + p { margin-top: 0.7rem; }
.legal b { color: var(--text); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--dim);
}

.footer__bottom a { color: var(--muted); }
.footer__bottom a:hover { color: var(--emerald); }

.age-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 45, 149, 0.3);
  background: rgba(255, 45, 149, 0.08);
  font-family: var(--font-num);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--gold-2);
}

/* ---------- 20. Floating action bar ---------- */
.fab {
  position: fixed;
  z-index: 70;
  left: 50%;
  bottom: 0.9rem;
  translate: -50% 0;
  display: flex;
  gap: 0.4rem;
  padding: 0.45rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: rgba(20, 9, 44, 0.92);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 20px 50px -20px #000;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.fab.is-hidden { opacity: 0; transform: translateY(120%); pointer-events: none; }

.fab a, .fab button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.62rem 1rem;
  border-radius: var(--r-pill);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.fab a:hover, .fab button:hover { background: rgba(255, 255, 255, 0.08); }
.fab svg { width: 16px; height: 16px; }

/* `.fab a` sets display, which beats the hidden attribute JS uses to hide the
   Call button while no phone number is configured. Without this the button
   shows up and dials a placeholder. Same trap as .btn[hidden] below. */
.fab a[hidden], .fab button[hidden] { display: none; }
.fab .fab__primary { background: linear-gradient(135deg, var(--emerald), var(--jade)); color: #0a0618; }
.fab .fab__primary:hover { background: linear-gradient(135deg, #4ff0a6, var(--jade)); }

/* The Chat button is a <button>, not a link, because it opens a chat window
   rather than navigating. Reset the browser default so it matches the bar. */
.fab button {
  font-family: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

/* tawk.to drops its own floating bubble in the bottom-right corner. The site
   already has the action bar for that job, and two launchers side by side
   looks like a mistake — so the widget is used as a window only. Its container
   is hidden; the API still opens the chat. */
#tawk-bubble-container,
.tawk-min-container,
iframe[title="chat widget"] {
  display: none !important;
}

/* ---------- 21. Age gate ---------- */
.gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  padding: var(--gutter);
  background: rgba(8, 4, 20, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow-y: auto;
}

.gate.is-open { display: grid; }

.gate__card {
  width: min(520px, 100%);
  padding: clamp(1.75rem, 5vw, 2.75rem);
  border-radius: var(--r-xl);
  text-align: center;
  background:
    radial-gradient(600px 260px at 50% -10%, rgba(255, 45, 149, 0.24), transparent 70%),
    rgba(20, 9, 44, 0.93);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg);
  animation: gate-in 0.5s var(--ease) both;
}

@keyframes gate-in {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
}

.gate__mark { width: 66px; height: 66px; margin: 0 auto 1.4rem; border-radius: 20px; overflow: hidden; }

.gate h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
.gate h2 span { color: var(--emerald); }

.gate p { margin-top: 0.9rem; color: var(--muted); font-size: 0.92rem; }

.gate__list {
  display: grid;
  gap: 0.5rem;
  margin: 1.5rem 0;
  text-align: left;
}

.gate__list li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--muted);
}

.gate__list svg { width: 16px; height: 16px; flex: none; margin-top: 0.25rem; color: var(--emerald); }

.gate__actions { display: grid; gap: 0.6rem; }

.gate__decline { font-size: 0.82rem; color: var(--dim); }

.gate__decline button { color: var(--muted); text-decoration: underline; }
.gate__decline button:hover { color: var(--text); }

.gate__msg {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 45, 149, 0.35);
  background: rgba(255, 45, 149, 0.10);
  font-size: 0.84rem;
  color: #ffb0d4;
  text-align: left;
  display: none;
}

.gate__msg.is-open { display: block; }

.gate__fine {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.74rem;
  color: var(--dim);
  line-height: 1.6;
}

/* ---------- 22. Toast ---------- */
.toast {
  position: fixed;
  z-index: 210;
  left: 50%;
  bottom: 5.5rem;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.15rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: rgba(20, 9, 44, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
  font-size: 0.86rem;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}

.toast.is-open { opacity: 1; transform: none; }
.toast svg { width: 17px; height: 17px; color: var(--emerald); }

/* ---------- 23. Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--delay, 0ms);
}

.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 24. Utilities ---------- */
.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;
  left: 50%;
  top: -100px;
  translate: -50% 0;
  z-index: 300;
  padding: 0.85rem 1.35rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--emerald);
  color: #0a0618;
  font-weight: 650;
  transition: top 0.3s var(--ease);
}

.skip-link:focus { top: 0; }

/* ---------- 25. Responsive ---------- */
@media (min-width: 640px) {
  .tile { grid-column: span 3; }
  .tile--wide { grid-column: span 4; }
  .tile--tall { grid-column: span 2; min-height: 300px; }
  .status-chip { display: inline-flex; }
}

@media (min-width: 900px) {
  .gallery__grid { grid-auto-rows: 190px; }
  .tile { grid-column: span 2; min-height: 0; }
  .tile--wide { grid-column: span 4; grid-row: span 1; }
  .tile--tall { grid-column: span 2; grid-row: span 2; }
  .tile--hero { grid-column: span 4; grid-row: span 2; }

  .reviews__head { grid-template-columns: 1fr auto; }
  .about__grid { grid-template-columns: 1fr 1fr; }
  .visit__grid { grid-template-columns: 1.15fr 1fr; }
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
  .hero__grid { grid-template-columns: 1.35fr 0.85fr; }
  .scroll-cue { display: flex; }
}

@media (min-width: 1040px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .drawer { display: none; }
}

@media (max-width: 480px) {
  .hero__meta { gap: 1.1rem; }
  .hero__meta-item { flex: 1 1 45%; }
  .fab a, .fab button { padding: 0.6rem 0.8rem; font-size: 0.78rem; }
  .chart__labels span:nth-child(even) { display: none; }
  /* Hover tooltips are useless on touch and would overhang the bars nearest the
     right edge, widening the layout viewport. */
  .bar__tip { display: none; }
  /* Keep the header to brand + menu; calling is one tap away in the action bar. */
  .header .btn { display: none; }
  .header__inner { gap: 0.5rem; }
}

@media (max-width: 640px) {
  /* The stacked wordmark is taller than the header on narrow screens — trim it
     rather than let the chip clip against the top edge. */
  .brand__mark { width: 38px; height: 38px; }
  .brand__name { font-size: 0.8rem; padding: 0.17rem 0.46rem; border-radius: 6px; }
  .brand__tag { font-size: 0.86rem; letter-spacing: 0.1em; }
  .brand__tag::after { margin-top: 0.2rem; }
  .brand__text { gap: 0.24rem; }
}

/* Short viewports: keep hero content above the fold */
@media (max-height: 720px) and (min-width: 900px) {
  .hero { min-height: auto; padding-top: 8rem; padding-bottom: 4rem; }
}

/* ---------- 26. Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .ticker__track { animation: none; }
}

@media print {
  .header, .fab, .gate, .drawer, .lightbox, .scroll-cue, .ticker { display: none !important; }
  body { background: #fff; color: #000; }
  body::before, body::after { display: none; }
}


/* ==========================================================================
   Enquiry cart — a list you send us, not a checkout
   ========================================================================== */

/* ---------- Header trigger ---------- */
.enquiry-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.62rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(34, 230, 255, 0.45);
  background: rgba(34, 230, 255, 0.12);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.enquiry-btn:hover {
  background: rgba(34, 230, 255, 0.2);
  border-color: var(--emerald);
  transform: translateY(-1px);
}

.enquiry-btn svg { width: 17px; height: 17px; flex: none; color: var(--emerald); }

.enquiry-btn__count {
  min-width: 1.35rem;
  padding: 0 0.32rem;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: #fff;
  font-family: var(--font-num);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35rem;
  text-align: center;
}

.enquiry-btn__count[hidden] { display: none; }

/* .btn sets display, which otherwise beats the hidden attribute that JS uses to
   hide the chat button when no chat service is configured. */
.btn[hidden] { display: none; }

/* Pulse once when something is added */
.enquiry-btn.is-bumped { animation: cart-bump 0.5s var(--ease); }
@keyframes cart-bump {
  40% { transform: scale(1.09); }
}

@media (max-width: 700px) {
  .enquiry-btn__label { display: none; }
}

/* ---------- Brand banner ----------
   Sits under the menu heading. Kept as an <img> so the artwork lives in
   assets/banner.svg and can be replaced without touching the page. */
.brand-banner {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 1.75rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-md);
}

/* A 1200x300 banner has a lot of empty space on a phone; crop it to the brand
   lockup and the CTA so it still reads at 390px wide. */
@media (max-width: 640px) {
  .brand-banner {
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: left center;
  }
}

/* ---------- Card quantity control ---------- */
.strain__add {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.strain:hover .strain__add,
.strain:focus-within .strain__add,
.strain.is-in-cart .strain__add { opacity: 1; transform: none; }

/* On touch there is no hover, so always show it */
@media (hover: none) {
  .strain__add { opacity: 1; transform: none; }
}

.strain__add button {
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.6rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(12, 6, 28, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--font-num);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.strain__add button:hover { background: var(--jade); border-color: var(--emerald); color: #04121a; }

.strain__add button[data-add] { background: linear-gradient(135deg, var(--emerald), var(--jade)); color: #04121a; border-color: transparent; font-weight: 700; }
.strain__add button[data-add]:hover { background: linear-gradient(135deg, #6ff0ff, var(--jade)); }

/* The stepper only appears once the item is in the list */
.strain__add .qty-step { display: none; }
.strain.is-in-cart .strain__add .qty-step { display: inline-flex; align-items: center; justify-content: center; }
.strain.is-in-cart .strain__add button[data-add] { display: none; }

.strain__add .qty-value {
  min-width: 1.7rem;
  text-align: center;
  color: #fff;
  font-family: var(--font-num);
  font-size: 0.78rem;
  font-weight: 700;
}

/* ---------- Drawer ---------- */
.cart {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.cart::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 3, 16, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.cart.is-open { pointer-events: auto; }
.cart.is-open::before { opacity: 1; }

.cart__panel {
  position: relative;
  width: min(430px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(23, 11, 48, 0.98), rgba(10, 6, 24, 0.99));
  border-left: 1px solid rgba(255, 45, 149, 0.35);
  box-shadow: -30px 0 80px -30px #000;
  transform: translateX(102%);
  transition: transform 0.42s var(--ease);
}

.cart.is-open .cart__panel { transform: none; }

.cart__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.4rem 1.1rem;
  border-bottom: 1px solid var(--line);
}

.cart__head h2 {
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.cart__sub { margin-top: 0.35rem; font-size: 0.78rem; color: var(--dim); line-height: 1.5; max-width: 22rem; }

.cart__close {
  width: 38px; height: 38px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}
.cart__close:hover { background: rgba(255, 255, 255, 0.12); }
.cart__close svg { width: 16px; height: 16px; }

.cart__body { flex: 1; overflow-y: auto; padding: 1.1rem 1.4rem; }

.cart__list { display: grid; gap: 0.6rem; }

.cart__row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
}

.cart__thumb {
  width: 56px; height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: #22123f;
  flex: none;
}

.cart__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cart__info { min-width: 0; }
.cart__info b { display: block; font-size: 0.88rem; font-weight: 650; }
.cart__info span { font-family: var(--font-num); font-size: 0.72rem; color: var(--dim); }

.cart__row-actions { display: flex; align-items: center; gap: 0.35rem; }

.cart__row-actions button {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 7px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-family: var(--font-num);
  font-size: 0.8rem;
  line-height: 1;
}
.cart__row-actions button:hover { background: rgba(34, 230, 255, 0.2); border-color: var(--emerald); }
.cart__row-actions .cart__qty { min-width: 1.4rem; text-align: center; font-family: var(--font-num); font-size: 0.8rem; color: var(--text); }

.cart__empty {
  padding: 1.6rem 0.4rem;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--muted);
  text-align: center;
}

.cart__empty[hidden] { display: none; }
.cart__empty strong { color: var(--text); }

.cart__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-num);
  font-size: 0.8rem;
  color: var(--muted);
}

.cart__total[hidden] { display: none; }

.cart__foot {
  padding: 1.1rem 1.4rem 1.4rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.55rem;
}

.cart__note {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--dim);
}

@media (max-width: 520px) {
  .cart__panel { width: 100%; border-left: 0; }
  .cart__head { padding: 1.1rem 1.1rem 0.9rem; }
  .cart__body, .cart__foot { padding-inline: 1.1rem; }
}

/* ---------- Bulk weight tiers (hash) ---------- */

/* Three weight/price pairs shown under the product name */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 0.35rem;
}

.tier {
  display: grid;
  gap: 0.15rem;
  padding: 0.5rem 0.4rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 45, 149, 0.28);
  background: linear-gradient(180deg, rgba(255, 45, 149, 0.12), rgba(255, 45, 149, 0.03));
  text-align: center;
}

.tier b {
  font-family: var(--font-num);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.tier span {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold-2);
  letter-spacing: -0.01em;
}

/* ---------- Sale ----------
   The struck-through former price and the "50% OFF" badge. The former price is
   deliberately quiet — evidence for the discount, not the offer — but it still
   has to be legible, which at 0.72rem in a monospace face it was not. */

.was {
  display: block;
  font-family: var(--font-num);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  opacity: 0.85;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 45, 149, 0.75);
  text-decoration-thickness: 1.5px;
  letter-spacing: 0;
  line-height: 1.35;
}

/* On the card's headline price the "was" sits above the current price. */
.strain__price .was {
  font-size: 0.8rem;
  margin-bottom: 0.12rem;
}

.tier--sale {
  border-color: rgba(255, 45, 149, 0.55);
  background: linear-gradient(180deg, rgba(255, 45, 149, 0.22), rgba(255, 45, 149, 0.06));
}

/* Two lines in a tier cell: former price, then what you pay. Slightly tighter
   than a single-price tier so the grid does not grow taller than it needs to. */
.tier__price { display: block; }
.tier__price .was { font-size: 0.76rem; margin-bottom: 0.06rem; }
.tier--sale { padding-block: 0.45rem; }

.pill--sale {
  background: linear-gradient(135deg, var(--gold), #ff6a3d);
  border-color: transparent;
  color: #1a0410;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* Banner under the menu heading */
.sale-banner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.35rem;
  padding: 0.7rem 1.05rem 0.7rem 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 45, 149, 0.45);
  background: linear-gradient(90deg, rgba(255, 45, 149, 0.18), rgba(255, 45, 149, 0.04));
  width: fit-content;
  max-width: 100%;
}

.sale-banner[hidden] { display: none; }

.sale-banner__tag {
  flex: none;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--gold), #ff6a3d);
  color: #1a0410;
  font-family: var(--font-num);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.sale-banner__text { display: grid; gap: 0.1rem; min-width: 0; }
.sale-banner__text b { font-size: 0.9rem; color: var(--text); }
.sale-banner__text span { font-size: 0.76rem; color: var(--muted); }

@media (max-width: 480px) {
  .sale-banner { border-radius: var(--r-md); align-items: flex-start; }
  .sale-banner__text b { font-size: 0.84rem; }
}

/* Weight picker on the card, in place of the quantity stepper */
.strain__add--bulk { gap: 0.35rem; }

.bulk-select {
  height: 2rem;
  padding: 0 1.6rem 0 0.6rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background-color: rgba(12, 6, 28, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--font-num);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 15px) 0.85rem, calc(100% - 10px) 0.85rem;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.bulk-select:hover { border-color: var(--emerald); }
.bulk-select option { background: #170b30; color: #fff; }

@media (max-width: 420px) {
  /* Phones used to stack the tiers one per row, which made every card about
     1100px tall — a customer scrolled a full screen and a half per product.
     Two across halves that while keeping each price readable, and the five
     tiers settle into 2+2+1 rows. */
  .tiers { grid-template-columns: repeat(2, 1fr); }
  /* A little less padding so the price still has room at ~150px wide. */
  .tier { padding: 0.45rem 0.3rem; }
  .tier__price .was { font-size: 0.72rem; }
}
/* ---------- Cart row controls ---------- */

/* Two lines per row: thumbnail + detail + steppers, then a full-width Remove.
   Three columns on one line left the Remove button clipped at the panel edge. */
.cart__row {
  grid-template-columns: 56px 1fr auto;
  grid-template-areas:
    "thumb info actions"
    "remove remove remove";
  row-gap: 0.6rem;
}

.cart__thumb { grid-area: thumb; }
.cart__info { grid-area: info; }
.cart__row-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.cart__remove { grid-area: remove; width: 100%; justify-content: center; }

.cart__row-actions .cart__step {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 7px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-family: var(--font-num);
  font-size: 0.84rem;
  line-height: 1;
}
.cart__row-actions .cart__step:hover { background: rgba(34, 230, 255, 0.2); border-color: var(--emerald); }

.cart__remove {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  height: 26px;
  padding: 0 0.5rem;
  border-radius: 7px;
  border: 1px solid rgba(255, 45, 149, 0.45);
  background: rgba(255, 45, 149, 0.12);
  color: #ffb0d4;
  font-family: var(--font-num);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cart__remove:hover { background: rgba(255, 45, 149, 0.26); border-color: var(--gold); color: #fff; }
.cart__remove svg { width: 11px; height: 11px; }

/* Clear-all sits under the list, quiet until hovered */
.cart__clear {
  display: block;
  width: 100%;
  margin-top: 0.9rem;
  padding: 0.55rem;
  border-radius: var(--r-pill);
  border: 1px dashed var(--line-2);
  background: transparent;
  color: var(--dim);
  font-family: var(--font-num);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cart__clear:hover { color: #ffb0d4; border-color: rgba(255, 45, 149, 0.5); }
.cart__clear[hidden] { display: none; }

@media (max-width: 420px) {
  .cart__remove span { display: none; }
  .cart__remove { padding: 0 0.4rem; }
}
/* ---------- Card buy row ----------
   The weight picker and Add/Remove sit in the card body rather than over the
   photo, so they cannot cover the tier grid or the price. */

.buy {
  display: flex;
  align-items: stretch;
  gap: 0.45rem;
  /* On a narrow card the select and the button are better stacked than
     squeezed: side by side, the select truncates the price it is showing
     ("10 g — ฿3"), which is the one thing on the card that must be readable. */
  flex-wrap: wrap;
}

.buy__select {
  flex: 1 1 8rem;
  min-width: 0;
  height: 2.4rem;
  padding: 0 2rem 0 0.75rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background-color: rgba(12, 6, 28, 0.75);
  color: var(--text);
  font-family: var(--font-num);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--emerald) 50%), linear-gradient(135deg, var(--emerald) 50%, transparent 50%);
  background-position: calc(100% - 18px) 1.05rem, calc(100% - 12px) 1.05rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.buy__select:hover { border-color: var(--emerald); background-color: rgba(34, 230, 255, 0.1); }
.buy__select:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.buy__select option { background: #170b30; color: #fff; }

.buy__btn {
  flex: 1 1 auto;
  min-width: 4.6rem;
  height: 2.4rem;
  padding: 0 1rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--emerald), var(--jade));
  color: #04121a;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}

.buy__btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -12px var(--glow-jade); }
.buy__btn[hidden] { display: none; }

.buy__btn--remove {
  background: rgba(255, 45, 149, 0.16);
  border-color: rgba(255, 45, 149, 0.5);
  color: #ffb0d4;
}
.buy__btn--remove:hover { background: rgba(255, 45, 149, 0.3); color: #fff; box-shadow: none; }