/*
Theme Name: Papetăria Milan
Theme URI: https://papetariamilan.ro
Description: Temă-copil pentru Blocksy, folosită de magazinul Papetăria Milan. Tot ce este specific magazinului stă aici, ca actualizările temei părinte să nu șteargă nimic.
Author: Papetăria Milan
Template: blocksy
Version: 1.1.0
Requires PHP: 8.1
Text Domain: papetaria-milan
*/

/* ==========================================================================
   Culorile mărcii

   Luate direct din logo, cu pipeta, nu alese din ochi. Stau aici și nu în
   panoul Blocksy pentru că fișierul acesta e în git: se vede cine a schimbat
   o culoare și când. O valoare salvată în baza de date nu lasă nicio urmă.
   ========================================================================== */

:root {
    --milan-cyan:     #04A7E6;   /* culoarea de acțiune: butoane, linkuri */
    --milan-bleumarin:#091C37;   /* titluri și text tare */
    --milan-magenta:  #EB1378;   /* accent, folosit cu măsură: reduceri, insigne */
    --milan-galben:   #FCC80B;   /* accent secundar, atenționări blânde */

    --milan-cyan-inchis:   #0389BC;
    --milan-bleumarin-cald:#12294B;
    --milan-text:          #47536B;
    --milan-margine:       #E3E8EF;
    --milan-fundal-blând:  #F5F8FB;

    /* Blocksy nu inventează culori: le ia pe toate din aceste opt variabile.
       Rolul fiecăreia NU e evident din numărul ei — l-am citit în CSS-ul pe
       care tema îl generează, în `uploads/blocksy/css/global.css`:

         1  accent: linkuri, butoane
         2  accent la trecerea cu mouse-ul
         3  textul de rând      (--theme-text-color)
         4  titlurile           (--theme-headings-color)
         5  liniile de contur   (--theme-border-color)
         6  fundal blând: subsolul, banda cu titlul paginii
         7  fundalul paginii
         8  SUPRAFEȚE: fundalul antetului și al cardurilor

       Culoarea 8 e capcana. Am pus în ea întâi magenta, apoi bleumarin, și de
       fiecare dată antetul s-a colorat, iar logo-ul bleumarin a devenit
       invizibil pe el. Este slotul pentru suprafețe și trebuie să rămână alb;
       culorile mărcii se aplică punctual, cu variabilele --milan-*. */
    --theme-palette-color-1: var(--milan-cyan);
    --theme-palette-color-2: var(--milan-cyan-inchis);
    --theme-palette-color-3: var(--milan-text);
    --theme-palette-color-4: var(--milan-bleumarin);
    --theme-palette-color-5: var(--milan-margine);
    --theme-palette-color-6: var(--milan-fundal-blând);
    --theme-palette-color-7: #FFFFFF;
    --theme-palette-color-8: #FFFFFF;

    --theme-link-initial-color: var(--milan-cyan);
    --theme-link-hover-color:   var(--milan-cyan-inchis);
    --theme-headings-color:     var(--milan-bleumarin);
}

/* ==========================================================================
   Lista de produse
   ========================================================================== */

/* Categoriile de sub fiecare produs arătau toate cele trei niveluri, cu
   majuscule: „ACCESORII MODELAJ, ACCESORII MODELAJ-DEBOSOARE SET 6 DACO AA002,
   ARTE PLASTICE". Trei rânduri de zgomot deasupra informației care contează.
   Categoria se vede oricum în firimiturile de navigare și în filtrul din
   stânga, deci pe card o scoatem.

   Blocksy nu folosește clasa WooCommerce `woocommerce-loop-product__category`,
   ci propria listă `.entry-meta`. Selectorul e ancorat în `ul.products`, ca să
   nu ascundem din greșeală data și autorul de pe articolele de blog. */
ul.products .entry-meta,
ul.products li.meta-categories {
    display: none;
}

/* Titlul produsului are nevoie de spațiu: denumirile de papetărie sunt lungi
   („Pânză de pictură pe șasiu 40 x 40 cm DACO PZ4040") și se rup urât dacă
   sunt înghesuite. */
.woocommerce-loop-product__title {
    font-size: 0.95rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--milan-bleumarin);
}

.price,
.woocommerce-Price-amount {
    color: var(--milan-bleumarin);
    font-weight: 700;
}

/* Produsul epuizat trebuie să se vadă din listă, nu abia în pagina lui. */
.outofstock .woocommerce-loop-product__title::after {
    content: " · stoc epuizat";
    color: var(--milan-magenta);
    font-weight: 600;
    font-size: 0.8em;
}

/* ==========================================================================
   Accesibilitate
   ========================================================================== */

/* Conturul de focalizare vine de la culoarea mărcii și rămâne vizibil.
   Cine navighează cu tastatura trebuie să vadă unde se află; e și cerință
   de accesibilitate, nu doar o amabilitate. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
    outline: 3px solid var(--milan-cyan);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Cine a cerut mai puțină mișcare din setările sistemului o primește. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================================
   Antetul
   ========================================================================== */

/* Logo-ul conține deja, scris mare, numele magazinului. Titlul text de sub el
   îl repetă a doua oară, ceea ce înghesuie antetul degeaba. Numele rămâne în
   <title>, în datele structurate Organization și în alt-textul logo-ului, deci
   nu se pierde nimic nici pentru cititoarele de ecran, nici pentru Google. */
.site-branding .site-title-container {
    display: none;
}

