:root {
    --gold: #9b1c2e;
    /* زرشکی شیک */
    --gold-dark: #6e1320;
    /* زرشکی تیره */
    --bg: #f8f6f4;
    /* سفید ملایم گرم */
    --card: #ffffffcc;
    /* کارت سفید نیمه‌شفاف */
    --border: #9b1c2e1a;
    /* حاشیه زرشکی خیلی ملایم */
    --text: #2a2024;
    /* متن تیره زرشکی‌مایل */
    --muted: #6b5d63;
    /* متن ثانویه */
    color-scheme: light;

    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    background: var(--bg);
    color: var(--text);
    min-height: 100svh;
    overflow-x: hidden;
    line-height: 1.7
}

.backdrop {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none
}

body:after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, #f8f6f4aa 100%);
    pointer-events: none;
    z-index: -1
}

.container {
    width: min(1240px, 100% - 40px);
    margin: 0 auto
}

/* ═══ HEADER ═══ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: #05040590;
    border-bottom: 1px solid #ffffff10
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    gap: 20px
}

.logo {
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -.5px;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px
}

.logo span {
    color: var(--gold)
}

.desktop-nav ul {
    display: flex;
    list-style: none;
    gap: 8px
}

.desktop-nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 550;
    padding: 8px 14px;
    border-radius: 10px;
    transition: .2s
}

.desktop-nav a:hover,
.desktop-nav a.active {
    color: var(--gold);
    background: #ffe52b10
}

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

.user-btn,
.cart-btn,
.mobile-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 9px 15px;
    border-radius: 12px;
    font: inherit;
    font-size: .9rem;
    font-weight: 550;
    text-decoration: none;
    cursor: pointer;
    transition: .2s
}

.user-btn:hover,
.cart-btn:hover {
    border-color: #ffe52b60;
    background: #ffe52b08;
    color: var(--gold)
}

.user-btn svg,
.cart-btn svg,
.mobile-toggle svg {
    width: 18px;
    height: 18px
}

.cart-btn {
    position: relative;
    padding: 9px 12px
}

.cart-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    background: var(--gold);
    color: #1a1408;
    font-size: .7rem;
    font-weight: 900;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: grid;
    place-items: center
}

.mobile-toggle {
    display: none;
    padding: 9px 10px
}

/* ═══ HERO ═══ */
.hero {
    padding: 70px 0 60px
}

.hero-inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center
}

.hero-badge {
    display: inline-block;
    background: #ffe52b15;
    border: 1px solid #ffe52b40;
    color: var(--gold);
    font-size: .83rem;
    font-weight: 650;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 20px
}

.hero-title {
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -1px;
    margin-bottom: 18px
}

.hero-title span {
    color: var(--gold)
}

.hero-desc {
    color: var(--muted);
    font-size: 1.05rem;
    margin-bottom: 28px;
    line-height: 1.9;
    max-width: 520px
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 38px
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, #fff04b, #ffdf08);
    color: #2c260d;
    border: 1px solid #fff18b;
    padding: 13px 28px;
    border-radius: 13px;
    font: inherit;
    font-size: .98rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 26px #ffdc0030, inset 0 1px 2px #fff9;
    transition: .2s
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 34px #ffdc0045;
    filter: brightness(1.05)
}

.btn-primary svg {
    width: 18px;
    height: 18px
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 13px 28px;
    border-radius: 13px;
    font: inherit;
    font-size: .98rem;
    font-weight: 600;
    text-decoration: none;
    transition: .2s
}

.btn-ghost:hover {
    border-color: #ffe52b60;
    color: var(--gold)
}

.hero-stats {
    display: flex;
    gap: 36px;
    flex-wrap: wrap
}

.hero-stats div {
    display: flex;
    flex-direction: column
}

.hero-stats strong {
    color: var(--gold);
    font-size: 1.5rem;
    font-weight: 900
}

.hero-stats span {
    color: var(--muted);
    font-size: .85rem
}

.hero-visual {
    position: relative
}

.hero-card {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid #ffffff20;
    box-shadow: 0 40px 90px #cfcdcd80
}

.hero-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 6/7;
    object-fit: cover
}

.hero-card-glow {
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at 50% 50%, #ffdf3840, transparent 60%);
    z-index: -1;
    filter: blur(40px)
}

/* ═══ FEATURES ═══ */
.features {
    padding: 20px 0 60px
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px
}

.feature-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 26px 20px;
    text-align: center;
    transition: .25s
}

.feature-item:hover {
    border-color: #ffe52b40;
    background: #ffe52b05;
    transform: translateY(-3px)
}

.feature-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #ffe52b20, #ffb70010);
    border: 1px solid #ffe52b40;
    border-radius: 16px;
    color: var(--gold)
}

.feature-icon svg {
    width: 26px;
    height: 26px
}

.feature-item h3 {
    font-size: 1rem;
    margin-bottom: 4px;
    font-weight: 750
}

.feature-item p {
    color: var(--muted);
    font-size: .85rem
}

/* ═══ PRODUCTS ═══ */
.products {
    padding: 80px 0 60px
}

.section-head {
    text-align: center;
    margin-bottom: 44px
}

.section-label {
    display: inline-block;
    color: var(--gold);
    font-size: .85rem;
    font-weight: 650;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px
}

.section-head h2 {
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -1px;
    margin-bottom: 12px
}

.section-head h2 span {
    color: var(--gold)
}

.section-head p {
    color: var(--muted);
    font-size: .98rem
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px
}

.products-empty {
    grid-column: 1/-1;
    text-align: center;
    padding: 60px 20px;
    background: var(--card);
    border: 1px dashed var(--border);
    border-radius: 20px;
    color: var(--muted)
}

.products-more {
    text-align: center;
    margin-top: 44px
}

/* ═══ ABOUT ═══ */
.about {
    padding: 70px 0;
    background: linear-gradient(180deg, transparent, #ffe52b05);
    border-top: 1px solid #ffffff10;
    border-bottom: 1px solid #ffffff10
}

.about-inner {
    text-align: center;
    max-width: 720px;
    margin: 0 auto
}

.about h2 {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 900;
    margin-bottom: 18px;
    letter-spacing: -1px
}

.about h2 span {
    color: var(--gold)
}

.about p {
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 2
}

/* ═══ NEWSLETTER ═══ */
.newsletter {
    padding: 80px 0
}

.newsletter-box {
    max-width: 520px;
    margin: 0 auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 26px;
    padding: 44px 36px;
    text-align: center;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden
}

.newsletter-box:before {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at 50% 0%, #ffdf3830, transparent 60%);
    pointer-events: none
}

.newsletter-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #fff04b, #ffdf08);
    border-radius: 50%;
    color: #2c260d;
    position: relative
}

.newsletter-icon svg {
    width: 28px;
    height: 28px
}

.newsletter-box h2 {
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 8px;
    position: relative
}

.newsletter-box p {
    color: var(--muted);
    font-size: .95rem;
    margin-bottom: 26px;
    position: relative
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative
}

.newsletter-form input {
    font: inherit;
    font-size: .95rem;
    padding: 14px 18px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: #ffffff06;
    color: var(--text);
    text-align: center;
    transition: .2s
}

.newsletter-form input:focus {
    outline: none;
    border-color: #ffe52b80;
    background: #ffffff09;
    box-shadow: 0 0 0 3px #ffe52b10
}

.newsletter-form button {
    justify-content: center
}

.newsletter-msg {
    color: #86efac;
    font-size: .9rem;
    margin-top: 14px;
    opacity: 0;
    transition: .3s;
    position: relative
}

.newsletter-msg.show {
    opacity: 1
}

/* ═══ FOOTER ═══ */
.site-footer {
    background: #00000060;
    border-top: 1px solid #ffffff10;
    padding: 60px 0 0
}

.footer-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 50px
}

.footer-col h4 {
    color: var(--gold);
    font-size: 1rem;
    font-weight: 750;
    margin-bottom: 18px
}

.footer-col p {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.9;
    margin-top: 14px
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.footer-col ul a {
    color: var(--muted);
    text-decoration: none;
    font-size: .9rem;
    transition: .2s
}

.footer-col ul a:hover {
    color: var(--gold)
}

.contact-list li {
    color: var(--muted);
    font-size: .9rem
}

.footer-bottom {
    border-top: 1px solid #ffffff10;
    padding: 22px 0;
    text-align: center
}

.footer-bottom p {
    color: var(--muted);
    font-size: .85rem
}

.footer-bottom span {
    color: var(--gold)
}

/* ═══ RESPONSIVE ═══ */
@media(max-width:991px) {
    .desktop-nav {
        display: none
    }

    .mobile-toggle {
        display: flex
    }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .hero-visual {
        order: -1
    }

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

    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 30px
    }
}

@media(max-width:600px) {
    .container {
        width: calc(100% - 28px)
    }

    .hero {
        padding: 40px 0
    }

    .hero-title {
        font-size: 1.6rem
    }

    .hero-desc {
        font-size: .95rem
    }

    .btn-primary,
    .btn-ghost {
        padding: 11px 20px;
        font-size: .9rem
    }

    .hero-stats {
        gap: 22px
    }

    .hero-stats strong {
        font-size: 1.2rem
    }

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

    .feature-item {
        padding: 20px 14px
    }

    .feature-icon {
        width: 46px;
        height: 46px
    }

    .feature-icon svg {
        width: 22px;
        height: 22px
    }

    .feature-item h3 {
        font-size: .9rem
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 26px;
        padding-bottom: 30px
    }

    .newsletter-box {
        padding: 32px 22px
    }

    .newsletter-box h2 {
        font-size: 1.25rem
    }
}


/* ═══════════════════════════════════════
   PAGE HERO (برای درباره ما و تماس)
   ═══════════════════════════════════════ */
.page-hero {
    padding: 80px 0 50px;
    text-align: center;
}

.page-title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: -1px;
    margin: 12px 0 14px;
}

.page-title span {
    color: var(--gold)
}

.page-desc {
    color: var(--muted);
    font-size: 1.05rem
}

.page-content {
    padding: 40px 0 70px
}

/* About Page */
.content-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 50px;
    align-items: center;
}

.content-text h2 {
    font-size: 1.6rem;
    font-weight: 900;
    margin-bottom: 18px;
    color: var(--text);
}

.content-text p {
    color: var(--muted);
    font-size: 1rem;
    line-height: 2;
    margin-bottom: 16px;
}

.content-image {
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #ffffff20;
    box-shadow: 0 30px 70px #00000060
}

.content-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5/6;
    object-fit: cover
}

/* Values */
.values {
    padding: 60px 0 70px
}

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

.value-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px 22px;
    transition: .25s;
    text-align: center;
}

.value-card:hover {
    border-color: #ffe52b40;
    background: #ffe52b05;
    transform: translateY(-3px)
}

.value-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #ffe52b20, #ffb70010);
    border: 1px solid #ffe52b40;
    border-radius: 16px;
    color: var(--gold);
}

.value-icon svg {
    width: 26px;
    height: 26px
}

.value-card h3 {
    font-size: 1rem;
    font-weight: 750;
    margin-bottom: 8px
}

.value-card p {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.9
}

/* Stats Band */
.stats-band {
    padding: 50px 0;
    background: linear-gradient(180deg, transparent, #ffe52b05);
    border-top: 1px solid #ffffff10;
    border-bottom: 1px solid #ffffff10;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.stats-grid div {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.stats-grid strong {
    color: var(--gold);
    font-size: 2rem;
    font-weight: 900
}

.stats-grid span {
    color: var(--muted);
    font-size: .9rem
}

/* CTA */
.cta-section {
    padding: 70px 0
}

.cta-box {
    text-align: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 26px;
    padding: 50px 30px;
    position: relative;
    overflow: hidden;
}

.cta-box:before {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at 50% 50%, #ffdf3820, transparent 60%);
    pointer-events: none;
}

.cta-box h2 {
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 12px;
    position: relative
}

.cta-box p {
    color: var(--muted);
    margin-bottom: 26px;
    position: relative
}

.cta-box a {
    position: relative
}

/* ═══════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════ */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
    align-items: start;
}

.contact-info h2,
.contact-form-wrap h2 {
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 22px;
}

.contact-form-wrap p {
    color: var(--muted);
    margin-bottom: 22px;
    font-size: .95rem;
}

.contact-items {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 32px;
}

.contact-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
}

.contact-item-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #ffe52b20, #ffb70010);
    border: 1px solid #ffe52b40;
    border-radius: 12px;
    color: var(--gold);
}

.contact-item-icon svg {
    width: 22px;
    height: 22px
}

.contact-item h4 {
    color: var(--gold);
    font-size: .9rem;
    font-weight: 750;
    margin-bottom: 6px;
}

.contact-item p {
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.8
}

.social-links h4 {
    font-size: .95rem;
    font-weight: 750;
    margin-bottom: 14px;
    color: var(--text);
}

.socials-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.socials-row a {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: #ffffff06;
    border: 1px solid var(--border);
    border-radius: 13px;
    color: var(--gold);
    text-decoration: none;
    transition: .25s;
    position: relative;
    overflow: hidden;
}

.socials-row a:before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, #ffe52b20, transparent 70%);
    opacity: 0;
    transition: .3s;
}

.socials-row a:hover {
    border-color: #ffe52b70;
    background: #ffe52b10;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px #ffe52b25;
}

.socials-row a:hover:before {
    opacity: 1;
}

.socials-row svg {
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 1;
    transition: .3s;
}

.socials-row a:hover svg {
    transform: scale(1.08);
    filter: drop-shadow(0 0 6px #ffe52b80);
}

/* Contact Form */
.contact-form {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 30px;
}

.contact-form .field {
    margin-bottom: 16px
}

.contact-form label {
    display: block;
    color: #c9c5ce;
    font-size: .85rem;
    font-weight: 550;
    margin-bottom: 6px;
}

.contact-form .input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #ffffff22;
    border-radius: 12px;
    background: #ffffff06;
    transition: .2s;
}

.contact-form .input-wrap:focus-within {
    border-color: #ffe52b80;
    background: #ffffff09;
    box-shadow: 0 0 0 3px #ffe52b10;
}

.contact-form input,
.contact-form textarea {
    font: inherit;
    font-size: .95rem;
    color: var(--text);
    background: none;
    border: 0;
    outline: none;
    width: 100%;
    padding: 12px 16px;
    resize: vertical;
}

.contact-form textarea {
    min-height: 120px;
    line-height: 1.8
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #76717d;
}

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

.contact-msg {
    color: #86efac;
    font-size: .9rem;
    margin-top: 14px;
    text-align: center;
    opacity: 0;
    transition: .3s;
}

.contact-msg.show {
    opacity: 1
}

/* Map */
/* ═══ MAP ═══ */
.map-section {
    padding: 0 0 80px
}

.map-box {
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--card);
    position: relative;
    min-height: 380px;
    display: grid;
    place-items: center;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.map-box:before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(45deg, transparent 48%, #ffe52b08 48%, #ffe52b08 52%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, #ffe52b08 48%, #ffe52b08 52%, transparent 52%),
        radial-gradient(circle at 50% 50%, #ffe52b15, transparent 70%);
    background-size: 60px 60px, 60px 60px, 100% 100%;
    opacity: .5;
    pointer-events: none;
}

.map-placeholder {
    text-align: center;
    color: var(--muted);
    padding: 60px 20px;
    position: relative;
    z-index: 1;
    max-width: 400px;
}

.map-placeholder>svg {
    width: 64px;
    height: 64px;
    color: var(--gold);
    margin-bottom: 20px;
    filter: drop-shadow(0 0 20px #ffe52b40);
    animation: pulse-loc 2s ease-in-out infinite;
}

@keyframes pulse-loc {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 20px #ffe52b40)
    }

    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 30px #ffe52b70)
    }
}

.map-placeholder p {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
}

.map-placeholder span {
    font-size: .92rem;
    color: var(--muted);
    display: block;
    margin-bottom: 24px;
}

.map-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #fff04b, #ffdf08);
    color: #2c260d;
    border: 1px solid #fff18b;
    padding: 11px 24px;
    border-radius: 12px;
    font: inherit;
    font-size: .92rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 6px 24px #ffdc0030, inset 0 1px 2px #fff9;
    transition: .2s;
}

.map-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px #ffdc0045;
}

.map-link svg {
    width: 16px;
    height: 16px;
}

/* Responsive */
@media(max-width:991px) {
    .content-grid {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .content-image {
        order: -1
    }

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

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

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 36px
    }
}

@media(max-width:600px) {
    .page-hero {
        padding: 50px 0 30px
    }

    .page-content {
        padding: 20px 0 50px
    }

    .values-grid {
        grid-template-columns: 1fr
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr
    }

    .stats-grid strong {
        font-size: 1.5rem
    }

    .form-row {
        grid-template-columns: 1fr
    }

    .contact-form {
        padding: 22px
    }

    .cta-box {
        padding: 36px 20px
    }
}

/* ═══════════════════════════════════════
   TERMS PAGE
   ═══════════════════════════════════════ */
.terms-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 50px;
    align-items: start;
}

/* سایدبار */
.terms-sidebar {
    position: sticky;
    top: 100px;
}

.terms-nav {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 26px 22px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.terms-nav h3 {
    color: var(--gold);
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

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

.terms-nav a {
    display: block;
    color: var(--muted);
    text-decoration: none;
    font-size: .9rem;
    padding: 9px 12px;
    border-radius: 10px;
    transition: .2s;
    position: relative;
    padding-right: 22px;
}

.terms-nav a:before {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffe52b30;
    transition: .2s;
}

.terms-nav a:hover,
.terms-nav a.active {
    color: var(--gold);
    background: #ffe52b08;
}

.terms-nav a.active:before,
.terms-nav a:hover:before {
    background: var(--gold);
    box-shadow: 0 0 10px #ffe52b80;
}

/* محتوا */
.terms-content {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.terms-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px 34px;
    transition: .3s;
    scroll-margin-top: 100px;
}

.terms-section:hover {
    border-color: #ffe52b40;
}

.terms-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.terms-num {
    font-size: 2.2rem;
    font-weight: 900;
    color: #ffe52b20;
    line-height: 1;
    letter-spacing: -2px;
    font-family: monospace;
}

.terms-header h2 {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -.5px;
}

.terms-section p {
    color: var(--muted);
    font-size: .98rem;
    line-height: 2;
    margin-bottom: 16px;
}

.terms-section ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 0;
}

.terms-section ul li {
    color: var(--muted);
    font-size: .93rem;
    line-height: 1.9;
    padding-right: 26px;
    position: relative;
}

.terms-section ul li:before {
    content: '';
    position: absolute;
    right: 8px;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 8px #ffe52b60;
}

.terms-section ul li strong {
    color: var(--text);
    font-weight: 700;
}

/* آخرین بروزرسانی */
.terms-update {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: .88rem;
    padding: 12px 20px;
    background: #ffffff05;
    border: 1px solid var(--border);
    border-radius: 12px;
    align-self: flex-start;
}

.terms-update svg {
    width: 18px;
    height: 18px;
    color: var(--gold);
}

/* باکس تماس */
.terms-contact {
    background: linear-gradient(135deg, #ffe52b10, #ffb70005);
    border: 1px solid #ffe52b30;
    border-radius: 20px;
    padding: 32px;
    text-align: center;
}

.terms-contact h3 {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 10px;
}

.terms-contact p {
    color: var(--muted);
    font-size: .95rem;
    margin-bottom: 22px;
}

/* ریسپانسیو */
@media(max-width:991px) {
    .terms-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .terms-sidebar {
        position: static;
    }

    .terms-nav ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .terms-nav ul li {
        flex: 1 1 calc(50% - 4px);
    }

    .terms-nav a {
        padding: 10px 12px;
        padding-right: 12px;
        text-align: center;
        background: #ffffff05;
    }

    .terms-nav a:before {
        display: none;
    }
}

@media(max-width:600px) {
    .terms-section {
        padding: 24px 22px;
        border-radius: 16px;
    }

    .terms-header {
        gap: 10px;
    }

    .terms-num {
        font-size: 1.6rem;
    }

    .terms-header h2 {
        font-size: 1.1rem;
    }

    .terms-section p {
        font-size: .92rem;
    }

    .terms-section ul li {
        font-size: .88rem;
    }

    .terms-nav ul li {
        flex: 1 1 100%;
    }

    .terms-contact {
        padding: 24px 20px;
    }
}

/* ═══════════════════════════════════════
   FAQ PAGE
   ═══════════════════════════════════════ */

/* جستجو */
.faq-search-wrap {
    margin-bottom: 28px;
}

.faq-search {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0 18px;
    transition: .2s;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.faq-search:focus-within {
    border-color: #ffe52b80;
    box-shadow: 0 0 0 3px #ffe52b10;
}

.faq-search-icon {
    width: 20px;
    height: 20px;
    color: var(--muted);
    flex-shrink: 0;
}

.faq-search input {
    font: inherit;
    font-size: .95rem;
    color: var(--text);
    background: none;
    border: 0;
    outline: none;
    width: 100%;
    padding: 15px 14px;
}

.faq-search input::placeholder {
    color: #76717d;
}

.faq-search-clear {
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    padding: 6px;
    display: none;
    transition: .2s;
}

.faq-search-clear svg {
    width: 16px;
    height: 16px;
}

.faq-search-clear:hover {
    color: var(--gold);
}

.faq-search.has-value .faq-search-clear {
    display: block;
}

/* دسته‌بندی‌ها */
.faq-categories {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 36px;
}

.faq-cat {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--muted);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    padding: 9px 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: .2s;
}

.faq-cat:hover {
    border-color: #ffe52b40;
    color: var(--text);
}

.faq-cat.active {
    background: linear-gradient(180deg, #fff04b, #ffdf08);
    color: #2c260d;
    border-color: #fff18b;
    box-shadow: 0 6px 20px #ffdc0030;
}

/* لیست سوالات */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: .25s;
}

.faq-item:hover {
    border-color: #ffe52b40;
}

.faq-item.open {
    border-color: #ffe52b60;
    background: #ffe52b04;
}

.faq-question {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: none;
    border: 0;
    color: var(--text);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-align: right;
    padding: 20px 22px;
    cursor: pointer;
    transition: .2s;
}

.faq-q-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #ffe52b20, #ffb70010);
    border: 1px solid #ffe52b40;
    border-radius: 9px;
    color: var(--gold);
    font-size: 1rem;
    font-weight: 900;
    font-family: serif;
}

.faq-q-text {
    flex: 1;
    line-height: 1.6;
}

.faq-arrow {
    width: 18px;
    height: 18px;
    color: var(--muted);
    flex-shrink: 0;
    transition: transform .3s;
}

.faq-item.open .faq-arrow {
    transform: rotate(180deg);
    color: var(--gold);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s cubic-bezier(.4, 0, .2, 1);
}

.faq-item.open .faq-answer {
    max-height: 800px;
}

.faq-answer-inner {
    padding: 0 22px 22px 22px;
    padding-right: 66px;
    color: var(--muted);
    font-size: .93rem;
    line-height: 2;
}

.faq-answer-inner p {
    margin-bottom: 10px;
}

.faq-answer-inner p:last-child {
    margin-bottom: 0;
}

.faq-answer-inner ol,
.faq-answer-inner ul {
    padding-right: 20px;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.faq-answer-inner li {
    color: var(--muted);
}

.faq-answer-inner strong {
    color: var(--text);
    font-weight: 700;
}

.faq-answer-inner a {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px dashed #ffe52b60;
    transition: .2s;
}

.faq-answer-inner a:hover {
    border-bottom-style: solid;
}

/* نتیجه خالی */
.faq-empty {
    display: none;
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
}

.faq-empty.show {
    display: block;
}

.faq-empty svg {
    width: 48px;
    height: 48px;
    color: #ffe52b40;
    margin-bottom: 16px;
}

.faq-empty p {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}

.faq-empty span {
    font-size: .9rem;
}

/* باکس تماس */
.faq-contact {
    max-width: 640px;
    margin: 60px auto 0;
    background: linear-gradient(135deg, #ffe52b10, #ffb70005);
    border: 1px solid #ffe52b30;
    border-radius: 24px;
    padding: 40px 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.faq-contact:before {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at 50% 50%, #ffdf3820, transparent 60%);
    pointer-events: none;
}

.faq-contact-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #fff04b, #ffdf08);
    border-radius: 50%;
    color: #2c260d;
    position: relative;
}

.faq-contact-icon svg {
    width: 28px;
    height: 28px;
}

.faq-contact h3 {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 10px;
    position: relative;
}

.faq-contact p {
    color: var(--muted);
    font-size: .95rem;
    margin-bottom: 24px;
    position: relative;
}

.faq-contact a {
    position: relative;
}

/* ریسپانسیو */
@media(max-width:600px) {
    .faq-search {
        padding: 0 14px;
    }

    .faq-search input {
        padding: 13px 10px;
        font-size: .9rem;
    }

    .faq-categories {
        gap: 8px;
    }

    .faq-cat {
        font-size: .82rem;
        padding: 8px 14px;
    }

    .faq-question {
        padding: 16px 16px;
        font-size: .92rem;
        gap: 10px;
    }

    .faq-q-icon {
        width: 26px;
        height: 26px;
        font-size: .88rem;
    }

    .faq-arrow {
        width: 16px;
        height: 16px;
    }

    .faq-answer-inner {
        padding: 0 16px 18px 16px;
        padding-right: 52px;
        font-size: .88rem;
    }

    .faq-contact {
        padding: 30px 22px;
        border-radius: 20px;
    }

    .faq-contact h3 {
        font-size: 1.15rem;
    }
}

/* ═══════════════════════════════════════
   PRODUCTS & CATEGORIES
   ═══════════════════════════════════════ */

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: .88rem;
    margin-bottom: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.breadcrumb a {
    color: var(--muted);
    text-decoration: none;
    transition: .2s;
}

.breadcrumb a:hover {
    color: var(--gold)
}

.breadcrumb strong {
    color: var(--gold);
    font-weight: 700
}

.breadcrumb span {
    opacity: .5
}

/* ═══ PRODUCT CARD ═══ */
.product-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: .3s cubic-bezier(.5, 0, .2, 1);
}

.product-card:hover {
    border-color: #ffe52b50;
    transform: translateY(-4px);
    box-shadow: 0 20px 45px #00000060;
}

.product-img-link {
    text-decoration: none
}

.product-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1/1;
    background: #0a0a0c;
}

.product-img-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

.product-card:hover .product-img-wrap img {
    transform: scale(1.06);
}

.product-no-img {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ffffff05, #ffffff02);
    color: #ffe52b30;
}

.product-no-img svg {
    width: 48px;
    height: 48px
}

.product-no-img.large {
    aspect-ratio: 1/1;
    border-radius: 20px
}

.product-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #fff04b, #ffdf08);
    color: #2c260d;
    font-size: .72rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 20px;
    z-index: 2;
}

