/**
 * MPR Sales Revolution — Column Slider
 * Single-item product slider for narrow sidebar columns.
 * Arrows overlay the product card, visible on hover only. Mobile: swipe.
 */

.mpr-column-slider {
    overflow: hidden;
}

/* Viewport — relative anchor for overlay buttons */
.mpr-column-slider__viewport {
    position: relative;
    overflow: hidden;
}

/* Track — flexbox, slides horizontally */
.mpr-column-slider__track {
    display: flex;
    transition: transform 0.35s ease;
    will-change: transform;
}

/* Each slide is full-width of the viewport */
.mpr-column-slider__slide {
    flex: 0 0 100%;
    min-width: 0;
}

/* Product card inside the slider — remove any margin that could break layout */
.mpr-column-slider__slide > article {
    margin: 0;
}

/* Fix the product card container type for narrow sidebar */
.mpr-column-slider__slide .product-miniature {
    container-type: inline-size;
}

/* ── Overlay navigation buttons ── */
.mpr-column-slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background-color 0.15s;
    pointer-events: none;
}

.mpr-column-slider__btn--prev {
    left: 0.25rem;
}

.mpr-column-slider__btn--next {
    right: 0.25rem;
}

/* Show on hover */
.mpr-column-slider__viewport:hover .mpr-column-slider__btn {
    opacity: 1;
    pointer-events: auto;
}

.mpr-column-slider__btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

.mpr-column-slider__btn .material-icons {
    font-size: 1.125rem;
}

/* ── Mobile: hide buttons, swipe only ── */
@media (max-width: 1023px) {
    .mpr-column-slider__btn {
        display: none;
    }
}