/*
Theme Name: qskin
Theme URI: https://pixelhiro.com
Author: Pixelhiro
Author URI: https://pixelhiro.com
Description: پوسته اختصاصی کیو اسکین
Version: 1.0.2.7
Text Domain: pixelhiro
*/
/* Thin - 100 */
@font-face {
    font-family: 'Kahroba';
    src: url('assets/fonts/kahroba/Kahroba-FD-T.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* UltraLight - 200 */
@font-face {
    font-family: 'Kahroba';
    src: url('assets/fonts/kahroba/Kahroba-FD-UL.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

/* Light - 300 */
@font-face {
    font-family: 'Kahroba';
    src: url('assets/fonts/kahroba/Kahroba-FD-L.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Regular - 400 */
@font-face {
    font-family: 'Kahroba';
    src: url('assets/fonts/kahroba/Kahroba-FD-RG.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Medium - 500 */
@font-face {
    font-family: 'Kahroba';
    src: url('assets/fonts/kahroba/Kahroba-FD-M.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* SemiBold - 600 */
@font-face {
    font-family: 'Kahroba';
    src: url('assets/fonts/kahroba/Kahroba-FD-SB.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Bold - 700 */
@font-face {
    font-family: 'Kahroba';
    src: url('assets/fonts/kahroba/Kahroba-FD-B.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ExtraBold - 800 */
@font-face {
    font-family: 'Kahroba';
    src: url('assets/fonts/kahroba/Kahroba-FD-EB.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Black - 900 */
@font-face {
    font-family: 'Kahroba';
    src: url('assets/fonts/kahroba/Kahroba-FD-BL.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-1: #177b82;
    --color-2: #18a3ad;
    --color-3: #faaf40;
    --primary-color: #f06c60;
    --soft-color-1: #fcded3;
    --soft-color-2: #fff7f1;
    
    --bg-color: #fff7f1;
    --text-color: #2b2b2b;
    --header-bg: #ffffff;
    --border-color: #e5e5e5;
    --megamenu-bg: #ffffff;
    --search-bg: #f5f5f5;

    --qs-primary: #ef6c5f;
    --qs-secondary: #17a2ac;
    --qs-accent: #f9ae40;
    --qs-light: #fff7f0;
    --qs-bg: transparent;
    --qs-card-bg: #ffffff;
    --qs-text: #2b2b2b;
    --qs-text-sub: #7a7a7a;
    --qs-border: rgba(239, 108, 95, 0.15);
    --qs-input-bg: #fff7f0;
}

[data-theme="dark"] {
    --bg-color: #121212;
    --text-color: #f0f0f0;
    --header-bg: #1e1e1e;
    --border-color: #333333;
    --megamenu-bg: #1e1e1e;
    --search-bg: #2d2d2d;
    --qs-card-bg: #161616;
    --qs-text: #f0f0f0;
    --qs-text-sub: #a0a0a0;
    --qs-border: rgba(23, 162, 172, 0.25);
    --qs-input-bg: #222222;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Kahroba', 'Vazirmatn', sans-serif;
    font-feature-settings: "ss02", "ss03";
}
body,
.main-header-top,
.nav-wrapper-sticky,
.site-footer,
.product-card,
.qs-cart-section-box,
.qs-checkout-card {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    min-height: 50vh;
}

.admin-bar .nav-wrapper-sticky.scrolled {
    top: 37px;
}

/* ---------------- هدر اولیه بالا ---------------- */
.main-header-top {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.logo-box img {
    height: 45px;
    object-fit: contain;
}

.search-box {
    flex: 1;
    max-width: 500px;
    position: relative;
}

.search-box input {
    width: 100%;
    padding: 12px 20px 12px 50px;
    border-radius: 50px;
    border: 2px solid transparent;
    background-color: var(--search-bg);
    color: var(--text-color);
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
}

.search-box input:focus {
    border-color: var(--primary-color);
    background-color: var(--header-bg);
    box-shadow: 0 0 15px rgba(240, 108, 96, 0.15);
}

.search-box button {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary-color);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.search-box button:hover {
    background: var(--color-1);
    transform: translateY(-50%) scale(1.05);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ---------------- نوار منوی چسبان (شناور کاملاً گرد و نرم) ---------------- */
.nav-wrapper-sticky {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease;
}

/* حالت اسکرول شده: تبدیل به کادر شناور کاملاً گرد با انیمیشن فوق‌العاده روان */
.nav-wrapper-sticky.scrolled {
    position: fixed;
    top: 7px;
    left: 0;
    right: 0;
    max-width: 1360px;
    margin: 0 auto;
    border-radius: 50px;
    border: 1px solid var(--border-color);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(0);
    animation: floatInMenu 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes floatInMenu {
    0% {
        opacity: 0;
        transform: translateY(-25px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 60px;
    gap: 20px;
    position: relative; /* جهت تنظیم موقعیت مگا منو و سبد خرید */
}

.nav-wrapper-sticky.scrolled .nav-container {
    padding: 0 25px;
}

.nav-right-side {
    display: flex;
    align-items: center;
    gap: 30px;
}

.sticky-logo {
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
    transition: all 0.4s ease;
}

.nav-wrapper-sticky.scrolled .sticky-logo {
    opacity: 1;
    visibility: visible;
    width: 160px;
}

.sticky-logo img {
    height: 30px;
    object-fit: contain;
}

.main-menu {
    display: flex;
    list-style: none;
    gap: 25px;
    align-items: center;
}

.main-menu > li > a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    font-size: 15px;
    padding: 15px 0;
    display: block;
    position: relative;
}

.main-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.main-menu > li:hover > a::after {
    width: 100%;
}

.main-menu > li > a:hover {
    color: var(--primary-color);
}

/* مگا منو (هماهنگ با حالت گرد و شناور منو) */
.mega-menu {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    left: 0;
    background: var(--megamenu-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s ease-in-out;
    z-index: 99;
    padding: 30px;
    border-radius: 24px; /* گوشه گرد برای ظاهر مدرن دسکتاپ */
}

.has-mega:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr) 1fr;
    gap: 25px;
}

.mega-column h4 {
    font-size: 15px;
    color: var(--primary-color);
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--soft-color-1);
}

.mega-column ul {
    list-style: none;
}

.mega-column ul li {
    margin-bottom: 10px;
}

.mega-column ul li a {
    text-decoration: none;
    color: var(--text-color);
    font-size: 13px;
    transition: color 0.2s, padding-right 0.2s;
    display: inline-block;
}

.mega-column ul li a:hover {
    color: var(--color-2);
    padding-right: 5px;
}

.mega-banner {
    background: linear-gradient(135deg, var(--color-1), var(--color-2));
    border-radius: 12px;
    padding: 20px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.mega-banner h5 {
    font-size: 16px;
    margin-bottom: 8px;
    color: var(--color-3);
}

.mega-banner p {
    font-size: 12px;
    margin-bottom: 15px;
    opacity: 0.9;
}

.mega-banner a {
    background: var(--primary-color);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
}

.nav-left-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sticky-search {
    position: relative;
    width: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.nav-wrapper-sticky.scrolled .sticky-search {
    width: 210px;
    opacity: 1;
    visibility: visible;
}

.sticky-search input {
    width: 100%;
    padding: 6px 12px 6px 32px;
    border-radius: 30px;
    border: 1.5px solid var(--border-color);
    background-color: var(--search-bg);
    color: var(--text-color);
    font-size: 12px;
    outline: none;
}

.sticky-search button {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary-color);
    border: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: white;
    font-size: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.sticky-search button:hover {
    background: var(--color-1);
    transform: translateY(-50%) scale(1.1);
}

.sticky-action-items {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all 0.4s ease;
}

.nav-wrapper-sticky.scrolled .sticky-action-items {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.action-btn {
    background: var(--search-bg);
    border: 1.5px solid var(--border-color);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    cursor: pointer;
    font-size: 14px;
    position: relative;
    transition: all 0.3s ease;
}

.action-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.cart-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--color-3);
    color: #fff;
    font-size: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* ---------------- استایل پاپ‌آپ سبد خرید (هاور روی سبد خرید) ---------------- */
.cart-dropdown-wrapper {
    position: relative;
}

.cart-dropdown-box {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: 320px;
    background: var(--header-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1200;
    overflow: hidden;
}

.cart-dropdown-wrapper:hover .cart-dropdown-box {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cart-box-header {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-items-list {
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
    padding: 10px;
}

.cart-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-bottom: 1px solid var(--search-bg);
    transition: background 0.2s;
    border-radius: 12px;
}

.cart-item-row:hover {
    background: var(--search-bg);
}

.cart-item-img {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}

.cart-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cart-item-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color);
    text-decoration: none;
}

.cart-item-price {
    font-size: 11px;
    color: var(--primary-color);
    font-weight: 700;
}

.cart-item-remove {
    background: none;
    border: none;
    color: #aaa;
    font-size: 14px;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s, transform 0.2s;
}

.cart-item-remove:hover {
    color: var(--primary-color);
    transform: scale(1.1);
}

.cart-box-footer {
    padding: 15px;
    background: var(--search-bg);
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
}

.cart-checkout-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    width: 100%;
    padding: 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background 0.3s;
}

.cart-checkout-btn:hover {
    background: var(--color-1);
}

.user-profile-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.profile-trigger-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--search-bg);
    padding: 3px 8px 3px 5px;
    border-radius: 30px;
    border: 1.5px solid var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;
}

.user-profile-dropdown:hover .profile-trigger-wrapper {
    border-color: var(--primary-color);
    background: var(--header-bg);
}

.profile-trigger {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-trigger img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-arrow-icon {
    font-size: 10px;
    color: var(--text-color);
    transition: transform 0.3s ease;
}

.user-profile-dropdown:hover .profile-arrow-icon {
    transform: rotate(180deg);
    color: var(--primary-color);
}

.profile-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 260px;
    background: var(--header-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1100;
    overflow: hidden;
}

.user-profile-dropdown:hover .profile-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-wallet-box {
    background: linear-gradient(135deg, var(--color-1), var(--color-2));
    padding: 16px;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wallet-title {
    font-size: 11px;
    opacity: 0.85;
}

.wallet-amount,
.wallet-amount a {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-3);
    text-decoration: none;
}

.dropdown-links {
    list-style: none;
    padding: 8px;
}

.dropdown-links li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--text-color);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.dropdown-links li a:hover {
    background: var(--search-bg);
    color: var(--primary-color);
}

.dropdown-links li a i {
    font-size: 14px;
    width: 20px;
    color: #888;
    transition: color 0.2s;
}

.dropdown-links li a:hover i {
    color: var(--primary-color);
}

.dropdown-links li.logout-item {
    border-top: 1px solid var(--border-color);
    margin-top: 4px;
    padding-top: 4px;
}

.dropdown-links li.logout-item a {
    color: var(--primary-color);
}

.dropdown-links li.logout-item a i {
    color: var(--primary-color);
}

.hamburger-btn {
    display: none;
    background: none;
    border: none;
    font-size: 22px;
    color: var(--text-color);
    cursor: pointer;
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    height: 100vh;
    background: var(--header-bg);
    z-index: 2000;
    box-shadow: -5px 0 25px rgba(0,0,0,0.1);
    transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    padding: 25px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mobile-menu-overlay.active {
    right: 0;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

.close-mobile-menu {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-color);
    cursor: pointer;
}

.mobile-profile-accordion {
    background: var(--search-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
}

.mobile-profile-toggle {
    width: 100%;
    padding: 12px 15px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    color: var(--text-color);
}

.mobile-profile-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-profile-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid var(--primary-color);
}

.mobile-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-profile-name {
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

.mobile-profile-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: var(--header-bg);
}

.mobile-profile-accordion.active .mobile-profile-content {
    max-height: 250px;
    border-top: 1px solid var(--border-color);
}

.mobile-profile-content ul {
    list-style: none;
    padding: 8px;
}

.mobile-profile-content ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-color);
    text-decoration: none;
    border-radius: 8px;
}

.mobile-profile-content ul li a:hover {
    background: var(--search-bg);
    color: var(--primary-color);
}

.mobile-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mobile-nav-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--search-bg);
}

.mobile-nav-item a:hover {
    background: var(--primary-color);
    color: white;
}

@media (max-width: 992px) {
    .main-menu {
        display: none;
    }

    .hamburger-btn {
        display: block;
    }

    .nav-wrapper-sticky.scrolled .sticky-logo {
        width: 32px;
    }

    .nav-right-side {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .nav-wrapper-sticky.scrolled .sticky-search {
        width: 120px;
    }
}



    
    
		
/* ================= سکشن آخرین محصولات (پکیج یکپارچه، هدر و اسلایدر متصل) ================= */
.latest-products-section {
    width: 100%;
    max-width: 1360px;
    margin: 70px auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* قاب یا کانتینر اصلی یکپارچه که هدر و کارت‌ها را به هم پیوند می‌دهد */
.products-container-box {
    background: linear-gradient(180deg, var(--header-bg) 0%, var(--search-bg) 100%);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    padding: 30px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.02);
}

/* هدر داخلی بخش */
.section-header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--header-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 20px 26px;
    margin-bottom: 26px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.01);
}

.section-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.section-title {
    font-size: 23px;
    font-weight: 800;
    color: var(--text-color);
    margin: 0;
}

.section-subtitle {
    font-size: 13px;
    color: #888;
    font-weight: 500;
}

.section-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* تبدیل لینک ساده به دکمه‌ی شیک و مدرن */
.view-all-btn {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color);
    background: var(--search-bg);
    border: 1px solid var(--border-color);
    padding: 10px 18px;
    border-radius: 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.view-all-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* دکمه‌های جابجایی اسلایدر */
.slider-nav-buttons {
    display: flex;
    gap: 8px;
}

.slider-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--search-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 13px;
}

.slider-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* کانتینر اسکرول اسلایدر */
.products-slider-wrapper {
    position: relative;
    width: 100%;
}

.products-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
    padding: 6px 4px 15px 4px;
}

.products-track::-webkit-scrollbar {
    display: none;
}

.products-track:active {
    cursor: grabbing;
}

/* کارت محصول لوکس (رنگ پس‌زمینه هماهنگ با داخل قاب) */
.product-card {
    flex: 0 0 270px;
    scroll-snap-align: start;
    background-color: var(--header-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.product-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
}

/* قاب تصویر فیکس‌شده */
.product-img-box {
    position: relative;
    width: 100%;
    height: 240px;
    background-color: var(--search-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: none;
}

/* برچسب وضعیت محصول */
.product-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--text-color);
    color: var(--header-bg);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 2;
}

/* اکشن‌های هاور */
.product-actions-hover {
    position: absolute;
    left: 12px;
    top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px);
    transition: all 0.25s ease;
    z-index: 3;
}

.product-card:hover .product-actions-hover {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.action-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--header-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    transition: all 0.2s;
}

.action-icon-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* بخش متن و اطلاعات کارت */
.product-content {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
}

.product-category {
    font-size: 11px;
    color: #888;
    margin-bottom: 6px;
    font-weight: 500;
}

.product-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
    margin-bottom: 14px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.product-title:hover {
    color: var(--primary-color);
}

.product-footer-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    margin-top: auto;
}

.product-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-color);
}

.product-price span {
    font-size: 11px;
    font-weight: 500;
    color: #888;
    margin-right: 3px;
}

.add-to-cart-icon-btn {
    background: var(--search-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    text-decoration: none;
}

.add-to-cart-icon-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* ریسپانسیو موبایل: کارت‌ها تک‌تایی و هماهنگ */
@media (max-width: 768px) {
    .latest-products-section {
        padding: 0 16px;
        margin: 40px auto;
    }

    .products-container-box {
        padding: 16px;
        border-radius: 20px;
    }

    .section-header-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 16px;
        border-radius: 14px;
    }

    .section-header-right {
        width: 100%;
        justify-content: space-between;
    }

    .view-all-btn {
        flex: 1;
        justify-content: center;
    }

    .product-card {
        flex: 0 0 100%;
        scroll-snap-align: center;
    }
}






















/* ================= اسلایدر تمام صفحه کاملاً استاندارد و بدون اسکرول اضافه ================= */
.sharp-hero-section {
    width: 100%;
    position: relative;
    background-color: #121212;
    overflow: hidden;
    box-sizing: border-box;
}

.sharp-desktop-container {
    position: relative;
    width: 100%;
    height: 520px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.sharp-slides-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.sharp-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out;
    z-index: 1;
}

.sharp-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* رنگ‌های غلیظ درخواست‌شده */
.sharp-slide.slide-1 { background: linear-gradient(135deg, #167a82, #0d4a50); }
.sharp-slide.slide-2 { background: linear-gradient(135deg, #ef6c5f, #b83b30); }
.sharp-slide.slide-3 { background: linear-gradient(135deg, #1b4d52, #0f2c30); }

.sharp-content {
    flex: 1;
    max-width: 580px;
    z-index: 3;
}

.sharp-badge {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 14px;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.sharp-content h1 {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.35;
    color: #ffffff;
    margin-bottom: 12px;
}

.sharp-content h1 strong {
    color: #ffecd1;
}

.sharp-content p {
    font-size: 15px;
    color: #f0f0f0;
    line-height: 1.7;
    margin-bottom: 22px;
    font-weight: 500;
}

.sharp-btns {
    display: flex;
    gap: 12px;
}

/* دکمه‌های داخل متن با گوشه گرد و هاور جذاب */
.sharp-btn-primary {
    background-color: #ffffff;
    color: #167a82;
    padding: 12px 28px;
    border-radius: 8px !important; /* گوشه گرد */
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.sharp-btn-primary:hover {
    background-color: #ffecd1;
    color: #0d4a50;
    transform: translateY(-2px);
}

.sharp-btn-outline {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
    padding: 12px 28px;
    border-radius: 8px !important; /* گوشه گرد */
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s ease;
}

.sharp-btn-outline:hover {
    background-color: #ffffff;
    color: #167a82;
    transform: translateY(-2px);
}

.sharp-image {
    flex: 1;
    max-width: 400px;
    height: 320px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sharp-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.3));
    position: relative;
    z-index: 2;
    animation: floatSharp 4s ease-in-out infinite;
}

@keyframes floatSharp {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.sharp-glow {
    position: absolute;
    width: 240px;
    height: 240px;
    background: rgba(255, 255, 255, 0.15);
    filter: blur(50px);
    border-radius: 50%;
    z-index: 1;
}

/* کنترل‌های دو طرف با گوشه گرد دایره‌ای */
.sharp-controls-bar {
    position: absolute;
    bottom: 25px;
    left: 5%;
    right: 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
    pointer-events: none;
}

.sharp-arrow-btn {
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.4);
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.sharp-arrow-btn:hover {
    background-color: #ffffff;
    color: #167a82;
    border-color: #ffffff;
    transform: scale(1.1);
}

.sharp-dots {
    pointer-events: auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

.sharp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s;
}

.sharp-dot.active {
    width: 28px;
    border-radius: 4px;
    background: #ffffff;
}

/* ================= نسخه موبایل ================= */
.sharp-mobile-section {
    display: none;
    width: 100%;
    position: relative;
    background-color: #121212;
}

.sharp-mobile-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.sharp-mob-slides {
    display: flex;
    width: 100%;
    height: 440px;
    position: relative;
    overflow: hidden;
}

.sharp-mob-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 25px 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out;
}

.sharp-mob-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.sharp-mob-slide:nth-child(1) { background: linear-gradient(135deg, #167a82, #0d4a50); }
.sharp-mob-slide:nth-child(2) { background: linear-gradient(135deg, #ef6c5f, #b83b30); }
.sharp-mob-slide:nth-child(3) { background: linear-gradient(135deg, #1b4d52, #0f2c30); }

.sharp-mob-slide-img {
    width: 130px;
    height: 130px;
    margin: 0 auto 10px auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.25));
}

.sharp-mob-badge {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 8px;
    align-self: center;
}

.sharp-mob-slide h2 {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
    line-height: 1.4;
}

.sharp-mob-slide p {
    font-size: 13px;
    color: #f0f0f0;
    margin-bottom: 15px;
    line-height: 1.6;
}

.sharp-mob-slide-btns {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.sharp-mob-btn {
    padding: 10px 20px;
    border-radius: 8px !important; /* گوشه گرد */
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s;
}

.sharp-mob-btn-primary {
    background-color: #ffffff;
    color: #167a82;
}

.sharp-mob-btn-outline {
    border: 1.5px solid #ffffff;
    color: #ffffff;
}

.sharp-mob-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: rgba(0,0,0,0.2);
}

.sharp-mob-slider-btn {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.4);
    width: 34px;
    height: 34px;
    border-radius: 50% !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
}

@media (max-width: 992px) {
    .sharp-desktop-section {
        display: none !important;
    }
    .sharp-mobile-section {
        display: block !important;
    }
}








/* ================= سکشن دو ستونیِ محصولات علاقه‌مندی (طراحی خاص و مستقل) ================= */
.favorite-split-section {
    width: 100%;
    max-width: 1360px;
    margin: 50px auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.favorite-split-container {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr); /* ستون توضیحات مشخص، ستون محصولات منعطف */
    gap: 20px;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

/* ستون اول: باکس توضیحات با استایل گرادینتی و متمایز */
.favorite-intro-box {
    background: linear-gradient(135deg, rgba(240, 108, 96, 0.06) 0%, rgba(20, 92, 99, 0.04) 100%);
    border: 1.5px solid rgba(240, 108, 96, 0.2);
    border-radius: 24px;
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.02);
    box-sizing: border-box;
}

.intro-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--header-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    width: fit-content;
    margin-bottom: 16px;
}

.intro-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-color);
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.intro-desc {
    font-size: 13.5px;
    color: #666;
    line-height: 1.7;
    margin: 0 0 20px 0;
}

.intro-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 16px;
}

.intro-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
}

.intro-link:hover {
    color: var(--text-color);
}

/* ستون دوم: باکس محصولات با قاب اختصاصی */
.favorite-slider-column {
    background: var(--search-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.02);
    box-sizing: border-box;
    min-width: 0;
}

/* هدر داخلی ستون محصولات */
.fav-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 4px;
}

.fav-slider-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
}

/* ریسپانسیو برای تبلت و موبایل */
@media (max-width: 992px) {
    .favorite-split-container {
        grid-template-columns: 1fr; /* تبدیل به تک ستون در صفحات کوچک‌تر */
    }
}














/* ================= سکشن چرا کیو اسکین؟ (جادویی و خیره‌کننده) ================= */
.why-qskin-section {
    width: 100%;
    max-width: 1360px;
    margin: 70px auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.why-qskin-container {
    background: linear-gradient(135deg, rgba(20, 92, 99, 0.03) 0%, rgba(240, 108, 96, 0.03) 100%);
    border: 1px solid var(--border-color);
    border-radius: 32px;
    padding: 45px 40px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* هدر بخش */
.why-header {
    text-align: center;
    margin-bottom: 35px;
}

.why-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--header-bg);
    border: 1px solid var(--border-color);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.why-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-color);
    margin: 0;
}

/* ساختار گرید ۴ ستونی کارت‌ها */
.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* کارت‌های جادویی با هاور خیره‌کننده */
.why-card {
    background: var(--search-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    box-sizing: border-box;
}

/* باکس آیکون زنده */
.why-icon-box {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, rgba(20, 92, 99, 0.08) 0%, rgba(240, 108, 96, 0.1) 100%);
    border: 1px solid rgba(20, 92, 99, 0.12);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--primary-color);
    margin-bottom: 20px;
    transition: all 0.4s ease;
}

/* متن‌های داخل کارت */
.why-content h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 10px 0;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.why-content p {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    margin: 0;
    transition: color 0.3s ease;
}

/* افکت نورانی و جادویی پشت کارت در حالت هاور */
.card-glow-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(240, 108, 96, 0.08), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* حالت هاور جادویی کارت‌ها */
.why-card:hover {
    transform: translateY(-8px);
    border-color: rgba(240, 108, 96, 0.4);
    box-shadow: 0 20px 40px rgba(240, 108, 96, 0.1);
    background: linear-gradient(135deg, var(--search-bg) 0%, rgba(240, 108, 96, 0.02) 100%);
}

.why-card:hover .card-glow-effect {
    opacity: 1;
}

.why-card:hover .why-icon-box {
    background: var(--primary-color);
    color: #ffffff;
    transform: scale(1.1) rotate(5deg);
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(20, 92, 99, 0.3);
}

/* ریسپانسیو برای تبلت و موبایل (نمایش دو ستونی برای جلوگیری از اسکرول زیاد) */
@media (max-width: 992px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr); /* هر ردیف دو کارت */
        gap: 14px;
    }
    
    .why-qskin-section {
        margin: 40px auto;
        padding: 0 16px;
    }

    .why-qskin-container {
        padding: 30px 20px;
        border-radius: 24px;
    }

    .why-card {
        padding: 20px 16px; /* کاهش پدینگ داخلی کارت‌ها برای تناسب با صفحه کوچک */
        border-radius: 20px;
    }

    .why-icon-box {
        width: 45px;
        height: 45px;
        font-size: 18px;
        margin-bottom: 14px;
        border-radius: 14px;
    }

    .why-content h3 {
        font-size: 14.5px;
        margin-bottom: 6px;
    }

    .why-content p {
        font-size: 12px;
        line-height: 1.5;
    }
}

/* برای موبایل‌های خیلی کوچک (اختیاری: اگر خواستی در صفحه خیلی ریز هم دو ستون حفظ شود) */
@media (max-width: 480px) {
    .why-grid {
        gap: 10px;
    }
    .why-card {
        padding: 16px 12px;
    }
}













/* ================= سکشن دعوت به اقدام (CTA لوکس و شارپ) ================= */
.qskin-cta-section {
    width: 100%;
    max-width: 1360px;
    margin: 70px auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.qskin-cta-container {
    background: linear-gradient(135deg, #0d383d 0%, #145c63 50%, #1a2a2d 100%);
    border-radius: 32px;
    padding: 55px 40px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(20, 92, 99, 0.2);
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* افکت‌های نوری پس‌زمینه برای ایجاد عمق لوکس */
.cta-glow-bg {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
    z-index: 1;
}

.cta-glow-1 {
    top: -60px;
    right: -60px;
    width: 250px;
    height: 250px;
    background: rgba(240, 108, 96, 0.25); /* طیف گرادینت صورتی/مرجانی گرم */
}

.cta-glow-2 {
    bottom: -60px;
    left: -60px;
    width: 250px;
    height: 250px;
    background: rgba(250, 175, 64, 0.15); /* طیف طلایی ملایم */
}

/* محتوای بنر */
.qskin-cta-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 750px;
    margin: 0 auto;
}

/* برچسب بالای عنوان */
.cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffb8b0;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
}

/* عنوان شارپ و جذاب */
.cta-title {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 16px 0;
    line-height: 1.3;
}

/* توضیحات */
.cta-desc {
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    margin: 0 0 30px 0;
}

/* دکمه‌ها */
.cta-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* دکمه اول (پررنگ و شارپ) */
.cta-btn-primary {
    background: #f06c60;
    color: #ffffff;
    box-shadow: 0 8px 25px rgba(240, 108, 96, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cta-btn-primary:hover {
    background: #e05b4f;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(240, 108, 96, 0.5);
}

/* دکمه دوم (شیشه‌ای و مدرن) */
.cta-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cta-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
}

/* ================= ریسپانسیو موبایل و تبلت (بدون اسکرول اضافی) ================= */
@media (max-width: 992px) {
    .qskin-cta-section {
        margin: 40px auto;
        padding: 0 16px;
    }

    .qskin-cta-container {
        padding: 35px 20px;
        border-radius: 24px;
    }

    .cta-title {
        font-size: 22px;
        margin-bottom: 12px;
    }

    .cta-desc {
        font-size: 13px;
        margin-bottom: 24px;
    }

    .cta-actions {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }

    .cta-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
    }
}








/* ================= سکشن آخرین نوشته‌های وبلاگ (استایل مجله‌ای یکپارچه) ================= */
.latest-blogs-section {
    width: 100%;
    max-width: 1360px;
    margin: 70px auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.blogs-container-box {
    background: var(--search-bg);
    border: 1px solid var(--border-color);
    border-radius: 30px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    position: relative;
    box-sizing: border-box;
}

/* کارت‌های مجله‌ای وبلاگ (کاملاً متمایز از محصولات) */
.magazine-card {
    background: var(--header-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 0 0 350px;
    scroll-snap-align: start;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-sizing: border-box;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.02);
}

.magazine-card:hover {
    transform: translateY(-8px);
    border-color: rgba(240, 108, 96, 0.4);
    box-shadow: 0 16px 35px rgba(240, 108, 96, 0.08);
}

/* تصویر مجله‌ای با تگ شناور */
.mag-img-container {
    width: 100%;
    height: 210px;
    position: relative;
    overflow: hidden;
}

.mag-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.magazine-card:hover .mag-img-container img {
    transform: scale(1.07);
}

/* برچسب دسته‌بندی بالای عکس */
.mag-tag {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(20, 92, 99, 0.85);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 14px;
    z-index: 2;
}

/* زمان مطالعه پایین عکس */
.mag-read-time {
    position: absolute;
    bottom: 12px;
    left: 14px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 2;
}

/* بدنه متن مقاله */
.mag-content {
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.mag-date {
    font-size: 11.5px;
    color: #888;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mag-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-color);
    text-decoration: none;
    line-height: 1.45;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.mag-title:hover {
    color: var(--primary-color);
}

.mag-snippet {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    margin: 0 0 20px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* فوتر مقاله (نویسنده و دکمه فلش) */
.mag-author-row {
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mag-author-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-color);
}

.mag-author-info img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-color);
}

.mag-link-arrow {
    width: 34px;
    height: 34px;
    background: rgba(240, 108, 96, 0.1);
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.magazine-card:hover .mag-link-arrow {
    background: var(--primary-color);
    color: #ffffff;
    transform: translateX(-4px);
}

/* ================= ریسپانسیو موبایل و تبلت ================= */
@media (max-width: 992px) {
    .latest-blogs-section {
        margin: 40px auto;
        padding: 0 16px;
    }

    .blogs-container-box {
        padding: 16px;
        border-radius: 20px;
    }

    /* نمایش یک کارت کامل در موبایل برای جلوگیری از اسکرول اضافه */
    .magazine-card {
        flex: 0 0 calc(100% - 10px);
    }
}








/* ================= سکشن برندها (طراحی تخت و سیال - بدون باکس) ================= */
.brands-clean-section {
    width: 100%;
    max-width: 1360px;
    margin: 50px auto;
    padding: 0 24px;
    box-sizing: border-box;
    /* بدون هیچ‌گونه پس‌زمینه باکس‌مانند، کاملاً تخت و هم‌راستا با بدنه سایت */
}

.brands-clean-wrapper {
    position: relative;
}

/* هدر مینیمالِ خطی بالای برندها */
.brands-clean-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--border-color); /* استفاده از خط‌چین ملایم به جای قاب سنگین */
}

.brands-clean-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    display: flex;
    align-items: center;
    opacity: 0.85;
}

/* دکمه‌های کنترل اسلایدر */
.brands-nav-buttons {
    display: flex;
    gap: 8px;
}

.brand-slider-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--search-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 10px;
    transition: all 0.2s ease;
}

.brand-slider-btn:hover {
    background: #f06c60;
    color: #ffffff;
    border-color: #f06c60;
}

/* کانتینر اسلایدر */
.brands-slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.brands-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 10px 0;
    user-select: none;
}

.brands-track::-webkit-scrollbar {
    display: none;
}

/* کارت‌های مینیمالِ بدون کادر سنگین (به صورت Pill یا تکسچر سبک) */
.brand-pill {
    background: var(--search-bg); /* هماهنگ با پس‌زمینه جستجو یا هدر، اما بدون مرزهای خشن */
    border: 1px solid var(--border-color);
    border-radius: 12px;
    height: 65px;
    flex: 0 0 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    scroll-snap-align: start;
    text-decoration: none;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* افکت سیاه و سفید لوگو */
.brand-pill img {
    max-height: 28px;
    max-width: 100px;
    object-fit: contain;
    filter: grayscale(100%) brightness(1.4) opacity(0.45);
    transition: all 0.4s ease;
    pointer-events: none;
}

/* هاور لوگو: رنگی شدن و درخشش ملایم بدون قابِ زمخت */
.brand-pill:hover {
    border-color: rgba(240, 108, 96, 0.4);
    background: var(--header-bg);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
}

.brand-pill:hover img {
    filter: grayscale(0%) brightness(1) opacity(1);
    transform: scale(1.04);
}

/* ================= ریسپانسیو موبایل ================= */
@media (max-width: 992px) {
    .brands-clean-section {
        margin: 30px auto;
        padding: 0 16px;
    }

    .brand-pill {
        flex: 0 0 calc(50% - 8px);
        height: 60px;
    }
}

@media (max-width: 480px) {
    .brand-pill {
        flex: 0 0 100%; /* نمایش تک‌تک در موبایل خیلی کوچک */
    }
}


















/* ================= سکشن سوالات متداول (دو ستونه و آکاردئونی نرم و جادویی) ================= */
.faq-section {
    width: 100%;
    max-width: 1360px;
    margin: 70px auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.faq-wrapper {
    position: relative;
}

.faq-header {
    text-align: center;
    margin-bottom: 45px;
}

.faq-badge {
    display: inline-block;
    background: rgba(240, 108, 96, 0.1);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.faq-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-color);
    margin: 0 0 10px 0;
}

.faq-subtitle {
    font-size: 13.5px;
    color: #888;
    margin: 0;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.faq-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* آیتم آکاردئونی */
.faq-item {
    background: var(--header-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-item:hover {
    border-color: rgba(240, 108, 96, 0.4);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.02);
}

.faq-question {
    padding: 20px 22px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-color);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: color 0.2s;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question:hover {
    color: var(--primary-color);
}

/* آیکون چرخان */
.faq-icon {
    font-size: 12px;
    color: #888;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), color 0.2s;
}

.faq-item.is-open .faq-icon {
    transform: rotate(180deg);
    color: var(--primary-color);
}

/* محتوای پاسخ */
.faq-answer {
    overflow: hidden; /* برای جلوگیری از بیرون‌زدگی محتوا هنگام انیمیشن */
}

.faq-answer-inner {
    padding: 0 22px 20px 22px;
}

.faq-answer-inner p {
    font-size: 13.5px;
    color: #666;
    line-height: 1.8;
    margin: 0;
    border-top: 1px dashed var(--border-color);
    padding-top: 15px;
}

@media (max-width: 992px) {
    .faq-section {
        margin: 40px auto;
        padding: 0 16px;
    }

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

    .faq-title {
        font-size: 20px;
    }

    .faq-question {
        padding: 16px 18px;
        font-size: 13.5px;
    }

    .faq-answer-inner {
        padding: 0 18px 16px 18px;
    }
}












/* ================= فوتر تخصصی کیو اسکین (Qskin) - بر پایه رنگ ef6c5f ================= */
.site-footer {
    position: relative;
    background: #ef6c5f; /* رنگ پایه جدید */
    color: #ffffff;
    font-family: inherit;
    margin-top: 150px;
    box-sizing: border-box;
    box-shadow: 0 -25px 50px rgba(0, 0, 0, 0.2);
}

.footer-wave-container {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    overflow: hidden;
    line-height: 0;
    z-index: 5;
    pointer-events: none;
}

.footer-wave-container svg {
    width: 100%;
    height: 100px;
    display: block;
}

/* انیمیشن لایه‌های موج سینوسی هماهنگ با رنگ جدید */
.wave-svg use {
    animation: wave-animation 25s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.wave-svg use:nth-child(1) {
    animation-duration: 22s;
    animation-delay: 0s;
    fill: rgba(239, 108, 95, 0.4);
}
.wave-svg use:nth-child(2) {
    animation-duration: 28s;
    animation-delay: -3s;
    fill: rgba(220, 95, 83, 0.3);
}
.wave-svg use:nth-child(3) {
    animation-duration: 35s;
    animation-delay: -6s;
    fill: rgba(200, 80, 70, 0.2);
}
.wave-svg use:nth-child(4) {
    animation-duration: 40s;
    animation-delay: -2s;
    fill: #ef6c5f; /* رنگ اصلی بدنه فوتر */
}

@keyframes wave-animation {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}

/* بدنه اصلی محتوای فوتر با ستون‌بندی استاندارد ۴ بخشی */
.footer-body {
    max-width: 1360px;
    margin: 0 auto;
    padding: 60px 24px 45px 24px;
    display: grid;
    grid-template-columns: 1.8fr 1.2fr 1fr 1fr;
    gap: 35px;
    position: relative;
    z-index: 2;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-logo-img {
    height: 42px !important;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.footer-slogan {
    font-size: 13px;
    line-height: 1.8;
    color: #fce8e6;
    margin: 0;
}

.footer-social-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 5px;
}

.social-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icon-btn:hover {
    background: #ffffff;
    color: #ef6c5f;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.footer-heading {
    font-size: 16px;
    font-weight: 700;
    color: #fff3d1;
    position: relative;
    padding-bottom: 8px;
}

.footer-heading::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 30px;
    height: 3px;
    background: #ffffff;
    border-radius: 2px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links li a {
    color: #fce8e6;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-links li a:hover {
    color: #fff3d1;
    transform: translateX(-5px);
}

.footer-links li a i {
    font-size: 10px;
    color: #ffffff;
}

.footer-contact-box {
    background: rgba(180, 50, 40, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 18px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    backdrop-filter: blur(8px);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
}

.contact-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* نمادهای اعتماد (ای‌نماد و ساماندهی) */
.qskin-trust-card {
    background: rgba(180, 50, 40, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.trust-slider-box {
    position: relative;
    width: 65px;
    height: 65px;
    background: #ffffff;
    border-radius: 12px;
    padding: 5px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.trust-slides-track {
    display: flex;
    width: 200%;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.trust-slide-item {
    width: 50%;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-slide-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.trust-card-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.trust-card-title {
    font-size: 12px;
    font-weight: 700;
    color: #fff3d1;
}

.trust-card-subtitle {
    font-size: 10px;
    color: #fce8e6;
}

.trust-nav-btns {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.trust-action-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 9px;
    transition: all 0.2s ease;
}

.trust-action-btn:hover {
    background: #ffffff;
    color: #ef6c5f;
    border-color: #ffffff;
}

/* نوار کپی‌رایت پایین فوتر */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 20px 24px;
    text-align: center;
    font-size: 12px;
    color: #fce8e6;
    background: #d85c4e;
}

.footer-bottom span {
    color: #fff3d1;
    font-weight: 700;
}

/* ریسپانسیو منظم */
@media (max-width: 1024px) {
    .footer-body {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .footer-body {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 40px 16px 30px 16px;
    }
    .footer-wave-container {
        top: -70px;
        height: 75px;
    }
    .footer-wave-container svg {
        height: 75px;
    }
}



.qs-product-container {
    max-width: 1140px;
    margin: 30px auto;
    padding: 0 20px 140px 20px;
    box-sizing: border-box;
}

.qs-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #888;
    margin-bottom: 25px;
}

.qs-breadcrumb a {
    color: var(--text-color);
    text-decoration: none;
    opacity: 0.7;
}

.qs-breadcrumb a:hover {
    opacity: 1;
    color: var(--primary-color);
}

.qs-breadcrumb i {
    font-size: 9px;
    color: #bbb;
}

.qs-breadcrumb span {
    color: var(--primary-color);
    font-weight: 500;
}

.qs-product-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
    align-items: start;
}

.qs-gallery-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.qs-main-image-box {
    position: relative;
    width: 100%;
    height: 380px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--search-bg);
    border: 1px solid var(--border-color);
    cursor: crosshair;
}

.qs-product-fade-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.qs-product-fade-img.fade-out {
    opacity: 0;
}

.qs-discount-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--primary-color);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 5;
}

.qs-slide-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-color);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-color);
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.qs-prev {
    right: 12px;
}

.qs-next {
    left: 12px;
}

.qs-zoom-lens {
    position: absolute;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    pointer-events: none;
    display: none;
    background-repeat: no-repeat;
    z-index: 4;
}

.qs-thumbs-list {
    display: flex;
    gap: 10px;
}

.qs-thumb {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    cursor: pointer;
    opacity: 0.6;
    background: var(--search-bg);
    transition: opacity 0.2s;
}

.qs-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qs-thumb.active {
    opacity: 1;
    border-color: var(--primary-color);
}

.qs-quick-specs-flat {
    margin-top: 15px;
}

.qs-quick-specs-flat h3 {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.qs-quick-specs-flat h3 i {
    color: var(--primary-color);
}

.qs-specs-list-flat {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 6px;
    color: #777;
}

.spec-row strong {
    color: var(--text-color);
    font-weight: 600;
}

.qs-info-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qs-meta-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.qs-brand {
    color: #888;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.qs-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #f59e0b;
    font-weight: 600;
}

.qs-rating span {
    color: var(--text-color);
    opacity: 0.7;
}

.qs-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.4;
}

.qs-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}

.qs-stock-shipping-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--text-color);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 0;
}

.stock-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #10b981;
}

.pulse-dot {
    width: 7px;
    height: 7px;
    background: #10b981;
    border-radius: 50%;
    display: inline-block;
}

.shipping-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 11px;
}

.shipping-inline i {
    color: #6366f1;
}

.qs-color-selection-flat {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.color-label {
    font-size: 12px;
    color: #888;
}

.color-label strong {
    color: var(--text-color);
}

.color-options {
    display: flex;
    gap: 10px;
}

.color-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.2s;
}

.color-btn.active {
    border-color: var(--primary-color);
    transform: scale(1.15);
}

/* دسکتاپ: باکس خرید استاندارد همراه با برچسب تعداد زیبا */
.qs-desktop-buy-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qs-purchase-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
}

.qs-counter-group-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qs-counter-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-color);
}

.qs-counter-box {
    display: flex;
    align-items: center;
    background: var(--search-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.qs-counter-box button {
    background: none;
    border: none;
    width: 28px;
    height: 32px;
    font-size: 14px;
    font-weight: bold;
    color: var(--text-color);
    cursor: pointer;
}

#qs-qty {
    width: 28px;
    border: none;
    background: none;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
}

.qs-price-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.qs-old {
    font-size: 11px;
    color: #999;
    text-decoration: line-through;
}

.qs-current {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-color);
}

.qs-current small {
    font-size: 11px;
    font-weight: normal;
    color: #777;
}

.qs-actions-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.qs-add-btn {
    flex: 1;
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 13px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(240, 108, 96, 0.25);
}

.qs-icon-action-btn {
    width: 44px;
    height: 44px;
    background: var(--search-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    cursor: pointer;
}

.qs-icon-action-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* باکس آبی مدرن اسنپ‌پی */
.qs-snapppay-box-blue {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f0f7ff;
    border: 1px solid #d0e3fc;
    padding: 12px 15px;
    border-radius: 10px;
}

[data-theme="dark"] .qs-snapppay-box-blue {
    background: rgba(0, 86, 179, 0.15);
    border-color: rgba(0, 86, 179, 0.3);
}

.qs-snapppay-box-blue img {
    height: 45px;
    object-fit: contain;
    border: 1px solid #d0e3fc;
    border-radius: 10px;
}

.snapppay-text-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
}

.snapppay-text-content strong {
    color: #0056b3;
    font-weight: 700;
    font-size: 12px;
}

[data-theme="dark"] .snapppay-text-content strong {
    color: #4da3ff;
}

.snapppay-text-content span {
    color: #444;
}

[data-theme="dark"] .snapppay-text-content span {
    color: #ccc;
}

.qs-features-list {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #777;
}

.qs-features-list span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.qs-features-list i {
    color: var(--primary-color);
}

.qs-product-bottom-section {
    margin-top: 50px;
    border-top: 1px solid var(--border-color);
    padding-top: 25px;
}

.qs-tabs-header-flat {
    display: flex;
    gap: 30px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 25px;
}

.qs-tab-btn {
    background: none;
    border: none;
    padding: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}

.qs-tab-btn:hover {
    color: var(--text-color);
}

.qs-tab-btn.active {
    color: var(--primary-color);
    font-weight: 700;
}

.qs-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-color);
}

