/* IGW Store 0.1.2 — companion stylesheet for igwstore-0.1.2.js.
   Copyright © 2026 Interstellar Gateway. All rights reserved.

   The storefront on /store, in the site's own grammar (docs/design/SPEC.md):
   ground #050505, card fill #0b0d0f, edges rgba(255,255,255,.14) resting and
   .36 on hover with fill #12161a over 150ms and no lift; 4 px on framed
   images, 2 px on chips and panels; micro labels 11 / 600 / .08em uppercase;
   tabular numerals on every price. Clash Display only at 38 and above (28 on
   phones), Plus Jakarta Sans for everything else. No accent colour anywhere.

   Prints sit on the black ground at their true aspect: the runtime writes the
   image's pixel size from the shop's feed into width/height so the frame is
   the right shape before a byte of the picture arrives, and the mockup is
   never the first image the reader meets where a plain print exists. The bag
   (stage 2) is a side panel; stage 1 hands the reader to the shop's checkout
   with the chosen variant already in the cart.

   Hosted as a versioned asset and pinned with SHA-384 from the /store page
   head; source of truth runtimes/igwstore-0.1.2.css.

   0.1.1 — measured on staging at 1440 on 2026-09-06: the lead grid resolved
   to its two columns (716 + 511 px) but the frame drew 1,152 px wide and
   pushed the copy under it. A grid item's min-width is auto, so a flex frame
   holding an <img> with its intrinsic width attributes could not shrink below
   that width. Every direct child of the three grids now has min-width: 0 and
   the frames are told their width outright; the images keep max-width: 100%.
   Nothing else changed.

   0.1.2 — measured on staging at 1440 after 0.1.1: the frame sat in its
   column but stood 864 px tall around a 3:2 image. 0.1.1's scoping raised the
   base rule (with its phone-only min-height: 60vw) above the unscoped desktop
   rule inside the media query, so the phone minimum applied at every width.
   The desktop rule is scoped the same way now, the phone minimum lives only
   under max-width: 767px, and the runtime writes each lead image's own aspect
   ratio onto the frame so a print sits at its true shape with no bars. */

[data-igw-store-feed] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.igwst { color: #f5f5f5; font-variant-numeric: tabular-nums; }
.igwst a { color: inherit; }
.igwst img { display: block; max-width: 100%; min-width: 0; }
.igwst .igwst-lead > *, .igwst .igwst-product > *, .igwst .igwst-card > *, .igwst .igwst-product > div > * { min-width: 0; max-width: 100%; }
.igwst .igwst-lead-frame, .igwst .igwst-stage, .igwst .igwst-card-frame { width: 100%; }
.igwst button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.igwst :focus-visible { outline: 2px solid #f5f5f5; outline-offset: 3px; }

.igwst-micro {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(245, 245, 245, .62);
}
.igwst-price { font-variant-numeric: tabular-nums; font-weight: 500; }
.igwst-state { font-size: 12px; line-height: 1.45; color: rgba(245, 245, 245, .62); }
.igwst-state[data-igw-store-stale="true"] { color: rgba(255, 200, 120, .9); }

/* ---------------------------------------------------------------- lead */
.igwst-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: end;
  margin-top: 8px;
}
@media (min-width: 768px) {
  .igwst-lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; }
}
.igwst .igwst-lead-frame {
  position: relative;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
}
@media (max-width: 767px) { .igwst .igwst-lead-frame { min-height: 60vw; } }
.igwst .igwst-lead-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.igwst-lead-copy { display: grid; gap: 14px; align-content: end; }
.igwst-lead-title {
  font-family: Clashdisplay Variable, sans-serif;
  font-weight: 500;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0;
}
@media (max-width: 767px) { .igwst-lead-title { font-size: 28px; } }
.igwst-lead-price { font-size: 21px; line-height: 1.4; }
.igwst-lead-text { font-size: 16px; line-height: 1.55; color: rgba(245, 245, 245, .78); margin: 0; }
.igwst-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

