/* ============================================================
Albinuța Naturistă — tema WordPress (Hostwin)
Direcția A: „Farmacia de cartier, rafinată”.
Acesta este CSS-ul machetei aprobate (proiect/A-farmacie/stil.css),
adaptat pentru temă: tokenii la :root, selectorii machetei PĂSTRAȚI
(pachetele refolosesc aceleași clase), plus secțiunile 23–28 pentru
clasele WordPress/WooCommerce, pagini de conținut și suprapuneri.
Fonturile vin din fonturi.css (Fraunces + Manrope, auto-găzduite).
Modificări față de machetă, în corpul comun: h5/h6 adăugate la titluri;
.btn primește și clasele butoanelor WooCommerce (.button etc.).
============================================================ */
/* ----- 1. Tokeni ----- */
:root {
--verde: #1F4B30; /* brand: butoane, legături active, subsol */
--verde-2: #173A25; /* hover */
--verde-pal: #E9F1EB; /* nuanță: „în stoc”, filtru activ, cercuri de pictograme */
--verde-linie: #C9D9CE; /* contururi secundare */
--cerneala: #17201A; /* titluri, prețuri */
--text: #2A332C; /* corp */
--mut: #66716A; /* secundar */
--linie: #E6E8E3; /* hairline */
--pagina: #FFFFFF;
--placa: #F4F3EE; /* placa fotografiilor, secțiuni alternative */
--placa-2: #ECEBE3; /* placeholdere */
--miere: #C9962B; /* accent < 2 %: punctul de pe insigna „la reducere”, Promoții */
--rosu: #B3261E; /* doar erori de formular */
--umbra: 0 1px 2px rgba(23, 32, 26, .04), 0 12px 28px -14px rgba(23, 32, 26, .16);
--fraunces: "Fraunces", "Source Serif 4", Georgia, serif;
--manrope: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* ----- 2. Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--pagina); color: var(--text); font: 400 15px/1.55 var(--manrope); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--fraunces); font-weight: 500; color: var(--cerneala); letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
s { text-decoration-thickness: 1px; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
.ico { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.num { font-variant-numeric: tabular-nums; }
.mut { color: var(--mut); }
/* ----- 3. Tipografie și controale ----- */
.eyebrow { display: inline-block; font: 700 12px/1 var(--manrope); letter-spacing: .09em; text-transform: uppercase; color: var(--verde); }
.h-display { font: 500 clamp(34px, 4.1vw, 54px)/1.06 var(--fraunces); letter-spacing: -.015em; }
.h2 { font: 500 clamp(26px, 2.5vw, 34px)/1.15 var(--fraunces); }
.btn, .woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 8px; border: 1px solid var(--verde); background: var(--verde); color: #fff; font: 600 15px/1 var(--manrope); cursor: pointer; white-space: nowrap; transition: background .18s, border-color .18s, color .18s, box-shadow .18s; }
.btn:hover, .woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover, .woocommerce input.button:hover, .woocommerce-button:hover { background: var(--verde-2); border-color: var(--verde-2); }
.btn.secundar { background: #fff; color: var(--verde); }
.btn.secundar:hover { background: var(--verde-pal); }
.btn.mic { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn.lat { width: 100%; }
.btn .ico { width: 18px; height: 18px; }
.link { display: inline-block; font: 600 14px/1.2 var(--manrope); color: var(--verde); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--verde-linie); }
.link:hover { text-decoration-color: var(--verde); }
/* ----- 4. Bara de sus ----- */
.bara-sus { background: var(--verde); color: #fff; font: 500 13px/1.3 var(--manrope); }
.bara-sus .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 36px; gap: 16px; }
.bara-sus .stanga, .bara-sus .dreapta { display: flex; align-items: center; gap: 0; }
.bara-sus span + span::before { content: "·"; margin: 0 10px; opacity: .55; }
.bara-sus a { color: #fff; }
.bara-sus a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ----- 5. Antet ----- */
.antet { background: #fff; border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 50; }
.antet-rand { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "sigla cauta actiuni"; align-items: center; gap: 32px; min-height: 84px; }
.sigla { grid-area: sigla; display: block; }
.sigla img { width: 196px; height: auto; }
.meniu-buton { display: none; grid-area: meniu; width: 44px; height: 44px; border: 0; background: none; color: var(--cerneala); align-items: center; justify-content: center; margin-left: -10px; }
.meniu-buton .ico { width: 24px; height: 24px; }
.cauta { grid-area: cauta; position: relative; max-width: 620px; margin: 0 auto; width: 100%; }
.cauta input { width: 100%; height: 48px; border: 1px solid var(--linie); border-radius: 10px; padding: 0 16px 0 46px; background: #fff; font: 500 15px/1 var(--manrope); color: var(--cerneala); -webkit-appearance: none; appearance: none; }
.cauta input::placeholder { color: var(--mut); opacity: 1; }
.cauta input:focus { border-color: var(--verde); outline: none; box-shadow: 0 0 0 3px var(--verde-pal); }
.cauta .lupa { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--mut); pointer-events: none; }
.antet-actiuni { grid-area: actiuni; display: flex; align-items: center; gap: 6px; }
.actiune { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; font: 600 14px/1.2 var(--manrope); color: var(--cerneala); position: relative; }
.actiune:hover { background: var(--placa); }
.actiune .ico { width: 24px; height: 24px; }
.actiune .text small { display: block; font: 500 12px/1.2 var(--manrope); color: var(--mut); }
.cos-nr { position: absolute; top: 4px; left: 26px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--verde); color: #fff; font: 700 11px/18px var(--manrope); text-align: center; padding: 0 5px; }
/* ----- 6. Meniu principal + mega-meniu ----- */
.nav { border-top: 1px solid var(--linie); position: relative; }
.nav > .wrap > ul { display: flex; align-items: center; gap: 2px; }
.nav > .wrap > ul > li > a { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 14px; font: 600 14px/1 var(--manrope); color: var(--cerneala); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.nav > .wrap > ul > li > a .ico { width: 16px; height: 16px; color: var(--mut); }
.nav > .wrap > ul > li:first-child > a { padding-left: 0; }
.nav li:hover > a, .nav li.activ > a, .nav li.deschis > a { border-bottom-color: var(--verde); color: var(--verde); }
.nav li.promo { margin-left: auto; }
.nav li.promo > a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--miere); }
.mega { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); box-shadow: 0 28px 44px -28px rgba(23, 32, 26, .28); z-index: 60; }
.nav li:hover > .mega, .nav li.deschis > .mega, .nav li:focus-within > .mega { display: block; }
.mega .wrap { display: grid; grid-template-columns: 1.15fr 1fr 1fr 300px; gap: 40px; padding-top: 30px; padding-bottom: 34px; }
.mega h4 { font: 700 12px/1 var(--manrope); letter-spacing: .09em; text-transform: uppercase; color: var(--mut); margin-bottom: 14px; }
.mega li { padding: 6px 0; }
.mega li a { display: flex; justify-content: space-between; gap: 12px; font: 500 14.5px/1.3 var(--manrope); color: var(--text); }
.mega li a:hover { color: var(--verde); }
.mega li a span { color: var(--mut); font-size: 13px; font-variant-numeric: tabular-nums; }
.mega .toate { margin-top: 12px; }
.mega-placa { background: var(--placa); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; min-height: 230px; position: relative; overflow: hidden; }
.mega-placa b { display: block; font: 500 22px/1.2 var(--fraunces); color: var(--cerneala); max-width: 8ch; }
.mega-placa span { display: block; font: 500 13px/1.4 var(--manrope); color: var(--mut); margin-top: 6px; }
.mega-placa img { position: absolute; right: 6px; bottom: -22px; width: 150px; mix-blend-mode: multiply; }
/* ----- 7. Erou ----- */
.erou { padding: 44px 0 0; }
.erou .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.erou h1 { margin: 18px 0 20px; }
.erou .text > p { font-size: 18px; line-height: 1.55; color: var(--mut); max-width: 50ch; }
.erou .actiuni { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.erou .bife { display: flex; gap: 22px; margin-top: 30px; flex-wrap: wrap; font: 500 13.5px/1.3 var(--manrope); color: var(--text); }
.erou .bife li { display: flex; align-items: center; gap: 8px; }
.erou .bife .ico { width: 18px; height: 18px; color: var(--verde); }
/* ----- 8. Placeholdere de conținut (zone clar marcate) ----- */
.ph { position: relative; border-radius: 14px; background: linear-gradient(145deg, #F6F5F0 0%, #ECEBE3 100%); display: grid; place-items: center; overflow: hidden; color: var(--mut); }
.ph::before { content: ""; position: absolute; inset: 14px; border: 1px dashed rgba(23, 32, 26, .22); border-radius: 8px; pointer-events: none; }
.ph.r1610 { aspect-ratio: 16 / 10; }
.ph.r43 { aspect-ratio: 4 / 3; }
.ph.r11 { aspect-ratio: 1 / 1; }
.ph-eticheta { position: relative; text-align: center; padding: 24px; max-width: 36ch; }
.ph-eticheta .ico { width: 28px; height: 28px; margin: 0 auto 12px; color: var(--mut); }
.ph-eticheta b { display: block; font: 600 14px/1.3 var(--manrope); color: var(--text); margin-bottom: 4px; }
.ph-eticheta span { display: block; font: 500 12.5px/1.45 var(--manrope); color: var(--mut); }
.ph-eticheta .dim { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
/* ----- 9. Bara de încredere ----- */
.incredere { margin: 44px 0 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.incredere .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.incredere li { display: flex; gap: 14px; align-items: flex-start; padding: 22px 24px 22px 0; }
.incredere li + li { border-left: 1px solid var(--linie); padding-left: 24px; }
.incredere .ico { width: 26px; height: 26px; color: var(--verde); margin-top: 1px; }
.incredere b { display: block; font: 700 14px/1.3 var(--manrope); color: var(--cerneala); }
.incredere span { font: 500 13px/1.4 var(--manrope); color: var(--mut); }
/* ----- 10. Secțiuni ----- */
.sectiune { padding: 60px 0 0; }
.sectiune-cap { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.sectiune-cap .eyebrow { display: block; margin-bottom: 10px; }
.sectiune-cap p { color: var(--mut); margin-top: 8px; max-width: 60ch; }
.sectiune-cap .link { white-space: nowrap; margin-bottom: 6px; }
/* ----- 11. Cumpără după nevoie ----- */
.nevoi { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.nevoie { display: flex; flex-direction: column; gap: 14px; padding: 18px 16px 16px; border: 1px solid var(--linie); border-radius: 12px; background: #fff; transition: border-color .18s, box-shadow .18s; }
.nevoie:hover { border-color: var(--verde-linie); box-shadow: var(--umbra); }
.nevoie .cerc { width: 44px; height: 44px; border-radius: 50%; background: var(--verde-pal); display: grid; place-items: center; color: var(--verde); }
.nevoie .cerc .ico { width: 22px; height: 22px; }
.nevoie b { display: block; font: 600 14px/1.3 var(--manrope); color: var(--cerneala); }
.nevoie span { display: block; font: 500 12.5px/1.3 var(--manrope); color: var(--mut); margin-top: 3px; }
/* ----- 12. Raioane (plăci de categorie) ----- */
.raioane { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.raion { position: relative; display: block; background: var(--placa); border-radius: 14px; padding: 18px 18px 0; aspect-ratio: 1 / 1.15; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.raion:hover { transform: translateY(-2px); box-shadow: var(--umbra); }
.raion b { display: block; font: 500 20px/1.15 var(--fraunces); color: var(--cerneala); }
.raion span { display: block; font: 500 12.5px/1.3 var(--manrope); color: var(--mut); margin-top: 5px; }
.raion img { position: absolute; left: 8%; width: 84%; bottom: 0; height: 62%; object-fit: contain; object-position: center bottom; mix-blend-mode: multiply; }
.raion.copii img, .raion.casa img { height: 58%; }
/* ----- 13. Cardul de produs ----- */
.grila { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grila.trei { grid-template-columns: repeat(3, 1fr); }
.card { background: #fff; border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(23, 32, 26, .03); transition: box-shadow .2s, transform .2s, border-color .2s; }
.card:hover { box-shadow: var(--umbra); transform: translateY(-2px); border-color: var(--verde-linie); }
.card-img { position: relative; display: block; background: var(--placa); aspect-ratio: 1 / 1; padding: 12%; }
.card-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.insigna { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--linie); border-radius: 6px; padding: 5px 8px; font: 700 12px/1 var(--manrope); color: var(--cerneala); font-variant-numeric: tabular-nums; }
.insigna::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--miere); }
.card-corp { display: flex; flex-direction: column; gap: 5px; padding: 16px; flex: 1; }
.marca { font: 700 11.5px/1 var(--manrope); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.nume { font: 600 15px/1.35 var(--manrope); color: var(--cerneala); letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nume a:hover { color: var(--verde); }
.format { font: 500 13px/1.4 var(--manrope); color: var(--mut); }
.beneficiu { font: 400 13px/1.45 var(--manrope); color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; }
.pret-rand { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.pret { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.pret b { font: 800 19px/1 var(--manrope); color: var(--cerneala); letter-spacing: -.01em; }
.pret s { font: 500 13px/1 var(--manrope); color: var(--mut); }
.stoc { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--manrope); color: var(--verde); white-space: nowrap; }
.stoc::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }
.stoc.lipsa { color: var(--mut); }
.stoc.lipsa::before { background: var(--mut); }
.pret-min { font: 500 12px/1.35 var(--manrope); color: var(--mut); }
.btn-cos { margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--verde-linie); background: #fff; color: var(--verde); font: 600 14px/1.2 var(--manrope); text-align: center; transition: background .18s, color .18s, border-color .18s; }
.btn-cos:hover { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn-cos .ico { width: 17px; height: 17px; }
/* ----- 14. Plăci de campanie ----- */
.campanii { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.campanie { display: grid; grid-template-columns: 1fr 1fr; background: var(--placa); border-radius: 16px; overflow: hidden; }
.campanie .text { padding: 36px 32px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.campanie h3 { font: 500 28px/1.15 var(--fraunces); }
.campanie p { color: var(--mut); font-size: 14.5px; }
.campanie .text .link { margin-top: 6px; }
.campanie .ph { border-radius: 0; background: linear-gradient(145deg, #EDECE5, #E3E2D9); min-height: 268px; }
.campanie .ph::before { inset: 12px; }
/* ----- 15. Mărci ----- */
.marci { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.marca-slot { height: 72px; border: 1px solid var(--linie); border-radius: 10px; display: grid; place-items: center; font: 500 17px/1 var(--fraunces); color: var(--mut); background: #fff; letter-spacing: .01em; text-align: center; padding: 0 8px; }
.nota { font: 500 12.5px/1.45 var(--manrope); color: var(--mut); margin-top: 12px; }
/* ----- 16. Magazinul din Galați ----- */
.magazin { margin-top: 64px; background: var(--placa); border-radius: 20px; padding: 40px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.magazin .ph { background: linear-gradient(145deg, #ECEBE3, #E2E1D8); }
.magazin h2 { margin: 12px 0 14px; }
.magazin > div > p { color: var(--mut); font-size: 16px; line-height: 1.6; }
.magazin dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; margin: 24px 0 0; font-size: 14.5px; }
.magazin dt { color: var(--mut); font-weight: 500; }
.magazin dd { color: var(--cerneala); font-weight: 600; }
.de-completat { color: var(--mut); font-weight: 500; font-style: italic; }
.magazin .link { margin-top: 22px; }
/* ----- 17. Subsol ----- */
.subsol { background: var(--verde); color: rgba(255, 255, 255, .82); margin-top: 80px; }
.subsol .wrap { padding-top: 56px; padding-bottom: 28px; }
.subsol-grila { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr 1.3fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.subsol h4 { font: 700 12px/1 var(--manrope); letter-spacing: .09em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.subsol .nume-firma { font: 500 26px/1.1 var(--fraunces); color: #fff; margin-bottom: 12px; }
.subsol p { font-size: 14px; line-height: 1.6; }
.subsol p + p { margin-top: 10px; }
.subsol li { padding: 5px 0; font-size: 14px; }
.subsol a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.subsol .abonare { display: flex; gap: 8px; margin-top: 14px; }
.subsol .abonare input { flex: 1; min-width: 0; height: 44px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); color: #fff; padding: 0 14px; font: 500 14px var(--manrope); }
.subsol .abonare input::placeholder { color: rgba(255, 255, 255, .62); }
.subsol .abonare .btn { background: #fff; color: var(--verde); border-color: #fff; min-height: 44px; }
.subsol .abonare .btn:hover { background: var(--placa); border-color: var(--placa); }
.subsol-jos { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 24px; font-size: 13px; flex-wrap: wrap; }
.subsol-jos .plati { display: flex; gap: 8px; align-items: center; }
.chip-plata { border: 1px solid rgba(255, 255, 255, .32); border-radius: 6px; padding: 6px 10px; font: 700 12px/1 var(--manrope); color: #fff; letter-spacing: .03em; }
.subsol-jos .anpc { height: 40px; width: auto; border-radius: 4px; }
/* ----- 18. Fire de navigare ----- */
.fire { display: flex; gap: 8px; flex-wrap: wrap; font: 500 13px/1.3 var(--manrope); color: var(--mut); padding: 18px 0 0; }
.fire li + li::before { content: "›"; margin-right: 8px; opacity: .6; }
.fire a:hover { color: var(--verde); }
.fire li[aria-current] { color: var(--cerneala); }
/* ----- 19. Pagina de categorie ----- */
.cap-categorie { padding: 22px 0 0; }
.cap-categorie h1 { font: 500 40px/1.1 var(--fraunces); }
.cap-categorie > p { color: var(--mut); margin-top: 12px; max-width: 72ch; font-size: 15.5px; }
.chipuri { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0 0; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linie); font: 600 13.5px/1 var(--manrope); color: var(--text); background: #fff; }
.chip:hover { border-color: var(--verde-linie); }
.chip.activ { background: var(--verde); border-color: var(--verde); color: #fff; }
.chip span { color: var(--mut); font-weight: 500; font-variant-numeric: tabular-nums; }
.chip.activ span { color: rgba(255, 255, 255, .72); }
.catalog { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 44px; padding: 28px 0 0; align-items: start; }
.filtre { position: sticky; top: 150px; }
.filtru { border-top: 1px solid var(--linie); padding: 18px 0; }
.filtru:first-child { border-top: 0; padding-top: 0; }
.filtru h4 { display: flex; justify-content: space-between; align-items: center; font: 700 12.5px/1 var(--manrope); letter-spacing: .07em; text-transform: uppercase; color: var(--cerneala); margin-bottom: 14px; }
.filtru h4 .ico { width: 16px; height: 16px; color: var(--mut); }
.filtru label { display: flex; align-items: center; gap: 10px; padding: 6px 0; font: 500 14px/1.3 var(--manrope); color: var(--text); cursor: pointer; }
.filtru label span { margin-left: auto; color: var(--mut); font-size: 13px; font-variant-numeric: tabular-nums; }
.filtru input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--verde); margin: 0; flex: none; }
.interval { display: flex; align-items: center; gap: 8px; font: 500 13px var(--manrope); color: var(--mut); }
.interval input { width: 100%; min-width: 0; height: 40px; border: 1px solid var(--linie); border-radius: 8px; padding: 0 10px; font: 600 14px var(--manrope); color: var(--cerneala); font-variant-numeric: tabular-nums; }
.glisor { position: relative; height: 4px; background: var(--linie); border-radius: 2px; margin: 20px 9px 8px; }
.glisor i { position: absolute; left: 0; right: 32%; top: 0; bottom: 0; background: var(--verde); border-radius: 2px; }
.glisor b { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--verde); transform: translate(-50%, -50%); }
.comutator { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; font: 500 14px/1.3 var(--manrope); cursor: pointer; }
.comutator i { width: 38px; height: 22px; border-radius: 11px; background: var(--linie); position: relative; flex: none; transition: background .18s; }
.comutator i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left .18s; }
.comutator.pornit i { background: var(--verde); }
.comutator.pornit i::after { left: 19px; }
.filtre .sterge { margin-top: 10px; }
.bara-unelte { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--linie); }
.bara-unelte .rezultate { font: 500 14px var(--manrope); color: var(--mut); }
.bara-unelte .rezultate b { color: var(--cerneala); font-weight: 700; }
.bara-unelte .dreapta { display: flex; gap: 8px; }
.select { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 14px; border: 1px solid var(--linie); border-radius: 8px; font: 600 14px var(--manrope); color: var(--cerneala); background: #fff; white-space: nowrap; }
.select span { color: var(--mut); font-weight: 500; }
.select .ico { width: 16px; height: 16px; color: var(--mut); }
.btn-filtre { display: none; }
.paginare { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 44px 0 0; }
.paginare a, .paginare span { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; border: 1px solid var(--linie); font: 600 14px var(--manrope); padding: 0 12px; color: var(--cerneala); }
.paginare a:hover { border-color: var(--verde-linie); }
.paginare .activ { background: var(--verde); color: #fff; border-color: var(--verde); }
.paginare .ico { width: 16px; height: 16px; }
/* ----- 20. Pagina de produs ----- */
.pdp { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 60px; padding: 22px 0 0; align-items: start; }
.galerie { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 14px; position: sticky; top: 110px; }
.galerie .mare { background: var(--placa); border-radius: 16px; aspect-ratio: 4 / 5; padding: 9%; display: grid; place-items: center; position: relative; overflow: hidden; }
.galerie .mare img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.galerie .mare .insigna { top: 16px; left: 16px; }
.galerie .mici { display: flex; flex-direction: column; gap: 10px; }
.galerie .mici a { display: block; aspect-ratio: 1; background: var(--placa); border-radius: 10px; border: 1.5px solid transparent; padding: 10%; }
.galerie .mici a.activ { border-color: var(--verde); }
.galerie .mici img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.galerie .mici .ph { aspect-ratio: 1; border-radius: 10px; font-size: 10px; }
.galerie .mici .ph::before { inset: 5px; border-radius: 6px; }
.galerie .mici .ph span { font: 600 10.5px/1.2 var(--manrope); color: var(--mut); text-align: center; padding: 4px; }
.fisa .marca { display: inline-block; margin-bottom: 12px; }
.fisa .marca a { color: var(--verde); }
.fisa h1 { font: 500 38px/1.1 var(--fraunces); }
.fisa .format { font-size: 15.5px; margin-top: 10px; }
.pret-mare { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 24px; font-variant-numeric: tabular-nums; }
.pret-mare b { font: 800 34px/1 var(--manrope); color: var(--cerneala); letter-spacing: -.02em; }
.pret-mare s { font: 500 17px/1 var(--manrope); color: var(--mut); }
.pret-mare .insigna { position: static; }
.pret-detalii { margin-top: 10px; font: 500 13px/1.6 var(--manrope); color: var(--mut); }
.pret-detalii span + span::before { content: "·"; margin: 0 8px; }
.livrare { margin-top: 22px; display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--linie); border-radius: 12px; }
.livrare li { display: flex; gap: 10px; align-items: flex-start; font: 500 14px/1.45 var(--manrope); color: var(--text); }
.livrare .ico { color: var(--verde); width: 18px; height: 18px; margin-top: 3px; }
.livrare b { font-weight: 700; color: var(--cerneala); }
.cumpara { display: flex; gap: 12px; margin-top: 20px; }
.cantitate { display: inline-flex; align-items: center; border: 1px solid var(--linie); border-radius: 8px; height: 48px; flex: none; }
.cantitate button { width: 44px; height: 100%; background: none; border: 0; font: 600 18px var(--manrope); color: var(--cerneala); }
.cantitate input { width: 44px; height: 100%; border: 0; text-align: center; font: 700 15px var(--manrope); color: var(--cerneala); border-left: 1px solid var(--linie); border-right: 1px solid var(--linie); -moz-appearance: textfield; }
.cantitate input::-webkit-inner-spin-button, .cantitate input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cumpara .btn { flex: 1; }
.fapte { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linie); font: 500 13.5px/1.4 var(--manrope); }
.fapte dt { color: var(--mut); }
.fapte dd { color: var(--cerneala); font-weight: 600; margin-top: 2px; }
.fapte dd a { color: var(--verde); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--verde-linie); }
.fisa-farmacist { margin-top: 72px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
.fisa-farmacist .eyebrow { display: block; margin-bottom: 14px; }
.ancore { position: sticky; top: 120px; display: grid; gap: 2px; }
.ancore a { display: block; padding: 10px 14px; border-left: 2px solid var(--linie); font: 600 14px/1.3 var(--manrope); color: var(--mut); }
.ancore a.activ, .ancore a:hover { color: var(--verde); border-left-color: var(--verde); }
.acordeon { border-top: 1px solid var(--linie); }
.acordeon:last-of-type { border-bottom: 1px solid var(--linie); }
.acordeon summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; cursor: pointer; font: 500 22px/1.25 var(--fraunces); color: var(--cerneala); }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary .ico { width: 22px; height: 22px; color: var(--mut); transition: transform .2s; }
.acordeon[open] summary .ico { transform: rotate(45deg); }
.acordeon .continut { padding: 0 0 30px; max-width: 70ch; font-size: 15.5px; line-height: 1.65; color: var(--text); }
.acordeon .continut p + p { margin-top: 12px; }
.acordeon ul.lista { list-style: disc; padding-left: 20px; }
.acordeon ul.lista li { margin: 6px 0; }
.tabel { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 14px 0 10px; font-variant-numeric: tabular-nums; }
.tabel th { text-align: left; font: 700 12px/1 var(--manrope); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); padding: 0 0 10px; border-bottom: 1px solid var(--cerneala); }
.tabel td { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.tabel td:not(:first-child), .tabel th:not(:first-child) { text-align: right; white-space: nowrap; }
.tabel .sub td:first-child { padding-left: 18px; color: var(--mut); }
.nota-legala { margin-top: 16px; padding: 14px 16px; background: var(--placa); border-radius: 10px; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.atentionari li { display: flex; gap: 10px; margin: 8px 0; }
.atentionari .ico { flex: none; width: 18px; height: 18px; color: var(--miere); margin-top: 4px; }
.bara-mobil { display: none; }
/* ----- 21. Finalizarea comenzii ----- */
.antet-simplu .antet-rand { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "sigla titlu sigur"; min-height: 76px; }
.antet-simplu .titlu-pas { grid-area: titlu; font: 500 22px/1.1 var(--fraunces); color: var(--cerneala); text-align: center; }
.antet-simplu .sigur { grid-area: sigur; display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--manrope); color: var(--mut); }
.antet-simplu .sigur .ico { width: 18px; height: 18px; color: var(--verde); }
.pasi { display: flex; gap: 10px; justify-content: center; padding: 20px 0 0; font: 600 13px var(--manrope); color: var(--mut); }
.pasi li + li::before { content: "›"; margin-right: 10px; opacity: .6; }
.pasi .activ { color: var(--verde); }
.finalizare { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; padding: 20px 0 0; align-items: start; }
.pas { background: #fff; border: 1px solid var(--linie); border-radius: 16px; padding: 28px 28px 30px; margin-bottom: 20px; }
.pas-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.pas h2 { font: 500 22px/1.2 var(--fraunces); display: flex; align-items: center; gap: 12px; }
.pas h2 .nr { width: 28px; height: 28px; border-radius: 50%; background: var(--verde-pal); color: var(--verde); display: inline-grid; place-items: center; font: 700 13px var(--manrope); flex: none; }
.pas-cap .link { font-size: 13.5px; }
.campuri { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.camp { display: grid; gap: 6px; align-content: start; }
.camp.lat { grid-column: 1 / -1; }
.camp label { font: 600 13px/1.2 var(--manrope); color: var(--cerneala); }
.camp label small { color: var(--mut); font-weight: 500; }
.camp input, .camp select, .camp textarea { height: 46px; border: 1px solid var(--linie); border-radius: 8px; padding: 0 14px; font: 500 15px var(--manrope); color: var(--cerneala); background: #fff; width: 100%; -webkit-appearance: none; appearance: none; }
.camp select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.camp textarea { height: auto; min-height: 88px; padding: 12px 14px; resize: vertical; }
.camp input:focus, .camp select:focus, .camp textarea:focus { border-color: var(--verde); outline: 0; box-shadow: 0 0 0 3px var(--verde-pal); }
.camp input::placeholder, .camp textarea::placeholder { color: var(--mut); opacity: 1; }
.camp .valid { border-color: var(--verde); }
.camp .eroare { border-color: var(--rosu); }
.camp .mesaj-eroare { color: var(--rosu); font: 500 12.5px/1.3 var(--manrope); }
.camp .ajutor { color: var(--mut); font: 500 12.5px/1.4 var(--manrope); }
.optiuni { display: grid; gap: 10px; }
.optiune { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--linie); border-radius: 12px; cursor: pointer; }
.optiune.aleasa { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde) inset; }
.optiune input { width: 20px; height: 20px; accent-color: var(--verde); margin: 0; }
.optiune b { display: block; font: 600 15px/1.3 var(--manrope); color: var(--cerneala); }
.optiune span { display: block; font: 500 13px/1.4 var(--manrope); color: var(--mut); margin-top: 2px; }
.optiune .suma { font: 700 15px var(--manrope); color: var(--cerneala); font-variant-numeric: tabular-nums; white-space: nowrap; }
.optiune .suma.gratuit { color: var(--verde); }
.optiune .sigle { display: flex; gap: 6px; }
.optiune .sigle i { font: 700 10.5px/1 var(--manrope); color: var(--mut); border: 1px solid var(--linie); border-radius: 4px; padding: 4px 6px; font-style: normal; letter-spacing: .03em; }
.bifa { display: flex; gap: 12px; align-items: flex-start; font: 500 14px/1.5 var(--manrope); color: var(--text); cursor: pointer; }
.bifa input { width: 18px; height: 18px; accent-color: var(--verde); margin: 3px 0 0; flex: none; }
.bifa a { color: var(--verde); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--verde-linie); }
.separator { height: 1px; background: var(--linie); margin: 22px 0; }
.notificare-ue .ph { aspect-ratio: auto; min-height: 150px; border-radius: 10px; }
.notificare-ue .ph::before { inset: 10px; }
.notificare-ue > p { margin-top: 10px; font: 500 12.5px/1.5 var(--manrope); color: var(--mut); }
.plaseaza { margin-top: 24px; }
.plaseaza .btn { width: 100%; min-height: 58px; font-size: 16px; }
.plaseaza p { margin-top: 12px; font: 500 12.5px/1.55 var(--manrope); color: var(--mut); text-align: center; }
.rezumat-pliabil > summary { display: none; }
.rezumat { position: sticky; top: 100px; border: 1px solid var(--linie); border-radius: 16px; padding: 24px; background: #fff; }
.rezumat h2 { font: 500 22px/1.2 var(--fraunces); margin-bottom: 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rezumat h2 span { font: 500 13px var(--manrope); color: var(--mut); white-space: nowrap; }
.linie-produs { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.linie-produs .mini { width: 64px; height: 64px; background: var(--placa); border-radius: 8px; padding: 6px; position: relative; }
.linie-produs .mini img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.linie-produs .mini i { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--cerneala); color: #fff; font: 700 11px/20px var(--manrope); text-align: center; padding: 0 6px; font-style: normal; }
.linie-produs b { display: block; font: 600 14px/1.35 var(--manrope); color: var(--cerneala); }
.linie-produs span { display: block; font: 500 12.5px/1.3 var(--manrope); color: var(--mut); margin-top: 2px; }
.linie-produs .suma { font: 700 14.5px var(--manrope); color: var(--cerneala); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cod-reducere { padding: 14px 0; border-bottom: 1px solid var(--linie); }
.totaluri { padding: 14px 0 0; display: grid; gap: 9px; font: 500 14px var(--manrope); color: var(--text); font-variant-numeric: tabular-nums; }
.totaluri div { display: flex; justify-content: space-between; gap: 12px; }
.totaluri .total { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--cerneala); font: 800 18px/1.2 var(--manrope); color: var(--cerneala); align-items: baseline; }
.totaluri .total small { display: block; font: 500 12px/1.3 var(--manrope); color: var(--mut); text-align: right; margin-top: 4px; }
.rezumat .ajutor { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linie); font: 500 13px/1.55 var(--manrope); color: var(--mut); display: grid; gap: 8px; }
.rezumat .ajutor li { display: flex; gap: 10px; align-items: flex-start; }
.rezumat .ajutor .ico { width: 16px; height: 16px; color: var(--verde); margin-top: 2px; }
.subsol-simplu { margin-top: 72px; border-top: 1px solid var(--linie); padding: 22px 0 28px; font: 500 13px/1.5 var(--manrope); color: var(--mut); }
.subsol-simplu .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.subsol-simplu ul { display: flex; gap: 18px; flex-wrap: wrap; }
.subsol-simplu a:hover { color: var(--verde); }
.subsol-simplu img { height: 34px; width: auto; }
/* ----- 22. Responsiv ----- */
@media (max-width: 1180px) {
.grila { grid-template-columns: repeat(3, 1fr); }
.nevoi { grid-template-columns: repeat(4, 1fr); }
.raioane { grid-template-columns: repeat(3, 1fr); }
.marci { grid-template-columns: repeat(4, 1fr); }
.mega .wrap { grid-template-columns: 1.15fr 1fr 1fr; }
.mega .mega-placa { display: none; }
.catalog { grid-template-columns: 228px minmax(0, 1fr); gap: 32px; }
.grila.trei { grid-template-columns: repeat(2, 1fr); }
.finalizare { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; }
}
@media (max-width: 900px) {
.wrap { padding: 0 16px; }
.bara-sus { font-size: 12.5px; }
.bara-sus .dreapta, .bara-sus .stanga span:nth-child(n+2) { display: none; }
.bara-sus .wrap { justify-content: center; min-height: 34px; }
.antet { position: static; }
.antet-rand { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "meniu sigla actiuni" "cauta cauta cauta"; gap: 0 12px; min-height: 0; padding: 10px 16px 12px; }
.meniu-buton { display: inline-flex; }
.sigla { justify-self: center; }
.sigla img { width: 152px; }
.cauta { margin: 12px 0 0; max-width: none; }
.cauta input { height: 44px; border-radius: 10px; }
.antet-actiuni { gap: 0; margin-right: -10px; }
.actiune { padding: 10px; }
.actiune .text { display: none; }
.cos-nr { left: 24px; top: 4px; }
.nav { display: none; }
.erou { padding: 28px 0 0; }
.erou .wrap { grid-template-columns: 1fr; gap: 28px; }
.erou h1 { margin: 14px 0 14px; }
.erou .text > p { font-size: 16.5px; }
.erou .actiuni .btn { flex: 1; }
.erou .bife { gap: 10px 18px; margin-top: 24px; }
.incredere { margin-top: 32px; }
.incredere .wrap { grid-template-columns: 1fr 1fr; padding: 0 16px; }
.incredere li { padding: 16px 0; }
.incredere li + li { border-left: 0; padding-left: 0; }
.incredere li:nth-child(even) { border-left: 1px solid var(--linie); padding-left: 16px; }
.incredere li:nth-child(n+3) { border-top: 1px solid var(--linie); }
.sectiune { padding: 44px 0 0; }
.sectiune-cap { margin-bottom: 18px; flex-direction: column; align-items: flex-start; gap: 10px; }
.sectiune-cap .link { margin-bottom: 0; white-space: normal; }
.nevoi { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 10px; gap: 10px; scrollbar-width: none; }
.nevoi::-webkit-scrollbar { display: none; }
.nevoie { min-width: 152px; scroll-snap-align: start; padding: 14px 14px 14px; gap: 12px; }
.raioane { grid-template-columns: 1fr 1fr; gap: 12px; }
.raion { padding: 14px 14px 0; aspect-ratio: 1 / 1.05; }
.raion b { font-size: 18px; }
.grila, .grila.trei { grid-template-columns: 1fr 1fr; gap: 12px; }
.card { border-radius: 12px; }
.card-corp { padding: 12px 12px 12px; gap: 4px; }
.nume { font-size: 14px; }
.beneficiu { display: none; }
.pret b { font-size: 17px; }
.pret-rand { flex-wrap: wrap; gap: 6px; }
.btn-cos { min-height: 38px; font-size: 13px; padding: 6px 10px; }
.insigna { top: 8px; left: 8px; padding: 4px 7px; font-size: 11px; }
.campanii { grid-template-columns: 1fr; gap: 12px; }
.campanie { grid-template-columns: 1fr; }
.campanie .text { padding: 24px 20px; gap: 10px; }
.campanie h3 { font-size: 24px; }
.campanie .ph { min-height: 190px; }
.marci { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.marca-slot { height: 60px; font-size: 14px; }
.magazin { grid-template-columns: 1fr; padding: 20px; gap: 24px; border-radius: 16px; margin-top: 44px; }
.magazin dl { grid-template-columns: 1fr; gap: 4px; }
.magazin dt { margin-top: 8px; }
.subsol { margin-top: 56px; }
.subsol .wrap { padding-top: 40px; }
.subsol-grila { grid-template-columns: 1fr 1fr; gap: 28px; padding-bottom: 28px; }
.subsol-grila > div:first-child { grid-column: 1 / -1; }
.subsol-grila > div:last-child { grid-column: 1 / -1; }
.subsol-jos { flex-direction: column; align-items: flex-start; gap: 16px; }
.cap-categorie h1 { font-size: 30px; }
.cap-categorie > p { font-size: 14.5px; }
.chipuri { flex-wrap: nowrap; overflow-x: auto; margin: 18px -16px 0; padding: 2px 16px 8px; scrollbar-width: none; }
.chipuri::-webkit-scrollbar { display: none; }
.chip { flex: none; }
.catalog { grid-template-columns: 1fr; gap: 0; padding-top: 18px; }
.filtre { display: none; }
.btn-filtre { display: inline-flex; }
.bara-unelte { margin-bottom: 14px; }
.bara-unelte .select span, .bara-unelte .rezultate .detaliu { display: none; }
.pdp { grid-template-columns: 1fr; gap: 24px; padding-top: 14px; }
.galerie { grid-template-columns: 1fr; position: static; gap: 10px; }
.galerie .mare { aspect-ratio: 1 / 1; border-radius: 14px; }
.galerie .mici { flex-direction: row; order: 2; }
.galerie .mici a, .galerie .mici .ph { width: 64px; flex: none; }
.fisa h1 { font-size: 28px; }
.pret-mare { margin-top: 18px; }
.pret-mare b { font-size: 30px; }
.cumpara { margin-top: 18px; }
.fapte { grid-template-columns: 1fr 1fr; }
.fisa-farmacist { grid-template-columns: 1fr; gap: 0; margin-top: 44px; }
.ancore { display: none; }
.acordeon summary { font-size: 19px; padding: 18px 0; }
.acordeon .continut { font-size: 15px; padding-bottom: 22px; }
body.pdp-pagina { padding-bottom: 84px; }
.bara-mobil { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1px solid var(--linie); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); gap: 14px; align-items: center; box-shadow: 0 -10px 28px -18px rgba(23, 32, 26, .3); }
.bara-mobil .pret { flex-direction: column; gap: 2px; align-items: flex-start; flex: none; }
.bara-mobil .pret b { font-size: 19px; }
.bara-mobil .pret s { font-size: 12px; }
.bara-mobil .btn { flex: 1; min-height: 48px; }
.antet-simplu .antet-rand { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "sigla titlu sigur"; padding: 10px 16px; }
.antet-simplu .sigla { justify-self: start; }
.antet-simplu .sigla img { width: 128px; }
.antet-simplu .titlu-pas { font-size: 17px; }
.antet-simplu .sigur span { display: none; }
.pasi { display: none; }
.finalizare { grid-template-columns: 1fr; gap: 16px; padding-top: 14px; }
.coloana-rezumat { order: -1; }
.rezumat-pliabil > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--linie); border-radius: 12px; background: var(--placa); font: 600 14px/1.3 var(--manrope); color: var(--cerneala); cursor: pointer; list-style: none; }
.rezumat-pliabil > summary::-webkit-details-marker { display: none; }
.rezumat-pliabil > summary b { font: 800 16px var(--manrope); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rezumat-pliabil > summary > span:last-child { flex: none; }
.rezumat-pliabil > summary .ico { width: 18px; height: 18px; color: var(--mut); }
.rezumat-pliabil[open] > summary { border-radius: 12px 12px 0 0; }
.rezumat-pliabil[open] > summary .ico { transform: rotate(180deg); }
.rezumat { position: static; border-radius: 0 0 12px 12px; border-top: 0; padding: 16px; }
.rezumat-pliabil[open] .rezumat { margin-top: 0; }
.rezumat h2 { display: none; }
.pas { padding: 20px 16px 22px; border-radius: 12px; margin-bottom: 12px; }
.pas h2 { font-size: 20px; }
.campuri { grid-template-columns: 1fr; gap: 12px; }
.campuri .camp.jumatate { grid-column: auto; }
.campuri.doua-pe-rand { grid-template-columns: 1fr 1fr; }
.optiune { padding: 14px; gap: 10px 12px; }
.optiune .sigle { grid-column: 2 / -1; grid-row: 2; justify-self: start; }
.optiune:has(.sigle) input { grid-row: 1 / span 2; }
.plaseaza .btn { min-height: 54px; font-size: 15px; white-space: normal; line-height: 1.2; padding: 10px 16px; }
.subsol-simplu { margin-top: 44px; }
.subsol-simplu .wrap { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
.erou .bife { flex-direction: column; gap: 8px; }
.fapte { grid-template-columns: 1fr; }
.marci { grid-template-columns: repeat(2, 1fr); }
}
/* ----- 23. WordPress: clasele standard ----- */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { position: static !important; width: auto; height: auto; margin: 0; clip: auto; white-space: normal; }
.skip-link:focus { position: fixed !important; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; background: var(--verde); color: #fff; padding: 10px 14px; border-radius: 8px; font: 600 14px/1 var(--manrope); }
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin: 0 auto 16px; }
.alignwide, .alignfull { max-width: none; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .gallery-caption { font: 500 13px/1.45 var(--manrope); color: var(--mut); margin-top: 8px; }
.sticky { position: static; }
.bypostauthor { font-weight: inherit; }
.btn:disabled, .btn.disabled, .woocommerce .button:disabled, .woocommerce .button.disabled { opacity: .5; cursor: not-allowed; }
.btn.loading, .woocommerce .button.loading { opacity: .6; }
.pagina-cadru { min-height: 100vh; display: flex; flex-direction: column; }
.pagina-cadru > main { flex: 1; }
/* ----- 24. Pagini de conținut (page.php, index.php, 404.php) ----- */
.pagina { padding: 22px 0 0; }
.pagina .titlu { font: 500 clamp(30px, 3.2vw, 40px)/1.1 var(--fraunces); margin-bottom: 22px; }
.continut { max-width: 72ch; font-size: 15.5px; line-height: 1.65; color: var(--text); }
.continut > * + * { margin-top: 14px; }
.continut h2 { font-size: 26px; line-height: 1.2; margin-top: 36px; }
.continut h3 { font-size: 21px; line-height: 1.25; margin-top: 28px; }
.continut h4 { font-size: 17px; line-height: 1.3; margin-top: 22px; }
.continut a { color: var(--verde); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--verde-linie); }
.continut a:hover { text-decoration-color: var(--verde); }
.continut ul { list-style: disc; padding-left: 20px; }
.continut ol { list-style: decimal; padding-left: 20px; }
.continut li + li { margin-top: 6px; }
.continut table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.continut th { text-align: left; font: 700 12px/1 var(--manrope); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); padding: 0 0 10px; border-bottom: 1px solid var(--cerneala); }
.continut td { padding: 10px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.continut blockquote { margin: 0; padding: 14px 18px; border-left: 2px solid var(--verde); background: var(--placa); border-radius: 0 10px 10px 0; }
.continut img { border-radius: 12px; }
.continut figure { margin: 0; }
.continut hr { border: 0; border-top: 1px solid var(--linie); margin: 28px 0; }
.pagina-wc .wrap { padding-top: 22px; }
.jurnal .grila { margin-top: 26px; }
.jurnal .card-img { aspect-ratio: 16 / 9; padding: 0; }
.jurnal .card-img img { object-fit: cover; mix-blend-mode: normal; }
.paginare .nav-links { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; }
.paginare .current { background: var(--verde); color: #fff; border-color: var(--verde); }
.eroare404 { padding: 80px 0 40px; text-align: center; }
.eroare404 h1 { font: 500 clamp(30px, 3.5vw, 44px)/1.1 var(--fraunces); margin-bottom: 14px; }
.eroare404 p { color: var(--mut); max-width: 50ch; margin: 0 auto; font-size: 16px; }
.eroare404 .actiuni { display: flex; gap: 16px; justify-content: center; align-items: center; margin-top: 28px; flex-wrap: wrap; }
.gol { font: 500 20px/1.4 var(--fraunces); color: var(--mut); }
/* ----- 25. Mesaje WooCommerce (notificări) ----- */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: 0 0 20px; padding: 14px 18px; border-radius: 10px; font: 500 14px/1.5 var(--manrope); color: var(--text); background: var(--placa); border: 1px solid var(--linie); }
.woocommerce-message { background: var(--verde-pal); border-color: var(--verde-linie); }
.woocommerce-error { background: #FBEDEC; border-color: #EBC7C4; color: var(--rosu); }
.woocommerce-message li + li, .woocommerce-info li + li, .woocommerce-error li + li { margin-top: 6px; }
.woocommerce-message .button, .woocommerce-info .button { float: right; margin-left: 12px; min-height: 36px; padding: 0 14px; font-size: 13px; }
.woocommerce-message a:not(.button), .woocommerce-info a:not(.button) { color: var(--verde); text-decoration: underline; text-underline-offset: 3px; }
/* ----- 26. Formulare WooCommerce (echivalentul .camp din machetă) ----- */
.woocommerce form .form-row { display: grid; gap: 6px; align-content: start; margin: 0; padding: 0; }
.woocommerce form .form-row label { font: 600 13px/1.2 var(--manrope); color: var(--cerneala); }
.woocommerce form .form-row label .optional { color: var(--mut); font-weight: 500; }
.woocommerce form .form-row .required { color: var(--rosu); text-decoration: none; }
.woocommerce form .form-row .input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea, .select2-container--default .select2-selection--single { height: 46px; border: 1px solid var(--linie); border-radius: 8px; padding: 0 14px; font: 500 15px var(--manrope); color: var(--cerneala); background: #fff; width: 100%; -webkit-appearance: none; appearance: none; }
.woocommerce form .form-row select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.woocommerce form .form-row textarea { height: auto; min-height: 88px; padding: 12px 14px; resize: vertical; }
.woocommerce form .form-row .input-text:focus, .woocommerce form .form-row select:focus, .woocommerce form .form-row textarea:focus { border-color: var(--verde); outline: 0; box-shadow: 0 0 0 3px var(--verde-pal); }
.woocommerce form .form-row .input-text::placeholder, .woocommerce form .form-row textarea::placeholder { color: var(--mut); opacity: 1; }
.woocommerce form .form-row.woocommerce-invalid .input-text, .woocommerce form .form-row.woocommerce-invalid select { border-color: var(--rosu); }
.woocommerce form .form-row.woocommerce-validated .input-text { border-color: var(--verde); }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; float: none; }
.woocommerce form .form-row .woocommerce-input-wrapper { display: block; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px; padding-left: 0; color: var(--cerneala); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; }
/* ----- 27. Suprapuneri: scheletul meniului mobil (#meniu-mobil) și al sertarului coșului (#cos-sertar) ----- */
body.albinuta-blocat-derulare { overflow: hidden; }
.suprapunere { position: fixed; inset: 0; z-index: 90; }
.suprapunere[hidden] { display: none; }
.suprapunere-fundal { position: absolute; inset: 0; background: rgba(23, 32, 26, .45); }
.suprapunere-panou { position: absolute; top: 0; bottom: 0; width: min(400px, 90vw); background: #fff; overflow: auto; display: flex; flex-direction: column; box-shadow: 0 0 60px -20px rgba(23, 32, 26, .4); }
.meniu-mobil .suprapunere-panou { left: 0; }
.cos-sertar .suprapunere-panou { right: 0; }
.suprapunere-cap { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 64px; padding: 0 20px; border-bottom: 1px solid var(--linie); }
.suprapunere-cap b { font: 500 20px/1.2 var(--fraunces); color: var(--cerneala); }
.suprapunere-inchide { width: 44px; height: 44px; border: 0; background: none; color: var(--cerneala); display: inline-flex; align-items: center; justify-content: center; margin-right: -12px; border-radius: 10px; }
.suprapunere-inchide:hover { background: var(--placa); }
.suprapunere-inchide .ico { width: 22px; height: 22px; }
.suprapunere-corp { padding: 20px; flex: 1; }
/* ----- 28. Pagina de blocare a licenței (template-parts/blocat.php) ----- */
.blocat { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 40px 24px; }
.blocat .sigla img { width: 196px; margin: 0 auto 28px; }
.blocat h1 { font: 500 clamp(26px, 3vw, 36px)/1.15 var(--fraunces); margin-bottom: 12px; }
.blocat p { color: var(--mut); }
/* ----- 29. Pachetul 4: notificarea UE reală, fereastra ei, formularul de retragere, pagina garanției, bannerul de consimțământ ----- */
/* Notificarea UE la finalizare (.notificare-ue din machetă, cu grafica reală în locul plăcii punctate). */
.notificare-ue { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--linie); border-radius: 12px; background: var(--placa); }
.notificare-ue > .notificare-ue-img { display: block; line-height: 0; border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; background: #fff; }
.notificare-ue > .notificare-ue-img img, .notificare-ue > img { display: block; width: 100%; height: auto; }
.notificare-ue > .ph { grid-column: 1 / -1; }
.notificare-ue > p { margin-top: 0; }
.notificare-ue > p a { color: var(--verde); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--verde-linie); }
.notificare-ue > p a:hover { text-decoration-color: var(--verde); }
.notificare-ue:has(> .ph) { display: block; padding: 0; border: 0; background: none; }
.notificare-ue:has(> .ph) > p { margin-top: 10px; }
/* Fereastra cu notificarea la mărime completă (dialog nativ). */
.gl-dialog { width: min(760px, 96vw); max-height: 94vh; padding: 0; border: 0; border-radius: 14px; box-shadow: 0 30px 80px -30px rgba(23, 32, 26, .5); overflow: auto; color: var(--text); }
.gl-dialog::backdrop { background: rgba(23, 32, 26, .55); }
.gl-dialog-bara { position: sticky; top: 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--linie); z-index: 1; }
.gl-dialog-bara strong { flex: 1; font: 500 17px/1.2 var(--fraunces); color: var(--cerneala); }
.gl-dialog-bara a { font: 600 13px var(--manrope); color: var(--verde); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.gl-dialog-inchide { flex: none; width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: 8px; background: var(--placa); color: var(--cerneala); font-size: 22px; line-height: 1; cursor: pointer; }
.gl-dialog-inchide:hover { background: var(--placa-2); }
.gl-dialog img { display: block; width: 100%; height: auto; }
.gl-dialog-ue { margin: 0; padding: 10px 14px 14px; font: 500 13px/1.5 var(--manrope); text-align: center; color: var(--mut); }
.gl-dialog-ue a { color: var(--verde); text-decoration: underline; text-underline-offset: 3px; }
/* Pagina „Garanția legală de conformitate”: notificarea întreagă, pe placă. */
.garantie-notificare { margin: 0; padding: 20px; border: 1px solid var(--linie); border-radius: 14px; background: var(--placa); }
.garantie-notificare a { display: block; line-height: 0; }
.garantie-notificare img { display: block; width: 100%; max-width: 620px; height: auto; margin: 0 auto; border: 1px solid var(--linie); border-radius: 6px; background: #fff; }
.garantie-notificare figcaption { margin-top: 14px; font: 500 13px/1.5 var(--manrope); color: var(--mut); text-align: center; }
/* Formularul de retragere (/retragere/): cardul, declarația, mesajele și dovada. */
.retragere-card { margin: 22px 0 28px; padding: 28px; border: 1px solid var(--linie); border-radius: 16px; background: #fff; }
.retragere .campuri { grid-template-columns: 1fr; }
.retragere .camp label small { color: var(--mut); font-weight: 500; }
.retragere-declaratie { margin: 20px 0; padding: 14px 18px; border-left: 2px solid var(--verde); background: var(--placa); border-radius: 0 10px 10px 0; font-size: 14.5px; }
.retragere .btn { margin-top: 4px; }
.retragere-mesaj { margin: 0 0 20px; padding: 14px 18px; border-radius: 10px; background: var(--placa); border-left: 2px solid var(--mut); font-size: 14.5px; }
.retragere-mesaj.eroare { background: #FBEDEC; border-left-color: var(--rosu); color: #5C1712; }
.retragere-dovada { margin: 10px 0 30px; padding: 28px; border: 1px solid var(--verde-linie); border-radius: 16px; background: var(--verde-pal); color: var(--cerneala); }
.retragere-dovada h2 { margin-top: 0; }
.retragere-dovada dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 16px 0; }
.retragere-dovada dt { font: 600 13px/1.5 var(--manrope); color: var(--mut); }
.retragere-dovada dd { margin: 0; overflow-wrap: anywhere; }
.retragere-mic { font-size: 13.5px; color: var(--mut); }
/* Pagina Contact: datele de completat de client. */
.de-completat { font-style: italic; color: var(--mut); }
/* Bannerul de consimțământ (asiimov-cookie-consent) pe tokenii machetei. */
:root { --acc-accent: var(--verde); --acc-accent-contrast: #fff; --acc-bg: #fff; --acc-surface-2: var(--placa); --acc-text: var(--cerneala); --acc-muted: var(--mut); --acc-border: var(--linie); --acc-btn-secondary-bg: var(--verde-pal); --acc-btn-secondary-bg-hover: var(--verde-linie); --acc-switch-off: var(--linie); --acc-overlay: rgba(23, 32, 26, .45); --acc-radius: 14px; --acc-font: var(--manrope); }
.acc-banner, .acc-modal, .acc-reopen { font-family: var(--manrope); }
.acc-banner__title, .acc-modal__title { font: 500 20px/1.2 var(--fraunces); color: var(--cerneala); }
.acc-credit { display: none; }
@media (max-width: 600px) {
.notificare-ue { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px; }
.retragere-card, .retragere-dovada { padding: 20px 16px; }
.retragere .btn { width: 100%; }
.retragere-dovada dl { grid-template-columns: 1fr; gap: 2px 0; }
.retragere-dovada dt { margin-top: 10px; }
.gl-dialog { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
.gl-dialog-bara a { display: none; }
}
/* ----- 30. Pachetul 1: antet, meniul mobil, sertarul coșului, prima pagină cu fotografii reale, subsol ----- */
/* Notificările WooCommerce pe prima pagină (front-page.php) — n-au alt loc unde să apară. */
.notificari-acasa { padding-top: 20px; }
.notificari-acasa .woocommerce-message, .notificari-acasa .woocommerce-info, .notificari-acasa .woocommerce-error { margin-bottom: 0; }
/* Antet: butonul coșului e și declanșatorul sertarului; starea deschisă arată ca hover. */
.actiune[aria-expanded="true"] { background: var(--placa); }
/* Mega-meniul: placa stă mereu în ultima coloană, chiar dacă meniul are mai puțin de trei grupuri. */
.mega .mega-placa { grid-column: -2 / -1; }
.mega h4 + ul + h4 { margin-top: 22px; }
.mega .toate { display: inline-block; }
/* Cardul provizoriu fără fotografie: pictograma centrată pe placă. */
.card-img > .ico { position: absolute; inset: 0; margin: auto; width: 32px; height: 32px; color: var(--mut); }
/* Erou cu fotografia reală din Personalizare (același contur ca locul rezervat). */
.erou .foto { display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--placa); }
.erou .foto img { width: 100%; height: 100%; object-fit: cover; }
/* Plăcile de campanie și magazinul cu fotografia reală. */
.campanie > img { width: 100%; height: 100%; min-height: 268px; object-fit: cover; }
.magazin > img.foto { width: 100%; border-radius: 14px; aspect-ratio: 4 / 3; object-fit: cover; }
/* Siglele de marcă încărcate (240 × 80, fundal transparent). */
.marca-slot a { display: grid; place-items: center; width: 100%; height: 100%; padding: 12px 16px; color: inherit; }
.marca-slot img { max-height: 40px; width: auto; object-fit: contain; }
/* Subsol: rețelele sociale, abonarea cu mesaj de stare și capcană, ANPC ca legătură. */
.subsol .retele { display: flex; gap: 10px; margin-top: 18px; }
.subsol .retele a { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; color: #fff; }
.subsol .retele a:hover { background: rgba(255, 255, 255, .1); text-decoration: none; }
.subsol .retele .ico { width: 18px; height: 18px; }
.subsol .abonare { flex-wrap: wrap; position: relative; }
.subsol .abonare .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.subsol .abonare .mesaj { flex-basis: 100%; margin: 0; font: 500 13px/1.4 var(--manrope); color: #fff; }
.subsol .abonare .mesaj:empty { display: none; }
.subsol .abonare .mesaj.eroare { color: #F3C9C5; }
.subsol .abonare .btn.loading { opacity: .6; pointer-events: none; }
.subsol .mic { font-size: 12.5px; opacity: .8; margin-top: 10px; }
.subsol .mic a { text-decoration: underline; text-underline-offset: 3px; }
.subsol-jos a.anpc { display: inline-block; height: 40px; line-height: 0; border-radius: 4px; }
.subsol-jos a.anpc img { height: 40px; width: auto; border-radius: 4px; }
.subsol-simplu a.anpc { display: inline-block; line-height: 0; }
/* Meniul mobil (#meniu-mobil): lista principală pe două niveluri cu , apoi cont/coș/telefon și promisiunile. */
.meniu-mobil-lista > li { border-bottom: 1px solid var(--linie); }
.meniu-mobil-lista > li > a, .meniu-mobil-lista summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 0 2px; font: 600 15px/1.3 var(--manrope); color: var(--cerneala); cursor: pointer; list-style: none; }
.meniu-mobil-lista summary::-webkit-details-marker { display: none; }
.meniu-mobil-lista summary .ico { width: 20px; height: 20px; color: var(--mut); transition: transform .2s; }
.meniu-mobil-lista details[open] > summary { color: var(--verde); }
.meniu-mobil-lista details[open] > summary .ico { transform: rotate(180deg); color: var(--verde); }
.meniu-mobil-lista > li.activ > a { color: var(--verde); }
.meniu-mobil-lista > li.promo > a { justify-content: flex-start; gap: 8px; }
.meniu-mobil-lista > li.promo > a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--miere); }
.meniu-mobil-lista .sub { padding: 0 0 14px; }
.meniu-mobil-lista .sub h4 { font: 700 11.5px/1 var(--manrope); letter-spacing: .09em; text-transform: uppercase; color: var(--mut); margin: 14px 0 6px; }
.meniu-mobil-lista .sub li a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0 8px 12px; font: 500 14.5px/1.3 var(--manrope); color: var(--text); }
.meniu-mobil-lista .sub li a:hover { color: var(--verde); }
.meniu-mobil-lista .sub li a span { color: var(--mut); font-size: 13px; font-variant-numeric: tabular-nums; }
.meniu-mobil-lista .sub li a.toate, .meniu-mobil-lista .sub li a[aria-current] { color: var(--verde); font-weight: 600; }
.meniu-mobil-secundar { display: grid; gap: 2px; margin-top: 16px; }
.meniu-mobil-secundar a { display: flex; align-items: center; gap: 12px; min-height: 46px; font: 600 14px/1.3 var(--manrope); color: var(--cerneala); }
.meniu-mobil-secundar .ico { width: 20px; height: 20px; color: var(--verde); }
.meniu-mobil-promisiuni { margin-top: 18px; padding: 14px 16px; background: var(--placa); border-radius: 12px; display: grid; gap: 8px; }
.meniu-mobil-promisiuni li { display: flex; gap: 8px; align-items: flex-start; font: 500 13px/1.4 var(--manrope); color: var(--text); }
.meniu-mobil-promisiuni .ico { width: 16px; height: 16px; color: var(--verde); margin-top: 2px; }
/* Sertarul coșului (#cos-sertar): liniile refolosesc .linie-produs din rezumatul finalizării. */
.cos-sertar .suprapunere-corp { display: flex; flex-direction: column; padding: 0 20px 20px; }
.cos-sertar-continut { display: flex; flex-direction: column; flex: 1; }
.sertar-lista { flex: 1; }
.sertar-lista .linie-produs:first-child { padding-top: 8px; }
.linie-produs .scoate { display: inline-block; margin-top: 4px; font: 600 12.5px/1 var(--manrope); color: var(--mut); text-decoration: underline; text-underline-offset: 3px; }
.linie-produs .scoate:hover { color: var(--rosu); }
.linie-produs b a:hover { color: var(--verde); }
.livrare-bara { margin-top: 16px; font: 500 13px/1.4 var(--manrope); color: var(--text); }
.livrare-bara i { display: block; height: 4px; margin-top: 8px; border-radius: 2px; background: var(--linie); position: relative; overflow: hidden; }
.livrare-bara i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--progres, 0%); background: var(--verde); border-radius: 2px; }
.cos-sertar .totaluri { padding-top: 16px; }
.cos-sertar .totaluri .total { margin-top: 0; }
.sertar-actiuni { display: grid; gap: 10px; margin-top: 18px; }
.sertar-gol { display: grid; gap: 18px; justify-items: start; padding: 24px 0; }
@media (max-width: 900px) {
.erou .foto { aspect-ratio: 1 / 1; }
.campanie > img { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
.suprapunere-cap { min-height: 60px; padding: 0 16px; }
.suprapunere-corp { padding: 16px; }
.cos-sertar .suprapunere-corp { padding: 0 16px 16px; }
}
/* Mega-meniul închis cu Escape rămâne închis cât timp focusul e încă pe legătura principală (albinuta.js pune .inchis). */
.nav li.are-mega.inchis:focus-within > .mega { display: none; }
.nav li.are-mega.inchis > a { border-bottom-color: transparent; color: var(--cerneala); }
/* Legătura „Vezi coșul” pe care WooCommerce o adaugă după „Adaugă în coș” (add-to-cart.js): discretă, sub buton. */
.card .added_to_cart { display: block; margin-top: 8px; text-align: center; font: 600 13px/1.2 var(--manrope); color: var(--verde); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--verde-linie); }
.card .added_to_cart:hover { text-decoration-color: var(--verde); }
/* ----- 31. Pachetul 2 (catalog, card, produs, căutare): completări peste clasele machetei ----- */
/* Catalog: cardul fără fotografie, lista goală, paginarea cu puncte, căutarea din antetul listei. */
.card-fara-img { display: grid; place-items: center; width: 100%; height: 100%; color: var(--mut); }
.card-fara-img .ico { width: 36px; height: 36px; stroke-width: 1.25; }
.btn-cos.loading { opacity: .6; pointer-events: none; }
.catalog-gol { padding: 36px 0 20px; }
.catalog-gol .actiuni { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.paginare .puncte { border: 0; min-width: 24px; padding: 0; color: var(--mut); }
.cap-categorie .cauta { margin: 20px 0 0; max-width: 620px; }
/* Sortarea: un