/* Orchid v477: profile/storefront rail continuity, stable account access and
   immediate Tali entry. This file is the final layout authority for v477. */

/* Hidden profile Reels hosts carry data only. The portrait is the one visible
   entry point, so these nodes can never reserve layout space. */
html body :is(
  [data-category-reel-host][hidden],
  [data-public-creator-videos][hidden],
  .public-creator-video-rail[hidden],
  .discover-creator-stories[hidden]
) {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Opening a collection should reveal its heading and products immediately. */
html body.page-creator-link #shop .public-creator-storefront.is-collection-open .public-creator-collection-view {
  display: grid !important;
  align-content: start !important;
  gap: 16px !important;
  min-height: 0 !important;
  margin: clamp(14px, 2vw, 28px) 0 0 !important;
  padding-top: 0 !important;
}

html body.page-creator-link #shop .public-creator-storefront.is-collection-open .public-creator-collection-products-head {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.page-creator-link #shop .public-creator-storefront.is-collection-open .public-creator-collection-products-head + .orchid-rail-row {
  margin-top: 0 !important;
}

html body.page-creator-link #shop .public-creator-storefront.is-collection-open > :is(div,.is-hidden):has(.public-creator-collections-row).is-hidden {
  display: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Tali gives instant visual acknowledgement while its already-eager frame is
   mounted. The route itself opens synchronously. */
.orchid-chat-button.is-opening {
  cursor: progress !important;
}

.orchid-chat-button.is-opening > span {
  color: transparent !important;
  background-image: none !important;
}

.orchid-chat-button.is-opening > span::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,.42);
  border-top-color: #fff;
  border-radius: 50%;
  animation: orchid-tali-open-spin .68s linear infinite;
}

@keyframes orchid-tali-open-spin { to { transform: rotate(1turn); } }

/* Authentication is a persistent verification surface, not a transient card
   tied to the height of the underlying onboarding page. */
.public-auth-overlay:not(.is-hidden) {
  position: fixed !important;
  z-index: 100000 !important;
  inset: 0 !important;
  display: grid !important;
  align-items: start !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  padding: max(18px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
}

.public-auth-overlay:not(.is-hidden) .public-auth-mount,
.public-auth-overlay:not(.is-hidden) .public-auth-card {
  width: min(100%, 760px) !important;
  min-width: 0 !important;
  margin-inline: auto !important;
}

@media (max-width: 760px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  /* One coherent card is visible at a time. The next card peeks in and every
     card remains fully reachable by finger swipe. */
  html body :is(
    .public-creator-collections-row,
    .os-content-grid.public-creator-collections-row,
    .discover-directory-rail,
    .discover-product-grid,
    .public-creator-collection-products
  )[data-commerce-rail] {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(84vw, 380px) !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left)) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: max(14px, env(safe-area-inset-left)) !important;
    touch-action: pan-x pan-y !important;
    scrollbar-width: thin !important;
  }

  html body :is(
    .public-creator-collections-row,
    .os-content-grid.public-creator-collections-row,
    .discover-directory-rail
  )[data-commerce-rail] > :is(.orchid-collection-card,.discover-creator-card,.discover-brand-card,.discover-category-card) {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 340px !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
  }

  html body .orchid-collection-card.orchid-collection-card .orchid-collection-card__media,
  html body .orchid-collection-card.orchid-collection-card .orchid-collection-card__media > :is(img,.orchid-media-empty) {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
  }

  html body .orchid-collection-card.orchid-collection-card .orchid-collection-card__copy {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 340px !important;
    padding: 22px 18px !important;
  }

  html body .orchid-collection-card.orchid-collection-card .orchid-collection-card__copy :is(strong,small,span) {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  html body :is(
    .public-creator-collections-carousel,
    .public-creator-products-carousel,
    .discover-directory-rail-shell,
    .discover-product-rail-shell
  )[data-commerce-rail-shell] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html body :is(
    .public-creator-collections-carousel,
    .public-creator-products-carousel,
    .discover-directory-rail-shell,
    .discover-product-rail-shell
  ) > :is([data-commerce-rail-prev],[data-commerce-rail-next]) {
    display: none !important;
  }

  html body.page-creator-link #shop .public-creator-storefront,
  html body.page-discover #discover .orchid-category-storefront,
  html body.page-brands #brands .os-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }

  .public-auth-overlay:not(.is-hidden) {
    align-items: start !important;
    padding-top: max(8px, env(safe-area-inset-top)) !important;
  }

  .public-auth-overlay:not(.is-hidden) .public-auth-card {
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))) !important;
    overflow: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orchid-chat-button.is-opening > span::after { animation-duration: 1.4s; }
}