/* 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;
    }

    /* imaginile mai inguste decat coloana (cele inalte) ramaneau lipite de stanga (img inline in <a>);
       o centram pe orizontala si pe verticala, oricare ar fi proportiile */
    #content #produse .produs .cnt-img .img {
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    #content #produse .produs .cnt-img .img img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        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 (text): pe tip, contrast mare dar fara portocaliu masiv.
       - showroom: pastila deschisa (--clr-almostwhite) cu text inchis, 13px / 600; coral doar in iconita de pin;
       - note (campanii de garantie): rand intreg, fundal luminat, bara coral subtire la stanga;
       - code (coduri de reducere, is-code pe un note): acelasi rand, dar cu tot fundalul portocaliu (coral translucid);
       - restul: pastila cu contur gri deschis, text alb.
       Clasele vin din productBadgesItems.phtml (is-showroom / is-note / is-media). */
    #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: 8px 14px;
        border: 1px solid var(--clr-lightgrey);
        border-radius: 50px;
        background: transparent;
        color: #fff;
        font-family: var(--ff-hg);
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
    }

    #content #continut .cnt-3 #produse .produs .lista-1.badges li.is-showroom p {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px 8px 12px;
        border-color: var(--clr-almostwhite);
        background: var(--clr-almostwhite);
        color: var(--clr-black);
    }

    #content #continut .cnt-3 #produse .produs .lista-1.badges li.is-showroom p::before {
        content: '';
        width: 16px;
        height: 16px;
        flex: none;
        background: var(--clr-orange);
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/></svg>") center / contain no-repeat;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/></svg>") center / contain no-repeat;
    }

    #content #produse .produs .lista-1.badges li.is-note {
        flex: 1 1 100%;
    }

    #content #continut .cnt-3 #produse .produs .lista-1.badges li.is-note p {
        padding: 10px 14px;
        border: 0;
        border-left: 3px solid var(--clr-orange);
        border-radius: 0 var(--av-r-ctl) var(--av-r-ctl) 0;
        background: rgba(255, 255, 255, .10);
        color: #fff;
        font-weight: 500;
        line-height: 1.45;
    }

    #content #continut .cnt-3 #produse .produs .lista-1.badges li.is-note p a {
        color: #fff;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    /* coduri de reducere: tot fundalul portocaliu (coral translucid), nu gri */
    #content #continut .cnt-3 #produse .produs .lista-1.badges li.is-code p {
        background: rgba(241, 106, 82, .16);
    }

    /* 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;
}

/* cardul cu culori / marimi are cate un badge pe tip; se vede doar cel al variantei selectate (js/pagedproducts.js) */
#content #produse .produs .op .badge-bf[hidden] {
    display: none;
}

/* 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 (css/stars.css) + nota + numarul de review-uri
   ========================================================================== */

#content #produse .produs .av-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ff-hg);
    font-size: 13px;
    line-height: 1;
    color: var(--clr-lightgrey);
}

/* .av-rating__stars: desenul si culoarea vin din css/stars.css (comun cu homepage si pagina de produs) */

#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);
}



/* ---------- Textul de prezentare al categoriei (categoryDescription.phtml) ----------
   Pana acum: text alb pe fundal gol, cu linii gri sus/jos (avs.css). Acum: acelasi card ca produsele din lista
   (--clr-black, bordura --clr-border, raza --av-r-card), hanken-grotesk, titluri 800, linkuri coral.
   Selectorii au #content #continut ca sa bata regulile din avs.css; valabil pe toate latimile. */

#content #continut .cnt-3 .text.categorydesc {
    margin: 0;
    padding: 24px 28px;
    border: 1px solid var(--clr-border);
    border-radius: var(--av-r-card);
    background: var(--clr-black);
    font-family: var(--ff-hg), Arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: #CFCDCD;
}

#content #continut .cnt-3 .text.categorydesc > div p,
#content #continut .cnt-3 .text.categorydesc > div li {
    padding: 0 0 12px;
    margin: 0;
    font-family: var(--ff-hg), Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.65;
    color: #CFCDCD;
}

