/* ============================================================
   MadWare storefront skin.
   Loads after shop.css; reuses the site palette (--cyan, --magenta,
   --uv, --amber) and the terminal type, but lays the shop out on a
   flat black page instead of the old animated WebGL backdrop.
   ============================================================ */

/* ---------------- LT Wave ----------------
   LyonsType's LT Wave, the shop's display face: the soft geometric sans the
   MadWare wordmark and headings are set in. SIL Open Font License 1.1, which
   permits web embedding — the licence ships alongside the files in
   assets/fonts/OFL.txt. Body copy stays on Inter. */
@font-face {
  font-family: "LT Wave";
  src: url("/assets/fonts/LTWave-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LT Wave";
  src: url("/assets/fonts/LTWave-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.mw {
  --mw-ink: #ffffff;
  --mw-dim: #9aa7b4;
  --mw-faint: #6b7885;
  --mw-bg: #000000;
  --mw-panel: #14161a;
  --mw-panel-2: #1d2025;
  --mw-edge: rgba(255, 255, 255, 0.12);
  --mw-plate: #f4f4f5;
  --mw-gutter: clamp(1rem, 4vw, 3.25rem);
  --mw-max: 1400px;
  /* Display face for the wordmark, headings and nav; body copy stays on Inter. */
  --mw-display: "LT Wave", "Inter", system-ui, sans-serif;

  background: var(--mw-bg);
  color: var(--mw-ink);
  font-family: "Inter", system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: clip;
}

/* The shop owns the whole page: no site background bleeding through. */
body.shop-active {
  background: #000 !important;
}
body.shop-active #shop-3d,
body.shop-active .shop-dock {
  display: none !important;
}

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

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

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

/* ---------------- promo bar ---------------- */

/* --promo-bg is set inline from the storefront settings when an operator
   picks a colour; unset, the bar keeps the shipped gradient. */
.mw-promo {
  background: var(--promo-bg, linear-gradient(90deg, #2a0b4a 0%, #4c1178 42%, #6d17a6 72%, #2a0b4a 100%));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  padding: 0.85rem 1rem;
}

.mw-promo p {
  margin: 0;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: #fff;
}

.mw-promo em {
  color: var(--magenta);
  font-style: normal;
  font-weight: 600;
}

/* Why a chosen option costs less than the headline price. */
.mw-price-note {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--magenta);
  color: var(--magenta);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ---------------- standing documents (privacy, terms) ----------------
   Long-form reading, so the measure is capped and the line height opened up;
   the rest of the shop is built for cards, not prose. */

.mw-legal {
  max-width: 54rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.mw-legal-meta {
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0.4rem 0 2rem;
}

.mw-legal-lede {
  font-size: 1.02rem;
  line-height: 1.75;
  border-left: 2px solid var(--magenta);
  padding-left: 0.9rem;
  margin-bottom: 2rem;
}

.mw-legal-body { line-height: 1.75; }

.mw-legal-body h2 {
  margin: 2.4rem 0 0.7rem;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--magenta);
}

.mw-legal-body h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 0.95rem;
}

.mw-legal-body p { margin: 0 0 1rem; }
.mw-legal-body ul { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.mw-legal-body li { margin-bottom: 0.5rem; }
.mw-legal-body a { color: var(--cyan); text-decoration: underline; }

.mw-legal-body code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.1rem 0.3rem;
}

@media (max-width: 640px) {
  .mw-legal { padding: 1.5rem 1rem 3rem; }
}

/* ---------------- brand strip ---------------- */

.mw-strip {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem var(--mw-gutter);
  background:
    radial-gradient(120% 180% at 10% 50%, rgba(139, 99, 255, 0.22), transparent 60%),
    #07080b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mw-strip-mark {
  display: flex;
  align-items: center;
}

.mw-strip-copy {
  margin: 0;
  text-align: center;
  display: grid;
  gap: 0.1rem;
  /* Optically centre on the page, not on the space left of the mark. */
  transform: translateX(-1.75rem);
}

.mw-strip-copy span {
  font-size: 1.05rem;
  font-weight: 300;
  color: #e8edf2;
  letter-spacing: 0.01em;
}

/* ---------------- header ---------------- */

.mw-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 0.65rem var(--mw-gutter) 0.9rem;
  background: #000;
}

.mw-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.mw-brand-name {
  font-family: var(--mw-display);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}

.mw-nav {
  display: flex;
  justify-content: center;
  gap: clamp(0.9rem, 2.6vw, 2.4rem);
  flex-wrap: wrap;
}

.mw-nav-link {
  font-family: var(--mw-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #e9eef3;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.mw-nav-link:hover,
.mw-nav-link:focus-visible,
.mw-nav-link.on {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
  outline: none;
}

.mw-tools {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.mw-tool {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: none;
  border: 0;
  color: #dfe7ee;
  cursor: pointer;
  transition: color 0.15s ease;
}

.mw-tool:hover,
.mw-tool:focus-visible {
  color: var(--cyan);
  outline: none;
}

.mw-cart-dot {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--magenta);
  color: #12000d;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  display: none;
}

.mw-cart-dot.on {
  display: block;
}

/* The spectrum rule under the header, straight from the mockups. */
.mw-rule {
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--magenta) 0%,
    var(--uv) 18%,
    #2f6bff 36%,
    var(--cyan) 54%,
    var(--green) 72%,
    var(--uv) 88%,
    var(--magenta) 100%
  );
}

/* ---------------- shared body / typography ---------------- */

.mw-body {
  display: block;
}

.mw-h2 {
  font-family: var(--mw-display);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0;
  text-align: center;
}

.mw-h3 {
  font-family: var(--mw-display);
  font-size: clamp(1.1rem, 2.1vw, 1.45rem);
  font-weight: 700;
  margin: 0 0 0.9rem;
}

.mw-h4 {
  font-family: var(--mw-display);
  font-size: 1rem;
  font-weight: 700;
  margin: 1.4rem 0 0.5rem;
}

.mw-center {
  display: flex;
  justify-content: center;
  margin: 2.4rem 0 0;
}

.mw-center-text {
  text-align: center;
}

.mw-muted {
  color: var(--mw-dim);
}

.mw-empty {
  color: var(--mw-faint);
  font-family: var(--mono);
  font-size: 0.8rem;
  text-align: center;
  padding: 2.5rem 1rem;
}

/* Outlined CTA — the mockup's wide-tracked bordered button. */
.mw-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 0.85rem 2.2rem;
  background: transparent;
  border: 1px solid var(--cyan);
  color: #fff;
  font-family: var(--mw-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.mw-outline:hover,
.mw-outline:focus-visible {
  background: var(--cyan);
  color: #04121a;
  box-shadow: 0 0 22px rgba(103, 235, 255, 0.45);
  outline: none;
}

.mw-outline.sm {
  min-width: 0;
  padding: 0.5rem 1.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.mw-link {
  background: none;
  border: 0;
  padding: 0;
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
}

.mw-link:hover {
  color: var(--cyan);
}

.mw-eyebrow {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mw-dim);
}

/* ---------------- hero ---------------- */

.mw-hero {
  position: relative;
  height: clamp(360px, 37vw, 600px);
  overflow: hidden;
  display: grid;
  place-items: center;
  border-bottom: 3px solid transparent;
  background: #0a0410;
}

.mw-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A proper lifestyle shot, already dark and lit by lasers — it only needs a
     light touch so the scene reads while the wordmark stays legible. */
  filter: saturate(1.06) brightness(0.86);
}

/* Darkens only where the type sits: a soft pool behind the wordmark and
   buttons, plus edge falloff into the surrounding black. The centre of the
   photo stays visible. */
.mw-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 62% at 50% 58%, rgba(0, 0, 0, 0.58), transparent 100%),
    linear-gradient(180deg, rgba(4, 2, 10, 0.42), rgba(4, 2, 10, 0) 38%, rgba(4, 2, 10, 0.55));
}