.qs-tabs-content-flat {
    font-size: 13px;
    color: var(--text-color);
    line-height: 1.8;
}

.qs-tab-pane {
    display: none;
}

.qs-tab-pane.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.qs-desc-flat-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
}

.desc-text-only h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.desc-text-only p {
    color: #666;
    font-size: 13px;
    margin-bottom: 15px;
}

.desc-bullet-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    margin-bottom: 8px;
    font-weight: 500;
}

.desc-bullet-line i {
    color: #10b981;
}

.desc-img-only {
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
}

.desc-img-only img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qs-reviews-top-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 12px;
    color: #888;
}

.qs-write-review-btn {
    background: var(--search-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.qs-write-review-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.qs-write-review-btn i {
    color: var(--primary-color);
}

.qs-write-review-btn:hover i {
    color: white;
}

/* فرم ثبت نظر جدید (کشویی) */
.qs-review-form-box {
    background: var(--search-bg);
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 14px;
    margin-bottom: 25px;
    display: none;
    flex-direction: column;
    gap: 15px;
}
.qs-review-form-box form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}
.qs-review-form-box.open {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.qs-review-form-box h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
}

.form-row-inputs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    width: 100%;
}

.form-row-inputs input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--product-card-bg, #fff);
    color: var(--text-color);
    font-size: 12px;
}

