/* Carousel — manual control, swipe + keyboard, ARIA. Used on tour videos
   and the MySuite app cards. Self-contained stylesheet; no rules here
   collide with the existing marketing/tour CSS. */
.carousel{position:relative;overflow:visible;padding:0 56px}
@media(max-width:780px){.carousel{padding:0 44px}}
.carousel-viewport{overflow:hidden;position:relative;border-radius:var(--r-lg,14px)}
.carousel-track{display:flex;transition:transform .5s cubic-bezier(.16,1,.3,1);will-change:transform;touch-action:pan-y}
.carousel-track[data-no-transition]{transition:none}
.carousel-slide{flex:0 0 100%;min-width:0;padding:0 8px;box-sizing:border-box;list-style:none}
.carousel-slide > *{height:100%}
/* Per-view breakpoints. Set data-per-view on the .carousel root. */
.carousel[data-per-view="2"] .carousel-slide{flex:0 0 50%}
.carousel[data-per-view="3"] .carousel-slide{flex:0 0 33.3333%}
@media(max-width:780px){
  .carousel[data-per-view="2"] .carousel-slide,
  .carousel[data-per-view="3"] .carousel-slide{flex:0 0 100%}
}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:rgba(4,33,31,.82);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:18px;cursor:pointer;z-index:5;display:grid;place-items:center;backdrop-filter:blur(10px);transition:background .2s,border-color .2s,transform .18s}
.carousel-btn:hover{background:rgba(13,148,136,.85);border-color:rgba(45,212,191,.5);transform:translateY(-50%) scale(1.05)}
.carousel-btn[disabled]{opacity:.3;cursor:not-allowed;pointer-events:none}
.carousel-btn:focus-visible{outline:2px solid var(--teal-400,#2dd4bf);outline-offset:3px}
.carousel-btn--prev{left:6px}
.carousel-btn--next{right:6px}
.carousel-dots{display:flex;justify-content:center;gap:7px;margin-top:22px}
.carousel-dot{width:8px;height:8px;border-radius:50%;background:rgba(15,23,42,.2);border:none;cursor:pointer;padding:0;transition:background .2s,transform .2s}
.carousel-dot[aria-current="true"]{background:var(--teal-600,#0d9488);transform:scale(1.3)}
.carousel-dot:hover{background:rgba(13,148,136,.55)}
.dark .carousel-dot{background:rgba(255,255,255,.18)}
.dark .carousel-dot[aria-current="true"]{background:var(--teal-300,#5eead4)}
.carousel-dot:focus-visible{outline:2px solid var(--teal-400,#2dd4bf);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.carousel-track{transition:none!important}}