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

/* Faqja e produktit (PDP) e BSS — "VITRINA" (CL-015).
   E gjithe pamja e erret dhe e gjithe skena e re jane te mbyllura brenda
   body.faqja_e_produktit, keshtu qe asnje faqe tjeter (kryesore, kasa, log-in,
   paneli admin) nuk preket. NUK linkohet "Design system/tokens/base.css" e as
   "styles.css": base.css:3 vendos body{background} pa shkalle dhe do te nxinte cdo
   faqe, perfshire panelin admin.

   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_produktit > header::before.
   2. Asnje display, right, position ose transition mbi #shporta e #shporta_sidebar:
      header.js dhe produkt.js i shkruajne inline, dhe inline mund cdo stylesheet.

   global.css stilon elemente te zhveshur (div, img, button, input) me specifikim
   (0,0,1) dhe (0,1,1) per input[type=...]. Cdo klase e jona e mund ate, keshtu qe 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, sepse global.css:185 (button:hover) ka
   specifikim (0,1,1) dhe e mund nje klase te vetme (0,1,0) kur ajo nuk e shkruan
   vetine. */

/* ===== Shkalla e faqes dhe tokenat ===== */
/* Tokenat vendosen mbi body, NUK mbi :root: /variables.css ri-futet ne kaskade PAS
   kesaj faqeje (dy here, nga components/produkt.css), keshtu qe nje ri-drejtim i
   :root-it mbishkruhet pa zhurme (kurthi i CL-013). */

body.faqja_e_produktit {
    width: 100%;
    /* global.css:21-23 i jep <body> "height:100vh", qe e ben <body> rrotulluesin e vet
       dhe e vret header-in sticky. Rregullohet KETU, i shkallezuar: (0,1,0) mund rregullin
       e elementit (0,0,1) dhe guest/produkt.css ngarkohet pas global.css, ndaj nuk duhet
       ndryshim ne skedar te perbashket dhe asnje faqe tjeter nuk preket. */
    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;
    --dur-instant: 90ms;
    --ease-snap: cubic-bezier(.2, 0, 0, 1);
    --radius-xs: 6px;
    --shadow-1: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 1px 2px rgba(0, 0, 0, .6);
    --blur-sm: blur(8px) saturate(140%);
    --ls-mono: .02em;

    /* Shkurtesat e fontit shkruhen si LITERALE. Te sistemit te dizajnit ndertohen nga
       atome --fw dhe --fs qe produksioni nuk i ka, dhe nje perberes i pavlefshem heq
       TE GJITHE deklaraten pa zhurme. */
    --type-body: 400 16px/1.55 Montserrat, system-ui, sans-serif;
    --type-small: 500 14px/1.45 Montserrat, system-ui, sans-serif;

    /* gjeometria e matur: header sticky top 12px plus height 64px */
    --zbritje-koke: 76px;
    --gjeresia-rripit: min(100% - 48px, var(--container-max));

    /* shtresat — vetem keto tre, dhe asgje e re midis 100 dhe 9998 */
    --shtrese-shirit: 90;
    --shtrese-sinjal: 9998;
    --shtrese-dritare: 10000;

    /* vitrina: masa e miniaturave dhe kufiri i pjates se bardhe */
    --mas-miniature: 96px;
    /* Kufiri i pjates: lartesia e saj merret nga lartesia e skenes (100%) e kufizuar
       nga kjo gjatesi, dhe gjeresia vjen nga aspect-ratio — keshtu pjata e MBUSH
       skenen ne cdo lartesi dritareje dhe mbetet kuadrat. Me nje kufi te bazuar ne
       svh ajo rrudhej ne gjysmen e skenes kur hynte min-height-i i skenes
       (matur: 141px pjate brenda nje skene 300px ne dritare 415px te larte). */
    --kufi-pjate: 720px;
    --inset-pjate: 0px;
    /* Kolona e fundit ESHTE me gjeresi fikse me qellim: me "auto" ajo matet nga permbajtja,
       dhe koka e ka qelizen e fundit bosh (0px) kurse rreshtat kane butonin "Zgjidh" (71px),
       ndaj te pese kolonat e tjera ndahen ndryshe mes kokes dhe rreshtave — etiketat e kokes
       dilnin deri 36px jashte kolones se vet. */
    --kolonat-matrices: 56px minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) 80px;

    /* Kohezgjatjet shtese deklarohen si tokena, qe blloku i fundit
       prefers-reduced-motion t'i ri-vendose pa !important. */
    --dur-rise: 900ms;
    --dur-shkelqim: 1400ms;
    --dur-puls: 1800ms;
}

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

/* Keyframe-i bss-rise shpallet ne bss-tokens.css:97, por rregulli qe e perdor jeton
   ne index.css — qe nuk ngarkohet ne kete faqe, prandaj ri-deklarohet ketu. */
body.faqja_e_produktit .bss-rise { animation: bss-rise var(--dur-rise) var(--ease-out) both }

/* ===== Disiplina e [hidden] =====
   Nje rregull i vetem, i hershem (0,2,1). Cdo element qe 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_produktit [hidden] { display: none }

body.faqja_e_produktit .ikona { flex: 0 0 auto; pointer-events: none }

/* ===== Butonat e bazes ===== */

body.faqja_e_produktit .bss-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    height: var(--control-md);
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-strong);
    font: 600 16px/1 var(--font-body);
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    white-space: nowrap;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

body.faqja_e_produktit .bss-btn--primary {
    border: 1px solid transparent;
    background: var(--grad-brand);
    color: #001018;
    box-shadow: var(--glow-blue);
}

body.faqja_e_produktit .bss-btn--primary:hover {
    width: auto;
    display: inline-flex;
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--grad-brand);
    color: #001018;
    text-align: center;
    cursor: pointer;
    transform: translateY(-2px);
    box-shadow: var(--glow-cyan);
}

body.faqja_e_produktit .bss-btn--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--grad-sheen);
    background-size: 250% 100%;
    background-position: -150% 0;
    opacity: 0;
}

body.faqja_e_produktit .bss-btn--primary:hover::after { opacity: 1; animation: bss-sheen var(--dur-rise) var(--ease-out) }

body.faqja_e_produktit .bss-btn:active { transform: scale(var(--press-scale)) }

body.faqja_e_produktit .bss-btn:focus-visible { outline: 0; box-shadow: var(--focus-ring) }

/* Gjendja "pa stok": global.css i pikturon TE GJITHE butonat blu, keshtu qe :disabled
   duhet shkruar shprehimisht ose butoni i fikur vazhdon te dukete i klikueshem. */
body.faqja_e_produktit .bss-btn:disabled,
body.faqja_e_produktit .bss-btn--primary:disabled,
body.faqja_e_produktit .bss-btn--primary:disabled:hover {
    width: auto;
    display: inline-flex;
    padding: 0 28px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .05);
    color: var(--text-faint);
    text-align: center;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

body.faqja_e_produktit .bss-btn--primary:disabled::after { opacity: 0 }

/* ===== Fushat e tekstit ===== */
/* global.css:82-93 i jep input[type=number] e input[type=search] width:100%,
   border-radius:10px, box-shadow te ndritshem, padding 10px 20px dhe
   color:var(--e-zeza) — tekst I ZI mbi panel te erret. Dhe :focus-visible i
   global.css:101 nuk i mbulon as "number" as "search". Te dyja rishkruhen. */

body.faqja_e_produktit .bss-field { display: flex; flex-direction: column; gap: 8px; width: auto; flex: 0 0 auto }

body.faqja_e_produktit .bss-input {
    display: flex;
    align-items: center;
    width: 96px;
    height: var(--control-lg);
    padding: 0 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, .04);
    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);
}

body.faqja_e_produktit .bss-input:hover { border-color: var(--border-strong) }

body.faqja_e_produktit .bss-input:focus-within {
    border-color: var(--bss-cyan);
    background: rgba(79, 198, 242, .06);
    box-shadow: 0 0 0 4px rgba(79, 198, 242, .14), 0 0 30px rgba(79, 198, 242, .15);
}

body.faqja_e_produktit #sasia,
body.faqja_e_produktit #filtro_specifikimet {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text-strong);
    font: 600 15px/1 var(--font-body);
    color-scheme: dark;
}

body.faqja_e_produktit #sasia {
    font: 700 16px/1 var(--font-mono);
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

body.faqja_e_produktit #sasia::-webkit-outer-spin-button,
body.faqja_e_produktit #sasia::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0 }

body.faqja_e_produktit #filtro_specifikimet::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none }

body.faqja_e_produktit #sasia::placeholder,
body.faqja_e_produktit #filtro_specifikimet::placeholder { color: var(--text-muted) }

body.faqja_e_produktit #sasia:focus-visible,
body.faqja_e_produktit #filtro_specifikimet:focus-visible { outline: 0; border: 0; box-shadow: none }

/* ===== Rripat (bandat) =====
   main humbet kontejnerin: #vitrina del buze-me-buze. Gjeresia 100%, KURRE 100vw dhe
   kurre margin-left:calc(50% - 50vw) — e matur, ai kombinim jep 5px rrokullisje
   horizontale reale, sepse overflow-x:hidden rri mbi body kurse html eshte
   rrokullisesi. Hapesira anesore e cdo rripi tjeter vjen nga .rrip__brenda. */

body.faqja_e_produktit main {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 120px;
}

body.faqja_e_produktit .rrip { display: block; width: 100%; min-width: 0 }

body.faqja_e_produktit .rrip__brenda {
    width: var(--gjeresia-rripit);
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
}

body.faqja_e_produktit #rripi_i_matrices { padding-top: 40px }

body.faqja_e_produktit #rripi_i_te_dhenave { padding-top: 72px }

body.faqja_e_produktit #rripi_i_ngjashem { padding-top: 96px }

/* ===== RRIPI 1 — VITRINA =====
   Fusha e erret (--bg-raised) i vendoset VETE rripit, jo skenes: keshtu ajo del
   vertet buze-me-buze lart, poshte dhe majtas, pa margjina negative qe do te
   luftonin me margin-in -77px te pilules se header-it.
   Vendosja behet me grid-template-areas, keshtu qe rendi i DOM-it
   (shirit, skene, panel) mbetet rendi i leximit ne telefon — foto, zgjidh, bli —
   pa asnje "order" dhe pa permbysje te tab-rendit. */

body.faqja_e_produktit .vitrina {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 420px;
    grid-template-areas: "shirit skene panel";
    gap: 0;
    align-items: stretch;
    width: 100%;
    min-height: clamp(560px, 78svh, 920px);
    padding: 88px 0 0;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border-hairline);
}

/* Me <=1 foto piste e miniaturave nuk ekziston ne DOM, keshtu qe kolona e saj hiqet
   komplet — pa kete rripi do te hapte nje kanal 120px bosh ne te majte. */
body.faqja_e_produktit .vitrina--njesh {
    grid-template-columns: minmax(0, 1fr) 420px;
    grid-template-areas: "skene panel";
}

/* ---- Piste e miniaturave ---- */

