/* ==========================================================================
   Mara Garden. Foaia de stil a site-ului.

   Un singur fisier, incarcat pe toate paginile, fiindca stilul global sta in
   tema si nu in module care se incarca pe jumatate de pagina.

   Paleta vine din machetele aprobate: fond crem, cartonase albe, cerneala
   verde-inchis, verde de actiune, accent deschis pe fond intunecat. Lumea
   filmata rama pe Acasa; magazinul e deschis si se citeste.

   Fonturile sunt locale, nu de pe Google. Un `font-display: swap` pe o
   familie adusa de pe alt domeniu muta layoutul la schimbul de font, iar
   masuratorile de pe alte proiecte au aratat ca asta e cea mai vizibila
   instabilitate din prima secunda. Nicio unitate `ch` in acest fisier, din
   acelasi motiv: `ch` se masoara in latimea cifrei zero a fontului curent.
   ========================================================================== */

/* ---------------------------------------------------------------- fonturi */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/geist-normal-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/geist-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fraunces, variabil pe `opsz` 9..144. Patru fisiere: doua stiluri x doua
   subseturi. Subsetul `latin-ext` nu e opcional pe romana: s, t si a cu
   accente stau acolo, iar fara el primul desen al titlului se face cu fontul
   de sistem exact pe literele care se vad. Masurat cu `document.fonts.check`
   pe "st" si pe italic, nu din ochi.

   Pana la 12.10.2026 familia era folosita in `acasa.css` fara nicio regula
   `@font-face`, deci titlurile se desenau cu Georgia si cele doua fisiere
   preincarcate nu erau cerute niciodata de nimeni. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-normal-var-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-normal-var-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-italic-var-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-italic-var-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------------- jetoane */

:root {
  --crem: #f6f4ec;
  --alb: #ffffff;
  --cerneala: #15251c;
  --cerneala-2: #26382d;
  --cerneala-3: #41544a;
  --cerneala-4: #5b6b5f;
  --verde: #3f6b2b;
  --verde-apasat: #325721;
  --verde-pal: #f2f6e8;
  --verde-pal-2: #e8efd9;
  --accent: #bfd98a;
  --chenar: #dcdccb;
  --chenar-fin: #eceadf;
  --chenar-apasat: #c3cfb4;
  --rosu: #8c2f21;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --lat: 1240px;
  --lat-text: 44rem;
  --gutiera: clamp(1rem, 4vw, 3.5rem);
  --r-mic: 10px;
  --r: 14px;
  --r-mare: 20px;
  --umbra: 0 1px 2px rgba(21, 37, 28, 0.04), 0 8px 24px -16px rgba(21, 37, 28, 0.14);

  /* Cele doua trepte mici de text, ca jetoane si nu ca valori scrise de 16
     ori. Pe telefon urca amandoua la 0,875rem: sub 14 px textul nu se citeste
     fara sa apropii telefonul, iar pe 390 px aici ajungeau 106 noduri,
     masurate cu `tools/diag-mobil.mjs` pe 18 adrese x 2 latimi. Pragul e 14,
     nu 12: 0,8125rem da 13 px, deci intra si el. */
  --mic: 0.8125rem;
  --mic-2: 0.75rem;
}
@media (max-width: 44rem) {
  :root { --mic: 0.875rem; --mic-2: 0.875rem; }
}

/* ------------------------------------------------------------------ bazele */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--crem);
  color: var(--cerneala);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;
  /* Cuvintele lungi din romana (`interschimbabilitate`, denumiri botanice)
     se rup la silaba in loc sa iasa din cadru. `break-word`, nu `anywhere`:
     `anywhere` rupe si acolo unde ar incapea, si strica tabelele. */
  overflow-wrap: break-word;
}
/* Axele lui Fraunces se fixeaza explicit. `opsz` mare pentru titluri, mic
   pentru bucatile mici de serif: la 1,1rem desenul de 144 are serife prea
   subtiri si se sparge la randare. `WONK` 0 scoate literele cu codita, care
   pe o denumire botanica in italic arata ca o greseala. */
h1, h2 { font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; }
.cifra, .mg-fisa__latin { font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0; }
.planta__latin, .mg-cos__latin, .mg-rezumat__nume i, .mg-comanda h3 { font-variation-settings: "opsz" 24, "SOFT" 0, "WONK" 0; }

h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.3125rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
h4 { font-size: 1.0625rem; font-weight: 600; margin: 0; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--verde); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--cerneala); }

:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Un cuvant de una sau doua litere, un numar sau un simbol de moneda nu are
   voie sa rama singur la capat de rand. Clasa se pune la rulare, pe text. */
.nowrap { white-space: nowrap; }

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

.sari-la {
  position: absolute; left: var(--gutiera); top: -4rem; z-index: 90;
  padding: 0.7rem 1.1rem; border-radius: 999px;
  background: var(--cerneala); color: var(--crem); text-decoration: none;
  transition: top 0.15s;
}
.sari-la:focus { top: 0.75rem; color: var(--crem); }

/* ------------------------------------------------------------- structuri */

.inv { width: 100%; max-width: var(--lat); margin-inline: auto; padding-inline: var(--gutiera); }
.inv--strans { max-width: 58rem; }

.sect { padding-block: clamp(3rem, 7vw, 6rem); }
.sect--alb { background: var(--alb); border-block: 1px solid var(--chenar); }
.sect--strans { padding-block: clamp(1rem, 2vw, 1.5rem); }
.sect--noapte { background: var(--cerneala); color: #e9efe2; }
.sect--noapte h1, .sect--noapte h2, .sect--noapte h3 { color: var(--alb); }
.sect--noapte a { color: var(--accent); }
.sect--noapte a:hover { color: var(--alb); }
/* Butonul isi pastreaza culoarea proprie si in sectiunea de noapte.
   Regula de deasupra, `.sect--noapte a`, e (0,1,1) si bate `.btn--deschis`,
   care e (0,1,0). Efectul: un buton cu fundal verde deschis primea si TEXT
   verde deschis, adica 1:1, text invizibil, iar `.btn--linie` ajungea la
   1,55:1 pe alb. Nu se vedea pe pagina de magazin cat timp invelisul
   WooCommerce era ingust si sonda nu ajungea la butoane; s-a aratat in clipa
   in care latimea a fost reparata. Un selector de clasa in plus, (0,2,1),
   inchide gaura pentru orice buton, nu doar pentru cele doua de azi. */
.sect--noapte a.btn { color: var(--cerneala); }
.sect--noapte a.btn:hover { color: var(--cerneala); }

.rand { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3rem); }

.grila { display: grid; gap: clamp(1.1rem, 2.4vw, 1.75rem); }
.grila--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr)); }
.grila--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr)); }
.grila--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
@media (max-width: 47.9375rem) {
  /* Patru anotimpuri se citesc ca un an intreg numai daca se vad impreuna.
     Unul sub altul, pe telefon, secțiunea cerea patru ecrane de derulare. */
  .grila--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
}

.text { max-width: var(--lat-text); }
.supra {
  display: block; font-size: var(--mic); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--cerneala-4);
  margin-bottom: 0.9rem;
}
.sect--noapte .supra { color: var(--accent); }
.plumb { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.68; color: var(--cerneala-3); }
.sect--noapte .plumb { color: #cfdcc6; }
.mic { font-size: 0.9375rem; line-height: 1.6; color: var(--cerneala-4); }

/* ---------------------------------------------------------------- antetul */

.bara {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--alb) 92%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--chenar);
}
.bara__inv {
  display: flex; align-items: center;
  /* Strâns pe 17.10.2026, ca sa incapa pastila de cautare din macheta. Masurat
     la 1440: sigla 200 px, meniul 704, dreapta 149, iar culoarele de 32 px
     duceau totalul la 1117 din 1240 disponibili — ramaneau 123, pe cand
     pastila cere in jur de 195 cu tot cu culoarul ei. */
  gap: clamp(0.9rem, 1.6vw, 1.5rem);
  min-height: 72px;
}
.sigla { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }

/* Sigla clientului, din 15.10.2026. Pana atunci aici statea un semn desenat
   de noi, cinci frunze in spirala in `currentColor`, cu numele scris alaturi
   in fontul temei. Clientul a trimis sigla adevarata; `tools/logo.py` o
   recompune pe orizontala din `LOGO MARA GARDEN.pdf` si scrie cele doua
   fisiere pe care le arata `mg_sigla()`.

   Doua imagini una peste alta, schimbate prin opacitate, fiindca varianta
   alba NU se poate obtine din cea in culori: scrisul are verde si maro, iar
   frunzele un degrade. Cea alba e scoasa din arborele de accesibilitate
   (`alt=""`), deci cititorul de ecran aude numele o singura data.

   `.sigla__pe-deschis` ramane in flux si da latimea; cea alba sta peste ea.
   Inaltimea e singura masura scrisa: latimea vine din raportul fisierului. */
.sigla__semn { position: relative; display: block; flex-shrink: 0; height: 54px; }
.sigla__semn img { display: block; height: 100%; width: auto; transition: opacity 0.25s ease; }
.sigla__pe-inchis { position: absolute; top: 0; left: 0; opacity: 0; }
/* In subsol bara nu mai strange inaltimea, deci sigla poate respira. */
.subsol .sigla__semn { height: 66px; }
.subsol .sigla__pe-inchis { opacity: 1; }
.subsol .sigla__pe-deschis { opacity: 0; }
@media (max-width: 30rem) { .sigla__semn { height: 42px; } }

.meniu { display: flex; align-items: center; gap: clamp(0.8rem, 1.1vw, 1.3rem); flex-grow: 1; margin: 0; padding: 0; list-style: none; }
.meniu a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.9375rem; font-weight: 500; text-decoration: none; color: var(--cerneala);
  white-space: nowrap;
}
.meniu a:hover, .meniu a[aria-current="page"] { color: var(--verde); }
.meniu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.35em; }

.bara__dreapta { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.bara__tel {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.9375rem; font-weight: 500; text-decoration: none; color: var(--cerneala); white-space: nowrap;
}
.bara__cos {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--chenar);
  color: var(--verde); text-decoration: none; background: var(--alb);
}
.bara__cos:hover { border-color: var(--chenar-apasat); color: var(--verde-apasat); }
.bara__cos b {
  position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
  border-radius: 999px; background: var(--verde); color: var(--alb);
  font-size: 0.6875rem; font-weight: 600; font-variant-numeric: tabular-nums;
}

