/* فونت وزیرمتن - لوکال (به‌جای CDN jsdelivr). فایل‌های woff2 باید داخل
   static/fonts/ قرار بگیرن (لیست فایل‌ها و لینک دانلود در چت آورده شده). */
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/Vazirmatn-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/Vazirmatn-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/Vazirmatn-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 800; font-display: swap; src: url('/static/fonts/Vazirmatn-ExtraBold.woff2') format('woff2'); }

/* ==========================================================================
   ATELIER — ویترین‌های رنگی
   ایده: صفحه‌ی اصلی مثل عبور از چند «ویترین» متفاوت فروشگاهه؛ هر ویترین
   (پیشنهاد ویژه/پرفروش‌ترین‌ها/بیشترین تخفیف) پس‌زمینه، تایپوگرافی و قالب
   کارت مخصوص خودش رو داره. پالت: سفید کاغذی + سبز بطری + مرجانی-قرمز.
   نام متغیرها با تم default هماهنگ نگه داشته شده.
   ========================================================================== */
:root {
  --color-bg: #FAFAF7;
  --color-surface: #FFFFFF;
  --color-surface-alt: #EDF2ED;
  --color-surface-warm: #FFF1EC;
  --color-ink: #14171A;
  --color-ink-soft: #6B7169;
  --color-primary: #0B3D2E;
  --color-primary-dark: #082D22;
  --color-accent: #FF5A3C;
  --color-accent-dark: #E1472C;
  --color-line: #E3E3DA;
  --color-danger: #C23B2C;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;

  --font-body: 'Vazirmatn', system-ui, sans-serif;
  --container: 1220px;
  --header-h: 76px;
  --bottom-nav-h: 62px;
  --shadow-card: 0 1px 2px rgba(20,20,15,.05), 0 10px 26px -14px rgba(20,20,15,.16);
  --shadow-card-hover: 0 2px 4px rgba(20,20,15,.06), 0 24px 44px -18px rgba(11,61,46,.22);
  --shadow-lift: 0 18px 40px -16px rgba(11,61,46,.28);
  --ease: cubic-bezier(.16,1,.3,1);

  /* مقیاس تایپوگرافی (نسبت ۱٫۲۵ روی پایه‌ی ۱۶px) */
  --fs-xs: .8125rem;   /* 13px  - برچسب‌ها */
  --fs-sm: .9375rem;   /* 15px  - متن فرعی/nav */
  --fs-base: 1rem;     /* 16px  - بدنه */
  --fs-md: 1.25rem;    /* 20px  - نام محصول در جزئیات */
  --fs-lg: 1.5625rem;  /* 25px  - تیتر بخش‌ها (shelf__title) */
  --fs-xl: 1.953rem;   /* 31px  - تیتر جزئیات محصول/پست */
  --fs-2xl: clamp(2.25rem, 1.1rem + 2.6vw, 3.0525rem); /* 36-48.8px - تیتر هیرو */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); background: var(--color-bg); color: var(--color-ink); line-height: 1.75; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.25; margin: 0; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-4); }
.skip-link { position: absolute; right: -999px; top: 0; background: var(--color-ink); color: #fff; padding: 10px 16px; border-radius: 0 0 0 8px; z-index: 999; }
.skip-link:focus { right: 0; }

[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- هدر ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(250,250,247,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-line); }
.site-header__bar { height: var(--header-h); display: flex; align-items: center; gap: var(--space-5); justify-content: space-between;}
.site-header__logo { font-weight: 800; font-size: 1.22rem; display: flex; align-items: center; gap: 9px; white-space: nowrap; color: var(--color-primary); }
.site-header__logo::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--color-accent); }
.site-header__logo img { height: 30px; }
.site-nav { display: flex; align-items: center; gap: var(--space-4); flex: 1; }
.site-nav a { font-size: .93rem; font-weight: 600; color: var(--color-ink-soft); position: relative; padding: 6px 0; }
.site-nav a:hover, .site-nav a.is-active { color: var(--color-primary); }
.site-nav a.is-active::after { content: ""; position: absolute; right: 0; left: 0; bottom: -13px; height: 2px; background: var(--color-accent); border-radius: 2px; }
.header__actions { display: flex; align-items: center; gap: var(--space-2); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--color-ink); cursor: pointer; position: relative; transition: background .18s ease; }
.icon-btn:hover { background: var(--color-surface-alt); }
.icon-btn--wide { width: auto; padding: 0 14px; border-radius: 20px; border-color: var(--color-line); }
.account-link__label { font-size: .88rem; font-weight: 600; }
.header__cart { position: relative; }
.cart-badge { position: absolute; top: 2px; left: 2px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--color-accent); color: #fff; font-size: .65rem; font-weight: 800; display: none; align-items: center; justify-content: center; line-height: 1; }
@media (max-width: 860px) { .site-nav { display: none; } .site-header__bar { height: 64px; } }
/* حساب کاربری تو هدر موبایل لازم نیست - همون‌جا تو نوار پایین (bottom-nav) هست */
@media (max-width: 760px) { .header__actions .account-link { display: none; } }

