:root{
    --bg:#F5F6F7;
    --surface:#FFFFFF;
    --surface-2:#F2F2F2;
    --ink:#0F1620;
    --ink-soft:#3A3F47;
    --muted:#6B7280;
    --line:#DDE1E4;
    --line-strong:#C7CBD1;
    --brand:#4A7ABF;
    --brand-dark:#1A3E6F;
    --brand-light:#A8C6E9;
    --brand-soft:#EAF1FA;
    --brand-text:#1A3E6F;
    --accent:#F36523;
    --accent-dark:#C9450F;
    --accent-soft:#FDEBE0;
    --warn:#D9A02B;
    --warn-soft:#FBF1DD;
    --success:#2E9E5B;
    --success-soft:#E4F6EC;
    --error:#D14343;
    --error-soft:#FCEBEB;
    --shadow-soft:0 1px 2px rgba(15,22,32,0.05);
    --shadow-card:0 14px 34px rgba(15,22,32,0.10);
    --radius:14px;
    --grid-line: rgba(74,122,191,0.10);
    color-scheme: light;
  }

  html[data-theme="dark"]{
    --bg:#0B111D;
    --surface:#171E2B;
    --surface-2:#1D2635;
    --ink:#EBEBEB;
    --ink-soft:#C7CBD1;
    --muted:#8A93A6;
    --line:rgba(255,255,255,0.09);
    --line-strong:rgba(255,255,255,0.16);
    --brand:#5C8AD1;
    --brand-light:#A8C6E9;
    --brand-soft:rgba(74,122,191,0.16);
    --brand-text:#A8C6E9;
    --accent:#F36523;
    --accent-dark:#FBB03B;
    --accent-soft:rgba(243,101,35,0.15);
    --warn:#FBB03B;
    --warn-soft:rgba(251,176,59,0.14);
    --success:#3CBE7C;
    --success-soft:rgba(46,158,91,0.16);
    --error:#E6685F;
    --error-soft:rgba(209,67,67,0.16);
    --shadow-soft:0 1px 2px rgba(0,0,0,0.3);
    --shadow-card:0 18px 40px rgba(0,0,0,0.45);
    --grid-line: rgba(94,150,220,0.13);
    color-scheme: dark;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Vazirmatn', Tahoma, sans-serif;
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    line-height:1.6;
    transition: background-color .35s ease, color .35s ease;
  }

  /* elements that swap surface/border colors between day & night */
  header.site, .cat-strip, .trust, .finder-card, .cat-card, .product-card,
  .finder-field select, .hero-stat, .product-media,
  .product-plate, footer.site, .topbar{
    transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  /* branded keyboard-focus ring — only fires for :focus-visible so mouse/touch
     users see no change, and it stays consistent with the accent used elsewhere */
  a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--brand); outline-offset:2px; border-radius:6px;
  }
  .mono{ font-family:'JetBrains Mono', monospace; direction:ltr; unicode-bidi:isolate; }
  /* single-source logo image used by header, footer & hero watermark */
  .logo-img{
    background-image:url(../logo/mehran-logo.png);
    background-size:contain; background-repeat:no-repeat; background-position:center;
  }
  /* parked behind the text column only — must not reach into the finder-card's
     column or its circular art peeks out around the card's edges */
  .hero-watermark{
    position:absolute; inset-inline-start:8%; top:-8%;
    width:380px; height:380px; opacity:.22; pointer-events:none; z-index:0;
    transform:translate(50%, calc(0px + var(--wm-shift, 0px)));
    filter:drop-shadow(0 18px 50px rgba(26,62,111,0.35));
    will-change:transform;
  }
  html[data-theme="dark"] .hero-watermark{ opacity:.3; filter:drop-shadow(0 18px 60px rgba(0,0,0,0.6)); }
  @media (max-width:980px){
    .hero-watermark{
      width:300px; height:300px; opacity:.18; top:-4%; inset-inline-start:50%;
    }
    html[data-theme="dark"] .hero-watermark{ opacity:.26; }
  }
  .wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

  /* faint technical blueprint grid — grounds the hero in engineering/parts, not a generic blob */
  .blueprint{
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
      linear-gradient(rgba(74,122,191,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(74,122,191,0.04) 1px, transparent 1px);
    background-size: 34px 34px, 34px 34px, 8.5px 8.5px, 8.5px 8.5px;
  }
  /* ambient night-mode glow behind the hero — dormant in daylight, wakes up after dark */
  .hero-glow{
    position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .5s ease; z-index:0;
  }
  html[data-theme="dark"] .hero-glow{ opacity:1; }
  .hero-glow span{ position:absolute; border-radius:50%; filter:blur(70px); }
  .hero-glow .g1{ width:420px; height:420px; background:#4A7ABF; opacity:.28; top:-180px; inset-inline-end:-120px; }
  .hero-glow .g2{ width:380px; height:380px; background:#F36523; opacity:.16; bottom:-200px; inset-inline-start:-120px; }
  .hero-inner{ position:relative; z-index:1; }

  /* ---------- topbar ---------- */
  .topbar{ background:var(--brand-dark); color:#D8E4F2; font-size:12.5px; }
  .topbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:36px; }
  .topbar-links{ display:flex; gap:18px; align-items:center; }
  .topbar-links a:hover{ color:#fff; }
  .topbar-phone{ display:flex; align-items:center; gap:6px; font-weight:600; color:#fff; }
  .topbar-phone svg{ width:13px; height:13px; }

  /* ---------- header ---------- */
  header.site{ background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40; }
  .header-row{ display:flex; align-items:center; justify-content:space-between; height:78px; }
  .brand-block{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
  .brand-block img{ width:42px; height:42px; object-fit:contain; }
  .brand-name{ font-weight:800; font-size:16px; line-height:1.3; }
  .brand-tag{ font-size:10.5px; color:var(--muted); font-weight:500; }

  .header-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

  /* ---------- day / night toggle ---------- */
  .theme-toggle{
    position:relative; width:56px; height:30px; border-radius:999px; flex-shrink:0;
    background:var(--brand-soft); border:1px solid var(--line-strong); cursor:pointer;
    padding:0; transition:background-color .28s ease, border-color .28s ease;
  }
  html[data-theme="dark"] .theme-toggle{ background:rgba(94,150,220,0.18); }
  /* track icons: sun on start side, moon on end side; the inactive one fades */
  .theme-toggle .sun-ic,.theme-toggle .moon-ic{
    position:absolute; top:50%; transform:translateY(-50%); width:13px; height:13px;
    transition:opacity .28s ease;
  }
  .theme-toggle .sun-ic{ inset-inline-start:8px; color:var(--warn); opacity:0; }
  .theme-toggle .moon-ic{ inset-inline-end:8px; color:var(--brand-text); opacity:.6; }
  html[data-theme="dark"] .theme-toggle .sun-ic{ opacity:.6; }
  html[data-theme="dark"] .theme-toggle .moon-ic{ opacity:0; }
  /* knob: slides start→end, and its own icon swaps sun↔moon with the theme */
  .theme-toggle .knob{
    position:absolute; top:2px; inset-inline-start:2px; width:24px; height:24px; border-radius:50%;
    background:#FFFFFF; display:flex; align-items:center; justify-content:center;
    transition:inset-inline-start .28s cubic-bezier(.4,0,.2,1), background-color .28s ease;
    box-shadow:0 2px 6px rgba(15,22,32,0.25);
  }
  html[data-theme="dark"] .theme-toggle .knob{
    inset-inline-start:28px; background:#0B111D;
  }
  .theme-toggle .knob svg{ width:14px; height:14px; position:absolute; transition:opacity .2s ease, transform .28s ease; }
  .theme-toggle .k-sun{ color:#D9A02B; opacity:1; transform:rotate(0deg); }
  .theme-toggle .k-moon{ color:#FBB03B; opacity:0; transform:rotate(-90deg); }
  html[data-theme="dark"] .theme-toggle .k-sun{ opacity:0; transform:rotate(90deg); }
  html[data-theme="dark"] .theme-toggle .k-moon{ opacity:1; transform:rotate(0deg); }
  @media (prefers-reduced-motion: reduce){
    .theme-toggle .knob, .theme-toggle .knob svg{ transition:none; }
  }
  .head-btn{
    display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:9px;
    font-size:12.5px; font-weight:600; color:var(--ink-soft); position:relative;
  }
  .head-btn:hover{ background:var(--bg); }
  .head-btn svg{ width:19px; height:19px; }
  .cart-count{
    position:absolute; top:2px; left:6px; background:var(--accent); color:#fff;
    font-size:9.5px; font-weight:700; width:16px; height:16px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }

  /* ---------- category strip ---------- */
  .cat-strip{ background:var(--surface); border-bottom:1px solid var(--line); overflow-x:auto; }
  .cat-strip .wrap{ display:flex; gap:6px; padding:11px 24px; }
  .cat-chip{
    white-space:nowrap; font-size:12.5px; font-weight:600; color:var(--ink-soft);
    padding:7px 14px; border-radius:20px; flex-shrink:0;
  }
  .cat-chip:hover{ background:var(--brand-soft); color:var(--brand-text); }

  /* ---------- hero ---------- */
  .hero{ padding:52px 0 60px; position:relative; overflow:hidden; }
  /* gradient overlay sits above the blueprint grid without overwriting it */
  .hero::before{
    content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(ellipse 75% 65% at 28% 42%, rgba(74,122,191,0.09) 0%, transparent 70%),
      linear-gradient(135deg, rgba(232,241,251,0.75) 0%, transparent 50%, rgba(255,248,244,0.55) 100%);
  }
  html[data-theme="dark"] .hero::before{
    background:
      radial-gradient(ellipse 75% 65% at 28% 42%, rgba(74,122,191,0.22) 0%, transparent 70%),
      linear-gradient(135deg, rgba(12,24,40,0.85) 0%, transparent 55%, rgba(21,15,10,0.6) 100%);
  }
  .hero-inner{
    display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:center;
  }
  .hero-eyebrow{
    display:inline-flex; align-items:center; gap:7px; background:var(--brand-soft); color:var(--brand-text);
    font-size:12px; font-weight:700; padding:6px 13px; border-radius:20px; margin-bottom:18px;
  }
  .hero-eyebrow svg{ width:14px; height:14px; }
  .hero h1{ font-size:34px; font-weight:900; line-height:1.35; margin-bottom:14px; }
  .hero h1 span{
    background:linear-gradient(90deg, var(--brand), var(--accent), var(--brand));
    background-size:200% auto;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:shineSweep 5s ease-in-out infinite;
  }
  @keyframes shineSweep{
    0%{ background-position:0% center; }
    50%{ background-position:100% center; }
    100%{ background-position:0% center; }
  }
  @media (prefers-reduced-motion: reduce){
    .hero h1 span{ animation:none; }
  }
  .hero p.lead{ font-size:14.5px; color:var(--muted); max-width:420px; margin-bottom:26px; }

  .hero-stats{ display:flex; gap:10px; }
  .hero-stat{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:10px 14px; display:flex; flex-direction:column; gap:2px;
  }
  .hero-stat .num{ font-family:'JetBrains Mono', monospace; font-weight:700; font-size:16px; color:var(--brand-text); }
  .hero-stat .lbl{ font-size:10.5px; color:var(--muted); }

  /* vehicle finder card — the real hero: this is the page's single job */
  .finder-card{
    background:var(--surface); border-radius:20px; padding:28px;
    border:1px solid var(--line); position:relative; box-shadow:var(--shadow-card);
  }
  .finder-card::before{
    content:''; position:absolute; inset:-8px; border-radius:24px;
    border:1.5px dashed rgba(74,122,191,0.25); pointer-events:none;
  }
  .finder-top{ display:flex; align-items:center; gap:9px; margin-bottom:4px; }
  .finder-plate{
    font-family:'JetBrains Mono', monospace; font-size:10.5px; font-weight:700; color:var(--brand-text);
    background:var(--brand-soft); border:1px solid rgba(74,122,191,0.25); padding:3px 9px; border-radius:6px;
  }
  .finder-title{ font-size:15.5px; font-weight:700; margin-bottom:4px; }
  .finder-desc{ font-size:12.5px; color:var(--muted); margin-bottom:20px; }

  .finder-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:14px; }
  .finder-field label{ font-size:11.5px; font-weight:600; color:var(--ink-soft); display:block; margin-bottom:6px; }
  .finder-field select{
    width:100%; border:1.5px solid var(--line-strong); border-radius:9px; padding:10px 12px;
    font-family:inherit; font-size:13px; color:var(--ink); background:var(--bg); outline:none;
  }
  .finder-field select:focus{ border-color:var(--brand); }
  .btn-finder{
    width:100%; background:var(--accent); color:#fff; border:none; border-radius:10px;
    padding:13px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit;
    display:flex; align-items:center; justify-content:center; gap:8px;
  }
  .btn-finder:hover{ background:var(--accent-dark); }
  .btn-finder svg{ width:16px; height:16px; }
  .finder-alt{ text-align:center; font-size:12px; color:var(--muted); margin-top:12px; }
  .finder-alt a{ color:var(--brand-text); font-weight:600; }

  /* ---------- trust strip ---------- */
  .trust{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .trust .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
  .trust-item{
    display:flex; align-items:center; gap:12px; padding:20px 18px;
    border-inline-start:1px solid var(--line);
  }
  .trust-item:first-child{ border-inline-start:none; }
  .trust-icon{
    width:38px; height:38px; border-radius:9px; background:var(--brand-soft); color:var(--brand-text);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .trust-icon svg{ width:19px; height:19px; }
  .trust-title{ font-size:12.5px; font-weight:700; }
  .trust-desc{ font-size:11px; color:var(--muted); margin-top:1px; }

  /* ---------- model quick-catalog (browse by vehicle) ---------- */
  .model-strip{ background:var(--surface-2); border-bottom:1px solid var(--line); padding:52px 0 56px; position:relative; overflow:hidden; }
  .strip-watermark{
    position:absolute; inset-inline-start:-120px; top:50%; transform:translateY(-50%) rotate(8deg);
    width:480px; height:480px; opacity:.07; pointer-events:none; z-index:0;
  }
  html[data-theme="dark"] .strip-watermark{ opacity:.10; }
  .model-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .model-card{
    background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden;
    display:flex; flex-direction:column; box-shadow:var(--shadow-soft);
    opacity:0; transform:translateY(14px);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .model-card.in-view{ animation:cardIn .5s ease forwards; }
  .model-card:hover{ transform:translateY(-4px) !important; border-color:var(--accent); box-shadow:var(--shadow-card); }
  /* unified "showroom stage": every car sits on the same light lightbox panel
     with a brand-tinted floor glow, so mixed image backgrounds read as one system */
  .m-photo{
    position:relative; height:160px; padding:16px 22px;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    background:radial-gradient(135% 115% at 50% 0%, #ffffff 0%, #f1f5fa 58%, #e7edf4 100%);
    border-bottom:1px solid var(--line);
  }
  .m-photo::before{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(78% 52% at 50% 122%, rgba(74,122,191,0.26) 0%, transparent 72%),
      repeating-linear-gradient(90deg, transparent 0 27px, rgba(26,62,111,0.05) 27px 28px);
  }
  .m-photo img{
    position:relative; z-index:1; max-width:84%; max-height:122px; width:auto; height:auto;
    object-fit:contain; filter:drop-shadow(0 16px 13px rgba(15,22,32,0.26));
    transition:transform .35s cubic-bezier(.2,.7,.3,1);
  }
  .model-card:hover .m-photo img{ transform:translateY(-4px) scale(1.05); }
  .m-info{ padding:12px 18px 12px; }
  .m-name{ font-size:15px; font-weight:800; margin-bottom:8px; }
  .m-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .m-plate{
    font-family:'JetBrains Mono', monospace; direction:ltr; unicode-bidi:isolate; font-size:10.5px; font-weight:600;
    color:var(--muted); background:var(--bg); border:1px solid var(--line-strong); padding:2.5px 9px; border-radius:6px;
  }
  .m-count{ font-size:11.5px; font-weight:700; color:var(--accent-dark); }
  html[data-theme="dark"] .m-count{ color:var(--accent); }
  .m-cta{
    margin-top:auto; border-top:1px solid var(--line); padding:11px 18px;
    display:flex; align-items:center; justify-content:space-between;
    font-size:12.5px; font-weight:700; color:var(--brand-text);
    transition:background-color .2s ease;
  }
  .m-cta svg{ width:15px; height:15px; transition:transform .2s ease; }
  .model-card:hover .m-cta{ background:var(--brand-soft); }
  .model-card:hover .m-cta svg{ transform:translateX(-4px); }

  /* car illustration coloring — odd cards white body, even cards black */
  .car-shadow{ fill:rgba(15,22,32,0.14); }
  html[data-theme="dark"] .car-shadow{ fill:rgba(0,0,0,0.5); }
  .car-body{ fill:url(#gCarW); stroke:#8B95A5; stroke-width:1.2; }
  .model-card:nth-child(even) .car-body{ fill:url(#gCarB); stroke:#6E7A8E; }
  html[data-theme="dark"] .car-body{ stroke:#5F6B7E; }
  html[data-theme="dark"] .model-card:nth-child(even) .car-body{ stroke:#9AA6BC; }
  .car-glass{ fill:url(#gGlass); stroke:rgba(46,60,80,0.45); stroke-width:1; }
  .car-line{ stroke:rgba(70,82,100,0.5); stroke-width:1.2; fill:none; }
  .model-card:nth-child(even) .car-line{ stroke:rgba(205,215,230,0.32); }
  .car-handle{ fill:rgba(70,82,100,0.5); }
  .model-card:nth-child(even) .car-handle{ fill:rgba(205,215,230,0.4); }
  .car-head{ fill:#FFC53D; }
  .car-tail{ fill:#E5484D; }
  .car-wheel{ fill:#161B24; stroke:#3E4756; stroke-width:1; }
  .car-rim{ fill:url(#gRim); }
  .car-hub{ fill:#39424F; }

  @keyframes cardIn{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* ---------- section heading ---------- */
  .section{ padding:52px 0; }
  .section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:26px; }
  .section-title{ font-size:21px; font-weight:800; }
  .section-desc{ font-size:12.5px; color:var(--muted); margin-top:4px; }
  .section-link{ font-size:12.5px; font-weight:700; color:var(--brand-text); display:flex; align-items:center; gap:5px; flex-shrink:0; }
  .section-link svg{ width:14px; height:14px; }

  /* ---------- part-type catalog ---------- */
  .pt-section{ padding:52px 0; border-top:1px solid var(--line); }
  .pt-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
  .pt-tab{
    padding:7px 16px; border-radius:20px; font-size:12.5px; font-weight:700; cursor:pointer;
    border:1.5px solid var(--line-strong); color:var(--ink-soft); background:none;
    transition:all .18s ease; font-family:inherit;
  }
  .pt-tab.active{ background:var(--brand-dark); color:#fff; border-color:var(--brand-dark); }
  .pt-tab:hover:not(.active){ border-color:var(--brand); color:var(--brand-text); }
  .pt-grid{
    display:grid; grid-template-columns:repeat(6,1fr); gap:10px;
  }
  .pt-card{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    padding:14px 12px; cursor:pointer; text-align:center;
    transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    display:flex; flex-direction:column; align-items:center; gap:6px;
  }
  .pt-card:hover{ transform:translateY(-3px); border-color:var(--brand); box-shadow:var(--shadow-card); }
  .pt-card.hidden{ display:none; }
  .pt-icon{
    width:40px; height:40px; border-radius:10px; background:var(--brand-soft);
    color:var(--brand-text); display:flex; align-items:center; justify-content:center;
  }
  .pt-icon svg{ width:20px; height:20px; }
  .pt-name{ font-size:12px; font-weight:700; color:var(--ink); line-height:1.3; }
  .pt-count{ font-size:10.5px; color:var(--muted); font-family:'JetBrains Mono',monospace; }
  .pt-badge{
    font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:8px;
    background:var(--accent-soft); color:var(--accent-dark);
  }
  .pt-loading{ text-align:center; color:var(--muted); font-size:13px; padding:32px 0; }
  @media(max-width:900px){ .pt-grid{ grid-template-columns:repeat(4,1fr); } }
  @media(max-width:600px){ .pt-grid{ grid-template-columns:repeat(3,1fr); } }

  /* ---------- categories grid ---------- */
  .cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  .cat-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:20px 16px; text-align:center; box-shadow:var(--shadow-soft);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .35s ease;
    opacity:0; transform:translateY(14px);
  }
  .cat-card.in-view{ animation:cardIn .5s ease forwards; }
  .cat-card:hover{ transform:translateY(-4px); border-color:var(--brand); box-shadow:var(--shadow-card); }
  /* shared "stage" for both photo and icon categories — same frame across all cards */
  .cat-card .cat-img,
  .cat-card .icon{
    width:100%; height:96px; margin:0 auto 12px; border-radius:11px;
    background:radial-gradient(120% 130% at 50% 0%, #ffffff 0%, #f1f5fa 60%, #e7edf4 100%);
    box-shadow:inset 0 0 0 1px rgba(26,62,111,0.06);
  }
  .cat-card .cat-img{ object-fit:contain; padding:11px; transition:transform .25s ease; }
  .cat-card .icon{
    display:flex; align-items:center; justify-content:center; color:var(--brand-text);
  }
  .cat-card .icon svg{ width:36px; height:36px; }
  .cat-card:hover .cat-img{ transform:scale(1.05); }
  .cat-card .name{ font-size:12.5px; font-weight:700; }
  .cat-card .count{ font-size:10.5px; color:var(--muted); margin-top:3px; font-family:'JetBrains Mono', monospace; direction:ltr; unicode-bidi:isolate;}

  /* ---------- product cards ---------- */
  .product-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
  .product-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-soft);
    transition:transform .18s ease, box-shadow .18s ease, background-color .35s ease, border-color .35s ease;
    opacity:0; transform:translateY(14px);
  }
  .product-card.in-view{ animation:cardIn .5s ease forwards; }
  .product-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
  /* same light "stage" as the model & category cards, so a bare placeholder icon
     and a real product photo read as one consistent system across the site */
  .product-media{
    aspect-ratio:1/0.85; box-sizing:border-box; padding:16px; position:relative;
    background:radial-gradient(120% 130% at 50% 0%, #ffffff 0%, #f1f5fa 60%, #e7edf4 100%);
    box-shadow:inset 0 0 0 1px rgba(26,62,111,0.06);
    display:flex; align-items:center; justify-content:center; color:var(--brand-text);
  }
  .product-media img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
  .product-media svg{ width:36px; height:36px; opacity:.55; }
  .product-tag{
    position:absolute; top:10px; right:10px; background:var(--success-soft); color:var(--success);
    font-size:10px; font-weight:700; padding:3px 8px; border-radius:6px;
  }
  .product-body{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
  .product-compat{ font-size:10.5px; color:var(--muted); }
  .product-name{ font-size:13px; font-weight:700; line-height:1.4; min-height:37px; }
  .product-plate{
    align-self:flex-start; font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--ink-soft);
    background:var(--bg); border:1px solid var(--line); padding:2px 8px; border-radius:5px;
  }
  .product-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:6px; }
  .product-price{ font-family:'JetBrains Mono', monospace; font-weight:700; font-size:13.5px; }
  .product-price span{ font-size:10px; color:var(--muted); font-family:'Vazirmatn'; margin-inline-start:2px; }
  .btn-add{
    width:32px; height:32px; border-radius:8px; background:var(--accent); color:#fff; border:none;
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
  .btn-add:hover{ background:var(--accent-dark); }
  .btn-add svg{ width:15px; height:15px; }
  .btn-inquire{ background:var(--brand); }
  .btn-inquire:hover{ background:var(--brand-dark); }

  /* ---------- promo banner ---------- */
  .promo{
    background:linear-gradient(90deg, var(--accent-dark), var(--accent));
    border-radius:20px; padding:34px 38px; display:flex; align-items:center; justify-content:space-between;
    color:#fff; gap:20px;
  }
  .promo-title{ font-size:20px; font-weight:800; margin-bottom:6px; }
  .promo-desc{ font-size:13px; opacity:.92; }
  .promo-code{
    font-family:'JetBrains Mono', monospace; font-weight:700; background:rgba(255,255,255,0.18);
    border:1px dashed rgba(255,255,255,0.5); padding:10px 18px; border-radius:10px; font-size:15px; flex-shrink:0;
  }

  /* ---------- why us ---------- */
  .why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .why-card{ padding:6px; }
  .why-icon{
    width:48px; height:48px; border-radius:12px; background:var(--brand-dark); color:#fff;
    display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  }
  .why-icon svg{ width:23px; height:23px; }
  .why-title{ font-size:14.5px; font-weight:700; margin-bottom:6px; }
  .why-desc{ font-size:12.5px; color:var(--muted); line-height:1.7; }

  /* ---------- interactive: results / cart drawer / toast / modal ---------- */
  /* main tab nav */
  .main-nav-bar{
    background:var(--surface); border-bottom:1px solid var(--line);
    position:sticky; top:78px; z-index:35;
    transition:background-color .35s ease, border-color .35s ease;
  }
  .main-nav-tabs{ display:flex; gap:2px; padding:10px 0 8px; }
  /* top search strip */
  .top-search-row{ padding:0 0 12px; }
  .top-search-wrap{
    position:relative; display:flex; gap:8px; align-items:center;
  }
  .top-search-input{
    flex:1; border:1.5px solid var(--line-strong); border-radius:10px;
    padding:11px 44px 11px 16px; font-family:inherit; font-size:13.5px;
    color:var(--ink); background:var(--bg); outline:none;
    transition:border-color .15s ease, background .15s ease;
    min-width:0;
  }
  .top-search-input:focus{ border-color:var(--brand); background:var(--surface); }
  .top-search-icon{
    position:absolute; inset-inline-end:118px; top:50%; transform:translateY(-50%);
    width:16px; height:16px; color:var(--muted); pointer-events:none;
  }
  .top-search-btn{
    padding:0 20px; height:44px; background:var(--brand-dark); color:#fff;
    border:none; border-radius:10px; font-size:13px; font-weight:700;
    cursor:pointer; font-family:inherit; flex-shrink:0; white-space:nowrap;
    transition:background .15s ease;
  }
  .top-search-btn:hover{ background:var(--brand); }
  /* autocomplete dropdown */
  .search-ac{
    position:absolute; top:calc(100% + 6px); right:0; left:0;
    background:var(--surface); border:1px solid var(--line-strong);
    border-radius:12px; box-shadow:var(--shadow-card); z-index:200;
    display:none; overflow:hidden; max-height:340px; overflow-y:auto;
  }
  .search-ac.open{ display:block; }
  .search-ac-group{ padding:6px 0; border-bottom:1px solid var(--line); }
  .search-ac-group:last-child{ border-bottom:none; }
  .search-ac-label{
    font-size:10.5px; font-weight:700; color:var(--muted); letter-spacing:.04em;
    padding:4px 14px; text-transform:uppercase;
  }
  .search-ac-item{
    display:flex; align-items:center; gap:10px; padding:8px 14px;
    cursor:pointer; font-size:13px; color:var(--ink);
    transition:background .1s ease;
  }
  .search-ac-item:hover, .search-ac-item.focused{ background:var(--brand-soft); }
  .search-ac-chip{
    font-size:10px; font-weight:700; padding:2px 7px; border-radius:5px;
    flex-shrink:0;
  }
  .chip-code{ background:var(--warn-soft); color:var(--warn); }
  .chip-model{ background:var(--brand-soft); color:var(--brand-text); }
  .chip-type{ background:var(--success-soft); color:var(--success); }
  .chip-name{ background:var(--surface-2); color:var(--muted); }
  .search-ac-text{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .search-ac-sub{ font-size:10.5px; color:var(--muted); flex-shrink:0; }
  @media(max-width:600px){
    .top-search-icon{ inset-inline-end:14px; }
    .top-search-btn{ display:none; }
  }
  .main-nav-tab{
    padding:9px 22px; border-radius:8px; font-size:13.5px; font-weight:700;
    color:var(--muted); border:none; background:none; cursor:pointer;
    font-family:inherit; transition:all .18s ease; position:relative;
  }
  .main-nav-tab:hover{ color:var(--ink); background:var(--bg); }
  .main-nav-tab.active{ color:var(--brand-text); background:var(--brand-soft); }
  .main-nav-tab .tab-badge{
    position:absolute; top:5px; left:8px; background:var(--accent); color:#fff;
    font-size:9px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
    display:none; align-items:center; justify-content:center; padding:0 4px;
  }
  .main-panel{ display:none; }
  .main-panel.active{ display:block; }
  .results-clear{
    font-size:12px; font-weight:700; color:var(--error); background:var(--error-soft);
    border:none; border-radius:8px; padding:7px 14px; cursor:pointer; font-family:inherit;
  }
  .results-empty{
    text-align:center; color:var(--muted); font-size:13.5px; padding:40px 0;
    border:1.5px dashed var(--line-strong); border-radius:var(--radius);
  }

  .drawer-backdrop{
    position:fixed; inset:0; background:rgba(10,15,25,0.55); z-index:70;
    opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .drawer-backdrop.open{ opacity:1; pointer-events:auto; }
  .cart-drawer{
    position:fixed; top:0; bottom:0; inset-inline-start:0; width:min(380px, 92vw); z-index:71;
    background:var(--surface); box-shadow:var(--shadow-card); display:flex; flex-direction:column;
    transform:translateX(110%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  html[dir="rtl"] .cart-drawer{ transform:translateX(110%); }
  .cart-drawer.open{ transform:translateX(0); }
  .drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); }
  .drawer-title{ font-size:15px; font-weight:800; }
  .drawer-close{ background:none; border:none; cursor:pointer; color:var(--muted); padding:6px; }
  .drawer-close svg{ width:18px; height:18px; }
  .drawer-body{ flex:1; overflow-y:auto; padding:14px 20px; display:flex; flex-direction:column; gap:12px; }
  .cart-empty{ text-align:center; color:var(--muted); font-size:13px; padding:40px 0; }
  .cart-item{ display:flex; gap:12px; align-items:center; border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
  .cart-item-info{ flex:1; min-width:0; }
  .cart-item-name{ font-size:12.5px; font-weight:700; margin-bottom:3px; }
  .cart-item-price{ font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--muted); direction:ltr; unicode-bidi:isolate; }
  .qty-ctrl{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .qty-btn{
    width:26px; height:26px; border-radius:7px; border:1px solid var(--line-strong); background:var(--bg);
    cursor:pointer; font-family:inherit; font-size:15px; font-weight:700; color:var(--ink-soft);
    display:flex; align-items:center; justify-content:center; line-height:1;
  }
  .qty-btn:hover{ border-color:var(--brand); color:var(--brand-text); }
  .qty-num{ font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:700; min-width:18px; text-align:center; }
  .cart-item-remove{
    background:none; border:none; cursor:pointer; color:var(--muted); padding:4px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; border-radius:6px;
  }
  .cart-item-remove:hover{ color:var(--error); background:var(--error-soft); }
  .cart-item-remove svg{ width:15px; height:15px; }
  .drawer-foot{ border-top:1px solid var(--line); padding:16px 20px; display:flex; flex-direction:column; gap:10px; }
  .cart-total-row{ display:flex; justify-content:space-between; font-size:13.5px; font-weight:700; }
  .cart-total-num{ font-family:'JetBrains Mono', monospace; }
  .btn-checkout{
    width:100%; background:var(--accent); color:#fff; border:none; border-radius:10px;
    padding:13px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit;
  }
  .btn-checkout:hover{ background:var(--accent-dark); }
  .btn-proforma{
    width:100%; background:none; border:1.5px solid var(--line-strong); color:var(--ink-soft);
    border-radius:10px; padding:11px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit;
    display:flex; align-items:center; justify-content:center; gap:7px;
  }
  .btn-proforma:hover{ border-color:var(--brand); color:var(--brand-text); }
  .btn-proforma svg{ width:15px; height:15px; }

  .toast{
    position:fixed; bottom:24px; inset-inline-start:50%; transform:translate(50%, 20px); z-index:90;
    background:var(--ink); color:var(--bg); font-size:13px; font-weight:600;
    padding:12px 22px; border-radius:12px; box-shadow:var(--shadow-card);
    opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
    max-width:88vw; text-align:center;
  }
  .toast.show{ opacity:1; transform:translate(50%, 0); }

  .modal-backdrop{
    position:fixed; inset:0; background:rgba(10,15,25,0.55); z-index:80;
    display:none; align-items:center; justify-content:center; padding:20px;
  }
  .modal-backdrop.open{ display:flex; }
  .modal{
    background:var(--surface); border-radius:18px; box-shadow:var(--shadow-card);
    width:min(430px, 100%); padding:26px; position:relative;
  }
  .modal-title{ font-size:16px; font-weight:800; margin-bottom:6px; }
  .modal-desc{ font-size:12.5px; color:var(--muted); margin-bottom:18px; }
  .modal-field{ margin-bottom:12px; }
  .modal-field label{ font-size:11.5px; font-weight:600; color:var(--ink-soft); display:block; margin-bottom:6px; }
  .modal-field input{
    width:100%; border:1.5px solid var(--line-strong); border-radius:9px; padding:10px 12px;
    font-family:inherit; font-size:13px; color:var(--ink); background:var(--bg); outline:none;
  }
  .modal-field input:focus{ border-color:var(--brand); }
  .modal-actions{ display:flex; gap:10px; margin-top:16px; }
  .btn-modal-primary{
    flex:1; background:var(--brand-dark); color:#fff; border:none; border-radius:10px;
    padding:12px; font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit;
  }
  .btn-modal-primary:hover{ background:var(--brand); }
  .btn-modal-ghost{
    background:none; border:1.5px solid var(--line-strong); color:var(--ink-soft); border-radius:10px;
    padding:12px 18px; font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit;
  }
  .btn-modal-ghost:hover{ border-color:var(--brand); color:var(--brand-text); }
  /* close X on product modal */
  .modal-x{
    background:var(--bg); border:1.5px solid var(--line); border-radius:8px; padding:5px;
    cursor:pointer; color:var(--muted); line-height:0; flex-shrink:0;
  }
  .modal-x svg{ width:15px; height:15px; display:block; }
  .modal-x:hover{ color:var(--ink); border-color:var(--line-strong); }
  .pd-topbar{ display:flex; align-items:center; justify-content:flex-start; margin-bottom:14px; }
  /* product detail modal body */
  .pd-media{
    background:var(--brand-soft); border-radius:12px; height:140px; display:flex;
    align-items:center; justify-content:center; margin-bottom:16px; position:relative;
  }
  .pd-media svg{ width:52px; height:52px; color:var(--brand-text); opacity:.6; }
  .pd-media img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
  .pd-badge-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .pd-name{ font-size:17px; font-weight:800; line-height:1.4; margin-bottom:6px; }
  .pd-compat{ font-size:12px; color:var(--muted); margin-bottom:14px; }
  .pd-price-row{ display:flex; align-items:baseline; gap:8px; margin-bottom:18px; }
  .pd-price{ font-size:22px; font-weight:800; color:var(--ink); }
  .pd-price::after{ content:' ریال'; font-size:12px; font-weight:500; color:var(--muted); }
  .pd-price.no-price::after{ content:''; }
  .pd-unit{ font-size:11.5px; color:var(--muted); }
  .pd-actions{ display:flex; gap:10px; }
  .pd-actions .btn-modal-primary{ display:flex; align-items:center; justify-content:center; gap:7px; }
  .pd-actions .btn-modal-primary svg{ width:16px; height:16px; }

  /* ---------- checkout ---------- */
  .co-summary{
    background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px 14px;
    margin-bottom:16px; max-height:160px; overflow-y:auto;
  }
  .co-row{ display:flex; justify-content:space-between; gap:10px; font-size:12px; padding:5px 0; border-bottom:1px dashed var(--line); }
  .co-row:last-child{ border-bottom:none; }
  .co-row-name{ color:var(--ink-soft); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .co-row-val{ font-family:'JetBrains Mono', monospace; color:var(--ink); flex-shrink:0; }
  .co-total{
    display:flex; justify-content:space-between; font-size:14px; font-weight:800;
    padding-top:10px; margin-top:2px; border-top:1.5px solid var(--line-strong);
  }
  .co-total-num{ font-family:'JetBrains Mono', monospace; }
  .co-pay-options{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
  .co-pay-opt{
    display:flex; align-items:center; gap:10px; border:1.5px solid var(--line-strong); border-radius:10px;
    padding:11px 13px; cursor:pointer; font-size:12.5px; transition:border-color .15s ease;
  }
  .co-pay-opt.selected{ border-color:var(--brand); background:var(--brand-soft); }
  .co-pay-opt input{ accent-color:var(--brand); width:16px; height:16px; flex-shrink:0; }
  .co-pay-opt-title{ font-weight:700; color:var(--ink); }
  .co-pay-opt-desc{ font-size:11px; color:var(--muted); margin-top:2px; }
  .co-pay-opt.disabled{ opacity:.55; cursor:not-allowed; }
  .co-pay-badge{
    font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:8px;
    background:var(--warn-soft); color:var(--warn); margin-inline-start:auto; flex-shrink:0;
  }
  /* order success */
  .os-icon{
    width:64px; height:64px; border-radius:50%; background:var(--success-soft); color:var(--success);
    display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
  }
  .os-icon svg{ width:32px; height:32px; }
  .os-title{ text-align:center; font-size:17px; font-weight:800; margin-bottom:6px; }
  .os-desc{ text-align:center; font-size:12.5px; color:var(--muted); margin-bottom:18px; }
  .os-track-box{
    background:var(--bg); border:1.5px dashed var(--line-strong); border-radius:12px;
    padding:14px; text-align:center; margin-bottom:18px;
  }
  .os-track-label{ font-size:11px; color:var(--muted); margin-bottom:6px; }
  .os-track-code{
    font-family:'JetBrains Mono', monospace; font-size:19px; font-weight:800; color:var(--brand-text);
    direction:ltr; letter-spacing:1px;
  }
  .os-copy-btn{
    margin-top:8px; background:none; border:1px solid var(--line-strong); border-radius:8px;
    padding:6px 12px; font-size:11px; font-weight:600; color:var(--ink-soft); cursor:pointer; font-family:inherit;
  }
  .os-copy-btn:hover{ border-color:var(--brand); color:var(--brand-text); }

  /* ---------- admin contact FAB ---------- */
  .admin-fab{
    position:fixed; bottom:22px; inset-inline-start:22px; z-index:60;
    width:54px; height:54px; border-radius:50%; background:#25D366; color:#fff;
    display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(37,211,102,0.4);
    cursor:pointer; border:none; transition:transform .18s ease;
  }
  .admin-fab:hover{ transform:scale(1.08); }
  .admin-fab svg{ width:27px; height:27px; }
  .admin-fab-pulse{
    position:absolute; inset:0; border-radius:50%; background:#25D366; opacity:.5;
    animation:fabPulse 2.2s ease-out infinite;
  }
  @keyframes fabPulse{ 0%{ transform:scale(1); opacity:.5; } 100%{ transform:scale(1.7); opacity:0; } }
  @media(max-width:640px){ .admin-fab{ width:48px; height:48px; bottom:16px; inset-inline-start:16px; } .admin-fab svg{ width:23px; height:23px; } }

  /* ---------- in-site support chat ---------- */
  .chat-fab{
    position:fixed; bottom:86px; inset-inline-start:22px; z-index:60;
    width:54px; height:54px; border-radius:50%; background:var(--brand-dark); color:#fff;
    display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(26,62,111,0.4);
    cursor:pointer; border:none; transition:transform .18s ease;
  }
  .chat-fab:hover{ transform:scale(1.08); }
  .chat-fab svg{ width:25px; height:25px; }
  .chat-fab-badge{
    position:absolute; top:-2px; inset-inline-end:-2px; background:var(--accent); color:#fff;
    font-size:10.5px; font-weight:800; min-width:19px; height:19px; border-radius:10px;
    display:none; align-items:center; justify-content:center; padding:0 4px; border:2px solid var(--bg);
  }
  @media(max-width:640px){ .chat-fab{ width:48px; height:48px; bottom:72px; inset-inline-start:16px; } .chat-fab svg{ width:21px; height:21px; } }

  .chat-panel{
    position:fixed; bottom:24px; inset-inline-start:22px; z-index:75; width:340px; max-width:90vw; height:460px;
    max-height:75vh; background:var(--surface); border-radius:16px; box-shadow:var(--shadow-card);
    display:flex; flex-direction:column; overflow:hidden; transform:translateY(16px) scale(.97); opacity:0;
    pointer-events:none; transition:transform .2s ease, opacity .2s ease; border:1px solid var(--line);
  }
  .chat-panel.open{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
  @media(max-width:640px){ .chat-panel{ inset-inline-start:16px; bottom:16px; width:calc(100vw - 32px); } }
  .chat-head{ background:var(--brand-dark); color:#fff; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
  .chat-head-title{ font-size:13.5px; font-weight:800; display:flex; align-items:center; gap:8px; }
  .chat-head-title .dot{ width:8px; height:8px; border-radius:50%; background:#3CBE7C; }
  .chat-head-sub{ font-size:10.5px; color:#C8D6EA; margin-top:2px; }
  .chat-close{ background:none; border:none; color:#fff; cursor:pointer; opacity:.8; padding:4px; }
  .chat-close:hover{ opacity:1; }
  .chat-close svg{ width:17px; height:17px; }
  .chat-body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:9px; background:var(--bg); }
  .chat-msg{ max-width:80%; padding:9px 12px; border-radius:12px; font-size:12.5px; line-height:1.6; }
  .chat-msg.customer{ align-self:flex-end; background:var(--brand); color:#fff; border-bottom-left-radius:4px; }
  html[dir="rtl"] .chat-msg.customer{ border-bottom-left-radius:12px; border-bottom-right-radius:4px; }
  .chat-msg.admin{ align-self:flex-start; background:var(--surface); border:1px solid var(--line); color:var(--ink); border-bottom-right-radius:4px; }
  html[dir="rtl"] .chat-msg.admin{ border-bottom-right-radius:12px; border-bottom-left-radius:4px; }
  .chat-msg-time{ font-size:9.5px; opacity:.65; margin-top:4px; display:block; }
  .chat-empty{ text-align:center; color:var(--muted); font-size:12px; padding:30px 10px; }
  .chat-start{ padding:14px; display:flex; flex-direction:column; gap:10px; }
  .chat-start input{ border:1.5px solid var(--line-strong); border-radius:9px; padding:10px 12px; background:var(--bg); color:var(--ink); outline:none; font-family:inherit; font-size:12.5px; }
  .chat-start input:focus{ border-color:var(--brand); }
  .chat-start button{ background:var(--brand-dark); color:#fff; border:none; border-radius:9px; padding:10px; font-weight:700; font-size:12.5px; cursor:pointer; font-family:inherit; }
  .chat-foot{ border-top:1px solid var(--line); padding:10px; display:flex; gap:8px; flex-shrink:0; }
  .chat-foot input{ flex:1; border:1.5px solid var(--line-strong); border-radius:20px; padding:9px 14px; background:var(--bg); color:var(--ink); outline:none; font-family:inherit; font-size:12.5px; }
  .chat-foot input:focus{ border-color:var(--brand); }
  .chat-foot button{ width:36px; height:36px; border-radius:50%; background:var(--brand-dark); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .chat-foot button svg{ width:16px; height:16px; }

  /* ---------- auth ---------- */
  .auth-tabs{ display:flex; border-bottom:1.5px solid var(--line); margin-bottom:20px; }
  .auth-tab{ flex:1; padding:10px; text-align:center; font-size:13px; font-weight:700; cursor:pointer; color:var(--muted); border-bottom:2.5px solid transparent; margin-bottom:-1.5px; }
  .auth-tab.active{ color:var(--brand-text); border-color:var(--accent); }
  .auth-view{ display:none; }
  .auth-view.active{ display:block; }
  .auth-switch{ text-align:center; margin-top:14px; font-size:12px; color:var(--muted); }
  .auth-switch a{ color:var(--brand-text); font-weight:700; cursor:pointer; }
  .auth-error{ background:#FEE2E2; color:#991B1B; border-radius:8px; padding:8px 12px; font-size:12px; margin-bottom:12px; display:none; }
  .auth-error.show{ display:block; }
  .pass-input-wrap{ position:relative; width:100%; }
  .pass-input-wrap input{ padding-inline-end:40px !important; }
  .pass-toggle-btn{ position:absolute; inset-inline-end:8px; top:50%; transform:translateY(-50%); background:none !important; border:none !important; width:auto !important; padding:6px !important; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .pass-toggle-btn:hover{ color:var(--ink); }
  .pass-toggle-btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; }

  /* account dropdown in header */
  .head-btn{ position:relative; }
  .account-drop{ position:absolute; top:calc(100% + 8px); left:0; background:var(--surface); border:1.5px solid var(--line-strong); border-radius:12px; min-width:170px; box-shadow:0 8px 24px rgba(0,0,0,.14); display:none; z-index:60; overflow:hidden; }
  html[dir="rtl"] .account-drop, .head-btn:last-of-type .account-drop{ left:auto; right:0; }
  .account-drop.open{ display:block; }
  .account-drop-header{ padding:10px 14px; background:var(--brand-dark); color:#C7D5E6; font-size:12px; }
  .account-drop-header strong{ display:block; color:#fff; font-size:13px; }
  .account-drop-item{ display:flex; align-items:center; gap:8px; padding:10px 14px; font-size:13px; color:var(--ink); cursor:pointer; border-top:1px solid var(--line); }
  .account-drop-item:hover{ background:var(--surface-alt,var(--line)); }
  .account-drop-item svg{ width:15px; height:15px; flex-shrink:0; }
  #accountBtn.logged-in .head-label::after{ content:'▾'; margin-right:3px; font-size:10px; }
  /* profile setup step indicator */
  .setup-step{ font-size:11px; color:var(--muted); margin-bottom:16px; display:flex; align-items:center; gap:6px; }
  .setup-step span{ background:var(--brand-dark); color:#fff; border-radius:50%; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; }

  /* ---------- footer ---------- */
  footer{ position:relative; overflow:hidden; }
  .footer-watermark{
    position:absolute; inset-inline-end:-100px; bottom:-120px; width:420px; height:420px;
    opacity:.08; pointer-events:none; z-index:0; transform:rotate(-6deg);
  }
  footer .wrap{ position:relative; z-index:1; }
  footer.site{ background:var(--brand-dark); color:#C7D5E6; margin-top:20px; }
  .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:32px; padding:52px 0 30px; }
  .footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
  .footer-brand img{ width:34px; height:34px; }
  .footer-brand-name{ color:#fff; font-weight:800; font-size:14.5px; }
  .footer-desc{ font-size:12px; line-height:1.8; color:#9FB4CC; max-width:280px; }
  .footer-col-title{ color:#fff; font-size:13px; font-weight:700; margin-bottom:14px; }
  .footer-links{ display:flex; flex-direction:column; gap:10px; }
  .footer-links a{ font-size:12.5px; color:#AFC1D8; }
  .footer-links a:hover{ color:#fff; }
  .footer-contact{ font-size:12.5px; color:#AFC1D8; display:flex; align-items:center; gap:8px; margin-bottom:11px; }
  .footer-contact svg{ width:15px; height:15px; flex-shrink:0; }
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,0.12); padding:18px 0; display:flex;
    align-items:center; justify-content:space-between; font-size:11.5px; color:#8CA2BC;
  }

  @media (max-width:980px){
    .hero-inner{ grid-template-columns:1fr; }
    .trust .wrap{ grid-template-columns:repeat(2,1fr); }
    .cat-grid{ grid-template-columns:repeat(2,1fr); }
    .model-grid{ grid-template-columns:repeat(2,1fr); }
    .product-grid{ grid-template-columns:repeat(2,1fr); }
    .footer-grid{ grid-template-columns:1fr 1fr; }
    .promo{ flex-direction:column; align-items:flex-start; }
  }

  /* ---------- phones ---------- */
  @media (max-width:600px){
    .wrap{ padding:0 16px; }
    .topbar-links a:not(:first-child){ display:none; }
    .header-row{ height:64px; gap:12px; }
    .brand-name{ font-size:14px; }
    .brand-tag{ font-size:9.5px; }
    .head-btn span.head-label{ display:none; }
    .head-btn{ padding:8px 10px; }
    .hero{ padding:36px 0 44px; }
    .hero h1{ font-size:26px; }
    .hero p.lead{ font-size:13.5px; }
    .hero-stats{ flex-wrap:wrap; }
    .hero-stat{ flex:1 1 calc(50% - 5px); }
    .finder-card{ padding:20px 16px; }
    .finder-grid{ grid-template-columns:1fr; }
    .trust .wrap{ grid-template-columns:1fr; }
    .trust-item{ border-inline-start:none; border-top:1px solid var(--line); padding:14px 4px; }
    .trust-item:first-child{ border-top:none; }
    .section{ padding:38px 0; }
    .section-head{ flex-direction:column; align-items:flex-start; gap:8px; }
    .model-grid{ grid-template-columns:1fr; }
    .product-grid{ grid-template-columns:1fr 1fr; gap:10px; }
    .product-name{ font-size:12px; min-height:34px; }
    .promo{ padding:24px 20px; }
    .promo-title{ font-size:17px; }
    .why-grid{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr; gap:26px; padding:40px 0 24px; }
    .footer-bottom{ flex-direction:column; gap:6px; text-align:center; }
  }

  /* ---------- content pages (درباره ما / سوالات متداول) ---------- */
  .page-hero{
    background:linear-gradient(135deg, var(--brand-dark), var(--brand));
    color:#fff; padding:52px 0 46px; position:relative; overflow:hidden;
  }
  .page-hero .wrap{ position:relative; z-index:1; }
  .page-hero-eyebrow{
    display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,0.14);
    font-size:12px; font-weight:700; padding:6px 13px; border-radius:20px; margin-bottom:16px;
  }
  .page-hero-eyebrow svg{ width:14px; height:14px; }
  .page-hero h1{ font-size:30px; font-weight:900; line-height:1.35; margin-bottom:12px; }
  .page-hero p{ font-size:14px; color:#D8E4F2; max-width:640px; line-height:1.9; }
  .page-hero .watermark{
    position:absolute; inset-inline-start:-40px; top:50%; transform:translateY(-50%);
    width:280px; height:280px; opacity:.12; pointer-events:none;
  }
  @media(max-width:600px){ .page-hero h1{ font-size:23px; } .page-hero{ padding:40px 0 34px; } }

  .content-section{ padding:48px 0; }
  .prose{ max-width:760px; font-size:14px; line-height:2.05; color:var(--ink-soft); }
  .prose p{ margin-bottom:16px; }
  .prose strong{ color:var(--ink); font-weight:700; }
  .prose h2{ font-size:19px; font-weight:800; color:var(--ink); margin:30px 0 12px; }

  .about-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:30px 0; }
  @media(max-width:800px){ .about-grid{ grid-template-columns:1fr; } }
  .about-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:22px 18px; box-shadow:var(--shadow-soft);
  }
  .about-card .ac-icon{
    width:44px; height:44px; border-radius:12px; background:var(--brand-soft); color:var(--brand-text);
    display:flex; align-items:center; justify-content:center; margin-bottom:14px;
  }
  .about-card .ac-icon svg{ width:22px; height:22px; }
  .about-card h3{ font-size:15px; font-weight:800; margin-bottom:7px; }
  .about-card p{ font-size:12.5px; color:var(--muted); line-height:1.85; }

  .about-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:8px 0 30px; }
  @media(max-width:600px){ .about-stats{ grid-template-columns:1fr; } }
  .about-stat{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:20px; text-align:center;
  }
  .about-stat .n{ font-family:'JetBrains Mono',monospace; font-size:26px; font-weight:800; color:var(--brand-text); }
  .about-stat .l{ font-size:12px; color:var(--muted); margin-top:4px; }

  .contact-band{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:24px; display:grid; grid-template-columns:1.4fr 1fr; gap:24px; margin-top:10px;
  }
  @media(max-width:700px){ .contact-band{ grid-template-columns:1fr; } }
  .contact-band .cb-row{ display:flex; align-items:flex-start; gap:11px; margin-bottom:14px; font-size:13px; }
  .contact-band .cb-row:last-child{ margin-bottom:0; }
  .contact-band .cb-row svg{ width:18px; height:18px; color:var(--brand-text); flex-shrink:0; margin-top:2px; }
  .contact-band .cb-row a{ color:inherit; }
  .contact-band .cb-row a:hover{ color:var(--brand-text); }

  /* FAQ accordion */
  .faq-list{ max-width:820px; }
  .faq-item{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    margin-bottom:12px; overflow:hidden; transition:border-color .18s ease;
  }
  .faq-item.open{ border-color:var(--brand); }
  .faq-q{
    display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer;
    padding:16px 18px; font-size:14px; font-weight:700; color:var(--ink); user-select:none;
  }
  .faq-q .chev{ width:20px; height:20px; color:var(--muted); flex-shrink:0; transition:transform .22s ease; }
  .faq-item.open .faq-q .chev{ transform:rotate(180deg); color:var(--brand-text); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .28s ease; }
  .faq-a-inner{ padding:0 18px 16px; font-size:13px; line-height:2; color:var(--ink-soft); }
  .faq-a-inner a{ color:var(--brand-text); font-weight:700; }

  .content-cta{
    background:linear-gradient(90deg, var(--accent-dark), var(--accent)); color:#fff;
    border-radius:var(--radius); padding:28px 26px; display:flex; align-items:center;
    justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:34px;
  }
  .content-cta .cc-title{ font-size:17px; font-weight:800; }
  .content-cta .cc-desc{ font-size:12.5px; opacity:.9; margin-top:4px; }
  .content-cta a{
    background:#fff; color:var(--accent-dark); font-weight:800; font-size:13.5px;
    padding:11px 24px; border-radius:10px; white-space:nowrap;
  }

  /* Accessibility Skip Link */
  .skip-link {
    position: absolute; top: -60px; right: 16px; background: var(--brand); color: #fff;
    padding: 10px 18px; border-radius: 8px; z-index: 99999; font-weight: 700;
    text-decoration: none; transition: top .2s ease;
  }
  .skip-link:focus { top: 16px; }

  /* Scroll to top floating button */
  .scroll-top-btn {
    position: fixed; bottom: 84px; right: 22px; width: 42px; height: 42px; border-radius: 50%;
    background: var(--surface); border: 1.5px solid var(--line); color: var(--ink);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: var(--shadow-card); z-index: 999; opacity: 0; visibility: hidden;
    transform: translateY(14px); transition: all .25s ease;
  }
  .scroll-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); }
  .scroll-top-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
  .scroll-top-btn svg { width: 20px; height: 20px; }

  /* Cookie consent banner */
  .cookie-banner {
    position: fixed; bottom: 20px; left: 20px; right: 20px; max-width: 480px;
    background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 14px;
    padding: 16px 20px; box-shadow: 0 12px 36px rgba(0,0,0,0.22); z-index: 10000;
    display: flex; flex-direction: column; gap: 12px; font-size: 13px; line-height: 1.7;
    color: var(--ink-soft);
  }
  .cookie-banner-actions { display: flex; gap: 10px; justify-content: flex-end; }
  .cookie-banner-btn {
    padding: 7px 18px; border-radius: 8px; font-family: inherit; font-size: 12px;
    font-weight: 700; cursor: pointer; border: none; text-decoration: none; text-align: center;
  }
  .cookie-banner-btn.accept { background: var(--brand); color: #fff; }
  .cookie-banner-btn.accept:hover { background: var(--brand-dark); }
  .cookie-banner-btn.learn { background: none; color: var(--brand-text); border: 1px solid var(--line); }

  /* Print Stylesheet */
  @media print {
    .topbar, .site > .wrap.header-row > .header-actions, .cat-strip, .main-nav-bar,
    .chat-fab, .chat-panel, .scroll-top-btn, .cookie-banner, .toast, .btn-checkout,
    .theme-toggle, .cart-drawer, .site-footer {
      display: none !important;
    }
    body { background: #fff !important; color: #000 !important; }
  }