.bara__buton {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--chenar);
  background: var(--alb); color: var(--cerneala); cursor: pointer; padding: 0;
}
@media (max-width: 60rem) {
  .bara__buton { display: inline-flex; order: 2; }
  .bara__dreapta { order: 1; }
  .meniu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--alb); border-bottom: 1px solid var(--chenar);
    padding: 0.5rem var(--gutiera) 1rem;
    max-height: calc(100vh - 72px); overflow-y: auto;
  }
  .meniu[hidden] { display: none; }
  .meniu a { display: flex; min-height: 50px; border-top: 1px solid var(--chenar-fin); }
  .bara__tel { display: none; }
  /* Pe telefon submeniul sta deschis, ca lista indentata in panou: pe o
     suprafata de atins nu exista trecere cu cursorul, iar un al doilea buton
     de deschidere pe fiecare element ar cere doua atingeri pentru un drum pe
     care panoul il arata oricum. */
  .meniu__chevron { display: none; }
  .submeniu { margin: 0; padding: 0 0 0 1rem; list-style: none; }
  .submeniu a { min-height: 44px; font-size: 0.9375rem; color: var(--cerneala-3); }
  /* Bannerul de cookie-uri sta `fixed` jos, cu `z-index: 70`, si pe telefon are
     263 px, adica aproape o treime de ecran: cat timp cititorul nu i-a raspuns,
     acopera ultimele intrari ale panoului, iar „Contact” nu se poate atinge.
     `elementFromPoint` pe el intorcea butonul „Doar cele necesare”. Masurat pe
     375x812, 16.10.2026.
     Cat timp meniul e deschis, bannerul nu are ce spune: iese, si se intoarce
     la inchiderea meniului. Nu se respinge si nu se considera acceptat, doar nu
     se deseneaza peste navigare. Acelasi tipar ca pastila anotimpului de pe
     pagina de start, care iese din acelasi motiv.
     Regula sta NUMAI in blocul de telefon: pe desktop `mg.js` scoate `hidden`
     de pe meniu, deci nelegata de latime ar fi ascuns bannerul pe tot
     desktopul. */
  :root:has(.meniu:not([hidden])) .cookie { display: none; }
}
@media (min-width: 60.0625rem) {
  .meniu[hidden] { display: flex; }
  /* Meniul aliniat la dreapta, nu lipit de sigla (cerere Radu, 16.10.2026).
     `flex-grow` iese si locul lui il ia `margin-left:auto`; `.bara__dreapta`
     isi pierde marginea automata, altfel spatiul liber s-ar imparti in doua si
     meniul ar rama la mijloc. */
  .meniu { flex-grow: 0; margin-left: auto; }
  .bara__dreapta { margin-left: 0; }

  /* Submeniul „Magazin”, pe coloane. Se deschide la trecerea cursorului si la
     focalizare: `:focus-within` prinde si legatura-parinte, care e ea insasi
     copil al elementului, deci panoul se deschide de la tastatura inainte ca
     vreo legatura din el sa fie focalizata. Fara JavaScript. */
  .meniu__cu-sub { position: relative; }
  .meniu__chevron { margin-left: 0.3rem; transition: transform 0.15s; }
  .meniu__cu-sub:hover .meniu__chevron,
  .meniu__cu-sub:focus-within .meniu__chevron { transform: rotate(180deg); }
  .submeniu {
    display: none; position: absolute; top: 100%; left: -1rem; z-index: 60;
    margin: 0; padding: 0.9rem 1rem; list-style: none;
    grid-template-columns: repeat(2, minmax(10.5rem, 1fr)); gap: 0.1rem 1.4rem;
    background: var(--alb); border: 1px solid var(--chenar);
    border-radius: var(--r-mare); box-shadow: 0 18px 40px rgba(21, 37, 28, 0.14);
  }
  .meniu__cu-sub:hover > .submeniu,
  .meniu__cu-sub:focus-within > .submeniu { display: grid; }
  .submeniu a {
    display: flex; align-items: center; min-height: 40px; white-space: nowrap;
    font-size: 0.9375rem; color: var(--cerneala-3);
  }
  /* Panoul alb pe o pagina cu erou. Pe paginile cu erou antetul e transparent
     peste fotografie, iar `body.are-erou .bara .meniu a` face TOATE legaturile
     din meniu albe, (0,3,2), deci bate `.submeniu a`, (0,1,1): panoul ieseau
     alb pe alb, gol la privire, cu cele treisprezece categorii in el. Prins la
     verificarea vizuala din 16.10.2026, pe /magazin/.
     Lantul de mai jos cantareste (0,4,2), deci trece inaintea lui. Pe antetul
     derulat nu e nevoie de nimic: acolo regula `s-derulat` vine mai jos in
     fisier si da chiar cerneala. Acelasi tipar e rezolvat deja o data pentru
     panoul de pe telefon, cateva sute de randuri mai jos. */
  body.are-erou .bara .meniu .submeniu a { color: var(--cerneala-3); }
  .submeniu a:hover,
  body.are-erou .bara .meniu .submeniu a:hover { color: var(--verde); }
}
/* A treia coloana abia cand incape: douasprezece categorii pe doua coloane fac
   un panou inalt, pe trei il fac lat. Pragul e masurat pe cea mai lunga
   eticheta, „Produse pentru gradina”. */
