/* Tema "default" - modul Produse: grid-ul de carduri (categorie/cautare/index) + pagina de detaliu
   produs (galerie, variante, specificatii, produse recomandate) - vezi CATALOG: CATEGORII SI
   PRODUSE + ATRIBUTE SI VARIANTE PRODUS din prompt. */

.pub-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

/* Blocurile "Produse" si "Categorii" din editorul de continut adauga si clasa .pub-grid-coloane,
   cu numarul de coloane ales de admin ca variabila CSS --pub-grid-coloane (stil inline, vezi
   render_block_produse()/render_block_categorii()) - "Coloane" din admin ramane astfel un MAXIM,
   respectat doar la rezolutii mari; sub fiecare breakpoint de mai jos, min() plafoneaza la un numar
   mai mic, indiferent ce a ales admin, ca sa nu se ingramadeasca cardurile pe ecrane inguste.
   Paginile de listare simpla (cautare.php/categorie.php/produs.php) folosesc doar .pub-product-grid,
   fara aceasta clasa, si raman pe auto-fill de mai sus. */
.pub-product-grid.pub-grid-coloane {
    grid-template-columns: repeat(var(--pub-grid-coloane, 4), 1fr);
}

@media (max-width: 900px) {
    .pub-product-grid.pub-grid-coloane {
        grid-template-columns: repeat(min(var(--pub-grid-coloane, 4), 3), 1fr);
    }
}

@media (max-width: 620px) {
    .pub-product-grid.pub-grid-coloane {
        grid-template-columns: repeat(min(var(--pub-grid-coloane, 4), 2), 1fr);
    }
}

