/*
 * ATXoniqed TCG storefront.
 *
 * Layout follows CoreTCG's structure: a tinted page ground with chrome-free
 * product tiles, square corners, and a dense grid. The tint is what creates
 * separation, which is why nothing here needs a border or a drop shadow.
 */

/*
 * "Quarry" — palette derived from the logo so the store and the mark read as
 * one brand. Stone ground, near-black chrome matching the logo outline, gold
 * for price and buy actions, grass green for in-stock.
 */
:root {
  /* Page ground is a paler tint of the masthead blue: same hue, lightened so
     price, stock and muted text all clear 4.5:1 — the masthead value itself
     is too dark for a full page. Being lighter also keeps the header reading
     as a distinct band rather than blending into the page. */
  --ground: #d3e6f4;
  --raised: #ffffff; /* panels, tile hover */
  --sunk: #ffffff; /* image wells — white, so product photos pop off the blue */
  /* Foot of the image-well gradient — set to the page ground so the well
     fades into the page with no visible edge. */
  --well-foot: #c9dfef;
  /* Cloudy sky blue, lightened from the logo's own sky (#427dcb, which is too
     mid-tone to carry either dark or light text legibly). Being a light bar,
     everything sitting on it goes dark rather than light. */
  --chrome: #a9c9e4;
  /* Deeper blue for the utility strip and nav. Three flat bars in one tone
     read as monotonous; alternating tones give the header depth. */
  --chrome-deep: #2f5d84;
  --on-chrome-deep: #ffffff; /* 6.95:1 */
  --chrome-edge: rgba(20, 40, 60, 0.16);
  --fg: #23241f; /* body text — separate from --chrome so dark themes work */
  --on-chrome: #1c2b38; /* text on a chrome bar — 8.4:1 here */
  --on-chrome-muted: #3c5062; /* footer labels — 4.9:1 on the blue bar */
  --on-chrome-hover: #0a1620;
  --input-bg: #ffffff;
  --muted: #4a6072;
  --line: #b9d2e5;
  /* Two golds, because one can't do both jobs: --accent is bright enough to
     work as a filled button, --accent-ink is dark enough to pass contrast as
     text on the stone ground (4.96:1 vs the bright gold's 2.13:1). */
  --accent: #c8901a;
  --accent-ink: #7d5608;
  --on-accent: #23241f; /* text on a gold fill — dark, not white (5.55:1) */
  /* Darkened from #4e8f32, which was only 3.0:1 on the old ground — the stock
     count was the least readable text on the page. */
  --good: #356420;
  --low: #b4341f;

  --sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Azeret Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --s1: 0.5rem;
  --s2: 0.875rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;

  --maxw: 1400px;
}

/*
 * "Deepslate" — the dark alternative, in the spirit of skyboxct.com.
 * Only the tokens change; every rule below is palette-agnostic.
 */
:root[data-theme="deepslate"] {
  --ground: #1a1f19;
  --raised: #252b23;
  --sunk: #131813;
  --well-foot: #141811;
  --chrome: #0e120d;
  --chrome-deep: #060806;
  --on-chrome-deep: #e9ede7;
  --chrome-edge: rgba(255, 255, 255, 0.1);
  --fg: #e9ede7;
  --on-chrome: #e9ede7;
  --on-chrome-muted: #8f9a8c;
  --on-chrome-hover: #ffffff;
  --input-bg: #1a1f19;
  --muted: #8f9a8c;
  --line: #333b31;
  --accent: #d4a12a; /* gold lifted for contrast against near-black */
  --accent-ink: #e0b040; /* inverted: on a dark ground, text gold goes lighter */
  --on-accent: #16190f;
  --good: #7cc142;
  --low: #e08b5e;
}

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

body {
  margin: 0;
  /* 100vw counts the scrollbar, so full-bleed sections overshoot by ~15px.
     Clipping here keeps the page from scrolling sideways. */
  overflow-x: hidden;
  background: var(--ground);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: var(--accent-ink);
}
/* Links in the chrome bars resolve against the bar, not the page ground, so
   they use their own hover token rather than the page's text-gold. */