/* ---------- هیرو ---------- */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-5); align-items: center; padding: var(--space-6) 0 var(--space-5); }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; color: var(--color-primary); letter-spacing: .01em; margin-bottom: var(--space-3); }
.hero__eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--color-accent); }
.hero h1 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.01em; color: var(--color-ink); margin-bottom: var(--space-3); }
.hero p { color: var(--color-ink-soft); font-size: var(--fs-sm); max-width: 470px; margin-bottom: var(--space-4); }
.hero__actions { display: flex; gap: 12px; }
.hero__figure { position: relative; aspect-ratio: 4/3.1; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(150deg, #FBEAE3 0%, var(--color-surface-alt) 70%); }
.hero__figure > img {
  position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover;
}
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; padding: var(--space-4) 0; } .hero__figure { order: -1; aspect-ratio: 16/10; } }


/* ---------- عنوان بخش ---------- */

.section-title {
  margin: var(--space-3) var(--space-3);
}


/* ---------- دکمه‌ها ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 10px; border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-ink); font-family: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.btn:hover { border-color: var(--color-ink); }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn-accent { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn-accent:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }

/* ---------- ویترین‌ها (بخش‌های صفحه‌ی اصلی) ---------- */
.shelf { padding: var(--space-4) 0 var(--space-5); }
.shelf + .shelf { padding-top: var(--space-4);margin-top: var(--space-4); border-radius: 25px; }
.shelf--tint-green { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.shelf--tint-warm { padding-top: var(--space-5); padding-bottom: var(--space-4); }
.shelf--tint-green { background: var(--color-surface-alt); }
.shelf--tint-warm { background: var(--color-surface-warm); }
.shelf__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.shelf__label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; color: var(--color-ink-soft); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.shelf__label::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--color-accent); }
.shelf__title { font-size: var(--fs-lg); font-weight: 800; color: var(--color-ink); }
.shelf__more { font-size: var(--fs-sm); font-weight: 700; color: var(--color-ink-soft); white-space: nowrap; }
.shelf__more:hover { color: var(--color-primary); }

/* ---------- ردیف دسته‌بندی‌ها ---------- */
.category-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); overflow-x: auto; padding: 6px 2px 18px; scrollbar-width: none; cursor: grab; user-select: none; }
.category-chips.is-dragging { cursor: grabbing; }
.category-chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 9px 20px; border-radius: 999px; border: 1px solid var(--color-line); font-size: .88rem; font-weight: 600; color: var(--color-ink-soft); background: var(--color-surface); }
.chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.chip--all { color: var(--color-primary); border-style: dashed; }

/* دسته‌های صفحه اصلی به شکل استوری اینستاگرام: دایره‌ی گرد + اسم زیرش.
   وقتی .ImageURL دسته پر باشه عکس، وگرنه آواتار حرف اول (fallback). */
