/* =========================
   FONTS
   نکته: فایل‌های واقعی woff2 باید در assets/fonts/IRANYekanX/ قرار بگیرند.
   مسیر و نام فایل‌ها از قبل با نسخه رسمی فونت هماهنگ است؛ چیزی در این بخش
   تغییر نمی‌خواهد مگر اسم فایل‌ها فرق کند.
========================= */

@font-face {
    font-family: "IRANYekanX";
    src: url("../fonts/IRANYekanX/IRANYekanX-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IRANYekanX";
    src: url("../fonts/IRANYekanX/IRANYekanX-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IRANYekanX";
    src: url("../fonts/IRANYekanX/IRANYekanX-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IRANYekanX";
    src: url("../fonts/IRANYekanX/IRANYekanX-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


/* =========================
   ROOT / DESIGN TOKENS
   پالت پایه رنگ برند بازیکت (قرمز) حفظ شده و با دو تن «امبر» و «شرابی تیره»
   برای هویت پاییزی تقویت شده؛ این دو فقط در جاهای محدود (HUD، اسکلتون، بج تخفیف) استفاده می‌شوند.
========================= */

:root {
    --red: #c62828;
    --red-dark: #a91f1f;
    --ember: #e8734a;
    --ember-light: #ffb08a;
    --wine: #2b1214;
    --brown: #6b4226;
    --beige: #f0e4d3;
    --ink: #151515;
    --muted: #707070;
    --line: #e9e9e9;
    --soft: #f7f5f2;
    --cream: #fffaf5;
    --white: #ffffff;
    --success: #1f7a4d;
    --max: 1200px;

    /* قفسه تیره — فقط برای بخش خرید (#deals)، مابقی صفحه روشن می‌ماند */
    --shelf-bg: #1c1211;
    --shelf-bg-2: #241715;
    --shelf-card: #2a1b19;
    --shelf-line: rgba(255, 255, 255, .09);
    --shelf-text: #f3ece9;
    --shelf-muted: rgba(243, 236, 233, .55);
    --gold: #e8973a;
    --gold-light: #ffc98a;

    /* Glassmorphism — فقط برای Hero و چند پنل مهم (طبق درخواست: کل صفحه
       شیشه‌ای نشود)، دو نسخه‌ی روشن (روی پس‌زمینه گرم Hero) و تیره (روی
       تصویر/HUD) تا هرکدام کنتراست درست خودش را داشته باشد. */
    --glass-light-bg: rgba(255, 250, 245, .55);
    --glass-light-border: rgba(255, 255, 255, .6);
    --glass-dark-bg: rgba(43, 18, 20, .42);
    --glass-dark-border: rgba(255, 200, 150, .18);

    --ease: cubic-bezier(.22, .8, .28, 1);
}


/* =========================
   RESET
========================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-family: "IRANYekanX", Arial, sans-serif;
}

body {
    margin: 0;

    color: var(--ink);

    /* Background پاییزی کل صفحه: یک Gradient نرم چندرنگ (Beige → Cream
       → یک لمس بسیار کم‌رنگ زرشکی/طلایی در گوشه‌ها)، به‌جای رنگ تخت
       قبلی. فقط Gradient است (بدون تصویر/Blur سنگین)، پس هزینه GPU/CPU
       اضافه‌ای ندارد. بخش‌هایی که پس‌زمینه اختصاصی خودشان را دارند
       (Hero، قفسه تیره، Campaign) روی همین می‌نشینند و آن را می‌پوشانند. */
    background:
        radial-gradient(120% 90% at 8% -10%, rgba(232, 151, 58, .10), transparent 55%),
        radial-gradient(110% 90% at 100% 0%, rgba(198, 40, 40, .07), transparent 50%),
        linear-gradient(180deg, var(--beige) 0%, var(--cream) 35%, var(--soft) 100%);

    font-family: "IRANYekanX", Arial, sans-serif;

    line-height: 1.7;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

    /* بدون این‌ها هیچ‌کدام از تزئینات پاییزی جدید (برگ‌های شناور در FAQ/
       Footer/Campaign) اجازه ایجاد Horizontal Overflow را ندارند —
       دقیقاً همان چیزی که Phase ۶ (بند ۱۶) صریحاً روی آن تأکید کرده. */
    overflow-x: hidden;
}

button,
input,
textarea,
select {
    font-family: inherit;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

::selection {
    background: rgba(198, 40, 40, .16);
    color: var(--ink);
}

:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
}

/*
 * چون .deal-grid و .state-panel خودشان display:grid/flex ست می‌کنند،
 * بدون این قانون، اتریبیوت hidden توسط آن‌ها بی‌اثر می‌شود و چند وضعیت
 * (اسکلتون/خطا/خالی/موفق) هم‌زمان نمایش داده می‌شوند.
 */
[hidden] {
    display: none !important;
}


/* =========================
   GLOBAL
========================= */

.container {
    width: min(var(--max), calc(100% - 40px));
    margin-inline: auto;
}

.skip {
    position: absolute;
    right: -999px;
    top: 0;
    z-index: 999;
}

.skip:focus {
    right: 16px;
    top: 16px;

    background: var(--white);
    color: var(--ink);

    padding: 10px 14px;

    border: 2px solid var(--red);
    border-radius: 8px;

    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}


/* =========================
   TOP BAR + SALE COUNTDOWN
========================= */

.topbar {
    background: var(--ink);
    color: var(--white);

    font-size: 12px;
    font-weight: 500;
}

.topbar-inner {
    min-height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 4px 16px;

    padding-block: 6px;
}

.topbar-timer {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--ember-light);
    font-weight: 700;
}

.topbar-timer-label {
    color: rgba(255, 255, 255, .55);
    font-weight: 500;
}

.topbar-timer-clock {
    display: inline-flex;
    align-items: center;
    gap: 3px;

    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
}

.topbar-timer-clock b {
    font-weight: 500;
    color: rgba(255, 255, 255, .4);
    margin: 0 1px;
}


/* =========================
   HEADER
========================= */

.header {
    position: sticky;
    top: 0;

    z-index: 100;

    background: rgba(255, 255, 255, .94);

    border-bottom: 1px solid var(--line);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.nav {
    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


/* =========================
   LOGO
========================= */

.logo {
    display: inline-flex;
    align-items: center;

    color: var(--red);

    text-decoration: none;

    font-family: "IRANYekanX", Arial, sans-serif;

    font-size: 21px;
    font-weight: 900;

    letter-spacing: -1px;

    white-space: nowrap;
}

.logo-word {
    display: inline-block;
}


/* =========================
   NAVIGATION
========================= */

.links {
    display: flex;
    align-items: center;

    gap: 32px;

    margin-inline: auto;

    color: #555;

    font-size: 13px;
    font-weight: 500;
}

.links a {
    position: relative;

    padding: 8px 0;

    text-decoration: none;

    transition: color .2s ease;
}

.links a::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 1px;

    width: 0;
    height: 2px;

    background: var(--red);

    border-radius: 999px;

    transition: width .2s ease;
}

.links a:hover {
    color: var(--red);
}

.links a:hover::after {
    width: 100%;
}


/* =========================
   HEADER CTA
========================= */

.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 42px;

    padding: 0 15px;

    background: var(--red);
    color: var(--white);

    border-radius: 9px;

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;

    box-shadow: 0 8px 20px rgba(198, 40, 40, .14);

    transition:
        transform .18s var(--ease),
        background-color .18s ease,
        box-shadow .18s ease;
}

.nav-cta:hover {
    background: var(--red-dark);

    transform: translateY(-1px);

    box-shadow: 0 11px 25px rgba(198, 40, 40, .2);
}


/* =========================
   HERO
========================= */

.hero {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(115deg,
            #fffaf5 0%,
            #fff6ec 47%,
            #fdeee0 100%);

    border-bottom: 1px solid var(--line);
}

/* لکه نور گرم اصلی (قرمز برند) — پایین‌راست، همان قبلی. */
.hero::after {
    content: "";

    position: absolute;

    right: -8%;
    bottom: -42%;

    width: 600px;
    height: 600px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(198, 40, 40, .12),
            transparent 66%);

    pointer-events: none;
}

/* لکه نور گرم دوم (کهربایی/طلایی) — بالا‌چپ، برای عمق بیشتر پس‌زمینه
   (طبق Phase ۶، بند ۳: «ترکیبی از gradientهای نرم + glowهای کنترل‌شده»)
   بدون هیچ blur سنگین یا هزینه اضافه؛ فقط یک radial-gradient ثابت دیگر. */
.hero::before {
    content: "";

    position: absolute;
    z-index: 0;

    left: -6%;
    top: -30%;

    width: 480px;
    height: 480px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(232, 151, 58, .16),
            transparent 68%);

    pointer-events: none;
}

.hero-grid {
    min-height: 610px;

    display: grid;

    grid-template-columns:
        1.05fr .95fr;

    align-items: center;

    gap: 45px;
}

.hero-copy {
    position: relative;

    z-index: 2;
}


/* =========================
   HERO KICKER
========================= */

.kicker {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 6px 14px 6px 10px;

    /* یک Badge premium و ظریف برای معرفی کمپین (طبق Phase ۶، بند ۶)؛
       نه یک برچسب بزرگ/کارتونی — فقط یک Pill کم‌رنگ با بوردر گرم. */
    background: linear-gradient(90deg, rgba(198, 40, 40, .08), rgba(232, 151, 58, .08));
    border: 1px solid rgba(198, 40, 40, .18);
    border-radius: 999px;

    color: var(--red);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1.6px;

    text-transform: uppercase;
}

.kicker::before {
    content: "";

    width: 6px;
    height: 6px;
    flex-shrink: 0;

    background: var(--ember);
    border-radius: 50%;

    box-shadow: 0 0 8px 2px rgba(232, 115, 74, .45);
}


/* =========================
   HERO TITLE
========================= */

h1 {
    max-width: 760px;

    margin: 18px 0 20px;

    font-family: "IRANYekanX", Arial, sans-serif;

    font-size: clamp(36px, 4.6vw, 58px);

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: -2px;
}

h1 em {
    color: var(--red);

    font-style: normal;
}


/* =========================
   HERO DESCRIPTION
========================= */

.hero-copy p {
    max-width: 620px;

    margin: 0 0 28px;

    color: #666;

    font-size: 15px;
    font-weight: 400;
}


/* =========================
   BUTTONS
========================= */

.actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}

.btn {
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 18px;

    border: 1px solid transparent;
    border-radius: 10px;

    text-decoration: none;

    font-family: inherit;

    font-size: 13px;
    font-weight: 700;

    transition:
        transform .18s var(--ease),
        box-shadow .18s ease,
        background-color .18s ease,
        border-color .18s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--red);
    color: var(--white);

    box-shadow:
        0 10px 24px rgba(198, 40, 40, .18);
}

