/* Faqet e dyqanit te BSS — /kategori/<linku> dhe /kerkim.
   E gjithe pamja e erret, rripi i filtrave dhe rrjeti i kartave jane te mbyllura brenda
   body.faqja_e_dyqanit, keshtu qe asnje faqe tjeter (kryesore, produkt, kasa, log-in,
   paneli admin) nuk preket. NUK linkohet "Design system/tokens/base.css": ai vendos
   body{background} pa shkalle dhe do te nxinte cdo faqe, perfshire panelin admin.

   Faqja e kerkimit mban te njejten klase plus shenjen .dyqani--kerkim; ajo nuk ka
   #filtrat, prandaj cdo rregull i rripit varet nga :has(> #filtrat:not([hidden])) dhe
   jo nga prania e klases.

   Dy gjera qe nuk preken, me qellim:
   1. Asnje filter, backdrop-filter, transform, will-change, contain, perspective ose
      opacity mbi <header> ose <footer>. #shporta eshte femije i <header>-it dhe cdo
      njera prej tyre e ri-ankoron sirtarin fiks tek pilula (CL-008). Qelqi vendoset
      mbi body.faqja_e_dyqanit > header::before.
   2. Asnje display, right, position ose transition mbi #shporta e #shporta_sidebar:
      header.js i shkruan inline, dhe inline mund cdo stylesheet.

   Tokenat vendosen mbi body, NUK mbi :root: /variables.css ri-futet ne kaskade nga
   components/produkt.css, keshtu qe nje ri-drejtim i :root-it mbishkruhet pa zhurme
   (kurthi i CL-013).

   global.css stilon elemente te zhveshur (div, img, button, a) me specifikim (0,0,1)
   dhe button:hover me (0,1,1). Prandaj NUK vendoset nje reset i gjere — nje i tille
   mbiti vete komponentet e sistemit te dizajnit dhe e shembi skenen ne 0 gjeresi
   (CL-007). Ne vend te tij cdo buton i ri deklaron shprehimisht width, display,
   padding, border (shkurtesa e PLOTE), border-radius, background, color, font,
   text-align dhe cursor — ne baze DHE ne :hover, :focus-visible, :disabled. */

@import url("/guest/bss-tokens.css");

/* ===== Shkalla e faqes dhe tokenat ===== */

body.faqja_e_dyqanit {
    /* "width: 100%" eshte i DETYRUESHEM: global.css:14-26 i jep <body> width:100vw, qe
       mban brenda vete gjeresine e shiritit te rrokullisjes dhe le 10px rrjedhje
       horizontale ne cdo gjeresi dritareje. */
    width: 100%;
    height: auto;
    min-height: 100vh;
    background: var(--bg-page);
    color: var(--text-body);
    overflow-x: hidden;

    /* kontrollet — pa --control-sm nje rregull "height: var(--control-sm)" jep 0px */
    --control-sm: 36px;
    --control-md: 46px;
    --control-lg: 58px;

    /* tokena qe bss-tokens.css nuk i ka (ai file nuk editohet) */
    --press-scale: .96;
    --radius-xs: 6px;
    --ls-mono: .02em;

    /* gjeometria e matur: header sticky top 12px plus height 64px */
    --zbritje-koke: 76px;

    /* gjeresia e rripit te filtrave */
    --gjeresia-filtrave: 280px;
}

body.faqja_e_dyqanit ::selection { background: var(--bss-cyan); color: #000 }

body.faqja_e_dyqanit main a:not([class]) { color: var(--text-link) }

/* ===== Disiplina e [hidden] =====
   Nje rregull i vetem, i hershem (0,2,1). Cdo element qe dyqan.js e ndez ose shuan e
   deklaron display-in e tij te dukshem permes :not([hidden]), keshtu qe asnje rregull
   ID (1,x,x) nuk mund t'a mbishkruaje gjendjen e fshehur. Klasa .hidden e
   global.css:223 NUK perdoret: ajo eshte display:none !important dhe e pathyeshme. */

body.faqja_e_dyqanit [hidden] { display: none }

/* ===== Kontejneri i faqes ===== */
/* .bss-wrap jeton ne index.css, qe NUK ngarkohet ketu, prandaj gjeresia shkruhet mbi
   vete #dyqani. Mbushja e siperme e kalon pilulen e header-it: ajo rri sticky ne 12px
   me lartesi 64px dhe me margin-bottom -77px, keshtu qe nuk zen hapesire ne rrjedhje. */

body.faqja_e_dyqanit #dyqani {
    width: min(calc(100% - 48px), var(--container-max));
    margin: 0 auto;
    padding: calc(var(--zbritje-koke) + 56px) 0 120px;
}

/* ===== Koka e faqes ===== */

body.faqja_e_dyqanit #koka_e_dyqanit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: auto;
    margin-bottom: 36px;
}

