/* ==========================================================================
   THE DIAMOND ART GALLERY — style.css
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   01. Root Variables (colors, typography, weights, radius, spacing, layout)
   02. Reset & Base
   03. Typography (heading sizes defined once, H1–H6)
   04. Layout Primitives (section / container / row / col)
   05. Ornaments (deco rule, corner brackets, frames)
   06. Buttons & Links
   07. Header, Navigation & Announcement Bar
   08. Hero
   09. New Arrivals (rail + product cards)
   10. Why Choose Us (collage + feature rows)
   11. Shop By Category
   12. Collector's Circle
   13. Newsletter
   14. Referral Program
   15. Instagram
   16. Footer
   17. Utilities & Scroll Reveal
   18. Drawers (Cart & Search)
   19. Chat Widget
   21. Welcome Modal
   22. CRO Details (badges, reassurance)
   23. Scrollbars
   ========================================================================== */


/* ==========================================================================
   01. ROOT VARIABLES
   ========================================================================== */
:root {

  /* ---------- Colors : Surfaces ---------- */
  --color-bg: #090311;
  --color-bg-muted: #0d0516;
  --color-card: #12071e;
  --color-accent: #160c20;
  --color-elevated: #1b1026;
  --color-secondary: #200a05;
  --color-error-bg: #2a1220;
  --color-sidebar: #28123d;
  --color-btn-solid: #2b1a3a;
  --color-input-solid: #1d1129;

  /* ---------- Colors : Brand Gold ----------
     Antique gold, not yellow gold : every tone is pulled down in brightness
     and saturation so it reads as aged metal against the purple. 300 is kept
     lighter than the rest on purpose — it is the edge highlight that gives
     the filled controls their dimension, never a fill on its own. */
  --color-gold-300: #d9bd85;
  --color-gold-400: #bf9f61;
  --color-gold-500: #a8874a;
  --color-gold-600: #8a6c36;
  --color-gold-700: #5f4a24;
  --gradient-gold: linear-gradient(160deg, #cdae74 0%, #a8874a 46%, #785d2d 100%);
  --gradient-gold-bar: linear-gradient(90deg, #6b5327 0%, #9c7d42 22%, #c2a463 50%, #9c7d42 78%, #6b5327 100%);
  --gradient-veil: linear-gradient(180deg, rgba(9, 3, 17, 0) 0%, rgba(9, 3, 17, 0.92) 100%);

  /* ---------- Colors : Text ---------- */
  --color-cream: #f1eadc;
  --color-muted: #cac3b6;
  /* lifted from #8d8377 : it is used on small print, where 5.4:1 on the dark
     purple was not holding up. this clears 7:1 and still sits a clear step
     below --color-muted */
  --color-dim: #a99f92;
  --color-white: #ffffff;

  /* ---------- Colors : Lines & Overlays ---------- */
  --color-border: #271b35;
  --color-line: rgba(168, 135, 74, 0.42);
  --color-line-soft: rgba(168, 135, 74, 0.16);
  --color-glow: rgba(168, 135, 74, 0.28);
  --color-gold-wash: rgba(168, 135, 74, 0.12);
  --color-success: #7ec48f;
  --color-overlay: rgba(9, 3, 17, 0.94);
  --color-veil: rgba(9, 3, 17, 0.7);

  /* ---------- Typography : Families ---------- */
  --font-display: "Italiana", "Playfair Display", Georgia, serif;
  /* body and UI are one face : DM Sans runs everything that is not a display
     heading, buttons and labels included */
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui: var(--font-body);

  /* ---------- Typography : Heading Sizes (H1–H6, declared once) ---------- */
  --fs-h1: 52px;
  --fs-h2: 44px;
  --fs-h3: 33px;
  --fs-h4: 24px;
  --fs-h5: 20px;
  --fs-h6: 16px;

  /* ---------- Typography : Body & UI Sizes ----------
     The whole scale was lifted a step for readability. The token NAMES are
     historical — --fs-12 is the twelfth step, not a promise of 12px — so a
     size change lands here and nowhere else. */
  --fs-10: 11px;
  --fs-11: 12px;
  --fs-12: 13px;
  --fs-13: 14px;
  --fs-14: 15px;
  --fs-15: 16px;
  --fs-16: 17px;
  --fs-17: 18px;
  --fs-18: 19px;
  --fs-19: 20px;
  --fs-20: 22px;

  /* ---------- Typography : Line Heights ---------- */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-base: 1.55;
  --lh-loose: 1.75;

  /* ---------- Typography : Font Weights ---------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Typography : Letter Spacing ---------- */
  --ls-tight: 0.01em;
  --ls-normal: 0.04em;
  --ls-wide: 0.12em;
  --ls-wider: 0.2em;
  --ls-widest: 0.28em;
  --ls-logo: 0.34em;

  /* ---------- Typography : Text Transform ---------- */
  --tt-none: none;
  --tt-uppercase: uppercase;
  --tt-capitalize: capitalize;
  --tt-lowercase: lowercase;

  /* ---------- Border Radius ---------- */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-circle: 50%;
  --radius-pill: 999px;

  /* ---------- Border Widths ---------- */
  --border-thin: 1px;
  --border-thick: 2px;

  /* ---------- Spacing Scale (8px base) ---------- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* ---------- Layout ---------- */
  --container-width: 1620px;
  --container-width-narrow: 780px;
  --gutter-width: 50px;
  --section-padding-y: 96px;
  --header-height: 74px;
  --announcement-height: 34px;

  /* ---------- Component Sizing ---------- */
  --bevel-size: 8px;
  --bevel-size-sm: 5px;
  --shape-bevel: polygon(
    var(--bevel-size) 0,
    calc(100% - var(--bevel-size)) 0,
    100% var(--bevel-size),
    100% calc(100% - var(--bevel-size)),
    calc(100% - var(--bevel-size)) 100%,
    var(--bevel-size) 100%,
    0 calc(100% - var(--bevel-size)),
    0 var(--bevel-size)
  );
  --brand-logo-width: 260px;
  --drawer-width: 420px;
  --cart-thumb-width: 76px;
  --scrollbar-width: 10px;
  --scrollbar-width-thin: 6px;
  --icon-button-size: 38px;
  --buybar-height: 76px;
  --arrow-button-size: 40px;
  --icon-box-size: 40px;
  --bracket-size: 22px;
  --corner-ornament-size: 60px;
  --pattern-tile-width: 620px;
  --hero-min-height: 95vh;
  --hero-copy-width: 660px;
  --mega-feature-width: 220px;
  --facets-width: 280px;
  --addon-thumb-width: 64px;
  --artist-frame-width: 220px;
  --pdp-thumb-width: 82px;
  --chat-fab-size: 44px;
  --chat-panel-width: 340px;
  --chat-panel-height: 500px;

  /* ---------- Media Aspect Ratios ---------- */
  --ratio-product: 4 / 5;
  --ratio-square: 1 / 1;
  --ratio-reel: 9 / 16;
  --ratio-category: 3 / 4;
  --ratio-wide: 4 / 3;
  --ratio-landscape: 3 / 2;

  /* ---------- Z-Index Scale ---------- */
  --z-header: 50;
  --z-chat: 80;
  --z-overlay: 90;
  --z-drawer: 100;
  --z-modal: 150;
  --z-cursor: 200;

  /* ---------- Motion ---------- */
  --transition-fast: 0.25s ease;
  --transition-base: 0.35s ease;
  --transition-slow: 0.6s ease;
  --reveal-step: 90ms;
  --reveal-step-word: 55ms;
  --sweep-curve: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Elevation ---------- */
  --shadow-card: 0 20px 46px rgba(0, 0, 0, 0.55);
  --shadow-menu: 0 24px 50px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 24px var(--color-glow);
}


/* ==========================================================================
   02. RESET & BASE
   NOTE: `margin: 0` below is a zero-reset only. No margin is used anywhere
   in this project for spacing — all spacing uses flex `gap` and `padding`.
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 0 solid;
}

/* every component here sets its own display, which would otherwise beat the
   browser's [hidden] rule and leave "hidden" elements on screen */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-15);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--color-muted);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  cursor: pointer;
}

:where(a, button, input, [tabindex]):focus-visible {
  outline: var(--border-thick) solid var(--color-gold-400);
  outline-offset: var(--space-4);
}

/* Highlight colour when text is selected.
   ::selection only accepts solid colours, so this uses flat gold rather
   than --gradient-gold. Listed separately because one invalid selector
   in a group invalidates the whole rule. */
::selection {
  color: var(--color-bg);
  background-color: var(--color-gold-500);
  text-shadow: none;
}

::-moz-selection {
  color: var(--color-bg);
  background-color: var(--color-gold-500);
  text-shadow: none;
}

/* gradient-filled headings clip their text, so tint those a shade lighter */
.text-gold-gradient::selection,
.title-accent::selection,
.tier__rate-value::selection {
  color: var(--color-bg);
  background-color: var(--color-gold-300);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 200;
  transform: translate(-50%, -120%);
  padding: var(--space-8) var(--space-20);
  font-family: var(--font-ui);
  font-size: var(--fs-13);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-uppercase);
  color: var(--color-bg);
  background-color: var(--color-gold-500);
  transition: transform var(--transition-fast);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}


/* ==========================================================================
   03. TYPOGRAPHY — heading sizes declared exactly once each
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-cream);
}

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }
h5, .h5 { font-size: var(--fs-h5); }
h6, .h6 { font-size: var(--fs-h6); }

.title-accent {
  color: var(--color-gold-500);
}

.eyebrow {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: var(--ls-widest);
  text-transform: var(--tt-uppercase);
  color: var(--color-gold-500);
}

.eyebrow__mark {
  font-size: var(--fs-10);
  line-height: 1;
}

.lede {
  font-size: var(--fs-15);
  line-height: var(--lh-loose);
  color: var(--color-muted);
}

.text-small { font-size: var(--fs-13); }
.text-fine { font-size: var(--fs-12); }
.text-dim { color: var(--color-dim); }


/* ==========================================================================
   04. LAYOUT PRIMITIVES — section > container > row > col
   ========================================================================== */
