/* ==========================================================================
   Book Store — استایل اختصاصی (هدر، کارت محصول، صفحه فروشگاه/فیلتر، فوتر)
   روی قالب اصلی سوار می‌شود و آن را بازنویسی نمی‌کند.
   ========================================================================== */

/* --------------------------------------------------------------------------
   پالت‌های رنگی سایت
   سه تم تعریف شده و با data-theme روی <html> عوض می‌شوند (partials/theme_switcher.html).
   هر رنگی که در این فایل استفاده می‌شود از همین توکن‌ها می‌آید، پس با عوض شدن تم
   کل سایت یکدست تغییر می‌کند.
   -------------------------------------------------------------------------- */

/* تم ۱ — «کاغذ و جوهر»: کرم/طلایی با سبز کهنه (پیش‌فرض) */
:root,
:root[data-theme="paper"] {
    --bs-brand: #2f6b4f;
    --bs-brand-dark: #23513c;
    --bs-brand-soft: rgba(47, 107, 79, .09);
    --bs-brand-rgb: 47, 107, 79;
    --bs-sale: #c08a2e;
    --bs-sale-light: #d9a441;
    --bs-sale-rgb: 192, 138, 46;
    --bs-ink: #3a2f26;
    --bs-muted: #8a7a6b;
    --bs-line: #e7ddcc;
    --bs-surface: #fffdf8;
    --bs-canvas: #f7f2e8;
    --bs-footer: #2b241d;
    --bs-danger: #b5452f;
    --bs-shelf: #a3906f;
    --bs-brand-on-dark: #64b98f;
    --bs-shelf-edge: #7b6a4d;
}

/* تم ۲ — «سبز یکدست»: همان سبز قبلی سایت، فقط تمیز */
:root[data-theme="emerald"] {
    --bs-brand: #0da487;
    --bs-brand-dark: #0a8069;
    --bs-brand-soft: rgba(13, 164, 135, .08);
    --bs-brand-rgb: 13, 164, 135;
    --bs-sale: #f0475f;
    --bs-sale-light: #ff6b7f;
    --bs-sale-rgb: 240, 71, 95;
    --bs-ink: #1d2a32;
    --bs-muted: #7d8b95;
    --bs-line: #e9edf0;
    --bs-surface: #ffffff;
    --bs-canvas: #f6f8f9;
    --bs-footer: #1f2a30;
    --bs-danger: #e23d55;
    --bs-shelf: #a9b3b7;
    --bs-brand-on-dark: #2fd4ad;
    --bs-shelf-edge: #7d878b;
}

/* تم ۳ — «زرشکی و کرم»: کلاسیک و ادبی */
:root[data-theme="burgundy"] {
    --bs-brand: #8c2f39;
    --bs-brand-dark: #6e2430;
    --bs-brand-soft: rgba(140, 47, 57, .08);
    --bs-brand-rgb: 140, 47, 57;
    --bs-sale: #b07a2c;
    --bs-sale-light: #c9963c;
    --bs-sale-rgb: 176, 122, 44;
    --bs-ink: #2e2422;
    --bs-muted: #857069;
    --bs-line: #eadfd6;
    --bs-surface: #ffffff;
    --bs-canvas: #faf5f0;
    --bs-footer: #2a1f1e;
    --bs-danger: #a33b2a;
    --bs-shelf: #a8887e;
    --bs-brand-on-dark: #d9697a;
    --bs-shelf-edge: #7d6058;
}

/* تم ۴ — «نیلی و مس»: سرمه‌ای عمیق با تأکید مسی */
:root[data-theme="indigo"] {
    --bs-brand: #33488f;
    --bs-brand-dark: #26356b;
    --bs-brand-soft: rgba(51, 72, 143, .09);
    --bs-brand-rgb: 51, 72, 143;
    --bs-sale: #c2703a;
    --bs-sale-light: #d98a4f;
    --bs-sale-rgb: 194, 112, 58;
    --bs-ink: #232838;
    --bs-muted: #767d92;
    --bs-line: #e4e7f0;
    --bs-surface: #ffffff;
    --bs-canvas: #f5f6fb;
    --bs-footer: #1d2233;
    --bs-danger: #d1495b;
    --bs-shelf: #9aa0b8;
    --bs-brand-on-dark: #7f94e0;
    --bs-shelf-edge: #6f758c;
}

/* تم ۵ — «شیشه‌ای»: سطح‌های نیمه‌شفاف با بلور پس‌زمینه */
:root[data-theme="glass"] {
    --bs-brand: #2f7d8c;
    --bs-brand-dark: #23616d;
    --bs-brand-soft: rgba(47, 125, 140, .12);
    --bs-brand-rgb: 47, 125, 140;
    --bs-sale: #c6714e;
    --bs-sale-light: #dd8a66;
    --bs-sale-rgb: 198, 113, 78;
    --bs-ink: #21333a;
    --bs-muted: #6d8189;
    --bs-line: rgba(255, 255, 255, .70);
    --bs-surface: rgba(255, 255, 255, .38);
    --bs-canvas: #e8f0f2;
    --bs-footer: #1b2b31;
    --bs-danger: #c04a3e;
    --bs-shelf: #9fb4ba;
    --bs-brand-on-dark: #5fc4d4;
    --bs-shelf-edge: #728a91;
    --bs-glass: 1;
}

:root {
    --bs-radius: 16px;
    --bs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .04);
    --bs-shadow-md: 0 8px 24px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .05);
}

/* --------------------------------------------------------------------------
   حالت شب — روی هر تمی قابل فعال شدن است (data-mode="dark" روی <html>).
   فقط رنگ‌های سطح و متن عوض می‌شوند؛ رنگ برند هر تم روشن‌تر می‌شود تا روی
   پس‌زمینه‌ی تیره خوانا بماند.
   -------------------------------------------------------------------------- */

:root[data-mode="dark"] {
    --bs-ink: #e8e6e1;
    --bs-muted: #9aa0a6;
    --bs-line: #2f3338;
    --bs-surface: #1c1f23;
    --bs-canvas: #14171a;
    --bs-footer: #0f1113;
    --bs-shelf: #3a3f45;
    --bs-shelf-edge: #26292d;
    --bs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .28);
    --bs-shadow-md: 0 10px 28px rgba(0, 0, 0, .50), 0 2px 8px rgba(0, 0, 0, .35);
}

:root[data-mode="dark"][data-theme="paper"] {
    --bs-brand: #64b98f;
    --bs-brand-dark: #4d9b75;
    --bs-brand-rgb: 100, 185, 143;
    --bs-brand-soft: rgba(100, 185, 143, .14);
    --bs-sale: #e0ad55;
    --bs-sale-light: #edc074;
    --bs-sale-rgb: 224, 173, 85;
    --bs-canvas: #17150f;
    --bs-surface: #201d16;
    --bs-line: #34302a;
    --bs-ink: #efe7d8;
}

:root[data-mode="dark"][data-theme="emerald"] {
    --bs-brand: #2fd4ad;
    --bs-brand-dark: #21b092;
    --bs-brand-rgb: 47, 212, 173;
    --bs-brand-soft: rgba(47, 212, 173, .14);
    --bs-sale: #ff6b80;
    --bs-sale-light: #ff8b9c;
    --bs-sale-rgb: 255, 107, 128;
}

:root[data-mode="dark"][data-theme="burgundy"] {
    --bs-brand: #d9697a;
    --bs-brand-dark: #bd4f61;
    --bs-brand-rgb: 217, 105, 122;
    --bs-brand-soft: rgba(217, 105, 122, .14);
    --bs-sale: #d9a85c;
    --bs-sale-light: #e6bd7e;
    --bs-sale-rgb: 217, 168, 92;
    --bs-canvas: #171113;
    --bs-surface: #21181a;
    --bs-line: #35292c;
    --bs-ink: #f0e5e6;
}

:root[data-mode="dark"][data-theme="indigo"] {
    --bs-brand: #7f94e0;
    --bs-brand-dark: #6377c4;
    --bs-brand-rgb: 127, 148, 224;
    --bs-brand-soft: rgba(127, 148, 224, .14);
    --bs-sale: #e0975f;
    --bs-sale-light: #eaac7c;
    --bs-sale-rgb: 224, 151, 95;
}

:root[data-mode="dark"][data-theme="glass"] {
    --bs-brand: #5fc4d4;
    --bs-brand-dark: #45a5b5;
    --bs-brand-rgb: 95, 196, 212;
    --bs-brand-soft: rgba(95, 196, 212, .16);
    --bs-sale: #e39270;
    --bs-sale-light: #eda88b;
    --bs-sale-rgb: 227, 146, 112;
    --bs-canvas: #101a1f;
    --bs-surface: rgba(32, 45, 52, .42);
    --bs-line: rgba(255, 255, 255, .16);
    --bs-ink: #e4eef1;
    --bs-muted: #93a7ad;
}

/* --------------------------------------------------------------------------
   پل تم — قالب اصلی رنگ‌هایش را هاردکد کرده بود:
     • body.theme-color-6 مقدار --theme-color را #5f84a0 (آبی) می‌گذاشت
     • .btn-animation گرادیان قرمز #ff4f4f داشت با افکت اسلاید قرمز
     • ده‌ها سلکتور دیگر #ff7272 / #ff4f4f را مستقیم نوشته بودند
   اینجا همه به توکن‌های تم وصل می‌شوند تا هیچ رنگ بیگانه‌ای نماند.
   -------------------------------------------------------------------------- */

/* متغیرهای خود قالب را به تم وصل می‌کنیم — این یک خط ده‌ها کامپوننت را درست می‌کند */
body,
body[class*="theme-color-"] {
    --theme-color: var(--bs-brand) !important;
    --theme-color-rgb: var(--bs-brand-rgb) !important;
    --theme-color1: var(--bs-brand-dark) !important;
    --theme-color1-rgb: var(--bs-brand-rgb) !important;
    --theme-color2: linear-gradient(90.56deg, var(--bs-brand-dark) 8.46%, var(--bs-brand) 62.97%) !important;
    background-color: var(--bs-canvas);
    color: var(--bs-ink);
}

/* --- دکمه‌ی اصلی: افکت اسلاید قالب حفظ شده، فقط رنگش تم می‌گیرد --- */
.btn-animation,
.btn-solid,
.newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box .sub-btn,
.product-section .right-box-contain .buy-now-button button {
    position: relative;
    z-index: 0;
    overflow: hidden;
    border: 0;
    background: linear-gradient(90deg, var(--bs-brand-dark) 0%, var(--bs-brand) 100%) !important;
    color: #fff !important;
    transition: box-shadow .22s ease, transform .22s ease;
}

.btn-animation::after,
.btn-solid::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block !important;
    background: linear-gradient(90deg, var(--bs-brand) 0%, var(--bs-brand-dark) 100%) !important;
    opacity: 0;
    transition: opacity .28s ease;
}

.btn-animation::before,
.btn-solid::before {
    display: none !important;
}

.btn-animation:hover,
.btn-solid:hover {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--bs-brand-rgb), .32);
}

.btn-animation:hover::after,
.btn-solid:hover::after {
    opacity: 1;
}

/* --- رنگ‌های جامانده‌ی قرمز/آبی قالب --- */
.theme-color,
.home-contain .home-detail h6 span { color: var(--bs-brand) !important; }

.bg-theme,
.theme-bg-color,
.title-flex .timing-box .timing,
.title-flex-2 .timing-box .timing,
.blog-box .blog-detail.blog-contain,
header .navbar-nav .nav-item .new-pages .new-dropdown,
.new-nav-item .new-dropdown,
.offer-box .offer-contain .offer-timing .time ul li .counter,
.menu-label,
.menu-label::before,
.product-label-group .product-label-tag {
    background-color: var(--bs-brand) !important;
}

/* نشان تعداد سبد خرید در هدر */
header .top-nav .navbar-top .rightside-box .right-side-menu .right-side .header-wishlist span {
    background-color: var(--bs-sale) !important;
}

/* قرمز هشدار هم با تم هماهنگ می‌شود (نه قرمز جیغ قالب) */
.text-danger,
.product-table tbody tr td.edit-delete .feather.delete,
.order-table tbody tr td label.danger {
    color: var(--bs-danger) !important;
}

/* --- منوی پایین موبایل (آبی قالب بود) --- */
.mobile-menu {
    background: var(--bs-surface) !important;
    border-top: 1px solid var(--bs-line);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .07);
}

.mobile-menu ul li a { color: var(--bs-muted) !important; }
.mobile-menu ul li.active a,
.mobile-menu ul li a:hover { color: var(--bs-brand) !important; }

/* --- فرم‌ها: حلقه‌ی فوکوس تم‌دار در کل سایت --- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--bs-brand) !important;
    box-shadow: 0 0 0 3px var(--bs-brand-soft) !important;
}

.form-check-input:checked {
    background-color: var(--bs-brand) !important;
    border-color: var(--bs-brand) !important;
}

a { color: inherit; }
a:hover { color: var(--bs-brand); }

/* --------------------------------------------------------------------------
   تم شیشه‌ای — سطح‌های نیمه‌شفاف با بلور پس‌زمینه
   -------------------------------------------------------------------------- */

:root[data-theme="glass"] body {
    background-image:
        radial-gradient(circle at 12% 18%, rgba(47, 125, 140, .20), transparent 42%),
        radial-gradient(circle at 88% 12%, rgba(198, 113, 78, .16), transparent 40%),
        radial-gradient(circle at 60% 88%, rgba(47, 125, 140, .14), transparent 45%);
    background-attachment: fixed;
}

:root[data-theme="glass"][data-mode="dark"] body {
    background-image:
        radial-gradient(circle at 12% 18%, rgba(95, 196, 212, .18), transparent 42%),
        radial-gradient(circle at 88% 12%, rgba(227, 146, 112, .14), transparent 40%),
        radial-gradient(circle at 60% 88%, rgba(95, 196, 212, .12), transparent 45%);
}

:root[data-theme="glass"] .product-box,
:root[data-theme="glass"] .book-product-box,
:root[data-theme="glass"] .value-card,
:root[data-theme="glass"] .contact-card,
:root[data-theme="glass"] .contact-form-box,
:root[data-theme="glass"] .static-page__card,
:root[data-theme="glass"] .summery-box,
:root[data-theme="glass"] .address-card,
:root[data-theme="glass"] .shop-section .left-box .shop-left-sidebar,
:root[data-theme="glass"] .shop-section .top-filter-menu,
:root[data-theme="glass"] .rightside-box .onhover-div,
:root[data-theme="glass"] .modal .modal-content,
:root[data-theme="glass"] .bs-toast,
:root[data-theme="glass"] .theme-switch__panel,
:root[data-theme="glass"] .theme-switch__toggle {
    background-color: var(--bs-surface) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(20px) saturate(155%);
    backdrop-filter: blur(20px) saturate(155%);
    border: 1px solid var(--bs-line) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .10),
                inset 0 1px 0 rgba(255, 255, 255, .45) !important;
}

/* سطح‌های دیگری که باید شیشه‌ای شوند */
:root[data-theme="glass"] .co-step,
:root[data-theme="glass"] .co-card,
:root[data-theme="glass"] .empty-state,
:root[data-theme="glass"] .summery-box .summery-header,
:root[data-theme="glass"] .summery-box .summery-contain,
:root[data-theme="glass"] .cart-section table,
:root[data-theme="glass"] #checkoutTable table,
:root[data-theme="glass"] .faq-accordion .accordion-item,
:root[data-theme="glass"] .stats-band,
:root[data-theme="glass"] .about-figure,
:root[data-theme="glass"] .section-link,
:root[data-theme="glass"] .quick-price,
:root[data-theme="glass"] .social-pills a,
:root[data-theme="glass"] .btn-ghost,
:root[data-theme="glass"] .swiper-nav,
:root[data-theme="glass"] .pwa-install,
:root[data-theme="glass"] .mobile-menu,
:root[data-theme="glass"] header .offcanvas-collapse {
    background-color: var(--bs-surface) !important;
    -webkit-backdrop-filter: blur(20px) saturate(155%);
    backdrop-filter: blur(20px) saturate(155%);
    border-color: var(--bs-line) !important;
}

