/* =================================================================
   DARMAN HUB — Industrial B2B Marketplace Landing Page
   Pure CSS · Mobile-first · Bilingual EN + Kurdish Sorani (RTL)

   Theme: Warm Persian red + soft cream — premium B2B aesthetic
   ================================================================= */

/* ----- Fonts ----- */
@font-face {
  font-family: 'NRT';
  src: url('fonts/NRT-Reg.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NRT';
  src: url('fonts/NRT-Bd.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Mikhak (Persian) ----
   Mikhak covers the full Persian set including the Persian digits
   ۰-۹, which NRT does not ship. It does NOT cover the Kurdish
   letters ڕ ڵ ۆ ێ ڤ — those stay on NRT (see the [lang] rules below).
   The variable file is preferred so 400 / 600 / 700 / 800 render at
   their true weights; the statics cover browsers without variable
   font support. */
@font-face {
  font-family: 'Mikhak';
  src: url('fonts/farsi/Mikhak-VF.ttf') format('truetype-variations'),
       url('fonts/farsi/Mikhak-VF.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mikhak Fallback';
  src: url('fonts/farsi/Mikhak-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mikhak Fallback';
  src: url('fonts/farsi/Mikhak-Medium.ttf') format('truetype');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mikhak Fallback';
  src: url('fonts/farsi/Mikhak-Bold.ttf') format('truetype');
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mikhak Fallback';
  src: url('fonts/farsi/Mikhak-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ----- Design tokens ----- */
:root {
  /* ---- Brand palette (user-defined) ---- */
  --primary-color:  #9E2A2B;      /* قرمز اصلی لوگو */
  --primary-hover:  #6B1D1E;      /* قرمز تیره‌تر برای Hover */
  --bg-main:        #F6EFE0;      /* پس‌زمینه کرم/بژ */
  --card-bg:        #FFFAF0;      /* پس‌زمینه کارت‌ها */
  --text-color:     #2B1E1A;      /* رنگ متن تیره‌تر برای خوانایی */
  --border-color:   #E2D5C3;      /* خطوط و مرزها */
  --whatsapp-green: #25D366;      /* رنگ استاندارد واتساپ */

  /* ---- Derived shades (built from the brand palette) ---- */
  --primary-deep:    #4A1517;     /* Deepest red — hero gradient end */
  --primary-mid:     #C44546;     /* Mid red — gradient stop */
  --primary-soft:    rgba(158, 42, 43, 0.10);
  --primary-glow:    rgba(158, 42, 43, 0.28);
  --primary-tint:    rgba(158, 42, 43, 0.04);
  --bg-warm:         #EFE3CC;     /* Slightly darker cream for contrast bands */
  --bg-footer:       #2B1E1A;     /* Dark brown — same as text, used as bg */
  --text-soft:       #7A6A60;     /* Muted brown text */
  --text-on-primary: #FFFAF0;     /* Cream text on red backgrounds */
  --on-primary-soft: rgba(255, 250, 240, 0.78);
  --on-primary-line: rgba(255, 250, 240, 0.14);
  --on-primary-line-strong: rgba(255, 250, 240, 0.28);

  /* ---- Semantic accents ---- */
  --c-green-500: #10B981;          /* Own-factory / success */
  --c-green-600: #059669;

  /* ---- Type ---- */
  --font-en: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-ku: 'NRT', 'Inter', sans-serif;
  --font-nrt: 'NRT', 'Vazirmatn', 'IRANSans', 'Tahoma', 'Inter', sans-serif;
  --font-fa:  'Mikhak', 'Mikhak Fallback', 'Vazirmatn', 'IRANSans', 'Tahoma', 'Inter', sans-serif;
  /* Set on <html>; every script-aware rule reads this one variable,
     so switching language switches the whole page's typeface. */
  --font-script: var(--font-fa);

  /* ---- Layout ---- */
  --container-w: 1240px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  /* ---- Effects ---- */
  --shadow-sm: 0 1px 2px rgba(43, 30, 26, 0.06), 0 1px 3px rgba(43, 30, 26, 0.05);
  --shadow-md: 0 6px 14px rgba(43, 30, 26, 0.08), 0 2px 4px rgba(43, 30, 26, 0.05);
  --shadow-lg: 0 18px 40px rgba(43, 30, 26, 0.12), 0 4px 12px rgba(43, 30, 26, 0.06);
  --shadow-primary: 0 12px 30px rgba(158, 42, 43, 0.28);

  /* ---- Motion ---- */
  --t-fast: 150ms ease;
  --t-base: 240ms ease;
  --t-slow: 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----- Reset / base ----- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* The header is sticky, so any in-page anchor jump would otherwise land
     with the target's first row tucked under it — measured 43px of the
     first product card hidden. Reserve the header band on every anchor
     jump: the hero's «مشاهده محصولات», the nav links and the footer. */
  scroll-padding-top: calc(var(--header-h) + 16px);
}
/* Desktop header height. Matches .header-inner (72px) + its 1px border, so
   the sticky offset and scroll-padding land on the real edge. The narrow
   media queries below lower it to 64px. */
:root { --header-h: 73px; }
body {
  margin: 0;
  font-family: var(--font-script);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-color);
  background: var(--bg-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Persian → Mikhak, Kurdish → NRT.
   Mikhak carries the Persian digits ۰-۹ but not the Kurdish letters
   ڕ ڵ ۆ ێ ڤ, so the two scripts cannot share one typeface. */
html[lang="fa"] { --font-script: var(--font-fa); }
html[lang="ku"] { --font-script: var(--font-nrt); }

img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4 {
  margin: 0;
  /* Measured from the fonts' own hhea tables (upm 2048):
     Mikhak needs 1.660em, NRT needs 1.462em of leading before the
     ascenders of ک گ ل and the descenders of ج ح خ ع clip into the
     neighbouring line. 1.6 clears both for body-size headings. */
  line-height: 1.6;
  color: var(--text-color);
  letter-spacing: -0.01em;
}
p { margin: 0; }

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================================
   SAMPLE REQUEST MODAL
   ------------------------------------------------------------
   A dialog, not a section: the sample CTA sits in the middle of
   the logistics band, and a sample request is a different ask
   (which sample, which product) from a general price enquiry.
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* `hidden` must beat display:flex — same trap as the form banners. */
.modal[hidden] { display: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(43, 30, 26, 0.55);
  backdrop-filter: blur(3px);
  animation: modalFade var(--t-base);
}

.modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 32px;
  animation: modalRise var(--t-slow);
}

.modal-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-soft);
  background: var(--primary-tint);
  transition: background var(--t-fast), color var(--t-fast);
}
.modal-close:hover { background: var(--primary-soft); color: var(--primary-color); }

/* The dialog takes focus on open, so the site-wide :focus-visible ring would
   draw a red frame around the whole card. The dialog appearing *is* the
   feedback, and Tab lands on the close button, which keeps its own ring. */
.modal-card:focus { outline: none; }

.modal-title {
  font-size: 22px;
  margin-bottom: 6px;
  /* keep the title clear of the close button */
  padding-inline-end: 44px;
}
.modal-sub {
  font-size: 14px;
  color: var(--text-soft);
  margin-bottom: 24px;
}
.lead-form .field:last-of-type { margin-bottom: 20px; }
.field-optional { font-weight: 400; color: var(--text-soft); font-size: 12px; }

/* The product being ordered — the dialog's fixed context, not user input */
.buy-chip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--primary-tint);
  border: 1px solid var(--primary-soft);
  border-inline-start: 3px solid var(--primary-color);
  border-radius: var(--radius-md);
}
.buy-chip-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 13px;
}
.buy-chip-row > span { color: var(--text-soft); }
.buy-chip-row > strong { font-weight: 700; text-align: end; }

@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalRise {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal-card { animation: none; }
}

/* Phones: the dialog becomes a bottom sheet so the on-screen keyboard
   does not cover the submit button. */
@media (max-width: 560px) {
  .modal { padding: 0; align-items: flex-end; }
  .modal-card {
    width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 26px 20px calc(26px + env(safe-area-inset-bottom));
  }
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: transform var(--t-fast), box-shadow var(--t-base), background var(--t-base), color var(--t-base);
  white-space: nowrap;
  border: 1.5px solid transparent;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--primary-color);
  color: var(--text-on-primary);
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(158, 42, 43, 0.36);
}

.btn-outline {
  background: transparent;
  color: var(--text-on-primary);
  border-color: var(--on-primary-line-strong);
}
.btn-outline:hover { background: var(--on-primary-line); border-color: var(--text-on-primary); }

.btn-whatsapp {
  background: var(--whatsapp-green);
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.32);
}
.btn-whatsapp:hover {
  background: #1FB957;
  transform: translateY(-2px);
}