.category-stories { display: flex; gap: var(--space-4); overflow-x: auto; padding: 6px 2px 18px; scrollbar-width: none; cursor: grab; user-select: none; }
.category-stories.is-dragging { cursor: grabbing; }
.category-stories::-webkit-scrollbar { display: none; }
.category-story { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 76px; text-align: center; }
.category-story__avatar {
  width: 68px; height: 68px; border-radius: 50%; padding: 3px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  display: flex; align-items: center; justify-content: center;
}
.category-story__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-bg); display: block; }
.category-story__glyph {
  width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--color-bg);
  background: var(--color-surface); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.3rem; color: var(--color-primary);
}
.category-story__avatar--all { background: var(--color-surface-alt); color: var(--color-ink-soft); }
.category-story__avatar--all svg { border: none; }
.category-story__name { font-size: .78rem; font-weight: 600; color: var(--color-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.category-story:hover .category-story__name { color: var(--color-primary); }

/* ---------- نوار مزیت‌ها (usp_strip) ---------- */
.usp-strip { padding: var(--space-4) 0; }
.usp-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.usp-item { display: flex; align-items: center; gap: 14px; padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.usp-item__icon { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-surface-alt); color: var(--color-primary); }
.usp-item__body h5 { font-size: var(--fs-sm); font-weight: 700; color: var(--color-ink); margin-bottom: 2px; }
.usp-item__body p { font-size: var(--fs-xs); color: var(--color-ink-soft); margin: 0; }
@media (max-width: 900px) { .usp-strip__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .usp-strip__grid { grid-template-columns: 1fr; } }

/* ---------- بنر تبلیغاتی (promo_banner) ---------- */
.promo-banner { padding: var(--space-5) 0; }
.promo-banner__inner {
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: var(--space-5);
  background: var(--color-surface-warm); border-radius: var(--radius-lg); padding: var(--space-5);
}
.promo-banner__content h3 { font-size: var(--fs-xl); font-weight: 800; color: var(--color-ink); margin-bottom: var(--space-2); }
.promo-banner__content p { color: var(--color-ink-soft); font-size: var(--fs-sm); max-width: 420px; margin-bottom: var(--space-3); }
.promo-banner__figure { position: relative; }
.promo-banner__figure img { width: 100%; border-radius: var(--radius-md); }
.promo-banner__badge {
  position: absolute; top: -14px; left: -14px; background: var(--color-accent); color: #fff; font-weight: 800;
  font-size: var(--fs-sm); border-radius: 50%; width: 64px; height: 64px; display: flex; align-items: center;
  justify-content: center; text-align: center; box-shadow: var(--shadow-card);
}
@media (max-width: 760px) { .promo-banner__inner { grid-template-columns: 1fr; text-align: center; } .promo-banner__content p { margin-inline: auto; } }

/* ---------- ردیف لوگوی برندها (brand_strip) ---------- */
.brand-strip { padding: var(--space-4) 0; }
.brand-strip__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.brand-strip__row img { max-height: 40px; width: auto; filter: grayscale(1); opacity: .6; transition: filter .2s var(--ease), opacity .2s var(--ease); }
.brand-strip__row a:hover img, .brand-strip__row span:hover img { filter: none; opacity: 1; }

/* ---------- کارت محصول پایه ---------- */
.product-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); }
.product-card {
  display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-md); overflow: hidden; position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.product-card::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; z-index: 3; pointer-events: none;
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s ease;
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); border-color: transparent; }
.product-card:hover::before { opacity: 1; }
.product-card__image { position: relative; aspect-ratio: 4/5; background: var(--color-surface-alt); overflow: hidden; }
.product-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.product-card:hover .product-card__image img { transform: scale(1.06); }
.badge-discount { position: absolute; top: 10px; right: 10px; background: var(--color-accent); color: #fff; font-size: .72rem; font-weight: 800; padding: 4px 9px; border-radius: 999px; z-index: 2; }
.badge-outofstock { display: inline-block; margin-top: 6px; font-size: .74rem; font-weight: 700; color: var(--color-danger); }
.badge-outofstock[hidden] { display: none; }
.badge-outofstock--overlay { position: absolute; top: 10px; left: 10px; margin: 0; z-index: 2; background: rgba(17,17,17,.78); color: #fff; padding: 4px 9px; border-radius: 999px; }
.product-card__body { padding: 13px 14px; }
.product-card__name { font-size: .92rem; font-weight: 600; margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price { font-weight: 800; font-size: 1rem; }
.price--sale { color: var(--color-accent-dark); }
.price--old { font-size: .8rem; color: var(--color-ink-soft); text-decoration: line-through; }

/* دکمه‌ی افزودن سریع روی کارت */
.quick-add {
  position: absolute; left: 10px; bottom: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%;
  background: var(--color-ink); color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .2s ease, transform .2s ease, background .25s ease;
  overflow: hidden;
}
.product-card:hover .quick-add, .quick-add:focus-visible { opacity: 1; transform: none; }
.quick-add:hover { background: var(--color-accent); }
.quick-add.is-added { background: var(--color-primary); transform: none; opacity: 1; }
.quick-add__icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform .32s var(--ease), opacity .32s var(--ease); }
.quick-add__icon--check { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-25deg); }
.quick-add.is-added .quick-add__icon--plus { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(25deg); }
.quick-add.is-added .quick-add__icon--check { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
@media (hover: none) { .quick-add { opacity: 1; transform: none; } }

/* رفتار کوچیک‌شدن هدر روی اسکرول حذف شد - در موبایل باعث بهم‌ریختگی می‌شد. */

@media (max-width: 1020px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .product-grid { grid-template-columns: repeat(2, 1fr); } .quick-add { width: 34px; height: 34px; } }

/* ---------- ویترین پیشنهاد ویژه: کارت‌های بزرگ افقی ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.feature-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/4; background: var(--color-surface-alt); }
.feature-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.feature-card:hover img { transform: scale(1.05); }
.feature-card__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,20,15,.82) 0%, rgba(11,20,15,0) 55%); }
.feature-card__body { position: absolute; right: 0; left: 0; bottom: 0; padding: var(--space-3) var(--space-3) var(--space-4); color: #fff; z-index: 1; }
.feature-card__name { font-weight: 700; font-size: var(--fs-md); margin-bottom: 6px; }
.feature-card__price { font-weight: 800; }
@media (max-width: 1020px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } }

/* ---------- ویترین پرفروش‌ترین‌ها: ردیف با شماره‌ی رتبه (CSS counter) ---------- */
.rank-rail {
  display: flex; gap: var(--space-4); overflow-x: auto; padding: 8px 2px 18px; scrollbar-width: none; counter-reset: rank;
  cursor: grab; user-select: none;
}
.rank-rail img, .category-stories img { -webkit-user-drag: none; user-drag: none; }
.rank-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rank-rail.is-dragging .product-card { pointer-events: none; }
.rank-rail::-webkit-scrollbar { display: none; }
.rank-item { flex: none; width: 210px; position: relative; counter-increment: rank; padding-top: 40px; }
.rank-item::before {
  content: counter(rank); position: absolute; top: 0; right: -2px; font-size: 3rem; font-weight: 800;
  color: var(--color-primary); opacity: .18; z-index: 0; line-height: 1; pointer-events: none;
}
.rank-item .product-card { position: relative; z-index: 1; }

/* ---------- دسته‌بندی‌ها (صفحه) ---------- */
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.category-tile { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: var(--space-4) var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); text-align: center; }
.category-tile:hover { border-color: var(--color-primary); }
.category-tile__glyph { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; color: var(--color-primary); background: var(--color-surface-alt); }
.category-tile--0 .category-tile__glyph { background: #E6E9DE; } .category-tile--1 .category-tile__glyph { background: #F3E2D8; }
.category-tile--2 .category-tile__glyph { background: #E1E6E6; } .category-tile--3 .category-tile__glyph { background: #F1E7D3; }
.category-tile__name { font-weight: 600; font-size: .9rem; }
@media (max-width: 700px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }

/* گروه‌بندی درختی دسته‌ها: هر ریشه یک کارت، زیردسته‌هاش به‌صورت چیپ زیرش.
   از ستون‌بندی CSS (به‌جای گرید) استفاده شده تا کارت‌های بدون زیردسته (که
   کوتاه‌ترن) مجبور به هم‌قدی با بلندترین کارتِ همون ردیف نشن. */
.category-groups { column-count: 3; column-gap: var(--space-3); }
.category-group { break-inside: avoid; margin-bottom: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-3); }
.category-group .category-tile { flex-direction: row; justify-content: flex-start; text-align: right; border: none; padding: 0 0 var(--space-2); }
.category-group .category-tile__glyph { width: 40px; height: 40px; font-size: .95rem; flex-shrink: 0; }
.category-group .category-tile__name { font-size: .95rem; font-weight: 700; }
.category-group:not(:has(.category-group__children)) .category-tile { padding-bottom: 0; }
.category-group__children { display: flex; flex-wrap: wrap; gap: 8px; padding-top: var(--space-2); border-top: 1px dashed var(--color-line); }
.category-subchip { font-size: .8rem; font-weight: 600; color: var(--color-ink-soft); padding: 5px 12px; border-radius: 999px; background: var(--color-surface-alt); }
.category-subchip:hover { color: var(--color-primary); }
@media (max-width: 900px) { .category-groups { column-count: 2; } }
@media (max-width: 600px) { .category-groups { column-count: 1; } }

/* ---------- نوار فیلتر و مرتب‌سازی (صفحه‌ی دسته‌بندی) ---------- */
.filter-bar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; background: var(--color-surface);
  border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: var(--space-4);
}
.filter-bar__group { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--color-ink-soft); }
.filter-bar__group label { font-weight: 600; color: var(--color-ink); }
.filter-bar select {
  font-family: inherit; font-size: .86rem; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--color-line);
  background: var(--color-surface); color: var(--color-ink);
}
.filter-bar input[type="range"] { accent-color: var(--color-primary); width: 140px; }
.filter-bar__count { margin-inline-start: auto; font-size: .85rem; color: var(--color-ink-soft); }
.filter-bar input[type="checkbox"] { accent-color: var(--color-primary); width: 16px; height: 16px; }
@media (max-width: 700px) { .filter-bar { gap: var(--space-2); } .filter-bar__count { margin-inline-start: 0; width: 100%; order: -1; } }