/* هدر شیشه‌ای باید روی محتوا شناور بماند */
:root[data-theme="glass"] .top-nav.top-header {
    box-shadow: 0 4px 30px rgba(0, 0, 0, .08);
}

/* --------------------------------------------------------------------------
   حالت شب — سطح‌های روشنِ جامانده‌ی قالب بازنویسی می‌شوند
   -------------------------------------------------------------------------- */

:root[data-mode="dark"] .product-box,
:root[data-mode="dark"] .book-product-box,
:root[data-mode="dark"] .value-card,
:root[data-mode="dark"] .contact-card,
:root[data-mode="dark"] .contact-form-box,
:root[data-mode="dark"] .static-page__card,
:root[data-mode="dark"] .summery-box,
:root[data-mode="dark"] .address-card,
:root[data-mode="dark"] .shop-section .left-box .shop-left-sidebar,
:root[data-mode="dark"] .shop-section .top-filter-menu,
:root[data-mode="dark"] .top-nav.top-header,
:root[data-mode="dark"] .rightside-box .onhover-div,
:root[data-mode="dark"] .modal .modal-content,
:root[data-mode="dark"] .bs-toast,
:root[data-mode="dark"] .quick-price,
:root[data-mode="dark"] .social-pills a,
:root[data-mode="dark"] .section-link,
:root[data-mode="dark"] .theme-switch__panel,
:root[data-mode="dark"] .theme-switch__toggle {
    background-color: var(--bs-surface);
    border-color: var(--bs-line);
    color: var(--bs-ink);
}

:root[data-mode="dark"] .modal .modal-header,
:root[data-mode="dark"] .modal .modal-footer,
:root[data-mode="dark"] .summery-box .summery-header,
:root[data-mode="dark"] .shop-section .top-filter-menu .form-select,
:root[data-mode="dark"] .contact-form-box .form-control,
:root[data-mode="dark"] .modal .modal-body .form-control,
:root[data-mode="dark"] .modal .modal-body textarea,
:root[data-mode="dark"] .shop-section input[name="min_price"],
:root[data-mode="dark"] .shop-section input[name="max_price"],
:root[data-mode="dark"] .shop-section .search-box .form-control,
:root[data-mode="dark"] .rightside-box .right-side-menu .search-box,
:root[data-mode="dark"] .header-badge .header-wishlist,
:root[data-mode="dark"] .empty-state,
:root[data-mode="dark"] .btn-ghost,
:root[data-mode="dark"] .onhover-div .price-box,
:root[data-mode="dark"] .cart-items-card,
:root[data-mode="dark"] #checkoutTable thead th {
    background-color: var(--bs-canvas);
    border-color: var(--bs-line);
    color: var(--bs-ink);
}

:root[data-mode="dark"] .breadcrumb-section,
:root[data-mode="dark"] .breadcrumb-box {
    background: linear-gradient(180deg, var(--bs-surface) 0%, var(--bs-canvas) 100%);
}

:root[data-mode="dark"] .product-box .product-image,
:root[data-mode="dark"] .book-product-box .product-image {
    background: transparent;
}

:root[data-mode="dark"] .about-figure__placeholder {
    background: linear-gradient(140deg, var(--bs-brand-soft) 0%, var(--bs-canvas) 100%);
}

:root[data-mode="dark"] .cta-band .btn-animation {
    background: var(--bs-surface) !important;
    color: var(--bs-brand) !important;
}

/* --------------------------------------------------------------------------
   حال‌وهوای سنتی — هم‌خانواده با قاب تزئینی لوگو
   -------------------------------------------------------------------------- */

/* نوار تزئینی زیر عنوان صفحه‌ها (breadcrumb) */
.breadcrumb-section,
.breadcrumb-box {
    position: relative;
    background: linear-gradient(180deg, var(--bs-surface) 0%, var(--bs-canvas) 100%);
    border-bottom: 1px solid var(--bs-line);
}

.breadcrumb-section::after,
.breadcrumb-box::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 3px;
    background-image:
        linear-gradient(90deg, transparent 0 8px, rgba(var(--bs-brand-rgb), .30) 8px 10px, transparent 10px 18px);
    background-size: 18px 3px;
    background-repeat: repeat-x;
}

/* ==========================================================================
   اسلایدرها (Swiper) — جایگزین slick
   ========================================================================== */

/* بنر بالای صفحه */
.banner-swiper {
    border-radius: 0;
    overflow: hidden;
}

.banner-swiper__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.banner-swiper .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    background: #fff;
    opacity: .55;
    transition: width .22s ease, opacity .22s ease;
}

.banner-swiper .swiper-pagination-bullet-active {
    width: 26px;
    border-radius: 999px;
    background: #fff;
    opacity: 1;
}

/* ==========================================================================
   دسته‌بندی‌ها — کتاب‌های ایستاده روی قفسه (مطابق قالب اصلی index-10)
   کادر ارتفاع صریح دارد و عکس با position:absolute تمام آن را پر می‌کند.
   ========================================================================== */
.category-swiper {
    width: 97%;
    margin-inline: auto;
    padding: 4px 2px 20px;
}

.category-swiper .swiper-slide { height: auto; }

.category-swiper .category-box {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 81%;
    /* ۱۵۰px در موبایل تا ۲۱۰px در دسکتاپ — نسبت ایستاده مثل جلد کتاب */
    height: calc(150px + 60 * (100vw - 320px) / 1600);
    border-radius: 6px;
    background-color: var(--bs-brand-soft);
    transition: transform .3s ease-in-out;
}

/* سایه‌ی بیضی زیر کتاب تا روی قفسه بنشیند */
.category-swiper .category-box::before {
    content: "";
    position: absolute;
    z-index: -2;
    display: block;
    width: 100%;
    height: 1em;
    background: rgba(0, 0, 0, .35);
    border-radius: 100%;
    bottom: -10px;
    filter: blur(5px);
}

.category-swiper .category-box img {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.category-swiper .category-box:hover { transform: translateY(-6px); }

/* قفسه‌ی چوبی زیر کتاب‌ها */
.category-swiper-wrap { position: relative; }

.category-swiper-wrap .shelf {
    position: relative;
    top: -14px;
    border-bottom: 30px solid var(--bs-shelf, #a5a5a5);
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}

.category-swiper-wrap .shelf::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bs-shelf-edge, #686868);
    height: 20px;
    width: calc(100% + 40px);
    bottom: -50px;
}

/* دکمه‌های ناوبری */
.swiper-nav {
    position: absolute;
    top: 42%;
    z-index: 4;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--bs-line);
    border-radius: 50%;
    background: var(--bs-surface);
    color: var(--bs-ink);
    font-size: 13px;
    box-shadow: var(--bs-shadow-sm);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, opacity .18s ease;
}

.swiper-nav:hover {
    background: var(--bs-brand);
    border-color: var(--bs-brand);
    color: #fff;
}

.swiper-nav--prev { inset-inline-start: -6px; }
.swiper-nav--next { inset-inline-end: -6px; }

.swiper-nav.swiper-button-disabled {
    opacity: .35;
    pointer-events: none;
}

@media (max-width: 767px) {
    .swiper-nav { display: none; }
}

/* --- بخش معرفی صفحه اصلی (h1 سایت) --- */
.home-intro {
    padding: 34px 0 6px;
}

.home-intro__box {
    max-width: 760px;
}

.home-intro__title {
    margin: 0 0 12px;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.5;
    color: var(--bs-ink);
}

.home-intro__text {
    margin: 0;
    max-width: 640px;
    font-size: 15px;
    line-height: 2.1;
    color: var(--bs-muted);
}

.home-intro__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

@media (max-width: 767px) {
    .home-intro { padding: 24px 0 4px; }
    .home-intro__title { font-size: 25px; }
    .home-intro__text { font-size: 14px; }
}

/* عنوان بخش با لینک «مشاهده همه» کنارش */
.title.title-with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.section-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid var(--bs-line);
    border-radius: 999px;
    background: var(--bs-surface);
    color: var(--bs-brand);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.section-link:hover {
    background: var(--bs-brand);
    border-color: var(--bs-brand);
    color: #fff;
    transform: translateY(-2px);
}

/* عنوان بخش‌ها: خط دوتایی با لوزی وسط — الهام از قاب لوگو */
.ornament-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 26px;
    text-align: center;
}

.ornament-title::before,
.ornament-title::after {
    content: "";
    flex: 1;
    max-width: 120px;
    height: 6px;
    border-top: 1px solid var(--bs-line);
    border-bottom: 1px solid var(--bs-line);
}

.ornament-title h2,
.ornament-title h3 {
    position: relative;
    margin: 0;
    padding: 0 6px;
    font-size: 24px;
    font-weight: 800;
    color: var(--bs-ink);
}

/* لوزی‌های کوچک کناری */
.ornament-title h2::before,
.ornament-title h2::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    transform: rotate(45deg);
    background: var(--bs-sale);
}

.ornament-title h2::before { inset-inline-start: -13px; }
.ornament-title h2::after  { inset-inline-end: -13px; }

/* عکس هویج! قالب سوپرمارکت روی منوی کشویی دسته‌بندی‌ها یک بنر سبزیجات
   می‌گذاشت که با آمدن فایل bg.png ظاهر شد. */
header .navbar-nav .dropdown-menu-2::after {
    background-image: none !important;
    display: none !important;
}

/* --- المان‌های تزئینی کتاب — یک‌بار در base_template، روی همه‌ی صفحه‌ها --- */
.page-decor {
    position: fixed;
    inset: 0;
    z-index: -1;          /* پشت همه‌ی محتوا، جلوی پس‌زمینه‌ی body */
    overflow: hidden;
    pointer-events: none;
}

.page-decor__item {
    position: absolute;
    color: var(--bs-brand);
    opacity: .07;
}

.page-decor__item--start {
    inset-inline-start: -26px;
    top: 40px;
    width: 130px;
    transform: rotate(-12deg);
}

.page-decor__item--end {
    inset-inline-end: -30px;
    bottom: 50px;
    width: 165px;
    transform: rotate(9deg);
}

.page-decor__dot {
    position: absolute;
    border-radius: 50%;
    background: var(--bs-sale);
    opacity: .12;
}

.page-decor__dot--1 {
    inset-inline-end: 12%;
    top: 60px;
    width: 9px;
    height: 9px;
}

.page-decor__dot--2 {
    inset-inline-start: 18%;
    bottom: 90px;
    width: 14px;
    height: 14px;
}

/* پس‌زمینه‌ی body نباید تزئینات را بپوشاند */
body { background-color: transparent !important; }

html {
    background-color: var(--bs-canvas);
    transition: background-color .25s ease;
}

.page-decor__item--start { top: 18vh; }
.page-decor__item--end { bottom: 14vh; }

@media (max-width: 991px) {
    .page-decor { display: none; }
}

/* قاب تزئینی نازک برای کادرهای مهم (فرم ورود، مودال‌ها) */
.ornament-frame {
    position: relative;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
    background: var(--bs-surface);
}

.ornament-frame::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(var(--bs-brand-rgb), .16);
    border-radius: calc(var(--bs-radius) - 5px);
    pointer-events: none;
}

/* ==========================================================================
   1) هدر
   ========================================================================== */

.top-nav.top-header {
    background: var(--bs-surface);
    border-bottom: 1px solid var(--bs-line);
    box-shadow: 0 1px 12px rgba(29, 42, 50, .05);
}

.top-nav.top-header .navbar-top {
    gap: 14px;
    min-height: 78px;
    padding-block: 6px;
}

/* لوگو: اندازه‌ی مهارشده تا هدر را به هم نریزد.
   flex:none لازم است وگرنه در کنار منوی بلند تا عرض صفر جمع می‌شود. */
.navbar-top .web-logo.nav-logo {
    flex: none !important;
    display: flex;
    align-items: center;
    width: auto !important;
}

.navbar-top .web-logo.nav-logo img {
    height: 56px;
    max-height: 56px;
    width: auto !important;
    max-width: 200px;
    object-fit: contain;
}

/* چیدمان هدر: لوگو | منو (فضای باقی‌مانده) | دکمه‌ها.
   قبلا منو و دکمه‌ها سر عرض دعوا داشتند و در بعضی عرض‌ها آیتم آخر بریده می‌شد. */
.top-nav.top-header .navbar-top {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.header-nav-middle {
    flex: 1 1 auto;
    min-width: 0;          /* اجازه‌ی جمع‌شدن به منو می‌دهد */
    display: flex;
    justify-content: center;
}

/* خودِ این کادر در قالب display:block بود و فقط فرزندش flex؛ برای همین
   وسط‌چینی عمودی به رفتار پیش‌فرض بلاک وابسته می‌ماند. */
.rightside-box {
    flex: none;
    display: flex !important;
    align-items: center;
    align-self: center;
    margin-inline-start: auto;
    min-height: 42px;
}

/* منوی اصلی: فاصله‌ی یکنواخت و حالت hover مشخص */
.header-nav-middle .navbar-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 2px;
    max-width: 100%;
}

.header-nav-middle .navbar-nav .nav-link {
    position: relative;
    padding: 9px 12px !important;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--bs-ink);
    white-space: nowrap;
    transition: color .18s ease, background-color .18s ease;
}

/* در عرض‌های میانی دسکتاپ، فاصله‌ها فشرده می‌شود تا هیچ آیتمی بیرون نزند.
   دقیقا در ۱۲۰۰px (نقطه‌ی فعال شدن منوی دسکتاپ) منو روی دکمه‌های سمت چپ می‌افتاد. */
/* در دسکتاپ باریک، هشت آیتم منو کنار لوگو و دکمه‌ها جا نمی‌شوند و روی هم
   می‌افتادند. به‌جای فشرده‌کردن بیش از حد، منو به سطر دوم می‌رود: هیچ‌وقت
   همپوشانی پیش نمی‌آید و همه‌ی آیتم‌ها هم دیده می‌شوند. */
/* --------------------------------------------------------------------------
   بازه‌ی ۱۲۰۰ تا ۱۵۹۹: منو باید افقی و تک‌سطری بماند (نه کشویی).
   قالب به هر آیتم ~۳۴px حاشیه و فونت بزرگ می‌دهد که در این عرض جا نمی‌شود،
   پس فقط فاصله و اندازه جمع‌تر می‌شود. کشو از ۱۱۹۹ به پایین (خود قالب) می‌ماند.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1599px) {
    /* همبرگری در این بازه لازم نیست — منو افقی است */
    .navbar-top .navbar-toggler.navbar-menu-button {
        display: none !important;
    }

    .top-nav.top-header .navbar-top {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .header-nav-middle {
        flex: 1 1 auto;
        min-width: 0;
    }

    header .header-nav-middle .navbar-nav > li.nav-item {
        margin-inline-end: 14px !important;
    }

    header .header-nav-middle .navbar-nav > li.nav-item:last-child {
        margin-inline-end: 0 !important;
    }

    header .header-nav-middle .navbar-nav > li.nav-item > .nav-link {
        padding-inline: 4px !important;
        font-size: 14px;
        white-space: nowrap;
    }

    .navbar-top .web-logo.nav-logo img { height: 44px; max-width: 150px; }

    /* منوی مگای دسته‌بندی نباید از لبه‌ی صفحه بیرون بزند */
    header .header-nav-middle .dropdown-menu-2 {
        max-width: calc(100vw - 40px);
    }
}