.section {
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: relative;
  padding: var(--section-padding-y) var(--gutter-width);
}

.section--muted { background-color: var(--color-bg-muted); }
.section--deep { background-color: var(--color-bg); }

/* band that follows straight on from another, so it needs less air on top */
.section--tight-top { padding-top: var(--space-40); }

/* band that hands its vertical rhythm to the block inside it */
.section--flush {
  padding-top: 0;
  padding-bottom: 0;
}

/* Gold hairline across the top edge of a band.
   Painted as a background layer, not a pseudo-element, so it can coexist
   with .section--pattern, which owns ::before. */
.section--rule-top {
  background-image: linear-gradient(90deg, transparent, var(--color-line), transparent);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: top center;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background-image: linear-gradient(90deg, transparent, var(--color-line), transparent);
}

/* Art-deco pattern artwork, dimmed so it reads as texture not wallpaper.
   The tile is masked out toward the top and bottom rather than covered by a
   gradient, so the section's own background shows through whatever it is. */
.section--pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("images/pattern-art-deco-gold.webp");
  background-repeat: repeat;
  background-position: center top;
  background-size: var(--pattern-tile-width) auto;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
}

/* Gold foil : the same tile drawn a second time, brightened and masked to a
   single diagonal band, so only part of the ornament catches the light the
   way a foiled print does. `screen` keeps it additive — it lifts the artwork
   already there instead of laying a flat gold film over the section. */
.section--pattern::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: screen;
  background-image: url("images/pattern-art-deco-gold.webp");
  background-repeat: repeat;
  background-position: center top;
  background-size: var(--pattern-tile-width) auto;
  -webkit-mask-image: linear-gradient(115deg, transparent 22%, #000 46%, transparent 72%);
  mask-image: linear-gradient(115deg, transparent 22%, #000 46%, transparent 72%);
}

.section > .container {
  position: relative;
  z-index: 1;
}

.container {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  width: 100%;
  max-width: var(--container-width);
}

.container--narrow {
  max-width: var(--container-width-narrow);
}

/* for sections whose own block already carries generous internal padding */
.container--tight { gap: var(--space-24); }

.section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  max-width: var(--container-width-narrow);
  align-self: center;
  text-align: center;
}

.section__head--start {
  align-items: flex-start;
  align-self: flex-start;
  text-align: left;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-24);
  width: 100%;
}

.row--column { flex-direction: column; }
.row--center { justify-content: center; align-items: center; }
.row--between { justify-content: space-between; align-items: center; }
.row--top { align-items: flex-start; }
.row--tight { gap: var(--space-12); }
.row--loose { gap: var(--space-40); }

.row--2 > .col { flex: 0 1 calc((100% - var(--space-24)) / 2); }
.row--3 > .col { flex: 0 1 calc((100% - var(--space-24) * 2) / 3); }
.row--4 > .col { flex: 0 1 calc((100% - var(--space-24) * 3) / 4); }

.col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}


/* ==========================================================================
   05. ORNAMENTS
   ========================================================================== */
/* corner brackets laid over a media box */
.frame__bracket {
  position: absolute;
  width: var(--bracket-size);
  height: var(--bracket-size);
  border: var(--border-thin) solid var(--color-gold-500);
  pointer-events: none;
}

.frame__bracket--tl { top: -1px; left: -1px; border-right-width: 0; border-bottom-width: 0; }
.frame__bracket--tr { top: -1px; right: -1px; border-left-width: 0; border-bottom-width: 0; }
.frame__bracket--bl { bottom: -1px; left: -1px; border-right-width: 0; border-top-width: 0; }
.frame__bracket--br { bottom: -1px; right: -1px; border-left-width: 0; border-top-width: 0; }

/* small gold-bordered icon tile used by feature rows and list items */
.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  font-size: var(--fs-16);
  color: var(--color-gold-500);
  background-color: var(--color-btn-solid);
  --bevel-size: var(--bevel-size-sm);
  clip-path: var(--shape-bevel);
}

/* Large art-deco corner flourish — one asset, mirrored into each corner.
   Used by any band that opts in; the host section needs position: relative
   (every .section has it) and should clip overflow if it sets a radius. */
.corner-ornament {
  position: absolute;
  z-index: 1;
  width: var(--corner-ornament-size);
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* boxed panel that lifts a block off the full-bleed section and gives the
   corner ornaments something to sit on. hairlines are background layers, not
   borders, because clip-path slices the corners off a real border. */
.panel {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: var(--space-64) var(--space-56);
  background-image:
    linear-gradient(90deg, transparent, var(--color-line), transparent),
    linear-gradient(90deg, transparent, var(--color-line), transparent),
    radial-gradient(80% 100% at 50% 0%, rgba(168, 135, 74, 0.08), transparent 70%);
  background-repeat: no-repeat;
  background-size: 100% 1px, 100% 1px, auto;
  background-position: top center, bottom center, center;
  clip-path: var(--shape-bevel);
  overflow: hidden;
}

/* anything the panel wraps stacks above its ornaments */
.panel > *:not(.corner-ornament) {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- Framed artwork ----------
   Gold hairline, chamfered corners and a glint on hover. The image is wrapped
   rather than styled directly because <img> cannot carry a pseudo-element,
   and the glint needs one. The hairline is padding, not a border, since
   clip-path slices the tips off a real border. */
.frame {
  position: relative;
  display: flex;
  width: 100%;
  padding: var(--border-thin);
  background-color: var(--color-line);
  clip-path: var(--shape-bevel);
}

.frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.frame::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 30%;
  pointer-events: none;
  transform: translateX(-160%);
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

.frame:hover::after { animation: shine-sweep 0.9s ease-out; }

.corner-ornament--tl { top: 0; left: 0; }
.corner-ornament--tr { top: 0; right: 0; transform: scaleX(-1); }
.corner-ornament--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.corner-ornament--br { right: 0; bottom: 0; transform: scale(-1); }


/* ==========================================================================
   06. BUTTONS & LINKS
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-24);
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-uppercase);
  text-align: center;
  color: var(--color-cream);
  background-color: var(--color-btn-solid);
  isolation: isolate;
  clip-path: var(--shape-bevel);
  transition: transform var(--transition-fast);
}

/* gold fill layer — painted for the primary variant, empty for the outline */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--gradient-gold);
  transform: scaleX(0);
  transform-origin: left center;
}

.btn:active { transform: translateY(1px); }

.btn__tick {
  flex: none;
  width: 6px;
  height: 6px;
  background-color: currentColor;
  opacity: 0.8;
  transform: rotate(45deg);
}

/* the antique fill is darker than the old yellow gold, so the button gets its
   contrast from dimension instead : a lighter gold edge along the top and a
   shadow along the bottom, which reads as a struck metal face. done with an
   inset shadow rather than a border, which clip-path would shear */
.btn--primary {
  color: var(--color-bg);
  box-shadow:
    inset 0 1px 0 rgba(233, 214, 166, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.btn--primary::before { transform: scaleX(1); }

/* ---------- Hover glint ----------
   Every gold-filled control catches the same sweep the announcement bar runs,
   once per hover. The streak sits at z-index -1 so it passes over the gold
   fill but under the label, which needs the host to make a stacking context —
   hence `isolation: isolate` on the ones that did not already have it. */
.pill,
.social,
.chat-fab {
  isolation: isolate;
}

.btn--primary::after,
.pill[aria-pressed="true"]::after,
.social::after,
.chat-fab::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 35%;
  pointer-events: none;
  transform: translateX(-160%);
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

.btn--primary:hover::after,
.btn--primary:focus-visible::after,
.pill[aria-pressed="true"]:hover::after,
.social:hover::after,
.chat-fab:hover::after {
  animation: shine-sweep 0.8s ease-out;
}

@keyframes shine-sweep {
  to { transform: translateX(420%); }
}

.btn--small {
  padding: var(--space-8) var(--space-16);
  font-size: var(--fs-10);
  --bevel-size: var(--bevel-size-sm);
}

.btn--block { width: 100%; }

/* quieter button used for "View All" — same chamfer as the tabs beside it */
.btn--ghost {
  color: var(--color-muted);
  background-color: var(--color-btn-solid);
}

.btn--ghost::before { display: none; }

.link-gold {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-uppercase);
  color: var(--color-gold-500);
  transition: color var(--transition-fast);
}

.link-gold:hover { color: var(--color-gold-300); }

.icon-btn {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  font-size: var(--fs-18);
  color: var(--color-cream);
  transition: color var(--transition-fast);
}

.icon-btn:hover { color: var(--color-gold-500); }

.icon-btn__count {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--color-bg);
  background-color: var(--color-gold-500);
  border-radius: var(--radius-pill);
}

.arrow-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: var(--arrow-button-size);
  height: var(--arrow-button-size);
  font-size: var(--fs-16);
  color: var(--color-gold-500);
  /* solid fill instead of a border : clip-path cuts the tips off a real
     border, which is what left the other chamfered controls looking broken */
  background-color: var(--color-btn-solid);
  --bevel-size: var(--bevel-size-sm);
  clip-path: var(--shape-bevel);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.arrow-btn:hover:not(:disabled) {
  color: var(--color-bg);
  background-color: var(--color-gold-500);
}