.btn-primary:hover {
    background: var(--red-dark);

    box-shadow:
        0 13px 28px rgba(198, 40, 40, .23);
}

.btn-secondary {
    background: var(--white);

    border-color: #ddd;

    color: var(--ink);
}

.btn-secondary:hover {
    border-color: #cfcfcf;
    background: #fafafa;
}

.btn-white {
    background: var(--white);
    color: var(--red);
}


/* =========================
   HERO META
========================= */

.hero-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 26px;

    font-size: 11px;
}

.hero-meta span {
    display: inline-flex;
    align-items: center;

    padding: 8px 14px;

    /* Glassmorphism ظریف روی یک پنل کوچک دیگر (طبق درخواست: Hero و
       پنل‌های مهم، نه کل صفحه). پس‌زمینه Hero از پشت این Badgeها کمی
       دیده می‌شود. */
    background: var(--glass-light-bg);
    border: 1px solid var(--glass-light-border);
    border-radius: 999px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow: 0 4px 14px rgba(107, 66, 38, .08);

    color: #6b5a52;
}

.hero-meta b {
    color: #222;
    font-weight: 700;

    margin-inline-start: 4px;
}


/* =========================
   HERO ART
========================= */

.hero-art {
    position: relative;

    min-height: 460px;

    display: grid;
    place-items: center;
}


/* =========================
   HUD — سیگنیچر بصری صفحه
   شمارش‌معکوس فصل تخفیف با ظاهر HUD/دیجیتال بازی + گرمای پاییزی (امبر/شرابی).
   جایگزین پوستر ایستای نسخه قبل؛ هم زینت است هم کارکرد واقعی (اضطرار خرید) دارد.
========================= */

.hud {
    position: relative;

    width: min(410px, 90%);
    aspect-ratio: 4 / 5;

    overflow: hidden;

    padding: 26px;

    border-radius: 28px;

    /* Glassmorphism ظریف: به‌جای پس‌زمینه کاملاً Solid قبلی، همان گرادیان
       شرابی حالا نیمه‌شفاف است + backdrop-filter، تا Glowهای پشت‌سرش
       (گوشه Hero) کمی از پشت این کارت دیده شوند — دقیقاً همان «پنل مهم»ی
       که درخواست Glassmorphism رویش اشاره داشت؛ نه کل صفحه. */
    background:
        radial-gradient(120% 90% at 15% 0%, rgba(74, 30, 34, .9) 0%, rgba(43, 18, 20, .88) 55%, rgba(23, 10, 11, .92) 100%);

    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);

    border: 1px solid var(--glass-dark-border);

    color: var(--white);

    box-shadow:
        0 30px 70px rgba(43, 18, 20, .35);

    transform: rotate(2deg);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hud-glow {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(240px 240px at 82% 12%, rgba(232, 115, 74, .35), transparent 70%);

    pointer-events: none;
}