body.faqja_e_produktit .vitrina__shirit {
    grid-area: shirit;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: calc(100svh - var(--zbritje-koke) - 40px);
    padding: 0 12px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y proximity;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

body.faqja_e_produktit #shiriti_i_miniaturave::-webkit-scrollbar { display: none }

body.faqja_e_produktit .miniatura {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: var(--mas-miniature);
    height: var(--mas-miniature);
    padding: 6px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--text-strong);
    font: var(--type-small);
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    scroll-snap-align: center;
    transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

body.faqja_e_produktit .miniatura:hover {
    width: var(--mas-miniature);
    display: grid;
    padding: 6px;
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--text-strong);
    text-align: center;
    cursor: pointer;
    transform: translateY(-2px);
}

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

body.faqja_e_produktit .miniatura--aktive,
body.faqja_e_produktit .miniatura--aktive:hover {
    border: 1px solid var(--bss-cyan);
    box-shadow: 0 0 0 1px var(--bss-cyan), 0 0 18px rgba(79, 198, 242, .35);
}

body.faqja_e_produktit .miniatura__foto {
    width: 86%;
    height: 86%;
    object-fit: contain;
    background: transparent;
}

/* ---- Skena ---- */

body.faqja_e_produktit .vitrina__skene {
    position: relative;
    grid-area: skene;
    display: grid;
    /* start, JO center: paneli i qelqit mund te dale 2134px i larte (matur ne
       samsung-galaxy-s25-ultra me 28 variacione) dhe me place-items:center
       fotografia binte ne y=782, nen vijen e pamjes. Fusha e erret vazhdon te
       mbushet nga vete rripi, keshtu qe nuk krijohet asnje qepje e dukshme. */
    place-items: start center;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0 24px 24px;
    background: transparent;
    overflow: hidden;
}

/* Rreshti i rrjetes ngrihet nga paneli i qelqit, ndaj skena shtrihej deri ne fund te tij
   dhe mbante numratorin e shigjetat deri 752px nen foton (matur ne 1024). Kufizohet te
   pjata; lartesia mbetet E PERCAKTUAR, keshtu qe "height:min(100%, --kufi-pjate)" e
   pjates vazhdon te zgjidhet. KUJDES: align-self:start e shemb pjaten ne 43px. */
@media (min-width: 881px) {
    /* +24px eshte padding-bottom i vete skenes; box-sizing eshte border-box. */
    body.faqja_e_produktit .vitrina__skene { max-height: calc(var(--kufi-pjate) + 24px) }
}

/* Nje lavazh i vetem i bute. PA auroren, PA grid-mask dhe PA halo cyan: pjata e
   bardhe mbulon ~84% te fushes (e provuar me lexim pikselesh ne kanvas — kendet e
   fotos lexojne rgb(255,255,255) mbi rgb(8,12,18)), keshtu qe cdo shkelqim pas
   imazhit do te ishte 100% i mbuluar. */
body.faqja_e_produktit .vitrina__shkelqim {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    background: var(--grad-brand-soft);
    opacity: .5;
    pointer-events: none;
}

/* Pjata e BARDHE mbi vete kuticen e fotos: 66% e fotove te katalogut kane kende
   plotesisht te bardha dhe 21% jane prerje transparente, keshtu qe e bardha i sherben
   TE DY popullatave — foto opake bashkohet me pjaten pa kufi te dukshem, prerja
   transparente kompozohet si ne studio. Nje fushe e erret do te servisonte vetem
   gjysmen. I njejti vendim i dokumentuar ne index.css:586-594. */
body.faqja_e_produktit .vitrina__pjate {
    position: relative;
    z-index: 1;
    /* pan-y, JO none: shfletuesi rrembente rreshqitjen horizontale dhe leshonte
       pointercancel, ndaj pointerup nuk arrinte kurre dhe foto nuk ndryshonte.
       "none" do te vriste rrotullimin vertikal te faqes mbi elementin me te madh. */
    touch-action: pan-y;
    display: grid;
    place-items: center;
    width: auto;
    height: min(100%, var(--kufi-pjate));
    max-width: calc(100% - var(--inset-pjate));
    max-height: 100%;
    aspect-ratio: 1;
    padding: 4%;
    border-radius: var(--radius-2xl);
    background: #fff;
    box-shadow: 0 40px 70px -20px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .08);
    overflow: hidden;
    cursor: zoom-in;
    transition: transform var(--dur-slow) var(--ease-out);
}

body.faqja_e_produktit .vitrina__pjate:hover { transform: translateY(-4px) }

body.faqja_e_produktit .vitrina__pjate:has(.vitrina__bosh) { cursor: default }

/* global.css:28-32 i detyron cdo <img> max-width:100% dhe width:100% — ri-deklarohet.
   object-fit:contain, KURRE cover: 28% e fotove nuk jane kuadrat dhe raportet shkojne
   0.71 deri 1.93, keshtu qe cdo prerje do te hiqte subjektin. */
/* Foto nxirret JASHTE rrjedhjes me qellim. Pjata e ka lartesine
   "min(100%, --kufi-pjate)" — nje perqindje — ndaj Chrome e trajton lartesine e prindit
   si te papercaktuar dhe nje "height: 100%" mbi femijen sillet si "auto": imazhi merrte
   lartesine e vet natyrale (matur 614x760 brenda nje pjate 720x720) dhe 93px i preheshin
   nga overflow:hidden. Si element i pozicionuar absolutisht, perqindjet zgjidhen kundrejt
   kutise se padding-ut te pjates, qe ESHTE e percaktuar. */
body.faqja_e_produktit .vitrina__foto {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: auto;
    height: auto;
    max-width: 92%;
    max-height: 92%;
    margin: auto;
    object-fit: contain;
    background: transparent;
}

/* Skeleti i skenes rri FIKUR ne pushim: shablloni e nxjerr PA atributin [hidden],
   keshtu qe nje rregull ":not([hidden])" do t'a mbante shkelqimin mbi foton PERGJITHMONE
   kur JS nuk niset. Prandaj ndizet vetem me klase: produkt.js duhet te bej
   pjata.classList.toggle("vitrina__pjate--ngarkon", po) ne vend te skeleti.hidden = …
   Pa ate rresht skeleti thjesht nuk shfaqet — degradim i heshtur, pa defekt.
   Skeleti i dritares (#dritarja_skeleti) nxirret ME [hidden], prandaj ai drejtohet
   nga atributi dhe perputhet drejtpersedrejti me produkt.js. */
body.faqja_e_produktit .vitrina__skelet {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;
    background-color: var(--ink-300);
    background-image: var(--grad-sheen);
    background-size: 250% 100%;
    border-radius: inherit;
    animation: bss-sheen var(--dur-shkelqim) var(--ease-in-out) infinite;
    pointer-events: none;
}

body.faqja_e_produktit .vitrina__pjate--ngarkon .vitrina__skelet { display: block }

body.faqja_e_produktit .vitrina__bosh {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font: 600 14px/1.3 var(--font-mono);
    letter-spacing: var(--ls-mono);
    color: var(--ink-600);
    text-align: center;
}

body.faqja_e_produktit .vitrina__numri {
    position: absolute;
    z-index: 3;
    bottom: 26px;
    left: 32px;
    display: inline-block;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-hairline);
    background: var(--surface-glass-strong);
    font: 500 12px/1 var(--font-mono);
    letter-spacing: var(--ls-mono);
    color: var(--text-muted);
}

/* Butoni i zmadhimit niset me [hidden] dhe shfaqet VETEM kur imazhi ka vertet
   piksele te teperta (naturalWidth / renderedWidth >= 1.15). Kur nuk ka,
   afordanca duhet te mungoje — kjo nuk eshte defekt, kjo eshte vetia. */
body.faqja_e_produktit .vitrina__veprim {
    position: absolute;
    z-index: 3;
    top: 24px;
    right: 32px;
    place-items: center;
    width: var(--control-md);
    height: var(--control-md);
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    background: var(--surface-glass-strong);
    color: var(--text-strong);
    font: var(--type-small);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

body.faqja_e_produktit #hap_dritaren:not([hidden]) { display: grid }

body.faqja_e_produktit .vitrina__veprim:hover {
    width: var(--control-md);
    display: grid;
    padding: 0;
    border: 1px solid var(--border-accent);
    border-radius: 50%;
    background: rgba(79, 198, 242, .18);
    color: var(--text-strong);
    text-align: center;
    cursor: pointer;
    transform: scale(1.06);
}

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

body.faqja_e_produktit .vitrina__sageta {
    position: absolute;
    z-index: 3;
    top: 50%;
    display: grid;
    place-items: center;
    width: var(--control-md);
    height: var(--control-md);
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    background: var(--surface-glass-strong);
    color: var(--text-strong);
    font: var(--type-small);
    text-align: center;
    cursor: pointer;
    transform: translateY(-50%);
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

body.faqja_e_produktit .vitrina__sageta--para { left: 18px }

body.faqja_e_produktit .vitrina__sageta--pas { right: 18px }

body.faqja_e_produktit .vitrina__sageta:hover {
    width: var(--control-md);
    display: grid;
    padding: 0;
    border: 1px solid var(--border-accent);
    border-radius: 50%;
    background: rgba(79, 198, 242, .18);
    color: var(--text-strong);
    text-align: center;
    cursor: pointer;
}

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

/* ===== Paneli i blerjes — nje rrafsh i vetem qelqi, jo nje pirg kartash ===== */

body.faqja_e_produktit .vitrina__panel {
    grid-area: panel;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    min-width: 0;
    padding: 36px 32px 48px;
    border-left: 1px solid var(--border-subtle);
    background: var(--surface-glass-strong);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
}

/* role="navigation", JO <nav>: header.css:104-119 ka nje rregull <nav> pa shkalle
   brenda @media(max-width:1000px) qe e ben cdo <nav> kuti te zeze absolute mbi faqen. */
body.faqja_e_produktit .panel__shteg {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: auto;
    font: 500 12px/1.4 var(--font-body);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-faint);
}

body.faqja_e_produktit .panel__shteg a { color: var(--text-muted); transition: color var(--dur-fast) var(--ease-out) }

body.faqja_e_produktit .panel__shteg a:hover { color: var(--bss-cyan) }

/* ---- Shenjat ---- */

body.faqja_e_produktit .panel__shenja {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: auto;
}

body.faqja_e_produktit .shenje {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    font: 700 10.5px/1 var(--font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.faqja_e_produktit .shenje--gjendje { background: rgba(63, 217, 154, .12); color: var(--signal-green) }

/* Sistemi i dizajnit nuk ka distinktiv "pa stok"; ambra do te lexohej si "stok i
   ulet", prandaj perdoret cherry-300, ngjyre qe bss-tokens.css e ka. */
body.faqja_e_produktit .shenje--pastok {
    background: rgba(200, 60, 59, .14);
    color: var(--cherry-300);
    box-shadow: inset 0 0 0 1px rgba(200, 60, 59, .35);
}

body.faqja_e_produktit .shenje--ri { background: var(--grad-brand); color: #001018 }

body.faqja_e_produktit .shenje--garanci {
    background: rgba(79, 198, 242, .1);
    color: var(--bss-cyan);
    box-shadow: inset 0 0 0 1px rgba(79, 198, 242, .28);
}

body.faqja_e_produktit .shenje--sasi {
    background: rgba(242, 184, 79, .12);
    color: var(--signal-amber);
    box-shadow: inset 0 0 0 1px rgba(242, 184, 79, .3);
}

body.faqja_e_produktit #shenja_e_sasise:not([hidden]) { display: inline-flex }

body.faqja_e_produktit .shenje__pike {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    animation: pdp-puls-pike var(--dur-puls) var(--ease-in-out) infinite;
}

/* ---- Titulli, kodi, cmimi ---- */

body.faqja_e_produktit .panel__titull {
    width: auto;
    margin: 0;
    font: 900 clamp(24px, 2.1vw, 38px)/1.08 var(--font-display);
    letter-spacing: -.035em;
    color: var(--text-strong);
    text-wrap: balance;
}

/* Etiketa eshte "Kodi", KURRE "Barkodi": ne skeme nuk ekziston asnje kolone barkodi —
   fusha e lexuar eshte products.sku. */
body.faqja_e_produktit .panel__kod {
    width: auto;
    margin: -6px 0 0;
    font: 500 13px/1.3 var(--font-body);
    letter-spacing: .02em;
    color: var(--text-muted);
}

body.faqja_e_produktit #kodi_i_produktit:not([hidden]) { display: inline-block }

body.faqja_e_produktit #kodi_vlera {
    padding: 2px 8px;
    border-radius: 7px;
    background: rgba(79, 198, 242, .1);
    box-shadow: inset 0 0 0 1px rgba(79, 198, 242, .3);
    font: 700 13px/1.3 var(--font-mono);
    letter-spacing: var(--ls-mono);
    color: var(--bss-cyan);
}

body.faqja_e_produktit .panel__cmimi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: auto;
}

/* Elementi mban nje STRING interval ("42 900 Lekë - 44 900 Lekë"), nuk mban nje numer
   te vetem, keshtu qe trajtimi .bss-price--lg i sistemit te dizajnit (40px mbi nje
   figure) do te derdhej. Pa "was-price", pa distinktiv zbritjeje: sale_price nuk
   aplikohet kurre ne nje cmim publik dhe addPublicOrder e ri-validon kundrejt
   products.price me 409. */
body.faqja_e_produktit #vlera_e_cmimit {
    width: auto;
    display: block;
    margin: 0;
    font: 700 clamp(26px, 3.2vw, 40px)/1.05 var(--font-mono);
    letter-spacing: -.02em;
    color: var(--text-strong);
    text-wrap: balance;
}

body.faqja_e_produktit #vlera_e_cmimit.cmimi_interval { font-size: clamp(20px, 2.1vw, 28px) }

/* produkt.js shkruan display inline mbi kete element (F-15), prandaj CSS-i NUK
   deklaron display — as ketu, as ne asnje pike tjeter te file-it. */
body.faqja_e_produktit #cmimi_i_variacionit {
    width: auto;
    margin: 0;
    font: 600 12px/1.4 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

body.faqja_e_produktit #vlera_e_cmimit_te_variacionit {
    font: 700 22px/1 var(--font-mono);
    letter-spacing: -.02em;
    text-transform: none;
    color: var(--bss-cyan);
}