@media (max-width: 480px) {
    /* !important obligatoriu - .pub-product-grid.pub-grid-coloane (mai sus) are specificitate mai
       mare si altfel ar castiga fata de acest rand, chiar daca apare mai devreme in fisier. */
    .pub-product-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Carusel (peste "Prag carusel" din editorul blocului Produse) - derulare orizontala nativa cu
   sageti, la fel ca la nadragaventura_vs (public/assets/js/products_carousel.js). */
.pub-products-carousel {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pub-products-track-wrap {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    /* Explicit, altfel browserul calculeaza automat overflow-y:auto (regula CSS: cand overflow-x
       nu e "visible" si overflow-y ramane nescris, acesta devine tot "auto") - permitea un mic
       scroll vertical accidental (rotita mouse-ului peste carusel), care taia varful imaginilor. */
    overflow-y: hidden;
    scroll-behavior: smooth;
    /* "mandatory" (nu "proximity") - trebuie sa corecteze mereu pozitia finala la marginea celui
       mai apropiat card (vezi scroll-snap-align de mai jos), indiferent cat de mare a ajuns deriva
       acumulata din cardStep() (products_carousel.js); "proximity" nu forteaza alinierea decat daca
       pozitia e deja foarte aproape de un punct de snap, insuficient dupa multe click-uri consecutive. */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pub-products-track-wrap::-webkit-scrollbar {
    display: none;
}

.pub-products-grid-scroll {
    display: flex;
    gap: 16px;
    /* Fara justify-content:center - containerul e mereu scrollabil aici, iar centrarea ar face
       primele carduri inaccesibile (scrollLeft nu poate fi negativ). */
}

.pub-products-grid-scroll .pub-product-card,
.pub-products-grid-scroll .pub-blog-card,
.pub-products-grid-scroll .pub-cat-icon-card {
    flex: 0 0 330px;
    /* Obligatoriu impreuna cu scroll-snap-type de pe .pub-products-track-wrap - fara asta, snap-type
       de pe container nu are niciun efect (nu exista puncte de aliniere definite). Pasul de derulare
       din products_carousel.js (cardStep()) se calculeaza din latimea PRIMULUI card, dar la coloane
       calculate procentual (flex-basis: calc((100% - Npx) / N) mai jos) latimile reale ale cardurilor
       pot diferi cu subpixeli intre ele (rotunjire de layout) - eroarea se acumuleaza la fiecare
       click si dupa multe derulari un card ajunge taiat pe jumatate. Cu scroll-snap-align, browserul
       corecteaza singur pozitia finala la marginea celui mai apropiat card, indiferent de deriva. */
    scroll-snap-align: start;
}

/* Caruselul respecta "Coloane" din editorul blocului - cate coloane incapeau in grid-ul static,
   atatea carduri se vad odata si in carusel. .pub-blog-card e inclus pt ca blocul "Blog (carusel)"
   reutilizeaza acelasi carusel (vezi render_block_blog()); .pub-cat-icon-card la fel, pt blocul
   "Categorii" (vezi render_block_categorii()). */
.pub-products-grid-scroll-2 .pub-product-card,
.pub-products-grid-scroll-2 .pub-blog-card,
.pub-products-grid-scroll-2 .pub-cat-icon-card {
    flex-basis: calc((100% - 20px) / 2);
}

.pub-products-grid-scroll-3 .pub-product-card,
.pub-products-grid-scroll-3 .pub-blog-card,
.pub-products-grid-scroll-3 .pub-cat-icon-card {
    flex-basis: calc((100% - 40px) / 3);
}

.pub-products-grid-scroll-4 .pub-product-card,
.pub-products-grid-scroll-4 .pub-blog-card,
.pub-products-grid-scroll-4 .pub-cat-icon-card {
    flex-basis: calc((100% - 60px) / 4);
}

.pub-products-grid-scroll-5 .pub-product-card,
.pub-products-grid-scroll-5 .pub-blog-card,
.pub-products-grid-scroll-5 .pub-cat-icon-card {
    flex-basis: calc((100% - 80px) / 5);
}

.pub-products-grid-scroll-6 .pub-product-card,
.pub-products-grid-scroll-6 .pub-blog-card,
.pub-products-grid-scroll-6 .pub-cat-icon-card {
    flex-basis: calc((100% - 100px) / 6);
}

/* Pana la 7 (produse) - vezi "Coloane" din admin/continut_pagini.php, blocul Produse. */
.pub-products-grid-scroll-7 .pub-product-card,
.pub-products-grid-scroll-7 .pub-blog-card,
.pub-products-grid-scroll-7 .pub-cat-icon-card {
    flex-basis: calc((100% - 120px) / 7);
}

@media (max-width: 900px) {
    .pub-products-grid-scroll-2 .pub-product-card,
    .pub-products-grid-scroll-3 .pub-product-card,
    .pub-products-grid-scroll-4 .pub-product-card,
    .pub-products-grid-scroll-5 .pub-product-card,
    .pub-products-grid-scroll-6 .pub-product-card,
    .pub-products-grid-scroll-7 .pub-product-card,
    .pub-products-grid-scroll-2 .pub-blog-card,
    .pub-products-grid-scroll-3 .pub-blog-card,
    .pub-products-grid-scroll-4 .pub-blog-card,
    .pub-products-grid-scroll-5 .pub-blog-card,
    .pub-products-grid-scroll-6 .pub-blog-card,
    .pub-products-grid-scroll-7 .pub-blog-card,
    .pub-products-grid-scroll-2 .pub-cat-icon-card,
    .pub-products-grid-scroll-3 .pub-cat-icon-card,
    .pub-products-grid-scroll-4 .pub-cat-icon-card,
    .pub-products-grid-scroll-5 .pub-cat-icon-card,
    .pub-products-grid-scroll-6 .pub-cat-icon-card,
    .pub-products-grid-scroll-7 .pub-cat-icon-card {
        flex-basis: calc((100% - 20px) / 2);
    }
}

.pub-products-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    line-height: 1;
    border-radius: 50%;
    border: 1px solid var(--pub-border);
    background: var(--pub-bg);
    color: var(--pub-text);
    cursor: pointer;
}

.pub-products-nav:hover {
    background: var(--pub-accent);
    color: #fff;
    border-color: var(--pub-accent);
}

.pub-products-nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: var(--pub-bg);
    color: var(--pub-text);
    border-color: var(--pub-border);
}

.pub-products-nav[hidden] {
    display: none;
}

/* Pe mobil, caruselul se anuleaza complet - cardurile stau unul sub altul (fara derulare
   orizontala, fara sageti), la fel ca varianta statica. */
@media (max-width: 560px) {
    .pub-products-carousel {
        display: block;
    }
    .pub-products-nav {
        display: none;
    }
    .pub-products-track-wrap {
        overflow-x: visible;
    }
    .pub-products-grid-scroll {
        flex-direction: column;
    }
    /* .pub-blog-card/.pub-cat-icon-card intra aici pt ca blocurile "Blog (carusel)"/"Categorii"
       reutilizeaza acelasi carusel (.pub-products-carousel/-nav/-track-wrap/-grid-scroll) - vezi
       render_block_blog()/render_block_categorii(). */
    .pub-products-grid-scroll .pub-product-card,
    .pub-products-grid-scroll .pub-blog-card,
    .pub-products-grid-scroll .pub-cat-icon-card {
        flex: 1 1 auto;
        width: 100%;
    }
}

.pub-product-card {
    position: relative;
    border: 1px solid var(--pub-border);
    border-radius: 16px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    background: var(--pub-bg);
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Comutator grid/lista (butoanele din .pub-view-toggle, vezi filtre.css) - clasa "view-list" se
   pune pe .pub-product-grid din JS (public/assets/js/product_view_toggle.js), pastrata in
   localStorage. .pub-product-card-link devine "display:contents" ca sa nu mai fie un wrapper de
   layout - imaginea si corpul (deja copii ai lui) intra direct in grid-ul cardului, langa
   formularul de "Adauga in cos" (care e alt copil al cardului, in afara link-ului). */
.pub-product-grid.view-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pub-product-grid.view-list .pub-product-card {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    grid-template-areas: "image body price" "image body action";
    align-items: start;
    gap: 4px 20px;
}

.pub-product-grid.view-list .pub-product-card-link {
    display: contents;
}

.pub-product-grid.view-list .pub-product-card-image-wrap {
    grid-area: image;
}

.pub-product-grid.view-list .pub-product-card-image {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
}

.pub-product-grid.view-list .pub-product-card-body {
    grid-area: body;
    padding: 4px;
}

.pub-product-grid.view-list .pub-product-card-desc {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* Pret + buton mutate intr-o coloana proprie, in dreapta - ca la eMag - in loc sa stea sub
   descriere, pe toata latimea cardului. Padding-top generos - inima de favorite (.pub-wishlist-btn)
   e pozitionata absolut fata de intreg cardul (top:18px, inalta 36px), si in aceasta coloana din
   dreapta ar cadea direct peste pret daca n-am lasa loc sub ea. */
.pub-product-grid.view-list .pub-product-card-price {
    grid-area: price;
    padding: 58px 4px 0;
    text-align: right;
    white-space: nowrap;
}

.pub-product-grid.view-list .pub-product-card-action {
    grid-area: action;
    justify-self: end;
    align-self: start;
    margin: 0;
}

.pub-product-grid.view-list .pub-product-card-addbtn {
    width: auto;
}

/* Butonul "Adauga in cos" (produse fara variante) devine doar iconita, rotund - ca la eMag - "Alege
   optiuni"/"Stoc epuizat" raman cu text (nu au un echivalent de iconita clar), doar compacte. */
.pub-product-grid.view-list .pub-product-card-addform .pub-product-card-addbtn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
}

.pub-product-grid.view-list .pub-product-card-addform .pub-btn-label {
    display: none;
}

.pub-product-grid.view-list .pub-product-card-addform .pub-btn-icon {
    width: 20px;
    height: 20px;
}

@media (max-width: 620px) {
    .pub-product-grid.view-list .pub-product-card {
        grid-template-columns: 110px 1fr auto;
    }
}

/* Bara de "Vizualizare rapida" e prea ingusta in lista (imaginea are doar 130px latime) pt text -
   pastram doar lupa (fara eticheta text), culorile si fundalul raman ca in grid. */
.pub-product-grid.view-list .pub-quickview-trigger-label {
    display: none;
}

.pub-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.pub-product-card-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.pub-product-card-addform {
    margin: 0;
}

.pub-product-card-addbtn {
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    font-size: 13px;
    margin-top: 8px;
    gap: 6px;
}

/* "Alege optiuni" (produse cu variante) - outline in culoarea de accent, ca sa nu arate neutru/gri
   ca restul butoanelor secundare (ex: cele din cos.php), dar fara sa fie la fel de puternic ca
   "Adauga in cos" (fundal plin). */
.pub-product-card-addbtn.pub-btn-secondary {
    background: transparent;
    border-color: var(--pub-accent);
    color: var(--pub-accent);
}

.pub-product-card-addbtn.pub-btn-secondary:hover {
    background: var(--pub-accent);
    color: #fff;
}

/* Impartit in doua linkuri (imagine + titlu/descriere), nu unul singur ca sa incapa peste imagine
   bara de "Vizualizare rapida" (.pub-quickview-bar) - butonul si linkurile de culoare din ea nu ar
   fi valide HTML imbricate intr-un <a> mai mare care sa cuprinda tot cardul. */
.pub-product-card-image-wrap {
    position: relative;
    display: block;
}

.pub-product-card-image-link {
    display: block;
    color: inherit;
}

.pub-product-card-image {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--pub-surface);
    display: block;
    border-radius: 12px;
    overflow: hidden;
}

.pub-product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* A doua imagine la hover (Teme > Bloc produse) - stă absolut peste prima, ascunsă implicit; la
   :hover pe card (acelasi declansator ca .pub-quickview-bar mai jos) devine vizibila. "none"
   (fara efect ales) ramane fara transition deloc - schimbare instanta, la fel ca la
   navbar_mega_efect "none". Clasa cu efectul vine pe .pub-product-card-image (parinte), nu pe
   imaginea insasi, ca sa functioneze indiferent de contextul cardului (grid/carusel). */
.pub-product-card-image-hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.pub-product-card:hover .pub-product-card-image-hover,
.pub-product-card-image.is-touch-active .pub-product-card-image-hover {
    opacity: 1;
}

.pub-product-card-image-hover-fade .pub-product-card-image-hover {
    transition: opacity 0.35s ease;
}

.pub-product-card-image-hover-slide .pub-product-card-image-hover {
    transform: translateX(6%);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.pub-product-card:hover .pub-product-card-image-hover-slide .pub-product-card-image-hover,
.pub-product-card-image-hover-slide.is-touch-active .pub-product-card-image-hover {
    transform: translateX(0);
}

.pub-product-card-image-hover-scale .pub-product-card-image-hover {
    transform: scale(1.12);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.pub-product-card:hover .pub-product-card-image-hover-scale .pub-product-card-image-hover,
.pub-product-card-image-hover-scale.is-touch-active .pub-product-card-image-hover {
    transform: scale(1);
}

/* Bara de "Vizualizare rapida" + culori - vine de jos in sus la hover peste imagine (nu peste tot
   cardul), ca la eMag. pointer-events:none cand e ascunsa - altfel ar bloca click-urile pe imagine
   chiar si invizibila (transform nu scoate elementul din layout/din calea click-urilor). */
.pub-quickview-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 0 0 12px 12px;
    padding: 10px 12px 12px;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.pub-product-card:hover .pub-quickview-bar,
.pub-product-card:focus-within .pub-quickview-bar {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Linia fina de jos - aceeasi culoare ca bordura header/footer, cu fade pe orizontala (transparenta
   la capete) in loc de o linie plina dintr-o parte in alta. */
.pub-quickview-bar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--pub-header-footer-border), transparent);
}

.pub-quickview-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: none;
    border: none;
    padding: 2px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--pub-text);
    cursor: pointer;
}

