/* =========================================================
   home-hero.css
   ========================================================= */

/* =========================================================
   SY · DESIGN SYSTEM — SINGLE SOURCE OF TRUTH
   تمام بخش‌های صفحه اصلی از این متغیرها استفاده می‌کنند
   ========================================================= */

/* =========================================================
SY · DESIGN SYSTEM — SINGLE SOURCE OF TRUTH
تمام بخش‌های صفحه اصلی از این متغیرها استفاده می‌کنند
========================================================= */
/* =========================================================
   SY · DESIGN SYSTEM — SINGLE SOURCE OF TRUTH
   تم روشن‌تر — تمام بخش‌های صفحه اصلی از این متغیرها استفاده می‌کنند
   ========================================================= */

:root {
    /* ═══════════ پالت رنگی اصلی (روشن‌تر) ═══════════ */
    --sy-olive: #24372F;
    --sy-olive-2: #2C443A;
    --sy-olive-dark: #18251F;
    --sy-olive-deep: #1A2822;

    --sy-ivory: #FAF8F3;
    /* ← روشن‌تر شد (قبلی: #F8F5EF) */
    --sy-ivory-dark: #F8F5EF;
    /* ← روشن‌تر شد (قبلی: #F5F1E8) */
    --sy-sand: #F2EDE4;
    /* ← روشن‌تر شد (قبلی: #EDE7DC) */
    --sy-sand-dark: #EDE7DC;
    /* ← روشن‌تر شد (قبلی: #E8E0D2) */

    --sy-ink: #171A18;
    --sy-muted: #5f645c;
    --sy-muted-light: #737869;
    --sy-muted-lighter: #8a8f83;

    --sy-terra: #B85C38;
    --sy-terra-dark: #A44E2E;
    --sy-terra-darker: #9A4B2C;

    --sy-lime: #D9E84A;
    --sy-lime-soft: rgba(217, 232, 74, 0.15);
    --sy-lime-softer: rgba(217, 232, 74, 0.12);

    --sy-white: #FFFFFF;

    --sy-border: #E8E2D8;
    /* ← روشن‌تر شد (قبلی: #E2DCD0) */
    --sy-border-dark: rgba(36, 55, 47, 0.08);
    /* ← روشن‌تر شد (قبلی: 0.12) */
    --sy-border-light: #F0EDE6;
    /* ← روشن‌تر شد (قبلی: #EAE7E0) */

    /* ═══════════ فونت‌ها ═══════════ */
    --sy-font: 'Vazirmatn', Tahoma, sans-serif;
    --sy-font-display: 'Lalezar', 'Vazirmatn', Tahoma, sans-serif;
    --sy-font-mono: 'Vazirmatn', Tahoma, sans-serif;

    /* ═══════════ Easing ═══════════ */
    --sy-ease: cubic-bezier(0.32, 0.72, 0.24, 1);
    --sy-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* ═══════════ Timing ═══════════ */
    --sy-t-fast: 220ms;
    --sy-t-base: 380ms;
    --sy-t-slow: 700ms;
    --sy-t-slower: 1100ms;

    /* ═══════════ Container ═══════════ */
    --sy-container-max: 1320px;
    --sy-container-pad: 32px;

    /* ═══════════ Radius ═══════════ */
    --sy-radius-xs: 3px;
    --sy-radius-sm: 6px;
    --sy-radius-md: 10px;
    --sy-radius-lg: 16px;
}

/* ─── Body Background (روشن‌تر) ─── */
body {
    background-color: var(--sy-ivory);
}



/* =========================================================
   ساخت‌یار | Home Hero V2
   اسلایدر فروشگاهی، ساده، سفید، حرفه‌ای
   Namespace: .hero
   ========================================================= */

.hero {
    background: var(--color-bg, #ffffff);
    padding: 18px 0 28px;
    position: relative;
}

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

.hero a {
    text-decoration: none;
    color: inherit;
}

.hero button {
    font-family: inherit;
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
}

.hero__container {
    width: 100%;
    max-width: var(--container-max, 1320px);
    margin-inline: auto;
    padding-inline: var(--container-pad, 24px);
}

/* =========================================================
   Slider shell
   ========================================================= */

.hero__slider {
    position: relative;
    width: 100%;
}

.hero__viewport {
    position: relative;
    width: 100%;
    height: clamp(290px, 34vw, 480px);
    border-radius: var(--radius-xl, 22px);
    overflow: hidden;
    background: var(--color-surface-2, #f2f1ed);
    box-shadow: var(--shadow-md, 0 10px 28px rgba(23, 26, 24, 0.08));
    border: 1px solid rgba(232, 226, 216, 0.9);
    isolation: isolate;
}

.hero__track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* =========================================================
   Slides
   ========================================================= */

.hero__slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--transition-slow, 520ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
        visibility var(--transition-slow, 520ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

.hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(1.02);
    transition: transform 900ms var(--ease-out);
}

.hero__slide.is-active .hero__image {
    transform: scale(1);
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to left,
            rgba(18, 24, 21, 0.88) 0%,
            rgba(18, 24, 21, 0.68) 34%,
            rgba(18, 24, 21, 0.28) 66%,
            rgba(18, 24, 21, 0.04) 100%);
    pointer-events: none;
}

/* =========================================================
   Slide content
   ========================================================= */

.hero__content {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    max-width: 640px;
    padding: clamp(24px, 5vw, 58px);
    color: var(--color-white, #ffffff);
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 6px 14px;
    border-radius: var(--radius-full, 999px);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--color-white, #ffffff);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    width: fit-content;
}

.hero__badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent, #d9e84a);
    box-shadow: 0 0 0 4px rgba(217, 232, 74, 0.18);
}

.hero__title {
    margin: 0;
    font-size: clamp(24px, 3.8vw, 44px);
    font-weight: 900;
    line-height: 1.22;
    letter-spacing: -0.02em;
    color: var(--color-white, #ffffff);
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    max-width: 15ch;
}

.hero__text {
    margin: 0;
    max-width: 48ch;
    font-size: clamp(13px, 1.45vw, 16px);
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.86);
}

.hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

.hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 24px;
    border-radius: var(--radius-md, 12px);
    background: var(--color-primary, #b85c38);
    color: var(--color-white, #ffffff);
    font-size: 14.5px;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(184, 92, 56, 0.28);
    transition:
        background-color var(--transition-fast) var(--ease-standard),
        transform var(--transition-fast) var(--ease-standard),
        box-shadow var(--transition-fast) var(--ease-standard);
}

.hero__cta:hover {
    background: var(--color-primary-dark, #9a4b2c);
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(184, 92, 56, 0.32);
}

.hero__cta-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    transition: transform var(--transition-fast) var(--ease-standard);
}

.hero__cta:hover .hero__cta-icon {
    transform: translateX(-4px);
}

.hero__cta--ghost {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: var(--color-white, #ffffff);
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero__cta--ghost:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.34);
}

/* =========================================================
   Arrows
   ========================================================= */

.hero__arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-secondary, #24372f);
    box-shadow: 0 8px 24px rgba(23, 26, 24, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.6);
    transform: translateY(-50%);
    opacity: 0;
    transition:
        opacity var(--transition-base) var(--ease-standard),
        background-color var(--transition-fast) var(--ease-standard),
        color var(--transition-fast) var(--ease-standard),
        transform var(--transition-fast) var(--ease-standard);
}

.hero__arrow svg {
    width: 20px;
    height: 20px;
}

.hero__arrow:hover {
    background: var(--color-white, #ffffff);
    color: var(--color-primary, #b85c38);
    transform: translateY(-50%) scale(1.05);
}

.hero__arrow:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    opacity: 1;
}

.hero__arrow--prev {
    right: 18px;
}

.hero__arrow--next {
    left: 18px;
}

.hero__slider:hover .hero__arrow,
.hero__slider:focus-within .hero__arrow {
    opacity: 1;
}

/* =========================================================
   Dots
   ========================================================= */

.hero__dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-full, 999px);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.48);
    transition:
        width var(--transition-base) var(--ease-out),
        background-color var(--transition-fast) var(--ease-standard),
        opacity var(--transition-fast) var(--ease-standard);
}

.hero__dot:hover {
    background: rgba(255, 255, 255, 0.75);
}