/* ===== Faktet (atributet me nje vlere te vetme) =====
   Chip-a te vertete, te fokusueshem, te parazgjedhur nga JS dhe te pa-zgjedhshem:
   ruajne invariantin e numerimit pa plantuar DOM fantazme, dhe heqin tre klikime te
   detyruara e te pakuptimta (matur ne iPhone 14 Plus: 3 nga 4 atribute kane nje vlere). */

body.faqja_e_produktit .panel__faktet {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: auto;
    padding: 14px 16px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .03);
}

body.faqja_e_produktit .faktet__titull {
    width: auto;
    margin: 0;
    font: 600 11px/1 var(--font-body);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    /* --text-faint (.32) matet 2.89:1 mbi --surface-card: nen 4.5:1. */
    color: var(--text-muted);
}

body.faqja_e_produktit .faktet__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: auto;
}

/* ===== Grupet e vendimeve ===== */

body.faqja_e_produktit .panel__atributet {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: auto;
    margin: 0;
    padding: 0;
}

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

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

body.faqja_e_produktit .grupi__koke {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    width: auto;
}

body.faqja_e_produktit .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_produktit .grupi__zgjedhja {
    font: 700 13px/1.2 var(--font-mono);
    letter-spacing: var(--ls-mono);
    color: var(--bss-cyan);
}

body.faqja_e_produktit .grupi__zgjedhja:empty { display: none }

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

/* Rreshti i ndihmes fshihet komplet kur teksti i konfliktit eshte bosh, qe te mos
   lere nje hapesire te mbetur nga gap-i i kolones. */
body.faqja_e_produktit .grupi__ndihme {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: auto;
    margin: 0;
    font: var(--type-small);
    color: var(--cherry-300);
}

body.faqja_e_produktit .grupi_atributit:has(.grupi__ndihme_tekst:empty) .grupi__ndihme { display: none }

body.faqja_e_produktit .grupi__rregullo {
    width: auto;
    height: var(--control-sm);
    padding: 0 14px;
    border: 1px solid rgba(200, 60, 59, .45);
    border-radius: var(--radius-pill);
    background: rgba(200, 60, 59, .12);
    color: var(--cherry-300);
    font: 600 12px/1 var(--font-body);
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

body.faqja_e_produktit .grupi__rregullo:not([hidden]) { display: inline-flex; align-items: center }

body.faqja_e_produktit .grupi__rregullo:hover {
    width: auto;
    display: inline-flex;
    padding: 0 14px;
    border: 1px solid var(--cherry-300);
    border-radius: var(--radius-pill);
    background: rgba(200, 60, 59, .22);
    color: #fff;
    text-align: center;
    cursor: pointer;
}

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

/* ===== Chip-a i vleres (.vlere) =====
   RETIRUAR: rregulli i vjeter qe .vlere duhej te mbetej <span> PA asnje femije,
   sepse produkt.js:59/61/64 punonin me e.target. Tani .vlere eshte <button
   role="radio"> me femije (etiketa, emri, shenimi, foto, shenja), dhe produkt.js
   DUHET te zgjidhe objektivin me closest(".vlere").
   .vlere.out_of_stock mban pointer-events:none si shtrese e dyte reale — pointer-
   events e bllokon aktivizimin me POINTER edhe mbi nje <button> — por tani ajo NUK
   eshte me i vetmi mekanizem: produkt.js ka roje te vete per klasen, se ndryshe
   tastiera do t'a kalonte. NUK HIQET. */

body.faqja_e_produktit .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:185 (button:hover, specifikim 0,1,1) rrjedh
   brenda dhe chip-i kercen 1px ne hover. */
body.faqja_e_produktit .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_produktit .vlere:focus-visible { outline: 0; box-shadow: var(--focus-ring) }

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

body.faqja_e_produktit .vlere.selected,
body.faqja_e_produktit .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_produktit .vlere.out_of_stock,
body.faqja_e_produktit .vlere.out_of_stock:hover {
    border: 1px solid var(--border-hairline);
    background: rgba(255, 255, 255, .02);
    opacity: .35;
    text-decoration: line-through;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    pointer-events: none;
}

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

body.faqja_e_produktit .vlere__etiketa {
    display: block;
    font: 600 10px/1 var(--font-body);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    /* 2.90:1 me --text-faint mbi chip-in e zgjedhur: nen kufirin AA. */
    color: var(--text-muted);
}

body.faqja_e_produktit .vlere__shenim {
    font: 500 10.5px/1 var(--font-mono);
    letter-spacing: var(--ls-mono);
    color: var(--signal-amber);
}

body.faqja_e_produktit .vlere__shenim:empty { display: none }

body.faqja_e_produktit .vlere__shenja { color: var(--bss-cyan) }

/* ---- Chip-i fakt: etiketa mbi vleren, shenja e kontrollit majtas ---- */

body.faqja_e_produktit .vlere.vlere--fakt,
body.faqja_e_produktit .vlere.vlere--fakt:hover {
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .04);
    font: 700 13px/1.15 var(--font-mono);
    cursor: default;
    transform: none;
}

body.faqja_e_produktit .vlere.vlere--fakt.selected,
body.faqja_e_produktit .vlere.vlere--fakt.selected:hover {
    border: 1px solid rgba(79, 198, 242, .35);
    background: rgba(79, 198, 242, .06);
    box-shadow: none;
}

body.faqja_e_produktit .vlere.vlere--fakt .vlere__emri {
    display: block;
    font: 700 13px/1.15 var(--font-mono);
    color: var(--text-strong);
}

/* ---- Chip-i foto: atributi me foto zbulohet NE EKZEKUTIM, nuk kodohet ---- */

body.faqja_e_produktit .grupi__vlerat.vlere--foto,
body.faqja_e_produktit .grupi_atributit.vlere--foto .grupi__vlerat { gap: 12px }

body.faqja_e_produktit .vlere.vlere--foto,
body.faqja_e_produktit .vlere.vlere--foto:hover {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    font: 600 12.5px/1.2 var(--font-body);
    letter-spacing: 0;
}

body.faqja_e_produktit .vlere__foto {
    width: 44px;
    height: 44px;
    max-width: none;
    object-fit: contain;
    border-radius: var(--radius-xs);
    background: #fff;
}

/* ---- Disqet e ngjyres: VETEM atje ku cdo vlere e perdorur ka color_code te vertete.
   Pa harte emer-ne-hex: te shpikje "Gold" si #D4AF37 do te ishte shpikje e te
   dhenave te produktit. 17 nga 117 rreshta kane hex; 2 prej tyre jane #000000. ---- */

/* 44px, jo 34: disqet deshtonin 40x40 ne CDO gjeresi dhe etiketa e tyre .vlere__emri
   rrudhet ne 1x1, ndaj ne telefon mbeteshin pika te paemertuara 30px. */
body.faqja_e_produktit .vlere.vlere_ngjyre,
body.faqja_e_produktit .vlere.vlere_ngjyre:hover {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 50%;
    background: var(--c, var(--ink-500));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 -6px 10px rgba(0, 0, 0, .35);
    text-decoration: none;
    transform: none;
    transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
}

body.faqja_e_produktit .vlere.vlere_ngjyre:hover { transform: scale(1.1) }

/* Emri i ngjyres mbetet i disponueshem per lexuesit e ekranit dhe per .grupi__zgjedhja,
   por nuk pikturohet mbi diskun. */
body.faqja_e_produktit .vlere.vlere_ngjyre .vlere__emri {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Unaze, jo shkelqim: nje disk i bardhe mbi sfond te erret zhduket pa unaze. */
body.faqja_e_produktit .vlere.vlere_ngjyre.selected,
body.faqja_e_produktit .vlere.vlere_ngjyre.selected:hover {
    border: 0;
    background: var(--c, var(--ink-500));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 -6px 10px rgba(0, 0, 0, .35);
}

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

body.faqja_e_produktit .vlere.vlere_ngjyre.selected::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid var(--bss-cyan);
    box-shadow: 0 0 14px rgba(79, 198, 242, .6);
}

body.faqja_e_produktit .vlere.vlere_ngjyre.out_of_stock,
body.faqja_e_produktit .vlere.vlere_ngjyre.out_of_stock:hover {
    border: 0;
    background: var(--c, var(--ink-500));
    text-decoration: none;
}

/* ===== Permbledhja e variacionit dhe rivendosja ===== */

