/* ===================================================================
   بارمان سرامیک — ری‌دیزاین کامل | نسخه ۳.۰
   "از خاک تا لعاب — سفری در زیبایی"
=================================================================== */

/* ══ ۱. سیستم رنگ و متغیر ══ */

/* ── فونت IRANYekan ── */
@font-face { font-family: iranyekan; src: url('../fonts/woff/iranyekanwebthin.woff') format('woff'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: iranyekan; src: url('../fonts/woff/iranyekanweblight.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: iranyekan; src: url('../fonts/woff/iranyekanwebregular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: iranyekan; src: url('../fonts/woff/iranyekanwebmedium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: iranyekan; src: url('../fonts/woff/iranyekanwebbold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: iranyekan; src: url('../fonts/woff/iranyekanwebextrabold.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: iranyekan; src: url('../fonts/woff/iranyekanwebblack.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: iranyekan; src: url('../fonts/woff/iranyekanwebextrablack.woff') format('woff'); font-weight: 950; font-style: normal; font-display: swap; }

:root {
    /* ─── رنگ اصلی — سرامیکی روشن و مدرن ─── */
    --clay:         #A0522D;      /* تِرا کوتا روشن — رنگ برند اصلی */
    --clay-mid:     #B8693E;      /* میانه گرم */
    --clay-light:   #D4956A;      /* روشن برای hover و accent */
    --kiln:         #5C2E12;      /* تیره فقط برای header/footer */
    --kiln-mid:     #6E3A1A;
    --glaze:        #D4A843;      /* طلایی — accent */
    --glaze-light:  #ECC96A;
    --glaze-pale:   #FDF3D6;
    --ash:          #EDE8E2;
    --sand:         #FFFFFF;      /* پس‌زمینه اصلی — سفید خالص */
    --sand-warm:    #FBF7F3;      /* پس‌زمینه section‌ها */
    --parchment:    #FDF9F5;
    --ivory:        #FFFFFF;

    /* ─── رنگ‌های تکمیلی ─── */
    --terracotta:   #C4622D;
    --copper:       #B5651D;
    --rust:         #8B4513;
    --cream-rich:   #F8F0E6;
    --warm-white:   #FFFCF9;

    /* ─── متن — روشن و خوانا ─── */
    --ink:          #1A1008;      /* متن اصلی تیره */
    --ink-mid:      #4A3020;      /* متن ثانویه */
    --ink-light:    #8A6A50;      /* متن کم‌اهمیت */
    --ink-pale:     #BEA080;      /* placeholder */

    /* ─── سازگاری ─── */
    --primary:      var(--clay-mid);
    --primary-dark: var(--clay);
    --primary-light:var(--clay-light);
    --accent:       var(--glaze);
    --accent-light: var(--glaze-light);
    --cream:        var(--parchment);
    --cream-dark:   var(--sand-warm);
    --white:        #FFFFFF;

    /* ─── گرادیان‌ها ─── */
    --grad-hero:   linear-gradient(135deg, #5C2E12 0%, #8B4513 30%, #A0522D 60%, #B8693E 80%, #D4956A 100%);
    --grad-card:   linear-gradient(165deg, #FFFFFF 0%, #FDFAF7 60%, #FAF4EE 100%);
    --grad-footer: linear-gradient(145deg, #3D1E0A 0%, #5C2E12 50%, #7A3E1C 100%);
    --grad-warm:   linear-gradient(160deg, #FBF7F3 0%, #F5EDE3 50%, #EDE0D0 100%);
    --grad-accent: linear-gradient(135deg, #D4A843 0%, #ECC96A 50%, #F5D470 100%);
    --grad-clay:   linear-gradient(145deg, #5C2E12 0%, #A0522D 40%, #B8693E 70%, #D4956A 100%);

    /* ─── سایه ─── */
    --shadow-xs: 0 1px 3px rgba(74,36,16,.07);
    --shadow-sm: 0 2px 8px rgba(74,36,16,.09), 0 1px 3px rgba(74,36,16,.06);
    --shadow:    0 4px 20px rgba(74,36,16,.11), 0 2px 8px rgba(74,36,16,.07);
    --shadow-md: 0 8px 30px rgba(74,36,16,.13), 0 3px 10px rgba(74,36,16,.08);
    --shadow-lg: 0 14px 44px rgba(74,36,16,.15), 0 6px 18px rgba(74,36,16,.09);
    --shadow-xl: 0 24px 64px rgba(74,36,16,.18), 0 12px 28px rgba(74,36,16,.12), 0 4px 10px rgba(74,36,16,.07);
    --shadow-glow: 0 0 32px rgba(212,168,67,.30), 0 0 12px rgba(212,168,67,.18);
    --shadow-inset: inset 0 2px 8px rgba(74,36,16,.08);
    --shadow-top: 0 -4px 20px rgba(74,36,16,.08);

    /* ─── بوردر ─── */
    --border:        1px solid rgba(125,78,42,.13);
    --border-warm:   1px solid rgba(125,78,42,.20);
    --border-accent: 1px solid rgba(212,168,67,.32);
    --border-light:  1px solid rgba(125,78,42,.08);

    /* ─── شعاع ─── */
    --r-sm:   8px;
    --r:      14px;
    --r-lg:   22px;
    --r-xl:   32px;
    --r-full: 999px;

    /* ─── انیمیشن ─── */
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:    cubic-bezier(0, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --t:           all 0.32s var(--ease);
    --t-bounce:    all 0.42s var(--ease-bounce);
    --t-fast:      all 0.18s var(--ease);

    /* ─── تایپوگرافی ─── */
    --font-display: 'iranyekan', sans-serif;
    --font-body:    'iranyekan', sans-serif;
    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 700;
    --fw-bold:     700;
    --fw-extrabold:800;
    --fw-black:    900;

    /* ─── فضا ─── */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl:64px;
    --space-3xl:96px;
}

/* ══ ۲. ریست و پایه ══ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    font-family: 'iranyekan', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-body);
    background-color: #FFFFFF;
    color: var(--ink);
    line-height: 1.85;
    font-size: 15px;
    overflow-x: hidden;
    direction: rtl;
}

/* بافت اورلی ظریف */
body::before { display: none; }

/* گرمای محیطی */
body::after {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none; z-index: 9998;
    background:
        radial-gradient(ellipse at 15% 0%,   rgba(212,168,67,.035) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(125,78,42,.045) 0%, transparent 55%);
}

.container { max-width: 1300px; margin: 0 auto; padding: 0 28px; }

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ── Accessibility: focus visible ── */
:focus-visible {
    outline: 3px solid var(--glaze);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Print styles ── */
@media print {
    .topbar, .main-header, .mobile-menu, .mm-overlay,
    .back-to-top, #back-to-top, .newsletter-section { display: none !important; }
    body { background: #fff; color: #000; }
    a::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
}

/* اسکرول‌بار */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--sand-warm); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, var(--clay-mid), var(--clay));
    border-radius: 10px;
    border: 2px solid var(--sand-warm);
}
::-webkit-scrollbar-thumb:hover { background: var(--clay); }

/* انتخاب متن */
::selection { background: rgba(125,78,42,.18); color: var(--kiln); }

/* ══ ۳. TOPBAR ══ */
.topbar {
    background: linear-gradient(90deg, #A0522D 0%, #B8693E 50%, #A0522D 100%);
    color: rgba(255,255,255,.92);
    font-size: 12.5px;
    padding: 8px 0;
    position: relative;
}

.topbar::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}

.topbar .container {
    display: flex; gap: 24px;
    justify-content: space-between;
    flex-wrap: wrap; align-items: center;
}
.topbar span, .topbar a {
    display: flex; align-items: center; gap: 6px;
    transition: var(--t-fast); color: rgba(255,255,255,.88);
}
.topbar a:hover { color: #fff; }
.topbar-left  { display: flex; align-items: center; gap: 12px; }
.topbar-right { display: flex; align-items: center; gap: 20px; }

@media (max-width: 768px) { .topbar { display: none !important; } }

/* ══ ۴. هدر ══ */
.main-header {
    background: #FFFFFF;
    border-bottom: 1px solid rgba(160,98,42,.10);
    box-shadow: 0 2px 16px rgba(62,31,12,.06);
    position: sticky; top: 0; z-index: 100;
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.main-header::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--clay-light) 30%, var(--glaze) 50%, var(--clay-light) 70%, transparent);
    opacity: 0; transition: opacity 0.35s ease;
}

.main-header.scrolled {
    box-shadow: 0 4px 28px rgba(62,31,12,.10);
}

.main-header.scrolled::after { opacity: 0.5; }

.header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 13px 0;
}

/* لوگو */
.logo a {
    display: flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
}

.logo-emblem {
    width: 46px; height: 46px;
    background: linear-gradient(135deg, var(--kiln) 0%, var(--clay) 100%);
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    color: var(--glaze);
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(28,13,4,.28);
    transition: var(--t-bounce);
    position: relative; overflow: hidden;
}

.logo-emblem::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 55%);
    pointer-events: none;
}

.logo a:hover .logo-emblem {
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 8px 24px rgba(28,13,4,.35);
}

/* نگه‌داشتن سازگاری با logo-icon */
.logo-icon {
    font-size: 32px;
    color: var(--clay);
    line-height: 1;
    filter: drop-shadow(0 2px 8px rgba(125,78,42,.28));
    transition: var(--t-bounce);
    flex-shrink: 0;
}

.logo a:hover .logo-icon {
    transform: rotate(-10deg) scale(1.12);
}

.logo-title {
    display: block;
    font-size: 20px;
    font-weight: var(--fw-black);
    color: var(--kiln);
    line-height: 1.2;
    letter-spacing: -.4px;
}

.logo-sub {
    display: block;
    font-size: 10px;
    color: var(--ink-light);
    letter-spacing: 1.8px;
    font-weight: var(--fw-medium);
    margin-top: 1px;
}

/* ناوبری */
.main-nav { margin-right: auto; }

.main-nav ul {
    display: flex;
    gap: 3px;
}

.main-nav a {
    padding: 8px 14px;
    border-radius: var(--r-sm);
    font-size: 14px;
    font-weight: var(--fw-semibold);
    color: var(--ink-mid);
    transition: var(--t);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.main-nav a::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--clay), var(--clay-mid));
    border-radius: var(--r-sm);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.28s var(--ease);
    z-index: -1;
}

.main-nav a:hover::before,
.main-nav a.active::before { transform: scaleX(1); }

.main-nav a:hover,
.main-nav a.active { color: white; }

/* nav dropdown */
.nav-has-drop { position: relative; }

.nav-drop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 210px;
    background: var(--ivory);
    border: var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.97);
    transition: all .22s var(--ease);
    z-index: 9999;
    overflow: hidden;
    padding: 6px 0;
}

.nav-has-drop:hover .nav-drop,
.nav-has-drop.open .nav-drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.nav-drop a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: var(--fw-semibold);
    color: var(--ink-mid);
    transition: background .15s;
    white-space: nowrap;
}

.nav-drop a:hover { background: var(--parchment); color: var(--clay); }
.nav-drop a:hover::before { transform: scaleX(0); }
.nav-drop a span { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.nav-drop-sep { height: 1px; background: rgba(125,78,42,.09); margin: 4px 0; }
.nav-drop-toggle::after { content: '▾'; font-size: 10px; margin-right: 4px; opacity: .55; }
.nav-drop a.active { color: var(--clay); font-weight: var(--fw-bold); background: rgba(125,78,42,.05); }

/* دکمه‌های هدر */
.header-actions { display: flex; align-items: center; gap: 8px; }

.btn-icon {
    position: relative;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, var(--sand-warm), var(--ash));
    border-radius: var(--r);
    color: var(--clay);
    font-size: 17px;
    transition: var(--t-bounce);
    border: var(--border);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.btn-icon:hover {
    background: linear-gradient(145deg, var(--clay), var(--clay-mid));
    color: white;
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 24px rgba(74,36,16,.24);
    border-color: var(--clay);
}

.btn-icon:active { transform: translateY(0) scale(.98); }

/* بج سبد */
#cart-count-badge,
.wish-badge,
.cart-badge {
    position: absolute;
    top: -7px; left: -7px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--glaze), #E8B84B);
    color: var(--kiln);
    font-size: 10px;
    font-weight: var(--fw-black);
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--parchment);
    animation: badge-pulse 2.8s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212,168,67,.5); }
    60%       { box-shadow: 0 0 0 6px rgba(212,168,67,0); }
}

