@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --bg: #0a0a0c;
  --surface: #141317;
  --surface-2: #1c1a20;
  --border: #2c2822;
  --border-light: #55492e;
  --text: #f3ead6;
  --text-muted: #a89d87;

  --text-faint: #7c7364;
  --red: #e04a3f;

  --gold: #f6c22c;
  --gold-hi: #ffe9a8;
  --gold-deep: #a9751a;
  --gold-ink: #0a0a0c;

  /* A flat fill reads as mustard on black. Real gold is a RAMP — bright edge,
     saturated body, a dark band where the surface turns, then a second highlight.
     That band at 52-68% is what makes it look like metal rather than paint. */
  --gold-metal: linear-gradient(177deg, #ffeaa9 0%, #f6cb55 30%, #e0a41f 54%, #c2870f 68%, #ffdf90 100%);
  --gold-glow: 0 0 24px rgba(246,194,44,.46);
  --gold-emboss: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.3);

  --radius: 0px;
  --radius-sm: 0px;
  --radius-lg: 0px;
  --shadow: 0 12px 28px rgba(0,0,0,.6);
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --container: 1280px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-body); margin: 0; font-weight: 800; letter-spacing: -.01em; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 56px 0; }

.section.section--tight { padding: 16px 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted);
}
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 16px; }
/* Page headings are gold-poured rather than gold-coloured. The shop and cart
   headings carry inline font sizing from their templates and sit outside
   .section-head, so they opt in with .gold-head. */
.section-head h2,
.gold-head {
  background: var(--gold-metal); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(233,181,46,.32));
}
.section-head h2 { font-size: 20px; letter-spacing: 1px; text-transform: uppercase; }
.section-head .view-all { font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.section-head .view-all:hover { color: var(--text); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 26px; border-radius: 0; border: 1px solid var(--gold);
  font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease; white-space: nowrap;
}

.btn-primary {
  background: var(--gold-metal); color: var(--gold-ink); border-color: var(--gold-hi);
  box-shadow: var(--gold-emboss), 0 3px 16px rgba(233,181,46,.32);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover {
  background: transparent; color: var(--gold-hi);
  box-shadow: var(--gold-glow); text-shadow: none;
}
.btn-outline { background: transparent; color: var(--gold-hi); }
.btn-outline:hover {
  background: var(--gold-metal); color: var(--gold-ink);
  box-shadow: var(--gold-emboss), 0 3px 16px rgba(233,181,46,.32);
}
.btn-sm { min-height: 38px; padding: 8px 16px; font-size: 11px; }
.btn-block { width: 100%; }

.ticker { border-bottom: 1px solid var(--border); background: var(--bg); overflow: hidden; }
.ticker .container { display: flex; align-items: center; justify-content: center; height: 38px; }
.ticker-text {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.utility-bar { border-bottom: 1px solid var(--border); }
.utility-bar .container { display: flex; align-items: center; justify-content: flex-end; gap: 20px; height: 38px; }
.utility-link { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.utility-link:hover { color: var(--text); }
.utility-link svg { width: 14px; height: 14px; }

.support-bar {
  background: var(--gold-metal); color: var(--gold-ink);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.32), 0 2px 20px rgba(233,181,46,.22);
  font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
}
.support-bar .container {
  display: flex; align-items: center; justify-content: center;
  padding: 0; flex-wrap: wrap;
}

.support-bar-link {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  width: 100%; gap: 2px 8px; min-height: 26px; padding: 3px 14px;
  color: var(--gold-ink); text-align: center;
}
.support-bar-label { font-weight: 600; }
.support-bar-hours { opacity: .8; font-weight: 600; }
.support-bar-num { font-weight: 800; letter-spacing: 1px; white-space: nowrap; }
.support-bar-link:hover .support-bar-num { text-decoration: underline; text-underline-offset: 3px; }
/* A phone gets the same bar, only narrower: it is a standing offer, not a headline,
   so it should cost one line of screen and no more. Shrinking the type rather than
   the touch area keeps the whole strip a working tap target. */
@media (max-width: 680px) {
  .support-bar { font-size: 10px; letter-spacing: .3px; }
  .support-bar-link { gap: 1px 6px; min-height: 24px; padding: 2px 12px; }
}
@media (max-width: 380px) {
  .support-bar { font-size: 9.5px; }
  .support-bar-link { gap: 1px 5px; padding: 2px 10px; }
}

.header {
  position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border);
}
.header-logo-row { display: flex; align-items: center; justify-content: center; position: relative; padding: 8px 24px; }
.logo { font-size: clamp(24px, 4.5vw, 38px); font-weight: 900; letter-spacing: 2px; color: var(--gold-hi); text-transform: uppercase; text-shadow: var(--gold-glow); }

.header-left { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 2px; }
.burger { display: none; background: none; border: none; color: var(--text); width: 40px; height: 40px; align-items: center; justify-content: center; }
.header-icons { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 14px; }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--text); }
.icon-btn svg { width: 19px; height: 19px; }

.icon-btn--chat svg { width: 17px; height: 17px; }
.icon-btn--chat { color: var(--text-muted); }
.icon-btn--chat:hover { color: var(--text); }
.badge { position: absolute; top: 0; right: 0; background: var(--gold-metal); box-shadow: 0 0 10px rgba(233,181,46,.55); color: var(--gold-ink); font-size: 10px; font-weight: 800; width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.mobile-only { display: none; }

.main-nav-row { border-top: 1px solid var(--border); }
.main-nav { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; }
.main-nav > li > a {
  display: block; padding: 16px 18px; font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted); transition: color .15s;
}
.main-nav > li > a:hover { color: var(--gold-hi); }

.main-nav > li.has-sub { position: relative; }
.main-nav > li.has-sub > a::after {
  content: '▾'; font-size: 9px; margin-left: 6px; vertical-align: middle; opacity: .7;
}
.nav-sub {
  position: absolute; top: 100%; left: 0; min-width: 230px; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-top: none;
  display: none; box-shadow: var(--shadow);
}
.main-nav > li.has-sub:hover > .nav-sub,
.main-nav > li.has-sub:focus-within > .nav-sub,
.main-nav > li.has-sub.open > .nav-sub { display: block; }
.nav-sub a {
  display: block; padding: 12px 16px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
}
.nav-sub li:last-child a { border-bottom: none; }
.nav-sub a:hover { color: var(--text); background: var(--surface-2); }

.drawer-sub { margin: 2px 0 6px 14px; border-left: 2px solid var(--border); }
.drawer-sub a { font-size: 12px; opacity: .9; }

.header-logo-row .logo { display: inline-flex; align-items: center; }
.header-logo-img { height: clamp(40px, 5vw, 58px); width: auto; display: block; }

.drawer { position: fixed; inset: 0; z-index: 100; display: none; }
.drawer.open { display: block; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); }
.drawer-panel { position: absolute; top: 0; left: 0; bottom: 0; width: 82%; max-width: 320px; background: var(--surface); border-right: 1px solid var(--border); padding: 24px; overflow-y: auto; }
.drawer-panel .logo { margin-bottom: 24px; font-size: 22px; display: block; }