.pub-quickview-trigger:hover {
    color: var(--pub-accent);
}

.pub-quickview-bar-colors {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.pub-quickview-bar-colors .pub-color-dot {
    width: 18px;
    height: 18px;
}

/* Pe mobil nu exista hover real, deci bara ramane oricum "blocata" vizibila dupa un tap
   (comportament tipic iOS Safari: primul tap pe un card simuleaza :hover) - o afisam explicit
   permanent, in loc sa depinda de acel hover accidental, dar DOAR cu bulinele de culoare - butonul
   "Vizualizare rapida" e dezactivat (ascuns) pe mobil. Bara ramane exact acelasi overlay peste
   imagine ca pe desktop (aceeasi pozitie/fundal), doar mereu vizibila. (hover:none)/(pointer:coarse)
   prind telefoanele/tabletele reale; max-width 860px e acelasi prag folosit pt meniul mobil in
   header.css, ca sa se activeze si la un simplu test cu fereastra ingustata (mouse, fara emulare
   de atingere in devtools). */
@media (hover: none), (pointer: coarse), (max-width: 860px) {
    .pub-quickview-trigger {
        display: none;
    }

    .pub-quickview-bar {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* Fara buline de culoare si fara buton (ascuns mai sus), bara ar ramane un dreptunghi alb gol
       peste imagine - o ascundem complet in acest caz. */
    .pub-quickview-bar:not(:has(.pub-quickview-bar-colors)) {
        display: none;
    }
}

/* Modalul de "Vizualizare rapida" (PubModal.showQuickView(), vezi public/assets/js/quick_view.js) -
   mai lat decat modalul standard (confirmari/"adaugat in cos"), galerie + info una langa alta. */
.pub-quickview-modal-overlay .pub-modal-box {
    max-width: 960px;
    width: 100%;
}

.pub-quickview-modal-overlay .pub-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pub-quickview-modal-overlay .pub-modal-footer:empty {
    display: none;
}

.pub-quickview-loading {
    text-align: center;
    padding: 40px 0;
    color: var(--pub-text-muted);
}

.pub-quickview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
}

@media (max-width: 700px) {
    .pub-quickview-layout {
        grid-template-columns: 1fr;
    }
}

.pub-quickview-info {
    min-width: 0;
}

.pub-quickview-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.pub-quickview-title a {
    color: inherit;
    text-decoration: none;
}

.pub-quickview-title a:hover {
    text-decoration: underline;
}

.pub-quickview-fulllink {
    display: inline-block;
    margin-top: 16px;
    font-size: 13px;
    color: var(--pub-accent);
}

/* Distribuie ca "footer" al modalului - pe toata latimea, sub galerie+info (nu doar sub coloana din
   dreapta) - margini negative ca sa iasa din padding-ul .pub-modal-body si sa ajunga chiar la
   marginile modalului. */
.pub-quickview-footer {
    margin: 20px -20px -20px;
    padding: 16px 20px;
    border-top: 1px solid var(--pub-border);
    justify-content: center;
}

.pub-product-card-body {
    padding: 14px 4px 4px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pub-product-card-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pub-text);
}

