/* Lista de produse (categorie / cautare) - helpers/products/pagedProducts.phtml
   Aliniata cu pagina de produs (newproduct.css): carduri plate pe --clr-black cu
   bordura --clr-border, titluri hanken-grotesk 800, pret alternate-gothic coral,
   CTA coral, chip-uri rotunjite la 50px ca butonul "Compara".

   Doar desktop (> 1024px). Sub 1025px avs_mobile.css randeaza grid-ul de carduri
   si nu il atingem. */

:root {
    --av-r-card: 8px;   /* carduri */
    --av-r-ctl: 4px;    /* butoane, chip-uri, casete de paginare */
}


@media (min-width: 1025px) {

    /* ---------- Lista ---------- */

    #content #produse {
        gap: 16px;
        border-top: 0;
    }

    #content #produse .produs {
        padding: 28px;
        gap: 32px;
        border: 1px solid var(--clr-border);
        border-radius: var(--av-r-card);
        background: var(--clr-black);
        transition: border-color .15s ease;
    }

    #content #produse .produs:hover {
        border-color: var(--clr-darkgrey);
    }

    /* ---------- Imagine ---------- */

    #content #produse .produs .cnt-img {
        width: 220px;
        flex: 0 0 220px;
        padding-top: 0;
        float: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #content #produse .produs .cnt-img .img {
        height: auto;
    }

    #content #produse .produs .cnt-img .img img {
        max-height: 220px;
    }

    /* ---------- Detalii ---------- */

    #content #produse .produs .cnt-detalii {
        min-width: 0;
        float: none;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Clearfix-ul (.cf / .clearfix) pune ::before/::after (display:table) pe containere
       pe care le facem flex; acolo devin iteme goale si primesc gap (decalaj de 16-32px
       in capatul randului / deasupra imaginii / langa pret). */
    #content #produse::before,
    #content #produse::after,
    #content #produse .produs::before,
    #content #produse .produs::after,
    #content #produse .produs .op::before,
    #content #produse .produs .op::after,
    #content #produse .produs .op .actiuni::before,
    #content #produse .produs .op .actiuni::after {
        content: none;
    }

    /* <br>, div.clear, span-ul gol si <style>-urile din template devin iteme flex si
       primesc gap; stocul fara text e un span gol (doar .c2 gol) */
    #content #produse .produs .cnt-detalii > br,
    #content #produse .produs .cnt-detalii > .clear,
    #content #produse .produs .cnt-detalii > .out-of-stock-info,
    #content #produse .produs .cnt-detalii > .stock-info:has(.c2:empty),
    #content #produse .produs .op > style,
    #content #produse .produs .op .actiuni > style {
        display: none;
    }

    #content #produse .produs .cnt-detalii div.titluprod a {
        font-family: var(--ff-hg);
        font-size: 22px;
        font-weight: 800;
        line-height: 1.2;
        color: #fff;
    }

    #content #produse .produs .cnt-detalii div.titluprod a:hover {
        color: var(--clr-orange);
    }

    /* Badge-uri showroom: chip-uri in loc de dreptunghiuri portocalii */
    #content #produse .produs .lista-1.badges {
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    #content #produse .produs .lista-1.badges li {
        margin: 0;
        padding: 0;
    }

    #content #continut .cnt-3 #produse .produs .lista-1.badges li p {
        padding: 6px 12px;
        border: 1px solid var(--clr-orange);
        border-radius: 50px;
        background: transparent;
        color: var(--clr-orange);
        font-family: var(--ff-hg);
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
    }

    /* Stoc: bulina verde ca in pagina de produs (doar daca exista text) */
    #content #produse .produs .stock-info {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--ff-hg);
        font-size: 13px;
        font-weight: 500;
        color: var(--clr-lightgrey);
    }

    #content #produse .produs .stock-info:has(.c2:not(:empty))::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #1BA829;
    }

    #content #produse .produs .stock-info .c2 {
        color: var(--clr-almostwhite);
    }

    #content #produse .produs .stock-info a {
        color: var(--clr-orange);
    }

    /* Text din baza de date (cu ă/ș/ț): --ff-hg nu are glifele, de aceea --ff-rf */
    #content #continut .cnt-3 #produse .produs p.lead,
    #content #produse .produs ul.lista-2 li {
        font-family: var(--ff-rf), Arial, sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.5;
        color: var(--clr-lightgrey);
    }

    #content #continut .cnt-3 #produse .produs p.lead {
        margin: 0;
    }

    /* Atribute (lista-2): fara latime fixa si fara buline */
    #content #produse .produs ul.lista-2 {
        width: auto;
        margin: 0;
        padding: 0;
        float: none;
        list-style: none;
    }

    #content #produse .produs ul.lista-2 + ul.lista-2 {
        margin-top: -10px;
    }

    #content #produse .produs ul.lista-2 li {
        padding: 0;
    }

    /* Variante culori / marimi */
    #content #produse .produs .spec {
        padding: 0;
        float: none;
    }

    #content #produse .produs .spec p.ico-2 {
        margin: 0 0 8px;
        padding: 0;
        background: none;
        font-family: var(--ff-hg);
        font-size: 13px;
        font-weight: 500;
        line-height: 1;
        color: var(--clr-lightgrey);
    }

    #content #produse .produs .spec .culori {
        margin: 0;
        float: none;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    #content #produse .produs .spec .culori .culoare {
        margin: 0;
        padding: 0;
        border: 1px solid var(--clr-border);
        border-radius: var(--av-r-ctl);
        background: transparent;
        transition: border-color .15s ease;
    }

    #content #produse .produs .spec .culori .culoare:hover {
        border-color: var(--clr-lightgrey);
    }

    #content #produse .produs .spec .culori .culoare .name {
        font-family: var(--ff-hg);
        font-size: 13px;
        font-weight: 500;
        color: var(--clr-almostwhite);
    }

    #content #produse .produs hr {
        display: none;
    }

    /* ---------- Bara de jos: review + pret + CTA ---------- */

    #content #produse .produs .op {
        min-height: 0;
        margin-top: auto;
        padding: 16px 0 0;
        border: 0;
        border-top: 1px solid var(--clr-border);
        background: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 16px 24px;
    }

    #content #produse .produs .op > .st {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 16px;
    }

    #content #produse .produs .op .reviews {
        float: none;
        clear: none;
        margin: 0;
        display: flex;
        align-items: center;
    }

    #content #produse .produs .op .actiuni {
        float: none;
        min-height: 0;
        margin-left: auto;
        gap: 24px;
    }

    #content #produse .produs .op .actiuni > .st {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 0;
    }

    /* eticheta ("Pret:" / "De la:") aliniata cu cifra pretului (line-height 38px) */
    #content #produse .produs .op .actiuni .txt-1 {
        float: none;
        padding: 0;
        font-family: var(--ff-hg);
        font-size: 13px;
        font-weight: 500;
        line-height: 38px;
        color: var(--clr-lightgrey);
    }

    #content #produse .produs .op .pret {
        float: none;
        display: flow-root;
    }

    #content #produse .produs .op .pret:has(.pret-vechi) {
        min-width: 130px;
    }

    #content #produse .produs .op .pret .pret-vechi {
        min-width: 0;
        margin-left: 0;
        padding: 0;
        font-family: var(--ff-hg);
        font-size: 13px;
        font-style: normal;
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
        color: var(--clr-lightgrey);
    }

    #content #produse .produs .op .actiuni .dr {
        width: auto;
        margin: 0;
    }

    /* "Vezi detalii": acelasi CTA coral ca "Adauga in cos" din pagina de produs.
       !important pe width: template-ul pune width:100px inline, iar topPart.phtml
       width:140px !important; "a.btn-2" ca sa avem specificitate mai mare. */
    #content #produse .produs .op .actiuni a.btn-2 {
        width: auto !important;
        min-width: 150px;
        height: 48px;
        margin: 0;
        padding: 3px 28px 0;
        float: none;
        background: var(--clr-orange);
        border-radius: var(--av-r-ctl);
        font-size: 18px;
        transition: filter .15s ease;
    }

    #content #produse .produs .op .actiuni a.btn-2:hover {
        filter: brightness(1.1);
    }

    /* ---------- Sortare + paginare ---------- */

    #content #continut .nav {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 0 16px;
        overflow: visible;
    }

    #content #continut .nav.bottom {
        padding: 16px 0 0;
    }

    #content #continut .nav .text-sortare {
        padding: 0;
        float: none;
        font-family: var(--ff-hg);
        font-size: 13px;
        font-weight: 500;
        line-height: 1;
        color: var(--clr-lightgrey);
    }

    #content #continut .nav .sortare {
        height: auto;
        border: 0;
        background: none;
        box-shadow: none;
        float: none;
        display: flex;
        gap: 8px;
    }

    #content #continut .nav .sortare li {
        float: none;
    }

    #content #continut .nav .sortare li a,
    #content #continut .nav .sortare li a.selectat {
        padding: 8px 14px;
        border: 1px solid var(--clr-border);
        border-radius: 50px;
        background: transparent;
        color: var(--clr-lightgrey);
        font-family: var(--ff-hg);
        font-size: 13px;
        font-weight: 500;
        line-height: 1;
        text-shadow: none;
        transition: border-color .15s ease, color .15s ease;
    }

    #content #continut .nav .sortare li a:hover {
        border-color: var(--clr-lightgrey);
        background: transparent;
        color: var(--clr-almostwhite);
    }

    #content #continut .nav .sortare li a.selectat,
    #content #continut .nav .sortare li a:hover.selectat {
        border-color: var(--clr-orange);
        background: transparent;
        color: var(--clr-orange);
    }

    #content #continut .nav .paginare {
        margin-left: auto;
        float: none;
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: var(--ff-hg);
    }

    #content #continut .nav .paginare p {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    #content #continut .nav .paginare .pagina {
        margin-right: 4px;
        font-size: 13px;
        color: var(--clr-lightgrey);
    }

    #content #continut .nav .paginare a,
    #content #continut .nav .paginare p a,
    #content #continut .nav .paginare p a.selectat,
    #content.categorie #continut div.nav .paginare p a.selectat,
    #content #continut .nav .paginare a.link.inapoi,
    #content #continut .nav .paginare a.link.inainte {
        min-width: 34px;
        width: auto;
        height: 34px;
        padding: 0 10px;
        border: 1px solid var(--clr-border);
        border-radius: var(--av-r-ctl);
        background: transparent;
        color: var(--clr-almostwhite);
        font-size: 13px;
        font-weight: 500;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        transition: border-color .15s ease, background-color .15s ease;
    }

    #content #continut .nav .paginare a:hover,
    #content #continut .nav .paginare a.link.inapoi:hover,
    #content #continut .nav .paginare a.link.inainte:hover {
        border-color: var(--clr-lightgrey);
        background: transparent;
        text-decoration: none;
    }

    #content #continut .nav .paginare p a.selectat,
    #content.categorie #continut div.nav .paginare p a.selectat,
    #content #continut .nav .paginare p a:hover.selectat {
        border-color: var(--clr-orange);
        background: var(--clr-orange);
        color: #fff;
    }
}