#content #continut .cnt-3 .text.categorydesc > div p:last-child {
    padding-bottom: 0;
}

#content #continut .cnt-3 .text.categorydesc h1,
#content #continut .cnt-3 .text.categorydesc h2,
#content #continut .cnt-3 .text.categorydesc h3 {
    margin: 0 0 8px;
    padding: 0;
    font-family: var(--ff-hg), Arial, sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.005em;
    text-transform: none;
    color: #fff;
}

/* titlurile din text sunt urmate de <br> (spatiu dublu) si, dupa primul paragraf, au nevoie de aer deasupra */
#content #continut .cnt-3 .text.categorydesc h2 + br,
#content #continut .cnt-3 .text.categorydesc h3 + br {
    display: none;
}

#content #continut .cnt-3 .text.categorydesc p + h2,
#content #continut .cnt-3 .text.categorydesc p + h3 {
    margin-top: 24px;
}

#content #continut .cnt-3 .text.categorydesc ul,
#content #continut .cnt-3 .text.categorydesc ol {
    margin: 0 0 12px;
    padding-left: 20px;
}

#content #continut .cnt-3 .text.categorydesc strong,
#content #continut .cnt-3 .text.categorydesc b {
    font-weight: 800;
    color: #fff;
}

#content #continut .cnt-3 .text.categorydesc img {
    max-width: 100%;
    height: auto;
    border-radius: var(--av-r-ctl);
}

#content #continut .cnt-3 .text.categorydesc a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: var(--clr-darkgrey);
    text-underline-offset: 3px;
    transition: color .15s ease, text-decoration-color .15s ease;
}

#content #continut .cnt-3 .text.categorydesc a:hover {
    color: var(--clr-orange);
    text-decoration-color: var(--clr-orange);
}

/* "Citeste mai mult": chip rotunjit, ca butoanele de sortare */
#content #continut .cnt-3 .text.categorydesc a[onclick] {
    margin-top: 14px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--clr-darkgrey);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    color: #fff;
    transition: border-color .15s ease, color .15s ease;
}

#content #continut .cnt-3 .text.categorydesc a[onclick]:hover {
    border-color: var(--clr-orange);
    color: var(--clr-orange);
    text-decoration: none;
}

#content #continut .cnt-3 .text.categorydesc a:focus-visible {
    outline: 2px solid var(--clr-orange);
    outline-offset: 2px;
}

/* continutul care se deschide la "Citeste mai mult" */
#content #continut .cnt-3 .text.categorydesc .description {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--clr-border);
}

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

    #content #continut .cnt-3 .text.categorydesc {
        padding: 18px 16px;
    }

    #content #continut .cnt-3 .text.categorydesc > div p,
    #content #continut .cnt-3 .text.categorydesc > div li {
        font-size: 14px;
    }

    #content #continut .cnt-3 .text.categorydesc h1,
    #content #continut .cnt-3 .text.categorydesc h2,
    #content #continut .cnt-3 .text.categorydesc h3 {
        font-size: 18px;
    }
}


/* ---------- Antetul categoriei: filtre active + numar de rezultate (pages/products/category.phtml) ----------
   Titlul generat pentru combinatii de filtre ("Boxe Amplificate JBL, TIP BOXE AMPLIFICATE: Boxe portabile, cu
   bluetooth") e acum titlu + chip-uri; linia de sub descriere nu mai repeta titlul, doar numarul de rezultate. */

#content #continut ul.av-filters {
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
}

#content #continut ul.av-filters li {
    margin: 0;
    padding: 7px 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    border: 1px solid var(--clr-border);
    border-radius: 50px;
    background: var(--clr-black);
    font-family: var(--ff-hg), Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

#content #continut ul.av-filters .av-filters__k {
    color: var(--clr-lightgrey);
}

#content #continut ul.av-filters .av-filters__k::after {
    content: ':';
}

#content #continut ul.av-filters .av-filters__v {
    color: #fff;
}

#content #continut h2.rezultate {
    padding: 0 0 14px !important;
    font-family: var(--ff-hg), Arial, sans-serif !important;
    font-size: 14px;
    font-weight: 500 !important;
    line-height: 1.2;
    color: var(--clr-lightgrey);
}