.btn-block { width: 100%; }
.btn-lg { padding: 16px 28px; font-size: 16px; border-radius: 14px; }
.btn-sm { padding: 9px 16px; font-size: 13px; }

/* ===== HEADER ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 239, 224, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-color);
  transition: box-shadow var(--t-base);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-mark { display: inline-flex; }
.brand-text { display: inline-flex; flex-direction: column; line-height: 1.4; }
.brand-name {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--primary-color);
  white-space: nowrap;
}
html[lang="fa"] .brand-name,
html[lang="ku"] .brand-name { font-size: 19px; }
.brand-tag {
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}

.primary-nav {
  display: flex;
  gap: 28px;
  font-weight: 600;
  font-size: 14px;
}
.primary-nav a {
  position: relative;
  color: var(--text-color);
  padding: 6px 0;
  transition: color var(--t-fast);
  /* A nav label is a single unit: it must never break onto a second line.
     The header has a fixed height, so a wrapped link grew past the band
     and collided with the row below (iPad mini 768, Surface 810). */
  white-space: nowrap;
}
.primary-nav a:hover { color: var(--primary-color); }
.primary-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--primary-color);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-base);
}
.primary-nav a:hover::after { transform: scaleX(1); }

/* Scroll-spy: .is-active marks the link whose section currently owns the
   viewport. The underline alone would be too quiet against the hover rule,
   so the label also takes the brand colour and the bar reads as filled. */
.primary-nav a.is-active {
  color: var(--primary-color);
}
.primary-nav a.is-active::after {
  transform: scaleX(1);
  height: 3px;
  border-radius: 2px;
  background: var(--primary-color);
}
.primary-nav a:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 4px;
  border-radius: 4px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--card-bg);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--border-color);
}
.lang-btn {
  color: var(--text-soft);
  padding: 3px 6px;
  border-radius: 999px;
  transition: color var(--t-fast), background var(--t-fast);
}
.lang-btn.is-active {
  color: var(--primary-color);
  background: var(--bg-main);
}
.lang-divider { color: var(--border-color); margin: 0 2px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--text-color);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-fast);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ===== HERO ===== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 68px 0 64px;
  background: linear-gradient(140deg, var(--primary-deep) 0%, var(--primary-color) 55%, var(--primary-mid) 100%);
  color: var(--text-on-primary);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero-grid {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(to right, rgba(255, 250, 240, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 250, 240, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 70% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 70% 30%, black 30%, transparent 75%);
}
.hero-glow {
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
  filter: blur(20px);
}
html[dir="rtl"] .hero-glow { right: auto; left: -200px; }

.hero-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: var(--on-primary-line);
  color: var(--text-on-primary);
  border: 1px solid var(--on-primary-line-strong);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

/* Headings sit on the deep-red gradient here, so they must take the
   light on-primary colour — the global h1..h4 rule sets a dark colour
   and would otherwise win and render the first line black. */
.hero-title,
.hero h1, .hero h2, .hero h3 {
  color: var(--text-on-primary);
}
.hero-title {
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  font-weight: 800;
  /* Two stacked display lines, so this must clear Mikhak's full
     1.660em metric height — anything under that collides. */
  line-height: 1.7;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.hero-title span { display: block; }
.hero-accent {
  background: linear-gradient(120deg, #FFFFFF 0%, #F6EFE0 60%, #EBD9BC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-tagline {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--text-on-primary);
  margin-bottom: 18px;
  line-height: 1.5;
  opacity: 0.92;
}

.hero-subtitle {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  max-width: 720px;
  color: var(--on-primary-soft);
  margin-bottom: 36px;
}
.hero-subtitle strong { color: var(--text-on-primary); font-weight: 700; }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 48px;
}

/* ---- Currency wallet ----------------------------------------------
   A card wallet: the real banknotes from Money/ sit as stacked cards
   that rise out of a dark pocket, then reshuffle so the list reads as
   money moving through. Each card keeps its note's own proportions in a
   fixed-ratio frame; the stack order is driven by --slot from JS.
   The hero is a two-column grid (copy start side, wallet end side) —
   absolute positioning dropped the wallet onto the title. */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: center;
  gap: 48px;
}
.hero-copy { min-width: 0; }

.wallet {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  /* Reserve the full stack + pocket height: stack 168px (top card 92 +
     two 38px steps) plus the 108px pocket = 276px. The pocket is
     absolute, so without this the wrapper collapses to the cards' box
     and the pocket hangs outside it. */
  min-height: 276px;
}

/* ---- The stack ----
   Cards are absolutely placed on three fixed steps so they overlap like
   a real wallet; --slot is the z-order, re-written on each shuffle.
   Each card carries a default --slot so the stack is correct on first
   paint, before JS runs — with the variable empty, calc(0 * 38px)
   collapses every card onto the same offset and only the last one shows.
   The nth-child defaults also fix reading order for no-JS visitors. */
.wallet-cards {
  position: relative;
  height: 168px;
}

.wallet-card {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 92px;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: 0 10px 26px rgba(43, 30, 26, 0.30);
  transform: translateY(calc(var(--slot, 0) * 38px));
  transition: transform 620ms cubic-bezier(.22, .68, .32, 1.2),
              box-shadow var(--t-base);
  will-change: transform;
}
.wallet-card:nth-child(1) { --slot: 0; }
.wallet-card:nth-child(2) { --slot: 1; }
.wallet-card:nth-child(3) { --slot: 2; }

/* Depth shading: the card further back sits in the pocket's shadow.
   Kept light (max ~0.3) — the card that sinks deepest is also the one
   still fully visible above the lip, and a heavy wash there muddied the
   note artwork and the label together. */
.wallet-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(43, 30, 26, 0) 45%, rgba(43, 30, 26, 0.30));
  opacity: calc((var(--slot, 0) + 1) * 0.10);
  pointer-events: none;
}

.wallet-card:hover { box-shadow: 0 16px 34px rgba(43, 30, 26, 0.42); }

