/* motorcitycannabites.com rebuild — the one stylesheet.
   Tokens, type and rhythm follow build/DIRECTION.md exactly. Every page loads this file and js/site.js.
   Paths are root-relative (/css, /js, /img) so pages in /brands/ work unchanged; fonts are ../fonts/ from here.
   Generic pieces other agents reuse: .wrap .grid .section .btn .card .room .strip .tile .page-head .table .form .age-gate */

/* ---------- fonts (self-hosted, WOFF2, Latin) ---------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
}
@font-face {
  /* Ampersand only (owner call, 29 Oct: Fraunces' curly & reads like an @). Every & inside a Fraunces heading
     renders from Inter instead; unicode-range makes this one glyph, no markup changes anywhere. */
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0026;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}

/* ---------- tokens ---------- */
:root {
  --paper: #F3EFE7;
  --paper-2: #E9E3D6;
  --ink: #121212;
  --ink-2: #2A2A2A;
  --muted: #6B6760;
  --muted-ink: #B8B2A6;
  --accent: #A819C9;
  --accent-ink: #D64BF0;
  --line: #D9D2C4;
  --radius: 12px;
  --max: 1200px;
  --gutter: 24px;
  --rhythm: 56px;              /* section rhythm: 56 phone, 96 desktop */

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --body: 17px;                /* 17 phone, 18 desktop; nothing under 16 ever */
  --lh: 1.55;
  --h-hero: 40px;  --h-hero-lh: 46px;   /* 56/64 from 768 up */
  --h-section: 30px; --h-section-lh: 38px; /* 36/44 from 768 up */
  --h-card: 22px;  --h-card-lh: 24px;
  --track: -0.01em;

  --header-h: 72px;
  --shadow-soft: 0 1px 2px rgba(18, 18, 18, .06), 0 8px 24px rgba(18, 18, 18, .08);

  /* room colours (DIRECTION): used only inside that brand's block and page */
  --room-mcc: #8A14A8;
  --room-chewii: #0E6F6A;
  --room-bossy: #1A1206;
  --room-flight: #F2C1D1;
  --room-ripz: #1437C7;
  --room-king-cole: #3C1E6B;
}
@media (min-width: 768px) {
  :root {
    --rhythm: 96px;
    --body: 18px;
    --h-hero: 56px;  --h-hero-lh: 64px;
    --h-section: 36px; --h-section-lh: 44px;
  }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--body);
  line-height: var(--lh);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.on-ink :focus-visible, .on-ink:focus-visible { outline-color: var(--accent-ink); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[tabindex="-1"]:focus { outline: 0; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 1000; background: var(--accent); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 600; }
.skip-link:focus { top: 16px; }

/* ---------- type ---------- */
.h-hero, .h-section, .h-card, .serif {
  font-family: var(--serif);
  font-optical-sizing: auto;
  letter-spacing: var(--track);
  font-weight: 600;
  font-variation-settings: "SOFT" 30;
}
.h-hero { font-size: var(--h-hero); line-height: var(--h-hero-lh); }
.h-section { font-size: var(--h-section); line-height: var(--h-section-lh); }
.h-card { font-size: var(--h-card); line-height: var(--h-card-lh); font-weight: 600; }
.lede { font-size: calc(var(--body) + 2px); line-height: 1.5; }
.muted { color: var(--muted); }
.on-ink .muted, .on-ink.muted { color: var(--muted-ink); }
.eyebrow { font-size: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.on-ink .eyebrow { color: var(--muted-ink); }
.measure { max-width: 34em; }
.stack > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 24px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.section { padding-top: var(--rhythm); padding-bottom: var(--rhythm); }
.section-head { margin-bottom: 40px; }
.section-head .lede { margin-top: 12px; }
.band-paper { background: var(--paper); color: var(--ink); }
.band-paper-2 { background: var(--paper-2); color: var(--ink); }
.on-ink { background: var(--ink); color: var(--paper); }
.on-ink a { color: var(--accent-ink); }
.hairline { border: 0; border-top: 1px solid var(--line); margin: 0; }
.on-ink .hairline { border-top-color: rgba(243, 239, 231, .14); }

/* ---------- buttons (pills) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 26px;
  border-radius: 999px; border: 2px solid transparent;
  font-family: var(--sans); font-weight: 600; font-size: 17px; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary, .on-ink .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: #A117C4; border-color: #A117C4; }
.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: rgba(18, 18, 18, .06); }
.on-ink .btn-outline, .site-header .btn-outline { border-color: var(--paper); color: var(--paper); }
.on-ink .btn-outline:hover, .site-header .btn-outline:hover { background: rgba(243, 239, 231, .1); }
.btn-small { min-height: 44px; padding: 8px 20px; font-size: 16px; }
.btn-group { display: flex; flex-wrap: wrap; gap: 12px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  border-bottom: 1px solid rgba(243, 239, 231, .08);
  transition: box-shadow .2s ease;
}
.site-header.is-stuck { box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }
.brand-mark { display: inline-flex; align-items: center; margin-right: auto; }
.brand-mark img { height: 44px; width: auto; }
.site-header a { color: var(--paper); text-decoration: none; }
.nav { display: none; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-list > li { position: relative; }
.nav-link, .nav-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 999px; background: none; border: 0;
  font-size: 16px; font-weight: 500; color: var(--paper); cursor: pointer; white-space: nowrap;
}
.nav-link:hover, .nav-toggle:hover, .nav-toggle[aria-expanded="true"] { background: rgba(243, 239, 231, .1); }
.nav-link[aria-current="page"] { background: rgba(243, 239, 231, .14); }
.nav-toggle .chev { width: 12px; height: 12px; transition: transform .15s ease; }
.nav-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-menu {
  position: absolute; left: 0; top: calc(100% + 8px); min-width: 240px;
  background: var(--ink-2); border: 1px solid rgba(243, 239, 231, .1); border-radius: var(--radius);
  padding: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
  display: none;
}
.nav-menu.is-open { display: block; }
.nav-menu a { display: block; padding: 10px 14px; border-radius: 8px; font-size: 16px; font-weight: 500; }
.nav-menu a:hover, .nav-menu a:focus-visible { background: rgba(243, 239, 231, .1); }
.nav-menu .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 10px; vertical-align: -1px; background: var(--sw, var(--accent)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
/* Order on LeafLink stays in the sticky header at every width: the full label from 1024 up, a compact pill on a phone */
.header-cta { display: inline-flex; min-height: 44px; padding: 8px 18px; font-size: 16px; }
.header-cta .cta-long { display: none; }
.header-cta .cta-short { display: inline; }
.menu-button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px; border-radius: 999px;
  background: none; border: 2px solid rgba(243, 239, 231, .3); color: var(--paper); font-weight: 600; font-size: 16px; cursor: pointer;
}
.menu-button svg { width: 18px; height: 18px; }
.menu-button .icon-close { display: none; }
.menu-button[aria-expanded="true"] .icon-close { display: block; }
.menu-button[aria-expanded="true"] .icon-open { display: none; }
/* phone drawer */
.nav.is-open {
  display: block; position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 99;
  background: var(--ink); overflow-y: auto; padding: 16px var(--gutter) 40px;
  border-top: 1px solid rgba(243, 239, 231, .08);
}
.nav.is-open .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
.nav.is-open .nav-link, .nav.is-open .nav-toggle { width: 100%; justify-content: space-between; padding: 14px 12px; font-size: 18px; border-radius: 10px; }
.nav.is-open .nav-menu { position: static; box-shadow: none; border: 0; background: transparent; padding: 0 0 8px 12px; min-width: 0; }
.nav.is-open .nav-menu a { font-size: 17px; }
.nav.is-open .nav-cta { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.nav.is-open .nav-cta .btn { width: 100%; }
.nav-cta { display: none; }
@media (min-width: 1024px) {
  .nav { display: block; }
  .nav-cta, .menu-button { display: none; }
  .header-cta { display: inline-flex; min-height: 52px; padding: 12px 26px; font-size: 17px; }
  .header-cta .cta-long { display: inline; }
  .header-cta .cta-short { display: none; }
}
@media (max-width: 1023px) {
  .site-header .wrap { gap: 12px; }
  .brand-mark { margin-right: auto; }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  .nav-link, .nav-toggle { padding: 10px 10px; }
}
body.nav-open { overflow: hidden; }

/* ---------- hero shelf ----------
   Six normalised cut-outs (img/hero, 640x800 canvas each, bottoms on the canvas edge) sit on ONE baseline.
   Equal canvases + space-between = equal gaps. One light floor ellipse each; a 1px rule at 8% of --line on the ink. */
.hero { position: relative; overflow: hidden; }
.shelf-wrap { max-width: calc(1440px + 2 * var(--gutter)); margin: 0 auto; padding: 28px var(--gutter) 0; }
.hero .hero-text { padding-top: 32px; padding-bottom: var(--rhythm); }
.shelf {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  row-gap: 28px; position: relative; padding-bottom: 14px;
  --shelf-line: rgba(217, 210, 196, .08);
  --shelf-h: calc((100vw - 140px) / 4.8);  /* six 0.8:1 canvases plus five gaps fit the row */
}
.shelf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--shelf-line); }
.shelf-item { position: relative; flex: 0 0 auto; display: flex; justify-content: center; align-items: flex-end; }
.shelf-item::before { /* floor: a faint light ellipse reads as a surface on ink; black would vanish */
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -5px; height: 16px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .04) 45%, transparent 72%);
  z-index: 0;
}
.shelf-item img { position: relative; z-index: 1; display: block; height: var(--shelf-h); width: auto; max-width: 100%; }
@media (max-width: 767px) {
  /* two shelves of three: each item draws its own run of the shelf line, so both rows sit on a line */
  .shelf { justify-content: flex-start; padding-bottom: 0; }
  .shelf::after { display: none; }
  .shelf-item { width: 33.3333%; padding-bottom: 14px; }
  .shelf-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--shelf-line); }
  .shelf-item img { height: auto; width: 100%; }
  .shelf-item::before { bottom: 9px; }
}
.hero-text { position: relative; z-index: 2; }
.hero-text .h-hero { max-width: 15em; }
.hero-text .lede { margin-top: 16px; max-width: 34em; }
.hero-text .btn-group { margin-top: 28px; }
@media (min-width: 768px) {
  .shelf-wrap { padding-top: 40px; }
  .hero .hero-text { padding-top: 40px; }
}
@media (min-width: 1024px) {
  .hero-text { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gutter); align-items: end; }
  .hero-text .btn-group { margin-top: 0; justify-content: flex-end; }
}
@media (min-width: 1488px) {
  .shelf { --shelf-h: 280px; }
}