body.faqja_e_dyqanit #titulli_i_dyqanit {
    margin: 0;
    font: var(--type-h2);
    letter-spacing: var(--ls-heading);
    color: var(--text-strong);
    text-wrap: balance;
    overflow-wrap: anywhere;
}

body.faqja_e_dyqanit #numri_i_rezultateve {
    margin: 0;
    font: 500 13px/1.3 var(--font-mono);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--text-muted);
}

body.faqja_e_dyqanit #sasia_e_rezultateve {
    font: 700 15px/1.3 var(--font-mono);
    letter-spacing: var(--ls-mono);
    color: var(--bss-cyan);
}

/* ===== Trupi: rripi i filtrave plus rrjeti =====
   Rripi eshte kolone e vete VETEM kur #filtrat ekziston dhe nuk eshte i fshehur. Pa
   :has() kolona e pare mbetej 280px e bosh ne /kerkim (ku #filtrat nuk ekziston) dhe
   ne /kategori/e-scooter (ku nuk ka asnje faset dhe #filtrat mban hidden).
   --kolonat-rrjetes trashegohet nga #produktet_e_dyqanit, keshtu qe numri i kolonave
   ndryshohet nga nje token i vetem dhe rregullat :has() nuk kane nevoje t'a
   ri-deklarojne grid-template-columns te rrjetit. */

body.faqja_e_dyqanit #trupi_i_dyqanit {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 28px;
    width: auto;
    --kolonat-rrjetes: 4;
}

body.faqja_e_dyqanit #trupi_i_dyqanit:has(> #filtrat:not([hidden])) {
    grid-template-columns: var(--gjeresia-filtrave) minmax(0, 1fr);
    --kolonat-rrjetes: 3;
}

body.faqja_e_dyqanit #trupi_i_dyqanit:has(> #filtrat:not([hidden])) > #filtrat {
    grid-column: 1;
    grid-row: 1 / span 2;
}

body.faqja_e_dyqanit #trupi_i_dyqanit:has(> #filtrat:not([hidden])) > #produktet_e_dyqanit {
    grid-column: 2;
    grid-row: 1;
}

body.faqja_e_dyqanit #trupi_i_dyqanit:has(> #filtrat:not([hidden])) > #pa_rezultate {
    grid-column: 2;
    grid-row: 2;
}

/* ===== Shkasi i filtrave dhe sirtari ===== */
/* Mbi 1000px filtrat jane shtylle anesore qe ndjek rrokullisjen vete, ndaj shkasi nuk ka
   pune: shfaqet vetem aty ku paneli bie SIPER permbajtjes dhe humbet nga pamja.
   Majtas, sepse djathtas rri widget-i i WhatsApp-it. */
body.faqja_e_dyqanit #hap_filtrat { display: none }
body.faqja_e_dyqanit #mbyll_filtrat { display: none }

/* Mbi header-in, jo nen te: header.css:12-16 e mban ate ngjites me z-index:100, keshtu
   qe nje sirtar nen 100 e kishte koken — bashke me butonin e mbylljes — te mbuluar nga
   logoja. Nen 9990-shen e zgjedhesit, qe panelet e tij te mbeten mbi sirtarin. */
body.faqja_e_dyqanit #mbulesa_e_filtrave:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(0, 0, 0, .55);
    border: 0;
}

@media (max-width: 1000px) {
    body.faqja_e_dyqanit #hap_filtrat {
        position: fixed;
        left: 16px;
        bottom: 16px;
        z-index: 93;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        padding: 0;
        border: 1px solid var(--border-strong);
        border-radius: 50%;
        background: var(--surface-card);
        color: var(--text-strong);
        cursor: pointer;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
    }

    body.faqja_e_dyqanit #hap_filtrat > svg { width: 22px; height: 22px }

    body.faqja_e_dyqanit #mbyll_filtrat {
        display: none;
        align-items: center;
        justify-content: center;
        width: var(--control-sm);
        height: var(--control-sm);
        padding: 0;
        border: 1px solid var(--border-subtle);
        border-radius: 50%;
        background: transparent;
        color: var(--text-strong);
        cursor: pointer;
    }

    body.faqja_e_dyqanit #mbyll_filtrat > svg { width: 16px; height: 16px }

    /* Paneli i njejte, i ri-vendosur. Gjeresia matet me calc mbi 100%, JO me 100vw:
       100vw e perfshin shiritin e rrokullisjes dhe e ka kaluar buzen dy here ne kete
       projekt (CL-010, CL-026). */
    body.faqja_e_dyqanit.filtrat_hapur #filtrat:not([hidden]) {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 340px;
        max-width: calc(100% - 52px);
        max-height: none;
        z-index: 111;
        margin: 0;
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    body.faqja_e_dyqanit.filtrat_hapur #mbyll_filtrat { display: inline-flex }
    body.faqja_e_dyqanit.filtrat_hapur #hap_filtrat { display: none }
}

