/* ======================================================================
   Front Hero — Cohort 10 (Kiddies Bazar — warm orange baby/kids)
   Hero type: full-bleed lightSlider image carousel.
   ====================================================================== */

/* ---------- 1. Hero band ---------- */
.front-hero-10-band {
    background: #fff;
    line-height: 0;
    overflow: hidden;
}

/* lightSlider list reset */
.front-hero-10-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.front-hero-10-list li { line-height: 0; }

/* Banner image — fixed height, cover with center focus.
   Gradient background = graceful fallback when the image 404s (no public_path
   existence check needed — keeps the Blade validator happy). */
.front-hero-10-img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    object-position: center center;
    display: block;
    background: linear-gradient(120deg, var(--bs-secondary, #F26522) 0%, #FFBA00 100%);
}

@media (max-width: 991.98px) {
    .front-hero-10-img { height: 300px; }
}
@media (max-width: 575.98px) {
    .front-hero-10-img { height: 200px; }
}

/* ---------- lightSlider overrides ---------- */

/* Pager dots — bottom center */
.lSSlideOuter { position: relative; }
.front-hero-10-band .lSSlideOuter .lSPager.lSpg {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex !important;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
}
.front-hero-10-band .lSSlideOuter .lSPager.lSpg > li {
    margin: 0 !important;
}
.front-hero-10-band .lSSlideOuter .lSPager.lSpg > li a {
    background: rgba(255,255,255,0.50) !important;
    border-radius: 50% !important;
    width: 9px !important;
    height: 9px !important;
    display: block;
    transition: all 0.2s ease;
}
.front-hero-10-band .lSSlideOuter .lSPager.lSpg > li.active a,
.front-hero-10-band .lSSlideOuter .lSPager.lSpg > li:hover a {
    background: #fff !important;
    width: 24px !important;
    border-radius: 5px !important;
}

/* Arrow buttons */
.front-hero-10-band .lSAction { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 15; }
.front-hero-10-band .lSAction > a {
    pointer-events: all;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.80) !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    opacity: 1 !important;
    margin-top: 0 !important;
    transition: background 0.15s ease, transform 0.15s ease;
}
.front-hero-10-band .lSAction > a:hover {
    background: #fff !important;
    transform: translateY(-50%) scale(1.08);
}
.front-hero-10-band .lSAction > .lSPrev {
    left: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px !important;
    text-indent: -9999px;
}
.front-hero-10-band .lSAction > .lSNext {
    right: 14px;
    left: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px !important;
    text-indent: -9999px;
}

@media (max-width: 575.98px) {
    .front-hero-10-band .lSAction > a { width: 30px; height: 30px; }
    .front-hero-10-band .lSAction > .lSPrev { left: 6px; }
    .front-hero-10-band .lSAction > .lSNext { right: 6px; }
}