/* Tema "default" - FILTRARE IN LISTARE (layered navigation): layout sidebar (arbore categorii +
   filtre) + bara de sortare/numar rezultate, comun paginii de categorie si celei de cautare
   (categorie.php, cautare.php - vezi comentariul "identic ca in categorie.php" din cautare.php). */

.pub-category-layout {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

@media (max-width: 800px) {
    .pub-category-layout {
        grid-template-columns: 1fr;
        padding: 15px;
    }
}

/* Sertar de filtre pe mobil - doar la categorie.php (clasa modificator ".. --drawer-filters"),
   ca sa nu afecteze si cautare.php, care foloseste acelasi layout de baza dar tine sidebar-ul
   inline pe mobil. Acelasi mecanism (backdrop + transform translateX + is-open) ca meniul mobil
   din header.css/header.js, dar cu clase proprii - continutul (bife, slider de pret) nu se
   potriveste cu stilul de link-uri al acelui meniu, deci nu il reutilizeaza direct. */
.pub-category-filters-toggle,
.pub-category-filters-close,
.pub-category-filters-backdrop {
    display: none;
}

@media (max-width: 800px) {
    /* Arborele de categorii NU se dubleaza aici - e deja accesibil din meniul mobil (hamburger,
       .pub-header-nav), asta ramane doar formularul de filtre propriu-zis. */
    .pub-category-layout--drawer-filters #category-tree-card {
        display: none;
    }

    /* Sertar tip "bottom sheet" (se deschide de jos in sus, latime 100%) - nu mai e un panou lateral
       translucid/blur ca inainte (arata ca 2 cutii suprapuse: sticla + cardul alb al formularului
       de filtre pe deasupra) - un singur fundal opac, plat, contine tot (titlu + cele 2 panouri +
       bara de jos). z-index peste widget-ul de contact (500, vezi widget-contact.css) - altfel
       iconita lui de chat ramane vizibila peste coltul din dreapta-jos al sertarului. */
    .pub-category-layout--drawer-filters .pub-category-sidebar {
        position: fixed;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        max-width: none;
        max-height: 88vh;
        margin: 0;
        /* --pub-navbar-panel-bg (Teme > Bara de navigare - transparenta), NU --pub-bg - acesta e
           SINGURUL strat de fundal vizibil al sertarului (comentariul de mai sus: "un singur fundal
           opac, plat, contine tot"), deci setarea de transparenta trebuie aplicata direct aici, nu
           pe #filters-form.pub-sidebar-card (care oricum ramane background:transparent mai jos). */
        background: var(--pub-navbar-panel-bg);
        border-radius: 16px 16px 0 0;
        z-index: 510;
        padding: 16px 16px 0;
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform 0.25s ease;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
    }

    .pub-category-layout--drawer-filters .pub-category-sidebar.is-open {
        transform: translateY(0);
    }

    /* Formularul de filtre isi pierde propriul "card" (fundal/bordura/radius/padding, mostenite
       de la .pub-sidebar-card) - devine parte din acelasi panou plat de mai sus, nu o cutie noua
       suprapusa peste el. */
    .pub-category-layout--drawer-filters #filters-form.pub-sidebar-card {
        border: none;
        border-radius: 0;
        background: transparent;
        padding: 0;
    }

    .pub-category-filters-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        border-radius: var(--pub-radius);
        border: 1px solid var(--pub-border);
        background: var(--pub-bg);
        color: var(--pub-text);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }

    /* Mutat langa hamburger, in header-ul sticky (vezi category_filters_drawer.js) - order:1, ca
       sa i se alature (acelasi order ca .pub-header-nav-toggle, egalitatea de "order" pastreaza
       ordinea din DOM - butonul e inserat imediat dupa hamburger). Mai compact decat in pagina, ca
       randul de sus al header-ului (hamburger + acest buton + iconitele impinse la dreapta) sa
       incapa pe un ecran ingust. */
    .pub-header-inner .pub-category-filters-toggle {
        order: 1;
        margin-left: 8px;
        padding: 6px 12px;
        font-size: 14px;
    }

    .pub-category-filters-close {
        display: block;
        position: absolute;
        top: 12px;
        right: 14px;
        background: none;
        border: none;
        font-size: 26px;
        line-height: 1;
        color: var(--pub-text);
        cursor: pointer;
    }

    /* z-index tot peste widget-ul de contact (500) - fundalul intunecat trebuie sa acopere si
       iconita lui, nu doar restul paginii. */
    .pub-category-filters-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 505;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .pub-category-filters-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }
}