/* ---------- cards & tiles ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.on-ink .card { background: var(--ink-2); border-color: rgba(243, 239, 231, .1); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 768px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); } }
/* 7 format tiles: at 3 columns the 7th sits alone on a third row, so go 4+3 on wide screens */
@media (min-width: 1200px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: #CFC7B6; text-decoration: none; }
.tile-media {
  position: relative; height: 180px; padding: 20px 20px 0;
  display: flex; align-items: flex-end; justify-content: center;
  background: linear-gradient(180deg, var(--paper-2), #fff 85%);
  overflow: hidden;
}
.tile-media img { max-height: 100%; width: auto; object-fit: contain; object-position: bottom; }
/* a file that is already cut (the lotion window): fill the media box so the cut edge runs off the top */
.tile-media--window { padding: 0; }
.tile-media--window img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center 80%; }
.tile-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tile-body .h-card { color: var(--ink); }
.tile-body p { color: var(--muted); font-size: 16px; line-height: 1.5; }
.tile-body .tile-link { margin-top: auto; padding-top: 6px; color: var(--accent); font-weight: 600; font-size: 16px; }
@media (min-width: 768px) {
  .tile-media { height: 240px; }
  .tile-body { padding: 22px 24px 26px; }
  .tile-body p { font-size: 17px; }
}
@media (max-width: 479px) {
  /* list tiles on a phone: picture left, words right, one per row */
  .tiles { grid-template-columns: 1fr; gap: 12px; }
  .tile { flex-direction: row; align-items: stretch; }
  .tile-media { flex: 0 0 124px; width: 124px; height: auto; min-height: 150px; padding: 12px 10px 0; }
  .tile-body { padding: 14px 14px 16px; gap: 6px; }
  .tile-body .h-card { font-size: 19px; line-height: 23px; }
  .tile-body p { font-size: 16px; }
}
/* stacked pills on a phone are equal and full width */
@media (max-width: 599px) {
  .hero .btn-group, .room .btn-group { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .hero .btn-group .btn, .room .btn-group .btn { width: 100%; }
}

/* ---------- brand rooms ---------- */
.room {
  --room: var(--ink);
  --room-fg: #fff;
  --room-muted: rgba(255, 255, 255, .78);
  --room-btn-bg: #fff; --room-btn-fg: var(--ink);
  --room-outline: rgba(255, 255, 255, .85);
  background: var(--room); color: var(--room-fg);
}
.room--mcc { --room: var(--room-mcc); }
.room--chewii { --room: var(--room-chewii); }
.room--bossy { --room: var(--room-bossy); --room-muted: rgba(255, 255, 255, .72); }
.room--flight { --room: var(--room-flight); --room-fg: var(--ink); --room-muted: rgba(18, 18, 18, .72); --room-btn-bg: var(--ink); --room-btn-fg: #fff; --room-outline: var(--ink); }
.room--ripz { --room: var(--room-ripz); }
.room--king-cole { --room: var(--room-king-cole); }
.room .wrap { padding-top: var(--rhythm); padding-bottom: var(--rhythm); }
.room-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.room-text .wordmark { height: 48px; width: auto; max-width: 240px; object-fit: contain; object-position: left center; }
.room-text .wordmark--panel { background: #fff; border-radius: var(--radius); padding: 12px 18px; height: 80px; max-width: 220px; object-position: center; }
.room-text .wordmark--tall { height: 112px; max-width: 160px; }
.room-text .wordmark--block { height: 88px; max-width: 180px; }
.room-text .h-section { margin-top: 24px; color: var(--room-fg); }
.room-text .room-copy { margin-top: 16px; color: var(--room-muted); max-width: 34em; }
.room-text .room-copy p + p { margin-top: 10px; }
.room-text .btn-group { margin-top: 28px; }
.room .btn-primary { background: var(--room-btn-bg); border-color: var(--room-btn-bg); color: var(--room-btn-fg); }
.room .btn-primary:hover { filter: brightness(.94); }
.room .btn-outline { border-color: var(--room-outline); color: var(--room-fg); background: transparent; }
.room .btn-outline:hover { background: rgba(255, 255, 255, .12); }
.room--flight .btn-outline:hover { background: rgba(18, 18, 18, .08); }
.room :focus-visible { outline-color: var(--room-fg); }
.room a { color: var(--room-fg); }
@media (min-width: 900px) {
  .room-inner { grid-template-columns: 5fr 7fr; gap: 48px; }
  .room--flip .room-inner { grid-template-columns: 7fr 5fr; }
  .room--flip .room-text { order: 2; }
  .room--flip .strip { order: 1; }
  .room-text .wordmark { height: 56px; max-width: 280px; }
  .room-text .wordmark--tall { height: 128px; }
  .room-text .wordmark--block { height: 104px; max-width: 200px; }
  .room-text .wordmark--panel { height: 96px; padding: 14px 22px; max-width: 240px; }
}

/* the strip: 4-6 cut-outs on one baseline */
.strip {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center;
  gap: 20px 10px; --strip-h: 130px; position: relative; padding-bottom: 14px;
}
.strip::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 1px; background: rgba(255, 255, 255, .25); }
.room--flight .strip::after { background: rgba(18, 18, 18, .22); }
.strip-item { position: relative; flex: 0 1 auto; min-width: 0; width: 30%; display: flex; align-items: flex-end; justify-content: center; }
.strip-item::before {
  content: ""; position: absolute; left: 50%; bottom: -8px; width: 86%; height: 16px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .2) 45%, transparent 72%);
  filter: blur(3px);
}
.strip-item img { position: relative; height: calc(var(--strip-h) * var(--k, 1)); width: auto; max-width: 100%; object-fit: contain; object-position: bottom; }
/* panels: shots that keep their own background (Ripz) sit in rounded white panels */
.strip--panels { align-items: stretch; }
.strip--panels .strip-item { flex: 1 1 0; width: auto; max-width: 150px; align-items: stretch; }
.strip--panels .strip-item::before { display: none; }
.strip--panels .strip-item img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 35%; border-radius: var(--radius); background: #fff; border: 4px solid #fff; }
@media (min-width: 600px) { .strip { --strip-h: 170px; } .strip-item { width: auto; max-width: 30%; } }
@media (min-width: 900px) { .strip { flex-wrap: nowrap; justify-content: space-evenly; gap: 0 10px; --strip-h: 210px; } .strip-item { max-width: 19%; } .strip-item:nth-last-child(4):first-child, .strip-item:nth-last-child(4):first-child ~ .strip-item { max-width: 26%; } .strip--panels .strip-item { max-width: 190px; } }
@media (min-width: 1280px) { .strip { --strip-h: 250px; } .room--king-cole .strip { --strip-h: 300px; } }
@media (max-width: 599px) { .strip-item { width: 30%; } .strip--panels .strip-item { flex: 0 0 30%; max-width: 30%; } }

/* ---------- for dispensaries band ---------- */
.points { display: grid; gap: 16px; }
.point { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; }
.point-num { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; }
.point p { padding-top: 4px; }
.split { display: grid; gap: 36px; align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: 5fr 7fr; gap: 48px; }
}