.mw-hero-inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  text-align: center;
  padding: 1rem;
}

.mw-hero-title {
  font-family: var(--mw-display);
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  font-weight: 700;
  margin: 0;
  text-shadow: 0 0 30px rgba(139, 99, 255, 0.8), 0 2px 18px rgba(0, 0, 0, 0.7);
}

.mw-hero-mark {
  margin: -0.3rem 0 0.3rem;
  filter: drop-shadow(0 0 18px rgba(181, 100, 255, 0.75));
}

.mw-hero-cta {
  display: flex;
  gap: clamp(2rem, 14vw, 13rem);
  flex-wrap: wrap;
  justify-content: center;
  /* The mockup tucks the buttons either side of the logo mark, well clear of it. */
  margin-top: -3.4rem;
}

.mw-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mw-display);
  font-weight: 500;
  min-width: 150px;
  padding: 0.6rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(4, 6, 12, 0.55);
  backdrop-filter: blur(2px);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.mw-hero-btn:hover,
.mw-hero-btn:focus-visible {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #04121a;
  box-shadow: 0 0 22px rgba(103, 235, 255, 0.5);
  outline: none;
}

/* ---------------- product grid ---------------- */

.mw-featured {
  padding: clamp(1.6rem, 3vw, 2.6rem) var(--mw-gutter) clamp(2rem, 4vw, 3.4rem);
}

.mw-featured .mw-h2 {
  margin-bottom: clamp(1.1rem, 2.4vw, 1.9rem);
}

.mw-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* row gap > column gap: the label sits under the image, so rows need the
     extra separation to stop one row's price crowding the next row's art. */
  gap: clamp(1.5rem, 2.8vw, 2.6rem) clamp(0.9rem, 1.9vw, 1.75rem);
}

.mw-card {
  position: relative;
}

.mw-card-link {
  display: block;
}

.mw-card-art {
  position: relative;
  overflow: hidden;
}

/* Images are edge-to-edge on a light plate, exactly as drawn — the print
   mockups all ship on white backgrounds, so the plate disappears. */
.mw-plate {
  position: relative;
  aspect-ratio: 7 / 10;
  background: var(--mw-plate);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mw-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.45s ease;
}

.mw-card:hover .mw-plate img,
.mw-card-link:focus-visible .mw-plate img {
  transform: scale(1.035);
}

.mw-plate-empty {
  background: var(--mw-panel);
  color: var(--mw-faint);
  font-size: 2rem;
}

.mw-plate-sq {
  aspect-ratio: 1 / 1;
}

.mw-plate-bleed {
  aspect-ratio: 16 / 10;
  background: #0b0d12;
}

.mw-plate-bleed img {
  object-fit: cover;
}

/* Quick-view bar, revealed on hover. Uses the same cyan as links and buttons
   so the card's interactive affordances all read as one family. */
.mw-quick {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--cyan);
  color: #04121a;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 0.32rem;
  transform: translateY(100%);
  transition: transform 0.18s ease;
}

.mw-card:hover .mw-quick,
.mw-card-link:focus-visible .mw-quick {
  transform: translateY(0);
}

.mw-card-meta {
  display: grid;
  gap: 0.12rem;
  padding: 0.6rem 0.1rem 0;
}

.mw-card-name {
  font-size: 0.72rem;
  color: #dfe6ec;
  line-height: 1.25;
  transition: font-size 0.16s ease, color 0.16s ease;
}

.mw-card-price {
  font-size: 0.68rem;
  color: #c9d3dc;
  transition: font-size 0.16s ease;
}

/* The mockup's hovered card grows its label — the same trick, on hover. */
.mw-card:hover .mw-card-name,
.mw-card-link:focus-visible .mw-card-name {
  font-size: 1.02rem;
  color: #fff;
}

.mw-card:hover .mw-card-price,
.mw-card-link:focus-visible .mw-card-price {
  font-size: 1.02rem;
  color: #fff;
}

.mw-price.on-sale {
  color: var(--magenta);
}

.mw-price-was {
  color: var(--mw-faint);
  margin-left: 0.35rem;
}

.mw-save {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: #d81b4a;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.42rem;
}

/* ---------------- catalog ---------------- */

