/* ==========================================================================
   ARAD — Design system
   Tokens → base → layout → components → pages.
   Uses logical properties (inline/block) so RTL and LTR share one stylesheet.
   ========================================================================== */

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-wght.woff2") format("woff2-variations"), url("../fonts/Vazirmatn-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Color */
  --c-bg: #ffffff;
  --c-bg-subtle: #f6f5f2;
  --c-surface: #ffffff;
  --c-surface-2: #fbfbfa;
  --c-ink: #0d0d0e;
  --c-graphite: #2a2b2e;
  --c-text: #18181a;
  --c-muted: #6b6b70;
  --c-faint: #6e6e74;
  --c-border: #e8e7e3;
  --c-border-strong: #d6d5d0;
  --c-accent: #9a7a4c;
  --c-accent-soft: #f5f0e8;
  --c-success: #2e7a4e;
  --c-success-soft: #edf6f0;
  --c-warning: #a6640a;
  --c-warning-soft: #fbf3e6;
  --c-error: #b3261e;
  --c-error-soft: #fbeceb;
  --c-dark: #0f1012;
  --c-dark-2: #18191c;
  --c-on-dark: #f3f2ef;
  --c-on-dark-muted: #9c9ca2;
  --c-focus: #9a7a4c;

  /* Type */
  --font: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem);
  --fs-h1: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --fs-h2: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.78rem;
  --fs-price: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  --lh-tight: 1.35;
  --lh-body: 1.85;

  /* Space & shape */
  --gutter: clamp(1rem, 0.5rem + 2.4vw, 3rem);
  --container: 1360px;
  --section: clamp(1.5rem, 1rem + 1.75vw, 3rem);
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(15 16 18 / 4%);
  --shadow: 0 10px 30px -12px rgb(15 16 18 / 12%), 0 2px 6px rgb(15 16 18 / 4%);
  --shadow-lg: 0 30px 70px -30px rgb(15 16 18 / 30%);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 160ms;
  --t: 280ms;
  --t-slow: 600ms;

  --header-h: 72px;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: 700; color: var(--c-ink); }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--c-brand, #78d850); color: #10140f; }
input, textarea { caret-color: var(--c-accent); }
[hidden] { display: none !important; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
:is(td, th).ltr { display: table-cell; } /* a cell stays a cell (e.g. part numbers in admin tables) */
.latin { font-feature-settings: "tnum"; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; inset-inline-start: 1rem; top: -100px; z-index: 100; background: var(--c-ink); color: #fff; padding: .6rem 1rem; border-radius: var(--r-sm); }
.skip-link:focus { top: 1rem; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--subtle { background: var(--c-bg-subtle); }
.section--dark { background: var(--c-dark); color: var(--c-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.stack > * + * { margin-block-start: var(--stack, 1rem); }
.grid { display: grid; gap: var(--gap, 1.5rem); }
.page-top { padding-block-start: clamp(2rem, 1rem + 3vw, 4rem); }

/* ── Typography ─────────────────────────────────────────────────────────── */
.display { font-size: var(--fs-display); line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }
.h1 { font-size: var(--fs-h1); font-weight: 800; }
.h2 { font-size: var(--fs-h2); font-weight: 750; }
.h3 { font-size: var(--fs-h3); font-weight: 700; }
.lead { font-size: var(--fs-lead); color: var(--c-muted); line-height: 1.9; }
.muted { color: var(--c-muted); }
.small { font-size: var(--fs-small); }
.caption { font-size: var(--fs-caption); color: var(--c-muted); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-muted); direction: ltr;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; }
.meta { font-size: var(--fs-caption); color: var(--c-muted); letter-spacing: .02em; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92em; letter-spacing: .01em; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-block-end: clamp(1rem, .7rem + 1vw, 1.75rem); }
.section-head__text { max-width: 620px; }
.section-head__text > * + * { margin-block-start: .9rem; }

/* ── Icons ──────────────────────────────────────────────────────────────── */
.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .icon--flip { transform: scaleX(-1); }
/* "Forward" arrows are drawn pointing left (RTL); mirror them for LTR. */
[dir="ltr"] .icon--fwd { transform: scaleX(-1); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--c-ink); --btn-fg: #fff; --btn-border: var(--c-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .7rem 1.5rem;
  border: 1px solid var(--btn-border); border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 600; font-size: .95rem; line-height: 1; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
}
.btn:hover { --btn-bg: var(--c-graphite); }
.btn:active { transform: scale(.98); }
.btn[disabled], .btn.is-disabled { opacity: .4; pointer-events: none; }
.btn--secondary { --btn-bg: transparent; --btn-fg: var(--c-ink); --btn-border: var(--c-border-strong); }
.btn--secondary:hover { --btn-bg: var(--c-bg-subtle); --btn-border: var(--c-ink); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--c-ink); --btn-border: #fff; }
.btn--light:hover { --btn-bg: #ecebe7; --btn-border: #ecebe7; }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-border: rgb(255 255 255 / 35%); }
.btn--outline-light:hover { --btn-bg: rgb(255 255 255 / 8%); --btn-border: #fff; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-ink); --btn-border: transparent; padding-inline: .9rem; }
.btn--ghost:hover { --btn-bg: var(--c-bg-subtle); }
.btn--sm { min-height: 38px; padding: .5rem 1rem; font-size: .85rem; }
.btn--lg { min-height: 56px; padding: .9rem 2rem; font-size: 1rem; }
.btn--block { width: 100%; }
.btn--danger { --btn-bg: transparent; --btn-fg: var(--c-error); --btn-border: transparent; }
.btn--danger:hover { --btn-bg: var(--c-error-soft); }
.btn .icon { width: 1.15em; height: 1.15em; }

.icon-btn {
  position: relative; display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--c-ink);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--c-bg-subtle); }
.icon-btn:active { transform: scale(.94); }
.icon-btn .icon { width: 22px; height: 22px; }
.icon-btn__count {
  position: absolute; inset-block-start: 4px; inset-inline-end: 2px;
  min-width: 18px; height: 18px; padding-inline: 5px; border-radius: var(--r-pill);
  background: var(--c-ink); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  transition: transform var(--t) var(--ease);
}
.icon-btn__count.is-bump { animation: bump var(--t-slow) var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 100% { transform: scale(1); } }

.link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--c-ink); border-block-end: 1px solid transparent; transition: border-color var(--t-fast) var(--ease), gap var(--t) var(--ease); }
.link:hover { border-color: currentColor; gap: .65rem; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 26px; padding-inline: .7rem; border-radius: var(--r-pill);
  font-size: .75rem; font-weight: 600; white-space: nowrap;
  background: var(--c-bg-subtle); color: var(--c-graphite);
}
.badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--success { background: var(--c-success-soft); color: var(--c-success); }
.badge--warning { background: var(--c-warning-soft); color: var(--c-warning); }
.badge--muted { background: var(--c-bg-subtle); color: var(--c-muted); }
.badge--accent { background: var(--c-accent-soft); color: var(--c-accent); }
.badge--neutral { background: var(--c-bg-subtle); color: var(--c-graphite); }
.badge--outline { background: transparent; border: 1px solid var(--c-border-strong); color: var(--c-graphite); }
.badge--dark { background: var(--c-ink); color: #fff; }
.badge--danger { background: var(--c-error-soft); color: var(--c-error); }
.chip-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.pdp-brand img { height: 12px; width: auto; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  /* Frosted glass: see-through tint, strong blur, a light edge along the bottom. */
  background: rgb(255 255 255 / 58%);
  backdrop-filter: saturate(190%) blur(28px); -webkit-backdrop-filter: saturate(190%) blur(28px);
  border-block-end: 1px solid rgb(255 255 255 / 45%);
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 25%);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.site-header.is-scrolled { border-color: rgb(0 0 0 / 8%); box-shadow: inset 0 -1px 0 rgb(255 255 255 / 25%), 0 8px 24px -16px rgb(0 0 0 / 25%); }
.site-header__bar { display: flex; align-items: center; gap: 1.5rem; height: var(--header-h); }
.brand-mark { display: inline-flex; align-items: center; gap: .65rem; font-weight: 800; font-size: 1.2rem; color: var(--c-ink); letter-spacing: .14em; direction: ltr; }
.brand-mark__glyph { width: 30px; height: 30px; }
.brand-logo { display: block; height: 46px; width: auto; }
.brand-logo--light { display: none; }
.site-footer .brand-logo--dark, .admin-side .brand-logo--dark { display: none; }
.site-footer .brand-logo--light, .admin-side .brand-logo--light { display: block; }
.site-footer .brand-logo { height: 58px; }
.drawer__head .brand-logo { height: 40px; }
@media (max-width: 720px) { .site-header .brand-logo { height: 38px; } }
.main-nav { flex: 1; display: flex; justify-content: center; }
.main-nav__list { display: flex; align-items: center; gap: .15rem; }
.main-nav__link {
  position: relative; display: inline-flex; align-items: center; height: 40px; padding-inline: .8rem;
  font-size: .9rem; font-weight: 500; color: var(--c-graphite); border-radius: var(--r-pill);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  white-space: nowrap;
}
@media (max-width: 1480px) { .main-nav__link { padding-inline: .55rem; font-size: .86rem; } }
@media (max-width: 1360px) { .main-nav__link--minor { display: none; } }
.main-nav__link:hover { color: var(--c-ink); background: var(--c-bg-subtle); }
.main-nav__link.is-active { color: var(--c-ink); font-weight: 700; }
.main-nav__link.is-active::after { content: ""; position: absolute; inset-inline: 50%; inset-block-end: 4px; width: 4px; height: 4px; margin-inline-start: -2px; border-radius: 50%; background: var(--c-accent); }
.header-tools { display: flex; align-items: center; gap: .15rem; margin-inline-start: auto; }
.nav-toggle { display: none; }

/* Two-row header: links, search field, tools, consult button and support phone; category bar below */
/* One control height for the whole row: search, currency, cart and phone line up. */
.site-header { --hctl: 44px; }
.site-header__bar { gap: .9rem; }
.site-header .main-nav { flex: 0 1 auto; justify-content: start; }
.site-header .main-nav__link { height: var(--hctl); padding-inline: .5rem; } /* tight links leave the search field more room */
@media (max-width: 1480px) { .site-header .main-nav__link { padding-inline: .4rem; } }
.site-header .header-tools { gap: .4rem; }
.site-header .header-tools .icon-btn { width: var(--hctl); height: var(--hctl); }
.site-header .currency-select__btn { height: var(--hctl); }

.header-search {
  flex: 1 1 260px; min-width: 200px; max-width: 520px; display: flex; align-items: center; gap: .6rem; height: var(--hctl); padding-inline: 1rem;
  border: 1px solid transparent; border-radius: var(--r-pill); background: var(--c-bg-subtle); color: var(--c-muted);
  font: inherit; font-size: .88rem; text-align: start; cursor: text; position: relative; margin: 0;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.header-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--c-ink); font: inherit; font-size: .9rem; }
.header-search input::placeholder { color: var(--c-muted); opacity: 1; }
.header-search .icon { flex: none; width: 20px; height: 20px; color: var(--c-graphite); }
.header-search:hover { border-color: var(--c-border-strong); background: var(--c-surface); }
.header-search:focus-within { border-color: var(--c-accent); background: var(--c-surface); box-shadow: 0 0 0 4px rgb(120 216 80 / 18%); }
/* Live results under the field */
.header-search__panel { position: absolute; z-index: 80; top: calc(100% + 10px); inset-inline: 0; min-width: min(460px, 90vw); margin: 0; padding: .5rem;
  max-height: min(70vh, 560px); overflow-y: auto; background: var(--c-surface, #fff); border: 1px solid var(--c-border); border-radius: 18px; box-shadow: var(--shadow-lg); }
.header-search__panel .search-item { grid-template-columns: 52px 1fr auto; gap: .8rem; padding: .5rem; }
.header-search__panel .search-item__img { width: 52px; height: 52px; }
.header-search__panel .search-hint { margin: 0; padding: .9rem; }
.site-header .header-tools { margin-inline-start: 0; }
.header-search-btn { display: none; }
.header-cart { background: var(--c-accent-soft); color: var(--c-accent); border-radius: 14px; }
.header-cart:hover { background: var(--c-accent-soft); filter: brightness(.97); }
.header-cart .icon-btn__count { background: var(--c-accent); }
.header-phone { display: inline-flex; align-items: center; gap: .65rem; flex: none; color: var(--c-ink); text-decoration: none; }
.header-phone__text { display: grid; line-height: 1.35; text-align: end; }
.header-phone__text strong { font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; }
.header-phone__text small { font-size: .74rem; color: var(--c-muted); font-weight: 600; }
.header-phone .icon { width: var(--hctl); height: var(--hctl); padding: 11px; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-accent); transition: transform var(--t-fast) var(--ease); }
.header-phone:hover .icon { transform: rotate(-12deg); }

.cat-bar {
  position: sticky; top: var(--header-h); z-index: 49; padding-block: .75rem 0;
  transition: transform .42s cubic-bezier(.22, .61, .36, 1), opacity .3s ease, background var(--t) var(--ease), padding var(--t) var(--ease);
}
/* Floating under the header after scrolling: frosted band like the header */
/* Floating under the header: no band behind it, only the category card itself (with a soft shadow) */
.cat-bar.is-floating { padding-block: .375rem; background: none; }
.cat-bar.is-floating .cat-bar__list { box-shadow: 0 10px 30px -12px rgb(15 16 18 / 22%); }
.cat-bar.is-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cat-bar { transition: none; } }
.cat-bar__list {
  display: flex; align-items: center; justify-content: space-between; gap: .1rem; margin: 0; padding: .4rem; list-style: none;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  overflow-x: auto; scrollbar-width: none;
}
.cat-bar__list::-webkit-scrollbar { display: none; }
/* More categories than fit: the clipped edge fades out and (with a mouse) gets an arrow that scrolls the list */
.cat-bar__wrap { position: relative; }
.cat-bar__wrap.can-start .cat-bar__list { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); }
.cat-bar__wrap.can-end .cat-bar__list { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent); }
.cat-bar__wrap.can-start.can-end .cat-bar__list { -webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent); }
[dir="ltr"] .cat-bar__wrap.can-start .cat-bar__list { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent); }
[dir="ltr"] .cat-bar__wrap.can-end .cat-bar__list { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); }
.cat-bar__arrow { position: absolute; inset-block: 0; z-index: 2; margin-block: auto; display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--c-border); border-radius: 50%; background: var(--c-surface); color: var(--c-graphite); box-shadow: var(--shadow-sm); cursor: pointer; }
.cat-bar__arrow[hidden] { display: none; }
.cat-bar__arrow:hover { color: var(--c-ink); border-color: var(--c-border-strong); }
.cat-bar__arrow .icon { width: 18px; height: 18px; }
.cat-bar__arrow--start { inset-inline-start: calc(var(--gutter, 1rem) + .35rem); }
.cat-bar__arrow--end { inset-inline-end: calc(var(--gutter, 1rem) + .35rem); }
@media (hover: none), (pointer: coarse) { .cat-bar__arrow { display: none; } }
.cat-bar__link {
  display: inline-flex; align-items: center; gap: .3rem; height: 44px; padding-inline: .4rem; border-radius: 12px;
  font-size: .86rem; font-weight: 500; color: var(--c-graphite); white-space: nowrap; text-decoration: none;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cat-bar__icon { display: inline-grid; place-items: center; width: 19px; height: 19px; }
.cat-bar__icon .cat-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.cat-bar__icon .cat-icon .ci-dot { fill: currentColor; stroke: none; }
.cat-bar__link:hover { background: var(--c-bg-subtle); color: var(--c-ink); }
.cat-bar__link:hover .cat-icon, .cat-bar__link.is-active .cat-icon { opacity: 1; color: var(--c-accent); stroke: var(--c-accent); }
.cat-bar__link:hover .ci-dot, .cat-bar__link.is-active .ci-dot { fill: var(--c-accent); }
.cat-bar__link.is-active { color: var(--c-ink); font-weight: 700; background: var(--c-accent-soft); }

/* Narrower desktops: category labels without icons so all of them fit on one line */
@media (max-width: 1400px) { .cat-bar__icon { display: none; } .cat-bar__link { padding-inline: .7rem; } }
@media (max-width: 1200px) { .cat-bar__link { padding-inline: .5rem; font-size: .82rem; } }
@media (max-width: 1480px) {
  .site-header__bar { gap: 1rem; }
  .site-header .main-nav__link--minor { display: none; }
  .header-phone__text { display: none; }
}
@media (max-width: 720px) {
  .header-search, .header-phone { display: none; }
  .header-search-btn { display: inline-grid; }
  .site-header .header-tools { margin-inline-start: auto; }
  .cat-bar { padding-block-start: .5rem; }
  .cat-bar.is-floating { padding-block: .25rem; }
  .cat-bar__list { justify-content: start; border-radius: var(--r); padding: .3rem; }
  .cat-bar__link { height: 40px; padding-inline: .7rem; font-size: .85rem; }
}

.currency-select { position: relative; }
/* Minimal currency switch: code on a soft tile (matches search and cart); compact menu */
.currency-select__btn {
  display: inline-flex; align-items: center; gap: .25rem; height: 38px; padding-inline: .7rem .55rem;
  border: 0; border-radius: 14px; background: var(--c-bg-subtle); color: var(--c-graphite); cursor: pointer;
  font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.currency-select__btn:hover, .currency-select[open] .currency-select__btn { background: var(--c-accent-soft); color: var(--c-ink); }
.currency-select__btn .icon { width: 12px; height: 12px; color: var(--c-muted); transition: transform var(--t) var(--ease); }
.currency-select[open] .currency-select__btn .icon { transform: rotate(180deg); }
.currency-select summary { list-style: none; }
.currency-select summary::-webkit-details-marker { display: none; }
.currency-select__menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 10; min-width: 168px; padding: .3rem;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; box-shadow: var(--shadow);
  animation: pop var(--t) var(--ease);
}
.currency-select__opt {
  display: grid; grid-template-columns: 1fr auto 8px; align-items: center; gap: .6rem; width: 100%; padding: .5rem .65rem;
  border: 0; border-radius: 10px; background: transparent; color: var(--c-graphite); text-align: start; font: inherit; font-size: .85rem; cursor: pointer;
}
.currency-select__opt:hover { background: var(--c-bg-subtle); color: var(--c-ink); }
.currency-select__opt[aria-current="true"] { color: var(--c-ink); font-weight: 700; }
.currency-select__opt::after { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.currency-select__opt[aria-current="true"]::after { background: var(--c-accent); }
.currency-select__code { color: var(--c-faint); font-size: .72rem; font-weight: 600; letter-spacing: .04em; direction: ltr; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

/* ── Drawer / modal ─────────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 80; background: rgb(13 13 14 / 42%);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity var(--t) var(--ease), visibility var(--t);
}
.overlay.is-open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 90; width: min(420px, 92vw);
  display: flex; flex-direction: column; background: var(--c-surface); box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform var(--t) var(--ease); visibility: hidden;
}
[dir="ltr"] .drawer { transform: translateX(-100%); }
.drawer.is-open { transform: none; visibility: visible; }
.drawer--end { inset-inline-start: auto; inset-inline-end: 0; transform: translateX(-100%); }
[dir="ltr"] .drawer--end { transform: translateX(100%); }
.drawer--end.is-open { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-block-end: 1px solid var(--c-border); }
.drawer__body { flex: 1; overflow-y: auto; padding: 1.25rem; overscroll-behavior: contain; }
.drawer__foot { padding: 1rem 1.25rem; border-block-start: 1px solid var(--c-border); }
.mobile-nav__list a { display: flex; align-items: center; justify-content: space-between; padding-block: .95rem; font-size: 1.1rem; font-weight: 600; border-block-end: 1px solid var(--c-border); }
.mobile-nav__list a .icon { color: var(--c-faint); }

.search-modal {
  position: fixed; inset-inline: 0; top: 0; z-index: 90; padding-block: 1rem 1.5rem;
  background: var(--c-surface); box-shadow: var(--shadow-lg); border-radius: 0 0 var(--r-lg) var(--r-lg);
  transform: translateY(-105%); transition: transform var(--t) var(--ease); visibility: hidden;
}
.search-modal.is-open { transform: none; visibility: visible; }
.search-box { display: flex; align-items: center; gap: .8rem; height: 64px; padding-inline: 1.2rem; border-radius: var(--r-pill); background: var(--c-bg-subtle); }
.search-box input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: 1.15rem; outline: none; }
.search-box .icon { color: var(--c-muted); width: 22px; height: 22px; }
.search-results { margin-block-start: 1rem; max-height: min(60vh, 560px); overflow-y: auto; }
.search-hint { padding: 1rem .25rem; }
.search-item { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 1rem; padding: .65rem; border-radius: var(--r); transition: background var(--t-fast) var(--ease); }
.search-item:hover, .search-item.is-active { background: var(--c-bg-subtle); }
.search-item__img { width: 64px; height: 64px; border-radius: var(--r-sm); background: var(--c-bg-subtle); object-fit: contain; }
.search-item__name { font-weight: 600; line-height: 1.5; }
.search-item__price { font-weight: 700; font-size: .9rem; white-space: nowrap; }
.search-item__price.is-inquiry { font-weight: 500; font-size: .8rem; color: var(--c-muted); }
.search-item__price { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.search-item__price.is-sale .search-item__now { color: var(--c-error); }
.search-item__was { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 500; color: var(--c-muted); }
.search-item__off { padding: 0 .35rem; border-radius: var(--r-pill); background: var(--c-error); color: #fff; font-size: .62rem; font-weight: 800; line-height: 1.6; }
img.search-item__img { padding: 4px; }
/* One close button: hide the browser's own "clear" cross in the search field. */
.search-box input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search-all { display: block; margin-block-start: .5rem; padding: .9rem; text-align: center; font-weight: 600; border-radius: var(--r); background: var(--c-bg-subtle); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; background: var(--c-dark); color: var(--c-on-dark); isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgb(15 16 18 / 92%) 0%, rgb(15 16 18 / 70%) 40%, rgb(15 16 18 / 10%) 100%); }
[dir="ltr"] .hero__media::after { background: linear-gradient(to right, rgb(15 16 18 / 92%) 0%, rgb(15 16 18 / 70%) 40%, rgb(15 16 18 / 10%) 100%); }
.hero__inner { min-height: min(88vh, 860px); display: flex; flex-direction: column; justify-content: center; padding-block: 7rem 5rem; }
.hero__content { max-width: 680px; }
.hero__content > * + * { margin-block-start: 1.6rem; }
.hero .display { color: #fff; }
.hero .lead { color: var(--c-on-dark-muted); max-width: 540px; }
.hero .eyebrow { color: var(--c-on-dark-muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; padding-block-start: .6rem; }
.hero__stats { display: flex; gap: clamp(1.5rem, 4vw, 4rem); margin-block-start: clamp(3rem, 6vw, 5rem); padding-block-start: 2rem; border-block-start: 1px solid rgb(255 255 255 / 12%); max-width: 680px; }
.hero__stat strong { display: block; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); font-weight: 750; color: #fff; line-height: 1.2; }
.hero__stat span { font-size: var(--fs-small); color: var(--c-on-dark-muted); }

/* ── Technology cards ───────────────────────────────────────────────────── */
.tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tech-card {
  position: relative; display: flex; flex-direction: column; min-height: 460px; overflow: hidden;
  border-radius: var(--r-lg); background: var(--c-dark-2); color: var(--c-on-dark); isolation: isolate;
}
.tech-card__visual { position: absolute; inset: 0; z-index: -1; }
.tech-card__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity var(--t) var(--ease); opacity: .9; }
.tech-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(15 16 18 / 95%) 20%, rgb(15 16 18 / 0%) 70%); }
.tech-card:hover .tech-card__visual img { transform: scale(1.06); opacity: 1; }
.tech-card__body { margin-block-start: auto; padding: 1.75rem; }
.tech-card__body > * + * { margin-block-start: .7rem; }
.tech-card__name { font-size: 2rem; font-weight: 800; color: #fff; direction: ltr; text-align: start; }
.tech-card__tagline { font-weight: 600; color: #fff; }
.tech-card__text { font-size: var(--fs-small); color: var(--c-on-dark-muted); line-height: 1.8; max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--t-slow) var(--ease), opacity var(--t) var(--ease); }
.tech-card:hover .tech-card__text, .tech-card:focus-within .tech-card__text { max-height: 8rem; opacity: 1; }
.tech-card__cta { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-small); font-weight: 600; color: #fff; padding-block-start: .4rem; }
.tech-card__cta .icon { transition: transform var(--t) var(--ease); }
.tech-card:hover .tech-card__cta .icon { transform: translateX(-4px); }
[dir="ltr"] .tech-card:hover .tech-card__cta .icon { transform: translateX(4px); }

/* ── Product card ───────────────────────────────────────────────────────── */
.product-grid { --cols: 4; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(.75rem, .4rem + 1vw, 1.25rem); }
.product-grid[data-cols="3"] { --cols: 3; }
.product-grid[data-cols="5"] { --cols: 5; gap: .75rem; }
.product-grid[data-cols="5"] .product-card__title { font-size: .86rem; }
@media (max-width: 1360px) { .product-grid[data-cols="5"] { --cols: 4; } .grid-switch button[data-cols="5"] { display: none; } }
/* Card: white tile with an inset photo panel · glass tool bar (top start) · brand (top end)
   · labels (bottom start) · discount (bottom end) · category + rating · title · divider · price + buy */
.product-card { container-type: inline-size; position: relative; display: flex; flex-direction: column; padding: .55rem; background: #fff; border: 1px solid var(--c-border); border-radius: 18px;
  box-shadow: 0 1px 2px rgb(15 16 18 / 4%); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.product-card:hover { border-color: var(--c-border-strong); box-shadow: 0 18px 40px -22px rgb(15 16 18 / 35%); transform: translateY(-4px); }
.product-card__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 13px; display: grid; place-items: center; background: #f6f7f9; }
.product-card__media > img { width: 78%; height: 78%; object-fit: contain; transition: transform var(--t-slow) var(--ease); }
.product-card:hover .product-card__media > img { transform: scale(1.05); }
.product-card__brand { position: absolute; z-index: 1; inset-block-start: .9rem; inset-inline-end: .95rem; display: flex; align-items: center; height: 22px; max-width: 42%;
  font-size: .72rem; font-weight: 800; letter-spacing: .03em; color: var(--c-graphite); white-space: nowrap; overflow: hidden; unicode-bidi: isolate; }
.product-card__brand img { height: 18px; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
/* Tools: frosted vertical bar */
.product-card__actions { position: absolute; z-index: 2; inset-block-start: .5rem; inset-inline-start: .5rem; display: flex; flex-direction: column; gap: 1px; padding: 2px;
  border-radius: 10px; background: rgb(255 255 255 / 72%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgb(15 16 18 / 6%), 0 6px 16px -10px rgb(15 16 18 / 30%); }
.product-card__actions .icon-btn { width: 26px; height: 26px; min-width: 0; padding: 0; background: transparent; box-shadow: none; color: var(--c-muted); border-radius: 8px; }
.product-card__actions .icon-btn:hover { background: rgb(15 16 18 / 6%); color: var(--c-ink); }
.product-card__actions .icon-btn.is-active { background: var(--c-ink); color: #fff; }
.product-card__actions .icon-btn .icon { width: 14px; height: 14px; }
.product-card__badges { position: absolute; z-index: 1; inset-block-end: .7rem; inset-inline-start: .7rem; max-width: 64%; display: flex; gap: .3rem; flex-wrap: wrap; pointer-events: none; }
.product-card__badges .badge { box-shadow: 0 4px 10px -6px rgb(15 16 18 / 45%); font-size: .7rem; }
.product-card__off { position: absolute; z-index: 1; inset-block-end: .7rem; inset-inline-end: .7rem; padding: .3rem .7rem; border-radius: 999px;
  background: linear-gradient(135deg, #ff6b6b, #e5484d); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2;
  box-shadow: 0 6px 16px -6px rgb(229 72 77 / 70%), inset 0 0 0 1px rgb(255 255 255 / 18%); }
.product-card__body { display: flex; flex-direction: column; gap: .3rem; padding: .8rem .55rem .55rem; flex: 1; text-align: start; }
.product-card__kicker { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .76rem; font-weight: 600; color: var(--c-muted); }
.product-card__kicker > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-card__rating { flex: none; display: inline-flex; align-items: center; gap: .2rem; color: var(--c-ink); font-weight: 800; }
.product-card__rating span { color: #f5a524; }
.product-card__title { font-size: 1rem; font-weight: 800; line-height: 1.7; color: var(--c-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.7em); }
.product-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.product-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; font-size: var(--fs-caption); color: var(--c-muted); }
.product-card__meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--c-faint); }
.product-card__buy { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin: auto .55rem 0; padding: .55rem 0 .15rem; border-block-start: 1px solid var(--c-border); }
.product-card__price { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.product-card__was { font-size: .88rem; color: var(--c-faint); white-space: nowrap; text-decoration-thickness: 1.5px; }
.product-card__now { font-size: 1.12rem; font-weight: 850; color: var(--c-ink); white-space: nowrap; line-height: 1.4; }
.product-card__approx { color: var(--c-muted); font-weight: 500; margin-inline-end: .15rem; }
.product-card__contact { font-size: .82rem; font-weight: 700; color: var(--c-graphite); line-height: 1.6; }
.product-card__cart { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 12px; background: var(--c-ink); color: #fff;
  box-shadow: 0 10px 20px -12px rgb(15 16 18 / 70%); transition: background var(--t-fast), transform var(--t-fast) var(--ease), box-shadow var(--t-fast); }
.product-card__cart:hover { background: var(--c-graphite); transform: translateY(-2px); box-shadow: 0 14px 24px -12px rgb(15 16 18 / 70%); }
.product-card__cart:active { transform: scale(.95); }
.product-card__cart .icon { width: 20px; height: 20px; }
.product-card__cart.is-loading { opacity: .7; }
.product-card__cart--ghost { background: #fff; color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-border-strong); }
.product-card__cart--ghost:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--c-ink); }
.product-card__cart-form { flex: none; }
/* Card: after the bag is pressed it becomes a small stepper — + / count / trash (minus above one) */
.product-card__cart[hidden], .card-stepper[hidden] { display: none; }
.card-stepper { display: inline-flex; align-items: center; height: 42px; padding: 0 2px; border-radius: 12px; background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-border-strong); animation: stepper-in .25s var(--ease); }
.card-stepper button { width: 30px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--c-accent-strong, #2e7f17); display: grid; place-items: center; cursor: pointer; transition: background var(--t-fast); }
.card-stepper button:hover { background: var(--c-bg-subtle); }
.card-stepper button[data-cart-step="-1"] { color: var(--c-error); }
.card-stepper .icon { width: 16px; height: 16px; }
.card-stepper output { min-width: 1.4rem; text-align: center; font-weight: 800; font-size: .95rem; color: var(--c-ink); }
.card-stepper .cart-stepper__minus, .card-stepper.is-many .cart-stepper__trash { display: none; }
.card-stepper.is-many .cart-stepper__minus { display: block; }
@media (max-width: 720px) {
  .card-stepper { height: 36px; border-radius: 10px; }
  .card-stepper button { width: 24px; height: 30px; border-radius: 7px; }
  .card-stepper .icon { width: 14px; height: 14px; }
  .card-stepper output { min-width: 1.1rem; font-size: .82rem; }
  .kit-strip .card-stepper, .deal-rail .card-stepper { height: 26px; border-radius: 7px; padding: 0; }
  .kit-strip .card-stepper button, .deal-rail .card-stepper button { width: 18px; height: 24px; }
  .kit-strip .card-stepper .icon, .deal-rail .card-stepper .icon { width: 11px; height: 11px; }
  .kit-strip .card-stepper output, .deal-rail .card-stepper output { min-width: .8rem; font-size: .66rem; }
}
.card-stepper.is-busy { opacity: .6; pointer-events: none; }
.product-card__now { font-size: clamp(.82rem, 7.4cqi, 1.12rem); }
@container (max-width: 250px) {
  .product-card__buy { gap: .45rem; margin-inline: .3rem; }
  .product-card__now { white-space: normal; line-height: 1.35; }
  .product-card__now bdi { display: inline-block; }
  .product-card__cart { width: 38px; height: 38px; border-radius: 11px; }
  .product-card__cart .icon { width: 17px; height: 17px; }
  .product-card__title { font-size: .9rem; }
  .product-card__body { padding-inline: .3rem; }
}

/* ── Price ──────────────────────────────────────────────────────────────── */
.price { display: flex; flex-direction: column; gap: .1rem; }
.price__main { font-size: var(--price-size, var(--fs-price)); font-weight: 750; color: var(--c-ink); line-height: 1.3; white-space: nowrap; }
.price__approx { color: var(--c-muted); font-weight: 500; margin-inline-end: .15rem; }
.price__note { font-size: var(--fs-caption); color: var(--c-muted); }
.price__was { display: inline-flex; align-items: center; gap: .45rem; font-size: 1rem; color: var(--c-muted); white-space: nowrap; }
.price__was del { text-decoration-thickness: 1px; }
/* Old price: a thin red line drawn on the number itself (not the taller line box), so it sits at the same
   place in every context. Latin digits ($, €) are struck through their middle; for toman it runs just under
   the Persian zero (a mid-height dot), which a line through the middle would hide. */
.price__was del, .product-card__was, .search-item__was del, del.inv-was { text-decoration: none; }
:is(.price__was del, .product-card__was, .search-item__was del, del.inv-was) bdi { position: relative; }
:is(.price__was del, .product-card__was, .search-item__was del, del.inv-was) bdi::after { content: ""; position: absolute; inset-inline: -2px; top: 57%; height: 1px; background: var(--c-error); opacity: .8; pointer-events: none; }
:is(.price__was del, .product-card__was, .search-item__was del, del.inv-was) bdi[dir="ltr"]::after { top: 50%; }
del.inv-was { color: var(--c-muted); font-weight: 500; }
.product-card__was { align-self: flex-start; color: var(--c-muted); }
.price__off { padding: .05rem .45rem; border-radius: var(--r-pill); background: var(--c-error); color: #fff; font-size: .72rem; font-weight: 800; }
.price--discounted .price__main { color: var(--c-error); }
.price__deadline { color: var(--c-error); font-weight: 600; }
.price__contact { font-size: var(--fs-small); font-weight: 600; color: var(--c-graphite); }
.price-alts { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: var(--fs-small); color: var(--c-muted); }
.price-alts span { white-space: nowrap; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: .4rem; }
.field__label { font-size: var(--fs-small); font-weight: 600; color: var(--c-graphite); }
.field__hint { font-size: var(--fs-caption); color: var(--c-muted); }
.field__error { font-size: var(--fs-caption); color: var(--c-error); }
.input, .select, .textarea {
  width: 100%; min-height: 46px; padding: .6rem .9rem; border: 1px solid var(--c-border-strong); border-radius: var(--r-sm);
  background: var(--c-surface); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px rgb(13 13 14 / 8%); }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--c-error); }
.textarea { min-height: 120px; resize: vertical; line-height: 1.8; }
.select { appearance: none; padding-inline-end: 2.2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b70' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 16px; background-position: left .75rem center; }
[dir="ltr"] .select { background-position: right .75rem center; }
.check { display: flex; align-items: center; gap: .65rem; padding-block: .3rem; cursor: pointer; font-size: .92rem; }
.check input { appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--c-border-strong); border-radius: 5px; display: grid; place-items: center; transition: background var(--t-fast), border-color var(--t-fast); }
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { background: var(--c-ink); border-color: var(--c-ink); }
.check input:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.check input[type="radio"]:checked::after { width: 6px; height: 6px; border: 0; border-radius: 50%; background: #fff; transform: none; }
.check:hover input { border-color: var(--c-ink); }

/* ── Quantity ───────────────────────────────────────────────────────────── */
.qty { display: inline-flex; align-items: center; height: 48px; border: 1px solid var(--c-border-strong); border-radius: var(--r-pill); overflow: hidden; }
.qty button { width: 44px; height: 100%; border: 0; background: transparent; display: grid; place-items: center; transition: background var(--t-fast); }
.qty button:hover { background: var(--c-bg-subtle); }
.qty input { width: 48px; height: 100%; border: 0; text-align: center; font-weight: 700; background: transparent; -moz-appearance: textfield; appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty--sm { height: 38px; }
.qty--sm button { width: 34px; }
.qty--sm input { width: 38px; }

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: var(--fs-caption); color: var(--c-muted); }
.breadcrumb a:hover { color: var(--c-ink); }
.breadcrumb .icon { width: 12px; height: 12px; color: var(--c-faint); }
.breadcrumb [aria-current] { color: var(--c-ink); }

/* ── Catalog layout ─────────────────────────────────────────────────────── */
.catalog-head { padding-block: .9rem .75rem; }
.catalog-head > * + * { margin-block-start: .5rem; }
.catalog-head .h1 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); }
.catalog-head .lead { max-width: 720px; font-size: 1rem; line-height: 1.9; }
.catalog { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 3.5rem); align-items: start; padding-block-end: var(--section); }
.catalog__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block-end: 1.25rem; margin-block-end: 1.75rem; border-block-end: 1px solid var(--c-border); }
.catalog__view { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* Toolbar controls: one family — same height, border and corners */
.tool-select { display: inline-flex; align-items: center; gap: .4rem; height: 40px; padding-inline: .8rem .35rem; border: 1px solid var(--c-border); border-radius: 12px;
  background: var(--c-surface); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.tool-select:hover { border-color: var(--c-border-strong); }
.tool-select:focus-within { border-color: var(--c-ink); box-shadow: 0 0 0 3px rgb(13 13 14 / 7%); }
.tool-select > .icon { width: 16px; height: 16px; color: var(--c-muted); flex: none; }
.tool-select__label { font-size: .8rem; color: var(--c-muted); white-space: nowrap; }
.tool-select .select { width: auto; min-height: 0; height: 36px; padding-block: 0; padding-inline: 0 1.45rem; border: 0; border-radius: 8px; background-color: transparent;
  background-position: left .1rem center; background-size: 14px; font-size: .86rem; font-weight: 700; color: var(--c-ink); box-shadow: none; cursor: pointer; }
[dir="ltr"] .tool-select .select { background-position: right .1rem center; }
.tool-select .select:focus { box-shadow: none; }
/* Native option lists fall back to the system font (blurry, mis-sized Persian digits on Windows): use the site font. */
.select option, select option { font-family: var(--font); font-size: 1rem; font-weight: 500; font-feature-settings: "ss01"; color: var(--c-text); background-color: var(--c-surface); }
/* Short numeric lists (per page) read best centred */
.tool-select .select option { text-align: center; }
.filter-toggle { display: none; }
.active-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-end: 1.25rem; }
.active-filters a { display: inline-flex; align-items: center; gap: .3rem; height: 32px; padding-inline: .8rem; border-radius: var(--r-pill); background: var(--c-bg-subtle); font-size: .82rem; font-weight: 500; }
.active-filters a:hover { background: var(--c-border); }
.active-filters .icon { width: 14px; height: 14px; }

.filters { position: sticky; top: calc(var(--stick-top, var(--header-h)) + 1.5rem); max-height: calc(100vh - var(--stick-top, var(--header-h)) - 3rem); transition: top var(--t) var(--ease), max-height var(--t) var(--ease); overflow-y: auto; padding-inline-end: .5rem; scrollbar-width: thin; }
.filter-group { border-block-end: 1px solid var(--c-border); }
.filter-group summary { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; cursor: pointer; font-weight: 700; font-size: .92rem; list-style: none; }
.filter-group summary::-webkit-details-marker { display: none; }
.filter-group summary .icon { width: 16px; height: 16px; color: var(--c-muted); transition: transform var(--t) var(--ease); }
.filter-group[open] summary .icon { transform: rotate(180deg); }
.filter-group__body { padding-block-end: 1rem; }
.filter-group__body--scroll { max-height: 240px; overflow-y: auto; }
.filter-group__sub { margin-block-start: .8rem; font-size: var(--fs-caption); font-weight: 700; color: var(--c-muted); }
/* Dual-handle price slider: two overlaid range inputs over one track. */
/* Price range filter: big values + clear, thick track, hover-preview ghost, scale-on-hover thumbs, tick labels */
.price-filter__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-block-end: .35rem; }
.price-filter__head .price-filter__label { margin: 0; }
.price-filter__label { margin: 0 0 .2rem; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.price-filter__values { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .35rem; margin: 0 0 1rem; white-space: nowrap; font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--c-ink); line-height: 1.5; }
.price-filter__values span { color: var(--c-muted); font-weight: 400; }
.price-filter__clear { flex: none; display: inline-flex; align-items: center; gap: .25rem; height: 28px; padding: 0 .6rem; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-surface);
  color: var(--c-muted); font: inherit; font-size: .74rem; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast); }
