/**
 * Core Slider — استایل مشترک Hero + Carousel
 * Template/Theme، logical properties، فلش‌های nav، پایداری کاروسل و کارت
 */

/* ---- CSS Variables (سفارشی‌سازی per slider / per slide) ---- */
.slider-wrap,
.hero-shop-slider-wrap--fullwidth {
    --slider-accent: #fff;
    --slider-text: #fff;
    --slider-muted: rgba(255,255,255,0.85);
    --slider-btn-bg: #fff;
    --slider-btn-text: #111;
    --slider-overlay: rgba(0,0,0,0.35);
    --slider-radius: 8px;
    --slider-gap: 12px;
    --slider-font-fa: "Vazirmatn", "IRANSansX", sans-serif;
    --slider-font-en: "Inter", system-ui, sans-serif;
    --slider-font-zh: "Noto Sans SC", "PingFang SC", sans-serif;
    --slider-aspect: 4 / 3;
    --slider-card-min-height: 280px;
    --slider-card-height: auto;
    --slider-title-lines: 2;
    --slider-text-lines: 3;
    --slider-media-aspect: 4 / 3;
    /* Dots */
    --slider-dot-size: 10px;
    --slider-dot-color: rgba(255,255,255,0.5);
    --slider-dot-active-color: #fff;
    --slider-dot-radius: 50%;
    --slider-dot-width: 10px;
    --slider-dot-active-width: 24px;
    /* Nav */
    --slider-nav-bg: rgba(255,255,255,0.95);
    --slider-nav-color: #333;
    --slider-nav-size: 44px;
}

/* Font / زبان — fallback چندزبانه */
.slider-wrap [lang="fa"],
.slider-wrap [lang^="fa-"],
.hero-shop-slider-wrap--fullwidth [lang="fa"],
.hero-shop-slider-wrap--fullwidth [lang^="fa-"] {
    font-family: var(--slider-font-fa);
}
.slider-wrap [lang="en"],
.hero-shop-slider-wrap--fullwidth [lang="en"] {
    font-family: var(--slider-font-en);
}
.slider-wrap [lang^="zh"],
.hero-shop-slider-wrap--fullwidth [lang^="zh"] {
    font-family: var(--slider-font-zh);
}

/* ---- Wrapper (viewport) ---- */
.slider-wrap,
.hero-shop-slider-wrap--fullwidth {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: var(--slider-min-height, 0);
    overflow: hidden;
}
.slider-wrap[data-aspect],
.hero-shop-slider-wrap--fullwidth[data-aspect] {
    aspect-ratio: var(--slider-aspect, 16/9);
}
/* Hero: inner/track بدون min-height داخلی — ارتفاع فقط از wrapper (heightStrategy) تا ناحیه خاکستری و بیرون افتادن nav حذف شود */
.slider-mode-hero .slider-inner,
.slider-mode-hero .hero-slider-inner {
    position: relative;
    height: 100%;
    min-height: 0 !important;
}
.slider-mode-hero .slider-track,
.slider-mode-hero .hero-slider-track {
    min-height: 0 !important;
    height: 100%;
}

/* Placeholder: overlay روی layout اثر نمی‌گذارد؛ فقط opacity در ready */
.slider-placeholder,
.hero-slider-placeholder {
    position: absolute;
    inset: 0;
    height: 100%;
    background: #e5e5e5;
    z-index: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.slider-wrap:not(.slider-ready) .slider-placeholder,
.slider-wrap:not(.slider-ready) .hero-slider-placeholder,
.hero-shop-slider-wrap--fullwidth:not(.hero-slider-ready) .hero-slider-placeholder {
    opacity: 1;
}
.slider-wrap.slider-ready .slider-placeholder,
.hero-shop-slider-wrap--fullwidth.hero-slider-ready .hero-slider-placeholder {
    opacity: 0;
}

/* FOUC: baseline pre-init — کاروسل‌ها از ابتدا track افقی داشته باشند (قبل از JS) */
.slider-wrap-carousel .slider-track,
.slider-wrap-carousel .hero-slider-track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--slider-gap-px, var(--slider-gap, 12px));
}
.slider-wrap-carousel .slider-track > .slide,
.slider-wrap-carousel .slider-track > .hero-slide,
.slider-wrap-carousel .hero-slider-track > .slide,
.slider-wrap-carousel .hero-slider-track > .hero-slide {
    flex: 0 0 auto;
}

/* Inner + Track ---- carousel: containing block برای nav/dots (position:relative, height:auto)؛ Hero: height:100% در بلوک Hero */
.slider-inner,
.hero-slider-inner {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 1;
    overflow: hidden;
}
.slider-mode-carousel .slider-inner,
.slider-mode-carousel .hero-slider-inner {
    position: relative;
    height: auto;
}
/* پایهٔ افقی track (جلوگیری از FOUC/CLS) */
.slider-mode-carousel .slider-track,
.slider-mode-carousel .hero-slider-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    will-change: transform;
}
.slider-mode-carousel .slider-track > .slide,
.slider-mode-carousel .slider-track > .hero-slide {
    flex: 0 0 auto;
}
.slider-track,
.hero-slider-track {
    position: relative;
    width: 100%;
    min-height: 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: pan-y;
    transition: transform var(--slider-speed, 400ms) ease;
}
.slider-wrap.slider-dragging .slider-track,
.hero-shop-slider-wrap--fullwidth.hero-slider-dragging .hero-slider-track {
    cursor: grabbing;
}
.slider-track img,
.hero-slider-track img {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
    user-drag: none;
}