/* Note artwork on the inline-start edge. Wide enough that the note is
   recognisable at a glance — a thin 74px sliver read as a colour chip,
   not as a banknote. */
.wallet-card-img {
  flex: none;
  display: block;
  width: 124px;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--bg-warm);
}

.wallet-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 10px 12px;
}
.wallet-card-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-color);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wallet-card-issuer {
  font-family: var(--font-en);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--text-soft);
}

/* Direction badge on the trailing edge: green = money in, amber = out. */
.wallet-card-edge {
  flex: none;
  align-self: center;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-inline-end: 12px;
  border-radius: 50%;
}
.wallet-card--usd .wallet-card-edge,
.wallet-card--irr .wallet-card-edge {
  color: #047857;
  background: rgba(16, 185, 129, 0.16);
}
.wallet-card--iqd .wallet-card-edge {
  color: #B45309;
  background: rgba(251, 191, 36, 0.20);
}

/* ---- The pocket ----
   Sits under the stack; the cards disappear behind its top edge, which
   is what sells the "money inside the wallet" read. The lip has to fall
   below the BOTTOM card's label (top card 92px + two 38px steps = 168px)
   so all three names stay legible, while still covering the lower third
   of the bottom card. */
.wallet-pocket {
  position: absolute;
  inset-inline: -14px;
  bottom: 0;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, #241713 0%, #150C09 100%);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
}
/* The pocket's opening: a lighter lip so the cards slot into it. */
.wallet-pocket::before {
  content: '';
  position: absolute;
  inset-inline: 18px;
  top: 0;
  height: 1px;
  background: rgba(255, 250, 240, 0.16);
}

.wallet-pocket-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: rgba(255, 250, 240, 0.55);
  text-align: center;
}
.wallet-pocket-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  direction: ltr;
}
.wallet-sym {
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 800;
  color: rgba(255, 250, 240, 0.62);
}
.wallet-dots {
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--text-on-primary);
  transition: opacity var(--t-fast);
}
.wallet-pocket-note {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255, 250, 240, 0.5);
  text-align: center;
}

/* ---- Stat strip --------------------------------------------------
   Four equal cards on one row. Each cell is a bordered tile with its
   own baseline, so the numbers sit on the same optical line and the
   labels wrap without shifting the layout. Dividers are drawn with a
   pseudo-element so they never affect the grid track widths. */
.hero-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: 860px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--on-primary-line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  backdrop-filter: blur(6px);
}

.trust-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 108px;
  padding: 20px 18px;
  text-align: center;
  background: var(--on-primary-line);
  transition: background var(--t-base);
}
.trust-item + .trust-item::before {
  content: '';
  position: absolute;
  inset-block: 18px;
  inset-inline-start: 0;
  width: 1px;
  background: var(--on-primary-line-strong);
}
.trust-item:hover { background: rgba(255, 250, 240, 0.14); }

.trust-num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--text-on-primary);
  letter-spacing: 0;
  white-space: nowrap;
}
/* "۲۴ ساعت" is a phrase, not a bare figure — give it its own track
   so it does not force the neighbouring numbers to shrink. */
.trust-num--wide {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.35;
}
.trust-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6em;
  font-size: 12px;
  line-height: 1.35;
  color: var(--on-primary-soft);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
}
.trust-label { text-transform: none; letter-spacing: 0; }

/* ===== SECTION HEADS ===== */
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}
.section-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-bottom: 12px;
}
.section-eyebrow { text-transform: none; letter-spacing: 0; }
.section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: var(--text-color);
}
.section-sub {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text-soft);
  line-height: 1.6;
}

/* ===== FACTORIES =========================================
   Replaces the old category filter tabs: the grid now lists
   contract-manufacturing partners, and each one links down to
   the products it supplies. */
.factories {
  padding: 80px 0 40px;
  background: var(--bg-warm);
}
.factory-grid {
  display: grid;
  /* auto-fit, not auto-fill: with a single partner the empty tracks must
     collapse so the card fills the row instead of stranding it at 1/3 width. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 20px;
}
.factory-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'logo main'
    'logo stats'
    'cta  cta';
  align-items: center;
  column-gap: 20px;
  row-gap: 14px;
  padding: 22px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.factory-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary-color);
  box-shadow: var(--shadow-lg);
}

.factory-logo {
  grid-area: logo;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.factory-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.factory-main { grid-area: main; min-width: 0; }
.factory-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 2px;
}
/* Reuse the verified tick on the homepage factory cards: it keeps its
   order:2 from the catalogue rule, so it lands left of the name in RTL. */
.factory-name-text {
  min-width: 0;
  order: 1;
}
.factory-name .verified-badge {
  width: 20px;
  height: 20px;
}
.factory-tag {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-color);
  line-height: 1.5;
}
.factory-note {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-soft);
}

.factory-stats {
  grid-area: stats;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.factory-stats li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 12px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}
.fs-num {
  font-size: 15px;
  font-weight: 800;
  color: var(--primary-color);
  line-height: 1.3;
}
.fs-label {
  font-size: 10.5px;
  color: var(--text-soft);
  line-height: 1.4;
}

.factory-cta { grid-area: cta; width: 100%; }

@media (max-width: 560px) {
  .factory-card {
    grid-template-columns: 1fr;
    grid-template-areas: 'logo' 'main' 'stats' 'cta';
    justify-items: stretch;
    text-align: right;
  }
  .factory-logo { justify-self: start; }
}

/* ===== PRODUCTS ===== */
.products { padding: 30px 0 80px; background: var(--bg-warm); }
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
}
.product-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-color);
  box-shadow: var(--shadow-lg);
}

.product-thumb {
  height: 160px;
  background: linear-gradient(135deg, var(--bg-main), var(--bg-warm));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.product-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, rgba(158, 42, 43, 0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(158, 42, 43, 0.05) 25%, transparent 25%);
  background-size: 20px 20px;
}
/* Real drum photography. The source files are 500×500 with a fully
   transparent background, so the photo needs no mask or blend mode —
   it composites straight onto the panel above the ::before pattern.
   The drum fills roughly the middle 70% of its square, hence 130px. */
.product-thumb .thumb-photo {
  position: relative;
  z-index: 1;
  width: 120px;
  height: 120px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(43, 30, 26, 0.16));
  transition: transform var(--t-base);
}
.product-card:hover .thumb-photo { transform: scale(1.07); }

/* Fallback glyph, used only when a photo fails to load. */
.product-thumb svg.thumb-icon {
  position: relative;
  z-index: 1;
  width: 80px;
  height: 80px;
  color: var(--primary-color);
  opacity: 0.85;
}
.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 2;
}
html[dir="rtl"] .product-badge { left: auto; right: 12px; }
.product-badge.badge-own {
  background: var(--c-green-500);
  color: #FFFFFF;
}
.product-badge.badge-partner {
  background: var(--card-bg);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}
.product-badge.badge-own {
  max-width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-code {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-color);
  background: rgba(255, 250, 240, 0.92);
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 2;
  border: 1px solid var(--border-color);
}
html[dir="rtl"] .product-code { right: auto; left: 12px; }

