.hbn{width:100%;padding:14px 24px 0}.hbn.is-full{padding:0}
.hbn-wrap{position:relative;overflow:hidden;margin:0 auto;background:var(--hbn-bg,var(--wh-surface-2));border-radius:var(--hbn-r,12px)}
.hbn.is-contained .hbn-wrap{max-width:1280px}.hbn.is-full .hbn-wrap{border-radius:0;max-width:none}
.hbn-d .hbn-wrap{height:min(var(--hbn-dh,260px),calc((100vw - var(--hbn-gap,48px)) * var(--hbn-k,.203)))}
.hbn-track{display:flex;height:100%;direction:ltr;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform}
.hbn-slide{position:relative;flex:0 0 100%;min-width:0;height:100%;display:block;direction:ltr}
.hbn-slide picture,.hbn-slide img{display:block;width:100%;height:100%}
.hbn-slide img{object-fit:var(--hbn-fit,cover);object-position:center}
.hbn-tag{position:absolute;top:12px;inset-inline-start:12px;background:rgba(255,255,255,.94);color:#374151;font-size:11px;font-weight:700;border-radius:999px;padding:4px 10px;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbn-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.92);box-shadow:0 2px 12px rgba(0,0,0,.18);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .2s;z-index:3}
.hbn-arrow svg{width:16px;height:16px;stroke:#0A1628;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.hbn-arrow.prev{inset-inline-start:12px}.hbn-arrow.next{inset-inline-end:12px}
.hbn-wrap:hover .hbn-arrow,.hbn-arrow:focus-visible{opacity:1}
.hbn-dots{position:absolute;bottom:10px;inset-inline-start:0;inset-inline-end:0;display:flex;justify-content:center;gap:6px;z-index:3}
.hbn-dot{position:relative;width:7px;height:7px;border-radius:99px;border:0;padding:0;background:rgba(255,255,255,.6);cursor:pointer;transition:all .25s;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.hbn-dot::after{content:'';position:absolute;inset:-14px -6px}
.hbn-dot.on{width:22px;background:#fff}
/* Large screens: desktop slides. Phones and tablets (under 992px): mobile slides, always 16:9. */
.hbn-m{display:none}
@media (max-width:991px){
 .hbn-d{display:none}.hbn-m{display:block}
 .hbn{padding:10px 16px 0}.hbn.is-full{padding:0}
 .hbn-m .hbn-wrap{aspect-ratio:16/9}.hbn.hbn-m.is-contained .hbn-wrap{max-width:720px}
 .hbn-arrow{display:none}.hbn-tag{font-size:10.5px;top:10px}
}
@media (prefers-reduced-motion:reduce){.hbn-track{transition:none}}