/* Browse card mini gallery: mobile-first, arrows always visible on touch screens. */
.product-card-gallery { position: relative; }
.product-card-gallery__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 1px 4px rgba(30, 32, 34, 0.18);
    color: #1e2022;
    font-size: 12px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
}
.product-card-gallery__nav--prev { left: 6px; }
.product-card-gallery__nav--next { right: 6px; }
.product-card-gallery__nav:focus-visible { outline: 2px solid #377dff; outline-offset: 1px; }
.product-card-gallery__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 4px;
    pointer-events: none;
}
.product-card-gallery__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(30, 32, 34, 0.25);
}
.product-card-gallery__dot.is-active { background: #1e2022; }

/* Mouse users: show arrows on hover/focus only, so the grid stays calm. */
@media (hover: hover) and (pointer: fine) {
    .product-card-gallery__nav { opacity: 0; transition: opacity 0.15s ease; }
    .product-card-gallery:hover .product-card-gallery__nav,
    .product-card-gallery__nav:focus-visible { opacity: 1; }
}

/* Product page image counter */
.product-gallery__count {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #1e2022;
    font-size: 12px;
    line-height: 18px;
    pointer-events: none;
}