.product-body {
  padding: 18px 18px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Family chip above the title */
.product-family {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 10px;
  background: var(--primary-soft);
  color: var(--primary-color);
  border: 1px solid rgba(158, 42, 43, 0.22);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
}

.product-grade {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-soft);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.product-desc {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-apps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}
.product-apps li {
  position: relative;
  padding-inline-start: 14px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-soft);
}
.product-apps li::before {
  content: '';
  position: absolute;
  inset-inline-start: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--primary-color);
  border-radius: 50%;
}

.product-title-fa {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-color);
  line-height: 1.5;
}
.product-title-ku {
  font-family: var(--font-script);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-soft);
  line-height: 1.5;
}

.product-specs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
  border-top: 1px dashed var(--border-color);
  border-bottom: 1px dashed var(--border-color);
}
.product-spec {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-soft);
}
.product-spec strong {
  color: var(--text-color);
  font-weight: 700;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 12px;
}

.product-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}
.product-actions .btn {
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 10px;
}

/* «خرید» opens the buy menu, so it advertises the dropdown. */
.buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.buy-chevron { flex: 0 0 auto; transition: transform var(--t-base); }
.buy-btn[aria-expanded="true"] .buy-chevron { transform: rotate(180deg); }

/* Not .btn-outline — that paints cream-on-transparent for the dark hero
   band, which is invisible on a cream card. */
.store-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--card-bg);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}
.store-btn:hover {
  background: var(--primary-color);
  color: var(--text-on-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}
.store-btn svg { flex: 0 0 auto; }

/* ---- buy menu popover ---- */
.buy-menu {
  position: fixed;
  z-index: 120;
  width: 260px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  animation: buyMenuIn var(--t-fast);
}
@keyframes buyMenuIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
/* Flipped downward because the trigger sits near the viewport top. */
.buy-menu.buy-menu-below { animation-name: buyMenuInDown; }
@keyframes buyMenuInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.buy-menu-title {
  margin: 0 0 6px;
  padding: 6px 8px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border-color);
}
.buy-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-color);
  transition: background var(--t-fast);
}
.buy-menu-item:hover { background: var(--primary-tint); }
.buy-menu-ico {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}
.buy-menu-ico-wa { background: var(--whatsapp-green); }
.buy-menu-ico-db { background: var(--primary-color); }
.buy-menu-text { display: flex; flex-direction: column; line-height: 1.5; min-width: 0; }
.buy-menu-text > span { font-size: 14px; font-weight: 700; }
.buy-menu-text > small { font-size: 11px; color: var(--text-soft); }

.product-tds {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--primary-color);
  font-weight: 600;
  margin-top: 4px;
}
.product-tds:hover { color: var(--primary-hover); }
.product-tds svg { width: 14px; height: 14px; }

.product-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-soft);
  font-weight: 600;
}

/* ===== SUPPLIER ===== */
.supplier {
  padding: 90px 0;
  background: linear-gradient(180deg, var(--bg-main), var(--bg-warm));
  /* The halo behind the art is deliberately wider than its plate; clip
     it here so a soft glow can never become a horizontal scrollbar. */
  overflow: hidden;
}
.supplier-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}
.supplier-body {
  color: var(--text-soft);
  font-size: 17px;
  margin: 24px 0 32px;
  max-width: 560px;
}
.supplier-body strong { color: var(--text-color); font-weight: 700; }

.supplier-benefits {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 32px;
}
.supplier-benefits li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.benefit-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary-color);
  border-radius: 12px;
}
.supplier-benefits h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 4px;
}
.supplier-benefits p {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.5;
}

/* Two-column composition: a stack of chips beside the hub circle.
   It used to be three absolutely-positioned cards floating over a centred
   circle, which overlapped the SVG labels at every column width.
   `auto` keeps the chips at their natural one-line width; the hub column
   takes the rest and the SVG scales inside it, so neither can ever collide
   or force the chip labels to wrap. */
/* ---- Network map ----------------------------------------------------
   The "join the network" pitch, drawn rather than described: one hub
   with factories feeding in, buyers pulling out, and logistics carrying
   between them. The SVG holds the edges and the DOM holds the nodes, and
   both live inside the same square, so a node placed at --x/--y percent
   always sits on the line drawn to that point. No images, no canvas. */
.net-map {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
}

/* Edges sit behind everything, stretched to the same square. */
.net-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Draw-in: each edge extends from the hub outward, staggered by document
   order so the network assembles instead of appearing all at once. The
   lengths come from JS (measured from the real dot positions); the stagger
   is pure CSS nth-child, so nothing here depends on a JS-set index. */
.net-links line {
  stroke-linecap: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: net-draw 900ms cubic-bezier(.4, 0, .2, 1) forwards;
  animation-delay: calc(160ms * var(--i, 0) + 200ms);
}
.net-links line:nth-child(1) { --i: 0; }
.net-links line:nth-child(2) { --i: 1; }
.net-links line:nth-child(3) { --i: 2; }
.net-links line:nth-child(4) { --i: 3; }
.net-links line:nth-child(5) { --i: 4; }
.net-links line:nth-child(6) { --i: 5; }
.net-links line:nth-child(7) { --i: 6; }
.net-links line:nth-child(8) { --i: 7; }

@keyframes net-draw { to { stroke-dashoffset: 0; } }

/* ---- Hub ---- */
.net-hub {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
}
/* Breathing halo, the one "live" signal in the diagram.
   Centred with left + translate rather than an inline margin: an inline
   offset measures from the right under RTL and would slide the ring off
   the hub. */
.net-hub-ring {
  position: absolute;
  inset-block-start: 0;
  left: 50%;
  width: 104px;
  height: 104px;
  margin-left: -52px;
  border-radius: 50%;
  border: 2px solid rgba(158, 42, 43, 0.30);
  animation: net-halo 3s ease-out infinite;
}
.net-hub-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--primary-color);
  box-shadow: 0 10px 24px rgba(158, 42, 43, 0.38);
}
@keyframes net-halo {
  0%   { transform: scale(0.82); opacity: 0.85; }
  70%  { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}

/* ---- Peripheral nodes ----
   Absolutely placed from --x/--y percentages, matching the SVG's
   400x400 coordinate space so edge endpoints and dots line up.
   `inset-inline-start` is direction-aware: under RTL it measures from
   the RIGHT edge, so the same percentages that match the SVG in an LTR
   document land mirrored here. `left` is what the SVG's coordinate space
   actually means, so it is set explicitly. */
.net-node {
  position: absolute;
  z-index: 2;
  top: var(--y);
  left: var(--x);
  /* This box is the positioning anchor and nothing else — it must never be
     transformed or animated. JS reads the dot's rect inside it to aim each
     edge; a transform here (even a leftover scale(1)) would offset every
     line by the animation's residual pixels. So the entrance animation
     runs on .net-node-body, one level down. */
  transform: translate(-50%, -50%);
  width: 92px;
}
.net-node-body {
  /* Flex, not grid: `order` only reorders flex/grid ITEMS, and in a grid
     these two spans are siblings in the same cell area, so order was
     ignored. column-reverse genuinely flips the caption above the dot. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
}
/* Nodes whose edge arrives from below carry the caption above the dot, so
   the line can never cross the text. */
.net-node[style*="label-order:-1"] .net-node-body {
  flex-direction: column-reverse;
}
}
  animation: net-node-in 600ms cubic-bezier(.22, .68, .32, 1.2) backwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes net-node-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

.net-node-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 3px solid var(--card-bg);
  box-shadow: 0 2px 8px rgba(43, 30, 26, 0.22);
}
.net-node-text {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-color);
  white-space: nowrap;
  /* Opaque plate: an edge that grazes the caption is then hidden behind it
     rather than showing through the glyphs. */
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--bg-main);
}

