/* SOLVITAL — componente de site v1.1 (02.09.2026)

   Se încarcă DUPĂ tokens.css (încărcat separat prin <link>). Temă unică, deschisă.

   Prefix sv- pe tot. Header, footer și navigația se scriu pe markup-ul real Blocksy, nu aici. */




/* ---------- bază ---------- */

.sv-container{max-width:var(--sv-container);margin-inline:auto;padding-inline:var(--sv-spatiu-3)}

.sv-section{padding-block:var(--sv-spatiu-5)}

.sv-section--cald{background:var(--sv-fundal-cald)}

.sv-lead{font-size:20px;line-height:1.45;color:var(--sv-negru);max-width:40em}

.sv-nota{font-size:var(--sv-mic);color:var(--sv-gri)}

.sv-mono{font-family:ui-monospace,Consolas,monospace;font-size:.9em}

:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--sv-negru);outline-offset:2px}



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

.sv-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;

  background:var(--sv-soare);color:var(--sv-negru);font:700 16px/1 var(--sv-font);border:0;border-radius:var(--sv-raza);

  text-decoration:none;cursor:pointer;transition:background .15s}

.sv-btn:hover{background:var(--sv-soare-hover)}

.sv-btn:active{transform:translateY(1px)}

.sv-btn:disabled,.sv-btn[aria-disabled="true"]{background:var(--sv-bordura);color:var(--sv-gri);cursor:not-allowed}

.sv-btn--secundar{background:transparent;color:var(--sv-negru);box-shadow:inset 0 0 0 1.5px var(--sv-negru)}

.sv-btn--secundar:hover{background:var(--sv-fundal-cald)}

.sv-btn--mic{min-height:40px;padding:8px 16px;font-size:14px}

.sv-btn--bloc{display:flex;width:100%}



/* ---------- etichete de sistem, familii, chip-uri ---------- */

.sv-eticheta{font-size:var(--sv-eticheta);font-weight:600;letter-spacing:.08em;text-transform:uppercase}

.sv-fam{display:inline-flex;align-items:center;min-height:28px;box-sizing:border-box;color:#fff;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;

  padding:4px 10px;border-radius:3px;line-height:1.2}

.sv-fam--vitamine,.sv-bara--vitamine{background:var(--sv-vitamine)}

.sv-fam--minerale,.sv-bara--minerale{background:var(--sv-minerale)}

.sv-fam--omega,.sv-bara--omega{background:var(--sv-omega)}

.sv-fam--extracte,.sv-bara--extracte{background:var(--sv-extracte)}

.sv-fam--bioactive,.sv-bara--bioactive{background:var(--sv-bioactive)}

.sv-fam--formule,.sv-bara--formule{background:var(--sv-formule)}

/* bara de categorie (antet de listă): bandă plină, cuvântul cu alb, o singură dată pe pagină */

.sv-bara{color:#fff;padding:10px 16px;border-radius:var(--sv-raza)}

/* chip de filtrare: neutru; activ = culoarea familiei (singura apariție a culorii pe listă) */

.sv-chip{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:999px;

  border:1.5px solid var(--sv-bordura);background:#fff;color:var(--sv-negru);font:500 14px/1 var(--sv-font);text-decoration:none;cursor:pointer}

.sv-chip:hover{border-color:var(--sv-negru)}

.sv-chip[aria-pressed="true"],.sv-chip.este-activ{color:#fff;border-color:transparent}

.sv-chip.este-activ.sv-fam--vitamine{background:var(--sv-vitamine)}

.sv-chip.este-activ.sv-fam--minerale{background:var(--sv-minerale)}

.sv-chip.este-activ.sv-fam--omega{background:var(--sv-omega)}

.sv-chip.este-activ.sv-fam--extracte{background:var(--sv-extracte)}

.sv-chip.este-activ.sv-fam--bioactive{background:var(--sv-bioactive)}

.sv-chip.este-activ.sv-fam--formule{background:var(--sv-formule)}



/* ---------- preț ---------- */

.sv-pret{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-variant-numeric:tabular-nums}

.sv-pret__flacon{font-weight:700;color:var(--sv-negru);font-size:22px}

.sv-pret__zi{font-weight:500;color:var(--sv-gri);font-size:14px}

.sv-pret--mare .sv-pret__flacon{font-size:30px}

.sv-pret--mare .sv-pret__zi{font-size:16px}



/* ---------- card de produs ---------- */

.sv-grila-produse{display:grid;gap:var(--sv-spatiu-3);grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

.sv-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--sv-bordura);border-radius:var(--sv-raza-card);overflow:hidden;

  transition:box-shadow .15s}

.sv-card:hover{box-shadow:0 6px 24px rgba(17,17,17,.08)}

.sv-card__img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#F4F1EB}

.sv-card__corp{display:flex;flex-direction:column;gap:6px;padding:16px;flex:1}

.sv-card__nume{margin:6px 0 0;font-size:17px;font-weight:700;color:var(--sv-negru);line-height:1.25}

.sv-card__nume a{color:inherit;text-decoration:none}

.sv-card__descriptor{font-size:14px;font-weight:500;color:var(--sv-gri)}

.sv-card__admin{font-size:13px;color:var(--sv-gri)}

.sv-card .sv-pret{margin-top:auto;padding-top:8px}

.sv-card .sv-btn{margin-top:10px}



/* ---------- antet PDP ---------- */

.sv-pdp{display:grid;gap:var(--sv-spatiu-4);align-items:center}

@media (min-width:800px){.sv-pdp{grid-template-columns:1fr 1.2fr}}

.sv-pdp__img{width:100%;border-radius:var(--sv-raza-card);background:#F4F1EB}

.sv-pdp__titlu{font-size:var(--sv-h1);margin:14px 0 4px}

.sv-pdp__descriptor{font-size:18px;color:var(--sv-gri);margin:0 0 6px}

.sv-spec{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}

.sv-spec__cifra{background:#fff;border:1px solid var(--sv-bordura);border-radius:var(--sv-raza);padding:10px 14px;font-size:14px;color:var(--sv-gri)}

.sv-spec__cifra b{display:block;font-size:18px;color:var(--sv-negru);font-variant-numeric:tabular-nums}

.sv-pdp__actiuni{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--sv-spatiu-2)}



/* ---------- formular ---------- */

.sv-camp{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sv-spatiu-2)}

.sv-camp label{font-size:14px;font-weight:600;color:var(--sv-negru)}

.sv-input{min-height:48px;padding:10px 14px;font:400 16px/1.3 var(--sv-font);color:var(--sv-negru);background:#fff;

  border:1.5px solid var(--sv-bordura);border-radius:var(--sv-raza)}

.sv-input:hover{border-color:var(--sv-gri)}

.sv-input:focus{border-color:var(--sv-negru);outline:0}

.sv-input[aria-invalid="true"]{border-color:var(--sv-bioactive)}

.sv-camp__eroare{font-size:13px;color:var(--sv-bioactive)}

.sv-camp__ajutor{font-size:13px;color:var(--sv-gri)}



/* ---------- reguli de imagine ---------- */

.sv-packshot{background:var(--sv-fundal-cald);border-radius:var(--sv-raza-card)}

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



/* Listarea pe telefon: numarul de coloane il da tema (blocksy_woo_columns = 2 pe mobil).

   Aici raman doar marimile de text din card, ca sa incapa doua carduri pe rand. */

@media (max-width: 689px) {

  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 14px; line-height: 1.25; }

  .woocommerce ul.products li.product .price { font-size: 14px; }

  /* min 44px: pragul de atingere pe telefon (era 40px) */

  .woocommerce ul.products li.product .button { width: 100%; min-height: 44px; padding: 10px 8px; font-size: 13px;

    display: inline-flex; align-items: center; justify-content: center; }

}



/* ---------- coșul din antet (elementul temei) ----------

   Panoul vine implicit pe fundal închis (#29333C). Regula de brand e o singură temă, deschisă. */

.ct-header-cart .ct-cart-content{background:var(--sv-alb);color:var(--sv-antracit);box-shadow:0 12px 34px rgba(17,17,17,.14);border:1px solid var(--sv-bordura)}

.ct-header-cart .ct-cart-content a{color:var(--sv-antracit)}

.ct-header-cart .ct-cart-content a:hover{color:var(--sv-negru)}

.ct-header-cart .ct-cart-content .ct-cart-total,.ct-header-cart .ct-cart-content strong{color:var(--sv-negru)}

.ct-header-cart .ct-cart-content .product-name a{font-weight:600}

.ct-header-cart .ct-cart-content hr,.ct-header-cart .ct-cart-content li{border-color:var(--sv-bordura)}

.ct-header-cart .ct-cart-content .quantity,.ct-header-cart .ct-cart-content .total,

.ct-header-cart .ct-cart-content .woocommerce-Price-amount,.ct-header-cart .ct-cart-content bdi,

.ct-header-cart .ct-cart-content .total .woocommerce-Price-amount{color:var(--sv-negru)}

.ct-header-cart .ct-cart-content .quantity{color:var(--sv-gri)}



/* Antetul temei pe telefon: declansatorul de meniu avea 18x18 px, cosul 68x18.

   Pragul de atingere e 44px; ridicam DOAR suprafata, nu marimea pictogramei. */

@media (max-width: 999px) {

  .ct-header .ct-header-trigger,

  .ct-header [data-id="cart"] .ct-cart-item,

  .ct-header .ct-header-cart > a {

    min-width: 44px; min-height: 44px;

    display: inline-flex; align-items: center; justify-content: center;

  }

}





/* Rezultatele cautarii: tema le randeaza cu cardul de blog. Punem imaginea prima, in proportia reala

   a flacoanelor (4/5, fara taiere), scoatem autorul si data — sunt date de articol, nu de produs. */

body.search .entry-card { display: flex; flex-direction: column; }

body.search .entry-card .ct-media-container { order: -1; margin: 0 0 14px; }

body.search .entry-card .ct-media-container img {

  /* tema pune aspect-ratio 4/3 in atributul style al imaginii, deci avem nevoie de !important */

  aspect-ratio: 4 / 5 !important; object-fit: contain; width: 100%; height: auto;

  background: var(--sv-fundal-cald, #F7F4EE); border-radius: var(--sv-raza-card, 10px);

}

body.search .entry-card .entry-meta:not([data-id="meta_1"]) { display: none; }

body.search .entry-card .entry-excerpt p { margin: 0; }

body.search .sv-cauta-pret {

  margin: 10px 0 0; font-size: 16px; font-weight: 600; color: var(--sv-negru, #111);

  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;

}

body.search .sv-cauta-pret .sv-cauta-link {

  font-size: 14px; font-weight: 500; color: var(--sv-antracit, #303235);

  text-decoration: underline; text-underline-offset: 3px;

}



/* ============================================================

   Listarea de produse: /produse/ si /produse/<familie>/  (08.09)

   Reguli noi, adaugate la coada; nimic de mai sus nu se modifica.

   ============================================================ */



/* Antetul paginii: titlul, nu jumatate de ecran gol inaintea primului produs.

   Inaltimea vine din doua locuri — sectiunea si antetul dinauntru. */

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) .hero-section { padding-top: 30px; padding-bottom: 30px; }

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) .hero-section .entry-header {

  padding-top: 0; padding-bottom: 0; min-height: 0;   /* tema ii pune 250px inaltime minima */

}

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) .hero-section .page-title { font-size: 36px; margin: 0; }



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

.sv-filtre { display: flex; flex-direction: column; gap: 9px; margin: 0 0 24px; }

.sv-filtre__grup { display: flex; align-items: flex-start; gap: 10px; }

.sv-filtre__rand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1; min-width: 0; }

