:root {
--color-primary: #C9846E;
--color-primary-dark: #A8654F;
--color-secondary: #D8B16D;
--color-accent: #D98A94;
--color-accent-purple: #A78BFA;
--color-bg: #FDF6F0;
--color-surface: #FFFFFF;
--color-text: #3A2A2C;
--color-text-light: #8A7873;
--color-border: #F0E1DC;
--color-success: #3FBF6F;
--color-danger: #E7403B;
--color-warning: #D8B16D;
--font-body: 'Vazirmatn', Tahoma, sans-serif;
--font-heading: 'Vazirmatn', Tahoma, sans-serif;
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 28px;
--radius-pill: 999px;
--shadow-sm: 0 2px 8px rgba(58, 42, 44, 0.06);
--shadow-md: 0 8px 24px rgba(58, 42, 44, 0.10);
--shadow-lg: 0 16px 40px rgba(58, 42, 44, 0.14);
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 40px;
--space-xl: 64px;
--container-width: 1200px;
--transition-fast: 0.15s ease;
--transition-base: 0.25s ease;
}
/*
* Vazirmatn used to be pulled in here via `@import` (render-blocking,
* serial fetch - the browser had to download+parse this whole file
* before it could even start fetching the font CSS). It's now loaded
* as a proper non-blocking in the of every layout that
* uses this stylesheet (header.php, admin-layout.php, admin/login.php)
* - see those files for the reasoning. Loading it there instead of
* here means it starts downloading in parallel with this file, not
* after it.
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
direction: rtl;
}
body {
font-family: var(--font-body);
background-color: var(--color-bg);
color: var(--color-text);
line-height: 1.7;
font-size: 16px;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
input, textarea, select {
font-family: inherit;
font-size: inherit;
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
font-weight: 700;
color: var(--color-text);
line-height: 1.4;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }
.container {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--space-md);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: 12px 28px;
border-radius: var(--radius-pill);
font-weight: 700;
font-size: 0.95rem;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn:hover {
transform: translateY(-2px);
}
.btn-primary {
background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-secondary) 100%);
color: #fff;
box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
background: linear-gradient(120deg, var(--color-primary-dark) 0%, var(--color-secondary) 100%);
box-shadow: var(--shadow-md);
}
.btn-secondary {
background-color: var(--color-secondary);
color: var(--color-text);
}
.btn-outline {
background-color: transparent;
border: 2px solid var(--color-primary);
color: var(--color-primary);
}
.card {
background-color: var(--color-surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card-blog {
background-color: transparent;
border-radius: 5px;
}
.card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
.badge {
display: inline-block;
padding: 4px 14px;
border-radius: var(--radius-pill);
font-size: 0.8rem;
font-weight: 700;
background-color: var(--color-accent);
color: #fff;
}
.form-group {
margin-bottom: var(--space-sm);
}
.form-group label {
display: block;
margin-bottom: 6px;
font-weight: 700;
font-size: 0.9rem;
}
.form-control {
width: 100%;
padding: 12px 16px;
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
background-color: var(--color-surface);
transition: border-color var(--transition-fast);
}
.form-control:focus {
outline: none;
border-color: var(--color-primary);
}
.error-text {
color: var(--color-danger);
font-size: 0.85rem;
margin-top: 4px;
}
.alert {
padding: var(--space-sm);
border-radius: var(--radius-sm);
margin-bottom: var(--space-sm);
font-weight: 600;
}
.alert-success {
background-color: rgba(63, 191, 111, 0.12);
color: var(--color-success);
}
.alert-danger {
background-color: rgba(232, 73, 61, 0.12);
color: var(--color-danger);
}
.alert-warning {
background-color: rgba(255, 201, 60, 0.18);
color: #7A5B00;
}
.error-page {
min-height: 50vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-sm);
text-align: center;
}
.error-page h1 {
font-size: 4rem;
color: var(--color-primary);
}
*:focus-visible {
outline: 3px solid var(--color-accent-purple);
outline-offset: 2px;
}
@media (max-width: 768px) {
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
.container { padding: 0 var(--space-sm); }
}
/*
* پرومو حالا داخل همون site-header-wrap ای هست که خودِ توشه (نه
* بیرونش) - یعنی یک واحد واحد با هم. پرومو دیگه position: fixed مستقل
* نداره، یک فرزند عادی توی جریان صفحه‌ست (بالای ) و ارتفاعش رو
* خودِ صفحه‌آرایی معمولی مرورگر حساب می‌کنه - نیازی به محاسبه‌ی دستی
* ارتفاع (چیزی مثل --promo-height سابق) یا padding-top روی body نیست.
* فقط خودِ wrap با position: sticky; top: 0 به بالای viewport می‌چسبه؛
* کلاس is-hidden (main.js، موقع اسکرول به پایین) روی همین یک wrap اعمال
* می‌شه، پس با جمع‌شدنش پرومو هم دقیقاً همراه هدر از صفحه خارج/وارد می‌شه.
*/
.header-promo {
background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-secondary) 100%);
color: #fff;
text-align: center;
padding: 16px var(--space-sm);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.site-header-wrap {
position: sticky;
top: 0;
z-index: 200;
transition: transform 0.35s ease;
}
.site-header-wrap.is-hidden {
transform: translateY(-100%);
}
.header-promo a {
display: block;
width: 100%;
max-width: 100%;
}
.header-promo__gif {
display: block;
width: 100%;
height: auto;
}
/*
* پس‌زمینه‌ی مات (backdrop-filter) عمداً روی یک ::before جدا نشسته، نه
* مستقیم روی خودِ .site-header - چون backdrop-filter (درست مثل transform)
* هر عنصری که روش باشه رو به containing block فرزندهای position:fixed
* تبدیل می‌کنه. منوی موبایل (.site-nav) و پنل زیرمجموعه‌ش داخل همین
* نشستن؛ اگه backdrop-filter مستقیم روی خودِ header بود، اون دو
* تا دیگه نسبت به viewport پوزیشن نمی‌گرفتن، نسبت به باکس کوچیکِ همین
* هدر می‌گرفتن (که ارتفاعش فقط چند ده پیکسله) - در عمل یعنی drawer اصلاً
* دیده نمی‌شه/کلیک‌پذیر نیست، فقط پرده‌ی تیره‌ی پشتش (nav-overlay) که
* بیرون از این containing block خراب مونده درست کار می‌کنه. با بردن
* blur به یه ::before (که خودش هیچ فرزندی نداره)، خودِ header دیگه این
* ویژگی رو نداره و این مشکل کلاً از بین می‌ره.
*/
.site-header {
position: relative;
/* z-index بالاتر از nav-overlay (۱۹۵) لازمه - چون overlay خودش
position:fixed داره (همیشه stacking context جدا می‌سازه)، و اگه
خودِ این هدر z-index صریح نداشته باشه (یعنی auto/۰ حساب بشه)، هر
همسایه‌ای که z-index صریح داشته باشه - حتی با عدد کمتر از ۲۰۰ روی
site-header-wrap - همیشه روی این هدر می‌نشینه، چون z-index صریح
همیشه بالاتر از z-index:auto پینت می‌شه. */
z-index: 250;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.site-header::before {
content: '';
position: absolute;
inset: 0;
background-color: rgba(250, 250, 248, 0.75);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: -1;
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
gap: var(--space-md);
}
.site-header__logo img {
height: 42px;
width: 42px;
border-radius: var(--radius-sm);
}
.site-nav {
display: flex;
align-items: center;
gap: var(--space-md);
list-style: none;
}
.site-nav a {
font-weight: 700;
color: var(--color-text);
padding: 8px 4px;
border-bottom: 3px solid transparent;
transition: border-color var(--transition-fast), color var(--transition-fast);
}
.site-nav a:hover {
color: var(--color-primary);
border-color: var(--color-secondary);
}
.site-header__actions {
display: flex;
align-items: center;
/* gap: var(--space-sm); */
}
.header-account-link {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
width: 40px;
height: 40px;
border-radius: 50%;
transition: background-color var(--transition-fast);
}
.header-account-link:hover {
background-color: var(--color-bg);
}
.header-account-link,
.cart-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
}
.header-account-link svg,
.cart-icon > svg {
display: block;
width: 22px;
height: 22px;
}
.header-account-link:hover,
.cart-icon:hover {
background-color: var(--color-bg);
border-radius: 50%;
}
/* عدد تعداد محصولات */
.cart-icon__count {
position: absolute;
top: 1px;
right: 1px;
min-width: 17px;
height: 17px;
padding: 0 4px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-primary);
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 1;
border-radius: 50%;
border: 2px solid var(--color-surface);
}
.nav-toggle {
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
width: 40px;
height: 40px;
padding: 0;
border: none;
border-radius: 50%;
background-color: transparent;
cursor: pointer;
transition: background-color var(--transition-fast);
}
.nav-toggle:hover {
background-color: var(--color-bg);
}
.nav-toggle__bar {
display: block;
width: 20px;
height: 2px;
border-radius: var(--radius-pill);
background-color: var(--color-text);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(2) {
opacity: 0;
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/*
* منوی کشویی (dropdown) هدر - زیرمجموعه‌ی هر آیتم ناوبری (فعلاً
* "محصولات" با لیست دسته‌بندی‌ها). فلش کوچیک کنار متن نشون می‌ده که
* زیرمجموعه داره و با باز شدن منو می‌چرخه؛ خود منو با fade + کمی
* scale/translate و easing نرم (نه transition خطی معمولی) باز می‌شه،
* یه پیکان کوچیک بالای پنل به لینک والدش وصلش می‌کنه، و هر آیتم با
* هاور یه نقطه‌ی رنگی و یه حرکت افقی ظریف می‌گیره - همه با رنگ/فاصله/
* گردی گوشه‌های همون تم سایت.
*/
.site-nav__link {
display: inline-flex;
align-items: center;
gap: 6px;
}
.site-nav__caret {
color: var(--color-text-light);
transition: transform var(--transition-base) cubic-bezier(0.34, 1.56, 0.64, 1), color var(--transition-fast);
}
.site-nav__item--dropdown:hover .site-nav__caret,
.site-nav__item--dropdown:focus-within .site-nav__caret {
transform: rotate(180deg);
color: var(--color-primary);
}
.site-nav__item--dropdown {
position: relative;
}
.site-nav__dropdown {
position: absolute;
top: 100%;
right: 0;
z-index: 110;
min-width: 250px;
margin-top: 18px;
padding: 10px;
display: flex;
flex-direction: column;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 24px 48px -16px rgba(51, 48, 46, 0.22), 0 4px 14px rgba(51, 48, 46, 0.08);
opacity: 0;
visibility: hidden;
transform: translateY(-10px) scale(0.97);
transform-origin: top right;
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.25s;
}
/* پیکان کوچیک بالای پنل، دقیقاً زیر لینک والد - همون تکنیک استاندارد
یک مربع ۴۵ درجه‌چرخیده با همون رنگ/بوردر پنل. */
.site-nav__dropdown::after {
content: '';
position: absolute;
top: -6px;
right: 22px;
width: 12px;
height: 12px;
background-color: var(--color-surface);
border-top: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
transform: rotate(-45deg);
border-radius: 2px 0 0 0;
}
/* پل نامرئی بین لینک و دراپ‌داون، تا موس موقع رد شدن از فاصله‌ی
بینشون (margin-top) دراپ‌داون رو گم نکنه و زودتر از موعد بسته نشه. */
.site-nav__item--dropdown::before {
content: '';
position: absolute;
top: 100%;
right: 0;
left: 0;
height: 18px;
}
.site-nav__item--dropdown:hover .site-nav__dropdown,
.site-nav__item--dropdown:focus-within .site-nav__dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.site-nav__dropdown-eyebrow {
padding: 10px 12px 6px;
color: var(--color-text-light);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.site-nav__dropdown-link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: var(--radius-sm);
color: var(--color-text);
font-weight: 500;
white-space: nowrap;
transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.site-nav__dropdown-link::before {
content: '';
flex-shrink: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--color-border);
transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.site-nav__dropdown-link:hover,
.site-nav__dropdown-link:focus-visible {
background-color: var(--color-bg);
color: var(--color-primary);
transform: translateX(-4px);
}
.site-nav__dropdown-link:hover::before,
.site-nav__dropdown-link:focus-visible::before {
background-color: var(--color-primary);
transform: scale(1.3);
}
.site-nav .site-nav__dropdown-link--all {
margin-bottom: 6px;
padding-bottom: 12px;
color: #fff;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
font-weight: 700;
justify-content: center;
}
.site-nav__dropdown-link--all::before {
display: none;
}
.site-nav .site-nav__dropdown-link--all:hover,
.site-nav .site-nav__dropdown-link--all:focus-visible {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
transform: none;
color: #fff;
filter: brightness(1.06);
}
/* دکمه‌ی «بازگشت» فقط برای پنل drill-down موبایله (پایین‌تر در همین فایل،
@media max-width:900px) - در دسکتاپ که دراپ‌داون با هاور باز می‌شه اصلاً
لازم نیست، مخفی می‌مونه. */
.site-nav__dropdown-back {
display: none;
}
/* پردهٔ تیره پشت پنل کشویی موبایل (backdrop) - با باز شدن منو fade می‌شه
تا هم تمرکز روی منو بیفته هم با کلیک روش بشه منو رو بست. خودِ overlay
همیشه در DOM هست، فقط با کلاس is-visible (main.js) نمایان می‌شه.
z-index عمداً کمتر از site-header-wrap (۲۰۰) است - وگرنه پرده روی خودِ
نوار هدر (لوگو، دکمه‌ی همبرگر، آیکن سبد) هم می‌افتاد: هم بصری تیره‌ش
می‌کرد، هم کلیک روی دکمه‌ی منو رو قاپ می‌زد (چون از نظر z-index بالاتر
بود) و همون کلیکی که باز می‌کرد بلافاصله به‌عنوان کلیک روی overlay هم
حساب می‌شد و می‌بستش. هدر باید همیشه بالای پرده و کاملاً روشن/کلیک‌پذیر
بمونه؛ فقط محتوای زیرش (main) باید تیره بشه. */
.nav-overlay {
position: fixed;
inset: 0;
background-color: rgba(21, 21, 21, 0.5);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-base), visibility var(--transition-base);
z-index: 195;
}
.nav-overlay.is-visible {
opacity: 1;
visibility: visible;
}
/* تا منوی موبایل بازه، اسکرول پشت صفحه قفله - هم UX بهتره، هم جلوی
تداخل با ترنسفرم site-header-wrap (اسکرول به پایین -> is-hidden) را
می‌گیره که وگرنه containing block پنل fixed رو به‌هم می‌ریخت. */
body.nav-open {
overflow: hidden;
}
.site-nav__mobile-brand {
display: none;
}
.site-nav__mobile-brand-link {
display: flex !important;
align-items: center;
gap: 12px;
width: 100%;
padding: 14px 20px !important;
border-bottom: 1px solid var(--color-border) !important;
}
.site-nav__mobile-brand-logo {
width: 42px !important;
height: 42px !important;
object-fit: cover;
border-radius: 50%;
flex-shrink: 0;
}
.site-nav__mobile-brand-name {
font-size: 1rem;
font-weight: 800;
color: var(--color-text);
}
@media (max-width: 900px) {
.site-nav__mobile-brand {
display: block;
}
.site-nav__mobile-brand-link:hover {
color: var(--color-text) !important;
background: transparent;
}
.nav-toggle {
display: flex;
}
.site-nav {
position: fixed;
top: 0;
bottom: 0;
right: 0;
z-index: 300;
width: min(320px, 85vw);
height: 100dvh;
flex-direction: column;
align-items: stretch;
gap: 0;
margin: 0;
padding: 0 0 var(--space-md);
background-color: var(--color-surface);
box-shadow: -12px 0 30px rgba(0, 0, 0, 0.18);
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-nav--open {
transform: translateX(0);
}
.site-nav > li {
border-bottom: 1px solid var(--color-border);
}
.site-nav > li:first-child {
border-top: 1px solid var(--color-border);
}
.site-nav a {
display: block;
width: 100%;
padding: 16px 20px;
border-bottom: none;
}
.site-nav__link {
width: 100%;
justify-content: space-between;
padding: 16px 20px;
}
.site-nav__item--dropdown {
position: static;
}
.site-nav__item--dropdown::before {
display: none;
}
.site-nav__caret {
transform: rotate(90deg);
}
.site-nav__item--dropdown:hover .site-nav__caret,
.site-nav__item--dropdown:focus-within .site-nav__caret {
transform: rotate(90deg);
color: var(--color-text-light);
}
/* پنل دوم (زیرمجموعه‌ها): هم‌اندازه‌ی خودِ drawer، روی همون یک پنل
می‌شینه و از سمت راست با همون انیمیشن پنل اول میاد تو - نه یک
dropdown شناور کوچیک زیر لینک والد مثل دسکتاپ. */
.site-nav__dropdown {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: auto;
width: min(320px, 85vw);
height: 100dvh;
min-width: 0;
margin: 0;
padding: 70px 0 var(--space-md);
border: none;
border-radius: 0;
box-shadow: none;
z-index: 310;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
overflow-y: auto;
}
.site-nav__dropdown::after {
display: none;
}
.site-nav .site-nav__item--dropdown.is-open .site-nav__dropdown {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.site-nav .site-nav__item--dropdown:not(.is-open) .site-nav__dropdown {
opacity: 0;
visibility: hidden;
transform: translateX(100%);
}
.site-nav__dropdown-back {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 0 20px 16px;
margin-bottom: 8px;
border: none;
border-bottom: 1px solid var(--color-border);
background: none;
color: var(--color-text);
font-family: inherit;
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
}
.site-nav__dropdown-back svg {
transform: rotate(-90deg);
flex-shrink: 0;
color: var(--color-text-light);
}
.site-nav__dropdown-link {
border-bottom: 1px solid var(--color-border);
border-radius: 0;
padding: 14px 20px;
}
.site-nav__dropdown-link:hover,
.site-nav__dropdown-link:focus-visible {
transform: none;
}
.site-nav .site-nav__dropdown-link--all {
background: none;
color: var(--color-primary);
justify-content: flex-start;
margin-bottom: 0;
}
.site-nav .site-nav__dropdown-link--all::before {
display: none;
}
.site-nav .site-nav__dropdown-link--all:hover,
.site-nav .site-nav__dropdown-link--all:focus-visible {
background: var(--color-bg);
color: var(--color-primary);
filter: none;
}
}
.site-footer {
background-color: var(--color-text);
color: #fff;
margin-top: var(--space-xl);
padding: var(--space-lg) 0 var(--space-md);
}
.site-footer__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-md);
margin-bottom: var(--space-md);
}
.site-footer h4 {
color: var(--color-secondary);
margin-bottom: var(--space-xs);
}
.site-footer__contact-line {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
margin-bottom: 4px;
}
.site-footer a {
color: rgba(255, 255, 255, 0.8);
display: block;
margin-bottom: 6px;
transition: color var(--transition-fast);
}
.site-footer a:hover {
color: var(--color-secondary);
}
.site-footer__bottom {
border-top: 1px solid rgba(255, 255, 255, 0.15);
padding-top: var(--space-sm);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-sm);
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.6);
}
.site-footer__trust-seals {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.site-footer__trust-seals a {
display: flex;
width: 80px;
height: 100px;
background-color: #fff;
border-radius: var(--radius-sm);
align-items: center;
justify-content: center;
padding: 4px;
}
.site-footer__trust-seals img {
max-width: 100%;
max-height: 100%;
}
.site-footer__trust-seal-empty {
display: block;
width: 100%;
height: 100%;
}
@media (max-width: 600px) {
.site-footer__bottom {
justify-content: center;
text-align: center;
}
}
.admin-layout {
display: flex;
min-height: 100vh;
}
.admin-sidebar {
width: 240px;
background-color: var(--color-text);
color: #fff;
padding: var(--space-md);
}
.admin-sidebar a {
display: block;
padding: 10px 12px;
border-radius: var(--radius-sm);
color: rgba(255, 255, 255, 0.85);
margin-bottom: 4px;
font-weight: 600;
}
.admin-sidebar a:hover,
.admin-sidebar a.active {
background-color: var(--color-primary);
color: #fff;
}
.admin-sidebar__group {
margin-bottom: 4px;
}
.admin-sidebar__group summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
border-radius: var(--radius-sm);
color: rgba(255, 255, 255, 0.85);
font-weight: 700;
cursor: pointer;
list-style: none;
}
.admin-sidebar__group summary::-webkit-details-marker {
display: none;
}
.admin-sidebar__group summary::after {
content: "\25BE";
font-size: 0.75rem;
transition: transform 0.2s ease;
}
.admin-sidebar__group[open] summary::after {
transform: rotate(180deg);
}
.admin-sidebar__group summary:hover {
background-color: rgba(255, 255, 255, 0.08);
}
.admin-sidebar__group a {
padding-right: 28px;
font-weight: 500;
font-size: 0.92rem;
}
.admin-content {
flex: 1;
padding: var(--space-lg);
}
/* Logout button style */
.admin-sidebar__logout-form {
margin: 0;
}
.admin-sidebar__logout-btn {
display: block;
width: 100%;
text-align: right;
padding: 10px 12px;
border-radius: var(--radius-sm);
color: rgba(255, 255, 255, 0.85);
margin-bottom: 4px;
font-weight: 600;
background: none;
border: none;
cursor: pointer;
font-family: inherit;
font-size: inherit;
}
.admin-sidebar__logout-btn:hover {
background-color: var(--color-primary);
color: #fff;
}
/*
* حداقل ریسپانسیو برای پنل ادمین روی گوشی: زیر ۸۶۰px، سایدبار به‌جای
* کنار محتوا، بالای اون قرار می‌گیره (ستونی به‌جای ردیفی) و عرض ثابت
* ۲۴۰px برداشته می‌شه تا کل صفحه فشرده/اسکرول افقی نشه. تغییر دیگه‌ای
* لازم نیست چون گروه‌های `` سایدبار از قبل جمع‌شونده هستن.
*/
@media (max-width: 860px) {
.admin-layout {
flex-direction: column;
min-height: 0;
}
.admin-sidebar {
width: auto;
}
.admin-content {
padding: var(--space-md);
}
}
.section {
padding: var(--space-xl) 0;
}
.section__header {
text-align: center;
margin-bottom: var(--space-lg);
}
.section__header p {
color: var(--color-text-light);
margin-top: var(--space-xs);
}
.grid {
display: grid;
gap: 37.5px;
}
.grid--products {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.grid--blog {
/* حداکثر ۳۴۰px هر ستون (نه 1fr) - وگرنه وقتی تعداد پست‌ها کم باشه
(مثلاً ۱ یا ۲ تا)، همون یکی/دوتا کارت کل عرض کانتینر رو با هم
تقسیم می‌کنن و کارت‌ها به‌شکل غیرطبیعی خیلی بزرگ/کشیده دیده می‌شن. */
grid-template-columns: repeat(auto-fill, minmax(260px, 340px));
}
.grid--testimonials {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.product-card__image {
position: relative;
overflow: hidden;
display: block;
aspect-ratio: 1 / 1;
}
.product-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.product-card:hover .product-card__image img {
transform: scale(1.05);
}
.product-card__body {
padding: var(--space-sm);
display: flex;
flex-direction: column;
gap: 8px;
}
.product-card__category {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 12px 3px 10px;
border-radius: var(--radius-pill);
font-size: 0.72rem;
font-weight: 700;
background: var(--color-accent);
color: #fff;
width: fit-content;
}
.product-card__category::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #fff;
display: inline-block;
}
.product-card__title a {
font-size: 1rem;
font-weight: 700;
}
.product-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
}
.product-card__price {
font-weight: 700;
color: var(--color-primary-dark);
}
.product-card__price-box {
display: flex;
flex-direction: column;
gap: 2px;
}
.product-card__price--old {
font-weight: 400;
font-size: 0.8rem;
color: var(--color-text-light);
text-decoration: line-through;
}
.product-card__price--sale {
color: var(--color-danger);
}
.product-card__discount-badge {
position: absolute;
top: 12px;
right: 12px;
background-color: var(--color-danger);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
padding: 4px 10px;
border-radius: var(--radius-pill);
z-index: 1;
box-shadow: var(--shadow-sm);
}
.btn-sm {
padding: 8px 18px;
font-size: 0.85rem;
}
.blog-card__image {
position: relative;
overflow: hidden;
display: block;
aspect-ratio: 16 / 12;
background: linear-gradient(135deg, #F3E3E5 0%, #EAD9BE 100%);
}
.blog-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.blog-card:hover .blog-card__image img {
transform: scale(1.05);
}
.blog-card__body {
padding: var(--space-sm);
}
.blog-card__date {
position: absolute;
bottom: 10px;
left: 10px;
background-color: rgba(58, 42, 44, 0.85);
color: #fff;
font-size: 0.75rem;
font-weight: 600;
padding: 4px 12px;
border-radius: var(--radius-pill);
}
.blog-card__title {
margin: 8px 0;
}
.blog-card__excerpt {
color: var(--color-text-light);
font-size: 0.85rem;
margin: 0 0 8px;
}
.blog-card__link {
color: var(--color-primary);
font-weight: 700;
font-size: 0.9rem;
}
.testimonial-card {
padding: var(--space-md);
text-align: center;
}
.testimonial-card__rating {
font-size: 1rem;
margin-bottom: var(--space-xs);
}
.testimonial-card__text {
color: var(--color-text-light);
margin-bottom: var(--space-sm);
}
.testimonial-card__name {
font-weight: 700;
color: var(--color-primary-dark);
}
.empty-state {
text-align: center;
color: var(--color-text-light);
padding: var(--space-lg) 0;
}
.editor-img-remove {
display: none;
}
.editor-img-resize-handle {
display: none;
}
.editor-img-alt {
display: none;
}
.editor-img-wrap {
display: inline-block;
max-width: 100%;
line-height: 0;
}
.editor-img {
max-width: 100%;
border-radius: 8px;
}
.editor-embed-remove {
display: none;
}
.editor-embed-wrap {
position: relative;
display: block;
max-width: 100%;
margin: var(--space-sm) 0;
}
.editor-embed-wrap iframe {
display: block;
width: 100%;
min-height: 320px;
border: 0;
border-radius: var(--radius-md);
background-color: #000;
}
.preview-banner {
background-color: var(--color-warning);
color: #4a3600;
text-align: center;
font-weight: 700;
font-size: 0.9rem;
padding: 10px 16px;
position: sticky;
top: 0;
z-index: 999;
}
/* کارت نظر و فرم ثبت نظر — مشترک بین صفحه محصول و صفحه بلاگ */
.comment-item {
background-color: var(--color-surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: var(--space-sm);
margin-bottom: var(--space-sm);
}
.comment-item__header {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
}
.comment-item__name {
font-weight: 700;
}
.comment-item__text {
color: var(--color-text-light);
margin-bottom: 6px;
}
.comment-item__date {
font-size: 0.8rem;
color: var(--color-text-light);
}
.comment-form {
background-color: var(--color-surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: var(--space-md);
}
.comment-form--guest {
text-align: center;
}
.comment-form--guest p {
margin-bottom: var(--space-sm);
color: var(--color-text-light);
}
.payment-options {
display: flex;
flex-direction: column;
margin-top: 15px;
}