/* One colour per role, matching the meaning used in the copy beside it. */
.net-node--factory .net-node-dot { background: var(--primary-color); }
.net-node--buyer   .net-node-dot { background: var(--c-green-500); }
.net-node--logi    .net-node-dot { background: var(--text-soft); }

/* Hovering a node lights its own edges — the diagram reads on demand
   instead of shouting every relationship at once. */
.net-node:hover .net-node-dot { transform: scale(1.25); }
.net-node-dot { transition: transform var(--t-fast); }

.net-node:hover ~ .net-lines line[data-net="factory"],
.net-map:has(.net-node--factory:hover) .net-links line[data-net="factory"] {
  stroke: rgba(158, 42, 43, 0.85);
  stroke-width: 2.6;
}
.net-map:has(.net-node--buyer:hover) .net-links line[data-net="buyer"] {
  stroke: rgba(16, 185, 129, 0.85);
  stroke-width: 2.6;
}
.net-map:has(.net-node--logi:hover) .net-links line[data-net="logi"] {
  stroke: rgba(122, 106, 96, 0.85);
  stroke-width: 2.6;
}

/* Narrow: the map scales with the column instead of overflowing it. */
@media (max-width: 620px) {
  .net-map { max-width: 340px; }
}

/* ===== LOGISTICS ===== */
.logistics {
  padding: 90px 0;
  background: linear-gradient(140deg, var(--primary-deep) 0%, var(--primary-hover) 100%);
  color: var(--text-on-primary);
  position: relative;
  overflow: hidden;
}
.logistics::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 250, 240, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 250, 240, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.logistics .section-title { color: var(--text-on-primary); }
.logistics .section-sub { color: var(--on-primary-soft); }
.logistics .section-eyebrow { color: var(--text-on-primary); }

.log-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
/* 4 → 2 → 1 as the viewport narrows; the crossing cards carry a lot
   of body text, so they need a wider track than a bare stat tile. */
@media (max-width: 1100px) {
  .log-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .log-grid { grid-template-columns: 1fr; }
}
.log-card {
  background: var(--on-primary-line);
  border: 1px solid var(--on-primary-line-strong);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: all var(--t-base);
}
.log-card:hover {
  background: rgba(255, 250, 240, 0.14);
  border-color: var(--text-on-primary);
  transform: translateY(-4px);
}
.log-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 250, 240, 0.16);
  color: var(--text-on-primary);
  border-radius: 14px;
  margin-bottom: 20px;
}
.logistics h3,
.logistics h4,
.log-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-on-primary);
  margin-bottom: 4px;
}
.log-ku {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-on-primary);
  opacity: 0.85;
  margin-bottom: 14px;
}
.log-card p {
  font-size: 14px;
  color: var(--on-primary-soft);
  line-height: 1.55;
  margin-bottom: 16px;
}

.sample-banner {
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(135deg, rgba(255, 250, 240, 0.18), rgba(255, 250, 240, 0.05));
  border: 1px solid rgba(255, 250, 240, 0.4);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  flex-wrap: wrap;
}
.sample-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--text-on-primary);
  color: var(--primary-color);
  border-radius: 50%;
}
.sample-copy { flex: 1; min-width: 220px; }
.sample-copy h3 {
  color: var(--text-on-primary);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}
.sample-copy p {
  color: var(--on-primary-soft);
  font-size: 14px;
}

/* ===== INQUIRY ===== */
.inquiry {
  padding: 90px 0;
  background: var(--bg-warm);
}
.inquiry-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: flex-start;
}
.inquiry-copy .section-title { text-align: left; }
.inquiry-copy .section-sub { text-align: left; margin-bottom: 16px; }
.inquiry-copy > p {
  color: var(--text-soft);
  font-size: 16px;
  margin-bottom: 28px;
  max-width: 480px;
}
.inquiry-channels {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ch-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 14px;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.ch-btn:hover { transform: translateY(-2px); }
.ch-whatsapp {
  background: var(--whatsapp-green);
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.25);
}
.ch-whatsapp:hover { background: #1FB957; }

.inquiry-form {
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
}
.field {
  margin-bottom: 14px;
  flex: 1;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text-color);
  background: var(--card-bg);
  font-family: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
html[dir="rtl"] .field input,
html[dir="rtl"] .field select,
html[dir="rtl"] .field textarea {
  text-align: right;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
.field textarea { resize: vertical; min-height: 80px; }

.form-note {
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 12px;
  text-align: center;
}
.form-success, .form-error {
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 14px;
}
/* The `hidden` attribute must win over the display:flex above, otherwise
   both banners sit visible on the untouched form. */
.form-success[hidden], .form-error[hidden] { display: none; }
.form-success {
  background: rgba(16, 185, 129, 0.10);
  color: var(--c-green-600);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.form-error {
  background: rgba(158, 42, 43, 0.08);
  color: var(--primary-hover);
  border: 1px solid rgba(158, 42, 43, 0.3);
}
.success-icon {
  width: 26px;
  height: 26px;
  background: var(--c-green-500);
  color: var(--text-on-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
}

/* ===== FOOTER ===== */
.site-footer {
  background: var(--bg-footer);
  color: rgba(255, 250, 240, 0.78);
  padding-top: 60px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 50px;
  padding-bottom: 50px;
}
.footer-brand .brand-name { color: var(--text-on-primary); }
.footer-brand .brand-tag { color: rgba(255, 250, 240, 0.6); }
.footer-about {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 250, 240, 0.7);
  max-width: 380px;
}
.footer-tagline {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-on-primary);
  opacity: 0.78;
  margin-top: 14px;
  max-width: 380px;
  line-height: 1.5;
}
.footer-col h4 {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-on-primary);
  margin-bottom: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.footer-col h4 { text-transform: none; letter-spacing: 0; }
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
  color: rgba(255, 250, 240, 0.65);
  font-size: 14px;
  transition: color var(--t-fast);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-col a:hover { color: var(--text-on-primary); }
.footer-col li > span:not(.brand) {
  color: rgba(255, 250, 240, 0.65);
  font-size: 14px;
}

/* Footer contact: an icon beside each channel, and an address that is
   long enough to need its own wrapping block. */
.footer-contact svg { flex: none; }
.footer-contact a svg { opacity: 0.75; }
.footer-address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: rgba(255, 250, 240, 0.65);
  font-size: 14px;
  line-height: 1.7;
}
.footer-address svg { margin-top: 3px; opacity: 0.75; }

/* ---- Footer analogue clocks ----------------------------------------
   Tehran and Erbil — the two ends of this corridor. White faces with
   printed numerals and a blue sweep hand, drawn with transforms and
   absolutely-placed marks rather than an image, so they stay crisp and
   cost nothing to load. Hands are written by JS from named time zones. */
.footer-clocks {
  padding: 44px 0 8px;
  border-top: 1px solid rgba(255, 250, 240, 0.10);
}
.footer-clocks-inner {
  display: flex;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
}

.analog-clock {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.analog-face {
  position: relative;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: linear-gradient(165deg, #FFFFFF 0%, #F1F3F5 100%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34), inset 0 2px 6px rgba(255, 255, 255, 0.9);
}
/* Bezel: the ring the numerals sit inside. */
.analog-ring {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 1px solid rgba(43, 30, 26, 0.10);
}

/* Numerals: one span per hour, rotated to its position and counter-
   rotated so the glyph stays upright. */
/* Numerals are written by JS into .analog-numerals, so the glyphs and the
   clock always agree: Persian on the Tehran face, Kurdish on the Erbil one.
   Each numeral is rotated to its hour then counter-rotated, which keeps the
   glyph upright while its BOX follows the dial. */
.analog-numerals {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.analog-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 22px;
  margin: -11px 0 0 -13px;
  transform:
    rotate(calc(var(--n) * 30deg))
    translateY(-62px)
    rotate(calc(var(--n) * -30deg));
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 600;
  color: #1F2933;
  line-height: 1;
}
/* Tehran reads in Persian, Erbil in Kurdish: Mikhak carries the Persian
   digits, NRT the Kurdish ones (NRT has no Persian digit coverage, and
   Mikhak lacks the Kurdish letters). Each face picks its own face, set
   per-clock from JS rather than from the page language — the page can be
   in Kurdish while the Tehran clock must still show Persian numerals. */
.analog-clock[data-script="fa"] .analog-mark {
  font-family: var(--font-fa);
}
.analog-clock[data-script="ku"] .analog-mark {
  font-family: var(--font-nrt);
  font-weight: 700;
}

.analog-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  border-radius: 999px;
  transform-origin: 50% 100%;
  transform: rotate(0deg);
}
.analog-hand--hour {
  width: 5px;
  height: 44px;
  margin-left: -2.5px;
  background: #1F2933;
  border-radius: 999px 999px 2px 2px;
}
.analog-hand--min {
  width: 4px;
  height: 62px;
  margin-left: -2px;
  background: #1F2933;
  border-radius: 999px 999px 2px 2px;
}
/* Sweep hand in the brand red, not the reference's blue — it reads as
   part of this site rather than borrowed from another product. */
.analog-hand--sec {
  width: 2px;
  height: 68px;
  margin-left: -1px;
  background: var(--primary-color);
}
/* Centre medallion carries the brand mark, as it does on the 1000-toman
   note the site already uses. Sized to sit over the hand pivots. */
.analog-cap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}
.analog-cap svg { display: block; border-radius: 6px; }

.analog-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.analog-city {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 250, 240, 0.85);
  line-height: 1.4;
}
.analog-digital {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 250, 240, 0.55);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Narrow: the pair stacks and the faces shrink. */
@media (max-width: 620px) {
  .footer-clocks-inner { gap: 36px; }
  .analog-face { width: 140px; height: 140px; }
  .analog-mark { transform:
    rotate(calc(var(--n) * 30deg))
    translateY(-51px)
    rotate(calc(var(--n) * -30deg));
    width: 24px;
    margin-left: -12px;
    font-size: 13.5px; }
  .analog-hand--hour { height: 37px; }
  .analog-hand--min { height: 52px; }
  .analog-hand--sec { height: 57px; }
}

