/* Batch 04 · shells / grids / space / cards / cart (chrome-* body classes) */

body.atelier:is(
  .theme-t31, .theme-t32, .theme-t33, .theme-t34, .theme-t35,
  .theme-t36, .theme-t37, .theme-t38, .theme-t39, .theme-t40,
  .theme-t41, .theme-t42, .theme-t43, .theme-t44, .theme-t45,
  .theme-t46, .theme-t47, .theme-t48, .theme-t49, .theme-t50
) {
  --pad-card: var(--pad-card, 1rem);
  --gap-grid: var(--gap-grid, 1rem);
}

.b04-stage { box-sizing: border-box; width: 100%; max-width: 100%; }

/* Shells, every theme stage locked to 90vw */
body.chrome-shell-retail-journey .b04-stage { padding-inline: clamp(0.75rem, 3vw, 2.5rem); }
body.chrome-shell-boutique-air .b04-stage { width: 90vw; max-width: 90vw; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 4rem); }
body.chrome-shell-market-dense .b04-stage { width: 90vw; max-width: 90vw; margin-inline: auto; }
body.chrome-shell-mag-story .an-section { margin: 0; }
body.chrome-shell-need-map .b04-stage { background: color-mix(in srgb, var(--bg) 94%, var(--moss) 6%); }
body.chrome-shell-mono-lux .b04-stage { background: var(--bg); }
body.chrome-shell-launch-flow .b04-stage { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, #fff), var(--bg)); }
body.chrome-shell-museum-cat .an-section { border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
body.chrome-shell-scenario .b04-stage { background: color-mix(in srgb, var(--bg) 92%, #fff); }
body.chrome-shell-layered-canvas .b04-stage { overflow-x: clip; }
body.chrome-shell-funnel .b04-stage { width: 90vw; max-width: 90vw; margin-inline: auto; }
body.chrome-shell-ugc-mix .b04-stage { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 86%, #fff), var(--bg)); }
body.chrome-shell-edu-path .an-section { border-bottom: 1px solid var(--line); }
body.chrome-shell-photo-dom .an-section { margin: 0; padding-inline: 0; }
body.chrome-shell-catalog-eff .b04-stage { width: 90vw; max-width: 90vw; margin-inline: auto; }
body.chrome-shell-lux-stage .b04-stage { background: color-mix(in srgb, var(--bg) 96%, var(--moss) 4%); }
body.chrome-shell-discover .b04-stage { overflow-x: clip; }
body.chrome-shell-bundle-lead .b04-stage { width: 90vw; max-width: 90vw; margin-inline: auto; }
body.chrome-shell-loyalty .b04-stage { background: color-mix(in srgb, var(--bg) 93%, var(--moss) 7%); }
body.chrome-shell-next-hybrid .b04-stage { width: 90vw; max-width: 90vw; margin-inline: auto; }

/* Grids */
body.chrome-grid-stage-retail .an-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); }
body.chrome-grid-sparse-curate .an-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
body.chrome-grid-dense-market .an-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; }
body.chrome-grid-chapter-mix .an-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--gap-grid); align-items: start; }
body.chrome-grid-cat-blocks .an-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
body.chrome-grid-precise-3 .an-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
body.chrome-grid-campaign-2 .an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-grid); }
body.chrome-grid-archive-scan .an-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
body.chrome-grid-life-mosaic .an-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; gap: var(--gap-grid); }
body.chrome-grid-spatial-exp .an-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); }
body.chrome-grid-convert-dense .an-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }
body.chrome-grid-ugc-path .an-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); }
body.chrome-grid-edu-stack .an-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
body.chrome-grid-bleed-visual .an-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; }
body.chrome-grid-catalog-dense .an-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; }
body.chrome-grid-stage-lux .an-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); }
body.chrome-grid-discover-mix .an-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); }
body.chrome-grid-set-blocks .an-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
body.chrome-grid-retain-rails .an-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); }
body.chrome-grid-hybrid-exp .an-grid { display: grid; grid-template-columns: 1.15fr 1fr 1.15fr; gap: var(--gap-grid); }

/* Space rhythm */
body.chrome-space-retail-prem .an-section { padding-block: 1.15rem; }
body.chrome-space-boutique .an-section { padding-block: 1.35rem; }
body.chrome-space-urban .an-section { padding-block: 1.15rem; }
body.chrome-space-magazine-long .an-section { padding-block: 1.1rem; }
body.chrome-space-taxonomy .an-section { padding-block: 1.15rem; }
body.chrome-space-mono-air .an-section { padding-block: 1.25rem; }
body.chrome-space-launch-space .an-section { padding-block: 1.15rem; }
body.chrome-space-museum .an-section { padding-block: 1.15rem; }
body.chrome-space-lifestyle-map .an-section { padding-block: 1.15rem; }
body.chrome-space-experiment .an-section { padding-block: 1.15rem; }
body.chrome-space-cro .an-section { padding-block: 1.15rem; }
body.chrome-space-community .an-section { padding-block: 1.15rem; }
body.chrome-space-educate .an-section { padding-block: 1.15rem; }
body.chrome-space-photography .an-section { padding-block: 1.15rem; }
body.chrome-space-efficiency .an-section { padding-block: 1.15rem; }
body.chrome-space-showroom-lux .an-section { padding-block: 1.15rem; }
body.chrome-space-explore .an-section { padding-block: 1.15rem; }
body.chrome-space-aov .an-section { padding-block: 1.15rem; }
body.chrome-space-membership .an-section { padding-block: 1.15rem; }
body.chrome-space-nextgen .an-section { padding-block: 1.15rem; }