.pub-category-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.pub-sidebar-card {
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    padding: 16px;
    background: var(--pub-header-footer-bg);
    /* Fara overflow-x:hidden aici - altfel (regula CSS: cand un overflow nu e "visible", celalalt
       "visible" devine automat "auto") tot cardul ar deveni scrollabil pe verticala, taind orice
       element pozitionat absolut care iese usor in afara (ex: comentariul de la hover de pe
       swatch-urile de culoare - .pub-color-filter-tooltip). Randul "Sterge toate filtrele" isi
       rotunjeste singur coltul de sus (mai jos), in loc sa se bazeze pe clipping-ul parintelui. */
}

.pub-sidebar-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 12px;
    letter-spacing: 0.03em;
}

.pub-category-tree {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
}

/* Doar arborele din sidebar (#category-tree-card), nu si un eventual alt loc care ar reutiliza
   clasa - cu 3 niveluri (parinte > copil > nepot) poate deveni foarte lung altfel. */
#category-tree-card .pub-category-tree {
    max-height: 480px;
    overflow-y: auto;
    /* Fara asta, overflow-y:auto pe cont propriu forteaza si overflow-x sa devina "auto" (regula
       CSS: daca unul dintre overflow-x/-y nu e "visible", celalalt "visible" devine tot "auto") -
       aparea o bara orizontala nedorita ori de cate ori continutul depasea cu putin latimea. */
    overflow-x: hidden;
    /* Bara de scroll subtire, cu culoarea bordurii de header/footer - Firefox. */
    scrollbar-width: thin;
    scrollbar-color: var(--pub-header-footer-border) transparent;
}

/* Acelasi aspect subtire pt Chrome/Edge/Safari (nu au scrollbar-width/-color). */
#category-tree-card .pub-category-tree::-webkit-scrollbar {
    width: 6px;
}

#category-tree-card .pub-category-tree::-webkit-scrollbar-track {
    background: transparent;
}

#category-tree-card .pub-category-tree::-webkit-scrollbar-thumb {
    background: var(--pub-header-footer-border);
    border-radius: 999px;
}

.pub-category-tree > li {
    position: relative;
    margin-bottom: 4px;
    padding-bottom: 8px;
}

/* Liniuta cu fade spre dreapta intre categoriile de nivel principal (acelasi tipar ca la
   Hero cu categorii, vezi hero-categorii.css) - se pune dupa tot ramul expandat (subcategoriile
   fac parte din acelasi <li>), nu doar dupa randul de sus. */
.pub-category-tree > li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(to right, var(--pub-text-muted), transparent);
}

.pub-category-tree a {
    display: block;
    padding: 6px 0;
    color: var(--pub-text);
    overflow-wrap: break-word;
}

.pub-category-tree a.active {
    color: var(--pub-accent);
    font-weight: 600;
}

/* Fara asta, hover-ul nu se vede deloc: ".pub-category-tree a" (mai sus) seteaza culoarea
   neconditionat si are aceeasi specificitate ca regula globala "a:hover" din base.css, dar
   fiind incarcata dupa (filtre.css vine dupa base.css), o invinge mereu la egalitate - la fel
   ca bug-ul [hidden] deja intalnit de mai multe ori in proiect. */
.pub-category-tree a:hover {
    color: var(--pub-accent);
    text-decoration: none;
}

.pub-category-tree ul {
    list-style: none;
    margin: 0;
    padding: 0 0 0 14px;
    font-size: 13px;
}

.pub-category-tree ul > li {
    position: relative;
}

/* Aceeasi liniuta cu fade, si intre subcategoriile din interiorul unei ramuri deschise. */
.pub-category-tree ul > li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(to right, var(--pub-text-muted), transparent);
}

.pub-category-tree summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.pub-category-tree summary::-webkit-details-marker {
    display: none;
}

.pub-category-tree summary a {
    display: inline;
    padding: 0;
    min-width: 0;
    overflow-wrap: break-word;
}

/* Sageata proprie in loc de marcajul implicit al <details> (ascuns mai sus) - fara ea, o categorie
   cu subcategorii arata identic cu una fara, pana o dai click din greseala. Se roteste cand ramura
   e deschisa (details[open]), la fel ca sagetile din meniul mobil/mega-meniu. */
.pub-category-tree-arrow {
    flex-shrink: 0;
    font-size: 24px;
    color: var(--pub-accent);
    transition: transform 0.2s ease;
}