.footer-bar {
  border-top: 1px solid rgba(255, 250, 240, 0.10);
  padding: 20px 0;
}
.footer-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255, 250, 240, 0.5);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .supplier-inner { grid-template-columns: 1fr; }
  .net-map { max-width: 420px; }
  .inquiry-inner { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }
  .hero-trust { grid-template-columns: repeat(2, 1fr); }
  /* At 2x2 the vertical divider is still the right axis, so the row rule
     has to be *added*, not swapped in for it. The old rule hid the
     vertical one on the whole second row (`:nth-child(n+3)::before
     { display:none }`) and picked the row with `:nth-child(odd)` — which
     in RTL is the right-hand COLUMN, not the first row. That left a
     half-width stub that stopped at the gutter.
     The rule spans the full card width (no inline inset) so the two
     cards of a row meet into one continuous line, matching the vertical
     divider, which also runs edge to edge. */
  .trust-item::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 1px;
    background: var(--on-primary-line-strong);
  }
  /* Only the two cards of the top row draw it. */
  .trust-item:nth-child(n+3)::after { display: none; }
  /* Drop the vertical rule where it would sit on a card edge: the first
     card of each row has no neighbour on its leading side. */
  .trust-item:nth-child(1)::before,
  .trust-item:nth-child(3)::before { display: none; }

  /* The two-column hero needs real width on both sides. Below 960px the
     copy alone wants the full column, so the wallet drops under it and
     the grid collapses to one track. */
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .wallet {
    width: 100%;
    max-width: 300px;
    margin-inline: auto;
  }
}

/* ------------------------------------------------------------
   HEADER — tablet band (iPad mini 768, Surface 810, iPad 820…)

   The inline nav needs ~800px in Persian and ~975px in Kurdish
   (measured at max-content). Below that the flex row has no room
   left: the links used to shrink, wrap onto a second line and
   spill out of the 72px header band. Every tablet in that window
   hit it. So the drawer now starts at 1080px — above the widest
   measured requirement, with slack for the container gutters —
   instead of 760px. Between 760 and 1080 the header keeps the
   brand and the actions and just folds the links away.
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .primary-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--card-bg);
    padding: 24px;
    gap: 18px;
    box-shadow: var(--shadow-lg);
    transform: translateY(-110%);
    transition: transform var(--t-base), visibility var(--t-base);
    border-bottom: 1px solid var(--border-color);
    /* The closed drawer is only translated off-screen, not removed, so it
       still sits over the header band and swallows taps aimed at the
       language toggle. Take it out of hit-testing until it is open. */
    visibility: hidden;
    pointer-events: none;
  }
  .primary-nav.is-open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }
  .nav-toggle { display: flex; }
  .cta-supplier { display: none; }
}

