/* ===================================================
   لایه‌ی ریسپانسیو — بعد از بقیه‌ی استایل‌ها لود می‌شه
   نقاط شکست: ۱۰۲۴ آی‌پد افقی · ۸۶۰ آی‌پد عمودی · ۵۸۰ موبایل
=================================================== */

/* ===== پایه‌ی لمسی =====
   دستگاه لمسی هدف انگشت می‌خواد، نه نشانگر ماوس */


/* ===================================================
   آی‌پد افقی — فقط لمسی، تا لپ‌تاپ و دسکتاپ دست‌نخورده بمونن
=================================================== */


/* ===================================================
   آی‌پد عمودی — منو می‌ره توی کشو
=================================================== */


/* بالای ۸۶۰ همبرگر لازم نیست */


/* ===================================================
   موبایل
=================================================== */


/* ===================================================
   پنل ادمین
=================================================== */




/* ===================================================
   چاپ — فاکتور سفارش تمیز دربیاد
=================================================== */


/* ===== ناحیه‌ی لمس نقطه‌ها و آیکون‌های گرد =====
   خود نقطه کوچیک می‌مونه ولی ناحیه‌ی قابل لمس بزرگ می‌شه */


/* چیپ دسته‌بندی صفحه محصول هم قابل لمس باشه */


/* ===================================================
   طراحی موبایل — نوار پایین، کشوی حساب، کارت‌های جمع‌وجور
=================================================== */

/* نوار پایین فقط موبایل */
.bottom-nav { display: none; }



/* ===================================================
   کارت‌های جمع‌وجور موبایل — دوتایی، نه غول‌پیکر
=================================================== */


/* گوشی‌های خیلی باریک */


/* کشو نباید از صفحه بزنه بیرون — داخل خودش اسکرول شه */


/* ===================================================
   پاس دوم موبایل — جمع‌وجورتر، بدون همبرگر
=================================================== */




/* ===================================================
   صفحه اصلی موبایل — وسط‌چین و فشرده
=================================================== */


/* ===================================================
   پنل ادمین — کشوی کناری و فشرده‌سازی
=================================================== */

@media (pointer: coarse) {
    .site-header .main-menu a,
    .footer-col ul li a,
    .crumbs a,
    .product-tag,
    .account-tab {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .site-header .icon-btn { width: 46px; height: 46px; }
    .site-header .icon-btn img { width: 20px; height: 20px; }

    /* ناحیه‌ی لمس نقطه‌ها بزرگ‌تر از خودشون */
    .banner-dots, .cat-dots { padding: 10px 0; }

    /* دکمه‌های تعداد کوچیک می‌مونن ولی ناحیه‌ی لمسشون بزرگ‌تره
       (::after پایین‌تر) — قبلاً ۴۶×۴۸ بودن و سبد رو غول‌پیکر می‌کردن. */
    .qty-btn { width: 30px; height: 30px; font-size: 15px; }
    .qty-box input { height: 40px; }

    .comment-like,
    .comment-reply-btn { min-height: 40px; }

    /* روی لمس، افکت hover گیر می‌کنه */
    .product-card:hover,
    .shop-cat-card:hover { transform: none; }
    /* ناحیه‌ی لمس بزرگ‌تر از خود نقطه، بدون دست‌زدن به شکلش.
       قبلاً این کار با padding + background-clip انجام می‌شد؛ ولی
       border-radius روی جعبه‌ی padding حساب می‌شه نه محتوا، برای همین
       نقطه‌ها مستطیل درمی‌اومدن. */
    .banner-dot,
    .cat-dot,
    .qty-btn,
    .cart-remove-btn { position: relative; }

    /* دکمه‌های ریز سبد هم ناحیه‌ی لمس استاندارد می‌گیرن بدون اینکه
       خودشون بزرگ بشن */
    .qty-btn::after,
    .cart-remove-btn::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 44px;
        height: 44px;
    }

    .banner-dot::after,
    .cat-dot::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 32px;
        height: 40px;
    }

    .banner-dots,
    .cat-dots { gap: 7px; padding: 6px 0; margin-top: 4px; }

    .social-dot { width: 44px; height: 44px; }
    .social-dot img { width: 20px; height: 20px; }
    .product-cat-chip {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        padding: 6px 15px;
    }
}

@media (max-width: 1024px) and (pointer: coarse) {
    .site-header,
    .site-footer,
    .banner-hero,
    .about-box,
    .deals-strip-wrap,
    .checkout-page,
    .product-page,
    .section { padding-left: 22px; padding-right: 22px; }

    .banner-stage { aspect-ratio: 16 / 7; max-height: 420px; }
    .banner-title { font-size: clamp(24px, 4vw, 30px); }

    .product-main { gap: 28px; }
    .detail-layout { grid-template-columns: 260px 1fr; }
}

