/* ============================================================
   BLAST UNIT — reference site base layer
   ------------------------------------------------------------
   assets/blast.css is copied verbatim from the Shopify theme and is the single
   source of truth for the brand look. On the real store it sits on top of
   Horizon's base.css, which supplies resets, colour-scheme variables and the
   product-page component styles.

   This file stands in for that layer so the site runs standalone. It uses
   Horizon's real class names on purpose, so blast.css's selectors match here
   exactly as they do on the store.

   Load order matters: site.css FIRST, blast.css SECOND — mirroring
   layout/theme.liquid, where Horizon's stylesheets precede blast.css. That way
   blast.css wins ties, same as production.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #050505;
  color: #fff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid #ccff00;
  outline-offset: 2px;
}

/* Horizon variables blast.css expects to override. Values here are the
   fallbacks used outside product/collection templates. */
:root {
  --sidebar-width: 420px;
  --color-foreground: #fff;
  --color-background: #050505;
  --color-primary-button-background: #ccff00;
  --color-primary-button-text: #000;
  --color-primary-button-border: #ccff00;
  --color-input-border: #333;
  --color-variant-border: #333;
  --color-variant-text: #fff;
  --color-selected-variant-background: transparent;
  --color-selected-variant-border: #ccff00;
  --color-selected-variant-text: #ccff00;
}

/* ── Product page layout (Horizon's real structure) ──────── */
.product-information {
  --gap: 48px;
  padding: 24px 40px 60px;
}

.product-information__grid {
  display: grid;
  gap: var(--gap);
}

@media screen and (min-width: 750px) {
  /* Horizon's own default. blast.css overrides this at higher specificity. */
  .product-information__grid.product-information--media-left {
    grid-template-columns: 1fr min(50vw, var(--sidebar-width));
  }
}

.product-information__media {
  order: 0;
  width: 0;
  min-width: 100%;
}

product-media-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

product-media-gallery img {
  display: block;
  width: 100%;
  height: auto;
}

.product-details {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 24px 0;
}

.product-details > * {
  margin: 0;
}

@media screen and (max-width: 749px) {
  .product-information {
    padding: 16px 20px 40px;
  }
}

/* ── Product page components ─────────────────────────────── */
.product-details h1 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  margin: 0;
}

.price {
  font-size: 1rem;
}

hr {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--color-input-border);
  margin: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

.variant-option__inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.variant-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.variant-option__button-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 10px 16px;
  cursor: pointer;
  border: 1px solid var(--color-variant-border);
  color: var(--color-variant-text);
}

.variant-option input:checked + .variant-option__button-label {
  background: var(--color-selected-variant-background);
  border-color: var(--color-selected-variant-border);
  color: var(--color-selected-variant-text);
}

.variant-option input:disabled + .variant-option__button-label {
  cursor: not-allowed;
}

.quantity-selector-wrapper {
  display: flex;
}

.quantity-selector {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-input-border);
}

.quantity-selector button {
  padding: 12px 16px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

.quantity-selector input {
  width: 52px;
  padding: 12px 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  text-align: center;
  color: #fff;
}

/* Strip the number spinners — they fight the mono aesthetic. */
.quantity-selector input::-webkit-inner-spin-button,
.quantity-selector input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.product-form-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-form-buttons .button {
  display: block;
  width: 100%;
  padding: 16px 24px;
  border: 1px solid var(--color-primary-button-border);
  background: var(--color-primary-button-background);
  color: var(--color-primary-button-text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.product-form-buttons .button[disabled] {
  cursor: not-allowed;
}

.product-inventory__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.product-inventory__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffb800;
}

.rte p {
  margin: 0 0 12px;
}

.rte p:last-child {
  margin-bottom: 0;
}

/* ── Reference-site note ─────────────────────────────────── */
/*
 * A quiet second footer line marking this as a design reference, so nobody
 * mistakes the placeholder pricing for real product data. Deliberately not a
 * top banner — this site exists to be shown to people, and a bar across the
 * top of the landing hero would undercut that.
 */
.blast-footer__note {
  margin-top: 8px;
  color: #2f2f2f;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}