body.faqja_e_produktit .panel__permbledhje {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: auto;
    padding: 14px 16px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    background: var(--surface-card-hover);
}

body.faqja_e_produktit #permbledhja_e_variacionit:not([hidden]) { display: flex }

body.faqja_e_produktit .permbledhje__rresht {
    font: 500 13px/1.3 var(--font-mono);
    letter-spacing: var(--ls-mono);
    color: var(--text-body);
}

body.faqja_e_produktit #kodi_i_variacionit:not([hidden]),
body.faqja_e_produktit #stoku_i_variacionit:not([hidden]) { display: inline-block }

body.faqja_e_produktit .panel__rivendos {
    width: auto;
    height: var(--control-sm);
    padding: 0 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font: 600 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_produktit #rivendos_zgjedhjen:not([hidden]) { display: inline-flex; align-items: center }

body.faqja_e_produktit .panel__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_produktit .panel__rivendos:focus-visible { outline: 0; box-shadow: var(--focus-ring) }

/* ===== Sasia dhe shtimi ne shporte ===== */

body.faqja_e_produktit .panel__veprimet {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    width: auto;
}

/* .bss-field e ben kolone; .bss-field.hapesi (0,3,1) e kthen ne rresht pa varesi nga
   rendi i burimit. */
body.faqja_e_produktit .bss-field.hapesi {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    width: auto;
    flex: 0 0 auto;
}

body.faqja_e_produktit .hapesi .bss-input { width: 66px; height: var(--control-lg); padding: 0 6px }

body.faqja_e_produktit .hapesi__btn {
    display: grid;
    place-items: center;
    width: 46px;
    height: var(--control-lg);
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .04);
    color: var(--text-strong);
    font: 700 20px/1 var(--font-body);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

body.faqja_e_produktit .hapesi__btn:hover {
    width: 46px;
    display: grid;
    padding: 0;
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-md);
    background: rgba(79, 198, 242, .1);
    color: var(--text-strong);
    text-align: center;
    cursor: pointer;
}

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

body.faqja_e_produktit #shto_ne_shporte {
    flex: 1 1 200px;
    width: auto;
    height: var(--control-lg);
    padding: 0 30px;
    border: 1px solid transparent;
    font-size: 16px;
    letter-spacing: .01em;
}

body.faqja_e_produktit #shto_ne_shporte:hover {
    width: auto;
    height: var(--control-lg);
    padding: 0 30px;
    border: 1px solid transparent;
    background: var(--grad-brand);
    color: #001018;
    transform: translateY(-2px);
    box-shadow: var(--glow-cyan);
}

body.faqja_e_produktit .panel__paralajmerim {
    width: auto;
    margin: 0;
    padding: 11px 14px;
    border-left: 2px solid var(--signal-amber);
    border-radius: var(--radius-xs);
    background: rgba(242, 184, 79, .1);
    font: var(--type-small);
    color: var(--signal-amber);
}

body.faqja_e_produktit #paralajmerimi:not([hidden]) { display: block }

body.faqja_e_produktit .panel__pastok {
    width: auto;
    margin: 0;
    font: var(--type-small);
    color: var(--cherry-300);
}

/* ===== IuteCredit =====
   R2: ky bllok mbahet BYTE-PER-BYTE si ne produkt.css:561-583 (dhe me pare
   produkt.css:252-274), perfshire selektorin pa shkalle. #e8001d eshte marka e
   IuteCredit-it, jo nje ngjyre e BSS-se — nuk tokenizohet dhe nuk kalon ne gradientin
   e firmes. Mbetet pa shkalle sepse produkt.css linkohet VETEM nga produkt.html, dhe
   sepse rregulli duhet te mbetet i verifikueshem bajt-per-bajt. Pa SDK, pa dublikim
   ne #shiriti_blic, pa prekje nga asnje rregull tjeter i file-it. */

#iutecredit_btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: white;
    background-color: #e8001d;
    text-decoration: none;
    margin-top: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(232, 0, 29, 0.3);
}

#iutecredit_btn:hover {
    box-shadow: 0 6px 22px rgba(232, 0, 29, 0.45);
    transform: translateY(-1px);
}

/* ===== Ndaj konfigurimin ===== */

body.faqja_e_produktit .panel__ndaj {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    width: auto;
    height: var(--control-md);
    padding: 0 18px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-body);
    font: 600 13px/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_produktit #ndaj_produktin:not([hidden]) { display: inline-flex }

body.faqja_e_produktit .panel__ndaj:hover {
    width: auto;
    display: inline-flex;
    padding: 0 18px;
    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_produktit .panel__ndaj:focus-visible { outline: 0; box-shadow: var(--focus-ring) }

/* ===== Premtimet (USP) ===== */

body.faqja_e_produktit .bss-usps { width: auto; margin-top: 4px }

body.faqja_e_produktit .bss-usp {
    width: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border-hairline);
    font: 500 13.5px/1.4 var(--font-body);
    color: var(--text-body);
}

body.faqja_e_produktit .bss-usp:first-child { border-top: 1px solid var(--border-hairline) }

body.faqja_e_produktit .bss-usp b { color: var(--text-strong); font-weight: 600 }

body.faqja_e_produktit .bss-usp svg { flex: none; width: 20px; height: 20px; fill: var(--bss-cyan) }

/* ===== RRIPI 2 — SHIRITI I BLERJES SE SHPEJTE =====
   I VETMI element qe kjo faqe e ben sticky ose fixed, pervec header-it te perbashket.
   >=768px: sticky nen pilulen e header-it (76px e matur: top 12 plus height 64).
   Niset i fshehur VIZUALISHT, pa display:none, keshtu qe hapesira e tij ne rrjedhje
   rezervohet dhe asgje nuk ri-rrjedh ne momentin e shfaqjes.
   <=767px: fixed ne buzen e poshtme, GJITHMONE i dukshem, jo i drejtuar nga vezhguesi. */

body.faqja_e_produktit .shiriti_blic {
    position: sticky;
    top: var(--zbritje-koke);
    z-index: var(--shtrese-shirit);
    display: block;
    width: 100%;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

body.faqja_e_produktit .shiriti_blic--dukshem {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: pdp-shirit-hyr var(--dur-base) var(--ease-out) both;
}

body.faqja_e_produktit .shiriti_blic__brenda {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 68px;
    padding: 10px 18px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--surface-glass-strong);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    box-shadow: var(--shadow-float);
}

body.faqja_e_produktit .shiriti_blic__foto {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    max-width: none;
    padding: 3px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: #fff;
}

body.faqja_e_produktit .shiriti_blic__emri {
    flex: 1 1 auto;
    min-width: 0;
    font: 600 14px/1.2 var(--font-body);
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.faqja_e_produktit .shiriti_blic__variacioni {
    flex: 0 1 auto;
    min-width: 0;
    font: 500 12px/1.2 var(--font-mono);
    letter-spacing: var(--ls-mono);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.faqja_e_produktit .shiriti_blic__variacioni:empty { display: none }

body.faqja_e_produktit .shiriti_blic__cmimi {
    flex: 0 0 auto;
    font: 700 16px/1 var(--font-mono);
    letter-spacing: -.01em;
    color: var(--text-strong);
    white-space: nowrap;
}

body.faqja_e_produktit #shto_ne_shporte_blic {
    flex: 0 0 auto;
    width: auto;
    height: var(--control-md);
    padding: 0 22px;
    border: 1px solid transparent;
    font-size: 14px;
}

body.faqja_e_produktit #shto_ne_shporte_blic:hover {
    width: auto;
    height: var(--control-md);
    padding: 0 22px;
    border: 1px solid transparent;
    background: var(--grad-brand);
    color: #001018;
}

/* ===== RRIPI 3 — MATRICA E VARIACIONEVE ===== */

body.faqja_e_produktit .matrica__celes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 16px 22px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    color: var(--text-strong);
    font: 700 15px/1 var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

body.faqja_e_produktit .matrica__celes:hover {
    display: flex;
    width: 100%;
    padding: 16px 22px;
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-lg);
    background: var(--surface-card-hover);
    color: var(--text-strong);
    text-align: left;
    cursor: pointer;
}

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

body.faqja_e_produktit .matrica__celes .ikona { transition: transform var(--dur-base) var(--ease-out) }

body.faqja_e_produktit .matrica__celes[aria-expanded="true"] .ikona { transform: rotate(180deg) }

body.faqja_e_produktit .matrica {
    gap: 14px;
    width: auto;
    margin-top: 12px;
    padding: 18px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-xl);
    background: var(--surface-card);
}

body.faqja_e_produktit #matrica:not([hidden]) { display: grid; animation: pdp-shfaqu var(--dur-base) var(--ease-out) both }

body.faqja_e_produktit .matrica__vegla {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: auto;
}

body.faqja_e_produktit .matrica__vegle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: var(--control-sm);
    padding: 0 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .04);
    color: var(--text-body);
    font: 600 12.5px/1 var(--font-body);
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

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

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

body.faqja_e_produktit .matrica__vegle[aria-pressed="true"],
body.faqja_e_produktit .matrica__vegle[aria-pressed="true"]:hover {
    border: 1px solid transparent;
    background: var(--grad-brand);
    color: #001018;
}

/* --text-muted, JO --text-faint: koka e matrices matet 2.89:1 me .32. */
body.faqja_e_produktit .matrica__koke {
    display: grid;
    grid-template-columns: var(--kolonat-matrices);
    align-items: center;
    gap: 12px;
    width: auto;
    /* Djathtas rezervohen 24px (12 padding + 10 shiriti i rrotullimit te trupit + 2 korniza e
       rreshtit): trupi rrotullohet, koka jo, ndaj pa kete etiketat ikin 16px nga kolonat. */
    padding: 0 24px 8px 12px;
    border-bottom: 1px solid var(--border-hairline);
    font: 600 10.5px/1 var(--font-body);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
}

body.faqja_e_produktit .matrica__trupi {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: auto;
    max-height: 520px;
    overflow-y: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
}

body.faqja_e_produktit .matrica__rresht {
    display: grid;
    grid-template-columns: var(--kolonat-matrices);
    align-items: center;
    gap: 12px;
    width: auto;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .02);
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

body.faqja_e_produktit .matrica__rresht:hover { border-color: var(--border-accent); background: rgba(79, 198, 242, .06) }

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

body.faqja_e_produktit .matrica__rresht--aktiv {
    border-color: var(--bss-cyan);
    background: rgba(79, 198, 242, .1);
    box-shadow: 0 0 0 2px rgba(79, 198, 242, .14);
}

