/* ============================================================
   MONOSYSM ECOSYSTEM — SCREEN LAYOUTS
   Top bar · Hero · Collection · Product Detail
   Desktop: one viewport per screen, no page scroll.
   ============================================================ */

/* ---- Top bar (shared across screens) ---- */
.topbar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: 18px var(--gutter);
}
.topbar .brand-id { display: flex; align-items: center; gap: 12px; }
.topbar .brand-id .sub { font-size: var(--t-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-soft); }
.topbar .nav { display: flex; align-items: center; gap: var(--sp-5); }
.topbar .nav .icobtn { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; display: inline-flex; align-items: center; gap: 7px; }
.cart-count { min-width: 18px; height: 18px; padding: 0 4px; display: inline-grid; place-items: center; background: var(--fg); color: var(--bg); font-size: var(--t-2xs); font-weight: 700; }

/* ============================================================
   HERO
   ============================================================ */
.hero-main { position: relative; flex: 1 1 auto; min-height: 0; }

/* MONOSYSM hero — large campaign render on the right, statement on the left.
   The stage is a big landscape region; any asset (ascii-anim OR a large
   static image e.g. 1920×1080) is contain-fit into it, so it reads large. */
[data-brand="monosysm"] .hero-main { display: block; padding: 0 var(--gutter); }
.hero-stage {
  position: absolute; top: 50%; right: 1%; transform: translateY(-50%);
  width: min(54vw, 1000px); height: min(74vh, 800px);
}
.hero-statement { position: absolute; left: var(--gutter); top: 10%; max-width: 42ch; z-index: 1; }
.hero-statement .mega { max-width: 12ch; }
.hero-boot { position: absolute; left: var(--gutter); bottom: 6%; font-size: var(--t-xs); color: var(--fg-soft); letter-spacing: 0.08em; }
.hero-boot .blink::after { content: "_"; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-cta { position: absolute; right: var(--gutter); bottom: 6%; }

/* BASIC_SYSTEM hero — text driven, no big render */
[data-brand="basys"] .hero-main {
  display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: var(--sp-7);
  padding: 0 var(--gutter);
}
[data-brand="basys"] .hero-statement { position: static; max-width: none; }
[data-brand="basys"] .hero-boot { position: static; margin-top: var(--sp-6); }
[data-brand="basys"] .hero-stage { display: none; }
.hero-side { justify-self: end; width: 100%; max-width: 360px; }
.hero-sysblock { font-size: var(--t-xs); color: var(--fg-soft); line-height: 2; letter-spacing: 0.06em; }
.hero-sysblock b { color: var(--fg); font-weight: 700; }
.hero-taglines { margin-top: var(--sp-6); font-size: var(--t-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-soft); }

/* ============================================================
   COLLECTION
   ============================================================ */
.collection { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.collection-head { flex: none; padding: 0 var(--gutter) var(--sp-4); }
.collection-title { display: flex; align-items: baseline; gap: var(--sp-4); }

/* MONOSYSM — few large release cards, fits one viewport */
.release-grid {
  flex: 1 1 auto; min-height: 0; display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; padding: 0 var(--gutter) var(--sp-4);
}
.release-card { display: flex; flex-direction: column; padding: var(--sp-4); cursor: pointer; }
.release-card .rc-head { display: flex; justify-content: space-between; font-size: var(--t-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-soft); }
.release-card .rc-name { font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg); margin-top: 4px; }
.release-card .rc-stage { flex: 1 1 auto; min-height: 0; margin: var(--sp-4) 0; }
.release-card .rc-foot { display: flex; justify-content: space-between; align-items: center; }

/* BASIC_SYSTEM — inventory grid (scroll allowed here) */

.catalog-scroll { padding: 0 var(--gutter) var(--sp-6); }
.sku-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: var(--hair) solid var(--line); }
.sku-card { background: var(--bg); padding: var(--sp-3); cursor: pointer; display: flex; flex-direction: column; gap: var(--sp-2); }
.sku-card .sku-stage { aspect-ratio: 4 / 5; }
.sku-card .sku-code { font-size: var(--t-2xs); letter-spacing: var(--tracking-label); color: var(--fg-soft); }
.sku-card .sku-name { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3; }
.sku-card .sku-meta { display: flex; justify-content: space-between; font-size: var(--t-2xs); color: var(--fg-soft); letter-spacing: 0.06em; }
.sku-card .sku-price { color: var(--fg); font-weight: 700; }
.sku-swatches { display: flex; gap: 4px; }
.sku-swatch { width: 10px; height: 10px; background: var(--swatch, #000); border: var(--hair) solid var(--line-strong); }

.catalog-foot { flex: none; display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) calc(var(--gutter) + var(--scrollbar-w)) var(--sp-3) var(--gutter); border-top: var(--hair) solid var(--line); font-size: var(--t-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-soft); }

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.detail { flex: 1 1 auto; display: grid; grid-template-columns: 1fr minmax(320px, 34%); min-height: 0; }
/* Featured-image layout: the render fills the whole left frame (inset by the
   gutter), and the thumbnail strip floats OVER it at the bottom-left, aligned
   to the same gutter padding as the image. */
.detail-visual { position: relative; min-height: 0; padding: var(--gutter); }
.detail-stage { position: absolute; inset: var(--gutter); min-height: 0; }
.detail-thumbs {
  position: absolute; left: var(--gutter); bottom: var(--gutter); z-index: 1;
  max-width: calc(100% - var(--gutter) * 2);
  display: flex; justify-content: flex-start; gap: var(--sp-2); height: 84px;
  flex: none; overflow-x: auto; scrollbar-width: none;
}
.detail-thumbs::-webkit-scrollbar { display: none; }
.detail-thumbs .thumb { position: relative; width: 84px; height: 84px; flex: none; border: var(--hair) solid var(--line-strong); background: var(--bg); cursor: pointer; overflow: hidden; }
.detail-thumbs .thumb.is-active { outline: 2px solid var(--accent); outline-offset: -2px; }
/* thumbnails are uniform 1:1 boxes; contain (not cover) so the whole garment
   stays visible in each thumb instead of being cropped at the edges */
.detail-thumbs .thumb img { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain; }

.detail-info { border-left: var(--hair) solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.detail-info-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--gutter); }
.detail-info .di-close { align-self: flex-end; }
.detail-info .di-id { font-size: var(--t-2xs); letter-spacing: var(--tracking-label); color: var(--fg-soft); margin-top: var(--sp-3); }
.detail-info .di-name { font-family: var(--font-display); font-weight: 700; font-size: var(--t-xl); line-height: 1.05; margin: 6px 0 4px; text-transform: uppercase; }
.detail-info .di-price { font-size: var(--t-lg); font-weight: 700; margin-bottom: var(--sp-4); }
.detail-info .di-desc { font-size: var(--t-xs); color: var(--fg-soft); line-height: 1.7; margin: var(--sp-4) 0; }
.detail-info .di-block-label { font-size: var(--t-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-soft); margin: var(--sp-4) 0 var(--sp-3); }
.detail-actions { flex: none; padding: var(--gutter); border-top: var(--hair) solid var(--line); display: flex; flex-direction: column; gap: var(--sp-3); }
/* ADD TO ARCHIVE label pinned left, [+] pinned right */
.detail-actions .di-archive { width: 100%; justify-content: space-between; }

/* Remaining-units readout, split out from the size buttons */
.di-stock { display: flex; align-items: baseline; justify-content: space-between; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: var(--hair) solid var(--line); }
.di-stock .di-stock-label { font-size: var(--t-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-soft); }
.di-stock .di-stock-val { font-size: var(--t-sm); font-weight: 700; letter-spacing: 0.06em; color: var(--fg); }
.di-stock.is-sold .di-stock-val { color: var(--fg-soft); text-decoration: line-through; }

/* coming-soon redaction */
.redacted { position: relative; }
.redacted::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, var(--line) 0 6px, transparent 6px 12px); opacity: 0.5; }