#experience {
  inset: 0 0 var(--bh-footer);
  height: auto;
}

#brand-ending > .tour-stage {
  position: relative;
  height: 100%;
  min-height: 100%;
  overflow: clip;
}

.copy[data-position="entrada"] #scene-description:not([hidden]) {
  color: #f6edde;
  max-width: 30ch;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.5;
  text-wrap: pretty;
}

body .immersive-portal { bottom: var(--bh-footer); }
body .immersive-status { bottom: calc(var(--bh-footer) + 20px); }

body #hair-gallery[open][data-material],
body #photo-viewer[open],
body #photo-viewer[open][data-mobile-first] {
  position: fixed;
  inset: 0 0 var(--bh-footer);
  width: 100%;
  max-width: none;
  height: calc(100dvh - var(--bh-footer));
  min-height: 0;
  max-height: calc(100dvh - var(--bh-footer));
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#hair-gallery[open]::backdrop,
#photo-viewer[open]::backdrop {
  background: transparent;
  backdrop-filter: none;
}

#collections[open]::backdrop,
#brand-contact[open]::backdrop { clip-path: inset(0 0 var(--bh-footer) 0); }

#hair-gallery[open] .selection-dock,
#photo-viewer[open] .selection-dock { bottom: calc(var(--bh-footer) + 14px); }

#hair-gallery .catalogue-utility-r29 { flex-wrap: wrap; }
#hair-gallery .photo-motion-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 10px;
}
#hair-gallery .photo-motion-controls[hidden] { display: none; }

#hair-gallery .photo-motion-controls button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 5px 8px;
  border: 1px solid #b3a085;
  background: transparent;
  color: #423323;
  font: 500 12px/1.3 Manrope, Arial, sans-serif;
  cursor: pointer;
}
#hair-gallery .photo-motion-controls button[aria-pressed="true"] {
  border-color: #463623;
  background: #463623;
  color: #fff7eb;
}
#hair-gallery .photo-motion-controls button:disabled { opacity: .6; cursor: default; }
#hair-gallery .photo-motion-controls svg { width: 16px; height: 16px; flex-shrink: 0; }
#hair-gallery .photo-motion-status {
  margin: 0;
  color: #65513d;
  font: 500 11px/1.5 Manrope, Arial, sans-serif;
}

#hair-gallery[data-photo-motion="on"] :is(
  .prepared-photo .reference-photo,
  .varal-photo img,
  .piece-photo-stage .reference-photo,
  .editorial-photo img,
  .saved-image img,
  .piece-browser-item img,
  .series-thumb img
),
#photo-viewer[data-photo-motion="on"] .photo-viewer-viewport:not([data-zoomed="true"]):not([data-dragging="true"]) .photo-viewer-art > .reference-photo {
  transform: perspective(850px) translate3d(var(--photo-shift-x, 0px), var(--photo-shift-y, 0px), 0)
    rotateX(var(--photo-tilt-x, 0deg)) rotateY(var(--photo-tilt-y, 0deg));
  transform-origin: center;
}

@media (max-width: 700px), (pointer: coarse) and (max-width: 900px) {
  body:not(.brand-tour) #experience .copy[data-position="entrada"]:has(#scene-description:not([hidden])) {
    top: auto;
    bottom: calc(117px + env(safe-area-inset-bottom, 0px));
  }
  #experience { touch-action: pan-x pinch-zoom; }
  #brand-ending { touch-action: pan-x pinch-zoom; }
  #brand-ending .tour-content { touch-action: pan-y pinch-zoom; }
  #navigation #forward svg, #brand-ending #tour-next svg { transform: rotate(90deg); }
  #navigation #back svg, #brand-ending #tour-back svg { transform: rotate(-90deg); }

  #hair-gallery[open][data-material][data-browsing="true"] .hair-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  #hair-gallery[open][data-material][data-browsing="true"] .hair-filters .mineral-choice { min-height: 48px; }

  #hair-gallery[open][data-material] .photo-roles-r28,
  #hair-gallery .series-gallery,
  #hair-gallery .piece-browser-rail {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  #hair-gallery .series-gallery { gap: 5px; }
  #hair-gallery .series-thumb { flex-basis: 48px; }
  #hair-gallery .series-thumb img { width: 40px; }

  body #hair-gallery[open][data-material] .piece-consult-dock { bottom: var(--bh-footer); }
  body #hair-gallery[data-mobile-first="true"][data-display-view="details"] .selection-dock {
    bottom: calc(var(--bh-footer) + 80px + env(safe-area-inset-bottom, 0px));
  }
}