[data-theme="dark"] .form-row-inputs input {
    background: #222;
}

.rating-select-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #888;
}

.star-rating-input {
    color: #f59e0b;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    gap: 3px;
}

.qs-review-form-box textarea {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--product-card-bg, #fff);
    color: var(--text-color);
    font-size: 12px;
    resize: vertical;
    box-sizing: border-box;
}

[data-theme="dark"] .qs-review-form-box textarea {
    background: #222;
}

.qs-submit-review-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    align-self: flex-end;
}

/* لیست نظرات، آواتار و ریپلای‌ها */
.qs-reviews-flat-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.qs-review-flat-item {
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 20px;
}

.rev-user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.rev-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.rev-avatar.admin-av {
    background: #6366f1;
    font-size: 12px;
}

.rev-user-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rev-user-meta strong {
    color: var(--text-color);
    font-size: 13px;
}

.rev-date {
    color: #999;
    font-size: 11px;
}

.rev-stars {
    color: #f59e0b;
    font-size: 11px;
    margin-right: auto;
}

.qs-review-flat-item p {
    color: #666;
    font-size: 12px;
    line-height: 1.6;
    margin-right: 50px;
}

.qs-reply-btn {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    margin-right: 50px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* باکس پاسخ (ریپلای) */
.qs-reply-input-box {
    margin-right: 50px;
    margin-top: 10px;
    display: none;
    gap: 8px;
}

.qs-reply-input-box.open {
    display: flex;
}
.qs-reply-input-box form {
    display: flex;
    margin-top: 10px;
    gap: 8px;
    width: 100%;
}
.qs-reply-input-box input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--search-bg);
    color: var(--text-color);
    font-size: 11px;
}

.qs-reply-input-box button {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

/* نخ گفتگو (ریپلای‌های ثبت شده زیر نظر) */
.qs-reply-thread {
    margin-right: 50px;
    margin-top: 12px;
    background: var(--search-bg);
    border: 1px solid var(--border-color);
    padding: 12px;
    border-radius: 10px;
    font-size: 11px;
}
.qs-reply-thread .qs-review-flat-item {
    border-bottom: 0;
    padding-bottom: 0;
}
.qs-reply-thread .rev-avatar {
    width: 30px;
    height: 30px;
    font-size: 11px;
}

.qs-reply-thread p {
    margin-right: 42px;
    margin-top: 4px;
}

/* ================= استایل‌های نوار دایره‌ای و لوکس موبایل ================= */
.qs-mobile-circular-bar {
    display: none;
    /* در دسکتاپ مخفی است */
}

@media (max-width: 768px) {
    .qs-product-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .qs-main-image-box {
        height: 300px;
    }

    .qs-desc-flat-layout {
        grid-template-columns: 1fr;
    }

    .qs-tabs-header-flat {
        gap: 20px;
    }

    .qs-desktop-buy-box {
        display: none !important;
    }

    /* نوار شیشه‌ای شناور فیکس کف صفحه */
    .qs-mobile-circular-bar {
        display: block !important;
        position: fixed !important;
        bottom: 12px !important;
        left: 12px !important;
        right: 12px !important;
        z-index: 9999999 !important;
        pointer-events: none;
    }

    .mob-bar-content-wrapper {
        pointer-events: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid var(--border-color);
        padding: 8px 12px;
        border-radius: 35px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
        box-sizing: border-box;
    }

    [data-theme="dark"] .mob-bar-content-wrapper {
        background: rgba(24, 24, 24, 0.95);
    }

    /* دکمه دایره‌ای پالت رنگ */
    .mob-color-trigger-btn {
        position: relative;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--search-bg);
        border: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--text-color);
        font-size: 15px;
        transition: transform 0.2s;
    }

    .mob-color-trigger-btn:active {
        transform: scale(0.92);
    }

    .color-dot-indicator {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        border: 2px solid #fff;
    }

    [data-theme="dark"] .color-dot-indicator {
        border-color: #181818;
    }

    /* پاپ‌آپ رنگ موبایل: بازشو از سمت چپ و دقیقاً بالای ایکون رنگ */
    .mob-color-popup {
        pointer-events: auto;
        position: absolute;
        bottom: 68px;
        right: 12px;
        /* باز شدن از سمت چپ موبایل */
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid var(--border-color);
        padding: 10px;
        border-radius: 25px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px) scale(0.95);
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    [data-theme="dark"] .mob-color-popup {
        background: rgba(30, 30, 30, 0.96);
    }

    .mob-color-popup.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .mob-color-option {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid transparent;
        cursor: pointer;
        transition: transform 0.2s;
    }

    .mob-color-option.active {
        border-color: var(--primary-color);
        transform: scale(1.1);
    }

    /* کنترل تعداد دایره‌ای */
    .mob-circular-counter {
        display: flex;
        align-items: center;
        background: var(--search-bg);
        border: 1px solid var(--border-color);
        border-radius: 25px;
        padding: 2px 6px;
    }

    .mob-circular-counter button {
        background: none;
        border: none;
        width: 28px;
        height: 32px;
        font-size: 15px;
        font-weight: bold;
        color: var(--text-color);
        cursor: pointer;
    }

    #mob-qty {
        width: 24px;
        border: none;
        background: none;
        text-align: center;
        font-size: 13px;
        font-weight: 700;
        color: var(--text-color);
    }

    /* دکمه افزودن به سبد خرید موبایل (متن کامل و کاملاً بولد) */
    .mob-circular-add-btn {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 11px 16px;
        border-radius: 25px;
        font-size: 11px;
        font-weight: 800;
        /* کاملاً بولد */
        display: flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 4px 15px rgba(240, 108, 96, 0.35);
        cursor: pointer;
        transition: transform 0.2s;
        white-space: nowrap;
    }

    .mob-circular-add-btn:active {
        transform: scale(0.96);
    }
}












.qs-cart-checkout-container {
    max-width: 1140px;
    margin: 30px auto;
    padding: 0 20px 140px 20px;
    box-sizing: border-box;
}

/* هدر مراحل تسویه حساب */
.qs-checkout-steps-header {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--search-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px 30px;
    margin-bottom: 25px;
    gap: 20px;
}

.step-indicator-item {
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s;
}

.step-indicator-item.active {
    opacity: 1;
}

.step-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--border-color);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
}

.step-indicator-item.active .step-num {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 12px rgba(240, 108, 96, 0.3);
}

.step-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.step-txt strong {
    font-size: 13px;
    color: var(--text-color);
}

.step-txt span {
    font-size: 11px;
    color: #777;
}

.step-divider-line {
    flex: 1;
    max-width: 100px;
    height: 1px;
    background: var(--border-color);
}

/* تفکیک مراحل محتوا */
.checkout-step-content {
    display: none;
    flex-direction: column;
    gap: 20px;
}

.checkout-step-content.active {
    display: flex;
}

.qs-cart-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 30px;
    align-items: start;
}

.qs-cart-main-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.qs-cart-section-box {
    background: var(--search-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 22px;
    box-sizing: border-box;
}

.section-box-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 18px;
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 12px;
}

.section-box-title i {
    color: var(--primary-color);
    font-size: 16px;
}

.pulse-anim {
    animation: pulseIcon 2s infinite;
}

@keyframes pulseIcon {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
        color: #ff4757;
    }

    100% {
        transform: scale(1);
    }
}

.spin-slow {
    animation: spinSlow 6s linear infinite;
}

@keyframes spinSlow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* لیست اقلام سبد خرید */
.qs-cart-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 480px;
    overflow-y: auto;
    padding-left: 5px;
}

.qs-cart-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--product-card-bg, #fff);
    border: 1px solid var(--border-color);
    padding: 12px;
    border-radius: 12px;
}

[data-theme="dark"] .qs-cart-item {
    background: #222;
}

.item-img {
    width: 65px;
    height: 65px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f5f5f5;
}

.item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.item-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.item-top-row h4 {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    line-height: 1.4;
}

.remove-item-btn {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 12px;
    transition: color 0.2s;
}

.remove-item-btn:hover {
    color: #ef4444;
}

.item-variant {
    font-size: 11px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 6px;
}

.color-dot-inline {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.item-bot-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
}

.item-price {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-color);
}

.qs-mini-counter {
    display: flex;
    align-items: center;
    background: var(--search-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.qs-mini-counter button {
    background: none;
    border: none;
    width: 22px;
    height: 24px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    color: var(--text-color);
}

.qs-mini-counter input {
    width: 20px;
    border: none;
    background: none;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-color);
}

/* گزینه‌های ارسال */
.qs-shipping-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shipping-option-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--product-card-bg, #fff);
    border: 1px solid var(--border-color);
    padding: 12px 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

[data-theme="dark"] .shipping-option-card {
    background: #222;
}

.shipping-option-card.active {
    border-color: var(--primary-color);
    background: rgba(240, 108, 96, 0.03);
}

.shipping-option-card input {
    accent-color: var(--primary-color);
}

.ship-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ship-info strong {
    font-size: 12px;
    color: var(--text-color);
}

.ship-info span {
    font-size: 11px;
    color: #777;
}

.ship-price {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-color);
}

/* فرم تسویه حساب ووکامرس */
.qs-woocommerce-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-group label {
    font-size: 11px;
    font-weight: 600;
    color: #777;
}

.field-group input,
.field-group select,
.field-group textarea {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--product-card-bg, #fff);
    color: var(--text-color);
    font-size: 12px;
    box-sizing: border-box;
    outline: none;
}

[data-theme="dark"] .field-group input,
[data-theme="dark"] .field-group select,
[data-theme="dark"] .field-group textarea {
    background: #222;
}

.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
    border-color: var(--primary-color);
}

/* دکمه‌های ناوبری بین مراحل */
.qs-next-step-btn,
.qs-prev-step-btn {
    background: var(--text-color);
    color: var(--product-card-bg, #fff);
    border: none;
    padding: 13px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.2s;
}

.qs-next-step-btn {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 15px rgba(240, 108, 96, 0.3);
}

.step-nav-buttons-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

/* سایدبار فاکتور و پرداخت (با اصلاح top: 75px) */
.qs-checkout-sidebar-col {
    position: sticky;
    top: 75px;
}

.qs-checkout-card {
    background: var(--search-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-sizing: border-box;
}

.qs-checkout-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 5px 0;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #666;
}

.summary-line strong {
    color: var(--text-color);
    font-weight: 600;
}

.text-success {
    color: #10b981 !important;
}

/* باکس سود از خرید */
.profit-highlight-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px dashed #10b981;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 11px;
    color: #065f46;
}

[data-theme="dark"] .profit-highlight-badge {
    color: #34d399;
}

.profit-highlight-badge i {
    color: #10b981;
    font-size: 14px;
}

.profit-highlight-badge strong {
    font-weight: 800;
    color: inherit;
}

.coupon-box-inline {
    display: flex;
    gap: 8px;
}

.coupon-box-inline input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--product-card-bg, #fff);
    color: var(--text-color);
    font-size: 11px;
}

[data-theme="dark"] .coupon-box-inline input {
    background: #222;
}

.coupon-box-inline button {
    background: var(--text-color);
    color: var(--product-card-bg, #fff);
    border: none;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

/* روش‌های پرداخت */
.payment-methods-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px dashed var(--border-color);
    padding-top: 14px;
}

.payment-gateway-option {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--product-card-bg, #fff);
    border: 1px solid var(--border-color);
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

[data-theme="dark"] .payment-gateway-option {
    background: #222;
}

.payment-gateway-option.active {
    border-color: var(--primary-color);
    background: rgba(240, 108, 96, 0.03);
}

.payment-gateway-option input {
    accent-color: var(--primary-color);
}

.gateway-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
}

.gateway-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gateway-name-row strong {
    color: var(--text-color);
    font-size: 11px;
}

.gateway-name-row img {
    height: 16px;
    object-fit: contain;
}

.gateway-details span {
    color: #777;
    font-size: 10px;
}

.snapppay-option.active {
    border-color: #0056b3;
    background: rgba(0, 86, 179, 0.04);
}

.snapppay-option input {
    accent-color: #0056b3;
}

.total-final-line {
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    font-size: 13px !important;
}

.total-final-line strong {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-color);
}

.qs-final-checkout-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 22px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(240, 108, 96, 0.3);
    transition: transform 0.2s;
    width: 100%;
}

.qs-final-checkout-btn:hover {
    transform: translateY(-2px);
}

.secure-badge-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 10px;
    color: #888;
}

.secure-badge-footer i {
    color: #10b981;
}

/* تنظیمات موبایل و دسکتاپ */
.mobile-only-bar {
    display: none;
}

@media (max-width: 768px) {
    .qs-cart-grid {
        grid-template-columns: 1fr;
    }

    .form-grid-2 {
        grid-template-columns: 1fr;
    }

    .desktop-only-btn {
        display: none !important;
    }

    .qs-checkout-sidebar-col {
        position: static;
    }

    .qs-checkout-steps-header {
        padding: 12px 15px;
    }

    .step-txt span {
        display: none;
    }

    .mobile-only-bar {
        display: block !important;
        position: fixed !important;
        bottom: 12px !important;
        left: 12px !important;
        right: 12px !important;
        z-index: 9999999 !important;
    }

    .mob-sticky-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid var(--border-color);
        padding: 10px 16px;
        border-radius: 35px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    }

    [data-theme="dark"] .mob-sticky-wrapper {
        background: rgba(24, 24, 24, 0.96);
    }

    .mob-total-display {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .mob-total-display span {
        font-size: 10px;
        color: #888;
    }

    .mob-total-display strong {
        font-size: 14px;
        font-weight: 800;
        color: var(--text-color);
    }

    .mob-sticky-checkout-btn {
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 11px 18px;
        border-radius: 25px;
        font-size: 12px;
        font-weight: 800;
        display: flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 4px 15px rgba(240, 108, 96, 0.35);
        cursor: pointer;
    }
}

















.qs-shop-archive-container {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    font-family: inherit;
    box-sizing: border-box;
    padding: 15px;
    background-color: var(--qs-bg);
}

.qs-shop-archive-container * {
    box-sizing: border-box;
}

/* هدر بالا */
.qs-shop-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--qs-card-bg);
    color: var(--qs-text);
    padding: 22px 25px;
    border-radius: 16px;
    border: 1px solid var(--qs-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 15px;
}

.shop-result-count h1 {
    font-size: 18px;
    margin: 0 0 5px 0;
    color: var(--qs-text);
    font-weight: 700;
}

.shop-result-count span {
    font-size: 13px;
    color: var(--qs-text-sub);
}

.shop-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.qs-sort-dropdown-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--qs-input-bg);
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--qs-border);
}

.qs-sort-dropdown-wrap label {
    font-size: 13px;
    color: var(--qs-text);
    white-space: nowrap;
}

.qs-sort-select {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    outline: none;
    cursor: pointer;
    color: var(--qs-text);
}

.qs-sort-select option {
    background: var(--qs-card-bg);
    color: var(--qs-text);
}

/* صفحه‌بندی */
.qs-pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--qs-card-bg);
    color: var(--qs-text);
    padding: 14px 25px;
    border-radius: 12px;
    border: 1px solid var(--qs-border);
    margin-bottom: 20px;
}

.qs-pagination-bar.bottom-pagination {
    margin-top: 25px;
    margin-bottom: 0;
}

.page-info-text {
    font-size: 13px;
    color: var(--qs-text-sub);
}

.pagination-buttons {
    display: flex;
    gap: 6px;
}

.page-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--qs-border);
    background: var(--qs-card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    color: var(--qs-text);
    transition: all 0.2s;
}

.page-btn.active,
.page-btn:hover {
    background: var(--qs-primary);
    color: #fff;
    border-color: var(--qs-primary);
}

/* ساختار دو ستونه */
.qs-shop-grid-layout {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 20px;
    align-items: start;
}

/* سایدبار فیلتر */
.qs-filter-sidebar-col {
    background: var(--qs-card-bg);
    color: var(--qs-text);
    border-radius: 16px;
    border: 1px solid var(--qs-border);
    padding: 24px;
    position: sticky;
    top: 75px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.filter-drawer-header {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--qs-border);
}

.filter-drawer-header h3 {
    font-size: 16px;
    margin: 0;
    color: var(--qs-text);
    font-weight: 700;
}

.close-drawer-btn {
    background: var(--qs-input-bg);
    border: 1px solid var(--qs-border);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 14px;
    color: var(--qs-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-group {
    margin-bottom: 22px;
}

.filter-group:last-child {
    margin-bottom: 0;
}

.filter-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--qs-text);
    margin-bottom: 12px;
}

.filter-title.mb-0 {
    margin-bottom: 0;
}

/* آکاردئون دسته‌ها */
.accordion-group {
    border: 1px solid var(--qs-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--qs-card-bg);
    transition: border-color 0.2s;
}

.accordion-group:hover {
    border-color: var(--qs-secondary);
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: var(--qs-input-bg);
    cursor: pointer;
}

.acc-icon {
    font-size: 12px;
    color: var(--qs-secondary);
    transition: transform 0.3s ease;
}

.accordion-group.active .acc-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-in-out;
    padding: 0 15px;
    background: var(--qs-card-bg);
}