.wish-btn { position: relative; }

/* دکمه ورود */
.btn-outline-sm {
    padding: 9px 20px;
    border: 2px solid var(--clay);
    border-radius: var(--r-sm);
    color: var(--clay);
    font-weight: var(--fw-bold);
    font-size: 13px;
    transition: var(--t);
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: transparent;
    white-space: nowrap;
}

.btn-outline-sm::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--clay), var(--clay-mid));
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.28s ease;
    z-index: -1;
}

.btn-outline-sm:hover::before { transform: scaleY(1); }
.btn-outline-sm:hover { color: white; border-color: var(--clay); }

/* همبرگر */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5.5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--r-sm);
    transition: var(--t);
    margin-right: 4px;
}

.hamburger span {
    display: block;
    width: 22px; height: 2.5px;
    background: var(--clay);
    border-radius: 2px;
    transition: var(--t);
}

.hamburger:hover span { background: var(--kiln); }

/* user dropdown */
.user-dropdown-wrap { position: relative; }

.user-btn-hdr {
    display: flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(145deg, var(--sand-warm), var(--ash));
    border: var(--border);
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: var(--fw-bold);
    cursor: pointer;
    padding: 8px 14px;
    color: var(--ink-mid);
    transition: var(--t);
}

.user-btn-hdr:hover {
    background: linear-gradient(145deg, var(--clay), var(--clay-mid));
    color: white;
    border-color: var(--clay);
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 220px;
    background: var(--ivory);
    border: var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.97);
    transition: all .25s var(--ease);
    z-index: 9999;
    overflow: hidden;
}

.user-dropdown-wrap.open .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.ud-top {
    padding: 16px 18px;
    background: linear-gradient(135deg, var(--kiln), var(--clay));
    color: white;
}

.ud-top strong { display: block; font-size: 14px; font-weight: var(--fw-bold); }
.ud-top small { color: rgba(255,255,255,.55); font-size: 11.5px; }

.ud-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    color: var(--ink-mid);
    font-size: 13px;
    font-weight: var(--fw-medium);
    border-top: var(--border-light);
    transition: background .15s;
    text-decoration: none;
}

.ud-item:hover { background: var(--parchment); color: var(--clay); }
.ud-item .ei { font-size: 15px; width: 18px; text-align: center; }
.ud-item.ud-logout { color: #c0392b; }
.ud-item.ud-logout:hover { background: #FDF3F3; }

/* سرچ هدر */
.header-search-wrap { position: relative; }

.search-box {
    display: flex;
    align-items: center;
    background: var(--sand-warm);
    border: 1px solid rgba(125,78,42,.12);
    border-radius: var(--r-full);
    padding: 0 6px 0 14px;
    gap: 8px;
    transition: var(--t);
    width: 230px;
}

.search-box:focus-within {
    background: var(--ivory);
    border-color: rgba(125,78,42,.32);
    box-shadow: 0 0 0 3px rgba(212,168,67,.14), var(--shadow-sm);
    width: 270px;
}

.search-box input {
    flex: 1;
    padding: 9px 6px 9px 2px;
    background: none;
    border: none;
    outline: none;
    font-size: 13px;
    color: var(--ink);
    direction: rtl;
}

.search-box input::placeholder { color: var(--ink-light); }

.search-btn {
    width: 34px; height: 34px;
    border-radius: var(--r-full);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--clay), var(--clay-mid));
    color: white;
    font-size: 13px;
    transition: var(--t);
    flex-shrink: 0;
    border: none; cursor: pointer;
}

.search-btn:hover { background: linear-gradient(135deg, var(--kiln), var(--clay)); }

/* نتایج سرچ */
#searchResults {
    position: absolute;
    top: calc(100% + 6px);
    right: 0; left: 0;
    background: white;
    border: var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    overflow: hidden;
    display: none;
}

.slr-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: var(--border-light);
    transition: background .15s;
    text-decoration: none;
    color: inherit;
}

.slr-item:last-child { border-bottom: none; }
.slr-item:hover { background: var(--parchment); }

.slr-thumb {
    width: 44px; height: 44px;
    border-radius: var(--r-sm);
    background: var(--sand-warm);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    overflow: hidden;
    flex-shrink: 0;
}

.slr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.slr-name { font-size: 13px; font-weight: var(--fw-semibold); color: var(--ink); }
.slr-cat  { font-size: 11px; color: var(--ink-light); margin-top: 2px; }
.slr-price { margin-right: auto; font-size: 12px; font-weight: var(--fw-bold); color: var(--clay); white-space: nowrap; }

/* موبایل مِنو اورلی */
.mm-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(42,26,12,.60);
    z-index: 199;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.mm-overlay.open { display: block; }

/* موبایل مِنو */
.mobile-menu {
    display: none;
    position: fixed; inset: 0;
    z-index: 200;
}

.mobile-menu.open { display: block; }

.mobile-menu ul {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: min(300px, 88vw);
    background: linear-gradient(170deg, var(--ivory) 0%, var(--parchment) 100%);
    padding: 0 0 48px;
    overflow-y: auto;
    list-style: none;
    box-shadow: -8px 0 48px rgba(42,26,12,.28);
    animation: slideInRight .3s var(--ease-out);
}

@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }

.mm-head {
    padding: 18px 20px;
    background: linear-gradient(135deg, var(--kiln), var(--clay));
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.mm-head-logo { display: flex; align-items: center; gap: 8px; color: white; font-size: 15px; font-weight: var(--fw-extrabold); }

.mm-close-btn {
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.22);
    color: white;
    width: 32px; height: 32px;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    transition: var(--t-fast);
}

.mm-close-btn:hover { background: rgba(255,255,255,.28); }

.mobile-menu ul li { border-bottom: var(--border-light); }

.mobile-menu ul li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    font-weight: var(--fw-semibold);
    color: var(--ink-mid);
    transition: var(--t-fast);
    font-size: 14.5px;
}

.mobile-menu ul li a:hover {
    background: rgba(125,78,42,.05);
    color: var(--clay);
    padding-right: 26px;
}

.mobile-menu ul li a .ei { font-size: 17px; width: 22px; text-align: center; flex-shrink: 0; }

.mm-section-label {
    display: block;
    padding: 14px 20px 5px;
    font-size: 10px;
    font-weight: var(--fw-extrabold);
    letter-spacing: 1.5px;
    color: var(--ink-light);
    text-transform: uppercase;
}

/* ══ ۵. دکمه‌ها ══ */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 30px;
    background: linear-gradient(135deg, var(--clay) 0%, var(--clay-mid) 55%, var(--clay-light) 100%);
    color: white;
    border: none;
    border-radius: var(--r);
    font-family: inherit;
    font-size: 15px;
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: var(--t-bounce);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(74,36,16,.24), 0 1px 4px rgba(74,36,16,.14),
                inset 0 1px 0 rgba(255,255,255,.14);
}

.btn-primary::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 55%);
    pointer-events: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--kiln) 0%, var(--clay) 55%, var(--clay-mid) 100%);
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(74,36,16,.28), 0 4px 12px rgba(74,36,16,.16),
                inset 0 1px 0 rgba(255,255,255,.14);
}

.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn-accent {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 30px;
    background: var(--grad-accent);
    color: var(--kiln);
    border: none;
    border-radius: var(--r);
    font-family: inherit;
    font-size: 15px;
    font-weight: var(--fw-extrabold);
    cursor: pointer;
    transition: var(--t-bounce);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(212,168,67,.40), 0 1px 5px rgba(212,168,67,.22),
                inset 0 1px 0 rgba(255,255,255,.25);
}

.btn-accent::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.28) 0%, transparent 55%);
    pointer-events: none;
}

.btn-accent:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(212,168,67,.48), 0 4px 14px rgba(212,168,67,.28),
                inset 0 1px 0 rgba(255,255,255,.25);
    filter: brightness(1.04);
}

.btn-accent:active { transform: translateY(0); }

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 30px;
    background: rgba(255,255,255,.10);
    color: white;
    border: 1.5px solid rgba(255,255,255,.45);
    border-radius: var(--r);
    font-family: inherit;
    font-size: 15px;
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: var(--t);
    text-decoration: none;
    backdrop-filter: blur(10px);
}

.btn-outline:hover {
    background: rgba(255,255,255,.20);
    border-color: rgba(255,255,255,.80);
    box-shadow: 0 6px 22px rgba(0,0,0,.20);
    transform: translateY(-2px);
}

/* ══ ۶. HERO ══ */
.hero {
    background: var(--grad-hero);
    min-height: 90vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* الگوی نقطه‌ای پس‌زمینه */
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 70% 50%, rgba(212,168,67,.13) 0%, transparent 40%),
        radial-gradient(circle at 15% 85%, rgba(184,88,32,.14) 0%, transparent 35%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='1.5' fill='rgba(255%2C255%2C255%2C0.04)'/%3E%3Ccircle cx='0' cy='0' r='.8' fill='rgba(255%2C255%2C255%2C0.025)'/%3E%3Ccircle cx='80' cy='0' r='.8' fill='rgba(255%2C255%2C255%2C0.025)'/%3E%3Ccircle cx='0' cy='80' r='.8' fill='rgba(255%2C255%2C255%2C0.025)'/%3E%3Ccircle cx='80' cy='80' r='.8' fill='rgba(255%2C255%2C255%2C0.025)'/%3E%3C/svg%3E");
    background-size: auto, auto, 80px;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* حباب‌های تزئینی */
.hero-glow-left {
    position: absolute;
    left: -100px; top: -100px;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,168,67,.14) 0%, transparent 65%);
    pointer-events: none;
    animation: glow-drift 12s ease-in-out infinite;
}

@keyframes glow-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40%       { transform: translate(40px, -30px) scale(1.1); }
    70%       { transform: translate(-20px, 25px) scale(0.9); }
}

.hero::after {
    content: '';
    position: absolute;
    width: 700px; height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,168,67,.10) 0%, rgba(212,168,67,.02) 45%, transparent 70%);
    bottom: -280px; right: 0;
    animation: heat-bubble 13s ease-in-out infinite;
    pointer-events: none;
}

@keyframes heat-bubble {
    0%, 100% { transform: translate(0,0) scale(1); opacity: .8; }
    35%       { transform: translate(-40px,-50px) scale(1.10); opacity: 1; }
    68%       { transform: translate(25px,22px) scale(.92); opacity: .6; }
}

/* حلقه‌های تزئینی */
.hero-pattern {
    position: absolute;
    right: 8%; top: 50%; transform: translateY(-50%);
    width: 420px; height: 420px;
    border: 1px solid rgba(212,168,67,.18);
    border-radius: 50%;
    pointer-events: none;
}

.hero-pattern::before {
    content: ''; position: absolute; inset: 28px;
    border: 1px solid rgba(212,168,67,.11);
    border-radius: 50%;
}

.hero-pattern::after {
    content: ''; position: absolute; inset: 62px;
    border: 1px dashed rgba(212,168,67,.08);
    border-radius: 50%;
}

.hero-pattern {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
    background-size: 42px 42px;
    pointer-events: none;
    animation: pattern-drift 35s linear infinite;
}