/* ---------- جزئیات محصول ---------- */
.product-detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-5); margin: var(--space-4) 0 var(--space-6); align-items: start; }

.product-gallery { display: grid; gap: var(--space-2); }
.product-gallery__main {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1/1;
  background: var(--color-surface-alt); cursor: zoom-in;
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery__zoom {
  position: absolute; inset: 0; background-repeat: no-repeat; background-size: 200%; opacity: 0;
  transition: opacity .15s var(--ease); pointer-events: none;
}
.product-gallery__zoom.is-active { opacity: 1; }
.product-gallery__thumbs { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.product-gallery__thumbs::-webkit-scrollbar { display: none; }
.product-gallery__thumb {
  flex: none; width: 72px; height: 72px; padding: 0; border-radius: var(--radius-sm); overflow: hidden;
  border: 2px solid var(--color-line); background: var(--color-surface); cursor: pointer; transition: border-color .2s var(--ease);
}
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery__thumb.is-active, .product-gallery__thumb:hover { border-color: var(--color-primary); }

.product-detail__title { font-size: var(--fs-xl); font-weight: 800; color: var(--color-ink); margin-bottom: var(--space-2); }
.product-detail__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--fs-xs); color: var(--color-ink-soft); margin-bottom: var(--space-3); }
.product-detail__meta a { color: var(--color-ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.product-detail__meta a:hover { color: var(--color-primary); }
.product-detail__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; row-gap: 4px; margin-bottom: var(--space-2); font-size: 1.05rem; }
.product-detail__price .price { font-size: 1.5rem; line-height: 1.2; }
.product-detail__short-desc { color: var(--color-ink-soft); font-size: var(--fs-sm); line-height: 1.8; margin: var(--space-2) 0 var(--space-3); }
.qty-row { display: flex; align-items: center; gap: 12px; margin: var(--space-3) 0 var(--space-4); }
.qty-row[hidden] { display: none; }
.qty-input { font-family: inherit; padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-ink); font-size: .95rem; width: 90px; text-align: center; }
.qty-input:focus { border-color: var(--color-primary); }
.qty-stepper { display: flex; align-items: center; border: 1px solid var(--color-line); border-radius: var(--radius-sm); overflow: hidden; }
.qty-stepper__btn { border: none; background: var(--color-surface-alt); color: var(--color-ink); width: 38px; height: 44px; font-size: 1.1rem; cursor: pointer; transition: background .15s var(--ease); }
.qty-stepper__btn:hover { background: var(--color-surface-warm); color: var(--color-accent-dark); }
.qty-stepper__input { border: none; border-radius: 0; width: 54px; }
.qty-stepper__input:focus { border-color: transparent; }
.product-detail__share { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); color: var(--color-ink-soft); }
.product-detail__share a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-surface-alt); color: var(--color-ink-soft); transition: background .15s var(--ease), color .15s var(--ease); }
.product-detail__share a:hover { background: var(--color-primary); color: #fff; }
@media (max-width: 800px) { .product-detail { grid-template-columns: 1fr; } }

/* ---------- انتخاب‌گر تنوع (رنگ/سایز/...) ---------- */
.variant-picker { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.variant-group { display: flex; flex-direction: column; gap: 6px; }
.variant-group__label { font-size: var(--fs-xs); font-weight: 700; color: var(--color-ink-soft); }
.variant-group__options { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-pill {
  font-family: inherit; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--color-line);
  background: var(--color-surface); color: var(--color-ink); font-size: .85rem; cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.variant-pill:hover { border-color: var(--color-primary); }
.variant-pill.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.product-detail__variant-note { color: var(--color-danger); font-size: var(--fs-xs); margin-top: -8px; margin-bottom: var(--space-2); }

/* لایت‌باکس ساده برای نمای کامل تصویر محصول (بدون کتابخانه‌ی خارجی) */
.lightbox {
  position: fixed; inset: 0; background: rgba(10,12,10,.9); z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: var(--space-4); cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: var(--radius-md); }
.lightbox__close {
  position: absolute; top: var(--space-3); left: var(--space-3); width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.12); color: #fff; font-size: 1.1rem; cursor: pointer;
}
.lightbox__close:hover { background: rgba(255,255,255,.24); }

/* ---------- محتوای پست/صفحه ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.post-card { display: block; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; }
.post-card:hover { border-color: var(--color-primary); }
.post-card__image { aspect-ratio: 16/10; background: var(--color-surface-alt); overflow: hidden; }
.post-card__image img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 16px; }
.post-card__title { font-weight: 700; margin: 0 0 6px; }
.post-card__excerpt { font-size: .86rem; color: var(--color-ink-soft); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1020px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }

.post-detail { max-width: 760px; margin: var(--space-4) auto var(--space-6); }
.post-detail__cover { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 16/9; object-fit: cover; margin-bottom: var(--space-4); }
.post-detail__title { font-size: var(--fs-xl); font-weight: 800; color: var(--color-ink); margin-bottom: 8px; }
.post-detail__meta { color: var(--color-ink-soft); font-size: .88rem; margin-bottom: var(--space-4); }
.post-detail__content { line-height: 2; }
.post-detail__content img { border-radius: var(--radius-md); margin: var(--space-3) 0; }

.post-detail__content h1 { display: none; }
.post-detail__content h2 { font-size: var(--fs-lg); font-weight: 800; color: var(--color-ink); margin: var(--space-5) 0 var(--space-3); scroll-margin-top: calc(var(--header-h) + 16px); }
.post-detail__content h3 { font-size: var(--fs-md); font-weight: 700; color: var(--color-ink); margin: var(--space-4) 0 var(--space-2); scroll-margin-top: calc(var(--header-h) + 16px); }
.post-detail__content p { margin: 0 0 var(--space-3); color: var(--color-ink); }
.post-detail__content ul, .post-detail__content ol { padding-inline-start: 1.4em; margin: 0 0 var(--space-3); }
.post-detail__content li { margin-bottom: 6px; }
.post-detail__content strong { font-weight: 700; color: var(--color-ink); }
.post-detail__content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.post-detail__content a:hover { color: var(--color-primary-dark); }
.post-detail__content hr { border: none; border-top: 1px solid var(--color-line); margin: var(--space-4) 0; }

.article-summary { background: var(--color-surface-alt); border-radius: var(--radius-md); padding: var(--space-3); font-size: var(--fs-sm); color: var(--color-ink-soft); }
.article-summary strong { color: var(--color-ink); }

.article-table-of-contents { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-4); margin: var(--space-4) 0; }
.article-table-of-contents h2 { font-size: var(--fs-md); font-weight: 800; margin: 0 0 var(--space-2); }
.article-table-of-contents-list-level-1 { list-style: none; padding-inline-start: 0; margin: 0; }
.article-table-of-contents-list-level-1 > li { margin-bottom: 8px; font-weight: 600; }
.article-table-of-contents-list-level-2 { list-style: none; padding-inline-start: var(--space-4); margin: 6px 0 0; }
.article-table-of-contents-list-level-2 > li { font-weight: 400; margin-bottom: 4px; }
.article-table-of-contents a { color: var(--color-ink-soft); text-decoration: none; }
.article-table-of-contents a:hover { color: var(--color-primary); }

.schema-faq { margin-top: var(--space-3); }
.schema-faq-section { border-bottom: 1px solid var(--color-line); padding: var(--space-3) 0; }
.schema-faq-section:last-child { border-bottom: none; }
.schema-faq-question { display: block; font-weight: 700; color: var(--color-ink); margin-bottom: 6px; }
.schema-faq-answer { color: var(--color-ink-soft); margin: 0; }


.state-message { text-align: center; color: var(--color-ink-soft); padding: var(--space-6) var(--space-3); font-size: .95rem; }

/* ---------- سبد خرید ---------- */
.cart-list { display: flex; flex-direction: column; }
.cart-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); }
.cart-item__product { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; }
.cart-item__product img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); flex: none; }
.cart-item__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-item__remove { flex: none; margin-inline-start: auto; width: 34px; height: 34px; }
.cart-item__qty { flex: none; }
.cart-item__prices { flex: none; display: flex; align-items: center; gap: 18px; min-width: 220px; justify-content: flex-end; }
.cart-item__unit { color: var(--color-ink-soft); font-size: var(--fs-sm); white-space: nowrap; }
.cart-item__total { font-weight: 700; white-space: nowrap; }
@media (max-width: 700px) {
  .cart-item__product { flex: 1 1 100%; }
  .cart-item__prices { flex: 1 1 auto; min-width: 0; margin-inline-start: 0; justify-content: space-between; }
}
.skeleton { background: linear-gradient(100deg, var(--color-surface-alt) 30%, #E4E9E2 50%, var(--color-surface-alt) 70%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-md); }
@keyframes shimmer { to { background-position: -200% 0; } }
.pagination .btn { padding: 10px 20px; }

/* ---------- توست تایید افزودن به سبد ---------- */
.toast {
  position: fixed; bottom: 24px; right: 50%; transform: translateX(50%) translateY(10px); z-index: 80;
  background: var(--color-ink); color: #fff; padding: 12px 22px; border-radius: 999px; font-size: .88rem; font-weight: 600;
  opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none; white-space: nowrap;
}
.toast.is-visible { opacity: 1; transform: translateX(50%) translateY(0); }

/* ---------- فوتر ---------- */
.site-footer { background: var(--color-primary); color: #EAF1EC; margin-top: var(--space-6); }
.tile-strip { height: 4px; background: var(--color-accent); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-4); padding: var(--space-6) var(--space-4) var(--space-4); }
.site-footer h3 { font-size: .95rem; font-weight: 700; margin-bottom: var(--space-3); color: #fff; }
.site-footer p { color: #C7D6CC; font-size: .88rem; line-height: 1.9; }
.site-footer__links { display: flex; flex-direction: column; gap: 10px; }
.site-footer__links a, .site-footer__links span { color: #C7D6CC; font-size: .88rem; }
.site-footer__links a:hover { color: var(--color-accent); }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.14); padding: var(--space-3) var(--space-4); text-align: center; font-size: .8rem; color: #A9C1B1; }
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }

/* ---------- نوار پایین موبایل ---------- */
.bottom-nav { display: none; }
@media (max-width: 760px) {
  .bottom-nav { display: block; position: fixed; bottom: 0; right: 0; left: 0; z-index: 40; height: var(--bottom-nav-h); background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-top: 1px solid var(--color-line); }
  .bottom-nav__list { display: flex; height: 100%; }
  .bottom-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: .68rem; color: var(--color-ink-soft); font-weight: 600; }
  .bottom-nav__item.is-active { color: var(--color-primary); }
  .bottom-nav__item--raised .bottom-nav__fab { position: relative; top: -16px; width: 48px; height: 48px; flex-shrink: 0; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lift); }
  .bottom-nav__badge { position: absolute; top: -2px; left: -2px; }
  body { padding-bottom: var(--bottom-nav-h); }
}

/* ---------- پاپ‌آپ جستجو ---------- */
.search-modal { position: fixed; inset: 0; z-index: 60; background: rgba(20,23,20,.5); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.search-modal[hidden] { display: none; }
.search-modal__box { position: relative; width: min(560px, 92vw); background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-lift); }
.search-modal__close { position: absolute; top: 14px; left: 14px; background: transparent; border: none; color: var(--color-ink-soft); cursor: pointer; }
.search-modal__form { display: flex; align-items: center; gap: 10px; border: 1px solid var(--color-line); border-radius: 999px; padding: 6px 6px 6px 18px; }
.search-modal__icon { color: var(--color-ink-soft); flex: none; }
.search-modal__form input { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 1rem; padding: 10px 0; outline: none; }
.search-modal__form .btn { padding: 10px 20px; }

/* ---------- فرم‌های عمومی (پروفایل/آدرس/تسویه‌حساب) ---------- */
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: .82rem; font-weight: 600; color: var(--color-ink-soft); }
.form-field input, .form-field select, .form-field textarea {
  font-family: inherit; width: 100%; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-ink);
  font-size: .95rem; text-align: right;
}
.form-field select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236B7169'><path d='M5.5 7.5l4.5 4.5 4.5-4.5z'/></svg>"); background-repeat: no-repeat; background-position: left 12px center; }
.form-field textarea { resize: vertical; min-height: 84px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--color-primary); outline: none; }
.form-field input:disabled, .form-field select:disabled { background: var(--color-surface-alt); color: var(--color-ink-soft); }
.form-grid { display: grid; gap: 14px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-error { color: var(--color-danger); font-size: .85rem; min-height: 1.2em; }
.form-hint { color: var(--color-ink-soft); font-size: .8rem; }

.panel { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-4); }
.panel + .panel { margin-top: var(--space-4); }
.panel__title { font-weight: 800; font-size: 1.05rem; margin: 0 0 var(--space-3); }

