/* ── YALOSHOP Hero Slider (v7.53) — dark/light, RTL, responsive ── */
#yalo-hero{ position:relative; overflow:hidden; height:var(--yhero-h); border-radius:0; isolation:isolate; }
@media (max-width:640px){ #yalo-hero{ height:var(--yhero-h-mob); } }
.yh-track{ height:100%; }
.yh-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; overflow:hidden; }
.yh-slide.is-active{ opacity:1; visibility:visible; z-index:2; }
.yh-slide.is-leaving{ opacity:0; visibility:visible; z-index:1; }
.yh-bg{ position:absolute; inset:0; z-index:0; }
.yh-bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.yh-overlay{ position:absolute; inset:0; z-index:1; }
.yh-content{ position:relative; z-index:3; height:100%; display:flex; flex-direction:column; justify-content:center;
    gap:clamp(12px,2.2vh,18px); padding:0 clamp(20px,6vw,80px); color:#fff; max-width:1200px; margin:0 auto; }
/* Alignment is PHYSICAL (what the admin picks on the visual grid is what
   renders): 'left' = left edge, 'right' = right edge — in BOTH directions.
   Under dir=rtl the flex main-axis is mirrored, so flex-start/-end must be
   swapped to keep the physical side; text-align uses physical keywords. */
.yh-content.al-center{ align-items:center; text-align:center; }
.yh-content.al-left{ align-items:flex-start; text-align:left; }
.yh-content.al-right{ align-items:flex-end; text-align:right; }
.yh-rtl .yh-content.al-left{ align-items:flex-end; }
.yh-rtl .yh-content.al-right{ align-items:flex-start; }
.yh-content.al-left .yh-btns{ justify-content:flex-start; }
.yh-content.al-right .yh-btns{ justify-content:flex-end; }
.yh-rtl .yh-content.al-left .yh-btns{ justify-content:flex-end; }
.yh-rtl .yh-content.al-right .yh-btns{ justify-content:flex-start; }
/* ── Whole-slide enter / exit transitions ── */
.yh-slide.is-active[data-sin="fade"]{ animation:yhSlIn-fade .7s both; }
.yh-slide.is-active[data-sin="slide"]{ animation:yhSlIn-slide .7s both; }
.yh-slide.is-active[data-sin="zoom"]{ animation:yhSlIn-zoom .7s both; }
.yh-slide.is-active[data-sin="cover"]{ animation:yhSlIn-cover .7s both; }
.yh-slide.is-active[data-sin="flip"]{ animation:yhSlIn-flip .7s both; }
.yh-slide.is-leaving[data-sout="fade"]{ animation:yhSlOut-fade .6s both; }
.yh-slide.is-leaving[data-sout="slide"]{ animation:yhSlOut-slide .6s both; }
.yh-slide.is-leaving[data-sout="zoom"]{ animation:yhSlOut-zoom .6s both; }
.yh-slide.is-leaving[data-sout="cover"]{ animation:yhSlOut-cover .6s both; }
.yh-slide.is-leaving[data-sout="flip"]{ animation:yhSlOut-flip .6s both; }
@keyframes yhSlIn-fade{ from{opacity:0} to{opacity:1} }
@keyframes yhSlOut-fade{ from{opacity:1} to{opacity:0} }
@keyframes yhSlIn-slide{ from{opacity:0;transform:translateX(60px)} to{opacity:1;transform:none} }
@keyframes yhSlOut-slide{ from{opacity:1;transform:none} to{opacity:0;transform:translateX(-60px)} }
.yh-rtl .yh-slide.is-active[data-sin="slide"]{ animation:yhSlIn-slideR .7s both; }
.yh-rtl .yh-slide.is-leaving[data-sout="slide"]{ animation:yhSlOut-slideR .6s both; }
@keyframes yhSlIn-slideR{ from{opacity:0;transform:translateX(-60px)} to{opacity:1;transform:none} }
@keyframes yhSlOut-slideR{ from{opacity:1;transform:none} to{opacity:0;transform:translateX(60px)} }
@keyframes yhSlIn-zoom{ from{opacity:0;transform:scale(1.12)} to{opacity:1;transform:none} }
@keyframes yhSlOut-zoom{ from{opacity:1;transform:none} to{opacity:0;transform:scale(.9)} }
@keyframes yhSlIn-cover{ from{opacity:.4;clip-path:inset(0 0 100% 0)} to{opacity:1;clip-path:inset(0 0 0 0)} }
@keyframes yhSlOut-cover{ from{opacity:1;clip-path:inset(0 0 0 0)} to{opacity:0;clip-path:inset(100% 0 0 0)} }
@keyframes yhSlIn-flip{ from{opacity:0;transform:perspective(1200px) rotateY(18deg)} to{opacity:1;transform:none} }
@keyframes yhSlOut-flip{ from{opacity:1;transform:none} to{opacity:0;transform:perspective(1200px) rotateY(-18deg)} }
@media (prefers-reduced-motion: reduce){ .yh-slide[data-sin],.yh-slide[data-sout]{ animation:none!important; } }
/* Badge + button follow the central Buttons family (--btn-radius), set
   in Settings → Store Identity → Corner Radius. They were pinned at
   999px, so the hero was the one surface that ignored the merchant's
   choice: pick square buttons and every CTA in the shop squared off
   EXCEPT the two most prominent ones, sitting above the fold.
   The badge is paired with the button deliberately — they read as one
   unit in the slide, and letting them diverge would look like a bug.
   The fallback keeps the shipped pill if the token is ever absent
   (e.g. this file previewed outside the storefront layout). */
.yh-badge{ isolation:isolate; display:inline-flex; align-items:center; padding:6px 16px; border-radius:var(--btn-radius, 999px); font-size:clamp(11px,1.4vw,13px);
    font-weight:800; letter-spacing:.3px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#fff; }
.yh-title{ margin:0; font-size:clamp(24px,4.6vw,52px); font-weight:900; line-height:1.18; letter-spacing:-.4px;
    text-shadow:0 2px 20px rgba(0,0,0,.35); max-width:min(34ch,100%); }
.yh-rtl .yh-title{ line-height:1.32; letter-spacing:0; }
.yh-content.al-center .yh-title{ max-width:min(38ch,100%); }
.yh-sub{ margin:0; font-size:clamp(13px,1.9vw,18px); font-weight:500; opacity:.95; line-height:1.6;
    max-width:min(64ch,100%); text-shadow:0 1px 10px rgba(0,0,0,.3); }
.yh-btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.yh-content.al-center .yh-btns{ justify-content:center; }
.yh-btn{ position:relative; display:inline-flex; align-items:center; gap:7px; padding:10px 20px; border-radius:var(--btn-radius, 999px); font-weight:800;
    font-size:clamp(12px,1.4vw,14px); text-decoration:none; cursor:pointer; border:1.5px solid transparent;
    transition:transform .2s, box-shadow .2s, background .2s; white-space:nowrap; }
.yh-btn:hover{ transform:translateY(-2px); }
/* Solid — flat, high-contrast fill (default text/border via smart-contrast when a custom color is set) */
.yh-btn-solid{ background:#fff; color:#111; box-shadow:0 8px 26px rgba(0,0,0,.25); }
.yh-btn-solid:hover{ box-shadow:0 12px 32px rgba(0,0,0,.32); }
/* Glass — the professional frosted default look, out of the box.
   Self-contained on purpose: `isolation:isolate` gives the button its OWN
   stacking/backdrop root so the frosted effect never depends on how an
   ancestor (slide transform/animation, overflow clip, z-index stack) is
   composited — the same guarantee #yalo-hero gives itself. Every property
   the glass skin needs (background, border, blur, sheen) is declared here,
   nothing is left for `.yh-btn` to imply. */
.yh-btn-glass{ isolation:isolate; background:rgba(255,255,255,.15); color:#fff; border-color:rgba(255,255,255,.3);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    box-shadow:0 6px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25); }
.yh-btn-glass:hover{ background:rgba(255,255,255,.22); }
/* Browsers without backdrop-filter support (or it disabled, e.g. "Reduce
   Transparency") get a slightly denser tint instead of a flat, washed-out
   panel — badge and button degrade identically. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .yh-badge,.yh-btn-glass{ background:rgba(30,32,40,.55); }
}
/* One button or two — same compact size always, so a single CTA never
   looks oversized next to how it reads with a companion button. */
@media (max-width:480px){ .yh-btn{ padding:9px 16px; font-size:12.5px; } }

/* Nav + dots */
.yh-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border-radius:50%;
    border:none; cursor:pointer; background:rgba(0,0,0,.28); color:#fff; font-size:16px; display:flex; align-items:center; justify-content:center;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .2s, transform .2s; opacity:0; }
#yalo-hero:hover .yh-nav{ opacity:1; }
.yh-nav:hover{ background:rgba(0,0,0,.5); }
.yh-prev{ inset-inline-start:16px; }
.yh-next{ inset-inline-end:16px; }
.yh-dots{ position:absolute; inset-block-end:18px; inset-inline:0; z-index:5; display:flex; justify-content:center; gap:9px; }
.yh-dot{ width:9px; height:9px; border-radius:999px; border:none; cursor:pointer; padding:0; background:rgba(255,255,255,.45); transition:width .25s, background .25s; }
.yh-dot.is-active{ width:26px; background:#fff; }

/* Text entrance (replays whenever a slide becomes active).
   IMPORTANT: buttons are animated on THEMSELVES (.yh-btn), never through
   the .yh-btns wrapper. A `transform`-driven animation on any ANCESTOR of
   a backdrop-filter element makes that ancestor its own compositing layer,
   which blocks backdrop-filter from ever seeing the real page background
   behind it — the button would render its flat tint with zero blur even
   though its own CSS is correct. Animating .yh-btn directly (exactly like
   .yh-badge animates itself) keeps the glass button as the outermost
   transformed element, so nothing ever stands between it and the slide
   background it needs to sample. */
.yh-slide.is-active .yh-badge{ animation-delay:.55s; }
.yh-slide.is-active .yh-title{ animation-delay:.68s; }
.yh-slide.is-active .yh-sub{ animation-delay:.80s; }
.yh-slide.is-active .yh-btn{ animation-delay:.92s; }
.yh-slide.is-active[data-in="fade"]   .yh-badge,.yh-slide.is-active[data-in="fade"]   .yh-title,.yh-slide.is-active[data-in="fade"]   .yh-sub,.yh-slide.is-active[data-in="fade"]   .yh-btn{ animation:yhFade .7s both; }
.yh-slide.is-active[data-in="fade-up"] .yh-badge,.yh-slide.is-active[data-in="fade-up"] .yh-title,.yh-slide.is-active[data-in="fade-up"] .yh-sub,.yh-slide.is-active[data-in="fade-up"] .yh-btn{ animation:yhUp .7s both; }
.yh-slide.is-active[data-in="fade-down"] .yh-badge,.yh-slide.is-active[data-in="fade-down"] .yh-title,.yh-slide.is-active[data-in="fade-down"] .yh-sub,.yh-slide.is-active[data-in="fade-down"] .yh-btn{ animation:yhDown .7s both; }
.yh-slide.is-active[data-in="zoom"]   .yh-badge,.yh-slide.is-active[data-in="zoom"]   .yh-title,.yh-slide.is-active[data-in="zoom"]   .yh-sub,.yh-slide.is-active[data-in="zoom"]   .yh-btn{ animation:yhZoom .7s both; }
.yh-slide.is-active[data-in="slide"]  .yh-badge,.yh-slide.is-active[data-in="slide"]  .yh-title,.yh-slide.is-active[data-in="slide"]  .yh-sub,.yh-slide.is-active[data-in="slide"]  .yh-btn{ animation:yhSlide .7s both; }
@keyframes yhFade{ from{opacity:0} to{opacity:1} }
@keyframes yhUp{ from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }
@keyframes yhDown{ from{opacity:0;transform:translateY(-30px)} to{opacity:1;transform:none} }
@keyframes yhZoom{ from{opacity:0;transform:scale(.82)} to{opacity:1;transform:none} }
@keyframes yhSlide{ from{opacity:0;transform:translateX(-52px)} to{opacity:1;transform:none} }
.yh-rtl .yh-slide.is-active[data-in="slide"] .yh-badge,.yh-rtl .yh-slide.is-active[data-in="slide"] .yh-title,.yh-rtl .yh-slide.is-active[data-in="slide"] .yh-sub,.yh-rtl .yh-slide.is-active[data-in="slide"] .yh-btn{ animation:yhSlideR .7s both; }
@keyframes yhSlideR{ from{opacity:0;transform:translateX(52px)} to{opacity:1;transform:none} }

@media (prefers-reduced-motion: reduce){
    #yalo-hero .yh-slide.is-active .yh-badge,#yalo-hero .yh-slide.is-active .yh-title,
    #yalo-hero .yh-slide.is-active .yh-sub,#yalo-hero .yh-slide.is-active .yh-btn{ animation:none!important; }
}
@media (max-width:640px){
    .yh-content{ gap:11px; }
    .yh-nav{ display:none; }
}