.mw-catalog {
  padding: clamp(1.4rem, 3vw, 2.4rem) var(--mw-gutter) clamp(2.4rem, 5vw, 4rem);
}

.mw-catalog-head {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1rem;
  margin-bottom: 0.25rem;
}

/* Centre the title against the page, with the filter parked at the right —
   the arrangement in the catalog mockup. */
.mw-catalog-head .mw-h2 {
  grid-column: 1 / -1;
  grid-row: 1;
  text-align: center;
}

.mw-filter {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  z-index: 1;
}

.mw-filter label {
  font-size: 0.95rem;
  color: #e6ecf1;
}

.mw-filter-box {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--cyan);
}

.mw-filter-box select {
  appearance: none;
  background: #000;
  border: 0;
  color: #fff;
  font: inherit;
  font-size: 0.98rem;
  padding: 0.5rem 2.6rem 0.5rem 0.9rem;
  min-width: 190px;
  cursor: pointer;
}

.mw-filter-box select:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}

.mw-filter-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  background: #1e6fe0;
  color: #fff;
  font-size: 1.1rem;
  pointer-events: none;
}

.mw-catalog-count {
  margin: 0 0 1.3rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mw-faint);
}

/* ---------------- history ---------------- */

.mw-history {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
  gap: clamp(1.4rem, 4vw, 3.4rem);
  /* Stretch, so the art column takes its height from the row rather than
     setting it. */
  align-items: stretch;
  padding: clamp(1.6rem, 4vw, 3rem) var(--mw-gutter) clamp(2rem, 5vw, 3.6rem);
}

.mw-history-copy p {
  margin: 0 0 1rem;
  font-size: 0.84rem;
  line-height: 1.65;
  color: #c3ccd4;
  text-align: justify;
}

/* Bare image, no plate: the asset's torn edges are transparent and are meant
   to bleed straight into the black page.

   The image is taken out of the row's height calculation (absolute inside a
   relative box) so the row is sized by the copy on the left, and the art then
   fits itself to that height with object-fit: contain. Otherwise a 1385x1036
   asset in a wide column towers over a few paragraphs of text.

   min-height is both a floor for short copy and the thing that gives the box a
   size before the image arrives — a zero-height lazy image never enters the
   viewport, so it would never load at all. */
.mw-history-art {
  position: relative;
  /* A floor, not a target: longer copy on the left still drives the row
     height. Sized so the art reads as a feature rather than a thumbnail — it
     fills its column's width at this viewport. */
  min-height: clamp(280px, 32vw, 540px);
}

.mw-history-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* ---------------- reviews ---------------- */

.mw-reviews {
  padding: 0 var(--mw-gutter) clamp(2.4rem, 5vw, 4rem);
}

.mw-reviews-panel {
  background: var(--mw-panel);
  border: 1px solid var(--mw-edge);
  border-radius: 4px;
  padding: clamp(0.9rem, 2vw, 1.4rem);
}

.mw-reviews-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.mw-reviews-score {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.mw-stars {
  color: var(--amber);
  letter-spacing: 0.05em;
}

.mw-review-wall {
  columns: 4 200px;
  column-gap: 0.8rem;
}

.mw-review {
  break-inside: avoid;
  margin: 0 0 0.8rem;
  background: var(--mw-panel-2);
  border: 1px solid var(--mw-edge);
  border-radius: 3px;
  padding: 0.7rem;
}

.mw-review h4 {
  margin: 0.5rem 0 0.15rem;
  font-size: 0.82rem;
}

.mw-review p {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #c3ccd4;
}

.mw-review-prod {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.68rem;
  color: var(--mw-faint);
}

.mw-review-empty {
  padding: 2rem 1rem;
}

/* ---------------- product page ---------------- */

.mw-crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: clamp(1.2rem, 3vw, 2.2rem) var(--mw-gutter) 0;
  font-size: 0.88rem;
  font-weight: 600;
}

.mw-crumbs a:hover {
  color: var(--cyan);
}

.mw-crumb-heart {
  color: var(--amber);
  font-size: 2.6rem;
  line-height: 0.8;
  margin-right: 0.6rem;
}

.mw-crumb-now {
  color: var(--mw-dim);
  font-weight: 400;
}

.mw-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.4rem, 4vw, 3.6rem);
  align-items: start;
  padding: clamp(1rem, 2.5vw, 1.8rem) var(--mw-gutter) clamp(2rem, 4vw, 3rem);
}

.mw-product-left {
  max-width: 560px;
}

.mw-gallery-main .mw-plate {
  aspect-ratio: 4 / 5;
}

.mw-gallery-main .mw-plate img {
  object-fit: contain;
  object-position: center;
}

.mw-thumbs {
  display: flex;
  gap: 0.55rem;
  margin-top: 0.6rem;
}

.mw-thumb {
  width: 84px;
  padding: 0;
  border: 1px solid transparent;
  background: var(--mw-plate);
  cursor: pointer;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.mw-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mw-thumb.on,
.mw-thumb:hover,
.mw-thumb:focus-visible {
  border-color: var(--cyan);
  outline: none;
}

.mw-product-copy {
  margin-top: 1.6rem;
}

.mw-lead {
  margin: 0 0 0.9rem;
  font-size: 0.92rem;
  font-weight: 700;
}

.mw-spec {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.mw-spec li {
  font-size: 0.84rem;
  line-height: 1.5;
  color: #c3ccd4;
}

.mw-product-title {
  font-family: var(--mw-display);
  margin: 0 0 0.5rem;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 700;
  line-height: 1.1;
}

/* Star row between the title and the price, as in the mockup. Only renders
   when the product actually carries a review count. */
.mw-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.9rem;
  padding: 0.22rem 0.5rem;
  background: var(--mw-panel-2);
  border: 1px solid var(--mw-edge);
  border-radius: 3px;
  font-size: 0.86rem;
}

.mw-rating-count {
  color: #fff;
  font-weight: 600;
}

.mw-product-price {
  font-family: var(--mw-display);
  margin: 0 0 1.2rem;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--cyan);
}

