:root {
            --orange: #F48C06;
            --orange-dark: #D97A06;
            --dark: #03071E;
            --dark-soft: #10122E;
            --teal: #2EC4B6;
            --teal-dark: #22A296;
            --cyan-light: #CBF3F0;
            --gray-light: #F5F5F5;
            --text-light: #FFFFFF;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: 'IRANSans', Tahoma, Arial, sans-serif;
            background: var(--gray-light);
            color: #222;
        }
        a { text-decoration: none; }

        /* Top announcement strip */
        .top-strip {
            background: linear-gradient(90deg, var(--teal), var(--teal-dark));
            color: #fff; text-align: center; font-size: 13px; padding: 8px 20px;
            position: relative;
        }
        .top-strip a { color: #fff; font-weight: bold; text-decoration: underline; }
        .top-strip .strip-close {
            position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
            cursor: pointer; background: none; border: none; color: #fff; font-size: 15px; opacity: 0.8;
        }
        .top-strip .strip-close:hover { opacity: 1; }

        /* ---------- HEADER ---------- */
        .site-header { background: var(--dark); color: var(--text-light); }
        .header-top {
            position: relative; z-index: 5;
            background: linear-gradient(135deg, rgba(244,140,6,0.10), rgba(46,196,182,0.08));
            display: grid; grid-template-columns: auto minmax(260px, 640px) auto;
            align-items: center; gap: 28px;
            padding: 20px 24px; max-width: 1280px; margin: 0 auto;
        }
        /* ⚠️ اصلاح (لوگوی کش‌اومده و زننده توی موبایل): .logo یه فلکس عمودیه و
           چون align-items ست نشده بود، مرورگر به‌صورت پیش‌فرض (stretch) بچه‌ش
           (عکس لوگو) رو کل عرض سلول grid پر می‌کرد و کشیده/بدشکل نشون می‌داد.
           توی دسکتاپ چون لوگو کنار عناصر دیگه‌ست این کشیدگی کمتر به چشم
           می‌اومد، ولی توی موبایل (که لوگو کل عرض یک ردیف رو داره) خیلی
           زننده بود. الان با align-items: flex-start فقط به اندازه‌ی خودِ
           عکس (44 یا 36 پیکسل) جا می‌گیره، نه کل عرض سلول. */
        .logo { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; white-space: nowrap; }
        .logo .logo-main { font-size: 22px; font-weight: bold; color: var(--orange); }
        .logo .logo-sub { font-size: 11px; color: var(--cyan-light); }

        /* Mobile hamburger button (opens the main nav / category menu on small screens) */
        .mobile-menu-toggle {
            display: none; background: none; border: none; color: var(--text-light);
            cursor: pointer; padding: 8px; align-items: center; justify-content: center;
        }
        .mobile-menu-toggle svg { width: 26px; height: 26px; }

        /* White pill search bar (digikala-style reference) */
        .search-bar {
            width: 100%; height: 48px; display: flex; align-items: center;
            border-radius: 999px; background: linear-gradient(#ffffff, #fbfbfd);
            box-shadow: 0 3px 14px rgba(3,7,30,0.18);
            border: 1px solid rgba(255,255,255,0.5);
            padding: 0 7px 0 16px;
            transition: box-shadow 0.25s, border-color 0.25s;
        }
        .search-bar:focus-within {
            box-shadow: 0 3px 18px rgba(244,140,6,0.32), 0 0 0 2px rgba(244,140,6,0.22);
        }
        .search-icon-btn {
            background: none; border: none; cursor: pointer; padding: 0; margin: 0;
            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
            color: #b0b0bd; transition: color 0.2s;
        }
        .search-icon-btn:hover { color: var(--orange); }
        .search-icon-btn svg { width: 20px; height: 20px; }
        .search-bar input {
            flex: 1; height: 100%; padding: 0 12px; border: none; font-size: 14.5px; font-family: inherit;
            background: transparent; color: #222; min-width: 0;
        }
        .search-bar input::placeholder { color: #a8a8b8; }
        .search-clear-btn {
            width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
            background: #f0f0f3; color: #888; display: none; align-items: center; justify-content: center;
            flex-shrink: 0; font-size: 13px; transition: background 0.2s;
        }
        .search-clear-btn:hover { background: #e2e2e8; }
        .search-bar.has-text .search-clear-btn { display: flex; }

        /* Search wrapper + suggestions dropdown (technolife-style) */
        .search-wrapper { position: relative; width: 100%; }
        .search-dropdown {
            position: absolute; top: calc(100% + 10px); right: 0; left: 0;
            background: #fff; border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,0.22);
            padding: 16px; z-index: 50; opacity: 0; visibility: hidden; transform: translateY(-6px);
            transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
            max-height: 420px; overflow-y: auto;
        }
        .search-wrapper.open .search-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
        .search-dropdown-hint {
            display: flex; align-items: center; gap: 8px; color: #9a9aa6;
            background: var(--gray-light); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; font-size: 13px;
        }
        .search-dropdown-hint svg { width: 18px; height: 18px; flex-shrink: 0; }
        .search-dropdown-title { font-size: 13px; font-weight: bold; color: #555; margin-bottom: 10px; }
        .search-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
        .search-tag {
            display: inline-block; padding: 7px 14px; border-radius: 999px; background: var(--gray-light);
            color: #333; font-size: 13px; cursor: pointer; border: 1px solid transparent; transition: all 0.15s;
        }
        .search-tag:hover { background: rgba(244,140,6,0.12); border-color: var(--orange); color: var(--orange-dark); }
        .search-results-list { list-style: none; padding: 0; margin: 0 0 14px; display: none; }
        .search-results-list.show { display: block; }
        .search-results-list li a {
            display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px;
            color: #333; font-size: 13px; transition: background 0.15s;
        }
        .search-results-list li a:hover { background: var(--gray-light); }
        .search-results-list li a img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: var(--gray-light); flex-shrink: 0; }
        .search-result-icon {
            width: 36px; height: 36px; border-radius: 6px; background: var(--gray-light); flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; color: #b5b5c0;
        }
        .search-result-icon svg { width: 18px; height: 18px; }
        .search-result-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
        .search-result-name { font-size: 13px; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .search-result-name strong { color: var(--orange-dark); font-weight: 800; }
        .search-result-category { font-size: 11px; color: #4b7bec; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .search-no-results { padding: 16px 6px; text-align: center; color: #999; font-size: 13px; }
        .search-modal-bg {
            position: fixed; inset: 0; background: rgba(3,7,30,0.35); z-index: 40;
            opacity: 0; visibility: hidden; transition: opacity 0.18s, visibility 0.18s;
        }
        .search-modal-bg.show { opacity: 1; visibility: visible; }
        .search-ads-banner { margin-top: 16px; display: block; border-radius: 10px; overflow: hidden; line-height: 0; }
        .search-ads-banner img { width: 100%; height: auto; display: block; transition: transform 0.2s; }
        .search-ads-banner:hover img { transform: scale(1.02); }

        .header-icons { display: flex; gap: 12px; align-items: center; white-space: nowrap; }

        /* ---- Consultation glass box (مشاوره قبل از خرید) ---- */
        .consult-box {
            display: flex; align-items: center; gap: 10px; padding: 6px 16px; border-radius: 10px;
            background: rgba(67, 170, 139, 0.32);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(67, 170, 139, 0.75);
            box-shadow: 0 4px 16px rgba(67, 170, 139, 0.30);
            transition: transform 0.15s, background 0.15s; white-space: nowrap;
        }
        .consult-box:hover { transform: translateY(-2px); background: rgba(67, 170, 139, 0.42); border-color: rgba(249, 132, 74, 0.6); }
        .consult-box .consult-icon {
            width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
            background: #f9844a; display: flex; align-items: center; justify-content: center;
        }
        .consult-box .consult-icon svg { width: 16px; height: 16px; color: #fff; }
        .consult-box .consult-text { display: flex; flex-direction: row; align-items: baseline; gap: 6px; }
        .consult-box .consult-label { font-size: 12px; color: #f9844a; font-weight: 700; }
        .consult-box .consult-phone { font-size: 14px; color: #f9844a; font-weight: bold; direction: ltr; }

        .header-actions-col { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }

        /* Glass auth pill */
        .auth-glass {
            display: flex; gap: 14px; align-items: center;
            background: rgba(255,255,255,0.08);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: 30px; padding: 9px 18px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
        }
        .auth-glass a { color: var(--text-light); font-size: 13px; transition: color 0.2s; }
        .auth-glass a:hover { color: var(--teal); }

        /* Cart button */
        .cart-btn {
            display: flex; align-items: center; gap: 7px;
            background: rgba(244,140,6,0.18);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(244,140,6,0.45);
            padding: 9px 18px; border-radius: 26px; color: #fff; font-size: 13px; position: relative;
            box-shadow: 0 0 16px rgba(244,140,6,0.25); transition: background 0.2s;
        }
        .cart-btn:hover { background: rgba(244,140,6,0.32); }
        .cart-badge {
            background: var(--orange); color: #fff; font-size: 10px; border-radius: 50%;
            padding: 1px 6px; margin-right: 2px;
        }

        /* ---------- MEGA MENU NAV ---------- */
        .main-nav { background: var(--dark-soft); border-top: 1px solid rgba(255,255,255,0.08); }
        .main-nav-inner {
            max-width: 1280px; margin: 0 auto; display: flex; align-items: center;
            justify-content: space-between; gap: 4px; padding: 0 24px;
        }
        .main-nav-items { display: flex; align-items: center; gap: 4px; }
        .nav-item { position: relative; }
        .nav-trigger { display: block; color: var(--text-light); padding: 13px 16px; font-size: 14px; cursor: pointer; transition: color 0.2s, background 0.2s; }
        .nav-item:hover .nav-trigger { color: var(--orange); background: rgba(244,140,6,0.08); }
        /* 🔧 اصلاح (۴ مهر - منوی موبایل): «برند خودرو ▾» یه <button> ئه (نه
           <a> مثل بقیه‌ی آیتم‌های منو)، پس قانون سراسری «button, .btn» توی
           همین فایل (پایین‌تر: پس‌زمینه نارنجی، متن سفید و وسط‌چین،
           margin-top: 22px، width: 100%) رویش اعمال می‌شد — یعنی این یکی
           آیتم منو، برخلاف «استعلام گارانتی»/«مقالات خودرو»/«درباره ما»
           (که <a> ساده‌ان)، یه دکمه‌ی نارنجی وسط‌چین به‌نظر می‌رسید، نه یه
           ردیف متن راست‌چین هم‌شکل با بقیه. اینجا دوباره ظاهرش رو با بقیه‌ی
           آیتم‌های .nav-trigger یکسان می‌کنیم.
        */
        button.nav-trigger {
            background: none; margin: 0; width: 100%; text-align: right; border: none;
            font-family: inherit; font-weight: normal;
        }
        .nav-item:hover button.nav-trigger { background: rgba(244,140,6,0.08); }

        /* Categories button (hamburger-style trigger, like reference) */
        .categories-trigger {
            display: flex; align-items: center; gap: 8px;
            background: var(--orange); color: #fff !important; font-weight: bold;
            padding: 13px 18px; margin: 0; border-radius: 0;
        }
        .categories-trigger:hover, .nav-item:hover .categories-trigger {
            background: var(--orange-dark); color: #fff !important;
        }
        .categories-trigger svg { width: 19px; height: 19px; flex-shrink: 0; }
        .categories-trigger .chevron { width: 12px; height: 12px; margin-right: 2px; transition: transform 0.2s; }
        .nav-item.open .categories-trigger .chevron { transform: rotate(180deg); }
        .mega-dropdown {
            display: none; position: absolute; top: 100%; right: 0; background: #fff; color: #222;
            box-shadow: 0 10px 30px rgba(0,0,0,0.25); border-radius: 0 0 10px 10px; border-top: 3px solid var(--orange);
            padding: 24px; min-width: 640px; max-width: 900px; z-index: 200;
            flex-wrap: wrap; gap: 28px; max-height: 420px; overflow-y: auto;
        }
        /* Click/tap-to-open works on every device (mouse + touch). Hover is an extra
           convenience layer, only enabled for devices that actually have real hover (desktop mouse),
           so it never gets "stuck open" on touch screens. */
        .nav-item.open .mega-dropdown { display: flex; }
        @media (hover: hover) and (pointer: fine) {
            .nav-item:hover .categories-trigger .chevron { transform: rotate(180deg); }
            .nav-item:hover .mega-dropdown { display: flex; }
        }
        .mega-column { min-width: 150px; }
        .mega-column h4 {
            color: var(--teal-dark); margin-bottom: 10px; font-size: 14px;
            border-bottom: 1px solid var(--cyan-light); padding-bottom: 8px;
        }
        .mega-column a { display: block; color: #333; padding: 5px 8px; font-size: 13px; border-radius: 6px; transition: all 0.15s; }
        .mega-column a:hover { color: var(--orange-dark); background: var(--cyan-light); }
        .mega-empty { color: #999; font-size: 13px; padding: 10px 0; }

        /* ---------- RESPONSIVE / MOBILE NAV ---------- */
        @media (max-width: 860px) {
            .header-top {
                grid-template-columns: 1fr auto;
                grid-template-areas: "logo toggle" "search search" "actions actions";
                row-gap: 14px; padding: 16px 16px;
            }
            .logo { grid-area: logo; }
            .mobile-menu-toggle { display: flex; grid-area: toggle; }
            .search-wrapper { grid-area: search; }
            .header-actions-col { grid-area: actions; align-items: stretch; }
            .header-icons { justify-content: space-between; }
            .auth-glass {
                flex: 1; min-width: 0; overflow: hidden;
                justify-content: space-between; gap: 6px; padding: 8px 12px;
            }
            .auth-glass a { font-size: 11.5px; white-space: nowrap; }
            .consult-box { margin: 14px 20px 18px; width: calc(100% - 40px); justify-content: center; }

            .main-nav-inner { flex-direction: column; align-items: stretch; padding: 0; }
            .main-nav-items {
                flex-direction: column; align-items: stretch; width: 100%;
                max-height: 0; overflow: hidden; transition: max-height 0.25s ease;
            }
            .main-nav.nav-open .main-nav-items { max-height: 2000px; }
            .nav-item { width: 100%; }
            .nav-trigger, .categories-trigger { width: 100%; padding: 14px 20px; }
            .mega-dropdown {
                position: static; box-shadow: none; border-radius: 0; border-top: 1px solid rgba(255,255,255,0.08);
                min-width: 0; max-width: none; width: 100%; background: #fff;
            }
        }

        /* ---------- GENERIC CONTAINER ---------- */
        .container {
            max-width: 500px; margin: 60px auto; background: #fff; border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08); padding: 32px;
        }
        .container.wide { max-width: 960px; }
        .container.full { max-width: 1280px; box-shadow: none; background: transparent; padding: 24px; margin: 0 auto; }
        .hero-full:empty { display: none; }

        h1, h2 { color: var(--dark); margin-bottom: 20px; }
        label { display: block; margin-top: 14px; margin-bottom: 6px; font-size: 14px; color: #444; }
        input[type="text"], input[type="email"], input[type="password"], textarea {
            width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; font-family: inherit;
        }
        input:focus, textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(244,140,6,0.15); }
        button, .btn {
            display: inline-block; margin-top: 22px; width: 100%; padding: 12px; background: var(--orange);
            color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: bold; cursor: pointer;
            transition: background 0.2s; text-align: center; text-decoration: none;
        }
        button:hover, .btn:hover { background: var(--orange-dark); }
        .errorlist { color: #d32f2f; list-style: none; margin-top: 8px; font-size: 13px; }
        .messages { list-style: none; margin-bottom: 16px; max-width: 1280px; margin-left: auto; margin-right: auto; padding: 16px 24px 0; }
        .messages li { padding: 10px 14px; border-radius: 8px; margin-bottom: 8px; font-size: 14px; }
        .messages .success { background: #e6f7e6; color: #2e7d32; }
        .messages .info { background: var(--cyan-light); color: var(--teal-dark); }
        .messages .error { background: #fdecea; color: #c62828; }
        .footer-link { text-align: center; margin-top: 20px; font-size: 14px; }
        .footer-link a { color: var(--orange); }


        /* ---------- Customer contact widget ---------- */
        /* bottom offset stacked ABOVE the WhatsApp button (58px height + 24px gap + 14px breathing room) so the two floating buttons never overlap.
           Selector specificity raised (body .customer-chat) on purpose: search-bar.css loads AFTER this block, and if it also
           targets .customer-chat with a plain class selector, this rule needs to win the cascade regardless. */
        body .customer-chat { position: fixed; left: 24px; bottom: 110px; z-index: 1000; direction: rtl; font-family: 'IRANSans', Tahoma, Arial, sans-serif; }
        .customer-chat-fab { position:relative; width:60px; height:60px; border:0; border-radius:50%; background:linear-gradient(145deg,#43aa8b 0%,#2f9074 100%); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 10px 26px rgba(67,170,139,.34), inset 0 1px 0 rgba(255,255,255,.22); transition:transform .22s ease,box-shadow .22s ease; }
        .customer-chat-fab:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 15px 34px rgba(67,170,139,.44), inset 0 1px 0 rgba(255,255,255,.25); }
        .customer-chat-fab svg { width:31px; height:31px; }
        /* لیبل بالای آیکون میشینه (نه هم‌ردیفش) و دم‌ش از پایین به سمت آیکون اشاره می‌کنه */
        .customer-chat-hover-label { position:absolute; left:-6px; bottom:74px; transform:translateY(8px); width:188px; min-height:66px; box-sizing:border-box; padding:11px 15px 10px; background:rgba(255,255,255,.98); color:#17211e; border:1px solid rgba(67,170,139,.18); border-radius:14px; box-shadow:0 12px 30px rgba(3,7,30,.16); opacity:0; visibility:hidden; transition:opacity .2s ease,transform .2s ease; pointer-events:none; white-space:nowrap; text-align:right; direction:rtl; }
        .customer-chat-hover-label::before { content:""; position:absolute; left:24px; bottom:-7px; width:13px; height:13px; background:#fff; border-bottom:1px solid rgba(67,170,139,.18); border-right:1px solid rgba(67,170,139,.18); transform:rotate(45deg); }
        .customer-chat-hover-label strong { display:block; margin:0; padding:0; color:#18231f; font-family:'IRANSans',Tahoma,Arial,sans-serif; font-size:15px; line-height:1.45; font-weight:800; letter-spacing:-.25px; }
        .customer-chat-hover-label span { display:flex; align-items:center; justify-content:flex-start; gap:6px; margin-top:3px; padding:0; color:#43816e; font-family:'IRANSans',Tahoma,Arial,sans-serif; font-size:11.5px; line-height:1.5; font-weight:700; }
        .customer-chat-hover-label i { flex:0 0 7px; width:7px; height:7px; border-radius:50%; background:#43aa8b; display:inline-block; box-shadow:0 0 0 3px rgba(67,170,139,.13); }
        .customer-chat:hover .customer-chat-hover-label, .customer-chat:focus-within .customer-chat-hover-label { opacity:1; visibility:visible; transform:translateY(0); }
        .customer-chat.open .customer-chat-hover-label { opacity:0; visibility:hidden; }
        @media (max-width:600px) { .customer-chat-hover-label { left:-4px; bottom:68px; width:170px; min-width:170px; min-height:62px; padding:10px 13px 9px; transform:translateY(8px); } .customer-chat-hover-label strong{font-size:14px;} .customer-chat-hover-label span{font-size:10.5px;} }
        .customer-chat-pulse { position:absolute; width:11px; height:11px; top:4px; right:4px; background:#F48C06; border:2px solid #fff; border-radius:50%; }
        .customer-chat-panel { position:absolute; left:0; bottom:72px; width:355px; max-width:calc(100vw - 32px); max-height:calc(100vh - 140px); background:#fff; border:1px solid rgba(3,7,30,.08); border-radius:20px; overflow:hidden; box-shadow:0 22px 60px rgba(3,7,30,.25); opacity:0; visibility:hidden; transform:translateY(12px) scale(.97); transform-origin:bottom left; transition:all .2s ease; }
        .customer-chat.open .customer-chat-panel { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
        .customer-chat-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 18px 16px; background:linear-gradient(135deg,#03071E,#10122E); color:#fff; }
        .customer-chat-head strong { display:block; font-size:15px; margin-bottom:5px; }
        .customer-chat-head span { display:flex; align-items:center; gap:6px; color:#CBF3F0; font-size:10px; }
        .customer-chat-head i { width:7px; height:7px; border-radius:50%; background:#2EC4B6; display:inline-block; }
        .customer-chat-close { border:0; background:rgba(255,255,255,.1); color:#fff; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:21px; line-height:1; }
        .customer-chat-body { padding:15px; }
        .customer-chat-welcome { background:#f6f8f9; border-radius:12px; padding:11px 12px; color:#555; font-size:11px; line-height:1.9; margin-bottom:12px; }
        .customer-chat-form { display:flex; flex-direction:column; gap:6px; }
        .customer-chat-form label { font-size:11px; color:#555; font-weight:700; margin-top:3px; }
        .customer-chat-form input,.customer-chat-form textarea { width:100%; border:1px solid #e6e7eb; border-radius:10px; padding:10px 11px; outline:none; font-family:inherit; font-size:12px; color:#222; background:#fff; transition:border-color .18s,box-shadow .18s; }
        .customer-chat-form textarea { resize:vertical; min-height:76px; }
        .customer-chat-form input:focus,.customer-chat-form textarea:focus { border-color:rgba(46,196,182,.7); box-shadow:0 0 0 3px rgba(46,196,182,.1); }
        .customer-chat-form button { margin-top:5px; border:0; border-radius:11px; padding:11px 14px; background:linear-gradient(135deg,#F48C06,#df7600); color:#fff; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; transition:transform .18s,box-shadow .18s; }
        .customer-chat-form button:hover { transform:translateY(-1px); box-shadow:0 6px 15px rgba(244,140,6,.25); }
        .customer-chat-form button span { margin-right:7px; font-size:16px; }
        .customer-chat-note { color:#999; font-size:9px; text-align:center; margin-top:9px; }
        @media (max-width:600px) { body .customer-chat { left:14px; bottom:226px; } .customer-chat-fab { width:54px; height:54px; } .customer-chat-panel { bottom:65px; width:calc(100vw - 28px); max-width:none; } }

        /* ---------- FOOTER ---------- */
        .footer-inner { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; position: relative; z-index: 1; }
        .footer-col h5 { color: var(--orange); margin-bottom: 12px; font-size: 14px; }
        .footer-col a { display: block; color: #d8d8e2; padding: 3px 0; transition: color 0.2s; }
        .footer-col a:hover { color: var(--teal); }
        .footer-col a.inline-link { display: inline; padding: 0; }
        .footer-col p { padding: 3px 0; line-height: 1.8; }
        .footer-bottom { position: relative; z-index: 1; text-align: center; margin-top: 30px; color: #9a9aae; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 16px; }

        /* ---------- FLOATING WHATSAPP BUTTON ---------- */
        /* body prefix: same cascade-safety reasoning as .customer-chat above, since search-bar.css loads after this block. */
        body .whatsapp-float {
            position: fixed; bottom: 24px; left: 24px; z-index: 999;
            width: 58px; height: 58px; border-radius: 50%;
            background: #25D366; display: flex; align-items: center; justify-content: center;
            box-shadow: 0 4px 16px rgba(37,211,102,0.5);
            transition: transform 0.2s, box-shadow 0.2s;
            animation: wa-pulse 2.4s infinite;
        }
        .whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 6px 22px rgba(37,211,102,0.65); }
        .whatsapp-float svg { width: 30px; height: 30px; }
        @keyframes wa-pulse {
            0% { box-shadow: 0 4px 16px rgba(37,211,102,0.5), 0 0 0 0 rgba(37,211,102,0.4); }
            70% { box-shadow: 0 4px 16px rgba(37,211,102,0.5), 0 0 0 14px rgba(37,211,102,0); }
            100% { box-shadow: 0 4px 16px rgba(37,211,102,0.5), 0 0 0 0 rgba(37,211,102,0); }
        }
        @media (max-width: 600px) {
            body .whatsapp-float { bottom: 150px; left: 16px; width: 52px; height: 52px; }
            .whatsapp-float svg { width: 26px; height: 26px; }
        }

        /* ---------- MOBILE BOTTOM NAV BAR ---------- */
        .mobile-bottom-nav {
            display: none;
        }
        @media (max-width: 600px) {
            body { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }

            .mobile-bottom-nav {
                display: flex; align-items: center; justify-content: space-around;
                position: fixed; left: 30px; right: 30px; bottom: 18px; z-index: 998;
                background: rgba(9, 13, 33, 0.72);
                backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
                border: 1px solid rgba(255,255,255,0.09);
                border-radius: 26px;
                box-shadow: 0 14px 40px rgba(3,7,30,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
                padding: 9px 6px calc(9px + env(safe-area-inset-bottom, 0px));
            }
            .mbn-item {
                position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
                gap: 4px; padding: 4px 2px; color: rgba(255,255,255,0.42); text-decoration: none;
                transition: color 0.35s ease, transform 0.35s cubic-bezier(.34,1.56,.64,1);
            }
            .mbn-item:active { transform: scale(0.9); }
            .mbn-icon-wrap {
                position: relative; width: 32px; height: 32px; border-radius: 50%;
                display: flex; align-items: center; justify-content: center;
                transition: all 0.35s cubic-bezier(.34,1.56,.64,1);
            }
            .mbn-icon-wrap svg { width: 18px; height: 18px; transition: all 0.3s ease; }
            .mbn-label { font-size: 10px; transition: color 0.35s ease, opacity 0.3s ease; }
            .mbn-badge {
                position: absolute; top: -2px; left: -4px; background: var(--orange); color: #fff;
                font-size: 9px; line-height: 1; border-radius: 50%; padding: 3px 5px; font-weight: 700;
                box-shadow: 0 0 0 2px #0a0e21; z-index: 1;
            }

            /* تب فعال: بزرگ‌تر می‌شه، از خط نوار بالاتر میاد و یه هاله‌ی نارنجیِ نرم دورش می‌زنه */
            .mbn-item.active { color: #fff; transform: translateY(-13px); }
            .mbn-item.active .mbn-icon-wrap {
                width: 50px; height: 50px;
                background: radial-gradient(circle, rgba(244,140,6,0.32), rgba(244,140,6,0.04) 72%);
                box-shadow: 0 0 0 1.5px rgba(244,140,6,0.9), 0 0 22px 3px rgba(244,140,6,0.5), 0 10px 22px rgba(3,7,30,0.5);
                animation: mbn-glow 2.6s ease-in-out infinite;
            }
            .mbn-item.active .mbn-icon-wrap svg { width: 21px; height: 21px; color: var(--orange); filter: drop-shadow(0 0 6px rgba(244,140,6,0.75)); }
            .mbn-item.active::after {
                content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
                width: 42px; height: 14px; border-radius: 50%; filter: blur(7px); pointer-events: none;
                background: radial-gradient(ellipse, rgba(244,140,6,0.45), transparent 72%);
            }
            @keyframes mbn-glow {
                0%, 100% { box-shadow: 0 0 0 1.5px rgba(244,140,6,0.85), 0 0 18px 2px rgba(244,140,6,0.45), 0 10px 22px rgba(3,7,30,0.5); }
                50% { box-shadow: 0 0 0 1.5px rgba(244,140,6,1), 0 0 30px 6px rgba(244,140,6,0.7), 0 10px 24px rgba(3,7,30,0.5); }
            }
        }

        /* ---------- MOBILE FIXED "ADD TO CART" TOP BAR ---------- */
        /* یه نوار سبک، جدا از کارت‌های محصول، که زیر هدر (به‌صورت sticky) می‌شینه و
           تعداد کالای سبد خرید رو نشون می‌ده. کاملاً مستقل از نوار پایین موبایله،
           پس هیچ‌وقت روی دکمه‌ی «افزودن به سبد خرید» کارت‌ها نمی‌افته. */
        .mobile-cart-bar { display: none; }
        @media (max-width: 600px) {
            .mobile-cart-bar {
                display: flex; align-items: center; justify-content: space-between; gap: 10px;
                position: sticky; top: 0; z-index: 500;
                background: linear-gradient(90deg, var(--dark), var(--dark-soft));
                color: #fff; padding: 10px 14px;
                box-shadow: 0 4px 14px rgba(3,7,30,0.25);
            }
            .mobile-cart-bar.mcb-hidden { display: none; }
            .mcb-info { display: flex; align-items: center; gap: 8px; font-size: 13px; }
            .mcb-icon { font-size: 16px; }
            .mcb-count {
                background: var(--orange); color: #fff; font-weight: 800; font-size: 11px;
                border-radius: 50%; min-width: 18px; height: 18px; display: inline-flex;
                align-items: center; justify-content: center; padding: 0 2px;
            }
            .mcb-btn {
                background: var(--orange); color: #fff; font-size: 12px; font-weight: 700;
                padding: 7px 14px; border-radius: 20px; white-space: nowrap;
            }
            .mcb-btn:hover { background: var(--orange-dark); }
        }

        /* ---------- SHARED PRODUCT CARD (used across home, list, detail) ---------- */
        .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
        .product-card {
            background: #fff; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.06);
            padding: 14px; display: flex; flex-direction: column; position: relative;
            transition: transform 0.2s, box-shadow 0.2s; border: 1px solid transparent;
        }
        .product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 24px rgba(0,0,0,0.12); border-color: var(--cyan-light); }
        .product-card img { width: 100%; height: 140px; object-fit: contain; margin-bottom: 10px; }
        .product-card .no-image {
            width: 100%; height: 140px; background: #f4f4f4; border-radius: 8px; margin-bottom: 10px;
            display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 13px;
        }
        .product-card h3 { font-size: 13px; color: #222; margin-bottom: 6px; min-height: 34px; font-weight: 600; }
        .discount-badge {
            position: absolute; top: 10px; left: 10px; background: linear-gradient(135deg, var(--orange), var(--orange-dark));
            color: #fff; font-size: 11px; font-weight: bold; padding: 3px 10px; border-radius: 20px; z-index: 2;
            box-shadow: 0 2px 8px rgba(244,140,6,0.4);
        }
        .price-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
        .price-row .final {
            color: var(--orange-dark); font-weight: bold; font-size: 17px; letter-spacing: 0.3px;
            display: inline-flex; align-items: baseline; gap: 4px; direction: ltr; unicode-bidi: plaintext;
        }
        .price-row .final .rial-unit { font-size: 11px; font-weight: 600; color: #8a8a95; direction: rtl; }
        .price-row .original {
            color: #aaa; font-size: 12px; text-decoration: line-through; direction: ltr; unicode-bidi: plaintext;
        }
        .product-card form { margin-top: auto; }
        .product-card button { margin-top: 0; padding: 9px; font-size: 13px; border-radius: 8px; }

        /* روی موبایل ۲ کارت کنار هم نشون بدیم (نه یک ستون تمام‌عرض) */
        @media (max-width: 700px) {
            .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
            .product-card { padding: 10px; border-radius: 10px; }
            .product-card img,
            .product-card .no-image { height: 105px; margin-bottom: 8px; }
            .product-card h3 {
                font-size: 12px; margin-bottom: 4px; line-height: 15px;
                min-height: 30px; max-height: 30px; overflow: hidden;
                display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            }
            .price-row .final { font-size: 13px; }
            .price-row .original { font-size: 11px; }
            .product-card button { padding: 8px 4px; font-size: 12px; }
        }
        .breadcrumb { font-size: 13px; color: #888; margin-bottom: 16px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
        .breadcrumb a { color: #888; }
        .breadcrumb a:hover { color: var(--orange); }
        .filter-chip {
            display: inline-flex; align-items: center; gap: 8px; background: var(--cyan-light); color: var(--teal-dark);
            padding: 6px 14px; border-radius: 20px; font-size: 13px; margin-bottom: 16px;
        }
        .filter-chip a { color: var(--teal-dark); font-weight: bold; }
        .stock-badge {
            display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 5px 12px;
            border-radius: 20px; margin-bottom: 14px; font-weight: bold;
        }
        .stock-badge.in-stock { background: #e6f7e6; color: #2e7d32; }
        .stock-badge.low-stock { background: #fff3e0; color: #e65100; }
        .stock-badge.out-stock { background: #fdecea; color: #c62828; }
        .qty-stepper { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
        .qty-stepper button {
            width: 38px; height: 40px; margin: 0; background: var(--gray-light); color: var(--dark); border: none;
            font-size: 18px; cursor: pointer; border-radius: 0; padding: 0;
        }
        .qty-stepper button:hover { background: var(--cyan-light); }
        .qty-stepper input {
            width: 46px; height: 40px; text-align: center; border: none; border-right: 1px solid #ddd; border-left: 1px solid #ddd;
            font-size: 14px; border-radius: 0; padding: 0;
        }

        /* ---- Add-to-cart toast notification (no full page reload needed) ---- */
        .cart-toast {
            position: fixed; bottom: 24px; right: 50%; transform: translate(50%, 20px);
            background: var(--dark); color: #fff; padding: 12px 22px; border-radius: 10px;
            font-size: 13.5px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); z-index: 1200;
            opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; display: flex; align-items: center; gap: 8px;
            white-space: nowrap;
        }
        .cart-toast.show { opacity: 1; transform: translate(50%, 0); }
        .cart-toast .toast-icon { color: var(--teal); font-size: 15px; }
        @media (max-width: 600px) {
            .cart-toast { right: 16px; left: 16px; transform: translateY(20px); white-space: normal; text-align: center; }
            .cart-toast.show { transform: translateY(0); }
        }

        /* ---- Add-to-cart success state + quantity stepper (product cards) ---- */
        .add-to-cart-form button[type="submit"] { transition: background 0.2s, transform 0.15s; }
        .add-to-cart-form button[type="submit"].just-added {
            background: #52b788 !important; transform: scale(0.97);
        }
        .add-to-cart-form button[type="submit"].view-cart-btn,
        .sbb-btn.view-cart-btn {
            background: #52b788 !important;
        }
        .add-to-cart-form button[type="submit"].view-cart-btn:hover,
        .sbb-btn.view-cart-btn:hover {
            background: #43a578 !important;
        }
        .qty-stepper {
            display: flex; align-items: center; justify-content: center; gap: 0;
            border: 1.5px solid #52b788; border-radius: 8px; overflow: hidden; height: 38px;
        }
        .qty-stepper .qty-btn {
            width: 36px; height: 100%; border: none; background: #fff; color: #52b788;
            font-size: 18px; font-weight: bold; cursor: pointer; transition: background 0.15s;
            display: flex; align-items: center; justify-content: center;
        }
        .qty-stepper .qty-btn:hover { background: rgba(82,183,136,0.12); }
        .qty-stepper .qty-btn:disabled { color: #ccc; cursor: not-allowed; background: #fff; }
        .qty-stepper .qty-value {
            flex: 1; text-align: center; font-size: 14px; font-weight: bold; color: #2f6b4f;
            background: rgba(82,183,136,0.08); height: 100%; display: flex; align-items: center; justify-content: center;
            min-width: 34px;
        }

        .customer-chat-messages {
            display: flex; flex-direction: column; gap: 10px;
            max-height: 320px; overflow-y: auto; padding: 4px 2px 10px;
        }
        .chat-bubble {
            max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.6;
            word-wrap: break-word;
        }
        .chat-bubble.user {
            align-self: flex-end; background: var(--orange); color: #fff; border-bottom-left-radius: 4px;
        }
        .chat-bubble.admin {
            align-self: flex-start; background: var(--gray-light); color: #222; border-bottom-right-radius: 4px;
        }
        .chat-bubble-time { display: block; font-size: 10px; opacity: .65; margin-top: 4px; }
        .chat-bubble-img { display: block; max-width: 100%; max-height: 200px; border-radius: 10px; margin-bottom: 6px; cursor: pointer; }
        .chat-bubble-file {
            display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px;
            background: rgba(255,255,255,0.18); color: inherit; text-decoration: none; font-size: 12.5px; margin-bottom: 4px;
        }
        .chat-bubble.admin .chat-bubble-file { background: rgba(0,0,0,0.06); }
        .chat-bubble-file svg { flex-shrink: 0; }

        .customer-chat-input-row { border-top: 1px solid #eee; padding-top: 10px; }
        .cci-main { display: flex; flex-direction: column; gap: 8px; }
        .cci-row { display: flex; align-items: flex-end; gap: 8px; }
        .customer-chat-input-row textarea {
            flex: 1; resize: none; border: 1px solid #ddd; border-radius: 10px; padding: 8px 10px;
            font-family: inherit; font-size: 13.5px; max-height: 90px;
        }
        .customer-chat-input-row button[type="submit"] {
            background: var(--orange); border: none; color: #fff; width: 38px; height: 38px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
        }
        .customer-chat-input-row button[type="submit"]:hover { background: var(--orange-dark); }
        .chat-attach-btn {
            background: var(--gray-light); border: none; color: #555; width: 38px; height: 38px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.15s;
        }
        .chat-attach-btn:hover { background: #e4e4e8; }
        .chat-attach-btn.has-file { background: var(--orange); color: #fff; }
        .chat-attach-preview {
            display: flex; align-items: center; gap: 8px; background: var(--gray-light); border-radius: 10px;
            padding: 6px 8px; font-size: 12px; color: #444;
        }
        .chat-attach-preview img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }
        .chat-attach-preview .cap-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .chat-attach-preview .cap-remove {
            border: none; background: none; color: #999; cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px;
        }
        .chat-attach-preview .cap-remove:hover { color: #d32f2f; }