.accordion-group.active .accordion-content {
    max-height: 250px;
    padding: 12px 15px 15px 15px;
    overflow-y: auto;
}

.filter-search-input {
    position: relative;
}

.filter-search-input input {
    width: 100%;
    padding: 10px 38px 10px 14px;
    border: 1px solid var(--qs-border);
    background: var(--qs-input-bg);
    border-radius: 10px;
    font-size: 13px;
    outline: none;
    color: var(--qs-text);
    transition: border-color 0.2s;
}

.filter-search-input input:focus {
    border-color: var(--qs-secondary);
}

.filter-search-input i {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: var(--qs-text-sub);
    font-size: 13px;
}

.filter-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-checkbox-list.scrollable-list {
    max-height: 170px;
    overflow-y: auto;
    padding-left: 5px;
}

.custom-check-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--qs-text-sub);
    cursor: pointer;
}

.custom-check-label input {
    margin-left: 8px;
    accent-color: var(--qs-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.count-badge {
    background: var(--qs-input-bg);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    color: var(--qs-text-sub);
    border: 1px solid var(--qs-border);
}

/* پالت رنگی فیلتر */
.color-swatches-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.color-swatch-item {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--qs-card-bg);
    box-shadow: 0 0 0 1px var(--qs-border);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.color-swatch-item.active,
.color-swatch-item:hover {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px var(--qs-secondary);
}

.price-slider-range {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qs-range-input {
    width: 100%;
    accent-color: var(--qs-primary);
}

.price-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--qs-text-sub);
}

.qs-apply-filter-btn {
    width: 100%;
    padding: 12px;
    background: var(--qs-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
    display: none;
}

/* گرید محصولات */
.qs-products-grid-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
}

/* نمایشی موبایل */
.mobile-only-flex {
    display: none;
}

.qs-mobile-filter-sticky-bar {
    display: none;
}

@media (max-width: 992px) {
    .qs-shop-grid-layout {
        grid-template-columns: 1fr;
    }

    .mobile-only-flex {
        display: flex;
    }

    .qs-filter-sidebar-col {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        z-index: 99999;
        background: var(--qs-card-bg);
        color: var(--qs-text);
        overflow-y: auto;
        transition: right 0.3s ease-in-out;
        border-radius: 0;
        padding: 20px;
    }

    .qs-filter-sidebar-col.open-drawer {
        right: 0;
    }

    .filter-drawer-header {
        display: flex;
    }

    .qs-apply-filter-btn {
        display: block;
    }

    .qs-mobile-filter-sticky-bar {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: var(--qs-card-bg);
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.15);
        z-index: 9999;
        padding: 10px 15px;
        border-top: 1px solid var(--qs-border);
    }

    .mob-sticky-filter-wrapper {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .mob-bottom-action-btn {
        background: none;
        border: none;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: var(--qs-text);
        font-weight: 600;
        cursor: pointer;
        padding: 6px 12px;
    }

    .mob-vertical-divider {
        width: 1px;
        height: 24px;
        background: var(--qs-border);
    }

    .qs-shop-archive-container {
        padding-bottom: 75px;
    }
}

/* استایل سوییچ محصولات موجود */
.qs-in-stock-switch-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--qs-text);
    cursor: pointer;
}

.qs-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.qs-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.qs-slider-round {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--qs-input-bg);
    border: 1px solid var(--qs-border);
    transition: .3s;
    border-radius: 24px;
}

.qs-slider-round:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: var(--qs-text-sub);
    transition: .3s;
    border-radius: 50%;
}

.qs-switch input:checked+.qs-slider-round {
    background-color: var(--qs-primary);
    border-color: var(--qs-primary);
}

.qs-switch input:checked+.qs-slider-round:before {
    transform: translateX(20px);
    background-color: #fff;
}

/* استایل‌های کارت محصول ناموجود */
.qs-product-card.out-of-stock {
    opacity: 0.75;
}

.qs-product-card.out-of-stock img {
    filter: grayscale(80%);
}

.qs-status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #7a7a7a;
    color: #fff;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 600;
    z-index: 2;
}

.qs-price-or-status {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.qs-out-of-stock-text {
    font-size: 13px;
    font-weight: 700;
    color: var(--qs-text-sub);
    background: var(--qs-input-bg);
    padding: 6px 12px;
    border-radius: 8px;
    width: 100%;
    text-align: center;
    border: 1px dashed var(--qs-border);
}
























/* ============ جستجوی زنده محصولات (Live Search) ============ */
.qskin-live-search-wrap {
    position: relative;
}

.qskin-live-search-results {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    background: var(--header-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    max-height: 500px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1000;
}

.qskin-live-search-results.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.qskin-live-loading,
.qskin-live-no-results {
    padding: 30px 20px;
    text-align: center;
    color: #888;
    font-size: 13px;
}

.qskin-live-loading i {
    color: var(--primary-color);
    margin-left: 8px;
}

.qskin-live-no-results i {
    display: block;
    font-size: 32px;
    color: #ccc;
    margin-bottom: 10px;
}

/* ============ لیست نتایج ============ */
.qskin-live-results-list {
    padding: 8px;
}

.qskin-live-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.2s;
    border-bottom: 1px solid var(--border-color);
}

.qskin-live-result-item:last-child {
    border-bottom: none;
}

.qskin-live-result-item:hover {
    background: var(--search-bg);
}

.qskin-live-img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--search-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
}

.qskin-live-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qskin-live-img i {
    color: #ccc;
    font-size: 20px;
}

.qskin-live-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: right;
}

.qskin-live-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.qskin-live-category {
    font-size: 11px;
    color: #888;
}

.qskin-live-price {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-color);
}

.qskin-live-out {
    font-size: 11px;
    color: #999;
    font-weight: 600;
}

/* ============ دکمه "مشاهده همه نتایج" ============ */
.qskin-live-view-all {
    display: block;
    padding: 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    background: var(--search-bg);
    border-top: 1px solid var(--border-color);
    transition: background 0.2s;
    border-radius: 0 0 16px 16px;
}

.qskin-live-view-all:hover {
    background: var(--soft-color-1);
}

.qskin-live-view-all i {
    margin-right: 6px;
    transition: transform 0.2s;
}

.qskin-live-view-all:hover i {
    transform: translateX(-4px);
}






















.qs-profile-wrapper {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    align-items: start;
}

.qs-profile-sidebar {
    background: var(--qs-card-bg);
    border: 1px solid var(--qs-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.qs-user-brief {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--qs-border);
    margin-bottom: 15px;
}

.qs-avatar-box {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--qs-primary);
    flex-shrink: 0;
}

.qs-avatar-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qs-avatar-edit-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 10px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.qs-user-info-text h3 {
    font-size: 14px;
    color: var(--qs-text);
    margin: 0 0 4px 0;
    font-weight: 700;
}

.qs-user-info-text span {
    font-size: 12px;
    color: var(--qs-text-sub);
}

.qs-profile-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qs-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    color: var(--qs-text);
    text-decoration: none;
    transition: all 0.2s;
}

.qs-menu-link i {
    color: var(--qs-text-sub);
    font-size: 14px;
    transition: color 0.2s;
}

.qs-menu-link:hover,
.qs-menu-link.active {
    background: var(--qs-input-bg);
    color: var(--qs-primary);
    font-weight: 600;
}

.qs-menu-link:hover i,
.qs-menu-link.active i {
    color: var(--qs-primary);
}

/* بخش جدید و بازطراحی‌شده دکمه خروج با فاصله ایمن از منو */
.qs-logout-box-wrapper {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--qs-border);
}

.qs-logout-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 12px;
    color: #ef4444;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.logout-icon-wrap {
    width: 30px;
    height: 30px;
    background: #ef4444;
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: transform 0.3s ease;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.25);
}

.logout-text {
    flex-grow: 1;
}

.qs-logout-btn:hover {
    background: #ef4444;
    color: #fff;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35);
    transform: translateY(-2px);
    border-color: #ef4444;
}

.qs-logout-btn:hover .logout-icon-wrap {
    background: #fff;
    color: #ef4444;
    transform: scale(1.1) rotate(-90deg);
}

/* حذف کامل انیمیشن و ظاهر شدن آنی و درجا (بدون کوچک‌ترین پرش یا جابه‌جایی فوتر) */
.qs-tabs-container {
    position: relative;
    width: 100%;
}

.qs-tab-pane {
    display: none;
}

.qs-tab-pane.active {
    display: block;
}

.qs-profile-content .qs-card-box {
    background: var(--qs-card-bg);
    border: 1px solid var(--qs-border);
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.qs-card-box h2 {
    font-size: 16px;
    color: var(--qs-text);
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: 1px solid var(--qs-border);
    padding-bottom: 12px;
}

/* استایل‌های ویجت‌های پیشخوان */
.qs-dash-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.qs-stat-card {
    background: var(--qs-input-bg);
    border: 1px solid var(--qs-border);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.stat-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.stat-info span {
    font-size: 11px;
    color: var(--qs-text-sub);
}

.stat-info strong {
    font-size: 15px;
    color: var(--qs-text);
}

.section-title-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-title-flex h3 {
    font-size: 14px;
    color: var(--qs-text);
    margin: 0;
    font-weight: 700;
}

.qs-view-all-link {
    font-size: 12px;
    color: var(--qs-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
}

.qs-view-all-link:hover {
    text-decoration: underline;
}

/* دکمه‌های آدرس */
.address-actions-inline {
    display: flex;
    gap: 8px;
}

.qs-action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--qs-border);
    font-family: inherit;
}

.qs-action-btn.edit {
    background: rgba(23, 162, 172, 0.08);
    color: var(--qs-secondary);
    border-color: rgba(23, 162, 172, 0.2);
}

.qs-action-btn.edit:hover {
    background: var(--qs-secondary);
    color: #fff;
    box-shadow: 0 3px 10px rgba(23, 162, 172, 0.25);
    transform: translateY(-1px);
}

.qs-action-btn.delete {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.2);
    width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
}

.qs-action-btn.delete:hover {
    background: #ef4444;
    color: #fff;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.25);
    transform: translateY(-1px);
}

/* فرم‌ها، آدرس‌ها و سفارش‌ها */
.qs-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.qs-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qs-form-group.full-width {
    grid-column: span 2;
}

.qs-form-group label {
    font-size: 12px;
    color: var(--qs-text-sub);
    font-weight: 600;
}

.qs-form-group input {
    background: var(--qs-input-bg);
    border: 1px solid var(--qs-border);
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13px;
    color: var(--qs-text);
    outline: none;
}

.qs-form-group input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.qs-primary-btn,
.qs-secondary-btn {
    background: var(--qs-primary);
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.qs-secondary-btn {
    background: var(--qs-input-bg);
    color: var(--qs-text);
    border: 1px solid var(--qs-border);
}

.qs-box-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--qs-border);
    padding-bottom: 12px;
}

.qs-box-header-flex h2 {
    margin: 0;
    border: none;
    padding: 0;
}

.qs-address-card,
.qs-order-card {
    background: var(--qs-input-bg);
    border: 1px solid var(--qs-border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.address-top,
.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed var(--qs-border);
    padding-bottom: 8px;
}

.address-title,
.order-id {
    font-size: 13px;
    font-weight: 700;
    color: var(--qs-text);
}

.address-details {
    font-size: 13px;
    color: var(--qs-text-sub);
}

.address-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--qs-text-sub);
    border-top: 1px dashed var(--qs-border);
    padding-top: 10px;
    margin-top: 4px;
}

.address-meta-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.address-footer strong {
    color: var(--qs-text);
}

.order-status {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

.order-status.preparing {
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #fde68a;
}

.order-status.shipping {
    background: #e0f2fe;
    color: #0284c7;
    border: 1px solid #bae6fd;
}

.order-status.delivered {
    background: #dcfce7;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.order-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-items-preview {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--qs-border);
}

.order-items-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-info-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.order-info-meta span:last-child {
    font-weight: 700;
    color: var(--qs-text);
}

@media (max-width: 992px) {
    .qs-profile-wrapper {
        grid-template-columns: 1fr;
    }

    .qs-dash-stats-grid {
        grid-template-columns: 1fr;
    }

    .qs-form-grid {
        grid-template-columns: 1fr;
    }

    .qs-form-group.full-width {
        grid-column: span 1;
    }

    .address-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .address-actions-inline {
        width: 100%;
        justify-content: flex-end;
    }
}




/* ============================================================
   ============ لودینگ ناحیه کاربری ============
   ============================================================ */

.qs-tab-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 20px;
    min-height: 350px;
    animation: qsFadeIn 0.3s ease;
}

/* ============ دایره لودینگ ============ */
.qs-loader-circle {
    width: 40px;
    height: 40px;
    border: 3px solid #eee;
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: qsRotate 0.9s linear infinite;
}

@keyframes qsRotate {
    to {
        transform: rotate(360deg);
    }
}

/* ============ متن لودینگ ============ */
.qs-loading-text {
    font-size: 13px;
    font-weight: 500;
    color: #999;
    font-family: inherit;
}

@keyframes qsFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ============ پیام خطا ============ */
.qs-tab-error {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    min-height: 350px;
    text-align: center;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
    animation: qsFadeIn 0.3s ease;
}

/* ============ ریسپانسیو ============ */
@media (max-width: 768px) {
    .qs-tab-loading {
        min-height: 280px;
        padding: 60px 15px;
        gap: 14px;
    }

    .qs-loader-circle {
        width: 36px;
        height: 36px;
        border-width: 2.5px;
    }
}



/* ============================================================
   ============ مدال آدرس ============
   ============================================================ */
.qs-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.qs-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.qs-modal-box {
    background: var(--header-bg);
    border-radius: 20px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
    transform: translateY(20px) scale(0.98);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.qs-modal-overlay.active .qs-modal-box {
    transform: translateY(0) scale(1);
}

.qs-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 25px;
    border-bottom: 1px solid var(--border-color);
}

.qs-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
}

.qs-modal-close {
    background: var(--search-bg);
    border: 1px solid var(--border-color);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-color);
    transition: all 0.2s;
    font-size: 14px;
}

.qs-modal-close:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.qs-modal-body {
    padding: 25px;
}

.qs-modal-body .qs-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.qs-modal-body .qs-form-group.full-width {
    grid-column: 1 / -1;
}

.qs-modal-body select,
.qs-modal-body input,
.qs-modal-body textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-size: 13.5px;
    font-family: inherit;
    background: var(--header-bg);
    color: var(--text-color);
    transition: all 0.2s;
}

.qs-modal-body select:focus,
.qs-modal-body input:focus,
.qs-modal-body textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(240, 108, 96, 0.1);
    outline: none;
}

.qs-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--border-color);
}

.qs-modal-footer .qs-primary-btn,
.qs-modal-footer .qs-secondary-btn {
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-family: inherit;
}

.qs-modal-footer .qs-primary-btn {
    background: var(--primary-color);
    color: #fff;
}

.qs-modal-footer .qs-primary-btn:hover {
    background: var(--color-1);
}

