/* Catalog, product, and transaction archetypes. Body classes come from the pack registry. */

/* Catalog */
body.catalog-indexed .shop-page .product-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
body.catalog-indexed .catalog-band { border-left: 2px solid var(--accent); padding-left: 1rem; }

body.catalog-mosaic .shop-page .product-grid {
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(140px, auto);
}
body.catalog-mosaic .shop-page .product-card:nth-child(7n + 1) { grid-column: span 2; grid-row: span 2; }
body.catalog-mosaic .shop-page .product-card:nth-child(5n + 3) { grid-column: span 2; }

body.catalog-cinema-chapters .shop-page { display: block; }
body.catalog-cinema-chapters .catalog-band {
  min-height: 80vh;
  display: grid;
  align-content: end;
  padding: 3rem 0;
}

body.catalog-industrial-index .shop-page .product-grid {
  grid-template-columns: 1fr;
  gap: 0;
}
body.catalog-industrial-index .shop-page .product-card {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding: 0.6rem 0;
}
body.catalog-industrial-index .shop-page .product-card .thumb { aspect-ratio: 1; }

body.catalog-service-tiles .shop-page .product-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.6rem;
}
body.catalog-service-tiles .product-card {
  border-radius: 1.4rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

body.catalog-collection-reel .shop-page .product-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding-bottom: 1.5rem;
}
body.catalog-collection-reel .shop-page .product-card {
  flex: 0 0 min(78vw, 320px);
  scroll-snap-align: start;
}

body.catalog-newspaper .shop-page {
  column-count: 2;
  column-gap: 2rem;
}
body.catalog-newspaper .catalog-band,
body.catalog-newspaper .product-grid { break-inside: avoid; }

body.catalog-dense-matrix .shop-page .product-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.55rem;
}
body.catalog-dense-matrix .product-card h3 { font-size: 0.95rem; }

body.catalog-narrative-grid .shop-page .product-grid {
  grid-template-columns: 1.4fr 1fr 1fr;
}

body.catalog-layered-cards .product-card {
  transform: rotate(var(--pack-tilt, 0deg));
  box-shadow: 0 18px 40px color-mix(in srgb, var(--text) 12%, transparent);
}

body.catalog-landscape-journal .shop-page .product-card {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 1.2rem;
  align-items: center;
}
body.catalog-landscape-journal .shop-page .product-grid { grid-template-columns: 1fr; }

body.catalog-pedestal-gallery .shop-page .product-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  justify-items: center;
}
body.catalog-pedestal-gallery .product-card {
  max-width: 320px;
  text-align: center;
}
body.catalog-pedestal-gallery .product-card .thumb {
  border-radius: 50% 50% 8px 8px / 40% 40% 8px 8px;
  overflow: hidden;
}

body.catalog-atlas-grid .shop-page .product-grid {
  grid-template-columns: repeat(8, 1fr);
  gap: 0.35rem;
}
body.catalog-atlas-grid .product-card { min-height: 8rem; }
body.catalog-atlas-grid .catalog-fallback,
body.catalog-atlas-grid .product-grid { overflow: auto; }

body.catalog-modular-market .shop-page .product-grid {
  grid-template-columns: repeat(12, 1fr);
}
body.catalog-modular-market .shop-page .product-card { grid-column: span 4; }
body.catalog-modular-market .shop-page .product-card:nth-child(3n + 1) { grid-column: span 6; }

body.catalog-masonry .shop-page .product-grid {
  columns: 3;
  display: block;
}
body.catalog-masonry .shop-page .product-card {
  display: inline-block;
  width: 100%;
  margin: 0 0 1rem;
  break-inside: avoid;
}

body.catalog-collage .shop-page .product-card {
  clip-path: polygon(4% 0, 100% 3%, 96% 100%, 0 97%);
}

body.catalog-stepped-index .catalog-band {
  margin-left: calc(var(--step, 0) * 1.5rem);
}
body.catalog-stepped-index .catalog-band:nth-child(2) { --step: 1; }
body.catalog-stepped-index .catalog-band:nth-child(3) { --step: 2; }
body.catalog-stepped-index .catalog-band:nth-child(4) { --step: 3; }

body.catalog-glass-asymmetric .shop-page {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 2rem;
}
body.catalog-glass-asymmetric .product-card {
  background: color-mix(in srgb, var(--header) 55%, transparent);
  backdrop-filter: blur(12px);
}

body.catalog-capsule-runway .shop-page .product-grid {
  display: flex;
  overflow-x: auto;
  gap: 0;
  scroll-snap-type: x mandatory;
}
body.catalog-capsule-runway .shop-page .product-card {
  flex: 0 0 70vw;
  scroll-snap-align: center;
}
body.catalog-capsule-runway .shop-page .product-card .thumb { aspect-ratio: 3 / 4; }

body.catalog-condition-board .shop-page .product-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
body.catalog-condition-board .product-card .meta { border-top: 3px solid var(--accent); }

