/* =========================================================
   استایل اصلی فروشگاه — پالت طلایی/کرم مطابق طرح مرجع
   ========================================================= */

/* ---------- متغیرهای رنگ و اندازه (برای تغییر تم فقط اینجا را عوض کنید) ---------- */
:root {
    --gold: #c6a77d;          /* طلایی اصلی (دکمه‌ها و تاکیدها) */
    --gold-dark: #b08f5f;     /* طلایی تیره‌تر برای هاور */
    --cream: #f8f5f2;         /* پس‌زمینه کلی صفحه */
    --dark: #000000;          /* نوار اعلان و متن‌های اصلی */
    --gray: #000000;        /* قانون طراحی: همه متن‌ها مشکی خالص */          /* متن‌های فرعی */
    --white: #ffffff;
    --card-bg: #ffffff;       /* پس‌زمینه کارت‌ها و هدر */
    --text-main: #000000;     /* رنگ متن اصلی */
    --border-c: #e7e0d5;      /* رنگ خطوط و حاشیه‌ها */
    --cream-base: #f8f5f2;    /* پایه پس‌زمینه حالت روشن (از تنظیمات مدیر) */
    --radius: 14px;           /* گردی گوشه‌ها */
    --shadow: 0 8px 28px rgba(52, 42, 26, .07);  /* سایه خیلی نرم */
    --section: #ede3d9;       /* پس‌زمینه بخش‌های جداکننده (بژ گرم) */
    --container: 1280px;      /* حداکثر عرض محتوا */
}

/* ---------- ریست پایه ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    background: var(--cream);
    color: var(--text-main);
    line-height: 1.8;
}

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

/* =========================================================
   ۱) نوار اعلان بالای سایت
   ========================================================= */
.announcement-bar {
    background: var(--dark);
    color: var(--white);
    text-align: center;
    font-size: 13px;
    padding: 8px 16px;
}

/* =========================================================
   ۲) نوار طلایی + هدر شناور
   ========================================================= */
/* هدر سفید که نصفش روی نوار طلایی می‌نشیند */
.site-header {
    max-width: var(--container);
    margin: -44px auto 0;      /* بالا کشیدن هدر روی نوار طلایی */
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    position: sticky;          /* هدر با اسکرول بالای صفحه می‌چسبد */
    top: 8px;
    z-index: 100;
    padding: 0 20px;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
}

/* ---------- لوگو ---------- */
.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 22px;
    color: var(--gold-dark);
    white-space: nowrap;
}
.logo-icon { font-size: 26px; }

/* ---------- منوی اصلی ---------- */
.main-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.main-nav a {
    display: block;
    padding: 8px 12px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    transition: color .2s, background .2s;
}

.main-nav a:hover {
    color: var(--gold-dark);
    background: #f0efec;
}

/* ---------- آیکن‌ها و ورود ---------- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.icon-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    transition: background .2s;
    position: relative;
}
.icon-btn:hover { background: #f3e3dc; }

.icon-btn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--text-main);
    stroke-width: 1.8;
    stroke-linecap: round;
}

/* شمارنده سبد خرید */
.cart-count {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--gold-dark);
    color: var(--white);
    font-size: 11px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    padding: 0 4px;
}

.login-link {
    font-size: 14px;
    font-weight: 600;
    padding: 8px 12px;
    border-right: 1px solid var(--border-c);  /* خط جداکننده مثل طرح */
    transition: color .2s;
}
.login-link:hover { color: var(--gold-dark); }

/* دکمه همبرگری فقط در موبایل نمایش داده می‌شود */
.menu-toggle { display: none; }

/* ---------- باکس جستجو ---------- */
.search-box {
    display: none;              /* پیش‌فرض مخفی؛ با جاوااسکریپت باز می‌شود */
    padding: 0 4px 14px;
}
.search-box.open { display: block; }

.search-box input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--gold);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 15px;
    outline: none;
}

/* =========================================================
   ۳) اسلایدر اصلی
   ========================================================= */
.hero-slider {
    max-width: var(--container);
    margin: 28px auto 0;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.slides { position: relative; height: 480px; }

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .7s ease;   /* افکت محو شدن بین اسلایدها */
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
}
.slide.active { opacity: 1; z-index: 1; }