.mw-product-price s {
  font-size: 0.55em;
  color: var(--mw-faint);
  margin-left: 0.5rem;
}

.mw-box {
  background: var(--mw-panel);
  border: 1px solid var(--mw-edge);
  border-radius: 3px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.9rem;
}

.mw-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.7rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.mw-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.mw-size {
  min-width: 46px;
  padding: 0.4rem 0.6rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.mw-size:hover:not(:disabled) {
  border-color: #fff;
}

.mw-size.on {
  border-color: var(--cyan);
  box-shadow: inset 0 0 0 1px var(--cyan);
}

.mw-size:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  text-decoration: line-through;
}

.mw-delivery {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.mw-delivery-icon {
  font-size: 1.3rem;
  color: var(--mw-dim);
}

.mw-delivery strong {
  display: block;
  font-size: 1rem;
  margin: 0.1rem 0;
}

.mw-delivery .mw-muted {
  font-size: 0.82rem;
}

.mw-buybox {
  background: var(--mw-panel);
  border: 1px solid var(--mw-edge);
  border-radius: 3px;
  padding: 0.9rem;
  margin-bottom: 0.9rem;
}

.mw-accordion {
  border: 1px solid var(--mw-edge);
  background: var(--mw-panel-2);
  margin-bottom: 0.9rem;
}

.mw-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.mw-accordion summary::-webkit-details-marker {
  display: none;
}

.mw-accordion[open] summary span {
  transform: rotate(45deg);
}

.mw-accordion summary span {
  font-size: 1.1rem;
  font-weight: 400;
  transition: transform 0.18s ease;
}

.mw-accordion-body {
  padding: 0 0.9rem 0.9rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #c3ccd4;
}

.mw-accordion-body p {
  margin: 0 0 0.6rem;
}

.mw-stockline {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
}

.mw-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.mw-stockline.low .mw-dot { background: var(--red); }
.mw-stockline.low { color: #ffb0bd; }
.mw-stockline.out .mw-dot { background: var(--mw-faint); }
.mw-stockline.out { color: var(--mw-faint); }

.mw-add,
.mw-buynow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.78rem 1rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.mw-add {
  background: #e9edf1;
  color: #0d1117;
  margin-bottom: 0.6rem;
}

.mw-add:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 0 18px rgba(233, 237, 241, 0.25);
}

.mw-add:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mw-buynow {
  background: #5a31f4;
  color: #fff;
}

.mw-buynow:hover {
  filter: brightness(1.12);
  box-shadow: 0 0 20px rgba(90, 49, 244, 0.55);
}

/* ---- trust panel ---- */

.mw-trust h3 {
  margin: 0 0 0.8rem;
  font-family: var(--mw-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mw-trust ul {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1.2rem;
}

.mw-trust li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0.5rem;
  align-items: start;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #d2dae1;
}

.mw-trust li span {
  color: var(--mw-dim);
}

.mw-pay {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.mw-pay span {
  border: 1px solid var(--mw-edge);
  background: #fff;
  color: #1b2129;
  border-radius: 3px;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.22rem 0.3rem;
  min-width: 34px;
  text-align: center;
}

/* ---- related rail ---- */

.mw-related {
  background: var(--mw-panel);
  border: 1px solid var(--mw-edge);
  border-radius: 4px;
  margin: 0 var(--mw-gutter) clamp(2.4rem, 5vw, 4rem);
  padding: clamp(1rem, 2.4vw, 1.6rem);
}

.mw-rail-wrap {
  position: relative;
}

.mw-rail {
  display: grid;
  grid-auto-flow: column;
  /* 4 across. A percentage inside minmax(0, ...) collapses toward content
     size in a scrolling grid, so the track is stated as an explicit share of
     the visible width: (100% - 3 gaps) / 4. */
  grid-auto-columns: calc((100% - 4.5rem) / 4);
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.3rem;
}

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

.mw-rail .mw-card {
  scroll-snap-align: start;
}

.mw-rail .mw-card-name {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.mw-rail-btn {
  position: absolute;
  top: 38%;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--mw-edge);
  background: rgba(10, 12, 16, 0.9);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.mw-rail-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.mw-rail-btn.prev { left: clamp(-26px, -2.4vw, -14px); }
.mw-rail-btn.next { right: clamp(-26px, -2.4vw, -14px); }

/* ---------------- guest-store sectors ---------------- */

.mw-sectors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.8rem;
}

.mw-sector {
  display: grid;
  gap: 0.3rem;
  padding: 1.2rem 1rem;
  background: var(--mw-panel);
  border: 1px solid var(--mw-edge);
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.mw-sector:hover {
  border-color: var(--cyan);
  background: var(--mw-panel-2);
}

.mw-sector-glyph { font-size: 1.6rem; }
.mw-sector-name { font-size: 1rem; font-weight: 600; }
.mw-sector-count { font-size: 0.72rem; color: var(--mw-faint); }

/* ---------------- search modal ---------------- */

.mw-search-input {
  width: 100%;
  padding: 0.65rem 0.8rem;
  background: #05080f;
  border: 1px solid var(--line);
  color: var(--text);
  font: inherit;
}

.mw-search-results {
  margin-top: 0.7rem;
  max-height: 320px;
  overflow-y: auto;
  display: grid;
  gap: 0.35rem;
}

.mw-search-hit {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 0.6rem;
  align-items: center;
  padding: 0.35rem;
  border: 1px solid transparent;
}

.mw-search-hit:hover {
  border-color: var(--cyan);
  background: rgba(103, 235, 255, 0.06);
}

.mw-search-hit img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  background: var(--mw-plate);
}

.mw-search-hit span {
  display: grid;
  gap: 0.1rem;
}

.mw-search-hit small {
  color: var(--mw-faint);
  font-size: 0.7rem;
}

/* ---------------- footer ---------------- */

.mw-footer {
  background: #0e1014;
  border-top: 1px solid var(--mw-edge);
  padding: clamp(1.4rem, 3vw, 2.2rem) var(--mw-gutter);
}

.mw-footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(2rem, 9vw, 8rem);
  flex-wrap: wrap;
}

.mw-footer-brand {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  font-family: var(--mw-display);
  font-size: 1.5rem;
  font-weight: 700;
}

.mw-footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, auto));
  gap: 3rem;
}