.utility a:hover,
.masthead a:hover,
.mainnav a:hover,
.sitefoot a:hover {
  color: var(--on-chrome-hover);
}

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--s3);
}

/* ---------- utility bar ---------- */
.utility {
  background: var(--chrome-deep);
  color: var(--on-chrome-deep);
  font-size: 0.76rem;
  letter-spacing: 0.01em;
}
.utility .container {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s2);
  align-items: center;
  padding-block: 0.45rem;
}
/* Hairline dividers instead of a run-on sentence of facts. */
.utility .bit {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-right: var(--s2);
  border-right: 1px solid rgba(255, 255, 255, 0.22);
}
.utility .bit:last-of-type {
  border-right: 0;
}
.utility .bit b {
  font-weight: 640;
}
.utility a:hover {
  color: var(--on-chrome-deep);
  text-decoration: underline;
}
.utility .spacer {
  margin-left: auto;
}

/* ---------- masthead ---------- */
/* Utility bar, masthead and nav share --chrome so they read as one solid block. */
/* Light band between two deeper ones, with a soft sky gradient rather than a
   flat fill, and a gold hairline tying it to the accent. */
.masthead {
  background: linear-gradient(to bottom, #c2d9ec 0%, var(--chrome) 62%, #9dc0de 100%);
  color: var(--on-chrome);
  border-bottom: 2px solid var(--accent);
}
.masthead .container {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-block: var(--s2);
  min-height: 92px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.brand img {
  height: 76px;
  width: auto;
  /* Lifts the badge off the gradient so it doesn't sit flat against it. */
  filter: drop-shadow(0 2px 5px rgba(20, 40, 60, 0.3));
}
.brand:hover {
  color: inherit;
}

/* ---------- home hero ---------- */
/* Breaks out of .container to span the viewport. The negative margins are
   half the difference between the container and the window, so it works at
   any width without knowing the container size. */
.hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--chrome);
  overflow: hidden;
}
/* Capped at 30vw. Smaller display = more source pixels per screen pixel, so
   the art reads sharper; the source is 1983px wide, which now covers a 1920
   screen without any upscaling. */
