/* HyperLux Product Slides – Frontend Slider */

.hls-slider-wrapper {
    position: relative;
    width: 100%;
    background: #f5f5f5;
    --slide-height: 600px;
}

/* Stage clips slides; overlay is pinned to this box (not theme layout below). */
.hls-slider-stage {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: var(--slide-height);
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

/* ── Slides track ────────────────────────────────────────────────── */
.hls-slider-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    height: var(--slide-height);
    cursor: grab;
}

.hls-slider-track.is-dragging {
    transition: none;
    cursor: grabbing;
}

/* ── Single slide ────────────────────────────────────────────────── */
.hls-slide {
    flex: 0 0 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    cursor: inherit;
    display: block;
    text-decoration: none;
    color: inherit;
}

.hls-slide:focus-visible {
    outline: 3px solid #7b2d8b;
    outline-offset: -3px;
}

/* Slide image */
.hls-slide__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
    transition: transform 0.6s ease;
}

.hls-slide:hover .hls-slide__image {
    transform: scale(1.03);
}

/* ── Overlay: arrows + dots sit on the image, not in page flow ────── */
.hls-slider-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    display: block;
    /* Prevent theme flex/grid from laying out arrows in a row on the left */
}

.hls-slider-overlay .hls-slider-arrow,
.hls-slider-overlay .hls-slider-dots,
.hls-slider-overlay .hls-dot {
    pointer-events: auto;
}

/* ── Navigation arrows (minimal chevrons, screenshot-style) ───────── */
.hls-slider-arrow {
    position: absolute !important;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    z-index: 20;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #fff;
    width: auto;
    height: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
    margin: 0;
    border: none !important;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

.hls-slider-arrow:hover {
    opacity: 0.85;
    transform: translateY(-50%) scale(1.02);
}

.hls-slider-arrow:active {
    opacity: 0.7;
}

.hls-slider-arrow svg {
    width: 48px;
    height: 48px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.hls-slider-arrow--prev {
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    right: auto !important;
}

.hls-slider-arrow--next {
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
}

/* ── Dots / indicators ───────────────────────────────────────────── */
.hls-slider-dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 15;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hls-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: background 0.25s, transform 0.25s;
    padding: 0;
}

.hls-dot.is-active,
.hls-dot:hover {
    background: #7b2d8b;
    border-color: #7b2d8b;
    transform: scale(1.25);
}

/* ── Single slide – no controls needed ──────────────────────────── */
.hls-slider-wrapper.hls--single .hls-slider-arrow,
.hls-slider-wrapper.hls--single .hls-slider-dots {
    display: none;
}

/* ── Responsive (slide height is set per device in Elementor) ─────── */
@media (max-width: 768px) {
    .hls-slider-arrow svg {
        width: 40px;
        height: 40px;
    }
}