/* ===== Rripi i filtrave ===== */
/* #filtrat eshte <div role="navigation">, JO <nav>: header.css:106-131 ka nje rregull
   per elementin nav pa shkalle brenda @media(max-width:1000px) qe e ben cdo nav kuti te
   zeze absolute me gjeresi te plote nen header-in. */

body.faqja_e_dyqanit #filtrat {
    padding: 20px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
}

body.faqja_e_dyqanit #filtrat:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    width: auto;
    position: sticky;
    top: calc(var(--zbritje-koke) + 16px);
    max-height: calc(100vh - var(--zbritje-koke) - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--bss-blue) rgba(255, 255, 255, .04);
}

body.faqja_e_dyqanit .filtrat__koke {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    width: auto;
}

body.faqja_e_dyqanit .filtrat__titull {
    width: auto;
    margin: 0;
    font: 700 13px/1 var(--font-body);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--text-strong);
}

/* .filtrat__rivendos = .panel__rivendos (produkt.css:1149-1175), e ri-shkalluar. */

body.faqja_e_dyqanit .filtrat__rivendos {
    width: auto;
    height: var(--control-sm);
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .06);
    color: var(--text-body);
    font: 700 12px/1 var(--font-body);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

body.faqja_e_dyqanit #hiq_filtrat:not([hidden]) { display: inline-flex; align-items: center }

body.faqja_e_dyqanit .filtrat__rivendos:hover {
    width: auto;
    display: inline-flex;
    padding: 0 14px;
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-pill);
    background: rgba(79, 198, 242, .08);
    color: var(--text-strong);
    text-align: center;
    cursor: pointer;
}

body.faqja_e_dyqanit .filtrat__rivendos:focus-visible { outline: 0; box-shadow: var(--focus-ring) }

body.faqja_e_dyqanit .filtrat__rivendos:disabled {
    width: auto;
    padding: 0 14px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-faint);
    text-align: center;
    cursor: not-allowed;
}

/* ===== Grupi i nje atributi ===== */

body.faqja_e_dyqanit .grupi_i_filtrit {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: auto;
    min-width: 0;
}

body.faqja_e_dyqanit .grupi_i_filtrit + .grupi_i_filtrit {
    padding-top: 18px;
    border-top: 1px solid var(--border-hairline);
}

body.faqja_e_dyqanit .grupi__titull {
    width: auto;
    margin: 0;
    font: 600 12px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

body.faqja_e_dyqanit .grupi__vlerat {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
    width: auto;
    min-width: 0;
}

/* ===== Fasetat me fushe zgjedhjeje (renditja, marka, ngjyra) =====
   zgjedhesi.js e fut trigerin e vet si femije te PRINDIT te select-it (zgjedhesi.js:898),
   pra pikerisht ketu brenda .grupi__vlerat. Nje rresht flex do ta linte kontrollin sa
   gjeresia e tekstit te opsionit te zgjedhur dhe do t'i ndryshonte gjeresine me cdo
   zgjedhje, ndaj keto grupe kthehen ne bllok dhe kontrolli zihet i gjithi.
   Paneli i opsioneve NUK stilohet ketu: ai varet si femije i <body>-t, jashte
   body.faqja_e_dyqanit, dhe zgjedhesi.css e mban vete. */
body.faqja_e_dyqanit .grupi__vlerat:has(> select.filtri__zgjedhje) {
    display: block;
    overflow: visible;
}

body.faqja_e_dyqanit .filtri__zgjedhje,
body.faqja_e_dyqanit .grupi__vlerat > button.zgjedhesi__triger {
    width: 100%;
    max-width: 100%;
}

/* Kur skripti nuk niset, select-i nativ mbetet i vetmi kontroll: duhet te duket si pjese
   e panelit dhe jo si fusha e paracaktuar e sistemit. */
body.faqja_e_dyqanit select.filtri__zgjedhje:not(.zgjedhesi__nativ) {
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--bss-vije, rgba(255, 255, 255, 0.14));
    background: var(--bss-sfond-2, rgba(255, 255, 255, 0.04));
    color: inherit;
    font: inherit;
}

/* ===== Chip-a i vleres (.vlere) =====
   I njejti chip si ne faqen e produktit (produkt.css:927-995). .vlere eshte <button>
   me femije (.vlere__emri, .vlere__etiketa), prandaj dyqan.js DUHET te zgjidhe
   objektivin me closest(".vlere") — e.target bie mbi femijen. */

body.faqja_e_dyqanit .vlere {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .03);
    color: var(--text-strong);
    font: 700 15px/1 var(--font-mono);
    letter-spacing: var(--ls-mono);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

