/* Self-hosted fonts (latin subset) — no third-party CDN, so the site works
   offline, leaks nothing to Google, and satisfies a strict font-src CSP. */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/outfit-400.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/outfit-500.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/outfit-600.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/outfit-700.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/outfit-800.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 900; font-display: swap; src: url('/assets/fonts/outfit-900.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/jetbrains-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/jetbrains-mono-700.woff2') format('woff2'); }

/* ============================================================
   The Cape Shop — design system
   Built to mirror the structure/polish of the reference store,
   recolored to a bright sky-blue + gold identity.
   ============================================================ */

:root {
  /* surfaces */
  --bg: #e6effc;
  --bg-darker: #cadcf5;
  --surface: #ffffff;
  --surface-muted: #f1f5fb;
  --foreground: #17233b;
  --border: #dbe6f5;

  /* brand */
  --primary: #2f6bff;
  --primary-dark: #1d54e0;
  --primary-light: #7ba4ff;
  --primary-rgb: 47, 107, 255;
  --accent: #f5b942;
  --accent-dark: #e0a020;

  /* text */
  --text-secondary: #55627a;
  /* #667085 clears WCAG AA (4.97:1 on white); the old #8a97ad was 2.95:1. */
  --text-muted: #667085;
  --text-on-primary: #ffffff;

  /* status */
  --good: #16a34a;
  --good-bg: #e9f9ef;
  --low: #ef5b6e;
  --low-bg: #fdecee;
  --warn: #f59e0b;

  /* crypto chips */
  --btc: #f7931a;
  --eth: #627eea;
  --ltc: #a6a9aa;
  --sol: #14b88a;

  /* effects */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px 0 #10275314, 0 8px 24px -10px #12295a24;
  --shadow-elev: 0 6px 14px -6px #12295a26, 0 22px 40px -16px #12295a2e;
  --shadow-glow: 0 0 0 4px rgba(var(--primary-rgb), 0.35);

  --motion-fast: .18s;
  --motion: .28s;
  --motion-slow: .5s;
  --ease: cubic-bezier(.22, .61, .36, 1);

  --maxw: 1180px;
  --font-sans: "Outfit", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --h1: clamp(2.4rem, 1.6rem + 3.3vw, 4.4rem);
  --h2: clamp(1.9rem, 1.35rem + 2.3vw, 3.4rem);
  --h3: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--foreground);
  background:
    radial-gradient(1200px 600px at 80% -10%, #ffffffcc, transparent 60%),
    radial-gradient(900px 500px at 0% 0%, #ffffff88, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-darker) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { line-height: 1.05; margin: 0; font-weight: 800; letter-spacing: -0.02em; }

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

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 700; cursor: pointer; border: 0;
  padding: .8rem 1.5rem; border-radius: var(--radius-pill);
  transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion) var(--ease), background var(--motion);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .cart-fab:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; filter: grayscale(.3); }
.btn-primary {
  color: var(--text-on-primary);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  box-shadow: 0 10px 22px -10px rgba(var(--primary-rgb), .7);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(var(--primary-rgb), .8); }
.btn-secondary {
  color: var(--foreground); background: var(--surface-muted);
  box-shadow: inset 0 0 0 1px var(--border);
}
.btn-secondary:hover { background: #e7eefb; }
.btn-ghost {
  background: var(--surface); color: var(--foreground);
  box-shadow: var(--shadow-card); padding: .6rem 1.15rem;
}
.btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--shadow-elev); }
.btn-accent {
  color: #3b2a02; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  box-shadow: 0 10px 22px -10px rgba(224, 160, 32, .7);
}
.btn-accent:hover { transform: translateY(-2px); }
.btn-block { width: 100%; }