.arrow-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  background-color: var(--color-btn-solid);
  clip-path: var(--shape-bevel);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.pill[aria-pressed="true"] {
  color: var(--color-bg);
  background-image: var(--gradient-gold);
}

/* the filter tabs and the quieter "View All" link sit side by side, so they
   share one set of metrics — changing this changes both together */
.pill,
.btn--ghost {
  padding: var(--space-8) var(--space-16);
  font-family: var(--font-ui);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-uppercase);
  --bevel-size: var(--bevel-size-sm);
}


/* ==========================================================================
   07. HEADER, NAVIGATION & ANNOUNCEMENT BAR
   ========================================================================== */
.announcement {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
  /* below the header : as the page scrolls the header slides to top 0 while
     this strip is still on screen, and it must pass over, not under */
  z-index: 1;
  /* fixed height so the overlaid header knows exactly where to sit */
  height: var(--announcement-height);
  padding: 0 var(--gutter-width);
  font-family: var(--font-ui);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-align: center;
  color: var(--color-bg);
  background-image: var(--gradient-gold-bar);
  overflow: hidden;
}

/* a narrow highlight sweeps across the gold, like light catching metal.
   done with a moving element rather than an animated background-position so
   the loop is seamless — the streak simply leaves one edge and re-enters the
   other, with a pause between passes so it reads as a glint, not a scroll. */
.announcement::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  pointer-events: none;
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: announcement-shine 5s ease-in-out infinite;
}

@keyframes announcement-shine {
  0% { transform: translateX(-150%); }
  55%, 100% { transform: translateX(430%); }
}

/* the copy stays above the streak so the highlight passes behind it */
.announcement > p {
  position: relative;
  z-index: 1;
}

/* absolute, not sticky : out of flow so the hero banner starts at the very top
   and the bar sits over it, but anchored to the document so it scrolls away
   with the page instead of following the viewport. */
.header {
  position: absolute;
  top: var(--announcement-height);
  right: 0;
  left: 0;
  z-index: var(--z-header);
  display: flex;
  flex-direction: column;
  background-color: transparent;
}

.header__bar {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter-width);
}

/* gold hairline under the bar, same fade-to-transparent rule as the footer :
   it separates the header from the page without boxing the transparent bar in */
.header__bar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  pointer-events: none;
  background-image: linear-gradient(90deg, transparent, var(--color-line), transparent);
}

.header__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32);
  width: 100%;
  max-width: var(--container-width);
  min-height: var(--header-height);
}

.header__brand,
.header__utils {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
}

.brand { display: flex; flex-direction: column; }
.brand__logo { width: var(--brand-logo-width); }

.nav { display: flex; flex-direction: row; align-items: center; }

.nav__list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-12);
}

.nav__item { position: relative; display: flex; flex-direction: column; }

.nav__link {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-12);
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: var(--ls-normal);
  white-space: nowrap;
  color: var(--color-muted);
  border: var(--border-thin) solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

/* open dropdown / mega trigger gets a gold outline box */
.nav__link[aria-expanded="true"] {
  color: var(--color-cream);
  border-color: var(--color-gold-500);
}

.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--color-gold-500); }

.nav__link::after {
  content: "";
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-12);
  width: calc(100% - var(--space-12) * 2);
  height: 1px;
  background-color: var(--color-gold-500);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--transition-fast);
}

a.nav__link:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.nav__caret { font-size: var(--fs-11); transition: transform var(--transition-fast); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  display: none;
  flex-direction: column;
  min-width: 236px;
  padding: var(--space-8);
  background-color: var(--color-card);
  border: var(--border-thin) solid var(--color-border);
  box-shadow: var(--shadow-menu);
  transform: translateX(-50%);
}

.nav__item.is-open .submenu { display: flex; }

.submenu__link {
  display: flex;
  padding: var(--space-12) var(--space-16);
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-normal);
  color: var(--color-muted);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.submenu__link:hover { color: var(--color-gold-500); background-color: var(--color-accent); }

/* ---------- Mega menu ---------- */
/* the trigger goes static so the panel resolves against the header bar */
.nav__item--mega { position: static; }

/* ---------- Collections mega menu ----------
   Two columns : a single featured collection carried by its artwork, and the
   rest as a plain list. Deliberately not five cards — a menu is for choosing,
   not browsing, and the artwork already does the selling on the page. */
.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: var(--z-header);
  display: none;
  flex-direction: column;
  gap: var(--space-20);
  /* sized by its content rather than a fixed width, so the panel shrinks when
     there is less in it — capped so long descriptions cannot run away */
  width: max-content;
  max-width: min(720px, calc(100vw - var(--gutter-width) * 2));
  padding: var(--space-32);
  background-color: var(--color-card);
  border: var(--border-thin) solid var(--color-border);
  box-shadow: var(--shadow-menu);
  transform: translateX(-50%);
  overflow: hidden;
  /* smaller than the section ornaments — this is a menu, not a shrine */
  --corner-ornament-size: 44px;
}

.js-dropdown.is-open .mega { display: flex; }

.mega__row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-32);
}

/* ---------- Featured collection ---------- */
.mega__feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  flex: 0 0 var(--mega-feature-width);
}

.mega__frame { aspect-ratio: var(--ratio-square); }

.mega__feature-label {
  padding-top: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: var(--tt-uppercase);
  color: var(--color-gold-500);
}

.mega__feature-title {
  font-family: var(--font-body);
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  color: var(--color-cream);
  transition: color var(--transition-fast);
}

.mega__feature:hover .mega__feature-title { color: var(--color-gold-300); }

/* ---------- The rest, as rows ---------- */
.mega__list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

/* plain rows — the gold rule on the left is the only hover affordance */
.mega-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-16);
  border-left: var(--border-thin) solid transparent;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.mega-link:hover {
  background-color: var(--color-accent);
  border-left-color: var(--color-gold-500);
}

.mega-link__title {
  font-family: var(--font-ui);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--color-cream);
  transition: color var(--transition-fast);
}

.mega-link:hover .mega-link__title { color: var(--color-gold-500); }

.mega-link__desc {
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  line-height: var(--lh-snug);
  color: var(--color-dim);
}

.mega__foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: var(--space-16);
  border-top: var(--border-thin) solid var(--color-border);
}

.burger { display: none; }

.mobile-nav {
  display: flex;
  flex-direction: column;
}

.mobile-nav__link {
  display: flex;
  padding: var(--space-16) 0;
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-uppercase);
  color: var(--color-cream);
  border-bottom: var(--border-thin) solid var(--color-border);
  transition: color var(--transition-fast);
}

.mobile-nav__link:hover { color: var(--color-gold-500); }


/* ==========================================================================
   08. HERO
   ========================================================================== */
/* full-width banner : one background image, copy sitting over it on the left */
.hero {
  align-items: center;
  min-height: var(--hero-min-height);
  /* the overlaid header floats above this band, so its height is added to the
     top padding — otherwise the headline would sit under the nav */
  padding-top: calc(var(--space-96) + var(--header-height));
  padding-bottom: var(--space-96);
  background-color: var(--color-bg);
  /* the top hairline rides in this stack rather than coming from
     .section--rule-top, whose single background-image would be overwritten
     by the banner declared here */
  background-image:
    linear-gradient(90deg, transparent, var(--color-line), transparent),
    url("images/hero-banner.webp");
  background-repeat: no-repeat;
  background-position: top center, center;
  background-size: 100% 1px, cover;
}

/* only on mobile, where the banner stops being a background and becomes a
   picture in the flow above the copy */
.hero__media { display: none; }

/* no hairline here : the banner runs to the edge of the copy block and an
   outline would box it in */
.hero__frame {
  aspect-ratio: var(--ratio-wide);
  padding: 0;
  background-color: transparent;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  width: 100%;
  max-width: var(--hero-copy-width);
}



/* ==========================================================================
   09. NEW ARRIVALS — rail + product cards
   ========================================================================== */
.rail-head {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
  width: 100%;
}

.rail-head__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}

/* tabs + view-all share the right edge, level with the title */
.rail-head__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
}

.filters {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.rail-wrap { display: flex; flex-direction: column; gap: var(--space-24); width: 100%; }

.rail {
  display: flex;
  flex-direction: row;
  gap: var(--space-24);
  width: 100%;
  padding-bottom: var(--space-8);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.rail::-webkit-scrollbar { display: none; }

/* five across on desktop */
.rail__item {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - var(--space-24) * 4) / 5);
  scroll-snap-align: start;
}

.rail-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
}

.rail-dots { display: flex; flex-direction: row; align-items: center; gap: var(--space-8); }

.rail-dot {
  width: 6px;
  height: 6px;
  background-color: var(--color-border);
  border-radius: var(--radius-circle);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.rail-dot.is-active { background-color: var(--color-gold-500); transform: scale(1.4); }

.rail-nav__counter {
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-wide);
  color: var(--color-dim);
}

/* ---------- Product card ---------- */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-8);
  background-color: var(--color-card);
  /* keeps the card's own layers (brackets, badge, wish, quick add) contained,
     so they can never stack against anything outside the card */
  isolation: isolate;
}

/* deco brackets on opposite corners */
.product-card__bracket {
  position: absolute;
  z-index: 2;
  width: 28px;
  height: 28px;
  border: var(--border-thin) solid var(--color-gold-500);
  pointer-events: none;
}

.product-card__bracket--tl {
  top: 0;
  left: 0;
  border-right-width: 0;
  border-bottom-width: 0;
}

.product-card__bracket--br {
  right: 0;
  bottom: 0;
  border-top-width: 0;
  border-left-width: 0;
}

.product-card__media {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* darkens the artwork so the button reads against any image */
.product-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--color-veil);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.product-card:hover .product-card__media::after,
.product-card:focus-within .product-card__media::after { opacity: 1; }