/* Desktop ingust (1025-1280px): coloana de continut e ingusta, deci imagine si
   padding mai mici ca sa incapa pretul si butonul pe un singur rand. */
@media (min-width: 1025px) and (max-width: 1280px) {

    #content #produse .produs {
        padding: 24px;
        gap: 24px;
    }

    #content #produse .produs .cnt-img {
        width: 160px;
        flex-basis: 160px;
    }
}

/* Focus de tastatura: pe site nu exista inel de focus vizibil pe aceste elemente */
@media (min-width: 1025px) {

    #content #produse .produs a:focus-visible,
    #content #continut .nav a:focus-visible {
        outline: 2px solid var(--clr-orange);
        outline-offset: 2px;
    }
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {

    #content #produse .produs,
    #content #produse .produs .culoare,
    #content #produse .produs a.btn-2,
    #content #continut .nav a {
        transition: none;
    }
}

/* ==========================================================================
   Mobil / tableta (aceeasi interogare ca in avs_mobile.css, care aseaza lista in
   grid de carduri). Inlocuim trucul de suprapunere imagine/detalii
   (margin-top:-50%) si pretul absolut, care se taia, cu carduri plate ca pe desktop.
   ========================================================================== */

@media (max-width: 640px), (max-device-width: 640px), (max-width: 1024px) {

    /* ---------- Grid ---------- */

    /* topPart.phtml: #content.categorie #produse { display:flex } (2 id + 1 clasa) bate
       #content #produse; "body ... .clearfix" ridica specificitatea peste ea. */
    body #content #produse.clearfix {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 4px 4px 0;
        border-top: 0;
    }

    #content #produse::before,
    #content #produse::after,
    #content #produse .produs::before,
    #content #produse .produs::after,
    #content #produse .produs .op::before,
    #content #produse .produs .op::after,
    #content #produse .produs .op .actiuni::before,
    #content #produse .produs .op .actiuni::after {
        content: none;
    }

    /* bannerele intercalate ocupa tot randul */
    #content #produse > :not(.produs) {
        grid-column: 1 / -1;
    }

    /* ---------- Card ---------- */

    #content #produse .produs {
        width: auto;
        float: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--clr-border);
        border-radius: var(--av-r-card);
        background: var(--clr-black);
        overflow: hidden;
    }

    #content #produse .produs .cnt-img {
        width: 100%;
        padding: 12px 12px 4px;
        float: none;
        box-sizing: border-box;
    }

    /* imaginea (poate fi a unei variante cu alte proportii decat poza modelului, dupa care se
       calculeaza wlimit/hlimit): o potrivim in patrat, nu o taiem */
    #content #produse .produs .cnt-img .img img,
    #content #produse .produs .cnt-img .img.hlimit img,
    #content #produse .produs .cnt-img .img.wlimit img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    #content #produse .produs .cnt-detalii {
        min-height: 0;
        margin-top: 0;
        padding: 8px 12px 12px;
        flex: 1 1 auto;
        gap: 6px;
        background: none;
        overflow: visible;
        transition: none;
    }

    #content #produse .produs .cnt-detalii > br,
    #content #produse .produs .cnt-detalii > .clear,
    #content #produse .produs .cnt-detalii > .out-of-stock-info,
    #content #produse .produs .cnt-detalii > .stock-info:has(.c2:empty),
    #content #produse .produs .op > style,
    #content #produse .produs .op .actiuni > style {
        display: none;
    }

    #content #produse .produs .cnt-detalii div.titluprod a {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        font-family: var(--ff-hg);
        font-size: 15px;
        font-weight: 800;
        line-height: 1.25;
        color: #fff;
    }

    #content #continut .cnt-3 #produse .produs .stock-info {
        height: auto;
        margin: 0;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-family: var(--ff-hg);
        font-size: 12px;
        font-weight: 500;
        color: var(--clr-lightgrey);
    }

    #content #produse .produs .stock-info:has(.c2:not(:empty))::before {
        content: '';
        width: 7px;
        height: 7px;
        margin-right: 6px;
        display: inline-block;
        border-radius: 50%;
        background: #1BA829;
        vertical-align: middle;
    }

    #content #produse .produs .stock-info .c2 {
        color: var(--clr-almostwhite);
    }

    #content #produse .produs .stock-info a {
        color: var(--clr-orange);
    }

    /* ---------- Pret + comparare ---------- */

    #content #produse .produs .op {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    #content #produse .produs .op .actiuni {
        order: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    #content #produse .produs .op > .st {
        order: 2;
        margin: 0;
    }

    #content #produse .produs .op .actiuni span.pret {
        position: static;
        margin: 0;
        padding: 0;
        float: none;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    #content #produse .produs .op .actiuni span.pret-nou {
        order: 1;
        font-family: var(--ff-aga);
        font-size: 30px;
        font-weight: 600;
        line-height: 1;
        color: var(--clr-orange);
    }

    #content #produse .produs .op .actiuni span.pret-nou:after {
        content: ' LEI';
        margin-left: 2px;
        font-family: var(--ff-hg);
        font-size: 11px;
        font-weight: 500;
        color: var(--clr-lightgrey);
    }

    #content #produse .produs .op .actiuni span.pret-vechi {
        order: 2;
        min-width: 0;
        margin: 4px 0 0;
        font-family: var(--ff-hg);
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 1.3;
        color: var(--clr-lightgrey);
    }

    #content #produse .produs .op .actiuni span.fara-pret-vechi {
        order: 2;
        margin-top: 4px;
    }

    /* compare.css pune min-height:38px (tinta tactila) pe content-box; aici 36px, ca butoanele de cos */
    #content #produse .produs .avs-cmp-add {
        min-height: 36px;
        padding: 0 12px;
        gap: 5px;
        box-sizing: border-box;
        font-size: 12px;
    }

    #content #produse .produs .avs-cmp-add svg {
        width: 13px;
        height: 13px;
    }

    /* ---------- Paginare ---------- */

    #content #continut .nav.bottom {
        padding: 16px 0 8px;
        display: flex;
        justify-content: center;
    }

    #content #continut .nav.bottom .paginare {
        margin: 0;
        float: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-family: var(--ff-hg);
    }

    #content #continut .nav.bottom .paginare p {
        margin: 0;
        display: flex;
        gap: 4px;
    }

    #content #continut .nav.bottom .paginare .pagina {
        display: none;
    }

    #content #continut .nav.bottom .paginare a,
    #content #continut .nav.bottom .paginare p a,
    #content #continut .nav.bottom .paginare p a.selectat,
    #content.categorie #continut div.nav.bottom .paginare p a.selectat,
    #content #continut .nav.bottom .paginare a.link.inapoi,
    #content #continut .nav.bottom .paginare a.link.inainte {
        min-width: 32px;
        width: auto;
        height: 32px;
        padding: 0 8px;
        border: 1px solid var(--clr-border);
        border-radius: var(--av-r-ctl);
        background: transparent;
        color: var(--clr-almostwhite);
        font-size: 13px;
        font-weight: 500;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    /* sageti in locul textului (avs_mobile.css pune font-size:0 + sprite) */
    #content #continut .nav.bottom .paginare a.link.inapoi,
    #content #continut .nav.bottom .paginare a.link.inainte {
        font-size: 0;
    }

    #content #continut .nav.bottom .paginare a.link.inapoi::before,
    #content #continut .nav.bottom .paginare a.link.inainte::before {
        font-size: 20px;
        line-height: 1;
    }

    #content #continut .nav.bottom .paginare a.link.inapoi::before {
        content: '\2039';
    }

    #content #continut .nav.bottom .paginare a.link.inainte::before {
        content: '\203A';
    }

    #content #continut .nav.bottom .paginare p a.selectat,
    #content.categorie #continut div.nav.bottom .paginare p a.selectat {
        border-color: var(--clr-orange);
        background: var(--clr-orange);
        color: #fff;
    }
}

