/* Keep the hero pair inside the canvas at wide desktop sizes. */
@media (min-width: 761px) {
  .hero { min-height: clamp(620px, calc(100svh - 120px), 760px); }
  .hero-shoe { width: 76%; left: 11%; top: 11%; max-height: 80%; object-fit: contain; }
  .motion-sticky .journey-shoe.catalog-shot {
    display: block;
    width: min(46vw, 720px);
    max-height: 72%;
    right: 4%;
    top: 15%;
    object-fit: contain;
    visibility: visible;
    opacity: 1;
    z-index: 2;
  }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .motion-sticky .journey-shoe.catalog-shot { width: min(49vw, 530px); right: 1%; top: 21%; }
}
@media (min-width: 1600px) {
  .motion-sticky .journey-shoe.catalog-shot { width: min(42vw, 760px); right: 4%; top: 13%; }
}
@media (max-width: 760px) {
  .hero-shoe { width: 110%; max-height: none; left: -10%; top: 22%; object-fit: contain; }
  .motion-sticky .journey-shoe.catalog-shot {
    display: block;
    width: min(84vw, 500px);
    max-height: 34%;
    right: 1%;
    top: 51%;
    object-fit: contain;
    visibility: visible;
  }
}

/* A horizontal, masked cut makes each new product feel deliberate without zooming. */
@keyframes shoe-cinematic-cut {
  from {
    opacity: .18;
    clip-path: inset(0 0 0 54%);
    filter: blur(5px) brightness(.9);
    transform: translate3d(calc(var(--shoe-x, 0vw) + 2.6vw), var(--shoe-y, 0vh), 0)
      rotateX(calc(var(--shoe-rx, 0deg) + 5deg)) rotateY(calc(var(--shoe-ry, 0deg) - 14deg))
      rotateZ(calc(var(--shoe-r, -9deg) - 4deg)) scale(1);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    filter: none;
    transform: translate3d(var(--shoe-x, 0vw), var(--shoe-y, 0vh), 0)
      rotateX(var(--shoe-rx, 0deg)) rotateY(var(--shoe-ry, 0deg))
      rotateZ(var(--shoe-r, -9deg)) scale(1);
  }
}
.motion-allowed .journey-shoe.catalog-shot.is-changing {
  animation: shoe-cinematic-cut .72s cubic-bezier(.18,.78,.2,1) both, shoe-hover 5.8s ease-in-out .72s infinite;
}