.hud-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 8px;

    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;

    color: var(--ember-light);
}

.hud-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;

    background: var(--ember);

    box-shadow: 0 0 0 4px rgba(232, 115, 74, .22);

    animation: hud-pulse 1.8s ease-in-out infinite;
}

@keyframes hud-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}

.hud-clock {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    gap: 6px;
}

.hud-unit {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 6px;

    min-width: 52px;

    padding: 10px 4px;

    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
}

.hud-num {
    font-family: "IRANYekanX", Arial, sans-serif;
    font-size: 30px;
    font-weight: 900;

    font-variant-numeric: tabular-nums;

    letter-spacing: -1px;
}

.hud-label {
    font-size: 9px;
    font-weight: 500;
    color: rgba(255, 255, 255, .55);
}

.hud-sep {
    padding-bottom: 22px;

    font-size: 20px;
    font-weight: 900;

    color: rgba(255, 255, 255, .3);
}

.hud-bottom {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;

    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 2px;

    color: rgba(255, 255, 255, .55);
}


/* =========================
   FLOATING LEAVES
   طبق Phase ۶ (بند ۴): برگ‌های شناور، سبک، pointer-events:none، تعداد
   محدود، فقط CSS animation (نه JS) — و روی چند Section پخش شده‌اند
   (نه فقط Hero) تا حس پاییز هنگام اسکرول صفحه هم حس شود، نه فقط در
   بالای صفحه. هرکدام duration/delay متفاوت دارند تا هم‌زمان/رباتیک
   دیده نشوند. در Mobile (زیر 900px) طبق بند ۱۷ («برگ‌ها باید کمتر
   شوند») مخفی می‌شوند — نگاه کن به رسپانسیو پایین فایل.
========================= */

.floating-leaf {
    position: absolute;
    z-index: 1;

    font-size: 55px;

    filter:
        drop-shadow(0 10px 8px rgba(0, 0, 0, .08));

    user-select: none;
    pointer-events: none;

    will-change: transform;
}

.leaf-a {
    right: 5%;
    top: 8%;

    animation: leaf-drift-a 9s ease-in-out infinite;
}

.leaf-b {
    left: 5%;
    bottom: 9%;

    animation: leaf-drift-b 11s ease-in-out infinite;
    animation-delay: -3s;
}

/* برگ‌های اضافه — کوچک‌تر و کم‌رنگ‌تر، برای بخش‌های روشن دیگر
   (Campaign/FAQ/Footer) تا پاییز فقط مختص Hero نباشد. */
.floating-leaf.leaf-small {
    font-size: 30px;
    opacity: .55;
}

.leaf-c {
    left: 2%;
    top: 12%;

    animation: leaf-drift-b 10s ease-in-out infinite;
    animation-delay: -1.5s;
}

.leaf-d {
    right: 2%;
    top: 8%;

    animation: leaf-drift-a 8s ease-in-out infinite;
    animation-delay: -4s;
}

.leaf-e {
    left: 2%;
    bottom: 12%;

    animation: leaf-drift-a 12s ease-in-out infinite;
    animation-delay: -6s;
}

@keyframes leaf-drift-a {

    0%,
    100% {
        transform: translate(0, 0) rotate(20deg);
    }

    50% {
        transform: translate(-6px, -16px) rotate(28deg);
    }
}

@keyframes leaf-drift-b {

    0%,
    100% {
        transform: translate(0, 0) rotate(-25deg);
    }

    50% {
        transform: translate(6px, 14px) rotate(-17deg);
    }
}

/* برگ‌های تزئینی اضافه (Campaign/FAQ/Footer) فقط در Desktop واقعاً عریض
   نمایش داده می‌شوند. دلیل: عرض حاشیه خالی اطراف .container (که این
   برگ‌ها باید داخلش بمانند تا روی متن نیفتند) از فرمول ثابت پروژه
   می‌آید: width: min(1200px, calc(100% - 40px))؛ یعنی حاشیه فقط از
   viewport ≈ 1240px به بالا شروع به رشد می‌کند و تا حدود 1400px هنوز
   کوچک‌تر از عرض خود یک برگ (~55px) است — عدد ثابتی از درصد که در همه
   عرض‌ها امن باشد وجود ندارد. راه‌حل ساده و مطمئن به‌جای حدس‌زدن درصد
   برای هر Breakpoint: زیر ۱۴۰۰px کلاً مخفی؛ از ۱۴۰۰px به بالا حاشیه
   خالی (≥100px) به‌اندازه کافی برای 2% + عرض برگ جا دارد. */
@media (max-width: 1399px) {

    .leaf-c,
    .leaf-d,
    .leaf-e,
    .footer-leaf {
        display: none;
    }
}


/* =========================
   SECTIONS
========================= */

.section {
    padding: 64px 0;
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 22px;
}

.eyebrow {
    color: var(--red);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 2px;
}

h2 {
    margin: 7px 0 0;

    font-family: "IRANYekanX", Arial, sans-serif;

    font-size: 26px;
    font-weight: 900;

    letter-spacing: -0.8px;
}

.section-note {
    max-width: 480px;

    color: #777;

    font-size: 12px;
}


/* =========================
   SHELF — بخش خرید (تیره)
   تنها بخش تیره صفحه؛ همین تغییر رنگ خودش می‌گوید «اینجا فروشگاهه».
========================= */

.shelf {
    background:
        radial-gradient(120% 70% at 85% 0%, var(--shelf-bg-2) 0%, var(--shelf-bg) 55%);

    color: var(--shelf-text);
}

.shelf .eyebrow {
    color: var(--gold-light);
}

.shelf h2 {
    color: var(--shelf-text);
}

.shelf .section-note {
    color: var(--shelf-muted);
}


/* =========================
   FILTER CHIPS — دسته‌بندی زنده
   جایگزین بخش جدای «دسته‌بندی‌ها»؛ مستقیم روی گرید تخفیف‌ها فیلتر می‌زند.
========================= */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 36px;

    padding: 0 16px;

    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--shelf-line);
    border-radius: 999px;

    color: var(--shelf-muted);

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease;
}

.chip:hover {
    color: var(--shelf-text);
    border-color: rgba(255, 255, 255, .2);
}