/* از ۱۶۰۰px به بعد هر هشت آیتم منو کنار لوگو و دکمه‌ها در یک سطر جا می‌شوند */
@media (min-width: 1600px) and (max-width: 1799px) {
    .header-nav-middle .navbar-nav .nav-link {
        padding: 9px 10px !important;
        font-size: 14px;
    }

    .navbar-top .web-logo.nav-logo img { height: 48px; max-width: 160px; }
}

@media (min-width: 1800px) {
    .header-nav-middle .navbar-nav .nav-link { padding: 9px 15px !important; }
}

.header-nav-middle .navbar-nav .nav-link:hover,
.header-nav-middle .navbar-nav .nav-item.active > .nav-link {
    color: var(--bs-brand);
    background: var(--bs-brand-soft);
}

/* دکمه‌های سمت چپ هدر — همه روی یک خط و هم‌ارتفاع */
.rightside-box .right-side-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- جستجو: در همه‌ی سایزها دیده شود (قبلا فقط در حالت موبایل بود) ---
   min-height یکسان + align-items:center تا آیکون‌ها کج ننشینند. --- */
.rightside-box .right-side-menu > li.right-side {
    display: flex !important;
    align-items: center;
    min-height: 42px;
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* جداکننده‌های قالب اصلی وسط‌چین شوند (قبلا از بالا آویزان بودند) */
.rightside-box .right-side-menu > li.right-side::before,
.rightside-box .right-side-menu > li.right-side::after {
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

/* باکس آیکنی مشترک: جستجو، سبد خرید و حساب کاربری هر سه یک اندازه */
.rightside-box .right-side-menu .search-box,
.header-badge .header-wishlist,
.rightside-box .delivery-login-box .delivery-icon {
    width: 42px;
    height: 42px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.rightside-box .right-side-menu .search-box,
.rightside-box .right-side-menu .delivery-icon .search-box {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--bs-canvas);
    border: 1px solid var(--bs-line);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.rightside-box .right-side-menu .search-box:hover {
    background: var(--bs-brand-soft);
    border-color: rgba(var(--bs-brand-rgb), .35);
    color: var(--bs-brand);
}

.rightside-box .right-side-menu .search-box svg,
.rightside-box .right-side-menu .search-box i {
    width: 19px;
    height: 19px;
    stroke-width: 2;
}

/* آیکن سبد خرید */
.header-badge .header-wishlist {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--bs-canvas);
    border: 1px solid var(--bs-line);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .18s ease, border-color .18s ease;
}

.header-badge .header-wishlist:hover {
    background: var(--bs-brand-soft);
    border-color: rgba(var(--bs-brand-rgb), .35);
}

.header-badge .header-wishlist svg {
    width: 19px;
    height: 19px;
}

/* نشان تعداد سبد: وقتی خالی است اصلا نمایش داده نشود */
#cartCountBadge {
    background: var(--bs-sale);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 19px;
    height: 19px;
    line-height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    border: 2px solid #fff;
    text-align: center;
}

#cartCountBadge.is-empty {
    display: none !important;
}

/* باکس حساب کاربری */
.rightside-box .delivery-login-box {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 10px 5px 6px;
    border-radius: 12px;
    transition: background-color .18s ease;
}

.rightside-box .right-side.onhover-dropdown:hover .delivery-login-box {
    background: var(--bs-canvas);
}

.rightside-box .delivery-login-box .delivery-icon {
    background: var(--bs-brand-soft);
    color: var(--bs-brand);
    border: 1px solid rgba(var(--bs-brand-rgb), .18);
}

.rightside-box .delivery-login-box .delivery-icon svg {
    width: 19px;
    height: 19px;
}

/* متن «سلام / حساب کاربری» دقیقا وسط‌چین با آیکون.
   نام کاربر ممکن است لاتین باشد؛ بدون unicode-bidi خط اول و دوم روی یک
   لبه ننشسته و به‌هم‌ریخته دیده می‌شد. */
.rightside-box .delivery-detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: start;
    line-height: 1.25;
}

.rightside-box .delivery-detail h6,
.rightside-box .delivery-detail h5 {
    display: block;
    width: 100%;
    text-align: start;
    unicode-bidi: plaintext;
}

.rightside-box .delivery-detail h6 {
    font-size: 11px;
    color: var(--bs-muted);
    margin: 0 0 1px;
    line-height: 1;
}

.rightside-box .delivery-detail h5 {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bs-ink);
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width: 1399px) {
    .rightside-box .delivery-detail { display: none; }
    .rightside-box .delivery-login-box { padding: 0; }
}

/* --- جستجو: مودال کوچک وسط صفحه ---
   با زدن اینتر مستقیم به صفحه‌ی فروشگاه با همان عبارت می‌رود. */
.rightside-box .search-full {
    position: fixed;
    inset: 0;
    z-index: 1060;
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: none;
}

.rightside-box .search-full.show,
.rightside-box .search-full.open {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.rightside-box .search-full form {
    width: min(560px, calc(100vw - 32px));
    margin-top: 16vh;
    padding: 18px;
    border-radius: 18px;
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    animation: bs-search-in .22s cubic-bezier(.2, .7, .3, 1);
}

@keyframes bs-search-in {
    from { opacity: 0; transform: translateY(-14px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

.rightside-box .search-full .input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    border: 1px solid var(--bs-line);
    border-radius: 13px;
    background: var(--bs-canvas);
    padding: 0 10px;
}

.rightside-box .search-full .input-group-text {
    flex: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--bs-muted);
}

.rightside-box .search-full .input-group-text.close-search {
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}

.rightside-box .search-full .input-group-text.close-search:hover {
    background: rgba(var(--bs-sale-rgb), .12);
    color: var(--bs-danger);
}

.rightside-box .search-full .form-control.search-type {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 4px;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 16px;
    font-weight: 600;
    color: var(--bs-ink);
}

.rightside-box .search-full .form-control.search-type::placeholder {
    font-weight: 500;
    color: var(--bs-muted);
}

/* ==========================================================================
   2) کارت محصول
   ========================================================================== */

.product-box,
.book-product-box {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
    padding: 10px 10px 14px;
    overflow: hidden;
    box-shadow: var(--bs-shadow-sm);
    transition: transform .25s cubic-bezier(.2, .7, .3, 1),
                box-shadow .25s ease,
                border-color .25s ease;
}

.product-box:hover,
.book-product-box:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--bs-brand-rgb), .35);
    box-shadow: var(--bs-shadow-md);
}

/* --- تصویر: بدون کادر و بدون پس‌زمینه، فقط خودِ جلد کتاب --- */
.product-box .product-image,
.book-product-box .product-image {
    position: relative;
    margin: 0 0 12px;
    border-radius: 0;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
}

.product-box .product-image > a,
.book-product-box .product-image > a,
.book-product-box .product-image .front > a {
    display: block;
    /* ۴:۵ به‌جای ۳:۴ — کارت کوتاه‌تر و فضای خالی اطراف جلد کمتر */
    aspect-ratio: 4 / 5;
}

.product-box .product-image img,
.book-product-box .product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}

.product-box:hover .product-image img,
.book-product-box:hover .product-image img {
    transform: scale(1.06);
}

/* --- برچسب تخفیف --- */
.product-box .lable-block,
.book-product-box .lable-block,
.book-product-box .label-box .label {
    position: absolute !important;
    top: 10px;
    inset-inline-start: 10px;
    inset-inline-end: auto;
    z-index: 3;
    width: auto !important;
    display: inline-block;
    margin: 0 !important;
    padding: 5px 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--bs-sale-light) 0%, var(--bs-sale) 100%) !important;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1.5;
    box-shadow: 0 4px 12px rgba(var(--bs-sale-rgb), .32);
}

/* بدون تخفیف: جایش رزرو می‌ماند ولی دیده نمی‌شود */
.product-box .lable-block.is-hidden,
.book-product-box .lable-block.is-hidden {
    visibility: hidden;
}

.product-box .lable-block.lable-special,
.book-product-box .lable-block.lable-special {
    background: linear-gradient(135deg, var(--bs-brand) 0%, var(--bs-brand) 100%) !important;
    box-shadow: 0 4px 12px rgba(var(--bs-brand-rgb), .30);
}

.book-product-box .label-box { position: static; }

/* --- دکمه‌های شناور روی تصویر حذف شدند ---
   آیکون بدون برچسب روی عکس، UX خوبی نبود و روی موبایل بالا و پایین کادر پخش
   می‌شد. حالا کل عکس و عنوان لینک محصول است و یک دکمه‌ی واضح «افزودن به سبد»
   پایین کارت. هر بازمانده‌ای از قالب اصلی هم اینجا خاموش می‌شود. --- */
.product-box .product-option,
.book-product-box .product-option {
    display: none !important;
}

/* --- متن کارت --- */
.product-box .product-detail,
.book-product-box .product-detail {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0 4px;
    text-align: start;
}

/* دسته‌بندی بالای نام (کارت کتاب) */
.book-product-box .product-detail .weight,
.product-box .product-detail .cat-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--bs-brand);
    background: var(--bs-brand-soft);
    border-radius: 999px;
    padding: 3px 9px;
    margin: 0 0 8px;
    align-self: flex-start;
}

/* نام کتاب: دقیقا دو خط تا همه‌ی کارت‌ها هم‌تراز بمانند */
.product-box .product-detail .name,
.book-product-box .product-detail .name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
    margin: 0 0 8px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--bs-ink);
    transition: color .18s ease;
}

.product-box:hover .product-detail .name,
.book-product-box:hover .product-detail .name {
    color: var(--bs-brand);
}

/* ناشر / نویسنده */
.book-product-box .product-detail .byers,
.product-box .product-detail .publisher-line {
    font-size: 12px;
    color: var(--bs-muted);
    margin: 0 0 8px;
    font-weight: 500;
}

/* --- قیمت --- */
.product-box .product-detail .sold,
.book-product-box .product-detail .price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
}

.product-box .product-detail .price,
.book-product-box .product-detail .price {
    font-size: 17px;
    font-weight: 800;
    color: var(--bs-ink) !important;
    letter-spacing: -.2px;
}

.product-box .product-detail del,
.book-product-box .product-detail del {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--bs-muted);
    text-decoration-thickness: 1px;
}

/* --- وضعیت موجودی --- */
.product-box .product-rating,
.book-product-box .product-rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 10px !important;
}

.product-box .product-rating h6,
.book-product-box .product-rating h6 {
    font-size: 11.5px;
    font-weight: 600;
    margin: 0;
}

/* نقطه‌ی رنگی به‌جای قرص پررنگ — سبک‌تر و کم‌سروصداتر */
.product-box .product-rating .theme-color,
.book-product-box .product-rating .theme-color,
.product-box .product-rating .text-danger,
.book-product-box .product-rating .text-danger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    background: none;
}

.product-box .product-rating .theme-color::before,
.book-product-box .product-rating .theme-color::before,
.product-box .product-rating .text-danger::before,
.book-product-box .product-rating .text-danger::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.product-box .product-rating .theme-color,
.book-product-box .product-rating .theme-color {
    color: var(--bs-brand) !important;
}

/* --- دکمه افزودن به سبد ---
   کلاس .addcart-button قالب، دکمه را قرص خاکستری بلند می‌کرد؛ اینجا کامل بازنویسی
   می‌شود تا ابعادش با کارت بخواند. */
.product-box .add-to-cart-box,
.book-product-box .add-to-cart-box {
    margin-top: auto !important;
    width: 100%;
}

.product-box .btn-add-cart.addcart-button,
.book-product-box .btn-add-cart.addcart-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 12px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    border: 1.5px solid var(--bs-brand) !important;
    background: transparent !important;
    color: var(--bs-brand) !important;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.product-box .btn-add-cart.addcart-button:hover:not(.disabled),
.book-product-box .btn-add-cart.addcart-button:hover:not(.disabled) {
    background: var(--bs-brand) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(var(--bs-brand-rgb), .28);
}

.product-box .btn-add-cart .add-icon,
.book-product-box .btn-add-cart .add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    flex: none;
    border-radius: 50%;
    background: var(--bs-brand-soft);
    font-size: 9px;
    transition: background-color .2s ease;
}

.product-box .btn-add-cart:hover:not(.disabled) .add-icon,
.book-product-box .btn-add-cart:hover:not(.disabled) .add-icon {
    background: rgba(255, 255, 255, .22);
}

.product-box .btn-add-cart.disabled,
.book-product-box .btn-add-cart.disabled {
    border-color: var(--bs-line) !important;
    color: var(--bs-muted) !important;
    background: var(--bs-canvas) !important;
    opacity: 1;
}

/* --- هم‌قد شدن کارت‌ها ---
   کتاب‌های بدون تخفیف یک خط کمتر داشتند و دکمه‌شان بالا/پایین می‌پرید.
   جای خالی «قیمت قبل از تخفیف» همیشه رزرو می‌شود. */
.product-list-section > div,
.product-list-section > [class*="col"] {
    display: flex;
}

.product-list-section .product-box,
.product-list-section .book-product-box {
    width: 100%;
}

.product-box .product-detail .sold,
.book-product-box .product-detail .price {
    min-height: 26px;
}

.product-box .product-detail del,
.book-product-box .product-detail del {
    visibility: visible;
}

/* وقتی تخفیفی نیست، جای del خالی می‌ماند ولی ارتفاع حفظ می‌شود */
.product-box .product-detail .sold::after,
.book-product-box .product-detail .price::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 18px;
}

/* ==========================================================================
   3) صفحه فروشگاه — نوار بالا
   ========================================================================== */

.shop-section .show-button {
    margin-bottom: 18px;
}

.shop-section .top-filter-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 12px 16px;
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    border-radius: 14px;
    box-shadow: var(--bs-shadow-sm);
}

.shop-section .top-filter-menu .category-dropdown {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.shop-section .top-filter-menu h5 {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bs-muted);
    margin: 0;
    white-space: nowrap;
}

.shop-section .top-filter-menu .form-select {
    border: 1px solid var(--bs-line);
    border-radius: 10px;
    padding: 8px 34px 8px 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bs-ink);
    background-color: var(--bs-canvas);
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.shop-section .top-filter-menu .form-select:focus {
    border-color: var(--bs-brand);
    box-shadow: 0 0 0 3px var(--bs-brand-soft);
}

/* شمارنده‌ی نتایج به شکل چیپ */
.shop-section .top-filter-menu .result-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--bs-brand-soft);
    color: var(--bs-brand);
    font-size: 13px;
    font-weight: 700;
}

/* ==========================================================================
   4) سایدبار فیلتر
   ========================================================================== */

/* قالب اصلی روی .left-box یک border-left می‌گذاشت که کنار کادرِ گردشده یک خط
   صاف اضافه نشان می‌داد؛ برداشته شد. */
.shop-section .left-box {
    border: 0 !important;
    padding: 0 !important;
}

/* پدینگ قالب نامتقارن بود (یک طرف صفر) و متن از لبه بیرون می‌زد */
.shop-section .left-box .shop-left-sidebar {
    position: sticky;
    top: 96px;
    background: var(--bs-surface);
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius);
    padding: 8px 18px 18px !important;
    box-shadow: var(--bs-shadow-sm);
    overflow: hidden;
}

/* gutter منفی بوت‌استرپ باعث بیرون‌زدگی ردیف «از / تا» می‌شد */
.shop-section .shop-left-sidebar .row {
    margin-inline: 0;
}