.product-card__image {
  width: 100%;
  aspect-ratio: var(--ratio-product);
  object-fit: cover;
  object-position: center;
  transition: transform var(--transition-slow);
}

.product-card:hover .product-card__image { transform: scale(1.04); }

/* wishlist toggle */
.product-card__wish {
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: var(--fs-16);
  color: var(--color-gold-500);
  background-color: var(--color-veil);
  --bevel-size: var(--bevel-size-sm);
  clip-path: var(--shape-bevel);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.product-card__wish:hover,
.product-card__wish[aria-pressed="true"] {
  color: var(--color-bg);
  background-image: var(--gradient-gold);
}

/* add-to-cart sits centred over the artwork */
.product-card__cart {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: auto;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.product-card:hover .product-card__cart,
.product-card:focus-within .product-card__cart {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  flex: 1 1 auto;
  padding: var(--space-20) var(--space-16);
  text-align: center;
}

.product-card__artist {
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  font-weight: var(--fw-medium);
  text-transform: var(--tt-uppercase);
  color: var(--color-gold-600);
}

.product-card__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-cream);
}

/* hairline capped with a centred diamond */
.product-card__divider {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  width: 100%;
  font-size: var(--fs-10);
  line-height: 1;
  color: var(--color-gold-500);
}

.product-card__divider::before,
.product-card__divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-image: linear-gradient(90deg, transparent, var(--color-line), transparent);
}

.product-card__price {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-gold-500);
}


/* ==========================================================================
   10. WHY CHOOSE US — single image + compact two-column feature grid
   ========================================================================== */
.why__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-64);
  width: 100%;
}

.why__media {
  display: flex;
  flex-direction: column;
  flex: 1 1 50%;
  min-width: 0;
}

.why__frame { aspect-ratio: var(--ratio-landscape); }

.why__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
  flex: 1 1 50%;
  min-width: 0;
}


/* two per row so five items cost three rows instead of five */
.feature-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-16) var(--space-24);
  width: 100%;
}

.feature-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-12);
  flex: 0 1 calc((100% - var(--space-24)) / 2);
}

.feature-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1 1 auto;
  min-width: 0;
}

.feature-row__title {
  font-family: var(--font-ui);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-cream);
}

.feature-row__lead {
  font-size: var(--fs-12);
  line-height: var(--lh-snug);
  color: var(--color-dim);
}


/* ==========================================================================
   11. SHOP BY CATEGORY
   ========================================================================== */
.category-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--transition-base);
}

.category-tile:hover { transform: translateY(-6px); }

/* ---------- Artwork ---------- */
.category-tile__media {
  position: relative;
  display: flex;

  clip-path: var(--shape-bevel);
  flex-direction: column;
  overflow: hidden;
}

/* portrait : five narrow tiles in a row need the height to read as artwork */
.category-tile__image {
  width: 100%;
  aspect-ratio: var(--ratio-category);
  object-fit: cover;
  object-position: center;
  transition: transform var(--transition-slow);
}

.category-tile:hover .category-tile__image { transform: scale(1.06); }

/* ---------- Call to action, under the copy ----------
   A plain gold link rather than a button that appears over the artwork: it is
   always readable, and the whole tile is the link anyway. */
.category-tile__action {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
  padding-top: var(--space-4);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-uppercase);
  color: var(--color-gold-500);
  transition: color var(--transition-fast);
}

.category-tile__action i { transition: transform var(--transition-fast); }

.category-tile:hover .category-tile__action { color: var(--color-gold-300); }
.category-tile:hover .category-tile__action i { transform: translateX(4px); }

/* ---------- Category grid ----------
   Replaces the coverflow: every collection on one row, so the whole set is
   visible without scrolling or paging. One column per tile. */
.category-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-24);
  width: 100%;
}

.category-tile__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1 1 auto;
  padding: var(--space-24) 0 0;
}

/* five tiles across leaves each one narrow, and the longer collection names
   ran to three lines at heading size */
.category-tile__title {
  font-family: var(--font-body);
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-cream);
}

.category-tile__desc {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  line-height: var(--lh-snug);
  color: var(--color-dim);
}


/* ==========================================================================
   12. COLLECTOR'S CIRCLE
   ========================================================================== */

/* ---------- Layout : artwork on the left, the offer on the right ---------- */
.circle__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-64);
  width: 100%;
}

.circle__media {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 45%;
  min-width: 0;
  padding-bottom: var(--space-48);
  padding-left: var(--space-48);
}

/* no hairline here : the pair of frames overlap, and two edges meeting at the
   overlap read as clutter. the artwork carries itself. */
.circle__frame {
  aspect-ratio: 1/1;
  padding: 0;
  background-color: transparent;
}

/* a smaller second frame overlapping the first, so the block reads as a
   pair of gallery prints rather than one flat picture */
.circle__frame--inset {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 42%;
  aspect-ratio: var(--ratio-square);
}

.circle__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
  flex: 1 1 55%;
  min-width: 0;
}

/* ---------- Tiers : one scannable line each, no cards ---------- */
.tier-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.tier {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16) 0;
  border-bottom: var(--border-thin) solid var(--color-border);
}

.tier:last-child { border-bottom: 0; }

.tier__name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: var(--tt-uppercase);
  color: var(--color-cream);
}

.tier__range {
  flex: none;
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  color: var(--color-dim);
}

 /* the earn rate is the number that matters, so it gets a chip of its own */
.tier__rate {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--space-8);
  flex: none;
  min-width: 116px;
  padding: var(--space-8) var(--space-12);
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-normal);
  text-transform: var(--tt-uppercase);
  color: var(--color-gold-500);
  background-color: var(--color-gold-wash);
  --bevel-size: var(--bevel-size-sm);
  clip-path: var(--shape-bevel);
}

.tier__rate-value {
  font-family: var(--font-body);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* the top tier is the goal, so it is the only line that gets gold */
.tier--premier .tier__name { color: var(--color-gold-300); }

/* and the only chip that is filled rather than tinted */
.tier--premier .tier__rate {
  color: var(--color-bg);
  background-color: transparent;
  background-image: var(--gradient-gold);
}

/* the value is gradient-clipped text, which would vanish on a gold fill */
.tier--premier .tier__rate-value {
  -webkit-text-fill-color: var(--color-bg);
  color: var(--color-bg);
  background-image: none;
}

/* ---------- Footer CTA ---------- */
.circle-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  padding-top: var(--space-8);
}


/* ==========================================================================
   13. NEWSLETTER
   ========================================================================== */
/* the panel is what carries the surface, the ornaments and the bevel —
   the section itself is only the band of space around it, so the corner
   ornaments land on the box corners instead of the full-bleed viewport */
/* copy on the left, form on the right */
.newsletter__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-48);
}

.newsletter__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  flex: 1 1 auto;
  min-width: 0;
  max-width: 620px;
}

.newsletter__action {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  flex: 0 1 auto;
  width: 100%;
  max-width: 520px;
}

.newsletter__form {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-12);
  width: 100%;
}

.newsletter__field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-12);
  flex: 1 1 auto;
  padding: var(--space-12) var(--space-16);
  background-color: var(--color-input-solid);
  clip-path: var(--shape-bevel);
  transition: background-color var(--transition-fast);
}

.newsletter__field:focus-within { background-color: var(--color-accent); }

.newsletter__icon { display: flex; flex: none; font-size: var(--fs-14); color: var(--color-gold-500); }

.newsletter__input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  color: var(--color-cream);
  background-color: transparent;
}

.newsletter__input::placeholder { color: var(--color-dim); }

/* empty until JS writes a message — no reserved gap while it is blank */
.newsletter__status:empty { display: none; }


/* ==========================================================================
   14. REFERRAL PROGRAM
   ========================================================================== */
.referral__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-64);
  width: 100%;
}

.referral__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
  flex: 1 1 44%;
}

.referral__steps { display: flex; flex-direction: column; gap: var(--space-16); flex: 1 1 56%; }

.step {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-20);
  background-color: var(--color-card);
  clip-path: var(--shape-bevel);
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.step:hover {
  transform: translateX(4px);
  background-color: var(--color-elevated);
}

.step__body { display: flex; flex-direction: column; gap: var(--space-4); flex: 1 1 auto; }

.step__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: var(--color-cream);
}

.step__note { font-size: var(--fs-12); color: var(--color-dim); }

.step__number {
  flex: none;
  font-family: var(--font-body);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-gold-600);
  transition: color var(--transition-fast);
}

.step:hover .step__number { color: var(--color-gold-300); }


/* ==========================================================================
   15. INSTAGRAM
   ========================================================================== */
.instagram__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  text-align: center;
}

.instagram__icon { display: flex; font-size: var(--fs-20); color: var(--color-gold-500); }

.instagram__handle {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
  text-transform: var(--tt-none);
  color: var(--color-cream);
}

.instagram__sub {
  font-family: var(--font-ui);
  font-size: var(--fs-10);
  letter-spacing: var(--ls-widest);
  text-transform: var(--tt-uppercase);
  color: var(--color-dim);
}

/* extra breathing room between the follow button and the feed */
/* a scroll-snap rail, not a wrapping grid — reels are a feed, and a feed is
   something you swipe through */
.ig-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--space-12);
  width: 100%;
  padding-top: var(--space-32);
  padding-bottom: var(--space-8);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.ig-grid::-webkit-scrollbar { display: none; }

.ig-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - var(--space-12) * 5) / 6);
  scroll-snap-align: start;
  overflow: hidden;
  clip-path: var(--shape-bevel);
}

.ig-tile__video {
  width: 100%;
  /* reels are shot vertically */
  aspect-ratio: var(--ratio-reel);
  object-fit: cover;
  background-color: var(--color-elevated);
  transition: transform var(--transition-slow);
}