/* ========== حالت Hero (تک اسلاید) ========== */
.slider-mode-hero .slider-track,
.slider-mode-hero .hero-slider-track {
    display: block;
}
.slider-mode-hero .slide,
.slider-mode-hero .hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--slider-speed, 400ms) ease, visibility var(--slider-speed, 400ms) ease;
}
.slider-mode-hero .slide.is-ready.slider-slide-active,
.slider-mode-hero .slide.is-ready.hero-slide-active,
.slider-mode-hero .hero-slide.is-ready.slider-slide-active,
.slider-mode-hero .hero-slide.is-ready.hero-slide-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}
.slider-mode-hero .slide.is-ready:not(.slider-slide-active):not(.hero-slide-active),
.slider-mode-hero .hero-slide.is-ready:not(.slider-slide-active):not(.hero-slide-active) {
    z-index: 1;
}

/* Hero: ارتفاع و transition (با احترام به prefers-reduced-motion) */
.slider-mode-hero.slider-wrap,
.slider-mode-hero.hero-shop-slider-wrap--fullwidth {
    transition: height 250ms ease;
}
@media (prefers-reduced-motion: reduce) {
    .slider-mode-hero.slider-wrap,
    .slider-mode-hero.hero-shop-slider-wrap--fullwidth {
        transition: none;
    }
}

/* Hero: لایه media و تصویر — کنترل با CSS variables */
.slider-mode-hero .hero-media,
.hero-slide .hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    --hero-fit: cover;
    --hero-pos: center;
    --hero-bg-mode: none;
    --hero-bg-color: #000;
}
.slider-mode-hero .hero-bg,
.hero-slide .hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: var(--hero-pos, center);
    pointer-events: none;
}
.slider-mode-hero .hero-bg.hero-bg--blur,
.hero-slide .hero-bg.hero-bg--blur {
    filter: blur(12px);
    opacity: 0.85;
    transform: scale(1.05);
}
.slider-mode-hero .hero-bg.hero-bg--color,
.hero-slide .hero-bg.hero-bg--color {
    background-image: none;
}
.slider-mode-hero .hero-img,
.hero-slide .hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.slider-mode-hero .hero-img img,
.slider-mode-hero .hero-media img,
.hero-slide .hero-img img,
.hero-slide .hero-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: var(--hero-fit, cover) !important;
    object-position: var(--hero-pos, center) !important;
    display: block;
}
/* اسلاید بدون .hero-media (سازگاری با مارکاپ قدیمی) */
.slider-mode-hero .slide img:not(.hero-img img),
.slider-mode-hero .hero-slide img:not(.hero-img img) {
    object-fit: var(--hero-fit, cover) !important;
    object-position: var(--hero-pos, center) !important;
}

/* اثر Fade / Zoom */
.slider-effect-zoom .slide.is-ready.slider-slide-active,
.slider-effect-zoom .hero-slide.is-ready.hero-slide-active {
    animation: sliderZoomIn var(--slider-speed, 400ms) ease forwards;
}
@keyframes sliderZoomIn {
    from { transform: scale(1.05); }
    to { transform: scale(1); }
}