/* Tableta: 3 coloane */
@media (min-width: 700px) and (max-width: 1024px) {

    body #content #produse.clearfix {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Cos + wishlist direct din card (js/pagedproducts.js) si alegerea variantei
   ========================================================================== */

#content #produse .produs .av-quick {
    display: flex;
    align-items: center;
    gap: 8px;
}

#content #produse .produs .av-quick__cart,
#content #produse .produs .av-quick__fav {
    margin: 0;
    border-radius: var(--av-r-ctl);
    cursor: pointer;
    transition: filter .15s ease, border-color .15s ease, color .15s ease, background-color .15s ease;
}

#content #produse .produs .av-quick__cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: var(--clr-orange);
    color: #fff;
    font-family: var(--ff-aga);
    font-size: 18px;
    line-height: 1;
    text-transform: uppercase;
}

#content #produse .produs .av-quick__cart:hover:not(:disabled) {
    filter: brightness(1.1);
}

#content #produse .produs .av-quick__cart:disabled {
    background: var(--clr-cardgrey);
    color: var(--clr-darkgrey);
    cursor: not-allowed;
}

#content #produse .produs .av-quick__cart.is-busy:not(:disabled),
#content #produse .produs .av-quick__cart.is-busy {
    cursor: progress;
}

#content #produse .produs .av-quick__cart.is-added {
    background: #1BA829;
    color: #fff;
}

