/* ==========================================================================
   RECYCLOMEDIA — Art Deco storefront
   Black lacquer, gold leaf and jewel tones. Crisp geometry, double rules,
   geometric ornament. No rounded pills, no photographic gradients.
   ========================================================================== */

:root {
  /* ── Lacquer grounds ─────────────────────────────────────────────────── */
  --lacquer: #0a0a0c;
  --lacquer-2: #0e0e13;
  --lacquer-3: #131319;
  --surface: #14141b;
  --surface-2: #1b1b24;
  --black: #07070a;

  /* ── Gold leaf ───────────────────────────────────────────────────────── */
  --gold: #d4af37;
  --gold-hi: #f4e2a1;
  --gold-lo: #8d6f1d;
  --gold-deep: #5c4713;

  --line: rgba(212, 175, 55, 0.26);
  --line-soft: rgba(212, 175, 55, 0.13);
  --line-strong: rgba(212, 175, 55, 0.6);

  /* ── Ink ─────────────────────────────────────────────────────────────── */
  --cream: #f7f0dc;
  --cream-2: #d6cdb2;
  --muted: #9c947c;
  --muted-2: #6d6858;

  /* ── Jewels ──────────────────────────────────────────────────────────── */
  --burgundy: #93314a;
  --emerald: #1f7a52;
  --sapphire: #2f66ad;
  --garnet: #a8443a;

  /* ── Type ────────────────────────────────────────────────────────────── */
  --font-display: "Josefin Sans", "Futura", "Century Gothic", "URW Gothic", "Avenir Next",
    "Trebuchet MS", system-ui, sans-serif;
  --font-deco: "Poiret One", "Josefin Sans", "Futura", "Century Gothic", system-ui, sans-serif;

  --wrap: 1240px;

  /* ── Card surface ────────────────────────────────────────────────────────
     The plate a poster is mounted on. Deliberately lighter than the page
     ground: at `--lacquer` levels the body read as a black hole beside a
     bright photograph, so the artwork looked pasted on rather than mounted in
     a frame. Warm-neutral, following the house ratio (blue six steps up). */
  --card-bg-1: #21212b;
  --card-bg-2: #181820;
  /* Secondary text reading on a lighter ground — cards, rating figures. */
  --muted-hi: #a8a08a;

  --shadow: 0 26px 60px rgba(0, 0, 0, 0.65);
  --shadow-sm: 0 12px 28px rgba(0, 0, 0, 0.5);

  /* ── Header chrome ───────────────────────────────────────────────────────
     The header keeps its design but retints to the page it frames: a themed
     page overrides these from `setChromePalette()` in `public/js/ui.js`.
     These are the house defaults, so an unthemed page looks as it always did. */
  --header-bg: rgba(10, 10, 12, 0.94);
  --header-well: #0b0b0f;
  --header-panel: #0c0c11;
  --header-panel-2: #08080b;
  --header-band: #07070a;
  --header-accent: #d4af37;
  --header-accent-hi: #f4e2a1;
  --header-accent-lo: #8d6f1d;
  --header-line: rgba(212, 175, 55, 0.26);
  --header-line-soft: rgba(212, 175, 55, 0.13);
  --header-link: #d6cdb2;
  --header-ink: #f7f0dc;

  /* ── Footer chrome ───────────────────────────────────────────────────────
     The footer is themed on the same terms as the header: one
     `chromePalette()` call in `public/js/ui.js` retints both bands. These are
     the house defaults — each one the token the footer already used — so an
     unthemed page's footer is unchanged. */
  --footer-bg: var(--lacquer-2);
  --footer-band: var(--black);
  --footer-accent: var(--gold);
  --footer-accent-hi: var(--gold-hi);
  --footer-heading: var(--gold);
  --footer-line-soft: var(--line-soft);
  --footer-text: var(--muted);
  --footer-link: var(--muted);
  --footer-link-hi: var(--gold);
  --footer-text-soft: var(--muted-2);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--lacquer);
  background-image:
    radial-gradient(1100px 620px at 50% -12%, rgba(212, 175, 55, 0.075), transparent 66%),
    radial-gradient(700px 420px at 8% 30%, rgba(47, 102, 173, 0.05), transparent 70%),
    radial-gradient(700px 420px at 92% 62%, rgba(147, 49, 74, 0.05), transparent 70%);
  background-attachment: fixed;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Fine gold hairline texture, like laid paper */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(212, 175, 55, 0.022) 0 1px,
    transparent 1px 4px
  );
}

body > * {
  position: relative;
  z-index: 1;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
}

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

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

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 22px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  background: var(--gold);
  color: var(--black);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.skip-link:focus {
  left: 0;
}

/* ==========================================================================
   Deco ornament primitives
   ========================================================================== */

/* Chevron / diaper frieze band */
.deco-band {
  height: 11px;
  background-color: var(--black);
  background-image:
    repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.8) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(212, 175, 55, 0.8) 0 1px, transparent 1px 7px);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
}

.deco-band--thin {
  height: 7px;
  border-top: 0;
}

.deco-band--top {
  border-top: 0;
  /* The crown moulding above the header belongs to the header chrome, so it
     takes the same era palette. The footer has its own band class, themed the
     same way; the drawer's thin band stays house gold, sitting on a surface
     that is never themed. */
  background-color: var(--header-band, var(--black));
  background-image:
    repeating-linear-gradient(
      45deg,
      color-mix(in srgb, var(--header-accent) 80%, transparent) 0 1px,
      transparent 1px 7px
    ),
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--header-accent) 80%, transparent) 0 1px,
      transparent 1px 7px
    );
  border-bottom-color: var(--header-accent);
}

/* The footer's band, taking the footer's half of the same chrome palette. */
.deco-band--foot {
  border-top: 0;
  background-color: var(--footer-band);
  background-image:
    repeating-linear-gradient(
      45deg,
      color-mix(in srgb, var(--footer-accent) 80%, transparent) 0 1px,
      transparent 1px 7px
    ),
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--footer-accent) 80%, transparent) 0 1px,
      transparent 1px 7px
    );
  border-bottom-color: var(--footer-accent);
}

/* Centered rule with a diamond at its heart */
.deco-orn {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
  max-width: 460px;
}
.deco-orn span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.deco-orn span:last-child {
  background: linear-gradient(270deg, transparent, var(--gold));
}
.deco-orn i {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  transform: rotate(45deg);
  border: 1px solid var(--gold);
  background: rgba(212, 175, 55, 0.22);
}

/* ==========================================================================
   Buttons — sharp gold-leaf plates
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 15px 28px;
  border: 1px solid var(--gold-lo);
  background: linear-gradient(180deg, #16161e, #0c0c11);
  color: var(--gold-hi);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease,
    transform 0.22s ease;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  pointer-events: none;
  transition: border-color 0.22s ease;
}

.btn:hover {
  color: var(--black);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 62%, var(--gold-lo));
  border-color: var(--gold-hi);
  transform: translateY(-1px);
}
.btn:hover::after {
  border-color: rgba(7, 7, 10, 0.4);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  color: var(--black);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 58%, var(--gold-lo));
  border-color: var(--gold-hi);
}
.btn-primary::after {
  border-color: rgba(7, 7, 10, 0.35);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #fff3c8, var(--gold-hi));
}

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--cream-2);
}
.btn-ghost:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: var(--gold);
  color: var(--gold-hi);
}

.btn-danger {
  background: transparent;
  border-color: rgba(168, 68, 58, 0.6);
  color: #dba199;
}
.btn-danger:hover {
  background: rgba(168, 68, 58, 0.16);
  border-color: var(--garnet);
  color: #f0c3bc;
}

.btn-sm {
  padding: 10px 16px;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
}
.btn-sm::after {
  inset: 3px;
}
.btn-block {
  width: 100%;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--gold);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.icon-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}
.icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  /* One height drives both the header row and the logo plate, so the logo
     always fills the header edge to edge. */
  --header-h: 112px;
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--header-h);
  /* The logo plate is full-bleed: it hangs off the left edge of the page
     rather than sitting inside the centred column. */
  max-width: none;
  padding-left: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  flex-shrink: 0;
}

.brand-logo {
  display: block;
  height: var(--header-h);
  width: auto;
  /* The poster carries its own ground; a gold hairline mounts it like an
     enamel plaque in the black lacquer header. */
  border: 1px solid var(--header-line);
  border-left: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.brand:hover .brand-logo,
.brand:focus-visible .brand-logo {
  border-color: var(--header-accent);
  box-shadow: 0 0 0 1px var(--header-line);
}

/* Decade rail — chamfered plaques with a double hairline, strung on a row of
   gold lozenges like the letter board over a picture palace. */
.decade-nav {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.decade-nav::-webkit-scrollbar {
  display: none;
}

.decade-nav a {
  position: relative;
  flex: 0 0 auto;
  padding: 8px 6px;
  border: 1px solid var(--header-line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--header-accent) 9%, transparent), transparent 58%),
    var(--header-well);
  color: var(--header-link);
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  /* Chamfered corners: the cut is what makes it read as a Deco plaque. */
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

/* Inner hairline — the double frame. */
.decade-nav a::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--header-line-soft);
  pointer-events: none;
  transition: border-color 0.18s ease;
}

/* Lozenge between plaques. */
.decade-nav a + a {
  margin-left: 10px;
}
.decade-nav a + a::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 4px;
  height: 4px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--header-line);
  transition: background 0.18s ease;
}

.decade-nav a:hover {
  border-color: var(--header-accent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--header-accent) 24%, transparent), transparent 62%),
    color-mix(in srgb, var(--header-accent) 10%, transparent);
  color: var(--header-accent-hi);
}
.decade-nav a:hover::before {
  border-color: var(--header-accent-lo);
}
.decade-nav a:hover::after {
  background: var(--header-accent);
}

.decade-nav a[aria-current="page"] {
  border-color: var(--header-accent-hi);
  background: linear-gradient(180deg, var(--header-accent-hi), var(--header-accent) 58%, var(--header-accent-lo));
  color: var(--black);
}
.decade-nav a[aria-current="page"]::before {
  border-color: rgba(10, 10, 12, 0.4);
}
.decade-nav a[aria-current="page"]::after {
  background: var(--header-accent-hi);
}