/* ========== حالت Carousel — ارتفاع پایدار، gap، عرض آیتم با px ========== */
.slider-mode-carousel .slider-track,
.slider-mode-carousel .hero-slider-track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--slider-gap-px, var(--slider-gap, 12px));
    height: 100%;
    align-items: stretch;
}
.slider-mode-carousel .slide,
.slider-mode-carousel .hero-slide {
    flex: 0 0 var(--slider-item-px, var(--slider-item-width, 33.333%));
    width: var(--slider-item-px, var(--slider-item-width, 33.333%));
    position: relative;
    opacity: 0.85;
    transition: opacity var(--slider-speed, 400ms) ease, transform var(--slider-speed, 400ms) ease;
    box-sizing: border-box;
}
.slider-mode-carousel .slide.is-ready,
.slider-mode-carousel .hero-slide.is-ready {
    opacity: 1;
}
.slider-mode-carousel .slide.slider-slide-active,
.slider-mode-carousel .slide.hero-slide-active,
.slider-mode-carousel .hero-slide.slider-slide-active,
.slider-mode-carousel .hero-slide.hero-slide-active {
    opacity: 1;
}
/* کارت‌ها: ارتفاع از محتوا؛ min-height فقط وقتی opts.minHeight صریح ست شده */
.slider-mode-carousel .slider-card,
.slider-mode-carousel .slide.slider-card,
.slider-mode-carousel .hero-slide.slider-card {
    height: var(--slider-card-height, auto);
    display: flex;
    flex-direction: column;
}
.slider-mode-carousel .card-title,
.slider-mode-carousel .caption-title {
    display: -webkit-box;
    -webkit-line-clamp: var(--slider-title-lines, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.slider-mode-carousel .card-text,
.slider-mode-carousel .caption-text {
    display: -webkit-box;
    -webkit-line-clamp: var(--slider-text-lines, 3);
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.slider-mode-carousel .card-media,
.slider-mode-carousel .slide .slider-media {
    aspect-ratio: var(--slider-media-aspect, 4 / 3);
    width: 100%;
    overflow: hidden;
}
.slider-mode-carousel .card-media img,
.slider-mode-carousel .slider-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Center mode */
.slider-center-mode .slide.is-center,
.slider-center-mode .hero-slide.is-center {
    transform: scale(1.08);
    opacity: 1;
    z-index: 2;
}
.slider-center-mode .slide.is-near,
.slider-center-mode .hero-slide.is-near {
    opacity: 0.9;
}
.slider-center-mode .slide:not(.is-center):not(.is-near),
.slider-center-mode .hero-slide:not(.is-center):not(.is-near) {
    opacity: 0.6;
}

/* تصویر داخل اسلاید — ارتفاع از خود تصویر */
.slide img,
.hero-slide img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Overlay / Brightness ---- */
.slider-overlay-on .slide,
.slider-overlay-on .hero-slide {
    position: relative;
}
.slider-overlay-on .slide::after,
.slider-overlay-on .hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--slider-overlay, rgba(0,0,0,0.3));
    pointer-events: none;
}
.slider-wrap[style*="--slider-brightness"] .slide img,
.slider-wrap[style*="--slider-brightness"] .hero-slide img {
    filter: brightness(var(--slider-brightness, 1));
}
.slide[data-overlay]::after,
.hero-slide[data-overlay]::after {
    background: var(--slide-overlay, rgba(0,0,0,0.3));
}

/* ========== دات‌ها ========== */
.slider-dots,
.hero-slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    z-index: 10;
    pointer-events: none;
}
.slider-dots.is-visible,
.hero-slider-dots.is-visible {
    pointer-events: auto;
}
.slider-dots.slider-dots--no-click,
.hero-slider-dots.slider-dots--no-click {
    pointer-events: none;
}
.slider-dots.slider-no-dots,
.hero-slider-dots.hero-slider-no-dots {
    display: none !important;
}
.slider-dot,
.hero-slider-dot {
    width: var(--slider-dot-width, var(--slider-dot-size, 10px));
    height: var(--slider-dot-size, 10px);
    border-radius: var(--slider-dot-radius, 50%);
    background: var(--slider-dot-color, rgba(255,255,255,0.5));
    border: 1px solid rgba(0,0,0,0.15);
    padding: 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, width 0.2s;
    box-sizing: border-box;
}
.slider-dot:hover:not(.slider-dot--no-click),
.hero-slider-dot:hover:not(.slider-dot--no-click) {
    background: rgba(255,255,255,0.8);
}
.slider-dot.is-active,
.hero-slider-dot.is-active {
    background: var(--slider-dot-active-color, #fff);
    transform: scale(1.15);
}
/* خطی (Owl-style) */
.slider-dot.slider-dot--line,
.hero-slider-dot.slider-dot--line {
    width: var(--slider-dot-width, 12px);
    height: 4px;
    border-radius: 2px;
}
.slider-dot.slider-dot--line.is-active,
.hero-slider-dot.slider-dot--line.is-active {
    width: var(--slider-dot-active-width, 24px);
    transform: none;
}
/* تامبنیل */
.slider-dot.slider-dot--thumb,
.hero-slider-dot.slider-dot--thumb {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    overflow: hidden;
    padding: 0;
}
.slider-dot-thumb {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}
.slider-dot.slider-dot--no-click,
.hero-slider-dot.slider-dot--no-click {
    cursor: default;
    pointer-events: none;
}

/* ========== قرارگیری Nav و Dots (UI placement) ========== */
/* پیش‌فرض: داخل پایین — absolute نسبت به inner/viewport */
.slider-nav-inside-bottom .slider-nav-wrap,
.slider-nav-inside-bottom .hero-slider-nav-wrap,
.slider-dots-inside-bottom .slider-dots,
.slider-dots-inside-bottom .hero-slider-dots {
    position: absolute;
    z-index: 10;
}
.slider-nav-inside-bottom .slider-nav-wrap,
.slider-nav-inside-bottom .hero-slider-nav-wrap {
    bottom: 20px;
    inset-inline-end: 20px;
}
.slider-dots-inside-bottom .slider-dots,
.slider-dots-inside-bottom .hero-slider-dots {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}
.slider-nav-inside-center-sides .slider-nav-wrap,
.slider-nav-inside-center-sides .hero-slider-nav-wrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    inset-inline-end: auto;
    z-index: 10;
}
.slider-nav-inside-center-sides .slider-nav-wrap,
.slider-nav-inside-center-sides .hero-slider-nav-wrap {
    inset-inline-start: 0;
    inset-inline-end: 0;
    display: block;
    pointer-events: none;
}
.slider-nav-inside-center-sides .slider-prev,
.slider-nav-inside-center-sides .hero-slider-nav-btn.slider-prev {
    position: absolute;
    inset-inline-start: 12px;
    pointer-events: auto;
}
.slider-nav-inside-center-sides .slider-next,
.slider-nav-inside-center-sides .hero-slider-nav-btn.slider-next {
    position: absolute;
    inset-inline-end: 12px;
    pointer-events: auto;
}
.slider-nav-inside-top .slider-nav-wrap,
.slider-nav-inside-top .hero-slider-nav-wrap {
    position: absolute;
    top: 20px;
    bottom: auto;
    inset-inline-end: 20px;
    z-index: 10;
}
/* outside: nav/dots به‌عنوان sibling زیر inner — wrapper فلکس ستون */
.slider-nav-outside-bottom .slider-inner,
.slider-nav-outside-bottom .hero-slider-inner,
.slider-dots-outside-bottom .slider-inner,
.slider-dots-outside-bottom .hero-slider-inner {
    flex: 1 1 auto;
    min-height: 0;
}
.slider-wrap.slider-nav-outside-bottom,
.slider-wrap.slider-dots-outside-bottom,
.hero-shop-slider-wrap--fullwidth.slider-nav-outside-bottom,
.hero-shop-slider-wrap--fullwidth.slider-dots-outside-bottom {
    display: flex;
    flex-direction: column;
}
.slider-nav-outside-bottom .slider-nav-wrap,
.slider-dots-outside-bottom .slider-dots {
    flex: 0 0 auto;
    position: static;
    margin-top: 12px;
}
.slider-dots-outside-bottom .slider-dots,
.slider-dots-outside-bottom .hero-slider-dots {
    transform: none;
    left: auto;
    bottom: auto;
    align-self: center;
}
.slider-wrap.slider-nav-outside-top-start,
.slider-wrap.slider-nav-outside-top-end,
.hero-shop-slider-wrap--fullwidth.slider-nav-outside-top-start,
.hero-shop-slider-wrap--fullwidth.slider-nav-outside-top-end {
    display: flex;
    flex-direction: column;
}
.slider-nav-outside-top-start .slider-inner,
.slider-nav-outside-top-end .slider-inner,
.slider-nav-outside-top-start .hero-slider-inner,
.slider-nav-outside-top-end .hero-slider-inner {
    flex: 1 1 auto;
    min-height: 0;
}
.slider-nav-outside-top-start .slider-nav-wrap,
.slider-nav-outside-top-end .slider-nav-wrap {
    position: static;
    flex: 0 0 auto;
    margin-bottom: 12px;
    order: -1;
}
.slider-nav-outside-top-start .slider-nav-wrap { align-self: flex-start; }
.slider-nav-outside-top-end .slider-nav-wrap { align-self: flex-end; }