.qs-modal-footer .qs-secondary-btn {
    background: var(--search-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.qs-modal-footer .qs-secondary-btn:hover {
    background: var(--border-color);
}

/* ============ ریسپانسیو ============ */
@media (max-width: 600px) {
    .qs-modal-body .qs-form-grid {
        grid-template-columns: 1fr;
    }

    .qs-modal-box {
        max-height: 95vh;
    }
}



.pixelhiro-404-section {
    width: 100%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    box-sizing: border-box;
}

.notfound-wrapper {
    max-width: 560px;
    width: 100%;
    background: var(--header-bg, #ffffff);
    border: 1px solid var(--border-color, #e5e5e5);
    border-radius: 32px;
    padding: 50px 35px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    position: relative;
    animation: cardEntrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cardEntrance {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.96);
    }

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

/* ابعاد بزرگ‌تر و انیمیشن ورود سریع‌تر لوگو */
.logo-404-container {
    width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: -10px 0;
    animation: logoPopIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

@keyframes logoPopIn {
    0% {
        opacity: 0;
        transform: scale(0.2) rotate(-20deg);
    }

    70% {
        transform: scale(1.12) rotate(6deg);
    }

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

.logo-404-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* افکت گلیچ پرسرعت، پرحجم و شبیه به به هم ریختگی دیجیتال */
    animation: heavyGlitch 1.8s infinite steps(2, start);
}

/* گلیچ شدید و متناوب با پرش‌های ناگهانی و تغییرات رنگ */
@keyframes heavyGlitch {
    0% {
        transform: translate(0, 0) skew(0deg);
        filter: drop-shadow(0 0 0px var(--primary-color));
        opacity: 1;
    }

    10% {
        transform: translate(-8px, 4px) skew(-10deg);
        filter: drop-shadow(5px -3px 0px var(--color-2)) hue-rotate(90deg);
    }

    12% {
        transform: translate(6px, -5px) skew(15deg);
        filter: drop-shadow(-6px 4px 0px var(--primary-color));
    }

    15% {
        transform: translate(0, 0) skew(0deg);
        filter: none;
    }

    40% {
        transform: translate(0, 0);
    }

    42% {
        transform: translate(-10px, 2px) scale(1.05);
        filter: drop-shadow(8px 0px 0px var(--color-3)) invert(0.2);
    }

    44% {
        transform: translate(8px, -4px) skew(-20deg);
        filter: drop-shadow(-8px -2px 0px var(--primary-color));
    }

    46% {
        transform: translate(-3px, 3px);
        filter: none;
    }

    70% {
        transform: translate(0, 0);
    }

    73% {
        transform: translate(5px, 6px) skew(10deg);
        filter: drop-shadow(-5px -5px 0px var(--color-2));
    }

    75% {
        transform: translate(-6px, -2px) skew(-5deg);
        filter: drop-shadow(6px 2px 0px var(--color-3));
    }

    77% {
        transform: translate(0, 0) skew(0deg);
        filter: none;
    }

    90% {
        transform: translate(3px, -3px);
        filter: drop-shadow(-3px 3px 0px var(--primary-color));
    }

    100% {
        transform: translate(0, 0);
        filter: none;
    }
}

.notfound-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notfound-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-color);
}

.notfound-desc {
    font-size: 14px;
    color: #777;
    line-height: 1.6;
}

[data-theme="dark"] .notfound-desc {
    color: #aaa;
}

.notfound-actions {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: 10px;
}

.btn-main {
    flex: 1;
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 14px 20px;
    border-radius: 16px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 8px 20px rgba(240, 108, 96, 0.3);
    transition: transform 0.2s, background 0.2s;
}

.btn-main:hover {
    background: #e05b4f;
    transform: translateY(-2px);
}

.btn-secondary {
    flex: 1;
    background: var(--soft-color-2, #fff7f1);
    color: var(--color-1);
    border: 1px solid var(--border-color);
    padding: 14px 20px;
    border-radius: 16px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.2s, background 0.2s, border-color 0.2s;
}

[data-theme="dark"] .btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-2);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    border-color: var(--color-2);
}

@media (max-width: 480px) {
    .logo-404-container {
        width: 190px;
        height: 190px;
    }

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

    .notfound-wrapper {
        padding: 35px 20px;
    }
}




.pixelhiro-contact-section {
    width: 100%;
    padding: 50px 20px 90px 20px;
    box-sizing: border-box;
}

.contact-main-container {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* هدر بالای صفحه */
.contact-hero-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: fadeInDown 0.8s ease forwards;
}

.contact-badge {
    background: var(--soft-color-1, #fcded3);
    color: var(--primary-color);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    align-self: center;
}

.contact-main-title {
    font-size: 30px;
    font-weight: 800;
    color: var(--text-color);
    line-height: 1.4;
}

.contact-main-desc {
    font-size: 14.5px;
    color: #777;
    line-height: 1.7;
}

[data-theme="dark"] .contact-main-desc {
    color: #aaa;
}

/* گرید دو ستونی فرم و اطلاعات */
.contact-content-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 30px;
    align-items: stretch;
}

.contact-form-card,
.info-card-box,
.social-luxury-card {
    background: var(--header-bg, #ffffff);
    border: 1px solid var(--border-color, #e5e5e5);
    border-radius: 28px;
    padding: 35px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.02);
}

.card-section-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-section-title i {
    color: var(--primary-color);
}

/* استایل فرم مدرن */
.luxury-contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.input-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.input-wrap.full-width {
    grid-column: span 2;
}

.input-wrap label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-color);
}

.input-wrap input,
.input-wrap select,
.input-wrap textarea {
    width: 100%;
    background: var(--search-bg, #f8f9fa);
    border: 1px solid var(--border-color);
    padding: 14px 18px 14px 45px;
    border-radius: 14px;
    color: var(--text-color);
    font-family: inherit;
    font-size: 13.5px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.input-wrap select {
    padding: 14px 18px;
    appearance: none;
    cursor: pointer;
}

.input-wrap textarea {
    padding: 14px 18px;
    resize: vertical;
}

.input-wrap input:focus,
.input-wrap select:focus,
.input-wrap textarea:focus {
    border-color: var(--primary-color);
    background: var(--header-bg);
    box-shadow: 0 0 0 4px rgba(240, 108, 96, 0.1);
    outline: none;
}

.input-icon {
    position: absolute;
    left: 18px;
    top: 42px;
    color: #999;
    font-size: 15px;
    pointer-events: none;
}

.select-arrow {
    right: auto;
    left: 18px;
    font-size: 12px;
}

.submit-luxury-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 16px 25px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 8px 25px rgba(240, 108, 96, 0.3);
    transition: all 0.3s ease;
    margin-top: 10px;
}

.submit-luxury-btn:hover {
    background: #e05b4f;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(240, 108, 96, 0.4);
}

/* استایل اطلاعات تماس سایدبار */
.contact-info-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.info-details-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-details-list li {
    display: flex;
    align-items: center;
    gap: 15px;
}

.info-icon-box {
    width: 48px;
    height: 48px;
    background: var(--soft-color-1, #fcded3);
    color: var(--primary-color);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.info-details-list li:hover .info-icon-box {
    transform: scale(1.1) rotate(5deg);
}

.info-label {
    font-size: 11px;
    color: #888;
    display: block;
    margin-bottom: 2px;
}

.info-value {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-color);
}

/* دکمه‌های اینستاگرام و تلگرام (وحشتناک لوکس و جذاب) */
.social-luxury-card {
    background: linear-gradient(135deg, var(--header-bg) 0%, var(--search-bg, #f5f5f5) 100%);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.social-card-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-color);
}

.social-card-subtitle {
    font-size: 12px;
    color: #777;
    margin-top: -10px;
}

.social-buttons-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 5px;
}

.luxury-social-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 18px;
    border-radius: 16px;
    text-decoration: none;
    border: 1px solid var(--border-color);
    background: var(--header-bg);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.soc-icon-bg {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.soc-texts {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.soc-net-name {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-color);
    transition: color 0.3s;
}

.soc-action-text {
    font-size: 11px;
    color: #888;
}

.external-arr {
    font-size: 13px;
    color: #aaa;
    transition: transform 0.3s, color 0.3s;
}

/* استایل اختصاصی اینستاگرام */
.instagram-btn .soc-icon-bg {
    background: linear-text, radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    box-shadow: 0 4px 15px rgba(214, 36, 159, 0.3);
}

.instagram-btn:hover {
    border-color: #d6249f;
    background: linear-gradient(to left, rgba(214, 36, 159, 0.05), transparent);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(214, 36, 159, 0.15);
}

.instagram-btn:hover .soc-net-name {
    color: #d6249f;
}

.instagram-btn:hover .external-arr {
    color: #d6249f;
    transform: translate(-3px, -3px);
}

/* استایل اختصاصی تلگرام */
.telegram-btn .soc-icon-bg {
    background: linear-gradient(135deg, #2aabee 0%, #229ed9 100%);
    box-shadow: 0 4px 15px rgba(42, 171, 238, 0.3);
}

.telegram-btn:hover {
    border-color: #2aabee;
    background: linear-gradient(to left, rgba(42, 171, 238, 0.05), transparent);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(42, 171, 238, 0.15);
}

.telegram-btn:hover .soc-net-name {
    color: #2aabee;
}

.telegram-btn:hover .external-arr {
    color: #2aabee;
    transform: translate(-3px, -3px);
}


/* سکشن نقشه گوگل مپ جداگانه */
.map-section-wrapper {
    background: var(--header-bg, #ffffff);
    border: 1px solid var(--border-color, #e5e5e5);
    border-radius: 28px;
    padding: 30px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.map-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.map-title-box {
    display: flex;
    align-items: center;
    gap: 15px;
}

.map-title-box i {
    font-size: 28px;
    color: var(--primary-color);
    background: var(--soft-color-1);
    padding: 12px;
    border-radius: 14px;
}

.map-title-box h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 3px;
}

.map-title-box span {
    font-size: 12px;
    color: #888;
}

.open-map-direct-btn {
    background: var(--search-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.open-map-direct-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.map-frame-container {
    width: 100%;
    height: 400px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.map-frame-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    filter: grayscale(20%) contrast(1.1);
    transition: filter 0.3s;
}

[data-theme="dark"] .map-frame-container iframe {
    filter: invert(90%) hue-rotate(180deg) brightness(85%) contrast(90%);
}

/* ریسپانسیو */
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

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

@media (max-width: 1024px) {
    .contact-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .form-row-group {
        grid-template-columns: 1fr;
    }

    .input-wrap.full-width {
        grid-column: span 1;
    }

    .map-header-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}





.qskin-boxed-about-wrapper {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 40px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 30px;
    font-family: inherit;
}

/* استایل پایه برای تمام باکس‌ها (هماهنگ با دارک مود و لایت مود سایت اصلی) */
.qskin-content-box {
    background: var(--header-bg, #ffffff);
    border: 1px solid var(--border-color, #e5e5e5);
    border-radius: 28px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    box-sizing: border-box;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.qskin-content-box:hover {
    border-color: var(--primary-color);
    box-shadow: 0 15px 40px rgba(240, 108, 96, 0.06);
}

/* ۱. هدر و لوگوی مستطیلی بزرگ */
.hero-box-area {
    width: 100%;
}

.massive-brand-box {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 60px 40px;
}

.brand-glow-fx {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 150px;
    background: radial-gradient(circle, rgba(240, 108, 96, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

/* مشخصات لوگوی مستطیلی بزرگ بدون دایره */
.rectangular-logo-container {
    width: 240px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    animation: boxLogoFloat 4s ease-in-out infinite;
}

.qskin-rect-logo {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

@keyframes boxLogoFloat {

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

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

.box-badge {
    background: var(--soft-color-1, #fcded3);
    color: var(--primary-color);
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
}

.box-main-title {
    font-size: 34px;
    font-weight: 900;
    color: var(--text-color);
    line-height: 1.4;
}

.box-main-desc {
    font-size: 15px;
    color: #777;
    line-height: 1.8;
    max-width: 700px;
}

[data-theme="dark"] .box-main-desc {
    color: #aaa;
}

/* ۲. گرید آمار و ارقام (۴ باکس) */
.boxes-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.stat-single-box {
    text-align: center;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.box-num {
    font-size: 30px;
    font-weight: 900;
    color: var(--primary-color);
}

.box-lbl {
    font-size: 13px;
    color: #777;
    font-weight: 700;
}

[data-theme="dark"] .box-lbl {
    color: #aaa;
}

/* ۳. بخش داستان برند */
.large-wide-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 50px;
}

.box-section-tag {
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.large-wide-box h2 {
    font-size: 28px;
    font-weight: 900;
    color: var(--text-color);
}

.large-wide-box p {
    font-size: 14.5px;
    color: #777;
    line-height: 1.9;
}

[data-theme="dark"] .large-wide-box p {
    color: #aaa;
}

.box-features-row {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.mini-feature-box {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-color);
}

.mini-feature-box i {
    width: 24px;
    height: 24px;
    background: var(--soft-color-1);
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

/* ۴. ارزش‌های برند (۳ باکس) */
.boxes-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.feature-box-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 35px 30px;
}

.box-icon-wrap {
    width: 55px;
    height: 55px;
    background: var(--soft-color-1);
    color: var(--primary-color);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: transform 0.3s;
}

.feature-box-card:hover .box-icon-wrap {
    transform: scale(1.1) rotate(-5deg);
}

.feature-box-card h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-color);
}

.feature-box-card p {
    font-size: 13.5px;
    color: #777;
    line-height: 1.7;
}

[data-theme="dark"] .feature-box-card p {
    color: #aaa;
}

/* ۵. کال‌تواکشن نهایی (باکس رنگی) */
.cta-colored-box {
    background: linear-gradient(135deg, var(--color-1, #177b82) 0%, #125f65 100%);
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px;
    gap: 30px;
    box-shadow: 0 15px 35px rgba(23, 123, 130, 0.2);
}

.cta-inner-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 600px;
}

.cta-mini-tag {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 5px 14px;
    border-radius: 15px;
    font-size: 11.5px;
    font-weight: 700;
    width: fit-content;
}

.cta-colored-box h2 {
    font-size: 26px;
    font-weight: 900;
    color: white;
    line-height: 1.4;
}

.cta-colored-box p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}

.cta-box-buttons {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.box-btn {
    padding: 14px 26px;
    border-radius: 14px;
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.3s, background 0.3s;
}

.primary-box-btn {
    background: white;
    color: var(--color-1, #177b82);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.primary-box-btn:hover {
    transform: translateY(-3px);
    background: #f8f9fa;
}

.outline-box-btn {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.outline-box-btn:hover {
    border-color: white;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
}

/* ریسپانسیو موبایل و تبلت */
@media (max-width: 1024px) {
    .boxes-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .boxes-grid-3 {
        grid-template-columns: 1fr;
    }

    .cta-colored-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .cta-box-buttons {
        width: 100%;
        flex-direction: column;
    }

    .box-btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .boxes-grid-4 {
        grid-template-columns: 1fr;
    }

    .box-main-title {
        font-size: 26px;
    }

    .large-wide-box {
        padding: 30px;
    }

    .massive-brand-box {
        padding: 40px 20px;
    }
}








.pixelhiro-single-post-section {
    width: 100%;
    padding: 40px 20px 80px 20px;
    box-sizing: border-box;
}

.single-post-container {
    max-width: 1320px;
    margin: 0 auto;
}

/* مسیر راهنما */
.qs-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #888;
    margin-bottom: 25px;
}

.qs-breadcrumb a {
    color: var(--text-color);
    text-decoration: none;
    opacity: 0.7;
}

.qs-breadcrumb a:hover {
    opacity: 1;
    color: var(--primary-color);
}

.qs-breadcrumb i {
    font-size: 9px;
    color: #bbb;
}

.qs-breadcrumb span {
    color: var(--primary-color);
    font-weight: 500;
}

/* ساختار گرید دو ستونی */
.single-post-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    align-items: start;
}

/* استایل مشترک کارت‌ها */
.post-main-card,
.author-box-card,
.comments-section-card,
.sidebar-widget {
    background: var(--header-bg, #ffffff);
    border: 1px solid var(--border-color, #e5e5e5);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    margin-bottom: 24px;
}

/* کارت اصلی مقاله */
.post-meta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: 12px;
    color: #888;
}

.post-category-badge {
    background: var(--soft-color-1, #fcded3);
    color: var(--primary-color);
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 11px;
}

.post-meta-info {
    display: flex;
    gap: 15px;
}

.post-main-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-color);
    line-height: 1.5;
    margin-bottom: 20px;
}

.post-featured-image {
    width: 100%;
    height: 420px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 25px;
    border: 1px solid var(--border-color);
}

.post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-body-content {
    font-size: 14.5px;
    line-height: 1.9;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.post-body-content .lead-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-1);
}

.post-body-content h2,
.post-body-content h3 {
    margin-top: 15px;
    color: var(--text-color);
}

/* تگ‌ها و دکمه‌های شیر مطلب */
.post-footer-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    margin-top: 35px;
    padding-top: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.post-tags-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.post-tags-list a {
    background: var(--search-bg, #f5f5f5);
    color: var(--text-color);
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 12px;
    text-decoration: none;
    opacity: 0.8;
    transition: 0.2s;
}

.post-tags-list a:hover {
    background: var(--primary-color);
    color: white;
    opacity: 1;
}

.post-share-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.share-label {
    font-size: 12px;
    font-weight: 700;
    color: #777;
}

.share-icons {
    display: flex;
    gap: 8px;
}

.share-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    font-size: 14px;
    transition: transform 0.2s;
}

.share-btn:hover {
    transform: translateY(-3px);
}

.share-btn.telegram {
    background: #0088cc;
}

.share-btn.twitter {
    background: #000000;
}

[data-theme="dark"] .share-btn.twitter {
    background: #333;
    border: 1px solid #555;
}

.share-btn.linkedin {
    background: #0a66c2;
}

.share-btn.whatsapp {
    background: #25d366;
}

/* باکس نویسنده لوکس */
.author-box-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, var(--header-bg) 0%, var(--search-bg, #f5f5f5) 100%);
}

.author-avatar {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--primary-color);
    flex-shrink: 0;
}

.author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.author-role {
    font-size: 11px;
    color: var(--primary-color);
    font-weight: 700;
}

.author-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-color);
}

.author-bio {
    font-size: 12.5px;
    color: #777;
    line-height: 1.6;
}

[data-theme="dark"] .author-bio {
    color: #aaa;
}

/* بخش کامنت‌ها */
.comments-header-title h3 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 20px;
}

.comment-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
    background: var(--search-bg);
    padding: 20px;
    border-radius: 16px;
}

.comment-form h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
}

.form-grid-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.comment-form input,
.comment-form textarea,
.sidebar-search-box input {
    width: 100%;
    background: var(--header-bg);
    border: 1px solid var(--border-color);
    padding: 12px 15px;
    border-radius: 12px;
    color: var(--text-color);
    font-family: inherit;
    font-size: 13px;
    box-sizing: border-box;
}

.comment-form textarea {
    resize: vertical;
}

.submit-comment-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.comment-item {
    background: var(--search-bg);
    border: 1px solid var(--border-color);
    padding: 18px;
    border-radius: 16px;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.comment-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.user-avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uname {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color);
}

.uname small {
    font-size: 10px;
    color: var(--primary-color);
    font-weight: normal;
}

.udate {
    font-size: 10px;
    color: #999;
}

.reply-btn {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.comment-text {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}

[data-theme="dark"] .comment-text {
    color: #bbb;
}

.comment-reply-item {
    margin-top: 15px;
    margin-right: 30px;
    background: var(--header-bg);
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 12px;
}

/* سایدبار با اسکرول ثابت (Sticky Sidebar) */
.sticky-sidebar {
    position: sticky;
    top: 90px;
}

.sidebar-search-box {
    display: flex;
    gap: 8px;
}

.sidebar-search-box button {
    background: var(--primary-color);
    color: white;
    border: none;
    width: 45px;
    border-radius: 12px;
    cursor: pointer;
}

.widget-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid var(--soft-color-1, #fcded3);
    padding-bottom: 8px;
}

.text-accent {
    color: var(--primary-color);
}

.widget-posts-list,
.widget-products-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.widget-post-row,
.widget-product-row {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    padding: 8px;
    border-radius: 12px;
    transition: background 0.2s;
}

.widget-post-row:hover,
.widget-product-row:hover {
    background: var(--search-bg);
}

.widget-post-row img,
.widget-product-row img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.wpost-info h4,
.wprod-info h4 {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.4;
    margin-bottom: 4px;
}

.wpost-info span {
    font-size: 10.5px;
    color: #999;
}

.wprod-info .price {
    font-size: 12px;
    font-weight: 800;
    color: var(--primary-color);
}

/* ریسپانسیو */
@media (max-width: 1024px) {
    .single-post-grid {
        grid-template-columns: 1fr;
    }

    .sticky-sidebar {
        position: static;
    }
}

@media (max-width: 480px) {
    .form-grid-inputs {
        grid-template-columns: 1fr;
    }

    .post-main-card,
    .author-box-card,
    .comments-section-card,
    .sidebar-widget {
        padding: 20px;
    }
}













.reply-comment-form {
    margin-top: 15px;
    padding: 18px;
    border-radius: 14px;
    background: #f8f9fb;
    border: 1px solid #eee;
}

.reply-comment-form h4 {
    margin: 0 0 15px;
    font-size: 14px;
}

.reply-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.reply-comment-form input,
.reply-comment-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 9px;
    padding: 11px 13px;
    font-family: inherit;
    outline: none;
}

.reply-comment-form textarea {
    resize: vertical;
    margin-bottom: 10px;
}

.reply-form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.submit-reply-btn,
.cancel-reply-btn {
    border: 0;
    border-radius: 9px;
    padding: 9px 15px;
    font-family: inherit;
    cursor: pointer;
}

.submit-reply-btn {
    background: #222;
    color: #fff;
}

.cancel-reply-btn {
    background: #eee;
    color: #555;
}

.reply-form-message {
    margin-top: 10px;
    font-size: 13px;
}

.reply-form-message.success {
    color: #16834b;
}

.reply-form-message.error {
    color: #d33;
}

.comment-reply {
    margin-right: 45px;
}

@media (max-width: 700px) {

    .reply-form-grid {
        grid-template-columns: 1fr;
    }

    .comment-reply {
        margin-right: 20px;
    }

}





/* ============ لوگوی داینامیک ============ */
.logo-desktop,
.sticky-logo .logo-desktop {
    display: block;
    max-height: 50px;
    width: auto;
}

.logo-mobile,
.sticky-logo .logo-mobile {
    display: none;
    max-height: 40px;
    width: auto;
}

/* موبایل: مخفی کردن دسکتاپ، نمایش موبایل */
@media (max-width: 768px) {

    .logo-desktop,
    .sticky-logo .logo-desktop {
        display: none;
    }

    .logo-mobile,
    .sticky-logo .logo-mobile {
        display: block;
    }
}
















.qskin-auth-page-wrapper {
    width: 100%;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    box-sizing: border-box;
    font-family: inherit;
}

.qskin-auth-box {
    width: 100%;
    max-width: 460px;
    background: var(--header-bg, #ffffff);
    border: 1px solid var(--border-color, #e5e5e5);
    border-radius: 32px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: relative;
    overflow: hidden;
    animation: authBoxFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

[data-theme="dark"] .qskin-auth-box {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

@keyframes authBoxFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

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

.auth-box-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
    position: relative;
}

.back-to-home-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #777;
    text-decoration: none;
    background: var(--search-bg, #f8f9fa);
    border: 1px solid var(--border-color);
    padding: 6px 14px;
    border-radius: 12px;
    transition: all 0.3s ease;
    margin-bottom: 5px;
}

.back-to-home-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateX(-3px);
}

[data-theme="dark"] .back-to-home-btn {
    color: #aaa;
}

/* کانتینر هاله‌های نور و لوگو */
.auth-logo-universe {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    overflow: hidden;
}

/* هاله‌های نوری بسیار لایت و ملایم (صورتی و زرد پاستیلی) در زیر لوگو */
.ambient-auth-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

.auth-glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(45px);
    opacity: 0.18;
    /* بسیار کم‌رنگ و محو برای دیده شدن کامل لوگو */
    animation: authOrbSoftFloat 10s ease-in-out infinite alternate;
}

[data-theme="dark"] .auth-glow-orb {
    opacity: 0.25;
}

.pastel-pink {
    width: 160px;
    height: 160px;
    background: #ffb5b5;
    /* صورتی خیلی لایت */
    transform: translate(-30px, 10px);
    animation-delay: 0s;
}

.pastel-yellow {
    width: 150px;
    height: 150px;
    background: #ffe3a3;
    /* زرد خیلی لایت */
    transform: translate(35px, -10px);
    animation-delay: -5s;
}

@keyframes authOrbSoftFloat {
    0% {
        transform: translate(-25px, 10px) scale(0.9);
    }

    50% {
        transform: translate(30px, -15px) scale(1.15);
    }

    100% {
        transform: translate(-15px, -5px) scale(1);
    }
}

/* انیمیشن ترکیبی ظاهر شدن اولیه و شناوری پیوسته و ملایم (پالس نرم) برای لوگو */
.auth-logo-container {
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    animation: logoEntranceAndBreath 6s ease-in-out infinite;
    animation-delay: 1.2s;
    /* شروع انیمیشن دائم بعد از لود اولیه */
}

@keyframes logoEntranceAndBreath {

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

    50% {
        transform: translateY(-5px) scale(1.02);
    }
}

/* لود اولیه خیلی نرم لوگو */
.auth-rect-logo {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    animation: softLogoReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes softLogoReveal {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.auth-titles h1 {
    font-size: 24px;
    font-weight: 900;
    color: var(--text-color);
    margin-bottom: 6px;
}

.auth-titles p {
    font-size: 13.5px;
    color: #777;
    line-height: 1.6;
}

[data-theme="dark"] .auth-titles p {
    color: #aaa;
}

/* سوئیچ تب‌های ورود */
.auth-tabs-switcher {
    display: flex;
    background: var(--search-bg, #f4f5f7);
    padding: 5px;
    border-radius: 16px;
    gap: 5px;
    border: 1px solid var(--border-color);
}

.tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #777;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.tab-btn.active {
    background: var(--header-bg, #ffffff);
    color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .tab-btn {
    color: #aaa;
}

.auth-form-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.floating-input-group {
    position: relative;
    width: 100%;
}

.auth-input-field {
    width: 100%;
    background: var(--search-bg, #fcfcfc);
    border: 1.5px solid var(--border-color, #e5e5e5);
    border-radius: 16px;
    padding: 16px 20px 16px 50px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
    box-sizing: border-box;
    outline: none;
    transition: all 0.3s ease;
    font-family: inherit;
}

.auth-input-field:focus {
    border-color: var(--primary-color);
    background: var(--header-bg);
    box-shadow: 0 0 0 4px rgba(240, 108, 96, 0.1);
}

.auth-floating-label {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13.5px;
    color: #888;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    background: transparent;
    padding: 0 4px;
}

.auth-input-field:focus~.auth-floating-label,
.auth-input-field:not(:placeholder-shown)~.auth-floating-label {
    top: 0;
    font-size: 11px;
    font-weight: 800;
    color: var(--primary-color);
    background: var(--header-bg);
}

.input-icon-side {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 16px;
    pointer-events: none;
}

.auth-submit-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 16px;
    padding: 16px;
    font-size: 14.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(240, 108, 96, 0.3);
    transition: all 0.3s ease;
    font-family: inherit;
}

.auth-submit-btn:hover {
    transform: translateY(-2px);
    opacity: 0.95;
    box-shadow: 0 15px 30px rgba(240, 108, 96, 0.4);
}

.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #aaa;
    font-size: 12px;
    font-weight: 700;
    margin: 5px 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-color);
}

.auth-divider span {
    padding: 0 12px;
}

.google-login-btn {
    background: var(--search-bg, #f8f9fa);
    border: 1.5px solid var(--border-color, #e5e5e5);
    border-radius: 16px;
    padding: 14px;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    width: 100%;
    margin-top: 20px;
    text-decoration: none;
}

.google-login-btn:hover {
    border-color: var(--text-color);
    transform: translateY(-2px);
    background: var(--header-bg);
}

.auth-box-footer {
    text-align: center;
    font-size: 11.5px;
    color: #888;
    line-height: 1.6;
}

.auth-box-footer a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 700;
}

.auth-box-footer a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .qskin-auth-box {
        padding: 30px 20px;
        border-radius: 24px;
    }
}

/* ============ پیام‌های فرم ============ */
.auth-form-message {
    margin-top: 15px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
    display: none;
}

.auth-form-message.success,
.auth-form-message.error {
    display: block;
}

.auth-form-message.success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
}

.auth-form-message.error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}



/* ============ ردیف "مرا به خاطر بسپار" و "فراموشی رمز" ============ */
.auth-remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 22px;
    font-size: 13px;
    width: 100%;
    flex-wrap: wrap;
}

/* ============ چک‌باکس + متن ============ */
.auth-remember-row label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #555;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    user-select: none;
    white-space: nowrap;
}

/* مخفی کردن چک‌باکس پیش‌فرض */
.auth-remember-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 1.5px solid #d5d9dd;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    margin: 0;
    flex-shrink: 0;
    position: relative;
    top: 5px;
}

.auth-remember-row input[type="checkbox"]:hover {
    border-color: #18a3ad;
}

.auth-remember-row input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #177b82, #18a3ad);
    border-color: #177b82;
}

/* تیک داخل چک‌باکس */
.auth-remember-row input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 5px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* متن کنار چک‌باکس */
.auth-remember-row label span {
    color: #555;
    font-size: 13px;
}

/* ============ لینک فراموشی رمز ============ */
.auth-forgot-link {
    color: #177b82;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: color 0.2s ease;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

.auth-forgot-link:hover {
    color: #18a3ad;
    text-decoration: underline;
}

/* ============ حالت موبایل ============ */
@media (max-width: 480px) {
    .auth-remember-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}


.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
    display: none;
}





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

/* پاک‌سازی لیست پیش‌فرض ووکامرس */
.qskin-auth-box .woocommerce-notices-wrapper {
    width: 100%;
    margin: 0 0 20px;
    padding: 0;
}

.qskin-auth-box .woocommerce-message,
.qskin-auth-box .woocommerce-info,
.qskin-auth-box .woocommerce-error,
.qskin-auth-box .woocommerce-noreviews,
.qskin-auth-box p.no-comments {
    list-style: none;
    margin: 0 0 12px;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.7;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1.5px solid transparent;
    animation: qskinNoticeSlide 0.3s ease;
}

@keyframes qskinNoticeSlide {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============ پیام موفقیت ============ */
.qskin-auth-box .woocommerce-message {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

.qskin-auth-box .woocommerce-message::before {
    content: "\f00c";
    /* fa-check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: #16a34a;
    background: #dcfce7;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ============ پیام اطلاعات ============ */
.qskin-auth-box .woocommerce-info {
    background: #f0f7f8;
    border-color: #b8e0e3;
    color: #177b82;
}

.qskin-auth-box .woocommerce-info::before {
    content: "\f05a";
    /* fa-circle-info */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: #18a3ad;
    background: #d8eef0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ============ پیام خطا ============ */
.qskin-auth-box .woocommerce-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.qskin-auth-box .woocommerce-error::before {
    content: "\f071";
    /* fa-triangle-exclamation */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: #dc2626;
    background: #fee2e2;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* آیتم‌های داخل لیست خطا */
.qskin-auth-box .woocommerce-error li {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: #b91c1c;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.qskin-auth-box .woocommerce-error li::before {
    content: "•";
    color: #dc2626;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

/* ============ لینک داخل پیام‌ها ============ */
.qskin-auth-box .woocommerce-message a,
.qskin-auth-box .woocommerce-info a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.qskin-auth-box .woocommerce-message a:hover,
.qskin-auth-box .woocommerce-info a:hover {
    opacity: 0.8;
}

/* ============ دکمه بستن پیام (اگه ووکامرس اضافه کنه) ============ */
.qskin-auth-box .woocommerce-message .button,
.qskin-auth-box .woocommerce-info .button {
    margin-left: auto;
    background: transparent !important;
    color: inherit !important;
    border: 1.5px solid currentColor !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.qskin-auth-box .woocommerce-message .button:hover,
.qskin-auth-box .woocommerce-info .button:hover {
    background: currentColor !important;
    color: #fff !important;
}

/* ============ ریسپانسیو ============ */
@media (max-width: 480px) {

    .qskin-auth-box .woocommerce-message,
    .qskin-auth-box .woocommerce-info,
    .qskin-auth-box .woocommerce-error {
        padding: 12px 14px;
        font-size: 13px;
    }

    .qskin-auth-box .woocommerce-message::before,
    .qskin-auth-box .woocommerce-info::before,
    .qskin-auth-box .woocommerce-error::before {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
}



/* ============================================================
   ============ انتخاب آدرس در سبد خرید ============
   ============================================================ */

/* چیدمان گرید کارت‌ها */
.qskin-address-selector-box .qs-addresses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

/* مخفی کردن رادیو */
.qskin-address-selector-box .qskin-address-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* کلیک‌پذیری کل کارت */
.qskin-address-selector-box .qs-address-card {
    cursor: pointer;
    position: relative;
    transition: all 0.25s ease;
}

.qskin-address-selector-box .qs-address-card:hover {
    border-color: #b8dde0;
    box-shadow: 0 4px 16px rgba(24, 163, 173, 0.08);
}

/* حالت انتخاب‌شده */
.qskin-address-selector-box .qs-address-card.selected {
    border-color: #177b82;
    background: #f0f7f8;
    box-shadow: 0 6px 20px rgba(24, 163, 173, 0.15);
}

/* آیکون تیک روی کارت انتخاب‌شده */
.qskin-address-selector-box .qs-address-card.selected::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 12px;
    left: 12px;
    width: 24px;
    height: 24px;
    background: #177b82;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 2;
}

/* دکمه افزودن آدرس */
.qskin-address-selector-box .qskin-add-address-from-cart {
    margin-top: 5px;
}

@media (max-width: 600px) {
    .qskin-address-selector-box .qs-addresses-grid {
        grid-template-columns: 1fr;
    }
}
















/* ============================================================
   ============ جستجوی زنده (Live Search) ============
   ============================================================ */

/* کانتینر جستجو */
.search-box,
.sticky-search {
    position: relative;
}

/* دراپ‌دان نتایج */
.qskin-live-search-results {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    border: 1px solid #e8eaed;
    max-height: 500px;
    overflow-y: auto;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.25s ease;
    direction: rtl;
}

.qskin-live-search-results.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* اسکرول‌بار سفارشی */
.qskin-live-search-results::-webkit-scrollbar {
    width: 6px;
}

.qskin-live-search-results::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.qskin-live-search-results::-webkit-scrollbar-thumb {
    background: #c5c5c5;
    border-radius: 10px;
}

.qskin-live-search-results::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.qskin-live-search-inner {
    padding: 12px;
}

/* ============ بخش‌ها ============ */
.ls-section {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #e8eaed;
}

.ls-section:last-of-type {
    border-bottom: none;
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.ls-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #177b82;
    padding: 6px 8px;
    margin-bottom: 8px;
    background: #f0f7f8;
    border-radius: 8px;
}

.ls-section-title i {
    font-size: 13px;
}

/* ============ محصولات ============ */
.ls-products-list,
.ls-posts-list,
.ls-categories-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ls-product-item,
.ls-post-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
    transition: background 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.ls-product-item:hover,
.ls-post-item:hover {
    background: #f0f7f8;
}

.ls-product-img,
.ls-post-img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ls-product-img img,
.ls-post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ls-no-image {
    color: #ccc;
    font-size: 18px;
}

.ls-product-info,
.ls-post-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ls-product-title,
.ls-post-title {
    font-size: 13px;
    font-weight: 600;
    color: #2c3338;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
}

.ls-product-price {
    font-size: 12px;
    color: #177b82;
    font-weight: 700;
}

.ls-product-price del {
    color: #999;
    font-size: 11px;
    font-weight: 400;
}

.ls-post-date {
    font-size: 11px;
    color: #999;
}

/* ============ دسته‌بندی‌ها ============ */
.ls-category-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #2c3338;
    font-size: 13px;
    transition: background 0.2s ease;
}

.ls-category-item:hover {
    background: #f0f7f8;
    color: #177b82;
}

.ls-category-item i {
    font-size: 10px;
    color: #999;
}

.ls-cat-count {
    color: #999;
    font-size: 11px;
    margin-right: auto;
}

/* ============ حالت لودینگ ============ */
.ls-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px 20px;
    color: #888;
    font-size: 13px;
}

.ls-loading i {
    color: #177b82;
    font-size: 16px;
}

/* ============ حالت بدون نتیجه ============ */
.ls-no-results {
    text-align: center;
    padding: 30px 20px;
    color: #888;
}

.ls-no-results i {
    font-size: 32px;
    color: #ccc;
    margin-bottom: 12px;
    display: block;
}

.ls-no-results p {
    font-size: 13px;
    margin: 0;
}

/* ============ دکمه "مشاهده همه نتایج" ============ */
.ls-view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: linear-gradient(135deg, #177b82, #18a3ad);
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.25s ease;
    margin-top: 8px;
}

.ls-view-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(23, 123, 130, 0.3);
    color: #fff;
}

.ls-view-all i {
    font-size: 12px;
}

/* ============ ریسپانسیو ============ */
@media (max-width: 768px) {
    .qskin-live-search-results {
        max-height: fit-content;
        border-radius: 10px;
        position: fixed;
        top: calc(10% + 8px);
        height: 100%;
        bottom: 0;
    }

    .ls-product-img,
    .ls-post-img {
        width: 44px;
        height: 44px;
    }

    .ls-product-title,
    .ls-post-title {
        font-size: 12.5px;
    }
}






/* ============ حالت فعال دکمه‌های کارت محصول ============ */
.action-icon-btn.is-active {
    background: #f06c60 !important;
    color: #ffffff !important;
    border-color: #f06c60 !important;
}

.action-icon-btn.is-active i {
    color: #ffffff !important;
}

/* ============ دکمه‌های در حال لود ============ */
.action-icon-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============ حالت فعال دکمه‌های صفحه محصول ============ */
.qs-icon-action-btn.is-active {
    background: #f06c60 !important;
    color: #ffffff !important;
    border-color: #f06c60 !important;
}

.qs-icon-action-btn.is-active i {
    color: #ffffff !important;
}

.qs-icon-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}




/* ============================================================
   ============ صفحه جستجو ============
   ============================================================ */

.qs-search-page-container {
    /* همون ساختار آرشیو، فقط با تب‌ها */
}

/* ============ هدر جستجو ============ */
.qs-search-top-bar {
    /* هدر پیش‌فرض آرشیو */
}

.qs-search-term {
    color: var(--primary-color);
    font-weight: 800;
}

/* ============ جستجوی مجدد ============ */
.qs-search-again-box {
    background: var(--header-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.qs-search-again-form {
    display: flex;
    gap: 12px;
    align-items: center;
}

.qs-search-again-form input {
    flex: 1;
    padding: 12px 18px;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    background: var(--search-bg);
    color: var(--text-color);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: all 0.2s ease;
}

.qs-search-again-form input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(240, 108, 96, 0.1);
}

.qs-search-again-form button {
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 22px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.qs-search-again-form button:hover {
    background: var(--color-1);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(240, 108, 96, 0.25);
}

/* ============ تب‌های جستجو ============ */
.qs-search-tabs {
    display: flex;
    gap: 8px;
    background: var(--header-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.qs-search-tab {
    flex: 1;
    min-width: 120px;
    padding: 12px 18px;
    background: transparent;
    border: none;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.qs-search-tab:hover {
    background: var(--search-bg);
}

.qs-search-tab.active {
    background: linear-gradient(135deg, var(--primary-color), #e05b4f);
    color: #fff;
    box-shadow: 0 4px 12px rgba(240, 108, 96, 0.25);
}

.qs-search-tab i {
    font-size: 13px;
}

/* ============ بخش‌های نتایج ============ */
.qs-search-section {
    margin-bottom: 40px;
}

.qs-search-section.hidden {
    display: none;
}

.qs-search-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-color);
}

.qs-search-section-title i {
    color: var(--primary-color);
}

/* ============ گرید مقالات جستجو ============ */
.qs-search-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 992px) {
    .qs-search-posts-grid {
        grid-template-columns: 1fr;
    }
}

/* ============ حالت بدون نتیجه ============ */
.qs-search-no-results {
    text-align: center;
    padding: 60px 20px;
    background: var(--header-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
}

.qs-search-no-results>i {
    font-size: 56px;
    color: var(--primary-color);
    opacity: 0.4;
    margin-bottom: 20px;
    display: block;
}

.qs-search-no-results h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-color);
    margin: 0 0 12px;
}

.qs-search-no-results p {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    margin: 0 0 24px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.qs-search-suggestions {
    background: var(--search-bg);
    border-radius: 16px;
    padding: 20px 24px;
    text-align: right;
    max-width: 400px;
    margin: 0 auto 24px;
}

.qs-search-suggestions h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 12px;
}

.qs-search-suggestions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.qs-search-suggestions li {
    font-size: 13px;
    color: #666;
    padding: 6px 0;
    padding-right: 22px;
    position: relative;
}

.qs-search-suggestions li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 0;
    color: var(--primary-color);
    font-size: 11px;
}

/* ============ ریسپانسیو موبایل ============ */
@media (max-width: 768px) {
    .qs-search-again-form {
        flex-direction: column;
    }

    .qs-search-again-form button {
        width: 100%;
        justify-content: center;
    }

    .qs-search-tabs {
        flex-direction: column;
        gap: 6px;
    }

    .qs-search-tab {
        min-width: auto;
        justify-content: flex-start;
    }
}






/* ============================================================
   ============ صفحه مقایسه محصولات ============
   ============================================================ */

.qs-compare-page-container {
    max-width: 1360px;
    margin: 60px auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* ============ هدر ============ */
.qs-compare-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: var(--header-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 24px 28px;
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    flex-wrap: wrap;
}

.qs-compare-header-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.qs-compare-header-title>i {
    font-size: 28px;
    color: var(--primary-color);
    background: rgba(240, 108, 96, 0.1);
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.qs-compare-header-title h1 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-color);
    margin: 0 0 4px;
}

.qs-compare-header-title span {
    font-size: 13px;
    color: #888;
}

.qs-compare-header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.qs-compare-clear-btn,
.qs-compare-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
    border: 1.5px solid;
}

.qs-compare-clear-btn {
    background: transparent;
    color: #dc2626;
    border-color: #fecaca;
}

.qs-compare-clear-btn:hover {
    background: #fef2f2;
    border-color: #dc2626;
}

.qs-compare-back-btn {
    background: var(--search-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

.qs-compare-back-btn:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* ============ حالت لودینگ ============ */
.qs-compare-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 80px 20px;
    color: #888;
    font-size: 14px;
}

.qs-compare-loading i {
    font-size: 32px;
    color: var(--primary-color);
}

/* ============ خطا ============ */
.qs-compare-error {
    text-align: center;
    padding: 60px 20px;
    color: #dc2626;
}

.qs-compare-error i {
    font-size: 48px;
    margin-bottom: 14px;
    display: block;
    opacity: 0.5;
}

/* ============ گرید مقایسه ============ */
.qs-compare-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: stretch;
}

/* ============ کارت محصول ============ */
.qs-compare-card {
    background: var(--header-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.3s ease;
}

.qs-compare-card:hover {
    border-color: rgba(240, 108, 96, 0.4);
    box-shadow: 0 8px 25px rgba(240, 108, 96, 0.08);
}

/* ============ دکمه حذف ============ */
.qs-compare-remove-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border-color);
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 5;
    transition: all 0.2s ease;
}

.qs-compare-remove-btn:hover {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
    transform: scale(1.1);
}

/* ============ تصویر ============ */
.qs-compare-image {
    width: 100%;
    aspect-ratio: 1;
    background: var(--search-bg);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
}

.qs-compare-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.qs-compare-card:hover .qs-compare-image img {
    transform: scale(1.05);
}

/* ============ اطلاعات ============ */
.qs-compare-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.qs-compare-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 42px;
    transition: color 0.2s;
}

.qs-compare-title:hover {
    color: var(--primary-color);
}

.qs-compare-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-color);
}

.qs-compare-price del {
    color: #999;
    font-size: 12px;
    font-weight: 400;
    display: block;
    margin-bottom: 3px;
}

.qs-compare-price .amount {
    color: var(--primary-color);
}

/* ============ امتیاز ============ */
.qs-stars-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
}

.qs-stars-row i {
    color: #fbbf24;
    font-size: 13px;
}

.qs-stars-row .rating-text {
    color: #888;
    font-size: 11px;
    margin-right: 5px;
}

.no-rating {
    font-size: 12px;
    color: #999;
}

/* ============ موجودی ============ */
.qs-compare-stock {
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
}

.in-stock {
    color: #16a34a;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.out-of-stock {
    color: #dc2626;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ============ اکشن‌ها ============ */
.qs-compare-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}

.qs-compare-cart-btn {
    flex: 1;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-height: 44px;
}

.qs-compare-cart-btn i {
    font-size: 14px;
    flex-shrink: 0;
}

.qs-compare-cart-btn span {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.qs-compare-cart-btn:hover {
    background: var(--color-1);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(240, 108, 96, 0.25);
}

/* ============ دکمه مشاهده جزئیات (آیکون تنها) ============ */
.qs-compare-view-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background: var(--search-bg);
    color: var(--text-color);
    border: 1.5px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.qs-compare-view-btn i {
    font-size: 15px;
}

.qs-compare-view-btn:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

/* ============ ویژگی‌ها ============ */
.qs-compare-attributes {
    border-top: 1px dashed var(--border-color);
    padding-top: 14px;
}

.qs-attr-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qs-attr-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12.5px;
    padding: 8px 12px;
    background: var(--search-bg);
    border-radius: 10px;
}

.attr-label {
    color: #888;
    font-weight: 500;
}

.attr-value {
    color: var(--text-color);
    font-weight: 700;
}

.qs-no-attributes {
    font-size: 12px;
    color: #999;
    text-align: center;
    padding: 10px;
}

/* ============ حالت خالی ============ */
.qs-compare-empty {
    text-align: center;
    padding: 80px 24px;
    background: var(--header-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.qs-empty-icon {
    width: 110px;
    height: 110px;
    background: linear-gradient(135deg, rgba(240, 108, 96, 0.08), rgba(240, 108, 96, 0.02));
    border: 2px dashed rgba(240, 108, 96, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.qs-empty-icon i {
    font-size: 48px;
    color: var(--primary-color);
    opacity: 0.6;
}

.qs-compare-empty h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-color);
    margin: 0 0 12px;
}

.qs-compare-empty p {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    max-width: 500px;
    margin: 0 auto 24px;
}

.qs-compare-shop-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--primary-color);
    color: #fff;
    padding: 14px 28px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 8px 20px rgba(240, 108, 96, 0.3);
}

.qs-compare-shop-btn:hover {
    background: var(--color-1);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(240, 108, 96, 0.4);
}

/* ============ ریسپانسیو ============ */
@media (max-width: 992px) {
    .qs-compare-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .qs-compare-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .qs-compare-header-actions {
        width: 100%;
    }

    .qs-compare-clear-btn,
    .qs-compare-back-btn {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .qs-compare-page-container {
        margin: 30px auto;
        padding: 0 16px;
    }

    .qs-compare-grid {
        grid-template-columns: 1fr !important;
    }

    .qs-compare-header-title>i {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .qs-compare-header-title h1 {
        font-size: 18px;
    }
}



.qs-compare-empty-slot {
    background: transparent;
    border: 2px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.qs-empty-slot-content {
    text-align: center;
    color: #ccc;
}

.qs-empty-slot-content i {
    font-size: 32px;
    margin-bottom: 10px;
    display: block;
}

.qs-empty-slot-content span {
    font-size: 13px;
    font-weight: 600;
}


/* ============================================================
   ============ تب لیست علاقه‌مندی‌ها ============
   ============================================================ */

/* شمارنده محصولات */
.qs-wishlist-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(240, 108, 96, 0.1);
    color: var(--primary-color);
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
}

/* گرید محصولات علاقه‌مندی */
.qs-wishlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 4px;
}

/* کارت علاقه‌مندی */
.qs-wishlist-card {
    position: relative;
    background: var(--header-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.02);
}

.qs-wishlist-card:hover {
    transform: translateY(-4px);
    border-color: rgba(240, 108, 96, 0.35);
    box-shadow: 0 10px 26px rgba(240, 108, 96, 0.08);
}

/* ============ حالت خالی ============ */
.qs-wishlist-empty {
    text-align: center;
    padding: 70px 24px;
}

.qs-empty-icon-wrapper {
    width: 110px;
    height: 110px;
    background: linear-gradient(135deg, rgba(240, 108, 96, 0.08), rgba(240, 108, 96, 0.02));
    border: 2px dashed rgba(240, 108, 96, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    animation: qsHeartBeat 2s ease-in-out infinite;
}

.qs-empty-icon-wrapper i {
    font-size: 46px;
    color: var(--primary-color);
    opacity: 0.7;
}

@keyframes qsHeartBeat {

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

    50% {
        transform: scale(1.06);
    }
}

.qs-wishlist-empty h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-color);
    margin: 0 0 12px;
}

.qs-wishlist-empty p {
    font-size: 13.5px;
    color: #666;
    line-height: 1.8;
    margin: 0 auto 26px;
    max-width: 480px;
}

.qs-wishlist-empty p i {
    font-size: 14px;
}

.qs-wishlist-shop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--primary-color);
    color: #fff;
    padding: 13px 30px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 8px 20px rgba(240, 108, 96, 0.25);
    width: auto;
    border: none;
    font-family: inherit;
}

.qs-wishlist-shop-btn:hover {
    background: var(--color-1);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(240, 108, 96, 0.35);
    color: #fff;
}

/* ============ انیمیشن حذف محصول ============ */
.qs-wishlist-card.removing {
    animation: qsCardRemove 0.35s ease forwards;
}

@keyframes qsCardRemove {
    to {
        opacity: 0;
        transform: scale(0.85) translateY(-10px);
    }
}

/* ============ ریسپانسیو ============ */
@media (max-width: 768px) {
    .qs-wishlist-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .qs-wishlist-empty {
        padding: 50px 16px;
    }

    .qs-empty-icon-wrapper {
        width: 90px;
        height: 90px;
    }

    .qs-empty-icon-wrapper i {
        font-size: 38px;
    }

    .qs-wishlist-empty h3 {
        font-size: 17px;
    }
}

@media (max-width: 480px) {
    .qs-wishlist-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   ============ نوتیفیکیشن سفارشی Qskin (Toast) ============
   ============================================================ */

.qskin-toast-wrapper {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    max-width: 90vw;
    width: 420px;
}

.qskin-toast {
    background: var(--header-bg);
    color: var(--text-color);
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    overflow: hidden;
}

.qskin-toast.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.qskin-toast.hide {
    opacity: 0;
    transform: translateY(-15px) scale(0.95);
}

/* ============ آیکون ============ */
.qskin-toast-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* ============ پیام ============ */
.qskin-toast-message {
    flex: 1;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--text-color);
}

/* ============ دکمه بستن ============ */
.qskin-toast-close {
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 13px;
    padding: 6px;
    border-radius: 8px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.qskin-toast-close:hover {
    background: var(--search-bg);
    color: var(--text-color);
}

/* ============ نوار پیشرفت ============ */
.qskin-toast-progress {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.qskin-toast-progress-bar {
    height: 100%;
    width: 100%;
    transform-origin: right;
    animation: qskinToastProgress 3s linear forwards;
}

@keyframes qskinToastProgress {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

/* ============ انواع نوتیفیکیشن ============ */

/* موفقیت */
.qskin-toast.success .qskin-toast-icon {
    background: rgba(22, 163, 74, 0.1);
    color: #16a34a;
}

.qskin-toast.success .qskin-toast-progress-bar {
    background: #16a34a;
}

/* خطا */
.qskin-toast.error .qskin-toast-icon {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.qskin-toast.error .qskin-toast-progress-bar {
    background: #dc2626;
}

/* هشدار */
.qskin-toast.warning .qskin-toast-icon {
    background: rgba(217, 119, 6, 0.1);
    color: #d97706;
}

.qskin-toast.warning .qskin-toast-progress-bar {
    background: #d97706;
}

/* اطلاعات */
.qskin-toast.info .qskin-toast-icon {
    background: rgba(23, 123, 130, 0.1);
    color: #177b82;
}

.qskin-toast.info .qskin-toast-progress-bar {
    background: #177b82;
}

/* ============ ریسپانسیو ============ */
@media (max-width: 480px) {
    .qskin-toast-wrapper {
        width: calc(100vw - 24px);
        bottom: 16px;
        left: 12px;
        transform: none;
    }

    .qskin-toast {
        padding: 14px 16px;
    }

    .qskin-toast-icon {
        width: 36px;
        height: 36px;
        font-size: 15px;
        border-radius: 10px;
    }

    .qskin-toast-message {
        font-size: 12.5px;
    }
}


/* ============================================================
   ============ مدال تایید سفارشی Qskin ============
   ============================================================ */

.qskin-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 20px;
    box-sizing: border-box;
}

.qskin-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.qskin-modal-box {
    background: var(--header-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 22px;
    padding: 28px 26px 22px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    transform: scale(0.9) translateY(20px);
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    box-sizing: border-box;
    direction: rtl;
    text-align: center;
}

.qskin-modal-overlay.show .qskin-modal-box {
    transform: scale(1) translateY(0);
}

/* ============ آیکون مدال ============ */
.qskin-modal-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 30px;
    position: relative;
}

.qskin-modal-icon::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.15;
    animation: qskinPulseRing 2s ease-in-out infinite;
}

@keyframes qskinPulseRing {

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

    50% {
        transform: scale(1.15);
        opacity: 0.05;
    }
}

.qskin-modal-icon i {
    position: relative;
    z-index: 1;
}

/* ============ انواع مدال ============ */
.qskin-modal-icon.warning {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
}

.qskin-modal-icon.error {
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
}

.qskin-modal-icon.info {
    background: rgba(23, 123, 130, 0.12);
    color: #177b82;
}

.qskin-modal-icon.success {
    background: rgba(22, 163, 74, 0.12);
    color: #16a34a;
}

/* ============ عنوان و متن ============ */
.qskin-modal-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-color);
    margin: 0 0 10px;
}

.qskin-modal-message {
    font-size: 13.5px;
    color: #666;
    line-height: 1.8;
    margin: 0 0 24px;
}

/* ============ دکمه‌ها ============ */
.qskin-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.qskin-modal-btn {
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    min-height: 46px;
}

/* دکمه اصلی (تایید) */
.qskin-modal-btn.primary {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 6px 16px rgba(240, 108, 96, 0.3);
}

.qskin-modal-btn.primary:hover {
    background: var(--color-1);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(240, 108, 96, 0.4);
}

/* دکمه خطرناک (حذف) */
.qskin-modal-btn.danger {
    background: #dc2626;
    color: #fff;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.3);
}

.qskin-modal-btn.danger:hover {
    background: #b91c1c;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(220, 38, 38, 0.4);
}

/* دکمه فرعی (انصراف) */
.qskin-modal-btn.secondary {
    background: var(--search-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

.qskin-modal-btn.secondary:hover {
    background: var(--header-bg);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* ============ ریسپانسیو ============ */
@media (max-width: 480px) {
    .qskin-modal-box {
        padding: 22px 18px 18px;
        border-radius: 18px;
    }

    .qskin-modal-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
        margin-bottom: 14px;
    }

    .qskin-modal-title {
        font-size: 16px;
    }

    .qskin-modal-message {
        font-size: 12.5px;
        margin-bottom: 20px;
    }

    .qskin-modal-btn {
        padding: 10px 16px;
        font-size: 13px;
    }
}










/* ============================================================
   صفحه پیگیری سفارش
   ============================================================ */

.qs-order-tracking-header {
    text-align: center;
    padding: 40px 20px;
    margin-bottom: 30px;
}

.qs-tracking-icon-box {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), #18a3ad);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    box-shadow: 0 10px 30px rgba(23, 123, 130, 0.25);
}

.qs-tracking-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 15px;
    color: var(--text-color, #2c3338);
}

.qs-tracking-subtitle {
    max-width: 700px;
    margin: 0 auto;
    color: #6b7280;
    line-height: 1.8;
    font-size: 14px;
}


.qs-tracking-form-wrapper {
    max-width: 800px;
    margin: 0 auto 40px;
    background: #fff;
    border-radius: 20px;
    padding: 35px 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
}

.qs-tracking-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}

.qs-tracking-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qs-tracking-field label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color, #2c3338);
    display: flex;
    align-items: center;
    gap: 6px;
}

.qs-tracking-field label i {
    color: var(--primary-color, #177b82);
    font-size: 13px;
}

.qs-tracking-field input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    transition: all 0.2s;
    background: #f9fafb;
}

.qs-tracking-field input:focus {
    outline: none;
    border-color: var(--primary-color, #177b82);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(23, 123, 130, 0.1);
}

.qs-tracking-field small {
    font-size: 11.5px;
    color: #9ca3af;
    line-height: 1.5;
}

.qs-tracking-submit-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--primary-color, #177b82), #18a3ad);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(23, 123, 130, 0.25);
}

.qs-tracking-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(23, 123, 130, 0.35);
}

.qs-tracking-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.qs-tracking-message {
    margin-top: 20px;
    padding: 0;
    border-radius: 10px;
    font-size: 14px;
    text-align: center;
    transition: all 0.3s;
}

.qs-tracking-message.error {
    padding: 12px 16px;
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.qs-tracking-message.success {
    padding: 12px 16px;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}


.qs-tracking-result-wrapper {
    max-width: 900px;
    margin: 0 auto 40px;
}

.qs-tracking-result-box {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
}

.qs-result-header {
    background: linear-gradient(135deg, var(--primary-color, #177b82), #18a3ad);
    padding: 25px 30px;
    color: #fff;
}

.qs-result-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.qs-result-order-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.qs-result-label {
    font-size: 12px;
    opacity: 0.85;
}

.qs-result-order-id {
    font-size: 24px;
    font-weight: 700;
}

.qs-result-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 13px;
    font-weight: 700;
}

.qs-result-meta {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    font-size: 13px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.qs-result-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0.95;
}

.qs-result-meta i {
    font-size: 12px;
}


.qs-result-steps,
.qs-result-items {
    padding: 25px 30px;
    border-bottom: 1px solid #f0f0f0;
}

.qs-result-section-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--text-color, #2c3338);
    display: flex;
    align-items: center;
    gap: 8px;
}

.qs-result-section-title i {
    color: var(--primary-color, #177b82);
}

.qs-steps-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 10px 0;
}

.qs-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    min-width: 80px;
    opacity: 0.4;
    transition: all 0.3s;
}

.qs-step-item.done,
.qs-step-item.active {
    opacity: 1;
}

.qs-step-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #9ca3af;
    font-size: 18px;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.qs-step-item.done .qs-step-icon {
    background: #d1fae5;
    color: #059669;
}

.qs-step-item.active .qs-step-icon {
    background: linear-gradient(135deg, var(--primary-color, #177b82), #18a3ad);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 6px rgba(23, 123, 130, 0.15);
    transform: scale(1.05);
}

.qs-step-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-color, #2c3338);
    text-align: center;
}

.qs-step-line {
    flex: 1;
    height: 3px;
    background: #f3f4f6;
    border-radius: 2px;
    margin: 0 -10px;
    margin-bottom: 25px;
    transition: all 0.3s;
}

.qs-step-line.done {
    background: linear-gradient(90deg, #10b981, #059669);
}


.qs-result-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qs-result-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    transition: all 0.2s;
}

.qs-result-item:hover {
    background: #fff;
    border-color: #e5e7eb;
}

.qs-result-item-img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
    border: 1px solid #f0f0f0;
}

.qs-result-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qs-result-item-details {
    flex: 1;
    min-width: 0;
}

.qs-result-item-name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color, #2c3338);
    line-height: 1.5;
    margin-bottom: 5px;
}

.qs-result-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11.5px;
    color: #6b7280;
}

.qs-result-item-qty {
    flex-shrink: 0;
}

.qty-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--primary-color, #177b82);
    color: #fff;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.qs-result-item-price {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color, #177b82);
    min-width: 100px;
    text-align: left;
}


.qs-result-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 25px 30px;
    border-bottom: 1px solid #f0f0f0;
}