.price-filter__clear .icon { width: 12px; height: 12px; }
.price-filter__clear:hover:not(:disabled) { color: var(--c-ink); border-color: var(--c-ink); }
.price-filter__clear:disabled { opacity: .45; cursor: default; }
.range { position: relative; height: 28px; margin-block-end: .4rem; }
.range__track { position: absolute; inset-inline: 0; top: 50%; height: 8px; translate: 0 -50%; border-radius: 8px; background: var(--c-border); }
.range__fill { position: absolute; inset-block: 0; inset-inline-start: var(--lo); inset-inline-end: calc(100% - var(--hi)); border-radius: inherit; background: var(--c-ink); }
.range__ghost { position: absolute; inset-block: 0; inset-inline-start: var(--g-start, 0); inset-inline-end: calc(100% - var(--g-end, 0%)); border-radius: inherit; background: rgb(13 13 14 / 28%); opacity: 0; transition: opacity .12s, inset .075s; }
.range__ghost.is-on { opacity: 1; }
.range input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.range input[type="range"]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--c-ink); box-shadow: var(--shadow); cursor: grab; transition: transform .15s var(--ease); }
.range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--c-ink); box-shadow: var(--shadow); cursor: grab; transition: transform .15s var(--ease); }
.range input[type="range"]::-webkit-slider-thumb:hover, .range input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.25); }
.range input[type="range"]::-moz-range-thumb:hover { transform: scale(1.25); }
.range input[type="range"]::-webkit-slider-runnable-track { background: none; }
.range input[type="range"]::-moz-range-track { background: none; }
.range input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.price-filter__ticks { display: flex; justify-content: space-between; gap: .25rem; margin-block-end: 1rem; font-size: .72rem; font-weight: 500; color: var(--c-muted); user-select: none; white-space: nowrap; }
.price-range { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.price-range .input { min-height: 36px; font-size: .82rem; }
.filters__actions { display: flex; gap: .5rem; padding-block: 1.25rem; }

/* ── Pagination ─────────────────────────────────────────────────────────── */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem; margin-block-start: clamp(1.5rem, 1.25rem + 1vw, 2.5rem); }
@media (max-width: 560px) { .pagination { gap: .15rem; } .pagination a, .pagination span { min-width: 34px; height: 34px; padding-inline: .35rem; font-size: .82rem; } }
.pagination a, .pagination span { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding-inline: .6rem; border-radius: var(--r-pill); font-size: .9rem; font-weight: 600; }
.pagination a:hover { background: var(--c-bg-subtle); }
.pagination [aria-current] { background: var(--c-ink); color: #fff; }
.pagination .is-disabled { color: var(--c-faint); }

/* ── Empty state ────────────────────────────────────────────────────────── */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) 1.5rem; border-radius: var(--r-lg); background: var(--c-bg-subtle); }
.empty__icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--c-surface); box-shadow: var(--shadow-sm); }
.empty__icon .icon { width: 26px; height: 26px; }
.empty p { max-width: 420px; color: var(--c-muted); }