/* Coșul, în banda de sus */
.pm-bara-sus-dreapta .pm-cos {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pm-cos-pictograma {
    font-size: 1.15em;
    line-height: 1;
}

.pm-cos-numar {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--milan-margine);
    color: var(--milan-text);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* Coșul plin se vede dintr-o privire, fără să numeri. */
.pm-cos-numar.are-produse {
    background: var(--milan-magenta);
    color: #fff;
}

/* ==========================================================================
   Bara fixă de jos, pe telefon
   ========================================================================== */

.pm-bara-mobil {
    display: none;
}

@media (max-width: 999px) {
    .pm-bara-mobil {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        position: fixed;
        inset: auto 0 0 0;
        z-index: 999;
        background: #fff;
        border-top: 1px solid var(--milan-margine);
        /* pe iPhone, zona de sub bară e ocupată de indicatorul de gesturi */
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-shadow: 0 -2px 12px rgba(9, 28, 55, 0.08);
    }

    .pm-bara-mobil a {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        /* 56px înălțime: sub atât, ținta devine greu de nimerit cu degetul */
        min-height: 56px;
        padding: 8px 4px;
        font-size: 0.68rem;
        font-weight: 600;
        color: var(--milan-bleumarin);
        text-decoration: none;
    }

    .pm-bara-mobil a span[aria-hidden] {
        font-size: 1.25rem;
        line-height: 1;
    }

    .pm-bara-numar {
        position: absolute;
        top: 4px;
        right: calc(50% - 22px);
        min-width: 18px;
        height: 18px;
        border-radius: 9px;
        background: var(--milan-margine);
        color: var(--milan-text);
        font-size: 0.65rem;
        line-height: 18px;
        text-align: center;
    }

    .pm-bara-numar.are-produse {
        background: var(--milan-magenta);
        color: #fff;
    }

    /* Bara acoperă ultimele rânduri de conținut dacă nu facem loc sub ele. */
    body {
        padding-bottom: 62px;
    }
}


/* ==========================================================================
   Corecții de așezare
   ========================================================================== */

/* Antetul își ia fundalul din culoarea 8 a paletei, setată mai sus la alb.
   Aici rămâne doar linia de sub el, ca antetul să se desprindă de conținut
   când pagina e derulată. */
[data-header*="type-1"] .ct-header [data-row*="middle"] {
    border-bottom: 1px solid var(--milan-margine);
}

/* Două produse pe rând pe telefon. Cu unul singur, un raft de 24 de produse
   înseamnă un ecran și jumătate de derulare per produs - clientul renunță
   înainte să vadă a treia opțiune. */
@media (max-width: 689px) {
    ul.products,
    ul.products[data-products] {
        --grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    ul.products .woocommerce-loop-product__title {
        font-size: 0.82rem;
    }

    /* Titlul paginii ocupa aproape un ecran intreg pe telefon, inaintea
       primului produs. Blocksy il marcheaza cu data-type="type-2". */
    .hero-section[data-type="type-2"] {
        padding-block: 18px;
    }

    .hero-section .page-title {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   Pagina principală
   ========================================================================== */

/* Secțiunea de deschidere. Fără imagine de fundal: n-avem încă fotografii
   proprii, iar o poză de stoc cu rechizite se vede de la o poștă că e cumpărată
   și scade încrederea în loc s-o crească. Culoare, tipografie și un mesaj clar
   fac treaba mai bine. */
.pm-erou {
    margin-block: 0 clamp(28px, 5vw, 48px);
    padding: clamp(36px, 7vw, 76px) clamp(20px, 4vw, 48px);
    border-radius: 18px;
    background:
        radial-gradient(120% 140% at 8% 0%, rgba(4, 167, 230, 0.13) 0%, rgba(4, 167, 230, 0) 58%),
        radial-gradient(90% 120% at 100% 10%, rgba(235, 19, 120, 0.10) 0%, rgba(235, 19, 120, 0) 60%),
        var(--milan-fundal-blând);
}

.pm-erou-titlu {
    max-width: 16ch;
    margin: 0 0 14px;
    font-size: clamp(1.9rem, 5vw, 3.1rem);
    line-height: 1.1;
    color: var(--milan-bleumarin);
}

.pm-erou-text {
    max-width: 46ch;
    margin: 0 0 26px;
    font-size: clamp(1rem, 2vw, 1.16rem);
    color: var(--milan-text);
}

.pm-erou .wp-block-buttons {
    gap: 12px;
}

.pm-buton-principal .wp-block-button__link {
    background-color: var(--milan-cyan);
    color: #fff;
    font-weight: 600;
    padding: 14px 26px;
    border-radius: 8px;
}

.pm-buton-principal .wp-block-button__link:hover {
    background-color: var(--milan-cyan-inchis);
}

/* Titlurile de secțiune primesc o linie scurtă colorată dedesubt: împarte
   pagina în etaje fără să adauge chenare. */
.pm-sectiune {
    margin-block: clamp(34px, 6vw, 56px) 22px;
    color: var(--milan-bleumarin);
}

.pm-sectiune::after {
    content: "";
    display: block;
    width: 54px;
    height: 4px;
    margin: 12px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--milan-cyan), var(--milan-magenta));
}

/* Plăcile de categorie */
.pm-placi {
    gap: 16px;
    flex-wrap: wrap;
}

.pm-placa {
    padding: 22px 20px;
    border: 1px solid var(--milan-margine);
    border-radius: 14px;
    background: #fff;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.pm-placa:hover {
    transform: translateY(-3px);
    border-color: var(--milan-cyan);
    box-shadow: 0 10px 24px -12px rgba(9, 28, 55, 0.28);
}

.pm-placa-ico {
    margin: 0 0 10px;
    font-size: 1.9rem;
    line-height: 1;
}

.pm-placa h3 {
    margin: 0 0 8px;
    line-height: 1.25;
}

.pm-placa h3 a {
    color: var(--milan-bleumarin);
    text-decoration: none;
}

.pm-placa:hover h3 a {
    color: var(--milan-cyan);
}

.pm-placa p:last-child {
    margin: 0;
    color: var(--milan-text);
}

/* Banda cu motivele de încredere */
.pm-avantaje {
    margin-block: clamp(34px, 6vw, 56px) 0;
    padding: clamp(24px, 4vw, 36px);
    border-radius: 16px;
    background: var(--milan-fundal-blând);
}

.pm-avantaje p {
    margin: 0;
    color: var(--milan-text);
    line-height: 1.55;
}

.pm-avantaje strong {
    display: block;
    margin-bottom: 4px;
    color: var(--milan-bleumarin);
}

/* Pe telefon coloanele Gutenberg stau una sub alta; plăcile de categorie merg
   totuși două pe rând, altfel lista devine un turn de derulat. */
@media (max-width: 781px) {
    .pm-placi.wp-block-columns {
        flex-direction: row;
    }

    .pm-placi > .wp-block-column {
        flex-basis: calc(50% - 8px) !important;
    }
}

/* ==========================================================================
   Subsolul
   ========================================================================== */

.pm-fara-titlu-pagina .hero-section {
    display: none;
}

.pm-subsol {
    padding: clamp(30px, 5vw, 52px) 0 22px;
    background: var(--milan-bleumarin);
    color: #C9D3E4;
    font-size: 0.9rem;
    line-height: 1.65;
}

.pm-subsol-grila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 28px;
}

.pm-subsol-titlu {
    margin: 0 0 10px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.pm-subsol p {
    margin: 0 0 8px;
}

.pm-subsol ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pm-subsol li {
    margin-bottom: 6px;
}

.pm-subsol a {
    color: #C9D3E4;
    text-decoration: none;
}

.pm-subsol a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Banda de sigile din subsol: ANPC (obligatoriu) și Netopia (cerit de contract). */
.pm-subsol-anpc {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.pm-subsol-sigile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

/* Wrapper pentru logo-ul oficial Netopia (embed script npId.js).
   Scriptul injectează un <a><img> direct în acest div. */
.pm-netopia-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
}

.pm-netopia-wrap a {
    display: block;
    line-height: 0;
}

.pm-netopia-wrap img {
    height: 60px;
    width: auto;
    display: block;
}

/* Badge-urile ANPC — stilizate conform imaginilor oficiale furnizate de ANPC.
   Fundal alb cu bordură bleumarin. */
.pm-sigla-anpc {
    display: inline-flex;
    align-items: stretch;
    text-decoration: none !important;
    border: 2px solid #14285A;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    min-height: 56px;
    max-width: 340px;
}

.pm-sigla-anpc:hover {
    border-color: var(--milan-cyan);
}

.pm-anpc-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    background: #fff;
    flex-shrink: 0;
}

.pm-anpc-logo img,
.pm-anpc-logo svg {
    width: 48px;
    height: auto;
    display: block;
}

.pm-anpc-corp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 6px 10px;
    border-left: 1px solid #D0D8E8;
}

.pm-anpc-titlu {
    font-size: 0.7rem;
    font-weight: 700;
    color: #14285A;
    line-height: 1.25;
    letter-spacing: 0.01em;
}

.pm-anpc-buton {
    display: inline-block;
    padding: 2px 10px;
    background: #14285A;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 3px;
    letter-spacing: 0.05em;
    align-self: flex-start;
}

/* Facebook în coloana de Contact — la fel ca celelalte link-uri din subsol */
.pm-fb-link {
    color: #9FB3D0 !important;
}

.pm-fb-link:hover {
    color: #fff !important;
}

/* ==========================================================================
   Paginile legale
   ========================================================================== */

/* Locurile în care textul depinde de o decizie comercială încă neluată -
   curierul, procesatorul de card, cine plătește returul. Sunt marcate vizibil
   ca să nu ajungă din greșeală în producție așa cum sunt. Când toate dispar,
   paginile sunt gata de lansare. */
.pm-nota {
    margin: 18px 0;
    padding: 14px 16px 14px 44px;
    position: relative;
    border-left: 4px solid var(--milan-galben);
    border-radius: 0 8px 8px 0;
    background: #FFF9E6;
    color: #6B5510;
    font-size: 0.94rem;
}

.pm-nota::before {
    content: "⚠️";
    position: absolute;
    left: 14px;
    top: 13px;
}

/* Textul legal se citește greu dacă rândul e prea lung. */
.page .entry-content > p,
.page .entry-content > ul {
    max-width: 68ch;
}

.page .entry-content h2 {
    margin-top: 2em;
    color: var(--milan-bleumarin);
}

/* ==========================================================================
   Banda de filtre
   ========================================================================== */

.pm-filtre {
    margin: 0 0 24px;
    padding: 16px 18px;
    border: 1px solid var(--milan-margine);
    border-radius: 12px;
    background: var(--milan-fundal-blând);
}

/* Câmpurile stau în corpul pliabil, nu direct în formular: pe telefon corpul se
   ascunde, butonul rămâne. */
.pm-filtre .pm-pliant-corp {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 18px;
}

/* ==========================================================================
   Secțiuni pliabile pe telefon

   Butonul e ascuns peste 1000px și clasa `pm-plit` nu are niciun efect acolo,
   deci același marcaj servește ambele ecrane. Trecerea de la telefon la desktop
   o face media query-ul, nu un ascultător de redimensionare.
   ========================================================================== */

.pm-pliant-buton {
    display: none;
    width: 100%;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--milan-margine);
    border-radius: 10px;
    background: #fff;
    color: var(--milan-bleumarin);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.pm-pliant-eticheta {
    flex: 1;
    text-align: left;
}

/* Pastila numerică: câte filtre sunt puse. Cu banda pliată, altfel nu se vede
   că lista de produse e deja restrânsă. */
.pm-pliant-numar {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 11px;
    background: var(--milan-cyan);
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.6;
}

.pm-pliant-sageata {
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--milan-bleumarin);
    border-bottom: 2px solid var(--milan-bleumarin);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.15s ease;
}

.pm-pliant:not(.pm-plit) .pm-pliant-sageata {
    transform: rotate(-135deg) translate(-3px, -3px);
}