/* veil + instagram mark, revealed on hover or keyboard focus */
.ig-tile__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--color-gold-500);
  background-color: var(--color-veil);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.ig-tile__overlay i {
  transform: scale(0.85);
  transition: transform var(--transition-base);
}

/* sound toggle : sits above the overlay link, and stays visible without hover
   because on touch there is no hover to reveal it with */
.ig-tile__sound {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  font-size: var(--fs-14);
  color: var(--color-gold-300);
  background-color: var(--color-veil);
  --bevel-size: var(--bevel-size-sm);
  clip-path: var(--shape-bevel);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.ig-tile__sound[aria-pressed="true"] {
  color: var(--color-bg);
  background-color: var(--color-gold-500);
}

.ig-tile:hover .ig-tile__video { transform: scale(1.06); }

.ig-tile:hover .ig-tile__overlay,
.ig-tile__overlay:focus-visible { opacity: 1; }

.ig-tile:hover .ig-tile__overlay i,
.ig-tile__overlay:focus-visible i { transform: scale(1); }


/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.footer {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: var(--space-80) var(--gutter-width) var(--space-24);
  background-color: var(--color-bg-muted);
  border-top: var(--border-thin) solid var(--color-border);
}

.footer .container { gap: var(--space-40); }

/* ---------- Top band : brand + link columns ---------- */
.footer__top {
  display: flex;
  flex-direction: row;
  gap: var(--space-64);
  width: 100%;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
  flex: 0 1 340px;
}


.footer__tagline {
  font-size: var(--fs-14);
  line-height: var(--lh-loose);
  color: var(--color-dim);
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.footer__contact-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-12);
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  color: var(--color-muted);
  transition: color var(--transition-fast);
}

a.footer__contact-item:hover { color: var(--color-gold-500); }

.footer__contact-icon {
  display: flex;
  flex: none;
  font-size: var(--fs-16);
  color: var(--color-gold-500);
}

/* ---------- Link columns ---------- */
.footer__nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-40);
  flex: 1 1 auto;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  flex: 1 1 160px;
}

.footer__col-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: var(--tt-uppercase);
  color: var(--color-cream);
}

/* short gold underscore beneath each column heading */
.footer__col-title::after {
  content: "";
  width: 24px;
  height: 1px;
  background-color: var(--color-gold-500);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.footer__link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-13);
  color: var(--color-dim);
  transition: color var(--transition-fast);
}

/* gold tick that grows out of the link on hover */
.footer__link::before {
  content: "";
  width: 0;
  height: 1px;
  background-color: var(--color-gold-500);
  transition: width var(--transition-fast);
}

.footer__link:hover { color: var(--color-gold-500); }
.footer__link:hover::before { width: 12px; }

/* ---------- Socials ---------- */
.socials {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  font-size: var(--fs-16);
  color: var(--color-gold-500);
  background-color: var(--color-btn-solid);
  --bevel-size: var(--bevel-size-sm);
  clip-path: var(--shape-bevel);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.social:hover {
  color: var(--color-bg);
  background-image: var(--gradient-gold);
  transform: translateY(-2px);
}

/* ---------- Bottom bar ---------- */
.footer__bottom {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16) var(--space-32);
  width: 100%;
  padding-top: var(--space-24);
  border-top: var(--border-thin) solid var(--color-border);
}

.footer__copy {
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-normal);
  color: var(--color-dim);
}

.footer__legal {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-24);
}

.footer__legal a {
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-normal);
  color: var(--color-dim);
  transition: color var(--transition-fast);
}

.footer__legal a:hover { color: var(--color-gold-500); }


/* ==========================================================================
   17. UTILITIES & SCROLL REVEAL
   ========================================================================== */
/* ---------- Metallic gold text ----------
   Paints the same gradient the primary button uses through the glyphs.
   Declared late so it wins over each component's own colour, and guarded
   by @supports so unsupported browsers keep flat gold instead of nothing. */
.text-gold-gradient,
.title-accent,
.tier__rate-value {
  color: var(--color-gold-500);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .text-gold-gradient,
  .title-accent,
  .tier__rate-value {
    background-image: var(--gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

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

/* ---------- Staggered groups ----------
   The parent carries the observer; each child leans on --reveal-index, which
   the script stamps on, so a row of cards arrives one after another instead
   of all at once. Delay lives in a token so every group shares one rhythm. */
.reveal-item {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
  transition-delay: calc(var(--reveal-index, 0) * var(--reveal-step));
}

.reveal-group.is-visible .reveal-item {
  opacity: 1;
  transform: none;
}

/* ---------- Headings, word by word ----------
   inline-block is what makes the lift possible — inline elements ignore
   transform. Words keep their trailing space as a separate text node so the
   line still wraps naturally. */
.reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
  transition-delay: calc(var(--reveal-index, 0) * var(--reveal-step-word));
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .reveal { opacity: 1; transform: none; }
}


/* ==========================================================================
   18. DRAWERS — CART & SEARCH
   ========================================================================== */
.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: var(--color-veil);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

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

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--drawer-width);
  background-color: var(--color-card);
  border-left: var(--border-thin) solid var(--color-border);
  box-shadow: var(--shadow-menu);
  visibility: hidden;
  transform: translateX(100%);
  transition: transform var(--sweep-curve), visibility var(--transition-base);
}

/* menu and filters slide in from the left, cart and search from the right */
.drawer--left {
  right: auto;
  left: 0;
  border-right: var(--border-thin) solid var(--color-border);
  border-left: 0;
  transform: translateX(-100%);
}

.drawer.is-open { visibility: visible; transform: translateX(0); }

.drawer__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  flex: none;
  padding: var(--space-20) var(--space-24);
  border-bottom: var(--border-thin) solid var(--color-border);
}

.drawer__title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-12);
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: var(--tt-uppercase);
  color: var(--color-gold-500);
}

.drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  font-size: var(--fs-18);
  color: var(--color-cream);
  background-color: var(--color-btn-solid);
  --bevel-size: var(--bevel-size-sm);
  clip-path: var(--shape-bevel);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.drawer__close:hover { color: var(--color-bg); background-color: var(--color-gold-500); }

.drawer__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  flex: 1 1 auto;
  padding: var(--space-24);
  overflow-y: auto;
  scrollbar-width: thin;
}

.drawer__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  flex: none;
  padding: var(--space-24);
  background-color: var(--color-bg);
  border-top: var(--border-thin) solid var(--color-border);
}

.drawer__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-48) var(--space-16);
  text-align: center;
}

.drawer__empty-icon { display: flex; font-size: var(--fs-h2); line-height: 1; color: var(--color-border); }

.cart-list { display: flex; flex-direction: column; gap: var(--space-20); }

.cart-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-16);
  padding-bottom: var(--space-20);
  border-bottom: var(--border-thin) solid var(--color-border);
}

.cart-item__media { flex: none; width: var(--cart-thumb-width); }

.cart-item__image {
  width: 100%;
  aspect-ratio: var(--ratio-product);
  object-fit: cover;
  --bevel-size: var(--bevel-size-sm);
  clip-path: var(--shape-bevel);
}

.cart-item__body { display: flex; flex-direction: column; gap: var(--space-4); flex: 1 1 auto; min-width: 0; }

.cart-item__artist {
  font-family: var(--font-ui);
  font-size: var(--fs-10);
  letter-spacing: var(--ls-wider);
  text-transform: var(--tt-uppercase);
  color: var(--color-dim);
}

.cart-item__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-cream);
}

.cart-item__price { font-family: var(--font-ui); font-size: var(--fs-13); color: var(--color-gold-500); }

.cart-item__controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding-top: var(--space-8);
}

/* solid fill + bevel rather than a border : clip-path shears border corners */
.qty {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--color-btn-solid);
  --bevel-size: var(--bevel-size-sm);
  clip-path: var(--shape-bevel);
}

.qty__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  font-size: var(--fs-12);
  color: var(--color-gold-500);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.qty__btn:hover { color: var(--color-bg); background-color: var(--color-gold-500); }

.qty__value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  color: var(--color-cream);
  text-align: center;
}

/* the PDP value is a real number input : strip the browser chrome */
input.qty__value {
  appearance: textfield;
  -moz-appearance: textfield;
  background-color: transparent;
  border: 0;
}

input.qty__value::-webkit-outer-spin-button,
input.qty__value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input.qty__value:focus-visible { outline: none; }

/* buy-row size : stands level with the Add to Cart button beside it */
.qty--lg { align-self: stretch; }

.qty--lg .qty__btn {
  width: 42px;
  height: auto;
  align-self: stretch;
  min-height: 42px;
  font-size: var(--fs-14);
}

.qty--lg .qty__value {
  min-width: 44px;
  align-self: stretch;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  color: var(--color-cream);
}

.cart-item__remove {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--fs-10);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-uppercase);
  color: var(--color-dim);
  transition: color var(--transition-fast);
}

.cart-item__remove:hover { color: var(--color-gold-400); }

.cart-summary { display: flex; flex-direction: column; gap: var(--space-8); }

.cart-summary__row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-normal);
  text-transform: var(--tt-uppercase);
  color: var(--color-dim);
}

.cart-summary__row--total {
  padding-top: var(--space-12);
  border-top: var(--border-thin) solid var(--color-border);
  color: var(--color-cream);
}

.cart-summary__total {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-gold-500);
}

.cart-note { font-size: var(--fs-11); text-align: center; color: var(--color-dim); }

.search-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-12);
  flex: none;
  padding: var(--space-12) var(--space-16);
  background-color: var(--color-input-solid);
  clip-path: var(--shape-bevel);
  transition: background-color var(--transition-fast);
}