@keyframes pattern-drift {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(42px, 42px); }
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
    padding: 80px 0;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(16px);
    color: var(--glaze-light);
    padding: 8px 20px;
    border-radius: var(--r-full);
    font-size: 13px;
    font-weight: var(--fw-bold);
    margin-bottom: 28px;
    border: 1px solid rgba(212,168,67,.35);
    animation: fadeInDown .7s ease both;
    letter-spacing: .4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 14px rgba(0,0,0,.12);
}

.hero-badge .pulse-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--glaze-light);
    box-shadow: 0 0 10px rgba(212,168,67,.8);
    animation: blink 1.6s infinite;
    flex-shrink: 0;
}

@keyframes blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.8); } }

.hero h1 {
    font-size: clamp(36px, 5.5vw, 60px);
    font-weight: var(--fw-black);
    color: white;
    line-height: 1.22;
    margin-bottom: 22px;
    animation: fadeInUp .8s ease .1s both;
    letter-spacing: -.8px;
    text-shadow: 0 2px 14px rgba(74,36,16,.3);
}

.hero h1 span {
    background: linear-gradient(135deg, var(--glaze-light), var(--glaze));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline-block;
}

.hero h1 span::after {
    content: '';
    position: absolute;
    bottom: -4px; right: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--glaze-light) 30%, var(--glaze) 70%, transparent);
    border-radius: 2px;
    box-shadow: 0 1px 8px rgba(212,168,67,.55);
    -webkit-text-fill-color: initial;
}

.hero p {
    font-size: 17px;
    color: rgba(255,255,255,.72);
    margin-bottom: 42px;
    max-width: 520px;
    animation: fadeInUp .8s ease .2s both;
    line-height: 2;
    text-shadow: 0 1px 4px rgba(74,36,16,.2);
}

.hero-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    animation: fadeInUp .8s ease .3s both;
}

.hero-stats {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    margin-top: 52px;
    animation: fadeInUp .8s ease .45s both;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-xl);
    overflow: hidden;
    width: fit-content;
}

.stat-item {
    color: rgba(255,255,255,.9);
    position: relative;
    padding: 20px 30px;
    text-align: center;
}

.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20%; left: 0;
    width: 1px; height: 60%;
    background: rgba(255,255,255,.12);
}

.stat-num {
    display: block;
    font-size: 28px;
    font-weight: var(--fw-black);
    color: var(--glaze-light);
    line-height: 1;
    letter-spacing: -1px;
    text-shadow: 0 0 24px rgba(212,168,67,.38);
}

.stat-label {
    font-size: 12px;
    opacity: .65;
    margin-top: 6px;
    font-weight: var(--fw-medium);
    letter-spacing: .3px;
    display: block;
}

/* ══ ۷. بخش‌های عمومی ══ */
.section { padding: 80px 0; }

.section-alt {
    padding: 80px 0;
    background: #F8F4F0;
    position: relative;
}

.section-alt::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(125,78,42,.13), transparent);
}

.section-alt::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(125,78,42,.09), transparent);
}

.section-header {
    text-align: center;
    margin-bottom: 52px;
}

.section-label {
    display: inline-block;
    color: var(--clay);
    font-size: 11.5px;
    font-weight: var(--fw-extrabold);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
    padding: 6px 20px;
    background: linear-gradient(135deg, rgba(125,78,42,.08), rgba(212,168,67,.06));
    border-radius: var(--r-full);
    border: 1px solid rgba(125,78,42,.18);
}

.section-header h2 {
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: var(--fw-black);
    color: var(--ink);
    margin-bottom: 14px;
    letter-spacing: -.5px;
    line-height: 1.28;
}

.section-header p {
    color: var(--ink-light);
    max-width: 530px;
    margin: 0 auto;
    line-height: 2;
    font-size: 15.5px;
}

/* ── نوار اعتماد ── */
.trust-strip {
    background: #FBF7F4;
    border-bottom: 1px solid rgba(160,82,45,.10);
    border-top: 1px solid rgba(160,82,45,.10);
    padding: 16px 0;
}

.trust-strip-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--ink-mid);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

.trust-icon-box {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, rgba(139,94,60,.08), rgba(200,146,58,.06));
    border-radius: 10px;
    border: 1px solid rgba(139,94,60,.12);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; color: var(--clay);
    flex-shrink: 0;
}


.trust-sep {
    width: 1px; height: 28px;
    background: rgba(139,94,60,.09);
    flex-shrink: 0;
}

/* ── سکشن آمار ── */
.stats-section {
    background: linear-gradient(145deg, #A0522D 0%, #B8693E 40%, #C8843E 70%, #D4A843 100%);
    padding: 72px 0;
    position: relative;
    overflow: hidden;
}

.stats-section::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(200,146,58,.18) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 50%, rgba(139,94,60,.14) 0%, transparent 45%);
    pointer-events: none;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,.1);
    border-radius: var(--r-xl);
    overflow: hidden;
    position: relative; z-index: 1;
}

.stat-block {
    background: rgba(255,255,255,.05);
    padding: 44px 24px;
    text-align: center;
    transition: background .3s;
    backdrop-filter: blur(4px);
}

.stat-block:hover { background: rgba(255,255,255,.10); }

.stat-block-num {
    display: block;
    font-size: 44px;
    font-weight: var(--fw-black);
    color: var(--glaze-light);
    line-height: 1.1;
    margin-bottom: 8px;
    text-shadow: 0 0 28px rgba(212,168,67,.35);
}

.stat-block-label {
    font-size: 14px;
    color: rgba(255,255,255,.55);
}

/* ── تستیمونیال‌ها ── */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 22px;
}

.testimonial-card {
    background: #FFFFFF;
    border: 1px solid rgba(160,98,42,.10);
    border-radius: var(--r-lg);
    padding: 28px;
    box-shadow: 0 2px 14px rgba(62,31,12,.06);
    transition: var(--t-bounce);
    position: relative; overflow: hidden;
}

.testimonial-card::before {
    content: '"';
    position: absolute; top: 10px; left: 18px;
    font-size: 88px; color: rgba(212,168,67,.10);
    line-height: 1; font-family: Georgia, serif;
    font-weight: 900; pointer-events: none;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 44px rgba(62,31,12,.11);
    border-color: rgba(160,98,42,.18);
}

.testi-stars { display: flex; gap: 3px; margin-bottom: 14px; }
.testi-stars i { font-size: 13px; color: var(--glaze); }
.testi-text { font-size: 14.5px; color: var(--ink-mid); line-height: 1.9; margin-bottom: 18px; }

.testi-author {
    display: flex; align-items: center; gap: 12px;
    padding-top: 16px;
    border-top: var(--border-light);
}

.testi-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clay), var(--clay-mid));
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: var(--fw-extrabold); color: white;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(74,36,16,.2);
}

.testi-name { font-size: 14px; font-weight: var(--fw-bold); color: var(--ink); }
.testi-role { font-size: 12px; color: var(--ink-pale); margin-top: 1px; }

/* ── خبرنامه ── */
.newsletter-section {
    background: linear-gradient(135deg, #FEF8F0 0%, #FDF3E6 100%);
    border-top: 1px solid rgba(160,98,42,.10);
    border-bottom: 1px solid rgba(160,98,42,.10);
    padding: 60px 0;
}

.newsletter-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.newsletter-text h3 { font-size: 24px; font-weight: var(--fw-extrabold); color: var(--kiln); margin-bottom: 6px; }
.newsletter-text p  { font-size: 14px; color: var(--ink-light); }

.newsletter-form {
    display: flex;
    flex: 1;
    min-width: 260px;
    max-width: 440px;
    background: var(--ivory);
    border: 1.5px solid rgba(125,78,42,.15);
    border-radius: var(--r-full);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.newsletter-form input {
    flex: 1;
    padding: 13px 20px;
    border: none; background: none; outline: none;
    font-family: inherit; font-size: 14px; color: var(--ink);
    direction: rtl;
}

.newsletter-form input::placeholder { color: var(--ink-pale); }

.newsletter-form button {
    padding: 13px 24px;
    background: linear-gradient(135deg, var(--clay), var(--clay-mid));
    color: white;
    border: none; font-family: inherit; font-size: 14px; font-weight: var(--fw-bold);
    cursor: pointer; transition: var(--t);
    white-space: nowrap;
}

.newsletter-form button:hover { background: linear-gradient(135deg, var(--kiln), var(--clay)); }

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

.blog-card {
    background: var(--grad-card);
    border: var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.8);
    transition: var(--t);
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,.9);
    border-color: rgba(125,78,42,.18);
}

.blog-img {
    height: 210px;
    background: linear-gradient(160deg, var(--clay), var(--clay-mid));
    display: flex; align-items: center; justify-content: center;
    font-size: 64px;
    position: relative; overflow: hidden;
}

.blog-img::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(28,13,4,.45));
}

.blog-category-badge {
    position: absolute; bottom: 12px; right: 12px; z-index: 1;
    background: rgba(212,168,67,.9);
    backdrop-filter: blur(8px);
    color: var(--kiln);
    font-size: 11.5px; font-weight: var(--fw-extrabold);
    padding: 4px 12px; border-radius: var(--r-full);
}

.blog-body { padding: 20px 22px; }

.blog-meta {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 10px;
}

.blog-meta span {
    font-size: 12px; color: var(--ink-pale);
    display: flex; align-items: center; gap: 4px;
}

.blog-title {
    font-size: 15.5px; font-weight: var(--fw-bold); color: var(--ink);
    margin-bottom: 10px; line-height: 1.5;
    transition: color .2s;
    display: block;
}

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

.blog-excerpt {
    font-size: 13.5px; color: var(--ink-light);
    line-height: 1.8; margin-bottom: 16px;
}

.blog-read-more {
    font-size: 13px; font-weight: var(--fw-bold); color: var(--clay);
    display: inline-flex; align-items: center; gap: 5px;
    transition: gap .2s;
}

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

/* ══ ۸. دسته‌بندی‌ها ══ */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px;
}

.category-card {
    background: #FFFFFF;
    border-radius: var(--r-lg);
    padding: 32px 22px 28px;
    text-align: center;
    border: 1px solid rgba(160,98,42,.10);
    box-shadow: 0 2px 12px rgba(62,31,12,.06), inset 0 1px 0 rgba(255,255,255,1);
    transition: var(--t-bounce);
    position: relative; overflow: hidden;
    cursor: pointer; text-decoration: none; color: inherit; display: block;
}

.category-card::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--clay-light), var(--glaze), var(--clay-light), transparent);
    transform: scaleX(0); transition: transform .35s var(--ease);
}

.category-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 48px rgba(62,31,12,.12);
    border-color: rgba(160,98,42,.20);
}

.category-card:hover::after { transform: scaleX(1); }

.category-icon {
    font-size: 48px; display: block; margin-bottom: 16px; line-height: 1;
    transition: transform .4s var(--ease-bounce);
}

.category-card:hover .category-icon { transform: scale(1.15) rotate(-5deg); }

.category-name {
    font-size: 15px; font-weight: var(--fw-bold); color: var(--ink); margin-bottom: 6px;
}

.category-count {
    font-size: 12px; color: var(--clay); font-weight: var(--fw-semibold);
    background: rgba(160,98,42,.07); display: inline-block;
    padding: 3px 10px; border-radius: var(--r-full);
}

/* ══ ۹. کارت محصول ══ */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.product-card {
    background: #FFFFFF;
    border-radius: var(--r-lg); overflow: hidden;
    box-shadow: 0 2px 12px rgba(62,31,12,.07);
    transition: var(--t);
    border: 1px solid rgba(160,98,42,.09);
    position: relative; display: flex; flex-direction: column;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 52px rgba(62,31,12,.13);
    border-color: rgba(160,98,42,.20);
}