@media (max-width: 760px) {
  /* Mobile nav — the drawer rules live in the shared nav block below,
     so only the phone-specific refinements belong here. */
  .hero { padding: 60px 0 50px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }
  .trust-item { min-height: 96px; padding: 16px 12px; }

  .categories, .products, .supplier, .logistics, .inquiry {
    padding: 60px 0;
  }

  .cat-tab { min-width: auto; width: 100%; }

  .field-row { grid-template-columns: 1fr; }
  .inquiry-form { padding: 24px; }

  .footer-inner { grid-template-columns: 1fr; gap: 32px; }

  .sample-banner { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .header-inner { height: 64px; gap: 12px; }
  /* 64px band + 1px border — the drawer offsets from --header-h. */
  :root { --header-h: 65px; }
  .brand-tag { display: none; }
  .hero-title { font-size: 2rem; }
  .hero-trust { grid-template-columns: 1fr; }
  .trust-item { min-height: 84px; }
  /* One column: every card is its own row, so the divider flips back to
     horizontal. It runs the full card width (no inline inset) and sits
     under cards 2 and 3 — the last card gets no rule, so nothing dangles
     against the container's bottom border. */
  .trust-item + .trust-item::before {
    display: block;
    inset-block: 0 0;
    inset-inline: 0;
    width: auto;
    height: 1px;
  }
  .trust-item:nth-child(n+3)::before { display: block; }
  .trust-item:last-child::before { display: none; }
  .trust-item::after { display: none; }
  .product-actions { grid-template-columns: 1fr; }
  .product-thumb { height: 140px; }
  .product-thumb .thumb-photo { width: 100px; height: 100px; }
}

/* ============================================================
   RTL — both supported languages (fa, ku) are RTL,
   so these rules are always active. The page never renders LTR.
   ============================================================ */

/* Persian/Arabic script must not be letter-spaced — it breaks glyph joins */
h1, h2, h3, h4,
.brand-name,
.hero-title,
.section-title,
.product-title-fa,
.product-title-ku,
.btn,
.field label,
.product-spec,
.footer-col h4,
.section-eyebrow,
.hero-eyebrow,
.trust-label,
.section-sub,
.brand-tag { letter-spacing: 0; }

/* Headings align to the start (right) in RTL — but NOT every section
   title: the ones inside .section-head are meant to read centred, and a
   blanket `text-align: right` would beat the centre they inherit from the
   parent. Only the free-standing and side-column titles are edge-aligned. */
.hero-title,
.product-title-fa,
.product-title-ku { text-align: right; }

/* Centred column headings (eyebrow + title + subtitle sit as one block) */
.section-head .section-title,
.section-head .section-sub { text-align: center; }

/* Inquiry column keeps its right-edge alignment */
.inquiry-copy .section-title,
.inquiry-copy .section-sub { text-align: right; }

/* Stacked content inside tabs / trust strip hugs the right edge */
.cat-tab { align-items: flex-end; text-align: right; }
.trust-item { align-items: center; text-align: center; }
.supplier-benefits li { text-align: right; }

/* The supplier art is a photo plate now — no chips left to align. */

/* Form controls inherit RTL text alignment */
.field input, .field select, .field textarea { text-align: right; }
.field-row { direction: rtl; }

/* Spec rows: label on the right, value on the left */
.product-spec { flex-direction: row; }

/* Hero decorative layers mirror.
   NOTE: .hero-bg must NOT be mirrored — it is the parent of .hero-glow,
   and mirroring the parent would mirror the glow twice. */
.hero-grid { transform: scaleX(-1); }
.hero-glow { right: auto; left: -200px; }

/* Corner chips swap sides */
.product-badge { left: auto; right: 12px; }
.product-code { right: auto; left: 12px; }
.cat-count { right: auto; left: 10px; }

/* Language switcher itself stays LTR so «فا | کوردی» reads naturally */
.lang-toggle { direction: ltr; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* Focus visibility */
:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Print friendly */
@media print {
  .site-header, .hero, .net-map, .hero-trust, .inquiry-channels { display: none }
}

/* ============================================================
   FACTORY CATALOGUE PAGE  (products.html)
   ------------------------------------------------------------
   Inserted before the Kurdish script override on purpose: anything
   tagged lang="ku" below must still end up on NRT.
   ============================================================ */

/* ---- utilities ---- */
/* Components below set `display` (.pd is flex, .cat-grid is grid,
   .cat-search-clear is flex). A component `display` outranks the user
   agent's `[hidden] { display: none }`, which leaves a "hidden" dialog
   stretched over the viewport swallowing every click. Scoped to this
   page and made explicit so the whole bug class cannot come back. */
body.page-catalogue [hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
body.is-locked { overflow: hidden; }

/* ---- catalogue hero ---- */
.cat-hero {
  position: relative;
  padding: 26px 0 30px;
  background: linear-gradient(135deg, var(--bg-main), var(--bg-warm));
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
}
.cat-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.6;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: 18px;
}
.breadcrumb a { color: var(--text-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary-color); }

.cat-hero-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.cat-hero-logo {
  width: 72px; height: 72px;
  flex: 0 0 72px;
  border-radius: var(--radius-md);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
}
.cat-hero-logo img { width: 100%; height: 100%; object-fit: contain; }
.cat-hero-copy { min-width: 0; }
.cat-hero-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.7rem;
  line-height: 1.6;
  color: var(--text-color);
  margin: 0 0 2px;
}
/* The name itself is the flexible part, so a long factory name wraps
   under the badge instead of pushing it off the card. */
.cat-hero-title-text {
  min-width: 0;
  order: 1;
}

/* Verified tick — a sealed blue rosette with a white check, sized to
   sit on the text's optical centre rather than the line box.
   order:2 puts it last in the flex row, which in an RTL document is
   the LEFT of the name — the reading end of the line. */
.verified-badge {
  order: 2;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #1D9BF0;
  transform: translateY(1px);
}
.verified-badge svg { display: block; }
.cat-hero-tag {
  font-size: 0.95rem;
  color: var(--text-soft);
  margin: 0;
}
.cat-hero-stats {
  display: flex;
  gap: 10px;
  margin-inline-start: auto;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}
.cat-hero-stats li {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  text-align: center;
  min-width: 104px;
}
.chs-num {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary-color);
  line-height: 1.7;
}
.chs-label {
  display: block;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.462;
}

/* .btn-outline paints cream-on-transparent, which is built for the dark
   hero band. This header is cream, so the back-link needs its own
   legible treatment rather than inheriting the invisible one. */
.cta-back {
  background: transparent;
  color: var(--primary-color);
  border-color: var(--primary-color);
}
.cta-back:hover {
  background: var(--primary-color);
  color: var(--text-on-primary);
  border-color: var(--primary-color);
}

/* ---- filter bar ---- */
.cat-controls {
  position: sticky;
  top: var(--header-h, 73px);
  z-index: 40;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border-color);
  padding: 14px 0 16px;
}
.cat-search-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cat-search {
  position: relative;
  flex: 1 1 320px;
  min-width: 240px;
  display: flex;
  align-items: center;
}
.cat-search-icon {
  position: absolute;
  inset-inline-start: 14px;
  color: var(--text-soft);
  pointer-events: none;
  display: flex;
}
.cat-search input {
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-color);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 11px 44px 11px 44px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cat-search input::placeholder { color: var(--text-soft); }
.cat-search input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-tint);
}
.cat-search input::-webkit-search-cancel-button { display: none; }
.cat-search-clear {
  position: absolute;
  inset-inline-end: 10px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
}
.cat-search-clear:hover { background: var(--primary-tint); color: var(--primary-color); }

.cat-result-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--text-soft);
  white-space: nowrap;
}
.cat-reset {
  border: 0;
  background: transparent;
  color: var(--primary-color);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.cat-reset:hover { color: var(--primary-hover); }

.cat-filters {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
}
.cat-filters-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
  white-space: nowrap;
  flex: 0 0 auto;
}
.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 13px;
  color: var(--text-color);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.cat-chip:hover { border-color: var(--primary-color); color: var(--primary-color); }
.cat-chip.is-active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-on-primary);
}
.cat-chip-count {
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.6;
  min-width: 20px;
  text-align: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary-tint);
  color: var(--primary-hover);
}
.cat-chip.is-active .cat-chip-count {
  background: rgba(255, 255, 255, 0.22);
  color: var(--text-on-primary);
}

