/* Banda „Cumpără împreună" din sertarul lateral.
   Vezi class-cart-recommendations.php pentru de unde vin produsele. */

.avatex-sc__recs {
    /* Banda stă acum ÎN zona derulabilă a sertarului (vezi class-side-cart.php),
       deci nu mai e copil flex și nu mai concurează cu lista pe înălțime. */
    margin-top: 14px;

    /* ZONA. Coșul rămâne alb, recomandările primesc un gri care merge dintr-o
       margine în alta a sertarului. Nu e un card care plutește în coș, e o ALTĂ
       SUPRAFAȚĂ — semnalul cel mai ieftin și cel mai citit că „aici începe
       altceva".

       Griul e RECE, în tonul temei. Prima versiune l-a făcut cald (#f6f5f2) și
       a fost o alegere nemotivată: tema folosește griuri reci peste tot
       (#ececf0, #6b6b70, #f5f5f7), iar o zonă caldă introducea o temperatură
       nouă fără să câștige nimic — separarea vine din diferența de suprafață,
       nu din temperatură. */
    background: #f7f7f9;
    border-top: 1px solid #e4e4e8;

    /* Umbră internă doar la muchia de sus: zona se citește ca fiind SUB lista
       coșului, nu lângă ea. Ierarhia devine spațială, fără nicio linie groasă. */
    box-shadow: inset 0 7px 12px -9px rgba(26, 26, 26, 0.16);

    padding: 14px 16px;
    transition: background 0.2s ease;
}

/* Modul „alegi o variantă": zona se închide un pas la culoare. Schimbarea de
   suprafață e ce anunță sub-pasul — omul vede că a intrat undeva, nu doar că
   s-a schimbat conținutul. */
.avatex-sc__recs.is-picking {
    background: #ececed;
}

/* Titlul devine SEPARATOR: text plus o linie care merge până la capătul
   rândului. Nu mai e o etichetă care plutește peste conținut, e o graniță care
   poartă un nume. */
.avatex-sc__recs-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #646469;
}

.avatex-sc__recs-title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #e4e4e8;
}

/* În modul de alegere, bara proprie a selectorului ține locul titlului. */
.avatex-sc__recs.is-picking .avatex-sc__recs-title {
    display: none;
}

