/* ============================================================
   BLAST UNIT — Global Stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  --blast-black: #050505;
  --blast-green: #CCFF00;
  --blast-yellow: #FFB800;
  --blast-grey: #1a1a1a;
  --blast-border: #333;
  --blast-font-heading: 'UnifrakturMaguntia', serif;
  --blast-font-mono: 'JetBrains Mono', monospace;
}

/* ── Hide Horizon Header / Banner ────────────────── */
#header-group { display: none !important; }

/* ── Global Box Sizing + Overflow ─────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ── Base ─────────────────────────────────────────── */
.blast-section {
  background: var(--blast-black);
  color: #fff;
  font-family: var(--blast-font-mono);
  overflow-x: hidden;
}

/* ── Radiation Glow Utility ───────────────────────── */
.blast-glow {
  box-shadow: 0 0 15px rgba(204, 255, 0, 0.4);
  border: 1px solid var(--blast-green);
  transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.blast-glow:hover {
  box-shadow: 0 0 30px rgba(204, 255, 0, 0.8);
  background-color: var(--blast-green);
  color: #000;
}

/* ── Glitch Button ────────────────────────────────── */
.blast-btn {
  display: inline-block;
  padding: 14px 36px;
  background: transparent;
  color: var(--blast-green);
  border: 1px solid var(--blast-green);
  border-radius: 0;
  font-family: var(--blast-font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background 0.2s, color 0.2s;
}
.blast-btn:hover {
  animation: blast-glitch 0.3s steps(2) forwards;
  background: var(--blast-green);
  color: #000;
  transition: none;
}

/* ── Skull Pulse Animation ────────────────────────── */
@keyframes blast-pulse {
  0%   { filter: drop-shadow(0 0 0px rgba(204,255,0,0)); }
  50%  { filter: drop-shadow(0 0 30px rgba(204,255,0,0.9)); }
  100% { filter: drop-shadow(0 0 0px rgba(204,255,0,0)); }
}

/* ── Glitch Animation ─────────────────────────────── */
@keyframes blast-glitch {
  0%   { text-shadow: 2px 0 red, -2px 0 cyan; }
  25%  { text-shadow: -2px 0 red, 2px 0 cyan; }
  50%  { text-shadow: 2px 2px red, -2px -2px cyan; }
  75%  { text-shadow: -2px 2px red, 2px -2px cyan; }
  100% { text-shadow: none; }
}

/* ── Radiation Symbol Spin ────────────────────────── */
@keyframes blast-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── Cursor Blink ─────────────────────────────────── */
@keyframes blast-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Hero ─────────────────────────────────────────── */
.blast-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 20px 24px 10px;
  background: var(--blast-black);
  position: relative;
  overflow: hidden;
}
.blast-hero__skull {
  width: clamp(200px, 30vw, 400px);
  /* Required: the img carries width/height attributes as a CLS hint, and
     without an explicit auto here the raw pixel height wins over the clamped
     width and the skull stretches into a tall ellipse. */
  height: auto;
  animation: blast-pulse 2.5s ease-in-out infinite;
  margin-bottom: 32px;
}
.blast-hero__wordmark {
  font-family: var(--blast-font-heading);
  font-size: clamp(48px, 8vw, 96px);
  color: var(--blast-green);
  margin: 0 0 24px;
  line-height: 1;
  letter-spacing: 0.05em;
}
.blast-hero__countdown {
  display: flex;
  gap: 12px;
  margin-bottom: 40px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.blast-hero__countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--blast-green);
  padding: 16px 24px;
  min-width: 80px;
}
.blast-hero__countdown-number {
  font-family: var(--blast-font-mono);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  color: #fff;
  line-height: 1;
  min-width: 2ch;
  text-align: center;
}
.blast-hero__countdown-label {
  font-family: var(--blast-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #fff;
  text-transform: uppercase;
}
.blast-hero__countdown-sep {
  font-family: var(--blast-font-mono);
  font-size: clamp(20px, 3vw, 32px);
  color: var(--blast-green);
  line-height: 1;
}
.blast-hero__straight-logo {
  width: clamp(160px, 28vw, 340px);
  /* Same as the skull — the img's height attribute would otherwise override
     the aspect ratio. This wordmark is 3908x666, so the distortion is severe. */
  height: auto;
  margin-bottom: 32px;
  display: block;
  filter: brightness(0) invert(1);
}
.blast-hero__drop-label {
  font-family: var(--blast-font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--blast-yellow);
  text-transform: uppercase;
  margin-bottom: 40px;
}

/* ── Hero CTA ─────────────────────────────────────── */
.blast-hero__cta {
  margin-top: 8px;
  padding: 16px 44px;
  font-size: 14px;
  /* Faint lime bloom so the button reads as part of the radiating skull. */
  box-shadow: 0 0 20px rgba(204, 255, 0, 0.15);
}
.blast-hero__cta:hover {
  box-shadow: 0 0 30px rgba(204, 255, 0, 0.55);
}
@media (max-width: 480px) {
  .blast-hero__cta {
    width: 100%;
    max-width: 320px;
    padding: 16px 24px;
  }
}

/* ── Landing page: one screen, no scroll ──────────── */
/*
 * The homepage is a splash — hero + footer only. Let #MainContent own the
 * viewport height and have the hero absorb whatever is left, so the footer
 * sits flush at the bottom rather than pushing the page just past 100vh and
 * introducing a ~60px scroll. svh keeps this honest on mobile, where browser
 * chrome makes vh overshoot.
 */
body.template--index #MainContent {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
body.template--index #MainContent > .shopify-section:has(.blast-hero) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
body.template--index #MainContent > .blast-hero,
body.template--index .shopify-section > .blast-hero {
  flex: 1 1 auto;
  /* Release the global 100vh so flex can size it to the remaining space. */
  min-height: 0;
}

/* ── Hero — Live variant (no countdown, compact) ──── */
.blast-hero--live {
  min-height: unset;
  padding: 60px 24px;
}
@media (max-width: 480px) {
  .blast-hero--live {
    padding: 40px 16px;
  }
}

/* ── Armory ───────────────────────────────────────── */
.blast-armory {
  padding: 20px 40px 80px;
  background: var(--blast-black);
}
.blast-armory__header {
  margin-bottom: 48px;
  text-align: center;
}
.blast-armory__label {
  font-family: var(--blast-font-mono);
  font-size: 13px;
  color: var(--blast-green);
  letter-spacing: 0.2em;
  margin-bottom: 8px;
}
/*
 * On collection pages .blast-armory__label is an <h1> (it's the page's only
 * heading), so Horizon's h1 rules — 56px, heading family, own margins — would
 * otherwise win. Re-assert the mono label treatment at higher specificity.
 */
.blast-armory h1.blast-armory__label {
  font-family: var(--blast-font-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--blast-green);
  margin: 0 0 8px;
}
.blast-armory__description {
  font-family: var(--blast-font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: #888;
  max-width: 60ch;
  margin: 16px auto 0;
}
.blast-armory__description a {
  color: var(--blast-green);
}
.blast-armory__sublabel {
  font-family: var(--blast-font-mono);
  font-size: 11px;
  color: var(--blast-yellow);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.blast-armory__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
.blast-armory--home .blast-armory__grid {
  grid-template-columns: repeat(4, 1fr);
}
.blast-armory--collection .blast-armory__grid {
  /* Driven by the section's "Columns on desktop" setting. */
  grid-template-columns: repeat(var(--blast-grid-columns, 3), 1fr);
}
@media (max-width: 900px) {
  .blast-armory__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .blast-armory__grid { grid-template-columns: 1fr; }
  .blast-armory--home .blast-armory__grid { grid-template-columns: 1fr; }
  .blast-armory { padding: 40px 16px 60px; }
}

/* ── Product Card ─────────────────────────────────── */
.blast-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--blast-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 0 rgba(204,255,0,0);
  transition: border-color 0.3s, box-shadow 0.3s;
  text-decoration: none;
  display: block;
}
.blast-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blast-green), transparent);
  opacity: 0.5;
}
.blast-card__watermark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  /* Explicit auto so the img's 1:1 width/height CLS hint can't distort a
     non-square replacement logo once the real image has loaded. */
  height: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.blast-card:hover .blast-card__watermark {
  opacity: 0.06;
  animation: blast-spin 8s linear infinite;
}
.blast-card:hover {
  border-color: var(--blast-green);
  box-shadow: 0 0 20px rgba(204,255,0,0.15);
}
.blast-card__image-wrap {
  overflow: hidden;
  aspect-ratio: 1;
  background: #0d0d0d;
}
.blast-card__image-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.blast-card:hover .blast-card__image-wrap img {
  transform: scale(1.03);
}
.blast-card__info {
  padding: 16px;
}
.blast-card__badge {
  font-family: var(--blast-font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid;
  display: inline-block;
  margin-bottom: 10px;
}
.blast-card__badge--active {
  color: var(--blast-green);
  border-color: var(--blast-green);
}
.blast-card__badge--depleted {
  color: #555;
  border-color: #333;
}
.blast-card__title {
  font-family: var(--blast-font-mono);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.blast-card__price {
  font-family: var(--blast-font-mono);
  font-size: 13px;
  color: var(--blast-green);
}
/* Placeholder / fallback imagery — replaces the old inline style attribute. */
.blast-card__placeholder-img {
  padding: 40px;
  opacity: 0.3;
  object-fit: contain !important;
}

/* ── Card — Depleted (sold out) ────────────────────── */
.blast-card--depleted .blast-card__image-wrap img {
  filter: grayscale(1);
  opacity: 0.4;
}
.blast-card--depleted .blast-card__title {
  color: #777;
}
.blast-card--depleted::after {
  background: linear-gradient(90deg, transparent, #444, transparent);
}
.blast-card--depleted:hover {
  border-color: #444;
  box-shadow: none;
}

.blast-card__badge--sale {
  color: var(--blast-yellow);
  border-color: var(--blast-yellow);
}
.blast-card__badge--classified {
  color: #555;
  border-color: #333;
}

.blast-card__price-was {
  color: #666;
  margin-right: 8px;
  text-decoration: line-through;
}
.blast-card--depleted .blast-card__price-now {
  color: #666;
}

/* ── Sort Toolbar ─────────────────────────────────── */
.blast-armory__toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #1a1a1a;
}
.blast-armory__sort-label {
  font-family: var(--blast-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--blast-yellow);
  text-transform: uppercase;
}
.blast-armory__sort-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--blast-border);
  border-radius: 0;
  color: #fff;
  font-family: var(--blast-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 32px 8px 12px;
  cursor: pointer;
  transition: border-color 0.2s;
  /* Lime caret, inlined so it needs no extra request. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23CCFF00' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.blast-armory__sort-select:hover,
.blast-armory__sort-select:focus {
  border-color: var(--blast-green);
  outline: none;
}
.blast-armory__sort-select option {
  background: var(--blast-grey);
  color: #fff;
}
.blast-btn--small {
  padding: 8px 18px;
  font-size: 11px;
}
@media (max-width: 560px) {
  .blast-armory__toolbar {
    justify-content: space-between;
  }
  .blast-armory__sort-select {
    flex: 1;
    max-width: 60%;
  }
}

/* ── Pagination ───────────────────────────────────── */
.blast-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-family: var(--blast-font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.blast-pagination__link {
  color: var(--blast-green);
  text-decoration: none;
  border: 1px solid var(--blast-border);
  padding: 10px 18px;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.blast-pagination__link:hover {
  border-color: var(--blast-green);
  background: var(--blast-green);
  color: #000;
}
.blast-pagination__link--disabled {
  color: #444;
  border-color: #1a1a1a;
  pointer-events: none;
}
.blast-pagination__pages {
  display: flex;
  align-items: center;
  gap: 4px;
}
.blast-pagination__page {
  color: #888;
  text-decoration: none;
  padding: 8px 10px;
  min-width: 34px;
  text-align: center;
  transition: color 0.2s;
}
.blast-pagination__page:hover {
  color: var(--blast-green);
}
.blast-pagination__page--current {
  color: #000;
  background: var(--blast-green);
}
.blast-pagination__ellipsis {
  color: #444;
  padding: 0 4px;
}
@media (max-width: 560px) {
  .blast-pagination {
    gap: 12px;
  }
  .blast-pagination__link {
    padding: 8px 12px;
  }
}

/* ── Empty / No Results ───────────────────────────── */
.blast-armory__empty {
  text-align: center;
  padding: 80px 20px;
  border: 1px dashed var(--blast-border);
}
.blast-armory__empty-title {
  font-family: var(--blast-font-mono);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--blast-yellow);
  margin-bottom: 12px;
}
.blast-armory__empty-body {
  font-family: var(--blast-font-mono);
  font-size: 12px;
  color: #777;
  margin-bottom: 28px;
}

.blast-armory__cta {
  text-align: center;
}
@media (max-width: 560px) {
  .blast-armory__cta { padding: 0 16px; }
  .blast-btn {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* ── Product & Collection Pages — Blast Theme ─────── */
/*
 * Horizon applies color schemes as classes on each section element
 * (e.g. .color-scheme-1), which re-declares CSS variables at child
 * specificity and overrides body-level values. We must target both
 * the body AND any descendant color-scheme elements to win the cascade.
 */
body.template--product,
body.template--collection,
body.template--product [class*="color-"],
body.template--collection [class*="color-"] {
  /* Core palette */
  --color-background: rgb(5, 5, 5);
  --color-background-rgb: 5, 5, 5;
  --color-foreground: rgb(255, 255, 255);
  --color-foreground-rgb: 255, 255, 255;
  --color-foreground-heading: rgb(255, 255, 255);
  --color-foreground-heading-rgb: 255, 255, 255;
  --color-foreground-muted: rgb(170, 170, 170);
  --color-primary: rgb(204, 255, 0);
  --color-primary-rgb: 204, 255, 0;
  --color-primary-hover: rgb(180, 230, 0);
  --color-border: rgb(51, 51, 51);
  --color-border-rgb: 51, 51, 51;
  --color-shadow: rgb(0, 0, 0);

  /* Primary button = blast green fill */
  --color-primary-button-text: rgb(0, 0, 0);
  --color-primary-button-background: rgb(204, 255, 0);
  --color-primary-button-border: rgb(204, 255, 0);
  --color-primary-button-hover-text: rgb(0, 0, 0);
  --color-primary-button-hover-background: rgb(180, 230, 0);
  --color-primary-button-hover-border: rgb(180, 230, 0);

  /* Secondary button = blast-btn outline */
  --color-secondary-button-text: rgb(204, 255, 0);
  --color-secondary-button-background: transparent;
  --color-secondary-button-border: rgb(204, 255, 0);
  --color-secondary-button-hover-text: rgb(0, 0, 0);
  --color-secondary-button-hover-background: rgb(204, 255, 0);
  --color-secondary-button-hover-border: rgb(204, 255, 0);

  /* Inputs */
  --color-input-background: rgb(5, 5, 5);
  --color-input-text: rgb(255, 255, 255);
  --color-input-text-rgb: 255, 255, 255;
  --color-input-border: rgb(51, 51, 51);
  --color-input-hover-background: rgb(26, 26, 26);

  /* Variant pills */
  --color-variant-background: transparent;
  --color-variant-border: rgb(51, 51, 51);
  --color-variant-text: rgb(255, 255, 255);
  --color-variant-text-rgb: 255, 255, 255;
  --color-variant-hover-background: rgb(26, 26, 26);
  --color-variant-hover-text: rgb(255, 255, 255);
  --color-variant-hover-border: rgb(204, 255, 0);
  --color-selected-variant-background: transparent;
  --color-selected-variant-border: rgb(204, 255, 0);
  --color-selected-variant-text: rgb(204, 255, 0);
  --color-selected-variant-hover-background: transparent;
  --color-selected-variant-hover-text: rgb(204, 255, 0);
  --color-selected-variant-hover-border: rgb(204, 255, 0);

  /* Heading font variable colors */
  --font-h1--color: rgb(255, 255, 255);
  --font-h2--color: rgb(255, 255, 255);
  --font-h3--color: rgb(255, 255, 255);
  --font-h4--color: rgb(255, 255, 255);
  --font-h5--color: rgb(255, 255, 255);
  --font-h6--color: rgb(255, 255, 255);
}

/* Hard background + text overrides for the page shell */
body.template--product,
body.template--collection {
  background: rgb(5, 5, 5) !important;
  color: rgb(255, 255, 255);
}

/* Every section background must be black */
body.template--product .shopify-section,
body.template--collection .shopify-section {
  background: rgb(5, 5, 5) !important;
}

/* Price — blast green */
body.template--product [class*="price"]:not([class*="compare"]),
body.template--collection [class*="price"]:not([class*="compare"]) {
  color: var(--blast-green) !important;
  font-family: var(--blast-font-mono) !important;
}

/* Collection card titles — mono uppercase */
body.template--collection [class*="product-title"],
body.template--collection [class*="card"] a {
  font-family: var(--blast-font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Product title on PDP */
body.template--product h1 {
  font-family: var(--blast-font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #fff !important;
}

/* Dividers */
body.template--product hr,
body.template--collection hr {
  border-color: #1a1a1a !important;
}

/* Product page — blast card border on the media gallery wrapper */
body.template--product product-media-gallery,
body.template--product [class="media-gallery"] {
  display: block;
  border: 1px solid var(--blast-border);
  box-shadow: 0 0 0 0 rgba(204,255,0,0);
  transition: border-color 0.3s, box-shadow 0.3s;
  position: relative;
}

/* bottom accent line */
body.template--product product-media-gallery::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blast-green), transparent);
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

body.template--product product-media-gallery:hover {
  border-color: var(--blast-green);
  box-shadow: 0 0 20px rgba(204,255,0,0.15);
}

/* Product page — top spacing so content feels centered */
body.template--product #MainContent {
  padding-top: 24px;
}
@media (max-width: 749px) {
  body.template--product #MainContent {
    padding-top: 16px;
  }
}

/* Collection page — force 3 columns max on desktop */
body.template--collection .product-grid {
  --product-grid-columns-desktop: repeat(3, 1fr) !important;
}
@media (max-width: 749px) {
  body.template--collection .product-grid {
    --mobile-columns: 2 !important;
  }
}

/* ============================================================
   PRODUCT PAGE — Horizon component skin
   ------------------------------------------------------------
   The PDP keeps Horizon's product-information section, because it owns
   variant switching, the media gallery, and the cart wiring. These rules
   restyle its rendered output to match the blast card/grid language.
   Selectors target Horizon's actual classes (variant-option, quantity-selector,
   product-form-buttons, product-inventory) — check they still exist after a
   Horizon upgrade.
   ============================================================ */

/* ── Recommendations grid reuses the armory ──────── */
.blast-armory--recommendations {
  padding-top: 60px;
  border-top: 1px solid #1a1a1a;
}
.blast-armory--recommendations .blast-armory__grid {
  grid-template-columns: repeat(var(--blast-grid-columns, 4), 1fr);
}
.blast-armory h2.blast-armory__label {
  font-family: var(--blast-font-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--blast-green);
  margin: 0 0 8px;
}

/* ── PDP layout: centre and align ────────────────── */
/*
 * Constrain the whole product block and centre it in the viewport, so the
 * media and details columns sit on a shared axis instead of spanning the full
 * window at wide sizes.
 */
body.template--product .product-information {
  /*
   * Theme setting page_width is "narrow", which squeezes the PDP harder than
   * this layout wants. Give the product block its own wider ceiling; other
   * templates keep the narrow page width.
   */
  max-width: 1440px;
  margin-inline: auto;
}

/*
 * Media column sizing.
 *
 * Horizon's own rule is:
 *   .product-information--media-left { grid-template-columns: 1fr min(50vw, var(--sidebar-width)); }
 * i.e. media takes the leftover space after a fixed-width details sidebar.
 * That left the product shot finishing well short of the buy buttons, so
 * weight the media column instead and let the row stretch.
 */
@media screen and (min-width: 750px) {
  body.template--product .product-information__grid.product-information--media-left {
    grid-template-columns: 1.5fr 1fr;
    align-items: stretch;
  }
  body.template--product .product-information__grid.product-information--media-right {
    grid-template-columns: 1fr 1.5fr;
    align-items: stretch;
  }

  /*
   * With a single image (media_columns: "one" and one shot per product), let
   * the gallery fill the row so its bottom edge lands level with the last buy
   * button, and contain-fit the shot inside it. :has() scopes this to the
   * single-image case — a multi-image stack must keep its natural height or
   * the images would each try to be full-height and overflow.
   */
  body.template--product .product-information__media:has(img:only-of-type),
  body.template--product .product-information__media:has(img:only-of-type) .media-gallery,
  body.template--product .product-information__media:has(img:only-of-type) product-media-gallery {
    height: 100%;
  }
  body.template--product .product-information__media:has(img:only-of-type) img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/* Single centred media column, matching media_columns: "one". */
body.template--product product-media-gallery,
body.template--product .media-gallery {
  margin-inline: auto;
}
body.template--product product-media-gallery img {
  margin-inline: auto;
}

/*
 * Centre the details column to match the rest of the site — the hero, armory
 * header, CTAs and footer are all centred, so a left-aligned details column
 * was the one element fighting that language.
 */
body.template--product .product-details,
body.template--product [class*="product-details"] {
  text-align: center;
  align-items: center;
}
body.template--product .product-details > * {
  width: 100%;
}
body.template--product .variant-picker,
body.template--product .variant-option,
body.template--product .product-form-buttons,
body.template--product .product-inventory__status {
  justify-content: center;
  text-align: center;
}
body.template--product .variant-option__inputs {
  justify-content: center;
}
body.template--product .quantity-selector-wrapper {
  justify-content: center;
}
/* Keep the buy controls from stretching edge-to-edge on wide screens. */
body.template--product .product-form-buttons {
  max-width: 420px;
  margin-inline: auto;
}

/*
 * Exception: running description copy stays left-aligned. Centred multi-line
 * body text is hard to read — ragged on both edges — so centre the container
 * and left-align the text inside it.
 */
body.template--product .rte {
  max-width: 52ch;
  margin-inline: auto;
  text-align: left;
}

@media (max-width: 900px) {
  body.template--product .product-form-buttons {
    max-width: none;
  }
}

/* ── Variant picker ──────────────────────────────── */
body.template--product .variant-option legend {
  font-family: var(--blast-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--blast-yellow) !important;
  margin-bottom: 10px;
}
body.template--product .variant-option__button-label {
  border-radius: 0 !important;
  font-family: var(--blast-font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
body.template--product .variant-option__button-label__text {
  font-family: var(--blast-font-mono) !important;
  letter-spacing: 0.1em !important;
}
/* Sold-out combinations read as depleted rather than merely dimmed. */
body.template--product input:disabled + .variant-option__button-label {
  color: #444 !important;
  border-color: #1f1f1f !important;
  text-decoration: line-through;
}

/* ── Quantity selector ───────────────────────────── */
body.template--product .quantity-selector {
  border-radius: 0 !important;
  border: 1px solid var(--blast-border) !important;
  background: transparent !important;
  font-family: var(--blast-font-mono) !important;
}
body.template--product .quantity-selector input {
  font-family: var(--blast-font-mono) !important;
  color: #fff !important;
  background: transparent !important;
}
body.template--product .quantity-minus,
body.template--product .quantity-plus {
  color: var(--blast-green) !important;
}

/* ── Buy buttons ─────────────────────────────────── */
body.template--product .product-form-buttons .button {
  border-radius: 0 !important;
  font-family: var(--blast-font-mono) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}
body.template--product .add-to-cart-text {
  font-family: var(--blast-font-mono) !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}
/* Match .blast-btn's hover glitch/glow on the primary CTA. */
body.template--product .product-form-buttons .button:hover:not([disabled]) {
  box-shadow: 0 0 20px rgba(204, 255, 0, 0.35);
}
body.template--product .product-form-buttons .button[disabled] {
  background: transparent !important;
  border-color: #1f1f1f !important;
  color: #555 !important;
  box-shadow: none !important;
}

/* ── Inventory status ────────────────────────────── */
body.template--product .product-inventory__status,
body.template--product .product-inventory__text {
  font-family: var(--blast-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}
body.template--product .product-inventory__icon-low ~ .product-inventory__text,
body.template--product .product-inventory__status--low .product-inventory__text {
  color: var(--blast-yellow) !important;
}

/* ── SKU ─────────────────────────────────────────── */
body.template--product [class*="sku"] {
  font-family: var(--blast-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #666 !important;
}

/* ── Description RTE ─────────────────────────────── */
body.template--product .rte,
body.template--product [class*="description"] {
  font-family: var(--blast-font-mono) !important;
  font-size: 12px !important;
  line-height: 1.8 !important;
  color: #999 !important;
}
body.template--product .rte a {
  color: var(--blast-green) !important;
}
body.template--product .rte strong {
  color: #fff !important;
}

/* ── Password Email Signup ────────────────────────── */
.blast-password-signup {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
.blast-password-signup__row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.blast-password-signup__input {
  flex: 1;
  background: transparent;
  border: 1px solid var(--blast-border);
  color: #fff;
  font-family: var(--blast-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.2s;
}
.blast-password-signup__input::placeholder {
  color: #555;
  letter-spacing: 0.15em;
}
.blast-password-signup__input:focus {
  border-color: var(--blast-green);
}
.blast-password-signup__success {
  font-family: var(--blast-font-mono);
  font-size: 11px;
  color: var(--blast-green);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 12px;
  text-align: center;
}
@media (max-width: 480px) {
  .blast-password-signup__row {
    flex-direction: column;
  }
}

/* ── Breadcrumb Nav ───────────────────────────────── */
.blast-product-nav {
  background: var(--blast-black);
  border-bottom: 1px solid var(--blast-border);
  padding: 12px 40px;
}
.blast-product-nav__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--blast-font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.blast-product-nav__link {
  color: var(--blast-green);
  text-decoration: none;
  transition: opacity 0.2s;
}
.blast-product-nav__link:hover {
  opacity: 0.7;
}
.blast-product-nav__sep {
  color: var(--blast-border);
}
.blast-product-nav__current {
  color: #aaa;
}
@media (max-width: 560px) {
  .blast-product-nav {
    padding: 10px 16px;
  }
}

/* ── Hero — Mobile ────────────────────────────────── */
@media (max-width: 480px) {
  .blast-hero {
    padding: 32px 16px 16px;
  }
  .blast-hero__countdown {
    gap: 4px;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: center;
  }
  .blast-hero__countdown-unit {
    padding: 8px 6px;
    min-width: 0;
    flex: 1;
  }
  .blast-hero__countdown-number {
    font-size: 22px;
  }
  .blast-hero__countdown-label {
    font-size: 8px;
    letter-spacing: 0.1em;
  }
  .blast-hero__countdown-sep {
    font-size: 18px;
    line-height: 1;
    align-self: center;
    flex-shrink: 0;
  }
}

/* ── Footer ───────────────────────────────────────── */
.blast-footer {
  background: var(--blast-black);
  border-top: 1px solid #1a1a1a;
  padding: 24px 40px;
}
.blast-footer__bottom {
  text-align: center;
  font-family: var(--blast-font-mono);
  font-size: 11px;
  color: #444;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
@media (max-width: 560px) {
  .blast-footer {
    padding: 20px 16px;
  }
}