/* Shkurtesa e PLOTE e border-it ne :hover: nese shkruhet vetem border-color, atehere
   "border: 2px solid" i global.css:188 (button:hover, specifikim 0,1,1) rrjedh brenda
   dhe chip-i kercen 1px ne hover. */
body.faqja_e_dyqanit .vlere:hover {
    width: auto;
    display: inline-flex;
    padding: 12px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .07);
    color: var(--text-strong);
    text-align: left;
    cursor: pointer;
    transform: translateY(-1px);
}

body.faqja_e_dyqanit .vlere:focus-visible { outline: 0; box-shadow: var(--focus-ring) }

body.faqja_e_dyqanit .vlere:active { transform: scale(var(--press-scale)) }

body.faqja_e_dyqanit .vlere.selected,
body.faqja_e_dyqanit .vlere.selected:hover {
    border: 1px solid var(--bss-cyan);
    background: rgba(79, 198, 242, .08);
    color: var(--text-strong);
    box-shadow: 0 0 0 3px rgba(79, 198, 242, .14), 0 0 24px rgba(79, 198, 242, .18);
}

body.faqja_e_dyqanit .vlere:disabled {
    width: auto;
    padding: 12px 16px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .02);
    color: var(--text-faint);
    text-align: left;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

body.faqja_e_dyqanit .vlere__emri { min-width: 0; color: inherit }

body.faqja_e_dyqanit .vlere__etiketa {
    display: block;
    font: 600 10px/1 var(--font-body);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ---- Disku i ngjyres eshte vetem shenje, JO identifikim. Emri i vleres shfaqet GJITHMONE
   krah tij: pa te, dy ngjyra te ndryshme me te njejtin color_code (Desert dhe Natural)
   dukeshin fjale per fjale njesoj — ankesa e vertete e pronarit. 15px perputhet me kutine e
   rreshtit te chip-it (font: 700 15px/1), keshtu qe lartesia mbetet identike me nje chip
   teksti. Chip-i mbetet nje .vlere e zakonshme, prandaj :hover / .selected / :focus-visible /
   :disabled trashegohen pa u ri-shkruar. ---- */

body.faqja_e_dyqanit .vlere.vlere_ngjyre::before {
    content: "";
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--c, var(--ink-500));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .22);
}

/* Unaza e fokusit mbi chip-in E ZGJEDHUR: rregulli .vlere:focus-visible (0,2,1)
   humbiste ndaj glow-it te gjendjes selected (i njejti peshe, i deklaruar me pas).
   (0,4,1) e zgjidh pavaresisht rendit. */
body.faqja_e_dyqanit .vlere.selected:focus-visible,
body.faqja_e_dyqanit .vlere.vlere_ngjyre.selected:focus-visible { outline: 0; box-shadow: var(--focus-ring) }

/* ===== Rrjeti i kartave ===== */
/* Emri #produktet_e_dyqanit, JO #produktet: index.css:537 e stilon #produktet dhe
   index.js:1 e klonon pa roje. */

body.faqja_e_dyqanit #produktet_e_dyqanit {
    display: grid;
    grid-template-columns: repeat(var(--kolonat-rrjetes, 4), minmax(0, 1fr));
    gap: 16px;
    width: auto;
}

/* Mbeshtjellesi i kartes eshte i tejdukshem per rrjetin, keshtu qe .produkt_widget
   mbetet elementi i rrjetit dhe rregullat e kartes me poshte vlejne pa ndryshim.
   Rregulli [hidden] ka (0,3,1) kundrejt (0,2,0) te display:contents — dyqan.js e fsheh
   karten pa dyshim. */

body.faqja_e_dyqanit .karta_e_dyqanit { display: contents }

body.faqja_e_dyqanit .karta_e_dyqanit[hidden] { display: none }

/* ---- Karta e produktit: index.css:558-638, e ri-shkalluar. components/produkt.css
   i jep .produkt_widget width:calc(100%/6 - 20px) me specifikim (0,1,0), prandaj
   width:auto ketu (0,2,0) e mund ate edhe brenda media query-ve te tij. ---- */

body.faqja_e_dyqanit .produkt_widget {
    position: relative;
    display: flex;
    flex-direction: column;
    width: auto;
    padding: 18px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-hairline);
    background: var(--surface-card);
    box-shadow: none;
    overflow: hidden;
    transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

body.faqja_e_dyqanit .produkt_widget:hover { border-color: var(--border-accent); transform: translateY(-3px) }

body.faqja_e_dyqanit .produkt_widget .container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: auto;
    flex: 1;
    background: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

/* Fotot e katalogut kane sfond te bardhe (nuk jane prerje transparente si ato te
   sistemit te dizajnit), prandaj u jepet nje "pjate" e bardhe e qellimshme ne vend qe
   te duken si kuti te bardha te rastesishme mbi te erret. */