.avatex-sc__recs-list {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0 0 8px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* `display: flex` de mai sus bate regula implicită a browserului pentru
   [hidden], deci lista ar rămâne vizibilă sub selectorul de variante. */
.avatex-sc__recs-list[hidden] {
    display: none;
}

/* Cardurile devin albe pe zona gri: altă formă, alt rol. Produsele din coș sunt
   rânduri largi cu stepper de cantitate, recomandările sunt cartonașe compacte
   una lângă alta — se disting înainte să citești un cuvânt. */
.avatex-sc__rec {
    box-sizing: border-box;
    flex: 0 0 132px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 8px;
    background: #fff;
    border: 1px solid #e4e4e8;
    border-radius: 7px;
}

.avatex-sc__rec-img {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f7;
}

.avatex-sc__rec-img img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.avatex-sc__rec-name {
    font-size: 12px;
    line-height: 1.3;
    color: #1a1a1a;
    text-decoration: none;
    /* Două rânduri fixe: titlurile din catalog sunt lungi, iar carduri de
       înălțimi diferite fac banda să pară stricată. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.avatex-sc__rec-name:hover {
    color: #000;
    text-decoration: underline;
}

.avatex-sc__rec-price {
    font-size: 13px;
    font-weight: 700;
    color: #202020;
    line-height: 1.2;
}

.avatex-sc__rec-price del {
    font-size: 11px;
    font-weight: 400;
    color: #999;
    margin-right: 3px;
}

.avatex-sc__rec-price ins {
    text-decoration: none;
}

/* Marcaj doar pe produsele care singure trec pragul de transport gratuit. */
.avatex-sc__rec-badge {
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
    color: #1f9d55;
    background: #e8f7ee;
    border-radius: 4px;
    padding: 2px 5px;
}

/* Specificitate: butoanele `.button` ale temei ar câștiga altfel. Același
   tipar ca overrideul de listă din side-cart.css. */
/* REGULA BUTOANELOR: un singur buton negru plin în sertar, „Finalizează
   comanda". Tot ce ține de upsell e pe contur.
   Nu din modestie — sunt acțiuni opționale, iar forma trebuie să spună asta
   înainte să citești textul. Pline, „Adaugă" și „Finalizează comanda" erau două
   dreptunghiuri negre identice la câteva zeci de pixeli distanță; omul care
   ezită acolo nu ratează o vânzare de 135 lei, ci comanda pe care o avea deja
   în coș. Prețul e real (pe contur se apasă mai puțin), dar raportul e prost
   invers: un upsell care fură 1 din 20 de finalizări costă mai mult decât aduc
   cele 19 adăugări. */
#ts-shopping-cart-sidebar .avatex-sc__rec-add,
#ts-shopping-cart-sidebar .avatex-sc__rec-add.button {
    display: block;
    margin-top: auto;
    padding: 7px 6px;
    border: 1px solid #8f8f97;
    border-radius: 6px;
    background: transparent;
    color: #202020;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Pline doar la hover: afordanța rămâne, concurența la repaus nu.

   `hover: hover` nu e pedanterie. Pe telefon nu există hover: browserul
   aplică `:hover` la atingere și îl lasă acolo până atingi altceva. Fără
   poarta asta, butonul de upsell rămânea negru plin lângă „Finalizează
   comanda" — adică exact al doilea dreptunghi negru pe care regula de mai
   sus există ca să-l evite. */
@media (hover: hover) and (pointer: fine) {
    #ts-shopping-cart-sidebar .avatex-sc__rec-add:hover,
    #ts-shopping-cart-sidebar .avatex-sc__rec-add.button:hover {
        background: #202020;
        border-color: #202020;
        color: #fff;
    }
}

/* Starea de „se adaugă" pe care o pune wc-add-to-cart.js. */
#ts-shopping-cart-sidebar .avatex-sc__rec-add.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* wc-add-to-cart.js adaugă după fiecare buton reușit un link „Vezi coșul".
   În sertar e redundant (coșul e deja deschis) și rupe layoutul cardului. */
#ts-shopping-cart-sidebar .avatex-sc__rec .added_to_cart {
    display: none !important;
}

@media only screen and (max-width: 480px) {
    .avatex-sc__recs {
        padding: 10px 14px 4px;
    }

    .avatex-sc__rec {
        flex-basis: 112px;
    }
}

/* ── Selectorul de variante ──────────────────────────────
   Înlocuiește modalul quickshop al temei, care depinde de CloudZoom (script
   prezent doar pe pagina de produs) și pe telefon nu se deschidea deloc.
   Trăiește în locul benzii, în aceeași ramă — fără suprapuneri de z-index. */

.avatex-sc__picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px 0 8px;
}

.avatex-sc__picker[hidden] {
    display: none;
}

/* Bara care anunță sub-pasul. Are fundal propriu, mai închis decât zona, ca să
   se citească drept „cap de secțiune", nu drept încă un rând de conținut. */
.avatex-sc__picker-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 -6px;
    padding: 7px 8px;
    border-radius: 6px;
    background: rgba(26, 26, 26, 0.05);
}

.avatex-sc__picker-mode {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #1a1a1a;
}

#ts-shopping-cart-sidebar .avatex-sc__picker-back {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.2;
    color: #6b6b76;
    cursor: pointer;
}

#ts-shopping-cart-sidebar .avatex-sc__picker-back:hover {
    color: #000;
    text-decoration: underline;
}

/* Produsul care se adaugă: poză plus nume, pe două rânduri dacă e nevoie.
   Numele NU se mai taie pe un rând — aici e singurul loc unde omul află ce
   cumpără, deci merită să încapă. */
.avatex-sc__picker-prod {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.avatex-sc__picker-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 600;
    color: #1a1a1a;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Poza produsului ales. Fără ea, selectorul cerea o alegere („Gri perlat")
   fără să arate vreodată obiectul — omul adăuga în coș pe încredere. */
.avatex-sc__picker-img {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #e4e4e8;
}

/* Regula UA pentru [hidden] pierde în fața oricărui `display` din foaia
   noastră; o repetăm explicit, ca la lista de recomandări. */
.avatex-sc__picker-img[hidden] {
    display: none;
}

.avatex-sc__picker-attrs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.avatex-sc__picker-attr {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6b6b76;
}

#ts-shopping-cart-sidebar .avatex-sc__picker-attr select {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #d9d9e0;
    border-radius: 3px;
    background: #fff;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    color: #1a1a1a;
}