.search-form:focus-within { background-color: var(--color-accent); }

.search-form__icon { display: flex; flex: none; font-size: var(--fs-16); color: var(--color-gold-500); }

.search-form__input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-13);
  color: var(--color-cream);
  background-color: transparent;
}

.search-form__input::placeholder { color: var(--color-dim); }

.search-form__clear { display: flex; flex: none; font-size: var(--fs-15); color: var(--color-dim); transition: color var(--transition-fast); }
.search-form__clear:hover { color: var(--color-gold-400); }

.search-group { display: flex; flex-direction: column; gap: var(--space-12); }

.search-group__title {
  font-family: var(--font-ui);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: var(--tt-uppercase);
  color: var(--color-gold-500);
}

.search-tags { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-8); }

.search-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-8) var(--space-12);
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  color: var(--color-muted);
  background-color: var(--color-btn-solid);
  --bevel-size: var(--bevel-size-sm);
  clip-path: var(--shape-bevel);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.search-tag:hover { color: var(--color-cream); }

.search-results { display: flex; flex-direction: column; gap: var(--space-12); }

.search-result {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-8);
  border: var(--border-thin) solid transparent;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.search-result:hover { background-color: var(--color-accent); border-color: var(--color-border); }

.search-result__media { flex: none; width: 52px; }

.search-result__image {
  width: 100%;
  aspect-ratio: var(--ratio-square);
  object-fit: cover;
  --bevel-size: var(--bevel-size-sm);
  clip-path: var(--shape-bevel);
}

.search-result__body { display: flex; flex-direction: column; gap: var(--space-4); flex: 1 1 auto; min-width: 0; }

.search-result__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-cream);
}

.search-result__meta {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  color: var(--color-gold-500);
}

.is-scroll-locked { overflow: hidden; }


/* ==========================================================================
   19. CHAT WIDGET
   ========================================================================== */

/* ---------- Floating action button ---------- */
.chat-fab {
  position: fixed;
  right: var(--space-24);
  bottom: var(--space-24);
  z-index: var(--z-chat);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--chat-fab-size);
  height: var(--chat-fab-size);
  font-size: var(--fs-16);
  color: var(--color-bg);
  background-image: var(--gradient-gold);
  --bevel-size: var(--bevel-size-sm);
  clip-path: var(--shape-bevel);
  transition: transform var(--transition-fast), bottom var(--transition-base);
}

.chat-fab:hover { transform: translateY(-3px); }

.chat-fab__icon { display: flex; line-height: 1; }

/* ---------- Panel shell ---------- */
.chat-panel {
  position: fixed;
  right: var(--space-24);
  bottom: calc(var(--chat-fab-size) + var(--space-48));
  z-index: var(--z-chat);
  display: flex;
  flex-direction: column;
  width: calc(100vw - var(--space-40));
  max-width: var(--chat-panel-width);
  max-height: min(var(--chat-panel-height), calc(100vh - var(--chat-fab-size) - var(--space-80)));
  background-color: var(--color-card);
  border: var(--border-thin) solid var(--color-border);
  box-shadow: var(--shadow-menu);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.98);
  transform-origin: bottom right;
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base),
    transform var(--transition-base);
}

.chat-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* ---------- Header ---------- */
.chat-panel__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  flex: none;
  padding: var(--space-16) var(--space-20);
  background-color: var(--color-elevated);
  border-bottom: var(--border-thin) solid var(--color-border);
}

.chat-panel__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  color: var(--color-cream);
}

.chat-panel__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  font-size: var(--fs-18);
  color: var(--color-cream);
  transition: color var(--transition-fast);
}

.chat-panel__close:hover { color: var(--color-gold-500); }

/* ---------- Body / form fields ---------- */
.chat-panel__form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.chat-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-16) var(--space-20);
  overflow-y: auto;
  scrollbar-width: thin;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.field__label {
  font-family: var(--font-ui);
  font-size: var(--fs-10);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: var(--tt-uppercase);
  color: var(--color-muted);
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: var(--space-12) var(--space-24);
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--color-cream);
  background-color: var(--color-input-solid);
  clip-path: var(--shape-bevel);
  transition: background-color var(--transition-fast);
}

.field__textarea {
  min-height: 84px;
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  resize: vertical;
}

.field__input::placeholder,
.field__textarea::placeholder { color: var(--color-dim); }

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  background-color: var(--color-accent);
}

.field__input[aria-invalid="true"],
.field__select[aria-invalid="true"],
.field__textarea[aria-invalid="true"] {
  background-color: var(--color-error-bg);
}

/* select needs its own caret once the native one is removed */
.field__select-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
}

.field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-40);
  cursor: pointer;
}

.field__select option {
  color: var(--color-cream);
  background-color: var(--color-card);
}

.field__caret {
  position: absolute;
  top: 50%;
  right: var(--space-16);
  display: flex;
  font-size: var(--fs-14);
  color: var(--color-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.field__error {
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  color: var(--color-gold-400);
}

/* ---------- Footer ---------- */
.chat-panel__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  flex: none;
  padding: var(--space-16) var(--space-20);
  border-top: var(--border-thin) solid var(--color-border);
}


/* ==========================================================================
   21. WELCOME MODAL
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background-color: var(--color-veil);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

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

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: calc(100vw - var(--space-40));
  max-width: 440px;
  max-height: calc(100vh - var(--space-40));
  padding: var(--space-40) var(--space-32) var(--space-32);
  overflow-y: auto;
  text-align: center;
  background-color: var(--color-card);
  clip-path: var(--shape-bevel);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.96);
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base),
    transform var(--transition-base);
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.modal__close {
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  font-size: var(--fs-18);
  color: var(--color-muted);
  transition: color var(--transition-fast);
}

.modal__close:hover { color: var(--color-gold-500); }

.modal__crest {
  display: flex;
  justify-content: center;
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--color-gold-500);
}

.modal__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-cream);
}

.modal__offer {
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: var(--tt-uppercase);
  color: var(--color-gold-500);
}

.modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
  padding-top: var(--space-8);
}

.modal__dismiss {
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-normal);
  color: var(--color-dim);
  transition: color var(--transition-fast);
}

.modal__dismiss:hover { color: var(--color-muted); }

.modal__status { width: 100%; }


/* ==========================================================================
   22. CRO DETAILS — badges and reassurance microcopy
   ========================================================================== */

/* honest label: these cards live in the New Arrivals rail */
.product-card__badge {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  z-index: 2;
  padding: var(--space-4) var(--space-12);
  font-family: var(--font-ui);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-uppercase);
  color: var(--color-bg);
  background-image: var(--gradient-gold);
  --bevel-size: var(--bevel-size-sm);
  clip-path: var(--shape-bevel);
}

/* small reassurance line that sits under a call to action */
.reassure {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-16);
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  color: var(--color-dim);
}

.reassure__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
}

.reassure__item i { font-size: var(--fs-14); color: var(--color-gold-600); }


/* ==========================================================================
   23. SCROLLBARS
   Gold gradient thumb on a plum track. Firefox gets the two-colour
   `scrollbar-color` fallback; WebKit gets the full gradient.
   ========================================================================== */

/* ---------- Firefox ---------- */
html {
  scrollbar-color: var(--color-gold-600) var(--color-bg-muted);
}

/* ---------- WebKit / Blink ---------- */
::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
  background-color: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
  background-image: var(--gradient-gold);
  border: 2px solid var(--color-bg-muted);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(135deg, var(--color-gold-300) 0%, var(--color-gold-400) 50%, var(--color-gold-600) 100%);
}

::-webkit-scrollbar-corner {
  background-color: var(--color-bg-muted);
}

/* panels inside the page get a slimmer version of the same bar */
.drawer__body::-webkit-scrollbar,
.chat-panel__body::-webkit-scrollbar,
.modal::-webkit-scrollbar {
  width: var(--scrollbar-width-thin);
}

.drawer__body::-webkit-scrollbar-track,
.chat-panel__body::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track {
  background-color: transparent;
}

.drawer__body::-webkit-scrollbar-thumb,
.chat-panel__body::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb {
  border-width: 1px;
  border-color: transparent;
}


/* ==========================================================================
   18. SHARED PAGE FURNITURE — breadcrumbs, inline fields, checkboxes
   ========================================================================== */
.crumbs { width: 100%; }

.crumbs__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  color: var(--color-dim);
}

/* the separator is drawn, not typed, so it never reaches a screen reader */
.crumbs__item + .crumbs__item::before {
  content: "/";
  padding-right: var(--space-8);
  color: var(--color-border);
}

.crumbs__link {
  color: var(--color-muted);
  transition: color var(--transition-fast);
}

.crumbs__link:hover { color: var(--color-gold-500); }

/* ---------- Inline field : icon or prefix sitting inside the box ---------- */
.inline-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-8) var(--space-16);
  background-color: var(--color-input-solid);
  --bevel-size: var(--bevel-size-sm);
  clip-path: var(--shape-bevel);
  transition: background-color var(--transition-fast);
}

.inline-field:focus-within { background-color: var(--color-accent); }

.inline-field--tiny {
  flex: 1 1 0;
  padding: var(--space-8) var(--space-12);
}

.inline-field__icon,
.inline-field__prefix {
  display: flex;
  flex: none;
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  color: var(--color-gold-500);
}

.inline-field__input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  color: var(--color-cream);
  background-color: transparent;
}

.inline-field__input::placeholder { color: var(--color-dim); }