/* ── Product detail ─────────────────────────────────────────────────────── */
.pdp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); align-items: start; padding-block: 1rem var(--section); }
.pdp-media { align-self: stretch; min-width: 0; }
.gallery { position: sticky; top: calc(var(--stick-top, var(--header-h)) + 1.5rem); transition: top var(--t) var(--ease); display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 1rem; }
.gallery__stage { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-xl); background: var(--c-bg-subtle); overflow: hidden; display: grid; place-items: center; grid-column: 2; grid-row: 1; }
.gallery__stage img { width: 76%; height: 76%; object-fit: contain; transition: opacity var(--t) var(--ease), transform var(--t-slow) var(--ease); }
.gallery__stage img.is-swapping { opacity: 0; transform: scale(.98); }
/* The strip never makes the gallery taller than the photo: it takes the stage's height and scrolls. */
.gallery__thumbs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: .6rem; height: 0; min-height: 100%;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; scroll-snap-type: y proximity; }
.gallery__thumbs.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent); }
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumbs > * { flex: none; scroll-snap-align: start; }
.gallery__thumb { width: 76px; aspect-ratio: 1; padding: 0; border: 1px solid transparent; border-radius: var(--r); background: var(--c-bg-subtle); display: grid; place-items: center; overflow: hidden; transition: border-color var(--t-fast); }
.gallery__thumb img { width: 80%; height: 80%; object-fit: contain; }
.gallery__thumb[aria-current="true"] { border-color: var(--c-ink); }
.gallery__thumb:hover { border-color: var(--c-border-strong); }
.gallery--single { grid-template-columns: 1fr; }
.gallery--single .gallery__stage { grid-column: 1; }

.pdp-info > * + * { margin-block-start: 1.1rem; }
.pdp-info__head > * + * { margin-block-start: .9rem; }
.pdp-info__title { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.5rem); font-weight: 800; line-height: 1.4; }
/* Product facts: one compact strip of small label/value pairs */
.pdp-facts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, auto); justify-content: start; gap: 0; margin: 0; padding: .45rem .25rem; border-radius: var(--r); background: var(--c-bg-subtle); }
.pdp-facts div { padding: .1rem .85rem; min-width: 0; }
.pdp-facts div + div { border-inline-start: 1px solid var(--c-border); }
.pdp-facts dt { font-size: .68rem; color: var(--c-muted); line-height: 1.5; }
.pdp-facts dd { margin: 0; font-weight: 650; font-size: .82rem; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-facts .origin-note { margin-inline-start: .25rem; padding: 0 .35rem; font-size: .62rem; }
.pdp-facts .origin-note .icon { width: 10px; height: 10px; }
.pdp-buy { padding: 1.1rem 1.4rem; border-radius: var(--r-lg); background: var(--c-bg-subtle); }
.pdp-buy > * + * { margin-block-start: .7rem; }
.pdp-buy > .price-alts { margin-block-start: .3rem; }
.pdp-buy > .pdp-secondary { margin-block-start: .4rem; }
.pdp-buy > .caption { margin-block-start: .35rem; }
.pdp-buy .cart-stepper__box { height: 48px; }
.pdp-buy__row { display: flex; gap: .6rem; flex-wrap: wrap; }
.pdp-buy__row .btn--primary-buy { flex: 1; min-width: 200px; }
/* Product page: after "add to cart" the button becomes a stepper — + / count / trash (minus above one) */
.pdp-buy__row .btn--primary-buy[hidden], .cart-stepper[hidden] { display: none; }
.cart-stepper { flex: 1; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; animation: stepper-in .25s var(--ease); }
.cart-stepper__box { display: inline-flex; align-items: center; height: 52px; padding: 0 .3rem; border: 1px solid var(--c-border-strong); border-radius: var(--r-pill); background: var(--c-surface, #fff); box-shadow: 0 2px 10px rgb(0 0 0 / .05); }
.cart-stepper__box button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; color: var(--c-accent-strong, #2e7f17); display: grid; place-items: center; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.cart-stepper__box button:hover { background: var(--c-bg-subtle); }
.cart-stepper__box button[data-cart-step="-1"] { color: var(--c-error); }
.cart-stepper__box .icon { width: 20px; height: 20px; }
.cart-stepper__box output { min-width: 2.6rem; text-align: center; font-weight: 800; font-size: 1.15rem; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.cart-stepper .cart-stepper__minus, .cart-stepper.is-many .cart-stepper__trash { display: none; }
.cart-stepper.is-many .cart-stepper__minus { display: block; }
.cart-stepper.is-busy .cart-stepper__box { opacity: .6; pointer-events: none; }
.cart-stepper__note { display: flex; flex-direction: column; gap: .1rem; font-size: .8rem; color: var(--c-muted); line-height: 1.5; }
.cart-stepper__note a { color: var(--c-accent-strong, #2e7f17); font-weight: 700; }
.cart-stepper__note a:hover { text-decoration: underline; }
@keyframes stepper-in { from { opacity: 0; transform: scale(.96); } }
.pdp-secondary { display: flex; gap: .4rem; flex-wrap: wrap; }
/* Phones: a small, minimal buy box under the gallery */
@media (max-width: 720px) {
  .pdp-buy { padding: .75rem .9rem; border-radius: var(--r); }
  .pdp-buy > * + * { margin-block-start: .5rem; }
  .pdp-buy > .price-alts, .pdp-buy > .pdp-secondary, .pdp-buy > .caption { margin-block-start: .2rem; }
  .pdp-buy .price { --price-size: 1.3rem; gap: 0; }
  .pdp-buy .price__was { font-size: .8rem; gap: .35rem; }
  .pdp-buy .price__off { font-size: .64rem; padding: 0 .4rem; }
  .pdp-buy .price__note, .pdp-buy .price-alts { font-size: .74rem; }
  .pdp-buy .price-alts { gap: .2rem .8rem; }
  .pdp-buy .btn--lg { min-height: 44px; padding: .55rem 1.2rem; font-size: .9rem; }
  .pdp-buy .cart-stepper { gap: .7rem; }
  .pdp-buy .cart-stepper__box { height: 42px; padding: 0 .15rem; }
  .pdp-buy .cart-stepper__box button { width: 36px; height: 36px; }
  .pdp-buy .cart-stepper__box .icon { width: 17px; height: 17px; }
  .pdp-buy .cart-stepper__box output { min-width: 2rem; font-size: 1rem; }
  .pdp-buy .cart-stepper__note { font-size: .72rem; }
  .pdp-secondary button { min-height: 32px; padding-block: .25rem; font-size: .76rem; }
  .pdp-secondary .icon { width: 15px; height: 15px; }
  .pdp-buy > .caption { font-size: .7rem; line-height: 1.6; }
}

.tabs { padding-block-end: var(--section); }
.tabs__list { display: flex; gap: .25rem; overflow-x: auto; border-block-end: 1px solid var(--c-border); scrollbar-width: none; position: sticky; top: var(--stick-top, var(--header-h)); z-index: 5; transition: top var(--t) var(--ease); background: rgb(255 255 255 / 92%); backdrop-filter: blur(12px); }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab { position: relative; flex: none; padding: 1.1rem 1.1rem; border: 0; background: transparent; font-weight: 600; color: var(--c-muted); white-space: nowrap; transition: color var(--t-fast); }
.tabs__tab:hover { color: var(--c-ink); }
.tabs__tab[aria-selected="true"] { color: var(--c-ink); }
.tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 1.1rem; bottom: -1px; height: 2px; background: var(--c-ink); }
.tabs__panel { padding-block-start: clamp(1rem, .75rem + 1vw, 1.5rem); animation: fade var(--t) var(--ease); }
.tabs__panel .prose > :first-child { margin-block-start: 0; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.prose { max-width: 760px; font-size: 1.02rem; line-height: 2; color: var(--c-graphite); }
.prose > * + * { margin-block-start: 1.2rem; }
.prose h2 { font-size: 1.25rem; font-weight: 800; color: var(--c-ink); line-height: 1.6; margin-block-start: 2rem; }
.prose h3 { font-size: 1.08rem; font-weight: 750; color: var(--c-ink); line-height: 1.6; margin-block-start: 1.6rem; }
.prose h2 + *, .prose h3 + * { margin-block-start: .6rem; }
.prose ul { padding-inline-start: 1.25rem; list-style: disc; }
.prose li + li { margin-block-start: .25rem; }
.prose li::marker { color: var(--c-accent); }

/* Spec sheet: one card per group, groups flow in two balanced columns. */
.specs-layout { columns: 2 340px; column-gap: 1.5rem; }
.spec-group { break-inside: avoid; margin-block-end: 1.5rem; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-bg); overflow: hidden; }
.spec-group__title { margin: 0; padding: .8rem 1.1rem; font-size: .95rem; font-weight: 800; color: var(--c-ink); background: var(--c-bg-subtle); border-block-end: 1px solid var(--c-border); }
.spec-list { margin: 0; }
.spec-row { display: grid; grid-template-columns: minmax(7.5rem, 38%) 1fr; gap: 1rem; align-items: baseline; padding: .75rem 1.1rem; }
.spec-row + .spec-row { border-block-start: 1px solid var(--c-border); }
.spec-row dt { color: var(--c-muted); font-weight: 500; font-size: .92rem; }
.spec-row dd { margin: 0; color: var(--c-ink); font-weight: 600; line-height: 1.8; text-align: start; overflow-wrap: anywhere; }
.spec-row dd > [dir] { unicode-bidi: isolate; }
.spec-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.spec-chips li { padding: .1rem .6rem; border-radius: 999px; background: var(--c-bg-subtle); border: 1px solid var(--c-border); font-size: .86rem; font-weight: 600; unicode-bidi: isolate; }
.spec-bool { display: inline-flex; align-items: center; gap: .4rem; }
.spec-bool::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.spec-bool.is-yes { color: #1b7a43; }
.spec-bool.is-no { color: var(--c-muted); }

.download { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border: 1px solid var(--c-border); border-radius: var(--r); max-width: 560px; transition: border-color var(--t-fast), background var(--t-fast); }
.download:hover { border-color: var(--c-ink); background: var(--c-surface-2); }
.download__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--c-error-soft); color: var(--c-error); font-size: .7rem; font-weight: 800; direction: ltr; }
.download__body { flex: 1; }
.download + .download { margin-block-start: .6rem; }

.protocol-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; max-width: 900px; }
.protocol-tile { padding: 1.4rem; border-radius: var(--r); background: var(--c-bg-subtle); }
.protocol-tile strong { display: block; font-size: 1.3rem; direction: ltr; text-align: start; }

/* ── Compare ────────────────────────────────────────────────────────────── */
.compare-wrap { overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-snap-type: x mandatory; }
.compare-table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; }
.compare-table th, .compare-table td { padding: 1rem; border-block-end: 1px solid var(--c-border); text-align: start; vertical-align: top; }
.compare-table thead td { vertical-align: top; border-block-end: 0; scroll-snap-align: start; }
.compare-table tbody th { position: sticky; inset-inline-start: 0; z-index: 1; width: 200px; min-width: 150px; background: var(--c-bg); font-weight: 500; color: var(--c-muted); font-size: .9rem; }
.compare-table tbody td { font-weight: 600; min-width: 200px; }
.compare-table tr.is-same { }
.compare-table.only-diff tr.is-same { display: none; }
.compare-table tr.is-diff td { background: var(--c-accent-soft); }
.compare-table.only-diff tr.is-diff td { background: transparent; }
.compare-product { display: flex; flex-direction: column; gap: .6rem; }
.compare-product__img { aspect-ratio: 1; border-radius: var(--r); background: var(--c-bg-subtle); display: grid; place-items: center; }
.compare-product__img img { width: 72%; height: 72%; object-fit: contain; }
.compare-bar {
  position: fixed; inset-inline: 0; bottom: 1rem; z-index: 40; display: flex; justify-content: center; pointer-events: none;
}
.compare-bar__inner { pointer-events: auto; display: flex; align-items: center; gap: 1rem; padding: .5rem .5rem .5rem 1.2rem; border-radius: var(--r-pill); background: var(--c-ink); color: #fff; box-shadow: var(--shadow-lg); font-size: .9rem; animation: rise var(--t) var(--ease); }
[dir="rtl"] .compare-bar__inner { padding: .5rem 1.2rem .5rem .5rem; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ── Cart ───────────────────────────────────────────────────────────────── */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(2rem, 4vw, 4rem); align-items: start; padding-block-end: var(--section); }
.cart-line { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 1.25rem; padding-block: 1.5rem; border-block-end: 1px solid var(--c-border); }
.cart-line:first-child { padding-block-start: 0; }
.cart-line__img { width: 112px; aspect-ratio: 1; border-radius: var(--r); background: var(--c-bg-subtle); display: grid; place-items: center; }
.cart-line__img img { width: 78%; height: 78%; object-fit: contain; }
.cart-line__info > * + * { margin-block-start: .3rem; }
.cart-line__controls { display: flex; align-items: center; gap: .75rem; margin-block-start: .9rem; }
.cart-line__total { text-align: end; }
.cart-summary { position: sticky; top: calc(var(--stick-top, var(--header-h)) + 1.5rem); transition: top var(--t) var(--ease); padding: 1.75rem; border-radius: var(--r-lg); background: var(--c-bg-subtle); }
.cart-summary > * + * { margin-block-start: 1rem; }
.summary-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.summary-row--total { padding-block-start: 1rem; border-block-start: 1px solid var(--c-border-strong); font-size: 1.1rem; font-weight: 800; }
.notice { padding: .9rem 1rem; border-radius: var(--r-sm); background: var(--c-surface); font-size: var(--fs-caption); color: var(--c-muted); line-height: 1.8; }
.notice--warning { background: var(--c-warning-soft); color: var(--c-warning); }

/* ── Solutions / editorial ──────────────────────────────────────────────── */
.solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.solution-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: var(--c-bg-subtle); }
.solution-card__visual { aspect-ratio: 4 / 3; overflow: hidden; }
.solution-card__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.solution-card:hover .solution-card__visual img { transform: scale(1.05); }
.solution-card__body { padding: 1.5rem 1.6rem 1.75rem; }
.solution-card__body > * + * { margin-block-start: .5rem; }
.solution-card__title a::after { content: ""; position: absolute; inset: 0; }
.feature-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.feature-split__visual { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 5 / 4; }
.feature-split__visual img { width: 100%; height: 100%; object-fit: cover; }
.points { display: grid; gap: .8rem; }
.points li { display: flex; gap: .8rem; align-items: start; }
.points .icon { color: var(--c-accent); margin-block-start: .3rem; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.principle { padding-block-start: 1.5rem; border-block-start: 1px solid var(--c-border-strong); }
.principle > * + * { margin-block-start: .6rem; }
.principle__num { font-size: var(--fs-caption); color: var(--c-accent); font-weight: 700; direction: ltr; text-align: start; }

.brand-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-block: 1px solid var(--c-border); }
.brand-strip a { display: grid; place-items: center; min-height: 120px; padding: 1.5rem; border-inline-end: 1px solid var(--c-border); color: var(--c-muted); transition: color var(--t-fast), background var(--t-fast); }
.brand-strip a:last-child { border-inline-end: 0; }
.brand-strip a:hover { color: var(--c-ink); background: var(--c-bg-subtle); }
.brand-strip img { max-height: 34px; width: auto; opacity: .7; filter: grayscale(1); transition: opacity var(--t), filter var(--t); }
.brand-strip a:hover img { opacity: 1; filter: none; }
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.brand-card { display: flex; flex-direction: column; gap: 1rem; padding: 2rem; border: 1px solid var(--c-border); border-radius: var(--r-lg); transition: border-color var(--t-fast), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.brand-card:hover { border-color: var(--c-border-strong); transform: translateY(-2px); box-shadow: var(--shadow); }
.brand-card__logo { height: 56px; display: flex; align-items: center; }
.brand-card__logo img { max-height: 40px; width: auto; }
.brand-hero { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem 2rem; align-items: center; padding: clamp(.85rem, 1.6vw, 1.25rem) clamp(1.25rem, 2.6vw, 2.25rem); border-radius: var(--r-lg); background: var(--c-bg-subtle); }
.brand-hero .stack { gap: .5rem; }
.brand-hero .h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); }
.brand-hero .lead { font-size: .98rem; line-height: 1.9; max-width: 68ch; }
.brand-hero__logo { width: 140px; height: 88px; display: grid; place-items: center; border-radius: var(--r-lg); background: var(--c-surface); }
.brand-hero__logo img { width: auto; height: auto; max-width: 70%; max-height: 62%; object-fit: contain; }
.brand-hero { grid-template-columns: auto 1fr auto; }
.brand-hero.no-logo { grid-template-columns: 1fr auto; }
.brand-hero__main { min-width: 0; }
.brand-hero__eco { margin: 0; font-size: .92rem; line-height: 1.9; color: var(--c-muted); }
.brand-hero__eco a { font-weight: 700; color: var(--c-ink); }
.badge--partner { display: inline-flex; align-items: center; gap: .3rem; background: #e8f5e9; color: #2e7d32; border-color: transparent; }
[data-theme="dark"] .badge--partner { background: rgb(46 125 50 / 22%); color: #81c784; }
.brand-stats { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: .6rem; margin: 0; }
.brand-stats__item { padding: .55rem .85rem; border-radius: 12px; background: var(--c-surface); border: 1px solid var(--c-border); min-width: 130px; }
.brand-stats__item--wide { grid-column: 1 / -1; }
.brand-stats dt { font-size: .76rem; color: var(--c-muted); margin-block-end: .2rem; }
.brand-stats dd { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--c-ink); }
.brand-stats dd.brand-stats__price { font-size: .95rem; font-weight: 700; white-space: nowrap; }
.brand-stats__tech { display: flex; flex-wrap: wrap; gap: .4rem; }
.brand-stats__tech a { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem .25rem .45rem; border-radius: 999px; background: var(--c-bg-subtle); font-size: .8rem; font-weight: 600; color: var(--c-graphite); text-decoration: none; }
.brand-stats__tech a:hover { color: var(--c-ink); background: var(--c-accent-soft); }
.brand-stats__logo { display: inline-grid; width: 22px; height: 22px; }
.brand-stats__logo svg { width: 100%; height: 100%; }
.brand-types { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .45rem; padding-block-start: .9rem; border-block-start: 1px solid var(--c-border); }
.brand-types__chip { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: 999px; background: var(--c-surface); border: 1px solid var(--c-border); font-size: .85rem; font-weight: 600; color: var(--c-graphite); text-decoration: none; white-space: nowrap; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.brand-types__chip span { font-size: .75rem; font-weight: 500; color: var(--c-muted); }
.brand-types__chip:hover { border-color: var(--c-border-strong); color: var(--c-ink); }
.brand-types__chip.is-active { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-surface); }
.brand-types__chip.is-active span { color: var(--c-surface); opacity: .75; }
.brand-types:not(.is-open) .brand-types__chip.is-extra { display: none; }
.brand-types.is-open .brand-types__more { display: none; }
.brand-types__more { cursor: pointer; border-style: dashed; color: var(--c-muted); font-family: inherit; }

.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(2.5rem, 5vw, 4.5rem); border-radius: var(--r-xl); background: var(--c-dark); color: var(--c-on-dark); }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--c-on-dark-muted); max-width: 560px; margin-block-start: .8rem; }

/* ── Projects ───────────────────────────────────────────────────────────── */
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, .5rem + 1.5vw, 1.75rem); }
.project-card { display: flex; flex-direction: column; gap: 1rem; }
.project-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg); background: var(--c-bg-subtle); }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.project-card:hover .project-card__media img { transform: scale(1.05); }
.project-card__sector { position: absolute; inset-block-start: .9rem; inset-inline-start: .9rem; padding: .3rem .75rem; border-radius: var(--r-pill);
  background: rgb(255 255 255 / 90%); font-size: .75rem; font-weight: 700; color: var(--c-ink); box-shadow: var(--shadow-sm); }
.project-card__body { display: flex; flex-direction: column; gap: .35rem; padding-inline: .25rem; }
.project-card__meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: var(--fs-caption); color: var(--c-muted); }
.project-card__meta span { display: inline-flex; align-items: center; gap: .3rem; }
.project-card__meta .icon { width: 14px; height: 14px; }
.project-card__title { font-size: 1.15rem; font-weight: 750; color: var(--c-ink); line-height: 1.6; }
.project-card__summary { font-size: var(--fs-small); color: var(--c-muted); line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 2rem; }
.filter-chips a { padding: .5rem 1.1rem; border-radius: var(--r-pill); border: 1px solid var(--c-border-strong); font-size: .88rem; font-weight: 600; color: var(--c-graphite); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.filter-chips a:hover { border-color: var(--c-ink); }
.filter-chips a.is-active { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.project-hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(70vh, 640px); display: flex; align-items: end; background: var(--c-dark); color: #fff; }
.project-hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.project-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(13 13 14 / 88%) 0%, rgb(13 13 14 / 35%) 55%, rgb(13 13 14 / 20%) 100%); }
.project-hero__inner { padding-block: 6rem 3rem; }
.project-hero__inner > * + * { margin-block-start: 1rem; }
.project-hero .breadcrumb, .project-hero .breadcrumb a, .project-hero .breadcrumb [aria-current] { color: rgb(255 255 255 / 75%); }
.project-hero__title { font-size: clamp(2rem, 1.4rem + 2.5vw, 3.6rem); font-weight: 850; color: #fff; max-width: 900px; }
.project-hero__lead { font-size: var(--fs-lead); color: rgb(255 255 255 / 78%); max-width: 680px; line-height: 1.9; }
.project-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border-block-end: 1px solid var(--c-border); }
.project-facts div { padding: 1.5rem 0; padding-inline-end: 1.5rem; }
.project-facts dt { font-size: var(--fs-caption); color: var(--c-muted); }
.project-facts dd { font-weight: 700; color: var(--c-ink); }
.project-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.project-gallery__item { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg); background: var(--c-bg-subtle); }
.project-gallery__item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.project-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.project-gallery__item:hover img { transform: scale(1.04); }
@media (max-width: 1024px) { .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .project-grid, .project-gallery { grid-template-columns: 1fr; }
  .project-gallery__item:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
}

