/* ============================================================================
   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;
}

/* swatch 尺寸(40px/30px)已移至 layout-ella.css — 仅 ella 布局生效。
   非 ella 品牌保留 CBDStyle 原有尺寸(26px)，互不干扰。 */

/* trailing space so the LAST swatch can scroll clear of the fade zone and stay… 同上 */
.product-card .card-swatch ul.swatch li.item:last-child {
    margin-right: 16px;
}

/* swatch hover 预览(.pc-previewing 由 card-swatch.js 加到 .product-card-media)：
   临时压制 card-hover 的"显示第二张图/视频"，强制显示第一张(已换成该 swatch 颜色)。
   第二张图/视频本身不动，仅临时隐藏；离开 swatch 后恢复 card 正常 hover。
   本文件 unlayered → 胜过 @layer legacy 里同特异性的 card-media-toggle:hover 规则。 */
.product-card .product-card-top .product-card-media.pc-previewing .card-media-img,
.product-card .product-card-top .product-card-media.pc-previewing:hover .card-media-img {
    opacity: 1 !important;
}
.product-card .product-card-top .product-card-media.pc-previewing .card-media-img2,
.product-card .product-card-top .product-card-media.pc-previewing:hover .card-media-img2,
.product-card .product-card-top .product-card-media.pc-previewing .card-media-video {
    opacity: 0 !important;
}

/* desktop: grab cursor hint when the swatch row overflows (more colours hidden) */
@media (hover: hover) and (pointer: fine) {
    .product-card .card-swatch ul.swatch { cursor: grab; }
    .product-card .card-swatch ul.swatch.pc-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
    .product-card .card-swatch ul.swatch.pc-dragging .swatch-label { pointer-events: none; }
}