/**
 * Linia de specificații și rândul de reasigurare.
 *
 * Amândouă sunt informație secundară: griul rece al temei, dimensiuni mici,
 * fără chenare. Nu concurează cu prețul și cu butonul.
 */
.avatex-spec {
    margin: 2px 0 8px;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b6b70;
}

.avatex-reassure {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: 11px;
    line-height: 1.4;
    color: #6b6b70;
}

/*
 * Elementul are clasă proprie dinadins.
 *
 * Tema impune `list-style: disc` și `display: list-item` pe `li`-urile din
 * sumar, cu o specificitate mai mare decât `.avatex-reassure li`. Rezultatul,
 * văzut în browser: bulina temei ȘI punctul nostru, unul lângă altul, plus un
 * padding de 13px care rupea rândul. Cu clasă pe element ajungem la 0,2,0 și
 * câștigăm fără `!important`.
 */
.avatex-reassure .avatex-reassure__item {
    display: inline-flex;
    align-items: center;
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0 0 0 12px;
    background: none;
}

.avatex-reassure .avatex-reassure__item::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: 4px;
    height: 4px;
    margin-top: -2px;
    border-radius: 50%;
    background: #b6b6bd;
}

.avatex-reassure .avatex-reassure__item::marker {
    content: "";
}

/* Pe telefon, un singur rând. Cele trei bucăți aveau nevoie de 380px, iar
   coloana are 346px pe un telefon de 390px și 316px pe unul de 360px, deci
   „Retur în 30 de zile" cădea pe al doilea rând. Fără spațierea literelor
   moștenită din temă, cu spații și font puțin mai mici, încap: 331px, apoi
   305px sub 375px. Fără căsuțe și fără fundal: rândul rămâne discret. */
@media (max-width: 767px) {
    .avatex-reassure {
        gap: 4px 9px;
        font-size: 10.5px;
        letter-spacing: 0;
    }

    .avatex-reassure .avatex-reassure__item {
        padding-left: 9px;
        white-space: nowrap;
    }

    .avatex-reassure .avatex-reassure__item::before {
        left: 1px;
    }
}

@media (max-width: 374px) {
    .avatex-reassure {
        gap: 4px 8px;
        font-size: 10px;
    }

    .avatex-reassure .avatex-reassure__item {
        padding-left: 8px;
    }
}

/* ─────────────────────────────────────────────────────────
   Rândul de preț
   ─────────────────────────────────────────────────────────
   Suma de plată mare și neagră, suma veche tăiată și mică,
   procentul pe cărămiziul reducerii din temă. Trei lucruri,
   un rând, citite în ordinea în care contează. */

.avatex-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
    font-variant-numeric: tabular-nums;
}

.avatex-price__now {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #1a1a1a;
}

.avatex-price__was {
    font-size: 13px;
    font-weight: 400;
    color: #6b6b70;
}

/* Cărămiziul temei pe alb face 7,3:1 — text alb pe el, 6,1:1. */
.avatex-price__off {
    padding: 4px 7px;
    background: #9e0b0f;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
}

/* Prețurile pe care le înlocuiește: cel al WooCommerce și blocul de variație
   al temei. Se sting doar pe paginile unde rândul nostru chiar se randează —
   clasa vine din PHP, deci un produs fără rând își păstrează prețul temei. */
/* `.woocommerce` stă pe <body>, nu pe un div dinăuntru: un selector
   `.avatex-has-price-row .woocommerce …` cere un descendent și nu prinde
   niciodată. Verificat în browser — blocul temei rămăsese vizibil. */
.avatex-has-price-row div.product .summary > p.price,
.avatex-has-price-row div.product .summary > .ts-variation-price,
.avatex-has-price-row div.product .summary > .yoox-price-block {
    display: none;
}

/* Blocul de stele al temei, de deasupra titlului: rândul nostru de notă îl
   conține acum întreg (stele, notă, număr de recenzii). */
.avatex-has-rating-line div.product .summary > .woocommerce-product-rating {
    display: none;
}

/* Descrierea scurtă a câtorva produse (5 din 189) are un
   `style="text-align: justify"` în text. Pe o coloană de 350px asta face
   „râuri" de spații între cuvinte. Stilul e scris în conținut, deci numai
   `!important` îl bate — pe un selector îngust și doar pe telefon. */
@media (max-width: 767px) {
    .woocommerce-product-details__short-description [style*="justify"] {
        text-align: left !important;
    }
}

/* Desktop: butonul crește după etichetă. Tema îl fixează la 250px
   (`.summary > form.cart .button`, 0,5,2), gândit pentru „Adaugă în coș"
   simplu. Cu prețul în etichetă („ADAUGĂ ÎN COȘ — 355,00 LEI") textul se
   rupea pe trei rânduri, într-un buton de 90px. `width: auto` pe un element
   flotant înseamnă „cât conținutul, dar nu mai lat decât coloana" — deci
   rămâne pe un rând cât are loc și se rupe doar dacă coloana chiar e prea
   îngustă. 250px rămâne minimul, ca „Alege opțiunile" să nu se strângă. */
@media (min-width: 768px) {
    .woocommerce div.product .summary > form.cart .single_add_to_cart_button.button {
        width: auto;
        min-width: 250px;
        max-width: 100%;
        padding-left: 28px;
        padding-right: 28px;
    }
}