@media (max-width: 999px) {
    .pm-pliant-buton {
        display: flex;
    }

    .pm-pliant.pm-plit > .pm-pliant-corp {
        display: none;
    }

    /* Când e deschis, corpul are nevoie de aer față de buton. */
    .pm-pliant:not(.pm-plit) > .pm-pliant-corp {
        margin-top: 14px;
    }

    /* Rama trece de pe formular pe corpul lui: pliată, banda nu mai are nevoie
       de ea (butonul o are pe a lui), iar deschisă arată la fel cu panoul de
       categorii - două panouri cu aceeași formă, nu unul încadrat și unul
       plutind pe fundal. */
    .pm-filtre {
        padding: 0;
        border: 0;
        background: none;
        margin-bottom: 12px;
    }

    .pm-filtre .pm-pliant-corp {
        padding: 14px 16px;
        border: 1px solid var(--milan-margine);
        border-radius: 12px;
        background: #fff;
    }

    /* Sortarea: Blocksy o strânge la o pictogramă de 34px cu textul făcut
       transparent. Rămânea o săgeată dublă singură pe rând, fără etichetă,
       lângă două butoane late — nu se înțelegea ce e. Dedesubt e un `select`
       adevărat, deci nu-l înlocuim, doar îl lăsăm să arate ca un select. */
    .woo-listing-top > form.woocommerce-ordering {
        order: 4;
        flex: 1 0 100%;
        width: 100%;
        margin: 0 0 18px;
    }

    .woo-listing-top > form.woocommerce-ordering select.orderby {
        width: 100%;
        height: auto;
        min-height: 46px;
        padding: 0 40px 0 14px;
        border: 1px solid var(--milan-margine);
        border-radius: 10px;
        background: #fff;
        color: var(--milan-bleumarin);
        font-size: 0.95rem;
        font-weight: 700;
    }

    /* Săgeata temei stă la marginea din dreapta, ca săgețile celorlalte două
       butoane. Lipită de text, arăta ca o greșeală de aliniere. */
    .woo-listing-top > form.woocommerce-ordering .ct-sort-icon {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
    }
}

.pm-filtru {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--milan-bleumarin);
}

.pm-filtru select,
.pm-filtru input[type="number"] {
    min-height: 40px;
    padding: 6px 10px;
    border: 1px solid var(--milan-margine);
    border-radius: 8px;
    background: #fff;
    font-size: 0.9rem;
    font-weight: 400;
}

.pm-filtru select {
    min-width: 180px;
    max-width: 260px;
}

.pm-pret-camp {
    display: flex;
    gap: 8px;
}

.pm-pret-camp input {
    width: 104px;
}

/* Bifa de stoc stă pe orizontală, altfel eticheta ei ar pluti sub casetă. */
.pm-filtru-stoc {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-height: 40px;
}

.pm-filtru-buton {
    min-height: 40px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    background: var(--milan-cyan);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.pm-filtru-buton:hover {
    background: var(--milan-cyan-inchis);
}

.pm-filtru-reset {
    align-self: center;
    font-size: 0.85rem;
    color: var(--milan-text);
}

@media (max-width: 600px) {
    .pm-filtre {
        gap: 12px;
    }

    .pm-filtru,
    .pm-filtru select {
        width: 100%;
        max-width: none;
    }

    .pm-pret-camp input {
        width: 100%;
    }

    .pm-filtru-buton {
        width: 100%;
    }
}

/* ==========================================================================
   Arhiva de produse: bară laterală + conținut
   ========================================================================== */

.pm-lateral nav {
    border: 1px solid var(--milan-margine);
    border-radius: 12px;
    background: #fff;
    padding: 14px 16px;
}

.pm-lateral-titlu {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--milan-bleumarin);
}

/* Categoria în care te afli: colorată, ca să se distingă de drumul până la ea. */
.pm-lateral-aici {
    padding-left: 10px;
    border-left: 3px solid var(--milan-cyan);
}

.pm-lateral-inapoi,
.pm-lateral-parinte {
    display: block;
    margin-bottom: 6px;
    font-size: 0.84rem;
    color: var(--milan-text);
    text-decoration: none;
}

.pm-lateral-inapoi::before,
.pm-lateral-parinte::before {
    content: "← ";
    opacity: 0.55;
}

.pm-lateral-inapoi:hover,
.pm-lateral-parinte:hover {
    color: var(--milan-cyan);
}

.pm-lateral-eticheta {
    margin: 14px 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8894AB;
}

.pm-lateral-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pm-lateral-lista a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 7px;
    font-size: 0.88rem;
    color: var(--milan-bleumarin);
    text-decoration: none;
    line-height: 1.3;
}

.pm-lateral-lista a:hover {
    background: var(--milan-fundal-blând);
    color: var(--milan-cyan);
}

/* Numărul de produse, discret: ajută la alegere, dar nu concurează cu numele. */
.pm-lateral-lista em {
    flex: none;
    font-size: 0.72rem;
    font-style: normal;
    color: #97A3B6;
}

/* Pe telefon bara stă deasupra grilei, derulabilă pe orizontală: o coloană
   laterală ar împinge produsele sub pragul ecranului. */
@media (max-width: 999px) {
    .pm-lateral nav {
        padding: 12px 14px;
    }

    .pm-lateral-lista {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    .pm-lateral-lista li {
        flex: none;
    }

    .pm-lateral-lista a {
        border: 1px solid var(--milan-margine);
        white-space: nowrap;
    }
}

/* Două coloane pe desktop.

   Prima încercare a fost o grilă pe `<section>`, cu bara laterală întinsă pe
   toate rândurile. Nu merge: un element care traversează mai multe rânduri le
   forțează să crească până îl cuprind, iar între filtre și produse apăreau
   sute de pixeli de gol.

   Varianta care ține: bara plutește la stânga, restul primește o margine egală
   cu lățimea ei plus spațiul dintre coloane. Vechi, dar exact potrivit aici —
   și nu depinde de structura internă a temei. */
@media (min-width: 1000px) {
    section:has(> .pm-lateral) > .pm-lateral {
        float: left;
        width: 248px;
    }

    section:has(> .pm-lateral) > *:not(.pm-lateral) {
        margin-left: 280px;
    }

    /* Antetul gol al arhivei nu trebuie să împingă nimic. */
    section:has(> .pm-lateral) > .woocommerce-products-header:empty,
    section:has(> .pm-lateral) > .woocommerce-notices-wrapper:empty {
        margin: 0 0 0 280px;
    }
}

/* ==========================================================================
   Banda cu titlul categoriei

   Era o suprafață goală de aproape 200px înainte de primul produs. Acum e
   joasă, aliniată la stânga și cu un accent de culoare care leagă pagina de
   restul identității.
   ========================================================================== */

.hero-section[data-type="type-2"] {
    position: relative;
    padding-block: clamp(18px, 2.6vw, 30px);
    background:
        linear-gradient(90deg, rgba(4, 167, 230, 0.09) 0%, rgba(235, 19, 120, 0.05) 42%, rgba(255, 255, 255, 0) 78%),
        var(--milan-fundal-blând);
    border-bottom: 1px solid var(--milan-margine);
}

.hero-section[data-type="type-2"] .entry-header {
    text-align: left;
    /* Blocksy dă antetului 50px sus, 50px jos ȘI `min-height: 250px`. Cu cele
       18px ale benzii, un titlu de 54px ocupa 287px pe telefon — aproape o
       treime de ecran, goală. Anularea padding-ului singură nu schimbă nimic:
       înălțimea minimă rămâne și ține banda deschisă la fel. Trebuie amândouă.
       Spațiul îl dă banda; antetul dinăuntru nu mai are ce adăuga. */
    padding-block: 0;
    min-height: 0;
}

.hero-section[data-type="type-2"] .page-title {
    margin: 0;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    line-height: 1.2;
    color: var(--milan-bleumarin);
}

/* Linia colorată din stânga titlului: semnalizează secțiunea fără chenar. */
.hero-section[data-type="type-2"] .page-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 0.95em;
    margin-right: 12px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--milan-cyan), var(--milan-magenta));
    vertical-align: -0.08em;
}

/* Rândul de deasupra grilei: contorul și sortarea rămân pe o linie, iar banda
   de filtre trece pe rândul ei, pe toată lățimea coloanei de conținut. Altfel
   selectul de brand și cele două câmpuri de preț se înghesuie în ~570px. */
.woo-listing-top {
    flex-wrap: wrap;
}

.woo-listing-top > form.pm-filtre {
    flex: 1 0 100%;
    order: 3;
    margin-top: 4px;
}

/* ==========================================================================
   Pagina principală: meniu de categorii + secțiune de deschidere
   ========================================================================== */

.pm-deschidere {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: clamp(24px, 4vw, 40px);
}

/* Pe telefon lista de categorii are zece rânduri și umple tot ecranul: sliderul,
   care e primul lucru pe care trebuie să-l vadă cineva, ajungea sub linia de
   îndoire. Sub 900px ordinea se inversează — imaginea întâi, categoriile după. */
@media (max-width: 899px) {
    .pm-deschidere-dreapta {
        order: -1;
    }
}

@media (min-width: 900px) {
    .pm-deschidere {
        grid-template-columns: 268px minmax(0, 1fr);
        gap: 24px;
        align-items: stretch;
    }
}

/* Coloana din dreapta: sliderul la înălțimea lui, cartonașele în restul.

   Sliderul se întindea cât meniul (grila îl lungea cu `stretch`), deci sub poză
   rămânea o bandă goală, iar punctele, ancorate la fundul sliderului, cădeau în
   ea. Acum întinderea o primesc cartonașele: `flex: 1` le dă exact cât lipsește
   până la capătul meniului, oricâte categorii ar avea el. */