.shop-section .shop-left-sidebar .row > * {
    padding-inline: 4px;
}

.shop-section .filter-category {
    border: 0;
    padding: 14px 0 0;
    margin: 0 0 6px;
}

.shop-section .filter-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--bs-line);
}

.shop-section .filter-title h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 800;
    color: var(--bs-ink);
    margin: 0;
}

.shop-section .filter-title h2::before {
    content: "";
    width: 4px;
    height: 18px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--bs-brand) 0%, var(--bs-brand-dark) 100%);
}

.shop-section .filter-title a {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bs-sale);
    padding: 5px 10px;
    border-radius: 8px;
    transition: background-color .18s ease;
}

.shop-section .filter-title a:hover {
    background: rgba(var(--bs-sale-rgb), .08);
}

/* تگ‌های فیلتر فعال */
#activeFilterTags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0;
    margin: 0;
    list-style: none;
}

#activeFilterTags:not(:empty) {
    margin-bottom: 4px;
}

#activeFilterTags li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--bs-brand-soft);
    color: var(--bs-brand);
    font-size: 12px;
    font-weight: 600;
    transition: background-color .18s ease, color .18s ease;
}

#activeFilterTags li a:hover {
    background: var(--bs-brand);
    color: #fff;
}

#activeFilterTags li a i {
    font-size: 10px;
    opacity: .8;
}

/* قالب اصلی خودش یک ضربدر با ::before می‌گذاشت و دو تا ضربدر دیده می‌شد */
#activeFilterTags li a::before,
#activeFilterTags li a::after {
    content: none !important;
    display: none !important;
}

/* h1 صفحه همان اندازه‌ی قبلی h2 بماند تا ظاهر تغییر نکند */
.breadcrumb-contain .breadcrumb-title {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    color: var(--bs-ink);
}

@media (max-width: 767px) {
    .breadcrumb-contain .breadcrumb-title { font-size: 21px; }
}

/* آکاردئون فیلترها */
.shop-section .custom-accordion .accordion-item {
    border: 0;
    border-top: 1px solid var(--bs-line);
    border-radius: 0 !important;
    background: transparent;
    margin: 0;
}

.shop-section .custom-accordion .accordion-button {
    padding: 15px 0;
    background: transparent !important;
    border: 0;
    box-shadow: none !important;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--bs-ink);
}

.shop-section .custom-accordion .accordion-button::after {
    width: 22px;
    height: 22px;
    background-size: 11px;
    background-position: center;
    background-color: var(--bs-canvas);
    border-radius: 50%;
    transition: transform .25s ease, background-color .2s ease;
}

.shop-section .custom-accordion .accordion-button:not(.collapsed)::after {
    background-color: var(--bs-brand-soft);
}

.shop-section .custom-accordion .accordion-body {
    padding: 0 0 18px;
}

/* لیست دسته‌بندی‌ها */
.shop-section .category-list {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    /* قالب اصلی padding-inline زیادی می‌گذاشت و شمارنده‌ی دسته‌ها را می‌برید */
    padding: 2px 6px 2px 0 !important;
    margin: 0;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: var(--bs-line) transparent;
}

.shop-section .category-list > li { list-style: none; }

.shop-section .category-list::-webkit-scrollbar { width: 5px; }
.shop-section .category-list::-webkit-scrollbar-track { background: transparent; }
.shop-section .category-list::-webkit-scrollbar-thumb {
    background: var(--bs-line);
    border-radius: 999px;
}

.shop-section .category-list-box {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 10px;
    transition: background-color .16s ease;
}

.shop-section .category-list-box:hover {
    background: var(--bs-canvas);
}

.shop-section .category-list-box .form-check-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 1;
    margin: 0;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--bs-ink);
}

.shop-section .category-list-box .name {
    font-weight: 500;
    min-width: 0;           /* تا بتواند کوچک شود و شمارنده را نبرد */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-section .category-list-box .number {
    flex: none;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--bs-muted);
    background: var(--bs-canvas);
    border-radius: 999px;
    padding: 2px 8px;
}

.shop-section .category-list-box:hover .number {
    background: #fff;
}

/* چک‌باکس سفارشی */
.shop-section .category-list-box input[type="checkbox"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid var(--bs-line);
    border-radius: 6px;
    background-color: #fff;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    position: relative;
    transition: background-color .18s ease, border-color .18s ease;
}

.shop-section .category-list-box input[type="checkbox"]:checked {
    background-color: var(--bs-brand);
    border-color: var(--bs-brand);
}

.shop-section .category-list-box input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset-inline-start: 5px;
    top: 1.5px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.shop-section .category-list-box input[type="checkbox"]:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--bs-brand-soft);
}

/* دسته‌های فرزند */
.shop-section .category-list ul {
    margin: 2px 0 6px;
    padding-inline-start: 14px !important;
    border-inline-start: 1.5px solid var(--bs-line);
    list-style: none;
}

.shop-section .category-list ul .form-check-label { font-size: 13px; }

/* --- پیشنهادهای سریع قیمت --- */
.quick-price-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quick-price {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--bs-line);
    border-radius: 10px;
    background: var(--bs-surface);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bs-ink);
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.quick-price:hover { border-color: rgba(var(--bs-brand-rgb), .4); }

.quick-price.is-active {
    border-color: var(--bs-brand);
    background: var(--bs-brand-soft);
    color: var(--bs-brand);
}

.quick-price input[type="radio"] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--bs-brand);
    cursor: pointer;
}

.quick-price__note {
    margin: 9px 0 0;
    font-size: 11.5px;
    color: var(--bs-muted);
}

/* لینک برجسته‌ی منو */
.header-nav-middle .navbar-nav .nav-link--accent {
    color: var(--bs-sale) !important;
    font-weight: 700;
}

.header-nav-middle .navbar-nav .nav-link--accent:hover {
    background: rgba(var(--bs-sale-rgb), .10);
    color: var(--bs-sale) !important;
}

/* جستجو در سایدبار */
.shop-section .search-box .form-control,
.shop-section .theme-form-floating-2 .form-control {
    border: 1px solid var(--bs-line);
    border-radius: 11px;
    background: var(--bs-canvas);
    font-size: 14px;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.shop-section .search-box .form-control:focus,
.shop-section .theme-form-floating-2 .form-control:focus {
    border-color: var(--bs-brand);
    background: #fff;
    box-shadow: 0 0 0 3px var(--bs-brand-soft);
}

/* ورودی‌های محدوده قیمت */
.shop-section input[name="min_price"],
.shop-section input[name="max_price"] {
    border: 1px solid var(--bs-line);
    border-radius: 11px;
    background: var(--bs-canvas);
    padding: 11px 13px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-ink);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.shop-section input[name="min_price"]:focus,
.shop-section input[name="max_price"]:focus {
    border-color: var(--bs-brand);
    background: #fff;
    box-shadow: 0 0 0 3px var(--bs-brand-soft);
    outline: 0;
}

/* دکمه اعمال فیلتر */
.shop-section .btn-animation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--bs-brand) 0%, var(--bs-brand-dark) 100%);
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(var(--bs-brand-rgb), .26);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.shop-section .btn-animation:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 10px 22px rgba(var(--bs-brand-rgb), .34);
}

/* حالت بارگذاری ajax */
#shopProductsBox {
    transition: opacity .18s ease;
}

/* ==========================================================================
   5) فوتر — بخش امضا
   ========================================================================== */

/* دو متن ساده در دو سر فوتر — بدون قاب و بدون رنگ‌بندی اضافه */
.sub-footer.sub-footer-lite {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
    border-top: 1px solid rgba(255, 255, 255, .10);
    padding-top: 22px !important;
}

/* هر دو متن پایین فوتر سفید و کاملا خوانا — کلاس light-text قالب کم‌رنگشان می‌کرد */
.sub-footer.sub-footer-lite .copyright-text,
.sub-footer.sub-footer-lite .made-by,
.sub-footer.sub-footer-lite .light-text {
    margin: 0;
    font-size: 13.5px;
    font-weight: 400;
    color: #fff !important;
    opacity: 1;
}

.sub-footer.sub-footer-lite .made-by {
    text-decoration: none;
    transition: opacity .18s ease;
}

/* فقط نام «الی سافت» رنگ تم را می‌گیرد */
.sub-footer.sub-footer-lite .made-by .brand-name {
    color: var(--bs-brand-on-dark, var(--bs-brand)) !important;
    font-weight: 700;
}

.sub-footer.sub-footer-lite .made-by:hover { opacity: .82; }

@media (max-width: 575px) {
    .sub-footer.sub-footer-lite {
        justify-content: center;
        text-align: center;
    }
}

/* ==========================================================================
   6) Toast — جایگزین alert تمام‌عرض جنگو و پیام‌های ajax
   ========================================================================== */

#ajaxToastContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}

.bs-toast {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    border-radius: 14px;
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    box-shadow: 0 10px 30px rgba(29, 42, 50, .16), 0 2px 8px rgba(29, 42, 50, .08);
    overflow: hidden;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(14px) scale(.97);
    transition: opacity .26s cubic-bezier(.2, .7, .3, 1),
                transform .26s cubic-bezier(.2, .7, .3, 1);
}

.bs-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.bs-toast.is-leaving {
    opacity: 0;
    transform: translateY(6px) scale(.97);
}

.bs-toast__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
}

.bs-toast__icon svg {
    width: 17px;
    height: 17px;
}

.bs-toast__text {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--bs-ink);
}

.bs-toast__close {
    flex: none;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--bs-muted);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}

.bs-toast__close:hover {
    background: var(--bs-canvas);
    color: var(--bs-ink);
}

/* نوار پیشرفت زمان باقی‌مانده */
.bs-toast__bar {
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    height: 3px;
    width: 100%;
    transform-origin: inline-start;
    animation: bs-toast-bar 4s linear forwards;
}

.bs-toast.is-paused .bs-toast__bar {
    animation-play-state: paused;
}

@keyframes bs-toast-bar {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

.bs-toast--success .bs-toast__icon { background: linear-gradient(135deg, var(--bs-brand) 0%, var(--bs-brand) 100%); }
.bs-toast--success .bs-toast__bar  { background: var(--bs-brand); }

.bs-toast--error .bs-toast__icon { background: linear-gradient(135deg, var(--bs-sale-light) 0%, var(--bs-sale) 100%); }
.bs-toast--error .bs-toast__bar  { background: var(--bs-sale); }

.bs-toast--warning .bs-toast__icon { background: linear-gradient(135deg, #ffc554 0%, #f59f0b 100%); }
.bs-toast--warning .bs-toast__bar  { background: #f59f0b; }

.bs-toast--info .bs-toast__icon { background: linear-gradient(135deg, #5aa9ef 0%, #2f80d6 100%); }
.bs-toast--info .bs-toast__bar  { background: #2f80d6; }

@media (prefers-reduced-motion: reduce) {
    .bs-toast { transition: none; }
    .bs-toast__bar { animation: none; }
}

/* ==========================================================================
   6.2) اجزای مشترک صفحات محتوایی
   ========================================================================== */

.eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--bs-brand-soft);
    color: var(--bs-brand);
    font-size: 12px;
    font-weight: 700;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 22px;
    border: 1.5px solid var(--bs-line);
    border-radius: 12px;
    background: transparent;
    color: var(--bs-ink);
    font-size: 14px;
    font-weight: 700;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.btn-ghost:hover {
    border-color: var(--bs-brand);
    background: var(--bs-brand-soft);
    color: var(--bs-brand);
}

/* نوار دعوت به اقدام */
.cta-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    padding: 30px 34px;
    border-radius: var(--bs-radius);
    background: linear-gradient(135deg, var(--bs-brand-dark) 0%, var(--bs-brand) 100%);
    color: #fff;
}

.cta-band h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
}

.cta-band p {
    margin: 0;
    font-size: 14px;
    opacity: .9;
}

.cta-band .btn-animation {
    background: #fff !important;
    color: var(--bs-brand) !important;
    flex: none;
}

.cta-band .btn-animation::after { display: none !important; }
.cta-band .btn-animation:hover { color: var(--bs-brand-dark) !important; }

/* ==========================================================================
   6.3) صفحه درباره ما
   ========================================================================== */

.about-figure {
    border-radius: var(--bs-radius);
    overflow: hidden;
    border: 1px solid var(--bs-line);
    background: var(--bs-surface);
    box-shadow: var(--bs-shadow-sm);
}

.about-figure img {
    width: 100%;
    height: 100%;
    max-height: 430px;
    object-fit: cover;
    display: block;
}

.about-figure__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 330px;
    background: linear-gradient(140deg, var(--bs-brand-soft) 0%, var(--bs-canvas) 100%);
    color: var(--bs-brand);
}

.about-figure__placeholder i { font-size: 62px; }

.about-figure__placeholder span {
    font-size: 19px;
    font-weight: 800;
}

.about-copy__title {
    margin: 0 0 14px;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.55;
    color: var(--bs-ink);
}

.about-copy__text {
    font-size: 15px;
    line-height: 2.1;
    color: var(--bs-muted);
}

.about-copy__text p { margin-bottom: 12px; }

.about-copy__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

/* کارت ویژگی */
.value-card {
    height: 100%;
    padding: 26px 22px;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
    background: var(--bs-surface);
    box-shadow: var(--bs-shadow-sm);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.value-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--bs-brand-rgb), .35);
    box-shadow: var(--bs-shadow-md);
}

.value-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
    border-radius: 14px;
    background: var(--bs-brand-soft);
    color: var(--bs-brand);
    font-size: 20px;
}

.value-card h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 800;
    color: var(--bs-ink);
}

.value-card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.95;
    color: var(--bs-muted);
}

/* نوار آمار */
.stats-band {
    display: flex;
    flex-wrap: wrap;
    padding: 28px 18px;
    box-shadow: var(--bs-shadow-sm);
}

.stats-band .stat {
    flex: 1 1 180px;
    text-align: center;
    padding: 10px 14px;
}

.stats-band .stat + .stat {
    border-inline-start: 1px solid var(--bs-line);
}

.stats-band .stat strong {
    display: block;
    margin-bottom: 5px;
    font-size: 28px;
    font-weight: 800;
    color: var(--bs-brand);
}

.stats-band .stat span {
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-muted);
}

@media (max-width: 575px) {
    .stats-band .stat { flex-basis: 50%; }
    .stats-band .stat:nth-child(odd) { border-inline-start: 0; }
}

/* آکاردئون سوالات متداول */
.faq-accordion .accordion-item {
    margin-bottom: 10px;
    border: 1px solid var(--bs-line) !important;
    border-radius: 13px !important;
    background: var(--bs-surface);
    overflow: hidden;
}

.faq-accordion .accordion-button {
    padding: 17px 20px !important;
    background: transparent !important;
    font-size: 15px;
    font-weight: 700;
    color: var(--bs-ink);
}

.faq-accordion .accordion-body {
    padding: 0 20px 18px !important;
    font-size: 14px;
    line-height: 2;
    color: var(--bs-muted);
}

/* ==========================================================================
   6.35) صفحه تماس با ما
   ========================================================================== */

.contact-card {
    display: block;
    height: 100%;
    padding: 24px 20px;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
    background: var(--bs-surface);
    box-shadow: var(--bs-shadow-sm);
    text-align: center;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

a.contact-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--bs-brand-rgb), .35);
    box-shadow: var(--bs-shadow-md);
}

.contact-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--bs-brand-soft);
    color: var(--bs-brand);
    font-size: 19px;
}

.contact-card h3 {
    margin: 0 0 7px;
    font-size: 15px;
    font-weight: 800;
    color: var(--bs-ink);
}