/* Product cards */
body.chrome-card-display-stage .an-product { border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
body.chrome-card-display-stage .an-product__media { aspect-ratio: 4 / 5; }
body.chrome-card-display-stage .b04-card-stage { margin: 0.35rem 0 0; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--moss); }

body.chrome-card-select-card .an-product { border: 0; background: transparent; box-shadow: none; padding: 0; }
body.chrome-card-select-card .an-product__media { aspect-ratio: 3 / 4; }
body.chrome-card-select-card .an-product__meta { padding: var(--pad-card) 0; }

body.chrome-card-info-rich .an-product { border: 1px solid var(--ink); border-radius: 4px; }
body.chrome-card-info-rich .b04-card-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; }
body.chrome-card-info-rich .b04-card-meta span { padding: 0.15rem 0.4rem; border: 1px solid var(--line); }

body.chrome-card-in-story .an-product { border: 0; background: transparent; }
body.chrome-card-in-story .an-product__meta { padding: var(--pad-card); background: color-mix(in srgb, var(--bg) 82%, transparent); }

body.chrome-card-cat-entry .an-product { border: 2px solid var(--ink); border-radius: 0; }
body.chrome-card-cat-entry .b04-card-need { margin: 0 0 0.25rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--moss); }

body.chrome-card-image-min .an-product { border: 0; background: transparent; }
body.chrome-card-image-min .an-product__media { aspect-ratio: 3 / 4; }
body.chrome-card-image-min .an-product__meta { padding: 0.85rem 0 0; border-top: 1px solid var(--ink); margin-top: 0.65rem; }

body.chrome-card-drop-card .an-product { border: 2px solid var(--ink); overflow: hidden; }
body.chrome-card-drop-card .b04-card-drop { margin: 0.35rem 0 0; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sale); }

body.chrome-card-meta-card .an-product { border: 1px solid color-mix(in srgb, var(--moss) 40%, var(--ink)); border-radius: 0; }
body.chrome-card-meta-card .b04-card-index { margin: 0 0 0.25rem; font-family: var(--display); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }

body.chrome-card-life-card .an-product { border: 0; box-shadow: none; border-radius: 0; overflow: hidden; background: transparent; }
body.chrome-card-life-card .b04-card-scene { margin: 0 0 0.25rem; font-weight: 800; font-size: 0.78rem; color: var(--moss); }

body.chrome-card-compose-card .an-product { border: 0; border-radius: 0; overflow: hidden; box-shadow: none; background: transparent; }
body.chrome-card-compose-card .b04-card-layer { margin: 0.35rem 0 0; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--moss); }

body.chrome-card-convert-card .an-product { border: 2px solid var(--ink); border-radius: 4px; }
body.chrome-card-convert-card .b04-card-offer { margin: 0.35rem 0 0; font-size: 0.72rem; font-weight: 900; color: var(--sale); }

body.chrome-card-proof-card .an-product { border-radius: 0; border: 0; box-shadow: none; background: transparent; }
body.chrome-card-proof-card .b04-card-proof { margin: 0 0 0.25rem; font-weight: 800; color: var(--moss); font-size: 0.78rem; }

body.chrome-card-teach-card .an-product { border: 1.5px solid var(--ink); border-radius: var(--radius); }
body.chrome-card-teach-card .b04-card-lesson { margin: 0 0 0.25rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--moss); }

body.chrome-card-photo-first .an-product { border: 0; background: transparent; }
body.chrome-card-photo-first .an-product__media { aspect-ratio: 4 / 5; }
body.chrome-card-photo-first .an-product__meta { padding: 0.65rem 0 0; }

body.chrome-card-func-card .an-product { border: 1px solid var(--line); border-radius: 2px; }
body.chrome-card-func-card .b04-card-sku { margin: 0; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

body.chrome-card-staged-card .an-product { border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
body.chrome-card-staged-card .an-product__media { aspect-ratio: 4 / 5; }
body.chrome-card-staged-card .b04-card-stage { margin: 0.35rem 0 0; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss); }

body.chrome-card-discover-card .an-product { border: 1px solid var(--line); border-radius: var(--radius); }
body.chrome-card-discover-card .b04-card-rail { margin: 0 0 0.25rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--moss); }

body.chrome-card-set-card .an-product { border: 2px solid var(--ink); border-radius: var(--radius); }
body.chrome-card-set-card .b04-card-set { margin: 0.35rem 0 0; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }

