/* Amazing slider — 14 transitions x 6 layouts, container-query responsive.
   Engine contract (see storefront-amazing-slider.js):
   - non-active slides sit in the "enter-from" state (base rule)
   - .is-active is the resting state
   - .is-leaving is the "exit-to" state while the slide fades out
   - root carries --amz-s (+1/-1 horizontal sign, RTL aware), --amz-v (vertical sign) and data-s / data-v */
.sf-amz{--amz-speed:.9s;--amz-ease:cubic-bezier(.65,0,.35,1);--amz-s:1;--amz-v:1;--amz-radius:1rem;--amz-ratio:24/9;
    --amz-ink:#fff;--amz-accent:var(--brand-600,#0f766e);
    position:relative;width:100%;container-type:inline-size;container-name:amz}
.sf-amz,.sf-amz *{box-sizing:border-box}
.sf-amz__body{display:block}
.sf-amz__stage{position:relative;overflow:hidden;border-radius:var(--amz-radius);aspect-ratio:var(--amz-ratio);background:#e2e8f0;isolation:isolate;perspective:1600px;touch-action:pan-y}

/* ---------- slides: base = enter-from ---------- */
.sf-amz__slide{position:absolute;inset:0;z-index:0;visibility:hidden;opacity:0;overflow:hidden;backface-visibility:hidden;transition:none}
.sf-amz__slide.is-active,.sf-amz__slide.is-leaving{visibility:visible;transition:opacity var(--amz-speed) var(--amz-ease),transform var(--amz-speed) var(--amz-ease),clip-path var(--amz-speed) var(--amz-ease),filter var(--amz-speed) var(--amz-ease),visibility 0s}
.sf-amz[data-effect] .sf-amz__slide.is-active{opacity:1;z-index:2;transform:none;clip-path:none;filter:none}
.sf-amz[data-effect] .sf-amz__slide.is-leaving{z-index:1}
.sf-amz.is-reset .sf-amz__slide,.sf-amz.is-reset .sf-amz__slide *{transition:none!important}
.sf-amz__media{position:absolute;inset:0;overflow:hidden}
.sf-amz__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}