.hero img {
  width: 100%;
  height: clamp(240px, 30vw, 480px);
  display: block;
  object-fit: cover;
  object-position: center center;
  animation: hero-settle 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes hero-settle {
  from {
    opacity: 0;
    transform: translateY(14px) scale(1.015);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.searchform {
  display: flex;
  flex: 1;
  max-width: 460px;
  margin-inline: auto;
}
.searchform input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-right: 0;
  background: var(--input-bg);
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.88rem;
  color: var(--fg);
}
.searchform button {
  border: 0;
  background: var(--chrome);
  color: var(--on-chrome);
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.searchform button:hover {
  background: var(--accent);
}

.masthead-actions {
  display: flex;
  gap: var(--s3);
  align-items: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.cartlink {
  font-family: var(--mono);
  font-size: 0.8rem;
}

/* ---------- primary nav ---------- */
.mainnav {
  background: var(--chrome-deep);
  color: var(--on-chrome-deep);
  font-weight: 550;
}
.mainnav .container {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}
.mainnav > .container > * {
  position: relative;
}
.navitem > a,
.navitem > span {
  display: block;
  padding: 0.6rem var(--s2);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}
.navitem:hover > a,
.navitem:hover > span {
  background: var(--accent);
  color: var(--on-accent);
}

/* mega menu */
.megamenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  background: var(--raised);
  color: var(--fg);
  border: 1px solid var(--line);
  border-top: 0;
  padding: var(--s3);
  gap: var(--s5);
  min-width: 520px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.navitem:hover .megamenu,
.navitem:focus-within .megamenu {
  display: flex;
}
.megacol {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 200px;
}
.megacol h4 {
  margin: 0 0 0.4rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 600;
}
.megacol a {
  font-size: 0.85rem;
  padding: 0.15rem 0;
}
.megacol .viewall {
  margin-top: 0.4rem;
  font-weight: 600;
  color: var(--accent-ink);
}

/* ---------- category header band ---------- */
/* Battle art behind the collection/set title. The gradient is what keeps the
   type legible over a busy illustration — without it the title disappears. */
.cathead {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: var(--s3);
  position: relative;
  /* Tall enough to show the battle scene rather than a thin slice of it.
     Scales with viewport so the art isn't reduced to a stripe on wide screens. */
  min-height: clamp(250px, 28vw, 430px);
  display: flex;
  align-items: flex-end;
  background: var(--chrome) center center / cover no-repeat;
  overflow: hidden;
}
.cathead::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 14, 10, 0.88) 0%, rgba(12, 14, 10, 0.25) 55%, transparent 100%);
}
.cathead .inner {
  position: relative;
  z-index: 1;
  padding: var(--s3);
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  flex-wrap: wrap;
}
.cathead h1 {
  margin: 0;
  color: #fff;
  font-size: 1.75rem;
  font-weight: 680;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.cathead .count {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.82);
}
.cathead .crumb {
  padding: 0;
  color: rgba(255, 255, 255, 0.7);
  flex-basis: 100%;
}
.cathead .crumb a:hover {
  color: #fff;
}

/* ---------- page furniture ---------- */
.crumb {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding-top: var(--s3);
}
.pagehead {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  flex-wrap: wrap;
  padding: 0.35rem 0 var(--s3);
}
.pagehead h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.pagehead .count {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
}
.sectionhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  margin: var(--s4) 0 var(--s2);
}
.sectionhead h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 640;
  letter-spacing: -0.02em;
}
.sectionhead a {
  font-size: 0.82rem;
  color: var(--accent-ink);
  font-weight: 550;
}

/* ---------- product grid ---------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--s1);
  padding-bottom: var(--s5);
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.28rem;
  padding: var(--s2) 0.6rem;
  transition: background 0.15s ease;
}
.tile:hover {
  background: var(--raised);
  color: inherit;
}
.tile .art {
  width: 100%;
  aspect-ratio: 4 / 5;
  /* White behind the product, fading out to the page blue in every direction.
     Radial rather than a bottom edge, so the product sits in a pool of light
     instead of on a shelf. Done here rather than baked into the photo: burnt
     into a JPEG it would be a bright rectangle on a dark tile, and the photo's
     own white would cover the middle of this anyway. */
  background: radial-gradient(
    ellipse 82% 86% at 50% 50%,
    var(--sunk) 34%,
    var(--well-foot) 100%
  );
  /* Breathing room baked into the well; the image fills what's left and is
     centred by object-fit, which never crops — robust where percentage
     max-height inside aspect-ratio is not (mobile Safari clips tall packs). */
  padding: 14% 9%;
  margin-bottom: 0.35rem;
  overflow: hidden;
  border-radius: 10px; /* softens the tile edge without going pill-round */
  position: relative; /* anchors the sold-out flag */
}
/* contain, never cover — upscaling a 200px source is what makes it mush.
   Capped against the tile's *width* on both axes, which is what the old
   square canvas did: it fitted the product into a square of the tile's width,
   so a tall product never used the extra height a 4:5 tile has. Matching that
   keeps products the size they were, and leaves the gradient visible all
   the way round. */
.tile .art img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* whole image, centred, never cropped */
}
.tile .art .placeholder {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--muted);
}
.tile .set {
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.tile .name {
  font-size: 0.81rem;
  line-height: 1.3;
  font-weight: 460;
}
.tile .price {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--accent-ink);
  margin-top: 0.15rem;
}
.stk {
  font-family: var(--mono);
  font-size: 0.63rem;
  font-variant-numeric: tabular-nums;
  color: var(--good);
}
.stk.low {
  color: var(--low);
}
.stk.out {
  color: var(--muted);
}

/* ---------- sold out ---------- */
/* Sold-out products stay listed and keep their URL, but recede: the art
   desaturates and a band across the image states it plainly, so the status
   is readable at a glance in a dense grid without reading the caption. */
