/* ==========================================================================
   هسته‌ی ظاهریِ فروشگاه (بلوک‌های مشترکِ فرانتِ جدید)
   - همه‌ی رنگ‌ها، اندازه‌ها و حرکت‌ها از توکن‌ها می‌آن (css/storefront-tokens.css + theme.css تمِ فعال).
   - نام‌ها با پیشوندِ sf- شروع می‌شن تا با کلاس‌های قدیمیِ سایت قاطی نشن.
   - برای تغییرِ ظاهر فقط توکن‌ها رو توی theme.css عوض کن؛ این فایل رو دست نزن.
   ========================================================================== */

.storefront-theme {
    /* ===== توکن‌های فرانتِ جدید (مقدارِ پیش‌فرض؛ هر تم می‌تونه عوضشون کنه) ===== */
    --sf-container: var(--container-width, 1280px);
    --sf-gutter: 16px;
    --sf-section-gap: var(--section-spacing, 36px);
    --sf-rail-gap: 14px;
    --sf-rail-fade: 40px;
    --sf-card-image-ratio: 1 / 1;
    --sf-on-primary: #ffffff;               /* رنگِ متن روی زمینه‌ی --primary */
    --sf-on-accent: var(--primary);          /* رنگِ متن روی زمینه‌ی --accent */
    --sf-font-heading: var(--font-family, inherit);
    --sf-motion-fast: 150ms;
    --sf-motion: 260ms;
    --sf-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ===== چیدمانِ پایه ===== */

.sf-container {
    width: 100%;
    max-width: var(--sf-container);
    margin-inline: auto;
    padding-inline: var(--sf-gutter);
    box-sizing: border-box;
}

.sf-section {
    margin-block: var(--sf-section-gap);
}

/* ==========================================================================
   Rail — ریلِ افقیِ مشترک (Rail.razor + js/rail.js)
   بدونِ اسکرول‌بار؛ با نگه‌داشتنِ کلیک چپِ موس کشیده می‌شه (لمس: اسکرولِ بومیِ مرورگر).
   کلاس‌های وضعیت که rail.js روی .sf-rail می‌ذاره: is-overflowing، is-at-start، is-at-end، is-dragging
   ========================================================================== */

.sf-rail {
    position: relative;
}

.sf-rail__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* Edge/IE قدیمی */
    -webkit-overflow-scrolling: touch;
    --sf-fade-start: 0px;
    --sf-fade-end: 0px;
}

.sf-rail__viewport::-webkit-scrollbar {
    display: none;
}

.sf-rail__viewport:focus-visible {
    outline: 2px solid var(--primary, #20264a);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 8px);
}

.sf-rail__track {
    display: flex;
    gap: var(--sf-rail-gap);
    width: max-content;
    min-width: 100%;
    padding: var(--sf-rail-pad-block, 6px) var(--sf-rail-pad-inline, 2px);
    box-sizing: border-box;
}

.sf-rail__track > * {
    flex: 0 0 auto;
}

.sf-rail__track img {
    -webkit-user-drag: none;
    user-select: none;
}

/* فقط وقتی محتوا از عرضِ ریل بیشتره: مکان‌نما، محو شدنِ لبه‌ها */
.sf-rail.is-overflowing .sf-rail__viewport {
    cursor: grab;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--sf-fade-start), #000 calc(100% - var(--sf-fade-end)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--sf-fade-start), #000 calc(100% - var(--sf-fade-end)), transparent 100%);
}

/* «ابتدا» = سمتِ شروعِ محتوا؛ توی RTL سمتِ راست (برای همین جهتِ گرادیان برعکسه) */
[dir="rtl"] .sf-rail.is-overflowing .sf-rail__viewport {
    -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 var(--sf-fade-start), #000 calc(100% - var(--sf-fade-end)), transparent 100%);
    mask-image: linear-gradient(270deg, transparent 0, #000 var(--sf-fade-start), #000 calc(100% - var(--sf-fade-end)), transparent 100%);
}

.sf-rail.is-overflowing:not(.is-at-start) .sf-rail__viewport {
    --sf-fade-start: var(--sf-rail-fade);
}

.sf-rail.is-overflowing:not(.is-at-end) .sf-rail__viewport {
    --sf-fade-end: var(--sf-rail-fade);
}

/* هنگامِ درگ: انتخابِ متن و hoverِ کارت‌ها خاموش، مکان‌نمای گرفتن */
.sf-rail.is-dragging {
    user-select: none;
    -webkit-user-select: none;
}

.sf-rail.is-dragging .sf-rail__viewport {
    cursor: grabbing;
}

.sf-rail.is-dragging .sf-rail__track {
    pointer-events: none;
}

/* ===== فلش‌های ریل (فقط دستگاه‌های دارای موس) ===== */

.sf-rail__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill, 999px);
    background: var(--card-bg, #fff);
    color: var(--text, #1a1c26);
    box-shadow: var(--shadow-md, 0 6px 16px rgba(0, 0, 0, 0.1));
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--sf-motion-fast) ease, transform var(--sf-motion-fast) ease;
}

.sf-rail__arrow--prev {
    inset-inline-start: 6px;
}

.sf-rail__arrow--next {
    inset-inline-end: 6px;
}

.sf-rail__arrow svg {
    width: 18px;
    height: 18px;
}

/* فلشِ «قبلی» توی LTR به چپ و توی RTL به راست اشاره می‌کنه */
[dir="rtl"] .sf-rail__arrow svg {
    transform: scaleX(-1);
}

.sf-rail__arrow:focus-visible {
    opacity: 1;
    outline: 2px solid var(--primary, #20264a);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .sf-rail.is-overflowing .sf-rail__arrow {
        display: inline-flex;
    }

    .sf-rail.is-overflowing:hover .sf-rail__arrow {
        opacity: 1;
    }

    /* این دو قاعده باید بعد از قاعده‌ی hover بیان تا برنده بشن */
    .sf-rail.is-overflowing.is-at-start .sf-rail__arrow--prev,
    .sf-rail.is-overflowing.is-at-end .sf-rail__arrow--next {
        opacity: 0;
        pointer-events: none;
    }
}