/* ---------- where to buy ---------- */
.store-search { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.store-search input { flex: 1 1 220px; min-height: 52px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; color: var(--ink); }
.store-search input:focus { border-color: var(--accent); }
.store-list { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
@media (min-width: 600px) { .store-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .store-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.store { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; display: flex; flex-direction: column; gap: 2px; transition: box-shadow .15s ease, transform .15s ease; }
.store:hover { box-shadow: 0 6px 18px rgba(18, 18, 18, .08); transform: translateY(-1px); }
.store-name a { color: var(--ink); text-decoration: none; }
.store-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.store-name { font-weight: 600; }
.store-city { color: var(--ink); font-weight: 600; font-size: 16px; }
.store-addr { color: var(--muted); font-size: 16px; }
.store-note { margin-top: 24px; color: var(--muted); }
.store-empty { margin-top: 24px; color: var(--muted); }

/* ---------- generic page head (brand / inner pages) ---------- */
.page-head .wrap { padding-top: 48px; padding-bottom: 48px; }
.page-head .lede { margin-top: 12px; max-width: 36em; }
.adults-line { font-size: 16px; font-weight: 500; }

/* ---------- tabs (brand page format filter) ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab { min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 16px; font-weight: 500; cursor: pointer; }
.tab:hover { border-color: var(--ink); }
.tab[aria-selected="true"], .tab.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- product grid (brand pages) ---------- */
.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 768px) { .products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); } }
@media (min-width: 1024px) { .products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.product { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.product-media { height: 200px; padding: 16px 16px 0; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(180deg, var(--paper-2), #fff 85%); }
.product-media img { max-height: 100%; width: auto; object-fit: contain; object-position: bottom; }
/* no picture yet (reason logged in holds.json): a flat tile in the brand's room tint, one muted line, never a dashed box */
.product-media--flat { padding: 16px; align-items: center; background: color-mix(in srgb, var(--tint, var(--paper-2)) 12%, var(--paper-2)); }
.product-media--flat .placeholder-note { color: var(--muted); font-size: 16px; text-align: center; margin: 0; }
.product-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.product-name { font-weight: 600; }
.product-line { color: var(--muted); font-size: 16px; }
.product-tag { display: inline-block; font-size: 16px; color: var(--muted); }
.product-lab { font-size: 16px; font-weight: 500; margin-top: 4px; }

/* ---------- table (lab results) ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.table { width: 100%; border-collapse: collapse; font-size: 16px; }
.table th, .table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-weight: 600; background: var(--paper-2); }
.table tbody tr:nth-child(even) td { background: var(--paper-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.flag { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #FDE8FF; color: #7A0F93; font-size: 16px; font-weight: 500; }

/* ---------- forms ---------- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 16px; }
.field input, .field select, .field textarea { min-height: 52px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font: inherit; color: var(--ink); width: 100%; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); outline: 3px solid rgba(181, 29, 217, .25); outline-offset: 0; }
.field .help { color: var(--muted); font-size: 16px; }
.field [data-field-error], .field-error { color: #9B1C1C; font-size: 16px; font-weight: 500; }
.field input[aria-invalid="true"] { border-color: #9B1C1C; }
[data-form-message] { margin-top: 8px; font-weight: 500; }
.form.is-ok [data-form-message] { color: #1E6B3A; }
.form.is-fail [data-form-message], .form.is-error [data-form-message] { color: #9B1C1C; }
.form .hp { position: absolute; left: -9999px; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--paper); }
.site-footer .wrap { padding-top: 64px; padding-bottom: 40px; }
.footer-top { display: grid; gap: 32px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer-nav a { color: var(--paper); text-decoration: none; font-weight: 500; font-size: 16px; }
.footer-nav a:hover { text-decoration: underline; }
.footer-contact { display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
/* the adults line band: paper-2 strip under the hero (home) or first thing in main (brand, format, inner pages) */
.brand-notice { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.brand-notice .wrap { padding-top: 12px; padding-bottom: 12px; }
.brand-notice .adults-line { color: var(--muted); margin: 0; }
.footer-contact a { color: var(--paper); }
.site-footer .brand-mark img { height: 40px; }
.warnings { margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(243, 239, 231, .14); display: grid; gap: 12px; color: var(--muted-ink); font-size: 16px; line-height: 1.5; }
.warnings .adults { color: var(--paper); font-weight: 500; }
.footer-bottom { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(243, 239, 231, .14); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; color: var(--muted-ink); font-size: 16px; }
@media (min-width: 900px) {
  .footer-top { grid-template-columns: 1fr auto; align-items: start; }
  .footer-contact { align-items: flex-end; text-align: right; }
}

/* ---------- age gate ---------- */
.age-gate {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto;
}
html.age-ok .age-gate { display: none; }
/* AGE-GATE LOCK 1 (WP port): dropped the :has(#age-gate) key, that element no longer exists; the plugin's gate (.avwp-av-overlay, .avwp-av) is appended to body by JavaScript. */
html:not(.age-ok) { overflow: hidden; background: var(--ink); }
/* AGE-GATE LOCK 2 (WP port): fail-closed. Until html.age-ok is set (head script reads the plugin's `age-verification` cookie) every direct child of body except the plugin's gate is invisible; with JavaScript off it stays that way. visibility, not display, so nothing jumps when the lock lifts. */
html:not(.age-ok) body > *:not(.avwp-av-overlay):not(.avwp-av):not(.mcc-nojs):not(#wpadminbar):not(script):not(style) { visibility: hidden; }
html:not(.age-ok) .mcc-nojs { visibility: visible; }
.age-gate-inner { width: 100%; max-width: 520px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.age-gate-inner img { height: 72px; width: auto; }
.age-gate-inner .h-section { margin-top: 8px; }
.age-gate-inner p { color: var(--muted-ink); max-width: 30em; }
.age-gate .btn-group { justify-content: center; margin-top: 8px; }
.age-gate .btn-outline { border-color: var(--paper); color: var(--paper); }
.age-gate .btn-outline:hover { background: rgba(243, 239, 231, .1); }
.age-gate :focus-visible { outline-color: var(--accent-ink); }

/* ---------- 404 ---------- */
.not-found .wrap { padding-top: 96px; padding-bottom: 96px; min-height: 60vh; }

/* ---------- lazy image fade ---------- */
/* site.js marks lazy images .is-loaded; no fade, so a slow or JS-off load never hides a product */
img[loading="lazy"] { background: transparent; }

/* ---------- print ---------- */
@media print { .site-header, .age-gate, .menu-button, .skip-link { display: none !important; } html:not(.age-ok) { overflow: visible; } }

/* ---------------------------------------------------------------- two routes: wholesale and shopper (27 Oct 2026)
   the owner widened "the one button" to two ways in (27 Oct 2026): a wholesale way and a shopper way, picked by a quiet door on the
   first screen and never by a splash page asking which you are. Both routes are in the markup on every page and this
   stylesheet shows one; html.route-consumer is set before paint by the head script, so nothing flashes. Default
   (nothing stored) is wholesale — dispensary buyers first. Order on LeafLink stays one click away on both routes. */
.header-cta--consumer { display: none; }
.nav-item--consumer { display: none; }
.route-consumer .header-cta--trade { display: none; }
.route-consumer .header-cta--consumer { display: inline-flex; }
.route-consumer .nav-item--consumer { display: list-item; }
/* the door stays for a returning shopper: since 3 Nov 2026 it leads to the shopper side (/for-shoppers/) */
.route-consumer .hero-door { display: block; }

/* the door: one quiet line under the hero's two buttons, never a third button competing with them.
   A plain link, so it works with JavaScript off. */
.hero-door { margin: 14px 0 0; font-size: 1rem; }
.hero-door a { color: var(--muted-ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.hero-door a:hover, .hero-door a:focus-visible { color: var(--paper); }
@media (max-width: 560px) { .hero-door { font-size: .95rem; } }

/* the shopper page's brand row */
.shop-brands { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; margin: 18px 0 0; padding: 0; list-style: none; }
.shop-brands a { display: block; color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.shop-brands a:hover, .shop-brands a:focus-visible { border-bottom-color: currentColor; }

/* Flight band: stop the first pack bleeding off-screen on wide viewports */
@media (min-width: 1200px) { .room--flight .strip { padding-left: var(--gutter); padding-right: var(--gutter); } }
/* Flight band: stop the first pack bleeding off-screen on wide viewports */
@media (min-width: 1200px) { .room--flight .strip { padding-left: var(--gutter); padding-right: var(--gutter); } }

/* Intro: smoke + falling gummies (js/intro.js), home page only. Plays once per visit after the 21+ gate. */
.intro { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; background: #121212; z-index: 9998; cursor: pointer; transition: opacity .45s ease; }
.intro canvas { display: block; position: absolute; inset: 0; }
.intro-out { opacity: 0; pointer-events: none; }
.intro-skip { position: absolute; right: 16px; top: calc(16px + env(safe-area-inset-top)); font: 500 16px/1 Inter, system-ui, sans-serif; color: #F3EFE7; background: rgba(18,18,18,.55); border: 1px solid rgba(243,239,231,.35); border-radius: 999px; padding: 10px 18px; cursor: pointer; }
html.intro-on { overflow: hidden; }
.intro::before, .intro::after { content: ""; position: absolute; left: 0; right: 0; height: 400px; background-color: inherit; pointer-events: none; }
.intro::before { bottom: 100%; }
.intro::after { top: 100%; }
/* iPhone Safari draws the page under its floating toolbar and does not paint fixed layers there.
   While the intro plays, the page itself is hidden and the page ground is ink, so that strip is dark too. */
html.intro-on, html.intro-on body { background: #121212; }   /* ink ground for the WHOLE intro: Safari paints its toolbar strip with the page background (3 Nov) */
html.intro-hide body > *:not(.intro) { visibility: hidden; }