.mw-fcol h3 {
  margin: 0 0 0.3rem;
  font-family: var(--mw-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--mw-edge);
  padding-bottom: 0.2rem;
}

.mw-fcol ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mw-fcol li a {
  display: block;
  padding: 0.06rem 0;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #b9c3cc;
}

.mw-fcol li a:hover {
  color: var(--cyan);
}

/* ---------------- responsive ---------------- */

@media (max-width: 1100px) {
  .mw-product {
    grid-template-columns: minmax(0, 1fr);
  }

  .mw-product-left {
    max-width: none;
  }

  .mw-history {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked: there is no text column to match, so the art reserves its own
     aspect instead of a min-height. It stays position:relative so the image
     inside it still has something to anchor to. */
  .mw-history-art {
    min-height: 0;
    aspect-ratio: 1385 / 1036;
  }

  .mw-rail {
    grid-auto-columns: calc((100% - 3rem) / 3);   /* 3 across, 2 gaps */
  }
}

@media (max-width: 860px) {
  .mw-header {
    grid-template-columns: auto auto;
    row-gap: 0.5rem;
  }

  .mw-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    gap: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .mw-nav::-webkit-scrollbar { display: none; }

  .mw-strip {
    grid-template-columns: auto 1fr;
    gap: 0.6rem;
  }

  .mw-strip-copy {
    transform: none;
    text-align: left;
  }

  .mw-strip-copy span { font-size: 0.88rem; }

  .mw-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mw-catalog-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .mw-catalog-head .mw-h2 { grid-row: 1; }

  .mw-filter {
    grid-column: 1;
    grid-row: 2;
    justify-items: center;
  }

  .mw-hero-cta {
    margin-top: 0.6rem;
    gap: 1rem;
  }

  .mw-trust ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .mw-review-wall { columns: 2 150px; }

  .mw-rail {
    grid-auto-columns: calc((100% - 1.5rem) / 2); /* 2 across, 1 gap */
  }

  .mw-footer-inner {
    flex-direction: column;
    align-items: center;
  }

  .mw-footer-cols {
    gap: 2rem;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .mw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mw-review-wall { columns: 1; }
  .mw-outline { min-width: 0; width: 100%; }
  .mw-crumb-heart { font-size: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mw-plate img,
  .mw-quick,
  .mw-card-name,
  .mw-card-price {
    transition: none;
  }
}

/* ---------------- legacy site chrome on the shop route ----------------
   The MadWare header carries its own cart and shop entry, so the floating
   hub controls would just overlap it. The FX toggle stays (the glitch is
   still switchable) but moves out of the header's way. */
body.shop-active #shop-nav-btn,
body.shop-active #cart-fab {
  display: none !important;
}

body.shop-active #fx-toggle {
  top: auto;
  bottom: 0.9rem;
  left: 0.9rem;
  z-index: 60;
  opacity: 0.55;
}

body.shop-active #fx-toggle:hover,
body.shop-active #fx-toggle:focus-visible {
  opacity: 1;
}

/* Size/measurement chart inside the accordion. The source images are dark text
   on white, so they keep a light plate rather than inverting. */
.mw-chart {
  display: block;
  margin: 0.7rem 0;
  background: #fff;
  border: 1px solid var(--mw-edge);
  border-radius: 3px;
  overflow: hidden;
}

.mw-chart img {
  width: 100%;
  height: auto;
}

.mw-chart:hover,
.mw-chart:focus-visible {
  border-color: var(--cyan);
  outline: none;
}

/* The brand mark is a transparent PNG; height drives it and width follows. */
.mw-mark {
  width: auto;
  display: block;
  flex: none;
}

/* ---------------- glitch wordmarks ----------------
   The site-wide .glitch treatment is kept (chromatic split + jitter), but its
   hub-hero defaults — Orbitron, uppercase, a 5.8rem clamp and block margins —
   would flatten "MadWare" into "MADWARE". Re-assert the shop's own display
   face and casing; the effect itself is untouched. */
.mw .glitch {
  font-family: var(--mw-display);
  text-transform: none;
  margin: 0;
  letter-spacing: 0.01em;
}

.mw .mw-brand-name.glitch {
  font-size: 1.9rem;
}

.mw .mw-hero-title.glitch {
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
}

/* ============================================================
   Accounts — sign-in card, dashboard, favourites
   ============================================================ */

/* ---- sign-in / register ---- */

.mw-auth {
  display: grid;
  place-items: center;
  padding: clamp(2rem, 6vw, 4.5rem) var(--mw-gutter);
}

.mw-auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--mw-panel);
  border: 1px solid var(--mw-edge);
  border-radius: 4px;
  padding: clamp(1.3rem, 3vw, 2rem);
}

.mw-auth-card .mw-h3 {
  margin-bottom: 0.25rem;
}

.mw-auth-sub {
  margin: 0 0 1.2rem;
  font-size: 0.84rem;
  color: var(--mw-dim);
}

.mw-auth-error {
  margin: 0.2rem 0 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--red);
  border-radius: 3px;
  background: rgba(255, 77, 107, 0.1);
  color: #ffb0bd;
  font-size: 0.8rem;
}

.mw-auth-swap,
.mw-auth-note {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  color: var(--mw-dim);
  text-align: center;
}

.mw-auth-note {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: var(--mw-faint);
}

.mw-or {
  position: relative;
  text-align: center;
  margin: 1.1rem 0;
}

.mw-or::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--mw-edge);
}

.mw-or span {
  position: relative;
  background: var(--mw-panel);
  padding: 0 0.7rem;
  font-size: 0.74rem;
  color: var(--mw-faint);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Google's brand guidelines ask for a white button with their mark. */
.mw-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: #fff;
  color: #000000 !important;
  font-size: 0.92rem;
  font-weight: 600;
  border: 1px solid #dadce0;
  cursor: pointer;
  transition: box-shadow 0.15s ease, filter 0.15s ease;
}

