/* =====================================================================================================================
   product-card-nav-v1.css — product-card picture slider: arrows + dots (core, all shops)

   WHY: the card arrows (product-image-hover-arrows.css) were thin grey glyphs in the bottom corners, partly OUTSIDE the
   image, level with the dots, shown only on hover; phones hid the arrows and never showed the dots (no hover), so a
   multi-picture product looked like a single picture.
   NOW: round chips centred on the image's vertical middle, inside its edges, shown on card hover AND keyboard focus;
   small dots always visible on touch screens (swipe to change picture), on hover/focus on desktop.

   SHOP TOKENS (the pattern of badge-shop-tokens-v1.css): this file holds structure + neutral defaults. A shop changes
   the look ONLY by setting these custom properties in a GLOBAL `:root { }` of its mobile-shop-overrides.css (registered
   last in Head.cshtml, so it wins). Do not restyle the selectors below in a shop skin.
     --card-nav-size          chip diameter                         --card-nav-icon-size   icon box inside the chip
     --card-nav-bg / -fg      chip background / icon colour         --card-nav-shadow      chip shadow
     --card-nav-radius        50% = round, 0 = square               --card-nav-inset       distance from the image edge
     --card-nav-icon-prev/-next  url() of an SVG used as a mask (any line set; painted in --card-nav-fg)
     --card-dot-size / -gap   dot diameter / spacing                --card-dot-color / -active  idle / current dot
   Registered with AddCssFileParts (rendered after the legacy files). Cache: bump the file name (-v2) on any change.
   ===================================================================================================================== */
:root {
    --card-nav-size: 40px;
    --card-nav-icon-size: 18px;
    --card-nav-bg: rgba(255, 255, 255, .9);
    --card-nav-fg: #222;
    --card-nav-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    --card-nav-radius: 50%;
    --card-nav-inset: 8px;
    --card-nav-icon-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
    --card-nav-icon-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
    --card-dot-size: 6px;
    --card-dot-gap: 6px;
    --card-dot-color: rgba(0, 0, 0, .25);
    --card-dot-active: #222;
}

/* (0,5,2) + !important: beats product-image-hover-arrows.css (0,4,0), product-box-aspect-ratio.css z-index, the
   simplex/wigstheme colour rules and older shop-skin icon boxes. */
html body .product-grid .item-box .picture > .swiper > .swiper-button-prev,
html body .product-grid .item-box .picture > .swiper > .swiper-button-next {
    top: 50% !important;
    bottom: auto !important;
    width: var(--card-nav-size) !important;
    height: var(--card-nav-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: var(--card-nav-radius) !important;
    background: var(--card-nav-bg) !important;
    box-shadow: var(--card-nav-shadow) !important;
    color: var(--card-nav-fg) !important;
    z-index: 25 !important;
    cursor: pointer;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .15s ease, visibility .15s ease !important;
}
html body .product-grid .item-box .picture > .swiper > .swiper-button-prev { left: var(--card-nav-inset) !important; right: auto !important; }
html body .product-grid .item-box .picture > .swiper > .swiper-button-next { right: var(--card-nav-inset) !important; left: auto !important; }
html body .product-grid .item-box .picture > .swiper > .swiper-button-prev::after,
html body .product-grid .item-box .picture > .swiper > .swiper-button-next::after {
    content: "" !important;
    display: block !important;
    position: static !important;
    width: var(--card-nav-icon-size) !important;
    height: var(--card-nav-icon-size) !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    background: currentColor !important;   /* shorthand also clears background-image icons of older skins */
    -webkit-mask: var(--card-nav-icon-next) center / contain no-repeat !important;
    mask: var(--card-nav-icon-next) center / contain no-repeat !important;
}
html body .product-grid .item-box .picture > .swiper > .swiper-button-prev::after {
    -webkit-mask-image: var(--card-nav-icon-prev) !important;
    mask-image: var(--card-nav-icon-prev) !important;
}
html body .product-grid .item-box .picture > .swiper > .swiper-button-disabled { opacity: .35 !important; cursor: default; }

/* dots: centred under the picture's lower edge, inside the image */
html body .product-grid .item-box .picture > .swiper > .swiper-pagination {
    left: 0 !important;
    right: 0 !important;
    bottom: 8px !important;
    width: auto !important;
    display: flex !important;
    justify-content: center !important;
    gap: var(--card-dot-gap) !important;
    z-index: 24 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .15s ease, visibility .15s ease !important;
}
html body .product-grid .item-box .picture > .swiper > .swiper-pagination .swiper-pagination-bullet {
    width: var(--card-dot-size) !important;
    height: var(--card-dot-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--card-dot-color) !important;
    opacity: 1 !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) !important;   /* readable on dark and light photos */
}
html body .product-grid .item-box .picture > .swiper > .swiper-pagination .swiper-pagination-bullet-active {
    background: var(--card-dot-active) !important;
}

/* desktop (real hover): show on card hover and when anything in the picture has keyboard focus */
@media (hover: hover) and (pointer: fine) {
    html body .product-grid .item-box .picture:hover > .swiper > .swiper-button-prev,
    html body .product-grid .item-box .picture:hover > .swiper > .swiper-button-next,
    html body .product-grid .item-box .picture:has(:focus-visible) > .swiper > .swiper-button-prev,
    html body .product-grid .item-box .picture:has(:focus-visible) > .swiper > .swiper-button-next,
    html body .product-grid .item-box .picture > .swiper > .swiper-button-prev:focus-visible,
    html body .product-grid .item-box .picture > .swiper > .swiper-button-next:focus-visible,
    html body .product-grid .item-box .picture:hover > .swiper > .swiper-pagination,
    html body .product-grid .item-box .picture:has(:focus-visible) > .swiper > .swiper-pagination {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    html body .product-grid .item-box .picture:hover > .swiper > .swiper-button-disabled,
    html body .product-grid .item-box .picture:has(:focus-visible) > .swiper > .swiper-button-disabled { opacity: .35 !important; }
    html body .product-grid .item-box .picture > .swiper > .swiper-button-prev:focus-visible,
    html body .product-grid .item-box .picture > .swiper > .swiper-button-next:focus-visible {
        outline: 2px solid var(--card-dot-active) !important;
        outline-offset: 2px !important;
    }
    html body .product-grid .item-box .picture > .swiper a.swiper-slide:focus-visible {
        outline: 2px solid var(--card-dot-active) !important;
        outline-offset: -2px !important;
    }
}

/* touch screens and phones: no arrows (they would cover a 2-column card), dots always visible, swipe to change */
@media (hover: none), (max-width: 767.98px) {
    html body .product-grid .item-box .picture > .swiper > .swiper-button-prev,
    html body .product-grid .item-box .picture > .swiper > .swiper-button-next { display: none !important; }
    html body .product-grid .item-box .picture > .swiper > .swiper-pagination {
        opacity: 1 !important;
        visibility: visible !important;
        bottom: 6px !important;
        pointer-events: none !important;   /* 6px dots are an indicator here, not a target: a near miss opened the
                                              product; taps go to the picture link, swipes change the picture */
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .product-grid .item-box .picture > .swiper > .swiper-button-prev,
    html body .product-grid .item-box .picture > .swiper > .swiper-button-next,
    html body .product-grid .item-box .picture > .swiper > .swiper-pagination { transition: none !important; }
}