/*
 * Pulse — base + component kit (Phase 0 hand-authored).
 * Tailwind replaces/augments this in Phase 1; the tokens stay the source
 * of truth either way. Kept small to honor the <100KB homepage budget.
 */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--c-text);
  background: var(--c-bg);
  direction: rtl;
}

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* --- Minimal header (sticky, single row) ------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 1000; color: #fff;
  /* Premium "aurora" background: cyan glow top-end, blue glow bottom-start. */
  background:
    radial-gradient(135% 150% at 92% -30%, rgba(6, 182, 212, 0.30), transparent 55%),
    radial-gradient(125% 160% at 4% 130%, rgba(37, 99, 235, 0.34), transparent 55%),
    linear-gradient(135deg, #0b1220 0%, #16264f 52%, #0b1220 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  /* Curved base — the header reads as a distinct "signal panel" over the page. */
  border-end-start-radius: 26px; border-end-end-radius: 26px;
  box-shadow: 0 10px 30px rgba(11, 18, 32, 0.32);
}
/* Pulse signature: a signal trace sweeping along the header's curved base. */
.hdr::after {
  content: ""; position: absolute; inset-inline: 30px; bottom: -1px; height: 2px;
  border-radius: 3px; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, transparent, #22d3ee 22%, #60a5fa 50%, #22d3ee 78%, transparent);
  background-size: 220% 100%; animation: hdrPulse 3.6s linear infinite; opacity: 0.9;
}
@keyframes hdrPulse { from { background-position: 220% 0; } to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .hdr::after { animation: none; } }
.hdr__row { display: flex; align-items: center; gap: 1.25rem; min-height: 100px; }
.hdr__logo { display: flex; align-items: center; flex-shrink: 0; }
.hdr__logo:hover { text-decoration: none; }
/* Colored logo rendered as a clean white silhouette on the dark header. */
.hdr__logo img { height: 88px; width: auto; max-width: 420px; object-fit: contain; display: block; }

/* Search: rounded field on the dark header */
.hdr__search { position: relative; flex: 1; max-width: 620px; display: flex; align-items: center;
  padding-inline-start: 6px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 15px; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; }
.hdr__search:hover { border-color: rgba(255, 255, 255, 0.24); }
.hdr__search:focus-within { background: #fff; border-color: transparent; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.22); }
.hdr__search input { flex: 1; font: inherit; font-size: var(--fs-sm); padding: 0.72rem 1rem;
  border: 0; background: transparent; outline: none; color: #fff; }
.hdr__search:focus-within input { color: var(--c-text); }
.hdr__search input::placeholder { color: var(--c-text-subtle); }
.hdr__search button { display: inline-flex; align-items: center; gap: 0.4rem; height: 44px; padding-inline: 16px;
  margin-inline-end: 4px; border: 0; background: var(--gradient-brand); color: #fff; cursor: pointer;
  border-radius: 11px; font: inherit; font-weight: 700; font-size: var(--fs-sm);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.34); transition: filter 0.15s ease, transform 0.15s ease; }
.hdr__search button:hover { filter: brightness(1.07); transform: translateY(-1px); }
.hdr__search button .hdr__search-label { display: inline; }
@media (max-width: 680px) { .hdr__search button .hdr__search-label { display: none; } }
.hdr__search button svg { width: 19px; height: 19px; }
.hdr__suggest { position: absolute; top: calc(100% + 8px); inset-inline: 0; z-index: 40; }

/* Actions: minimal icon + label */
.hdr__actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.hdr__actions > a { display: inline-flex; align-items: center; gap: 0.45rem; position: relative;
  color: #e2e8f0; font-size: var(--fs-sm); padding: 0.5rem 0.7rem; border-radius: var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease; }
.hdr__actions > a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; }
.hdr__actions svg { width: 22px; height: 22px; }
.hdr__badge { position: absolute; inset-block-start: 0.1rem; inset-inline-start: 0.2rem;
  background: var(--c-accent); color: #04121a; font-size: 0.62rem; font-weight: 800;
  min-width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; padding: 0 4px; }
.hdr__badge[hidden] { display: none; }   /* `display:grid` above would otherwise beat the hidden attr */

/* Suggest dropdown */
.suggest { list-style: none; margin: 0; padding: 0.35rem; background: var(--c-card);
  border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-soft); color: var(--c-text); }
.suggest li a { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border-radius: var(--radius-sm); }
.suggest li a:hover { background: var(--c-bg); text-decoration: none; }
.suggest img { width: 38px; height: 38px; object-fit: contain; }
.suggest__name { flex: 1; font-size: var(--fs-sm); }
.suggest__price { font-size: var(--fs-xs); color: var(--c-text-muted); }
.suggest--empty { padding: 0.8rem; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); color: var(--c-text-muted); font-size: var(--fs-sm); }