.brand-text {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap;
}
.brand-text em {
  font-style: normal;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.search {
  display: flex;
  align-items: center;
  margin-left: auto;
  min-width: 208px;
  padding: 3px 3px 3px 15px;
  background: var(--header-well);
  border: 1px solid var(--header-line);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search:focus-within {
  border-color: var(--header-accent);
  box-shadow: 0 0 0 1px var(--header-line);
}
.search input {
  flex: 1;
  min-width: 0;
  /* Josefin Sans draws its capitals above the ascent the font declares, so a
     symmetric padding leaves the placeholder sitting high and looking clipped.
     The extra pixel on top puts the caps back in the middle of the field. */
  padding: 10px 0 8px;
  background: none;
  border: 0;
  outline: none;
  font-family: var(--font-display);
  font-size: 0.7rem;
  /* The body's 1.65 leading is far too loose at this size: it pushes the caps
     against the top of the field. Hug the glyphs and let the padding centring. */
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
}
.search input::placeholder {
  color: var(--muted-2);
}
.search button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--header-accent-lo);
  background: transparent;
  color: var(--header-accent);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.search button:hover {
  background: var(--header-accent);
  color: var(--black);
}

/* ── Compte ───────────────────────────────────────────────────────────────
   Same plate as the cart control, so the two right-hand buttons read as a
   pair. The silhouette is a bust — a Deco portrait medallion as much as a
   sign-in — and the head fills with light on hover, the way the doorway of the
   house it replaced used to. */
.account-button {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  padding: 12px 17px;
  border: 1px solid var(--header-line);
  background: transparent;
  color: var(--header-accent);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.account-button:hover,
.account-button:focus-visible {
  border-color: var(--header-accent);
  background: color-mix(in srgb, var(--header-accent) 9%, transparent);
}
.account-button[aria-current="page"] {
  border-color: var(--header-accent);
  background: color-mix(in srgb, var(--header-accent) 15%, transparent);
  color: var(--header-accent-hi);
}

.account-button svg {
  flex-shrink: 0;
  /* The lift nudges past the 18px box. */
  overflow: visible;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.account-button:hover svg,
.account-button:focus-visible svg {
  transform: translateY(-1.5px);
}
.account-head {
  fill: transparent;
  transition: fill 0.3s ease;
}
.account-button:hover .account-head,
.account-button:focus-visible .account-head {
  fill: var(--header-accent);
}
.account-button[aria-current="page"] .account-head {
  fill: var(--header-accent-lo);
}

/* A signed-in shopper: the plate carries their name, so it reads as theirs. */
.account-button.is-signed-in .account-button-label {
  letter-spacing: 0.16em;
}

.cart-button {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  padding: 12px 17px;
  border: 1px solid var(--header-line);
  background: transparent;
  color: var(--header-accent);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.cart-button:hover {
  border-color: var(--header-accent);
  background: color-mix(in srgb, var(--header-accent) 9%, transparent);
}

/* ── Cart trolley ─────────────────────────────────────────────────────────
   Reaching for the cart sets the trolley off: it leans into the push, hops
   forward, and both wheels take a small bump on a stagger. Deliberately no
   outline redraw — a cart that empties itself mid-hover reads as a bug. */

.cart-button svg {
  flex-shrink: 0;
  /* The lean pushes past the 18px box; without this the corners get clipped. */
  overflow: visible;
}

.cart-button:hover svg,
.cart-button:focus-visible svg {
  animation: cart-trundle 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cart-button:hover svg circle,
.cart-button:focus-visible svg circle {
  animation: cart-bump 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.cart-button:hover svg circle:nth-of-type(2),
.cart-button:focus-visible svg circle:nth-of-type(2) {
  animation-delay: 0.07s;
}

@keyframes cart-trundle {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  28% {
    transform: translate(-2.5px, -1px) rotate(-6deg);
  }
  62% {
    transform: translate(1.5px, 0.5px) rotate(2.5deg);
  }
  84% {
    transform: translate(-0.5px, 0) rotate(-1deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes cart-bump {
  0% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-1.2px);
  }
  100% {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Same specificity as the hover rules above, or they would still win. */
  .cart-button:hover svg,
  .cart-button:focus-visible svg,
  .cart-button:hover svg circle,
  .cart-button:focus-visible svg circle {
    animation: none;
  }
}
.cart-count {
  min-width: 21px;
  padding: 2px 6px;
  background: var(--header-accent);
  color: var(--black);
  font-size: 0.62rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.04em;
}

/* Two-row header: wordmark row, then a decorative nav frieze */
.nav-strip {
  border-top: 1px solid var(--header-line-soft);
  border-bottom: 1px solid var(--header-line);
  background: linear-gradient(180deg, var(--header-panel), var(--header-panel-2));
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.main-nav a {
  position: relative;
  padding: 14px 22px;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--header-link);
  transition: color 0.2s ease;
}
.main-nav a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  transform: rotate(45deg);
  background: var(--header-accent-lo);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 8px;
  height: 1px;
  background: var(--header-accent);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.main-nav a:hover {
  color: var(--header-accent-hi);
}
.main-nav a:hover::after {
  transform: scaleX(1);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding: 78px 0 66px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0d0d12, var(--lacquer));
}

/* Radiating gold sunburst, masked to the upper half */
.hero-rays {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 180%;
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  pointer-events: none;
  background: repeating-conic-gradient(
    from -90deg at 50% 100%,
    rgba(212, 175, 55, 0.16) 0deg 0.45deg,
    transparent 0.45deg 5deg
  );
  -webkit-mask-image: radial-gradient(120% 100% at 50% 100%, #000 0 54%, transparent 80%);
  mask-image: radial-gradient(120% 100% at 50% 100%, #000 0 54%, transparent 80%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
}

.eyebrow {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero h1 {
  font-family: var(--font-deco);
  font-size: clamp(2.4rem, 6vw, 4.3rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.08;
  color: var(--cream);
  margin-bottom: 22px;
}

.hero-copy {
  max-width: 62ch;
  margin: 0 0 30px;
  font-size: 1rem;
  font-weight: 300;
  color: var(--cream-2);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
.hero-stat {
  padding: 0 38px;
  border-left: 1px solid var(--line-soft);
}
.hero-stat:first-child {
  padding-left: 0;
  border-left: 0;
}
.hero-stat strong {
  display: block;
  font-family: var(--font-deco);
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gold);
}
.hero-stat span {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   Shelves
   ========================================================================== */

.shelf {
  padding: 58px 0 6px;
  --shelf-accent: var(--gold);
}

.shelf-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
  padding-bottom: 20px;
}

/* Gold rule with a centered diamond under each shelf heading */
.shelf-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background:
    linear-gradient(90deg, var(--shelf-accent), transparent 62%) 0 0 / 100% 1px no-repeat,
    linear-gradient(90deg, var(--shelf-accent), transparent 62%) 0 3px / 100% 1px no-repeat;
  opacity: 0.5;
}

.shelf-head h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
}

.shelf-head p {
  margin: 9px 0 0;
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--muted);
}

.link-more {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--shelf-accent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.link-more:hover {
  color: var(--gold-hi);
  border-bottom-color: var(--gold);
}

.shelf--gold {
  --shelf-accent: var(--gold);
}
.shelf--crimson {
  --shelf-accent: var(--burgundy);
}
.shelf--teal {
  --shelf-accent: var(--emerald);
}
.shelf--violet {
  --shelf-accent: var(--sapphire);
}

/* ==========================================================================
   Product grid
   ========================================================================== */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 26px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--card-bg-1), var(--card-bg-2));
  border: 1px solid var(--line);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Inner hairline — the double-rule frame of a period plate.
   A touch stronger than before: on the lighter plate the old value faded out. */
.card::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 4;
  border: 1px solid rgba(212, 175, 55, 0.18);
  pointer-events: none;
}

.card:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(212, 175, 55, 0.3);
}

.card-cover {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

/* ── Cover art: geometric poster ─────────────────────────────────────── */

.cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--gold-hi);
  background: linear-gradient(165deg, var(--mid, #22224a) 0%, var(--deep, #141428) 58%, #050507 100%);
}

/* Gold sunburst behind the emblem */
.cover::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 190%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(212, 175, 55, 0.22) 0deg 0.5deg,
    transparent 0.5deg 6deg
  );
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 26%, transparent 58%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 26%, transparent 58%);
}

/* Real cover artwork, mounted inside the gold frieze. */
.cover-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.94) contrast(1.03);
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Hovering the plate draws the artwork a little closer, as though the frame
   were tilted towards the light. Frieze, format tag and medallion hold still,
   so the poster moves *inside* its mount rather than with it. */
.card:hover .cover-img,
.card:focus-within .cover-img,
.line-cover:hover .cover-img,
.line-cover:focus-visible .cover-img {
  transform: scale(1.07);
  filter: saturate(1.03) contrast(1.05) brightness(1.05);
}

.cover-frieze {
  position: absolute;
  left: 0;
  right: 0;
  height: 9px;
  z-index: 2;
  background-image:
    repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.75) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(212, 175, 55, 0.75) 0 1px, transparent 1px 7px);
}
.cover-frieze--top {
  top: 0;
  border-bottom: 1px solid rgba(212, 175, 55, 0.55);
}
.cover-frieze--bottom {
  bottom: 0;
  border-top: 1px solid rgba(212, 175, 55, 0.55);
}

/* Rotated square emblem holding the monogram */
.cover-plate {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 46%;
  max-width: 94px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(212, 175, 55, 0.9);
  background: rgba(5, 5, 8, 0.6);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 24px rgba(212, 175, 55, 0.14), 0 0 0 1px rgba(212, 175, 55, 0.16);
}
.cover-plate::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(212, 175, 55, 0.45);
}

.cover-mono {
  transform: rotate(-45deg);
  font-family: var(--font-deco);
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--gold-hi);
  text-shadow: 0 0 18px rgba(212, 175, 55, 0.5);
}

.cover-format {
  position: absolute;
  left: 50%;
  top: 17px;
  z-index: 3;
  transform: translateX(-50%);
  padding: 3px 10px;
  border: 1px solid rgba(212, 175, 55, 0.55);
  background: rgba(5, 5, 8, 0.65);
  font-family: var(--font-display);
  font-size: 0.53rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

/* Serial run band: a box-set spine across the foot of the artwork, so a run of
   chapters reads differently from a single film at a glance. */
.cover-run {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 6px 10px 7px;
  border-top: 1px solid rgba(212, 175, 55, 0.5);
  background: linear-gradient(180deg, rgba(5, 5, 8, 0.55), rgba(5, 5, 8, 0.9));
  font-family: var(--font-display);
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold-hi);
}

/* ── Badges ──────────────────────────────────────────────────────────── */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}

.badge {
  padding: 4px 7px;
  border: 1px solid var(--gold);
  background: rgba(6, 6, 9, 0.88);
  color: var(--gold-hi);
  font-family: var(--font-display);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge--new {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}
.badge--release {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--black);
}
.badge--vintage {
  background: rgba(147, 49, 74, 0.94);
  border-color: rgba(212, 175, 55, 0.75);
  color: var(--cream);
}
.badge--used {
  background: rgba(6, 6, 9, 0.88);
  color: var(--gold);
}
/* A serial announces itself: the shop's other shelves are films, so the type is
   the one thing worth stating on the card itself. */
.badge--series {
  background: rgba(47, 102, 173, 0.9);
  border-color: rgba(212, 175, 55, 0.7);
  color: var(--cream);
}
.badge--out {
  background: rgba(6, 6, 9, 0.9);
  border-color: rgba(255, 255, 255, 0.18);
  color: #8b8677;
}

/* ── Card body ───────────────────────────────────────────────────────── */

.card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  padding: 16px 16px 18px;
}

.card-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--cream);
  transition: color 0.2s ease;
}
.card-title:hover {
  color: var(--gold);
}

.card-meta {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--muted-hi);
}

/* The maker, on every card that has one. Doubles as a search entry point:
   clicking a director lists everything else they signed. */
.card-creator {
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--muted);
  transition: color 0.2s ease;
}
.card-creator:hover,
.card-creator:focus-visible {
  color: var(--gold-hi);
}

/* The run line only ever appears on a serial, right under the category. */
.card-run {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

/* A serial is a set, so its plate is double-ruled — the inner frame of a
   period box, where a single film keeps the single rule. */
.card--series::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 4;
  border: 1px solid rgba(212, 175, 55, 0.1);
  pointer-events: none;
}

/* ── Creator lines (title plate, arrival page) ───────────────────────── */