/* ---------- nav ---------- */
.nav-shell { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(10px); background: linear-gradient(180deg, #e6effcd9, #e6effc66); }
.site-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .9rem 24px; max-width: var(--maxw); margin: 0 auto;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 900; }
.brand .logo-mark {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px -6px rgba(var(--primary-rgb), .8);
}
/* Custom block-letter wordmark (hand-built Minecraft-style logo SVG). */
.wordmark { display: block; height: 44px; width: auto; }
.site-footer .wordmark { height: 40px; }

.nav-links { display: flex; align-items: center; gap: .25rem; }
.nav-links a {
  padding: .5rem 1rem; border-radius: var(--radius-pill); font-weight: 600;
  color: var(--text-secondary); transition: color var(--motion-fast), background var(--motion-fast);
}
.nav-links a:hover { color: var(--foreground); background: #ffffff8c; }
.nav-links a.active {
  color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 8px 18px -10px rgba(var(--primary-rgb), .8);
}
.nav-actions { display: flex; align-items: center; gap: .5rem; }

/* Currency picker — an integrated flag dropdown built on a native <details>
   disclosure (no JS required). The trigger is a pill matching the icon buttons;
   the panel is an elevated menu of flag + code + name options. */
.currency-menu { position: relative; }
.currency-menu > summary { list-style: none; cursor: pointer; }
.currency-menu > summary::-webkit-details-marker { display: none; }
.currency-trigger {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 44px; padding: 0 .85rem; border-radius: var(--radius-pill);
  font: inherit; font-weight: 700; font-size: .85rem; color: var(--foreground);
  background: var(--surface); box-shadow: var(--shadow-card);
  transition: box-shadow var(--motion), background var(--motion-fast);
}
.currency-trigger:hover { box-shadow: var(--shadow-elev); }
.currency-menu > summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.currency-trigger .flag { font-size: 1.05rem; line-height: 1; }
.currency-trigger .chev { color: var(--text-muted); transition: transform var(--motion-fast) var(--ease); }
.currency-menu[open] .currency-trigger .chev { transform: rotate(180deg); }

.currency-panel {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60;
  display: flex; flex-direction: column; gap: .1rem; min-width: 210px; padding: .4rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-elev);
  animation: revealUp .18s var(--ease);
}
.currency-option {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .5rem .6rem; border: 0; border-radius: var(--radius-sm);
  font: inherit; font-size: .88rem; font-weight: 600; text-align: left; cursor: pointer;
  color: var(--text-secondary); background: transparent;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.currency-option:hover { background: var(--surface-muted); color: var(--foreground); }
.currency-option:focus-visible { outline: 3px solid var(--primary); outline-offset: -2px; }
.currency-option .flag { font-size: 1.15rem; line-height: 1; flex: none; }
.currency-option .cur-code { font-weight: 800; color: var(--foreground); min-width: 2.4rem; }
.currency-option .cur-name { color: var(--text-muted); font-size: .82rem; }
.currency-option .cur-check { margin-left: auto; color: var(--primary); display: inline-flex; }
.currency-option.is-active { background: var(--surface-muted); }
.currency-option.is-active .cur-name { color: var(--text-secondary); }

/* Mobile disclosure menu — hidden on desktop, revealed at the nav breakpoint. */
.nav-menu { display: none; position: relative; }
.nav-menu > summary { list-style: none; cursor: pointer; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu-panel {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 50;
  display: flex; flex-direction: column; gap: .15rem; min-width: 180px;
  background: var(--surface); border-radius: var(--radius); padding: .5rem;
  box-shadow: var(--shadow-elev); border: 1px solid var(--border);
}
.nav-menu-panel a {
  padding: .6rem .9rem; border-radius: var(--radius-sm); font-weight: 600;
  color: var(--text-secondary);
}
.nav-menu-panel a:hover { background: var(--surface-muted); color: var(--foreground); }
.nav-menu-panel a.active { color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.icon-btn {
  position: relative;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  display: grid; place-items: center; background: var(--surface);
  box-shadow: var(--shadow-card); transition: transform var(--motion-fast), box-shadow var(--motion);
  color: var(--foreground);
}
/* No transform on hover — moving the target caused first clicks to miss. */
.icon-btn:hover { box-shadow: var(--shadow-elev); background: #f3f7ff; }
.icon-btn svg { width: 20px; height: 20px; }
.cart-count {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--radius-pill); background: var(--accent); color: #3b2a02;
  font-size: .72rem; font-weight: 800; display: grid; place-items: center;
  box-shadow: 0 3px 8px -3px #0006;
}

/* ---------- generic sections ---------- */
main.page { display: block; }
.section { padding: 4.5rem 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.section-head h2 { font-size: var(--h2); }
.section-head p { color: var(--text-secondary); font-size: 1.08rem; margin: .8rem 0 0; }
.section-head .rule { width: 64px; height: 4px; border-radius: 4px; margin: 1rem auto 0;
  background: linear-gradient(90deg, var(--primary), var(--accent)); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--primary);
  background: #ffffffb0; padding: .4rem .9rem; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
}

/* ---------- cape scene (the hero visual + product imagery) ---------- */
.cape-scene {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background-size: cover; background-position: center;
  display: grid; place-items: center; isolation: isolate;
}
.cape-scene::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 90% at 50% 20%, transparent 40%, #0b183a33 100%);
}
.cape-scene .cape-art {
  position: relative; z-index: 2; width: 46%; max-width: 190px;
  /* Pivot high up, as if the cape were pinned at the shoulders, so the rotateZ
     sway swings the hem like fabric in a breeze rather than a rigid hop. */
  transform-origin: 50% 12%;
  transform: perspective(680px) rotateY(-17deg) rotateX(3deg);
  animation: capeSway 7s ease-in-out infinite;
  will-change: transform;
}
/* Vertical motion is in % of the cape's own height, so it scales with the
   image — a small card thumbnail bobs a couple of pixels, never out of frame,
   while the big hero cape gets the same proportional drift. */
@keyframes capeSway {
  0%   { transform: perspective(680px) rotateY(-19deg) rotateX(3deg) rotateZ(-1.3deg) translateY(0); }
  30%  { transform: perspective(680px) rotateY(-13deg) rotateX(3deg) rotateZ(1deg)    translateY(-2.5%); }
  55%  { transform: perspective(680px) rotateY(-16deg) rotateX(2deg) rotateZ(1.4deg)  translateY(-3.5%); }
  80%  { transform: perspective(680px) rotateY(-21deg) rotateX(3deg) rotateZ(-0.5deg) translateY(-1.5%); }
  100% { transform: perspective(680px) rotateY(-19deg) rotateX(3deg) rotateZ(-1.3deg) translateY(0); }
}
/* Desynchronise the grid so capes drift independently instead of hopping in
   unison. Negative delays start each mid-cycle; varied durations keep it organic. */
.product-grid .product-card:nth-child(3n+1) .cape-art { animation-delay: -1.1s; animation-duration: 7.6s; }
.product-grid .product-card:nth-child(3n+2) .cape-art { animation-delay: -3.4s; animation-duration: 6.8s; }
.product-grid .product-card:nth-child(3n)   .cape-art { animation-delay: -5.2s; }
.badge {
  position: absolute; z-index: 3; top: 12px; left: 12px;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; padding: .35rem .7rem; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 6px 14px -6px #0009;
}
.badge.accent { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #3b2a02; }

/* ---------- home hero ---------- */
.hero { padding: 2rem 0 3rem; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items: center; }
.hero-copy h1 { font-size: var(--h1); margin: 1.2rem 0 0; }
.hero-copy h1 .accent { color: var(--primary); }
.hero-copy .lead { color: var(--text-secondary); font-size: 1.15rem; margin: 1.1rem 0 0; max-width: 32rem; }
.hero-price { display: flex; align-items: center; gap: 1.2rem; margin: 1.8rem 0 0; flex-wrap: wrap; }
.hero-price .amt { font-size: 1.9rem; font-weight: 800; }
.hero-note { color: var(--text-muted); font-size: .85rem; margin: 1.4rem 0 0; }
.hero-visual { position: relative; display: block; }
.hero-visual .cape-scene { aspect-ratio: 4 / 4.2; box-shadow: var(--shadow-elev); }
.hero-visual .cape-art { max-width: 230px; width: 55%; }
/* Divider between the headline and the featured cape's name. */
.hero-divider {
  width: 72px; height: 4px; border-radius: 4px; margin: 1.4rem 0 0;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
/* The featured cape's name, shown big, cycling with a smooth cross-fade. */
.hero-featuring { display: flex; margin-top: .9rem; }
.hero-cape-name {
  font-size: 2.4rem; line-height: 1.1; font-weight: 800; color: var(--primary);
  text-decoration: none;
}
.hero-cape-name:hover { text-decoration: underline; }
#hero-scene, #hero-cape-name { transition: opacity .38s var(--ease); }
#hero-scene.is-swapping, #hero-cape-name.is-swapping { opacity: .1; }
.trust-badges { display: flex; gap: 1rem; margin-top: 1.6rem; flex-wrap: wrap; }
.trust-badges span {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600;
  color: var(--text-secondary); background: #ffffffa8; padding: .45rem .8rem;
  border-radius: var(--radius-pill); box-shadow: var(--shadow-card);
}

/* ---------- featured banner ---------- */
.featured-banner {
  display: grid; grid-template-columns: 340px 1fr; gap: 1.75rem; align-items: center;
  background: #ffffff9c; backdrop-filter: blur(6px);
  border: 1px solid #ffffffcc; border-radius: var(--radius-lg);
  padding: 1.4rem; box-shadow: var(--shadow-card);
}
.featured-banner .cape-scene { aspect-ratio: 4 / 3.1; }
.featured-banner h3 { font-size: var(--h3); }
.featured-banner .desc { color: var(--text-secondary); margin: .8rem 0 0; }
.featured-banner .row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; flex-wrap: wrap; }
.featured-banner .price { font-size: 1.7rem; font-weight: 800; }
/* Cross-fade the banner as it cycles through the featured capes. */
#feat-scene, #feat-name { transition: opacity .38s var(--ease); }
#feat-scene.is-swapping, #feat-name.is-swapping { opacity: .1; }

/* ---------- filter bar ---------- */
.filter-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: #ffffff9c; backdrop-filter: blur(6px); border: 1px solid #ffffffcc;
  border-radius: var(--radius-pill); padding: .5rem .6rem; box-shadow: var(--shadow-card);
  margin-bottom: 2rem;
}
.filter-pills { display: flex; gap: .35rem; }
.filter-pills button {
  font: inherit; font-weight: 700; cursor: pointer; border: 0; color: var(--text-secondary);
  padding: .5rem 1.1rem; border-radius: var(--radius-pill); background: transparent;
  transition: all var(--motion-fast);
}
.filter-pills button.active { color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.filter-search { position: relative; flex: 1; min-width: 220px; max-width: 340px; }
.filter-search input {
  width: 100%; font: inherit; border: 0; background: var(--surface-muted);
  border-radius: var(--radius-pill); padding: .6rem 1rem .6rem 2.4rem; color: var(--foreground);
}
.filter-search input:focus { outline: none; box-shadow: var(--shadow-glow); }
.filter-search svg { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); }
.filter-select {
  font: inherit; font-weight: 600; color: var(--foreground); cursor: pointer;
  border: 0; background: var(--surface-muted); border-radius: var(--radius-pill);
  padding: .6rem 1rem;
}
.filter-select:focus-visible { outline: none; box-shadow: var(--shadow-glow); }
.filter-check {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  font-weight: 600; color: var(--text-secondary); cursor: pointer; padding: 0 .6rem;
}
.filter-check input { accent-color: var(--primary); width: 1rem; height: 1rem; cursor: pointer; }

/* ---------- product grid + card ---------- */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
/* More than three featured capes: a horizontal scroll strip that shows ~3 at a
   time and snaps, instead of wrapping onto extra rows. */
.product-grid.is-scroll {
  display: flex; grid-template-columns: none;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: .75rem; scrollbar-width: thin;
}
.product-grid.is-scroll .product-card {
  flex: 0 0 calc((100% - 3rem) / 3); scroll-snap-align: start;
}
.product-card {
  background: var(--surface); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-card); display: flex; flex-direction: column;
  transition: transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-elev); }
.product-card .cape-scene { aspect-ratio: 4 / 3; border-radius: 0; }
.product-card .body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.product-card .title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.product-card .title-row h3 { font-size: 1.15rem; font-weight: 800; }
.stock-pill {
  flex: none; font-size: .72rem; font-weight: 800; padding: .25rem .6rem; border-radius: var(--radius-pill);
  color: var(--good); background: var(--good-bg); white-space: nowrap;
}
.stock-pill.low { color: var(--low); background: var(--low-bg); }
.stock-pill.out { color: var(--text-muted); background: var(--surface-muted); }
.stock-pill.made { color: var(--primary); background: #e6efff; display: inline-flex; align-items: center; gap: .25rem; }
.pd-stock.made { color: var(--primary); }
.product-card .desc {
  color: var(--text-secondary); font-size: .92rem; margin: .55rem 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  /* Reserve two lines so a short or missing description doesn't collapse and
     leave the price/foot floating with uneven whitespace against its neighbours. */
  min-height: 2.8em;
}
.product-card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 1rem; }
.product-card .price { font-size: 1.3rem; font-weight: 800; }
.cart-fab {
  width: 42px; height: 42px; border: 0; border-radius: var(--radius-pill); cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 8px 16px -8px rgba(var(--primary-rgb), .8);
  transition: transform var(--motion-fast);
}
.cart-fab:hover { transform: scale(1.08); }
.cart-fab svg { width: 18px; height: 18px; }

/* ---------- product detail ---------- */
.back-pill { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
/* Cape render (media) and buy panel (info) side by side; the redemption steps
   sit under the cape (steps) and the info column spans both rows, so the steps
   fill the space beneath the shorter media column instead of leaving it empty.
   On mobile the areas restack to media → info → steps (buy stays above steps). */
.product-detail {
  display: grid; grid-template-columns: 1.05fr 1fr; column-gap: 2.5rem; row-gap: 0;
  grid-template-areas: "media info" "steps info"; align-items: start;
}
.pd-media { grid-area: media; }
.pd-info { grid-area: info; }
.product-detail .cape-scene { aspect-ratio: 4 / 3.4; box-shadow: var(--shadow-elev); }
.pd-viewer-tag {
  position: absolute; z-index: 3; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: .4rem;
  background: #0b183acc; color: #fff; font-size: .74rem; font-weight: 600; padding: .4rem .8rem; border-radius: var(--radius-pill);
  border: 0; cursor: pointer; font-family: inherit; transition: background var(--motion-fast), transform var(--motion-fast);
}
.pd-viewer-tag:hover { background: var(--primary); transform: translateY(-1px); }

/* product viewer + try-on */
.pd-viewer { position: relative; }
.pd-viewer > #tryon-open {
  position: absolute; z-index: 4; left: 50%; bottom: 14px; top: auto; transform: translateX(-50%);
  background: #0b183ae6; box-shadow: 0 8px 20px -8px #0009;
}
.pd-viewer > #tryon-open:hover { background: var(--primary); transform: translateX(-50%) translateY(-1px); }
.tryon-stage {
  position: absolute; inset: 0; z-index: 5; border-radius: var(--radius); overflow: hidden;
  background-size: cover; background-position: center; box-shadow: var(--shadow-elev);
}
.tryon-stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 20%, transparent 40%, #0b183a44 100%); pointer-events: none; }
.tryon-stage canvas { position: relative; z-index: 1; width: 100%; height: 100%; display: block; cursor: grab; }
.tryon-stage canvas:active { cursor: grabbing; }
.tryon-stage .pd-hint { z-index: 2; }
.tryon-close {
  position: absolute; z-index: 3; top: 10px; right: 12px; width: 32px; height: 32px; border: 0; cursor: pointer;
  border-radius: 50%; background: #0b183acc; color: #fff; font-size: 1.3rem; line-height: 1; display: grid; place-items: center;
}
.tryon-close:hover { background: var(--low); }

/* modal */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: #0b183a88; backdrop-filter: blur(3px); }
.modal-card {
  position: relative; z-index: 1; background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elev); padding: 1.8rem; width: 100%; max-width: 400px;
  animation: revealUp .3s var(--ease);
}
.modal-card h3 { font-size: 1.4rem; margin-bottom: .3rem; }
.modal-x { position: absolute; top: 12px; right: 14px; border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--text-muted); cursor: pointer; }
.modal-x:hover { color: var(--foreground); }
.pd-hint {
  position: absolute; z-index: 3; bottom: 12px; left: 50%; transform: translateX(-50%);
  background: #0b183a99; color: #fff; font-size: .72rem; padding: .3rem .7rem; border-radius: var(--radius-pill);
}
.pd-cat { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--text-secondary);
  background: var(--surface-muted); padding: .3rem .8rem; border-radius: var(--radius-pill); }