#ts-shopping-cart-sidebar .avatex-sc__picker-attr select:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 1px;
}

.avatex-sc__picker-foot {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatex-sc__picker-price {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
}

/* Pe contur, la lățimea textului — nu pe toată lățimea.
   Forma e al doilea mecanism, după culoare: un buton lat cât sertarul și unul
   cât textul lui nu se confundă nici din colțul ochiului cu „Finalizează
   comanda", care e la câțiva zeci de pixeli mai jos. */
#ts-shopping-cart-sidebar .avatex-sc__picker-add,
#ts-shopping-cart-sidebar .avatex-sc__picker-add.button {
    flex: 0 0 auto;
    padding: 0 18px;
    height: 38px;
    line-height: 36px;
    border: 1px solid #1a1a1a;
    border-radius: 6px;
    background: transparent;
    color: #1a1a1a;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
}

@media (hover: hover) and (pointer: fine) {
    #ts-shopping-cart-sidebar .avatex-sc__picker-add:hover,
    #ts-shopping-cart-sidebar .avatex-sc__picker-add.button:hover {
        background: #1a1a1a;
        color: #fff;
    }
}

/* Cât timp nu s-a ales o combinație validă, butonul n-are `data-product_id`,
   deci handlerul WooCommerce iese singur. Starea trebuie să se și vadă. */
#ts-shopping-cart-sidebar .avatex-sc__picker-add[aria-disabled="true"] {
    opacity: 0.45;
    cursor: default;
}

#ts-shopping-cart-sidebar .avatex-sc__picker .added_to_cart {
    display: none !important;
}

/* ── Varianta din pagină (coș și produs) ─────────────────
   Tema nu randează sertarul pe pagina coșului (drile/header.php:
   `... && !is_cart() && !is_checkout()`), iar pe pagina de produs banda stă
   oricum în flux. În ambele locuri e lățime, deci grilă în loc de carusel.

   Prima versiune a dat aceste reguli doar contextului `inline`, iar banda de
   pe pagina de produs a moștenit stilul sertarului: un carusel de 132px
   într-o coloană de 50px, cu titlul rupt pe verticală. Văzut în browser.
   Regulile sunt aceleași pentru amândouă, deci poartă o clasă comună. */

/* Aceeași zonă ca în sertar: gri rece, muchie proprie, umbră internă sus. E
   aceeași informație în același rol, deci nu are voie să arate altfel. */
.avatex-sc__recs--page {
    margin: 28px 0 0;
    padding: 20px 22px 22px;
    background: #f7f7f9;
    border: 1px solid #e4e4e8;
    border-radius: 8px;
    box-shadow: inset 0 7px 12px -9px rgba(26, 26, 26, 0.16);
}

.avatex-sc__recs--page.is-picking {
    background: #ececed;
}

.avatex-sc__recs--page .avatex-sc__recs-title {
    font-size: 11px;
    margin-bottom: 16px;
}

.avatex-sc__recs--page .avatex-sc__recs-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    overflow: visible;
    padding-bottom: 0;
}

.avatex-sc__recs--page .avatex-sc__rec {
    flex-basis: auto;
}

.avatex-sc__recs--page .avatex-sc__rec-name {
    font-size: 12.5px;
}

/* Butoanele din pagină nu mai sunt scopate pe #ts-shopping-cart-sidebar, deci
   au nevoie de aceleași dimensiuni declarate aici. */
/* Pe contur, ca în sertar. În pagina coșului „Finalizează comanda" e tot
   singurul buton plin de pe ecran. */
.avatex-sc__recs--page .avatex-sc__rec-add {
    display: block;
    width: 100%;
    height: 34px;
    line-height: 32px;
    padding: 0 10px;
    border: 1px solid #8f8f97;
    border-radius: 6px;
    background: transparent;
    color: #1a1a1a;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .avatex-sc__recs--page .avatex-sc__rec-add:hover {
        background: #1a1a1a;
        border-color: #1a1a1a;
        color: #fff;
    }
}