.detail-creator,
.feat-creator,
.mm-creator {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.detail-creator {
  margin-bottom: 6px;
  font-size: 0.6rem;
}
.mm-creator {
  margin: 0 0 12px;
  color: var(--muted-2);
}
.detail-creator a,
.feat-creator a {
  color: var(--gold);
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.detail-creator a:hover,
.feat-creator a:hover {
  color: var(--gold-hi);
  border-bottom-color: var(--gold);
}
/* Inside the era-dressed hero the link belongs to the era. */
.feat-hero .feat-creator a {
  color: var(--era-accent-2);
}
.feat-hero .feat-creator a:hover {
  border-bottom-color: var(--era-accent);
}

.page-head-actions {
  margin: 16px 0 0;
}

.stars {
  margin: 2px 0 0;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.stars span {
  margin-left: 6px;
  letter-spacing: 0.04em;
  color: var(--muted-hi);
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.price {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-hi);
}
.price-was {
  margin-left: 8px;
  font-size: 0.74rem;
  color: var(--muted-2);
  text-decoration: line-through;
}

/* ==========================================================================
   Page heads, breadcrumbs
   ========================================================================== */

.page-head {
  padding: 44px 0 30px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--line-soft);
}

.page-head h1 {
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
}

.page-head p {
  max-width: 70ch;
  margin: 12px 0 0;
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--muted);
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.crumbs a:hover {
  color: var(--gold);
}

/* ==========================================================================
   Browse layout
   ========================================================================== */

.browse {
  display: grid;
  grid-template-columns: 262px 1fr;
  gap: 40px;
  align-items: start;
  padding-bottom: 70px;
}

.filters {
  /* The offset doubles as the viewport budget: with every category listed the
     sidebar grows taller than the screen, so it scrolls inside itself. */
  --filters-offset: 184px;
  position: sticky;
  top: var(--filters-offset);
  max-height: calc(100vh - var(--filters-offset) - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  padding: 26px 22px;
  background: linear-gradient(180deg, var(--lacquer-3), var(--lacquer-2));
  border: 1px solid var(--line);
}

.filters::-webkit-scrollbar {
  width: 6px;
}
.filters::-webkit-scrollbar-track {
  background: transparent;
}
.filters::-webkit-scrollbar-thumb {
  background: var(--line);
}
.filters::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

.filters h2 {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}

.filter-group {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.filter-group:last-of-type {
  border-bottom: 0;
  margin-bottom: 6px;
}

.filter-group h3 {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Multi-choice variant: one option per row, ornament box on the left. */
.filter-options--stack {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 1px;
}

.filter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.filter-clear {
  font-family: var(--font-display);
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.filter-clear:hover {
  color: var(--gold-hi);
  border-color: var(--gold);
}

.check {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border: 1px solid transparent;
  color: var(--cream-2);
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.check:hover {
  border-color: var(--line);
  color: var(--gold-hi);
}
.check input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1px solid var(--line);
  background: #0b0b0f;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.check input::after {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--black);
  transform: rotate(45deg) scale(0);
  transition: transform 0.16s ease;
}
.check input:checked {
  background: var(--gold);
  border-color: var(--gold);
}
.check input:checked::after {
  transform: rotate(45deg) scale(1);
}
.check input:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 2px;
}
.check:has(input:checked) {
  border-color: var(--line-soft);
  background: rgba(212, 175, 55, 0.08);
  color: var(--gold-hi);
}
.check-count {
  margin-left: auto;
  color: var(--muted-2);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.chip {
  padding: 6px 11px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--cream-2);
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.chip:hover {
  border-color: var(--gold);
  color: var(--gold-hi);
}
.chip[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}

/* ── Price range: histogram above a dual-thumb slider ────────────────── */

.price-chart {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 56px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.price-bar {
  flex: 1 1 0;
  min-width: 0;
  height: max(2px, calc(var(--h, 0) * 100%));
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
/* Bars outside the selected span fade back. */
.price-bar.is-out {
  opacity: 0.18;
}

.price-slider {
  position: relative;
  height: 26px;
}

.price-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--line);
}
.price-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--gold);
}

/* Two stacked range inputs. Only the thumbs take pointer events, so the
   lower input stays reachable everywhere else along the track. */
.price-slider input[type="range"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 26px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.price-slider input[type="range"]:focus {
  outline: none;
}
.price-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 26px;
  background: transparent;
  border: 0;
}
.price-slider input[type="range"]::-moz-range-track {
  height: 26px;
  background: transparent;
  border: 0;
}

/* Square gold thumbs, squared off like the rest of the shop. */
.price-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 13px;
  height: 13px;
  margin-top: 6.5px;
  border: 1px solid var(--gold-hi);
  background: var(--gold);
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.price-slider input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.22);
}
.price-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 12px;
  height: 12px;
  border-radius: 0;
  border: 1px solid var(--gold-hi);
  background: var(--gold);
  cursor: grab;
}
.price-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.35);
}

.price-readout {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--gold);
}

.select {
  width: 100%;
  padding: 10px 12px;
  background: #0b0b0f;
  border: 1px solid var(--line);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}
.select:focus {
  border-color: var(--gold);
}

.results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}

.results-count {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.results-count strong {
  color: var(--gold);
}
.results-bar .select {
  width: auto;
  min-width: 210px;
}

/* ── Pagination ──────────────────────────────────────────────────────── */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 44px 0 20px;
}
.pagination a,
.pagination span {
  min-width: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  color: var(--cream-2);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
}
.pagination a:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.pagination .is-current {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}
.pagination .is-disabled {
  opacity: 0.32;
}

/* ==========================================================================
   Empty & loading states
   ========================================================================== */

.empty {
  padding: 76px 26px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(19, 19, 25, 0.6), transparent);
  text-align: center;
  color: var(--muted);
}
.empty h3 {
  margin-bottom: 10px;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
}
.empty p {
  margin: 0 auto 18px;
  max-width: 52ch;
  font-size: 0.9rem;
  font-weight: 300;
}

/* Nearby alternatives offered when a filter combination finds nothing. */
.suggestions {
  margin-top: 38px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}

.suggestions-title {
  margin-bottom: 24px;
  font-family: var(--font-deco);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--gold);
}

.suggestion + .suggestion {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}

.suggestion-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.suggestion-head p {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-2);
}

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 26px;
}
.skeleton {
  background: linear-gradient(
    100deg,
    var(--lacquer-3) 28%,
    rgba(212, 175, 55, 0.09) 50%,
    var(--lacquer-3) 72%
  );
  background-size: 220% 100%;
  border: 1px solid var(--line-soft);
  animation: deco-shimmer 1.5s infinite linear;
}
.skeleton-card {
  height: 348px;
}
@keyframes deco-shimmer {
  to {
    background-position: -220% 0;
  }
}

/* ==========================================================================
   Product detail
   ========================================================================== */

.detail {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 52px;
  padding-bottom: 70px;
}

.detail-cover {
  position: sticky;
  top: 192px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.detail-cover .cover-plate {
  width: 48%;
  max-width: 172px;
}
.detail-cover .cover-mono {
  font-size: 3.2rem;
}
.detail-cover .cover-format {
  font-size: 0.62rem;
  top: 26px;
}
.detail-cover .cover-frieze {
  height: 13px;
}

.detail h1 {
  margin: 14px 0 16px;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--cream);
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.detail-meta > span:not(.badge) {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.dot::before {
  content: "◆";
  margin-right: 12px;
  font-size: 0.5rem;
  color: var(--gold-lo);
}

.detail-price {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 24px 0 10px;
}
.detail-price .price {
  font-family: var(--font-deco);
  font-size: 2.4rem;
  color: var(--gold);
}

.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 0;
  margin: 30px 0;
  background: var(--lacquer-2);
  border: 1px solid var(--line);
}
.spec {
  padding: 15px 18px;
  background: var(--lacquer-2);
  /* Outlines (not gaps) draw the rules, so unfilled cells stay invisible
     instead of exposing a tinted background block. */
  outline: 1px solid var(--line-soft);
}

/* The product plate always carries six specs — lay them out 3 × 2 so the
   grid fills exactly, with no orphaned cells. */
.detail .specs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 940px) {
  .detail .specs {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}
.spec dt {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.spec dd {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--cream);
}

.buy-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 22px;
  background: linear-gradient(180deg, var(--lacquer-3), var(--lacquer-2));
  border: 1px solid var(--line);
}

.qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
}
.qty button {
  width: 40px;
  height: 46px;
  border: 0;
  background: none;
  color: var(--gold);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.qty button:hover:not(:disabled) {
  background: rgba(212, 175, 55, 0.14);
}
.qty button:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}
.qty span {
  min-width: 44px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.prose {
  max-width: 72ch;
  color: var(--cream-2);
  font-size: 0.94rem;
  font-weight: 300;
}
.prose p {
  margin: 0 0 14px;
}

/* ==========================================================================
   Era ambiance — decade × genre atmosphere
   --------------------------------------------------------------------------
   Structure, typography and the gold rules never move. Only the ground wash,
   the accent hue, the sunburst tint and the texture motif change, so the shop
   keeps its Art Deco identity while the mood tracks the period and the genre.

   Shared by title plates (.detail-scene) and decade portals (.decade-portal).
   ========================================================================== */

.detail-scene,
.decade-portal {
  position: relative;
  isolation: isolate;
  /* The centrepiece motif is 118% wide so it can bleed past both edges. Clip it
     here or it widens the document and a horizontal scrollbar appears. Nothing
     inside is sticky, so `hidden` costs nothing. */
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 80% 6%, var(--era-wash-1, transparent), transparent 62%),
    radial-gradient(780px 480px at 4% 44%, var(--era-wash-2, transparent), transparent 66%),
    linear-gradient(180deg, var(--era-ground, transparent) 0%, transparent 46%);
}

.detail-scene {
  padding-bottom: 30px;
}

.decade-portal {
  padding-bottom: 70px;
}

/* The ornament motif: drawn, never an image. Sits behind the content. */
.era-atmos {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
  background-repeat: repeat;
}

/* ── Per-decade motifs ──────────────────────────────────────────────────
   Each decade stacks several layers: a light bloom, one or two structural
   motifs and a fine texture, so the ground has real depth instead of a single
   flat pattern. Every layer is drawn — no images ship with the site.        */

/* 1910s & 1920s — sunburst, double pinstripe lattice */
.era-1910s .era-atmos,
.era-1920s .era-atmos,
.era-timeless .era-atmos {
  background-image:
    radial-gradient(120% 78% at 50% 106%, var(--era-wash-1), transparent 62%),
    repeating-conic-gradient(
      from -90deg at 50% 100%,
      var(--era-texture-color) 0 0.4deg,
      transparent 0.4deg 4.5deg
    ),
    repeating-linear-gradient(0deg, var(--era-texture-color) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, var(--era-texture-color) 0 1px, transparent 1px 10px);
  background-size: 100% 100%, 100% 100%, 100% 10px, 10px 100%;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  opacity: 0.62;
}