/* ---------- جدول سفارش‌ها (لیست سفارش‌ها + جزئیات سفارش) ---------- */
.order-table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; }
.order-table th, .order-table td { padding: 10px 8px; text-align: right; font-size: var(--fs-sm); }
.order-table thead tr { border-bottom: 1px solid var(--color-line); }
.order-table tbody tr { border-bottom: 1px solid var(--color-line); }
.order-table td:first-child, .order-table th:first-child { padding-right: 0; }
@media (max-width: 640px) {
  .order-table thead { display: none; }
  .order-table, .order-table tbody, .order-table tr, .order-table td { display: block; width: 100%; }
  .order-table tr { border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 10px; }
  .order-table td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border: none; text-align: left; }
  .order-table td::before { content: attr(data-label); color: var(--color-ink-soft); font-weight: 600; font-size: var(--fs-xs); }
}

/* ---------- مراحل وضعیت سفارش ---------- */
.order-stepper { display: flex; align-items: flex-start; margin: var(--space-4) 0; overflow-x: auto; padding-bottom: 4px; }
.order-stepper__step { flex: 1; min-width: 74px; text-align: center; }
.order-stepper__dot { width: 22px; height: 22px; border-radius: 50%; margin: 0 auto 6px; background: var(--color-line); }
.order-stepper__dot.is-done { background: var(--color-primary); }
.order-stepper__label { font-size: var(--fs-xs); color: var(--color-ink-soft); white-space: nowrap; }
.order-stepper__label.is-done { color: var(--color-primary); font-weight: 700; }
.order-stepper__line { flex: 1; height: 2px; background: var(--color-line); margin-top: 11px; min-width: 14px; }
@media (max-width: 640px) { .order-stepper__step { min-width: 62px; } .order-stepper__label { font-size: .68rem; } }