/* ========== دکمه‌های prev/next — جهت فلش (LTR: prev←, next→ | RTL: prev→, next←) ========== */
.slider-nav-wrap,
.hero-slider-nav-wrap {
    display: flex;
    flex-direction: row;
    gap: var(--slider-gap, 10px);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.slider-wrap.slider-nav-visible .slider-nav-wrap,
.slider-wrap:hover .slider-nav-wrap,
.hero-shop-slider-wrap--fullwidth.hero-slider-nav-visible .hero-slider-nav-wrap,
.hero-shop-slider-wrap--fullwidth:hover .hero-slider-nav-wrap {
    opacity: 1;
    pointer-events: auto;
}
.slider-nav-btn,
.hero-slider-nav-btn {
    pointer-events: auto;
    width: var(--slider-nav-size, 44px);
    height: var(--slider-nav-size, 44px);
    min-width: var(--slider-nav-size, 44px);
    min-height: var(--slider-nav-size, 44px);
    border-radius: 50%;
    background: var(--slider-nav-bg, var(--slider-btn-bg, rgba(255,255,255,0.95)));
    border: 1px solid rgba(0,0,0,0.08);
    color: var(--slider-nav-color, var(--slider-btn-text, #333));
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    transition: background 0.2s, color 0.2s, opacity 0.2s;
    cursor: pointer;
}
.slider-nav-btn:hover:not(.is-disabled),
.hero-slider-nav-btn:hover:not(.is-disabled) {
    background: #fff;
    color: #000;
}
.slider-nav-btn.is-disabled,
.hero-slider-nav-btn.is-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}
.slider-nav-btn .slider-nav-icon,
.hero-slider-nav-btn .slider-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
}
.slider-nav-btn .slider-nav-icon svg,
.hero-slider-nav-btn .slider-nav-icon svg {
    width: 100%;
    height: 100%;
}
/* آیکن پایه = راست (→). LTR: prev با flip = چپ (←)، next بدون flip = راست (→). RTL: prev بدون flip = راست (→)، next با flip = چپ (←) */
.slider-nav-prev .slider-nav-icon,
.hero-slider-nav-btn.slider-nav-prev .slider-nav-icon {
    transform: scaleX(-1);
}
.slider-nav-next .slider-nav-icon,
.hero-slider-nav-btn.slider-nav-next .slider-nav-icon {
    transform: scaleX(1);
}
[dir="rtl"] .slider-nav-prev .slider-nav-icon,
[dir="rtl"] .hero-slider-nav-btn.slider-nav-prev .slider-nav-icon,
[data-slider-dir="rtl"] .slider-nav-prev .slider-nav-icon,
[data-slider-dir="rtl"] .hero-slider-nav-btn.slider-nav-prev .slider-nav-icon {
    transform: scaleX(1);
}
[dir="rtl"] .slider-nav-next .slider-nav-icon,
[dir="rtl"] .hero-slider-nav-btn.slider-nav-next .slider-nav-icon,
[data-slider-dir="rtl"] .slider-nav-next .slider-nav-icon,
[data-slider-dir="rtl"] .hero-slider-nav-btn.slider-nav-next .slider-nav-icon {
    transform: scaleX(-1);
}

/* ========== قالب‌های کپشن (Template) — logical properties برای RTL/LTR ========== */
.slider-template-none .slide-caption,
.slider-template-none .hero-slide-caption {
    display: none;
}

.slider-template-bottom-start .slide-caption,
.slider-template-bottom-start .hero-slide-caption {
    position: absolute;
    bottom: 24px;
    inset-inline-start: 24px;
    inset-inline-end: auto;
    max-inline-size: 70%;
    text-align: start;
    color: var(--slider-text, #fff);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.slider-template-bottom-end .slide-caption,
.slider-template-bottom-end .hero-slide-caption {
    position: absolute;
    bottom: 24px;
    inset-inline-end: 24px;
    inset-inline-start: auto;
    max-inline-size: 70%;
    text-align: end;
    color: var(--slider-text, #fff);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.slider-template-center .slide-caption,
.slider-template-center .hero-slide-caption {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    max-inline-size: 85%;
    color: var(--slider-text, #fff);
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.slider-template-split .slide-caption,
.slider-template-split .hero-slide-caption {
    position: absolute;
    inset-inline-start: 24px;
    inset-inline-end: auto;
    top: 50%;
    transform: translateY(-50%);
    max-inline-size: 50%;
    text-align: start;
    color: var(--slider-text, #fff);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.slider-template-overlay-card .slide-caption,
.slider-template-overlay-card .hero-slide-caption {
    position: absolute;
    inset-inline-start: 24px;
    inset-inline-end: 24px;
    bottom: 24px;
    padding: 1rem 1.25rem;
    background: var(--slider-overlay, rgba(0,0,0,0.5));
    border-radius: var(--slider-radius, 8px);
    color: var(--slider-text, #fff);
    text-align: start;
}

/* سازگاری با نام‌های قدیمی */
.slider-template-bottom-right .slide-caption,
.slider-template-bottom-right .hero-slide-caption {
    position: absolute;
    bottom: 24px;
    inset-inline-end: 24px;
    inset-inline-start: auto;
    text-align: end;
    color: var(--slider-text, #fff);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.slider-template-bottom-left .slide-caption,
.slider-template-bottom-left .hero-slide-caption {
    position: absolute;
    bottom: 24px;
    inset-inline-start: 24px;
    inset-inline-end: auto;
    text-align: start;
    color: var(--slider-text, #fff);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.slide-caption .caption-title,
.hero-slide-caption .caption-title {
    margin: 0 0 0.35em;
    font-size: 1.5rem;
    color: inherit;
}
.slide-caption .caption-text,
.hero-slide-caption .caption-text {
    margin: 0 0 0.5em;
    font-size: 1rem;
    color: var(--slider-muted, rgba(255,255,255,0.9));
}
.slide-caption .caption-btn,
.hero-slide-caption .caption-btn {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.5em 1em;
    background: var(--slider-btn-bg, #fff);
    color: var(--slider-btn-text, #111);
    border-radius: var(--slider-radius, 8px);
    text-decoration: none;
    font-size: 0.95rem;
    transition: opacity 0.2s;
}
.slide-caption .caption-btn:hover,
.hero-slide-caption .caption-btn:hover {
    opacity: 0.9;
}
.slide-caption a,
.hero-slide-caption a {
    color: inherit;
    cursor: pointer;
}

/* ========== Theme ها ========== */
.slider-theme-default .slider-dot.is-active,
.slider-theme-default .slider-dot.is-active {
    background: #fff;
}
.slider-theme-dark .slider-dot,
.slider-theme-dark .hero-slider-dot {
    background: rgba(255,255,255,0.35);
    border-color: rgba(255,255,255,0.2);
}
.slider-theme-dark .slider-dot.is-active,
.slider-theme-dark .hero-slider-dot.is-active {
    background: #fff;
}
.slider-theme-dark .slider-nav-btn,
.slider-theme-dark .hero-slider-nav-btn {
    background: rgba(0,0,0,0.4);
    color: #fff;
    border-color: rgba(255,255,255,0.2);
}
.slider-theme-dark .slider-nav-btn:hover:not(.is-disabled),
.slider-theme-dark .hero-slider-nav-btn:hover:not(.is-disabled) {
    background: rgba(0,0,0,0.6);
    color: #fff;
}
.slider-theme-light .slider-dot,
.slider-theme-light .hero-slider-dot {
    background: rgba(0,0,0,0.2);
    border-color: rgba(0,0,0,0.15);
}
.slider-theme-light .slider-dot.is-active,
.slider-theme-light .hero-slider-dot.is-active {
    background: #333;
}
.slider-theme-light .slide-caption,
.slider-theme-light .hero-slide-caption {
    color: #111;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}
.slider-theme-brand-red .slider-dot.is-active,
.slider-theme-brand-red .hero-slider-dot.is-active {
    background: #c00;
}
.slider-theme-brand-red .slider-nav-btn,
.slider-theme-brand-red .hero-slider-nav-btn {
    background: rgba(204,0,0,0.9);
    color: #fff;
}
.slider-theme-brand-red .slider-nav-btn:hover:not(.is-disabled),
.slider-theme-brand-red .hero-slider-nav-btn:hover:not(.is-disabled) {
    background: #c00;
    color: #fff;
}
.slider-theme-brand-red .slide-caption .caption-btn,
.slider-theme-brand-red .hero-slide-caption .caption-btn {
    background: #c00;
    color: #fff;
}
.slider-theme-minimal .slider-dot,
.slider-theme-minimal .hero-slider-dot {
    background: rgba(255,255,255,0.4);
    border: none;
}
.slider-theme-minimal .slider-dot.is-active,
.slider-theme-minimal .hero-slider-dot.is-active {
    background: #fff;
    transform: scale(1);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
}
.slider-theme-minimal .slider-nav-btn,
.slider-theme-minimal .hero-slider-nav-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.6);
    color: #fff;
}
.slider-theme-minimal .slider-nav-btn:hover:not(.is-disabled),
.slider-theme-minimal .hero-slider-nav-btn:hover:not(.is-disabled) {
    background: rgba(255,255,255,0.15);
}

/* ========== دموهای Hover/Clickable Card (فقط تحت scope این wrapperها) ========== */
/* اسلاید در کاروسل پیش‌فرض aspect-ratio دارد و ارتفاع ثابت → عنوان/CTA زیر عکس بریده می‌شوند. اینجا ارتفاع اسلاید را با محتوا تطبیق می‌دهیم. */
#demo-hover-title-only-wrap .slide,
#demo-hover-title-cta-wrap .slide,
#demo-hover-overlay-zoom-wrap .slide,
#demo-hover-overlay-caption-wrap .slide,
#demo-hover-strip-expand-wrap .slide,
#demo-products-latest-wrap .slide,
#articles-demo-wrap .slide {
    aspect-ratio: auto;
    min-height: 0;
    height: auto;
    display: block;
    width: var(--slider-item-px, 33.333%);
    flex: 0 0 var(--slider-item-px, 33.333%);
}
#demo-hover-title-only-wrap .slide-link,
#demo-hover-title-cta-wrap .slide-link,
#demo-hover-overlay-zoom-wrap .slide-link,
#demo-hover-overlay-caption-wrap .slide-link,
#demo-hover-strip-expand-wrap .slide-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
#demo-hover-title-only-wrap .slide-media,
#demo-hover-title-cta-wrap .slide-media,
#demo-hover-overlay-zoom-wrap .slide-media,
#demo-hover-overlay-caption-wrap .slide-media,
#demo-hover-strip-expand-wrap .slide-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
}
#demo-hover-title-only-wrap .slide-media img,
#demo-hover-title-cta-wrap .slide-media img,
#demo-hover-overlay-zoom-wrap .slide-media img,
#demo-hover-overlay-caption-wrap .slide-media img,
#demo-hover-strip-expand-wrap .slide-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform 0.35s ease;
}
#demo-hover-title-only-wrap .slide-overlay,
#demo-hover-title-cta-wrap .slide-overlay,
#demo-hover-overlay-zoom-wrap .slide-overlay,
#demo-hover-overlay-caption-wrap .slide-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    background: var(--slide-overlay, rgba(0,0,0,0.25));
}
/* عنوان و CTA زیر تصویر (A/B/C) — حتماً قابل مشاهده */
#demo-hover-title-only-wrap .slide-content,
#demo-hover-title-cta-wrap .slide-content,
#demo-hover-overlay-zoom-wrap .slide-content {
    display: block;
    padding-top: 10px;
}
#demo-hover-title-only-wrap .slide-title,
#demo-hover-title-cta-wrap .slide-title,
#demo-hover-overlay-zoom-wrap .slide-title {
    display: block;
    visibility: visible;
    color: #111;
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    transition: color 0.2s ease;
}
/* دمو A: عنوان زیر عکس، بالای دات‌ها (مثل پیشنهاد ویژه)، یک سطر با ... */
#demo-hover-title-only-wrap .slide-content {
    padding-top: 10px;
    padding-bottom: 4px;
}
#demo-hover-title-only-wrap .slide-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#demo-hover-title-only-wrap .hover-title-only:hover .slide-title {
    color: #8B1A1A;
}
#demo-hover-title-cta-wrap .slide-cta,
#demo-hover-overlay-zoom-wrap .slide-cta {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.2);
    color: #111;
    background: transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* A) Hover Title Only — زرشکی #8B1A1A */
#demo-hover-title-only-wrap .hover-title-only:hover .slide-title {
    color: #8B1A1A;
}
/* B) عنوان و CTA داخل تصویر پایین — عنوان با ...، هاور CTA بوردر زرشکی، دات بیرون با فاصله کمتر */
#demo-hover-title-cta-wrap .slide-media.caption-on-media {
    position: relative;
}
#demo-hover-title-cta-wrap .slide-media.caption-on-media img {
    z-index: 0;
    position: relative;
}
#demo-hover-title-cta-wrap .slide-media .slide-overlay {
    z-index: 1;
}
#demo-hover-title-cta-wrap .slide-content.on-media {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 16px;
}
#demo-hover-title-cta-wrap .slide-content.on-media .slide-title {
    margin: 0 0 0.35em;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#demo-hover-title-cta-wrap .slide-content.on-media .slide-cta {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.7);
    background: rgba(0,0,0,0.2);
    color: #fff;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
#demo-hover-title-cta-wrap .hover-title-cta:hover .slide-title {
    color: #8B1A1A;
}
#demo-hover-title-cta-wrap .hover-title-cta:hover .slide-cta {
    background: rgba(139,26,26,0.25);
    color: #fff;
    border-color: #8B1A1A;
}
#demo-hover-title-cta-wrap.slider-dots-outside-bottom .slider-dots {
    margin-top: 4px;
}
/* C) Hover Overlay + Zoom — عنوان ردیف اول راست‌چین، دکمه ردیف دوم سمت چپ */
#demo-hover-overlay-zoom-wrap .slide-content {
    direction: rtl;
}
#demo-hover-overlay-zoom-wrap .slide-title {
    display: block;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px;
}
#demo-hover-overlay-zoom-wrap .slide-cta {
    display: block;
    margin-inline-start: auto;
    text-align: center;
}
#demo-hover-overlay-zoom-wrap .hover-overlay:hover .slide-overlay {
    opacity: 1;
}
#demo-hover-overlay-zoom-wrap .hover-overlay:hover .slide-media img {
    transform: scale(1.06);
}
/* C) فقط overlay+zoom روی تصویر؛ عنوان/CTA زیر عکس بدون تغییر استایل در hover */
/* D) Overlay + Caption on Media — متن CTA همیشه سفید */
#demo-hover-overlay-caption-wrap .caption-on-media .slide-overlay {
    z-index: 1;
}
#demo-hover-overlay-caption-wrap .caption-on-media img {
    z-index: 0;
    position: relative;
}
#demo-hover-overlay-caption-wrap .slide-content.on-media {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 16px;
}
#demo-hover-overlay-caption-wrap .slide-content.on-media .slide-title {
    color: #fff;
    margin: 0 0 0.25em;
    font-size: 15px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#demo-hover-overlay-caption-wrap .slide-cta {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.7);
    background: rgba(0,0,0,0.2);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