/* 1930s — fan arcs, ziggurat steps, fine dot matrix */
.era-1930s .era-atmos {
  background-image:
    radial-gradient(110% 70% at 50% 112%, var(--era-wash-1), transparent 60%),
    repeating-radial-gradient(
      circle at 50% 118%,
      var(--era-texture-color) 0 1px,
      transparent 1px 24px
    ),
    repeating-linear-gradient(0deg, var(--era-texture-color) 0 1px, transparent 1px 34px),
    radial-gradient(circle, var(--era-texture-color) 0 1px, transparent 1.4px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 22px 22px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  opacity: 0.6;
}

/* 1940s — crossed venetian blinds, sparse vertical slats */
.era-1940s .era-atmos {
  background-image:
    radial-gradient(80% 60% at 50% 0%, var(--era-wash-1), transparent 66%),
    repeating-linear-gradient(115deg, var(--era-texture-color) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(65deg, var(--era-texture-color) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, var(--era-texture-color) 0 1px, transparent 1px 124px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat, repeat, repeat, repeat;
  opacity: 0.55;
}

/* 1950s — halftone dots, concentric rings, atomic rays */
.era-1950s .era-atmos {
  background-image:
    radial-gradient(100% 70% at 50% 50%, var(--era-wash-1), transparent 68%),
    radial-gradient(circle, var(--era-texture-color) 0 1.4px, transparent 2px),
    repeating-radial-gradient(
      circle at 50% 50%,
      var(--era-texture-color) 0 1px,
      transparent 1px 30px
    ),
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      var(--era-texture-color) 0 0.4deg,
      transparent 0.4deg 12deg
    );
  background-size: 100% 100%, 18px 18px, 100% 100%, 100% 100%;
  background-repeat: no-repeat, repeat, no-repeat, no-repeat;
  opacity: 0.58;
}

/* 1960s — wide op-art rings, diagonal banding, halftone */
.era-1960s .era-atmos {
  background-image:
    radial-gradient(90% 70% at 50% 46%, var(--era-wash-1), transparent 68%),
    repeating-radial-gradient(
      circle at 50% 46%,
      var(--era-texture-color) 0 3px,
      transparent 3px 30px
    ),
    repeating-linear-gradient(45deg, var(--era-texture-color) 0 2px, transparent 2px 44px),
    radial-gradient(circle, var(--era-texture-color) 0 1.2px, transparent 1.8px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 26px 26px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  opacity: 0.6;
}

/* 1970s — sunset banding, dense pinstripe, arc rings */
.era-1970s .era-atmos {
  background-image:
    radial-gradient(100% 66% at 50% 104%, var(--era-wash-1), transparent 62%),
    repeating-linear-gradient(180deg, transparent 0 26px, var(--era-texture-color) 26px 28px),
    repeating-linear-gradient(0deg, var(--era-texture-color) 0 1px, transparent 1px 8px),
    repeating-radial-gradient(
      circle at 50% 104%,
      var(--era-texture-color) 0 1px,
      transparent 1px 40px
    );
  background-size: 100% 100%, 100% 100%, 100% 8px, 100% 100%;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  opacity: 0.58;
}

/* 1980s — horizon glow, perspective grid, CRT scanlines */
.era-1980s .era-atmos {
  background-image:
    radial-gradient(70% 40% at 50% 74%, var(--era-wash-1), transparent 70%),
    repeating-linear-gradient(90deg, var(--era-texture-color) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(0deg, var(--era-texture-color) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 4px;
  background-repeat: no-repeat, repeat, repeat, repeat;
  opacity: 0.66;
}

/* 1990s — crossed grain, speckle, off-centre smudge */
.era-1990s .era-atmos {
  background-image:
    radial-gradient(80% 60% at 30% 20%, var(--era-wash-1), transparent 68%),
    repeating-linear-gradient(45deg, var(--era-texture-color) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, var(--era-texture-color) 0 1px, transparent 1px 6px),
    radial-gradient(circle, var(--era-texture-color) 0 1px, transparent 1.6px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 14px 14px;
  background-repeat: no-repeat, repeat, repeat, repeat;
  opacity: 0.5;
}

/* 2000s — gloss sweep, chrome banding, disc rings */
.era-2000s .era-atmos {
  background-image:
    radial-gradient(70% 50% at 50% 30%, var(--era-wash-1), transparent 70%),
    linear-gradient(105deg, transparent 0 36%, var(--era-texture-color) 48%, transparent 60%),
    repeating-linear-gradient(0deg, var(--era-texture-color) 0 1px, transparent 1px 26px),
    repeating-radial-gradient(
      circle at 50% 50%,
      var(--era-texture-color) 0 1px,
      transparent 1px 46px
    );
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  opacity: 0.55;
}

/* 2010s — flat hairline grid with node dots */
.era-2010s .era-atmos {
  background-image:
    radial-gradient(80% 60% at 50% 40%, var(--era-wash-1), transparent 70%),
    repeating-linear-gradient(90deg, var(--era-texture-color) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, var(--era-texture-color) 0 1px, transparent 1px 92px),
    radial-gradient(circle, var(--era-texture-color) 0 1.6px, transparent 2.2px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 92px 92px;
  background-repeat: no-repeat, repeat, repeat, repeat;
  opacity: 0.52;
}

/* 2020s — paired blooms, wide rings, faint dot matrix */
.era-2020s .era-atmos {
  background-image:
    radial-gradient(58% 44% at 50% 34%, var(--era-wash-1), transparent 74%),
    radial-gradient(70% 50% at 18% 78%, var(--era-wash-2), transparent 72%),
    repeating-radial-gradient(
      circle at 50% 34%,
      var(--era-texture-color) 0 1px,
      transparent 1px 56px
    ),
    radial-gradient(circle, var(--era-texture-color) 0 1px, transparent 1.6px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 30px 30px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  opacity: 0.6;
}

/* ── Per-genre intensity ─────────────────────────────────────────────── */

.style-documentary .era-atmos {
  opacity: 0.32;
}
.style-classics-noir .era-atmos {
  opacity: 0.4;
}
.style-horror .era-atmos {
  opacity: 0.42;
}
.style-comedy .era-atmos {
  opacity: 0.72;
}
.style-music-audio .era-atmos,
.style-games-interactive .era-atmos {
  opacity: 0.75;
}

/* ── Centrepiece artwork ────────────────────────────────────────────────
   An inline SVG per decade, tinted from the era palette via currentColor.  */

.era-motif {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: -1;
  width: min(1040px, 118%);
  transform: translateX(-50%);
  color: var(--era-accent);
  opacity: 0.5;
  pointer-events: none;
}
.era-motif svg {
  display: block;
  width: 100%;
  height: auto;
}

.era-1940s .era-motif {
  opacity: 0.36;
}
.era-1990s .era-motif {
  opacity: 0.42;
}
.era-2010s .era-motif {
  opacity: 0.46;
}
.era-1980s .era-motif,
.era-2020s .era-motif {
  opacity: 0.58;
}

/* ── Portal frieze bands ──────────────────────────────────────────────── */

.decade-portal::before,
.decade-portal::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  z-index: 0;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(45deg, var(--era-accent) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(-45deg, var(--era-accent) 0 1px, transparent 1px 8px);
  border-top: 1px solid var(--era-accent);
  border-bottom: 1px solid var(--era-accent);
  pointer-events: none;
}
.decade-portal::before {
  top: 0;
}
.decade-portal::after {
  bottom: 0;
}

/* ── Era-tinted content ──────────────────────────────────────────────── */

.era-plaque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 8px 15px;
  border: 1px solid var(--era-accent);
  background: var(--era-wash-2);
  font-family: var(--font-display);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--era-accent-2);
}
.era-plaque i {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  transform: rotate(45deg);
  background: var(--era-accent);
}

.detail-scene .detail h1 {
  color: var(--era-ink);
}

.detail-scene .detail-cover .cover {
  background: linear-gradient(
    165deg,
    var(--era-cover-mid) 0%,
    var(--era-cover-deep) 58%,
    #050507 100%
  );
}
.detail-scene .detail-cover .cover::before {
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    var(--era-ray) 0deg 0.5deg,
    transparent 0.5deg 6deg
  );
}
.detail-scene .detail-cover .cover-plate {
  border-color: var(--era-accent);
  box-shadow: inset 0 0 26px var(--era-ray), 0 0 0 1px var(--era-wash-1);
}
.detail-scene .detail-cover .cover-plate::before {
  border-color: var(--era-accent);
  opacity: 0.5;
}
.detail-scene .detail-cover .cover-mono {
  color: var(--era-accent-2);
  text-shadow: 0 0 20px var(--era-ray);
}
.detail-scene .detail-cover .cover-format {
  color: var(--era-accent-2);
  border-color: var(--era-accent);
}
.detail-scene .detail-cover .cover-frieze {
  background-image:
    repeating-linear-gradient(45deg, var(--era-accent) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, var(--era-accent) 0 1px, transparent 1px 7px);
}

/* The price deliberately stays gold: it pairs with the primary CTA and keeps
   the house identity, while the era shows through the wash, the medallion, the
   rules and the plaque. */
.detail-scene .detail .stars {
  color: var(--era-accent);
}
.detail-scene .spec dt {
  color: var(--era-accent);
}
.detail-scene .specs {
  border-color: var(--era-accent);
}
.detail-scene .spec {
  outline-color: var(--era-wash-1);
}
.detail-scene .buy-bar {
  border-color: var(--era-accent);
}
.detail-scene .prose h2 {
  color: var(--era-ink);
}
.detail-scene .crumbs a:hover,
.detail-scene .link-more {
  color: var(--era-accent-2);
}
.detail-scene .shelf-head::after {
  background:
    linear-gradient(90deg, var(--era-accent), transparent 62%) 0 0 / 100% 1px no-repeat,
    linear-gradient(90deg, var(--era-accent), transparent 62%) 0 3px / 100% 1px no-repeat;
  opacity: 0.45;
}

/* ==========================================================================
   Decade portals
   --------------------------------------------------------------------------
   One page per decade, dressed head to toe in that era's ambiance, reached
   from the decade rail beside the logo.
   ========================================================================== */

.portal-hero {
  position: relative;
  z-index: 1;
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--era-accent);
  text-align: center;
}

.portal-hero .eyebrow {
  color: var(--era-accent);
}

/* The year, flanked by chevrons onto the neighbouring decades, so a portal can
   be walked without going back up to the rail in the header. */
.portal-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 30px);
  margin: 10px 0 6px;
}

/* One flank of the big number: the decade plaque with the square year button
   glued to its inner edge. */
.portal-side {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}
.portal-side--prev .jump {
  /* Collapse the shared edge so the pair reads as one control. */
  margin-left: -1px;
  border-left-style: dashed;
}
.portal-side--next .jump {
  margin-right: -1px;
  border-right-style: dashed;
}

.portal-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: 112px;
  padding: 9px 12px;
  border: 1px solid var(--era-accent);
  background: var(--era-wash-2);
  color: var(--era-accent-2);
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.portal-step--next {
  /* The chevron moves to the outer edge without reordering the markup. */
  flex-direction: row-reverse;
}
.portal-step:hover,
.portal-step:focus-visible {
  background: var(--era-accent);
  border-color: var(--era-accent-2);
  color: var(--black);
}
.portal-step-mark {
  display: block;
  line-height: 0;
}
.portal-step-mark svg {
  display: block;
}
/* The empty slot still takes its width, so the year never drifts off centre. */
.portal-step.is-off {
  visibility: hidden;
}

/* ── The coarse step: a square double-chevron ─────────────────────────────
   Glued to the button it extends. On a decade portal it steps a single year
   and sits on the inner edge; on a year page it steps a whole decade and sits
   on the outer edge. Square and compact everywhere, so it never competes with
   the button it belongs to. */
.jump {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  align-self: stretch;
  border: 1px solid var(--era-accent);
  background: var(--era-wash-2);
  color: var(--era-accent-2);
  line-height: 0;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.jump:hover,
.jump:focus-visible {
  background: var(--era-accent);
  border-color: var(--era-accent-2);
  color: var(--black);
}
.jump.is-off {
  visibility: hidden;
}

.portal-decade {
  margin: 0;
  font-family: var(--font-deco);
  font-size: clamp(3.4rem, 12vw, 7.5rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: var(--era-accent-2);
  text-shadow: 0 0 64px var(--era-ray);
}

.portal-era {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--era-accent);
}

/* ── Exact-year rail ──────────────────────────────────────────────────────
   The ten years of the decade, always all ten and always in order — that is
   what makes the row read as a decade rather than an arbitrary list. Years with
   nothing in stock keep their slot, dimmed and inert, so the rail never
   collapses to a ragged set. */
.year-rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 620px;
  margin: 0 auto 26px;
  padding: 0;
}

.year-pill {
  min-width: 52px;
  padding: 7px 9px 8px;
  border: 1px solid var(--era-wash-1);
  background: var(--era-wash-2);
  color: var(--era-accent-2);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

a.year-pill:hover,
a.year-pill:focus-visible {
  border-color: var(--era-accent);
  color: var(--era-ink);
}

/* The year you are looking at: filled, so the rail reads at a glance. */
.year-pill.is-active {
  border-color: var(--era-accent-2);
  background: var(--era-accent);
  color: var(--black);
  font-weight: 700;
}

/* No stock: present for the shape of the decade, honest about being empty.
   Faint enough to recede, solid enough not to read as a rendering fault. */
.year-pill.is-off {
  opacity: 0.42;
  border-style: dashed;
}

.portal-hero .deco-orn {
  margin: 0 auto 24px;
}
.portal-copy {
  max-width: 54ch;
  margin: 0 auto;
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--muted);
}

.portal-body {
  padding-top: 44px;
}

/* ── Placeholder plates ──────────────────────────────────────────────── */

.card--placeholder {
  border-style: dashed;
  border-color: var(--era-accent);
  background: transparent;
}
.card--placeholder::before {
  border-color: var(--era-wash-1);
}
.card--placeholder:hover {
  transform: none;
  border-color: var(--era-accent);
  box-shadow: none;
}
.card--placeholder .cover {
  opacity: 0.85;
}
.card--placeholder .badge {
  border-color: var(--era-accent);
  color: var(--era-accent-2);
}
.card--placeholder .card-title,
.card--placeholder .card-meta,
.card--placeholder .price,
.card--placeholder .stars {
  color: var(--muted-2);
}
.card--placeholder .card-foot .btn {
  pointer-events: none;
  opacity: 0.5;
}

/* ==========================================================================
   Cart drawer
   ========================================================================== */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}
.drawer[aria-hidden="false"] {
  pointer-events: auto;
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 6, 0.72);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.drawer[aria-hidden="false"] .drawer-backdrop {
  opacity: 1;
}

.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: min(450px, 100%);
  background: linear-gradient(180deg, var(--lacquer-2), var(--black));
  border-left: 1px solid var(--gold);
  box-shadow: var(--shadow);
  transform: translateX(102%);
  transition: transform 0.32s cubic-bezier(0.22, 0.68, 0.36, 1);
}
.drawer[aria-hidden="false"] .drawer-panel {
  transform: translateX(0);
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 18px;
}
.drawer-head h2 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cream);
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 24px 20px;
}

.drawer-foot {
  padding: 20px 24px 26px;
  border-top: 1px solid var(--line);
  background: var(--lacquer-2);
}

/* ── Totals ──────────────────────────────────────────────────────────── */

.totals {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 18px;
}
.totals-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.totals-row span:last-child {
  color: var(--cream);
}
.totals-row.is-total {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
}
.totals-row.is-total span:last-child {
  font-family: var(--font-deco);
  font-size: 1.4rem;
  color: var(--gold);
}

/* Progress to the free-shipping threshold. Turns emerald once met, because
   that is the moment the note stops being a nudge and starts being a promise. */