.pub-category-tree details[open] > summary .pub-category-tree-arrow {
    transform: rotate(90deg);
}

/* Randul de sus al panoului de filtre, doar cand exista macar un filtru activ - margini negative
   ca sa ajunga chiar la marginile .pub-sidebar-card (care are padding:16px), la fel ca footer-ul
   din modalul de vizualizare rapida (produse.css). */
.pub-clear-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: -16px -16px 16px;
    padding: 14px 16px;
    /* Coltul de sus rotunjit manual (nu mai poate fi lasat pe seama clipping-ului parintelui -
       vezi comentariul de la .pub-sidebar-card) - se potriveste exact peste coltul cardului,
       fiind primul element vizibil si intins pe toata latimea lui. */
    border-radius: var(--pub-radius) var(--pub-radius) 0 0;
    border-bottom: 1px solid var(--pub-border);
    color: var(--pub-danger);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.pub-clear-filters:hover {
    color: var(--pub-danger);
    text-decoration: underline;
}

/* Bara de jos ("Sterge filtre" + "Vezi N rezultate") ii ia locul pe mobil - ambele actiuni de
   "iesire" din sertar stau langa rezultat, nu separat sus+jos. */
@media (max-width: 800px) {
    .pub-clear-filters {
        display: none;
    }
}

/* Bara fixa de jos din sertarul de filtre (doar mobil) - filtrele se aplica deja live (fiecare
   bifa isi trimite propriul submit), "Vezi N rezultate" doar inchide sertarul (vezi
   category_filters_drawer.js). position:sticky (nu fixed) - ramane in fluxul sertarului si se
   lipeste de marginea de jos a LUI (nearest scrolling ancestor = .pub-category-sidebar), nu de
   fereastra intreaga. */
.pub-mobile-filter-actions {
    display: none;
}

@media (max-width: 800px) {
    /* Bleed doar prin padding-ul lateral al .pub-category-sidebar (16px) - formularul de filtre
       insusi nu mai are propriul padding pe mobil (vezi regula #filters-form.pub-sidebar-card mai
       sus), deci nu mai e nevoie sa anulam 2 straturi de padding, doar unul. Fara margine negativa
       jos - padding-ul de jos al sertarului e deja 0 pe mobil, bara isi aduce singura respiratia. */
    .pub-mobile-filter-actions {
        display: flex;
        gap: 10px;
        position: sticky;
        bottom: 0;
        margin: 20px -16px 0;
        padding: 12px 16px;
        background: var(--pub-bg);
        border-top: 1px solid var(--pub-border);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    }

    .pub-mobile-filter-clear {
        flex: 1;
    }

    .pub-mobile-filter-apply {
        flex: 2;
    }
}

.pub-filter-group {
    display: block;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--pub-header-footer-border);
}

.pub-filter-group:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Fiecare grup de filtre e un <details> expandabil (deschis implicit) - la fel ca arborele de
   categorii de mai sus, cu sageata proprie in loc de marcajul implicit al browserului. */
.pub-filter-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    margin: 0;
    cursor: pointer;
    list-style: none;
}

.pub-filter-heading::-webkit-details-marker {
    display: none;
}

.pub-filter-arrow {
    flex-shrink: 0;
    font-size: 24px;
    line-height: 1;
    color: var(--pub-accent);
    transition: transform 0.2s ease;
}

.pub-filter-group[open] > .pub-filter-heading .pub-filter-arrow {
    transform: rotate(90deg);
}

.pub-filter-options {
    margin-top: 10px;
}

/* Limita de inaltime + scroll pt liste lungi de valori (culoare, marime, material etc) - fara
   asta, un atribut cu multe valori ar impinge tot restul sidebar-ului (pret, celelalte grupuri)
   mult in jos. Acelasi stil subtire de bara de scroll ca la arborele de categorii de mai sus. */
.pub-filter-options-scroll {
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--pub-header-footer-border) transparent;
}

.pub-filter-options-scroll::-webkit-scrollbar {
    width: 6px;
}

.pub-filter-options-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.pub-filter-options-scroll::-webkit-scrollbar-thumb {
    background: var(--pub-header-footer-border);
    border-radius: 999px;
}

.pub-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 8px;
    cursor: pointer;
    /* Pe Android/Chrome mobil, un tap poate lasa temporar un dreptunghi de "tap highlight" sau o
       selectie nativa de text peste rand (mai vizibil pe randul tocmai apasat) - ambele dezactivate
       explicit, ca randul sa ramana curat la orice atingere. */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.pub-filter-checkbox:last-child {
    margin-bottom: 0;
}