/* ---------- Select ---------- */
.select {
  padding: var(--space-8) var(--space-32) var(--space-8) var(--space-16);
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  color: var(--color-cream);
  background-color: var(--color-input-solid);
  /* the native caret goes with appearance:none, so one is drawn back in */
  background-image: linear-gradient(45deg, transparent 50%, var(--color-gold-500) 50%),
                    linear-gradient(135deg, var(--color-gold-500) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px, 5px 5px;
  appearance: none;
  --bevel-size: var(--bevel-size-sm);
  clip-path: var(--shape-bevel);
}

/* ---------- Checkbox ---------- */
.check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-12);
  cursor: pointer;
}

/* the native box is hidden from sight but kept in the tab order, so focus,
   :checked and the label association all still come for free */
.check__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.check__box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  font-size: var(--fs-11);
  color: transparent;
  background-color: var(--color-input-solid);
  /* no chamfer here : at 18px the cut corners swallow most of the edge, and
     a plain border reads far more clearly as a checkbox */
  border: var(--border-thin) solid var(--color-line);
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.check:hover .check__box { border-color: var(--color-gold-500); }

.check__input:checked + .check__box {
  color: var(--color-bg);
  background-image: var(--gradient-gold);
  border-color: var(--color-gold-300);
}

.check__input:focus-visible + .check__box {
  outline: var(--border-thin) solid var(--color-gold-500);
  outline-offset: 2px;
}

.check__label {
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  color: var(--color-muted);
  transition: color var(--transition-fast);
}

.check:hover .check__label { color: var(--color-cream); }


/* ==========================================================================
   19. COLLECTION PAGE
   ========================================================================== */
/* the results section below brings its own top padding, so this band only
   needs enough room to clear the overlaid header */
.page-head {
  padding-top: calc(var(--space-32) + var(--header-height));
  padding-bottom: var(--space-32);
}

/* the collection name is a label for the grid below, not a hero line, so it
   sits a step down from a page-opening h1 */
.page-head h1 { font-size: var(--fs-h3); }

/* sticky : filters, count and sort stay in reach the whole way down the grid.
   the header is absolute and scrolls away, so top 0 is safe */
.toolbar {
  position: sticky;
  top: 0;
  /* above the cards : their brackets, badges and wish buttons sit at 2, and
     .product-card is not a stacking context, so those escape into this one */
  z-index: 10;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  padding: var(--space-12) 0;
}

/* the tinted panel is a pseudo-element so it can bleed past the container's
   gutters — the row itself stays transparent and keeps its layout */
.toolbar::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--gutter-width) * -1);
  left: calc(var(--gutter-width) * -1);
  z-index: -1;
  background-color: rgba(13, 5, 22, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--color-line-soft);
}

/* only useful once the sidebar collapses */
.toolbar__toggle { display: none; }

.toolbar__count {
  flex: 1 1 auto;
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  color: var(--color-dim);
}

.toolbar__sort {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
  flex: none;
}

.toolbar__sort-label {
  font-family: var(--font-ui);
  font-size: var(--fs-10);
  letter-spacing: var(--ls-wider);
  text-transform: var(--tt-uppercase);
  color: var(--color-dim);
}

.shop {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-48);
  width: 100%;
}

.facets {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  flex: 0 0 var(--facets-width);
  padding: var(--space-24);
  background-color: var(--color-card);
  clip-path: var(--shape-bevel);
}

.facets__drawer-head { display: none; }

.facets__head {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
}

.facets__title {
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: var(--tt-uppercase);
  color: var(--color-gold-500);
}

.facet {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-top: var(--space-24);
  border-top: var(--border-thin) solid var(--color-border);
}

.facet__title {
  font-family: var(--font-ui);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: var(--tt-uppercase);
  color: var(--color-muted);
}

.facet__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.facet__option { display: flex; flex-direction: column; }

.facet__range {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
}

.facet__range-dash { flex: none; color: var(--color-dim); }

.shop__results {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  flex: 1 1 auto;
  min-width: 0;
}

.shop__empty {
  padding: var(--space-48) 0;
  font-size: var(--fs-14);
  color: var(--color-dim);
  text-align: center;
}

/* ---------- Load more ----------
   Replaces paging : the whole collection is reachable by scrolling, and the
   status line says how much of it is on screen so the button is never a
   mystery. */
.load-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
}

.load-more__status {
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-wide);
  color: var(--color-dim);
}

/* ==========================================================================
   20. PRODUCT PAGE
   ========================================================================== */
/* --flush zeroes both ends, but this band still needs air under it before the
   next section starts */
.pdp {
  padding-top: calc(var(--space-40) + var(--header-height));
  padding-bottom: var(--space-64);
}

.pdp__row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-64);
  width: 100%;
}

 /* thumbnails run down the left, the stage takes the rest */
.pdp__gallery {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-12);
  flex: 1 1 50%;
  min-width: 0;
  /* the gallery follows the buy box on a long page rather than scrolling
     away from it — a browser that cannot do this simply scrolls normally */
  position: sticky;
  top: var(--space-24);
}

/* square stage : artwork arrives at any ratio, so the box is fixed and the
   image is fitted inside it rather than cropped to fill.
   no bevel here : square corners, so overflow does the clipping the
   clip-path used to do — otherwise the hover glint runs past the edge */
.pdp__stage {
  flex: 1 1 auto;
  min-width: 0;
  aspect-ratio: var(--ratio-square);
  clip-path: none;
  overflow: hidden;
}

.pdp__stage > img {
  object-fit: contain;
  /* inset on the image, not the frame : the frame's padding is the gold
     hairline, so breathing room has to come from inside it. its background
     also doubles as the backdrop the letterbox leaves bare */
  padding: var(--space-24);
  background-color: var(--color-card);
}

.pdp__thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  flex: 0 0 var(--pdp-thumb-width);
}

/* square corners, matching the stage : no bevel on the gallery */
.pdp-thumb {
  display: flex;
  width: 100%;
  padding: var(--border-thin);
  background-color: var(--color-border);
  transition: background-color var(--transition-fast);
}

/* same rule as the stage : fit the whole image, never crop it. the inset and
   backdrop live on the image itself so the wrapper's 1px hairline stays a
   hairline instead of thickening into a coloured band */
.pdp-thumb img {
  width: 100%;
  aspect-ratio: var(--ratio-square);
  object-fit: contain;
  padding: var(--space-8);
  background-color: var(--color-card);
}

.pdp-thumb:hover { background-color: var(--color-gold-600); }
.pdp-thumb.is-active { background-color: var(--color-gold-500); }

.pdp__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  flex: 1 1 50%;
  min-width: 0;
}

/* the kit type reads as a label, so it must not look pressable */
.pill--static { pointer-events: none; }

.pdp__artist {
  font-family: var(--font-ui);
  font-size: var(--fs-13);
  color: var(--color-muted);
}

.pdp__price {
  font-family: var(--font-body);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-cream);
}

.pdp__stock {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  color: var(--color-success);
}

.pdp__stock i { font-size: var(--fs-10); }

.pdp__option {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
  padding-top: var(--space-8);
}

.pdp__option-title {
  font-family: var(--font-ui);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: var(--tt-uppercase);
  color: var(--color-muted);
}

.pdp__buy {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-12);
  width: 100%;
  padding-top: var(--space-8);
}

.pdp__cart { flex: 1 1 200px; }

.pdp__specs {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
  padding: var(--space-24);
  background-color: var(--color-card);
  clip-path: var(--shape-bevel);
}

.pdp__specs-title {
  font-family: var(--font-ui);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: var(--tt-uppercase);
  color: var(--color-gold-500);
}

/* the same add-ons as the section below, stacked tight inside the buy box */
.pdp__kit {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
  min-width: 0;
  padding-top: var(--space-8);
}

.pdp__kit-title {
  font-family: var(--font-ui);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: var(--tt-uppercase);
  color: var(--color-muted);
}

.addons--stacked {
  flex-direction: column;
  gap: var(--space-8);
}

.addons--stacked > .addon { flex: 1 1 auto; }

.pdp__kit-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.pdp__kit-nav { display: flex; flex-direction: row; gap: var(--space-8); }

.arrow-btn--sm {
  width: 28px;
  height: 28px;
  font-size: var(--fs-12);
}

.addons-rail-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  /* the rail measures itself against this box, so it must not grow with its
     own content : without it the flex column lets the row blow past the column */
  min-width: 0;
}

/* two columns : the specs are short, and stacking them left an empty half */
.specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12) var(--space-32);
}

/* the drill row carries chips, so it takes the full width of the panel */
.spec--wide { grid-column: 1 / -1; }

.spec {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--fs-12);
}

.spec__mark { flex: none; font-size: var(--fs-10); color: var(--color-gold-500); }
.spec__label { flex: none; color: var(--color-muted); }
.spec__value { color: var(--color-cream); }

/* ---------- Special drill chips ----------
   One chip per finish, each carrying its own colour so the mix is readable at
   a glance. --drill is the only thing a variant sets; the chip draws its dot,
   text and tint from that single value. */
.drills {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.drill {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-12);
  font-family: var(--font-ui);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-uppercase);
  color: var(--color-cream);
  /* a solid tinted fill, not a ring : clip-path shears the corners off any
     border or inset shadow, which left the chips looking broken */
  background-color: var(--drill-bg, var(--color-elevated));
  --bevel-size: var(--bevel-size-sm);
  clip-path: var(--shape-bevel);
}

/* the count doubles as the swatch : it is the chip's colour, filled */
.drill__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-4);
  font-size: var(--fs-10);
  line-height: 1;
  color: var(--color-bg);
  background: var(--drill-fill, var(--drill, var(--color-gold-500)));
  border-radius: var(--radius-pill);
}

