/* ============================================================
   دیباگ | سیستم طراحی فروشگاه - «کارگاه شب»
   دارک فرست + تم روشن درجه یک
   ============================================================ */

@layer reset, tokens, base, layout, components, utilities;

@font-face{
    font-family:'Vazirmatn';
    src:url('/assets/fonts/vazirmatn-fa.woff2') format('woff2');
    font-weight:100 900;
    font-style:normal;
    font-display:swap;
}

@view-transition{navigation:auto}

@layer reset{
    *,*::before,*::after{box-sizing:border-box}
    *{margin:0;padding:0}
    html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
    body{min-block-size:100dvh;-webkit-font-smoothing:antialiased}
    img,picture,svg,video{display:block;max-inline-size:100%;block-size:auto}
    input,button,textarea,select{font:inherit;color:inherit}
    button{background:none;border:0;cursor:pointer}
    a{color:inherit;text-decoration:none}
    ul[class],ol[class]{list-style:none}
    table{border-collapse:collapse}
    :target{scroll-margin-block-start:6rem}
}

@layer tokens{
    :root{
        color-scheme:dark;
        --font:'Vazirmatn',system-ui,'Segoe UI',Tahoma,sans-serif;
        --fw-base:430;

        --bg:#101319;
        --bg:oklch(0.16 0.015 260);
        --bg-2:#161a22;
        --bg-2:oklch(0.19 0.017 260);
        --surface:#1b1f28;
        --surface:oklch(0.215 0.018 260);
        --surface-2:#222735;
        --surface-2:oklch(0.25 0.02 260);
        --line:#2c3240;
        --line:oklch(0.30 0.02 260);
        --line-2:#3d4454;
        --line-2:oklch(0.38 0.022 260);

        --ink:#eef0f5;
        --ink:oklch(0.95 0.008 260);
        --ink-2:#bcc0cb;
        --ink-2:oklch(0.80 0.012 260);
        --muted:#8f95a3;
        --muted:oklch(0.66 0.015 260);

        --accent:#efab4a;
        --accent:oklch(0.78 0.15 75);
        --accent-2:#ffbe63;
        --accent-2:oklch(0.84 0.15 75);
        --accent-ink:#3a2a10;
        --accent-ink:oklch(0.22 0.05 75);

        /* 🔴 کهربایی به‌عنوان «متن» جدا از کهربایی به‌عنوان «پس‌زمینه».
           در تم تیره همان --accent است (۹.۵:۱)، ولی روی سطح روشن
           فقط ۲.۴:۱ می‌دهد و باید تیره‌تر شود. پایین در تم روشن
           بازنویسی می‌شود. */
        --accent-text:var(--accent);

        --ok:#3fc79a;
        --ok:oklch(0.75 0.15 160);
        --err:#f4635a;
        --err:oklch(0.68 0.19 25);

        --aurora-1:#5b6ae0;
        --aurora-1:oklch(0.55 0.18 265);
        --aurora-2:#45a5c4;
        --aurora-2:oklch(0.60 0.14 200);
        --aurora-3:#c8853a;
        --aurora-3:oklch(0.65 0.16 75);

        --glass:rgba(255,255,255,.05);

        /* ارتفاع فقط برای چیزی که واقعاً «بالاتر» است: منوی بازشو،
           مودال، کارت در حالت هاور. کارت عادی سایه نمی‌خواهد — یک خط
           --line تمیزتر و مدرن‌تر است. */
        --shadow-1:0 1px 2px rgba(0,0,0,.30);
        --shadow-2:0 6px 18px -8px rgba(0,0,0,.55);
        --shadow-3:0 22px 50px -28px rgba(0,0,0,.70);
        --noise-op:.035;

        /* ---------- گردی: سه سطح، نه بیشتر ---------- */
        --r-xs:.4rem;
        --r-sm:.6rem;
        --r:.9rem;
        --r-lg:1.4rem;
        --r-full:999px;

        /* ---------- مقیاس تایپوگرافی سیال ----------
           تنها منبع حقیقتِ اندازه در کل فایل. عمداً یک پله بزرگ‌تر از
           مقیاس لاتین شروع می‌شود: خط فارسی در اندازه‌ی برابر کوچک‌تر
           دیده می‌شود. */
        --step--2:clamp(.75rem,.72rem + .12vw,.81rem);
        --step--1:clamp(.85rem,.82rem + .16vw,.93rem);
        --step-0:clamp(.98rem,.94rem + .20vw,1.07rem);
        --step-1:clamp(1.14rem,1.06rem + .38vw,1.35rem);
        --step-2:clamp(1.34rem,1.20rem + .66vw,1.72rem);
        --step-3:clamp(1.62rem,1.36rem + 1.24vw,2.30rem);
        --step-4:clamp(2rem,1.50rem + 2.35vw,3.30rem);

        /* نام‌های قدیمی نگه داشته شدند تا کل فایل یک‌جا دست‌کاری نشود */
        --fs-xs:var(--step--2);
        --fs-sm:var(--step--1);
        --fs-base:var(--step-0);
        --fs-lg:var(--step-1);
        --fs-h3:var(--step-2);
        --fs-h2:var(--step-3);
        --fs-h1:var(--step-4);

        /* ---------- مقیاس فاصله: هندسی، نه اعداد دلبخواه ---------- */
        --space-3xs:.25rem;
        --space-2xs:.5rem;
        --space-xs:.75rem;
        --space-s:1rem;
        --space-m:1.5rem;
        --space-l:2.25rem;
        --space-xl:3.5rem;
        --space-2xl:5rem;
        --space-3xl:7rem;

        --wrap:1280px;
        --gap:clamp(1rem,.72rem + 1.15vw,1.5rem);
        /* ریتم عمودی یکسان همه‌ی بخش‌ها: xl روی موبایل تا 2xl روی دسکتاپ */
        --block:clamp(3.5rem,2.6rem + 3.8vw,5rem);

        /* ---------- حرکت: کوتاه، فقط روی حالت‌های تعاملی ---------- */
        --dur-1:140ms;
        --dur-2:220ms;
        --dur:var(--dur-2);
        --ease:cubic-bezier(.2,.7,.3,1);
    }

    :root[data-theme="light"]{
        color-scheme:light;
        --fw-base:400;

        --bg:#f9fafb;
        --bg:oklch(0.985 0.003 260);
        --bg-2:#f0f2f6;
        --bg-2:oklch(0.96 0.005 260);
        --surface:#ffffff;
        --surface:oklch(1 0 0);
        --surface-2:#f4f6f9;
        --surface-2:oklch(0.97 0.005 260);
        --line:#dde0e7;
        --line:oklch(0.90 0.008 260);
        --line-2:#c5c9d3;
        --line-2:oklch(0.82 0.01 260);

        --ink:#232833;
        --ink:oklch(0.25 0.02 260);
        --ink-2:#454c5c;
        --ink-2:oklch(0.42 0.02 260);
        /* 🔴 در تم روشن این سه رنگ اندازه‌گیری شدند و زیر ۴.۵:۱ بودند.
           تیره‌تر شدند تا روی سطح روشن خوانا باشند. */
        --muted:#5f6675;
        --muted:oklch(0.50 0.015 260);

        --ok:#12805a;
        --ok:oklch(0.52 0.13 160);
        --err:#c53430;
        --err:oklch(0.53 0.20 25);

        --accent:#d9913a;
        --accent:oklch(0.72 0.16 70);
        --accent-2:#c5802c;
        --accent-2:oklch(0.66 0.16 70);
        --accent-ink:#2a1d08;
        --accent-ink:oklch(0.20 0.05 70);

        --glass:rgba(255,255,255,.7);
        --shadow-1:0 1px 2px rgba(20,25,40,.05);
        --shadow-2:0 6px 16px -8px rgba(20,25,40,.20);
        --shadow-3:0 22px 46px -28px rgba(20,25,40,.30);
        --noise-op:.02;
    }

    /* ---------- رمپ کهربایی ----------
       این چیزی است که رقیب‌ها ندارند: به‌جای چند رنگ تک‌افتاده، یک رمپ
       که از خودِ --accent مشتق می‌شود. مدیر رنگ تأکید را در تنظیمات عوض
       می‌کند و کل رمپ خودش هماهنگ می‌شود.

       🔴 هگزها پشتیبان‌اند و باید اول بیایند: مرورگری که color-mix
       ندارد، مقدار را داخل متغیر ذخیره می‌کند و فقط سر مصرف شکست
       می‌خورد — پس نسخه‌ی زنده حتماً داخل @supports است. */
    :root{
        --accent-050:#201b13;
        --accent-100:#2e2315;
        --accent-200:#46331a;
        --accent-300:#6d4e22;
        --accent-600:#d1913b;
        --accent-700:#a5712c;
    }
    :root[data-theme="light"]{
        --accent-050:#fdf7ee;
        --accent-100:#f9ecd9;
        --accent-200:#f0d6ab;
        --accent-300:#e3b877;
        --accent-600:#c07f2b;
        --accent-700:#96621f;
    }
    :root[data-theme="light"]{--accent-text:#7c5411}

    @supports (color:color-mix(in oklch,red,blue)){
        :root[data-theme="light"]{--accent-text:var(--accent-700)}

        /* accent-2 (پس‌زمینه‌ی هاور) و accent-ink (متن روی کهربایی) هم از
           همان --accent مشتق می‌شوند، وگرنه با عوض‌کردن رنگ تأکید در
           تنظیمات، هاور دکمه کهربایی می‌ماند. */
        :root{
            --accent-2:color-mix(in oklab,var(--accent) 86%,#fff);
            --accent-ink:color-mix(in oklab,var(--accent) 26%,#000);
        }
        :root[data-theme="light"]{
            --accent-2:var(--accent-600);
            --accent-ink:color-mix(in oklab,var(--accent) 24%,#000);
        }

        :root,:root[data-theme="light"]{
            --accent-050:color-mix(in oklab,var(--accent) 8%,var(--surface));
            --accent-100:color-mix(in oklab,var(--accent) 16%,var(--surface));
            --accent-200:color-mix(in oklab,var(--accent) 30%,var(--surface));
            --accent-300:color-mix(in oklab,var(--accent) 48%,var(--surface));
            --accent-600:color-mix(in oklab,var(--accent) 84%,#000);
            --accent-700:color-mix(in oklab,var(--accent) 66%,#000);
        }
    }
}

@layer base{
    html{font-family:var(--font);scroll-behavior:smooth}

    body{
        font-family:var(--font);
        font-weight:var(--fw-base);
        font-size:var(--fs-base);
        line-height:1.85;
        color:var(--ink);
        background-color:var(--bg);
        position:relative;
        overflow-x:hidden;
    }

    @supports (background:color-mix(in oklab,red,blue)){
        body{
            background-image:
                radial-gradient(58rem 38rem at 88% -12%,color-mix(in oklab,var(--aurora-1) 20%,transparent),transparent 62%),
                radial-gradient(46rem 32rem at 8% -4%,color-mix(in oklab,var(--aurora-2) 16%,transparent),transparent 58%);
            background-repeat:no-repeat;
            background-attachment:fixed;
        }
    }

    /* بافت نویز ظریف - حس پریمیوم بدون تصویر سنگین */
    body::before{
        content:"";
        position:fixed;
        inset:0;
        z-index:0;
        pointer-events:none;
        opacity:var(--noise-op);
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    body > *{position:relative;z-index:1}

    /* 🔴 letter-spacing روی فارسی همیشه صفر. هر مقدار منفی یا مثبت
       حروف را از چسبندگی می‌اندازد و کلمه را می‌شکند. وزن ۷۰۰ هم سقف
       است؛ ۸۰۰ و ۹۰۰ در وزیرمتن توپر و بدخوان می‌شوند. */
    h1,h2,h3,h4{
        line-height:1.5;
        font-weight:700;
        text-wrap:balance;
        letter-spacing:0;
    }
    h1{font-size:var(--fs-h1)}
    h2{font-size:var(--fs-h2)}
    h3{font-size:var(--fs-h3)}
    p{text-wrap:pretty}
    strong,b{font-weight:700}
    small{font-size:var(--fs-sm)}

    a{transition:color var(--dur) var(--ease)}
    a:hover{color:var(--accent-text)}

    ::selection{background:var(--accent);color:var(--accent-ink)}

    :focus-visible{
        outline:2px solid var(--accent);
        outline-offset:3px;
        border-radius:var(--r-xs);
    }

    html{scrollbar-color:var(--line-2) transparent;scrollbar-width:thin}

    hr{border:0;block-size:1px;background:var(--line)}
}

@layer layout{
    .wrap{
        inline-size:min(100% - 2.2rem,var(--wrap));
        margin-inline:auto;
    }
    .wrap-sm{
        inline-size:min(100% - 2.2rem,780px);
        margin-inline:auto;
    }
    .section{padding-block:var(--block)}
    .stack{display:flex;flex-direction:column;gap:var(--gap)}
    .row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
    .row-between{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
}

@layer utilities{
    /* متن لاتین داخل متن فارسی - الگوی ثابت پروژه */
    .ltr{unicode-bidi:isolate;direction:ltr;display:inline-block}
    /* شماره‌ی سفارش و کلید لایسنس با فونت متن، رقم‌ها را نامرتب نشان
       می‌دادند و صفر و O یکی به نظر می‌رسیدند. */
    .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;letter-spacing:.01em}
    .plain{unicode-bidi:plaintext}
    .muted{color:var(--muted)}
    .ink-2{color:var(--ink-2)}
    .accent{color:var(--accent-text)}
    .tiny{font-size:var(--fs-xs)}
    .center{text-align:center}
    .nowrap{white-space:nowrap}

    .sr-only{
        position:absolute;
        inline-size:1px;block-size:1px;
        padding:0;margin:-1px;
        overflow:hidden;
        clip-path:inset(50%);
        white-space:nowrap;
    }

    .skip-link{
        position:absolute;
        inset-block-start:-100px;
        inset-inline-start:1rem;
        z-index:99;
        background:var(--accent);
        color:var(--accent-ink);
        padding:.6rem 1.1rem;
        border-radius:var(--r-sm);
        font-weight:700;
        transition:inset-block-start var(--dur) var(--ease);
    }
    .skip-link:focus{inset-block-start:1rem}

    /* بخش‌های پایین صفحه تا وقتی به دیدرس نرسیده‌اند رنگ‌آمیزی نمی‌شوند.
       سود واقعی روی موبایل کند. contain-intrinsic-size جلوی پرش
       چیدمان (CLS) را می‌گیرد. */
    @supports (content-visibility:auto){
        .defer{content-visibility:auto;contain-intrinsic-size:auto 34rem}
    }
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
    @view-transition{navigation:none}
}

@layer components{

    /* ---------------- دکمه ---------------- */
    /* هدف لمس هیچ‌وقت زیر ۴۴ پیکسل نمی‌رود — این تنها عددی است که
       روی موبایل واقعاً حس «اپلیکیشن» می‌سازد. */
    .btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:.5rem;
        min-block-size:2.75rem;
        padding-block:.6rem;
        padding-inline:1.4rem;
        border-radius:var(--r-full);
        font-weight:700;
        font-size:var(--fs-sm);
        line-height:1.6;
        border:1px solid transparent;
        transition:transform var(--dur-1) var(--ease),background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
        white-space:nowrap;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn:active{transform:translateY(0)}

    /* 🔴 متن تیره روی کهربایی، نه سفید: سفید روی کهربایی نسبت ۴.۵:۱ را
       رد می‌کند. --accent-ink عمداً تیره است. */
    .btn-primary{
        background:var(--accent);
        color:var(--accent-ink);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
    }
    .btn-primary:hover{background:var(--accent-2);color:var(--accent-ink)}

    .btn-outline{
        border-color:var(--line-2);
        color:var(--ink);
        background:var(--glass);
    }
    .btn-outline:hover{border-color:var(--accent);color:var(--accent-text)}

    .btn-ghost{color:var(--ink-2)}
    .btn-ghost:hover{color:var(--ink);background:var(--surface-2)}

    .btn-lg{min-block-size:3.1rem;padding-inline:1.9rem;font-size:var(--fs-base)}
    .btn-sm{min-block-size:2.3rem;padding-block:.4rem;padding-inline:.95rem;font-size:var(--fs-xs)}
    .btn-block{inline-size:100%}

    .icon-btn{
        display:inline-grid;
        place-items:center;
        inline-size:2.75rem;
        block-size:2.75rem;
        border-radius:var(--r-full);
        color:var(--ink-2);
        border:1px solid transparent;
        transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
    }
    .icon-btn:hover{background:var(--surface-2);color:var(--ink);border-color:var(--line)}
    .icon-btn svg{inline-size:1.15rem;block-size:1.15rem;stroke-width:1.7}

    /* ---------------- هدر ---------------- */
    .site-header{
        position:sticky;
        inset-block-start:0;
        z-index:50;
        border-block-end:1px solid transparent;
        transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
    }
    .site-header::before{
        content:"";
        position:absolute;
        inset:0;
        z-index:-1;
        opacity:0;
        background:color-mix(in oklab,var(--bg) 82%,transparent);
        transition:opacity var(--dur) var(--ease);
    }
    .site-header[data-stuck="1"]{border-block-end-color:var(--line)}
    .site-header[data-stuck="1"]::before{opacity:1}

    /* 🔴 پس‌زمینه ۸۲٪ کم بود و متن صفحه از پشت هدر خوانده می‌شد — روی
       کارت محصول که متن پررنگ دارد کاملاً تداخل می‌کرد. کدری بیشتر
       به‌علاوه‌ی یک سایه‌ی نرم که لبه‌ی هدر را از محتوا جدا می‌کند. */
    .site-header[data-stuck="1"]::before{
        background:#f7f8fa;
        background:color-mix(in oklab,var(--bg) 94%,transparent);
    }
    .site-header[data-stuck="1"]{
        box-shadow:0 1px 0 rgba(15,23,42,.05),0 10px 26px -20px rgba(15,23,42,.5);
    }

    @supports (backdrop-filter:blur(4px)){
        /* با بلور، شفافیت بیشتری قابل تحمل است چون متن پشتی محو می‌شود */
        .site-header[data-stuck="1"]::before{
            backdrop-filter:blur(16px) saturate(150%);
            background:color-mix(in oklab,var(--bg) 86%,transparent);
        }
    }

    .header-inner{
        display:flex;
        align-items:center;
        gap:1.2rem;
        min-block-size:4.4rem;
    }

    .brand{
        display:inline-flex;
        align-items:center;
        gap:.6rem;
        font-weight:700;
        font-size:1.24rem;
        letter-spacing:0;
        color:var(--ink);
    }
    .brand:hover{color:var(--ink)}
    .brand-mark{
        display:grid;
        place-items:center;
        inline-size:2.2rem;
        block-size:2.2rem;
        border-radius:var(--r-sm);
        background:var(--accent);
        color:var(--accent-ink);
        font-size:.95rem;
        font-weight:800;
        unicode-bidi:isolate;
        direction:ltr;
    }
    .brand-logo{
        display:block;
        block-size:2.2rem;
        inline-size:auto;
        border-radius:var(--r-sm);
        object-fit:contain;
    }
    .brand-sub{
        font-size:var(--fs-xs);
        font-weight:500;
        color:var(--muted);
        border-inline-start:1px solid var(--line);
        padding-inline-start:.6rem;
        margin-inline-start:.1rem;
    }

    .nav{display:flex;align-items:center;gap:.3rem;margin-inline-start:auto}
    .nav-link{
        position:relative;
        padding-block:.5rem;
        padding-inline:.85rem;
        border-radius:var(--r-sm);
        font-size:var(--fs-sm);
        font-weight:600;
        color:var(--ink-2);
        transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
    }
    .nav-link:hover{color:var(--ink);background:var(--surface-2)}
    .nav-link[aria-current="page"]{color:var(--accent-text)}
    .nav-link[aria-current="page"]::after{
        content:"";
        position:absolute;
        inset-block-end:.15rem;
        inset-inline:.85rem;
        block-size:2px;
        border-radius:2px;
        background:var(--accent);
    }

    .header-actions{display:flex;align-items:center;gap:.35rem}

    /* ---------------- پوسته‌ی موبایل ----------------
       🔴 فقط کوئری عرضی. هیچ pointer:coarse و هیچ hover:none — وگرنه
       وقتی کاربر در مرورگر موبایل «نمایش سایت دسکتاپ» را می‌زند،
       دستگاه هنوز لمسی است و پوسته‌ی موبایل می‌ماند. با عرض، دقیقاً
       دسکتاپ می‌بیند. */
    @media (max-width:860px){
        .nav{
            display:flex;order:3;flex:0 0 100%;margin:0 0 .35rem;gap:.15rem;
            overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
            -webkit-overflow-scrolling:touch;
        }
        .nav::-webkit-scrollbar{display:none}
        .nav-link{padding-block:.35rem;font-size:.86rem;white-space:nowrap;flex:0 0 auto}
        .header-actions{margin-inline-start:auto}
        .brand-sub{display:none}
        .header-inner{min-block-size:3.6rem;gap:0 .7rem;flex-wrap:wrap}

        /* ⚠️ روی موبایل هدر همیشه پس‌زمینه دارد، نه فقط در حالت چسبیده.
           دو دلیل: هدر شفافِ اپ‌مانند وجود ندارد، و مهم‌تر اینکه حالت
           چسبیده را جاوااسکریپت می‌گذارد — اگر دیر بیاید یا نیاید،
           برند روی متن کارت می‌افتد و خوانده نمی‌شود. */
        .site-header::before{opacity:1}
        .site-header{border-block-end-color:var(--line)}
        .brand{font-size:1.08rem}
        .brand-mark,.brand-logo{inline-size:1.9rem;block-size:1.9rem}

        /* هرچه در نوار پایین آمده از هدر برداشته می‌شود؛ روی موبایل
           هدر فقط برند است و کلید تم. */
        .header-actions{margin-inline-start:auto}
        .header-actions > *:not([data-theme-toggle]){display:none}
    }

    /* ---------------- نوار ناوبری پایین ---------------- */
    .tabbar{display:none}

    @media (max-width:860px){
        :root{--tabbar-h:3.4rem}

        .tabbar{
            position:fixed;
            inset-inline:0;
            inset-block-end:0;
            z-index:60;
            display:grid;
            grid-auto-flow:column;
            grid-auto-columns:1fr;
            background:var(--bg-2);
            border-block-start:1px solid var(--line);
            padding-block-end:env(safe-area-inset-bottom,0px);
        }
        .tabbar__item{
            position:relative;
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            gap:.15rem;
            min-block-size:var(--tabbar-h);
            padding-block:.4rem;
            color:var(--muted);
            transition:color var(--dur-1) var(--ease);
        }
        .tabbar__item:hover{color:var(--ink-2)}
        .tabbar__ico-wrap{position:relative;display:grid;place-items:center}
        .tabbar__ico{inline-size:1.4rem;block-size:1.4rem}
        .tabbar__label{font-size:.68rem;font-weight:600;line-height:1.6}

        .tabbar__item[aria-current="page"]{color:var(--accent-text)}
        .tabbar__item[aria-current="page"]::before{
            content:"";
            position:absolute;
            inset-block-start:0;
            inset-inline:28%;
            block-size:2px;
            border-end-start-radius:2px;
            border-end-end-radius:2px;
            background:var(--accent);
        }

        .tabbar__n{
            position:absolute;
            inset-block-start:-.35rem;
            inset-inline-end:-.6rem;
            min-inline-size:1.05rem;
            block-size:1.05rem;
            padding-inline:.25rem;
            border-radius:var(--r-full);
            background:var(--accent);
            color:var(--accent-ink);
            font-size:.62rem;
            font-weight:800;
            line-height:1;
            display:grid;
            place-items:center;
        }

        /* محتوا و فوتر زیر نوار پنهان نشوند */
        body{padding-block-end:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px))}
    }

    @supports (backdrop-filter:blur(4px)){
        @media (max-width:860px){
            /* ۸۶٪ کم بود: متن کارت از پشت نوار خوانده می‌شد — همان
               چیزی که سر هدر چسبان هم به آن خوردیم. */
            .tabbar{
                background:color-mix(in oklab,var(--bg-2) 93%,transparent);
                backdrop-filter:blur(16px) saturate(150%);
            }
        }
    }

    .hero-sub{
        font-size:var(--fs-lg);
        color:var(--ink-2);
        max-inline-size:38rem;
        margin-block-end:2rem;
    }

    /* ---------------- سرصفحه بخش ---------------- */
    .section-head{
        display:flex;
        align-items:flex-end;
        justify-content:space-between;
        gap:var(--space-s);
        flex-wrap:wrap;
        margin-block-end:var(--space-l);
    }
    .section-title{margin-block-end:.3rem}
    .section-desc{color:var(--muted);font-size:var(--fs-sm)}
    .section-link{
        font-size:var(--fs-sm);
        font-weight:700;
        color:var(--accent-text);
        display:inline-flex;
        align-items:center;
        gap:.35rem;
        white-space:nowrap;
    }
    .section-link:hover{color:var(--accent-text)}
    .section-link svg,.section-link__ico{
        inline-size:1rem;
        block-size:1rem;
        transition:transform var(--dur-1) var(--ease);
    }
    .section-link:hover svg,.section-link:hover .section-link__ico{transform:translateX(-.2rem)}

    /* ---------------- کارت محصول ---------------- */
    /* 🔴 auto-fit نه auto-fill: با auto-fill ستون‌های خالی سر جایشان
       می‌مانند و کاتالوگ سه‌تایی یک جای خالی بزرگ کنار خودش می‌گذارد
       که شبیه خرابی است. auto-fit ستون خالی را جمع می‌کند. */
    .p-grid{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
        gap:var(--gap);
    }
    /* 🔴 با کمتر از سه کارت، auto-fit هرکدام را تا نصف صفحه می‌کشد و
       کارت ۶۳۰ پیکسلی شبیه خرابی است. زیر سه‌تا، ستون سقف می‌گیرد. */
    @supports selector(:has(*)){
        .p-grid:not(:has(> :nth-child(3))),
        .article-grid:not(:has(> :nth-child(3))){
            grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),24rem));
            justify-content:start;
        }
    }

    .p-card{
        container-type:inline-size;
        position:relative;
        display:flex;
        flex-direction:column;
        background:var(--surface);
        border:1px solid var(--line);
        border-radius:var(--r);
        overflow:hidden;
        transition:transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
    }
    /* بالا آمدن ۲ پیکسل و تغییر رنگ حاشیه. سایه‌ی درشت روی کارت همان
       چیزی است که سایت‌های رقیب را ارزان نشان می‌دهد. */
    .p-card:hover{
        transform:translateY(-2px);
        border-color:var(--accent-300);
        box-shadow:var(--shadow-2);
    }
    .p-card:has(.badge-accent){border-color:var(--accent-200)}

    /* ریزتعامل امضا: یک خط کهربایی که از لبه‌ی راست کارت باز می‌شود.
       ارزان‌تر و آرام‌تر از سایه‌ی درشت، و کسی دیگر ندارد. */
    .p-card::after{
        content:"";
        position:absolute;
        inset-block-start:0;
        inset-inline:0;
        z-index:2;
        block-size:2px;
        background:var(--accent);
        transform:scaleX(0);
        transform-origin:100% 50%;
        transition:transform var(--dur-2) var(--ease);
    }
    .p-card:hover::after,.p-card:focus-within::after{transform:scaleX(1)}

    .p-card__media{
        position:relative;
        aspect-ratio:16/10;
        background:var(--surface-2);
        overflow:hidden;
    }
    .p-card__media img{
        inline-size:100%;
        block-size:100%;
        object-fit:cover;
        transition:transform .5s var(--ease);
    }
    .p-card:hover .p-card__media img{transform:scale(1.06)}

    /* نورافکنی که با نشانگر حرکت می‌کند. مختصاتش را shop.js روی خود
       کارت می‌گذارد؛ اگر جاوااسکریپت نرسید، وسط کارت می‌ماند و باز هم
       درست به نظر می‌رسد. */
    @supports (background:color-mix(in oklab,red,blue)){
        .p-card__media::after{
            content:"";
            position:absolute;
            inset:0;
            z-index:1;
            pointer-events:none;
            opacity:0;
            transition:opacity var(--dur-2) var(--ease);
            background:radial-gradient(14rem 14rem at var(--mx,50%) var(--my,50%),
                color-mix(in oklab,var(--accent) 30%,transparent),transparent 62%);
        }
        .p-card:hover .p-card__media::after{opacity:1}
    }
    .p-card__media .badge{
        position:absolute;
        inset-block-start:.7rem;
        inset-inline-start:.7rem;
    }
    .p-card__empty{
        display:grid;
        place-items:center;
        block-size:100%;
        color:var(--muted);
        font-size:var(--fs-xs);
    }

    .p-card__body{
        display:flex;
        flex-direction:column;
        gap:.5rem;
        padding-block:var(--space-s);
        padding-inline:var(--space-s);
        flex:1;
    }
    .p-card__cat{font-size:var(--fs-xs);color:var(--muted)}
    /* عنوان دقیقاً دو خط: کارت‌های کنار هم بدون گرید-ترفند هم‌قد
       می‌مانند و ردیف نمی‌شکند. */
    .p-card__title{
        font-size:var(--fs-base);
        font-weight:700;
        line-height:1.65;
        color:var(--ink);
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }
    .p-card__excerpt{
        font-size:var(--fs-sm);
        color:var(--muted);
        line-height:1.8;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }
    .p-card__meta{
        display:flex;
        flex-wrap:wrap;
        gap:.4rem;
        margin-block-start:auto;
        padding-block-start:.5rem;
    }
    .p-card__foot{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:.7rem;
        padding-block:.8rem;
        padding-inline:var(--space-s);
        border-block-start:1px solid var(--line);
        background:var(--bg-2);
    }

    .p-card__add{padding-block-end:var(--space-s);padding-inline:var(--space-s)}

    @container (max-width:15rem){
        .p-card__excerpt{display:none}
        .p-card__foot{flex-direction:column;align-items:stretch}
    }

    /* ---------------- نشان و چیپ ---------------- */
    .badge{
        display:inline-flex;
        align-items:center;
        gap:.3rem;
        padding-block:.22rem;
        padding-inline:.6rem;
        border-radius:var(--r-full);
        font-size:var(--fs-xs);
        font-weight:700;
        line-height:1.7;
    }
    .badge-accent{background:var(--accent);color:var(--accent-ink)}
    .badge-soft{
        background:var(--accent-050);
        color:var(--ink-2);
        border:1px solid var(--accent-200);
    }
    /* 🔴 متن بج روی پس‌زمینه‌ی هم‌رنگ خودش اندازه‌گیری شد: badge-err در
       تم تیره ۴٫۳۸:۱ و badge-on در تم روشن ۳٫۹۷:۱ بود — هر دو مردود.
       آمیختن ۲۰٪ با --ink در تم تیره روشن‌ترش می‌کند و در تم روشن
       تیره‌تر، پس یک قانون هر دو تم را درست می‌کند. */
    .badge-on{background:color-mix(in oklab,var(--ok) 18%,var(--surface));color:color-mix(in oklab,var(--ok) 80%,var(--ink))}
    .badge-err{background:color-mix(in oklab,var(--err) 18%,var(--surface));color:color-mix(in oklab,var(--err) 80%,var(--ink))}
    .badge-draft{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}

    /* ---------------- قیمت ---------------- */
    .price{
        display:inline-flex;
        align-items:baseline;
        gap:.3rem;
        font-weight:800;
        font-size:var(--fs-lg);
        color:var(--ink);
    }
    .price small{font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
    /* 🔴 opacity:.75 روی --muted، نسبت را روی سایت زنده به ۳٫۱۹:۱ در تم
       روشن می‌رساند. قیمت قبلی اطلاعات واقعی است نه تزئین؛ خط‌خوردگی و
       اندازه‌ی کوچک‌تر برای کم‌رنگ نشان‌دادنش کافی است. */
    .price-old{
        font-size:var(--fs-xs);
        color:var(--muted);
        text-decoration:line-through;
    }
    .price-free{color:var(--ok)}

    /* ---------------- فوتر ---------------- */
    .site-footer{
        margin-block-start:var(--block);
        border-block-start:1px solid var(--line);
        background:var(--bg-2);
        padding-block:var(--block) 1.6rem;
    }
    /* ---------------- سربرگ فوتر ----------------
       فوتر تا حالا فقط چهار ستون لینک بود و هیچ لنگری نداشت. حالا با
       برند شروع می‌شود، مثل هدر — و همان‌جا تمام می‌شود. */
    .footer-top{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:var(--space-m);
        flex-wrap:wrap;
        padding-block-end:var(--space-m);
        margin-block-end:var(--space-m);
        border-block-end:1px solid var(--line);
    }
    .footer-brand{display:flex;align-items:flex-start;gap:.7rem;max-inline-size:34rem}
    .footer-brand strong{
        display:block;
        font-size:var(--fs-lg);
        font-weight:700;
        color:var(--ink);
        line-height:1.7;
    }
    .footer-brand p{
        font-size:var(--fs-sm);
        color:var(--muted);
        line-height:1.9;
        margin-block-start:.15rem;
    }

    .footer-grid{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
        gap:clamp(1.6rem,1rem + 3vw,3.5rem);
        margin-block-end:2.5rem;
    }
    .footer-col h4{
        font-size:var(--fs-sm);
        font-weight:800;
        margin-block-end:1rem;
        color:var(--ink);
    }
    /* ⚠️ ریست فقط ul[class] را بی‌نشانه می‌کند و این‌ها کلاس ندارند،
       پس نقطه‌ی فهرست می‌گرفتند — نویزی که تا حالا کسی ندیده بود. */
    .footer-col ul{display:flex;flex-direction:column;gap:.6rem;list-style:none}
    .footer-col a,.footer-col p{font-size:var(--fs-sm);color:var(--muted);line-height:1.9}
    .footer-col a:hover{color:var(--accent-text)}
    /* پشتیبانی: سه خط با آیکون، نه سه خط متن لخت */
    .footer-trust li{display:flex;align-items:flex-start;gap:.5rem}
    .footer-ico{
        flex:none;
        inline-size:1rem;
        block-size:1rem;
        margin-block-start:.42rem;
        color:var(--accent-text);
    }
    .footer-badges{display:flex;flex-wrap:wrap;gap:.8rem}
    .footer-badges img{max-block-size:5.5rem;border-radius:var(--r-xs)}
    .footer-bottom{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:1rem;
        flex-wrap:wrap;
        padding-block-start:1.5rem;
        border-block-start:1px solid var(--line);
        font-size:var(--fs-xs);
        color:var(--muted);
    }
    .footer-social{display:flex;gap:.4rem}
    /* امضای پایانی: نام لاتین برند، درشت و آرام */
    .footer-bottom .ltr{
        font-size:clamp(1.5rem,1rem + 2.4vw,2.3rem);
        font-weight:800;
        line-height:1;
        color:var(--muted);
    }

    /* باند تمام‌عرض بدون تغییر ساختار قالب: کلاس کنار .section wrap
       می‌نشیند و پس‌زمینه را تا لبه‌ی صفحه می‌کشد. ریتم عمودی را
       می‌شکند بدون اینکه چیزی شلوغ شود. */
    .band{position:relative}
    .band::before{
        content:"";
        position:absolute;
        z-index:-1;
        inset-block:0;
        inset-inline-start:50%;
        margin-inline-start:-50vw;
        inline-size:100vw;
        background:var(--bg-2);
        border-block:1px solid var(--line);
    }

    /* ---------------- ورود سینمایی هنگام اسکرول ----------------
       بازه‌ی انیمیشن برای هر ستون کمی دیرتر شروع می‌شود، پس کارت‌های
       یک ردیف پشت سر هم بالا می‌آیند نه با هم. چون به موقعیت اسکرول
       گره خورده و نه به تایمر، هیچ چیز خودبه‌خود حرکت نمی‌کند.
       ⚠️ --i با nth-child ساخته می‌شود تا هیچ تغییری در قالب لازم نباشد. */
    .p-grid > *:nth-child(4n+2),.article-grid > *:nth-child(4n+2),.cat-grid > *:nth-child(4n+2){--i:1}
    .p-grid > *:nth-child(4n+3),.article-grid > *:nth-child(4n+3),.cat-grid > *:nth-child(4n+3){--i:2}
    .p-grid > *:nth-child(4n+4),.article-grid > *:nth-child(4n+4),.cat-grid > *:nth-child(4n+4){--i:3}

    @supports (animation-timeline:view()){
        @media (prefers-reduced-motion:no-preference){
            .reveal{
                animation:reveal-in linear both;
                animation-timeline:view();
                animation-range:entry calc(4% + var(--i,0) * 5%) cover calc(26% + var(--i,0) * 5%);
            }
        }
    }
    @keyframes reveal-in{
        from{opacity:0;transform:translateY(26px) scale(.97)}
        to{opacity:1;transform:none}
    }

    /* ---------------- شدت افکت (تنظیمات مدیریت) ---------------- */
    [data-fx="soft"] body::before{opacity:calc(var(--noise-op) / 2)}

    [data-fx="off"] .p-card::after{display:none}
    [data-fx="off"] body{background-image:none}
    [data-fx="off"] body::before{display:none}
    [data-fx="off"] .reveal{animation:none;opacity:1;transform:none}
    [data-fx="off"] .p-card:hover{transform:none}
    [data-fx="off"] .btn:hover{transform:none}
}

@layer components{

    /* ---------------- سرصفحه صفحه داخلی ---------------- */
    .page-hero{
        padding-block:clamp(2.4rem,1.6rem + 3vw,4rem) 0;
    }
    .crumbs{
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        gap:.45rem;
        font-size:var(--fs-xs);
        color:var(--muted);
        margin-block-end:1rem;
    }
    .crumbs a:hover{color:var(--accent-text)}
    .crumbs span[aria-hidden]{opacity:.5}

    /* ---------------- نوار ابزار آرشیو ----------------
       دسته‌ها، جستجو و شمارش نتیجه قبلاً سه چیز جدا با فاصله‌های
       نامساوی بودند. حالا یک بلوک واحدند. */
    .archive-bar{
        display:flex;
        flex-direction:column;
        gap:var(--space-s);
        margin-block-start:var(--space-m);
    }
    .archive-bar__row{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:var(--space-s);
        flex-wrap:wrap;
    }

    /* ---------------- جستجو ----------------
       فیلد و دکمه یک کنترل‌اند، نه دو قرصِ کنار هم. */
    .searchbar{
        display:flex;
        align-items:center;
        gap:.5rem;
        flex:1 1 22rem;
        /* بدون سقف، فیلد تا انتهای ردیف کش می‌آید و دکمه‌ی «جستجو»
           چند صد پیکسل دورتر از متن می‌افتد. */
        max-inline-size:34rem;
        min-inline-size:0;
        padding-block:.3rem;
        padding-inline:.4rem .9rem;
        border-radius:var(--r-full);
        border:1px solid var(--line);
        background:var(--surface);
        transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
    }
    .searchbar:focus-within{
        border-color:var(--accent);
        box-shadow:0 0 0 3px var(--accent-100);
    }
    .searchbar__ico{
        flex:none;
        inline-size:1.05rem;
        block-size:1.05rem;
        color:var(--muted);
    }
    .searchbar input[type="search"]{
        flex:1 1 auto;
        min-inline-size:0;
        padding:0;
        border:0;
        background:none;
        color:var(--ink);
        font-size:var(--fs-sm);
    }
    .searchbar input[type="search"]:focus{outline:none}
    .searchbar input::placeholder{color:var(--muted)}
    .searchbar input[type="search"]::-webkit-search-cancel-button{display:none}

    .searchbar__clear{
        flex:none;
        display:grid;
        place-items:center;
        inline-size:1.5rem;
        block-size:1.5rem;
        border-radius:var(--r-full);
        color:var(--muted);
        font-size:1rem;
        line-height:1;
    }
    .searchbar__clear:hover{background:var(--surface-2);color:var(--ink)}
    .searchbar__go{flex:none}

    .result-note{
        flex:none;
        font-size:var(--fs-sm);
        color:var(--muted);
    }
    .result-note strong{color:var(--ink);font-weight:800}

    /* ---------------- حالت خالی ---------------- */
    .empty-state{
        display:grid;
        place-items:center;
        gap:.7rem;
        padding-block:clamp(3rem,2rem + 5vw,5.5rem);
        text-align:center;
        border:1px dashed var(--line);
        border-radius:var(--r);
        background:var(--surface);
    }
    .empty-state svg{
        inline-size:2.4rem;
        block-size:2.4rem;
        color:var(--accent-text);
        stroke-width:1.4;
    }
    .empty-state h3{font-size:var(--fs-lg)}
    .empty-state p{color:var(--muted);font-size:var(--fs-sm);max-inline-size:26rem}

    /* ---------------- دسته‌بندی‌ها ---------------- */
    .cat-grid{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
        gap:var(--gap);
    }
    .cat-card{
        display:flex;
        flex-direction:column;
        gap:.3rem;
        padding:1.3rem 1.4rem;
        border:1px solid var(--line);
        border-radius:var(--r);
        background:var(--surface);
        transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
    }
    .cat-card:hover{
        transform:translateY(-2px);
        border-color:var(--accent-300);
        background:var(--accent-050);
        color:var(--ink);
    }
    .cat-card strong{font-size:var(--fs-base);font-weight:700}
    .cat-card span{font-size:var(--fs-xs);color:var(--muted)}

    /* ---------------- صفحه‌بندی ---------------- */
    .pager{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:.4rem;
        margin-block-start:2.5rem;
    }
    .pager-item{
        display:inline-grid;
        place-items:center;
        min-inline-size:2.5rem;
        block-size:2.5rem;
        padding-inline:.7rem;
        border-radius:var(--r-sm);
        border:1px solid var(--line);
        background:var(--surface);
        font-size:var(--fs-sm);
        font-weight:600;
        color:var(--ink-2);
        transition:all var(--dur) var(--ease);
    }
    .pager-item:hover{border-color:var(--accent);color:var(--accent-text)}
    .pager-item.is-active{
        background:var(--accent);
        border-color:var(--accent);
        color:var(--accent-ink);
    }
    .pager-item.is-disabled{opacity:.4;pointer-events:none}
}

@layer components{

    /* ---------------- پالایش تم روشن ---------------- */
    @supports (background:color-mix(in oklab,red,blue)){
        :root[data-theme="light"] body{
            background-image:
                radial-gradient(58rem 38rem at 88% -12%,color-mix(in oklab,var(--aurora-1) 8%,transparent),transparent 60%),
                radial-gradient(46rem 32rem at 8% -4%,color-mix(in oklab,var(--aurora-2) 6%,transparent),transparent 55%);
        }
    }

    /* ---------------- چیدمان صفحه محصول ---------------- */
    .product-wrap{
        display:grid;
        grid-template-columns:minmax(0,1fr) 21rem;
        gap:clamp(1.5rem,1rem + 2.2vw,2.8rem);
        align-items:start;
    }
    .product-main{
        min-inline-size:0;
        display:flex;
        flex-direction:column;
        gap:clamp(2rem,1.4rem + 2vw,3.2rem);
    }
    @media (max-width:980px){
        .product-wrap{grid-template-columns:1fr}
        .buybox{position:static}
    }

    .sub-head{margin-block-end:1.1rem}
    .sub-head h2{font-size:var(--fs-h3)}

    /* ---------------- جعبه خرید ---------------- */
    .buybox{
        position:sticky;
        inset-block-start:5.4rem;
        display:flex;
        flex-direction:column;
        gap:1.1rem;
        padding:1.4rem;
        border:1px solid var(--line);
        border-radius:var(--r-lg);
        background:var(--surface);
        box-shadow:var(--shadow-2);
    }
    .buybox__price{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
    .buybox .price{font-size:clamp(1.45rem,1.25rem + 1vw,1.95rem)}
    .buybox__note{font-size:var(--fs-xs);color:var(--muted);text-align:center;line-height:1.9}

    /* ---------------- پیام فلش فروشگاه ---------------- */
    .shop-alert{
        display:flex;
        align-items:center;
        gap:.6rem;
        padding:.85rem 1.1rem;
        border-radius:var(--r-sm);
        font-size:var(--fs-sm);
        font-weight:600;
        margin-block-end:1.2rem;
        border:1px solid;
    }
    .shop-alert--ok{
        background:color-mix(in oklab,var(--ok) 14%,var(--surface));
        border-color:color-mix(in oklab,var(--ok) 35%,var(--line));
        color:var(--ok);
    }
    .shop-alert--warn{
        background:color-mix(in oklab,var(--err) 14%,var(--surface));
        border-color:color-mix(in oklab,var(--err) 35%,var(--line));
        color:var(--err);
    }

    /* ---------------- نشان سبد در هدر ---------------- */
    .cart-link{position:relative}
    .cart-badge{
        position:absolute;
        inset-block-start:.15rem;
        inset-inline-end:.15rem;
        min-inline-size:1.15rem;
        inline-size:fit-content;
        block-size:1.15rem;
        padding-inline:.3rem;
        border-radius:var(--r-full);
        background:var(--accent);
        color:var(--accent-ink);
        font-size:.65rem;
        font-weight:800;
        display:grid;
        place-items:center;
        line-height:1;
    }

    /* ---------------- سبد خرید ---------------- */
    .cart-empty{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:1rem;
        padding:clamp(2.5rem,2rem + 2vw,4rem) 1rem;
        text-align:center;
        color:var(--muted);
    }
    .cart-empty svg{inline-size:2.6rem;block-size:2.6rem;stroke-width:1.4}
    .cart-list{display:flex;flex-direction:column;gap:.9rem}
    .cart-row{
        display:grid;
        grid-template-columns:5.5rem minmax(0,1fr) auto auto;
        gap:1rem;
        align-items:center;
        padding:.9rem;
        background:var(--surface);
        border:1px solid var(--line);
        border-radius:var(--r);
    }
    .cart-row__media{
        display:block;
        inline-size:5.5rem;
        block-size:3.4rem;
        border-radius:var(--r-sm);
        overflow:hidden;
        background:var(--surface-2);
        display:grid;
        place-items:center;
    }
    .cart-row__media img{inline-size:100%;block-size:100%;object-fit:cover}
    .cart-row__title{font-size:var(--fs-sm);font-weight:700}
    .cart-row__body .chip{margin-block-start:.4rem}
    .cart-row__price{text-align:end;white-space:nowrap}
    @media (max-width:640px){
        .cart-row{grid-template-columns:3.6rem minmax(0,1fr);grid-template-areas:"media body" "media price" "media remove"}
        .cart-row__media{grid-area:media}
        .cart-row__body{grid-area:body}
        .cart-row__price{grid-area:price;text-align:start}
        .cart-row__remove{grid-area:remove;justify-self:start}
    }

    .cart-summary__row{
        display:flex;
        align-items:baseline;
        justify-content:space-between;
        gap:1rem;
        font-size:var(--fs-sm);
        color:var(--muted);
    }
    .cart-summary__total{
        padding-block-start:.7rem;
        border-block-start:1px solid var(--line);
        font-size:var(--fs-base);
        color:var(--ink);
        font-weight:700;
    }
    .cart-summary__foot{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:.5rem;
        flex-wrap:wrap;
        padding-block-start:.6rem;
        border-block-start:1px solid var(--line);
    }
    .cart-summary__flush:hover{color:var(--err)}

    /* ---------------- کد تخفیف (سبد + تسویه) ----------------
       .shop-field.dcode (نه .dcode تنها): .shop-field پایین‌تر در همین
       لایه تعریف شده و flex-direction:column دارد؛ با specificity برابر،
       قانونِ بعدی می‌برد و فرم ستونی می‌شد. */
    .shop-field.dcode{flex-direction:row;align-items:stretch;margin-block:0;gap:.5rem}
    .shop-field.dcode input{flex:1 1 auto;min-inline-size:0;direction:ltr;text-align:start}
    .shop-field.dcode .btn{flex:none}
    .cart-summary__row--off span:last-child{color:var(--ok);font-weight:700}
    .dcode-chip{display:inline-flex;align-items:center;gap:.4rem}
    .dcode-chip form{display:inline-flex}
    .dcode-x{background:none;border:0;padding:.1rem .3rem;color:var(--muted);cursor:pointer;font:inherit;font-size:var(--fs-xs)}
    .dcode-x:hover{color:var(--err)}

    /* دکمه‌ی حذف: آیکونی و کوچک، نه یک دکمه‌ی متنی که هم‌وزن «ادامه»
       به نظر برسد. */
    .cart-row__del{inline-size:2.4rem;block-size:2.4rem}
    .cart-row__del:hover{color:var(--err);border-color:var(--err)}
    .cart-row__del svg{inline-size:1.05rem;block-size:1.05rem}

    .shop-field{display:flex;flex-direction:column;gap:.4rem;margin-block-end:1rem}
    .shop-field label{font-size:var(--fs-sm);font-weight:700}
    .shop-field input{
        min-block-size:2.75rem;
        padding-block:.6rem;
        padding-inline:.9rem;
        border-radius:var(--r-sm);
        border:1px solid var(--line);
        background:var(--surface);
        color:var(--ink);
        font-size:var(--fs-sm);
        transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
    }
    .shop-field input:focus{
        outline:none;
        border-color:var(--accent);
        box-shadow:0 0 0 3px var(--accent-100);
    }
    .shop-field input.is-invalid{border-color:var(--err)}
    .shop-field .shop-err{color:var(--err);font-size:var(--fs-xs)}

    /* ---------------- ورود، ثبت‌نام و تأیید موبایل ----------------
       این صفحه‌ها قبلاً admin.css را لود می‌کردند: مشتری وسط خرید
       ناگهان توی پنل مدیریت پرت می‌شد. حالا همان توکن‌های فروشگاه. */
    .auth{display:grid;place-items:center;padding-block:clamp(2rem,1rem + 4vw,4.5rem)}
    .auth-card{
        inline-size:min(100%,27rem);
        padding:clamp(1.4rem,1rem + 1.6vw,2.2rem);
        border:1px solid var(--line);
        border-radius:var(--r-lg);
        background:var(--surface-2);
        box-shadow:var(--shadow-2);
    }
    .auth-head{
        display:flex;
        align-items:center;
        gap:.7rem;
        margin-block-end:1.4rem;
        padding-block-end:1.1rem;
        border-block-end:1px solid var(--line);
    }
    .auth-head h1{font-size:var(--fs-base);margin:0;line-height:1.4}
    .auth-head p{margin:.15rem 0 0;font-size:var(--fs-xs);color:var(--muted)}

    .auth-check{
        display:flex;
        align-items:center;
        gap:.5rem;
        font-size:var(--fs-sm);
        color:var(--ink-2);
        margin-block-end:1.1rem;
        cursor:pointer;
    }
    .auth-check input{accent-color:var(--accent);inline-size:1rem;block-size:1rem}

    .auth-alt{margin-block-start:1.1rem;text-align:center;font-size:var(--fs-sm);color:var(--muted)}
    .auth-alt a{color:var(--accent-text);font-weight:700}
    .auth-alt + .auth-alt{margin-block-start:.45rem}

    /* جداکننده «یا» — خط از دو طرف، متن وسط */
    .auth-or{
        display:flex;
        align-items:center;
        gap:.8rem;
        margin-block:1.3rem;
        font-size:var(--fs-xs);
        color:var(--muted);
    }
    .auth-or::before,.auth-or::after{content:"";flex:1;block-size:1px;background:var(--line)}

    .auth-to{text-align:center;font-size:var(--fs-sm);color:var(--muted);margin-block:0 1.2rem}
    .auth-to strong{display:block;direction:ltr;unicode-bidi:isolate;color:var(--ink);font-size:var(--fs-base);margin-block-start:.25rem}
    .shop-field input.auth-otp{
        text-align:center;
        letter-spacing:.35em;
        font-size:var(--step-1);
        font-variant-numeric:tabular-nums;
    }

    /* چند خطای اعتبارسنجی زیر هم، نه کنار هم */
    .shop-alert--list{flex-direction:column;align-items:stretch;gap:.35rem;font-weight:500}

    .checkout-note{color:var(--muted);font-size:var(--fs-sm);margin-block-start:1rem}

    /* ---------------- انتقال نرم تصویر بین صفحات ---------------- */
    @supports (view-transition-name:none){
        ::view-transition-old(root),
        ::view-transition-new(root){animation-duration:.32s}
    }
}

@layer components{

.page-hero__desc{margin:10px 0 0;color:var(--muted);font-size:14.5px;
  line-height:2;max-inline-size:60ch;text-wrap:pretty}

.chips-row{display:flex;flex-wrap:wrap;gap:var(--space-2xs);margin-block:var(--space-s) var(--space-3xs)}
/* روی موبایل به‌جای شکستن به سه ردیف، افقی اسکرول می‌شود */
@media (max-width:48rem){
  .archive-bar .chips-row{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    margin-inline:calc(clamp(1rem,4vw,1.6rem) * -1);
    padding-inline:clamp(1rem,4vw,1.6rem);
    scroll-snap-type:x proximity;
  }
  .archive-bar .chips-row::-webkit-scrollbar{display:none}
  .archive-bar .chip{flex:none;scroll-snap-align:start}
}
.chip{display:inline-flex;align-items:center;gap:.4rem;
  padding-block:.3rem;padding-inline:.8rem;
  border:1px solid var(--line);border-radius:var(--r-full);
  background:var(--surface);font-size:var(--fs-xs);font-weight:600;
  color:var(--muted);unicode-bidi:plaintext;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.chip:hover{border-color:var(--line-2);color:var(--ink)}
.chip__ico{inline-size:1.05rem;block-size:1.05rem;flex:0 0 auto;color:var(--accent-text)}
/* 🔴 opacity:.66 شمارش محصول را به ۲٫۸۷:۱ می‌برد. تعداد، اطلاعات است. */
.chip__n{font-size:.72rem;font-weight:500;direction:ltr;unicode-bidi:isolate}
.chip.is-active{border-color:var(--accent-300);background:var(--accent-050);color:var(--ink)}

.cat-card__ico{inline-size:1.6rem;block-size:1.6rem;color:var(--accent-text);margin-block-end:.55rem}

}

/* ============================================================
   کارت مقاله — مشترک بین صفحه‌ی اصلی و بلاگ
   بقیه‌ی استایل بلاگ در blog.css است و فقط در ویوهای /blog
   بارگذاری می‌شود.
   ============================================================ */
@layer components{

  .article-grid{display:grid;gap:var(--gap);
    grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
  /* ⚠️ overflow روی خود کارت باز است تا نقل‌قول بتواند از کارت بیرون
     بزند؛ برش گوشه‌ها به تصویر منتقل شد. */
  .article-card{display:flex;flex-direction:column;background:var(--surface);
    border:1px solid var(--line);border-radius:var(--r);
    transition:transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
  .article-card:hover{border-color:var(--accent-300);transform:translateY(-2px)}
  .article-card__media{display:block;background:var(--bg-2);aspect-ratio:16/9;overflow:hidden;
    border-start-start-radius:var(--r);border-start-end-radius:var(--r)}
  .article-card__media img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
  .article-card__blank{display:block;block-size:100%;
    background:linear-gradient(135deg,var(--bg-2),var(--surface-2))}
  .article-card__body{padding:1rem 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.5rem}
  .article-card__body h2,.article-card__body h3{font-size:1.02rem;line-height:1.75}
  .article-card__body h2 a:hover,.article-card__body h3 a:hover{color:var(--accent-text)}
  /* ---------- نقل‌قول کارت مقاله ----------
     مهم‌ترین جمله‌ی کارت موقع رسیدن به دیدرس از کارت بیرون می‌زند،
     هایلایت می‌شود و سر جایش برمی‌گردد. چون به اسکرول گره خورده و نه
     به تایمر، تکرار بی‌پایان و آزاردهنده نمی‌شود. */
  .article-card__body p{font-size:.87rem;color:var(--ink-2);line-height:1.95;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    position:relative;z-index:2;border-radius:var(--r-sm);
    transition:transform var(--dur-2) var(--ease),background var(--dur-2) var(--ease),
      box-shadow var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}

  .article-card:hover .article-card__body p,
  .article-card:focus-within .article-card__body p{
    transform:translateY(-.55rem) scale(1.035);
    background:var(--accent-100);
    box-shadow:var(--shadow-2);
    color:var(--ink);
    padding-block:.5rem;padding-inline:.65rem;
    margin-block:-.5rem;margin-inline:-.65rem}

  @supports (animation-timeline:view()){
    @media (prefers-reduced-motion:no-preference){
      .article-card__body p{
        animation:pull-out linear both;
        animation-timeline:view();
        animation-range:entry calc(34% + var(--i,0) * 6%) cover calc(62% + var(--i,0) * 6%);
      }
    }
  }
  @keyframes pull-out{
    0%,100%{transform:none;box-shadow:none;background:transparent;color:var(--ink-2)}
    42%,62%{transform:translateY(-.55rem) scale(1.035);box-shadow:var(--shadow-2);
      background:var(--accent-100);color:var(--ink)}
  }
  [data-fx="off"] .article-card__body p{animation:none}
  .article-card__meta{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;
    font-size:.76rem;color:var(--muted)}
  .article-card__meta a:hover{color:var(--accent-text)}
  .article-card__foot{display:flex;flex-wrap:wrap;gap:.7rem;font-size:.76rem;
    color:var(--muted);margin-block-start:auto;padding-block-start:.3rem}

  .article-kind{display:inline-block;font-size:var(--fs-xs);font-weight:700;
    padding-block:.15rem;padding-inline:.55rem;border-radius:var(--r-full);
    color:#efab4a;
    color:var(--accent-text);
    border:1px solid var(--accent-200)}
}