#demo-hover-overlay-caption-wrap .slide-link:hover .slide-cta {
    color: #fff;
    background: var(--cta-bg-hover, rgba(255,255,255,0.35));
    border-color: rgba(255,255,255,0.8);
}
#demo-hover-overlay-caption-wrap .hover-overlay-caption:hover .slide-cta {
    color: #fff;
    background: rgba(255,255,255,0.35);
    border-color: rgba(255,255,255,0.8);
}
#demo-hover-overlay-caption-wrap .hover-overlay-caption:hover .slide-overlay {
    opacity: 1;
}
#demo-hover-overlay-caption-wrap .hover-overlay-caption:hover .caption-on-media img {
    transform: scale(1.06);
}
#demo-hover-overlay-caption-wrap .hover-overlay-caption:hover .slide-title {
    color: #fff;
}

/* E) نوار overlay پایین — نوار باریک به‌اندازه عنوان، خلاصه با ...؛ هاور: گسترش، عنوان کامل، شفافیت کمتر */
#demo-hover-strip-expand-wrap .slide-media.strip-overlay-wrap img {
    z-index: 0;
    position: relative;
    transition: transform 0.4s ease;
}
#demo-hover-strip-expand-wrap .slide-overlay-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 52px;
    z-index: 1;
    background: rgba(0,0,0,0.41);
    display: flex;
    align-items: flex-start;
    padding: 10px 16px;
    box-sizing: border-box;
    transition: height 0.4s ease;
}
#demo-hover-strip-expand-wrap .slide-overlay-strip .slide-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 0 8px rgba(255,255,255,0.7), 0 0 14px rgba(255,255,255,0.35), 0 1px 2px rgba(0,0,0,0.4);
    text-align: right;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    transition: color 0.35s ease, opacity 0.25s ease;
}
#demo-hover-strip-expand-wrap .hover-strip-expand:hover .slide-media img {
    transform: scale(1.06);
}
#demo-hover-strip-expand-wrap .hover-strip-expand:hover .slide-overlay-strip {
    height: 50%;
}
#demo-hover-strip-expand-wrap .hover-strip-expand:hover .slide-overlay-strip .slide-title {
    color: #8B1A1A;
    font-size: 0.95rem;
    text-shadow: 0 0 8px rgba(139,26,26,0.6), 0 0 14px rgba(139,26,26,0.3), 0 1px 2px rgba(0,0,0,0.35);
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}
#demo-hover-strip-expand-wrap.slider-dots-outside-bottom .slider-dots {
    margin-top: 6px;
}
#demo-hover-strip-expand-wrap.slider-dots-outside-bottom {
    padding-bottom: 18px;
    overflow: visible;
}