.tile.soldout .art img {
  filter: grayscale(0.85);
  opacity: 0.5;
}
.tile.soldout .name,
.tile.soldout .price {
  color: var(--muted);
}

.soldout-flag {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(20, 22, 18, 0.86);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-align: center;
  padding: 0.4rem 0.25rem;
  pointer-events: none;
}

/* Same treatment, larger, on the product page. */
.pdp .gallery {
  position: relative;
}
.pdp .gallery.soldout img {
  filter: grayscale(0.85);
  opacity: 0.5;
}
.pdp .gallery .soldout-flag {
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  padding: 0.7rem 0.5rem;
}

/* ---------- set index ---------- */
.setgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--s1);
}
.setcard {
  background: var(--raised);
  border: 1px solid var(--line);
  padding: var(--s2);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.setcard:hover {
  border-color: var(--accent);
  color: inherit;
}
.setcard .code {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--accent-ink);
  font-weight: 600;
}
.setcard .nm {
  font-weight: 580;
  font-size: 0.95rem;
}
.setcard .n {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
}

/* ---------- product detail ---------- */
.pdp {
  display: grid;
  grid-template-columns: minmax(280px, 460px) 1fr;
  gap: var(--s5);
  padding-bottom: var(--s5);
  align-items: start;
}
.pdp .gallery {
  background: radial-gradient(
    ellipse 82% 86% at 50% 50%,
    var(--sunk) 34%,
    var(--well-foot) 100%
  );
  aspect-ratio: 4 / 5;
  padding: 10% 8%;
  overflow: hidden;
}
.pdp .gallery img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* whole image, centred, never cropped */
}
.pdp .info {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.pdp .set {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-ink);
  font-weight: 600;
}
.pdp h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}
.pdp .price {
  font-family: var(--mono);
  font-size: 1.85rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.pdp .meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
.pdp .desc {
  font-size: 0.92rem;
  max-width: 62ch;
}
.pdp .desc :is(p, ul, ol) {
  margin: 0 0 0.8rem;
}

.btn {
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.7rem 1.6rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 560;
  cursor: pointer;
  align-self: flex-start;
}
.btn:hover {
  background: var(--chrome);
}
.btn[disabled] {
  background: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

/* ---------- flash messages ---------- */
.flashes {
  list-style: none;
  margin: var(--s3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.flash {
  padding: 0.6rem var(--s2);
  font-size: 0.88rem;
  border-left: 3px solid var(--muted);
  background: var(--raised);
}
.flash.success {
  border-left-color: var(--good);
}
.flash.warning {
  border-left-color: var(--accent);
}
.flash.error {
  border-left-color: var(--low);
}

/* ---------- cart & order tables ---------- */
.cartwrap {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 320px);
  gap: var(--s4);
  align-items: start;
  padding-bottom: var(--s5);
}
.carttable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--raised);
}
.carttable th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
  padding: 0.7rem var(--s2);
  border-bottom: 1px solid var(--line);
}
.carttable td {
  padding: var(--s2);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.carttable .num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.carttable .r {
  text-align: right;
}
.carttable .thumb {
  width: 74px;
}
.carttable .thumb img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: var(--sunk);
}
.carttable .pname {
  display: block;
  font-weight: 550;
}
.carttable .set {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.qtyform {
  display: flex;
  gap: 0.3rem;
}
.qtyform input {
  width: 4.2rem;
  padding: 0.35rem 0.4rem;
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--fg);
  font: inherit;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.qtyform button,
.linkbtn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
}
.qtyform button:hover,
.linkbtn:hover {
  color: var(--fg);
  border-color: var(--muted);
}