.chip.is-active {
    background: var(--gold);
    border-color: var(--gold);
    color: #1c1211;
}


/* =========================
   DEALS GRID
========================= */

.deal-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 16px;
}

.card {
    overflow: hidden;

    background: var(--shelf-card);

    border: 1px solid var(--shelf-line);

    border-radius: 16px;

    transition:
        transform .2s var(--ease),
        box-shadow .2s ease,
        border-color .2s ease;
}

.card:hover {
    transform: translateY(-3px);

    border-color: rgba(255, 255, 255, .18);

    box-shadow:
        0 14px 28px rgba(0, 0, 0, .18);
}

.cover {
    /* باگ اصلی: تگ <a> پیش‌فرض display:inline است، و روی عنصر inline
       غیر-replaced، هم "aspect-ratio" و هم "overflow" اصلاً اعمال نمی‌شوند
       (طبق مشخصات CSS). یعنی نسبت تصویر و کراپ‌شدن Overflow عملاً کار
       نمی‌کردند و همین باعث می‌شد Cover به‌جای جعبه‌ی ۱۶:۹ فشرده، تا ارتفاع
       دلخواه کشیده شود و کل Card را غیرمنطقی بزرگ کند. فیکس: بلاک‌کردن آن. */
    display: block;

    position: relative;

    /* استاندارد Cover همه Cardها (اصلی + Flash Deals): همان نسبت ۱۶:۹
       که قبلاً فقط برای .deal-grid .cover ست شده بود. تصاویر بازی از قبل
       با width/height=16:9 در HTML رندر می‌شوند (نگاه کن به app.js)، پس
       این نسبت بدون کش/کِراپ غیرمنطقی روی تصویر می‌نشیند. */
    aspect-ratio: 16 / 9;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            #2f2018,
            #7b2421);
}

.cover-img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;

    transition: opacity .3s ease;

    /* جلوگیری از Native Image Drag مرورگر (Ghost Image هنگام Drag-to-Scroll)
       و از Selection شدن تصویر مثل یک فایل. فقط روی تصاویر Card/Cover،
       نه کل صفحه. */
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
}

.cover-img.is-loaded {
    opacity: 1;
}

/* وقتی عکس محصول نداریم یا لود نشد، عنوان روی گرادیان پاییزی نمایش داده می‌شود */
.cover-fallback {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: flex-end;

    padding: 14px;

    color: var(--white);

    font-family: "IRANYekanX", Arial, sans-serif;
    font-size: 20px;
    font-weight: 900;

    line-height: 1.25;
}

.cover-fallback::after {
    content: "";

    position: absolute;

    right: -45px;
    top: -45px;

    width: 150px;
    height: 150px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .1);
}

/* بج تخفیف — طلایی/امبر، عمداً از قرمز برند جداست تا با CTA قاطی نشود
   (قرمز = اقدام برند، طلایی = «صرفه‌جویی»، هم‌راستا با رنگ فصل پاییز) */
.cover .tag {
    position: absolute;

    z-index: 2;

    top: 10px;
    right: 10px;

    padding: 6px 10px 5px;

    background: var(--gold);
    color: #1c1211;

    font-size: 10px;
    font-weight: 900;

    clip-path: polygon(15% 0%, 100% 0%, 100% 70%, 85% 100%, 0% 100%, 0% 25%);
}

/* باگ: این Overlay قبلاً هیچ position نداشت، پس به‌جای نشستن روی تصویر
   (مثل یک Caption مخفی که فقط با Hover ظاهر می‌شود)، مثل متن معمولی در
   ادامه‌ی تصویر جریان پیدا می‌کرد و به ارتفاع Card اضافه می‌شد؛ در
   Flash Deals هم چون هیچ‌جا opacity:0 برایش ست نشده بود، همیشه به‌صورت
   متن خام روی/کنار تصویر دیده می‌شد. با absolute-کردن، هم ارتفاع اضافه
   از بین می‌رود و هم در همه بخش‌ها (Deal Grid + Flash Deals) فقط با
   Hover روی خود تصویر ظاهر می‌شود. */
.card-hover {
    position: absolute;
    z-index: 2;
    inset-inline: 0;
    bottom: 0;

    padding: 18px 11px 8px;

    background: linear-gradient(to top, rgba(15, 8, 7, .82), transparent);
    color: #fff;

    font-size: 11px;
    font-weight: 700;
    text-align: center;

    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;

    pointer-events: none;
}

.card:hover .card-hover {
    opacity: 1;
    transform: none;
}

.card-body {
    padding: 11px;
}

.card-title {
    margin: 0 0 5px;

    color: var(--shelf-text);

    font-size: 12px;
    font-weight: 700;

    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.meta {
    color: var(--shelf-muted);

    font-size: 9px;
}

.price-line {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 11px;
}

.discount {
    color: var(--gold-light);

    font-size: 11px;
    font-weight: 900;
}

.price-wrap {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.price {
    color: var(--shelf-text);

    font-size: 12px;
    font-weight: 700;
}

.price-original {
    color: rgba(243, 236, 233, .38);
    font-size: 10px;
    text-decoration: line-through;
}

.card-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 10px;

    padding: 8px;

    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--shelf-line);

    color: var(--shelf-text);

    border-radius: 8px;

    text-decoration: none;

    font-size: 10px;
    font-weight: 700;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease;
}

.card-btn:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #1c1211;
}


/* =========================
   STATE PANELS داخل قفسه تیره
========================= */

.shelf .state-panel {
    border-color: var(--shelf-line);
    background: rgba(255, 255, 255, .04);
}

.shelf .state-title {
    color: var(--shelf-text);
}

.shelf .state-text {
    color: var(--shelf-muted);
}

.state-ended .state-icon {
    font-size: 34px;
}

.state-ended .state-title {
    color: var(--gold-light);
}

.shelf .sk {
    background: rgba(255, 255, 255, .06);
}

.shelf .sk::after {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, .12) 50%,
            transparent 100%);
}


/* =========================
   SKELETON (Loading State)
   شیمر با گرادیان امبر/کرم، بدون نیاز به JS برای انیمیشن.
========================= */

.deal-skeleton .card {
    pointer-events: none;
}

.sk {
    position: relative;
    overflow: hidden;

    background: #efece8;
}

.sk::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, .55) 50%,
            transparent 100%);

    transform: translateX(-100%);

    animation: sk-shimmer 1.5s infinite;
}

@keyframes sk-shimmer {
    100% {
        transform: translateX(100%);
    }
}

.sk-cover {
    aspect-ratio: 16 / 10;
}

.sk-line {
    height: 10px;
    margin: 12px 15px 0;
    border-radius: 6px;
}

.sk-line.w-60 {
    width: 60%;
}