/* The hero keeps its existing layout while its featured product changes. */
.hero-caption>div{display:grid;gap:8px}
.hero-caption .hero-price-line{display:flex;align-items:center;gap:9px}
.hero-price-line s{font-size:11px;font-weight:500;color:#d9e4ffb5}
.hero-price-line em{font-size:8px;font-style:normal;font-weight:800;letter-spacing:.7px;color:#18200a;background:#e7ff80;padding:4px 6px}
.hero-slide-controls{position:absolute;left:20%;bottom:17px;z-index:4;display:flex;gap:5px}
.hero-slide-button{height:32px;min-width:34px;padding:0 8px;border-bottom:1px solid #ffffff45;color:#e3eaffb5;font-size:9px;font-weight:800;letter-spacing:.8px;transition:color .2s,border-color .2s,background .2s}
.hero-slide-button:hover{color:#fff;background:#ffffff16}
.hero-slide-button[aria-pressed="true"]{color:#fff;border-color:#e7ff80}
.hero-slide-button:focus-visible{outline-color:#e7ff80;outline-offset:2px}
.hero-shoe.is-cutout{width:100%;height:100%;max-height:none;left:0;top:0;object-fit:contain;transform-origin:center;--hero-photo-scale:.9;animation:hero-cutout-float 7s ease-in-out infinite}
.hero-shoe.is-changing{animation:hero-product-enter .78s cubic-bezier(.2,.75,.2,1) both!important}
@keyframes hero-product-enter{0%{opacity:0;filter:blur(9px) drop-shadow(0 32px 22px #032fa552);transform:translate3d(44px,0,0) rotate(-7deg) scale(var(--hero-photo-scale,1))}65%{opacity:1;filter:blur(0) drop-shadow(0 32px 22px #032fa552);transform:translate3d(-5px,0,0) rotate(-12deg) scale(var(--hero-photo-scale,1))}100%{opacity:1;filter:drop-shadow(0 32px 22px #032fa552);transform:translate3d(0,0,0) rotate(-11deg) scale(var(--hero-photo-scale,1))}}
@keyframes hero-cutout-float{0%,100%{transform:translate3d(0,0,0) rotate(-11deg) scale(.9)}50%{transform:translate3d(0,-17px,0) rotate(-6deg) scale(.9)}}
@media(max-width:1100px) and (min-width:761px){.hero-shoe.is-cutout{left:0;--hero-photo-scale:.82;animation-name:hero-cutout-float-compact}.hero-slide-controls{left:15%}}
@keyframes hero-cutout-float-compact{0%,100%{transform:translate3d(0,0,0) rotate(-11deg) scale(.82)}50%{transform:translate3d(0,-14px,0) rotate(-6deg) scale(.82)}}
@media(max-width:760px){.hero-shoe.is-cutout{width:100%;height:100%;max-height:none;top:0;left:0;--hero-photo-scale:.9;animation:hero-cutout-float-mobile 5.8s ease-in-out infinite}.hero-slide-controls{left:50%;bottom:12px;transform:translateX(-50%)}.hero-slide-button{height:30px;min-width:36px}.hero-index{z-index:3}}
@keyframes hero-cutout-float-mobile{0%,100%{transform:translate3d(0,0,0) rotate(-11deg) scale(.9)}50%{transform:translate3d(0,-11px,0) rotate(-6deg) scale(.9)}}
@media(min-width:1600px){.hero-shoe.is-cutout{--hero-photo-scale:1.28;animation-name:hero-cutout-float-wide}@keyframes hero-cutout-float-wide{0%,100%{transform:translate3d(0,0,0) rotate(-11deg) scale(1.28)}50%{transform:translate3d(0,-9px,0) rotate(-9deg) scale(1.28)}}}
@media(prefers-reduced-motion:reduce){html:not(.motion-allowed) .hero-shoe.is-cutout{animation:none!important;transform:rotate(-10deg) scale(.9)}html:not(.motion-allowed) .hero-shoe.is-changing{animation:none!important;filter:none}}
@media(prefers-reduced-motion:reduce) and (max-width:760px){html:not(.motion-allowed) .hero-shoe.is-cutout{transform:rotate(-10deg) scale(.9)}}
@media(prefers-reduced-motion:reduce) and (min-width:761px) and (max-width:1100px){html:not(.motion-allowed) .hero-shoe.is-cutout{transform:rotate(-10deg) scale(.82)}}
@media(prefers-reduced-motion:reduce) and (min-width:1600px){html:not(.motion-allowed) .hero-shoe.is-cutout{transform:rotate(-10deg) scale(1.28)}}
/* The on-page motion control is the visitor's explicit choice to play the hero. */
html.motion-allowed .hero .orbit-one{animation:orbit-spin 18s linear infinite!important}
html.motion-allowed .hero .orbit-two{animation:orbit-spin-reverse 23s linear infinite!important}
html.motion-allowed .hero .shoe-shadow{animation:shadow 5s ease-in-out infinite!important}
.hero-visual.is-transitioning .orbit-one{animation-duration:4.4s!important}
.hero-visual.is-transitioning .orbit-two{animation-duration:5.6s!important}

/* A calm, continuous product motion with a soft change between featured pairs. */
@keyframes hero-cutout-float-smooth {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-11deg) scale(var(--hero-photo-scale, .9)); }
  50% { transform: translate3d(0, -8px, 0) rotate(-9.5deg) scale(var(--hero-photo-scale, .9)); }
}
@keyframes hero-product-enter-smooth {
  from { opacity: .35; transform: translate3d(24px, 3px, 0) rotate(-12deg) scale(var(--hero-photo-scale, .9)); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(-11deg) scale(var(--hero-photo-scale, .9)); }
}
.hero-shoe.is-cutout { animation: hero-cutout-float-smooth 8.4s ease-in-out infinite !important; }
.hero-shoe.is-changing { animation: hero-product-enter-smooth 1.05s cubic-bezier(.22, .68, .2, 1) both !important; }
html.motion-allowed .hero .orbit-one { animation: orbit-spin 28s linear infinite !important; }
html.motion-allowed .hero .orbit-two { animation: orbit-spin-reverse 35s linear infinite !important; }
html.motion-allowed .hero .shoe-shadow { animation: shadow 7.5s ease-in-out infinite !important; }
.hero-visual.is-transitioning .orbit-one,
.hero-visual.is-transitioning .orbit-two { animation-duration: 28s !important; }
@keyframes shoe-hover-smooth {
  0%, 100% { transform: translate3d(var(--shoe-x, 0vw), var(--shoe-y, 0vh), 0) rotateX(var(--shoe-rx, 0deg)) rotateY(var(--shoe-ry, 0deg)) rotateZ(var(--shoe-r, -9deg)) scale(1); }
  50% { transform: translate3d(var(--shoe-x, 0vw), calc(var(--shoe-y, 0vh) - 7px), 0) rotateX(var(--shoe-rx, 0deg)) rotateY(var(--shoe-ry, 0deg)) rotateZ(calc(var(--shoe-r, -9deg) + 1deg)) scale(1); }
}
.motion-allowed .journey-shoe.catalog-shot { animation: shoe-hover-smooth 8s ease-in-out infinite !important; }
.motion-allowed .journey-shoe.catalog-shot.is-changing {
  animation: shoe-cinematic-cut 1.05s cubic-bezier(.22, .68, .2, 1) both,
    shoe-hover-smooth 8s ease-in-out 1.05s infinite !important;
}
@media (prefers-reduced-motion: reduce) {
  html.motion-allowed .hero-shoe.is-cutout { animation-duration: 12s !important; }
  html.motion-allowed .journey-shoe.catalog-shot { animation-duration: 12s !important; }
}

/* Clear stock and delivery guidance, without implying live inventory counts. */
.product-info .price-row { flex-wrap: wrap; row-gap: 6px; }
.product-info .stock-status { flex: 0 0 100%; width: 100%; margin-top: 1px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.detail-copy .availability-note { margin: 0 0 10px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.steps p { max-width: 34ch; }
.checkout-form small { display: block; }
/* Centered white SHULS emblem with restrained orbital graphics behind the hero shoe. */
.hero-visual:before,.hero-visual:after{content:"";position:absolute;z-index:0;top:50%;left:50%;width:clamp(330px,39vw,560px);aspect-ratio:1;border:1px solid rgba(255,255,255,.2);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%)}
.hero-visual:before{background:radial-gradient(circle,rgba(255,255,255,.14),rgba(255,255,255,.055) 37%,transparent 69%);box-shadow:0 0 0 18px rgba(255,255,255,.025),0 0 85px rgba(169,199,255,.13);animation:shuls-brand-aura 6.8s ease-in-out infinite}
.hero-visual:after{width:clamp(300px,35vw,500px);border-style:dashed;border-color:rgba(255,255,255,.23);animation:shuls-brand-ring 34s linear infinite}
.hero-visual .hero-brand-mark{position:absolute;z-index:1;top:50%;left:50%;width:clamp(290px,35vw,500px);max-height:82%;height:auto;object-fit:contain;opacity:.72;filter:drop-shadow(0 0 32px rgba(255,255,255,.38));pointer-events:none;user-select:none;transform-origin:center;will-change:transform,opacity;animation:shuls-brand-intro 1.2s cubic-bezier(.18,.72,.22,1) both,shuls-brand-orbit 8.4s ease-in-out 1.2s infinite}
.hero-visual .orbit{z-index:2}
.hero-visual .visual-top{z-index:4}
.hero-visual .hero-shoe{z-index:3}
@keyframes shuls-brand-intro{0%{opacity:0;filter:blur(12px) drop-shadow(0 0 0 rgba(255,255,255,0));transform:translate(-50%,-50%) rotate(-12deg) scale(.68)}100%{opacity:.72;filter:drop-shadow(0 0 32px rgba(255,255,255,.38));transform:translate(-50%,-50%) rotate(-3deg) scale(1)}}
@keyframes shuls-brand-orbit{0%,100%{opacity:.66;transform:translate(-50%,-50%) rotate(-3deg) scale(1)}50%{opacity:.78;transform:translate(-50%,-50%) rotate(1deg) scale(1.035)}}
@keyframes shuls-brand-aura{0%,100%{opacity:.55;scale:.96}50%{opacity:1;scale:1.035}}
@keyframes shuls-brand-ring{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(max-width:760px){.hero-visual:before{width:min(78vw,350px)}.hero-visual:after{width:min(70vw,310px)}.hero-visual .hero-brand-mark{width:min(60vw,260px);max-height:72%;animation:shuls-brand-intro-mobile 1.05s cubic-bezier(.18,.72,.22,1) both,shuls-brand-orbit-mobile 7s ease-in-out 1.05s infinite}.hero-visual .visual-top{z-index:4}}
@keyframes shuls-brand-intro-mobile{0%{opacity:0;filter:blur(10px);transform:translate(-50%,-50%) rotate(-10deg) scale(.7)}100%{opacity:.72;filter:drop-shadow(0 0 25px rgba(255,255,255,.38));transform:translate(-50%,-50%) rotate(-3deg) scale(1)}}
@keyframes shuls-brand-orbit-mobile{0%,100%{opacity:.66;transform:translate(-50%,-50%) rotate(-3deg) scale(1)}50%{opacity:.78;transform:translate(-50%,-50%) rotate(1deg) scale(1.035)}}
@media(prefers-reduced-motion:reduce){html:not(.motion-allowed) .hero-visual:before,html:not(.motion-allowed) .hero-visual:after,html:not(.motion-allowed) .hero-visual .hero-brand-mark{animation:none!important;transition:none!important}html:not(.motion-allowed) .hero-visual .hero-brand-mark{opacity:.72;transform:translate(-50%,-50%) rotate(-3deg)}}