.mw-google:hover,
.mw-google:focus-visible {
  filter: brightness(0.97);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
  outline: none;
}

/* ---- forms ---- */

.mw-form {
  display: grid;
  gap: 0.75rem;
}

.mw-form-wide {
  max-width: 620px;
  margin-bottom: 2rem;
}

.mw-field {
  display: grid;
  gap: 0.28rem;
}

.mw-field > span {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mw-dim);
}

.mw-field input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: #05080f;
  border: 1px solid var(--mw-edge);
  border-radius: 3px;
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
}

.mw-field input:focus-visible {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan);
}

.mw-field input:disabled {
  color: var(--mw-faint);
  cursor: not-allowed;
}

.mw-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.mw-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #d2dae1;
  cursor: pointer;
}

/* ---- dashboard ---- */

.mw-account {
  padding: clamp(1.4rem, 3vw, 2.4rem) var(--mw-gutter) clamp(2.4rem, 5vw, 4rem);
}

.mw-account-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--mw-edge);
}

.mw-account-head .mw-h3 {
  margin: 0;
}

.mw-account-id p {
  margin: 0.15rem 0 0;
  font-size: 0.84rem;
}

.mw-avatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--uv), var(--magenta));
  color: #fff;
  font-family: var(--mw-display);
  font-size: 1.5rem;
  font-weight: 700;
}

.mw-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mw-account-tabs {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin: 1.1rem 0 1.5rem;
}

.mw-account-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  background: transparent;
  border: 1px solid var(--mw-edge);
  border-radius: 999px;
  color: #c6ced6;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.mw-account-tab:hover {
  color: #fff;
  border-color: var(--cyan);
}

.mw-account-tab.on {
  background: rgba(103, 235, 255, 0.1);
  border-color: var(--cyan);
  color: #fff;
}

.mw-tab-count {
  min-width: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--mw-panel-2);
  font-size: 0.7rem;
  line-height: 18px;
  text-align: center;
}

.mw-account-note {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  color: var(--mw-dim);
}

.mw-panel {
  background: var(--mw-panel);
  border: 1px solid var(--mw-edge);
  border-radius: 4px;
  padding: clamp(1rem, 2.4vw, 1.6rem);
}

.mw-panel .mw-h4:first-child {
  margin-top: 0;
}

/* ---- orders ---- */

.mw-orders {
  display: grid;
  gap: 0.8rem;
}

.mw-order {
  background: var(--mw-panel);
  border: 1px solid var(--mw-edge);
  border-radius: 4px;
  padding: 0.9rem 1rem;
}

.mw-order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--mw-edge);
}

.mw-order-head .mw-muted {
  margin-left: 0.6rem;
  font-size: 0.8rem;
}

.mw-order-right {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.mw-order-status {
  padding: 0.16rem 0.5rem;
  border: 1px solid var(--mw-edge);
  border-radius: 999px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mw-dim);
}

.mw-order-items {
  margin: 0.6rem 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.3rem;
}

.mw-order-items li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.84rem;
}

.mw-order-items em {
  color: var(--mw-dim);
  font-style: normal;
}

.mw-order-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.6rem;
  border-top: 1px solid var(--mw-edge);
  font-size: 0.8rem;
}

.mw-ticket-list {
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}

.mw-ticket-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.8rem;
  background: var(--mw-panel-2);
  border: 1px solid var(--mw-edge);
  border-radius: 3px;
  font-size: 0.84rem;
}

/* ---- favourite heart (product page breadcrumb) ---- */

.mw-crumb-heart {
  padding: 0;
  background: none;
  border: 0;
  color: var(--amber);
  font-size: 2.6rem;
  line-height: 0.8;
  margin-right: 0.6rem;
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease, filter 0.15s ease;
}

.mw-crumb-heart:hover,
.mw-crumb-heart:focus-visible {
  transform: scale(1.1);
  outline: none;
  filter: drop-shadow(0 0 10px rgba(255, 179, 71, 0.6));
}

.mw-crumb-heart[aria-pressed="true"] {
  color: var(--magenta);
  filter: drop-shadow(0 0 10px rgba(255, 47, 214, 0.55));
}

.mw-crumb-heart:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* Signed-in state on the header account icon. */
.mw-tool.on {
  color: var(--cyan);
}

@media (max-width: 860px) {
  .mw-account-head {
    grid-template-columns: auto 1fr;
    row-gap: 0.7rem;
  }

  .mw-account-head [data-signout] {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .mw-field-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- subcategory chips ----
   Shown under the catalog heading: a parent sector offers its children, a
   child offers its siblings plus an "All" escape back up. */
.mw-subcats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.9rem 0 0.2rem;
}

.mw-subcat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--mw-edge);
  border-radius: 999px;
  color: #c6ced6;
  font-size: 0.84rem;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.mw-subcat:hover,
.mw-subcat:focus-visible {
  color: #fff;
  border-color: var(--cyan);
  outline: none;
}

.mw-subcat.on {
  background: rgba(103, 235, 255, 0.1);
  border-color: var(--cyan);
  color: #fff;
}

.mw-subcat-n {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--mw-panel-2);
  color: var(--mw-dim);
  font-size: 0.68rem;
  line-height: 17px;
  text-align: center;
}

.mw-subcat.on .mw-subcat-n {
  color: #fff;
}

@media (max-width: 860px) {
  .mw-subcats {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mw-subcats::-webkit-scrollbar { display: none; }
}

/* ============================================================
   Support — contact form and ticket threads
   ============================================================ */

.mw-support {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(1.6rem, 4vw, 3rem) var(--mw-gutter) clamp(2.4rem, 5vw, 4rem);
}

.mw-support-head {
  text-align: center;
  margin-bottom: 1.8rem;
}

.mw-support-sub {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  color: var(--mw-dim);
}

.mw-support-sub a {
  color: var(--cyan);
  text-decoration: underline;
}

.mw-support-form textarea,
.mw-field textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: #05080f;
  border: 1px solid var(--mw-edge);
  border-radius: 3px;
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
  resize: vertical;
}