.avatex-sc__recs--page .added_to_cart {
    display: none !important;
}

/* Selectorul de variante, în pagină: două coloane când e loc. */
.avatex-sc__recs--page .avatex-sc__picker {
    max-width: 420px;
}

.avatex-sc__recs--page .avatex-sc__picker-attr select {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #d9d9e0;
    border-radius: 3px;
    background: #fff;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    color: #1a1a1a;
}

.avatex-sc__recs--page .avatex-sc__picker-add {
    width: auto;
    padding: 0 18px;
    height: 38px;
    line-height: 36px;
    border: 1px solid #1a1a1a;
    border-radius: 6px;
    background: transparent;
    color: #1a1a1a;
    text-transform: none;
}

@media (hover: hover) and (pointer: fine) {
    .avatex-sc__recs--page .avatex-sc__picker-add:hover {
        background: #1a1a1a;
        color: #fff;
    }
}

.avatex-sc__recs--page .avatex-sc__picker-add[aria-disabled="true"] {
    opacity: 0.45;
    cursor: default;
}

.avatex-sc__recs--page .avatex-sc__picker-back {
    padding: 0;
    border: 0;
    background: none;
    font-size: 12px;
    color: #6b6b76;
    cursor: pointer;
}

/* Pe pagina de produs banda vine imediat după rezumat, înaintea taburilor.
   Are nevoie de aer deasupra, altfel se lipește de descriere. */
.avatex-sc__recs--product {
    clear: both;
    margin-top: 34px;
}

@media (max-width: 767px) {
    .avatex-sc__recs--product {
        margin-top: 24px;
        padding: 16px 14px 18px;
    }
}


/* ── Cardul din sertar: compact ca în mockup ─────────────
   Poza pătrată de 114px, titlul pe două rânduri, prețul și butonul unul sub
   altul dădeau un card de 232px și o bandă de 292px. Într-un sertar de 608px,
   cu antet, prag de transport și footer, asta nu lasă loc de coș. Poza se
   taie la 76px și restul se strânge: cardul scade la ~180px fără să piardă
   nimic din ce se citește. */
.avatex-sc__recs--drawer .avatex-sc__rec {
    gap: 5px;
    padding: 7px;
}

.avatex-sc__recs--drawer .avatex-sc__rec-img img {
    height: 76px;
    object-fit: cover;
}

.avatex-sc__recs--drawer .avatex-sc__rec-name {
    font-size: 11px;
    line-height: 1.28;
}

.avatex-sc__recs--drawer .avatex-sc__rec-price {
    font-size: 11.5px;
    line-height: 1.15;
}

.avatex-sc__recs--drawer .avatex-sc__rec-price del {
    display: block;
    margin: 0;
}

#ts-shopping-cart-sidebar .avatex-sc__recs--drawer .avatex-sc__rec-add,
#ts-shopping-cart-sidebar .avatex-sc__recs--drawer .avatex-sc__rec-add.button {
    padding: 6px 8px;
    font-size: 10px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}


/* ── Banda din pagină (produs + coș), v1.40.13 ─────────────
   Trei defecte văzute pe 390px, toate venite din temă:

   1. Tema scoate padding-ul de sus al PRIMULUI <li> dintr-o listă și pe cel
      de jos al ULTIMULUI. Primul card avea poza lipită de margine, ultimul
      butonul lipit de margine. `!important` fiindcă regula temei e
      generică și n-o putem întrece pe specificitate fără să ghicim selectorul.
   2. „Adaugă" poartă clasa `.button` (ca handlerul AJAX al WooCommerce să-l
      prindă), deci primea butonul NEGRU PLIN al temei: padding 9px 26px și
      line-height 24px într-o cutie de 34px — textul ieșea tăiat jos. E un
      upsell: pe contur, ca „Alege" de lângă el.
   3. Pe telefon grila punea câte un card pe toată lățimea, cu poze de ~290px.
      În coș asta însemna aproape 1.800px de derulare sub butonul de
      finalizare. Devine bandă orizontală, ca în sertar. */
