/* oopticshop, stratul de landing page-uri (Varilux, Eyezen). Token-driven: culorile, corpurile,
   spatiile si razele vin din tokens.css; literalele permise sunt latimile de breakpoint si de
   container, 0 si procentele. Totul sta sub .oo-lp: fisierul se incarca doar pe cele doua pagini,
   dar nu atinge nimic din tema in afara wrapper-ului. */

@font-face { font-family:"Familjen Grotesk"; src:url("fonts/FamiljenGrotesk-Variable.woff2") format("woff2"); font-weight:400 700; font-display:swap; }
@font-face { font-family:"Onest"; src:url("fonts/Onest-Variable.woff2") format("woff2"); font-weight:300 800; font-display:swap; }

/* benzile pe toata latimea ies din containerul temei; pagina nu trebuie sa se deruleze lateral */
html:has(.oo-lp) body { overflow-x:clip; }

/* fundatia, doar in wrapper: tema vine cu propriile fonturi, culori si margini pe h/p/ul */
.oo-lp { font-family:var(--type-family-body), system-ui, sans-serif; font-size:var(--type-size-corp);
  line-height:1.5; color:var(--text-on-light); -webkit-font-smoothing:antialiased;
  /* pagina e pe os, cum cere sistemul; fundalul iese din containerul temei pana la margini */
  background:var(--background-light); box-shadow:0 0 0 100vmax var(--background-light); clip-path:inset(0 -100vmax);
  padding-top:var(--space-2); }
.oo-lp *, .oo-lp *::before, .oo-lp *::after { box-sizing:border-box; }
.oo-lp :is(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin:0; padding:0; }
.oo-lp :is(ul, ol) { list-style:none; }
.oo-lp img { display:block; max-width:100%; height:auto; }
.oo-lp a { color:inherit; }
.oo-lp :is(h1, h2, h3) { font-family:var(--type-family-display), Arial, sans-serif; color:inherit;
  text-transform:none; }
.oo-lp h1 { font-weight:700; font-size:clamp(var(--type-size-h1m), 4.4vw, var(--type-size-h1)); line-height:1.05; letter-spacing:-0.02em; }
.oo-lp h2 { font-weight:700; font-size:clamp(var(--type-size-h2m), 2.8vw, var(--type-size-h2)); line-height:1.1; letter-spacing:-0.02em; }
.oo-lp h3 { font-weight:600; font-size:var(--type-size-h3); line-height:1.15; letter-spacing:-0.015em; }
.oo-lp b, .oo-lp strong { font-weight:600; }
.oo-lp :focus-visible { outline:var(--line-rule) solid var(--text-on-light); outline-offset:var(--line-rule); }
.oo-lp sup { font-size:0.6em; line-height:0; }
.oo-lp ::selection { background:var(--text-on-light); color:var(--background-light); }
.oo-lp .lp-cab :focus-visible { outline-color:var(--text-on-dark); }
.oo-lp .lp-cab ::selection { background:var(--background-light); color:var(--text-on-light); }

.lp-wrap { max-width:1280px; margin-inline:auto; }
.lp-bleed { margin-inline:calc(50% - 50vw); }
.lp-bleed > .lp-wrap { padding-inline:var(--space-4); }
.lp-sec { padding-block:var(--space-8); }
.lp-sec + .lp-sec { padding-top:0; }
.lp-head { display:grid; gap:var(--space-3); margin-bottom:var(--space-6); max-width:36em; }
.lp-head p { color:var(--text-secondary-on-light); }
.lp-eyebrow { font-weight:600; font-size:var(--type-size-micro); letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-secondary-on-light); }
.lp-prose { display:grid; gap:var(--space-3); max-width:36em; }
.lp-prose p { color:var(--text-on-light); }

/* butoane: primarul e espresso pe coral, mai mare si ridicat (feedback client: sa se vada unde se da click).
   Chenarul espresso tine conturul: coralul singur are sub 3:1 fata de alb si de os. */
.lp-actions { display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; }
.lp-btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:48px; padding:var(--space-3) var(--space-5); border-radius:var(--radius-m);
  font:600 var(--type-size-interfata)/1.2 var(--type-family-body), system-ui, sans-serif;
  text-decoration:none; cursor:pointer; border:var(--line-rule) solid transparent;
  transition:filter .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.oo-lp .lp-btn--primary, .lp-dock .lp-btn--primary { min-height:calc(var(--space-7) + var(--space-2)); padding-inline:var(--space-6);
  font-weight:700; font-size:var(--type-size-corp); background:var(--accent-primary); color:var(--text-on-light);
  border-color:var(--text-on-light); box-shadow:0 var(--space-1) 0 var(--text-on-light); }
/* sageata: arata ca butonul duce undeva */
.lp-btn--primary::after { content:""; flex:none; width:var(--space-2); height:var(--space-2);
  border-top:var(--line-rule) solid currentColor; border-right:var(--line-rule) solid currentColor;
  transform:rotate(45deg); margin-left:var(--space-1); transition:translate .15s ease; }