.pm-deschidere-dreapta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.pm-beneficii {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* Patru pe rând numai unde încap: sub 1200px un cartonaș are sub 200px și
   titlul se rupe pe trei rânduri. */
@media (min-width: 1200px) {
    .pm-beneficii {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.pm-beneficiu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 16px 14px;
    border: 1px solid var(--milan-margine);
    border-radius: 14px;
    background: #fff;
    color: var(--milan-text);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pm-beneficiu:hover,
.pm-beneficiu:focus-visible {
    border-color: var(--milan-cyan);
    box-shadow: 0 8px 20px -12px rgba(9, 28, 55, 0.45);
    color: var(--milan-text);
}

.pm-beneficiu-icoana {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 2px;
    border-radius: 10px;
    font-size: 1.2rem;
    background: rgba(4, 167, 230, 0.12);
}

/* Câte o culoare din logo pe fiecare, ca patru cartonașe identice să nu se
   citească drept un singur bloc. */
.pm-beneficiu:nth-child(2) .pm-beneficiu-icoana { background: rgba(252, 200, 11, 0.22); }
.pm-beneficiu:nth-child(3) .pm-beneficiu-icoana { background: rgba(235, 19, 120, 0.12); }
.pm-beneficiu:nth-child(4) .pm-beneficiu-icoana { background: rgba(9, 28, 55, 0.08); }

.pm-beneficiu-titlu {
    font-size: 0.98rem;
    line-height: 1.25;
    color: var(--milan-bleumarin);
}

.pm-beneficiu-text {
    font-size: 0.85rem;
    line-height: 1.45;
}

.pm-beneficiu-email {
    font-weight: 600;
    color: var(--milan-cyan-inchis);
    overflow-wrap: anywhere;
}

@media (max-width: 599px) {
    .pm-beneficii {
        gap: 10px;
    }

    .pm-beneficiu {
        padding: 12px;
    }

    .pm-beneficiu-icoana {
        width: 32px;
        height: 32px;
        font-size: 1.05rem;
    }

    .pm-beneficiu-titlu {
        font-size: 0.9rem;
    }

    .pm-beneficiu-text {
        font-size: 0.8rem;
    }
}

.pm-meniu-categorii {
    padding: 14px 10px;
    border: 1px solid var(--milan-margine);
    border-radius: 14px;
    background: #fff;
}

.pm-meniu-titlu {
    margin: 0 0 8px;
    padding: 0 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8894AB;
}

.pm-meniu-rand {
    margin: 0;
}

.pm-meniu-rand a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--milan-bleumarin);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.pm-meniu-rand a:hover {
    background: var(--milan-fundal-blând);
    color: var(--milan-cyan);
    transform: translateX(3px);
}

.pm-meniu-rand span[aria-hidden] {
    font-size: 1.05rem;
    line-height: 1;
}

/* --- subcategoriile, la trecerea mouse-ului ---

   Panoul iese în dreapta, peste slider. `position: relative` stă pe rând, nu pe
   cutia meniului: altfel toate panourile ar porni din același colț și s-ar
   suprapune.

   Se deschide și la `focus-within`, nu doar la `hover`: cine navighează cu
   tastatura ajunge pe link cu Tab, iar un meniu care se deschide doar la mouse
   îl lasă afară. */

.pm-meniu-rand {
    position: relative;
}

.pm-meniu-sageata {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: #8894AB;
    font-size: 1.1rem;
    line-height: 1;
    pointer-events: none;
}

.pm-meniu-sub {
    position: absolute;
    top: -8px;
    left: calc(100% + 6px);
    z-index: 30;
    display: none;
    min-width: 250px;
    max-height: 380px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--milan-margine);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(9, 28, 55, 0.14);
}

.pm-meniu-rand:hover > .pm-meniu-sub,
.pm-meniu-rand:focus-within > .pm-meniu-sub {
    display: block;
}

.pm-meniu-sub ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pm-meniu-sub a {
    justify-content: space-between;
    padding: 6px 10px;
    font-size: 0.86rem;
    font-weight: 400;
}

.pm-meniu-sub a:hover {
    transform: none;
}

.pm-meniu-numar {
    color: #8894AB;
    font-size: 0.76rem;
}

/* Pe telefon meniul devine o listă în două coloane: zece rânduri pe verticală
   ar împinge produsele mult sub prima privire. */
@media (max-width: 899px) {
    .pm-meniu-categorii {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px 8px;
    }

    .pm-meniu-titlu {
        grid-column: 1 / -1;
    }

    .pm-meniu-rand a {
        font-size: 0.85rem;
        padding: 8px 8px;
    }

    /* Pe telefon nu există „în dreapta": meniul ocupă toată lățimea, iar un
       panou lateral ar ieși din ecran. Subcategoriile se ating din pagina de
       categorie, unde au deja butonul lor pliant. */
    .pm-meniu-sub,
    .pm-meniu-sageata {
        display: none !important;
    }
}

/* --- secțiunea de deschidere, cu mișcare discretă --- */

.pm-erou {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* Fundalul se mișcă lent, cât să dea impresia de viu fără să distragă de la
   citit. 18 secunde per ciclu: sub 10 devine agitat. */
.pm-erou {
    background-size: 160% 160%, 160% 160%, auto;
    animation: pm-fundal 18s ease-in-out infinite alternate;
}

@keyframes pm-fundal {
    0%   { background-position:   0% 0%, 100% 0%, 0 0; }
    100% { background-position:  30% 40%,  70% 30%, 0 0; }
}

/* Textul intră o singură dată, la încărcare. Decalajul dintre rânduri e mic:
   o pagină de magazin nu are timp de spectacol. */
.pm-erou-titlu,
.pm-erou-text,
.pm-erou .wp-block-buttons {
    animation: pm-intra 0.55s ease-out both;
}

.pm-erou-text          { animation-delay: 0.08s; }
.pm-erou .wp-block-buttons { animation-delay: 0.16s; }

@keyframes pm-intra {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.pm-buton-principal .wp-block-button__link {
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.pm-buton-principal .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -8px rgba(4, 167, 230, 0.75);
}

/* --- subtitlul zonelor de produse --- */

.pm-sectiune-sub {
    margin: -10px 0 18px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--milan-text);
}

.pm-sectiune-sub a {
    color: var(--milan-cyan);
    font-weight: 600;
    text-decoration: none;
}

.pm-sectiune-sub a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Imaginile produselor: întregi, nu tăiate

   Fișierele sunt pătrate (300×300), dar tema le afișa în raport 4:3 cu
   `object-fit: cover`, adică le reteza sus și jos. La un ghiozdan se pierdea
   exact partea de sus, la un penar capacul. Nu era o problemă de fișier, ci de
   afișare — deci se rezolvă fără să regenerăm nicio miniatură.
   ========================================================================== */

/* `!important` este necesar aici, nu comod: Blocksy scrie `aspect-ratio: 4/3`
   ca stil INLINE pe fiecare <img>, iar un stil inline bate orice regulă din
   foaia de stil. Setarea care îl generează nu e accesibilă din afara
   interfeței temei. */
ul.products li.product img,
.wc-block-grid__product-image img {
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    width: 100%;
    height: auto;
    background: #fff;
}

/* Puțin aer în jurul produsului: pe fundal alb, marginile ambalajului se
   lipeau de chenarul cardului. */
ul.products li.product .ct-media-container {
    padding: 6px;
}

/* ==========================================================================
   Lățimea paginii

   Tema calculează lățimea prin trei variabile în cascadă. Le-am suprascris pe
   toate, pe `:root` și pe `body`, și niciuna n-a schimbat rezultatul: valoarea
   finală vine dintr-o regulă generată de temă pe care n-o pot atinge. Așa că
   se dă direct, la sursă.
   ========================================================================== */

/* Pagina în sine era deja lată. Ce o strângea erau blocurile din interior:
   `div.woocommerce`, în care WooCommerce își pune grila de produse, și
   grupurile Gutenberg cu aranjare „constrânsă". Containerul temei nu avea nicio
   vină — de aceea suprascrierile pe variabilele lui n-au schimbat nimic. */
.entry-content > .woocommerce,
.entry-content > .wp-block-group,
.entry-content > .wp-block-columns,
.entry-content > h2,
.entry-content > p {
    max-width: min(1720px, 95vw);
    margin-inline: auto;
}

.entry-content > .woocommerce {
    width: 100%;
}

/* ==========================================================================
   Banda de sus
   ========================================================================== */

.pm-bara-sus {
    background: var(--milan-bleumarin);
    color: #C9D3E4;
    font-size: 0.82rem;
}

.pm-bara-sus .ct-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 38px;
    padding-block: 6px;
}

.pm-bara-sus-stanga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
}

.pm-bara-sus a,
.pm-bara-sus span {
    color: #C9D3E4;
    text-decoration: none;
    white-space: nowrap;
}

.pm-bara-sus a:hover {
    color: #fff;
}

.pm-bara-sus-dreapta {
    display: flex;
    align-items: center;
    gap: 18px;
}

.pm-bara-sus-dreapta a {
    font-weight: 600;
}

/* Pastila numărului stă pe fundal închis acum, nu pe alb: cenușiul de dinainte
   dispărea în bandă. Goală rămâne discretă, plină se aprinde. */