.drawer-logo-img { width: 100%; max-width: 190px; height: auto; display: block; margin-bottom: 22px; }
.drawer-panel li a { display: block; padding: 14px 0; font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .5px; border-bottom: 1px solid var(--border); }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }

.card { background: var(--surface-2); display: flex; flex-direction: column; }
.card-media { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.card-media--clickable { cursor: zoom-in; }

.card-media--album { display: grid; grid-template-columns: 2fr 1fr; gap: 2px; }
.card-media--album .album-side { display: grid; grid-auto-rows: 1fr; gap: 2px; }

.album-cell { position: relative; overflow: hidden; }

.album-cell--soon { background: var(--surface-2); cursor: default; }
.album-cell--soon img { object-fit: contain; }

.card-media--soon { background: var(--surface-2); }
.card-media--soon img { object-fit: contain; }
.gallery-main--soon .gallery-frame { background: var(--surface-2); }
.gallery-main--soon .gallery-frame img { object-fit: contain; cursor: default; }

.card-tags { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column;
             gap: 6px; align-items: flex-start; max-width: calc(100% - 20px); }
.tag { font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 4px 8px; }
.tag-out { background: #000; color: #fff; border: 1px solid rgba(255,255,255,.55); }

.tag-low {
  background: #000; color: var(--red); border: 1px solid var(--red);
  animation: tag-low-pulse 1.8s ease-in-out infinite;
}
@keyframes tag-low-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216,31,42,.5); }
  50% { box-shadow: 0 0 0 4px rgba(216,31,42,0); }
}
@media (prefers-reduced-motion: reduce) {
  .tag-low { animation: none; }
}

.tag-note {
  background: #000; color: #fff; border: 1px solid #fff;

  white-space: normal; line-height: 1.25;
}
@media (max-width: 520px) {

  .tag-note { font-size: 9px; padding: 3px 6px; }
}
.card-quick { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; opacity: 0; transition: opacity .15s; }
.card:hover .card-quick { opacity: 1; }
.qbtn { width: 30px; height: 30px; background: rgba(10,10,12,.86); border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; color: var(--gold-hi); }

.qbtn:hover { background: var(--gold); color: var(--gold-ink); border-color: var(--gold-hi); }
.qbtn svg { width: 13px; height: 13px; }
.card-body { padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card-cat { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); }
.card-title { font-size: 12.5px; font-weight: 700; letter-spacing: .2px; text-transform: uppercase; color: var(--text); }
.card-title a:hover { color: var(--text-muted); }
/* The price is bare text when nothing is discounted and only wraps itself in
   .now when there is a .was to sit beside — so the gold goes on the container,
   or every full-price item on the site stays off-brand cream. */
.card-price { font-size: 13px; font-weight: 700; margin-top: 2px; color: var(--gold-hi); text-shadow: 0 0 14px rgba(233,181,46,.28); }
.card-price .was { color: var(--text-faint); text-decoration: line-through; font-weight: 500; font-size: 12px; margin-right: 6px; text-shadow: none; }
.card-price .now { color: var(--gold-hi); }
.card-add { margin-top: auto; padding-top: 12px; }