/* ========== F) جدیدترین محصولات — کارت، تصویر با فاصله، عنوان، خلاصه، دسته، خط جداکننده، توضیحات + قیمت تومان، دات بیرون، ناو بزرگتر ========== */
#demo-products-latest-wrap {
    --slider-nav-size: 56px;
}
#demo-products-latest-wrap .slide {
    padding: 0 6px;
    box-sizing: border-box;
}
#demo-products-latest-wrap .product-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    direction: rtl;
    text-align: right;
}
#demo-products-latest-wrap .product-card__image-wrap {
    padding: 14px 14px 0;
    flex: 0 0 auto;
}
#demo-products-latest-wrap .product-card__image-wrap img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    display: block;
    background: #f8f8f8;
    border-radius: 8px;
}
#demo-products-latest-wrap .product-card__title {
    margin: 10px 14px 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #222;
    line-height: 1.35;
}
#demo-products-latest-wrap .product-card__summary {
    margin: 0 14px 10px;
    font-size: 0.8rem;
    color: #555;
    line-height: 1.5;
    min-height: 3.6rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#demo-products-latest-wrap .product-card__category {
    display: inline-block;
    width: fit-content;
    margin: 0 14px 8px;
    padding: 4px 10px;
    background: #e67e22;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 6px;
}
#demo-products-latest-wrap .product-card__sep {
    border: none;
    height: 1px;
    background: #e0e0e0;
    margin: 0 14px;
}
#demo-products-latest-wrap .product-card__bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px 14px;
    gap: 10px;
}
#demo-products-latest-wrap .product-card__details {
    color: #333;
    font-size: 0.85rem;
    text-decoration: none;
    border: 1px solid transparent;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
