/* =====================================================================
   DISTRIDIV — site public
   CSS scris de mână. Fără framework, fără CDN, fără fonturi externe:
   totul se încarcă de pe serverul propriu, deci pagina e rapidă și nu
   depinde de nimeni.
   ===================================================================== */

:root {
    --fundal:        #ffffff;
    --fundal-alt:    #f5f6f8;
    --fundal-inchis: #16202c;
    --chenar:        #e3e6ea;
    --chenar-tare:   #c9cfd6;

    --text:          #16202c;
    --text-slab:     #5b6875;
    --text-invers:   #eef2f6;

    --accent:        #b4451f;   /* ruginiu — culoarea fierului prelucrat */
    --accent-inchis: #8f3517;
    --accent-slab:   #fdf1ec;

    --otel:          #2c4257;
    --otel-slab:     #eef2f6;

    --verde:         #1a7f4b;
    --verde-slab:    #e6f4ec;
    --gri:           #6b7683;
    --gri-slab:      #eef0f2;

    --raza:          6px;
    --umbra:         0 1px 2px rgba(20,32,44,.05), 0 3px 12px rgba(20,32,44,.05);
    --umbra-mare:    0 8px 32px rgba(20,32,44,.12);
    --container:     1180px;
}

* { box-sizing: border-box; }

/* Atributul `hidden` trebuie să câștige în fața oricărei reguli de display.
   Fără asta, un element cu clasa .buton rămâne vizibil deși e marcat
   ascuns — .buton declară display:inline-flex, care suprascrie regula
   implicită a browserului. */
[hidden] { display: none !important; }


html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fundal);
    color: var(--text);
    font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.22; letter-spacing: -.015em; margin: 0 0 .5rem; }
h1 { font-size: clamp(1.75rem, 4vw, 2.6rem); font-weight: 700; }
h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); font-weight: 680; }
h3 { font-size: 1.05rem; font-weight: 640; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }

.doar-cititor-ecran {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.salt-continut {
    position: absolute; left: -9999px; z-index: 100;
    background: var(--accent); color: #fff; padding: .7rem 1.1rem;
}
.salt-continut:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------- antet */
.antet-site {
    background: var(--fundal);
    border-bottom: 1px solid var(--chenar);
    position: sticky; top: 0; z-index: 50;
}
.antet-interior { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }

.marca { display: flex; align-items: center; gap: .65rem; color: var(--text); flex: 0 0 auto; }
.marca:hover { text-decoration: none; }
.marca-logo {
    width: 38px; height: 38px; border-radius: var(--raza);
    background: var(--accent); color: #fff;
    display: grid; place-items: center; font-weight: 800; font-size: 1.2rem;
}
.marca-text { display: flex; flex-direction: column; line-height: 1.2; }
.marca-text strong { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.marca-text small { font-size: .72rem; color: var(--text-slab); }

.navigatie-site { display: flex; align-items: center; gap: 1.15rem; margin-left: auto; }
.navigatie-site > a { color: var(--text); font-size: .93rem; font-weight: 550; }
.navigatie-site > a:hover { color: var(--accent); text-decoration: none; }
.navigatie-site > a[aria-current] { color: var(--accent); font-weight: 650; }

.cautare-antet { display: flex; align-items: stretch; }
.cautare-antet input {
    width: 190px; padding: .42rem .65rem; font: inherit; font-size: .88rem;
    border: 1px solid var(--chenar-tare); border-right: 0;
    border-radius: var(--raza) 0 0 var(--raza); background: var(--fundal-alt);
}
.cautare-antet input:focus { outline: none; border-color: var(--accent); background: #fff; }
.cautare-antet button {
    padding: 0 .7rem; border: 1px solid var(--chenar-tare); border-left: 0;
    border-radius: 0 var(--raza) var(--raza) 0;
    background: var(--fundal-alt); cursor: pointer; font-size: 1.1rem; color: var(--text-slab);
}
.cautare-antet button:hover { background: var(--chenar); }

.comuta-meniu { display: none; }
.buton-meniu { display: none; cursor: pointer; padding: .5rem; margin-left: auto; }
.buton-meniu span { display: block; width: 22px; height: 2px; background: var(--text); margin: 4px 0; }

/* ------------------------------------------------------------ butoane */
.buton {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .58rem 1.1rem; border-radius: var(--raza);
    font-size: .92rem; font-weight: 600; white-space: nowrap;
    border: 1px solid transparent; cursor: pointer; font-family: inherit;
    transition: background-color .12s ease, border-color .12s ease;
}
.buton:hover { text-decoration: none; }
.buton-principal { background: var(--accent); color: #fff; }
.buton-principal:hover { background: var(--accent-inchis); }
.buton-contur { border-color: var(--chenar-tare); color: var(--text); background: transparent; }
.buton-contur:hover { border-color: var(--text-slab); background: var(--fundal-alt); }
.buton-inchis { background: var(--otel); color: #fff; }
.buton-inchis:hover { background: #1e2f3f; }
.buton-mare { padding: .8rem 1.6rem; font-size: 1rem; }

/* ---------------------------------------------------------- firimituri */
.firimituri { background: var(--fundal-alt); border-bottom: 1px solid var(--chenar); font-size: .85rem; }
.firimituri ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: .6rem 0; }
.firimituri li + li::before { content: '›'; margin-right: .4rem; color: var(--text-slab); }
.firimituri a { color: var(--text-slab); }
.firimituri span { color: var(--text); font-weight: 550; }

/* --------------------------------------------------------------- hero */
.hero {
    background: linear-gradient(155deg, #1b2836 0%, #16202c 55%, #22150f 100%);
    color: var(--text-invers); padding: clamp(3rem, 7vw, 5.5rem) 0;
}
.hero-grila { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.hero h1 { color: #fff; margin-bottom: 1rem; }
.hero p.intro { font-size: 1.1rem; color: #c3ceda; max-width: 46ch; margin: 0 0 1.75rem; }
.hero-actiuni { display: flex; gap: .75rem; flex-wrap: wrap; }

.hero-statistici { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; }
.hero-statistici .cifra { font-size: 2rem; font-weight: 720; color: #fff; line-height: 1.1; }
.hero-statistici .eticheta { font-size: .85rem; color: #9dabb9; margin-top: .15rem; }

/* ------------------------------------------------------------ secțiuni */
.sectiune { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.sectiune-alt { background: var(--fundal-alt); }

.antet-sectiune { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.antet-sectiune p { color: var(--text-slab); margin: .25rem 0 0; max-width: 58ch; }
.antet-sectiune .legatura { margin-left: auto; font-weight: 600; font-size: .92rem; }

/* ---------------------------------------------------------- categorii */
.grila-categorii {
    display: grid; gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card-categorie {
    display: block; padding: 1.4rem; background: var(--fundal);
    border: 1px solid var(--chenar); border-radius: var(--raza);
    color: var(--text); transition: border-color .12s ease, box-shadow .12s ease;
}
.card-categorie:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--umbra); }
.card-categorie h3 { margin-bottom: .35rem; }
.card-categorie p { color: var(--text-slab); font-size: .9rem; margin: 0 0 .75rem; }
.card-categorie .numar { font-size: .82rem; color: var(--accent); font-weight: 650; }
.card-categorie ul { list-style: none; padding: 0; margin: .6rem 0 0; font-size: .85rem; }
.card-categorie ul li { color: var(--text-slab); padding: .12rem 0; }

/* ----------------------------------------------------------- produse */
.grila-produse {
    display: grid; gap: 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}
.card-produs {
    display: flex; flex-direction: column; background: var(--fundal);
    border: 1px solid var(--chenar); border-radius: var(--raza); overflow: hidden;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.card-produs:hover { border-color: var(--chenar-tare); box-shadow: var(--umbra); }
.card-produs .poza {
    aspect-ratio: 4 / 3; background: var(--fundal-alt);
    display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--chenar);
}
.card-produs .poza img { width: 100%; height: 100%; object-fit: cover; }
.card-produs .poza .fara-poza { color: var(--chenar-tare); font-size: 2.4rem; }
.card-produs .corp { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; }
.card-produs .categorie {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-slab); font-weight: 640; margin-bottom: .3rem;
}
.card-produs h3 { font-size: .97rem; margin-bottom: .4rem; }
.card-produs h3 a { color: var(--text); }
.card-produs h3 a:hover { color: var(--accent); text-decoration: none; }
.card-produs .descriere { font-size: .85rem; color: var(--text-slab); margin: 0 0 .8rem; flex: 1; }
/* Numele clasei este prefixat deliberat: un simplu `.subsol` s-ar ciocni
   cu subsolul paginii, care are fundal închis. */
.card-produs-subsol {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding-top: .7rem; border-top: 1px solid var(--chenar);
}

/* -------------------------------------------------------- indicatori */
.disponibilitate { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 620; }
.disponibilitate::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
.in-stoc { color: var(--verde); }
.in-stoc::before { background: var(--verde); }
.stoc-epuizat { color: var(--gri); }
.stoc-epuizat::before { background: var(--gri); }

.eticheta-um { font-size: .78rem; color: var(--text-slab); }

.nota-pret {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--otel-slab); color: var(--otel);
    padding: .3rem .6rem; border-radius: var(--raza); font-size: .82rem; font-weight: 580;
}

/* ------------------------------------------------------- fișă produs */
.produs-grila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.produs-grila > * { min-width: 0; }

/* Elementele de grilă trebuie să se poată micșora sub lățimea conținutului. */
.grila-produse > *, .grila-categorii > *, .grila-avantaje > * { min-width: 0; }
.produs-poza {
    background: var(--fundal-alt); border: 1px solid var(--chenar);
    border-radius: var(--raza); aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
}
.produs-poza img { width: 100%; height: 100%; object-fit: cover; }
.produs-poza .fara-poza { color: var(--chenar-tare); font-size: 4rem; }

.eticheta-categorie {
    display: inline-block; font-size: .8rem; text-transform: uppercase;
    letter-spacing: .04em; font-weight: 650; margin-bottom: .25rem;
}

.produs-titlu { margin-bottom: .35rem; }
.produs-meta { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.25rem; }
.cod-produs { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
              font-size: .85rem; color: var(--text-slab); }

.caseta-comanda {
    background: var(--fundal-alt); border: 1px solid var(--chenar);
    border-radius: var(--raza); padding: 1.25rem; margin: 1.5rem 0;
}
.caseta-comanda h2 { font-size: 1.05rem; margin-bottom: .4rem; }
.caseta-comanda p { color: var(--text-slab); font-size: .9rem; margin: 0 0 1rem; }
.caseta-comanda .actiuni { display: flex; gap: .6rem; flex-wrap: wrap; }

/* `table-layout: fixed` face ca lățimile declarate să fie respectate și
   conținutul să se rupă pe rânduri. Fără el, tabelul nu se poate micșora
   sub lățimea proprie de conținut și iese din ecran pe telefoane înguste. */
.tabel-specificatii { width: 100%; border-collapse: collapse; font-size: .9rem;
                      table-layout: fixed; }
.tabel-specificatii th, .tabel-specificatii td { overflow-wrap: anywhere; }
.tabel-specificatii th, .tabel-specificatii td { text-align: left; padding: .55rem .1rem; border-bottom: 1px solid var(--chenar); }
.tabel-specificatii th { color: var(--text-slab); font-weight: 550; width: 42%; }
.tabel-specificatii tr:last-child th, .tabel-specificatii tr:last-child td { border-bottom: none; }

/* ------------------------------------------------------------ filtre */
.bara-filtre {
    display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
    padding: 1rem 0; border-bottom: 1px solid var(--chenar); margin-bottom: 1.75rem;
}
.bara-filtre .rezultate { color: var(--text-slab); font-size: .9rem; }
.bara-filtre .grup-filtru { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

.pastila {
    display: inline-block; padding: .32rem .8rem; border-radius: 999px;
    border: 1px solid var(--chenar-tare); font-size: .86rem; color: var(--text); background: var(--fundal);
}
.pastila:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pastila.activa { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* ---------------------------------------------------------- paginare */
.paginare { display: flex; gap: .35rem; justify-content: center; margin-top: 2.5rem; flex-wrap: wrap; }
.paginare a, .paginare span {
    min-width: 38px; text-align: center; padding: .45rem .7rem;
    border: 1px solid var(--chenar); border-radius: var(--raza); font-size: .9rem;
    color: var(--text); background: var(--fundal);
}
.paginare a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.paginare .curent { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 650; }
.paginare .inactiv { color: var(--chenar-tare); }

/* ----------------------------------------------------------- formular */
.formular-oferta { max-width: 680px; }
.grup-camp { margin-bottom: 1.1rem; }
.grup-camp label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .3rem; }
.grup-camp .ajutor { font-size: .82rem; color: var(--text-slab); margin-top: .25rem; }

input, select, textarea { max-width: 100%; }

input[type=text], input[type=email], input[type=tel], input[type=search], textarea, select {
    width: 100%; padding: .62rem .75rem; font: inherit; font-size: .95rem;
    border: 1px solid var(--chenar-tare); border-radius: var(--raza);
    background: var(--fundal); color: var(--text);
}
input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-slab);
}
textarea { min-height: 120px; resize: vertical; }

input.eroare, textarea.eroare { border-color: #b3261e; }
.mesaj-eroare { color: #b3261e; font-size: .82rem; margin-top: .25rem; font-weight: 550; }

.doua-campuri { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

/* Câmpul-capcană: invizibil pentru oameni, completat de roboți. */
.capcana { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.alerta {
    padding: 1rem 1.15rem; border-radius: var(--raza); margin-bottom: 1.5rem;
    border: 1px solid transparent; font-size: .93rem;
}
.alerta-succes { background: var(--verde-slab); border-color: #bfe3ce; color: #15603a; }
.alerta-eroare { background: #fbeae9; border-color: #f2c7c4; color: #93211b; }

/* --------------------------------------------------------- avantaje */
.grila-avantaje { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.avantaj .pictograma {
    width: 40px; height: 40px; border-radius: var(--raza); background: var(--accent-slab);
    color: var(--accent); display: grid; place-items: center; font-size: 1.2rem; margin-bottom: .7rem;
}
.avantaj h3 { margin-bottom: .3rem; }
.avantaj p { color: var(--text-slab); font-size: .92rem; margin: 0; }

/* ------------------------------------------------------------- apel */
.apel-actiune {
    background: var(--otel); color: var(--text-invers);
    border-radius: var(--raza); padding: clamp(1.75rem, 4vw, 2.75rem);
    display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
}
.apel-actiune h2 { color: #fff; margin-bottom: .35rem; }
.apel-actiune p { color: #b9c6d2; margin: 0; max-width: 52ch; }
.apel-actiune .actiuni { margin-left: auto; display: flex; gap: .7rem; flex-wrap: wrap; }

/* ------------------------------------------------------------ subsol */
.subsol { background: var(--fundal-inchis); color: #a9b6c3; padding: 3rem 0 1.5rem; margin-top: 4rem; }
.subsol-grila { display: grid; gap: 2rem; grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.subsol h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #fff; margin-bottom: .8rem; }
.subsol ul { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.subsol li { padding: .22rem 0; }
.subsol a { color: #a9b6c3; }
.subsol a:hover { color: #fff; }
.subsol .marca-text strong { color: #fff; }
.subsol-text { font-size: .9rem; max-width: 42ch; margin: .8rem 0 0; }
.subsol-jos {
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #2a3846;
    font-size: .82rem; color: #7d8b99;
}

/* --------------------------------------------------------------- gol */
.stare-goala { text-align: center; padding: 4rem 1rem; }
.stare-goala .pictograma-mare { font-size: 2.5rem; opacity: .35; display: block; margin-bottom: .75rem; }
.stare-goala h2 { margin-bottom: .4rem; }
.stare-goala p { color: var(--text-slab); max-width: 46ch; margin: 0 auto 1.5rem; }


/* Ecrane tactile: ținte de atingere suficient de mari (vezi comentariul
   din panou). Pe site sunt mai ales titlurile de produs din grilă și
   linkurile „vezi tot". */
@media (pointer: coarse) {
    .card-produs h3 a,
    .antet-sectiune .legatura,
    .firimituri a,
    .subsol li a,
    .navigatie-site > a,
    .eticheta-categorie {
        display: inline-block;
        padding-block: .4rem;
    }

    .pastila { padding-block: .5rem; }
}

/* -------------------------------------------------------- responsive */
@media (max-width: 960px) {
    .hero-grila { grid-template-columns: 1fr; gap: 2rem; }
    /* `1fr` simplu ar reintroduce limita de lățime minimă a conținutului;
       `minmax(0, 1fr)` permite coloanei să se micșoreze. */
    .produs-grila { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
    .subsol-grila { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 780px) {
    .buton-meniu { display: block; }

    .navigatie-site {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        background: var(--fundal); border-bottom: 1px solid var(--chenar);
        flex-direction: column; align-items: stretch; gap: .25rem; padding: 1rem 20px 1.25rem;
        box-shadow: var(--umbra-mare);
    }
    .comuta-meniu:checked ~ .navigatie-site { display: flex; }
    .navigatie-site > a { padding: .55rem 0; border-bottom: 1px solid var(--chenar); }
    .cautare-antet { margin: .6rem 0; }
    .cautare-antet input { width: 100%; }
    .navigatie-site .buton { width: 100%; }

    .doua-campuri { grid-template-columns: 1fr; }
    .apel-actiune .actiuni { margin-left: 0; width: 100%; }
    .hero-statistici { grid-template-columns: 1fr 1fr; }
}

/* Pe ecrane foarte înguste, un buton cu text lung („Solicită ofertă pentru
   acest produs") nu mai încape pe un rând. `nowrap` l-ar face să împingă
   containerul în afara ecranului. */
@media (max-width: 400px) {
    .buton { white-space: normal; text-align: center; }
}

@media (max-width: 520px) {
    .subsol-grila { grid-template-columns: 1fr; }
    .grila-produse { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; }
    .card-produs .corp { padding: .7rem .8rem .8rem; }
}

@media print {
    .antet-site, .subsol, .firimituri, .caseta-comanda, .apel-actiune { display: none; }
}

/* Căi și comenzi scrise în text: fără asta, un `/home/user/.../backups`
   nu se rupe nicăieri și împinge toată pagina în derulare laterală. */
code, kbd, samp, .mono {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ============================================================ tabele stivuite
   Pe telefon, un tabel cu șase coloane nu se poate citi oricât l-ai îngusta:
   ori derulezi lateral ca să afli totalul, ori numele produsului se rupe pe
   trei rânduri. Sub 1024px fiecare rând devine un card, iar fiecare celulă
   își scrie singură eticheta din `data-eticheta`.

   Celulele marcate `data-eticheta=""` dispar: sunt coloane care nu merită
   spațiu într-un card (o poză lipsă, o coloană de butoane fără titlu). */
@media (max-width: 1024px) {
    .tabel-invelis:has(.tabel-stivuit) { overflow-x: visible; }

    .tabel-stivuit thead { display: none; }

    .tabel-stivuit,
    .tabel-stivuit tbody,
    .tabel-stivuit tr,
    .tabel-stivuit td { display: block; width: auto; }

    /* Coloana flex, ca `order` de mai jos sa poata muta titlul sus.
       Ordinea coloanelor din tabel nu e ordinea potrivita intr-un card: la
       miscarile de stoc prima coloana e data, iar cardul incepea cu data in
       loc de numele produsului. */
    .tabel-stivuit tr {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--chenar);
        border-radius: var(--raza);
        margin: 0 0 .7rem;
        padding: .7rem .85rem;
        background: var(--suprafata, #fff);
    }
    .tabel-stivuit tbody tr:hover { background: var(--suprafata, #fff); }
    .tabel-stivuit tbody tr:last-child { margin-bottom: 0; }

    .tabel-stivuit td {
        border: none;
        padding: .2rem 0;
        display: flex;
        align-items: baseline;
        gap: .25rem .75rem;
        text-align: left;

        /* Trei trepte, în ordinea asta: valoarea stă lângă etichetă cât
           timp încape; dacă nu, `flex-wrap` o trimite pe rândul următor, pe
           toată lățimea; abia dacă nici acolo nu încape (un e-mail lung),
           `break-word` o rupe. Fără prima treaptă, `overflow-wrap: anywhere`
           tăia „CMD-2026-000268" pe verticală, literă cu literă. */
        flex-wrap: wrap;
        overflow-wrap: break-word;
        min-width: 0;
    }
    .tabel-stivuit tbody tr:last-child td { border-bottom: none; }

    .tabel-stivuit td::before {
        content: attr(data-eticheta);
        flex: 0 0 40%;
        max-width: 40%;
        color: var(--text-foarte-slab, var(--text-slab));
        font-size: .74rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        font-weight: 650;
    }
    .tabel-stivuit td:not([data-eticheta])::before { display: none; }

    /* `!important` pentru că `.tabel-stivuit td { display: block }` de mai
       sus are specificitate mai mare și le-ar readuce în pagină. */
    .tabel-stivuit td[data-eticheta=""] { display: none !important; }

    .tabel-stivuit td.num { text-align: left; justify-content: flex-start; }
    .tabel-stivuit td.strans { width: auto; }

    /* Prima celulă e titlul cardului: fără etichetă, mai mare, cu o linie sub. */
    .tabel-stivuit td.celula-titlu {
        display: block;
        font-size: 1rem;
        padding-bottom: .45rem;
        margin-bottom: .35rem;
        border-bottom: 1px solid var(--chenar);
    }
    .tabel-stivuit td.celula-titlu::before { display: none; }
    .tabel-stivuit td.celula-titlu { order: -1; }

    /* Acțiunile ajung jos, pe toată lățimea cardului. */
    .tabel-stivuit td.celula-actiuni {
        display: block;
        margin-top: .55rem;
        padding-top: .55rem;
        border-top: 1px solid var(--chenar);
    }
    .tabel-stivuit td.celula-actiuni::before { display: none; }
    .tabel-stivuit td.celula-actiuni { order: 1; }
    .tabel-stivuit td.celula-actiuni .buton { flex: 1 1 0; justify-content: center; }
}

@media (max-width: 700px) {
    .tabel-stivuit td.col-optionala { display: none !important; }
}

/* Pe tabletă cardurile stau două pe rând. Unul pe toată lățimea unui ecran
   de 1024px ar irosi jumătate din spațiu, iar tabelul clasic tot n-ar
   încăpea. Așa nu se ascunde nicio coloană și nu se derulează nimic lateral. */
@media (min-width: 701px) and (max-width: 1024px) {
    .tabel-stivuit tbody {
        display: grid;
        /* `auto-fit` cu un minim real, nu `1fr 1fr`: aceleași tabele apar și
           în coloana îngustă a panoului, unde două carduri ar avea 170px
           fiecare și ar ieși din chenar. Sub 280px se revine la o coloană. */
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: .7rem;
        align-items: start;
    }
    .tabel-stivuit tr { margin: 0; height: 100%; }
    .tabel-stivuit td::before { flex-basis: 45%; max-width: 45%; }
}