.product-tag.discount {
    background: linear-gradient(135deg, #ff3b3b, #dc2626);
    color: #fff;
}

.product-tag.big {
    font-size: .85rem;
    padding: 7px 16px
}

.product-out-stock {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: #050405cc;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    backdrop-filter: blur(4px);
    z-index: 3;
}

.product-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.product-title-link {
    text-decoration: none
}

.product-title {
    font-size: .95rem;
    font-weight: 750;
    color: var(--text);
    line-height: 1.5;
    transition: .2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card:hover .product-title {
    color: var(--gold)
}

.product-short {
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.product-price {
    color: var(--gold);
    font-size: 1.05rem;
    font-weight: 900;
}

.product-price span {
    font-size: .78rem;
    font-weight: 500;
    color: var(--muted);
}

.product-old-price {
    color: #76717d;
    font-size: .82rem;
}

.product-btn {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 11px;
    border-radius: 11px;
    font: inherit;
    font-size: .85rem;
    font-weight: 650;
    cursor: pointer;
    transition: .2s;
    text-decoration: none;
}

.product-btn:hover {
    background: linear-gradient(180deg, #fff04b, #ffdf08);
    color: #2c260d;
    border-color: #fff18b;
}

.product-btn svg {
    width: 16px;
    height: 16px
}

.product-btn.disabled {
    opacity: .5;
    cursor: not-allowed;
    background: transparent;
}

.product-btn.disabled:hover {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}

/* ═══ CATEGORIES GRID ═══ */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
}

.category-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: .3s;
}

.category-card:hover {
    border-color: #ffe52b60;
    transform: translateY(-5px);
    box-shadow: 0 25px 50px #00000060;
}

.category-img-wrap {
    position: relative;
    aspect-ratio: 16/11;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff05, #ffffff02);
}

.category-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s;
}

.category-card:hover .category-img-wrap img {
    transform: scale(1.08);
}

.category-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #ffe52b30;
}

.category-placeholder svg {
    width: 56px;
    height: 56px
}

.category-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, #050405cc 100%);
    pointer-events: none;
}

.category-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.category-body h3 {
    color: var(--text);
    font-size: 1.15rem;
    font-weight: 800;
    transition: .2s;
}

.category-card:hover .category-body h3 {
    color: var(--gold)
}

.category-body p {
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.7;
}

.category-count {
    display: inline-block;
    color: var(--gold);
    font-size: .82rem;
    font-weight: 650;
    background: #ffe52b10;
    padding: 4px 12px;
    border-radius: 20px;
    align-self: flex-start;
}

/* Category Pills (صفحه اصلی) */
.categories-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.category-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 24px;
    text-decoration: none;
    transition: .25s;
    min-width: 130px;
}

.category-pill:hover {
    border-color: #ffe52b60;
    background: #ffe52b08;
    transform: translateY(-3px);
}

.category-pill span {
    color: var(--text);
    font-weight: 750;
    font-size: .95rem;
}

.category-pill small {
    color: var(--gold);
    font-size: .72rem;
    font-weight: 600;
}

.category-pill:hover span {
    color: var(--gold)
}

/* ═══ PRODUCTS LAYOUT (سایدبار + گرید) ═══ */
.products-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 36px;
    align-items: start;
}

.products-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.filter-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.filter-box h3 {
    color: var(--gold);
    font-size: .95rem;
    font-weight: 800;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.filter-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-list a {
    display: block;
    color: var(--muted);
    text-decoration: none;
    font-size: .88rem;
    padding: 9px 12px;
    border-radius: 9px;
    transition: .2s;
}

.filter-list a:hover {
    color: var(--gold);
    background: #ffe52b08;
}

.filter-list a.active {
    color: var(--gold);
    background: #ffe52b10;
    font-weight: 700;
}

.filter-list .count {
    opacity: .6;
    font-size: .82rem;
}

.products-main {
    min-width: 0;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

/* ═══ EMPTY STATE ═══ */
.empty-state {
    text-align: center;
    padding: 80px 20px;
    background: var(--card);
    border: 1px dashed var(--border);
    border-radius: 20px;
    color: var(--muted);
}

.empty-state svg {
    width: 64px;
    height: 64px;
    color: #ffe52b40;
    margin-bottom: 20px;
}

.empty-state h3 {
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 8px;
}

/* ═══ PAGINATION ═══ */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.page-link {
    min-width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 11px;
    color: var(--text);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    transition: .2s;
}

.page-link:hover {
    border-color: #ffe52b60;
    color: var(--gold);
    background: #ffe52b08;
}

.page-link.active {
    background: linear-gradient(180deg, #fff04b, #ffdf08);
    color: #2c260d;
    border-color: #fff18b;
    font-weight: 800;
}

/* ═══ PRODUCT DETAIL ═══ */
.product-detail-section {
    padding: 40px 0 80px
}

.product-detail-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 50px;
    margin-bottom: 60px;
    align-items: start;
}

/* گالری */
.product-gallery {
    position: sticky;
    top: 100px;
}

.gallery-main {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #0a0a0c;
    aspect-ratio: 1/1;
}

.gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.gallery-thumb {
    width: 74px;
    height: 74px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: .2s;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-thumb:hover {
    border-color: #ffe52b60
}

.gallery-thumb.active {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px #ffe52b30;
}

/* اطلاعات */
.product-info {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.product-category-link {
    display: inline-block;
    color: var(--gold);
    font-size: .82rem;
    font-weight: 650;
    background: #ffe52b10;
    padding: 5px 14px;
    border-radius: 20px;
    align-self: flex-start;
    text-decoration: none;
    transition: .2s;
}

.product-category-link:hover {
    background: #ffe52b20
}

.product-detail-title {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: -.5px;
}

.product-detail-short {
    color: var(--muted);
    font-size: .98rem;
    line-height: 1.9;
}

.product-detail-price {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 20px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.price-current {
    color: var(--gold);
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: -1px;
}

.price-current span {
    font-size: .9rem;
    font-weight: 500;
    color: var(--muted);
}

.price-old {
    color: #76717d;
    font-size: 1rem;
}

.price-badge {
    background: linear-gradient(135deg, #ff3b3b, #dc2626);
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: 20px;
}

.product-attributes {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.attr-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.attr-label {
    color: var(--muted);
    font-size: .9rem;
    font-weight: 600;
    min-width: 60px;
}

.attr-value {
    color: var(--text);
    font-size: .92rem;
    font-weight: 650;
}

.size-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.size-btn {
    min-width: 44px;
    height: 40px;
    padding: 0 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
}

.size-btn:hover {
    border-color: #ffe52b60
}

.size-btn.active {
    background: linear-gradient(180deg, #fff04b, #ffdf08);
    color: #2c260d;
    border-color: #fff18b;
    font-weight: 800;
}

.product-stock-info {
    padding: 12px 0;
    font-size: .92rem;
    font-weight: 700;
}

.stock-in {
    color: #4ade80
}

.stock-out {
    color: #f87171
}

.product-actions {
    display: flex;
    gap: 12px;
    margin: 10px 0;
}

.product-actions .btn-primary {
    flex: 1;
    justify-content: center;
    font-size: 1rem;
    padding: 15px 24px;
}

.product-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.product-features div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: .85rem;
}

.product-features svg {
    width: 18px;
    height: 18px;
    color: var(--gold);
    flex-shrink: 0;
}

/* تب‌ها */
.product-tabs {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 60px;
}

.tabs-header {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    background: #ffffff03;
}

.tab-btn {
    flex: 1;
    background: none;
    border: 0;
    color: var(--muted);
    font: inherit;
    font-size: .95rem;
    font-weight: 700;
    padding: 18px;
    cursor: pointer;
    transition: .2s;
    position: relative;
}

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

.tab-btn.active {
    color: var(--gold);
}

.tab-btn.active:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.tab-panel {
    display: none;
    padding: 30px;
}

.tab-panel.active {
    display: block
}

.tab-content {
    color: var(--muted);
    font-size: .95rem;
    line-height: 2;
}

.tab-content p {
    margin-bottom: 12px
}

.specs-table {
    width: 100%;
    border-collapse: collapse;
}

.specs-table tr {
    border-bottom: 1px solid var(--border);
}

.specs-table tr:last-child {
    border-bottom: 0
}

.specs-table td {
    padding: 14px 0;
    font-size: .92rem;
}

.specs-table td:first-child {
    color: var(--muted);
    width: 180px;
    font-weight: 600;
}

.specs-table td:last-child {
    color: var(--text);
    font-weight: 650;
}

/* محصولات مشابه */
.related-products {
    padding-top: 40px;
    border-top: 1px solid var(--border);
}

/* ═══ RESPONSIVE ═══ */
@media(max-width:991px) {
    .products-layout {
        grid-template-columns: 1fr
    }

    .products-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap
    }

    .filter-box {
        flex: 1 1 240px
    }

    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .product-gallery {
        position: static
    }
}

@media(max-width:600px) {
    .categories-grid {
        grid-template-columns: 1fr
    }

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

    .product-body {
        padding: 12px
    }

    .product-title {
        font-size: .85rem
    }

    .product-price {
        font-size: .92rem
    }

    .product-btn {
        font-size: .78rem;
        padding: 9px
    }

    .product-btn svg {
        width: 14px;
        height: 14px
    }

    .products-sidebar {
        flex-direction: column
    }

    .filter-box {
        padding: 16px
    }

    .product-detail-price {
        gap: 10px
    }

    .price-current {
        font-size: 1.4rem
    }

    .product-features {
        grid-template-columns: 1fr
    }

    .tab-panel {
        padding: 20px
    }

    .specs-table td:first-child {
        width: 110px
    }

    .gallery-thumb {
        width: 60px;
        height: 60px
    }

    .pagination {
        gap: 6px
    }

    .page-link {
        min-width: 36px;
        height: 36px;
        font-size: .82rem
    }
}

/* ═══ Color Options ═══ */
.color-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.color-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--border);
    cursor: pointer;
    transition: .2s;
    padding: 0;
    position: relative;
    box-shadow: inset 0 0 0 2px #05040580;
}

.color-btn:hover {
    transform: scale(1.12);
    border-color: #ffe52b60;
}

.color-btn.active {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px #ffe52b30, inset 0 0 0 2px #050405;
    transform: scale(1.08);
}

.product-colors {
    display: flex;
    gap: 5px;
    align-items: center;
    margin: 4px 0;
}

.product-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #ffffff30;
    box-shadow: inset 0 0 0 1px #050405;
}

.product-color-more {
    font-size: .72rem;
    color: var(--muted);
}

/* ═══════════════════════════════════════
   MODAL: انتخاب رنگ و سایز
   ═══════════════════════════════════════ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: #000000cc;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
    padding: 20px;
}

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

.modal-box {
    background: linear-gradient(135deg, #0e0c0e, #07060a);
    border: 1px solid #ffe52b30;
    border-radius: 24px;
    width: min(460px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px;
    position: relative;
    box-shadow: 0 40px 100px #00000090, 0 0 0 1px #ffffff08 inset;
    transform: scale(.92) translateY(20px);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

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

.modal-close {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #ffffff08;
    border: 1px solid #ffffff15;
    color: var(--muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .2s;
    z-index: 2;
}

.modal-close:hover {
    background: #ff3b3b20;
    border-color: #ff3b3b50;
    color: #ff6b6b;
}

.modal-close svg {
    width: 16px;
    height: 16px;
}

/* محصول */
.modal-product {
    display: flex;
    gap: 14px;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ffffff10;
}

.modal-product-img {
    width: 80px;
    height: 80px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    background: #ffffff08;
    border: 1px solid #ffffff15;
    display: grid;
    place-items: center;
}

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

.modal-product-img:empty:before {
    content: '📦';
    font-size: 2rem;
    opacity: .3;
}

.modal-product-info {
    flex: 1;
    min-width: 0;
}

.modal-product-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.modal-product-price {
    color: var(--gold);
    font-size: 1.15rem;
    font-weight: 900;
}

/* بخش‌ها */
.modal-section {
    margin-bottom: 22px;
}

.modal-section.hidden {
    display: none;
}

.modal-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
}

.modal-label svg {
    width: 18px;
    height: 18px;
    color: var(--gold);
}

/* رنگ‌ها */
.modal-colors {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.modal-color-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #ffffff20;
    cursor: pointer;
    transition: .2s;
    padding: 0;
    position: relative;
    box-shadow: inset 0 0 0 3px #0e0c0e;
}

.modal-color-btn:hover {
    transform: scale(1.1);
    border-color: #ffe52b60;
}

.modal-color-btn.selected {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px #ffe52b40, inset 0 0 0 3px #0e0c0e;
    transform: scale(1.08);
}

.modal-color-btn.selected:after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: .9rem;
    font-weight: 900;
    text-shadow: 0 0 4px #000, 0 0 4px #000;
}

/* سایزها */
.modal-sizes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.modal-size-btn {
    min-width: 48px;
    height: 44px;
    padding: 0 16px;
    background: #ffffff08;
    border: 1px solid #ffffff20;
    border-radius: 11px;
    color: var(--text);
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
}

.modal-size-btn:hover {
    border-color: #ffe52b60;
    background: #ffe52b08;
}

.modal-size-btn.selected {
    background: linear-gradient(180deg, #fff04b, #ffdf08);
    color: #2c260d;
    border-color: #fff18b;
    box-shadow: 0 4px 16px #ffdc0030;
}

/* دکمه‌ها */
.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 26px;
}

.modal-actions .btn-primary {
    flex: 1;
    justify-content: center;
}

.modal-actions .btn-ghost {
    padding: 13px 20px;
}

/* ریسپانسیو */
@media(max-width:600px) {
    .modal-box {
        padding: 22px 18px;
        border-radius: 20px;
    }

    .modal-product-img {
        width: 64px;
        height: 64px;
    }

    .modal-color-btn {
        width: 38px;
        height: 38px;
    }

    .modal-actions {
        flex-direction: column-reverse;
    }

    .modal-actions .btn-ghost {
        width: 100%;
        justify-content: center;
    }
}

/* ═══ Toast (پیام شناور) ═══ */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #0e0c0e;
    border: 1px solid #ffe52b40;
    color: var(--text);
    padding: 14px 24px;
    border-radius: 14px;
    font-size: .92rem;
    font-weight: 600;
    box-shadow: 0 20px 50px #00000090;
    z-index: 10000;
    opacity: 0;
    transition: .35s cubic-bezier(.34, 1.56, .64, 1);
    pointer-events: none;
    max-width: 90vw;
    text-align: center;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast.success {
    border-color: #4ade8060;
    background: linear-gradient(135deg, #0e0c0e, #0a1a0f);
    box-shadow: 0 20px 50px #00000090, 0 0 30px #4ade8020;
}

.toast.warning {
    border-color: #fbbf2460;
    background: linear-gradient(135deg, #0e0c0e, #1a140a);
    box-shadow: 0 20px 50px #00000090, 0 0 30px #fbbf2420;
}

.toast.error {
    border-color: #ff3b3b60;
    background: linear-gradient(135deg, #0e0c0e, #1a0a0a);
    box-shadow: 0 20px 50px #00000090, 0 0 30px #ff3b3b20;
}

/* ═══════════════════════════════════════
   CART PAGE
   ═══════════════════════════════════════ */

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

/* آیتم‌ها */
.cart-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cart-item {
    display: grid;
    grid-template-columns: 100px 1fr auto auto auto;
    gap: 18px;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    transition: .2s;
}

.cart-item:hover {
    border-color: #ffe52b30;
}

.cart-item-img {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff08;
    display: grid;
    place-items: center;
    text-decoration: none;
}

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

.cart-no-img {
    color: #ffe52b30;
}

.cart-no-img svg {
    width: 36px;
    height: 36px;
}

.cart-item-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cart-item-title {
    color: var(--text);
    font-size: .98rem;
    font-weight: 750;
    text-decoration: none;
    line-height: 1.5;
    transition: .2s;
}

.cart-item-title:hover {
    color: var(--gold);
}

.cart-item-attrs {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.cart-attr {
    display: flex;
    gap: 5px;
    font-size: .83rem;
}

.cart-attr-label {
    color: var(--muted);
}

.cart-attr-value {
    color: var(--text);
    font-weight: 650;
}

.cart-item-price {
    color: var(--muted);
    font-size: .88rem;
}

/* تعداد */
.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #ffffff05;
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 4px;
}

.qty-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: none;
    border: 0;
    color: var(--text);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .2s;
}

.qty-btn:hover {
    background: #ffe52b15;
    color: var(--gold);
}

.qty-btn svg {
    width: 14px;
    height: 14px;
}

.qty-input {
    width: 38px;
    height: 32px;
    text-align: center;
    background: none;
    border: 0;
    color: var(--text);
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    outline: none;
    -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* جمع */
.cart-item-subtotal {
    color: var(--gold);
    font-size: 1rem;
    font-weight: 900;
    white-space: nowrap;
}

.cart-item-subtotal span {
    font-size: .75rem;
    font-weight: 500;
    color: var(--muted);
}

/* حذف */
.cart-item-remove {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #ffffff05;
    border: 1px solid var(--border);
    color: var(--muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .2s;
}

.cart-item-remove:hover {
    background: #ff3b3b15;
    border-color: #ff3b3b50;
    color: #ff6b6b;
}

.cart-item-remove svg {
    width: 16px;
    height: 16px;
}

/* خلاصه سفارش */
.cart-summary {
    position: sticky;
    top: 100px;
}

.cart-summary-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 26px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
}

.cart-summary-box:before {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at 50% 0%, #ffdf3815, transparent 60%);
    pointer-events: none;
}

.cart-summary-box h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    position: relative;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-size: .92rem;
    position: relative;
}

.summary-row span {
    color: var(--muted);
}

.summary-row strong {
    color: var(--text);
    font-weight: 700;
}

.summary-count,
.summary-total {
    color: var(--gold) !important;
}

.summary-shipping strong {
    font-size: .82rem !important;
    color: var(--muted) !important;
    font-weight: 500 !important;
}

.summary-divider {
    height: 1px;
    background: var(--border);
    margin: 18px 0;
}

.summary-final {
    margin-bottom: 22px;
}

.summary-final span {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text) !important;
}

.summary-final-price {
    color: var(--gold) !important;
    font-size: 1.2rem !important;
    font-weight: 900 !important;
}

.cart-checkout-btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 12px;
    position: relative;
}

.cart-continue-link {
    display: block;
    text-align: center;
    color: var(--muted);
    text-decoration: none;
    font-size: .88rem;
    transition: .2s;
    position: relative;
}

.cart-continue-link:hover {
    color: var(--gold);
}

/* سبد خالی */
.cart-empty {
    text-align: center;
    padding: 80px 20px;
    background: var(--card);
    border: 1px dashed var(--border);
    border-radius: 24px;
}

.cart-empty-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 24px;
    display: grid;
    place-items: center;
    background: #ffe52b10;
    border: 1px solid #ffe52b30;
    border-radius: 50%;
    color: var(--gold);
}

.cart-empty-icon svg {
    width: 42px;
    height: 42px;
}

.cart-empty h2 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.cart-empty p {
    color: var(--muted);
    font-size: .95rem;
    margin-bottom: 26px;
}

/* ریسپانسیو */
@media(max-width:991px) {
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        position: static;
    }
}

@media(max-width:700px) {
    .cart-item {
        grid-template-columns: 80px 1fr;
        gap: 12px;
        position: relative;
        padding: 14px;
    }

    .cart-item-img {
        width: 80px;
        height: 80px;
    }

    .cart-item-info {
        grid-column: 2;
    }

    .cart-item-qty {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .cart-item-subtotal {
        grid-column: 2;
        text-align: left;
    }

    .cart-item-remove {
        position: absolute;
        top: 14px;
        left: 14px;
    }

    .cart-summary-box {
        padding: 20px;
    }
}

/* ═══════════════════════════════════════
   BLOG
   ═══════════════════════════════════════ */
.blog-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start;
}

.blog-main {
    min-width: 0
}

/* مقاله ویژه */
.blog-featured {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 30px;
    background: linear-gradient(135deg, #ffe52b08, #ffb70002);
    border: 1px solid #ffe52b30;
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none;
    margin-bottom: 40px;
    transition: .3s;
    position: relative;
}

.blog-featured:hover {
    border-color: #ffe52b60;
    transform: translateY(-3px);
    box-shadow: 0 20px 50px #00000060;
}

.blog-featured-img {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #0a0a0c;
}

.blog-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

.blog-featured:hover .blog-featured-img img {
    transform: scale(1.05);
}

.blog-featured-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(135deg, #fff04b, #ffdf08);
    color: #2c260d;
    font-size: .78rem;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 20px;
    z-index: 2;
}

.blog-featured-body {
    padding: 32px 32px 32px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}

.blog-featured-body h2 {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.4;
    color: var(--text);
    letter-spacing: -.5px;
}

.blog-featured-body p {
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.9;
}

.blog-cat {
    display: inline-block;
    color: var(--gold);
    font-size: .78rem;
    font-weight: 700;
    background: #ffe52b15;
    padding: 4px 12px;
    border-radius: 20px;
    align-self: flex-start;
    text-decoration: none;
    transition: .2s;
}

.blog-cat:hover {
    background: #ffe52b25
}

.blog-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    color: var(--muted);
    font-size: .83rem;
}

.blog-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.blog-meta svg {
    width: 15px;
    height: 15px;
}

/* گرید مقالات */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.blog-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: .3s;
}

.blog-card:hover {
    border-color: #ffe52b40;
    transform: translateY(-4px);
    box-shadow: 0 20px 45px #00000060;
}

.blog-card-img {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #0a0a0c;
    text-decoration: none;
}

.blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

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

.blog-new-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 2;
}

.blog-no-img {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ffffff05, #ffffff02);
    color: #ffe52b30;
}

.blog-no-img svg {
    width: 48px;
    height: 48px
}

.blog-no-img.small svg {
    width: 26px;
    height: 26px
}

.blog-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.blog-card-title-link {
    text-decoration: none
}

.blog-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.5;
    transition: .2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card:hover .blog-card-title {
    color: var(--gold)
}

.blog-card-excerpt {
    color: var(--muted);
    font-size: .87rem;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

.blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gold);
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    transition: .2s;
}

.blog-read-more:hover {
    gap: 10px;
}

.blog-read-more svg {
    width: 14px;
    height: 14px
}