/* hover: placa alba, textul ramane espresso (tema Journal pune gri pe linkuri la hover; alb pe coral nu are contrast) */
.lp-btn--primary:hover { transform:translateY(calc(-1 * var(--line-rule))); box-shadow:0 calc(var(--space-1) + var(--line-rule)) 0 var(--text-on-light); }
.oo-lp .lp-btn--primary:hover, .oo-lp .lp-btn--primary:focus-visible, .lp-dock .lp-btn--primary:hover { background:var(--surface-placheta); color:var(--text-on-light); }
/* stratul magazinului face toate linkurile gri la hover (html body a:not(.btn):hover, cu !important); butoanele isi pastreaza textul */
.oo-lp a.lp-btn:hover, .lp-dock a.lp-btn:hover { color:var(--text-on-light) !important; }
.oo-lp a.lp-btn--ondark:hover { color:var(--text-on-dark) !important; }
.lp-btn--primary:hover::after { translate:var(--space-1) 0; }
.lp-btn--primary:active { transform:translateY(var(--space-1)); box-shadow:0 0 0 var(--text-on-light); }
/* pe banda espresso umbra nu se vede; o inlocuieste un inel os */
.oo-lp .lp-cab .lp-btn--primary { box-shadow:0 var(--space-1) 0 var(--text-on-dark); }
.oo-lp .lp-cab .lp-btn--primary:hover { box-shadow:0 calc(var(--space-1) + var(--line-rule)) 0 var(--text-on-dark); }
.oo-lp .lp-cab .lp-btn--primary:active { box-shadow:0 0 0 var(--text-on-dark); }
.oo-lp .lp-btn--ghost, .lp-dock .lp-btn--ghost { border-color:var(--text-on-light); color:var(--text-on-light); background:transparent; }
.oo-lp .lp-btn--ghost { min-height:calc(var(--space-7) + var(--space-2)); }
.lp-btn--ghost:hover { background:var(--surface-placheta); }
.lp-btn--ghost:active { transform:translateY(var(--line-hair)); }
.oo-lp .lp-btn--ondark { border-color:var(--text-on-dark); color:var(--text-on-dark); }
.lp-btn--ondark:hover { background:var(--surface-panou-inchis); }
.lp-btn svg { width:18px; height:18px; flex:none; }
.lp-link { display:inline-block; padding-block:var(--space-3); font-weight:600; text-decoration:underline; text-underline-offset:var(--space-1); }
/* tema coloreaza linkurile coral la hover; coralul nu e culoare de text, deci linkurile raman espresso */
.oo-lp a.lp-link:hover, .oo-lp .lp-cross a:hover, .oo-lp .lp-legal a:hover { color:var(--text-on-light) !important;
  text-decoration:underline !important; text-decoration-thickness:var(--line-rule) !important; }
.lp-link:active { color:var(--text-secondary-on-light); }

/* erou: placheta alba langa fotografie, niciodata text peste fotografie */
.lp-hero { display:grid; background:var(--surface-placheta); border:var(--line-hair) solid var(--border-default);
  border-radius:var(--radius-m); overflow:hidden; margin-top:var(--space-4); }
.lp-hero__media { position:relative; overflow:hidden; aspect-ratio:16 / 10; order:-1; background:var(--border-default); }
.lp-hero__media img { position:absolute; inset:-6% 0; width:100%; height:112%; max-width:none; object-fit:cover;
  object-position:var(--focus, 60% 30%); }
.lp-hero__copy { display:grid; gap:var(--space-4); align-content:center; padding:var(--space-6) var(--space-5); }
.lp-hero__lede { font-size:var(--type-size-corp); color:var(--text-secondary-on-light); max-width:48ch; }
.lp-hero__facts { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); font-size:var(--type-size-legenda);
  color:var(--text-secondary-on-light); }
.lp-hero__facts li { display:flex; align-items:center; gap:var(--space-2); }
.lp-hero__facts li::before { content:""; width:var(--space-2); height:var(--space-2); background:var(--text-on-light); border-radius:var(--radius-pill); }

/* campania: bulina corala cu reducerea, langa textul ofertei; sta in erou, deasupra butoanelor */
.lp-promo { display:flex; align-items:center; gap:var(--space-3); }
.lp-promo p { display:grid; gap:var(--space-1); }
.lp-promo b { font-weight:700; font-size:var(--type-size-corp); }
.lp-promo p span { font-size:var(--type-size-legenda); color:var(--text-secondary-on-light); }
.lp-disc { flex:none; display:inline-grid; place-items:center; width:var(--space-7); height:var(--space-7);
  border-radius:var(--radius-pill); background:var(--accent-primary); color:var(--text-on-light);
  font-weight:700; font-size:var(--type-size-interfata); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
/* varianta mare trece la 24px, deci Familjen */
.lp-disc--l { width:var(--space-8); height:var(--space-8); font-family:var(--type-family-display), Arial, sans-serif;
  font-size:var(--type-size-h3); letter-spacing:-0.02em; }
/* text doar pentru cititoarele de ecran */
.lp-sr { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* pretul: cel de lista taiat deasupra, cel cu reducere mare; unitatea e in nota de sub carduri */
.lp-price { display:grid; justify-items:end; text-align:right; font-variant-numeric:tabular-nums; }
.lp-price del { font-size:var(--type-size-legenda); color:var(--text-secondary-on-light); text-decoration-thickness:var(--line-hair); }
.lp-price ins { text-decoration:none; font-weight:700; font-size:var(--type-size-h3); line-height:1.1; white-space:nowrap; }
.lp-price ins small { font-size:var(--type-size-interfata); font-weight:600; }

/* Eyezen: un singur pret pentru toata gama, pe placheta, deasupra cardurilor */
.lp-pricebar { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-5); margin-bottom:var(--space-5);
  max-width:880px; background:var(--surface-placheta); border:var(--line-hair) solid var(--border-default); border-radius:var(--radius-m); }
.lp-pricebar p { display:grid; gap:var(--space-1); font-weight:600; }
.lp-pricebar .lp-price { justify-items:start; text-align:left; }
[data-oo-placeholder] { outline:var(--line-rule) dashed var(--text-secondary-on-light); outline-offset:var(--space-1); }

/* doua coloane: text + imagine */
.lp-split { display:grid; gap:var(--space-6); align-items:center; }
.lp-split__media { position:relative; overflow:hidden; border-radius:var(--radius-m); background:var(--border-default); }
.lp-split__media img { width:100%; height:100%; object-fit:cover; }
.lp-split__media figcaption { position:absolute; left:var(--space-3); bottom:var(--space-3); padding:var(--space-1) var(--space-2);
  background:var(--surface-placheta); border-radius:var(--radius-s); font-size:var(--type-size-legenda); }

/* schema zonelor de vedere: desen tehnic, nu produs desenat */
.lp-zones { display:grid; gap:var(--space-5); }
.lp-zones__fig { background:var(--surface-placheta); border:var(--line-hair) solid var(--border-default);
  border-radius:var(--radius-m); padding:var(--space-5); }
.lp-zones__fig svg { display:block; width:100%; height:auto; max-width:320px; margin-inline:auto; }
.lp-zones__fig .z-fill { fill:var(--background-light); }
.lp-zones__fig .z-lens { fill:none; stroke:var(--text-on-light); stroke-width:1.5; }
.lp-zones__fig .z-zone { fill:var(--surface-placheta); stroke:var(--text-secondary-on-light); stroke-width:1; }
.lp-zones__fig .z-3 { fill:var(--border-default); }
.lp-zones__fig text { font-family:var(--type-family-body), sans-serif; font-size:11px; font-weight:600;
  fill:var(--text-on-light); letter-spacing:0.08em; text-transform:uppercase; }
.lp-zones__list { display:grid; gap:var(--space-4); }
.lp-zones__list li { padding-bottom:var(--space-4); border-bottom:var(--line-hair) solid var(--border-default); }
.lp-zones__list b { display:block; font-weight:600; }
.lp-zones__list span { color:var(--text-secondary-on-light); font-size:var(--type-size-interfata); }

/* video: poster + buton, iframe-ul se incarca doar la click */
.lp-video { position:relative; aspect-ratio:16 / 9; border-radius:var(--radius-m); overflow:hidden; background:var(--background-dark); }
.lp-video__btn { all:unset; position:absolute; inset:0; cursor:pointer; display:grid; place-items:center; }
.lp-video__btn img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lp-video__play { position:relative; display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-3) var(--space-5); border-radius:var(--radius-pill); background:var(--surface-placheta);
  color:var(--text-on-light); font-weight:600; font-size:var(--type-size-interfata);
  transition:transform .2s ease; }
