/* v471: phone-width containment, manual commerce rails, Brand storefront flow. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body > :is(header, main, footer),
main,
main > section,
:is(#shop, #discover, #brands, #creators, #dashboard),
:is(.page, .page-shell, .section, .section-card, .brand-public, .brand-dashboard, .public-creator-storefront) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

img,
video,
iframe {
  max-width: 100%;
}

/* The message surface must escape the header's visual layers on every route. */
.message-menu-shell {
  position: relative !important;
  z-index: 10020 !important;
}

.message-menu-shell .account-menu[hidden],
.message-menu-shell .account-menu.is-hidden {
  display: none !important;
}

.message-menu-shell .account-menu:not(.is-hidden):not([hidden]) {
  display: block !important;
  pointer-events: auto !important;
  z-index: 10030 !important;
}

/* Opening a public Brand storefront replaces the marketing body while the
   shared site header and footer remain in normal document flow. */
body.page-brands #brands .brand-public.has-open-storefront {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 0 !important;
}

body.page-brands #brands .brand-public.has-open-storefront > :not(.brand-storefront) {
  display: none !important;
}

body.page-brands #brands .brand-public.has-open-storefront > .brand-storefront {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
}

.brand-dashboard-storefront-card {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: clamp(18px, 4vw, 38px);
  border: 1px solid var(--line, #d8d8d3);
  border-radius: 18px;
  background: var(--surface, #fff);
}

.brand-dashboard-storefront-card :is(h2, p) {
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
}

.brand-dashboard-storefront-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.orchid-brand-placeholder {
  position: relative;
  display: grid;
  align-content: end;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 420px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0;
  color: #fff;
  background: #151817;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
}

.orchid-brand-placeholder::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .92));
}

.orchid-brand-placeholder > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .72;
}

.orchid-brand-placeholder > :is(strong, small) {
  position: relative;
  z-index: 1;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.orchid-brand-placeholder > strong {
  font: 500 clamp(28px, 3vw, 40px) / 1 var(--font-editorial, Georgia, serif);
}

.orchid-brand-placeholder > small {
  font-size: 13px;
  line-height: 1.45;
}

/* Reel progress is driven by vertical swiping and the seek control; the stale
   story/loading strips are intentionally removed. */
html body .orchid-video-viewer[data-orchid-video-ui="v461"] .orchid-video-viewer__progress {
  display: none !important;
}

@media (max-width: 900px) {
  html,
  body {
    min-width: 0 !important;
    overflow-x: clip !important;
  }

  body > :is(header, main, footer),
  main,
  main > section,
  :is(#shop, #discover, #brands, #creators, #dashboard) {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  .site-header,
  .site-header__inner,
  .site-header__actions {
    overflow: visible !important;
  }

  .message-menu-shell .account-menu:not(.is-hidden):not([hidden]) {
    position: fixed !important;
    top: max(74px, calc(env(safe-area-inset-top, 0px) + 64px)) !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: 430px !important;
    max-height: min(72dvh, 620px) !important;
    margin-left: auto !important;
    overflow: auto !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .34) !important;
  }

  /* Small screens never resume timed movement. Each lane remains a native,
     touch-draggable, one-card-at-a-time carousel. */
  :is(
    [data-commerce-rail],
    .discover-rail,
    .discover-category-rail,
    .discover-directory-status-grid,
    .orchid-category-collection-grid,
    .brand-featured-rail,
    .brand-directory-grid,
    .public-creator-collections-row,
    .creator-story-rail__track
  ):not(.is-collection-open *) {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(86vw, 390px) !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 4px 16px 18px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain !important;
    scroll-behavior: auto !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: thin;
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

  :is(
    [data-commerce-rail],
    .discover-rail,
    .discover-category-rail,
    .discover-directory-status-grid,
    .orchid-category-collection-grid,
    .brand-featured-rail,
    .brand-directory-grid,
    .public-creator-collections-row,
    .creator-story-rail__track
  ) > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always;
    box-sizing: border-box;
  }

  .orchid-reactive-rail-row {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .orchid-reactive-rail-row > .product-scroll-arrow,
  .public-creator-collections-carousel > .product-scroll-arrow {
    display: none !important;
  }

  :is(.discover-product-card, .discover-creator-card, .discover-collection-card, .discover-brand-card, .discover-category-card) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  :is(.discover-product-card, .discover-creator-card, .discover-collection-card, .discover-brand-card, .discover-category-card) img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 4 / 3;
    height: auto !important;
    object-fit: cover !important;
  }

  :is(.discover-brand-card__copy, .discover-category-card > span, .discover-creator-card__copy) {
    display: grid !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 16px !important;
    box-sizing: border-box;
    overflow: hidden;
  }

  :is(.discover-brand-card__copy, .discover-category-card > span, .discover-creator-card__copy) :is(strong, h3, h4) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(25px, 7vw, 37px) !important;
    line-height: 1.02 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  :is(.discover-brand-card__copy, .discover-category-card > span, .discover-creator-card__copy) :is(small, em, p, span) {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Public creator profile: no detached/floating collection rail and no
     oversized invisible rows. */
  .public-creator-storefront {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }

  .public-creator-collections-carousel {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .public-creator-collections-row > .public-creator-collection-card {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .public-creator-collections-row .agent-my-shop-collection-summary {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
  }

  .public-creator-storefront :is(.public-creator-collection-navigation, .collection-navigation, .collection-pills, .agent-my-shop-tabs) {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  .public-creator-storefront.is-collection-open .public-creator-collections-carousel,
  .public-creator-storefront.is-collection-open .public-creator-collections-row,
  .public-creator-storefront.is-collection-open .public-creator-collections-row > .public-creator-collection-card[open] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Phone Brand page: actual cards define the section height. */
  body.page-brands #brands,
  body.page-brands #brands .brand-public,
  body.page-brands #brands :is(.brand-featured-section, .brand-directory, .brand-insights, .brand-featured-rail, .brand-directory-grid) {
    min-height: 0 !important;
    height: auto !important;
  }

  body.page-brands #brands .brand-featured-section,
  body.page-brands #brands .brand-insights,
  body.page-brands #brands .brand-directory {
    padding: 34px 16px !important;
  }

  body.page-brands #brands .brand-featured-rail {
    grid-auto-columns: min(84vw, 360px) !important;
  }

  body.page-brands #brands .brand-external-card {
    min-height: 0 !important;
    aspect-ratio: 4 / 5;
  }

  body.page-brands #brands .orchid-brand-placeholder {
    min-height: 0 !important;
    aspect-ratio: 4 / 5;
    padding: 20px;
  }

  body.page-brands #brands .brand-intro-statement {
    min-height: 0 !important;
    padding: 44px 18px !important;
  }

  body.page-brands #brands .brand-learning-row,
  body.page-brands #brands .brand-learning-media,
  body.page-brands #brands .brand-learning-copy,
  body.page-brands #brands .brand-insights-grid {
    min-height: 0 !important;
  }

  .brand-dashboard-storefront-card__actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .message-menu-shell .account-menu:not(.is-hidden):not([hidden]) {
    right: 8px !important;
    left: 8px !important;
    max-width: none !important;
  }

  :is(
    [data-commerce-rail],
    .discover-rail,
    .discover-category-rail,
    .discover-directory-status-grid,
    .orchid-category-collection-grid,
    .brand-featured-rail,
    .brand-directory-grid,
    .public-creator-collections-row
  ):not(.is-collection-open *) {
    grid-auto-columns: min(86vw, 360px) !important;
    padding-inline: 12px !important;
  }
}