.flavor-slider{position:relative;width:100%;overflow:hidden;background:#6773dd;border-radius:0;aspect-ratio:16/6;max-height:600px;-webkit-user-select:none;user-select:none}
.theme_header_slider{margin:0;padding:0;line-height:0;background-color:#6773dd}
.fs-track{position:relative;width:100%;height:100%}
.fs-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s ease;--fs-trans-dur:.7s;--fs-kb-dur:6s}
.fs-slide.active{opacity:1;visibility:visible}

/* FIX #3: entrance transitions for the incoming slide (class set by slider.js).
   Naming: slide-left = content moves left (enters from right), etc. */
.fs-slide.fs-trans-slide-left{animation:fsTransSlideLeft var(--fs-trans-dur) ease both}
.fs-slide.fs-trans-slide-right{animation:fsTransSlideRight var(--fs-trans-dur) ease both}
.fs-slide.fs-trans-slide-top{animation:fsTransSlideTop var(--fs-trans-dur) ease both}
.fs-slide.fs-trans-slide-bottom{animation:fsTransSlideBottom var(--fs-trans-dur) ease both}
.fs-slide.fs-trans-zoom-in{animation:fsTransZoomIn var(--fs-trans-dur) ease both}
.fs-slide.fs-trans-zoom-out{animation:fsTransZoomOut var(--fs-trans-dur) ease both}
.fs-slide.fs-trans-blur{animation:fsTransBlur var(--fs-trans-dur) ease both}
.fs-slide.fs-trans-kenburns{animation:fsKenBurns var(--fs-kb-dur) ease-out both}
@keyframes fsTransSlideLeft{from{opacity:0;transform:translateX(8%)}to{opacity:1;transform:translateX(0)}}
@keyframes fsTransSlideRight{from{opacity:0;transform:translateX(-8%)}to{opacity:1;transform:translateX(0)}}
@keyframes fsTransSlideTop{from{opacity:0;transform:translateY(8%)}to{opacity:1;transform:translateY(0)}}
@keyframes fsTransSlideBottom{from{opacity:0;transform:translateY(-8%)}to{opacity:1;transform:translateY(0)}}
@keyframes fsTransZoomIn{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}
@keyframes fsTransZoomOut{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes fsTransBlur{from{opacity:0;filter:blur(12px)}to{opacity:1;filter:blur(0)}}
@keyframes fsKenBurns{from{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(1.12)}}

@media (prefers-reduced-motion:reduce){
    .fs-slide,.fs-slide[class*="fs-trans-"]{animation:none!important;transition:none!important}
    .fs-layer{animation:none!important;opacity:1!important}
}
.fs-slide-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1}

/* LCP image: real <img> under the layers (CSS background stays as fallback) */
.fs-lcp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

.fs-layer{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0}
.fs-slide.active .fs-layer{animation-fill-mode:both}

.fs-layer-heading{font-family:'Nunito',sans-serif;white-space:nowrap}
.fs-layer-text{max-width:60%;white-space:normal}
.fs-layer-button{display:inline-block;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .25s,color .25s,transform .25s}
.fs-layer-button:hover{transform:translate(-50%,-50%) scale(1.05)}
.fs-layer-image img{display:block;max-width:100%;height:auto}

.fs-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.35);color:#fff;border:none;font-size:32px;width:48px;height:48px;border-radius:50%;cursor:pointer;opacity:0;transition:opacity .25s,background .25s;z-index:10;display:flex;align-items:center;justify-content:center}
.flavor-slider:hover .fs-arrow{opacity:1}
.fs-arrow:hover{background:rgba(0,0,0,.6)}
.fs-prev{left:12px}
.fs-next{right:12px}

.fs-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:4px;z-index:10;background:rgba(0,0,0,.4);padding:6px 10px;border-radius:20px;backdrop-filter:blur(6px)}
.fs-dot{border:2px solid rgba(255,255,255,.4);background:transparent;cursor:pointer;transition:all .25s;padding:5px 14px;border-radius:14px;color:rgba(255,255,255,.7);font-size:12px;font-weight:600;font-family:'Nunito',sans-serif;white-space:nowrap;line-height:1.2}
.fs-dot:hover{border-color:rgba(255,255,255,.8);color:#fff}
.fs-dot.active{background:#81da9e;border-color:#81da9e;color:#fff}

.fs-progress{position:absolute;bottom:0;left:0;width:100%;height:3px;background:rgba(255,255,255,.15);z-index:10}
.fs-progress-bar{height:100%;background:#81da9e;width:0;transition:width linear}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translate(-50%,-30%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes fadeInDown{from{opacity:0;transform:translate(-50%,-70%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes fadeInLeft{from{opacity:0;transform:translate(-80%,-50%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes fadeInRight{from{opacity:0;transform:translate(-20%,-50%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes zoomIn{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes zoomOut{from{opacity:0;transform:translate(-50%,-50%) scale(1.3)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes rotateIn{from{opacity:0;transform:translate(-50%,-50%) rotate(-15deg) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}}
@keyframes slideInUp{from{transform:translate(-50%,100%)}to{transform:translate(-50%,-50%)}}
@keyframes slideInDown{from{transform:translate(-50%,-100%)}to{transform:translate(-50%,-50%)}}
@keyframes blurIn{from{opacity:0;filter:blur(10px)}to{opacity:1;filter:blur(0)}}

.fs-layer[data-anim="fadeIn"]{animation-name:fadeIn}
.fs-layer[data-anim="fadeInUp"]{animation-name:fadeInUp}
.fs-layer[data-anim="fadeInDown"]{animation-name:fadeInDown}
.fs-layer[data-anim="fadeInLeft"]{animation-name:fadeInLeft}
.fs-layer[data-anim="fadeInRight"]{animation-name:fadeInRight}
.fs-layer[data-anim="zoomIn"]{animation-name:zoomIn}
.fs-layer[data-anim="zoomOut"]{animation-name:zoomOut}
.fs-layer[data-anim="rotateIn"]{animation-name:rotateIn}
.fs-layer[data-anim="slideInUp"]{animation-name:slideInUp}
.fs-layer[data-anim="slideInDown"]{animation-name:slideInDown}
.fs-layer[data-anim="blurIn"]{animation-name:blurIn}

.fs-layer[data-anim="none"]{opacity:1;animation:none}

.fs-slide-enter{animation:fsSlideIn .6s ease forwards}
.fs-slide-exit{animation:fsSlideOut .6s ease forwards}
@keyframes fsSlideIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}
@keyframes fsSlideOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.97)}}

@media(max-width:768px){
    .flavor-slider{aspect-ratio:16/9}
    .fs-arrow{width:36px;height:36px;font-size:24px}
    /* FIX #6: dots contain slide titles — 10px circles clipped the text.
       Keep readable pills, allow horizontal scroll on narrow screens. */
    .fs-dots{max-width:92%;overflow-x:auto;padding:4px 8px;gap:6px;scrollbar-width:none}
    .fs-dots::-webkit-scrollbar{display:none}
    .fs-dot{padding:4px 10px;font-size:11px;flex:none}
    .fs-layer-heading{font-size:24px!important}
    .fs-layer-text{max-width:80%;font-size:14px!important}
    .fs-layer-button{font-size:14px!important;padding:10px 30px!important}
}