/* ---------- 14 effects ---------- */
/* 1 fade (default) */
/* 2 slide */
.sf-amz[data-effect="slide"] .sf-amz__slide{opacity:1;transform:translate3d(calc(var(--amz-s) * 100%),0,0)}
.sf-amz[data-effect="slide"] .sf-amz__slide.is-leaving{transform:translate3d(calc(var(--amz-s) * -100%),0,0)}
/* 3 slide-up */
.sf-amz[data-effect="slide_up"] .sf-amz__slide{opacity:1;transform:translate3d(0,calc(var(--amz-v) * 100%),0)}
.sf-amz[data-effect="slide_up"] .sf-amz__slide.is-leaving{transform:translate3d(0,calc(var(--amz-v) * -100%),0)}
/* 4 zoom in */
.sf-amz[data-effect="zoom"] .sf-amz__slide{transform:scale(1.18)}
.sf-amz[data-effect="zoom"] .sf-amz__slide.is-leaving{transform:scale(.94)}
/* 5 zoom out */
.sf-amz[data-effect="zoom_out"] .sf-amz__slide{transform:scale(.8)}
.sf-amz[data-effect="zoom_out"] .sf-amz__slide.is-leaving{transform:scale(1.2)}
/* 6 ken burns: crossfade + slow drift on the photo */
.sf-amz[data-effect="kenburns"] .sf-amz__slide.is-active .sf-amz__media img,
.sf-amz[data-effect="kenburns"] .sf-amz__slide.is-leaving .sf-amz__media img{animation:amzKenBurns calc(var(--amz-interval,5000ms) + 2s) ease-out forwards}
@keyframes amzKenBurns{from{transform:scale(1)}to{transform:scale(1.16) translate3d(calc(var(--amz-s) * -2%),-1.5%,0)}}
/* 7 flip (3D) */
.sf-amz[data-effect="flip"] .sf-amz__slide{transform:rotateY(calc(var(--amz-s) * 90deg))}
.sf-amz[data-effect="flip"] .sf-amz__slide.is-leaving{transform:rotateY(calc(var(--amz-s) * -90deg))}
/* 8 stacked cards */
.sf-amz[data-effect="stack"] .sf-amz__slide{transform:translate3d(calc(var(--amz-s) * 55%),0,0) scale(.86) rotate(calc(var(--amz-s) * 4deg))}
.sf-amz[data-effect="stack"] .sf-amz__slide.is-leaving{transform:translate3d(calc(var(--amz-s) * -25%),0,0) scale(.9) rotate(calc(var(--amz-s) * -3deg))}
/* 9 wipe: new slide is revealed by a moving edge; old one stays underneath */
.sf-amz[data-effect="wipe"] .sf-amz__slide{opacity:1;clip-path:inset(0 0 0 100%)}
.sf-amz[data-effect="wipe"][data-s="-1"] .sf-amz__slide{clip-path:inset(0 100% 0 0)}
.sf-amz[data-effect="wipe"] .sf-amz__slide.is-active{clip-path:inset(0 0 0 0)}
.sf-amz[data-effect="wipe"] .sf-amz__slide.is-leaving{clip-path:inset(0)}
/* 10 circle reveal */
.sf-amz[data-effect="circle"] .sf-amz__slide{opacity:1;clip-path:circle(0% at 50% 50%)}
.sf-amz[data-effect="circle"] .sf-amz__slide.is-active{clip-path:circle(150% at 50% 50%)}
.sf-amz[data-effect="circle"] .sf-amz__slide.is-leaving{clip-path:circle(150% at 50% 50%)}
/* 11 blur dissolve */
.sf-amz[data-effect="blur"] .sf-amz__slide{filter:blur(26px);transform:scale(1.06)}
.sf-amz[data-effect="blur"] .sf-amz__slide.is-leaving{filter:blur(26px);transform:scale(1.02)}
/* 12 rotate */
.sf-amz[data-effect="rotate"] .sf-amz__slide{transform:rotate(calc(var(--amz-s) * 6deg)) scale(1.28)}
.sf-amz[data-effect="rotate"] .sf-amz__slide.is-leaving{transform:rotate(calc(var(--amz-s) * -6deg)) scale(.82)}
/* 13 curtain: opens from the centre line */
.sf-amz[data-effect="curtain"] .sf-amz__slide{opacity:1;clip-path:inset(0 50% 0 50%)}
.sf-amz[data-effect="curtain"] .sf-amz__slide.is-active{clip-path:inset(0 0 0 0)}
.sf-amz[data-effect="curtain"] .sf-amz__slide.is-leaving{clip-path:inset(0)}
/* 14 parallax: frame and photo travel at different speeds */
.sf-amz[data-effect="parallax"] .sf-amz__slide{opacity:1;transform:translate3d(calc(var(--amz-s) * 100%),0,0)}
.sf-amz[data-effect="parallax"] .sf-amz__slide.is-leaving{transform:translate3d(calc(var(--amz-s) * -100%),0,0)}
.sf-amz[data-effect="parallax"] .sf-amz__media img{transform:translate3d(calc(var(--amz-s) * -16%),0,0) scale(1.3);transition:transform var(--amz-speed) var(--amz-ease)}
.sf-amz[data-effect="parallax"] .sf-amz__slide.is-active .sf-amz__media img{transform:translate3d(0,0,0) scale(1.3)}
.sf-amz[data-effect="parallax"] .sf-amz__slide.is-leaving .sf-amz__media img{transform:translate3d(calc(var(--amz-s) * 16%),0,0) scale(1.3)}