.pm-bara-sus-dreapta .pm-cos-numar {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.pm-bara-sus-dreapta .pm-cos-numar.are-produse {
    background: var(--milan-magenta);
    color: #fff;
}

/* Pe telefon rămâne doar telefonul: e singurul lucru din bandă pe care cineva
   chiar îl folosește de pe mobil, iar restul ar rupe rândul. */
@media (max-width: 767px) {
    .pm-bara-sus-livrare,
    .pm-bara-sus-stanga a[href^="mailto"],
    .pm-bara-sus-dreapta .pm-cos {
        display: none;
    }

    .pm-bara-sus .ct-container {
        justify-content: space-between;
    }
}

/* „Contul meu" din meniu: pe ecrane mici rămâne doar pictograma. */
.pm-element-cont > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 1200px) {
    .pm-cont-text {
        display: none;
    }
}

/* ==========================================================================
   Sliderul de pe prima pagină
   ========================================================================== */

/* Colțurile rotunjite stau pe pistă, nu pe slider: punctele sunt acum sub
   imagine, în afara ei, și un `overflow: hidden` pe slider le-ar fi tăiat. */
.pm-slider {
    position: relative;
}

.pm-slider-pista {
    border-radius: 16px;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pm-slider-pista::-webkit-scrollbar {
    display: none;
}

.pm-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(260px, 30vw, 380px);
    padding: clamp(26px, 4vw, 54px);
    position: relative;
    /* Imaginea vine din --img, scrisă inline pe fiecare diapozitiv. Degradeurile
       rămân dedesubt ca rezervă: dacă imaginea lipsește sau nu se încarcă,
       diapozitivul arată în continuare ca o suprafață intenționată, nu ca o
       casetă goală. */
    background-image:
        var(--img, none),
        radial-gradient(120% 150% at 8% 0%, var(--f1, rgba(4, 167, 230, 0.16)) 0%, transparent 60%),
        radial-gradient(100% 140% at 100% 20%, var(--f2, rgba(235, 19, 120, 0.13)) 0%, transparent 62%);
    background-size: cover, auto, auto;
    background-position: center right, 0 0, 0 0;
    background-repeat: no-repeat;
    background-color: var(--milan-fundal-blând);
}

/* Pe ecrane înguste imaginea se taie și produsele ajung sub text. Un văl alb
   peste ea ține textul lizibil fără să ascundă complet fotografia. */
/* Textul peste fotografie, pe telefon.

   Vălul întins peste toată imaginea era la 0,94: textul se citea, dar fotografia
   nu se mai înțelegea — plăteam toată poza ca să câștigăm lizibilitate. Un halou
   alb în jurul literelor a mers pentru titlu, dar nu și pentru paragraf, care
   cade exact peste partea cea mai colorată a pozei.

   Așa că vălul acoperă doar textul, nu imaginea: un panou translucid, cu
   fotografia întreagă în jurul lui. Textul se citește oriunde ar cădea, iar poza
   rămâne poză.

   Același panou și la bannerele dintre secțiuni, care sub 760px nu aveau niciun
   văl: acolo textul stătea direct pe fotografie. */
@media (max-width: 760px) {
    .pm-slide .pm-text-peste,
    .pm-banner .pm-text-peste {
        position: relative;
        z-index: 1;
        padding: 16px 18px;
        border-radius: 14px;
        /* 0,82 era o folie: panoul ocupă 87% din lățimea și 87% din înălțimea
           diapozitivului (măsurat la 402px: 314x277 dintr-un 354x317), deci la
           opacitatea aceea fotografia dispărea cu totul. Nu se poate micșora
           fără să taie textul — se face transparent. Blurul face lizibilitatea,
           nu opacitatea: la 16px ce e dedesubt devine suprafață, nu detaliu.

           Cât de transparent se poate, măsurat și nu din ochi: fotografia
           fiecărui diapozitiv desenată într-un canvas exact cum o așază CSS-ul
           (`cover`, ancorată la dreapta), apoi căutată cea mai întunecată
           fereastră de 24x24 px din zona paragrafului și calculat contrastul
           textului bleumarin peste văl. Pe cel mai prost diapozitiv:
           0,55 → 9,8:1 · 0,40 → 7,4 · 0,30 → 5,8 · 0,25 → 5,0 ·
           **0,22 → ~4,5** · 0,20 → 4,2 · 0,15 → 3,4.
           Pragul WCAG AA pentru text obișnuit e 4,5:1, deci 0,22 e ultima
           valoare la care paragraful mai trece pe diapozitivul cel mai
           întunecat (curierul). Mai departe nu se coboară prin văl: dacă se
           vrea și mai multă poză, se micșorează panoul. Haloul din jurul
           literelor nici nu intră în calcul, deci rezerva reală e mai mare.
           Fereastra de 24px, nu pixelul izolat: blurul face media zonei. */
        background: rgba(255, 255, 255, 0.22);
        -webkit-backdrop-filter: blur(16px) saturate(0.75);
        backdrop-filter: blur(16px) saturate(0.75);
    }

    /* Fără backdrop-filter panoul ar fi doar o folie mată; acolo unde browserul
       îl are, imaginea se ghicește prin el și rămâne parte din compoziție.
       Fără blur, singurul lucru care ține textul lizibil e opacitatea. */
    @supports not ((backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px))) {
        .pm-slide .pm-text-peste,
        .pm-banner .pm-text-peste {
            background: rgba(255, 255, 255, 0.90);
        }
    }

    /* Conturul literelor, pentru porțiunile unde în spatele panoului cade o
       zonă închisă — uniforma curierului, la „Transport gratuit peste 500 lei".
       Un halou alb, nu o umbră: textul e închis la culoare, deci lumina din
       jurul literelor e cea care îl desprinde de fundal. */
    .pm-slide .pm-text-peste h2,
    .pm-slide .pm-text-peste p,
    .pm-banner .pm-text-peste h2,
    .pm-banner .pm-text-peste p {
        text-shadow:
            0 1px 2px rgba(255, 255, 255, 1),
            0 0 3px rgba(255, 255, 255, 1),
            0 0 8px rgba(255, 255, 255, 0.95),
            0 0 16px rgba(255, 255, 255, 0.90);
    }

    /* Griul paragrafului e calculat pentru alb, nu pentru o fotografie care se
       vede prin panou. Pe telefon trece pe bleumarin, unde contrastul rămâne
       bun și peste partea cea mai închisă a pozei. */
    .pm-slide .pm-text-peste p,
    .pm-banner .pm-text-peste p {
        color: var(--milan-bleumarin);
    }

    .pm-slide p {
        color: var(--milan-text);
    }

    /* Panoul crescuse cât diapozitivul, iar fotografia se vedea doar pe margini.
       Textul strâns puțin lasă poza să respire în jurul lui. */
    .pm-slide {
        padding: 20px;
    }

    .pm-slide .pm-text-peste p {
        font-size: 0.92rem;
        line-height: 1.45;
        margin-bottom: 16px;
    }

    .pm-slide .pm-text-peste h2 {
        margin-bottom: 8px;
    }

    /* Banda dintre secțiuni: pe telefon rămân titlul și butonul. Cu fraza de
       descriere, panoul acoperea aproape toată fotografia — o poză ascunsă sub
       text nu mai are de ce să fie acolo. Titlul spune același lucru, iar
       butonul duce în același loc. */
    .pm-banner-descriere {
        display: none;
    }

    .pm-banner .pm-text-peste {
        gap: 12px;
    }
}

.pm-slide h2 {
    margin: 0 0 10px;
    max-width: 18ch;
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    line-height: 1.12;
    color: var(--milan-bleumarin);
}

.pm-slide p {
    margin: 0 0 20px;
    /* 44ch trecea peste ghiozdanele din fotografie. Coloana de text trebuie să
       se termine înainte să înceapă subiectul pozei, nu peste el. */
    max-width: 34ch;
    font-size: clamp(0.95rem, 1.5vw, 1.08rem);
    color: var(--milan-text);
}

.pm-slide .wp-block-button__link {
    background: var(--milan-cyan);
    color: #fff;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 600;
}

/* Punctele stau sub imagine, nu peste ea. Suprapuse, cădeau peste fotografie
   sau peste panoul de text de pe telefon; iar cât sliderul se întindea cât
   meniul, ajungeau la fundul unei benzi goale, la 200px de poza pe care o
   comandă. */
.pm-slider-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 10px;
}

.pm-slider-punct {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(9, 28, 55, 0.25);
    cursor: pointer;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.pm-slider-punct.activ {
    width: 26px;
    border-radius: 5px;
    background: var(--milan-cyan);
}

.pm-slider-sageata {
    position: absolute;
    /* Mijlocul imaginii, nu al sliderului: acesta are dedesubt și rândul de
       puncte, de 19px. */
    top: calc(50% - 10px);
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--milan-bleumarin);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 2px 10px -3px rgba(9, 28, 55, 0.35);
}

.pm-slider-sageata:hover {
    background: #fff;
}

.pm-slider-inapoi  { left: 12px; }
.pm-slider-inainte { right: 12px; }

/* Pe telefon săgețile dispar: acolo se derulează cu degetul, iar două butoane
   peste text ar acoperi tocmai mesajul. */
@media (max-width: 700px) {
    .pm-slider-sageata { display: none; }
}

/* ==========================================================================
   Bannerele dintre secțiuni
   ========================================================================== */

