/* SEOHUB Banner Slider — scoped, theme-safe styles */
.shbs{position:relative;display:block;width:100%;max-width:100%;margin:0 0 1.5em;padding:0;line-height:0;box-sizing:border-box;--shbs-speed:600ms;--shbs-rd:16/5;--shbs-as:44px;--shbs-ac:#fff;--shbs-abg:transparent;--shbs-dc:#000;--shbs-da:#116a5b;--shbs-ds:10px}
.shbs *,.shbs *::before,.shbs *::after{box-sizing:border-box}
.shbs .shbs__stage{position:relative;overflow:hidden;background:var(--shbs-bg,transparent)}
.shbs .shbs__viewport{position:relative;width:100%;overflow:hidden;aspect-ratio:var(--shbs-rd);touch-action:pan-y;-webkit-user-select:none;user-select:none}
.shbs .shbs__track{display:flex;flex-wrap:nowrap;width:100%;height:100%;margin:0;padding:0;transform:translate3d(0,0,0);transition:transform var(--shbs-speed) cubic-bezier(.22,.61,.36,1)}
.shbs .shbs__slide{position:relative;flex:0 0 100%;width:100%;max-width:100%;height:100%;margin:0;padding:0}
.shbs .shbs__link,.shbs .shbs__pic{display:block;width:100%;height:100%;margin:0;padding:0;border:0;text-decoration:none;box-shadow:none;background:none}
.shbs .shbs__link{-webkit-user-drag:none}
.shbs img.shbs__img{display:block;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;object-fit:var(--shbs-fit,cover);object-position:center;-webkit-user-drag:none;pointer-events:none}
.shbs .shbs__link:focus-visible{outline:3px solid var(--shbs-da);outline-offset:-3px}

/* Fade */
.shbs--fade .shbs__track{display:block;position:relative;transform:none;transition:none}
.shbs--fade .shbs__slide{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;visibility:hidden;z-index:0;transition:opacity var(--shbs-speed) ease,visibility 0s linear var(--shbs-speed)}
.shbs--fade .shbs__slide.is-active{opacity:1;visibility:visible;z-index:1;transition:opacity var(--shbs-speed) ease,visibility 0s}

/* ---------- Arrows ---------- */
.shbs .shbs__arrow{all:unset;box-sizing:border-box;display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:var(--shbs-as);height:var(--shbs-as);border-radius:50%;background:var(--shbs-abg);color:var(--shbs-ac);cursor:pointer;line-height:0;transition:opacity .2s,background-color .2s,transform .2s}
.shbs--arrow-rounded .shbs__arrow{border-radius:8px}
.shbs--arrow-square .shbs__arrow{border-radius:0}
.shbs .shbs__arrow svg{display:block;width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.shbs--arrow-icon-thin .shbs__arrow svg{stroke-width:1.6}
.shbs--arrow-nobg .shbs__arrow svg{width:62%;height:62%}
.shbs .shbs__arrow:hover{transform:scale(1.06)}
.shbs--arrow-nobg .shbs__arrow:hover{transform:none;opacity:.75}
.shbs .shbs__arrow:focus-visible{outline:2px solid var(--shbs-ac);outline-offset:2px}
.shbs .shbs__arrow[disabled]{opacity:.3;cursor:default;pointer-events:none}

/* On the slider: one arrow each side */
.shbs--arrows-sides .shbs__arrow{position:absolute;top:50%;z-index:3;margin-top:calc(var(--shbs-as) / -2)}
.shbs--arrows-sides .shbs__arrow--prev{left:12px}
.shbs--arrows-sides .shbs__arrow--next{right:12px}
/* Keeps borderless white arrows readable on light photos */
.shbs--arrows-sides.shbs--arrow-nobg .shbs__arrow svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}

/* Above / below the slider */
.shbs .shbs__nav{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.shbs .shbs__nav--below{margin:12px 0 0}
.shbs .shbs__nav--left{justify-content:flex-start}
.shbs .shbs__nav--center{justify-content:center}
.shbs .shbs__nav--right{justify-content:flex-end}
.shbs .shbs__nav--bar{gap:14px}

/* ---------- Dots (same look as SEOHUB Category Grid) ---------- */
.shbs .shbs__dots{display:flex;flex-wrap:wrap;justify-content:center;margin:12px 0 0;padding:0;line-height:0}
.shbs .shbs__nav--bar .shbs__dots{margin:0}
.shbs--dots-inside .shbs__stage .shbs__dots{position:absolute;left:0;right:0;bottom:8px;z-index:3;margin:0;padding:0 50px}
.shbs .shbs__dot{all:unset;box-sizing:border-box;position:relative;width:calc(var(--shbs-ds) + 20px);height:calc(var(--shbs-ds) + 14px);cursor:pointer}
.shbs .shbs__dot::after{content:"";position:absolute;top:50%;left:50%;width:var(--shbs-ds);height:var(--shbs-ds);transform:translate(-50%,-50%);border-radius:50%;background:var(--shbs-dc);transition:background-color .25s,transform .25s}
.shbs .shbs__dot.is-active::after{background:var(--shbs-da)}
.shbs .shbs__dot:hover::after{transform:translate(-50%,-50%) scale(1.2)}
.shbs .shbs__dot:focus-visible{outline:2px solid var(--shbs-da);border-radius:4px}

/* Tablet */
@media (max-width:1024px){
.shbs .shbs__viewport{aspect-ratio:var(--shbs-rt,var(--shbs-rd))}
}
/* Mobile */
@media (max-width:767px){
.shbs{--shbs-as-m:calc(var(--shbs-as) * .78)}
.shbs .shbs__viewport{aspect-ratio:var(--shbs-rm,var(--shbs-rt,var(--shbs-rd)))}
.shbs .shbs__arrow{width:var(--shbs-as-m);height:var(--shbs-as-m)}
.shbs--arrows-sides .shbs__arrow{margin-top:calc(var(--shbs-as-m) / -2)}
.shbs--arrows-sides .shbs__arrow--prev{left:6px}
.shbs--arrows-sides .shbs__arrow--next{right:6px}
.shbs.shbs--no-arrows-m .shbs__arrow{display:none}
.shbs.shbs--no-arrows-m .shbs__nav:not(.shbs__nav--bar){display:none}
.shbs--dots-inside .shbs__stage .shbs__dots{bottom:4px;padding:0 10px}
}

/* Browsers without aspect-ratio (Safari < 15) */
@supports not (aspect-ratio:1/1){
.shbs .shbs__viewport{height:0;padding-top:var(--shbs-pd,31.25%)}
.shbs .shbs__track{position:absolute;top:0;left:0}
@media (max-width:1024px){.shbs .shbs__viewport{padding-top:var(--shbs-pt,var(--shbs-pd,31.25%))}}
@media (max-width:767px){.shbs .shbs__viewport{padding-top:var(--shbs-pm,var(--shbs-pt,var(--shbs-pd,31.25%)))}}
}

@media (prefers-reduced-motion:reduce){
.shbs .shbs__track,.shbs .shbs__slide,.shbs .shbs__dot::after{transition:none!important}
}