/* ---------- caption ---------- */
.sf-amz__slide.has-caption::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to left,rgba(8,15,25,.78),rgba(8,15,25,.28) 55%,transparent)}
.sf-amz[data-rtl="0"] .sf-amz__slide.has-caption::after{background:linear-gradient(to right,rgba(8,15,25,.78),rgba(8,15,25,.28) 55%,transparent)}
.sf-amz[data-align="end"] .sf-amz__slide.has-caption::after{background:linear-gradient(to right,rgba(8,15,25,.78),rgba(8,15,25,.28) 55%,transparent)}
.sf-amz[data-align="end"][data-rtl="0"] .sf-amz__slide.has-caption::after{background:linear-gradient(to left,rgba(8,15,25,.78),rgba(8,15,25,.28) 55%,transparent)}
.sf-amz[data-align="center"] .sf-amz__slide.has-caption::after{background:linear-gradient(to top,rgba(8,15,25,.8),rgba(8,15,25,.3) 60%,rgba(8,15,25,.1))}
.sf-amz__caption{position:absolute;z-index:2;top:0;bottom:0;inset-inline-start:0;display:flex;flex-direction:column;justify-content:center;gap:.55rem;
    width:min(100%,44rem);padding:clamp(1rem,4cqi,3rem) clamp(3.75rem,8cqi,5.5rem);color:var(--amz-ink)}
