/*@font-face {*/
/*    font-family: 'IRANSansX';*/
/*    src: url('/fonts/iran-sans-new/IRANSansX-Thin.d96a282.woff2') format('woff2'),*/
/*         url('/fonts/iran-sans-new/IRANSansX-Thin.5cf8f19.woff') format('woff'),*/
/*         url('/fonts/iran-sans-new/IRANSansX-Thin.a25dd29.ttf') format('truetype');*/
/*    font-weight: 100;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/
/*@font-face {*/
/*    font-family: 'IRANSansX';*/
/*    src: url('/fonts/iran-sans-new/IRANSansX-UltraLight.7c249ae.woff2') format('woff2'),*/
/*         url('/fonts/iran-sans-new/IRANSansX-UltraLight.a0a3c79.woff') format('woff'),*/
/*         url('/fonts/iran-sans-new/IRANSansX-UltraLight.1dd88ae.ttf') format('truetype');*/
/*    font-weight: 200;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/
/*@font-face {*/
/*    font-family: 'IRANSansX';*/
/*    src: url('/fonts/iran-sans-new/IRANSansX-Light.cc122b5.woff2') format('woff2'),*/
/*         url('/fonts/iran-sans-new/IRANSansX-Light.a312b8e.ttf') format('truetype');*/
/*    font-weight: 300;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/
@font-face {
    font-family: 'IRANSansX';
    src: url('/fonts/iran-sans-new/IRANSansX-Regular.5eb79e3.woff') format('woff'),
         url('/fonts/iran-sans-new/IRANSansX-Regular.3b18cfa.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/*@font-face {*/
/*    font-family: 'IRANSansX';*/
/*    src: url('/fonts/iran-sans-new/IRANSansX-Medium.c31e667.woff') format('woff'),*/
/*         url('/fonts/iran-sans-new/IRANSansX-Medium.d59c72a.ttf') format('truetype');*/
/*    font-weight: 500;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/
/*@font-face {*/
/*    font-family: 'IRANSansX';*/
/*    src: url('/fonts/iran-sans-new/IRANSansX-DemiBold.911a2b7.woff') format('woff'),*/
/*         url('/fonts/iran-sans-new/IRANSansX-DemiBold.a2430f1.ttf') format('truetype');*/
/*    font-weight: 600;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/
/*@font-face {*/
/*    font-family: 'IRANSansX';*/
/*    src: url('/fonts/iran-sans-new/IRANSansX-Bold.bb21ebd.woff2') format('woff2'),*/
/*         url('/fonts/iran-sans-new/IRANSansX-Bold.f8a8b20.woff') format('woff'),*/
/*         url('/fonts/iran-sans-new/IRANSansX-Bold.51d7e52.ttf') format('truetype');*/
/*    font-weight: 700;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/
/*@font-face {*/
/*    font-family: 'IRANSansX';*/
/*    src: url('/fonts/iran-sans-new/IRANSansX-ExtraBold.6f44b63.woff') format('woff'),*/
/*         url('/fonts/iran-sans-new/IRANSansX-ExtraBold.18b7ad8.ttf') format('truetype');*/
/*    font-weight: 800;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/
/*@font-face {*/
/*    font-family: 'IRANSansX';*/
/*    src: url('/fonts/iran-sans-new/IRANSansX-Black.4423634.woff') format('woff'),*/
/*         url('/fonts/iran-sans-new/IRANSansX-Black.88b6819.ttf') format('truetype');*/
/*    font-weight: 900;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/

body, * {
    font-family: 'IRANSansX', 'Tahoma', 'Arial', sans-serif !important;
}

/* ============================================
   Warm Luxury - Light Mode (Exact Match)
   ============================================ */
:root {
    --s-bg: #FDF8F4;
    --s-card: #FFFFFF;
    --s-card-border: #F0E4DB;
    --s-card-shadow: rgba(233, 168, 140, 0.1);
    --s-text: #3D2C2E;
    --s-text-sub: #787575;
    --s-text-muted: #B8ADAF;
    --s-rose: #E8A490;
    --s-rose-light: #F5E0D8;
    --s-rose-dark: #D4896E;
    --s-divider: #F0E4DB;
    --s-nav-bg: rgba(253, 248, 244, 0.95);
    --s-nav-border: #F0E4DB;
    --s-peach: #F5E0D8;
    --s-peach-dark: #E8C9BC;
    --s-emerald: #C9975C;
    --s-emerald-bg: #FBF3EA;
    --s-emerald-text: #8B6D3F;
    --s-shadow: #E8D5C8;
    --s-icon: #C9A090;
    --s-gray-bg: #FDF8F4;
    --s-danger-bg: #FFF1F2;
    --s-danger-text: #E11D48;
    --s-danger-border: #FECDD3;
    --s-article-bg: #f9ece7;
}