/* iconitele (cos / bifa) apar doar pe cardurile compacte; pe desktop butonul are text */
#content #produse .produs .av-quick__ico {
    display: none;
    flex: none;
    fill: currentColor;
}

#content #produse .produs .av-quick__fav {
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--clr-border);
    background: transparent;
    color: var(--clr-almostwhite);
}

#content #produse .produs .av-quick__fav svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

#content #produse .produs .av-quick__fav:hover {
    border-color: var(--clr-lightgrey);
}

#content #produse .produs .av-quick__fav[aria-pressed="true"] {
    border-color: var(--clr-orange);
    color: var(--clr-orange);
}

#content #produse .produs .av-quick__fav[aria-pressed="true"] svg path {
    fill: currentColor;
}

#content #produse .produs .av-quick__cart:focus-visible,
#content #produse .produs .av-quick__fav:focus-visible,
#content #produse [data-av-variant]:focus-visible {
    outline: 2px solid var(--clr-orange);
    outline-offset: 2px;
}

/* chip-uri de varianta (culori / marimi) */
#content #produse .produs [data-av-variant] {
    cursor: pointer;
}

#content #produse .produs [data-av-variant][data-buyable="0"] {
    opacity: .55;
}

#content #produse .produs .spec .culori .culoare.is-selected {
    border-color: var(--clr-orange);
}