.pub-product-card-desc {
    /* flex:1 umple spatiul ramas din .pub-product-card-body (card-urile au inaltime egala pe rand,
       data de grid) - fara asta, un text scurt ar lasa un gol intre el si pret/buton (elemente
       separate, DUPA acest body, impinse jos de .pub-product-card-link{flex:1}). */
    flex: 1;
    font-size: 13px;
    line-height: 1.4;
    color: var(--pub-text-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.pub-product-card-price {
    display: block;
    padding: 8px 4px 0;
}

.pub-price {
    font-size: 17px;
    font-weight: 700;
}

.pub-price-old {
    text-decoration: line-through;
    color: var(--pub-text-muted);
    font-weight: 400;
    font-size: 13px;
    margin-right: 6px;
}

.pub-badge-discount {
    display: inline-block;
    background: var(--pub-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

/* Acelasi badge "-X%", dar langa pretul de pe fisa produsului (nu pe coltul imaginii ca la
   carduri) - vezi produs.php si produs.js (updateDisplay(), la schimbarea combinatiei). */
.pub-price-save-badge {
    vertical-align: middle;
    margin-left: 4px;
}

.pub-badge-outofstock {
    display: inline-block;
    background: var(--pub-text-muted);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.pub-product-card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
}

/* Fisa produs */

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

@media (max-width: 760px) {
    .pub-product-layout {
        /* minmax(0, 1fr), nu doar "1fr" - la fel ca varianta pe 2 coloane de mai sus, ca sa nu
           permita continutului (galeria de imagini) sa forteze coloana peste latimea ecranului. */
        grid-template-columns: minmax(0, 1fr);
    }
}

.pub-product-category-label {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--pub-accent);
    margin-bottom: 6px;
}

.pub-product-category-label:hover {
    text-decoration: underline;
}

/* Galerie cu coloana de thumbnail-uri verticala in stanga + imaginea mare in dreapta (ca la
   fisele de produs gen Altex/eMag), nu thumbnail-uri intr-un rand sub imagine. */
.pub-gallery {
    display: flex;
    gap: 12px;
}

/* Fara aspect-ratio fortat - containerul se potriveste exact pe dimensiunea naturala a imaginii,
   nu pe un patrat impus. Un patrat impus + object-fit ar fi obligat sa aleaga intre a taia din
   poza (cover) sau a lasa spatiu gol pe laturi (contain), cand poza sursa nu e deja patrata. */
.pub-gallery-main {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pub-surface);
    border-radius: var(--pub-radius);
    overflow: hidden;
}

.pub-gallery-main .pub-wishlist-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.pub-gallery-zoom-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--pub-border);
    background: var(--pub-bg);
    color: var(--pub-text-muted);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

.pub-gallery-main img {
    display: block;
    width: 100%;
    /* min-width:0 obligatoriu - .pub-gallery-main e flex, iar un element flex (inclusiv <img>) nu
       se poate micsora implicit sub dimensiunea lui NATURALA (min-width:auto), indiferent de
       width:100% de mai sus. La imagini incarcate la rezolutie mare, asta forta imaginea (si
       implicit toata pagina) peste latimea ecranului pe mobil - la cele mai mici, pragul nu se
       atingea niciodata, de-aici impresia ca "doar unele produse" au problema. */
    min-width: 0;
    height: auto;
    border-radius: var(--pub-radius);
    /* Fade la incarcare (vezi produs.js: setMainImage()) - fara asta, inainte sa se incarce
       imaginea (prima data pe pagina, sau la schimbarea intre thumbnail-uri), containerul afisa
       doar textul din alt/iconita de imagine spartă a browser-ului, pana la incarcare. */
    opacity: 0;
    transition: opacity 0.25s ease;
}

.pub-gallery-main img.is-loaded {
    opacity: 1;
}

/* Zoom care urmareste mouse-ul: scale() + transform-origin setat dinamic din JS (produs.js) dupa
   pozitia cursorului in container. Doar pe dispozitive cu hover real (mouse) - pe touch, hover-ul
   CSS nu se declanseaza oricum, dar @media(hover:hover) evita si listener-ul JS inutil. */
@media (hover: hover) {
    .pub-gallery-main {
        cursor: zoom-in;
    }

    .pub-gallery-main img {
        transition: transform 0.2s ease;
    }

    .pub-gallery-main:hover img {
        transform: scale(2);
    }
}

.pub-gallery-thumbs-col {
    flex: 0 0 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.pub-gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 440px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pub-gallery-thumbs::-webkit-scrollbar {
    display: none;
}

.pub-gallery-thumbs img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
    background: var(--pub-surface);
    /* Fade la incarcare (vezi produs.js: wireImageFade()) - fara asta, dimensiunea fixa (64x64)
       nu ajuta cu nimic: browserul tot arata iconita de imagine spartă + textul din alt inauntrul
       cutiei pana se incarca, exact ca la imaginea mare. */
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pub-gallery-thumbs img.is-loaded {
    opacity: 1;
}

.pub-gallery-thumbs img.active {
    border-color: var(--pub-accent);
}

/* Trebuie sa vina DUPA .active - la aceeasi specificitate, .active ar castiga si hover-ul nu
   s-ar vedea deloc pe thumbnail-ul deja selectat (acelasi bug ca la tab-uri). */
.pub-gallery-thumbs img:hover {
    border-color: var(--pub-accent);
    opacity: 0.85;
}

.pub-gallery-thumb-nav {
    flex-shrink: 0;
    width: 28px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    font-size: 10px;
    border-radius: 6px;
    border: 1px solid var(--pub-border);
    background: var(--pub-bg);
    color: var(--pub-text-muted);
    cursor: pointer;
}

.pub-gallery-thumb-nav:hover {
    background: var(--pub-accent);
    color: #fff;
    border-color: var(--pub-accent);
}

.pub-gallery-thumb-nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: var(--pub-bg);
    color: var(--pub-text-muted);
    border-color: var(--pub-border);
}

.pub-gallery-thumb-nav[hidden] {
    display: none;
}

/* Pe mobil, coloana devine un rand orizontal sub imaginea principala (fara sageti - se deruleaza
   direct cu degetul), la fel ca inainte. */
@media (max-width: 760px) {
    .pub-gallery {
        flex-direction: column-reverse;
    }

    .pub-gallery-main {
        min-height: 320px;
    }

    .pub-gallery-thumbs-col {
        flex-direction: row;
        flex: 0 0 auto;
    }

    .pub-gallery-thumb-nav {
        display: none;
    }

    .pub-gallery-thumbs {
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
        overflow-y: visible;
        flex-wrap: nowrap;
        width: 100%;
    }
}

.pub-variant-group {
    margin-bottom: 16px;
}

.pub-variant-group label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
}