/* سایدبار */
.blog-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.sidebar-box h3 {
    color: var(--gold);
    font-size: .95rem;
    font-weight: 800;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.sidebar-search {
    display: flex;
    background: #ffffff06;
    border: 1px solid var(--border);
    border-radius: 11px;
    overflow: hidden;
    transition: .2s;
}

.sidebar-search:focus-within {
    border-color: #ffe52b60;
}

.sidebar-search input {
    flex: 1;
    font: inherit;
    font-size: .9rem;
    color: var(--text);
    background: none;
    border: 0;
    outline: none;
    padding: 11px 14px;
}

.sidebar-search input::placeholder {
    color: #76717d
}

.sidebar-search button {
    background: none;
    border: 0;
    color: var(--muted);
    padding: 0 14px;
    cursor: pointer;
    transition: .2s;
}

.sidebar-search button:hover {
    color: var(--gold)
}

.sidebar-search svg {
    width: 18px;
    height: 18px
}

.sidebar-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sidebar-list a {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    text-decoration: none;
    font-size: .88rem;
    padding: 9px 12px;
    border-radius: 9px;
    transition: .2s;
}

.sidebar-list a:hover {
    color: var(--gold);
    background: #ffe52b08;
}

.sidebar-list a.active {
    color: var(--gold);
    background: #ffe52b10;
    font-weight: 700;
}

.sidebar-list .count {
    opacity: .6;
    font-size: .82rem;
}

/* جدیدترین مقالات (سایدبار) */
.recent-posts {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.recent-post {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 12px;
    text-decoration: none;
    align-items: center;
    transition: .2s;
}

.recent-post:hover .recent-post-info h4 {
    color: var(--gold)
}

.recent-post-img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    background: #0a0a0c;
    display: grid;
    place-items: center;
}

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

.recent-post-info h4 {
    color: var(--text);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.5;
    transition: .2s;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.recent-post-info span {
    color: var(--muted);
    font-size: .75rem;
}

/* ═══ صفحه جزئیات مقاله ═══ */
.post-detail {
    padding: 40px 0 80px
}

.post-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px;
}

.post-cat {
    display: inline-block;
    color: var(--gold);
    font-size: .83rem;
    font-weight: 700;
    background: #ffe52b15;
    padding: 6px 16px;
    border-radius: 20px;
    text-decoration: none;
    margin-bottom: 16px;
    transition: .2s;
}

.post-cat:hover {
    background: #ffe52b25
}

.post-title {
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: -1px;
    margin-bottom: 16px;
}

.post-excerpt {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.9;
    margin-bottom: 24px;
}

.post-meta {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.post-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: .85rem;
}

.post-meta-item svg {
    width: 16px;
    height: 16px;
    color: var(--gold);
}

.post-cover {
    max-width: 1000px;
    margin: 0 auto 50px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--border);
    aspect-ratio: 16/9;
    background: #0a0a0c;
}

.post-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.post-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 50px;
    align-items: start;
    max-width: 1240px;
    margin: 0 auto;
}

.post-content {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 40px;
    color: var(--text);
    font-size: 1rem;
    line-height: 2.1;
}

.post-content p {
    margin-bottom: 18px
}

.post-content h2 {
    font-size: 1.5rem;
    font-weight: 900;
    margin: 30px 0 16px;
    color: var(--text);
    letter-spacing: -.5px;
}

.post-content h3 {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 24px 0 14px;
}

.post-content ul,
.post-content ol {
    padding-right: 24px;
    margin-bottom: 18px;
    color: var(--muted);
}

.post-content li {
    margin-bottom: 8px;
    line-height: 1.9;
}

.post-content a {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px dashed #ffe52b60;
    transition: .2s;
}

.post-content a:hover {
    border-bottom-style: solid
}

.post-content img {
    max-width: 100%;
    border-radius: 14px;
    margin: 20px 0;
}

.post-content blockquote {
    border-right: 3px solid var(--gold);
    padding: 16px 20px;
    background: #ffe52b08;
    border-radius: 0 12px 12px 0;
    margin: 20px 0;
    color: var(--muted);
    font-style: italic;
}

.post-content code {
    background: #ffffff08;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: monospace;
    font-size: .9rem;
    color: var(--gold);
}

.related-posts {
    margin-top: 70px;
    padding-top: 50px;
    border-top: 1px solid var(--border);
}

/* ریسپانسیو */
@media(max-width:991px) {
    .blog-layout {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .blog-sidebar {
        position: static
    }

    .blog-featured {
        grid-template-columns: 1fr;
        gap: 0
    }

    .blog-featured-body {
        padding: 24px
    }

    .post-layout {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .post-content {
        padding: 28px 22px
    }
}

@media(max-width:600px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .blog-featured-body h2 {
        font-size: 1.15rem
    }

    .post-title {
        font-size: 1.4rem
    }

    .post-excerpt {
        font-size: .92rem
    }

    .post-content {
        padding: 22px 18px;
        font-size: .95rem;
        line-height: 2
    }

    .post-content h2 {
        font-size: 1.25rem
    }

    .post-content h3 {
        font-size: 1.05rem
    }

    .post-meta {
        gap: 12px
    }

    .post-meta-item {
        font-size: .78rem
    }

    .recent-post {
        grid-template-columns: 50px 1fr
    }

    .recent-post-img {
        width: 50px;
        height: 50px
    }
}

/* ═══════════════════════════════════════
   CHECKOUT
   ═══════════════════════════════════════ */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 36px;
    align-items: start;
}

.checkout-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.checkout-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px;
}

.checkout-box-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.checkout-step {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff04b, #ffdf08);
    color: #2c260d;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    font-weight: 900;
    flex-shrink: 0;
}

.checkout-box-head h2 {
    font-size: 1.15rem;
    font-weight: 800;
}

/* فرم */
.checkout-box .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.checkout-box .field {
    margin-bottom: 16px;
}

.checkout-box label {
    display: block;
    color: #c9c5ce;
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: 7px;
}

.checkout-box .req {
    color: #ff6b6b;
}

.checkout-box .input-wrap {
    display: flex;
    border: 1px solid #ffffff22;
    border-radius: 12px;
    background: #ffffff06;
    transition: .2s;
    overflow: hidden;
}

.checkout-box .input-wrap:focus-within {
    border-color: #ffe52b80;
    background: #ffffff09;
    box-shadow: 0 0 0 3px #ffe52b10;
}

.checkout-box input,
.checkout-box textarea {
    font: inherit;
    font-size: .95rem;
    color: var(--text);
    background: none;
    border: 0;
    outline: none;
    width: 100%;
    padding: 12px 16px;
    resize: vertical;
    font-family: inherit;
}

.checkout-box textarea {
    min-height: 80px;
    line-height: 1.8
}

.checkout-box input::placeholder,
.checkout-box textarea::placeholder {
    color: #76717d
}

/* روش ارسال */
.shipping-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shipping-option {
    cursor: pointer;
    position: relative;
}

.shipping-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.shipping-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #ffffff05;
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: .25s;
    gap: 14px;
}

.shipping-option:hover .shipping-content {
    border-color: #ffe52b40;
    background: #ffe52b05;
}

.shipping-option input[type="radio"]:checked+.shipping-content {
    border-color: var(--gold);
    background: #ffe52b10;
    box-shadow: 0 0 0 3px #ffe52b15;
}

.shipping-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shipping-info strong {
    font-size: .95rem;
    font-weight: 750;
    color: var(--text);
}

.shipping-info small {
    font-size: .82rem;
    color: var(--muted);
}

.shipping-price {
    color: var(--gold);
    font-weight: 800;
    font-size: 1rem;
    white-space: nowrap;
}

.shipping-price .free {
    color: #4ade80;
    background: #4ade8015;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .85rem;
}

.free-shipping-badge {
    background: linear-gradient(135deg, #4ade8020, #22c55e10);
    border: 1px solid #4ade8040;
    color: #86efac;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: .92rem;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 600;
}

.free-shipping-badge strong {
    color: #4ade80
}

/* خلاصه */
.checkout-summary {
    position: sticky;
    top: 100px;
}

.checkout-summary-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 26px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
}

.checkout-summary-box:before {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at 50% 0%, #ffdf3815, transparent 60%);
    pointer-events: none;
}

.checkout-summary-box h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.checkout-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 280px;
    overflow-y: auto;
    padding-left: 6px;
    position: relative;
}

.checkout-items::-webkit-scrollbar {
    width: 5px
}

.checkout-items::-webkit-scrollbar-track {
    background: #ffffff05;
    border-radius: 4px
}

.checkout-items::-webkit-scrollbar-thumb {
    background: #ffe52b40;
    border-radius: 4px
}

.checkout-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 10px;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #ffffff08;
}

.checkout-item:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.checkout-item-img {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: #0a0a0c;
    display: grid;
    place-items: center;
}

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

.checkout-item-img .cart-no-img svg {
    width: 24px;
    height: 24px
}

.checkout-item-qty {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--gold);
    color: #2c260d;
    font-size: .68rem;
    font-weight: 900;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    z-index: 2;
    box-shadow: 0 2px 8px #00000080;
}

.checkout-item-info {
    min-width: 0
}

.checkout-item-info h4 {
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.checkout-item-attrs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: .72rem;
    color: var(--muted);
}

.checkout-item-price {
    color: var(--gold);
    font-weight: 800;
    font-size: .88rem;
    white-space: nowrap;
}

.checkout-item-price span {
    font-size: .7rem;
    color: var(--muted);
    font-weight: 500;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-size: .92rem;
    position: relative;
}

.summary-row span {
    color: var(--muted)
}

.summary-row strong {
    color: var(--text);
    font-weight: 700
}

.summary-divider {
    height: 1px;
    background: var(--border);
    margin: 18px 0;
}

.summary-final {
    margin-bottom: 22px;
}

.summary-final span {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text) !important;
}

.summary-final-price {
    color: var(--gold) !important;
    font-size: 1.2rem !important;
    font-weight: 900 !important;
}

.checkout-submit-btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 12px;
    position: relative;
    padding: 16px 24px;
    font-size: 1rem;
}

.checkout-trust {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    color: var(--muted);
    font-size: .8rem;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    position: relative;
}

.checkout-trust svg {
    width: 16px;
    height: 16px;
    color: var(--gold);
}

.checkout-messages {
    max-width: 900px;
    margin: 0 auto 24px;
}

/* صفحه موفقیت */
.success-box {
    max-width: 720px;
    margin: 0 auto;
    background: var(--card);
    border: 1px solid #4ade8040;
    border-radius: 24px;
    padding: 50px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.success-box:before {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at 50% 0%, #4ade8020, transparent 60%);
    pointer-events: none;
}

.success-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 24px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 15px 40px #4ade8050;
    position: relative;
    animation: successPulse 2s ease-in-out infinite;
}

@keyframes successPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 15px 40px #4ade8050
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 20px 50px #4ade8070
    }
}

.success-icon svg {
    width: 44px;
    height: 44px;
    stroke-width: 2.5;
}

.success-box h1 {
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 12px;
    position: relative;
}

.success-box h1 span {
    color: #4ade80
}

.success-box>p {
    color: var(--muted);
    font-size: 1rem;
    margin-bottom: 32px;
    position: relative;
}

.success-order-number {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffe52b15;
    border: 1px solid #ffe52b40;
    padding: 12px 24px;
    border-radius: 14px;
    margin-bottom: 32px;
    position: relative;
}

.success-order-number span {
    color: var(--muted);
    font-size: .9rem
}

.success-order-number strong {
    color: var(--gold);
    font-size: 1.15rem;
    font-family: monospace;
    letter-spacing: 2px;
}

.success-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 30px;
    position: relative;
    text-align: right;
}

.success-info-item {
    background: #ffffff05;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
}

.success-info-item.full {
    grid-column: 1/-1;
}

.success-info-item .label {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    margin-bottom: 6px;
}

.success-info-item strong {
    color: var(--text);
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.6;
}

.success-status {
    background: #fbbf2410;
    border: 1px solid #fbbf2440;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 30px;
    position: relative;
}

.status-badge {
    display: inline-block;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #2c260d;
    font-size: .85rem;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.success-status p {
    color: var(--muted);
    font-size: .88rem;
    margin: 0;
}

.success-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}

/* ریسپانسیو */
@media(max-width:991px) {
    .checkout-layout {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .checkout-summary {
        position: static
    }

    .checkout-box .form-row {
        grid-template-columns: 1fr
    }

    .success-info-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:600px) {
    .checkout-box {
        padding: 20px 16px;
        border-radius: 16px
    }

    .checkout-box-head {
        gap: 10px
    }

    .checkout-step {
        width: 32px;
        height: 32px;
        font-size: .95rem
    }

    .checkout-box-head h2 {
        font-size: 1rem
    }

    .shipping-content {
        padding: 13px 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }

    .shipping-price {
        align-self: flex-end
    }

    .checkout-summary-box {
        padding: 20px;
        border-radius: 16px
    }

    .success-box {
        padding: 32px 22px;
        border-radius: 20px
    }

    .success-box h1 {
        font-size: 1.3rem
    }

    .success-icon {
        width: 70px;
        height: 70px
    }

    .success-icon svg {
        width: 34px;
        height: 34px
    }

    .success-actions {
        flex-direction: column
    }

    .success-actions a {
        width: 100%;
        justify-content: center
    }
}

/* ═══════════════════════════════════════
   USER DROPDOWN
   ═══════════════════════════════════════ */
.user-dropdown {
    position: relative;
}

.user-dropdown .user-btn {
    display: flex;
    align-items: center;
    gap: 7px;
}

.dropdown-arrow {
    width: 14px !important;
    height: 14px !important;
    transition: transform .25s;
}

.user-dropdown .user-btn.active .dropdown-arrow {
    transform: rotate(180deg);
}

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 250px;
    background: linear-gradient(135deg, #0e0c0e, #07060a);
    border: 1px solid #ffe52b30;
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 20px 50px #00000090;
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: .25s cubic-bezier(.34, 1.56, .64, 1);
}

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

.dropdown-header {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: #ffffff05;
    border-radius: 12px;
    margin-bottom: 8px;
}

.dropdown-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff04b, #ffdf08);
    color: #2c260d;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    font-weight: 900;
}

.dropdown-header strong {
    display: block;
    font-size: .9rem;
    font-weight: 750;
    margin-bottom: 2px;
    color: var(--text);
}

.dropdown-header small {
    display: block;
    font-size: .75rem;
    color: var(--muted);
    direction: ltr;
    text-align: right;
}

.dropdown-divider {
    height: 1px;
    background: #ffffff10;
    margin: 8px 0;
}

.user-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    color: var(--muted);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
    border-radius: 10px;
    transition: .2s;
}

.user-dropdown-menu a:hover {
    background: #ffe52b10;
    color: var(--gold);
}

.user-dropdown-menu a svg {
    width: 17px;
    height: 17px;
}

.dropdown-logout {
    color: #ff6b6b !important;
}

.dropdown-logout:hover {
    background: #ff3b3b15 !important;
    color: #ff6b6b !important;
}

/* ═══════════════════════════════════════
   PROFILE
   ═══════════════════════════════════════ */
.profile-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    align-items: start;
}

.profile-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-user-card {
    background: linear-gradient(135deg, #ffe52b10, #ffb70005);
    border: 1px solid #ffe52b30;
    border-radius: 20px;
    padding: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.profile-user-card:before {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at 50% 0%, #ffdf3820, transparent 60%);
    pointer-events: none;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff04b, #ffdf08);
    color: #2c260d;
    display: grid;
    place-items: center;
    font-size: 2rem;
    font-weight: 900;
    box-shadow: 0 15px 40px #ffdc0040;
    position: relative;
}

.profile-user-info h3 {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 4px;
    color: var(--text);
    position: relative;
}

.profile-user-info span {
    font-size: .82rem;
    color: var(--muted);
    direction: ltr;
    display: block;
    position: relative;
}

.profile-nav {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.profile-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--muted);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    border-radius: 11px;
    transition: .2s;
}

.profile-nav a:hover {
    background: #ffe52b08;
    color: var(--text);
}

.profile-nav a.active {
    background: linear-gradient(135deg, #ffe52b15, #ffb70008);
    color: var(--gold);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px #ffe52b30;
}

.profile-nav a svg {
    width: 18px;
    height: 18px;
}

.profile-nav .logout-link {
    color: #ff6b6b;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid #ffffff10;
    border-radius: 0;
}

.profile-nav .logout-link:hover {
    background: #ff3b3b10;
    color: #ff6b6b;
}

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

/* آمار */
.stats-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: .25s;
}

.stat-card:hover {
    border-color: #ffe52b40;
    transform: translateY(-2px);
}

.stat-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #ffe52b20, #ffb70010);
    border: 1px solid #ffe52b40;
    color: var(--gold);
}

.stat-icon.warning {
    background: linear-gradient(135deg, #fbbf2420, #f59e0b10);
    border-color: #fbbf2440;
    color: #fbbf24;
}

.stat-icon.success {
    background: linear-gradient(135deg, #4ade8020, #22c55e10);
    border-color: #4ade8040;
    color: #4ade80;
}

.stat-icon.gold {
    background: linear-gradient(135deg, #fff04b, #ffdf08);
    color: #2c260d;
}

.stat-icon svg {
    width: 22px;
    height: 22px
}

.stat-info strong {
    display: block;
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: 2px;
}

.stat-info span {
    font-size: .8rem;
    color: var(--muted);
}

/* Box */
.profile-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px;
}

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

.profile-box-head h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
}

.view-all-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gold);
    font-size: .85rem;
    font-weight: 650;
    text-decoration: none;
    transition: .2s;
}

.view-all-link:hover {
    gap: 10px
}

.view-all-link svg {
    width: 14px;
    height: 14px
}

/* لیست سفارشات */
.orders-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 16px;
    align-items: center;
    padding: 16px 20px;
    background: #ffffff05;
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    transition: .2s;
}

.order-row:hover {
    border-color: #ffe52b40;
    background: #ffe52b05;
    transform: translateX(-3px);
}

.order-row-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.order-number {
    font-size: .95rem;
    font-weight: 800;
    color: var(--gold);
    font-family: monospace;
    letter-spacing: 1px;
}

.order-date {
    font-size: .82rem;
    color: var(--muted);
}

.order-items-count {
    font-size: .78rem;
    color: var(--muted);
}

.order-row-amount {
    color: var(--text);
    font-weight: 800;
    font-size: .95rem;
    white-space: nowrap;
}

.order-row-amount span {
    font-size: .75rem;
    color: var(--muted);
    font-weight: 500;
}

.order-row-status {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.order-row-status.status-pending {
    background: #fbbf2420;
    color: #fbbf24;
}

.order-row-status.status-paid {
    background: #4ade8020;
    color: #4ade80;
}

.order-row-status.status-processing {
    background: #60a5fa20;
    color: #60a5fa;
}

.order-row-status.status-shipped {
    background: #a78bfa20;
    color: #a78bfa;
}

.order-row-status.status-delivered {
    background: #22c55e20;
    color: #22c55e;
}

.order-row-status.status-cancelled {
    background: #ef444420;
    color: #ef4444;
}

.order-row-status.status-returned {
    background: #f9731620;
    color: #f97316;
}

.order-row-arrow {
    width: 18px;
    height: 18px;
    color: var(--muted);
    transform: rotate(90deg);
}

/* Quick info */
.quick-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.info-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: .25s;
}

.info-card:hover {
    border-color: #ffe52b40;
    transform: translateY(-2px);
}

.info-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #ffe52b20, #ffb70010);
    border: 1px solid #ffe52b40;
    border-radius: 12px;
    color: var(--gold);
}

.info-icon svg {
    width: 22px;
    height: 22px
}

.info-card h4 {
    font-size: .95rem;
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--text);
}

.info-card p {
    font-size: .88rem;
    color: var(--muted);
    line-height: 1.6;
}

.info-link {
    display: inline-block;
    color: var(--gold);
    font-size: .82rem;
    font-weight: 650;
    text-decoration: none;
    margin-top: 8px;
    transition: .2s;
}

.info-link:hover {
    gap: 5px
}

/* تب‌های سفارشات */
.orders-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.orders-tab {
    flex: 1;
    min-width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    color: var(--muted);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 650;
    border-radius: 11px;
    transition: .2s;
    white-space: nowrap;
}

.orders-tab:hover {
    color: var(--text);
    background: #ffffff05;
}

.orders-tab.active {
    background: linear-gradient(135deg, #ffe52b20, #ffb70010);
    color: var(--gold);
    box-shadow: inset 0 0 0 1px #ffe52b40;
}

.orders-tab span {
    background: #ffffff10;
    color: inherit;
    font-size: .72rem;
    padding: 2px 7px;
    border-radius: 20px;
}

.orders-tab.active span {
    background: #ffe52b30;
}

/* جزئیات سفارش */
.order-detail {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.order-status-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    gap: 18px;
    align-items: center;
}

.order-status-box.status-pending {
    border-color: #fbbf2440;
    background: linear-gradient(135deg, #fbbf2408, #fbbf2402);
}

.order-status-box.status-paid {
    border-color: #4ade8040;
    background: linear-gradient(135deg, #4ade8008, #4ade8002);
}

.order-status-box.status-processing {
    border-color: #60a5fa40;
    background: linear-gradient(135deg, #60a5fa08, #60a5fa02);
}

.order-status-box.status-shipped {
    border-color: #a78bfa40;
    background: linear-gradient(135deg, #a78bfa08, #a78bfa02);
}

.order-status-box.status-delivered {
    border-color: #22c55e40;
    background: linear-gradient(135deg, #22c55e08, #22c55e02);
}

.status-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: #ffffff10;
}

.status-icon svg {
    width: 30px;
    height: 30px;
    color: var(--gold);
}

.status-text strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 4px;
}

.status-text p {
    font-size: .88rem;
    color: var(--muted);
    line-height: 1.7;
}

.order-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.order-info-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
}

.order-info-box h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem;
    font-weight: 800;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.order-info-box h4 svg {
    width: 18px;
    height: 18px;
    color: var(--gold);
}

.info-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 10px;
    font-size: .88rem;
}

.info-row.full {
    grid-template-columns: 1fr;
}

.info-row span {
    color: var(--muted)
}

.info-row strong {
    color: var(--text);
    font-weight: 650;
    word-break: break-word;
}

.order-items-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px;
}

.order-items-box h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.order-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    background: #ffffff05;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.order-item-img {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background: #0a0a0c;
    display: grid;
    place-items: center;
}

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

.order-item-info {
    min-width: 0
}

.order-item-info h4 {
    font-size: .92rem;
    font-weight: 750;
    margin-bottom: 6px;
    line-height: 1.5;
}

.order-item-attrs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: .78rem;
    color: var(--muted);
}

.order-item-price {
    color: var(--gold);
    font-weight: 900;
    font-size: .95rem;
    white-space: nowrap;
}

.order-item-price span {
    font-size: .72rem;
    color: var(--muted);
    font-weight: 500;
}

.order-summary-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px;
}

.order-summary-box h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.order-summary-box .summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: .9rem;
}

.order-summary-box .summary-row span {
    color: var(--muted)
}

.order-summary-box .summary-row strong {
    color: var(--text);
    font-weight: 700
}

.order-summary-box .summary-divider {
    height: 1px;
    background: var(--border);
    margin: 16px 0;
}

.order-summary-box .summary-final span {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
}

.order-summary-box .summary-final-price {
    color: var(--gold) !important;
    font-size: 1.15rem !important;
    font-weight: 900 !important;
}

.order-note-box {
    background: #fbbf2408;
    border: 1px solid #fbbf2430;
    border-radius: 16px;
    padding: 18px 22px;
}

.order-note-box h4 {
    font-size: .9rem;
    font-weight: 800;
    color: #fbbf24;
    margin-bottom: 10px;
}

.order-note-box p {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.9;
}

.order-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 10px;
}

/* فرم پروفایل */
.profile-form .profile-box h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.profile-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.profile-form .field {
    margin-bottom: 18px
}

.profile-form label {
    display: block;
    color: #c9c5ce;
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.profile-form .req {
    color: #ff6b6b
}

.profile-form .input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #ffffff22;
    border-radius: 12px;
    background: #ffffff06;
    transition: .2s;
    position: relative;
}

.profile-form .input-wrap:focus-within {
    border-color: #ffe52b80;
    background: #ffffff09;
    box-shadow: 0 0 0 3px #ffe52b10;
}

.profile-form input {
    font: inherit;
    font-size: .95rem;
    color: var(--text);
    background: none;
    border: 0;
    outline: none;
    width: 100%;
    padding: 12px 16px;
}

.profile-form input::placeholder {
    color: #76717d
}

.profile-form .eye {
    background: none;
    border: 0;
    color: var(--muted);
    padding: 0 14px;
    height: 100%;
    cursor: pointer;
    transition: .2s;
}

.profile-form .eye:hover {
    color: var(--gold)
}

.profile-form .eye svg {
    width: 18px;
    height: 18px
}

.error-text {
    display: block;
    color: #ff6b6b;
    font-size: .78rem;
    margin-top: 6px;
}