.hero__dot.is-active {
    width: 28px;
    border-radius: var(--radius-full, 999px);
    background: var(--color-accent, #d9e84a);
}

.hero__dot:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

/* =========================================================
   Optional subtle side indicator
   خیلی کم، فقط برای حس فروشگاهی
   ========================================================= */

.hero__counter {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: var(--radius-full, 999px);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1199px) {
    .hero__viewport {
        height: clamp(270px, 36vw, 420px);
    }

    .hero__content {
        max-width: 560px;
    }
}

@media (max-width: 991px) {
    .hero {
        padding: 14px 0 24px;
    }

    .hero__viewport {
        height: clamp(260px, 48vw, 380px);
        border-radius: var(--radius-lg, 16px);
    }

    .hero__content {
        max-width: 100%;
        padding: clamp(22px, 5vw, 36px);
        gap: 12px;
    }

    .hero__title {
        max-width: 18ch;
    }

    .hero__arrow {
        width: 42px;
        height: 42px;
        opacity: 1;
    }

    .hero__arrow--prev {
        right: 12px;
    }

    .hero__arrow--next {
        left: 12px;
    }
}

@media (max-width: 767px) {
    .hero__container {
        padding-inline: 16px;
    }

    .hero__viewport {
        height: clamp(245px, 72vw, 330px);
        border-radius: 18px;
    }

    .hero__overlay {
        background: linear-gradient(to top,
                rgba(18, 24, 21, 0.92) 0%,
                rgba(18, 24, 21, 0.72) 38%,
                rgba(18, 24, 21, 0.24) 72%,
                rgba(18, 24, 21, 0.04) 100%);
    }

    .hero__content {
        justify-content: flex-end;
        padding: 20px;
        gap: 10px;
    }

    .hero__badge {
        font-size: 12px;
        padding: 5px 11px;
    }

    .hero__title {
        font-size: clamp(21px, 6.4vw, 29px);
        line-height: 1.28;
        max-width: 100%;
    }

    .hero__text {
        font-size: 13px;
        line-height: 1.75;
        max-width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hero__actions {
        gap: 10px;
    }

    .hero__cta {
        min-height: 44px;
        padding: 10px 18px;
        font-size: 13.5px;
    }

    .hero__arrow {
        display: none;
    }

    .hero__dots {
        bottom: 14px;
        gap: 7px;
        padding: 7px 9px;
    }

    .hero__counter {
        top: 12px;
        left: 12px;
        font-size: 12px;
        padding: 5px 10px;
    }
}

@media (max-width: 479px) {
    .hero__viewport {
        height: 260px;
    }

    .hero__content {
        padding: 18px;
    }

    .hero__title {
        font-size: 21px;
    }

    .hero__text {
        -webkit-line-clamp: 2;
    }

    .hero__cta {
        width: 100%;
    }

    .hero__actions {
        width: 100%;
    }
}

/* =========================================================
   Accessibility
   ========================================================= */

.hero :focus-visible {
    outline: 2px solid var(--color-primary, #b85c38);
    outline-offset: 3px;
}

.hero__slide:focus-visible {
    outline: none;
}

.hero__slide:focus-visible .hero__content {
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.45);
    border-radius: inherit;
}

/* =========================================================
   home-categories.css
   ========================================================= */

/* =========================================================
   ساخت‌یار | Categories V2
   گرید کارت‌های تصویری فروشگاهی + بنرها
   Namespace: .cats-*
   وابستگی: theme.css (متغیرهای --color-*, --radius-*, ...)
   ========================================================= */

.cats {
    background: var(--color-white, #ffffff);
    padding: 34px 0 10px;
}

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

.cats a {
    text-decoration: none;
    color: inherit;
}

.cats__container {
    width: 100%;
    max-width: var(--container-max, 1320px);
    margin-inline: auto;
    padding-inline: var(--container-pad, 24px);
}

/* =========================================================
   Head
   ========================================================= */

.cats__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.cats__title {
    margin: 0 0 4px;
    font-size: clamp(19px, 2.4vw, 26px);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--color-text, #171a18);
}

.cats__subtitle {
    margin: 0;
    font-size: 13.5px;
    color: var(--color-muted, #5f645c);
}

.cats__all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--color-border, #e8e2d8);
    border-radius: var(--radius-full, 999px);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-secondary, #24372f);
    background: var(--color-white, #fff);
    transition:
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease),
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.cats__all svg {
    width: 15px;
    height: 15px;
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.cats__all:hover {
    border-color: var(--color-primary, #b85c38);
    color: var(--color-primary, #b85c38);
}

.cats__all:hover svg {
    transform: translateX(-3px);
}

/* =========================================================
   Grid
   ========================================================= */

.cats__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

/* =========================================================
   Card
   ========================================================= */

.cats-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border-light, #f0ede6);
    border-radius: var(--radius-lg, 16px);
    transition:
        transform var(--transition-base, 260ms) var(--ease-out, ease),
        box-shadow var(--transition-base, 260ms) var(--ease-out, ease),
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.cats-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-border, #e8e2d8);
    box-shadow: var(--shadow-md, 0 10px 28px rgba(23, 26, 24, 0.08));
}

.cats-card__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    background: var(--color-surface, #f8f8f6);
}

.cats-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 600ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.cats-card:hover .cats-card__media img {
    transform: scale(1.06);
}

.cats-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
    padding: 0 4px 4px;
}

.cats-card__name {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--color-text, #171a18);
    transition: color var(--transition-fast, 160ms) var(--ease-standard, ease);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
}

.cats-card:hover .cats-card__name {
    color: var(--color-primary, #b85c38);
}

.cats-card__count {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-muted-light, #737869);
    white-space: nowrap;
}

/* =========================================================
   Promo Banners
   ========================================================= */

.cats__banners {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 22px;
}

.cats-banner {
    position: relative;
    display: block;
    min-height: 150px;
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    background: var(--color-secondary, #24372f);
    isolation: isolate;
}

.cats-banner__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 700ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.cats-banner:hover .cats-banner__img {
    transform: scale(1.05);
}

.cats-banner__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to left,
            rgba(18, 24, 21, 0.9) 0%,
            rgba(18, 24, 21, 0.55) 55%,
            rgba(18, 24, 21, 0.15) 100%);
    pointer-events: none;
}

.cats-banner__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    height: 100%;
    padding: 22px 26px;
    color: var(--color-white, #fff);
}

.cats-banner__tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-full, 999px);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-accent, #d9e84a);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cats-banner__title {
    font-size: clamp(15px, 1.8vw, 19px);
    font-weight: 800;
    line-height: 1.5;
    max-width: 24ch;
}

.cats-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-white, #fff);
    opacity: 0.9;
    transition:
        opacity var(--transition-fast, 160ms) var(--ease-standard, ease),
        gap var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.cats-banner__cta svg {
    width: 14px;
    height: 14px;
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.cats-banner:hover .cats-banner__cta {
    opacity: 1;
}

.cats-banner:hover .cats-banner__cta svg {
    transform: translateX(-3px);
}

/* =========================================================
   Reveal Animation
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
    [data-cats-reveal] {
        opacity: 0;
        transform: translateY(16px);
        transition:
            opacity 550ms var(--ease-out, ease) var(--d, 0ms),
            transform 550ms var(--ease-out, ease) var(--d, 0ms);
        will-change: opacity, transform;
    }

    [data-cats-reveal].is-visible {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1199px) {
    .cats__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 991px) {
    .cats {
        padding: 26px 0 6px;
    }

    .cats__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .cats-banner {
        min-height: 132px;
    }

    .cats-banner__content {
        padding: 18px 20px;
    }
}

@media (max-width: 767px) {
    .cats__container {
        padding-inline: 16px;
    }

    .cats__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 18px;
    }

    .cats__all {
        align-self: stretch;
        justify-content: center;
    }

    .cats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .cats-card {
        padding: 8px;
        gap: 8px;
    }

    .cats-card__name {
        font-size: 12.5px;
        min-height: 2.8em;
    }

    .cats__banners {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 18px;
    }

    .cats-banner {
        min-height: 120px;
    }
}

@media (max-width: 379px) {
    .cats-card__name {
        font-size: 12px;
    }

    .cats-card__count {
        font-size: 12px;
    }
}

/* =========================================================
   Accessibility
   ========================================================= */

.cats :focus-visible {
    outline: 2px solid var(--color-primary, #b85c38);
    outline-offset: 3px;
    border-radius: var(--radius-sm, 8px);
}

/* =========================================================
   ساخت‌یار | Services V2
   نوار مزیت‌ها + کارت‌های خدمت + بنر CTA
   Namespace: .svc-*
   وابستگی: theme.css
   ========================================================= */

.svc {
    background: var(--color-white, #ffffff);
    padding: 40px 0 44px;
}

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

.svc a {
    text-decoration: none;
    color: inherit;
}

.svc__container {
    width: 100%;
    max-width: var(--container-max, 1320px);
    margin-inline: auto;
    padding-inline: var(--container-pad, 24px);
}

/* =========================================================
   Head
   ========================================================= */

.svc__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.svc__title {
    margin: 0 0 5px;
    font-size: clamp(19px, 2.4vw, 26px);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--color-text, #171a18);
}

.svc__subtitle {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--color-muted, #5f645c);
    max-width: 56ch;
}

.svc__all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--color-border, #e8e2d8);
    border-radius: var(--radius-full, 999px);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-secondary, #24372f);
    background: var(--color-white, #fff);
    transition:
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.svc__all svg {
    width: 15px;
    height: 15px;
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.svc__all:hover {
    border-color: var(--color-primary, #b85c38);
    color: var(--color-primary, #b85c38);
}

.svc__all:hover svg {
    transform: translateX(-3px);
}

/* =========================================================
   Perks Strip
   ========================================================= */

.svc__perks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 18px 20px;
    margin-bottom: 26px;
    background: var(--color-surface, #f8f8f6);
    border: 1px solid var(--color-border-light, #f0ede6);
    border-radius: var(--radius-lg, 16px);
}

.svc-perk {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.svc-perk+.svc-perk {
    padding-inline-start: 12px;
    border-inline-start: 1px solid var(--color-border, #e8e2d8);
}

.svc-perk__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm, 8px);
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #e8e2d8);
    color: var(--color-secondary, #24372f);
}

.svc-perk__icon svg {
    width: 20px;
    height: 20px;
}

.svc-perk__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.svc-perk__text strong {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-text, #171a18);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.svc-perk__text span {
    font-size: 12px;
    color: var(--color-muted, #5f645c);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================================
   Services Grid
   ========================================================= */

.svc__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

/* =========================================================
   Service Card
   ========================================================= */

.svc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 22px 20px;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border-light, #f0ede6);
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    transition:
        transform var(--transition-base, 260ms) var(--ease-out, ease),
        box-shadow var(--transition-base, 260ms) var(--ease-out, ease),
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

/* خط لهجه بالای کارت — فقط در hover */
.svc-card::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg,
            var(--color-primary, #b85c38),
            var(--color-accent, #d9e84a));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-base, 260ms) var(--ease-out, ease);
}

.svc-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-border, #e8e2d8);
    box-shadow: var(--shadow-md, 0 10px 28px rgba(23, 26, 24, 0.08));
}

.svc-card:hover::before {
    transform: scaleX(1);
}

.svc-card:focus-visible {
    outline: 2px solid var(--color-primary, #b85c38);
    outline-offset: 2px;
}

/* Icon */
.svc-card__icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md, 12px);
    background: var(--color-secondary-soft, #eef3f0);
    color: var(--color-secondary, #24372f);
    transition:
        background-color var(--transition-base, 260ms) var(--ease-standard, ease),
        color var(--transition-base, 260ms) var(--ease-standard, ease),
        transform var(--transition-base, 260ms) var(--ease-out, ease);
}

.svc-card__icon svg {
    width: 25px;
    height: 25px;
}

.svc-card:hover .svc-card__icon {
    background: var(--color-primary, #b85c38);
    color: var(--color-white, #fff);
    transform: scale(1.05) rotate(-3deg);
}

/* Body */
.svc-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.svc-card__title {
    margin: 0;
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--color-text, #171a18);
}

.svc-card__desc {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--color-muted, #5f645c);
}

/* Link */
.svc-card__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-primary, #b85c38);
    transition: gap var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.svc-card__link svg {
    width: 15px;
    height: 15px;
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.svc-card:hover .svc-card__link {
    gap: 10px;
}

.svc-card:hover .svc-card__link svg {
    transform: translateX(-3px);
}

/* =========================================================
   CTA Banner
   ========================================================= */

.svc__cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 26px;
    padding: 30px 36px;
    background: var(--color-secondary, #24372f);
    border-radius: var(--radius-xl, 22px);
    overflow: hidden;
    isolation: isolate;
}

/* لهجه لیمویی — خیلی ملایم، فقط یک نقطه نور */
.svc__cta-glow {
    position: absolute;
    top: -60px;
    inset-inline-end: -40px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(217, 232, 74, 0.16) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
}

.svc__cta-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 620px;
    min-width: 0;
}

.svc__cta-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 13px;
    border-radius: var(--radius-full, 999px);
    background: rgba(217, 232, 74, 0.14);
    border: 1px solid rgba(217, 232, 74, 0.28);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-accent, #d9e84a);
    letter-spacing: 0.01em;
}

.svc__cta-title {
    margin: 0;
    font-size: clamp(17px, 2.2vw, 24px);
    font-weight: 800;
    line-height: 1.55;
    color: var(--color-white, #fff);
}

.svc__cta-title span {
    color: var(--color-accent, #d9e84a);
}

.svc__cta-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.66);
    max-width: 52ch;
}

.svc__cta-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.svc__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 11px 22px;
    border-radius: var(--radius-md, 12px);
    font-size: 13.5px;
    font-weight: 800;
    white-space: nowrap;
    transition:
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease),
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.svc__cta-btn svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.svc__cta-btn--primary {
    background: var(--color-accent, #d9e84a);
    color: var(--color-secondary, #24372f);
    box-shadow: 0 10px 26px rgba(217, 232, 74, 0.22);
}

.svc__cta-btn--primary:hover {
    background: var(--color-white, #fff);
    transform: translateY(-2px);
}

.svc__cta-btn--primary:hover svg {
    transform: translateX(-3px);
}

.svc__cta-btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--color-white, #fff);
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: 13px;
    direction: ltr;
}

.svc__cta-btn--ghost:hover {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
}

/* =========================================================
   Reveal
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

    .has-js .svc-perk,
    .has-js .svc-card,
    .has-js .svc__cta {
        opacity: 0;
        transform: translateY(16px);
        transition:
            opacity 540ms var(--ease-out, ease) var(--d, 0ms),
            transform 540ms var(--ease-out, ease) var(--d, 0ms),
            box-shadow var(--transition-base, 260ms) var(--ease-out, ease),
            border-color var(--transition-fast, 160ms) var(--ease-standard, ease);
    }

    .has-js .svc-perk.is-visible,
    .has-js .svc-card.is-visible,
    .has-js .svc__cta.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1199px) {
    .svc__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .svc__perks {
        gap: 10px;
        padding: 16px;
    }
}

@media (max-width: 991px) {
    .svc {
        padding: 32px 0 36px;
    }

    .svc__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .svc__perks {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 12px;
    }

    .svc-perk:nth-child(3) {
        border-inline-start: none;
        padding-inline-start: 0;
    }

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

    .svc__cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 26px 26px;
        gap: 20px;
    }

    .svc__cta-actions {
        flex-direction: row;
        width: 100%;
    }

    .svc__cta-btn {
        flex: 1;
    }
}

@media (max-width: 767px) {
    .svc__container {
        padding-inline: 16px;
    }

    .svc__perks {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .svc-perk+.svc-perk {
        border-inline-start: none;
        padding-inline-start: 0;
        padding-top: 12px;
        border-top: 1px solid var(--color-border, #e8e2d8);
    }

    .svc__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .svc-card {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
        padding: 18px;
    }

    .svc-card__icon {
        width: 46px;
        height: 46px;
    }

    .svc-card__icon svg {
        width: 22px;
        height: 22px;
    }

    .svc-card__title {
        font-size: 14.5px;
    }

    .svc__cta {
        padding: 22px 20px;
    }

    .svc__cta-actions {
        flex-direction: column;
    }
}

@media (max-width: 479px) {
    .svc__cta-btn--ghost {
        justify-content: center;
    }
}

/* =========================================================
   Accessibility
   ========================================================= */

.svc :focus-visible {
    outline: 2px solid var(--color-primary, #b85c38);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .svc-card::before {
        transition: none;
    }
}

@media print {

    .svc__cta,
    .svc__all {
        display: none !important;
    }

    .svc-card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* =========================================================
   products-featured.css
   ========================================================= */

/* =========================================================
   ساخت‌یار | Special Sale V2 — فروش ویژه
   پنل لیمویی + ریل کارت‌های سفید
   Namespace: .sp-*
   وابستگی: theme.css — بدون :root
   ========================================================= */

.sp {
    --sp-card-w: 232px;
    --sp-panel: var(--color-accent, #D9E84A);
    --sp-ink: var(--color-secondary, #24372F);
    --sp-ink-dark: var(--color-secondary-dark, #18251F);
    --sp-primary: var(--color-primary, #B85C38);
    --sp-primary-dark: var(--color-primary-dark, #9A4B2C);
    --sp-bg: var(--color-white, #FFFFFF);
    --sp-muted: rgba(36, 55, 47, 0.72);
    --sp-border-light: var(--color-border-light, #F0EDE6);
    --sp-radius: 24px;
    --sp-ease-out: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
    --sp-t-fast: var(--transition-fast, 160ms);
    --sp-t-base: var(--transition-base, 260ms);

    background: var(--color-white, #FFFFFF);
    padding: 34px 0 44px;
}

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

.sp a {
    text-decoration: none;
    color: inherit;
}

.sp button {
    font-family: inherit;
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
}

.sp__container {
    width: 100%;
    max-width: var(--container-max, 1320px);
    margin-inline: auto;
    padding-inline: var(--container-pad, 24px);
}

/* =========================================================
   Panel
   ========================================================= */

.sp__panel {
    position: relative;
    display: grid;
    grid-template-columns: 192px minmax(0, 1fr);
    gap: 20px;
    padding: 16px;
    background: var(--sy-ivory-dark);
    border-radius: var(--sp-radius);
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 18px 44px rgba(36, 55, 47, 0.14);
}

/* الگوی نقطه‌ای ظریف روی پنل */
.sp__pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(36, 55, 47, 0.10) 1.2px, transparent 1.3px);
    background-size: 22px 22px;
    opacity: 0.55;
    z-index: 0;
}

/* =========================================================
   Intro
   ========================================================= */

.sp__intro {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.sp__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 13px;
    border-radius: var(--radius-full, 999px);
    background: rgba(36, 55, 47, 0.10);
    color: var(--sp-ink);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

.sp__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sp-primary);
}

.sp__title {
    margin: 0;
    font-family: var(--font-display, 'Lalezar', var(--font-body, 'Vazirmatn', Tahoma, sans-serif));
    font-size: clamp(22px, 3.6vw, 32px);
    font-weight: 900;
    line-height: 1.1;
    color: var(--sp-ink-dark);
    letter-spacing: -0.01em;
}

.sp__desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
    color: var(--sp-muted);
    max-width: 32ch;
}

.sp__art {
    margin-top: auto;
    padding-top: 6px;
}

.sp__art svg {
    width: 148px;
    height: 148px;
    display: block;
    animation: sp-float 5s ease-in-out infinite;
}

@keyframes sp-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

.sp__all {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 10px 24px;
    border: 2px solid rgba(36, 55, 47, 0.85);
    border-radius: var(--radius-full, 999px);
    color: var(--sp-ink-dark);
    font-size: 13px;
    font-weight: 800;
    transition:
        background-color var(--sp-t-fast) var(--ease-out, ease),
        color var(--sp-t-fast) var(--ease-out, ease),
        transform var(--sp-t-fast) var(--ease-out, ease);
}

.sp__all svg {
    width: 15px;
    height: 15px;
    transition: transform var(--sp-t-fast) var(--ease-out, ease);
}

.sp__all:hover {
    background: var(--sp-ink-dark);
    color: var(--sp-panel);
    transform: translateY(-2px);
}

.sp__all:hover svg {
    transform: translateX(-3px);
}

/* =========================================================
   Rail + Track
   ========================================================= */

.sp__rail {
    position: relative;
    z-index: 1;
    min-width: 0;
}



.sp__track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: 4px;
    padding: 6px 4px 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}

.sp__track::-webkit-scrollbar {
    display: none;
}

.sp__track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

/* =========================================================
   Card
   ========================================================= */

.sp-card {
    position: relative;
    flex: 0 0 auto;
    width: var(--sp-card-w);
    display: flex;
    flex-direction: column;
    background: var(--sp-bg);
    border-radius: 16px;
    overflow: hidden;
    scroll-snap-align: start;
    box-shadow: 0 6px 18px rgba(36, 55, 47, 0.10);
    transition:
        transform var(--sp-t-base) var(--sp-ease-out),
        box-shadow var(--sp-t-base) var(--sp-ease-out);
}

.sp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(36, 55, 47, 0.16);
}

.sp-card:focus-visible {
    outline: 2px solid var(--sp-ink-dark);
    outline-offset: 3px;
}

/* Media */
.sp-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    padding: 18px;
    background: var(--sp-bg);
    border-bottom: 1px solid var(--sp-border-light);
    overflow: hidden;
}

.sp-card__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 500ms var(--sp-ease-out);
}

.sp-card:hover .sp-card__media img {
    transform: scale(1.06);
}

/* Ribbon (روبان عمده / تخفیف) */
.sp-card__ribbon {
    position: absolute;
    top: 12px;
    inset-inline-end: 0;
    z-index: 2;
    padding: 6px 12px 6px 14px;
    background: var(--sp-primary);
    color: var(--sp-bg);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%);
}

/* Body */
.sp-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px 14px;
}

.sp-card__title {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
    color: var(--color-text, #171A18);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.6em * 2);
    transition: color var(--sp-t-fast) var(--ease-out, ease);
}

.sp-card:hover .sp-card__title {
    color: var(--sp-primary);
}

.sp-card__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.sp-card__price b {
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: 15px;
    font-weight: 900;
    color: var(--sp-ink);
}

.sp-card__price small {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-muted, #5f645c);
}

.sp-card__old {
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-muted-light, #737869);
    text-decoration: line-through;
}

/* =========================================================
   Arrows
   ========================================================= */

.sp__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sp-bg);
    color: var(--sp-ink);
    box-shadow: 0 8px 20px rgba(36, 55, 47, 0.18);
    transition:
        opacity var(--sp-t-fast) var(--ease-out, ease),
        background-color var(--sp-t-fast) var(--ease-out, ease),
        color var(--sp-t-fast) var(--ease-out, ease),
        transform var(--sp-t-fast) var(--ease-out, ease);
}

.sp__arrow svg {
    width: 18px;
    height: 18px;
}

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

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

.sp__arrow:hover {
    background: var(--sp-ink-dark);
    color: var(--sp-panel);
    transform: translateY(-50%) scale(1.06);
}

.sp__arrow:disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* =========================================================
   Empty
   ========================================================= */

.sp__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 220px;
    padding: 40px 24px;
    background: var(--sp-bg);
    border-radius: 16px;
    text-align: center;
}

.sp__empty p {
    margin: 0;
    font-size: 13px;
    color: var(--color-muted, #5f645c);
}

.sp__empty-btn {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 9px 20px;
    border-radius: var(--radius-full, 999px);
    background: var(--sp-ink);
    color: var(--sp-panel);
    font-size: 12.5px;
    font-weight: 800;
    transition: background-color var(--sp-t-fast) var(--ease-out, ease);
}

.sp__empty-btn:hover {
    background: var(--sp-ink-dark);
}

/* =========================================================
   Responsive — Laptop
   ========================================================= */

@media (max-width: 1199px) {
    .sp__panel {
        grid-template-columns: 260px minmax(0, 1fr);
        padding: 22px;
    }

    .sp {
        --sp-card-w: 214px;
    }

    .sp__art svg {
        width: 124px;
        height: 124px;
    }
}

/* =========================================================
   Responsive — Tablet
   ========================================================= */

@media (max-width: 991px) {
    .sp__panel {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .sp__intro {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 18px;
    }

    .sp__title {
        font-size: 34px;
    }

    .sp__desc,
    .sp__art {
        display: none;
    }

    .sp__all {
        margin-inline-start: auto;
        min-height: 40px;
        padding: 8px 20px;
    }

    .sp__arrow {
        display: none;
    }

    .sp__rail::after {
        width: 34px;
    }
}

/* =========================================================
   Responsive — Mobile
   ========================================================= */

@media (max-width: 767px) {
    .sp {
        padding: 24px 0 34px;
        --sp-card-w: 190px;
    }

    .sp__container {
        padding-inline: 16px;
    }

    .sp__panel {
        padding: 18px;
        border-radius: 20px;
    }

    .sp__title {
        font-size: 28px;
    }

    .sp__eyebrow {
        font-size: 12px;
    }

    .sp__track {
        gap: 10px;
    }

    .sp-card {
        border-radius: 14px;
    }

    .sp-card__media {
        padding: 14px;
    }

    .sp-card__body {
        padding: 10px 12px 12px;
    }

    .sp-card__title {
        font-size: 12px;
    }

    .sp-card__price b {
        font-size: 13.5px;
    }
}

@media (max-width: 479px) {
    .sp {
        --sp-card-w: 62vw;
        max-width: 200px;
    }

    .sp__intro {
        gap: 8px 12px;
    }

    .sp__all {
        margin-inline-start: 0;
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   Reduced Motion
   ========================================================= */

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

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

    .sp__art svg {
        animation: none !important;
    }

    .sp__track {
        scroll-behavior: auto;
    }
}

/* =========================================================
   Print
   ========================================================= */

@media print {

    .sp__arrow,
    .sp__art,
    .sp__pattern {
        display: none !important;
    }

    .sp__panel {
        background: #fff !important;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    .sp__track {
        overflow: visible;
        flex-wrap: wrap;
    }

    .sp-card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* =========================================================
   ساخت‌یار | Flash Sale V3 — پیشنهاد شگفت‌انگیز
   نوار تیره سراسری + تایمر زنده + ریل کارت‌های تخفیف
   Namespace: .fx-*
   وابستگی: theme.css — بدون :root
   ========================================================= */

.fx {
    position: relative;
    overflow: hidden;
    background: var(--color-secondary, #24372F);
    padding: 46px 0 50px;
}

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

.fx a {
    text-decoration: none;
    color: inherit;
}

.fx button {
    font-family: inherit;
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
}

.fx__container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--container-max, 1320px);
    margin-inline: auto;
    padding-inline: var(--container-pad, 24px);
}

/* نور و بافت روی نوار تیره */
.fx__glow {
    position: absolute;
    top: -140px;
    inset-inline-start: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(217, 232, 74, 0.14) 0%, transparent 68%);
    pointer-events: none;
}

.fx__pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1.1px, transparent 1.2px);
    background-size: 24px 24px;
    opacity: 0.5;
}

/* =========================================================
   Head
   ========================================================= */

.fx__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.fx__head-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.fx__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 13px;
    border-radius: var(--radius-full, 999px);
    background: rgba(217, 232, 74, 0.12);
    border: 1px solid rgba(217, 232, 74, 0.28);
    color: var(--color-accent, #D9E84A);
    font-size: 12px;
    font-weight: 800;
}

.fx__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent, #D9E84A);
    animation: fx-pulse 1.8s ease-in-out infinite;
}

@keyframes fx-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.45;
        transform: scale(0.8);
    }
}

.fx__title {
    margin: 0;
    font-family: var(--font-display, 'Lalezar', var(--font-body, 'Vazirmatn', Tahoma, sans-serif));
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 900;
    line-height: 1.15;
    color: var(--color-white, #FFFFFF);
}

.fx__title span {
    color: var(--color-accent, #D9E84A);
}

.fx__desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.66);
    max-width: 46ch;
}

.fx__head-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    flex-shrink: 0;
}

/* ── Timer ─ */
.fx__timer {
    display: flex;
    align-items: center;
    gap: 6px;
    direction: ltr;
    /* چینش صحیح ساعت */
}

.fx__timer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 56px;
    padding: 9px 8px 7px;
    border-radius: var(--radius-md, 12px);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.fx__timer-box b {
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-white, #FFFFFF);
    font-variant-numeric: tabular-nums;
}

.fx__timer-box small {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
}

.fx__timer-sep {
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: 18px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 14px;
}

.fx__timer.is-ended .fx__timer-box b {
    color: rgba(255, 255, 255, 0.4);
}

/* ── CTA ── */
.fx__all {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 9px 22px;
    border-radius: var(--radius-full, 999px);
    background: var(--color-accent, #D9E84A);
    color: var(--color-secondary, #24372F);
    font-size: 12.5px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(217, 232, 74, 0.22);
    transition:
        background-color var(--transition-fast, 160ms) var(--ease-out, ease),
        color var(--transition-fast, 160ms) var(--ease-out, ease),
        transform var(--transition-fast, 160ms) var(--ease-out, ease);
}

.fx__all svg {
    width: 14px;
    height: 14px;
    transition: transform var(--transition-fast, 160ms) var(--ease-out, ease);
}

.fx__all:hover {
    background: var(--color-white, #FFFFFF);
    transform: translateY(-2px);
}

.fx__all:hover svg {
    transform: translateX(-3px);
}

/* =========================================================
   Rail
   ========================================================= */

.fx__rail-wrap {
    position: relative;
}

.fx__rail {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: 4px;
    padding: 6px 4px 14px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.fx__rail::-webkit-scrollbar {
    display: none;
}

/* ── Arrows ── */
.fx__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-white, #FFFFFF);
    color: var(--color-secondary, #24372F);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    transition:
        opacity var(--transition-fast, 160ms) var(--ease-out, ease),
        background-color var(--transition-fast, 160ms) var(--ease-out, ease),
        color var(--transition-fast, 160ms) var(--ease-out, ease),
        transform var(--transition-fast, 160ms) var(--ease-out, ease);
}

.fx__arrow svg {
    width: 18px;
    height: 18px;
}

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

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

.fx__arrow:hover {
    background: var(--color-accent, #D9E84A);
    color: var(--color-secondary, #24372F);
    transform: translateY(-50%) scale(1.06);
}

.fx__arrow:disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* =========================================================
   Card
   ========================================================= */

.fx-card {
    position: relative;
    flex: 0 0 auto;
    width: 252px;
    display: flex;
    flex-direction: column;
    background: var(--color-white, #FFFFFF);
    border-radius: 16px;
    overflow: hidden;
    scroll-snap-align: start;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
    transition:
        transform var(--transition-base, 260ms) var(--ease-out, ease),
        box-shadow var(--transition-base, 260ms) var(--ease-out, ease);
}

.fx-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

/* Media */
.fx-card__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    padding: 16px;
    background: var(--color-white, #FFFFFF);
    border-bottom: 1px solid var(--color-border-light, #F0EDE6);
    overflow: hidden;
}

.fx-card__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 500ms var(--ease-out, ease);
}

.fx-card:hover .fx-card__media img {
    transform: scale(1.06);
}

/* Discount chip */
.fx-card__off {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    min-width: 44px;
    height: 30px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full, 999px);
    background: var(--color-primary, #B85C38);
    color: var(--color-white, #FFFFFF);
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: 12.5px;
    font-weight: 900;
    box-shadow: 0 6px 14px rgba(184, 92, 56, 0.35);
}

/* Body */
.fx-card__body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 13px 14px 14px;
    flex: 1;
}

.fx-card__title {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
    color: var(--color-text, #171A18);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.6em * 2);
    transition: color var(--transition-fast, 160ms) var(--ease-out, ease);
}

.fx-card__title:hover {
    color: var(--color-primary, #B85C38);
}

/* Prices */
.fx-card__prices {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.fx-card__price {
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: 15px;
    font-weight: 900;
    color: var(--color-secondary, #24372F);
    white-space: nowrap;
}

.fx-card__price small {
    font-family: var(--font-body, 'Vazirmatn', sans-serif);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-muted, #5f645c);
    margin-inline-start: 3px;
}

.fx-card__old {
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-muted-light, #737869);
    text-decoration: line-through;
    white-space: nowrap;
}

/* Sold progress */
.fx-card__progress {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: auto;
}

.fx-card__bar {
    display: block;
    height: 6px;
    border-radius: var(--radius-full, 999px);
    background: var(--color-surface-2, #F2F1ED);
    overflow: hidden;
}

.fx-card__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-primary, #B85C38), var(--color-primary-dark, #9A4B2C));
    transition: width 900ms var(--ease-out, ease);
}

.fx-card__sold {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-muted, #5f645c);
}

/* Cart button */
.fx-card__form {
    margin: 0;
}

.fx-card__cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: var(--radius-md, 12px);
    background: var(--color-primary-soft, #FFF2EC);
    border: 1px solid var(--color-primary-border, #F3D2C3);
    color: var(--color-primary-dark, #9A4B2C);
    font-size: 12.5px;
    font-weight: 800;
    transition:
        background-color var(--transition-fast, 160ms) var(--ease-out, ease),
        border-color var(--transition-fast, 160ms) var(--ease-out, ease),
        color var(--transition-fast, 160ms) var(--ease-out, ease),
        transform var(--transition-fast, 160ms) var(--ease-out, ease);
}

.fx-card__cart svg {
    width: 15px;
    height: 15px;
    transition: transform var(--transition-fast, 160ms) var(--ease-out, ease);
}

.fx-card__cart:hover {
    background: var(--color-primary, #B85C38);
    border-color: var(--color-primary, #B85C38);
    color: var(--color-white, #FFFFFF);
    transform: translateY(-1px);
}

.fx-card__cart:hover svg {
    transform: scale(1.08);
}

/* Empty */
.fx__empty {
    flex: 1;
    min-height: 180px;
    display: grid;
    place-items: center;
    padding: 40px 24px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    text-align: center;
}

.fx__empty p {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

/* =========================================================
   Reveal (fail-safe)
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
    .fx.fx-js [data-fx-reveal] {
        opacity: 0;
        transform: translateY(18px);
        transition:
            opacity 560ms var(--ease-out, ease) var(--d, 0ms),
            transform 560ms var(--ease-out, ease) var(--d, 0ms);
    }

    .fx.fx-js [data-fx-reveal].is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1199px) {
    .fx-card {
        width: 232px;
    }
}

@media (max-width: 991px) {
    .fx {
        padding: 38px 0 42px;
    }

    .fx__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .fx__head-side {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 14px;
        flex-wrap: wrap;
    }

    .fx__arrow {
        display: none;
    }

    .fx-card {
        width: 224px;
    }
}

@media (max-width: 767px) {
    .fx {
        padding: 32px 0 36px;
    }

    .fx__container {
        padding-inline: 16px;
    }

    .fx__title {
        font-size: 30px;
    }

    .fx__timer-box {
        min-width: 50px;
        padding: 8px 6px 6px;
    }

    .fx__timer-box b {
        font-size: 17px;
    }

    .fx-card {
        width: 208px;
    }

    .fx-card__media {
        padding: 12px;
    }

    .fx-card__body {
        padding: 11px 12px 12px;
        gap: 8px;
    }

    .fx-card__title {
        font-size: 12px;
    }

    .fx-card__price {
        font-size: 13.5px;
    }
}

@media (max-width: 479px) {
    .fx-card {
        width: 76vw;
        max-width: 240px;
    }

    .fx__head-side {
        flex-direction: column;
        align-items: flex-start;
    }

    .fx__timer {
        width: 100%;
        justify-content: flex-start;
    }

    .fx__timer-box {
        flex: 1;
        min-width: 0;
    }

    .fx__timer-sep {
        display: none;
    }

    .fx__all {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   Reduced Motion
   ========================================================= */

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

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

    .fx__rail {
        scroll-behavior: auto;
    }
}

/* =========================================================
   Print
   ========================================================= */

@media print {
    .fx {
        background: #fff !important;
        padding: 24px 0;
    }

    .fx__glow,
    .fx__pattern,
    .fx__arrow,
    .fx-card__cart {
        display: none !important;
    }

    .fx__title,
    .fx__desc,
    .fx-card__title,
    .fx-card__price {
        color: #000 !important;
    }

    .fx-card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* =========================================================
   best-sellers.css
   ========================================================= */

/* ═══════════════════════════════════════════════════════════
   ساخت‌یار · Best Sellers — Market Index / Market Picks
   Namespace: .bs-*
   هیچ selector سراسری‌ای برای عناصر عمومی تعریف نمی‌شود.
   ═══════════════════════════════════════════════════════════ */

.bs-section a {
    color: inherit;
    text-decoration: none;
}

.bs-section :focus-visible {
    outline: 2px solid var(--bs-terra);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ── Background ────────────────────────────────────────── */
.bs-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bs-bg__ghost {
    position: absolute;
    top: -2%;
    inset-inline-end: -2%;
    font-family: var(--bs-display);
    font-size: clamp(120px, 26vw, 340px);
    line-height: 1;
    color: rgba(36, 55, 47, 0.045);
    user-select: none;
}

.bs-bg__line {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: clamp(10px, 4vw, 56px);
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--bs-border) 18%, var(--bs-border) 82%, transparent);
}

/* ── Head ──────────────────────────────────────────────── */
.bs-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: clamp(22px, 3vw, 32px);
}

.bs-head__intro {
    max-width: 620px;
}

.bs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--bs-muted);
}

.bs-eyebrow__tick {
    width: 5px;
    height: 5px;
    flex: none;
    background: var(--bs-lime);
    border-radius: 1px;
}

.bs-eyebrow__rule {
    width: 28px;
    height: 1px;
    background: var(--bs-border);
}

.bs-eyebrow__code {
    font-size: 12px;
    color: rgba(111, 116, 108, 0.7);
}

.bs-head__title {
    margin: 14px 0 0;
    font-family: var(--bs-display);
    font-weight: 400;
    font-size: clamp(27px, 3.6vw + 8px, 46px);
    line-height: 1.5;
}

.bs-head__mark {
    position: relative;
    z-index: 0;
    font-style: normal;
}

.bs-head__mark::after {
    content: "";
    position: absolute;
    inset-inline: -0.04em;
    bottom: 0.1em;
    height: 0.15em;
    background: var(--bs-lime);
    border-radius: 3px;
    z-index: -1;
    transform-origin: 100% 50%;
}

.bs-head__sub {
    max-width: 560px;
    margin: 12px 0 0;
    font-size: 13.5px;
    line-height: 2;
    color: rgba(23, 26, 24, 0.72);
}

.bs-head__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.bs-head__update {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bs-olive);
}

.bs-head__update b {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bs-lime);
    box-shadow: 0 0 0 3px rgba(217, 232, 74, 0.22);
}

.bs-head__period {
    font-size: 12px;
    color: var(--bs-muted);
    border: 1px solid var(--bs-border);
    border-radius: 6px;
    padding: 3px 10px;
}

/* ── Filter rail ───────────────────────────────────────── */
.bs-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    border-top: 1px solid var(--bs-border);
    padding-top: 14px;
    margin-bottom: clamp(24px, 3vw, 34px);
}

.bs-rail__tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.bs-rail__tabs::-webkit-scrollbar {
    display: none;
}

.bs-rail__tab {
    position: relative;
    min-height: 44px;
    padding: 8px 14px;
    background: none;
    border: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--bs-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.bs-rail__tab::after {
    content: "";
    position: absolute;
    bottom: 3px;
    inset-inline: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--bs-terra);
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform 0.3s var(--bs-ease);
}

.bs-rail__tab:hover {
    color: var(--bs-ink);
}

.bs-rail__tab.is-live {
    color: var(--bs-ink);
    font-weight: 600;
}

.bs-rail__tab.is-live::after {
    transform: scaleX(1);
}

.bs-rail__note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--bs-muted);
}

/* ── Share bar (market share) ──────────────────────────── */
.bs-share {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.bs-share__label {
    font-size: 12px;
    color: var(--bs-muted);
    flex: none;
}

.bs-share__track {
    flex: 1;
    min-width: 60px;
    height: 5px;
    background: rgba(23, 26, 24, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.bs-share__fill {
    display: block;
    height: 100%;
    width: calc(var(--share, 5) * 1%);
    background: var(--bs-terra);
    border-radius: 3px;
    transform-origin: 100% 50%;
}

.bs-share__value {
    font-size: 12px;
    font-weight: 700;
    color: var(--bs-olive);
    flex: none;
}

.bs-share--lg {
    margin-top: 16px;
}

.bs-share--lg .bs-share__track {
    height: 7px;
}

.bs-share--lg .bs-share__value {
    font-size: 15px;
}

/* ═══ RANK 01 · MARKET LEADER ═══════════════════════════ */
.bs-leader {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    background: var(--bs-white);
    border: 1px solid var(--bs-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 38px rgba(23, 26, 24, 0.06);
    margin-bottom: clamp(24px, 3vw, 34px);
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.bs-leader:hover {
    box-shadow: 0 22px 50px rgba(23, 26, 24, 0.1);
    border-color: rgba(184, 92, 56, 0.35);
}

.bs-leader__ghost {
    position: absolute;
    top: -14px;
    inset-inline-end: 16px;
    z-index: 3;
    font-family: var(--bs-display);
    font-size: clamp(84px, 9vw, 150px);
    line-height: 1;
    color: rgba(36, 55, 47, 0.055);
    pointer-events: none;
}

.bs-leader__media {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bs-sand);
    border-bottom: 1px solid var(--bs-border);
}

.bs-leader__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
    transition: transform 0.8s var(--bs-ease);
}

.bs-leader:hover .bs-leader__media img {
    transform: scale(1.04);
}

.bs-leader__tone {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(36, 55, 47, 0.06) 0%, rgba(36, 55, 47, 0.34) 100%);
    pointer-events: none;
}

.bs-leader__status {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(23, 26, 24, 0.5);
    border: 1px solid rgba(245, 241, 232, 0.3);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bs-ivory);
    z-index: 2;
}

.bs-leader__status b {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bs-lime);
}

.bs-leader__dim {
    position: absolute;
    bottom: 14px;
    inset-inline-start: 14px;
    inset-inline-end: 14px;
    height: 1px;
    background: rgba(245, 241, 232, 0.6);
    z-index: 2;
}

.bs-leader__dim::before,
.bs-leader__dim::after {
    content: "";
    position: absolute;
    top: -4px;
    width: 1px;
    height: 9px;
    background: rgba(245, 241, 232, 0.6);
}

.bs-leader__dim::before {
    inset-inline-start: 0;
}

.bs-leader__dim::after {
    inset-inline-end: 0;
}

.bs-leader__dim span {
    position: absolute;
    top: -12px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    background: rgba(23, 26, 24, 0.55);
    border: 1px solid rgba(245, 241, 232, 0.3);
    border-radius: 5px;
    padding: 1px 10px;
    font-size: 12px;
    color: var(--bs-ivory);
    white-space: nowrap;
}

.bs-leader__info {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(18px, 2.4vw, 28px);
}

.bs-leader__cat {
    font-size: 12px;
    color: var(--bs-muted);
}

.bs-leader__name {
    margin: 6px 0 0;
}

.bs-leader__name a {
    font-family: var(--bs-display);
    font-weight: 400;
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.4;
    color: var(--bs-ink);
    transition: color 0.25s ease;
}

.bs-leader__name a span {
    font-size: 0.72em;
    color: var(--bs-muted);
}

.bs-leader__name a:hover {
    color: var(--bs-terra);
}

.bs-leader__brand {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--bs-muted);
}

.bs-leader__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    margin-top: 14px;
    border-top: 1px solid var(--bs-border);
    padding-top: 14px;
}

.bs-leader__amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--bs-olive);
}

.bs-leader__amount small {
    font-size: 12px;
    font-weight: 500;
    color: var(--bs-muted);
}

.bs-leader__update {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--bs-muted);
}

.bs-leader__update b {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bs-lime);
}

.bs-leader__proof {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 16px 0 0;
    font-size: 12px;
    color: var(--bs-muted);
}

.bs-leader__proof i {
    color: var(--bs-terra);
    font-size: 12px;
}

.bs-leader__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.bs-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    transition: background 0.3s var(--bs-ease), color 0.3s ease, transform 0.3s var(--bs-ease);
}

.bs-cta i {
    font-size: 12px;
    transition: transform 0.3s var(--bs-ease);
}

.bs-cta--solid {
    background: var(--bs-terra);
    color: var(--bs-white);
}

.bs-cta--solid:hover {
    background: var(--bs-terra-dark);
    transform: translateY(-2px);
}

.bs-cta--solid:hover i {
    transform: translateX(-2px);
}

.bs-cta--line {
    color: var(--bs-ink);
    position: relative;
    padding-inline: 10px;
}

.bs-cta--line::after {
    content: "";
    position: absolute;
    bottom: 4px;
    inset-inline: 10px;
    height: 2px;
    border-radius: 2px;
    background: var(--bs-olive);
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform 0.3s var(--bs-ease);
}

.bs-cta--line:hover::after {
    transform: scaleX(1);
}

.bs-cta--line:hover i {
    transform: translateX(-3px);
}

/* ═══ INDEX BOARD · Ranks 02–07 ═════════════════════════ */
.bs-board {
    background: var(--bs-white);
    border: 1px solid var(--bs-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(23, 26, 24, 0.05);
}

.bs-board__headrow {
    display: none;
    grid-template-columns: 52px 64px minmax(0, 2.2fr) minmax(0, 1.7fr) auto auto 52px;
    gap: 16px;
    align-items: center;
    padding: 12px 18px;
    font-size: 12px;
    color: var(--bs-muted);
    border-bottom: 1px solid var(--bs-border);
}

.bs-row {
    position: relative;
    display: grid;
    grid-template-columns: 40px 48px minmax(0, 1fr) auto 46px;
    gap: 12px;
    align-items: center;
    min-height: 68px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--bs-border);
    transition: background 0.25s ease;
}

.bs-row:last-child {
    border-bottom: 0;
}

.bs-row::after {
    content: "";
    position: absolute;
    bottom: -1px;
    inset-inline: 0;
    height: 2px;
    background: var(--bs-terra);
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform 0.35s var(--bs-ease);
    pointer-events: none;
}

.bs-row:hover {
    background: rgba(232, 224, 210, 0.38);
}

.bs-row:hover::after {
    transform: scaleX(1);
}

.bs-row__rank {
    font-family: var(--bs-display);
    font-size: 22px;
    line-height: 1;
    color: rgba(36, 55, 47, 0.28);
    transition: color 0.25s ease;
}

.bs-row:hover .bs-row__rank {
    color: var(--bs-terra);
}

.bs-row__img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--bs-border);
    background: var(--bs-sand);
    transition: transform 0.3s var(--bs-ease), border-color 0.25s ease;
}

.bs-row:hover .bs-row__img {
    transform: scale(1.07);
    border-color: rgba(184, 92, 56, 0.4);
}

.bs-row__id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bs-row__name {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
}

.bs-row__name a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.25s ease;
}

.bs-row__name a:hover {
    color: var(--bs-terra);
}

.bs-row__name b {
    font-weight: 500;
    color: var(--bs-muted);
}

.bs-row__meta {
    font-size: 12px;
    color: var(--bs-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Share column hidden on mobile base — shown ≥992 */
.bs-row .bs-share {
    display: none;
}

.bs-row__price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.bs-row__amount {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bs-olive);
    white-space: nowrap;
}

.bs-row__amount small {
    font-size: 12px;
    font-weight: 500;
    color: var(--bs-muted);
}

.bs-row__amount i {
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    color: var(--bs-muted);
}

.bs-row__price--inquiry .bs-row__amount {
    color: var(--bs-terra);
    font-size: 12.5px;
}

.bs-row__status {
    display: none;
}

.bs-row__cta {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--bs-border);
    border-radius: 11px;
    font-size: 13px;
    color: var(--bs-olive);
    background: var(--bs-white);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.bs-row__cta i {
    transition: transform 0.25s var(--bs-ease);
}

.bs-row:hover .bs-row__cta {
    background: var(--bs-olive);
    border-color: var(--bs-olive);
    color: var(--bs-ivory);
}

.bs-row:hover .bs-row__cta i {
    transform: translateX(-2px);
}

.bs-row__cta--olive {
    background: var(--bs-olive);
    border-color: var(--bs-olive);
    color: var(--bs-ivory);
}

.bs-row:hover .bs-row__cta--olive {
    background: var(--bs-olive-dark);
}

/* ── Foot ──────────────────────────────────────────────── */
.bs-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    margin-top: clamp(20px, 3vw, 30px);
}

.bs-foot__note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--bs-muted);
}

.bs-foot__note b {
    width: 5px;
    height: 5px;
    flex: none;
    background: var(--bs-lime);
    border-radius: 1px;
}

.bs-foot__link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-terra);
}

.bs-foot__link i {
    font-size: 12px;
    transition: transform 0.3s var(--bs-ease);
}

.bs-foot__link:hover i {
    transform: translateX(-4px);
}

/* ═══ MOTION ════════════════════════════════════════════ */
@keyframes bsFadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes bsDraw {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes bsBar {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes bsPop {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: no-preference) {

    .bs-eyebrow,
    .bs-head__title,
    .bs-head__sub,
    .bs-head__aside,
    .bs-rail,
    .bs-leader,
    .bs-board,
    .bs-foot {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 0.7s var(--bs-ease), transform 0.7s var(--bs-ease);
    }

    .bs-head__title {
        transition-delay: 0.08s;
    }

    .bs-head__sub {
        transition-delay: 0.16s;
    }

    .bs-head__aside {
        transition-delay: 0.22s;
    }

    .bs-rail {
        transition-delay: 0.24s;
    }

    .bs-leader {
        transition-delay: 0.26s;
    }

    .bs-board {
        transition-delay: 0.34s;
    }

    .bs-foot {
        transition-delay: 0.5s;
    }

    .bs-row {
        opacity: 0;
        transform: translateX(12px);
        transition:
            opacity 0.55s var(--bs-ease) calc(0.4s + var(--i) * 0.07s),
            transform 0.55s var(--bs-ease) calc(0.4s + var(--i) * 0.07s),
            background 0.25s ease;
    }

    .bs-section.is-inview .bs-eyebrow,
    .bs-section.is-inview .bs-head__title,
    .bs-section.is-inview .bs-head__sub,
    .bs-section.is-inview .bs-head__aside,
    .bs-section.is-inview .bs-rail,
    .bs-section.is-inview .bs-leader,
    .bs-section.is-inview .bs-board,
    .bs-section.is-inview .bs-foot,
    .bs-section.is-inview .bs-row {
        opacity: 1;
        transform: none;
    }

    .bs-head__mark::after {
        animation: bsBar 0.55s var(--bs-ease) 0.7s both;
    }

    /* Share bars draw when section enters */
    .bs-section.is-inview .bs-share__fill {
        animation: bsDraw 0.9s var(--bs-ease) 0.6s both;
    }

    .bs-section.is-inview .bs-row .bs-share__fill {
        animation-delay: calc(0.6s + var(--i) * 0.07s);
    }

    .bs-leader__ghost {
        animation: bsPop 0.9s var(--bs-ease) 0.4s both;
    }

    .pf-pop {
        animation: bsFadeUp 0.45s var(--bs-ease) both;
    }
}

/* ═══ RESPONSIVE ════════════════════════════════════════ */

/* ≥ 768px */
@media (min-width: 768px) {
    .bs-row {
        grid-template-columns: 48px 56px minmax(0, 1fr) auto 46px;
        gap: 14px;
        padding: 12px 18px;
    }

    .bs-row__img {
        width: 56px;
        height: 56px;
    }

    .bs-row__rank {
        font-size: 24px;
    }
}

/* ≥ 992px — Full index board */
@media (min-width: 992px) {
    .bs-leader {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    }

    .bs-leader__media {
        aspect-ratio: auto;
        min-height: 100%;
        border-bottom: 0;
        border-inline-end: 1px solid var(--bs-border);
    }

    .bs-board__headrow {
        display: grid;
    }

    .bs-row {
        grid-template-columns: 52px 64px minmax(0, 2.2fr) minmax(0, 1.7fr) auto auto 52px;
        gap: 16px;
        min-height: 82px;
        padding: 12px 18px;
    }

    .bs-row__img {
        width: 60px;
        height: 60px;
    }

    .bs-row .bs-share {
        display: flex;
    }

    .bs-row__status {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 12px;
        font-weight: 600;
        color: var(--bs-olive);
        white-space: nowrap;
    }

    .bs-row__status b {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--bs-lime);
    }

    .bs-row__status--inquiry {
        color: var(--bs-terra);
    }

    .bs-row__status--inquiry b {
        background: var(--bs-terra);
    }

    .bs-row__name {
        font-size: 14.5px;
    }

    .bs-row__amount {
        font-size: 14px;
    }

    .bs-row__cta {
        width: 48px;
        height: 48px;
    }
}

/* ≤ 480px */
@media (max-width: 480px) {
    .bs-row {
        grid-template-columns: 32px 44px minmax(0, 1fr) auto 44px;
        gap: 10px;
        padding: 10px 10px;
    }

    .bs-row__img {
        width: 44px;
        height: 44px;
        border-radius: 9px;
    }

    .bs-row__rank {
        font-size: 18px;
    }

    .bs-row__cta {
        width: 44px;
        height: 44px;
    }

    .bs-row__amount {
        font-size: 12px;
    }

    .bs-leader__cta {
        flex-direction: column;
    }

    .bs-cta {
        width: 100%;
    }

    .bs-foot {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ≤ 360px */
@media (max-width: 360px) {
    .bs-rail__note {
        display: none;
    }

    .bs-row__meta {
        font-size: 12px;
    }
}

/* =========================================================
   ساخت‌یار | Ready-Mix V2 — سفارش بتن آماده
   تصویر + کانفیگ‌اتور ساده و فروشگاهی
   Namespace: .mix-*
   وابستگی: theme.css
   ========================================================= */

.mix {
    background: var(--color-white, #ffffff);
    padding: 40px 0 46px;
}

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

.mix a {
    text-decoration: none;
    color: inherit;
}

.mix__container {
    width: 100%;
    max-width: var(--container-max, 1320px);
    margin-inline: auto;
    padding-inline: var(--container-pad, 24px);
}

/* =========================================================
   Head
   ========================================================= */

.mix__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.mix__title {
    margin: 0 0 5px;
    font-size: clamp(19px, 2.4vw, 26px);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--color-text, #171a18);
}

.mix__subtitle {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--color-muted, #5f645c);
    max-width: 58ch;
}

.mix__help {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--color-border, #e8e2d8);
    border-radius: var(--radius-full, 999px);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-secondary, #24372f);
    background: var(--color-white, #fff);
    transition:
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.mix__help svg {
    width: 15px;
    height: 15px;
    color: var(--color-primary, #b85c38);
}

.mix__help:hover {
    border-color: var(--color-primary, #b85c38);
    color: var(--color-primary, #b85c38);
}

/* =========================================================
   Body Grid
   ========================================================= */

.mix__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
}

/* ── Visual ─ */
.mix__visual {
    position: relative;
    border-radius: var(--radius-xl, 22px);
    overflow: hidden;
    min-height: 460px;
    background: var(--color-secondary, #24372f);
    isolation: isolate;
}

.mix__visual-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 800ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.mix__visual:hover .mix__visual-img {
    transform: scale(1.04);
}

.mix__visual-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(18, 24, 21, 0.88) 0%,
            rgba(18, 24, 21, 0.35) 42%,
            rgba(18, 24, 21, 0.08) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Chips روی تصویر */
.mix__chips-overlay {
    position: absolute;
    top: 16px;
    inset-inline-start: 16px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mix-glass {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-full, 999px);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-white, #fff);
}

.mix-glass svg {
    width: 13px;
    height: 13px;
    color: var(--color-accent, #d9e84a);
}

/* Stat شناور */
.mix__stat {
    position: absolute;
    bottom: 18px;
    inset-inline-start: 18px;
    inset-inline-end: 18px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: var(--radius-lg, 16px);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.mix__stat-value {
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-accent, #d9e84a);
    white-space: nowrap;
}

.mix__stat-value small {
    font-size: 13px;
    font-weight: 600;
}

.mix__stat-label {
    font-size: 12px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
}

/* ── Panel (کانفیگ‌اتور) ── */
.mix__panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #e8e2d8);
    border-radius: var(--radius-xl, 22px);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(23, 26, 24, 0.06));
}

/* Group */
.mix-group {
    margin: 0;
    padding: 0;
    border: none;
    min-width: 0;
}

.mix-group__label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
    font-size: 13px;
    font-weight: 800;
    color: var(--color-text, #171a18);
}

.mix-group__num {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-secondary-soft, #eef3f0);
    color: var(--color-secondary, #24372f);
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: 12px;
    font-weight: 700;
}

/* ── Grade cards ── */
.mix-grades {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.mix-grade input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mix-grade__face {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 13px 12px 12px;
    border: 1.5px solid var(--color-border, #e8e2d8);
    border-radius: var(--radius-md, 12px);
    background: var(--color-white, #fff);
    cursor: pointer;
    transition:
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        box-shadow var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.mix-grade__face:hover {
    border-color: var(--color-border-strong, #d7d0c4);
    background: var(--color-surface, #f8f8f6);
}

.mix-grade__code {
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-secondary, #24372f);
    letter-spacing: 0.01em;
}

.mix-grade__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mix-grade__meta b {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text, #171a18);
}

.mix-grade__meta small {
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-muted, #5f645c);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mix-grade__check {
    position: absolute;
    top: 9px;
    inset-inline-end: 9px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--color-primary, #b85c38);
    color: var(--color-white, #fff);
    display: grid;
    place-items: center;
    opacity: 0;
    transform: scale(0.5);
    transition:
        opacity var(--transition-fast, 160ms) var(--ease-standard, ease),
        transform var(--transition-fast, 160ms) var(--ease-out, ease);
}

.mix-grade__check svg {
    width: 10px;
    height: 10px;
}

/* حالت انتخاب‌شده */
.mix-grade.is-on .mix-grade__face,
.mix-grade input:checked+.mix-grade__face {
    border-color: var(--color-primary, #b85c38);
    background: var(--color-primary-soft, #fff2ec);
    box-shadow: 0 0 0 3px rgba(184, 92, 56, 0.08);
}

.mix-grade.is-on .mix-grade__check,
.mix-grade input:checked+.mix-grade__face .mix-grade__check {
    opacity: 1;
    transform: scale(1);
}

.mix-grade input:focus-visible+.mix-grade__face {
    outline: 2px solid var(--color-primary, #b85c38);
    outline-offset: 2px;
}

/* ── Volume chips ── */
.mix-vols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.mix-vol input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mix-vol__face {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px 9px;
    border: 1.5px solid var(--color-border, #e8e2d8);
    border-radius: var(--radius-md, 12px);
    background: var(--color-white, #fff);
    cursor: pointer;
    text-align: center;
    transition:
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.mix-vol__face b {
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-secondary, #24372f);
}

.mix-vol__face small {
    font-size: 12px;
    color: var(--color-muted, #5f645c);
    line-height: 1.4;
}

.mix-vol__face:hover {
    border-color: var(--color-border-strong, #d7d0c4);
    background: var(--color-surface, #f8f8f6);
}

.mix-vol.is-on .mix-vol__face,
.mix-vol input:checked+.mix-vol__face {
    border-color: var(--color-secondary, #24372f);
    background: var(--color-secondary, #24372f);
}

.mix-vol.is-on .mix-vol__face b,
.mix-vol input:checked+.mix-vol__face b {
    color: var(--color-accent, #d9e84a);
}

.mix-vol.is-on .mix-vol__face small,
.mix-vol input:checked+.mix-vol__face small {
    color: rgba(255, 255, 255, 0.65);
}

.mix-vol input:focus-visible+.mix-vol__face {
    outline: 2px solid var(--color-primary, #b85c38);
    outline-offset: 2px;
}

/* ── Time chips ── */
.mix-times {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mix-time input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mix-time__face {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 16px;
    border: 1.5px solid var(--color-border, #e8e2d8);
    border-radius: var(--radius-full, 999px);
    background: var(--color-white, #fff);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-muted, #5f645c);
    cursor: pointer;
    transition:
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.mix-time__face:hover {
    border-color: var(--color-secondary, #24372f);
    color: var(--color-secondary, #24372f);
}

.mix-time.is-on .mix-time__face,
.mix-time input:checked+.mix-time__face {
    border-color: var(--color-secondary, #24372f);
    background: var(--color-secondary, #24372f);
    color: var(--color-white, #fff);
}

.mix-time input:focus-visible+.mix-time__face {
    outline: 2px solid var(--color-primary, #b85c38);
    outline-offset: 2px;
}

/* ── Summary ── */
.mix__summary {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: auto;
    padding: 14px 16px;
    border-radius: var(--radius-md, 12px);
    background: var(--color-surface, #f8f8f6);
    border: 1px dashed var(--color-border, #e8e2d8);
}

.mix__summary-config {
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: 13.5px;
    font-weight: 800;
    color: var(--color-secondary, #24372f);
    line-height: 1.5;
    direction: ltr;
    text-align: right;
    unicode-bidi: plaintext;
}

.mix__summary-note {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--color-muted, #5f645c);
}

.mix__summary-sep {
    opacity: 0.5;
}

/* ── CTA ── */
.mix__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    padding: 13px 24px;
    border-radius: var(--radius-md, 12px);
    background: var(--color-primary, #b85c38);
    color: var(--color-white, #fff);
    font-size: 14.5px;
    font-weight: 800;
    box-shadow: 0 10px 26px rgba(184, 92, 56, 0.22);
    transition:
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        transform var(--transition-fast, 160ms) var(--ease-standard, ease),
        box-shadow var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.mix__cta svg {
    width: 17px;
    height: 17px;
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.mix__cta:hover {
    background: var(--color-primary-dark, #9a4b2c);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(184, 92, 56, 0.28);
}

.mix__cta:hover svg {
    transform: translateX(-4px);
}

.mix__cta:active {
    transform: translateY(0);
}

/* =========================================================
   Steps
   ========================================================= */

.mix-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.mix-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    background: var(--color-surface, #f8f8f6);
    border: 1px solid var(--color-border-light, #f0ede6);
    border-radius: var(--radius-lg, 16px);
    transition:
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.mix-step:hover {
    border-color: var(--color-border, #e8e2d8);
    background: var(--color-white, #fff);
}

/* اتصال ظریف بین مراحل — فقط دسکتاپ */
@media (min-width: 992px) {
    .mix-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 50%;
        inset-inline-end: -12px;
        width: 12px;
        height: 1px;
        border-top: 1.5px dashed var(--color-border, #e8e2d8);
    }
}

.mix-step__icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md, 12px);
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #e8e2d8);
    color: var(--color-secondary, #24372f);
}

.mix-step:hover .mix-step__icon {
    background: var(--color-secondary, #24372f);
    border-color: var(--color-secondary, #24372f);
    color: var(--color-accent, #d9e84a);
}

.mix-step__icon svg {
    width: 20px;
    height: 20px;
}

.mix-step__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mix-step__text b {
    font-size: 13px;
    font-weight: 800;
    color: var(--color-text, #171a18);
}

.mix-step__text span {
    font-size: 12px;
    color: var(--color-muted, #5f645c);
}

/* =========================================================
   Reveal
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

    .has-js .mix__visual,
    .has-js .mix__panel,
    .has-js .mix-steps {
        opacity: 0;
        transform: translateY(16px);
        transition:
            opacity 560ms var(--ease-out, ease),
            transform 560ms var(--ease-out, ease);
    }

    .has-js .mix__panel {
        transition-delay: 90ms;
    }

    .has-js .mix-steps {
        transition-delay: 160ms;
    }

    .has-js .mix__visual.is-visible,
    .has-js .mix__panel.is-visible,
    .has-js .mix-steps.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1199px) {
    .mix__visual {
        min-height: 420px;
    }
}

@media (max-width: 991px) {
    .mix {
        padding: 32px 0 38px;
    }

    .mix__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .mix__body {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .mix__visual {
        min-height: 0;
        aspect-ratio: 16 / 8;
    }

    .mix__panel {
        padding: 20px;
    }

    .mix-steps {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

@media (max-width: 767px) {
    .mix__container {
        padding-inline: 16px;
    }

    .mix__visual {
        aspect-ratio: 16 / 10;
        border-radius: var(--radius-lg, 16px);
    }

    .mix__stat {
        bottom: 12px;
        inset-inline-start: 12px;
        inset-inline-end: 12px;
        padding: 11px 14px;
        gap: 10px;
    }

    .mix__stat-value {
        font-size: 21px;
    }

    .mix__stat-label {
        font-size: 12px;
    }

    .mix-grades {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* کارت عیار در موبایل افقی */
    .mix-grade__face {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
    }

    .mix-grade__code {
        min-width: 42px;
    }

    .mix-grade__meta {
        flex: 1;
    }

    .mix-grade__check {
        position: static;
        flex-shrink: 0;
    }

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

    .mix__panel {
        gap: 16px;
    }
}

@media (max-width: 479px) {
    .mix__chips-overlay {
        top: 12px;
        inset-inline-start: 12px;
        gap: 6px;
    }

    .mix-glass {
        font-size: 12px;
        padding: 5px 10px;
    }

    .mix-times {
        flex-direction: column;
    }

    .mix-time__face {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   Accessibility
   ========================================================= */

.mix :focus-visible {
    outline: 2px solid var(--color-primary, #b85c38);
    outline-offset: 2px;
}

fieldset legend {
    padding: 0;
}

@media print {

    .mix__cta,
    .mix__help {
        display: none !important;
    }

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

    .mix__visual {
        display: none;
    }
}

/* =========================================================
   ساخت‌یار | Brands V3.2 — fail-safe
   Namespace: .bd-*
   وابستگی: theme.css
   ========================================================= */

.bd {
    background: var(--color-white, #ffffff);
    padding: 40px 0 44px;
}

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

.bd a {
    text-decoration: none;
    color: inherit;
}

.bd__container {
    width: 100%;
    max-width: var(--container-max, 1320px);
    margin-inline: auto;
    padding-inline: var(--container-pad, 24px);
}

/* =========================================================
   Head
   ========================================================= */

.bd__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.bd__title {
    margin: 0 0 5px;
    font-size: clamp(19px, 2.4vw, 26px);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--color-text, #171a18);
}

.bd__subtitle {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--color-muted, #5f645c);
    max-width: 58ch;
}

.bd__all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--color-border, #e8e2d8);
    border-radius: var(--radius-full, 999px);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-secondary, #24372f);
    background: var(--color-white, #fff);
    transition:
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.bd__all svg {
    width: 15px;
    height: 15px;
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.bd__all:hover {
    border-color: var(--color-primary, #b85c38);
    color: var(--color-primary, #b85c38);
}

.bd__all:hover svg {
    transform: translateX(-3px);
}

/* =========================================================
   Box
   ========================================================= */

.bd-box {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #e8e2d8);
    border-radius: var(--radius-xl, 22px);
    padding: 18px 0 16px;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(23, 26, 24, 0.06));
    overflow: hidden;
}

.bd-box__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 22px 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--color-border-light, #f0ede6);
}

.bd-box__label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-muted, #5f645c);
}

.bd-box__chip {
    flex-shrink: 0;
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-secondary, #24372f);
    background: var(--color-surface, #f8f8f6);
    border: 1px solid var(--color-border-light, #f0ede6);
    padding: 4px 11px;
    border-radius: var(--radius-full, 999px);
    white-space: nowrap;
}

/* =========================================================
   Marquee (ticker گام‌به‌گام با JS)
   ========================================================= */

.bd-marquee {
    position: relative;
    overflow: hidden;
}

.bd-marquee__viewport {
    direction: ltr;
    /* جهت فیزیکی قطعی: translateX منفی = ورود از راست */
    overflow: hidden;
    padding: 14px 0;
}

.bd-marquee__track {
    direction: ltr;
    display: flex;
    align-items: stretch;
    gap: 12px;
    width: max-content;
    will-change: transform;
    /* transition و transform را JS ست می‌کند */
}

.bd-marquee__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 64px;
    z-index: 2;
    pointer-events: none;
}

.bd-marquee__fade--start {
    left: 0;
    background: linear-gradient(to right, var(--color-white, #fff) 0%, rgba(255, 255, 255, 0) 100%);
}

.bd-marquee__fade--end {
    right: 0;
    background: linear-gradient(to left, var(--color-white, #fff) 0%, rgba(255, 255, 255, 0) 100%);
}

/* =========================================================
   Brand Card
   ========================================================= */

.bd-brand {
    direction: rtl;
    flex: 0 0 auto;
    width: 208px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 13px;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border-light, #f0ede6);
    border-radius: var(--radius-lg, 16px);
    min-width: 0;
    transition:
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        box-shadow var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.bd-brand:hover {
    border-color: var(--color-border, #e8e2d8);
    background: var(--color-surface, #f8f8f6);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(23, 26, 24, 0.06));
}

.bd-brand:focus-visible {
    outline: 2px solid var(--color-primary, #b85c38);
    outline-offset: 2px;
}

.bd-brand__mark {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md, 12px);
    background: var(--color-secondary-soft, #eef3f0);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-secondary, #24372f);
    transition:
        background-color var(--transition-base, 260ms) var(--ease-standard, ease),
        color var(--transition-base, 260ms) var(--ease-standard, ease);
}

.bd-brand:hover .bd-brand__mark {
    background: var(--color-secondary, #24372f);
    color: var(--color-accent, #d9e84a);
}

.bd-brand__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.bd-brand__name {
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--color-text, #171a18);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.bd-brand:hover .bd-brand__name {
    color: var(--color-primary, #b85c38);
}

.bd-brand__cat {
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-muted, #5f645c);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bd-brand__count {
    flex-shrink: 0;
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-muted-light, #737869);
    padding: 3px 8px;
    border-radius: var(--radius-full, 999px);
    background: var(--color-surface, #f8f8f6);
    white-space: nowrap;
    transition:
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.bd-brand:hover .bd-brand__count {
    background: var(--color-primary-soft, #fff2ec);
    color: var(--color-primary-dark, #9a4b2c);
}

/* =========================================================
   Box Foot
   ========================================================= */

.bd-box__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 13px 22px 2px;
    margin-top: 8px;
    border-top: 1px solid var(--color-border-light, #f0ede6);
}

.bd-box__trust {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-secondary, #24372f);
    white-space: nowrap;
}

.bd-box__trust svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--color-primary, #b85c38);
}

.bd-box__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-border-strong, #d7d0c4);
    flex-shrink: 0;
}

/* =========================================================
   Partner
   ========================================================= */

.bd-partner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 14px;
    padding: 18px 24px;
    background: var(--color-surface, #f8f8f6);
    border: 1px solid var(--color-border-light, #f0ede6);
    border-radius: var(--radius-lg, 16px);
}

.bd-partner__text {
    min-width: 0;
}

.bd-partner__title {
    margin: 0 0 4px;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--color-text, #171a18);
    line-height: 1.4;
}

.bd-partner__desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.8;
    color: var(--color-muted, #5f645c);
    max-width: 56ch;
}

.bd-partner__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    min-height: 42px;
    padding: 10px 20px;
    border-radius: var(--radius-md, 12px);
    background: var(--color-secondary, #24372f);
    color: var(--color-white, #fff);
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
    transition:
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.bd-partner__btn svg {
    width: 15px;
    height: 15px;
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.bd-partner__btn:hover {
    background: var(--color-primary, #b85c38);
    transform: translateY(-1px);
}

.bd-partner__btn:hover svg {
    transform: translateX(-3px);
}

/* =========================================================
   FAIL-SAFE Reveal
   فقط وقتی JS کلاس .bd-js را اضافه کرد، مخفی‌سازی فعال می‌شود.
   اگر JS خراب/لودنشدنی باشد → المان‌ها دیده می‌شوند.
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

    .bd.bd-js .bd-box,
    .bd.bd-js .bd-partner {
        opacity: 0;
        transform: translateY(14px);
        transition:
            opacity 520ms var(--ease-out, ease) var(--d, 0ms),
            transform 520ms var(--ease-out, ease) var(--d, 0ms);
    }

    .bd.bd-js .bd-box.is-visible,
    .bd.bd-js .bd-partner.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   Reduced Motion — اسکرول دستی
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .bd-marquee__viewport {
        overflow-x: auto;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .bd-marquee__fade {
        display: none;
    }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1199px) {
    .bd-brand {
        width: 196px;
    }
}

@media (max-width: 991px) {
    .bd {
        padding: 32px 0 36px;
    }

    .bd__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .bd-box {
        border-radius: var(--radius-lg, 16px);
        padding: 16px 0 14px;
    }

    .bd-box__top,
    .bd-box__foot {
        padding-inline: 18px;
    }

    .bd-marquee__fade {
        width: 44px;
    }

    .bd-brand {
        width: 184px;
    }

    .bd-partner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 16px 18px;
    }

    .bd-partner__btn {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .bd__container {
        padding-inline: 16px;
    }

    .bd-box {
        padding: 14px 0 12px;
    }

    .bd-box__top {
        padding: 0 14px 11px;
        gap: 8px;
    }

    .bd-box__label {
        font-size: 12px;
    }

    .bd-box__chip {
        font-size: 12px;
        padding: 3px 9px;
    }

    .bd-marquee__viewport {
        padding: 11px 0;
    }

    .bd-marquee__track {
        gap: 9px;
    }

    .bd-marquee__fade {
        width: 26px;
    }

    .bd-brand {
        width: 152px;
        padding: 9px 10px;
        gap: 9px;
        border-radius: var(--radius-md, 12px);
    }

    .bd-brand__mark {
        width: 34px;
        height: 34px;
        border-radius: var(--radius-sm, 8px);
        font-size: 15px;
    }

    .bd-brand__name {
        font-size: 12px;
    }

    .bd-brand__cat {
        font-size: 12px;
    }

    .bd-brand__count {
        display: none;
    }

    .bd-box__foot {
        gap: 10px;
        padding: 11px 14px 2px;
    }

    .bd-box__trust {
        font-size: 12px;
        gap: 5px;
    }

    .bd-box__trust svg {
        width: 13px;
        height: 13px;
    }

    .bd-partner {
        padding: 15px 16px;
    }

    .bd-partner__title {
        font-size: 13.5px;
    }

    .bd-partner__desc {
        font-size: 12px;
    }
}

@media (max-width: 379px) {
    .bd-brand {
        width: 138px;
    }

    .bd-box__foot {
        justify-content: flex-start;
    }
}

/* =========================================================
   Accessibility & Print
   ========================================================= */

.bd :focus-visible {
    outline: 2px solid var(--color-primary, #b85c38);
    outline-offset: 2px;
}

@media print {

    .bd__all,
    .bd-partner {
        display: none !important;
    }

    .bd-marquee__viewport {
        overflow: visible;
    }

    .bd-brand {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* =========================================================
   ساخت‌یار | Project Supply V2
   بنر split + آمار + مراحل + chip + CTA
   Namespace: .psp-*
   وابستگی: theme.css
   ========================================================= */

.psp {
    background: var(--color-white, #ffffff);
    padding: 44px 0 48px;
}

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

.psp a {
    text-decoration: none;
    color: inherit;
}

.psp ul,
.psp ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.psp__container {
    width: 100%;
    max-width: var(--container-max, 1320px);
    margin-inline: auto;
    padding-inline: var(--container-pad, 24px);
}

/* =========================================================
   Head
   ========================================================= */

.psp__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.psp__title {
    margin: 0 0 5px;
    font-size: clamp(19px, 2.4vw, 27px);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--color-text, #171a18);
}

.psp__subtitle {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--color-muted, #5f645c);
    max-width: 60ch;
}

.psp__head-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    min-height: 42px;
    padding: 9px 18px;
    border-radius: var(--radius-full, 999px);
    background: var(--color-secondary, #24372f);
    color: var(--color-white, #fff);
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
    transition:
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.psp__head-btn svg {
    width: 15px;
    height: 15px;
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.psp__head-btn:hover {
    background: var(--color-primary, #b85c38);
    transform: translateY(-1px);
}

.psp__head-btn:hover svg {
    transform: translateX(-3px);
}

/* =========================================================
   Hero Split
   ========================================================= */

.psp__hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
}

/* ── Visual ── */
.psp__visual {
    position: relative;
    border-radius: var(--radius-xl, 22px);
    overflow: hidden;
    min-height: 440px;
    background: var(--color-secondary, #24372f);
    isolation: isolate;
}

.psp__visual-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 800ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.psp__visual:hover .psp__visual-img {
    transform: scale(1.04);
}

.psp__visual-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(18, 24, 21, 0.9) 0%,
            rgba(18, 24, 21, 0.38) 46%,
            rgba(18, 24, 21, 0.08) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Chips */
.psp__chips {
    position: absolute;
    top: 16px;
    inset-inline-start: 16px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.psp-glass {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-full, 999px);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-white, #fff);
}

.psp-glass svg {
    width: 13px;
    height: 13px;
    color: var(--color-accent, #d9e84a);
}

/* Floating stat */
.psp__stat {
    position: absolute;
    bottom: 18px;
    inset-inline-start: 18px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 20px;
    border-radius: var(--radius-lg, 16px);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.psp__stat-value {
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-accent, #d9e84a);
    white-space: nowrap;
}

.psp__stat-value small {
    font-size: 16px;
}

.psp__stat-label {
    font-size: 12px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
}

/* ── Content ── */
.psp__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 30px 32px;
    background: var(--color-surface, #f8f8f6);
    border: 1px solid var(--color-border-light, #f0ede6);
    border-radius: var(--radius-xl, 22px);
}

.psp__badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 13px;
    border-radius: var(--radius-full, 999px);
    background: var(--color-primary-soft, #fff2ec);
    border: 1px solid var(--color-primary-border, #f3d2c3);
    font-size: 12px;
    font-weight: 800;
    color: var(--color-primary-dark, #9a4b2c);
}

.psp__content-title {
    margin: 0;
    font-size: clamp(20px, 2.6vw, 28px);
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--color-text, #171a18);
}

.psp__content-title span {
    color: var(--color-primary, #b85c38);
}

.psp__content-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.95;
    color: var(--color-muted, #5f645c);
    max-width: 46ch;
}

/* Features */
.psp__features {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 2px;
}

.psp__feature {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text, #171a18);
}

.psp__feature-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-success-soft, #e8f7ef);
    color: var(--color-success, #1f8a5b);
}

.psp__feature-icon svg {
    width: 12px;
    height: 12px;
}

/* Actions */
.psp__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.psp__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 22px;
    border-radius: var(--radius-md, 12px);
    font-size: 13.5px;
    font-weight: 800;
    white-space: nowrap;
    transition:
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease),
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        transform var(--transition-fast, 160ms) var(--ease-standard, ease),
        box-shadow var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.psp__btn svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.psp__btn--primary {
    background: var(--color-primary, #b85c38);
    color: var(--color-white, #fff);
    box-shadow: 0 10px 26px rgba(184, 92, 56, 0.22);
}

.psp__btn--primary:hover {
    background: var(--color-primary-dark, #9a4b2c);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(184, 92, 56, 0.28);
}

.psp__btn--primary:hover svg {
    transform: translateX(-3px);
}

.psp__btn--ghost {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #e8e2d8);
    color: var(--color-secondary, #24372f);
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: 13px;
    direction: ltr;
}

.psp__btn--ghost svg {
    width: 15px;
    height: 15px;
    color: var(--color-primary, #b85c38);
}

.psp__btn--ghost:hover {
    border-color: var(--color-secondary, #24372f);
}

/* =========================================================
   Stats Strip
   ========================================================= */

.psp__stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding: 22px 28px;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #e8e2d8);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(23, 26, 24, 0.06));
}

.psp__stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    flex: 1;
    min-width: 0;
}

.psp__stat-num {
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-secondary, #24372f);
}

.psp__stat-num small {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary, #b85c38);
}

.psp__stat-cap {
    font-size: 12px;
    color: var(--color-muted, #5f645c);
    line-height: 1.5;
}

.psp__stat-line {
    width: 1px;
    height: 34px;
    background: var(--color-border-light, #f0ede6);
    flex-shrink: 0;
}

/* =========================================================
   Workflow
   ========================================================= */

.psp__flow {
    margin-top: 18px;
    padding: 26px 28px 28px;
    background: var(--color-surface, #f8f8f6);
    border: 1px solid var(--color-border-light, #f0ede6);
    border-radius: var(--radius-xl, 22px);
}

.psp__flow-head {
    text-align: center;
    margin-bottom: 24px;
}

.psp__flow-title {
    margin: 0 0 5px;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 800;
    color: var(--color-text, #171a18);
}

.psp__flow-sub {
    margin: 0;
    font-size: 12.5px;
    color: var(--color-muted, #5f645c);
}

.psp__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    counter-reset: psp-step;
}

.psp__step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 18px;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border-light, #f0ede6);
    border-radius: var(--radius-lg, 16px);
    transition:
        transform var(--transition-base, 260ms) var(--ease-out, ease),
        box-shadow var(--transition-base, 260ms) var(--ease-out, ease),
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.psp__step:hover {
    transform: translateY(-3px);
    border-color: var(--color-border, #e8e2d8);
    box-shadow: var(--shadow-md, 0 10px 28px rgba(23, 26, 24, 0.08));
}

/* خط اتصال بین مراحل — فقط دسکتاپ */
@media (min-width: 992px) {
    .psp__step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 38px;
        inset-inline-end: -14px;
        width: 14px;
        height: 0;
        border-top: 1.5px dashed var(--color-border, #e8e2d8);
        z-index: 1;
    }
}

.psp__step-num {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-secondary-soft, #eef3f0);
    color: var(--color-secondary, #24372f);
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: 15px;
    font-weight: 800;
    transition:
        background-color var(--transition-base, 260ms) var(--ease-standard, ease),
        color var(--transition-base, 260ms) var(--ease-standard, ease);
}

.psp__step:hover .psp__step-num {
    background: var(--color-primary, #b85c38);
    color: var(--color-white, #fff);
}

.psp__step-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.psp__step-title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.45;
    color: var(--color-text, #171a18);
}

.psp__step-desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.8;
    color: var(--color-muted, #5f645c);
}

/* =========================================================
   Coverage Chips
   ========================================================= */

.psp__coverage {
    margin-top: 18px;
    padding: 22px 26px;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #e8e2d8);
    border-radius: var(--radius-lg, 16px);
    text-align: center;
}

.psp__coverage-label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-muted, #5f645c);
    margin-bottom: 14px;
}

.psp__coverage-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.psp__cov-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 15px;
    border-radius: var(--radius-full, 999px);
    background: var(--color-surface, #f8f8f6);
    border: 1px solid var(--color-border-light, #f0ede6);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-secondary, #24372f);
    transition:
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease),
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.psp__cov-chip:hover {
    background: var(--color-secondary, #24372f);
    border-color: var(--color-secondary, #24372f);
    color: var(--color-accent, #d9e84a);
}

/* =========================================================
   Final CTA
   ========================================================= */

.psp__cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 18px;
    padding: 32px 38px;
    background: var(--color-secondary, #24372f);
    border-radius: var(--radius-xl, 22px);
    overflow: hidden;
    isolation: isolate;
}

.psp__cta-glow {
    position: absolute;
    top: -70px;
    inset-inline-end: -50px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(217, 232, 74, 0.16) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
}

.psp__cta-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 600px;
    min-width: 0;
}

.psp__cta-title {
    margin: 0;
    font-size: clamp(18px, 2.4vw, 26px);
    font-weight: 800;
    line-height: 1.5;
    color: var(--color-white, #fff);
}

.psp__cta-title span {
    color: var(--color-accent, #d9e84a);
}

.psp__cta-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.66);
    max-width: 52ch;
}

.psp__cta-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.psp__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 24px;
    border-radius: var(--radius-md, 12px);
    font-size: 13.5px;
    font-weight: 800;
    white-space: nowrap;
    transition:
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease),
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.psp__cta-btn svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.psp__cta-btn--primary {
    background: var(--color-accent, #d9e84a);
    color: var(--color-secondary, #24372f);
    box-shadow: 0 10px 26px rgba(217, 232, 74, 0.22);
}

.psp__cta-btn--primary:hover {
    background: var(--color-white, #fff);
    transform: translateY(-2px);
}

.psp__cta-btn--primary:hover svg {
    transform: translateX(-3px);
}

.psp__cta-btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--color-white, #fff);
}

.psp__cta-btn--ghost:hover {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
}

/* =========================================================
   FAIL-SAFE Reveal
   فقط وقتی JS کلاس .psp-js را اضافه کرد، مخفی‌سازی فعال می‌شود.
   اگر JS خراب/لودنشدنی باشد → المان‌ها دیده می‌شوند.
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
    .psp.psp-js [data-psp-reveal] {
        opacity: 0;
        transform: translateY(16px);
        transition:
            opacity 560ms var(--ease-out, ease) var(--d, 0ms),
            transform 560ms var(--ease-out, ease) var(--d, 0ms);
    }

    .psp.psp-js [data-psp-reveal].is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1199px) {
    .psp__visual {
        min-height: 400px;
    }

    .psp__content {
        padding: 26px 26px;
    }
}

@media (max-width: 991px) {
    .psp {
        padding: 34px 0 38px;
    }

    .psp__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .psp__hero {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .psp__visual {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .psp__stats {
        flex-wrap: wrap;
        gap: 18px 12px;
        padding: 20px 22px;
    }

    .psp__stat-item {
        flex: 1 1 calc(50% - 12px);
    }

    .psp__stat-line {
        display: none;
    }

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

    .psp__cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 26px 26px;
        gap: 20px;
    }

    .psp__cta-actions {
        flex-direction: row;
        width: 100%;
    }

    .psp__cta-btn {
        flex: 1;
    }
}

@media (max-width: 767px) {
    .psp__container {
        padding-inline: 16px;
    }

    .psp__visual {
        aspect-ratio: 16 / 11;
        border-radius: var(--radius-lg, 16px);
    }

    .psp__chips {
        top: 12px;
        inset-inline-start: 12px;
        gap: 6px;
    }

    .psp-glass {
        font-size: 12px;
        padding: 5px 10px;
    }

    .psp__stat {
        bottom: 12px;
        inset-inline-start: 12px;
        inset-inline-end: 12px;
        padding: 12px 15px;
        gap: 11px;
    }

    .psp__stat-value {
        font-size: 24px;
    }

    .psp__stat-label {
        font-size: 12px;
    }

    .psp__content {
        padding: 22px 20px;
        border-radius: var(--radius-lg, 16px);
    }

    .psp__features {
        gap: 9px;
    }

    .psp__feature {
        font-size: 12.5px;
    }

    .psp__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .psp__btn {
        width: 100%;
    }

    .psp__flow {
        padding: 22px 18px 24px;
        border-radius: var(--radius-lg, 16px);
    }

    .psp__steps {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .psp__step {
        flex-direction: row;
        align-items: flex-start;
        gap: 13px;
        padding: 16px;
    }

    .psp__step-num {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .psp__coverage {
        padding: 18px 16px;
    }

    .psp__cta {
        padding: 24px 20px;
    }

    .psp__cta-actions {
        flex-direction: column;
        width: 100%;
    }
}

@media (max-width: 479px) {
    .psp__stat-item {
        flex: 1 1 100%;
    }

    .psp__coverage-list {
        gap: 6px;
    }

    .psp__cov-chip {
        font-size: 12px;
        padding: 6px 12px;
        min-height: 30px;
    }
}

/* =========================================================
   Accessibility & Print
   ========================================================= */

.psp :focus-visible {
    outline: 2px solid var(--color-primary, #b85c38);
    outline-offset: 2px;
}

@media print {

    .psp__cta,
    .psp__head-btn {
        display: none !important;
    }

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

    .psp__visual {
        display: none;
    }

    .psp__step {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* =========================================================
   ساخت‌یار | Why Us V2
   اعتماد با متن صادقانه — بدون نقشه و گره و کد فنی
   Namespace: .wyu-*
   وابستگی: theme.css
   ========================================================= */

.wyu {
    background: var(--color-white, #ffffff);
    padding: 44px 0 48px;
}

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

.wyu a {
    text-decoration: none;
    color: inherit;
}

.wyu ul,
.wyu figure,
.wyu blockquote {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wyu__container {
    width: 100%;
    max-width: var(--container-max, 1320px);
    margin-inline: auto;
    padding-inline: var(--container-pad, 24px);
}

/* =========================================================
   Head
   ========================================================= */

.wyu__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.wyu__title {
    margin: 0 0 5px;
    font-size: clamp(19px, 2.4vw, 27px);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--color-text, #171a18);
}

.wyu__subtitle {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.95;
    color: var(--color-muted, #5f645c);
    max-width: 62ch;
}

.wyu__all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--color-border, #e8e2d8);
    border-radius: var(--radius-full, 999px);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-secondary, #24372f);
    background: var(--color-white, #fff);
    transition:
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.wyu__all svg {
    width: 15px;
    height: 15px;
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.wyu__all:hover {
    border-color: var(--color-primary, #b85c38);
    color: var(--color-primary, #b85c38);
}

.wyu__all:hover svg {
    transform: translateX(-3px);
}

/* =========================================================
   Hero Split
   ========================================================= */

.wyu__hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
}

/* ── Visual ── */
.wyu__visual {
    position: relative;
    border-radius: var(--radius-xl, 22px);
    overflow: hidden;
    min-height: 460px;
    background: var(--color-secondary, #24372f);
    isolation: isolate;
}

.wyu__visual-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 800ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.wyu__visual:hover .wyu__visual-img {
    transform: scale(1.04);
}

.wyu__visual-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(18, 24, 21, 0.92) 0%,
            rgba(18, 24, 21, 0.4) 48%,
            rgba(18, 24, 21, 0.08) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Chips */
.wyu__chips {
    position: absolute;
    top: 16px;
    inset-inline-start: 16px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wyu-glass {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-full, 999px);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-white, #fff);
}

.wyu-glass svg {
    width: 13px;
    height: 13px;
    color: var(--color-accent, #d9e84a);
}

/* نقل‌قول شناور روی تصویر */
.wyu__vstat {
    position: absolute;
    bottom: 18px;
    inset-inline-start: 18px;
    inset-inline-end: 18px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border-radius: var(--radius-lg, 16px);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.wyu__vstat-mark {
    font-size: 26px;
    font-weight: 800;
    line-height: 0.6;
    color: var(--color-accent, #d9e84a);
}

.wyu__vstat-text {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.75;
    color: var(--color-white, #fff);
}

.wyu__vstat-by {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

/* ── Content ── */
.wyu__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 30px 32px;
    background: var(--color-surface, #f8f8f6);
    border: 1px solid var(--color-border-light, #f0ede6);
    border-radius: var(--radius-xl, 22px);
}

.wyu__badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 13px;
    border-radius: var(--radius-full, 999px);
    background: var(--color-primary-soft, #fff2ec);
    border: 1px solid var(--color-primary-border, #f3d2c3);
    font-size: 12px;
    font-weight: 800;
    color: var(--color-primary-dark, #9a4b2c);
}

.wyu__content-title {
    margin: 0;
    font-size: clamp(20px, 2.6vw, 28px);
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--color-text, #171a18);
}

.wyu__content-title span {
    color: var(--color-primary, #b85c38);
}

.wyu__content-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.95;
    color: var(--color-muted, #5f645c);
    max-width: 46ch;
}

/* Promises */
.wyu__promises {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-top: 2px;
}

.wyu__promise {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.wyu__promise-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 1px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-success-soft, #e8f7ef);
    color: var(--color-success, #1f8a5b);
}

.wyu__promise-icon svg {
    width: 12px;
    height: 12px;
}

.wyu__promise span:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wyu__promise b {
    font-size: 13px;
    font-weight: 800;
    color: var(--color-text, #171a18);
    line-height: 1.5;
}

.wyu__promise small {
    font-size: 12px;
    line-height: 1.7;
    color: var(--color-muted, #5f645c);
}

/* Actions */
.wyu__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.wyu__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 22px;
    border-radius: var(--radius-md, 12px);
    font-size: 13.5px;
    font-weight: 800;
    white-space: nowrap;
    transition:
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease),
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        transform var(--transition-fast, 160ms) var(--ease-standard, ease),
        box-shadow var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.wyu__btn svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.wyu__btn--primary {
    background: var(--color-primary, #b85c38);
    color: var(--color-white, #fff);
    box-shadow: 0 10px 26px rgba(184, 92, 56, 0.22);
}

.wyu__btn--primary:hover {
    background: var(--color-primary-dark, #9a4b2c);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(184, 92, 56, 0.28);
}

.wyu__btn--primary:hover svg {
    transform: translateX(-3px);
}

.wyu__btn--ghost {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #e8e2d8);
    color: var(--color-secondary, #24372f);
}

.wyu__btn--ghost:hover {
    border-color: var(--color-secondary, #24372f);
}

/* =========================================================
   Benefits Grid
   ========================================================= */

.wyu__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 18px;
}

.wyu-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 20px;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border-light, #f0ede6);
    border-radius: var(--radius-lg, 16px);
    transition:
        transform var(--transition-base, 260ms) var(--ease-out, ease),
        box-shadow var(--transition-base, 260ms) var(--ease-out, ease),
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.wyu-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-border, #e8e2d8);
    box-shadow: var(--shadow-md, 0 10px 28px rgba(23, 26, 24, 0.08));
}

.wyu-card__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md, 12px);
    background: var(--color-secondary-soft, #eef3f0);
    color: var(--color-secondary, #24372f);
    transition:
        background-color var(--transition-base, 260ms) var(--ease-standard, ease),
        color var(--transition-base, 260ms) var(--ease-standard, ease),
        transform var(--transition-base, 260ms) var(--ease-out, ease);
}

.wyu-card__icon svg {
    width: 23px;
    height: 23px;
}

.wyu-card:hover .wyu-card__icon {
    background: var(--color-primary, #b85c38);
    color: var(--color-white, #fff);
    transform: scale(1.05) rotate(-3deg);
}

.wyu-card__title {
    margin: 0;
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--color-text, #171a18);
}

.wyu-card__desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.85;
    color: var(--color-muted, #5f645c);
}

/* =========================================================
   Stats Strip
   ========================================================= */

.wyu__stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding: 22px 28px;
    background: var(--color-surface, #f8f8f6);
    border: 1px solid var(--color-border-light, #f0ede6);
    border-radius: var(--radius-lg, 16px);
}

.wyu__stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    flex: 1;
    min-width: 0;
}

.wyu__stat-num {
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-secondary, #24372f);
}

.wyu__stat-num small {
    font-family: var(--font-base, sans-serif);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary, #b85c38);
}

.wyu__stat-cap {
    font-size: 12px;
    color: var(--color-muted, #5f645c);
    line-height: 1.5;
}

.wyu__stat-line {
    width: 1px;
    height: 34px;
    background: var(--color-border, #e8e2d8);
    flex-shrink: 0;
}

/* =========================================================
   Testimonial
   ========================================================= */

.wyu__quote {
    position: relative;
    margin-top: 18px;
    padding: 30px 34px 26px;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #e8e2d8);
    border-radius: var(--radius-xl, 22px);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(23, 26, 24, 0.06));
}

.wyu__quote-mark {
    position: absolute;
    top: 18px;
    inset-inline-start: 22px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm, 8px);
    background: var(--color-primary-soft, #fff2ec);
    color: var(--color-primary, #b85c38);
}

.wyu__quote-mark svg {
    width: 20px;
    height: 20px;
}

.wyu__quote-text {
    margin: 0 0 18px;
    padding-inline-start: 46px;
    font-size: clamp(14px, 1.7vw, 16.5px);
    font-weight: 600;
    line-height: 2.05;
    color: var(--color-text, #171a18);
}

.wyu__quote-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-inline-start: 46px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-light, #f0ede6);
}

.wyu__quote-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-secondary, #24372f);
    color: var(--color-accent, #d9e84a);
    font-size: 18px;
    font-weight: 800;
}

.wyu__quote-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wyu__quote-info b {
    font-size: 13px;
    font-weight: 800;
    color: var(--color-text, #171a18);
}

.wyu__quote-info span {
    font-size: 12px;
    color: var(--color-muted, #5f645c);
}

/* =========================================================
   Final CTA
   ========================================================= */

.wyu__cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 18px;
    padding: 32px 38px;
    background: var(--color-secondary, #24372f);
    border-radius: var(--radius-xl, 22px);
    overflow: hidden;
    isolation: isolate;
}

.wyu__cta-glow {
    position: absolute;
    top: -70px;
    inset-inline-end: -50px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(217, 232, 74, 0.16) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
}

.wyu__cta-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 580px;
    min-width: 0;
}

.wyu__cta-title {
    margin: 0;
    font-size: clamp(18px, 2.4vw, 26px);
    font-weight: 800;
    line-height: 1.55;
    color: var(--color-white, #fff);
}

.wyu__cta-title span {
    color: var(--color-accent, #d9e84a);
}

.wyu__cta-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.66);
    max-width: 50ch;
}

.wyu__cta-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.wyu__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 24px;
    border-radius: var(--radius-md, 12px);
    font-size: 13.5px;
    font-weight: 800;
    white-space: nowrap;
    transition:
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease),
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.wyu__cta-btn svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.wyu__cta-btn--primary {
    background: var(--color-accent, #d9e84a);
    color: var(--color-secondary, #24372f);
    box-shadow: 0 10px 26px rgba(217, 232, 74, 0.22);
}

.wyu__cta-btn--primary:hover {
    background: var(--color-white, #fff);
    transform: translateY(-2px);
}

.wyu__cta-btn--primary:hover svg {
    transform: translateX(-3px);
}

.wyu__cta-btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--color-white, #fff);
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: 13px;
    direction: ltr;
}

.wyu__cta-btn--ghost svg {
    width: 15px;
    height: 15px;
    color: var(--color-accent, #d9e84a);
}

.wyu__cta-btn--ghost:hover {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
}

/* =========================================================
   FAIL-SAFE Reveal
   فقط وقتی JS کلاس .wyu-js را اضافه کرد، مخفی‌سازی فعال می‌شود.
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
    .wyu.wyu-js [data-wyu-reveal] {
        opacity: 0;
        transform: translateY(16px);
        transition:
            opacity 560ms var(--ease-out, ease) var(--d, 0ms),
            transform 560ms var(--ease-out, ease) var(--d, 0ms);
    }

    .wyu.wyu-js [data-wyu-reveal].is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1199px) {
    .wyu__visual {
        min-height: 420px;
    }

    .wyu__grid {
        gap: 12px;
    }

    .wyu-card {
        padding: 20px 18px;
    }
}

@media (max-width: 991px) {
    .wyu {
        padding: 34px 0 38px;
    }

    .wyu__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .wyu__hero {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .wyu__visual {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .wyu__content {
        padding: 26px 26px;
        border-radius: var(--radius-lg, 16px);
    }

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

    .wyu__stats {
        flex-wrap: wrap;
        gap: 18px 12px;
        padding: 20px 22px;
    }

    .wyu__stat-item {
        flex: 1 1 calc(50% - 12px);
    }

    .wyu__stat-line {
        display: none;
    }

    .wyu__quote {
        padding: 26px 26px 22px;
    }

    .wyu__quote-text,
    .wyu__quote-author {
        padding-inline-start: 0;
    }

    .wyu__quote-mark {
        position: static;
        margin-bottom: 12px;
    }

    .wyu__cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 26px 26px;
        gap: 20px;
    }

    .wyu__cta-actions {
        flex-direction: row;
        width: 100%;
    }

    .wyu__cta-btn {
        flex: 1;
    }
}

@media (max-width: 767px) {
    .wyu__container {
        padding-inline: 16px;
    }

    .wyu__visual {
        aspect-ratio: 16 / 11;
        border-radius: var(--radius-lg, 16px);
    }

    .wyu__chips {
        top: 12px;
        inset-inline-start: 12px;
        gap: 6px;
    }

    .wyu-glass {
        font-size: 12px;
        padding: 5px 10px;
    }

    .wyu__vstat {
        bottom: 12px;
        inset-inline-start: 12px;
        inset-inline-end: 12px;
        padding: 13px 15px;
    }

    .wyu__vstat-text {
        font-size: 12px;
    }

    .wyu__content {
        padding: 22px 20px;
    }

    .wyu__promises {
        gap: 11px;
    }

    .wyu__promise b {
        font-size: 12.5px;
    }

    .wyu__promise small {
        font-size: 12px;
    }

    .wyu__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .wyu__btn {
        width: 100%;
    }

    .wyu__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .wyu-card {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
        padding: 16px;
    }

    .wyu-card__icon {
        width: 44px;
        height: 44px;
    }

    .wyu-card__title {
        font-size: 13.5px;
    }

    .wyu-card__desc {
        font-size: 12px;
    }

    .wyu__quote {
        padding: 22px 20px 18px;
        border-radius: var(--radius-lg, 16px);
    }

    .wyu__quote-text {
        font-size: 13.5px;
        line-height: 1.95;
    }

    .wyu__cta {
        padding: 24px 20px;
    }

    .wyu__cta-actions {
        flex-direction: column;
        width: 100%;
    }
}

@media (max-width: 479px) {
    .wyu__stat-item {
        flex: 1 1 100%;
    }

    .wyu__quote-author {
        flex-wrap: wrap;
    }
}

/* =========================================================
   Accessibility & Print
   ========================================================= */

.wyu :focus-visible {
    outline: 2px solid var(--color-primary, #b85c38);
    outline-offset: 2px;
}

@media print {

    .wyu__cta,
    .wyu__all {
        display: none !important;
    }

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

    .wyu__visual {
        display: none;
    }

    .wyu-card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* =========================================================
   ساخت‌یار | Magazine V2
   کارت مقالات + Modal مطالعه تمیز و حرفه‌ای
   Namespace: .mg-*
   وابستگی: theme.css
   ========================================================= */

.mg {
    background: var(--color-white, #ffffff);
    padding: 40px 0 44px;
    position: relative;
}

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

.mg a {
    text-decoration: none;
    color: inherit;
}

.mg button {
    font-family: inherit;
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
}

.mg__container {
    width: 100%;
    max-width: var(--container-max, 1320px);
    margin-inline: auto;
    padding-inline: var(--container-pad, 24px);
}

/* shared dot between meta items */
.mg-meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
    flex-shrink: 0;
}

/* =========================================================
   Head
   ========================================================= */

.mg__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.mg__title {
    margin: 0 0 5px;
    font-size: clamp(19px, 2.4vw, 26px);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--color-text, #171a18);
}

.mg__subtitle {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--color-muted, #5f645c);
    max-width: 56ch;
}

.mg__all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--color-border, #e8e2d8);
    border-radius: var(--radius-full, 999px);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-secondary, #24372f);
    background: var(--color-white, #fff);
    transition:
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.mg__all svg {
    width: 15px;
    height: 15px;
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.mg__all:hover {
    border-color: var(--color-primary, #b85c38);
    color: var(--color-primary, #b85c38);
}

.mg__all:hover svg {
    transform: translateX(-3px);
}

/* =========================================================
   Layout
   ========================================================= */

.mg__layout {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 16px;
    align-items: start;
}

.mg__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* =========================================================
   Lead Card
   ========================================================= */

.mg-lead {
    display: flex;
    flex-direction: column;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border-light, #f0ede6);
    border-radius: var(--radius-xl, 22px);
    overflow: hidden;
    cursor: pointer;
    transition:
        transform var(--transition-base, 260ms) var(--ease-out, ease),
        box-shadow var(--transition-base, 260ms) var(--ease-out, ease),
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.mg-lead:hover {
    transform: translateY(-3px);
    border-color: var(--color-border, #e8e2d8);
    box-shadow: var(--shadow-md, 0 10px 28px rgba(23, 26, 24, 0.08));
}

.mg-lead__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-surface, #f8f8f6);
}

.mg-lead__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 650ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.mg-lead:hover .mg-lead__media img {
    transform: scale(1.045);
}

.mg-lead__cat {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    z-index: 2;
    padding: 5px 13px;
    border-radius: var(--radius-full, 999px);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 12px;
    font-weight: 800;
    color: var(--color-secondary, #24372f);
    box-shadow: 0 3px 10px rgba(23, 26, 24, 0.1);
}

.mg-lead__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 22px 22px;
}

.mg-lead__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-muted, #5f645c);
}

.mg-lead__title {
    margin: 0;
    font-size: clamp(17px, 2.1vw, 22px);
    font-weight: 800;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: var(--color-text, #171a18);
    transition: color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.mg-lead:hover .mg-lead__title {
    color: var(--color-primary, #b85c38);
}

.mg-lead__excerpt {
    margin: 0;
    font-size: 13px;
    line-height: 1.95;
    color: var(--color-muted, #5f645c);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mg-lead__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 4px;
    min-height: 40px;
    padding: 8px 18px;
    border-radius: var(--radius-full, 999px);
    background: var(--color-primary-soft, #fff2ec);
    color: var(--color-primary-dark, #9a4b2c);
    font-size: 12.5px;
    font-weight: 800;
    transition:
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.mg-lead__go svg {
    width: 15px;
    height: 15px;
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.mg-lead:hover .mg-lead__go,
.mg-lead__go:hover {
    background: var(--color-primary, #b85c38);
    color: var(--color-white, #fff);
}

.mg-lead:hover .mg-lead__go svg,
.mg-lead__go:hover svg {
    transform: translateX(-3px);
}

.mg-lead__go:focus-visible {
    outline: 2px solid var(--color-primary, #b85c38);
    outline-offset: 2px;
}

/* =========================================================
   Item Card (compact horizontal)
   ========================================================= */

.mg-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border-light, #f0ede6);
    border-radius: var(--radius-lg, 16px);
    cursor: pointer;
    min-width: 0;
    transition:
        transform var(--transition-base, 260ms) var(--ease-out, ease),
        box-shadow var(--transition-base, 260ms) var(--ease-out, ease),
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.mg-item:hover {
    transform: translateY(-2px);
    border-color: var(--color-border, #e8e2d8);
    background: var(--color-surface, #f8f8f6);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(23, 26, 24, 0.06));
}

.mg-item__media {
    width: 92px;
    height: 92px;
    flex-shrink: 0;
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    background: var(--color-surface-2, #f2f1ed);
}

.mg-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 600ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.mg-item:hover .mg-item__media img {
    transform: scale(1.06);
}

.mg-item__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.mg-item__cat {
    width: fit-content;
    padding: 3px 10px;
    border-radius: var(--radius-full, 999px);
    background: var(--color-secondary-soft, #eef3f0);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-secondary, #24372f);
}

.mg-item__title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.6;
    color: var(--color-text, #171a18);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.mg-item:hover .mg-item__title {
    color: var(--color-primary, #b85c38);
}

.mg-item__meta {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--color-muted-light, #737869);
}

.mg-item__arrow {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--color-border, #e8e2d8);
    color: var(--color-muted, #5f645c);
    transition:
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease),
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.mg-item__arrow svg {
    width: 13px;
    height: 13px;
}

.mg-item:hover .mg-item__arrow {
    background: var(--color-primary, #b85c38);
    border-color: var(--color-primary, #b85c38);
    color: var(--color-white, #fff);
}

/* =========================================================
   Foot
   ========================================================= */

.mg__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border-light, #f0ede6);
}

.mg__foot-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-muted, #5f645c);
}

.mg__foot-note svg {
    width: 15px;
    height: 15px;
    color: var(--color-primary, #b85c38);
}

.mg__foot-sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-border-strong, #d7d0c4);
}

/* =========================================================
   Modal — Overlay & Sheet
   ========================================================= */

.mg-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 320ms var(--ease-standard, ease),
        visibility 320ms var(--ease-standard, ease);
}

.mg-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mg-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(18, 24, 21, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}

.mg-modal__sheet {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 780px;
    max-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    background: var(--color-white, #fff);
    border-radius: var(--radius-xl, 22px);
    box-shadow: 0 30px 80px rgba(18, 24, 21, 0.35);
    overflow: hidden;
    transform: translateY(18px) scale(0.985);
    transition: transform 380ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.mg-modal.is-open .mg-modal__sheet {
    transform: translateY(0) scale(1);
}

/* body lock */
body.mg-lock {
    overflow: hidden;
}

/* ── Progress ─ */
.mg-modal__progress {
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 3px;
    background: var(--color-surface-2, #f2f1ed);
    z-index: 5;
}

.mg-modal__progress-bar {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg,
            var(--color-primary, #b85c38),
            var(--color-accent, #d9e84a));
    transition: width 120ms linear;
}

/* ── Close ── */
.mg-modal__close {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    z-index: 6;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--color-secondary, #24372f);
    box-shadow: 0 4px 14px rgba(18, 24, 21, 0.18);
    transition:
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease),
        transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.mg-modal__close svg {
    width: 17px;
    height: 17px;
}

.mg-modal__close:hover {
    background: var(--color-primary, #b85c38);
    color: var(--color-white, #fff);
    transform: rotate(90deg);
}

.mg-modal__close:focus-visible {
    outline: 2px solid var(--color-white, #fff);
    outline-offset: 2px;
}

/* ── Scroll Area ── */
.mg-modal__scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong, #d7d0c4) transparent;
}

.mg-modal__scroll:focus {
    outline: none;
}

.mg-modal__scroll::-webkit-scrollbar {
    width: 8px;
}

.mg-modal__scroll::-webkit-scrollbar-thumb {
    background: var(--color-border, #e8e2d8);
    border-radius: 99px;
}

.mg-modal__scroll::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-strong, #d7d0c4);
}

/* ── Cover ── */
.mg-modal__cover {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    background: var(--color-surface-2, #f2f1ed);
}

.mg-modal__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.mg-modal__cover-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(18, 24, 21, 0.25) 0%,
            rgba(18, 24, 21, 0) 35%,
            rgba(18, 24, 21, 0.55) 100%);
    pointer-events: none;
}

/* ── Info ── */
.mg-modal__info {
    padding: 26px 40px 20px;
}

.mg-modal__cat {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: var(--radius-full, 999px);
    background: var(--color-primary-soft, #fff2ec);
    color: var(--color-primary-dark, #9a4b2c);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 14px;
}

.mg-modal__title {
    margin: 0 0 14px;
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: -0.015em;
    color: var(--color-text, #171a18);
}

.mg-modal__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    font-size: 12px;
    color: var(--color-muted, #5f645c);
}

.mg-modal__author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--color-secondary, #24372f);
}

.mg-modal__avatar {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-secondary, #24372f);
    color: var(--color-accent, #d9e84a);
    font-size: 12px;
    font-weight: 800;
}

/* ── Body Prose ── */
.mg-modal__body {
    padding: 4px 40px 8px;
    max-width: 72ch;
    font-size: 15px;
    line-height: 2.05;
    color: var(--color-text-soft, #3f4640);
}

.mg-modal__body p {
    margin: 0 0 18px;
}

.mg-modal__body p:last-child {
    margin-bottom: 0;
}

.mg-modal__body h4 {
    margin: 30px 0 12px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.6;
    color: var(--color-text, #171a18);
    padding-inline-start: 14px;
    border-inline-start: 3px solid var(--color-primary, #b85c38);
}

.mg-modal__body ul {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.mg-modal__body li {
    position: relative;
    padding-inline-start: 20px;
    font-size: 14px;
    line-height: 1.95;
}

.mg-modal__body li::before {
    content: "";
    position: absolute;
    top: 0.72em;
    inset-inline-start: 2px;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--color-accent, #d9e84a);
    border: 1.5px solid var(--color-secondary, #24372f);
}

.mg-modal__body strong {
    color: var(--color-text, #171a18);
    font-weight: 800;
}

.mg-modal__body blockquote {
    margin: 22px 0;
    padding: 16px 20px;
    background: var(--color-surface, #f8f8f6);
    border-inline-start: 3px solid var(--color-secondary, #24372f);
    border-radius: 0 var(--radius-md, 12px) var(--radius-md, 12px) 0;
    font-size: 14px;
    line-height: 1.95;
    color: var(--color-secondary, #24372f);
    font-weight: 600;
}

/* ── Related Products ── */
.mg-modal__products {
    margin: 26px 40px 0;
    padding: 20px;
    background: var(--color-surface, #f8f8f6);
    border: 1px solid var(--color-border-light, #f0ede6);
    border-radius: var(--radius-lg, 16px);
}

.mg-modal__products-title {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 800;
    color: var(--color-text, #171a18);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mg-modal__products-title::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--color-primary, #b85c38);
}

.mg-modal__products-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mg-prod {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border-light, #f0ede6);
    border-radius: var(--radius-md, 12px);
    text-decoration: none;
    transition:
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.mg-prod:hover {
    border-color: var(--color-primary-border, #f3d2c3);
    transform: translateX(-2px);
}

.mg-prod__mark {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm, 8px);
    background: var(--color-secondary-soft, #eef3f0);
    color: var(--color-secondary, #24372f);
    font-size: 15px;
    font-weight: 800;
}

.mg-prod:hover .mg-prod__mark {
    background: var(--color-secondary, #24372f);
    color: var(--color-accent, #d9e84a);
}

.mg-prod__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.mg-prod__name {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--color-text, #171a18);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mg-prod__unit {
    font-size: 12px;
    color: var(--color-muted, #5f645c);
}

.mg-prod__go {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary, #b85c38);
}

.mg-prod__go svg {
    width: 12px;
    height: 12px;
}

/* ── Modal Foot ── */
.mg-modal__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 22px 40px 0;
    padding: 18px 0 26px;
    border-top: 1px solid var(--color-border-light, #f0ede6);
}

.mg-modal__shop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: var(--radius-md, 12px);
    background: var(--color-primary, #b85c38);
    color: var(--color-white, #fff);
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(184, 92, 56, 0.22);
    transition:
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.mg-modal__shop svg {
    width: 15px;
    height: 15px;
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.mg-modal__shop:hover {
    background: var(--color-primary-dark, #9a4b2c);
    transform: translateY(-1px);
}

.mg-modal__shop:hover svg {
    transform: translateX(-3px);
}

.mg-modal__dismiss {
    min-height: 44px;
    padding: 10px 18px;
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--color-border, #e8e2d8);
    background: var(--color-white, #fff);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-muted, #5f645c);
    transition:
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.mg-modal__dismiss:hover {
    border-color: var(--color-danger, #c0392b);
    color: var(--color-danger, #c0392b);
}

/* =========================================================
   FAIL-SAFE Reveal
   فقط وقتی JS کلاس .mg-js را اضافه کرد، مخفی‌سازی فعال می‌شود.
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
    .mg.mg-js [data-mg-reveal] {
        opacity: 0;
        transform: translateY(14px);
        transition:
            opacity 540ms var(--ease-out, ease) var(--d, 0ms),
            transform 540ms var(--ease-out, ease) var(--d, 0ms);
    }

    .mg.mg-js [data-mg-reveal].is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1199px) {
    .mg__layout {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 991px) {
    .mg {
        padding: 32px 0 36px;
    }

    .mg__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .mg__layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .mg-modal {
        padding: 20px;
    }

    .mg-modal__sheet {
        max-height: calc(100vh - 40px);
    }

    .mg-modal__info,
    .mg-modal__body {
        padding-inline: 32px;
    }

    .mg-modal__products {
        margin-inline: 32px;
    }

    .mg-modal__foot {
        margin-inline: 32px;
    }
}

@media (max-width: 767px) {
    .mg__container {
        padding-inline: 16px;
    }

    .mg-lead__body {
        padding: 16px 18px 18px;
    }

    .mg-item {
        gap: 12px;
        padding: 10px;
    }

    .mg-item__media {
        width: 78px;
        height: 78px;
    }

    .mg-item__title {
        font-size: 12.5px;
    }

    .mg-item__arrow {
        display: none;
    }

    /* Modal → Bottom Sheet */
    .mg-modal {
        padding: 0;
        align-items: flex-end;
    }

    .mg-modal__sheet {
        max-width: 100%;
        max-height: 94dvh;
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
    }

    .mg-modal.is-open .mg-modal__sheet {
        transform: translateY(0);
    }

    .mg-modal__cover {
        aspect-ratio: 16 / 9;
    }

    .mg-modal__info,
    .mg-modal__body {
        padding-inline: 20px;
    }

    .mg-modal__info {
        padding-top: 20px;
    }

    .mg-modal__body {
        font-size: 14px;
    }

    .mg-modal__products {
        margin: 20px 20px 0;
        padding: 16px;
    }

    .mg-modal__foot {
        margin: 18px 20px 0;
        flex-direction: column-reverse;
        align-items: stretch;
        padding-bottom: 22px;
    }

    .mg-modal__shop,
    .mg-modal__dismiss {
        width: 100%;
        justify-content: center;
    }

    .mg-modal__close {
        top: 10px;
        inset-inline-end: 10px;
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 379px) {
    .mg-lead__title {
        font-size: 16px;
    }

    .mg-item__media {
        width: 68px;
        height: 68px;
    }
}

/* =========================================================
   Reduced Motion
   ========================================================= */

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

    .mg-modal__sheet,
    .mg-modal__progress-bar,
    .mg-lead__media img,
    .mg-item__media img {
        transition: none !important;
    }
}

/* =========================================================
   Accessibility
   ========================================================= */

.mg :focus-visible {
    outline: 2px solid var(--color-primary, #b85c38);
    outline-offset: 2px;
}

.mg-lead:focus-visible,
.mg-item:focus-visible {
    outline: 2px solid var(--color-primary, #b85c38);
    outline-offset: -2px;
}

/* =========================================================
   Print
   ========================================================= */

@media print {

    .mg__all,
    .mg-modal {
        display: none !important;
    }

    .mg-lead,
    .mg-item {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* =========================================================
   ساخت‌یار | FAQ V2
   آکاردئون تمیز + جستجو + فیلتر دسته
   Namespace: .fq-*
   وابستگی: theme.css
   ========================================================= */

.fq {
    background: var(--color-white, #ffffff);
    padding: 40px 0 46px;
}

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

.fq a {
    text-decoration: none;
    color: inherit;
}

.fq button {
    font-family: inherit;
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
}

.fq__container {
    width: 100%;
    max-width: var(--container-max, 1320px);
    margin-inline: auto;
    padding-inline: var(--container-pad, 24px);
}

/* =========================================================
   Head
   ========================================================= */

.fq__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.fq__title {
    margin: 0 0 5px;
    font-size: clamp(19px, 2.4vw, 26px);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--color-text, #171a18);
}

.fq__subtitle {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--color-muted, #5f645c);
    max-width: 62ch;
}

.fq__head-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--color-border, #e8e2d8);
    border-radius: var(--radius-full, 999px);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-secondary, #24372f);
    background: var(--color-white, #fff);
    transition:
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.fq__head-btn svg {
    width: 15px;
    height: 15px;
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.fq__head-btn:hover {
    border-color: var(--color-primary, #b85c38);
    color: var(--color-primary, #b85c38);
}

.fq__head-btn:hover svg {
    transform: translateX(-3px);
}

/* =========================================================
   Toolbar
   ========================================================= */

.fq__toolbar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
    padding: 16px 18px;
    background: var(--color-surface, #f8f8f6);
    border: 1px solid var(--color-border-light, #f0ede6);
    border-radius: var(--radius-lg, 16px);
}

/* Search */
.fq__search {
    position: relative;
}

.fq__search-icon {
    position: absolute;
    top: 50%;
    inset-inline-start: 14px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--color-muted-light, #737869);
    pointer-events: none;
}

.fq__search-icon svg {
    width: 100%;
    height: 100%;
}

.fq__search-input {
    width: 100%;
    min-height: 48px;
    padding: 12px 42px 12px 42px;
    border: 1px solid var(--color-border, #e8e2d8);
    border-radius: var(--radius-md, 12px);
    background: var(--color-white, #fff);
    font-family: inherit;
    font-size: 13.5px;
    color: var(--color-text, #171a18);
    outline: none;
    transition:
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        box-shadow var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.fq__search-input::placeholder {
    color: var(--color-muted-light, #737869);
}

.fq__search-input:focus {
    border-color: var(--color-primary, #b85c38);
    box-shadow: 0 0 0 3px rgba(184, 92, 56, 0.1);
}

/* remove default search decoration in WebKit */
.fq__search-input::-webkit-search-cancel-button,
.fq__search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.fq__clear {
    position: absolute;
    top: 50%;
    inset-inline-end: 10px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: none;
    place-items: center;
    border-radius: 50%;
    color: var(--color-muted, #5f645c);
    transition:
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.fq__clear.is-visible {
    display: grid;
}

.fq__clear svg {
    width: 14px;
    height: 14px;
}

.fq__clear:hover {
    background: var(--color-surface-2, #f2f1ed);
    color: var(--color-danger, #c0392b);
}

/* Filters */
.fq__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fq-pill {
    flex-shrink: 0;
    min-height: 36px;
    padding: 7px 16px;
    border-radius: var(--radius-full, 999px);
    border: 1px solid var(--color-border, #e8e2d8);
    background: var(--color-white, #fff);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-muted, #5f645c);
    transition:
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease),
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.fq-pill:hover {
    border-color: var(--color-secondary, #24372f);
    color: var(--color-secondary, #24372f);
}

.fq-pill.is-active {
    background: var(--color-secondary, #24372f);
    border-color: var(--color-secondary, #24372f);
    color: var(--color-white, #fff);
    font-weight: 700;
}

.fq-pill:focus-visible {
    outline: 2px solid var(--color-primary, #b85c38);
    outline-offset: 2px;
}

/* =========================================================
   List / Accordion
   ========================================================= */

.fq__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fq-item {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border-light, #f0ede6);
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    transition:
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        box-shadow var(--transition-base, 260ms) var(--ease-out, ease);
}

.fq-item:hover {
    border-color: var(--color-border, #e8e2d8);
}

.fq-item.is-open {
    border-color: var(--color-primary-border, #f3d2c3);
    background: var(--color-white, #fff);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(23, 26, 24, 0.06));
}

.fq-item.is-hidden {
    display: none;
}

.fq-item__heading {
    margin: 0;
}

.fq-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    text-align: start;
    color: var(--color-text, #171a18);
    transition:
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.fq-trigger:hover {
    background: var(--color-surface, #f8f8f6);
}

.fq-trigger:focus-visible {
    outline: 2px solid var(--color-primary, #b85c38);
    outline-offset: -2px;
}

.fq-question {
    flex: 1;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.75;
}

.fq-item.is-open .fq-question {
    color: var(--color-primary-dark, #9a4b2c);
}

/* Plus / Minus sign */
.fq-trigger__sign {
    position: relative;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--color-border, #e8e2d8);
    background: var(--color-white, #fff);
    transition:
        background-color var(--transition-base, 260ms) var(--ease-standard, ease),
        border-color var(--transition-base, 260ms) var(--ease-standard, ease);
}

.fq-trigger__sign::before,
.fq-trigger__sign::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1.8px;
    border-radius: 2px;
    background: var(--color-secondary, #24372f);
    transform: translate(-50%, -50%);
    transition:
        background-color var(--transition-base, 260ms) var(--ease-standard, ease),
        transform var(--transition-base, 260ms) var(--ease-out, ease),
        opacity var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.fq-trigger__sign::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.fq-item.is-open .fq-trigger__sign {
    background: var(--color-primary, #b85c38);
    border-color: var(--color-primary, #b85c38);
}

.fq-item.is-open .fq-trigger__sign::before,
.fq-item.is-open .fq-trigger__sign::after {
    background: var(--color-white, #fff);
}

.fq-item.is-open .fq-trigger__sign::after {
    transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
    opacity: 0;
}

/* Answer */
.fq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 320ms var(--ease-standard, ease);
}

.fq-item.is-open .fq-answer {
    grid-template-rows: 1fr;
}

.fq-answer__inner {
    overflow: hidden;
    min-height: 0;
}

.fq-answer__content {
    padding: 0 20px 20px;
}

.fq-answer__text {
    margin-inline-start: 48px;
    max-width: 78ch;
}

.fq-answer__text p {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 2;
    color: var(--color-muted, #5f645c);
}

.fq-answer__text p:last-child {
    margin-bottom: 0;
}

.fq-answer__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--color-primary, #b85c38);
    transition:
        gap var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.fq-answer__link svg {
    width: 15px;
    height: 15px;
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.fq-answer__link:hover {
    gap: 10px;
    color: var(--color-primary-dark, #9a4b2c);
}

.fq-answer__link:hover svg {
    transform: translateX(-3px);
}

/* =========================================================
   Empty State
   ========================================================= */

.fq__empty {
    text-align: center;
    padding: 42px 20px;
    margin-top: 10px;
    background: var(--color-surface, #f8f8f6);
    border: 1px dashed var(--color-border, #e8e2d8);
    border-radius: var(--radius-lg, 16px);
}

.fq__empty svg {
    width: 44px;
    height: 44px;
    color: var(--color-muted-light, #737869);
    margin-bottom: 12px;
}

.fq__empty h3 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 800;
    color: var(--color-text, #171a18);
}

.fq__empty p {
    margin: 0 0 16px;
    font-size: 12.5px;
    color: var(--color-muted, #5f645c);
}

.fq__empty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 18px;
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--color-border, #e8e2d8);
    background: var(--color-white, #fff);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-secondary, #24372f);
    transition:
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.fq__empty-btn:hover {
    border-color: var(--color-primary, #b85c38);
    color: var(--color-primary, #b85c38);
}

/* =========================================================
   Foot CTA
   ========================================================= */

.fq__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
    padding: 22px 26px;
    background: var(--color-secondary, #24372f);
    border-radius: var(--radius-lg, 16px);
    position: relative;
    overflow: hidden;
}

.fq__foot::before {
    content: "";
    position: absolute;
    top: -50px;
    inset-inline-end: -30px;
    width: 190px;
    height: 190px;
    background: radial-gradient(circle, rgba(217, 232, 74, 0.13) 0%, transparent 68%);
    pointer-events: none;
}

.fq__foot-text {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.fq__foot-title {
    margin: 0 0 5px;
    font-size: 15.5px;
    font-weight: 800;
    color: var(--color-white, #fff);
    line-height: 1.45;
}

.fq__foot-desc {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.64);
    max-width: 54ch;
}

.fq__foot-actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.fq__foot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: var(--radius-md, 12px);
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
    transition:
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease),
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.fq__foot-btn svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.fq__foot-btn--primary {
    background: var(--color-accent, #d9e84a);
    color: var(--color-secondary, #24372f);
    direction: ltr;
}

.fq__foot-btn--primary:hover {
    background: var(--color-white, #fff);
    transform: translateY(-1px);
}

.fq__foot-btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--color-white, #fff);
}

.fq__foot-btn--ghost svg {
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.fq__foot-btn--ghost:hover {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
}

.fq__foot-btn--ghost:hover svg {
    transform: translateX(-3px);
}

/* =========================================================
   FAIL-SAFE Reveal
   فقط وقتی JS کلاس .fq-js را اضافه کرد، مخفی‌سازی فعال می‌شود.
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
    .fq.fq-js [data-fq-reveal] {
        opacity: 0;
        transform: translateY(14px);
        transition:
            opacity 540ms var(--ease-out, ease) var(--d, 0ms),
            transform 540ms var(--ease-out, ease) var(--d, 0ms);
    }

    .fq.fq-js [data-fq-reveal].is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 991px) {
    .fq {
        padding: 32px 0 38px;
    }

    .fq__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .fq__foot {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 22px;
        gap: 16px;
    }

    .fq__foot-actions {
        width: 100%;
    }

    .fq__foot-btn {
        flex: 1;
    }
}

@media (max-width: 767px) {
    .fq__container {
        padding-inline: 16px;
    }

    .fq__toolbar {
        padding: 14px;
        gap: 12px;
    }

    .fq__filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .fq__filters::-webkit-scrollbar {
        display: none;
    }

    .fq-trigger {
        padding: 16px;
        gap: 12px;
    }

    .fq-question {
        font-size: 13.5px;
        line-height: 1.7;
    }

    .fq-trigger__sign {
        width: 30px;
        height: 30px;
    }

    .fq-trigger__sign::before,
    .fq-trigger__sign::after {
        width: 11px;
        height: 1.6px;
    }

    .fq-answer__content {
        padding: 0 16px 16px;
    }

    .fq-answer__text {
        margin-inline-start: 0;
    }

    .fq-answer__text p {
        font-size: 13px;
        line-height: 1.95;
    }

    .fq__foot {
        padding: 18px 18px;
    }

    .fq__foot-actions {
        flex-direction: column;
    }

    .fq__foot-btn {
        width: 100%;
    }
}

@media (max-width: 479px) {
    .fq__title {
        font-size: 18px;
    }

    .fq__subtitle {
        font-size: 12.5px;
    }

    .fq__search-input {
        min-height: 46px;
        font-size: 13px;
    }

    .fq-pill {
        min-height: 34px;
        padding: 6px 14px;
        font-size: 12px;
    }
}

/* =========================================================
   Accessibility & Print
   ========================================================= */

.fq :focus-visible {
    outline: 2px solid var(--color-primary, #b85c38);
    outline-offset: 2px;
}

@media print {

    .fq__toolbar,
    .fq__foot,
    .fq__head-btn {
        display: none !important;
    }

    .fq-item {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    .fq-answer {
        grid-template-rows: 1fr !important;
    }
}

/* =========================================================
   ساخت‌یار | Final CTA V2
   پنل پایانی تمیز، حرفه‌ای و تبدیل‌محور
   Namespace: .fcta-*
   وابستگی: theme.css
   ========================================================= */

.fcta {
    background: var(--color-white, #ffffff);
    padding: 44px 0 58px;
}

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

.fcta a {
    text-decoration: none;
    color: inherit;
}

.fcta ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fcta__container {
    width: 100%;
    max-width: var(--container-max, 1320px);
    margin-inline: auto;
    padding-inline: var(--container-pad, 24px);
}

/* =========================================================
   Panel
   ========================================================= */

.fcta__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr);
    gap: 28px;
    align-items: stretch;
    padding: 38px 40px;
    background: var(--color-secondary, #24372f);
    border-radius: var(--radius-2xl, 28px);
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 24px 60px rgba(23, 26, 24, 0.16),
        0 8px 20px rgba(23, 26, 24, 0.08);
}

/* لهجه لیمویی خیلی ملایم */
.fcta__glow {
    position: absolute;
    top: -170px;
    inset-inline-end: -120px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle,
            rgba(217, 232, 74, 0.18) 0%,
            rgba(217, 232, 74, 0.08) 38%,
            transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* خط نازک تزئینی خیلی کم */
.fcta__panel::after {
    content: "";
    position: absolute;
    inset-inline-start: 40px;
    inset-inline-end: 40px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(217, 232, 74, 0.28) 35%,
            rgba(255, 255, 255, 0.12) 65%,
            transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.fcta__main,
.fcta__card {
    position: relative;
    z-index: 2;
    min-width: 0;
}

/* =========================================================
   Main Content
   ========================================================= */

.fcta__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    color: var(--color-white, #fff);
}

.fcta__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    min-height: 34px;
    padding: 7px 14px;
    border-radius: var(--radius-full, 999px);
    background: rgba(217, 232, 74, 0.13);
    border: 1px solid rgba(217, 232, 74, 0.26);
    color: var(--color-accent, #d9e84a);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.fcta__badge svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.fcta__title {
    margin: 0;
    max-width: 18ch;
    font-size: clamp(24px, 3.4vw, 42px);
    font-weight: 900;
    line-height: 1.32;
    letter-spacing: -0.025em;
    color: var(--color-white, #fff);
}

.fcta__title span {
    color: var(--color-accent, #d9e84a);
}

.fcta__text {
    margin: 0;
    max-width: 62ch;
    font-size: clamp(13.5px, 1.45vw, 15.5px);
    line-height: 2;
    color: rgba(255, 255, 255, 0.72);
}

/* =========================================================
   Actions
   ========================================================= */

.fcta__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.fcta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 13px 24px;
    border-radius: var(--radius-md, 12px);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    transition:
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease),
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        transform var(--transition-fast, 160ms) var(--ease-standard, ease),
        box-shadow var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.fcta__btn svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.fcta__btn:focus-visible {
    outline: 2px solid var(--color-accent, #d9e84a);
    outline-offset: 3px;
}

.fcta__btn--primary {
    background: var(--color-accent, #d9e84a);
    color: var(--color-secondary, #24372f);
    box-shadow: 0 12px 28px rgba(217, 232, 74, 0.22);
}

.fcta__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(255, 255, 255, 0.16);
}

.fcta__btn--primary:hover svg {
    transform: translateX(-3px);
}

.fcta__btn--secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--color-white, #fff);
}

.fcta__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.38);
}

.fcta__btn--phone {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--color-white, #fff);
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: 13.5px;
    direction: ltr;
}

.fcta__btn--phone svg {
    color: var(--color-accent, #d9e84a);
}

.fcta__btn--phone:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
}

/* =========================================================
   Trust Row
   ========================================================= */

.fcta__trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px 22px;
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.fcta__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.fcta__trust-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-accent, #d9e84a);
}

/* =========================================================
   Contact Card
   ========================================================= */

.fcta__card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 24px;
    border-radius: var(--radius-xl, 22px);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--color-white, #fff);
}

.fcta__card-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.56);
}

.fcta__phone {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono, 'Vazirmatn', Tahoma, sans-serif);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--color-accent, #d9e84a);
    direction: ltr;
    unicode-bidi: isolate;
    transition:
        color var(--transition-fast, 160ms) var(--ease-standard, ease),
        transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.fcta__phone:hover {
    color: var(--color-white, #fff);
    transform: translateY(-1px);
}

.fcta__phone:focus-visible {
    outline: 2px solid var(--color-accent, #d9e84a);
    outline-offset: 4px;
    border-radius: var(--radius-xs, 6px);
}

.fcta__card-meta {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fcta__card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
}

.fcta__card-meta-item svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--color-accent, #d9e84a);
}

.fcta__card-note {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.95;
    color: rgba(255, 255, 255, 0.66);
}

.fcta__card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: auto;
    min-height: 48px;
    padding: 12px 18px;
    border-radius: var(--radius-md, 12px);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--color-white, #fff);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    transition:
        background-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        border-color var(--transition-fast, 160ms) var(--ease-standard, ease),
        color var(--transition-fast, 160ms) var(--ease-standard, ease),
        transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.fcta__card-btn svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast, 160ms) var(--ease-standard, ease);
}

.fcta__card-btn:hover {
    background: var(--color-white, #fff);
    border-color: var(--color-white, #fff);
    color: var(--color-secondary, #24372f);
    transform: translateY(-1px);
}

.fcta__card-btn:hover svg {
    transform: translateX(-3px);
}

.fcta__card-btn:focus-visible {
    outline: 2px solid var(--color-accent, #d9e84a);
    outline-offset: 3px;
}

/* =========================================================
   FAIL-SAFE Reveal
   فقط وقتی JS کلاس .fcta-js را اضافه کرد، مخفی‌سازی فعال می‌شود.
   اگر JS خراب/لودنشدنی باشد → پنل دیده می‌شود.
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
    .fcta.fcta-js [data-fcta-reveal] {
        opacity: 0;
        transform: translateY(18px);
        transition:
            opacity 620ms var(--ease-out, ease),
            transform 620ms var(--ease-out, ease);
    }

    .fcta.fcta-js [data-fcta-reveal].is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   Responsive — Laptop
   ========================================================= */

@media (max-width: 1199px) {
    .fcta__panel {
        grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.9fr);
        gap: 24px;
        padding: 34px 34px;
    }

    .fcta__title {
        max-width: 20ch;
    }
}

/* =========================================================
   Responsive — Tablet
   ========================================================= */

@media (max-width: 991px) {
    .fcta {
        padding: 36px 0 46px;
    }

    .fcta__panel {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 30px 28px;
        border-radius: var(--radius-xl, 22px);
    }

    .fcta__main {
        gap: 16px;
    }

    .fcta__title {
        max-width: 24ch;
        font-size: clamp(24px, 5vw, 34px);
    }

    .fcta__text {
        max-width: 100%;
    }

    .fcta__card {
        padding: 22px 20px;
    }

    .fcta__panel::after {
        inset-inline-start: 28px;
        inset-inline-end: 28px;
    }
}

/* =========================================================
   Responsive — Mobile
   ========================================================= */

@media (max-width: 767px) {
    .fcta__container {
        padding-inline: 16px;
    }

    .fcta__panel {
        padding: 24px 20px;
        gap: 18px;
        border-radius: var(--radius-lg, 16px);
    }

    .fcta__badge {
        font-size: 12px;
        padding: 6px 12px;
    }

    .fcta__badge svg {
        width: 14px;
        height: 14px;
    }

    .fcta__title {
        font-size: clamp(22px, 7vw, 29px);
        line-height: 1.38;
        max-width: 100%;
    }

    .fcta__text {
        font-size: 13px;
        line-height: 1.9;
    }

    .fcta__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .fcta__btn {
        width: 100%;
        min-height: 50px;
        font-size: 13.5px;
    }

    .fcta__trust {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding-top: 14px;
    }

    .fcta__trust-item {
        font-size: 12px;
    }

    .fcta__card {
        padding: 20px 18px;
        border-radius: var(--radius-lg, 16px);
    }

    .fcta__phone {
        font-size: 22px;
    }

    .fcta__card-meta-item,
    .fcta__card-note {
        font-size: 12px;
    }

    .fcta__card-btn {
        width: 100%;
    }

    .fcta__panel::after {
        inset-inline-start: 20px;
        inset-inline-end: 20px;
    }

    .fcta__glow {
        top: -130px;
        inset-inline-end: -90px;
        width: 320px;
        height: 320px;
    }
}

@media (max-width: 479px) {
    .fcta__panel {
        padding: 22px 16px;
    }

    .fcta__title {
        font-size: 22px;
    }

    .fcta__btn {
        padding-inline: 16px;
    }

    .fcta__card {
        padding: 18px 16px;
    }
}

/* =========================================================
   Accessibility
   ========================================================= */

.fcta :focus-visible {
    outline: 2px solid var(--color-accent, #d9e84a);
    outline-offset: 3px;
}

/* =========================================================
   Reduced Motion
   ========================================================= */

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

    .fcta__btn,
    .fcta__phone,
    .fcta__card-btn,
    .fcta__btn svg,
    .fcta__card-btn svg {
        transition: none !important;
    }
}

/* =========================================================
   Print
   ========================================================= */

@media print {
    .fcta {
        padding: 24px 0;
    }

    .fcta__panel {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    .fcta__glow,
    .fcta__panel::after,
    .fcta__actions,
    .fcta__card-btn {
        display: none !important;
    }

    .fcta__title,
    .fcta__text,
    .fcta__trust-item,
    .fcta__card-label,
    .fcta__phone,
    .fcta__card-meta-item,
    .fcta__card-note {
        color: #000 !important;
    }
}

.pf-section,
.campaign-section,
.bs-section,
.co-section,
.project-supply-section,
.why-us-section,
.magazine-section,
.faq-section {
    position: relative;
    overflow: hidden;
}

/* ── موبایل: پنل‌های تصویری تزئینی دو بخش تأمین پروژه و چرا ما مخفی می‌شن تا صفحه کوتاه‌تر بشه ── */
@media (max-width: 767px) {
    .psp__visual,
    .wyu__visual {
        display: none;
    }
}