.ship-bar {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  background: rgba(212, 175, 55, 0.04);
}
.ship-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.ship-bar-title,
.ship-bar-note {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ship-bar-title {
  color: var(--gold);
}
.ship-bar-note {
  color: var(--muted);
}
.ship-bar-track {
  height: 5px;
  background: rgba(212, 175, 55, 0.12);
}
.ship-bar-fill {
  display: block;
  width: calc(var(--fill, 0) * 100%);
  height: 100%;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi));
  transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ship-bar.is-met {
  border-color: rgba(31, 122, 82, 0.5);
  background: rgba(31, 122, 82, 0.1);
}
.ship-bar.is-met .ship-bar-title {
  color: #7fd3ab;
}
.ship-bar.is-met .ship-bar-fill {
  background: linear-gradient(90deg, #2f9c6b, #8fe0b8);
}

/*
 * Crossing the free-shipping threshold is the one moment the cart has good
 * news to give, so it gets one outward push and a ring of light leaving the
 * bar. The class is added by `cart-motion.js` on the false → true transition
 * only, so a repaint of an already-qualifying basket stays still.
 */
@keyframes ship-push {
  0% {
    transform: scale(1);
  }
  38% {
    transform: scale(1.035);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ship-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(143, 224, 184, 0.5);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(143, 224, 184, 0);
  }
}
.ship-bar--pop {
  animation:
    ship-push 0.46s cubic-bezier(0.34, 1.4, 0.64, 1),
    ship-ring 0.8s ease-out;
}
/* The note swaps from "Plus que 22,50 €" to "Seuil atteint"; let it drop in. */
.ship-bar--pop .ship-bar-note {
  animation: ship-note-in 0.4s ease-out both;
}
@keyframes ship-note-in {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Cart lines ──────────────────────────────────────────────────────── */

/*
 * A line that has just landed in the basket. Only that row carries the class,
 * and the delay lets the drawer panel finish arriving before the item drops in
 * behind it.
 */
@keyframes line-in {
  from {
    opacity: 0;
    transform: translateX(30px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
.line--in {
  animation: line-in 0.44s cubic-bezier(0.22, 0.68, 0.36, 1) 0.1s both;
}

@media (prefers-reduced-motion: reduce) {
  .line--in,
  .ship-bar--pop,
  .ship-bar--pop .ship-bar-note {
    animation: none;
  }
  .ship-bar-fill {
    transition: none;
  }
  /* `line-in` starts from `opacity: 0`, so with the animation off the row would
     simply be invisible; the class is inert instead. */
  .line--in {
    opacity: 1;
  }
}

.line {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}
.line:last-child {
  border-bottom: 0;
}

.line-cover {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
}
.line-cover .cover-frieze {
  height: 4px;
}
.line-cover .cover-plate {
  width: 56%;
  max-width: none;
}
.line-cover .cover-plate::before {
  inset: 2px;
}
.line-cover .cover-mono {
  font-size: 0.7rem;
}
.line-cover .cover-format {
  display: none;
}

.line-title {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--cream);
  transition: color 0.2s ease;
}
.line-title:hover {
  color: var(--gold);
}

.line-meta {
  margin: 5px 0 11px;
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--muted-2);
}

/* Unit price, shown only when a line holds more than one copy — otherwise it
   just repeats the line total. */
.line-unit {
  margin-bottom: 4px;
  font-size: 0.66rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-align: right;
  white-space: nowrap;
  color: var(--muted-2);
}

.line-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qty-mini {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
}
.qty-mini button {
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  color: var(--gold);
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.qty-mini button:hover:not(:disabled) {
  background: rgba(212, 175, 55, 0.14);
}
.qty-mini button:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}
.qty-mini span {
  min-width: 28px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
}

.line-remove {
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.line-remove:hover {
  color: #dba199;
  border-bottom-color: #dba199;
}

.line-price {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-hi);
  text-align: right;
  white-space: nowrap;
}

.line-stock {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: right;
  color: var(--muted-2);
}
.line-stock.is-low {
  color: var(--gold);
}

/* ==========================================================================
   Forms & checkout
   ========================================================================== */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 13px 14px;
  background: #0b0b0f;
  border: 1px solid var(--line);
  color: var(--cream);
  font-weight: 300;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field select {
  appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field select option {
  background: #0b0b0f;
  color: var(--cream);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.28);
}

/* Set by the checkout validators, cleared as soon as the field passes again. */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--garnet);
  box-shadow: 0 0 0 1px rgba(168, 68, 58, 0.3);
}

.field .hint,
.hint {
  font-size: 0.74rem;
  font-weight: 300;
  color: var(--muted-2);
}

.field .error-text {
  font-size: 0.76rem;
  color: #dba199;
}

/* Counts the problems after a submit attempt, for readers who tab past the
   individual messages. */
.form-status {
  margin: 0 0 16px;
  padding: 12px 15px;
  border: 1px solid rgba(168, 68, 58, 0.55);
  background: rgba(168, 68, 58, 0.12);
  font-size: 0.78rem;
  font-weight: 300;
  color: #f0c3bc;
}

.checkout-hint {
  margin: 18px 0;
}
.checkout-reassure {
  margin: 12px 0 0;
  text-align: center;
}

.checkout {
  display: grid;
  grid-template-columns: 1fr 372px;
  gap: 46px;
  align-items: start;
  padding-bottom: 70px;
}

/* The summary column is always short, so it can follow the reader down the
   form. Anchored to the same header height as the filter rail. */
@media (min-width: 941px) {
  .checkout > aside {
    position: sticky;
    top: 184px;
  }
}

.panel {
  position: relative;
  padding: 32px;
  background: linear-gradient(180deg, var(--lacquer-3), var(--lacquer-2));
  border: 1px solid var(--line);
}
.panel::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(212, 175, 55, 0.14);
  pointer-events: none;
}

.panel h2 {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cream);
}

/* Stacked panel buttons: primary first, destructive last. */
.panel-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

/* ── Order summary items (checkout, confirmation) ────────────────────── */

.summary-items {
  margin-bottom: 18px;
}
.summary-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(212, 175, 55, 0.07);
}
.summary-item:last-child {
  border-bottom: 0;
}
.summary-thumb {
  flex: 0 0 auto;
  width: 44px;
}
.summary-item-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}
.summary-item-title {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--cream);
}
.summary-item-meta,
.summary-item-quantity {
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--muted-2);
}
.summary-item-quantity {
  flex: 0 0 auto;
}
.summary-item-price {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--gold-hi);
}

/* ==========================================================================
   Order confirmation
   ========================================================================== */

.confirm {
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: 70px;
}

.confirm-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
  padding: 26px 28px;
  border: 1px solid rgba(31, 122, 82, 0.55);
  background: linear-gradient(120deg, rgba(31, 122, 82, 0.18), rgba(31, 122, 82, 0.03));
}
.confirm-banner .tick {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  transform: rotate(45deg);
  border: 1px solid #7fd3ab;
  background: rgba(31, 122, 82, 0.35);
  color: #c9f0dd;
  font-size: 1.15rem;
}
.confirm-banner .tick > * {
  transform: rotate(-45deg);
}
.confirm-banner h1 {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
}
.confirm-banner p {
  margin: 7px 0 0;
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--muted);
}

.status-pill {
  display: inline-block;
  padding: 5px 13px;
  border: 1px solid var(--gold);
  background: rgba(212, 175, 55, 0.12);
  color: var(--gold-hi);
  font-family: var(--font-display);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.confirm-panel + .confirm-panel {
  margin-top: 22px;
}
.confirm-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.confirm-panel-head h2 {
  margin: 0;
  padding: 0;
  border-bottom: 0;
}
.confirm-note {
  color: var(--muted-2);
}
.confirm-notes {
  margin: 20px 0 0;
}
.confirm-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}

/* ── Order timeline ──────────────────────────────────────────────────── */

.order-steps {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.order-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  flex: 1 1 0;
  text-align: center;
}
/* Each stop draws the rule back to the previous one, so the frieze is
   unbroken and stops dead at both ends. */
.order-step + .order-step::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 50%;
  left: -50%;
  height: 1px;
  background: var(--line);
}
.order-step.is-done::before,
.order-step.is-current::before {
  background: var(--gold-lo);
}
.order-step-dot {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  transform: rotate(45deg);
  border: 1px solid var(--line);
  background: var(--black);
}
.order-step.is-done .order-step-dot {
  border-color: var(--gold);
  background: var(--gold-lo);
}
.order-step.is-current .order-step-dot {
  border-color: var(--gold-hi);
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.16);
}
.order-step-label {
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.order-step.is-done .order-step-label,
.order-step.is-current .order-step-label {
  color: var(--gold-hi);
}
.order-timeline.is-cancelled {
  margin: 0;
  font-size: 0.82rem;
  color: #dba199;
}

/* ==========================================================================
   Toasts
   ========================================================================== */

.toasts {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 22px;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, #16161e, #0c0c11);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-hi);
  animation: deco-toast 0.25s ease;
}
/* The rail ignores the pointer so it never blocks the page underneath; a toast
   that carries an undo has to opt back in. */
.toast--action {
  pointer-events: auto;
}
.toast-action {
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--cream);
  cursor: pointer;
  transition: color 0.2s ease;
}
.toast-action:hover {
  color: #fff;
}
.toast--error {
  border-color: var(--garnet);
  color: #efb8b0;
}
.toast--ok {
  border-color: var(--emerald);
  color: #a8e3c5;
}
@keyframes deco-toast {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  margin-top: 70px;
  background: var(--footer-bg);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr);
  gap: 38px;
  padding-top: 56px;
  padding-bottom: 40px;
}

.footer-brand p {
  max-width: 42ch;
  margin: 14px 0 0;
  font-size: 0.86rem;
  font-weight: 300;
  color: var(--footer-text);
}

.footer-col h3 {
  margin-bottom: 18px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--footer-heading);
}

.footer-col a {
  display: block;
  padding: 5px 0;
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--footer-link);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.footer-col a:hover {
  color: var(--footer-link-hi);
  padding-left: 6px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  padding-top: 22px;
  padding-bottom: 26px;
  border-top: 1px solid var(--footer-line-soft);
  font-family: var(--font-display);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--footer-text-soft);
}

/* ==========================================================================
   À la une — the Nouveautés arrival page
   --------------------------------------------------------------------------
   Same Deco grammar as the rest of the shop, but editorial rather than
   gridded: a masthead, an era-dressed hero plate for the newest entry, then
   one wide row per title carrying the synopsis, the specs and the buy
   controls. The hero carries `.detail-scene` so its decade tints it exactly
   like a title plate, without duplicating the era rules.
   ========================================================================== */

.feat-page {
  padding-bottom: 70px;
}

.feat-masthead {
  padding-top: 34px;
  padding-bottom: 26px;
}
.feat-masthead .eyebrow {
  margin: 24px 0 14px;
}
.feat-masthead h1 {
  font-family: var(--font-deco);
  font-size: clamp(2rem, 4.6vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.1;
  color: var(--cream);
}
.feat-lede {
  max-width: 68ch;
  margin: 14px 0 0;
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--muted);
}

/* ── Hero plate ──────────────────────────────────────────────────────── */

.feat-hero {
  padding: 56px 0 60px;
}
.feat-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 296px) minmax(0, 1fr);
  gap: 52px;
  align-items: center;
}
/* The title plate pins its cover while the copy beside it scrolls; the hero
   has nothing to scroll past, so drop the sticking. It must stay *positioned*:
   `.cover` is `position: absolute; inset: 0` and would otherwise escape to the
   whole era scene and paint over the copy. */
.feat-hero-cover {
  position: relative;
  top: auto;
  border-color: var(--era-accent);
}

.feat-hero-title {
  margin: 4px 0 18px;
  font-family: var(--font-deco);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.08;
  color: var(--era-ink);
}
.feat-hero-copy {
  max-width: 62ch;
  margin: 0 0 26px;
  font-size: 1rem;
  font-weight: 300;
  color: var(--cream-2);
}
.feat-hero-note {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* Era tinting for the pieces the title plate does not already cover. */
.feat-hero .stars {
  color: var(--era-accent);
}
.feat-hero .feat-specs {
  border-color: var(--era-accent);
}
.feat-hero .feat-spec {
  outline-color: var(--era-wash-1);
}
.feat-hero .feat-spec dt {
  color: var(--era-accent);
}

/* ── Spec strip ──────────────────────────────────────────────────────── */

.feat-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 0;
  margin: 0 0 26px;
  background: var(--lacquer-2);
  border: 1px solid var(--line);
}
.feat-spec {
  padding: 13px 16px;
  outline: 1px solid var(--line-soft);
}
.feat-spec dt {
  margin-bottom: 5px;
  font-family: var(--font-display);
  font-size: 0.53rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.feat-spec dd {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--cream);
}