.helper-text {
    display: block;
    color: var(--muted);
    font-size: .75rem;
    margin-top: 6px;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

/* ریسپانسیو پروفایل */
@media(max-width:991px) {
    .profile-layout {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .profile-sidebar {
        position: static
    }

    .profile-nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 8px;
    }

    .profile-nav a {
        white-space: nowrap;
        padding: 10px 16px;
    }

    .profile-nav .logout-link {
        margin-top: 0;
        padding-top: 12px;
        border-top: 0;
        border-right: 1px solid #ffffff10;
        border-radius: 11px;
    }

    .stats-cards {
        grid-template-columns: repeat(2, 1fr)
    }

    .order-info-grid {
        grid-template-columns: 1fr
    }

    .quick-info {
        grid-template-columns: 1fr
    }

    .profile-form .form-row {
        grid-template-columns: 1fr
    }
}

@media(max-width:600px) {
    .profile-box {
        padding: 18px
    }

    .profile-user-card {
        padding: 20px
    }

    .profile-avatar {
        width: 64px;
        height: 64px;
        font-size: 1.5rem
    }

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

    .stat-card {
        padding: 16px
    }

    .stat-icon {
        width: 42px;
        height: 42px
    }

    .stat-info strong {
        font-size: 1.1rem
    }

    .orders-tabs {
        gap: 4px;
        padding: 4px
    }

    .orders-tab {
        min-width: auto;
        padding: 8px 12px;
        font-size: .78rem
    }

    .order-row {
        grid-template-columns: 1fr auto;
        padding: 14px;
        gap: 10px;
    }

    .order-row-arrow {
        display: none
    }

    .order-row-status {
        grid-column: 1/-1;
        justify-self: start;
    }

    .order-detail .order-status-box {
        padding: 18px;
        flex-direction: column;
        text-align: center;
        gap: 12px
    }

    .status-icon {
        width: 54px;
        height: 54px
    }

    .status-icon svg {
        width: 26px;
        height: 26px
    }

    .order-item {
        grid-template-columns: 54px 1fr;
        gap: 10px;
    }

    .order-item-img {
        width: 54px;
        height: 54px
    }

    .order-item-price {
        grid-column: 1/-1;
        text-align: left;
        padding-top: 8px;
        border-top: 1px solid #ffffff10;
    }

    .order-actions {
        flex-direction: column-reverse
    }

    .order-actions a {
        width: 100%;
        justify-content: center
    }

    .form-actions {
        flex-direction: column-reverse
    }

    .form-actions button,
    .form-actions a {
        width: 100%;
        justify-content: center
    }

    .user-dropdown-menu {
        min-width: 220px
    }
}

/* ═══════════════════════════════════════
   ERROR PAGES (404, 500, 403, 400)
   ═══════════════════════════════════════ */
.error-page {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    position: relative;
}

.error-box {
    max-width: 640px;
    width: 100%;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 32px;
    padding: 60px 40px 50px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

.error-glow {
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe52b20, transparent 70%);
    pointer-events: none;
    filter: blur(40px);
}

.error-glow.red {
    background: radial-gradient(circle, #ff3b3b20, transparent 70%);
}

.error-code {
    font-size: clamp(5rem, 15vw, 9rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -8px;
    background: linear-gradient(180deg, #fff04b, #d4a017);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
    position: relative;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    filter: drop-shadow(0 10px 40px #ffe52b30);
}

.error-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #ffe52b15, #ffb70005);
    border: 1px solid #ffe52b40;
    border-radius: 50%;
    color: var(--gold);
    position: relative;
    animation: pulseError 2.5s ease-in-out infinite;
}

.error-icon.red {
    background: linear-gradient(135deg, #ff3b3b15, #dc262605);
    border-color: #ff3b3b40;
    color: #ff6b6b;
}

@keyframes pulseError {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 #ffe52b30;
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px #ffe52b00;
    }
}

.error-icon svg {
    width: 36px;
    height: 36px;
}

.error-box h1 {
    font-size: clamp(1.3rem, 3.5vw, 1.9rem);
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: -.5px;
    margin-bottom: 16px;
    color: var(--text);
    position: relative;
}

.error-box h1 span {
    color: var(--gold);
}

.error-box .error-icon.red~h1 span {
    color: #ff6b6b;
}

.error-box>p {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.9;
    margin-bottom: 32px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
    position: relative;
}

.error-actions .btn-primary {
    padding: 14px 28px;
}

.error-links {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    position: relative;
}

.error-links a {
    color: var(--muted);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    transition: .2s;
}

.error-links a:hover {
    color: var(--gold);
    background: #ffe52b08;
}

.error-links span {
    color: #ffffff20;
    font-size: .7rem;
}

/* ریسپانسیو */
@media(max-width:600px) {
    .error-box {
        padding: 40px 22px 36px;
        border-radius: 24px;
    }

    .error-code {
        letter-spacing: -4px;
        margin-bottom: 16px;
    }

    .error-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 18px;
    }

    .error-icon svg {
        width: 28px;
        height: 28px;
    }

    .error-box h1 {
        font-size: 1.15rem;
    }

    .error-box>p {
        font-size: .9rem;
        margin-bottom: 24px;
    }

    .error-actions {
        flex-direction: column;
        margin-bottom: 24px;
    }

    .error-actions a {
        width: 100%;
        justify-content: center;
    }

    .error-links {
        gap: 4px;
    }

    .error-links a {
        font-size: .8rem;
        padding: 5px 8px;
    }
}

/* ═══════════════════════════════════════
   COUPON
   ═══════════════════════════════════════ */
.coupon-section {
    margin: 18px 0;
    padding: 16px;
    background: #ffffff05;
    border: 1px dashed #ffe52b30;
    border-radius: 14px;
    position: relative;
}

.coupon-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: .88rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.coupon-label svg {
    width: 18px;
    height: 18px;
    color: var(--gold);
}

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

.coupon-form input {
    flex: 1;
    font: inherit;
    font-size: .88rem;
    color: var(--text);
    background: #ffffff06;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 14px;
    outline: none;
    transition: .2s;
    text-align: center;
    font-weight: 700;
    letter-spacing: 1px;
}

.coupon-form input:focus {
    border-color: #ffe52b60;
    background: #ffffff09;
    box-shadow: 0 0 0 3px #ffe52b10;
}

.coupon-form input::placeholder {
    color: #76717d;
    font-weight: 500;
    letter-spacing: 0;
}

.coupon-form button {
    font: inherit;
    font-size: .85rem;
    font-weight: 750;
    background: linear-gradient(180deg, #fff04b, #ffdf08);
    color: #2c260d;
    border: 1px solid #fff18b;
    border-radius: 10px;
    padding: 0 20px;
    cursor: pointer;
    transition: .2s;
    box-shadow: 0 4px 16px #ffdc0030;
    white-space: nowrap;
}

.coupon-form button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px #ffdc0045;
}

.coupon-form button:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

.coupon-message {
    font-size: .82rem;
    margin-top: 10px;
    line-height: 1.7;
    display: none;
}

.coupon-message.success {
    color: #4ade80;
    display: block;
}

.coupon-message.error {
    color: #ff6b6b;
    display: block;
}

.coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #4ade8020, #22c55e10);
    border: 1px solid #4ade8040;
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 10px;
}

.coupon-applied-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #86efac;
    font-size: .85rem;
}

.coupon-applied-info svg {
    width: 16px;
    height: 16px;
}

.coupon-applied-info strong {
    color: #4ade80;
    font-weight: 900;
    font-family: monospace;
    letter-spacing: 1px;
}

.coupon-applied button {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #ff3b3b15;
    border: 1px solid #ff3b3b40;
    color: #ff6b6b;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .2s;
}

.coupon-applied button:hover {
    background: #ff3b3b25;
    transform: scale(1.05);
}

.coupon-applied button svg {
    width: 14px;
    height: 14px;
}

.discount-row {
    animation: discountFlash .5s ease;
}

@keyframes discountFlash {
    0% {
        background: #4ade8030
    }

    100% {
        background: transparent
    }
}

/* ═══════════════════════════════════════
   TRACK ORDER
   ═══════════════════════════════════════ */

/* فرم پیگیری */
.track-form-box {
    max-width: 520px;
    margin: 0 auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 44px 36px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.track-form-box:before {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at 50% 0%, #ffdf3815, transparent 60%);
    pointer-events: none;
}

.track-form-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #fff04b, #ffdf08);
    border-radius: 50%;
    color: #2c260d;
    box-shadow: 0 15px 40px #ffdc0040;
    position: relative;
    animation: pulseTrack 2.5s ease-in-out infinite;
}

@keyframes pulseTrack {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 15px 40px #ffdc0040
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 20px 50px #ffdc0060
    }
}

.track-form-icon svg {
    width: 36px;
    height: 36px;
    stroke-width: 2;
}

.track-form-box h2 {
    font-size: 1.4rem;
    font-weight: 900;
    margin-bottom: 8px;
    position: relative;
}

.track-form-box>p {
    color: var(--muted);
    font-size: .95rem;
    margin-bottom: 30px;
    position: relative;
}

.track-error {
    display: flex;
    gap: 10px;
    align-items: center;
    background: #ff3b3b10;
    border: 1px solid #ff3b3b40;
    color: #ff9d9d;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: .88rem;
    margin-bottom: 20px;
    text-align: right;
    position: relative;
}

.track-error svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #ff6b6b;
}

.track-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: right;
    position: relative;
}

.track-form .field {
    margin-bottom: 0
}

.track-form label {
    display: block;
    color: #c9c5ce;
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.track-form .input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #ffffff22;
    border-radius: 13px;
    background: #ffffff06;
    transition: .2s;
    height: 52px;
}

.track-form .input-wrap:focus-within {
    border-color: #ffe52b80;
    background: #ffffff09;
    box-shadow: 0 0 0 3px #ffe52b10;
}

.track-form .field-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #8b8790;
    margin: 0 14px 0 10px;
}

.track-form input {
    font: inherit;
    font-size: .95rem;
    color: var(--text);
    background: none;
    border: 0;
    outline: none;
    width: 100%;
    height: 100%;
    padding: 0 16px 0 0;
}

.track-form input::placeholder {
    color: #76717d
}

.track-submit-btn {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    padding: 15px 24px;
    font-size: 1rem;
}

.track-help {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    position: relative;
}

.track-help p {
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.8;
    margin-bottom: 8px;
}

.track-help a {
    color: var(--gold);
    font-size: .82rem;
    font-weight: 650;
    text-decoration: none;
    transition: .2s;
}

.track-help a:hover {
    text-decoration: underline;
}

/* نتیجه */
.track-result {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.track-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px 32px;
    flex-wrap: wrap;
}

.track-label {
    display: block;
    color: var(--muted);
    font-size: .82rem;
    margin-bottom: 4px;
}

.track-number {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--gold);
    font-family: monospace;
    letter-spacing: 2px;
    margin-bottom: 4px;
    line-height: 1.2;
}

.track-date {
    color: var(--muted);
    font-size: .85rem;
}

.track-status {
    padding: 10px 24px;
    border-radius: 14px;
    font-size: .9rem;
    font-weight: 800;
    white-space: nowrap;
}

.track-status.status-pending {
    background: #fbbf2420;
    color: #fbbf24;
    border: 1px solid #fbbf2440;
}

.track-status.status-paid {
    background: #4ade8020;
    color: #4ade80;
    border: 1px solid #4ade8040;
}

.track-status.status-processing {
    background: #60a5fa20;
    color: #60a5fa;
    border: 1px solid #60a5fa40;
}

.track-status.status-shipped {
    background: #a78bfa20;
    color: #a78bfa;
    border: 1px solid #a78bfa40;
}

.track-status.status-delivered {
    background: #22c55e20;
    color: #22c55e;
    border: 1px solid #22c55e40;
}

.track-status.status-cancelled {
    background: #ef444420;
    color: #ef4444;
    border: 1px solid #ef444440;
}

/* تایم‌لاین */
.track-timeline {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px;
}

.timeline-track {
    display: flex;
    justify-content: space-between;
    position: relative;
    gap: 10px;
}

.timeline-track:before {
    content: '';
    position: absolute;
    top: 26px;
    right: 5%;
    left: 5%;
    height: 2px;
    background: #ffffff10;
    z-index: 0;
}

.timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    position: relative;
    z-index: 1;
    min-width: 0;
}

.timeline-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #0e0c0e;
    border: 2px solid #ffffff15;
    display: grid;
    place-items: center;
    color: #76717d;
    margin-bottom: 12px;
    transition: .3s;
    position: relative;
}

.timeline-icon svg {
    width: 22px;
    height: 22px;
}

.timeline-step.done .timeline-icon {
    background: linear-gradient(135deg, #fff04b, #ffdf08);
    border-color: #fff18b;
    color: #2c260d;
    box-shadow: 0 8px 24px #ffdc0040;
}

.timeline-step.current .timeline-icon {
    background: #ffe52b15;
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 0 4px #ffe52b20;
    animation: pulseStep 2s ease-in-out infinite;
}

@keyframes pulseStep {

    0%,
    100% {
        box-shadow: 0 0 0 4px #ffe52b20
    }

    50% {
        box-shadow: 0 0 0 8px #ffe52b10
    }
}

.timeline-content {
    min-width: 0;
}

.timeline-content h4 {
    font-size: .9rem;
    font-weight: 750;
    color: var(--muted);
    margin-bottom: 4px;
    white-space: nowrap;
}

.timeline-step.done .timeline-content h4,
.timeline-step.current .timeline-content h4 {
    color: var(--text);
}

.timeline-content p {
    font-size: .75rem;
    color: var(--muted);
    line-height: 1.5;
}

/* اطلاعات */
.track-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.track-info-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
}

.track-info-box h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem;
    font-weight: 800;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.track-info-box h4 svg {
    width: 18px;
    height: 18px;
    color: var(--gold);
}

.info-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 10px;
    font-size: .88rem;
}

.info-row span {
    color: var(--muted)
}

.info-row strong {
    color: var(--text);
    font-weight: 650;
    word-break: break-word;
}

/* آیتم‌ها */
.track-items-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px;
}

.track-items-box h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.track-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.track-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    background: #ffffff05;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.track-item-img {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background: #0a0a0c;
    display: grid;
    place-items: center;
}

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

.track-item-info {
    min-width: 0
}

.track-item-info h4 {
    font-size: .92rem;
    font-weight: 750;
    margin-bottom: 6px;
    line-height: 1.5;
}

.track-item-attrs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: .78rem;
    color: var(--muted);
}

.track-item-price {
    color: var(--gold);
    font-weight: 900;
    font-size: .95rem;
    white-space: nowrap;
}

.track-item-price span {
    font-size: .72rem;
    color: var(--muted);
    font-weight: 500;
}

/* خلاصه */
.track-summary-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px;
}

.track-summary-box h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.track-summary-box .summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: .9rem;
}

.track-summary-box .summary-row span {
    color: var(--muted)
}

.track-summary-box .summary-row strong {
    color: var(--text);
    font-weight: 700
}

.track-summary-box .summary-divider {
    height: 1px;
    background: var(--border);
    margin: 16px 0;
}

.track-summary-box .summary-final span {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
}

.track-summary-box .summary-final-price {
    color: var(--gold) !important;
    font-size: 1.15rem !important;
    font-weight: 900 !important;
}

/* دکمه‌ها */
.track-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 10px;
}

/* ریسپانسیو */
@media(max-width:700px) {
    .track-form-box {
        padding: 32px 22px;
        border-radius: 20px;
    }

    .track-form-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 18px;
    }

    .track-form-icon svg {
        width: 28px;
        height: 28px;
    }

    .track-form-box h2 {
        font-size: 1.15rem
    }

    .track-header {
        padding: 20px 22px;
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }

    .track-number {
        font-size: 1.2rem
    }

    .track-timeline {
        padding: 22px 14px
    }

    .timeline-track {
        flex-direction: column;
        gap: 20px;
    }

    .timeline-track:before {
        display: none;
    }

    .timeline-step {
        flex-direction: row;
        align-items: center;
        text-align: right;
        gap: 14px;
        width: 100%;
    }

    .timeline-icon {
        margin-bottom: 0;
        flex-shrink: 0;
        width: 46px;
        height: 46px;
    }

    .timeline-icon svg {
        width: 20px;
        height: 20px
    }

    .timeline-content h4 {
        white-space: normal
    }

    .track-info-grid {
        grid-template-columns: 1fr
    }

    .track-item {
        grid-template-columns: 54px 1fr;
        gap: 10px;
    }

    .track-item-img {
        width: 54px;
        height: 54px
    }

    .track-item-price {
        grid-column: 1/-1;
        text-align: left;
        padding-top: 8px;
        border-top: 1px solid #ffffff10;
    }

    .track-actions {
        flex-direction: column-reverse;
    }

    .track-actions a {
        width: 100%;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════
   SEARCH
   ═══════════════════════════════════════ */

/* نوار جستجو تو هدر */
.header-search {
    position: relative;
    flex: 1;
    max-width: 400px;
    margin: 0 20px;
}

.header-search-form {
    display: flex;
    align-items: center;
    background: #ffffff06;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0 14px;
    height: 42px;
    transition: .2s;
}

.header-search-form:focus-within {
    border-color: #ffe52b60;
    background: #ffffff09;
    box-shadow: 0 0 0 3px #ffe52b10;
}

.header-search .search-icon {
    width: 18px;
    height: 18px;
    color: var(--muted);
    flex-shrink: 0;
}

.header-search input {
    font: inherit;
    font-size: .88rem;
    color: var(--text);
    background: none;
    border: 0;
    outline: none;
    width: 100%;
    padding: 0 10px;
    height: 100%;
}

.header-search input::placeholder {
    color: #76717d;
    font-size: .85rem;
}

.header-search .search-clear {
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    padding: 4px;
    display: none;
    transition: .2s;
}

.header-search .search-clear:hover {
    color: var(--gold)
}

.header-search .search-clear svg {
    width: 14px;
    height: 14px
}

.header-search-form.has-value .search-clear {
    display: grid;
    place-items: center
}

/* پیشنهادهای زنده */
.search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #0e0c0e, #07060a);
    border: 1px solid #ffe52b30;
    border-radius: 14px;
    box-shadow: 0 20px 50px #00000090;
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: .25s;
    overflow: hidden;
    max-height: 400px;
    overflow-y: auto;
}

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

.search-suggestions-list {
    padding: 8px;
}

.search-suggestion {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    text-decoration: none;
    border-radius: 10px;
    transition: .2s;
}

.search-suggestion:hover {
    background: #ffe52b08;
}

.search-suggestion-img {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff05;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

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

.search-suggestion-img svg {
    width: 20px;
    height: 20px;
    color: #ffe52b40;
}

.search-suggestion-info {
    flex: 1;
    min-width: 0;
}

.search-suggestion-info h4 {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 3px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-suggestion-info span {
    font-size: .75rem;
    color: var(--gold);
    font-weight: 650;
}

.search-suggestion-type {
    font-size: .7rem;
    color: var(--muted);
    background: #ffffff08;
    padding: 3px 8px;
    border-radius: 8px;
    white-space: nowrap;
}

.search-suggestion.view-all {
    background: linear-gradient(135deg, #ffe52b15, #ffb70008);
    color: var(--gold);
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    border: 1px solid #ffe52b30;
    margin-top: 4px;
}

.search-suggestion.view-all:hover {
    background: linear-gradient(135deg, #ffe52b20, #ffb70010);
}

.search-suggestion.view-all svg {
    width: 16px;
    height: 16px;
}

.search-suggestions-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--muted);
    font-size: .85rem;
}

.search-suggestions-loading {
    padding: 30px 20px;
    display: grid;
    place-items: center;
}

.search-spinner {
    width: 30px;
    height: 30px;
    border: 2px solid #ffffff15;
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* دکمه جستجوی موبایل */
.search-mobile-btn {
    display: none;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    transition: .2s;
    align-items: center;
    justify-content: center;
}

.search-mobile-btn:hover {
    border-color: #ffe52b60;
    color: var(--gold);
}

.search-mobile-btn svg {
    width: 18px;
    height: 18px
}

/* صفحه جستجو */
.search-empty-form {
    max-width: 640px;
    margin: 0 auto 40px;
    text-align: center;
}

.search-main-form {
    display: flex;
    gap: 8px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 8px;
    transition: .2s;
    margin-bottom: 20px;
}

.search-main-form:focus-within {
    border-color: #ffe52b60;
    box-shadow: 0 0 0 3px #ffe52b10;
}

.search-main-form .search-icon {
    width: 22px;
    height: 22px;
    color: var(--muted);
    align-self: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.search-main-form input {
    flex: 1;
    font: inherit;
    font-size: .98rem;
    color: var(--text);
    background: none;
    border: 0;
    outline: none;
    padding: 12px 0;
}

.search-main-form input::placeholder {
    color: #76717d
}

.search-main-form button {
    padding: 12px 26px;
    font-size: .92rem;
}

.search-suggestions-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-size: .85rem;
    color: var(--muted);
}

.search-suggestions-tags a {
    color: var(--gold);
    background: #ffe52b10;
    padding: 5px 14px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 650;
    transition: .2s;
    font-size: .83rem;
}

.search-suggestions-tags a:hover {
    background: #ffe52b20;
    transform: translateY(-2px);
}

/* فیلتر */
.search-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 36px;
    padding: 6px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.search-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 650;
    padding: 9px 18px;
    border-radius: 11px;
    transition: .2s;
    white-space: nowrap;
}

.search-filter:hover {
    color: var(--text);
    background: #ffffff05;
}

.search-filter.active {
    background: linear-gradient(135deg, #ffe52b20, #ffb70010);
    color: var(--gold);
    box-shadow: inset 0 0 0 1px #ffe52b40;
}

.search-filter span {
    background: #ffffff10;
    font-size: .72rem;
    padding: 2px 8px;
    border-radius: 20px;
    color: inherit;
}

.search-filter.active span {
    background: #ffe52b30;
}

/* بخش‌ها */
.search-section {
    margin-bottom: 50px;
}

.search-section:last-child {
    margin-bottom: 0
}

.search-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.search-section-title svg {
    width: 22px;
    height: 22px;
    color: var(--gold);
}

.search-section-title span {
    background: #ffe52b15;
    color: var(--gold);
    font-size: .75rem;
    padding: 3px 12px;
    border-radius: 20px;
    font-weight: 700;
    margin-right: auto;
}

/* دسته‌بندی‌ها */
.search-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.search-category {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    transition: .25s;
}

.search-category:hover {
    border-color: #ffe52b40;
    background: #ffe52b05;
    transform: translateY(-2px);
}

.search-category-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #ffe52b20, #ffb70010);
    border: 1px solid #ffe52b40;
    color: var(--gold);
}

.search-category-icon svg {
    width: 20px;
    height: 20px
}

.search-category-info {
    flex: 1;
    min-width: 0
}

.search-category-info h4 {
    font-size: .95rem;
    font-weight: 750;
    color: var(--text);
    margin-bottom: 3px;
}

.search-category-info span {
    font-size: .78rem;
    color: var(--gold);
    font-weight: 650;
}

.search-category-arrow {
    width: 16px;
    height: 16px;
    color: var(--muted);
    flex-shrink: 0;
}

/* مقالات */
.search-posts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-post {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    transition: .25s;
}

.search-post:hover {
    border-color: #ffe52b40;
    background: #ffe52b05;
    transform: translateX(-3px);
}

.search-post-img {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    background: #0a0a0c;
    display: grid;
    place-items: center;
}

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

.search-post-info {
    min-width: 0
}

.search-post-cat {
    display: inline-block;
    color: var(--gold);
    font-size: .72rem;
    font-weight: 700;
    background: #ffe52b15;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 6px;
}

.search-post-info h4 {
    font-size: .95rem;
    font-weight: 750;
    color: var(--text);
    margin-bottom: 6px;
    line-height: 1.5;
    transition: .2s;
}

.search-post:hover .search-post-info h4 {
    color: var(--gold)
}

.search-post-info p {
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-post-arrow {
    width: 18px;
    height: 18px;
    color: var(--muted);
    transform: rotate(90deg);
}

/* نتیجه‌ای یافت نشد */
.search-no-results {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    background: var(--card);
    border: 1px dashed var(--border);
    border-radius: 24px;
    padding: 60px 40px;
}

.search-no-results-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 24px;
    display: grid;
    place-items: center;
    background: #ffe52b10;
    border: 1px solid #ffe52b30;
    border-radius: 50%;
    color: var(--gold);
}

.search-no-results-icon svg {
    width: 42px;
    height: 42px
}

.search-no-results h2 {
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 10px;
}

.search-no-results>p {
    color: var(--muted);
    font-size: .98rem;
    margin-bottom: 24px;
}

.search-no-results>p strong {
    color: var(--gold);
}

.search-no-results-tips {
    background: #ffffff05;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 22px;
    text-align: right;
    margin-bottom: 28px;
}

.search-no-results-tips h4 {
    color: var(--text);
    font-size: .9rem;
    font-weight: 750;
    margin-bottom: 10px;
}

.search-no-results-tips ul {
    padding-right: 20px;
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.9;
}

.search-no-results-tips li {
    margin-bottom: 4px;
}

/* ریسپانسیو */
@media(max-width:991px) {
    .header-search {
        display: none;
    }

    .search-mobile-btn {
        display: flex;
    }
}

@media(max-width:600px) {
    .search-main-form {
        flex-direction: column;
        padding: 12px;
    }

    .search-main-form .search-icon {
        display: none
    }

    .search-main-form input {
        padding: 12px 14px;
        background: #ffffff05;
        border: 1px solid var(--border);
        border-radius: 11px;
        text-align: center;
    }

    .search-main-form button {
        justify-content: center
    }

    .search-filters {
        gap: 6px;
        padding: 5px;
    }

    .search-filter {
        font-size: .78rem;
        padding: 7px 12px;
    }

    .search-filter span {
        font-size: .68rem;
        padding: 2px 6px
    }

    .search-section-title {
        font-size: 1rem
    }

    .search-categories {
        grid-template-columns: 1fr
    }

    .search-post {
        grid-template-columns: 60px 1fr;
        gap: 12px;
    }

    .search-post-img {
        width: 60px;
        height: 60px
    }

    .search-post-arrow {
        display: none
    }

    .search-no-results {
        padding: 40px 22px
    }
}

/* ═══════════════════════════════════════
   MOBILE SEARCH MODAL
   ═══════════════════════════════════════ */
.mobile-search-modal {
    position: fixed;
    inset: 0;
    background: #050405;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: .35s cubic-bezier(.34, 1.2, .64, 1);
}

.mobile-search-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-search-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #050405;
    border-bottom: 1px solid #ffffff15;
    position: sticky;
    top: 0;
    z-index: 2;
}

.mobile-search-back {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #ffffff08;
    border: 1px solid #ffffff15;
    color: var(--text);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .2s;
}

.mobile-search-back:hover {
    background: #ffe52b10;
    border-color: #ffe52b40;
    color: var(--gold);
}

.mobile-search-back svg {
    width: 20px;
    height: 20px;
}

.mobile-search-form {
    flex: 1;
    display: flex;
    align-items: center;
    background: #ffffff08;
    border: 1px solid #ffffff15;
    border-radius: 12px;
    padding: 0 14px;
    height: 44px;
    transition: .2s;
}

.mobile-search-form:focus-within {
    border-color: #ffe52b60;
    background: #ffffff0a;
    box-shadow: 0 0 0 3px #ffe52b10;
}

.mobile-search-form .search-icon {
    width: 18px;
    height: 18px;
    color: var(--muted);
    flex-shrink: 0;
}

.mobile-search-form input {
    flex: 1;
    font: inherit;
    font-size: .92rem;
    color: var(--text);
    background: none;
    border: 0;
    outline: none;
    padding: 0 10px;
    height: 100%;
}

.mobile-search-form input::placeholder {
    color: #76717d;
    font-size: .85rem;
}

.mobile-search-form .search-clear {
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    padding: 6px;
    display: none;
    transition: .2s;
}

.mobile-search-form .search-clear:hover {
    color: var(--gold)
}

.mobile-search-form .search-clear svg {
    width: 14px;
    height: 14px
}

.mobile-search-form.has-value .search-clear {
    display: grid;
    place-items: center
}

.mobile-search-suggestions {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    position: relative;
}

.mobile-search-suggestions .search-suggestions-list {
    padding: 0;
}

.mobile-search-suggestions .search-suggestion {
    padding: 14px 12px;
    border-radius: 12px;
}

.mobile-search-suggestions .search-suggestion-img {
    width: 50px;
    height: 50px;
}

.mobile-search-suggestions .search-suggestions-empty {
    padding: 60px 20px;
    font-size: .95rem;
}

.mobile-search-suggestions .search-suggestions-loading {
    padding: 60px 20px;
}

@media(max-width:991px) {

    /* مخفی کردن نوار دسکتاپ */
    .header-search {
        display: none !important;
    }

    /* نمایش دکمه موبایل */
    .search-mobile-btn {
        display: flex;
    }
}

/* ═══════════════════════════════════════
   PRODUCT REVIEWS
   ═══════════════════════════════════════ */
.product-reviews-section {
    padding-top: 60px;
    margin-top: 60px;
    border-top: 1px solid var(--border);
}

.reviews-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 36px;
    align-items: start;
}