.p1 { background: #1d1b1e; }
.p2 { background: #201d19; }
.p3 { background: #1a1c1e; }
.p4 { background: #211d21; }
.p5 { background: #1b1e1a; }
.p6 { background: #221d1b; }

.category-grid {
  display: grid; grid-template-columns: 1fr 1fr;

  row-gap: clamp(6px, 1.1vh, 14px);
  column-gap: clamp(3px, 0.6vh, 8px);

  /* Eight tiles in a 1-2-2-2-1 rhythm: a hero, three pairs, and a wide closer.
     The old grid sized itself so three banners stopped exactly at the fold; eight
     cannot, at any size worth tapping, so the fold constraint is gone and the grid
     simply takes the width it is given. Trying to keep it would drive the tiles to
     ~120px tall on a laptop. */
  --tile-cap: 360px;
  /* ONE knob, and it has to stay one. A rail spans both columns, so --pack-w measures
     against the full grid; each of the six measures against its own column, which is
     half the grid less the gap. Feed both the same number and the block of six lands on
     the rails' edges to within a pixel -- the leftover is gap x (1 - pack-w), well under
     1px at these gaps. Two separate knobs is what let the edges drift apart before. */
  --pack-w: 96%;
  max-width: min(var(--tile-cap), 94vw);
  margin-left: auto; margin-right: auto;

  align-items: center;
}

/* The hero and the closer span the pair columns. They are the two rows of one. */
.category-card:nth-child(1),
.category-card:nth-child(8) { grid-column: 1 / -1; }

/* The six sit smaller than their column AND pushed to the centre line — the left
   column ends where the gap starts, the right column begins there — so shrinking them
   packs them together instead of setting six small tiles adrift in a wide grid. Centring
   each one in its own column is what spread them apart last time. */
.category-card:nth-child(n+2):nth-child(-n+7) { width: var(--pack-w); }
.category-card:nth-child(2),
.category-card:nth-child(4),
.category-card:nth-child(6) { justify-self: end; }
.category-card:nth-child(3),
.category-card:nth-child(5),
.category-card:nth-child(7) { justify-self: start; }

/* Rails take the same slice, so every row starts and ends on the same two edges. */
.category-card:nth-child(1),
.category-card:nth-child(8) { width: var(--pack-w); justify-self: center; }

.category-card {
  display: block; background: #16151a; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border);
  transition: box-shadow .18s ease, border-color .18s ease;
}

/* Flat tiles: the art already carries the depth, so the card behind it does not.
   Pointing at one lights its edge rather than lifting it off the page. */
.category-card:hover,
.category-card:focus-visible {
  border-color: var(--gold-hi);
  box-shadow: 0 0 0 1px var(--gold-hi), 0 0 20px rgba(233,181,46,.3);
}
/* Every tile in the three pairs is the SAME box — same width, same height — whatever
   proportions its own art happens to have. Five of the six are 1.872:1 already, so that
   is the shape they all take and Concentrates (1.499:1) is the one that gets cropped to
   meet it. The box owns the shape; the picture fills it and is trimmed, rather than the
   picture setting the height and the row going ragged. */
.category-media { display: block; aspect-ratio: 1.872; }

/* Banner strips. Both rails are now drawn 3:1 for exactly this slot -- FLOWER on top,
   PLUG PRICES on the bottom -- so they share one box, render at identical size, and
   neither is cropped at all. The split ratios this replaces existed only because the
   old bottom art was 1.74:1 and could not survive the same box. */
.category-card:nth-child(1) .category-media,
.category-card:nth-child(8) .category-media { aspect-ratio: 3; }

.category-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.category-blob { width: 100%; height: 100%; border-radius: 50%; filter: blur(1px); opacity: .9; }

.cat-firesale { background: radial-gradient(circle at 40% 25%, #ffd54a, #ff7a18 45%, #d81f2a); }
.cat-flower { background: radial-gradient(circle at 35% 30%, #7c9a5e, #3f5a2c); }
.cat-wax { background: radial-gradient(circle at 35% 30%, #f2b23a, #c97f0e); }
.cat-snowballs { background: radial-gradient(circle at 35% 30%, #d8d4c8, #a29c8a); }
.cat-moonrocks { background: radial-gradient(circle at 35% 30%, #cfc7a8, #8f8664); }
.cat-vapes { background: radial-gradient(circle at 35% 30%, #6fb3c4, #2f7183); }
.cat-prerolls { background: radial-gradient(circle at 35% 30%, #d99a6c, #9c5b2e); }
.cat-edibles { background: radial-gradient(circle at 35% 30%, #d67a8a, #a13a52); }
.cat-mushies { background: radial-gradient(circle at 35% 30%, #b79ad6, #6c4a94); }
.cat-merch { background: radial-gradient(circle at 35% 30%, #9a9a9a, #4a4a4a); }

@media (max-width: 680px) {
  .category-grid { row-gap: clamp(6px, 1.2vh, 10px); column-gap: clamp(2px, 0.5vh, 6px); }
  .category-card { border-radius: 12px; }
  .section.section--tight { padding: 10px 0; }

}

/* No hover on a touch screen, so the edge lights on press instead. */
@media (hover: none) and (pointer: coarse) {
  .category-card:active { border-color: var(--gold); }
}

/* Above the drawer breakpoint there is more width going spare, so the grid keeps
   the same 1-2-2-2-1 rhythm on a wider canvas and the pairs get bigger. */
@media (min-width: 681px) {
  .category-grid {
    --tile-cap: 420px;
    --pack-w: 88%;
  }
  /* They ran at 66% when they were tall — full width made each one twice the pair
     beneath it. As a thin strip that no longer applies, so they stretch the whole
     width of the grid and read as the top and bottom rails of it. */
}

/* Landscape phone and short laptops: a column of stacked banners cannot fit a
   420px-tall viewport at any tappable size, so the eight go four across in two rows
   instead of shrinking. Gated on width too — at 375x500 a row of four would be 85px
   wide, and scrolling beats that. */
@media (max-height: 620px) and (min-width: 680px) {
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: min(1100px, 94vw);
  }
  /* Undo the two wide tiles entirely. The width has to be reset alongside the span:
     side by side, 66% would make the hero the SMALLEST tile rather than the largest. */
  .category-grid .category-card:nth-child(1),
  .category-grid .category-card:nth-child(8) { grid-column: auto; width: auto; }
  /* Side by side with six others they are tiles, not rails — a 3:1 strip would be
     ~40px tall here and unreadable. They take the same box as everything else so the
     two rows stay level, but CONTAIN rather than cover: squeezing a 3:1 banner into a
     1.872 box by cropping takes 38% off the sides, which is the F and the R of FLOWER.
     Letterboxing costs a little dead space and costs no letters. */
  .category-grid .category-card:nth-child(1) .category-media,
  .category-grid .category-card:nth-child(8) .category-media { aspect-ratio: 1.872; }
  .category-grid .category-card:nth-child(1) .category-media img,
  .category-grid .category-card:nth-child(8) .category-media img { height: 100%; object-fit: contain; }
  /* Eight abreast in two rows, nothing is inset or pushed. The :nth-child(n) is not
     decoration: the rule it has to override is .category-card:nth-child(n+2):nth-child(-n+7),
     which carries two pseudo-classes. Without a matching third component this loses the
     cascade and the middle six stay at --pack-w of their column, rendering half the size
     of the rails. */
  .category-grid .category-card:nth-child(n) { width: auto; justify-self: stretch; }
}

@media (max-height: 760px) {
  .section.section--tight { padding: 10px 0; }
}

.cta-band { border: 0; }
.cta-band .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 40px 24px; flex-wrap: wrap; }
.cta-band h3 { font-size: 18px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.cta-band p { color: var(--text-muted); font-size: 13.5px; }
.cta-band .actions { display: flex; gap: 10px; flex-wrap: wrap; }

.cta-band.cta-band--links .container { justify-content: center; align-items: center; padding: 10px 24px; }
/* The two links are the band. Slimmer than a page button, still 44px to the thumb. */
.cta-band.cta-band--links .btn { min-height: 44px; padding: 10px 22px; font-size: 12px; }
.cta-band.cta-band--links .actions { justify-content: center; }

body.page-home { min-height: 100vh; display: flex; flex-direction: column; }
@supports (height: 100dvh) {
  body.page-home { min-height: 100dvh; }
}

.page-home .section.section--tight {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center;
  padding: clamp(10px, 2.4vh, 30px) 0;
}
.page-home .section.section--tight > .container { width: 100%; }

.page-home .cta-band.cta-band--links .container {
  padding: clamp(8px, 1.5vh, 18px) 24px;
}

.page-home::after {
  content: ''; display: block; flex: 1 1 0; max-height: clamp(0px, 5vh, 56px);
}

.footer { border-top: 1px solid var(--border); padding-top: 44px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border); }
.footer h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text); margin-bottom: 16px; font-weight: 800; }
.footer-grid p { color: var(--text-muted); font-size: 13px; line-height: 1.7; max-width: 320px; }
.footer-grid li { margin-bottom: 9px; }
.footer-grid a { color: var(--text-muted); font-size: 13px; }
.footer-grid a:hover { color: var(--text); }
.footer-contact { display: flex; flex-direction: column; gap: 10px; }
.footer-contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .3px; }
.footer-contact a:hover { color: var(--text); }
.footer-contact .dot { width: 5px; height: 5px; background: var(--gold); box-shadow: 0 0 8px rgba(233,181,46,.7); flex-shrink: 0; }
.pay-row { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-faint); margin-top: 14px; }
.footer-legal { padding: 22px 0 26px; color: var(--text-faint); font-size: 11px; line-height: 1.8; }
.footer-legal p { margin: 0 0 10px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; flex-wrap: wrap; gap: 10px; }
.footer-bottom .links { display: flex; gap: 18px; }
.footer-bottom .links a:hover { color: var(--text); }

.breadcrumb { padding: 16px 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-faint); border-bottom: 1px solid var(--border); }
.breadcrumb .container { display: flex; flex-wrap: wrap; row-gap: 4px; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb .sep { margin: 0 8px; }
.breadcrumb .current { color: var(--text-muted); overflow-wrap: anywhere; }

@media (max-width: 520px) {
  .breadcrumb { font-size: 10.5px; letter-spacing: .2px; }
  .breadcrumb .sep { margin: 0 5px; }
}

.shop-layout { display: grid; grid-template-columns: 230px 1fr; gap: 32px; align-items: start; }
.filter-box { border: 1px solid var(--border); padding: 18px; margin-bottom: 14px; }
.filter-box h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; color: var(--text-muted); }
.filter-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-size: 13px; color: var(--text-muted); min-height: 32px; }
.filter-row:hover { color: var(--text); }
.filter-row input { accent-color: var(--gold); width: 15px; height: 15px; }
.filter-row .count { font-size: 11px; color: var(--text-faint); }
.range-slider { width: 100%; accent-color: var(--gold); margin: 10px 0; }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--border); padding-bottom: 18px; }
.shop-toolbar .count-txt { color: var(--text-muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .3px; }

.shop-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.search-box { position: relative; display: flex; align-items: center; }
.search-input {
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 1px solid var(--border-light); color: var(--text);
  padding: 10px 34px 10px 14px; border-radius: 0; font-size: 12px; font-weight: 700;
  min-height: 40px; width: 220px; letter-spacing: .5px; text-transform: uppercase;
}
.search-input::placeholder { color: var(--text-muted); font-weight: 700; letter-spacing: .5px; }
.search-input:focus { outline: none; border-color: var(--gold); }

.search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-clear {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 30px; min-height: 34px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.search-clear:hover { color: var(--text); }

.search-clear[hidden] { display: none; }
.select {
  background: transparent; border: 1px solid var(--border-light); color: var(--text);
  padding: 10px 14px; border-radius: 0; font-size: 12px; font-weight: 700; min-height: 40px;
  text-transform: uppercase; letter-spacing: .5px;
}
.pagination { display: flex; gap: 0; justify-content: center; margin-top: 36px; border: 1px solid var(--border); width: fit-content; margin-left: auto; margin-right: auto; }
.pagination a, .pagination span { min-width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--border); font-size: 12px; font-weight: 700; padding: 0 6px; }
.pagination a:last-child, .pagination span:last-child { border-right: none; }
.pagination .active { background: var(--gold-metal); color: var(--gold-ink); box-shadow: var(--gold-emboss); }
.pagination a:hover { color: var(--gold-hi); background: var(--surface-2); }

.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.gallery-main { aspect-ratio: 1/1; margin-bottom: 10px; border: 1px solid var(--border); }

.gallery-main--photo { aspect-ratio: auto; border: none; }
.gallery-frame { position: relative; aspect-ratio: 1/1; border: 1px solid var(--border); overflow: hidden; }
.gallery-frame img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 8px; }
.gallery-thumb { width: 64px; height: 64px; flex-shrink: 0; padding: 0; border: 1px solid var(--border); background: none; opacity: .6; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:hover { opacity: .85; }
.gallery-thumb.active { opacity: 1; border-color: var(--gold); }

.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(10,10,12,.85); border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; color: var(--gold-hi); cursor: pointer;
}
.gallery-nav:hover { background: var(--gold); color: var(--gold-ink); }
.gallery-nav--prev { left: 10px; }
.gallery-nav--next { right: 10px; }

.lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox:not([hidden]) { animation: lightbox-fade .18s ease; }
@keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lightbox:not([hidden]) { animation: none; } }
body.lightbox-open { overflow: hidden; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.9); }
.lightbox-img { position: relative; z-index: 1; max-width: 90vw; max-height: 88vh; object-fit: contain; }
.lightbox-close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 44px; height: 44px; background: transparent; border: none;
  color: #fff; font-size: 30px; line-height: 1; cursor: pointer;
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35);
  color: #fff; font-size: 28px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.lightbox-nav:hover { background: rgba(255,255,255,.24); }
.lightbox-nav--prev { left: 12px; }
.lightbox-nav--next { right: 12px; }
@media (max-width: 520px) {
  .lightbox-nav { width: 44px; height: 44px; font-size: 24px; }
  .lightbox-nav--prev { left: 6px; }
  .lightbox-nav--next { right: 6px; }
}
.product-info .card-cat { font-size: 11px; }
.product-title { font-size: 20px; font-weight: 800; margin: 8px 0 12px; letter-spacing: .3px; text-transform: uppercase; }
.product-price { font-size: 18px; font-weight: 700; color: var(--gold-hi); margin-bottom: 14px; text-shadow: var(--gold-glow); }

.stock-meter { margin-bottom: 20px; max-width: 280px; }
.stock-meter-track { height: 6px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.stock-meter-fill { height: 100%; width: 0%; background: var(--gold-metal); box-shadow: 0 0 10px rgba(233,181,46,.5); transition: width .5s ease; }
.stock-meter-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted); margin-top: 7px; }
.stock-meter--low .stock-meter-fill { background: var(--red); animation: stock-fill-pulse 1.8s ease-in-out infinite; }
.stock-meter--low .stock-meter-label { color: var(--red); }
.stock-meter--out .stock-meter-fill { background: var(--text-faint); }
.stock-meter--out .stock-meter-label { color: var(--text-faint); }
@keyframes stock-fill-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .stock-meter--low .stock-meter-fill { animation: none; }
}

.qty-add { display: flex; gap: 10px; align-items: center; margin-bottom: 22px; }
.qty-box { display: flex; align-items: center; border: 1px solid var(--border-light); }
.qty-box button { width: 40px; height: 46px; background: transparent; border: none; color: var(--text); font-size: 16px; }
.qty-box button:hover { color: var(--text-muted); }
.qty-box input { width: 40px; text-align: center; background: transparent; border: none; color: var(--text); font-size: 14px; }
.product-meta-row { display: flex; gap: 20px; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 16px; flex-wrap: wrap; }

.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
.cart-row { display: grid; grid-template-columns: 80px 1fr auto auto auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--border); }

.cart-block {
  font-size: 12px; font-weight: 700; letter-spacing: .3px; text-align: center; margin-top: 10px;
  color: var(--red); text-transform: uppercase;
}
.cart-note { font-size: 11px; font-weight: 600; letter-spacing: .3px; margin-top: 4px; color: var(--text-muted); }
.cart-note--gone { color: var(--red); }
.cart-row--gone .cart-thumb, .cart-row--gone .card-title { opacity: .55; }
.cart-thumb { width: 72px; height: 72px; position: relative; overflow: hidden; }
.cart-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cart-remove { display: inline-flex; padding: 8px; color: var(--text-faint); }
.cart-remove:hover { color: var(--text); }
.summary-box { border: 1px solid var(--border); padding: 24px; }
.summary-box h3 { font-size: 14px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 18px; font-weight: 800; }
.summary-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 13px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.summary-row.total { color: var(--text); font-weight: 800; font-size: 15px; border-bottom: none; padding-top: 14px; }
/* Why the shipping line says what it says -- "Add 12 more, or any item sold by the pound,
   and shipping is free." A fee with no reason next to it reads as a mistake, and this one
   is worth acting on: it is the difference between $25 and nothing. Empty most of the
   time, and :empty keeps it from reserving space when there is nothing to say. */
.summary-note { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.summary-note:empty { display: none; }
.coupon-row { display: flex; gap: 8px; margin: 16px 0; }
.coupon-row input { flex: 1; background: transparent; border: 1px solid var(--border-light); padding: 11px 14px; color: var(--text); font-size: 12.5px; min-height: 40px; text-transform: uppercase; letter-spacing: .3px; }
.empty-cart { text-align: center; padding: 72px 24px; color: var(--text-muted); }

.order-note-label {
  display: block; margin-top: 16px; margin-bottom: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-muted);
}
.order-note {
  width: 100%; background: transparent; border: 1px solid var(--border-light);
  padding: 10px 12px; color: var(--text); font-family: inherit; font-size: 13px;
  resize: vertical;
}
.order-note:focus { outline: none; border-color: var(--gold); }

.send-panel { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 16px; }
.send-panel[hidden] { display: none; }
.send-panel h4 {
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 8px; color: var(--text);
}
.send-hint { font-size: 12px; line-height: 1.6; color: var(--text-muted); margin: 0 0 12px; }
.send-actions { display: flex; flex-direction: column; gap: 8px; }


@media (max-width: 520px) {
}


.btn-plain {
  display: block; width: 100%; min-height: 44px; margin-top: 10px;
  background: none; border: 0; padding: 12px 8px;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: var(--text-muted); text-decoration: underline;
  cursor: pointer;
}
.btn-plain:hover { color: var(--text); }

.invoice-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.invoice-modal[hidden] { display: none; }
.invoice-modal:not([hidden]) { animation: lightbox-fade .18s ease; }
@media (prefers-reduced-motion: reduce) { .invoice-modal:not([hidden]) { animation: none; } }
body.invoice-open { overflow: hidden; }
.invoice-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.7); }
.invoice-modal-box {
  position: relative; z-index: 1; width: 100%; max-width: 460px;
  max-height: 88vh; display: flex; flex-direction: column;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-light);
  border-radius: 14px; padding: 18px 16px 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.7);
}
@supports (height: 1dvh) { .invoice-modal-box { max-height: 88dvh; } }
.invoice-modal-box h4 { font-size: 14px; letter-spacing: .5px; text-transform: uppercase; margin: 0 0 6px; }

.invoice-modal-text {
  flex: 0 1 auto; min-height: 0; margin-bottom: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
  overflow-x: hidden; overflow-y: auto; resize: none;
}

@media (max-width: 420px) {
  .invoice-modal-box { padding: 16px 12px 12px; }
  .invoice-modal-text { font-size: 11px; }
}
.invoice-modal-close {
  position: absolute; top: 6px; right: 8px; width: 40px; height: 40px;
  background: none; border: 0; font-size: 26px; line-height: 1;
  color: var(--text-muted); cursor: pointer;
}
.invoice-modal-close:hover { color: var(--text); }

.send-actions .btn { width: 100%; }

#checkout-btn[disabled] { opacity: .45; cursor: not-allowed; }

.filter-toggle-btn { display: none; }
@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .product-layout { grid-template-columns: 1fr; }
  .cart-layout { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .main-nav-row { display: none; }
  .burger { display: flex; }
  .mobile-only { display: inline-flex !important; }

  .header-logo-row { padding: 4px 14px; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
  .header-left,
  .header-icons { position: static; transform: none; }
  .header-icons { gap: 6px; }
  /* The 44px tap targets either side already set the row's height, so the mark can
     come down to meet them and the padding does the rest. */
  .header-logo-img { height: clamp(30px, 7.5vw, 38px); }
  .icon-btn--chat { width: 30px; }
  .utility-bar .container { justify-content: center; gap: 16px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .shop-layout { grid-template-columns: 1fr; }
  .cta-band .container { flex-direction: column; align-items: flex-start; }
  .filter-toggle-btn { display: inline-flex; }

  .shop-tools { width: 100%; justify-content: flex-start; }
  .search-box { flex: 1 1 100%; order: -1; }
  .search-input { width: 100%; }

  .search-input,
  .select { font-size: 16px; }
  .filters-col { display: none; }
  .filters-col.open { display: block; }
  .section { padding: 40px 0; }
  .product-title { font-size: 17px; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .container { padding: 0 16px; }
  .cart-row { grid-template-columns: 60px 1fr; row-gap: 10px; }
  .cart-row > *:nth-child(3) { grid-column: 2; }
  .cart-row > *:nth-child(4) { grid-column: 2; }
  .cart-row > *:nth-child(5) { grid-column: 2; justify-self: start; }
  .qty-add { flex-wrap: wrap; }
  .qty-add .btn { width: 100%; order: 3; }
}

@media (max-width: 680px) {
  .cta-band.cta-band--links .container { padding: 6px 16px; align-items: center; gap: 8px; }
  .cta-band.cta-band--links .btn { padding: 10px 18px; font-size: 11.5px; }
}
@media (max-height: 760px) {
  .cta-band.cta-band--links .container { padding: 8px 24px; }
}

@media (hover: none) and (pointer: coarse) {
  .burger { width: 44px; height: 44px; }

  .icon-btn:not(.icon-btn--chat) { width: 44px; height: 44px; }
  .icon-btn--chat { height: 44px; }
  .cart-remove { padding: 14px; }
  .btn-sm { min-height: 44px; }

  .pagination a, .pagination span { min-width: 44px; min-height: 44px; }
  .filter-row { min-height: 44px; }
  .filter-row input { width: 20px; height: 20px; }

  .order-note,
  .coupon-row input,
  .qty-box input,
  .search-input,
  .select { font-size: 16px; }
}

.gate-wrap { min-height: 82vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.lock-card {
  max-width: 460px; width: 100%; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
/* Broken-light flicker on the sign itself: mostly lit, with a handful of uneven
   dropouts per loop rather than one smooth pulse. Lit pulls in slightly larger, dark
   settles slightly smaller, so brightness and size move together — the sign breathes
   toward you when it catches and eases back when it gutters, rather than just dimming
   in place. Each flicker is spread across ~1.5% of the loop now (was ~0.3%), so the
   transition itself is slow enough to see rather than an instant snap. */
.gate-logo {
  width: clamp(240px, 60vw, 440px); height: auto; display: block;
  animation: gate-logo-flicker 9s linear infinite;
}
@keyframes gate-logo-flicker {
  0%,     100%  { opacity: 1;   transform: scale(1.03); }
  18%           { opacity: 1;   transform: scale(1.03); }
  19%           { opacity: .1;  transform: scale(.97);  }
  20.5%         { opacity: 1;   transform: scale(1.03); }
  47%           { opacity: 1;   transform: scale(1.03); }
  48%           { opacity: .3;  transform: scale(.985); }
  49.5%         { opacity: .7;  transform: scale(1.01);  }
  51%           { opacity: .08; transform: scale(.965); }
  52.5%         { opacity: 1;   transform: scale(1.03); }
  78%           { opacity: 1;   transform: scale(1.03); }
  79%           { opacity: .15; transform: scale(.972); }
  80.5%         { opacity: 1;   transform: scale(1.03); }
}

.lock-form { display: flex; flex-direction: column; align-items: center; gap: 26px; width: 100%; }
.gate-group { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.lock-label {
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-muted); margin: 0;
}
.lock-input {
  width: 100%; max-width: 260px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  padding: 13px 16px; font-size: 15px; letter-spacing: 3px; font-family: inherit;
}
.lock-input::placeholder { color: var(--text-faint); letter-spacing: 1px; }
.lock-input:focus { outline: none; border-color: var(--gold); }
.lock-input.is-shaking { animation: lock-shake .32s ease; }
.lock-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; min-width: 200px; padding: 12px 26px;
  border: 1px solid var(--gold); background: transparent; color: var(--gold-hi);
  font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.lock-btn:hover { background: var(--gold-metal); color: var(--gold-ink); box-shadow: var(--gold-emboss), 0 4px 20px rgba(233,181,46,.35); }
.lock-btn[disabled] { opacity: .6; cursor: default; }

.lock-btn.is-nudged { animation: lock-nudge .5s ease; }
@keyframes lock-nudge {
  0%, 100% { background: transparent; color: var(--gold-hi); transform: none; }
  25%      { background: var(--gold); color: var(--gold-ink); transform: scale(1.04); }
  60%      { background: var(--gold); color: var(--gold-ink); transform: none; }
}
.lock-error {
  margin: 0; font-size: 12px; letter-spacing: .3px; text-transform: uppercase;
  color: var(--red); font-weight: 600;
}
.lock-error[hidden] { display: none; }
.lock-note {
  font-size: 11px; color: var(--text-faint); letter-spacing: .3px; max-width: 340px;
  line-height: 1.6; margin: 0;
}

@media (max-height: 760px) {
  .gate-wrap { min-height: 100vh; padding: 16px; }
  .lock-card { gap: 18px; }
  .lock-form { gap: 16px; }
  .gate-group { gap: 8px; }
  .gate-logo { width: clamp(180px, 34vw, 300px); }
}
@media (max-height: 560px) {
  .lock-card { gap: 12px; }
  .lock-form { gap: 12px; }
  .gate-logo { width: clamp(140px, 26vw, 210px); }
  .lock-note { font-size: 10px; line-height: 1.45; max-width: 420px; }
}
@keyframes lock-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

/* The gate IS a wall — a plain dark screen hiding the shop until the password is
   right. This overlay is that same wall rendered on the page behind it: two halves
   sharing one jagged seam, covering it exactly (same --bg), so showing it changes
   nothing the visitor can see. Verifying age is what cracks it open. Hidden by
   default and only shown by the inline script in home.part.php when the gate just
   redirected here — a plain later visit to the homepage never sees it. */
/* The gate is a wall; verifying age SHATTERS it onto the shop.
   Cracks race out from the impact point first, then the wall itself breaks into
   chunks that fly away — inner ones first, so the hole opens at the middle and grows,
   the way a real wall gives. Every shard is a full-viewport box clipped to one
   polygon; PHP emits the geometry, so the whole thing is declarative CSS that starts
   on its own the instant it renders, with no JS in the path to mistime or skip. */
/* The shop, pulled in behind the wall before it breaks. A snapshot with its scripts
   inert -- it is on screen for well under a second, mostly behind flying chunks, and
   the real page replaces it the moment the break finishes. Mirrors body.page-home's
   own column layout so the shop lands where it will land for real. */
.lk-reveal {
  position: fixed; inset: 0; z-index: 1; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--bg);
}
.lk-wall {
  position: fixed; inset: 0; z-index: 500; pointer-events: none;
  background: var(--bg);
  /* Shards are separate clipped boxes, so the anti-aliaser rounds their shared edges
     into hairlines. This backs them until the first chunk lets go — any longer and it
     would cover the very hole it exists to protect. */
  animation: lk-wall-hit .5s ease-in-out, lk-wall-backer-off .01s linear .5s forwards;
}
.lk-shard {
  position: absolute; inset: 0; display: block;
  background: var(--bg);
  animation: lk-shard-fly .85s cubic-bezier(.32,.06,.5,1) forwards;
}
/* The gate card itself is blown toward the viewer as the first chunks let go, rather
   than politely faded, so it reads as part of the break. Applied inline by the gate's
   own script to the live card -- there is no stand-in copy of the gate any more. */
@keyframes lk-face-out {
  to { opacity: 0; transform: scale(1.16); }
}
/* Light from the shop finding its way through before anything gives way.
   The fractures are all drawn at once and revealed by a radial mask that grows from
   the impact point, so they appear to race outward. Doing it with stroke-dashoffset
   instead looked right in theory and rendered as scattered dashes: pathLength
   normalisation and vector-effect: non-scaling-stroke disagree about which coordinate
   space the dash pattern lives in. A mask has no such argument with itself. */
.lk-cracks {
  /* Fixed and above the gate card (501), not just above the shards: the fractures run
     across the whole screen including the logo, the way a windscreen cracks over
     whatever is behind it. */
  position: fixed; inset: 0; z-index: 502; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle, #000 58%, rgba(0,0,0,0) 78%);
          mask-image: radial-gradient(circle, #000 58%, rgba(0,0,0,0) 78%);
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: 50% 44%;  mask-position: 50% 44%;
  -webkit-mask-size: 0% 0%;        mask-size: 0% 0%;
  animation: lk-crack-spread .52s ease-out forwards, lk-cracks-out .3s linear .58s forwards;
}
.lk-cracks path {
  fill: none; stroke: #ffd98a; stroke-width: 2;
  vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(255,197,84,.85));
}
.lk-cracks path.thin { stroke-width: 1.2; opacity: .8; }
/* The wall takes the strain before it gives — two shoves, second one harder. */
@keyframes lk-wall-hit {
  0%, 100%  { transform: translate(0, 0); }
  10%       { transform: translate(-5px, 1px); }
  20%       { transform: translate(4px, -1px); }
  30%       { transform: translate(-3px, 0); }
  40%       { transform: translate(2px, 1px); }
  50%       { transform: translate(0, 0); }
  64%       { transform: translate(-9px, 3px); }
  76%       { transform: translate(8px, -2px); }
  86%       { transform: translate(-5px, 1px); }
  94%       { transform: translate(3px, 0); }
}
@keyframes lk-wall-backer-off { to { background-color: rgba(0,0,0,0); } }
@keyframes lk-crack-spread {
  from { -webkit-mask-size: 0% 0%;     mask-size: 0% 0%; }
  to   { -webkit-mask-size: 290% 290%; mask-size: 290% 290%; }
}
@keyframes lk-cracks-out  { to { opacity: 0; } }
@keyframes lk-shard-fly {
  from { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  to   { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.45); opacity: 0; }
}

.promo-pop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.promo-pop[hidden] { display: none; }
.promo-pop-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.82); }
.promo-pop-box {
  position: relative; width: 100%; max-width: 620px; text-align: center;
  background: linear-gradient(158deg, #ffeaa9 0%, #f6cb55 26%, #e0a41f 55%, #c2870f 72%, #ffdf90 100%);
  color: var(--gold-ink); border: 4px solid var(--gold-hi);
  padding: 46px 34px 40px; box-shadow: 0 24px 60px rgba(0,0,0,.7);
  animation: promo-pop-in .32s cubic-bezier(.2,.9,.3,1.2);
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.promo-pop-kicker { font-size: clamp(28px, 7vw, 54px); font-weight: 900; line-height: .98; letter-spacing: -1px; text-transform: uppercase; margin: 0 0 14px; }
.promo-pop-line { font-size: clamp(15px, 2.6vw, 21px); font-weight: 800; letter-spacing: .5px; text-transform: uppercase; line-height: 1.35; margin: 0 0 8px; }
.promo-pop-deals { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 4px; }
.promo-pop-deal { display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; }
.promo-pop-off { font-size: clamp(30px, 7.4vw, 56px); font-weight: 900; line-height: 1.05; letter-spacing: -2px; }
.promo-pop-per { font-size: clamp(12px, 2.3vw, 17px); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; opacity: .95; }
.promo-pop-terms { font-size: clamp(11px, 2vw, 13.5px); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; line-height: 1.35; opacity: .9; margin: 10px 0 0; }
.promo-pop-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 22px; min-height: 54px; padding: 14px 34px;
  background: var(--gold-ink); color: var(--gold-hi); border: none;
  font-size: 17px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase;
}
.promo-pop-cta:hover { background: #fff; color: var(--gold-ink); }
.promo-pop-num { display: block; margin-top: 14px; font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--gold-ink); opacity: .92; }
.promo-pop-close {
  position: absolute; top: 6px; right: 10px; width: 44px; height: 44px;
  background: none; border: none; color: var(--gold-ink); font-size: 30px; line-height: 1; cursor: pointer;
}
.promo-pop-close:hover { opacity: .7; }
.promo-pop-dismiss {
  display: block; margin: 16px auto 0; background: none; border: none; color: var(--gold-ink);
  font-size: 11px; letter-spacing: .8px; text-transform: uppercase; opacity: .8;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
@keyframes promo-pop-in {
  from { transform: scale(.88) translateY(14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .category-card { transition: border-color .15s ease; }

  .gate-logo { animation: none; }
  .lock-input.is-shaking { animation: none; }

  .lock-btn.is-nudged { animation: none; background: var(--gold); color: var(--gold-ink); }
  .promo-pop-box { animation: none; }
  /* Removed outright rather than un-animated: with the animations off, a wall that
     never opens is a wall that covers the shop forever. */
  .lk-wall { display: none; }
}

/* ========================= LIQUID GOLD =========================
   Third pass. The first two built the metal out of a many-banded
   gradient, and the bands were the problem: a gradient can only make
   STRAIGHT lines, so the surface read as a striped ramp sliding
   sideways. Straight stripes are what cheap gold looks like.

   Real pattern-welded steel -- damascus -- has folded, flowing grain, and
   no gradient of any number of stops can produce it. So the grain is now
   a texture: assets/gold-damascus.webp, 256px, 10.8KB, generated by
   domain-warping a periodic field and then contouring it. Every term in
   that field is a sinusoid at an integer frequency over the tile, so it
   wraps exactly and the flow never shows a seam.

   Three layers, and only two of them move:

     BODY   the gold itself, a GENTLE gradient held STILL. Nothing about
            the body slides any more. That single change is most of what
            makes this read as a solid gold object catching light rather
            than as a video playing inside a button.
     GRAIN  the damascus tile, blended soft-light so it MODULATES the
            body instead of painting over it -- mid grey in the texture is
            a no-op, which is why it is histogram-centred when generated.
            It drifts one whole tile per cycle, diagonally, so the grain
            flows along its own lines. Movement ALONG the grain is far
            quieter than bands crossing it.
            The tile is mostly narrow specular glints with only a whisper
            of broad figure, and that ratio is the whole trick: wood grain
            and damascus grain have nearly the same geometry, and what
            separates them to the eye is that metal throws thin bright
            lines while timber has broad soft bands. Rendered bold, the
            figure read as maple veneer on every button. See
            tools/make-gold-damascus.py --river / --ridge.
     GLOSS  one soft specular band, sized in percent so a large surface
            gets a large highlight, crossing once per cycle.

   The separate speck layers are gone. The grain carries fine detail of
   its own, and confetti on top of flowing steel is the opposite of
   subtle. Restoring them is one line if they are missed.
   ============================================================== */
:root {
  /* THE SPEED KNOB -- everything gold is tied to it. */
  --gold-cycle: 22s;
  --gold-halo-cycle: 11s;
  /* Tile scale. The animation below moves the grain by exactly this much,
     so the two have to change together or the loop gains a seam. */
  --gold-grain: 110px;

  /* The BODY is now light-from-above rather than a bright band sliding
     across, and its range is deliberately narrow. Three versions of this
     were rendered against the real 26px support bar and compared:
       a wide horizontal ramp put an arbitrary bright blob mid-bar;
       flat gold with no ramp at all read as matte paint, not metal;
       gentle top-lighting read as a gold strip catching light.
     2deg off vertical, because a perfectly axis-aligned ramp looks
     printed. The grain carries the character; this gives the form.

     BRIGHTNESS, second pass. The first palette was sandy -- around 66-79%
     saturation with a pale top -- and next to the tile trim it read as
     brass rather than gold. Four palettes were rendered on the real bar
     and a real button and compared: pale/sandy, brighter-saturated,
     very-bright, and rich-amber. Rich amber won, and the reason is the
     DARK end, not the light one: a deep #b8790c shadow against a
     near-white specular is what makes metal look lit. The very-bright
     option had a lighter shadow and went flat -- more yellow, less gold.
     The 0-8% near-white stop is the specular edge; on a 26px bar that is
     a 2px highlight along the top, which is exactly where a real strip
     catches the light. */
  --gold-body: linear-gradient(178deg,
    #fffbe8 0%, #ffe89a 8%, #ffd24a 34%, #eeb01f 66%, #b8790c 100%);
  --gold-grain-img: url('assets/gold-damascus.webp?v=590e2ab6a8');
  --gold-gloss: linear-gradient(102deg,
    rgba(255,255,255,0) 40%, rgba(255,255,255,.14) 46%,
    rgba(255,255,255,.52) 50%, rgba(255,255,255,.14) 54%,
    rgba(255,255,255,0) 60%);

  --gold-layers: var(--gold-gloss), var(--gold-grain-img), var(--gold-body);
  --gold-layer-size: 240% 100%, var(--gold-grain) var(--gold-grain), 100% 100%;
  --gold-layer-repeat: no-repeat, repeat, no-repeat;
  --gold-layer-blend: screen, soft-light, normal;
}

/* The grain steps exactly one tile in each axis, so the loop is seamless;
   the gloss sweeps the element; the body never moves. */
@keyframes gold-live {
  from { background-position: -70% 0, 0 0, 0 0; }
  to   { background-position: 180% 0, calc(var(--gold-grain) * -1) var(--gold-grain), 0 0; }
}

/* Gold FILLS -- all of these previously said `background: var(--gold-metal)`. */
.btn-primary,
.btn-outline:hover,
.qbtn:hover,
.gallery-nav:hover,
.lock-btn:hover,
.lock-btn.is-nudged,
.support-bar,
.badge,
.pagination .active,
.stock-meter-fill {
  background-image: var(--gold-layers);
  background-size: var(--gold-layer-size);
  background-repeat: var(--gold-layer-repeat);
  background-blend-mode: var(--gold-layer-blend);
  animation: gold-live var(--gold-cycle) linear infinite;
}

/* Gold TEXT. Same material clipped to the glyphs. A text-shadow cannot be
   used on transparent text -- it draws the shadow of a shape nobody can
   see -- so the outer glow is a drop-shadow filter, which follows the
   visible pixels. */
.section-head h2,
.gold-head,
.product-price,
.card-price,
.card-price .now {
  background-image: var(--gold-layers);
  background-size: var(--gold-layer-size);
  background-repeat: var(--gold-layer-repeat);
  background-blend-mode: var(--gold-layer-blend);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 12px rgba(233,181,46,.34));
}
/* Headings and the single product price animate. Card prices do not: that
   one repeats dozens of times per screen, and sixty small elements
   repainting every frame costs real battery for something illegible at
   13px. They keep the material, still. */
.section-head h2,
.gold-head,
.product-price {
  animation: gold-live var(--gold-cycle) linear infinite;
}

/* Gold BORDERS: a 1px ring of the same material, as a masked pseudo-
   element, because a border cannot hold a gradient. The grain is left out
   -- at one pixel there is nothing of it to see.

   Geometry: the border stays 1px and only turns transparent, so nothing
   reflows. The ring sits at inset:-1px, the BORDER box; an absolutely
   positioned child is offset from the PADDING box, so inset:0 would draw
   it a pixel inside the border and leave a transparent hairline outside.

   GUARDED, and the guard is not decoration. Without mask compositing the
   two mask layers UNION instead of subtracting, so the ring would paint
   as a SOLID GOLD RECTANGLE over the whole control -- covering the label
   on every outline button, the checkout send buttons included. This site
   is opened inside Instagram and TikTok webviews on purpose, which is
   exactly where an old engine turns up. No mask support, no ring, and the
   original solid gold border is left exactly as it was. */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .btn,
  .qbtn,
  .gallery-nav,
  .lock-btn {
    position: relative;
    border-color: transparent;
  }
  .btn::after,
  .qbtn::after,
  .gallery-nav::after,
  .lock-btn::after {
    content: ''; position: absolute; inset: -1px; padding: 1px;
    border-radius: inherit; pointer-events: none;
    background-image: var(--gold-gloss), var(--gold-body);
    background-size: 240% 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    animation: gold-edge var(--gold-cycle) linear infinite;
  }
  .gallery-nav::after { border-radius: 50%; }
}
@keyframes gold-edge {
  from { background-position: -70% 0, 0 0; }
  to   { background-position: 180% 0, 0 0; }
}

/* Thin gold trim on the category tiles.
   NOT the masked ring above, and it cannot be: .category-card sets
   overflow:hidden, which clips a pseudo-element at inset:-1px straight off
   the card. This rides the card's OWN background instead -- a solid fill
   clipped to the padding box, the gold clipped to the border box, so the
   metal paints in the 1px border channel and nowhere else.
   background-origin/background-clip ignore overflow, and the corner radius
   comes along for free. */
.category-card {
  border-color: transparent;
  background-image: linear-gradient(#16151a, #16151a), var(--gold-gloss), var(--gold-body);
  background-size: auto, 240% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-origin: border-box;
  background-clip: padding-box, border-box, border-box;
  animation: gold-trim var(--gold-cycle) linear infinite;
}
@keyframes gold-trim {
  from { background-position: 0 0, -70% 0, 0 0; }
  to   { background-position: 0 0, 180% 0, 0 0; }
}

/* The logo is a PNG, not text, so there are no glyphs to clip a gradient
   to. It gets a slow breathing halo instead, on its own clock so the
   header does not pulse in lockstep with the bar above it. */
@keyframes gold-halo {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(233,181,46,.28)); }
  50%      { filter: drop-shadow(0 0 15px rgba(255,224,138,.52)); }
}
.header-logo-img,
.drawer-logo-img {
  animation: gold-halo var(--gold-halo-cycle) ease-in-out infinite;
}

/* ---- Breathing glow, the same idea as the logo halo ----
   A gold surface on near-black wants to look LIT, not printed, and the
   cheapest honest way to say that is an outer glow that breathes. This is
   filter: drop-shadow rather than box-shadow deliberately: every one of
   these elements already carries a box-shadow (emboss insets, lift), and
   animating that property would have to restate all of it and would drop
   whatever it forgot. A filter composes on top and touches nothing.

   All of it runs on --gold-halo-cycle, the LOGO's clock, so the header
   mark and the gold around it breathe together instead of drifting in and
   out of phase.

   WHY IT IS NOT ON EVERY GOLD THING. Counted live: the shop grid renders
   25 .btn-primary and 24 .card-price on one screen. A blurred shadow
   repainting 25 times a frame is a real cost on a phone, for a glow
   nobody looks at on a card button. So the breathing glow goes on the
   handful of one-off surfaces, and the grid buttons get a stronger STATIC
   glow instead. .btn-sm is the tell -- it is only ever on the grid
   cards. */
@keyframes gold-breathe {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(246,194,44,.26)); }
  50%      { filter: drop-shadow(0 0 17px rgba(255,226,150,.54)); }
}
/* The tiles sit in a grid with gaps as small as 3px, so a full-strength
   glow on each would pool into one warm haze instead of reading as eight
   lit objects. Theirs is deliberately about a third as strong. */
@keyframes gold-breathe-soft {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(246,194,44,.16)); }
  50%      { filter: drop-shadow(0 0 11px rgba(255,226,150,.32)); }
}
.support-bar,
.badge,
.pagination .active,
.btn-primary:not(.btn-sm) {
  animation: gold-live var(--gold-cycle) linear infinite,
             gold-breathe var(--gold-halo-cycle) ease-in-out infinite;
}
.category-card {
  animation: gold-trim var(--gold-cycle) linear infinite,
             gold-breathe-soft var(--gold-halo-cycle) ease-in-out infinite;
}
/* The 25 grid buttons: same warmth, no per-frame cost. */
.btn-primary.btn-sm {
  box-shadow: var(--gold-emboss), 0 0 18px rgba(246,194,44,.34), 0 3px 14px rgba(0,0,0,.5);
}

/* Reduced motion: the material, none of the movement. Still metal, just
   standing still. */
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-primary:not(.btn-sm), .btn-outline:hover, .qbtn:hover, .gallery-nav:hover,
  .lock-btn:hover, .lock-btn.is-nudged, .support-bar, .badge,
  .pagination .active, .stock-meter-fill,
  .section-head h2, .gold-head, .product-price,
  .btn::after, .qbtn::after, .gallery-nav::after, .lock-btn::after,
  .category-card,
  .header-logo-img, .drawer-logo-img {
    animation: none;
  }
}