.summary {
  background: var(--raised);
  border: 1px solid var(--line);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.summary h2 {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  font-weight: 640;
}
.summary .line {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  font-size: 0.9rem;
}
.summary .line.muted {
  color: var(--muted);
  font-size: 0.82rem;
}
.summary .line.total {
  border-top: 1px solid var(--line);
  padding-top: 0.55rem;
  margin-top: 0.3rem;
  font-weight: 660;
  font-size: 1.05rem;
}
.summary .num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
/* The checkout control is an <a>, so it needs block display to honour padding. */
.summary .btn {
  display: block;
  margin-top: 0.5rem;
  text-align: center;
  align-self: stretch;
}
.keepshopping {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
}

.addform {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.addform input {
  width: 4.4rem;
  padding: 0.5rem;
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--fg);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.cartlink.has-items {
  font-weight: 660;
}

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

/* Phones: two product tiles across rather than one, so more shows per scroll.
   Capped at 600px so tablets and desktop keep the auto-fill count. */
@media (max-width: 600px) {
  .tiles,
  .setgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- content page header ---------- */
/* Shared band so About / FAQ / Contact / policies read as one family, and as
   deliberate pages rather than leftover text dropped under the nav. */
.pagehero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: var(--s4);
  background: var(--chrome-deep);
  color: var(--on-chrome-deep);
}
.pagehero .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s4) var(--s3);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pagehero .eyebrow {
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.75;
}
/* The band is dark, so the page's dark text-gold hover would be unreadable. */
.pagehero a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pagehero a:hover {
  color: #fff;
}
.pagehero h1 {
  margin: 0;
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  font-weight: 680;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.pagehero p {
  margin: 0.2rem 0 0;
  max-width: 58ch;
  font-size: 0.95rem;
  opacity: 0.88;
}

/* ---------- prose (about, policies) ---------- */
.prose {
  max-width: 64ch;
  font-size: 1rem;
  line-height: 1.7;
  padding-bottom: var(--s5);
}
.prose :is(p, li) {
  margin: 0 0 1.1rem;
}
/* Opening paragraph carries the page — set it larger than the rest. */
.prose > p:first-child {
  font-size: 1.14rem;
  line-height: 1.6;
  color: var(--fg);
}
.prose h2 {
  font-size: 1.15rem;
  font-weight: 640;
  margin: var(--s4) 0 0.6rem;
  letter-spacing: -0.015em;
}
.prose a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose .signoff {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---------- faq ---------- */
.faq {
  margin: 0 0 var(--s4);
  max-width: 72ch;
  border-top: 1px solid var(--line);
}
.faq dt {
  font-weight: 620;
  font-size: 1rem;
  padding: var(--s3) 0 0.35rem;
  letter-spacing: -0.01em;
}
.faq dd {
  margin: 0 0 var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.65;
  max-width: 62ch;
}
.faq dd a {
  color: var(--accent-ink);
}

/* A closing prompt so the page ends with somewhere to go. */
.endcap {
  background: var(--raised);
  border: 1px solid var(--line);
  padding: var(--s3);
  max-width: 72ch;
  margin-bottom: var(--s5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
}
.endcap p {
  margin: 0;
  font-size: 0.92rem;
}
.endcap strong {
  display: block;
  font-weight: 640;
  margin-bottom: 0.15rem;
}
.endcap .btn {
  margin-left: auto;
}

/* ---------- contact detail cards ---------- */
.contactcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.ccard {
  background: var(--raised);
  border: 1px solid var(--line);
  padding: var(--s2) var(--s3);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.ccard .lbl {
  font-family: var(--mono);
  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.ccard .val {
  font-size: 0.98rem;
  font-weight: 560;
}
.ccard a {
  color: var(--accent-ink);
  text-decoration: none;
}
.ccard a:hover {
  text-decoration: underline;
}

/* ---------- forms ---------- */
.contactwrap,
.authwrap {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 400px);
  gap: var(--s5);
  align-items: start;
  padding-bottom: var(--s5);
}
.authwrap {
  grid-template-columns: minmax(280px, 420px) 1fr;
}
.contactform {
  background: var(--raised);
  border: 1px solid var(--line);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.contactform h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 640;
}
.contactform label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
}
.contactform label > span {
  font-weight: 550;
}
.contactform label em {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--muted);
}
.contactform :is(input, textarea, select) {
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--fg);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.5rem 0.6rem;
  width: 100%;
}
.contactform textarea {
  resize: vertical;
}
.contactform .btn {
  align-self: flex-start;
}
.err {
  color: var(--low);
  font-size: 0.8rem;
  font-weight: 550;
}

/* ---------- newsletter ---------- */
.subcopy {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  color: var(--on-chrome-muted);
  max-width: 30ch;
}
.subform {
  display: flex;
  max-width: 280px;
}
.subform input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--chrome-edge);
  border-right: 0;
  background: var(--input-bg);
  color: var(--fg);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.45rem 0.6rem;
}
.subform button {
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 560;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
}
.subform button:hover {
  background: var(--accent-ink);
  color: #fff;
}