#demo-products-latest-wrap .product-card__details:hover {
    color: #8B1A1A;
    border-color: #8B1A1A;
}
#demo-products-latest-wrap .product-card__contact {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1976d2;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}
#demo-products-latest-wrap .product-card__contact:hover {
    color: #0d47a1;
}
#demo-products-latest-wrap .product-card__price {
    font-size: 0.9rem;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
}
#demo-products-latest-wrap.slider-dots-outside-bottom .slider-dots {
    margin-top: 14px;
}
#demo-products-latest-wrap.slider-dots-outside-bottom {
    padding-bottom: 8px;
    overflow: visible;
}

/* ========== دمو مطالب و مقالات — scoped به #articles-demo-wrap ========== */
#articles-demo-wrap .slide {
    padding: 0 6px;
    box-sizing: border-box;
}
#articles-demo-wrap .article-card {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
#articles-demo-wrap .article-media {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 16 / 9;
}
#articles-demo-wrap .article-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 350ms ease;
}
#articles-demo-wrap .article-curve {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 42px;
    background: var(--page-bg, #fff);
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    transform: translateY(0);
    transition: transform 350ms ease;
    pointer-events: none;
}
#articles-demo-wrap .article-card:hover .article-curve {
    transform: translateY(-100%);
}
#articles-demo-wrap .article-card:hover .article-media img {
    transform: scale(1.06);
}
#articles-demo-wrap .article-body {
    padding-top: 12px;
    direction: rtl;
    text-align: right;
}
#articles-demo-wrap .article-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 0.4em;
    font-size: 1rem;
    font-weight: 600;
    color: #222;
    line-height: 1.4;
    transition: color 0.2s ease;
}
#articles-demo-wrap .article-body {
    display: flex;
    flex-direction: column;
}
#articles-demo-wrap .article-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 0.5em;
    font-size: 0.85rem;
    color: #555;
    line-height: 1.5;
}
#articles-demo-wrap .article-more {
    display: block;
    font-size: 0.85rem;
    color: #dc3545;
    font-weight: 700;
    transition: color 0.2s ease;
    align-self: flex-end;
    margin-top: 0;
}
#articles-demo-wrap .article-card:hover .article-title,
#articles-demo-wrap .article-card:hover .article-more {
    color: #8B1A1A;
}
#articles-demo-wrap.slider-nav-hidden .slider-nav-wrap {
    display: none !important;
}
#articles-demo-wrap .slider-dots {
    margin-top: 33px;
}
#articles-demo-wrap.slider-dots-inside-bottom {
    padding-bottom: 28px;
}