body.faqja_e_dyqanit .widget_image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    display: block;
    border-radius: var(--radius-md);
    background: #fff;
    transition: transform var(--dur-slow) var(--ease-out);
}

body.faqja_e_dyqanit .produkt_widget:hover .widget_image { transform: scale(1.04) }

body.faqja_e_dyqanit .produkt_widget h4 {
    margin: 0;
    font: 600 15px/1.35 var(--font-body);
    color: var(--text-strong);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.faqja_e_dyqanit .cmimi_widget {
    font: var(--type-price);
    font-size: 19px;
    color: var(--text-strong);
    letter-spacing: -.01em;
}

body.faqja_e_dyqanit .shiko_me_shume {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin-top: 16px;
    height: 46px;
    padding: 0 18px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, .04);
    font: 600 14px/1 var(--font-body);
    color: var(--text-strong);
    transition: all var(--dur-fast) var(--ease-out);
}

body.faqja_e_dyqanit .shiko_me_shume:hover {
    border-color: transparent;
    background: var(--grad-brand);
    color: #001018;
}

/* ===== Pa rezultate ===== */

body.faqja_e_dyqanit #pa_rezultate:not([hidden]) { display: block }

body.faqja_e_dyqanit #pa_rezultate {
    margin: 0;
    padding: 28px 24px;
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .02);
    font: 500 15px/1.5 var(--font-body);
    color: var(--text-muted);
    text-align: center;
}

/* ===== Header-i si "pilule" qelqi =====
   header.css e ben header-in nje shirit te zi me gjeresi te plote. Ketu behet pilula
   lundruese e sistemit te dizajnit — e njejta si ne faqen kryesore (index.css:823-884),
   keshtu qe faqet e dyqanit nuk ndryshojne pamje nga / . Asnje id/klase nuk nderrohet,
   prandaj kerkimi, shporta dhe header.js punojne njesoj. */

body.faqja_e_dyqanit > header {
    position: sticky;
    top: 12px;
    z-index: 100;
    width: min(calc(100% - 48px), var(--container-max));
    margin: 12px auto -77px;
    height: 64px;
    padding: 5px 22px;
    background: none;
}

/* Qelqi rri ne nje ::before, JO ne vete header-in: backdrop-filter mbi <header> e ben
   ate bllokun permbajtes per cdo pasardhes position:fixed, dhe shporta (#shporta)
   ankorohej tek pilula 1360px ne vend te dritares (CL-008). */
body.faqja_e_dyqanit > header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: var(--surface-glass-strong);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    box-shadow: var(--shadow-3);
}

body.faqja_e_dyqanit #search_form input {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-pill);
    color: var(--text-strong);
    box-shadow: none;
}

body.faqja_e_dyqanit #search_form input::placeholder { color: var(--text-faint) }

body.faqja_e_dyqanit #search_form input:focus-visible {
    outline: 0;
    border-color: var(--border-accent);
    box-shadow: 0 0 0 4px rgba(79, 198, 242, .18);
}

body.faqja_e_dyqanit #rezultatet {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    background: var(--surface-glass-strong);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    box-shadow: var(--shadow-float);
}

body.faqja_e_dyqanit #sasia_ne_shporte {
    background: var(--grad-brand);
    color: #001018;
    border-radius: var(--radius-pill);
}

/* ===== Menyja ne pilulen e qelqit ===== */

body.faqja_e_dyqanit > header nav a { color: var(--text-body) }

body.faqja_e_dyqanit #menu_toggle span { background-color: var(--text-strong) }

body.faqja_e_dyqanit #menu_toggle:hover span { background-color: var(--bss-cyan) }

body.faqja_e_dyqanit > header nav.menu-open {
    background: var(--surface-glass-strong);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-float);
}

body.faqja_e_dyqanit > header nav a:hover {
    background-color: rgba(255, 255, 255, .06);
    color: var(--text-strong);
    border-bottom-color: var(--bss-cyan);
}

/* ===== Rezultatet e kerkimit (header.css i ngjyros te zeza mbi te bardhe) ===== */

body.faqja_e_dyqanit .rezultat_kerkimi_produkti {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border-hairline);
    box-shadow: none;
}

body.faqja_e_dyqanit .rezultat_kerkimi_produkti:hover { border-color: var(--border-accent) }

body.faqja_e_dyqanit .titulli_i_produktit { color: var(--text-strong) }

/* duhet (0,3,0) per te mundur header.css:242 ne rendin e burimit — .cmimi vetem nuk mjafton */
body.faqja_e_dyqanit .rezultat_kerkimi_produkti .container span { color: var(--text-muted) }

body.faqja_e_dyqanit #nuk_u_gjeten_produkte { color: var(--text-muted) }