.contact-card__value {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--bs-muted);
    word-break: break-word;
}

.contact-card__value p { margin: 0; }

.contact-form-box {
    padding: 28px;
    box-shadow: var(--bs-shadow-sm);
}

.contact-form-box__head {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bs-line);
}

.contact-form-box__head h2 {
    margin: 0 0 5px;
    font-size: 20px;
    font-weight: 800;
    color: var(--bs-ink);
}

.contact-form-box__head p {
    margin: 0;
    font-size: 13.5px;
    color: var(--bs-muted);
}

.contact-form-box .form-label {
    margin-bottom: 7px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bs-ink);
}

.contact-form-box .req { color: var(--bs-danger); }

.contact-form-box .form-control {
    padding: 12px 14px;
    border: 1px solid var(--bs-line);
    border-radius: 11px;
    background: var(--bs-canvas);
    font-size: 14px;
    color: var(--bs-ink);
}

.contact-form-box .form-control:focus { background: #fff; }

.contact-form-box textarea.form-control { resize: vertical; min-height: 130px; }

.contact-aside__title {
    margin: 0 0 12px;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.6;
    color: var(--bs-ink);
}

.contact-aside .text-content {
    font-size: 14.5px;
    line-height: 2.1;
    color: var(--bs-muted);
}

.contact-aside__social { margin-top: 26px; }

.contact-aside__social h3 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 800;
    color: var(--bs-ink);
}

.social-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.social-pills a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--bs-line);
    border-radius: 13px;
    background: var(--bs-surface);
    color: var(--bs-muted);
    font-size: 16px;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.social-pills a:hover {
    background: var(--bs-brand);
    border-color: var(--bs-brand);
    color: #fff;
    transform: translateY(-3px);
}

/* ==========================================================================
   6.354) صفحه‌های متنی (قوانین، حریم خصوصی و ...)
   ========================================================================== */

.static-page__card {
    padding: 34px 36px;
    box-shadow: var(--bs-shadow-sm);
}

.static-page__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--bs-line);
}

.static-page__meta .eyebrow { margin: 0; }

.static-page__updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--bs-muted);
}

.static-page__content {
    font-size: 15px;
    line-height: 2.2;
    color: var(--bs-muted);
}

.static-page__content h2 {
    margin: 30px 0 12px;
    padding-inline-start: 13px;
    border-inline-start: 3px solid var(--bs-brand);
    font-size: 18px;
    font-weight: 800;
    color: var(--bs-ink);
}

.static-page__content h2:first-child { margin-top: 0; }

.static-page__content h3 {
    margin: 22px 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--bs-ink);
}

.static-page__content p { margin-bottom: 14px; }

.static-page__content ul,
.static-page__content ol {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.static-page__content li {
    position: relative;
    margin-bottom: 9px;
    padding-inline-start: 20px;
}

/* بولت سفارشی — بولت پیش‌فرض در RTL بیرون کادر می‌افتاد */
.static-page__content ul > li::before {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    top: 14px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bs-brand);
}

.static-page__content ol { counter-reset: sp; }

.static-page__content ol > li { counter-increment: sp; }

.static-page__content ol > li::before {
    content: counter(sp) ".";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    font-weight: 700;
    color: var(--bs-brand);
}

.static-page__content a { color: var(--bs-brand); text-decoration: underline; }

.static-page__back {
    margin-top: 22px;
    text-align: center;
}

@media (max-width: 575px) {
    .static-page__card { padding: 24px 20px; }
}

/* ==========================================================================
   6.355) صورت‌حساب و جدول سبد خرید
   ========================================================================== */

.summery-box {
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius) !important;
    background: var(--bs-surface) !important;
    box-shadow: var(--bs-shadow-sm);
    overflow: hidden;
}

.summery-box .summery-header {
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--bs-line) !important;
    background: var(--bs-canvas);
}

.summery-box .summery-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--bs-ink);
}

.summery-box .summery-contain {
    padding: 16px 20px !important;
    border: 0 !important;
}

.summery-box .summery-contain ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.summery-box .summery-contain li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0 !important;
    border: 0 !important;
}

.summery-box .summery-contain h4 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bs-muted);
}

.summery-box .summery-contain h4.price {
    font-weight: 700;
    color: var(--bs-ink);
}

.summery-box .summery-total {
    margin: 0;
    padding: 14px 20px !important;
    list-style: none;
    background: var(--bs-brand-soft);
    border-top: 1px solid var(--bs-line);
}

.summery-box .summery-total li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 !important;
    border: 0 !important;
}

.summery-box .summery-total h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--bs-ink);
}

.summery-box .summery-total h4.price {
    font-size: 17px;
    color: var(--bs-brand) !important;
}

.summery-box .button-group {
    padding: 16px 20px;
}

.summery-box .button-group ul {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.summery-box .button-group li { padding: 0; border: 0; }

.summery-box .shopping-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 16px;
    border: 1.5px solid var(--bs-line) !important;
    border-radius: 11px;
    background: transparent !important;
    color: var(--bs-ink) !important;
    font-size: 13.5px;
    font-weight: 700;
    transition: border-color .18s ease, background-color .18s ease;
}

.summery-box .shopping-button:hover {
    border-color: var(--bs-brand) !important;
    background: var(--bs-brand-soft) !important;
    color: var(--bs-brand) !important;
}

.summery-box .proceed-btn { border-radius: 11px; }

/* کد تخفیف */
.summery-box .coupon-box .form-control {
    border: 1px solid var(--bs-line);
    border-radius: 11px 0 0 11px;
    background: var(--bs-canvas);
    font-size: 13.5px;
}

.summery-box .btn-apply {
    padding: 0 18px;
    border: 0;
    border-radius: 0 11px 11px 0;
    background: var(--bs-brand);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
}

.summery-box .btn-apply:hover { background: var(--bs-brand-dark); }

/* جدول سبد خرید — کادر سفیدِ والد قالب حذف شد و خودِ جدول کادر گرفت */
.cart-section .cart-table,
#checkoutTable .cart-table,
#checkoutTable .table-responsive-xl {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.cart-section table,
#checkoutTable table {
    margin: 0;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
    overflow: hidden;
    background: var(--bs-surface);
    border-collapse: separate;
    border-spacing: 0;
}

/* دکمه‌ی حذف آیتم سبد */
.btn-remove-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 13px;
    border: 1px solid var(--bs-line);
    border-radius: 10px;
    background: var(--bs-surface);
    color: var(--bs-muted);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn-remove-item i { font-size: 12px; }

.btn-remove-item:hover {
    background: rgba(var(--bs-sale-rgb), .10);
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}

#checkoutTable thead th {
    padding: 14px 12px !important;
    background: var(--bs-canvas);
    border-bottom: 1px solid var(--bs-line) !important;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--bs-muted);
}

#checkoutTable tbody td {
    padding: 16px 12px !important;
    border-bottom: 1px solid var(--bs-line) !important;
    vertical-align: middle;
    font-size: 13.5px;
    color: var(--bs-ink);
}

#checkoutTable tbody tr:last-child td { border-bottom: 0 !important; }

#checkoutTable img {
    width: 62px;
    height: 78px;
    object-fit: contain;
    border-radius: 9px;
    background: var(--bs-canvas);
    padding: 3px;
}

/* ==========================================================================
   6.356) صفحه تسویه حساب — مرحله‌ای و کارت‌به‌کارت
   ========================================================================== */

.co-step {
    margin-bottom: 18px;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
    background: var(--bs-surface);
    box-shadow: var(--bs-shadow-sm);
    overflow: hidden;
}

.co-step__head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--bs-line);
    background: var(--bs-canvas);
}

.co-step__num {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bs-brand);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.co-step__head h2 {
    flex: 1;
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--bs-ink);
}

.co-step__action {
    flex: none;
    padding: 6px 13px;
    border: 1px solid var(--bs-line);
    border-radius: 9px;
    background: var(--bs-surface);
    color: var(--bs-brand);
    font-size: 12.5px;
    font-weight: 700;
    transition: background-color .16s ease, border-color .16s ease;
}

.co-step__action:hover {
    background: var(--bs-brand-soft);
    border-color: rgba(var(--bs-brand-rgb), .4);
    color: var(--bs-brand);
}

.co-step__body { padding: 18px; }

/* گیرنده */
.co-receiver__name {
    margin: 0 0 9px;
    font-size: 15px;
    font-weight: 800;
    color: var(--bs-ink);
}

.co-receiver__line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--bs-muted);
}

.co-receiver__line i {
    margin-top: 6px;
    font-size: 12px;
    color: var(--bs-brand);
}

/* اقلام */
.co-items { margin: 0; padding: 0; list-style: none; }

.co-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 0;
}

.co-item + .co-item { border-top: 1px solid var(--bs-line); }

.co-item__img {
    flex: none;
    width: 52px;
    height: 66px;
    border-radius: 9px;
    overflow: hidden;
    background: var(--bs-canvas);
    border: 1px solid var(--bs-line);
}

.co-item__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
}

.co-item__info { flex: 1; min-width: 0; }

.co-item__name {
    margin: 0 0 4px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--bs-ink);
}

.co-item__meta {
    margin: 0;
    font-size: 12.5px;
    color: var(--bs-muted);
}

.co-item__total {
    flex: none;
    font-size: 14px;
    font-weight: 800;
    color: var(--bs-brand);
    white-space: nowrap;
}

/* پرداخت */
.co-hint {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 11px;
    background: var(--bs-brand-soft);
    font-size: 13.5px;
    line-height: 2;
    color: var(--bs-ink);
}

.co-hint strong { color: var(--bs-brand); font-weight: 800; }

.co-alert {
    padding: 14px 16px;
    border: 1px solid var(--bs-line);
    border-radius: 11px;
    background: rgba(var(--bs-sale-rgb), .10);
    font-size: 13.5px;
    color: var(--bs-ink);
}

.co-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.co-card {
    padding: 16px;
    border: 1px solid var(--bs-line);
    border-radius: 14px;
    background: linear-gradient(140deg, var(--bs-brand-soft) 0%, var(--bs-canvas) 100%);
}

.co-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.co-card__bank {
    font-size: 13px;
    font-weight: 800;
    color: var(--bs-brand);
}

.co-card__copy {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--bs-line);
    border-radius: 9px;
    background: var(--bs-surface);
    color: var(--bs-muted);
    font-size: 13px;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}

.co-card__copy:hover {
    background: var(--bs-brand);
    border-color: var(--bs-brand);
    color: #fff;
}

.co-card__number {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--bs-ink);
}

.co-card__holder,
.co-card__sheba {
    margin: 0 0 4px;
    font-size: 12.5px;
    color: var(--bs-muted);
}

.co-card__note {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.9;
    color: var(--bs-muted);
}

/* فرم رسید */
.co-receipt {
    padding-top: 18px;
    border-top: 1px solid var(--bs-line);
}

.co-receipt h3 {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 800;
    color: var(--bs-ink);
}

.co-receipt .form-label {
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bs-ink);
}

.co-receipt .req { color: var(--bs-danger); }

.co-receipt .form-control {
    padding: 12px 14px;
    border: 1px solid var(--bs-line);
    border-radius: 11px;
    background: var(--bs-canvas);
    font-size: 14px;
    color: var(--bs-ink);
}

.co-receipt .form-control:focus {
    border-color: var(--bs-brand);
    background: var(--bs-surface);
    box-shadow: 0 0 0 3px var(--bs-brand-soft);
}

.co-receipt .form-text {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--bs-muted);
}

/* پیام کد تخفیف */
.coupon-msg {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 600;
    min-height: 16px;
}

.coupon-msg.is-ok { color: var(--bs-brand); }
.coupon-msg.is-error { color: var(--bs-danger); }

/* ==========================================================================
   6.36) حالت خالی (بدون آدرس، سبد خالی، بدون نتیجه)
   ========================================================================== */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 44px 24px;
    border: 1.5px dashed var(--bs-line);
    border-radius: var(--bs-radius);
    background: var(--bs-canvas);
}

.empty-state__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--bs-brand-soft);
    color: var(--bs-brand);
    font-size: 32px;
}

.empty-state h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 800;
    color: var(--bs-ink);
}

.empty-state p {
    max-width: 420px;
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 2;
    color: var(--bs-muted);
}

/* ==========================================================================
   6.37) کارت آدرس تحویل
   ========================================================================== */

.address-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    height: 100%;
    padding: 18px;
    border: 1.5px solid var(--bs-line);
    border-radius: 14px;
    background: var(--bs-surface);
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.address-card:hover {
    border-color: rgba(var(--bs-brand-rgb), .45);
    box-shadow: var(--bs-shadow-sm);
}

.address-card.is-default {
    border-color: var(--bs-brand);
    background: var(--bs-brand-soft);
}

.address-card .form-check-input {
    flex: none;
    width: 19px;
    height: 19px;
    margin: 2px 0 0;
    cursor: pointer;
}

.address-card__body { flex: 1; min-width: 0; }

.address-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}

.address-card__head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--bs-ink);
}

.address-card__flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bs-brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.address-card__text {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 2;
    color: var(--bs-muted);
}

.address-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.link-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-brand);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .16s ease;
}

.link-action:hover { opacity: .72; }
.link-action--danger { color: var(--bs-danger); }

/* ==========================================================================
   6.38) مودال‌ها
   ========================================================================== */

.theme-modal .modal-content,
.modal .modal-content {
    border: 0;
    border-radius: 18px;
    background: var(--bs-surface);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
    overflow: hidden;
}

.modal .modal-header {
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--bs-line);
    background: var(--bs-canvas);
}

.modal .modal-title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--bs-ink);
}

/* دکمه‌ی بستن بیرونِ کادر مودال، با همان گردی مودال.
   آیکون پیش‌فرض بوت‌استرپ (تصویر پس‌زمینه) با رنگ‌های تم محو می‌شد، پس
   با یک ضربدر واقعی جایگزین شده است. */
.modal .modal-content { overflow: visible; }

.modal .btn-close {
    position: absolute;
    top: -14px;
    inset-inline-start: -14px;
    z-index: 5;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bs-line);
    border-radius: 18px;          /* هم‌اندازه با گردی مودال */
    background-color: var(--bs-surface);
    background-image: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
    opacity: 1;
    transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.modal .btn-close::before {
    content: "\00d7";
    font-size: 22px;
    line-height: 1;
    font-weight: 400;
    color: var(--bs-ink);
}

.modal .btn-close:hover {
    background-color: var(--bs-brand);
    transform: rotate(90deg);
}

.modal .btn-close:hover::before { color: #fff; }

/* هدر مودال دیگر نیازی به جای خالی برای دکمه ندارد */
.modal .modal-header { position: relative; }

.modal .modal-body { padding: 22px; }

.modal .modal-body .form-label {
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bs-ink);
}

.modal .modal-body .form-control,
.modal .modal-body .form-select,
.modal .modal-body input[type="text"],
.modal .modal-body input[type="number"],
.modal .modal-body textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--bs-line);
    border-radius: 11px;
    background: var(--bs-canvas);
    font-size: 14px;
    color: var(--bs-ink);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.modal .modal-body .form-control:focus,
.modal .modal-body textarea:focus {
    border-color: var(--bs-brand);
    background: #fff;
    box-shadow: 0 0 0 3px var(--bs-brand-soft);
    outline: 0;
}

.modal .modal-body textarea { min-height: 110px; resize: vertical; }

/* هر دو دکمه دقیقا هم‌ارتفاع و هم‌گردی */
.modal .modal-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid var(--bs-line);
    background: var(--bs-canvas);
}