.lp-video__play::before { content:""; width:0; height:0; border-style:solid; border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent var(--text-on-light); }
.lp-video__btn:hover .lp-video__play { transform:scale(1.04); }
.lp-video__btn:active .lp-video__play { transform:scale(0.98); }
.lp-video__btn:focus-visible .lp-video__play { outline:var(--line-rule) solid var(--text-on-light); outline-offset:var(--line-rule); }
.lp-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.lp-video + figcaption, .lp-caption { margin-top:var(--space-2); font-size:var(--type-size-legenda); color:var(--text-secondary-on-light); }

/* gamele: celula densa, pretul si eticheta pe aceeasi linie de baza */
.lp-cards { display:grid; gap:var(--space-4); }
.lp-card { display:grid; grid-template-rows:auto auto 1fr auto; align-content:start; gap:var(--space-3); padding:var(--space-5);
  background:var(--surface-placheta); border:var(--line-hair) solid var(--border-default); border-radius:var(--radius-m);
  transition:border-color .15s ease; min-width:0; }
.lp-card:hover { border-color:var(--text-secondary-on-light); }
.lp-card__for { font-size:var(--type-size-legenda); color:var(--text-secondary-on-light); }
.lp-card ul { display:grid; gap:var(--space-2); font-size:var(--type-size-interfata); }
.lp-card li { display:grid; grid-template-columns:var(--space-4) 1fr; gap:var(--space-2); }
.lp-card li::before { content:""; width:var(--space-2); height:var(--line-rule); margin-top:0.6em; background:var(--text-on-light); }
.lp-card__foot { display:flex; justify-content:space-between; align-items:end; gap:var(--space-3);
  padding-top:var(--space-3); border-top:var(--line-hair) solid var(--border-default); }
.lp-card--star { border-color:var(--text-on-light); }

/* pasii: cifre mari Familjen, fileturi subtiri */
.lp-steps { display:grid; gap:0; counter-reset:step; border-top:var(--line-hair) solid var(--border-default); }
.lp-steps li { display:grid; grid-template-columns:var(--space-8) 1fr; gap:var(--space-4); padding-block:var(--space-5);
  border-bottom:var(--line-hair) solid var(--border-default); counter-increment:step; }
.lp-steps li::before { content:counter(step, decimal-leading-zero); font-family:var(--type-family-display), Arial, sans-serif;
  font-weight:700; font-size:var(--type-size-h2m); line-height:1; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.lp-steps h3 { margin-bottom:var(--space-2); }
.lp-steps p { color:var(--text-secondary-on-light); max-width:36em; }

/* lista din text (simptome): liniuta scurta, nu buline decorative */
.lp-list { display:grid; gap:var(--space-2); }
.lp-list li { display:grid; grid-template-columns:var(--space-4) 1fr; gap:var(--space-2); }
.lp-list li::before { content:""; width:var(--space-2); height:var(--line-rule); margin-top:0.7em; background:var(--text-on-light); }

/* cifrele Essilor: rand compact, cifra in Familjen la treapta H3, sursa ca nota de subsol */
.lp-facts { display:grid; gap:0; border-top:var(--line-hair) solid var(--border-default); max-width:880px; }
.lp-facts li { display:grid; grid-template-columns:6.5em 1fr; gap:var(--space-4); align-items:baseline;
  padding-block:var(--space-4); border-bottom:var(--line-hair) solid var(--border-default); }
.lp-facts b { font-family:var(--type-family-display), Arial, sans-serif; font-weight:700; font-size:var(--type-size-h3);
  line-height:1; font-variant-numeric:tabular-nums; }
.lp-facts span { color:var(--text-secondary-on-light); }
.lp-card__txt { font-size:var(--type-size-interfata); color:var(--text-on-light); }

/* notele de subsol: singura lista numerotata vizibil din pagina */
.lp-legal ol { list-style:decimal; padding-left:1.4em; display:grid; gap:var(--space-1); margin-bottom:var(--space-3); max-width:48em; }
.lp-legal sup, .oo-lp sup { font-weight:600; }

/* nota: placheta simpla, fara accent */
.lp-note { display:grid; gap:var(--space-3); padding:var(--space-5); background:var(--surface-placheta); max-inline-size:44em;
  border:var(--line-hair) solid var(--border-default); border-radius:var(--radius-m); }

/* intrebari frecvente: <details> nativ, merge si fara JS */
.lp-faq { border-top:var(--line-hair) solid var(--border-default); max-width:880px; }
.lp-faq details { border-bottom:var(--line-hair) solid var(--border-default); }
.lp-faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  gap:var(--space-4); padding-block:var(--space-4); font-weight:600; font-size:var(--type-size-corp); }
.lp-faq summary::-webkit-details-marker { display:none; }
.lp-faq summary::after { content:""; flex:none; width:10px; height:10px; border-right:var(--line-rule) solid currentColor;
  border-bottom:var(--line-rule) solid currentColor; transform:translateY(-3px) rotate(45deg); transition:transform .2s ease; }