.pub-filter-checkbox input[type="checkbox"] {
    /* Fara flex-shrink:0, bifa nativa se putea ingusta langa un text lung, aceeasi problema ca la
       bulina de culoare (.pub-color-dot) - vezi comentariul de-acolo. accent-color inlocuieste
       albastrul implicit al sistemului de operare (Android/Chrome) cu accentul temei, ca sa nu se
       confunde vizual cu o bulina de culoare albastra alaturata cand bifa e selectata. */
    flex-shrink: 0;
    accent-color: var(--pub-accent);
}

/* Text separat intr-un <span> propriu (nu text simplu, "gol", direct in <label>) - ca element de
   flex de sine statator, cu latime minima 0, se poate ingusta/trece pe mai multe randuri normal,
   fara sa "impinga" bulina de culoare alaturata sau sa se suprapuna peste ea (comportament
   imprevizibil al textului simplu ca element anonim de flex, mai ales cand se intinde pe 2 randuri). */
.pub-filter-checkbox-text {
    flex: 1;
    min-width: 0;
}

/* Randul culorii selectate - text cu accentul temei (in loc de culoarea implicita de text), ca sa
   se distinga clar in lista fara sa depinda de bifa nativa a browserului. Scopat DOAR la filtrul de
   Culoare (input[name="culoare[]"]) - celelalte filtre (Brand, Disponibilitate etc.) raman cu
   stilul implicit de bifa selectata. */
.pub-filter-checkbox:has(input[name="culoare[]"]:checked) {
    color: var(--pub-accent);
    font-weight: 600;
}

/* Pe mobil totul era prea mic de citit/atins cu degetul (text 13px, bifa nativa ~13px, swatch-uri
   de 22px) - marim text + bifa + zona de atins a fiecarui rand la sub acest prag (acelasi prag ca
   sertarul de filtre de mai sus), fara sa afectam desktopul. */
@media (max-width: 800px) {
    .pub-filter-heading {
        font-size: 15px;
    }

    .pub-filter-checkbox {
        min-height: 40px;
        font-size: 13px;
        gap: 10px;
    }

    .pub-filter-checkbox input[type="checkbox"] {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
    }
}

/* Cele 2 panouri scrolabile pe mobil (nume de grupuri in stanga, valorile grupului activ in
   dreapta - vezi category_mobile_filters.js, care muta fiecare .pub-filter-options din accordion-ul
   original #filter-groups in aceste panouri). Pe desktop, JS-ul nu ruleaza deloc (isMobile() e
   fals) - #filter-groups ramane vizibil normal, ca accordion, si aceste clase nici nu apar in DOM. */
#filter-groups {
    display: block;
}

@media (max-width: 800px) {
    #filters-form.has-mobile-panes #filter-groups {
        display: none;
    }

    .pub-mobile-filter-panes {
        display: flex;
        margin: 0 -16px;
        border-top: 1px solid var(--pub-border);
        height: 50vh;
        max-height: 420px;
    }

    .pub-mobile-filter-nav {
        flex: 0 0 130px;
        overflow-y: auto;
        background: var(--pub-surface);
        border-right: 1px solid var(--pub-border);
    }

    .pub-mobile-filter-nav-btn {
        display: block;
        width: 100%;
        padding: 14px 10px;
        border: none;
        border-bottom: 1px solid var(--pub-border);
        background: none;
        text-align: left;
        font-size: 13px;
        font-weight: 600;
        color: var(--pub-text);
        cursor: pointer;
    }

    /* Bara verticala de accent pe grupul activ, ca la referinta (eMag) - box-shadow inset, nu
       border-left, ca sa nu clatine latimea butonului cu 3px cand devine activ. */
    .pub-mobile-filter-nav-btn.is-active {
        background: var(--pub-bg);
        color: var(--pub-accent);
        box-shadow: inset 3px 0 0 var(--pub-accent);
    }

    .pub-mobile-filter-panel {
        flex: 1;
        min-width: 0;
        overflow-y: auto;
        padding: 12px;
    }

    .pub-mobile-filter-panel-group[hidden] {
        display: none;
    }

    /* Panoul insusi scroleaza deja (mai sus) - limita de inaltime + scroll propriu de pe desktop
       (.pub-filter-options-scroll, pt liste lungi de culori/atribute/branduri) ar insemna doua
       bare de scroll imbricate inutil aici. */
    .pub-mobile-filter-panel .pub-filter-options-scroll {
        max-height: none;
        overflow: visible;
    }
}