@media (max-width: 900px) {
    .admin-layout { flex-direction: column; }

    /* سایدبار می‌شه یه نوار افقی، نه ستون تمام‌ارتفاع */
    .admin-sidebar {
        width: 100%;
        padding: 12px 14px;
        border-left: none;
        border-bottom: 1px solid rgba(255, 243, 225, 0.1);
        position: sticky;
        top: 0;
        z-index: 60;
    }

    .admin-logo-link { margin-bottom: 10px; }
    .admin-logo-link .admin-logo { font-size: 19px; }

    .admin-nav {
        flex-direction: row;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .admin-nav::-webkit-scrollbar { display: none; }

    .admin-nav a {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 9px 14px;
        min-height: 40px;
    }

    .admin-nav-back { display: none; }

    .admin-content { padding: 16px 14px; }
    .admin-header-row { flex-wrap: wrap; gap: 8px; }
    .admin-header-actions { margin-right: 0; width: 100%; }
    .admin-search form { width: 100%; }
    .admin-search input[type="text"] { min-width: 0; flex-grow: 1; }
    .suggest-list { right: 0; left: 0; }

    /* جدول‌ها به‌جای شکستن، افقی اسکرول شن */
    .dash-table { display: block; overflow-x: auto; white-space: nowrap; }

    .tile-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 9px; }
    .tile { min-height: 128px; padding: 10px 11px; }
    .banner-row { flex-wrap: wrap; }
    .banner-row-thumb { width: 84px; height: 44px; }
    .chat-thread { max-height: 340px; }
    .chat-bubble { max-width: 88%; }
    /* دکمه‌ی باز کردن کشو */
    .admin-drawer-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        border: 1px solid rgba(255, 243, 225, 0.2);
        border-radius: 11px;
        background-color: rgba(255, 243, 225, 0.07);
        color: var(--color-cream);
        font-size: 18px;
        cursor: pointer;
    }

    /* سایدبار می‌شه کشوی کشویی از راست */
    .admin-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 232px;
        max-width: 82vw;
        z-index: 300;
        padding: 18px 14px;
        overflow-y: auto;
        border-bottom: none;
        border-left: 1px solid rgba(255, 243, 225, 0.12);
        transform: translateX(100%);
        transition: transform 0.26s cubic-bezier(.2,.8,.3,1);
    }

    .admin-sidebar.is-open { transform: none; }

    .admin-nav { flex-direction: column; overflow: visible; }
    .admin-nav a { justify-content: space-between; min-height: 42px; }
    .admin-nav-back { display: block; }

    /* پرده‌ی پشت کشو */
    .admin-scrim {
        position: fixed;
        inset: 0;
        z-index: 290;
        background-color: rgba(0, 0, 0, 0.55);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.24s ease, visibility 0.24s;
    }

    .admin-scrim.is-open { opacity: 1; visibility: visible; }

    /* نوار بالای پنل */
    .admin-topbar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        background-color: #171415;
        border-bottom: 1px solid rgba(255, 243, 225, 0.1);
        position: sticky;
        top: 0;
        z-index: 80;
    }

    .admin-topbar .admin-logo { font-size: 17px; margin: 0; }
    .admin-topbar-title { font-size: 13px; color: var(--ink-dim); margin-right: auto; }

    /* ----- فشرده‌سازی محتوای پنل ----- */
    .admin-content { padding: 13px 12px; }
    .admin-title { font-size: 16px; }
    .admin-count { font-size: 11.5px; }
    .admin-header-row { gap: 7px; margin-bottom: 12px; }

    .dash-card { padding: 12px 13px; border-radius: 11px; margin-bottom: 10px; }
    .dash-card h3 { font-size: 13px; margin-bottom: 8px; }

    .admin-stat-card { padding: 10px 11px; }
    .admin-stat-num { font-size: 17px; }
    .admin-stat-label { font-size: 11px; }
    .admin-stat-icon { font-size: 13px; }
    .admin-stat-sub { font-size: 10px; }

    .admin-btn { font-size: 12px; padding: 7px 14px; }
    .admin-btn-small { font-size: 11px; padding: 6px 11px; }

    .status-chip { font-size: 11px; padding: 4px 11px; }
    .tile { min-height: 118px; padding: 9px 10px; }
    .tile-title { font-size: 12.5px; }
    .tile-sub, .tile-meta { font-size: 10px; }
    .tile-chip { font-size: 9.5px; padding: 1px 7px; }

    .prod-field input, .prod-field select, .prod-field textarea { font-size: 16px; padding: 7px 10px; }
    .prod-label { font-size: 10.5px; }
    .dash-table { font-size: 12px; }
    .comment-admin-body, .idea-desc { font-size: 12px; padding: 9px 10px; }

    /* ===== پاس سوم: داشبورد برای گوشی، نه مانیتور ===== */
    .admin-stats,
    .admin-stats.admin-stats-3,
    .admin-stats-4 { grid-template-columns: repeat(3, 1fr); gap: 7px; }

    .admin-stat-card {
        padding: 9px 6px;
        border-radius: 10px;
        text-align: center;
        align-items: center;
        min-width: 0;
    }

    .admin-stat-icon { font-size: 12px; margin-bottom: 1px; }

    .admin-stat-num {
        font-size: 13px;
        line-height: 1.4;
        /* «۹۰۰,۰۰۰ تومان» توی یک‌سومِ عرض گوشی جا نمی‌شه */
        overflow-wrap: anywhere;
    }

    .admin-stat-label { font-size: 9.5px; line-height: 1.5; }
    .admin-stat-sub { font-size: 8.5px; margin-top: 2px; line-height: 1.5; }

    .today-orders-note { padding: 9px 11px; font-size: 11px; border-radius: 10px; }
    .today-orders-arrow { font-size: 13px; }

    .admin-header-sub { font-size: 11.5px; }
    .chart-card-header { gap: 8px; }
    .chart-tabs { gap: 4px; }
    .chart-tab { font-size: 10.5px; padding: 5px 9px; }
    .chart-summary { gap: 8px; }
    .chart-summary-label { font-size: 9.5px; }
    .chart-summary-value { font-size: 12px; }
    .chart-wrap { height: 150px; }
    .dash-list-title { font-size: 12px; }
    .dash-list-sub { font-size: 10px; }
    .empty-note { font-size: 11px; padding: 12px; }

    /* آیتم‌های گرید پیش‌فرض min-width: auto دارن، یعنی زیر عرض
       min-content خودشون جمع نمی‌شن و کارت رو از ستون می‌زنن بیرون
       (فرم بنرها ۱۷ پیکسل سرریز می‌داد). */
    .cat-layout > *,
    .dash-grid > *,
    .dash-grid-2 > *,
    .prod-form-grid > *,
    .admin-stats > * { min-width: 0; }

    .prod-field input[type="file"] { max-width: 100%; }

    /* چهار کارت توی سه ستون یعنی یکی تنها می‌مونه — همون سلول خالی
       فوتر. صفحه‌ی سفارش‌ها چهار کارت داره، داشبورد سه تا. */
    .admin-stats:has(> .admin-stat-card:nth-child(4)) {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 860px) {
    /* سه ستون لینک همیشه کنار هم؛ برند و خبرنامه تمام‌عرض.
       با دو ستون، ستون سوم تنها می‌موند و کنارش سلول خالی می‌افتاد
       — همون «جای خالی» فوتر. تا ۸۶۰ اعمال می‌شه که تبلت رو هم بگیره. */
    .footer-top { grid-template-columns: repeat(3, 1fr); }

    .footer-brand,
    .footer-connect { grid-column: 1 / -1; }


    .site-header .slogan { display: none; }

    /* دکمه‌ی همبرگری */
    .nav-toggle {
        order: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 0 10px;
        border: 1px solid rgba(255, 243, 225, 0.2);
        border-radius: 12px;
        background-color: rgba(255, 243, 225, 0.06);
        cursor: pointer;
    }

    .nav-toggle span {
        display: block;
        height: 2px;
        border-radius: 2px;
        background-color: var(--color-cream);
        transition: transform 0.25s ease, opacity 0.2s ease;
    }

    .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
    .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* منو: کشوی کشویی از بالا */
    .site-header .main-menu {
        order: 5;
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        left: 0;
        z-index: 130;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background-color: var(--surface-2);
        border: 1px solid rgba(255, 243, 225, 0.18);
        border-radius: 16px;
        padding: 8px;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    }

    .site-header .main-menu.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .site-header .main-menu a {
        padding: 13px 14px;
        border-radius: 10px;
        border-bottom: 1px solid rgba(255, 243, 225, 0.08);
    }

    .site-header .main-menu a:last-child { border-bottom: none; }
    .site-header .main-menu a:hover { background-color: rgba(255, 243, 225, 0.08); }
    /* زیرخط متحرک روی کشو معنی نداره */
    .site-header .main-menu a::after { display: none; }

    .site-header .header-actions { gap: 8px; }
    .profile-name { display: none; }   /* فقط آواتار بمونه */
    .profile-toggle { padding: 5px; }

    /* چیدمان‌های دوستونه یک‌ستونه می‌شن */
    .product-main,
    .checkout-grid,
    .detail-layout,
    .detail-two-col,
    .cat-layout,
    .prod-form-grid { grid-template-columns: 1fr; }

    /* اسلایدها روی هر عرضی روی‌هم می‌مونن — قبلاً اینجا جریانی می‌شدن
       و ارتفاع بنر به متن هر اسلاید وابسته بود. */
    .banner-stage { aspect-ratio: 16 / 9; max-height: none; }
    .banner-slide { padding: 22px 20px; }

    /* متن از پایین میاد بالا، پس پرده هم از پایین پررنگ می‌شه */
    .banner-slide-veil {
        background: linear-gradient(0deg, rgba(35,31,32,0.9) 0%, rgba(35,31,32,0.45) 45%, rgba(35,31,32,0.1) 100%);
    }
    .banner-slide { align-items: flex-end; }
    .banner-body { max-width: none; padding-bottom: 12px; }

    .about-box-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
    .about-box-cta { margin-right: 0; }
    .bottom-nav {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 200;
        display: flex;
        background-color: #221d1e;
        border-top: 1px solid rgba(255, 243, 225, 0.12);
        box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.45);
        /* روی آیفون نوار خانه پایین صفحه‌ست */
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* دکمه‌ی پشتیبانی باید بالای نوار پایین بشینه، نه روش.
       نوار ۶۱ پیکسله و روی آیفون ارتفاع safe-area هم بهش اضافه می‌شه. */
    .support-fab {
        bottom: calc(73px + env(safe-area-inset-bottom, 0px));
        left: 14px;
        height: 46px;
    }

    .support-fab-icon { flex-basis: 46px; width: 46px; height: 46px; }
    .support-fab-icon svg { width: 21px; height: 21px; }

    /* روی لمس هاوری در کار نیست، پس دایره‌ی خالی می‌مونه */
    .support-fab-label { display: none; }
    .support-fab:hover { padding-left: 0; transform: none; }

    /* پنل گفتگو تمام‌عرض، بالای نوار پایین */
    .support-panel {
        left: 10px;
        right: 10px;
        width: auto;
        bottom: calc(127px + env(safe-area-inset-bottom, 0px));
        max-height: calc(100vh - 200px);
        border-radius: 14px;
    }

    .support-topics { max-height: 76px; }

    .bnav-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 9px 2px 8px 2px;
        text-decoration: none;
        color: var(--ink-dim);
        font-size: 10.5px;
        transition: color 0.18s ease;
        position: relative;
    }

    .bnav-icon {
        position: relative;
        font-size: 19px;
        line-height: 1;
    }

    .bnav-label { line-height: 1.4; }

    .bnav-item.is-on { color: var(--c-amber); }

    /* خط نازک بالای تب فعال */
    .bnav-item.is-on::before {
        content: "";
        position: absolute;
        top: 0;
        right: 22%;
        left: 22%;
        height: 3px;
        border-radius: 0 0 4px 4px;
        background: linear-gradient(90deg, var(--c-amber), var(--c-tangerine));
    }

    .bnav-badge {
        position: absolute;
        top: -6px;
        left: -10px;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--c-tangerine), var(--c-hot));
        color: #fff;
        font-size: 9.5px;
        line-height: 17px;
        text-align: center;
    }

    /* محتوا پشت نوار پایین گم نشه */
    body { padding-bottom: 66px; }
    .site-footer { margin-bottom: 8px; }

    /* آیکون‌های تکراری هدر روی موبایل لازم نیستن — پایین هستن */

    /* پروفایل هم توی کشوئه */
    .site-header .profile-dropdown { display: none; }
    .site-header .main-menu {
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    /* هر فیلد متنی زیر ۱۶px باعث می‌شه سافاری آیفون موقع فوکوس
       صفحه رو زوم کنه و دیگه برنگردونه. یک‌جا برای همه‌ی فرم‌ها. */
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input:not([type]),
    textarea,
    select { font-size: 16px !important; }

    /* همبرگر و کشو حذف — ناوبری پایین صفحه‌ست */
    .nav-toggle,
    .site-header .main-menu { display: none !important; }

    /* هدر: فقط لوگو، جستجو و یه میان‌بر */
    .site-header {
        padding: 8px 14px;
        margin: 8px auto;
        gap: 10px;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .site-header .logo { font-size: 24px; }
    .logo-object { font-size: 8px; letter-spacing: 2.5px; text-indent: 2.5px; margin-top: 2px; }

    .site-header .header-actions { order: 3; gap: 8px; }
    .site-header .icon-row { gap: 6px; }


    /* ===== پاس سوم: هدر جمع‌وجور ===== */
    .site-header { padding: 7px 12px; margin: 6px auto; gap: 8px; }
    .site-header .logo { font-size: 22px; }
    .logo-object { font-size: 7.5px; letter-spacing: 2px; text-indent: 2px; }
    .site-header .slogan { display: none; }

    /* سبد توی نوار پایینه، پس اینجا تکراریه. علاقه‌مندی برعکس:
       از نوار پایین اومده بیرون تا جا برای «ایده تو» باز شه. */
    /* سبد توی نوار پایینه؛ پیش‌نمایش هاوری هم روی لمس معنی نداره */
    .site-header .icon-row .cart-wrap { display: none; }
    .site-header .icon-row { gap: 5px; }
    .site-header .icon-btn { width: 36px; height: 36px; }
    .site-header .icon-btn img { width: 17px; height: 17px; }

    /* روی موبایل منوی اصلی و منوی پروفایل پنهانن؛ بدون این دکمه
       هیچ راهی از فروشگاه به پنل مدیریت نمی‌موند. */
    .header-admin-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        color: #231f20;
        text-decoration: none;
        background: linear-gradient(135deg, var(--c-amber), var(--c-tangerine));
        border-color: transparent;
    }

    /* ===== پاس سوم: «ایده تو» وسط نوار، برجسته ===== */
    .bnav-cta { position: relative; }

    .bnav-cta .bnav-icon {
        width: 42px;
        height: 42px;
        margin-top: -18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: #231f20;
        border-radius: 50%;
        border: 3px solid #221d1e;
        background: linear-gradient(135deg, var(--c-amber), var(--c-tangerine));
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    }

    .bnav-cta .bnav-label { margin-top: 1px; }
    .bnav-cta.is-on { color: var(--c-amber); }
    .bnav-cta.is-on::before { display: none; }

    /* ===== پاس چهارم: هر ردیف سه تا، از تبلت به پایین =====
       پایه‌ی گرید auto-fit با سقف ۲۵۰px بود، یعنی روی تبلت فقط دو
       ستون جا می‌شد و دو طرفش خالی می‌موند. */
    .products-grid,
    .products-grid-3,
    .shop-cat-grid,
    .cat-rotator-page {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: stretch;
        gap: 12px;
    }
}