@media (max-width: 820px) {
  .contactwrap,
  .authwrap {
    grid-template-columns: 1fr;
    gap: var(--s3);
  }
}

/* ---------- empty state ---------- */
.empty {
  padding: var(--s5) 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---------- footer ---------- */
.sitefoot {
  background: var(--chrome);
  color: var(--on-chrome);
  margin-top: var(--s5);
  font-size: 0.85rem;
}
.sitefoot .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s4);
  padding-block: var(--s4);
}
.sitefoot h4 {
  margin: 0 0 0.6rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--on-chrome-muted);
  font-weight: 600;
}
.sitefoot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.sitefoot a:hover {
  color: var(--on-chrome-hover);
  text-decoration: underline;
}
.legal {
  border-top: 1px solid var(--chrome-edge);
  font-size: 0.75rem;
  color: var(--on-chrome-muted);
}
.legal .container {
  display: block;
  padding-block: var(--s2);
}

@media (max-width: 860px) {
  .pdp {
    grid-template-columns: 1fr;
    gap: var(--s3);
  }
  .masthead .container {
    flex-wrap: wrap;
  }
  .searchform {
    order: 3;
    max-width: none;
    flex-basis: 100%;
  }
  .megamenu {
    position: static;
    min-width: 0;
    flex-direction: column;
    gap: var(--s2);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
  .hero img {
    animation: none;
  }
}

/* -- Graded slabs & raw singles ---------------------------------------- */
/* A graded card leads with its grade; a raw single with its condition. */
.gradebadge {
  display: inline-flex; align-items: baseline; gap: .55rem;
  margin: .35rem 0 .25rem; padding: .3rem .7rem;
  font-weight: 800; font-size: 1.15rem; letter-spacing: .02em;
  color: #fff; background: #3a53b8; border-radius: 8px;
}
.gradebadge .cert { font-size: .72rem; font-weight: 600; opacity: .85; letter-spacing: 0; }
.condbadge { margin: .3rem 0; color: var(--muted); font-size: .95rem; }
.condbadge b { color: inherit; }
/* Small badge in the corner of a listing tile's image. */
.tile .art { position: relative; }
.tilegrade {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 2px 7px; border-radius: 6px;
  font-size: .72rem; font-weight: 800; color: #fff;
  background: #3a53b8; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* -- Condition picker on multi-variant (single card) product pages ----- */
.varpick { margin: .5rem 0 .3rem; }
.varpick-label { display: block; font-size: .8rem; letter-spacing: .03em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .45rem; }
.varopts { display: flex; flex-wrap: wrap; gap: .5rem; }
.varopt {
  position: relative; display: flex; flex-direction: column; gap: 1px;
  min-width: 104px; padding: .5rem .7rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface, transparent);
}
.varopt input { position: absolute; opacity: 0; pointer-events: none; }
.varopt.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.varopt.out { opacity: .5; cursor: not-allowed; }
.varopt .vname { font-weight: 700; font-size: .9rem; }
.varopt .vprice { font-weight: 700; }
.varopt .vstk { font-size: .72rem; color: var(--muted); }
/* Small condition/grade chip beside a cart line item. */
.varchip { display: inline-block; margin-left: .1rem; padding: 1px 7px;
  font-size: .72rem; font-weight: 700; color: var(--accent-ink);
  border: 1px solid var(--line); border-radius: 20px; }

/* -- Footer socials (under the email signup) --------------------------- */
.socials { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.socials a {
  padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 20px;
  font-size: .85rem; font-weight: 600; text-decoration: none;
}
.socials a:hover { border-color: var(--accent); }

/* ===================================================================== */
/* Mobile navigation — a hamburger that opens a stacked, tap-to-expand   */
/* menu. Desktop keeps the horizontal bar with hover megamenus.          */
/* ===================================================================== */
.navtoggle { display: none; }

@media (max-width: 860px) {
  /* The toggle button spans the nav bar. */
  .navtoggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: var(--chrome-deep);
    color: var(--on-chrome-deep);
    border: 0;
    padding: 0.85rem var(--s2);
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
  }
  .navtoggle-bars { font-size: 1.15rem; line-height: 1; }

  .mainnav > .container { flex-direction: column; gap: 0; flex-wrap: nowrap; }

  /* Nav items are hidden until the menu is opened. */
  .mainnav .navitem { display: none; width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.08); }
  body.nav-open .mainnav .navitem { display: block; }

  .navitem > a,
  .navitem > span { padding: 0.85rem var(--s2); font-size: 0.95rem; }

  /* A caret marks the expandable (dropdown) items. */
  .navitem > span::after {
    content: "\25BE"; float: right; opacity: 0.6; transition: transform 0.15s ease;
  }
  .navitem.open > span::after { transform: rotate(180deg); }

  /* Don't leave the tapped row looking stuck-highlighted. */
  .navitem:hover > a,
  .navitem:hover > span { background: transparent; color: inherit; }

  /* Submenus: inline and collapsed until their item is tapped open. */
  .megamenu {
    position: static;
    min-width: 0;
    border: 0;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.14);
    color: var(--on-chrome-deep);
    padding: 0.2rem var(--s2) 0.6rem var(--s3);
    flex-direction: column;
    gap: var(--s2);
  }
  .navitem:hover .megamenu,
  .navitem:focus-within .megamenu { display: none; }
  .navitem.open .megamenu { display: flex; }
  .megacol { min-width: 0; }
  .megacol h4 { color: var(--on-chrome-deep); opacity: 0.65; }
  .megacol a { color: var(--on-chrome-deep); padding: 0.4rem 0; }
}