.pub-variant-swatch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--pub-border);
    border-radius: 20px;
    margin: 0 6px 6px 0;
    cursor: pointer;
    font-size: 13px;
    background: var(--pub-bg);
}

/* display:inline-flex de mai sus ar bate regula implicita a browserului pt atributul [hidden]
   (stilul autorului are prioritate fata de cel implicit, indiferent de specificitate) - fara asta,
   marimile ascunse de filtrarea dupa culoare (vezi produs.js: filterGroupsByColor()) tot s-ar vedea. */
.pub-variant-swatch[hidden] {
    display: none;
}

.pub-variant-swatch.selected {
    border-color: var(--pub-accent);
    background: rgba(47, 111, 237, 0.08);
}

.pub-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    /* flex-shrink:0 - in randul de filtru (.pub-filter-checkbox, display:flex), fara asta bulina
       s-ar putea ingusta langa un text lung, lasand impresia ca textul "intra" peste ea. */
    flex-shrink: 0;
    border: 1px solid var(--pub-accent);
    background-size: cover;
    background-position: center;
}

/* Forma aleasa in admin/teme.php (Filtre de culoare) - cerc (implicit) sau patrat, aplicata peste
   tot unde apare .pub-color-dot (filtrul de Culoare din categorie/cautare + variantele produsului). */