/* ============================================
   Warm Luxury - Dark Mode
   ============================================ */
html.dark {
    --s-bg: #1E1916;
    --s-card: #2C2420;
    --s-card-border: #3D322A;
    --s-card-shadow: rgba(0, 0, 0, 0.25);
    --s-text: #F0E6DE;
    --s-text-sub: #BFB0A4;
    --s-text-muted: #8A7D74;
    --s-rose: #d4956e;
    --s-rose-light: #2C2420;
    --s-rose-dark: #F0B89A;
    --s-divider: #3D3228;
    --s-nav-bg: rgba(28, 21, 19, 0.95);
    --s-nav-border: #3D3228;
    --s-peach: #3D3228;
    --s-peach-dark: #4A3D32;
    --s-emerald-bg: #2A2018;
    --s-emerald-text: #D4A86C;
    --s-gray-bg: #2A2018;
    --s-danger-bg: #4C0519;
    --s-danger-text: #FDA4AF;
    --s-danger-border: #BE123C;
    --s-article-bg: #2A2018;
}

/* ============================================
   Global Styles
   ============================================ */
body {
    background-color: var(--s-bg);
    color: var(--s-text);
    background-image:
        radial-gradient(ellipse at 0% 0%, rgba(232,164,144,0.25) 0%, transparent 40%),
        radial-gradient(ellipse at 100% 100%, rgba(212,137,110,0.18) 0%, transparent 40%),
        radial-gradient(ellipse at 60% 30%, rgba(245,224,216,0.12) 0%, transparent 50%);
    background-attachment: fixed;
}

html.dark body {
    background-color: var(--s-bg);
    background-image:
        radial-gradient(ellipse at 0% 0%, rgba(100,65,50,0.20) 0%, transparent 40%),
        radial-gradient(ellipse at 100% 100%, rgba(80,55,40,0.15) 0%, transparent 40%);
    background-attachment: fixed;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--s-bg); }
::-webkit-scrollbar-thumb { background: var(--s-rose-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--s-rose); }

.category-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.category-scroll::-webkit-scrollbar { display: none; }

.card-hover { transition: all 0.3s ease; }
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--s-card-shadow);
}
.transition
{
    font-weight: bold !important;
}
/* Carousel */
.carousel-2 {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}
.carousel-2::-webkit-scrollbar { display: none; }
.carousel-2 > * {
    flex: 0 0 calc(50% - 6px);
    scroll-snap-align: start;
}
@media (min-width: 768px) {
    .carousel-2 {
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
    }
    .carousel-2 > * {
        flex: 0 0 300px;
        scroll-snap-align: start;
    }
}

.bottom-nav {
    background: var(--s-card);
    border-top: 1px solid var(--s-divider);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
}

.badge-installment {
    background: var(--s-emerald-bg);
    color: var(--s-emerald-text);
    border: 1px solid var(--s-emerald);
    font-size: 10px;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin { animation: spin 1s linear infinite; }

[x-cloak] { display: none !important; }

.star-rating { color: #E8A490; }

/* CTA Button - Gradient Right (Dark) to Left (Light) RTL */
.btn-primary {
    background: linear-gradient(to left, #C47A5E 0%, #E8A490 100%);
    color: white;
    transition: all 0.3s ease;
    border: none;
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(196, 122, 94, 0.4);
}

/* Hero CTA Button */
.btn-hero {
    background: linear-gradient(to left, #B86A4E 0%, #D4896E 45%, #E8A490 100%);
    color: white;
    transition: all 0.3s ease;
}
.btn-hero:hover {
    box-shadow: 0 6px 20px rgba(184, 106, 78, 0.5);
}

.price-old {
    text-decoration: line-through;
    color: var(--s-text-muted);
}

.nav-active { color: var(--s-rose) !important; }
.nav-active svg { stroke: var(--s-rose); }

.shadow-soft { box-shadow: 0 4px 15px var(--s-shadow); }

/* Sidebar */
#sidebarOverlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 60 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    background: rgba(0,0,0,0.4) !important;
    backdrop-filter: blur(4px);
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
#sidebarOverlay.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
#sidebarPanel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    height: 100% !important;
    width: 288px !important;
    z-index: 70 !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
    background: var(--s-card) !important;
    overflow-y: auto !important;
}
#sidebarPanel.open {
    transform: translateX(0) !important;
}