.mw-field textarea:focus-visible {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan);
}

.mw-field select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: #05080f;
  border: 1px solid var(--mw-edge);
  border-radius: 3px;
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
}

/* ---- ticket type picker ---- */

.mw-typegrid {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.6rem;
}

.mw-typegrid legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mw-dim);
}

.mw-type {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 0.85rem;
  background: var(--mw-panel);
  border: 1px solid var(--mw-edge);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.mw-type:hover {
  border-color: var(--cyan);
}

.mw-type.on {
  border-color: var(--cyan);
  background: rgba(103, 235, 255, 0.08);
}

/* The radio is the control; the whole card is the hit area. */
.mw-type input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mw-type:focus-within {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.mw-type-label {
  font-size: 0.95rem;
  font-weight: 600;
}

.mw-type-hint {
  font-size: 0.76rem;
  color: var(--mw-dim);
  line-height: 1.35;
}

/* ---- sent confirmation ---- */

.mw-ticket-done {
  text-align: center;
}

.mw-ticket-tick {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 0.8rem;
  border-radius: 50%;
  background: rgba(87, 255, 143, 0.14);
  border: 1px solid var(--green);
  color: var(--green);
  font-size: 1.4rem;
}

/* ---- ticket list ---- */

.mw-ticket-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.mw-ticket-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--mw-panel-2);
  border: 1px solid var(--mw-edge);
  border-radius: 3px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.mw-ticket-row:hover,
.mw-ticket-row:focus-visible {
  border-color: var(--cyan);
  outline: none;
}

.mw-ticket-main {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.mw-ticket-main small,
.mw-ticket-meta small {
  color: var(--mw-faint);
  font-size: 0.72rem;
}

.mw-ticket-meta {
  display: grid;
  justify-items: end;
  gap: 0.2rem;
  flex: none;
}

.mw-ticket-status {
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--mw-edge);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mw-dim);
  white-space: nowrap;
}

.mw-ticket-status.open {
  border-color: var(--green);
  color: var(--green);
}

.mw-ticket-status.awaiting_customer {
  border-color: var(--amber);
  color: var(--amber);
}

/* ---- thread ---- */

.mw-thread {
  display: grid;
  gap: 1rem;
}

.mw-thread-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--mw-edge);
}

.mw-messages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.mw-msg {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--mw-edge);
  border-radius: 4px;
  background: var(--mw-panel-2);
}

/* Staff replies are tinted so a thread scans at a glance. */
.mw-msg.staff {
  background: rgba(103, 235, 255, 0.07);
  border-color: rgba(103, 235, 255, 0.3);
}

.mw-msg-who {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--mw-dim);
  margin-bottom: 0.35rem;
}

.mw-msg-who em {
  font-style: normal;
  font-weight: 400;
  color: var(--mw-faint);
  font-size: 0.72rem;
}

.mw-msg p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.mw-order-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .mw-typegrid { grid-template-columns: minmax(0, 1fr); }
  .mw-ticket-row { flex-direction: column; align-items: flex-start; }
  .mw-ticket-meta { justify-items: start; }
}

/* ---- quick add to cart ----
   Sits in the card's top-right corner, over the artwork but outside the
   card-wide link so its clicks don't navigate. Always visible on touch (where
   there is no hover to reveal it) and faded in on pointer devices. */
.mw-quickadd {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--cyan);
  background: rgba(4, 10, 20, 0.82);
  backdrop-filter: blur(3px);
  color: var(--cyan);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.mw-card:hover .mw-quickadd,
.mw-card:focus-within .mw-quickadd,
.mw-quickadd:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.mw-quickadd:hover,
.mw-quickadd:focus-visible {
  background: var(--cyan);
  color: #04121a;
  box-shadow: 0 0 16px rgba(103, 235, 255, 0.55);
  outline: none;
}

.mw-quickadd:disabled {
  border-color: var(--mw-edge);
  color: var(--mw-faint);
  cursor: not-allowed;
  box-shadow: none;
  background: rgba(4, 10, 20, 0.82);
}

/* No hover on touch, so the button is permanently visible there. */
@media (hover: none) {
  .mw-quickadd {
    opacity: 1;
    transform: none;
  }
}

/* ---- added-to-cart confirmation ---- */

.mw-added {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.8rem;
}

.mw-added-tick {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(87, 255, 143, 0.14);
  border: 1px solid var(--green);
  color: var(--green);
  font-size: 1.1rem;
}

.mw-added-copy p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.mw-added-copy em {
  font-style: normal;
  color: var(--cyan);
}

.mw-added-sub {
  margin-top: 0.3rem !important;
  font-size: 0.78rem !important;
  color: var(--muted);
}

/* ============================================================
   Size guide — measurement diagram + size table
   ============================================================ */

.sg { display: grid; gap: 1.1rem; }

.sg-figure {
  margin: 0;
  padding: 0.6rem 0.5rem 0.9rem;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(168, 85, 247, 0.12), transparent 70%),
    var(--mw-panel-2);
  border: 1px solid var(--mw-edge);
  border-radius: 5px;
}

.sg-figure svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 300px;
}

/* Pills sit above the leader lines and glow faintly, like the diagram labels
   in the reference chart. */
.sg-pill text { font-family: var(--mw-display), system-ui, sans-serif; }
.sg-pill rect { filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6)); }

.sg-legend {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.5rem;
  padding: 0 0.4rem;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--mw-dim);
}

.sg-legend b { font-weight: 700; }

/* ---- table ---- */

.sg-table-wrap { display: grid; gap: 0.5rem; }