/* Marimi: acelasi limbaj ca la culori (bordura --clr-border, selectat coral, nume + pret) */
#content #produse .produs .spec .marimi {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    overflow: visible;
}

#content #produse .produs .spec .marimi li {
    margin: 0;
    padding: 0;
    border: 1px solid var(--clr-border);
    border-radius: var(--av-r-ctl);
    background: transparent;
    transition: border-color .15s ease;
}

#content #produse .produs .spec .marimi li:hover {
    border-color: var(--clr-lightgrey);
}

#content #produse .produs .spec .marimi li a {
    width: auto;
    min-width: 88px;
    box-sizing: border-box;
    min-height: 56px;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

#content #produse .produs .spec .marimi li .txt {
    width: auto;
    height: auto;
    padding: 0;
    gap: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#content #produse .produs .spec .marimi li a span {
    float: none;
    clear: none;
}

#content #produse .produs .spec .marimi li .c3 {
    font-family: var(--ff-hg);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--clr-almostwhite);
}

#content #produse .produs .spec .marimi li .c2 {
    font-family: var(--ff-hg);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    color: var(--clr-orange);
}

#content #produse .produs .spec .marimi li.is-selected {
    border-color: var(--clr-orange);
}


/* ---------- Desktop ---------- */

@media (min-width: 1025px) {

    #content #produse .produs .op .actiuni {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    #content #produse .produs .av-quick__cart {
        min-width: 150px;
        height: 48px;
        padding: 3px 24px 0;
    }

    #content #produse .produs .av-quick__fav {
        width: 48px;
        height: 48px;
    }

}