/* ---------- Nume de culori lungi ----------
   Textul chip-ului are latime fixa (75px, avs.css). Un nume fara spatii ("Argintiu/Auriu") nu avea unde sa se
   rupa si iesea din chip. Acum se rupe dupa "/" (<wbr> in productColor.phtml) si, daca un cuvant tot nu incape,
   oriunde; pana la 3 randuri, in loc de 2 taiate. */

#content #produse .produs .spec .culori .culoare .txt .txt-cnt span {
    max-height: none;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: manual;
}

#content #produse .produs .spec .culori .culoare .txt .txt-cnt span.name {
    line-height: 1.2;
}

#content #produse .produs .spec .culori .culoare .txt .txt-cnt span.c2 {
    margin-top: 2px;
    font-size: 11px;
    color: var(--clr-lightgrey);
}


/* ---------- Badge-uri pe mobil ----------
   Lista avea clasa mbhidden (ascunsa pe mobil). Cardurile sunt in 2 coloane de ~170px, deci badge-urile apar
   compacte, unul sub altul, deasupra titlului: showroom = pastila mica cu pin, mesajele lungi (coduri promo,
   campanii) taiate la 3 randuri (textul intreg e pe pagina produsului). Badge-urile cu imagine raman ascunse
   (cele de 500px lasa cardul fara loc). */

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

    #content #produse .produs .lista-1.badges {
        margin: 0 0 2px;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        list-style: none;
    }

    #content #produse .produs .lista-1.badges li {
        margin: 0;
        padding: 0;
        float: none;
        width: auto;
        max-width: 100%;
    }

    #content #produse .produs .lista-1.badges li.is-media {
        display: none;
    }

    #content #continut .cnt-3 #produse .produs .lista-1.badges li p {
        margin: 0;
        padding: 5px 9px;
        border: 1px solid var(--clr-lightgrey);
        border-radius: 8px;
        background: transparent;
        color: #fff;
        font-family: var(--ff-hg);
        font-size: 11px;
        font-weight: 600;
        line-height: 1.25;
    }

    #content #continut .cnt-3 #produse .produs .lista-1.badges li.is-showroom p {
        display: inline-flex;
        align-items: flex-start;
        gap: 6px;
        border-color: var(--clr-almostwhite);
        background: var(--clr-almostwhite);
        color: var(--clr-black);
    }

    #content #continut .cnt-3 #produse .produs .lista-1.badges li.is-showroom p::before {
        content: '';
        width: 12px;
        height: 12px;
        margin-top: 1px;
        flex: none;
        background: var(--clr-orange);
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/></svg>") center / contain no-repeat;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/></svg>") center / contain no-repeat;
    }

    /* padding-ul sta pe <li>: pe un element cu line-clamp, paddingul lasa sa se vada jumatate din randul 4 */
    #content #produse .produs .lista-1.badges li.is-note {
        padding: 5px 9px;
        border-left: 3px solid var(--clr-orange);
        border-radius: 0 6px 6px 0;
        background: rgba(255, 255, 255, .10);
    }

    #content #produse .produs .lista-1.badges li.is-code {
        background: rgba(241, 106, 82, .16);
    }

    #content #continut .cnt-3 #produse .produs .lista-1.badges li.is-note p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        padding: 0;
        border: 0;
        background: none;
        font-weight: 500;
        color: #fff;
    }
}


/* ---------- Cadouri (pagedProductsGifts.phtml) ----------
   Varianta compacta: un singur rand subtire (~36px). Eticheta "Cadou" cu iconita, fiecare cadou ca un chip
   (poza rotunda de 28px + nume pe un rand), iar valoarea totala in linie, la coada. */

#content #produse .produs .av-gifts {
    margin: 2px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-family: var(--ff-hg), Arial, sans-serif;
}

#content #produse .produs .av-gifts__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--clr-lightgrey);
}