.avatex-sc__recs--page .avatex-sc__recs-list > li.avatex-sc__rec {
    padding: 8px !important;
}

.avatex-sc__recs--page .avatex-sc__rec-img img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.avatex-sc__recs--page a.avatex-sc__rec-add.button,
.avatex-sc__recs--page .avatex-sc__rec-add {
    margin-top: auto;
    min-width: 0;
    height: 34px;
    padding: 0 10px !important;
    border: 1px solid #8f8f97 !important;
    border-radius: 6px;
    background: transparent !important;
    color: #1a1a1a !important;
    font-size: 11px !important;
    line-height: 32px !important;
    letter-spacing: 0.04em;
    box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .avatex-sc__recs--page a.avatex-sc__rec-add.button:hover,
    .avatex-sc__recs--page .avatex-sc__rec-add:hover {
        background: #1a1a1a !important;
        border-color: #1a1a1a !important;
        color: #fff !important;
    }
}

/* În coș, banda stă după două blocuri flotante ale temei (formularul 75% și
   totalurile 25%). Până acum le închidea „S-ar putea să te intereseze…" al
   temei, care are `clear`; de când acela nu se mai randează, banda trebuie să
   le închidă singură — altfel caseta ei gri se întinde sub coș și cardurile
   se înghesuie în dreapta totalurilor. */
.avatex-sc__recs--inline {
    clear: both;
}

/* Desktop: cardurile nu mai cresc peste 210px. Pe coș, la 1340px, patru
   coloane egale dădeau poze de 290px — mai mari decât produsele din coș. */
@media (min-width: 768px) {
    .avatex-sc__recs--page .avatex-sc__recs-list {
        grid-template-columns: repeat(auto-fill, minmax(150px, 210px));
    }
}

@media (max-width: 767px) {
    .avatex-sc__recs--page .avatex-sc__recs-list {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }

    .avatex-sc__recs--page .avatex-sc__recs-list > li.avatex-sc__rec {
        flex: 0 0 42%;
        scroll-snap-align: start;
    }
}

/* ── Pagina de produs: „Cumpără împreună" ─────────────────────────────────
   Altă formă decât în coș (vezi render_product_block): pe desktop arată ca
   „Produse similare" de dedesubt — titlu centrat, poze mari, fără chenar —,
   pe telefon devine listă. Clase proprii, deci nimic de mai sus nu se aplică.
   `!important` doar unde tema stilizează generic `button`, `.button` și `li`
   și n-o putem întrece pe specificitate fără să-i ghicim selectorul. */

.avatex-fbt {
    clear: both;
    margin: 56px 0 0;
    color: #202020;
}

.avatex-fbt + .woocommerce-tabs {
    margin-top: 48px;
}

.avatex-fbt__title {
    margin: 0 0 40px;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center;
    color: #202020;
}

/* Câte coloane sunt carduri, nu mai multe: cu trei produse, grila rămâne
   centrată în loc să lase o coloană goală în dreapta. */
.avatex-fbt__list {
    display: grid;
    grid-template-columns: repeat(var(--avatex-fbt-n, 4), minmax(0, 270px));
    justify-content: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.avatex-fbt .avatex-fbt__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0 !important;
    border: 0;
    background: none;
    list-style: none;
}

.avatex-fbt__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #f5f5f5;
    overflow: hidden;
}

.avatex-fbt__img,
.avatex-fbt__img img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

.avatex-fbt__img img {
    object-fit: cover;
}

.avatex-fbt__sale {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 6px 12px;
    background: #9b1c1f;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.avatex-fbt__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.1em;
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: 0.3px;
    text-align: center;
    text-decoration: none;
    color: #202020;
}

.avatex-fbt__name:hover {
    color: #000;
    text-decoration: underline;
}

.avatex-fbt__price {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: #202020;
}

.avatex-fbt__price del {
    margin-right: 10px;
    font-weight: 400;
    color: #767676;
}

.avatex-fbt__price ins {
    text-decoration: none;
}

.avatex-fbt__ship {
    align-self: center;
    font-size: 11px;
    font-weight: 600;
    color: #1a7f43;
}