/* ---------- Mobil / tableta ---------- */

@media (max-width: 640px), (max-device-width: 640px), (max-width: 1024px) {

    #content #produse .produs .op .actiuni .av-quick {
        align-self: flex-start;
        margin-top: 10px;
        gap: 6px;
    }

    /* card compact: buton doar cu iconita de cos (textul ramane in DOM, ascuns vizual) */
    #content #produse .produs .av-quick__cart {
        flex: 0 0 36px;
        width: 36px;
        min-width: 0;
        height: 36px;
        padding: 0;
    }

    #content #produse .produs .av-quick__ico {
        width: 20px;
        height: 20px;
        display: block;
    }

    #content #produse .produs .av-quick__ico--ok,
    #content #produse .produs .av-quick__cart.is-added .av-quick__ico:not(.av-quick__ico--ok) {
        display: none;
    }

    #content #produse .produs .av-quick__cart.is-added .av-quick__ico--ok {
        display: block;
    }

    #content #produse .produs .av-quick__label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    #content #produse .produs .av-quick__fav {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
    }

    #content #produse .produs .av-quick__fav svg {
        width: 18px;
        height: 18px;
    }
}

/* ---------- Panou de alegere varianta (mobil) ---------- */

html.av-sheet-open {
    overflow: hidden;
}