.igwst .igwst-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  background: #0b0d0f;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.igwst .igwst-btn:hover { background: #12161a; border-color: rgba(255, 255, 255, .6); }
.igwst-btn-primary { background: #f5f5f5; color: #050505; border-color: #f5f5f5; }
.igwst-btn-primary:hover { background: #ffffff; border-color: #ffffff; }
.igwst .igwst-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ------------------------------------------------------------ chapters */
.igwst-chapters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 44px 0 22px;
  padding: 0;
  list-style: none;
}
.igwst .igwst-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 2px;
  background: #0b0d0f;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.igwst .igwst-chip:hover { background: #12161a; border-color: rgba(255, 255, 255, .36); }
.igwst .igwst-chip[aria-current="true"] { background: #f5f5f5; color: #050505; border-color: #f5f5f5; }
.igwst .igwst-chip small { font-size: 11px; font-weight: 500; letter-spacing: 0; opacity: .7; }

/* ---------------------------------------------------------------- grid */
.igwst-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (max-width: 991px) { .igwst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .igwst-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.igwst .igwst-card {
  display: grid;
  gap: 12px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 4px;
  padding: 14px;
  background: #0b0d0f;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.igwst .igwst-card:hover { background: #12161a; border-color: rgba(255, 255, 255, .36); }
.igwst-card-frame {
  background: #050505;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.igwst-card-frame img { width: 100%; height: 100%; object-fit: contain; }
.igwst-card-title { font-size: 16px; font-weight: 500; line-height: 1.35; margin: 0; }
.igwst-card-meta { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.igwst-card-meta .igwst-price { font-size: 12px; }
.igwst-empty { font-size: 16px; line-height: 1.55; color: rgba(245, 245, 245, .78); padding: 32px 0; }

/* ------------------------------------------------------------- product */
.igwst .igwst-back { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin-bottom: 22px; }
.igwst-product {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}
@media (min-width: 768px) { .igwst-product { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; } }
.igwst-stage {
  background: #050505;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
}
@media (min-width: 768px) { .igwst-stage { aspect-ratio: 1 / 1; } }
.igwst-stage img { width: 100%; height: 100%; object-fit: contain; }
.igwst-thumbs { display: flex; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
.igwst .igwst-thumb {
  width: 72px;
  height: 72px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 2px;
  background: #0b0d0f;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 150ms ease-out;
}
.igwst .igwst-thumb:hover { border-color: rgba(255, 255, 255, .36); }
.igwst .igwst-thumb[aria-current="true"] { border-color: #f5f5f5; }
.igwst .igwst-thumb img { width: 100%; height: 100%; object-fit: cover; }
.igwst-info { display: grid; gap: 16px; align-content: start; }
.igwst-title {
  font-family: Clashdisplay Variable, sans-serif;
  font-weight: 500;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0;
}
@media (max-width: 767px) { .igwst-title { font-size: 28px; } }
.igwst-product-price { font-size: 28px; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }
.igwst-desc { display: grid; gap: 10px; }
.igwst-desc p { font-size: 16px; line-height: 1.55; color: rgba(245, 245, 245, .78); margin: 0; }
.igwst-option { display: grid; gap: 10px; }
.igwst-option-values { display: flex; flex-wrap: wrap; gap: 8px; }
.igwst-avail { font-size: 12px; line-height: 1.45; color: rgba(245, 245, 245, .62); }
.igwst-panel {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 2px;
  background: #0b0d0f;
  padding: 16px;
  display: grid;
  gap: 12px;
}
.igwst-fine { font-size: 12px; line-height: 1.45; color: rgba(245, 245, 245, .62); margin: 0; }
.igwst-fine a { text-decoration: underline; text-decoration-color: rgba(245, 245, 245, .4); text-underline-offset: 3px; }

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