body.catalog-magazine-grid .shop-page .product-card:first-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
}

body.catalog-panoramic-list .shop-page .product-grid { grid-template-columns: 1fr; }
body.catalog-panoramic-list .shop-page .product-card {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  min-height: 42vh;
}

body.catalog-technical-matrix .shop-page .product-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
}
body.catalog-technical-matrix .product-card { background: var(--bg); margin: 0; }

body.catalog-campaign-hub .shop-page .product-grid {
  grid-template-columns: 1.4fr 1fr;
}
body.catalog-campaign-hub .shop-page .product-card:first-child { grid-row: span 2; }

body.catalog-finder-compare .shop-page {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 1.5rem;
}
body.catalog-finder-compare .shop-chips { position: sticky; top: 5rem; }

body.catalog-map-list .shop-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

body.catalog-field-journal .shop-page .product-card {
  border: 0;
  box-shadow: 0 0 0 1px var(--line);
  background: color-mix(in srgb, var(--surface) 90%, var(--accent) 4%);
}

body.catalog-spatial-index .shop-page { max-width: 52rem; margin-inline: auto; }
body.catalog-spatial-index .product-grid { gap: 3rem; }

body.catalog-kinetic-grid .shop-page .product-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}
body.catalog-kinetic-grid .product-card .thumb { aspect-ratio: 1; }

body.catalog-concierge-panels .shop-page .product-card {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent);
}

@media (max-width: 860px) {
  body.catalog-mosaic .shop-page .product-grid,
  body.catalog-atlas-grid .shop-page .product-grid,
  body.catalog-modular-market .shop-page .product-grid,
  body.catalog-kinetic-grid .shop-page .product-grid,
  body.catalog-newspaper .shop-page,
  body.catalog-masonry .shop-page .product-grid,
  body.catalog-glass-asymmetric .shop-page,
  body.catalog-finder-compare .shop-page,
  body.catalog-map-list .shop-page,
  body.catalog-campaign-hub .shop-page .product-grid,
  body.catalog-narrative-grid .shop-page .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    column-count: 1;
  }
  body.catalog-mosaic .shop-page .product-card,
  body.catalog-modular-market .shop-page .product-card,
  body.catalog-industrial-index .shop-page .product-card,
  body.catalog-landscape-journal .shop-page .product-card,
  body.catalog-panoramic-list .shop-page .product-card,
  body.catalog-magazine-grid .shop-page .product-card:first-child,
  body.catalog-concierge-panels .shop-page .product-card {
    grid-column: auto;
    grid-row: auto;
    display: block;
  }
  body.catalog-collection-reel .shop-page .product-grid,
  body.catalog-capsule-runway .shop-page .product-grid {
    display: flex;
  }
}

/* Product */
body.product-material-led .product-page { grid-template-columns: 1.25fr 0.75fr; }
body.product-split-gallery .product-page { grid-template-columns: 1fr 1fr; }
body.product-cinema-hero .product-page {
  grid-template-columns: 1fr;
}
body.product-cinema-hero .gallery-frame img { min-height: 72vh; object-fit: cover; }
body.product-parts-exploded .product-page { grid-template-columns: 1fr 1fr; }
body.product-clean-split .product-page { grid-template-columns: 1fr 1fr; gap: 4rem; }
body.product-spectral-sheet .buy { padding: 1.5rem; background: color-mix(in srgb, var(--accent) 8%, transparent); }
body.product-editorial-spread .product-page { grid-template-columns: 0.9fr 1.1fr; }
body.product-comparison-sheet .specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
body.product-illustrated .gallery-frame { border-radius: 40% 12% 30% 18%; overflow: hidden; }
body.product-ornamental .buy { border: 1px solid var(--accent); padding: 1.4rem; }
body.product-ledger-detail .product-page { grid-template-columns: 0.8fr 1.2fr; }
body.product-sculptural .gallery-frame {
  background: radial-gradient(circle at 50% 80%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%);
  padding: 2rem;
}
body.product-morph-card .gallery-frame img { border-radius: var(--radius-lg, 22px); }
body.product-folk-workshop .buy { box-shadow: inset 0 0 0 2px var(--accent); padding: 1.2rem; }
body.product-tiled-story .gallery-frame { display: grid; }
body.product-tapestry-detail .product-page { gap: 3rem; }
body.product-altitude-sheet .eyebrow::before { content: "▲ "; color: var(--accent); }
body.product-glass-atelier .buy {
  backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--header) 70%, transparent);
  padding: 1.5rem;
}
body.product-runway-look .product-page { grid-template-columns: 1.5fr 0.5fr; }
body.product-lifecycle-board .specs { border-left: 3px solid var(--accent); padding-left: 1rem; }
body.product-fashion-spread .product-page { align-items: stretch; }
body.product-fjord-spread .gallery-frame img { object-position: center 30%; min-height: 60vh; }
body.product-vault-luxury .buy { border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); padding: 1.6rem; }
body.product-hud-drop .buy { font-variant-numeric: tabular-nums; }
body.product-guided-compare .product-page { grid-template-columns: 1fr 1fr; }
body.product-local-stock .buy { position: sticky; top: 5rem; }
body.product-expedition .gallery-frame { border: 8px solid color-mix(in srgb, var(--text) 80%, transparent); }
body.product-ma-panel .product-page { grid-template-columns: 1fr; max-width: 46rem; margin-inline: auto; }
body.product-holographic .gallery-frame {
  outline: 1px solid color-mix(in srgb, var(--accent) 60%, white);
  box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 25%, transparent);
}
body.product-prism-jewel .gallery-frame {
  background: conic-gradient(from 120deg, color-mix(in srgb, var(--accent) 30%, transparent), transparent, color-mix(in srgb, var(--header) 40%, transparent));
  padding: 1.2rem;
}