.pub-price-slider {
    position: relative;
    height: 24px;
    margin: 8px 2px 4px;
}

.pub-price-slider-track-bg {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--pub-border);
    border-radius: 2px;
}

.pub-price-slider-track-fill {
    position: absolute;
    top: 10px;
    height: 4px;
    background: var(--pub-accent);
    border-radius: 2px;
}

.pub-price-range {
    position: absolute;
    width: 100%;
    top: 8px;
    left: 0;
    height: 8px;
    margin: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.pub-price-range::-webkit-slider-runnable-track {
    background: transparent;
}

.pub-price-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--pub-accent);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--pub-accent);
    cursor: pointer;
    margin-top: 0;
}

.pub-price-range::-moz-range-track {
    background: transparent;
}

.pub-price-range::-moz-range-thumb {
    pointer-events: auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--pub-accent);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--pub-accent);
    cursor: pointer;
}

.pub-price-labels {
    font-size: 13px;
    color: var(--pub-text-muted);
}

/* Eticheta cu pretul de la fiecare capat al barei (sus=maxim, jos=minim) - inlocuieste randul
   combinat ".pub-price-labels" DOAR pe bara verticala de mobil (vezi mai jos); pe orizontala
   (desktop, si oriunde alta bara de pret ramane orizontala - ex: cautare.php) ramane ascunsa,
   randul combinat de mai jos e suficient acolo. */
.pub-price-edge-label {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: var(--pub-text-muted);
    white-space: nowrap;
}

.pub-price-edge-label-max {
    bottom: calc(100% + 8px);
}

.pub-price-edge-label-min {
    top: calc(100% + 8px);
}

/* Bulina cu pretul curent, langa capatul de care tragi - vizibila doar cat timp tragi (clasa
   .is-dragging, vezi price_range.js: bindDragBubble()). Pozitia (bottom/left, in % de-a lungul
   barei) e calculata tot in JS, la fel ca umplerea barei - functioneaza neschimbata si pe
   orizontala (desktop), nu doar pe verticala. */
.pub-price-drag-bubble {
    position: absolute;
    left: 0;
    bottom: 100%;
    z-index: 4;
    margin-bottom: 8px;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--pub-text);
    color: var(--pub-bg);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity 0.15s ease;
}

.pub-price-drag-bubble.is-dragging {
    opacity: 1;
}

/* Pe mobil (panoul "Pret" din sertarul de filtre in 2 coloane, vezi filtre.css mai sus/
   category_mobile_filters.js) coloana din dreapta e ingusta - bara orizontala de pret ramanea
   inghesuita. Rotita pe verticala (writing-mode, nu transform:rotate() - acela ar strica
   evenimentele native de drag ale <input type="range">, care raman complet native aici, fara
   niciun cod JS nou de urmarire a mouse-ului/degetului) + 20% mai inalta decat lungimea de baza
   (240px -> 288px). direction:rtl pe langa vertical-lr - minimul jos, maximul sus (acelasi sens
   ca pe orizontala: minim la "inceput", maxim la "sfarsit"). JS-ul (price_range.js) seteaza acum
   bottom/height in loc de left/width cand e in acest mod - vezi updateFill(). Scopat la
   .pub-category-layout--drawer-filters (doar categorie.php) - cautare.php are propriul sidebar
   inline pe mobil, fara panoul ingust care justifica rotirea. */
@media (max-width: 800px) {
    .pub-category-layout--drawer-filters .pub-price-slider {
        width: 24px;
        height: 258px;
        margin: 40px auto 32px;
    }

    .pub-category-layout--drawer-filters .pub-price-edge-label {
        display: block;
    }

    .pub-category-layout--drawer-filters .pub-price-labels {
        display: none;
    }

    .pub-category-layout--drawer-filters .pub-price-slider-track-bg {
        top: 0;
        bottom: 0;
        left: 10px;
        right: auto;
        width: 4px;
        height: auto;
    }

    .pub-category-layout--drawer-filters .pub-price-slider-track-fill {
        top: auto;
        left: 10px;
        width: 4px;
        height: 0;
    }

    .pub-category-layout--drawer-filters .pub-price-range {
        writing-mode: vertical-lr;
        direction: rtl;
        width: 8px;
        height: 100%;
        top: 0;
        left: 8px;
    }

    /* Bulina se muta langa bara (nu deasupra, ca pe orizontala) - centrata pe punctul de tragere
       cu translateY(50%), fiindca JS-ul ii seteaza "bottom" (marginea de JOS a bulinei la acel
       procent), nu centrul ei. */
    .pub-category-layout--drawer-filters .pub-price-drag-bubble {
        left: 100%;
        bottom: 0;
        margin-bottom: 0;
        margin-left: 10px;
        transform: translateY(50%);
    }
}