.pm-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-block: clamp(30px, 5vw, 52px);
    padding: clamp(24px, 3.6vw, 40px) clamp(22px, 3.4vw, 44px);
    border-radius: 16px;
    position: relative;
    background-image:
        var(--img, none),
        radial-gradient(90% 200% at 0% 50%, var(--f1, rgba(4, 167, 230, 0.20)) 0%, transparent 65%),
        radial-gradient(80% 180% at 100% 50%, var(--f2, rgba(252, 200, 11, 0.22)) 0%, transparent 60%);
    background-size: cover, auto, auto;
    /* Banda e mult mai lată decât raportul fotografiei, deci `cover` taie pe
       verticală. Unde mijlocul nu e locul bun de tăiat — la banda cu lista de
       rechizite mijlocul taia capul femeii — diapozitivul își scrie singur
       `--pos` și mută ancora mai sus. */
    background-position: var(--pos, center right), 0 0, 0 0;
    background-repeat: no-repeat;
    background-color: var(--milan-fundal-blând);
    min-height: 240px;
}

/* Textul și butonul stăteau unul lângă altul ca fii direcți ai benzii. De când
   sunt înveliți într-un panou (ca să poată primi fundal pe telefon), aranjarea
   trebuie să treacă pe înveliș - altfel s-ar așeza unul sub altul pe desktop. */
.pm-banner .pm-text-peste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
}

@media (max-width: 760px) {
    .pm-banner::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.93) 0%,
            rgba(255, 255, 255, 0.78) 60%,
            rgba(255, 255, 255, 0.35) 100%);
    }

    .pm-banner > * {
        position: relative;
        z-index: 1;
    }
}

.pm-banner p {
    margin: 0;
    max-width: 52ch;
}

.pm-banner strong {
    display: block;
    margin-bottom: 4px;
    font-size: clamp(1.15rem, 2.1vw, 1.55rem);
    line-height: 1.2;
    color: var(--milan-bleumarin);
}

.pm-banner .wp-block-button__link {
    background: var(--milan-bleumarin);
    color: #fff;
    border-radius: 8px;
    padding: 12px 26px;
    font-weight: 600;
    white-space: nowrap;
}

.pm-banner .wp-block-button__link:hover {
    background: var(--milan-cyan);
}

/* ==========================================================================
   Zonele de produse: separate vizual, nu una peste alta
   ========================================================================== */

.pm-zona {
    margin-block: clamp(26px, 4vw, 44px);
    padding: clamp(20px, 3vw, 34px) clamp(16px, 2.4vw, 30px);
    border-radius: 18px;
    border: 1px solid var(--milan-margine);
    background: #fff;
}

/* O zonă din două primește fundal colorat: ochiul le separă fără linii groase. */
.pm-zona--tonata {
    border-color: transparent;
    background: var(--milan-fundal-blând);
}

.pm-zona .pm-sectiune {
    margin-top: 0;
}

/* Antetul zonei: titlu la stânga, „vezi toate" la dreapta, pe același rând. */
.pm-zona-antet {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--milan-margine);
}

.pm-zona-antet h2 {
    margin: 0;
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    color: var(--milan-bleumarin);
}

.pm-zona-antet h2::after {
    display: none;
}

.pm-zona-antet .pm-zona-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--milan-cyan);
    text-decoration: none;
    white-space: nowrap;
}

.pm-zona-antet .pm-zona-link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Categorii populare
   ========================================================================== */

.pm-populare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}

.pm-populare-card {
    padding: 16px 18px;
    border: 1px solid var(--milan-margine);
    border-radius: 12px;
    background: #fff;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.pm-populare-card:hover {
    transform: translateY(-2px);
    border-color: var(--milan-cyan);
    box-shadow: 0 10px 22px -14px rgba(9, 28, 55, 0.4);
}

.pm-populare-card h3 {
    margin: 0 0 10px;
    font-size: 1rem;
    color: var(--milan-bleumarin);
}

.pm-populare-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pm-populare-card li + li {
    margin-top: 4px;
}

.pm-populare-card a {
    font-size: 0.87rem;
    color: var(--milan-text);
    text-decoration: none;
}

.pm-populare-card a:hover {
    color: var(--milan-cyan);
}

/* ==========================================================================
   Consumabile printare: o zonă cu alt ritm

   Cerută de proprietar (6 octombrie 2026), ca să nu arate ca celelalte rafturi:
   mai multe produse pe rând și unul mai mare. Grila are șase coloane, iar
   primul produs ocupă două coloane și două rânduri — 1 mare + 8 mici umplu
   exact două rânduri, deci dreptunghiul iese plin, fără celule goale.
   ========================================================================== */

.pm-printare-raft + .pm-printare-raft {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px dashed var(--milan-margine);
}

.pm-printare-antet {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    margin-bottom: 14px;
}

.pm-printare-antet h3 {
    margin: 0;
    font-size: 1.02rem;
    color: var(--milan-bleumarin);
}

.pm-printare-antet h3::after {
    display: none;
}

.pm-printare-antet a {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--milan-cyan);
    text-decoration: none;
    white-space: nowrap;
}

.pm-printare-antet a:hover {
    text-decoration: underline;
}

/* Grila zonei vine acum din clasa `pm-coloane-N`, comună tuturor zonelor
   (vezi „Câte produse pe rând" mai jos). Aici rămâne doar spațierea. */
.pm-printare ul.products {
    gap: 14px;
}

/* Cardul mare doar unde rândurile ies pline. Un raft cu prea puține fotografii
   diferite (cilindrii au 7 în total) primește un rând simplu, fără clasa asta —
   altfel al doilea rând ar rămâne cu goluri în el. */
.pm-printare-raft--vedeta ul.products li.product:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

/* Pe telefon produsul mare ocupă rândul întreg — pe două rânduri ar umple
   singur tot ecranul. */
@media (max-width: 689px) {
    .pm-printare-raft--vedeta ul.products li.product:first-child {
        grid-column: span 2;
        grid-row: auto;
    }
}

/* ==========================================================================
   Câte produse pe rând

   Setarea din Aspect → Pagina principală ajunge aici, prin clasa pusă de
   `pm_randeaza_produse`. **Se scriu amândouă** variabila temei și proprietatea
   CSS: Blocksy desenează grila din `--grid-template-columns`, iar clasa
   `columns-N` a WooCommerce rămâne fără efect. Cu una singură, setarea nu
   ajunge nicăieri și nimic nu o spune — zonele cerute cu 4 afișau 6.
   ========================================================================== */

ul.products.pm-coloane-2 { --grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr)); }
ul.products.pm-coloane-3 { --grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr)); }
ul.products.pm-coloane-4 { --grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr)); }
ul.products.pm-coloane-5 { --grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-columns: repeat(5, minmax(0, 1fr)); }
ul.products.pm-coloane-6 { --grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-columns: repeat(6, minmax(0, 1fr)); }
ul.products.pm-coloane-7 { --grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-columns: repeat(7, minmax(0, 1fr)); }

/* Sub 1100px, cinci sau șase coloane fac din card o pastilă în care nu mai
   încape denumirea. */
@media (min-width: 690px) and (max-width: 1099px) {
    ul.products.pm-coloane-5,
    ul.products.pm-coloane-6,
    ul.products.pm-coloane-7 {
        --grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Pe telefon, două pe rând peste tot — ca în restul magazinului. */
@media (max-width: 689px) {
    ul.products[class*="pm-coloane-"] {
        --grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Reducerile: să se vadă că sunt

   Din cutie, WooCommerce taie prețul vechi cu o linie subțire și pune pe
   fotografie eticheta „Reduceri". Proprietarul a trimis o captură (6 octombrie):
   14,19 lângă un 15,99 tăiat trece neobservat. Acum prețul nou e magenta și
   mai mare, cel vechi se retrage, iar eticheta spune procentul.
   ========================================================================== */

ul.products li.product .price del,
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
    color: #8a93a6;
    font-weight: 400;
    opacity: 1;
    text-decoration-thickness: 1.5px;
}

ul.products li.product .price ins,
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
    color: var(--milan-magenta);
    font-weight: 700;
    text-decoration: none;
    background: none;
}

/* Pe pagina produsului prețul nou poartă greutatea deciziei: merită să fie
   vizibil mai mare decât cel tăiat. */
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
    font-size: 1.22em;
}

/* Eticheta de pe fotografie: procentul, în culoarea de accent a mărcii.
   Cyanul e culoarea butoanelor — o etichetă cyan s-ar fi citit ca încă un
   buton, nu ca un semn de preț. */
/* Primul selector prinde și grila de pe prima pagină, desenată de bucla
   noastră: acolo nu există învelișul `.woocommerce` și nici clasa pe `body`,
   deci o regulă care începe cu el sare peste jumătate din magazin. Măsurat:
   eticheta ieșea cyan pe acasă și magenta pe categorie. */
ul.products li.product span.onsale,
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
    background: var(--milan-magenta);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.2px;
    border-radius: 999px;
    min-height: 0;
    min-width: 0;
    padding: 5px 12px;
    line-height: 1.3;
}

.trd-economie {
    display: inline-block;
    margin: -4px 0 14px;
    padding: 5px 12px;
    border-radius: 8px;
    background: rgba(235, 19, 120, 0.10);
    color: var(--milan-magenta);
    font-size: 0.95rem;
}