/* خلاصه امتیازات */
.reviews-summary {
    position: sticky;
    top: 100px;
}

.reviews-summary-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px 22px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
}

.reviews-summary-box:before {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at 50% 0%, #ffdf3815, transparent 60%);
    pointer-events: none;
}

.rating-big {
    text-align: center;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    position: relative;
}

.rating-big strong {
    display: block;
    font-size: 3.2rem;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
    letter-spacing: -2px;
    margin-bottom: 12px;
}

.rating-stars-big {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-bottom: 10px;
}

.rating-stars-big .star {
    width: 24px;
    height: 24px;
    color: #ffffff20;
    fill: none;
    stroke: currentColor;
}

.rating-stars-big .star.filled {
    color: var(--gold);
    fill: var(--gold);
}

.rating-big span {
    font-size: .82rem;
    color: var(--muted);
}

.rating-distribution {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 22px;
    position: relative;
}

.distribution-row {
    display: grid;
    grid-template-columns: 44px 1fr 32px;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 8px;
    text-decoration: none;
    transition: .2s;
    cursor: pointer;
}

.distribution-row:hover {
    background: #ffe52b05;
}

.dist-star {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 650;
    text-align: left;
    direction: ltr;
}

.dist-bar {
    height: 6px;
    background: #ffffff10;
    border-radius: 4px;
    overflow: hidden;
}

.dist-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #fff04b, #ffdf08);
    border-radius: 4px;
    transition: width .5s;
}

.dist-count {
    color: var(--muted);
    font-size: .78rem;
    text-align: center;
}

.reviews-already-submitted {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    color: #4ade80;
    font-size: .85rem;
    font-weight: 650;
    padding: 12px;
    background: #4ade8010;
    border: 1px solid #4ade8040;
    border-radius: 12px;
    position: relative;
}

.reviews-already-submitted svg {
    width: 16px;
    height: 16px;
}

.write-review-btn {
    width: 100%;
    justify-content: center;
    position: relative;
}

/* لیست نظرات */
.reviews-main {
    min-width: 0
}

.reviews-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    padding: 14px 18px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.reviews-sort {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reviews-sort span {
    color: var(--muted);
    font-size: .85rem;
}

.reviews-sort select {
    font: inherit;
    font-size: .85rem;
    color: var(--text);
    background: #ffffff05;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    outline: none;
    transition: .2s;
}

.reviews-sort select:focus {
    border-color: #ffe52b60;
}

.reviews-sort select option {
    background: #0e0c0e;
    color: var(--text);
}

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

/* آیتم نظر */
.review-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    transition: .2s;
}

.review-item:hover {
    border-color: #ffe52b30;
}

.review-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.review-user {
    display: flex;
    gap: 12px;
    align-items: center;
}

.review-avatar {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff04b, #ffdf08);
    color: #2c260d;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    font-weight: 900;
}

.review-user-info {
    min-width: 0
}

.review-user-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    font-weight: 750;
    color: var(--text);
    margin-bottom: 3px;
    flex-wrap: wrap;
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #60a5fa15;
    color: #60a5fa;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
}

.verified-badge svg {
    width: 11px;
    height: 11px
}

.review-date {
    color: var(--muted);
    font-size: .78rem;
}

.review-rating {
    display: flex;
    gap: 3px;
}

.review-rating .star {
    width: 16px;
    height: 16px;
    color: #ffffff20;
    fill: none;
    stroke: currentColor;
}

.review-rating .star.filled {
    color: var(--gold);
    fill: var(--gold);
}

.review-title {
    font-size: .98rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 10px;
    line-height: 1.5;
}

.review-comment {
    color: var(--muted);
    font-size: .92rem;
    line-height: 2;
    margin-bottom: 14px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.review-pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
    padding: 14px;
    background: #ffffff03;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.review-pros strong {
    display: block;
    color: #4ade80;
    font-size: .85rem;
    font-weight: 750;
    margin-bottom: 8px;
}

.review-cons strong {
    display: block;
    color: #f87171;
    font-size: .85rem;
    font-weight: 750;
    margin-bottom: 8px;
}

.review-pros ul,
.review-cons ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.review-pros li,
.review-cons li {
    font-size: .83rem;
    color: var(--muted);
    line-height: 1.6;
    padding-right: 14px;
    position: relative;
}

.review-pros li:before {
    content: '+';
    position: absolute;
    right: 0;
    color: #4ade80;
    font-weight: 900;
}

.review-cons li:before {
    content: '-';
    position: absolute;
    right: 0;
    color: #f87171;
    font-weight: 900;
}

.review-admin-reply {
    background: linear-gradient(135deg, #ffe52b08, #ffb70003);
    border-right: 3px solid var(--gold);
    border-radius: 0 12px 12px 0;
    padding: 14px 18px;
    margin-bottom: 14px;
}

.admin-reply-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gold);
    font-size: .82rem;
    font-weight: 750;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.admin-reply-head svg {
    width: 14px;
    height: 14px;
}

.admin-reply-head span {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 500;
    margin-right: auto;
}

.review-admin-reply p {
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.9;
}

.review-actions {
    display: flex;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.review-helpful-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #ffffff05;
    border: 1px solid var(--border);
    color: var(--muted);
    font: inherit;
    font-size: .82rem;
    font-weight: 650;
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: .2s;
}

.review-helpful-btn:hover {
    border-color: #4ade8060;
    color: #4ade80;
    background: #4ade8010;
}

.review-helpful-btn.voted {
    border-color: #4ade8060;
    color: #4ade80;
    background: #4ade8010;
    cursor: default;
}

.review-helpful-btn svg {
    width: 15px;
    height: 15px;
}

.review-helpful-btn strong {
    color: inherit;
    font-weight: 800;
}

/* نظرات خالی */
.reviews-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--card);
    border: 1px dashed var(--border);
    border-radius: 20px;
    color: var(--muted);
}

.reviews-empty svg {
    width: 56px;
    height: 56px;
    color: #ffe52b40;
    margin-bottom: 16px;
}

.reviews-empty p {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}

.reviews-empty span {
    font-size: .88rem;
}

/* دکمه نظرات بیشتر */
.reviews-pagination {
    text-align: center;
    margin-top: 24px;
}

.reviews-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: .9rem;
    font-weight: 650;
    padding: 13px 26px;
    border-radius: 12px;
    text-decoration: none;
    transition: .2s;
}

.reviews-more-btn:hover {
    border-color: #ffe52b60;
    color: var(--gold);
    background: #ffe52b05;
    transform: translateY(-2px);
}

.reviews-more-btn svg {
    width: 16px;
    height: 16px;
    transform: rotate(90deg);
}

/* ═══ MODAL نظرات ═══ */
.review-modal-box {
    max-width: 560px;
    padding: 32px 28px;
}

.review-modal-title {
    font-size: 1.3rem;
    font-weight: 900;
    margin-bottom: 6px;
    color: var(--text);
    text-align: center;
}

.review-modal-product {
    color: var(--muted);
    font-size: .88rem;
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.review-form .review-form-field {
    margin-bottom: 18px;
}

.review-form .review-form-field label {
    display: block;
    color: #c9c5ce;
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.review-form .req {
    color: #ff6b6b
}

.review-form .input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #ffffff22;
    border-radius: 12px;
    background: #ffffff06;
    transition: .2s;
}

.review-form .input-wrap:focus-within {
    border-color: #ffe52b80;
    background: #ffffff09;
    box-shadow: 0 0 0 3px #ffe52b10;
}

.review-form input,
.review-form textarea {
    font: inherit;
    font-size: .92rem;
    color: var(--text);
    background: none;
    border: 0;
    outline: none;
    width: 100%;
    padding: 12px 16px;
    resize: vertical;
    font-family: inherit;
}

.review-form textarea {
    min-height: 100px;
    line-height: 1.8
}

.review-form input::placeholder,
.review-form textarea::placeholder {
    color: #76717d
}

.review-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ورودی امتیاز */
.rating-input {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 14px;
    background: #ffffff05;
    border: 1px solid var(--border);
    border-radius: 14px;
    direction: ltr;
}

.rating-star {
    background: none;
    border: 0;
    padding: 4px;
    cursor: pointer;
    transition: .2s;
    line-height: 0;
}

.rating-star svg {
    width: 34px;
    height: 34px;
    color: #ffffff20;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    transition: .2s;
}

.rating-star:hover svg,
.rating-star.active svg {
    color: var(--gold);
    fill: var(--gold);
    transform: scale(1.1);
}

.review-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.review-form-actions .btn-primary {
    flex: 1;
    justify-content: center;
}

.review-form-actions button:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* ریسپانسیو */
@media(max-width:991px) {
    .reviews-layout {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .reviews-summary {
        position: static
    }
}

@media(max-width:600px) {
    .product-reviews-section {
        padding-top: 40px;
        margin-top: 40px
    }

    .reviews-summary-box {
        padding: 22px 18px
    }

    .rating-big strong {
        font-size: 2.5rem
    }

    .rating-stars-big .star {
        width: 20px;
        height: 20px
    }

    .reviews-toolbar {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .reviews-sort {
        justify-content: space-between;
    }

    .review-item {
        padding: 18px 16px;
        border-radius: 14px
    }

    .review-head {
        flex-direction: column;
        gap: 10px
    }

    .review-rating {
        align-self: flex-start
    }

    .review-pros-cons {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .review-avatar {
        width: 40px;
        height: 40px;
        font-size: 1rem
    }

    .review-modal-box {
        padding: 24px 18px
    }

    .review-form-row {
        grid-template-columns: 1fr
    }

    .rating-star svg {
        width: 28px;
        height: 28px
    }

    .review-form-actions {
        flex-direction: column-reverse
    }

    .review-form-actions button {
        width: 100%
    }
}

/* ═══════════════════════════════════════
   WISHLIST
   ═══════════════════════════════════════ */

/* دکمه قلب رو کارت محصول */
.product-img-a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.product-img-wrap .wishlist-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #050405cc;
    border: 1px solid #ffffff20;
    color: #ffffff90;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .2s;
    z-index: 3;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.product-img-wrap .wishlist-btn:hover {
    background: #ff3b3b15;
    border-color: #ff3b3b60;
    color: #ff6b6b;
    transform: scale(1.1);
}

.product-img-wrap .wishlist-btn svg {
    width: 18px;
    height: 18px;
    transition: .2s;
}

.product-img-wrap .wishlist-btn.active {
    background: #ff3b3b20;
    border-color: #ff6b6b;
    color: #ff6b6b;
}

.product-img-wrap .wishlist-btn.active svg {
    fill: currentColor;
    animation: heartPop .4s ease;
}

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

    40% {
        transform: scale(1.3)
    }

    70% {
        transform: scale(.95)
    }

    100% {
        transform: scale(1)
    }
}

/* دکمه wishlist تو هدر */
.wishlist-header-btn {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    display: grid;
    place-items: center;
    transition: .2s;
    text-decoration: none;
}

.wishlist-header-btn:hover {
    border-color: #ff6b6b60;
    color: #ff6b6b;
}

.wishlist-header-btn svg {
    width: 18px;
    height: 18px;
}

.wishlist-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    background: #ff6b6b;
    color: #fff;
    font-size: .7rem;
    font-weight: 900;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    display: grid;
    place-items: center;
}

/* صفحه wishlist */
.wishlist-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    flex-wrap: wrap;
    gap: 12px;
}

.wishlist-count {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: .92rem;
    font-weight: 700;
}

.wishlist-count svg {
    width: 18px;
    height: 18px;
    color: #ff6b6b;
    fill: currentColor;
}

.wishlist-toolbar .btn-ghost {
    padding: 10px 20px;
    font-size: .88rem;
}

/* لیست خالی */
.wishlist-empty {
    text-align: center;
    padding: 80px 20px;
    background: var(--card);
    border: 1px dashed var(--border);
    border-radius: 24px;
}

.wishlist-empty-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
    display: grid;
    place-items: center;
    background: #ff3b3b10;
    border: 1px solid #ff3b3b30;
    border-radius: 50%;
    color: #ff6b6b;
    animation: heartPulse 2s ease-in-out infinite;
}

@keyframes heartPulse {

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

    50% {
        transform: scale(1.08)
    }
}

.wishlist-empty-icon svg {
    width: 44px;
    height: 44px;
    fill: currentColor;
}

.wishlist-empty h2 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--text);
}

.wishlist-empty p {
    color: var(--muted);
    font-size: .95rem;
    margin-bottom: 26px;
}

/* کارت wishlist در حال حذف */
.wishlist-card.removing {
    opacity: 0;
    transform: scale(.9);
    transition: .3s;
}

/* ریسپانسیو */
@media(max-width:600px) {
    .product-img-wrap .wishlist-btn {
        width: 34px;
        height: 34px;
        top: 10px;
        left: 10px;
    }

    .product-img-wrap .wishlist-btn svg {
        width: 16px;
        height: 16px;
    }

    .wishlist-header-btn {
        width: 36px;
        height: 36px;
    }

    .wishlist-header-btn svg {
        width: 16px;
        height: 16px;
    }

    .wishlist-empty {
        padding: 60px 20px;
    }

    .wishlist-empty-icon {
        width: 80px;
        height: 80px;
    }

    .wishlist-empty-icon svg {
        width: 36px;
        height: 36px;
    }

    .wishlist-toolbar {
        padding: 14px 16px;
    }

    .wishlist-toolbar .btn-ghost {
        width: 100%;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════
   PERFORMANCE
   ═══════════════════════════════════════ */

/* Lazy loading images */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s;
}

img[loading="lazy"].loaded,
img[loading="lazy"][src] {
    opacity: 1;
}

/* بهبود render */
.product-card,
.blog-card,
.category-card {
    will-change: transform;
    transform: translateZ(0);
}

/* اسکرول نرم */
html {
    scroll-behavior: smooth;
}

/* جلوگیری از پرش layout */
.product-img-wrap,
.blog-card-img,
.category-img-wrap {
    background: linear-gradient(135deg, #0a0a0c, #131316);
}

/* GPU acceleration */
.modal-overlay,
.user-dropdown-menu,
.search-suggestions,
.mobile-search-modal {
    transform: translateZ(0);
    backface-visibility: hidden;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.logo-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffe52b30;
    transition: .3s;
}

.logo:hover .logo-img {
    transform: scale(1.05);
    border-color: #ffe52b;
}

.logo-text {
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -.5px;
    color: #fff;
}

.logo-text span {
    color: #ffe52b;
}

@media(max-width:600px) {
    .logo-img {
        width: 36px;
        height: 36px;
    }

    .logo-text {
        font-size: 1.2rem;
    }
}

/* ═══════════════════════════════════════
   FOOTER BRAND
   ═══════════════════════════════════════ */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-logo {
    display: inline-block;
    text-decoration: none;
    align-self: flex-start;
    transition: .3s;
}

.footer-logo:hover {
    transform: translateY(-2px);
}

.footer-logo-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 8px 24px rgba(255, 60, 60, 0.25);
    border: 2px solid #ffffff15;
    transition: .3s;
}

.footer-logo:hover .footer-logo-img {
    box-shadow: 0 12px 32px rgba(255, 60, 60, 0.4);
    border-color: #ffe52b40;
}

.footer-brand-name {
    font-size: 1.4rem;
    font-weight: 900;
    color: #fff;
    margin: 0;
    letter-spacing: -0.5px;
}

.footer-brand-name span {
    color: var(--gold);
}

.footer-brand-desc {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.9;
    margin: 0;
    max-width: 300px;
}

/* ریسپانسیو */
@media (max-width: 600px) {
    .footer-logo-img {
        width: 64px;
        height: 64px;
    }

    .footer-brand-name {
        font-size: 1.2rem;
    }

    .footer-brand-desc {
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════
   FOOTER SOCIALS
   ═══════════════════════════════════════ */
.footer-socials {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #ffffff10;
}

.footer-socials a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: #ffffff06;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--gold);
    text-decoration: none;
    transition: .25s;
    position: relative;
    overflow: hidden;
}
.footer-socials a,
.socials-row a {
    isolation: isolate;   /* اختیاری، برای اطمینان */
}
.footer-socials svg,
.socials-row svg {
    position: relative;
    z-index: 1;
    pointer-events: none;  /* کلیک روی svg به لینک پدر برسه */
}
.footer-socials a:before,
.socials-row a:before {
    pointer-events: none;
}
.footer-socials a:before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, #9b1c2e25, transparent 70%);
    opacity: 0;
    transition: .3s;
    pointer-events: none;
}

.footer-socials a:hover {
    border-color: #ffe52b70;
    background: #ffe52b10;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px #ffe52b25;
}

.footer-socials a:hover:before {
    opacity: 1;
}

.footer-socials svg {
    width: 20px;
    height: 20px;
    position: relative;
    z-index: 1;
    transition: .3s;
}

.footer-socials a:hover svg {
    transform: scale(1.12);
    filter: drop-shadow(0 0 6px #ffe52b80);
}

/* ریسپانسیو */
@media (max-width: 600px) {
    .footer-socials {
        margin-top: 14px;
        padding-top: 14px;
    }

    .footer-socials a {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .footer-socials svg {
        width: 18px;
        height: 18px;
    }
}

/* ═══════════════════════════════════════
   ADDRESSES
   ═══════════════════════════════════════ */

/* صفحات پروفایل */
.addresses-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    flex-wrap: wrap;
    gap: 12px;
}

.addresses-count {
    color: var(--muted);
    font-size: .9rem;
    margin: 0;
}

.addresses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.address-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
    transition: .25s;
}

.address-card:hover {
    border-color: #ffe52b40;
    transform: translateY(-2px);
}

.address-card.is-default {
    border-color: #ffe52b60;
    background: linear-gradient(135deg, #ffe52b08, #ffb70002);
}

.address-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    gap: 10px;
}

.address-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: .95rem;
}

.address-title svg {
    width: 18px;
    height: 18px;
    color: var(--gold);
}

.address-title strong {
    font-weight: 750;
}

.address-default-badge {
    background: linear-gradient(135deg, #fff04b, #ffdf08);
    color: #2c260d;
    font-size: .7rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
}

.address-actions {
    display: flex;
    gap: 6px;
}

.address-action-btn {
    width: 32px;
    height: 32px;
    background: #ffffff05;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .2s;
    padding: 0;
}

.address-action-btn svg {
    width: 14px;
    height: 14px;
}

.address-action-btn:hover {
    border-color: #ffe52b40;
    color: var(--gold);
    background: #ffe52b10;
}

.address-delete-btn:hover {
    border-color: #ff3b3b40;
    color: #ff6b6b;
    background: #ff3b3b10;
}

.address-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.address-row {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 10px;
    font-size: .88rem;
}

.address-row span {
    color: var(--muted);
}

.address-row strong {
    color: var(--text);
    font-weight: 650;
    word-break: break-word;
}

.address-card-foot {
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.address-set-default-btn {
    width: 100%;
    padding: 10px;
    background: #ffffff05;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--gold);
    font: inherit;
    font-size: .85rem;
    font-weight: 650;
    cursor: pointer;
    transition: .2s;
}

.address-set-default-btn:hover {
    background: #ffe52b10;
    border-color: #ffe52b40;
}

/* فرم آدرس */
.address-form .field {
    margin-bottom: 18px;
}

.address-form label {
    display: block;
    color: #c9c5ce;
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.address-form .req {
    color: #ff6b6b;
}

.address-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.address-form .input-wrap {
    display: flex;
    border: 1px solid #ffffff22;
    border-radius: 12px;
    background: #ffffff06;
    transition: .2s;
}

.address-form .input-wrap:focus-within {
    border-color: #ffe52b80;
    background: #ffffff09;
    box-shadow: 0 0 0 3px #ffe52b10;
}

.address-form input,
.address-form textarea {
    font: inherit;
    font-size: .95rem;
    color: var(--text);
    background: none;
    border: 0;
    outline: none;
    width: 100%;
    padding: 12px 16px;
    resize: vertical;
    font-family: inherit;
}

.address-form textarea {
    min-height: 80px;
    line-height: 1.8;
}

.address-form input::placeholder,
.address-form textarea::placeholder {
    color: #76717d;
}

.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 12px 16px;
    background: #ffffff05;
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: .2s;
}

.checkbox-label:hover {
    border-color: #ffe52b40;
}

.checkbox-label input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--gold);
    margin: 0;
    padding: 0 !important;
}

.checkbox-label span {
    color: var(--text);
    font-size: .9rem;
    font-weight: 600;
}

/* آدرس‌های ذخیره‌شده تو Checkout */
.saved-addresses-section {
    margin-bottom: 20px;
    padding: 16px;
    background: #ffe52b05;
    border: 1px dashed #ffe52b30;
    border-radius: 14px;
}