.sf-amz[data-align="end"] .sf-amz__caption{inset-inline-start:auto;inset-inline-end:0}
.sf-amz[data-align="center"] .sf-amz__caption{inset-inline:0;margin-inline:auto;align-items:center;text-align:center}
.sf-amz__caption h2{margin:0;font-size:clamp(1.15rem,4.4cqi,2.9rem);font-weight:850;line-height:1.18;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.sf-amz__caption p{margin:0;font-size:clamp(.8rem,1.9cqi,1.2rem);line-height:1.7;opacity:.94;max-width:34rem}
.sf-amz__caption a{align-self:flex-start;display:inline-flex;align-items:center;margin-top:.35rem;padding:.7em 1.4em;border-radius:999px;background:#fff;color:#0f172a;
    font-size:clamp(.75rem,1.6cqi,1rem);font-weight:800;text-decoration:none;box-shadow:0 10px 30px -12px rgba(0,0,0,.5);transition:transform .2s,box-shadow .2s}
.sf-amz[data-align="center"] .sf-amz__caption a{align-self:center}
.sf-amz__caption a:hover{transform:translateY(-2px)}
.sf-amz__caption>*{opacity:0;transform:translate3d(0,18px,0);transition:opacity .6s ease,transform .6s ease}
.sf-amz__slide.is-active .sf-amz__caption>*{opacity:1;transform:none;transition-delay:.35s}
.sf-amz__slide.is-active .sf-amz__caption>*:nth-child(2){transition-delay:.45s}
.sf-amz__slide.is-active .sf-amz__caption>*:nth-child(3){transition-delay:.55s}
.sf-amz[data-effect="parallax"] .sf-amz__caption>*{transform:translate3d(calc(var(--amz-s) * 60px),0,0)}
.sf-amz[data-effect="parallax"] .sf-amz__slide.is-active .sf-amz__caption>*{transform:none}

/* ---------- controls ---------- */
.sf-amz__arrow{position:absolute;top:50%;z-index:5;width:2.7rem;height:2.7rem;margin-top:-1.35rem;display:grid;place-items:center;border:0;border-radius:50%;
    background:rgba(255,255,255,.88);color:#0f172a;font-size:1.5rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .25s,transform .2s,background .2s;backdrop-filter:blur(8px)}
.sf-amz__arrow:hover{background:#fff;transform:scale(1.07)}
.sf-amz__stage:hover .sf-amz__arrow,.sf-amz:focus-within .sf-amz__arrow{opacity:1}
.sf-amz__arrow--prev{inset-inline-start:.8rem}
.sf-amz__arrow--next{inset-inline-end:.8rem}
.sf-amz[data-rtl="0"] .sf-amz__arrow span{display:inline-block;transform:scaleX(-1)}
.sf-amz__dots{position:absolute;z-index:5;bottom:.9rem;inset-inline:0;margin-inline:auto;width:max-content;max-width:90%;display:flex;gap:.45rem;padding:.4rem .7rem;border-radius:999px;background:rgba(8,15,25,.35);backdrop-filter:blur(8px)}
.sf-amz__dot{width:.55rem;height:.55rem;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.55);cursor:pointer;transition:width .3s,background .3s}
.sf-amz__dot.is-active{width:1.6rem;background:#fff}
.sf-amz__bar{position:absolute;z-index:5;inset-inline:0;bottom:0;height:3px;background:rgba(255,255,255,.25)}
.sf-amz__bar>span{display:block;height:100%;background:var(--amz-accent);background:#fff;transform-origin:right center;transform:scaleX(0)}
.sf-amz[data-rtl="0"] .sf-amz__bar>span{transform-origin:left center}
.sf-amz[data-nav="dots"] .sf-amz__arrow,.sf-amz[data-nav="none"] .sf-amz__arrow{display:none}
.sf-amz[data-nav="arrows"] .sf-amz__dots,.sf-amz[data-nav="none"] .sf-amz__dots{display:none}

/* ---------- thumbnails ---------- */
.sf-amz__thumbs{display:flex;gap:.55rem;margin-top:.7rem;overflow-x:auto;padding:.15rem .1rem .3rem;scrollbar-width:thin}
.sf-amz__thumb{flex:0 0 auto;width:clamp(4.5rem,13cqi,7rem);aspect-ratio:16/10;padding:0;border:2px solid transparent;border-radius:.6rem;overflow:hidden;background:#e2e8f0;opacity:.55;cursor:pointer;transition:opacity .25s,border-color .25s,transform .25s}
.sf-amz__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sf-amz__thumb:hover{opacity:.9}
.sf-amz__thumb.is-active{opacity:1;border-color:var(--amz-accent);transform:translateY(-2px)}

/* ---------- layouts ---------- */
/* classic: defaults above */
/* cinematic */
.sf-amz[data-layout="cinematic"]{--amz-ratio:21/9;--amz-radius:0}
.sf-amz[data-layout="cinematic"] .sf-amz__caption h2{font-size:clamp(1.3rem,5.4cqi,3.6rem)}
.sf-amz[data-layout="cinematic"] .sf-amz__arrow{opacity:1;background:rgba(8,15,25,.4);color:#fff}
.sf-amz[data-layout="cinematic"] .sf-amz__thumbs,.sf-amz[data-layout="minimal"] .sf-amz__thumbs,.sf-amz[data-layout="split"] .sf-amz__thumbs{display:none}
/* minimal strip */
.sf-amz[data-layout="minimal"]{--amz-ratio:32/9;--amz-radius:.75rem}
.sf-amz[data-layout="minimal"] .sf-amz__caption{padding:.75rem clamp(3.75rem,8cqi,5.5rem)}
.sf-amz[data-layout="minimal"] .sf-amz__caption h2{font-size:clamp(1rem,3cqi,1.9rem)}
.sf-amz[data-layout="minimal"] .sf-amz__caption p{display:none}
/* split: text panel + photo */
.sf-amz[data-layout="split"]{--amz-ratio:16/7}
.sf-amz[data-layout="split"] .sf-amz__slide{display:grid;grid-template-columns:1fr 1fr;background:linear-gradient(135deg,var(--brand-700,#0f3d3a),var(--brand-900,#082524))}
.sf-amz[data-layout="split"] .sf-amz__slide::after{display:none}
.sf-amz[data-layout="split"] .sf-amz__media{position:relative;inset:auto;order:2}
.sf-amz[data-layout="split"] .sf-amz__caption{position:relative;inset:auto;order:1;width:auto;justify-content:center}
.sf-amz[data-layout="split"] .sf-amz__caption h2{font-size:clamp(1.1rem,3.6cqi,2.5rem)}
.sf-amz[data-layout="split"] .sf-amz__dots{inset-inline:auto;inset-inline-start:2rem;margin:0}
/* thumbs on the side */
.sf-amz[data-layout="thumbs_side"] .sf-amz__body{display:grid;grid-template-columns:minmax(0,1fr) clamp(5.5rem,16cqi,9rem);gap:.75rem;align-items:stretch}
.sf-amz[data-layout="thumbs_side"] .sf-amz__thumbs{flex-direction:column;margin:0;overflow-y:auto;overflow-x:hidden;max-height:100%;padding:0}
.sf-amz[data-layout="thumbs_side"] .sf-amz__thumb{width:100%}
.sf-amz[data-layout="thumbs_side"]{--amz-ratio:16/8}
/* framed card with glass caption */
.sf-amz[data-layout="framed"]{padding:clamp(.5rem,2cqi,1rem);border-radius:calc(var(--amz-radius) + 1rem);background:linear-gradient(135deg,var(--brand-50,#f0fdfa),#fff);box-shadow:0 30px 70px -45px rgba(15,23,42,.55)}
.sf-amz[data-layout="framed"]{--amz-ratio:16/7;--amz-radius:1.25rem}
.sf-amz[data-layout="framed"] .sf-amz__slide.has-caption::after{display:none}
.sf-amz[data-layout="framed"] .sf-amz__caption{top:auto;bottom:clamp(.75rem,3cqi,1.75rem);inset-inline-start:clamp(.75rem,3cqi,1.75rem);width:min(calc(100% - 2rem),32rem);border-radius:1.1rem;
    padding:clamp(.85rem,2.6cqi,1.6rem);background:rgba(8,15,25,.42);backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.18)}
.sf-amz[data-layout="framed"][data-align="end"] .sf-amz__caption{inset-inline-start:auto;inset-inline-end:clamp(.75rem,3cqi,1.75rem)}
.sf-amz[data-layout="framed"][data-align="center"] .sf-amz__caption{inset-inline:0;margin-inline:auto}

/* ---------- responsive (container queries: works in the editor preview too) ---------- */
@container amz (max-width:760px){
    .sf-amz{--amz-ratio:16/9}
    .sf-amz[data-layout="cinematic"]{--amz-ratio:4/3}
    .sf-amz[data-layout="minimal"]{--amz-ratio:16/7}
    .sf-amz[data-layout="split"]{--amz-ratio:5/6}
    .sf-amz[data-layout="split"] .sf-amz__slide{grid-template-columns:1fr;grid-template-rows:52% 48%}
    .sf-amz[data-layout="split"] .sf-amz__media{order:1}
    .sf-amz[data-layout="split"] .sf-amz__caption{order:2}
    .sf-amz[data-layout="thumbs_side"] .sf-amz__body{display:block}
    .sf-amz[data-layout="thumbs_side"] .sf-amz__thumbs{flex-direction:row;overflow-x:auto;overflow-y:hidden;margin-top:.7rem}
    .sf-amz[data-layout="thumbs_side"] .sf-amz__thumb{width:clamp(4.5rem,22cqi,6.5rem)}
    .sf-amz[data-layout="framed"]{--amz-ratio:4/3}
    .sf-amz[data-layout="framed"] .sf-amz__arrow{top:30%}
}
@container amz (max-width:520px){
    .sf-amz__arrow{width:2.2rem;height:2.2rem;margin-top:-1.1rem;font-size:1.2rem;opacity:.9}
    .sf-amz__caption p{display:none}
    .sf-amz[data-layout="split"] .sf-amz__arrow{top:26%;margin-top:-1.1rem}
    .sf-amz[data-layout="split"] .sf-amz__dots{bottom:auto;top:calc(52% - 2rem)}
    .sf-amz[data-layout="split"] .sf-amz__caption{padding:.85rem 1.1rem;justify-content:flex-start;gap:.4rem}
    .sf-amz__dots{bottom:.55rem;padding:.3rem .5rem}
}
@media (hover:none){.sf-amz__arrow{opacity:.85}}
@media (prefers-reduced-motion:reduce){
    .sf-amz{--amz-speed:.01s}
    .sf-amz *,.sf-amz__caption>*{transition-duration:.01s!important;animation:none!important}
}