.lp-faq details[open] summary::after { transform:translateY(2px) rotate(-135deg); }
.lp-faq summary:hover { color:var(--text-secondary-on-light); }
.lp-faq summary:active { color:var(--text-on-light); }
.lp-faq details > div { padding-bottom:var(--space-5); color:var(--text-secondary-on-light); max-width:38em; display:grid; gap:var(--space-2); }

/* banda de cabinet: singura suprafata espresso din corpul paginii */
.lp-cab { background:var(--background-dark); color:var(--text-on-dark); padding-block:var(--space-8); }
.lp-cab .lp-eyebrow { color:var(--text-secondary-on-dark); }
.lp-cab__grid { display:grid; gap:var(--space-6); }
.lp-cab__copy { display:grid; gap:var(--space-4); align-content:start; }
.lp-cab__copy p { color:var(--text-secondary-on-dark); max-width:36em; }
.lp-cab__docs { background:var(--surface-panou-inchis); border-radius:var(--radius-m); padding:var(--space-5); display:grid; gap:var(--space-3); }
.lp-cab__docs li { display:flex; justify-content:space-between; gap:var(--space-4); padding-block:var(--space-2);
  border-bottom:var(--line-hair) solid var(--text-secondary-on-dark); font-size:var(--type-size-interfata); }
.lp-cab__docs li:last-child { border-bottom:0; }
.lp-cab__docs span { color:var(--text-secondary-on-dark); font-variant-numeric:tabular-nums; text-align:right; }
.lp-cab__adr { font-size:var(--type-size-interfata); color:var(--text-secondary-on-dark); }
.lp-cab a:not(.lp-btn) { color:var(--text-on-dark); }

.lp-cross { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--space-4);
  padding:var(--space-5); margin-block:0 var(--space-7); background:var(--surface-placheta);
  border:var(--line-hair) solid var(--border-default); border-radius:var(--radius-m); }
.lp-legal { padding-block:var(--space-5) var(--space-7); font-size:var(--type-size-legenda); color:var(--text-secondary-on-light); }

/* miscare. Momentul de autor: fotografia din erou se deschide ca o cortina la incarcare (CSS pur,
   fara ascundere la prima pictare fara animatie). Pe Varilux, schema lentilei se deseneaza zona cu zona
   cand intra in ecran. Pasii apar in ordine. Restul paginii sta pe loc. */