.modal .modal-footer > .btn,
.modal .modal-footer > button,
.modal .modal-footer > a.btn {
    height: 44px;
    min-width: 118px;
    margin: 0 !important;
    padding: 0 22px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.modal .modal-footer .btn-light {
    border: 1.5px solid var(--bs-line);
    background: var(--bs-surface);
    color: var(--bs-ink);
}

.modal .modal-footer .btn-light:hover {
    border-color: var(--bs-muted);
    background: var(--bs-canvas);
}

.modal-backdrop.show { opacity: .5; }

/* ==========================================================================
   6.39) صفحه فروشنده شوید
   ========================================================================== */

.seller-become-section .dashboard-bg-box,
.seller-become-section form,
.seller-form-card {
    padding: 28px;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius);
    background: var(--bs-surface);
    box-shadow: var(--bs-shadow-sm);
}

.seller-become-section .form-label,
.seller-become-section label {
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bs-ink);
}

.seller-become-section .form-control,
.seller-become-section .form-select,
.seller-become-section textarea {
    padding: 12px 14px;
    border: 1px solid var(--bs-line);
    border-radius: 11px;
    background: var(--bs-canvas);
    font-size: 14px;
    color: var(--bs-ink);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.seller-become-section .form-control:focus,
.seller-become-section textarea:focus {
    border-color: var(--bs-brand);
    background: #fff;
    box-shadow: 0 0 0 3px var(--bs-brand-soft);
}

.seller-become-section .form-text,
.seller-become-section .helptext {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    line-height: 1.8;
    color: var(--bs-muted);
}

/* ستون معرفی سمت راست */
.seller-pitch__title {
    margin: 0 0 12px;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.6;
    color: var(--bs-ink);
}

.seller-pitch__text {
    font-size: 14.5px;
    line-height: 2.1;
    color: var(--bs-muted);
}

.seller-perks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.seller-perks li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid var(--bs-line);
    border-radius: 999px;
    background: var(--bs-surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-ink);
}

.seller-perks li i { color: var(--bs-brand); }

/* ==========================================================================
   6.4) صفحه‌های ورود / احراز هویت
   ========================================================================== */

.auth-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
    color: var(--bs-ink);
}

.auth-subtitle {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--bs-muted);
}

/* ==========================================================================
   6.5) دراپ‌داون‌های هدر — سبد خرید و حساب کاربری
   ========================================================================== */

.rightside-box .onhover-div {
    min-width: 290px;
    padding: 14px !important;
    border: 1px solid var(--bs-line) !important;
    border-radius: 16px !important;
    background: var(--bs-surface) !important;
    box-shadow: var(--bs-shadow-md) !important;
}

/* فلش کوچک بالای دراپ‌داون */
.rightside-box .onhover-div::before {
    content: "";
    position: absolute;
    top: -6px;
    inset-inline-end: 22px;
    width: 11px;
    height: 11px;
    transform: rotate(45deg);
    background: var(--bs-surface);
    border-top: 1px solid var(--bs-line);
    border-inline-start: 1px solid var(--bs-line);
}

/* --- منوی حساب کاربری --- */
.onhover-div-login .user-box-name {
    margin: 0;
    padding: 0;
    list-style: none;
}

.onhover-div-login .user-box-name li {
    margin: 0;
    padding: 0;
    border: 0;
}

.onhover-div-login .user-box-name li + li {
    border-top: 1px solid var(--bs-line);
}

.onhover-div-login .user-box-name li a {
    display: block;
    padding: 11px 12px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bs-ink);
    transition: background-color .16s ease, color .16s ease;
}

.onhover-div-login .user-box-name li a:hover {
    background: var(--bs-brand-soft);
    color: var(--bs-brand);
}

/* --- دراپ‌داون سبد خرید --- */
.onhover-div .cart-list {
    max-height: 310px;
    overflow-y: auto;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    scrollbar-width: thin;
}

.onhover-div .cart-list li {
    margin: 0;
    padding: 0;
    border: 0;
}

.onhover-div .cart-list li + li {
    border-top: 1px solid var(--bs-line);
}

.onhover-div .drop-cart {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 4px;
}

.onhover-div .drop-cart .drop-image {
    flex: none;
    width: 52px;
    height: 66px;
    border-radius: 9px;
    overflow: hidden;
    background: var(--bs-canvas);
    border: 1px solid var(--bs-line);
}

.onhover-div .drop-cart .drop-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
}

.onhover-div .drop-cart .drop-contain {
    position: relative;
    flex: 1;
    min-width: 0;
    padding-inline-end: 26px;
}

.onhover-div .drop-cart .drop-contain h5 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 5px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--bs-ink);
}

.onhover-div .drop-cart .drop-contain h6 {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--bs-brand);
}

.onhover-div .drop-cart .drop-contain h6 span {
    color: var(--bs-muted);
    font-weight: 500;
}

/* دکمه‌ی حذف آیتم */
.onhover-div .drop-cart .close-button {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--bs-muted);
    font-size: 12px;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}

.onhover-div .drop-cart .close-button:hover {
    background: rgba(var(--bs-sale-rgb), .12);
    color: var(--bs-danger);
}

/* جمع کل */
.onhover-div .price-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 12px;
    padding: 11px 12px;
    border-radius: 11px;
    background: var(--bs-canvas);
}

.onhover-div .price-box h5 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-muted);
}

.onhover-div .price-box h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--bs-brand) !important;
}

/* دکمه‌های پایین */
.onhover-div .button-group {
    display: flex;
    gap: 8px;
}

.onhover-div .button-group .cart-button {
    flex: 1;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    border: 1.5px solid var(--bs-brand);
    background: transparent;
    color: var(--bs-brand);
    transition: background-color .18s ease, color .18s ease;
}

.onhover-div .button-group .cart-button:hover {
    background: var(--bs-brand-soft);
    color: var(--bs-brand);
}

.onhover-div .button-group .cart-button.theme-bg-color {
    border-color: transparent;
    background: var(--bs-brand) !important;
    color: #fff !important;
}

.onhover-div .button-group .cart-button.theme-bg-color:hover {
    background: var(--bs-brand-dark) !important;
}

/* حالت خالی */
.onhover-div .cart-list .drop-cart.text-center h5 {
    display: block;
    font-size: 13.5px;
    color: var(--bs-muted);
    font-weight: 600;
}

/* ==========================================================================
   7) انتخابگر تم (موقتی — بعد از انتخاب نهایی حذف می‌شود)
   ========================================================================== */

.theme-switch {
    position: fixed;
    inset-inline-start: 18px;
    bottom: 92px;
    z-index: 1100;
}

.theme-switch__toggle {
    width: 46px;
    height: 46px;
    border: 1px solid var(--bs-line);
    border-radius: 50%;
    background: var(--bs-surface);
    color: var(--bs-brand);
    font-size: 17px;
    box-shadow: var(--bs-shadow-md);
    cursor: pointer;
    transition: transform .2s ease, color .2s ease;
}

.theme-switch__toggle:hover {
    transform: scale(1.07) rotate(-8deg);
}

.theme-switch__panel {
    position: absolute;
    bottom: 58px;
    inset-inline-start: 0;
    width: 195px;
    padding: 12px;
    border: 1px solid var(--bs-line);
    border-radius: 14px;
    background: var(--bs-surface);
    box-shadow: var(--bs-shadow-md);
}

.theme-switch__title {
    margin: 0 0 9px;
    font-size: 12px;
    font-weight: 700;
    color: var(--bs-muted);
}

.theme-switch__opt {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 9px;
    margin-bottom: 4px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--bs-ink);
    font-size: 13px;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease;
}

.theme-switch__opt:hover { background: var(--bs-canvas); }

.theme-switch__opt.is-active {
    background: var(--bs-brand-soft);
    border-color: rgba(var(--bs-brand-rgb), .35);
    color: var(--bs-brand);
}

.theme-switch__dots {
    display: inline-flex;
    flex: none;
    gap: 3px;
}

.theme-switch__dots i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .08);
}

/* جداکننده و سوییچ حالت شب */
.theme-switch__sep {
    height: 1px;
    margin: 10px 2px;
    background: var(--bs-line);
}

.theme-switch__mode {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--bs-line);
    border-radius: 11px;
    background: var(--bs-canvas);
    color: var(--bs-ink);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}

.theme-switch__mode:hover {
    border-color: rgba(var(--bs-brand-rgb), .45);
}

.theme-switch__mode-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 8px;
    background: var(--bs-brand-soft);
    color: var(--bs-brand);
    font-size: 12px;
    transition: background-color .2s ease, color .2s ease;
}

.theme-switch__mode-label { flex: 1; text-align: start; }

/* کلید کشویی کوچک */
.theme-switch__mode-state {
    position: relative;
    flex: none;
    width: 38px;
    height: 21px;
    border-radius: 999px;
    background: var(--bs-line);
    font-size: 0;
    transition: background-color .22s ease;
}

.theme-switch__mode-state::after {
    content: "";
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}

.theme-switch__mode.is-on .theme-switch__mode-state {
    background: var(--bs-brand);
}

.theme-switch__mode.is-on .theme-switch__mode-state::after {
    transform: translateX(17px);
}

[dir="rtl"] .theme-switch__mode.is-on .theme-switch__mode-state::after {
    transform: translateX(-17px);
}

.theme-switch__mode.is-on .theme-switch__mode-icon {
    background: var(--bs-brand);
    color: #fff;
}

@media (max-width: 767px) {
    .theme-switch { bottom: 132px; inset-inline-start: 14px; }
}

/* ==========================================================================
   8) ریسپانسیو
   ========================================================================== */

@media (max-width: 1199px) {
    .shop-section .left-box .shop-left-sidebar { position: static; }
}

@media (max-width: 767px) {
    .top-nav.top-header .navbar-top { min-height: 64px; }
    .navbar-top .web-logo.nav-logo img { max-height: 42px; }

    .product-box,
    .book-product-box { padding: 8px 8px 12px; border-radius: 14px; }

    .product-box .product-detail .name,
    .book-product-box .product-detail .name { font-size: 13px; min-height: 2.8em; }

    .product-box .product-detail .price,
    .book-product-box .product-detail .price { font-size: 15px; }

    .product-box .btn-add-cart { padding: 9px 10px; font-size: 12.5px; }

    /* روی موبایل hover نداریم، پس دکمه‌های روی تصویر همیشه دیده شوند */
    .product-box .product-option,
    .book-product-box .product-option {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .shop-section .top-filter-menu { padding: 10px 12px; }
    .shop-section .top-filter-menu .category-dropdown { width: 100%; }
    .shop-section .top-filter-menu .form-select { flex: 1; max-width: none !important; }
}

/* ==========================================================================
   PWA — دکمه‌ی نصب اپلیکیشن
   ========================================================================== */

.pwa-install {
    position: fixed;
    inset-inline-start: 18px;
    bottom: 148px;
    z-index: 1090;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--bs-brand-dark) 0%, var(--bs-brand) 100%);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: 0 10px 26px rgba(var(--bs-brand-rgb), .38);
    cursor: pointer;
    animation: pwa-in .35s cubic-bezier(.2, .7, .3, 1);
    transition: transform .2s ease, box-shadow .2s ease;
}

.pwa-install:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(var(--bs-brand-rgb), .46);
}

@keyframes pwa-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
    .pwa-install {
        inset-inline-start: 14px;
        bottom: 178px;
        padding: 10px 15px;
        font-size: 12.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-install { animation: none; }
}

/* ==========================================================================
   لایه‌بندی هدر و دراپ‌داون‌ها
   کارت‌های محصول به‌خاطر انیمیشن WOW صاحب transform هستند و stacking context
   می‌سازند؛ چون هدر position:static بود، دراپ‌داون سبد خرید و حساب کاربری
   زیر کارت‌ها می‌رفتند. هدر باید خودش یک لایه‌ی بالاتر بسازد.
   ========================================================================== */

header,
.top-nav.top-header {
    position: relative;
    z-index: 1050;
}

.rightside-box .onhover-div {
    z-index: 1060 !important;
}

/* دراپ‌داون حساب کاربری: همه‌ی آیتم‌ها یک‌دست و خوانا */
.onhover-div-login .user-box-name li a,
.onhover-div .user-box-name li a {
    color: var(--bs-ink) !important;
    opacity: 1 !important;
}

.onhover-div-login .user-box-name li a:hover {
    color: var(--bs-brand) !important;
}

/* ==========================================================================
   فیلتر روی موبایل — پنل کشویی به‌جای فهرست بلندِ بالای صفحه
   ========================================================================== */

@media (max-width: 991px) {
    .shop-section .left-box {
        position: fixed !important;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        z-index: 1070;
        width: 320px;
        max-width: 86vw;
        padding: 0 !important;
        background: var(--bs-surface);
        box-shadow: 0 0 40px rgba(0, 0, 0, .22);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .3s cubic-bezier(.2, .7, .3, 1);
    }

    [dir="rtl"] .shop-section .left-box {
        transform: translateX(100%);
    }

    .shop-section .left-box.show {
        transform: none;
    }

    .shop-section .left-box .shop-left-sidebar {
        position: static;
        height: 100%;
        border: 0 !important;
        border-radius: 0;
        box-shadow: none;
        padding: 8px 16px 90px !important;
    }

    /* سربرگ پنل با دکمه‌ی بستن */
    .filter-panel-head {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 0 -16px 10px;
        padding: 16px;
        border-bottom: 1px solid var(--bs-line);
        background: var(--bs-canvas);
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .filter-panel-head h2 {
        margin: 0;
        font-size: 16px;
        font-weight: 800;
        color: var(--bs-ink);
    }

    .filter-panel-close {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid var(--bs-line);
        border-radius: 10px;
        background: var(--bs-surface);
        color: var(--bs-ink);
        font-size: 16px;
        cursor: pointer;
    }

    /* دکمه‌ی باز کردن فیلتر — همیشه در دسترس، بدون نیاز به اسکرول */
    .shop-section .filter-button-group { margin: 0 0 14px !important; }

    .shop-section .filter-button {
        display: block !important;
    }

    .shop-section .filter-button a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        height: 46px;
        border: 1px solid var(--bs-line);
        border-radius: 12px;
        background: var(--bs-surface);
        color: var(--bs-ink);
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }

    .shop-section .filter-button a i { color: var(--bs-brand); }

    /* پرده‌ی پشت پنل */
    .filter-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1065;
        background: rgba(0, 0, 0, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
    }

    .filter-backdrop.show {
        opacity: 1;
        visibility: visible;
    }

    body.filter-open { overflow: hidden; }
}

@media (min-width: 992px) {
    .filter-panel-head { display: none !important; }
    .filter-backdrop { display: none !important; }
}

/* ==========================================================================
   Toast — وسط صفحه و دکمه‌ی بستن واضح‌تر
   ========================================================================== */

#ajaxToastContainer {
    inset-inline: 0 !important;
    top: auto !important;
    bottom: 24px !important;
    margin-inline: auto !important;
    align-items: center;
    padding: 0 16px !important;
}

.bs-toast {
    width: 100%;
    max-width: 420px;
}

.bs-toast__close {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: var(--bs-canvas);
    border: 1px solid var(--bs-line);
    color: var(--bs-ink);
    font-size: 17px;
    line-height: 1;
    opacity: .85;
}

.bs-toast__close:hover {
    background: var(--bs-danger);
    border-color: var(--bs-danger);
    color: #fff;
    opacity: 1;
}

/* روی موبایل کمی پایین‌تر تا زیر هدر نیفتد */
@media (max-width: 767px) {
    #ajaxToastContainer { bottom: 84px !important; }
    .bs-toast { max-width: none; }
}