.qs-result-info-card {
    padding: 20px;
    background: #f9fafb;
    border-radius: 14px;
    border: 1px solid #f0f0f0;
}

.qs-result-info-card h4 {
    font-size: 13.5px;
    font-weight: 700;
    margin: 0 0 15px;
    color: var(--primary-color, #177b82);
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #e5e7eb;
}

.qs-info-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    line-height: 1.7;
    color: #4b5563;
}

.qs-info-content p {
    margin: 0;
}

.qs-info-content strong {
    color: var(--text-color, #2c3338);
}

/* ==================== دکمه‌ها ==================== */

.qs-result-actions {
    display: flex;
    gap: 12px;
    padding: 25px 30px;
    flex-wrap: wrap;
}

.qs-result-btn {
    flex: 1;
    min-width: 180px;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
}

.qs-result-btn.primary {
    background: linear-gradient(135deg, var(--primary-color, #177b82), #18a3ad);
    color: #fff;
    box-shadow: 0 4px 15px rgba(23, 123, 130, 0.25);
}

.qs-result-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(23, 123, 130, 0.35);
    color: #fff;
}

.qs-result-btn.secondary {
    background: #f3f4f6;
    color: var(--text-color, #2c3338);
    border: 1px solid #e5e7eb;
}

.qs-result-btn.secondary:hover {
    background: #e5e7eb;
    color: var(--text-color, #2c3338);
}

/* ==================== راهنما ==================== */

.qs-tracking-help {
    max-width: 900px;
    margin: 40px auto 0;
}

.qs-tracking-help h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--text-color, #2c3338);
    display: flex;
    align-items: center;
    gap: 8px;
}

.qs-tracking-help h3 i {
    color: var(--primary-color, #177b82);
}

.qs-help-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.qs-help-card {
    background: #fff;
    border-radius: 16px;
    padding: 25px 20px;
    text-align: center;
    border: 1px solid #f0f0f0;
    transition: all 0.3s;
}

.qs-help-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-color: #e5e7eb;
}

.qs-help-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(23, 123, 130, 0.1), rgba(24, 163, 173, 0.1));
    color: var(--primary-color, #177b82);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.qs-help-card h4 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--text-color, #2c3338);
}

.qs-help-card p {
    font-size: 12.5px;
    line-height: 1.7;
    color: #6b7280;
    margin: 0;
}

.qs-help-card p a {
    color: var(--primary-color, #177b82);
    font-weight: 700;
    text-decoration: none;
}

.qs-help-card p a:hover {
    text-decoration: underline;
}

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

@media (max-width: 768px) {
    .qs-tracking-row {
        grid-template-columns: 1fr;
    }

    .qs-result-info-grid {
        grid-template-columns: 1fr;
    }

    .qs-help-grid {
        grid-template-columns: 1fr;
    }

    .qs-steps-wrapper {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .qs-step-line {
        display: none;
    }

    .qs-result-item {
        flex-wrap: wrap;
    }

    .qs-result-item-price {
        width: 100%;
        text-align: right;
        padding-top: 10px;
        border-top: 1px dashed #e5e7eb;
    }

    .qs-result-order-id {
        font-size: 20px;
    }

    .qs-tracking-title {
        font-size: 22px;
    }

    .qs-tracking-form-wrapper {
        padding: 25px 20px;
    }

    .qs-result-header,
    .qs-result-steps,
    .qs-result-items,
    .qs-result-info-grid,
    .qs-result-actions {
        padding: 20px;
    }
}





/* ============================================================
   آرشیو وبلاگ
   ============================================================ */

.pixelhiro-archive-section {
    padding: 30px 0 60px;
}

.archive-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

.qs-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 25px;
    padding: 12px 18px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
}

.qs-breadcrumb a {
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s;
}

.qs-breadcrumb a:hover {
    color: var(--primary-color, #177b82);
}

.qs-breadcrumb i {
    font-size: 10px;
    color: #d1d5db;
}

.qs-breadcrumb span {
    color: var(--text-color, #2c3338);
    font-weight: 700;
}

.archive-header-card {
    text-align: center;
    padding: 40px 25px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #fff5f0 0%, #fef2f2 100%);
    border-radius: 20px;
    border: 1px solid #ffe4e6;
}

.archive-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #f06c60;
    color: #fff;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 15px;
}

.archive-title {
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 15px;
    color: var(--text-color, #2c3338);
}

.archive-description {
    max-width: 600px;
    margin: 0 auto 15px;
    color: #6b7280;
    line-height: 1.8;
    font-size: 14px;
}

.archive-count {
    display: inline-block;
    padding: 6px 16px;
    background: #fff;
    border: 1px solid #ffe4e6;
    border-radius: 30px;
    font-size: 12.5px;
    font-weight: 700;
    color: #f06c60;
}

.archive-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #f0f0f0;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.archive-toolbar-count {
    font-size: 13px;
    color: #6b7280;
}

.archive-toolbar-count strong {
    color: var(--primary-color, #177b82);
    font-weight: 700;
}

.archive-sort {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #6b7280;
}

.archive-sort select {
    padding: 8px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
    color: var(--text-color, #2c3338);
}

.archive-sort select:focus {
    outline: none;
    border-color: var(--primary-color, #177b82);
}

.archive-posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.archive-post-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}

.archive-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border-color: #e5e7eb;
}

.archive-post-image {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f9fafb;
}

.archive-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.archive-post-card:hover .archive-post-image img {
    transform: scale(1.05);
}

.archive-post-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d1d5db;
    font-size: 40px;
}

.archive-post-category {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 5px 12px;
    background: rgba(240, 108, 96, 0.95);
    color: #fff;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

.archive-post-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.archive-post-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    margin: 0 0 12px;
}

.archive-post-title a {
    color: var(--text-color, #2c3338);
    text-decoration: none;
    transition: color 0.2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.archive-post-title a:hover {
    color: var(--primary-color, #177b82);
}

.archive-post-excerpt {
    font-size: 13px;
    line-height: 1.8;
    color: #6b7280;
    margin: 0 0 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.archive-post-meta {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    padding-top: 15px;
    border-top: 1px dashed #f0f0f0;
    font-size: 11.5px;
    color: #9ca3af;
    margin-bottom: 15px;
}

.archive-post-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.archive-post-meta i {
    color: var(--primary-color, #177b82);
    font-size: 11px;
}

.archive-post-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: #ed6b5f;
    color: #fff;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    align-self: flex-start;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(23, 123, 130, 0.2);
}

.archive-post-read-more:hover {
    transform: translateX(-3px);
    box-shadow: 0 6px 18px rgba(23, 123, 130, 0.35);
    color: #fff;
}

.archive-post-read-more i {
    font-size: 11px;
    transition: transform 0.3s;
}

.archive-post-read-more:hover i {
    transform: translateX(-3px);
}

.archive-pagination {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.archive-pagination ul {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.archive-pagination li a,
.archive-pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    background: #fff;
    border: 1.5px solid #f0f0f0;
    color: var(--text-color, #2c3338);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s;
    gap: 6px;
}

.archive-pagination li a:hover {
    background: var(--primary-color, #177b82);
    color: #fff;
    border-color: var(--primary-color, #177b82);
    transform: translateY(-2px);
}

.archive-pagination li .current {
    background: linear-gradient(135deg, var(--primary-color, #177b82), #18a3ad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(23, 123, 130, 0.3);
}

.archive-empty {
    text-align: center;
    padding: 60px 30px;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #f0f0f0;
}

.archive-empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: #f9fafb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #d1d5db;
}

.archive-empty h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--text-color, #2c3338);
}

.archive-empty p {
    color: #6b7280;
    margin: 0 0 20px;
    font-size: 14px;
}

.archive-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--primary-color, #177b82), #18a3ad);
    color: #fff;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(23, 123, 130, 0.25);
}

.archive-empty-btn:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 8px 20px rgba(23, 123, 130, 0.35);
}

@media (max-width: 992px) {
    .archive-posts-grid {
        grid-template-columns: 1fr;
    }

    .archive-header-card {
        padding: 30px 20px;
    }

    .archive-title {
        font-size: 24px;
    }
}

@media (max-width: 600px) {
    .archive-toolbar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .archive-sort {
        justify-content: center;
    }

    .archive-breadcrumb {
        font-size: 11.5px;
        gap: 6px;
    }

    .qs-breadcrumb span {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}




/* ============================================================
   ============ زیرمنوی موبایل ============
   ============================================================ */

.mobile-nav-list .mobile-nav-item {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ============ لینک اصلی ============ */
.mobile-nav-list .mobile-nav-item>a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    font-size: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--search-bg);
    transition: all 0.2s ease;
    position: relative;
}

.mobile-nav-list .mobile-nav-item>a:hover {
    background: var(--primary-color);
    color: #fff;
}

.mobile-nav-list .mobile-nav-item>a:hover i {
    color: #fff !important;
}

/* ============ عنوان ============ */
.mobile-nav-title {
    flex: 1;
    text-align: right;
}

/* ============ دکمه زیرمنو ============ */
.mobile-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-right: 4px;
}

[data-theme="dark"] .mobile-submenu-toggle {
    background: rgba(255, 255, 255, 0.08);
}

.mobile-nav-list .mobile-nav-item>a:hover .mobile-submenu-toggle {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.mobile-submenu-toggle i {
    font-size: 11px;
    transition: transform 0.3s ease;
    color: inherit;
}

/* ============ چرخش فلش وقتی باز شد ============ */
.mobile-nav-item.submenu-open>a>.mobile-submenu-toggle i {
    transform: rotate(180deg);
}

/* ============ زیرمنو ============ */
.mobile-nav-list .mobile-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav-list .mobile-nav-item.submenu-open>.mobile-submenu {
    max-height: 1200px;
    padding-top: 6px;
}

/* ============ آیتم‌های زیرمنو ============ */
.mobile-nav-list .mobile-submenu-item {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav-list .mobile-submenu-item>a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 9px 14px 9px 20px;
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    opacity: 0.85;
}

.mobile-nav-list .mobile-submenu-item>a:hover {
    background: var(--primary-color);
    color: #fff;
    opacity: 1;
}

.mobile-nav-list .mobile-submenu-item>a:hover i {
    color: #fff !important;
}

/* ============ عمق‌های مختلف ============ */
.mobile-nav-list .mobile-submenu.depth-0 {
    padding-right: 8px;
}

.mobile-nav-list .mobile-submenu.depth-1 {
    padding-right: 16px;
}

.mobile-nav-list .mobile-submenu.depth-2 {
    padding-right: 24px;
}




.qs-empty-cart-page {
    max-width: 700px;
    margin: 60px auto;
    padding: 0 20px;
    text-align: center;
    direction: rtl;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qs-empty-cart-icon-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
}

.qs-empty-cart-icon-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(240, 108, 96, 0.12), rgba(24, 163, 173, 0.12));
    animation: qsEmptyPulse 2.5s ease-in-out infinite;
}

.qs-empty-cart-icon-bg::before {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 2px dashed rgba(240, 108, 96, 0.25);
    animation: qsEmptyRotate 20s linear infinite;
}

@keyframes qsEmptyPulse {

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

    50% {
        transform: scale(1.06);
    }
}

@keyframes qsEmptyRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.qs-empty-cart-icon-wrapper>i {
    position: relative;
    z-index: 2;
    font-size: 52px;
    color: var(--primary-color);
    animation: qsEmptyBounce 2s ease-in-out infinite;
}

@keyframes qsEmptyBounce {

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

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

.qs-empty-cart-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-color);
    margin: 0 0 16px;
    line-height: 1.4;
}

.qs-empty-cart-desc {
    font-size: 14.5px;
    color: #777;
    line-height: 1.9;
    margin: 0 auto 32px;
    max-width: 520px;
}

[data-theme="dark"] .qs-empty-cart-desc {
    color: #aaa;
}

.qs-empty-cart-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.qs-empty-cart-shop-btn,
.qs-empty-cart-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 32px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
    border: none;
    min-width: 200px;
}

.qs-empty-cart-shop-btn {
    background: linear-gradient(135deg, var(--primary-color), #e05b4f);
    color: #fff;
    box-shadow: 0 10px 25px rgba(240, 108, 96, 0.28);
}

.qs-empty-cart-shop-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(240, 108, 96, 0.4);
    color: #fff;
}

.qs-empty-cart-shop-btn i {
    font-size: 16px;
}

.qs-empty-cart-home-btn {
    background: var(--search-bg);
    color: var(--text-color);
    border: 1.5px solid var(--border-color);
}

.qs-empty-cart-home-btn:hover {
    background: var(--header-bg);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-3px);
}

.qs-empty-cart-home-btn i {
    font-size: 14px;
}

@media (max-width: 600px) {
    .qs-empty-cart-page {
        margin: 40px auto;
        padding: 0 16px;
    }

    .qs-empty-cart-icon-wrapper {
        width: 110px;
        height: 110px;
        margin-bottom: 24px;
    }

    .qs-empty-cart-icon-wrapper>i {
        font-size: 40px;
    }

    .qs-empty-cart-icon-bg::before {
        inset: -10px;
    }

    .qs-empty-cart-title {
        font-size: 20px;
    }

    .qs-empty-cart-desc {
        font-size: 13px;
        margin-bottom: 24px;
    }

    .qs-empty-cart-actions {
        flex-direction: column;
        gap: 10px;
    }

    .qs-empty-cart-shop-btn,
    .qs-empty-cart-home-btn {
        width: 100%;
        min-width: auto;
        padding: 13px 20px;
    }
}



.woocommerce .wc-empty-cart-message .cart-empty {
    display: none;
}






.qs-brand-search-wrapper {
    position: relative;
    margin-bottom: 12px;
    padding: 0 2px;
}

.qs-brand-search-input {
    width: 100%;
    padding: 10px 36px 10px 36px;
    border: 1.5px solid var(--qs-border);
    border-radius: 10px;
    background: var(--qs-input-bg);
    color: var(--qs-text);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.qs-brand-search-input::placeholder {
    color: var(--qs-text-sub);
    font-size: 12.5px;
}

.qs-brand-search-input:focus {
    border-color: var(--qs-secondary);
    background: var(--qs-card-bg);
    box-shadow: 0 0 0 3px rgba(23, 162, 172, 0.1);
}

.qs-brand-search-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--qs-text-sub);
    font-size: 13px;
    pointer-events: none;
    transition: color 0.25s ease;
}

.qs-brand-search-input:focus+.qs-brand-search-icon {
    color: var(--qs-secondary);
}

.qs-brand-search-clear {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--qs-input-bg);
    border: 1px solid var(--qs-border);
    color: var(--qs-text-sub);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s ease;
    padding: 0;
    font-family: inherit;
}

.qs-brand-search-clear:hover {
    background: var(--qs-primary);
    color: #fff;
    border-color: var(--qs-primary);
    transform: translateY(-50%) scale(1.08);
}

.qs-brand-no-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 15px;
    color: var(--qs-text-sub);
    font-size: 12.5px;
    text-align: center;
    animation: qsBrandFadeIn 0.3s ease;
}

.qs-brand-no-result i {
    font-size: 24px;
    opacity: 0.35;
    color: var(--qs-primary);
}

@keyframes qsBrandFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.qskin-brand-item {
    animation: qsBrandItemFade 0.25s ease;
}

@keyframes qsBrandItemFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#qskin-brand-list {
    max-height: 240px;
    overflow-y: auto;
    padding-left: 4px;
}

#qskin-brand-list::-webkit-scrollbar {
    width: 5px;
}