/* Descriere lunga de categorie - comprimata pe mobil, cu buton "Citeste mai mult" si un strat de
   fade/blur peste ultima parte (portat din nadragaventura_vs, blocul Despre noi - vezi
   despre-noi.css/despre_noi.js de acolo). Pe desktop ramane intreaga, necomprimata. */
.pub-category-description-toggle {
    display: none;
}

.pub-category-description-fade {
    display: none;
}

@media (max-width: 640px) {
    .pub-category-description-inner {
        max-height: 220px;
        overflow: hidden;
        position: relative;
    }

    .pub-category-description-fade {
        display: block;
        position: absolute;
        inset: 0;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        background: linear-gradient(to bottom, transparent 35%, var(--pub-bg) 100%);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 35%, #000 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, transparent 35%, #000 100%);
        pointer-events: none;
    }

    .pub-category-description.is-expanded .pub-category-description-inner {
        max-height: none;
    }

    .pub-category-description.is-expanded .pub-category-description-fade {
        display: none;
    }

    .pub-category-description-toggle {
        display: table;
        position: relative;
        z-index: 1;
        margin: -18px auto 0;
        background: var(--pub-bg);
        border: 1px solid var(--pub-border);
        border-radius: 20px;
        padding: 8px 18px;
        color: var(--pub-accent);
        font-weight: 700;
        font-size: 0.85rem;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    }

    .pub-category-description.is-expanded .pub-category-description-toggle {
        margin-top: 10px;
        box-shadow: none;
    }
}

.pub-category-banner {
    border-radius: var(--pub-radius);
    overflow: hidden;
    margin-bottom: 16px;
}

.pub-category-banner img {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    display: block;
}

.pub-subcategories-block {
    margin-bottom: 8px;
}

@media (max-width: 800px) {
    .pub-subcategories-block {
        padding-top: 10px;
    }
}

.pub-listing-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pub-border);
}

.pub-listing-count {
    font-size: 13px;
    color: var(--pub-text-muted);
}

/* Status scroll infinit (categorie.php) - "Se incarca...", "Toate produsele au fost afisate." -
   gol implicit ([hidden] via textContent gol nu ajuta la layout, dar ramane fara inaltime vizuala
   perceptibila cat timp nu are text). */
.pub-listing-status {
    text-align: center;
    font-size: 13px;
    color: var(--pub-text-muted);
    margin: 16px 0 0;
}

/* Paginare clasica (alternativa la scroll infinit, aleasa din admin/setari.php) - vezi
   includes/core/category_listing.php. */
.pub-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 24px 0 0;
}

.pub-pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    color: var(--pub-text);
    font-size: 14px;
    text-decoration: none;
}

a.pub-pagination-link:hover {
    border-color: var(--pub-accent);
    color: var(--pub-accent);
}

.pub-pagination-link.active {
    background: var(--pub-accent);
    border-color: var(--pub-accent);
    color: #fff;
    font-weight: 600;
}

.pub-pagination-arrow {
    font-weight: 600;
}

.pub-pagination-ellipsis {
    color: var(--pub-text-muted);
    padding: 0 4px;
}

.pub-listing-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pub-view-toggle {
    display: flex;
    gap: 4px;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    padding: 3px;
}

/* Pe mobil ramane doar afisarea tip card - fara comutator, vezi si product_view_toggle.js
   (forteaza "grid" sub acelasi prag, indiferent de preferinta salvata in localStorage). */
@media (max-width: 800px) {
    .pub-view-toggle {
        display: none;
    }
}

.pub-view-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: calc(var(--pub-radius) - 3px);
    background: transparent;
    color: var(--pub-text-muted);
    cursor: pointer;
}

.pub-view-toggle-btn:hover {
    background: var(--pub-surface);
    color: var(--pub-text);
}

.pub-view-toggle-btn.active {
    background: var(--pub-accent);
    color: #fff;
}

.pub-sort-label {
    font-size: 13px;
    color: var(--pub-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pub-subcategories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.pub-subcategory-chip {
    display: inline-block;
    padding: 6px 14px;
    background: var(--pub-header-footer-bg);
    border: 1px solid var(--pub-border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--pub-text);
}