#content #produse .produs .av-gifts__label::before {
    content: '';
    width: 16px;
    height: 16px;
    flex: none;
    background: var(--clr-orange);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8h5.08v6z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8h5.08v6z'/></svg>") center / contain no-repeat;
}

#content #produse .produs .av-gifts__list {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
}

#content #produse .produs .av-gift {
    min-width: 0;
    max-width: 100%;
    padding: 3px 12px 3px 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--clr-border);
    border-radius: 50px;
    background: rgba(255, 255, 255, .03);
    text-decoration: none;
    color: #fff;
    transition: border-color .15s ease;
}

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

#content #produse .produs .av-gift__img {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: #1c1c1c;
    object-fit: contain;
}

#content #produse .produs .av-gift__name {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    transition: color .15s ease;
}

#content #produse .produs .av-gift:hover .av-gift__name {
    color: var(--clr-orange);
}

#content #produse .produs .av-gift:focus-visible {
    outline: 2px solid var(--clr-orange);
    outline-offset: 2px;
}

#content #produse .produs .av-gifts__value {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 12px;
    line-height: 1;
}

#content #produse .produs .av-gifts__value-k {
    font-weight: 500;
    color: var(--clr-lightgrey);
}

#content #produse .produs .av-gifts__value-v {
    font-weight: 700;
    color: var(--clr-orange);
}

#content #produse .produs .av-gifts__value-c {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

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

    /* carduri de ~170px: eticheta, cadourile si valoarea pe randuri separate, tot compact */
    #content #produse .produs .av-gifts {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    #content #produse .produs .av-gifts__list {
        width: 100%;
        flex-direction: column;
    }

    #content #produse .produs .av-gift {
        padding: 3px 8px 3px 3px;
        gap: 6px;
    }

    #content #produse .produs .av-gift__img {
        width: 24px;
        height: 24px;
    }

    #content #produse .produs .av-gift__name {
        font-size: 11px;
    }
}


/* ==========================================================================
   Comparare pe cardul din lista de categorie — buton rotund, doar iconita, pe imagine (stanga-sus).
   Pe mobil sta in linie cu inima de wishlist (dreapta-sus). Markup: pagedProducts.phtml, in .cnt-img;
   cuvantul "Compara" ramane in DOM, ascuns vizual, + title / aria-label (compare.js foloseste doar
   .is-added / aria-pressed).
   ========================================================================== */

#content #produse .produs .cnt-img {
    position: relative;
}

#content #produse .produs .cnt-img .avs-cmp-add {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 36px;
    min-height: 36px;
    height: 36px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--clr-cardgrey);
    color: var(--clr-almostwhite);
}

#content #produse .produs .cnt-img .avs-cmp-add:hover {
    background: #3a3b3f;
    color: #fff;
}

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

#content #produse .produs .cnt-img .avs-cmp-add .avs-cmp-add__off,
#content #produse .produs .cnt-img .avs-cmp-add .avs-cmp-add__on {
    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 .cnt-img .avs-cmp-add.is-added {
    box-shadow: inset 0 0 0 1px var(--clr-orange);
    color: var(--clr-orange);
}

#content #produse .produs .cnt-img .avs-cmp-add:focus-visible {
    outline: 2px solid var(--clr-orange);
    outline-offset: 2px;
}