.av-sheet {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-end;
}

.av-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
}

.av-sheet__panel {
    position: relative;
    width: 100%;
    max-height: 85vh;
    padding: 20px 16px 24px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
    border-top: 1px solid var(--clr-border);
    border-radius: calc(var(--av-r-card) + 4px) calc(var(--av-r-card) + 4px) 0 0;
    background: var(--clr-black);
    color: var(--clr-almostwhite);
    font-family: var(--ff-hg);
}

.av-sheet__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.av-sheet__title {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
}

.av-sheet__close {
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--clr-lightgrey);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.av-sheet__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--clr-lightgrey);
}

.av-sheet__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.av-sheet__opt {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--clr-border);
    border-radius: var(--av-r-ctl);
    background: transparent;
    color: var(--clr-almostwhite);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.av-sheet__opt.is-selected {
    border-color: var(--clr-orange);
}

.av-sheet__opt:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.av-sheet__thumb,
.av-sheet__swatch {
    flex: none;
    width: 56px;
    height: 56px;
    box-sizing: border-box;
    border-radius: var(--av-r-ctl);
}

.av-sheet__thumb {
    object-fit: contain;
    background: var(--clr-accentgrey);
}

.av-sheet__swatch {
    border: 1px solid var(--clr-border);
}

.av-sheet__opt-name {
    flex: 1 1 auto;
    align-self: center;
}

.av-sheet__opt-price {
    flex: none;
    font-family: var(--ff-aga);
    font-size: 20px;
    font-weight: 600;
    color: var(--clr-orange);
}

.av-sheet__opt:disabled .av-sheet__opt-price {
    font-family: var(--ff-hg);
    font-size: 12px;
    font-weight: 500;
    color: var(--clr-lightgrey);
}

.av-sheet__go {
    height: 48px;
    padding: 3px 0 0;
    border: 0;
    border-radius: var(--av-r-ctl);
    background: var(--clr-orange);
    color: #fff;
    font-family: var(--ff-aga);
    font-size: 18px;
    text-transform: uppercase;
    cursor: pointer;
}

.av-sheet__go:disabled {
    background: var(--clr-cardgrey);
    color: var(--clr-darkgrey);
    cursor: not-allowed;
}

.av-sheet__opt:focus-visible,
.av-sheet__go:focus-visible,
.av-sheet__close:focus-visible {
    outline: 2px solid var(--clr-orange);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {

    .av-sheet__panel {
        animation: av-sheet-in .2s ease-out;
    }

    @keyframes av-sheet-in {
        from {
            opacity: 0;
            transform: translateY(24px);
        }
    }
}

/* Varianta selectata (culoare / marime) in titlul produsului */
#content #produse .produs .cnt-detalii div.titluprod a .av-title-variant {
    font-weight: 500;
    color: var(--clr-lightgrey);
}