/* AB is iridescent, so its swatch gets a spectrum rather than one colour */
.drill--ab {
  --drill: #9fd8e8;
  --drill-bg: #17323a;
  --drill-fill: linear-gradient(120deg, #f2a9c8 0%, #9fd8e8 45%, #b6e8bf 100%);
}

.drill--dust {
  --drill: #e7c3cf;
  --drill-bg: #3a2130;
}

.drill--metallic {
  --drill: #cfd3d8;
  --drill-bg: #2a2e35;
}

.drill--glow {
  --drill: #a9e6a0;
  --drill-bg: #1d3324;
}

.drill--fairy {
  --drill: #d9b8ea;
  --drill-bg: #2e2039;
}

/* ---------- Accordion ---------- */
.accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.accordion__item { border-bottom: var(--border-thin) solid var(--color-border); }

.accordion__toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  padding: var(--space-20) 0;
  font-family: var(--font-body);
  font-size: var(--fs-h5);
  text-align: left;
  color: var(--color-cream);
  transition: color var(--transition-fast);
}

.accordion__toggle:hover { color: var(--color-gold-500); }

.accordion__caret {
  flex: none;
  font-size: var(--fs-14);
  color: var(--color-gold-500);
  transition: transform var(--transition-fast);
}

.accordion__toggle[aria-expanded="true"] .accordion__caret { transform: rotate(180deg); }

.accordion__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-bottom: var(--space-24);
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--color-muted);
}

.ticks {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.ticks__item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-12);
  font-size: var(--fs-13);
  color: var(--color-muted);
}

.ticks__item i { flex: none; color: var(--color-gold-500); }

/* ---------- Complete your kit ---------- */
.addons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-16);
  width: 100%;
}

.addon {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-16);
  flex: 1 1 280px;
  padding: var(--space-12);
  background-color: var(--color-card);
  clip-path: var(--shape-bevel);
  transition: background-color var(--transition-fast);
}

.addon:hover { background-color: var(--color-elevated); }

.addon__image {
  flex: none;
  width: var(--addon-thumb-width);
  aspect-ratio: var(--ratio-square);
  object-fit: cover;
  --bevel-size: var(--bevel-size-sm);
  clip-path: var(--shape-bevel);
}

.addon__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1 1 auto;
  min-width: 0;
}

.addon__title {
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--color-cream);
}

.addon__price {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--color-gold-500);
}

/* the plus sits in its own chamfered box so it reads as a control, not an icon
   floating at the edge of the row : solid fill, since clip-path shears a border */
/* one add-on per page : the buy column is too narrow to show two side by side.
   defined after .addons/.addon so it wins the cascade over the base row rules */
.addons--rail {
  flex-wrap: nowrap;
  /* no gap : a gap would push scrollWidth past 3 pages and mint a stray fourth
     dot, since the rail script pages by clientWidth */
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.addons--rail::-webkit-scrollbar { display: none; }

.addons--rail > .addon {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

.addon__add {
  flex: none;
  font-size: var(--fs-14);
  color: var(--color-gold-500);
  background-color: var(--color-btn-solid);
  --bevel-size: var(--bevel-size-sm);
  clip-path: var(--shape-bevel);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.addon__add:hover {
  color: var(--color-bg);
  background-color: var(--color-gold-500);
}

/* ---------- About the artist ---------- */
.artist {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-48);
  width: 100%;
}

.artist__frame {
  flex: 0 0 var(--artist-frame-width);
  aspect-ratio: var(--ratio-square);
}

.artist__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- Sticky buy bar ---------- */
/* fixed, below the drawers and overlay so opening the cart still covers it */
.buybar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-header);
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: var(--space-12) var(--gutter-width);
  background-color: rgba(13, 5, 22, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  /* parked off-screen until the buy box scrolls away, and inert while parked
     so nothing inside it can be tabbed to or clicked through */
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform var(--transition-base), opacity var(--transition-base),
    visibility var(--transition-base);
}

.buybar.is-visible {
  transform: none;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.buybar::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background-image: linear-gradient(90deg, transparent, var(--color-line), transparent);
}

.buybar__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32);
  width: 100%;
  max-width: var(--container-width);
}

.buybar__nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-32);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.buybar__nav::-webkit-scrollbar { display: none; }

.buybar__link {
  position: relative;
  flex: none;
  padding-bottom: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: var(--tt-uppercase);
  color: var(--color-muted);
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.buybar__link:hover { color: var(--color-cream); }

.buybar__link.is-active { color: var(--color-gold-500); }

/* the underline is drawn only for the section being read */
.buybar__link.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: var(--color-gold-500);
}

.buybar__product {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-16);
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}

.buybar__thumb {
  flex: none;
  width: 44px;
  aspect-ratio: var(--ratio-square);
  object-fit: contain;
  padding: var(--border-thin);
  background-color: var(--color-card);
  box-shadow: 0 0 0 1px var(--color-line-soft);
}

.buybar__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.buybar__title {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  color: var(--color-cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.buybar__price {
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--color-gold-500);
}

.buybar__cart { flex: none; }

/* the chat button steps above the bar rather than sitting under it */
.buybar.is-visible ~ .chat-fab {
  bottom: calc(var(--space-24) + var(--buybar-height));
}

/* ==========================================================================
   LONG-FORM LEGAL / INFO PAGES
   Terms, shipping and policy copy — headings carry no margin anywhere in this
   project, so the rhythm here comes from nested flex gaps.
   ========================================================================== */
.legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
  width: 100%;
}

.legal__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
  scroll-margin-top: var(--space-32);
}

.legal__title {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-12);
  font-size: var(--fs-h4);
}

.legal__num {
  flex: none;
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  color: var(--color-gold-500);
}

.legal__sub {
  font-size: var(--fs-h5);
  color: var(--color-cream);
}

.legal__block p {
  font-size: var(--fs-15);
  line-height: var(--lh-loose);
  color: var(--color-muted);
}

/* the block spans the full container, but a line of body copy stops being
   readable long before that, so the text itself keeps a sane measure */
.legal__block > p,
.legal__block > .ticks { max-width: 78ch; }

/* the sign-off line under the last block */
.legal__meta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-24);
  width: 100%;
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* the jump list rides alongside the copy as a sticky sidebar, so a reader
   part-way down a ten-section policy can still see where they are */
.legal-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-48);
  width: 100%;
}

.legal-layout > .legal { flex: 1 1 auto; min-width: 0; }

.legal-toc {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  flex: 0 0 260px;
  position: sticky;
  top: var(--space-24);
  padding: var(--space-24);
  background: var(--color-gold-wash);
  background-image: linear-gradient(90deg, transparent, var(--color-line), transparent);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: top center;
  clip-path: var(--shape-bevel);
}

.legal-toc__title {
  font-family: var(--font-ui);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-gold-500);
}

.legal-toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
  list-style: none;
}

.legal-toc__link {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-13);
  color: var(--color-muted);
  transition: color 150ms ease;
}

.legal-toc__link:hover,
.legal-toc__link:focus-visible { color: var(--color-gold-500); }


/* ---------- Artists index ---------- */
/* the category grid is a fixed five-across that turns into a swipe rail on
   small screens; an A-Z index of 36 artists wants to stay a grid and simply
   reflow, so it gets its own track sizing and reuses the tile internals. */
.artist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-32) var(--space-24);
  width: 100%;
}

.artist-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  width: 100%;
  scroll-margin-top: var(--space-32);
}

.artist-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  width: 100%;
}

/* the source artwork comes in every aspect ratio going; a fixed crop keeps
   the rows reading as one grid rather than a ragged collage */
.artist-grid .category-tile__media { width: 100%; }

.artist-grid .category-tile__image {
  aspect-ratio: 3 / 4;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.artist-tile__count {
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-gold-500);
}

/* ---------- Contact page ---------- */
/* the details sit beside the form on desktop and stack above it on narrow
   screens, so the quickest route (a plain email) is always reachable first */
.contact__row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-32);
  width: 100%;
}

.contact__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  flex: 0 0 380px;
  position: sticky;
  top: var(--space-24);
}

.contact-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  padding: var(--space-20);
  background-color: var(--color-gold-wash);
  clip-path: var(--shape-bevel);
  transition: background-color var(--transition-fast);
}

.contact-card:hover,
.contact-card:focus-visible { background-color: var(--color-glow); }

.contact-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.contact-card__title {
  font-family: var(--font-ui);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-gold-500);
}

.contact-card__value {
  font-size: var(--fs-14);
  color: var(--color-cream);
  overflow-wrap: break-word;
}

/* .panel is a two-column row by default; the form stacks its own children */
.panel--form {
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-32);
  min-width: 0;
  padding: var(--space-48) var(--space-40);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  width: 100%;
}

.contact-form__row {
  display: flex;
  flex-direction: row;
  gap: var(--space-20);
  width: 100%;
}

.contact-form__row > .field { flex: 1 1 0; min-width: 0; }

.contact-form__foot {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  width: 100%;
}

/* ---------- About : founder story panel ---------- */
/* the gap above the story sits on the section, so it reads as space between
   the page head and the card rather than as room inside the card */
.section--story { padding-top: var(--space-64); }

/* a single portrait does not need to hold half the row */
.panel--story .why__media { flex: 0 0 300px; }

.panel--story .why__frame { aspect-ratio: var(--ratio-category); }


/* ---------- Captioned image ---------- */
.figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
}

.figure__caption {
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-dim);
}

/* ---------- Inline link inside body copy ---------- */
/* .link-gold is a standalone uppercase call-to-action; inside a sentence it
   needs to keep the paragraph's size and casing instead. */
.link-inline {
  color: var(--color-gold-500);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--color-line);
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.link-inline:hover,
.link-inline:focus-visible {
  color: var(--color-gold-300);
  text-decoration-color: currentColor;
}

/* a standalone note inside a policy block should not stretch to the column */
.legal__block > .pill {
  align-self: flex-start;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-20);
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}