.product-img {
    aspect-ratio: 1 / 1;
    background: linear-gradient(145deg, #EDE3D6, #E2D5C4, #D8C9B4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    position: relative;
    overflow: hidden;
    transition: var(--t);
}

.product-img::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 45%;
    background: linear-gradient(to bottom, rgba(255,255,255,.25), transparent);
    pointer-events: none; z-index: 1;
}

.product-img::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
    background: linear-gradient(to top, rgba(251,248,242,.55), transparent);
    z-index: 1;
}

.product-card:hover .product-img { background: linear-gradient(145deg, #E2D5C4, #D8C9B4, #CFBCA2); }

.product-badge {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 2;
    padding: 4px 12px;
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: var(--fw-extrabold);
    letter-spacing: .4px;
    background: linear-gradient(135deg, var(--glaze), #E8B84B);
    color: var(--kiln);
    box-shadow: 0 3px 12px rgba(212,168,67,.45);
}

.product-badge.new  { background: linear-gradient(135deg, #27ae60, #2ecc71); color: white; box-shadow: 0 3px 12px rgba(39,174,96,.4); }
.product-badge.sale { background: linear-gradient(135deg, #e53935, #ef5350); color: white; box-shadow: 0 3px 12px rgba(229,57,53,.4); }

/* دکمه‌های روی کارت */
.product-actions {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateX(-8px);
    transition: all .32s var(--ease);
}

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

.product-action-btn {
    width: 36px; height: 36px;
    border-radius: var(--r-sm);
    background: rgba(255,255,255,.9);
    border: var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    transition: var(--t-fast);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    color: var(--ink-mid);
    text-decoration: none;
}

.product-action-btn:hover { background: white; color: var(--clay); transform: scale(1.08); }

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

.product-category {
    font-size: 11.5px;
    font-weight: var(--fw-semibold);
    color: var(--clay-light);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.product-name {
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--ink);
    line-height: 1.5;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-name a:hover { color: var(--clay); }

.product-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--glaze);
}

.product-rating .count { color: var(--ink-light); }

.product-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.price-current {
    font-size: 18px;
    font-weight: var(--fw-black);
    color: var(--clay);
    letter-spacing: -.5px;
}

.price-old {
    font-size: 14px;
    color: var(--ink-pale);
    text-decoration: line-through;
    font-weight: var(--fw-regular);
}

.price-unit {
    font-size: 12px;
    color: var(--ink-light);
    margin-right: auto;
}

.add-cart-btn {
    width: 100%;
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--clay), var(--clay-mid));
    color: white;
    border: none;
    border-radius: var(--r);
    font-family: inherit;
    font-size: 13px;
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: var(--t-bounce);
    display: flex; align-items: center; justify-content: center; gap: 7px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(74,36,16,.22);
    margin-top: 4px;
}

.add-cart-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.14) 0%, transparent 55%);
    pointer-events: none;
}

.add-cart-btn:hover {
    background: linear-gradient(135deg, var(--kiln), var(--clay));
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(74,36,16,.3);
}

.add-cart-btn:active { transform: translateY(0); }
.add-cart-btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }

/* ══ ۱۰. فوتر ══ */
.main-footer {
    background: linear-gradient(145deg, #6B3520 0%, #8B4A28 35%, #A05830 60%, #7A3E1C 100%);
    color: rgba(255,255,255,.90);
    position: relative;
    overflow: hidden;
}

.main-footer::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}

/* ── فوتر ساده و کوچک ── */
.main-footer .container { padding-top: 0; }

.footer-main {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding: 48px 0 36px;
}

/* لوگو */
.footer-logo {
    display: flex; align-items: center; gap: 11px;
    margin-bottom: 14px;
}
.footer-logo-emblem {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, var(--clay), var(--glaze));
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--kiln); flex-shrink: 0;
}
.footer-logo-title { display: block; font-size: 16px; font-weight: var(--fw-black); color: #fff; }
.footer-logo-sub   { display: block; font-size: 10.5px; color: rgba(255,255,255,.4); margin-top: 1px; }

.footer-brand p {
    font-size: 13px; line-height: 1.85;
    color: rgba(255,255,255,.5); margin-bottom: 18px;
}

/* شبکه‌های اجتماعی */
.footer-social { display: flex; gap: 8px; }
.footer-social a {
    width: 36px; height: 36px; border-radius: var(--r-sm);
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; color: rgba(255,255,255,.55);
    text-decoration: none; transition: var(--t-fast);
}
.footer-social a:hover {
    background: rgba(212,168,67,.2); border-color: rgba(212,168,67,.4);
    color: var(--glaze-light); transform: translateY(-2px);
}

/* ستون‌های لینک */
.footer-col h4 {
    font-size: 13.5px; font-weight: var(--fw-extrabold);
    color: #fff; margin-bottom: 16px;
    padding-bottom: 10px; position: relative;
}
.footer-col h4::after {
    content: ''; position: absolute; bottom: 0; right: 0;
    width: 28px; height: 2px;
    background: linear-gradient(90deg, var(--glaze), transparent);
    border-radius: 1px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 1px; }
.footer-col ul li a {
    font-size: 13px; color: rgba(255,255,255,.5);
    padding: 5px 0; display: block;
    text-decoration: none; transition: var(--t-fast);
}
.footer-col ul li a:hover { color: rgba(255,255,255,.88); padding-right: 4px; }

/* لیست تماس */
.footer-contact-list { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.footer-contact-list li {
    display: flex; align-items: center; gap: 9px;
    font-size: 13px; color: rgba(255,255,255,.55);
}
.footer-contact-list li i { color: var(--glaze); font-size: 13px; flex-shrink: 0; width: 14px; text-align: center; }
.footer-contact-list li a { color: rgba(255,255,255,.55); text-decoration: none; transition: var(--t-fast); }
.footer-contact-list li a:hover { color: var(--glaze-light); }

/* خط پایین */
.footer-bottom {
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,.09);
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.footer-bottom p { font-size: 12px; color: rgba(255,255,255,.4); }
.footer-bottom-links { display: flex; gap: 16px; }
.footer-bottom-links a {
    font-size: 12px; color: rgba(255,255,255,.38);
    text-decoration: none; transition: var(--t-fast);
}
.footer-bottom-links a:hover { color: rgba(255,255,255,.7); }

/* ══ ۱۱. بازگشت به بالا ══ */
#back-to-top {
    position: fixed;
    bottom: 26px; left: 26px;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clay), var(--clay-mid));
    color: var(--glaze-light);
    border: 1.5px solid rgba(212,168,67,.4);
    cursor: pointer;
    font-size: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: var(--t-bounce);
    box-shadow: 0 6px 24px rgba(74,36,16,.3), inset 0 1px 0 rgba(255,255,255,.15);
}

#back-to-top:hover {
    background: linear-gradient(135deg, var(--kiln), var(--clay));
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 12px 32px rgba(74,36,16,.38);
}

/* ══ ۱۲. انیمیشن‌ها ══ */
@keyframes fadeInUp   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn    { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes float      { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.fade-in { animation: fadeInUp 0.65s ease both; }

/* ══ ۱۳. آلرت‌ها ══ */
.alert {
    padding: 14px 22px;
    border-radius: var(--r);
    margin-bottom: 22px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: fadeInDown .4s ease;
    border-right: 4px solid;
    box-shadow: var(--shadow-sm);
}

.alert-success { background: #F0FBF4; color: #1a5c30; border-color: #2ecc71; }
.alert-error   { background: #FDF3F3; color: #7a1c1c; border-color: #D44030; }
.alert-info    { background: #F0F6FF; color: #1a3a6c; border-color: #3498db; }
.alert-warning { background: #FFFBF0; color: #7a5a00; border-color: var(--glaze); }

/* ══ ۱۴. حالت خالی ══ */
.empty-state {
    text-align: center;
    padding: 96px 20px;
    background: var(--grad-card);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.85);
    border: var(--border);
}

.empty-state-icon { font-size: 90px; margin-bottom: 24px; display: block; animation: float 3s ease-in-out infinite; }
.empty-state h3 { font-size: 24px; font-weight: var(--fw-extrabold); color: var(--ink); margin-bottom: 12px; }
.empty-state p  { color: var(--ink-light); margin-bottom: 28px; font-size: 15px; }

/* ══ ۱۵. فرم‌ها ══ */
.form-group { margin-bottom: 22px; }

.form-label {
    display: block;
    font-size: 13.5px;
    font-weight: var(--fw-semibold);
    color: var(--ink-mid);
    margin-bottom: 8px;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    background: var(--parchment);
    border: 1.5px solid rgba(125,78,42,.16);
    border-radius: var(--r);
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    outline: none;
    transition: var(--t);
    direction: rtl;
}

.form-control::placeholder { color: var(--ink-light); }

.form-control:focus {
    border-color: var(--clay-light);
    background: white;
    box-shadow: 0 0 0 3px rgba(125,78,42,.10), var(--shadow-sm);
}

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

/* ══ ۱۶. کارت‌های عمومی ══ */
.card {
    background: var(--grad-card);
    border-radius: var(--r-lg);
    padding: 28px;
    border: var(--border);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.8);
    transition: var(--t);
}

.card:hover {
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.9);
    transform: translateY(-4px);
}

/* ══ ۱۷. سبد خرید ══ */
.cart-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

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

.cart-table th {
    padding: 14px 18px;
    text-align: right;
    font-size: 13px;
    font-weight: var(--fw-bold);
    color: var(--ink-light);
    border-bottom: var(--border-warm);
    background: linear-gradient(145deg, var(--sand-warm), var(--ash));
}

.cart-table td {
    padding: 18px;
    vertical-align: middle;
    border-bottom: var(--border-light);
}

.cart-item-thumb {
    width: 72px; height: 72px;
    border-radius: var(--r);
    background: var(--sand-warm);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    overflow: hidden;
    border: var(--border);
}

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

.quantity-control {
    display: inline-flex;
    align-items: center;
    border: var(--border-warm);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--parchment);
}

.qty-btn {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: none;
    border: none;
    color: var(--clay);
    font-size: 16px;
    cursor: pointer;
    transition: var(--t-fast);
    font-weight: var(--fw-bold);
}

.qty-btn:hover { background: var(--sand-warm); color: var(--kiln); }

.qty-display {
    min-width: 40px;
    text-align: center;
    font-weight: var(--fw-bold);
    font-size: 15px;
    color: var(--ink);
    border-left: var(--border);
    border-right: var(--border);
    padding: 0 8px;
    line-height: 34px;
}

.cart-remove {
    width: 32px; height: 32px;
    border-radius: var(--r-sm);
    background: rgba(229,57,53,.08);
    border: 1px solid rgba(229,57,53,.15);
    color: #c62828;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: var(--t-fast);
}

.cart-remove:hover { background: rgba(229,57,53,.15); transform: scale(1.08); }

.cart-summary-box {
    background: var(--grad-card);
    border-radius: var(--r-lg);
    padding: 28px;
    border: var(--border);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.8);
    position: sticky; top: 100px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    font-size: 14px;
    color: var(--ink-mid);
    border-bottom: var(--border-light);
}

.summary-row.total {
    font-size: 18px;
    font-weight: var(--fw-black);
    color: var(--clay);
    border-bottom: none;
    padding-top: 16px;
}

.coupon-input { display: flex; gap: 8px; margin: 18px 0; }
.coupon-input input {
    flex: 1;
    padding: 11px 15px;
    border: 1.5px solid rgba(125,78,42,.16);
    border-radius: var(--r);
    font-family: inherit;
    font-size: 13px;
    background: var(--parchment);
    outline: none;
    transition: var(--t);
    direction: rtl;
}
.coupon-input input:focus { border-color: var(--clay-light); background: white; box-shadow: 0 0 0 3px rgba(125,78,42,.08); }
.coupon-input button {
    padding: 11px 18px;
    background: linear-gradient(135deg, var(--clay), var(--clay-mid));
    color: white;
    border: none;
    border-radius: var(--r);
    font-family: inherit;
    font-size: 13px;
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: var(--t-bounce);
    white-space: nowrap;
}
.coupon-input button:hover { background: linear-gradient(135deg, var(--kiln), var(--clay)); transform: scale(1.03); }

/* ══ ۱۸. صفحه لاگین ══ */
.auth-wrapper {
    min-height: calc(100vh - 180px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    background:
        radial-gradient(ellipse at 18% 80%, rgba(125,78,42,.06) 0%, transparent 55%),
        radial-gradient(ellipse at 82% 18%, rgba(212,168,67,.06) 0%, transparent 55%),
        var(--parchment);
}

.auth-card {
    background: white;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,.95);
    width: 100%;
    max-width: 500px;
    overflow: hidden;
    border: var(--border);
    animation: scaleIn .4s var(--ease-bounce);
}

.auth-tabs { display: flex; }

.auth-tab {
    flex: 1;
    padding: 20px;
    text-align: center;
    font-weight: var(--fw-extrabold);
    font-size: 15px;
    cursor: pointer;
    background: linear-gradient(160deg, var(--sand-warm), var(--ash));
    color: var(--ink-light);
    border: none;
    font-family: inherit;
    transition: var(--t);
}

.auth-tab.active {
    background: white;
    color: var(--clay);
    box-shadow: 0 -3px 0 var(--clay) inset;
}

.auth-body { padding: 40px; }

.auth-logo { text-align: center; margin-bottom: 36px; }
.auth-logo .logo-icon { font-size: 58px; color: var(--clay); filter: drop-shadow(0 4px 16px rgba(125,78,42,.28)); display: block; margin-bottom: 8px; }
.auth-logo h2 { font-size: 22px; margin-top: 8px; color: var(--ink); font-weight: var(--fw-extrabold); }
.auth-logo p  { color: var(--ink-light); font-size: 14px; }

/* ══ ۱۹. راهنمای خرید ══ */
.guide-steps { counter-reset: step; max-width: 920px; margin: 0 auto; }

.guide-step {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 30px;
    background: var(--grad-card);
    border-radius: var(--r-lg);
    padding: 36px;
    margin-bottom: 22px;
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.8);
    border: var(--border);
    transition: var(--t);
    position: relative;
    overflow: hidden;
}