body.faqja_e_produktit .matrica__qelize {
    min-width: 0;
    font: 500 13px/1.3 var(--font-mono);
    letter-spacing: var(--ls-mono);
    color: var(--text-body);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Qeliza e kodit: SKU-te jane nje fjale e vetme pa vend thyerjeje, ndaj "normal" nuk e
   ndan dhe "I15PRO128GBESIMU" (129px) priteshte ne 880px dhe 320px. Thyhet brenda fjales. */
body.faqja_e_produktit .matrica__qelize:nth-child(5) { overflow-wrap: anywhere }

body.faqja_e_produktit .matrica__foto {
    width: 40px;
    height: 40px;
    max-width: none;
    padding: 2px;
    object-fit: contain;
    border-radius: var(--radius-xs);
    background: #fff;
}

body.faqja_e_produktit .matrica__bosh {
    width: auto;
    margin: 0;
    padding: 18px 12px;
    font: var(--type-small);
    color: var(--text-muted);
    text-align: center;
}

body.faqja_e_produktit #matrica_bosh:not([hidden]) { display: block }

/* ===== RRIPI 4 — SKEDAT DHE TE DHENAT ===== */

body.faqja_e_produktit .skedat {
    position: relative;
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    max-width: 100%;
    padding: 4px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .05);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

body.faqja_e_produktit #skedat::-webkit-scrollbar { display: none }

/* Treguesi eshte absolut, keshtu qe ne grid NUK krijon kolone. Gjeresia dhe pozicioni
   i shkruhen nga produkt.js; pa JS ai mbetet 0 gjeresi dhe i padukshem, dhe gjendja
   aktive lexohet nga ngjyra e tekstit te .skeda--aktive. */
body.faqja_e_produktit .skedat__tregues {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    display: block;
    border-radius: var(--radius-pill);
    background: var(--grad-brand);
    box-shadow: var(--glow-blue);
    transition: transform var(--dur-slow) var(--ease-snap), width var(--dur-slow) var(--ease-snap);
}

body.faqja_e_produktit .skeda {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 38px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font: 600 14px/1 var(--font-body);
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--dur-base) var(--ease-out);
}

body.faqja_e_produktit .skeda:hover {
    display: inline-flex;
    width: auto;
    padding: 0 22px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-body);
    text-align: center;
    cursor: pointer;
}

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

body.faqja_e_produktit .skeda--aktive,
body.faqja_e_produktit .skeda--aktive:hover,
body.faqja_e_produktit .skeda[aria-selected="true"] { color: #fff; text-shadow: 0 0 18px rgba(0, 0, 0, .45) }

body.faqja_e_produktit .paneli_skedes { width: auto; padding-top: 28px }

body.faqja_e_produktit .paneli_skedes:not([hidden]) { display: block }

/* ---- Veglat e specifikimeve (vetem >=12 rreshta te analizuar) ---- */

body.faqja_e_produktit .spec__vegla {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: auto;
    margin-bottom: 18px;
}

body.faqja_e_produktit .bss-input--kerko { width: min(300px, 100%); height: var(--control-md); padding: 0 14px }

body.faqja_e_produktit .spec__vegle {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: var(--control-md);
    padding: 0 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .04);
    color: var(--text-body);
    font: 600 13px/1 var(--font-body);
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

body.faqja_e_produktit .spec__vegle:hover {
    display: inline-flex;
    width: auto;
    padding: 0 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .08);
    color: var(--text-strong);
    text-align: center;
    cursor: pointer;
}

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

body.faqja_e_produktit .spec__vegle[aria-pressed="true"],
body.faqja_e_produktit .spec__vegle[aria-pressed="true"]:hover {
    border: 1px solid var(--border-accent);
    background: rgba(79, 198, 242, .12);
    color: var(--bss-cyan);
}

body.faqja_e_produktit .spec__numri {
    font: 500 12.5px/1 var(--font-mono);
    letter-spacing: var(--ls-mono);
    color: var(--text-muted);
}

/* ---- Rrjeta e grupeve ---- */

body.faqja_e_produktit .spec__rrjeta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
    width: auto;
}

body.faqja_e_produktit .spec__grup {
    width: auto;
    min-width: 0;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-xl);
    background: var(--surface-card);
    overflow: hidden;
}

body.faqja_e_produktit .spec__grup--fshehur { display: none }

body.faqja_e_produktit .spec__titull { width: auto; margin: 0; font: inherit }

body.faqja_e_produktit .spec__celes {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 15px 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-strong);
    font: 700 14.5px/1.25 var(--font-display);
    letter-spacing: -.01em;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--dur-base) var(--ease-out);
}

body.faqja_e_produktit .spec__celes:hover {
    display: flex;
    width: 100%;
    padding: 15px 20px;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .04);
    color: var(--text-strong);
    text-align: left;
    cursor: pointer;
}

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

body.faqja_e_produktit .spec__celes > span { min-width: 0 }

body.faqja_e_produktit .spec__celes > span:first-child { flex: 1 1 auto }

body.faqja_e_produktit .spec__sasi {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .06);
    font: 500 11px/1 var(--font-mono);
    letter-spacing: var(--ls-mono);
    color: var(--text-muted);
}

body.faqja_e_produktit .spec__celes::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-right: 2px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--dur-base) var(--ease-out);
}

body.faqja_e_produktit .spec__grup--hapur .spec__celes::after { transform: rotate(-135deg) translate(-2px, -2px) }

/* Palosja varet nga html.me_js (shenuesi ne <head>), ndaj PA JS cdo grup mbetet HAPUR:
   .spec__celes nuk ka sjellje pa JS, keshtu qe grupet 3+ ishin te paarritshme ne
   CDO gjeresi — perjashtimi i panelave ne <=767px hap vetem PANELAT, nuk akordeonin. */
body.faqja_e_produktit .spec__lista,
body.faqja_e_produktit .spec__proze { display: block; width: auto; margin: 0 }

html.me_js body.faqja_e_produktit .spec__lista,
html.me_js body.faqja_e_produktit .spec__proze { display: none }

html.me_js body.faqja_e_produktit .spec__grup--hapur .spec__lista,
html.me_js body.faqja_e_produktit .spec__grup--hapur .spec__proze { display: block }

/* #dergesa mban nje <dl class="spec__lista"> pa prind .spec__grup, ndaj asnje rregull
   e rihap: pa kete, skeda Dergesa ishte bosh edhe me JS te ndezur. */
body.faqja_e_produktit #dergesa .spec__lista { display: block }

body.faqja_e_produktit .spec__rresht {
    display: grid;
    grid-template-columns: minmax(110px, 38%) minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
    width: auto;
    min-width: 0;
    padding: 10px 20px;
    border-top: 1px solid var(--border-hairline);
}

body.faqja_e_produktit .spec__rresht--fshehur { display: none }

body.faqja_e_produktit .spec__etiketa {
    min-width: 0;
    font: 500 12.5px/1.35 var(--font-body);
    color: var(--text-muted);
}

body.faqja_e_produktit .spec__vlera {
    min-width: 0;
    margin: 0;
    font: var(--type-spec);
    font-size: 13.5px;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

body.faqja_e_produktit .spec__proze { padding: 4px 20px 18px }

body.faqja_e_produktit .spec__bosh {
    width: auto;
    margin: 18px 0 0;
    font: var(--type-small);
    color: var(--text-muted);
}

body.faqja_e_produktit #pa_rezultate_specifikimesh:not([hidden]) { display: block }

body.faqja_e_produktit .proze__titull {
    width: auto;
    margin: 28px 0 12px;
    font: 700 20px/1.25 var(--font-display);
    letter-spacing: var(--ls-heading);
    color: var(--text-strong);
}

/* ===== Tipografia e HTML-se te injektuar nga paneli admin =====
   .proze__trupi, .spec__proze dhe .spec__vlera marrin HTML te papergatitur nga Quill
   (<%- %>), keshtu qe nuk supozohet asnje strukture — vetem selektore pasardhes.
   Kujtese: stilet inline te autorit (p.sh. style="color:#000") nuk mund te mundohen
   nga asnje stylesheet. */

body.faqja_e_produktit .proze__trupi,
body.faqja_e_produktit .spec__proze {
    width: auto;
    font: var(--type-body);
    color: var(--text-body);
}

body.faqja_e_produktit .proze__trupi :is(h1, h2, h3, h4, h5, h6),
body.faqja_e_produktit .spec__proze :is(h1, h2, h3, h4, h5, h6) {
    margin: 28px 0 12px;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: var(--ls-heading);
    color: var(--text-strong);
}

body.faqja_e_produktit .proze__trupi :is(h1, h2, h3, h4, h5, h6):first-child,
body.faqja_e_produktit .spec__proze :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0 }

body.faqja_e_produktit .proze__trupi h1, body.faqja_e_produktit .spec__proze h1 { font-size: 26px }
body.faqja_e_produktit .proze__trupi h2, body.faqja_e_produktit .spec__proze h2 { font-size: 23px }
body.faqja_e_produktit .proze__trupi h3, body.faqja_e_produktit .spec__proze h3 { font-size: 20px }
body.faqja_e_produktit .proze__trupi :is(h4, h5, h6), body.faqja_e_produktit .spec__proze :is(h4, h5, h6) { font-size: 17px }

body.faqja_e_produktit .proze__trupi p,
body.faqja_e_produktit .spec__proze p { margin: 0 0 14px }

body.faqja_e_produktit .proze__trupi :is(p, li):last-child,
body.faqja_e_produktit .spec__proze :is(p, li):last-child { margin-bottom: 0 }

/* Quill lee bllok bosh "<p><br></p>" ne 64 produkte: zbrazet nuk zene me hapesire. */
body.faqja_e_produktit .proze__trupi p:has(> br:only-child),
body.faqja_e_produktit .spec__proze p:has(> br:only-child) { display: none }

body.faqja_e_produktit .proze__trupi :is(ul, ol),
body.faqja_e_produktit .spec__proze :is(ul, ol) { margin: 0 0 14px; padding-left: 22px }

body.faqja_e_produktit .proze__trupi li,
body.faqja_e_produktit .spec__proze li { margin: 0 0 6px }

body.faqja_e_produktit .proze__trupi li::marker,
body.faqja_e_produktit .spec__proze li::marker { color: var(--bss-cyan) }

body.faqja_e_produktit .proze__trupi :is(strong, b),
body.faqja_e_produktit .spec__proze :is(strong, b),
body.faqja_e_produktit .spec__vlera :is(strong, b) { color: var(--text-strong); font-weight: 700 }

body.faqja_e_produktit .proze__trupi a,
body.faqja_e_produktit .spec__proze a,
body.faqja_e_produktit .spec__vlera a { color: var(--text-link); text-decoration: underline }

body.faqja_e_produktit .proze__trupi hr,
body.faqja_e_produktit .spec__proze hr { border: 0; border-top: 1px solid var(--border-hairline); margin: 22px 0 }

body.faqja_e_produktit .proze__trupi blockquote,
body.faqja_e_produktit .spec__proze blockquote {
    margin: 0 0 14px;
    padding: 2px 0 2px 16px;
    border-left: 2px solid var(--border-accent);
    color: var(--text-muted);
}

/* global.css:28-32 i detyron width:100%, prandaj ri-deklarohet. Pjate e bardhe, si ne
   skene: fotot e katalogut nuk jane te gjitha prerje transparente. */
body.faqja_e_produktit .proze__trupi img,
body.faqja_e_produktit .spec__proze img {
    width: auto;
    max-width: 100%;
    height: auto;
    background: #fff;
    border-radius: var(--radius-md);
}

body.faqja_e_produktit .proze__trupi table,
body.faqja_e_produktit .spec__proze table {
    width: 100%;
    margin: 0 0 14px;
    border-collapse: collapse;
    background: rgba(255, 255, 255, .03);
    border-radius: var(--radius-md);
    overflow: hidden;
    font-size: 14px;
}