@media (max-width: 860px) {
  /* Nested mobile dropdown: the Sets / Product Type headers inside an open
     megamenu are themselves tap-to-expand, so the list stays short. */
  .megacol h4 {
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0.55rem 0;
  }
  .megacol h4::after {
    content: "\25BE";
    margin-left: auto;
    opacity: 0.6;
    transition: transform 0.15s ease;
  }
  .megacol.open h4::after { transform: rotate(180deg); }
  .megacol a { display: none; }
  .megacol.open a { display: block; }
}

/* "Shop by Set": tile grid on desktop, native dropdown on phones. */
.setselect { display: none; }
@media (max-width: 860px) {
  .setselect {
    display: block;
    width: 100%;
    padding: 0.7rem var(--s2);
    font: inherit;
    font-size: 0.95rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--fg);
    margin-bottom: var(--s3);
  }
  .setgrid { display: none; }
}

/* Mobile footer: drop the Sets column, collapse the Store column into a
   tap-to-expand dropdown. Desktop keeps every column open. */
@media (max-width: 860px) {
  .footcol-sets { display: none; }
  .footcol-collapse > h4 {
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding: 0.4rem 0;
  }
  .footcol-collapse > h4::after {
    content: "\25BE";
    margin-left: auto;
    opacity: 0.6;
    transition: transform 0.15s ease;
  }
  .footcol-collapse.open > h4::after { transform: rotate(180deg); }
  .footcol-collapse > ul { display: none; }
  .footcol-collapse.open > ul { display: flex; margin-top: 0.5rem; }
}