.sk-line.w-40 {
    width: 40%;
}

.sk-line.w-90 {
    width: calc(100% - 30px);
}

.sk-btn {
    height: 30px;
    margin: 12px 15px 15px;
    border-radius: 8px;
}


/* =========================
   STATE PANELS (Error / Empty)
========================= */

.state-panel {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 8px;

    padding: 56px 20px;

    text-align: center;

    border: 1px dashed #ddd;
    border-radius: 16px;

    background: var(--soft);
}

.state-icon {
    font-size: 26px;
}

.state-title {
    margin: 4px 0 0;

    font-size: 15px;
    font-weight: 700;
}

.state-text {
    margin: 0;
    max-width: 420px;

    color: #777;

    font-size: 12px;
}

.state-error .state-icon {
    color: var(--red);
}

.state-panel .btn {
    margin-top: 10px;
}


/* =========================
   CAMPAIGN
========================= */

.campaign {
    position: relative;
    overflow: hidden;

    padding: 55px 0;

    background: var(--red);

    color: var(--white);
}

.campaign-inner {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.campaign .eyebrow {
    color: #ffd7d7;
}

.campaign h2 {
    margin-top: 6px;

    font-size: 23px;
}

.campaign-sub {
    max-width: 480px;
    margin: 10px 0 0;

    color: #ffe3e3;

    font-size: 13px;
}

.campaign .btn-white {
    flex-shrink: 0;
}


/* =========================
   FAQ
   شبکه دو ستونه برای ۱۰ سؤال (به‌جای یک ستون بلند)، به‌علاوه آیکون
   باز/بسته سفارشی به‌جای فلش پیش‌فرض مرورگر.
========================= */

.faq-section {
    position: relative;
    overflow: hidden;

    /* پس‌زمینه بسیار ملایم و گرم (به‌جای سفید کاملاً خنثی قبلی) تا
       هویت پاییزی حتی در بخش‌های متنی/آرام صفحه هم (نه فقط Hero و
       قفسه تیره) حس شود؛ طبق Phase ۶، بند ۱۵. */
    background:
        linear-gradient(180deg,
            var(--cream) 0%,
            var(--soft) 100%);
}

.faq-section::before {
    content: "";

    position: absolute;
    top: 0;
    right: 8%;
    left: 8%;

    height: 1px;

    background: linear-gradient(90deg, transparent, rgba(232, 151, 58, .35), rgba(198, 40, 40, .3), transparent);

    pointer-events: none;
}

.faq {
    position: relative;
    z-index: 1;

    width: min(1000px, calc(100% - 40px));

    margin-inline: auto;
}

.faq-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 0 40px;
}