body.faqja_e_produktit .proze__trupi :is(th, td),
body.faqja_e_produktit .spec__proze :is(th, td) {
    padding: 10px 14px;
    border: 1px solid var(--border-hairline);
    color: var(--text-body);
    text-align: left;
}

body.faqja_e_produktit .proze__trupi th,
body.faqja_e_produktit .spec__proze th {
    color: var(--text-strong);
    font-weight: 600;
    background: rgba(255, 255, 255, .04);
}

/* ===== DRITARJA — zmadhim i kufizuar sipas imazhit =====
   Mbishtresa eshte femije i DREJTPERDREJTE i <body>, pas <footer>: brenda <header>
   ose nen cdo paraardhes me filter / transform / contain, nje element position:fixed
   ri-ankorohet. Shtresa 10000 sepse #whatsapp_btn (footer.css:187) eshte fixed me
   z-index:9999 dhe ndryshe do te lundronte mbi foton e zmadhuar. */

body.faqja_e_produktit .dritarja {
    position: fixed;
    inset: 0;
    z-index: var(--shtrese-dritare);
    place-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, .86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overscroll-behavior: contain;
    animation: pdp-dritare-hyr var(--dur-base) var(--ease-out) both;
}

/* Dy rreshta: foto + shiriti i kontrollit. Me "position:absolute; bottom:22px" shiriti
   mbulonte foton sa here hapesira (100vh - 86vh)/2 ishte < 76px, pra ne thuajse cdo
   pamje reale (matur 50.8px mbulim ne 740x360, 22.2px ne 1024x768). */
body.faqja_e_produktit #dritarja:not([hidden]) { display: grid; grid-template-rows: minmax(0, 1fr) auto; row-gap: 12px }

/* Pjate e BARDHE edhe ketu: 21% e fotove jane prerje transparente qe mbi kete sfond
   te erret do te kishin buze te padukshme, dhe 66% jane drejtkendesha te bardha qe pa
   pjate do te dukeshin si fleta letre me kende te prere. */
body.faqja_e_produktit .dritarja__pjate {
    position: relative;
    display: grid;
    place-items: center;
    width: auto;
    max-width: min(92vw, 1100px);
    /* 114px = 24+24 (padding i dritares) + 54 (shiriti) + 12 (row-gap). */
    max-height: min(86vh, calc(100vh - 114px));
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-float);
    overflow: hidden;
    cursor: zoom-in;
    touch-action: none;
}

body.faqja_e_produktit .dritarja--zmadhuar .dritarja__pjate { cursor: zoom-out }

body.faqja_e_produktit .dritarja--terhiqet .dritarja__pjate { cursor: grabbing }

body.faqja_e_produktit .dritarja__foto {
    width: auto;
    max-width: min(92vw, 1100px);
    /* I NJEJTI budxhet si pjata: po u ndryshua vetem pjata, foto priten 96px. */
    max-height: min(86vh, calc(100vh - 114px));
    object-fit: contain;
    transform-origin: center center;
    transition: transform var(--dur-base) var(--ease-out);
}

body.faqja_e_produktit .dritarja--terhiqet .dritarja__foto { transition: none }

body.faqja_e_produktit .dritarja__skelet {
    position: absolute;
    inset: 0;
    background-color: var(--ink-300);
    background-image: var(--grad-sheen);
    background-size: 250% 100%;
    animation: bss-sheen var(--dur-shkelqim) var(--ease-in-out) infinite;
    pointer-events: none;
}

body.faqja_e_produktit #dritarja_skeleti:not([hidden]) { display: block }