@media (min-width: 78rem) {
  .submeniu { grid-template-columns: repeat(3, minmax(10.5rem, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .meniu__chevron { transition: none; } }

/* --------------------------------------------------------------- butoane */

/* ------------------------------------------------- cautarea din antet */

/* Pastila cu lupa din macheta. Sta ca ultim element al meniului, deci pe
   desktop o aseaza singura alinierea la dreapta a meniului, iar pe telefon
   intra in panoul hamburgerului. */
.meniu__cauta { display: flex; }
.cauta {
  display: flex; align-items: center; gap: 0.3rem;
  height: 40px; padding: 0 0.3rem 0 0.85rem;
  border: 1px solid var(--chenar); border-radius: 999px; background: var(--alb);
  transition: border-color 0.15s;
}
.cauta:focus-within { border-color: var(--verde); }
.cauta__camp {
  width: 4rem; min-width: 0; border: 0; background: none; padding: 0;
  font-family: inherit; font-size: 0.9375rem; color: var(--cerneala);
}
/* Campul creste pe trepte, cu cat bara are loc. Sub 82rem nu creste: dispare,
   vezi regula de mai jos. */
@media (min-width: 85rem) { .cauta__camp { width: 7rem; } }
@media (min-width: 95rem) { .cauta__camp { width: 9rem; } }

/* **Intre hamburger si 82rem pastila NU incape, si nu se imbulzeste.**
   Masurat pe site-ul viu la 1152 px: sigla, cele sase intrari de meniu,
   telefonul si coșul cer deja 998 px din 1060, deci raman 62 pentru o pastila
   care are nevoie de 166. Imbulzita, `.sigla` (care nu are `flex-shrink: 0`)
   se strangea de la 200 la 157 px, imaginea ei ieșea peste meniu si „Magazin”
   se scria peste sigla clientei — exact asa a aratat prima incercare la 1440.
   Sub 60rem campul rama, dar in panoul hamburgerului, unde are tot randul. */
@media (min-width: 60.0625rem) and (max-width: 81.9375rem) {
  .meniu__cauta { display: none; }
}
.cauta__camp::placeholder { color: var(--cerneala-4); opacity: 1; }
.cauta__camp:focus { outline: none; }
/* Crucea proprie a lui `type=search` din WebKit: inalta cat campul si lipita
   de lupa, se citea ca al doilea buton. Se sterge cu tasta, ca peste tot. */
.cauta__camp::-webkit-search-cancel-button { display: none; }
.cauta__buton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0; padding: 0;
  border: 0; border-radius: 999px; background: none;
  color: var(--cerneala-4); cursor: pointer;
}
.cauta__buton:hover { color: var(--verde); }

@media (max-width: 60rem) {
  /* In panou campul e lat cat panoul, iar linia de deasupra il desparte de
     ultima intrare de meniu, ca pe celelalte randuri. */
  .meniu__cauta { padding-top: 0.8rem; margin-top: 0.3rem; border-top: 1px solid var(--chenar-fin); }
  .cauta { width: 100%; height: 46px; }
  .cauta__camp { width: auto; flex-grow: 1; font-size: 1rem; }
  .cauta__buton { width: 38px; height: 38px; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0 1.4rem;
  border-radius: 999px; border: 1px solid transparent;
  font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn--plin { background: var(--verde); color: #f6f4ec; }
.btn--plin:hover { background: var(--verde-apasat); color: var(--alb); }
.btn--linie { background: var(--alb); border-color: var(--chenar-apasat); color: var(--cerneala); }
.btn--linie:hover { border-color: var(--cerneala); color: var(--cerneala); }
.btn--deschis { background: var(--accent); color: var(--cerneala); }
.btn--deschis:hover { background: #cfe3a1; color: var(--cerneala); }
.btn--lat { width: 100%; }
.btn--mic { min-height: 44px; padding: 0 1.1rem; font-size: 0.9375rem; }

/* ----------------------------------------------- eroul paginilor interioare

   Pana pe 12.10.2026 paginile interioare incepeau cu un titlu pe crem, fara
   nicio imagine, iar pagina de start era o lume filmata: doua site-uri diferite
   lipite. Eroul aduce aceeasi gramatica, cu mijloace care nu cer un motor de
   scroll: fotografie lata, cerneala peste ea, titlu in Fraunces jos-stanga.

   Spalarile respecta regula masurata pe 12.10: un gradient care nu ajunge la
   transparent inainte de marginea cutiei lasa marginea opaca si se vede ca o
   dunga dreapta. Cea verticala e o intunecare completa a cadrului, deci nu are
   muchie interioara; cea orizontala ajunge la transparent la 86%, adica
   inaintea marginii din dreapta. */

.erou {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--cerneala); color: #eef3e8;
  display: flex; align-items: flex-end;
  min-height: clamp(19rem, 38vw, 30rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.entry-content > .erou:first-child { margin-top: -24px; }
.erou__foto { position: absolute; inset: 0; z-index: -2; }
.erou__foto img { width: 100%; height: 100%; object-fit: cover; }
.erou::before,
.erou::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.erou::before {
  background: linear-gradient(180deg,
    rgba(10, 20, 14, 0.34) 0%,
    rgba(10, 20, 14, 0.46) 42%,
    rgba(10, 20, 14, 0.80) 100%);
}
.erou::after {
  background: linear-gradient(90deg,
    rgba(10, 20, 14, 0.58) 0%,
    rgba(10, 20, 14, 0.30) 48%,
    rgba(10, 20, 14, 0) 86%);
}
.erou .inv { position: relative; }
.erou h1 { color: #fff; text-wrap: balance; max-width: 34rem; text-shadow: 0 1px 24px rgba(10, 20, 14, 0.5); }
.erou .plumb { color: #dce7d2; max-width: 36rem; }
.erou .supra { color: var(--accent); }
.erou .fir, .erou .fir a, .erou .fir li::after { color: #c3d2b8; }
.erou .fir a:hover { color: #fff; }

/* ------------------------------------------------------ fotografie si text */

.duo { display: grid; gap: clamp(1.5rem, 4vw, 3.25rem); align-items: center; }
@media (min-width: 52rem) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .duo--invers .duo__foto { order: 2; }
}
.duo__foto { margin: 0; }
.duo__foto img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-mare); box-shadow: 0 2px 4px rgba(21, 37, 28, 0.05), 0 26px 50px -34px rgba(21, 37, 28, 0.45);
}
.duo__foto figcaption, .foto__nota {
  margin-top: 0.6rem; font-size: var(--mic); color: var(--cerneala-4);
}
.sect--noapte .duo__foto figcaption, .sect--noapte .foto__nota { color: #a9bba1; }

/* Banda lata, intre doua sectiuni. Plina pe toata latimea ferestrei, fiindca
   taietura la marginea coloanei de text ar face-o sa arate ca o ilustratie
   lipita. */
.banda { position: relative; margin: 0; }
.banda img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 40rem) { .banda img { aspect-ratio: 3 / 2; } }
.banda figcaption {
  position: absolute; right: 0.9rem; bottom: 0.6rem;
  margin: 0; font-size: var(--mic-2); color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 6px rgba(10, 20, 14, 0.8);
}

/* Cartonas cu fotografie deasupra. Textul curge in coloana, iar ce e ancorat
   jos (o legatura, un pret) sta pe `margin-top: auto`, ca pe cartonasul de
   planta: un titlu de doua randuri nu mai dezaliniaza rindul. */
.carte--foto { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.carte--foto > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.carte--foto__corp { padding: clamp(1.2rem, 2.2vw, 1.7rem); display: flex; flex-direction: column; flex-grow: 1; }
.carte--foto h3 { min-height: calc(2 * 1.3 * 1.3125rem); }

/* ------------------------------------------------------------- cifrele */

.cifre { display: grid; gap: clamp(1.1rem, 2.4vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.cifre > div { padding-left: 1.1rem; border-left: 2px solid var(--chenar-apasat); }
/* „20 km” nu se rupe intre numar si unitate. Legarea NU se face cu un
   ` ` in text: ar ajunge in panoul clientului ca un caracter pe care
   nu-l vede si nu-l poate scoate. */
.cifre .cifra { white-space: nowrap; }
.sect--noapte .cifre > div { border-left-color: #3c5a46; }
.cifre p { margin: 0.5rem 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--cerneala-3); }
.sect--noapte .cifre p { color: #cfdcc6; }

/* --------------------------------------------------------------- citatul */

.citat {
  margin: 0; padding: 0 0 0 clamp(1.1rem, 3vw, 2rem);
  border-left: 3px solid var(--accent);
  font-family: var(--serif); font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 0;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.32; color: var(--cerneala-2);
  max-width: 38rem;
}
.sect--noapte .citat { color: #e9efe2; }

/* ------------------------------------------------------------- cartonase */

.carte {
  background: var(--alb); border: 1px solid var(--chenar); border-radius: var(--r-mare);
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  box-shadow: var(--umbra);
}
.carte--gol { background: transparent; border-style: dashed; }
.sect--noapte .carte { background: #1d3025; border-color: #2f4a39; }

.cifra { display: block; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; }
.cifra + * { margin-top: 0.6rem; }

/* ----------------------------------------------------- cartonasul de planta */

.plante {
  display: grid;
  /* Golul dintre randuri e aproape dublul celui dintre coloane: pe telefon,
     cu doua cartonase pe rand, un gol egal pe amandoua axele lipea pretul
     unei plante de fotografia celei de sub ea (20 px, masurat pe 16.10.2026).
     Cel de coloana rama strans, anume. */
  gap: 1.6rem 0.8rem;
  /* Doua pe rand pe telefon: cerere explicita a clientei. `minmax(0, 1fr)`, nu
     `1fr`: altfel o denumire lunga fara spatii umfla coloana peste ecran. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 48rem) {
  /* Trei pe rand, ca in macheta. Culoarul dintre coloane rama mic, circa 7%
     din latimea cardului: grila respira prin albul din interiorul cardurilor,
     nu prin spatiul dintre ele. */
  .plante { gap: clamp(1.1rem, 2.2vw, 1.6rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.planta {
  display: flex; flex-direction: column;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  transition: transform 0.15s;
}
.planta:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .planta:hover { transform: none; } }

.planta__foto {
  position: relative; aspect-ratio: 1 / 1; border-radius: 1rem;
  background: var(--verde-pal-2); overflow: hidden;
}
@media (min-width: 48rem) { .planta__foto { border-radius: 1.25rem; } }
.planta__foto img { width: 100%; height: 100%; object-fit: cover; }
.planta__etichete {
  position: absolute; top: 0.6rem; left: 0.6rem;
  display: flex; flex-wrap: wrap; gap: 0.3rem; max-width: calc(100% - 1.2rem);
}
.planta__eticheta {
  padding: 0.28rem 0.6rem; border-radius: 999px;
  background: var(--alb); border: 1px solid var(--chenar); color: var(--verde);
  font-size: var(--mic-2); font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.planta__eticheta--precomanda {
  background: var(--cerneala); border-color: var(--cerneala); color: var(--crem);
}

.planta__corp { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.8rem 0 0; flex-grow: 1; }
.planta__latin { font-family: var(--serif); font-style: italic; font-size: 1.1875rem; line-height: 1.2; }
/* Termenul reducerii. Sta sub pret, mai mic si mai stins, fiindca e o
   conditie, nu o chemare: un „pana la” scris la fel de tare ca pretul ar
   grabi cumparatorul, iar o planta nu se cumpara in graba. */
.planta__termen { margin: 0.25rem 0 0; font-size: var(--mic); color: var(--cerneala-4); }
.mg-fisa__pret .planta__termen { margin-top: 0.4rem; font-size: 0.875rem; }
.planta__latin a { color: inherit; text-decoration: none; }
.planta__latin a:hover { text-decoration: underline; }
.planta__popular { font-size: 0.875rem; color: var(--cerneala-4); }
.planta__sezon { display: flex; gap: 0.3rem; margin-top: 0.15rem; }
/* Cele trei randuri etichetă/valoare, cerute de clienta pe card: eticheta
   la stanga, valoarea la dreapta, o linie subtire deasupra fiecarui rand.
   Fara iconite: in macheta niciun rand nu are pictograma. */
.planta__date { margin: 0.15rem 0 0; }
.planta__rand {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
  padding: 0.4rem 0; border-top: 1px solid var(--chenar);
}
.planta__rand dt { font-size: var(--mic-2); color: var(--cerneala-4); }
.planta__rand dd {
  margin: 0; text-align: right; font-size: var(--mic); font-weight: 600;
  color: var(--cerneala); min-width: 0; overflow-wrap: break-word;
}
/* Pe telefon randul nu incape pe un rand: „Expunere” plus „Soare, semiumbra”
   cer 181 px, iar cardul are 161, fiindca intra doua pe rand. Masurat pe
   16.10.2026 pe site-ul viu: valoarea ieseau 28 px in afara cardului, peste
   coloana vecina, la 11 randuri din 36.
   **Si cum NU se masoara:** pagina nu capata derulare pe orizontala, deci o
   sonda pe `document.scrollWidth > innerWidth` trece curat. Defectul se vede
   numai comparand marginea dreapta a valorii cu marginea cardului.
   Leacul: sub 48rem randul devine bloc, cu eticheta deasupra si valoarea
   dedesubt. Pe desktop rama etichetă/valoare, ca in macheta. */
@media (max-width: 47.9375rem) {
  .planta__rand { display: block; padding: 0.3rem 0; }
  .planta__rand dd { text-align: left; margin-top: 0.05rem; }
}

/* Randul de jos: pretul la stanga, butonul de cos la dreapta. `margin-top:auto`
   il lipeste de baza cardului, ca randurile de pret ale vecinilor de pe acelasi
   rand sa se alinieze intre ele. In macheta nu erau aliniate, si se vedea la
   „Cryptomeria japonica Globosa Nana”, careia denumirea se rupe pe doua
   randuri: tot blocul de dedesubt cobora cu vreo 20 px. */
.planta__jos {
  margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--chenar);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem;
}
.planta__pret {
  margin: 0; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem;
  font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
@media (min-width: 48rem) { .planta__pret { font-size: 1.1875rem; } }
.planta__pret s { font-size: 0.875rem; font-weight: 400; color: var(--cerneala-4); }

/* Butonul de cos: cerc cu iconita, fara text, ca in macheta. Un buton cu
   „Adaugă în coș” scris pe el ocupa jumatate de card pe telefon, unde intra
   doua carduri pe rand. Textul exista pentru cititorul de ecran, in
   `aria-label`. 40 px pe telefon, 44 pe lat: norma 2.5.8 cere 24 px intre
   centrele a doua tinte vecine, iar aici butonul e singura tinta din rand. */
.planta__cos {
  margin-left: auto; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--chenar); background: var(--alb); color: var(--verde);
  text-decoration: none; transition: border-color 0.15s, background 0.15s;
}
@media (min-width: 48rem) { .planta__cos { width: 44px; height: 44px; } }
.planta__cos:hover, .planta__cos:focus-visible {
  border-color: var(--verde); background: var(--verde-pal-2); color: var(--verde);
}
.planta__cos.loading { opacity: 0.55; }
/* Legatura „Vizualizeați coșul” pe care o adauga WooCommerce dupa o adaugare
   prin AJAX. Fara regula asta intra in rand ca text mare si rupe cardul. */
.planta__jos .added_to_cart {
  flex-basis: 100%; font-size: var(--mic-2); text-underline-offset: 3px;
}

/* Frunza de sezon. Doua arce si o nervura, nu o stea cu colturi: forma
   simpla citeste ca frunza la 18px, o curba Bezier da crestaturi. */
.frunza { display: block; flex-shrink: 0; }

/* ------------------------------------------------------- pastile si filtre */

.pastile { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.pastila {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 1rem;
  border-radius: 999px; border: 1px solid var(--chenar); background: var(--alb);
  font-size: 0.9375rem; text-decoration: none; color: var(--cerneala);
}
.pastila:hover { border-color: var(--chenar-apasat); color: var(--cerneala); }
.pastila[aria-current="true"] { background: var(--cerneala); border-color: var(--cerneala); color: var(--crem); }
.pastila--goala { color: var(--cerneala-4); }
.pastila--goala:hover { color: var(--cerneala-3); }

/* ------------------------------------------ bara laterala de filtre */

/* Lista cu bara laterala. Pana la 64rem bara sta deasupra grilei, ca un
   `details` inchis de `mg.js`; de la 64rem in sus trece in coloana din stanga,
   ca in macheta. Pragul nu e 48rem, unde grila trece la trei coloane: cu bara
   si trei coloane la 48rem cardul ar fi 158 px, mai ingust decat pe telefon.
   Intre 48 si 64rem grila rama lata, cu filtrele strânse sus. */
.magazin { display: grid; gap: clamp(1.1rem, 2.5vw, 2.5rem); }
@media (min-width: 64rem) {
  .magazin { grid-template-columns: 15.25rem minmax(0, 1fr); align-items: start; }
  /* Bara urmareste derularea: pe o lista de 12 plante inalta de doua ecrane,
     o bara fixata in capul paginii cere derulare in sus pentru fiecare bifa.
     `max-height` plus derulare proprie, ca bara sa nu depaseasca ecranul cand
     catalogul va avea toate cele 13 categorii populate. */
  .magazin__filtre {
    position: sticky; top: calc(var(--bara-h) + 1rem);
    max-height: calc(100dvh - var(--bara-h) - 2rem); overflow-y: auto;
    /* Bara proprie de derulare, subtire si stinsa: cu cea obisnuita, coloana
       de filtre capata un jgheab gri inalt cat ecranul, lipit de prima coloana
       de fotografii. */
    scrollbar-width: thin; scrollbar-color: var(--chenar-apasat) transparent;
    /* Culoarul dintre bara si prima coloana de carduri; fara el umbra de
       focalizare a unei casete atinge fotografia vecina. */
    padding-right: 0.25rem;
  }
}
.magazin--fara-filtre { display: block; }

/* O bifa duce adresa la `#rezultate`, ca pagina sa se intoarca la grila si nu
   in capul ei. Fara marginea asta tinta se opreste exact sub bara lipita de
   sus, care e inalta de `--bara-h`, deci randul de filtre bifate si numarul de
   rezultate ajung ASCUNSE sub antet: vazut pe site-ul viu la prima bifa. */
.magazin__lista { scroll-margin-top: calc(var(--bara-h) + 1.25rem); }

/* Butonul de deschidere, numai pe telefon si pe tableta. Pe desktop `details`
   e deschis si fara rezumat: acolo filtrele nu se ascund niciodata. */
.filtre-inv { border: 1px solid var(--chenar); border-radius: var(--r); background: var(--alb); }
.filtre-inv__buton {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  min-height: 48px; padding: 0 1rem; cursor: pointer;
  font-size: 0.9375rem; font-weight: 600; color: var(--cerneala);
  list-style: none;
}
.filtre-inv__buton::-webkit-details-marker { display: none; }
.filtre-inv__buton svg { flex-shrink: 0; color: var(--cerneala-4); }
.filtre-inv[open] .filtre-inv__buton { border-bottom: 1px solid var(--chenar-fin); }
@media (min-width: 64rem) {
  .filtre-inv { border: 0; border-radius: 0; background: none; }
  .filtre-inv__buton { display: none; }
}

.filtre { padding: 1rem; }
@media (min-width: 64rem) { .filtre { padding: 0; } }

/* „Filtre”, capul barei. In macheta e un rand mic, nu un titlu de secti-une:
   serif ar fi concurat cu titlul paginii. */
.filtre__cap {
  margin: 0 0 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--chenar);
  font-size: 1.0625rem; font-weight: 600; color: var(--cerneala);
}
@media (max-width: 63.9375rem) { .filtre__cap { display: none; } }

.filtre__grup { margin: 0; padding: 0 0 1.1rem; border: 0; }
.filtre__grup + .filtre__grup { padding-top: 1.1rem; border-top: 1px solid var(--chenar-fin); }
/* `legend` nu primeste `display:flex` in toate randarile si nu se poate stiliza
   ca un bloc obisnuit pretutindeni; aici are nevoie doar de tipar, deci rama
   `legend`, bun pentru cititorul de ecran (grupeaza casetele). */
.filtre__titlu {
  /* `float` plus latime intreaga: un `legend` obisnuit TAIE linia de deasupra
     grupului si o lasa sa iasa numai in dreapta textului, ca o coada. Asa
     arata la prima randare pe telefon: „PERIOADA DE ÎNFLORIRE ————”. Flotat,
     `legend` se poarta ca un bloc obisnuit si linia trece intreaga pe sub el.
     `clear` pe lista, ca randurile sa nu urce langa titlu. */
  float: left; width: 100%;
  padding: 0; margin: 0 0 0.6rem;
  font-size: var(--mic-2); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cerneala-4);
}

.filtre__lista { clear: both; margin: 0; padding: 0; list-style: none; }
/* Inaltimea de atins sta pe RAND, nu pe eticheta. Cand o tinea eticheta
   (`min-height: 40px` pe `label`), randul iesea de 51 px, eticheta de 40 se
   aseza in capul lui, iar caseta, centrata pe rand, cobora cu 5 px sub
   mijlocul textului. Masurat pe site-ul viu, 17.10.2026. Acum randul da
   inaltimea, eticheta si-o ia din text, si amandoua se centreaza pe aceeasi
   linie. */
.filtre__rand { display: flex; align-items: center; gap: 0.6rem; min-height: 40px; }
/* 20 px caseta, 40 px randul: norma 2.5.8 cere 24 px intre centrele a doua
   tinte vecine, iar eticheta e legata de caseta prin `for`, deci toata lungimea
   randului e tinta. */
.filtre__rand input {
  width: 20px; height: 20px; margin: 0; flex-shrink: 0;
  accent-color: var(--verde); cursor: pointer;
}
.filtre__rand label {
  /* `center`, nu `baseline`: pe linia de baza, eticheta si numarul se asezau
     dupa prima linie de text, iar fata de caseta de bifat randul iesea cu
     vreo doi pixeli mai sus — se vedea la „Ger, pana la -20 °C” si la
     „Persistent (vesnic verde)”, singurele etichete care se rup in doua.
     Centrat, textul sta in dreptul casetei oricate randuri ar avea. */
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  /* `margin: 0` NU e de prisos. Stilurile de formular ale temei dau oricarui
     `label` un `margin-bottom` de 10,5 px; aici el intra in inaltimea randului
     (35 px eticheta + 10,5 margine = 46), iar caseta de bifat, centrata pe
     rand, cobora cu 5 px sub mijlocul textului. Marginea nu se vedea ca spatiu,
     fiindca randurile sunt oricum departate: se vedea doar ca o caseta prea
     jos. Masurat pe site-ul viu, 17.10.2026. */
  flex-grow: 1; min-width: 0; margin: 0; padding: 0.45rem 0;
  font-size: 0.9375rem; line-height: 1.4; color: var(--cerneala-2); cursor: pointer;
}
.filtre__rand label:hover { color: var(--cerneala); }
.filtre__rand input:checked + label { font-weight: 600; color: var(--cerneala); }
.filtre__et { min-width: 0; }
/* Numarul: cifre de aceeasi latime, ca sirul de numere din bara sa fie aliniat
   la dreapta chiar si cand sare de la 9 la 11. */
.filtre__nr {
  flex-shrink: 0; font-size: var(--mic-2); font-variant-numeric: tabular-nums;
  color: var(--cerneala-4);
}
/* Optiunea fara nicio planta rama VIZIBILA, dar stinsa: macheta arata „0”
   langa „Toamna” si „Iarna”, iar ascunsa ar fi lasat impresia ca site-ul nu
   cunoaste anotimpul. */
.filtre__rand--gol { opacity: 0.45; }
.filtre__rand--gol input, .filtre__rand--gol label { cursor: default; }
.filtre__rand--gol label:hover { color: var(--cerneala-2); }

.filtre__jos { margin-top: 0.5rem; display: grid; gap: 0.7rem; justify-items: center; }
.filtre__sterge { font-size: 0.875rem; color: var(--cerneala-4); }
/* Cu JavaScript, fiecare bifa trimite formularul singur, deci butonul nu mai
   are ce face. Clasa o pune `mg.js`; fara el butonul rama pe ecran si filtrele
   merg cu o apasare in plus. */
.filtre--js .filtre__jos button { display: none; }
.filtre--js .filtre__jos { justify-items: start; }

/* Randul de filtre bifate, deasupra grilei. */
.facete-active {
  margin: 0 0 1.1rem; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
}
.facete-active a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 36px; padding: 0 0.75rem; border-radius: 999px;
  background: var(--verde-pal); border: 1px solid var(--chenar-apasat);
  font-size: var(--mic); color: var(--cerneala-2); text-decoration: none;
}
.facete-active a:hover { border-color: var(--cerneala); color: var(--cerneala); }
.facete-active a span[aria-hidden] { font-size: 1.05rem; line-height: 1; color: var(--cerneala-4); }
.facete-active__tot { background: none !important; border-style: dashed !important; }

/* Randul cu numarul de rezultate si ordonarea. Era scris cu `style` in sablon;
   a ieșit in foaie fiindca acum are si o a doua stare, pe telefon, unde cele
   doua bucati nu mai incap pe un rand. */
.magazin__rand {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1rem;
  align-items: center; justify-content: space-between; margin-bottom: 1.75rem;
}

/* ------------------------------------------------------- fir si paginare */

.fir { margin: 0 0 1rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--cerneala-4); }
.fir li::after { content: "\203A"; margin-left: 0.5rem; color: var(--chenar-apasat); }
.fir li:last-child::after { content: none; }
.fir a { color: var(--cerneala-4); }

/* Numerotarea paginilor din lista de plante. Marcajul e in
   `woocommerce/loop/pagination.php`: un singur reper de navigare, randul care
   spune pe ce pagina esti, apoi cifrele. */
.paginare { margin-top: clamp(2rem, 4vw, 3rem); }
.paginare__stare {
  margin: 0 0 0.7rem; font-size: 0.875rem; color: var(--cerneala-4);
  font-variant-numeric: tabular-nums;
}
.paginare__lista {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none;
}
.paginare__lista .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 0.6rem;
  border-radius: 12px; border: 1px solid var(--chenar); background: var(--alb);
  text-decoration: none; color: var(--cerneala); font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.paginare__lista a.page-numbers:hover { border-color: var(--verde); color: var(--verde); }
.paginare__lista .page-numbers.current {
  background: var(--cerneala); border-color: var(--cerneala); color: var(--crem);
}
/* Punctele de suspensie nu sunt un buton: nu primesc chenar si nu ocupa un
   patrat cat o cifra, fiindca ar arata ca o pagina pe care nu poti apasa. */
.paginare__lista .page-numbers.dots {
  min-width: 1.5rem; border-color: transparent; background: none; color: var(--cerneala-4);
}

/* ---------------------------------------------------------------- tabele */

.tabel-inv { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { text-align: left; padding: 0.8rem 0.9rem; border-top: 1px solid var(--chenar-fin); overflow-wrap: break-word; vertical-align: top; }
th { font-weight: 600; }
thead th { border-top: 0; border-bottom: 1px solid var(--chenar); }

/* Peste doua coloane, pe telefon tabelul devine cartonase: un tabel lat pe
   390px fie se taie, fie se micsoreaza pana nu se mai citeste. Capetele de
   coloana se pun din `data-cap` la rulare. */
@media (max-width: 46rem) {
  .tabel--carduri thead { display: none; }
  .tabel--carduri tr {
    display: block; margin-bottom: 0.9rem; padding: 0.9rem 1rem;
    background: var(--alb); border: 1px solid var(--chenar); border-radius: var(--r);
  }
  .tabel--carduri td { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.6rem; border-top: 0; padding: 0.35rem 0; }
  .tabel--carduri td::before { content: attr(data-cap); font-weight: 600; color: var(--cerneala-4); }
}

/* -------------------------------------------------------------- formulare */

.camp { display: flex; flex-direction: column; gap: 0.45rem; margin: 0; }
.camp > label, .camp__et { font-size: 0.875rem; font-weight: 500; }
.camp input[type="text"], .camp input[type="email"], .camp input[type="tel"],
.camp input[type="number"], .camp input[type="search"], .camp select, .camp textarea,
.mg-intrare {
  min-height: 48px; padding: 0 0.9rem;
  border-radius: 12px; border: 1px solid var(--chenar-apasat); background: var(--alb);
  font-family: inherit; font-size: 1rem; color: var(--cerneala);
  width: 100%;
}
.camp textarea { min-height: 7rem; padding: 0.7rem 0.9rem; line-height: 1.55; resize: vertical; }
.camp small { font-size: var(--mic); color: var(--cerneala-4); }
.camp input:user-invalid, .camp select:user-invalid { border-color: var(--rosu); }

.bifa { display: flex; gap: 0.75rem; align-items: flex-start; margin: 0; }
.bifa input { width: 22px; height: 22px; margin: 0.65rem 0 0; accent-color: var(--verde); flex-shrink: 0; }
.bifa label { padding: 0.55rem 0; font-size: 0.9375rem; line-height: 1.55; }

fieldset { margin: 0; padding: 0; border: 0; }
legend { padding: 0; }

.caseta {
  padding: 0.9rem 1.1rem; border-radius: var(--r); background: var(--verde-pal);
  border: 1px solid var(--chenar-apasat); font-size: 0.9375rem; line-height: 1.6; color: var(--cerneala-2);
}
.caseta--nota { background: var(--crem); border-color: var(--chenar); color: var(--cerneala-3); }

/* ------------------------------------------------------------- liste pas */

.pasi { margin: 0; padding: 0; list-style: none; counter-reset: pas; display: grid; gap: 1.1rem; }
.pasi > li { counter-increment: pas; display: flex; gap: 0.9rem; }
.pasi > li::before {
  content: counter(pas);
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--cerneala);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 600;
}

.bifate { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
.bifate > li { display: flex; gap: 0.7rem; align-items: flex-start; }
.bifate > li::before {
  content: ""; flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 0.22rem;
  background: var(--verde);
  clip-path: polygon(14% 48%, 0 62%, 38% 100%, 100% 22%, 86% 8%, 36% 70%);
}

/* ------------------------------------------------------------------ subsol */

.subsol { background: var(--cerneala); color: #cfdcc6; padding-block: clamp(2.5rem, 5vw, 4rem) 0; }
.subsol h2, .subsol h3 { color: var(--alb); font-family: var(--sans); font-size: var(--mic); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.subsol a { color: #e2ebd7; text-decoration: none; }
.subsol a:hover { color: var(--alb); text-decoration: underline; }
.subsol ul { margin: 0.9rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; font-size: 0.9375rem; }
/* Cinci coloane: marca si patru liste de legaturi. `auto-fit` cu minimum de
   13rem incapea doar patru pe 1128px, deci „Legal" cadea singura pe al doilea
   rand si subsolul arata rupt. Pe ecran lat coloanele se scriu explicit, cu
   marca mai lata decat listele; mai jos de atat se impacheteaza singure.
   Masurat pe pagina vie inainte de reparatie: 5 copii, 4 coloane, 2 randuri. */
.subsol__grila { display: grid; gap: clamp(1.6rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); }
@media (min-width: 62rem) {
  .subsol__grila { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); }
}
.subsol__jos {
  margin-top: clamp(2rem, 4vw, 3rem); padding-block: 1.1rem;
  border-top: 1px solid #2f4a39;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem;
  font-size: var(--mic); color: #a9bda0;
}
.subsol__jos p { margin: 0; }

/* Subsolul pe telefon, cerere Radu 13.10.2026: „sa incapa toata intr-un
   ecran" si „redu spatierea intre meniul din footer".

   Masurat inainte, pe pagina vie: 1025 px pe un ecran de 844. Cauza nu era
   spatierea, ci numarul de coloane. `auto-fit` cu `minmax(min(100%, 10.5rem),
   1fr)` are nevoie de 2 x 168 + 25,6 = 361,6 px pentru doua coloane, iar pe
   390 px rama 358 dupa gutiere: lipsesc trei px si cele cinci grupuri se pun
   unul sub altul, unde se pierde ecranul. Deci se impun doua coloane.

   Cele doua cereri ale lui Radu se bat una cu alta, si compromisul se alege
   aici, scris: spatiul dintre legaturi scade la zero, dar cutia fiecarei
   legaturi urca la 25 px. Norma 2.5.8 din WCAG 2.2 cere ca doua cercuri de
   24 px centrate pe doua tinte vecine sa nu se intersecteze, adica centrele
   la 24 px cel putin. Inainte: 19 px de legatura plus 8,8 px de spatiu, deci
   27,8 px intre centre. Dupa: 25 px, cu un px peste prag. Lista se stramteaza
   cu 10%, nu mai mult, fiindca dincolo de atat tintele intra sub norma;
   restul economiei vine din coloane. Litera rama de 15 px, iar textul nu se
   micsoreaza: pragul de 14 px de mai sus bate reducerea de inaltime. */
@media (max-width: 30rem) {
  .subsol { padding-block: 1.75rem 0; }
  .subsol__grila { gap: 1.1rem 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Marca si fraza de sub ea peste amandoua coloanele: pe 169 px fraza ar
     curge pe sapte rânduri si ar inalta subsolul mai mult decat economisesc
     coloanele. */
  .subsol__grila > :first-child { grid-column: 1 / -1; }
  .subsol h2 { letter-spacing: 0.06em; }
  .subsol ul { margin-top: 0.5rem; gap: 0; }
  .subsol ul a { display: flex; align-items: center; min-height: 25px; }
  .subsol__jos { margin-top: 1.1rem; padding-block: 0.8rem; gap: 0.5rem 1.2rem; }
}

/* ------------------------------------------------------------- whatsapp */

.wa {
  position: fixed; right: clamp(0.9rem, 3vw, 1.6rem); bottom: clamp(0.9rem, 3vw, 1.6rem);
  z-index: 60;
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 52px; padding: 0 1.1rem 0 0.9rem;
  border-radius: 999px; background: #1f7a3a; color: #ffffff;
  text-decoration: none; font-size: 0.9375rem; font-weight: 500;
  box-shadow: 0 10px 30px -10px rgba(21, 37, 28, 0.5);
}
.wa:hover { background: #19632f; color: #ffffff; }
.wa__text { display: none; }
@media (min-width: 40rem) { .wa__text { display: inline; } }

/* --------------------------------------------------------------- cookie */

.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--alb); border-top: 1px solid var(--chenar);
  box-shadow: 0 -10px 30px -20px rgba(21, 37, 28, 0.4);
}
.cookie[hidden] { display: none; }
.cookie__inv { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; padding-block: 1.1rem; }
.cookie__text { flex: 999 1 22rem; min-width: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--cerneala-3); margin: 0; }
.cookie__butoane { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ------------------------------------------------------------- tipografie
   Blocurile de text lung din paginile legale si din descrieri.
   ------------------------------------------------------------------------ */

.proza > * + * { margin-top: 1.1em; }
.proza h2 { margin-top: 2.4em; }
.proza h2:first-child { margin-top: 0; }
.proza h3 { margin-top: 1.9em; }
.proza ul, .proza ol { padding-left: 1.4rem; }
.proza li + li { margin-top: 0.45em; }
.proza dl { margin: 0; }
.proza dt { font-weight: 600; margin-top: 1.1em; }
.proza dd { margin: 0.25em 0 0; color: var(--cerneala-3); }

/* ---------------------------------------------------------------- tiparire
   Fisa plantei pe o singura foaie A4: fara meniu, fara cos, fara spatii
   goale. Restul paginilor se tipăresc curat, dar nu sunt proiectate pentru
   hartie.
   ------------------------------------------------------------------------ */

@media print {
  :root { --crem: #ffffff; }
  body { background: #ffffff; font-size: 10.5pt; line-height: 1.45; }
  .bara, .subsol, .wa, .cookie, .sari-la, .paginare, .pastile,
  .fir, .nu-tipari, form, .planta__eticheta { display: none !important; }
  .sect { padding-block: 0; }
  a { color: #000000; text-decoration: none; }
  h1 { font-size: 22pt; }
  h2 { font-size: 14pt; }
  h3 { font-size: 11pt; }
  .carte { border: 1px solid #999999; box-shadow: none; break-inside: avoid; }
  .tabel-inv { overflow: visible; }
  @page { size: A4; margin: 14mm 14mm 12mm; }
}

/* ==========================================================================
   MAGAZINUL
   Clasele folosite de sabloanele din `wp-theme/maragarden/woocommerce/`.
   Stau in aceeasi foaie si nu intr-un fisier incarcat conditionat: antetul cu
   cosul apare pe toate paginile, deci o a doua cerere pentru magazin ar fi
   fost o cerere pentru ceva care e deja peste tot.
   ========================================================================== */

.gol, .mg-gol {
  display: inline-block;
  min-width: 7rem;
  border-bottom: 1px solid var(--chenar-apasat);
  color: transparent;
  user-select: none;
}

/* ------------------------------------------------------------- fisa plantei */

.mg-fisa__latin {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.08;
  margin: 0;
}
.mg-fisa__popular { margin: 0.35rem 0 0; font-size: 1.1875rem; font-weight: 600; }

.mg-fisa__pret { margin-top: 1.4rem; padding: 1.1rem 1.25rem; border-radius: var(--r); background: var(--verde-pal); border: 1px solid var(--chenar-apasat); }
.mg-fisa__suma { margin: 0; font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.mg-fisa__suma del { font-size: 1.125rem; font-weight: 400; color: var(--cerneala-4); }
.mg-fisa__suma ins { text-decoration: none; }

.stoc { margin: 0.6rem 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--cerneala-3); }
.stoc--precomanda { color: #6b4e13; }

.mg-fisa__cos { margin-top: 1.4rem; }
.mg-fisa__cos .quantity { display: inline-flex; align-items: center; gap: 0.6rem; margin-right: 0.7rem; }
.mg-fisa__cos .quantity label { font-size: 0.875rem; font-weight: 500; }
.mg-fisa__cos input.qty, .mg-fisa__cos .quantity input {
  width: 5.5rem; min-height: 48px; padding: 0 0.7rem;
  border-radius: 12px; border: 1px solid var(--chenar-apasat); background: var(--alb);
  font-family: inherit; font-size: 1rem; color: var(--cerneala);
}
.mg-fisa__cos form.cart { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.7rem; }
.mg-fisa__cos button[type="submit"], .mg-fisa__cos .single_add_to_cart_button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 1.6rem;
  border: 0; border-radius: 999px; background: var(--verde); color: #f6f4ec;
  font-family: inherit; font-size: 1.0625rem; font-weight: 500; cursor: pointer;
}
.mg-fisa__cos button[type="submit"]:hover { background: var(--verde-apasat); }
.mg-fisa__cos table.variations { width: 100%; border-collapse: collapse; margin: 0 0 0.9rem; }
.mg-fisa__cos table.variations th,
.mg-fisa__cos table.variations td { display: block; border: 0; padding: 0 0 0.45rem; }
.mg-fisa__cos table.variations select {
  width: 100%; min-height: 48px; padding: 0 0.9rem;
  border-radius: 12px; border: 1px solid var(--chenar-apasat); background: var(--alb);
  font-family: inherit; font-size: 1rem; color: var(--cerneala);
}
.mg-fisa__cos .woocommerce-variation-price { margin-bottom: 0.7rem; font-size: 1.3125rem; font-weight: 600; }
.mg-fisa__cos .reset_variations { font-size: 0.875rem; }

.mg-repere { margin: 1.6rem 0 0; }
.mg-repere > div {
  display: grid; grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr); gap: 0.9rem;
  padding: 0.65rem 0; border-top: 1px solid var(--chenar);
}
.mg-repere dt { font-size: 0.9375rem; color: var(--cerneala-4); }
.mg-repere dd { margin: 0; font-size: 1rem; font-weight: 500; }

/* ------------------------------------------------------------------ galeria */

.mg-galerie__mare {
  aspect-ratio: 4 / 5; border-radius: var(--r-mare); overflow: hidden;
  background: var(--verde-pal-2); border: 1px solid var(--chenar);
}
.mg-galerie__mare img { width: 100%; height: 100%; object-fit: cover; }
.mg-galerie__fara { display: flex; align-items: center; justify-content: center; height: 100%; }

.mg-galerie__mini { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.8rem 0 0; padding: 0; list-style: none; }
.mg-galerie__mini a {
  display: block; width: 5rem; height: 5rem; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--chenar); background: var(--verde-pal-2);
}
.mg-galerie__mini a[aria-current="true"] { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde); }
.mg-galerie__mini img { width: 100%; height: 100%; object-fit: cover; }

.mg-galerie__credit, .credit-foto {
  display: block; margin-top: 0.7rem;
  font-size: var(--mic); line-height: 1.5; color: var(--cerneala-4);
}
.credit-foto a { color: var(--cerneala-4); }

/* ---------------------------------------------------------- sezon, cultivare */

.mg-sezon { padding: 1.25rem; border-radius: var(--r); background: var(--crem); }
@media (max-width: 47.9375rem) { .mg-sezon { padding: 0.9rem; } }
.mg-sezon h3 { margin: 0.7rem 0 0; font-size: 1.0625rem; font-weight: 600; }
.mg-sezon p { margin: 0.35rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--cerneala-3); }

.mg-cultivare { margin: 1rem 0 0; }
.mg-cultivare > div {
  display: grid; grid-template-columns: minmax(7rem, 9.5rem) minmax(0, 1fr); gap: 0.85rem;
  padding: 0.6rem 0; border-top: 1px solid var(--chenar-fin);
}
.mg-cultivare dt { font-size: 0.875rem; color: var(--cerneala-4); }
.mg-cultivare dd { margin: 0; font-size: 0.9375rem; line-height: 1.5; }

/* „Cum se ingrijeste” e un tabel de doua coloane, nu o lista de proza.

   Eticheta statea cu 17 px mai jos decat textul ei, pe fiecare rand: tabelul
   traieste intr-un bloc `.proza`, iar `.proza dt` da `margin-top: 1.1em`
   listelor de definitii din proza curenta. Aici marginea nu are ce cauta, deci
   se reseteaza, iar randul se aliniaza pe prima linie de text, nu pe cutie.

   Eticheta e scrisa ca microeticheta, majuscule mici si spatiate, ca la
   celelalte capete de rubrica din tema (vezi `.eticheta`), ca cele trei randuri
   sa se citeasca drept coloana, nu drept trei paragrafe cu capul ingrosat.
   Linia de jos inchide tabelul: fara ea, ultimul rand se varsa in textul
   urmator. */
.mg-ingrijire {
  margin: 1.1rem 0 0;
  border-top: 1px solid var(--chenar);
}
.mg-ingrijire > div {
  display: grid; grid-template-columns: minmax(6.5rem, 10rem) minmax(0, 1fr);
  gap: 0 1.5rem; align-items: start;
  padding: 0.9rem 0; border-bottom: 1px solid var(--chenar-fin);
}
.mg-ingrijire > div:last-child { border-bottom: 1px solid var(--chenar); }
.mg-ingrijire dt {
  margin: 0; padding-top: 0.2rem;
  font-size: 0.75rem; font-weight: 600; line-height: 1.5;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--cerneala-4);
}
.mg-ingrijire dd { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--cerneala-3); }

/* Sub 36rem coloana de eticheta ar lasa textului doua treimi de rand, deci
   eticheta urca deasupra. */
@media (max-width: 36rem) {
  .mg-ingrijire > div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .mg-ingrijire dt { padding-top: 0; }
}

/* ----------------------------------------------------- galeria care urmareste

   Coloana din dreapta, cu pretul, fisa si reperele, e mai lunga decat galeria,
   deci sub fotografii ramanea un gol cat jumatate de ecran si sectiunea se
   citea dezechilibrata. Galeria urmareste derularea pana la capatul randului,
   ca la bara de filtre din magazin, si se opreste singura acolo: un element
   lipicios nu trece de marginea de jos a parintelui.

   `align-self: start` e obligatoriu: intr-un flex, elementul se intinde implicit
   pe toata inaltimea randului, iar un element inalt cat parintele nu are pe ce
   sa alunece si `sticky` ramane fara efect. */
@media (min-width: 64rem) {
  .mg-fisa__galerie {
    position: sticky; top: calc(var(--bara-h) + 1rem);
    align-self: start;
  }
}
@media print {
  .mg-fisa__galerie { position: static; }
}

/* ---------------------------------------------------------------------- cosul */

.mg-cos { background: var(--alb); border: 1px solid var(--chenar); border-radius: var(--r-mare); overflow: hidden; }
.mg-cos__rand {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem;
  padding: 1.2rem 1.35rem; border-bottom: 1px solid var(--chenar-fin);
}
.mg-cos__foto {
  width: 5.75rem; height: 7rem; flex-shrink: 0; border-radius: 12px; overflow: hidden;
  background: var(--verde-pal-2); display: flex; align-items: center; justify-content: center;
}
.mg-cos__foto img { width: 100%; height: 100%; object-fit: cover; }
.mg-cos__nume { flex: 999 1 15rem; min-width: 0; }
.mg-cos__latin { font-family: var(--serif); font-style: italic; font-size: 1.3125rem; line-height: 1.15; display: block; }
.mg-cos__latin a { color: inherit; text-decoration: none; }
.mg-cos__latin a:hover { text-decoration: underline; }
.mg-cos__nume small { display: block; margin-top: 0.25rem; font-size: 0.875rem; color: var(--cerneala-4); }
.mg-cos__stare { display: block; margin-top: 0.45rem; font-size: var(--mic); color: var(--cerneala-4); }
.mg-cos__cant { display: flex; align-items: center; gap: 0.6rem; }
.mg-cos__cant label { font-size: 0.875rem; color: var(--cerneala-4); }
.mg-cos__cant input { width: 4.75rem; min-height: 44px; padding: 0 0.6rem; border-radius: 10px; border: 1px solid var(--chenar-apasat); background: var(--alb); font-family: inherit; font-size: 1rem; }
.mg-cos__suma { min-width: 8.5rem; text-align: right; font-size: 1.1875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mg-cos__scoate {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--chenar); color: var(--cerneala-4);
}
.mg-cos__scoate:hover { border-color: var(--rosu); color: var(--rosu); }

.mg-cos__actiuni { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; padding: 1.1rem 1.35rem; }
.mg-cos__actiuni label { font-size: 0.875rem; color: var(--cerneala-4); }

.mg-total { margin: 1.1rem 0 0; }
.mg-total > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0; border-top: 1px solid var(--chenar-fin);
}
.mg-total dt { font-size: 0.9375rem; color: var(--cerneala-4); }
.mg-total dd { margin: 0; font-size: 1rem; font-variant-numeric: tabular-nums; }
.mg-total__final { padding-top: 1rem; border-top: 1px solid var(--chenar-apasat); margin-top: 0.4rem; }
.mg-total__final dt { font-size: 1.0625rem; font-weight: 600; color: var(--cerneala); }
.mg-total__final dd { font-size: 1.4375rem; font-weight: 600; }

/* ------------------------------------------------------------------- comanda */

.mg-comanda .form-row { display: flex; flex-direction: column; gap: 0.45rem; margin: 0 0 1.1rem; }
.mg-comanda .form-row label { font-size: 0.875rem; font-weight: 500; }
.mg-comanda .form-row label .required { color: var(--rosu); text-decoration: none; }
.mg-comanda .form-row .description,
.mg-comanda .form-row small { font-size: var(--mic); line-height: 1.5; color: var(--cerneala-4); }
.mg-comanda input[type="text"], .mg-comanda input[type="email"], .mg-comanda input[type="tel"],
.mg-comanda input[type="number"], .mg-comanda select, .mg-comanda textarea {
  width: 100%; min-height: 48px; padding: 0 0.9rem;
  border-radius: 12px; border: 1px solid var(--chenar-apasat); background: var(--alb);
  font-family: inherit; font-size: 1rem; color: var(--cerneala);
}
.mg-comanda textarea { min-height: 6rem; padding: 0.7rem 0.9rem; line-height: 1.55; resize: vertical; }
.mg-comanda h3 { margin: 0 0 1.1rem; font-family: var(--serif); font-weight: 400; font-size: 1.4375rem; }
.mg-comanda .woocommerce-billing-fields__field-wrapper { display: grid; gap: 0 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.mg-comanda .form-row-wide { grid-column: 1 / -1; }
.mg-comanda .mg-bifa, .mg-comanda .woocommerce-form__label-for-checkbox {
  display: flex; gap: 0.75rem; align-items: flex-start;
}
.mg-comanda input[type="checkbox"] { width: 22px; height: 22px; margin: 0.6rem 0 0; accent-color: var(--verde); flex-shrink: 0; }

/* Casetele firmei apar numai daca s-a cerut factura pe firma. Ascunse cu
   :has(), ca sa nu depinda de JavaScript. Fara suport pentru :has() rama
   vizibile, adica degeaba, nu stricate. */
.mg-firma { display: grid; gap: 0 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.mg-comanda:has(#mg_factura_firma:not(:checked)) .mg-firma { display: none; }

.mg-plata { margin-top: 1.2rem; }
.mg-plata .woocommerce-checkout-review-order-table { display: none; }
.mg-plata ul.wc_payment_methods { margin: 0; padding: 0; list-style: none; }
.mg-plata li.wc_payment_method {
  display: flex; gap: 0.85rem; align-items: flex-start;
  padding: 1.1rem 1.25rem; border: 2px solid var(--verde); border-radius: var(--r); background: var(--verde-pal);
}
.mg-plata li.wc_payment_method input[type="radio"] { width: 22px; height: 22px; margin: 0.15rem 0 0; accent-color: var(--verde); flex-shrink: 0; }
.mg-plata li.wc_payment_method label { font-size: 1.0625rem; font-weight: 600; }
.mg-plata .payment_box { margin: 0.4rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--cerneala-3); }
.mg-plata .payment_box p { margin: 0; }
.mg-plata #place_order {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 54px; margin-top: 1.3rem; padding: 0 1.4rem;
  border: 0; border-radius: 999px; background: var(--verde); color: #f6f4ec;
  font-family: inherit; font-size: 1.125rem; font-weight: 500; cursor: pointer;
}
.mg-plata #place_order:hover { background: var(--verde-apasat); }
.mg-plata .woocommerce-terms-and-conditions-wrapper { margin-top: 1.2rem; }
.mg-nota-plata { margin: 0.9rem 0 0; font-size: var(--mic); line-height: 1.5; color: var(--cerneala-4); }

.mg-rezumat__rand {
  display: flex; gap: 0.9rem; align-items: flex-start;
  padding: 1rem 0; border-top: 1px solid var(--chenar-fin);
}
.mg-rezumat__foto {
  width: 3rem; height: 3.65rem; flex-shrink: 0; border-radius: 10px; overflow: hidden;
  background: var(--verde-pal-2); display: flex; align-items: center; justify-content: center;
}
.mg-rezumat__foto img { width: 100%; height: 100%; object-fit: cover; }
.mg-rezumat__nume { flex: 999 1 0; min-width: 0; }
.mg-rezumat__nume i { font-family: var(--serif); font-style: italic; font-size: 1.125rem; line-height: 1.2; display: block; }
.mg-rezumat__nume small { display: block; margin-top: 0.2rem; font-size: var(--mic); color: var(--cerneala-4); }
.mg-rezumat__rand b { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------- mesajele WooCommerce */

.woocommerce-message, .woocommerce-info, .woocommerce-error {
  margin: 0 0 1.6rem; padding: 1rem 1.2rem; border-radius: var(--r);
  list-style: none; font-size: 0.9375rem; line-height: 1.6;
}
.woocommerce-message { background: var(--verde-pal); border: 1px solid var(--chenar-apasat); }
.woocommerce-info { background: var(--crem); border: 1px solid var(--chenar); }
.woocommerce-error { background: #fcf0ee; border: 1px solid #e3bdb6; color: #6b2317; }
.woocommerce-error li + li { margin-top: 0.4rem; }
.woocommerce-message .button, .woocommerce-info .button {
  display: inline-flex; align-items: center; min-height: 40px; margin-left: 0.6rem; padding: 0 1rem;
  border-radius: 999px; border: 1px solid var(--chenar-apasat); background: var(--alb);
  color: var(--cerneala); text-decoration: none; font-size: 0.875rem;
}

/* Ordonarea, numararea si paginarea listei */
.woocommerce-ordering select {
  min-height: 44px; padding: 0 0.8rem; border-radius: 999px;
  border: 1px solid var(--chenar); background: var(--alb);
  font-family: inherit; font-size: 0.9375rem; color: var(--cerneala);
}

/* ------------------------------------------------------- fisa pe hartie

   O foaie A4, compacta, fara meniu, fara cos, fara spatii goale. Ce dispare
   e tot ce nu ajuta pe hartie; ce apare e subsolul cu datele firmei, care pe
   ecran ar fi fost o repetare a subsolului site-ului.
   ------------------------------------------------------------------------ */

.mg-tipar-subsol { display: none; }

@media print {
  .mg-fisa .sect { padding-block: 0; }
  .mg-fisa .sect--alb, .mg-fisa .sect--noapte { background: #fff; border: 0; color: #000; }
  .mg-fisa .rand { gap: 10mm; }
  .mg-fisa__latin { font-size: 20pt; }
  .mg-fisa__popular { font-size: 12pt; }
  .mg-fisa__suma { font-size: 16pt; }
  .mg-fisa__pret { background: #f4f4ef; border: 1px solid #999999; padding: 8pt 10pt; }
  .mg-galerie__mare { aspect-ratio: auto; max-height: 72mm; border: 1px solid #999999; break-inside: avoid; }
  .mg-galerie__mini { display: none; }
  .mg-repere > div, .mg-cultivare > div, .mg-ingrijire > div { padding: 3pt 0; border-color: #cccccc; }
  .mg-sezon { background: #f7f7f3; padding: 7pt 8pt; break-inside: avoid; }
  .mg-sezon h3 { font-size: 10pt; }
  .mg-sezon p { font-size: 8.5pt; }
  .grila { gap: 5mm; }
  .mg-tipar-subsol {
    display: block; margin-top: 6mm; padding-top: 3mm;
    border-top: 1.5pt solid #15251c; font-size: 8.5pt; line-height: 1.45;
  }
  .mg-tipar-subsol p { margin: 0; }
  /* Adresa din subsolul fisei e legatura din 20.10.2026 (vine codata, o compune
     scriptul). Pe hartie trebuie sa se citeasca tot ca text simplu. */
  .mg-tipar-subsol a { color: inherit; text-decoration: none; }
}

/* --------------------------------------------------------- formularul */
.mg-form { display: flex; flex-direction: column; gap: 1.1rem; }
.mg-form__rand { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* ---------------------------------------------- pagina de start, in WordPress

   WordPress inchide ce randeaza un sablon de bloc intr-un `.wp-site-blocks`.
   Pe orice pagina obisnuita e inofensiv; pe pagina de start e o cutie de
   10.800 px in fluxul documentului, pe langa distantierul lumii filmate, deci
   pagina capata o a doua inaltime si antetul lumii aluneca cu 24 px.
   `display: contents` scoate cutia si lasa copiii exact unde erau, fara sa
   atinga nimic din restul site-ului.
   --------------------------------------------------------------------------- */

body.home .wp-site-blocks,
body.home .wp-site-blocks > .wp-block-group { display: contents; }

/* Coșul și finalizarea erau trase cu 100 px la stânga față de antet.
   Cauza, măsurată pe pagina vie: `div.woocommerce`, învelișul pe care îl pune
   WooCommerce în jurul șablonului, primește `max-width: 1000px` din dispunerea
   „constrânsă” a WordPress, dar NU și marginile automate, deci cutia lui
   începe la x = 0 în loc să fie centrată. `.inv` dinăuntru se centrează corect
   — doar că într-o cutie de 1000 px lipită de marginea din stânga, nu în cele
   1440 ale ecranului. Titlul ieșea la 56 px, iar sigla din antet la 156.
   Pe celelalte pagini nu se vedea, fiindcă acolo nu există învelișul acesta.
   Centrarea rămâne treaba lui `.inv`, una singură pe tot site-ul. */
.entry-content > .woocommerce,
.wp-block-post-content > .woocommerce,
body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce {
  /* `!important` aici nu e lene. Selectorul de mai sus se potriveste pe
     element, verificat cu `matches()` in browser, si tot pierde: latimea de
     1000 px vine dintr-un stil de dispunere GENERAT de WordPress, pe care nu
     il scriem noi si care se schimba de la o versiune la alta. Peste un stil
     generat, singura regula stabila e una care nu depinde de cum arata
     selectorul lui. */
  max-width: none !important;
  margin-inline: 0 !important;
}


/* Butonul plutitor WhatsApp sta fix in coltul din dreapta jos, 221x52 px, iar
   coloana de continut se termina la 1284 pe un ecran de 1440: intra peste ea cu
   vreo 90 px. Pe o pagina lunga asta nu deranjeaza, fiindca textul trece pe sub
   el in timp ce derulezi. Deranjeaza pe paginile SCURTE, unde ultimul bloc se
   opreste langa marginea de jos si RAMANE sub buton: pe cos, butonul acoperea
   „Mergeti la comandă”, adica exact apasarea pentru care exista pagina.
   Leacul nu e sa micsoram butonul, ci sa nu lasam nimic sa se odihneasca sub el:
   ultimul rand de continut primeste loc cat butonul plus o gutiera. */
.subsol { scroll-margin-bottom: 6rem; }
body:has(.wa) .sect:last-of-type,
body:has(.wa) .woocommerce .sect:last-of-type { padding-bottom: 6.5rem; }

/* ==========================================================================
   Lotul din 12.10.2026, noaptea. Cererile lui Radu, in ordinea lor.
   ========================================================================== */

/* ------------------------------------- benzile crem din jurul paginii

   Dispunerea de blocuri a nucleului pune 24px intre fratii din
   `.entry-content` si inaintea subsolului din sablonul de parte. Pe o pagina
   care incepe cu o fotografie lata si se termina cu subsolul, cei 24px se vad
   ca doua dungi crem pe care nu le-a cerut nimeni.

   Masurat pe pagina vie inainte de reparatie (`tools/diag-benzi.mjs`):
   eroul se termina la 579 si sectiunea urmatoare incepe la 603; `main` se
   termina la 3470 si subsolul incepe la 3494. Pe `/magazin/`, unde sablonul e
   PHP si nu exista invelisul de bloc, ambele erau deja 0.

   Selectoarele de aici sunt (0,2,0) si bat regula nucleului, care e
   `:root :where(.is-layout-flow) > *`, adica (0,1,0). Fara `!important`. */

.entry-content > .erou + * { margin-top: 0; }
.wp-site-blocks > .wp-block-template-part { margin-top: 0; }

/* ----------------------------------------- antetul peste fotografia eroului

   A treia dunga crem era insusi antetul: o banda alba la 92% deasupra
   fotografiei. Pe paginile care incep cu un erou, fotografia trece acum pe sub
   antet, iar antetul e transparent cat timp pagina e sus si devine opac dupa
   primele 40 de pixeli de derulare (`body.s-derulat`, pus din `mg.js`).

   Clasa `are-erou` se pune din `<head>`, inainte de prima desenare, ca
   inaltimea antetului sa nu se scada din erou dupa ce pagina s-a asezat: o
   mutare de 73px la o zecime de secunda dupa incarcare se vede. */

:root { --bara-h: 73px; }

body.are-erou .entry-content > .erou:first-child { margin-top: calc(-24px - var(--bara-h)); }
body.are-erou main > .erou:first-child { margin-top: calc(-1 * var(--bara-h)); }
body.are-erou .erou:first-child,
body.are-erou .entry-content > .erou:first-child {
  padding-top: calc(var(--bara-h) + clamp(2.5rem, 6vw, 4.5rem));
}

body.are-erou .bara {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
body.are-erou .bara .sigla,
body.are-erou .bara .meniu a,
body.are-erou .bara__tel,
body.are-erou .bara__buton { color: #fff; }
body.are-erou .bara .meniu a:hover,
body.are-erou .bara .meniu a[aria-current="page"] { color: var(--accent); }
body.are-erou .bara .sigla__pe-inchis { opacity: 1; }
body.are-erou .bara .sigla__pe-deschis { opacity: 0; }
body.are-erou .bara__cos,
body.are-erou .bara__buton {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
}
/* Pe telefon meniul se deschide ca panou sub antet: acolo fondul rama alb,
   altfel textul alb ar cadea peste pagina. */
@media (max-width: 60rem) {
  body.are-erou .meniu:not([hidden]) { background: var(--alb); }
  body.are-erou .meniu:not([hidden]) a { color: var(--cerneala); }
}

body.are-erou.s-derulat .bara {
  background: color-mix(in srgb, var(--alb) 92%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom-color: var(--chenar);
}
body.are-erou.s-derulat .bara .sigla,
body.are-erou.s-derulat .bara .meniu a,
body.are-erou.s-derulat .bara__tel,
body.are-erou.s-derulat .bara__buton { color: var(--cerneala); }
body.are-erou.s-derulat .bara .sigla__pe-inchis { opacity: 0; }
body.are-erou.s-derulat .bara .sigla__pe-deschis { opacity: 1; }
body.are-erou.s-derulat .bara__cos,
body.are-erou.s-derulat .bara__buton { background: var(--alb); border-color: var(--chenar); }
/* Coșul pe bara albă: verde. Fără culoarea de aici rămânea albul din starea
   transparentă, deci iconul dispărea pe fundal alb. */
body.are-erou.s-derulat .bara__cos { color: var(--verde); }
body.are-erou.s-derulat .bara__cos:hover { color: var(--verde-apasat); }

/* ------------------------------------------------------------ orfanii

   `text-wrap: pretty` cere browserului sa nu lase ultimul cuvant singur pe
   rand. Unde nu e sustinut, legarea din `mg.js` face acelasi lucru pe ultimele
   doua cuvinte. Doua mecanisme pentru aceeasi regula, fiindca niciunul nu
   acopera singur toate browserele. */

p, li, dd, dt, figcaption, blockquote, summary { text-wrap: pretty; }
h1, h2, h3, h4, .plumb { text-wrap: balance; }

/* ---------------------------------------------------- parcursul comenzii

   Pasii erau o lista cu numere intr-un cerc. Acum sunt un parcurs: discurile
   stau pe o linie care se umple pe masura ce pasii intra in ecran, iar pasul
   atins se ridica. Linia se deseneaza cu un gradient a carui oprire e mutata
   din `--umplut`, pus de `mg.js`; fara script, `--umplut` rama 100% si
   parcursul se vede intreg, deci pagina nu depinde de el. */

.parcurs {
  --umplut: 100%;
  --disc: 3rem;
  position: relative;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(1.1rem, 2.2vw, 1.6rem);
  counter-reset: parcurs;
}
/* Linia trece prin centrele discurilor, iar discul e acum in grila, deci
   centrul lui e la marginea interioara a cartonasului plus o raza. */
.parcurs { --pad: clamp(1.1rem, 2vw, 1.5rem); }
.parcurs::before {
  content: "";
  position: absolute;
  left: calc(var(--pad) + var(--disc) / 2 - 1px);
  top: calc(var(--pad) + var(--disc) / 2);
  bottom: calc(var(--pad) + var(--disc) / 2);
  width: 2px;
  background:
    linear-gradient(180deg, var(--verde) 0 var(--umplut), var(--chenar) var(--umplut) 100%);
  transition: background 0.6s ease;
}
/* Discul sta in grila, nu absolut. Asezat absolut la `left: 0` ajungea lipit
   de bordura cartonasului, fiindca marginea interioara nu se aplica unui
   element scos din flux, iar titlul ii trecea cu vreo noua pixeli pe deasupra.
   In grila primeste marginea cartonasului ca toate celelalte, iar titlul se
   centreaza pe inaltimea lui. */
.parcurs__pas {
  position: relative;
  display: grid;
  grid-template-columns: var(--disc) 1fr;
  column-gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
  background: var(--alb);
  border: 1px solid var(--chenar);
  border-radius: var(--r);
  padding: var(--pad);
  box-shadow: var(--umbra);
  opacity: 1;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.parcurs__pas > h3 {
  grid-column: 2; grid-row: 1;
  align-self: center;
  margin: 0;
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
}
.parcurs__pas > p {
  grid-column: 2; grid-row: 2;
  margin: 0.6rem 0 0;
  color: var(--cerneala-3);
  max-width: 46rem;
}
.parcurs__nr {
  grid-column: 1; grid-row: 1;
  align-self: center;
  width: var(--disc);
  height: var(--disc);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--alb);
  border: 2px solid var(--chenar);
  color: var(--cerneala-4);
  font-family: var(--serif);
  font-size: 1.375rem;
  font-variation-settings: "opsz" 24, "SOFT" 0, "WONK" 0;
  line-height: 1;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.parcurs__pas:hover,
.parcurs__pas:focus-within {
  transform: translateY(-2px);
  border-color: var(--chenar-apasat);
  box-shadow: 0 1px 2px rgba(21, 37, 28, 0.05), 0 18px 36px -22px rgba(21, 37, 28, 0.3);
}
.parcurs__pas.e-atins .parcurs__nr {
  background: var(--verde);
  border-color: var(--verde);
  color: #fff;
}
@media (min-width: 56rem) {
  .parcurs { grid-template-columns: repeat(2, 1fr); }
  .parcurs::before { display: none; }
  .parcurs__pas:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ------------------------------------------------------- datele livrarii

   Trei coloane cu aceeasi structura: eticheta, valoarea scurta, o nota de
   aceeasi lungime la toate trei. Inaltimea vine din grila, nu dintr-o valoare
   fixa care ar taia textul la alta latime de ecran. */

.specuri {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  background: var(--alb);
  border: 1px solid var(--chenar);
  border-radius: var(--r-mare);
  overflow: hidden;
  box-shadow: var(--umbra);
}
.spec {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border-left: 1px solid var(--chenar-fin);
}
.spec:first-child { border-left: 0; }
.spec__et {
  font-size: var(--mic-2);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verde);
}
.spec__val {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.3;
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0;
}
.spec__nota { margin: auto 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--cerneala-4); }
@media (max-width: 52rem) {
  .spec { border-left: 0; border-top: 1px solid var(--chenar-fin); }
  .spec:first-child { border-top: 0; }
}

/* ----------------------------------------------------------- intrebarile

   `<details>` nativ: se deschide fara script si rama accesibil de la
   tastatura. Sageata proprie, fiindca triunghiul implicit difera de la un
   browser la altul si strica alinierea. */

.intrebari { margin-top: clamp(1.6rem, 3vw, 2.2rem); display: grid; gap: 0.7rem; }
.intrebare {
  background: var(--alb);
  border: 1px solid var(--chenar);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.intrebare[open] { border-color: var(--chenar-apasat); box-shadow: var(--umbra); }
.intrebare > summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(1rem, 2vw, 1.3rem) clamp(3rem, 5vw, 3.5rem) clamp(1rem, 2vw, 1.3rem) clamp(1.1rem, 2.2vw, 1.5rem);
  position: relative;
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.8vw, 1.1875rem);
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0;
  line-height: 1.4;
}
.intrebare > summary::-webkit-details-marker { display: none; }
.intrebare > summary::after {
  content: "";
  position: absolute;
  right: clamp(1.1rem, 2.2vw, 1.5rem);
  top: 50%;
  width: 0.65rem;
  height: 0.65rem;
  margin-top: -0.4rem;
  border-right: 2px solid var(--verde);
  border-bottom: 2px solid var(--verde);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
.intrebare[open] > summary::after { transform: rotate(-135deg); margin-top: -0.15rem; }
.intrebare > summary:hover { color: var(--verde); }
.intrebare > summary:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
.intrebare__corp {
  padding: 0 clamp(1.1rem, 2.2vw, 1.5rem) clamp(1.2rem, 2.2vw, 1.5rem);
  color: var(--cerneala-3);
}
.intrebare__corp p { margin: 0; }

/* ------------------------------------------------------------ chemarea

   Sectiunea de incheiere a paginilor. Inainte era o banda inchisa la culoare
   asezata exact deasupra subsolului, care e tot inchis: doua suprafete de
   aceeasi greutate una peste alta, fara nicio treapta intre ele. Acum e
   deschisa la culoare si cu relief: o balta de lumina verde, o fotografie
   decupata care iese din cadru si un titlu mare in Fraunces.

   Contrastul cu subsolul vine din schimbarea de valoare: crem deschis, apoi
   verde adanc. */

.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--verde-pal);
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -30% -10% auto auto;
  width: min(46rem, 70%);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(63, 107, 43, 0.22), rgba(63, 107, 43, 0) 100%);
  pointer-events: none;
}
.cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto auto -40% -12%;
  width: min(34rem, 60%);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(191, 217, 138, 0.38), rgba(191, 217, 138, 0) 100%);
  pointer-events: none;
}
.cta__grila {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .cta__grila { grid-template-columns: 1.15fr 0.85fr; }
}
.cta .supra { color: var(--verde); }
.cta h2 {
  margin: 0.7rem 0 0;
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  max-width: 14em;
}
.cta__plumb {
  margin: 1.2rem 0 0;
  font-size: clamp(1.0625rem, 1.9vw, 1.1875rem);
  line-height: 1.65;
  color: var(--cerneala-3);
  max-width: 38rem;
}
.cta__butoane { margin-top: clamp(1.6rem, 3vw, 2.2rem); display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* `overflow: hidden` pe rama ar taia caseta cu citatul, fiindca ea iese
   intentionat in afara fotografiei spre stanga. Taia odata cu ea si marginea
   ei interioara, deci litera de inceput ajungea lipita de muchie si caseta
   parea rupta, nu asezata. Rotunjirea si umbra stau pe imagine, care e un
   singur element si nu are nevoie de decupare pe parinte. */
.cta__rama {
  position: relative;
  aspect-ratio: 4 / 3;
}
.cta__rama img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--r-mare);
  box-shadow: 0 2px 4px rgba(21, 37, 28, 0.06), 0 40px 70px -40px rgba(21, 37, 28, 0.5);
}
/* Citatul se aseaza peste coltul fotografiei, nu sub ea: asa cele doua piese
   fac un singur obiect, nu doua cutii una langa alta. */
.cta__citat {
  position: absolute;
  left: clamp(-1.5rem, -2vw, -0.5rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  max-width: min(22rem, 86%);
  margin: 0;
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1.2rem, 2.2vw, 1.6rem);
  background: var(--cerneala);
  color: #e9efe2;
  border-radius: var(--r);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.1875rem);
  line-height: 1.4;
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0;
  box-shadow: 0 20px 40px -24px rgba(21, 37, 28, 0.6);
}
@media (max-width: 62rem) {
  .cta__rama { aspect-ratio: 16 / 10; }
  .cta__citat { left: 1rem; }
}

/* -------------------------------------------------------- subsolul

   Cerere Radu, 12.10 noaptea: subsolul se face cu o fotografie pe fundal si o
   culoare verde deasupra, ca textul sa rama lizibil. Voalul are doua straturi:
   o culoare plina la 88%, care duce contrastul textului alb peste 7:1 oriunde
   ar cadea fotografia, si un gradient care inchide marginea de jos, unde stau
   datele firmei cu corp mic. Fotografia se incarca din CSS, deci nu intra in
   calea critica a paginii. */

.subsol {
  position: relative;
  isolation: isolate;
  background: var(--cerneala);
  color: #d4e0c9;
  overflow: hidden;
}
.subsol__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../img/subsol.webp");
  background-size: cover;
  background-position: center 62%;
}
.subsol::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(11, 24, 16, 0.50) 0%, rgba(11, 24, 16, 0.72) 55%, rgba(11, 24, 16, 0.88) 100%),
    linear-gradient(0deg, rgba(31, 58, 38, 0.62), rgba(31, 58, 38, 0.62));
  pointer-events: none;
}
.subsol h2, .subsol h3 { color: #fff; }
.subsol a { color: #e7f0dc; }
.subsol__jos { border-top-color: rgba(233, 239, 226, 0.22); color: #b9c9af; }

/* Pe tiparire fotografia nu are ce cauta. */
@media print {
  .subsol__foto, .subsol::before { display: none; }
}

/* Bifele din doua cartonase vecine porneau de la inaltimi diferite, fiindca
   paragraful de deasupra are alta lungime la fiecare. Lipite de baza cutiei,
   se aliniaza intre ele la orice latime, fara o inaltime fixa pe paragraf.
   (Verificare vizuala, 12.10.2026.) */
.carte--foto__corp .bifate { margin-top: auto; padding-top: 1.1rem; }

/* Datele firmei pe doua coloane. Cu sase perechi una sub alta, caseta din
   dreapta ajungea de doua ori mai inalta decat coloana de text din stanga.
   `columns` si nu `grid`, fiindca o lista de definitii nu are invelis pe
   pereche: `break-after: avoid` tine eticheta lipita de valoarea ei.
   (Cerere Radu, 12.10.2026.) */
@media (min-width: 30rem) {
  .date-firma { columns: 2; column-gap: clamp(1rem, 2vw, 1.6rem); }
  .date-firma dt { break-after: avoid; }
  .date-firma dd { break-before: avoid; }
}

/* ------------------------------------------------- harta zonei de livrare

   Cerere Radu, 12.10.2026 noaptea: zona de livrare devine sectiune proprie,
   cu o harta pe care zonele sunt marcate, iar cea peste care trece cursorul
   se evidentiaza mai tare decat celelalte.

   Desenul e SVG scris de noi, din contururi administrative deschise (vezi
   `tools/harta.py`): o harta adusa printr-un `<iframe>` de la un furnizor ar
   incarca scripturi pe langa bannerul de cookie-uri.

   Evidentierea e numai CSS. `:has()` leaga cele doua cadre si legenda intre
   ele fara o linie de JS: cand o zona e sub cursor oriunde in sectiune,
   celelalte se retrag, iar perechea ei din celalalt cadru si randul din
   legenda ies in fata odata cu ea.

   Ordinea regulilor conteaza. Regula de retragere are specificitate (0,3,0),
   tinuta joasa cu `:where()`; regula directa de mai jos are tot (0,3,0) si
   vine dupa ea, deci castiga; iar regulile pe zona, cu `:has()`, au (0,5,0)
   si bat tot. Intr-un browser fara `:has()` toate regulile care il contin
   sunt aruncate si rama evidentierea directa, pe zona de sub cursor. */

.harta { margin-top: clamp(1.8rem, 3.5vw, 2.8rem); }
.harta__cadre {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.2vw, 1.6rem);
  align-items: stretch;
}
/* Sub doua coloane, cadrele se aseaza unul sub altul si primesc o latime
   maxima. Fara ea, cadrul s-ar intinde de la 340 px pe telefon pana la 744 pe
   o tableta, iar numele judetelor, scrise in unitati de viewBox, ar trece de
   la 8 px la 19. Cu latimea plafonata, un singur corp de litera acopera tot
   intervalul. (Masurat cu `tools/diag-harta.mjs`.) */
@media (max-width: 52rem) {
  .harta__cadre {
    grid-template-columns: minmax(0, 1fr);
    max-width: 30rem;
    margin-inline: auto;
  }
}

.harta__cadru {
  margin: 0;
  background: var(--alb);
  border: 1px solid var(--chenar);
  border-radius: var(--r-mare);
  padding: clamp(0.8rem, 1.6vw, 1.2rem);
  box-shadow: var(--umbra);
}
.harta__cadru { display: flex; flex-direction: column; }
.harta__svg { display: block; width: 100%; height: auto; }
/* Panza tine locul uscatului de dincolo de judetele desenate. Fara ea, coltul
   de sud al cadrului larg, acolo unde se termina tara, ramanea alb pe alb si
   se citea ca o taietura in hartă. */
.harta__panza { fill: var(--chenar-fin); }

/* Numele si punctul pepinierei stau PESTE zone, deci ar prinde ele cursorul:
   pe „Giurgiu” scris in mijlocul judetului, zona de dedesubt nu se mai
   evidentia. Sunt desen, nu tinta. (Gasit de `tools/diag-harta.mjs`, nu de
   ochi: pe o captura arata identic.) */
.harta__nume, .harta__pin, .harta__panza, .harta__fundal,
.harta__legatura { pointer-events: none; }

/* Linia care leaga un nume de conturul pe care il numeste, acolo unde numele
   nu incape inauntru. */
.harta__legatura line {
  stroke: var(--cerneala-4); stroke-width: 1.6; stroke-opacity: 0.75;
}
.harta__legatura circle { fill: var(--cerneala-4); fill-opacity: 0.75; }
.harta__cadru figcaption {
  margin-top: auto;
  padding-top: 0.8rem;
  font-size: var(--mic);
  line-height: 1.5;
  color: var(--cerneala-4);
}

/* Fundalul: judetele din jur, ca harta sa nu para o insula. */
.harta__fundal path { fill: var(--chenar-fin); stroke: var(--crem); stroke-width: 2; }

.harta__zona { outline: none; }
.harta__zona path {
  stroke-linejoin: round;
  transition: fill-opacity 0.18s ease, stroke-width 0.18s ease;
}
.harta__zona[data-zona="vecine"] path {
  /* In cadrul marit zona e un dreptunghi cu o gaura in forma Ilfovului, deci
     are nevoie de regula par-impar ca gaura sa ramana gaura. */
  fill-rule: evenodd;
  fill: var(--verde-pal-2); fill-opacity: 0.4;
  stroke: var(--verde); stroke-opacity: 0.4; stroke-width: 1.6;
}
.harta__zona[data-zona="oras"] path {
  fill: var(--accent); fill-opacity: 0.7;
  stroke: var(--verde); stroke-opacity: 0.75; stroke-width: 1.8;
}
.harta__zona[data-zona="apropiat"] path {
  fill: var(--verde); fill-opacity: 0.8;
  stroke: var(--cerneala); stroke-opacity: 0.55; stroke-width: 1.8;
}

.harta__nume text {
  font-family: var(--sans);
  font-size: 25px;
  font-weight: 500;
  fill: var(--cerneala-2);
  /* Haloul alb e singurul lucru care tine numele lizibil acolo unde sub el
     trece o linie de granita. La 0,75 litera se amesteca cu linia; plin, o
     taie curat. */
  paint-order: stroke;
  stroke: var(--alb);
  stroke-width: 6;
  stroke-opacity: 0.95;
}
.harta__cadru--detaliu .harta__nume text { font-size: 30px; }
@media (max-width: 52rem) {
  .harta__nume text { font-size: 38px; }
  .harta__cadru--detaliu .harta__nume text { font-size: 38px; }
  .harta__pin text { font-size: 40px; }
}

.harta__pin circle { fill: var(--rosu); fill-opacity: 0.22; }
.harta__pin .harta__pin-miez { fill: var(--rosu); fill-opacity: 1; }
.harta__pin text {
  font-family: var(--sans); font-size: 28px; font-weight: 600;
  fill: var(--cerneala);
  paint-order: stroke; stroke: var(--alb); stroke-width: 6; stroke-opacity: 0.85;
}

/* --- legenda, singura varianta care merge si pe telefon, unde hover nu exista */

.harta__legenda {
  list-style: none;
  margin: clamp(1rem, 2.2vw, 1.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.7rem;
}
/* Pastila de culoare e `::before`, nu un `<span>`: un element gol in marcaj
   ar fi ajuns camp in panoul clientului, iar un camp gol pe care clientul il
   poate sterge ar lasa legenda fara culori. */
.harta__cheie {
  display: grid;
  grid-template-columns: 0.9rem minmax(0, 1fr);
  column-gap: 0.7rem;
  padding: 0.9rem 1rem;
  background: var(--alb);
  border: 1px solid var(--chenar);
  border-radius: var(--r);
  transition: opacity 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.harta__cheie::before {
  content: "";
  grid-column: 1; grid-row: 1 / -1;
  width: 0.9rem; height: 0.9rem; margin-top: 0.3rem;
  border-radius: 4px; border: 1px solid rgba(21, 37, 28, 0.25);
}
.harta__cheie > span { grid-column: 2; }
.harta__cheie[data-zona="apropiat"]::before { background: var(--verde); }
.harta__cheie[data-zona="oras"]::before { background: var(--accent); }
.harta__cheie[data-zona="vecine"]::before { background: var(--verde-pal-2); }
.harta__tarif {
  display: block; font-family: var(--serif);
  font-size: 1.1875rem; line-height: 1.25; color: var(--cerneala);
}
.harta__unde {
  display: block; margin-top: 0.15rem;
  font-size: 0.9375rem; font-weight: 500; color: var(--cerneala-2);
}
.harta__nota {
  display: block; margin-top: 0.4rem;
  font-size: 0.875rem; line-height: 1.55; color: var(--cerneala-4);
}

/* --- evidentierea */

.harta:has(:where(.harta__zona, .harta__cheie):is(:hover, :focus-visible))
  :is(.harta__zona, .harta__cheie, .harta__nume) { opacity: 0.38; }

.harta__zona:is(:hover, :focus-visible) path {
  fill-opacity: 1;
  stroke-width: 4;
  stroke-opacity: 1;
}

.harta:has(:where(.harta__zona, .harta__cheie)[data-zona="apropiat"]:is(:hover, :focus-visible))
  :is(.harta__zona, .harta__cheie)[data-zona="apropiat"],
.harta:has(:where(.harta__zona, .harta__cheie)[data-zona="oras"]:is(:hover, :focus-visible))
  :is(.harta__zona, .harta__cheie)[data-zona="oras"],
.harta:has(:where(.harta__zona, .harta__cheie)[data-zona="vecine"]:is(:hover, :focus-visible))
  :is(.harta__zona, .harta__cheie)[data-zona="vecine"] { opacity: 1; }

.harta:has(:where(.harta__zona, .harta__cheie)[data-zona="apropiat"]:is(:hover, :focus-visible))
  .harta__zona[data-zona="apropiat"] path,
.harta:has(:where(.harta__zona, .harta__cheie)[data-zona="oras"]:is(:hover, :focus-visible))
  .harta__zona[data-zona="oras"] path,
.harta:has(:where(.harta__zona, .harta__cheie)[data-zona="vecine"]:is(:hover, :focus-visible))
  .harta__zona[data-zona="vecine"] path {
  fill-opacity: 1;
  stroke-width: 4;
  stroke-opacity: 1;
}

.harta:has(:where(.harta__zona, .harta__cheie)[data-zona="apropiat"]:is(:hover, :focus-visible))
  .harta__cheie[data-zona="apropiat"],
.harta:has(:where(.harta__zona, .harta__cheie)[data-zona="oras"]:is(:hover, :focus-visible))
  .harta__cheie[data-zona="oras"],
.harta:has(:where(.harta__zona, .harta__cheie)[data-zona="vecine"]:is(:hover, :focus-visible))
  .harta__cheie[data-zona="vecine"] {
  border-color: var(--verde);
  box-shadow: 0 2px 4px rgba(21, 37, 28, 0.06), 0 10px 24px -14px rgba(21, 37, 28, 0.35);
}

/* Conturul de focalizare se deseneaza pe chenarul cadrului, fiindca un
   `outline` pe un `<g>` din SVG se lipeste de forma zonei si, la Giurgiu, iese
   din cadru pe trei laturi. */
.harta__cadru:has(.harta__zona:focus-visible) { outline: 2px solid var(--verde); outline-offset: 2px; }

@media print {
  .harta__cadre { grid-template-columns: minmax(0, 1fr); }
  .harta__cadru--detaliu { display: none; }
}

/* ==========================================================================
   WA-TELEFON-20261014. Butonul WhatsApp pe telefon (cerere Radu, 14.10.2026)
   Pe 390 px butonul era o pastila de 54x52 la 14 px de margine, iar coloana de
   text se oprea la 16 px de margine: intra cu aproape 40 px peste capatul
   fiecarui rand si peste legaturile din subsol. Nu exista pozitie fixa in
   interiorul coloanei care sa nu ajunga peste text la o derulare oarecare, deci
   leacul e o banda proprie: butonul devine o clapeta lipita de marginea din
   dreapta, 26x56 (tinta peste minimul de 24 px din WCAG 2.2, 2.5.8), iar
   gutiera trece la 28 px pe ambele parti, cat sa nu atinga textul.
   Cat timp e deschis meniul sau bannerul de cookie-uri, butonul nu se arata:
   ar sta peste butoanele lor. Masurat cu `tools/diag-wa.mjs`.
   ========================================================================== */
body:has(.cookie:not([hidden])) .wa,
body:has([data-mg-meniu][aria-expanded="true"]) .wa { display: none; }

/* Programul in subsol: in coloana „Contact” pe ecran lat, grup propriu sub
   „Plante” pe telefon (vezi `inc/chrome.php`). `dense` il trage in golul de
   sub „Plante”, iar „Magazinul” ocupa doua randuri in coloana a doua. */
.subsol__orar { display: none; }
@media (max-width: 30rem) {
  .subsol__grila { grid-auto-flow: row dense; }
  .subsol__magazin { grid-column: 2; grid-row: span 2; }
  .subsol__orar { display: block; grid-column: 1; }
  .subsol__orar li { min-height: 25px; display: flex; align-items: center; }
  .subsol__program { display: none; }
}

/* La fel pe ecran lat (a doua masuratoare, aceeasi zi): pastila de 221x52 statea
   peste coloana „Legal” a subsolului pe paginile scurte, la orice derulare.
   Clapeta e aceeasi pe toate latimile; textul ramane numele accesibil
   (`aria-label` pe legatura). Gutiera minima trece de la 16 la 28 px, deci
   peste 700 px nu se schimba nimic.
   `:root:root`, fiindca scrollcraft.css vine dupa acest fisier si isi declara
   gutiera tot pe `:root`: pe pagina de start, legaturile din subsolul ultimului
   cadru treceau cu 2 px sub clapeta, pe 360 px. */
:root:root { --gutiera: clamp(1.75rem, 4vw, 3.5rem); --sc-gutter: clamp(1.75rem, 5vw, 5.5rem); }
.wa {
  right: 0; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  width: 26px; min-height: 56px; padding: 0; gap: 0;
  justify-content: center;
  border-radius: 14px 0 0 14px;
  box-shadow: 0 6px 18px -8px rgba(21, 37, 28, 0.55);
}
.wa svg { width: 18px; height: 18px; flex: none; }
.wa .wa__text { display: none; }
.wa:focus-visible { outline: 3px solid var(--cerneala, #15251c); outline-offset: 2px; }