/* ===========================================================
   Social Smoke - site stylesheet

   Inherited from aldinari.com per locked decision 5: same base, same
   utilities, same age-gate and header patterns, so the family reads as one
   house. What is new here is the catalog: a data-driven product grid, its
   filter bar, and a product detail layout, none of which the reference
   sites have because their ranges are hand-written.

   Palette note. Social Smoke has no brand color. The wordmark is pure black
   and the old Shopify store ran stock Dawn, so there is nothing to
   reproduce. This is deliberately monochrome, with --brand set to the ink.
   A real accent drops in by changing --brand alone; nothing else hardcodes
   a color.
   =========================================================== */

/* ===== Base / Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html:focus-within { scroll-behavior: smooth; }
html, body { height: 100%; margin: 0; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }

/* ===== Theme ===== */
:root {
  --bg: #ffffff;
  --bg-alt: #f6f6f8;
  --text: #111114;
  --muted: #5b6270;
  --ink: #111114;
  --brand: #111114;          /* monochrome for now, see note above */
  --brand-dark: #000000;
  --border: #e6e7eb;
  --radius: 14px;
  --shadow: 0 12px 30px rgba(17, 17, 20, .10);
  --shadow-lg: 0 20px 50px rgba(17, 17, 20, .16);
  --container: 1320px;
}