/* Butoanele: pe contur, ca restul upsell-urilor; plin doar când apăsarea
   chiar pune ceva în coș. */
/* Bloc cu text centrat, nu flex: într-un flex textul și <span>-ul cu restul
   etichetei devin elemente separate, iar spațiul dintre ele se pierde sau se
   dublează. */
.avatex-fbt .avatex-fbt__btn {
    display: block !important;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 44px;
    margin: auto 0 0;
    padding: 0 12px !important;
    border: 1px solid #202020 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #202020 !important;
    box-shadow: none !important;
    font-family: inherit;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 42px !important;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.avatex-fbt__btn svg {
    vertical-align: -2px;
    margin-right: 4px;
}

.avatex-fbt .avatex-fbt__btn--add,
.avatex-fbt .avatex-fbt__btn.is-ready {
    background: #202020 !important;
    color: #fff !important;
}

.avatex-fbt .avatex-fbt__btn--incart {
    border-color: #1a7f43 !important;
    color: #1a7f43 !important;
}

@media (hover: hover) and (pointer: fine) {
    .avatex-fbt .avatex-fbt__btn:hover {
        background: #202020 !important;
        color: #fff !important;
    }

    .avatex-fbt .avatex-fbt__btn--add:hover,
    .avatex-fbt .avatex-fbt__btn.is-ready:hover {
        background: #000 !important;
    }

    .avatex-fbt .avatex-fbt__btn--incart:hover {
        background: #fff !important;
        color: #1a7f43 !important;
        text-decoration: underline;
    }
}

/* După adăugare cardul arată „În coș"; linkul „Vezi coșul" pe care îl pune
   WooCommerce după buton rupea rândul — scrisul cădea sub buton. */
.avatex-fbt .added_to_cart,
.avatex-fbt__item.is-added .avatex-fbt__btn--add,
.avatex-fbt__item.is-added .avatex-fbt__btn--choose {
    display: none !important;
}

/* Încărcarea: cercul care se rotește, în locul textului. Iconița temei
   are nevoie de fundalul ei alb, care pe butonul pe contur acoperea tot. */
.avatex-fbt .avatex-fbt__btn.loading,
.avatex-fbt .avatex-fbt__pick-add.loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.avatex-fbt .avatex-fbt__btn.loading::before,
.avatex-fbt .avatex-fbt__pick-add.loading::before {
    display: none !important;
}

.avatex-fbt .avatex-fbt__btn.loading::after,
.avatex-fbt .avatex-fbt__pick-add.loading::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 16px !important;
    height: 16px !important;
    margin: -8px 0 0 -8px !important;
    border: 2px solid #fff;
    border-right-color: transparent;
    border-radius: 50%;
    background: none !important;
    animation: avatex-fbt-spin 0.7s linear infinite !important;
}

.avatex-fbt .avatex-fbt__btn:not(.avatex-fbt__btn--add):not(.is-ready).loading::after {
    border-color: #202020;
    border-right-color: transparent;
}

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

/* Alegerea variantei. */
.avatex-fbt__pick {
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    background: #fff;
    text-align: left;
}

.avatex-fbt__pick-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.avatex-fbt__pick-head span,
.avatex-fbt__pick-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #202020;
}

.avatex-fbt__pick-label {
    margin-bottom: -4px;
    font-size: 11px;
    color: #6b6b70;
}

.avatex-fbt .avatex-fbt__pick-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 0;
    height: 32px;
    margin: -6px -8px -6px 0;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: #202020 !important;
    box-shadow: none !important;
    cursor: pointer;
}

/* Grilă cu auto-fit: două opțiuni iau câte o jumătate, șase se așază câte
   două sau trei pe rând, după cât e de lat cardul. Opțiunile lungi vin ca
   listă derulantă (vezi fbtAsSelect). */
.avatex-fbt__chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 8px;
}

.avatex-fbt .avatex-fbt__chip {
    width: auto !important;
    min-width: 0;
    min-height: 44px;
    height: auto;
    margin: 0;
    padding: 6px !important;
    border: 1px solid #cfcfcf !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #202020 !important;
    box-shadow: none !important;
    font-family: inherit;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.2 !important;
    letter-spacing: 0;
    text-transform: none !important;
    white-space: normal;
    cursor: pointer;
}