body.culoare-patrat .pub-color-dot {
    border-radius: 4px;
}

/* Stilul alternativ "Patratele de culoare" pt filtrul de Culoare (admin/teme.php > Filtre de
   culoare) - swatch-uri mari, fara bifa vizibila si fara text, la fel ca la combinatiile din
   admin/produs_edit.php (checkbox-ul ramane in DOM, doar ascuns - selectia se vede prin inelul
   de pe swatch, :has(input:checked)). */
.pub-color-filter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pub-color-filter-swatch {
    position: relative;
    display: block;
    cursor: pointer;
    margin: 0;
}

.pub-color-filter-swatch input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.pub-color-dot-lg {
    width: 22px;
    height: 22px;
}

/* La fel ca restul filtrelor (filtre.css) - swatch-urile de 22px sunt sub pragul de atins comod
   cu degetul pe mobil, marite la 40px sub acelasi prag ca sertarul de filtre. */
@media (max-width: 800px) {
    .pub-color-dot-lg {
        width: 40px;
        height: 40px;
    }

    .pub-color-filter-grid {
        gap: 10px;
    }
}

.pub-color-filter-swatch:has(input:checked) .pub-color-dot {
    box-shadow: 0 0 0 2px var(--pub-accent);
}

/* Bifa de deasupra swatch-ului - vizibila permanent daca e chiar selectat, si ca previzualizare la
   hover/focus pe orice swatch (nu doar cel bifat). Alb + drop-shadow dubla (nu box-shadow, care nu
   urmareste forma unui path SVG) ca sa ramana lizibila pe orice culoare de fundal, inclusiv alb. */
