/* HASKARI HAUSA premium carousel v3 — status-style progress, touch-first, foldable-safe */
.hh-carousel-wrap {position:relative;min-width:0;overflow:hidden;border-radius:28px;background:#07111f;border:1px solid rgba(245,180,0,.46);box-shadow:0 24px 70px rgba(7,17,31,.18)}
.hh-carousel {--hh-carousel-interval:6500ms;position:relative;min-height:clamp(430px,35vw,570px);height:100%;isolation:isolate;overflow:hidden;border-radius:inherit;touch-action:pan-y pinch-zoom;background:#07111f;color:#fff;outline:none}
.hh-carousel::after {content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 -80px 100px rgba(0,0,0,.10)}
.hh-carousel-slides,.hh-carousel-slide {position:absolute;inset:0;width:100%;height:100%}
.hh-carousel-slide {z-index:0;opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.025);transition:opacity 520ms cubic-bezier(.22,.78,.24,1),transform 850ms cubic-bezier(.2,.8,.2,1),visibility 0s linear 520ms}
.hh-carousel-slide.is-active {z-index:2;opacity:1;visibility:visible;pointer-events:auto;transform:scale(1);transition-delay:0s}
.hh-carousel-image {position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;user-select:none;-webkit-user-drag:none;filter:saturate(1.05) contrast(1.02)}
.hh-carousel-shade {position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,12,24,.88) 0%,rgba(5,12,24,.72) 35%,rgba(5,12,24,.23) 68%,rgba(5,12,24,.08) 100%),linear-gradient(0deg,rgba(4,10,20,.62) 0%,rgba(4,10,20,.06) 58%)}
.hh-carousel-content {position:absolute;z-index:3;left:clamp(1.25rem,4.4vw,3.3rem);top:50%;width:min(71%,640px);transform:translateY(-50%);padding-bottom:2.6rem}
.hh-carousel-kicker {display:inline-flex;align-items:center;min-height:32px;max-width:100%;margin:0 0 1rem;padding:.45rem .85rem;border:1px solid rgba(245,180,0,.58);border-radius:999px;background:rgba(245,180,0,.13);color:#ffd55c;font-size:clamp(.67rem,.9vw,.78rem);font-weight:950;letter-spacing:.07em;text-transform:uppercase;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hh-carousel-title {margin:0;max-width:610px;color:#fff;font-size:clamp(2rem,4.3vw,4.15rem);font-weight:950;line-height:.98;letter-spacing:-.045em;text-wrap:balance;text-shadow:0 4px 24px rgba(0,0,0,.24)}
.hh-carousel-copy {max-width:560px;margin:1.05rem 0 0;color:rgba(255,255,255,.88);font-size:clamp(.9rem,1.25vw,1.05rem);line-height:1.62;text-wrap:pretty}
.hh-carousel-actions {display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:1.3rem}
.hh-carousel-cta {display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:.5rem;padding:.78rem 1.15rem;border-radius:999px;background:#F5B400;color:#07111f;box-shadow:0 14px 34px rgba(245,180,0,.28);font-size:.92rem;font-weight:950;text-decoration:none}
.hh-carousel-cta:hover,.hh-carousel-cta:focus-visible {background:#FACC15;transform:translateY(-2px);box-shadow:0 18px 42px rgba(245,180,0,.36)}
.hh-carousel-cta svg {width:17px;height:17px}.hh-carousel-product-name {color:rgba(255,255,255,.84);font-size:.82rem;font-weight:850;letter-spacing:.01em}
.hh-carousel-arrow,.hh-carousel-pause {position:absolute;z-index:9;display:inline-grid;place-items:center;min-width:46px;width:46px;min-height:46px;height:46px;padding:0;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(7,17,31,.58);color:#fff;box-shadow:0 8px 28px rgba(0,0,0,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer;transition:transform .22s ease,background .22s ease,border-color .22s ease,color .22s ease}
.hh-carousel-arrow:hover,.hh-carousel-arrow:focus-visible,.hh-carousel-pause:hover,.hh-carousel-pause:focus-visible {background:rgba(245,180,0,.95);color:#07111f;border-color:rgba(245,180,0,1);transform:scale(1.05)}
.hh-carousel-arrow svg,.hh-carousel-pause svg {width:20px;height:20px;pointer-events:none}.hh-carousel-prev {left:clamp(.75rem,1.4vw,1.15rem);top:50%;transform:translateY(-50%)}.hh-carousel-prev:hover,.hh-carousel-prev:focus-visible {transform:translateY(-50%) scale(1.05)}.hh-carousel-next {right:clamp(.75rem,1.4vw,1.15rem);top:50%;transform:translateY(-50%)}.hh-carousel-next:hover,.hh-carousel-next:focus-visible {transform:translateY(-50%) scale(1.05)}
/* Pause/play sits under the WhatsApp-status style timeline so both stay visible. */
.hh-carousel-pause {top:34px;right:clamp(.8rem,1.4vw,1.15rem)}

/* Status navigation — visible on desktop, mobile and foldables. */
.hh-carousel-footer {position:absolute;z-index:8;top:10px;right:74px;left:clamp(.85rem,1.8vw,1.35rem);display:flex;align-items:center;gap:.65rem;pointer-events:none}
.hh-carousel-tabs {display:flex;flex:1;align-items:center;gap:6px;min-width:0;padding:0;border:0;background:transparent;pointer-events:auto}
.hh-carousel-dot {--hh-dot-progress:0;position:relative;display:block;flex:1 1 0;min-width:18px;width:auto;height:14px;padding:5px 0;border:0;border-radius:999px;background:transparent;cursor:pointer;overflow:visible}
.hh-carousel-dot::before {content:"";position:absolute;right:0;left:0;top:6px;height:3px;border-radius:999px;background:rgba(255,255,255,.34);box-shadow:0 1px 3px rgba(0,0,0,.16)}
.hh-carousel-dot>span {position:absolute;left:0;top:6px;display:block;width:100%;height:3px;border-radius:999px;background:linear-gradient(90deg,#F5B400,#FACC15);transform:scaleX(var(--hh-dot-progress));transform-origin:left center;transition:transform 90ms linear;box-shadow:0 0 12px rgba(245,180,0,.25)}
.hh-carousel-dot:hover::before,.hh-carousel-dot:focus-visible::before {background:rgba(255,255,255,.55)}
.hh-carousel-dot.is-active::before {background:rgba(255,255,255,.42)}
.hh-carousel-dot:focus-visible {outline:2px solid #FACC15;outline-offset:3px}
.hh-carousel-counter {display:none}
.hh-carousel[data-direction="next"] .hh-carousel-slide.is-active .hh-carousel-content {animation:hhCarouselContentInNext 460ms cubic-bezier(.2,.8,.2,1) both}.hh-carousel[data-direction="prev"] .hh-carousel-slide.is-active .hh-carousel-content {animation:hhCarouselContentInPrev 460ms cubic-bezier(.2,.8,.2,1) both}@keyframes hhCarouselContentInNext {from{opacity:0;transform:translateY(-48%) translateX(18px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}@keyframes hhCarouselContentInPrev {from{opacity:0;transform:translateY(-48%) translateX(-18px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}
@media (max-width:1024px){.hh-carousel{min-height:clamp(440px,62vw,560px)}.hh-carousel-content{width:min(79%,590px)}.hh-carousel-shade{background:linear-gradient(90deg,rgba(5,12,24,.90) 0%,rgba(5,12,24,.67) 50%,rgba(5,12,24,.20) 100%),linear-gradient(0deg,rgba(4,10,20,.68) 0%,rgba(4,10,20,.06) 62%)}}
@media (max-width:680px){.hh-carousel-wrap{border-radius:22px}.hh-carousel{min-height:clamp(460px,148vw,570px);border-radius:22px}.hh-carousel-image{object-position:58% center}.hh-carousel-shade{background:linear-gradient(0deg,rgba(4,10,20,.94) 0%,rgba(4,10,20,.80) 42%,rgba(4,10,20,.18) 76%,rgba(4,10,20,.06) 100%)}.hh-carousel-content{top:auto;right:1rem;bottom:2rem;left:1rem;width:auto;transform:none;padding-bottom:0}.hh-carousel-title{max-width:100%;font-size:clamp(1.72rem,8vw,2.45rem);line-height:1.02}.hh-carousel-copy{display:-webkit-box;margin-top:.72rem;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical;font-size:.88rem;line-height:1.46}.hh-carousel-kicker{margin-bottom:.72rem;font-size:.65rem}.hh-carousel-actions{margin-top:.9rem}.hh-carousel-cta{min-height:44px;padding:.65rem .95rem;font-size:.84rem}.hh-carousel-product-name{font-size:.72rem}.hh-carousel-arrow{top:46%;width:42px;min-width:42px;height:42px;min-height:42px;opacity:.88}.hh-carousel-pause{top:30px;width:42px;min-width:42px;height:42px;min-height:42px}.hh-carousel-footer{top:8px;right:64px;left:10px}.hh-carousel-tabs{gap:4px}.hh-carousel-dot{height:12px;padding:4px 0}.hh-carousel-dot::before,.hh-carousel-dot>span{top:5px;height:2.5px}}
@media (max-width:360px){.hh-carousel{min-height:500px}.hh-carousel-content{right:.85rem;left:.85rem}.hh-carousel-copy{-webkit-line-clamp:2}.hh-carousel-product-name{display:none}.hh-carousel-arrow{top:39%}.hh-carousel-footer{right:58px;left:8px}.hh-carousel-tabs{gap:3px}.hh-carousel-pause{right:8px}}
@media (hover:hover) and (pointer:fine){.hh-carousel-arrow{opacity:.88}.hh-carousel:hover .hh-carousel-arrow,.hh-carousel:focus-within .hh-carousel-arrow{opacity:1}}
@media (prefers-reduced-motion:reduce){.hh-carousel-slide,.hh-carousel-content,.hh-carousel-dot>span,.hh-carousel-cta,.hh-carousel-arrow,.hh-carousel-pause{animation:none!important;transition-duration:.01ms!important}.hh-carousel-dot.is-active>span{transform:scaleX(1)!important}}