.sv-filtre__et {

  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;

  color: var(--sv-gri, #565A5E); min-width: 76px; padding-top: 13px; flex: none;

}

.sv-filtru {

  font: inherit; font-size: 14px; line-height: 1; color: var(--sv-antracit, #303235);

  background: #fff; border: 1px solid var(--sv-bordura, #E3DFD7); border-radius: 999px;

  padding: 0 14px; min-height: 38px; cursor: pointer;

  display: inline-flex; align-items: center; gap: 7px; transition: border-color .12s, background .12s, color .12s;

}

.sv-filtru:hover { border-color: var(--sv-negru, #111); }

.sv-filtru.este-ales { background: var(--sv-negru, #111); border-color: var(--sv-negru, #111); color: #fff; }

.sv-filtru:focus-visible { outline: 2px solid var(--sv-negru, #111); outline-offset: 2px; }

.sv-filtru__nr { font-size: 12px; color: var(--sv-gri, #565A5E); font-variant-numeric: tabular-nums; }

.sv-filtru.este-ales .sv-filtru__nr { color: rgba(255, 255, 255, .72); }

.sv-filtre__stare { margin: 3px 0 0; font-size: 13px; color: var(--sv-gri, #565A5E); }

/* numaratoarea temei („Afisez toate cele 31...”) spune acelasi lucru ca linia de mai sus,

   dar nu se schimba la filtrare; ramane doar sortarea in randul acela. */

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) .woocommerce-result-count { display: none; }

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) .woo-listing-top { margin-top: -6px; }



/* ---------- cardul de produs din listare ----------

   Grila cu zone: pretul si butonul stau pe acelasi rand, lipit de baza cardului. */

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product {

  display: grid;

  grid-template-columns: 1fr auto;

  grid-template-rows: auto auto auto 1fr auto;

  grid-template-areas: "poza poza" "familie familie" "titlu titlu" "scurt scurt" "pret buton";

  align-content: start;

  border: 1px solid var(--sv-bordura, #E3DFD7); border-radius: var(--sv-raza-card, 10px);

  padding: 14px 15px 15px; background: #fff;

  transition: border-color .15s ease, box-shadow .15s ease;

}

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product:hover {

  border-color: #CFC8BA; box-shadow: 0 4px 16px rgba(17, 17, 17, .07);

}

/* filtrarea ascunde cardurile: tema le pune un display propriu, deci [hidden] singur nu ar ajunge */

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product[hidden] { display: none !important; }



:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product > figure { grid-area: poza; margin: 0 0 12px; }

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product .entry-meta { grid-area: familie; }

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product .woocommerce-loop-product__title { grid-area: titlu; }

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product .sv-card__scurt { grid-area: scurt; }

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product .price { grid-area: pret; align-self: center; margin: 0; }

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product .ct-woo-card-actions {

  grid-area: buton; align-self: center; justify-self: end; margin: 0;

  position: static; opacity: 1; visibility: visible; transform: none;   /* tema il tine ascuns pana la hover */

}



/* imaginea: flaconul intreg, inaltime marginita — altfel un card ocupa 700 px */

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product .ct-media-container img {

  aspect-ratio: 4 / 5 !important; object-fit: contain; width: 100%; height: auto; max-height: 230px;

}



/* familia, ca supratitlu, in culoarea ei */

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product .entry-meta {

  margin: 0 0 5px; padding: 0; list-style: none; border: 0;

}

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product .entry-meta li { margin: 0; }

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product .entry-meta a {

  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;

  color: var(--sv-gri, #565A5E); text-decoration: none;

}

li.product.product_cat-vitamine  .entry-meta a { color: var(--sv-vitamine, #B95B27); }

li.product.product_cat-minerale  .entry-meta a { color: var(--sv-minerale, #108440); }

li.product.product_cat-omega     .entry-meta a { color: var(--sv-omega, #0C7377); }

li.product.product_cat-extracte  .entry-meta a { color: var(--sv-extracte, #6C3077); }

li.product.product_cat-bioactive .entry-meta a { color: var(--sv-bioactive, #882733); }

li.product.product_cat-formule   .entry-meta a { color: var(--sv-formule, #225FA8); }



/* titlul: intreg, nu taiat — poarta doza si numarul de capsule */

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product .woocommerce-loop-product__title {

  font-size: 15.5px; line-height: 1.32; margin: 0 0 7px; color: var(--sv-negru, #111);

}



/* descrierea scurta: trei randuri, apoi se taie */

.sv-card__scurt {

  margin: 0 0 14px; font-size: 13.5px; line-height: 1.45; color: var(--sv-gri, #565A5E);

  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;

}



/* pretul si costul pe zi */

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product .price .sv-pret { gap: 8px; }

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product .price .sv-pret__flacon { font-size: 19px; }

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product .price .sv-pret__zi { font-size: 13px; }



/* butonul: secundar, ca 31 de butoane portocalii sa nu acopere produsele */

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product .ct-woo-card-actions .button {

  background: #fff; color: var(--sv-negru, #111); border: 1.5px solid var(--sv-negru, #111);

  border-radius: var(--sv-raza, 6px); font-size: 13.5px; font-weight: 700; line-height: 1;

  padding: 0 14px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center;

  white-space: nowrap; transition: background .12s, color .12s;

}

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product .ct-woo-card-actions .button:hover {

  background: var(--sv-negru, #111); color: #fff;

}

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product .ct-woo-card-actions .button.added,

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product .ct-woo-card-actions .button.loading {

  background: var(--sv-soare, #F5A623); border-color: var(--sv-soare, #F5A623);

}



@media (max-width: 689px) {

  :is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) .hero-section { padding-top: 22px; padding-bottom: 22px; }

  :is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) .hero-section .page-title { font-size: 27px; }

  /* cardul e ingust: pretul deasupra, butonul pe toata latimea dedesubt */

  :is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product {

    grid-template-columns: 1fr;

    grid-template-rows: auto auto auto 1fr auto auto;

    grid-template-areas: "poza" "familie" "titlu" "scurt" "pret" "buton";

    padding: 11px 11px 12px;

  }

  :is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product .ct-woo-card-actions {

    justify-self: stretch; margin-top: 10px;

  }

  :is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product .ct-media-container img { max-height: 178px; }

  :is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) ul.products li.product .woocommerce-loop-product__title { font-size: 14px; }

  /* pe cardul ingust, trei randuri taie fraza in mijloc; patru o duc la capat */

  .sv-card__scurt { font-size: 12.5px; margin-bottom: 11px; -webkit-line-clamp: 5; }

  /* pe telefon randurile se deruleaza pe orizontala; altfel bara singura ocupa 500 px

     si impinge primul produs sub doua ecrane (aceeasi mecanica din rafturile paginii de produs) */

  .sv-filtre { gap: 6px; margin-bottom: 18px; }

  .sv-filtre__grup { flex-direction: column; align-items: stretch; gap: 5px; }

  .sv-filtre__et { min-width: 0; padding-top: 0; }

  .sv-filtre__rand {

    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;

    scrollbar-width: none; -webkit-overflow-scrolling: touch;

    margin-inline: -5vw; padding-inline: 5vw;   /* chipsurile ajung pana la marginea ecranului */

  }

  .sv-filtre__rand::-webkit-scrollbar { display: none; }

  .sv-filtru { font-size: 13px; padding: 0 12px; min-height: 36px; flex: 0 0 auto; scroll-snap-align: start; }

}


/* ============================================================
   Pagini de conținut și pagini legale (08.09)
   Același limbaj vizual ca paginile de produs: coloană de citit,
   fundal cald pe casete, aceleași tokenuri. Reguli noi, la coadă.
   ============================================================ */

.sv-pag { max-width: 720px; margin: 0 auto; }
.sv-pag > *:first-child { margin-top: 0; }

/* linia de sub titlu: ce e pagina și de când */
.sv-pag__stare {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline;
  margin: 0 0 22px; padding: 0 0 16px; border-bottom: 1px solid var(--sv-bordura, #E3DFD7);
  font-size: 13.5px; color: var(--sv-gri, #565A5E);
}
.sv-pag__stare b { color: var(--sv-negru, #111); font-weight: 600; }

.sv-pag__intro { font-size: 17.5px; line-height: 1.55; color: var(--sv-antracit, #303235); margin: 0 0 26px; }

/* cuprinsul, pentru paginile lungi */
.sv-cuprins {
  background: var(--sv-fundal-cald, #F7F4EE); border-radius: var(--sv-raza-card, 10px);
  padding: 20px 22px; margin: 0 0 32px;
}
.sv-cuprins b {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sv-gri, #565A5E); margin: 0 0 12px;
}
.sv-cuprins ol { margin: 0; padding: 0; list-style: none; counter-reset: c;
  columns: 2; column-gap: 26px; }
.sv-cuprins li { counter-increment: c; margin: 0 0 7px; break-inside: avoid; font-size: 14.5px; line-height: 1.4; }
.sv-cuprins li::before { content: counter(c) "."; color: var(--sv-gri, #565A5E); margin-right: 7px;
  font-variant-numeric: tabular-nums; }
.sv-cuprins a { color: var(--sv-antracit, #303235); text-decoration: none; border-bottom: 1px solid transparent; }
.sv-cuprins a:hover { border-bottom-color: var(--sv-negru, #111); color: var(--sv-negru, #111); }

/* secțiunile */
.sv-pag h2 {
  font-size: 20px; line-height: 1.25; color: var(--sv-negru, #111);
  margin: 40px 0 12px; scroll-margin-top: 90px;
}
.sv-pag h2:first-of-type { margin-top: 0; }
.sv-pag h3 { font-size: 16px; line-height: 1.3; color: var(--sv-negru, #111); margin: 26px 0 8px; }
.sv-pag p { margin: 0 0 14px; }
.sv-pag ul, .sv-pag ol { margin: 0 0 16px; padding-left: 22px; }
.sv-pag li { margin: 0 0 8px; }
.sv-pag li > ul, .sv-pag li > ol { margin-top: 8px; }
.sv-pag a { color: var(--sv-negru, #111); text-decoration: underline;
  text-decoration-thickness: 1px; text-decoration-color: var(--sv-gri, #565A5E); text-underline-offset: 3px; }
.sv-pag a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--sv-negru, #111); }

/* casete: lucruri de reținut, avertismente, exemple */
.sv-caseta {
  background: var(--sv-fundal-cald, #F7F4EE); border-radius: var(--sv-raza-card, 10px);
  padding: 18px 20px; margin: 0 0 22px;
}
.sv-caseta > *:first-child { margin-top: 0; }
.sv-caseta > *:last-child { margin-bottom: 0; }
.sv-caseta b { color: var(--sv-negru, #111); }
.sv-caseta--incadrat { background: #fff; border: 1px solid var(--sv-bordura, #E3DFD7); }

/* datele firmei, repetate identic peste tot */
.sv-date { margin: 0 0 22px; padding: 0; }
.sv-date > div { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--sv-bordura, #E3DFD7); }
.sv-date > div:last-child { border-bottom: 0; }
.sv-date dt { flex: 0 0 132px; margin: 0; font-size: 13.5px; color: var(--sv-gri, #565A5E); }
.sv-date dd { flex: 1; margin: 0; font-size: 14.5px; color: var(--sv-antracit, #303235); }
.sv-date dd b { color: var(--sv-negru, #111); font-weight: 600; }

/* tabele: aceeași construcție ca tabelul de compoziție din pagina de produs */
.sv-tabel-cadru { overflow-x: auto; margin: 0 0 22px; }
.sv-tabel { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }
.sv-tabel th, .sv-tabel td { text-align: left; padding: 10px 12px; vertical-align: top;
  border-bottom: 1px solid var(--sv-bordura, #E3DFD7); }
.sv-tabel th { color: var(--sv-negru, #111); font-weight: 700; font-size: 12.5px;
  letter-spacing: .05em; text-transform: uppercase; background: var(--sv-fundal-cald, #F7F4EE); }
.sv-tabel tr:last-child td { border-bottom: 0; }

/* pași numerotați */
.sv-pasi { list-style: none; counter-reset: p; margin: 0 0 22px; padding: 0; }
.sv-pasi li { counter-increment: p; position: relative; padding-left: 40px; margin: 0 0 16px; }
.sv-pasi li::before {
  content: counter(p); position: absolute; left: 0; top: -1px;
  width: 27px; height: 27px; border-radius: 50%; background: var(--sv-negru, #111); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 700;
}
.sv-pasi b { display: block; color: var(--sv-negru, #111); margin: 0 0 3px; }

/* formularul de retragere, care se poate tipări */
.sv-formular {
  border: 1px dashed var(--sv-gri, #565A5E); border-radius: var(--sv-raza-card, 10px);
  padding: 22px 24px; margin: 0 0 22px; background: #fff;
}
.sv-formular p { margin: 0 0 12px; font-size: 14.5px; }
.sv-formular .sv-linie { display: block; border-bottom: 1px solid var(--sv-bordura, #E3DFD7);
  height: 26px; margin: 4px 0 14px; }

.sv-mic { font-size: 13px; line-height: 1.5; color: var(--sv-gri, #565A5E); }

/* rândul de contact de la finalul fiecărei pagini legale */
.sv-pag__final {
  margin: 40px 0 0; padding: 20px 22px; background: var(--sv-fundal-cald, #F7F4EE);
  border-radius: var(--sv-raza-card, 10px);
}
.sv-pag__final p { margin: 0; font-size: 14.5px; }

@media (max-width: 689px) {
  .sv-cuprins ol { columns: 1; }
  .sv-cuprins { padding: 16px 16px; }
  .sv-pag__intro { font-size: 16.5px; }
  .sv-pag h2 { font-size: 18.5px; margin-top: 32px; }
  .sv-date > div { flex-direction: column; gap: 3px; }
  .sv-date dt { flex: none; }
  .sv-caseta, .sv-formular, .sv-pag__final { padding: 15px 16px; }
}
/* 🚨 Atributul temei e `data-row="middle"`, NU `"middle-row"`. Numele cu sufix apar doar

   in `footer_placements`, nu si in HTML. Am scris 18 selectoare gresite care n-au facut nimic. */



/* ============================================================

   Subsolul (08.09). Blocurile din widget-uri foloseau clasele

   .sv-fs-titlu si .sv-fs-lista, care nu aveau NICIUN stil scris

   nicaieri — de asta subsolul arata ca o lista bruta de linkuri.

   ============================================================ */



.ct-footer [data-row="middle"] { padding-top: 40px; padding-bottom: 34px; }

.ct-footer [data-column] .widget:not(:last-child) { margin-bottom: 26px; }



.sv-fs-titlu {

  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;

  color: var(--sv-gri, #565A5E); margin: 0 0 14px;

}

.sv-fs-lista { list-style: none; margin: 0; padding: 0; }

.sv-fs-lista li { margin: 0 0 9px; }

.sv-fs-lista a {

  font-size: 14.5px; line-height: 1.35; color: var(--sv-antracit, #303235); text-decoration: none;

  border-bottom: 1px solid transparent; transition: color .12s, border-color .12s;

}

.sv-fs-lista a:hover { color: var(--sv-negru, #111); border-bottom-color: var(--sv-negru, #111); }

.sv-fs-lista a:focus-visible { outline: 2px solid var(--sv-negru, #111); outline-offset: 3px; }



/* insigna oficiala ANPC pentru soluționarea alternativă a litigiilor */

.sv-anpc { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 22px 0 0; }

.sv-anpc a { display: block; line-height: 0; border-radius: 4px; }

.sv-anpc a:focus-visible { outline: 2px solid var(--sv-negru, #111); outline-offset: 3px; }

.sv-anpc img { height: 40px; width: auto; display: block; }



/* randul de jos: identificarea firmei */

.ct-footer [data-row="bottom"] {

  border-top: 1px solid var(--sv-bordura, #E3DFD7);

  padding-top: 18px; padding-bottom: 22px;

}

.ct-footer [data-row="bottom"] .ct-footer-copyright,

.ct-footer [data-row="bottom"] p {

  font-size: 13px; line-height: 1.55; color: var(--sv-gri, #565A5E); margin: 0;

}

.ct-footer [data-row="bottom"] a {

  color: var(--sv-antracit, #303235); text-decoration: underline;

  text-decoration-color: var(--sv-bordura, #E3DFD7); text-underline-offset: 3px;

}

.ct-footer [data-row="bottom"] a:hover { text-decoration-color: var(--sv-negru, #111); }



@media (max-width: 689px) {

  .ct-footer [data-row="middle"] { padding-top: 30px; padding-bottom: 24px; }

  .sv-fs-titlu { margin-bottom: 11px; }

  .sv-fs-lista li { margin-bottom: 11px; }   /* degete, nu maus */

  .sv-fs-lista a { font-size: 15px; }

  .sv-anpc img { height: 36px; }

  .ct-footer [data-row="bottom"] p { font-size: 12.5px; }

}



/* Legaturile din subsol aveau 12 px inaltime de atins, in randuri la 19 px pas:

   sub minimul WCAG 2.2 (24x24) si sub distanta care scuteste tinta mica.

   Le facem inline-block cu margine interioara pe verticala (12+12=24 px) si scadem

   marginea dintre randuri, ca pasul vizual sa ramana acelasi. Sublinierea de la hover

   trece de la bordura la text-decoration, ca sa stea lipita de text, nu sub padding. */

.sv-fs-lista li { margin-bottom: 3px; }

.sv-fs-lista a { display: inline-block; padding-block: 6px; border-bottom: 0; }

.sv-fs-lista a:hover {

  color: var(--sv-negru, #111); border-bottom-color: transparent;

  text-decoration: underline; text-underline-offset: 3px;

}

@media (max-width: 689px) {

  .sv-fs-lista li { margin-bottom: 5px; }

}



/* ============================================================

   Subsolul refacut dupa macheta Claude Design (09.09): fundal inchis, patru blocuri

   de conditii sus, bloc de brand + trei coloane de linkuri, drepturi jos.

   Culorile vin din tokenii de brand, nu din paleta paginii de start.

   ============================================================ */

.ct-footer { background: var(--sv-negru, #111) !important; color: #fff; }

.ct-footer, .ct-footer p, .ct-footer a, .ct-footer span, .ct-footer div { color: #fff; }



/* randul de sus: cele patru conditii */

.ct-footer [data-row="top"] { border-bottom: 1px solid rgba(255,255,255,.14); }

.ct-footer [data-row="top"] > div { padding-top: 0; padding-bottom: 0; }

.sv-fs-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 34px 0; width: 100%; }

.sv-fs-band > div { min-width: 0; }

.sv-fs-band span {

  display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em;

  text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 8px;

}

.sv-fs-band p { font-size: 15px; line-height: 1.5; color: #fff; margin: 0; }



/* randul mijlociu: brand + trei coloane */

.ct-footer [data-row="middle"] { padding-top: 48px; padding-bottom: 48px; }

.ct-footer [data-row="middle"] > div { --grid-template-columns: 1.5fr 1fr 1fr 1.2fr; column-gap: 56px; }



.sv-fs-sigla { height: 34px; width: auto; display: block; margin: 0 0 16px; }

.sv-fs-slogan { font-size: 19px; font-weight: 600; color: #fff; margin: 0 0 24px; }

.sv-fs-firma { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.72); margin: 0; }

.sv-fs-contact { font-size: 15px; line-height: 1.7; font-weight: 600; margin: 14px 0 22px; }

.sv-fs-contact a { text-decoration: none; }

.sv-fs-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }



/* titlurile si listele de linkuri, pe fundal inchis */

.ct-footer .sv-fs-titlu {

  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;

  color: rgba(255,255,255,.55); margin: 0 0 18px;

}

.ct-footer .sv-fs-lista li { margin-bottom: 0; }

.ct-footer .sv-fs-lista a { color: #fff; font-size: 15px; }

.ct-footer .sv-fs-lista a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }



/* insignele ANPC stau acum in blocul de brand */

.ct-footer .sv-anpc { margin: 0; gap: 10px; }

.ct-footer .sv-anpc img { height: 40px; background: #fff; border-radius: 4px; padding: 3px 6px; }



/* randul de jos */

.ct-footer [data-row="bottom"] { border-top: 1px solid rgba(255,255,255,.14); }

.ct-footer [data-row="bottom"] .ct-footer-copyright,

.ct-footer [data-row="bottom"] p { color: rgba(255,255,255,.6) !important; font-size: 13px; }

.ct-footer [data-row="bottom"] a { color: rgba(255,255,255,.85); text-decoration: underline; }



@media (max-width: 999px) {

  .sv-fs-band { grid-template-columns: 1fr 1fr; gap: 26px 32px; padding: 28px 0; }

  .ct-footer [data-row="middle"] > div { --grid-template-columns: 1fr; row-gap: 34px; }

}

@media (max-width: 689px) {

  .sv-fs-band { grid-template-columns: 1fr; gap: 20px; }

  .sv-fs-slogan { font-size: 18px; margin-bottom: 18px; }

  .ct-footer [data-row="middle"] { padding-top: 34px; padding-bottom: 34px; }

}


/* Tema tine grila randului mijlociu pe 3 coloane, printr-o variabila proprie cu specificitate
   mai mare decat a mea. Cu al patrulea bloc (brandul) e nevoie de 4, asa ca scriu direct
   `grid-template-columns`, nu variabila. */
@media (min-width: 1000px) {
  .ct-footer [data-row="middle"] > div {
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr !important;
    column-gap: 56px !important;
  }
}
@media (min-width: 690px) and (max-width: 999px) {
  .ct-footer [data-row="middle"] > div {
    grid-template-columns: 1fr 1fr !important; column-gap: 40px !important; row-gap: 34px !important;
  }
}
@media (max-width: 689px) {
  .ct-footer [data-row="middle"] > div { grid-template-columns: 1fr !important; row-gap: 30px !important; }
}


/* ============================================================

   Butonul de cautare din antet (08.09).

   Tema il livreaza la 15x15 px — sub minimul WCAG 2.2 de 24x24 si

   mult sub cosul de langa el, care are 44x44. Pictograma ramane la

   fel de mare; creste doar zona pe care se apasa.

   ============================================================ */

.ct-header button[data-id="search"],

.ct-header [data-id="search"] > button,

.ct-header [data-id="search"] > a {

  min-width: 44px; min-height: 44px;

  display: inline-flex; align-items: center; justify-content: center;

}

.ct-header button[data-id="search"]:focus-visible,

.ct-header [data-id="search"] > button:focus-visible,

.ct-header [data-id="search"] > a:focus-visible {

  outline: 2px solid var(--sv-negru, #111); outline-offset: 2px; border-radius: 4px;

}



/* campul din panoul de cautare: pe telefon, inaltime de deget.

   Scopat pe panoul temei — `form[role="search"]` singur ar prinde si un eventual

   formular de cautare pus mai tarziu in continut sau intr-un widget. */

@media (max-width: 689px) {

  .ct-panel input[type="search"] { min-height: 48px; }

}



/* Pe pagina de start, „CSS suplimentar” din Personalizare face containerele latime plina,

   ca designul propriu sa ajunga pana la marginea ecranului. Antetul temei foloseste acelasi

   container, asa ca sigla ajungea lipita de margine (x=0 in loc de 23 px pe telefon).

   Ii dam inapoi latimea pe care o are pe toate celelalte pagini — doar antetului. */

body.home #header .ct-container {

  width: calc(100% - 46px) !important;

  max-width: var(--sv-container, 1200px) !important;

  margin-inline: auto !important;

}



/* Cu a treia pictograma in antet (cautare · cos · hamburger = 132 px + spatii), sigla de 206 px

   nu mai incape pe telefon si intra sub lupa: 62 px suprapunere la 360, 35 la 390, 8 la 420.

   O marginim fluid, ca sa lase loc pictogramelor pe orice latime de telefon. */

@media (max-width: 689px) {

  /* tema pune o LATIME fixa pe imagine (206 px), nu doar max-width, deci o suprascriem pe amandoua */

  .ct-header [data-id="logo"] img.default-logo,

  .ct-header .site-branding img,

  .ct-header [data-id="logo"], .ct-header .site-branding, .ct-header .site-logo-container {

    width: min(150px, calc(100vw - 232px)) !important;

    max-width: none !important;

    height: auto !important;

  }

}


/* Zona de atins a cosului din antet, pe desktop: masurata 69x18,6 px — sub minimul
   WCAG 2.2 (2.5.8: 24x24). Pe telefon tema ii da deja 44x44. Linkul e flex, deci
   ii dam doar inaltime si centrare pe verticala; latimea si desenul raman ale temei. */
@media (min-width: 690px) {
  .ct-header [data-id="cart"] .ct-cart-item { min-height: 44px; align-items: center; }
}


/* ============================================================

   Meniuri (08.09, refacut). Model: panoul Vilgain — lista plata,

   randuri largi, text normal, separatoare fine, cifra mica la dreapta.

   O singura tema, deschisa, si aici.

   ============================================================ */



/* ---------- panoul din hamburger ---------- */

/* fundalul sta pe .ct-panel-inner si vine cu specificitate mare din tema */

#offcanvas.ct-panel .ct-panel-inner { background: #fff !important; }

#offcanvas .ct-panel-content { background: #fff; }

/* liniile de separare merg pana la marginile panoului: marginea interioara sta pe linkuri, nu pe container */

#offcanvas .ct-panel-content-inner { padding-left: 0; padding-right: 0; }

/* 🚨 Bara de sus a panoului: ii pusesem `padding: 8px 15px` si a ramas de 28 px inaltime,

   iar butonul de inchidere, de 32 px, iesea 2 px DEASUPRA ecranului — taiat, deci invizibil.

   Ii dam inaltime cat sa incapa butonul, si butonului zona de deget de 44x44. */

#offcanvas .ct-panel-actions {

  min-height: 56px; padding: 6px 12px 6px 15px;

  display: flex; align-items: center; justify-content: flex-end;

}

#offcanvas .ct-toggle-close {

  width: 44px; height: 44px; min-width: 44px; flex: none;

  display: flex; align-items: center; justify-content: center;

  color: var(--sv-negru, #111); border-radius: 6px;

}

#offcanvas .ct-toggle-close:hover { background: var(--sv-fundal-cald, #F7F4EE); }

#offcanvas .ct-toggle-close:focus-visible { outline: 2px solid var(--sv-negru, #111); outline-offset: -2px; }

#offcanvas .ct-toggle-close svg { width: 20px; height: 20px; }

/* 🚨 X-ul era ALB PE ALB. Tema il coloreaza alb (`fill: rgba(255,255,255,.7)`), fiindca panoul ei

   e intunecat; noi l-am facut deschis. `color` nu ajuta: SVG-ul foloseste `fill`, nu `currentColor`.

   A doua oara aceeasi capcana in acelasi panou — prima data era fundalul, acum pictograma. */

#offcanvas .ct-toggle-close svg,

#offcanvas .ct-toggle-close svg path { fill: var(--sv-antracit, #303235) !important; }

#offcanvas .ct-toggle-close:hover svg path,

#offcanvas .ct-toggle-close:focus-visible svg path { fill: var(--sv-negru, #111) !important; }



#offcanvas .mobile-menu, #offcanvas .mobile-menu > ul { padding: 0; margin: 0; list-style: none; }

#offcanvas .mobile-menu > ul > li { border-bottom: 1px solid var(--sv-bordura, #E3DFD7); }

#offcanvas .mobile-menu > ul > li:last-child { border-bottom: 0; }

#offcanvas .mobile-menu a {

  display: flex; align-items: center; justify-content: space-between; gap: 14px;

  min-height: 56px; padding: 0 23px;

  font-size: 16px; font-weight: 500; line-height: 1.3;

  color: var(--sv-antracit, #303235);

  transition: background .12s, color .12s;

}

#offcanvas .mobile-menu a:hover,

#offcanvas .mobile-menu a:focus-visible {

  background: var(--sv-fundal-cald, #F7F4EE); color: var(--sv-negru, #111);

}

#offcanvas .mobile-menu a:focus-visible { outline: 2px solid var(--sv-negru, #111); outline-offset: -2px; }



/* (scos 09.09) cifra din meniu — meniurile nu mai poarta numere */



/* titlurile de grup, scrise din CSS pe primul element al grupului:

   asa avem capete de lista fara sa existe randuri care nu duc nicaieri */

#offcanvas .mobile-menu > ul > li.sv-grup::before {

  display: block; padding: 26px 23px 9px;

  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;

  color: var(--sv-gri, #565A5E);

}

#offcanvas .mobile-menu > ul > li.sv-grup--nevoi::before     { content: "Pentru ce ai nevoie"; padding-top: 16px; }

#offcanvas .mobile-menu > ul > li.sv-grup--categorii::before { content: "Categorii"; }

#offcanvas .mobile-menu > ul > li.sv-grup--solvital::before  { content: "Solvital"; }

#offcanvas .mobile-menu > ul > li.sv-grup { border-top: 1px solid var(--sv-bordura, #E3DFD7); }

#offcanvas .mobile-menu > ul > li.sv-grup--nevoi { border-top: 0; }



/* ---------- lista de sub meniul de desktop ---------- */

.ct-header [data-id="menu"] .sub-menu {

  background: #fff;

  border: 1px solid var(--sv-bordura, #E3DFD7);

  border-radius: var(--sv-raza-card, 10px);

  box-shadow: 0 12px 34px rgba(17, 17, 17, .12);

  padding: 7px 0; min-width: 262px;

}

.ct-header [data-id="menu"] .sub-menu li { border: 0; }

.ct-header [data-id="menu"] .sub-menu a {

  display: flex; align-items: center; justify-content: space-between; gap: 16px;

  padding: 9px 18px; font-size: 15px; font-weight: 500;

  color: var(--sv-antracit, #303235); border-bottom: 0;

}

.ct-header [data-id="menu"] .sub-menu a:hover,

.ct-header [data-id="menu"] .sub-menu a:focus-visible {

  color: var(--sv-negru, #111); background: var(--sv-fundal-cald, #F7F4EE);

}



/* ============================================================

   Bara de filtre, refacuta (08.09). Ce era gresit:

   doua butoane negre „Toate” identice unul sub altul, chipsuri taiate

   la marginea ecranului fara niciun semn ca randul se deruleaza, si

   butonul de sortare atarnand singur sub o linie de stare proprie.

   ============================================================ */



/* numaratoarea o scrie iar tema, pe acelasi rand cu sortarea (JS-ul ii schimba textul) */

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) .woocommerce-result-count { display: block; }

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) .woo-listing-top {

  margin-top: 0; align-items: center;

}

:is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) .woocommerce-result-count {

  font-size: 14px; color: var(--sv-gri, #565A5E); margin: 0; text-transform: none; letter-spacing: 0;

}

/* linia de stare proprie ramane doar ca plasa de siguranta, cand tema n-o afiseaza */

.sv-filtre__stare:empty { display: none; }



/* randul care se deruleaza primeste o topire la margine — semnul ca mai e ceva dincolo */

.sv-filtre__rand.se-deruleaza {

  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);

          mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);

}



/* „Toate” apare doar cand randul lui are ceva de sters (JS pune hidden) */

.sv-filtru[hidden] { display: none !important; }



@media (max-width: 689px) {

  .sv-filtre { gap: 4px; margin-bottom: 16px; }

  .sv-filtre__grup { gap: 3px; }

  .sv-filtre__et { font-size: 11.5px; letter-spacing: .09em; }

  :is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) .woo-listing-top {

    display: flex; justify-content: space-between; align-items: center; gap: 12px;

  }

  :is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) .woocommerce-result-count { font-size: 13.5px; }

}



@media (max-width: 689px) {

  /* randul se alinia la marginea ecranului, iar eticheta la 23 px — nepotrivite.

     Renuntam la iesirea in afara containerului: chipsurile pornesc de sub eticheta. */

  .sv-filtre__rand { margin-inline: 0 !important; padding-inline: 0 !important; }

  /* tema ascunde numaratoarea pe ecrane mici; o vrem, ca sortarea sa nu ramana singura pe rand */

  :is(body.woocommerce-shop, body.tax-product_cat, body.tax-nevoie) .woocommerce-result-count.ct-hidden-sm { display: block !important; }

}


/* „Arată toate” — resetarea, langa numaratoare, ca sa nu miste randul de chipsuri */
.sv-sterge {
  font: inherit; font-size: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--sv-negru, #111); text-decoration: underline; text-underline-offset: 3px;
}
.sv-sterge:hover { text-decoration-thickness: 2px; }
.sv-sterge:focus-visible { outline: 2px solid var(--sv-negru, #111); outline-offset: 2px; border-radius: 3px; }


/* ============================================================

   Banda de categorii de pe pagina de start (09.09).

   Trei lucruri cerute: fara cifre, text mai mare, sa se deruleze.



   🚨 Regulile de aici trebuie sa BATA CSS-ul scris in continutul paginii, care e livrat

   DUPA foaia noastra si ar castiga la specificitate egala. De aceea totul e prefixat cu

   `body.home` — asa avem cu o clasa mai mult decat regulile din pagina.



   Derularea era pornita DOAR sub 690 px (regulile din pagina stau intr-un media query),

   asa ca la latimi mijlocii banda era pur si simplu taiata, fara sa se poata misca.

   ============================================================ */



body.home .svb-chips { height: auto; }



body.home .svb-chips .w {

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;

  -ms-overflow-style: none;

  scroll-snap-type: x proximity;

  gap: 30px;

  padding-inline: 24px;

  font-size: 15px;

  letter-spacing: .1em;

  color: rgba(255, 255, 255, .88);

}

body.home .svb-chips .w::-webkit-scrollbar { display: none; }



body.home .svb-chips a {

  flex: 0 0 auto;

  scroll-snap-align: start;

  white-space: nowrap;

  min-height: 58px;

  display: inline-flex;

  align-items: center;

  opacity: 1;

  color: inherit;

}

body.home .svb-chips a:hover,

body.home .svb-chips a:focus-visible { color: #fff; }

body.home .svb-chips a:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 4px; }



/* linia aurie de sub prima categorie ramane, dar la textul mai mare are nevoie de aer */

body.home .svb-chips span { padding-bottom: 3px; }



@media (min-width: 690px) {

  body.home .svb-chips .w { gap: 36px; padding-inline: 30px; justify-content: center; }

}

/* cand nu incap toate, alinierea centrata ar ascunde inceputul randului la derulare */

@media (max-width: 1100px) {

  body.home .svb-chips .w { justify-content: flex-start; }

}



/* 🚨 LINIE DUBLA: sub fiecare categorie erau DOUA linii — cea galbena (umbra de pe <span>,

   `box-shadow: 0 2px 0 var(--am)`) si una ALBA, care e sublinierea de link pusa de tema pe <a>.

   Regula din continutul paginii (`.svb .svb-chips a { text-decoration: none }`) nu o invingea.

   Ramane doar cea galbena. */

body.home .svb-chips a,

body.home .svb-chips a:hover,

body.home .svb-chips a:focus-visible,

body.home .svb-chips a span { text-decoration: none !important; }



/* ============================================================

   Eroul scurtat si al doilea buton (09.09, aprobat pe macheta).

   Andrei: banda neagra cu categoriile vine CHIAR dupa imagine — deci caseta

   „Transparență totală" nu se aseaza sub erou, ci urca in coltul din dreapta sus,

   unde la 520 px e loc liber (textul sta jos).

   ============================================================ */

body.home .svb-hero .hbtn { display: flex; gap: 10px; flex-wrap: wrap; }



@media (max-width: 689px) {

  body.home .svb-hero { min-height: 520px; }

  body.home .svb-hero .hc { margin-bottom: 34px; }

  body.home .svb-hero h1 { font-size: 34px; margin-bottom: 20px; }

  /* la 520 px, caseta lasata jos ar cadea peste butoane */

  body.home .svb-badge {

    top: 18px; bottom: auto; right: 16px; left: auto;

    max-width: 208px; padding: 12px 14px; font-size: 12.5px;

  }

  body.home .svb-badge b { font-size: 14px; }

  body.home .svb-hero .btn { font-size: 14px; padding: 0 18px; }

}



/* ---------- butonul de cos din cardurile paginii de start ----------

   `.svb .btn` are `padding: 0 26px`. Pe telefon cardul are 168 px, deci raman 116 px

   pentru text si „Adaugă în coș" se rupea pe doua randuri. */

body.home .svb-card .btn { padding: 0 10px; white-space: nowrap; font-size: 14px; }



/* Linkul „Vezi coșul" pe care il adauga WooCommerce dupa ce produsul intra in cos.

   Site-ul NU are cos lateral — cosul e pagina /cos/ — deci linkul asta chiar e util;

   il aducem doar la designul nostru, ca sa nu apara portocaliu peste card. */

body.home .svb-card .added_to_cart {

  display: flex; align-items: center; justify-content: center;

  width: 100%; height: 44px; margin-top: 8px;

  background: #fff !important; color: #111 !important;

  border: 1px solid #111; border-radius: 0;

  font-size: 14px; font-weight: 600; text-decoration: none !important; white-space: nowrap;

}

body.home .svb-card .added_to_cart:hover { background: #F7F4EE !important; }



/* ============================================================

   Cardurile de produs, aduse la macheta Claude Design (09.09).

   Valorile sunt cele din machetă, nu inventate: imagine 1/1.1, titlu 17/700 cu min-height 44,

   descriere 14 cu min-height 63, pret 19/700 impins jos cu margin-top:auto, buton 48 px.

   Butonul e in PORTOCALIUL REZERVAT din brandbook (`--sv-soare`, text negru, 8,9:1) si

   FARA subliniere — tema pune `text-decoration: underline` pe orice link.

   Eroul si meniurile nu se ating.

   ============================================================ */



/* 8 carduri: 4 coloane fac doua randuri pline. Macheta avea 5 produse, deci 5 coloane. */

body.home .svb-prod .gr { grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: stretch; }

@media (max-width: 1099px) { body.home .svb-prod .gr { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

@media (max-width: 689px)  { body.home .svb-prod .gr { grid-template-columns: 1fr 1fr; gap: 16px; } }



body.home .svb-card { display: flex; flex-direction: column; }

body.home .svb-card .im { aspect-ratio: 1 / 1.1; margin-bottom: 18px; }



/* eticheta familiei capata bulina in culoarea familiei, din tokenii de brand */

body.home .svb-card .br {

  display: flex; align-items: center; gap: 7px;

  font-size: 12px; font-weight: 600; letter-spacing: .08em;

  margin: 0 0 6px; color: var(--sv-gri, #565A5E);

}

body.home .svb-card .br::before {

  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;

  background: var(--sv-gri, #565A5E);

}

body.home .svb-card[data-fam="vitamine"]  .br::before { background: var(--sv-vitamine, #B95B27); }

body.home .svb-card[data-fam="minerale"]  .br::before { background: var(--sv-minerale, #108440); }

body.home .svb-card[data-fam="omega"]     .br::before { background: var(--sv-omega, #0C7377); }

body.home .svb-card[data-fam="extracte"]  .br::before { background: var(--sv-extracte, #6C3077); }

body.home .svb-card[data-fam="bioactive"] .br::before { background: var(--sv-bioactive, #882733); }

body.home .svb-card[data-fam="formule"]   .br::before { background: var(--sv-formule, #225FA8); }



/* min-height pe titlu si descriere: asa pretul si butonul stau pe aceeasi linie la toate cardurile */

body.home .svb-card .nm { font-size: 17px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; min-height: 44px; }

body.home .svb-card .ds { font-size: 14px; line-height: 1.5; margin: 0 0 14px; min-height: 63px; }

body.home .svb-card .pr { margin-top: auto; margin-bottom: 14px; font-size: 19px; font-weight: 700; }



body.home .svb-card .btn,

body.home .svb-card .btn:hover {

  background: var(--sv-soare, #F59B00) !important;

  color: var(--sv-negru, #111) !important;

  text-decoration: none !important;

  width: 100%; justify-content: center;

  height: 48px; font-size: 15px; font-weight: 700;

  border-radius: var(--sv-raza, 6px); padding: 0 12px; opacity: 1;

}

body.home .svb-card .btn:hover { background: var(--sv-soare-hover, #D88900) !important; }

body.home .svb-card .btn:focus-visible { outline: 2px solid var(--sv-negru, #111); outline-offset: 2px; }



/* „Vezi coșul", care apare dupa adaugare, ramane secundar: contur, nu portocaliu */

body.home .svb-card .added_to_cart {

  border-radius: var(--sv-raza, 6px); height: 44px; font-size: 14px;

}



@media (max-width: 689px) {

  body.home .svb-card .br { font-size: 10px; gap: 6px; }

  body.home .svb-card .br::before { width: 6px; height: 6px; }

  body.home .svb-card .nm { font-size: 15px; min-height: 39px; margin-bottom: 6px; }

  body.home .svb-card .ds { font-size: 12.5px; min-height: 37px; margin-bottom: 10px; }

  body.home .svb-card .pr { font-size: 16px; margin-bottom: 12px; }

  body.home .svb-card .btn { height: 46px; font-size: 14px; }

}



/* ============================================================

   Fonturile si culorile paginii de start, aduse la brandbook (09.09).



   FONT: pagina declara `Inter` (3 locuri) si `"Playfair Display"` (5), dar NICIUNUL nu e

   incarcat — nu exista @font-face pentru ele, deci se afiseaza cu ce nimereste sistemul

   vizitatorului. Brandbook: O SINGURA familie, Archivo, servita local.



   CULORI: pagina isi are paleta ei locala, apropiata dar nu egala cu tokenii de brand

   (--dk #121517 fata de #111111, --bg2 #f4f6f6 rece fata de #F7F4EE cald).

   In loc sa rescriu fiecare regula, leg variabilele locale la tokenii de brand.

   ============================================================ */

body.home .svb {

  --dk: var(--sv-negru, #111111);

  --am: var(--sv-soare, #F59B00);

  --tx: var(--sv-antracit, #303235);

  --mut: var(--sv-gri, #565A5E);

  --ln: var(--sv-bordura, #E8E3D9);

  --bg2: var(--sv-fundal-cald, #F7F4EE);

}



body.home .svb,

body.home .svb :is(h1, h2, h3, h4, p, a, span, div, li, button, em, b, i, strong, input, label) {

  font-family: var(--sv-font, "Archivo", system-ui, sans-serif) !important;

}

/* accentul in cursiva ramane accent — dar din aceeasi familie, nu dintr-un serif neincarcat */

body.home .svb em { font-style: italic; font-weight: 500; }



/* ---------- primul flacon, deasupra liniei de 844 px ----------

   Dupa ce am mutat produsele imediat sub banda de categorii, sectiunea incepe la 694 px,

   dar prima imagine cadea la 889 — cu 45 px sub marginea ecranului de telefon.

   Taiem exact atat din spatierea de sus a sectiunii si a antetului ei. Masurat, nu ghicit. */

@media (max-width: 689px) {

  body.home .svb-prod { padding-top: 16px; }

  body.home .svb-prod .hrow { margin-bottom: 12px; gap: 6px; }

  body.home .svb-prod h2 { margin-bottom: 2px; }

}


/* ---- Subsol pe telefon (09.09): masurat 1759 px, adica 2,1 ecrane de 844.
   Din care banda de conditii 357 px pe O coloana si cele trei liste de legaturi 678 px, tot pe una.
   Doua schimbari, niciuna de text:
    · banda trece pe doua coloane sub 690 px;
    · listele SCURTE — Cumparaturi (#block-7, cel mai lung element 15 caractere) si Comanda si
      livrare (#block-8, 18 caractere) — se aseaza singure pe doua coloane CAND AU LOC: `auto-fit`
      cu minim 150 px. Pe desktop widgetul are 271 px, deci raman pe o coloana; nu e nevoie de prag.
   „Despre si legal" (#block-9) ramane pe o coloana intentionat: are elemente de 31 de caractere
   („ANPC si solutionarea disputelor") care pe 162 px s-ar rupe in doua randuri — aceeasi inaltime,
   dar dezordonat.
   🚨 Regula depinde de id-urile widgetilor din subsol. Daca se recreeaza widgetul, id-ul se schimba
   si regula tace fara eroare: se verifica MASURAND inaltimea subsolului la 390 px, nu citind CSS. ---- */
@media (max-width: 689px) {
  .sv-fs-band { grid-template-columns: 1fr 1fr; gap: 22px 20px; }
}
#block-7 .sv-fs-lista, #block-8 .sv-fs-lista {
  display: grid;
  /* 140+140+14 = 294 px: incape pe telefonul de 360 (coloana utila 314), dar NU in widgetul
     de 271 px de pe desktop, care ramane pe o coloana. Cu 150 px si spatiu de 18, ecranele de
     360 cadeau inapoi pe o coloana — masurat, nu presupus. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  column-gap: 14px;
  row-gap: 0;
}

/* ============================================================
   CARDURILE DE PRODUS de pe pagina de start — 09.09.2026
   Stilul lor de baza sta INLINE in continutul paginii (`.svb-card .im{background:var(--bg2)}` etc.).
   Regulile de aici au specificitate mai mare (body.home .svb-card …), deci castiga indiferent de ordine.
   Cerute: fara fundal bej, imagini mai mari, pret mai mare / pret pe zi mai mic, randuri aliniate
   intre carduri, zoom discret la derulare.
   ============================================================ */

/* 1. Fara caseta beje in spatele flaconului. Imaginile au deja fundal alb — verificat pe pixelii
      din colturi: 255,255,255 — deci flacoanele stau pe albul paginii, fara chenar. */
body.home .svb-card .im { background: transparent; overflow: hidden; }

/* 2. Imaginea umple caseta, nu 72% din ea: flaconul creste de la 194x214 la ~237x297 pe desktop. */
body.home .svb-card .im img {
  width: 100%; height: 100%; padding: 4px; box-sizing: border-box; object-fit: contain;
}

/* 3. Pretul: cifra care conteaza, mare; pretul pe zi, mic si secundar, pe aceeasi linie de baza.
      Punctul separator il pune CSS-ul, ca sa nu depinda de text. */
body.home .svb-card .pr { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
body.home .svb-card .pr b {
  font-size: 23px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em;
  color: var(--sv-negru, #111);
}
body.home .svb-card .pr .zi { font-size: 13px; font-weight: 500; color: var(--sv-gri, #565A5E); }
body.home .svb-card .pr .zi::before { content: "· "; }

/* 4. Randurile aliniate intre carduri LA ORICE LATIME. Pe desktop erau deja (min-height pe titlu
      si descriere); pe telefon nu: descrierea lunga urca la 4-5 randuri si impingea pretul cu 19 px
      fata de cardul de alaturi. min-height nu limiteaza — trebuie si taiere la 3 randuri. */
body.home .svb-card .ds {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; min-height: calc(3 * 1.5em);
}

/* 5. Zoom discret la derulare. Unde browserul stie animatii legate de derulare (Chrome/Edge 115+),
      flaconul creste continuu cat traverseaza ecranul; unde nu stie, creste o singura data cand
      cardul intra in ecran, folosind clasa `.vis` pusa deja de scriptul paginii.
      Amandoua tac complet daca omul a cerut mai putina miscare. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    body.home .svb-card .im img {
      animation: sv-zoom-card linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 70%;
    }
  }
  @supports not (animation-timeline: view()) {
    body.home .svb-card .im img { transform: scale(1.05); transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
    body.home .svb-card.vis .im img { transform: scale(1); }
  }
}
@keyframes sv-zoom-card { from { transform: scale(1); } to { transform: scale(1.05); } }

@media (max-width: 849px) {
  body.home .svb-card .pr b { font-size: 19px; }
  body.home .svb-card .pr .zi { font-size: 12px; }
}

/* ============================================================
   CONFIRMAREA DE ADAUGARE IN COS — 09.09.2026
   Inlocuieste al doilea buton („Vezi coșul”) pe care WooCommerce il lipea sub card.
   🚨 `.sv-conf{display:flex}` are aceeasi specificitate ca `[hidden]{display:none}` din browser,
   dar stilul autorului bate stilul browserului — fara regula explicita de mai jos, caseta ar fi
   VIZIBILA chiar si cu atributul `hidden` pus. De aceea `.sv-conf[hidden]` e scrisa apasat.
   ============================================================ */
.sv-conf[hidden] { display: none !important; }
.sv-conf {
  /* SUS, nu jos: bara de cookie-uri sta fixata jos, are z-index 2147483647 si 253 px inaltime
     pe telefon — masurat — deci ar fi acoperit confirmarea exact la primul vizitator. */
  position: fixed; z-index: 9000; right: 20px; top: 20px; max-width: 400px;
  display: flex; align-items: center; gap: 14px;
  padding: 13px 13px 13px 16px;
  background: #fff; color: var(--sv-antracit, #303235);
  border: 1px solid var(--sv-bordura, #E8E3D9);
  box-shadow: 0 12px 34px rgba(17, 17, 17, .12);
  opacity: 0; transform: translateY(-10px);
  transition: opacity .22s cubic-bezier(.25, 1, .5, 1), transform .22s cubic-bezier(.25, 1, .5, 1);
}
.sv-conf.vaz { opacity: 1; transform: none; }
.sv-conf__ok { width: 22px; height: 22px; flex: none; fill: none;
  stroke: var(--sv-minerale, #108440); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sv-conf__txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sv-conf__txt b { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--sv-negru, #111); }
.sv-conf__txt span { font-size: 13px; line-height: 1.35; color: var(--sv-gri, #565A5E);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-conf__btn { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  margin-left: auto; background: var(--sv-negru, #111); color: #fff;
  font-size: 14px; font-weight: 700; text-decoration: none; }
.sv-conf__btn:hover, .sv-conf__btn:focus { background: var(--sv-antracit, #303235); color: #fff; text-decoration: none; }
.sv-conf__x { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer; }
.sv-conf__x svg { width: 15px; height: 15px; fill: none; stroke: var(--sv-gri, #565A5E); stroke-width: 2; stroke-linecap: round; }
.sv-conf__x:hover svg { stroke: var(--sv-negru, #111); }
.sv-conf :focus-visible { outline: 2px solid var(--sv-negru, #111); outline-offset: 2px; }
@media (max-width: 689px) {
  .sv-conf { left: 12px; right: 12px; top: 12px; max-width: none; gap: 11px; padding: 12px; }
  .sv-conf__btn { padding: 0 13px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-conf { transition: opacity .01ms; transform: none; }
}
/* linkul „Vezi coșul” de sub card nu mai apare nicaieri — confirmarea il tine */
.added_to_cart { display: none !important; }

/* ============================================================
   BANDA CU CELE CINCI AVANTAJE (.svb-usp) — 09.09.2026
   Era un rand `flex` cu `wrap` si 5 elemente: la orice latime la care nu incap toate cinci,
   ultimul ramanea singur si centrat pe randul de jos (2+2+1 la 390 px, masurat). Cu grila,
   celulele au acelasi loc la orice latime si nimic nu ramane orfan.
   Idiomul e cel din brandbook — banda de specificatii de pe eticheta de vin: cate un fapt scurt
   pe celula, despartite de linii de PAR (1 px), fara casete si fara fundal.
   Pe telefon trec pe doua coloane, iar al cincilea fapt tine randul intreg, deliberat.
   ============================================================ */
body.home .svb-usp .w {
  max-width: var(--sv-container, 1200px);
  width: calc(100% - 46px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--sv-bordura, #E8E3D9);
  border-bottom: 1px solid var(--sv-bordura, #E8E3D9);
}
body.home .svb-usp .it {
  display: flex; align-items: center; gap: 11px;
  padding: 20px 18px;
  border-left: 1px solid var(--sv-bordura, #E8E3D9);
  font-size: 14px; font-weight: 600; line-height: 1.3;
  color: var(--sv-antracit, #303235);
}
body.home .svb-usp .it:first-child { border-left: 0; padding-left: 0; }
/* pictogramele: mai mici si mai linistite decat textul, ca sa nu concureze cu el */
body.home .svb-usp .it svg {
  width: 19px; height: 19px; flex: none;
  fill: none; stroke: var(--sv-gri, #565A5E); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 999px) {
  body.home .svb-usp .w { grid-template-columns: 1fr 1fr; }
  body.home .svb-usp .it { padding: 15px 14px; border-top: 1px solid var(--sv-bordura, #E8E3D9); }
  body.home .svb-usp .it:nth-child(odd) { border-left: 0; padding-left: 0; }
  body.home .svb-usp .it:nth-child(-n+2) { border-top: 0; }
  /* al cincilea tine randul intreg: asa nu ramane un gol langa el */
  body.home .svb-usp .it:last-child { grid-column: 1 / -1; }
}
@media (max-width: 689px) {
  body.home .svb-usp .it { font-size: 13px; gap: 9px; padding: 13px 12px; }
  body.home .svb-usp .it svg { width: 17px; height: 17px; }
}

/* Incadrarea eroului pe telefon (09.09): era 60% pe orizontala, iar fereastra de portret
   arata 30%–80% din latimea pozei — flaconul din mana ei sta la 23%–34%, deci ramanea afara.
   La 45% fereastra devine 23%–72%: flaconul intra intreg, fata ramane partial.
   Pe desktop nu are efect: acolo se vede toata latimea (0%–100%), nu exista ce muta. */
body.home .svb-hero img.bg { object-position: 45% 30%; }

/* ============================================================
   BUTOANELE DIN EROU — 09.09.2026
   1. Sublinierea nu venea din pagina, ci din tema: `.entry-content a:not(.ct-button):not(.button)`,
      care are aceeasi specificitate cu regula paginii, deci castiga cine e scris ultimul.
      De aceea aici e `!important` — nu din lene, ci ca sa nu depinda de ordinea foilor de stil.
   2. Doua casete pline, una neagra si una alba, cantaresc la fel: ochiul nu stie care e actiunea
      principala. Negrul ramane butonul plin; al doilea devine contur — se vede la fel de bine pe
      fotografie, dar nu mai concureaza cu primul.
   ============================================================ */
body.home .svb-hero .btn { text-decoration: none !important; }
body.home .svb-hero .btn.wht {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .8);
  transition: background-color .18s cubic-bezier(.25,1,.5,1), color .18s cubic-bezier(.25,1,.5,1);
}
body.home .svb-hero .btn.wht:hover,
body.home .svb-hero .btn.wht:focus-visible {
  background: #fff;
  color: var(--sv-negru, #111);
  border-color: #fff;
}

/* Corectie (09.09, la 20 de minute dupa): butonul-contur avea text ALB pe fotografie deschisa —
   pe poza din bucatarie cade peste flaconul alb si peste portocale, si nu se mai citea.
   Pe o fotografie doar UMPLEREA garanteaza contrastul: fundal alb, text negru = 18,1:1, indiferent
   ce e in spate. Ierarhia ramane din culoare, nu din umplere: primul buton e negru plin (actiunea
   principala), al doilea alb plin. */
body.home .svb-hero .btn.wht {
  background: #fff;
  color: var(--sv-negru, #111);
  border: 1px solid #fff;
}
body.home .svb-hero .btn.wht:hover,
body.home .svb-hero .btn.wht:focus-visible {
  background: var(--sv-fundal-cald, #F7F4EE);
  border-color: var(--sv-fundal-cald, #F7F4EE);
  color: var(--sv-negru, #111);
}

/* ============================================================
   PAGINA DE START — ajustari cerute 09.09 seara
   ============================================================ */

/* 1. Desktop: doar patru flacoane, pe un singur rand. Celelalte patru raman in pagina
      (se vad pe telefon, la derulare) — nu le sterg, doar nu le arat pe latime mare. */
@media (min-width: 1000px) {
  body.home .svb-prod .svb-card:nth-child(n+5) { display: none; }
}

/* 2. Telefon: exact DOUA carduri intregi, nu doua si un colt din al treilea.
      Latimea e calculata din spatiu, nu ghicita: (100% - un spatiu) / 2. */
@media (max-width: 849px) {
  body.home .svb-prod .gr > .svb-card { flex: 0 0 calc((100% - 16px) / 2); max-width: none; min-width: 0; }
}

/* 3. Sageata subtila la dreapta, ca semn ca randul continua. Acelasi tipar ca in banda de nevoi:
      element lipicios in fluxul randului, deci ramane la marginea ferestrei cat timp se deruleaza. */
body.home .svb-prod .gr > .nx { display: none; }
@media (max-width: 849px) {
  body.home .svb-prod .gr > .nx {
    display: flex; align-items: center; justify-content: center;
    position: sticky; right: 0; flex: 0 0 34px; align-self: center; margin-left: -18px; z-index: 4;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 8px rgba(17, 17, 17, .16);
    color: var(--sv-negru, #111); font-size: 16px; line-height: 1;
    pointer-events: none;
  }
}

/* 4. Banda de avantaje: mai mare (erau 14 px pe desktop si 13 pe telefon), fara linia de jos,
      si cu loc pentru steag. */
body.home .svb-usp .w { border-bottom: 0; }
body.home .svb-usp .it { font-size: 15.5px; padding: 22px 18px; }
body.home .svb-usp .it svg { width: 22px; height: 22px; }
body.home .svb-usp .it .sv-steag {
  width: 21px; height: 14px; stroke: none;   /* steagul e umplut, nu conturat */
}
@media (max-width: 689px) {
  body.home .svb-usp .it { font-size: 14px; padding: 15px 12px; gap: 10px; }
  body.home .svb-usp .it svg { width: 20px; height: 20px; }
  body.home .svb-usp .it .sv-steag { width: 19px; height: 13px; }
}

/* 5. Spatiul dintre sectiuni: era intre 130 si 214 px, adunat din perechi diferite
      (100+30, 130+84, 64+120, 110+110…). Il fac unul singur: 48 px sus si jos pe desktop,
      32 pe telefon, deci un gol constant de 96, respectiv 64. Eroul, banda de categorii si
      banda de plata raman cum sunt — nu sunt sectiuni de continut. */
/* 🚨 `.svb-top` (bara neagra de sus) si `.svb-strip` NU sunt sectiuni de continut. Prima data
   le-am prins in selector si bara de sus a crescut de la 38 la 96 px — se vedea ca o zona neagra
   groasa deasupra imaginii. Selectorul cere acum explicit clasele de sectiune. */
body.home .svb > [class*="svb-"]:not(.svb-hero):not(.svb-chips):not(.svb-strip):not(.svb-top):not(.svb-nrs) {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
@media (max-width: 849px) {
  body.home .svb > [class*="svb-"]:not(.svb-hero):not(.svb-chips):not(.svb-strip):not(.svb-top):not(.svb-nrs) {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}


/* PROBA (09.09): banda de categorii de sub erou, text negru pe alb in loc de alb pe negru.
   Linia de jos o tin, altfel banda pluteste peste pagina alba fara sa se mai vada unde se termina. */
body.home .svb-chips { background: #fff !important; border-bottom: 1px solid var(--sv-bordura, #E8E3D9); }
body.home .svb-chips, body.home .svb-chips a, body.home .svb-chips span {
  color: var(--sv-negru, #111) !important;
}
body.home .svb-chips a { opacity: 1 !important; }

/* Butoanele din erou, egale (09.09): erau 217 si 181 px, adica largite fiecare dupa textul lui.
   Grila cu piste `1fr` intr-un container care se stramteaza pe continut da ambelor latimea celui
   mai lat — fara sa fixez eu o cifra care s-ar strica la alt text. Pe telefon se aseaza in coloana,
   tot egale. */
body.home .svb-hero .hbtn {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
}
@media (max-width: 689px) {
  body.home .svb-hero .hbtn { grid-auto-flow: row; }
}

/* Textele din butoanele eroului, centrate: dupa ce le-am facut egale, cel scurt ramanea lipit
   la stanga in caseta lui mai lata (09.09). */
body.home .svb-hero .hbtn .btn { justify-content: center; text-align: center; }

/* ============================================================
   PAGINA DE START — corecturi din auditul propriu, 09.09 seara
   ============================================================ */

/* 1. „Fabricat în România" tine randul intreg pe telefon; era lipit la stanga si parea rupt. */
@media (max-width: 999px) {
  body.home .svb-usp .it:last-child { justify-content: center; padding-left: 0; }
}

/* 2. Bifa din formularul de newsletter avea 13x13 px — sub minimul de 24 din WCAG 2.5.8.
      O duc la 22 px cu o zona de atins de 24, fara sa umflu randul. */
body.home .svb-nl input[type="checkbox"] {
  width: 24px; height: 24px; min-width: 24px; margin-right: 4px;   /* 24 = minimul WCAG 2.5.8 */
  accent-color: var(--sv-negru, #111); cursor: pointer;
}
body.home .svb-nl label { display: flex; align-items: flex-start; gap: 8px; min-height: 24px; }

/* 3. Bara de sus avea 11 px pe telefon — sub pragul de citit. */
@media (max-width: 849px) { body.home .svb-top { font-size: 12px; } }

/* 4. ACELASI stil de produs pe toata pagina: casetele din sectiunea de evidentieri aveau fundal
      bej in spatele flaconului si pretul intr-un singur corp de litera. Le aduc la tiparul
      cardurilor: fara caseta beje, cifra mare, pretul pe zi mic si gri. */
body.home .svb-hl .cd { background: transparent; }
body.home .svb-hl .cd .im { background: transparent; }
body.home .svb .pr { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
body.home .svb .pr b { font-size: 23px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--sv-negru, #111); }
body.home .svb .pr .zi { font-size: 13px; font-weight: 500; color: var(--sv-gri, #565A5E); }
body.home .svb .pr .zi::before { content: "· "; }
@media (max-width: 849px) {
  body.home .svb .pr b { font-size: 19px; }
  body.home .svb .pr .zi { font-size: 12px; }
}

/* 5. Contrastul titlului din erou: masurat 3,73:1 in medie si 1,31:1 peste flaconul alb si peste
      maneca ei — cuvintele dispareau. O umbra care urca doar din marginea de jos, sub text; peste
      fotografie nu se vede ca un voal, dar duce contrastul peste prag pe orice cadru al caruselului. */
body.home .svb-hero { position: relative; }
body.home .svb-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(to top, rgba(17, 17, 17, .62), rgba(17, 17, 17, .28) 42%, rgba(17, 17, 17, 0));
  pointer-events: none; z-index: 1;
}
body.home .svb-hero > *:not(.bgtrack) { position: relative; z-index: 2; }

/* 1. Caseta „Etichetă completă": era `position:relative` cu `left:-24px`, deci atarna in afara
      ecranului pe stanga (masurat: 24 px afara pe desktop, 16 pe telefon, cu textul taiat).
      O ancorez in coltul din dreapta-jos al eroului, in cadru, la ambele latimi. */
body.home .svb-hero .svb-badge {
  position: absolute;
  inset: auto 24px 24px auto;
  width: auto;
  max-width: min(320px, 44vw);
  z-index: 3;
}
@media (max-width: 689px) {
  /* pe telefon jos-dreapta se ciocnea cu al doilea buton (caseta 121–378, butonul 24–214,
     pe aceeasi banda pe verticala). O duc sus-dreapta, unde nu e nimic. */
  body.home .svb-hero .svb-badge { inset: 12px 12px auto auto; max-width: 66vw; }
}

/* 2. O-ul din SOLVITAL, in portocaliul din sigla — ca inelul-soare. Eticheta ramane gri:
      cererea era pentru litera, nu pentru eticheta (am inteles gresit prima data). */
body.home .sv-o, .sv-o { color: var(--sv-soare, #F59B00); }

/* 3. Banda de avantaje: mai mare, ca incape. */
body.home .svb-usp .it { font-size: 16.5px; }
@media (max-width: 689px) {
  body.home .svb-usp .it { font-size: 15.5px; }
  body.home .svb-usp .it svg { width: 21px; height: 21px; }
}


/* Colajul „Așa producem": fotografiile de productie in locul texturii si al portretului.
   Pastrez geometria existenta (.tex sus-dreapta, .main jos-stanga) — ea era buna, doar
   continutul nu spunea nimic despre cum se face produsul. */
body.home .svb-mbh .col .tex,
body.home .svb-mbh .col .main { object-fit: cover; }

/* ============================================================
   CARDUL DE PRODUS: apasabil pe toata suprafata — 09.09
   Linkul acopera caseta; butonul de cos si sageata raman deasupra lui, ca sa functioneze.
   „Stretched link": un singur <a> gol, intins peste card, in loc sa fac fiecare bucata link —
   asa titlul, poza, descrierea si pretul duc toate la pagina produsului, iar cititoarele de
   ecran aud un singur link, cu numele produsului.
   ============================================================ */
body.home .svb-card { position: relative; }
body.home .svb-card > .lnk { position: absolute; inset: 0; z-index: 1; }
body.home .svb-card > .lnk:focus-visible { outline: 2px solid var(--sv-negru, #111); outline-offset: 3px; }
body.home .svb-card .btn,
body.home .svb-card .added_to_cart { position: relative; z-index: 2; }

/* zoomul flaconului si cand plimbi cursorul peste card — semn ca e apasabil */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  body.home .svb-card .im img { transition: transform .45s cubic-bezier(.25, 1, .5, 1); }
  body.home .svb-card:hover .im img { transform: scale(1.04); }
}

/* Zoomul la derulare il conduce scriptul, nu CSS-ul: animatiile CSS BAT stilul inline, deci cat
   timp regula de animatie era activa, ce scria scriptul nu se vedea. Asa merge la fel in orice
   browser, nu doar in Chrome/Edge. */
body.home .svb-card .im img { animation: none !important; }

/* ============================================================
   COLAJUL DE PRODUCTIE (.svb-colaj) — rescris 09.09
   Cele doua fotografii au acelasi raport (4:5), taiate cu `object-fit: cover`, desi sursele sunt
   una lata si una inalta. Se suprapun: cea inalta stanga-sus, cea lata dreapta-jos, decalata.
   Caseta de text sta PESTE amandoua, alba, cu o umbra joasa — nu langa ele.
   ============================================================ */
body.home .svb-colaj .w {
  position: relative;
  max-width: var(--sv-container, 1200px);
  width: calc(100% - 46px);
  margin-inline: auto;
  min-height: 890px;
}
body.home .svb-colaj .cj { margin: 0; }
body.home .svb-colaj .cj img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 52% + 52% = 104%: cele doua fotografii se acopera pe 4% din latime, deci chiar se suprapun */
body.home .svb-colaj .cj--a { position: absolute; left: 0; top: 0; width: 52%; aspect-ratio: 4 / 5; z-index: 1; }
body.home .svb-colaj .cj--b { position: absolute; right: 0; top: 110px; width: 52%; aspect-ratio: 4 / 5; z-index: 2; }
body.home .svb-colaj .cj__card {
  position: absolute; left: 6%; bottom: 0; width: 52%;
  background: #fff; padding: 30px 32px;
  box-shadow: 0 24px 60px rgba(17, 17, 17, .16);
  z-index: 3;
}
body.home .svb-colaj .cj__card h2 { font-size: 34px; line-height: 1.15; margin: 0 0 14px; }
body.home .svb-colaj .cj__card .pp { margin: 0 0 22px; max-width: 46ch; }
body.home .svb-colaj .cj__card .ey2 { margin: 0 0 12px; }

@media (max-width: 849px) {
  body.home .svb-colaj .w { min-height: 0; }
  body.home .svb-colaj .cj--a { position: static; width: 76%; }
  body.home .svb-colaj .cj--b { position: static; width: 66%; margin: -32% 0 0 auto; }
  body.home .svb-colaj .cj__card {
    position: relative; left: auto; bottom: auto; width: 92%;
    margin: -26% auto 0; padding: 22px 20px;   /* intra peste fotografia de jos, ca pe desktop */
  }
  body.home .svb-colaj .cj__card h2 { font-size: 26px; }
}

/* Butoanele din pagina de start: fara subliniere (regula temei `.entry-content a:not(.ct-button)`
   are aceeasi specificitate, deci trebuie apasat), iar eticheta ramane un singur cuvant chiar
   daca are un <span> colorat inauntru. */
body.home .svb .btn { text-decoration: none !important; }
body.home .svb .btn .et { display: inline; white-space: nowrap; }
body.home .svb .btn .sv-o { display: inline; }

/* Insigna cu categoria din cardurile rafturilor: scoasa de tot (cerinta 10.09).
   Ramane doar in cardurile de pe pagina de start, unde e text simplu cu bulina colorata. */
.sv-raft li.product ul.entry-meta { display: none !important; }

/* Linia de sub „Fabricat în România": venea de pe SECTIUNE (`.svb-usp{border-bottom}`), nu de pe
   banda dinauntru — de aia scoaterea de pe `.w` n-o facuse sa dispara. */
body.home .svb-usp { border-bottom: 0 !important; }

/* ============================================================
   SECTIUNEA „preț corect" (.svb-mrc) — restilizata 10.09
   Era: titlu de 1392 px centrat pornind de la x=24, paragraf centrat de 660, si trei fotografii
   dezaliniate, prima iesind din ecran la x=−10. Acum: totul in cadrul de 1200, text la stanga in
   doua coloane (titlu | explicatie), fotografiile intr-un rand egal de trei, acelasi raport.
   ============================================================ */
body.home .svb-mrc .w {
  max-width: var(--sv-container, 1200px);
  width: calc(100% - 46px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 20px 56px;
  align-items: end;
}
body.home .svb-mrc h2 {
  width: auto; margin: 0; text-align: left;
  font-size: clamp(30px, 3.1vw, 44px); line-height: 1.08;
}
body.home .svb-mrc .pp {
  width: auto; max-width: 54ch; margin: 0; text-align: left;
  font-size: 16.5px; line-height: 1.6;
}
body.home .svb-mrc .car {
  max-width: var(--sv-container, 1200px);
  width: calc(100% - 46px);
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  height: auto;
  overflow: visible;
}
body.home .svb-mrc .car img {
  position: static; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; opacity: 1; transform: none; margin: 0;
}
body.home .svb-mrc .car .ar { display: none; }   /* sagetile nu mai au rost: nu mai e carusel */

@media (max-width: 849px) {
  body.home .svb-mrc .w { grid-template-columns: 1fr; gap: 14px; }
  body.home .svb-mrc h2 { font-size: 27px; }
  body.home .svb-mrc .pp { font-size: 15.5px; }
  body.home .svb-mrc .car { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
  body.home .svb-mrc .car img:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}

/* Doua fisuri ramase in sectiunea „preț corect":
   · titlul incepea la x=144, nu la 120 — sectiunea are padding propriu peste cadru;
   · pe telefon, doua din cele trei fotografii erau ascunse de regulile vechi de carusel. */
body.home .svb-mrc .w { padding-inline: 0; }
@media (max-width: 849px) {
  body.home .svb-mrc .car img { display: block !important; position: static !important;
    width: 100% !important; height: auto !important; opacity: 1 !important; }
}

/* ============================================================
   FLUXUL DE COMANDA — corecturi din rularea live, 10.09
   ============================================================ */

/* 1. Bifele si butoanele radio din cos si finalizare aveau 16x16 px — sub minimul de 24 (WCAG 2.5.8).
      Sunt exact elementele pe care omul trebuie sa le nimereasca pentru livrare si plata. */
.woocommerce-cart input[type="radio"], .woocommerce-cart input[type="checkbox"],
.woocommerce-checkout input[type="radio"], .woocommerce-checkout input[type="checkbox"] {
  width: 24px; height: 24px; min-width: 24px; margin-right: 8px;
  accent-color: var(--sv-negru, #111); cursor: pointer;
}
.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-cart .shipping li label { display: flex; align-items: center; gap: 8px; min-height: 32px; }

/* 2. In cos erau TREI butoane pline in acelasi ecran: cuponul, actualizarea si finalizarea.
      Amber ramane doar pe actiunea care duce comanda mai departe. */
.woocommerce-cart button[name="apply_coupon"],
.woocommerce-cart .coupon .button {
  background: #fff !important; color: var(--sv-negru, #111) !important;
  border: 1px solid var(--sv-bordura, #E8E3D9) !important;
}
.woocommerce-cart button[name="apply_coupon"]:hover,
.woocommerce-cart .coupon .button:hover { background: var(--sv-fundal-cald, #F7F4EE) !important; }

/* 3. „Actualizează coșul" dezactivat arata ca un buton stricat (amber spalacit).
      Il fac gri, ca sa se citeasca drept „nu ai ce actualiza acum". */
.woocommerce-cart button[name="update_cart"]:disabled,
.woocommerce-cart button[name="update_cart"][disabled] {
  background: var(--sv-fundal-cald, #F7F4EE) !important;
  color: var(--sv-gri, #565A5E) !important;
  border: 1px solid var(--sv-bordura, #E8E3D9) !important;
  opacity: 1 !important;
}

/* 4. Bulinele galeriei de pe pagina de produs: 24x20 -> 24x24. */
.single-product .sv-puncte button { width: 24px; height: 24px; }

/* 🚨 Pagina de finalizare NU are clasa `woocommerce-checkout` pe <body> (tema o omite), deci
   regulile scrise pe ea nu prindeau nimic. Tintesc formularul si bifa direct. */
form.checkout input[type="radio"], form.checkout input[type="checkbox"],
form.woocommerce-checkout input[type="radio"], form.woocommerce-checkout input[type="checkbox"],
#ship-to-different-address-checkbox, #terms {
  width: 24px !important; height: 24px !important; min-width: 24px !important;
  margin-right: 8px; accent-color: var(--sv-negru, #111); cursor: pointer;
}
#ship-to-different-address, .woocommerce-terms-and-conditions-wrapper label {
  display: flex; align-items: center; gap: 8px; min-height: 32px;
}

/* Butoanele „Adaugă în coș" din listarea de produse erau albe cu contur negru, iar pe pagina de
   start amber — aceeasi actiune, doua culori. Le aduc pe toate pe portocaliul de brand. */
ul.products li.product .button.add_to_cart_button,
ul.products li.product a.add_to_cart_button,
ul.products li.product .button.product_type_simple {
  background: var(--sv-soare, #F59B00) !important;
  color: var(--sv-negru, #111) !important;
  border-color: var(--sv-soare, #F59B00) !important;
}
ul.products li.product .button.add_to_cart_button:hover,
ul.products li.product a.add_to_cart_button:hover,
ul.products li.product .button.product_type_simple:hover {
  background: var(--sv-soare-hover, #D88900) !important;
  border-color: var(--sv-soare-hover, #D88900) !important;
  color: var(--sv-negru, #111) !important;
}

/* ============================================================
   CARDURILE DIN CATALOG (/produse/ si paginile de categorie) — 10.09
   Masurat inainte: 380x434, chenar de 1 px cu colturi de 10, imaginea taiata la 348x230, iar
   titlul, pretul, butonul si marginea de jos la inaltimi DIFERITE la fiecare card.
   Le aduc la acelasi tipar cu cardurile de pe pagina de start: fara caseta, flaconul intreg si
   mai mare, randuri aliniate, pretul mare cu lei/zi mic langa el, butonul lipit jos.
   ============================================================ */
ul.products li.product {
  display: flex; flex-direction: column;
  border: 0 !important; border-radius: 0 !important;
  background: transparent !important; padding: 0 !important;
}
/* imaginea: flaconul intreg, nu taiat — raport 4:5 ca in cardurile de acasa */
ul.products li.product figure,
ul.products li.product .ct-media-container {
  /* patrat, nu 4:5: la 4:5 cardul ajungea la 679 px si intrau doar 1,5 randuri pe ecran.
     Intr-un catalog conteaza sa vezi multe produse dintr-o privire. */
  margin: 0 0 14px; aspect-ratio: 1 / 1; overflow: hidden; background: transparent;
}
ul.products li.product figure img,
ul.products li.product .ct-media-container img {
  width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box;
}
/* eticheta categoriei: mica, gri, fara chenar */
ul.products li.product ul.entry-meta { order: 1; margin: 0 0 6px; padding: 0; list-style: none; }
ul.products li.product .meta-categories a {
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sv-gri, #565A5E) !important; text-decoration: none !important; background: none !important;
  padding: 0 !important;
}
/* titlul: doua randuri fixe, ca pretul sa cada la aceeasi inaltime la toate cardurile */
ul.products li.product .woocommerce-loop-product__title {
  order: 2; margin: 0 0 8px; font-size: 15.5px; line-height: 1.32; font-weight: 700;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  min-height: calc(2 * 1.32em);
}
/* descrierea: doua randuri fixe */
ul.products li.product .sv-card__scurt {
  order: 3; margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--sv-gri, #565A5E);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  min-height: calc(2 * 1.45em);
}
/* pretul: cifra mare, lei/zi mic si gri, pe aceeasi linie de baza */
ul.products li.product .price { order: 4; margin: 0 0 12px; }
ul.products li.product .sv-pret { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
ul.products li.product .sv-pret__flacon { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--sv-negru, #111); }
ul.products li.product .sv-pret__zi { font-size: 13px; font-weight: 500; color: var(--sv-gri, #565A5E); }
/* butonul: lipit jos, pe toata latimea, tinta de 44 px */
ul.products li.product .ct-woo-card-actions { order: 5; margin-top: auto; }
ul.products li.product .button {
  width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0 !important;
}
/* semn ca e apasabil */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  ul.products li.product figure img { transition: transform .45s cubic-bezier(.25, 1, .5, 1); }
  ul.products li.product:hover figure img { transform: scale(1.04); }
}
@media (max-width: 689px) {
  ul.products li.product .woocommerce-loop-product__title { font-size: 14px; -webkit-line-clamp: 3; min-height: calc(3 * 1.32em); }
  ul.products li.product .sv-card__scurt { font-size: 12.5px; -webkit-line-clamp: 2; }
  ul.products li.product .sv-pret__flacon { font-size: 19px; }
  ul.products li.product .sv-pret__zi { font-size: 12px; }
}

/* 🚨 Tema pune `display:grid` pe cardul din catalog, cu randuri automate — de aceea `order` si
   „butonul lipit jos" n-au avut efect, desi cardurile aveau deja aceeasi inaltime (650 px).
   Fortez coloana flexibila; abia asa randurile se pot alinia intre carduri. */
ul.products li.product { display: flex !important; flex-direction: column !important; }
ul.products li.product figure,
ul.products li.product .ct-media-container { flex: none; }
ul.products li.product figure img,
ul.products li.product .ct-media-container img { height: 100% !important; }

/* Imaginea umplea doar 230 px dintr-o caseta de 475 — tema ii fixa inaltimea. Caseta e deja
   `position:relative`, deci o intind peste ea. Flaconul creste de la 380x230 la 380x475. */
ul.products li.product .ct-media-container img,
ul.products li.product figure img {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: contain !important; padding: 6px; box-sizing: border-box;
}

/* `height:100%` nu a invins regula temei; imaginea are insa deja `aspect-ratio: 4/5` pe ea, asa ca
   ii las inaltimea sa iasa din raport. 380 latime -> 475 inaltime, cat caseta. */
ul.products li.product .ct-media-container img,
ul.products li.product figure img {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
}


/* ============================================================
   IMAGINEA DIN CARDUL DE CATALOG — regula finala, 10.09
   In foaie existau SASE reguli pe acelasi element, dintr-o sesiune veche si din incercarile mele
   de azi: una fixa `max-height: 230px` si `aspect-ratio: 4/5 !important`, alta punea `height:100%`.
   De aceea flaconul ramanea la 230 px intr-o caseta de 380. Aici e singura care conteaza: caseta
   e patrata, imaginea o umple, iar inaltimea iese din raport, nu dintr-un plafon.
   ============================================================ */
ul.products li.product .ct-media-container,
ul.products li.product figure { aspect-ratio: 1 / 1 !important; overflow: hidden; }
ul.products li.product .ct-media-container img,
ul.products li.product figure img {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  max-height: none !important; min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  padding: 6px; box-sizing: border-box;
}


/* Butonul din cardul de catalog: pusesem `border-radius: 0`, iar pe restul site-ului butoanele au
   6 px — se vedea ca o nepotrivire. Si era doar 121 px lat, cat textul, in loc de toata caseta. */
ul.products li.product .ct-woo-card-actions { display: block !important; width: 100%; }
ul.products li.product .button,
ul.products li.product .ct-woo-card-actions .button {
  border-radius: 6px !important;
  width: 100% !important;
  min-height: 44px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
}


/* ============================================================
   CARDUL DE CATALOG — ii dau granita inapoi, 10.09
   Scosesem caseta cu totul si, la trei coloane, nu se mai vedea unde se termina un produs si
   incepe altul: butonul de jos parea ca apartine cardului urmator. Granita e ce leaga imaginea,
   textul si butonul intr-un singur obiect.
   Casetă albă, linie de par, colturi de 8 px (cat butonul), si spatiu mai mare intre carduri.
   ============================================================ */
ul.products li.product {
  background: #fff !important;
  border: 1px solid var(--sv-bordura, #E8E3D9) !important;
  border-radius: 8px !important;
  padding: 14px 14px 16px !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
ul.products li.product:hover {
  border-color: #D9D2C4 !important;
  box-shadow: 0 8px 24px rgba(17, 17, 17, .07);
}
ul.products { gap: 26px !important; }

/* ============================================================
   PAGINILE Despre noi / De ce Solvital (.svp) — 10.09.2026
   Acelasi limbaj ca pagina de start: Archivo, negru/antracit, linii de par, un singur accent
   (portocaliul, doar pe butonul de actiune si pe O-ul din nume). Mobile-first: baza e o coloana,
   grilele intra de la 850 px.
   ============================================================ */
.svp { --lat: var(--sv-container, 1200px); color: var(--sv-antracit, #303235); }
.svp > section { max-width: var(--lat); width: calc(100% - 46px); margin-inline: auto; }
.svp h1, .svp h2, .svp h3 { color: var(--sv-negru, #111); margin: 0; line-height: 1.12; letter-spacing: -.01em; }
.svp h1 { font-size: clamp(30px, 4.2vw, 50px); font-weight: 700; }
.svp h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; margin-bottom: 14px; }
.svp h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.svp p { font-size: 16.5px; line-height: 1.6; margin: 0 0 14px; max-width: 58ch; }
.svp .svp-ey { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sv-gri, #565A5E); margin: 0 0 14px; }
.svp .svp-lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; max-width: 52ch; margin-top: 18px; }

.svp-erou { padding: 40px 0 8px; display: grid; gap: 28px; }
.svp-erou__poza { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.svp-erou__poza img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svp-erou--simplu { padding-bottom: 16px; }

.svp-bloc { padding: 40px 0; border-top: 1px solid var(--sv-bordura, #E8E3D9); }
.svp-bloc--ingust p { max-width: 62ch; }

.svp-fapte, .svp-motive { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.svp-fapte li, .svp-motive li { display: grid; grid-template-columns: 44px 1fr; gap: 0 14px; align-items: start; }
.svp-fapte li h3, .svp-fapte li p { grid-column: 2; }
.svp-nr { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--sv-gri, #565A5E); padding-top: 4px; }
.svp-motive li + li { border-top: 1px solid var(--sv-bordura, #E8E3D9); padding-top: 28px; }
.svp-motive h2 { margin-bottom: 8px; }
.svp-dovada { font-size: 14.5px; color: var(--sv-gri, #565A5E); margin: 0; }
.svp-dovada b { color: var(--sv-negru, #111); font-weight: 700; }

.svp-poze { display: grid; gap: 12px; padding: 8px 0 40px; }
.svp-poze figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.svp-poze img { width: 100%; height: 100%; object-fit: cover; display: block; }

.svp-firma { display: grid; gap: 24px; }
.svp-firma a { color: var(--sv-negru, #111); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.svp-citat { padding: 40px 0; border-top: 1px solid var(--sv-bordura, #E8E3D9); }
.svp-citat blockquote { margin: 0; font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; line-height: 1.2; color: var(--sv-negru, #111); max-width: 24ch; }
.svp-sem { margin: 14px 0 0; font-size: 14px; color: var(--sv-gri, #565A5E); }

.svp-banda { display: grid; border-top: 1px solid var(--sv-bordura, #E8E3D9); border-bottom: 1px solid var(--sv-bordura, #E8E3D9); }
.svp-banda > div { padding: 18px 0; display: flex; flex-direction: column; gap: 3px; }
.svp-banda > div + div { border-top: 1px solid var(--sv-bordura, #E8E3D9); }
.svp-banda b { font-size: 16px; color: var(--sv-negru, #111); }
.svp-banda span { font-size: 14px; color: var(--sv-gri, #565A5E); }

.svp-cta { padding: 40px 0 56px; }
.svp-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 26px; background: var(--sv-soare, #F59B00); color: var(--sv-negru, #111) !important; font-weight: 700; font-size: 16px; border-radius: 6px; text-decoration: none !important; }
.svp-btn:hover { background: var(--sv-soare-hover, #D88900); }

@media (min-width: 850px) {
  .svp-erou { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 56px; padding: 56px 0 16px; }
  .svp-erou--simplu { grid-template-columns: 1fr; }
  .svp-bloc { padding: 56px 0; }
  .svp-fapte { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .svp-fapte li { grid-template-columns: 1fr; }
  .svp-fapte li h3, .svp-fapte li p { grid-column: 1; }
  .svp-motive { gap: 40px; }
  .svp-motive li { grid-template-columns: 72px minmax(0, 1fr); gap: 0 24px; }
  .svp-motive li + li { padding-top: 40px; }
  .svp-motive p { max-width: 60ch; }
  .svp-poze { grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 16px 0 56px; }
  .svp-poze--doua { grid-template-columns: repeat(2, 1fr); }
  .svp-firma { grid-template-columns: 1fr 1fr; gap: 56px; }
  .svp-banda { grid-template-columns: repeat(3, 1fr); }
  .svp-banda > div { padding: 24px 24px 24px 0; }
  .svp-banda > div + div { border-top: 0; border-left: 1px solid var(--sv-bordura, #E8E3D9); padding-left: 24px; }
  .svp-citat { padding: 56px 0; }
  .svp-cta { padding: 48px 0 72px; }
}

/* Marca inregistrata la sigla din antet: un R mic, sus-dreapta, cum are si sigla din subsol.
   Sigla e imagine, deci semnul vine dintr-un pseudo-element pe linkul ei — fara imagine noua. */
.site-logo-container { position: relative; display: inline-block; }
.site-logo-container::after { content: "\00AE"; position: absolute; top: -2px; right: -11px; font-size: 9px; line-height: 1; font-weight: 600; color: var(--sv-negru, #111); }

/* Corecturi dupa prima randare a paginilor .svp (10.09):
   1. In lista de motive, numarul si textul cadeau AMANDOUA in prima coloana (72 px) — textul iesea
      un cuvant pe rand. Le asez explicit pe coloane, nu las plasarea automata.
   2. Citatul primea dunga laterala portocalie a temei (4 px) si 51 px padding — o scot.
   3. Tema pune titlul paginii ca H1 deasupra continutului; paginile au H1-ul lor, deci erau doua. */
.svp-motive li { grid-template-columns: 44px minmax(0, 1fr) !important; }
.svp-motive li > .svp-nr { grid-column: 1 !important; grid-row: 1; }
.svp-motive li > div { grid-column: 2 !important; grid-row: 1; min-width: 0; }
.svp-fapte li > .svp-nr { grid-column: 1; grid-row: 1; }
.svp-fapte li > h3 { grid-column: 2; grid-row: 1; }
.svp-fapte li > p { grid-column: 2; grid-row: 2; }
@media (min-width: 850px) {
  .svp-motive li { grid-template-columns: 72px minmax(0, 1fr) !important; }
  .svp-fapte li > .svp-nr, .svp-fapte li > h3, .svp-fapte li > p { grid-column: 1; grid-row: auto; }
}
.svp .svp-citat blockquote { border: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; font-style: normal; }
.page-id-21 .hero-section, .page-id-21 .entry-header,
.page-id-209 .hero-section, .page-id-209 .entry-header { display: none !important; }

/* Faptul 02 avea titlul cu 13 px mai jos: cele trei <li> sunt intinse la aceeasi inaltime de
   grila parinte, iar randurile lor interne (numar, titlu, text) se distribuiau pe inaltimea in
   plus — la 02, cu textul cel mai scurt, spatiul liber urca in titlu. Randurile se strang sus. */
.svp-fapte li, .svp-motive li { align-content: start; }

/* Fara fotografii pe cele doua pagini (10.09): eroul devine o singura coloana de text, latimea
   de citit ramane la 52–62 de caractere. */
.svp-erou { grid-template-columns: 1fr !important; }

/* ============================================================
   EROUL PE ECRANE LATE — 10.09.2026
   Andrei, de pe un ecran mare: „imaginea se întinde cât e de mare ecranul… nu se
   vede sigla SOLVITAL de pe spatele femeii”. Măsurat: eroul e fix 830 px înalt dar
   lat cât ecranul; la 2560 px poza pătrată (caiacul) ajunge o fâșie de 33 % din
   înălțimea ei — doar padela și părul, sigla cade la 991 px, sub marginea eroului.
   1. Eroul se oprește la lățimea containerului paginii (1550 px, cât `.w`) și
      stă centrat; peste 1550 rămân margini albe, ca la restul secțiunilor. Nu mai
      scalează cu ecranul: la 1920 și la 3440 poza e la fel de mare.
   2. Cadrul cu caiacul se așază la 62 % pe verticală: fereastra devine 30–82 % din
      poză — capul intră cu 80+ px deasupra, sigla (59,5–62 % din poză) ajunge la
      ~515 px, deasupra titlului.
   3. Blocul de titlu coboară de la 120 la 48 px de marginea de jos, ca sigla să
      rămână deasupra lui (era de la 489 px, cu sigla dedesubt la orice lățime).
   4. overflow: hidden — cu margini albe, cadrul următor din carusel (translatat la
      +100 %) s-ar fi văzut în dreapta eroului; până acum îl ascundea marginea ecranului.
   Pe telefon nu se schimbă nimic (Andrei: „pe mobil e ok”). */
@media (min-width: 1000px) {
  body.home .svb-hero.full { width: min(100vw, 1550px); margin-left: calc(50% - min(50vw, 775px)); overflow: hidden; }
  body.home .svb-hero .bgtrack img.bg[src*="sv-hero-2"] { object-position: 45% 62%; }
  body.home .svb-hero .hc { margin-bottom: 48px; }
}


/* ============================================================
   BANDA DE GARANTII — AL SASELEA REPER (10.09.2026)
   „Compuși de la furnizori din UE" a facut banda de 6, nu de 5. Grila era `repeat(5,1fr)`,
   iar pe telefon al cincilea reper tinea randul intreg (`:last-child{grid-column:1/-1}`) —
   regula scrisa cand ultimul era „Fabricat în România" si ramanea singur. Cu 6 repere aceeasi
   regula punea steagul UE pe tot randul si il lasa pe cel romanesc singur intr-o celula.
   Sase se imparte fara rest la 6, 3 si 2, deci nu mai ramane nimic orfan la nicio latime
   si „ultimul tine randul" nu-si mai are rostul. Idiomul ramane acelasi: celule despartite
   de linii de par, fara casete, fara fundal.
   ============================================================ */
body.home .svb-usp .w { grid-template-columns: repeat(6, 1fr); }
body.home .svb-usp .it { font-size: 15px; padding: 20px 14px; }
body.home .svb-usp .it:first-child { border-left: 0; padding-left: 0; }

@media (max-width: 1199px) {
  body.home .svb-usp .it { font-size: 14px; padding: 18px 11px; gap: 9px; }
}

/* sub 1000 px: trei coloane, doua randuri */
@media (max-width: 999px) {
  body.home .svb-usp .w { grid-template-columns: repeat(3, 1fr); }
  body.home .svb-usp .it { font-size: 15px; padding: 16px 14px; gap: 10px; }
  body.home .svb-usp .it:last-child { grid-column: auto; justify-content: flex-start; padding-left: 14px; }
  body.home .svb-usp .it:nth-child(odd) { border-left: 1px solid var(--sv-bordura, #E8E3D9); padding-left: 14px; }
  body.home .svb-usp .it:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  body.home .svb-usp .it:nth-child(-n+3) { border-top: 0; }
  body.home .svb-usp .it:nth-child(n+4) { border-top: 1px solid var(--sv-bordura, #E8E3D9); }
}

/* sub 690 px: doua coloane, trei randuri */
@media (max-width: 689px) {
  body.home .svb-usp .w { grid-template-columns: repeat(2, 1fr); }
  body.home .svb-usp .it { font-size: 14px; padding: 14px 12px; gap: 9px; }
  body.home .svb-usp .it:last-child { padding-left: 12px; }
  body.home .svb-usp .it:nth-child(3n+1) { border-left: 1px solid var(--sv-bordura, #E8E3D9); padding-left: 12px; }
  body.home .svb-usp .it:nth-child(odd) { border-left: 0; padding-left: 0; }
  body.home .svb-usp .it:nth-child(-n+2) { border-top: 0; }
  body.home .svb-usp .it:nth-child(n+3) { border-top: 1px solid var(--sv-bordura, #E8E3D9); }
}


/* ============================================================
   PLACA NOURISH — ALINIERE LA STANGA (10.09.2026)
   Placa statea centrata in jumatatea alba; pe ecrane late asta o impingea in coltul din dreapta,
   departe de panoul intunecat. O ancorez langa cusatura dintre cele doua jumatati.
   Mutarea se face din `object-position`, NU din `justify-content`: imaginea e `width:100%`,
   deci umple toata jumatatea, iar placa e asezata de `object-fit:contain` INAUNTRUL ei.
   Sub 1000 px sectiunea trece pe o coloana si placa ramane centrata, cum se cuvine.
   ============================================================ */
@media (min-width: 1000px) {
  body.home .svb-why .rt { padding-left: clamp(28px, 3.2vw, 60px); }
  body.home .svb-why .rt img { object-position: left center; }
}


/* ============================================================
   CASETA FONDATORULUI — DOUA RANDURI (10.09.2026)
   `.svb-badge b` e `display:block`, deci „Fondatorul SOLVITAL" cadea pe al treilea rand.
   Atributia curge acum dupa citat, cu o linie de pauza inaintea ei.
   ============================================================ */
body.home .svb-hero .svb-badge b { display: inline; }
body.home .svb-hero .svb-badge .sem { font-size: 12.5px; color: var(--sv-gri, #565A5E); }

/* CASETA FONDATORULUI — LATIME: la 320 px citatul plus atributia faceau TREI randuri
   (73 de caractere la ~27 pe rand). La 430 px intra in doua. Pe telefon ramane ingusta:
   o caseta de 85% din ecran ar acoperi eroul. */
@media (min-width: 690px) {
  body.home .svb-hero .svb-badge { max-width: min(430px, 34vw); }
}

/* ============================================================
   BADGE-URILE NOURISH IN SUBSOL (10.09.2026)
   Sub numarul de telefon, deasupra pictogramelor SAL/ANPC. Fara caseta, fara link.
   Cele doua badge-uri sunt fisiere SEPARATE, la 64 px (licenta cere minimum 44).
   Nota masurata: discul badge-ului e bleumarin foarte inchis (39% din pixeli la 0,32,64), iar
   subsolul e #111111 — se va vedea mai ales auriul. Asezarea e ceruta explicit.
   ============================================================ */
.sv-fs-nrs { margin: 18px 0 20px; }
.sv-fs-brand .sv-fs-nrs__et {   /* subsolul are `color:#fff` cu selector mai tare; il bat */
  display: block;
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  margin: 0 0 11px;
}
.sv-fs-nrs__b { display: flex; gap: 14px; align-items: center; }
.sv-fs-nrs__b img { width: 64px; height: 64px; display: block; }
@media (max-width: 600px) { .sv-fs-nrs__b img { width: 58px; height: 58px; } }