.pub-color-filter-check {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.pub-color-filter-swatch:hover .pub-color-filter-check,
.pub-color-filter-swatch:focus-within .pub-color-filter-check,
.pub-color-filter-swatch:has(input:checked) .pub-color-filter-check {
    opacity: 1;
}

/* Comentariul cu numele culorii - apare deasupra swatch-ului, cu efect de "crestere" (scalare de
   la mic la mare, cu originea jos, langa swatch) + urcare usoara, ca si cum tocmai s-ar fi format. */
.pub-color-filter-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 3;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--pub-text);
    color: var(--pub-bg);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    transform-origin: 50% 100%;
    transform: translateX(-50%) translateY(6px) scale(0.4);
    opacity: 0;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
}

.pub-color-filter-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--pub-text);
}

.pub-color-filter-swatch:hover .pub-color-filter-tooltip,
.pub-color-filter-swatch:focus-within .pub-color-filter-tooltip {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
}

/* Pe mobil (sertarul de filtre in 2 panouri, vezi filtre.css) tot ce e "doar la hover" e
   nefolosibil pe touch - swatch-urile devin un rand cu text vizibil PERMANENT (numele culorii), nu
   un grid patrat fara text. Bifa (.pub-color-filter-check) devine redundanta (textul + inelul de
   pe swatch arata deja selectia) - ascunsa. Trebuie sa vina DUPA regulile de baza de mai sus (nu
   inainte, in acelasi bloc cu marirea la 40px) - la specificitate egala, ultima regula din fisier
   castiga, indiferent de media query. */
@media (max-width: 800px) {
    .pub-color-filter-grid {
        flex-direction: column;
    }

    .pub-color-filter-swatch {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 40px;
    }

    .pub-color-filter-check {
        display: none;
    }

    .pub-color-filter-tooltip {
        /* static (nu absolute ca pe desktop) - dar fara sa resetam explicit left/bottom/z-index
           (ramase din regula de baza), un tooltip anterior pozitionat absolut poate pastra
           artefacte de layout la unele motoare de randare (textul asezat peste bulina in loc de
           langa ea) - resetate aici explicit, ca sa nu mai depinda de "static ignora oricum
           left/bottom" (adevarat ca spec, dar nu intotdeauna respectat identic peste tot). Elementul
           devine un flex item normal (flex:1, min-width:0 - la fel ca bulina, care are deja
           flex-shrink:0 mai sus in fisier), nu mai risca sa se comprime/suprapuna cu bulina. */
        position: static;
        left: auto;
        bottom: auto;
        z-index: auto;
        transform: none;
        opacity: 1;
        background: none;
        color: var(--pub-text);
        padding: 0;
        border-radius: 0;
        font-size: 14px;
        font-weight: 500;
        white-space: normal;
        transition: none;
        flex: 1;
        min-width: 0;
    }

    .pub-color-filter-tooltip::after {
        display: none;
    }

    /* Culoarea selectata - text cu accentul temei, ca sa se distinga clar in lista fara sa
       depinda de inelul de pe bulina (.pub-color-dot, greu de observat pe randuri inguste). */
    .pub-color-filter-swatch:has(input:checked) .pub-color-filter-tooltip {
        color: var(--pub-accent);
        font-weight: 700;
    }
}

.pub-specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.pub-specs-table td {
    padding: 8px 0;
    border-bottom: 1px solid var(--pub-border);
}

.pub-specs-table td:first-child {
    color: var(--pub-text-muted);
    width: 40%;
}

/* Randurile din tab-ul "Caracteristici" (produs.php) - una sub alta (nu tabel), in ordinea setata
   in admin (product_features.ordine) - vezi $featureRows in produs.php. */
.pub-char-row {
    padding: 10px 0;
    border-bottom: 1px solid var(--pub-border);
}

.pub-char-row:last-child {
    border-bottom: none;
}

.pub-char-label {
    font-size: 13px;
    color: var(--pub-text-muted);
    margin-bottom: 6px;
}

.pub-char-values {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

/* O valoare de caracteristica (tab "Caracteristici", vezi produs.php) - iconita optionala + text;
   cand caracteristica are mai multe valori (ex: Sezon = Primavara + Vara), fiecare devine propriul
   chip, nu doar text concatenat. "title" (descrierea valorii, daca exista) e un tooltip nativ al
   browserului, la fel ca la iconita din filtrul de culori (categorie.php), doar fara animatia de
   acolo - aici e o afisare statica, nu un filtru interactiv. */
.pub-spec-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pub-spec-value-icon {
    width: 33px;
    height: 33px;
    object-fit: contain;
}

.pub-share-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

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

.pub-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--pub-surface);
    border: 1px solid var(--pub-border);
    color: var(--pub-text);
}