/* ===== Utilities ===== */
.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.section { padding: clamp(40px, 5vw, 80px) 0; }
.section.tight { padding: clamp(24px, 3vw, 44px) 0; }
.section.alt { background: var(--bg-alt); }
.section.ink { background: var(--ink); color: #fff; }
.section.ink .lead, .section.ink .muted { color: #b9bec9; }

.grid { display: grid; gap: clamp(16px, 2.5vw, 28px); }
.two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.four  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .three, .four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .two, .three, .four { grid-template-columns: 1fr; } }

.text-center { text-align: center; }
.h1 { font-size: clamp(30px, 5.2vw, 52px); line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 14px; font-weight: 800; }
.h2 { font-size: clamp(22px, 3.2vw, 34px); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 12px; font-weight: 800; }
.h3 { font-size: clamp(17px, 2.1vw, 21px); line-height: 1.2; margin: 0 0 8px; font-weight: 700; }
.lead { font-size: clamp(15px, 1.7vw, 18px); color: var(--muted); max-width: 62ch; }
.lead.center { margin-inline: auto; text-align: center; }
.small { font-size: 14px; color: var(--muted); }
.muted { color: var(--muted); }
.kicker {
  color: var(--brand); font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; font-size: 12px; margin: 0 0 10px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  background: var(--brand); color: #fff; font-weight: 700; cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.btn:hover { background: var(--brand-dark); }
.btn.ghost { background: transparent; color: currentColor; border-color: var(--border); }
.btn.ghost:hover { background: var(--bg-alt); }
.section.ink .btn.ghost:hover { background: rgba(255,255,255,.08); }

.card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.card-inner { padding: clamp(18px, 2.2vw, 26px); }

/* ===== Header ===== */
#siteHeader {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.93);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 0; }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 26px; width: auto; }
.nav-links { display: flex; gap: 22px; align-items: center; }
.nav-links a { font-weight: 700; font-size: 14.5px; color: var(--ink); transition: opacity .18s ease; }
.nav-links a:hover { opacity: .6; }
.nav-links a.is-current { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.menu-btn {
  display: none; border: 1px solid var(--border); border-radius: 10px;
  padding: 7px 12px; background: #fff; font-size: 20px; line-height: 1; cursor: pointer;
}
@media (max-width: 1040px) {
  .nav-links, .nav-actions .btn { display: none; }
  .menu-btn { display: inline-flex; }
  .brand img { height: 22px; }
}

#menuPanel { display: none; border-top: 1px solid var(--border); background: #fff; }
#menuPanel.is-open { display: block; }
#menuPanel ul { list-style: none; margin: 0; padding: 8px 0 16px; }
#menuPanel a { display: block; padding: 13px 4px; font-weight: 700; border-bottom: 1px solid var(--border); }
#menuPanel .btn { margin-top: 14px; width: 100%; }
@media (min-width: 1041px) { #menuPanel { display: none !important; } }

/* ===== Compliance notices ===== */
.warning-bar {
  background: #000; color: #fff; text-align: center; margin: 0;
  font-weight: 800; font-size: clamp(11.5px, 1.5vw, 14px);
  letter-spacing: .02em; padding: 10px 16px;
}
.notice-compliance {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; background: var(--bg-alt); font-size: 14px; color: #3c424e;
}
.notice-compliance strong { color: var(--ink); }

/* ===== Hero ===== */
.hero {
  background: var(--ink); color: #fff; text-align: center;
  padding: clamp(52px, 8vw, 104px) 0;
}
.hero .h1 { color: #fff; text-wrap: balance; }
.hero .lead { color: #c9cdd6; margin-inline: auto; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* ===========================================================
   Catalog
   =========================================================== */

/* ----- Filter bar ----- */
.filters {
  position: sticky; top: 57px; z-index: 900;
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
@media (max-width: 1040px) { .filters { top: 49px; } }
.filter-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filter-label {
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-right: 2px;
}
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 14px; font-size: 13.5px; font-weight: 600;
  background: #fff; color: var(--ink); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.chip:hover { border-color: #c9ccd4; }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip .count { font-size: 11.5px; opacity: .6; font-variant-numeric: tabular-nums; }
.filter-result { font-size: 13.5px; color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }

/* ----- Product grid ----- */
.product-grid {
  display: grid; gap: clamp(14px, 2vw, 24px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .product-grid { grid-template-columns: 1fr; } }

.product-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.product-card.is-hidden { display: none; }

/* Flex rather than grid, and every element between the box and the image
   carries the height constraint. See the note on .gallery-main below: with
   grid plus place-items:center the row is auto-sized, a percentage
   max-height resolves against an indefinite height, and the browser throws
   it away. Only one product currently has a portrait primary image
   (social-smoke-aura-pod-system, 400x425) but 31 portrait images exist in
   the catalog, so any reordering would spill one out of a card. */
.product-media {
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; aspect-ratio: 1 / 1; border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.product-media picture { display: contents; }
.product-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.product-media.is-empty {
  background: var(--bg-alt); color: var(--muted);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}

.product-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-brand {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.product-name { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin: 0; line-height: 1.25; }
.product-desc {
  color: var(--muted); font-size: 13.5px; margin: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pill {
  font-size: 11px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px;
}

.grid-empty {
  grid-column: 1 / -1; text-align: center; padding: 60px 20px;
  color: var(--muted); border: 1px dashed var(--border); border-radius: var(--radius);
}

/* ----- Category sections on the catalog page ----- */
.cat-head {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 18px; padding-top: 8px;
}
.cat-head h2 { margin: 0; }
.cat-head .count { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }

/* ===========================================================
   Product detail
   =========================================================== */
.product-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .product-hero { grid-template-columns: 1fr; } }

/* Tall images used to be cut off here, and the cause is worth recording
   because the CSS looked correct.
 *
 * This was grid with place-items:center, and the image carried
 * max-height:100%. place-items sets align-items:center, which stops the
 * implicit row stretching to the container's definite height, so the row is
 * content-sized. A percentage max-height against an indefinite height
 * resolves to none and is discarded. The image was then sized by width
 * alone: a 620x826 poster became 525x700 inside a 571px box and lost 129px
 * off the bottom to overflow:hidden.
 *
 * Flex fixes it because a flex container with a definite height gives its
 * items a definite cross size, so the percentage resolves. Every element
 * between the box and the image needs the constraint, including the
 * [data-slide] wrapper and the <picture>, or the chain breaks again at
 * whichever one is left out. min-height:0 lets them shrink below content
 * size, which flex items will not do by default.
 *
 * Do not reintroduce object-fit here. It changes how content paints inside
 * a box, not how the box is sized, so it never addressed this. */
.gallery-main {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 22px; aspect-ratio: 1 / 1; overflow: hidden;
}
/* :not([hidden]) is load-bearing. A bare [data-slide] rule setting display
   outranks the UA stylesheet's [hidden] { display: none }, which switched
   every slide back on: all seven shared the row and each collapsed to
   527/7 = 75px wide. The gallery only ever shows one at a time, and
   app.js toggles the hidden attribute to do it. */
.gallery-main > [data-slide]:not([hidden]) {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 0;
}
/* display:contents removes the <picture> box from layout entirely, so the
   <img> becomes the flex item of [data-slide] and its percentage
   max-height resolves against that definite height. Giving <picture> its
   own percentage max-width instead collapsed the image to 75x31: the
   img's max-width:100% resolved against a picture whose own width was
   still indefinite while it was being sized. */
.gallery-main picture { display: contents; }
.gallery-main img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
/* Same defect as .gallery-main, same fix. A 400x533 thumbnail was
   rendering 77px tall inside a 60px content box and spilling over the
   button's border. */
.gallery-thumb {
  width: 72px; height: 72px; padding: 6px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.gallery-thumb[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.gallery-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

.product-title { font-size: clamp(26px, 4vw, 40px); line-height: 1.08; letter-spacing: -.02em; margin: 6px 0 10px; font-weight: 800; }
.product-subtitle { font-size: 17px; color: var(--muted); margin: 0 0 18px; }

.spec-table { width: 100%; border-collapse: collapse; margin: 22px 0 0; font-size: 14.5px; }
.spec-table th, .spec-table td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.spec-table th { font-weight: 700; color: var(--ink); width: 34%; }
.spec-table td { color: var(--muted); }

.variant-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.variant-list li {
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 13px;
  font-size: 13.5px; font-weight: 600;
}
.variant-list .sku { display: block; font-size: 11px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Body copy from catalog.json. Trusted HTML per the schema, but it comes
   from a Shopify export, so it is contained rather than trusted to be tidy. */
.product-copy { margin-top: 22px; font-size: 15.5px; }
.product-copy > *:first-child { margin-top: 0; }
.product-copy p { margin: 0 0 14px; }
.product-copy ul, .product-copy ol { margin: 0 0 14px; padding-left: 20px; }
.product-copy li { margin-bottom: 6px; }
.product-copy img { border-radius: 10px; margin: 14px 0; }
.product-copy h2, .product-copy h3, .product-copy h4 { font-size: 17px; font-weight: 800; margin: 22px 0 8px; }
.product-copy a { text-decoration: underline; text-underline-offset: 2px; }

.breadcrumb { font-size: 13px; color: var(--muted); margin: 0 0 6px; display: flex; gap: 7px; flex-wrap: wrap; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { opacity: .5; }

/* Where the purchase path goes, since nothing is sold here. */
.buy-box {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-alt); padding: 20px; margin-top: 26px;
}
.buy-box p { margin: 0 0 14px; font-size: 14.5px; color: var(--muted); }
.buy-box .btn { width: 100%; }

/* ===== Age gate ===== */
.agegate-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(10, 10, 12, .95);
  padding: 24px;
}
.agegate-overlay.is-active { display: flex; }
.agegate-dialog {
  width: min(520px, 100%);
  background: #fff; border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  padding: clamp(26px, 4vw, 38px);
  text-align: center;
}
.agegate-logo { height: 26px; width: auto; margin: 0 auto 26px; }
.agegate-title { margin: 0 0 10px; font-size: clamp(20px, 3vw, 25px); font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.agegate-text { margin: 0 0 24px; color: var(--muted); font-size: 15px; }
.agegate-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .agegate-actions { grid-template-columns: 1fr; } }
.agegate-btn {
  appearance: none; border: 1px solid transparent; cursor: pointer;
  padding: 13px 16px; border-radius: 999px; font-weight: 700; font-size: 15px;
  transition: background .18s ease;
}
.agegate-btn--primary { background: var(--brand); color: #fff; }
.agegate-btn--primary:hover { background: var(--brand-dark); }
.agegate-btn--ghost { background: #f1f2f5; color: var(--ink); }
.agegate-btn--ghost:hover { background: #e4e6ea; }
.agegate-note { margin: 20px 0 0; font-size: 12px; color: #8a909d; line-height: 1.6; }
.agegate-warning {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 11.5px; font-weight: 700; color: var(--ink); letter-spacing: .01em;
}
body.agegate-open { overflow: hidden; }

/* ===== Footer ===== */
footer { background: var(--ink); color: #b9bec9; font-size: 14px; }
.footer-grid { padding: clamp(36px, 5vw, 56px) 0 30px; }
.foot-brand img { height: 24px; width: auto; margin-bottom: 16px; filter: invert(1); }
.foot-brand p { margin: 0; max-width: 36ch; color: #8f96a3; font-size: 14px; }
.foot-title { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 0 0 14px; font-weight: 800; }
.foot-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot-links a { color: #b9bec9; transition: color .18s ease; }
.foot-links a:hover { color: #fff; }
.foot-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 20px 0 30px;
  border-top: 1px solid #2c2c34; color: #8f96a3; font-size: 13px;
}
.foot-legal { display: flex; gap: 10px; align-items: center; }
.foot-legal .sep { opacity: .45; }

/* ===== Back to top ===== */
.back-to-top {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0));
  z-index: 2500; display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; color: var(--ink); box-shadow: var(--shadow); cursor: pointer;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ===== Legal and content pages ===== */
.prose { max-width: 80ch; }
.prose h2 { font-size: 20px; font-weight: 800; margin: 30px 0 8px; color: var(--ink); }
.prose h3 { font-size: 17px; font-weight: 800; margin: 26px 0 8px; color: var(--ink); }
.prose p, .prose li { color: var(--muted); font-size: 15px; }
.prose strong { color: var(--ink); }
.prose ul { padding-left: 20px; margin: 0 0 10px; }
.prose li { margin-bottom: 6px; }

/* ===== A11y ===== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ===========================================================
   Where to buy
   =========================================================== */
.subregion-head {
  margin: 28px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.subregion-head:first-of-type { margin-top: 0; }

.vendor-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: clamp(12px, 1.8vw, 20px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1100px) { .vendor-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .vendor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .vendor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.vendor {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  height: 100%; padding: 18px 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; text-align: center;
  transition: box-shadow .2s ease, transform .2s ease;
}
.vendor:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

/* The logos are whatever each retailer supplied: mixed formats, mixed
   aspect ratios, some transparent and some baked onto white. A fixed-height
   box with contain is the only thing that makes 24 of them sit on one grid
   without looking accidental. */
.vendor-logo {
  display: grid; place-items: center;
  width: 100%; height: 56px;
}
.vendor-logo img {
  max-height: 56px; max-width: 100%; width: auto; height: auto;
  object-fit: contain;
}
.vendor-name-fallback { font-weight: 700; font-size: 14px; }

.vendor-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.vendor-stores { display: grid; gap: 2px; margin-top: 2px; }
.vendor-stores span { font-size: 11px; color: var(--muted); line-height: 1.4; }

/* ===========================================================
   Forms
   Only the contact page has one. Nothing else on this site takes input,
   and per CLAUDE.md a second form is a scope change rather than a feature.
   =========================================================== */
.form-grid { display: grid; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 700; color: var(--ink); }
.field label span { color: var(--muted); }
.field input, .field select, .field textarea {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  outline: none; background: #fff; color: var(--text);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(17, 17, 20, .10);
}
.field textarea { min-height: 130px; resize: vertical; }
.form-grid button[disabled] { opacity: .5; cursor: not-allowed; }
.form-success {
  display: none; padding: 22px; border-radius: var(--radius);
  background: var(--bg-alt); border: 1px solid var(--border);
}