/* ==========================================================================
   Collection page: swipe a product tile's photo through its colours
   (ARKAN-259, js/collection-colour-swiper.js)

   Only tiles with two or more colours get .qs-cs on their .product-card-image.
   Values from the reference prototype (Collection — swipe colours).
   ========================================================================== */

/* The photo takes horizontal drags; vertical page scroll stays with the
   browser. No text selection or image ghost while dragging with a mouse. */
.product-card .product-card-image.qs-cs {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.product-card .product-card-image.qs-cs img {
    -webkit-user-drag: none;
    will-change: transform;
}

/* The neighbouring colour's photo, carried in beside the photo while it slides
   (sizing and fit come from `.product-card-image img`) */
.product-card .product-card-image .qs-cs-peek {
    pointer-events: none;
}

/* Dots: one per colour, the shown one long */
.product-card .qs-cs-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 4px;
    pointer-events: none;
}

.product-card .qs-cs-dot {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.22);
    transition: width 0.25s, background-color 0.25s;
}

.product-card .qs-cs-dot.is-active {
    width: 14px;
    background: #1a1a1a;
}

/* Arrows: a plain chevron each side of the photo, vertically centred
   (prototype: plain arrows). The one with no colour that way is hidden. */
.product-card .qs-cs-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    color: #1a1a1a;
    cursor: pointer;
}

.product-card .qs-cs-arrow--left {
    left: 0;
}

.product-card .qs-cs-arrow--right {
    right: 0;
}

.product-card .qs-cs-arrow[hidden] {
    display: none;
}

.product-card .qs-cs-arrow svg {
    display: block;
    width: 16px;
    height: 16px;
    pointer-events: none;
}

/* With a mouse: shown while the pointer is on the tile (phones always show them) */
@media (hover: hover) and (pointer: fine) {
    .product-card .qs-cs-arrow {
        opacity: 0;
        transition: opacity 0.2s;
    }

    .product-card:hover .qs-cs-arrow {
        opacity: 1;
    }
}

/* The shown colour's swatch: a ring around it */
.product-card .color-swatches .color-swatch.active,
.product-card .color-swatches .color-swatch.active:hover {
    border: 1px solid #d0d0d0;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #1a1a1a;
}

.product-card .color-swatches .color-swatch.active[data-color="white"],
.product-card .color-swatches .color-swatch.active[data-color="cream"],
.product-card .color-swatches .color-swatch.active[data-color="ivory"] {
    border-color: #bbb;
}

@media (prefers-reduced-motion: reduce) {
    .product-card .qs-cs-dot,
    .product-card .qs-cs-arrow {
        transition: none;
    }
}