/* ===== Shporta (header.css e ben sirtarin te bardhe) =====
   NUK preken display/right/position/transition: header.js i vendos ne stil inline. */

body.faqja_e_dyqanit #shporta_sidebar {
    background: linear-gradient(180deg, rgba(21, 29, 40, .96), rgba(4, 7, 11, .98));
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    border-left: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-float);
}

body.faqja_e_dyqanit .produkt_ne_shporte {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    box-shadow: none;
}

body.faqja_e_dyqanit .produkt_ne_shporte h6 { color: var(--text-strong) }

body.faqja_e_dyqanit .karakteristikat li { color: var(--text-muted) }

body.faqja_e_dyqanit .cmim_produkt_shporte { font: var(--type-price); font-size: 16px; color: var(--text-strong) }

body.faqja_e_dyqanit .sasi_produkt_shporte {
    background: transparent;
    box-shadow: none;
    color: var(--text-strong);
    font: 700 14px/1 var(--font-mono);
}

body.faqja_e_dyqanit .qty_control button {
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--border-subtle);
    color: var(--text-strong);
}

body.faqja_e_dyqanit #shko_tek_kasa {
    background: var(--grad-brand);
    border: 0;
    color: #001018;
    box-shadow: var(--glow-blue);
}

/* ===== Vija ndarese drejt footer-it ===== */
/* footer.css linkohet nga vete partiali, keshtu qe hyn ne kaskade PAS kesaj faqeje;
   (0,1,2) e mund rregullin e tij te elementit (0,0,1) pavaresisht rendit. */

body.faqja_e_dyqanit > footer {
    background-color: var(--bg-page);
    border-top: 1px solid var(--border-hairline);
}

/* ===== Responsive =====
   Pikat e kontrollit: 1500 / 1366 / 1200 / 1024 / 1000 / 880 / 767 / 600 / 440 / 360.

   Rregulli kyc i rrjetit: numri i kolonave vjen nga --kolonat-rrjetes, dhe rripi i
   filtrave ha 280px nga rreshti. Prandaj cdo pike ka DY vlera — nje per faqen pa rrip
   (/kerkim, /kategori/e-scooter) dhe nje per faqen me rrip. Rregulli :has() ka
   specifikim me te larte, keshtu qe ai duhet ri-deklaruar edhe atje ku te dyja
   perputhen. */

/* ---- 1500px e poshte: rripi ngushtohet ---- */
@media (max-width: 1500px) {
    body.faqja_e_dyqanit { --gjeresia-filtrave: 260px }
}

/* ---- 1366px e poshte: menyja ngushtohet qe te mos shtyje kerkimin ---- */
@media (max-width: 1366px) {
    body.faqja_e_dyqanit > header nav { gap: 20px; margin-left: 6px }
    body.faqja_e_dyqanit > header nav a { font-size: 14px }
}

/* ---- 1200px e poshte: me rrip rrjeti bie ne 2 kolona ---- */
@media (max-width: 1200px) {
    body.faqja_e_dyqanit > header nav { gap: 16px }
    body.faqja_e_dyqanit #search:not(.popup-open) { width: 320px }
    body.faqja_e_dyqanit #trupi_i_dyqanit:has(> #filtrat:not([hidden])) { --kolonat-rrjetes: 2 }
    body.faqja_e_dyqanit #dyqani { padding-top: calc(var(--zbritje-koke) + 48px) }
}

/* ---- 1024px e poshte: menyja mbahet (humbiste me pare ne 1100px) ---- */
@media (max-width: 1024px) {
    body.faqja_e_dyqanit > header nav { gap: 13px }
    body.faqja_e_dyqanit > header nav a { font-size: 13px }
    body.faqja_e_dyqanit #search:not(.popup-open) { width: 240px }
    body.faqja_e_dyqanit #trupi_i_dyqanit { --kolonat-rrjetes: 3 }
    body.faqja_e_dyqanit #dyqani { padding-bottom: 96px }
}

/* ---- 1000px e poshte: rripi kalon mbi rrjetin ----
   header.css:101 i kalon menyne ne dropdown ne te njejten pike, keshtu qe rripi nuk ka
   me nevoje per kolonen e vet. Grupet rreshtohen ne dy kolona dhe chip-at e nje grupi
   behen nje rresht i rreshqitshem — perndryshe 7 fasete me 26 ngjyra shtynin rrjetin
   me se 500px poshte. */