/* ---- product grid ---- */
.cat-products { padding: 24px 0 80px; background: var(--bg-warm); }
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 20px;
}
.cat-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.cat-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-color);
  box-shadow: var(--shadow-lg);
}
.cat-card-thumb {
  position: relative;
  height: 148px;
  background: linear-gradient(135deg, var(--bg-main), var(--bg-warm));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cat-card-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, rgba(158, 42, 43, 0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(158, 42, 43, 0.05) 25%, transparent 25%);
  background-size: 20px 20px;
}
.cat-card-family {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-color);
  background: var(--card-bg);
  border: 1px solid var(--primary-color);
  border-radius: 999px;
  padding: 3px 9px;
  max-width: 66%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-card-code {
  position: absolute;
  bottom: 10px;
  inset-inline-end: 10px;
  z-index: 2;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-color);
  background: rgba(255, 250, 240, 0.92);
  padding: 3px 8px;
  border-radius: 4px;
}
.cat-card-thumb .thumb-photo {
  position: relative;
  z-index: 1;
  width: 112px;
  height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(43, 30, 26, 0.16));
  transition: transform var(--t-base);
}
.cat-card:hover .thumb-photo { transform: scale(1.07); }
.cat-card-thumb svg.thumb-icon {
  position: relative;
  z-index: 1;
  width: 72px;
  height: 72px;
  color: var(--primary-color);
  opacity: 0.85;
}
.cat-card-body {
  padding: 14px 16px 8px;
  flex: 1 1 auto;
}
.cat-card-title {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--text-color);
  margin: 0 0 6px;
}
.cat-card-grade {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-soft);
}
.cat-card-grade-lbl { font-weight: 700; }
.cat-card-grade [dir="ltr"] { color: var(--text-color); font-weight: 700; }
.cat-card-desc {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cat-card-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px 16px 16px;
}
.cat-card-foot .btn { padding: 9px 14px; font-size: 0.85rem; }

/* ---- empty / error ---- */
.cat-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--card-bg);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
}
.cat-empty-icon { color: var(--primary-tint); display: inline-flex; }
.cat-empty h2 {
  font-size: 1.15rem;
  color: var(--text-color);
  margin: 12px 0 6px;
}
.cat-empty p { color: var(--text-soft); margin: 0 0 18px; font-size: 0.9rem; }
.cat-error {
  text-align: center;
  color: var(--primary-color);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  margin: 0;
}

/* ---- detail dialog ---- */
.pd-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(43, 30, 26, 0.55);
  z-index: 90;
  animation: pdFade var(--t-base);
}
.pd {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pd-sheet {
  position: relative;
  width: 100%;
  max-width: 720px;
  background: var(--bg-warm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pdRise var(--t-base);
}
@keyframes pdFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pdRise { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }

.pd-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 14px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  color: var(--text-on-primary);
}
.pd-head-text { min-width: 0; flex: 1 1 auto; }
.pd-code {
  display: inline-block;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 2px 7px;
  margin-bottom: 6px;
}
.pd-title {
  font-size: 1.28rem;
  line-height: 1.6;
  color: var(--text-on-primary);
  margin: 0 0 8px;
}
.pd-head-meta { display: flex; gap: 7px; flex-wrap: wrap; }
.pd-chip {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: var(--text-on-primary);
}
.pd-chip-family { background: rgba(255, 255, 255, 0.9); color: var(--primary-color); }
.pd-close {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: var(--text-on-primary);
  cursor: pointer;
  transition: background var(--t-fast);
}
.pd-close:hover { background: rgba(255, 255, 255, 0.3); }

.pd-body { padding: 4px 20px 8px; }
.pd-sec { padding: 18px 0; border-bottom: 1px dashed var(--border-color); }
.pd-sec:last-child { border-bottom: 0; }
.pd-sec-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  color: var(--primary-color);
  margin: 0 0 10px;
}
.pd-sec-n {
  font-size: 11px;
  font-weight: 700;
  background: var(--primary-tint);
  color: var(--primary-color);
  border-radius: 999px;
  padding: 1px 8px;
}
.pd-desc {
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--text-color);
}
.pd-base { margin: 0; }
.pd-base > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.82rem;
}
.pd-base dt { font-weight: 700; color: var(--text-soft); }
.pd-base dd { margin: 0; color: var(--text-color); }

.pd-specs { width: 100%; border-collapse: collapse; }
.pd-specs tr { border-bottom: 1px solid var(--border-color); }
.pd-specs tr:last-child { border-bottom: 0; }
.pd-specs th {
  text-align: start;
  vertical-align: top;
  padding: 10px 12px 10px 0;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-soft);
  width: 42%;
}
.pd-specs td {
  padding: 10px 0;
  font-size: 0.88rem;
  color: var(--text-color);
  vertical-align: top;
}
/* dir="auto" is what makes a value like "4c" or "40-40-0 (15) دقیقه"
   order correctly, but a value that is pure digits ("98") resolves to
   LTR, and then `text-align: start` sends it to the far left instead of
   hugging its label. The page never renders LTR (fa and ku are both
   RTL), so pin the alignment physically and let dir="auto" keep doing
   the bidi work. */
.pd-spec-main { text-align: right; }
.pd-spec-notes { text-align: right; }

.pd-spec-main { display: block; font-weight: 700; }
.pd-spec-notes {
  display: block;
  margin-top: 3px;
  font-size: 0.76rem;
  color: var(--text-soft);
  line-height: 1.7;
}
.pd-note + .pd-note::before { content: '· '; }
.pd-note-k { font-weight: 700; }

.pd-list { margin: 0; padding: 0; list-style: none; }
.pd-list li {
  position: relative;
  padding-inline-start: 16px;
  font-size: 0.87rem;
  line-height: 1.8;
  color: var(--text-color);
}
.pd-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.72em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary-color);
}

.pd-foot {
  display: grid;
  /* two actions: WhatsApp quote, direct buy */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 20px 20px;
  background: var(--card-bg);
  border-top: 1px solid var(--border-color);
}
.pd-foot .btn { padding-inline: 12px; }

/* ---- responsive ---- */
/* The landing page drops its header CTA when the nav folds into the drawer
   (1080px); this page's back-link has the same job and the same width
   pressure, so it goes at the same breakpoint. The brand mark still links
   home. */
@media (max-width: 1080px) {
  .cta-back { display: none; }
}
@media (max-width: 860px) {
  .cat-hero-stats { margin-inline-start: 0; width: 100%; }
  .cat-hero-stats li { flex: 1 1 0; min-width: 0; }
  .cat-filters { flex-direction: column; align-items: stretch; gap: 8px; }
  .cat-result-meta { width: 100%; justify-content: space-between; }
  .pd-specs th { width: 46%; }
}
@media (max-width: 560px) {
  .cat-hero-title { font-size: 1.4rem; }
  .cat-grid { grid-template-columns: 1fr; }
  .cat-card-foot { grid-template-columns: 1fr; }
  .pd { padding: 0; }
  .pd-sheet { border-radius: 0; min-height: 100%; }
  .pd-foot { grid-template-columns: 1fr; }
  .pd-head { padding: 16px; }
  .pd-body { padding: 4px 16px 8px; }
}

/* ============================================================
   KURDISH SCRIPT OVERRIDE — must stay last
   ------------------------------------------------------------
   Mikhak has no glyphs for ڕ ڵ ۆ ێ ڤ, so any element whose content
   is Kurdish keeps NRT regardless of the page language. Placed at
   the end of the sheet because these selectors tie on specificity
   with the .hero-tagline / .section-sub rules above, and source
   order decides the winner.
   ============================================================ */
[lang="ku"],
.cat-tab-ku,
.log-ku,
.product-title-ku {
  font-family: var(--font-nrt);
}