#content #produse .produs .cnt-detalii div.titluprod a .av-title-variant:not(:empty)::before {
    content: '- ';
}

#content #produse .produs .cnt-detalii div.titluprod a:hover .av-title-variant {
    color: inherit;
}

/* ==========================================================================
   Badge-uri de campanie (My Black Friday, Promo Toamna / Craciun etc.)
   avs.css / avs_mobile.css le pozitioneaza absolut (pe mobil in colt, peste titlu
   sau peste butoane). Le punem in flux, pe primul rand al blocului de pret.
   ========================================================================== */

#content #produse .produs .op .curand-bf,
#content #produse .produs .op .descopera-bf,
#content #produse .produs .op .deja-bf {
    position: static;
    width: auto;
    margin: 0;
    display: block;
    background: none;
}

#content #produse .produs .op .curand-bf img,
#content #produse .produs .op .descopera-bf img,
#content #produse .produs .op .deja-bf img {
    width: 150px;
    max-width: 100%;
    height: auto;
    display: block;
}

/* campaign_badge: ramane relative (textul "VOUCHER DISPONIBIL" e absolut in el) */
#content #produse .produs .op .actiuni .campaign_badge {
    position: relative;
    right: auto;
    bottom: auto;
    margin: 0;
}

#content #produse .produs .op .actiuni .campaign_badge img {
    width: auto;
    max-width: 100%;
    height: 56px;
    object-fit: contain;
    display: block;
}

@media (min-width: 1025px) {

    /* primul rand din .op (flex, wrap) */
    #content #produse .produs .op .curand-bf,
    #content #produse .produs .op .descopera-bf,
    #content #produse .produs .op .deja-bf {
        order: -1;
        flex: 0 0 100%;
    }

    /* primul rand din .actiuni, aliniat cu pretul (la dreapta) */
    #content #produse .produs .op .actiuni .campaign_badge {
        order: -1;
        flex: 0 0 100%;
        display: flex;
        justify-content: flex-end;
    }
}

@media (max-width: 640px), (max-device-width: 640px), (max-width: 1024px) {

    #content #produse .produs .op .curand-bf,
    #content #produse .produs .op .descopera-bf,
    #content #produse .produs .op .deja-bf {
        order: 0;
        align-self: flex-start;
        max-width: 100%;
    }

    #content #produse .produs .op .actiuni .campaign_badge {
        align-self: flex-start;
        margin-bottom: 8px;
    }

    #content #produse .produs .op .actiuni .campaign_badge img {
        height: 40px;
    }
}

/* ==========================================================================
   Review-uri: stele SVG (coral dupa nota) + nota + numarul de review-uri
   ========================================================================== */

#content #produse .produs .av-rating {
    --av-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath id='s' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3Cpath transform='translate(24 0)' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3Cpath transform='translate(48 0)' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3Cpath transform='translate(72 0)' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3Cpath transform='translate(96 0)' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E");
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ff-hg);
    font-size: 13px;
    line-height: 1;
    color: var(--clr-lightgrey);
}

#content #produse .produs .av-rating__stars {
    --av-rating: 0%;
    width: 80px;
    height: 16px;
    flex: none;
    background: linear-gradient(90deg, var(--clr-orange) var(--av-rating), var(--clr-border) var(--av-rating));
    -webkit-mask: var(--av-stars) 0 0 / 100% 100% no-repeat;
    mask: var(--av-stars) 0 0 / 100% 100% no-repeat;
}

#content #produse .produs .av-rating__value {
    font-weight: 700;
    color: var(--clr-almostwhite);
}

#content #produse .produs .av-rating__count {
    font-weight: 500;
}

#content #produse .produs .av-rating__count::before {
    content: '\00B7';
    margin-right: 8px;
    color: var(--clr-darkgrey);
}