@keyframes lp-curtain { from { clip-path:inset(0 0 0 100%); } to { clip-path:inset(0 0 0 0); } }
@keyframes lp-settle { from { scale:1.08; } to { scale:1; } }
@media (prefers-reduced-motion: no-preference) {
  .oo-lp .lp-hero__media { animation:lp-curtain 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .oo-lp .lp-hero__media img { animation:lp-settle 1.6s cubic-bezier(0.16, 1, 0.3, 1) both; }

  .oo-js .oo-lp [data-draw] .z-lens { stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
  .oo-js .oo-lp [data-draw] :is(.z-zone, .z-t) { opacity:0; transition:opacity .5s ease; }
  .oo-js .oo-lp [data-draw].is-in .z-lens { stroke-dashoffset:0; }
  .oo-js .oo-lp [data-draw].is-in :is(.z-zone, .z-t) { opacity:1; }
  .oo-js .oo-lp [data-draw].is-in :is(.z-1, .z-t1) { transition-delay:.7s; }
  .oo-js .oo-lp [data-draw].is-in :is(.z-2, .z-t2) { transition-delay:1.1s; }
  .oo-js .oo-lp [data-draw].is-in :is(.z-3, .z-t3) { transition-delay:1.5s; }

  .oo-js .oo-lp [data-reveal] { opacity:0; transform:translateY(var(--space-4));
    transition:opacity .5s cubic-bezier(0.16, 1, 0.3, 1), transform .5s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay:calc(var(--i, 0) * 90ms); }
  .oo-js .oo-lp [data-reveal].is-in { opacity:1; transform:none; }
}

/* filmul si intrebarile stau langa titlul lor, nu pe toata latimea */
.lp-videosec, .lp-sidesec { display:grid; gap:var(--space-5); }
.lp-videosec .lp-head, .lp-sidesec .lp-head { margin-bottom:0; }

/* tableta */
@media (min-width: 768px) {
  .lp-bleed > .lp-wrap { padding-inline:var(--space-6); }
  .lp-hero { grid-template-columns:1fr 1fr; }
  .lp-hero__media { aspect-ratio:auto; min-height:420px; order:2; }
  .lp-hero__copy { padding:var(--space-7) var(--space-6); }
  .lp-split { grid-template-columns:1fr 1fr; }
  .lp-split--rev .lp-split__media { order:-1; }
  .lp-zones { grid-template-columns:5fr 7fr; align-items:center; }
  .lp-cards { grid-template-columns:repeat(2, 1fr); }
  .lp-cab__grid { grid-template-columns:7fr 5fr; }
}

/* desktop */
@media (min-width: 1100px) {
  .lp-hero { grid-template-columns:5fr 7fr; }
  .lp-hero__media { min-height:540px; }
  .lp-hero__copy { padding:var(--space-8) var(--space-7); }
  .lp-cards { grid-template-columns:repeat(3, 1fr); }
  .lp-cards--2 { grid-template-columns:repeat(2, 1fr); max-width:880px; }
  .lp-cards--4 { grid-template-columns:repeat(4, 1fr); }
  .lp-steps { grid-template-columns:repeat(4, 1fr); border-top:0; gap:var(--space-5); }
  .lp-steps li { grid-template-columns:1fr; grid-template-rows:auto 1fr; border-bottom:0;
    border-top:var(--line-rule) solid var(--text-on-light); padding-top:var(--space-4); }
  .lp-steps li::before { font-size:var(--type-size-h2); }
  .lp-videosec { grid-template-columns:4fr 8fr; align-items:center; gap:var(--space-7); }
  .lp-sidesec { grid-template-columns:4fr 8fr; align-items:start; gap:var(--space-7); }
  .lp-sidesec .lp-head { position:sticky; top:var(--space-9); }
}

/* mobil: gamele devin un rand derulabil cu oprire pe celula */
@media (max-width: 767px) {
  .lp-sec { padding-block:var(--space-7); }
  .lp-cards { grid-auto-flow:column; grid-auto-columns:82%; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:var(--space-3); margin-inline:calc(-1 * var(--space-4)); padding-inline:var(--space-4);
    scroll-padding-inline:var(--space-4); scrollbar-width:thin; scrollbar-color:var(--text-secondary-on-light) transparent; }
  .lp-card { scroll-snap-align:start; }
  .lp-hero__copy .lp-actions .lp-btn { flex:1 1 100%; }
}

/* bara de programare: programarea si telefonul raman mereu pe ecran. Apare cand nu se vad butoanele din
   erou sau din banda de cabinet. Sta in body, in afara .oo-lp, pentru ca clip-path-ul wrapper-ului ar
   taia un element fix. Pe telefon e o bara pe toata latimea, deasupra meniului de jos al temei. */
.lp-dock { position:fixed; left:0; right:0; bottom:var(--lp-dock-off, 0px); z-index:99;
  display:flex; gap:var(--space-2); padding:var(--space-2) var(--space-4);
  background:var(--surface-placheta); border-top:var(--line-hair) solid var(--border-default);
  font-family:var(--type-family-body), system-ui, sans-serif; -webkit-font-smoothing:antialiased;
  transform:translateY(calc(100% + var(--lp-dock-off, 0px))); visibility:hidden;
  transition:transform .25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear .25s; }
.lp-dock *, .lp-dock *::before, .lp-dock *::after { box-sizing:border-box; }
.lp-dock.is-on { transform:none; visibility:visible; transition:transform .25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; }
.lp-dock .lp-btn--primary { flex:1 1 auto; min-height:var(--space-7); box-shadow:none; padding-inline:var(--space-4); }
.lp-dock .lp-btn--primary:hover { transform:none; box-shadow:none; }
.lp-dock .lp-btn--primary:active { transform:translateY(var(--line-hair)); }
.lp-dock .lp-btn--ghost { flex:none; width:var(--space-7); min-height:var(--space-7); padding:0; }
.lp-dock__num { display:none; }
/* bara e alba: hover-ul trece pe os, altfel nu se vede */
.lp-dock .lp-btn--ghost:hover { background:var(--background-light); }
.lp-dock :focus-visible { outline:var(--line-rule) solid var(--text-on-light); outline-offset:var(--line-rule); }
/* butonul "sus" al temei urca peste bara */
html.lp-dock-on .scroll-top { translate:0 calc(-1 * var(--lp-dock-h, 0px)); }
/* loc sub subsol, ca bara sa nu acopere ultimul rand; intra in ultimul rand, care are fundalul temei */
html.lp-dock-on footer .grid-rows > .grid-row:last-child::after { content:""; display:block; height:var(--lp-dock-h, 0px); }
/* de la tableta in sus: placheta plutitoare in coltul din dreapta jos, cu numarul scris */
@media (min-width: 768px) {
  .lp-dock { left:auto; right:var(--space-5); bottom:calc(var(--lp-dock-off, 0px) + var(--space-5));
    padding:var(--space-2); border:var(--line-hair) solid var(--border-default); border-radius:var(--radius-m);
    box-shadow:0 var(--space-1) 0 var(--text-on-light);
    transform:translateY(calc(100% + var(--space-6) + var(--lp-dock-off, 0px))); }
  .lp-dock .lp-btn--primary { padding-inline:var(--space-5); }
  .lp-dock .lp-btn--ghost { width:auto; padding-inline:var(--space-4); }
  .lp-dock__num { display:inline; }
}
@media (prefers-reduced-motion: reduce) { .lp-dock, .lp-dock.is-on { transition:none; } }

/* Black Friday (pagina 110): pagina de campanie fara antetul magazinului. Antetul temei, firimiturile si bara
   de jos de pe telefon se ascund doar aici; ramane un rand cu logo si telefon, iar subsolul temei ramane. */
html.information-110 :is(#header, header, .mobile-header, .mobile-wrapper-header, .breadcrumb, .bottom-menu, footer) { display:none !important; }
html.information-110 body { padding-top:0 !important; }
/* fara antet, pagina incepe sus: coloana temei pune 40 px deasupra continutului */
html.information-110 :is(#content, [class*="col-"], .container, .row, #information-information, .site-wrapper):has(.oo-lp--solo) { padding-top:0 !important; margin-top:0 !important; padding-bottom:0 !important; margin-bottom:0 !important; }
.oo-lp--solo { padding-top:0; }
/* banda de sus: campania pe coral (text espresso), iar in dreapta drumul inapoi in magazinul online si telefonul */
.lp-top { background:var(--accent-primary); color:var(--text-on-light); }
.lp-top__wrap { display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); padding:var(--space-2) var(--space-4); }
.lp-top__msg { font-size:var(--type-size-interfata); font-weight:600; }
.lp-top__msg b { font-weight:700; }
.lp-top__more { display:none; }
.lp-top__end { display:flex; align-items:center; gap:var(--space-4); flex:none; }
.oo-lp .lp-top__back { font-size:var(--type-size-interfata); font-weight:600; text-underline-offset:0.25em; }
.oo-lp .lp-top__back:hover { text-decoration-thickness:var(--line-rule); }
.oo-lp .lp-top__tel { display:inline-flex; align-items:center; gap:var(--space-2); min-height:var(--space-7); padding-inline:var(--space-3);
  font-weight:600; font-size:var(--type-size-interfata); font-variant-numeric:tabular-nums; text-decoration:none;
  border:var(--line-hair) solid var(--text-on-light); border-radius:var(--radius-m); background:var(--surface-placheta); }
.lp-top__tel svg { width:var(--space-4); height:var(--space-4); }
.oo-lp .lp-top__tel:hover { background:var(--background-light); }
.oo-lp .lp-top__tel:active { background:var(--border-default); }
.oo-lp .lp-top :focus-visible { outline-color:var(--text-on-light); }
/* titlurile de sectiune pe un rand cand incap; masura de citit ramane doar pe paragraf */
.oo-lp--solo .lp-head { max-width:none; }
.oo-lp--solo .lp-head p { max-width:36em; }
/* logo-ul sta in erou, deasupra titlului */
.lp-bfhero__logo img { display:block; width:auto; height:var(--space-8); }
.oo-lp--solo .lp-hero { margin-top:0; }

/* titlul: campania mare, categoriile dedesubt (24px, tot Familjen) */
.lp-h1__sub { display:block; margin-top:var(--space-2); font-size:var(--type-size-h3); line-height:1.2; letter-spacing:-0.01em; }
.lp-top__end { display:flex; align-items:center; gap:var(--space-4); }
.oo-lp .lp-top__back { font-size:var(--type-size-interfata); font-weight:600; text-underline-offset:0.25em; }
.oo-lp .lp-top__back:hover { text-decoration-thickness:var(--line-rule); }

/* eroul de campanie: fotografia pe toata latimea, textul pe partea ei luminoasa, cu un val de os ca sa
   ramana lizibil oricare ar fi fotografia. Pe telefon fotografia sta deasupra, textul dedesubt pe os. */
.lp-bfhero { position:relative; display:grid; background:var(--background-light); overflow:hidden; }
.lp-bfhero__img { width:100%; aspect-ratio:16 / 10; object-fit:cover; object-position:70% 30%; }
.lp-bfhero__wrap { width:100%; }
.lp-bfhero__copy { display:grid; gap:var(--space-4); justify-items:start; padding:var(--space-6) var(--space-4) var(--space-7); }
.lp-bfhero__deal { display:flex; align-items:baseline; gap:var(--space-3); font-family:var(--type-family-display), Arial, sans-serif;
  font-weight:700; line-height:0.9; }
.lp-bfhero__deal small { font-family:var(--type-family-body), Arial, sans-serif; font-size:var(--type-size-corp); font-weight:600; }
/* cifra e momentul focal: marime de afis (1,5 x h1, sub 6rem), pe un camp coral cu text espresso */
.lp-bfhero__deal b { display:inline-block; padding:var(--space-2) var(--space-4) var(--space-3); background:var(--accent-primary);
  font-size:calc(var(--type-size-h1m) * 2); letter-spacing:-0.04em; font-variant-numeric:tabular-nums; border-radius:var(--radius-m); font-weight:700; }
.lp-bfhero__when { font-size:var(--type-size-corp); }
.lp-bfhero__when b { font-weight:700; }

/* banda campaniei: o linie coral subtire, text espresso, sub erou */
.lp-strip { background:var(--accent-primary); color:var(--text-on-light); }
.lp-strip p { max-width:1280px; margin-inline:auto; padding:var(--space-3) var(--space-4); font-weight:600;
  font-size:var(--type-size-interfata); text-align:center; }

/* pasii, fara numere (ordinea e evidenta), trei pe un rand de la tableta */
.lp-steps--3 li { grid-template-columns:1fr; }
.lp-steps--3 li::before { content:none; }

/* pagina se incheie in banda cabinetului: ultimul rand are firma si linkurile legale (subsolul temei e ascuns) */
.lp-cab__legal { grid-column:1 / -1; display:grid; gap:var(--space-2); padding-top:var(--space-5);
  border-top:var(--line-hair) solid var(--text-secondary-on-dark); font-size:var(--type-size-legenda); color:var(--text-secondary-on-dark); }
.lp-cab__legal ul { display:flex; flex-wrap:wrap; gap:0 var(--space-4); }
.oo-lp .lp-cab__legal a { color:var(--text-on-dark); text-underline-offset:0.25em; display:inline-block; padding-block:var(--space-2); }
.oo-lp .lp-cab__legal a:hover { text-decoration-thickness:var(--line-rule); }
.oo-lp--solo .lp-cab { margin-bottom:0; }
/* titlul si textul de la rame alaturi pe desktop, ca randul sa nu ramana gol in dreapta */
@media (min-width: 1100px) {
  .oo-lp--solo .lp-head--row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-7); align-items:end; }
}

/* ramele clientei: placi albe ca in magazin, fotografia de producator pe alb, brand si model ca in catalog, pretul
   intreg taiat si pretul de Black Friday. Nu sunt linkuri (pe site e pretul intreg), deci nici hover. 2 / 3 coloane */
.oo-lp .lp-shelf__h { font-family:var(--type-family-body), Arial, sans-serif; font-size:var(--type-size-corp); font-weight:700;
  letter-spacing:0; margin:var(--space-7) 0 var(--space-3); }
.oo-lp .lp-head + .lp-shelf__h { margin-top:0; }
.lp-shelf { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-3); }
.oo-lp .lp-frame { position:relative; display:flex; flex-direction:column; gap:var(--space-1); padding:var(--space-4);
  background:var(--surface-placheta); border:var(--line-hair) solid var(--border-default); border-radius:var(--radius-m); }