.faq details {
    padding: 17px 0;

    border-bottom: 1px solid #ddd;
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    cursor: pointer;
    list-style: none;

    color: var(--ink);

    font-size: 13px;
    font-weight: 700;

    transition: color .18s ease;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::marker {
    content: "";
}

.faq summary::after {
    content: "+";

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    border: 1px solid #ddd;
    border-radius: 50%;

    color: var(--red);

    font-size: 14px;
    font-weight: 700;

    transition: transform .2s var(--ease), border-color .18s ease;
}

.faq details[open] summary::after {
    content: "+";
    transform: rotate(45deg);
    border-color: var(--red);
}

.faq summary:hover {
    color: var(--red);
}

.faq p {
    margin: 10px 0 0;
    padding-inline-end: 34px;

    color: #777;

    font-size: 12px;
}


/* =========================
   FOOTER
========================= */

.footer {
    position: relative;
    overflow: hidden;

    padding: 25px 0;

    background: var(--soft);

    border-top: none;

    color: #777;

    font-size: 10px;
}

/* همان الگوی «خط جداکننده فصلی» که بین Sectionهای قفسه تیره استفاده
   شده (گرادیان محو قرمز→کهربایی)، اینجا هم برای هماهنگی هویت بصری،
   به‌جای یک خط صاف خاکستری معمولی. */
.footer::before {
    content: "";

    position: absolute;
    top: 0;
    right: 8%;
    left: 8%;

    height: 1px;

    background: linear-gradient(90deg, transparent, rgba(198, 40, 40, .3), rgba(232, 151, 58, .35), transparent);

    pointer-events: none;
}

.footer-leaf {
    position: absolute;
    z-index: 0;

    left: 4%;
    top: 4px;

    font-size: 24px;
    opacity: .4;

    pointer-events: none;
    user-select: none;

    animation: leaf-drift-b 10s ease-in-out infinite;
    animation-delay: -2s;
}

.footer-inner {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.footer strong {
    color: var(--red);

    font-size: 13px;
    font-weight: 900;
}


/* =========================
   NOSCRIPT
========================= */

.noscript {
    padding: 12px;

    text-align: center;

    background: #fff0f0;

    color: #8d1616;
}


/* =========================
   TABLET
========================= */

@media (max-width: 900px) {

    .links {
        display: none;
    }

    .hero-grid {
        grid-template-columns: 1fr;

        min-height: auto;

        padding: 62px 0;
    }

    .hero-art {
        order: -1;

        min-height: 380px;
    }

    .hud {
        width: min(350px, 80vw);
    }

    .deal-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .section-head {
        align-items: flex-start;

        flex-direction: column;
    }

    .campaign-inner {
        align-items: flex-start;

        flex-direction: column;
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 560px) {

    .container {
        width: calc(100% - 26px);
    }

    .topbar {
        display: none;
    }

    .nav {
        min-height: 62px;

        gap: 14px;
    }

    .logo {
        font-size: 19px;
    }

    .nav-cta {
        min-height: 38px;

        padding: 0 10px;
    }

    h1 {
        font-size: 32px;

        letter-spacing: -1.4px;
    }

    .hero-copy p {
        font-size: 14px;
    }

    .hero-art {
        min-height: 330px;
    }

    .hud {
        width: 82vw;

        border-radius: 22px;

        padding: 20px;
    }

    .hud-unit {
        min-width: 44px;
        padding: 8px 3px;
    }

    .hud-num {
        font-size: 22px;
    }

    .section {
        padding: 46px 0;
    }

    .section-head {
        margin-bottom: 18px;
    }

    h2 {
        font-size: 22px;
    }

    .deal-grid {
        gap: 9px;
    }

    .card-body {
        padding: 11px;
    }

    .card-title {
        font-size: 12px;
    }

    .chip {
        min-height: 32px;

        padding: 0 12px;

        font-size: 11px;
    }

    .campaign h2 {
        font-size: 19px;
    }

    .footer-inner {
        align-items: flex-start;

        flex-direction: column;
    }

    .floating-leaf,
    .footer-leaf {
        display: none;
    }
}


/* =========================
   REDUCED MOTION
========================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .btn:hover,
    .card:hover,
    .chip:hover,
    .nav-cta:hover {
        transform: none;
    }
}

/* =========================================================
   AUTUMN STORE DISCOVERY UI — inspired by Steam's information architecture,
   while preserving Baziket's existing red/white autumn visual identity.
   ========================================================= */
.sale-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:24px 0 30px}
.stat-card{padding:17px 18px;border:1px solid var(--shelf-line);background:rgba(255,255,255,.035);border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.stat-card span{color:var(--shelf-muted);font-size:11px}.stat-card strong{font-size:19px;line-height:1;font-weight:900;color:var(--white)}
.featured-shelf{border-top:1px solid var(--shelf-line);padding-top:20px;margin-top:4px}
.mini-head,.browse-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:14px}.mini-head h3,.browse-head h3{margin:4px 0 0;font-size:19px;line-height:1.25;color:var(--shelf-text)}.mini-head .section-note{display:block;margin-top:6px}
.shelf-controls{display:flex;gap:8px}
.shelf-arrow{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--shelf-line);border-radius:9px;color:var(--shelf-text);background:rgba(255,255,255,.045);font-size:17px;line-height:1;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .1s ease,box-shadow .15s ease}
.shelf-arrow:hover:not(:disabled){background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 6px 16px rgba(198,40,40,.28)}
.shelf-arrow:active:not(:disabled){transform:scale(.92)}
.shelf-arrow:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}
.shelf-arrow:disabled{opacity:.32;cursor:not-allowed;box-shadow:none}
.featured-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(320px,1fr);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:3px 2px 14px;cursor:grab;user-select:none}.featured-track::-webkit-scrollbar{display:none}.featured-track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.featured-card{position:relative;min-height:185px;overflow:hidden;border-radius:13px;background:#271a18;border:1px solid var(--shelf-line);scroll-snap-align:start;text-decoration:none;isolation:isolate}.featured-card::after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.9));z-index:1}.featured-card img{width:100%;height:100%;min-height:185px;object-fit:cover;transition:transform .35s var(--ease);-webkit-user-drag:none;user-drag:none;user-select:none;-webkit-touch-callout:none}.featured-card:hover img{transform:scale(1.045)}
.featured-info{position:absolute;right:15px;left:15px;bottom:13px;z-index:2}.featured-info strong{display:block;color:#fff;font-size:14px;margin-bottom:6px}.featured-meta{display:flex;align-items:center;gap:8px;font-size:11px;color:rgba(255,255,255,.7)}.featured-discount{background:var(--red);color:#fff;border-radius:5px;padding:3px 7px;font-weight:900}.featured-price-wrap{display:flex;align-items:baseline;gap:6px}.featured-price-original{font-size:10px;color:rgba(255,255,255,.45);text-decoration:line-through}
.browse-store{margin-top:30px;padding-top:24px;border-top:1px solid var(--shelf-line)}.result-count{font-size:11px;color:var(--shelf-muted)}
.store-toolbar{display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:11px}.search-box{height:46px;display:flex;align-items:center;gap:10px;border:1px solid var(--shelf-line);background:rgba(255,255,255,.055);border-radius:9px;padding:0 13px;color:var(--shelf-muted)}.search-box span{font-size:23px}.search-box input{width:100%;border:0;outline:0;background:transparent;color:var(--shelf-text);font:inherit;font-size:12px}.search-box input::placeholder{color:var(--shelf-muted)}.sort-box{display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid var(--shelf-line);border-radius:9px;color:var(--shelf-muted);font-size:11px}.sort-box select{border:0;outline:0;background:transparent;color:var(--shelf-text);font:inherit;min-height:44px}
.quick-filters,.genre-strip{display:flex;gap:7px;overflow-x:auto;padding:2px 0 9px;scrollbar-width:none;cursor:grab;user-select:none}.quick-filters::-webkit-scrollbar,.genre-strip::-webkit-scrollbar{display:none}.quick-filters.is-dragging,.genre-strip.is-dragging{cursor:grabbing}.filter-pill,.chip{flex:0 0 auto;border:1px solid var(--shelf-line);border-radius:999px;padding:7px 12px;color:var(--shelf-muted);background:rgba(255,255,255,.035);font-size:11px}.filter-pill:hover,.chip:hover,.filter-pill.is-active,.chip.is-active{color:#fff;background:var(--red);border-color:var(--red)}
.chip-icon{display:inline-block;margin-inline-end:5px;font-size:12px;filter:grayscale(.15)}
.store-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px;margin-top:8px}.browse-aside{position:sticky;top:92px;align-self:start}.aside-card{border:1px solid var(--shelf-line);background:rgba(255,255,255,.035);border-radius:12px;padding:16px}.aside-kicker{display:block;color:var(--ember-light);font-size:9px;font-weight:900;letter-spacing:1.4px;margin-bottom:8px}.aside-card strong{display:block;color:#fff;font-size:15px}.aside-card p{color:var(--shelf-muted);font-size:10px;line-height:1.9;margin:8px 0 0}.reset-filters{width:100%;margin-top:8px;padding:10px;border:1px solid var(--shelf-line);border-radius:9px;color:var(--shelf-muted);font:inherit;font-size:10px}.reset-filters:hover{color:#fff;border-color:rgba(255,255,255,.25)}
.store-results{min-width:0}.deal-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.deal-grid .card{min-width:0;border:1px solid var(--shelf-line);background:var(--shelf-card);border-radius:12px;overflow:hidden;box-shadow:none;transition:transform .2s var(--ease),border-color .2s ease,box-shadow .2s ease}.deal-grid .card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.18);box-shadow:0 14px 28px rgba(0,0,0,.18)}.deal-grid .cover{aspect-ratio:16/9;height:auto}.deal-grid .card-body{padding:11px}.deal-grid .card-title{font-size:12px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.deal-grid .meta{color:var(--shelf-muted);font-size:9px}.deal-grid .price-original{color:rgba(255,255,255,.38)}.deal-grid .price{color:#fff;font-size:12px}.deal-grid .discount{font-size:11px}.deal-grid .card-btn{min-height:34px;border-radius:7px;background:rgba(255,255,255,.07);color:#fff;font-size:10px}.deal-grid .card-btn:hover{background:var(--red)}
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:22px 0 4px}.page-btn{min-width:36px;height:36px;padding:0 9px;border:1px solid var(--shelf-line);border-radius:8px;background:rgba(255,255,255,.035);color:var(--shelf-muted);font:inherit;font-size:11px}.page-btn:hover,.page-btn.is-active{background:var(--red);border-color:var(--red);color:#fff}.page-btn:disabled{opacity:.35;cursor:not-allowed}.page-gap{color:var(--shelf-muted);padding:0 2px}
@media (max-width:980px){.sale-stats{grid-template-columns:repeat(2,1fr)}.store-layout{grid-template-columns:1fr}.browse-aside{display:none}.deal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.featured-track{grid-auto-columns:minmax(290px,72vw)}}
@media (max-width:680px){.sale-stats{grid-template-columns:1fr 1fr}.stat-card{padding:13px}.stat-card strong{font-size:17px}.mini-head,.browse-head{align-items:flex-start}.mini-head h3,.browse-head h3{font-size:17px}.store-toolbar{grid-template-columns:1fr}.sort-box{height:44px}.deal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.deal-grid .card-title{font-size:11px}.deal-grid .card-body{padding:8px}.deal-grid .card-btn{font-size:9px;min-height:32px}.featured-track{grid-auto-columns:84vw}}


/* =========================================================
   AUTUMN SALE 2026 — FINAL DISCOVERY LAYER
   Steam-inspired information architecture; Baziket palette preserved.
   ========================================================= */
.deal-highlights{margin-top:30px;padding-top:22px;border-top:1px solid var(--shelf-line)}
.deal-highlights>.mini-head{margin-bottom:14px}
.highlight-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr);gap:12px;min-height:330px}
.highlight-hero-stack{position:relative;min-height:330px;border-radius:14px;overflow:hidden}
.highlight-hero,.highlight-mini{position:relative;overflow:hidden;text-decoration:none;border:1px solid var(--shelf-line);background:var(--shelf-card);isolation:isolate}
.highlight-hero{min-height:330px;border-radius:14px}
.highlight-hero-stack .highlight-hero{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .6s ease,transform .6s ease;transform:scale(1.02)}
.highlight-hero-stack .highlight-hero.is-active{opacity:1;pointer-events:auto;transform:scale(1)}
.highlight-hero img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);-webkit-user-drag:none;user-drag:none;user-select:none;-webkit-touch-callout:none}
.highlight-hero:hover img{transform:scale(1.035)}
.highlight-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.9) 100%);z-index:1}
.highlight-copy{position:absolute;right:25px;left:25px;bottom:23px;z-index:2;color:#fff;padding:16px 18px;border-radius:16px;background:var(--glass-dark-bg);border:1px solid var(--glass-dark-border);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
.highlight-badge{display:inline-flex;background:var(--red);padding:5px 9px;border-radius:5px;font-size:11px;font-weight:900;margin-bottom:9px}
.highlight-copy h4{font-size:21px;line-height:1.3;margin:0 0 8px;max-width:650px}
.highlight-price{font-size:13px;font-weight:800}
.highlight-price-wrap{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.highlight-price-original{font-size:11px;color:rgba(255,255,255,.45);text-decoration:line-through}
.highlight-cta{font-size:11px;color:rgba(255,255,255,.72)}
.highlight-side{display:grid;grid-auto-rows:88px;gap:10px;align-content:start}
.highlight-mini{display:grid;grid-template-columns:42% 58%;border-radius:11px;min-height:0;width:100%;padding:0;font-family:inherit;cursor:pointer;text-align:right}
.highlight-mini img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-drag:none;user-select:none;-webkit-touch-callout:none}
.highlight-mini span{padding:13px;gap:7px}
.highlight-mini strong{font-size:12px;line-height:1.55;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.highlight-mini b{font-size:10px;color:var(--ember-light)}
.highlight-mini:hover{border-color:rgba(255,255,255,.22);transform:translateY(-2px)}
.highlight-mini.is-active{border-color:var(--ember);background:rgba(232,151,58,.08)}
.highlight-mini.is-active b{color:var(--ember-light)}
.deal-rails{margin-top:30px}
.rail-block{padding-top:20px;border-top:1px solid var(--shelf-line)}
.rail-block+.rail-block{margin-top:22px}
.rail-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:13px}
.rail-head h3{margin:4px 0 0;color:var(--shelf-text);font-size:18px}
.rail-link{color:var(--ember-light);font:inherit;font-size:11px;padding:7px 0}.rail-link:hover{color:#fff}
.product-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,220px);gap:10px;overflow-x:auto;padding:3px 2px 12px;scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab;user-select:none}.product-rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.product-rail::-webkit-scrollbar{display:none}
.product-tile{display:block;overflow:hidden;border:1px solid var(--shelf-line);border-radius:10px;background:var(--shelf-card);text-decoration:none;scroll-snap-align:start;transition:transform .2s var(--ease),border-color .2s ease}
.product-tile:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.22)}
.product-tile>img{width:100%;aspect-ratio:16/9;object-fit:cover;-webkit-user-drag:none;user-drag:none;user-select:none;-webkit-touch-callout:none}.product-tile-body{padding:9px 10px}.product-tile-body strong{display:block;color:#fff;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px}.product-tile-body>div{display:flex;align-items:center;justify-content:space-between;gap:7px}.tile-discount{background:var(--red);color:#fff;border-radius:4px;padding:3px 5px;font-size:9px;font-weight:900}.tile-price{font-size:10px;color:rgba(255,255,255,.7);white-space:nowrap}.tile-price-wrap{display:flex;align-items:baseline;gap:5px;white-space:nowrap}.tile-price-original{font-size:8px;color:rgba(255,255,255,.4);text-decoration:line-through}
.sticky-toolbar{position:sticky;top:66px;z-index:20;padding:9px;background:rgba(28,18,17,.92);backdrop-filter:blur(10px);border:1px solid var(--shelf-line);border-radius:11px;box-shadow:0 10px 25px rgba(0,0,0,.14)}
.filter-summary{min-height:20px;color:var(--shelf-muted);font-size:10px;margin:2px 1px 5px}
@media (max-width:980px){.highlight-grid{grid-template-columns:1fr;min-height:0}.highlight-hero{min-height:290px}.highlight-side{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}.highlight-mini{min-height:110px}.sticky-toolbar{top:56px}.product-rail{grid-auto-columns:200px}}
@media (max-width:680px){.highlight-hero{min-height:260px}.highlight-copy{right:16px;left:16px;bottom:16px}.highlight-copy h4{font-size:17px}.highlight-side{grid-template-columns:1fr 1fr}.highlight-mini{grid-template-columns:1fr;min-height:170px}.highlight-mini img{height:95px}.highlight-mini span{padding:8px}.highlight-mini strong{font-size:10px}.rail-head h3{font-size:16px}.sticky-toolbar{position:relative;top:auto}.filter-summary{font-size:9px}.product-rail{grid-auto-columns:175px}}

/* FINAL POLISH */
@media (min-width:1200px){.deal-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}}
@media (min-width:981px) and (max-width:1199px){.deal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.deal-grid .card{position:relative}
.deal-grid .card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.015)}
.deal-grid .cover-img{transition:transform .45s var(--ease),filter .35s ease}.deal-grid .card:hover .cover-img{transform:scale(1.035);filter:saturate(1.04)}
.deal-grid .tag{z-index:3;box-shadow:0 5px 12px rgba(0,0,0,.22)}
.genre-strip{border-bottom:1px solid var(--shelf-line);margin-bottom:14px;padding-bottom:12px}.genre-strip .chip{border-radius:7px;padding-inline:13px}.genre-strip .chip.is-active{box-shadow:0 4px 14px rgba(198,40,40,.2)}
.quick-filters{padding-bottom:11px}.filter-pill{border-radius:7px}
.sale-stats .stat-card{position:relative;overflow:hidden}.sale-stats .stat-card::before{content:"";position:absolute;right:0;top:0;bottom:0;width:3px;background:var(--red);opacity:.9}
.featured-card:first-child{box-shadow:0 18px 45px rgba(0,0,0,.18)}
.product-rail{mask-image:linear-gradient(to left,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}
@media (prefers-reduced-motion:reduce){.product-rail{mask-image:none}}

/* =========================
   FLASH DEALS
   حس فوریت با رنگ‌های موجود (قرمز برند + طلایی) ساخته می‌شود، نه با
   رنگ جدید — چون طبق اصل «Evolution not Redesign» نباید پالت جدیدی
   اضافه شود. تایمر همان تاریخ واقعی پایان کمپین را نشان می‌دهد (نگاه
   کن به کامنت بالای این بخش در index.html)، نه یک عدد ساختگی.
========================= */
.flash-deals{padding:20px 18px;margin:8px 0 6px;border-radius:16px;background:linear-gradient(135deg,rgba(198,40,40,.14),rgba(232,151,58,.06));border:1px solid rgba(198,40,40,.28)}
.flash-timer{display:inline-flex;align-items:center;gap:8px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:7px 12px}
.flash-timer-label{font-size:10px;color:var(--shelf-muted)}
.flash-timer-clock{display:inline-flex;align-items:center;gap:3px;font-variant-numeric:tabular-nums;font-weight:800;color:var(--gold-light);font-size:13px}
.flash-timer-clock b{font-weight:500;color:rgba(255,255,255,.35);margin:0 1px}
.flash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-top:16px}
.flash-grid .card.is-flash{border-color:rgba(198,40,40,.4);box-shadow:0 0 0 1px rgba(198,40,40,.15) inset}
.flash-grid .card.is-flash .tag{background:var(--red)}
@media (max-width:640px){
    .flash-deals{padding:15px 12px}
    .mini-head{flex-wrap:wrap;gap:10px}
}

