/* Manrope DƏYİŞKƏN şriftdir: bir fayl 400–800 aralığını daşıyır (bax server.py).
     Azərbaycan hərfləri (ə ğ ş ç ö ü ı) latin-ext altdəstindədir. */
  @font-face { font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap;
    src:url('/fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap;
    src:url('/fonts/manrope-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  /* MANAT (₼) Manrope-də yoxdur → hər qiymətdə cihazın öz şrifti işə düşürdü və
     işarə rəqəmlərdən fərqli görünürdü. Bu tək simvolluq alt-dəst (3.2 KB) eyni
     `Manrope` ailə adı ilə elan olunur, ona görə heç bir şablona toxunmaq
     lazım gəlmir — brauzer onu YALNIZ U+20BC üçün seçir (bax server.py). */
  @font-face { font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap;
    src:url('/fonts/manat.woff2') format('woff2');
    unicode-range:U+20BC; }

  /* Rəng psixologiyası: --navy (etibar/sabitlik) başlıqda, --accent (narıncı, hərəkətə çağırış)
     CTA-larda, --green (uğur/qənaət) qiymətlərdə, --urgent (qırmızı, təcililik) böyük
     endirimlərdə — hər rəngin öz psixoloji funksiyası var, təsadüfi seçilməyib. */
  /* KONTRAST ÖLÇÜLDÜ (2026-09-16, WCAG AA = adi mətn 4.5:1, UI komponenti 3:1):
       * ağ yazı + brend narıncısı (#ff6a00) = 2.87 — həm 4.5-dən, həm 3-dən AŞAĞI.
         Yəni "Mağazaya keç", "Axtar", "Endirimlər" düymələrinin yazısı zəif oxunurdu.
         → düymələr üçün AYRI nişan: --cta/--cta2 (tünd narıncı, ağ yazı 5.79/5.18).
         Brend narıncısı yalnız TÜND navy fonunda qalır (loqo 5.66, hero başlığı 6.93).
       * --green #0e9f5a ağ fonda 3.43 — saytın ƏN VACİB məlumatı (qiymət) ən zəif
         oxunan rəngdə idi. → qiymət --text (17.85) oldu, yaşıl 5.07-yə tündləşdi.
       * Yaşıl NİŞAN fonu (endirim faizi, "ƏN UCUZ") hər iki temada sabit --badge:
         tünd rejimdə açıq yaşıl üzərində ağ yazı 2.37 idi (oxunmurdu), indi 5.07. */
  :root { --navy:#0a1f44; --navy2:#132b57; --blue:#1a56db; --blue-light:#eef4ff;
          --accent:#ff6a00; --accent2:#ff8a3d; --cta:#b8390a; --cta2:#c2410c;
          --cta-text:#fff; --badge:#0a7f47; --green:#0a7f47; --green-light:#e9faf1;
          --urgent:#e11d48; --urgent-light:#fef1f3;
          --bg:#f6f8fb; --border:#e5e9f0; --muted:#64748b; --card:#fff;
          --edge:rgba(15,23,42,.18);
          --text:#0f172a; --text2:#334155;
          --radius:14px; --radius-sm:9px;
          --shadow-sm:0 2px 8px rgba(15,23,42,.06); --shadow-md:0 10px 24px rgba(15,23,42,.1); --shadow-lg:0 20px 48px rgba(15,23,42,.16); }
  /* Tünd rejim: eyni dəyişənlər, tünd qiymətlər. İki giriş nöqtəsi:
       1) istifadəçi seçimi  -> <html data-theme="dark|light"> (localStorage-dan,
          head-dəki erkən skript "ağ parıltı"nın qarşısını alır);
       2) seçim YOXDURSA     -> sistemin prefers-color-scheme-i.
     Header/hero/footer onsuz da tünd göy idi — onlara toxunulmur, yalnız
     "gündüz" səthlər (fon, kartlar, mətn) çevrilir. Axtarış qutusu və təklif
     siyahısı QƏSDƏN ağ qalır (məhsul şəkillərinin ağ fonu kəsilməsin). */
  [data-theme="dark"] { --bg:#0d1424; --card:#16203a; --border:#263450; --muted:#8fa1bd;
          --cta:#ff6a00; --cta2:#ff8a3d; --cta-text:#0a1f44; --badge:#0a7f47;
          --text:#e8eef8; --text2:#c3cee2; --blue:#7aa4ff; --blue-light:#1b2848;
          --edge:rgba(255,255,255,.20);
          --green:#2fbf7a; --green-light:#12301f; --urgent:#fb5c81; --urgent-light:#331723;
          --shadow-sm:0 2px 8px rgba(0,0,0,.35); --shadow-md:0 10px 24px rgba(0,0,0,.45); --shadow-lg:0 20px 48px rgba(0,0,0,.55); }
  @media (prefers-color-scheme:dark) {
    :root:not([data-theme="light"]) { --bg:#0d1424; --card:#16203a; --border:#263450; --muted:#8fa1bd;
          --cta:#ff6a00; --cta2:#ff8a3d; --cta-text:#0a1f44; --badge:#0a7f47;
          --text:#e8eef8; --text2:#c3cee2; --blue:#7aa4ff; --blue-light:#1b2848;
          --edge:rgba(255,255,255,.20);
          --green:#2fbf7a; --green-light:#12301f; --urgent:#fb5c81; --urgent-light:#331723;
          --shadow-sm:0 2px 8px rgba(0,0,0,.35); --shadow-md:0 10px 24px rgba(0,0,0,.45); --shadow-lg:0 20px 48px rgba(0,0,0,.55); }
  }
  /* `color-scheme` BRAUZERİN ÖZ elementlərini temaya tabe edir: select
     açılışı, sürüşdürmə zolağı, avtodoldurmanın sarı fonu, tarix seçici.
     Bunlar CSS dəyişənləri ilə idarə OLUNMUR — yalnız bu bəyanla dəyişir,
     əks halda tünd səhifədə ağ açılış siyahısı çıxır. */
  :root { color-scheme: light; }
  [data-theme="dark"] { color-scheme: dark; }
  @media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
  * { margin:0; padding:0; box-sizing:border-box; font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; }
  body { background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
  a { color:inherit; text-decoration:none; }
  .wrap { max-width:1200px; margin:0 auto; padding:0 16px; }
  svg.ic { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; vertical-align:-5px; }
  ::selection { background:var(--cta2); color:#fff; }

  header { background:linear-gradient(180deg,var(--navy),var(--navy2)); position:sticky; top:0; z-index:40; box-shadow:0 1px 0 rgba(255,255,255,.06) inset; }
  /* padding-top/bottom (shorthand YOX) — eyni elementdəki .wrap-ın
     yan (16px) padding-ini ləğv etməsin, yoxsa logo sol kənara yapışır. */
  .hrow { display:flex; align-items:center; gap:16px; padding-top:15px; padding-bottom:15px; flex-wrap:wrap; }
  .logo { color:#fff; font-size:25px; font-weight:800; cursor:pointer; white-space:nowrap; letter-spacing:-.4px; }
  .logo span { color:var(--accent); }
  /* Q-işarə hərf kimi mətn axınında oturur: hündürlük em-lə (mobil font-size
     dəyişəndə avtomatik miqyaslanır), mənfi vertical-align quyruğu "q"
     descender-i kimi bazadan aşağı salır. */
  .logo .qmark { height:1.02em; vertical-align:-0.26em; margin-right:.02em; }
  .searchbar { flex:1; min-width:240px; display:flex; box-shadow:var(--shadow-md); border-radius:10px; }
  /* Axtarış qutusu HƏR İKİ temada ağdır (navy header üstündə kontrast) —
     tünd rejimdə UA-nın forma elementlərini tündləşdirməsinə qarşı açıq yazılıb. */
  .searchbar input { flex:1; padding:12px 18px; border:none; border-radius:10px 0 0 10px; font-size:15px; outline:none; background:#fff; color:#0f172a; }
  .searchbar button { padding:12px 24px; border:none; background:linear-gradient(135deg,var(--cta),var(--cta2)); color:var(--cta-text); font-weight:700; border-radius:0 10px 10px 0; cursor:pointer; font-size:15px; transition:filter .15s; }
  .searchbar button:hover { filter:brightness(1.06); }
  /* type="search" brauzerin öz görünüşünü (iOS yuvarlaq künc, Chrome ✕) gətirir —
     əvvəlki dizayn saxlanılsın. */
  .searchbar input[type=search] { -webkit-appearance:none; appearance:none; }
  .searchbar input[type=search]::-webkit-search-cancel-button,
  .searchbar input[type=search]::-webkit-search-decoration { -webkit-appearance:none; }
  .suggest { display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border-radius:12px; box-shadow:var(--shadow-lg); overflow:hidden; z-index:60; color:#0f172a; }
  .suggest.show { display:block; }
  /* Mobil: klaviatura açıq olanda uzun siyahı ekrandan çıxmasın — daxili sürüşmə. */
  @media (max-width:700px) { .suggest { max-height:60vh; overflow-y:auto; -webkit-overflow-scrolling:touch; } }
  .suggest .sitem { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; transition:background .1s; }
  .suggest .sitem:hover { background:var(--bg); }
  .suggest .sitem img { width:34px; height:34px; object-fit:contain; flex-shrink:0; }
  .suggest .sitem .sname { flex:1; font-size:13.5px; font-weight:600; line-height:1.3; }
  .suggest .sitem .sprice { font-size:12.5px; color:var(--green); font-weight:700; white-space:nowrap; }
  a.catbtn { text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
  .catbtn { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.12); padding:11px 16px; border-radius:10px; cursor:pointer; font-size:14px; font-weight:600; white-space:nowrap; transition:background .15s,transform .15s; }
  .catbtn:hover { background:rgba(255,255,255,.18); transform:translateY(-1px); }
  .themebtn { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.12); width:42px; height:42px; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .15s; }
  .themebtn:hover { background:rgba(255,255,255,.18); }
  .themebtn svg { width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  /* NAVY FONDA: parlaq marka narıncısı + tünd yazı (ölçüldü 5.66/6.93 — AA).
     Ağ səthdəki düymələr isə --cta (tünd narıncı) + ağ yazıdır: orada parlaq
     narıncı üzərində ağ yazı 2.87 verirdi, yəni oxunmurdu. */
  .dealsbtn { background:linear-gradient(135deg,var(--accent),var(--accent2)); border-color:transparent; color:var(--navy); font-weight:800; }
  .dealsbtn:hover { filter:brightness(1.04); }
  /* Mobil header (təmiz 3 sətir, deterministik):
       Sətir 1: [logo ..................... Daxil ol]
       Sətir 2: [tam-enli axtarış qutusu]
       Sətir 3: [Kateqoriyalar] [Endirimlər]   ← 50/50, bərabər cüt
     Əvvəlki problem: `margin-left:auto` Kateqoriyalar düyməsinin 1-ci sətrə
     "sıxışmasına" imkan verirdi, Endirimlər isə TƏK 2-ci sətrə düşürdü (pis
     görünürdü). İndi axtarış qutusu `flex:1 0 100%` ilə öz sətrini MƏCBURİ
     tutur, ondan sonrakı iki düymə isə `flex:1` ilə son sətri bərabər bölür —
     heç nə təsadüfən tək qalmır (Gestalt: simmetriya = qəsdən görünüş). */
  @media (max-width:700px) {
    .hrow { gap:9px 8px; padding-top:11px; padding-bottom:11px; }
    .logo { order:1; font-size:21px; }
    .themebtn { order:2; margin-left:auto; width:38px; height:38px; }
    #acctarea { order:2; }
    .searchbar { order:3; flex:1 0 100%; min-width:0; box-shadow:var(--shadow-sm); }
    .searchbar input { padding:12px 14px; font-size:16px; }
    .searchbar button { padding:12px 18px; font-size:14px; }
    .catbtn { order:4; flex:1 1 0; text-align:center; justify-content:center; padding:11px 10px; font-size:13.5px; }
    .catbtn.dealsbtn { order:5; }
    .acctbtn { padding:9px 13px; font-size:13px; }
    /* Bax `renderAccountArea` şərhi: mətn gizlənir, ikona + say qalır. */
    .wishtext { display:none; }
    .wishbtnhdr { display:inline-flex; align-items:center; gap:4px; padding:8px 10px; }
    .wishbtnhdr svg.ic { width:16px; height:16px; vertical-align:0; }

    /* SÜRÜŞƏNDƏ PANEL YIĞCAMLAŞIR (2026-08-17, istifadəçi bildirişi:
       "ən yuxarıdakı panel pis görsənir").
       ÖLÇÜLDÜ: header `position:sticky` və 166px hündürlükdədir, yəni
       412x915 telefonda ekranın 18%-i, daha kiçik cihazda 22%-i məhsul
       siyahısı boyu DAİMİ olaraq panelə gedir. Sürüşərkən ən lazımlısı
       axtarışdır; "Kateqoriyalar" və "Endirimlər" isə həm aşağıdakı
       naviqasiya zolağında, həm də yuxarı qayıdanda əlçatan qalır.
       Nəticə: 166px -> ~113px, yəni bir kart sırası daha görünür. */
    body.yigcam .hrow { padding-top:8px; padding-bottom:8px; }
    body.yigcam .catbtn { display:none; }
  }
  /* SÜRÜŞMƏ İŞARƏSİ (2026-08-17, istifadəçi bildirişi: "ən yuxarıdakı panel
     pis görsənir"). ÖLÇÜLDÜ: bu zolağın məzmunu 1907px, görünən sahə isə
     412px — yəni 1495px gizli qalır. Android Chrome sürüşdürmə zolağını
     GİZLƏDİR, ona görə istifadəçi yalnız sağ kənarda ortadan kəsilmiş söz
     görür ("Məi…") və bu, sınıq görüntü kimi oxunur; kateqoriyaların davamı
     olduğu isə heç cür bilinmir.

     `background-attachment` fəndi işlədilir (JS-siz): `local` qat məzmunla
     BİRLİKDƏ sürüşür, `scroll` qat isə yerində qalır. Kənarda olanda `local`
     örtük `scroll` kölgəni gizlədir, sürüşəndə isə açılır — yəni solda və
     sağda kölgə YALNIZ o tərəfdə davamı olanda görünür. */
  nav.mainnav { background:var(--card); border-bottom:1px solid var(--border);
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    background-image:
      linear-gradient(to right, var(--card) 40%, rgba(0,0,0,0)),
      linear-gradient(to left,  var(--card) 40%, rgba(0,0,0,0)),
      linear-gradient(to right, var(--edge), rgba(0,0,0,0)),
      linear-gradient(to left,  var(--edge), rgba(0,0,0,0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 34px 100%, 34px 100%, 16px 100%, 16px 100%;
    background-attachment: local, local, scroll, scroll; }
  .navrow { display:flex; gap:2px; }
  .navrow a { padding:12px 14px; font-size:13.5px; font-weight:500; color:var(--text2); white-space:nowrap; border-bottom:2px solid transparent; cursor:pointer; transition:color .15s,border-color .15s; }
  .navrow a:hover { color:var(--blue); border-color:var(--blue); }

  /* top:100% — sticky header-in dibinə yapışır (bax header-dəki şərh) */
  .mega { display:none; position:absolute; top:100%; left:0; right:0; background:var(--card); border-bottom:1px solid var(--border); box-shadow:0 12px 30px rgba(2,6,23,.15); z-index:39; }
  .mega.open { display:block; }
  .megagrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:18px; padding:22px 16px; max-width:1180px; margin:0 auto; }
  .megacol b { display:block; font-size:14px; margin-bottom:8px; cursor:pointer; }
  .megacol b:hover, .megacol a:hover { color:var(--blue); }
  .megacol a { display:block; font-size:13px; color:var(--muted); padding:3px 0; cursor:pointer; }
  .megacnt { font-size:11px; color:var(--muted); opacity:.65; }
  .megachev { display:none; }
  /* Mobil: mega menyunu akkordeona çevir — kök başlıqlar siyahısı qısa qalır,
     toxunanda alt-kateqoriyalar açılır. Əvvəl 1200px+ tək-sütun siyahı idi. */
  @media (max-width:700px) {
    .mega { max-height:calc(100vh - 60px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
    .megagrid { display:block; padding:4px 0; max-width:none; }
    .megacol { border-bottom:1px solid var(--border); }
    .megacol b { display:flex; justify-content:space-between; align-items:center; margin:0; padding:15px 16px; font-size:15px; color:var(--text); }
    .megachev { display:inline-block; color:var(--muted); font-size:20px; line-height:1; transition:transform .2s; }
    .megacol.open .megachev { transform:rotate(90deg); }
    .megasub { max-height:0; overflow:hidden; transition:max-height .28s ease; background:var(--bg); }
    .megacol.open .megasub { max-height:640px; }
    .megasub a { padding:12px 16px 12px 30px; font-size:14px; border-top:1px solid var(--border); }
  }

  main { padding:22px 0 60px; }
  /* Kuki bildirişi — bax HTML-dəki şərh (razılıq qapısı deyil, məlumatlandırma) */
  #cookiebar { position:fixed; left:12px; right:12px; bottom:12px; z-index:200;
    background:var(--card); border:1px solid var(--border); border-radius:12px;
    box-shadow:0 8px 28px rgba(0,0,0,.18); padding:14px 16px; display:flex;
    gap:14px; align-items:center; flex-wrap:wrap; max-width:820px; margin:0 auto; }
  #cookiebar .cbtext { flex:1; min-width:240px; font-size:13.5px; line-height:1.55;
    color:var(--text); }
  #cookiebar .cbtext a { color:var(--blue); font-weight:600; }
  /* "Ətraflı" keçidi 37×17px idi — barmaqla dəqiq basılmır (ölçüldü:
     scripts/test_mobile). Şrift ölçüsünü saxlayıb yalnız BASILAN sahəni
     böyüdürük; `inline-block` olmadan şaquli padding hündürlüyə təsir etmir. */
  #cookiebar .cbtext a { display:inline-block; padding:7px 6px; margin:-7px -6px; }
  #cookiebar .cbbtn { background:var(--blue); color:#fff; border:0; border-radius:8px;
    padding:10px 20px; font-size:14px; font-weight:600; cursor:pointer; }
  /* TELEFONDA YIĞCAM (2026-09-14, reklam hazırlığı). Əvvəl bildiriş 3 sətir
     mətn + TAM ENLİ düymə idi və ekranın altının ~16%-ni tuturdu — reklamdan
     gələn HƏR ilk ziyarətçi məhsul səhifəsində ən ucuz təklifin qiymətini
     bildirişin altında görürdü (Playwright ekran görüntüsü, 390×844). Bu,
     razılıq qapısı deyil, məlumatlandırmadır — ona görə telefonda qısa mətn
     və eyni sətirdə kiçik düymə kifayətdir; ikinci cümlə gizlənir. */
  @media(max-width:520px){
    #cookiebar { padding:8px 10px 8px 13px; gap:10px; flex-wrap:nowrap; left:8px; right:8px; bottom:8px; }
    #cookiebar .cbtext { font-size:12px; line-height:1.4; min-width:0; }
    #cookiebar .cbuzun { display:none; }
    #cookiebar .cbbtn { width:auto; padding:9px 14px; font-size:13px; white-space:nowrap; flex-shrink:0; }
  }
  /* ALT ZOLAQLARLA TOQQUŞMA (2026-08-17, mobil şikayəti).
     Səhifənin altında ÜÇ sabit element var: `#buybar` (məhsul səhifəsində
     "Mağazaya keç"), `#cmpbar` (müqayisə) və bu bildiriş. Bildirişin z-index-i
     ən yüksək olduğu üçün TELEFONDA onların üstünü örtürdü — yəni ən vacib
     düymə (mağazaya keçid) bildirişin altında qalırdı.
     İndi zolaq görünəndə bildiriş onun ÜSTÜNƏ qalxır. */
  body.hasbuybar #cookiebar { bottom: calc(80px + env(safe-area-inset-bottom)); }
  body:has(#cmpbar.show) #cookiebar { bottom: calc(76px + env(safe-area-inset-bottom)); }
  h2.sec { font-size:20px; font-weight:800; margin:30px 0 15px; letter-spacing:-.2px; color:var(--text); }
  /* Bölmə altındakı izah sətri — başlıq tək başına "niyə bu mallar?" sualını
     cavablandırmır ('Tarixi ən aşağı qiymətdə' nəyə görə seçilib). */
  .secnote { margin:-8px 0 14px; font-size:13px; color:var(--muted); }
  /* Yalnız adminə görünən bölmənin nişanı — sahib öz gördüyünün ziyarətçiyə
     GÖRÜNMƏDİYİNİ bilsin deyə (2026-08-16). */
  .adminbadge { font-size:11px; font-weight:700; padding:2px 7px; border-radius:9px;
                background:var(--blue); color:#fff; vertical-align:middle; margin-left:6px; }
  /* Nəticə səhifələrinin başlığı. Əvvəllər kateqoriya/axtarış səhifələrində
     HEÇ BİR h1 yox idi (2026-07-20 auditi) — bunlar saytın SEO üçün ən dəyərli
     səhifələridir və Google başlıqsız səhifəni zəif indeksləyir. */
  /* Ödəniş şərti qeydi — çatdırılma qeydi ilə eyni ölçü, amma diqqət çəkən
     rəng: alıcı qiymətin şərtli olduğunu qiymətlə birlikdə görməlidir. */
  small.paynote { display:block; font-size:11.5px; color:var(--warn,#b45309); margin-top:2px; }
  h1.pagetitle { font-size:22px; font-weight:800; letter-spacing:-.3px; margin:0 0 14px; color:var(--text); }
  @media (max-width:760px){ h1.pagetitle { font-size:19px; } }
  /* SERVERİN İLK HTML-i (2026-10-25): JS 6 API-ni gözləyərkən telefonda bu görünür.
     Əvvəl çılpaq "•" siyahısı idi (reklamdan gələnə ilk ekran). Yalnız ÜST səviyyəli
     siyahılar çip olur — hero-dakı `.herotrust` toxunulmur. */
  .alertpill { display:inline-flex; align-items:center; gap:6px; margin:2px 0 12px; padding:7px 14px;
    border-radius:999px; border:1.5px solid var(--blue); background:transparent; color:var(--blue);
    font:inherit; font-weight:700; font-size:13.5px; cursor:pointer; }
  .alertpill:hover { background:rgba(37,99,235,.08); }
  .ssrlinks > h2 { font-size:17px; font-weight:800; margin:22px 0 10px; color:var(--text); }
  .ssrlinks > ul { list-style:none; padding:0; margin:0 0 8px; display:flex; flex-wrap:wrap; gap:8px; }
  .ssrlinks > ul > li { background:var(--card); border:1px solid var(--border); border-radius:999px;
    padding:7px 13px; font-size:13px; line-height:1.3; color:var(--muted, #5b6b84); max-width:100%; }
  .ssrlinks > ul > li > a { color:var(--text); text-decoration:none; font-weight:600; }
  .ssrlinks .cattiles .tile { min-height:58px; font-weight:600; }
  /* MOBİL DAŞMA QORUMASI (2026-08-17). Məlumat səhifələrində uzun texniki
     sətirlər var — məsələn bot səhifəsindəki
     `QiyaslaBot/0.1 (+https://qiyasla.com/bot; salam@qiyasla.com)`.
     `<code>` standart olaraq sətri KEÇİRMİR, ona görə telefonda səhifə yana
     sürüşürdü (üfüqi scrollbar bütün saytı "sınmış" göstərir).
     Cədvəllər isə dar ekranda öz-özünə sürüşən qutuya alınır. */
  code { word-break:break-all; overflow-wrap:anywhere; }
  .pcard table { display:block; max-width:100%; overflow-x:auto;
                 -webkit-overflow-scrolling:touch; }

  /* Hero: ilk təəssürat etibar qurur — dəyər təklifi + statistika (sosial sübut) */
  .hero { background:linear-gradient(120deg,var(--navy),var(--navy2) 60%,#1b3a70); border-radius:16px; padding:32px; margin-bottom:8px;
    display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:28px; color:#fff; position:relative; overflow:hidden; }
  .hero::before { content:""; position:absolute; top:-80px; right:-60px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(255,106,0,.28),transparent 70%); pointer-events:none; }
  .hero::after { content:""; position:absolute; bottom:-140px; left:28%; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,rgba(59,130,246,.16),transparent 70%); pointer-events:none; }
  .herotext { max-width:620px; position:relative; z-index:1; }
  .heroeyebrow { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.2px; color:rgba(255,255,255,.88); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); padding:4px 11px; border-radius:999px; margin-bottom:12px; }
  .herotext h1 { font-size:34px; font-weight:800; letter-spacing:-.6px; line-height:1.12; margin-bottom:10px; }
  .herotext h1 span { color:var(--accent2); }
  .herotext p { font-size:15px; color:rgba(255,255,255,.8); line-height:1.55; max-width:540px; }
  .herocta { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
  .herobtn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 20px; border-radius:10px; font-size:14.5px; font-weight:700; text-decoration:none; white-space:nowrap; transition:transform .15s, box-shadow .15s, background .15s; }
  .herobtn.primary { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:var(--navy); font-weight:800; box-shadow:0 6px 18px rgba(255,106,0,.35); }
  .herobtn.primary:hover { transform:translateY(-1px); box-shadow:0 8px 22px rgba(255,106,0,.45); }
  .herobtn.ghost { background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.24); }
  .herobtn.ghost:hover { background:rgba(255,255,255,.16); }
  .herotrust { list-style:none; display:flex; flex-wrap:wrap; gap:6px 18px; margin:16px 0 0; padding:0; font-size:12.5px; color:rgba(255,255,255,.75); }
  .herotrust li::before { content:"✓"; color:#4ade80; font-weight:800; margin-right:6px; }
  .herostats { display:grid; grid-template-columns:repeat(2, auto); gap:12px; position:relative; z-index:1; }
  .hstat { text-align:center; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); border-radius:14px; padding:16px 14px; min-width:108px; }
  .hstat b { display:block; font-size:24px; font-weight:800; letter-spacing:0; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .hstat span { display:block; font-size:11.5px; color:rgba(255,255,255,.7); margin-top:3px; white-space:nowrap; }
  .hstat.live b::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.25); margin-right:8px; vertical-align:middle; position:relative; top:-2px; }
  /* Başlıq/mətn sətirləri balanslaşır: telefonda "Almadan əvvəl müqayisə / edin" kimi tək
     söz asılı qalmırdı (brauzer dəstəkləmirsə adi sarınma — zərərsiz). */
  .herotext h1 { text-wrap:balance; }
  .herotext p { text-wrap:pretty; }
  /* 900px planşetdə rəqəmlər mətnin altına düşüb qutunu 406px edirdi — iki sütun 820px-ə qədər qalır. */
  @media (max-width:820px) { .hero { grid-template-columns:1fr; } }
  @media (max-width:700px) {
    .hero { padding:20px 18px; gap:16px; border-radius:16px; }
    .heroeyebrow { display:none; }
    .herotext h1 { font-size:25px; margin-bottom:8px; }
    .herotext p { font-size:14px; line-height:1.5; }
    .herocta { margin-top:14px; gap:8px; flex-wrap:nowrap; }
    .herobtn { flex:1 1 0; padding:0 10px; font-size:14px; }
    .herotrust { margin-top:12px; font-size:12px; gap:4px 12px; }
    .herostats { grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
    .hstat { min-width:0; padding:10px 6px; border-radius:12px; }
    .hstat b { font-size:18px; }
    .hstat span { font-size:11px; white-space:normal; }
  }
  /* Kiçik telefonda etibar sətri iki sətrə bölünürdü — üçüncü nöqtə (sıralama) gizlənir,
     o, "Necə işləyir?" səhifəsində və məhsul səhifəsində onsuz da görünür. */
  @media (max-width:480px) { .herotrust li:nth-child(3) { display:none; } }

  /* "Ən çox axtarılanlar" trend çipləri (qiymeti.net-də olan kəşf elementi) */
  /* Alt-kateqoriya çipləri — kateqoriya səhifəsinin BAŞINDA, filtr çekmecesinin
     içində yox. Mobil istifadəçi "Elektronika"nın altındakı 11 bölməni görmək
     üçün əvvəl "Filtrlər" düyməsinə basmalı idi (2026-07-29). */
  .subcats { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
  .subcats a { background:var(--card); border:1px solid var(--border); border-radius:20px;
               padding:6px 13px; font-size:13px; font-weight:600; color:var(--text2);
               cursor:pointer; transition:all .14s; }
  .subcats a:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-light); }
  .subcats a .n { font-weight:500; opacity:.6; margin-left:4px; }
  .trending { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:16px 0 4px; }
  .trending .tlabel { font-size:13px; font-weight:700; color:var(--muted); }
  .trending .tchip { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:6px 13px; font-size:13px; font-weight:600; color:var(--text2); cursor:pointer; transition:all .14s; }
  .trending .tchip:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-light); }
  .cattiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
  /* .tile və səhifələmə düymələri artıq real <a href>-dir (SEO: taranabilən
     daxili keçidlər) — linkin standart rəngi/altxətti görünüşü dəyişməsin. */
  a.tile { text-decoration:none; color:inherit; }
  .tile { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px 14px; cursor:pointer; transition:transform .18s,box-shadow .18s,border-color .18s; display:flex; align-items:center; gap:11px; }
  .tile:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--blue); }
  .tile svg.ic { width:26px; height:26px; color:var(--blue); flex-shrink:0; }
  .tile div { font-size:13.5px; font-weight:700; }

  /* Fotograflı ürün kartları — qiymət ən güclü psixoloji lövbərdir, ona görə
     böyük/qalın göstərilir; böyük endirimlər (--urgent qırmızı) diqqəti daha
     çox çəkir, kiçik endirimlər (--green) sakit "qənaət" hissi yaradır. */
  .pgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
  /* Mobil: 210px minmax bir sütuna düşürdü — real qiymət saytları kimi 2 kart
     yan-yana göstəririk (sıxlıq + daha az sürüşdürmə). */
  @media (max-width:560px) {
    .pgrid, .loadgrid { grid-template-columns:repeat(2,1fr); gap:10px; }
    .pimg { height:140px; }
    .skel { height:240px; }
  }
  .pcardm { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s; display:flex; flex-direction:column; position:relative; }
  .pcardm:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:#d5deec; }
  .pimg { height:170px; background:#fff; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--border); }
  .pimg img { max-width:86%; max-height:86%; object-fit:contain; transition:transform .3s; }
  .pcardm:hover .pimg img { transform:scale(1.05); }
  .noimg { width:64px; height:64px; border-radius:14px; background:var(--blue-light); color:#8fa8dd; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; }
  .pbody { padding:13px 15px 15px; display:flex; flex-direction:column; gap:6px; flex:1; }
  /* Başlıq artıq real <a href>-dir (bax SPA tutucusu) — linkin standart
     mavi rəngi/altxətti kartın görünüşünü dəyişməsin. */
  .pname a { color:inherit; text-decoration:none; }
  .pname { font-weight:600; font-size:14px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:39px; color:var(--text); }
  .pmeta { color:var(--muted); font-size:12px; font-weight:500; }
  /* QİYMƏT KARTIN DİBİNƏ SANCILIR (2026-08-07): şəbəkə kartları eyni hündürlükdə
     olduğu üçün belə olanda qiymətlər BÜTÜN kartlarda eyni xəttə düşür. Əvvəl
     variant çipləri (.swatches) DOM-da qiymətdən SONRA gəlirdi, ona görə çip
     sayı dəyişdikcə qiymət 80 pikselə qədər yuxarı-aşağı sürüşürdü — qiymət
     müqayisə saytında gözün ən çox axtardığı element düzənsiz idi. */
  .pprice { margin-top:auto; }
  /* Qiymət QARA (17.85:1). Yaşıl 3.43 idi; üstəlik aparıcı müqayisə saytları
     (idealo, PriceRunner) qiyməti neytral tünd rəngdə verir, yaşılı isə yalnız
     qənaət/stok siqnalına saxlayır — belədə "ən ucuz" vurğusu güclənir. */
  .pprice .bp { color:var(--text); font-weight:800; font-size:19px; letter-spacing:-.3px; }
  /* Köhnə qiymət cari qiymətin SOLUNDA (2026-09-16 araşdırması): üfüqi qiymət
     yerləşməsi üzrə tədqiqat (Frontiers in Psychology, 2025) göstərir ki, əsl qiymət
     solda olanda alıcının istinad qiyməti daha yüksək qiymətləndirilir. Təklif
     sətrində sıra onsuz da belə idi, kartda tərsinə idi. */
  .pprice .op { color:var(--muted); text-decoration:line-through; font-size:12px; margin-right:6px; }
  .pprice small { color:var(--muted); display:block; font-size:11.5px; margin-top:3px; font-weight:500; }
  .pprice .unitp { color:var(--muted); font-weight:600; }
.vunit { font-size:11.5px; color:var(--muted); font-weight:600; }
.serfeli { font-size:10.5px; font-weight:800; color:var(--green); letter-spacing:.02em; }
  .pct { position:absolute; top:10px; left:10px; background:var(--badge); color:#fff; font-weight:800; font-size:12px; border-radius:8px; padding:3px 8px; box-shadow:0 3px 8px rgba(14,159,90,.35); z-index:2; }
  .pct.hot { background:var(--urgent); box-shadow:0 3px 10px rgba(225,29,72,.4); animation:pulse-badge 1.8s ease-in-out infinite; }
  @keyframes pulse-badge { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
  .swatches { display:flex; gap:5px; margin-top:8px; flex-wrap:wrap; }
  /* HALQA KART SƏTHİNİN RƏNGİDİR, sabit ağ DEYİL (2026-08-17).
     Bu 2px haşiyə dairəvi RƏNG çipini kartdan ayırmaq üçündür. Ancaq mətn
     çipləri (`.swatch-size`) də `swatch` sinfini daşıyır, ona görə sabit #fff
     tünd rejimdə kartın üstündə PARLAQ AĞ KONTUR verirdi — işıqlı temada
     görünmürdü, çünki kart onsuz da ağdır. `var(--card)` hər iki temada
     kart səthi ilə eyni qalır və halqa öz işini görür. */
  .swatch { width:18px; height:18px; border-radius:50%; border:2px solid var(--card); box-shadow:0 0 0 1px var(--border); cursor:pointer; padding:0; transition:box-shadow .12s,transform .12s; }
  .swatch:hover { transform:scale(1.12); }
  .swatch.active { box-shadow:0 0 0 2px var(--blue); }
  .swatch-size { width:auto; height:auto; min-width:18px; border-radius:9px; background:var(--bg); color:var(--text); font-size:10.5px; font-weight:600; padding:2px 6px; }
  .swatch-size.active { background:var(--blue); color:#fff; box-shadow:none; }
  /* TELEFONDA BASILAN SAHƏ (2026-08-17, ölçüldü: scripts/test_mobile).
     Rəng çipi 18×18, ölçü çipi 22px hündürlükdə idi. Barmaq izi ~44px olduğu
     üçün istifadəçi çipə basdığını sanıb YAN sahəyə dəyirdi — kartda heç nə
     dəyişmirdi. Yəni "basanda heçnə dəyişmir" şikayətinin JS ilə yanaşı ikinci
     səbəbi ÖLÇÜ idi.

     GÖRÜNÜŞ ÖLÇÜSÜ QƏSDƏN SAXLANILIR, yalnız hit sahəsi böyüdülür:
     çipləri həqiqətən 44px etsək kart hündürlüyü artır və `.pprice`-ın
     `margin-top:auto` ilə qurulmuş qiymət düzülüşü (bax yuxarıdakı şərh)
     şəbəkədə pozulur. `::after` layout tutmur — kart ölçüsü dəyişmir.

     Aralıq 5→9px: hit sahələri üst-üstə düşəndə DOM-da SONRAKI çip qazanır,
     yəni soldakının bir hissəsi yeyilir. Hesab: 18px çip + 9px aralıq = 27px
     addım, 34px hədəf isə hər tərəfə 17px uzanır → qonşu 7px yeyir. Amma bu
     7px tamamilə BOŞ sahədədir (çipin özü mərkəzdən cəmi 9px-dir), ona görə
     hər çip öz görünən dairəsini + ətrafında ~10px ehtiyatı saxlayır.

     ÖLÇÜLDÜ: tək `::after` ilə hədəf 22→31px oldu, 34-ə çatmadı. Səbəb
     həndəsədir — çiplər sətir aşırır və ADDIM (çip hündürlüyü + aralıq)
     hədəfin tavanıdır: ondan artığını qonşu çip yeyir.

     ƏVVƏLCƏ ÇİPİN ÖZÜNÜ BÖYÜTMÜŞDÜM (12px şrift, 5px doldurma) — BU SƏHV İDİ
     və geri qaytarıldı. Ekran şəklində göründü ki, enlənmiş çiplər 165px-lik
     mobil kartda yan-yana sığmır, hər biri öz sətrinə düşür və 7 variantlı
     malda QİYMƏTİ ekrandan aşağı itələyir. Yəni toxunma hədəfini düzəldərkən
     daha vacib olanı — qiymətin görünməsini — pozmuşdum.
     İndi ölçü ORİJİNAL qalır, addım aralıqla alınır, çip sayı isə JS-də
     məhdudlaşdırılır.

     XƏBƏRDARLIQ — BU ŞƏRH İKİ DƏFƏ QIRILDI:
       1) abzas əlavə edilərkən mətn şərhin bağlayıcısından SONRA düşdü;
       2) sonra bu xəbərdarlığın ÖZÜ içində bağlayıcı ardıcıllığı yazdığım üçün
          şərh yenə vaxtından əvvəl bitdi.
     Hər iki halda qalan sətirlər xam CSS kimi oxundu və parser ardınca gələn
     @media blokunu uddu — toxunma hədəfi səssizcə sıradan çıxdı. Səhifə normal
     görünürdü, nasazlığı yalnız ölçmə tapdı:
     `getComputedStyle(el,'::after').content === 'none'`.
     Qayda: CSS şərhinin içində ulduz-eğik-xətt ardıcıllığı YAZILA BİLMƏZ. */
  @media (max-width:800px) {
    /* ŞAQULİ və ÜFÜQİ aralıq AYRI: toxunma hədəfini yalnız SƏTİRLƏR arasındakı
       məsafə müəyyən edir (ölçüldü — 12px aralıqda hədəf 31px qalırdı, 1px
       çatmırdı). Üfüqi aralığı da böyütsək çiplər sətrə sığmayıb hər biri öz
       sətrinə düşür — səhər məhz bu, qiyməti ekrandan itələmişdi. */
    /* ALT BOŞLUQ: SONUNCU sətrin hədəfini aralıq yox, ALTINDAKI element
       (qiymət bloku) məhdudlaşdırır — o, DOM-da sonra gəldiyi üçün üstdə olur
       və `::after`-in aşağı hissəsini yeyir. Ölçüldü: aralığı 12→15px etmək
       heç nə dəyişmədi, çünki maneə aralıq deyildi. */
    .swatches { column-gap:10px; row-gap:15px; margin-bottom:9px; }
    .swatch, .swatch-size { position:relative; }
    .swatch::after, .swatch-size::after {
      content:""; position:absolute; top:50%; left:50%;
      transform:translate(-50%,-50%);
      width:100%; height:100%; min-width:34px; min-height:34px;
    }
  }
  /* "+N" çipi: qalan variantların sayını göstərir və məhsul səhifəsini açır.
     Seçilə bilən variant DEYİL, ona görə vizual olaraq fərqlənir. */
  .swatch.swmore { background:transparent; color:var(--muted);
    border:1px dashed var(--border); font-weight:700; }
  .inst { display:flex; align-items:center; gap:4px; color:var(--blue); font-size:11.5px; font-weight:600; margin-top:2px; }
  .inst svg.ic { width:14px; height:14px; vertical-align:-2px; }
  .linkico svg.ic { width:13px; height:13px; vertical-align:-2px; margin-right:1px; }
  .offer .inst { margin-top:4px; justify-content:flex-end; }
  .instsel { border:1px solid var(--border); border-radius:6px; padding:3px 6px; font-size:11.5px; font-weight:600; color:var(--blue); background:var(--card); cursor:pointer; max-width:200px; }

  .results { display:grid; grid-template-columns:230px 1fr; gap:18px; }
  @media (max-width:800px) {
    .results { grid-template-columns:1fr; }
    aside.filters { order:2; }
    .rescol { order:1; }
  }
  aside.filters { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; align-self:start; box-shadow:var(--shadow-sm); }
  .filters h4 { font-size:12px; text-transform:uppercase; letter-spacing:.5px; font-weight:700; color:var(--muted); margin:16px 0 9px; }
  .filters h4:first-child { margin-top:0; }
  .filters label { display:flex; gap:8px; align-items:center; font-size:14px; padding:5px 0; cursor:pointer; transition:color .12s; }
  .filters label:hover { color:var(--blue); }
  .filters .cats a { display:block; font-size:14px; padding:5px 0; cursor:pointer; color:var(--text2); transition:color .12s; }
  .filters .cats a:hover { color:var(--blue); }
  .pricerange { display:flex; gap:8px; }
  .pricerange input { width:50%; padding:8px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; }
  .applybtn { margin-top:10px; width:100%; padding:10px; background:var(--blue); color:#fff; border:none; border-radius:var(--radius-sm); font-weight:700; cursor:pointer; transition:filter .15s; }
  .applybtn:hover { filter:brightness(1.1); }
  .rtop { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
  .rtop b { font-size:15px; }
  .rtop select { padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card); color:var(--text); font-size:14px; font-weight:500; cursor:pointer; }
  .rtopright { display:flex; gap:8px; align-items:center; }
  .filtjump { display:none; align-items:center; gap:6px; padding:9px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card); color:var(--text); font-size:13.5px; font-weight:600; cursor:pointer; }
  .filtjump .cnt { background:var(--blue); color:#fff; font-size:11px; font-weight:800; border-radius:9px; padding:1px 6px; }
  .filtclose { display:none; }
  .filterbackdrop { display:none; }
  /* .filtactions (Sıfırla + Nəticələri göstər) yalnız mobil drawer-in altbaşlığıdır —
     masaüstündə filtrlər onsuz da dərhal tətbiq olunur və nəticələr yanaşı görünür,
     ona görə "Nəticələri göstər" düyməsi masaüstündə mənasızdır: gizlədirik. */
  .filtactions { display:none; }
  @media (max-width:800px) {
    .filtjump { display:inline-flex; }
    /* Mobil filtr paneli: sağdan sürüşən "drawer" (əvvəllər nəticələrin
       altında idi — istifadəçi görmək üçün bütün siyahını aşağı sürüşdürməli
       olurdu). Seçim edəndə bağlanmır: açıq/bağlı vəziyyət JS-də saxlanılır
       və hər renderResults() çağırışında eyni cür bərpa olunur. */
    /* Drawer: flex-sütun — başlıq (sabit), sürüşən orta hissə (.filtscroll,
       flex:1), altda sabit düymələr (.filtactions). Bu quruluş "düymələr az
       filtr olanda ortada boşluqda asılı qalır" problemini həll edir: onlar
       həmişə panelin ən altındadır, kontent isə yalnız orta hissədə sürüşür.
       (align-self:auto — grid item-in align-self:start + position:fixed
       Chromium-da hündürlüyü pozur, ona görə sıfırlanır.) */
    aside.filters { position:fixed; top:0; right:0; bottom:0; width:88%; max-width:360px;
      z-index:95; margin:0; padding:0; border-radius:0; overflow:hidden; align-self:auto;
      display:flex; flex-direction:column;
      transform:translateX(105%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
      box-shadow:-10px 0 30px rgba(2,6,23,.25); }
    aside.filters.show { transform:translateX(0); }
    .filterbackdrop { display:block; position:fixed; inset:0; background:rgba(8,15,30,.55); z-index:94;
      opacity:0; pointer-events:none; transition:opacity .2s; }
    .filterbackdrop.show { opacity:1; pointer-events:auto; }
    .filtclose { display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
      padding:16px 18px 12px; border-bottom:1px solid var(--border); }
    .filtclose b { font-size:16px; }
    .filtclose span.x { cursor:pointer; font-size:26px; line-height:1; color:var(--muted); padding:4px 10px; }
    .filtscroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px 18px 8px; }
    .filters label { padding:10px 0; font-size:15px; }
    .filters .cats a { padding:10px 0; font-size:15px; }
    .filters input[type=checkbox] { width:20px; height:20px; flex-shrink:0; }
    .filtactions { flex-shrink:0; background:var(--card); padding:12px 18px calc(12px + env(safe-area-inset-bottom));
      display:flex; gap:8px; border-top:1px solid var(--border); box-shadow:0 -4px 14px rgba(2,6,23,.06); }
    .filtresetbtn { flex:1; padding:13px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); font-weight:700; cursor:pointer; color:var(--text2); font-size:14px; }
    .filtactions .applybtn { flex:2; margin-top:0; padding:13px; }
    /* Panel daxilində "Tətbiq et" (qiymət) düyməsi artıq lazım deyil — altdakı
       "Nəticələri göstər" onsuz da filtri tətbiq edir; masaüstündə görünür. */
    aside.filters .pricerange + .applybtn { display:none; }
  }
  .pagination { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:24px; }
  .pagination .pgbtn { min-width:36px; height:36px; padding:0 8px; border:1px solid var(--border);
      background:var(--card); border-radius:8px; cursor:pointer; font-size:14px; font-weight:600;
      color:var(--text2); text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
  .pagination .pgbtn:hover { border-color:var(--blue); color:var(--blue); }
  .pagination button { min-width:36px; height:36px; padding:0 8px; border:1px solid var(--border); background:var(--card); border-radius:8px; cursor:pointer; font-size:14px; font-weight:600; color:var(--text2); }
  .pagination button:hover:not(:disabled) { border-color:var(--blue); color:var(--blue); }
  .pagination button.active { background:var(--blue); color:#fff; border-color:var(--blue); }
  .pagination button:disabled { opacity:.4; cursor:not-allowed; }
  .pagination .pgap { color:var(--muted); padding:0 4px; }

  .crumb { font-size:13px; color:var(--muted); margin-bottom:12px; }
  .crumb a { color:var(--blue); cursor:pointer; }
  .pcard { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:26px; margin-bottom:18px; box-shadow:var(--shadow-sm); }
  .pcard h1 { font-size:22px; font-weight:800; letter-spacing:-.3px; margin-bottom:5px; }
  .phero { display:grid; grid-template-columns:280px 1fr; gap:26px; }
  @media (max-width:800px) { .phero { grid-template-columns:1fr; } }
  /* align-self:start ŞƏRTDİR: qrid elementi susmaqla sətrin hündürlüyünə
     DARTILIR — mağaza sayı çoxaldıqca (2026-07-26: 6 mağazalı məhsulda ölçdüm)
     280x1023px boş ağ qutu yaranırdı, şəkil isə ortada 250x250 qalırdı. */
  .pheroimg { background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm);
              min-height:240px; max-height:320px; align-self:start;
              display:flex; align-items:center; justify-content:center; padding:14px; }
  .pheroimg img { max-width:100%; max-height:280px; object-fit:contain; }
  /* Mobil məhsul səhifəsi: şəkil böyük olduğu üçün ƏSAS məlumat — qiymət/ən ucuz
     təklif — ekranın altına düşürdü. Qiymət müqayisə saytında istifadəçi məhz
     qiyməti görmək üçün gəlir, ona görə telefonda şəkli bir az kiçildib başlığı
     yığcamlaşdırırıq ki, "ən ucuz" təklifi daha tez görünsün (psixologiya: dəyər
     təklifi nə qədər tez görünsə, tərk-etmə (bounce) bir o qədər az olur). */
  @media (max-width:700px) {
    .pcard { padding:18px; }
    .pcard h1 { font-size:19px; }
    .phero { gap:14px; }
    .pheroimg { min-height:auto; padding:10px; }
    .pheroimg img { max-height:210px; }
  }
  .offer { display:flex; justify-content:space-between; align-items:center; border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 16px; margin-top:8px; transition:box-shadow .15s,border-color .15s; }
  .offer:hover { box-shadow:var(--shadow-sm); }
  .offer.best { border:2px solid var(--green); background:var(--green-light); }
  .offer .st b { font-size:15.5px; font-weight:700; }
  .offer .stars { color:#f59e0b; font-size:13px; }
  .offer .st small { color:var(--muted); display:block; font-size:12px; margin-top:2px; }
  /* Mağazanın çatdırılma qeydi ("50 AZN-dən yuxarı pulsuz...") — yaşıl vurğu */
  .offer .st small.delivnote { color:var(--green); }
  /* Yekun qiymət (məhsul + çatdırılma) — təklif sətrində qiymətin altında */
  .deliv { font-size:11.5px; font-weight:600; margin-top:3px; }
  .deliv.free { color:var(--green); }
  .deliv.paid { color:var(--text); }
  .deliv.paid b { color:var(--blue); }
  .deliv.unk  { color:var(--muted); font-weight:500; }
  .offer .pr { text-align:right; }
  .offer .pr .v { font-weight:800; font-size:19px; letter-spacing:-.3px; }
  .offer .pr .ov { color:var(--muted); text-decoration:line-through; font-size:13px; margin-right:6px; }
  .gobtn { display:inline-block; margin-top:6px; background:linear-gradient(135deg,var(--cta),var(--cta2)); color:var(--cta-text); padding:9px 18px; border-radius:8px; font-weight:700; font-size:14px; box-shadow:0 4px 12px rgba(255,106,0,.25); transition:transform .15s,box-shadow .15s; }
  .gobtn:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(255,106,0,.35); }
  .tag-best { background:var(--badge); color:#fff; font-size:11px; font-weight:700; padding:3px 9px; border-radius:10px; margin-left:8px; vertical-align:middle; letter-spacing:.2px; white-space:nowrap; }
  /* Outlet/açıq-qutu təklifi — eyni məhsulda birləşir, amma vəziyyəti etiketlə bildirilir */
  .tag-outlet { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px; margin-left:8px; vertical-align:middle; white-space:nowrap; }
  /* Variant seçici — eyni məhsulun rəng/yaddaş/ölçü versiyaları arasında keçid */
  .varsel { margin:12px 0 14px; }
  .varlabel { font-size:13px; font-weight:700; color:var(--text2); margin-bottom:8px; }
  .varchips { display:flex; flex-wrap:wrap; gap:8px; }
  .varchip { display:flex; flex-direction:column; align-items:flex-start; gap:1px; background:var(--card); border:1.5px solid var(--border); border-radius:10px; padding:8px 13px; cursor:pointer; transition:border-color .15s,box-shadow .15s,transform .12s; font-family:inherit; text-align:left; }
  .varchip:hover { border-color:var(--blue); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
  .varchip.on { border-color:var(--blue); background:var(--blue-light); cursor:default; }
  .varchip .vlbl { font-size:13.5px; font-weight:700; color:var(--text); }
  .varchip .vprice { font-size:12px; color:var(--green); font-weight:700; }
  .varchip.oos { opacity:.55; }
  .varchip.oos .vprice { color:var(--muted); }
  .varchips { position:relative; }
  /* Şəbəkə sütunu `1fr` = minmax(auto,1fr): tək sətirlik (nowrap) variant zolağı sütunun
     minimum enini öz məzmun eninə (1300px) qaldırır və telefonda BÜTÜN səhifə yana
     sürüşürdü (ölçüldü: scrollWidth 690 > 390). `min-width:0` sütunu ekrana bağlayır,
     zolaq isə öz içində sürüşür. */
  .phero > * { min-width:0; }
  /* TƏKLİF XÜLASƏSİ + YIĞILAN SİYAHI (2026-09-15, dizayn yeniləməsi) */
  .offsum { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 14px;
    background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 16px; margin-top:12px; }
  .offsum-main { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:14px; }
  .offsum-main b { font-weight:800; }
  .offsum-range { font-weight:700; color:var(--text); }
  .savechip { background:var(--green-light); color:var(--green); border:1px solid var(--green); font-size:12px; font-weight:700; padding:2px 9px; border-radius:999px; white-space:nowrap; }
  .offsum-note { font-size:12px; color:var(--muted); }
  .offers.collapsed .offer.extra { display:none; }
  .moreoffers { display:block; width:100%; min-height:44px; margin-top:8px; background:var(--card); color:var(--blue); border:1.5px dashed var(--border); border-radius:var(--radius-sm); font-size:14px; font-weight:700; cursor:pointer; }
  .moreoffers:hover { border-color:var(--blue); background:var(--blue-light); }
  /* MOBİL VARİANT ZOLAĞI: 8 variant əvvəl alt-alta 4 sətir tuturdu və mağaza qiymətlərini
     ekrandan aşağı itələyirdi. Telefonda tək sətir, barmaqla üfüqi sürüşür. */
  @media (max-width:700px) {
    .varchips { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; padding-bottom:4px; scrollbar-width:none; }
    .varchips::-webkit-scrollbar { display:none; }
    .varchip { flex:0 0 auto; scroll-snap-align:start; }
    .offsum { padding:9px 12px; }
  }
  /* Mobil təklif (mağaza) sətri: masaüstündə mağaza | qiymət yan-yana (space-
     between) yaxşı görünür, amma telefonda sıxışıb "ƏN UCUZ" nişanı iki sətrə
     qırılır və qiymət/taksit/düymə bir-birinə girirdi. Telefonda ŞAQULİ yığırıq:
       Sətir 1: mağaza adı + ulduz + "ƏN UCUZ"
       Sətir 2: stok/tarix
       Sətir 3: köhnə→yeni qiymət + taksit + [Mağazaya keç] (sağda). */
  @media (max-width:700px) {
    .offer { flex-wrap:wrap; padding:14px; gap:6px; }
    .offer .st { flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
    .offer .st small { flex:1 1 100%; margin-top:2px; }
    .tag-best { margin-left:0; }
    .offer .pr { flex:1 1 100%; text-align:left; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:2px; }
    .offer .pr br { display:none; }
    .offer .pr .gobtn { margin-top:0; margin-left:auto; padding:11px 20px; }
    /* QİYMƏT + DÜYMƏ BİR SƏTİRDƏ (2026-09-15): köhnə qiymət + qiymət + düymə 390px
       telefonda ~314px tuturdu, sahə ~290px idi — düymə ayrıca sətrə düşür və hər
       təklif ~50px uzanırdı. Düymə bir az daralır (hündürlük 40px qalır, toxunma
       hədəfi ≥32px), köhnə qiymət xırdalanır. */
    .offer .pr { gap:6px 10px; }
    .offer .pr .ov { font-size:12px; margin-right:0; }
    /* Toxunma hədəfi 44px (Apple HIG tövsiyəsi; ölçüldü: 40px idi) — bu, saytın
       əsas konversiya düyməsidir, ona görə tam ölçü verilir. */
    .offer .pr .gobtn { padding:13px 14px; font-size:13.5px; }
  }
  /* KİÇİK TELEFON (≤380px, məs. 360px Android): sahə ~260px-dir, köhnə qiymət + qiymət +
     düymə ~283px. Köhnə (üstü xətli) qiymət qiymətin ÜSTÜNƏ öz xırda sətrinə keçir,
     qiymət və düymə yenə bir sətirdə qalır. */
  @media (max-width:380px) {
    .offer .pr .ov { flex:1 1 100%; order:-1; margin-bottom:-4px; }
    .offer .inst { margin-top:0; }
    .instsel { max-width:none; font-size:13px; padding:8px 10px; }
  }
  .twocol { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:800px) { .twocol { grid-template-columns:1fr; } }
  /* Məhsul rəyləri */
  .rstars { color:#f59e0b; letter-spacing:1px; }
  .rsum { display:flex; align-items:center; gap:10px; font-size:18px; margin-bottom:14px; }
  .rsum b { font-size:18px; }
  .rsum .rcnt { font-size:13.5px; color:var(--muted); font-weight:600; }
  .rlist { display:flex; flex-direction:column; gap:14px; margin-bottom:18px; }
  .ritem { border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; }
  .rhead { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13.5px; }
  .rhead .rdate { color:var(--muted); font-size:12.5px; margin-left:auto; }
  .rmine { background:var(--blue-light); color:var(--blue); font-size:11px; font-weight:700; padding:2px 7px; border-radius:8px; }
  .rcomment { margin-top:6px; font-size:14px; line-height:1.5; color:var(--text2); white-space:pre-wrap; word-break:break-word; }
  .rform { border-top:1px solid var(--border); padding-top:16px; }
  .rform textarea { width:100%; min-height:70px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; margin-bottom:9px; resize:vertical; }
  .rform input[type=text] { width:100%; max-width:280px; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; margin-bottom:10px; display:block; }
  .rpick { font-size:30px; line-height:1; margin-bottom:12px; user-select:none; }
  .rpick .rstar { color:#d1d9e6; cursor:pointer; transition:color .1s,transform .1s; padding:0 2px; }
  .rpick .rstar:hover { transform:scale(1.15); }
  .rpick .rstar.on { color:#f59e0b; }
  .rmsg { margin-left:12px; color:var(--green); font-weight:600; font-size:13.5px; }
  .rformlogin { border-top:1px solid var(--border); padding-top:16px; }
  .titlestars { display:inline-flex; align-items:center; gap:5px; font-size:14px; color:var(--muted); font-weight:600; cursor:pointer; margin-bottom:6px; }
  table.specs { width:100%; border-collapse:collapse; font-size:14px; }
  .specs td { padding:8px 10px; border-bottom:1px solid var(--border); }
  .specs td:first-child { color:var(--muted); width:42%; }
  .alertbox input { padding:9px 12px; border:1px solid var(--border); border-radius:8px; font-size:14px; width:100%; margin-top:8px; }
  .alertbox button { margin-top:10px; padding:12px 16px; min-height:44px; background:var(--blue); color:#fff; border:none; border-radius:8px; font-weight:700; cursor:pointer; }
  .alertmsg { margin-top:8px; font-size:13.5px; color:var(--green); font-weight:600; }
  .legend { display:flex; gap:14px; font-size:12.5px; color:var(--muted); margin-top:6px; flex-wrap:wrap; }
  .legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; }
  /* ---- Qiymət tarixi qrafiki ---- */
  .phist { position:relative; }
  .phist svg { width:100%; display:block; touch-action:pan-y; }
  .phstats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:10px; }
  @media (max-width:560px){ .phstats { grid-template-columns:repeat(2,1fr); } }
  .phstat { background:var(--bg); border:1px solid var(--border); border-radius:8px;
            padding:7px 9px; min-width:0; }
  .phstat b { display:block; font-size:15px; font-weight:700; line-height:1.25;
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  @media (max-width:400px){ .phstat b { font-size:13.5px; } }
  .phstat span { font-size:11px; color:var(--muted); display:block; line-height:1.35; margin-top:2px; }
  .phstat.lo b { color:var(--green); } .phstat.hi b { color:var(--urgent); }
  .phrange { display:flex; gap:5px; margin:0 0 8px; }
  .phrange button { background:var(--bg); border:1px solid var(--border); color:var(--muted);
                    border-radius:999px; padding:3px 11px; font-size:12px; cursor:pointer; font-family:inherit; }
  .phrange button.on { background:var(--blue); border-color:var(--blue); color:#fff; font-weight:600; }
  /* Kursordan MƏSAFƏ: əvvəl cəmi 7px idi və siçan oxunun qrafiki (~20px)
     tooltip-i tam örtürdü — istifadəçi "siçanın altında çıxır" kimi görürdü.
     Artıq tooltip qiymət XƏTTİNİN özünə bağlanır və 14px yuxarı qaldırılır;
     yuxarıda yer yoxdursa aşağı çevrilir (.phtip.below). */
  /* Rəng QƏSDƏN tema dəyişənindən deyil, sabitdir: tünd tema bu layihədə İKİ
     yolla gəlir ([data-theme="dark"] VƏ prefers-color-scheme) — `var(--text)`
     işlətsəm ikinci halda ağ mətn açıq fonda oxunmaz olurdu. Tooltip örtük
     elementidir, hər iki temada eyni tünd çip kimi görünməsi normadır. */
  .phtip { position:absolute; pointer-events:none; opacity:0; transition:opacity .1s;
           background:#0f172a; color:#fff; font-size:13px; line-height:1.25;
           padding:6px 10px; border-radius:8px; white-space:nowrap; z-index:5;
           box-shadow:0 4px 14px rgba(0,0,0,.35);
           transform:translate(-50%,-100%); }
  .phtip.below { transform:translate(-50%,0); }
  .phtip.on { opacity:1; }
  .phtip i { font-style:normal; opacity:.72; font-size:11.5px; margin-right:6px; }
  .phtip b { font-weight:800; font-size:14px; letter-spacing:.2px; }
  /* Tünd temada --text açıq rəngdir → ağ mətn oxunmaz olur, mətni tündləşdiririk */
  .phnote { font-size:12.5px; color:var(--muted); margin-top:8px; line-height:1.5; }
  .phflat { background:var(--bg); border:1px solid var(--border); border-radius:10px;
            padding:14px; font-size:13.5px; color:var(--text); line-height:1.55; }
  footer { background:linear-gradient(180deg,var(--navy),#081729); color:rgba(255,255,255,.72); margin-top:56px; padding:38px 0; font-size:13.5px; }
  .frow { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:22px; }
  footer b { color:#fff; font-weight:700; display:block; margin-bottom:12px; }
  footer a { display:block; padding:4px 0; cursor:pointer; transition:color .12s; }
  footer a:hover { color:#fff; }
  .empty { color:var(--muted); padding:50px 0; text-align:center; grid-column:1/-1; font-size:14.5px; }
  .loadgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
  .skel { height:280px; border-radius:var(--radius); background:linear-gradient(100deg,#eef1f6 30%,#f8fafc 50%,#eef1f6 70%); background-size:200% 100%; animation:skel-shine 1.3s ease-in-out infinite; }
  [data-theme="dark"] .skel { background:linear-gradient(100deg,#16203a 30%,#1d2a49 50%,#16203a 70%); background-size:200% 100%; }
  @media (prefers-color-scheme:dark) {
    :root:not([data-theme="light"]) .skel { background:linear-gradient(100deg,#16203a 30%,#1d2a49 50%,#16203a 70%); background-size:200% 100%; }
  }
  @keyframes skel-shine { 0%{background-position:120% 0;} 100%{background-position:-20% 0;} }

  .cmpchk { position:absolute; top:10px; right:10px; z-index:2; background:var(--card); border:1px solid var(--border); border-radius:7px; padding:4px 8px; font-size:11px; color:var(--muted); display:flex; align-items:center; gap:4px; cursor:pointer; box-shadow:0 2px 6px rgba(2,6,23,.08); }
  /* ONAY QUTUSU MƏCBUR İŞIQLI SXEMDƏ (2026-08-17, 4x yaxınlaşdırma ilə görüldü).
     Səhifəyə `color-scheme: dark` verildikdə brauzer onay qutusunu da tünd
     çəkir — nəticədə tünd navy `.cmpchk` qutusunun İÇİNDƏ tünd boz kvadrat
     alınır və müqayisə funksiyasının mövcudluğu praktik olaraq görünmür
     (yanındakı ürək ikonasının aydın konturu var, bunun yox).
     Yalnız BU element üçün işıqlı sxem: qutu açıq rəngdə çəkilir və tünd
     fonun üstündə seçilir. `accent-color` isə işarələnmiş halı sayt mavisinə
     bağlayır, brauzerin standart mavisinə yox. */
  .cmpchk input { margin:0; cursor:pointer; color-scheme:light; accent-color:var(--blue); }
  .cmpchk:has(input:checked) { border-color:var(--blue); color:var(--blue); background:var(--blue-light); }
  #cmpbar { position:fixed; left:0; right:0; bottom:0; background:var(--navy); color:#fff; padding:12px 0 calc(12px + env(safe-area-inset-bottom)); z-index:50; box-shadow:0 -4px 16px rgba(2,6,23,.2); display:none; }
  #cmpbar.show { display:block; }
  #cmpbar .wrap { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  #cmpbar button { padding:9px 18px; border:none; border-radius:8px; font-weight:700; cursor:pointer; font-size:14px; }
  #cmpbar .go { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:var(--navy); }
  #cmpbar .go:disabled { opacity:.5; cursor:not-allowed; }
  #cmpbar .clear { background:rgba(255,255,255,.15); color:#fff; }
  /* Mobil "yapışqan" alış zolağı — məhsul səhifəsində ekranın altında sabit qalır ki,
     istifadəçi uzun səhifəni aşağı sürüşdürəndə də ən yaxşı qiymət + "Mağazaya keç"
     həmişə əl altında olsun (mobil konversiya pattern-i). Yalnız telefonda görünür. */
  #buybar { position:fixed; left:0; right:0; bottom:0; background:var(--card); border-top:1px solid var(--border); padding:9px 14px calc(9px + env(safe-area-inset-bottom)); z-index:49; box-shadow:0 -4px 16px rgba(2,6,23,.12); display:none; }
  #buybar .wrap { display:flex; align-items:center; gap:12px; max-width:1200px; margin:0 auto; }
  #buybar .bbinfo { display:flex; flex-direction:column; line-height:1.15; min-width:0; }
  #buybar .bblabel { font-size:11px; color:var(--muted); font-weight:600; }
  #buybar .bbprice { font-size:20px; font-weight:800; color:var(--navy); }
  #buybar .bbprice .bbold { font-size:12px; font-weight:600; color:var(--muted); text-decoration:line-through; margin-left:6px; }
  #buybar .bbstore { font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #buybar .bbgo { margin-left:auto; background:linear-gradient(135deg,var(--cta),var(--cta2)); color:var(--cta-text); padding:13px 22px; border-radius:10px; font-weight:700; font-size:15px; white-space:nowrap; box-shadow:0 4px 12px rgba(255,106,0,.28); text-decoration:none; }
  @media (max-width:700px) { #buybar.show { display:block; } body.hasbuybar { padding-bottom:74px; } }
  /* E-poçt təsdiqi zolağı — səhifənin ən üstündə, `out`-dan kənarda (render onu silməsin). */
  #verifybar { background:#fff4e5; border-bottom:1px solid #f0c894; color:#7a4a00; font-size:13.5px;
    padding:10px 16px; display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; }
  #verifybar button { background:var(--navy); color:#fff; border:0; border-radius:8px; padding:7px 14px;
    font-weight:600; font-size:13px; cursor:pointer; }
  #verifybar button:disabled { opacity:.6; cursor:default; }
  :root[data-theme="dark"] #verifybar { background:#3a2a10; border-bottom-color:#5a4420; color:#ffd9a0; }
  /* border-collapse:separate (collapse deyil) — yapışqan sol sütunun qeyri-şəffaf fonu
     yana sürüşən sütunların üstünü etibarlı örtsün (collapse-də fon altdan sızır). */
  table.cmptable { width:100%; border-collapse:separate; border-spacing:0; }
  table.cmptable td { padding:10px 14px; border-bottom:1px solid var(--border); text-align:center; vertical-align:middle; font-size:13.5px; }
  /* Sıra başlığı sütunu horizontal sürüşmə zamanı görünən qalsın (yapışqan sol sütun)
     ki, istifadəçi cədvəli yana sürüşdürəndə hansı xüsusiyyətə baxdığını itirməsin. */
  table.cmptable td.cmplabel { text-align:left; color:var(--muted); font-weight:600; white-space:nowrap; position:sticky; left:0; background:var(--card); z-index:1; box-shadow:1px 0 0 var(--border); }
  table.cmptable.diffonly tr.cmpsame { display:none; }
  @media (max-width:700px) {
    /* Yan padding-i sıfırla ki, yapışqan sol sütun kart kənarına tam söykənsin və
       sürüşən sütunlar padding boşluğundan sızmasın; başlıq/toggle üçün padding-i qaytar. */
    .cmpwrap { padding-left:0; padding-right:0; }
    .cmpwrap > div:first-child { padding:0 14px; }
    table.cmptable td { padding:9px 10px; font-size:12.5px; }
    table.cmptable td:not(.cmplabel) { min-width:130px; }
    table.cmptable td.cmplabel { white-space:normal; max-width:118px; padding-left:14px; }
  }

  .acctarea { display:flex; align-items:center; gap:8px; }
  .acctbtn { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.12); padding:9px 14px; border-radius:9px; cursor:pointer; font-size:13.5px; font-weight:600; white-space:nowrap; transition:background .15s; }
  .acctbtn:hover { background:rgba(255,255,255,.2); }
  /* Uzun e-poçt başlığı dağıtmasın — kəsilir, tam mətn `title`-dadır. */
  .acctuser { max-width:190px; overflow:hidden; text-overflow:ellipsis; }
  /* 104 -> 150px (2026-08-17, ÖLÇÜLDÜ). @-dan əvvəlki hissə göstərilir
     (bax `hesabAdi`), amma 104px hədd onu da kəsirdi: "rovshan2299" üçün
     113px lazımdır. Başlığın 1-ci sətrində 412px-dən 296px doludur, yəni
     ~60px boş yer var — 150px hədd həm bu adı tam göstərir, həm uzun adda
     daşmağa imkan vermir. */
  @media(max-width:640px){ .acctuser { max-width:150px; } }
  .modal-overlay { display:none; position:fixed; inset:0; background:rgba(8,15,30,.6); backdrop-filter:blur(2px); z-index:100; align-items:center; justify-content:center; }
  .modal-overlay.show { display:flex; }
  .modal { background:var(--card); border-radius:18px; padding:30px; width:370px; max-width:90vw; position:relative; box-shadow:var(--shadow-lg); }
  .modal h3 { font-size:19px; font-weight:800; margin-bottom:18px; }
  /* FORMA ELEMENTLƏRİ TEMAYA TABE OLMALIDIR (2026-08-17).
     Bura qədər HEÇ BİR forma elementi `background`/`color` təyin etmirdi, ona
     görə hamısı brauzerin standartına — AĞ fona və qara mətnə — düşürdü.
     İşıqlı temada bu görünmürdü, qaranlıq temada isə giriş modalı, qiymət
     filtri, rəy formu və qiymət bildirişi qutusu tünd fonun üstündə parlaq ağ
     lövhələr kimi çıxırdı.
     `--bg` seçilir, `--card` yox: modalın öz fonu `--card`-dır, input eyni
     rəngdə olsa sərhəd itir. `--bg` hər iki temada kartdan fərqlənir
     (işıqlı #f6f8fb / #fff, qaranlıq #0d1424 / #16203a).
     Onay qutusu və radio ISTISNADIR — onlarda fon vermək brauzerin öz
     işarəsini (tik) sındırır.
     `:not()` DEYİL, `:where()` İŞLƏDİLİR — bu, qaydanın xüsusiliyini SIFIR
     saxlayır. `:not()` öz arqumentinin xüsusiliyini əlavə edir, ona görə ilk
     yazılışda seçici (0,3,1) olub `.searchbar input`-u (0,1,1) üstələdi və
     QƏSDƏN ağ olan axtarış qutusunu boz etdi (ölçüldü: fon #f6f8fb çıxdı,
     halbuki navy başlıq üstündə ağ olmalıdır). `:where()` ilə qayda sadəcə
     standart rəngi əvəz edir, mövcud seçicilərin heç birini basmır. */
  input:where(:not([type=checkbox]):not([type=radio]):not([type=range])),
  select, textarea { background:var(--bg); color:var(--text); }
  input::placeholder, textarea::placeholder { color:var(--muted); opacity:1; }
  .modal input { width:100%; padding:11px 13px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; margin-bottom:10px; transition:border-color .15s; }
  .modal input:focus { outline:none; border-color:var(--blue); }
  .modal button.primary { width:100%; padding:12px; background:linear-gradient(135deg,var(--blue),#2563eb); color:#fff; border:none; border-radius:var(--radius-sm); font-weight:700; cursor:pointer; margin-top:4px; transition:filter .15s; }
  .modal button.primary:hover { filter:brightness(1.08); }
  .modal .switch { text-align:center; margin-top:16px; font-size:13.5px; color:var(--muted); }
  .modal .switch a { color:var(--blue); cursor:pointer; font-weight:600; }
  .modal .close { position:absolute; top:16px; right:18px; cursor:pointer; color:var(--muted); font-size:22px; line-height:1; }
  .modal .err { color:var(--urgent); font-size:13px; min-height:16px; margin-bottom:4px; font-weight:500; }
  /* ═══ ŞİFRƏ SAHƏSİ (2026-09-12, istifadəçi istəyi: "göz işarəsi yoxdur") ═══
     Şifrə yazarkən nə yazdığını görmək mobil klaviaturada ən çox istənilən
     funksiyadır (səhv simvol yazmaq, avtodüzəliş). `.pwwrap` inputun ətrafına
     JS ilə əlavə olunur (bax `enhancePasswords`), ona görə bütün mövcud VƏ
     gələcək şifrə sahələri avtomatik qazanır. Aşağıdakı boşluq (`margin-bottom`)
     inputdan sarğıya KÖÇÜRÜLÜR ki, forma sıxılmasın. */
  .pwwrap { position:relative; margin-bottom:10px; }
  .modal .pwwrap input, .pwwrap input { margin-bottom:0; padding-right:44px; }
  .pweye { position:absolute; top:0; right:0; height:100%; width:42px; display:flex;
    align-items:center; justify-content:center; background:none; border:0; padding:0;
    cursor:pointer; color:var(--muted); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
  .pweye:hover { color:var(--text); }
  .pweye:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }
  .pweye svg { width:19px; height:19px; }
  .pwnote { font-size:12px; line-height:1.5; margin:-2px 0 8px; display:none; }
  .pwnote.show { display:block; }
  .pwcaps { color:#b45309; }
  .pwbar { height:4px; border-radius:3px; background:var(--border); margin:-2px 0 4px; overflow:hidden; display:none; }
  .pwbar.show { display:block; }
  .pwbar i { display:block; height:100%; width:0; border-radius:3px; transition:width .2s, background .2s; }
  /* ═══ TOAST (2026-09-12) — `alert()` əvəzi.
     `alert()` səhifəni DONDURUR və mobil brauzerdə "qiyasla.com deyir:" başlığı
     ilə çıxır (kobud görünür). Toast eyni məlumatı bloklamadan verir; klaviatura
     ilə işləyənlər üçün `role=status` + `aria-live=polite` qoyulub ki, ekran
     oxuyucu mətn dəyişikliyini oxusun. YUXARIDA yerləşir, çünki aşağıda
     `#buybar`, `#cmpbar` və kuki zolağı var. */
  #toastwrap { position:fixed; top:calc(env(safe-area-inset-top) + 72px); left:50%;
    transform:translateX(-50%); z-index:300; display:flex; flex-direction:column;
    gap:8px; align-items:center; pointer-events:none; width:max-content; max-width:92vw; }
  .toast { background:var(--card); color:var(--text); border:1px solid var(--border);
    border-left:4px solid var(--blue); box-shadow:var(--shadow-lg); border-radius:10px;
    padding:11px 16px; font-size:14px; font-weight:600; opacity:0; transform:translateY(-8px);
    transition:opacity .18s, transform .18s; pointer-events:auto; max-width:100%; }
  .toast.show { opacity:1; transform:none; }
  .toast.ok { border-left-color:var(--green); }
  .toast.err { border-left-color:var(--urgent); }
  /* ═══ YUXARI QALX (2026-09-12) — kateqoriya siyahıları 60+ məhsuldur,
     mobil ekranda başlığa qayıtmaq üçün onlarla sürüşdürmə lazım gəlirdi. */
  #totop { position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom));
    z-index:90; width:44px; height:44px; border-radius:50%; border:1px solid var(--border);
    background:var(--card); color:var(--text); box-shadow:var(--shadow-lg); cursor:pointer;
    display:none; align-items:center; justify-content:center; padding:0; }
  #totop.show { display:flex; }
  #totop:hover { filter:brightness(1.06); }
  /* Alt panellər görünəndə düymə onların üstünə qalxır (kuki zolağı ilə eyni məntiq). */
  body.hasbuybar #totop { bottom:calc(80px + env(safe-area-inset-bottom)); }
  body:has(#cmpbar.show) #totop { bottom:calc(76px + env(safe-area-inset-bottom)); }
  /* KUKİ ZOLAĞI İLƏ TOQQUŞMA (brauzer testində tapıldı — Playwright "cookiebar
     intercepts pointer events" dedi): zolaq bütün eni tutur, ona görə sağ-alt
     düymə onun ALTINDA qalırdı və İLK ZİYARƏTDƏ basıla bilmirdi. Hündürlük
     mobil/masaüstündə fərqlidir, ona görə təxmin edilmir — JS ölçüb
     `--cookieh` dəyişəninə yazır (bax `hascookie` izləyicisi). */
  body.hascookie #totop { bottom:calc(var(--cookieh, 0px) + 16px + env(safe-area-inset-bottom)); }
  /* ═══ ŞƏBƏKƏ ZOLAĞI (2026-09-12) — sayt PWA kimi quraşdırıla bilir, yəni
     internetsiz də açılır. Əvvəl bu halda yalnız boş siyahı görünürdü. */
  #netbar { position:fixed; left:0; right:0; top:0; z-index:400; background:#b45309;
    color:#fff; font-size:13px; font-weight:600; text-align:center; padding:7px 12px;
    transform:translateY(-100%); transition:transform .2s; }
  #netbar.show { transform:none; }
  #netbar.ok { background:var(--badge); }
  /* ═══ AXTARIŞI TƏMİZLƏ (2026-09-12) — uzun sorğunu mobil klaviatura ilə
     silmək əziyyətlidir; × düyməsi bir toxunuşla təmizləyir və fokusu saxlayır. */
  .searchbar .qclear { position:absolute; right:96px; top:50%; transform:translateY(-50%);
    width:26px; height:26px; border-radius:50%; border:0; background:transparent;
    color:#64748b; cursor:pointer; display:none; align-items:center; justify-content:center;
    font-size:17px; line-height:1; padding:0; z-index:2; }
  .searchbar .qclear.show { display:flex; }
  .searchbar .qclear:hover { background:rgba(15,23,42,.08); color:#0f172a; }
  @media (max-width:700px) { .searchbar .qclear { right:78px; } }
  /* Mobil: modalı yuxarıdan başlayan sürüşə bilən qatın içində göstər ki, klaviatura
     açılanda və ya məzmun uzun olanda yuxarı hissəsi kəsilməsin; kənar boşluğu da azalt. */
  @media (max-width:700px) {
    .modal-overlay { align-items:flex-start; overflow-y:auto; padding:16px 0; }
    .modal { padding:24px 20px; width:92vw; max-width:none; margin:auto; }
    .modal h3 { margin-bottom:14px; }
  }
  .wishbtn { position:absolute; top:10px; right:10px; z-index:2; width:32px; height:32px; border-radius:50%; background:var(--card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-sm); color:var(--muted); padding:0; transition:transform .15s,color .15s,border-color .15s; }
  .wishbtn:hover { transform:scale(1.08); }
  .wishbtn.active { color:var(--urgent); border-color:var(--urgent); }
  .wishbtn.active svg.ic { fill:var(--urgent); }
  .cmpchk { top:48px; }
  /* Mobil: kiçik kartda geniş "Müqayisə" etiketi məhsul şəklinin üstünü örtüb qələbəlik
     yaradırdı. Telefonda mətni gizlədib idarəni ürək düyməsi ölçüsündə (32px) yığcam
     kvadrata çeviririk — şəkli örtmür, funksiya qalır, seçiləndə mavi olur. */
  @media (max-width:700px) {
    .cmpchk { top:47px; right:10px; width:32px; height:32px; padding:0; justify-content:center; border-radius:9px; }
    .cmpchk .cmptext { display:none; }
    .cmpchk input { width:15px; height:15px; }
  }
  /* MÜQAYİSƏ İDARƏSİ (2026-09-15, dizayn yeniləməsi).
     Telefon: 32px qutuda boş kvadrat onay qutusu şəklin üstündə "sınıq element" kimi
     görünürdü. İndi ⇄ ikonu görünür, onay qutusu şəffaf qatla bütün qutunu örtür
     (toxunma hədəfi və klaviatura fokusu qalır), seçiləndə qutu mavi olur.
     Masaüstü (siçan): etiket şəkli daim örtməsin deyə kartın üstünə gələndə, fokusda
     və ya SEÇİLİ olanda görünür. */
  .cmpchk .cmpic { display:none; width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
  @media (max-width:700px) {
    .cmpchk { position:absolute; color:var(--text2); }
    .cmpchk input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
    .cmpchk .cmpic { display:block; }
    .cmpchk:has(input:checked) { background:var(--blue); border-color:var(--blue); color:#fff; }
    .cmpchk:has(input:focus-visible) { outline:2px solid var(--blue); outline-offset:2px; }
  }
  @media (hover:hover) and (pointer:fine) and (min-width:701px) {
    .pcardm .cmpchk { opacity:0; transition:opacity .15s; }
    .pcardm:hover .cmpchk, .pcardm .cmpchk:focus-within, .pcardm .cmpchk:has(input:checked) { opacity:1; }
  }
  /* iOS Safari 16px-dən kiçik input font-size-ı fokuslananda avtomatik
     zoom edir (çox unudulan mobil detal) — mobil görüntüdə bütün input/
     select-ləri 16px-ə qaldırırıq ki, klik ediləndə səhifə "atılmasın". */
  @media (max-width:800px) {
    input, select, textarea { font-size:16px !important; }
  }