/* Bordura de 2px din conturul ales vine din umbră, ca opțiunile să nu sară. */
.avatex-fbt .avatex-fbt__chip[aria-pressed="true"] {
    border-color: #202020 !important;
    box-shadow: inset 0 0 0 1px #202020 !important;
    font-weight: 600;
}

.avatex-fbt .avatex-fbt__chip:disabled {
    background: #fafafa !important;
    color: #9a9a9a !important;
    text-decoration: line-through;
    cursor: not-allowed;
}

.avatex-fbt .avatex-fbt__select {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    height: 44px;
    margin: 0;
    padding: 0 34px 0 12px !important;
    border: 1px solid #cfcfcf !important;
    border-radius: 0 !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23202020' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center !important;
    color: #202020;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.avatex-fbt .avatex-fbt__pick-add {
    display: block !important;
    box-sizing: border-box;
    height: 50px;
    margin: 2px 0 0;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #202020 !important;
    color: #fff !important;
    box-shadow: none !important;
    font-family: inherit;
    font-size: 12.5px !important;
    font-weight: 600;
    line-height: 50px !important;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
}

.avatex-fbt .avatex-fbt__pick-add[aria-disabled="true"] {
    background: #a9a9ad !important;
    cursor: default;
}

@media (min-width: 768px) {
    /* Peste partea de jos a pozei: cardul nu-și schimbă înălțimea, deci
       rândul de carduri nu sare. Butonul cardului face adăugarea. */
    .avatex-fbt__media .avatex-fbt__pick {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 100%;
        overflow-y: auto;
        padding: 14px 16px 16px;
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.1);
    }

    .avatex-fbt .avatex-fbt__media .avatex-fbt__pick-add {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .avatex-fbt {
        margin-top: 40px;
    }

    .avatex-fbt + .woocommerce-tabs {
        margin-top: 32px;
    }

    .avatex-fbt__title {
        margin-bottom: 20px;
        font-size: 16px;
    }

    .avatex-fbt__list {
        display: block;
        border-top: 1px solid #ececec;
    }

    /* Rând: poza mică, numele și prețul, butonul în dreapta. Alegerea
       variantei se deschide dedesubt, pe toată lățimea. */
    .avatex-fbt .avatex-fbt__item {
        display: grid;
        grid-template-columns: 84px minmax(0, 1fr) 92px;
        grid-template-areas:
            "media name  btn"
            "media price btn"
            "media ship  btn"
            "pick  pick  pick";
        column-gap: 14px;
        row-gap: 0;
        align-items: center;
        padding: 14px 0 !important;
        border-bottom: 1px solid #ececec;
    }

    .avatex-fbt__media {
        grid-area: media;
        width: 84px;
        height: 84px;
    }

    .avatex-fbt__sale {
        display: none;
    }

    .avatex-fbt__name {
        grid-area: name;
        align-self: end;
        min-height: 0;
        font-size: 13px;
        line-height: 1.45;
        letter-spacing: 0;
        text-align: left;
    }

    .avatex-fbt__price {
        grid-area: price;
        align-self: start;
        margin-top: 6px;
        font-size: 13px;
        text-align: left;
    }

    .avatex-fbt__price del {
        margin-right: 6px;
    }

    .avatex-fbt__ship {
        grid-area: ship;
        align-self: start;
        margin-top: 4px;
        justify-self: start;
    }

    .avatex-fbt .avatex-fbt__btn {
        grid-area: btn;
        margin: 0;
        padding: 0 6px !important;
        font-size: 11.5px !important;
    }

    .avatex-fbt__long {
        display: none;
    }

    .avatex-fbt__item > .avatex-fbt__pick {
        grid-area: pick;
        margin-top: 14px;
        gap: 14px;
    }

    /* Rândul e mai lat decât cardul de pe desktop: cu 80px ieșeau patru
       opțiuni pe rând și „140x200cm" atingea marginea. */
    .avatex-fbt__chips {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    /* Pe telefon închiderea e butonul rândului („Închide"). */
    .avatex-fbt__item > .avatex-fbt__pick .avatex-fbt__pick-close {
        display: none;
    }
}