/* پس‌زمینه‌های موقت تا زمان گذاشتن عکس واقعی */
.placeholder-a { background: linear-gradient(120deg, #ecd6cc, #bfbab0 55%, #a97c6a); }
.placeholder-b { background: linear-gradient(120deg, #f6ece7, #d8ab99 55%, #b7b1a7); }
.placeholder-c { background: linear-gradient(120deg, #eeded6, #a9a196 55%, #9e6a59); }

/* متن روی اسلاید */
.slide-caption {
    margin-right: 8%;
    max-width: 460px;
    background: rgba(255,255,255,.82);
    padding: 28px 32px;
    border-radius: var(--radius);
    backdrop-filter: blur(3px);
}
.slide-caption h2 { font-size: 30px; font-weight: 800; margin-bottom: 8px; }
.slide-caption p  { color: var(--gray); margin-bottom: 18px; }

/* دکمه طلایی */
.btn-gold {
    display: inline-block;
    background: var(--gold);
    color: var(--dark);
    font-weight: 700;
    padding: 10px 26px;
    border-radius: 30px;
    transition: background .2s, transform .2s;
}
.btn-gold:hover { background: var(--gold-dark); color: var(--white); transform: translateY(-2px); }

/* فلش‌های اسلایدر */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    font-size: 18px;
    color: var(--dark);
    box-shadow: var(--shadow);
    transition: background .2s;
}
.slider-arrow:hover { background: var(--gold); }
.slider-arrow.prev { left: 18px; }
.slider-arrow.next { right: 18px; }

/* نقطه‌های پایین اسلایدر */
.slider-dots {
    position: absolute;
    bottom: 16px;
    right: 0;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 2;
}
.slider-dots button {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255,255,255,.6);
    transition: background .2s, transform .2s;
}
.slider-dots button.active { background: var(--gold-dark); transform: scale(1.25); }

/* =========================================================
   ۴) کاشی‌های دسته‌بندی
   ========================================================= */
/* پس‌زمینه موقت کاشی‌ها — عکس واقعی که گذاشتید این‌ها خودکار بی‌اثر می‌شوند
   (کافی است در HTML بنویسید: style="background-image:url('images/....jpg')") */
.tile-1 { background: linear-gradient(160deg,#efedea,#b9b3a8); }
.tile-2 { background: linear-gradient(160deg,#eceae6,#c2bcb2); }
.tile-3 { background: linear-gradient(160deg,#f1efeb,#bfbab0); }
.tile-4 { background: linear-gradient(160deg,#edebe7,#bab4aa); }
.tile-5 { background: linear-gradient(160deg,#e8f0ee,#9db8ae); }
.tile-6 { background: linear-gradient(160deg,#f0efec,#c6c1b8); }
.tile-7 { background: linear-gradient(160deg,#efece8,#c1bbb1); }
.tile-8 { background: linear-gradient(160deg,#ebe8e3,#b7b1a7); }

/* =========================================================
   ۵) جدیدترین محصولات
   ========================================================= */
.latest-products {
    max-width: var(--container);
    margin: 52px auto 0;
    padding: 0 4px;
}

/* عنوان بخش با دو خط کنارش، شبیه طرح مرجع */
.section-title {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 18px;
}
.section-title::before,
.section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e3ccc2;
}

.products-grid {
    display: grid;
    /* کارت‌های کوچک‌تر: عرض هر کارت حداقل ۲۰۰ پیکسل، تعداد در ردیف خودکار */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

/* کارت محصول */
.product-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .25s;
    display: flex;
    flex-direction: column;
}
.product-card:hover { transform: translateY(-5px); }

.product-img {
    height: 220px;
    background-size: cover;
    background-position: center;
    display: grid;
    place-items: center;
    font-size: 52px;              /* برای ایموجی جایگزین عکس */
}

.product-info { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-name { font-size: 15px; font-weight: 700; }
.product-price { color: var(--gold-dark); font-weight: 800; font-size: 14px; }
.product-price.out { color: #b3453e; font-size: 14px; }

.add-to-cart {
    margin-top: auto;
    background: var(--dark);
    color: var(--white);
    padding: 7px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    transition: background .2s;
}
.add-to-cart:hover { background: var(--gold-dark); }
.add-to-cart:disabled { background: #cfcfcf; cursor: not-allowed; }

/* =========================================================
   ۶) فوتر
   ========================================================= */
.site-footer {
    margin-top: 64px;
    background: var(--dark);
    color: #d9cec9;
}

.footer-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 44px 20px 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.footer-col h3 {
    color: var(--gold);
    margin-bottom: 12px;
    font-size: 17px;
}
.footer-col a:hover { color: var(--gold); }
.footer-col li { margin-bottom: 6px; font-size: 14px; }
.footer-col p { font-size: 14px; }

.footer-copy {
    text-align: center;
    font-size: 13px;
    padding: 14px;
    border-top: 1px solid #333;
}

/* =========================================================
   ۷) ریسپانسیو (تبلت و موبایل)
   ========================================================= */
@media (max-width: 1320px) {
    .site-header, .hero-slider, .categories, .latest-products, .footer-inner {
        margin-left: 16px;
        margin-right: 16px;
    }
}

@media (max-width: 992px) {
    /* منو در موبایل مخفی می‌شود و با دکمه همبرگری باز می‌شود */
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        background: var(--card-bg);
        border-radius: 0 0 var(--radius) var(--radius);
        box-shadow: var(--shadow);
        padding: 10px;
    }
    .main-nav.open { display: block; }
    .main-nav ul { flex-direction: column; }

    .menu-toggle { display: grid; }
    .login-link { display: none; }

    .slides { height: 340px; }
    .slide-caption h2 { font-size: 22px; }

    .categories { grid-template-columns: repeat(2, 1fr); }
    .products-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-inner { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .slides { height: 260px; }
    .slide-caption { margin: 0 5%; padding: 18px 20px; }
    .categories { gap: 14px; }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .img-stack, .product-img { height: 150px; }
}

/* احترام به کاربرانی که انیمیشن کمتر می‌خواهند */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto; }
}

/* =========================================================
   ۸) استایل‌های مشترک صفحات (بلیزور)
   ========================================================= */
.center-msg { text-align: center; color: var(--gray); padding: 20px 0; grid-column: 1/-1; }
.center-msg.error { color: #b3453e; }
.gold-link { color: var(--gold-dark); font-weight: 700; text-decoration: none; }
.page-title { font-size: 22px; margin-bottom: 20px; }
.card-title { font-size: 17px; color: var(--gold-dark); margin-bottom: 12px; }

/* پیام شناور بعد از افزودن به سبد */
.toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 500;
    background: var(--dark); color: #fff; padding: 12px 20px;
    border-radius: 10px; box-shadow: var(--shadow); font-size: 14px;
}

/* پیام موفقیت/خطا */
.msg { margin-top: 12px; padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.msg.ok  { background: #e8f2e6; color: #2c6b32; }
.msg.err { background: #f7e5e4; color: #b3453e; }

/* جدول داده عمومی */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td { padding: 10px 8px; text-align: right; border-bottom: 1px solid var(--border-c); vertical-align: middle; }
.data-table th { color: var(--gold-dark); font-size: 13px; }
.item-thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: linear-gradient(150deg,#f0efec,#c4c0b8); display: grid; place-items: center; font-size: 24px; }

/* =========================================================
   ۹) صفحه سبد خرید
   ========================================================= */
.cart-page { max-width: 1000px; margin: 32px auto; padding: 0 16px; }
.cart-card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 20px; }

.qty-controls { display: inline-flex; align-items: center; gap: 8px; }
.qty-controls button { width: 30px; height: 30px; border-radius: 8px; background: #f3e3dc; font-size: 17px; font-weight: 700; transition: .2s; }
.qty-controls button:hover { background: var(--gold); }

.remove-btn { color: #b3453e; font-size: 13px; font-weight: 600; }
.cart-total { text-align: left; font-size: 17px; font-weight: 800; padding-top: 14px; }
.cart-total span { color: var(--gold-dark); }

.checkout-form label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
.checkout-form input, .checkout-form textarea {
    width: 100%; padding: 10px 12px; border: 1.5px solid var(--border-c); border-radius: 8px;
    font-family: inherit; font-size: 14px; outline: none; resize: vertical;
}
.checkout-form input:focus, .checkout-form textarea:focus { border-color: var(--gold-dark); }
.submit-btn { margin-top: 16px; width: 100%; padding: 13px; font-size: 15px; border-radius: 10px; border: none; cursor: pointer; font-family: inherit; font-weight: 700; }
.submit-btn:disabled { opacity: .6; cursor: wait; }

.empty-cart { text-align: center; padding: 40px 0; color: var(--gray); line-height: 2.4; }

/* =========================================================
   ۱۰) پنل مدیریت
   ========================================================= */
.admin-topbar { background: var(--dark); color: #fff; padding: 14px 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.admin-topbar h1 { font-size: 18px; }
.admin-topbar h1 span { color: var(--gold); }
.admin-topbar nav a { color: var(--gold); font-size: 14px; text-decoration: none; margin-left: 16px; }

.admin-container { max-width: 1100px; margin: 24px auto; padding: 0 16px; display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; }
.admin-container.single-col { grid-template-columns: 1fr; }

.admin-card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.admin-card label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
.admin-card input[type=text], .admin-card input[type=number] {
    width: 100%; padding: 10px 12px; border: 1.5px solid var(--border-c); border-radius: 8px;
    font-family: inherit; font-size: 14px; outline: none;
}
.admin-card input:focus { border-color: var(--gold-dark); }
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; }
.checkbox-row label { margin: 0; }

.btn { border: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14px; border-radius: 8px; padding: 10px 20px; transition: .2s; }
.btn-gold { background: var(--gold); color: var(--dark); }
.btn-gold:hover { background: var(--gold-dark); color: #fff; }
.btn-gray { background: #eee0da; color: var(--dark); }
.btn-sm { padding: 5px 12px; font-size: 13px; }
.btn-danger { background: #f0e3e2; color: #b3453e; }
.btn-danger:hover { background: #b3453e; color: #fff; }
.form-actions { margin-top: 16px; display: flex; gap: 8px; }

.stock-zero { color: #b3453e; font-weight: 700; }
.inactive-row { opacity: .5; }

/* کارت سفارش */
.order-card { margin-bottom: 16px; }
.order-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.order-meta { font-size: 13px; color: #6b6b6b; }
.badge { padding: 3px 12px; border-radius: 20px; font-size: 13px; font-weight: 700; }
.badge.new     { background: #fbe9e2; color: #8f5040; }
.badge.shipped { background: #e8f2e6; color: #2c6b32; }
.badge.cancel  { background: #f7e5e4; color: #b3453e; }
.total-label { font-weight: 800; }
.total-value { font-weight: 800; color: var(--gold-dark); }

@media (max-width: 900px) { .admin-container { grid-template-columns: 1fr; } }

/* کارت ورود به پنل */
.login-card { max-width: 400px; margin: 60px auto; }
.password-input { direction: ltr; text-align: left; }

/* =========================================================
   ۱۱) صفحات دسته‌بندی/جستجو/جزئیات
   ========================================================= */
.listing-page { max-width: var(--container); margin: 32px auto; padding: 0 16px; }

.card-link { display: block; }
a.product-name { display: block; font-size: 14px; font-weight: 800; color: inherit; }
a.product-name:hover { color: var(--gold-dark); }

/* صفحه جزئیات محصول */
.details-card {
    background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow);
    display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 26px; align-items: start;
}
.details-img {
    height: 420px; border-radius: var(--radius); background-size: cover; background-position: center;
    display: grid; place-items: center; font-size: 80px;
    background-color: #f0efec;
}
.details-img.placeholder-img { background: linear-gradient(150deg,#f0efec,#c4c0b8); }
.details-info h1 { font-size: 24px; margin-bottom: 8px; }
.details-category { display: inline-block; font-size: 13px; color: var(--gold-dark); font-weight: 700; margin-bottom: 12px; }
.details-price { font-size: 22px; font-weight: 800; color: var(--gold-dark); margin: 6px 0; }
.details-price.out { color: #b3453e; }
.details-stock { font-size: 13px; color: var(--gray); margin-bottom: 12px; }
.details-qty { margin-bottom: 14px; }
.details-add { border: none; cursor: pointer; font-family: inherit; font-weight: 700; padding: 12px 34px; font-size: 15px; }
.details-desc-title { font-size: 16px; color: var(--gold-dark); margin: 22px 0 6px; }
.details-desc { color: #444; font-size: 14px; white-space: pre-line; }

.admin-card textarea {
    width: 100%; padding: 10px 12px; border: 1.5px solid var(--border-c); border-radius: 8px;
    font-family: inherit; font-size: 14px; outline: none; resize: vertical;
}
.admin-card textarea:focus { border-color: var(--gold-dark); }

@media (max-width: 800px) {
    .details-card { grid-template-columns: 1fr; }
    .details-img { height: 280px; }
}

/* =========================================================
   ۱۲) حالت تاریک (انتخاب بازدیدکننده با دکمه ماه/خورشید)
   ========================================================= */
html[data-theme="dark"] {
    --cream: #0e0e0e;         /* پس‌زمینه صفحه */
    --card-bg: #181818;       /* کارت‌ها و هدر */
    --text-main: #ececec;     /* متن اصلی */
    --gray: #9a9a9a;          /* متن‌های فرعی */
    --border-c: #2a2a2a;
    --section: #191919;      /* خطوط */
    --shadow: 0 4px 18px rgba(0,0,0,.45);
}

/* فیلدهای فرم در حالت تاریک */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: var(--card-bg);
    color: var(--text-main);
}

/* دکمه‌های خاکستری و کنترل تعداد در حالت تاریک */
html[data-theme="dark"] .btn-gray,
html[data-theme="dark"] .qty-controls button {
    background: var(--border-c);
    color: var(--text-main);
}

/* آیکن ماه/خورشید */
.mode-icon { font-size: 18px; line-height: 1; }

/* دراپ‌داون فرم ادمین */
.admin-card select {
    width: 100%; padding: 10px 12px; border: 1.5px solid var(--border-c);
    border-radius: 8px; font-family: inherit; font-size: 14px; outline: none;
    background: var(--card-bg); color: var(--text-main);
}
.admin-card select:focus { border-color: var(--gold-dark); }

/* صفحه تنظیم تم */
.theme-card { max-width: 560px; }
.color-row { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.color-row label { flex: 1; margin: 0; font-size: 14px; font-weight: 600; }
.color-row input[type=color] {
    width: 52px; height: 36px; border: 1.5px solid var(--border-c);
    border-radius: 8px; padding: 2px; background: var(--card-bg); cursor: pointer;
}
.color-row code { font-size: 12px; color: var(--gray); direction: ltr; }

.hint-text { font-size: 13px; color: var(--gray); margin-top: 10px; }

/* =========================================================
   ۱۳) نسخه ۶ — بازطراحی لاکچری
   ========================================================= */

/* ---------- HERO ---------- */
.hero {
    position: relative; height: 78vh; min-height: 460px;
    display: flex; align-items: center; overflow: hidden;
}
.hero-bg {
    position: absolute; inset: 0;
    /* اگر عکس hero.jpg نبود، گرادینت لاکچری نمایش داده می‌شود */
    background-image: url('/images/hero.jpg'),
        linear-gradient(115deg, #e9e5de 0%, #cfc9be 45%, #a9a196 100%);
    background-size: cover; background-position: center;
    transform: scale(1.03);
    animation: heroZoom 14s ease-out forwards; /* زوم خیلی آروم سینمایی */
}
@keyframes heroZoom { to { transform: scale(1.1); } }

.hero-content {
    position: relative; z-index: 1;
    margin: 0 auto; max-width: var(--container); width: 100%;
    padding: 0 32px;
}
.hero-eyebrow {
    color: var(--gold-dark); font-size: 14px; font-weight: 700;
    letter-spacing: 2px; margin-bottom: 10px;
}
.hero h1 {
    font-size: clamp(34px, 6vw, 62px); font-weight: 300;
    letter-spacing: 1px; line-height: 1.4;
    color: #2e1f1b; margin-bottom: 14px; max-width: 560px;
}
.hero-sub { color: #5c4038; font-size: 17px; max-width: 460px; margin-bottom: 28px; }
.hero-cta {
    padding: 14px 42px; font-size: 16px; border-radius: 40px;
    box-shadow: 0 8px 24px rgba(168,144,90,.35);
}

/* ---------- نوار اعتماد ---------- */
.trust-bar {
    max-width: var(--container); margin: -46px auto 0; position: relative; z-index: 2;
    background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow);
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    padding: 20px 12px; text-align: center;
}
.trust-item { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.trust-item small { color: var(--gray); font-size: 12px; }
.trust-icon { font-size: 20px; color: var(--gold-dark); }

/* ---------- داستان برند ---------- */
.brand-story {
    max-width: var(--container); margin: 72px auto 0; padding: 0 16px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
}
.story-img {
    height: 380px; border-radius: var(--radius);
    background-image: url('/images/story.jpg'),
        linear-gradient(150deg, #e9e6e0, #b9b3a8);
    background-size: cover; background-position: center;
    box-shadow: var(--shadow);
}
.story-text h2 { font-size: 30px; font-weight: 300; letter-spacing: 1px; margin-bottom: 12px; }
.story-text p { color: var(--gray); line-height: 2.2; }
.story-link { display: inline-block; margin-top: 16px; color: var(--gold-dark); font-weight: 700; }

/* ---------- CTA پایانی ---------- */
.final-cta {
    max-width: var(--container); margin: 72px auto 0; padding: 56px 24px;
    background: linear-gradient(120deg, var(--gold), var(--gold-dark));
    border-radius: var(--radius); text-align: center; color: #fff;
}
.final-cta h2 { font-size: 28px; font-weight: 300; letter-spacing: 1px; }
.final-cta p { opacity: .9; margin: 8px 0 22px; }
.final-cta .hero-cta { background: #fff; color: var(--gold-dark); }

/* ---------- کارت محصول: عکس دوم با هاور + ♡ + کمیابی ---------- */
.product-card { position: relative; }
.img-stack { position: relative; }
.img-layer {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
}
.img-stack, .product-img { height: 165px; }
.img-hover { opacity: 0; transition: opacity .45s ease; }
.product-card:hover .img-hover { opacity: 1; }

.wish-btn {
    position: absolute; top: 10px; left: 10px; z-index: 3;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--card-bg); box-shadow: var(--shadow);
    font-size: 18px; color: #b3453e; display: grid; place-items: center;
    transition: transform .2s;
}
.wish-btn:hover { transform: scale(1.15); }
.wish-btn.active { background: #b3453e; color: #fff; }
.inline-wish { position: static; }

.scarcity-badge {
    position: absolute; top: 14px; right: 0; z-index: 3;
    background: #b3453e; color: #fff; font-size: 11px; font-weight: 700;
    padding: 4px 12px; border-radius: 20px 0 0 20px;
}
.scarcity-inline { color: #b3453e; font-size: 13px; font-weight: 700; margin-bottom: 10px; }

/* ---------- گالری صفحه محصول ---------- */
.gallery-main { overflow: hidden; border-radius: var(--radius); }
.zoomable { transition: transform .5s ease; cursor: zoom-in; }
.zoomable:hover { transform: scale(1.35); }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.thumb {
    width: 64px; height: 64px; border-radius: 10px;
    background-size: cover; background-position: center;
    border: 2px solid transparent; opacity: .75; transition: .2s;
}
.thumb:hover { opacity: 1; }
.thumb.active { border-color: var(--gold-dark); opacity: 1; }

.details-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rating-line { margin: 4px 0 8px; }
.stars { color: var(--gold-dark); letter-spacing: 2px; }
.rating-count { font-size: 13px; color: var(--gray); }

.assurance-row {
    display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0 8px;
    font-size: 12px; color: var(--gray);
}

/* آکاردئون */
.acc { border-bottom: 1px solid var(--border-c); padding: 10px 0; }
.acc summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.acc[open] summary { color: var(--gold-dark); }
.acc p { margin-top: 8px; }

/* ---------- نظرات ---------- */
.reviews-section { margin-top: 56px; }
.related-title { margin-top: 56px; }
.review-card {
    background: var(--card-bg); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 12px;
}
.review-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.review-card p { font-size: 14px; color: var(--gray); }
.review-text { font-size: 14px; color: var(--gray); margin: 8px 0; }
.review-admin-card.pending { border-right: 4px solid var(--gold); }

.review-form {
    background: var(--card-bg); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 20px; margin-top: 20px; max-width: 560px;
}
.review-form h3 { font-size: 16px; color: var(--gold-dark); margin-bottom: 8px; }
.review-form label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
.review-form input, .review-form textarea {
    width: 100%; padding: 10px 12px; border: 1.5px solid var(--border-c);
    border-radius: 8px; font-family: inherit; font-size: 14px; outline: none;
    background: var(--card-bg); color: var(--text-main); resize: vertical;
}
.review-form .btn { margin-top: 14px; }
.star-picker button { font-size: 26px; color: #d3b3a5; transition: color .15s; }
.star-picker button.on { color: var(--gold-dark); }

/* ---------- نوار خرید چسبان (فقط موبایل) ---------- */
.sticky-buy {
    display: none;
    position: fixed; bottom: 62px; right: 0; left: 0; z-index: 90;
    background: var(--card-bg); box-shadow: 0 -4px 18px rgba(0,0,0,.12);
    padding: 10px 16px; align-items: center; justify-content: space-between; gap: 12px;
}
.sticky-buy .btn-gold { padding: 10px 22px; border-radius: 30px; border: none; font-family: inherit; font-weight: 700; cursor: pointer; }
.sticky-price { font-weight: 800; color: var(--gold-dark); }

/* ---------- منوی پایین موبایل ---------- */
.bottom-nav {
    display: none;
    position: fixed; bottom: 0; right: 0; left: 0; z-index: 100;
    background: var(--card-bg); box-shadow: 0 -4px 18px rgba(0,0,0,.12);
    padding: 6px 0;
}
.bottom-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    font-size: 11px; font-weight: 600; color: var(--text-main); position: relative;
}
.bottom-nav a span { font-size: 20px; line-height: 1.2; }
.bn-badge {
    position: absolute; top: -2px; left: 50%; margin-left: -26px;
    background: var(--gold-dark); color: #fff; font-size: 10px;
    min-width: 16px; height: 16px; border-radius: 8px;
    display: grid; place-items: center; padding: 0 3px;
}

/* مدیریت گالری در پنل */
.gallery-manage { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.gm-item { position: relative; }
.gm-item img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.gm-del {
    position: absolute; top: -6px; left: -6px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #b3453e; color: #fff; font-size: 13px; line-height: 1;
}

/* ---------- ریسپانسیو نسخه ۶ ---------- */
@media (max-width: 992px) {
    .trust-bar { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
    .brand-story { grid-template-columns: 1fr; }
    .story-img { height: 260px; }
}
@media (max-width: 768px) {
    .bottom-nav { display: flex; }
    .sticky-buy { display: flex; }
    body { padding-bottom: 64px; } /* جا برای منوی پایین */
    .hero { height: 62vh; }
}

/* =========================================================
   ۱۳) اندازه نمایش (اسلایدر پنل ظاهری)
   ========================================================= */
body { zoom: var(--font-scale, 1); }

/* =========================================================
   ۱۴) پنل تنظیمات ظاهری بازدیدکننده
   ========================================================= */
.ap-backdrop {
    position: fixed; inset: 0; z-index: 700;
    background: rgba(0,0,0,.45);
}
.appearance-panel {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 710;
    width: 340px; max-width: 92vw;
    background: var(--card-bg); color: var(--text-main);
    box-shadow: 8px 0 30px rgba(0,0,0,.25);
    padding: 20px 18px 28px;
    overflow-y: auto;
    transform: translateX(-105%);          /* پیش‌فرض: بیرون از صفحه (سمت چپ) */
    transition: transform .3s ease;
}
.appearance-panel.open { transform: translateX(0); }

.ap-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ap-head h2 { font-size: 18px; font-weight: 800; }
.ap-close { width: 34px; height: 34px; border-radius: 50%; background: var(--border-c); color: var(--text-main); font-size: 14px; }
.ap-close:hover { background: var(--gold); }

.ap-section { border-top: 1px solid var(--border-c); padding: 16px 0; }
.ap-label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.ap-hint { display: block; font-size: 12px; color: var(--gray); line-height: 2; }

/* حالت روز/شب — سگمنت دوتایی */
.ap-segment { display: flex; border: 1.5px solid var(--gold); border-radius: 12px; overflow: hidden; }
.ap-segment button {
    flex: 1; padding: 10px; font-family: inherit; font-size: 14px; font-weight: 700;
    background: transparent; color: var(--text-main); transition: .2s;
}
.ap-segment button.active { background: var(--gold); color: #fff; }

/* سواچ‌های رنگ‌بندی */
.ap-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.ap-swatch {
    height: 56px; border-radius: 12px; position: relative;
    border: 2px solid transparent; transition: transform .15s, border-color .15s;
    display: grid; place-items: center;
}
.ap-swatch:hover { transform: translateY(-2px); }
.ap-swatch.active { border-color: var(--text-main); }
.ap-swatch span { color: #fff; font-size: 18px; font-weight: 800; text-shadow: 0 1px 4px rgba(0,0,0,.5); }

/* اسلایدر اندازه نمایش */
.ap-slider-row { display: flex; align-items: center; gap: 10px; }
.ap-slider-row input[type=range] { flex: 1; accent-color: var(--gold); }
.ap-step {
    width: 34px; height: 34px; border-radius: 10px; background: var(--border-c);
    color: var(--text-main); font-size: 18px; font-weight: 800;
}
.ap-step:hover { background: var(--gold); color: #fff; }
.ap-slider-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 13px; color: var(--gray); }
.ap-link { background: none; color: var(--gray); font-family: inherit; font-size: 13px; text-decoration: underline; }
.ap-link:hover { color: var(--gold-dark); }

/* پس‌زمینه سفارشی */
.ap-bg-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ap-bg-row input[type=color] {
    width: 52px; height: 38px; border: 1.5px solid var(--border-c);
    border-radius: 10px; padding: 2px; background: var(--card-bg); cursor: pointer;
}
.ap-btn {
    padding: 9px 18px; border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 700;
    background: transparent; border: 1.5px solid var(--border-c); color: var(--text-main); transition: .2s;
}
.ap-btn.primary { background: var(--gold); border-color: var(--gold); color: #fff; }
.ap-btn:hover { border-color: var(--gold); }

/* بازگشت کامل */
.ap-reset-all {
    width: 100%; padding: 12px; border-radius: 12px;
    border: 1.5px solid var(--gold); color: var(--gold-dark); background: transparent;
    font-family: inherit; font-size: 14px; font-weight: 800; transition: .2s; margin-bottom: 6px;
}
html[data-theme="dark"] .ap-reset-all { color: var(--gold); }
.ap-reset-all:hover { background: var(--gold); color: #fff; }

/* بخش «سربرگ و بنر» پنل مدیریت */
.site-card { max-width: 640px; }
.site-divider { border: none; border-top: 1px solid var(--border-c); margin: 18px 0 10px; }
.hero-preview {
    height: 160px; border-radius: var(--radius); margin: 8px 0 10px;
    background-size: cover; background-position: center;
    border: 1.5px solid var(--border-c);
}

/* توضیحات کوتاه زیر نام محصول در کارت — بولد */
.product-desc {
    font-size: 12px;
    font-weight: 700;          /* بولد طبق سلیقه فروشگاه */
    color: var(--gray);
    line-height: 1.9;
}

/* صفحه جزئیات: توضیحات و ویژگی‌های محصول بولد */
.details-desc { font-weight: 700; }
.acc p { font-weight: 700; }
.details-stock { font-weight: 700; }

/* =========================================================
   ۱۵) پرداخت — انتخاب روش و صفحه نتیجه
   ========================================================= */
.pay-methods { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.pay-option {
    display: flex; align-items: center; gap: 10px;
    border: 1.5px solid var(--border-c); border-radius: 10px;
    padding: 12px 14px; cursor: pointer; font-size: 14px; font-weight: 700;
    transition: border-color .2s, background .2s;
}
.pay-option.active { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.pay-option input { accent-color: var(--gold); }

.pay-icon {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 12px;
    display: grid; place-items: center; font-size: 30px; font-weight: 800; color: #fff;
}
.ok-icon   { background: #3d9950; }
.fail-icon { background: #b3453e; }
.pay-title { font-size: 20px; margin-bottom: 10px; }
.pay-retry { border: none; cursor: pointer; font-family: inherit; font-weight: 700; }

/* =========================================================
   ۱۵) ورود / ثبت‌نام / حساب مشتری
   ========================================================= */
.auth-card { max-width: 420px; margin: 40px auto; }
.auth-card label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
.auth-card input {
    width: 100%; padding: 10px 12px; border: 1.5px solid var(--border-c);
    border-radius: 8px; font-family: inherit; font-size: 14px; outline: none;
    background: var(--card-bg); color: var(--text-main);
}
.auth-card input:focus { border-color: var(--gold-dark); }
.ltr-input { direction: ltr; text-align: left; }

.auth-tabs { display: flex; border: 1.5px solid var(--gold); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.auth-tabs button {
    flex: 1; padding: 11px; font-family: inherit; font-size: 15px; font-weight: 800;
    background: transparent; color: var(--text-main); transition: .2s;
}
.auth-tabs button.active { background: var(--gold); color: #fff; }

.auth-hint { margin-top: 14px; font-size: 13px; color: var(--gray); text-align: center; }

.account-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* =========================================================
   ۱۶) آدرس ساختاریافته + انتخابگر جستجودار + مشتری‌های ادمین
   ========================================================= */
.addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.addr-grid.three { grid-template-columns: 1fr 1fr 1.4fr; }
.addr-grid label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
@media (max-width: 560px) {
    .addr-grid, .addr-grid.three { grid-template-columns: 1fr; gap: 0; }
}

/* انتخابگر جستجودار */
.search-select { position: relative; }
.search-select input {
    width: 100%; padding: 10px 12px 10px 30px;
    border: 1.5px solid var(--border-c); border-radius: 8px;
    font-family: inherit; font-size: 14px; outline: none;
    background: var(--card-bg); color: var(--text-main);
}
.search-select input:focus { border-color: var(--gold-dark); }
.search-select.disabled { opacity: .55; }
.ss-arrow {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--gray); font-size: 12px; pointer-events: none;
}
.ss-list {
    position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 300;
    max-height: 230px; overflow-y: auto;
    background: var(--card-bg); border: 1.5px solid var(--border-c);
    border-radius: 10px; box-shadow: var(--shadow);
}
.ss-list button {
    display: block; width: 100%; text-align: right;
    padding: 9px 14px; font-family: inherit; font-size: 14px;
    background: transparent; color: var(--text-main);
}
.ss-list button:hover { background: var(--border-c); }
.ss-list button.selected { color: var(--gold-dark); font-weight: 800; }

/* جدول مشتری‌های ادمین */
.customer-search {
    width: 100%; max-width: 360px; padding: 9px 12px; margin-bottom: 12px;
    border: 1.5px solid var(--border-c); border-radius: 8px;
    font-family: inherit; font-size: 14px; outline: none;
    background: var(--card-bg); color: var(--text-main);
}
.customer-search:focus { border-color: var(--gold-dark); }
.customers-table-wrap { overflow-x: auto; }
.customers-table-wrap .data-table { min-width: 860px; }
.ltr-cell { direction: ltr; text-align: right; }
.addr-cell { max-width: 240px; font-size: 12px; }

/* =========================================================
   ۱۶) صفحه ورود/ثبت‌نام — طرح مرجع کاربر (کرم + نقاشی خطی + کارت سفید)
   ========================================================= */
.rz-page {
    position: relative;
    min-height: calc(100vh - 220px);
    background: #f6efe4;                        /* کرم گرم مرجع */
    border-radius: var(--radius);
    margin: 26px auto; max-width: var(--container);
    padding: 56px 16px 28px;
    overflow: hidden;
    display: flex; flex-direction: column; align-items: center;
}
html[data-theme="dark"] .rz-page { background: var(--card-bg); }

/* ---------- کارت ---------- */
.rz-card {
    position: relative; z-index: 2;
    width: 100%; max-width: 380px;
    background: #ffffff;
    border-radius: 26px;
    box-shadow: 0 24px 60px rgba(60, 45, 20, .14);
    padding: 30px 26px 24px;
}
html[data-theme="dark"] .rz-card {
    background: var(--cream);
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
}

.rz-title { text-align: center; font-size: 21px; font-weight: 800; margin-bottom: 8px; color: #17140e; }
html[data-theme="dark"] .rz-title { color: var(--text-main); }
.rz-sub { text-align: center; font-size: 12.5px; color: #8a8375; line-height: 2; margin-bottom: 18px; }
html[data-theme="dark"] .rz-sub { color: var(--gray); }

/* ---------- فیلدها (گردگوشه با آیکن انتها) ---------- */
.rz-field { position: relative; margin-bottom: 12px; }
.rz-field input {
    width: 100%; padding: 12px 14px; padding-left: 64px;
    border: 1.5px solid #e8e0d0; border-radius: 12px;
    font-family: inherit; font-size: 13.5px; outline: none;
    background: #fff; color: #17140e; transition: border-color .2s;
}
.rz-field input:focus { border-color: #f0b969; }
html[data-theme="dark"] .rz-field input { background: var(--card-bg); border-color: var(--border-c); color: var(--text-main); }

.rz-field .ltr-input { text-align: left; }
.rz-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    font-size: 14px; opacity: .55; pointer-events: none;
}
.rz-hide {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    background: none; font-family: inherit; font-size: 11.5px; font-weight: 700;
    color: #8a8375; cursor: pointer;
}
.rz-hide:hover { color: #d99a3e; }

.rz-trouble { font-size: 11.5px; color: #8a8375; margin: 2px 2px 14px; }
html[data-theme="dark"] .rz-trouble { color: var(--gray); }

/* ---------- دکمه کهربایی مرجع ---------- */
.rz-btn {
    width: 100%; padding: 12px;
    background: #f6c079; color: #241c0e;
    border-radius: 12px; font-family: inherit; font-size: 14.5px; font-weight: 800;
    transition: background .2s, transform .15s;
    box-shadow: 0 6px 16px rgba(214, 158, 74, .35);
}
.rz-btn:hover:not(:disabled) { background: #f2b45f; transform: translateY(-1px); }
.rz-btn:disabled { opacity: .6; }

.rz-msg { margin-top: 12px; }

/* ---------- جداکننده و لینک تعویض حالت ---------- */
.rz-divider { text-align: center; margin: 18px 0 8px; }
.rz-divider span { font-size: 11.5px; color: #b3ab99; }
.rz-switch { text-align: center; font-size: 13px; color: #5c5546; }
html[data-theme="dark"] .rz-switch { color: var(--gray); }
.rz-link { color: #c98f3c; font-weight: 700; }
.rz-link:hover { color: #a8742b; }
.rz-link.strong { text-decoration: underline; }

.rz-footer { position: relative; z-index: 2; margin-top: 22px; font-size: 11.5px; color: #a59d8c; }
html[data-theme="dark"] .rz-footer { color: var(--gray); }

/* =========================================================
   تزئینات خطی و خال‌خالی دور کارت (وفادار به مرجع)
   ========================================================= */
.rz-deco { position: absolute; top: 0; bottom: 0; width: 300px; z-index: 1; pointer-events: none; }
.rz-deco-right { right: 3%; }
.rz-deco-left { left: 3%; }

/* موج‌های خطی */
.rz-squiggle { width: 120px; position: absolute; }
.rz-squiggle path { fill: none; stroke: #2a2418; stroke-width: 2; stroke-linecap: round; }
html[data-theme="dark"] .rz-squiggle path { stroke: var(--gray); }
.rz-deco-right .rz-squiggle { top: 18%; right: 30px; }
.rz-deco-left .rz-squiggle { top: 30%; left: 10px; }

/* قاب‌های کوچک خطی */
.rz-frame {
    position: absolute; width: 74px; height: 58px;
    border: 2px solid #2a2418; border-radius: 6px; background: #fff;
    display: grid; place-items: center; font-size: 18px; color: #2a2418;
    transform: rotate(-4deg);
}
html[data-theme="dark"] .rz-frame { background: var(--card-bg); border-color: var(--gray); color: var(--gray); }
.rz-deco-right .rz-frame { top: 34%; right: 130px; }
.rz-deco-left .rz-frame.small { top: 16%; left: 60px; width: 58px; height: 44px; transform: rotate(5deg); }

/* بلوک‌های خال‌خالی کهربایی */
.rz-dotbox {
    position: absolute; border-radius: 10px;
    background-color: #f6c079;
    background-image: radial-gradient(#241c0e 1.6px, transparent 1.7px);
    background-size: 14px 14px;
}
.rz-dot-1 { width: 66px; height: 120px; bottom: 12%; right: 40px; transform: rotate(3deg); }
.rz-dot-2 { width: 56px; height: 100px; bottom: 16%; left: 120px; transform: rotate(-5deg); }

/* مربع سفید با فلش */
.rz-square {
    position: absolute; width: 64px; height: 76px; bottom: 13%; right: 130px;
    background: #fff; border: 2px solid #2a2418; border-radius: 4px; transform: rotate(-6deg);
}
html[data-theme="dark"] .rz-square { background: var(--card-bg); border-color: var(--gray); }
.rz-square svg { width: 100%; height: 100%; }
.rz-square path { fill: none; stroke: #2a2418; stroke-width: 2; stroke-linecap: round; }
html[data-theme="dark"] .rz-square path { stroke: var(--gray); }

/* نقطه‌ها و حلقه */
.rz-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #2a2418; top: 55%; right: 90px; }
.rz-dot.big { width: 12px; height: 12px; top: 60%; left: 70px; background: #f6c079; border: 2px solid #2a2418; }
.rz-ring { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #2a2418; top: 24%; left: 190px; }
html[data-theme="dark"] .rz-dot, html[data-theme="dark"] .rz-ring { border-color: var(--gray); background: var(--gray); }
html[data-theme="dark"] .rz-ring { background: transparent; }

/* موبایل: تزئینات کنار می‌روند تا کارت نفس بکشد */
@media (max-width: 900px) {
    .rz-deco { display: none; }
    .rz-page { padding-top: 34px; min-height: auto; }
}

/* --- نوار بالای بوم ورود --- */
.rz-topbar {
    position: absolute; top: 22px; right: 5%; left: 5%; z-index: 3;
    display: flex; justify-content: space-between; align-items: center;
}
.rz-brand-name {
    display: inline-block; font-size: 17px; font-weight: 800; color: #17140e;
    border-bottom: 2px solid #17140e; padding-bottom: 4px;
}
.rz-brand-sub { display: block; margin-top: 6px; font-size: 11px; color: #8a8375; }
html[data-theme="dark"] .rz-brand-name { color: var(--text-main); border-color: var(--text-main); }
html[data-theme="dark"] .rz-brand-sub { color: var(--gray); }
.rz-top-actions { display: flex; align-items: center; gap: 16px; }
.rz-top-link { font-size: 13px; font-weight: 700; color: #17140e; }
html[data-theme="dark"] .rz-top-link { color: var(--text-main); }
.rz-top-link:hover { color: #c98f3c; }
.rz-top-pill {
    background: #f6c079; color: #241c0e; font-size: 13px; font-weight: 800;
    padding: 9px 16px; border-radius: 10px; box-shadow: 0 4px 12px rgba(214,158,74,.3);
    transition: background .2s;
}
.rz-top-pill:hover { background: #f2b45f; }

/* --- خط زمین --- */
.rz-ground {
    position: absolute; left: 5%; right: 5%; bottom: 21%; z-index: 0;
    border-top: 2px solid #2a2418; opacity: .9;
}
html[data-theme="dark"] .rz-ground { border-color: var(--gray); }

/* بلوک‌ها روی خط زمین بنشینند */
.rz-dot-1 { bottom: 21%; right: 24px; }
.rz-dot-2 { bottom: 21%; left: 120px; }
.rz-square { bottom: 21%; right: 118px; width: 58px; height: 70px; }

/* --- کاراکتر نشسته --- */
.rz-person { position: absolute; width: 190px; bottom: calc(21% - 3px); right: 96px; }
.rz-person .pf   { fill: #fff; stroke: #2a2418; stroke-width: 2; }
.rz-person .ink  { fill: #2a2418; }
.rz-person .amber{ fill: #f6c079; stroke: #2a2418; stroke-width: 2; }
.rz-person .arm  { fill: none; stroke: #2a2418; stroke-width: 8; stroke-linecap: round; }
.rz-person .leg-out { fill: none; stroke: #2a2418; stroke-width: 13; stroke-linecap: round; }
.rz-person .leg-in  { fill: none; stroke: #fff;    stroke-width: 9;  stroke-linecap: round; }
html[data-theme="dark"] .rz-person .pf { fill: var(--card-bg); stroke: var(--gray); }
html[data-theme="dark"] .rz-person .ink { fill: var(--gray); }
html[data-theme="dark"] .rz-person .arm,
html[data-theme="dark"] .rz-person .leg-out { stroke: var(--gray); }
html[data-theme="dark"] .rz-person .leg-in { stroke: var(--card-bg); }

/* --- آیکن حلقه‌ای فیلد موبایل (مثل مرجع) --- */
.rz-ring-icon {
    width: 14px; height: 14px; border: 1.6px solid #b3ab99; border-radius: 50%;
    display: inline-block; opacity: 1;
}

/* جای کاراکتر در صفحه‌های باریک‌تر دسکتاپ */
@media (max-width: 1200px) {
    .rz-person { right: 30px; width: 165px; }
    .rz-square { right: 210px; }
}
@media (max-width: 700px) {
    .rz-topbar { position: static; margin-bottom: 18px; width: 100%; padding: 0 4px; }
    .rz-ground { display: none; }
}

/* =========================================================
   ۱۷) تم مونوکروم مینیمال (مرجع DARION)
   ========================================================= */

/* نوار اعلان: مشکی باریک */
.announcement-bar { background: var(--dark); font-size: 12px; padding: 8px 14px; }

/* ---------- هدر قرصی شناور ---------- */
.site-header {
    max-width: calc(var(--container) - 28px);
    margin: 14px auto 0;
    border-radius: 22px;
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,.10);
    top: 10px;               /* حالت sticky با فاصله از بالا */
}
html[data-theme="dark"] .site-header { box-shadow: 0 10px 30px rgba(0,0,0,.5); }

/* ---------- Hero تمام‌عرض با متن سفید وسط ---------- */
.hero { height: 72vh; min-height: 430px; margin-top: -70px; }
.hero-bg {
    background-image: url('/images/hero.jpg'),
        linear-gradient(115deg, #e7e2d9 0%, #cfc8bb 55%, #a9a196 100%);
}
.hero-bg::after {           /* لایه تیره برای خوانایی متن روی عکس */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.30));
}
.hero-content { position: relative; z-index: 2; text-align: center; margin: 0 auto; max-width: 760px; }
.hero-eyebrow { color: #f2f2f2; letter-spacing: 2px; font-size: 12.5px; }
.hero-content h1 {
    color: #fff; font-size: 46px; font-weight: 800; line-height: 1.5;
    text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.hero-sub { color: #ececec; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.hero-cta {
    background: #fff !important; color: #111 !important;
    border-radius: 999px; padding: 12px 34px; font-weight: 800;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.hero-cta:hover { background: #eee !important; }

/* ---------- نوار مزایا: مشکی تمام‌عرض با آیکن خطی ---------- */
.trust-bar {
    max-width: none; margin: 0; border-radius: 0;
    background: #111; color: #fff;
    padding: 26px 6vw;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
    box-shadow: none;
}
.trust-item { display: flex; align-items: center; gap: 12px; background: none; box-shadow: none; padding: 0; }
.trust-item svg { width: 30px; height: 30px; flex: none; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.trust-item b { display: block; color: #fff; font-size: 14px; }
.trust-item small { color: #b9b9b9; font-size: 12px; }
html[data-theme="dark"] .trust-bar { background: #181818; }

/* ---------- کاشی‌های دسته: کارت عکس بلند با برچسب پایین ---------- */
.tile-label {
    position: absolute; right: 16px; bottom: 14px; z-index: 2;
    background: none; padding: 0; text-align: right;
}
.tile-label b { display: block; color: #fff; font-size: 17px; font-weight: 800; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.tile-label small { color: #ddd; font-size: 11.5px; }

/* ---------- کارت محصول مینیمال ---------- */
.product-card {
    border: 1px solid var(--border-c);
    box-shadow: none;
    border-radius: 12px;
    transition: transform .2s, box-shadow .2s;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.10); }
.product-img, .img-stack { background-color: #f4f4f4; }
html[data-theme="dark"] .product-img, html[data-theme="dark"] .img-stack { background-color: #222; }

.oos-badge {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    background: #111; color: #fff;
    font-size: 11px; font-weight: 700;
    padding: 4px 10px; border-radius: 999px;
}

/* ---------- باند مشکی «پرفروش‌ها» ---------- */
.bestseller-band {
    background: #111;
    /* والد (main) تمام‌عرض است؛ ترفند 100vw حذف شد — عامل سرریز افقی موبایل بود */
    padding: 46px 0 54px; margin-top: 56px;
}
html[data-theme="dark"] .bestseller-band { background: #000; }
.band-inner { max-width: var(--container); margin: 0 auto; padding: 0 16px; }
.band-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 22px; }
.band-title { color: #fff; font-size: 26px; font-weight: 800; }
.band-sub { color: #a9a9a9; font-size: 13px; }
.bestseller-band .product-card { border-color: rgba(255,255,255,.08); }
.bestseller-band .center-msg { color: #ccc; }

/* ---------- داستان برند به سبک بخش «Luminous Living» ---------- */
.brand-story { align-items: center; }
.story-text .hero-eyebrow { color: #999; letter-spacing: 3px; font-size: 11.5px; }
.story-text h2 { font-size: 34px; font-weight: 800; letter-spacing: 0; }
.story-text p { color: var(--gray); font-size: 13.5px; }
.story-link {
    display: inline-block; margin-top: 16px;
    background: var(--dark); color: #fff;
    padding: 11px 26px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
}
.story-link:hover { opacity: .85; color: #fff; }
.story-img {
    background-image: url('/images/story.jpg'),
        linear-gradient(150deg, #e9e6e0, #b9b3a8);
}

/* تیترهای بخش‌ها: بولد و ساده */
.section-title { font-weight: 800; font-size: 24px; }
.section-title::before, .section-title::after { display: none; }

/* CTA پایانی هماهنگ با تم */
.final-cta .hero-cta { background: var(--dark) !important; color: #fff !important; box-shadow: none; }

@media (max-width: 900px) {
    .trust-bar { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
    .hero-content h1 { font-size: 30px; }
    .hero { margin-top: -62px; }
}

/* عضویت پیامک خبری (حساب من) */
.optin-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; margin: 14px 2px 4px; cursor: pointer;
}
.optin-row input { width: 16px; height: 16px; accent-color: var(--gold); }

/* کد تستی پیامک در صفحه ورود (حالت توسعه) */
.rz-devcode {
    background: #fff6e4; border: 1.5px dashed #f0b969; color: #7a5b23;
    font-size: 12px; border-radius: 10px; padding: 8px 12px; margin: -4px 0 10px;
}
html[data-theme="dark"] .rz-devcode { background: #2a2410; border-color: #8a6f35; color: #e5c988; }

/* پیام هشدار (پنل پیامک) */
.msg.warn {
    background: #fff6e4; color: #7a5b23; border: 1px solid #f0d9a8;
    padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 2; margin-bottom: 12px;
}
html[data-theme="dark"] .msg.warn { background: #2a2410; color: #e5c988; border-color: #8a6f35; }
.sms-card { max-width: 640px; }
.sms-card textarea {
    width: 100%; padding: 10px 12px; border: 1.5px solid var(--border-c); border-radius: 8px;
    font-family: inherit; font-size: 14px; outline: none; resize: vertical;
    background: var(--card-bg); color: var(--text-main);
}
.sms-card textarea:focus { border-color: var(--gold-dark); }

/* تم‌های آماده در پنل مدیریت (ظاهر سایت) */
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.preset-card {
    position: relative;
    border: 1.5px solid var(--border-c); border-radius: 12px;
    background: var(--card-bg); color: var(--text-main);
    padding: 10px; font-family: inherit; font-size: 12.5px; font-weight: 700;
    display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
    transition: border-color .15s, transform .15s;
}
.preset-card:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-2px); }
.preset-card.active { border-color: var(--gold); box-shadow: 0 0 0 1.5px var(--gold); }
.preset-chips { display: flex; gap: 4px; width: 100%; }
.preset-chips i {
    flex: 1; height: 26px; border-radius: 6px; border: 1px solid rgba(0,0,0,.08);
}
.preset-check {
    position: absolute; top: 8px; left: 10px;
    color: var(--gold-dark); font-size: 14px; font-weight: 800;
}

/* =========================================================
   ۱۸) کارت «اطلاعات من» و سربرگ حساب — فرم مرتب و هم‌خانواده
   ========================================================= */

/* سربرگ حساب: آواتار + نام */
.account-head { padding: 18px 22px; }
.account-id { display: flex; align-items: center; gap: 14px; }
.avatar {
    width: 50px; height: 50px; border-radius: 50%; flex: none;
    background: var(--gold); color: #fff;
    display: grid; place-items: center;
    font-size: 21px; font-weight: 800;
}
.account-id b { font-size: 16px; }

/* فرم پروفایل */
.profile-card { padding: 22px 24px 24px; }
.profile-card .card-title { margin-bottom: 4px; }

.profile-card label {
    display: block;
    font-size: 13px; font-weight: 700;
    margin: 16px 2px 6px;
    color: var(--text-main);
}

.profile-card input:not([type=checkbox]),
.profile-card textarea,
.profile-card .search-select input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--border-c);
    border-radius: 10px;
    font-family: inherit; font-size: 14px;
    background: var(--card-bg); color: var(--text-main);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.profile-card input:focus,
.profile-card textarea:focus,
.profile-card .search-select input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);
}
.profile-card textarea { resize: vertical; min-height: 68px; line-height: 2; }

/* گرید استان/شهر و پلاک/واحد/کدپستی — داخل کارت پروفایل */
.profile-card .addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.profile-card .addr-grid.three { grid-template-columns: repeat(3, 1fr); }
.profile-card .addr-grid label { margin-top: 0; }
.profile-card .search-select { width: 100%; }

/* عضویت پیامکی و دکمه ذخیره */
.profile-card .optin-row { margin: 18px 2px 6px; }
.profile-card .form-actions { margin-top: 16px; }
.profile-card .form-actions .btn { padding: 11px 30px; border-radius: 10px; font-size: 14px; }

@media (max-width: 640px) {
    .profile-card .addr-grid,
    .profile-card .addr-grid.three { grid-template-columns: 1fr; gap: 0; }
}

/* =========================================================
   ۱۹) سیستم طراحی لوکس «کرم و طلایی»
   قانون: همه متن‌ها مشکی خالص — هیچ متن سفیدی، هیچ متن خاکستری
   دکمه‌ها: طلایی ملایم با متن مشکی — هاور: طلاییِ کمی تیره‌تر + سایه نرم
   ========================================================= */

/* ---------- دکمه‌ها ---------- */
.btn-gold, .add-to-cart, .hero-cta, .story-link,
.final-cta .hero-cta, .details-add, .rz-btn, .rz-top-pill, .ap-btn.primary {
    background: var(--gold) !important;
    color: #000 !important;
    box-shadow: none;
    transition: background .2s, box-shadow .2s, transform .15s;
}
.btn-gold:hover:not(:disabled), .add-to-cart:hover:not(:disabled),
.hero-cta:hover, .story-link:hover, .details-add:hover,
.rz-btn:hover:not(:disabled), .rz-top-pill:hover {
    background: var(--gold-dark) !important;
    color: #000 !important;
    box-shadow: 0 10px 26px rgba(176, 143, 95, .35);
}
html[data-theme="dark"] .btn-gold, html[data-theme="dark"] .add-to-cart,
html[data-theme="dark"] .hero-cta, html[data-theme="dark"] .details-add { color: #000 !important; }

/* ---------- نوار اعلان: بژ با متن مشکی ---------- */
.announcement-bar { background: var(--section); color: #000; font-weight: 600; }
html[data-theme="dark"] .announcement-bar { color: var(--text-main); }

/* ---------- Hero: متن مشکی روی پرده‌ی کرم روشن ---------- */
.hero-bg::after {
    background: linear-gradient(rgba(248,245,242,.42), rgba(248,245,242,.62));
}
.hero-eyebrow { color: #000; }
.hero-content h1 { color: #000; text-shadow: none; }
.hero-sub { color: #000; text-shadow: none; }
html[data-theme="dark"] .hero-bg::after {
    background: linear-gradient(rgba(14,14,14,.45), rgba(14,14,14,.65));
}
html[data-theme="dark"] .hero-eyebrow,
html[data-theme="dark"] .hero-content h1,
html[data-theme="dark"] .hero-sub { color: var(--text-main); }

/* ---------- نوار مزایا: بخش بژ، آیکن و متن مشکی ---------- */
.trust-bar { background: var(--section); }
.trust-item svg { stroke: #000; }
.trust-item b { color: #000; }
.trust-item small { color: #000; }
html[data-theme="dark"] .trust-bar { background: var(--section); }
html[data-theme="dark"] .trust-item svg { stroke: var(--text-main); }
html[data-theme="dark"] .trust-item b,
html[data-theme="dark"] .trust-item small { color: var(--text-main); }

/* ---------- کاشی دسته: برچسبِ کارت سفید با متن مشکی ---------- */
.tile-label {
    background: #fff; border-radius: 10px;
    padding: 8px 14px; right: 12px; bottom: 12px;
    box-shadow: var(--shadow);
}
.tile-label b { color: #000; text-shadow: none; font-size: 15px; }
.tile-label small { color: #000; }

/* ---------- باند پرفروش‌ها: بخش بژ با متن مشکی ---------- */
.bestseller-band { background: var(--section); }
html[data-theme="dark"] .bestseller-band { background: var(--section); }
.band-title { color: #000; }
.band-sub { color: #000; }
html[data-theme="dark"] .band-title, html[data-theme="dark"] .band-sub { color: var(--text-main); }
.bestseller-band .product-card { border-color: var(--border-c); }
.bestseller-band .center-msg { color: #000; }

/* ---------- متن‌ها: مشکی خالص ---------- */
.product-price, .details-price { color: #000; }
.product-desc, .details-stock, .details-desc { color: #000; }
.gold-link { color: #000; border-bottom: 1.5px solid var(--gold); padding-bottom: 1px; }
.gold-link:hover { color: #000; border-color: var(--gold-dark); }
a.product-name:hover { color: #000; text-decoration: underline; text-decoration-color: var(--gold); }
.details-category { color: #000; border-bottom: 1.5px solid var(--gold); }
html[data-theme="dark"] .product-price, html[data-theme="dark"] .details-price,
html[data-theme="dark"] .product-desc, html[data-theme="dark"] .gold-link,
html[data-theme="dark"] .details-category { color: var(--text-main); }

/* ---------- نشان‌ها: طلایی با متن مشکی ---------- */
.oos-badge, .scarcity-badge {
    background: var(--gold); color: #000;
}

/* ---------- سربرگ داستان برند و CTA پایانی: بخش بژ ---------- */
.final-cta { background: var(--section); border-radius: var(--radius); padding: 42px 20px; }
.final-cta h2, .final-cta p { color: #000; }
html[data-theme="dark"] .final-cta h2, html[data-theme="dark"] .final-cta p { color: var(--text-main); }
.story-text .hero-eyebrow { color: #000; }
.story-text p { color: #000; }
html[data-theme="dark"] .story-text p { color: var(--text-main); }

/* ---------- تایپوگرافی لوکس: تیترها با فاصله‌ی حروف ---------- */
h1, h2, .section-title, .band-title, .rz-title {
    letter-spacing: .3px;
    font-weight: 700;
}

/* ---------- صفحه درباره ما ---------- */
.about-page { max-width: var(--container); margin: 26px auto 60px; padding: 0 16px; }
.about-hero {
    background: var(--section); border-radius: var(--radius);
    text-align: center; padding: 64px 24px;
}
.about-eyebrow { font-size: 12.5px; letter-spacing: 3px; font-weight: 700; color: #000; margin-bottom: 10px; }
.about-hero h1 { font-size: 38px; color: #000; margin-bottom: 14px; }
.about-lead { max-width: 620px; margin: 0 auto; color: #000; font-size: 14.5px; line-height: 2.3; }
html[data-theme="dark"] .about-eyebrow, html[data-theme="dark"] .about-hero h1,
html[data-theme="dark"] .about-lead { color: var(--text-main); }

.about-values {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 22px 0;
}
.value-card {
    background: var(--card-bg); border: 1px solid var(--border-c);
    border-radius: var(--radius); padding: 26px 22px;
    box-shadow: var(--shadow);
}
.value-num { font-size: 13px; font-weight: 800; color: #000; border-bottom: 2px solid var(--gold); padding-bottom: 4px; }
.value-card h3 { margin: 14px 0 8px; font-size: 16.5px; color: var(--text-main); }
.value-card p { font-size: 13px; line-height: 2.1; color: var(--text-main); }
html[data-theme="dark"] .value-num { color: var(--text-main); }

.about-cta {
    background: var(--section); border-radius: var(--radius);
    text-align: center; padding: 46px 20px;
}
.about-cta h2 { color: #000; margin-bottom: 18px; }
html[data-theme="dark"] .about-cta h2 { color: var(--text-main); }
.about-btn { display: inline-block; padding: 12px 34px; border-radius: 999px; font-weight: 800; }

@media (max-width: 800px) {
    .about-values { grid-template-columns: 1fr; }
    .about-hero h1 { font-size: 28px; }
}

/* =========================================================
   ۲۰) پنل مدیریت لوکس (کرم و طلایی) + داشبورد
   ========================================================= */

/* نوار بالای پنل: کارت سفید، متن مشکی، بدون رنگ اضافه */
.admin-topbar {
    background: var(--card-bg);
    color: var(--text-main);
    box-shadow: var(--shadow);
    border-bottom: 1px solid var(--border-c);
    position: sticky; top: 0; z-index: 500;
}
.admin-topbar h1 { color: var(--text-main); }
.admin-topbar nav a { color: var(--text-main); font-weight: 600; padding-bottom: 3px; }
.admin-topbar nav a:hover { border-bottom: 2px solid var(--gold); }

/* ---------- کارت‌های آمار ---------- */
.dash { max-width: 1180px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-card {
    background: var(--card-bg); border: 1px solid var(--border-c);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 18px 20px; display: flex; flex-direction: column; gap: 6px;
    color: var(--text-main);
}
.stat-card small { font-size: 12px; font-weight: 700; }
.stat-card b { font-size: 21px; font-weight: 800; }
.stat-card span { font-size: 12px; border-top: 1px dashed var(--border-c); padding-top: 6px; }
.stat-link { text-decoration: none; transition: transform .15s, box-shadow .2s; }
.stat-link:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(52,42,26,.12); }
.stat-link b { border-bottom: 2px solid var(--gold); align-self: flex-start; }

/* ---------- بینش‌های هوشمند: بخش بژ ---------- */
.insights-card { background: var(--section); border: none; }
.insight-line {
    background: var(--card-bg); border-radius: 10px;
    padding: 10px 14px; margin: 8px 0;
    font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow);
}

/* ---------- نمودار میله‌ای ۱۴ روز (CSS خالص) ---------- */
.chart-wrap {
    display: flex; align-items: flex-end; gap: 6px;
    height: 170px; padding-top: 8px;
}
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 6px; }
.chart-col .bar {
    width: 100%; max-width: 34px;
    background: var(--gold); border-radius: 6px 6px 0 0;
    transition: background .15s;
}
.chart-col:hover .bar { background: var(--gold-dark); }
.chart-col small { font-size: 10px; color: var(--text-main); direction: ltr; }

.dash-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lowstock-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 4px; border-bottom: 1px dashed var(--border-c); font-size: 13.5px;
}

/* ---------- نوار ابزار لیست‌ها (جستجو/فیلتر) ---------- */
.list-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.list-toolbar input, .list-toolbar select {
    padding: 9px 12px; border: 1.5px solid var(--border-c); border-radius: 10px;
    font-family: inherit; font-size: 13px; outline: none;
    background: var(--card-bg); color: var(--text-main);
}
.list-toolbar input { flex: 1; min-width: 180px; }
.list-toolbar input:focus, .list-toolbar select:focus { border-color: var(--gold); }
.toolbar-count { font-size: 12px; font-weight: 700; background: var(--section); padding: 6px 12px; border-radius: 999px; }
.orders-toolbar { padding: 14px 16px; }

/* ---------- ویرایش درجا ---------- */
.cell-edit { cursor: pointer; }
.cell-edit > span { border-bottom: 1.5px dashed transparent; transition: border-color .15s; }
.cell-edit:hover > span { border-bottom-color: var(--gold); }
.quick-input {
    width: 100px; padding: 6px 8px; direction: ltr; text-align: left;
    border: 1.5px solid var(--gold); border-radius: 8px;
    font-family: inherit; font-size: 13px; outline: none;
    background: var(--card-bg); color: var(--text-main);
}
@keyframes rowflash { 0% { background: color-mix(in srgb, var(--gold) 40%, transparent); } 100% { background: transparent; } }
.flash { animation: rowflash .9s ease-out; }

/* ---------- تایم‌لاین سفارش ---------- */
.timeline { display: flex; align-items: center; gap: 6px; margin: 12px 0 4px; }
.tl-step { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 74px; }
.tl-step i {
    width: 15px; height: 15px; border-radius: 50%;
    border: 2.5px solid var(--border-c); background: var(--card-bg);
}
.tl-step span { font-size: 11px; font-weight: 700; }
.tl-step.done i { background: var(--gold); border-color: var(--gold); }
.tl-step.cod i { border-color: var(--gold); }
.tl-step.fail i { border-color: #b3453e; background: #b3453e; }
.tl-line { flex: 1; height: 2.5px; background: var(--border-c); border-radius: 2px; }
.tl-line.done { background: var(--gold); }

/* ---------- بخش‌بندی مشتری‌ها ---------- */
.seg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.seg-chip {
    padding: 7px 16px; border-radius: 999px;
    border: 1.5px solid var(--border-c); background: var(--card-bg);
    font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-main);
    transition: .15s;
}
.seg-chip:hover { border-color: var(--gold); }
.seg-chip.active { background: var(--gold); border-color: var(--gold); color: #000; }
.seg-badge { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.seg-vip { background: var(--gold); color: #000; }
.seg-normal { border: 1.5px solid var(--border-c); }
.seg-off { background: var(--section); }

/* ---------- موبایل پنل ---------- */
@media (max-width: 900px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-two { grid-template-columns: 1fr; }
    .admin-card { overflow-x: auto; }   /* جدول‌ها در موبایل اسکرول افقی */
    .chart-col small { display: none; }
    .admin-container { grid-template-columns: 1fr; }
}

/* =========================================================
   ۲۱) سایدبار پنل مدیریت (سمت راست، آیتم‌ها زیر هم)
   ========================================================= */
.admin-shell { display: flex; min-height: 100vh; align-items: stretch; }
.admin-side {
    width: 225px; flex: none;
    background: var(--card-bg);
    border-left: 1px solid var(--border-c);
    box-shadow: var(--shadow);
    padding: 20px 14px;
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column;
    overflow-y: auto;
}
.side-title { font-size: 17px; font-weight: 800; margin: 4px 6px 18px; }
.side-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.side-link {
    display: block; padding: 10px 12px; border-radius: 10px;
    color: var(--text-main); font-size: 14px; font-weight: 600;
    text-decoration: none; transition: background .15s;
}
.side-link:hover { background: var(--section); }
.side-link.active {
    background: var(--gold); color: #000;
    font-weight: 800;
}
.side-spacer { flex: 1; }
.side-logout { color: #b3453e; }

.admin-main { flex: 1; min-width: 0; padding: 8px 0 40px; }
.admin-main .admin-container { margin-top: 18px; }

/* موبایل: سایدبار می‌شود نوار افقی اسکرول‌شونده بالای صفحه */
@media (max-width: 900px) {
    .admin-shell { flex-direction: column; }
    .admin-side {
        width: 100%; height: auto; position: static;
        padding: 10px 12px; border-left: none; border-bottom: 1px solid var(--border-c);
    }
    .side-title { display: none; }
    .side-nav { flex-direction: row; overflow-x: auto; gap: 6px; }
    .side-link { white-space: nowrap; font-size: 13px; padding: 8px 12px; }
    .side-spacer { display: none; }
}

/* گرید ویرایش نوار مزایا در پنل */
.trust-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.trust-edit-grid label { margin-top: 8px; }
@media (max-width: 640px) { .trust-edit-grid { grid-template-columns: 1fr; } }

/* لوگوی الماس هدر — رنگ‌ها از تم (خط = رنگ متن، فیسِت = طلایی) */
.logo-gem { width: 30px; height: 30px; flex: none; }
.logo-gem .gem-line { stroke: var(--text-main); stroke-linejoin: round; fill: none; }
.logo-gem .gem-facet { fill: var(--gold); }
.logo { display: flex; align-items: center; gap: 9px; }

/* =========================================================
   ۲۲) ست آیکون خطی (جایگزین ایموجی‌ها) — رنگ از currentColor
   ========================================================= */
.ic {
    width: 20px; height: 20px; flex: none;
    fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.side-link { display: flex; align-items: center; gap: 10px; }
.side-link .ic { width: 19px; height: 19px; }
.icon-btn .ic { width: 21px; height: 21px; }
.login-link { display: inline-flex; align-items: center; gap: 6px; }
.bottom-nav .ic { width: 22px; height: 22px; margin-bottom: 2px; }
.bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; }

/* کارت «برای ثبت سفارش وارد شوید» در سبد */
.login-required { text-align: center; padding: 30px 24px; }
.login-required .lr-text { font-size: 13.5px; line-height: 2.2; margin: 8px 0 18px; }
.lr-btn { display: inline-block; text-align: center; padding: 12px 40px; border-radius: 12px; }

/* ورودی عددی پنل: چپ‌چین با فاصله‌گذاری خوانا برای رقم‌ها */
.num-input { direction: ltr; text-align: left; letter-spacing: .4px; font-variant-numeric: tabular-nums; }


/* =========================================================
   ۲۳) سلامت چیدمان موبایل
   ========================================================= */

/* هیچ سرریز افقی‌ای نباید گاتر بسازد (clip برخلاف hidden، sticky را نمی‌شکند) */
html, body { overflow-x: hidden; overflow-x: clip; }

/* اسلایدر «اندازه نمایش» فقط برای دسکتاپ —
   zoom روی موبایل واحد vw و عناصر fixed/sticky (منوی پایین، هدر) را به‌هم می‌ریزد */
@media (max-width: 900px) {
    body { zoom: 1 !important; }
}

/* هدر جمع‌وجورتر در موبایل: همه‌چیز داخل قرص جا شود */
@media (max-width: 768px) {
    .site-header { max-width: none; margin: 10px 10px 0; border-radius: 16px; }
    .header-inner { padding: 10px 12px; gap: 8px; }
    .logo-text { font-size: 16px; }
    .logo-gem { width: 24px; height: 24px; }
    .header-actions { gap: 4px; }
    .icon-btn { padding: 6px; }
    .login-link { font-size: 12px; }
    .hero h1, .hero-content h1 { font-size: clamp(24px, 7.5vw, 34px); }
}

/* لینک «مشاهده و ثبت سفارش» روی کارت محصول (به‌جای دکمه سبد) */
.card-view-link {
    display: inline-block; margin-top: 8px;
    font-size: 12.5px; font-weight: 700; color: var(--text-main);
    border-bottom: 1.5px dashed var(--gold);
    padding-bottom: 2px; transition: .15s;
}
.card-view-link:hover { border-bottom-style: solid; }


/* =========================================================
   ۲۴) اقلام سبد: لیست واکنش‌گرا — بدون جدول، بدون بریدگی
   ========================================================= */
.citem {
    display: grid;
    grid-template-columns: 64px 1fr 110px 120px 120px 36px;
    align-items: center; gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px dashed var(--border-c);
}
.citem-head {
    font-size: 12px; font-weight: 800;
    border-bottom: 1.5px solid var(--border-c);
    padding: 6px 4px 10px;
}
.ci-thumb { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; }
.ci-name { font-size: 13.5px; font-weight: 700; color: var(--text-main); }
.ci-name:hover { color: var(--gold-dark); }
.ci-unit small, .ci-total small { display: none; }   /* برچسب‌ها فقط در موبایل */
.ci-unit, .ci-total { font-size: 13px; }
.ci-total b { font-weight: 800; }
.ci-remove {
    width: 30px; height: 30px; border-radius: 50%;
    font-size: 14px; line-height: 1; padding: 0;
    display: grid; place-items: center;
}

/* ---------- موبایل: هر قلم یک کارت مرتب ---------- */
@media (max-width: 640px) {
    .citem-head { display: none; }
    .citem {
        grid-template-columns: 56px 1fr auto;
        grid-template-areas:
            "thumb name   remove"
            "thumb unit   unit"
            "qty   qty    total";
        row-gap: 8px; padding: 14px 2px;
    }
    .ci-thumb  { grid-area: thumb; width: 52px; height: 52px; }
    .ci-name   { grid-area: name; }
    .ci-remove { grid-area: remove; justify-self: end; }
    .ci-unit   { grid-area: unit; }
    .ci-qty    { grid-area: qty; justify-self: start; }
    .ci-total  { grid-area: total; justify-self: end; text-align: left; }
    .ci-unit small, .ci-total small {
        display: inline; font-size: 11px; margin-left: 6px;
    }
}

/* صفحه تغییر رمز مدیر */
.pw-field input { width: 100%; }

/* =========================================================
   ۲۵) بسته فروش‌ساز: خلاصه سبد، کوپن، ارسال رایگان
   ========================================================= */
.cart-summary { margin-top: 14px; padding-top: 4px; }
.sum-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13.5px; padding: 7px 2px;
}
.sum-row.payable {
    border-top: 1.6px solid var(--gold);
    margin-top: 6px; padding-top: 12px; font-size: 15px;
}
.sum-row.payable b { font-size: 17px; font-weight: 800; }

.free-ship-note {
    background: var(--section, #eef2f7);
    border: 1px dashed var(--gold);
    border-radius: 10px; padding: 9px 14px;
    font-size: 12.5px; font-weight: 700; text-align: center;
    margin-bottom: 10px;
}

.coupon-msg { font-size: 12px; margin-top: 7px; }
.coupon-msg.ok { color: var(--text-main); font-weight: 700; }
.coupon-msg.err { color: #b3261e; }
html[data-theme="dark"] .coupon-msg.err { color: #ff8f88; }
.coupon-x {
    width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid var(--border-c); background: var(--card-bg);
    color: var(--text-main); font-size: 11px; line-height: 1;
    cursor: pointer; margin-right: 5px; vertical-align: middle;
}
.ltr-inline { direction: ltr; unicode-bidi: embed; }

/* فرم و لیست کدهای تخفیف در پنل */
.coupon-form-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px;
}
@media (max-width: 900px) { .coupon-form-grid { grid-template-columns: 1fr; } }
.row-off td { opacity: .45; }
.ltr-cell { direction: ltr; text-align: left; }

/* ---------- بلیت کد تخفیف (سبد) ---------- */
.coupon-trigger {
    display: flex; align-items: center; gap: 8px;
    margin-top: 12px; padding: 4px 2px;
    background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: 700;
    color: var(--text-main);
}
.coupon-trigger .ic { width: 17px; height: 17px; }
.coupon-trigger .ct-text {
    border-bottom: 1.5px dashed var(--gold); padding-bottom: 2px;
    transition: .15s;
}
.coupon-trigger:hover .ct-text { border-bottom-style: solid; }

.coupon-box {
    position: relative; margin-top: 12px;
    display: flex; align-items: stretch;
    border: 1.6px dashed var(--gold); border-radius: 14px;
    background: var(--card-bg);
    transition: .15s;
}
/* بریدگی‌های دو طرف — حس بلیت واقعی */
.coupon-box::before, .coupon-box::after {
    content: ""; position: absolute; top: 50%;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--cream); border: 1.6px dashed var(--gold);
    transform: translateY(-50%);
}
.coupon-box::before { right: -8px; }
.coupon-box::after  { left: -8px; }
.coupon-box:focus-within {
    border-style: solid;
    box-shadow: 0 6px 18px rgba(198, 167, 125, .28);
}
.coupon-box:focus-within::before,
.coupon-box:focus-within::after { border-style: solid; }

.coupon-tag { width: 18px; height: 18px; align-self: center; margin: 0 14px 0 4px; flex-shrink: 0; }
.coupon-input {
    flex: 1; min-width: 0;
    border: none; outline: none; background: transparent;
    padding: 13px 2px; font-family: inherit; font-size: 13.5px;
    direction: ltr; text-align: left;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--text-main);
}
.coupon-input::placeholder { letter-spacing: 1px; opacity: .45; }
.coupon-apply {
    border: none; cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: 800;
    background: var(--gold); color: #000;
    padding: 0 24px; margin: 7px; border-radius: 9px;
    transition: .15s; white-space: nowrap;
}
.coupon-apply:hover:not(:disabled) { background: var(--gold-dark); box-shadow: 0 4px 12px rgba(176,143,95,.35); }
.coupon-apply:disabled { opacity: .55; cursor: default; }

/* چیپ کدِ اعمال‌شده */
.coupon-chip {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1.4px dashed var(--gold); border-radius: 999px;
    background: var(--section, #eef2f7);
    padding: 4px 12px 4px 6px; font-size: 12px;
}
.coupon-chip .ic { width: 14px; height: 14px; }
.coupon-chip .ltr-inline { letter-spacing: 1px; font-weight: 800; }
.coupon-chip .coupon-x { margin-right: 2px; border-color: var(--gold); }
.disc-amount { font-weight: 800; }

/* =========================================================
   ۲۶) بسته حرفه‌ای: فاکتور، قوانین، ای‌نماد
   ========================================================= */

/* ---------- فاکتور چاپی (همیشه روشن، مستقل از تم) ---------- */
.inv-toolbar { max-width: 800px; margin: 18px auto 0; padding: 0 16px; display: flex; gap: 10px; }
.inv-back { border: 1.5px solid var(--border-c); border-radius: 10px; padding: 10px 18px; color: var(--text-main); }
.inv-loading { text-align: center; padding: 60px 0; }

.invoice {
    max-width: 800px; margin: 14px auto 40px;
    background: #fff; color: #000;
    border: 1px solid #e3ddd2; border-radius: 14px;
    padding: 28px 30px; box-shadow: 0 8px 26px rgba(0,0,0,.07);
}
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
            border-bottom: 2px solid #C6A77D; padding-bottom: 16px; margin-bottom: 16px; }
.inv-brand { display: flex; align-items: center; gap: 12px; }
.inv-gem { width: 44px; height: 44px; }
.inv-site { font-size: 20px; font-weight: 800; }
.inv-sub { font-size: 12px; opacity: .75; }
.inv-meta { font-size: 13px; line-height: 2.1; text-align: left; }
.inv-buyer { background: #F8F5F2; border-radius: 10px; padding: 12px 16px;
             font-size: 13px; line-height: 2.1; margin-bottom: 16px; }
.inv-buyer span { opacity: .7; }
.inv-addr { grid-column: 1 / -1; }

.inv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.inv-table th { background: #000; color: #fff; padding: 8px 10px; font-weight: 700; text-align: right; }
.inv-table td { border-bottom: 1px solid #eee6da; padding: 8px 10px; }
.inv-table .inv-name { font-weight: 700; }

.inv-sums { max-width: 320px; margin: 14px 0 0 auto; font-size: 13.5px; }
.inv-sum-row { display: flex; justify-content: space-between; padding: 6px 2px; }
.inv-final { border-top: 2px solid #C6A77D; margin-top: 6px; padding-top: 10px; font-size: 15px; }
.inv-foot { text-align: center; margin-top: 26px; font-size: 12.5px; opacity: .8; }

@media print {
    .no-print { display: none !important; }
    body { background: #fff !important; }
    .invoice { box-shadow: none; border: none; margin: 0; max-width: none; border-radius: 0; }
}

/* ---------- صفحه قوانین ---------- */
.policy-page { max-width: 820px; margin: 46px auto 70px; padding: 0 18px; }
.policy-page h1 {
    font-size: 26px; font-weight: 800; margin-bottom: 20px;
    border-right: 4px solid var(--gold); padding-right: 14px;
}
.policy-body p {
    background: var(--card-bg); border: 1px solid var(--border-c);
    border-radius: 12px; padding: 14px 18px; margin-bottom: 12px;
    font-size: 14px; line-height: 2.3;
}

/* ---------- نشان ای‌نماد در فوتر ---------- */
.footer-enamad {
    display: flex; justify-content: center; padding: 14px 0 4px;
}
.footer-enamad img { max-height: 110px; background: #fff; border-radius: 10px; padding: 6px; }

/* ---------- ردیف‌های ریز مبلغ (پنل و حساب مشتری) ---------- */
.sum-line .total-label, .sum-line .total-value { font-weight: 500; font-size: 12.5px; opacity: .85; }

/* ---------- textarea های پنل ---------- */
.admin-card textarea {
    width: 100%; padding: 10px 12px;
    border: 1.5px solid var(--border-c); border-radius: 8px;
    font-family: inherit; font-size: 13.5px; line-height: 2;
    background: var(--card-bg); color: var(--text-main);
    resize: vertical; outline: none;
}
.admin-card textarea:focus { border-color: var(--gold-dark); }

/* =========================================================
   ۲۷) زره ضدسرریز هدر — هیچ‌چیز از قرص بیرون نمی‌پرد
   ========================================================= */
.header-inner { flex-wrap: nowrap; min-width: 0; }
.header-inner .logo { min-width: 0; }
.header-actions { min-width: 0; flex-shrink: 0; }

@media (max-width: 768px) {
    /* لینک ورود/حساب در موبایل: فقط آیکون آدمک — متن مخفی */
    .login-link .ll-text { display: none; }
    .login-link {
        border-right: none;
        padding: 6px;
    }
    .login-link .ic { width: 21px; height: 21px; }

    /* نام فروشگاه اگر بلند بود، با ... کوتاه شود — هرگز هدر را نمی‌شکند */
    .logo-text {
        max-width: 34vw;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .header-inner { gap: 6px; }
}

@media (max-width: 400px) {
    /* گوشی‌های خیلی باریک: باز هم فشرده‌تر */
    .header-inner { padding: 10px 8px; gap: 3px; }
    .icon-btn { padding: 4px; }
    .logo-text { max-width: 30vw; font-size: 15px; }
}

/* ---------- «موجود شد خبرم کن» در صفحه محصول ---------- */
.notify-box { margin-top: 16px; }
.notify-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 26px; border-radius: 12px;
    border: 1.7px dashed var(--gold); background: var(--card-bg);
    color: var(--text-main); font-family: inherit; font-size: 14px; font-weight: 700;
    cursor: pointer; transition: .15s;
}
.notify-btn:hover:not(:disabled) { border-style: solid; background: var(--section, #eef2f7); }
.notify-btn:disabled { opacity: .55; }
.notify-btn .ic { width: 19px; height: 19px; }
.notify-done {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 20px; border-radius: 12px;
    background: var(--section, #eef2f7); border: 1.5px solid var(--gold);
    font-size: 13.5px; font-weight: 700;
}
.notify-done .ic { width: 18px; height: 18px; }
.notify-msg { margin-top: 10px; font-size: 12.5px; line-height: 2.1; }
.notify-msg.warn { color: var(--text-main); }
.notify-msg.err { color: #b3261e; }
html[data-theme="dark"] .notify-msg.err { color: #ff8f88; }
.notify-login {
    display: inline-block; margin-right: 8px;
    background: var(--gold); color: #000;
    padding: 5px 16px; border-radius: 999px;
    font-size: 12px; font-weight: 800;
}
.notify-login:hover { background: var(--gold-dark); }

/* =========================================================
   ۲۸) تم «رنگی مدرن»: پالت نمودار + لمس‌های رنگی + سایه نرم
   ========================================================= */
:root {
    --chart1: #ec4899;  /* صورتی */
    --chart2: #f59e0b;  /* کهربایی */
    --chart3: #14b8a6;  /* فیروزه‌ای */
    --chart4: #3b82f6;  /* آبی */
    --chart5: #8b5cf6;  /* بنفش */
}

/* نمودار فروش داشبورد: میله‌ها چرخه ۵رنگ — در هر تمی رنگی می‌ماند */
.chart-wrap .chart-col:nth-child(5n+1) .bar { background: var(--chart1); }
.chart-wrap .chart-col:nth-child(5n+2) .bar { background: var(--chart2); }
.chart-wrap .chart-col:nth-child(5n+3) .bar { background: var(--chart3); }
.chart-wrap .chart-col:nth-child(5n+4) .bar { background: var(--chart4); }
.chart-wrap .chart-col:nth-child(5n)   .bar { background: var(--chart5); }

/* کارت‌های آمار: نوار رنگی بالا — مثل مرجع، متن‌ها مشکی می‌مانند */
.stats-grid .stat-card:nth-child(4n+1) { border-top: 3px solid var(--chart1); }
.stats-grid .stat-card:nth-child(4n+2) { border-top: 3px solid var(--chart3); }
.stats-grid .stat-card:nth-child(4n+3) { border-top: 3px solid var(--chart2); }
.stats-grid .stat-card:nth-child(4n)   { border-top: 3px solid var(--chart5); }

/* نوار مزایای صفحه اصلی: آیکون‌های رنگی */
.trust-item:nth-child(1) .ic { color: var(--chart4); }
.trust-item:nth-child(2) .ic { color: var(--chart1); }
.trust-item:nth-child(3) .ic { color: var(--chart3); }
.trust-item:nth-child(4) .ic { color: var(--chart2); }

/* شمارنده سبد/علاقه‌مندی: صورتی پرانرژی */
.cart-count { background: var(--chart1); color: #fff; }

/* سایه نئومورفیک نرم — حس کارت‌های شناور مرجع */
.product-card, .cart-card, .admin-card, .stat-card {
    box-shadow: 0 10px 28px rgba(30, 41, 59, .07);
}
.product-card:hover { box-shadow: 0 16px 36px rgba(30, 41, 59, .13); }

/* =========================================================
   ۲۹) گرید فشرده صفحه اصلی — کارت‌های کوچک‌تر و خوش‌فرم
   ========================================================= */
.products-grid.compact {
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 16px;
}
.products-grid.compact .product-card { border-radius: 16px; }

/* عکس: مربع کامل — هر کارت هم‌قد بقیه */
.products-grid.compact .product-img {
    height: auto;
    aspect-ratio: 1 / 1;
}

/* زوم لطیف عکس هنگام هاور */
.img-layer { transition: transform .4s ease, opacity .3s ease; }
.products-grid.compact .product-card:hover .img-layer { transform: scale(1.05); }

.products-grid.compact .product-info {
    padding: 10px 12px 14px;
    text-align: center;
}
.products-grid.compact .product-name {
    font-size: 13px;
    display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* توضیح با طول متفاوت = کارت‌های ناهم‌قد؛ در صفحه اصلی فقط عکس، نام و قیمت */
.products-grid.compact .product-desc { display: none; }

.products-grid.compact .product-price { font-size: 13.5px; margin-top: 5px; }
.products-grid.compact .card-view-link { font-size: 11.5px; margin-top: 7px; }

/* موبایل: دوتایی جمع‌وجور */
@media (max-width: 640px) {
    .products-grid.compact {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .products-grid.compact .product-name { font-size: 12px; }
    .products-grid.compact .product-info { padding: 8px 8px 12px; }
}

/* ---------- ابزارهای حرفه‌ای پنل: کدها، منتظرها، خروجی‌ها ---------- */
.sku-line { font-size: 12px; opacity: .75; margin: 4px 0 10px; }

.wait-badge {
    display: inline-block; margin-right: 6px;
    background: var(--chart2); color: #000;
    font-size: 10.5px; font-weight: 800;
    padding: 2px 9px; border-radius: 999px;
}

.pending-list { list-style: none; padding: 0; margin: 0; }
.pending-list li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 4px; border-bottom: 1px dashed var(--border-c);
    font-size: 13px;
}

.export-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px; margin-top: 8px;
}
.export-card {
    display: flex; flex-direction: column; gap: 6px; text-align: right;
    padding: 16px; border-radius: 14px; cursor: pointer;
    border: 1.5px solid var(--border-c); background: var(--card-bg);
    font-family: inherit; color: var(--text-main);
    transition: .15s;
}
.export-card:hover:not(:disabled) {
    border-color: var(--gold);
    box-shadow: 0 8px 22px rgba(30, 41, 59, .10);
    transform: translateY(-2px);
}
.export-card:disabled { opacity: .55; }
.export-card b { font-size: 14px; }
.export-card span { font-size: 11.5px; opacity: .75; line-height: 1.9; }

/* =========================================================
   ۳۰) بسته جذابیت: جشنواره + گالری اینستا + اشتراک‌گذاری
   ========================================================= */

/* ---------- نوار جشنواره با شمارش معکوس ---------- */
.campaign-bar {
    background: var(--section, #eef2f7);
    border-block: 1px solid var(--border-c);
    padding: 14px 16px;
}
.campaign-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    gap: 22px; flex-wrap: wrap;
}
.campaign-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 800;
}
.campaign-title .ic { width: 20px; height: 20px; color: var(--chart2); }

.countdown { display: flex; align-items: center; gap: 6px; direction: ltr; }
.cd-cell {
    background: var(--card-bg); border: 1.5px solid var(--gold);
    border-radius: 12px; min-width: 52px; padding: 6px 8px;
    display: flex; flex-direction: column; align-items: center;
    box-shadow: 0 6px 16px rgba(30, 41, 59, .08);
}
.cd-cell b { font-size: 17px; line-height: 1.1; }
.cd-cell small { font-size: 9.5px; opacity: .7; }
.cd-sep { font-weight: 800; color: var(--gold); }

.campaign-code {
    border: 1.6px dashed var(--gold); border-radius: 999px;
    padding: 7px 16px; font-size: 13px; background: var(--card-bg);
}
.campaign-code b { letter-spacing: 2px; }

/* ---------- گالری اینستاگرام صفحه اصلی ---------- */
.insta-section { padding: 44px 16px 52px; text-align: center; }
.insta-title { font-size: 21px; font-weight: 800; }
.insta-handle { font-size: 13px; color: var(--gold); direction: ltr; margin-top: 4px; }
.insta-grid {
    max-width: 1000px; margin: 22px auto 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.insta-item {
    aspect-ratio: 1 / 1; border-radius: 16px;
    background-size: cover; background-position: center;
    display: block; transition: .3s;
    box-shadow: 0 8px 22px rgba(30, 41, 59, .08);
}
.insta-item:hover { transform: translateY(-4px) scale(1.02); }
@media (max-width: 640px) { .insta-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- اشتراک‌گذاری محصول ---------- */
.share-row { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; }
.share-lbl { font-size: 12px; opacity: .7; }
.share-btn {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1.5px solid var(--border-c); background: var(--card-bg);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-main); transition: .15s;
}
.share-btn .ic { width: 17px; height: 17px; }
.share-btn.wa:hover { border-color: #22c55e; color: #16a34a; }
.share-btn.tg:hover { border-color: var(--chart4); color: var(--chart4); }
.share-btn.cp:hover { border-color: var(--gold); color: var(--gold); }
.copied-chip {
    font-size: 11px; font-weight: 700; color: #16a34a;
    border: 1.4px dashed #22c55e; border-radius: 999px; padding: 3px 10px;
}

/* ---------- مدیریت گالری اینستا در پنل ---------- */
.insta-add-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.insta-add-row input[type="text"] { flex: 1; min-width: 200px; }
.insta-admin-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px; margin-top: 12px;
}
.insta-admin-item {
    aspect-ratio: 1 / 1; border-radius: 12px; position: relative;
    background-size: cover; background-position: center;
    border: 1.5px solid var(--border-c);
}
.insta-del {
    position: absolute; top: 4px; left: 4px;
    width: 22px; height: 22px; border-radius: 50%;
    border: none; background: rgba(0, 0, 0, .65); color: #fff;
    font-size: 11px; cursor: pointer;
}
.insta-del:hover { background: #dc2626; }

/* =========================================================
   ۳۱) مرکز چاپ برچسب ارسال
   ========================================================= */
.labels-toolbar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin: 6px 0 14px;
}
.labels-toolbar .select-all {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; cursor: pointer;
}
.labels-toolbar select { max-width: 260px; }
.labels-toolbar .btn { margin-right: auto; }

.addr-cell { font-size: 11.5px; max-width: 320px; }
.row-selected td { background: var(--section, #eef2f7); }

/* ---------- نمای چاپ ---------- */
.labels-print-bar {
    display: flex; align-items: center; gap: 16px; justify-content: center;
    padding: 14px; font-size: 14px;
}

.labels-sheet {
    width: 192mm;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4mm;
}

.shiplabel-mini {
    border: 1.6px solid #000;
    border-radius: 3mm;
    background: #fff;
    color: #000;
    padding: 4mm 4.5mm;
    height: 62mm;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    page-break-inside: avoid;
}

.slm-name  { font-size: 13pt; font-weight: 800; }
.slm-phone { font-size: 12pt; font-weight: 700; direction: ltr; text-align: right; margin-top: 0.5mm; }
.slm-addr  { font-size: 9.5pt; line-height: 1.75; margin-top: 1.5mm; flex: 1; }

.slm-cod {
    align-self: flex-start;
    background: #000; color: #fff;
    font-size: 8.5pt; font-weight: 800;
    border-radius: 999px;
    padding: 1mm 3.5mm;
    margin-bottom: 1.5mm;
}

.slm-from {
    border-top: 1px dashed #000;
    padding-top: 1.5mm;
    font-size: 7pt;
    display: flex; justify-content: space-between; gap: 3mm;
    white-space: nowrap; overflow: hidden;
}
.slm-order { opacity: .85; }

@media print {
    .labels-print-bar { display: none; }
    .labels-sheet { width: auto; }
}

/* =========================================================
   ۳۲) کاشی‌های دسته‌بندی — مربعی، کمی جمع‌وجورتر از قبل
   ========================================================= */
.categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 18px;
    max-width: 1160px;
    margin: 0 auto;
    padding: 30px 16px 8px;
}

.cat-tile {
    position: relative;
    display: block;
    height: 200px;               /* قبلاً ۲۸۰ — یک پله کوچک‌تر، نه بیشتر */
    border-radius: 18px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 26px rgba(30, 41, 59, .10);
    transition: transform .25s ease, box-shadow .25s ease;
}
.cat-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(30, 41, 59, .16);
}
.cat-tile::after { content: none; }

/* برچسب: همان کارت سفید گوشه کاشی */
.cat-tile .tile-label {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 1;
}

/* موبایل: دوتایی جمع‌وجور */
@media (max-width: 640px) {
    .categories {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 22px 14px 4px;
    }
    .cat-tile { height: 148px; border-radius: 14px; }
}