/* Complete, stationary scenes with a gentle crossfade. */
.carousel-ready .belt-sequence{display:block;position:relative;transform:none!important;will-change:auto}
.carousel-ready .belt-scene{position:absolute;inset:0;width:100%;height:100%;margin:0!important;mask-image:none!important;-webkit-mask-image:none!important;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .85s ease,visibility .85s}
.carousel-ready .belt-scene.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:1}
.hero-pagination{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;padding:12px 5%;min-height:76px;background:#f6f8f5;border-bottom:1px solid #d2dfd8}
.hero-pages{display:flex;align-items:center;gap:2px}
.hero-pagination .hero-arrow{display:grid;place-items:center;width:46px;height:46px;border:1px solid #b8ccc1;border-radius:50%;background:white;color:#163c32;font-size:23px;cursor:pointer;transition:background .2s,color .2s}
.hero-pagination .hero-arrow:hover{background:#163c32;color:white}
.hero-pagination .hero-dot{width:32px;height:44px;cursor:pointer;border-radius:8px}
.hero-pagination .hero-dot:after{width:8px;height:8px;transition:width .25s,background .25s;border-radius:8px}
.hero-pagination .hero-dot[aria-current=true]:after{width:24px;transform:none;box-shadow:none;background:#006956}
.hero-counter{font:600 13px Arial,sans-serif;font-variant-numeric:tabular-nums;color:#40584e;white-space:nowrap;margin:0 8px}
.hero-pagination .belt-toggle{position:static!important;min-height:44px!important;height:auto!important;padding:10px 16px!important;font-size:12px!important;color:#163c32;background:transparent;border:1px solid #b8ccc1;box-shadow:none;cursor:pointer;border-radius:24px}
.hero-pagination .belt-toggle:before{display:none}
.hero-pagination button:focus-visible,.belt-window:focus-visible,.belt-scene button:focus-visible{outline:3px solid #d49926;outline-offset:3px}
.hero .hero-message{padding-right:5%}
/* Match the panorama instead of letterboxing it inside a fixed-height banner. */
.hero .hero-belt.carousel-ready{height:auto!important;min-height:0!important;aspect-ratio:3 / 1;max-height:none}
.carousel-ready .belt-scene>picture>img,.carousel-ready .belt-scene.inspecting>picture>img{object-fit:cover!important}
@media(max-width:720px){
  .hero .hero-message{position:relative;padding:22px 24px;font-size:26px;background:#163c32}
  .hero .hero-belt.carousel-ready{height:calc(100vw * 2 / 3 + 224px)!important;aspect-ratio:auto}
  .hero-pagination{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:6px;padding:10px 16px}
  .hero-pagination .hero-arrow:first-child{grid-column:1;grid-row:1}
  .hero-pagination .hero-arrow:nth-child(3){grid-column:3;grid-row:1}
  .hero-pages{grid-column:2;grid-row:1;justify-content:center;gap:0;min-width:0}
  .hero-pagination .hero-arrow{width:44px;height:44px}
  .hero-pagination .hero-dot{width:28px;min-width:0;flex:0 1 28px}
  .hero-counter{grid-column:1;grid-row:2;margin:0;font-size:12px}
  .hero-pagination .belt-toggle{grid-column:2 / 4;grid-row:2;justify-self:end;margin:2px 0}
  .carousel-ready .belt-scene figcaption{left:16px;right:16px;bottom:16px;width:auto;max-width:none!important;padding:14px 16px}
  .carousel-ready .belt-scene figcaption>span{font-size:19px;line-height:1.3;margin-bottom:8px}
  .carousel-ready .belt-scene figcaption button{font-size:16px;min-height:56px}
  .carousel-ready .garment-card{top:12px;right:12px;max-width:220px}
}
@media(prefers-reduced-motion:reduce){.carousel-ready .belt-scene,.hero-pagination *{transition:none!important}}