/* ── Buy block ───────────────────────────────────────────────────────── */

.feat-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.feat-price {
  margin: 0;
  font-family: var(--font-deco);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--gold);
}
.feat-stock {
  margin: 0;
  padding: 5px 11px;
  border: 1px solid rgba(31, 122, 82, 0.55);
  background: rgba(31, 122, 82, 0.12);
  font-family: var(--font-display);
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7fd3ab;
}
.feat-stock.is-out {
  border-color: rgba(168, 68, 58, 0.55);
  background: rgba(168, 68, 58, 0.12);
  color: #dba199;
}

/* ── Section head ────────────────────────────────────────────────────── */

.feat-head {
  position: relative;
  margin: 64px 0 30px;
  padding-bottom: 20px;
}
.feat-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background:
    linear-gradient(90deg, var(--gold), transparent 62%) 0 0 / 100% 1px no-repeat,
    linear-gradient(90deg, var(--gold), transparent 62%) 0 3px / 100% 1px no-repeat;
  opacity: 0.5;
}
.feat-head h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
}
.feat-head p {
  max-width: 68ch;
  margin: 9px 0 0;
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--muted);
}
.feat-head .link-more {
  display: inline-block;
  margin-top: 14px;
}

/* ── Detail rows ─────────────────────────────────────────────────────── */

.feat-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.feat-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 212px;
  gap: 30px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line-soft);
}
.feat-row:first-child {
  padding-top: 0;
}
.feat-row.is-out .feat-row-cover {
  opacity: 0.5;
}

.feat-row-cover {
  display: block;
  /* Positioned on purpose: `.cover` is `position: absolute; inset: 0` and a
     static frame lets it escape to the document instead of the thumbnail. */
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.feat-row-cover:hover,
.feat-row-cover:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--line);
}
/* Shrink the medallion so the monogram still reads at row size. */
.feat-row-cover .cover-plate {
  width: 52%;
  max-width: 62px;
}
.feat-row-cover .cover-mono {
  font-size: 1.1rem;
}
.feat-row-cover .cover-frieze {
  height: 6px;
}
.feat-row-cover .cover-format {
  font-size: 0.5rem;
  top: 13px;
}

.feat-row-body {
  min-width: 0;
}
.feat-index {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--gold-lo);
}
.feat-row-title {
  margin: 0 0 12px;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream);
}
.feat-row-title a {
  transition: color 0.2s ease;
}
.feat-row-title a:hover {
  color: var(--gold);
}
.feat-row-copy {
  max-width: 64ch;
  margin: 12px 0 20px;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--cream-2);
}
.feat-row .feat-specs {
  margin-bottom: 0;
}

.feat-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 26px;
  border-left: 1px solid var(--line-soft);
}
.feat-row-stars {
  font-size: 0.8rem;
}
.feat-row-stars span {
  display: block;
  margin: 6px 0 0;
}
.feat-row-side .feat-buy {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin-top: 16px;
}
.feat-row-side .feat-price {
  font-size: 1.75rem;
}
.feat-row-side .feat-stock {
  align-self: flex-start;
}
.feat-row-side .btn {
  width: 100%;
}

.feat-hero-stars {
  margin: 16px 0 18px;
  font-size: 0.8rem;
}

.feat-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 46px;
}

@media (max-width: 1180px) {
  .feat-row {
    grid-template-columns: 116px minmax(0, 1fr) 194px;
    gap: 24px;
  }
}

@media (max-width: 940px) {
  .feat-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  .feat-hero-cover {
    max-width: 296px;
  }
  .feat-row {
    grid-template-columns: 106px minmax(0, 1fr);
    gap: 22px;
  }
  .feat-row-side {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 20px;
    padding: 18px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
  .feat-row-side .feat-buy {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    width: auto;
    margin-top: 0;
  }
  .feat-row-side .btn {
    width: auto;
  }
}

@media (max-width: 720px) {
  .feat-masthead {
    padding-top: 22px;
  }
  .feat-hero {
    padding: 40px 0 44px;
  }
  .feat-head {
    margin-top: 46px;
  }
  .feat-row {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 18px;
    padding: 24px 0;
  }
  .feat-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Touch targets want the full width rather than a cluster. */
  .feat-hero .feat-buy .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Multimédia & équipement — the technical catalogue
   --------------------------------------------------------------------------
   Deliberately a different register from the film pages: no posters, no era
   theming, no shelves. Equipment is bought on compatibility, so each reference
   is a spec sheet — a drawn family mark, a reference number, and the structured
   `specs` printed as a table.
   ========================================================================== */

.mm-page {
  padding-bottom: 70px;
}

.mm-masthead {
  padding-top: 34px;
  padding-bottom: 26px;
}
.mm-masthead .eyebrow {
  margin: 24px 0 14px;
}
.mm-masthead h1 {
  font-size: clamp(1.7rem, 3.8vw, 2.6rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--cream);
}
.mm-lede {
  max-width: 72ch;
  margin: 14px 0 0;
  font-size: 0.93rem;
  font-weight: 300;
  color: var(--muted);
}

.mm-stats {
  display: flex;
  flex-wrap: wrap;
  margin-top: 26px;
  border-top: 1px solid var(--line-soft);
}
.mm-stat {
  flex: 0 0 auto;
  margin-right: 32px;
  padding: 16px 32px 0 0;
  border-right: 1px solid var(--line-soft);
}
.mm-stat:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: 0;
}
.mm-stat strong {
  display: block;
  font-family: var(--font-deco);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.mm-stat span {
  display: block;
  margin-top: 7px;
  font-family: var(--font-display);
  font-size: 0.53rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ── Family rail ─────────────────────────────────────────────────────── */

.mm-rail-wrap {
  position: sticky;
  /* Butts against the sticky header (112px + 47px nav strip), with no gap for
     the page to show through while scrolling. */
  top: 159px;
  z-index: 5;
  margin-top: 30px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--lacquer-3), var(--lacquer-2));
}
.mm-rail {
  display: flex;
  align-items: center;
  padding: 14px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mm-rail::-webkit-scrollbar {
  display: none;
}

.mm-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--cream-2);
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.mm-pill + .mm-pill {
  margin-left: 8px;
}
.mm-pill:hover {
  color: var(--gold-hi);
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.08);
}
.mm-pill.is-active {
  color: var(--black);
  border-color: var(--gold-hi);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 62%, var(--gold-lo));
}
.mm-pill-count {
  padding: 1px 5px;
  border: 1px solid currentColor;
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

/* ── Spec cards ──────────────────────────────────────────────────────── */

.mm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(304px, 1fr));
  gap: 22px;
  padding-top: 40px;
}

.mm-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--lacquer-3), var(--lacquer-2));
  border: 1px solid var(--line);
  transition: border-color 0.22s ease, transform 0.22s ease;
}
/* The rail filters by hiding cards, so `hidden` has to beat `display: flex`. */
.mm-card[hidden] {
  display: none;
}
.mm-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}
.mm-card.is-out {
  opacity: 0.72;
}

/* The "photograph": a drawn mark on a ruled ground, the way a catalogue draws
   hardware rather than photographing it. */
.mm-figure {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 132px;
  padding: 22px;
  border-bottom: 1px solid var(--line);
  color: var(--gold);
  background-image:
    repeating-linear-gradient(90deg, rgba(212, 175, 55, 0.055) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(0deg, rgba(212, 175, 55, 0.055) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, #101018, #0a0a0e);
}
.mm-icon {
  display: block;
  line-height: 0;
}
.mm-chip {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  background: rgba(5, 5, 8, 0.66);
  font-family: var(--font-display);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.mm-ref {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-family: var(--font-display);
  font-size: 0.53rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

.mm-body {
  flex: 1 1 auto;
  padding: 18px 18px 16px;
}
.mm-title {
  margin: 0 0 7px;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--cream);
}
.mm-title a {
  transition: color 0.2s ease;
}
.mm-title a:hover {
  color: var(--gold);
}
.mm-variant {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-lo);
}
.mm-copy {
  margin: 0 0 16px;
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--muted);
}

/* The spec sheet — the reason this page looks like no other on the site. */
.mm-specs {
  margin: 0;
  border-top: 1px solid var(--line-soft);
}
.mm-spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}
.mm-spec dt {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 0.53rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.mm-spec dd {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 300;
  text-align: right;
  color: var(--cream-2);
  font-variant-numeric: tabular-nums;
}

.mm-foot {
  padding: 16px 18px 18px;
  border-top: 1px solid var(--line);
  background: rgba(5, 5, 8, 0.35);
}
.mm-foot-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 13px;
}
.mm-price {
  font-family: var(--font-deco);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.mm-stock {
  font-family: var(--font-display);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7fd3ab;
}
.mm-stock.is-out {
  color: #dba199;
}
.mm-foot-actions {
  display: flex;
  gap: 10px;
}
.mm-foot-actions .btn {
  flex: 1 1 auto;
}

.mm-none {
  margin: 40px 0 0;
  padding: 26px;
  border: 1px dashed var(--line);
  text-align: center;
  font-size: 0.86rem;
  font-weight: 300;
  color: var(--muted);
}

.mm-page-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 46px;
}

@media (max-width: 1180px) {
  .mm-rail-wrap {
    /* The nav strip is hidden at this width, so the header is shorter. */
    top: 112px;
  }
  /* The decade plaques drop their year label and become chevron buttons. */
  .portal-step {
    width: auto;
    padding: 11px 14px;
  }
  .portal-step-label {
    display: none;
  }
}

@media (max-width: 940px) {
  /* The header wraps onto three rows here; a sticky rail would eat the view. */
  .mm-rail-wrap {
    position: static;
  }
}

@media (max-width: 720px) {
  .mm-masthead {
    padding-top: 22px;
  }
  .portal-steps {
    gap: 14px;
    margin-top: 14px;
  }
  .mm-stat {
    margin-right: 22px;
    padding-right: 22px;
  }
  .mm-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding-top: 28px;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .nav-strip {
    display: none;
  }
  .filters {
    --filters-offset: 136px;
  }
  .detail-cover {
    top: 136px;
  }
  .checkout > aside {
    top: 136px;
  }
  /* Header running tight: the plaque rail needs the room, and the bust is
     legible on its own. */
  .account-button-label {
    display: none;
  }
  .account-button {
    padding: 12px 13px;
  }
}

