/* Short scroll entrance, using the approved boutique walkthrough. */
.demo-bar { position: sticky; top: 0; z-index: 61; }
.hd { top: var(--walk-demo, 48px); }
.store-walk {
  --walk-header: 61px;
  --walk-opacity: 1;
  --walk-progress: 0;
  position: relative;
  isolation: isolate;
  background: #e9f4f1;
}
.walk-stage {
  position: relative;
  height: calc(100svh - var(--walk-header));
  min-height: 540px;
  overflow: hidden;
  background: #263832;
}
.store-walk.is-active { height: calc(185svh - var(--walk-header)); }
.store-walk.is-active .walk-stage { position: sticky; top: var(--walk-header); }
.walk-media { position: absolute; inset: 0; }
.walk-poster, .walk-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.walk-film { opacity: 0; }
.store-walk.is-ready .walk-film { opacity: 1; }
.walk-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(9,24,19,.1) 0%, rgba(9,24,19,.68) 25%, rgba(9,24,19,.86) 65%, rgba(9,24,19,.94));
  opacity: var(--walk-opacity);
}
.walk-copy {
  position: absolute; inset-inline: 24px; bottom: 160px;
  max-width: 610px; color: #fffaf0;
  opacity: var(--walk-opacity);
  transform: translate3d(0, var(--walk-shift, 0px), 0);
}
.walk-kicker { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #fffaf0; margin-bottom: 22px; }
.walk-copy h1 { margin: 0 0 20px; font-size: clamp(43px, 11.5vw, 76px); line-height: 1.04; font-weight: 400; letter-spacing: -.045em; text-wrap: balance; }
.walk-copy p { margin: 0 0 25px; max-width: 34ch; font-size: 15px; line-height: 1.65; color: #fffaf0; }
.walk-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.walk-actions .btn-solid { background: #e1f0e9; color: #24473f; border-color: #e1f0e9; }
.walk-actions .btn-solid:hover { background: #fffaf0; }
.walk-link { color: #fffaf0; font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid #fffaf0a0; }
.walk-cue { position: absolute; bottom: 27px; inset-inline: 24px; display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #fffaf0; opacity: var(--walk-opacity); }
.walk-cue > :last-child { font-size: 24px; }
.walk-progress { position: absolute; bottom: 0; inset-inline: 0; height: 3px; background: #ffffff30; pointer-events: none; display: none; }
.is-active .walk-progress { display: block; }
.walk-progress span { display: block; height: 100%; background: #91c6be; transform: scaleX(var(--walk-progress)); transform-origin: left; }
body[dir="rtl"] .walk-progress span { transform-origin: right; }
body[dir="rtl"] .walk-copy h1 { letter-spacing: 0; line-height: 1.2; }
body[dir="rtl"] .walk-kicker, body[dir="rtl"] .walk-cue { letter-spacing: 0; }
.walk-copy a:focus-visible, .walk-cue:focus-visible { outline: 2px solid #fffaf0; outline-offset: 5px; }
#closets { scroll-margin-top: calc(var(--walk-demo, 48px) + 85px); }
@media (min-width: 800px) {
  .walk-stage { min-height: 580px; }
  .walk-copy { inset-inline-start: 7%; inset-inline-end: auto; bottom: 20%; width: 43%; }
  .walk-copy h1 { font-size: clamp(50px, 5.3vw, 80px); }
  .walk-copy p { font-size: 17px; }
  /* Portrait footage keeps its full height on desktop; no invented room. */
  .walk-media { inset-inline-start: 50%; transform: translateX(calc(-50% * var(--walk-center, 0))); }
  body[dir="rtl"] .walk-media { transform: translateX(calc(50% * var(--walk-center, 0))); }
  .walk-poster, .walk-film { object-fit: contain; }
  .walk-stage { background: #213a32; }
  .walk-shade { background: linear-gradient(90deg, #213a32 46%, #213a3200 75%); }
  body[dir="rtl"] .walk-shade { background: linear-gradient(270deg, #213a32 46%, #213a3200 75%); }
  .walk-cue { inset-inline: 7%; }
}
@media (max-height: 700px) and (max-width: 799px) {
  .walk-stage { min-height: 480px; }
  .walk-copy { bottom: 78px; }
  .walk-kicker { margin-bottom: 14px; }
  .walk-copy h1 { font-size: 38px; margin-bottom: 14px; }
  .walk-copy p { margin-bottom: 16px; }
  .walk-cue { bottom: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .store-walk.is-active { height: auto; }
  .store-walk.is-active .walk-stage { position: relative; top: auto; }
  .walk-film, .walk-progress { display: none !important; }
  .walk-copy, .walk-shade, .walk-cue { opacity: 1 !important; transform: none !important; }
}

.walk-location { display: block; width: fit-content; color: #fffaf0; font-size: 14px; margin: -10px 0 22px; text-underline-offset: 5px; }
.walk-location:hover { text-decoration: underline; }
.walk-tools { position: absolute; z-index: 3; inset-inline: 24px; bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; pointer-events: none; }
.walk-loading { font-size: 12px; color: white; background: #213a32e8; border-radius: 4px; padding: 6px 9px; }
.walk-loading:empty { visibility: hidden; }
.walk-skip { pointer-events: auto; min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; color: #fffaf0; background: #213a32eb; border: 1px solid #ffffff70; border-radius: 3px; font-size: 13px; }
.walk-skip:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.walk-cue { bottom: 75px; }
@media (min-width:800px) { .walk-tools { inset-inline: 7%; } .walk-cue { bottom: 80px; } }
@media (max-height:700px) and (max-width:799px) { .walk-copy { bottom: 145px; } .walk-copy p { display: none; } .walk-cue { bottom: 72px; } }