/* Black FADE uses the document as its single vertical scroll surface. */
html[data-fade-scroll],
html[data-fade-scroll] body,
html[data-fade-scroll] #root {
  height: auto;
  min-height: 100%;
  overscroll-behavior-y: auto;
}

html[data-fade-scroll] {
  scroll-behavior: auto;
  scroll-padding-top: 0;
}

html[data-fade-scroll] body {
  overflow-x: clip;
  overflow-y: auto;
}

.fade-experience[data-page-scroll-root] {
  height: auto;
  min-height: 100svh;
  overflow-x: clip;
  overflow-y: visible;
  background-attachment: fixed;
}

/* The original presentation has a wrapper; the customizer stage is the main. */
.fade-experience[data-page-scroll-root] .fade-motion-stage[data-page-scroll] {
  display: block;
  position: relative;
  min-height: 100svh;
}

.fade-experience[data-page-scroll-root] .scene-screen {
  position: relative;
  inset: auto;
  height: auto;
  min-height: 100svh;
  max-height: none;
  overflow: visible;
  opacity: 1;
  visibility: visible;
  transform: none;
  z-index: auto;
  will-change: auto;
}

.fade-experience[data-page-scroll-root] .scene-screen :is(.shop-scene, .services-scene) {
  height: auto;
  min-height: 100svh;
  max-height: none;
  overflow: visible;
}

/* Tall sections stay in normal flow instead of capturing the next wheel event. */
.fade-experience[data-page-scroll-root] .scene-screen [data-native-scroll] {
  height: auto;
  min-height: 100svh;
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
  scroll-padding: 0;
  touch-action: auto;
}

.fade-experience[data-page-scroll-root] .scene-screen :is(.scene-content, .services-content) {
  height: auto;
  min-height: 100svh;
  max-height: none;
  overflow: visible;
}

/* Content sections no longer reserve an empty screen after their last item. */
.fade-experience[data-page-scroll-root] .scene-screen:not([data-scene="inicio"]),
.fade-experience[data-page-scroll-root] .scene-screen:not([data-scene="inicio"]) :is(.shop-scene, .services-scene, [data-native-scroll], .scene-content, .services-content) {
  min-height: 0;
}

.fade-experience[data-page-scroll-root] .scene-screen:not([data-scene="inicio"]) :is(.scene-content, .services-content) {
  padding-block: 84px 40px;
}

.fade-experience[data-page-scroll-root] .services-cards {
  flex: 1 0 auto;
  min-height: 330px;
  max-height: none;
  grid-auto-rows: minmax(330px, auto);
}

/* The full page and editor preview share the same responsive title geometry. */
.fade-experience[data-page-scroll-root] .hero .wordmark {
  max-width: 91%;
  font-size: min(29.2vw, 54svh);
}

/* Keep Black's opening as a cover, then let the content continue in the
   document. The cutout source has a flat lower edge; fade that artwork rather
   than exposing the image boundary as the cover leaves the viewport. */
.fade-experience[data-page-scroll-root] .hero:not(.editorial-hero) .barber {
  -webkit-mask-image: linear-gradient(to bottom, #000 0 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 78%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center top;
  mask-position: center top;
}

@media (min-width: 1101px) {
  .fade-experience[data-page-scroll-root] .hero:not(.editorial-hero) {
    --hero-portrait-overhang: 21svh;
    height: 100svh;
    min-height: 0;
  }

  .fade-experience[data-page-scroll-root] .hero:not(.editorial-hero) .barber {
    /* The portrait extends below the cover. End its mask at the cover's edge,
       including the customizer's vertical adjustment, not at the image box. */
    -webkit-mask-size: 100% calc(100% - var(--hero-portrait-overhang) + var(--portrait-y, 0) * 1svh);
    mask-size: 100% calc(100% - var(--hero-portrait-overhang) + var(--portrait-y, 0) * 1svh);
  }

  .fade-experience[data-page-scroll-root]:not(.editorial-template) .scene-screen[data-scene="servicios"] .services-content {
    padding-top: 56px;
  }
}

@media (min-width: 1101px) and (max-height: 820px) {
  .fade-experience[data-page-scroll-root] .hero:not(.editorial-hero) {
    --hero-portrait-overhang: 20svh;
  }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .fade-experience[data-page-scroll-root] .hero .wordmark {
    font-size: min(29.5vw, 280px);
  }
}

@media (max-width: 700px) {
  .fade-experience[data-page-scroll-root] .hero .wordmark {
    max-width: 94%;
    font-size: 29.4vw;
  }
}

.fade-experience[data-page-scroll-root] .shop-navbar {
  position: fixed;
  top: 0;
  z-index: 30;
}

.fade-experience[data-page-scroll-root] .template-catalog-status,
.fade-experience[data-page-scroll-root] .template-preview-toast {
  position: fixed;
}

@media (max-width: 1100px) {
  .fade-experience[data-page-scroll-root] .scene-screen:not([data-scene="inicio"]) :is(.scene-content, .services-content) {
    padding-block: 80px 32px;
  }

  .fade-experience[data-page-scroll-root] .site-menu {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    padding-inline: 6%;
    overscroll-behavior-y: contain;
  }
}

@media (max-width: 1024px) {
  .fade-experience[data-page-scroll-root] .services-cards {
    flex: none;
    min-height: 0;
    grid-auto-rows: minmax(312px, auto);
  }
}

@media (max-width: 380px) {
  .fade-experience[data-page-scroll-root] .services-cards {
    grid-auto-rows: minmax(290px, auto);
  }
}