.trd-economie strong {
    font-weight: 700;
}

/* Prețul din card, pe telefon: cu două produse pe rând, prețul vechi și cel nou
   nu încap unul lângă altul fără să se îngrămădească. */
@media (max-width: 689px) {
    ul.products li.product .price del {
        font-size: 0.82em;
    }
}

/* ==========================================================================
   Cardul de produs: chenar

   Cerut de proprietar (7 octombrie 2026), cu un exemplu de pe alt magazin:
   produsele „arată mai organizate" când fiecare stă în chenarul lui. Se pornește
   din Aspect → Pagina principală și se aplică peste tot unde e o grilă de
   produse, nu doar pe prima pagină — altfel categoria ar arăta altfel decât
   raftul din care vine clientul.

   Culoarea e cea a marginilor din restul site-ului (`--milan-margine`), iar la
   trecerea mouse-ului chenarul devine cyan: aceeași culoare cu butoanele, deci
   cardul spune „se poate apăsa" fără să adauge nimic nou pe ecran.
   ========================================================================== */

body.pm-card-chenar ul.products li.product,
body.pm-card-umbra ul.products li.product {
    padding: 10px 10px 14px;
    border: 1px solid var(--milan-margine);
    border-radius: 14px;
    background: #fff;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

body.pm-card-umbra ul.products li.product {
    box-shadow: 0 6px 18px -14px rgba(9, 28, 55, 0.5);
}

body.pm-card-chenar ul.products li.product:hover,
body.pm-card-umbra ul.products li.product:hover {
    border-color: var(--milan-cyan);
    box-shadow: 0 14px 28px -18px rgba(9, 28, 55, 0.45);
}

/* Cu chenar, cardurile au nevoie de puțin aer între ele: lipite, cele două
   linii alăturate se citesc ca una singură, groasă. */
body.pm-card-chenar ul.products,
body.pm-card-umbra ul.products {
    gap: 18px;
}

/* Pe telefon cardul are 141px: zece pixeli de margine interioară de fiecare
   parte ar mânca o șeptime din fotografie. */
@media (max-width: 689px) {
    body.pm-card-chenar ul.products li.product,
    body.pm-card-umbra ul.products li.product {
        padding: 7px 7px 10px;
        border-radius: 11px;
    }

    body.pm-card-chenar ul.products,
    body.pm-card-umbra ul.products {
        gap: 12px;
    }
}

/* ==========================================================================
   Bara de căutare
   ========================================================================== */

.pm-cautare {
    padding: 12px 0;
    background: #fff;
    border-bottom: 1px solid var(--milan-margine);
}

.pm-cautare form {
    display: flex;
    gap: 8px;
    max-width: 780px;
    margin: 0 auto;
}

.pm-cautare input[type="search"] {
    flex: 1;
    min-height: 50px;
    padding: 0 18px;
    border: 2px solid var(--milan-margine);
    border-radius: 10px;
    font-size: 1rem;
    background: var(--milan-fundal-blând);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pm-cautare input[type="search"]:focus {
    border-color: var(--milan-cyan);
    background: #fff;
    outline: none;
}

.pm-cautare button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 26px;
    border: 0;
    border-radius: 10px;
    background: var(--milan-cyan);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.pm-cautare button:hover {
    background: var(--milan-cyan-inchis);
}

/* Pe telefon rămâne doar lupa: cuvântul „Caută" ar fura din lățimea câmpului,
   care e partea utilă. */
@media (max-width: 600px) {
    .pm-cautare-text {
        display: none;
    }

    .pm-cautare button {
        padding: 0 18px;
    }

    .pm-cautare input[type="search"] {
        min-height: 46px;
        font-size: 0.95rem;
    }
}

/* --- dimensiunea logo-ului ---

   Blocksy scrie `height: 50px` direct pe imagine. `max-height` doar plafonează,
   nu ridică: cât timp înălțimea impusă e sub plafon, plafonul nu face nimic —
   de asta logo-ul a rămas la 50px deși regula spunea 76. Se suprascrie chiar
   `height`, iar lățimea se lasă să urmeze proporția.

   Fișierul sursă are 600×254, deci la 84px înălțime iese 198px lățime: sub
   jumătate din original, așa că rămâne clar și pe ecrane retina.

   Pe telefon rămâne mai mic: acolo antetul stă fixat pe ecran și fiecare pixel
   în plus fură din produse. */
.site-logo-container img {
    height: 84px;
    max-height: none;
    width: auto;
    max-width: 100%;
}

@media (max-width: 999px) {
    .site-logo-container img {
        height: 56px;
    }
}

/* Text lizibil peste imagine, indiferent de compoziție.

   Produsele din bannere nu încep toate la aceeași distanță de margine: la unele
   compoziții textul ajungea peste ele. Un văl de lumină dinspre stânga rezolvă
   asta o dată pentru toate, fără să ascundă fotografia. */
.pm-slide::after,
.pm-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.86) 0%,
        rgba(255, 255, 255, 0.70) 32%,
        rgba(255, 255, 255, 0.24) 50%,
        rgba(255, 255, 255, 0) 64%);
}

.pm-slide > *,
.pm-banner > * {
    position: relative;
    z-index: 1;
}

/* Pe telefon vălul e deja pe verticală, din regula de mai sus; cel orizontal
   ar albi imaginea de tot. */
@media (max-width: 760px) {
    .pm-slide::after,
    .pm-banner::after {
        display: none;
    }
}

/* ==========================================================================
   Pagina de produs

   Doua lucruri semnalate de proprietar, amandoua masurate inainte de a scrie
   ceva: imaginea taiata si descrierea „labartata".
   ========================================================================== */

/* --- 1. Imaginea produsului, intreaga ---

   Blocksy pune pe galerie `object-fit: cover` cu raport 3/4. La un catalog de
   papetarie asta taie exact ce trebuie vazut: un creion asezat pe diagonala, o
   cutie lata, un caiet A4. Fotografiile furnizorului vin pe fundal alb si in
   rapoarte diferite, deci singura varianta care le arata pe toate e `contain`.

   Raportul ramane patrat, ca randul de produse sa nu salte, iar fundalul alb
   umple ce ramane — pe o poza de produs pe alb, marginea nici nu se vede. */
.single-product .woocommerce-product-gallery img,
.single-product .flexslider .slides img,
.single-product .woocommerce-product-gallery__image img {
    object-fit: contain !important;
    aspect-ratio: 1 / 1 !important;
    width: 100%;
    height: auto;
    background: #fff;
}

/* Miniaturile de sub galerie, la fel: taiate, ar arata alt produs decat cel mare. */
.single-product .flex-control-thumbs img {
    object-fit: contain !important;
    aspect-ratio: 1 / 1 !important;
    background: #fff;
}

/* --- 2. Descrierea, pe o singura masura ---

   In acelasi panou, paragrafele aveau 1512px iar titlurile si listele 1290:
   tema aplica latimi diferite pe tipuri de elemente diferite. De aici senzatia
   ca unele randuri curg pe tot ecranul si altele nu.

   Se da panoului o masura proprie si toti copiii o mostenesc. 72ch e latimea la
   care un rand de text se citeste fara ca ochiul sa piarda inceputul randului
   urmator; la 1512px, un paragraf are peste 200 de caractere pe rand. */
.single-product .woocommerce-Tabs-panel,
.single-product .wc-tab-inner {
    /* Aceleasi variabile pe care le foloseste tema pentru containerul paginii,
       nu o valoare copiata: daca proprietarul schimba latimea din panou,
       descrierea se muta odata cu titlul si cu galeria, nu ramane in urma. */
    max-width: min(
        var(--theme-normal-container-max-width, 1290px),
        var(--theme-container-width, 90vw)
    );
    margin-inline: auto;
}

/* O singura coloana, aliniata la stanga cu titlul produsului si cu galeria.
   Centrata ar pluti in mijlocul unei zone de 1290px, desprinsa de restul paginii.

   `!important` e aici o necesitate reala, nu comoditate: panoul poarta clasa
   `is-layout-constrained`, iar WordPress centreaza fiecare copil cu
   `margin-left: auto !important`. Fara flag, regula noastra nu are cum sa treaca.

   680px inseamna vreo 80 de caractere pe rand — masura la care ochiul gaseste
   inceputul randului urmator fara sa caute. Inainte, un paragraf avea 1512px si
   peste 200 de caractere pe rand. */
.single-product .woocommerce-Tabs-panel > * {
    max-width: min(100%, 680px);
    margin-left: 0 !important;
    margin-right: auto !important;
}

.single-product .woocommerce-Tabs-panel h2,
.single-product .woocommerce-Tabs-panel h3 {
    margin: 32px 0 12px;
    font-size: 1.2rem;
    color: var(--milan-bleumarin);
}

.single-product .woocommerce-Tabs-panel > h2:first-child,
.single-product .woocommerce-Tabs-panel > h3:first-child {
    margin-top: 0;
}

.single-product .woocommerce-Tabs-panel p {
    margin: 0 0 14px;
    line-height: 1.65;
}