@media (max-width: 1020px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 940px) {
  .browse {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .filters {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .detail {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .detail-cover {
    /* Stays positioned: `.cover` is `position: absolute; inset: 0`, and a
       static frame lets it escape to `.detail-scene` — a poster the height of
       the whole page, painted over the copy. */
    position: relative;
    top: auto;
    max-width: 320px;
  }
  .checkout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 720px) {
  .site-header {
    --header-h: 52px;
  }
  .header-inner {
    flex-wrap: wrap;
    gap: 14px;
    /* The stacked rows keep their padding, but the logo plate stays flush
       with the page edge. */
    padding-left: 22px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .brand {
    order: 1;
    margin-left: -22px;
  }
  /* Compte and Panier share the right-hand cluster; `margin-left: auto` on
     the first of the pair is what pushes both across. */
  .account-button {
    order: 2;
    margin-left: auto;
  }
  .cart-button {
    order: 3;
  }
  .search {
    order: 4;
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }
  .decade-nav {
    order: 5;
    width: 100%;
    margin-left: 0;
    padding-bottom: 2px;
  }
  .cart-button-label {
    display: none;
  }
  .brand-text {
    font-size: 0.95rem;
    letter-spacing: 0.24em;
  }
  .brand-logo {
    height: var(--header-h);
  }
  .grid,
  .skeleton-grid {
    grid-template-columns: repeat(auto-fill, minmax(154px, 1fr));
    gap: 18px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .hero {
    padding: 52px 0 46px;
  }
  .hero-stat {
    padding: 0 22px;
  }
  .panel {
    padding: 24px 20px;
  }
  .shelf-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .line {
    grid-template-columns: 58px 1fr;
  }
  .line-price {
    grid-column: 2;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* The blanket rule below only shortens the transition — the poster would
     still jump to its zoomed size. Same specificity as the hover rules, so
     these win on order. */
  .card:hover .cover-img,
  .card:focus-within .cover-img,
  .line-cover:hover .cover-img,
  .line-cover:focus-visible .cover-img {
    transform: none;
    filter: saturate(0.94) contrast(1.03);
  }

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

/* ==========================================================================
   Gravure sur mesure — the atelier configurator
   ==========================================================================
   The page sells a service, not an object, so it is built around one sticky
   estimate that never leaves the screen. Every control on the left writes into
   that panel, and the panel is the cart: same products, same quantities.
   ========================================================================== */

.gw-lede {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.75;
}

.gw-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 30px;
  align-items: start;
  padding-bottom: 8px;
}

.gw-config {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.gw-step {
  padding: 26px 26px 28px;
}

.gw-step h2 {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.gw-step-num {
  flex: none;
  padding: 3px 8px 4px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  font-family: var(--font-deco);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--gold-hi);
}

.gw-step-copy {
  margin: 12px 0 0;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--muted);
}

/* ── supports: radio cards ────────────────────────────────────────────── */

.gw-supports {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.gw-support {
  position: relative;
  display: block;
  cursor: pointer;
}

.gw-support input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.gw-support-body {
  display: grid;
  gap: 2px;
  padding: 14px 16px 15px;
  border: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--black) 34%, transparent);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.gw-support:hover .gw-support-body {
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
}

.gw-support input:checked + .gw-support-body {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  box-shadow: 0 0 0 1px var(--line-soft);
}

.gw-support input:focus-visible + .gw-support-body {
  outline: 2px solid var(--gold-hi);
  outline-offset: 2px;
}

.gw-support-name {
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.07em;
  color: var(--cream);
}

.gw-support-cap {
  font-family: var(--font-deco);
  font-size: 1.4rem;
  line-height: 1.15;
  color: var(--gold-hi);
}

.gw-support-meta {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.gw-support-price {
  margin-top: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* ── file picker ──────────────────────────────────────────────────────── */

.gw-file-input {
  display: block;
  width: 100%;
  margin: 18px 0 16px;
  padding: 11px 12px;
  border: 1px dashed var(--line);
  background: color-mix(in srgb, var(--black) 34%, transparent);
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.gw-file-input:hover {
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
}

.gw-file-input:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 2px;
}

.gw-file-input::file-selector-button {
  margin-right: 12px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  color: var(--gold-hi);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.gw-file-input::file-selector-button:hover {
  background: color-mix(in srgb, var(--gold) 26%, transparent);
  color: var(--cream);
}

.gw-gauge {
  height: 6px;
  border: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--black) 62%, transparent);
  overflow: hidden;
}

.gw-gauge-bar {
  width: var(--fill, 0%);
  height: 100%;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold), var(--gold-hi));
  transition: width 0.3s ease, background 0.3s ease;
}

/* Over capacity is not an error — it just means more discs. Garnet, not red. */
.gw-gauge[data-tone="over"] .gw-gauge-bar {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--garnet) 72%, var(--black)),
    var(--garnet),
    color-mix(in srgb, var(--garnet) 55%, var(--gold))
  );
}

.gw-capacity {
  margin: 12px 0 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--muted);
}

.gw-capacity-strong {
  color: var(--gold-hi);
  font-weight: 600;
}

.gw-fit {
  margin-left: 8px;
  padding: 5px 10px 6px;
  border: 1px solid color-mix(in srgb, var(--garnet) 70%, transparent);
  background: color-mix(in srgb, var(--garnet) 20%, transparent);
  color: var(--cream);
  font: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease;
}

.gw-fit:hover {
  background: color-mix(in srgb, var(--garnet) 38%, transparent);
}

.gw-filelist {
  display: grid;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.gw-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--black) 26%, transparent);
  font-size: 0.78rem;
}

.gw-file-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--cream-2);
}

.gw-file-size {
  flex: none;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

.gw-file-drop {
  flex: none;
  padding: 0 4px 2px;
  border: 0;
  background: none;
  color: var(--muted-2);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.gw-file-drop:hover {
  color: var(--garnet);
}

/* ── quantity and options ─────────────────────────────────────────────── */

.gw-quantity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 20px 0 0;
  padding: 13px 16px;
  border: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--black) 34%, transparent);
}

.gw-quantity-label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.gw-options {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.gw-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--black) 26%, transparent);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.gw-option:hover {
  border-color: var(--line);
}

.gw-option:has(input:checked) {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}

.gw-option input {
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: var(--gold);
  cursor: pointer;
}

.gw-option:has(input:focus-visible) {
  outline: 2px solid var(--gold-hi);
  outline-offset: 2px;
}

/* Fallback for engines without :has() — the label box keeps its border, but
   the selected name still reads as selected. */
.gw-option input:checked ~ .gw-option-text .gw-option-name {
  color: var(--gold-hi);
}

.gw-option-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.gw-option-name {
  font-family: var(--font-display);
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  color: var(--cream);
}

.gw-option-note {
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--muted);
}

.gw-option-price {
  font-size: 0.84rem;
  color: var(--gold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── the sticky estimate ──────────────────────────────────────────────── */

.gw-summary {
  position: sticky;
  top: 184px;
  padding: 24px 22px 22px;
}

.gw-summary h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.gw-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.82rem;
}

.gw-line-name {
  min-width: 0;
  color: var(--cream-2);
}

.gw-line-name em {
  font-style: normal;
  margin-left: 4px;
  color: var(--gold);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
}

.gw-line-price {
  flex: none;
  color: var(--cream);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.gw-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 6px 0 18px;
  padding-top: 14px;
  border-top: 2px solid var(--line);
}

.gw-total span {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.gw-total strong {
  font-family: var(--font-deco);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
}

.gw-summary .btn + .btn {
  margin-top: 8px;
}

.gw-summary-foot {
  margin: 16px 0 0;
  font-size: 0.7rem;
  line-height: 1.65;
  color: var(--muted-2);
}

/* ── lower sections ───────────────────────────────────────────────────── */

.gw-process,
.gw-tarifs,
.gw-notes {
  margin-top: 48px;
}

.gw-process h2,
.gw-tarifs h2,
.gw-notes h2 {
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.gw-process-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gw-process-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 18px 19px;
  border: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--black) 28%, transparent);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--muted);
}

.gw-process-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--font-deco);
  font-size: 1rem;
  color: var(--gold-hi);
}

.gw-process-list strong {
  display: block;
  margin-bottom: 2px;
  color: var(--cream);
  font-weight: 600;
}

/* The flex row makes every child its own item, so the lead and its sentence
   have to travel together in a wrapper. */
.gw-process-list li > div {
  min-width: 0;
}

.gw-table-wrap {
  overflow-x: auto;
}

.gw-tarifs table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.gw-tarifs caption {
  padding-bottom: 12px;
  text-align: left;
  color: var(--muted-2);
  font-size: 0.76rem;
}

.gw-tarifs th,
.gw-tarifs td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
}

.gw-tarifs thead th {
  border-bottom-color: var(--line);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.gw-tarifs tbody th {
  font-weight: 600;
  color: var(--cream);
}

.gw-tarifs td {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.gw-tarifs .gw-tarif-price {
  text-align: right;
  white-space: nowrap;
  color: var(--gold);
}

.gw-tarifs tfoot th {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--muted-2);
}

.gw-note-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.gw-note {
  padding: 18px 20px 20px;
  border: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--black) 28%, transparent);
}

.gw-note h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-hi);
}

.gw-note p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.75;
  color: var(--muted);
}

.gw-notes-foot {
  margin: 22px 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.gw-notes {
  padding-bottom: 64px;
}

@media (max-width: 1180px) {
  .gw-layout {
    grid-template-columns: minmax(0, 1fr) 292px;
    gap: 24px;
  }
  .gw-summary {
    top: 136px;
  }
}

@media (max-width: 940px) {
  .gw-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  .gw-summary {
    position: static;
    top: auto;
  }
  .gw-process-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .gw-process,
  .gw-tarifs,
  .gw-notes {
    margin-top: 36px;
  }
}

@media (max-width: 720px) {
  .gw-supports,
  .gw-note-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .gw-step {
    padding: 20px 18px 22px;
  }
  .gw-summary {
    padding: 20px 18px;
  }
  .gw-option {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .gw-option-price {
    grid-column: 2;
  }
}

/* ==========================================================================
   Series — a serial is a run, not a sitting
   --------------------------------------------------------------------------
   Same shop, same Deco grammar, one difference that matters: a film is a
   couple of hours, a serial has a structure. The title page states that
   structure up front in a run strip, between the buy controls and the specs.
   ========================================================================== */

.run-strip {
  margin: 22px 0 26px;
  padding: 16px 18px 17px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  background: linear-gradient(180deg, var(--lacquer-3), var(--lacquer-2));
}

.run-strip-head {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-hi);
}

.run-strip-rows {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
}

.run-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 74px;
}

.run-item dt {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.run-item dd {
  margin: 0;
  font-family: var(--font-deco);
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--cream);
}

/* Inside an era-dressed plate the strip belongs to the era, like every other
   frame on the page. The gold left edge stays: it marks the block. */
.detail-scene--series .run-strip {
  border-color: var(--era-accent);
  border-left-color: var(--era-accent);
}
.detail-scene--series .run-strip-head {
  color: var(--era-accent-2);
}
.detail-scene--series .run-item dt {
  color: var(--era-accent);
}
.detail-scene--series .run-item dd {
  color: var(--era-ink);
}

@media (max-width: 720px) {
  .run-strip {
    padding: 14px 15px 15px;
  }
  .run-strip-rows {
    gap: 12px 20px;
  }
  .run-item {
    min-width: 64px;
  }
  .run-item dd {
    font-size: 1.02rem;
  }
}

/* ==========================================================================
   Year pages — an index, not a monument
   --------------------------------------------------------------------------
   A decade portal is a grand centred monument: the year huge, chevrons either
   side, ornament below. A year page wears the same era and reads nothing like
   it — everything is left-aligned and the number is half the size, so the two
   can never be mistaken for each other at a glance. Navigation moves from the
   flanks to a pager under the year rail, and the decade it belongs to is a
   plaque in the top corner rather than something you have to work out.
   ========================================================================== */

.year-hero {
  position: relative;
  z-index: 1;
  padding: 40px 0 34px;
  border-bottom: 3px double var(--era-accent);
}

.year-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

/* The eyebrow loses its bottom margin here: it sits on a flex row now. */
.year-hero .eyebrow {
  margin: 0;
  color: var(--era-accent);
}

.year-decade {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px 9px;
  border: 1px solid var(--era-accent);
  background: var(--era-wash-2);
  color: var(--era-accent-2);
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.year-decade-label {
  color: var(--muted);
  letter-spacing: 0.22em;
}

.year-decade-value {
  font-family: var(--font-deco);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.year-decade-mark {
  display: block;
  line-height: 0;
  transition: transform 0.2s ease;
}

.year-decade:hover,
.year-decade:focus-visible {
  background: var(--era-accent);
  border-color: var(--era-accent-2);
  color: var(--black);
}
.year-decade:hover .year-decade-label,
.year-decade:focus-visible .year-decade-label {
  color: var(--black);
  opacity: 0.7;
}
.year-decade:hover .year-decade-mark,
.year-decade:focus-visible .year-decade-mark {
  transform: translateX(3px);
}

.year-title {
  margin: 14px 0 0;
  font-family: var(--font-deco);
  font-size: clamp(2.7rem, 7vw, 4.6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--era-accent-2);
  text-shadow: 0 0 44px var(--era-ray);
}

.year-era {
  margin: 6px 0 22px;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--era-accent);
}

/* The decade's rail, left-aligned instead of centred under a big number. */
.year-hero .year-rail {
  justify-content: flex-start;
  max-width: none;
  margin: 0 0 20px;
}

.year-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 28px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--era-wash-1);
}

.year-pager {
  display: flex;
  align-items: stretch;
  gap: 22px;
  flex-wrap: wrap;
}

/* One flank of the year pager: the year button with the decade button glued to
   its outer edge. Same construction as the decade portal's, mirrored. */
.pager-pair {
  display: flex;
  align-items: stretch;
}
.pager-pair--prev .jump {
  margin-right: -1px;
  border-right-style: dashed;
}
.pager-pair--next .jump {
  margin-left: -1px;
  border-left-style: dashed;
}

.year-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 7px;
  border: 1px solid var(--era-wash-1);
  background: var(--era-wash-2);
  color: var(--era-accent-2);
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.year-step-mark {
  line-height: 1;
}
.year-step:hover,
.year-step:focus-visible {
  background: var(--era-accent);
  border-color: var(--era-accent-2);
  color: var(--black);
}