.sg-table-title {
  margin: 0;
  font-family: var(--mw-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

.sg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  overflow: hidden;
  border-radius: 4px;
}

/* Each column header carries its own measurement's colour — the same one its
   pill and leader line use on the diagram — so a column and its arrow on the
   garment are obviously the same thing. */
.sg-table thead th {
  padding: 0.5rem 0.55rem;
  background: color-mix(in srgb, var(--col, var(--uv)) 26%, #101018);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  border-bottom: 2px solid var(--col, var(--uv));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.sg-table thead th.sg-th-size {
  text-align: left;
  background: #101018;
  border-bottom-color: var(--mw-edge);
  color: var(--mw-dim);
}

.sg-table tbody th {
  padding: 0.45rem 0.55rem;
  text-align: left;
  font-weight: 700;
  color: var(--cyan);
  white-space: nowrap;
}

.sg-table tbody td {
  padding: 0.45rem 0.55rem;
  text-align: center;
  color: #d2dae1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sg-table tbody tr { background: rgba(255, 255, 255, 0.02); }
.sg-table tbody tr:nth-child(even) { background: rgba(168, 85, 247, 0.07); }

/* The row matching the size the shopper has selected. */
.sg-table tbody tr.on {
  background: rgba(103, 235, 255, 0.13);
  box-shadow: inset 2px 0 0 var(--cyan);
}

.sg-note,
.sg-missing {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--mw-dim);
}

.sg-missing {
  padding: 0.7rem 0.8rem;
  background: var(--mw-panel-2);
  border: 1px solid var(--mw-edge);
  border-radius: 4px;
}

.sg-missing a { color: var(--cyan); text-decoration: underline; }

.sg-spec-title {
  margin: 1.1rem 0 0.4rem;
  font-family: var(--mw-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.mw-chart-link {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: 0.74rem;
  color: var(--mw-dim);
  text-decoration: underline;
}

.mw-chart-link:hover { color: var(--cyan); }

@media (max-width: 560px) {
  .sg-table { font-size: 0.7rem; }
  .sg-table thead th,
  .sg-table tbody th,
  .sg-table tbody td { padding: 0.38rem 0.35rem; }
}

/* ---------- new products row ----------
   Same shape as the featured row, with a subtitle so the two sections are
   not mistaken for one another. */
.mw-new { border-top: 1px solid var(--line-dim); }
.mw-new-sub {
  margin: -0.4rem 0 1.2rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.mw-catalog-count a { color: var(--cyan); }

/* ---------- product drop ----------
   Sits under the hero buttons. Present only when a drop exists, so the hero
   is unchanged until one is scheduled. */
.mw-drop {
  margin: 1.4rem auto 0;
  padding: 0.9rem 1.1rem;
  max-width: 24rem;
  border: 1px solid var(--magenta);
  background: rgba(8, 4, 16, 0.62);
  backdrop-filter: blur(4px);
  box-shadow: 0 0 30px rgba(255, 47, 214, 0.22);
  text-align: center;
}
.mw-drop-kicker {
  margin: 0 0 0.35rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--magenta);
}
.mw-drop-link {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: "Orbitron", var(--mono);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.15s ease, text-shadow 0.15s ease;
}
.mw-drop-link:hover,
.mw-drop-link:focus-visible { color: var(--magenta); text-shadow: 0 0 14px rgba(255, 47, 214, 0.7); }
.mw-drop-meta {
  margin: 0.3rem 0 0;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.mw-drop-clock,
.mw-drop-modal-clock {
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(103, 235, 255, 0.45);
  font-variant-numeric: tabular-nums;
}
.mw-drop-clock.is-live,
.mw-drop-modal-clock.is-live { color: var(--green); text-shadow: 0 0 16px rgba(87, 255, 143, 0.6); }
.mw-drop-modal-clock { text-align: center; font-size: 1.6rem; margin: 0 0 1rem; }
.mw-drop-modal-lede { margin: 0 0 0.8rem; font-size: 0.74rem; line-height: 1.7; color: var(--muted); }

.mw-drop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.9rem; }
.mw-drop-card { border: 1px solid var(--line-dim); background: rgba(255, 255, 255, 0.02); overflow: hidden; }
.mw-drop-card-media { position: relative; aspect-ratio: 1 / 1; background: #05070f; overflow: hidden; }
/* A photo fills the tile, the way product cards do everywhere else. */
.mw-drop-media { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
/* A video is letterboxed on black instead: drop clips are often portrait or
   square, and cropping one to a square tile cuts the product out of frame. */
.mw-drop-media.is-video { object-fit: contain; background: #000; }
/* Says "this one moves" before it has loaded enough to be obvious. */
.mw-drop-badge {
  position: absolute;
  left: 0.45rem;
  bottom: 0.45rem;
  padding: 0.12rem 0.4rem;
  border: 1px solid var(--magenta);
  background: rgba(3, 2, 8, 0.78);
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--magenta);
  pointer-events: none;
}
.mw-drop-card-body { padding: 0.6rem 0.7rem 0.8rem; }
.mw-drop-card-body h3 { margin: 0 0 0.2rem; font-size: 0.82rem; line-height: 1.35; }
.mw-drop-card-sub { margin: 0 0 0.4rem; font-size: 0.64rem; color: var(--muted); }
.mw-drop-card-price { margin: 0 0 0.5rem; font-family: var(--mono); color: var(--amber); font-size: 0.9rem; }
.mw-drop-card-soon {
  margin: 0.4rem 0 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
}
.mw-drop-card-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.mw-drop-card-link { font-size: 0.64rem; color: var(--muted); }
.mw-drop-card-link:hover { color: var(--cyan); }

@media (max-width: 640px) {
  .mw-drop { max-width: none; margin-top: 1.1rem; }
  .mw-drop-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ---------- pre-ordered stock ----------
   Emblem over the top-right of every image for a product we hold. */
.mw-plate { position: relative; }
.mw-preorder-emblem {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0.18rem 0.42rem;
  border: 1px solid var(--green);
  border-radius: 2px;
  background: rgba(3, 12, 8, 0.86);
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  box-shadow: 0 0 12px rgba(87, 255, 143, 0.28);
  pointer-events: none;
  white-space: nowrap;
}
.mw-delivery.is-preorder { border-color: var(--green); }
.mw-delivery.is-preorder .mw-delivery-icon { color: var(--green); }

@media (max-width: 640px) {
  .mw-preorder-emblem { font-size: 0.46rem; padding: 0.14rem 0.32rem; }
}