@media (max-width: 860px) {
  body.product-runway-look .product-page,
  body.product-material-led .product-page,
  body.product-editorial-spread .product-page {
    grid-template-columns: 1fr;
  }
}

/* Transaction: identity without distracting motion */
body.txn-elevation-stepper .step-nav li.on { box-shadow: 0 -6px 0 var(--accent) inset; }
body.txn-stained-glass-rail .step-nav li { background: color-mix(in srgb, var(--accent) 10%, transparent); }
body.txn-tide-line .step-nav { border-bottom: 2px solid var(--accent); }
body.txn-technical-ledger .checkout,
body.txn-technical-ledger .cart-table { font-family: ui-monospace, monospace; font-size: 0.95rem; }
body.txn-pill-stepper .step-nav li {
  border: 0;
  border-radius: 999px;
  text-align: center;
  background: color-mix(in srgb, var(--header) 80%, transparent);
}
body.txn-pill-stepper .step-nav li.on { background: var(--accent); color: var(--bg); }
body.txn-aurora-line .step-nav li.on { border-image: linear-gradient(90deg, transparent, var(--accent), transparent) 1; }
body.txn-receipt-style .txn-shell { max-width: 40rem; }
body.txn-receipt-style .cart-table, body.txn-receipt-style .checkout { background: var(--surface); padding: 1rem; }
body.txn-conveyor .step-nav { gap: 0; }
body.txn-circular-marker .step-nav li.on::before { content: "○ "; }
body.txn-ribbon-stepper .step-nav li.on { background: var(--accent); color: var(--bg); }
body.txn-stamped-receipt .txn-shell { box-shadow: inset 0 0 0 2px var(--accent); padding: 1rem; }
body.txn-ticket-style .txn-shell { border: 1px dashed var(--line); padding: 1.2rem; }
body.txn-map-key .step-nav { grid-template-columns: auto 1fr auto; }
body.txn-seal-confirm .step-nav li.on { text-transform: uppercase; letter-spacing: 0.12em; }
body.txn-tiled-progress .step-nav li { border: 1px solid var(--line); }
body.txn-ribbon-status .pay-grid { border-left: 8px solid var(--accent); padding-left: 1rem; }
body.txn-compact-vertical .checkout { max-width: 28rem; }
body.txn-translucent-receipt .txn-shell { background: color-mix(in srgb, var(--header) 55%, transparent); backdrop-filter: blur(10px); }
body.txn-sunline .step-nav li.on { border-bottom-width: 4px; }
body.txn-spare-receipt .txn-shell { max-width: 36rem; }
body.txn-broadsheet .checkout { column-count: 1; }
body.txn-status-timeline .step-nav { grid-template-columns: 1fr; }
body.txn-vault-summary .pay-grid, body.txn-vault-summary .checkout { border: 1px solid var(--accent); padding: 1rem; }
body.txn-terminal .txn-shell { font-family: ui-monospace, monospace; background: color-mix(in srgb, var(--text) 6%, var(--bg)); }
body.txn-path-stepper .step-nav li { position: relative; }
body.txn-route-map .step-nav { gap: 0; }
body.txn-passport .txn-shell { border: 8px solid color-mix(in srgb, var(--accent) 40%, var(--text)); padding: 1rem; }
body.txn-ink-seal .step-nav li.on { font-family: var(--font-heading); }
body.txn-high-contrast .pay-grid,
body.txn-high-contrast .checkout {
  background: var(--text);
  color: var(--bg);
  padding: 1.2rem;
}
body.txn-high-contrast a { color: inherit; }
body.txn-prism-vault .txn-shell {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent);
}

@media (prefers-reduced-motion: reduce) {
  body.catalog-collection-reel .shop-page .product-grid,
  body.catalog-capsule-runway .shop-page .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    overflow: visible;
  }
  body.catalog-collection-reel .shop-page .product-card,
  body.catalog-capsule-runway .shop-page .product-card {
    flex: none;
  }
}