/* The year page's jump uses the footer's faint rule rather than the plaque's
   accent border, so the glued pair stays visually one object. */
.year-pager .jump {
  border-color: var(--era-wash-1);
}

.year-copy {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--muted);
}

@media (max-width: 720px) {
  .year-hero {
    padding: 28px 0 26px;
  }
  .year-hero-top {
    align-items: flex-start;
  }
  .year-decade {
    padding: 7px 11px 8px;
  }
  .year-foot {
    align-items: flex-start;
  }
  .year-copy {
    font-size: 0.84rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Fiche film — galerie, distribution, avis

   Four blocks below the buy column. They share `.block-head`, which repeats the
   shelf heading's double gold rule, and they all tint from `--era-accent`, so
   they follow the decade and genre of the title being viewed the way the rest
   of the page already does.
   ═══════════════════════════════════════════════════════════════════════════ */

.detail-extras {
  display: grid;
  gap: clamp(36px, 5vw, 60px);
  margin-top: clamp(40px, 5vw, 66px);
}

/*
 * A grid item defaults to `min-width: auto`, which lets it grow to fit its
 * widest child instead of its column. The carousel's rail is wider than the
 * page, so without this the block stretches to the rail (1530px inside a
 * 1196px column) and never overflows — and therefore never scrolls.
 */
.detail-extras > *,
.reviews > * {
  min-width: 0;
}

.block-head {
  position: relative;
  margin-bottom: 24px;
  padding-bottom: 16px;
}

.block-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background:
    linear-gradient(90deg, var(--era-accent, var(--gold)), transparent 62%) 0 0 / 100% 1px no-repeat,
    linear-gradient(90deg, var(--era-accent, var(--gold)), transparent 62%) 0 3px / 100% 1px no-repeat;
  opacity: 0.5;
}

.block-head h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
}

.block-head p {
  margin: 9px 0 0;
  font-size: 0.86rem;
  font-weight: 300;
  color: var(--muted);
}

/* ── Synopsis ────────────────────────────────────────────────────────────── */

.prose--long {
  max-width: 74ch;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.74;
  color: var(--cream-2);
}

.prose--long p {
  margin: 0 0 1.05em;
}

.prose--long p:last-child {
  margin-bottom: 0;
}

/* Illuminated initial, the one piece of manuscript in an Art Deco shop. */
.prose--long p:first-child::first-letter {
  float: left;
  margin: 0.06em 0.14em 0 0;
  font-family: var(--font-deco);
  font-size: 3.2em;
  line-height: 0.8;
  color: var(--era-accent, var(--gold));
}

/* ── Distribution ────────────────────────────────────────────────────────── */

.cast-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cast-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 17px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent);
  border-left: 1px solid var(--line-soft);
}

.cast-name {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--cream);
}

.cast-role {
  font-size: 0.8rem;
  font-weight: 300;
  font-style: italic;
  color: var(--muted);
}

/* ── Carousel ────────────────────────────────────────────────────────────── */

.carousel {
  position: relative;
}

.carousel-viewport {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 2px 0 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-lo) transparent;
  list-style: none;
}

.carousel-track:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.carousel-track > li {
  flex: 0 0 clamp(228px, 32vw, 372px);
  scroll-snap-align: start;
}

.media-slide {
  position: relative;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--card-bg-1);
  border: 1px solid var(--line);
  /* Chamfered top-left and bottom-right, the house corner treatment. */
  clip-path: polygon(
    12px 0,
    100% 0,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    0 100%,
    0 12px
  );
}

.slide-image,
.slide-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--black);
}

.slide-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 9px 4px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lacquer);
  background: var(--gold);
}

.slide-caption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 14px;
}

.slide-caption span {
  font-size: 0.83rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--cream-2);
}

.slide-caption em {
  font-size: 0.66rem;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.carousel-btn {
  position: absolute;
  top: 40%;
  z-index: 2;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold);
  background: rgba(8, 8, 11, 0.88);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.carousel-btn--prev {
  left: -8px;
}

.carousel-btn--next {
  right: -8px;
}

.carousel-btn:hover:not(:disabled),
.carousel-btn:focus-visible:not(:disabled) {
  color: var(--gold-hi);
  border-color: var(--line-strong);
}

.carousel-btn:disabled {
  opacity: 0.26;
  cursor: default;
}

/* ── Avis ────────────────────────────────────────────────────────────────── */

.reviews {
  display: grid;
  grid-template-columns: minmax(196px, 252px) 1fr;
  gap: clamp(20px, 3vw, 42px);
  align-items: start;
}

.reviews-summary {
  position: sticky;
  top: 92px;
  padding: 20px;
  background: var(--card-bg-2);
  border: 1px solid var(--line-soft);
}

.reviews-score {
  margin: 0 0 4px;
  font-family: var(--font-deco);
  font-size: 2.7rem;
  line-height: 1;
  color: var(--gold-hi);
}

.reviews-score span {
  font-size: 1rem;
  color: var(--muted);
}

.tally {
  display: grid;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.tally-row {
  display: grid;
  grid-template-columns: 32px 1fr 20px;
  align-items: center;
  gap: 9px;
  font-size: 0.73rem;
  color: var(--muted);
}

.tally-bar {
  display: block;
  height: 5px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
}

.tally-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold));
}

.tally-count {
  text-align: right;
}

.reviews-note {
  margin: 16px 0 0;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.review-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.review {
  padding: 18px 21px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent);
  border-left: 1px solid var(--line-soft);
}

.review-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.review-author {
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  color: var(--cream);
}

.review-stars {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--gold);
}

.review-date {
  margin-left: auto;
  font-size: 0.73rem;
  color: var(--muted-2);
}

.review-title {
  margin: 10px 0 6px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.review-body {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.64;
  color: var(--cream-2);
}

.review-verified {
  margin: 10px 0 0;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emerald);
}

@media (max-width: 860px) {
  .reviews {
    grid-template-columns: 1fr;
  }

  .reviews-summary {
    position: static;
  }

  .carousel-btn--prev {
    left: 0;
  }

  .carousel-btn--next {
    right: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Payment

   The card face is the one place the shop shows the shopper's own input back
   to them. It only ever renders the last four digits — the middle of the
   number is masked on screen exactly as it is in the database.
   ═══════════════════════════════════════════════════════════════════════════ */

.card-face {
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: space-between;
  gap: 12px 14px;
  min-height: 178px;
  margin-bottom: 24px;
  padding: 20px 22px 18px;
  background:
    radial-gradient(130% 95% at 100% 0%, rgba(212, 175, 55, 0.22), transparent 62%),
    linear-gradient(155deg, var(--card-bg-1), var(--lacquer));
  border: 1px solid var(--line);
  clip-path: polygon(
    18px 0,
    100% 0,
    100% calc(100% - 18px),
    calc(100% - 18px) 100%,
    0 100%,
    0 18px
  );
}

/* Gold contact plate, drawn rather than illustrated. */
.card-face-chip {
  grid-column: 1;
  width: 36px;
  height: 27px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 6px),
    linear-gradient(135deg, var(--gold-hi), var(--gold-lo));
}

.card-face-brand {
  grid-column: 2;
  align-self: center;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.card-face-number {
  grid-column: 1 / -1;
  font-family: var(--font-deco);
  font-size: clamp(1.05rem, 2.5vw, 1.45rem);
  letter-spacing: 0.15em;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}

.card-face-foot {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A declined card is a verdict, not a mistake in the form: the face recoils. */
@keyframes card-recoil {
  0%,
  100% {
    transform: translateX(0);
  }
  18% {
    transform: translateX(-9px);
  }
  38% {
    transform: translateX(8px);
  }
  58% {
    transform: translateX(-5px);
  }
  78% {
    transform: translateX(3px);
  }
}
#payment-pane.is-declined .card-face {
  animation: card-recoil 0.44s cubic-bezier(0.36, 0.07, 0.19, 0.97);
  border-color: var(--garnet);
}

.aside-sub {
  margin: 20px 0 10px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.test-cards {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.test-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 11px;
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--cream-2);
  background: none;
  border: 1px dashed var(--line);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.test-card:hover,
.test-card:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
}

.test-card-number {
  font-variant-numeric: tabular-nums;
}

.test-card-outcome {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}

@media (prefers-reduced-motion: reduce) {
  #payment-pane.is-declined .card-face {
    animation: none;
  }
}

/* ==========================================================================
   Comptes
   --------------------------------------------------------------------------
   Signing in is optional everywhere, so none of this is ever in the way. The
   panels sit inside the same `.checkout` grid as every other two-column page,
   and a guest's checkout is simply the one with no strip above the form.
   ========================================================================== */

/* ── Sign-in / create-account tabs ───────────────────────────────────── */

.auth-tabs {
  display: flex;
  gap: 0;
  margin: 0 0 28px;
  border-bottom: 1px solid var(--line);
}

.auth-tab {
  position: relative;
  padding: 12px 20px;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease;
}
.auth-tab:hover {
  color: var(--gold-hi);
}
.auth-tab[aria-selected="true"] {
  color: var(--gold);
}
/* The rule under the chosen tab covers the panel's own hairline. */
.auth-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--gold);
}

/* The password policy, stated once, under the field it applies to. */
.field-note {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--muted-2);
}

/* ── The strip above the checkout form ───────────────────────────────────
   Three variants, one per case the page actually has: a guest being told an
   account is not required, a member with a saved address being offered one
   click, and a member without one being told what was pre-filled. */

.account-nudge {
  display: grid;
  gap: 7px;
  margin: 0 0 28px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold-lo);
  background: rgba(212, 175, 55, 0.04);
}
.account-nudge p {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 300;
  color: var(--cream-2);
}
.account-nudge a {
  color: var(--gold);
  border-bottom: 1px solid rgba(212, 175, 55, 0.4);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.account-nudge a:hover {
  color: var(--gold-hi);
  border-bottom-color: var(--gold);
}
.account-nudge-note {
  font-family: var(--font-display);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
/* A saved address is settled business, so its edge turns emerald. */
.account-nudge--saved {
  border-left-color: var(--emerald);
}

/* ── The one-click switch ────────────────────────────────────────────── */

.switch {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  cursor: pointer;
}
.switch-body {
  display: grid;
  gap: 5px;
}
.switch-title {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.switch-detail {
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--cream-2);
}

/* One ornament for every checkbox, in the square Deco idiom the filters use. */
.switch input,
.checkbox input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  border: 1px solid var(--line);
  background: #0b0b0f;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.switch input {
  margin-top: 2px;
  border-color: var(--gold);
}
.switch input::after,
.checkbox input::after {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--black);
  transform: rotate(45deg) scale(0);
  transition: transform 0.16s ease;
}
.switch input:checked,
.checkbox input:checked {
  background: var(--gold);
  border-color: var(--gold);
}
.switch input:checked::after,
.checkbox input:checked::after {
  transform: rotate(45deg) scale(1);
}
.switch input:focus-visible,
.checkbox input:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 2px;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--cream-2);
  cursor: pointer;
}

/* ── Account page ────────────────────────────────────────────────────── */

.panel--narrow {
  max-width: 520px;
  margin: 0 auto;
}

.account-perks {
  display: grid;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.account-perks li {
  position: relative;
  padding-left: 20px;
  font-size: 0.84rem;
  font-weight: 300;
  color: var(--cream-2);
}
.account-perks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: var(--gold-lo);
}

.account-orders {
  display: grid;
  gap: 1px;
  margin-bottom: 8px;
}

.account-order {
  display: grid;
  gap: 8px;
  padding: 13px 15px;
  border: 1px solid var(--line-soft);
  background: var(--lacquer-2);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.account-order:hover,
.account-order:focus-visible {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.06);
}

.account-order-head,
.account-order-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.account-order-foot {
  font-size: 0.7rem;
  font-weight: 300;
  color: var(--muted-2);
}
.account-order-ref {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gold);
}
.account-order-total {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--gold-hi);
}

/* A settled order and an unpaid one must not look alike in a list. */
.status-pill--paid {
  border-color: rgba(31, 122, 82, 0.7);
  background: rgba(31, 122, 82, 0.16);
  color: #8fe0b8;
}
.status-pill--cancelled {
  border-color: rgba(168, 68, 58, 0.6);
  background: rgba(168, 68, 58, 0.14);
  color: #dba199;
}