/* ---------- تاریخچه وضعیت سفارش ---------- */
.order-history { display: grid; gap: 8px; margin-top: 12px; }
.order-history__item { border-right: 2px solid var(--color-primary); padding-right: 12px; }
.order-history__time { font-size: var(--fs-xs); color: var(--color-ink-soft); margin-top: 2px; }
.account-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: var(--space-4); }
.account-grid .panel { max-width: none; margin-top: 0; }
@media (max-width: 860px) { .account-grid { grid-template-columns: 1fr; } }
.account-tabs { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-line); }
.account-tabs a { position: relative; padding: 12px 2px; font-size: var(--fs-sm); font-weight: 600; color: var(--color-ink-soft); transition: color .18s ease; }
.account-tabs a:hover { color: var(--color-primary); }
.account-tabs a.is-active { color: var(--color-primary); font-weight: 700; }
.account-tabs a.is-active::after { content: ""; position: absolute; right: 0; left: 0; bottom: -1px; height: 2px; background: var(--color-accent); border-radius: 2px; }
.account-tabs__logout { margin-inline-start: auto; color: var(--color-ink-soft); }
.account-tabs__logout:hover { color: var(--color-danger); }

/* ---------- کارت آدرس ---------- */
.address-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: var(--space-3); background: var(--color-surface); transition: border-color .18s ease; }
.address-card:hover { border-color: var(--color-primary); }
.address-card strong { font-weight: 700; }
.address-card p { margin: 4px 0 0; color: var(--color-ink-soft); font-size: var(--fs-xs); }
.address-card .icon-btn { width: 34px; height: 34px; flex-shrink: 0; color: var(--color-ink-soft); }
.address-card .icon-btn:hover { color: var(--color-danger); background: var(--color-surface-warm); }

