/**
 * Eticheta de preț din butoanele de variație ale temei.
 *
 * Doar atât: o linie mică sub textul opțiunii. Nu se atinge nici fundalul,
 * nici chenarul, nici starea `selected` — alea rămân ale temei, ca la un
 * update să nu se bată două foi pe același element.
 */
.ts-product-attribute .option > a {
    /* Tema pune textul opțiunii direct în link; eticheta intră sub el. */
    display: block;
    line-height: 1.25;
}

.avatex-opt-price {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    color: #6b6b70;          /* griul rece al temei — 4,8:1 pe alb */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Pe opțiunea aleasă, prețul nu mai e o informație secundară: e prețul pe
   care îl plătește. Primește cerneala, nu griul. */
.ts-product-attribute .option.selected .avatex-opt-price {
    color: #1a1a1a;
    font-weight: 600;
}

/* Pastilele de culoare nu au text, deci nici loc pentru preț — acolo eticheta
   ar acoperi exact ce trebuie să se vadă. */
.ts-product-attribute .option.color .avatex-opt-price {
    display: none;
}

/* ─────────────────────────────────────────────────────────
   Plăcuțele
   ─────────────────────────────────────────────────────────
   Prima versiune a lăsat forma temei — un rând de cerculețe
   de radio cu prețul dedesubt — și a adăugat doar eticheta.
   Pusă lângă mockup, diferența era tot ecranul: acolo fiecare
   opțiune e o plăcuță cu chenar, cu numele pe primul rând și
   prețul pe al doilea, iar aleasa se vede dintr-o privire.
   Pe 390px asta contează dublu: o plăcuță e o țintă de atins
   cu degetul, un cerculeț de 14px nu e.

   Clasa `avatex-chips` o pune JS-ul, doar când grupul chiar
   are butoane text. Fără ea nu se schimbă nimic — pastilele
   de culoare și materialele rămân ale temei.

   Specificitatea: tema desenează cerculețul cu
   `.ts-product-attribute > div.option:not(.color) a:before`
   (0,3,2). Clasa în plus urcă selectorul la (0,4,2) și îl
   bate curat, fără `!important`. */

.ts-product-attribute.avatex-chips {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1.2;
}

.ts-product-attribute.avatex-chips > div.option {
    margin: 0;
    display: flex;
    line-height: 1.2;
}

.ts-product-attribute.avatex-chips > div.option:not(.color) > a {
    display: block;
    flex: 1 1 auto;
    min-width: 84px;
    padding: 8px 10px;
    border: 1px solid #e4e4e8;
    border-radius: 5px;
    background: #fff;
    color: #1a1a1a;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

/* Cerculețul de radio al temei dispare: plăcuța însăși e starea. */
.ts-product-attribute.avatex-chips > div.option:not(.color) > a:before,
.ts-product-attribute.avatex-chips > div.option:not(.color).selected > a:after {
    content: none;
}

.ts-product-attribute.avatex-chips > div.option:not(.color) > a:hover {
    border-color: #b6b6bf;
}

/* Aleasa: chenar de cerneală dublat pe dinăuntru, ca să pară gros de 2px
   fără să miște plăcuța cu un pixel. Fundalul intră pe griul rece al temei. */
.ts-product-attribute.avatex-chips > div.option:not(.color).selected > a {
    border-color: #1a1a1a;
    box-shadow: inset 0 0 0 1px #1a1a1a;
    background: #f7f7f9;
}

.ts-product-attribute.avatex-chips .avatex-opt-price {
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 400;
}

/* Eticheta atributului devine supratitlu: mic, majuscule, spațiat — ca
   „DIMENSIUNE" să se citească drept categorie, nu drept încă un rând de text. */
.woocommerce div.product .variations .attribute > .label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
}

.woocommerce div.product .variations .attribute > .label label {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #1a1a1a;
}

/* „Șterge" al temei: util, dar nu e o acțiune principală. Scade la mărimea
   unei note și iese din roșu, ca să nu concureze cu butonul de comandă. */
/* Selectorul e lung fiindcă trebuie să câștige: tema scrie
   `.woocommerce div.product form.cart .reset_variations` (0,4,2) și se
   încarcă după noi, deci la egalitate rămânea roșu. Aici (0,4,4). */
body.woocommerce div.product form.variations_form a.reset_variations {
    font-size: 11px;
    color: #6b6b70;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Plăcuțele de elastic pe două rânduri (v1.40.14), ca cele de dimensiune:
   numele sus, detaliul gri dedesubt. */
.ts-product-attribute.avatex-chips .avatex-chip-name,
.ts-product-attribute.avatex-chips .avatex-chip-sub {
    display: block;
}

.ts-product-attribute.avatex-chips .avatex-chip-sub {
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 400;
    color: #6b6b70;
    white-space: nowrap;
}

.ts-product-attribute.avatex-chips .avatex-chip-sub[hidden] {
    display: none;
}

.ts-product-attribute.avatex-chips .option.selected .avatex-chip-sub {
    color: #1a1a1a;
    font-weight: 600;
}

/* Alegerea fără fundături (v1.40.14). Dimensiunile rămân mereu vizibile și
   apăsabile, deci nu mai există o stare din care să ieși doar cu „Șterge" —
   un link care oricum nu spunea ce face. */
form.variations_form.avatex-no-dead-ends .reset_variations {
    display: none !important;
}

/* „Alege cearșaful pentru Dublă": apare doar când omul alesese un elastic
   care nu există la noua dimensiune. Cărămiziul temei, 8:1 pe alb. */
.avatex-need-choice {
    margin: -2px 0 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: #9e0b0f;
}

/* Fără „Șterge" dispare și spațiul pe care îl ocupa între plăcuțe și buton. */
form.variations_form.avatex-no-dead-ends .woocommerce-variation-add-to-cart {
    margin-top: 16px;
}

/* Butonul inactiv („Alege cearșaful") spune ce lipsește, deci trebuie să se
   citească: griul temei pentru butoane inactive dădea 3,3:1 cu textul alb.
   #6b6b70 dă 5,3:1. */
form.variations_form.avatex-no-dead-ends .single_add_to_cart_button.disabled {
    background-color: #6b6b70 !important;
    opacity: 1;
}