.saved-addresses-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--gold);
    margin: 0 0 12px 0;
}

.saved-addresses-title svg {
    width: 16px;
    height: 16px;
}

.saved-addresses-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

.saved-address-btn {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    text-align: right;
    cursor: pointer;
    transition: .2s;
    font: inherit;
    color: var(--text);
}

.saved-address-btn:hover {
    border-color: #ffe52b60;
    background: #ffe52b08;
    transform: translateY(-1px);
}

.saved-addr-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.saved-addr-head strong {
    font-size: .88rem;
    font-weight: 750;
    color: var(--text);
}

.saved-addr-badge {
    background: #ffe52b20;
    color: var(--gold);
    font-size: .65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

.saved-addr-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.saved-addr-body span {
    font-size: .78rem;
    color: var(--muted);
    font-weight: 600;
}

.saved-addr-body small {
    font-size: .75rem;
    color: var(--muted);
    line-height: 1.6;
}

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

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

    .saved-addresses-list {
        grid-template-columns: 1fr;
    }

    .addresses-header {
        flex-direction: column;
        align-items: stretch;
    }

    .addresses-header .btn-primary {
        justify-content: center;
    }
}

/* ═══════════════════════════════════════
   FLOATING CONTACT BUTTON
   ═══════════════════════════════════════ */

.floating-contact {
    position: fixed;
    bottom: 24px;
    left: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none; /* جلوگیری از گرفتن کلیک‌های ناخواسته */
    width: 60px;
}
/* دکمه شناور: فقط خود دکمه کلیک‌پذیر باشه، نه کل wrapper */
.floating-contact {
    pointer-events: none;   /* ← wrapper کلیک رو نمی‌گیره */
    width: 60px;            /* فقط به اندازه دکمه */
    height: auto;
}

.floating-contact > * {
    pointer-events: auto; /* فقط دکمه و منو کلیک‌پذیر باشند */
}

/* منوی بسته (مخفی) اصلاً layout اشغال نکنه */
.floating-menu {
    pointer-events: none;
}

.floating-menu.active {
    pointer-events: auto;
}

.floating-btn {
    pointer-events: auto;
}

/* در موبایل هم ابعاد wrapper رو تنظیم کن */
@media (max-width: 600px) {
    .floating-contact {
        width: 54px;
    }
}


/* دکمه شناور */
.floating-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #b8293d, #7a1524); /* رنگ زرشکی */
    border: 2px solid #c95666;
    color: #ffffff;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 8px 30px #9b1c2e60;
    transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
    position: relative;
}

.floating-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 40px #9b1c2e90;
}

.floating-btn:active {
    transform: scale(0.95);
}

.floating-btn svg {
    width: 26px;
    height: 26px;
    transition: .3s;
    position: absolute;
}

.floating-icon-close {
    opacity: 0;
    transform: rotate(-180deg) scale(0);
}

.floating-btn.active .floating-icon-open {
    opacity: 0;
    transform: rotate(180deg) scale(0);
}

.floating-btn.active .floating-icon-close {
    opacity: 1;
    transform: rotate(0) scale(1);
}


/* پالس */
.floating-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #9b1c2e;
    opacity: 0;
    animation: pulseContact 2.5s ease-out infinite;
    pointer-events: none;
}

@keyframes pulseContact {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.5); opacity: 0; }
}

.floating-btn.active .floating-pulse {
    display: none;
}



/* منو */
.floating-menu {
    position: fixed !important; /* از جریان دکمه خارج شود */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.9) !important; /* وسط چین دقیق */

    width: 320px;
    max-width: calc(100vw - 32px);
    background: linear-gradient(135deg, #ffffff, #faf8f7);
    border: 1px solid #9b1c2e30;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);

    opacity: 0;
    visibility: hidden;
    transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
    z-index: 10000; /* بالاتر از همه چیز */
}

.floating-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1) !important; /* انیمیشن باز شدن */
}
body:has(.floating-menu.active)::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 9998;
    transition: all 0.3s;
}

.floating-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 8px 14px;
    border-bottom: 1px solid #9b1c2e1a;
    margin-bottom: 12px;
}

.floating-menu-header span {
    color: var(--text);
    font-size: .95rem;
    font-weight: 800;
}

.floating-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f8f6f4;
    border: 1px solid #9b1c2e1a;
    color: var(--muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .2s;
}

.floating-close:hover {
    background: #9b1c2e15;
    color: var(--gold);
}

.floating-close svg {
    width: 16px;
    height: 16px;
}

.floating-menu-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* آیتم‌های منو */
.floating-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 14px;
    text-decoration: none;
    transition: .2s;
    background: #f8f6f4;
    border: 1px solid transparent;
}



.floating-item:hover {
    background: #fff;
    border-color: #9b1c2e1a;
    transform: translateX(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.floating-item-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: .3s;
}

.floating-item-icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    stroke: none;
}

.floating-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.floating-item-info strong {
    color: var(--text);
    font-size: .9rem;
    font-weight: 700;
}

.floating-item-info small {
    color: var(--muted);
    font-size: .75rem;
}