/* =========================
   AUTUMN VISUAL LANGUAGE — فراتر از چند برگ تزئینی
   هدف: حس «پاییز/Gaming پریمیوم» در سراسر رابط کاربری، نه فقط هیرو.
   همه‌چیز از توکن‌های رنگی موجود (--red, --ember, --gold) ساخته شده،
   بدون رنگ جدید و بدون افکت سنگین/متحرک دائمی — فقط Glow، Gradient و
   Shadow ظریف، دقیقاً همان چیزی که برای «Controlled» بودن لازم است.
========================= */

/* دکمه اصلی: به‌جای قرمز تخت، یک گرادیان گرم (قرمز→کهربایی) — حس
   «اخگر» (Ember) به‌جای یک رنگ صاف تبلیغاتی. */
.btn-primary {
    background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 55%, #8a1c1c 100%);
    position: relative;
}
.btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 176, 128, .35), transparent 60%);
    opacity: 0;
    transition: opacity .25s ease;
}
.btn-primary:hover::after { opacity: 1; }

/* Hover گرم روی کارت‌ها — به‌جای سایه خنثی مشکی، یک درخشش بسیار ظریف
   کهربایی، تا حتی تعامل با کارت‌ها هم پاییزی احساس شود. */
.deal-grid .card:hover,
.featured-card:hover,
.product-tile:hover {
    box-shadow: 0 16px 34px rgba(0, 0, 0, .22), 0 0 0 1px rgba(232, 151, 58, .12);
}