/* Product photos shot on white: blend the white into the soft card background. */
.product-card__media > img, .gallery__stage img, .gallery__thumb img, .cart-line__img img,
.compare-product__img img, .search-item__img, .story-card__media img, .spot__visual img { mix-blend-mode: multiply; }

/* ── Quick edit (admins) ────────────────────────────────────────────────── */
.qe-modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 1rem; pointer-events: none; visibility: hidden; }
.qe-modal.is-open { visibility: visible; }
.qe-modal__card { pointer-events: auto; width: min(520px, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1.5rem; border-radius: var(--r-lg);
  background: var(--c-surface); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(12px) scale(.98); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.qe-modal.is-open .qe-modal__card { opacity: 1; transform: none; }
.qe-modal__card > * + * { margin-block-start: 1rem; }
.qe-modal__head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.qe-modal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
.qe-modal__full { grid-column: 1 / -1; }
.qe-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block-start: .5rem; }
.icon-btn.qe-trigger { color: var(--c-accent); }
.qe-table td { padding-block: .55rem; }
.qe-table .input, .qe-table .select { min-height: 38px; padding-block: .25rem; font-size: .88rem; }
.qe-input--price { width: 130px; }
.qe-input--ccy { width: 92px; }
.qe-input--num { width: 84px; }
.qe-input--status { width: 150px; }
.qe-table tr.is-saved td { animation: saved 1.2s var(--ease); }
@keyframes saved { 0% { background: var(--c-success-soft); } 100% { background: transparent; } }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { background: var(--c-dark); color: var(--c-on-dark-muted); padding-block: clamp(3.5rem, 6vw, 6rem) 2rem; font-size: .92rem; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.5rem; }
.footer-grid h3 { font-size: .85rem; color: #fff; font-weight: 700; margin-block-end: 1.1rem; }
.footer-grid li + li { margin-block-start: .65rem; }
.footer-brand .brand-mark { color: #fff; --glyph-fg: var(--c-dark); }
.footer-brand p { margin-block-start: 1.1rem; max-width: 340px; line-height: 1.9; }
.footer-contact { margin-block-start: 1.4rem; display: grid; gap: .6rem; }
.footer-contact li { display: flex; align-items: start; gap: .6rem; line-height: 1.8; }
.footer-contact li + li { margin-block-start: 0; }
.footer-contact .icon { width: 17px; height: 17px; margin-block-start: .3rem; color: var(--c-accent); flex: none; }
.footer-contact a { color: #e7e5e0; font-weight: 600; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-block-start: 4rem; padding-block-start: 1.5rem; border-block-start: 1px solid rgb(255 255 255 / 10%); font-size: var(--fs-caption); }

/* ── Toast ──────────────────────────────────────────────────────────────── */
.toasts { position: fixed; inset-block-end: 1.25rem; inset-inline-start: 50%; z-index: 100; display: flex; flex-direction: column; align-items: center; gap: .5rem; transform: translateX(50%); pointer-events: none; }
[dir="ltr"] .toasts { transform: translateX(-50%); }
.toast { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.2rem; border-radius: var(--r-pill); background: var(--c-ink); color: #fff; font-size: .9rem; font-weight: 500; box-shadow: var(--shadow-lg); animation: toast-in var(--t) var(--ease); pointer-events: auto; }
.toast .icon { color: #7fd6a3; width: 18px; height: 18px; }
.toast.is-leaving { animation: toast-out var(--t) var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(.96); } }

/* ── Loading ────────────────────────────────────────────────────────────── */
.skeleton { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--c-bg-subtle) 0%, #ecebe7 50%, var(--c-bg-subtle) 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.spinner { width: 18px; height: 18px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn.is-loading { pointer-events: none; opacity: .75; }

/* ── Page header / misc ─────────────────────────────────────────────────── */
.page-hero { padding-block: .9rem 1rem; }
.page-hero > * + * { margin-block-start: .5rem; }
.page-hero .h1 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); }
.page-hero .lead { max-width: 680px; font-size: 1rem; line-height: 1.9; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.contact-card { padding: 1.75rem; border-radius: var(--r-lg); background: var(--c-bg-subtle); }
.contact-card > * + * { margin-block-start: .4rem; }
.error-page { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: var(--section); }
.error-page > div > * + * { margin-block-start: 1rem; }
.error-code { font-size: clamp(4rem, 10vw, 8rem); font-weight: 800; color: var(--c-border-strong); line-height: 1; direction: ltr; }

/* ── Reveal on scroll ───────────────────────────────────────────────────── */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-grid; }
  .main-nav__link { padding-inline: .55rem; font-size: .85rem; }
  .product-grid[data-cols] { --cols: 3; }
  .tech-grid { grid-template-columns: repeat(2, 1fr); }
  .tech-card { min-height: 380px; }
  .tech-card__text { max-height: none; opacity: 1; }
}

@media (max-width: 1024px) {
  :root { --header-h: 64px; }
  .catalog { grid-template-columns: minmax(0, 1fr); }
  .catalog__toolbar { flex-wrap: wrap; }
  .catalog .filters-panel { display: none; }
  .filter-toggle { display: inline-flex; }
  .pdp { grid-template-columns: 1fr; row-gap: 1rem; }
  .gallery { position: static; }
  /* One column: the buy box sits right under the gallery, then title and facts */
  .pdp-info { display: contents; }
  .pdp-info > * + * { margin-block-start: 0; }
  .pdp > .pdp-media { order: 0; }
  .pdp-info > .pdp-buy { order: 1; }
  .pdp > .kit-strip { order: 2; }
  .pdp-info > :not(.pdp-buy) { order: 3; }
  .pdp-secondary { flex-wrap: nowrap; gap: 0; margin-inline: -.5rem; }
  .pdp-secondary button { padding-inline: .5rem; font-size: .82rem; }
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .solution-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-split { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .product-grid[data-cols] { --cols: 2; }
  .grid-switch { display: none; }
  .product-card { padding: .4rem; border-radius: 14px; }
  .product-card__media { border-radius: 10px; }
  .product-card__actions { inset-block-start: .35rem; inset-inline-start: .35rem; border-radius: 8px; }
  .product-card__actions .icon-btn { width: 24px; height: 24px; border-radius: 6px; }
  .product-card__actions .icon-btn .icon { width: 13px; height: 13px; }
  .product-card__body { padding: .7rem .3rem .55rem; }
  .product-card__title { font-size: .88rem; }
  .product-card__buy { margin-inline: .3rem; padding-block: .6rem .2rem; gap: .4rem; }
  .product-card__now { font-size: .9rem; }
  .product-card__cart { width: 38px; height: 38px; border-radius: 12px; }
  .product-card__off { font-size: .66rem; padding: .18rem .5rem; }
  .product-card__badges .badge { font-size: .62rem; }
  .tech-grid { grid-template-columns: 1fr; }
  .tech-card { min-height: 320px; }
  .hero__inner { min-height: auto; padding-block: 5rem 3rem; }
  .hero__media::after { background: linear-gradient(to top, rgb(15 16 18 / 96%) 35%, rgb(15 16 18 / 55%) 100%) !important; }
  .hero__actions .btn { flex: 1; }
  .hero__stats { gap: 1.5rem; }
  .section-head { flex-direction: column; align-items: start; }
  .solution-grid, .principles { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery__stage { grid-column: 1; border-radius: var(--r-lg); }
  .gallery__thumbs { grid-column: 1; grid-row: 2; flex-direction: row; overflow-x: auto; overflow-y: hidden; height: auto; min-height: 0; scroll-snap-type: x proximity; }
  .gallery__thumbs.has-more { -webkit-mask-image: none; mask-image: none; }
  .gallery__thumb { width: 64px; flex: none; }
  .pdp-facts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .35rem; }
  .pdp-facts div + div { border-inline-start: 0; }
  .pdp-facts div:nth-child(even) { border-inline-start: 1px solid var(--c-border); }
  .cart-line { grid-template-columns: 84px minmax(0, 1fr); }
  .cart-line__img { width: 84px; }
  .cart-line__total { grid-column: 2; text-align: start; }
  .cta-band { flex-direction: column; align-items: start; }
  .brand-hero, .brand-hero.no-logo { grid-template-columns: 1fr; gap: 1rem; }
  .brand-hero__logo { width: 120px; height: 72px; }
  .brand-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .brand-stats__item { min-width: 0; }
  .brand-stats dd.brand-stats__price { white-space: normal; font-size: .85rem; }
  .brand-types { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .header-tools .hide-sm { display: none; }
  .search-item { grid-template-columns: 52px 1fr; }
  .search-item__img { width: 52px; height: 52px; }
  .search-item__price { grid-column: 2; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ── New-product notifications (header bell) ── */
.notify { position: relative; }
.notify__panel { position: absolute; inset-block-start: calc(100% + .6rem); inset-inline-end: -3.5rem; z-index: 60; width: min(380px, calc(100vw - 2rem));
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.notify__panel[hidden] { display: none; }
.notify__head, .notify__foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1.1rem; }
.notify__head { border-block-end: 1px solid var(--c-border); }
.notify__foot { border-block-start: 1px solid var(--c-border); background: var(--c-surface-2); }
.notify__foot a { color: var(--c-accent); font-weight: 600; }
.notify__list { list-style: none; margin: 0; padding: .35rem 0; max-height: min(420px, 60vh); overflow-y: auto; }
.notify__empty { padding: 1.25rem 1.1rem; }
.notify__item { display: flex; align-items: center; gap: .8rem; padding: .6rem 1.1rem; color: inherit; transition: background var(--t-fast); }
.notify__item:hover, .notify__item:focus-visible { background: var(--c-bg-subtle); }
.notify__thumb { flex: none; width: 52px; height: 52px; border-radius: var(--r-sm); background: var(--c-bg-subtle); display: grid; place-items: center; overflow: hidden; }
.notify__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.notify__body { display: grid; gap: .15rem; min-width: 0; }
.notify__name { font-size: .88rem; font-weight: 600; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notify__meta { font-size: .76rem; color: var(--c-muted); }
.link-btn { background: none; border: 0; padding: 0; color: var(--c-muted); cursor: pointer; font: inherit; }
.link-btn:hover { color: var(--c-ink); text-decoration: underline; }
@media (max-width: 720px) { .notify__panel { position: fixed; inset-inline: 1rem; inset-block-start: calc(var(--header-h, 64px) + .5rem); width: auto; } }

/* ── Floating "back to top" ── */
.to-top { position: fixed; inset-block-end: 1.5rem; inset-inline-end: 1.5rem; z-index: 70; width: 48px; height: 48px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--c-ink); color: #fff; box-shadow: var(--shadow-lg); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t), background var(--t-fast); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--c-accent); }
.to-top:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.to-top .icon { width: 20px; height: 20px; }
body:has(.compare-bar) .to-top { inset-block-end: 5.5rem; }

/* ── Cookie consent ── */
.cookie-bar { position: fixed; inset-block-end: 1.25rem; inset-inline-start: 1.25rem; z-index: 90; max-width: 440px; display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem;
  padding: 1.15rem 1.25rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(16px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.cookie-bar.is-visible { opacity: 1; transform: none; }
.cookie-bar__icon { width: 30px; height: 30px; color: var(--c-accent); grid-row: span 2; }
.cookie-bar__text { margin: 0; font-size: .86rem; line-height: 1.8; color: var(--c-muted); }
.cookie-bar__text strong { display: block; color: var(--c-ink); font-size: .95rem; }
.cookie-bar__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-block-start: .4rem; }
@media (max-width: 560px) {
  .cookie-bar { inset-inline: .5rem; inset-block-end: calc(4.1rem + env(safe-area-inset-bottom)); max-width: none; grid-template-columns: 1fr auto; align-items: center; gap: .5rem; padding: .6rem .75rem; border-radius: 14px; }
  .cookie-bar__icon { display: none; }
  .cookie-bar__text { font-size: .76rem; line-height: 1.6; }
  .cookie-bar__text strong { display: inline; font-size: .8rem; }
  .cookie-bar__actions { margin: 0; flex-wrap: nowrap; flex-direction: column; gap: .3rem; }
  .cookie-bar__actions .btn { min-height: 32px; padding-inline: .7rem; font-size: .76rem; white-space: nowrap; }
}

/* ── Colour options ── */
.color-picker { border: 0; margin: 0 0 1rem; padding: 0; flex-basis: 100%; }
.color-picker__legend { font-size: .9rem; color: var(--c-muted); margin-block-end: .6rem; padding: 0; }
.color-picker__legend strong { color: var(--c-ink); font-weight: 700; }
.color-picker__options { display: flex; flex-wrap: wrap; gap: .55rem; }
.color-picker__option { position: relative; cursor: pointer; }
.color-picker__swatch { display: block; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgb(0 0 0 / 14%);
  box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 4px transparent; transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.color-picker__option:hover .color-picker__swatch { transform: scale(1.06); }
.color-picker__option input:checked + .color-picker__swatch { box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 5px var(--c-ink); }
.color-picker__option input:focus-visible + .color-picker__swatch { box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 5px var(--c-focus); }
.color-picker__option.is-unavailable { cursor: not-allowed; opacity: .45; }
.color-picker__option.is-unavailable::after { content: ""; position: absolute; inset: 50% -2px auto; height: 2px; background: var(--c-error); transform: rotate(-45deg); }
.product-card__colors { display: flex; justify-content: center; gap: .35rem; list-style: none; margin: .3rem 0 0; padding: 0; }
.product-card__colors li { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgb(0 0 0 / 15%); }
.product-card__colors li.more { width: auto; height: auto; border: 0; font-size: .72rem; color: var(--c-muted); line-height: 14px; }
/* Swatches with a photo are buttons above the card's stretched link. */
.product-card__colors li:has(> button) { border: 0; position: relative; z-index: 2; }
.product-card__colors button { display: block; width: 14px; height: 14px; padding: 0; border-radius: 50%; border: 1px solid rgb(0 0 0 / 15%); cursor: pointer;
  transition: transform var(--t-fast, .15s) var(--ease, ease), box-shadow var(--t-fast, .15s) var(--ease, ease); }
.product-card__colors button:hover { transform: scale(1.2); }
.product-card__colors button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--c-bg, #fff), 0 0 0 3.5px var(--c-ink); }
.product-card__colors button:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.product-card__media > img.is-swapping { opacity: .35; }
.product-card__media > img { transition: transform var(--t-slow) var(--ease), opacity .2s ease; }
.cart-line__color { display: flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--c-muted); margin: .2rem 0 0; }
.cart-line__swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgb(0 0 0 / 15%); flex: none; }

/* ── Public invoice / pro-forma ── */
.invoice-page { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) var(--section); max-width: 1060px; }
.invoice-admin { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .8rem 1.1rem; margin-block-end: 1rem;
  border-radius: var(--r); background: var(--c-warning-soft); color: var(--c-warning); font-size: .88rem; }
.invoice-admin p { margin: 0; }
/* Invoice sheet: logo + green title, number/dates | billed to, amount due | contact,
   green-headed striped table, totals with a green grand-total bar, signatures, footer on a green rule. */
.invoice { --inv-green: var(--c-accent-strong, #2e7f17); --inv-soft: var(--c-bg-subtle);
  position: relative; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: clamp(1.25rem, .8rem + 2vw, 2.5rem) clamp(1.25rem, .8rem + 2vw, 2.5rem) 0; overflow: hidden; }
.inv-label { margin: 0 0 .25rem; font-size: .74rem; font-weight: 700; color: var(--inv-green); }

.inv-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block-end: 1.1rem; border-block-end: 1px solid var(--c-border); }
.inv-top__logo { width: 150px; height: auto; }
.inv-top__title { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); font-weight: 800; color: var(--inv-green); line-height: 1.2; }

.inv-info { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem; padding-block: 1.1rem; margin-block-end: 1.25rem; }
.inv-info__meta { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; margin: 0; align-content: start; }
.inv-info__meta dt { font-size: .74rem; color: var(--c-muted); }
.inv-info__meta dd { margin: 0; font-weight: 700; font-size: .92rem; }
.inv-info__meta .is-expired dd { color: var(--c-error); }
.inv-info__to { display: grid; align-content: start; gap: .05rem; font-size: .86rem; color: var(--c-muted); line-height: 1.7; }
.inv-info__to strong { color: var(--c-ink); font-size: 1rem; }

.invoice > .notice { margin-block: 0 1rem; }

.inv-table-wrap { overflow-x: auto; }
.inv-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.inv-table th { padding: .7rem .9rem; background: var(--inv-green); color: #fff; font-size: .8rem; font-weight: 700; text-align: start; white-space: nowrap; }
.inv-table td { padding: .75rem .9rem; vertical-align: middle; }
.inv-table tbody tr:nth-child(even) { background: var(--inv-soft); }
.inv-table tbody tr:last-child td { border-block-end: 2px solid var(--inv-green); }
.inv-table .num { width: 56px; text-align: center; }
.inv-table .money { text-align: end; white-space: nowrap; font-weight: 600; }
.inv-table .item { min-width: 220px; }
.inv-item { display: flex; align-items: center; gap: .75rem; }
/* Product photo without a frame, as large as the row allows */
.inv-item__thumb { flex: none; width: 76px; height: 76px; display: grid; place-items: center; }
.inv-item__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.inv-item__name { font-weight: 700; line-height: 1.55; color: var(--c-ink); }
a.inv-item__name:hover { color: var(--c-accent); text-decoration: underline; text-underline-offset: 4px; }
.inv-item__name .icon { width: 13px; height: 13px; vertical-align: -2px; color: var(--c-faint); }
.inv-item__sub { display: flex; flex-wrap: wrap; gap: .2rem .8rem; font-size: .74rem; color: var(--c-muted); }
.inv-item__desc { display: block; font-size: .76rem; color: var(--c-muted); }
.inv-item__off { display: block; font-size: .72rem; font-weight: 600; color: var(--c-success); }

.inv-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 2rem; padding-block: 1.25rem 0; }
.inv-notes p { margin: 0; font-size: .84rem; line-height: 1.9; color: var(--c-muted); }
.inv-totals { display: grid; gap: .4rem; margin: 0; }
.inv-totals > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; padding-inline: .9rem; }
.inv-totals dt { color: var(--c-muted); }
.inv-totals dd { margin: 0; font-weight: 700; white-space: nowrap; }
.inv-totals .inv-totals__grand { margin-block-start: .3rem; padding: .7rem .9rem; background: var(--inv-green); color: #fff; font-size: 1rem; }
.inv-totals__grand dt { color: #fff; font-weight: 700; }
.inv-totals__grand dd { font-size: 1.15rem; font-weight: 800; }
.inv-totals__words { margin: 0 .9rem; font-size: .78rem; color: var(--c-muted); line-height: 1.8; }

.inv-sign { display: flex; justify-content: space-between; gap: 2rem; padding-block: 2.5rem 1.5rem; font-size: .8rem; color: var(--c-muted); }
.inv-sign > div { display: grid; justify-items: center; gap: .4rem; min-width: 160px; }
.inv-sign__line { width: 100%; border-block-end: 1px solid var(--c-border-strong); height: 2.2rem; }

.inv-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-inline: calc(-1 * clamp(1.25rem, .8rem + 2vw, 2.5rem));
  padding: 1rem clamp(1.25rem, .8rem + 2vw, 2.5rem); border-block-end: 6px solid var(--inv-green); }
.inv-foot p { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; margin: 0; font-size: .76rem; color: var(--c-muted); }
.inv-foot img { width: 110px; height: auto; }

@media (max-width: 720px) {
  .inv-info, .inv-bottom { grid-template-columns: 1fr; gap: 1rem; }
  .inv-table .num:first-child { display: none; }
  .inv-item__thumb { width: 60px; height: 60px; }
  .inv-foot img { width: 84px; }
}

/* Print / PDF: the same sheet, compact, on one A4 page where it fits */
@media print {
  @page { size: A4; margin: 10mm 9mm; }
  .site-header, .site-footer, .compare-bar, .to-top, .cookie-bar, .toasts, .no-print, .skip-link,
  .announce, .cat-bar, .bottom-nav, .wa-float { display: none !important; }
  html { font-size: 12.5px; }
  body { background: #fff; }
  main, .site-main { padding: 0 !important; margin: 0 !important; }
  .invoice-page { padding: 0 !important; max-width: none; }
  .invoice { border: 0; box-shadow: none; border-radius: 0; padding: 0; overflow: visible; }
  .invoice, .inv-table th, .inv-totals__grand, .inv-table tbody tr:nth-child(even), .inv-foot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: inherit !important; text-decoration: none !important; }
  .inv-top { padding-block-end: .6rem; }
  .inv-top__logo { width: 110px; }
  .inv-top__title { font-size: 1.6rem; }
  .inv-info { grid-template-columns: 1.3fr 1fr; gap: 1rem; padding-block: .6rem; margin-block-end: .8rem; }
  .inv-info__meta { gap: .3rem 1.2rem; }
  .inv-info__meta dd, .inv-info__to { font-size: .8rem; }
  .inv-table { font-size: .78rem; }
  .inv-table th { padding: .4rem .55rem; font-size: .72rem; }
  .inv-table td { padding: .35rem .55rem; }
  .inv-table .num:first-child { display: table-cell; }
  .inv-table tr { break-inside: avoid; }
  .inv-item__thumb { width: 48px; height: 48px; }
  .inv-item__name { font-size: .8rem; }
  .inv-bottom { grid-template-columns: 1fr 250px; gap: 1rem; padding-block-start: .8rem; break-inside: avoid; }
  .inv-totals > div { font-size: .8rem; }
  .inv-totals .inv-totals__grand { padding: .45rem .7rem; }
  .inv-sign { padding-block: 1.6rem .8rem; break-inside: avoid; }
  .inv-foot { margin-inline: 0; padding: .6rem 0 .9rem; break-inside: avoid; }
  .inv-foot img { width: 80px; }
}
.invoice-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-block-start: 1.5rem; }

/* ── Catalog column switch (3 / 4 / 5 cards per row) ── */
.grid-switch { display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 3px; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-surface); }
.grid-switch button { display: inline-grid; place-items: center; width: 38px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--c-faint); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast); }
.grid-switch button[aria-pressed="true"] { background: var(--c-ink); color: #fff; box-shadow: 0 4px 10px -6px rgb(15 16 18 / 60%); }
.grid-switch button:hover:not([aria-pressed="true"]) { background: var(--c-bg-subtle); color: var(--c-ink); }
.grid-switch__icon { display: block; fill: currentColor; }
@media (max-width: 1200px) { .grid-switch { display: none; } }

/* ── First-visit guide ── */
.tour { position: fixed; inset: 0; z-index: 200; }
.tour--center { background: rgb(13 13 14 / 55%); display: grid; place-items: center; padding: 1rem; }
.tour__spot { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgb(13 13 14 / 55%), 0 0 0 2px var(--c-accent);
  transition: top var(--t) var(--ease), left var(--t) var(--ease), width var(--t) var(--ease), height var(--t) var(--ease); pointer-events: none; }
.tour__card { position: fixed; width: min(360px, calc(100vw - 24px)); padding: 1.15rem 1.25rem 1rem; background: var(--c-surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); animation: toast-in var(--t) var(--ease); }
.tour--center .tour__card { position: relative; width: min(420px, 100%); }
.tour__body strong { display: block; font-size: 1.05rem; font-weight: 800; margin-block-end: .35rem; }
.tour__body p { margin: 0; font-size: .9rem; line-height: 1.9; color: var(--c-muted); }
.tour__foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-block-start: 1rem; flex-wrap: wrap; }
.tour__btns { display: flex; align-items: center; gap: .4rem; }
.footer-link { color: inherit; font-size: inherit; text-align: start; }
@media print { .tour { display: none !important; } }
body.tour-open .cookie-bar { display: none; }

/* ── Compact header on phones (bell + currency + search + cart must fit 360px) ── */
@media (max-width: 560px) {
  .site-header__bar { gap: .5rem; }
  .site-header .brand-logo { height: 32px; max-width: 112px; object-fit: contain; }
  .header-tools { gap: 0; }
  .header-tools .icon-btn { width: 38px; height: 38px; }
  .site-header { --hctl: 38px; }
  .currency-select__btn { padding-inline: .55rem .4rem; }
}

/* ── Footer (stay connected · quick links · contact · follow us) ── */
.site-footer { background: #0b0b0d; color: #f1f0ec; padding-block: clamp(2.25rem, 4vw, 3.25rem) 1.5rem; font-size: .95rem; border-block-start: 1px solid rgb(255 255 255 / 8%); }
.site-footer a, .site-footer .link-btn { color: #f1f0ec; transition: color var(--t-fast); }
.site-footer a:hover, .site-footer .link-btn:hover { color: var(--c-accent-soft, #f5f0e8); text-decoration: none; opacity: .8; }
.footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; }
.footer-grid h3 { font-size: 1.1rem; font-weight: 700; color: #fff; margin-block-end: 1.3rem; }
.footer-grid li + li { margin-block-start: .75rem; }
.footer-stay { position: relative; isolation: isolate; }
.footer-stay::before { content: ""; position: absolute; z-index: -1; inset: -3rem -2rem auto auto; width: 260px; height: 220px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 7%), transparent); pointer-events: none; }
.footer-stay__title { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 800; color: #fff; line-height: 1.35; margin: 0 0 .9rem; max-width: 9ch; }
.footer-stay__text { color: #9c9ca2; line-height: 1.9; margin: 0 0 1.5rem; max-width: 300px; }
.footer-news { position: relative; display: flex; align-items: center; max-width: 300px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 10px; background: rgb(255 255 255 / 3%); transition: border-color var(--t-fast); }
.footer-news:focus-within { border-color: rgb(255 255 255 / 40%); }
.footer-news input { flex: 1; min-width: 0; height: 48px; padding-inline: 1rem 3.4rem; border: 0; background: none; color: #fff; font: inherit; font-size: .9rem; text-align: start; unicode-bidi: plaintext; }
.footer-news input::placeholder { color: #8a8a90; }
.footer-news input:focus { outline: none; }
.footer-news button { position: absolute; inset-inline-end: 5px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: #0b0b0d; cursor: pointer; transition: transform var(--t-fast) var(--ease); }
.footer-news button:hover { transform: scale(1.06); }
.footer-news button .icon { width: 17px; height: 17px; transform: scaleX(-1); }
[dir="ltr"] .footer-news button .icon { transform: none; }
.footer-contact { margin: 0; display: grid; gap: .75rem; }
.footer-contact li { display: block; line-height: 1.8; color: #f1f0ec; }
.footer-contact li + li { margin-block-start: 0; }
.footer-contact a { font-weight: 500; color: #f1f0ec; }
.footer-social { display: flex; flex-wrap: wrap; gap: .85rem; margin-block-end: 1.5rem; }
.footer-social li + li { margin-block-start: 0; }
.footer-social a { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 14%); transition: border-color var(--t-fast), background var(--t-fast); }
.footer-social a:hover { border-color: rgb(255 255 255 / 45%); background: rgb(255 255 255 / 6%); opacity: 1; }
.footer-social .icon { width: 19px; height: 19px; }
.footer-tech { display: flex; flex-wrap: wrap; gap: .4rem; }
.footer-tech li + li { margin-block-start: 0; }
.footer-tech a { display: inline-block; padding: .2rem .7rem; border: 1px solid rgb(255 255 255 / 12%); border-radius: var(--r-pill); font-size: .78rem; color: #c9c8c3; }
.footer-bottom { align-items: center; margin-block-start: 3rem; padding-block-start: 1.75rem; border-block-start: 1px solid rgb(255 255 255 / 10%); font-size: .88rem; color: #8a8a90; }
.footer-legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.footer-legal a, .footer-legal .link-btn { color: #f1f0ec; font-size: .88rem; }
@media (max-width: 1200px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 2.25rem; } .footer-bottom { flex-direction: column; align-items: flex-start; } }
/* Honeypot: clipped in place (an off-screen offset would widen the RTL page and add a horizontal scroll). */
.hp-field { position: absolute !important; width: 1px; height: 1px; padding: 0; border: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }

/* ── Floating WhatsApp + phone-width bottom bar ── */
.wa-float { position: fixed; inset-block-end: 1.5rem; inset-inline-start: 1.5rem; z-index: 70; width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 50%; background: #25d366; color: #fff; box-shadow: var(--shadow-lg); transition: transform var(--t-fast) var(--ease); }
.wa-float:hover { transform: scale(1.06); }
.wa-float:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.wa-float .icon { width: 26px; height: 26px; }
body:has(.cookie-bar) .wa-float, body.tour-open .wa-float { display: none; }
/* Bottom bar, next to the copyright: a compact seal card (fixed box, no jump while the seal loads) */
.footer-copy { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.footer-trust { display: inline-flex; align-items: center; gap: .6rem; padding: .3rem .75rem .3rem .3rem; border-radius: 14px; border: 1px solid rgb(255 255 255 / 10%); background: rgb(255 255 255 / 4%); }
.footer-trust__seal { display: grid; place-items: center; width: 52px; height: 56px; border-radius: 10px; background: #fff; overflow: hidden; }
.footer-trust__seal a { display: grid; place-items: center; width: 100%; height: 100%; }
.footer-trust__seal img { width: 46px; height: auto; aspect-ratio: 125 / 136; object-fit: contain; }
.footer-trust__label { font-size: .8rem; font-weight: 600; color: #f1f0ec; line-height: 1.5; }

.bottom-nav { display: none; }
@media (max-width: 720px) {
  .bottom-nav { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 75; display: grid; grid-template-columns: repeat(5, 1fr);
    padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--c-surface) 94%, transparent);
    backdrop-filter: saturate(1.4) blur(12px); border-block-start: 1px solid var(--c-border); }
  .bottom-nav__item { position: relative; display: grid; justify-items: center; gap: .15rem; padding: .3rem 0; border: 0; background: none;
    color: var(--c-muted); font: inherit; font-size: .7rem; text-decoration: none; cursor: pointer; }
  .bottom-nav__item .icon { width: 22px; height: 22px; }
  .bottom-nav__item.is-active, .bottom-nav__item:hover { color: var(--c-ink); }
  .bottom-nav__item .icon-btn__count { position: absolute; inset-block-start: 0; inset-inline-start: calc(50% + 4px); }
  body { padding-block-end: calc(64px + env(safe-area-inset-bottom)); }
  .wa-float { inset-block-end: calc(76px + env(safe-area-inset-bottom)); inset-inline-start: 1rem; width: 46px; height: 46px; }
  .to-top { inset-block-end: calc(76px + env(safe-area-inset-bottom)); inset-inline-end: 1rem; }
  .cookie-bar { inset-block-end: calc(72px + env(safe-area-inset-bottom)); }
  .compare-bar { inset-block-end: calc(64px + env(safe-area-inset-bottom)); }
  body:has(.compare-bar) .to-top { inset-block-end: calc(140px + env(safe-area-inset-bottom)); }
}
@media print { .bottom-nav, .wa-float, .to-top { display: none !important; } }

/* ── Header «فناوری‌ها» menu ── */
.main-nav__group { position: relative; }
.nav-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary .icon { width: 14px; height: 14px; transition: transform var(--t-fast); }
.nav-menu[open] > summary .icon { transform: rotate(180deg); }
.nav-menu__list { position: absolute; inset-inline-start: 0; inset-block-start: calc(100% + .5rem); z-index: 80; min-width: 260px; padding: .4rem;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; box-shadow: var(--shadow-lg); }
.nav-menu__link { display: grid; gap: .1rem; padding: .55rem .75rem; border-radius: 10px; color: var(--c-ink); text-decoration: none; }
.nav-menu__link span { font-weight: 600; font-size: .92rem; }
.nav-menu__link span.ltr { text-align: start; direction: ltr; unicode-bidi: isolate; }
.nav-menu__link small { color: var(--c-muted); font-size: .76rem; }
.nav-menu__link:hover, .nav-menu__link.is-active { background: var(--c-bg-subtle); }
.mobile-nav__heading { padding: .9rem 0 .3rem; font-size: .8rem; color: var(--c-muted); }
.mobile-nav__chips { display: flex; flex-wrap: wrap; gap: .4rem; padding-block-end: .6rem; border-block-end: 1px solid var(--c-border); }
.mobile-nav__chips .chip { display: inline-flex; padding: .35rem .8rem; border: 1px solid var(--c-border-strong); border-radius: 999px; font-size: .85rem; color: var(--c-ink); text-decoration: none; }

/* ── Product FAQ ── */
.product-faq { max-width: 860px; margin-block: 2.5rem 1rem; }
.product-faq .h3 { margin-block-end: 1rem; }
.faq-item { border-block-end: 1px solid var(--c-border); }
.faq-item > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; font-weight: 600; cursor: pointer; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary .icon { flex: none; width: 18px; height: 18px; color: var(--c-muted); transition: transform var(--t-fast); }
.faq-item[open] > summary .icon { transform: rotate(180deg); }
.faq-item > p { margin: 0 0 1rem; color: var(--c-muted); line-height: 1.9; }

/* ── Cart → pro-forma request ── */
.quote-form { display: grid; gap: .75rem; margin-block-start: 1.25rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--c-border); }
.quote-form__title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.quote-form .field { display: grid; gap: .3rem; }
.quote-done { display: flex; gap: 1rem; align-items: flex-start; margin-block-end: var(--section); padding: 1.5rem; border-radius: 18px; background: var(--c-success-soft); }
.quote-done__icon { flex: none; width: 28px; height: 28px; color: var(--c-success, #1f7a3e); }

/* ── Customer reviews ── */
.product-reviews { max-width: 860px; margin-block: 2.5rem 1rem; }
.product-reviews__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-block-end: 1rem; }
.product-reviews__score { display: flex; align-items: baseline; gap: .5rem; margin: 0; }
.product-reviews__score strong { font-size: 1.6rem; }
.stars { color: #d4a017; letter-spacing: .05em; white-space: nowrap; }
.stars__off { color: var(--c-border-strong); }
.review { padding-block: 1rem; border-block-end: 1px solid var(--c-border); }
.review__head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin-block-end: .35rem; }
.review p { margin: 0; line-height: 1.9; }
.review__reply { margin-block-start: .75rem; padding: .75rem 1rem; border-inline-start: 3px solid var(--c-accent); background: var(--c-bg-subtle); border-radius: 8px; font-size: .92rem; }
.review-form-wrap { margin-block-start: 1.25rem; }
.review-form-wrap > summary { list-style: none; display: inline-flex; }
.review-form-wrap > summary::-webkit-details-marker { display: none; }
.review-form { display: grid; gap: .8rem; max-width: 560px; margin-block-start: 1rem; }
.review-form .field { display: grid; gap: .3rem; }
.rating-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15rem; border: 0; padding: 0; margin: 0; }
.rating-input legend { width: 100%; margin-block-end: .25rem; }
.rating-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating-input label { font-size: 1.7rem; line-height: 1; color: var(--c-border-strong); cursor: pointer; transition: color var(--t-fast); }
.rating-input input:checked ~ label, .rating-input label:hover, .rating-input label:hover ~ label { color: #d4a017; }
.rating-input input:focus-visible + label { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: 4px; }

/* ── Checkout and order pages ── */
.checkout-steps, .order-progress { display: flex; gap: .4rem; flex-wrap: wrap; padding: 0; margin: 1rem 0 0; list-style: none; counter-reset: step; }
.checkout-steps li, .order-progress li { counter-increment: step; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem .35rem .6rem; border-radius: 999px; background: var(--c-bg-subtle); color: var(--c-muted); font-size: .85rem; }
.checkout-steps li::before, .order-progress li::before { content: counter(step, persian); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-border); color: var(--c-ink); font-size: .75rem; font-weight: 700; }
.checkout-steps li.is-done, .order-progress li.is-done { color: var(--c-ink); }
.checkout-steps li.is-done::before, .order-progress li.is-done::before { content: "✓"; background: var(--c-success, #1f7a3e); color: #fff; }
.checkout-steps li.is-current, .order-progress li.is-current { background: var(--c-ink); color: var(--c-bg); }
.checkout-steps li.is-current::before, .order-progress li.is-current::before { background: var(--c-accent); color: #fff; }
.order-progress { margin-block-end: 1.5rem; }
.checkout-card { padding: 1.25rem 1.4rem; border: 1px solid var(--c-border); border-radius: 18px; background: var(--c-surface); margin-block-end: 1.25rem; }
.checkout-card .h3 { margin-block-end: 1rem; }
.checkout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
.checkout-grid .field, .checkout-card .field { display: grid; gap: .3rem; }
.checkout-grid__wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .checkout-grid { grid-template-columns: 1fr; } }
.checkout__errors { margin: 0; padding-inline-start: 1.1rem; }
.choice-list { display: grid; gap: .6rem; }
.choice { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; padding: .85rem 1rem; border: 1px solid var(--c-border); border-radius: 14px; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.choice:has(input:checked) { border-color: var(--c-ink); background: var(--c-bg-subtle); }
.choice.is-disabled { opacity: .45; cursor: not-allowed; }
.choice__body { display: grid; gap: .15rem; }
.choice__price { font-weight: 700; white-space: nowrap; }
.checkout-items { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; }
.checkout-items li { display: grid; grid-template-columns: 1fr auto; gap: .1rem .75rem; font-size: .9rem; }
.checkout-items li > .caption { grid-row: 2; }
.checkout-items li > bdi { grid-row: 1 / 3; grid-column: 2; align-self: center; font-weight: 600; }
.checkout__terms { margin-block: 1rem; font-size: .9rem; }
.checkout__summary { position: sticky; inset-block-start: calc(var(--stick-top, var(--header-h, 64px)) + 1rem); transition: inset-block-start var(--t) var(--ease); align-self: start; }
.bank-box { margin-block-start: 1.25rem; padding: 1rem 1.2rem; border-radius: 14px; background: var(--c-bg-subtle); }
.bank-box dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: .75rem 0 1rem; }
.bank-box dt { color: var(--c-muted); }
.bank-box dd { margin: 0; font-weight: 600; }
.transfer-form { display: grid; gap: .75rem; }
.order-pay .btn--lg { margin-block: .5rem; }
.order-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 1rem; align-items: center; padding-block: .75rem; border-block-end: 1px solid var(--c-border); }
.order-line:last-child { border-block-end: 0; }
.order-line .cart-line__img { width: 64px; height: 64px; }
.order-line__info { display: grid; gap: .2rem; }
.order-sub { font-size: .95rem; margin: 1.25rem 0 .4rem; }

/* ── Discount code in the cart ── */
.coupon-form { display: flex; gap: .5rem; margin-block: .9rem .4rem; }
.coupon-form .input { flex: 1; min-width: 0; text-transform: uppercase; }
.coupon-row bdi { color: var(--c-success, #1f7a3e); font-weight: 600; }
.coupon-remove { margin-block: -.25rem .5rem; }

/* "Brand country" note next to the country of origin */
.origin-note { display: inline-flex; align-items: center; gap: .25rem; margin-inline-start: .4rem; padding: .05rem .5rem; border-radius: 999px; background: var(--c-bg-subtle); color: var(--c-muted); font-size: .72rem; font-weight: 500; cursor: help; vertical-align: middle; }
.origin-note .icon { width: 12px; height: 12px; }
.origin-note:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* Invoice: rial equivalent, paid stamp, payment box */
.invoice__paid { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-block-start: 1.25rem; padding: .8rem 1rem; border-radius: var(--r);
  background: #e9f7ef; color: #146c3c; font-weight: 700; }
.invoice-pay { max-width: 640px; margin: 1.5rem auto 0; padding: 1.5rem; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-bg); text-align: center; }
.invoice-pay form { margin-block: 1rem .25rem; }
.invoice-pay .bank-box { text-align: start; }
@media print { .invoice__paid { background: none; border: 2px solid #146c3c; } }

/* Category landing page: sub-category chips, guide + FAQ under the grid */
.subcats { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: 1.25rem; }
.subcats__item { padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-bg); font-weight: 600; font-size: .9rem; transition: border-color var(--t-fast), background var(--t-fast); }
.subcats__item:hover { border-color: var(--c-ink); }
.category-guide { margin-block: clamp(2rem, 1.5rem + 2vw, 3rem) 1rem; padding-block-start: 1.75rem; border-block-start: 1px solid var(--c-border); display: grid; gap: 1.75rem; }
.category-guide .prose { max-width: 860px; }

/* ── Brand logo strip (home page and shop): full-width band, logos scroll, edges blur out ── */
.logo-strip { border-block: 1px solid var(--c-border); background: var(--c-bg-subtle); }
.logo-strip__box { position: relative; overflow: hidden; direction: ltr; background: var(--c-bg-subtle); }
.logo-strip__track { display: flex; align-items: center; width: max-content; padding-block: 1.6rem; animation: logo-strip 50s linear infinite; }
.logo-strip__box:hover .logo-strip__track { animation-play-state: paused; }
.logo-strip__item { display: grid; place-items: center; padding-inline: clamp(1.25rem, 2.5vw, 2.25rem); }
.logo-strip__item img { width: auto; max-width: 150px; object-fit: contain; transition: transform var(--t) var(--ease); }
.logo-strip__item:hover img { transform: scale(1.06); }
/* Progressive blur + fade into the box colour on both sides. */
.logo-strip__blur { position: absolute; inset-block: 0; width: min(18%, 320px); z-index: 1; pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.logo-strip__blur--start { left: 0; background: linear-gradient(90deg, var(--c-bg-subtle), transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent); mask-image: linear-gradient(90deg, #000 30%, transparent); }
.logo-strip__blur--end { right: 0; background: linear-gradient(270deg, var(--c-bg-subtle), transparent);
  -webkit-mask-image: linear-gradient(270deg, #000 30%, transparent); mask-image: linear-gradient(270deg, #000 30%, transparent); }
.shop-brands { margin-block-end: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.shop-brands .logo-strip__track { padding-block: 1.1rem; }
@keyframes logo-strip { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logo-strip__track { animation: none; } }

/* ── Academy: article cards, list and article page ── */
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, .5rem + 1.5vw, 1.75rem); }
.article-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); color: inherit; text-decoration: none; transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease); }
.article-card:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow); transform: translateY(-3px); }
.article-card__media { position: relative; display: block; aspect-ratio: 16 / 9; margin: .6rem .6rem 0; overflow: hidden; border-radius: calc(var(--r-lg) - .4rem); background: var(--c-bg-subtle); }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.article-card:hover .article-card__media img { transform: scale(1.05); }
.article-card__placeholder { display: grid; place-items: center; align-content: center; gap: .5rem; height: 100%; color: var(--c-accent); font-weight: 700; background: radial-gradient(120% 120% at 100% 0%, var(--c-accent-soft), var(--c-bg-subtle)); }
.article-card__placeholder .icon { width: 36px; height: 36px; }
.article-card__topic { position: absolute; inset-block-start: .6rem; inset-inline-end: .6rem; /* the cover's own label sits at the start corner */ padding: .25rem .65rem; border-radius: var(--r-pill); font-size: .72rem; font-weight: 700; background: rgb(255 255 255 / 90%); color: #16181c; } /* fixed dark text: the pill stays white in dark mode too */
.article-card__body { display: flex; flex-direction: column; gap: .5rem; flex: 1; padding: 1rem 1.1rem 1.1rem; }
.article-card__title { font-size: 1rem; font-weight: 800; line-height: 1.75; color: var(--c-ink); }
.article-card__excerpt { font-size: .86rem; line-height: 1.9; color: var(--c-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-card__meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-block-start: auto; padding-block-start: .4rem; font-size: var(--fs-caption); color: var(--c-muted); }
.article-card__meta span { display: inline-flex; align-items: center; gap: .3rem; }
.article-card__meta .icon { width: 14px; height: 14px; }
.article__head { max-width: 860px; padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) 1.5rem; }
.article__cover, .article__body { margin-inline: auto; }
.article__cover { max-width: 860px; }
.article__head > * + * { margin-block-start: 1rem; }
.article__title { font-size: var(--fs-h1); font-weight: 900; line-height: 1.5; color: var(--c-ink); }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; font-size: var(--fs-small); color: var(--c-muted); }
.article__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.article__meta .icon { width: 15px; height: 15px; }
.author-box { display: flex; gap: 1rem; align-items: flex-start; max-width: 760px; margin: 2.5rem auto 0; padding: 1.25rem 1.4rem; border: 1px solid var(--c-border); border-radius: var(--r); background: var(--c-bg-subtle); }
.author-box__avatar { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-accent-strong); color: #fff; font-size: 1.35rem; font-weight: 800; }
.author-box p { margin: 0; }
.author-box__label { font-size: var(--fs-caption); color: var(--c-muted); }
.author-box__name { font-weight: 800; color: var(--c-ink); display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; }
.author-box__name span { font-size: var(--fs-small); font-weight: 500; color: var(--c-muted); }
.author-box__bio { margin-block-start: .35rem !important; font-size: .92rem; line-height: 1.85; color: var(--c-text); }
.article__cover { display: block; width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--r-lg); }
.article__body { max-width: 860px; padding-block: 2.5rem var(--section); }
@media (max-width: 1024px) { .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .article-grid { grid-template-columns: minmax(0, 1fr); } }
.pdp-special { display: flex; align-items: center; gap: .5rem; margin-block: 1rem 0; padding: .7rem 1rem; border-radius: var(--r); background: var(--c-warning-soft); color: var(--c-warning); font-size: .9rem; font-weight: 600; }
.pdp-special .icon { width: 18px; height: 18px; flex: none; }

/* ── Shop filters: one tidy panel (desktop card, mobile drawer content) ── */
.filters { padding: 0 1rem; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--shadow-sm); }
.filters__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .5rem; margin-inline: -1rem; padding: .95rem 1rem; background: var(--c-surface); border-block-end: 1px solid var(--c-border); }
.filters__head strong { display: inline-flex; align-items: center; gap: .45rem; font-size: 1rem; font-weight: 800; color: var(--c-ink); }
.filters__head strong .icon { width: 18px; height: 18px; color: var(--c-accent); }
.filters__count { min-width: 22px; height: 22px; padding-inline: 6px; border-radius: var(--r-pill); background: var(--c-accent); color: #fff; font-size: .72rem; font-weight: 700; line-height: 22px; text-align: center; }
.filters__reset { margin-inline-start: auto; font-size: .8rem; font-weight: 600; color: var(--c-error); text-decoration: none; }
.filters__reset:hover { text-decoration: underline; }

/* Special-offers switch */
.filter-switch { display: flex; align-items: center; gap: .65rem; margin-block: 1rem .25rem; padding: .7rem .8rem; border-radius: var(--r); background: var(--c-accent-soft); border: 1px solid color-mix(in srgb, var(--c-accent) 22%, transparent); cursor: pointer; } /* site greens, not the warning palette */
.filter-switch input { position: absolute; opacity: 0; pointer-events: none; }
.filter-switch__track { position: relative; flex: none; width: 36px; height: 20px; border-radius: var(--r-pill); background: var(--c-border-strong); transition: background var(--t-fast) var(--ease); }
.filter-switch__track::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--t-fast) var(--ease); }
.filter-switch input:checked + .filter-switch__track { background: var(--c-accent); }
[dir="rtl"] .filter-switch input:checked + .filter-switch__track::after { transform: translateX(-16px); }
[dir="ltr"] .filter-switch input:checked + .filter-switch__track::after { transform: translateX(16px); }
.filter-switch input:focus-visible + .filter-switch__track { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.filter-switch__text { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 700; color: var(--c-accent); }
.filter-switch__text .icon { width: 16px; height: 16px; }

/* Groups */
.filters--panel .filter-group:last-of-type { border-block-end: 0; }
.filters--panel .filter-group summary { gap: .5rem; justify-content: flex-start; padding-block: .95rem; }
.filters--panel .filter-group summary .icon { margin-inline-start: auto; }
.filter-group__title { font-weight: 800; color: var(--c-ink); }
.filter-group__badge { min-width: 20px; height: 20px; padding-inline: 5px; border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-accent); font-size: .7rem; font-weight: 800; line-height: 20px; text-align: center; }
.filters--panel .filter-group__body { padding-block-end: .9rem; }

/* Options: label, count; long lists fold */
.filter-options { margin: 0; padding: 0; list-style: none; }
.filter-options > li[hidden], .filter-options:not(.is-expanded):not(.is-searching) > .is-extra { display: none; }
.filter-option { display: flex; align-items: center; gap: .6rem; margin-inline: -.5rem; padding: .4rem .5rem; border-radius: 8px; font-size: .88rem; color: var(--c-graphite); transition: background var(--t-fast) var(--ease); }
.filter-option:hover { background: var(--c-bg-subtle); }
.filter-option__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-option__label.ltr { text-align: end; direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .filter-option__label.ltr { text-align: right; }
.filter-option__count { flex: none; min-width: 26px; padding: .05rem .4rem; border-radius: var(--r-pill); background: var(--c-bg-subtle); color: var(--c-muted); font-size: .7rem; font-weight: 600; text-align: center; }
.filter-option:has(input:checked) { color: var(--c-ink); font-weight: 700; }
.filter-option:has(input:checked) .filter-option__count { background: var(--c-accent-soft); color: var(--c-accent); }
.filters--panel .check input:checked { background: var(--c-accent); border-color: var(--c-accent); }
.filter-more { display: inline-flex; align-items: center; gap: .3rem; margin-block-start: .35rem; padding: .25rem 0; border: 0; background: none; color: var(--c-accent); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.filter-more .icon { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }
.filter-more.is-open .icon { transform: rotate(180deg); }
.filter-empty { margin: .4rem 0 0; font-size: .8rem; color: var(--c-muted); }

/* Search inside a long group */
.filter-search { position: relative; margin-block-end: .5rem; }
.filter-search .icon { position: absolute; inset-block-start: 50%; inset-inline-start: .65rem; width: 15px; height: 15px; color: var(--c-muted); transform: translateY(-50%); pointer-events: none; }
.filter-search__input { width: 100%; height: 36px; padding-inline: 2.1rem .75rem; border: 1px solid var(--c-border); border-radius: var(--r-pill); background: var(--c-bg-subtle); color: var(--c-ink); font: inherit; font-size: .82rem; }
.filter-search__input:focus { outline: none; border-color: var(--c-accent); background: var(--c-surface); }

/* Technical features as chips */
.filter-options--chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-block-start: .4rem; }
.filter-chip { display: inline-flex; cursor: pointer; }
.filter-chip input { position: absolute; opacity: 0; pointer-events: none; }
.filter-chip span { padding: .3rem .7rem; border: 1px solid var(--c-border); border-radius: var(--r-pill); font-size: .78rem; color: var(--c-graphite); transition: all var(--t-fast) var(--ease); }
.filter-chip:hover span { border-color: var(--c-border-strong); }
.filter-chip input:checked + span { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-ink); font-weight: 700; }
.filter-chip__count { margin-inline-start: .35em; font-size: .9em; color: var(--c-muted, #8a8f98); font-weight: 400; }
.filter-chip input:focus-visible + span { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* Apply button stays reachable at the bottom of the panel */
.filters .filters__actions { position: sticky; bottom: 0; margin-inline: -1rem; padding: .85rem 1rem; background: var(--c-surface); border-block-start: 1px solid var(--c-border); }
/* Price slider in the accent colour inside the filter panel */
.filters--panel .range__fill { background: var(--c-accent); }
.filters--panel .range input[type="range"]::-webkit-slider-thumb { border-color: var(--c-accent); }
.filters--panel .range input[type="range"]::-moz-range-thumb { border-color: var(--c-accent); }

/* Footer: follow us (icons) + technologies (tidy chip grid); display mode moved to the bottom bar */
.footer-social { gap: .6rem; margin-block-end: 1.75rem; }
.footer-social a { width: 44px; height: 44px; }
.footer-grid .footer-subhead { margin-block-end: .85rem; font-size: .95rem; color: #fff; }
.footer-tech { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.footer-tech a { display: block; padding: .4rem .3rem; text-align: center; border-radius: 10px; font-size: .8rem; }
.footer-tech a:hover { border-color: rgb(255 255 255 / 35%); background: rgb(255 255 255 / 5%); opacity: 1; }
.footer-bottom .footer-theme { display: inline-flex; align-items: center; gap: .6rem; margin: 0; margin-inline-start: auto; }
.footer-bottom .footer-theme > span { color: #8a8a90; }
.footer-theme .icon-btn, .footer-theme button { background: rgb(255 255 255 / 6%); border: 1px solid rgb(255 255 255 / 14%); color: #f1f0ec; }
.footer-theme .icon-btn:hover, .footer-theme button:hover { border-color: var(--c-brand, #78d850); color: var(--c-brand, #78d850); }
@media (max-width: 720px) { .footer-bottom .footer-theme { margin-inline-start: 0; } }

/* Product Q&A: question mark chip, answers marked as the store's */
.faq-item > summary { justify-content: flex-start; }
.faq-item > summary .icon { margin-inline-start: auto; }
.faq-item__q { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--c-accent-soft); color: var(--c-accent); font-weight: 900; }
.faq-item__a { margin: 0 0 1.1rem; padding: .85rem 1rem; border-radius: var(--r); background: var(--c-bg-subtle); }
.faq-item__a p { margin: .35rem 0 0; color: var(--c-graphite); line-height: 1.95; }
.faq-item__by { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 700; color: var(--c-success); }
.faq-item__by .icon { width: 14px; height: 14px; }

/* ==========================================================================
   Amin Smart brand theme — white, light grey and the logo green (#78d850).
   The logo green is used for fills and highlights; a deeper shade of it
   (--c-accent) for text, buttons and links so they keep enough contrast on white.
   Light mode only: dark mode keeps its own tokens (theme-dark.css).
   ========================================================================== */
:root {
  --c-bg-subtle: #f3f5f3;
  --c-surface-2: #f9faf9;
  --c-ink: #1f2421;
  --c-graphite: #353b37;
  --c-text: #232825;
  --c-muted: #616161;
  --c-border: #e3e7e3;
  --c-border-strong: #cdd3cd;
  --c-brand: #78d850;
  --c-brand-soft: #f0faea;
  --c-accent: #3a9a1f;
  --c-accent-strong: #2e7f17;
  --c-accent-soft: #eef8e8;
  --c-focus: #4cb12a;
}
:root:not([data-theme="dark"]) .btn:not(.btn--secondary):not(.btn--light):not(.btn--outline-light):not(.btn--ghost) {
  --btn-bg: var(--c-accent-strong); --btn-border: var(--c-accent-strong); --btn-fg: #fff;
}
:root:not([data-theme="dark"]) .btn:not(.btn--secondary):not(.btn--light):not(.btn--outline-light):not(.btn--ghost):hover {
  --btn-bg: #256a12; --btn-border: #256a12;
}
:root:not([data-theme="dark"]) .btn--secondary:hover { --btn-border: var(--c-accent); --btn-fg: var(--c-accent-strong); }
:root:not([data-theme="dark"]) .product-card__cart { background: var(--c-accent); box-shadow: 0 10px 20px -12px rgb(58 154 31 / 75%); }
:root:not([data-theme="dark"]) .product-card__cart:hover { background: var(--c-accent-strong); box-shadow: 0 14px 24px -12px rgb(58 154 31 / 75%); }
:root:not([data-theme="dark"]) a:hover { color: var(--c-accent); }
:root:not([data-theme="dark"]) .main-nav__link.is-active, :root:not([data-theme="dark"]) .cat-bar__link.is-active { color: var(--c-accent); }

/* Footer: light grey with the regular (dark) logo */
/* Footer stays dark in both themes; the brand green marks its top edge, links and actions. */
.site-footer { border-block-start: 3px solid var(--c-brand, #78d850); }
.site-footer a:hover, .site-footer .link-btn:hover { color: var(--c-brand, #78d850); opacity: 1; }
.footer-stay::before { background: radial-gradient(closest-side, rgb(120 216 80 / 14%), transparent); }
.footer-news:focus-within { border-color: var(--c-brand, #78d850); }
.footer-news button { background: var(--c-brand, #78d850); color: #10140f; }
.footer-social a:hover { border-color: var(--c-brand, #78d850); background: rgb(120 216 80 / 10%); color: var(--c-brand, #78d850); }
.footer-tech a:hover { border-color: var(--c-brand, #78d850); color: var(--c-brand, #78d850); }
:root:not([data-theme="dark"]) .special-box { background: linear-gradient(135deg, var(--c-brand-soft), var(--c-bg-subtle)); border-color: color-mix(in srgb, var(--c-brand) 35%, transparent); }
:root:not([data-theme="dark"]) .special-box .eyebrow { color: var(--c-accent); }
:root:not([data-theme="dark"]) .to-top { background: var(--c-accent); }
:root:not([data-theme="dark"]) .to-top:hover { background: var(--c-accent-strong); }

/* ── Customer account (SMS sign-in + orders / invoices) ── */
.account-auth { max-width: 520px; padding-block-end: var(--section); }
.account-auth__links { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-block-start: 1rem; font-size: .9rem; }
.account-code { font-size: 1.4rem; letter-spacing: .5em; text-align: center; }
.field-error { margin: -.25rem 0 0; color: var(--c-error); font-size: .85rem; }
.account-page { max-width: 980px; padding-block-end: var(--section); }
.account-page__head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; }
.account-section + .account-section { margin-block-start: 2rem; }
.account-section h2 { margin-block-end: .9rem; }
.account-table { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--r); }
.account-table table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.account-table th, .account-table td { padding: .8rem 1rem; text-align: start; border-block-end: 1px solid var(--c-border); white-space: nowrap; }
.account-table th { background: var(--c-bg-subtle); font-weight: 700; color: var(--c-muted); font-size: .82rem; }
.account-table tr:last-child td { border-block-end: 0; }
.account-table a { color: var(--c-accent); font-weight: 600; }
.icon-btn.is-signed-in::after { content: ""; position: absolute; inset-block-start: 7px; inset-inline-end: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-brand, #78d850); box-shadow: 0 0 0 2px var(--c-bg); }

/* ── Sign-in pages (layouts/auth): centred white card on light grey, pill link back to the store ── */
.auth-page { min-height: 100vh; min-height: 100dvh; background: var(--c-bg-subtle); }
.auth-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: 2rem 16px; }
.auth-card { width: 100%; max-width: 440px; padding: 1.5rem 1.75rem 2rem; border-radius: 22px; background: var(--c-surface, #fff); border: 1px solid var(--c-border); box-shadow: 0 24px 60px -32px rgb(20 30 20 / 28%); }
.auth-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 1.75rem; }
.auth-card__logo .brand-logo { height: 46px; width: auto; }
.auth-card__logo .brand-logo--light { display: none; }
.auth-card__theme { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-bg-subtle); color: var(--c-ink); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.auth-card__theme:hover { color: var(--c-accent); }
.auth-card__theme .icon { width: 20px; height: 20px; }
.auth-card__sun, [data-theme="dark"] .auth-card__moon { display: none; }
[data-theme="dark"] .auth-card__sun { display: block; }
.auth-card__title { margin: 0 0 .5rem; font-size: 1.35rem; font-weight: 800; color: var(--c-ink); }
.auth-card__intro { margin: 0 0 1.5rem; font-size: .88rem; line-height: 1.9; color: var(--c-muted); }
.auth-form { display: grid; gap: .9rem; }
.auth-input { display: flex; align-items: center; gap: .65rem; height: 54px; padding-inline: 1rem; border: 1.5px solid var(--c-border-strong); border-radius: 14px; background: var(--c-surface, #fff); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.auth-input:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 4px rgb(120 216 80 / 20%); }
.auth-input__icon { flex: none; width: 20px; height: 20px; color: var(--c-muted); }
.auth-input:focus-within .auth-input__icon { color: var(--c-accent); }
.auth-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--c-ink); font: inherit; font-size: 1rem; }
.auth-input input::placeholder { color: var(--c-faint); font-size: .92rem; }
.auth-input input:not(:placeholder-shown) { direction: ltr; text-align: right; letter-spacing: .04em; }
.auth-input .account-code { text-align: center; letter-spacing: .5em; font-size: 1.2rem; direction: ltr; }
.auth-submit { display: flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; height: 54px; border: 0; border-radius: 14px; background: var(--c-accent); color: #fff; font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; box-shadow: 0 14px 26px -14px rgb(58 154 31 / 80%); transition: background var(--t-fast), transform var(--t-fast); }
.auth-submit:hover { background: var(--c-accent-strong); }
.auth-submit:active { transform: scale(.98); }
.auth-submit .icon { width: 20px; height: 20px; }
.auth-card__links { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-block-start: 1.1rem; font-size: .86rem; color: var(--c-muted); }
.auth-card__links a, .auth-card__links .link-btn { color: var(--c-accent); font-weight: 700; }
.auth-back { display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; padding: .6rem 1.1rem; border-radius: 999px; background: var(--c-surface, #fff); border: 1px solid var(--c-border); color: var(--c-graphite); font-size: .85rem; font-weight: 600; box-shadow: 0 8px 20px -14px rgb(20 30 20 / 30%); transition: color var(--t-fast), border-color var(--t-fast); }
.auth-back:hover { color: var(--c-accent); border-color: var(--c-accent); }
.auth-back .icon { flex: none; width: 16px; height: 16px; }
[data-theme="dark"] .auth-card__logo .brand-logo--dark { display: none; }
[data-theme="dark"] .auth-card__logo .brand-logo--light { display: block; }
[data-theme="dark"] .auth-submit { color: #10210a; }
@media (max-width: 480px) { .auth-card { padding: 1.25rem 1.15rem 1.5rem; border-radius: 18px; } .auth-back { font-size: .78rem; } }
.auth-card .notice { margin: 0 0 1rem; padding: .65rem .9rem; border-radius: 12px; font-size: .85rem; background: var(--c-success-soft, #e9f7e3); color: var(--c-accent-strong, #2e7f17); }

/* Small phones: cart lives in the bottom bar and the theme switch in the footer, so the header keeps menu, logo, search, currency and account. */
@media (max-width: 480px) {
  .site-header .header-cart { display: none; }
  .site-header__bar { gap: .35rem; }
}
.toast--error .icon { color: #ff8a8a; }
.auth-countdown b { display: inline-block; min-width: 1.6em; text-align: center; color: var(--c-accent); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Sign-in card: password show / hide, "remember me", centred link row; account details form */
.auth-input__eye { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-inline-end: -.4rem; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--c-muted); cursor: pointer; }
.auth-input__eye:hover, .auth-input__eye[aria-pressed="true"] { color: var(--c-accent); }
.auth-input__eye .icon { width: 19px; height: 19px; }
.auth-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--c-text); cursor: pointer; user-select: none; }
.auth-check input { width: 18px; height: 18px; accent-color: var(--c-accent); }
.auth-card__links form { display: contents; }
.auth-card__links--center { justify-content: center; margin-block-start: .6rem; }
.account-profile { display: grid; gap: .9rem; max-width: 760px; }
.account-profile__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.1rem; }
.account-profile__grid .field { display: grid; gap: .35rem; }
.account-profile__hint { margin: 0; font-size: .85rem; }
.account-profile .btn { justify-self: start; }
@media (max-width: 640px) { .account-profile__grid { grid-template-columns: 1fr; } }

/* Manager browsing the store as a customer */
.impersonation-bar { position: sticky; top: 0; z-index: 120; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem 1rem;
  padding: .55rem 16px; background: #fff4d6; color: #5c4400; font-size: .88rem; font-weight: 600; border-block-end: 1px solid #f0d58a; }
.impersonation-bar a { padding: .25rem .8rem; border-radius: 999px; background: #5c4400; color: #fff; text-decoration: none; }

/* ── Announcement bar: thin, above every page; a soft light sweep and a pulsing dot draw the eye ── */
.announce { --a-bg: linear-gradient(90deg, #2e7f17, #3a9a1f 35%, #4fb52c 65%, #2e7f17); --a-fg: #fff; --a-pill: rgb(255 255 255 / 20%);
  position: relative; z-index: 60; overflow: hidden; background: var(--a-bg); color: var(--a-fg); font-size: .84rem; font-weight: 700; line-height: 1.4; }
.announce--red { --a-bg: linear-gradient(90deg, #b42318, #d92d20 40%, #f04438 70%, #b42318); }
.announce--amber { --a-bg: linear-gradient(90deg, #c2410c, #ea580c 40%, #f59e0b 75%, #c2410c); }
.announce--dark { --a-bg: linear-gradient(90deg, #111827, #1f2937 50%, #111827); --a-pill: rgb(120 216 80 / 25%); }
.announce::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 28%) 50%, transparent 65%); transform: translateX(-120%); animation: announce-sweep 6s ease-in-out infinite 1.2s; }
@keyframes announce-sweep { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.announce__inner { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 36px; padding: .35rem 2.75rem; max-width: 1400px; margin-inline: auto; }
.announce__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgb(255 255 255 / 70%); animation: announce-pulse 1.8s ease-out infinite; }
.announce--dark .announce__dot { background: #78d850; }
@keyframes announce-pulse { 70% { box-shadow: 0 0 0 7px rgb(255 255 255 / 0%); } 100% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0%); } }
.announce__track { min-width: 0; overflow: hidden; white-space: nowrap; }
.announce__text { display: inline-block; text-shadow: 0 1px 1px rgb(0 0 0 / 15%); }
/* Too long for the screen (set by app.js): scroll gently */
.announce__track.is-scrolling { mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.announce__track.is-scrolling .announce__text { padding-inline: 2rem; animation: announce-scroll var(--announce-duration, 14s) linear infinite; }
@keyframes announce-scroll { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.announce__link { flex: none; display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .7rem; border-radius: 999px; background: var(--a-pill); color: inherit; text-decoration: none; font-size: .78rem; transition: background .2s; }
.announce__link:hover { background: rgb(255 255 255 / 32%); }
.announce__link .icon { width: 14px; height: 14px; }
.announce__close { position: absolute; z-index: 1; inset-inline-end: .5rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 26px; height: 26px;
  padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .75; cursor: pointer; }
.announce__close:hover { opacity: 1; background: rgb(255 255 255 / 18%); }
.announce__close .icon { width: 15px; height: 15px; }
.announce--preview { border-radius: 10px; }
.announce--preview::after { animation-duration: 4s; }
@media (max-width: 640px) { .announce { font-size: .76rem; } .announce__inner { padding-inline: .75rem 2.4rem; gap: .45rem; } }
@media (prefers-reduced-motion: reduce) {
  .announce::after, .announce__dot { animation: none; }
  .announce__track.is-scrolling { mask-image: none; white-space: normal; }
  .announce__track.is-scrolling .announce__text { animation: none; padding: 0; }
}
/* Panel form */
.announce-admin__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .9rem; }
.draft-note { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: 12px; background: #fff4d6; color: #7a5300; font-size: .9rem; } .draft-note a { font-weight: 700; margin-inline-start: .5rem; }

/* Links inside article and product text: visible as links (green, underlined) */
.prose a { color: var(--c-accent-strong, #2e7f17); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .2s; }
.prose a:hover { color: var(--c-accent, #3a9a1f); text-decoration-thickness: 2px; }
[data-theme="dark"] .prose a { color: #8fe46a; }

/* Academy: reader comments under the article */
.article-comments__inner { max-width: 820px; }
.article-comments__form { margin-block-start: 1.25rem; padding: 1.25rem; border: 1px solid var(--c-border); border-radius: 18px; background: var(--c-surface, #fff); }
.article-comments__form .h4 { margin: 0 0 .5rem; }

/* Priced options (e.g. material) on the product page, «از» on cards */
.option-picker { border: 0; margin: 0 0 .9rem; padding: 0; }
.option-picker__options { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .5rem; }
.option-picker__option span { display: inline-block; padding: .45rem 1rem; border: 1.5px solid var(--c-border-strong); border-radius: 999px; font-size: .88rem; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.option-picker__option input:checked + span { border-color: var(--c-accent); background: var(--c-accent-soft, #e9f7e3); color: var(--c-accent-strong, #2e7f17); }
.option-picker__option input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.option-picker__option.is-unavailable span { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.product-card__from { font-size: .78em; font-weight: 500; color: var(--c-muted); margin-inline-end: .2rem; }

/* Protocol tags on product cards */
.badge--zigbee { background: #e5332a; color: #fff; border-color: #e5332a; direction: ltr; }
.badge--wifi { background: #1f6fe0; color: #fff; border-color: #1f6fe0; direction: ltr; }

/* Missing product photo: faded grey site logo */
.product-card__media > img.img-placeholder, .gallery__stage img.img-placeholder, .img-placeholder { width: 46%; max-width: 180px; height: auto; object-fit: contain; filter: grayscale(1); opacity: .24; mix-blend-mode: normal; }
.gallery__stage img.img-placeholder--lg { width: 42%; max-width: 280px; }
.product-card:hover .product-card__media > img.img-placeholder { transform: none; }

/* ── Product page: installation kit / complementary parts as a compact row of small cards ── */
.kit-strip { margin-block: .5rem 1.25rem; }
.kit-strip__title { font-size: 1.05rem; font-weight: 800; color: var(--c-ink); margin-block-end: .6rem; }
.kit-strip__rail { display: grid; grid-auto-flow: column; grid-auto-columns: 172px; gap: .75rem; overflow-x: auto; scroll-snap-type: x proximity;
  padding-block: .25rem .5rem; scrollbar-width: thin; overscroll-behavior-x: contain; cursor: grab; }
.kit-strip__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.kit-strip__rail > .product-card { scroll-snap-align: start; padding: .4rem; border-radius: 14px; }
.kit-strip .product-card__media { border-radius: 10px; }
.kit-strip .product-card__body { gap: .2rem; padding: .5rem .35rem .35rem; }
.kit-strip .product-card__title { font-size: .8rem; line-height: 1.6; }
.kit-strip .product-card__meta, .kit-strip .product-card__kicker, .kit-strip .product-card__brand, .kit-strip .product-card__rating, .kit-strip .product-card__colors, .kit-strip .product-card__badges { display: none; }
.kit-strip .product-card__price { font-size: .8rem; }
.kit-strip .product-card__cart { width: 32px; height: 32px; }
.pdp > .kit-strip { grid-column: 1 / -1; margin: 0; min-width: 0; }
/* Phones: small cards, three and a half per row */
@media (max-width: 720px) {
  .kit-strip__title { font-size: .9rem; margin-block-end: .45rem; }
  .kit-strip__rail { grid-auto-columns: calc((100% - 3 * .5rem) / 3.5); gap: .5rem; }
  .kit-strip__rail > .product-card { padding: .25rem; border-radius: 10px; }
  .kit-strip .product-card__media { border-radius: 7px; }
  .kit-strip .product-card__actions, .kit-strip .product-card__off { display: none; }
  .kit-strip .product-card__body { padding: .35rem .15rem .15rem; gap: .15rem; }
  .kit-strip .product-card__title { font-size: .66rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .kit-strip .product-card__buy { padding-block-start: .3rem; gap: .25rem; border: 0; }
  .kit-strip .product-card__was { font-size: .58rem; }
  .kit-strip .product-card__now, .kit-strip .product-card__contact { font-size: .68rem; line-height: 1.4; white-space: normal; }
  .kit-strip .product-card__approx { display: none; }
  .kit-strip .product-card__cart { width: 24px; height: 24px; border-radius: 7px; }
  .kit-strip .product-card__cart .icon { width: 13px; height: 13px; }
}
/* Gallery thumbnails: drag up/down (or sideways on phones) with the mouse (app.js). */
.gallery__thumbs[data-drag-scroll] { cursor: grab; }
.gallery__thumbs.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }

/* ── Brand page band: full width under the header, compact identity + one summary strip ── */
.brand-band { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c-bg-subtle) 92%, transparent) 75%); border-block-end: 1px solid var(--c-border); } /* fades in from the page backdrop (rings + grid) above */
.brand-band__inner { padding-block: .75rem 1rem; display: grid; gap: .75rem; }
.brand-band__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; }
.brand-band__head.no-logo { grid-template-columns: minmax(0, 1fr) auto; }
.brand-band__logo { width: 104px; height: 64px; display: grid; place-items: center; border-radius: 14px; background: #fff; border: 1px solid var(--c-border); }
.brand-band__logo img { max-width: 76%; max-height: 60%; width: auto; height: auto; object-fit: contain; }
.brand-band__main { min-width: 0; display: grid; gap: .3rem; }
.brand-band__title { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .6rem; }
.brand-band__title .h1 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); margin-inline-end: .25rem; }
.brand-band__desc { margin: 0; font-size: .9rem; line-height: 1.8; color: var(--c-muted); max-width: 72ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.brand-band .brand-hero__eco { font-size: .85rem; }
.brand-sum { display: flex; margin: 0; border-radius: 14px; background: var(--c-surface); border: 1px solid var(--c-border); }
.brand-sum__item { display: grid; gap: .1rem; align-content: center; padding: .5rem 1rem; }
.brand-sum__item + .brand-sum__item { border-inline-start: 1px solid var(--c-border); }
.brand-sum dt { font-size: .72rem; color: var(--c-muted); white-space: nowrap; }
.brand-sum dd { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--c-ink); white-space: nowrap; }
.brand-sum dd.brand-sum__price { font-size: .88rem; font-weight: 700; }
.brand-sum__tech { display: flex; gap: .3rem; }
.brand-sum__tech a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--c-accent-soft); color: var(--c-accent); transition: transform var(--t-fast) var(--ease); }
.brand-sum__tech a:hover { transform: translateY(-2px); }
.brand-sum__tech svg { width: 20px; height: 20px; }
.brand-band .brand-types { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block-start: .75rem; cursor: grab; }
.brand-band .brand-types::-webkit-scrollbar { display: none; }
.brand-band .brand-types.is-dragging { cursor: grabbing; user-select: none; }
.brand-band .brand-types__chip { flex: none; padding: .32rem .8rem; font-size: .82rem; }
@media (max-width: 900px) {
  .brand-band__head, .brand-band__head.no-logo { grid-template-columns: auto minmax(0, 1fr); }
  .brand-band__head.no-logo .brand-band__main { grid-column: 1 / -1; }
  .brand-sum { grid-column: 1 / -1; }
  .brand-sum__item { flex: 1; padding: .45rem .7rem; }
  .brand-band__logo { width: 76px; height: 52px; }
}
@media (max-width: 480px) { .brand-sum dd.brand-sum__price { white-space: normal; font-size: .8rem; } }

/* ── Catalog toolbar: one rounded bar (count · sort · columns · per page) and a compact active-filter row ── */
.catalog__toolbar { padding: .45rem .5rem .45rem .45rem; padding-inline-start: .9rem; margin-block-end: .75rem; border: 1px solid var(--c-border); border-radius: 16px; background: var(--c-bg-subtle); }
.catalog__count { font-size: .88rem; font-weight: 700; color: var(--c-ink); white-space: nowrap; }
.catalog__toolbar .tool-select { height: 36px; border-radius: 10px; }
.catalog__toolbar .tool-select .select { height: 32px; }
.catalog__toolbar .grid-switch { height: 36px; }
.active-filters { align-items: center; gap: .35rem; margin-block-end: 1rem; }
.active-filters__label { font-size: .78rem; color: var(--c-muted); margin-inline-end: .15rem; }
.active-filters a { height: 30px; padding-inline: .7rem .55rem; background: var(--c-accent-soft); color: var(--c-accent); font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--c-accent) 22%, transparent); }
.active-filters a:hover { background: color-mix(in srgb, var(--c-accent) 16%, var(--c-accent-soft)); }
.active-filters a.active-filters__clear { margin-inline-start: auto; background: transparent; border-color: transparent; color: var(--c-muted); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.active-filters a.active-filters__clear:hover { color: var(--c-danger, #c62828); background: transparent; }

/* ── Micro-interactions (app.js adds the classes; the global reduced-motion rule turns them off) ── */
/* Tactile press on small controls */
.icon-btn, .brand-types__chip, .seg__btn, .tool-select, .filter-chips a, .active-filters a, .chip, .badge--outline, .grid-switch button,
.product-card__cart, .qty button, .tabs__tab { transition-property: transform, background, color, border-color, box-shadow, opacity; transition-duration: .18s; transition-timing-function: var(--ease); }
.icon-btn:active, .brand-types__chip:active, .seg__btn:active, .tool-select:active, .filter-chips a:active, .active-filters a:active,
.chip:active, .badge--outline:active, .grid-switch button:active, .qty button:active, .tabs__tab:active { transform: scale(.94); }
.product-card__cart:active { transform: scale(.9); }

/* Add to cart: the photo flies to the header cart, which wiggles; the button flashes green */
.fly-ghost { position: fixed; z-index: 9999; pointer-events: none; object-fit: contain; border-radius: 14px; background: #fff;
  box-shadow: 0 12px 30px -10px rgb(0 0 0 / 35%); will-change: transform, opacity; }
.is-wiggle { animation: cart-wiggle .6s var(--ease); }
@keyframes cart-wiggle { 0%, 100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-12deg) scale(1.12); } 40% { transform: rotate(10deg) scale(1.12); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } }
.product-card__cart.is-done, .btn.is-done { background: var(--c-success, #2e7d32) !important; color: #fff !important; animation: done-pop .45s var(--ease); }
@keyframes done-pop { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* Added to wishlist: the heart pops and a green ring spreads out */
.is-pop { animation: heart-pop .5s var(--ease), ring-out .6s ease-out; }
@keyframes heart-pop { 0% { transform: scale(1); } 30% { transform: scale(1.3); } 55% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes ring-out { from { box-shadow: 0 0 0 0 rgb(120 216 80 / 65%); } to { box-shadow: 0 0 0 12px rgb(120 216 80 / 0%); } }

/* Quantity changed: the number pulses */
.is-tick { animation: tick .35s var(--ease); }
@keyframes tick { 0% { transform: scale(1); } 45% { transform: scale(1.18); color: var(--c-accent); } 100% { transform: scale(1); } }

/* Card colour swap (app.js): the new photo fades in on a layer above the old one; a click adds a wash of the colour. */
.product-card__media > img.card-swap-layer { position: absolute; inset: 0; margin: auto; pointer-events: none; }
.card-color-wash { position: absolute; z-index: 1; inset-inline: -25%; inset-block-end: -60%; aspect-ratio: 1; border-radius: 50%;
  pointer-events: none; transform-origin: 50% 100%; mix-blend-mode: multiply; }

/* ── Header micro-interactions (app.js: nav glide pill, typed search placeholder) ── */
.site-header .main-nav__list { position: relative; isolation: isolate; }
.main-nav__glide { position: absolute; z-index: -1; left: 0; top: 50%; height: var(--hctl, 40px); margin-top: calc(var(--hctl, 40px) / -2); border-radius: var(--r-pill);
  background: var(--c-accent-soft); opacity: 0; pointer-events: none;
  transition: transform .38s cubic-bezier(.3, 1.3, .5, 1), width .38s cubic-bezier(.3, 1.3, .5, 1), opacity .2s var(--ease); }
.main-nav__list.is-gliding .main-nav__glide { opacity: 1; }
.main-nav__list.is-gliding .main-nav__link:hover, .main-nav__list.is-gliding .main-nav__link:focus-visible { background: transparent; color: var(--c-accent); }
/* Active page: a short green bar instead of the dot, growing in */
.site-header .main-nav__link.is-active::after { width: 16px; height: 3px; margin-inline-start: -8px; border-radius: 3px; inset-block-end: 3px; animation: nav-bar-in .45s var(--ease) both; }
@keyframes nav-bar-in { from { width: 0; margin-inline-start: 0; } }
/* «فناوری‌ها» menu: slides in, links stagger */
.nav-menu[open] .nav-menu__list { animation: nav-menu-in .22s var(--ease) both; transform-origin: top; }
.nav-menu[open] .nav-menu__list li { animation: nav-menu-item .3s var(--ease) both; }
.nav-menu[open] .nav-menu__list li:nth-child(2) { animation-delay: 30ms; } .nav-menu[open] .nav-menu__list li:nth-child(3) { animation-delay: 60ms; }
.nav-menu[open] .nav-menu__list li:nth-child(4) { animation-delay: 90ms; } .nav-menu[open] .nav-menu__list li:nth-child(5) { animation-delay: 120ms; }
.nav-menu[open] .nav-menu__list li:nth-child(n + 6) { animation-delay: 150ms; }
.nav-menu__link { transition: background var(--t-fast) var(--ease), padding var(--t-fast) var(--ease); }
.nav-menu__link:hover { padding-inline-start: 1rem; }
@keyframes nav-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes nav-menu-item { from { opacity: 0; transform: translateY(-4px); } }
/* Tool icons: accent hover, and each icon moves its own way */
.site-header .header-tools .icon-btn .icon, .site-header .theme-toggle .icon { transition: rotate .35s var(--ease), translate .35s var(--ease), scale .35s var(--ease); }
@media (hover: hover) {
  .site-header .header-tools .icon-btn:not(.header-cart):hover { background: var(--c-accent-soft); color: var(--c-accent); }
  .site-header .header-search-btn:hover .icon { rotate: -12deg; scale: 1.08; }
  .site-header .theme-toggle:hover .icon { rotate: -28deg; }
  .site-header .header-tools > a.icon-btn:not(.header-cart):not([data-tour]):hover .icon { translate: 0 -2px; }
  .site-header .header-tools a[data-tour="wishlist"]:hover .icon { animation: hdr-beat .7s var(--ease); }
  .site-header .header-cart:hover .icon { animation: hdr-swing .6s var(--ease); }
  .site-header .header-phone:hover .icon { animation: hdr-ring .6s var(--ease); }
}
@keyframes hdr-beat { 30% { scale: 1.22; } 50% { scale: .95; } 70% { scale: 1.1; } }
@keyframes hdr-swing { 25% { rotate: 12deg; } 50% { rotate: -9deg; } 75% { rotate: 5deg; } }
@keyframes hdr-ring { 20%, 60% { rotate: -14deg; } 40%, 80% { rotate: 10deg; } }
/* Search: the icon wakes up with the field */
.header-search .icon { transition: color var(--t-fast) var(--ease), scale .3s var(--ease); }
.header-search:focus-within .icon { color: var(--c-accent); scale: 1.1; }
/* Reading progress: a thin green line along the header's bottom edge */
@supports (animation-timeline: scroll()) {
  .site-header::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, #9be27a, var(--c-accent)); transform-origin: 100% 50%; scale: 0 1;
    animation: hdr-progress linear both; animation-timeline: scroll(root); }
  [dir="ltr"] .site-header::after { transform-origin: 0 50%; }
  @keyframes hdr-progress { to { scale: 1 1; } }
}
@media (prefers-reduced-motion: reduce) { .main-nav__glide { transition: none; } .site-header::after { display: none; } }

/* ── Inner pages: the hero posters' backdrop on the far side of the page head — rings, glow and a grid that fades toward the text ── */
body:not(.page-home):has(.site-header)::before {
  content: ""; position: absolute; z-index: -1; inset-inline: 0; top: 0; height: 560px; pointer-events: none;
  --grid: rgb(17 19 21 / 8%);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Ccircle cx='200' cy='200' r='190' fill='none' stroke='%235abe32' stroke-opacity='.25' stroke-width='1'/%3E%3Ccircle cx='200' cy='200' r='150' fill='none' stroke='%235abe32' stroke-opacity='.6' stroke-width='2' stroke-dasharray='7 9'/%3E%3Ccircle cx='200' cy='200' r='96' fill='none' stroke='%235abe32' stroke-opacity='.45' stroke-width='1.5'/%3E%3Ccircle cx='306' cy='94' r='7' fill='%2378d850'/%3E%3Ccircle cx='306' cy='94' r='13' fill='%2378d850' fill-opacity='.2'/%3E%3Ccircle cx='132' cy='271' r='5' fill='%2378d850'/%3E%3C/svg%3E") left max(1rem, calc(50% - 760px)) top 70px / 380px 380px no-repeat,
    radial-gradient(260px 220px at max(200px, calc(50% - 570px)) 250px, rgb(120 216 80 / 22%), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 900px 520px at 10% 35%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 900px 520px at 10% 35%, #000 25%, transparent 75%);
}
[dir="ltr"] body:not(.page-home):has(.site-header)::before { transform: scaleX(-1); }
[data-theme="dark"] body:not(.page-home):has(.site-header)::before { --grid: rgb(255 255 255 / 6%); }
@media (max-width: 720px) {
  body:not(.page-home):has(.site-header)::before { height: 360px; background-size: 220px 220px, auto, 44px 44px, 44px 44px; background-position: left -60px top 90px, 0 0, 0 0, 0 0;
    -webkit-mask-image: radial-gradient(ellipse 420px 320px at 0% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 420px 320px at 0% 40%, #000 20%, transparent 75%); }
}
/* Product pages: the title sits on the far side, so only the quiet grid stays (no rings or glow behind the text) */
body:has(.pdp)::before {
  background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 44px 44px !important;
  -webkit-mask-image: linear-gradient(#000 20%, transparent 70%); mask-image: linear-gradient(#000 20%, transparent 70%);
}

/* ── Filter panel polish: one card for the quick switches, thin overlay scrollbar, calmer price block ── */
.filters { padding-inline-end: 1rem; scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-gutter: stable; }
.filters:hover { scrollbar-color: color-mix(in srgb, var(--c-accent) 45%, transparent) transparent; }
.filters::-webkit-scrollbar { width: 6px; }
.filters::-webkit-scrollbar-track { background: transparent; margin-block: 14px; }
.filters::-webkit-scrollbar-thumb { border-radius: 6px; background: transparent; }
.filters:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--c-accent) 45%, transparent); }
.filter-quick { margin-block: 1rem .4rem; border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--c-accent) 22%, transparent); background: var(--c-accent-soft); overflow: hidden; }
.filter-quick .filter-switch { justify-content: space-between; margin: 0; padding: .65rem .75rem; border: 0; border-radius: 0; background: transparent; transition: background var(--t-fast) var(--ease); }
.filter-quick .filter-switch + .filter-switch { border-block-start: 1px solid color-mix(in srgb, var(--c-accent) 18%, transparent); }
.filter-quick .filter-switch:hover { background: color-mix(in srgb, var(--c-accent) 8%, transparent); }
.filter-quick .filter-switch__text { gap: .5rem; min-width: 0; white-space: nowrap; font-size: .86rem; color: var(--c-ink); }
.filter-switch__icon { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--c-surface); color: var(--c-accent); }
.filter-switch__icon .icon { width: 15px; height: 15px; }
.filter-quick .filter-switch:has(input:checked) .filter-switch__icon { background: var(--c-accent); color: #fff; }
.filter-quick .filter-switch:has(input:checked) .filter-switch__text { color: var(--c-accent); }
/* The switch now sits at the end: the knob moves toward it */
[dir="rtl"] .filter-quick .filter-switch input:checked ~ .filter-switch__track::after { transform: translateX(-16px); }
[dir="ltr"] .filter-quick .filter-switch input:checked ~ .filter-switch__track::after { transform: translateX(16px); }
.filter-quick .filter-switch input:checked ~ .filter-switch__track { background: var(--c-accent); }
.filter-quick .filter-switch input:focus-visible ~ .filter-switch__track { outline: 2px solid var(--c-focus); outline-offset: 2px; }
/* Price block */
.price-filter__values { font-size: .95rem; }
.price-range { margin-block-start: .9rem; }
.price-range .input { min-height: 40px; border-radius: 12px; background: var(--c-bg-subtle); border-color: transparent; text-align: center; }
.price-range .input:focus { background: var(--c-surface); border-color: var(--c-accent); }
.filters .filters__actions .btn { width: 100%; border-radius: var(--r-pill); }

/* Product card actions (wishlist, compare, edit): shown on hover on pointer devices; always on touch screens,
   and kept visible while one is active or focused */
@media (hover: hover) and (pointer: fine) {
  .product-card__actions { opacity: 0; translate: 0 -4px; transition: opacity var(--t-fast) var(--ease), translate var(--t-fast) var(--ease); }
  .product-card:hover .product-card__actions, .product-card:focus-within .product-card__actions, .product-card__actions:has(.is-active) { opacity: 1; translate: 0 0; }
}
/* Phones: smaller logos and gaps so at least five fit across, narrower blurred edges */
@media (max-width: 560px) {
  .logo-strip__track { padding-block: 1rem; }
  .logo-strip__item { padding-inline: .55rem; }
  .logo-strip__item img { height: auto !important; max-height: 22px; max-width: 54px; }
  .logo-strip__blur { width: 9%; }
}

/* ── Footer on phones: compact — newsletter, then links | contact side by side, centred social, tech chips and bottom bar ── */
@media (max-width: 640px) {
  .site-footer { padding-block: 1.75rem calc(1rem + 64px); font-size: .86rem; } /* room for the bottom nav */
  .footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; }
  .footer-stay, .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-stay__title { font-size: 1.35rem; margin-block-end: .3rem; }
  .footer-stay__title br { display: none; }
  .footer-stay__text { font-size: .8rem; margin-block-end: .7rem; }
  .site-footer h3 { font-size: .92rem; margin-block-end: .55rem; }
  .site-footer ul li + li { margin-block-start: .1rem; }
  .site-footer ul:not(.footer-social):not(.footer-tech) li { padding-block: .2rem; }
  .footer-contact { font-size: .78rem; line-height: 1.8; }
  .footer-grid > div:last-child { text-align: center; padding-block-start: 1rem; border-block-start: 1px solid rgb(255 255 255 / 8%); }
  .footer-social { justify-content: center; }
  .footer-subhead { margin-block-start: 1.1rem !important; }
  .footer-tech { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
  .footer-tech a { padding-block: .45rem; font-size: .78rem; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: .8rem; margin-block-start: 1.4rem; padding-block-start: 1.2rem; }
  .footer-copy { flex-direction: column; align-items: center; gap: .6rem; font-size: .76rem; }
  .footer-legal { justify-content: center; gap: .9rem; font-size: .78rem; }
}
@media (max-width: 640px) {
  .footer-stay__title { max-width: none; }
  .footer-contact li { padding-block: .1rem !important; }
  .footer-trust { padding: .35rem .6rem .35rem .4rem; gap: .5rem; }
  .footer-trust__seal { width: 44px; height: 44px; }
  .footer-bottom { flex-direction: column; }
  .footer-theme { order: 3; }
}
/* Phones: both footer columns on the same rhythm — equal row height, same font size, top-aligned */
@media (max-width: 640px) {
  .footer-grid > div:not(.footer-stay):not(:last-child) ul { display: grid; gap: .35rem; margin: 0; }
  .footer-grid > div:not(.footer-stay):not(:last-child) li { margin: 0 !important; padding: 0 !important; font-size: .82rem; line-height: 1.75; }
  .footer-contact a, .footer-contact li { font-size: .82rem; }
  .site-footer .footer-link { font-size: .82rem; }
}
/* Phones: footer v2 — tighter rhythm; social + tech as small centred rows; bottom bar in two short rows */
@media (max-width: 640px) {
  .site-footer { padding-block: 1.25rem calc(.75rem + 64px); }
  .footer-grid { gap: 1rem .9rem; }
  .footer-stay__title { font-size: 1.15rem; margin-block-end: .55rem; }
  .footer-news input { height: 42px; }
  .site-footer h3 { font-size: .86rem; margin-block-end: .4rem; }
  .footer-grid > div:not(.footer-stay):not(:last-child) ul { gap: .15rem; }
  .footer-grid > div:not(.footer-stay):not(:last-child) li { font-size: .78rem; line-height: 1.7; }
  .footer-contact a, .footer-contact li, .site-footer .footer-link { font-size: .78rem; }
  .footer-grid > div:last-child { padding-block-start: .8rem; }
  .footer-grid > div:last-child > h3:first-child { display: none; } /* "follow us": the icons say it */
  .footer-social { gap: .45rem; margin-block-end: .7rem; }
  .footer-social a { width: 36px; height: 36px; }
  .footer-social .icon { width: 16px; height: 16px; }
  .footer-grid .footer-subhead { display: none; }
  .footer-tech { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
  .footer-tech a { padding: .22rem .65rem; border-radius: 999px; font-size: .72rem; }
  .footer-bottom { gap: .55rem; margin-block-start: .9rem; padding-block-start: .8rem; }
  .footer-copy { flex-direction: row; justify-content: center; gap: .6rem; font-size: .7rem; }
  .footer-trust { padding: .2rem .45rem .2rem .2rem; gap: .35rem; border-radius: 10px; }
  .footer-trust__seal { width: 32px; height: 32px; border-radius: 7px; }
  .footer-trust__label { font-size: .68rem; }
  .footer-legal { gap: .75rem; font-size: .72rem; }
  .footer-theme { font-size: .72rem; gap: .4rem; }
  .footer-theme .theme-toggle, .footer-theme button { width: 32px; height: 32px; }
}
@media (max-width: 640px) {
  .footer-bottom { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 1rem; }
  .footer-copy { flex-basis: 100%; flex-wrap: wrap; }
  .footer-legal a, .footer-legal button { font-size: .72rem; }
  .footer-theme > span { display: none; }
}
@media (max-width: 640px) { .footer-legal .link-btn { font-size: .72rem; font-weight: inherit; padding: 0; } .footer-theme button, .footer-theme .theme-toggle { width: 30px !important; height: 30px !important; } }
@media (max-width: 640px) { .footer-stay { text-align: center; } .footer-stay__title { margin-inline: auto; } }
@media (max-width: 640px) { .footer-news { margin-inline: auto; width: 100%; max-width: 340px; } }
/* Phones: category bar as small chips with their icon */
@media (max-width: 720px) {
  .cat-bar__list { gap: .35rem; padding: .3rem .35rem; border-radius: 14px; }
  .cat-bar__link { height: 34px; gap: .3rem; padding-inline: .65rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
    background: var(--c-bg-subtle); color: var(--c-ink); white-space: nowrap; }
  .cat-bar__icon { display: inline-grid; width: 16px; height: 16px; }
  .cat-bar__icon .cat-icon { width: 16px; height: 16px; opacity: 1; stroke: var(--c-accent); color: var(--c-accent); }
  .cat-bar__icon .cat-icon .ci-dot { fill: var(--c-accent); }
  .cat-bar__link:active { background: var(--c-accent-soft); }
}

/* ── Compare page: toolbar card, framed table, product heads; phones: two products side by side ── */
.compare-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-block-end: 1.25rem; padding: .6rem .75rem; border: 1px solid var(--c-border); border-radius: 16px; background: var(--c-surface); }
.compare-tools__count { font-size: .88rem; font-weight: 800; }
.compare-tools__diff { margin: 0; margin-inline-start: auto; padding: .45rem .7rem; font-size: .84rem; font-weight: 700; color: var(--c-accent); }
.compare-tools form .btn { color: var(--c-muted); }
.compare-wrap { border: 1px solid var(--c-border); border-radius: 18px; background: var(--c-surface); margin-inline: 0; padding-inline: 0; }
.compare-table { min-width: calc(160px + var(--cols, 2) * 220px); }
.compare-table thead td { padding: 1rem .9rem 1.1rem; border-block-end: 1px solid var(--c-border); }
.compare-table thead td:first-child { position: sticky; inset-inline-start: 0; z-index: 2; background: var(--c-surface); }
.compare-table tbody th, .compare-table tbody td { padding: .75rem .9rem; font-size: .88rem; }
.compare-table tbody th { background: var(--c-surface); width: 160px; min-width: 120px; font-size: .82rem; }
.compare-table tbody tr:nth-child(even) th, .compare-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--c-bg-subtle) 60%, var(--c-surface)); }
.compare-table tr.is-diff th { color: var(--c-accent); font-weight: 700; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-block-end: 0; }
.compare-product { position: relative; gap: .45rem; }
.compare-product__img { border-radius: 14px; }
.compare-product__name { font-weight: 800; font-size: .92rem; line-height: 1.6; color: var(--c-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.compare-product__actions { display: flex; align-items: center; gap: .4rem; }
.compare-product__actions > :first-child { flex: 1; }
.compare-product__actions form:has(.compare-product__remove) { position: absolute; inset-block-start: .4rem; inset-inline-end: .4rem; }
.compare-product__remove { width: 30px; height: 30px; border-radius: 50%; background: var(--c-surface); box-shadow: var(--shadow-sm); }
.compare-product__remove .icon { width: 15px; height: 15px; }
@media (max-width: 640px) {
  .compare-tools { padding: .5rem .6rem; gap: .5rem; }
  .compare-tools__count { font-size: .78rem; }
  .compare-tools__diff { order: 3; flex-basis: 100%; justify-content: center; margin-inline-start: 0; }
  .compare-wrap { border-radius: 14px; scroll-snap-type: x mandatory; }
  .compare-table { min-width: calc(84px + var(--cols, 2) * (100vw - 32px - 84px) / 2); table-layout: fixed; }
  .compare-table tbody th, .compare-table thead td:first-child { width: 84px; min-width: 84px; max-width: 84px; }
  .compare-table tbody th { font-size: .7rem; padding: .55rem .45rem; line-height: 1.6; }
  .compare-table tbody td { min-width: 0; font-size: .74rem; padding: .55rem .5rem; overflow-wrap: anywhere; }
  .compare-table thead td { padding: .6rem .45rem .7rem; }
  .compare-product__name { font-size: .74rem; }
  .compare-product .price, .compare-product .price__main { font-size: .82rem; }
  .compare-product .price__was { font-size: .62rem; }
  .compare-product__actions .btn { width: 100%; padding-inline: .4rem; font-size: .68rem; min-height: 32px; }
  .compare-product__actions .btn .icon { width: 14px; height: 14px; }
  .compare-product__remove { width: 26px; height: 26px; }
}
.compare-product__img { aspect-ratio: 4 / 3; max-height: 220px; }
.compare-product .price { flex-wrap: wrap; row-gap: .15rem; }
.compare-product .price__main { font-size: 1.15rem; }
.compare-product .price__was { flex-wrap: wrap; }
@media (max-width: 640px) {
  .compare-product__img { aspect-ratio: 1 / .8; }
  .compare-product .price__main { font-size: .8rem; white-space: normal; }
  .compare-product .price__was { font-size: .6rem; gap: .25rem; }
  .compare-product .price__was .badge, .compare-product [class*="off"] { font-size: .55rem; padding: .05rem .3rem; }
}

/* ── Search modal: green focus ring on the box, quick chips before typing ── */
.search-box { border: 1.5px solid transparent; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.search-box:focus-within { border-color: color-mix(in srgb, var(--c-accent) 55%, transparent); background: var(--c-surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 14%, transparent); }
.search-box > .icon { color: var(--c-accent); }
.search-box input { caret-color: var(--c-accent); }
.search-box input::placeholder { color: var(--c-faint, #9aa09c); }
.search-start { display: grid; gap: .55rem; padding-block: .25rem .5rem; }
.search-start__label { display: flex; align-items: center; gap: .35rem; margin: .35rem 0 0; font-size: .78rem; font-weight: 800; color: var(--c-muted); }
.search-start__label .icon { width: 15px; height: 15px; color: var(--c-accent); }
.search-start__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.search-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-surface);
  font-size: .82rem; font-weight: 700; color: var(--c-ink); text-decoration: none; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.search-chip:hover { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent); }
.search-chip--cat { background: var(--c-bg-subtle); border-color: transparent; }
.search-chip__icon { display: inline-grid; width: 16px; height: 16px; }
.search-chip__icon .cat-icon { width: 16px; height: 16px; fill: none; stroke: var(--c-accent); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.search-chip__icon .ci-dot { fill: var(--c-accent); stroke: none; }
@media (max-width: 640px) {
  .search-box { height: 54px; padding-inline: 1rem; }
  .search-box input { font-size: .9rem; }
  .search-chip { padding: .35rem .7rem; font-size: .76rem; }
}
.search-modal { padding-block-start: 1.25rem; }
/* Search modal: tighter */
.search-modal { padding-block: 1rem .9rem; }
.search-results { margin-block-start: .6rem; }
.search-start { gap: .35rem; padding-block: 0; }
.search-start__label { margin: .2rem 0 0; }
.search-start__chips { gap: .3rem; }
@media (max-width: 640px) {
  .search-modal { padding-block: .7rem .7rem; }
  .search-box { height: 48px; }
  .search-chip { padding: .28rem .6rem; }
}
/* Desktop footer: tighter vertical spacing */
@media (min-width: 641px) {
  .site-footer { padding-block: 2rem 1rem; }
  .footer-grid { row-gap: 1.25rem; }
  .footer-grid li + li { margin-block-start: .45rem; }
  .footer-social { margin-block-end: 1rem; }
  .footer-grid .footer-subhead { margin-block-end: .55rem; }
  .footer-tech a { padding-block: .3rem; }
  .footer-bottom { margin-block-start: 1.25rem; padding-block-start: 1rem; }
}
@media (min-width: 641px) { .footer-contact { gap: .3rem; } .footer-contact li + li { margin-block-start: 0; } .footer-tech { gap: .35rem; } .footer-bottom { margin-block-start: 1rem; } }
/* Footer technologies: even chips with the technology mark, label centred */
.footer-tech { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: 0; padding: 0; list-style: none; }
.footer-tech li { margin: 0 !important; }
.footer-tech a { display: flex; align-items: center; justify-content: center; gap: .4rem; height: 36px; padding: 0 .5rem; border-radius: 10px; line-height: 1;
  border: 1px solid rgb(255 255 255 / 10%); background: rgb(255 255 255 / 3%); font-size: .78rem; font-weight: 600; color: #d6d5d0; white-space: nowrap; }
.footer-tech .ltr { display: inline; }
.footer-tech__icon { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--c-brand, #78d850); }
.footer-tech__icon svg { width: 18px; height: 18px; }
.footer-tech a:hover { background: rgb(120 216 80 / 10%); }
@media (max-width: 640px) {
  .footer-tech { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
  .footer-tech a { height: 30px; padding: 0 .6rem; border-radius: 999px; font-size: .72rem; gap: .3rem; }
  .footer-tech__icon, .footer-tech__icon svg { width: 15px; height: 15px; }
}

/* Admin invoice form: "toman price" block (re-price now / follow the rate) */
.inv-reprice { padding: .8rem .9rem; border: 1px dashed var(--c-border-strong); border-radius: var(--r); }
.inv-reprice__body { display: grid; gap: .35rem; }
.inv-reprice__body[hidden] { display: none; }
.inv-reprice .btn { justify-self: start; margin-block-start: .25rem; }
.inv-rates { margin-block: .35rem .1rem; }
.inv-rates .field { gap: .2rem; }

/* Staff on the shop: "add to pro-forma" buttons and the basket bar */
.ib-add { position: relative; }
.ib-add.is-added { color: var(--c-accent-strong, #2e7f17); }
.ib-add.is-added[data-count]::after { content: attr(data-count); position: absolute; inset-block-start: -6px; inset-inline-end: -6px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--c-accent, #3a9a1f); color: #fff; font-size: .66rem; font-weight: 800; line-height: 17px; text-align: center; }
.btn.ib-add.is-added[data-count]::after { inset-block-start: -4px; }
.ib-bar { position: fixed; inset-block-end: 1rem; inset-inline-start: 50%; transform: translateX(50%); z-index: 60; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  max-width: calc(100vw - 2rem); padding: .55rem .7rem .55rem 1rem; border-radius: 16px; background: var(--c-ink, #18181b); color: #fff; box-shadow: 0 18px 40px -18px rgb(0 0 0 / 60%); }
.ib-bar[hidden] { display: none; }
.ib-bar__count { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; padding: .3rem .4rem; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; cursor: pointer; }
.ib-bar__count:hover { background: rgb(255 255 255 / 10%); }
.ib-bar__chev { width: 14px !important; height: 14px !important; color: rgb(255 255 255 / 60%) !important; transform: rotate(180deg); transition: transform var(--t-fast); }
[aria-expanded="true"] > .ib-bar__chev { transform: none; }
.ib-bar__count .icon { width: 18px; height: 18px; color: var(--c-accent, #3a9a1f); }
.ib-bar__form { display: flex; gap: .4rem; align-items: center; }
.ib-bar .select { min-width: 190px; height: 36px; padding-block: 0; font-size: .82rem; color: var(--c-ink, #18181b); background-color: #fff; }
.ib-bar .btn--ghost { color: rgb(255 255 255 / 75%); }
@media (min-width: 721px) { .ib-bar { flex-wrap: nowrap; white-space: nowrap; } }
@media (max-width: 720px) { .ib-bar { inset-block-end: calc(var(--bottom-nav-h, 64px) + .6rem); } .ib-bar .select { min-width: 0; flex: 1; } .ib-bar__form { flex: 1; } }

/* Live list above the bar */
.ib-panel { position: absolute; inset-block-end: calc(100% + .5rem); inset-inline: 0; max-height: min(60vh, 460px); display: flex; flex-direction: column;
  border-radius: 16px; background: var(--c-surface, #fff); color: var(--c-ink, #18181b); box-shadow: 0 24px 50px -20px rgb(0 0 0 / 45%); overflow: hidden; }
.ib-panel[hidden] { display: none; }
.ib-panel__head { display: flex; justify-content: space-between; align-items: center; padding: .6rem .9rem; border-block-end: 1px solid var(--c-border); font-size: .88rem; }
.ib-panel__body { overflow-y: auto; padding: .3rem .6rem; }
.ib-panel__foot { display: flex; justify-content: space-between; padding: .6rem .9rem; border-block-start: 1px solid var(--c-border); background: var(--c-bg-subtle); font-size: .88rem; }
.ib-panel__sub { margin: .5rem .3rem .2rem; font-size: .72rem; font-weight: 700; color: var(--c-muted); }
.ib-panel__empty { margin: 0; padding: 1.2rem .5rem; text-align: center; color: var(--c-muted); font-size: .84rem; }
.ib-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto 24px; align-items: center; gap: .5rem; padding: .45rem .3rem; border-block-end: 1px solid var(--c-border); font-size: .8rem; }
.ib-row:last-child { border-block-end: 0; }
.ib-row.is-current { grid-template-columns: minmax(0, 1fr) auto auto; color: var(--c-muted); padding-inline: .5rem; }
.ib-row.is-busy { opacity: .5; pointer-events: none; }
.ib-row__img { width: 40px; height: 40px; border-radius: 8px; background: var(--c-bg-subtle); overflow: hidden; display: grid; place-items: center; }
.ib-row__img img { width: 90%; height: 90%; object-fit: contain; }
.ib-row__name { display: grid; min-width: 0; }
.ib-row__name a { color: inherit; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-row__name small { color: var(--c-muted); font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: end; }
.ib-row__step { display: inline-flex; align-items: center; border: 1px solid var(--c-border); border-radius: 8px; }
.ib-row__step button { width: 24px; height: 24px; border: 0; background: none; cursor: pointer; font-weight: 800; color: var(--c-accent-strong, #2e7f17); }
.ib-row__step b { min-width: 1.4rem; text-align: center; }
.ib-row__total { font-weight: 700; white-space: nowrap; }
.ib-row__del { width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--c-error); cursor: pointer; font-size: 1rem; }
.ib-row__del:hover { background: var(--c-bg-subtle); }

.ib-bar__off { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: rgb(255 255 255 / 85%); cursor: pointer; white-space: nowrap; }
.ib-bar__off input { accent-color: var(--c-accent, #3a9a1f); }

/* Invoice line: link icon after the product name (kept in the PDF, where the name is a clickable link) */
.inv-link { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-inline-start: .3rem; border-radius: 50%; background: var(--inv-green); color: #fff; vertical-align: -3px; }
.inv-link svg { width: 9.5px; height: 9.5px; }
@media print {
  .inv-link { width: 11px; height: 11px; margin-inline-start: 3px; vertical-align: -1.5px; }
  .inv-link svg { width: 6.5px; height: 6.5px; }
}