#qskin-brand-list::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

#qskin-brand-list::-webkit-scrollbar-thumb {
    background: var(--qs-border);
    border-radius: 10px;
}

#qskin-brand-list::-webkit-scrollbar-thumb:hover {
    background: var(--qs-secondary);
}

@media (max-width: 600px) {
    .qs-brand-search-input {
        font-size: 13.5px;
        padding: 11px 36px 11px 36px;
    }
}


.sidebar-column-hight-sk {
    height: stretch;
}




/* ============================================================
   ============ اسلایدر محصولات مرتبط (Owl Carousel) ============
   ============================================================ */

.related-products-section .products-slider-wrapper {
    position: relative;
    width: 100%;
}

.related-products-section .products-track {
    display: block;
}

/* ============ هر آیتم اسلایدر ============ */
.related-products-section .products-track .product-card {
    width: 100%;
    margin: 0;
    user-select: none;
}

/* ============ غیرفعال کردن drag تصویر ============ */
.related-products-section .products-track img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
    user-select: none;
}

/* ============ کارت‌ها در حین drag ============ */
.related-products-section .products-track.owl-dragging .product-card a {
    pointer-events: none;
}

.related-products-section .products-track.owl-grab {
    cursor: grab;
}

.related-products-section .products-track.owl-drag {
    cursor: grabbing;
}