.guide-step::before {
    content: '';
    position: absolute; right: 0; top: 0; bottom: 0; width: 0;
    background: linear-gradient(to left, rgba(125,78,42,.04), transparent);
    transition: width .4s ease;
}

.guide-step:hover { box-shadow: var(--shadow-lg); transform: translateX(-5px); }
.guide-step:hover::before { width: 100%; }

.step-num {
    width: 68px; height: 68px;
    background: linear-gradient(145deg, var(--clay), var(--kiln));
    color: white;
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    font-weight: var(--fw-black);
    box-shadow: 0 8px 24px rgba(74,36,16,.28), inset 0 1px 0 rgba(255,255,255,.15);
    transition: var(--t-bounce);
    flex-shrink: 0;
}

.guide-step:hover .step-num { transform: rotate(-6deg) scale(1.06); }
.step-content h3 { font-size: 20px; font-weight: var(--fw-extrabold); color: var(--ink); margin-bottom: 10px; }
.step-content p  { color: var(--ink-mid); line-height: 2; }

/* ══ ۲۰. سکشن why us ══ */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.feature-item {
    text-align: center;
    background: #FFFFFF;
    border-radius: var(--r-lg);
    padding: 32px 22px 28px;
    border: 1px solid rgba(160,98,42,.10);
    box-shadow: 0 2px 12px rgba(62,31,12,.06), inset 0 1px 0 rgba(255,255,255,1);
    transition: var(--t-bounce);
    position: relative; overflow: hidden;
}

.feature-item::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--clay-light), var(--glaze), var(--clay-light), transparent);
    transform: scaleX(0); transition: transform .35s var(--ease);
}

.feature-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 48px rgba(62,31,12,.12);
    border-color: rgba(160,98,42,.20);
}

.feature-item:hover::after { transform: scaleX(1); }

.feature-icon {
    width: 60px; height: 60px;
    background: linear-gradient(135deg, var(--clay), var(--clay-mid));
    border-radius: var(--r-lg);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: #fff;
    margin: 0 auto 18px;
    box-shadow: 0 4px 14px rgba(62,31,12,.18);
    transition: transform .4s var(--ease-bounce);
    flex-shrink: 0;
}

.feature-item:hover .feature-icon { transform: scale(1.15) rotate(-5deg); }

.feature-name {
    font-size: 14.5px;
    font-weight: var(--fw-bold);
    color: var(--ink);
    margin-bottom: 8px;
}

.feature-desc {
    font-size: 13px;
    color: var(--ink-light);
    line-height: 1.75;
}

/* ══ ۲۱. CTA بنر ══ */
.cta-banner {
    background: linear-gradient(140deg, var(--kiln) 0%, #4A2010 40%, var(--clay) 75%, #B8784A 100%);
    border-radius: var(--r-xl);
    padding: 64px 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.cta-banner::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 10% 50%, rgba(212,168,67,.16) 0%, transparent 45%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='.8' fill='rgba(255%2C255%2C255%2C0.04)'/%3E%3C/svg%3E");
    background-size: auto, 40px;
    pointer-events: none;
}

.cta-banner::after {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,168,67,.12) 0%, transparent 65%);
    bottom: -200px; left: -100px;
    pointer-events: none;
}

.cta-text { position: relative; z-index: 1; }

.cta-banner h2 {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: var(--fw-black);
    margin-bottom: 10px;
    position: relative; z-index: 1;
    letter-spacing: -.4px;
}

.cta-banner p {
    opacity: .72;
    max-width: 420px;
    font-size: 15px;
    line-height: 1.85;
    position: relative; z-index: 1;
}

.cta-banner .btns,
.cta-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    position: relative; z-index: 1;
}

/* ══ ۲۲. صفحات داخلی ══ */
.page-hero {
    background: linear-gradient(135deg, var(--kiln) 0%, var(--clay) 60%, var(--clay-mid) 100%);
    padding: 52px 0;
    color: white;
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0);
    background-size: 38px 38px;
    pointer-events: none;
}

.page-hero-content { position: relative; z-index: 1; }

.page-hero h1 {
    font-size: 38px;
    font-weight: var(--fw-black);
    margin-bottom: 10px;
    letter-spacing: -.4px;
}

.page-hero p {
    font-size: 16px;
    opacity: .78;
    max-width: 520px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 16px;
    color: rgba(255,255,255,.6);
    flex-wrap: wrap;
}

.breadcrumb a { color: inherit; text-decoration: none; transition: var(--t-fast); }
.breadcrumb a:hover { color: var(--glaze-light); }
.breadcrumb span { color: rgba(255,255,255,.35); font-size: 11px; }

/* ══ ۲۳. فیلتر و سورت فروشگاه ══ */
.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    background: var(--grad-card);
    border-radius: var(--r-lg);
    border: var(--border);
    box-shadow: var(--shadow-sm);
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.shop-results { font-size: 14px; color: var(--ink-light); }
.shop-results strong { color: var(--clay); font-weight: var(--fw-bold); }

.sort-select {
    padding: 9px 14px;
    border: var(--border-warm);
    border-radius: var(--r);
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink-mid);
    background: var(--parchment);
    outline: none;
    cursor: pointer;
    transition: var(--t);
    direction: rtl;
}

.sort-select:focus { border-color: var(--clay-light); box-shadow: 0 0 0 3px rgba(125,78,42,.10); }

/* ══ ۲۴. صفحه محصول ══ */
.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: start;
}

.product-gallery { position: sticky; top: 100px; }

.gallery-main {
    border-radius: var(--r-lg);
    overflow: hidden;
    background: linear-gradient(145deg, #EDE3D6, #E2D5C4);
    height: 420px;
    display: flex; align-items: center; justify-content: center;
    font-size: 100px;
    border: var(--border);
    box-shadow: var(--shadow-md);
    margin-bottom: 12px;
}

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

.gallery-thumb {
    width: 72px; height: 72px;
    border-radius: var(--r);
    border: 2px solid transparent;
    overflow: hidden;
    cursor: pointer;
    background: var(--sand-warm);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    transition: var(--t);
}

.gallery-thumb.active { border-color: var(--clay); }
.gallery-thumb:hover  { border-color: var(--clay-light); transform: translateY(-2px); }

.product-info { }

.product-info .product-name { font-size: 28px; margin-bottom: 12px; }

.product-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: var(--r-full);
    font-size: 12px;
    font-weight: var(--fw-bold);
}

.stock-badge.in-stock  { background: rgba(39,174,96,.10); color: #1a7a40; }
.stock-badge.out-stock { background: rgba(229,57,53,.10); color: #a00000; }

.product-price-big {
    margin-bottom: 24px;
    padding: 20px;
    background: var(--glaze-pale);
    border-radius: var(--r-lg);
    border: var(--border-accent);
}

.price-big-current {
    font-size: 34px;
    font-weight: var(--fw-black);
    color: var(--clay);
    letter-spacing: -1px;
}

.add-qty-row {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 22px;
}

/* ══ ۲۵. پاجینیشن ══ */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 52px;
    flex-wrap: wrap;
}

.page-btn {
    width: 40px; height: 40px;
    border-radius: var(--r);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--ink-mid);
    border: var(--border);
    background: var(--grad-card);
    transition: var(--t);
    text-decoration: none;
    box-shadow: var(--shadow-xs);
}

.page-btn:hover { color: white; background: linear-gradient(135deg, var(--clay), var(--clay-mid)); border-color: var(--clay); transform: translateY(-2px); }

.page-btn.active { color: white; background: linear-gradient(135deg, var(--clay), var(--clay-mid)); border-color: var(--clay); box-shadow: 0 4px 14px rgba(74,36,16,.24); }

/* ══ ۲۶. بج‌های محصول ══ */
.product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.product-tag {
    padding: 4px 12px;
    border-radius: var(--r-full);
    font-size: 12px;
    font-weight: var(--fw-semibold);
    background: var(--sand-warm);
    color: var(--clay);
    border: var(--border);
}

/* ══ ۲۷. تایمر شمارش‌معکوس ══ */
.timer-wrap {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.timer-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    background: rgba(0,0,0,.18);
    border-radius: var(--r);
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.12);
}

.timer-num { font-size: 22px; font-weight: var(--fw-black); line-height: 1; }
.timer-label { font-size: 10px; opacity: .65; margin-top: 3px; }
.timer-sep { font-size: 22px; font-weight: var(--fw-black); color: var(--glaze-light); margin-top: -4px; }

/* ══ ۲۸. ریسپانسیو ══ */
@media (max-width: 1024px) {
    .footer-main         { grid-template-columns: 1fr 1fr; gap: 24px; }
    .product-detail-grid { grid-template-columns: 1fr; }
    .cart-grid           { grid-template-columns: 1fr; }
    .product-gallery     { position: static; }
    .stats-grid          { grid-template-columns: repeat(2,1fr); }
    .cta-banner          { flex-direction: column; text-align: center; }
    .cta-banner p        { max-width: 100%; }
    .cta-btns            { justify-content: center; }
}

