/** Shopify CDN: Minification failed

Line 1913:0 Expected "*/" to terminate multi-line comment

**/
/* === MISC theme — self-hosted fonts (Shopify /assets/) === */
@font-face {
  font-family: "Branding Pro";
  src: url("branding-pro-light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Branding Pro";
  src: url("branding-pro-light-italic.otf") format("opentype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Branding Pro";
  src: url("branding-pro-regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Branding Pro";
  src: url("branding-pro-italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Branding Pro";
  src: url("branding-pro-bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Branding Pro";
  src: url("branding-pro-bold-italic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Coves";
  src: url("coves-light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Coves";
  src: url("coves-bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Apex Mk3";
  src: url("apex-mk3-extralight.otf") format("opentype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Apex Mk3";
  src: url("apex-mk3-medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Beam Visionary";
  src: url("beam-visionary.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: pan-x pan-y;
}
body {
  background: var(--misc-bg, #ffffff);
  color: var(--misc-ink, #1a1a1a);
  font-family: 'Branding Pro', system-ui, -apple-system, sans-serif;
}
.skip-to-content { position: absolute; left: -9999px; }
.skip-to-content:focus { left: 1vw; top: 1vh; background: #fff; padding: 0.5em 1em; }

/* === Cart drawer — nyalra aesthetic: soft white, slate-violet accent,
       lowercase Branding Pro, rounded pill buttons, hairline dividers. === */
.cart-drawer[hidden] { display: none; }
.cart-drawer {
  position: fixed; inset: 0; z-index: 100;
  display: flex; justify-content: flex-end;
  font-family: "Branding Pro", system-ui, -apple-system, sans-serif;
}
.cart-drawer__overlay {
  position: absolute; inset: 0; background: rgba(20, 20, 30, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cart-drawer__panel {
  position: relative; z-index: 1;
  width: min(440px, 92vw); height: 100%;
  background: #ffffff;
  display: flex; flex-direction: column;
  box-shadow: -2vw 0 6vw rgba(20, 20, 30, 0.10);
  color: #1a1a1a;
}
.cart-drawer__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3vh 2vw 2.4vh;
  border-bottom: 1px solid rgba(80, 97, 185, 0.18);
}
.cart-drawer__title {
  margin: 0;
  font-family: "Coves", "Branding Pro", system-ui, sans-serif;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: #5061b9;
}
.cart-drawer__close {
  width: 36px; height: 36px;
  background: transparent; color: #6b6b6b;
  border: 1px solid rgba(80, 97, 185, 0.18);
  border-radius: 999px;
  font-size: 1.2rem; line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.cart-drawer__close:hover {
  background: rgba(80, 97, 185, 0.10);
  color: #5061b9; border-color: #5061b9;
}
.cart-drawer__items { flex: 1 1 auto; overflow-y: auto; padding: 1vh 2vw; }
.cart-drawer__item {
  display: grid; grid-template-columns: 72px 1fr auto;
  gap: 1.2vw;
  padding: 2vh 0;
  border-bottom: 1px solid rgba(80, 97, 185, 0.10);
  align-items: center;
}
.cart-drawer__item:last-child { border-bottom: 0; }
.cart-drawer__thumb {
  background: linear-gradient(180deg, #fafbfd 0%, #f4f6fa 100%);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
}
.cart-drawer__thumb img { width: 84%; height: 84%; object-fit: contain; display: block; }
.cart-drawer__name {
  margin: 0 0 0.8vh;
  font-size: 0.95rem;
  font-weight: 300;
  color: #1a1a1a;
  text-transform: lowercase;
  line-height: 1.3;
}
.cart-drawer__name a { color: inherit; text-decoration: none; }
.cart-drawer__name a:hover { color: #5061b9; }
.cart-drawer__qty {
  display: inline-flex; align-items: center; gap: 0.8em;
  font-family: "Branding Pro", system-ui, sans-serif;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}
.cart-drawer__qty-btn {
  background: transparent;
  border: 1px solid rgba(80, 97, 185, 0.18);
  color: #5061b9;
  width: 1.8em; height: 1.8em;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem; line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cart-drawer__qty-btn:hover { background: rgba(80, 97, 185, 0.10); border-color: #5061b9; }
.cart-drawer__qty-num { min-width: 1.2em; text-align: center; }
.cart-drawer__price {
  font-family: "Branding Pro", system-ui, sans-serif;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  color: #5061b9;
}
.cart-drawer__empty {
  text-align: center;
  padding: 8vh 0;
  color: #6b6b6b;
  font-weight: 300;
  font-size: 0.95rem;
  text-transform: lowercase;
}
.cart-drawer__foot {
  padding: 2.4vh 2vw 3vh;
  border-top: 1px solid rgba(80, 97, 185, 0.18);
}
.cart-drawer__totals {
  display: flex; justify-content: space-between;
  margin: 0 0 2vh;
  font-family: "Branding Pro", system-ui, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  text-transform: lowercase;
  color: #1a1a1a;
}
.cart-drawer__totals > :last-child {
  color: #5061b9;
  font-variant-numeric: tabular-nums;
}
.cart-drawer__checkout {
  display: block; width: 100%;
  padding: 1.4vh 1vw;
  background: transparent;
  color: #5061b9;
  border: 1px solid #5061b9;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Branding Pro", system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: lowercase;
  transition: background 0.2s ease, color 0.2s ease;
}
.cart-drawer__checkout:hover { background: #5061b9; color: #ffffff; }

/* Header cart toggle */
.misc__header-wrap { position: relative; }
.misc__cart-toggle { position: absolute; top: 4vh; right: 9vw; z-index: 5; background: none; border: 1px solid var(--misc-accent-soft); padding: 0.55em 1.1em; font-family: "Branding Pro", system-ui, sans-serif; font-weight: 300; letter-spacing: 0; text-transform: lowercase; font-size: 0.9rem; color: var(--misc-accent); border-radius: 999px; cursor: pointer; display: inline-flex; gap: 0.5em; align-items: center; transition: background 0.18s ease, border-color 0.18s ease; }
.misc__cart-toggle:hover { background: var(--misc-accent-soft); }
.misc__cart-count { background: transparent; color: var(--misc-accent); padding: 0; min-width: 1em; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .misc__cart-toggle { position: static; margin: 2vh auto; display: flex; justify-content: center; } }

/* Page-load transition for the misc catalog — soft fade + lift. Body
   starts opacity 0; theme.js adds .is-loaded on DOMContentLoaded. */
body.page-index,
body.page-collection {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
body.page-index.is-loaded,
body.page-collection.is-loaded {
  opacity: 1;
  transform: translateY(0);
}

/* === MISC catalog — nyalra-inspired soft white minimal === */
/* Apply the misc page chrome to every misc-themed page. PSG/NSO/PSG-product
   pages add their own body classes (page-psg, page-nso, page-psg-product)
   that swap the background + hide misc chrome via overrides further down. */
body.page-index,
  body.page-collection,
body.page-cart,
body.page-product {
  --misc-bg:           #ffffff;
  --misc-ink:          #1a1a1a;
  --misc-ink-soft:     #6b6b6b;
  --misc-accent:       #5061b9;
  --misc-accent-soft:  rgba(80, 97, 185, 0.18);
  --misc-line:         rgba(20, 20, 30, 0.10);
  --misc-pop:          #8FB7DC;
  --misc-pop2:         #F0B7C9;
  background: var(--misc-bg);
  color: var(--misc-ink);
  font-family: 'Branding Pro', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}
/* Pad the actual content area so header + catalog + footer all share the
   same horizontal gutters. The cart toggle is absolutely positioned out
   of flow inside the header wrapper, so it follows the same gutter. */
body.page-index .content-for-layout,
  body.page-collection .content-for-layout,
body.page-cart  .content-for-layout,
body.page-product .content-for-layout,
body.page-page    .content-for-layout {
  padding: 0 9vw 12vh;
}
body.page-index .misc__header-wrap,
  body.page-collection .misc__header-wrap,
body.page-cart  .misc__header-wrap,
body.page-product .misc__header-wrap,
body.page-page    .misc__header-wrap {
  padding: 9vh 9vw 0;
}
/* PSG / NSO / PSG-product overrides — these classes are added by JS at
   page load; null out the misc padding so those pages render full-bleed. */
body.page-psg .content-for-layout,
body.page-nso .content-for-layout,
body.page-psg-product .content-for-layout,
body.page-psg .misc__header-wrap,
body.page-nso .misc__header-wrap,
body.page-psg-product .misc__header-wrap {
  padding: 0;
}
.misc__corner { display: none; }

/* Announcement panel — substantial bar between the header and catalog.
   Tall enough to fill the empty space, with clear margin on both sides
   so it doesn't crowd the header above or the chips/grid below. */
.misc__announcement {
  margin: 5vh 0 6vh;
  padding: 2vh 2em;
  /* Chrome pastel wash — iridescent blooms (peach / lavender / mint /
     sky) over a near-white base. Soothing instead of the hard solid
     slate-violet block. */
  background:
    radial-gradient(circle at 12% 30%, rgba(195, 215, 255, 0.85), transparent 55%),
    radial-gradient(circle at 88% 25%, rgba(255, 215, 235, 0.85), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(210, 245, 225, 0.75), transparent 55%),
    radial-gradient(circle at 25% 78%, rgba(230, 220, 255, 0.80), transparent 55%),
    linear-gradient(135deg, #f4f7ff 0%, #f8f0ff 50%, #fff0f4 100%);
  /* Soft dark-plum text so it reads against the pastel wash without
     being harsh. */
  color: #2a2238;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6em 4vw;
  font-family: "Apex Mk3", "Branding Pro", monospace;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.2vw, 2.2rem);
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-transform: uppercase;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0.6vh 2vh rgba(120, 130, 170, 0.18);
}
.misc__announcement strong {
  font-weight: 700;
  color: var(--misc-accent);
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.misc__announcement-item {
  display: inline-flex;
  align-items: baseline;
}

/* === Magazine-cover header — big leading-dot title + meta block === */
.misc__header {
  margin: 0 0 4vh;
  max-width: 100%;
  padding: 0 0 4vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* Stretch so the theme block can span vertically from the top of the
     eyebrow to the bottom of the big title (its tiles size to fit). */
  align-items: stretch;
  gap: 6vw;
  border-bottom: 1px solid var(--misc-accent-soft);
}
.misc__header-left {
  min-width: 0;
}
/* Right-side theme switcher — two visual preview squares (PSG + NSO)
   plus a current-page indicator for MISC. Each square is 110×110 with
   the character art clipped inside and a small caps label underneath. */
/* Theme-block — heading on the LEFT, tiles on the RIGHT. Bottom-aligned
   so the bottom of the tiles lines up with the bottom of the .MISC title. */
.misc__theme-block {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 2vw;
  height: 100%;
}
.misc__theme-heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  text-align: left;
}
.misc__theme-heading-eyebrow {
  font-family: "Apex Mk3", "Branding Pro", monospace;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--misc-accent);
  display: block;
  margin-bottom: 0.6em;
}
.misc__theme-heading-title {
  font-family: "Coves", "Branding Pro", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -0.01em;
  color: var(--misc-ink);
  text-transform: lowercase;
  display: block;
}
.misc__theme-switch {
  display: flex;
  gap: 3vw;
  align-items: stretch;
  height: 100%;
  font-family: "Branding Pro", system-ui, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: lowercase;
}
.misc__theme-square {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-decoration: none;
  color: var(--misc-ink-soft);
  height: 100%;
  aspect-ratio: 1.8 / 1;
  min-height: 180px;
  max-height: 320px;
  cursor: pointer;
  transition: transform 0.25s ease, opacity 0.25s ease, color 0.25s ease;
  opacity: 0.94;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
/* White floor — uses the existing nso-white-gradient.webp asset (the
   same one used on the NSO theme page) so we match the brand visual.
   Laid OVER the characters' feet so the bottom of each figure fades
   to white in the same shape your designer drew. */
.misc__theme-square::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30%;
  background: url('nso-white-gradient.webp') center bottom / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 4;
}
.misc__theme-square:hover {
  opacity: 1;
  transform: translateY(-3px);
}
.misc__theme-square > img {
  position: absolute;
  bottom: 2.4em;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  max-height: 78%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
}
/* Theme square characters — shared rules for PSG (Panty/Stocking) and
   NSO (Ame/KAngel). Tall sticker assets sized by HEIGHT, sat above
   the white-floor gradient so the figures stand on a soft surface. */
.misc__theme-square--psg > img.misc__theme-square-char,
.misc__theme-square--nso .misc__theme-square-char {
  position: absolute;
  bottom: 4%;
  width: auto;
  object-fit: contain;
  border: 0;
  background: transparent;
  max-height: none;
  height: 88%;             /* taller again — tile is now 1.3:1 so wider chars fit */
  z-index: 3;              /* above the bottom gradient */
}
/* Pairs anchored to the inside edges of the tile so they don't escape
   the sides; small overlap at the centerline keeps them clustered. */
.misc__theme-square--psg .misc__theme-square-char--panty    { left:  3%;  transform: none; }
.misc__theme-square--psg .misc__theme-square-char--stocking { right: 3%;  left: auto; transform: none; }
.misc__theme-square--nso .misc__theme-square-char--ame    { left:  3%;  transform: none; }
.misc__theme-square--nso .misc__theme-square-char--kangel { right: 3%;  left: auto; transform: none; }
.misc__theme-square--nso::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.misc__theme-square--nso .misc__theme-square-label { position: relative; z-index: 2; }
.misc__theme-square-label {
  display: none;
}
.misc__theme-square:hover { transform: translateY(-4px); opacity: 1; color: var(--misc-accent); }
.misc__eyebrow {
  margin: 0 0 3vh;
  /* Beam Visionary script signature — soft, two-line wordmark. */
  font-family: "Beam Visionary", "Branding Pro", cursive;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  color: var(--misc-ink-soft);
  text-transform: none;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  line-height: 1.05;
}
.misc__eyebrow-line { display: block; color: inherit; text-decoration: none; }
.misc__eyebrow-line:hover { color: var(--misc-accent); }
.misc__title {
  margin: 0;
  /* Apex Mk3 — technical monospace, a striking contrast against the
     script eyebrow above. */
  font-family: "Apex Mk3", "Branding Pro", ui-monospace, monospace;
  font-weight: 500;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--misc-accent);
  text-transform: lowercase;
}
.misc__title-dot { display: none; }
.misc__lede {
  margin: 2.4vh 0 0;
  font-family: "Branding Pro", system-ui, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--misc-ink-soft);
  max-width: 36em;
}
.misc__header-meta {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
  align-items: flex-end;
  font-family: "Apex Mk3", monospace;
  font-size: 0.75rem;
  color: var(--misc-ink);
  white-space: nowrap;
}
.misc__meta-row {
  display: flex;
  gap: 1ch;
  align-items: baseline;
  letter-spacing: 0.06em;
}
.misc__meta-label { color: var(--misc-ink-soft); }
.misc__meta-value { font-weight: 500; }
.misc__meta-barcode {
  display: none;
}
.misc__meta-price { font-weight: 500; }
.misc__meta-bars  { width: 60px; height: 18px; color: var(--misc-ink); flex: 0 0 60px; }
.misc__meta-date  { font-size: 0.7rem; letter-spacing: 0.1em; }

/* === Section dividers per category ===
   Alternating dot color: deskmats → blue, prints → pink, tapestries → blue,
   stickers → pink, flags → blue. Driven by per-section data-section so
   each section's leading dot picks up a paired accent. */
.misc__section {
  margin: 0 0 14vh;
}
.misc__section[hidden] { display: none; }
.misc__section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  column-gap: 2vw;
  margin: 0 0 4vh;
  padding-bottom: 1.8vh;
  border-bottom: 1px solid var(--misc-accent-soft);
}
.misc__section-title {
  margin: 0;
  font-family: "Coves", "Branding Pro", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--misc-accent);
  text-transform: lowercase;
}
.misc__section-dot { display: none; }
.misc__section-meta {
  font-family: "Branding Pro", system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  color: var(--misc-ink-soft);
}
.misc__section-tagline {
  justify-self: end;
  font-family: "Branding Pro", system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  color: var(--misc-ink-soft);
  font-style: italic;
}

/* Product grid — sparse, with lots of air between cells */
/* === Filter bar — search input + category chips === */
.misc__controls {
  max-width: 100%;
  margin: 0 auto 6vh;
  display: flex;
  flex-wrap: wrap;
  gap: 2vh 1.6vw;
  align-items: center;
  justify-content: space-between;
}
.misc__search {
  display: flex;
  align-items: center;
  gap: 0.7em;
  flex: 0 1 28ch;
  min-width: 18ch;
  padding: 0.55em 0.9em;
  border: 1px solid rgba(20, 22, 38, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.misc__search:focus-within {
  border-color: var(--misc-accent, #5061b9);
  background: #ffffff;
}
.misc__search-ico {
  font-size: 1.1em;
  color: #888;
  user-select: none;
}
.misc__search-input {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  font: 400 0.95rem/1.2 "Branding Pro", system-ui, sans-serif;
  color: #1A1626;
}
.misc__search-input::placeholder { color: #999; }
.misc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5vw;
}
.misc__chip {
  border: 1px solid var(--misc-accent-soft);
  background: transparent;
  color: var(--misc-ink-soft);
  /* soft rounded pill — lowercase, no caps, no dot prefix */
  font: 400 0.9rem/1 "Branding Pro", system-ui, sans-serif;
  letter-spacing: 0;
  padding: 0.6em 1.2em;
  border-radius: 999px;
  cursor: pointer;
  text-transform: lowercase;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.misc__chip:hover { color: var(--misc-accent); border-color: var(--misc-accent-soft); }
.misc__chip.is-active {
  background: var(--misc-accent-soft);
  border-color: var(--misc-accent);
  color: var(--misc-accent);
}
.misc__empty--results {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.9rem;
  color: #888;
  margin: 0 0 4vh;
}

.misc__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6vh 2.5vw;
  max-width: 100%;
  margin: 0 auto;
}
.misc__empty {
  grid-column: 1 / -1;
  font-size: 0.95rem;
  color: #888888;
  padding: 6vh 0;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  text-align: center;
  font-style: italic;
}
.misc__card {
  margin: 0;
  position: relative;
}
.misc__card-num {
  display: none;
}

/* Cinna · Miku print is an 8.5×11 in print (smaller than the 11×17 rest).
   Scale the image inside the card down to visually signal that. */
.misc__card[data-slug="print-cinna-miku"] .misc__img {
  transform: scale(0.78);
  transform-origin: center;
}

/* Deskmats — round the corners of the actual deskmat shape. The base
   .misc__img is 84%×84% square with object-fit: contain, so the wide
   landscape deskmat sits letterboxed in the middle. Resize the img box
   to the deskmat aspect (~9:4) so the rounded corners trace the
   visible deskmat edges instead of the empty letterbox. */
.misc__card[data-slug*="deskmat"] .misc__img {
  width: 92%;
  height: auto;
  aspect-ratio: 900 / 400;
  object-fit: cover;
  border-radius: 14px;
  overflow: hidden;
}
.mpd[data-slug*="deskmat"] .mpd__img {
  aspect-ratio: 900 / 400;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 18px;
  overflow: hidden;
}
@media (max-width: 700px) {
  .misc__card[data-slug*="deskmat"] .misc__img { border-radius: 10px; }
}

/* Sold-out badge — centered diagonal label over the product media. */
.misc__card--sold-out .misc__img { opacity: 0.42; filter: grayscale(0.65); }
.misc__sold-out {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  z-index: 5;
  padding: 0.45em 1.2em;
  border: 1px solid var(--misc-accent);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--misc-accent);
  font-family: "Branding Pro", system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}
/* Low-stock "N left" pill — top-right corner of the media frame,
   solid slate-violet with bold capitalized text so it reads as
   urgency the buyer can't miss. */
.misc__low-stock {
  position: absolute;
  top: 0.7em;
  right: 0.7em;
  z-index: 5;
  padding: 0.45em 1em;
  background: var(--misc-accent);
  color: #ffffff;
  border-radius: 999px;
  font-family: "Apex Mk3", "Branding Pro", monospace;
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 0.3vh 0.9vh rgba(80, 97, 185, 0.35);
}
.misc__link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.25s ease;
}
.misc__link:hover { opacity: 0.6; }

/* Base media frame — every card now uses the row-4 frosted-glass look as
   its shared background. Per-row rules only change the image animation. */
.misc__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(180deg, #fafbfd 0%, #f4f6fa 100%);
  border: 0;
  border-radius: 14px;
  box-shadow: none;
  margin-bottom: 2vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 800px;
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}
.misc__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
  z-index: 0;
}
.misc__img {
  width: 84%;
  height: 84%;
  object-fit: contain;
  display: block;
  transform-style: preserve-3d;
  will-change: transform;
}

/* The .misc__float wrapper handles the VERTICAL BOB. */
.misc__float {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: misc-float 4.6s ease-in-out infinite;
  will-change: transform;
}
/* The img handles the Y-axis SWAY at its own cadence so the two motions
   stay independent and the model never sits perfectly still. */
.misc__img {
  /* layered shadow — close contact + soft cast — sells weight + lift */
  filter:
    drop-shadow(0 0.6vh 0.6vh rgba(0, 0, 0, 0.18))
    drop-shadow(0 2.4vh 2.8vh rgba(0, 0, 0, 0.15));
  /* static back-tilt only — the side-to-side sway is removed; the bob
     on .misc__float still drives the up-down motion. */
  transform: rotateX(-8deg);
  transform-style: preserve-3d;
  will-change: transform;
}
.misc__media::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 6%; width: 60%; height: 1vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.08) 40%, transparent 75%);
  border-radius: 50%;
  animation: misc-float-shadow 4.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

/* Stagger animations so neighbouring cards aren't in lockstep. Bob and
   sway use different offsets so the two motions stay independent. */
.misc__card:nth-child(4n + 2) .misc__float        { animation-delay: -1.1s; }
.misc__card:nth-child(4n + 2) .misc__img          { animation-delay: -1.5s; }
.misc__card:nth-child(4n + 2) .misc__media::after { animation-delay: -1.1s; }
.misc__card:nth-child(4n + 3) .misc__float        { animation-delay: -2.2s; }
.misc__card:nth-child(4n + 3) .misc__img          { animation-delay: -2.9s; }
.misc__card:nth-child(4n + 3) .misc__media::after { animation-delay: -2.2s; }
.misc__card:nth-child(4n)     .misc__float        { animation-delay: -3.3s; }
.misc__card:nth-child(4n)     .misc__img          { animation-delay: -4.2s; }
.misc__card:nth-child(4n)     .misc__media::after { animation-delay: -3.3s; }

/* Hover — uniform across all cards: lift the glass panel slightly and
   pause the bob so the model holds still while inspected. */
/* Character watermark — any misc tile that has its `--decor-bg` CSS
   variable set (driven by misc.astro's getDecor() helper) gets the
   grayscaled portrait sitting inside the product square BEHIND the
   merch image. Drops the default frosted-glass gradient on these tiles
   so the portrait isn't washed out. The asymmetric inset positions
   the portrait big and lower-anchored; the mask gradient fades it out
   toward the bottom edge of the tile. */
.misc__card[style*="--decor-bg"] .misc__media {
  overflow: hidden;
  background: linear-gradient(180deg, #F4F8FC 0%, #EEF3F9 100%);
}
.misc__card[style*="--decor-bg"] .misc__media::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -120%;
  right: -180%;
  bottom: -200%;
  /* per-character horizontal nudge (overrides the base right-lean) */
  transform: translateX(var(--decor-shift-x, 0%));
  background: var(--decor-bg) center / contain no-repeat;
  /* Pure grayscale watermark — strips chroma, flattens contrast slightly
     so the portrait reads as a soft gray ghost behind the merch. */
  filter: grayscale(1) contrast(0.9);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
  -webkit-mask: linear-gradient(to bottom, #000 9%, #000 22%, transparent 40%);
          mask: linear-gradient(to bottom, #000 9%, #000 22%, transparent 40%);
}
.misc__card[style*="--decor-bg"] .misc__float {
  position: relative;
  z-index: 1;
}

.misc__card:hover .misc__media {
  transform: translateY(-0.4vh);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(120, 130, 150, 0.10),
    0 2vh 4vh rgba(120, 130, 150, 0.18);
}
.misc__card:hover .misc__float,
.misc__card:hover .misc__img,
.misc__card:hover .misc__media::after { animation-play-state: paused; }

@keyframes misc-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3.2vh); }
}
@keyframes misc-sway {
  /* constant slight back-tilt (rotateX -8°) + Y-axis sway gives the
     model the look of leaning into the frame as it rotates. */
  0%, 100% { transform: rotateX(-8deg) rotateY(-22deg); }
  50%      { transform: rotateX(-8deg) rotateY( 22deg); }
}
@keyframes misc-float-shadow {
  0%, 100% { transform: translateX(-50%) scale(1, 1);   opacity: 0.7; }
  50%      { transform: translateX(-50%) scale(0.72, 0.72); opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .misc__float,
  .misc__img,
  .misc__media::after { animation: none !important; }
}
.misc__meta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.4vw 1vw;
  padding-top: 0.4vh;
  border-top: 0;
}
.misc__name {
  font-family: "Branding Pro", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--misc-ink);
  letter-spacing: 0;
  text-transform: lowercase;
}
.misc__price {
  font-family: "Branding Pro", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0;
  background: transparent;
  color: var(--misc-accent);
  padding: 0;
  font-variant-numeric: tabular-nums;
}

.misc__footer-mark {
  font-family: "Branding Pro", system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0;
  color: var(--misc-ink-soft);
  text-transform: lowercase;
}
.misc__footer {
  margin-top: 14vh;
  padding-top: 4vh;
  border-top: 1px solid var(--misc-accent-soft);
  box-shadow: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4vw;
  flex-wrap: wrap;
}

/* Tiny inline theme switcher — sits in the footer next to "back to home".
   Pure text links separated by middots, current theme highlighted in
   the slate-violet accent. Reused on the misc product detail page too. */
.misc__themes {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  font-family: "Branding Pro", system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: lowercase;
}
.misc__theme-link {
  color: #777;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.misc__theme-link:hover {
  color: var(--misc-accent);
  border-bottom-color: var(--misc-accent);
}
.misc__theme-link--current {
  color: var(--misc-accent);
  border-bottom-color: var(--misc-accent);
  cursor: default;
}
.misc__theme-sep {
  color: rgba(80, 97, 185, 0.35);
  user-select: none;
}

/* Misc product-detail footer: holds only the theme switcher. */
.mpd__footer {
  margin-top: 8vh;
  padding-top: 3vh;
  border-top: 1px solid var(--misc-accent-soft);
  display: flex;
  justify-content: flex-end;
}

.misc__back {
  font-family: "Branding Pro", system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  letter-spacing: 0;
  color: var(--misc-ink-soft);
  text-decoration: none;
  text-transform: lowercase;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.misc__back:hover {
  color: var(--misc-accent);
  border-bottom-color: var(--misc-accent-soft);
}

@media (max-width: 1100px) {
  body.page-index .content-for-layout,
  body.page-collection .content-for-layout,
  body.page-cart  .content-for-layout,
  body.page-product .content-for-layout,
  body.page-page    .content-for-layout { padding: 0 7vw 12vh; }
  body.page-index .misc__header-wrap,
  body.page-collection .misc__header-wrap,
  body.page-cart  .misc__header-wrap,
  body.page-product .misc__header-wrap,
  body.page-page    .misc__header-wrap { padding: 7vh 7vw 0; }
  .misc__cart-toggle { right: 7vw; }
}
@media (max-width: 900px) {
  .misc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 100%; gap: 5vh 3vw; }
}
@media (max-width: 700px) {
  body.page-index .content-for-layout,
  body.page-collection .content-for-layout,
  body.page-cart  .content-for-layout,
  body.page-product .content-for-layout,
  body.page-page    .content-for-layout { padding: 0 6vw 12vh; }
  body.page-index .misc__header-wrap,
  body.page-collection .misc__header-wrap,
  body.page-cart  .misc__header-wrap,
  body.page-product .misc__header-wrap,
  body.page-page    .misc__header-wrap { padding: 6vh 6vw 0; }
  .misc__cart-toggle { right: 6vw; }
  .misc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5vh 4vw; }
}
@media (max-width: 600px) {
  body.page-index .content-for-layout,
  body.page-collection .content-for-layout,
  body.page-cart  .content-for-layout,
  body.page-product .content-for-layout,
  body.page-page    .content-for-layout { padding: 0 6vw 12vh; }
  body.page-index .misc__header-wrap,
  body.page-collection .misc__header-wrap,
  body.page-cart  .misc__header-wrap,
  body.page-product .misc__header-wrap,
  body.page-page    .misc__header-wrap { padding: 6vh 6vw 0; }
  .misc__cart-toggle {
    position: static;
    margin: 0 0 3vh;
    align-self: flex-start;
    order: -1;
  }
  .misc__header {
    max-width: 100%;
    margin-bottom: 5vh;
    padding-bottom: 3vh;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 3vh;
    display: flex;
    flex-direction: column;
  }
  .misc__header-meta { align-items: flex-start; padding-top: 2vh; }
  .misc__eyebrow { font-size: 1rem; margin-bottom: 1vh; }
  .misc__title { font-size: clamp(2rem, 12vw, 3.4rem); line-height: 0.95; }
  .misc__lede { margin-top: 1.5vh; font-size: 0.95rem; line-height: 1.55; }
  /* Theme block — stack heading ABOVE the tiles on mobile, then tiles
     in a centered 2-column grid so they sit cleanly side by side. */
  .misc__theme-block {
    flex-direction: column;
    align-items: stretch;
    gap: 1.6vh;
    width: 100%;
    height: auto;
  }
  .misc__theme-heading { align-items: flex-start; text-align: left; }
  .misc__theme-heading-eyebrow { font-size: 0.7rem; letter-spacing: 0.28em; margin-bottom: 0.4em; }
  .misc__theme-heading-title { font-size: clamp(1.1rem, 5vw, 1.5rem); }
  .misc__theme-switch {
    display: flex;
    flex-direction: column;
    gap: 1vh;
    width: 100%;
  }
  .misc__theme-square {
    width: 100%;
    height: auto;
    aspect-ratio: 1.8 / 1;
    min-width: 0;
    max-width: none;
    max-height: 180px;
  }
  .misc__theme-square > img { max-height: 80%; bottom: 1.8em; }
  .misc__theme-square--psg .misc__theme-square-char,
  .misc__theme-square--nso .misc__theme-square-char {
    height: 88%;
    max-height: none;
    bottom: 4%;
  }
  .misc__announcement {
    margin: 3vh 0 4vh;
    padding: 1.6em 1.2em;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    gap: 1em 0;
    flex-direction: column;
  }
  .misc__section { margin-bottom: 10vh; }
  .misc__section-head {
    grid-template-columns: 1fr auto;
    row-gap: 0.6vh;
    column-gap: 3vw;
    margin-bottom: 3vh;
  }
  .misc__section-title { font-size: clamp(1.4rem, 5vw, 1.8rem); }
  .misc__section-tagline { grid-column: 1 / -1; justify-self: start; font-size: 0.85rem; }
  .misc__grid { grid-template-columns: 1fr; gap: 5vh 0; max-width: 100%; }
  .misc__controls { max-width: 100%; flex-direction: column; align-items: stretch; gap: 1.6vh; margin-bottom: 4vh; }
  .misc__search { flex: 1 1 auto; }
  .misc__chips { justify-content: flex-start; flex-wrap: wrap; gap: 1.5vw 2vw; padding-bottom: 0.5vh; }
  .misc__chip { font-size: 0.95rem; padding: 0.55em 1.1em; }
  .misc__media { aspect-ratio: 1 / 1; border-radius: 12px; }
  .misc__footer { margin-top: 8vh; flex-direction: column; gap: 2vh; align-items: flex-start; }
  .misc__corner { display: none; }
}
@media (max-width: 420px) {
  body.page-index .content-for-layout,
  body.page-collection .content-for-layout,
  body.page-cart  .content-for-layout,
  body.page-product .content-for-layout,
  body.page-page    .content-for-layout { padding: 0 5vw 10vh; }
  body.page-index .misc__header-wrap,
  body.page-collection .misc__header-wrap,
  body.page-cart  .misc__header-wrap,
  body.page-product .misc__header-wrap,
  body.page-page    .misc__header-wrap { padding: 5vh 5vw 0; }
  .misc__title { font-size: clamp(2.2rem, 13vw, 3.4rem); }
}

/* ===========================================================================
   MISC PRODUCT DETAIL — same nyalra palette as /misc, two-column hero
   --------------------------------------------------------------------------
   Image (glass-frame + float + sway) anchored to the LEFT; copy + specs
   stacked on the RIGHT. Soft slate-violet accent on title/price/links.
   ============================================================================ */
/* === MISC product detail — dedicated single-screen page ===
   Body class `page-product` lives on this template. Hide misc title +
   theme switcher + footer, but keep the cart toggle floating so the
   user can still open the cart. Lock the viewport so the page never
   scrolls horizontally or vertically. */
body.page-product .misc__header,
body.page-product .misc__announcement,
body.page-psg-product .misc__announcement,
body.page-nso-product .misc__announcement,
body.page-psg .misc__announcement,
body.page-nso .misc__announcement { display: none !important; }
body.page-product .misc__footer { display: none !important; }
body.page-product .misc__header-wrap {
  padding: 0 !important;
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: 0;
  background: transparent;
  border: 0;
  pointer-events: none;
  z-index: 50;
}
body.page-product .misc__cart-toggle {
  position: fixed !important;
  pointer-events: auto;
  top: 3vh !important;
  right: 3vw !important;
  margin: 0 !important;
  order: 0 !important;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.page-product { overflow: hidden; }
body.page-product .content-for-layout { padding: 0; margin: 0; }

.mpd {
  --misc-accent: #5061b9;
  --misc-accent-soft: rgba(80, 97, 185, 0.20);
  height: 100vh;
  width: 100vw;
  background: #ffffff;
  color: #111111;
  font-family: 'Branding Pro', system-ui, -apple-system, sans-serif;
  padding: 4vh 6vw 4vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mpd__back {
  display: inline-block;
  flex: 0 0 auto;
  margin-bottom: 2.5vh;
  font-family: 'Branding Pro', system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--misc-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.mpd__back:hover { color: var(--misc-accent); border-bottom-color: var(--misc-accent-soft); }

.mpd__hero {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 5vw;
  align-items: center;
}

/* Chrome / pastel iridescent frame — replaces the pink rect from before.
   Soft blue, lavender, peach, mint washes over a near-white base for
   an oil-slick chrome feel. Sized to fit the viewport height. */
.mpd__media {
  position: relative;
  height: 100%;
  max-height: 88vh;
  aspect-ratio: 4 / 5;
  justify-self: end;
  margin: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(180, 205, 255, 0.70), transparent 55%),
    radial-gradient(circle at 82% 18%, rgba(255, 205, 230, 0.70), transparent 55%),
    radial-gradient(circle at 78% 82%, rgba(200, 245, 220, 0.65), transparent 55%),
    radial-gradient(circle at 22% 78%, rgba(225, 215, 255, 0.70), transparent 55%),
    linear-gradient(135deg, #f4f7ff 0%, #f8f0ff 50%, #fff0f4 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  box-shadow: 0 1.4vh 4vh rgba(120, 130, 150, 0.12);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 900px;
}
.mpd__media::before {
  content: "";
  position: absolute; inset: 0;
  background: transparent;
  pointer-events: none;
  z-index: 0;
}
/* Character watermark on the detail page — same look as the catalog tiles,
   driven by the per-product `--decor-bg`, `--decor-hue`, `--decor-shift-x`
   CSS variables set inline on .mpd__media. Sits between the sheen ::before
   (z 0) and the floating product image (.mpd__float z 1). */
.mpd__decor {
  position: absolute;
  top: -30%;
  left: -120%;
  right: -180%;
  bottom: -200%;
  transform: translateX(var(--decor-shift-x, 0%));
  background: var(--decor-bg) center / contain no-repeat;
  filter:
    grayscale(1)
    sepia(1)
    hue-rotate(var(--decor-hue, 0deg))
    saturate(1.6)
    contrast(0.75);
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
  -webkit-mask: linear-gradient(to bottom, #000 9%, #000 22%, transparent 40%);
          mask: linear-gradient(to bottom, #000 9%, #000 22%, transparent 40%);
}
.mpd__media::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 3%; width: 60%; height: 1.4vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.08) 40%,
    transparent 75%);
  border-radius: 50%;
  animation: misc-float-shadow 4.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
/* Vertical bob on the wrapper, Y-axis sway on the img. */
.mpd__float {
  position: relative;
  z-index: 1;
  width: 86%;
  height: 86%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: misc-float 4.6s ease-in-out infinite;
  will-change: transform;
}
.mpd__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* same layered shadow as the catalog tiles — close contact + soft cast */
  filter:
    drop-shadow(0 0.6vh 0.6vh rgba(0, 0, 0, 0.18))
    drop-shadow(0 2.4vh 2.8vh rgba(0, 0, 0, 0.15));
  /* static back-tilt — bob on .mpd__float carries the up-down motion. */
  transform: rotateX(-8deg);
  transform-style: preserve-3d;
  will-change: transform;
}

/* Copy column — tight single-screen layout */
.mpd__copy {
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.mpd__eyebrow {
  margin: 0 0 1.2vh;
  font-family: 'Branding Pro', system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--misc-ink-soft, #6b6b6b);
}
.mpd__name {
  margin: 0 0 1.4vh;
  font-family: "Coves", "Branding Pro", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: var(--misc-accent);
}
.mpd__price {
  margin: 0 0 2vh;
  font-family: 'Branding Pro', system-ui, sans-serif;
  font-weight: 300;
  font-size: 1.25rem;
  color: var(--misc-accent);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.mpd__desc {
  margin: 0 0 2.4vh;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #555555;
  max-height: 22vh;
  overflow: hidden;
}
.mpd__variants {
  display: flex;
  gap: 0.6vw;
  margin: 0 0 2vh;
  flex-wrap: wrap;
}
.mpd__variant {
  padding: 0.6em 1.2em;
  border: 1px solid var(--misc-accent-soft);
  border-radius: 999px;
  background: transparent;
  color: var(--misc-ink-soft);
  font-family: 'Branding Pro', system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  text-transform: lowercase;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.mpd__variant:hover { color: var(--misc-accent); border-color: var(--misc-accent-soft); }
.mpd__variant.is-selected {
  background: var(--misc-accent-soft);
  border-color: var(--misc-accent);
  color: var(--misc-accent);
}
.mpd__cta {
  align-self: flex-start;
  display: inline-block;
  padding: 1.1vh 2.4vw;
  border: 1px solid var(--misc-accent);
  background: transparent;
  color: var(--misc-accent);
  font-family: 'Branding Pro', system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: lowercase;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.mpd__cta:hover { background: var(--misc-accent); color: #ffffff; }

.mpd__specs {
  margin-top: 4vh;
  padding-top: 3vh;
  border-top: 1px solid var(--misc-accent-soft);
}
.mpd__specs-heading {
  margin: 0 0 2vh;
  font-family: 'Branding Pro', system-ui, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: var(--misc-accent);
  letter-spacing: 0.02em;
}
.mpd__specs-list {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  column-gap: 3vw;
  row-gap: 1vh;
  margin: 0;
}
.mpd__spec { display: contents; }
.mpd__spec dt {
  font-family: "Apex Mk3", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #777777;
  align-self: center;
}
.mpd__spec dd {
  margin: 0;
  font-family: 'Branding Pro', system-ui, sans-serif;
  font-size: 0.95rem;
  color: #111111;
  align-self: center;
}

@media (max-width: 900px) {
  /* Tablet — let the page scroll instead of forcing single-screen, the
     locked-height layout makes everything cramped on smaller devices. */
  body.page-product { overflow: auto; height: auto; }
  body.page-product .content-for-layout { height: auto; }
  body.page-product .misc__cart-toggle { top: 18px !important; right: 18px !important; }

  .mpd {
    height: auto;
    min-height: 100vh;
    padding: 4vh 6vw 6vh;
    display: block;
  }
  .mpd__hero {
    display: flex;
    flex-direction: column;
    gap: 3vh;
    align-items: stretch;
  }
  .mpd__media {
    height: auto;
    max-height: 60vh;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 5;
    justify-self: center;
  }
  .mpd__copy { justify-content: flex-start; overflow: visible; }
  .mpd__desc { max-height: none; overflow: visible; }
}
@media (max-width: 600px) {
  .mpd { padding: 3vh 6vw 5vh; }
  .mpd__back { font-size: 0.85rem; margin-bottom: 1.6vh; padding-bottom: 1px; }
  .mpd__media { max-height: 56vh; max-width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; }
  .mpd__img { width: 100%; height: 100%; }
  .mpd__eyebrow { font-size: 0.8rem; margin-bottom: 0.8vh; }
  .mpd__name { font-size: clamp(1.6rem, 7vw, 2.4rem); margin-bottom: 0.8vh; line-height: 1.05; }
  .mpd__price { font-size: 1.15rem; margin-bottom: 1.4vh; }
  .mpd__desc { font-size: 0.9rem; line-height: 1.55; margin-bottom: 2vh; }
  .mpd__variants { gap: 2vw; margin-bottom: 2vh; }
  .mpd__variant { font-size: 0.85rem; padding: 0.5em 1em; }
  .mpd__cta {
    align-self: stretch;
    display: block;
    width: 100%;
    padding: 1.4vh 0;
    font-size: 1rem;
    text-align: center;
  }
}

/* Contact page — magazine-style form, mirrors misc card numbering + eyebrow */
body.page-page .misc__announcement { display: none; }

.tz-contact {
  background: var(--misc-bg);
  color: var(--misc-ink);
  padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 9vw, 120px);
}
.tz-contact__inner {
  max-width: 1080px;
  margin: 0 auto;
  box-sizing: border-box;
}
.tz-contact__back {
  display: inline-block;
  margin-bottom: clamp(24px, 4vw, 48px);
  font-family: 'Apex Mk3', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--misc-ink-soft);
  text-decoration: none;
  text-transform: lowercase;
  transition: color 140ms ease;
}
.tz-contact__back:hover { color: var(--misc-accent); }

.tz-contact__head {
  margin-bottom: clamp(40px, 6vw, 72px);
  max-width: 720px;
}
.tz-contact__title {
  font-family: 'Beam Visionary', cursive;
  font-weight: 400;
  font-size: clamp(4rem, 11vw, 7.5rem);
  line-height: 1;
  margin: 0 0 18px;
  text-transform: lowercase;
  color: var(--misc-accent);
  letter-spacing: 0;
}
.tz-contact__rule {
  display: block;
  width: 48px;
  height: 2px;
  background: var(--misc-accent);
  margin: 0 0 18px;
}
.tz-contact__lede {
  font-family: 'Branding Pro', sans-serif;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.55;
  color: var(--misc-ink-soft);
  margin: 0;
  max-width: 540px;
}

.tz-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.9fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.tz-contact__form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.tz-contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.tz-contact__field {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 6px;
  align-items: end;
}
.tz-contact__num {
  font-family: 'Apex Mk3', monospace;
  font-size: 0.7rem;
  color: var(--misc-ink-soft);
  letter-spacing: 0.08em;
  grid-row: 1;
  grid-column: 1;
  padding-bottom: 4px;
}
.tz-contact__label {
  font-family: 'Branding Pro', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--misc-ink);
  grid-row: 1;
  grid-column: 2;
}
.tz-contact__field input,
.tz-contact__field textarea {
  font-family: 'Branding Pro', sans-serif;
  font-size: 1rem;
  color: var(--misc-ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--misc-line);
  border-radius: 0;
  padding: 8px 0 10px;
  width: 100%;
  box-sizing: border-box;
  grid-row: 2;
  grid-column: 1 / -1;
  transition: border-color 140ms ease;
}
.tz-contact__field textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.55;
  border: 1px solid var(--misc-line);
  border-radius: 4px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.6);
}
.tz-contact__field input::placeholder,
.tz-contact__field textarea::placeholder {
  color: rgba(26, 26, 26, 0.32);
  font-style: italic;
}
.tz-contact__field input:focus,
.tz-contact__field textarea:focus {
  outline: none;
  border-color: var(--misc-accent);
}
.tz-contact__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Apex Mk3', monospace;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--misc-ink);
  color: #fff;
  border: none;
  padding: 16px 28px 16px 32px;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 12px;
  transition: background 140ms ease, transform 140ms ease, padding 140ms ease;
}
.tz-contact__cta:hover {
  background: var(--misc-accent);
  padding-right: 36px;
}
.tz-contact__cta-arrow {
  font-family: 'Apex Mk3', monospace;
  font-size: 1.05rem;
  transition: transform 140ms ease;
}
.tz-contact__cta:hover .tz-contact__cta-arrow { transform: translateX(3px); }

.tz-contact__success {
  font-family: 'Branding Pro', sans-serif;
  background: var(--misc-accent-soft);
  color: var(--misc-accent);
  padding: 14px 18px;
  border-radius: 4px;
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.tz-contact__errors {
  list-style: none;
  padding: 14px 18px;
  margin: 0;
  background: rgba(220, 60, 60, 0.06);
  border-left: 2px solid #b53030;
  color: #b53030;
  font-family: 'Branding Pro', sans-serif;
  font-size: 0.9rem;
}

.tz-contact__aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 0 0;
  border-top: 2px solid var(--misc-ink);
}
.tz-contact__aside-label {
  font-family: 'Apex Mk3', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--misc-ink);
  margin: 0 0 4px;
}
.tz-contact__line {
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px dashed var(--misc-line);
  transition: color 140ms ease;
}
.tz-contact__line:hover { color: var(--misc-accent); }
.tz-contact__line-tag {
  font-family: 'Branding Pro', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--misc-ink-soft);
}
.tz-contact__line-val {
  font-family: 'Apex Mk3', monospace;
  font-size: 0.95rem;
  color: var(--misc-ink);
  word-break: break-word;
}
.tz-contact__line:hover .tz-contact__line-val { color: var(--misc-accent); }

@media (max-width: 800px) {
  .tz-contact__grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .tz-contact { padding: 24px 0 48px; }
  .tz-contact__row { grid-template-columns: 1fr; gap: 18px; }
  .tz-contact__cta { width: 100%; justify-content: center; }
  .tz-contact__title { font-size: clamp(3.2rem, 16vw, 4.8rem); }
}

/* ===========================================================================
   TZ FOOTER — magazine three-column footer for misc / catalog / contact.
   Hidden on full-bleed pages (product, PSG, NSO) which have their own
   footer treatments built into those sections.
   ============================================================================ */
body.page-product .tz-footer,
body.page-psg .tz-footer,
body.page-nso .tz-footer,
body.page-psg-product .tz-footer,
body.page-nso-product .tz-footer { display: none !important; }

.tz-footer {
  margin-top: 16vh;
  padding: clamp(40px, 6vw, 72px) 9vw clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--misc-accent-soft);
  background: var(--misc-bg);
  color: var(--misc-ink);
}
@media (max-width: 1100px) { .tz-footer { padding-left: 7vw; padding-right: 7vw; } }
@media (max-width: 700px)  { .tz-footer { padding-left: 6vw; padding-right: 6vw; } }
@media (max-width: 420px)  { .tz-footer { padding-left: 5vw; padding-right: 5vw; } }
.tz-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  padding-bottom: clamp(32px, 5vw, 56px);
  border-bottom: 1px dashed var(--misc-line);
}
.tz-footer__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tz-footer__col-label {
  font-family: 'Branding Pro', system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--misc-ink-soft);
  margin: 0 0 4px;
}

.tz-footer__eyebrow {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: 'Beam Visionary', cursive;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.05;
  color: var(--misc-accent);
}
.tz-footer__eyebrow-line {
  display: block;
  text-decoration: none;
  color: inherit;
  margin: 0;
}
a.tz-footer__eyebrow-line:hover { opacity: 0.7; }

.tz-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tz-footer__list a {
  font-family: 'Apex Mk3', monospace;
  font-size: 0.95rem;
  text-transform: lowercase;
  color: var(--misc-ink);
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 140ms ease, border-color 140ms ease;
}
.tz-footer__list a:hover {
  color: var(--misc-accent);
  border-bottom-color: var(--misc-accent);
}

.tz-footer__ig {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--misc-ink);
  transition: color 140ms ease;
}
.tz-footer__ig:hover { color: var(--misc-accent); }
.tz-footer__ig-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.tz-footer__ig-handle {
  font-family: 'Apex Mk3', monospace;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.tz-footer__email {
  font-family: 'Apex Mk3', monospace;
  font-size: 0.88rem;
  color: var(--misc-ink-soft);
  text-decoration: none;
  word-break: break-word;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 140ms ease, border-color 140ms ease;
}
.tz-footer__email:hover {
  color: var(--misc-accent);
  border-bottom-color: var(--misc-accent);
}

.tz-footer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: clamp(20px, 3vw, 32px);
  font-family: 'Branding Pro', system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--misc-ink-soft);
  text-transform: lowercase;
}

@media (max-width: 800px) {
  .tz-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px 40px;
  }
  .tz-footer__col--brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .tz-footer { margin-top: 10vh; }
  .tz-footer__inner { grid-template-columns: 1fr; gap: 28px; }
  .tz-footer__bar { flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; }
}


/* ===========================================================================