/*
 * card-gallery.css — «گالری هاور روی کارت محصول»
 * ---------------------------------------------------------------
 * فقط وقتی GlobalSettings.IsCardHoverGallery روشن است از _Layout بارگذاری می‌شود (JS: card-gallery.js).
 * overlay را JS داخل .proImg و بعد از <picture> می‌گذارد؛ پس ریبون/رنگ‌ها/وضعیت/برند (که بعد از عکس می‌آیند) روی آن می‌مانند.
 * رنگ‌ها از توکن‌های Bootstrap با پیش‌فرض specificity صفر (:where) تا رنگ‌های مستاجر همیشه برنده باشند.
 * برای شخصی‌سازی در tenants/{domain}/site.css فقط --kw-cg-* را بازنویسی کن.
 */
:where(:root) {
    --kw-cg-accent: var(--LogoOrgColor, var(--bs-primary, #e6456f));
    --kw-cg-arrow-bg: var(--bs-body-bg, #fff);
    --kw-cg-arrow-color: var(--bs-emphasis-color, #1f2937);
    --kw-cg-dot: var(--bs-border-color, #cfd4da);
}

/* لایه‌ی روی عکس کارت؛ خودش رویداد ماوس/لمس نمی‌گیرد (کلیک روی عکس به صفحه‌ی محصول می‌رود و حرکت ماوس/سوایپ به .proImg می‌رسد) */
.proImg .kwcg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.proImg .kwcg-layer {
    position: absolute;
    inset: 0;
}

/* .proImg img در style_preload.css (ارتفاع ۱۰۰٪، object-fit، transition) برای همه‌ی عکس‌ها اعمال می‌شود؛ اینجا با دو کلاس بازنویسی می‌شود */
.proImg .kwcg-layer .kwcg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .2s ease;
}

    .proImg .kwcg-layer .kwcg-img.is-active.is-loaded {
        opacity: 1;
    }

/* فلش‌ها (جهت فیزیکی چپ/راست؛ JS در RTL «بعدی» را سمت چپ می‌گذارد) */
.proImg .kwcg-arrow {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    border-radius: 50%;
    background: var(--kw-cg-arrow-bg);
    color: var(--kw-cg-arrow-color);
    box-shadow: 0 1px 5px rgba(0, 0, 0, .25);
    opacity: 0;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity .15s ease, transform .15s ease;
}

.proImg:hover .kwcg-arrow {
    opacity: .92;
}

.proImg .kwcg-arrow:hover {
    opacity: 1;
    transform: scale(1.08);
}

.proImg .kwcg-left {
    left: 8px;
}

.proImg .kwcg-right {
    right: 8px;
}

.proImg .kwcg-arrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
}

.proImg .kwcg-right::before {
    transform: translateX(-2px) rotate(-45deg);
}

.proImg .kwcg-left::before {
    transform: translateX(2px) rotate(135deg);
}

/* نقطه‌ها: فقط نشانگر (بدون رویداد) */
.proImg .kwcg-dots {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 5px;
    opacity: 0;
    transition: opacity .15s ease;
}

.proImg:hover .kwcg-dots {
    opacity: 1;
}

.proImg .kwcg-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kw-cg-dot);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), 0 0 2px 1px rgba(0, 0, 0, .25);
    transition: background-color .15s ease, transform .15s ease;
}

    .proImg .kwcg-dot.is-active {
        background: var(--kw-cg-accent);
        transform: scale(1.25);
    }

/* ───────────── لمسی (آیفون/اندروید): بدون هاور ─────────────
   - سوایپ افقی را JS می‌گیرد و اسکرول عمودی صفحه بومی می‌ماند؛ فقط کارت‌های چندعکسی (kwcg-ready) این را می‌گیرند
   - نقطه‌ها همیشه دیده می‌شوند (هم نشانگر اسلاید، هم راهنمای «این محصول عکس بیشتر دارد»)؛ فلش‌ها لازم نیست */
@media (hover: none) and (pointer: coarse) {
    .proImg.kwcg-ready {
        touch-action: pan-y;
    }

        .proImg.kwcg-ready .kwcg-img {
            -webkit-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
        }

    .proImg .kwcg-dots {
        opacity: 1;
    }

    .proImg .kwcg-arrow {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .proImg .kwcg-layer .kwcg-img,
    .proImg .kwcg-arrow,
    .proImg .kwcg-dots,
    .proImg .kwcg-dot {
        transition: none;
    }
}