/* ========== هدر سکشن دمو مطالب و مقالات — مشابه owl-carousel (has-line, has-more, وسط‌چین عنوان، خط‌ها، هاور) ========== */
.articles-demo-section .section-title.has-more.has-line {
    position: relative;
    z-index: 0;
    text-align: center;
    margin-bottom: 0.5rem;
    width: 100%;
}
.articles-demo-section .section-title.has-more.has-line > strong {
    background: #fff;
    padding: 0.25rem 1rem;
    font-size: 2rem;
    font-weight: bold;
}
.articles-demo-section .section-title.has-more.has-line::after,
.articles-demo-section .section-title.has-more.has-line::before {
    display: block;
    z-index: -1;
    position: absolute;
    content: "";
    background: #eaeaea;
    top: 55%;
    -webkit-transform: translateY(-20%);
    transform: translateY(-20%);
    height: 2px;
}
.articles-demo-section .section-title.has-more.has-line::after {
    left: 50%;
    width: 50%;
}
.articles-demo-section .section-title.has-more.has-line::before {
    right: 50%;
    width: 36%;
}
.articles-demo-section .section-title.has-more.has-line > a {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: inherit;
    text-decoration: none;
    transition: color 0.5s cubic-bezier(0.23, 1, 0.32, 1), word-spacing 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.articles-demo-section .section-title.has-more.has-line > a i {
    transition: padding-inline-end 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.articles-demo-section .section-title.has-more.has-line > a:hover {
    color: #f1122f;
    word-spacing: 3px;
}
.articles-demo-section .section-title.has-more.has-line > a:hover > i {
    -webkit-padding-end: 10px;
    padding-inline-end: 10px;
}
@media (max-width: 768px) {
    .articles-demo-section .section-title.has-more.has-line > strong {
        font-size: 1.5rem;
    }
    .articles-demo-section .section-title.has-more.has-line::before {
        width: 50%;
    }
    .articles-demo-section .section-title.has-more.has-line > a {
        -webkit-transform: translateY(-200%);
        transform: translateY(-200%);
    }
}
@media (max-width: 575px) {
    .articles-demo-section .section-title.has-more.has-line > strong {
        font-size: 1.3rem;
    }
}