.lp-frame img { width:100%; height:auto; aspect-ratio:4 / 3; object-fit:contain; mix-blend-mode:multiply; margin-bottom:var(--space-2); }
.lp-frame__brand { font-weight:600; font-size:var(--type-size-interfata); }
.lp-frame__model { font-size:var(--type-size-legenda); color:var(--text-secondary-on-light); overflow-wrap:anywhere; }
/* reducerea: camp coral, text espresso (coralul nu e niciodata text) */
.lp-frame__off { position:absolute; top:var(--space-3); left:var(--space-3); z-index:1; padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-pill); background:var(--accent-primary); color:var(--text-on-light);
  font-weight:700; font-size:var(--type-size-legenda); font-variant-numeric:tabular-nums; }
/* preturile jos, pe aceeasi linie de baza in tot randul */
.lp-frame__price { margin-top:auto; padding-top:var(--space-2); display:flex; flex-wrap:wrap; align-items:baseline;
  column-gap:var(--space-2); font-variant-numeric:tabular-nums; }
/* Journal are o regula globala s { text-decoration:none; max-width:125px } care scotea taietura */
.oo-lp .lp-frame__price s { font-size:var(--type-size-legenda); color:var(--text-secondary-on-light); text-decoration:line-through;
  text-decoration-thickness:1px; max-width:none; white-space:nowrap; line-height:inherit; }