/* --- Hamburger + mobile slide-in nav drawer (shown on mobile only) ----- */
.hdr__burger { display: none; background: none; border: 0; color: #fff; cursor: pointer; padding: 0.25rem; }
.hdr__burger svg { width: 26px; height: 26px; }
.hdr__spacer { display: none; }
.mnav, .mnav-backdrop { display: none; }
.mnav-backdrop {
  position: fixed; inset: 0; z-index: 190; background: rgba(2, 6, 23, 0.55);
  opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0.28s;
}
.mnav-backdrop--open { opacity: 1; visibility: visible; }
.mnav {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 200; width: min(86vw, 340px);
  background: var(--c-surface-dark); color: #e2e8f0; flex-direction: column; overflow-y: auto;
  transform: translateX(110%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.4);
}
.mnav--open { transform: translateX(0); }
.mnav__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.mnav__logo { height: 46px; width: auto; }
.mnav__close { background: none; border: 0; color: #cbd5e1; font-size: 1.9rem; line-height: 1; cursor: pointer; padding: 0 0.3rem; }
.mnav__cats { padding: 0.3rem 0; }
.mnav__cathead {
  display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 0.5rem;
  background: none; border: 0; color: #e2e8f0; font: inherit; font-size: var(--fs-sm); font-weight: 600;
  padding: 0.85rem 1.1rem; cursor: pointer; text-align: start; text-decoration: none;
}
.mnav__cathead:hover { text-decoration: none; background: rgba(255, 255, 255, 0.04); }
.mnav__chev { width: 18px; height: 18px; transition: transform 0.15s ease; color: #94a3b8; flex-shrink: 0; }
.mnav__chev--open { transform: rotate(180deg); }
.mnav__sub { display: flex; flex-direction: column; padding: 0 1.6rem 0.6rem; gap: 0.1rem; }
.mnav__sub a { color: #cbd5e1; font-size: var(--fs-sm); padding: 0.5rem 0; }
.mnav__sub a:hover { color: #fff; text-decoration: none; }
.mnav__links { display: flex; flex-direction: column; padding: 0.5rem 1.1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.mnav__links a { color: #cbd5e1; font-size: var(--fs-sm); padding: 0.6rem 0; }
.mnav__links a:hover { color: #fff; text-decoration: none; }
.mnav__phone {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0.5rem 1.1rem 1.2rem;
  padding: 0.7rem 1rem; background: var(--gradient-brand); color: #fff; border-radius: var(--radius-sm); font-weight: 600;
}
.mnav__phone svg { width: 18px; height: 18px; }
.mnav__phone:hover { text-decoration: none; filter: brightness(1.05); }
.mnav__phones { display: flex; flex-direction: column; padding: 0.5rem 1.1rem 1.2rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.mnav__phones-h { font-size: var(--fs-xs); color: #94a3b8; margin: 0.3rem 0 0.4rem; }
.mnav__phonerow { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; color: #e2e8f0; padding: 0.55rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: var(--fs-sm); }
.mnav__phonerow:last-child { border-bottom: 0; }
.mnav__phonerow:hover { text-decoration: none; color: var(--c-accent); }
.mnav__phonerow > span:last-child { color: #cbd5e1; font-weight: 600; }

/* --- Category nav: "all categories" flyout + quick links --------------- */
.catnav { background: var(--c-surface-dark); border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-end-start-radius: 26px; border-end-end-radius: 26px; }
.catnav__row { display: flex; align-items: stretch; gap: 0.5rem; }

/* All-categories trigger + flyout panel */
.catmenu { position: relative; flex-shrink: 0; }
.catmenu__trigger {
  display: inline-flex; align-items: center; gap: 0.5rem; align-self: center;
  background: var(--gradient-brand); color: #fff; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; font-size: var(--fs-sm); padding: 0.62rem 1.15rem;
  border-radius: 12px; margin-block: 7px;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.32); transition: filter 0.15s ease, transform 0.15s ease;
}
.catmenu__trigger:hover { filter: brightness(1.07); transform: translateY(-1px); }
.catmenu__trigger svg { width: 18px; height: 18px; }
.catmenu__chev { transition: transform 0.15s ease; }
.catmenu__trigger[aria-expanded="true"] .catmenu__chev { transform: rotate(180deg); }
/* Backdrop + sheet grabber show on mobile only (see media query). */
.catmenu__backdrop { display: none; }
.catmenu__sheet-bar { display: none; }
.catmenu__panel {
  position: absolute; top: 100%; inset-inline-start: 0; z-index: 90;
  width: min(880px, 92vw); background: var(--c-card); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-soft); padding: 1.25rem;
}
.catmenu__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.25rem 1.5rem; }
.catcol__head { display: block; font-weight: 700; color: var(--c-text); padding-bottom: 0.4rem; margin-bottom: 0.4rem; border-bottom: 2px solid var(--c-accent); }
.catcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.catcol li a { color: var(--c-text-muted); font-size: var(--fs-sm); padding: 0.2rem 0; display: block; }
.catcol li a:hover { color: var(--c-primary); text-decoration: none; }

/* Spacer + support phone + magazine (no duplicated category links) */
.catnav__spacer { flex: 1; }
.catnav__phone, .catnav__blog { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); white-space: nowrap; padding-inline: 0.9rem; }
.catnav__phone svg, .catnav__blog svg { width: 18px; height: 18px; }
.catnav__phone { color: #cbd5e1; }
.catnav__phone:hover { color: #fff; text-decoration: none; }
.catnav__blog { color: var(--c-accent); }
.catnav__blog:hover { text-decoration: none; filter: brightness(1.2); }

@media (max-width: 820px) {
  body { overflow-x: hidden; }
  /* Minimal mobile header: burger · CENTRED logo · balancing spacer; search on its
     own row. The burger and an equal-width spacer flank the flex:1 logo so it sits
     exactly in the middle of the header. */
  .hdr__burger { display: inline-grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; }
  .hdr__spacer { display: block; flex: 0 0 40px; }
  .hdr__row { flex-wrap: wrap; min-height: 0; height: auto; padding-block: 0.5rem; gap: 0.6rem; align-items: center; }
  .hdr__logo { flex: 1 1 0; justify-content: center; min-width: 0; }
  .hdr__logo img { height: 60px; }
  .hdr__search { order: 3; flex-basis: 100%; max-width: none; }
  .hdr__actions { gap: 0.1rem; }
  .hdr__actions > a span { display: none; }
  .hdr__actions > a { padding: 0.45rem; }

  /* The desktop category bar is replaced by the slide-in drawer on mobile */
  .catnav { display: none; }
  .mnav { display: flex; }
  .mnav-backdrop { display: block; }
}

@media (max-width: 420px) {
  .hdr__logo img { height: 54px; }
}

/* --- Address form (grid + cascade + default checkbox) ------------------ */
.addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1rem; margin-block: 0.75rem; }
.addr-field { display: flex; flex-direction: column; gap: 0.3rem; }
.addr-field--full { grid-column: 1 / -1; }
.addr-field label { font-size: var(--fs-sm); color: var(--c-text-muted); }
.addr-field input, .addr-field select, .addr-field textarea {
  width: 100%; font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--c-border);
  border-radius: var(--radius-sm); background: #fff; color: var(--c-text);
}
.addr-field input:focus, .addr-field select:focus, .addr-field textarea:focus {
  outline: none; border-color: var(--c-primary);
}
.addr-default { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); cursor: pointer; }
.addr-default input { width: 18px; height: 18px; }
@media (max-width: 600px) { .addr-grid { grid-template-columns: 1fr; } }

/* --- Hero (dark, gradient accent, subtle mesh) ------------------------- */
.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  padding-block: 5rem;
  /* Beautiful cohesive deep-blue palette: soft blue glow top-start, cyan
     bottom-end, over a rich navy gradient (no flat black, no clashing purple). */
  background:
    radial-gradient(85% 80% at 12% 0%, rgba(59, 130, 246, 0.24), transparent 58%),
    radial-gradient(80% 85% at 100% 100%, rgba(34, 211, 238, 0.16), transparent 55%),
    linear-gradient(165deg, #0a1734 0%, #10224c 48%, #0a1730 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(37, 99, 235, 0.18) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.5;
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  align-items: center;
  gap: 2rem;
}
.hero__copy { max-width: 640px; }
.hero__art { display: grid; place-items: center; }
.hero__art img {
  width: 100%; max-width: 420px; filter: drop-shadow(0 12px 30px rgba(6, 182, 212, 0.25));
  animation: floaty 5s ease-in-out infinite;
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero__badge {
  display: inline-block;
  font-size: var(--fs-sm);
  padding: 0.3rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  color: var(--c-accent);
  margin-bottom: 1.25rem;
}
.hero h1 {
  font-size: clamp(2.2rem, 1.2rem + 4.2vw, 3.8rem);
  line-height: 1.15;
  margin: 0 0 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.hero h1 .grad {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p { color: #cbd5e1; font-size: var(--fs-lg); margin: 0 0 2rem; }
.hero__search { display: flex; align-items: center; max-width: 560px; margin: 0 0 1.5rem; background: #fff; border-radius: 999px; padding: 0.4rem; padding-inline-start: 1.4rem; box-shadow: 0 14px 34px rgba(2, 24, 64, 0.24); }
.hero__search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: var(--fs-base); color: var(--c-text); outline: none; }
.hero__search input::placeholder { color: var(--c-text-subtle); }
.hero__search button { flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--gradient-brand); color: #fff; cursor: pointer; display: grid; place-items: center; transition: transform 0.15s ease, filter 0.15s ease; }
.hero__search button:hover { transform: scale(1.06); filter: brightness(1.05); }
.hero__search button svg { width: 21px; height: 21px; }
.hero__quick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.hero__quick-label { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.82); }
.hero__chip { font-size: var(--fs-sm); padding: 0.32rem 0.9rem; border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); transition: background 0.15s ease; }
.hero__chip:hover { background: rgba(255, 255, 255, 0.3); color: #fff; text-decoration: none; }

@media (max-width: 760px) {
  .hero { padding-block: 3rem; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { display: none; }
}

/* --- Trust badges ------------------------------------------------------ */
.trust { background: var(--c-card); border-bottom: 1px solid var(--c-border); }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-block: 1.25rem; }
.trust__item { display: flex; flex-direction: column; gap: 0.2rem; padding-inline-start: 0.75rem; border-inline-start: 3px solid var(--c-accent); }
.trust__item b { font-size: var(--fs-sm); }
.trust__item span { color: var(--c-text-muted); font-size: var(--fs-xs); }
@media (max-width: 760px) { .trust__grid { grid-template-columns: 1fr 1fr; } }

/* --- Section heads, category tiles, brand strip ------------------------ */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--c-border); padding-bottom: 0.6rem; }
.section-head h2 { margin: 0; font-size: var(--fs-xl); position: relative; padding-inline-start: 0.8rem; }
.section-head h2::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.2em; bottom: 0.2em; width: 4px; border-radius: 4px; background: var(--gradient-brand); }
.section-head__more { font-size: var(--fs-sm); color: var(--c-primary); white-space: nowrap; }


/* Branded product placeholder (no photo) */
.pcard__ph { width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(135deg, #eef4ff, #e6fbff); color: #94a3b8; }
.pcard__ph svg { width: 56px; height: 56px; }

/* Amazing offers (پیشنهاد شگفت‌انگیز) — compact band */
.amazing { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; }
.amazing__badge { font-weight: 800; font-size: var(--fs-base); }
.amazing__timer { display: inline-flex; align-items: center; gap: 0.4rem; margin-inline-start: auto; background: rgba(0,0,0,0.2); border-radius: 999px; padding: 0.28rem 0.8rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.05em; }
.amazing__timer svg { width: 18px; height: 18px; }
.amazing__lead .btn { padding: 0.3rem 0.9rem; border-color: rgba(255,255,255,0.6); font-size: var(--fs-sm); }
.amazing__rail { display: flex; gap: 0.75rem; overflow-x: auto; padding: 0.85rem 1rem; scrollbar-width: thin;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain; scroll-padding-inline: 1rem; }
.amazing__rail::-webkit-scrollbar { height: 8px; }
.amazing__rail::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 999px; }
.amazing__item { flex: 0 0 170px; scroll-snap-align: start; }
.amazing__item .pcard { height: 100%; }
.amazing__item .pcard__media { aspect-ratio: 4 / 3; }
/* Category chip on cards (shown when include passes show_category) */
.pcard__cat { display: inline-block; font-size: var(--fs-xs); color: var(--c-text-muted); }

/* Floating contact button (FAB) */
.fab { position: fixed; inset-block-end: 1.25rem; inset-inline-start: 1.25rem; z-index: 80; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.fab__btn { position: relative; height: 60px; padding-inline: 0.5rem; min-width: 60px; border-radius: 999px; border: 0; cursor: pointer; color: #fff; background: var(--gradient-brand); box-shadow: 0 10px 26px rgba(37,99,235,0.45); display: inline-flex; align-items: center; gap: 0.5rem; transition: transform 0.15s ease; }
.fab__btn:hover { transform: scale(1.04); }
/* Pulsing ring to draw attention. */
.fab__btn::before { content: ""; position: absolute; inset: 0; border-radius: 999px; box-shadow: 0 0 0 0 rgba(6,182,212,0.5); animation: fabpulse 2s infinite; }
@keyframes fabpulse { 0% { box-shadow: 0 0 0 0 rgba(6,182,212,0.45); } 70% { box-shadow: 0 0 0 14px rgba(6,182,212,0); } 100% { box-shadow: 0 0 0 0 rgba(6,182,212,0); } }
.fab__label { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; padding-inline: 0.4rem 0.6rem; }
.fab__btn .fab__ic-chat, .fab__btn .fab__ic-close { width: 30px; height: 30px; flex-shrink: 0; transition: opacity 0.15s ease, transform 0.2s ease; }
.fab__btn--open { padding-inline: 0; width: 56px; min-width: 56px; justify-content: center; }
.fab__btn--open::before { animation: none; }
.fab__ic-close { position: absolute; inset-inline-start: 13px; opacity: 0; transform: rotate(-90deg); }
.fab__btn--open .fab__ic-chat { opacity: 0; transform: rotate(90deg); }
.fab__btn--open .fab__ic-close { opacity: 1; transform: rotate(0); }
.fab__ic-close { opacity: 0; transform: rotate(-90deg); }
.fab__btn--open .fab__ic-chat { opacity: 0; transform: rotate(90deg); }
.fab__btn--open .fab__ic-close { opacity: 1; transform: rotate(0); }
.fab__menu { display: flex; flex-direction: column; gap: 0.5rem; }
.fab__item { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--c-card); color: var(--c-text); border: 1px solid var(--c-border); border-radius: 999px; padding: 0.45rem 0.85rem; box-shadow: var(--shadow-soft); font-size: var(--fs-sm); font-weight: 600; transition: transform 0.15s ease; }
.fab__item:hover { text-decoration: none; transform: translateX(-3px); }
.fab__item svg { width: 28px; height: 28px; padding: 5px; border-radius: 50%; color: #fff; }
.fab__item--bale svg { background: #0ea5e9; }
.fab__item--phone svg { background: #10b981; }
.fab__item--whatsapp svg { background: #25d366; }
.fab__item--telegram svg { background: #2563eb; }
.fab__item--instagram svg { background: linear-gradient(135deg, #f58529, #dd2a7b); }
.fab__item--email svg { background: #64748b; }
/* Mobile: icon-only circle so the «ارتباط با ما» label can't overflow the box */
@media (max-width: 820px) {
  .fab__label { display: none; }
  .fab__btn { width: 56px; min-width: 56px; height: 56px; padding: 0; justify-content: center; }
  .fab__btn .fab__ic-chat, .fab__btn .fab__ic-close { width: 28px; height: 28px; }
  .fab__ic-close { inset-inline-start: 14px; }
}



/* ── Brands carousel — manual, arrow-controlled (customer scrolls) ────── */
.brands-showcase { padding-block: 2.6rem; }
.section-head--brands { text-align: center; margin-bottom: 1.7rem; }
.section-head--brands h2 { margin: 0 0 0.35rem; }
.section-sub { color: var(--c-text-muted); font-size: 0.95rem; margin: 0; }
.brand-carousel { direction: ltr; display: flex; align-items: center; gap: 0.6rem; }
.brand-viewport {
  flex: 1 1 auto; min-width: 0;
  display: flex; gap: 1.1rem;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
  padding: 0.7rem 0.35rem;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.brand-viewport::-webkit-scrollbar { display: none; }
.brand-nav {
  flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--c-border);
  box-shadow: 0 6px 20px rgba(16, 40, 80, 0.1);
  color: var(--c-ink); cursor: pointer;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s, border-color .2s;
}
.brand-nav svg { width: 22px; height: 22px; }
.brand-nav:hover { background: var(--gradient-brand); color: #fff; border-color: transparent; transform: scale(1.09); box-shadow: 0 12px 26px rgba(11, 59, 140, 0.28); }
.brand-nav:active { transform: scale(0.95); }
@media (max-width: 640px) { .brand-nav { display: none; } }
.bcard {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: 196px; height: 156px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.1rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--c-border);
  box-shadow: 0 6px 18px rgba(16, 40, 80, 0.06);
  color: var(--c-text);
  text-decoration: none;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, border-color .28s;
}
.bcard:hover {
  transform: translateY(-7px);
  border-color: var(--c-primary);
  box-shadow: 0 18px 36px rgba(11, 59, 140, 0.18);
}
/* Fixed box → every logo is fully visible (contain), large, never cut. */
.bcard__logo-wrap { width: 100%; height: 82px; display: grid; place-items: center; }
.bcard__logo { max-width: 158px; max-height: 80px; width: auto; height: auto; object-fit: contain; display: block; }
.bcard__name {
  font-weight: 800; font-size: 0.92rem;
  max-width: 172px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--c-text);
}
/* Clean name tile for brands without a logo (replaces letter monograms). */
.bcard__textonly {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  padding: 0 0.5rem; line-height: 1.35;
  font-weight: 800; font-size: 1.12rem; text-align: center;
  color: var(--c-primary);
}
@media (max-width: 600px) {
  .bcard { width: 150px; height: 130px; margin-inline-end: 0.8rem; }
  .bcard__logo-wrap { height: 64px; }
  .bcard__logo { max-height: 62px; max-width: 122px; }
  .bcard__textonly { font-size: 0.98rem; }
}

/* ── FAB urgent (quick-call) item ─────────────────────────────────────── */
.fab__item--urgent { background: var(--gradient-brand); color: #fff; border: none; cursor: pointer;
  font: inherit; font-weight: 800; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4); }
.fab__item--urgent svg { stroke: #fff; }
.fab__item--urgent:hover { filter: brightness(1.07); }



/* Why-us / guarantees */
.whyus { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.whyus__card { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.5rem 1.25rem; text-align: center; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.whyus__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.whyus__ic { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(37,99,235,0.08); color: var(--c-primary); margin-bottom: 0.8rem; transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease; }
.whyus__card:hover .whyus__ic { background: var(--gradient-brand); color: #fff; transform: scale(1.12) rotate(-6deg); }
.whyus__ic svg { width: 30px; height: 30px; }
.whyus__card b { display: block; margin-bottom: 0.3rem; }
.whyus__card p { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
@media (max-width: 760px) { .whyus { grid-template-columns: 1fr 1fr; } }

/* --- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: inherit;
  font-weight: 600;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--gradient-brand); color: #fff; box-shadow: var(--shadow-soft); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.25); }
/* Outline button for LIGHT backgrounds (e.g. «اطلاع‌رسانی موجود شدن»). */
.btn--line { background: #fff; color: var(--c-primary); border-color: var(--c-border); }
.btn--line:hover { border-color: var(--c-primary); background: #f8fbff; }
.btn--sm { padding: 0.35rem 0.7rem; font-size: 0.8rem; }
/* Trust signals near the buy box (product page). */
.trust-strip { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin: 1rem 0 0; padding: 0.85rem 0 0; border-top: 1px solid var(--c-border); }
.trust-strip li { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); color: var(--c-text-muted); }
.trust-strip svg { width: 18px; height: 18px; color: var(--c-primary); flex: none; }
/* Staff-only inline edit controls on the product page (link to Django admin). */
.pdp__staffimg { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-top: 0.7rem; }
.pdp__editbtn { display: inline-block; margin: 0.3rem 0 0.6rem; padding: 0.4rem 0.8rem; border-radius: 8px;
  background: #fff7ed; border: 1px dashed #f59e0b; color: #b45309; font-size: 0.8rem; font-weight: 700; text-decoration: none; }
.pdp__editbtn:hover { background: #fef3c7; }

/* --- Cards & chips ----------------------------------------------------- */
.section { padding-block: 3rem; }
.section h2 { font-size: var(--fs-xl); margin: 0 0 1.5rem; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.25rem;
}
.card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.card h3 { margin: 0 0 0.5rem; font-size: var(--fs-base); }
.card p { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); }

/* Phones: denser 2-up product/category grids + compact cards */
@media (max-width: 560px) {
  .card-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .card { padding: 0.85rem; }
  .pcard__body { padding: 0.7rem; }
  .pcard__title { font-size: var(--fs-sm); line-height: 1.5; }
  .pcard__foot { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .pcard__price { font-size: var(--fs-sm); }
  .whyus { grid-template-columns: 1fr; }
}

.chip {
  display: inline-block;
  font-size: var(--fs-xs);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: var(--c-primary-700);
  border: 1px solid rgba(37, 99, 235, 0.15);
}

/* Availability pills (3-state) */
.pill { font-size: var(--fs-xs); padding: 0.2rem 0.7rem; border-radius: 999px; font-weight: 600; }
.pill--available { background: rgba(16, 185, 129, 0.12); color: #047857; }
.pill--limited { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.pill--unavailable { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }

/* --- Footer ------------------------------------------------------------ */
.site-footer {
  background: var(--c-ink);
  color: var(--c-text-subtle);
  padding-block: 2.75rem 1.5rem;
  margin-top: 3rem;
  font-size: var(--fs-sm);
  border-top: 3px solid transparent;
  border-image: var(--gradient-brand) 1;
}
.site-footer__social { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.site-footer__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.06); color: #e2e8f0; }
.site-footer__social a:hover { background: var(--gradient-brand); color: #fff; }
.site-footer__social svg { width: 19px; height: 19px; }
.site-footer__contact .site-footer__cell { display: flex; align-items: center; gap: 0.5rem; color: var(--c-text-subtle); padding-block: 0.35rem; line-height: 1.7; }
.site-footer__cell svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--c-accent); }
.site-footer__cell:hover { color: #fff; text-decoration: none; }

/* --- Breadcrumbs ------------------------------------------------------- */
.crumbs { font-size: var(--fs-sm); color: var(--c-text-muted); padding-block: 1rem; }
.crumbs a { color: var(--c-text-muted); }
.crumbs__sep { margin-inline: 0.4rem; color: var(--c-text-subtle); }

/* --- Product card ------------------------------------------------------ */
.pcard {
  display: flex;
  flex-direction: column;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  color: inherit;
}
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); text-decoration: none; }
.pcard__link { display: flex; flex-direction: column; flex: 1; color: inherit; }
.pcard__link:hover { text-decoration: none; color: inherit; }
.pcard__add { padding: 0 0.9rem 0.9rem; }
.pcard__addbtn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.5rem 0.7rem; font: inherit; font-weight: 700; font-size: var(--fs-sm); cursor: pointer;
  color: var(--c-primary); background: var(--c-primary-tint, #eef4ff);
  border: 1px solid var(--c-border); border-radius: var(--radius-sm); transition: background 0.15s ease, color 0.15s ease;
}
.pcard__addbtn:hover { background: var(--gradient-brand); color: #fff; border-color: transparent; }
.pcard__addbtn svg { width: 17px; height: 17px; }
.pcard__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pcard__media img { width: 100%; height: 100%; object-fit: contain; }
.pcard__noimg { color: var(--c-text-subtle); font-size: var(--fs-sm); }
.pcard__off {
  position: absolute; inset-block-start: 0.5rem; inset-inline-start: 0.5rem;
  background: var(--c-warning); color: #3a2300; font-size: var(--fs-xs);
  padding: 0.15rem 0.5rem; border-radius: 999px; font-weight: 800;
}
.pcard__body { padding: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.pcard__brand { font-size: var(--fs-xs); color: var(--c-text-subtle); }
.pcard__title { font-size: var(--fs-sm); margin: 0; line-height: 1.5; min-height: 2.6em; }
/* Mixed Persian + Latin (e.g. «… CAT6 SFTP روکش PVC ۵ متری») needs bidi ISOLATION,
   not `plaintext`. `plaintext` takes each line's direction from its first strong
   character, so anything starting with Latin — every brand name (Legrand, Cisco…),
   and values like «Cat6» or «PVC» — flipped to an LTR line and jumped to the LEFT
   edge while the Persian around it stayed right-aligned. `isolate` keeps the element
   RTL (so alignment is uniform) while still isolating the embedded Latin runs. */
.pcard__title, .pdp__title, .listing__head h1, .suggest__name, .chip,
.pcard__brand, .specs td, .compare td, .compare th { unicode-bidi: isolate; }
.pcard__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pcard__price { font-size: var(--fs-sm); }
.pcard__price del { color: var(--c-text-subtle); font-size: var(--fs-xs); display: block; }

/* --- Listing + facets -------------------------------------------------- */
.listing__head { display: flex; align-items: baseline; gap: 0.75rem; margin-block: 0.5rem 0.25rem; }
.listing__count { color: var(--c-text-subtle); font-size: var(--fs-sm); }
.listing__intro { color: var(--c-text-muted); margin-bottom: 1rem; }
/* Related-category chips on a category page (separate from the filters). */
.subcats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.1rem; }
.subcats__chip {
  display: inline-flex; align-items: center; padding: 0.42rem 0.95rem; font-size: var(--fs-sm); font-weight: 600;
  color: var(--c-text); background: var(--c-card); border: 1px solid var(--c-border); border-radius: 999px;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.subcats__chip:hover { border-color: var(--c-primary); color: var(--c-primary); background: #f8fbff; text-decoration: none; }
.listing { display: grid; grid-template-columns: 250px 1fr; gap: 1.5rem; align-items: start; }
.facets {
  background: var(--c-card); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 1rem; position: sticky; top: 80px;
  /* Stays pinned below the sticky header while the product list scrolls;
     scrolls on its own and doesn't chain the wheel to the list. */
  max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
.facets::-webkit-scrollbar { width: 8px; }
.facets::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 999px; }
.facets__group { padding-block: 0.6rem; border-bottom: 1px solid var(--c-border); }
.facets__group:last-child { border-bottom: 0; }
.facets__group h4 { margin: 0 0 0.5rem; font-size: var(--fs-sm); }
.facets__opt { display: flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); padding-block: 0.15rem; cursor: pointer; }
.facets__price { display: flex; align-items: center; gap: 0.4rem; }
.facets__price input {
  width: 100%; min-width: 0; font: inherit; padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm); border: 1px solid var(--c-border);
  background: var(--c-bg); color: var(--c-text);
}
.facets__price span { color: var(--c-text-muted); font-size: var(--fs-sm); }
.facets__actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.9rem; }
.facets__apply { width: 100%; }
.facets__clear { font-size: var(--fs-sm); color: var(--c-text-muted); text-align: center; }
.facets__clear:hover { color: var(--c-primary); }
/* Mobile-only chrome: hidden on desktop where the panel is a static sidebar. */
.facets__toggle { display: none; }
.facets__head { display: none; }
.facets__backdrop { display: none; }
.listing__toolbar { display: flex; justify-content: flex-start; margin-bottom: 1rem; }
.listing__toolbar select { font: inherit; padding: 0.35rem 0.5rem; border-radius: var(--radius-sm); border: 1px solid var(--c-border); }
.empty { color: var(--c-text-muted); padding: 2rem 0; }

/* --- Pagination -------------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 1.75rem; }
.pagination__num, .pagination__btn {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 0.7rem;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-card);
  color: var(--c-text); font-size: var(--fs-sm); font-weight: 600;
}
.pagination__num:hover, .pagination__btn:hover { border-color: var(--c-primary); color: var(--c-primary); text-decoration: none; }
.pagination__num--cur { background: var(--gradient-brand); color: #fff; border-color: transparent; }
.pagination__gap { padding: 0 0.3rem; color: var(--c-text-muted); }

@media (max-width: 760px) {
  .listing { grid-template-columns: 1fr; }
  /* Filters become an off-canvas sheet that slides in from the right (RTL). */
  .facets__toggle {
    display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 0.8rem;
    padding: 0.55rem 1rem; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
    background: var(--c-card); color: var(--c-text); font: inherit; font-weight: 600; cursor: pointer;
  }
  .facets__head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.6rem; font-weight: 700;
  }
  .facets__close { background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--c-text-muted); }
  .facets {
    position: fixed; inset: 0 0 0 auto; left: auto;
    width: min(86vw, 340px); max-height: 100vh; overflow-y: auto;
    border-radius: 0; z-index: 60; transform: translateX(100%);
    transition: transform 0.25s ease;
  }
  .facets--open { transform: translateX(0); }
  .facets__backdrop {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(2, 6, 23, 0.5); opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .facets__backdrop--open { opacity: 1; pointer-events: auto; }
}

/* --- Order tracking (پیگیری سفارش) ------------------------------------- */
.otrack-wrap { max-width: 920px; margin-block: 1.5rem 2.5rem; }
.otrack-card {
  background: var(--c-card); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 1.5rem 1.5rem 1.75rem; box-shadow: var(--shadow-card);
}
.otrack-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.otrack-kicker { font-size: var(--fs-xs); color: var(--c-text-muted); }
.otrack-code { margin: 0.15rem 0 0; font-size: var(--fs-lg); }
.otrack-pill { font-size: var(--fs-sm); }

.otrack-steps { position: relative; display: flex; justify-content: space-between; margin: 2rem 0 0.5rem; }
.otrack-line {
  position: absolute; top: 23px; inset-inline: 24px; height: 4px;
  background: var(--c-border); border-radius: 999px; overflow: hidden;
}
.otrack-line__fill {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--progress, 0%);
  background: var(--gradient-brand); transition: width 0.5s ease;
}
.ostep { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }
.ostep__dot {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-card); border: 2px solid var(--c-border); color: var(--c-text-subtle);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.ostep__dot svg { width: 22px; height: 22px; }
.ostep--done .ostep__dot { background: var(--gradient-brand); border-color: transparent; color: #fff; }
.ostep--current .ostep__dot { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.16); }
.ostep__label { font-size: var(--fs-xs); color: var(--c-text-muted); text-align: center; }
.ostep--done .ostep__label, .ostep--current .ostep__label { color: var(--c-text); font-weight: 600; }

.otrack-cancelled {
  display: flex; align-items: center; gap: 0.6rem; margin-top: 1.25rem; padding: 0.9rem 1rem;
  background: rgba(239, 68, 68, 0.08); color: #b91c1c; border-radius: var(--radius-sm); font-weight: 600;
}
.otrack-cancelled svg { width: 22px; height: 22px; flex-shrink: 0; }
.otrack-shipping {
  display: flex; align-items: center; gap: 0.55rem; margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px dashed var(--c-border); font-size: var(--fs-sm); color: var(--c-text-muted);
}
.otrack-shipping svg { width: 20px; height: 20px; color: var(--c-primary); }

.otrack-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; margin-top: 1.25rem; }
.otrack-box { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.25rem 1.5rem; min-width: 0; }
.otrack-box h2 { margin: 0 0 0.75rem; font-size: var(--fs-base); }
.otrack-items { list-style: none; margin: 0; padding: 0; }
.otrack-items li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--c-border); font-size: var(--fs-sm); }
.otrack-items li:last-child { border-bottom: 0; }
.otrack-items b { white-space: nowrap; color: var(--c-text-muted); font-weight: 600; }

.otimeline { list-style: none; margin: 0; padding: 0; }
.otimeline__item { display: flex; gap: 0.8rem; padding-bottom: 1rem; position: relative; }
.otimeline__item:not(:last-child)::before {
  content: ""; position: absolute; inset-inline-start: 6px; top: 16px; bottom: -2px;
  width: 2px; background: var(--c-border);
}
.otimeline__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c-primary); margin-top: 3px; flex-shrink: 0; z-index: 1; }
.otimeline__body { display: flex; flex-direction: column; gap: 0.1rem; }
.otimeline__body b { font-size: var(--fs-sm); }
.otimeline__body time { font-size: var(--fs-xs); color: var(--c-text-muted); }
.otrack-box__sub { margin-top: 1.25rem !important; padding-top: 1rem; border-top: 1px solid var(--c-border); }
.otrack-addr { font-size: var(--fs-sm); line-height: 1.9; color: var(--c-text); margin: 0; }

@media (max-width: 640px) {
  .otrack-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .otrack-steps { flex-direction: column; align-items: flex-start; gap: 0; margin-inline-start: 0.3rem; }
  .otrack-line { inset-inline: auto; inset-inline-start: 23px; top: 24px; bottom: 24px; height: auto; width: 4px; }
  .otrack-line__fill { inset-inline: 0; inset-block-start: 0; width: auto; height: var(--progress, 0%); transition: height 0.5s ease; }
  .ostep { flex-direction: row; gap: 0.85rem; align-items: center; width: 100%; padding-block: 0.5rem; }
  .ostep__label { text-align: start; }
}

/* --- Product detail (PDP) ---------------------------------------------- */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-block: 1rem 2rem; }
.pdp__main, .pdp__noimg {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; color: var(--c-text-subtle);
}
.pdp__brand { font-size: var(--fs-sm); color: var(--c-primary); }
.pdp__title { font-size: var(--fs-xl); margin: 0.25rem 0 0.75rem; }
.pdp__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.pdp__status { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.pdp__warranty { font-size: var(--fs-sm); color: var(--c-text-muted); }
.pdp__price { font-size: var(--fs-lg); margin-bottom: 1.25rem; }
.pdp__price del { color: var(--c-text-subtle); font-size: var(--fs-base); margin-inline-end: 0.5rem; }
.pdp__call { color: var(--c-warning); font-size: var(--fs-base); }
.pdp__short { color: var(--c-text-muted); margin-top: 1rem; }

@media (max-width: 760px) {
  .pdp { grid-template-columns: 1fr; }
}

/* --- Specs table ------------------------------------------------------- */
.specs { width: 100%; border-collapse: collapse; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; }
.specs th, .specs td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--c-border); font-size: var(--fs-sm); }
.specs th { width: 35%; text-align: start; color: var(--c-text-muted); font-weight: 600; background: #fafbfd; }
/* `left` hard-aligned every value to the wrong side of an RTL table (the label sits
   right, so the value must start at the right of its own cell). `start` = right in
   RTL, which keeps Persian and Latin values on one consistent edge. */
.specs td { text-align: start; }

/* Ops: bulk product-images grid (عکس کالاها) */
.imggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.9rem; margin-top: 1rem; }
.imgcell { border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-card); padding: 0.6rem; text-align: center; }
.imgcell--empty { border-style: dashed; }
.imgcell__thumb { height: 130px; display: grid; place-items: center; background: #fff; border-radius: 8px; overflow: hidden; }
.imgcell__thumb img { max-width: 100%; max-height: 130px; object-fit: contain; }
.imgcell__noimg { color: var(--c-text-muted); font-size: 0.8rem; }
.imgcell__name { font-size: 0.82rem; font-weight: 600; margin: 0.5rem 0; line-height: 1.5; }
.imgcell__btn { display: inline-block; cursor: pointer; font-size: 0.8rem; font-weight: 700; color: var(--c-primary); border: 1px solid var(--c-primary); border-radius: 8px; padding: 0.35rem 0.7rem; }
.imgcell__btn:hover { background: var(--c-primary); color: #fff; }
.imgcell__btn--edit { background: #fff; color: var(--c-text); text-decoration: none; }
.imgcell__btn--edit:hover { background: var(--c-text); color: #fff; }
.imgfilter { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0.7rem 0 1.1rem; }

.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }

/* Subcategory cards — shown when entering a parent category (e.g. دوربین → types) */
.subcat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.7rem; margin-bottom: 1.6rem; }
.subcat-card {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.95rem 1.2rem; background: linear-gradient(135deg, #eef5ff 0%, #dfeafc 100%);
  border: 1px solid #cadcf6; border-radius: var(--radius); color: #123a7a; font-weight: 800;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.subcat-card:hover { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: #fff;
  border-color: transparent; box-shadow: 0 12px 26px rgba(37, 99, 235, 0.3);
  transform: translateY(-2px); text-decoration: none; }
.subcat-card__arrow { color: #2563eb; transition: transform 0.15s ease, color 0.15s ease; }
.subcat-card:hover .subcat-card__arrow { color: #fff; transform: translateX(-3px); }

/* Product description (توضیحات) — readable article typography */
.prose { color: var(--c-text); line-height: 1.95; font-size: var(--fs-base); max-width: 70ch; }
.prose p { margin: 0 0 1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-inline-start: 1.4rem; }
.prose li { margin: 0.3rem 0; }
.prose strong, .prose b { color: var(--c-text); font-weight: 700; }
.prose a { color: var(--c-primary); }
.prose h3, .prose h4 { margin: 1.4rem 0 0.5rem; font-size: var(--fs-lg); }
.prose--card { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.4rem 1.6rem; max-width: none; box-shadow: var(--shadow-soft); }

/* --- Info / CMS pages (contact, faq, terms, warranty…) ----------------- */
.prose h2 { margin: 1.9rem 0 0.7rem; font-size: var(--fs-lg); color: var(--c-ink); font-weight: 800; }
.prose h2:first-child { margin-top: 0; }
.info-lead { font-size: 1.1rem; line-height: 2; color: var(--c-text-muted); margin: 0 0 1.7rem; padding-inline-start: 0.95rem; border-inline-start: 3px solid var(--c-accent); }
.info-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 0.8rem; margin: 0.8rem 0 1.9rem; }
.info-card { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 1.1rem; text-decoration: none; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-card); transition: border-color .15s, transform .15s, box-shadow .15s; }
.info-card:hover { border-color: var(--c-accent); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.info-card__role { font-size: 0.85rem; color: var(--c-text-muted); }
.info-card__value { font-size: 1.3rem; font-weight: 800; color: var(--c-ink); letter-spacing: 0.02em; }
.info-cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.72rem 1.4rem; background: var(--gradient-brand); color: #fff; border-radius: 999px; font-weight: 700; text-decoration: none; box-shadow: var(--shadow-soft); }
.info-cta:hover { filter: brightness(1.05); }
details.faq-item { border: 1px solid var(--c-border); border-radius: var(--radius); margin: 0.55rem 0; background: var(--c-card); overflow: hidden; }
details.faq-item > summary { cursor: pointer; padding: 1rem 1.1rem; font-weight: 700; color: var(--c-ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
details.faq-item > summary::-webkit-details-marker { display: none; }
details.faq-item > summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--c-accent); font-weight: 700; transition: transform .2s; }
details.faq-item[open] > summary::after { transform: rotate(45deg); }
details.faq-item > summary:hover { color: var(--c-accent); }
details.faq-item > p { margin: 0; padding: 0 1.1rem 1.1rem; color: var(--c-text-muted); line-height: 2; }

/* --- Footer grid ------------------------------------------------------- */
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
/* Footer sits on a dark surface → render any logo as a white silhouette. */
.site-footer__brand img { height: 54px; width: auto; max-width: 220px; object-fit: contain; margin-bottom: 0.6rem; }
.site-footer__grid h4 { color: #e2e8f0; font-size: var(--fs-sm); margin: 0 0 0.6rem; }
.site-footer__grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.site-footer__grid a { color: var(--c-text-subtle); }
.site-footer__copy { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.06); }
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* --- Article / blog ---------------------------------------------------- */
.article { max-width: 820px; }
.article__cover { width: 100%; border-radius: var(--radius); margin-block: 1rem; }
.tagbar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block: 1rem; }
.chip--active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* --- Price-list table -------------------------------------------------- */
.pricelist { width: 100%; border-collapse: collapse; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; }
.pricelist th, .pricelist td { text-align: start; padding: 0.7rem 1rem; border-bottom: 1px solid var(--c-border); font-size: var(--fs-sm); }
.pricelist thead th { background: #fafbfd; color: var(--c-text-muted); }
.pricelist tr:last-child td { border-bottom: 0; }

/* --- Phase 3: cart / checkout / account / reviews / compare ------------ */
.topnav__cart { background: rgba(255,255,255,0.08); padding: 0.3rem 0.7rem; border-radius: 999px; }

.pdp__rating { color: var(--c-warning); font-size: var(--fs-sm); margin-bottom: 0.5rem; }
.pdp__actions { margin-block: 1.25rem; }
.pdp__actions form { margin: 0; }
.pdp__per { color: var(--c-text-muted); font-size: var(--fs-sm); margin-inline-start: 0.3rem; }
.pdp__unitnote { color: var(--c-text-muted); font-size: var(--fs-sm); margin: 0 0 0.7rem; }
/* Buy row: quantity stepper + unit + add-to-cart (all the same height). */
.pdp__buy { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.qty { display: inline-flex; align-items: stretch; height: 46px; flex: none;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm); overflow: hidden; background: var(--c-card); }
.qty__btn { width: 44px; border: 0; background: transparent; font-size: 1.4rem; line-height: 1;
  color: var(--c-text); cursor: pointer; display: grid; place-items: center; }
.qty__btn:hover { background: var(--c-bg); color: var(--c-primary); }
.qty input { width: 58px; border: 0; border-inline: 1px solid var(--c-border); text-align: center;
  font: inherit; font-weight: 700; background: transparent; appearance: textfield; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty__unit { color: var(--c-text-muted); font-size: var(--fs-sm); }
.pdp__addbtn { flex: 1 1 200px; height: 46px; justify-content: center; }
.pdp__addbtn svg { width: 20px; height: 20px; }
.pdp__notify { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pdp__notify input { flex: 1; min-width: 140px; padding: 0.5rem 0.7rem; font: inherit;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
/* Secondary actions: wishlist + compare, equal width, aligned. */
.pdp__secondary { display: flex; gap: 0.6rem; margin-top: 0.8rem; }
.pdp__secondary form { flex: 1; }
.pdp__sbtn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.62rem 0.7rem; font: inherit; font-weight: 600; font-size: var(--fs-sm); cursor: pointer;
  color: var(--c-text); background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, color 0.15s ease; }
.pdp__sbtn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pdp__sbtn--on { border-color: var(--c-primary); color: var(--c-primary); }
.pdp__sbtn:disabled { opacity: 0.55; cursor: default; }
.pdp__sbtn:disabled:hover { border-color: var(--c-border); color: var(--c-text); }

.alert { padding: 0.7rem 1rem; border-radius: var(--radius-sm); background: rgba(37,99,235,0.08); margin-block: 0.5rem; }
.alert--error { background: rgba(239,68,68,0.1); color: #b91c1c; }
.alert--success { background: rgba(16,185,129,0.12); color: #047857; }
.link-danger { background: none; border: 0; color: var(--c-danger); cursor: pointer; font: inherit; padding: 0; }

/* Tables (cart, orders) */
.cart-table { width: 100%; border-collapse: collapse; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; margin-block: 1rem; }
.cart-table th, .cart-table td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--c-border); text-align: start; font-size: var(--fs-sm); }
.cart-table thead th { background: #fafbfd; color: var(--c-text-muted); }
.qty-form { display: flex; gap: 0.3rem; }
.qty-form input { width: 64px; padding: 0.3rem; border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.cart-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); }

/* Cart drawer (slide-over with backdrop) */
[x-cloak] { display: none !important; }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(11, 18, 32, 0.5); z-index: 1090; animation: fadein 0.2s ease; }
.drawer { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(400px, 92vw); background: var(--c-bg); box-shadow: -14px 0 44px rgba(11, 18, 32, 0.28); z-index: 1100; display: flex; flex-direction: column; animation: slidein 0.22s ease; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes slidein { from { transform: translateX(-30px); opacity: 0.4; } to { transform: translateX(0); opacity: 1; } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: var(--c-card); border-bottom: 1px solid var(--c-border); }
.drawer__close { border: 0; background: transparent; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--c-text-muted); }
.drawer__items { flex: 1; overflow-y: auto; padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.drawer__row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.drawer__thumb { width: 52px; height: 52px; flex-shrink: 0; background: #f1f5f9; border-radius: var(--radius-sm); display: grid; place-items: center; overflow: hidden; }
.drawer__thumb img { width: 100%; height: 100%; object-fit: contain; }
.drawer__info { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; font-size: var(--fs-sm); }
.drawer__info span { color: var(--c-text-muted); font-size: var(--fs-xs); }
.drawer__remove { border: 0; background: transparent; color: var(--c-danger); cursor: pointer; font-size: var(--fs-xs); }
.drawer__foot { padding: 1rem 1.25rem; background: var(--c-card); border-top: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 0.75rem; }
.drawer__total { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-sm); }
.drawer__cta { justify-content: center; width: 100%; }
.drawer__continue { text-align: center; color: var(--c-primary); font-size: var(--fs-sm); }

/* Category nav extra links + order actions + B2B page */
.catnav__links { list-style: none; margin: 0; padding: 0; display: flex; }
.catnav__links a { display: block; color: #cbd5e1; padding: 0.7rem 0.9rem; font-size: var(--fs-sm); }
.catnav__links a:hover { color: #fff; text-decoration: none; }
.order-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }

.b2b-hero { background: var(--c-ink); color: #fff; padding-block: 2.5rem; }
.b2b-hero h1 { margin: 0 0 0.5rem; }
.b2b-hero p { color: #cbd5e1; max-width: 60ch; }
.b2b-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2rem; margin-block: 2rem; align-items: start; }
.b2b-points { display: grid; gap: 0.75rem; }
.b2b-point { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1rem; border-inline-start: 3px solid var(--c-accent); }
.b2b-point b { display: block; }
.b2b-point span { color: var(--c-text-muted); font-size: var(--fs-sm); }
.b2b-form { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.b2b-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: var(--fs-sm); color: var(--c-text-muted); }
.b2b-form input, .b2b-form textarea { font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
@media (max-width: 760px) { .b2b-grid { grid-template-columns: 1fr; } }

/* Auth / account */
.auth-box { max-width: 460px; }
.auth-box .hint { color: var(--c-text-subtle); font-size: var(--fs-sm); }
/* --- Account dashboard (حساب من) — minimal, card-based --- */
.account { max-width: 880px; margin-block: 1.5rem 3rem; }
.account__head { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--c-border); }
.account__avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--gradient-brand); color: #fff; font-size: 1.5rem; font-weight: 800; }
.account__who { flex: 1; min-width: 0; }
.account__who h1 { margin: 0; font-size: 1.25rem; }
.account__phone { color: var(--c-text-muted); font-size: var(--fs-sm); margin: 0.15rem 0 0; }
.account__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin: 1.5rem 0 2rem; }
.acard { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 1.1rem 0.6rem; text-align: center;
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); color: var(--c-text);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
.acard:hover { border-color: var(--c-primary); transform: translateY(-2px); box-shadow: var(--shadow-soft); text-decoration: none; color: var(--c-text); }
.acard svg { width: 26px; height: 26px; color: var(--c-primary); }
.acard__n { font-size: 1.1rem; font-weight: 800; margin-top: 0.25rem; }
.acard__l { font-size: var(--fs-sm); color: var(--c-text-muted); }
.account__sectitle { font-size: 1.05rem; margin: 0 0 0.9rem; }
.orders-list { display: flex; flex-direction: column; gap: 0.6rem; }
.orow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.9rem; padding: 0.85rem 1rem;
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); color: var(--c-text);
  transition: border-color 0.15s ease; }
.orow:hover { border-color: var(--c-primary); text-decoration: none; color: var(--c-text); }
.orow__code { font-weight: 700; font-size: var(--fs-sm); }
.orow__date { color: var(--c-text-muted); font-size: var(--fs-sm); }
.orow__total { margin-inline-start: auto; font-weight: 800; font-size: var(--fs-sm); white-space: nowrap; }
.orow__count { color: var(--c-text-muted); font-size: var(--fs-sm); }
.orow--static { cursor: default; }
.orow--static:hover { border-color: var(--c-border); }
.orow__chev { width: 16px; height: 16px; color: var(--c-text-subtle); flex: none; }
.order-actions__form { display: contents; }
.account__empty { text-align: center; padding: 2.5rem 1rem; background: var(--c-card); border: 1px dashed var(--c-border); border-radius: var(--radius); }
.account__empty p { color: var(--c-text-muted); margin-bottom: 1rem; }
@media (max-width: 560px) {
  .account__cards { grid-template-columns: repeat(2, 1fr); }
  /* Recent-orders rows: clean 2×2 layout on phones instead of ragged flex-wrap —
     code + status on top, date + total below; the whole row is the link. */
  .orow { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 0.7rem; align-items: center; }
  .orow__code { grid-area: 1 / 1; }
  .orow__status { grid-area: 1 / 2; justify-self: end; }
  .orow__date { grid-area: 2 / 1; }
  .orow__total { grid-area: 2 / 2; justify-self: end; margin: 0; }
  .orow__chev { display: none; }
  /* Account header wraps gracefully; logout never pushed off-screen. */
  .account__head { flex-wrap: wrap; }
  .account__logout { margin-inline-start: auto; }
}
.address-card, .radio-card { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0.9rem; margin-block: 0.5rem; background: var(--c-card); }
.radio-card { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; }
.form-grid p { margin: 0.4rem 0; }
.form-grid input, .form-grid textarea, .auth-box input, .checkout input, .checkout textarea {
  width: 100%; max-width: 420px; padding: 0.5rem 0.7rem; border: 1px solid var(--c-border); border-radius: var(--radius-sm); font: inherit;
}

/* OTP: six separate digit boxes (after the .auth-box input rule so these win) */
.auth-box .otp-boxes { display: flex; gap: 0.55rem; justify-content: center; margin: 1.1rem 0 1.3rem; direction: ltr; }
.auth-box .otp-box {
  width: 52px; height: 62px; padding: 0; flex: 0 0 auto;
  text-align: center; font-size: 1.55rem; font-weight: 800; color: var(--c-ink);
  border: 1.5px solid var(--c-border); border-radius: 14px; background: var(--c-card);
  caret-color: var(--c-primary);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.auth-box .otp-box:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14); transform: translateY(-2px);
}
@media (max-width: 400px) {
  .auth-box .otp-boxes { gap: 0.4rem; }
  .auth-box .otp-box { width: 44px; height: 56px; font-size: 1.35rem; border-radius: 12px; }
}

/* Checkout layout */
.checkout__form { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; align-items: start; }
.checkout__step { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.checkout__summary { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1rem; position: sticky; top: 1rem; }
.checkout__summary .row { display: flex; justify-content: space-between; padding-block: 0.3rem; font-size: var(--fs-sm); border-bottom: 1px solid var(--c-border); }
.checkout__summary .total { border-bottom: 0; margin-top: 0.5rem; }
@media (max-width: 760px) { .checkout__form { grid-template-columns: 1fr; } }

/* Reviews & Q&A */
.review, .qa { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1rem; margin-block: 0.6rem; background: var(--c-card); }
.review__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.review__stars { color: var(--c-warning); }
.review__reply { margin-top: 0.5rem; padding: 0.5rem; background: var(--c-bg); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.qa__a { color: var(--c-text-muted); padding-inline-start: 1rem; }
.review-form, .qa-form { display: flex; flex-direction: column; gap: 0.6rem; max-width: none; margin-top: 1rem;
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.25rem 1.5rem; }
.review-form input, .review-form textarea, .review-form select, .qa-form input, .qa-form textarea {
  padding: 0.55rem 0.7rem; border: 1px solid var(--c-border); border-radius: var(--radius-sm); font: inherit; width: 100%;
}
.review-form button, .qa-form button { align-self: flex-start; justify-content: center; min-width: 200px; margin-top: 0.3rem; }
.review-form h3, .qa-form h3 { margin: 0 0 0.3rem; text-align: center; }

/* Comparison */
.compare-wrap { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; background: var(--c-card); border: 1px solid var(--c-border); }
.compare th, .compare td { border: 1px solid var(--c-border); padding: 0.6rem 0.8rem; text-align: start; font-size: var(--fs-sm); min-width: 140px; }
.timeline { list-style: none; padding: 0; }
.timeline li { padding: 0.4rem 0; border-bottom: 1px solid var(--c-border); font-size: var(--fs-sm); }

/* --- Phase 4: inquiry / pre-invoice forms ------------------------------ */
.inquiry-box { margin-top: 1rem; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0.5rem 1rem; background: var(--c-card); }
.inquiry-box summary { cursor: pointer; font-weight: 600; }
.inquiry-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 420px; margin-top: 0.75rem; }
.inquiry-form input, .inquiry-form textarea { padding: 0.5rem; border: 1px solid var(--c-border); border-radius: var(--radius-sm); font: inherit; }

/* --- Phase 5: ops console + announcement ------------------------------- */
.announcement { color: #fff; text-align: center; padding: 0.5rem 1rem; font-size: var(--fs-sm); }
.announcement a { color: #fff; text-decoration: underline; }
.kpi { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1rem; text-align: center; }
.kpi span { display: block; font-size: var(--fs-xl); font-weight: 800; color: var(--c-primary); }
.kpi small { color: var(--c-text-muted); }
.ops-table { width: 100%; border-collapse: collapse; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; margin-block: 0.75rem; }
.ops-table th, .ops-table td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--c-border); text-align: right; font-size: var(--fs-sm); }
.ops-table thead th { background: #fafbfd; color: var(--c-text-muted); }
.ops-filters, .ops-bulkbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-block: 0.75rem; }
.ops-filters input, .ops-filters select, .ops-bulkbar select { padding: 0.4rem 0.6rem; border: 1px solid var(--c-border); border-radius: var(--radius-sm); font: inherit; }
.ops-bulkbar button { padding: 0.4rem 0.8rem; border: 1px solid var(--c-border); background: var(--c-bg); border-radius: var(--radius-sm); cursor: pointer; font: inherit; }

/* --- Orders console: head, toolbar, table actions --------------------- */
.ops-head { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; justify-content: space-between; margin-block: 0.5rem 1rem; }
.ops-head h1 { margin: 0; display: flex; align-items: center; gap: 0.6rem; }
.ops-count { font-size: var(--fs-sm); font-weight: 700; color: var(--c-primary); background: rgba(37,99,235,0.1); border-radius: 999px; padding: 0.1rem 0.7rem; }
.ops-head .ops-filters { margin: 0; }

.ops-toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; align-items: center; padding: 0.7rem 0.9rem; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); margin-block: 0.75rem; }
.ops-toolbar__group { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.ops-toolbar__group--exports { margin-inline-start: auto; }
.ops-toolbar__label { font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-muted); }
.ops-toolbar select { padding: 0.4rem 0.6rem; border: 1px solid var(--c-border); border-radius: var(--radius-sm); font: inherit; }
.btn-sm { padding: 0.4rem 0.85rem; border: 1px solid var(--c-border); background: var(--c-bg); border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: var(--fs-sm); color: var(--c-text); transition: background .12s, border-color .12s; }
.btn-sm:hover { background: #f1f5fb; }
.btn-sm--primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.btn-sm--primary:hover { filter: brightness(0.95); background: var(--c-primary); }
.btn-sm--danger { color: #b91c1c; border-color: rgba(239,68,68,0.4); }
.btn-sm--danger:hover { background: rgba(239,68,68,0.08); }
.btn-sm--accent { background: #047857; border-color: #047857; color: #fff; }
.btn-sm--accent:hover { filter: brightness(0.95); background: #047857; }

.ops-table--orders th, .ops-table--orders td { vertical-align: middle; }
.ops-table--orders tbody tr:hover { background: #f7f9fc; }
.ops-table__check { width: 2.2rem; text-align: center; }
.ops-table__actions { white-space: nowrap; }
.ops-code { font-variant-numeric: tabular-nums; font-weight: 700; }
.ops-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ops-date { color: var(--c-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rowbtn { display: inline-block; padding: 0.25rem 0.6rem; border: 1px solid var(--c-border); border-radius: var(--radius-sm); font-size: var(--fs-xs); color: var(--c-text); background: var(--c-bg); margin-inline-start: 0.25rem; }
.rowbtn:hover { background: #f1f5fb; }
.rowbtn--invoice { color: var(--c-primary); border-color: rgba(37,99,235,0.35); font-weight: 600; }
.rowbtn--invoice:hover { background: rgba(37,99,235,0.08); }

/* Order-status pills (reuse the generic .pill sizing). */
.pill--pending { background: rgba(245,158,11,0.14); color: #b45309; }
.pill--paid { background: rgba(37,99,235,0.12); color: #1d4ed8; }
.pill--processing { background: rgba(139,92,246,0.14); color: #6d28d9; }
.pill--shipped { background: rgba(14,165,233,0.14); color: #0369a1; }
.pill--delivered { background: rgba(16,185,129,0.14); color: #047857; }
.pill--cancelled { background: rgba(239,68,68,0.12); color: #b91c1c; }

@media (max-width: 760px) {
  .ops-toolbar__group--exports { margin-inline-start: 0; }
}

.ops-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 760px) { .ops-cols { grid-template-columns: 1fr; } }
.agg-panel { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1rem; margin-block: 1rem; }
.agg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; margin-block: 0.75rem; }
.agg-card { border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 0.7rem; display: flex; flex-direction: column; gap: 0.3rem; }
.agg-card--bad { border-color: var(--c-danger); background: rgba(239,68,68,0.05); }
.agg-warn { color: var(--c-danger); font-size: var(--fs-sm); margin-inline-start: 0.5rem; }
.mod-row { display: flex; justify-content: space-between; gap: 1rem; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0.8rem; margin-block: 0.5rem; background: var(--c-card); }
.mod-actions form { display: flex; gap: 0.4rem; }

/* --- Error pages ------------------------------------------------------- */
.errorpage { text-align: center; padding-block: 4rem; }
.errorpage__code { font-size: 5rem; font-weight: 800; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.errorpage h1 { margin: 0.5rem 0; }
.errorpage p { color: var(--c-text-muted); }
.errorpage__actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-block: 1.25rem; }
.errorpage__cats { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap; }

/* --- Trust badges (eNamad / Samandehi / permits) ----------------------- */
.trust-badges { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.trust-badge { display: inline-flex; background: #fff; border-radius: var(--radius-sm); padding: 0.35rem; }
.trust-badge img { height: 84px; width: auto; display: block; }
.trust-badge--embed { padding: 0; background: transparent; min-width: 84px; min-height: 84px; align-items: center; justify-content: center; }
.trust-badge__fallback { display: inline-flex; align-items: center; padding: 0.55rem 0.85rem; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-card); color: var(--c-text-muted); font-size: 0.8rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.site-footer__trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.06); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; color: var(--c-text-subtle); font-size: var(--fs-xs); max-width: 60ch; }

/* --- Global responsive safety ----------------------------------------- */
img { max-width: 100%; }

/* Mobile touch polish: kill the blue tap-flash on every touch (keyboard focus
   rings via :focus-visible are unaffected). */
* { -webkit-tap-highlight-color: transparent; }

/* Wide tables scroll horizontally instead of breaking the layout on mobile. */
@media (max-width: 680px) {
  :root { --fs-2xl: 1.8rem; --fs-xl: 1.35rem; --fs-lg: 1.1rem; }
  .container { padding-inline: 1rem; }
  /* iOS zooms a focused input whose font is < 16px — force 16px on touch so the
     viewport never jumps when a field is tapped. Includes the header search, which
     otherwise wins with its own 14px rule. */
  input, select, textarea, .hdr__search input { font-size: 16px; }
  .cart-table, .ops-table, .specs, .pricelist, .compare {
    display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
  }
  .section { padding-block: 2rem; }
  .section-head h2 { font-size: var(--fs-lg); }
  .fab { inset-block-end: 1rem; inset-inline-start: 1rem; }
  .fab__btn { width: 50px; height: 50px; }
  .checkout__summary { position: static; }
  .promo { min-height: 110px; padding: 1.1rem; }
  .b2b-hero { padding-block: 1.75rem; }
}

/* ═══ Mobile polish pass (2026-07-21) — touch targets, control sizing, radius, 320px fit ═══
   Every rule fixes a defect measured on a real 390/320px viewport via the DOM inspector:
   burger 40→44, header search-submit 38→44, drawer/facet close 27–30→44, drawer rows 41–43→44,
   quick chips 36→40, form inputs/selects 45–47→48, price-filter inputs 40→48, control radius
   8→14. Also fixes hero content clipping at ≤343px (the grid item could not shrink below its
   min-content). min-height only grows under-sized elements — re-measured: no horizontal
   overflow introduced at 320 or 390. */
@media (max-width: 680px) {
  /* Touch targets → ≥44px (header, mobile drawer, filter drawer) */
  .hdr__burger { width: 44px; height: 44px; flex-basis: 44px; }
  .hdr__search button { width: 44px; height: 44px; }
  .mnav__close,
  .facets__close { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; padding: 0; }
  .mnav__links a { min-height: 44px; display: flex; align-items: center; }
  .mnav__phonerow,
  .mnav__cathead { min-height: 44px; }
  .hero__chip { min-height: 40px; display: inline-flex; align-items: center; }

  /* Hero must never clip its content on narrow screens (≤343px): let the grid
     item shrink below its intrinsic min-content instead of overflowing the column. */
  .hero__grid, .hero__copy { min-width: 0; }
  .hero__badge { max-width: 100%; }
  .hero__search { min-width: 0; max-width: 100%; }

  /* Form controls → 48px min height + consistent 14px radius (spec: 48–52 / 12–16). */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
  select, textarea { min-height: 48px; border-radius: var(--radius); }

  /* Buttons → ≥48px + consistent radius (compact .btn--sm keeps its size). */
  .btn:not(.btn--sm) { min-height: 48px; border-radius: var(--radius); justify-content: center; }
  .banner-lg__btn { min-height: 44px; }

  /* Footer: comfortable ≥40px tap rows for the stacked link columns + 44px social
     icons (legal micro-links keep their compact inline row). */
  .site-footer__grid ul { gap: 0.1rem; }
  .site-footer__grid ul a { display: flex; align-items: center; min-height: 40px; }
  .site-footer__social a { width: 44px; height: 44px; }
}

/* === Color & spirit: hero glow-orbs, stats band, scroll reveal === */
.hero__orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.orb { position: absolute; border-radius: 50%; filter: blur(64px); opacity: 0.42; }
.orb--1 { width: 340px; height: 340px; background: #22d3ee; top: -90px; inset-inline-end: -50px; animation: orbfloat1 15s ease-in-out infinite; }
.orb--2 { width: 300px; height: 300px; background: #6366f1; bottom: -120px; inset-inline-start: 8%; animation: orbfloat2 19s ease-in-out infinite; }
.orb--3 { width: 240px; height: 240px; background: #3b82f6; top: 28%; inset-inline-start: 38%; animation: orbfloat3 17s ease-in-out infinite; }
@keyframes orbfloat1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-32px, 28px); } }
@keyframes orbfloat2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(28px, -22px); } }
@keyframes orbfloat3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(18px, 26px); } }
.hero__grid { position: relative; z-index: 1; }

.stats { background: linear-gradient(120deg, #4f46e5 0%, #2563eb 50%, #06b6d4 100%); color: #fff; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-block: 2.2rem; text-align: center; }
.stat { display: flex; flex-direction: column; gap: 0.3rem; }
.stat__n { font-size: 2.6rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.88); }
@media (max-width: 600px) { .stats__grid { grid-template-columns: 1fr 1fr; gap: 1.6rem; } .stat__n { font-size: 2rem; } }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* === درباره ما (about page) — built on the site tokens === */
.about-hero { background: var(--c-bg); padding-block: 4.5rem 3.5rem; overflow: hidden; }
.about-hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3rem; align-items: center; }
.about-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); font-weight: 700; color: var(--c-primary); letter-spacing: 0.03em; }
.about-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--c-accent); border-radius: 2px; }
.about-hero h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.4rem); font-weight: 800; line-height: 1.3; margin: 1.1rem 0; color: var(--c-ink); }
.about-accent { color: var(--c-primary); position: relative; white-space: nowrap; }
.about-accent::after { content: ""; position: absolute; inset-inline: 0; bottom: 4px; height: 10px; background: rgba(6, 182, 212, 0.22); border-radius: 4px; z-index: -1; }
.about-lead { font-size: var(--fs-lg); color: var(--c-text-muted); max-width: 46ch; }
.about-cta-row { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-top: 2rem; }

.pulse-card { background: var(--c-ink); border-radius: 22px; padding: 2rem 1.8rem; color: #dfeceb; position: relative; overflow: hidden; box-shadow: 0 28px 56px -28px rgba(11, 18, 32, 0.55); }
.pulse-card__label { font-size: 0.78rem; color: var(--c-accent); font-weight: 700; letter-spacing: 0.06em; font-family: var(--font-mono, ui-monospace, monospace); }
.pulse-svg { width: 100%; height: 84px; margin: 0.4rem 0 1.1rem; display: block; }
.pulse-line-bg { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
.pulse-path { fill: none; stroke: var(--c-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; animation: about-dash 3.4s ease-in-out infinite alternate; }
.pulse-dot { fill: var(--c-accent); offset-path: path('M0,44 L60,44 L78,44 L92,14 L112,74 L128,44 L150,44 L168,44 L182,26 L196,60 L210,44 L520,44'); animation: about-ride 3.4s linear infinite; }
@keyframes about-dash { from { stroke-dashoffset: 520; } to { stroke-dashoffset: 0; } }
@keyframes about-ride { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.pulse-card__stats { display: flex; gap: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 1.1rem; }
.pulse-card__stats div { flex: 1; }
.pulse-card__stats b { display: block; font-size: 1.6rem; font-weight: 800; color: #fff; line-height: 1.2; }
.pulse-card__stats span { font-size: 0.8rem; color: #9fb6b4; }

.about-band { background: var(--c-card); border-block: 1px solid var(--c-border); }
.about-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-block: 2rem; }
.about-stat { text-align: center; }
.about-stat b { display: block; font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; color: var(--c-primary); }
.about-stat span { font-size: var(--fs-sm); color: var(--c-text-muted); }
.about-stat + .about-stat { border-inline-start: 1px solid var(--c-border); }

.about-head { max-width: 62ch; margin-bottom: 2.4rem; }
.about-head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0.7rem 0 0.6rem; color: var(--c-ink); }
.about-head p { color: var(--c-text-muted); font-size: var(--fs-lg); }

.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: 2.8rem; align-items: start; }
.about-story__text p { margin-bottom: 1rem; color: var(--c-text); line-height: 1.95; }
.about-story__text b { color: var(--c-ink); }
.about-arc__item { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding-bottom: 1.6rem; position: relative; }
.about-arc__item:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 11px; top: 26px; bottom: -4px; width: 2px; background: var(--c-border); }
.about-arc__dot { width: 24px; height: 24px; border-radius: 50%; background: var(--c-bg); border: 2px solid var(--c-primary); display: grid; place-items: center; z-index: 1; position: relative; }
.about-arc__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }
.about-arc__item h3 { font-size: 1.1rem; margin-bottom: 0.25rem; color: var(--c-ink); }
.about-arc__item p { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; }

.about-offer-sec { background: var(--c-card); border-block: 1px solid var(--c-border); }
.about-offer { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.about-card { display: block; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.7rem 1.6rem; color: var(--c-text); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.about-card:hover { transform: translateY(-4px); border-color: var(--c-primary); box-shadow: var(--shadow-card); text-decoration: none; color: var(--c-text); }
.about-card__ico { width: 50px; height: 50px; border-radius: 13px; background: rgba(37, 99, 235, 0.1); color: var(--c-primary); display: grid; place-items: center; margin-bottom: 1.1rem; }
.about-card__ico svg { width: 26px; height: 26px; }
.about-card h3 { font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--c-ink); }
.about-card > p { color: var(--c-text-muted); font-size: var(--fs-sm); margin-bottom: 0.9rem; }
.about-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.about-tags span { font-size: var(--fs-xs); background: var(--c-card); border: 1px solid var(--c-border); color: var(--c-text-muted); padding: 0.3rem 0.75rem; border-radius: 999px; }

.about-brands { background: var(--c-ink); color: #fff; }
.about-brands .about-head h2 { color: #fff; }
.about-brands .about-head p { color: #9fb6b4; }
.about-brand-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.about-brand { border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; padding: 1rem 1.6rem; color: #cfe0df; font-weight: 700; font-size: 1.1rem; flex: 1 1 150px; text-align: center; transition: background 0.2s ease, color 0.2s ease; }
.about-brand:hover { background: rgba(6, 182, 212, 0.16); color: #fff; text-decoration: none; }
.about-brand small { display: block; font-size: 0.72rem; font-weight: 500; color: #7f9897; margin-top: 0.15rem; }

.about-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.about-why { display: grid; grid-template-columns: auto 1fr; gap: 1rem; background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.4rem; }
.about-why__num { font-size: 0.95rem; font-weight: 800; color: var(--c-accent); border: 1.5px solid var(--c-accent); border-radius: 50%; width: 38px; height: 38px; display: grid; place-items: center; flex: none; }
.about-why h3 { font-size: 1.05rem; margin-bottom: 0.35rem; color: var(--c-ink); }
.about-why p { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; }

.about-cta { background: var(--c-card); border: 1px solid var(--c-border); border-radius: 22px; padding: 2.6rem 2.4rem; display: grid; grid-template-columns: 1.4fr auto; gap: 2rem; align-items: center; position: relative; overflow: hidden; }
.about-cta::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 6px; background: var(--c-accent); }
.about-cta h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 0.5rem; color: var(--c-ink); }
.about-cta p { color: var(--c-text-muted); max-width: 46ch; margin: 0; }
.about-cta__actions { display: flex; flex-direction: column; gap: 0.75rem; min-width: 210px; }
.about-cta__actions .btn { justify-content: center; }

@media (max-width: 880px) {
  .about-hero__grid, .about-story, .about-offer, .about-why-grid, .about-cta { grid-template-columns: 1fr; }
  .about-band__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .about-stat:nth-child(3) { border-inline-start: 0; }
  .about-stat + .about-stat { border-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .orb, .hero, .brand-track, .pulse-path, .pulse-dot { animation: none; }
  .pulse-path { stroke-dasharray: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ═══ Homepage overhaul additions (clamp/a11y, testimonials, blog, SEO block,
   bottom nav, back-to-top) — appended last so they win the cascade. ═══ */

/* Product card: hard 2-line title clamp → equal card heights. */
.pcard__title {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; min-height: 3em;
}
/* Keyboard a11y: a clearly visible focus ring on interactive elements. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--c-accent); outline-offset: 2px;
}

/* Brands: uniform grayscale logos that gain color on hover. */
.bcard__logo { filter: grayscale(1); opacity: 0.82; transition: filter 0.2s, opacity 0.2s; }
.bcard:hover .bcard__logo, .bcard:focus-visible .bcard__logo { filter: none; opacity: 1; }

/* Testimonials (نظرات مشتریان) */
.tstm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 1rem; }
.tstm { margin: 0; display: flex; flex-direction: column; gap: 0.55rem;
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 1.2rem 1.2rem 1rem; box-shadow: var(--shadow-card); }
.tstm__star { color: var(--c-border); font-size: 1.05rem; }
.tstm__star--on { color: #f59e0b; }
.tstm blockquote { margin: 0; flex: 1; color: var(--c-text); font-size: 0.92rem; line-height: 1.95; }
.tstm figcaption { font-weight: 800; font-size: 0.86rem; }
.tstm figcaption span { color: var(--c-text-muted); font-weight: 400; }

/* Home blog row (مقالات و راهنمای خرید) */
.hposts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.hpost { display: flex; flex-direction: column; overflow: hidden; color: inherit;
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius);
  box-shadow: var(--shadow-card); transition: transform 0.15s, box-shadow 0.15s; }
.hpost:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); text-decoration: none; color: inherit; }
.hpost__media { aspect-ratio: 16 / 9; background: #eef2f8; display: grid; place-items: center; color: var(--c-text-subtle); }
.hpost__media img { width: 100%; height: 100%; object-fit: cover; }
.hpost__body { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.hpost__body h3 { margin: 0; font-size: 1rem; line-height: 1.65; }
.hpost__body p { margin: 0; font-size: 0.85rem; color: var(--c-text-muted); line-height: 1.85; }
.hpost__body time { margin-top: auto; font-size: 0.78rem; color: var(--c-text-subtle); }
@media (max-width: 760px) { .hposts { grid-template-columns: 1fr; } }

/* Collapsible SEO text block (owner-editable via تنظیمات سایت) */
.seo-block { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.3rem 1.4rem; }
.seo-block__body { max-height: 7.4em; overflow: hidden; position: relative; }
.seo-block__body::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2.6em;
  background: linear-gradient(transparent, var(--c-card)); }
.seo-block--open .seo-block__body { max-height: none; }
.seo-block--open .seo-block__body::after { display: none; }
.seo-block__toggle { margin-top: 0.6rem; padding: 0; background: none; border: 0;
  color: var(--c-primary); font: inherit; font-weight: 800; cursor: pointer; }

/* Back-to-top (opposite side from the contact FAB) */
.to-top { position: fixed; bottom: 1.15rem; inset-inline-end: 1.15rem; z-index: 890;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-border);
  background: var(--c-card); color: var(--c-primary); box-shadow: var(--shadow-soft);
  display: grid; place-items: center; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s; }
.to-top--show { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 20px; height: 20px; }

/* ── Category mega-grid (mock centrepiece): root cards with sub-category tiles ── */
.mega-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1rem; }
.mega-card { display: flex; flex-direction: column; gap: 0.7rem; padding: 1rem;
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); transition: border-color 0.15s, box-shadow 0.15s; }
.mega-card:hover { border-color: #c9d8f2; box-shadow: var(--shadow-soft); }
.mega-card__head { display: flex; align-items: center; gap: 0.55rem; color: var(--c-text); font-size: 0.98rem; }
.mega-card__head:hover { text-decoration: none; color: var(--c-primary); }
.mega-card__ic { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 12px; color: var(--c-primary); background: #eef4ff; }
.mega-card__ic svg { width: 21px; height: 21px; }
.mega-card__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; grid-auto-rows: 1fr; }
.mega-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 0.45rem; padding: 0.7rem 0.3rem 0.6rem; border-radius: 12px; border: 1px solid var(--c-border);
  background: #f8fafc; color: var(--c-text); height: 100%;
  transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s; }
.mega-tile:hover { border-color: var(--c-accent); background: #f0fbfd; transform: translateY(-2px);
  box-shadow: var(--shadow-soft); text-decoration: none; color: var(--c-text); }
.mega-tile__media { width: 62px; height: 62px; border-radius: 12px; overflow: hidden;
  background: #f1f5f9; display: grid; place-items: center; color: var(--c-text-subtle); }
.mega-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.mega-tile__media svg { width: 26px; height: 26px; }
.mega-tile__name { font-size: 0.72rem; line-height: 1.45; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.1em; }
.mega-card__all { margin-top: auto; font-size: 0.82rem; font-weight: 700; color: var(--c-primary); }
@media (max-width: 640px) {
  .mega-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .mega-card { padding: 0.75rem; }
  .mega-card__tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) { .mega-grid { grid-template-columns: 1fr; } }

/* ── Consult / phone-order strip (نمی‌دانید چه بخرید؟) ── */
.consult { position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap;
  padding: 1.6rem 2rem; border-radius: var(--radius-lg); color: #fff;
  background: linear-gradient(120deg, #0b1220 0%, #14264d 60%, #1e3a8a 100%);
  box-shadow: 0 18px 44px rgba(11, 40, 100, 0.3); }
.consult__pulse { position: absolute; inset-inline: 0; bottom: 8px; width: 100%; height: 34px;
  z-index: -1; opacity: 0.8; }
.consult__text h2 { margin: 0 0 0.3rem; font-size: 1.35rem; color: #fff; }
.consult__text p { margin: 0; color: #c7d2e6; font-size: 0.95rem; line-height: 1.9; }
.consult__btn { display: inline-flex; align-items: center; gap: 0.6rem; flex: 0 0 auto;
  padding: 0.85rem 1.5rem; border-radius: 999px; font-weight: 800;
  color: #06281e; background: linear-gradient(90deg, #34d399, #10b981);
  box-shadow: 0 10px 26px rgba(16, 185, 129, 0.4); transition: transform 0.2s, filter 0.2s; }
.consult__btn:hover { transform: translateY(-2px); filter: brightness(1.05); text-decoration: none; color: #06281e; }
.consult__btn b { display: block; font-size: 1.05rem; letter-spacing: 0.04em; }
@media (max-width: 640px) { .consult { flex-direction: column; align-items: stretch; text-align: center; }
  .consult__btn { justify-content: center; } }

/* Mobile sticky bottom navigation */
.bnav { display: none; }
@media (max-width: 860px) {
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  /* Cart + account live in the bottom nav on mobile — drop the duplicate
     top-header icons (only burger · logo · search stay up top). */
  .hdr__actions { display: none; }
  .bnav { position: fixed; bottom: 0; inset-inline: 0; z-index: 900;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--c-card); border-top: 1px solid var(--c-border);
    box-shadow: 0 -6px 20px rgba(11, 18, 32, 0.09);
    padding-bottom: env(safe-area-inset-bottom); }
  .bnav a { position: relative; display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: 0.5rem 0 0.55rem; min-height: 44px;
    font-size: 0.68rem; color: var(--c-text-muted); }
  .bnav a:hover { text-decoration: none; color: var(--c-primary); }
  .bnav svg { width: 22px; height: 22px; }
  .bnav__badge { position: absolute; top: 3px; inset-inline-start: calc(50% + 7px);
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    display: grid; place-items: center;
    background: var(--c-danger); color: #fff; font-size: 0.62rem; font-weight: 800; }
  /* Lift the floating widgets above the bar. */
  .fab { inset-block-end: calc(70px + env(safe-area-inset-bottom)); }
  .to-top { bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* ═══ Mock-fidelity pass: glass hero card, icon tiles, navy offers band,
   shop tabs + arrow rails, compact brand chips. ═══ */

/* Hero: slightly tighter, glass logo card with cyan glow (mock's visual). */
.hero h1 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.hero-card { position: relative; isolation: isolate; display: flex; flex-direction: column;
  align-items: center; gap: 1rem; padding: 2.4rem 2rem 1.5rem; border-radius: 26px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  box-shadow: 0 30px 70px rgba(3, 10, 30, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.hero-card::before { content: ""; position: absolute; inset: -25%; z-index: -1;
  background: radial-gradient(42% 42% at 60% 38%, rgba(34, 211, 238, 0.35), transparent 70%); }
.hero-card img { width: min(290px, 58vw); height: auto; animation: none;
  filter: drop-shadow(0 10px 30px rgba(6, 182, 212, 0.35)); }

/* Mega tiles: uniform card with a teal icon badge (borderless — the tile
   already has its own border, so a badge border would read as a double frame). */
.mega-tile__media { background: #e8f7fb; border: 0; border-radius: 13px; color: #0891b2; }
.mega-tile__media svg { width: 28px; height: 28px; }
.mega-tile:hover .mega-tile__media { background: #d6f1f8; }

/* Offers band: mock colors — navy gradient, yellow tag, teal CTA. */
.amazing { background: linear-gradient(120deg, #0b1220 0%, #14264d 58%, #1e3a8a 100%);
  border: 0; box-shadow: 0 20px 50px rgba(11, 40, 100, 0.3); }
.amazing__badge { background: linear-gradient(90deg, #fde68a, #f59e0b); color: #0b1220;
  padding: 0.34rem 0.9rem; border-radius: 999px; font-size: 0.85rem;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4); }
.amazing__timer { background: rgba(255, 255, 255, 0.12); }
.amazing__lead .btn { border-color: #22d3ee; color: #22d3ee; }
.amazing__lead .btn:hover { background: #22d3ee; color: #0b1220; }
.amazing__rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); }
.amazing__item { flex: 0 0 210px; }

/* Shop: selectable chip tabs + product rails with arrows and snap. */
.shop-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.1rem; }
.shop-tab { padding: 0.5rem 1.15rem; border-radius: 999px; border: 1.5px solid var(--c-border);
  background: var(--c-card); color: var(--c-text-muted); font: inherit; font-size: 0.9rem;
  font-weight: 700; cursor: pointer; transition: border-color 0.18s, background 0.18s, color 0.18s; }
.shop-tab:hover { border-color: var(--c-primary); color: var(--c-primary); }
.shop-tab--on { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.rail { position: relative; }
.rail__track { display: flex; gap: 0.9rem; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 0.2rem 0.2rem 0.6rem; scrollbar-width: thin; }
.rail__track::-webkit-scrollbar { height: 8px; }
.rail__track::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 999px; }
.rail__item { flex: 0 0 218px; scroll-snap-align: start; }
.rail__item .pcard { height: 100%; }
.rail__btn { position: absolute; top: 42%; transform: translateY(-50%); z-index: 5;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--c-border);
  background: var(--c-card); color: var(--c-primary); box-shadow: var(--shadow-soft);
  display: grid; place-items: center; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s; }
.rail__btn:hover { background: var(--c-primary); color: #fff; border-color: transparent; }
.rail__btn svg { width: 20px; height: 20px; }
.rail__btn--prev { inset-inline-start: -10px; }
.rail__btn--next { inset-inline-end: -10px; }
.rail__moremore { margin-top: 0.5rem; }
@media (max-width: 760px) { .rail__btn { display: none; } }

/* Brands: flat minimal chips exactly like the mock — light hairline border,
   generous whitespace, big grayscale logo (colors on hover), no shadow/name. */
.brand-viewport .bcard { width: 176px; height: 96px; border-radius: 16px; box-shadow: none;
  border: 1px solid #edf1f7; background: #fff; padding: 0.8rem; gap: 0.3rem; }
.brand-viewport .bcard:hover { border-color: var(--c-border); transform: none; box-shadow: var(--shadow-soft); }
.brand-viewport .bcard__logo-wrap { height: 56px; }
.brand-viewport .bcard__logo { max-height: 52px; max-width: 132px; }
.brand-viewport .bcard__mono { width: 48px; height: 48px; font-size: 1.3rem; border-radius: 12px; }
.brand-viewport .bcard__textonly { font-size: 1rem; color: var(--c-text-muted); font-weight: 700; }
.brand-viewport .bcard__name { display: none; }

/* ═══ Mock pass 2: hero pulse card + badge, text search button, stats pulse
   flanks, ad-banner slider, offers side layout. ═══ */

/* Hero search: pill button with label (overrides the circular icon button). */
.hero__search .hero__search-btn { width: auto; border-radius: 999px; padding: 0 1.25rem;
  height: 46px; display: inline-flex; align-items: center; gap: 0.45rem;
  font: inherit; font-size: 0.95rem; font-weight: 800; }

/* Glass card: pulse line under the logo + overlapping guarantee badge. */
.hero-card { margin-bottom: 30px; }
.hero-card__pulse { width: min(300px, 56vw); height: 28px; opacity: 0.95;
  filter: drop-shadow(0 0 10px rgba(45, 212, 191, 0.55)); }
.hero-card__badge { position: absolute; bottom: -24px; inset-inline-end: -12px;
  display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem;
  background: #fff; color: var(--c-ink); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(3, 10, 30, 0.4); }
.hero-card__badge-ic { flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #10b981, #34d399); }
.hero-card__badge-ic svg { width: 15px; height: 15px; }
.hero-card__badge-tx { display: flex; flex-direction: column; line-height: 1.55; text-align: start; }
.hero-card__badge-tx b { font-size: 0.85rem; }
.hero-card__badge-tx small { font-size: 0.7rem; color: var(--c-text-muted); }

/* Stats: teal ECG flanks (decorative, hidden when narrow). */
.stats { position: relative; overflow: hidden; }
.stats__pulse { position: absolute; top: 50%; transform: translateY(-50%);
  width: 320px; height: 34px; pointer-events: none; }
.stats__pulse--start { inset-inline-start: 0; }
.stats__pulse--end { inset-inline-end: 0; }
@media (max-width: 1150px) { .stats__pulse { display: none; } }

/* Ad-banner slider (admin بنرهای صفحه اصلی): stacked fade, dots + arrows. */
.promo-slider { position: relative; overflow: hidden; border-radius: 22px;
  aspect-ratio: 16 / 5; background: var(--c-card); box-shadow: var(--shadow-card); }
.promo-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; }
.promo-slide--on { opacity: 1; z-index: 1; }
.promo-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.92); color: var(--c-ink);
  box-shadow: var(--shadow-soft); display: grid; place-items: center; }
.promo-slider__nav:hover { background: #fff; }
.promo-slider__nav svg { width: 20px; height: 20px; }
.promo-slider__nav--prev { inset-inline-start: 10px; }
.promo-slider__nav--next { inset-inline-end: 10px; }
.promo-slider__dots { position: absolute; bottom: 10px; inset-inline: 0; z-index: 3;
  display: flex; justify-content: center; gap: 6px; }
.promo-slider__dot { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0;
  background: rgba(255, 255, 255, 0.55); cursor: pointer; transition: width 0.2s, background 0.2s; }
.promo-slider__dot--on { width: 22px; background: #fff; }
@media (max-width: 700px) {
  .promo-slider { aspect-ratio: 16 / 11; border-radius: 16px; }
  .promo-slider__nav { display: none; }
}

/* Offers band: mock layout — side panel (badge/title/timer/CTA) + cards rail. */
.amazing { display: grid; grid-template-columns: 250px 1fr; align-items: center; }
.amazing__side { display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.55rem; padding: 1.3rem 1.2rem; color: #fff; }
.amazing__side h2 { margin: 0; font-size: 1.3rem; color: #fff; }
.amazing__sub { margin: 0; font-size: 0.85rem; color: #c7d6ee; line-height: 1.85; }
@media (max-width: 800px) {
  .amazing { grid-template-columns: 1fr; }
  .amazing__side { padding-bottom: 0.2rem; }
}

/* ═══ Legrand promo slide (owner's design) ═══ */
.banner-lg { position: absolute; inset: 0; overflow: hidden; direction: rtl;
  background: linear-gradient(115deg, #eef4fc 0%, #e0eaf6 45%, #d2e0f1 100%); }
/* Photos wrapper: transparent on desktop (children position absolutely as before);
   becomes a flex row on mobile so BOTH photos sit side-by-side above the text. */
.banner-lg__art { display: contents; }
.banner-lg__arc { position: absolute; border-radius: 50%; pointer-events: none; }
.banner-lg__arc--big { inset-inline-end: -16%; top: 50%; transform: translateY(-50%);
  width: 50%; aspect-ratio: 1; border: clamp(38px, 4.6vw, 90px) solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 clamp(38px, 4.6vw, 90px) rgba(226, 232, 240, 0.5),
              0 0 0 clamp(76px, 9.2vw, 180px) rgba(255, 255, 255, 0.4); }
.banner-lg__arc--top { inset-inline-start: -7%; top: -58%; width: 30%; aspect-ratio: 1;
  border: clamp(26px, 3vw, 60px) solid rgba(26, 111, 219, 0.05); }
.banner-lg__edge { position: absolute; inset-block: 0; inset-inline-start: 0; width: 8px;
  background: linear-gradient(180deg, #e2001a, #b00014); }
.banner-lg__tx { position: absolute; inset-block: 0; inset-inline-start: clamp(20px, 5%, 96px);
  width: min(52%, 620px); display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; gap: clamp(5px, 0.9vw, 14px); z-index: 3; }
.banner-lg__pill { display: inline-flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid #dbe4ee; border-radius: 999px; padding: 0.4em 1.1em;
  font-size: clamp(0.7rem, 1.1vw, 1rem); font-weight: 700; color: #e2001a; }
.banner-lg__pill i { width: 8px; height: 8px; border-radius: 50%; background: #e2001a; }
.banner-lg__title { margin: 0; font-size: clamp(1.1rem, 2.6vw, 2.5rem); line-height: 1.3;
  font-weight: 900; color: #123a7a; }
.banner-lg__title span { color: #1a6fdb; }
.banner-lg__bar { width: clamp(64px, 6.4vw, 120px); height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #1a6fdb, #e2001a); }
.banner-lg__sub { margin: 0; font-size: clamp(0.78rem, 1.35vw, 1.3rem); font-weight: 500;
  color: #47566b; line-height: 1.6; }
.banner-lg__chips { display: flex; gap: clamp(5px, 0.75vw, 14px); flex-wrap: wrap; }
.banner-lg__chips span { background: rgba(26, 111, 219, 0.08); color: #1a6fdb;
  border-radius: 10px; padding: 0.36em 0.8em; font-size: clamp(0.66rem, 1vw, 0.98rem); font-weight: 700; }
.banner-lg__cta { display: flex; align-items: center; gap: clamp(8px, 1vw, 18px);
  margin-top: clamp(2px, 0.4vw, 8px); flex-wrap: wrap; }
.banner-lg__btn { display: inline-flex; align-items: center; gap: 0.5em;
  background: linear-gradient(135deg, #2b7fff, #1a6fdb); color: #fff; border-radius: 999px;
  padding: 0.62em 1.55em; font-size: clamp(0.78rem, 1.25vw, 1.2rem); font-weight: 800;
  box-shadow: 0 10px 24px rgba(26, 111, 219, 0.35);
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s, gap 0.2s; }
.banner-lg__btn:hover { transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(26, 111, 219, 0.45); filter: brightness(1.06);
  gap: 0.85em; color: #fff; text-decoration: none; }
.banner-lg__btn svg { transition: transform 0.2s; }
.banner-lg__btn:hover svg { transform: translateX(-4px); }
.banner-lg__btn--ghost { background: #fff; color: #123a7a; border: 2px solid #cdd9e8; box-shadow: none; }
.banner-lg__btn--ghost:hover { border-color: #1a6fdb; color: #1a6fdb; filter: none;
  box-shadow: 0 8px 20px rgba(26, 111, 219, 0.15); }
/* Product cards + pedestal are positioned against the whole banner (no art
   wrapper) so their width/height percentages give the intended landscape tiles. */
.banner-lg__pedestal { position: absolute; inset-inline-end: 5%; bottom: 9%; width: 34%;
  height: 9%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(15, 35, 70, 0.16), transparent 70%); }
/* Card wrapper crops the catalog photo (cover + object-position) so the white
   trunk product fills the tile and the top watermark/whitespace are trimmed —
   the raw square shots looked empty on a white card. */
.banner-lg__ph { position: absolute; overflow: hidden; border-radius: 16px; background: #fff;
  border: 1px solid rgba(15, 35, 70, 0.1); box-shadow: 0 18px 40px rgba(15, 35, 70, 0.22);
  padding: 3%; animation: lgFloat 7s ease-in-out infinite; }
.banner-lg__ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.banner-lg__ph--a { inset-inline-end: 3%; top: 13%; width: 25%; height: 66%; z-index: 2; }
.banner-lg__ph--b { inset-inline-end: 19%; top: 28%; width: 31%; height: 54%; z-index: 1;
  animation-delay: 1.2s; }
.banner-lg__logo { position: absolute; inset-inline-end: 7%; bottom: 8%; z-index: 3; background: #fff;
  border-radius: 13px; padding: 0.5em 1.05em; box-shadow: 0 8px 24px rgba(15, 35, 70, 0.14);
  display: flex; align-items: center; }
.banner-lg__logo img { height: clamp(22px, 2.6vw, 48px); display: block; }
@keyframes lgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ═══ Dahua promo slide — faithful to بنر داهوا.dc.html (deep navy + blue/red) ═══ */
.banner-lg--dahua { background: linear-gradient(115deg, #060d18 0%, #0b1a30 45%, #0a1526 100%); }
/* faint circuit grid overlay */
.banner-lg--dahua::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(120, 170, 255, 0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(120, 170, 255, 0.05) 1px, transparent 1px);
  background-size: 46px 46px; }
/* blue glow (physical left) + red glow (physical top-right), via the arc slots */
.banner-lg--dahua .banner-lg__arc--big { border: 0; box-shadow: none; width: 44%;
  background: radial-gradient(circle, rgba(29, 120, 255, 0.28) 0%, rgba(29, 120, 255, 0.07) 45%, transparent 68%); }
.banner-lg--dahua .banner-lg__arc--top { border: 0; width: 28%;
  background: radial-gradient(circle, rgba(230, 0, 18, 0.16) 0%, transparent 66%); }
.banner-lg--dahua .banner-lg__edge { background: linear-gradient(180deg, #e60012, #a3000d); }
.banner-lg--dahua .banner-lg__pill { background: rgba(255, 255, 255, 0.06);
  border-color: rgba(120, 170, 255, 0.28); color: #ff5a5a; }
.banner-lg--dahua .banner-lg__pill i { background: #e60012; box-shadow: 0 0 10px #e60012; }
.banner-lg--dahua .banner-lg__title { color: #ffffff; }
.banner-lg--dahua .banner-lg__title span { color: #2b9dff; }
.banner-lg--dahua .banner-lg__bar { background: linear-gradient(90deg, #2b9dff, #e60012); }
.banner-lg--dahua .banner-lg__sub { color: #aebdd2; }
.banner-lg--dahua .banner-lg__chips span { background: rgba(43, 157, 255, 0.12); color: #7dc0ff;
  border: 1px solid rgba(43, 157, 255, 0.25); }
.banner-lg--dahua .banner-lg__btn { background: linear-gradient(135deg, #2b9dff, #1a6fdb);
  box-shadow: 0 10px 24px rgba(26, 111, 219, 0.4); }
.banner-lg--dahua .banner-lg__btn:hover { background: linear-gradient(135deg, #1a6fdb, #0f4fa8);
  box-shadow: 0 16px 32px rgba(26, 111, 219, 0.5); }
.banner-lg--dahua .banner-lg__btn--ghost { background: rgba(255, 255, 255, 0.04); color: #eaf1fb;
  border-color: rgba(150, 190, 240, 0.35); box-shadow: none; }
.banner-lg--dahua .banner-lg__btn--ghost:hover { border-color: #2b9dff; color: #2b9dff;
  background: rgba(255, 255, 255, 0.07); box-shadow: none; }
.banner-lg--dahua .banner-lg__pedestal { background: radial-gradient(ellipse at center, rgba(43, 157, 255, 0.35), transparent 70%); }
/* Cards: camera scene fills (cover, cropped low); switch contained on Dahua blue. */
.banner-lg--dahua .banner-lg__ph { background: #0a1526; border-color: rgba(120, 170, 255, 0.18);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); padding: 0; }
.banner-lg--dahua .banner-lg__ph--a img { object-fit: cover; object-position: center 62%; }
.banner-lg--dahua .banner-lg__ph--b { background: #1258b8; }

@media (max-width: 700px) {
  /* Mobile: a CONSISTENT fixed-size promo — every slide is the same box (4:5), so the
     slider never jumps in height while auto-advancing. BOTH product photos sit
     side-by-side above centred text; slides stack + cross-fade. Content is sized to fit. */
  .promo-slider { aspect-ratio: 4 / 5; max-height: 88vh; border-radius: 16px; }
  .promo-slide { position: absolute; inset: 0; }
  .promo-slide > img { width: 100%; height: 100%; object-fit: cover; }  /* admin image banners */
  .banner-lg { display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.5rem; padding: 1.1rem 1rem; text-align: center; }
  .banner-lg__ph { animation: none; }
  .banner-lg__arc, .banner-lg__pedestal, .banner-lg__logo { display: none; }
  /* both photos in a row on top */
  .banner-lg__art { display: flex; flex-direction: row; gap: 0.55rem; width: 100%;
    justify-content: center; order: -1; margin-bottom: 0.2rem; }
  .banner-lg__ph--a, .banner-lg__ph--b { position: static; display: block; inset: auto;
    transform: none; margin: 0; width: 46%; max-width: 168px; height: auto; aspect-ratio: 16 / 10; }
  .banner-lg__tx { position: static; width: 100%; max-width: 100%; padding: 0;
    align-items: center; text-align: center; justify-content: center; gap: 0.38rem; }
  .banner-lg__pill { font-size: 0.7rem; }
  .banner-lg__title { font-size: 1.1rem; line-height: 1.32; }
  .banner-lg__bar { align-self: center; }
  .banner-lg__sub { font-size: 0.77rem; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .banner-lg__chips { justify-content: center; }
  .banner-lg__cta { justify-content: center; flex-wrap: wrap; width: 100%; margin-top: 0.1rem; }
  .banner-lg__btn { font-size: 0.82rem; padding: 0.55em 1.3em; }
}
@media (prefers-reduced-motion: reduce) { .banner-lg__ph { animation: none; } }

/* Brand page: logo card at the top of the listing. */
.brand-head { display: flex; align-items: center; gap: 1.1rem; margin: 1.3rem 0 1rem; }
.brand-head__logo { flex: none; width: 112px; height: 112px; border-radius: 18px;
  background: #fff; border: 1px solid var(--c-border); box-shadow: var(--shadow-card);
  display: grid; place-items: center; padding: 0.8rem; }
.brand-head__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-head__tx h1 { margin: 0 0 0.3rem; }
@media (max-width: 560px) {
  .brand-head__logo { width: 84px; height: 84px; border-radius: 14px; padding: 0.6rem; }
  .brand-head__tx h1 { font-size: 1.15rem; }
}

/* Hero stats row (mock): flat on the hero navy, teal values, pulse flanks. */
.hero__stats { display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 2.6vw, 2.4rem);
  margin-top: clamp(1.2rem, 2.6vw, 2.4rem); padding-block: 1.25rem 0.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09); }
.hero__stats-pulse { flex: 1 1 0; min-width: 0; max-width: 380px; height: 30px; }
.hstat { display: flex; align-items: baseline; gap: 0.45rem; white-space: nowrap; }
.hstat b { color: #2dd4bf; font-size: clamp(1.05rem, 1.7vw, 1.5rem); font-weight: 800;
  font-variant-numeric: tabular-nums; }
.hstat span { color: rgba(255, 255, 255, 0.82); font-size: clamp(0.74rem, 1vw, 0.95rem); }
@media (max-width: 900px) {
  .hero__stats { flex-wrap: wrap; justify-content: center; gap: 0.8rem 1.7rem; }
  .hero__stats-pulse { display: none; }
}

/* ═══ Light & airy hero (owner-selected direction) — flips the hero to a bright,
   premium look; the logo card stays a dark panel so the light logo reads clearly. ═══ */
.hero { color: var(--c-text);
  background:
    radial-gradient(72% 72% at 12% -6%, rgba(37, 99, 235, 0.12), transparent 60%),
    radial-gradient(64% 72% at 102% 104%, rgba(34, 211, 238, 0.12), transparent 55%),
    linear-gradient(165deg, #edf3fc 0%, #f8fbfe 52%, #e9f1fb 100%); }
.hero::before { opacity: 0.20; }
.orb { opacity: 0.16; filter: blur(78px); }
.hero__badge { background: rgba(37, 99, 235, 0.09); color: var(--c-primary); border: 1px solid rgba(37, 99, 235, 0.20); }
.hero h1 { color: var(--c-ink); }
.hero__copy p { color: var(--c-text-muted); }
.hero__quick-label { color: var(--c-text-muted); }
.hero__search { border: 1px solid rgba(37, 99, 235, 0.14); }
.hero__chip { background: #fff; color: var(--c-text); border: 1px solid var(--c-border); }
.hero__chip:hover { background: #fff; border-color: var(--c-primary); color: var(--c-primary); }
.hstat b { color: var(--c-ink); }
.hstat span { color: var(--c-text-muted); }
.hero-card { background: linear-gradient(160deg, #0e1f45 0%, #0a1730 100%); border-color: rgba(255, 255, 255, 0.10); }

/* ═══ Form validation messages — bold + red so customers can't miss them ═══ */
.errorlist { list-style: none; margin: 0.35rem 0 0.55rem; padding: 0; }
.errorlist li { color: #dc2626; font-weight: 700; font-size: 0.9rem; line-height: 1.75;
  display: flex; align-items: flex-start; gap: 0.4rem; }
.errorlist li::before { content: "!"; flex: none; width: 17px; height: 17px; margin-top: 1px;
  border-radius: 50%; background: #dc2626; color: #fff; font-size: 11px; font-weight: 800;
  display: inline-grid; place-items: center; }
.errorlist.nonfield, ul.errorlist:first-child { background: rgba(220, 38, 38, 0.07);
  border: 1px solid rgba(220, 38, 38, 0.24); border-radius: 10px; padding: 0.6rem 0.75rem; margin-bottom: 0.8rem; }
.helptext { display: block; color: var(--c-text-muted); font-size: 0.82rem; margin-top: 0.25rem; }

/* ═══ Mobile UX pass: no header curve, compact single-row header, bottom nav bar ═══ */
.hdr, .catnav { border-end-start-radius: 0; border-end-end-radius: 0; }
.botnav { display: none; }

@media (max-width: 820px) {
  /* Compact single-row header: small logo + search + account/cart. Nav lives in the
     bottom bar now, so the top-right burger is removed. */
  .hdr__burger, .hdr__spacer { display: none !important; }
  .hdr__row { flex-wrap: nowrap; padding-block: 0.45rem; gap: 0.5rem; align-items: center; min-height: 0; }
  .hdr__logo { flex: 0 0 auto; justify-content: flex-start; }
  .hdr__logo img { height: 40px; }
  .hdr__search { order: 0; flex: 1 1 auto; flex-basis: auto; max-width: none; min-width: 0; }
  .hdr__search input { min-width: 0; }
  .hdr::after { inset-inline: 16px; }

  /* Bottom navigation bar */
  .botnav { display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 950;
    background: var(--c-card); border-top: 1px solid var(--c-border);
    box-shadow: 0 -6px 20px rgba(11, 18, 32, 0.09); padding-bottom: env(safe-area-inset-bottom); }
  .botnav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 2px 7px; min-height: 58px; border: 0; background: transparent; cursor: pointer;
    color: var(--c-text-muted); font: inherit; font-size: 11px; font-weight: 500; text-decoration: none; position: relative; }
  .botnav__item svg { width: 24px; height: 24px; }
  .botnav__item:active { background: var(--c-bg); }
  .botnav__item.is-active { color: var(--c-primary); font-weight: 700; }
  .botnav__badge { position: absolute; top: 4px; inset-inline-end: 22%; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: var(--c-danger); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
  .botnav__badge[hidden] { display: none; }

  body { padding-bottom: 62px; }              /* clear the fixed bottom nav */
  .fab, .to-top { bottom: calc(74px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 420px) { .hdr__logo img { height: 38px; } }

/* Ensure the mobile category drawer's open state always wins (source-order + !important),
   so the bottom-nav «دسته‌بندی» tap reliably slides it in. */
.mnav.mnav--open { transform: translateX(0) !important; }
.mnav-backdrop.mnav-backdrop--open { opacity: 1 !important; visibility: visible !important; }

/* ═══ Beautiful mobile header: logo + one bright full-width search.
   Cart/account moved to the bottom nav, so the search gets the room it deserves. ═══ */
@media (max-width: 820px) {
  .hdr__actions { display: none; }
  .hdr__row { gap: 0.7rem; padding-block: 0.62rem; }
  .hdr__logo img { height: 42px; }

  /* Bright field that pops on the navy header; icon button lives inside it. */
  .hdr__search { height: 46px; background: #fff; border: 0; border-radius: 15px;
    padding-inline-start: 0.95rem; padding-inline-end: 0.3rem;
    box-shadow: 0 6px 18px rgba(2, 12, 32, 0.30); }
  .hdr__search:hover { border: 0; }
  .hdr__search:focus-within { background: #fff; border: 0;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.45), 0 6px 18px rgba(2, 12, 32, 0.30); }
  .hdr__search input { color: var(--c-text); font-size: 0.93rem; padding: 0.5rem 0; }
  .hdr__search input::placeholder { color: #94a3b8; }
  .hdr__search-label { display: none !important; }
  .hdr__search button { width: 38px; height: 38px; padding: 0; border-radius: 11px;
    margin-inline-end: 4px; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35); }
  .hdr__search button svg { width: 19px; height: 19px; }
  .hdr::after { inset-inline: 14px; opacity: 0.7; }
}

/* Hero logo card: black ground so the official cyan-on-black logo sits seamlessly. */
.hero-card { background: linear-gradient(165deg, #050505 0%, #000 100%) !important;
  border-color: rgba(34, 211, 238, 0.18) !important; }
.hero-card::before { background: radial-gradient(46% 46% at 60% 40%, rgba(34, 211, 238, 0.28), transparent 70%); }

/* ═══ Mobile header fixes: drop the stray pulse line, centre the search icon ═══ */
@media (max-width: 820px) {
  /* The header pulse trace sat right under the compact search and read as a stray
     blue border — remove it on mobile (it still runs on desktop). */
  .hdr::after { display: none; }
  /* The button is inline-flex with padding:0, so without justify-content the magnifier
     was pinned to the flex start instead of the middle. */
  .hdr__search button { justify-content: center; gap: 0; }
  /* Quiet focus: a soft inset ring instead of a bright halo. */
  .hdr__search:focus-within { box-shadow: 0 6px 18px rgba(2, 12, 32, 0.30),
    inset 0 0 0 2px rgba(37, 99, 235, 0.32); }
}

/* ═══ Mobile search: absolutely no blue frame (focus ring / outline) ═══ */
@media (max-width: 820px) {
  .hdr__search,
  .hdr__search:hover,
  .hdr__search:focus-within { border: 0 !important; outline: none !important;
    box-shadow: 0 6px 18px rgba(2, 12, 32, 0.30) !important; }
  .hdr__search input,
  .hdr__search input:focus,
  .hdr__search input:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; }
}

/* ═══ Mobile visual pass (verified against a real 390px render) ═══ */
@media (max-width: 820px) {
  /* 1) Logo was a 42px unreadable blob — make the wordmark legible. */
  .hdr__logo img { height: 52px; }
  .hdr__row { padding-block: 0.5rem; gap: 0.62rem; }

  /* 2) Hero was 698px ≈ 89% of the viewport — tighten type and rhythm. */
  .hero { padding-block: 1.5rem 0; }
  .hero h1 { font-size: clamp(1.45rem, 6.4vw, 1.95rem); line-height: 1.45; }
  .hero__badge { font-size: 0.72rem; padding: 0.3rem 0.72rem; }
  .hero__copy p { font-size: 0.92rem; line-height: 1.85; margin: 0.7rem 0 1rem; }
  .hero__search { margin-bottom: 0.85rem; }
  .hero__quick { margin-top: 0.7rem; gap: 0.4rem; }
  .hero__chip { font-size: 0.78rem; padding: 0.28rem 0.72rem; }
  .trust { margin-top: 1rem; padding-top: 0.9rem; gap: 0.5rem 1.2rem; }

  /* 3) Banners: 4/5 portrait made them 435px (56% of screen). Squarer + tighter. */
  .promo-slider { aspect-ratio: 1 / 1; }
  .banner-lg { padding: 0.95rem 1rem; }
  .banner-lg__ph--a, .banner-lg__ph--b { max-width: 132px; }
  .banner-lg__btn { height: 42px; font-size: 0.85rem; padding-inline: 0.9rem; }
}

/* ═══ Banner calm-down on phones + sitewide scroll-reveal (dynamic feel) ═══ */
@media (max-width: 820px) {
  /* The 8px red edge read as harsh/unfinished against the soft blue card. */
  .banner-lg__edge { display: none; }
  /* Pill + title + rule + copy + 3 chips + 2 CTAs is too much stacked on a phone. */
  .banner-lg__chips { display: none; }
}

/* Scroll-reveal. Guarded by html.js-reveal, which only JS adds — so with JS off
   (or reduced motion) every section stays fully visible. */
html.js-reveal main section { opacity: 0; transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease; will-change: opacity, transform; }
html.js-reveal main section.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js-reveal main section { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* REVERT: my scroll-reveal collided with the site's existing .reveal/.in system and
   left every section at opacity:0 (blank page). Neutralise it — the site's own
   reveal animation already handles this. */
html.js-reveal main section { opacity: 1 !important; transform: none !important; }

/* ═══ Live pulse: a bright signal travels along the hero waveform ═══ */
.hero__stats-pulse .pulse-run {
  stroke: #5eead4;
  filter: drop-shadow(0 0 3px rgba(94, 234, 212, 0.9));
  stroke-dasharray: 46 620;   /* a short lit segment on a long gap */
  stroke-dashoffset: 666;
  animation: pulseRun 2.6s linear infinite;
}
.hero__stats-pulse:last-child .pulse-run { animation-delay: 1.3s; }  /* offset the two flanks */
@keyframes pulseRun { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero__stats-pulse .pulse-run { animation: none; opacity: 0; }
}

/* ═══ Shorter promo banner on phones (owner: 5/4 is better) ═══ */
@media (max-width: 820px) {
  .promo-slider { aspect-ratio: 5 / 4; }
}

/* ═══════════════════ /ops console: filters, status colours, charts ═══════════════════ */
.ops-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ops-subhead { margin-top: 2rem; }
.ops-range { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin: 0.9rem 0 1rem; padding: 0.75rem 0.9rem; background: var(--c-card);
  border: 1px solid var(--c-border); border-radius: 12px; }
.ops-range__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ops-chip { font-size: 0.85rem; padding: 0.4rem 0.85rem; border-radius: 999px;
  border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-text-muted); transition: 0.15s; }
.ops-chip:hover { border-color: var(--c-primary); color: var(--c-primary); text-decoration: none; }
.ops-chip.is-on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 700; }
.ops-chip b { font-weight: 700; }
.ops-range__custom { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ops-range__custom label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--c-text-muted); }
.ops-range__custom input[type="date"], .ops-range__custom select {
  height: 38px; padding: 0 0.6rem; border: 1px solid var(--c-border); border-radius: 9px;
  background: var(--c-bg); font: inherit; font-size: 0.85rem; color: var(--c-text); }
.ops-range__label { font-size: 0.88rem; color: var(--c-text-muted); }

/* Alert strip for work waiting on the operator. */
.ops-alert { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  background: rgba(245, 158, 11, 0.10); border: 1px solid rgba(245, 158, 11, 0.35);
  color: #92400e; border-radius: 11px; padding: 0.7rem 0.95rem; margin-bottom: 0.9rem; font-size: 0.92rem; }
.ops-alert b { font-weight: 800; }
.ops-alert a { color: #92400e; font-weight: 700; text-decoration: underline; }

/* Status legend + swatches (same hues as the .pill--* classes). */
.ops-legend { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.9rem; }
.ops-legend__item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem;
  color: var(--c-text-muted); background: var(--c-card); border: 1px solid var(--c-border);
  border-radius: 999px; padding: 0.32rem 0.75rem; }
.ops-legend__item:hover { border-color: var(--c-primary); text-decoration: none; }
.ops-legend__item.is-on { border-color: var(--c-primary); color: var(--c-primary); font-weight: 700; }
.ops-legend__sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ops-sw--pending { background: #f59e0b; } .ops-sw--paid { background: #2563eb; }
.ops-sw--processing { background: #8b5cf6; } .ops-sw--shipped { background: #0ea5e9; }
.ops-sw--delivered { background: #10b981; } .ops-sw--cancelled { background: #ef4444; }

/* Order rows: a status colour bar so the queue can be scanned at a glance. */
.ops-row > td:first-child { position: relative; }
.ops-row > td:first-child::before { content: ""; position: absolute; inset-block: 0;
  inset-inline-start: 0; width: 4px; border-radius: 3px; background: transparent; }
.ops-row--pending > td:first-child::before { background: #f59e0b; }
.ops-row--paid > td:first-child::before { background: #2563eb; }
.ops-row--processing > td:first-child::before { background: #8b5cf6; }
.ops-row--shipped > td:first-child::before { background: #0ea5e9; }
.ops-row--delivered > td:first-child::before { background: #10b981; }
.ops-row--cancelled > td:first-child::before { background: #ef4444; }
.ops-row--pending { background: rgba(245, 158, 11, 0.05); }
.ops-row--paid { background: rgba(37, 99, 235, 0.05); }

/* KPI cards */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; margin-bottom: 1.2rem; }
.kpi { background: var(--c-card); border: 1px solid var(--c-border); border-radius: 14px;
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.kpi__label { font-size: 0.82rem; color: var(--c-text-muted); }
.kpi__value { font-size: 1.45rem; font-weight: 800; color: var(--c-ink); line-height: 1.3; }
.kpi__value small { font-size: 0.72rem; font-weight: 500; color: var(--c-text-muted); margin-inline-start: 0.3rem; }
.kpi--sales { background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(34,211,238,0.06)); border-color: rgba(37,99,235,0.25); }
.kpi--members { background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(52,211,153,0.05)); border-color: rgba(16,185,129,0.25); }
@media (max-width: 900px) { .kpis { grid-template-columns: 1fr 1fr; } }

/* Chart cards */
.chartcard { background: var(--c-card); border: 1px solid var(--c-border); border-radius: 14px;
  padding: 1.1rem 1.2rem 1rem; margin-bottom: 1rem; }
.chartcard h2 { font-size: 1.02rem; margin: 0 0 0.9rem; color: var(--c-ink); }
.chartcard__note { font-weight: 500; font-size: 0.75rem; color: var(--c-text-subtle); }
.chartgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .chartgrid { grid-template-columns: 1fr; } }

/* Column chart (sales / members per day) */
.chart--cols { display: flex; align-items: flex-end; gap: 2px; height: 170px;
  padding: 0.5rem 0.2rem 0; border-bottom: 1px solid var(--c-border); }
.chart__col { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 3px; }
.chart__bar { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #3b82f6, #2563eb); transition: filter 0.15s; }
.chart__col:hover .chart__bar { filter: brightness(1.25); }
.chart__bar--member { background: linear-gradient(180deg, #34d399, #10b981); }
.chart__axis { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  margin-top: 0.5rem; font-size: 0.76rem; color: var(--c-text-subtle); }
.chart__peak { color: var(--c-text-muted); font-weight: 600; }

/* Horizontal bars (top products / categories / views / provinces) */
.hbar { display: grid; grid-template-columns: minmax(0, 1fr) 96px auto; align-items: center;
  gap: 0.6rem; padding: 0.32rem 0; font-size: 0.85rem; }
.hbar__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--c-text); }
a.hbar__name:hover { color: var(--c-primary); }
.hbar__track { height: 8px; border-radius: 999px; background: var(--c-bg); overflow: hidden; }
.hbar__track i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #60a5fa); min-width: 2px; }
.hbar__track i.hbar--cat { background: linear-gradient(90deg, #0891b2, #22d3ee); }
.hbar__track i.hbar--view { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.hbar__track i.hbar--prov { background: linear-gradient(90deg, #059669, #34d399); }
.hbar__val { white-space: nowrap; font-weight: 700; color: var(--c-ink); font-size: 0.82rem; }
.hbar__val small { font-weight: 500; color: var(--c-text-subtle); margin-inline-start: 0.3rem; font-size: 0.72rem; }

/* Moderation rows */
.mod-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  background: var(--c-card); border: 1px solid var(--c-border); border-inline-start-width: 4px;
  border-radius: 12px; padding: 0.9rem 1rem; margin-bottom: 0.6rem; }
.mod-row--pending { border-inline-start-color: #f59e0b; }
.mod-row--approved { border-inline-start-color: #10b981; }
.mod-row--rejected { border-inline-start-color: #ef4444; }
.mod-row__body { min-width: 0; flex: 1; }
.mod-row__meta { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.35rem; font-size: 0.85rem; }
.mod-row__stars { color: #d97706; font-weight: 700; }
.mod-row__date { color: var(--c-text-subtle); font-size: 0.78rem; }
.mod-row__product { display: inline-block; font-size: 0.83rem; font-weight: 700; color: var(--c-primary); margin-bottom: 0.3rem; }
.mod-row__product--none { color: var(--c-text-subtle); font-weight: 500; }
.mod-row__text { margin: 0.25rem 0 0; color: var(--c-text); line-height: 1.85; font-size: 0.9rem; }
.mod-actions form { display: flex; gap: 0.35rem; flex-wrap: wrap; }

/* Pricing steps */
.pricestep { background: var(--c-card); border: 1px solid var(--c-border); border-radius: 14px;
  padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.pricestep__h { display: flex; align-items: center; gap: 0.55rem; font-size: 1.02rem; margin: 0 0 0.8rem; color: var(--c-ink); }
.pricestep__h span { width: 26px; height: 26px; border-radius: 50%; background: var(--c-primary);
  color: #fff; display: grid; place-items: center; font-size: 0.82rem; font-weight: 800; flex: none; }

/* Jalali (Shamsi) date inputs — native <input type="date"> is Gregorian-only, so the
   console uses plain text inputs and parses Jalali server-side. */
.ops-range__custom input.jdate { width: 118px; text-align: center; letter-spacing: 0.02em;
  height: 38px; padding: 0 0.5rem; border: 1px solid var(--c-border); border-radius: 9px;
  background: var(--c-bg); font: inherit; font-size: 0.85rem; color: var(--c-text); }
.ops-range__custom input.jdate:focus { outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); }

/* One-click price editing inside the /ops/ product list. */
.priceedit { display: flex; align-items: center; gap: 0.35rem; }
.priceedit input { width: 118px; height: 36px; padding: 0 0.55rem; text-align: start;
  border: 1px solid var(--c-border); border-radius: 9px; background: var(--c-bg);
  font: inherit; font-size: 0.86rem; font-variant-numeric: tabular-nums; color: var(--c-text); }
.priceedit input:focus { outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); background: var(--c-card); }
.priceedit button { height: 36px; padding-inline: 0.7rem; border: 1px solid var(--c-border);
  background: var(--c-bg); border-radius: 9px; font: inherit; font-size: 0.78rem;
  color: var(--c-text-muted); cursor: pointer; transition: 0.15s; white-space: nowrap; }
.priceedit button:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.priceedit.is-saved input { border-color: #10b981; background: rgba(16, 185, 129, 0.06); }
.priceedit.is-error input { border-color: var(--c-danger); background: rgba(239, 68, 68, 0.06); }
.priceedit__ok { color: #10b981; font-weight: 800; }
.priceedit__err { color: var(--c-danger); font-weight: 800; }

/* ── Pricing grid: thumbnail + inline price + save-all ──────────────────────
   The list is paginated (it used to be truncated at 60 rows, hiding most of the
   catalogue), so it needs paging controls and an explicit "save everything on
   this page" action. */
.pricehead { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; }
.pricehead p { margin: 0; }
.perpage { display: flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; }
.perpage__opt { min-width: 34px; height: 30px; padding-inline: 0.5rem; display: inline-grid;
  place-items: center; border: 1px solid var(--c-border); border-radius: 8px;
  background: var(--c-bg); color: var(--c-text-muted); text-decoration: none;
  font-variant-numeric: tabular-nums; }
.perpage__opt:hover { border-color: var(--c-primary); color: var(--c-primary); }
.perpage__opt.is-on { background: var(--c-primary); border-color: var(--c-primary);
  color: #fff; font-weight: 700; }

/* Product cell: 44px thumbnail beside the name. */
.prodcell { display: flex; align-items: center; gap: 0.6rem; }
.prodcell__thumb { width: 44px; height: 44px; flex: none; border-radius: 8px;
  border: 1px solid var(--c-border); background: var(--c-bg); overflow: hidden;
  display: grid; place-items: center; }
.prodcell__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.prodcell__noimg { font-size: 1rem; opacity: 0.35; }
.prodcell__text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.prodcell__text a { text-decoration: none; color: var(--c-ink); }
.prodcell__text a:hover { color: var(--c-primary); text-decoration: underline; }
.prodcell__sku { color: var(--c-text-muted); font-size: 0.72rem;
  font-variant-numeric: tabular-nums; unicode-bidi: isolate; }

.pricecell { display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
/* Wide enough for a grouped 9-digit Toman value (۳۳۳٬۵۰۰٬۰۰۰) without clipping. */
.priceinput { width: 148px; height: 36px; padding: 0 0.55rem; text-align: center;
  border: 1px solid var(--c-border); border-radius: 9px; background: var(--c-bg);
  font: inherit; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums; color: var(--c-text); }
.priceinput:focus { outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); background: var(--c-card); }
/* Edited but not yet written to the database. */
.priceinput.is-dirty { border-color: #f59e0b; background: rgba(245, 158, 11, 0.08);
  font-weight: 700; }
.priceinput.is-error { border-color: var(--c-danger); background: rgba(239, 68, 68, 0.06); }
.priceone { width: 34px; height: 36px; flex: none; border: 1px solid var(--c-border);
  background: var(--c-bg); border-radius: 9px; font: inherit; font-size: 0.9rem;
  color: var(--c-text-muted); cursor: pointer; transition: 0.15s; }
.priceone:hover { background: #10b981; border-color: #10b981; color: #fff; }

.pricebar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap;
  align-items: center; gap: 0.8rem; margin-top: 0.7rem; padding: 0.7rem 0.9rem;
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: 12px;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.07); }
.pricebar__count { font-size: 0.84rem; color: var(--c-text-muted); }
.pricebar__count.is-dirty { color: #b45309; font-weight: 700; }

.ops-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.4rem; margin-top: 0.9rem; }
.ops-pager a { min-height: 36px; padding: 0 0.75rem; display: inline-grid; place-items: center;
  border: 1px solid var(--c-border); border-radius: 9px; background: var(--c-card);
  color: var(--c-text); text-decoration: none; font-size: 0.83rem; }
.ops-pager a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.ops-pager__now { padding-inline: 0.6rem; font-size: 0.83rem; color: var(--c-text-muted); }

@media (max-width: 720px) {
  .pricetable .prodcell { gap: 0.45rem; }
  .prodcell__thumb { width: 36px; height: 36px; }
  .priceinput { width: 128px; font-size: 0.88rem; }
  .pricebar { flex-direction: column; align-items: stretch; text-align: center; }
}
.kpi--visits { background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(167,139,250,0.05)); border-color: rgba(124,58,237,0.25); }
.chart__bar--visit { background: linear-gradient(180deg, #a78bfa, #7c3aed); }
.hbar__track i.hbar--visit { background: linear-gradient(90deg, #7c3aed, #c4b5fd); }

/* ═══ /ops/ is a back-office console, not a shop page ═══
   Hide the storefront chrome so the operator gets the full window for work: the
   customer header alone cost 159px of vertical space on every admin screen. */
.ops-mode .hdr,
.ops-mode .site-footer,
.ops-mode .botnav,
.ops-mode .fab,
.ops-mode .to-top,
.ops-mode #splash,
.ops-mode .announcement { display: none !important; }
.ops-mode { padding-bottom: 0 !important; background: var(--c-bg); }

/* Compact console top bar (replaces the storefront header on /ops/). */
.opsbar { position: sticky; top: 0; z-index: 900; color: #e8eefb;
  background: linear-gradient(135deg, #0b1220 0%, #16264f 55%, #0b1220 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 4px 18px rgba(11, 18, 32, 0.28); }
.opsbar__row { max-width: 1400px; margin-inline: auto; padding: 0 1.1rem;
  display: flex; align-items: center; gap: 1.2rem; min-height: 56px; flex-wrap: wrap; }
.opsbar__brand { display: inline-flex; align-items: center; gap: 0.55rem; color: #fff;
  font-weight: 800; font-size: 0.95rem; flex: none; }
.opsbar__brand:hover { text-decoration: none; color: #fff; }
.opsbar__brand small { display: block; font-size: 0.68rem; font-weight: 500; color: #8fa6c7; margin-top: 1px; }
.opsbar__mark { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: linear-gradient(150deg, #2563eb, #22d3ee); color: #fff; }
.opsbar__mark svg { width: 18px; height: 18px; }
.opsbar__nav { display: flex; align-items: center; gap: 0.15rem; flex-wrap: wrap; flex: 1; }
.opsbar__nav a { font-size: 0.85rem; color: #b9c8e2; padding: 0.42rem 0.72rem; border-radius: 8px;
  white-space: nowrap; transition: background 0.15s, color 0.15s; }
.opsbar__nav a:hover { background: rgba(255, 255, 255, 0.09); color: #fff; text-decoration: none; }
.opsbar__nav a.is-on { background: rgba(37, 99, 235, 0.85); color: #fff; font-weight: 700; }
.opsbar__side { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.opsbar__link { font-size: 0.8rem; color: #9fb3d1; padding: 0.35rem 0.6rem; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14); white-space: nowrap; }
.opsbar__link:hover { color: #fff; border-color: rgba(255, 255, 255, 0.34); text-decoration: none; }
.opsbar__user { font-size: 0.8rem; color: #8fa6c7; padding-inline-start: 0.4rem;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-mode .ops { padding-top: 1.4rem; max-width: 1400px; }
@media (max-width: 820px) {
  .opsbar__row { min-height: 0; padding-block: 0.5rem; }
  .opsbar__side { width: 100%; order: 3; }
  .opsbar__nav { order: 4; width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .opsbar__nav::-webkit-scrollbar { display: none; }
}

/* 5 KPI cards were wrapping awkwardly in a 4-column grid. */
.kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* With only a couple of days of data each bar stretched to ~1234px and read as a
   giant block; cap the width and pack them from the start of the axis. */
.chart--cols { justify-content: flex-start; gap: 3px; }
.chart__col { flex: 1 1 auto; max-width: 44px; min-width: 4px; }

/* ═══ /ops/ readability + actionable dashboard ═══ */

/* A big number followed immediately by a small one read as a single figure:
   «۶» + «۱۴ بازدید» looked like «۶۱۴ بازدید». Units/secondary stats now sit on
   their own line, clearly separated from the value. */
.kpi__unit { font-size: 0.76rem; color: var(--c-text-muted); line-height: 1.6;
  padding-top: 0.15rem; border-top: 1px solid var(--c-border); margin-top: 0.35rem; }
.kpi__value { font-variant-numeric: tabular-nums; }

/* Charts were unreadable without magnitudes — print the value above each column. */
.chart__col { flex-direction: column; justify-content: flex-end; gap: 3px; }
.chart__num { font-size: 0.66rem; font-weight: 700; color: var(--c-text-muted);
  line-height: 1; text-align: center; min-height: 0.7rem; font-variant-numeric: tabular-nums; }
.chart--cols { height: 190px; }

/* Dashboard "what needs doing" cards — a count you cannot click is just noise,
   so each one links straight into its queue. */
.todos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.85rem; margin-bottom: 0.5rem; }
.todo { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.1rem;
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: 14px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.todo:hover { border-color: var(--c-primary); box-shadow: var(--sh); transform: translateY(-2px); text-decoration: none; }
.todo__n { font-size: 1.6rem; font-weight: 800; color: var(--c-text-subtle); line-height: 1.2;
  font-variant-numeric: tabular-nums; }
.todo__t { font-size: 0.88rem; color: var(--c-text-muted); }
.todo__go { font-size: 0.8rem; font-weight: 700; color: var(--c-primary); margin-top: 0.35rem; }
/* Highlight only queues that actually have work in them. */
.todo.is-hot { border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.05); }
.todo.is-hot .todo__n { color: #b45309; }

/* ═══ Short pages looked "small and empty" with a giant footer ═══
   Measured on a 390×844 phone: cart content 396px vs footer 1423px (3.6× bigger,
   169% of the viewport). Two fixes: push the footer down so content owns the screen,
   and stop the footer stacking into two screens' worth of links on mobile. */

/* 1) Sticky footer — short pages fill the viewport instead of floating in a strip. */
html { min-height: 100%; }
body { min-height: 100dvh; display: flex; flex-direction: column; }
body > main,
body > .container:not(.site-footer .container) { flex: 1 0 auto; }
.site-footer { flex: none; margin-top: auto; }

/* Give short pages real breathing room so the card centres in the space. */
main:has(.cempty), main:has(.account__empty) { display: flex; flex-direction: column; justify-content: center; }

/* 2) Footer link groups collapse on phones (see the sync script in base.html). */
.fgroup > summary { list-style: none; cursor: default; }
.fgroup > summary::-webkit-details-marker { display: none; }
.fgroup > summary h4 { margin: 0 0 0.6rem; }

@media (max-width: 820px) {
  .site-footer { padding-block: 1.4rem 1rem; }
  .site-footer__grid { gap: 0 !important; }
  .site-footer__brand img { height: 42px; }
  .site-footer__brand p { font-size: 0.85rem; }

  /* Each group becomes a tappable accordion row. */
  .fgroup { border-top: 1px solid rgba(255, 255, 255, 0.09); }
  .fgroup > summary { cursor: pointer; display: flex; align-items: center;
    justify-content: space-between; min-height: 48px; padding-block: 0.55rem; }
  .fgroup > summary h4 { margin: 0; font-size: 0.95rem; }
  .fgroup > summary::after { content: ""; width: 9px; height: 9px; flex: none;
    border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
    transform: rotate(45deg); margin-block-end: 4px; opacity: 0.6;
    transition: transform 0.2s ease; }
  .fgroup[open] > summary::after { transform: rotate(-135deg); margin-block: 4px 0; }
  .fgroup > ul, .fgroup > .site-footer__cell { padding-bottom: 0.6rem; }
  .fgroup > ul a, .fgroup > .site-footer__cell { min-height: 40px; display: flex; align-items: center; }

  .site-footer__trust { padding-top: 0.9rem; }
  .site-footer__copy { font-size: 0.75rem; padding-top: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) { .fgroup > summary::after { transition: none; } }

/* The footer's `ul { display:flex }` overrode the UA's hiding of closed <details>
   content, so the accordions rendered every link regardless of state. Hide it
   explicitly. Safe with JS off: the markup ships `open`, and only the mobile script
   ever closes a group. */
.fgroup:not([open]) > ul,
.fgroup:not([open]) > .site-footer__cell { display: none; }