/* ==========================================================================
   اصلاحات ریز دکمه‌ها و مودال
   ========================================================================== */

/* --- کد تخفیف: دکمه و ورودی هم‌قد و بدون همپوشانی --- */
.summery-box .coupon-box.input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--bs-line);
    border-radius: 11px;
    overflow: hidden;
    background: var(--bs-canvas);
}

.summery-box .coupon-box .form-control {
    flex: 1;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13.5px;
}

.summery-box .btn-apply {
    flex: none;
    height: 44px;
    padding: 0 20px;
    margin: 0;
    border: 0;
    border-radius: 0 !important;
    background: var(--bs-brand);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .18s ease;
}

.summery-box .btn-apply:hover { background: var(--bs-brand-dark); }

/* --- دکمه‌های اصلی: فاصله‌ی درست بین آیکون و متن --- */
.btn-animation,
.btn-ghost,
.summery-box .proceed-btn,
.summery-box .shopping-button,
.co-step__action,
.empty-state .btn-animation {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    line-height: 1;
}

.btn-animation i,
.summery-box .proceed-btn i,
.btn-ghost i {
    font-size: .95em;
    flex: none;
}

.summery-box .proceed-btn {
    width: 100%;
    height: 48px;
    padding: 0 18px;
}

/* --- مودال: گوشه‌های گرد و دکمه‌ی بستن گرد و واضح --- */
.modal .modal-content,
.theme-modal .modal-dialog .modal-content {
    border-radius: 18px !important;
    overflow: visible;
}

.modal .modal-header,
.theme-modal .modal-dialog .modal-content .modal-header {
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    padding: 18px 22px !important;
}

.modal .modal-footer,
.theme-modal .modal-dialog .modal-content .modal-footer {
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    padding: 16px 22px !important;
}

/* دکمه‌ی بستن — گرد کامل، بیرون کادر، همیشه واضح */
.modal .btn-close,
.theme-modal .modal-dialog .modal-content .modal-header .btn-close {
    position: absolute !important;
    top: -16px !important;
    inset-inline-start: -16px !important;
    inset-inline-end: auto !important;
    right: auto !important;
    left: auto !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background-color: var(--bs-brand) !important;
    background-image: none !important;
    border: 3px solid var(--bs-surface) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22) !important;
    opacity: 1 !important;
}

[dir="rtl"] .modal .btn-close,
[dir="rtl"] .theme-modal .modal-dialog .modal-content .modal-header .btn-close {
    right: auto !important;
    left: -16px !important;
}

.modal .btn-close::before {
    content: "\00d7";
    font-size: 24px;
    line-height: 1;
    color: #fff;
}

.modal .btn-close:hover {
    background-color: var(--bs-brand-dark) !important;
    transform: rotate(90deg);
}

/* در تم شیشه‌ای مودال نباید محو شود */
:root[data-theme="glass"] .modal .modal-content {
    background-color: rgba(255, 255, 255, .82) !important;
}

:root[data-theme="glass"][data-mode="dark"] .modal .modal-content {
    background-color: rgba(28, 40, 46, .88) !important;
}

:root[data-theme="glass"] .modal .modal-header,
:root[data-theme="glass"] .modal .modal-footer {
    background-color: transparent !important;
    border-color: var(--bs-line) !important;
}

/* ==========================================================================
   اسکرول بی‌نهایت
   ========================================================================== */

#infiniteSentinel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 18px 0 6px;
}

.infinite-loader {
    display: flex;
    gap: 7px;
}

.infinite-loader__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bs-brand);
    opacity: .35;
    animation: infinite-bounce 1s infinite ease-in-out;
}

.infinite-loader__dot:nth-child(2) { animation-delay: .15s; }
.infinite-loader__dot:nth-child(3) { animation-delay: .3s; }

@keyframes infinite-bounce {
    0%, 80%, 100% { transform: scale(.7); opacity: .35; }
    40%           { transform: scale(1);  opacity: 1; }
}

.infinite-end {
    margin: 0;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--bs-canvas);
    color: var(--bs-muted);
    font-size: 12.5px;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .infinite-loader__dot { animation: none; }
}

/* ==========================================================================
   اصلاحات دور دوم — دراپ‌داون سبد، تم دارک/شیشه‌ای، برچسب تخفیف
   ========================================================================== */

/* --- دراپ‌داون سبد خرید ---
   ردیف باید عرض کامل بگیرد؛ وگرنه به اندازه‌ی متنش جمع می‌شود و دکمه‌ی حذف
   (که absolute است) در هر ردیف جای دیگری می‌افتد. --- */
.onhover-div .cart-list,
.onhover-div .cart-list > li { width: 100%; display: block; }

.onhover-div .drop-cart {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    gap: 11px;
    /* جا برای دکمه‌ی حذف در انتهای ردیف */
    padding: 11px 34px 11px 0;
}

[dir="ltr"] .onhover-div .drop-cart { padding: 11px 0 11px 34px; }

.onhover-div .drop-cart .drop-contain {
    flex: 1 1 auto;
    min-width: 0;
}

.onhover-div .drop-cart .drop-image {
    flex: 0 0 52px;
    width: 52px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    overflow: hidden;
    background: var(--bs-canvas);
    border: 1px solid var(--bs-line);
}

.onhover-div .drop-cart .drop-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
    display: block;
}

.onhover-div .drop-cart .drop-contain {
    flex: 1;
    min-width: 0;
    padding: 0 0 0 30px;   /* جای دکمه‌ی حذف */
}

[dir="rtl"] .onhover-div .drop-cart .drop-contain {
    padding: 0 0 0 30px;
}

/* دکمه‌ی حذف حالا خواهر تصویر است، نه داخل متن — در همه‌ی ردیف‌ها یک‌جا */
.onhover-div .drop-cart .close-button {
    position: absolute;
    top: 50%;
    inset-inline-end: 0;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--bs-muted);
    font-size: 12px;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}

.onhover-div .drop-cart .close-button:hover {
    background: rgba(var(--bs-sale-rgb), .14);
    color: var(--bs-danger);
}

/* اسکرول‌بار نازک و هم‌رنگ تم به‌جای اسکرول‌بار پیش‌فرض */
.onhover-div .cart-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--bs-brand-rgb), .45) transparent;
    padding-inline-end: 4px;
}

.onhover-div .cart-list::-webkit-scrollbar { width: 5px; }
.onhover-div .cart-list::-webkit-scrollbar-track { background: transparent; }
.onhover-div .cart-list::-webkit-scrollbar-thumb {
    background: rgba(var(--bs-brand-rgb), .45);
    border-radius: 999px;
}

/* --- آکاردئون فیلتر در حالت شب --- */
.shop-section .custom-accordion .accordion-button::after {
    background-color: var(--bs-canvas);
    filter: none;
}

:root[data-mode="dark"] .shop-section .custom-accordion .accordion-button::after,
:root[data-mode="dark"] .accordion-button::after {
    /* آیکون پیش‌فرض بوت‌استرپ تیره است و روی پس‌زمینه‌ی تیره دیده نمی‌شد */
    filter: invert(1) brightness(1.8);
    background-color: rgba(255, 255, 255, .08);
}

:root[data-mode="dark"] .shop-section .custom-accordion .accordion-button:not(.collapsed)::after {
    background-color: rgba(var(--bs-brand-rgb), .25);
}

/* --- مگا‌منوی دسته‌بندی: پس‌زمینه‌ی سفیدِ ثابت قالب --- */
header .dropdown-menu,
header .dropdown-menu-2 {
    background-color: var(--bs-surface) !important;
    border: 1px solid var(--bs-line) !important;
    border-radius: 14px;
    box-shadow: var(--bs-shadow-md);
}

header .dropdown-menu .dropdown-item,
header .dropdown-menu-2 .dropdown-item,
header .dropdown-menu-2 .dropdown-header a {
    color: var(--bs-ink) !important;
}

header .dropdown-menu .dropdown-item:hover,
header .dropdown-menu-2 .dropdown-item:hover {
    color: var(--bs-brand) !important;
    background-color: var(--bs-brand-soft) !important;
}

/* --- نوار هدر: پس‌زمینه‌ی جامانده‌ی قالب --- */
header .top-nav,
header .navbar-top,
.main-nav,
.header-nav-middle .offcanvas-body {
    background-color: transparent !important;
}

.top-nav.top-header {
    background-color: var(--bs-surface) !important;
}

/* --- تم شیشه‌ای: هدر و منوها هم شیشه‌ای --- */
:root[data-theme="glass"] .top-nav.top-header {
    background-color: var(--bs-surface) !important;
    -webkit-backdrop-filter: blur(20px) saturate(155%);
    backdrop-filter: blur(20px) saturate(155%);
    border-bottom: 1px solid var(--bs-line);
}

:root[data-theme="glass"] header .dropdown-menu,
:root[data-theme="glass"] header .dropdown-menu-2,
:root[data-theme="glass"] .rightside-box .onhover-div {
    background-color: rgba(255, 255, 255, .72) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
}

:root[data-theme="glass"][data-mode="dark"] header .dropdown-menu,
:root[data-theme="glass"][data-mode="dark"] header .dropdown-menu-2,
:root[data-theme="glass"][data-mode="dark"] .rightside-box .onhover-div {
    background-color: rgba(28, 40, 46, .80) !important;
}

/* --- برچسب تخفیف با تم هماهنگ شود --- */
.product-box .lable-block,
.book-product-box .lable-block,
.book-product-box .label-box .label {
    background: linear-gradient(135deg, var(--bs-sale-light) 0%, var(--bs-sale) 100%) !important;
    box-shadow: 0 4px 12px rgba(var(--bs-sale-rgb), .32) !important;
}

/* --- صفحه‌بندی عددی در حالت اسکرول بی‌نهایت لازم نیست --- */
#classicPagination { display: none; }
.no-js #classicPagination { display: block; }

/* ==========================================================================
   مگا‌منوی دسته‌بندی — تصویر تزئینی مرتبط با کتاب
   قالب اینجا بنر سبزیجات می‌گذاشت؛ حالا یک طرح کتاب با SVG درون‌خط که
   با رنگ تم عوض می‌شود و درخواست اضافه هم ندارد.
   ========================================================================== */

header .navbar-nav .dropdown-menu-2 {
    position: relative;
    overflow: hidden;
}

header .navbar-nav .dropdown-menu-2::after {
    content: "";
    display: block !important;
    position: absolute;
    left: 18px;              /* همان‌جایی که بنر قبلی قالب بود */
    right: auto;
    bottom: -14px;
    width: 150px;
    height: 120px;
    z-index: 0;
    pointer-events: none;
    opacity: .13;
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 120' fill='none' stroke='%232f6b4f' stroke-width='4' stroke-linejoin='round'%3E%3Cpath d='M75 34C62 22 42 19 21 24v72c21-5 41-2 54 10 13-12 33-15 54-10V24c-21-5-41-2-54 10z'/%3E%3Cpath d='M75 34v72'/%3E%3Cpath d='M36 44h22M36 58h22M92 44h22M92 58h22' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

header .navbar-nav .dropdown-menu-2 .row { position: relative; z-index: 1; }

:root[data-mode="dark"] header .navbar-nav .dropdown-menu-2::after {
    opacity: .18;
    filter: brightness(2.2);
}

/* ==========================================================================
   صفحه حساب کاربری
   ========================================================================== */

.dashboard-left-sidebar {
    border: 1px solid var(--bs-line) !important;
    border-radius: var(--bs-radius);
    background: var(--bs-surface) !important;
    box-shadow: var(--bs-shadow-sm);
    overflow: hidden;
}

/* سربرگ ساده به‌جای کاور و آواتار (کاربر آواتار ندارد) */
.profile-head {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 0 18px;
    background: linear-gradient(140deg, var(--bs-brand-soft) 0%, var(--bs-canvas) 100%);
    border-bottom: 1px solid var(--bs-line);
}

.profile-head__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    color: var(--bs-brand);
    font-size: 24px;
}

.profile-box .profile-name,
.dashboard-left-sidebar .profile-box h3,
.dashboard-left-sidebar .profile-box h6 {
    text-align: center;
    color: var(--bs-ink);
}

/* منوی کناری */
.user-nav-pills { padding: 10px; }

.user-nav-pills .nav-link {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px !important;
    margin-bottom: 3px;
    border: 0;
    border-radius: 11px !important;
    background: transparent !important;
    color: var(--bs-ink) !important;
    font-size: 14px;
    font-weight: 600;
    text-align: start;
    transition: background-color .16s ease, color .16s ease;
}

.user-nav-pills .nav-link svg,
.user-nav-pills .nav-link i { width: 18px; height: 18px; flex: none; }

.user-nav-pills .nav-link:hover {
    background: var(--bs-canvas) !important;
    color: var(--bs-brand) !important;
}

.user-nav-pills .nav-link.active {
    background: var(--bs-brand-soft) !important;
    color: var(--bs-brand) !important;
}

/* عنوان بخش‌ها */
.dashboard-address .title h2,
.dashboard-profile .title h2,
.dashboard-order .title h2 {
    font-size: 19px;
    font-weight: 800;
    color: var(--bs-ink);
}

/* --- کارت آدرس در پروفایل (همان استایل صفحه‌ی تسویه) --- */
.dashboard-address .address-card {
    cursor: default;
    align-items: stretch;
}

.dashboard-address .address-card__actions form { display: inline; }

/* --- «آدرس پیش‌فرض باشد» به‌شکل کارت انتخابی --- */
.default-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid var(--bs-line);
    border-radius: 12px;
    background: var(--bs-canvas);
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
}

.default-toggle:hover { border-color: rgba(var(--bs-brand-rgb), .45); }

.default-toggle input { position: absolute; opacity: 0; pointer-events: none; }

.default-toggle__text {
    flex: 1;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bs-ink);
}

.default-toggle__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
    border: 1.5px solid var(--bs-line);
    border-radius: 7px;
    background: var(--bs-surface);
    color: transparent;
    font-size: 10px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.default-toggle input:checked ~ .default-toggle__mark {
    background: var(--bs-brand);
    border-color: var(--bs-brand);
    color: #fff;
}

/* کل کارت وقتی انتخاب شده روشن می‌شود */
.default-toggle:has(input:checked) {
    border-color: var(--bs-brand);
    background: var(--bs-brand-soft);
}

/* ==========================================================================
   منوی کشویی — اصلاح چیدمان
   مگا‌منوی دسته‌بندی با position:static حتی وقتی بسته بود فضا می‌گرفت و بین
   آیتم‌ها فاصله‌ی بزرگ می‌انداخت.
   ========================================================================== */

@media (max-width: 1199px) {
    header .offcanvas-collapse .offcanvas-body {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: auto;
    }

    .header-nav-middle .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 2px;
        height: auto;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .header-nav-middle .navbar-nav > .nav-item {
        flex: 0 0 auto;
        width: 100%;
        border: 0;
    }

    /* منوی بازشو فقط وقتی باز است جا بگیرد */
    .header-nav-middle .navbar-nav .dropdown-menu,
    .header-nav-middle .navbar-nav .dropdown-menu-2 {
        display: none !important;
        position: static !important;
        width: 100% !important;
        margin: 2px 0 6px !important;
        padding: 6px !important;
        border: 1px solid var(--bs-line) !important;
        border-radius: 10px;
        box-shadow: none !important;
    }

    .header-nav-middle .navbar-nav .dropdown-menu.show,
    .header-nav-middle .navbar-nav .dropdown-menu-2.show {
        display: block !important;
    }

    .header-nav-middle .navbar-nav .dropdown-menu-2 .row { margin: 0; }
    .header-nav-middle .navbar-nav .dropdown-menu-2 [class*="col-"] { width: 100%; padding: 0; }

    .header-nav-middle .navbar-nav .dropdown-menu-2::after { display: none !important; }

    /* فلش کنار آیتم‌های بازشو */
    .header-nav-middle .navbar-nav .nav-link.dropdown-toggle {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
    }
}