/* رنگ‌های آیکون‌ها */
.floating-item.whatsapp .floating-item-icon { background: #25D36620; color: #25D366; }
.floating-item.telegram .floating-item-icon { background: #229ED920; color: #229ED9; }
.floating-item.instagram .floating-item-icon { background: #E1306C20; color: #E1306C; }
.floating-item.phone .floating-item-icon { background: #9b1c2e20; color: var(--gold); }
.floating-item.email .floating-item-icon { background: #60a5fa20; color: #60a5fa; }

/* ریسپانسیو */
@media (max-width: 600px) {
    .floating-contact {
        bottom: 16px;
        left: 12px;
        width: 54px;
    }

    .floating-btn {
        width: 54px;
        height: 54px;
    }

    .floating-btn svg {
        width: 22px;
        height: 22px;
    }

    .floating-menu {
        width: calc(100% - 32px) !important;
        max-width: 340px;
        padding: 12px;
    }


    .floating-item-icon {
        width: 38px;
        height: 38px;
    }

    .floating-item-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* وقتی مودال باز هست، دکمه شناور رو مخفی کن */
body:has(.modal-overlay.active) .floating-contact,
body:has(.mobile-search-modal.active) .floating-contact {
    opacity: 0;
    pointer-events: none;
    transition: .2s;
}

/* ═══════════════════════════════════════
   LOYALTY
   ═══════════════════════════════════════ */

.loyalty-hero {
    background: linear-gradient(135deg, #ffe52b08, #ffb70002);
    border: 1px solid #ffe52b40;
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.loyalty-hero-glow {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #ffe52b30, transparent 70%);
    pointer-events: none;
    filter: blur(40px);
}

.loyalty-hero-content {
    position: relative;
    text-align: center;
}

.loyalty-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 24px;
    border: 1px solid;
    font-size: .9rem;
    font-weight: 750;
    color: var(--text);
    margin-bottom: 20px;
}

.loyalty-tier-badge svg {
    width: 16px;
    height: 16px;
}

.loyalty-points {
    margin-bottom: 24px;
}

.loyalty-points strong {
    display: block;
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
    letter-spacing: -2px;
    margin-bottom: 8px;
    text-shadow: 0 4px 20px #ffe52b40;
}

.loyalty-points span {
    color: var(--muted);
    font-size: .9rem;
}

.loyalty-progress {
    max-width: 400px;
    margin: 0 auto;
}

.loyalty-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: .85rem;
}

.loyalty-progress-header span {
    color: var(--muted);
}

.loyalty-progress-header strong {
    color: var(--gold);
    font-weight: 700;
}

.loyalty-progress-bar {
    height: 10px;
    background: #ffffff10;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.loyalty-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #fff04b, #ffdf08);
    border-radius: 6px;
    transition: width .5s;
    box-shadow: 0 0 10px #ffe52b80;
}

.loyalty-progress-footer {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    color: var(--muted);
}

.loyalty-max-level {
    text-align: center;
    color: var(--gold);
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
}

/* آمار */
.loyalty-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.loyalty-stat {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.loyalty-stat-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #ffe52b20, #ffb70010);
    border: 1px solid #ffe52b40;
    border-radius: 12px;
    color: var(--gold);
}

.loyalty-stat-icon svg {
    width: 22px;
    height: 22px;
}

.loyalty-stat strong {
    display: block;
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: 2px;
}

.loyalty-stat span {
    font-size: .78rem;
    color: var(--muted);
}

/* باکس تبدیل */
.loyalty-redeem-box {
    background: linear-gradient(135deg, #4ade8010, #22c55e05);
    border: 1px solid #4ade8040;
    border-radius: 20px;
    padding: 26px;
    margin-bottom: 24px;
}

.loyalty-redeem-box h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--text);
}

.loyalty-redeem-box p {
    color: var(--muted);
    font-size: .88rem;
    margin-bottom: 18px;
}

.loyalty-redeem-disabled {
    background: #ffffff05;
    border-color: var(--border);
}

.loyalty-hint-small {
    color: var(--muted);
    font-size: .82rem !important;
}

.redeem-form label {
    display: block;
    color: var(--text);
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.redeem-input-row {
    display: flex;
    gap: 10px;
}

.redeem-input-row input {
    flex: 1;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    background: #ffffff08;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    outline: none;
    transition: .2s;
    text-align: center;
}

.redeem-input-row input:focus {
    border-color: #ffe52b60;
    box-shadow: 0 0 0 3px #ffe52b10;
}

.redeem-hint {
    display: block;
    margin-top: 12px;
    color: var(--muted);
    font-size: .82rem;
}

.redeem-hint strong {
    color: #4ade80;
    font-weight: 800;
}

/* راه‌های کسب */
.loyalty-earn-box,
.loyalty-tiers-box,
.loyalty-history-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
}

.loyalty-earn-box h3,
.loyalty-tiers-box h3,
.loyalty-history-box h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.loyalty-earn-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.loyalty-earn-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px;
    background: #ffffff03;
    border-radius: 12px;
}

.earn-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #ffe52b20, #ffb70010);
    border: 1px solid #ffe52b40;
    border-radius: 10px;
    color: var(--gold);
}

.earn-icon svg {
    width: 18px;
    height: 18px;
}

.loyalty-earn-item strong {
    display: block;
    color: var(--text);
    font-size: .9rem;
    font-weight: 750;
    margin-bottom: 4px;
}

.loyalty-earn-item p {
    color: var(--muted);
    font-size: .82rem;
    margin: 0;
    line-height: 1.7;
}

/* سطوح */
.loyalty-tiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.loyalty-tier-card {
    background: #ffffff05;
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 20px 16px;
    text-align: center;
    transition: .25s;
}

.loyalty-tier-card.active {
    background: linear-gradient(135deg, #ffe52b08, #ffb70002);
    box-shadow: 0 0 0 3px #ffe52b20;
    transform: translateY(-2px);
}

.tier-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.tier-icon svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
    stroke: none;
}

.loyalty-tier-card h4 {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.tier-min-points {
    color: var(--muted);
    font-size: .78rem;
    margin: 0 0 8px;
}

.tier-discount {
    color: #4ade80;
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.tier-benefits {
    list-style: none;
    padding: 0;
    text-align: right;
    font-size: .78rem;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tier-benefits li {
    padding-right: 14px;
    position: relative;
}

.tier-benefits li:before {
    content: '✓';
    position: absolute;
    right: 0;
    color: #4ade80;
    font-weight: 900;
}

/* تاریخچه */
.loyalty-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding-left: 6px;
}

.loyalty-history-list::-webkit-scrollbar {
    width: 5px;
}

.loyalty-history-list::-webkit-scrollbar-track {
    background: #ffffff05;
    border-radius: 4px;
}

.loyalty-history-list::-webkit-scrollbar-thumb {
    background: #ffe52b40;
    border-radius: 4px;
}

.loyalty-history-item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: #ffffff03;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: .2s;
}

.loyalty-history-item.positive {
    border-color: #4ade8020;
}

.loyalty-history-item.negative {
    border-color: #ff3b3b20;
}

.loyalty-history-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
}

.loyalty-history-item.positive .loyalty-history-icon {
    background: #4ade8015;
    color: #4ade80;
}

.loyalty-history-item.negative .loyalty-history-icon {
    background: #ff3b3b15;
    color: #ff6b6b;
}

.loyalty-history-icon svg {
    width: 16px;
    height: 16px;
}

.loyalty-history-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.loyalty-history-info strong {
    color: var(--text);
    font-size: .88rem;
    font-weight: 700;
}

.loyalty-history-info small {
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.6;
}

.loyalty-history-info span {
    color: var(--muted);
    font-size: .72rem;
}

.loyalty-history-points {
    font-size: 1rem;
    font-weight: 900;
}

.loyalty-history-item.positive .loyalty-history-points {
    color: #4ade80;
}

.loyalty-history-item.negative .loyalty-history-points {
    color: #ff6b6b;
}

/* ریسپانسیو */
@media (max-width: 600px) {
    .loyalty-hero {
        padding: 24px 18px;
    }

    .loyalty-points strong {
        font-size: 2.5rem;
    }

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

    .redeem-input-row {
        flex-direction: column;
    }

    .loyalty-tiers-grid {
        grid-template-columns: 1fr 1fr;
    }

    .loyalty-history-item {
        grid-template-columns: 36px 1fr;
    }

    .loyalty-history-points {
        grid-column: 1/-1;
        text-align: left;
    }
}

/* وقتی عکس Hero آپلود نشده */
.hero-no-image {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 6/7;
    background: linear-gradient(135deg, #ffffff05, #ffffff02);
    border-radius: 26px;
    border: 1px dashed #ffffff20;
    color: #ffe52b30;
}

.hero-no-image svg {
    width: 80px;
    height: 80px;
}

/* وقتی عکس درباره ما آپلود نشده */
.about-no-image {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 5/6;
    background: linear-gradient(135deg, #ffffff05, #ffffff02);
    border-radius: 22px;
    border: 1px dashed #ffffff20;
    color: #ffe52b30;
}

.about-no-image svg {
    width: 64px;
    height: 64px;
}

/* ═══════════════════════════════════════════════════════════
   THEME OVERRIDE: زرشکی شیک + سفید ملایم
   این بخش همه رنگ‌های طلایی و مشکی رو override می‌کنه
   ═══════════════════════════════════════════════════════════ */

/* ─── متغیرهای اصلی ─── */
:root {
    --gold: #9b1c2e;
    --gold-dark: #6e1320;
    --bg: #f8f6f4;
    --card: #ffffffb3;
    --border: #9b1c2e1f;
    --text: #2a2024;
    --muted: #8a7a80;
    color-scheme: light;
}

/* ─── بدنه و پس‌زمینه ─── */
body {
    background: var(--bg);
    color: var(--text);
}

body:after {
    background: radial-gradient(ellipse at center, transparent 30%, #f8f6f4aa 100%);
}

/* ─── هدر ─── */
.site-header {
    background: #f8f6f4d9;
    border-bottom: 1px solid #9b1c2e1a;
}

.logo-text,
.logo span {
    color: var(--text);
}

.logo-text span,
.logo span {
    color: var(--gold);
}

.logo-img {
    border: 2px solid #9b1c2e30;
}

.logo:hover .logo-img {
    border-color: var(--gold);
}

.desktop-nav a:hover,
.desktop-nav a.active {
    color: var(--gold);
    background: #9b1c2e10;
}

.user-btn:hover,
.cart-btn:hover {
    border-color: #9b1c2e60;
    background: #9b1c2e08;
    color: var(--gold);
}

/* ─── دکمه اصلی ─── */
.btn-primary {
    background: linear-gradient(180deg, #b8293d, #7a1524);
    color: #ffffff;
    border: 1px solid #c95666;
    box-shadow: 0 6px 26px #9b1c2e30, inset 0 1px 2px #ffffff80;
}

.btn-primary:hover {
    box-shadow: 0 10px 34px #9b1c2e45;
    filter: brightness(1.08);
}

.btn-ghost:hover {
    border-color: #9b1c2e60;
    color: var(--gold);
}

/* ─── Hero ─── */
.hero-badge {
    background: #9b1c2e15;
    border: 1px solid #9b1c2e40;
    color: var(--gold);
}

.hero-card-glow {
    background: radial-gradient(circle at 50% 50%, #9b1c2e40, transparent 60%);
}

.hero-stats strong {
    color: var(--gold);
}

/* ─── Features ─── */
.feature-item:hover {
    border-color: #9b1c2e40;
    background: #9b1c2e05;
}

.feature-icon,
.value-icon,
.stat-icon,
.info-icon,
.contact-item-icon,
.search-category-icon,
.earn-icon,
.loyalty-stat-icon {
    background: linear-gradient(135deg, #9b1c2e20, #6e132010);
    border: 1px solid #9b1c2e40;
    color: var(--gold);
}

/* ─── Section headings ─── */
.section-label,
.section-head h2 span,
.about h2 span,
.page-title span {
    color: var(--gold);
}

/* ─── About section ─── */
.about {
    background: linear-gradient(180deg, transparent, #9b1c2e05);
    border-top: 1px solid #9b1c2e1a;
    border-bottom: 1px solid #9b1c2e1a;
}

/* ─── Newsletter ─── */
.newsletter-box:before {
    background: radial-gradient(circle at 50% 0%, #9b1c2e30, transparent 60%);
}

.newsletter-icon {
    background: linear-gradient(135deg, #b8293d, #7a1524);
    color: #ffffff;
}

.newsletter-form input:focus {
    border-color: #9b1c2e80;
    background: #9b1c2e09;
    box-shadow: 0 0 0 3px #9b1c2e10;
}

/* ─── Footer ─── */
.site-footer {
    background: #f0eceb99;
    border-top: 1px solid #9b1c2e1a;
}

.footer-col h4,
.footer-bottom span {
    color: var(--gold);
}

.footer-brand-name span {
    color: var(--gold);
}

.footer-logo-img {
    border: 2px solid #9b1c2e20;
    box-shadow: 0 8px 24px rgba(155, 28, 46, 0.25);
}

.footer-logo:hover .footer-logo-img {
    box-shadow: 0 12px 32px rgba(155, 28, 46, 0.4);
    border-color: #9b1c2e40;
}

.footer-socials a {
    background: #ffffff;
    border: 1px solid #9b1c2e1f;
    color: var(--gold);
}

.footer-socials a:hover {
    border-color: #9b1c2e70;
    background: #9b1c2e10;
    box-shadow: 0 8px 20px #9b1c2e25;
}

.footer-socials a:before {
    background: radial-gradient(circle at 50% 50%, #9b1c2e25, transparent 70%);
}

.footer-bottom {
    border-top: 1px solid #9b1c2e1a;
}

/* ─── Contact page ─── */
.socials-row a {
    background: #ffffff;
    border: 1px solid #9b1c2e1f;
    color: var(--gold);
}

.socials-row a:hover {
    border-color: #9b1c2e70;
    background: #9b1c2e10;
    box-shadow: 0 8px 24px #9b1c2e25;
}

.socials-row a:before {
    background: radial-gradient(circle at 50% 50%, #9b1c2e20, transparent 70%);
}

.contact-item {
    background: var(--card);
    border: 1px solid var(--border);
}

.contact-form .input-wrap:focus-within,
.checkout-box .input-wrap:focus-within,
.address-form .input-wrap:focus-within,
.profile-form .input-wrap:focus-within,
.review-form .input-wrap:focus-within,
.track-form .input-wrap:focus-within {
    border-color: #9b1c2e80;
    background: #9b1c2e09;
    box-shadow: 0 0 0 3px #9b1c2e10;
}

/* ─── Page hero / CTA ─── */
.cta-box:before,
.faq-contact:before,
.faq-contact-icon,
.track-form-box:before,
.track-form-icon,
.success-box:before,
.error-glow {
    background: radial-gradient(circle at 50% 50%, #9b1c2e20, transparent 60%);
}

.faq-contact-icon,
.track-form-icon,
.success-icon {
    background: linear-gradient(135deg, #b8293d, #7a1524);
    color: #ffffff;
}

.cta-box,
.faq-contact,
.track-form-box,
.success-box {
    background: var(--card);
    border-color: #9b1c2e30;
}

/* ─── Stats band ─── */
.stats-band {
    background: linear-gradient(180deg, transparent, #9b1c2e05);
    border-top: 1px solid #9b1c2e1a;
    border-bottom: 1px solid #9b1c2e1a;
}

.stats-grid strong {
    color: var(--gold);
}

/* ─── Terms page ─── */
.terms-nav a:hover,
.terms-nav a.active {
    color: var(--gold);
    background: #9b1c2e08;
}

.terms-nav a:before {
    background: #9b1c2e30;
}

.terms-nav a.active:before,
.terms-nav a:hover:before {
    background: var(--gold);
    box-shadow: 0 0 10px #9b1c2e80;
}

.terms-section:hover {
    border-color: #9b1c2e40;
}

.terms-num {
    color: #9b1c2e20;
}

.terms-section ul li:before {
    background: var(--gold);
    box-shadow: 0 0 8px #9b1c2e60;
}

.terms-contact {
    background: linear-gradient(135deg, #9b1c2e10, #6e132005);
    border: 1px solid #9b1c2e30;
}

.terms-update svg {
    color: var(--gold);
}

/* ─── FAQ ─── */
.faq-search:focus-within {
    border-color: #9b1c2e80;
    box-shadow: 0 0 0 3px #9b1c2e10;
}

.faq-cat:hover {
    border-color: #9b1c2e40;
}

.faq-cat.active {
    background: linear-gradient(180deg, #b8293d, #7a1524);
    color: #ffffff;
    border-color: #c95666;
    box-shadow: 0 6px 20px #9b1c2e30;
}

.faq-item:hover {
    border-color: #9b1c2e40;
}

.faq-item.open {
    border-color: #9b1c2e60;
    background: #9b1c2e04;
}

.faq-q-icon {
    background: linear-gradient(135deg, #9b1c2e20, #6e132010);
    border: 1px solid #9b1c2e40;
    color: var(--gold);
}

.faq-item.open .faq-arrow {
    color: var(--gold);
}

.faq-answer-inner a {
    color: var(--gold);
    border-bottom: 1px dashed #9b1c2e60;
}

/* ─── Breadcrumb ─── */
.breadcrumb strong {
    color: var(--gold);
}

.breadcrumb a:hover {
    color: var(--gold);
}

/* ─── Product cards ─── */
.product-card:hover {
    border-color: #9b1c2e50;
    box-shadow: 0 20px 45px #9b1c2e15;
}

.product-tag {
    background: linear-gradient(135deg, #b8293d, #7a1524);
    color: #ffffff;
}

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

.product-price {
    color: var(--gold);
}

.product-btn:hover {
    background: linear-gradient(180deg, #b8293d, #7a1524);
    color: #ffffff;
    border-color: #c95666;
}

/* ─── Categories ─── */
.category-card:hover {
    border-color: #9b1c2e60;
    box-shadow: 0 25px 50px #9b1c2e15;
}

.category-card:hover .category-body h3 {
    color: var(--gold);
}

.category-count {
    color: var(--gold);
    background: #9b1c2e10;
}

.category-pill:hover {
    border-color: #9b1c2e60;
    background: #9b1c2e08;
}

.category-pill small {
    color: var(--gold);
}

.category-pill:hover span {
    color: var(--gold);
}

/* ─── Filters sidebar ─── */
.filter-box h3 {
    color: var(--gold);
}

.filter-list a:hover {
    color: var(--gold);
    background: #9b1c2e08;
}

.filter-list a.active {
    color: var(--gold);
    background: #9b1c2e10;
}

/* ─── Pagination ─── */
.page-link:hover {
    border-color: #9b1c2e60;
    color: var(--gold);
    background: #9b1c2e08;
}

.page-link.active {
    background: linear-gradient(180deg, #b8293d, #7a1524);
    color: #ffffff;
    border-color: #c95666;
}

/* ─── Product detail ─── */
.product-category-link {
    color: var(--gold);
    background: #9b1c2e10;
}

.product-category-link:hover {
    background: #9b1c2e20;
}

.product-detail-price .price-current {
    color: var(--gold);
}

.size-btn:hover {
    border-color: #9b1c2e60;
}

.size-btn.active {
    background: linear-gradient(180deg, #b8293d, #7a1524);
    color: #ffffff;
    border-color: #c95666;
}

.product-features svg {
    color: var(--gold);
}

/* ─── Tabs ─── */
.tab-btn.active {
    color: var(--gold);
}

.tab-btn.active:after {
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ─── Color options ─── */
.color-btn:hover {
    border-color: #9b1c2e60;
}

.color-btn.active {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px #9b1c2e30, inset 0 0 0 2px #ffffff;
}

/* ─── Modal ─── */
.modal-box {
    background: linear-gradient(135deg, #ffffff, #faf8f7);
    border: 1px solid #9b1c2e30;
    box-shadow: 0 40px 100px #00000025, 0 0 0 1px #9b1c2e08 inset;
}

.modal-close:hover {
    background: #9b1c2e20;
    border-color: #9b1c2e50;
    color: var(--gold);
}

.modal-color-btn:hover {
    border-color: #9b1c2e60;
}

.modal-color-btn.selected {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px #9b1c2e40, inset 0 0 0 3px #ffffff;
}

.modal-size-btn:hover {
    border-color: #9b1c2e60;
    background: #9b1c2e08;
}

.modal-size-btn.selected {
    background: linear-gradient(180deg, #b8293d, #7a1524);
    color: #ffffff;
    border-color: #c95666;
    box-shadow: 0 4px 16px #9b1c2e30;
}

/* ─── Toast ─── */
.toast {
    background: #ffffff;
    border: 1px solid #9b1c2e40;
    color: var(--text);
    box-shadow: 0 20px 50px #00000025;
}

.toast.success {
    background: linear-gradient(135deg, #ffffff, #f0faf4);
    border-color: #4ade8060;
}

.toast.warning {
    background: linear-gradient(135deg, #ffffff, #fdf8ec);
    border-color: #fbbf2460;
}

.toast.error {
    background: linear-gradient(135deg, #ffffff, #fdf0f0);
    border-color: #ff3b3b60;
}

/* ─── Cart ─── */
.cart-item:hover {
    border-color: #9b1c2e30;
}

.cart-item-title:hover {
    color: var(--gold);
}

.qty-btn:hover {
    background: #9b1c2e15;
    color: var(--gold);
}

.cart-item-subtotal {
    color: var(--gold);
}

.cart-summary-box {
    background: var(--card);
    border: 1px solid var(--border);
}

.cart-summary-box:before {
    background: radial-gradient(circle at 50% 0%, #9b1c2e15, transparent 60%);
}

.summary-count,
.summary-total,
.summary-final-price {
    color: var(--gold) !important;
}

.cart-empty-icon {
    background: #9b1c2e10;
    border: 1px solid #9b1c2e30;
    color: var(--gold);
}

/* ─── Checkout ─── */
.checkout-step {
    background: linear-gradient(135deg, #b8293d, #7a1524);
    color: #ffffff;
}

.checkout-summary-box:before {
    background: radial-gradient(circle at 50% 0%, #9b1c2e15, transparent 60%);
}

.shipping-option:hover .shipping-content {
    border-color: #9b1c2e40;
    background: #9b1c2e05;
}

.shipping-option input[type="radio"]:checked+.shipping-content {
    border-color: var(--gold);
    background: #9b1c2e10;
    box-shadow: 0 0 0 3px #9b1c2e15;
}

.shipping-price,
.checkout-item-price,
.summary-final-price {
    color: var(--gold);
}

.checkout-trust svg {
    color: var(--gold);
}

.checkout-items::-webkit-scrollbar-thumb {
    background: #9b1c2e40;
}

.checkout-item-qty {
    background: var(--gold);
    color: #ffffff;
}

/* ─── Success page ─── */
.success-order-number {
    background: #9b1c2e15;
    border: 1px solid #9b1c2e40;
}

.success-order-number strong {
    color: var(--gold);
}

/* ─── Coupon ─── */
.coupon-section {
    background: #ffffff;
    border: 1px dashed #9b1c2e30;
}

.coupon-label svg {
    color: var(--gold);
}

.coupon-form input:focus {
    border-color: #9b1c2e60;
    background: #9b1c2e09;
    box-shadow: 0 0 0 3px #9b1c2e10;
}

.coupon-form button {
    background: linear-gradient(180deg, #b8293d, #7a1524);
    color: #ffffff;
    border: 1px solid #c95666;
    box-shadow: 0 4px 16px #9b1c2e30;
}

.coupon-form button:hover {
    box-shadow: 0 6px 20px #9b1c2e45;
}

.coupon-applied {
    background: linear-gradient(135deg, #4ade8020, #22c55e10);
    border: 1px solid #4ade8040;
}

/* ─── Blog ─── */
.blog-featured {
    background: linear-gradient(135deg, #9b1c2e08, #6e132002);
    border: 1px solid #9b1c2e30;
}

.blog-featured:hover {
    border-color: #9b1c2e60;
    box-shadow: 0 20px 50px #9b1c2e15;
}

.blog-featured-tag,
.blog-new-badge {
    color: #ffffff;
}

.blog-featured-tag {
    background: linear-gradient(135deg, #b8293d, #7a1524);
}

.blog-cat,
.post-cat {
    color: var(--gold);
    background: #9b1c2e15;
}

.blog-cat:hover,
.post-cat:hover {
    background: #9b1c2e25;
}

.blog-card:hover {
    border-color: #9b1c2e40;
    box-shadow: 0 20px 45px #9b1c2e15;
}

.blog-card:hover .blog-card-title {
    color: var(--gold);
}

.blog-read-more {
    color: var(--gold);
}

.sidebar-box h3 {
    color: var(--gold);
}

.sidebar-search:focus-within {
    border-color: #9b1c2e60;
}

.sidebar-search button:hover {
    color: var(--gold);
}

.sidebar-list a:hover {
    color: var(--gold);
    background: #9b1c2e08;
}

.sidebar-list a.active {
    color: var(--gold);
    background: #9b1c2e10;
}

.recent-post:hover .recent-post-info h4 {
    color: var(--gold);
}

/* ─── Post detail ─── */
.post-meta-item svg {
    color: var(--gold);
}

.post-content a {
    color: var(--gold);
    border-bottom: 1px dashed #9b1c2e60;
}

.post-content blockquote {
    border-right: 3px solid var(--gold);
    background: #9b1c2e08;
}

.post-content code {
    color: var(--gold);
}

/* ─── User dropdown ─── */
.user-dropdown-menu {
    background: linear-gradient(135deg, #ffffff, #faf8f7);
    border: 1px solid #9b1c2e30;
    box-shadow: 0 20px 50px #00000025;
}

.dropdown-avatar {
    background: linear-gradient(135deg, #b8293d, #7a1524);
    color: #ffffff;
}

.user-dropdown-menu a:hover {
    background: #9b1c2e10;
    color: var(--gold);
}

/* ─── Profile ─── */
.profile-user-card {
    background: linear-gradient(135deg, #9b1c2e10, #6e132005);
    border: 1px solid #9b1c2e30;
}

.profile-user-card:before {
    background: radial-gradient(circle at 50% 0%, #9b1c2e20, transparent 60%);
}

.profile-avatar {
    background: linear-gradient(135deg, #b8293d, #7a1524);
    color: #ffffff;
    box-shadow: 0 15px 40px #9b1c2e40;
}

.profile-nav a:hover {
    background: #9b1c2e08;
}

.profile-nav a.active {
    background: linear-gradient(135deg, #9b1c2e15, #6e132008);
    color: var(--gold);
    box-shadow: inset 0 0 0 1px #9b1c2e30;
}

/* ─── Stat cards ─── */
.stat-card:hover {
    border-color: #9b1c2e40;
}

.stat-icon.gold {
    background: linear-gradient(135deg, #b8293d, #7a1524);
    color: #ffffff;
}

/* ─── Orders ─── */
.order-row:hover {
    border-color: #9b1c2e40;
    background: #9b1c2e05;
}

.order-number {
    color: var(--gold);
}

.orders-tab.active {
    background: linear-gradient(135deg, #9b1c2e20, #6e132010);
    color: var(--gold);
    box-shadow: inset 0 0 0 1px #9b1c2e40;
}

.orders-tab.active span {
    background: #9b1c2e30;
}

.order-info-box h4 svg {
    color: var(--gold);
}

.order-item-price,
.order-summary-box .summary-final-price {
    color: var(--gold);
}

/* ─── Addresses ─── */
.address-card:hover {
    border-color: #9b1c2e40;
}

.address-card.is-default {
    border-color: #9b1c2e60;
    background: linear-gradient(135deg, #9b1c2e08, #6e132002);
}

.address-title svg {
    color: var(--gold);
}

.address-default-badge {
    background: linear-gradient(135deg, #b8293d, #7a1524);
    color: #ffffff;
}

.address-action-btn:hover {
    border-color: #9b1c2e40;
    color: var(--gold);
    background: #9b1c2e10;
}

.address-set-default-btn {
    color: var(--gold);
}

.address-set-default-btn:hover {
    background: #9b1c2e10;
    border-color: #9b1c2e40;
}

.saved-addresses-section {
    background: #9b1c2e05;
    border: 1px dashed #9b1c2e30;
}

.saved-addresses-title {
    color: var(--gold);
}

.saved-address-btn:hover {
    border-color: #9b1c2e60;
    background: #9b1c2e08;
}

.saved-addr-badge {
    background: #9b1c2e20;
    color: var(--gold);
}

/* ─── Wishlist ─── */
.product-img-wrap .wishlist-btn {
    background: #ffffffee;
    border: 1px solid #9b1c2e20;
    color: #9b1c2e90;
}

.product-img-wrap .wishlist-btn:hover {
    background: #9b1c2e10;
    border-color: #9b1c2e60;
    color: var(--gold);
}

.product-img-wrap .wishlist-btn.active {
    background: #9b1c2e15;
    border-color: #9b1c2e;
    color: var(--gold);
}

.wishlist-header-btn {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
}

.wishlist-header-btn:hover {
    border-color: #9b1c2e60;
    color: var(--gold);
}

.wishlist-badge {
    background: var(--gold);
    color: #ffffff;
}

.wishlist-count svg {
    color: var(--gold);
    fill: currentColor;
}

.wishlist-empty-icon {
    background: #9b1c2e10;
    border: 1px solid #9b1c2e30;
    color: var(--gold);
}

/* ─── Reviews ─── */
.reviews-summary-box:before {
    background: radial-gradient(circle at 50% 0%, #9b1c2e15, transparent 60%);
}

.rating-big strong {
    color: var(--gold);
}

.rating-stars-big .star.filled,
.review-rating .star.filled {
    color: var(--gold);
    fill: var(--gold);
}

.dist-bar-fill {
    background: linear-gradient(90deg, #b8293d, #7a1524);
}

.distribution-row:hover {
    background: #9b1c2e05;
}

.review-item:hover {
    border-color: #9b1c2e30;
}

.review-avatar {
    background: linear-gradient(135deg, #b8293d, #7a1524);
    color: #ffffff;
}

.review-admin-reply {
    background: linear-gradient(135deg, #9b1c2e08, #6e132003);
    border-right: 3px solid var(--gold);
}

.admin-reply-head {
    color: var(--gold);
}

.rating-star:hover svg,
.rating-star.active svg {
    color: var(--gold);
    fill: var(--gold);
}

.reviews-more-btn:hover {
    border-color: #9b1c2e60;
    color: var(--gold);
    background: #9b1c2e05;
}

.review-helpful-btn:hover,
.review-helpful-btn.voted {
    border-color: #4ade8060;
    color: #4ade80;
    background: #4ade8010;
}

/* ─── Track order ─── */
.track-form .input-wrap:focus-within {
    border-color: #9b1c2e80;
    background: #9b1c2e09;
    box-shadow: 0 0 0 3px #9b1c2e10;
}

.track-number {
    color: var(--gold);
}

.timeline-step.done .timeline-icon {
    background: linear-gradient(135deg, #b8293d, #7a1524);
    border-color: #c95666;
    color: #ffffff;
    box-shadow: 0 8px 24px #9b1c2e40;
}

.timeline-step.current .timeline-icon {
    background: #9b1c2e15;
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 0 4px #9b1c2e20;
}

@keyframes pulseStep {

    0%,
    100% {
        box-shadow: 0 0 0 4px #9b1c2e20;
    }

    50% {
        box-shadow: 0 0 0 8px #9b1c2e10;
    }
}

.track-info-box h4 svg {
    color: var(--gold);
}

.track-item-price,
.track-summary-box .summary-final-price {
    color: var(--gold);
}

/* ─── Search ─── */
.header-search-form:focus-within,
.mobile-search-form:focus-within {
    border-color: #9b1c2e60;
    background: #9b1c2e09;
    box-shadow: 0 0 0 3px #9b1c2e10;
}

.header-search .search-clear:hover,
.mobile-search-form .search-clear:hover {
    color: var(--gold);
}

.search-suggestions {
    background: linear-gradient(135deg, #ffffff, #faf8f7);
    border: 1px solid #9b1c2e30;
    box-shadow: 0 20px 50px #00000025;
}

.search-suggestion:hover {
    background: #9b1c2e08;
}

.search-suggestion-info span {
    color: var(--gold);
}

.search-suggestion.view-all {
    background: linear-gradient(135deg, #9b1c2e15, #6e132008);
    color: var(--gold);
    border: 1px solid #9b1c2e30;
}

.search-suggestion.view-all:hover {
    background: linear-gradient(135deg, #9b1c2e20, #6e132010);
}

.search-spinner {
    border: 2px solid #9b1c2e15;
    border-top-color: var(--gold);
}

.search-mobile-btn:hover {
    border-color: #9b1c2e60;
    color: var(--gold);
}

.search-main-form:focus-within {
    border-color: #9b1c2e60;
    box-shadow: 0 0 0 3px #9b1c2e10;
}

.search-suggestions-tags a {
    color: var(--gold);
    background: #9b1c2e10;
}

.search-suggestions-tags a:hover {
    background: #9b1c2e20;
}

.search-filter:hover {
    color: var(--text);
    background: #9b1c2e05;
}

.search-filter.active {
    background: linear-gradient(135deg, #9b1c2e20, #6e132010);
    color: var(--gold);
    box-shadow: inset 0 0 0 1px #9b1c2e40;
}

.search-filter.active span {
    background: #9b1c2e30;
}

.search-section-title svg {
    color: var(--gold);
}

.search-section-title span {
    background: #9b1c2e15;
    color: var(--gold);
}

.search-category:hover {
    border-color: #9b1c2e40;
    background: #9b1c2e05;
}

.search-category-info span {
    color: var(--gold);
}

.search-post:hover {
    border-color: #9b1c2e40;
    background: #9b1c2e05;
}

.search-post-cat {
    color: var(--gold);
    background: #9b1c2e15;
}

.search-post:hover .search-post-info h4 {
    color: var(--gold);
}

.search-no-results-icon {
    background: #9b1c2e10;
    border: 1px solid #9b1c2e30;
    color: var(--gold);
}

.search-no-results>p strong {
    color: var(--gold);
}

/* ─── Mobile search ─── */
.mobile-search-modal,
.mobile-search-head {
    background: #f8f6f4;
}

.mobile-search-back {
    background: #ffffff;
    border: 1px solid #9b1c2e1f;
    color: var(--text);
}

.mobile-search-back:hover {
    background: #9b1c2e10;
    border-color: #9b1c2e40;
    color: var(--gold);
}

/* ─── Floating contact ─── */
.floating-btn {
    background: linear-gradient(135deg, #b8293d, #7a1524);
    border: 2px solid #c95666;
    color: #ffffff;
    box-shadow: 0 8px 30px #9b1c2e60, 0 0 0 0 #9b1c2e50;
}

.floating-btn:hover {
    box-shadow: 0 12px 40px #9b1c2e90;
}

.floating-pulse {
    border: 2px solid var(--gold);
}

.floating-menu {
    background: linear-gradient(135deg, #ffffff, #faf8f7);
    border: 1px solid #9b1c2e30;
    box-shadow: 0 20px 60px #00000025;
}

.floating-close:hover {
    background: #9b1c2e15;
    color: var(--gold);
}

.floating-item.phone .floating-item-icon {
    background: linear-gradient(135deg, #9b1c2e30, #6e132015);
    border: 1px solid #9b1c2e50;
    color: var(--gold);
}

.floating-item:hover {
    background: #9b1c2e05;
}

/* ─── Loyalty ─── */
.loyalty-hero {
    background: linear-gradient(135deg, #9b1c2e08, #6e132002);
    border: 1px solid #9b1c2e40;
}

.loyalty-hero-glow {
    background: radial-gradient(circle, #9b1c2e30, transparent 70%);
}

.loyalty-points strong {
    color: var(--gold);
    text-shadow: 0 4px 20px #9b1c2e40;
}

.loyalty-progress-header strong {
    color: var(--gold);
}

.loyalty-progress-fill {
    background: linear-gradient(90deg, #b8293d, #7a1524);
    box-shadow: 0 0 10px #9b1c2e80;
}

.loyalty-max-level {
    color: var(--gold);
}

.loyalty-history-item.positive {
    border-color: #4ade8020;
}

.loyalty-history-item.negative {
    border-color: #ff3b3b20;
}

.redeem-input-row input:focus {
    border-color: #9b1c2e60;
    box-shadow: 0 0 0 3px #9b1c2e10;
}

/* ─── Error pages ─── */
.error-code {
    background: linear-gradient(180deg, #b8293d, #6e1320);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 10px 40px #9b1c2e30);
}

.error-icon {
    background: linear-gradient(135deg, #9b1c2e15, #6e132005);
    border: 1px solid #9b1c2e40;
    color: var(--gold);
}

.error-box h1 span {
    color: var(--gold);
}

.error-links a:hover {
    color: var(--gold);
    background: #9b1c2e08;
}

/* ─── Misc fixes ─── */
.products-empty,
.empty-state {
    color: var(--muted);
}

.products-empty {
    background: var(--card);
    border: 1px dashed var(--border);
}

/* ─── اسکرول‌بار سفارشی (اختیاری) ─── */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f0eceb;
}

::-webkit-scrollbar-thumb {
    background: #9b1c2e40;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9b1c2e60;
}
/* ═══════════════════════════════════════════════════════════
   HOME FIXES — بعد از home.css لود می‌شود (هیچ‌چیز از home.css حذف نشده)
   اگر خواستی، کل این فایل را می‌توانی انتهای home.css هم کپی کنی.
   ═══════════════════════════════════════════════════════════ */

:root {
    --ok: #15803d;
    --err: #b91c1c;
    --warn: #b45309;
    --line: #9b1c2e1f;
    --field-border: #9b1c2e33;
    --ph: #a89aa0;
    --img-bg: #efe9e6;
    --tint: #9b1c2e08;
}

/* ───────────── 1) منوی موبایل ───────────── */
@media (max-width: 991px) {
    .desktop-nav {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        background: #fffffff5;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 20px 40px #2a202414;
        padding: 10px 14px 14px;
        z-index: 99;
    }

    .desktop-nav.mobile-open {
        display: block;
    }

    .desktop-nav ul {
        flex-direction: column;
        gap: 2px;
    }

    .desktop-nav a {
        display: block;
        padding: 12px 14px;
    }
}

/* ───────────── 2) هدر در عرض‌های بینابینی ───────────── */
@media (min-width: 992px) and (max-width: 1180px) {
    .header-inner {
        gap: 10px;
    }

    .desktop-nav ul {
        gap: 2px;
    }

    .desktop-nav a {
        padding: 8px 9px;
        font-size: .86rem;
    }

    .header-search {
        max-width: 210px;
        margin: 0 6px;
    }

    .user-btn span {
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ───────────── 3) رنگ متن‌های تیره/سفید که روی تم روشن دیده نمی‌شدند ───────────── */
.logo,
.logo-text {
    color: var(--text);
}

.footer-brand-name {
    color: var(--text);
}

.cart-badge {
    color: #fff;
}

/* فرم خروج داخل منوی کاربر (دکمه شبیه لینک‌ها) */
.logout-form {
    margin: 0;
}

.user-dropdown-menu .logout-form button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    background: none;
    border: 0;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    text-align: right;
    transition: .2s;
}

.user-dropdown-menu .logout-form button svg {
    width: 17px;
    height: 17px;
}

.dropdown-logout,
.profile-nav .logout-link {
    color: var(--err) !important;
}

.dropdown-logout:hover,
.profile-nav .logout-link:hover {
    background: #b91c1c12 !important;
    color: var(--err) !important;
}

/* لیبل‌ها */
.contact-form label,
.checkout-box label,
.profile-form label,
.review-form .review-form-field label,
.track-form label,
.address-form label,
.redeem-form label {
    color: var(--text);
}

.checkout-box .req,
.profile-form .req,
.address-form .req,
.review-form .req {
    color: var(--err);
}

.error-text {
    color: var(--err);
}

/* ───────────── 4) ورودی‌ها و بردرهای نامرئی روی زمینه روشن ───────────── */
.contact-form .input-wrap,
.checkout-box .input-wrap,
.profile-form .input-wrap,
.address-form .input-wrap,
.review-form .input-wrap,
.track-form .input-wrap {
    background: #fff;
    border: 1px solid var(--field-border);
}

.newsletter-form input,
.coupon-form input,
.redeem-input-row input,
.sidebar-search,
.header-search-form,
.mobile-search-form,
.reviews-sort select {
    background: #fff;
    border-color: var(--field-border);
}

.reviews-sort select option {
    background: #fff;
    color: var(--text);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder,
.faq-search input::placeholder,
.sidebar-search input::placeholder,
.checkout-box input::placeholder,
.checkout-box textarea::placeholder,
.profile-form input::placeholder,
.address-form input::placeholder,
.address-form textarea::placeholder,
.review-form input::placeholder,
.review-form textarea::placeholder,
.track-form input::placeholder,
.coupon-form input::placeholder,
.search-main-form input::placeholder,
.header-search input::placeholder,
.mobile-search-form input::placeholder {
    color: var(--ph);
}

.track-form .field-icon {
    color: var(--muted);
}

/* خطوط جداکننده و نوارها */
.dropdown-divider,
.summary-divider,
.footer-socials,
.profile-nav .logout-link,
.modal-product,
.checkout-item,
.floating-menu-header,
.mobile-search-head,
.header,
.order-summary-box .summary-divider,
.track-summary-box .summary-divider {
    border-color: var(--line);
}

.dropdown-divider {
    background: var(--line);
}

.timeline-track:before {
    background: var(--line);
}

.loyalty-progress-bar,
.dist-bar {
    background: #9b1c2e14;
}

.profile-nav .logout-link {
    border-top-color: var(--line);
}

.mobile-search-head {
    border-bottom-color: var(--line);
}

.floating-menu-header {
    border-bottom-color: var(--line);
}

.footer-socials {
    border-top-color: var(--line);
}

.modal-product {
    border-bottom-color: var(--line);
}

.checkout-item {
    border-bottom-color: var(--line);
}

.checkout-items::-webkit-scrollbar-track,
.loyalty-history-list::-webkit-scrollbar-track {
    background: var(--tint);
}

/* پس‌زمینه‌های شبه‌شفاف سفید که روی روشن دیده نمی‌شوند */
.cart-item-qty,
.address-action-btn,
.terms-update,
.order-row,
.order-item,
.track-item,
.address-set-default-btn,
.checkbox-label,
.review-pros-cons,
.loyalty-earn-item,
.loyalty-tier-card,
.loyalty-history-item,
.loyalty-redeem-disabled,
.success-info-item,
.search-no-results-tips,
.review-helpful-btn,
.dropdown-header,
.modal-close,
.mobile-search-back,
.modal-size-btn,
.timeline-icon {
    background: var(--tint);
}

.timeline-icon {
    background: #fff;
    border: 2px solid var(--line);
    color: #b7a9ae;
}

.modal-size-btn {
    border-color: var(--field-border);
}

.modal-product-img,
.cart-item-img {
    background: #fff;
    border-color: var(--line);
}

.status-icon {
    background: #9b1c2e10;
}

.floating-item:hover,
.profile-nav a:hover {
    background: var(--tint);
}

/* ───────────── 5) زمینه‌های تیره باقی‌مانده (تصاویر/placeholderها) ───────────── */
.product-img-wrap,
.category-img-wrap,
.gallery-main,
.blog-featured-img,
.blog-card-img,
.post-cover,
.recent-post-img,
.order-item-img,
.track-item-img,
.checkout-item-img,
.search-post-img,
.search-suggestion-img {
    background: var(--img-bg);
}

.product-no-img,
.category-placeholder,
.blog-no-img,
.cart-no-img,
.hero-no-image,
.about-no-image,
.empty-state svg,
.faq-empty svg,
.reviews-empty svg,
.search-suggestion-img svg {
    color: #9b1c2e40;
}

.hero-no-image,
.about-no-image {
    background: var(--tint);
    border: 1px dashed #9b1c2e33;
}

.product-out-stock {
    background: #f8f6f4e6;
    color: var(--gold);
}

.category-overlay {
    background: linear-gradient(180deg, transparent 50%, #2a202466 100%);
}

.modal-overlay {
    background: #2a202499;
}

.content-image {
    box-shadow: 0 30px 70px #2a202422;
}

.color-btn {
    box-shadow: inset 0 0 0 2px #fff;
}

.modal-color-btn {
    box-shadow: inset 0 0 0 3px #fff;
}

.modal-color-btn.selected:after {
    color: #fff;
}

.product-color-dot {
    border: 1px solid #2a202433;
    box-shadow: inset 0 0 0 1px #fff;
}

.product-card:hover,
.category-card:hover,
.blog-card:hover {
    box-shadow: 0 20px 45px #9b1c2e18;
}

/* نقشه / دکمه نقشه / تم زرد باقی‌مانده */
.map-box:before {
    background:
        linear-gradient(45deg, transparent 48%, #9b1c2e08 48%, #9b1c2e08 52%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, #9b1c2e08 48%, #9b1c2e08 52%, transparent 52%),
        radial-gradient(circle at 50% 50%, #9b1c2e12, transparent 70%);
    background-size: 60px 60px, 60px 60px, 100% 100%;
}

.map-placeholder>svg {
    filter: drop-shadow(0 0 20px #9b1c2e40);
}

.map-link {
    background: linear-gradient(180deg, #b8293d, #7a1524);
    color: #fff;
    border: 1px solid #c95666;
    box-shadow: 0 6px 24px #9b1c2e30, inset 0 1px 2px #ffffff80;
}

.map-link:hover {
    box-shadow: 0 10px 32px #9b1c2e45;
}

.faq-empty svg,
.reviews-empty svg {
    color: #9b1c2e40;
}

/* ───────────── 6) سبز/نارنجی/قرمزهای کم‌کنتراست روی سفید ───────────── */
.newsletter-msg,
.contact-msg {
    color: var(--ok);
}

.newsletter-msg.is-error,
.contact-msg.is-error {
    color: var(--err);
}

.stock-in {
    color: var(--ok);
}

.stock-out {
    color: var(--err);
}

.coupon-message.success {
    color: var(--ok);
}

.coupon-message.error {
    color: var(--err);
}

.coupon-applied-info {
    color: #166534;
}

.coupon-applied-info strong {
    color: var(--ok);
}

.free-shipping-badge {
    background: #15803d12;
    border-color: #15803d40;
    color: #166534;
}

.free-shipping-badge strong,
.shipping-price .free {
    color: var(--ok);
}

.shipping-price .free {
    background: #15803d14;
}

.success-box h1 span,
.reviews-already-submitted,
.redeem-hint strong,
.tier-discount {
    color: var(--ok);
}

.review-pros strong,
.review-pros li:before {
    color: var(--ok);
}

.review-cons strong,
.review-cons li:before {
    color: var(--err);
}

.review-helpful-btn:hover,
.review-helpful-btn.voted {
    border-color: #15803d60;
    color: var(--ok);
    background: #15803d10;
}

.loyalty-history-item.positive .loyalty-history-icon,
.loyalty-history-item.positive .loyalty-history-points,
.tier-benefits li:before {
    color: var(--ok);
}

.loyalty-history-item.negative .loyalty-history-icon,
.loyalty-history-item.negative .loyalty-history-points {
    color: var(--err);
}

.order-note-box h4,
.stat-icon.warning {
    color: var(--warn);
}

/* وضعیت سفارش‌ها (متن تیره‌تر روی پس‌زمینه ملایم) */
.order-row-status.status-pending,
.track-status.status-pending {
    color: var(--warn);
}

.order-row-status.status-paid,
.track-status.status-paid,
.order-row-status.status-delivered,
.track-status.status-delivered {
    color: var(--ok);
}

.order-row-status.status-processing,
.track-status.status-processing {
    color: #1d4ed8;
}

.order-row-status.status-shipped,
.track-status.status-shipped {
    color: #6d28d9;
}

.order-row-status.status-cancelled,
.track-status.status-cancelled {
    color: var(--err);
}

.order-row-status.status-returned {
    color: #c2410c;
}

/* Toast */
.toast.info {
    border-color: #9b1c2e40;
}

.toast.success {
    color: #166534;
}

.toast.warning {
    color: #92400e;
}

.toast.error {
    color: #991b1b;
}

/* ───────────── 7) عملکرد ───────────── */
/* translateZ(0) در بخش PERFORMANCE حالت پنهان این المان‌ها را خراب کرده بود */
.user-dropdown-menu {
    transform: translateY(-8px);
}

.search-suggestions {
    transform: translateY(-8px);
}

.mobile-search-modal {
    transform: translateY(-100%);
}

.mobile-search-modal.active {
    transform: translateY(0);
}

/* will-change روی همه کارت‌ها حافظه زیادی مصرف می‌کند */
.product-card,
.blog-card,
.category-card {
    will-change: auto;
    transform: none;
}

.product-card:hover {
    transform: translateY(-4px);
}

.category-card:hover {
    transform: translateY(-5px);
}

.blog-card:hover {
    transform: translateY(-4px);
}

/* backdrop-filter روی موبایل باعث lag اسکرول می‌شود */
@media (max-width: 991px) {

    .filter-box,
    .newsletter-box,
    .faq-search,
    .terms-nav,
    .cart-summary-box,
    .checkout-summary-box,
    .profile-nav,
    .sidebar-box,
    .reviews-summary-box,
    .map-box,
    .error-box {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ───────────── 8) فوتر: نماد اعتماد و کپی‌رایت ───────────── */
.enamad-box {
    text-align: center;
    padding: 10px;
    background: #fff;
    position: relative;
}

.enamad-box img {
    max-width: 100%;
    height: auto;
}

.footer-bottom {
    border-top: 1px solid var(--line);
    padding: 20px 0;
}

.footer-bottom p {
    margin: 0;
}

/* ───────────── 9) سایر ───────────── */
/* دکمه‌ها هنگام ارسال درخواست */
button.is-loading,
.btn-primary.is-loading {
    opacity: .6;
    pointer-events: none;
}

/* پیام کوپن: با کلاس نمایش/مخفی می‌شود (نه inline style) */
.coupon-message {
    display: none;
}

.coupon-message.success,
.coupon-message.error {
    display: block;
}

.summary-final-price,
.summary-total {
    font-variant-numeric: tabular-nums;
}
/* اطمینان از اینکه کلیک روی دکمه شناور و منو تداخلی با فوتر نداره */
.floating-contact {
    pointer-events: none !important;
}
.floating-btn {
    pointer-events: auto !important;
}
.floating-menu.active {
    pointer-events: auto !important;
}
/* ═══════════════════════════════════════
   MOBILE HEADER & BOTTOM NAVIGATION
   ═══════════════════════════════════════ */

/* مخفی کردن منوی پایین در دسکتاپ */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 991px) {
    /* 1. تنظیم هدر موبایل (شبیه عکس) */
    .site-header {
        background: #ffffff !important;
        border-bottom: 1px solid #e5e5e5;
        padding: 8px 0;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .header-inner {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        gap: 10px;
    }

    /* مخفی کردن منوی دسکتاپ و دکمه‌های اضافی در هدر */
    .desktop-nav, .header-actions .user-btn, .header-actions .cart-btn, .header-actions .wishlist-header-btn {
        display: none !important;
    }

    /* لوگو سمت راست */
    .logo {
        order: 2; /* جابجایی به راست در RTL */
        margin-right: auto;
        margin-left: 0;
        gap: 8px;
    }
    .logo-img {
        width: 40px !important;
        height: 40px !important;
        border: 1px solid #9b1c2e30;
    }
    .logo span {
        font-size: 1.1rem;
        color: var(--text);
    }

    /* باکس جستجو سمت چپ */
    .header-search {
        display: flex !important; /* نمایش دوباره جستجو در موبایل */
        order: 1;
        flex: 1;
        max-width: none;
        margin: 0 10px 0 0;
    }

    /* استایل جدید برای نوار جستجو در موبایل */
    .header-search-form {
        background: #f8f6f4;
        border: 1px solid #e5e5e5;
        border-radius: 10px;
        height: 40px;
        padding: 0 12px;
    }
    .header-search input {
        font-size: 0.85rem;
    }

    /* مخفی کردن دکمه جستجوی موبایل قبلی (چون خود باکس جستجو نمایش داده شد) */
    .search-mobile-btn {
        display: none !important;
    }

    /* 2. ایجاد و تنظیم منوی پایین موبایل */
    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 65px;
        background: #ffffff;
        border-top: 1px solid #e5e5e5;
        z-index: 1000;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.03);
        padding-bottom: env(safe-area-inset-bottom); /* برای آیفون‌های دارای ناچ */
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: #8a7a80; /* رنگ خاکستری */
        text-decoration: none;
        font-size: 0.7rem;
        font-weight: 600;
        flex: 1;
        height: 100%;
        position: relative;
        transition: 0.2s;
    }

    .mobile-nav-item svg {
        width: 24px;
        height: 24px;
        stroke-width: 1.5;
    }

    /* حالت فعال (رنگ زرشکی) */
    .mobile-nav-item.active,
    .mobile-nav-item:active {
        color: var(--gold);
    }

    /* بج تعداد سبد خرید در منوی پایین */
    .mobile-nav-badge {
        position: absolute;
        top: 8px;
        right: 25%;
        background: var(--gold);
        color: #ffffff;
        font-size: 0.65rem;
        font-weight: 800;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        border: 2px solid #ffffff;
    }

    /* 3. اضافه کردن فاصله به پایین صفحه تا منوی ثابت روی محتوا نیفتد */
    body {
        padding-bottom: 65px;
    }

    /* 4. مخفی کردن دکمه شناور تماس در موبایل (چون آیکون‌ها در پایین هستن) */
    .floating-contact {
        bottom: 80px !important; /* بالاتر از منوی پایین */
    }
}
/* ═══════════════════════════════════════
   MOBILE HEADER & BOTTOM NAVIGATION (نسخه اصلاح‌شده)
   ═══════════════════════════════════════ */

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 991px) {
    /* 1. تنظیم هدر موبایل */
    .site-header {
        background: #ffffff !important;
        border-bottom: 1px solid #e5e5e5;
        padding: 8px 0;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .header-inner {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        gap: 10px;
    }

    /* مخفی کردن المان‌های اضافی هدر در موبایل */
    .header-actions .user-btn,
    .header-actions .cart-btn,
    .header-actions .wishlist-header-btn,
    .search-mobile-btn {
        display: none !important;
    }

    /* نمایش دکمه منوی همبرگری */
    .header-actions {
        display: flex !important;
        order: 0; /* سمت چپ */
        margin: 0;
    }
    .mobile-toggle {
        display: flex !important;
        background: transparent;
        border: none;
        color: var(--text);
        padding: 4px;
    }
    .mobile-toggle svg {
        width: 28px;
        height: 28px;
    }

    /* باکس جستجو */
    .header-search {
        display: flex !important;
        order: 1;
        flex: 1;
        max-width: 200px;
        margin: 0 10px;
    }
    .header-search-form {
        background: #f8f6f4;
        border: 1px solid #e5e5e5;
        border-radius: 10px;
        height: 38px;
    }

    /* لوگو */
    .logo {
        order: 2;
        margin-right: auto; /* هول دادن به راست */
        margin-left: 0;
    }
    .logo-img {
        width: 36px !important;
        height: 36px !important;
    }
    .logo span {
        font-size: 1rem;
        color: var(--text);
    }

    /* منوی کشویی باز شده (همبرگری) */
    .desktop-nav.mobile-open {
        display: block !important;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        background: #ffffff;
        border-bottom: 1px solid #e5e5e5;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        padding: 15px;
        z-index: 1000;
    }
    .desktop-nav.mobile-open ul {
        flex-direction: column;
        gap: 5px;
    }
    .desktop-nav.mobile-open a {
        display: block;
        padding: 12px 15px;
        border-radius: 8px;
        background: #f8f6f4;
        color: var(--text);
        font-weight: 600;
    }
    .desktop-nav.mobile-open a.active {
        background: #9b1c2e15;
        color: var(--gold);
    }

    /* 2. منوی پایین */
    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 65px;
        background: #ffffff;
        border-top: 1px solid #e5e5e5;
        z-index: 1000;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.03);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: #8a7a80;
        text-decoration: none;
        font-size: 0.7rem;
        font-weight: 600;
        flex: 1;
        height: 100%;
        position: relative;
        transition: 0.2s;
    }

    .mobile-nav-item svg {
        width: 24px;
        height: 24px;
        stroke-width: 1.8;
    }

    .mobile-nav-item.active,
    .mobile-nav-item:active {
        color: var(--gold);
    }

    .mobile-nav-badge {
        position: absolute;
        top: 8px;
        right: calc(50% - 18px);
        background: var(--gold);
        color: #ffffff;
        font-size: 0.65rem;
        font-weight: 800;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        border: 2px solid #ffffff;
    }

    /* 3. فاصله برای منوی پایین */
    body {
        padding-bottom: 65px;
    }

    /* 4. جابجایی دکمه تماس شناور */
    .floating-contact {
        bottom: 80px !important;
    }
}
/* ═══════════════════════════════════════════════════════════
   GLOBAL THEME FIX: حذف کامل رنگ‌های زرد/طلایی و مشکی
   ═══════════════════════════════════════════════════════════ */

/* 1. دکمه‌های اصلی (جایگزینی زرد با زرشکی) */
.btn-primary {
    background: linear-gradient(180deg, #b8293d, #7a1524) !important;
    color: #ffffff !important;
    border: 1px solid #c95666 !important;
    box-shadow: 0 6px 26px #9b1c2e30, inset 0 1px 2px #ffffff80 !important;
}

.btn-primary:hover {
    box-shadow: 0 10px 34px #9b1c2e45 !important;
    filter: brightness(1.08);
}

/* 2. دکمه‌های تگ محصول (زرد -> زرشکی) */
.product-tag {
    background: linear-gradient(135deg, #b8293d, #7a1524) !important;
    color: #ffffff !important;
}

.product-tag.discount {
    background: linear-gradient(135deg, #ff3b3b, #dc2626) !important;
    color: #ffffff !important;
}

/* 3. دکمه‌های سبد خرید و فوتر (زرد -> زرشکی) */
.product-btn:hover,
.btn-ghost:hover {
    background: linear-gradient(180deg, #b8293d, #7a1524) !important;
    color: #ffffff !important;
    border-color: #c95666 !important;
}

/* 4. استایل دکمه‌های مودال (زرد -> زرشکی) */
.modal-size-btn.selected {
    background: linear-gradient(180deg, #b8293d, #7a1524) !important;
    color: #ffffff !important;
    border-color: #c95666 !important;
    box-shadow: 0 4px 16px #9b1c2e30 !important;
}

/* 5. استایل دکمه‌های صفحه‌بندی و فیلتر */
.page-link.active,
.faq-cat.active {
    background: linear-gradient(180deg, #b8293d, #7a1524) !important;
    color: #ffffff !important;
    border-color: #c95666 !important;
    box-shadow: 0 6px 20px #9b1c2e30 !important;
}

/* 6. پس‌زمینه مودال‌ها (مشکی -> سفید روشن) */
.modal-box {
    background: linear-gradient(135deg, #ffffff, #faf8f7) !important;
    border: 1px solid #9b1c2e30 !important;
    box-shadow: 0 40px 100px #00000025, 0 0 0 1px #9b1c2e08 inset !important;
}

.modal-overlay {
    background: #2a202499 !important; /* بک‌دراپ خاکستری/زرشکی */
}

/* 7. استایل Toast (مشکی -> سفید) */
.toast {
    background: #ffffff !important;
    border: 1px solid #9b1c2e40 !important;
    color: var(--text) !important;
    box-shadow: 0 20px 50px #00000025 !important;
}

.toast.success {
    background: linear-gradient(135deg, #ffffff, #f0faf4) !important;
    border-color: #4ade8060 !important;
}

.toast.warning {
    background: linear-gradient(135deg, #ffffff, #fdf8ec) !important;
    border-color: #fbbf2460 !important;
}

.toast.error {
    background: linear-gradient(135deg, #ffffff, #fdf0f0) !important;
    border-color: #ff3b3b60 !important;
}

/* 8. استایل هدر (مشکی -> سفید شفاف) */
.site-header {
    background: #f8f6f4d9 !important;
    border-bottom: 1px solid #9b1c2e1a !important;
}

/* 9. استایل دکمه‌های منوی کاربر و سبد خرید */
.user-btn, .cart-btn {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

.user-btn:hover, .cart-btn:hover {
    border-color: #9b1c2e60 !important;
    background: #9b1c2e08 !important;
    color: var(--gold) !important;
}

/* 10. استایل آواتار و دکمه‌های پروفایل */
.dropdown-avatar {
    background: linear-gradient(135deg, #b8293d, #7a1524) !important;
    color: #ffffff !important;
}

/* 11. استایل دکمه‌های ثبت نظر و لایک */
.rating-star:hover svg,
.rating-star.active svg {
    color: var(--gold) !important;
    fill: var(--gold) !important;
}

.review-helpful-btn:hover,
.review-helpful-btn.voted {
    border-color: #15803d60 !important;
    color: var(--ok) !important;
    background: #15803d10 !important;
}

/* 12. استایل بخش «نظرات مشتریان» (پس‌زمینه‌های تیره) */
.reviews-summary-box:before {
    background: radial-gradient(circle at 50% 0%, #9b1c2e15, transparent 60%) !important;
}

/* 13. استایل بنرها و هدرهای صفحه اصلی */
.hero-badge {
    background: #9b1c2e15 !important;
    border: 1px solid #9b1c2e40 !important;
    color: var(--gold) !important;
}

.hero-card-glow {
    background: radial-gradient(circle at 50% 50%, #9b1c2e40, transparent 60%) !important;
}

/* 14. آیکون‌های زرد در کارت محصولات و ویژگی‌ها */
.feature-icon,
.value-icon,
.stat-icon,
.info-icon,
.contact-item-icon,
.search-category-icon,
.earn-icon,
.loyalty-stat-icon,
.product-features svg {
    background: linear-gradient(135deg, #9b1c2e20, #6e132010) !important;
    border: 1px solid #9b1c2e40 !important;
    color: var(--gold) !important;
}

/* 15. استایل دکمه‌های صفحه اصلی (دکمه‌های تبلیغاتی) */
.btn-primary svg {
    color: currentColor !important;
}

/* 16. استایل نشانگرهای لودینگ (اسپینر) */
.search-spinner {
    border: 2px solid #9b1c2e15 !important;
    border-top-color: var(--gold) !important;
}

/* 17. استایل آیکون‌های شبکه‌های اجتماعی و فوتر */
.footer-socials a {
    background: #ffffff !important;
    border: 1px solid #9b1c2e1f !important;
    color: var(--gold) !important;
}

.footer-socials a:hover {
    border-color: #9b1c2e70 !important;
    background: #9b1c2e10 !important;
    box-shadow: 0 8px 20px #9b1c2e25 !important;
}

/* 18. استایل بخش‌های بلاگ */
.blog-featured-tag {
    background: linear-gradient(135deg, #b8293d, #7a1524) !important;
    color: #ffffff !important;
}

.blog-new-badge {
    background: linear-gradient(135deg, #4ade80, #22c55e) !important;
    color: #ffffff !important;
}

/* 19. استایل دکمه‌های ثبت سفارش */
.checkout-step {
    background: linear-gradient(135deg, #b8293d, #7a1524) !important;
    color: #ffffff !important;
}

.checkout-item-qty {
    background: var(--gold) !important;
    color: #ffffff !important;
}

/* 20. دکمه‌های فیلتر جستجو */
.search-filter.active {
    background: linear-gradient(135deg, #9b1c2e20, #6e132010) !important;
    color: var(--gold) !important;
    box-shadow: inset 0 0 0 1px #9b1c2e40 !important;
}

/* 21. استایل عناصر مربوط به امتیاز و تخفیف */
.free-shipping-badge {
    background: #15803d12 !important;
    border: 1px solid #15803d40 !important;
    color: #166534 !important;
}

.shipping-price .free {
    color: var(--ok) !important;
    background: #15803d14 !important;
}

/* 22. استایل دکمه‌های کوپن و اعمال تخفیف */
.coupon-form button {
    background: linear-gradient(180deg, #b8293d, #7a1524) !important;
    color: #ffffff !important;
    border: 1px solid #c95666 !important;
    box-shadow: 0 4px 16px #9b1c2e30 !important;
}

/* 23. استایل نقشه و لینک آن */
.map-link {
    background: linear-gradient(180deg, #b8293d, #7a1524) !important;
    color: #ffffff !important;
    border: 1px solid #c95666 !important;
    box-shadow: 0 6px 24px #9b1c2e30, inset 0 1px 2px #ffffff80 !important;
}

/* 24. استایل صفحه‌های خطا */
.error-code {
    background: linear-gradient(180deg, #b8293d, #6e1320) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 10px 40px #9b1c2e30) !important;
}

.error-icon {
    background: linear-gradient(135deg, #9b1c2e15, #6e132005) !important;
    border: 1px solid #9b1c2e40 !important;
    color: var(--gold) !important;
}
/* ═══════════════════════════════════════════════════════════
   FIX: PROFILE PAGE RESPONSIVE (MOBILE)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    /* اصلاح کلی چیدمان */
    .profile-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* اصلاح سایدبار */
    .profile-sidebar {
        position: static !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* کارت کاربر (آواتار و ایمیل) */
    .profile-user-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        text-align: right !important;
        padding: 15px 20px !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .profile-avatar {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.5rem !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .profile-user-info {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .profile-user-info h3 {
        font-size: 1rem !important;
        margin-bottom: 4px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .profile-user-info span {
        font-size: 0.8rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* منوی افقی سایدبار پروفایل */
    .profile-nav {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        padding: 8px !important;
        gap: 5px !important;
        width: 100% !important;
        max-width: 100vw !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .profile-nav::-webkit-scrollbar {
        display: none !important;
    }

    .profile-nav a {
        white-space: nowrap !important;
        padding: 8px 14px !important;
        font-size: 0.85rem !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
    }

    .profile-nav .logout-link {
        margin-top: 0 !important;
        padding-top: 8px !important;
        border-top: 0 !important;
        border-right: 1px solid var(--line) !important;
        border-radius: 8px !important;
    }

    /* بخش محتوای پروفایل */
    .profile-main {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }

    /* کارت‌های آمار داخل پروفایل */
    .stats-cards {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .stat-card {
        padding: 15px 10px !important;
    }

    .stat-icon {
        width: 40px !important;
        height: 40px !important;
    }

    .stat-info strong {
        font-size: 1.1rem !important;
    }

    /* ردیف‌های سفارشات */
    .order-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px 15px !important;
    }

    .order-row-info {
        width: 100% !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .order-row-amount {
        font-size: 0.9rem !important;
    }

    .order-row-status {
        font-size: 0.75rem !important;
        padding: 4px 10px !important;
    }

    .order-row-arrow {
        display: none !important;
    }

    /* تب‌های وضعیت سفارش */
    .orders-tabs {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        width: 100% !important;
        padding: 5px !important;
        gap: 5px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .orders-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .orders-tab {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        min-width: auto !important;
        padding: 8px 15px !important;
        font-size: 0.8rem !important;
    }

    /* اطلاعات سریع (کارت‌های پایین) */
    .quick-info {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}
/* ═══════════════════════════════════════════════════════════
   DESKTOP & MOBILE HEADER SEARCH FIX
   ═══════════════════════════════════════════════════════════ */

/* 1. استایل پایه (دسکتاپ) */
.desktop-search-bar {
    display: block;
    background: #f8f6f4d9;
    border-bottom: 1px solid var(--border);
    padding: 10px 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.desktop-search-form {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--field-border);
    border-radius: 12px;
    padding: 0 16px;
    height: 46px;
    width: 100%;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.desktop-search-form:focus-within {
    border-color: #9b1c2e60;
    box-shadow: 0 0 0 3px #9b1c2e10;
}

.desktop-search-form .search-icon {
    width: 20px;
    height: 20px;
    color: var(--muted);
    flex-shrink: 0;
}

.desktop-search-form input {
    font: inherit;
    font-size: 0.95rem;
    color: var(--text);
    background: none;
    border: 0;
    outline: none;
    width: 100%;
    padding: 0 12px;
    height: 100%;
}

.desktop-search-form .search-clear {
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    padding: 6px;
    display: none;
    transition: .2s;
}

.desktop-search-form.has-value .search-clear {
    display: grid;
    place-items: center;
}

.desktop-search-form .search-clear:hover {
    color: var(--gold);
}

/* 2. تنظیمات موبایل (حداکثر 991px) */
@media (max-width: 991px) {
    /* مخفی کردن نوار جستجوی دسکتاپ در موبایل */
    .desktop-search-bar {
        display: none !important;
    }

    /* نمایش دکمه آیکون جستجو در موبایل */
    .search-mobile-btn {
        display: flex !important; /* در موبایل نمایش داده میشه */
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 11px;
        background: var(--card);
        border: 1px solid var(--border);
        color: var(--text);
        cursor: pointer;
        transition: .2s;
        padding: 0;
    }

    .search-mobile-btn:hover {
        border-color: #9b1c2e60;
        color: var(--gold);
    }

    .search-mobile-btn svg {
        width: 18px;
        height: 18px;
    }
}
.boutique-logo {
    width: 300px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}