.pd-title { font-size: var(--h2); margin: 1rem 0 .4rem; }
.pd-title .accent { color: var(--primary); }
.pd-price { font-size: 1.7rem; font-weight: 800; }
.pd-desc { color: var(--text-secondary); font-size: 1.05rem; margin: 1.1rem 0 0; }
.pd-buy-row { display: flex; align-items: center; gap: 1rem; margin: 1.6rem 0 0; flex-wrap: wrap; }
.qty-stepper { display: inline-flex; align-items: center; background: var(--surface); border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.qty-stepper button { width: 40px; height: 42px; border: 0; background: transparent; font-size: 1.2rem; cursor: pointer; color: var(--text-secondary); }
.qty-stepper input { width: 44px; height: 42px; border: 0; text-align: center; font: inherit; font-weight: 700; background: transparent; color: var(--foreground); }
.qty-stepper input:focus { outline: none; }
.pd-stock { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.pd-stock.low { color: var(--low); }
.pd-stock.good { color: var(--good); }
.pd-actions { display: flex; gap: 1rem; margin: 1.4rem 0 0; flex-wrap: wrap; }
/* Reassurance block under the buy row — fills the right rail with what a buyer
   wants to know at the point of purchase (delivery, trust, payment). */
.pd-assurance { list-style: none; margin: 2rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 1.05rem; }
.pd-assurance li { display: flex; gap: .85rem; align-items: flex-start; }
.pd-assurance li > svg { flex: none; width: 18px; height: 18px; color: var(--primary); margin-top: .15rem; }
.pd-assurance strong { display: block; font-weight: 700; font-size: .98rem; }
.pd-assurance span { color: var(--text-secondary); font-size: .9rem; }
/* Redemption steps card — sits under the cape render, filling the space beneath
   the shorter media column. Steps stack vertically to suit the narrow column. */
.pd-redeem { grid-area: steps; margin-top: 1.6rem; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 1.3rem 1.4rem; }
.pd-redeem-title { font-weight: 800; font-size: 1.05rem; margin-bottom: 1.2rem; }
.pd-steps { list-style: none; margin: 0; padding: 0; }
.pd-steps li { position: relative; display: flex; gap: .9rem; align-items: flex-start; padding-bottom: 1.5rem; }
.pd-steps li:last-child { padding-bottom: 0; }
/* The stepper spine: a line linking each marker down to the next, so the three
   read as a sequence rather than a bullet list. Drawn from just below one 32px
   marker to just into the next; the last item has none. */
.pd-steps li:not(:last-child)::before {
  content: ""; position: absolute; left: 16px; top: 36px; bottom: -2px; width: 2px;
  transform: translateX(-50%); background: rgba(var(--primary-rgb), .22); border-radius: 2px;
}
.pd-step-n {
  position: relative; z-index: 1;
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 900; font-size: .92rem; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 6px 14px -6px rgba(var(--primary-rgb), .8);
}
.pd-steps strong { display: block; font-weight: 700; font-size: .96rem; margin-bottom: .2rem; }
.pd-steps span { color: var(--text-secondary); font-size: .88rem; line-height: 1.5; }

/* ---------- creators ---------- */
.creator-row { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }
.creator { text-align: center; }
.creator .av { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto .6rem; background: linear-gradient(135deg, var(--primary-light), var(--primary)); box-shadow: var(--shadow-card); display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 1.6rem; }
.creator .name { font-weight: 800; }
.creator .subs { color: var(--text-secondary); font-size: .85rem; }

/* ---------- crypto chips ---------- */
.crypto-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.crypto-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .9rem;
  padding: .5rem .9rem; border-radius: var(--radius-pill); background: var(--surface);
  box-shadow: var(--shadow-card); cursor: pointer; border: 2px solid transparent;
  transition: border-color var(--motion-fast), transform var(--motion-fast);
}
.crypto-chip:hover { transform: translateY(-2px); }
.crypto-chip input { position: absolute; opacity: 0; }
.crypto-chip .coin-logo { width: 22px; height: 22px; border-radius: 50%; }
.crypto-chip .coin-meta { display: inline-flex; flex-direction: column; line-height: 1.15; text-align: left; }
.crypto-chip .coin-name { font-weight: 700; }
.crypto-chip .coin-chain { font-weight: 600; font-size: .68rem; letter-spacing: .01em; color: var(--text-muted); }
/* A coin whose payment-provider minimum is above the order total: greyed out, not
   selectable, and — on hover/focus — a tooltip stating the USD minimum. */
.crypto-chip.is-disabled { opacity: .48; cursor: not-allowed; filter: grayscale(.4); }
.crypto-chip.is-disabled:hover { transform: none; }
.crypto-chip[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: 200px; text-align: center;
  background: var(--foreground); color: #fff; padding: .4rem .6rem; border-radius: 8px;
  font-size: .72rem; font-weight: 600; line-height: 1.3;
  opacity: 0; pointer-events: none; transition: opacity var(--motion-fast); z-index: 20;
  box-shadow: var(--shadow-card);
}
.crypto-chip[data-tip]:hover::after,
.crypto-chip[data-tip]:focus-within::after { opacity: 1; }
.crypto-chip:has(input:checked) { border-color: var(--primary); box-shadow: var(--shadow-glow); }

/* ---------- cart ---------- */
.panel { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.empty-state { text-align: center; padding: 4rem 2rem; }
.empty-state .ic { width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 1.4rem; display: grid; place-items: center; background: var(--surface-muted); color: var(--text-muted); }
.empty-state .ic svg { width: 40px; height: 40px; }
.empty-state h3 { font-size: 1.5rem; }
.empty-state p { color: var(--text-secondary); margin: .6rem 0 1.6rem; }

.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }
.cart-lines { display: flex; flex-direction: column; gap: 1rem; }
.cart-line { display: grid; grid-template-columns: 88px 1fr auto; gap: 1rem; align-items: center; background: var(--surface); border-radius: var(--radius); padding: .9rem; box-shadow: var(--shadow-card); }
.cart-line .thumb { width: 88px; height: 72px; border-radius: var(--radius-sm); overflow: hidden; }
.cart-line .thumb .cape-scene { width: 100%; height: 100%; border-radius: 0; }
.cart-line .thumb .cape-art { width: 52%; }
.cart-line h4 { font-size: 1.05rem; }
.cart-line .meta { color: var(--text-secondary); font-size: .88rem; }
.cart-line .line-price { font-weight: 800; font-size: 1.1rem; }
.cart-qty { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; }
.qty-stepper.sm { border-radius: var(--radius-pill); }
.qty-stepper.sm button { width: 30px; height: 32px; font-size: 1.05rem; }
.qty-stepper.sm .qv { min-width: 30px; text-align: center; font-weight: 700; font-size: .95rem; }
.link-danger { background: none; border: 0; color: var(--low); font: inherit; cursor: pointer; font-size: .85rem; padding: 0; }
.summary { position: sticky; top: 90px; }
.summary .panel { padding: 1.5rem; }
.summary h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.summary .line { display: flex; justify-content: space-between; padding: .5rem 0; color: var(--text-secondary); }
.summary .line.total { border-top: 1px solid var(--border); margin-top: .5rem; padding-top: 1rem; color: var(--foreground); font-weight: 800; font-size: 1.25rem; }

/* ---------- checkout / payment ---------- */
.checkout-grid { display: grid; grid-template-columns: 1fr 380px; gap: 2rem; align-items: start; }
.pay-invoice { text-align: center; padding: 2rem; }
.pay-invoice .amt { font-size: 2.4rem; font-weight: 900; }
.pay-invoice .addr { font-family: var(--font-mono); background: var(--surface-muted); border-radius: var(--radius-sm); padding: .8rem 1rem; word-break: break-all; margin: 1rem 0; }
.pay-qr { margin: 1.4rem auto 0; max-width: 220px; }
.pay-qr svg { width: 100%; height: auto; display: block; background: #fff; padding: .6rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-card); }
.pay-qr figcaption { margin-top: .6rem; }
.code-reveal { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700; background: #0b183a; color: #6ff2b0; padding: 1rem 1.2rem; border-radius: var(--radius-sm); letter-spacing: .05em; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.code-reveal .code-value { word-break: break-all; }
/* Copy-to-clipboard button (payment address/amount, delivered codes). */
.copy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; flex: none;
  font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; border: 0;
  padding: .45rem .85rem; border-radius: var(--radius-pill);
  background: var(--surface); color: var(--foreground); box-shadow: var(--shadow-card);
  transition: background var(--motion-fast), color var(--motion-fast);
}
.copy-btn:hover { background: var(--surface-muted); }
.copy-btn.copied { background: var(--good-bg); color: var(--good); }
.copy-btn svg { width: 14px; height: 14px; }
.copy-btn.btn-block { width: 100%; }
.status-pill { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; padding: .3rem .8rem; border-radius: var(--radius-pill); }
.status-pill.pending { color: #92600a; background: #fff4dc; }
.status-pill.paid { color: var(--good); background: var(--good-bg); }
.status-pill.fulfilled { color: var(--primary); background: #e6efff; }
.status-pill.cancelled { color: #a2172b; background: var(--low-bg); }

/* ---------- forms ---------- */
.form-card { max-width: 460px; margin: 0 auto; padding: 2rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .4rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; padding: .7rem .9rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--foreground);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-glow); }
.form-error { background: var(--low-bg); color: #a2172b; border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: 1rem; font-size: .92rem; }
.form-ok { background: var(--good-bg); color: #0a6b32; border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: 1rem; font-size: .92rem; }
.form-warn { background: #fff5e0; color: #8a5a00; border: 1px solid #f2d38a; border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: 1rem; font-size: .92rem; }
.form-note { color: var(--text-secondary); font-size: .9rem; }

/* ---------- integrated confirmation modal (replaces browser confirm) ---------- */
.confirm-modal[hidden] { display: none; }
.confirm-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.confirm-backdrop { position: absolute; inset: 0; background: rgba(9, 20, 45, 0.55); backdrop-filter: blur(2px); }
.confirm-dialog { position: relative; background: var(--surface, #fff); border-radius: var(--radius-md, 16px); box-shadow: var(--shadow-elev); max-width: 420px; width: 100%; padding: 1.6rem 1.6rem 1.3rem; animation: confirmIn .15s ease-out; }
@keyframes confirmIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.confirm-title { margin: 0 0 .5rem; font-size: 1.15rem; }
.confirm-msg { margin: 0 0 1.3rem; color: var(--text-secondary); line-height: 1.5; }
.confirm-actions { display: flex; justify-content: flex-end; gap: .6rem; }
.confirm-ok { background: var(--low); color: #fff; }
.confirm-ok:hover { background: #d8394d; }
body.modal-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .confirm-dialog { animation: none; } }

/* ---------- keyboard focus ----------
   Every interactive control gets a clearly visible focus ring for keyboard
   users (WCAG 2.4.7). Uses :focus-visible so mouse clicks stay ring-free.
   Placed after the form :focus rules so it wins the equal-specificity tie. */
a:focus-visible, button:focus-visible, summary:focus-visible,
.btn:focus-visible, .btn-ghost:focus-visible, .icon-btn:focus-visible,
.cart-fab:focus-visible, .mini-btn:focus-visible, .nav-links a:focus-visible,
.qty-stepper button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.filter-search input:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 1px;
}
/* The real focus target is the visually-hidden radio inside the chip. */
.crypto-chip:has(input:focus-visible) { outline: 3px solid var(--primary); outline-offset: 2px; }

/* ---------- skip link ---------- */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--primary); color: #fff; font-weight: 700;
  padding: .6rem 1rem; border-radius: var(--radius-sm);
  transition: top var(--motion-fast) var(--ease);
}
.skip-link:focus { top: 12px; }

/* oauth — official "Continue with" buttons per Google & Discord brand guidelines */
.oauth-divider { display: flex; align-items: center; gap: .8rem; margin: 1.4rem 0 1.1rem; color: var(--text-muted); font-size: .82rem; }
.oauth-divider::before, .oauth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.oauth-btns { display: flex; flex-direction: column; gap: .7rem; }
.oauth-btn {
  /* Google spec: Roboto/system fallback for Google Sans Medium, 14/20 */
  font-family: "Roboto", "Segoe UI", system-ui, Arial, sans-serif;
  display: flex; align-items: center; justify-content: center; position: relative;
  min-height: 40px; padding: .625rem 1rem; border-radius: var(--radius-sm);
  font-size: 14px; line-height: 20px; font-weight: 500; cursor: pointer;
  transition: box-shadow var(--motion), background var(--motion), border-color var(--motion);
}
/* Logo is pinned left (12px per Google spec); label stays optically centered */
.oauth-btn-icon { position: absolute; left: 12px; display: inline-flex; align-items: center; justify-content: center; }
.oauth-btn-label { text-align: center; }
/* Google — light theme: #FFFFFF fill, #747775 1px inner stroke, #1F1F1F text.
   The "G" must sit on white; the white button provides that background. */
.oauth-btn.google { background: #FFFFFF; color: #1F1F1F; box-shadow: inset 0 0 0 1px #747775; }
.oauth-btn.google:hover { background: #F7F8F8; box-shadow: inset 0 0 0 1px #747775, var(--shadow-elev); }
/* Discord — Blurple #5865F2, white Clyde mark (do not recolor the logo) */
.oauth-btn.discord { background: #5865F2; color: #fff; }
.oauth-btn.discord:hover { background: #4752C4; box-shadow: var(--shadow-elev); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: .8rem; }
.faq-item { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
.faq-item summary { cursor: pointer; padding: 1.1rem 1.3rem; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--primary); transition: transform var(--motion-fast); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .a { padding: 0 1.3rem 1.2rem; color: var(--text-secondary); }

/* ---------- footer ---------- */
.site-footer { background: linear-gradient(180deg, #eef3fb, #e2ebf8); margin-top: 3rem; padding: 3rem 0 1.5rem; }
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.footer-cols .brand-col p { color: var(--text-secondary); margin: 1rem 0 0; max-width: 16rem; }
.footer-cols h5 { text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; color: var(--text-muted); margin: 0 0 1rem; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.footer-cols ul a { color: var(--text-secondary); display: inline-flex; align-items: center; gap: .4rem; }
.footer-cols ul a:hover { color: var(--primary); }
.footer-bottom { max-width: var(--maxw); margin: 2.5rem auto 0; padding: 1.5rem 24px 0; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; color: var(--text-muted); font-size: .88rem; flex-wrap: wrap; gap: .5rem; }

/* ---------- admin ---------- */
.admin-shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.admin-side { background: #0e1b34; color: #cdd9ee; padding: 1.5rem 1rem; position: sticky; top: 0; align-self: start; height: 100vh; }
.admin-side .brand { color: #fff; margin-bottom: 2rem; padding: 0 .5rem; }
.admin-side .logo-word { color: #fff; }
.admin-side .logo-word .accent { color: var(--accent); }
.admin-nav { display: flex; flex-direction: column; gap: .3rem; }
.admin-nav a { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: var(--radius-sm); color: #aebbd6; font-weight: 600; transition: background var(--motion-fast), color var(--motion-fast); }
.admin-nav a svg { width: 18px; height: 18px; }
.admin-nav a:hover { background: #ffffff12; color: #fff; }
.admin-nav a.active { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; }
.admin-side .side-foot { position: absolute; bottom: 1.2rem; left: 1rem; right: 1rem; font-size: .82rem; color: #8595b5; }
.admin-side .side-foot a { color: #aebbd6; }
.admin-main { padding: 2rem 2.4rem; background: #f3f6fc; min-width: 0; }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.8rem; gap: 1rem; flex-wrap: wrap; }
.admin-topbar h1 { font-size: 1.8rem; }
.admin-topbar .who { color: var(--text-secondary); font-size: .9rem; }
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-bottom: 2rem; }
.admin-stat { background: #fff; border-radius: var(--radius); padding: 1.3rem 1.4rem; box-shadow: var(--shadow-card); }
.admin-stat .k { display: flex; align-items: center; gap: .5rem; color: var(--text-secondary); font-weight: 600; font-size: .85rem; }
.admin-stat .k .ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #e6efff; color: var(--primary); }
.admin-stat .v { font-size: 2rem; font-weight: 900; margin-top: .5rem; }
.admin-stat .sub { color: var(--text-muted); font-size: .8rem; }
.admin-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; margin-bottom: 1.6rem; }
.admin-card .head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--border); }
.admin-card .head h2 { font-size: 1.15rem; }
.admin-card .pad { padding: 1.3rem; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: .8rem 1.3rem; border-bottom: 1px solid var(--border); }
.admin-table td { padding: .9rem 1.3rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr:hover td { background: #f8fbff; }
.admin-table .prod { display: flex; align-items: center; gap: .8rem; }
.admin-table .prod .thumb { width: 46px; height: 40px; border-radius: 8px; overflow: hidden; flex: none; }
.admin-table .prod .thumb .cape-scene { width: 100%; height: 100%; border-radius: 0; }
.admin-table .prod .thumb .cape-art { width: 54%; }
.admin-actions { display: flex; gap: .5rem; }
/* Self-contained so it looks right standalone (topbars, dashboard cards) and
   not just inside .admin-actions — a bare `.mini-btn` used to render as an
   unstyled native button/link box (no padding or radius) outside that wrapper. */
.mini-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  font: inherit; font-size: .82rem; font-weight: 700; white-space: nowrap;
  padding: .4rem .8rem; border-radius: var(--radius-pill);
  background: var(--surface-muted); box-shadow: inset 0 0 0 1px var(--border);
  color: var(--foreground); cursor: pointer; border: 0;
  transition: background var(--motion-fast);
}
.mini-btn:hover { background: #e7eefb; }
.mini-btn.primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; box-shadow: none; }
.mini-btn.danger { background: var(--low-bg); color: var(--low); box-shadow: inset 0 0 0 1px #f4c9cf; }
.mini-btn.danger:hover { background: #fbdde1; }
/* A collapsed danger action inside a table row: icon-only until hover. */
.icon-danger { background: none; box-shadow: none; color: var(--text-muted); padding: .4rem; }
.icon-danger:hover { background: var(--low-bg); color: var(--low); }
.pill-flag { font-size: .72rem; font-weight: 800; padding: .2rem .6rem; border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--text-secondary); }
.pill-flag.on { background: var(--good-bg); color: var(--good); }
.pill-flag.off { background: var(--low-bg); color: var(--low); }
.admin-form { max-width: 640px; }
.admin-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.admin-form-grid { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: start; }
.admin-form-grid .admin-form { max-width: none; }
.admin-preview { position: sticky; top: 1rem; }
.admin-preview .plabel { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; margin-bottom: .6rem; }
.admin-preview .cape-scene { aspect-ratio: 4 / 4.4; box-shadow: var(--shadow-card); }
.admin-preview .pv-meta { margin-top: .9rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.admin-preview .pv-name { font-weight: 800; font-size: 1.05rem; }
.admin-preview .pv-price { color: var(--primary); font-weight: 800; font-size: 1.1rem; }
@media (max-width: 900px) { .admin-form-grid { grid-template-columns: 1fr; } .admin-preview { position: static; max-width: 320px; } }
.admin-empty { text-align: center; padding: 3rem; color: var(--text-secondary); }

/* ---------- admin flash + email tab ---------- */
.admin-flash { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; border-radius: var(--radius); font-weight: 600; margin-bottom: 1.3rem; }
.admin-flash.ok { background: var(--good-bg); color: var(--good); }
.admin-flash.bad { background: var(--low-bg); color: var(--low); }
/* email sub-tabs */
.admin-subtabs { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1.4rem 0 1.1rem; border-bottom: 2px solid var(--border, #e5e9f2); }
.admin-subtabs .subtab { display: inline-flex; align-items: center; gap: .4rem; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: .6rem .9rem; font-size: .92rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; border-radius: 8px 8px 0 0; }
.admin-subtabs .subtab:hover { color: var(--text); background: var(--surface-muted, #f5f7fb); }
.admin-subtabs .subtab.active { color: var(--primary-dark, #1c4bd6); border-bottom-color: var(--primary, #2f6bff); }
.subpanel { display: none; }
.subpanel.active { display: block; }

/* email picker — keep every transactional email visible in one scannable row */
.email-picker {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .45rem; padding: .45rem;
  border-radius: 14px; max-width: 100%;
  background: #071a3d;
  border: 1px solid #12356d;
  box-shadow: 0 6px 18px -12px rgba(11,24,58,.5);
}
.email-pill {
  appearance: none; border: 1px solid #3d65a8; background: #102b5c; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-width: 0; min-height: 2.35rem; padding: .45rem .35rem; border-radius: 10px;
  font-size: .76rem; font-weight: 900; line-height: 1; text-align: center; color: #fff; white-space: nowrap;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.email-pill:hover { color: #fff; background: #1b4388; border-color: #7fb0ff; }
.email-pill.active {
  color: #071a3d;
  background: var(--accent, #f5a623);
  border-color: #ffd166;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.35);
}
.email-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; display: inline-block; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
@media (prefers-color-scheme: dark) {
  .email-picker { background: #071a3d; border-color: #12356d; }
  .email-pill { background: #102b5c; border-color: #3d65a8; color: #fff; }
  .email-pill:hover { background: #1b4388; color: #fff; }
  .email-pill.active { background: var(--accent, #f5a623); border-color: #ffd166; color: #071a3d; }
}
@media (max-width: 900px) {
  .email-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* email template editor: form on the left, live preview on the right */
.email-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }
.email-editor textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; line-height: 1.55; resize: vertical; min-height: 240px; }
.tpl-vars { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.tpl-chip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; font-weight: 700; padding: .25rem .55rem; border-radius: var(--radius-pill); border: 1px solid var(--border, #dbe3f1); background: var(--surface-muted, #f5f7fb); color: var(--primary-dark, #1c4bd6); cursor: pointer; }
.tpl-chip:hover { background: #e7eefb; }
.email-editor-preview .plabel { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; margin-bottom: .6rem; }
.email-preview-card { border: 1px solid var(--border, #e5e9f2); border-radius: var(--radius-md, 12px); overflow: hidden; position: sticky; top: 1rem; }
.email-preview-subject { padding: .8rem 1rem; font-weight: 700; background: var(--surface-muted, #f5f7fb); border-bottom: 1px solid var(--border, #e5e9f2); word-break: break-word; }
.email-preview-body { margin: 0; padding: 1rem; white-space: pre-wrap; word-break: break-word; font-size: .85rem; line-height: 1.55; color: var(--text-secondary); background: #fff; overflow-x: auto; min-height: 240px; }
@media (max-width: 900px) { .email-editor { grid-template-columns: 1fr; } .email-preview-card { position: static; } }

/* ---------- entrance animation ---------- */
.reveal { opacity: 0; transform: translateY(16px); animation: revealUp .7s var(--ease) forwards; }
.reveal.d1 { animation-delay: .08s; } .reveal.d2 { animation-delay: .16s; } .reveal.d3 { animation-delay: .24s; }
@keyframes revealUp { to { opacity: 1; transform: none; } }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero-grid, .product-detail, .featured-banner, .cart-layout, .checkout-grid { grid-template-columns: 1fr; }
  /* Single column: cape, then the buy panel, then the steps — the Buy button
     must stay above the redemption steps on phones. */
  .product-detail { grid-template-areas: "media" "info" "steps"; row-gap: 0; }
  .pd-redeem { margin-top: 2rem; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid.is-scroll .product-card { flex-basis: calc((100% - 1.5rem) / 2); }
  .featured-banner .cape-scene { max-width: 420px; }
  .summary { position: static; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { position: static; height: auto; }
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .nav-links { display: none; }
  .nav-menu { display: block; }
  /* De-crowd the top bar: collapse the currency picker to a flag-only pill that
     matches the icon buttons. The label + chevron return in the open panel. */
  .currency-trigger { width: 44px; padding: 0; justify-content: center; }
  .currency-trigger .cur-code, .currency-trigger .chev { display: none; }
  /* A fixed multi-gradient background repaints the whole viewport on every
     scroll frame — costly on phones. Let it scroll with the page instead. */
  body { background-attachment: scroll; }
  .product-grid, .admin-stats { grid-template-columns: 1fr; }
  .product-grid.is-scroll .product-card { flex-basis: 78%; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .section { padding: 3rem 0; }
  .admin-main { padding: 1.2rem; }
  .admin-form .row-2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  /* .reveal blocks start at opacity:0 and are faded in by animation. With
     animation disabled the keyframe never runs, so without this they would
     stay invisible — show them immediately instead. */
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Utilities — extracted from repeated inline styles
   ============================================================ */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.link-strong { color: var(--primary); font-weight: 700; }
/* Admin stat rows that show three tiles instead of the default four. */
.admin-stats.cols-3 { grid-template-columns: repeat(3, 1fr); }
/* The oversized gradient status number on the 404/500 pages. */
.error-code {
  font-size: 5rem; font-weight: 900; letter-spacing: -.04em; line-height: 1;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ============================================================
   Dark mode — follows the OS/browser preference only (not a toggle).
   With no `prefers-color-scheme: dark` signal the site stays in its
   default light theme, unchanged. The design is variable-driven, so
   most of this is just repainting the palette; the rest are targeted
   fixes for the handful of hardcoded light colours variables can't
   reach. Brand primary/accent are kept — they read well on dark.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    /* surfaces — deep navy that keeps the brand's blue temperature */
    --bg: #0a1123;
    --bg-darker: #060b18;
    --surface: #101b34;
    --surface-muted: #17223f;
    --foreground: #e9eefb;
    --border: #263452;

    /* text — all clear WCAG AA on the dark surfaces above */
    --text-secondary: #aeb9d3;
    --text-muted: #8b98b6;

    /* status — brighter fills, deep tinted backgrounds */
    --good: #34d399;
    --good-bg: #0f2c22;
    --low: #f8788b;
    --low-bg: #341620;
    --warn: #fbbf24;

    /* deeper shadows read on a dark canvas */
    --shadow-card: 0 1px 2px 0 #00000059, 0 8px 24px -10px #00000073;
    --shadow-elev: 0 6px 14px -6px #00000073, 0 22px 40px -16px #0000007d;
  }

  /* The layered light gradient becomes a subtle dark one. */
  body {
    background:
      radial-gradient(1200px 600px at 80% -10%, #16244a55, transparent 60%),
      radial-gradient(900px 500px at 0% 0%, #12224733, transparent 55%),
      linear-gradient(180deg, var(--bg) 0%, var(--bg-darker) 100%);
  }

  /* Translucent "glass" surfaces — repaint the white washes as dark. */
  .nav-shell { background: linear-gradient(180deg, #0a1123e6, #0a112399); }
  .nav-links a:hover { background: #ffffff0f; }
  .icon-btn:hover { background: var(--surface-muted); }
  .eyebrow { background: #17223fcc; }
  .trust-badges span { background: #17223fcc; }
  .featured-banner { background: #101b34cc; border-color: #26345299; }
  .filter-bar { background: #101b34cc; border-color: #26345299; }
  .btn-secondary:hover { background: #1c2c50; }
  .mini-btn:hover { background: #1c2c50; }

  /* Small blue-tinted chips that hardcode a pale blue fill. */
  .stock-pill.made,
  .status-pill.fulfilled,
  .admin-stat .k .ic { background: #16264d; }

  /* Status + form banners with baked-in light colours. */
  .status-pill.pending { color: #fcd34d; background: #3a2e12; }
  .status-pill.cancelled { color: #ffb4bd; }
  .form-error { color: #ffb4bd; }
  .form-ok { color: #86efac; }
  .form-warn { background: #3a2e12; color: #fcd34d; border-color: #5a4718; }

  /* The crypto tooltip paints text on var(--foreground); that flips light
     in dark mode, so pin it back to a dark chip. */
  .crypto-chip[data-tip]::after { background: #050b18; color: #fff; }

  /* Footer + admin canvas were solid/near-white. */
  .site-footer { background: linear-gradient(180deg, #0c1428, #080e1e); }
  .admin-main { background: var(--bg); }
  .admin-stat, .admin-card { background: var(--surface); }
  .admin-table tr:hover td { background: #16223f; }

  /* The email preview represents an actual (white) email — keep it light and
     legible instead of inheriting the dark body text colour. */
  .email-preview-subject { background: #f5f7fb; color: #1f2937; border-color: #e5e9f2; }
  .email-preview-body { background: #fff; color: #1f2937; }
}