/* --- 3. Lista de caracteristici, pe doua coloane ---

   Sunt perechi „Brand: Rotring", „Grosime: 0,5". Insiruite pe verticala, sapte
   randuri de cate trei cuvinte lasa jumatate de ecran gol la dreapta si obliga
   ochiul sa coboare mult pentru o informatie scurta.

   Doua coloane le string, iar linia dintre ele le tine citibile ca tabel. Sub
   700px se intorc pe o coloana: acolo doua ar insemna randuri de doua cuvinte. */
.single-product .woocommerce-Tabs-panel ul {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 32px;
}

.single-product .woocommerce-Tabs-panel ul li {
    break-inside: avoid;
    padding: 7px 0;
    border-bottom: 1px solid var(--milan-margine);
    font-size: 0.95rem;
}

@media (max-width: 700px) {
    .single-product .woocommerce-Tabs-panel ul {
        columns: 1;
    }
}

/* „Stoc la furnizor": informație, nu avertisment. Galbenul de alertă ar speria
   degeaba — produsul chiar se poate cumpăra, doar pleacă mai târziu. */
.pm-stoc-furnizor {
    margin: 10px 0 0;
    padding: 8px 12px;
    border-left: 3px solid var(--milan-cyan);
    border-radius: 0 6px 6px 0;
    background: var(--milan-fundal-blând);
    font-size: 0.9rem;
    color: var(--milan-bleumarin);
}

/* ==========================================================================
   Butonul „Gestionează consimțământul" (Complianz)
   ==========================================================================

   Complianz îl pune `position: fixed; bottom: 0; right: 40px`, cu
   `height: var(--cmplz-manage-consent-height)` și `min-width: 100px` — adică
   233x50 px. Pe un telefon de 402 px asta e 58% din lățimea ecranului, fix
   peste bara noastră fixă de jos (56 px, z-index 999): „Caută" și „Coș" erau
   acoperite, iar butonul are z-index 9998, deci el câștiga.

   E un control legal, nu un îndemn la cumpărare: trebuie să existe și să poată
   fi găsit, nu să ocupe un colț de ecran. Devine o pastilă mică „Cookies".
   Eticheta lungă rămâne în DOM — `font-size: 0` nu scoate textul din arborele
   de accesibilitate, deci cititoarele de ecran citesc mai departe
   „Gestionează consimțământul".

   `!important` e necesar: regula Complianz e `#cmplz-manage-consent
   .cmplz-manage-consent` (deci specificitate cu id), iar `bottom` îl scrie o
   animație (`mc_slideOut`), care bate o declarație obișnuită. */
body #cmplz-manage-consent .cmplz-manage-consent {
    height: auto !important;
    min-width: 0 !important;
    padding: 7px 13px !important;
    border-radius: 999px !important;
    line-height: 1 !important;
    font-size: 0 !important;
    box-shadow: 0 2px 8px rgba(9, 28, 55, 0.18) !important;
    /* Complianz îl ține ascuns sub marginea de jos — `bottom: -35px`, scris de
       animația `mc_slideOut` — și îl scoate la `:hover`. Cei 35px sunt
       calculați pentru butonul lui de 50px, din care rămân 15 la vedere; cu
       pastila de 26px, aceeași valoare o scoate cu totul din ecran (măsurat:
       y=909 într-o fereastră de 900). Un control legal trebuie să poată fi
       găsit, deci stă la vedere — mic, în colț. */
    bottom: 12px !important;
    right: 14px !important;
}

body #cmplz-manage-consent .cmplz-manage-consent::before {
    content: "Cookies";
    font-size: 12px;
    font-weight: 600;
}

/* Sub 1000px apare bara fixă de jos, deci pastila urcă deasupra ei și trece în
   stânga: în dreapta ar sta peste coș. `env(safe-area-inset-bottom)` fiindcă
   bara însăși îl are — altfel pe iPhone pastila ar cădea peste ea. */
@media (max-width: 999px) {
    body #cmplz-manage-consent .cmplz-manage-consent {
        left: 10px !important;
        right: auto !important;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 10px) !important;
        opacity: 0.95;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   FINALIZAREA COMENZII (19 octombrie 2026)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Plasă de siguranță pentru lățime (19 octombrie 2026) ──────────

   `fieldset` are lățimea minimă `min-content`, nu zero, deci orice conținut
   care nu se poate rupe îl lățește peste formular. S-a și întâmplat: nota de
   sub CUI, scrisă azi, moștenea `white-space: nowrap` de la învelișul
   câmpului și, pe un ecran de 402px, ducea blocul la **630px** — cu partea
   dreaptă a câmpurilor de firmă în afara ecranului, și fără derulare
   laterală prin care să se ajungă la ea.

   Cauza e reparată la ea acasă (`.pm-nota-anaf` mai jos); asta rămâne ca
   plasă, fiindcă blocul e singurul cu câmpuri scrise de noi, iar următorul
   text lung pus acolo ar repeta povestea în tăcere. */
.wc-block-checkout fieldset.wp-block-woocommerce-checkout-additional-information-block {
    min-width: 0;
}

/* Forma de cumpărare: amândouă opțiunile la vedere, nu într-o listă
   derulantă. Lista se ascunde **numai** după ce bifele chiar există
   (clasa o pune scriptul): fără el, formularul rămâne cel de azi. */
.pm-tip-client-gazda .wc-blocks-components-select {
    display: none;
}

.pm-tip-client {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pm-tip-client__optiune {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 150px;
    padding: 13px 15px;
    border: 1px solid var(--milan-margine);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    line-height: 1.25;
    /* Tema dă etichetelor o margine de jos de 7,5px. Într-un flex cu
       `stretch`, numai una din cele două o plătește: ieșeau 47 și 54 px,
       două casete de înălțimi diferite una lângă alta. */
    margin: 0;
}

.pm-tip-client__optiune:hover {
    border-color: var(--milan-cyan);
}

/* `:has()` ține bifa și eticheta într-o singură stare, fără încă o clasă
   pusă din script — o stare ținută în două locuri ajunge să difere. */
.pm-tip-client__optiune:has(input:checked) {
    border-color: var(--milan-cyan);
    box-shadow: inset 0 0 0 1px var(--milan-cyan);
    background: #F2FAFE;
}

.pm-tip-client__optiune input {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: none;
    accent-color: var(--milan-cyan);
}

/* ── Datele de facturare pe firmă, scoase în evidență ──────────────

   Se colorează **câmpul**, nu învelișul: eticheta plutitoare a
   WooCommerce Blocks e `position: absolute; left: 16px` față de înveliș,
   deci o margine interioară pusă acolo ar fi mutat câmpul fără să mute și
   eticheta — adică le-ar fi dezaliniat (măsurat în pagină).

   Titlul grupului stă în marginea de deasupra, poziționat absolut, din
   același motiv: în flux normal ar fi căzut exact peste eticheta de la
   `top: 25px`. */
/* Specificitatea e aleasă ca să bată regula WooCommerce
   `.wc-block-components-form .wc-block-components-text-input input[type="text"]`
   (0,0,3,1), nu mai mult: fără asta fundalul nu se vedea deloc, iar cu
   `!important` n-am mai fi putut schimba nimic dintr-un singur loc. */
.wc-block-components-form .wc-block-components-address-form .wc-block-components-address-form__papetaria-milan-cui input[type="text"],
.wc-block-components-form .wc-block-components-address-form .wc-block-components-address-form__papetaria-milan-reg-com input[type="text"],
.wc-block-components-form .wc-block-components-address-form .wc-block-components-address-form__papetaria-milan-denumire-firma input[type="text"] {
    /* `!important` e aici o necesitate reală, nu o scurtătură: foaia de
       integrare a temei (`woocommerce-cart-checkout-blocks.min.css`) declară
       `[type="text"] { background: … !important }` — un selector de atribut,
       deci slab, dar cu `!important`, pe care nicio specificitate nu-l ajunge.
       Măsurat în pagină: fără flag, fundalul ieșea transparent. */
    background: #F2FAFE !important;
    border-color: #8FD0EE !important;
}

.wc-block-components-address-form__papetaria-milan-cui {
    margin-top: 44px !important;
}

.wc-block-components-address-form__papetaria-milan-cui::before {
    content: "Factură pe firmă";
    position: absolute;
    top: -28px;
    left: 0;
    font-weight: 600;
    font-size: 15px;
    color: var(--milan-bleumarin);
}

/* Nota de sub CUI o pune pluginul de proforme — acolo stă și căutarea la
   ANAF despre care vorbește. Dacă pluginul e oprit, nota dispare odată cu
   el, în loc să promită ceva ce nu se mai întâmplă. */
/* Răspunsul căutării la ANAF, sub notă. Un câmp golit fără nicio explicație
   arată a defect; aici scrie de ce e gol și ce are omul de făcut. */
.pm-raspuns-anaf {
    white-space: normal;
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--milan-text);
}

.pm-raspuns-anaf--eroare {
    color: #B42318;
}

.pm-nota-anaf {
    /* Învelișul câmpului are `white-space: nowrap` pentru eticheta lui
       plutitoare, iar nota îl moștenea: pe telefon ieșea pe un singur rând
       de 630px, tăiat la marginea ecranului. */
    white-space: normal;
    margin: 7px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #4A5568;
}

------papetariamilan46e3381e9569c09e--