.lp-frame__price b { font-weight:700; font-size:var(--type-size-corp); }
.lp-shelf + .lp-caption { margin-top:var(--space-4); }

/* magazinul: datele ca rand cu filet sub text */
.lp-store__info { display:grid; border-top:var(--line-hair) solid var(--border-default); margin-block:var(--space-2); }
.lp-store__info div { display:grid; grid-template-columns:8em 1fr; gap:var(--space-3); padding-block:var(--space-3);
  border-bottom:var(--line-hair) solid var(--border-default); font-size:var(--type-size-interfata); }
.lp-store__info dt { color:var(--text-secondary-on-light); }
.lp-store__info dd { margin:0; font-weight:600; font-variant-numeric:tabular-nums; }

/* dupa sfarsitul campaniei (data-end, landing.js): oferta se ascunde, ramane invitatia in magazin */
.lp-ended { font-weight:600; }
.oo-lp.is-ended :is(.lp-bfhero__deal, .lp-bfhero__when, .lp-top__msg) { visibility:hidden; }
.oo-lp.is-ended .lp-bfhero__deal, .oo-lp.is-ended .lp-bfhero__when { display:none; }

@media (min-width: 768px) {
  .lp-shelf { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-4); }
  /* fotografia devine fundal; textul sta in stanga, pe valul de os */
  .lp-bfhero { min-height:min(78vh, 680px); align-items:center; }
  .lp-bfhero__img { position:absolute; inset:0; height:100%; aspect-ratio:auto; object-position:right 30%; }
  .lp-bfhero::before { content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(90deg, var(--background-light) 0%, var(--background-light) 30%, transparent 62%); }
  .lp-bfhero__wrap { position:relative; z-index:2; padding-inline:var(--space-6); }
  .lp-bfhero__copy { max-width:34em; padding:var(--space-8) 0; }
  .lp-bfhero__deal b { font-size:calc(var(--type-size-h1) * 1.5); }
  .lp-steps--3 { grid-template-columns:repeat(3, 1fr); border-top:0; gap:var(--space-5); }
  .lp-steps--3 li { grid-template-columns:1fr; grid-template-rows:auto 1fr; border-bottom:0;
    border-top:var(--line-rule) solid var(--text-on-light); padding-top:var(--space-4); }
}
/* pe telefon ramane logo-ul (duce in magazin) si telefonul */
@media (max-width: 479px) { .lp-top__back { display:none; } }
/* logo-ul exista doar ca PNG de 187x110: pe desktop la marimea lui reala, nu mai mult (s-ar vedea neclar) */
@media (min-width: 768px) { .lp-top__more { display:inline; } .lp-bfhero__logo img { height:calc(var(--space-9) + var(--space-3)); } }

/* telefon: eroul compact. Fotografia mai inalta (4:3, familia intreaga), logo mic, oferta pe doua randuri,
   butoanele pe toata latimea; banda de sus pe un rand, telefonul doar ca pictograma */