/* ==========================================================================
   Card de produs din lista de categorie — mobil / tableta, in limbajul cardului de homepage
   (homepageProductCard.phtml / .hp-card): card #2B2C2E, imagine patrata pe fundalul cardului, nume bold pe
   2 randuri, rating, pret mare coral cu RRP gri in stanga si buton de cos patrat (44px, doar iconita) in dreapta,
   pe acelasi rand. Wishlist-ul (inima) sta pe imagine, dreapta-sus, iar compararea stanga-sus. Desktopul ramane neschimbat.
   Structura .op e aplatizata cu display:contents (rating-ul sta in .op > .st, pretul si butonul in .actiuni),
   ca sa le putem ordona intr-un singur rand flex fara sa schimbam markup-ul.
   ========================================================================== */

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

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

    #content #produse .produs {
        padding: 10px 10px 14px;
        gap: 10px;
        border: 0;
        background: var(--clr-cardgrey);
        overflow: visible;
    }

    #content #produse .produs .cnt-img {
        padding: 0;
    }

    /* ancora pentru inima (wishlist): cardul, nu coloana de detalii */
    #content #produse .produs .cnt-detalii {
        position: static;
        padding: 0;
        gap: 8px;
    }

    #content #produse .produs .cnt-detalii div.titluprod a {
        -webkit-line-clamp: 2;
        min-height: 2.6em;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.3;
    }

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

    #content #continut .cnt-3 #produse .produs .stock-info {
        font-size: 11px;
    }

    /* ---------- Rand de cumparare: rating, [pret + RRP | cos] ---------- */

    #content #produse .produs .op {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 10px 6px;
    }

    #content #produse .produs .op > .st,
    #content #produse .produs .op .actiuni,
    #content #produse .produs .op .actiuni .av-quick {
        display: contents;
    }

    /* rating (era ascuns pe mobil): stele + nota + (numar), ca pe homepage */
    #content #produse .produs .op .reviews.mbhidden {
        order: 1;
        flex: 0 0 100%;
        min-height: 16px;
        display: block !important;
    }

    #content #produse .produs .op .reviews .av-rating {
        display: flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
        font-family: var(--ff-hg);
        font-size: 11px;
        line-height: 1;
        color: var(--clr-lightgrey);
    }

    #content #produse .produs .op .reviews .av-rating__stars {
        width: 66px;
    }

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

    /* "28 review-uri" devine "(28)": numarul vine din data-n, textul lung ramane in DOM pentru cititoarele de ecran */
    #content #produse .produs .op .reviews .av-rating__count {
        font-size: 0;
    }

    #content #produse .produs .op .reviews .av-rating__count[data-n]::after {
        content: '(' attr(data-n) ')';
        font-size: 11px;
        font-weight: 500;
    }

    /* pretul (.actiuni > .st): inaltime rezervata ca sa se alinieze cardurile cu si fara RRP;
       e si container, ca fontul pretului sa se poata adapta la latimea coloanei (cqw) */
    #content #produse .produs .op .actiuni > .st {
        order: 2;
        flex: 1 1 0;
        min-width: 0;
        min-height: 50px;
        margin: 0;
        container-type: inline-size;
    }

    #content #produse .produs .op .actiuni span.pret-nou {
        font-size: min(28px, 27cqw);
        letter-spacing: .005em;
        font-variant-numeric: tabular-nums;
    }

    #content #produse .produs .op .actiuni span.pret-nou:after {
        margin-left: 1px;
        font-size: 13px;
        font-weight: 400;
        letter-spacing: .04em;
        vertical-align: top;
        color: inherit;
    }

    #content #produse .produs .op .actiuni span.pret-vechi {
        margin: 6px 0 0;
        font-variant-numeric: tabular-nums;
    }

    /* cos: patrat 44px, doar iconita, in dreapta pretului (ca pe homepage); dezactivat = contur */
    #content #produse .produs .op .av-quick__cart {
        order: 3;
        flex: none;
        width: 44px;
        min-width: 0;
        height: 44px;
    }

    #content #produse .produs .op .av-quick__cart:hover:not(:disabled) {
        filter: none;
        background: #f58a76;
    }

    #content #produse .produs .op .av-quick__cart:disabled {
        background: transparent;
        box-shadow: inset 0 0 0 1px #4a4b50;
        color: #8c8a8a;
    }

    #content #produse .produs .op .av-quick__ico {
        width: 22px;
        height: 22px;
    }

    /* ---------- Butoane pe imagine: comparare (stanga-sus) si wishlist (dreapta-sus), in linie ---------- */

    #content #produse .produs .cnt-img .avs-cmp-add {
        top: 6px;
        left: 6px;
        width: 34px;
        min-height: 34px;
        height: 34px;
        background: rgba(16, 16, 16, .6);
        color: #fff;
    }

    #content #produse .produs .cnt-img .avs-cmp-add:hover,
    #content #produse .produs .cnt-img .avs-cmp-add.is-added {
        background: rgba(16, 16, 16, .85);
    }

    #content #produse .produs .op .av-quick__fav {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 2;
        flex: none;
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 50%;
        background: rgba(16, 16, 16, .6);
        color: #fff;
    }

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

    #content #produse .produs .op .av-quick__fav:hover {
        background: rgba(16, 16, 16, .85);
    }

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