body.faqja_e_produktit .dritarja__mbyll {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: var(--control-md);
    height: var(--control-md);
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    background: var(--surface-glass-strong);
    color: var(--text-strong);
    font: var(--type-small);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

body.faqja_e_produktit .dritarja__mbyll:hover {
    display: grid;
    width: var(--control-md);
    padding: 0;
    border: 1px solid var(--cherry-300);
    border-radius: 50%;
    background: rgba(200, 60, 59, .22);
    color: #fff;
    text-align: center;
    cursor: pointer;
    transform: rotate(90deg);
}

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

body.faqja_e_produktit .dritarja__numri {
    position: absolute;
    top: 26px;
    left: 24px;
    display: inline-block;
    font: 500 12px/1 var(--font-mono);
    letter-spacing: var(--ls-mono);
    color: var(--text-muted);
}

body.faqja_e_produktit .dritarja__sageta {
    position: absolute;
    /* -33px = (54 shirit + 12 rrip) / 2: pa kete shigjetat rrine 33px nen qendren e
       fotos, se pjata tani qendrohet ne rreshtin 1 e nuk ne tere dritaren. */
    top: calc(50% - 33px);
    display: grid;
    place-items: center;
    width: var(--control-lg);
    height: var(--control-lg);
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    background: var(--surface-glass-strong);
    color: var(--text-strong);
    font: var(--type-small);
    text-align: center;
    cursor: pointer;
    transform: translateY(-50%);
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

body.faqja_e_produktit .dritarja__kontrolle:not([hidden]) { display: flex }

body.faqja_e_produktit .dritarja__sageta--para { left: 16px }

body.faqja_e_produktit .dritarja__sageta--pas { right: 16px }

body.faqja_e_produktit .dritarja__sageta:hover {
    display: grid;
    width: var(--control-lg);
    padding: 0;
    border: 1px solid var(--border-accent);
    border-radius: 50%;
    background: rgba(79, 198, 242, .2);
    color: var(--text-strong);
    text-align: center;
    cursor: pointer;
}

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

/* display vjen nga :not([hidden]): rregulli i pergjithshem [hidden] eshte (0,2,1), i njejti
   peshe me kete, ndaj "display:flex" i deklaruar me pas do t'e mundte atributin hidden. */
body.faqja_e_produktit .dritarja__kontrolle {
    /* static: element i rrjetes ne rreshtin 2, jo mbishtrese mbi foton. */
    position: static;
    bottom: auto;
    left: auto;
    align-items: center;
    gap: 10px;
    width: auto;
    max-width: calc(100vw - 48px);
    padding: 8px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--surface-glass-strong);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    transform: none;
}

body.faqja_e_produktit .dritarja__btn {
    display: grid;
    place-items: center;
    width: var(--control-sm);
    height: var(--control-sm);
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: var(--text-strong);
    font: 700 17px/1 var(--font-body);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

body.faqja_e_produktit .dritarja__btn:hover {
    display: grid;
    width: var(--control-sm);
    padding: 0;
    border: 1px solid var(--border-accent);
    border-radius: 50%;
    background: rgba(79, 198, 242, .18);
    color: var(--text-strong);
    text-align: center;
    cursor: pointer;
}

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

body.faqja_e_produktit .dritarja__shkalla {
    min-width: 48px;
    font: 700 13px/1 var(--font-mono);
    letter-spacing: var(--ls-mono);
    color: var(--text-strong);
    text-align: center;
}

body.faqja_e_produktit .dritarja__kufi {
    font: 500 11.5px/1 var(--font-mono);
    letter-spacing: var(--ls-mono);
    /* 2.79:1 me --text-faint mbi skrimin e dritares: nen kufirin AA. */
    color: var(--text-muted);
    white-space: nowrap;
}

body.faqja_e_produktit .dritarja__kufi:empty { display: none }

/* ===== SINJALET (toast) =====
   Poshte-MAJTAS me qellim: #whatsapp_btn rri fiks poshte-djathtas me z-index 9999,
   keshtu qe asnje sinjal nuk mund te futet nen te. */

body.faqja_e_produktit .sinjalet {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: var(--shtrese-sinjal);
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    width: auto;
    max-width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}

body.faqja_e_produktit .sinjali {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: auto;
    padding: 14px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-glass-strong);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    box-shadow: var(--shadow-float);
    pointer-events: auto;
    animation: pdp-sinjal-hyr var(--dur-slow) var(--ease-spring) both;
}

body.faqja_e_produktit .sinjali--gabim {
    border: 1px solid rgba(200, 60, 59, .5);
    background: linear-gradient(180deg, rgba(94, 19, 19, .92), rgba(8, 12, 18, .94));
}

body.faqja_e_produktit .sinjali__tekst {
    min-width: 0;
    font: var(--type-small);
    color: var(--text-strong);
}

body.faqja_e_produktit .sinjali--gabim .sinjali__tekst { color: #fff }

/* ===== Header-i si "pilule" qelqi =====
   Kopjuar nga index.css:827-852 me klasen e faqes te nderruar. header.css e ben
   header-in nje shirit te zi me gjeresi te plote; ketu behet pilula lundruese.
   Margjina -77px e tërheq permbajtjen nen pilule, prandaj rripi i pare ka >=88px
   padding lart (tabela e pikave te kontrollit). */

body.faqja_e_produktit > 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 ne vend te dritares (CL-008). E matur pas-vetie: filter,
   backdrop-filter, transform, will-change:transform, contain:paint, contain:layout
   dhe perspective mbi <header> e cojne buzen e djathte te sirtarit ne 1395 kundrejt
   clientWidth 1430; opacity e ruan gjeometrine por e zbeh sirtarin. Asnje prej tyre
   mbi <header> dhe mbi <footer>. */
body.faqja_e_produktit > 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_produktit > header nav a { color: var(--text-body) }

body.faqja_e_produktit > header nav a:hover { color: var(--text-strong); border-bottom-color: var(--bss-cyan) }

body.faqja_e_produktit #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_produktit #search_form input::placeholder { color: var(--text-muted) }

body.faqja_e_produktit #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_produktit #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_produktit .rezultat_kerkimi_produkti {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border-hairline);
    box-shadow: none;
}

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

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

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

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

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

/* ===== Shporta (header.css e ben sidebar-in te bardhe) =====
   NUK preken display / right / position / transition: header.js dhe produkt.js i
   vendosin ne stil inline, dhe inline mund cdo stylesheet (CL-007). */

body.faqja_e_produktit #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_produktit .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_produktit .produkt_ne_shporte h6 { color: var(--text-strong) }

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

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

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

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

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

/* ===== Vija ndarese drejt footer-it ===== */

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

/* ===== Levizja ===== */
/* Cdo emer keyframe-i i ri mban prefiksin pdp-, se emrat e keyframe-ve jane globale
   per DOKUMENT dhe bss-tokens.css shpall bss-aurora, bss-float, bss-rise,
   bss-marquee, bss-sheen. Skeletet ri-perdorin bss-sheen — pa keyframe te re. */

@keyframes pdp-shfaqu { from { opacity: 0 } }
@keyframes pdp-dritare-hyr { from { opacity: 0 } to { opacity: 1 } }
@keyframes pdp-sinjal-hyr { from { opacity: 0; transform: translateX(-110%) scale(.92) } to { opacity: 1; transform: none } }
@keyframes pdp-shirit-hyr { from { opacity: 0; transform: translateY(-10px) } to { opacity: 1; transform: none } }
@keyframes pdp-puls-pike { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* ===== prefers-reduced-motion =====
   Mekanizmi kryesor: cdo kohezgjatje ne kete file shkruhet me var(--dur-*), keshtu qe
   ri-vendosja e tokenave ne .01ms i shuan TE GJITHA tranzicionet dhe animacionet pa
   asnje !important dhe pa luftuar specifikimin (nje bllok "body.faqja_e_produktit *"
   ka specifikim (0,1,1) dhe do te humbte kundrejt rregullave (0,2,1) me lart).
   Shkruhen kohezgjatje, JO "animation: none": .bss-rise perdor
   animation-fill-mode:both dhe "none" do t'i lente ato elemente te mbetur ne
   opacity:0. */

@media (prefers-reduced-motion: reduce) {
    body.faqja_e_produktit {
        --dur-instant: .01ms;
        --dur-fast: .01ms;
        --dur-base: .01ms;
        --dur-slow: .01ms;
        --dur-rise: .01ms;
        --dur-shkelqim: .01ms;
        --dur-puls: .01ms;
    }

    body.faqja_e_produktit *,
    body.faqja_e_produktit *::before,
    body.faqja_e_produktit *::after {
        animation-duration: .01ms;
        animation-iteration-count: 1;
        transition-duration: .01ms;
        scroll-behavior: auto;
    }

    /* Pulsimet dhe shkelqimet e pafundme ndalen ne iteracionin e pare; gjendja e tyre
       perfundimtare eshte e sakte (opacity:1 per .shenje__pike). */
    body.faqja_e_produktit .shenje__pike,
    body.faqja_e_produktit .vitrina__skelet,
    body.faqja_e_produktit .dritarja__skelet,
    body.faqja_e_produktit .bss-btn--primary:hover::after { animation-iteration-count: 1 }

    body.faqja_e_produktit .vitrina__pjate:hover,
    body.faqja_e_produktit .miniatura:hover,
    body.faqja_e_produktit .vlere:hover,
    body.faqja_e_produktit .vlere.vlere_ngjyre:hover,
    body.faqja_e_produktit .bss-btn--primary:hover,
    body.faqja_e_produktit #shto_ne_shporte:hover,
    body.faqja_e_produktit .dritarja__mbyll:hover { transform: none }

    body.faqja_e_produktit #produkte_te_ngjashme .produkt_widget { transform: none }
}

/* ===== RESPONSIVE =====
   Pikat e kontrollit: 1920 / 1500 / 1366 / 1200 / 1024 / 1000 / 880 / 767 / 600 /
   440 / 360. Cdo bllok qe nderron grid-template-columns ri-shpall EDHE
   grid-template-areas (dhe variantin --njesh), se ndryshe shfaqen kolona te nenkuptuara.
   Numri i kolonave te "Produkte te ngjashme" rregullohet ne
   public/components/produkt.css, sepse ai file ngarkohet i fundit ne kete faqe. */

/* ---- 1500px e poshte ---- */
@media (max-width: 1500px) {
    body.faqja_e_produktit { --mas-miniature: 88px; --kufi-pjate: 700px }

    body.faqja_e_produktit .vitrina {
        grid-template-columns: 104px minmax(0, 1fr) 400px;
        grid-template-areas: "shirit skene panel";
        padding: 88px 0 0;
    }

    body.faqja_e_produktit .vitrina--njesh {
        grid-template-columns: minmax(0, 1fr) 400px;
        grid-template-areas: "skene panel";
    }
}

/* ---- 1366px e poshte: menyja ngushtohet qe te mos shtyje kerkimin ---- */
@media (max-width: 1366px) {
    body.faqja_e_produktit { --mas-miniature: 84px; --kufi-pjate: 660px }

    body.faqja_e_produktit .vitrina {
        grid-template-columns: 104px minmax(0, 1fr) 380px;
        grid-template-areas: "shirit skene panel";
        padding: 88px 0 0;
    }

    body.faqja_e_produktit .vitrina--njesh {
        grid-template-columns: minmax(0, 1fr) 380px;
        grid-template-areas: "skene panel";
    }

    body.faqja_e_produktit > header nav { gap: 20px; margin-left: 6px }
    body.faqja_e_produktit > header nav a { font-size: 14px }
}

/* ---- 1200px e poshte ---- */
@media (max-width: 1200px) {
    body.faqja_e_produktit { --mas-miniature: 80px; --kufi-pjate: 600px }

    body.faqja_e_produktit main { padding: 0 0 112px }

    body.faqja_e_produktit .vitrina {
        grid-template-columns: 96px minmax(0, 1fr) 360px;
        grid-template-areas: "shirit skene panel";
        min-height: clamp(540px, 76svh, 880px);
        padding: 88px 0 0;
    }

    body.faqja_e_produktit .vitrina--njesh {
        grid-template-columns: minmax(0, 1fr) 360px;
        grid-template-areas: "skene panel";
    }

    body.faqja_e_produktit .vitrina__panel { padding: 32px 26px 44px }
    body.faqja_e_produktit > header nav { gap: 16px }
    body.faqja_e_produktit #search { width: 320px }
}

/* ---- 1024px e poshte ---- */
@media (max-width: 1024px) {
    body.faqja_e_produktit {
        --gjeresia-rripit: min(100% - 40px, var(--container-max));
        --mas-miniature: 76px;
        --kufi-pjate: 520px;
    }

    body.faqja_e_produktit main { padding: 0 0 104px }

    body.faqja_e_produktit .vitrina {
        grid-template-columns: 84px minmax(0, 1fr) 340px;
        grid-template-areas: "shirit skene panel";
        min-height: clamp(520px, 72svh, 820px);
        padding: 88px 0 0;
    }

    body.faqja_e_produktit .vitrina--njesh {
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-areas: "skene panel";
    }

    /* Qelqi me kosto te larte hiqet; bordura majtas mbetet se kolonat jane edhe tre. */
    body.faqja_e_produktit .vitrina__panel {
        padding: 30px 22px 40px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(8, 12, 18, .9);
    }

    body.faqja_e_produktit > header nav { gap: 13px }
    body.faqja_e_produktit > header nav a { font-size: 13px }
    body.faqja_e_produktit #search { width: 240px }
}

/* ---- 1000px e poshte: menyja fshihet, njesoj si ne faqen kryesore ---- */
@media (max-width: 1000px) {
    /* Fshehja/hapja e menyse jane TERESISHT te header.css (nav{display:none} +
       nav.menu-open{display:flex} ne te njejten @media). Nje kopje e "display:none"
       ketu e mundte gjendjen e hapur dhe e vdiste menyne ne cdo gjeresi <=1000px. */
    body.faqja_e_produktit #search { width: 360px }
}

/* ---- 880px e poshte: NJE kolone, skena lart, pistja horizontale, paneli poshte ---- */
@media (max-width: 880px) {
    body.faqja_e_produktit { --mas-miniature: 76px; --kufi-pjate: 520px; --inset-pjate: 32px }

    body.faqja_e_produktit main { padding: 0 0 96px }

    body.faqja_e_produktit .vitrina {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "skene" "shirit" "panel";
        row-gap: 0;
        min-height: 0;
        padding: 84px 0 0;
    }

    body.faqja_e_produktit .vitrina--njesh {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "skene" "panel";
    }

    body.faqja_e_produktit .vitrina__skene {
        height: 56svh;
        min-height: 380px;
        max-height: 560px;
        padding: 16px;
    }

    /* Pistja behet rresht horizontal me snap te detyruar. Overflow-i rri MBI pisten,
       kurre mbi body, html, main, header ose footer. */
    body.faqja_e_produktit .vitrina__shirit {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        max-height: none;
        padding: 14px 16px 0;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
    }

    /* Bordura kalon lart, se paneli nuk rri me ne te djathte te skenes; hapesira
       anesore e rripit vjen nga padding-i, se ky rrip nuk ka .rrip__brenda. */
    body.faqja_e_produktit .vitrina__panel {
        gap: 16px;
        padding-top: 28px;
        padding-bottom: 40px;
        padding-inline: max(20px, calc((100% - var(--gjeresia-rripit)) / 2));
        border-left: 0;
        border-top: 1px solid var(--border-subtle);
        margin-top: 24px;
    }

    body.faqja_e_produktit .vitrina__numri { bottom: 18px; left: 26px }
    body.faqja_e_produktit .vitrina__veprim { top: 16px; right: 26px }

    body.faqja_e_produktit .spec__rrjeta { grid-template-columns: minmax(0, 1fr) }
    body.faqja_e_produktit #search { width: 300px }
}

/* ---- 767px e poshte ---- */
@media (max-width: 767px) {
    body.faqja_e_produktit {
        --gjeresia-rripit: min(100% - 32px, var(--container-max));
        --mas-miniature: 68px;
        --kufi-pjate: 440px;
        --inset-pjate: 24px;
    }

    /* Hapesira per shiritin e blerjes se shpejte, qe tani rri fiks poshte. */
    body.faqja_e_produktit main { padding: 0 0 196px }

    body.faqja_e_produktit .vitrina {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "skene" "shirit" "panel";
        padding: 84px 0 0;
    }

    body.faqja_e_produktit .vitrina--njesh {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "skene" "panel";
    }

    body.faqja_e_produktit .vitrina__skene {
        width: 100%;
        height: 42svh;
        min-height: 300px;
        max-height: 420px;
        padding: 10px 0;
        border-radius: 0;
    }

    body.faqja_e_produktit .vitrina__pjate { border-radius: var(--radius-xl) }

    /* Sagetat hiqen: rreshqitja me gisht, pistja dhe numeruesi i zevendesojne. */
    body.faqja_e_produktit #imazhi_para,
    body.faqja_e_produktit #imazhi_pas { display: none }

    body.faqja_e_produktit .vitrina__numri { bottom: 12px; left: 16px }
    body.faqja_e_produktit .vitrina__veprim { top: 12px; right: 16px }

    body.faqja_e_produktit .vitrina__panel { padding-top: 24px; padding-bottom: 32px; margin-top: 18px }

    /* Shiriti i blerjes: i ngjitur ne buzen e poshtme, GJITHMONE i dukshem. */
    body.faqja_e_produktit .shiriti_blic {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Rrjete me dy kolona: cmimi tkurret, butoni mban gjeresine e vet te brendshme.
       Me flex-in e meparshem butoni dilte jashte pamjes (0px i dukshem ne 320). */
    body.faqja_e_produktit .shiriti_blic__brenda {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "emri   emri"
            "varia  varia"
            "cmimi  veprim";
        align-items: center;
        column-gap: 10px;
        gap: 10px;
        min-height: 64px;
        row-gap: 3px;
        padding: 9px 14px;
        background: linear-gradient(180deg, rgba(10, 15, 22, .97), rgba(6, 9, 14, .99));
        border-radius: var(--radius-xl);
        margin-bottom: 10px;
    }

    /* Miniatura nuk ka vend; titulli dhe atributet e zgjedhura marrin rreshtat e tyre. */
    body.faqja_e_produktit .shiriti_blic__foto { display: none }

    body.faqja_e_produktit .shiriti_blic__emri {
        grid-area: emri;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: normal;
        min-width: 0;
        font-size: 13px;
        line-height: 1.25;
    }

    /* Atributet nuk priten kurre: mbeshtillen dhe shiriti rritet sa duhet. */
    body.faqja_e_produktit .shiriti_blic__variacioni {
        grid-area: varia;
        min-width: 0;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        font-size: 11px;
        line-height: 1.3;
    }

    body.faqja_e_produktit .shiriti_blic__cmimi {
        grid-area: cmimi;
        min-width: 0;
        /* Nje interval ("50 900 Lekë - 58 900 Lekë") nuk hyn kurre ne nje rresht prane
           butonit ne telefon. Ne vend qe te pritet, mbeshtillet dhe shiriti rritet vete. */
        white-space: normal;
        line-height: 1.25;
        font-size: 15px;
    }

    /* Nje interval ("50 900 Lekë - 58 900 Lekë" = 207px) nuk hyn kurre ne 105px prane
       butonit. Ne vend qe te pritet, lejohet te mbeshtillet dhe shiriti rritet vete. */
    @media (max-width: 430px) {
        body.faqja_e_produktit .shiriti_blic__cmimi { font-size: 14px }
    }

    /* Shkurtesa E PLOTE ne cdo gjendje (§6.5): perndryshe border-width:2px i
       global.css rrjedh brenda ne :hover dhe shtresa levizet. */
    body.faqja_e_produktit #shto_ne_shporte_blic,
    body.faqja_e_produktit #shto_ne_shporte_blic:hover,
    body.faqja_e_produktit #shto_ne_shporte_blic:focus-visible,
    body.faqja_e_produktit #shto_ne_shporte_blic:disabled {
        grid-area: veprim;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        height: var(--control-md);
        padding: 0 18px;
        border: 1px solid transparent;
        border-radius: var(--radius-pill);
        text-align: center;
        white-space: nowrap;
    }

    /* === Objektivat e prekjes: 44x44 (Issue 13) === */
    body.faqja_e_produktit .vlere,
    body.faqja_e_produktit .vlere:hover { min-height: 44px }

    body.faqja_e_produktit .matrica__vegle,
    body.faqja_e_produktit .matrica__vegle:hover,
    body.faqja_e_produktit .panel__rivendos,
    body.faqja_e_produktit .panel__rivendos:hover,
    body.faqja_e_produktit .grupi__rregullo,
    body.faqja_e_produktit .grupi__rregullo:hover { height: 44px }

    body.faqja_e_produktit .dritarja__btn,
    body.faqja_e_produktit .dritarja__btn:hover { width: 44px; height: 44px }

    /* Lidhjet e shtegut jane tekst ne rresht (perjashtimi WCAG 2.5.8 per tekstin
       ne rresht): 28.8px e kalon kufirin 24x24 pa shkaterruar ritmin e vetulles. */
    body.faqja_e_produktit .panel__shteg a { display: inline-block; padding: 6px 0 }

    /* D13: butoni i WhatsApp-it ngrihet, ne vend qe shiriti te mbushet me padding
       djathtas. (1,0,1) mbi (1,0,0) te footer.css — pa asnje editim te file-it
       te perbashket. */
    /* 113px = shiriti (103) + margin-bottom (10). Me 104px mbivendosej 9px. */
    body.faqja_e_produktit #whatsapp_btn { bottom: 132px }

    /* main-i mbaron para <footer>, ndaj mbushja e tij nuk e mbron footer-in:
       fundi i faqes rrinte nen shiritin fiks. Footer-i merr pastrimin e vet. */
    body.faqja_e_produktit > footer { padding-bottom: 125px }

    body.faqja_e_produktit .sinjalet { bottom: 128px }

    /* F-18: skedat behen akordeone. Ky eshte i VETMI perjashtim i disiplines se
       [hidden] ne te gjithe file-in — (0,3,1) kundrejt (0,2,1). */
    body.faqja_e_produktit #skedat { display: none }

    body.faqja_e_produktit .paneli_skedes[hidden] { display: block }

    body.faqja_e_produktit .paneli_skedes {
        padding-top: 0;
        padding-bottom: 20px;
        margin-top: 44px;
        border-top: 1px solid var(--border-hairline);
    }

    body.faqja_e_produktit .paneli_skedes:first-of-type { margin-top: 18px }

    body.faqja_e_produktit .paneli_skedes::before {
        content: attr(data-emri);
        display: block;
        padding: 28px 0 16px;
        font: 800 18px/1.2 var(--font-display);
        letter-spacing: var(--ls-heading);
        color: var(--text-strong);
    }

    body.faqja_e_produktit .matrica { padding: 14px }

    /* Rreshti i matrices behet karte. Kolonat ri-shpallen BASHKE me vendosjen e
       qelizave, se ndryshe gjashte qelizat do te shperndaheshin ne 2 kolona si
       bie rasti. */
    body.faqja_e_produktit .matrica__koke { display: none }

    /* Kolona e pare NUK mund te jete 40px: ne rreshtin e dyte dhe te trete ne ate kolone
       bien cmimi dhe kodi, dhe te dy priteshin (matur scrollWidth 89 dhe 129 brenda 40px,
       me "50 900 Lekë" te shkurtuar me pika). Foto e mban madhesine e vet 40x40 gjithsesi. */
    body.faqja_e_produktit .matrica__rresht {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        grid-template-areas: "foto kombinimi" "cmimi kodi" "zgjidh zgjidh";
        align-items: center;
        gap: 8px 12px;
        padding: 12px;
    }

    body.faqja_e_produktit .matrica__rresht .matrica__qelize:nth-child(1) { grid-area: foto }
    body.faqja_e_produktit .matrica__rresht .matrica__qelize:nth-child(2) { grid-area: kombinimi }
    body.faqja_e_produktit .matrica__rresht .matrica__qelize:nth-child(3) { grid-area: cmimi; font-weight: 700; color: var(--text-strong) }
    body.faqja_e_produktit .matrica__rresht .matrica__qelize:nth-child(4) { grid-area: stoku; text-align: right }
    body.faqja_e_produktit .matrica__rresht .matrica__qelize:nth-child(5) { grid-area: kodi }
    body.faqja_e_produktit .matrica__rresht .matrica__qelize:nth-child(6) { grid-area: zgjidh; justify-self: end }

    body.faqja_e_produktit #rripi_i_te_dhenave { padding-top: 56px }
    body.faqja_e_produktit #rripi_i_ngjashem { padding-top: 64px }
}

/* ---- 600px e poshte ----
   global.css:228-230 vendos 20px padding ne body; brenda shkalles behet 0 dhe
   gjeresia e header-it ri-deklarohet (margin-i e anullon margin-left:-20px te
   header.css:470). Pa DY hapat bashke header-i kercen 20px majtas. */
@media (max-width: 600px) {
    body.faqja_e_produktit { padding-left: 0; padding-right: 0 }

    body.faqja_e_produktit > header { width: calc(100% - 24px); margin: 12px auto -77px }

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

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

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

    body.faqja_e_produktit .vlere:hover { padding: 10px 14px }

    body.faqja_e_produktit .vlere.vlere--fakt,
    body.faqja_e_produktit .vlere.vlere--fakt:hover { padding: 8px 11px }
}

/* ---- 440px e poshte ---- */
/* <=480: shigjetat rrine TERESISHT brenda pjates (pjata zen gati tere gjeresine) dhe
   mbulojne ~30% te fotos. Rreshqitja dhe ArrowLeft/Right mbeten, ndaj asnje rruge
   navigimi nuk humbet — i njejti idiom si #imazhi_para/#imazhi_pas ne <=767. */
@media (max-width: 480px) {
    body.faqja_e_produktit .dritarja__sageta { display: none }
}

@media (max-width: 440px) {
    body.faqja_e_produktit { --mas-miniature: 60px; --kufi-pjate: 380px; --inset-pjate: 20px }

    body.faqja_e_produktit main { padding: 0 0 188px }

    body.faqja_e_produktit .vitrina {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "skene" "shirit" "panel";
        padding: 80px 0 0;
    }

    body.faqja_e_produktit .vitrina--njesh {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "skene" "panel";
    }

    body.faqja_e_produktit .vitrina__skene { height: 42svh; min-height: 280px }

    body.faqja_e_produktit .vitrina__shirit { gap: 8px; padding: 12px 14px 0 }

    body.faqja_e_produktit .miniatura,
    body.faqja_e_produktit .miniatura:hover { padding: 4px }

    body.faqja_e_produktit #vlera_e_cmimit { font-size: 28px }
    body.faqja_e_produktit #vlera_e_cmimit.cmimi_interval { font-size: 20px }

    /* Hapesi dhe butoni shtrihen ne rreshta te plote. */
    body.faqja_e_produktit .bss-field.hapesi { width: 100%; flex: 1 0 100% }
    body.faqja_e_produktit .hapesi .bss-input { flex: 1 1 auto; width: auto }
    body.faqja_e_produktit #shto_ne_shporte { flex: 1 0 100%; width: 100% }
    body.faqja_e_produktit #shto_ne_shporte:hover { width: 100% }

    body.faqja_e_produktit .shiriti_blic__emri { font-size: 13px }
    body.faqja_e_produktit #shto_ne_shporte_blic,
    body.faqja_e_produktit #shto_ne_shporte_blic:hover { padding: 0 12px }

    body.faqja_e_produktit .spec__celes { padding: 13px 16px }
    body.faqja_e_produktit .spec__celes:hover { padding: 13px 16px }
    body.faqja_e_produktit .spec__rresht { padding: 10px 16px }
    body.faqja_e_produktit .spec__proze { padding: 4px 16px 16px }

    body.faqja_e_produktit .dritarja { padding: 12px }
    body.faqja_e_produktit .dritarja__sageta { width: var(--control-md); height: var(--control-md) }
    body.faqja_e_produktit .dritarja__sageta:hover { width: var(--control-md) }
}

/* ---- 360px e poshte: me e ngushta qe mbeshtetet ---- */
@media (max-width: 360px) {
    body.faqja_e_produktit {
        --gjeresia-rripit: min(100% - 24px, var(--container-max));
        --mas-miniature: 56px;
        --kufi-pjate: 320px;
        --inset-pjate: 16px;
    }

    body.faqja_e_produktit main { padding: 0 0 184px }

    body.faqja_e_produktit .vitrina {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "skene" "shirit" "panel";
        padding: 76px 0 0;
    }

    body.faqja_e_produktit .vitrina--njesh {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "skene" "panel";
    }

    body.faqja_e_produktit .vitrina__skene { height: 40svh; min-height: 260px }

    /* Rreshti i specifikimeve shtreset: etiketa mbi vleren. */
    body.faqja_e_produktit .spec__rresht {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 4px;
    }
}

/* ===== Shiritat e rrokullisjes ===== */
/* Rrokulliset vete dokumenti (CL-007), prandaj duhet edhe html:has(...) — vetem
   body::-webkit-scrollbar nuk e kap shiritin kryesor. Forma pasardhese
   ("body.faqja_e_produktit " plus ::-webkit-scrollbar, me HAPESIRE) i mbulon
   automatikisht edhe pisten e miniaturave, trupin e matrices dhe cdo rrokullises te
   brendshem te ri. #shiriti_i_miniaturave dhe #skedat e fshehin te tyren me lart. */

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

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

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

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

html:has(body.faqja_e_produktit)::-webkit-scrollbar-thumb,
body.faqja_e_produktit ::-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_produktit)::-webkit-scrollbar-thumb:hover,
body.faqja_e_produktit ::-webkit-scrollbar-thumb:hover {
    background: var(--bss-cyan);
    background-clip: padding-box;
    border: 2px solid transparent;
}

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