@media (max-width: 767px) {
  .lp-top__wrap { padding-block:var(--space-1); }
  .lp-top__msg { font-size:var(--type-size-legenda); }
  .lp-bfhero__img { aspect-ratio:4 / 3; object-position:62% 40%; }
  .lp-bfhero__copy { gap:var(--space-3); padding:var(--space-5) var(--space-4) var(--space-6); }
  .lp-bfhero__logo img { height:var(--space-7); }
  .lp-bfhero__deal { flex-direction:column; align-items:flex-start; gap:var(--space-1); }
  .lp-bfhero .lp-actions { display:grid; width:100%; gap:var(--space-3); }
  .lp-bfhero .lp-btn { justify-content:center; }
  .oo-lp--solo .lp-bfhero + .lp-sec { padding-top:var(--space-6); }
  /* medicii: numele pe un rand, zilele dedesubt */
  .oo-lp--solo .lp-cab__docs li { flex-direction:column; gap:0; }
  .oo-lp--solo .lp-cab__docs span { text-align:left; }
}
@media (max-width: 479px) {
  .lp-top__num { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .oo-lp .lp-top__tel { min-width:var(--space-7); justify-content:center; padding-inline:var(--space-2); }
}

/* pagina fara tema: continutul benzilor pe toata latimea (sus, erou, cabinet) incepe la aceeasi margine ca sectiunile.
   Banda iese din container cu 50vw - 50% pe fiecare parte; acelasi padding o aduce inapoi exact pe margine */
.oo-lp--solo .lp-bleed { padding-inline:calc(50vw - 50%); }
.oo-lp--solo .lp-bleed > .lp-wrap { max-width:none; padding-inline:0; }
.oo-lp--solo .lp-bfhero__copy { padding-inline:0; }
/* fotografia din erou e in flux (nu absoluta): iese din padding si ramane pe toata latimea ecranului */
.oo-lp--solo .lp-bfhero__img { width:100vw; max-width:none; margin-inline:calc(50% - 50vw); }
@media (min-width: 768px) {
  /* eroul ocupa primul ecran (80vh, maxim 760 px): rafturile nu au ce cauta acolo, se vede cel mult titlul sectiunii urmatoare */
  .oo-lp--solo .lp-bfhero { --lp-hero-h:min(80vh, 760px); min-height:var(--lp-hero-h); }
  .oo-lp--solo .lp-bfhero__copy { padding-block:var(--space-6); }
  /* fotografia si textul stau in aceeasi celula; fotografia (height 0, min-height 100%) nu da inaltimea randului, doar o umple. Ca imagine
     absoluta ramanea la 16:9, centrata, cu benzi de os deasupra si dedesubt (tableta) */
  .oo-lp--solo .lp-bfhero { grid-template:1fr / 1fr; }
  .oo-lp--solo .lp-bfhero__img { position:static; grid-area:1 / 1; align-self:stretch; height:0; min-height:100%;
    object-position:right 50%; }
  /* pe ecran lat fotografia intinsa pe toata latimea se decupa tare (capul tatalui iesea din erou) si valul de os
     o facea gri. Acum sta in dreapta, cat inaltimea eroului la 16:9, deci intreaga; peretele alb din stanga ei se
     topeste in os prin masca, fara strat peste familie */
  .oo-lp--solo .lp-bfhero::before { content:none; }
  .oo-lp--solo .lp-bfhero__img { justify-self:end; width:min(100vw, calc(var(--lp-hero-h) * 16 / 9));
    margin-inline:0 calc(50% - 50vw);
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 34%); mask-image:linear-gradient(90deg, transparent 0%, #000 34%); }
  .oo-lp--solo .lp-bfhero__wrap { grid-area:1 / 1; align-self:center; }
  .oo-lp--solo .lp-bfhero + .lp-sec { padding-top:var(--space-6); }
}
/* tableta in picioare: langa text fotografia nu incape intreaga si familia ajungea sub text. Fotografia sta deasupra
   (16:9, intreaga), textul dedesubt pe os; impreuna incap in primul ecran */
@media (min-width: 768px) and (max-width: 1023px) {
  .oo-lp--solo .lp-bfhero { min-height:0; grid-template:auto auto / 1fr; }
  .oo-lp--solo .lp-bfhero__img { grid-area:1 / 1; width:100vw; height:auto; min-height:0; aspect-ratio:16 / 9;
    margin-inline:calc(50% - 50vw); -webkit-mask-image:none; mask-image:none; }
  .oo-lp--solo .lp-bfhero__wrap { grid-area:2 / 1; }
}

/* Black Friday: sus bannerul facut de marketing (textul ofertei e in imagine; H1 pentru cititoarele de ecran).
   Bannerul intreg, pe toata latimea; pe ecran lat nu trece de primul ecran: inaltimea se opreste si se taie
   doar din fundalul roz din lateral. Dedesubt, pe os: unde si pana cand, plus programarea */
.lp-bfban { background:var(--background-light); }
/* imaginea are fundalul prelungit in lateral (bf_imagini.py); cadrul arata bannerul original (2055:765) */
.lp-bfban__img { display:block; width:100%; height:auto; aspect-ratio:2055 / 765; object-fit:cover; }
.oo-lp--solo .lp-bfban__img { width:100vw; max-width:none; margin-inline:calc(50% - 50vw); }
.lp-bfban__bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding-block:var(--space-5); }
.lp-bfban__when { font-size:var(--type-size-corp); }
.lp-bfban__when b { font-weight:700; }
.oo-lp.is-ended .lp-bfban__img, .oo-lp.is-ended .lp-bfban__when { display:none; }
@media (min-width: 1024px) {
  /* loc in primul ecran pentru randul cu butoane de sub banner */
  .lp-bfban__img { max-height:calc(100svh - var(--space-9) - var(--space-7)); }
}
@media (max-width: 767px) {
  /* pe telefon bannerul intreg iesea mic (145 px la 390): mai inalt, taiat doar din laterale; textul, punga si rama D&G raman intregi */
  .lp-bfban__img { aspect-ratio:2.2 / 1; }
  .lp-bfban__bar { padding-block:var(--space-4); }
  .lp-bfban .lp-actions { display:grid; width:100%; gap:var(--space-3); }
  .lp-bfban .lp-btn { justify-content:center; }
}