/* استایل پایهٔ فروشگاه. همهٔ رنگ‌ها، فاصله‌ها و گردی گوشه‌ها از متغیرهای CSS زیر می‌آیند؛ یک قالب می‌تواند فقط با بازنویسی همین متغیرها (یک فایل css در پوشهٔ قالب) ظاهر کل سایت را عوض کند، بدون هیچ ویوی Razor. فهرست کامل متغیرها در TEMPLATE-GUIDE.md آمده است. */ /* تم روشن/تیره سه‌حالته است: • انتخاب صریح کاربر → data-theme="light" یا "dark" روی • بدون انتخاب → تم سیستم‌عامل (prefers-color-scheme) به همین دلیل پالت روشن روی :root خالی تعریف می‌شود (نه داخل مدیا کوئری) و پالت تیره دو بار: یک‌بار برای حالت سیستمی و یک‌بار برای انتخاب صریح. هیچ رنگی نباید فقط داخل یک مدیا کوئری تعریف شود، وگرنه در حالت دیگر تعریف‌نشده می‌ماند. */ :root { /* رنگ پیش‌فرض مرورگر برای کنترل‌های فرم، اسکرول‌بار و تقویم هم باید با تم بخواند. */ color-scheme: light; --color-bg: #f5f6f8; --color-surface: #ffffff; --color-surface-alt: #eef1f5; --color-text: #1c1f24; --color-muted: #6b7280; --color-border: #e3e6ea; --color-primary: #e01a4f; --color-primary-text: #ffffff; --color-accent: #0b7285; --color-success: #0f9d58; --color-error: #d93025; --color-warn: #b45309; --alert-success-bg: #e6f4ea; --alert-success-text: #0b6b32; --alert-error-bg: #fce8e6; --alert-error-text: #a50e0e; --alert-warn-bg: #fef3c7; --alert-warn-text: #b45309; /* پوشش «ناموجود» روی تصویر و کنترل‌های روی تصویر اسلایدر */ --overlay-veil: rgba(255, 255, 255, .72); --overlay-control: rgba(0, 0, 0, .4); --radius: 12px; --radius-sm: 8px; --gap: 16px; --container: 1200px; --font: Vazirmatn, "Segoe UI", Tahoma, sans-serif; /* فونت تیترها؛ پیش‌فرض همان فونت بدنه است و قالب‌ها می‌توانند عوضش کنند. */ --font-display: var(--font); --shadow: 0 1px 3px rgba(0, 0, 0, .08); /* ارتفاع نوار پایین موبایل و فاصله‌ای که هر عنصر position:fixed دیگر (مثل نوار خرید قالب کهکشان) باید از پایین بگیرد تا رویش نیفتد. وقتی قالب نوار پایین ندارد این فاصله صفر است، پس قالب‌ها می‌توانند بدون شرط از --fixed-bottom-offset استفاده کنند. */ --bottom-nav-height: 58px; --fixed-bottom-offset: 0px; } /* پالت تیره — حالت سیستمی (وقتی کاربر صراحتاً روشن را انتخاب نکرده) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-bg: #0f1115; --color-surface: #181b22; --color-surface-alt: #11141a; --color-text: #e8eaee; --color-muted: #9aa3b2; --color-border: #262b35; --color-accent: #4dd4ac; --alert-success-bg: #10281a; --alert-success-text: #7ee2a8; --alert-error-bg: #2b1414; --alert-error-text: #ff9d95; --alert-warn-bg: #2b220f; --alert-warn-text: #f2c14e; --overlay-veil: rgba(15, 17, 21, .78); --overlay-control: rgba(255, 255, 255, .18); --shadow: 0 2px 10px rgba(0, 0, 0, .5); } } /* پالت تیره — انتخاب صریح کاربر (باید بر مدیا کوئری غلبه کند) */ :root[data-theme="dark"] { color-scheme: dark; --color-bg: #0f1115; --color-surface: #181b22; --color-surface-alt: #11141a; --color-text: #e8eaee; --color-muted: #9aa3b2; --color-border: #262b35; --color-accent: #4dd4ac; --alert-success-bg: #10281a; --alert-success-text: #7ee2a8; --alert-error-bg: #2b1414; --alert-error-text: #ff9d95; --alert-warn-bg: #2b220f; --alert-warn-text: #f2c14e; --overlay-veil: rgba(15, 17, 21, .78); --overlay-control: rgba(255, 255, 255, .18); --shadow: 0 2px 10px rgba(0, 0, 0, .5); } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font); background: var(--color-bg); color: var(--color-text); font-size: 14px; line-height: 1.8; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } h1 { font-size: 22px; margin: 16px 0; font-family: var(--font-display); } h2 { font-size: 17px; margin: 0 0 12px; font-family: var(--font-display); } hr { border: none; border-top: 1px solid var(--color-border); margin: 12px 0; } code, .mono { font-family: ui-monospace, Consolas, monospace; direction: ltr; } .container { max-width: var(--container); margin: 0 auto; padding: 0 16px; } .page { min-height: 60vh; padding-bottom: 40px; } .muted { color: var(--color-muted); font-size: 13px; } .inline { display: inline; } /* ---------- دکمه‌ها ---------- */ .btn-primary, .btn-ghost, .btn-link { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 8px 16px; font: inherit; cursor: pointer; } .btn-primary { background: var(--color-primary); color: var(--color-primary-text); } .btn-ghost { background: var(--color-surface); border-color: var(--color-border); } .btn-link { background: none; padding: 4px; color: var(--color-accent); } .btn-link.danger { color: var(--color-error); } .block { display: flex; width: 100%; justify-content: center; margin-top: 12px; } /* ---------- هدر ---------- */ .site-header { background: var(--color-surface); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 20; } .header-row { display: flex; align-items: center; gap: var(--gap); padding: 12px 16px; } /* min-width:0 لازم است وگرنه نام بلند فروشگاه کوتاه نمی‌شود و بقیهٔ هدر را به سطر بعد می‌راند. */ .brand { display: flex; align-items: center; gap: 8px; min-width: 0; } .brand img { height: 40px; } .brand-mark { width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary); color: var(--color-primary-text); display: grid; place-items: center; font-weight: 700; } .brand-text { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; } .brand-text b, .brand-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand-text small { color: var(--color-muted); font-size: 11px; } .search { flex: 1; display: flex; } .search input { flex: 1; padding: 9px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm) 0 0 var(--radius-sm); font: inherit; background: var(--color-surface-alt); color: var(--color-text); } .search button { border: 1px solid var(--color-border); border-right: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--color-surface-alt); color: var(--color-text); cursor: pointer; padding: 0 14px; } .header-actions { display: flex; align-items: center; gap: 8px; flex: none; } /* دکمه‌های هدر همیشه آیکون + متن‌اند؛ در موبایل فقط متنشان مخفی می‌شود (پایین همین فایل). */ .header-actions .btn-ghost, .header-actions .btn-primary { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .theme-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: inherit; cursor: pointer; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; flex: none; } /* آیکون بر اساس تم فعال عوض می‌شود؛ در تم روشن «ماه» و در تم تیره «خورشید». */ .theme-toggle .icon-dark { display: none; } :root[data-theme="dark"] .theme-toggle .icon-dark { display: inline; } :root[data-theme="dark"] .theme-toggle .icon-light { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-dark { display: inline; } :root:not([data-theme="light"]) .theme-toggle .icon-light { display: none; } } .cart-badge { background: var(--color-primary); color: #fff; border-radius: 10px; padding: 0 6px; font-size: 11px; min-width: 18px; display: inline-block; text-align: center; } .cart-badge:empty { display: none; } .menu { position: relative; } .menu-list { display: none; position: absolute; inset-inline-end: 0; top: 110%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 180px; padding: 6px; z-index: 30; } .menu.open .menu-list { display: block; } .menu-list a, .menu-list button { display: block; width: 100%; text-align: start; padding: 8px 10px; background: none; border: none; font: inherit; cursor: pointer; border-radius: var(--radius-sm); } .menu-list a:hover, .menu-list button:hover { background: var(--color-bg); } .category-bar { border-top: 1px solid var(--color-border); } /* عمداً overflow روی این نوار گذاشته نمی‌شود: هر مقدارِ overflow (حتی overflow-x) یک بلوکِ برش می‌سازد و زیرمنوی absolute داخل همان نوار حبس می‌شد. به‌جای اسکرول افقی، آیتم‌ها در چند خط می‌شکنند تا زیرمنو بتواند بیرون کادر باز شود. */ .category-bar ul { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; margin: 0; padding: 8px 0; } .category-bar li { position: relative; white-space: nowrap; } /* دکمهٔ «دسته‌بندی‌ها» و کلیدهای زیردسته فقط در حالت موبایل دیده می‌شوند. */ .category-toggle, .category-bar .sub-toggle { display: none; } .category-bar .sub { display: none; position: absolute; top: 100%; inset-inline-start: 0; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; min-width: 160px; z-index: 40; } .category-bar .sub a { display: block; padding: 6px 10px; border-radius: var(--radius-sm); } .category-bar .sub a:hover { background: var(--color-bg); } /* باز شدن با کیبورد هم کار کند، نه فقط با ماوس. */ .category-bar li:hover > .sub, .category-bar li:focus-within > .sub { display: flex; } /* ---------- پیام‌ها ---------- */ .alert { padding: 10px 14px; border-radius: var(--radius-sm); margin: 12px 0; } .alert-success { background: var(--alert-success-bg); color: var(--alert-success-text); } .alert-error { background: var(--alert-error-bg); color: var(--alert-error-text); } .alert-warn { background: var(--alert-warn-bg); color: var(--alert-warn-text); } /* ---------- اسلایدر ---------- */ .slider { position: relative; margin: 16px 0; border-radius: var(--radius); overflow: hidden; } .slider-track { display: flex; transition: transform .4s ease; } .slide { position: relative; min-width: 100%; } .slide img { width: 100%; height: 320px; object-fit: cover; display: block; } .slide-caption { position: absolute; inset-inline-start: 32px; bottom: 32px; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); display: flex; flex-direction: column; } .slide-caption b { font-size: 26px; } .slider-nav { position: absolute; top: 50%; transform: translateY(-50%); border: none; background: var(--overlay-control); color: #fff; font-size: 26px; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; } .slider-nav.prev { inset-inline-start: 12px; } .slider-nav.next { inset-inline-end: 12px; } /* ---------- دسته‌ها ---------- */ .category-strip { margin: 24px 0; } .category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--gap); } .category-card { background: var(--color-surface); border-radius: var(--radius); padding: 14px; text-align: center; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; } .category-emoji { font-size: 30px; } .category-card small { color: var(--color-muted); font-size: 11px; } /* ---------- محصول ---------- */ .product-row { margin: 28px 0; } .product-row header { display: flex; justify-content: space-between; align-items: center; } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--gap); } .product-card { background: var(--color-surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; } .product-thumb { position: relative; display: block; } .product-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; } .badge-discount { position: absolute; top: 8px; inset-inline-start: 8px; background: var(--color-primary); color: #fff; border-radius: 20px; padding: 2px 8px; font-size: 12px; } .badge-out { position: absolute; inset: 0; background: var(--overlay-veil); display: grid; place-items: center; font-weight: 700; color: var(--color-muted); } .product-body { padding: 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .product-title { font-weight: 600; line-height: 1.6; min-height: 3.2em; overflow: hidden; } .product-meta { color: var(--color-muted); font-size: 12px; } .product-price { margin-top: auto; display: flex; align-items: baseline; gap: 6px; } .product-price del { color: var(--color-muted); font-size: 12px; } .product-price b { font-size: 16px; } .product-price span { font-size: 11px; color: var(--color-muted); } /* ---------- فهرست/فیلتر ---------- */ .list-layout { display: grid; grid-template-columns: 250px 1fr; gap: var(--gap); margin-top: 16px; } .filters, .panel { background: var(--color-surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: var(--gap); } .filters h3 { font-size: 14px; margin: 14px 0 6px; } .filters select, .filters input { width: 100%; padding: 7px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; } .price-range { display: flex; gap: 6px; } .check { display: flex; align-items: center; gap: 6px; margin: 8px 0; } .check input { width: auto; } .filter-categories { list-style: none; margin: 0; padding: 0; } .filter-categories li a { display: flex; justify-content: space-between; padding: 5px 0; } .filter-categories li.active { font-weight: 700; color: var(--color-primary); } .results-head { display: flex; justify-content: space-between; align-items: center; } .pagination { display: flex; gap: 6px; flex-wrap: wrap; margin: 20px 0; } .pagination a { padding: 6px 12px; background: var(--color-surface); border-radius: var(--radius-sm); } .pagination a.active { background: var(--color-primary); color: #fff; } .empty { text-align: center; padding: 60px 20px; color: var(--color-muted); } /* ---------- صفحهٔ محصول ---------- */ .breadcrumb { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 0; color: var(--color-muted); font-size: 12px; } .product-page { display: grid; grid-template-columns: 420px 1fr; gap: 24px; background: var(--color-surface); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .gallery img#mainImage { width: 100%; aspect-ratio: 1; object-fit: contain; } .thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .thumbs button { width: 64px; height: 64px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: none; cursor: pointer; padding: 2px; } .thumbs img { width: 100%; height: 100%; object-fit: cover; } .short-desc { color: var(--color-muted); } .variant-group { margin: 12px 0; } .variant-label { font-weight: 600; } .variant-values { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .variant-chip { border: 1px solid var(--color-border); border-radius: 20px; padding: 6px 14px; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; } .variant-chip input { display: none; } .variant-chip:has(input:checked) { border-color: var(--color-primary); color: var(--color-primary); } .variant-chip.disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; } .price-box { border-top: 1px solid var(--color-border); margin-top: 16px; padding-top: 12px; } .final-price b { font-size: 26px; } .countdown { color: var(--color-primary); font-size: 13px; } .stock-line { display: flex; gap: 12px; margin: 10px 0; } .in-stock { color: var(--color-success); } .out-stock { color: var(--color-error); } .buy-actions { display: flex; gap: 10px; } .buy-actions input { width: 80px; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; } /* ---------- باکس خرید چندفروشنده ---------- */ .seller-box { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--color-bg); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 10px; font-size: 13px; } .seller-box b { font-size: 14px; } .cheaper-hint { background: var(--alert-warn-bg); color: var(--alert-warn-text); border-radius: var(--radius-sm); padding: 8px 12px; margin: 0 0 10px; font-size: 13px; } .cheaper-hint a { text-decoration: underline; } .product-card .seller-count { color: var(--color-muted); } .offers { background: var(--color-surface); border-radius: var(--radius); padding: 16px; margin-top: 16px; box-shadow: var(--shadow); } /* جدول پنج‌ستونه روی موبایل جا نمی‌شود؛ به‌جای کشیدنِ کل صفحه، خودش افقی اسکرول می‌شود. */ .offers-scroll { overflow-x: auto; } .offers-table { width: 100%; border-collapse: collapse; min-width: 520px; } .offers-table th, .offers-table td { padding: 10px; border-bottom: 1px solid var(--color-border); text-align: start; font-size: 13px; vertical-align: middle; } .offers-table thead { background: var(--color-surface-alt); } .offers-table tr.is-selected { background: var(--color-bg); } .offers-table tr.is-out { opacity: .6; } .offers-table .offer-price b { font-size: 15px; } .offers-table del { color: var(--color-muted); font-size: 12px; } .specs table { width: 100%; border-collapse: collapse; } .specs th, .specs td { border-bottom: 1px solid var(--color-border); padding: 8px; text-align: start; } .specs, .description { background: var(--color-surface); border-radius: var(--radius); padding: 16px; margin-top: 16px; box-shadow: var(--shadow); } /* ---------- سبد و تسویه ---------- */ .cart-layout, .checkout-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--gap); align-items: start; } .cart-line { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 12px; background: var(--color-surface); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; box-shadow: var(--shadow); } .cart-line img { width: 90px; height: 90px; object-fit: cover; border-radius: var(--radius-sm); } .cart-line.unavailable { outline: 1px solid var(--color-error); } .cart-line-actions input { width: 64px; padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .cart-summary { background: var(--color-surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); position: sticky; top: 90px; } .row { display: flex; justify-content: space-between; padding: 5px 0; } .row.small { font-size: 12px; color: var(--color-muted); } .row.total { border-top: 1px solid var(--color-border); margin-top: 8px; padding-top: 10px; font-size: 16px; } .row.discount b { color: var(--color-success); } .coupon-form { display: flex; gap: 6px; margin: 12px 0; } .coupon-form input { flex: 1; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; } .address-row, .gateway-row { display: flex; gap: 10px; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 8px; cursor: pointer; } .address-row:has(input:checked), .gateway-row:has(input:checked) { border-color: var(--color-primary); } .gateway-row img { width: 44px; } .gateway-row.link { text-decoration: none; } .delivery-dates, .delivery-windows { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .chip { border: 1px solid var(--color-border); border-radius: 20px; padding: 6px 14px; cursor: pointer; } .chip input { display: none; } .chip:has(input:checked) { border-color: var(--color-primary); color: var(--color-primary); } .map-box { height: 280px; border-radius: var(--radius-sm); overflow: hidden; margin: 10px 0; } .map-error { display: grid; place-items: center; height: 100%; padding: 12px; text-align: center; font-size: 13px; background: #f3f4f6; color: #b91c1c; } .modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); display: grid; place-items: center; z-index: 50; } /* بدون این، display:grid بالا بر [hidden] مرورگر غالب می‌شود و مودال همیشه باز می‌ماند. */ .modal[hidden] { display: none; } .modal-box { background: var(--color-surface); border-radius: var(--radius); padding: 20px; width: min(560px, 92vw); max-height: 90vh; overflow: auto; } .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; } /* ---------- پنل‌ها و جدول‌ها ---------- */ .panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } label { display: block; margin: 6px 0; font-size: 13px; } /* رنگ متنِ کنترل‌های فرم و دکمه‌ها از پدر به ارث نمی‌رسد؛ مرورگر رنگ سیستمی خودش (مشکی) را می‌گذارد و روی زمینهٔ تیرهٔ تم دارک اصلاً خوانده نمی‌شود. پس رنگ و زمینهٔ همهٔ کنترل‌ها اینجا صریح از متغیرهای تم گرفته می‌شود، نه از مرورگر. */ input, select, textarea, button { font: inherit; color: var(--color-text); } input:not([type="checkbox"]):not([type="radio"]), select, textarea { background-color: var(--color-surface); } input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); } option { background-color: var(--color-surface); color: var(--color-text); } ::placeholder { color: var(--color-muted); opacity: 1; } .form-grid input, .form-grid select, .panel > label input, .panel > label textarea, .panel > label select, .panel > .field input, .panel > .field textarea, .panel > .field select { width: 100%; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); } /* بلوکِ فیلدی که به‌جای label نوشته شده (مثل ادیتور متن که خودش iframe می‌سازد). */ .field { margin: 6px 0; } .field-label { display: block; font-size: 13px; margin-bottom: 4px; } .inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .inline-form input, .inline-form select { padding: 7px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .repeat-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; } .repeat-row input, .repeat-row select { padding: 7px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .gallery-existing { display: flex; gap: 10px; flex-wrap: wrap; } .gallery-item { width: 100px; text-align: center; } .gallery-item img { width: 100px; height: 100px; object-fit: cover; border-radius: var(--radius-sm); } /* ---------- کاتالوگ کالاهای مرجع ---------- */ .catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gap); } .catalog-card { background: var(--color-surface); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; } .catalog-card img { aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-bg); } .catalog-card-body { display: flex; flex-direction: column; gap: 3px; flex: 1; } .catalog-card-body small { line-height: 1.7; } .catalog-card .btn-primary, .catalog-card .btn-ghost { text-align: center; } .catalog-summary { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; } .catalog-summary img { width: 110px; height: 110px; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-bg); } .catalog-summary > div { flex: 1; min-width: 220px; } .catalog-summary p { margin: 4px 0; } .catalog-specs { margin-top: 12px; } .catalog-specs summary { cursor: pointer; color: var(--color-muted); font-size: 13px; } .catalog-specs table { margin-top: 8px; } /* موجودی و اختلاف قیمتِ هر تنوع باید در یک ستون باریک جا شوند، وگرنه جدول افقی می‌کشد. */ .variant-table input[type="number"] { width: 90px; } .variant-table input, .variant-table select { padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .data-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .data-table th, .data-table td { padding: 10px; border-bottom: 1px solid var(--color-border); text-align: start; font-size: 13px; } .data-table thead { background: var(--color-surface-alt); } /* بندانگشتی محصول در فهرست‌های پنل */ .row-thumb { width: 56px; height: 56px; object-fit: cover; display: block; border-radius: var(--radius-sm); background: var(--color-surface-alt); } /* ویرایش درجای ردیف (موجودی/وضعیت) */ .inline-edit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .inline-edit input[type="number"] { width: 80px; padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .inline-edit select { padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .inline-edit .btn-ghost { padding: 6px 12px; } .inline-edit-state { font-size: 12px; color: var(--color-muted); min-width: 62px; } .inline-edit-state.ok { color: var(--color-success); } .inline-edit-state.failed { color: var(--color-error); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--gap); margin-bottom: var(--gap); } .stat { background: var(--color-surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; } .stat b { font-size: 20px; } .stat span { color: var(--color-muted); font-size: 12px; } .admin-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0; } .admin-nav a { padding: 7px 14px; background: var(--color-surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); } .admin-nav a.active { background: var(--color-primary); color: #fff; } .filter-tabs { display: flex; gap: 8px; margin-bottom: 12px; } .filter-tabs a { padding: 6px 12px; background: var(--color-surface); border-radius: var(--radius-sm); } .order-items { list-style: none; padding: 0; margin: 12px 0; } .order-items li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-border); } .order-items img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); } .order-items div { flex: 1; } .tracking { background: var(--color-bg); border-radius: var(--radius-sm); padding: 8px 12px; margin: 8px 0; } .ok-line { color: var(--color-success); } .auth-card { max-width: 420px; margin: 40px auto; background: var(--color-surface); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); } .auth-card input, .auth-card textarea { width: 100%; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .auth-error { color: var(--color-error); min-height: 20px; margin-top: 8px; } .payment-result { text-align: center; padding: 50px 20px; background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); } .template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--gap); } .template-card { background: var(--color-surface); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; } .template-card.active { outline: 2px solid var(--color-primary); } .template-card img { aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius-sm); } .template-noimg { aspect-ratio: 16/10; display: grid; place-items: center; background: var(--color-bg); border-radius: var(--radius-sm); color: var(--color-muted); } .template-actions { display: flex; gap: 6px; margin-top: auto; } .badge { background: var(--color-success); color: #fff; border-radius: 20px; padding: 2px 10px; font-size: 12px; } .plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--gap); } .plan-card { background: var(--color-surface); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); text-align: center; } .plan-price { font-size: 26px; font-weight: 700; color: var(--color-primary); } .plan-card input { width: 100%; padding: 8px; margin-top: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .surcharge-note { color: var(--alert-warn-text); background: var(--alert-warn-bg); border-radius: var(--radius-sm); padding: 4px 8px; margin-top: 4px; font-size: 12px; display: inline-block; } /* ---------- فیلتر تنوع ---------- */ .facet-values { display: flex; flex-wrap: wrap; gap: 6px; } .facet-values .chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; font-size: 13px; } .facet-values .chip small { color: var(--color-muted); font-size: 11px; } .filter-hint { font-size: 12px; line-height: 1.9; } /* ---------- برچسب‌ها ---------- */ .tag { border-radius: 20px; padding: 1px 9px; font-size: 11px; background: var(--color-bg); color: var(--color-muted); } .tag-admin { background: var(--color-primary); color: #fff; } .tag-buyer { background: var(--color-success); color: #fff; } .tag-ok { background: var(--color-success); color: #fff; } .tag-warn { background: var(--alert-warn-bg); color: var(--alert-warn-text); } .tag-danger { background: var(--color-error); color: #fff; } tr.row-muted { opacity: .55; } .row-actions { display: flex; gap: 6px; flex-wrap: wrap; } /* ---------- نظرات ---------- */ .stars { color: #f59e0b; letter-spacing: 1px; } .stars-off { color: var(--color-border); } .product-rating { display: flex; align-items: center; gap: 4px; font-size: 12px; } .rating-line { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0; } .reviews { background: var(--color-surface); border-radius: var(--radius); padding: 16px; margin-top: 16px; box-shadow: var(--shadow); } .reviews-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .reviews-score { display: flex; align-items: center; gap: 6px; } .reviews-score b { font-size: 24px; } .rating-bars { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; max-width: 320px; } .rating-bar { display: grid; grid-template-columns: 42px 1fr 28px; align-items: center; gap: 8px; font-size: 12px; } .rating-bar .bar { background: var(--color-bg); border-radius: 20px; height: 7px; overflow: hidden; } .rating-bar .bar i { display: block; height: 100%; background: #f59e0b; } .review-form, .reply-box form { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; } .review-form textarea, .reply-box textarea { width: 100%; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: inherit; font: inherit; } .review-form .btn-primary, .reply-box .btn-ghost { align-self: flex-start; } .review-note { background: var(--color-bg); border-radius: var(--radius-sm); padding: 10px 14px; margin: 12px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* ستاره‌های امتیازدهی: چون ورودی‌ها از ۵ به ۱ چیده شده‌اند، با ~ می‌توان ستاره‌های «کوچک‌ترِ» انتخاب‌شده را هم رنگی کرد (CSS انتخابگرِ «برادرِ قبلی» ندارد). */ .rating-input { display: flex; align-items: center; gap: 4px; } .rating-input input { display: none; } .rating-input label { font-size: 24px; color: var(--color-border); cursor: pointer; margin: 0; line-height: 1; } .rating-input input:checked ~ label { color: var(--color-border); } .rating-input label:hover, .rating-input label:hover ~ label, .rating-input input:checked + label, .rating-input input:checked + label ~ label { color: #f59e0b; } .review-list { list-style: none; padding: 0; margin: 8px 0 0; } .review-item { border-top: 1px solid var(--color-border); padding: 12px 0; } .review-item.is-reply { border-top: none; padding: 8px 0 0; } .review-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; } .review-text { margin: 6px 0 0; line-height: 2; white-space: pre-line; } .review-replies { list-style: none; margin: 8px 0 0; padding-inline-start: 16px; border-inline-start: 2px solid var(--color-border); } .reply-box summary { cursor: pointer; color: var(--color-muted); font-size: 12px; margin-top: 8px; } .review-admin .review-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .review-admin .review-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .review-admin .reply-form { margin-top: 10px; } .review-admin .reply-form input[name="comment"] { flex: 1; min-width: 220px; } .quoted { border-inline-start: 3px solid var(--color-border); margin: 8px 0; padding: 4px 12px; color: var(--color-muted); font-size: 13px; } .site-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); margin-top: 40px; padding: 24px 0; } .footer-row { display: flex; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; } .footer-row a { display: block; color: var(--color-muted); } /* نمادهای قابل مدیریت از پنل ادمین (کدهای فوتر) */ .footer-badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border); } .footer-badge img { max-width: 90px; height: auto; display: block; } /* ویرایشگر کد در پنل مدیریت */ .code-input { font-family: ui-monospace, Consolas, monospace; font-size: 12px; } .footer-code-item .footer-code-preview { margin: 12px 0; padding: 12px; text-align: center; border: 1px dashed var(--color-border); border-radius: 8px; } @media (max-width: 768px) { /* روی لمسی hover وجود ندارد، پس نوار افقی جای خود را به یک دراپ‌داون واقعی می‌دهد: دکمهٔ «دسته‌بندی‌ها» فهرست را باز می‌کند و هر دسته کلید ▾ خودش را دارد که زیردسته‌ها را آکاردئونی نشان می‌دهد. باز و بسته شدن با کلاس‌های open/expanded در shop.js انجام می‌شود. */ .category-toggle { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; padding: 10px 4px; background: none; border: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; } .category-toggle .caret { transition: transform .2s ease; } .category-bar.open .category-toggle .caret { transform: rotate(180deg); } .category-bar ul { display: none; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 0 0 8px; max-height: 70vh; overflow-y: auto; } .category-bar.open > .container > ul { display: flex; } .category-bar li { white-space: normal; } .category-bar > .container > ul > li { display: grid; grid-template-columns: 1fr auto; align-items: center; border-top: 1px solid var(--color-border); } .category-bar > .container > ul > li > a { padding: 11px 4px; } .category-bar .sub-toggle { display: block; background: none; border: none; color: var(--color-muted); font: inherit; font-size: 18px; padding: 8px 14px; cursor: pointer; } .category-bar li.expanded > .sub-toggle { transform: rotate(180deg); } /* زیرمنو در موبایل شناور نیست؛ زیر همان دسته باز می‌شود و کل عرض را می‌گیرد. */ .category-bar .sub { position: static; display: none; grid-column: 1 / -1; box-shadow: none; border: none; border-radius: 0; padding: 0 0 8px; margin: 0; background: var(--color-surface-alt); } .category-bar li.expanded > .sub { display: flex; } .category-bar li:hover > .sub, .category-bar li:focus-within > .sub { display: none; } .category-bar li.expanded:hover > .sub { display: flex; } .category-bar .sub a { padding: 9px 18px; } } @media (max-width: 900px) { .list-layout, .cart-layout, .checkout-layout, .product-page { grid-template-columns: 1fr; } .header-row { flex-wrap: wrap; } .search { order: 3; width: 100%; flex-basis: 100%; } .cart-line { grid-template-columns: 70px 1fr; } .slide img { height: 180px; } } /* ---------- نوار پایین موبایل ---------- */ /* فقط وقتی رندر می‌شود که قالب features.bottomNav را روشن کرده باشد. روی دسکتاپ هیچ‌وقت دیده نمی‌شود، پس همان دکمه‌های هدر مسیر اصلی می‌مانند. */ .bottom-nav, .drawer, .drawer-backdrop { display: none; } @media (max-width: 768px) { /* ---- هدر جمع‌وجور ---- قبلاً «سبد خرید» و «ورود با الوکادو» با متن کامل می‌آمدند و کنارِ لوگو جا نمی‌شدند، پس کل ردیف به سطر بعد می‌افتاد و هدر با جستجو و دسته‌بندی نیمی از صفحه را می‌گرفت. حالا در موبایل این دکمه‌ها فقط آیکونِ گردند و همه در یک سطر با لوگو می‌نشینند. */ .header-row { gap: 8px; padding: 8px 12px; } .brand { flex: 1; } .brand img { height: 32px; } .brand-mark { width: 34px; height: 34px; font-size: 15px; } .brand-text b { font-size: 15px; } /* شعار فروشگاه در عرض موبایل فقط ارتفاع می‌گیرد. */ .brand-text small { display: none; } .header-actions { gap: 6px; } .header-actions .btn-label { display: none; } .header-actions .btn-ghost, .header-actions .btn-primary { position: relative; width: 38px; height: 38px; padding: 0; gap: 0; border-radius: 50%; justify-content: center; font-size: 17px; } /* بدون متنِ کناری، شمارنده روی گوشهٔ آیکون سبد می‌نشیند. */ .header-actions .header-cart .cart-badge { position: absolute; top: -2px; inset-inline-start: -2px; font-size: 10px; line-height: 16px; min-width: 16px; padding: 0 4px; } .search input { padding: 8px 10px; } .search button { padding: 0 12px; } /* ---- خودِ نوار پایین ---- */ body.has-bottom-nav { --fixed-bottom-offset: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)); /* جا برای نوار، وگرنه انتهای فوتر زیرش گم می‌شود. */ padding-bottom: var(--fixed-bottom-offset); } /* با وجود نوار پایین، سبد و حساب دو بار تکرار می‌شوند؛ در هدر فقط لوگو و کلید تم می‌ماند. */ body.has-bottom-nav .header-cart, body.has-bottom-nav .header-account { display: none; } /* دسته‌بندی‌ها هم از دکمهٔ همین نوار باز می‌شوند و نوار بالایی لازم نیست. */ body.has-bottom-nav .category-bar { display: none; } .bottom-nav { position: fixed; inset-inline: 0; bottom: 0; z-index: 50; display: flex; align-items: stretch; height: var(--bottom-nav-height); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: 0 -4px 16px rgba(0, 0, 0, .1); } .bottom-nav > a, .bottom-nav > button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 2px; font: inherit; font-size: 11px; background: none; border: none; color: var(--color-muted); cursor: pointer; } .bottom-nav .bn-icon { position: relative; font-size: 19px; line-height: 1; } .bottom-nav .cart-badge { position: absolute; top: -6px; inset-inline-start: -8px; font-size: 10px; line-height: 15px; min-width: 15px; padding: 0 4px; } .bottom-nav > a:active, .bottom-nav > button[aria-expanded="true"] { color: var(--color-primary); } /* ---- کشوی دسته‌بندی ---- */ .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .45); } .drawer { display: flex; flex-direction: column; position: fixed; inset-inline: 0; bottom: 0; z-index: 56; max-height: 72vh; background: var(--color-surface); border-radius: var(--radius) var(--radius) 0 0; box-shadow: 0 -8px 28px rgba(0, 0, 0, .25); padding-bottom: env(safe-area-inset-bottom, 0px); } .drawer[hidden], .drawer-backdrop[hidden] { display: none; } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--color-border); } .drawer-close { background: none; border: none; color: var(--color-muted); font: inherit; font-size: 18px; cursor: pointer; padding: 4px 8px; } .drawer-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; } .drawer-list > li { display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid var(--color-border); } .drawer-list > li > a { padding: 12px 16px; } .drawer-list .sub-toggle { background: none; border: none; color: var(--color-muted); font: inherit; font-size: 18px; padding: 10px 16px; cursor: pointer; } .drawer-list li.expanded > .sub-toggle { transform: rotate(180deg); } .drawer-list .sub { display: none; grid-column: 1 / -1; list-style: none; margin: 0; padding: 0 0 8px; background: var(--color-surface-alt); } .drawer-list li.expanded > .sub { display: block; } .drawer-list .sub a { display: block; padding: 9px 30px; } .drawer-all { padding: 12px 16px; color: var(--color-accent); font-weight: 600; } }