/* Iconitele preset SVG (contact_icon_preset_svg()) pot veni cu propriile atribute width/height,
   uneori mult mai mari decat butonul rotund de 34px - width/height pe CSS au prioritate fata de
   atributele proprii ale <svg>, deci iconita se incadreaza mereu, indiferent de fisierul sursa. */
.pub-share-btn svg {
    width: 60%;
    height: 60%;
}

.pub-share-btn:hover {
    background: var(--pub-border);
}

.pub-details-card {
    max-width: 600px;
    margin-top: 32px;
    padding: 20px;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius);
    background: var(--pub-surface);
}

/* Taburile din interiorul .pub-details-card (Detalii/Fisiere asociate) - JS propriu, separat de
   .pub-product-tab-btn (Descriere/Recenzii, mai jos pe pagina) ca sa nu se incurce doua grupuri
   independente de taburi care ar putea folosi acelasi nume de tab (vezi produs.js). Bara de
   navigare "sparge" padding-ul cardului (margini negative), ca linia de jos sa ajunga la marginile
   lui, la fel ca .pub-product-tab-nav de mai jos. */
.pub-details-tab-nav {
    display: flex;
    gap: 20px;
    margin: -20px -20px 16px;
    padding: 0 20px;
    border-bottom: 1px solid var(--pub-border);
}

.pub-details-tab-btn {
    background: none;
    border: none;
    padding: 14px 0;
    margin-bottom: -1px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pub-text-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s ease;
}

.pub-details-tab-btn.active {
    color: var(--pub-text);
    border-bottom-color: var(--pub-accent);
}

.pub-details-tab-btn:hover {
    color: var(--pub-text);
}

.pub-details-tab-panel[hidden] {
    display: none;
}

.pub-details-files-heading {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--pub-text-muted);
    margin: 0 0 10px;
}

.pub-details-file-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--pub-border);
}

.pub-details-file-row:last-child {
    border-bottom: none;
}

.pub-details-file-link {
    font-weight: 600;
    color: var(--pub-accent);
}

.pub-details-file-link:hover {
    color: var(--pub-accent);
    text-decoration: underline;
}

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

.pub-brand-badge {
    display: inline-block;
    margin-bottom: 10px;
}

.pub-brand-badge img {
    max-height: 92px;
    max-width: 140px;
    object-fit: contain;
}

.pub-product-tags {
    max-width: 600px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.pub-tag-chip {
    display: inline-block;
    padding: 6px 14px;
    background: var(--pub-header-footer-bg);
    border: 1px solid var(--pub-accent);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--pub-accent);
    white-space: nowrap;
}

.pub-tag-chip:hover {
    background: var(--pub-accent-hover);
    border-color: var(--pub-accent-hover);
    color: #fff;
}

/* Taburi fisa produs (Descriere / Recenzii) */

.pub-product-tabs {
    margin-top: 40px;
    max-width: 900px;
}

.pub-product-tab-nav {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--pub-border);
    margin-bottom: 20px;
}

.pub-product-tab-btn {
    background: none;
    border: none;
    padding: 10px 16px;
    margin-bottom: -1px;
    border-radius: var(--pub-radius) var(--pub-radius) 0 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--pub-text-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.pub-product-tab-btn.active {
    color: var(--pub-text);
    border-bottom-color: var(--pub-accent);
}

/* Trebuie sa vina DUPA .active - altfel, la aceeasi specificitate, .active (mereu prezent pe
   tab-ul selectat) ar castiga si hover-ul nu s-ar mai vedea deloc pe tab-ul activ implicit
   (Descriere), exact tab-ul cel mai probabil testat primul. */
.pub-product-tab-btn:hover {
    background: var(--pub-border);
    color: var(--pub-text);
}

.pub-product-tab-panel[hidden] {
    display: none;
}

.pub-product-reviews-summary {
    font-size: 15px;
    margin-bottom: 16px;
}

.pub-product-review {
    padding: 16px 0;
    border-bottom: 1px solid var(--pub-border);
}

.pub-product-review:last-child {
    border-bottom: none;
}

.pub-product-review-stars {
    color: #f0b429;
    font-size: 14px;
    margin-bottom: 4px;
}

.pub-product-review-title {
    display: block;
    margin-bottom: 4px;
}

.pub-product-review-text {
    margin: 0 0 6px;
}

.pub-product-review-meta {
    color: var(--pub-text-muted);
    font-size: 13px;
    margin: 0;
}

/* Produse recomandate */

.pub-related-grid {
    margin-top: 40px;
}