/* بج تخفیف: گرادیان به‌جای رنگ تخت — همان رنگ پایه (طلایی/قرمز) را
   حفظ می‌کند، فقط با یک درخشش گرم‌تر در گوشه. */
.deal-grid .tag {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .22), transparent 55%);
    background-blend-mode: overlay;
}

/* خط جداکننده فصلی بین Sectionهای اصلی — به‌جای یک خط صاف خاکستری،
   یک گرادیان محو قرمز→کهربایی→محو، مثل نور غروب پاییزی. بسیار ظریف،
   فقط یک هایلایت ۱px، هیچ هزینه Performance ندارد. */
.deal-highlights,
.flash-deals,
.deal-rails {
    position: relative;
}
.deal-highlights::before,
.flash-deals::before,
.deal-rails::before {
    content: "";
    position: absolute;
    top: -14px;
    right: 8%;
    left: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 151, 58, .35), rgba(198, 40, 40, .35), transparent);
}

/* درخشش بسیار ظریف پشت عنوان‌های Eyebrow — حس گرمای نور محیطی
   (Warm Ambient Lighting) بدون افکت سنگین یا متحرک. */
.mini-head .eyebrow {
    position: relative;
}
.mini-head .eyebrow::before {
    content: "";
    position: absolute;
    right: -14px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ember);
    box-shadow: 0 0 8px 2px rgba(232, 151, 58, .5);
    transform: translateY(-50%);
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary::after { transition: none; }
}

/* =========================
   NO SELECT / NO NATIVE DRAG
   محتوای نمایشی (متن، قیمت، نام محصول، تصاویر، کارت‌ها) با Drag موس
   Select/Highlight نمی‌شود و تصاویر/لینک‌ها Ghost-Drag مرورگر ندارند.
   فقط رفتار Select/Drag غیرفعال شده؛ pointer-events دست‌نخورده است،
   پس click، لینک‌ها، دکمه‌ها، Scroll افقی و Drag-to-Scroll مثل قبل کار می‌کنند.
   فیلدهای ورودی (جست‌وجو و ...) عمداً قابل Select/تایپ می‌مانند.
========================= */

body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

img,
a {
    -webkit-user-drag: none;
    user-drag: none;
}

img {
    -webkit-user-select: none;
    user-select: none;
}

input,
textarea,
select {
    -webkit-user-select: text;
    user-select: text;
}