@media (max-width: 1000px) {
    body.faqja_e_dyqanit #trupi_i_dyqanit:has(> #filtrat:not([hidden])) {
        grid-template-columns: minmax(0, 1fr);
        --kolonat-rrjetes: 3;
    }

    body.faqja_e_dyqanit #trupi_i_dyqanit:has(> #filtrat:not([hidden])) > #filtrat { grid-column: 1; grid-row: 1 }
    body.faqja_e_dyqanit #trupi_i_dyqanit:has(> #filtrat:not([hidden])) > #produktet_e_dyqanit { grid-column: 1; grid-row: 2 }
    body.faqja_e_dyqanit #trupi_i_dyqanit:has(> #filtrat:not([hidden])) > #pa_rezultate { grid-column: 1; grid-row: 3 }

    /* Paneli kufizohet ne lartesi dhe rrokulliset vete: me 7 fasete ai arrinte 663px dhe
       e shtynte TE GJITHE rrjetin nen palosje ne nje telefon 844px te larte. */
    body.faqja_e_dyqanit #filtrat:not([hidden]) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 24px;
        position: static;
        top: auto;
        max-height: min(52vh, 460px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    body.faqja_e_dyqanit .filtrat__koke { grid-column: 1 / -1 }

    /* Renditja zen te dy kolonat: ne gjysme-kolone kater opsionet e gjata ("Çmimi: nga
       me i ulëti") binin ne rreshqitje horizontale pikerisht ne kontrollin e PARE te rripit. */
    body.faqja_e_dyqanit #renditja { grid-column: 1 / -1 }

    /* Ne rrjet vija ndarese e siperme do te dilte midis dy kolonave, prandaj hiqet. */
    body.faqja_e_dyqanit .grupi_i_filtrit + .grupi_i_filtrit { padding-top: 0; border-top: 0 }

    /* Mbushja vertikale NUK pritet nga overflow: prerja behet ne skajin e kutise se
       mbushjes, keshtu qe unaza .selected (inset -5px) dhe scale(1.1) i diskut mbeten
       te dukshme. */
    body.faqja_e_dyqanit .grupi__vlerat {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px 2px;
        scrollbar-width: thin;
    }

    /* Pa "flex: 0 0 auto" chip-at shtypen deri nen gjeresine e tekstit te tyre ne vend qe
       rreshti te rrokulliset: ne 390px "12/256GB", "128GB" dhe "1TB" mbivendoseshin. */
    body.faqja_e_dyqanit .grupi__vlerat .vlere { flex: 0 0 auto }

    /* Grupet me fushe zgjedhjeje nuk rrokullisen: kontrolli eshte nje i vetem dhe i gjere
       sa grupi, ndaj overflow-x do t'i priste vetem unazen e fokusit. */
    body.faqja_e_dyqanit .grupi__vlerat:has(> select.filtri__zgjedhje) {
        flex-wrap: initial;
        overflow: visible;
        padding: 0;
    }

    body.faqja_e_dyqanit .grupi__vlerat::-webkit-scrollbar { width: 6px; height: 6px }

    body.faqja_e_dyqanit #search:not(.popup-open) { width: 360px }
}

/* ---- 880px e poshte ---- */
@media (max-width: 880px) {
    body.faqja_e_dyqanit #trupi_i_dyqanit { --kolonat-rrjetes: 2 }
    body.faqja_e_dyqanit #trupi_i_dyqanit:has(> #filtrat:not([hidden])) { --kolonat-rrjetes: 2 }
    body.faqja_e_dyqanit #search:not(.popup-open) { width: 300px }
}

/* ---- 767px e poshte ---- */
@media (max-width: 767px) {
    body.faqja_e_dyqanit #dyqani { padding: calc(var(--zbritje-koke) + 40px) 0 80px }
    body.faqja_e_dyqanit #koka_e_dyqanit { margin-bottom: 24px }
    body.faqja_e_dyqanit #trupi_i_dyqanit { gap: 20px }
    body.faqja_e_dyqanit #produktet_e_dyqanit { gap: 12px }
    body.faqja_e_dyqanit .produkt_widget { padding: 14px }
    body.faqja_e_dyqanit #filtrat { padding: 16px }

    body.faqja_e_dyqanit .vlere { padding: 10px 14px; font-size: 14px }
    body.faqja_e_dyqanit .vlere:hover { padding: 10px 14px }
}

/* ===== Celular ===== */
/* 600px duhet te perputhet me global.css:228 dhe me header.js:82 */