@media (max-width: 768px) {
    .main-nav { display: none; }
    .header-actions .btn-outline-sm { display: none; }
    .header-inner { gap: 10px; padding: 14px 0; }
    .logo-sub   { display: none; }
    .logo-title { font-size: 18px; }
    .logo-emblem { width: 40px; height: 40px; font-size: 19px; border-radius: 11px; }
    .main-nav + .header-actions,
    .header-actions { margin-right: auto; }
    .hamburger { display: flex; }
    .hamburger span { width: 24px; height: 2.5px; }
    .btn-icon  { width: 42px; height: 42px; font-size: 16px; }
    .search-box { display: none; }

    .hero { min-height: auto; }
    .hero-content { padding: 36px 0 28px; max-width: 100%; text-align: center; }
    .hero h1 { font-size: 28px; letter-spacing: -.3px; margin-bottom: 16px; }
    .hero p  { font-size: 14.5px; max-width: 100%; margin-bottom: 28px; margin-right: auto; margin-left: auto; }
    .hero-badge { font-size: 11.5px; padding: 6px 14px; margin-bottom: 20px; }
    .hero-btns { flex-direction: row; align-items: center; justify-content: center; gap: 10px; }
    .hero-btns a { flex: 1; justify-content: center; text-align: center; padding: 12px 16px; font-size: 13.5px; }
    .hero-stats { margin-top: 32px; width: 100%; border-radius: var(--r-lg); display: grid; grid-template-columns: repeat(4,1fr); }
    .stat-item  { padding: 14px 8px; }
    .stat-item:not(:last-child)::after { top: 15%; height: 70%; }
    .stat-num   { font-size: 20px; letter-spacing: -.5px; }
    .stat-label { font-size: 10px; }
    .hero-pattern { display: none; }

    .section, .section-alt { padding: 48px 0; }
    .section-header h2  { font-size: 28px; }
    .section-header { margin-bottom: 36px; }

    .footer-main   { grid-template-columns: 1fr 1fr; gap: 20px; }
    .footer-bottom { flex-direction: column; text-align: center; gap: 10px; }

    .categories-grid { grid-template-columns: repeat(2, 1fr); }
    .features-grid   { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .products-grid   { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .product-body    { padding: 12px 14px 14px; }
    .product-category { font-size: 10px; }
    .price-current   { font-size: 16px; }
    .price-old       { font-size: 12px; }
    .add-cart-btn    { padding: 9px 10px; font-size: 12px; gap: 5px; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .blog-grid       { grid-template-columns: 1fr; }
    .form-row        { grid-template-columns: 1fr; }
    .guide-step      { grid-template-columns: 1fr; }
    .cta-banner      { padding: 44px 28px; }
    .stats-grid      { grid-template-columns: repeat(2,1fr); }
    .newsletter-inner { flex-direction: column; text-align: center; }
    .newsletter-form  { max-width: 100%; }

    .page-hero h1 { font-size: 28px; }
    .shop-toolbar { flex-direction: column; align-items: stretch; }
    .trust-strip-inner { gap: 16px; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 23px; }
    .hero-btns { flex-direction: column; align-items: stretch; }
    .hero-btns a { flex: none; }
    .hero-stats { grid-template-columns: repeat(2,1fr); }
    .stat-num   { font-size: 18px; }
    .stat-label { font-size: 9.5px; }
    .container  { padding: 0 16px; }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .product-body  { padding: 10px 12px 12px; gap: 4px; }
    .product-name  { font-size: 12.5px; }
    .price-current { font-size: 14px; }
    .add-cart-btn  { padding: 8px 8px; font-size: 11.5px; }
    .categories-grid { grid-template-columns: 1fr 1fr; }
    .features-grid   { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .logo-icon       { font-size: 26px; }
    .auth-body       { padding: 24px 20px; }
    .footer-badges   { justify-content: center; }
    .stats-grid      { grid-template-columns: repeat(2,1fr); }
    .stat-block-num  { font-size: 32px; }
}

/* ═══════════════════════════════════════════════════════════════════
   بارمان سرامیک — سیستم رنگ‌بندی تکمیلی | نسخه ۴.۰
   «هماهنگی رنگ و فضا — از خاک تا لعاب»
   ═══════════════════════════════════════════════════════════════════ */

/* ══ متغیرهای رنگ تکمیلی — پالت سه‌گانه ══ */
:root {
    /* ── رنگ‌های مکمل (Complementary) ── */
    --teal:         #2A7A7A;   /* فیروزه‌ای — مکمل ترا کوتا */
    --teal-mid:     #3A9090;
    --teal-light:   #5AACAC;
    --teal-pale:    #EAF5F5;

    --sage:         #6B8C5A;   /* سبز خاکی — مکمل طلایی */
    --sage-mid:     #7EA06B;
    --sage-light:   #A0BA8E;
    --sage-pale:    #EEF4EA;

    --slate:        #4A5568;   /* خاکستری گرم — تعادل‌بخش */
    --slate-mid:    #60748A;
    --slate-light:  #8898AA;
    --slate-pale:   #EEF2F7;

    /* ── رنگ‌های آنالوگ (Analogous) — سرامیک خام ── */
    --ochre:        #C47C2B;   /* خاک اُخره — بین طلا و ترا کوتا */
    --ochre-light:  #D99A4E;
    --sienna:       #8B4020;   /* سیِنا — تیره‌تر از ترا کوتا */
    --umber:        #5C3020;   /* اُمبر — عمق خاک */

    /* ── پس‌زمینه‌های متنوع section ── */
    --bg-warm-1:    #FBF7F3;   /* گرم روشن */
    --bg-warm-2:    #F5EDE3;   /* گرم میانه */
    --bg-warm-3:    #EDE0D0;   /* گرم تیره */
    --bg-cool-1:    #F0F7F7;   /* خنک روشن (تیل) */
    --bg-cool-2:    #E8F2EE;   /* خنک سبز */
    --bg-neutral:   #F8F6F2;   /* خنثی گرم */

    /* ── گرادیان‌های جدید ── */
    --grad-teal:    linear-gradient(135deg, #2A7A7A 0%, #3A9090 50%, #5AACAC 100%);
    --grad-sage:    linear-gradient(135deg, #6B8C5A 0%, #7EA06B 50%, #A0BA8E 100%);
    --grad-ochre:   linear-gradient(135deg, #8B4020 0%, #C47C2B 50%, #D99A4E 100%);
    --grad-earth:   linear-gradient(160deg, #5C2E12 0%, #8B4513 25%, #A0522D 50%, #C47C2B 75%, #D4A843 100%);
    --grad-section-a: linear-gradient(160deg, #FBF7F3 0%, #F5EDE3 100%);
    --grad-section-b: linear-gradient(160deg, #EAF5F5 0%, #E0F0EE 100%);
    --grad-section-c: linear-gradient(160deg, #EEF4EA 0%, #E6F0E0 100%);

    /* ── سایه‌های رنگی ── */
    --shadow-teal:  0 8px 28px rgba(42,122,122,.20);
    --shadow-sage:  0 8px 28px rgba(107,140,90,.18);
    --shadow-ochre: 0 8px 28px rgba(196,124,43,.22);
}

/* ══ ۱. TOPBAR بهبودیافته ══ */
.topbar {
    background: linear-gradient(90deg, var(--kiln) 0%, #7A3E1C 30%, var(--clay) 60%, var(--ochre) 85%, var(--glaze) 100%);
}

/* ══ ۲. سکشن‌ها — تناوب هوشمند رنگ ══ */

/* سکشن فرد — پس‌زمینه گرم */
.section {
    background: #FFFFFF;
}

/* سکشن زوج — پس‌زمینه گرم ملایم */
.section-alt {
    background: var(--grad-section-a);
    background: linear-gradient(160deg, #FBF7F3 0%, #F5EDE3 60%, #EDE0D0 100%);
    border-top: 1px solid rgba(125,78,42,.08);
    border-bottom: 1px solid rgba(125,78,42,.08);
}

/* سکشن ویژه با اکسنت فیروزه‌ای */
.section-teal {
    background: var(--grad-section-b);
    padding: 80px 0;
    position: relative;
}

.section-teal::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--teal-light), var(--teal), var(--teal-light), transparent);
}

/* سکشن با اکسنت سبز خاکی */
.section-sage {
    background: var(--grad-section-c);
    padding: 80px 0;
}

/* ══ ۳. TRUST STRIP — نوار اعتماد رنگارنگ ══ */
.trust-strip {
    background: linear-gradient(90deg, #FFFFFF 0%, var(--bg-warm-1) 50%, #FFFFFF 100%);
    border-top: 2px solid transparent;
    border-image: linear-gradient(90deg, transparent, var(--clay-light), var(--glaze), var(--teal-light), var(--clay-light), transparent) 1;
    padding: 18px 0;
}

.trust-icon-box {
    background: linear-gradient(135deg, rgba(160,82,45,.10), rgba(212,168,67,.08));
    border: 1px solid rgba(160,82,45,.15);
    transition: all 0.3s var(--ease);
}

.trust-item:hover .trust-icon-box {
    background: linear-gradient(135deg, var(--clay), var(--clay-mid));
    border-color: var(--clay);
    color: white;
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 4px 14px rgba(160,82,45,.28);
}

.trust-item:hover .trust-icon-box i {
    color: white;
}

/* trust items — رنگ متفاوت برای هر آیتم */
.trust-item:nth-child(1) .trust-icon-box { color: var(--clay); }
.trust-item:nth-child(3) .trust-icon-box { color: var(--teal); }
.trust-item:nth-child(5) .trust-icon-box { color: var(--sage); }
.trust-item:nth-child(7) .trust-icon-box { color: var(--ochre); }
.trust-item:nth-child(9) .trust-icon-box { color: var(--sienna); }

/* ══ ۴. دسته‌بندی‌ها — رنگ‌بندی تکمیلی ══ */
.category-card {
    position: relative;
}

/* هر دسته رنگ متفاوت در hover */
.category-card:nth-child(1):hover { border-color: var(--clay); }
.category-card:nth-child(2):hover { border-color: var(--teal); }
.category-card:nth-child(3):hover { border-color: var(--sage); }
.category-card:nth-child(4):hover { border-color: var(--ochre); }
.category-card:nth-child(5):hover { border-color: var(--sienna); }
.category-card:nth-child(6):hover { border-color: var(--glaze); }

.category-card:nth-child(1)::after { background: linear-gradient(90deg, transparent, var(--clay-light), var(--clay), transparent); }
.category-card:nth-child(2)::after { background: linear-gradient(90deg, transparent, var(--teal-light), var(--teal), transparent); }
.category-card:nth-child(3)::after { background: linear-gradient(90deg, transparent, var(--sage-light), var(--sage), transparent); }
.category-card:nth-child(4)::after { background: linear-gradient(90deg, transparent, var(--ochre-light), var(--ochre), transparent); }
.category-card:nth-child(5)::after { background: linear-gradient(90deg, transparent, var(--clay-light), var(--sienna), transparent); }
.category-card:nth-child(6)::after { background: linear-gradient(90deg, transparent, var(--glaze-light), var(--glaze), transparent); }

/* آیکون دسته — رنگ‌بندی */
.category-card:nth-child(1) .category-icon { color: var(--clay); }
.category-card:nth-child(2) .category-icon { color: var(--teal); }
.category-card:nth-child(3) .category-icon { color: var(--sage); }
.category-card:nth-child(4) .category-icon { color: var(--ochre); }
.category-card:nth-child(5) .category-icon { color: var(--sienna); }
.category-card:nth-child(6) .category-icon { color: var(--glaze); filter: drop-shadow(0 1px 4px rgba(212,168,67,.4)); }

/* شمارنده دسته — رنگی */
.category-card:nth-child(1) .category-count { background: rgba(160,82,45,.08); color: var(--clay); }
.category-card:nth-child(2) .category-count { background: rgba(42,122,122,.08); color: var(--teal); }
.category-card:nth-child(3) .category-count { background: rgba(107,140,90,.08); color: var(--sage); }
.category-card:nth-child(4) .category-count { background: rgba(196,124,43,.08); color: var(--ochre); }
.category-card:nth-child(5) .category-count { background: rgba(139,64,32,.08); color: var(--sienna); }
.category-card:nth-child(6) .category-count { background: rgba(212,168,67,.10); color: var(--ochre); }

/* ══ ۵. ویژگی‌ها — آیکون رنگارنگ ══ */
.feature-item:nth-child(1) .feature-icon { background: linear-gradient(135deg, var(--clay), var(--clay-mid)); }
.feature-item:nth-child(2) .feature-icon { background: linear-gradient(135deg, var(--teal), var(--teal-mid)); }
.feature-item:nth-child(3) .feature-icon { background: linear-gradient(135deg, var(--sage), var(--sage-mid)); }
.feature-item:nth-child(4) .feature-icon { background: linear-gradient(135deg, var(--ochre), var(--glaze)); }
.feature-item:nth-child(5) .feature-icon { background: linear-gradient(135deg, var(--sienna), var(--clay)); }
.feature-item:nth-child(6) .feature-icon { background: linear-gradient(135deg, var(--teal-mid), var(--sage)); }
.feature-item:nth-child(7) .feature-icon { background: linear-gradient(135deg, var(--kiln), var(--clay)); }
.feature-item:nth-child(8) .feature-icon { background: linear-gradient(135deg, var(--sage), var(--teal)); }

.feature-item:nth-child(1)::after { background: linear-gradient(90deg, transparent, var(--clay-light), var(--clay), transparent); }
.feature-item:nth-child(2)::after { background: linear-gradient(90deg, transparent, var(--teal-light), var(--teal), transparent); }
.feature-item:nth-child(3)::after { background: linear-gradient(90deg, transparent, var(--sage-light), var(--sage), transparent); }
.feature-item:nth-child(4)::after { background: linear-gradient(90deg, transparent, var(--ochre-light), var(--ochre), transparent); }
.feature-item:nth-child(5)::after { background: linear-gradient(90deg, transparent, var(--clay-light), var(--sienna), transparent); }
.feature-item:nth-child(6)::after { background: linear-gradient(90deg, transparent, var(--teal-light), var(--sage), transparent); }
.feature-item:nth-child(7)::after { background: linear-gradient(90deg, transparent, var(--clay-light), var(--kiln), transparent); }
.feature-item:nth-child(8)::after { background: linear-gradient(90deg, transparent, var(--sage-light), var(--teal), transparent); }

/* ══ ۶. کارت‌های محصول — بهبود ══ */
.product-card {
    background: linear-gradient(170deg, #FFFFFF 0%, #FDFAF7 60%, #FAF4EE 100%);
}

/* بج‌های رنگارنگ product */
.product-badge.hot    { background: linear-gradient(135deg, var(--sienna), var(--clay)); color: white; }
.product-badge.best   { background: linear-gradient(135deg, var(--teal), var(--teal-mid)); color: white; box-shadow: 0 3px 12px rgba(42,122,122,.4); }
.product-badge.eco    { background: linear-gradient(135deg, var(--sage), var(--sage-mid)); color: white; box-shadow: 0 3px 12px rgba(107,140,90,.4); }

/* ══ ۷. سکشن آمار — تقویت شده ══ */
.stats-section {
    background: linear-gradient(135deg, var(--kiln) 0%, var(--sienna) 20%, var(--clay) 45%, var(--ochre) 70%, var(--glaze) 100%);
    position: relative;
}

.stats-section::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 15% 50%, rgba(212,168,67,.15) 0%, transparent 40%),
        radial-gradient(ellipse at 85% 50%, rgba(42,122,122,.08) 0%, transparent 40%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(255%2C255%2C255%2C0.04)'/%3E%3C/svg%3E");
    background-size: auto, auto, 60px;
    pointer-events: none;
}

/* اعداد آمار با رنگ‌های مختلف */
.stat-block:nth-child(1) .stat-block-num { color: var(--glaze-light); }
.stat-block:nth-child(2) .stat-block-num { color: #8DDBD4; text-shadow: 0 0 24px rgba(90,172,172,.4); }
.stat-block:nth-child(3) .stat-block-num { color: #A8D48C; text-shadow: 0 0 24px rgba(107,140,90,.35); }
.stat-block:nth-child(4) .stat-block-num { color: var(--glaze-light); }

/* ══ ۸. کارت‌های نظرات — تقویت ══ */
.testimonial-card {
    background: linear-gradient(165deg, #FFFFFF 0%, #FDFAF7 70%, #FAF4EE 100%);
    transition: transform 0.35s var(--ease-bounce), box-shadow 0.35s var(--ease), border-color 0.35s;
}

.testimonial-card:nth-child(1) { border-top: 3px solid var(--clay-light); }
.testimonial-card:nth-child(2) { border-top: 3px solid var(--teal-light); }
.testimonial-card:nth-child(3) { border-top: 3px solid var(--sage-light); }

.testimonial-card:nth-child(1) .testi-avatar { background: linear-gradient(135deg, var(--clay), var(--clay-mid)); }
.testimonial-card:nth-child(2) .testi-avatar { background: linear-gradient(135deg, var(--teal), var(--teal-mid)); }
.testimonial-card:nth-child(3) .testi-avatar { background: linear-gradient(135deg, var(--sage), var(--sage-mid)); }

/* ستاره‌های رنگارنگ برای تنوع */
.testimonial-card:nth-child(1) .testi-stars i { color: var(--glaze); }
.testimonial-card:nth-child(2) .testi-stars i { color: #F4A820; }
.testimonial-card:nth-child(3) .testi-stars i { color: var(--ochre); }

/* ══ ۹. خبرنامه — بهبود ══ */
.newsletter-section {
    background: linear-gradient(135deg,
        rgba(42,122,122,.06) 0%,
        #FEF8F0 20%,
        #FDF3E6 80%,
        rgba(107,140,90,.05) 100%
    );
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, transparent, var(--clay-light), var(--glaze), var(--teal-light), transparent) 1;
}

.newsletter-icon-wrap {
    width: 64px; height: 64px;
    background: linear-gradient(135deg, var(--clay), var(--ochre));
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: white;
    box-shadow: 0 6px 20px rgba(160,82,45,.28);
    margin-bottom: 16px;
    flex-shrink: 0;
}

/* ══ ۱۰. CTA بنر — تقویت ══ */
.cta-banner {
    background: linear-gradient(140deg,
        var(--kiln) 0%,
        var(--sienna) 25%,
        var(--clay) 55%,
        var(--ochre) 80%,
        #B8784A 100%
    );
    position: relative;
}

/* خط تزئینی اکسنت */
.cta-banner::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 5% 50%,  rgba(212,168,67,.18) 0%, transparent 40%),
        radial-gradient(ellipse at 95% 50%, rgba(42,122,122,.08) 0%, transparent 35%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='.8' fill='rgba(255%2C255%2C255%2C0.04)'/%3E%3C/svg%3E");
    background-size: auto, auto, 40px;
    pointer-events: none;
}

/* ══ ۱۱. فوتر — بهبود تکمیلی ══ */
.main-footer {
    background: linear-gradient(160deg,
        #2A1208 0%,
        #4A2010 20%,
        #6B3520 45%,
        #8B4A28 70%,
        #6B3520 85%,
        #3D1E0A 100%
    );
}

/* لوگو فوتر — تقویت */
.footer-logo-emblem {
    background: linear-gradient(135deg, var(--clay), var(--glaze));
    box-shadow: 0 4px 16px rgba(212,168,67,.3);
}

/* شبکه اجتماعی — هر آیکون رنگ برند */
.footer-social a:nth-child(1):hover {  /* اینستاگرام */
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-color: #e6683c;
    color: white;
}
.footer-social a:nth-child(2):hover {  /* تلگرام */
    background: #2AABEE;
    border-color: #2AABEE;
    color: white;
}
.footer-social a:nth-child(3):hover {  /* واتساپ */
    background: #25D366;
    border-color: #25D366;
    color: white;
}

/* خط جداکننده‌ی هدر ستون‌های فوتر */
.footer-col h4::after {
    background: linear-gradient(90deg, var(--glaze), var(--clay-light), transparent);
}

/* ══ ۱۲. PAGE HERO — تنوع رنگ ══ */
.page-hero {
    background: linear-gradient(135deg,
        var(--kiln) 0%,
        var(--sienna) 30%,
        var(--clay) 65%,
        var(--clay-mid) 100%
    );
}

/* hero صفحه blog — فیروزه‌ای */
.page-hero.blog-hero {
    background: linear-gradient(135deg,
        #1A4A4A 0%,
        var(--teal) 40%,
        var(--teal-mid) 70%,
        #2A8888 100%
    );
}

/* hero صفحه about — سبز خاکی */
.page-hero.about-hero {
    background: linear-gradient(135deg,
        #2A3A22 0%,
        var(--sage) 40%,
        var(--sage-mid) 70%,
        #7EA06B 100%
    );
}

/* hero صفحه contact — خاکستری گرم */
.page-hero.contact-hero {
    background: linear-gradient(135deg,
        var(--kiln) 0%,
        #4A3028 30%,
        #6A4838 65%,
        var(--clay) 100%
    );
}

/* ══ ۱۳. لینک‌های مقاله (blog) — بهبود ══ */
.blog-card:nth-child(3n+1) .blog-img {
    background: linear-gradient(160deg, var(--clay), var(--clay-mid));
}
.blog-card:nth-child(3n+2) .blog-img {
    background: linear-gradient(160deg, var(--teal), var(--teal-mid));
}
.blog-card:nth-child(3n+3) .blog-img {
    background: linear-gradient(160deg, var(--sage), var(--sage-mid));
}

.blog-card:nth-child(3n+1) .blog-category-badge { background: rgba(212,168,67,.9); color: var(--kiln); }
.blog-card:nth-child(3n+2) .blog-category-badge { background: rgba(42,122,122,.9); color: white; }
.blog-card:nth-child(3n+3) .blog-category-badge { background: rgba(107,140,90,.9); color: white; }

.blog-card:nth-child(3n+1):hover .blog-title { color: var(--clay); }
.blog-card:nth-child(3n+2):hover .blog-title { color: var(--teal); }
.blog-card:nth-child(3n+3):hover .blog-title { color: var(--sage); }

.blog-card:nth-child(3n+1) .blog-read-more { color: var(--clay); }
.blog-card:nth-child(3n+2) .blog-read-more { color: var(--teal); }
.blog-card:nth-child(3n+3) .blog-read-more { color: var(--sage); }

/* ══ ۱۴. آلرت‌ها — تقویت ══ */
.alert-success { background: linear-gradient(135deg, #F0FBF4, #E8F8EE); border-color: #2ecc71; }
.alert-error   { background: linear-gradient(135deg, #FDF3F3, #FAE8E8); border-color: #D44030; }
.alert-info    { background: linear-gradient(135deg, #F0F6FF, #E8F0FE); border-color: var(--teal); }
.alert-warning { background: linear-gradient(135deg, #FFFBF0, #FDF5E0); border-color: var(--glaze); }

/* ══ ۱۵. اسکرول‌بار — تکمیلی ══ */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, var(--clay-mid), var(--clay), var(--teal));
}

/* ══ ۱۶. انیمیشن‌های جدید ══ */
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes colorPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(160,82,45,.4); }
    50%       { box-shadow: 0 0 0 8px rgba(160,82,45,0); }
}

@keyframes borderRainbow {
    0%   { border-color: var(--clay); }
    33%  { border-color: var(--teal); }
    66%  { border-color: var(--sage); }
    100% { border-color: var(--clay); }
}

/* ══ ۱۷. SECTION SEPARATOR — جداکننده‌های زیبا ══ */
.section-sep {
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--clay-light) 20%,
        var(--glaze) 40%,
        var(--teal-light) 60%,
        var(--sage-light) 80%,
        transparent 100%
    );
    border: none;
    margin: 0;
    opacity: 0.45;
}

/* ══ ۱۸. LABEL رنگارنگ بر اساس موضع ══ */
.section:nth-of-type(2n) .section-label {
    background: linear-gradient(135deg, rgba(42,122,122,.08), rgba(107,140,90,.06));
    border-color: rgba(42,122,122,.20);
    color: var(--teal);
}

.section:nth-of-type(3n) .section-label {
    background: linear-gradient(135deg, rgba(107,140,90,.08), rgba(196,124,43,.06));
    border-color: rgba(107,140,90,.20);
    color: var(--sage);
}

/* ══ ۱۹. CART — سبد خرید بهبود ══ */
.cart-table th {
    background: linear-gradient(145deg, var(--bg-warm-1), var(--bg-warm-2));
}

.cart-summary-box {
    background: linear-gradient(165deg, #FFFFFF 0%, #FDFAF7 60%, #F8F2EC 100%);
    border-top: 3px solid var(--clay-light);
}

.summary-row.total {
    background: linear-gradient(135deg, rgba(160,82,45,.04), rgba(212,168,67,.04));
    margin: 0 -28px; padding: 16px 28px;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ══ ۲۰. FORM CONTROLS — تقویت ══ */
.form-control:focus {
    border-color: var(--clay-light);
    background: white;
    box-shadow: 0 0 0 3px rgba(160,82,45,.10), 0 2px 8px rgba(160,82,45,.06);
}

/* ══ ۲۱. NAV DROPDOWN — تقویت ══ */
.nav-drop {
    border-top: 2px solid var(--clay-light);
}

.nav-drop a:hover {
    background: linear-gradient(135deg, var(--bg-warm-1), var(--bg-warm-2));
    color: var(--clay);
    padding-right: 22px;
}

/* ══ ۲۲. USER DROPDOWN — تقویت ══ */
.ud-top {
    background: linear-gradient(135deg, var(--kiln), var(--clay), var(--ochre));
}

/* ══ ۲۳. BADGE PULSE — رنگ تکمیلی ══ */
#cart-count-badge,
.wish-badge,
.cart-badge {
    background: linear-gradient(135deg, var(--glaze), var(--ochre));
}

/* ══ ۲۴. STEP راهنما — رنگارنگ ══ */
.guide-step:nth-child(1) .step-num { background: linear-gradient(145deg, var(--clay), var(--sienna)); }
.guide-step:nth-child(2) .step-num { background: linear-gradient(145deg, var(--teal), #1A5A5A); }
.guide-step:nth-child(3) .step-num { background: linear-gradient(145deg, var(--sage), #4A6A3A); }
.guide-step:nth-child(4) .step-num { background: linear-gradient(145deg, var(--ochre), var(--clay)); }

.guide-step:nth-child(1):hover { border-color: rgba(160,82,45,.22); }
.guide-step:nth-child(2):hover { border-color: rgba(42,122,122,.22); }
.guide-step:nth-child(3):hover { border-color: rgba(107,140,90,.22); }
.guide-step:nth-child(4):hover { border-color: rgba(196,124,43,.22); }

/* ══ ۲۵. صفحه لاگین — تکمیلی ══ */
.auth-wrapper {
    background:
        radial-gradient(ellipse at 15% 80%, rgba(42,122,122,.05) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 20%, rgba(212,168,67,.06) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 50%, rgba(107,140,90,.03) 0%, transparent 55%),
        var(--parchment);
}

.auth-tab.active {
    color: var(--clay);
    box-shadow: 0 -3px 0 var(--clay) inset;
}

/* ══ ۲۶. PAGINATION — رنگ مکمل ══ */
.page-btn.active {
    background: linear-gradient(135deg, var(--clay), var(--clay-mid));
    box-shadow: 0 4px 14px rgba(160,82,45,.30);
}

.page-btn:hover {
    background: linear-gradient(135deg, var(--clay), var(--clay-mid));
}

/* ══ ۲۷. SECTION HEADER DECORATION ══ */
.section-header {
    position: relative;
}

/* خط تزئینی زیر عنوان */
.section-header::after {
    content: '';
    display: block;
    width: 60px; height: 3px;
    margin: 18px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--clay-light), var(--glaze), var(--clay-light));
}

/* ══ ۲۸. MOBILE MENU — تقویت ══ */
.mm-head {
    background: linear-gradient(135deg, var(--kiln), var(--sienna), var(--clay));
}

/* ══ ۲۹. PRODUCT TAG — رنگارنگ ══ */
.product-tag:nth-child(odd)  { background: rgba(160,82,45,.07); color: var(--clay); border-color: rgba(160,82,45,.15); }
.product-tag:nth-child(even) { background: rgba(42,122,122,.07); color: var(--teal); border-color: rgba(42,122,122,.15); }

/* ══ ۳۰. BACK TO TOP — تکمیلی ══ */
#back-to-top {
    background: linear-gradient(135deg, var(--clay), var(--ochre));
    border-color: rgba(212,168,67,.5);
}

#back-to-top:hover {
    background: linear-gradient(135deg, var(--kiln), var(--clay));
}

/* ══ ۳۱. پاجینیشن — اشکال تکمیلی ══ */
.page-btn { border-radius: var(--r-sm); }

/* ══ ۳۲. STOCK BADGE — رنگ بهتر ══ */
.stock-badge.in-stock  { background: rgba(42,122,122,.10); color: var(--teal); }

/* ══ ۳۳. PRICE HIGHLIGHT ══ */
.price-current {
    background: linear-gradient(135deg, var(--clay), var(--ochre));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: none;
}

/* برای دسکتاپ بدون مشکل */
@supports not (-webkit-background-clip: text) {
    .price-current { color: var(--clay); }
}

/* ══ ۳۴. TOOLTIP — جدید ══ */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%);
    background: var(--kiln);
    color: white;
    font-size: 12px; font-weight: var(--fw-semibold);
    padding: 5px 10px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0; visibility: hidden;
    transition: opacity .2s, visibility .2s;
    z-index: 9999;
}

[data-tooltip]:hover::after {
    opacity: 1; visibility: visible;
}

/* ══ ۳۵. SKELETON LOADING — جدید ══ */
.skeleton {
    background: linear-gradient(90deg,
        var(--bg-warm-1) 25%,
        var(--bg-warm-2) 50%,
        var(--bg-warm-1) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--r);
}

/* ══ ۳۶. DIVIDER با آیکون ══ */
.divider-with-icon {
    display: flex; align-items: center; gap: 16px;
    color: var(--ink-light); font-size: 13px;
    margin: 20px 0;
}

.divider-with-icon::before,
.divider-with-icon::after {
    content: '';
    flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(125,78,42,.15), transparent);
}

/* ══ ۳۷. CHIP/TAG بهبود ══ */
.tag-clay  { background: rgba(160,82,45,.08); color: var(--clay); border: 1px solid rgba(160,82,45,.18); }
.tag-teal  { background: rgba(42,122,122,.08); color: var(--teal); border: 1px solid rgba(42,122,122,.18); }
.tag-sage  { background: rgba(107,140,90,.08); color: var(--sage); border: 1px solid rgba(107,140,90,.18); }
.tag-gold  { background: rgba(212,168,67,.08); color: var(--ochre); border: 1px solid rgba(212,168,67,.20); }

/* ══ ۳۸. SECTION با خط رنگی سمت راست ══ */
.section-accent-right {
    border-right: 4px solid var(--clay-light);
    padding-right: 20px;
}

/* ══ ۳۹. FEATURED PRODUCT HIGHLIGHT ══ */
.product-card.featured {
    border-color: rgba(212,168,67,.35);
    background: linear-gradient(170deg, #FFFFFF 0%, #FEFCF5 60%, #FDF8EC 100%);
    box-shadow: 0 4px 24px rgba(212,168,67,.14), 0 1px 4px rgba(212,168,67,.08);
}

.product-card.featured:hover {
    border-color: rgba(212,168,67,.55);
    box-shadow: 0 20px 52px rgba(212,168,67,.18), 0 4px 12px rgba(160,82,45,.12);
}

/* ══ ۴۰. PROGRESS BAR — رنگارنگ ══ */
.progress {
    height: 6px;
    background: var(--bg-warm-2);
    border-radius: var(--r-full);
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    border-radius: var(--r-full);
    background: linear-gradient(90deg, var(--clay), var(--ochre), var(--glaze));
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
    transition: width .6s var(--ease);
}

/* ══ ۴۱. ICON LIST — تکمیلی ══ */
.icon-list { list-style: none; }
.icon-list li {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0;
    font-size: 14px; color: var(--ink-mid);
}
.icon-list li i { color: var(--clay); width: 18px; text-align: center; }
.icon-list li:nth-child(2n) i { color: var(--teal); }
.icon-list li:nth-child(3n) i { color: var(--sage); }

/* ══ ۴۲. QUOTE/BLOCKQUOTE ══ */
blockquote.ceramic-quote {
    background: linear-gradient(135deg, var(--bg-warm-1), var(--bg-warm-2));
    border-right: 4px solid var(--clay-light);
    border-radius: 0 var(--r) var(--r) 0;
    padding: 20px 24px;
    font-size: 15px; line-height: 1.9;
    color: var(--ink-mid);
    position: relative;
    font-style: italic;
}

blockquote.ceramic-quote::before {
    content: '"';
    position: absolute; top: -10px; right: 12px;
    font-size: 60px; color: var(--clay-light);
    opacity: 0.4; line-height: 1;
    font-family: Georgia, serif;
}

/* ══ ۴۳. TABLE استایل ══ */
.table-ceramic {
    width: 100%; border-collapse: collapse;
    font-size: 14px;
}

.table-ceramic th {
    background: linear-gradient(135deg, var(--clay), var(--clay-mid));
    color: white;
    padding: 12px 16px; text-align: right;
    font-weight: var(--fw-bold);
}

.table-ceramic td {
    padding: 12px 16px;
    border-bottom: var(--border-light);
    color: var(--ink-mid);
}

.table-ceramic tr:nth-child(even) td {
    background: var(--bg-warm-1);
}

.table-ceramic tr:hover td {
    background: var(--bg-warm-2);
    color: var(--ink);
}

/* ══ ۴۴. HIGHLIGHT BOXES ══ */
.highlight-box {
    border-radius: var(--r-lg);
    padding: 22px 24px;
    border: 1px solid;
    display: flex; align-items: flex-start; gap: 14px;
}

.highlight-box.clay-box {
    background: rgba(160,82,45,.06);
    border-color: rgba(160,82,45,.20);
}
.highlight-box.teal-box {
    background: rgba(42,122,122,.06);
    border-color: rgba(42,122,122,.18);
}
.highlight-box.sage-box {
    background: rgba(107,140,90,.06);
    border-color: rgba(107,140,90,.18);
}
.highlight-box.gold-box {
    background: rgba(212,168,67,.06);
    border-color: rgba(212,168,67,.22);
}

.highlight-box i { font-size: 20px; margin-top: 2px; flex-shrink: 0; }
.highlight-box.clay-box i { color: var(--clay); }
.highlight-box.teal-box i { color: var(--teal); }
.highlight-box.sage-box i { color: var(--sage); }
.highlight-box.gold-box i { color: var(--ochre); }

/* ══ ۴۵. RESPONSIVE تکمیلی ══ */
@media (max-width: 768px) {
    .section-header::after { width: 40px; }
    .feature-item:nth-child(n) .feature-icon {
        width: 52px; height: 52px; font-size: 20px;
    }
}

@media (max-width: 480px) {
    .testimonial-card:nth-child(n) {
        border-top-width: 2px;
    }
}

/* ══ ۴۶. PRINT تکمیلی ══ */
@media print {
    .section-alt { background: #f9f9f9 !important; }
    .stats-section { background: #eee !important; color: #333 !important; }
    .main-footer { background: #eee !important; color: #333 !important; }
    .cta-banner { background: #eee !important; color: #333 !important; }
}

/* ══ پایان سیستم رنگ‌بندی تکمیلی بارمان سرامیک ══ */