@media (max-width: 580px) {
    :root {
        --fs-xl: 21px;
        --fs-2xl: 26px;
        --radius: 14px;
        --radius-lg: 18px;
    }

    .site-header,
    .site-footer,
    .banner-hero,
    .about-box,
    .deals-strip-wrap,
    .checkout-page,
    .product-page,
    .section { padding-left: 14px; padding-right: 14px; }

    .section { margin-bottom: 46px; }

    /* نوار ویژگی‌ها: چهار دایره کنار هم، اسم زیرشون.
       توضیح هر ویژگی توی یک‌چهارم عرض گوشی جا نمی‌شه و فقط ردیف رو
       بلند می‌کرد، پس فقط عنوان می‌مونه. */
    .hero-features {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        padding-top: 16px;
        margin-top: 18px;
        /* خط‌چین ۲ پیکسلی روی گوشی کلفت و شلوغ بود */
        border-top: 1px solid rgba(255, 243, 225, 0.12);
    }

    .hero-feature {
        flex-direction: column;
        align-items: center;
        gap: 6px;
        text-align: center;
        min-width: 0;
    }

    .hero-feature-icon { width: 46px; height: 46px; font-size: 19px; border-width: 2px; }
    .hero-feature-text { min-width: 0; }
    .hero-feature-title { font-size: 9.5px; line-height: 1.5; margin-bottom: 0; }
    .hero-feature-desc { display: none; }




    /* نوار تخفیف */

    /* صفحه محصول */
    .product-main-image { min-height: 240px; }
    .product-main-image img { max-height: 320px; }
    .product-title { font-size: 22px; }
    .product-price-now { font-size: 22px; }
    .product-thumb { width: 56px; height: 56px; }
    .product-buy-row { gap: 8px; }
    .product-add-btn { flex-grow: 1; text-align: center; padding: 14px 18px; }
    .product-rail .product-card { flex-basis: 165px; }

    /* نظرات */
    .comment-photos img { width: 54px; height: 54px; }
    .comment-form, .comment-login-note { padding: 12px 13px; }

    /* سبد و تسویه */
    .cart-row { flex-wrap: wrap; gap: 10px; }
    .cart-row-info { flex-basis: 100%; order: 2; }
    .ck-items li { gap: 9px; }
    .ck-item-thumb { width: 44px; height: 44px; }

    /* فوتر */
    .footer-top { gap: 20px 14px; padding: 22px 16px; }
    .footer-bottom { padding: 13px 16px; flex-direction: column; gap: 6px; text-align: center; }

    /* لایت‌باکس و ۳۶۰ */
    .lightbox-nav { width: 36px; height: 36px; font-size: 20px; }
    .spin-open { bottom: 8px; left: 8px; font-size: 11px; padding: 7px 12px; }

    /* تب‌های حساب کاربری افقی اسکرول شن */
    .account-tabs {
        display: flex;
        overflow-x: auto;
        gap: 6px;
        scrollbar-width: none;
    }
    .account-tabs::-webkit-scrollbar { display: none; }
    .account-tab { white-space: nowrap; flex-shrink: 0; }


    /* نوار تخفیف: کارت‌های ریز کنار هم که افقی اسکرول شن */
    .deals-strip { flex-direction: column; }
    .deals-percent { font-size: 22px; }
    .deals-title { font-size: 13px; }
    .deals-more { margin: 0; font-size: 10.5px; }
    .deal-name { font-size: 10.5px; min-height: 34px; }
    .deal-off { font-size: 9.5px; padding: 1px 6px; }
    .deal-was { font-size: 9.5px; }
    .deal-now { font-size: 11.5px; }

    /* ریل محصولات مرتبط */
    .product-rail .product-card { flex-basis: 140px; }

    /* عنوان بخش‌ها جمع‌تر */
    .section-head { margin-bottom: 20px; }
    .section-title { font-size: 19px; }
    .section-subtitle { font-size: 12.5px; margin-top: 6px; }

    /* بنر */
    .banner-slide { padding: 22px 16px; }
    .banner-title { font-size: 20px; line-height: 1.6; }
    .banner-text { font-size: 12.5px; line-height: 1.9; margin-bottom: 16px; }
    .banner-kicker { font-size: 11px; padding: 4px 12px; }
    .banner-cta { font-size: 13px; padding: 11px 24px; }


    /* ===== بنر: متن کوچیک‌تر و متعادل ===== */
    .banner-slide { padding: 18px 15px; }
    .banner-kicker { font-size: 10px; padding: 3px 10px; margin-bottom: 9px; }
    .banner-title { font-size: 16px; line-height: 1.7; margin-bottom: 7px; }
    .banner-text {
        font-size: 11.5px;
        line-height: 1.9;
        margin-bottom: 13px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .banner-cta { font-size: 12px; padding: 9px 20px; }
    .banner-stage { border-width: 1px; }

    /* ===== نوار تخفیف ===== */
    .deals-percent { font-size: 19px; }
    .deals-title { font-size: 12px; }
    .deal-name { font-size: 10px; min-height: 30px; }

    .hero { margin-bottom: 34px; }

    /* ===== باکس درباره ===== */
    .about-box-inner { padding: 16px 15px; gap: 12px; }
    .about-box-title { font-size: 15px; }
    .about-box-text { font-size: 12px; line-height: 1.9; }

    /* ===================================================
       فوتر — بدون فضای خالی
    =================================================== */
    .footer-top { gap: 16px 8px; padding: 18px 15px; }

    .footer-about { font-size: 11.5px; line-height: 1.9; margin: 8px 0 10px 0; max-width: none; }
    .site-footer .logo { font-size: 26px; }
    .site-footer .enamad { width: 52px; }

    .footer-col-title { font-size: 12.5px; margin-bottom: 8px; }
    .footer-col ul { gap: 2px; }
    .footer-col ul li a { font-size: 11.5px; min-height: 34px; }
    .footer-bottom { font-size: 10.5px; padding: 11px 15px; }

    .footer-follow-note { font-size: 10.5px; line-height: 1.9; margin-bottom: 9px; }
    .footer-follow-btn { font-size: 11px; padding: 8px 13px; gap: 6px; }
    .footer-follow-btn img { width: 15px; height: 15px; }
    .footer-socials { margin-top: 12px; }

    /* ===================================================
       صفحه‌های حساب کاربری — فشرده
    =================================================== */
    .account-wrap { padding: 0 14px; }
    .account-card { padding: 15px 14px; border-radius: 14px; }
    .support-title { font-size: 17px !important; margin-bottom: 13px !important; }

    .account-tabs { gap: 5px; margin-bottom: 12px; }
    .account-tab { font-size: 11.5px; padding: 8px 12px; min-height: 38px; }

    .account-field label,
    .account-form label { font-size: 11.5px; margin-bottom: 4px; }

    /* ۱۶px لازمه: زیر اون، سافاری آیفون موقع فوکوس خودش زوم می‌کنه.
       جمع‌وجوری رو از پدینگ می‌گیریم نه از اندازه‌ی فونت. */
    .account-form input,
    .account-form textarea,
    .account-form select,
    .ticket-form input,
    .ticket-form textarea,
    .ticket-form select {
        font-size: 16px;
        padding: 8px 11px;
        border-radius: 9px;
    }

    .account-field { margin-bottom: 11px; }
    .auth-btn, .account-save-btn { font-size: 13px; padding: 11px 20px; }

    /* ===================================================
       سبد خرید — ردیف فشرده و خوانا
    =================================================== */
    .cart-row {
        position: relative;
        display: grid;
        grid-template-columns: 48px 1fr auto;
        grid-template-areas:
            "thumb info  info"
            "thumb qty   total";
        gap: 4px 9px;
        align-items: center;
        padding: 8px 9px;
        border-radius: 10px;
        border-width: 1px;
    }

    .cart-list { gap: 8px; }

    .cart-row-thumb { grid-area: thumb; width: 48px; height: 48px; border-radius: 8px; }
    .cart-row-info  { grid-area: info; min-width: 0; }
    .cart-row-qty   { grid-area: qty; justify-self: start; gap: 6px; }
    .cart-row-subtotal { grid-area: total; justify-self: end; font-size: 12.5px; min-width: 0; }

    .cart-row-name { font-size: 12px; line-height: 1.4; }
    .cart-row-price { font-size: 10px; margin-top: 0; line-height: 1.6; }
    .cart-row-was { font-size: 9.5px; }
    .cart-row-opts { gap: 3px; margin-top: 2px; }
    .cart-row-opts span { font-size: 9px; padding: 0 5px; line-height: 1.7; }
    .cart-row-warn { font-size: 9.5px; line-height: 1.6; }
    .qty-value { font-size: 12.5px; min-width: 14px; }
    .cart-row-qty { gap: 5px; }
    .qty-btn { width: 28px; height: 28px; }

    /* ✕ حذف روی گوشه، تا ردیف بلندتر نشه */
    .cart-remove-btn { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-width: 1px; }

    .cart-total-row { font-size: 12.5px; padding: 10px 0; }
    .cart-total-num { font-size: 15px; }

    /* ===== پاس سوم: نوار تخفیف ===== */
    .deals-strip-wrap { padding: 0 14px; margin-bottom: 34px; }
    .deals-strip { border-radius: 14px; box-shadow: 4px 4px 0 rgba(109, 0, 26, 0.3); }

    .deals-side {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 13px;
    }

    /* روی موبایل یه «٪» تنها فقط شبیه کاراکتر جاافتاده‌ست */
    .deals-percent { display: none; }
    .deals-title { font-size: 13px; text-align: right; }
    .deals-more { margin: 0; font-size: 10.5px; padding: 3px 10px; }

    .deals-track {
        gap: 0;
        padding: 4px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        /* با یکی دو تخفیف، کارت‌ها وسط می‌شینن نه چسبیده به لبه.
           safe یعنی وقتی سرریز شد به ابتدا برگرده و کارت اول گم نشه. */
        justify-content: center;
        justify-content: safe center;
    }

    .deals-track::-webkit-scrollbar { height: 0; }

    .deal-card {
        flex: 0 0 118px;
        scroll-snap-align: center;
        gap: 4px;
        padding: 9px 7px;
    }

    .deal-thumb { width: 76px; height: 76px; border-radius: 9px; }
    .deal-name { font-size: 10.5px; min-height: 32px; }
    .deal-prices { gap: 5px; }
    .deal-off { font-size: 9.5px; padding: 1px 6px; }
    .deal-was { font-size: 9.5px; }
    .deal-now { font-size: 12px; }

    /* ===== پاس سوم: کارت محصول تخت‌تر و خواناتر ===== */
    .product-card {
        border-width: 1px;
        border-radius: 12px;
        box-shadow: none;
        overflow: hidden;
    }

    /* زمینه‌ی روشن پشت عکس، مثل کارت‌های تخفیف — روی تم تیره
       محصول این‌طوری جدا می‌شه به‌جای اینکه توی کارت حل بشه. */
    .product-card-thumb {
        border-radius: 0;
        background-color: #fff;
    }



    .shop-cat-card { border-width: 1px; box-shadow: none; border-radius: 12px; }


    /* ===== پاس چهارم: اندازه‌ها برای ردیف سه‌تایی ===== */
    /* با سه ستون، هر کارت حدود ۱۰۵ پیکسله — همه چیز باید بره تو همون */
    .product-card-thumb { height: 82px; }
    .product-card-body { padding: 6px 6px 7px 6px; }
    .product-card-name { font-size: 9.5px; line-height: 1.5; min-height: 28px; margin-bottom: 2px; }
    .product-card-price { flex-direction: column; align-items: flex-start; gap: 0; }
    .product-card-price .now { font-size: 10.5px; }
    .product-card-price .was { font-size: 8.5px; }
    .product-card-off,
    .product-card-soldout { font-size: 8.5px; padding: 1px 5px; border-radius: 5px; top: 4px; left: 4px; }

    .shop-cat-thumb { height: 66px; }
    .shop-cat-body { padding: 6px 6px 7px 6px; }
    .shop-cat-title { font-size: 9.5px; line-height: 1.5; }
    .shop-cat-desc { display: none; }
    .shop-cat-overlay-name { font-size: 10px; }
    .shop-cat-overlay-count { font-size: 8.5px; }

    /* شش خونه‌ی کد تایید باید توی عرض گوشی جا شن */
    .otp-inputs { gap: 6px; }
    .otp-inputs input { flex: 0 1 42px; width: 42px; height: 50px; font-size: 20px; }

    .wish-remove { width: 22px; height: 22px; font-size: 10px; }
    .wish-remove-form { top: 5px; left: 5px; }

    .cat-dots { margin-top: 12px; gap: 4px; }
    .cat-dot { width: 14px; height: 2.5px; }
    .cat-dot.is-active { width: 26px; }

    /* ===== پاس چهارم: بنر کوتاه و تصویرمحور ===== */
    .banner-hero { padding: 0 14px; margin-bottom: 22px; }
    .banner-stage { border-radius: 12px; border-width: 1px; }

    .banner-slide { padding: 13px 14px; min-height: 0; }
    .banner-kicker { font-size: 9px; padding: 2px 8px; margin-bottom: 5px; }
    .banner-title { font-size: 14px; line-height: 1.6; margin-bottom: 4px; }

    /* متن بنر روی گوشی جا نداره؛ تیتر و دکمه کارش رو می‌کنن */
    .banner-text { display: none; }

    .banner-cta { font-size: 11px; padding: 7px 16px; box-shadow: 0 3px 0 rgba(0,0,0,0.35); }
    .banner-body { padding-bottom: 10px; }

    .banner-dots { bottom: 7px; gap: 4px; }
    .banner-dot { width: 14px; height: 2.5px; }
    .banner-dot.is-active { width: 26px; }

    /* ===== پاس چهارم: ریل تخفیف که کشیده می‌شه ===== */
    .deals-track {
        /* کم که باشن وسط می‌شینن، زیاد که شدن safe به ابتدا برمی‌گرده
           و کارت‌ها از لبه رد می‌شن تا معلوم باشه ادامه داره */
        justify-content: center;
        justify-content: safe center;
        padding: 8px 6px;
        scroll-padding-right: 6px;
        overscroll-behavior-x: contain;
    }

    .deal-card {
        flex: 0 0 106px;
        scroll-snap-align: start;
        border-left-color: rgba(28, 26, 24, 0.08);
    }

    .deal-thumb { width: 68px; height: 68px; }
    .deal-name { font-size: 9.5px; min-height: 28px; }
    .deal-off { font-size: 9px; padding: 1px 5px; }
    .deal-was { font-size: 9px; }
    .deal-now { font-size: 11px; }

    /* موقع کشیدن با موس، متن انتخاب نشه */
    .deals-track.is-dragging,
    .product-rail.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
    .deals-track.is-dragging a,
    .product-rail.is-dragging a { pointer-events: none; }

    .product-rail { gap: 7px; }
    .product-rail .product-card { flex-basis: 106px; }

    /* ===== پاس چهارم: حساب کاربری ریزتر ===== */
    .account-wrap { padding: 0 12px; }
    .account-card { padding: 12px 11px; border-radius: 12px; }
    .support-title { font-size: 15px !important; margin-bottom: 10px !important; }

    .account-tabs { gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
    .account-tab { font-size: 10.5px; padding: 6px 9px; min-height: 32px; border-radius: 8px; }

    .account-field { margin-bottom: 9px; }
    .account-field label,
    .account-form label { font-size: 10.5px; margin-bottom: 3px; }
    .account-form input,
    .account-form textarea,
    .account-form select { padding: 7px 10px; border-radius: 8px; }

    .auth-btn, .account-save-btn { font-size: 12px; padding: 9px 16px; }
    .account-pass-link { font-size: 10.5px; }

    /* کارت سفارش‌ها */
    .order-card { padding: 11px 12px; border-radius: 11px; }
    .order-card-head { font-size: 11px; gap: 6px; }
    .order-num { font-size: 12px; }
    .order-date { font-size: 10px; }
    .order-line { font-size: 10.5px; line-height: 1.75; }
    .order-total { font-size: 12px; }
    .order-status { font-size: 10px; padding: 3px 9px; }

    .support-empty { font-size: 11.5px; padding: 14px; }
    .ticket-row { padding: 10px 11px; }
    .ticket-subject { font-size: 11.5px; }
    .ticket-meta { font-size: 9.5px; }
}

@media (max-width: 520px) {
    .prod-admin-grid,
    .cat-admin-grid { grid-template-columns: 1fr 1fr; }
    .tile-grid { grid-template-columns: 1fr; }
    .prod-row, .prod-row-3 { grid-template-columns: 1fr; }
    .option-row { grid-template-columns: 1fr; }
    .option-del { width: 100%; }

    .admin-stat-num { font-size: 12px; }
    .admin-stat-label { font-size: 9px; }
    .admin-stat-sub { font-size: 8px; }
}

@media (max-width: 340px) {
    .bnav-label { font-size: 9.5px; }

    /* سه ستون می‌مونه، فقط فشرده‌تر */
    .products-grid,
    .products-grid-3,
    .shop-cat-grid,
    .cat-rotator-page { gap: 5px; }
    .product-card-thumb { height: 72px; }
    .product-card-name { font-size: 9px; }
    .shop-cat-thumb { height: 58px; }

    .hero-feature-icon { width: 40px; height: 40px; font-size: 17px; }
    .hero-feature-title { font-size: 9px; }

    .otp-inputs { gap: 4px; }
    .otp-inputs input { flex: 0 1 36px; width: 36px; height: 44px; font-size: 17px; }
}

@media (min-width: 861px) {
    .nav-toggle { display: none; }
    .site-header .main-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}

@media (min-width: 901px) {
    .admin-drawer-btn,
    .admin-topbar,
    .admin-scrim { display: none; }
}

@media print {
    .site-header, .site-footer, .admin-sidebar,
    .banner-hero, .deals-strip-wrap, .nav-toggle { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .dash-card, .order-card { border-color: #999 !important; background: #fff !important; }
}

/* ===== جدول و فرمِ مشترک پنل روی گوشی ===== */
/* کامپوننت adm-* بعد از نوشته شدن این فایل اضافه شد، پس قواعد موبایلش
   اینجاست نه داخل بلوک بالا. */
@media (max-width: 900px) {
    .adm-panel-head { padding: 12px 14px; }
    .adm-panel-body { padding: 13px 14px; }
    .adm-panel-title { font-size: 13px; }

    /* جدول‌های پنل به‌جای شکستن، افقی اسکرول می‌شن */
    .adm-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .admin-table { min-width: 560px; }
    .admin-table th,
    .admin-table td { padding: 10px 11px; }
    .tbl-sub { max-width: 180px; }

    /* دکمه‌های ته ردیف روی لمس بزرگ‌تر باشن */
    .tbl-act { width: 34px; height: 34px; }

    .adm-submit { padding: 13px; }
}

@media (max-width: 560px) {
    .admin-table { min-width: 480px; font-size: 12px; }
    .adm-panel { border-radius: 13px; }
    .adm-field input[type="text"],
    .adm-field input[type="number"],
    .adm-field select,
    .adm-field textarea { font-size: 16px; }   /* زیر ۱۶px سافاری خودش زوم می‌کنه */
}