/* ---------- تسویه حساب ---------- */
.checkout-layout { display: grid; grid-template-columns: 1.35fr .9fr; gap: var(--space-4); align-items: start; }
.checkout-aside { position: sticky; top: calc(var(--header-h) + 16px); }
@media (max-width: 900px) { .checkout-layout { grid-template-columns: 1fr; } .checkout-aside { position: static; } }

.address-option {
  display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--color-line);
  border-radius: var(--radius-md); padding: 14px; cursor: pointer; transition: border-color .15s ease, background .15s ease;
  user-select: none;
}
.address-option:hover { border-color: var(--color-primary); }
.address-option.is-selected { border-color: var(--color-primary); background: var(--color-surface-alt); }
.address-option input[type="radio"] { margin-top: 3px; accent-color: var(--color-primary); flex: none; }
.address-option__body { flex: 1; font-size: .9rem; line-height: 1.9; }
.address-option__name { font-weight: 700; }
.address-option__meta { color: var(--color-ink-soft); }
.address-option--new { justify-content: center; align-items: center; color: var(--color-primary); font-weight: 700; }

.payment-option {
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--color-line);
  border-radius: var(--radius-md); padding: 14px; cursor: pointer; margin-bottom: 10px;
}
.payment-option.is-selected { border-color: var(--color-primary); background: var(--color-surface-alt); }
.payment-option input[type="radio"] { accent-color: var(--color-primary); }

.summary-row { display: flex; justify-content: space-between; font-size: .92rem; margin-bottom: 8px; color: var(--color-ink-soft); }
.summary-row--total { color: var(--color-ink); font-weight: 800; font-size: 1.05rem; border-top: 1px solid var(--color-line); margin-top: 10px; padding-top: 12px; }

/* ---------- OTP ---------- */
.otp-boxes { display: flex; gap: 8px; justify-content: center; direction: ltr; }
.otp-box {
  width: 46px; height: 54px; text-align: center; font-size: 1.3rem; font-weight: 700;
  border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface);
  color: var(--color-ink); font-family: inherit;
}
.otp-box:focus { border-color: var(--color-primary); outline: none; }
.auth-card { max-width: 400px; margin: var(--space-6) auto; text-align: center; }
.auth-card h2 { margin-bottom: var(--space-4); }
.btn-block { width: 100%; }
.btn-link { background: transparent; border-color: transparent; color: var(--color-ink-soft); }
.btn:disabled { opacity: .55; cursor: not-allowed; }