/* Disponibilitatea variantei alese se verifica dupa randare (js/pagedproducts.js, carduri "lazy"): pana la
   raspuns, butonul de cos ramane in culoarea lui, fara text, cu un cerc de incarcare. !important: trece peste
   regulile :disabled din lista / de pe campanii (#content #produse ..., #content #main-section ...). */
.av-quick__cart.is-checking.is-checking,
.av-sheet__go.is-checking.is-checking {
    position: relative;
    background: var(--clr-orange) !important;
    color: transparent !important;
    cursor: progress !important;
    filter: none !important;
}

.av-quick__cart.is-checking.is-checking > * {
    visibility: hidden;
}

.av-quick__cart.is-checking.is-checking::after,
.av-sheet__go.is-checking.is-checking::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: av-spin .7s linear infinite;
}

@keyframes av-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .av-quick__cart.is-checking.is-checking::after,
    .av-sheet__go.is-checking.is-checking::after {
        animation-duration: 2s;
    }
}

/* Stocul cardurilor-articol vine dupa randare (js/pagedproducts.js, /ajax-avStock). Randul etichetei e rezervat de la
   inceput, gol sau nu: altfel, cand apare "In stoc", cardul creste cu un rand si tot ce e sub el in grila coboara. */
#content #produse .produs .stock-info[data-av-stock] .c2:empty::before {
    content: '\00a0';
}

@media (min-width: 1025px) {
    #content #produse .produs .cnt-detalii > .stock-info[data-av-stock]:has(.c2:empty) {
        display: inline-flex;
    }
}


/* ==========================================================================
   Produs fara pret: un singur buton "Contacteaza-ne pentru pret" (link spre pagina de produs) in locul pretului si al
   cosului. Linkul .av-quick__contact sta in .av-quick; clasa .is-contact o pun pagedProductsPrice.phtml si
   js/pagedproducts.js (la schimbarea variantei). Pe desktop are acelasi gabarit ca "Adauga in cos".
   ========================================================================== */

#content #produse .produs .av-quick__contact {
    display: none;
}

#content #produse .produs .av-quick.is-contact .av-quick__cart {
    display: none;
}

#content #produse .produs .av-quick.is-contact a.av-quick__contact,
#content #produse .produs .av-quick.is-contact a.av-quick__contact:link,
#content #produse .produs .av-quick.is-contact a.av-quick__contact:visited,
#content #produse .produs .av-quick.is-contact a.av-quick__contact:hover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 150px;
    height: 48px;
    margin: 0;
    padding: 3px 24px 0;
    border-radius: var(--av-r-ctl);
    background: var(--clr-orange);
    color: #fff;
    font-family: var(--ff-aga);
    font-size: 18px;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: filter .15s ease;
}

#content #produse .produs .av-quick.is-contact a.av-quick__contact:hover {
    filter: brightness(1.1);
}

#content #produse .produs .av-quick.is-contact a.av-quick__contact:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

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

    /* fara pret nu mai e nimic de pus langa buton: pretul dispare, butonul ia tot randul */
    #content #produse .produs .op .actiuni:has(.av-quick.is-contact) > .st {
        display: none;
    }

    #content #produse .produs .av-quick.is-contact a.av-quick__contact,
    #content #produse .produs .av-quick.is-contact a.av-quick__contact:link,
    #content #produse .produs .av-quick.is-contact a.av-quick__contact:visited,
    #content #produse .produs .av-quick.is-contact a.av-quick__contact:hover {
        order: 2;
        flex: 1 1 100%;
        min-width: 0;
        height: auto;
        min-height: 44px;
        padding: 8px 10px 6px;
        font-size: 16px;
        line-height: 1.1;
        white-space: normal;
    }
}