/* ============================================================================
   Product-card SKU swatches — single-row horizontal scroller
   ----------------------------------------------------------------------------
   Covers EVERY card renderer in the site because they all share the same
   structure  .card-swatch > ul.swatch > li.item :
     - inline markup in listing pages (Category / Search / Sale / Deals / Tags /
       Brand / ...)
     - server side SectionRenderer.cs (homepage CMS sections)
     - client side JS template strings (AJAX "load more")

   Goals (all satisfied with pure CSS, no JS init):
     1. Always a SINGLE row — never wraps, so cards in the same grid row keep
        their titles / prices aligned.
     2. Never clips half a swatch — scroll-snap aligns to whole items and items
        never shrink.
     3. Works for AJAX-inserted cards automatically (no init, no re-bind).
     4. Zero FOUC / flicker — first paint is already the final layout, nothing
        is measured or rewritten by JS.

   Loaded unlayered + with one extra type selector (ul.swatch / li.item) so it
   beats the legacy @layer rules in assets/sass/style.css without an !important.
   ============================================================================ */

/* container is just a positioning context now (was flex+center, which forced a
   single 100%-wide child and let the inner list wrap) */
.product-card .card-swatch {
    display: block;
    position: relative;
    margin: 13px 0 0;
}

/* the actual horizontal scroller */
.product-card .card-swatch ul.swatch {
    display: flex;
    flex-wrap: nowrap;                 /* <-- single row, never wrap */
    align-items: center;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 2px 0;                    /* breathing room for borders / focus ring */
    list-style: none;

    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;     /* stop on whole swatches, never on a half */
    -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
    overscroll-behavior-x: contain;    /* don't trigger page/back-swipe while scrolling */

    /* hide the scrollbar (cross-browser) */
    scrollbar-width: none;             /* Firefox */
    -ms-overflow-style: none;          /* legacy Edge */

    /* right-edge fade = "there is more, scroll →" hint.
       It is background-independent (mask, not a colored overlay) and
       self-hiding: when the swatches don't reach the right edge the faded
       zone sits over empty space and is therefore invisible. */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%);
}

.product-card .card-swatch ul.swatch::-webkit-scrollbar {
    display: none;                     /* Chrome / Safari */
}

/* each swatch is a snap target that never grows or shrinks → no half-clip */
.product-card .card-swatch ul.swatch li.item {
    flex: 0 0 auto;
    margin: 0;                         /* spacing handled by the flex gap */
    scroll-snap-align: start;
}

/* trailing space so the LAST swatch can scroll clear of the fade zone and stay
   fully opaque at the end of the scroll (margin on the last child is honored
   for scroll extent in every browser, unlike container padding-right) */
.product-card .card-swatch ul.swatch li.item:last-child {
    margin-right: 16px;
}

/* desktop: a subtle cursor hint that the row is draggable/scrollable */
@media (hover: hover) and (pointer: fine) {
    .product-card .card-swatch ul.swatch {
        cursor: default;
    }
}