/* ==========================================================================
   Hero Product Banner Slider — Full-Bleed 2:1 with Navigation Controls
   ========================================================================== */

.gk-hero-new {
    position: relative !important;
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    background-color: #f6f6f6 !important;
    background-image: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

.gk-hero-bg-slides {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

.gk-hero-bg-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    opacity: 0;
    transform: none !important;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.gk-hero-bg-slide.is-active {
    opacity: 1 !important;
}

/* Slider Arrow Buttons */
.gk-hero-new .gk-slider-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 99 !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    line-height: 1 !important;
    font-size: 0 !important;
}
.gk-hero-new .gk-slider-prev {
    left: 18px !important;
    right: auto !important;
}
.gk-hero-new .gk-slider-next {
    right: 18px !important;
    left: auto !important;
}
.gk-hero-new .gk-slider-arrow:hover {
    background: rgba(0, 0, 0, 0.65) !important;
    border-color: #ffffff !important;
    transform: translateY(-50%) scale(1.1) !important;
}
.gk-hero-new .gk-slider-arrow svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    stroke: #ffffff !important;
    color: #ffffff !important;
    fill: none !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
}
.gk-hero-new .gk-slider-arrow polyline,
.gk-hero-new .gk-slider-arrow path {
    stroke: #ffffff !important;
    fill: none !important;
    stroke-width: 2.5 !important;
}
@media (max-width: 768px) {
    .gk-hero-new .gk-slider-arrow {
        width: 36px !important;
        height: 36px !important;
    }
    .gk-hero-new .gk-slider-prev { left: 8px !important; }
    .gk-hero-new .gk-slider-next { right: 8px !important; }
    .gk-hero-new .gk-slider-arrow svg {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
    }
}

/* Floating Bottom Explore CTA */
.gk-hero-floating-bar {
    position: absolute !important;
    bottom: 26px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 95 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
    max-width: 90% !important;
}

.gk-hero-explore-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 9px 12px 9px 24px !important;
    background: linear-gradient(135deg, rgba(12, 24, 21, 0.94) 0%, rgba(20, 42, 36, 0.96) 100%) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1.5px solid rgba(200, 169, 110, 0.75) !important;
    border-radius: 40px !important;
    color: #FAF6EE !important;
    font-family: var(--font-sans, 'Montserrat', sans-serif) !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42), 0 0 20px rgba(200, 169, 110, 0.22) !important;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    cursor: pointer !important;
}

.gk-hero-btn-text {
    color: #FAF6EE !important;
    letter-spacing: 0.8px !important;
    transition: color 0.25s ease !important;
}

.gk-hero-btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    background: linear-gradient(135deg, #E2CA9C 0%, #C8A96E 100%) !important;
    border-radius: 50% !important;
    color: #0C1815 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.gk-hero-btn-icon svg {
    stroke: #0C1815 !important;
    width: 14px !important;
    height: 14px !important;
    transition: transform 0.28s ease !important;
}

/* Hover & Active Interactions */
.gk-hero-explore-btn:hover {
    background: linear-gradient(135deg, rgba(8, 16, 14, 0.98) 0%, rgba(15, 33, 28, 0.98) 100%) !important;
    border-color: #E2CA9C !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.52), 0 0 28px rgba(200, 169, 110, 0.45) !important;
}

.gk-hero-explore-btn:hover .gk-hero-btn-text {
    color: #E2CA9C !important;
}

.gk-hero-explore-btn:hover .gk-hero-btn-icon {
    background: #FFFFFF !important;
    transform: translateX(4px) !important;
    box-shadow: 0 4px 12px rgba(200, 169, 110, 0.5) !important;
}

.gk-hero-explore-btn:hover .gk-hero-btn-icon svg {
    stroke: #0C1815 !important;
    transform: translateX(1px) !important;
}

.gk-hero-explore-btn:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Mobile View Adjustments */
@media (max-width: 768px) {
    .gk-hero-floating-bar {
        bottom: 12px !important;
    }
    .gk-hero-explore-btn {
        padding: 6px 8px 6px 16px !important;
        font-size: 0.74rem !important;
        gap: 8px !important;
        border-width: 1px !important;
    }
    .gk-hero-btn-text {
        letter-spacing: 0.4px !important;
    }
    .gk-hero-btn-icon {
        width: 22px !important;
        height: 22px !important;
    }
    .gk-hero-btn-icon svg {
        width: 11px !important;
        height: 11px !important;
        stroke-width: 2.8 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gk-hero-bg-slide.is-active {
        transition: opacity 0s;
    }
}