/* ============================================================
   دیباگ | استایل صفحه‌ی اصلی
   ------------------------------------------------------------
   فقط در shop/home بارگذاری می‌شود: هیرو، کاغذ مهندسی، ویترین
   شناور، نوار اعتماد و سرصفحه‌ی شماره‌دار.
   ⚠️ .hero-sub عمداً این‌جا نیست — صفحه‌ی محصول هم از آن استفاده
   می‌کند و در shop.css مانده است.
   ============================================================ */

@layer components{
    /* ---------------- هیرو ---------------- */
    .hero{
        position:relative;
        padding-block:clamp(3.5rem,2rem + 8vw,7.5rem) var(--block);
        overflow:hidden;
    }

    /* امضای بصری «کارگاه شب»: کاغذ مهندسی که از گوشه محو می‌شود.
       فقط با گرادیان — صفر تصویر، صفر درخواست شبکه. */
    @supports (mask-image:radial-gradient(#000,#000)){
        .hero::before{
            content:"";
            position:absolute;
            inset:0;
            z-index:0;
            pointer-events:none;
            opacity:.55;
            background-image:
                linear-gradient(to left,var(--line) 1px,transparent 1px),
                linear-gradient(to bottom,var(--line) 1px,transparent 1px);
            background-size:5.5rem 5.5rem;
            -webkit-mask-image:radial-gradient(75% 65% at 82% 8%,#000,transparent 70%);
            mask-image:radial-gradient(75% 65% at 82% 8%,#000,transparent 70%);
        }
    }
    .hero-inner{max-inline-size:44rem}
    .hero-eyebrow{
        display:inline-flex;
        align-items:center;
        gap:.45rem;
        padding-block:.35rem;
        padding-inline:.9rem;
        border-radius:var(--r-full);
        border:1px solid var(--line);
        background:var(--glass);
        font-size:var(--fs-xs);
        font-weight:600;
        color:var(--ink-2);
        margin-block-end:1.4rem;
    }
    .hero-eyebrow .dot{
        inline-size:.45rem;
        block-size:.45rem;
        border-radius:50%;
        background:var(--ok);
    }
    .hero h1{margin-block-end:1.1rem}
    /* واژه‌ی تأکید رنگ نمی‌گیرد، قلم‌خورد می‌گیرد: هم در تم روشن
       کنتراست را نمی‌شکند، هم امضاتر است تا یک کلمه‌ی کهربایی. */
    .hero h1 em{
        font-style:normal;
        color:var(--ink);
        padding-block-end:.1em;
        background:linear-gradient(var(--accent),var(--accent)) 0 92%/100% .12em no-repeat;
    }
    @supports (background:color-mix(in oklch,red,blue)){
        .hero h1 em{
            background-image:linear-gradient(to left,var(--accent),color-mix(in oklab,var(--accent) 22%,transparent));
        }
    }

    .hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-block-end:2.8rem}


    .hero-stats{
        display:flex;
        flex-wrap:wrap;
        gap:clamp(1.4rem,1rem + 2vw,3rem);
    }
    .hero-stats > div + div{
        border-inline-start:1px solid var(--line);
        padding-inline-start:clamp(1.4rem,1rem + 2vw,3rem);
    }
    .stat-num{
        display:block;
        font-size:clamp(1.4rem,1.2rem + .8vw,1.9rem);
        font-weight:800;
        line-height:1.3;
        color:var(--ink);
    }
    .stat-label{font-size:var(--fs-xs);color:var(--muted)}

    /* گرادیان زنده پس‌زمینه هیرو */
    .aurora{
        position:absolute;
        inset-block-start:-30%;
        inset-inline-end:-15%;
        inline-size:min(46rem,90%);
        aspect-ratio:1;
        z-index:-1;
        pointer-events:none;
        border-radius:50%;
        filter:blur(70px);
        opacity:.4;
    }
    @supports (background:color-mix(in oklab,red,blue)){
        .aurora{
            background:conic-gradient(from 0deg,
                color-mix(in oklab,var(--aurora-1) 70%,transparent),
                color-mix(in oklab,var(--aurora-2) 70%,transparent),
                color-mix(in oklab,var(--aurora-3) 60%,transparent),
                color-mix(in oklab,var(--aurora-1) 70%,transparent));
        }
    }
    @media (prefers-reduced-motion:no-preference){
        .aurora{animation:aurora-spin 34s linear infinite}
    }
    @keyframes aurora-spin{to{transform:rotate(360deg)}}

    /* ---------------- نوار اعتماد ---------------- */
    .trust-strip{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
        gap:1px;
        background:var(--line);
        border:1px solid var(--line);
        border-radius:var(--r);
        overflow:hidden;
    }
    .trust-item{
        display:flex;
        align-items:flex-start;
        gap:.8rem;
        padding-block:var(--space-s);
        padding-inline:var(--space-m);
        background:var(--surface);
    }
    .trust-item svg{
        flex:none;
        inline-size:1.35rem;
        block-size:1.35rem;
        margin-block-start:.2rem;
        color:var(--accent-text);
        stroke-width:1.6;
    }
    .trust-item strong{
        display:block;
        font-size:var(--fs-sm);
        font-weight:700;
        color:var(--ink);
        line-height:1.75;
    }
    .trust-item span{
        display:block;
        font-size:var(--fs-xs);
        color:var(--muted);
        line-height:1.9;
    }

    /* ---------- سرصفحه‌ی شماره‌دار ---------- */
    /* شماره‌ی بخش با شمارنده‌ی CSS ساخته می‌شود — صفر تغییر در قالب.
       سبک شمارش persian خودش ارقام فارسی می‌دهد. */
    .is-home{counter-reset:sec}
    .is-home .section-head{
        counter-increment:sec;
        position:relative;
        padding-block-start:1.6rem;
    }
    .is-home .section-head::before{
        content:"۰" counter(sec,persian);
        position:absolute;
        inset-block-start:0;
        inset-inline-start:0;
        font-size:var(--fs-xs);
        font-weight:800;
        color:var(--accent-text);
    }
    .is-home .section-head::after{
        content:"";
        position:absolute;
        inset-block-start:.72rem;
        inset-inline-start:2.4rem;
        inset-inline-end:0;
        block-size:1px;
        background:var(--line);
    }

    :root[data-theme="light"] .aurora{opacity:.15}


    /* ============================================================
       کارت‌های پس‌زمینه‌ی هیرو
       ------------------------------------------------------------
       خانه‌های کاغذ مهندسی خالی بودند؛ حالا کارت‌های نیمه‌محو
       تویشان می‌نشینند: تصویر محصول، نام دسته، عنوان مقاله، شماره‌ی
       نسخه و قالب فایل.

       🔴 شبکه‌ی این‌جا باید با شبکه‌ی .hero::before هم‌تراز باشد.
       پس‌زمینه از گوشه‌ی چپ-بالا شروع می‌شود (background-position
       پیش‌فرض)، بنابراین این گرید هم direction:ltr می‌گیرد وگرنه در
       صفحه‌ی راست‌چین از سمت راست شروع می‌کند و یک خانه جابه‌جا
       می‌افتد.

       ستون منفی یعنی «از انتها»: چیدمان خودش را در هر عرضی به دو
       کناره می‌چسباند و وسط صفحه — جایی که عنوان است — خالی می‌ماند.
       ============================================================ */
    .cells{
        position:absolute;
        inset:0;
        z-index:1;
        direction:ltr;
        /* ظرف کلیک را نمی‌گیرد، فقط خود کارت‌ها — وگرنه یک لایه‌ی
           نامرئی روی کل هیرو می‌افتد و هاور دکمه‌ها را می‌بلعد. */
        pointer-events:none;
        overflow:hidden;
        display:grid;
        grid-template-columns:repeat(auto-fill,var(--cell));
        grid-auto-rows:var(--cell);
        --cell:5.5rem;
    }

    /* لایه‌ی دوم محافظت از خوانایی: هرچه به مرکز نزدیک‌تر، محوتر */
    @supports (mask-image:radial-gradient(#000,#000)){
        .cells{
            -webkit-mask-image:radial-gradient(50% 62% at 50% 42%,transparent 34%,#000 86%);
            mask-image:radial-gradient(50% 62% at 50% 42%,transparent 34%,#000 86%);
        }
    }

    .cell{
        grid-row:var(--y);
        grid-column:var(--x) / span var(--w,1);
        margin:.3rem;
        display:grid;
        place-items:center;
        gap:.25rem;
        padding:.4rem;
        text-align:center;
        overflow:hidden;
        border:1px solid var(--line);
        border-radius:var(--r-sm);
        background:var(--surface);
        box-shadow:var(--shadow-1);
        font-size:.7rem;
        font-weight:700;
        line-height:1.7;
        color:var(--ink-2);
        opacity:var(--o,.5);
        pointer-events:auto;
        transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),
            border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
    }

    /* کارت زنده است: روی هاور و فوکوس کامل می‌آید جلو */
    a.cell:hover,a.cell:focus-visible{
        opacity:1;
        transform:translateY(-2px);
        border-color:var(--accent);
        box-shadow:var(--shadow-2);
    }
    a.cell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
    .cell__t{
        display:-webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        overflow:hidden;
        text-wrap:balance;
    }
    .cell__ico{inline-size:.95rem;block-size:.95rem;color:var(--accent-text)}

    .cell--image{padding:0;border-color:var(--line-2)}
    .cell--image img{inline-size:100%;block-size:100%;object-fit:cover}

    .cell--format,.cell--version,.cell--mark{
        font-family:ui-monospace,Menlo,Consolas,monospace;
        direction:ltr;
        unicode-bidi:isolate;
        color:var(--accent-text);
        letter-spacing:.06em;
    }
    .cell--format{border-style:dashed}
    .cell--mark{font-size:.95rem;font-weight:800}
    @supports (background:color-mix(in oklab,red,blue)){
        .cell--format,.cell--mark{background:color-mix(in oklab,var(--accent) 9%,var(--surface))}
    }

    /* پارالاکس: هر کارت با ضریب خودش حرکت می‌کند و لایه‌های عمق
       می‌سازد. به موقعیت اسکرول گره خورده، نه به تایمر — پس چیزی
       خودبه‌خود تکان نمی‌خورد. */
    @supports (animation-timeline:view()){
        @media (prefers-reduced-motion:no-preference){
            .cell{
                animation:cell-drift linear both;
                animation-timeline:view();
                animation-range:entry 0% exit 100%;
            }
        }
    }
    @keyframes cell-drift{
        from{transform:translateY(calc(var(--d,1) * 2.4rem))}
        to{transform:translateY(calc(var(--d,1) * -2.4rem))}
    }

    /* ---------- موبایل: از پس‌زمینه به نوار میان‌بر ----------
       زیر این عرض جای کناره‌ها نیست و کارت روی متن می‌افتد. به‌جای
       پنهان‌کردنشان (که یعنی دور ریختن چهارده لینک واقعی)، همان
       کارت‌ها به یک نوار افقی قابل اسکرول تبدیل می‌شوند: کدری کامل،
       متن خوانا، هدف لمس درست. */
    @media (max-width:62rem){
        .cells{
            position:static;
            display:flex;
            gap:.55rem;
            grid-template-columns:none;
            overflow-x:auto;
            overflow-y:hidden;
            pointer-events:auto;
            direction:rtl;
            scroll-snap-type:x proximity;
            scrollbar-width:none;
            padding-block:var(--space-xs) var(--space-s);
            padding-inline:clamp(1.1rem,4vw,1.8rem);
            margin-block-start:calc(var(--space-m) * -1);
            -webkit-mask-image:none;
            mask-image:none;
        }
        .cells::-webkit-scrollbar{display:none}

        .cell{
            flex:0 0 auto;
            inline-size:auto;
            min-inline-size:0;
            max-inline-size:14rem;
            min-block-size:2.75rem;
            margin:0;
            grid-row:auto;
            grid-column:auto;
            opacity:1;
            scroll-snap-align:start;
            display:flex;
            align-items:center;
            gap:.4rem;
            padding-block:.55rem;
            padding-inline:.85rem;
            border-radius:var(--r-full);
            font-size:var(--fs-xs);
            /* پارالاکس روی نوار افقی بی‌معنی است */
            animation:none;
            transform:none;
        }
        .cell__t{
            -webkit-line-clamp:1;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .cell--image{
            inline-size:4.5rem;
            block-size:2.75rem;
            padding:0;
            border-radius:var(--r-sm);
        }
    }

    [data-fx="off"] .cells{display:none}

    /* ============================================================
       میز کار — اسلایدشوی «دیباگ زنده»
       ------------------------------------------------------------
       برند این فروشگاه «دیباگ» است؛ پس هیرو خودِ کار را نشان می‌دهد:
       کد نوشته می‌شود، تست می‌شکند، باگ پیدا و رفع می‌شود، تست سبز
       می‌شود — و بعد زبانه عوض می‌شود و سناریوی بعدی می‌آید.
       ============================================================ */

    /* با میز کار تمام‌عرض، هیرو دیگر پدینگ پایینِ درشت نمی‌خواهد —
       وگرنه روی نمایشگر ۷۶۸ پیکسلی نوار وضعیت زیر تا می‌خورد. */
    .hero-stage{padding-block:clamp(2.8rem,1.8rem + 4.5vw,5.2rem) var(--space-l)}

    @supports (mask-image:radial-gradient(#000,#000)){
        /* شبکه با چیدمان وسط‌چین از بالای وسط محو می‌شود، نه از گوشه */
        .hero-stage::before{
            -webkit-mask-image:radial-gradient(85% 70% at 50% 0%,#000,transparent 72%);
            mask-image:radial-gradient(85% 70% at 50% 0%,#000,transparent 72%);
        }
    }

    /* عنوان وسط‌چین می‌شود چون میز کار تمام‌عرض زیرش می‌نشیند */
    .hero-stage .hero-inner{
        max-inline-size:52rem;
        margin-inline:auto;
        text-align:center;
    }
    .hero-stage .hero-sub{margin-inline:auto}
    .hero-stage .hero-actions,
    .hero-stage .hero-stats{justify-content:center}
    .hero-stage .hero-stats{margin-block-end:var(--space-m)}

    /* 🔴 تمام‌عرض: میز کار عمداً بیرون از .wrap است و تا نزدیک لبه‌ی
       صفحه می‌رسد. حاشیه‌ی کوچک می‌ماند تا گوشه‌های گرد دیده شوند. */
    .wb{
        position:relative;
        z-index:2;
        margin-inline:clamp(.6rem,1.6vw,2rem);
    }
    .wb__glow{
        position:absolute;
        inset:-6% 10%;
        z-index:0;
        border-radius:50%;
        filter:blur(70px);
        opacity:.26;
        pointer-events:none;
        background:radial-gradient(closest-side,var(--accent),transparent);
    }

    /* کل پنجره ltr است: کد لاتین داخل صفحه‌ی فارسی بدون این، پرانتز و
       نقطه‌ویرگول را جابه‌جا می‌کند. */
    .wb__win{
        position:relative;
        z-index:1;
        direction:ltr;
        unicode-bidi:isolate;
        border:1px solid var(--line);
        border-radius:var(--r-lg);
        background:var(--bg-2);
        box-shadow:var(--shadow-3);
        overflow:hidden;
    }

    /* ---------- نوار بالا و زبانه‌ها ---------- */
    .wb__bar{
        display:flex;
        align-items:stretch;
        gap:.9rem;
        padding-inline:.9rem;
        border-block-end:1px solid var(--line);
        background:var(--surface);
    }
    .wb__dots{display:flex;align-items:center;gap:.34rem;flex:none}
    .wb__dots i{inline-size:.58rem;block-size:.58rem;border-radius:50%;background:var(--line-2)}

    .wb__tabs{display:flex;min-inline-size:0;overflow:hidden}
    .wb__tab{
        display:flex;
        align-items:center;
        padding-block:.72rem;
        padding-inline:.9rem;
        font-family:ui-monospace,Menlo,Consolas,monospace;
        font-size:.72rem;
        font-weight:600;
        white-space:nowrap;
        color:var(--muted);
        border-block-end:2px solid transparent;
        transition:color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease);
    }
    .wb__tab.is-on{
        color:var(--ink);
        border-block-end-color:var(--accent);
        background:var(--bg-2);
    }

    .wb__branch{
        display:flex;
        align-items:center;
        margin-inline-start:auto;
        flex:none;
        font-family:ui-monospace,Menlo,Consolas,monospace;
        font-size:.7rem;
        font-weight:600;
        color:var(--muted);
    }

    /* ---------- بدنه: درخت، کد، ترمینال ---------- */
    .wb__body{
        display:grid;
        grid-template-columns:minmax(0,1fr);
        align-items:stretch;
    }
    @media (min-width:52rem){
        .wb__body{grid-template-columns:minmax(0,1fr) 20rem}
    }
    @media (min-width:76rem){
        .wb__body{grid-template-columns:15rem minmax(0,1fr) 22rem}
    }

    .wb__tree{
        display:none;
        flex-direction:column;
        gap:.1rem;
        padding-block:.9rem;
        padding-inline:.9rem;
        border-inline-end:1px solid var(--line);
        font-family:ui-monospace,Menlo,Consolas,monospace;
        font-size:.7rem;
        line-height:2.1;
    }
    @media (min-width:76rem){.wb__tree{display:flex}}

    .wb__dir{color:var(--muted);opacity:.7;margin-block-start:.5rem}
    .wb__dir:first-child{margin-block-start:0}
    .wb__f{
        color:var(--ink-2);
        padding-inline-start:.8rem;
        border-radius:var(--r-xs);
        transition:color var(--dur-2) var(--ease),background var(--dur-2) var(--ease);
    }
    .wb__f.is-on{color:var(--accent-text)}
    @supports (background:color-mix(in oklab,red,blue)){
        .wb__f.is-on{background:color-mix(in oklab,var(--accent) 12%,transparent)}
    }

    .wb__code{
        margin:0;
        padding-block:1rem;
        padding-inline:1.1rem;
        font-family:ui-monospace,Menlo,Consolas,monospace;
        font-size:clamp(.72rem,.6rem + .34vw,.88rem);
        line-height:2;
        /* ارتفاع ثابت: تایپ‌شدن خط‌ها نباید چیدمان را بپراند */
        min-block-size:14.7em;
        counter-reset:ln;
        overflow:hidden;
        color:var(--ink-2);
    }
    .wb__code .ln{
        display:block;
        position:relative;
        white-space:pre;
        padding-inline-start:2.2em;
        min-block-size:2em;
        border-radius:var(--r-xs);
    }
    .wb__code .ln::before{
        counter-increment:ln;
        content:counter(ln);
        position:absolute;
        inset-inline-start:0;
        color:var(--muted);
        opacity:.45;
    }

    .wb .c-k{font-weight:700;color:var(--c-k)}
    .wb .c-f{color:var(--c-f)}
    .wb .c-t{color:var(--accent-text)}
    .wb .c-n{color:var(--c-n)}
    .wb .c-s{color:var(--c-s)}
    /* 🔴 توضیح فارسی داخل خط کد لاتین: بدون isolate، نقطه‌ویرگول و
       اسلش‌ها جابه‌جا می‌شوند. isolate جهت پایه را ltr نگه می‌دارد
       (پس // اول می‌ماند) ولی خودِ واژه‌ی فارسی راست‌به‌چپ می‌شود. */
    .wb .c-c{font-style:italic;color:var(--muted);unicode-bidi:isolate}

    .wb{--c-k:#c792ea;--c-f:#82aaff;--c-n:#f78c6c;--c-s:#89b4c8}
    :root[data-theme="light"] .wb{--c-k:#6d28d9;--c-f:#1d4ed8;--c-n:#a3480a;--c-s:#3f6212}

    .wb .caret{
        display:inline-block;
        inline-size:.55em;
        block-size:1.15em;
        translate:0 .22em;
        background:var(--accent);
        animation:di9-blink 1.1s steps(1) infinite;
    }
    @keyframes di9-blink{50%{opacity:0}}

    /* خط باگ‌دار: زیرخط موج‌دار قرمز، دقیقاً مثل ویرایشگر */
    .wb .ln.is-bad .tx{
        text-decoration:underline wavy var(--err);
        text-underline-offset:.3em;
    }
    .wb .ln.is-bad,.wb .ln.is-good{transition:background var(--dur-2) var(--ease)}
    @supports (background:color-mix(in oklab,red,blue)){
        .wb .ln.is-bad{background:color-mix(in oklab,var(--err) 15%,transparent)}
        .wb .ln.is-good{background:color-mix(in oklab,var(--ok) 16%,transparent)}
    }

    /* ---------- ترمینال ---------- */
    .wb__term{
        display:none;
        flex-direction:column;
        gap:.15rem;
        padding-block:1rem;
        padding-inline:1rem;
        border-inline-start:1px solid var(--line);
        background:var(--bg);
        font-family:ui-monospace,Menlo,Consolas,monospace;
        font-size:.7rem;
        line-height:2;
        overflow:hidden;
    }
    @media (min-width:52rem){.wb__term{display:flex}}

    .wb__term code{display:flex;flex-direction:column;gap:.1rem}
    /* هر خط ترمینال جهت پایه‌ی خودش را می‌گیرد: خط لاتین چپ‌به‌راست
       و خط فارسی راست‌به‌چپ. بدون این، «گیومه» و نقطه سر جای غلط
       می‌افتند چون کل پنجره ltr است. */
    .wb__term .tl{
        display:block;
        white-space:pre-wrap;
        unicode-bidi:plaintext;
        color:var(--ink-2);
        animation:di9-in var(--dur-2) var(--ease) both;
    }
    .wb__term .is-cmd{color:var(--muted)}
    .wb__term .is-bad{color:var(--err);font-weight:700}
    .wb__term .is-dim{color:var(--muted)}
    .wb__term .is-ok{color:var(--ok);font-weight:700}
    @keyframes di9-in{from{opacity:0;transform:translateY(.35rem)}to{opacity:1;transform:none}}

    /* ---------- نوار وضعیت ---------- */
    .wb__status{
        display:flex;
        align-items:center;
        gap:.55rem;
        padding-block:.7rem;
        padding-inline:1rem;
        border-block-start:1px solid var(--line);
        background:var(--surface);
        font-size:.78rem;
        font-weight:700;
        direction:rtl;
        color:var(--muted);
        transition:color var(--dur-2) var(--ease),background var(--dur-2) var(--ease);
    }
    .wb__dot{
        inline-size:.5rem;
        block-size:.5rem;
        border-radius:50%;
        flex:none;
        background:currentColor;
    }
    .wb__status[data-state="run"] .wb__dot{animation:di9-pulse 1.4s ease-in-out infinite}
    @keyframes di9-pulse{50%{opacity:.25}}

    .wb__meta{
        margin-inline-start:auto;
        font-weight:600;
        font-size:.72rem;
        color:var(--muted);
    }
    .wb__status[data-state="bad"]{color:var(--err)}
    .wb__status[data-state="ok"]{color:var(--ok)}
    @supports (background:color-mix(in oklab,red,blue)){
        .wb__status[data-state="bad"]{background:color-mix(in oklab,var(--err) 12%,var(--surface))}
        .wb__status[data-state="ok"]{background:color-mix(in oklab,var(--ok) 12%,var(--surface))}
    }

    @media (max-width:860px){
        .wb__glow{display:none}
        .wb__meta{display:none}
        .wb__tab{font-size:.66rem;padding-inline:.6rem}
    }
    @media (max-width:40rem){
        /* روی صفحه‌ی باریک قلم کوچک‌تر می‌شود تا خط کد وسط راه بریده
           نشود؛ نام شاخه هم جا ندارد و برداشته می‌شود. */
        .wb__code{font-size:.64rem}
        .wb__branch{display:none}
        .wb__win{border-radius:var(--r)}
    }

    [data-fx="off"] .wb__glow{display:none}
    [data-fx="off"] .wb .caret{animation:none}
    [data-fx="off"] .wb__term .tl{animation:none}
    [data-fx="off"] .wb__status .wb__dot{animation:none}

    /* ---------- شدت افکت ---------- */
    [data-fx="soft"] .aurora{animation:none;opacity:.22;filter:blur(90px)}
    [data-fx="off"] .aurora{display:none}
    [data-fx="off"] .hero::before{display:none}
}

@layer components{

/* ========== ویترین شناور ========== */
.hero .wrap{position:relative;z-index:2}

.showcase{position:absolute;inset-block:0;inset-inline:0;z-index:1;
  overflow:hidden;pointer-events:none;user-select:none;
  --sc-size:124px;--sc-gap:18px}

@supports (mask-image:linear-gradient(#000,#000)){
  .showcase{-webkit-mask-image:linear-gradient(to left,transparent 4%,#000 38%);
    mask-image:linear-gradient(to left,transparent 4%,#000 38%)}
}

.showcase__stage{position:absolute;inset-block:-26%;
  inset-inline-end:-3%;inline-size:min(58%,820px);
  display:flex;justify-content:space-around;gap:var(--sc-gap);
  transform:perspective(1400px) rotateX(6deg) rotateY(-19deg) rotateZ(7deg)}

@supports (mask-image:linear-gradient(#000,#000)){
  .showcase__stage{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 19%,#000 81%,transparent);
    mask-image:linear-gradient(to bottom,transparent,#000 19%,#000 81%,transparent)}
}

.showcase__col{flex:0 0 var(--sc-size);block-size:100%;overflow:hidden}
.showcase__track{display:flex;flex-direction:column;gap:var(--sc-gap);
  animation:sc-drift var(--dur,42s) linear infinite;
  animation-direction:var(--dir,normal);will-change:transform}

@keyframes sc-drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,calc(-50% - (var(--sc-gap) / 2)),0)}
}

.showcase__col:nth-child(1){--dur:50s;opacity:.34}
.showcase__col:nth-child(2){--dur:36s;--dir:reverse;opacity:.55}
.showcase__col:nth-child(3){--dur:58s;opacity:.75}
.showcase__col:nth-child(4){--dur:40s;--dir:reverse;opacity:.9}
.showcase__col:nth-child(5){--dur:46s;opacity:1}

}

@layer components{

.sc-tile{inline-size:100%;aspect-ratio:1;border-radius:var(--r-lg);overflow:hidden;
  display:grid;place-items:center;text-align:center;
  border:1px solid var(--line);background:var(--surface);
  box-shadow:0 14px 38px rgba(0,0,0,.34)}

.sc-tile--image img{inline-size:100%;block-size:100%;object-fit:cover;display:block}

.sc-tile--format{border-style:dashed;border-color:var(--accent);
  color:var(--accent-text);font:700 17px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:2px;direction:ltr;unicode-bidi:isolate}

.sc-tile--mark{color:var(--accent-text);font:800 30px/1 inherit;
  letter-spacing:1px;direction:ltr;unicode-bidi:isolate}

.sc-tile--word{padding:14px;font-weight:700;font-size:15px;line-height:1.7;
  color:var(--ink);text-wrap:balance}

@supports (color:color-mix(in oklch,red,blue)){
  .sc-tile--format{border-color:color-mix(in oklab,var(--accent) 55%,transparent);
    background:color-mix(in oklab,var(--accent) 11%,var(--surface))}
  .sc-tile--mark{background:color-mix(in oklab,var(--accent) 16%,var(--surface))}
  .sc-tile--word{background:color-mix(in oklab,var(--line) 34%,var(--surface))}
}

:root[data-theme="light"] .sc-tile{
  border-color:rgba(24,32,47,.10);
  box-shadow:0 12px 30px rgba(28,38,66,.11)}
:root[data-theme="light"] .showcase__col:nth-child(1){opacity:.26}
:root[data-theme="light"] .showcase__col:nth-child(2){opacity:.44}
:root[data-theme="light"] .showcase__col:nth-child(3){opacity:.62}
:root[data-theme="light"] .showcase__col:nth-child(4){opacity:.78}
:root[data-theme="light"] .showcase__col:nth-child(5){opacity:.92}

}

@layer components{

@media (max-width:1100px){
  .showcase{--sc-size:100px;--sc-gap:14px}
  .showcase__stage{inline-size:52%}
  .showcase__col:nth-child(1){display:none}
}

@media (max-width:820px){
  .showcase{--sc-size:84px;--sc-gap:12px}
  .showcase__stage{inline-size:60%;inset-inline-end:-8%}
  .showcase__col:nth-child(2){display:none}
}

@media (max-width:600px){
  .showcase{--sc-size:70px;--sc-gap:10px}
  .showcase__stage{inline-size:74%;inset-inline-end:-16%;
    transform:perspective(1100px) rotateX(5deg) rotateY(-13deg) rotateZ(5deg)}
  .showcase__col:nth-child(3){display:none}
}

:root[data-fx="soft"] .showcase__track{animation-play-state:paused}
:root[data-fx="off"] .showcase{display:none}

@media (prefers-reduced-motion:reduce){
  .showcase__track{animation-play-state:paused}
}

}

@layer components{

/* ⚠️ این بلوک قبلاً سه بار تکرار شده بود و هر بار قبلی را بازنویسی
   می‌کرد. یک‌جا ادغام شد؛ رفتار نهایی دقیقاً همان است. */
/* فقط وقتی ویترین شناور فعال است: لایه‌ی wrap رویش می‌افتد و هاور
   کاشی‌ها را می‌بلعد. با صحنه‌ی کد این مشکل اصلاً وجود ندارد. */
.hero-showcase .wrap{pointer-events:none}
.hero-showcase .hero-actions,
.hero-showcase .hero-stats,
.hero-showcase .hero-eyebrow{pointer-events:auto}

.showcase__col{transition:opacity var(--dur-2) var(--ease)}
.sc-tile{pointer-events:auto;
  transition:transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.sc-tile:hover{transform:scale(1.05);border-color:var(--accent)}
.sc-tile--link{position:relative;cursor:pointer}
.sc-tile--link:focus-visible{outline:none}
.sc-tile--link:hover,
.sc-tile--link:focus-visible{transform:scale(1.09);border-color:var(--accent);
  box-shadow:0 22px 52px rgba(0,0,0,.5),0 0 0 2px var(--accent)}

.sc-tile__cap{position:absolute;inset-inline:0;inset-block-end:0;
  padding:1.9rem .7rem .65rem;font-size:.78rem;font-weight:700;line-height:1.65;
  color:#fff;text-wrap:balance;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.55) 55%,transparent);
  opacity:0;transform:translateY(100%);
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.sc-tile--link:hover .sc-tile__cap,
.sc-tile--link:focus-visible .sc-tile__cap{opacity:1;transform:translateY(0)}

.showcase:hover .showcase__track,
.showcase:focus-within .showcase__track{animation-play-state:paused}
.showcase:hover .showcase__col,
.showcase:focus-within .showcase__col{opacity:1}

@supports selector(:has(*)){
  .showcase:has(.sc-tile--link:hover) .showcase__track{animation-play-state:paused}
  .showcase:has(.sc-tile--link:hover) .showcase__col{opacity:1}
}

}

@layer components{

.sc-tile--word{flex-direction:column;gap:7px;display:flex;align-items:center;justify-content:center}
.sc-tile__ico{width:26px;height:26px;color:var(--accent-text);flex:0 0 auto}
.sc-tile--word.sc-tile--link{text-decoration:none;color:inherit}
.sc-tile--word.sc-tile--link::after{content:"";position:absolute;
  inset-block-start:9px;inset-inline-start:9px;width:6px;height:6px;border-radius:50%;
  background:var(--accent);opacity:0;transition:opacity .3s ease}
.sc-tile--word.sc-tile--link:hover::after,
.sc-tile--word.sc-tile--link:focus-visible::after{opacity:1}

}

/* ---------- برترین ابزارهای هوش مصنوعی (از بلاگ) ---------- */
@layer components{

.ai-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));gap:var(--space-s,1rem)}
.ai-tool{position:relative;display:flex;align-items:center;gap:.8rem;padding:.9rem 1rem;border:1px solid var(--line);
  border-radius:var(--r,.9rem);background:var(--surface);color:inherit;text-decoration:none;
  transition:border-color var(--dur-1,.15s) var(--ease,ease),transform var(--dur-1,.15s) var(--ease,ease)}
.ai-tool:hover{border-color:var(--accent-300);transform:translateY(-2px)}
.ai-tool__logo{flex:0 0 auto;width:44px;height:44px;border-radius:.6rem;background:#fff;padding:3px;box-shadow:0 0 0 1px var(--line);object-fit:contain}
.ai-tool__text{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;text-align:right}
.ai-tool__text strong{font-size:.98rem}
.ai-tool__text small{color:var(--muted);font-size:.78rem;line-height:1.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-tool__rank{flex:0 0 auto;align-self:flex-start;font-size:.72rem;font-weight:700;color:var(--muted)}
.ai-tool:nth-child(1) .ai-tool__rank{color:var(--accent-text)}

}

/* ---------- اسکیل و پرامپت (زبانه‌ی هوشمند) ---------- */
.sk-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:1rem}
.sk-tabs{display:inline-flex;gap:.25rem;padding:.25rem;border-radius:999px;background:var(--bg-2,var(--surface));border:1px solid var(--line)}
.sk-tab{padding:.4rem .9rem;border:0;border-radius:999px;background:none;color:var(--muted);font:inherit;font-size:.9rem;font-weight:700;cursor:pointer}
.sk-tab.is-active{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.sk-tab__n{font-size:.72rem;font-weight:500;direction:ltr;unicode-bidi:isolate;opacity:.8}
.sk-search{display:flex;align-items:center;gap:.5rem;flex:1 1 20rem;max-width:34rem;padding:.3rem .4rem .3rem .9rem;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.sk-search__ico{width:1.1rem;height:1.1rem;color:var(--muted);flex:none}
.sk-search input[type=search]{flex:1;min-width:0;border:0;background:none;color:inherit;font:inherit;font-size:.92rem;outline:none}
.sk-search .btn{padding:.4rem .9rem;border-radius:999px}
.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:var(--space-s,1rem)}
.sk-card{display:flex;flex-direction:column;gap:.35rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:var(--r,.9rem);background:var(--surface);color:inherit;text-decoration:none;min-width:0;
  transition:border-color var(--dur-1,.15s) var(--ease,ease),transform var(--dur-1,.15s) var(--ease,ease)}
.sk-card:hover{border-color:var(--accent-300);transform:translateY(-2px)}
.sk-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.sk-card__head strong{font-size:.95rem;direction:ltr;text-align:right;unicode-bidi:plaintext;overflow-wrap:anywhere;line-height:1.5}
.sk-card__kind{flex:none;font-size:.68rem;font-weight:700;color:var(--accent-text);border:1px solid var(--accent-300);border-radius:999px;padding:.05rem .5rem}
.sk-card__fa{font-size:.8rem;color:var(--muted)}
.sk-card__sum{font-size:.8rem;line-height:1.75;color:var(--ink-2,var(--muted));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:start;unicode-bidi:plaintext}
.sk-card__topic{margin-top:auto;padding-top:.35rem;font-size:.72rem;color:var(--muted)}
.sk-more{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;margin:.9rem 0 0;font-size:.85rem;color:var(--muted)}
.sk-more a{color:var(--accent-text);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:.25rem}
.sk-topics{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.sk-chip{padding:.25rem .8rem;border:1px solid var(--line);border-radius:999px;font-size:.8rem;color:var(--ink-2,inherit);text-decoration:none;background:var(--surface)}
.sk-chip:hover{border-color:var(--accent-300);color:var(--accent-text)}

/* ---------- دستیار هوشمند در هیرو ---------- */
.hero-as{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-l,2rem);align-items:center;margin-block-start:var(--space-l,2rem)}
.hero-as__intro{text-align:start}
.hero-as__badge{display:inline-block;padding:.2rem .7rem;border:1px solid var(--accent-300);border-radius:999px;color:var(--accent-text,var(--accent));font-size:.75rem;font-weight:700;margin-block-end:.7rem}
.hero-as__intro h2{font-size:clamp(1.3rem,1.1rem + 1vw,1.8rem);margin:0 0 .6rem}
.hero-as__intro p{color:var(--muted);line-height:1.9;margin:0 0 .8rem;font-size:.95rem}
.hero-as__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.35rem;font-size:.88rem}
.hero-as__list li{display:flex;align-items:center;gap:.5rem}
.hero-as__list li::before{content:"";inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--accent);flex:none}
.hero-as__chat{min-inline-size:0}
.hero-as__chat .di9as-panel--inline{block-size:clamp(400px,52vh,560px)}
@media (max-width:860px){.hero-as{grid-template-columns:1fr;gap:var(--space-m,1.5rem)}.hero-as__intro{text-align:center}.hero-as__list{align-items:center}}
/* کارت ابزار هوش مصنوعی در پس‌زمینه‌ی هیرو */
.cell--tool{gap:.5rem}
.cell__logo{inline-size:1.6rem;block-size:1.6rem;border-radius:.45rem;background:#fff;padding:2px;box-shadow:0 0 0 1px var(--line);object-fit:contain;flex:none}
.hero-stats{flex-wrap:wrap;row-gap:.8rem}

/* ---------- از سراسر سایت (خلاصه‌ی فشرده‌ی بلاگ) ---------- */
.digest{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-m,1.5rem)}
@media (max-width:1100px){.digest{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.digest{grid-template-columns:1fr}}
.digest__col{min-width:0;display:flex;flex-direction:column;gap:.6rem;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:var(--r,.9rem);background:var(--surface)}
.digest__h{display:flex;align-items:center;gap:.4rem;margin:0;font-size:.95rem}
.digest__ico{width:1rem;height:1rem;color:var(--accent-text,var(--accent))}
.digest__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.digest__list a{color:inherit;text-decoration:none}
.digest__list a:hover{color:var(--accent-text,var(--accent))}
.digest__art{display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;column-gap:.6rem;align-items:center}
.digest__art img,.digest__blank{grid-row:1/3;width:64px;height:40px;border-radius:.4rem;object-fit:cover;background:var(--bg-2,var(--surface-2));border:1px solid var(--line)}
.digest__art-t{font-size:.88rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.digest__art small{color:var(--muted);font-size:.72rem}
.digest__list--plain li a{display:flex;flex-direction:column;gap:.05rem;padding:.3rem 0;border-bottom:1px dashed var(--line);font-size:.86rem}
.digest__list--plain li:last-child a{border-bottom:0}
.digest__list--plain bdi{direction:ltr;unicode-bidi:isolate;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.digest__list--plain small{color:var(--muted);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.digest__tools{display:flex;flex-wrap:wrap;gap:.4rem}
.digest__tool{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .6rem .25rem .3rem;border:1px solid var(--line);border-radius:999px;background:var(--bg-2,var(--surface));color:inherit;text-decoration:none;font-size:.8rem;font-weight:600}
.digest__tool img{width:22px;height:22px;border-radius:50%;background:#fff;padding:2px;object-fit:contain}
.digest__tool:hover{border-color:var(--accent-300)}
.digest__more{margin-top:auto;padding-top:.3rem;font-size:.8rem;font-weight:700;color:var(--accent-text,var(--accent));text-decoration:none}
.digest__cats{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:var(--space-s,1rem);font-size:.82rem}
.digest__cats-t{color:var(--muted)}
.digest__cats .sk-chip small{color:var(--muted);font-size:.7rem}
/* پرامپت کوتاه در خلاصه‌ی سایت */
.digest__quick{margin-top:var(--space-m,1.5rem)}
.digest__quick-h{display:inline-flex;align-items:baseline;gap:.6rem;margin-bottom:.6rem;font-weight:800;color:var(--ink);text-decoration:none}
.digest__quick-h small{color:var(--muted);font-weight:500;font-size:.78rem}
.digest__quick-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(15rem,1fr);gap:.6rem;overflow-x:auto;padding-bottom:.4rem;scroll-snap-type:x mandatory;scrollbar-width:thin}
.digest__quick-card{scroll-snap-align:start;display:flex;flex-direction:column;gap:.3rem;padding:.75rem .9rem;border:1px solid var(--accent-300);border-radius:var(--r,.9rem);background:linear-gradient(160deg,var(--accent-050,var(--surface)),var(--surface));color:inherit;text-decoration:none}
.digest__quick-card strong{font-size:.86rem}
.digest__quick-card span{font-size:.76rem;color:var(--muted);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.digest__quick-card:hover{border-color:var(--accent)}

/* ===== آخرین اخبار فناوری (بخش news صفحه‌ی اول؛ افزونه‌ی di9-news در بلاگ) ===== */
.hn-live{display:inline-block;inline-size:.55rem;block-size:.55rem;margin-inline-end:.45rem;border-radius:50%;background:#e03131;box-shadow:0 0 0 0 rgba(224,49,49,.55);animation:hn-pulse 1.8s infinite;vertical-align:.1rem}
@keyframes hn-pulse{70%{box-shadow:0 0 0 .55rem rgba(224,49,49,0)}100%{box-shadow:0 0 0 0 rgba(224,49,49,0)}}
@media (prefers-reduced-motion:reduce){.hn-live{animation:none}}
.hn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.hn-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface,var(--bg));overflow:hidden;box-shadow:var(--shadow-1);transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.hn-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.hn-card__media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg-2)}
.hn-card__media img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;transition:transform .5s var(--ease)}
.hn-card:hover .hn-card__media img{transform:scale(1.04)}
.hn-ph{position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in oklab,var(--accent) 35%,var(--bg-2)),var(--bg-2))}
.hn-card__body{display:flex;flex-direction:column;gap:.45rem;padding:.8rem .95rem .95rem;flex:1}
.hn-cat{align-self:flex-start;padding:.08rem .6rem;border-radius:var(--r-full);background:var(--accent-050);color:var(--accent-text);font-size:.74rem;font-weight:700}
.hn-card__title{margin:0;font-size:1rem;line-height:1.75}
.hn-card__title a{color:inherit;text-decoration:none}
.hn-card__title a:hover{color:var(--accent-text)}
.hn-meta{display:flex;flex-wrap:wrap;gap:.2rem .45rem;margin-block-start:auto;color:var(--muted);font-size:.8rem}
.hn-meta bdi{font-weight:700;color:var(--ink-2)}

/* ---------- نقشه‌ی بخش‌های سایت در هیرو ---------- */
.hub{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.8rem;margin-block:0 var(--space-l,2.5rem)}
@media (max-width:1100px){.hub{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.hub{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}}
.hub__card{display:flex;flex-direction:column;gap:.3rem;min-width:0;padding:1rem 1.05rem;border:1px solid var(--line);border-radius:var(--r,.9rem);background:var(--surface);color:var(--ink);text-align:start;transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.hub__card:hover{transform:translateY(-2px);border-color:var(--accent-300);background:var(--accent-050);color:var(--ink)}
.hub__ico{inline-size:1.5rem;block-size:1.5rem;color:var(--accent-text);margin-block-end:.3rem}
.hub__card strong{font-size:var(--fs-base);font-weight:700;line-height:1.5}
.hub__desc{font-size:var(--fs-xs);color:var(--muted);line-height:1.7}
.hub__num{margin-block-start:auto;padding-block-start:.45rem;font-size:var(--fs-xs);color:var(--muted)}
.hub__num b{font-size:1.05rem;font-weight:800;color:var(--ink)}
@media (max-width:640px){.hub__card{padding:.8rem .85rem}.hub__desc{display:none}}
@media (prefers-reduced-motion:reduce){.hub__card{transition:none}}

/* ===== پرامپت تصویر با قبل و بعد (بخش image-prompts صفحه‌ی اول؛ افزونه‌ی di9-imageprompts در بلاگ) ===== */
.hp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.hp-card{display:flex;flex-direction:column;min-inline-size:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface,var(--bg));overflow:hidden;box-shadow:var(--shadow-1)}
.hp-card__body{display:flex;flex-direction:column;gap:.35rem;flex:1;padding:.7rem .85rem .85rem}
.hp-cat{align-self:flex-start;max-inline-size:100%;padding:.1rem .5rem;border-radius:999px;background:var(--bg-2);color:var(--muted);font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-card__title{margin:0;font-size:.92rem;font-weight:700;line-height:1.75;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp-card__title a{color:var(--ink);text-decoration:none}
.hp-card__title a:hover{color:var(--accent-text)}
.hp-card__more{display:inline-flex;align-items:center;gap:.3rem;margin-block-start:auto;padding-block-start:.25rem;font-size:var(--fs-xs);color:var(--accent-text);text-decoration:none}
.hp-card__ico{flex:none;inline-size:.9rem;block-size:.9rem}
/* پیکان «ادامه» در صفحه‌های چپ‌به‌راست رو به جلو (راست) باشد */
[dir="ltr"] .hp-card__ico{transform:scaleX(-1)}
@media (max-width:900px){.hp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}
@media (max-width:640px){.hp-cat,.hp-card__more{display:none}.hp-card__title{font-size:.82rem}.hp-card__body{padding:.55rem .65rem .7rem}}

/* اهرم قبل‌وبعد: قاب همیشه چپ‌به‌راست است (چپ = قبل)، پس این بخش در نسخه‌ی چپ‌به‌راستِ rtlcss هم نباید برعکس شود */
/*rtl:begin:ignore*/
.hp-ba{--pos:50%;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-2);direction:ltr;-webkit-user-select:none;user-select:none}
.hp-ba img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.hp-ba__before{position:absolute;top:0;right:0;bottom:0;left:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.hp-ba__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);pointer-events:none}
.hp-ba__handle::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:#fff;color:#222;font-size:1rem;line-height:1;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.hp-ba__range{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.hp-ba__label{position:absolute;top:.6rem;padding:.12rem .55rem;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:.75rem;line-height:1.6;pointer-events:none}
.hp-ba__label--before{left:.6rem}
.hp-ba__label--after{right:.6rem}
/*rtl:end:ignore*/
.hp-ba:focus-within{outline:2px solid var(--accent);outline-offset:-2px}

/* ===== محصولات در انتهای صفحه‌ی اول: یک ردیف چهارتایی؛ بقیه در «همه محصولات» ===== */
.p-grid.p-grid--row4{grid-template-columns:repeat(4,minmax(0,1fr));justify-content:normal}
@media (max-width:1100px){.p-grid.p-grid--row4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.p-grid.p-grid--row4{grid-template-columns:minmax(0,1fr)}}