/* ============ دکمه‌های غیرفعال ============ */
.related-products-section .slider-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============ جلوگیری از انتخاب متن ============ */
.related-products-section .products-track .product-title,
.related-products-section .products-track .product-price,
.related-products-section .products-track .product-category {
    user-select: none;
    -webkit-user-select: none;
}

/* ============ حذف margin اضافی Owl ============ */
.related-products-section .owl-stage-outer {
    overflow: visible;
    padding: 6px 4px 15px 4px;
}

.related-products-section .owl-stage {
    display: flex;
    align-items: stretch;
}

.related-products-section .owl-item {
    display: flex;
    align-items: stretch;
}

.related-products-section .owl-item>.product-card {
    width: 100%;
}


.btns-product-mob-opt {
    display: flex;
    flex-direction: row;
}

.btns-product-mob-opt .mob-circular-counter {
    margin-left: 10px;
}
.mob-price-display {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    min-width: 90px;
}

.mob-price-old {
    font-size: 10px;
    color: #999;
    text-decoration: line-through;
    font-weight: 500;
}

.mob-price-current {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-color);
    white-space: nowrap;
    line-height: 1.2;
}

.mob-price-current small {
    font-size: 10px;
    font-weight: 500;
    color: #777;
    margin-right: 2px;
}

[data-theme="dark"] .mob-price-current small {
    color: #aaa;
}

/* تنظیم wrapper برای جا شدن هر سه بخش */
.mob-bar-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
}

/* موبایل خیلی کوچک */
@media (max-width: 380px) {
    .mob-price-display {
        min-width: 75px;
    }

    .mob-price-current {
        font-size: 12px;
    }

    .mob-circular-counter {
        padding: 2px 4px;
    }

    .mob-circular-counter button {
        width: 22px;
        height: 26px;
        font-size: 13px;
    }

    #mob-qty {
        width: 20px;
        font-size: 12px;
    }

    .mob-circular-add-btn {
        padding: 9px 12px;
        font-size: 10px;
    }

    .mob-circular-add-btn span {
        display: none;
        /* فقط آیکون */
    }
}





/* ============================================================
   ============ صفحه تشکر / سفارش دریافت شد ============
   ============================================================ */

/* ============ کانتینر اصلی ============ */
.woocommerce-order {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
    direction: rtl;
    font-family: inherit;
}

/* ============ پیام موفقیت ============ */
.woocommerce-order .woocommerce-notice--success,
.woocommerce-order .woocommerce-thankyou-order-received {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1.5px solid #bbf7d0;
    color: #15803d;
    padding: 20px 24px;
    border-radius: 18px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 8px 25px rgba(22, 163, 74, 0.08);
}

.woocommerce-order .woocommerce-notice--success::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 24px;
    color: #16a34a;
    background: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.15);
}

[data-theme="dark"] .woocommerce-order .woocommerce-notice--success {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.15), rgba(22, 163, 74, 0.08));
    border-color: rgba(22, 163, 74, 0.3);
    color: #4ade80;
}

[data-theme="dark"] .woocommerce-order .woocommerce-notice--success::before {
    background: rgba(22, 163, 74, 0.2);
    color: #4ade80;
}

/* ============ لیست خلاصه سفارش ============ */
.woocommerce-order .woocommerce-order-overview {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    background: #fff;
    border: 1.5px solid #f0f0f0;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .woocommerce-order .woocommerce-order-overview {
    background: #1e1e1e;
    border-color: #333;
}

.woocommerce-order .woocommerce-order-overview li {
    padding: 0 12px;
    border-left: 1px dashed #e5e5e5;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
    color: #777;
}

.woocommerce-order .woocommerce-order-overview li:first-child {
    border-left: none;
}

[data-theme="dark"] .woocommerce-order .woocommerce-order-overview li {
    border-left-color: #333;
    color: #aaa;
}

.woocommerce-order .woocommerce-order-overview li strong {
    font-size: 14px;
    color: var(--text-color);
    font-weight: 700;
    display: block;
}

.woocommerce-order .woocommerce-order-overview li.woocommerce-order-overview__order strong {
    color: var(--primary-color);
    font-size: 16px;
}

/* ============ بخش مشخصات بانکی (کارت به کارت) ============ */
.woocommerce-order .woocommerce-bacs-bank-details {
    background: linear-gradient(135deg, #fff5f0 0%, #fef2f2 100%);
    border: 1.5px dashed rgba(240, 108, 96, 0.35);
    border-radius: 20px;
    padding: 25px 28px;
    margin: 0 0 30px;
    position: relative;
}

[data-theme="dark"] .woocommerce-order .woocommerce-bacs-bank-details {
    background: linear-gradient(135deg, rgba(240, 108, 96, 0.08), rgba(240, 108, 96, 0.03));
    border-color: rgba(240, 108, 96, 0.3);
}

.woocommerce-order .woocommerce-bacs-bank-details h2 {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(240, 108, 96, 0.25);
}

.woocommerce-order .woocommerce-bacs-bank-details h2::before {
    content: "\f09d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    background: var(--primary-color);
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(240, 108, 96, 0.25);
}

.woocommerce-order .woocommerce-bacs-bank-details h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 14px;
}

.woocommerce-order .wc-bacs-bank-details {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.woocommerce-order .wc-bacs-bank-details li {
    font-size: 14px;
    color: #555;
    background: #fff;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    transition: all 0.2s ease;
}

[data-theme="dark"] .woocommerce-order .wc-bacs-bank-details li {
    background: #222;
    border-color: #333;
    color: #ccc;
}

.woocommerce-order .wc-bacs-bank-details li:hover {
    border-color: rgba(240, 108, 96, 0.3);
    box-shadow: 0 4px 14px rgba(240, 108, 96, 0.06);
}

.woocommerce-order .wc-bacs-bank-details li strong {
    color: var(--text-color);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.5px;
}

.woocommerce-order .wc-bacs-bank-details li.bank_name strong {
    color: var(--primary-color);
}

.woocommerce-order .wc-bacs-bank-details li.account_number strong {
    font-family: 'Courier New', monospace;
    direction: ltr;
    font-size: 16px;
    letter-spacing: 1.5px;
    color: #1e40af;
}

[data-theme="dark"] .woocommerce-order .wc-bacs-bank-details li.account_number strong {
    color: #60a5fa;
}

/* ============ جزئیات سفارش ============ */
.woocommerce-order .woocommerce-order-details {
    background: #fff;
    border: 1.5px solid #f0f0f0;
    border-radius: 20px;
    padding: 25px 28px;
    margin: 0 0 30px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .woocommerce-order .woocommerce-order-details {
    background: #1e1e1e;
    border-color: #333;
}

.woocommerce-order .woocommerce-order-details__title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-color);
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #e5e5e5;
}

[data-theme="dark"] .woocommerce-order .woocommerce-order-details__title {
    border-bottom-color: #333;
}

.woocommerce-order .woocommerce-order-details__title::before {
    content: "\f291";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary-color), #e05b4f);
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(240, 108, 96, 0.25);
}

/* ============ جدول سفارش ============ */
.woocommerce-order .woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    border: none;
    background: transparent;
}

.woocommerce-order .woocommerce-table--order-details thead {
    background: transparent;
}

.woocommerce-order .woocommerce-table--order-details thead th {
    padding: 12px 16px;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: #777;
    border-bottom: 2px solid #f0f0f0;
    background: transparent;
}

[data-theme="dark"] .woocommerce-order .woocommerce-table--order-details thead th {
    border-bottom-color: #333;
    color: #aaa;
}

.woocommerce-order .woocommerce-table--order-details tbody tr {
    border-bottom: 1px dashed #f0f0f0;
}

[data-theme="dark"] .woocommerce-order .woocommerce-table--order-details tbody tr {
    border-bottom-color: #333;
}

.woocommerce-order .woocommerce-table--order-details td {
    padding: 16px;
    font-size: 13.5px;
    color: var(--text-color);
    border: none;
}

.woocommerce-order .woocommerce-table--order-details .product-name a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 700;
    transition: color 0.2s;
}

.woocommerce-order .woocommerce-table--order-details .product-name a:hover {
    color: var(--primary-color);
}

.woocommerce-order .woocommerce-table--order-details .product-quantity {
    display: inline-block;
    background: rgba(240, 108, 96, 0.1);
    color: var(--primary-color);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-right: 8px;
}

.woocommerce-order .woocommerce-table--order-details .product-total {
    text-align: left;
    font-weight: 800;
    color: var(--primary-color);
}

/* ============ فوتر جدول ============ */
.woocommerce-order .woocommerce-table--order-details tfoot tr {
    border-top: 1px dashed #f0f0f0;
}

[data-theme="dark"] .woocommerce-order .woocommerce-table--order-details tfoot tr {
    border-top-color: #333;
}

.woocommerce-order .woocommerce-table--order-details tfoot th {
    padding: 12px 16px;
    text-align: right;
    font-size: 13px;
    color: #777;
    font-weight: 600;
    background: transparent;
    border: none;
}

[data-theme="dark"] .woocommerce-order .woocommerce-table--order-details tfoot th {
    color: #aaa;
}

.woocommerce-order .woocommerce-table--order-details tfoot td {
    padding: 12px 16px;
    text-align: left;
    font-weight: 800;
    color: var(--text-color);
    font-size: 14px;
    border: none;
}

.woocommerce-order .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order .woocommerce-table--order-details tfoot tr:last-child td {
    background: linear-gradient(135deg, #fff5f0, #fef2f2);
    border-radius: 12px;
    padding: 16px;
    margin-top: 8px;
}

[data-theme="dark"] .woocommerce-order .woocommerce-table--order-details tfoot tr:last-child th,
[data-theme="dark"] .woocommerce-order .woocommerce-table--order-details tfoot tr:last-child td {
    background: linear-gradient(135deg, rgba(240, 108, 96, 0.08), rgba(240, 108, 96, 0.03));
}

.woocommerce-order .woocommerce-table--order-details tfoot tr:last-child td {
    color: var(--primary-color);
    font-size: 18px;
}

/* ============ دکمه‌های اضافی ============ */
.woocommerce-order .woocommerce-thankyou-order-details+p,
.woocommerce-order>p {
    text-align: center;
    margin: 20px 0;
}

.woocommerce-order .button,
.woocommerce-order .woocommerce-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px !important;
    background: linear-gradient(135deg, var(--primary-color), #e05b4f) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(240, 108, 96, 0.25);
    font-family: inherit;
}

.woocommerce-order .button:hover,
.woocommerce-order .woocommerce-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(240, 108, 96, 0.35);
    color: #fff !important;
}

/* ============ ریسپانسیو ============ */
@media (max-width: 768px) {
    .woocommerce-order {
        margin: 20px auto;
        padding: 0 16px;
    }

    .woocommerce-order .woocommerce-notice--success {
        padding: 16px 18px;
        font-size: 14px;
        flex-direction: column;
        text-align: center;
    }

    .woocommerce-order .woocommerce-order-overview {
        grid-template-columns: repeat(2, 1fr);
        padding: 16px;
        gap: 16px;
    }

    .woocommerce-order .woocommerce-order-overview li {
        border-left: none;
        padding: 0;
        padding-bottom: 12px;
        border-bottom: 1px dashed #f0f0f0;
    }

    [data-theme="dark"] .woocommerce-order .woocommerce-order-overview li {
        border-bottom-color: #333;
    }

    .woocommerce-order .woocommerce-order-overview li:nth-last-child(-n+2) {
        border-bottom: none;
        padding-bottom: 0;
    }

    .woocommerce-order .woocommerce-bacs-bank-details,
    .woocommerce-order .woocommerce-order-details {
        padding: 20px 18px;
    }

    .woocommerce-order .woocommerce-bacs-bank-details h2,
    .woocommerce-order .woocommerce-order-details__title {
        font-size: 15px;
    }

    .woocommerce-order .woocommerce-table--order-details th,
    .woocommerce-order .woocommerce-table--order-details td {
        padding: 10px 8px;
        font-size: 12.5px;
    }
}