@media (max-width: 600px) {
    body.faqja_e_dyqanit { padding-left: 0; padding-right: 0 }

    body.faqja_e_dyqanit #dyqani { width: calc(100% - 32px) }

    /* header.css:480 i jep header-it width:100vw dhe margin-left:-20px per t'a nxjerre
       nga mbushja e body-t; ketu mbushja u anulua, prandaj duhen te dyja. */
    body.faqja_e_dyqanit > header { width: calc(100% - 24px); margin: 12px auto -77px }

    /* header.css:481 e kthen #search ne "auto" sepse fusha fshihet ne kete gjeresi dhe
       mbetet vetem butoni 30px; rregullat e mesiperme (1,2,1) e mbytnin ate dhe linin
       nje kuti 300px bosh qe e shtynte shporten jashte pilules. */
    body.faqja_e_dyqanit #search:not(.popup-open) { width: auto }

    body.faqja_e_dyqanit #search.popup-open { background-color: rgba(0, 0, 0, .94) }

    body.faqja_e_dyqanit #search.popup-open #search_form input,
    body.faqja_e_dyqanit #search.popup-open #search_form input:focus,
    body.faqja_e_dyqanit #search.popup-open #search_form input:focus-visible {
        background: rgba(255, 255, 255, .06);
        color: var(--text-strong);
    }

    body.faqja_e_dyqanit #filtrat:not([hidden]) { grid-template-columns: minmax(0, 1fr); gap: 14px }

    body.faqja_e_dyqanit #pa_rezultate { padding: 22px 18px; font-size: 14px }
}

/* ---- 440px e poshte ---- */
@media (max-width: 440px) {
    body.faqja_e_dyqanit #trupi_i_dyqanit { --kolonat-rrjetes: 2 }
    body.faqja_e_dyqanit #trupi_i_dyqanit:has(> #filtrat:not([hidden])) { --kolonat-rrjetes: 2 }
    body.faqja_e_dyqanit #produktet_e_dyqanit { gap: 10px }
    body.faqja_e_dyqanit .produkt_widget h4 { font-size: 14px }
    body.faqja_e_dyqanit .cmimi_widget { font-size: 17px }
    body.faqja_e_dyqanit .shiko_me_shume { height: 42px; font-size: 13px }
}

/* ---- 320px: dy karta nuk nxene me, kalohet ne nje shtylle ---- */
@media (max-width: 320px) {
    body.faqja_e_dyqanit #trupi_i_dyqanit { --kolonat-rrjetes: 1 }
    body.faqja_e_dyqanit #trupi_i_dyqanit:has(> #filtrat:not([hidden])) { --kolonat-rrjetes: 1 }
}

/* ---- 360px e poshte: me e ngushta qe mbeshtetet ---- */
@media (max-width: 360px) {
    body.faqja_e_dyqanit #dyqani { width: calc(100% - 24px); padding-top: calc(var(--zbritje-koke) + 32px) }
    body.faqja_e_dyqanit .produkt_widget { padding: 12px }
    body.faqja_e_dyqanit #filtrat { padding: 14px }
    body.faqja_e_dyqanit .vlere { padding: 9px 12px; font-size: 13px }
    body.faqja_e_dyqanit .vlere:hover { padding: 9px 12px }
}

/* ===== Shiritat e rrokullisjes ===== */
/* Rrokulliset vete dokumenti, prandaj duhet edhe html:has(...) — vetem
   body::-webkit-scrollbar nuk e kap shiritin kryesor (CL-007/CL-008). */

html:has(body.faqja_e_dyqanit) { scrollbar-width: thin; scrollbar-color: var(--bss-blue) rgba(255, 255, 255, .04) }

body.faqja_e_dyqanit { scrollbar-width: thin; scrollbar-color: var(--bss-blue) rgba(255, 255, 255, .04) }

html:has(body.faqja_e_dyqanit)::-webkit-scrollbar,
body.faqja_e_dyqanit ::-webkit-scrollbar { width: 10px; height: 10px }

html:has(body.faqja_e_dyqanit)::-webkit-scrollbar-track,
body.faqja_e_dyqanit ::-webkit-scrollbar-track { background: rgba(255, 255, 255, .04) }

html:has(body.faqja_e_dyqanit)::-webkit-scrollbar-thumb,
body.faqja_e_dyqanit ::-webkit-scrollbar-thumb {
    border-radius: var(--radius-pill);
    background: var(--grad-brand);
    border: 2px solid transparent;
    background-clip: padding-box;
}

html:has(body.faqja_e_dyqanit)::-webkit-scrollbar-thumb:hover,
body.faqja_e_dyqanit ::-webkit-scrollbar-thumb:hover {
    background: var(--bss-cyan);
    background-clip: padding-box;
    border: 2px solid transparent;
}

html:has(body.faqja_e_dyqanit)::-webkit-scrollbar-corner,
body.faqja_e_dyqanit ::-webkit-scrollbar-corner { background: transparent }

/* ===== prefers-reduced-motion =====
   Cdo kohezgjatje ne kete file shkruhet me var(--dur-*), keshtu qe ri-vendosja e
   tokenave i shuan TE GJITHA tranzicionet pa asnje !important dhe pa luftuar
   specifikimin. */

@media (prefers-reduced-motion: reduce) {
    body.faqja_e_dyqanit {
        --dur-fast: .01ms;
        --dur-base: .01ms;
        --dur-slow: .01ms;
    }
}