/* ==========================================================================
   فرم فروشندگی — بخش‌های تاشو تا صفحه کوتاه بماند
   ========================================================================== */

.seller-group {
    margin-bottom: 12px;
    border: 1px solid var(--bs-line);
    border-radius: 13px;
    background: var(--bs-surface);
    overflow: hidden;
}

.seller-group__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bs-canvas);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--bs-ink);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.seller-group__head::-webkit-details-marker { display: none; }

.seller-group__head > i:first-child {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 8px;
    background: var(--bs-brand-soft);
    color: var(--bs-brand);
    font-size: 12px;
}

.seller-group__head span { flex: 1; }

.seller-group__arrow {
    font-size: 12px;
    color: var(--bs-muted);
    transition: transform .22s ease;
}

.seller-group[open] .seller-group__arrow { transform: rotate(180deg); }

.seller-group__body {
    padding: 16px;
    margin: 0;
}

.seller-group__body > [class*="col-"] { padding-inline: 8px; }

/* ==========================================================================
   صفحه تسویه — گام‌های تاشو
   ========================================================================== */

details.co-step > .co-step__head {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

details.co-step > .co-step__head::-webkit-details-marker { display: none; }

.co-step__summary {
    flex: 1;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--bs-muted);
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.co-step__arrow {
    flex: none;
    font-size: 12px;
    color: var(--bs-muted);
    transition: transform .22s ease;
}

details.co-step[open] .co-step__arrow { transform: rotate(180deg); }

details.co-step[open] .co-step__summary { opacity: 0; }

/* گام پرداخت همیشه برجسته */
.co-step--open { border-color: rgba(var(--bs-brand-rgb), .38); }
.co-step--open .co-step__head { background: var(--bs-brand-soft); }

.free-shipping {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--bs-brand-soft);
    color: var(--bs-brand);
    font-size: 12px;
    font-weight: 700;
}

/* ==========================================================================
   آمار سفارش‌ها در حساب کاربری
   ========================================================================== */

.order-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: 18px 0 6px;
}

.order-stat {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 15px;
    border: 1px solid var(--bs-line);
    border-radius: 13px;
    background: var(--bs-surface);
    box-shadow: var(--bs-shadow-sm);
}

.order-stat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 11px;
    background: var(--bs-brand-soft);
    color: var(--bs-brand);
    font-size: 15px;
}

.order-stat__icon--wait {
    background: rgba(var(--bs-sale-rgb), .12);
    color: var(--bs-sale);
}

.order-stat__icon--ship,
.order-stat__icon--money {
    background: var(--bs-brand-soft);
    color: var(--bs-brand);
}

.order-stat strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--bs-ink);
}

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

@media (max-width: 575px) {
    .order-stats { grid-template-columns: repeat(2, 1fr); gap: 9px; }
    .order-stat { padding: 11px; gap: 9px; }
    .order-stat__icon { width: 34px; height: 34px; font-size: 13px; }
    .order-stat strong { font-size: 15px; }
}

/* حالت خالی داخل جدول‌ها نباید حاشیه‌ی جدول را بشکند */
table .empty-state {
    border: 0;
    background: transparent;
    padding: 34px 20px;
}

/* ==========================================================================
   تم شیشه‌ای — رفع باگ‌ها
   ========================================================================== */

/* ==========================================================================
   باگ ریشه‌ای تم شیشه‌ای
   یک عنصر با backdrop-filter برای فرزندهای position:fixed خودش تبدیل به
   «containing block» می‌شود. چون blur روی خودِ .top-nav.top-header بود،
   کشوی منوی موبایل (fixed, top:0, bottom:0) به‌جای ارتفاع صفحه، ارتفاع
   هدر (۸۸px) می‌گرفت و محتوایش با دو نوار اسکرول له می‌شد.
   راه‌حل: blur روی شبه‌عنصر ::before برود تا خود هدر عنصر عادی بماند.
   ========================================================================== */
:root[data-theme="glass"] .top-nav.top-header {
    position: sticky;
    isolation: isolate;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bs-line) !important;
}

:root[data-theme="glass"] .top-nav.top-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--bs-surface);
    -webkit-backdrop-filter: blur(20px) saturate(155%);
    backdrop-filter: blur(20px) saturate(155%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}

:root[data-theme="glass"][data-mode="dark"] .top-nav.top-header::before {
    background-color: rgba(24, 36, 42, .82);
}

/* کشوی منو در شیشه‌ای باید مات‌تر بماند — فقط وقتی واقعا کشوست.
   بالای ۱۶۰۰px همین عنصر منوی افقی درون‌خطی است و این پس‌زمینه آن را به یک
   نوار سفید مات تبدیل می‌کرد که با تم هم‌خوانی نداشت. */
@media (max-width: 1199px) {
    :root[data-theme="glass"] header .offcanvas-collapse {
        background-color: rgba(255, 255, 255, .88) !important;
        -webkit-backdrop-filter: blur(24px) saturate(160%);
        backdrop-filter: blur(24px) saturate(160%);
    }

    :root[data-theme="glass"][data-mode="dark"] header .offcanvas-collapse {
        background-color: rgba(24, 36, 42, .92) !important;
    }
}

/* منوی افقی (۱۲۰۰ به بالا) باید کاملا شفاف بماند */
@media (min-width: 1200px) {
    :root[data-theme="glass"] header .offcanvas-collapse {
        background-color: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

/* بعضی مرورگرها با backdrop-filter روی عنصر چسبان (sticky) اشکال می‌گیرند */
:root[data-theme="glass"] .summery-box,
:root[data-theme="glass"] .shop-section .left-box .shop-left-sidebar {
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    background-color: rgba(255, 255, 255, .72) !important;
}

:root[data-theme="glass"][data-mode="dark"] .summery-box,
:root[data-theme="glass"][data-mode="dark"] .shop-section .left-box .shop-left-sidebar {
    background-color: rgba(28, 40, 46, .80) !important;
}

/* ==========================================================================
   صورت‌حساب چسبان نباید روی جدول سبد بیفتد
   ========================================================================== */

.summery-box.p-sticky {
    position: sticky;
    top: 96px;
    z-index: 1;
}

.cart-section .row > [class*="col-"] { position: relative; }

#checkoutTable { position: relative; z-index: 0; }

/* ==========================================================================
   جدول سبد خرید نباید از عرض ستونش بیرون بزند
   قالب از .table-responsive-xl استفاده می‌کند که بالای ۱۲۰۰px اسکرول را
   برمی‌دارد و جدول با عرض طبیعی‌اش زیر باکس صورت‌حساب می‌رفت.
   ========================================================================== */

.cart-section .table-responsive-xl,
#checkoutTable .table-responsive-xl {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.cart-section table,
#checkoutTable table {
    width: 100%;
    max-width: 100%;
    table-layout: auto;
}

#checkoutTable td,
#checkoutTable th { word-break: break-word; }

#checkoutTable .product-detail .product { min-width: 0; }




/* ==========================================================================
   «فروشنده شوید» — ستون معرفی باید بالاتراز بماند، نه وسط فرمِ بلند
   ========================================================================== */
.seller-become-section .seller-pitch {
    text-align: start;
}

@media (min-width: 1200px) {
    .seller-become-section .seller-pitch {
        position: sticky;
        top: 96px;
    }
}

.seller-become-section .seller-pitch__title,
.seller-become-section .seller-pitch__text {
    text-align: start;
    margin-inline: 0;
}

/* ==========================================================================
   اصلاحات ممیزی سراسری صفحه‌ها
   ========================================================================== */

/* دکمه‌ی همبرگری موبایل فقط ۲۰×۲۲ پیکسل بود — هدف لمسی استاندارد ۴۴px است.
   (استایل ۴۲px قبلا فقط برای بازه‌ی ۱۲۰۰–۱۵۹۹ نوشته شده بود.) */
@media (max-width: 1199px) {
    .navbar-top .navbar-toggler.navbar-menu-button,
    header .navbar-toggler {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid var(--bs-line);
        border-radius: 12px;
        background: var(--bs-canvas);
        color: var(--bs-ink);
        font-size: 18px;
        line-height: 1;
    }

    header .navbar-toggler .navbar-toggler-icon {
        width: auto;
        height: auto;
        background-image: none;
        color: inherit;
        font-size: inherit;
        line-height: 1;
    }
}

/* لوگوی فوتر: لینک inline بود (ارتفاع ۲۲px) ولی عکس داخلش ۷۳px،
   پس تصویر از کادر لینک بیرون می‌زد و روی متن زیرش می‌افتاد. */
.foot-logo {
    display: inline-block;
    line-height: 0;
    max-width: 180px;
}

.foot-logo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 78px;
    object-fit: contain;
}

/* آیکون خانه در بردکرامب هدف لمسی ۱۶×۱۹ داشت */
.breadcrumb-item > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
}

/* هدر موبایل: نوار یک ردیف فلکس است و دکمه‌ی همبرگری آخرین آیتم بود، پس
   همه‌ی کمبود فضا را او جذب می‌کرد و به ۱۸px له می‌شد. لوگو باید کوتاه شود نه دکمه. */
@media (max-width: 1199px) {
    .navbar-top .navbar-toggler.navbar-menu-button,
    header .navbar-toggler {
        flex: 0 0 44px !important;
        min-width: 44px;
    }

    .navbar-top .web-logo,
    .navbar-top .theme-logo {
        min-width: 0;
        flex-shrink: 1;
    }

    .navbar-top .web-logo img,
    .navbar-top .theme-logo img {
        max-width: 100%;
        height: auto;
    }
}

/* نوار پایین موبایل: z-index=2 داشت و برچسب‌های تخفیف کارت‌ها رویش می‌افتادند.
   ضمنا محتوای انتهای صفحه زیرش پنهان می‌شد. */
@media (max-width: 767px) {
    .mobile-menu {
        z-index: 6 !important;
        background: var(--bs-surface) !important;
        border-top: 1px solid var(--bs-line);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
    }

    body { padding-bottom: 68px; }
}

/* ==========================================================================
   سبد خرید — حذف اسکرول افقی
   جدول پنج‌ستونه ۹۲۴px لازم داشت ولی ستون سبد در ۱۰۲۴px فقط ۵۵۴px است، پس
   نوار اسکرول افقی می‌افتاد و ستون تعداد/حذف بریده می‌شد. با container query
   هر ردیف در فضای تنگ به یک کارت تبدیل می‌شود (برچسب‌های td از قبل در قالب هست).
   ========================================================================== */
.cart-table { container-type: inline-size; }

@container (max-width: 760px) {
    .cart-table .table-responsive-xl { overflow: visible; }

    .cart-table table,
    .cart-table tbody,
    .cart-table td {
        display: block;
        width: 100%;
    }

    /* ردیف = کارت؛ محصول تمام‌عرض بالا، چهار ستون دیگر در یک سطر زیرش */
    .cart-table tr.product-box-contain {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        border: 1px solid var(--bs-line);
        border-radius: var(--bs-radius);
        background: var(--bs-surface);
        padding: 14px;
        margin-bottom: 14px;
    }

    /* #checkoutTable tbody td بالاتر در همین فایل با !important و انتخابگر id
       خط زیر هر سلول را می‌کشد؛ اینجا باید با id بیاییم تا وزن بیشتری داشته باشیم. */
    .cart-table td,
    #checkoutTable .cart-table td {
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    #checkoutTable .cart-table td.product-detail {
        flex: 1 0 100%;
        padding-bottom: 12px !important;
        border-bottom: 1px solid var(--bs-line) !important;
    }

    .cart-table td.price,
    .cart-table td.quantity,
    .cart-table td.subtotal,
    .cart-table td.save-remove {
        display: flex;
        flex: 0 1 auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        width: auto;
        min-width: 0;
        margin: 0;
    }

    .cart-table .table-title {
        display: block !important;
        margin: 0;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        color: var(--bs-muted);
    }

    /* خط‌های تزئینی قالب زیر ستون‌ها در حالت کارت اضافه‌اند */
    .cart-table td.price h5,
    .cart-table td.subtotal h5,
    .cart-table .quantity-price,
    .cart-table .cart_qty { border: 0 !important; margin: 0; }
}

/* قیمت واحد داخل کارت محصول تکراری است وقتی ستون «قیمت» هم دیده می‌شود */
@container (min-width: 761px) {
    .cart-table td.product-detail ul > li:last-child { display: none; }
}

/* ==========================================================================
   ابزارهای نمایش بوت‌استرپ
   در این بیلد قالب، کلاس‌های d-*-none بدون !important ساخته شده‌اند و چون
   قوانین دکمه‌ی ما بعد از bootstrap.css لود می‌شود، دکمه‌های مخصوص موبایل
   (مثل «منوی حساب کاربری» و «منوی فیلتر») روی دسکتاپ هم دیده می‌شدند.
   ========================================================================== */
.d-none { display: none !important; }
@media (min-width: 576px)  { .d-sm-none  { display: none !important; } }
@media (min-width: 768px)  { .d-md-none  { display: none !important; } }
@media (min-width: 992px)  { .d-lg-none  { display: none !important; } }
@media (min-width: 1200px) { .d-xl-none  { display: none !important; } }
@media (min-width: 1400px) { .d-xxl-none { display: none !important; } }

/* از ۱۲۰۰ به بالا منو افقی است، پس همبرگری همان d-xl-none قالب را می‌گیرد. */

/* شناسه‌ی کاربر در سایدبار پروفایل */
.profile-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.profile-head__label {
    font-size: 12px;
    color: var(--bs-muted);
    line-height: 1.2;
}

.profile-head__value {
    font-size: 14px;
    font-weight: 700;
    color: var(--bs-ink);
    line-height: 1.3;
    direction: ltr;
    text-align: start;
}

/* هدر در موبایل ۵۵px سرریز داشت و آیکون پروفایل از لبه بیرون می‌افتاد.
   هر آیتم نوار ابزار ۳۲px فضای جداکننده داشت که در این عرض جا نمی‌شود. */
@media (max-width: 575px) {
    .navbar-top { gap: 8px !important; }

    .rightside-box .right-side-menu { gap: 6px !important; }

    .rightside-box .right-side-menu > li.right-side {
        padding-inline: 0 !important;
        margin-inline: 0 !important;
    }

    .rightside-box .right-side-menu > li.right-side::after,
    .rightside-box .right-side-menu > li.right-side::before {
        display: none !important;
    }
}

/* ==========================================================================
   نوار پایین موبایل — متن و آیکون سفید قالب
   قالب اصلی این نوار را تیره گرفته بود و color:#fff را روی span و .icli
   هاردکد کرده. نوار ما روشن است، پس نوشته‌ها ناپیدا می‌شدند (به‌ویژه در
   تم شیشه‌ای که پس‌زمینه‌اش نیمه‌شفاف است).
   ========================================================================== */
.mobile-menu ul li a span,
.mobile-menu ul li a .icli,
.mobile-menu ul li a i,
.mobile-menu ul li a svg {
    color: inherit !important;
}

.mobile-menu ul li a span { opacity: 1; }

/* در تم شیشه‌ای نوار باید مات‌تر باشد تا زیرش محتوا نخواند */
:root[data-theme="glass"] .mobile-menu {
    background-color: rgba(255, 255, 255, .88) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
}

:root[data-theme="glass"][data-mode="dark"] .mobile-menu {
    background-color: rgba(24, 36, 42, .92) !important;
}