/**
 * T1–T1000 containment & responsive layout law (absolute last).
 * Applies to every Ready theme via body.atelier.theme-t*.
 * Root-cause width/flex/grid/text fixes, never collapse fill media with height:auto.
 */

/* , ,  1. Global box model , ,  */
html {
  box-sizing: border-box;
  max-width: 100%;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

html,
body.atelier {
  max-width: 100%;
  overflow-x: clip;
}

body.atelier[class*="theme-t"] {
  width: 100%;
  max-width: 100%;
}

body.atelier[class*="theme-t"] :is(
  main, header, footer, section,
  .an-section, .an-rail-block, .an-block, [class*="-stage"]
) {
  max-width: 100%;
  min-width: 0;
}

/* , ,  2. 90vw canvas safety , ,  */
body.atelier[class*="theme-t"] :is(
  .an-wrap, .an-dest, .an-topbar__in, .an-checkout-stage__in,
  .b02-stage, .b03-stage, .b04-stage, .b05-stage, .b06-stage,
  .b07-stage, .b08-stage, .b09-stage, .b10-stage, .b11-stage,
  .b12-stage, .b13-stage
) {
  width: min(90vw, 100%) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

/* Nested wraps fill the stage (no 90vw-inside-90vw) */
body.atelier[class*="theme-t"] :is(
  .b02-stage, .b03-stage, .b04-stage, .b05-stage, .b06-stage,
  .b07-stage, .b08-stage, .b09-stage, .b10-stage, .b11-stage,
  .b12-stage, .b13-stage
) :is(.an-wrap, .an-dest, .hx .an-wrap, .hx__stage.an-wrap) {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}

@media (max-width: 899px) {
  body.atelier[class*="theme-t"] :is(
    .an-wrap, .an-dest, .an-topbar__in,
    .b02-stage, .b03-stage, .b04-stage, .b05-stage, .b06-stage,
    .b07-stage, .b08-stage, .b09-stage, .b10-stage, .b11-stage,
    .b12-stage, .b13-stage
  ) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* , ,  3. Flex / grid shrink , ,  */
body.atelier[class*="theme-t"] :is(
  .an-product, .an-product__meta, .an-product__media,
  .an-grid > *, .an-header__row, .an-header__links,
  .an-nav, [class*="-nav__row"], [class*="-nav__links"],
  [class*="-nav__side"], [class*="-nav__tools"],
  .an-buy, .an-buy__copy, .an-footer__cols, .an-footer__col,
  .hx__copy, .hx__stage, .an-promo, .an-complete, .an-filters,
  .an-rail__copy, .an-rail__slide, .an-desire__copy, .an-desire__actions
) {
  min-width: 0;
}

body.atelier[class*="theme-t"] .an-grid {
  width: 100%;
  max-width: 100%;
}

body.atelier[class*="theme-t"] .an-grid > * {
  min-width: 0;
  max-width: 100%;
}

/* Dense chrome grids collapse before intermediate-width overflow */
@media (max-width: 1279px) {
  body.atelier[class*="chrome-grid-"] .an-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 899px) {
  body.atelier[class*="theme-t"] .an-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 359px) {
  body.atelier[class*="theme-t"] .an-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* , ,  4. Cards / long titles / strings , ,  */
body.atelier[class*="theme-t"] .an-product {
  max-width: 100%;
}

body.atelier[class*="theme-t"] .an-product__meta,
body.atelier[class*="theme-t"] .an-product__meta h3,
body.atelier[class*="theme-t"] .an-buy h1,
body.atelier[class*="theme-t"] .hx__title,
body.atelier[class*="theme-t"] .an-h1,
body.atelier[class*="theme-t"] .an-h2,
body.atelier[class*="theme-t"] :is(h1, h2, h3, p, li, label, small, code, .an-muted, .an-lead) {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* , ,  5. Media, contain without collapsing fill frames , ,  */
/* Content-flow images/videos */
body.atelier[class*="theme-t"] :is(img, video, canvas, iframe) {
  max-width: 100%;
}

/* Product / cinematic frames keep aspect; crop inside intentionally */
body.atelier[class*="theme-t"] :is(
  .an-product__media, .an-cinema figure, .an-look, .an-journal__media, .an-ugc__media
) {
  position: relative;
  max-width: 100%;
  overflow: clip;
}

body.atelier[class*="theme-t"] .an-product__media img,
body.atelier[class*="theme-t"] .an-product__img {
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  display: block;
}

/* Absolute fill layers (heroes / overlays): keep 100% height, never height:auto */
body.atelier[class*="theme-t"] :is(.hx__bg, .hx__bg img, .an-hero__bg, .an-hero__media img) {
  max-width: 100%;
  width: 100%;
  /* height remains controlled by theme hero CSS (cover / absolute fill) */
}

body.atelier[class*="theme-t"] .an-product__badge {
  max-width: calc(100% - 0.75rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
}

/* , ,  6. Buttons , ,  */
body.atelier[class*="theme-t"] :is(.an-btn, .ui-btn, .an-bag-cta, .an-product__quick) {
  max-width: 100%;
  box-sizing: border-box;
}

body.atelier[class*="theme-t"] :is(.an-btn, .ui-btn, .an-bag-cta) {
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

body.atelier[class*="theme-t"] .an-desire__actions,
body.atelier[class*="theme-t"] .hx__actions,
body.atelier[class*="theme-t"] .an-product__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  max-width: 100%;
}

body.atelier[class*="theme-t"] .an-product__meta {
  display: grid;
}

/* , ,  7. Navigation (always visible chrome) , ,  */
body.atelier[class*="theme-t"] :is(
  .an-header,
  .b02-nav, .b03-nav, .b04-nav, .b05-nav, .b06-nav,
  .b07-nav, .b08-nav, .b09-nav, .b10-nav, .b11-nav, .b12-nav, .b13-nav
) {
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100%;
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg, #fff);
  color: var(--ink, #141210);
}

/* Sidebar chrome keeps its own positioning (not sticky top bar) */
body.atelier[class*="theme-t"] .b02-nav--sidebar {
  position: relative;
  z-index: 40;
}

body.atelier[class*="theme-t"] :is(
  .an-header__row, [class*="-nav__row"], [class*="-nav__row--mast"],
  [class*="-nav__row--bar"], [class*="-nav__row--split"]
) {
  display: flex !important;
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: center;
}

body.atelier[class*="theme-t"] :is(
  .an-header__links, [class*="-nav__links"], [class*="-nav__side"],
  [class*="-nav__row--sub"] nav
) {
  flex-wrap: wrap;
  max-width: 100%;
  min-width: 0;
}

/* Logo + bag must never vanish */
body.atelier[class*="theme-t"] :is(
  .an-logo, [class*="-nav__logo"], [class*="-nav__tools"], .an-utils, .an-bag-cta, [class*="-nav__bag"]
) {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 899px) {
  body.atelier[class*="theme-t"] :is(
    .an-header__links, [class*="-nav__links"], [class*="-nav__side"],
    [class*="-nav__row--sub"]
  ) {
    display: none !important; /* drawer replaces desktop link rows */
  }

  /* Batch 06–13 never re-enabled the burger, force it on */
  body.atelier[class*="theme-t"] :is(
    .an-menu-btn,
    [class*="-nav__mobile-open"],
    button[data-menu-toggle]
  ) {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  body.atelier[class*="theme-t"] :is(
    .an-header__row, [class*="-nav__row"], [class*="-nav__row--mast"],
    [class*="-nav__row--bar"], [class*="-nav__row--split"]
  ) {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    min-height: 3.5rem;
  }
}

/* , ,  8. Hero type + compact stage height (no near-full-viewport bands) , ,  */
body.atelier[class*="theme-t"] .hx__title,
body.atelier[class*="theme-t"] .an-hero__title,
body.atelier[class*="theme-t"] h1.an-h1 {
  font-size: clamp(1.65rem, 4.8vw, 3.75rem) !important;
  line-height: 1.08;
  max-width: 100%;
}

body.atelier[class*="theme-t"] :is(.hx, .hx__stage, .an-hero) {
  max-width: 100%;
  min-width: 0;
}

/* Cap cinematic heroes, theme CSS often uses 80–100vh / 860–1000px */
body.atelier[class*="theme-t"] :is(
  .hx__stage,
  [class*="hx__stage--"]
) {
  min-height: min(46vh, 460px) !important;
}

/* Content-first / plain heroes stay compact */
body.atelier[class*="theme-t"] :is(
  .hx__stage--plain,
  .hx__stage--desk,
  .hx__stage--market,
  .hx__stage--needmap,
  .hx__stage--educate,
  .hx__stage--catalogos,
  .hx__stage--retain,
  .hx__stage--cut
) {
  min-height: 0 !important;
}

body.atelier[class*="theme-t"] :is(
  .hx__media,
  .hx__swiss-cell--media .hx__media,
  .hx__twin-media .hx__media,
  .hx__scenario-media .hx__media,
  .hx__split-media
) {
  min-height: min(34vh, 340px) !important;
  max-height: min(46vh, 460px);
}

/* Tall merch frames, stop stretching mid-page sections */
body.atelier[class*="theme-t"] :is(.an-card--tall, .an-cinema, .an-look) {
  height: auto !important;
  min-height: 0 !important;
  max-height: min(40vh, 380px);
}

body.atelier[class*="theme-t"] :is(
  .an-desire, .an-pain, .an-fomo, .an-trust-convert, .an-complete,
  .an-reviews, .an-promo, .an-promo-split, .an-dual-cta, .an-sale-banner,
  .an-lookbook, .an-press, .an-cta-band, .an-news, .an-rail-block
) {
  min-height: 0 !important;
  padding-block: clamp(1.25rem, 3.2vw, 2rem) !important;
}

/* , ,  9. Rails, intentional horizontal scroll inside section only , ,  */
body.atelier[class*="theme-t"] .an-rail-block,
body.atelier[class*="theme-t"] .an-rail {
  max-width: 100%;
  min-width: 0;
}

body.atelier[class*="theme-t"] .an-rail {
  overflow: clip;
}

body.atelier[class*="theme-t"] .an-rail__track {
  max-width: 100%;
  overscroll-behavior-x: contain;
}

/* , ,  10. Forms , ,  */
body.atelier[class*="theme-t"] :is(input, select, textarea) {
  max-width: 100%;
  box-sizing: border-box;
}

body.atelier[class*="theme-t"] :is(
  .an-signup input, .an-news input, .an-search input,
  form input:not([type="checkbox"]):not([type="radio"]),
  form select, form textarea
) {
  width: 100%;
  max-width: 100%;
}

body.atelier[class*="theme-t"] :is(form, .an-signup, .an-news) {
  max-width: 100%;
}

/* , ,  11. Tables , ,  */
body.atelier[class*="theme-t"] :is(.an-specs, .an-table-wrap, [data-table-scroll]) {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* , ,  12. Drawers / modals / pickers , ,  */
body.atelier[class*="theme-t"] :is(
  .an-drawer, .b10-drawer, .b02-drawer, .b03-drawer,
  [data-mobile-nav]
) {
  max-width: min(22rem, 100vw);
  max-height: 100dvh;
  overflow: auto;
  overscroll-behavior: contain;
}

/* Theme picker: wide enough for a full 20-card page (5×4) without vertical scroll */
body.atelier[class*="theme-t"] .an-picker__panel,
body.atelier .an-picker__panel {
  width: min(52rem, calc(100vw - 1.25rem)) !important;
  max-width: calc(100vw - 1.25rem) !important;
  max-height: min(34rem, calc(100dvh - 4.5rem)) !important;
  overflow: hidden !important;
  overscroll-behavior: contain;
}

/* , ,  13. Footer , ,  */
body.atelier[class*="theme-t"] :is(.an-footer, .an-footer__grid, .an-footer__cols) {
  max-width: 100%;
  min-width: 0;
}

body.atelier[class*="theme-t"] .an-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 1.25rem;
}

/* , ,  14. Sticky + safe area , ,  */
body.atelier[class*="theme-t"] :is(
  .an-sticky-cta, .an-bag-cta--sticky, [data-sticky-cta]
) {
  bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  max-width: calc(100vw - 1.5rem);
}

/* , ,  15. Filters / tags wrap , ,  */
body.atelier[class*="theme-t"] :is(.an-filters, .an-tags, .an-chips, .an-dest) {
  flex-wrap: wrap;
  max-width: 100%;
  min-width: 0;
}

/* , ,  16. Icons , ,  */
body.atelier[class*="theme-t"] .an-icon {
  flex-shrink: 0;
}

body.atelier[class*="theme-t"] .an-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  max-width: 1.5rem;
  max-height: 1.5rem;
}

/* , ,  17. Hover scale stays inside media frame , ,  */
body.atelier[class*="theme-t"] .an-product:hover .an-product__img--a {
  transform: scale(1.03);
  transform-origin: center center;
}

/* , ,  18. GSAP / motion: revealed nodes must not expand page width , ,  */
body.atelier[class*="theme-t"] :is(.an-reveal, [data-reveal], .gsap-marker-scroller-start) {
  max-width: 100%;
}

/* , ,  19. Demo chrome: never inherit storefront ink (full lock in atelier-chrome-lock.css) , ,  */
body.atelier[class*="theme-t"] .an-toolbar,
body.atelier[class*="theme-t"] .an-picker__panel {
  --ink: #ffffff;
  --muted: #d7f0e6;
}