body.chrome-card-reorder-card .an-product { border: 1.5px solid var(--moss); border-radius: var(--radius); }
body.chrome-card-reorder-card .b04-card-reorder { margin: 0 0 0.25rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--moss); }

body.chrome-card-smart-card .an-product { border: 1.5px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
body.chrome-card-smart-card .b04-card-smart { margin: 0.35rem 0 0; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--moss); }

/* Cart panels */
.b04-cart--boutique-page,
.b04-cart--lux-page,
.b04-cart--convert-cart,
.b04-cart--catalog-cart,
.b04-cart--set-cart,
.b04-cart--page { width: 90vw; max-width: 90vw; margin: 0 auto; padding: 1.5rem var(--gutter); }

.b04-cart--flagship-bag,
.b04-cart--quick-market,
.b04-cart--story-drawer,
.b04-cart--cat-cart,
.b04-cart--drop-bag,
.b04-cart--index-bag,
.b04-cart--context-bag,
.b04-cart--compose-bag,
.b04-cart--proof-bag,
.b04-cart--confident-bag,
.b04-cart--visual-bag,
.b04-cart--show-lux-bag,
.b04-cart--keep-exploring,
.b04-cart--reorder-bag,
.b04-cart--next-bag { position: relative; min-height: 70vh; }

.b04-cart__backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 70; }
.b04-cart__panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(26rem, 94vw); z-index: 71;
  background: var(--bg); color: var(--ink); border-left: 2px solid var(--ink);
  display: flex; flex-direction: column; padding: 1.25rem; overflow: auto;
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.25);
}
.b04-cart__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.b04-cart__head h1 { margin: 0; font-size: 1.35rem; }
.b04-cart__head a { font-weight: 750; color: var(--moss); }
body.chrome-cart-quick-market .b04-cart__panel { width: min(22rem, 92vw); }
body.chrome-cart-compose-bag .b04-cart__panel { width: min(30rem, 96vw); }
body.chrome-cart-show-lux-bag .b04-cart__panel { border-left-width: 3px; }

/* Solid CTAs */
body.atelier:is(
  .theme-t31, .theme-t32, .theme-t33, .theme-t34, .theme-t35,
  .theme-t36, .theme-t37, .theme-t38, .theme-t39, .theme-t40,
  .theme-t41, .theme-t42, .theme-t43, .theme-t44, .theme-t45,
  .theme-t46, .theme-t47, .theme-t48, .theme-t49, .theme-t50
) .an-btn--solid,
body.atelier:is(
  .theme-t31, .theme-t32, .theme-t33, .theme-t34, .theme-t35,
  .theme-t36, .theme-t37, .theme-t38, .theme-t39, .theme-t40,
  .theme-t41, .theme-t42, .theme-t43, .theme-t44, .theme-t45,
  .theme-t46, .theme-t47, .theme-t48, .theme-t49, .theme-t50
) .ui-btn--solid {
  background: var(--cta-bg) !important;
  color: var(--cta-fg) !important;
  border-color: var(--cta-border, var(--cta-bg)) !important;
}

@media (max-width: 899px) {
  body.chrome-grid-dense-market .an-grid,
  body.chrome-grid-catalog-dense .an-grid,
  body.chrome-grid-stage-retail .an-grid,
  body.chrome-grid-cat-blocks .an-grid,
  body.chrome-grid-precise-3 .an-grid,
  body.chrome-grid-archive-scan .an-grid,
  body.chrome-grid-life-mosaic .an-grid,
  body.chrome-grid-spatial-exp .an-grid,
  body.chrome-grid-convert-dense .an-grid,
  body.chrome-grid-ugc-path .an-grid,
  body.chrome-grid-discover-mix .an-grid,
  body.chrome-grid-set-blocks .an-grid,
  body.chrome-grid-retain-rails .an-grid,
  body.chrome-grid-hybrid-exp .an-grid,
  body.chrome-grid-chapter-mix .an-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px) {
  body.chrome-grid-dense-market .an-grid,
  body.chrome-grid-catalog-dense .an-grid,
  body.chrome-grid-stage-retail .an-grid,
  body.chrome-grid-sparse-curate .an-grid,
  body.chrome-grid-cat-blocks .an-grid,
  body.chrome-grid-precise-3 .an-grid,
  body.chrome-grid-campaign-2 .an-grid,
  body.chrome-grid-archive-scan .an-grid,
  body.chrome-grid-life-mosaic .an-grid,
  body.chrome-grid-spatial-exp .an-grid,
  body.chrome-grid-convert-dense .an-grid,
  body.chrome-grid-ugc-path .an-grid,
  body.chrome-grid-bleed-visual .an-grid,
  body.chrome-grid-stage-lux .an-grid,
  body.chrome-grid-discover-mix .an-grid,
  body.chrome-grid-set-blocks .an-grid,
  body.chrome-grid-retain-rails .an-grid,
  body.chrome-grid-hybrid-exp .an-grid,
  body.chrome-grid-chapter-mix .an-grid { grid-template-columns: 1fr; }
}
