@font-face { font-family: "Gilda Display"; font-display: swap; src: url("../fonts/gilda-display-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Gilda Display"; font-display: swap; src: url("../fonts/gilda-display-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF; }
@font-face { font-family: "Lato"; font-weight: 400; font-display: swap; src: url("../fonts/lato-regular.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-display: swap; src: url("../fonts/lato-bold.woff2") format("woff2"); }

:root {
  
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  
  --s12: .75rem; --s14: .875rem; --s16: 1rem; --s18: 1.125rem; --s20: 1.25rem; --s24: 1.5rem; --s30: 1.875rem; --s38: 2.375rem; --s48: 3rem;
  --auriu: #8F711A; --auriu-hover: #7A6015; --petrol: #0B1F22; --petrol-adanc: #07171A;
  --lat: 1200px; --gutter: var(--sp-4); --sectiune: var(--sp-8); --raza: 4px;
  --antet-h: 64px;
}
.t-inchis { --fundal: #FAF8F5; --fundal-alt: #FFFFFF; --text: #161B1C; --secundar: #5B5752; --linie: #E2DDD5;
  --banda: #0B1F22; --banda-text: #FFFFFF; --banda-sec: #CDD5D4; --btn-card: #0B1F22; --btn-card-text: #FFFFFF;
  --antet-plin: #0B1F22; --antet-text: #FFFFFF; --subsol: #0B1F22; --subsol-text: #FFFFFF; --subsol-sec: #CDD5D4; --voal: 11,31,34; }
.t-alb { --fundal: #FFFFFF; --fundal-alt: #F7F4EF; --text: #1B1B1B; --secundar: #5E5A55; --linie: #E4E1DB;
  --banda: #F3EEE6; --banda-text: #1B1B1B; --banda-sec: #5E5A55; --btn-card: #1B1B1B; --btn-card-text: #FFFFFF;
  --antet-plin: #FFFFFF; --antet-text: #1B1B1B; --subsol: #F3EEE6; --subsol-text: #1B1B1B; --subsol-sec: #5E5A55; --voal: 24,22,20; }

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--antet-h) + var(--sp-4)); }
body { margin: 0; background: var(--fundal); color: var(--text); font-family: "Lato", system-ui, sans-serif; font-size: var(--s16); line-height: 1.6; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
.nb { white-space: nowrap; }
.cont { max-width: calc(var(--lat) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
h1, h2, h3 { font-family: "Gilda Display", Georgia, serif; font-weight: 400; line-height: 1.15; margin: 0; text-wrap: balance; }
h2 { font-size: var(--s24); }
h3 { font-size: var(--s18); }
.eticheta { font-size: var(--s12); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin: 0 0 var(--sp-3); color: var(--secundar); }

.sub { color: var(--secundar); margin: var(--sp-3) 0 0; max-width: 48ch; }
.fara-sus { margin-top: 0; }
.fara-jos { margin-bottom: 0; }
.h-subgrup { font-size: var(--s20); }
.h-fereastra { font-size: var(--s24); }
.h-dialog { font-size: var(--s20); }

:focus-visible { outline: 3px solid var(--auriu); outline-offset: 2px; border-radius: 2px; }
.t-inchis .erou :focus-visible, .t-inchis .antet :focus-visible, .banda-inchisa :focus-visible, .t-inchis .subsol :focus-visible, .t-inchis .bara :focus-visible { outline-color: #FFFFFF; }
.t-inchis .antet .submeniu :focus-visible { outline-color: var(--auriu); }
body.blocat { overflow: hidden; }
.sari { position: absolute; left: var(--sp-4); top: -100px; z-index: 50; background: #FFFFFF; color: #1B1B1B; padding: var(--sp-3) var(--sp-4); font-weight: 700; }
.sari:focus { top: var(--sp-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--sp-5); border-radius: var(--raza); font: 700 var(--s16)/1.2 "Lato", system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; cursor: pointer; text-align: center; }
.btn.plin { background: var(--auriu); color: #FFFFFF; }
.btn.plin:hover { background: var(--auriu-hover); }
.btn.contur { border-color: var(--auriu); color: var(--text); background: transparent; }
.btn.contur:hover { background: rgba(143,113,26,.14); }
.actiuni { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
.actiuni .btn { width: 100%; }
.legatura { font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }


.nota-macheta { margin: 0; padding: var(--sp-2) var(--gutter); font-size: var(--s12); text-align: center; background: #F2E9C9; color: #3A3222; }


.bara { font-size: var(--s12); padding: var(--sp-2) 0; background: #07171A; color: #CDD5D4; }
.t-alb .bara { background: #F3EEE6; color: #3E3A35; }
.bara .cont { display: flex; justify-content: space-between; gap: var(--sp-3); }
.bara a { color: inherit; font-weight: 700; }
.bara .dreapta { display: none; }


.antet { position: sticky; top: 0; z-index: 20; background: var(--antet-plin); color: var(--antet-text); border-bottom: 1px solid var(--linie); transition: transform .25s ease; }
.t-inchis .antet { border-bottom-color: rgba(255,255,255,.12); }
.antet.ascuns { transform: translateY(-100%); }
.antet .cont { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--antet-h); }
.sigla { flex: none; display: block; }
.sigla img { height: 48px; width: auto; }
.meniu { display: none; }
.cautare { display: none; }
.unelte { display: flex; align-items: center; gap: 0; margin-left: auto; }
.fav, .pauza, .inchide { padding: 0; }
.unelte a, .unelte button { position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
.unelte svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.contor { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--auriu); color: #FFFFFF; font-size: var(--s12); line-height: 18px; font-weight: 700; text-align: center; }
.contor[hidden] { display: none; }
.unelte .doar-lat { display: none; }


.panou-meniu { position: fixed; inset: 0; z-index: 40; background: var(--fundal-alt); color: var(--text); overflow-y: auto; padding: var(--sp-4) var(--gutter) var(--sp-8); }
.panou-meniu[hidden] { display: none; }
.panou-meniu .sus { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-4); }
.panou-meniu .inchide { width: 44px; height: 44px; border: 0; background: none; font-size: var(--s24); cursor: pointer; color: inherit; }
.panou-meniu form { margin-bottom: var(--sp-5); }
.camp { width: 100%; min-height: 48px; padding: 0 var(--sp-4); border: 1px solid #8A857E; border-radius: var(--raza); font: inherit; font-size: var(--s16); background: #FFFFFF; color: #1B1B1B; }
.panou-meniu h2 { font-size: var(--s20); margin: var(--sp-5) 0 var(--sp-2); }
.panou-meniu ul { list-style: none; margin: 0; padding: 0; }
.panou-meniu li a { display: block; padding: var(--sp-2) 0; min-height: 44px; text-decoration: none; }


.erou { position: relative; background: var(--banda); color: var(--banda-text); overflow: hidden; }
.t-inchis .erou { color: #FFFFFF; background: #0B1F22; }

.erou .media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #0B1F22; }
.erou .media picture, .erou .media picture img, .erou .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.erou .media video { opacity: 0; transition: opacity .6s ease; }
.erou .media video.gata { opacity: 1; }
.erou .text { position: relative; z-index: 2; padding: var(--sp-5) var(--gutter) var(--sp-6); max-width: calc(var(--lat) + 2 * var(--gutter)); margin: 0 auto; }
.t-inchis .erou .eticheta, .t-inchis .erou .intro { color: #E6EBEA; }
.erou h1 { font-size: var(--s30); max-width: 18ch; }
.erou .eticheta { text-wrap: balance; }
.erou .intro { font-size: var(--s18); margin: var(--sp-3) 0 0; max-width: 30em; color: var(--secundar); }
.pauza { position: absolute; z-index: 3; right: var(--sp-3); bottom: var(--sp-3); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.8); background: rgba(11,31,34,.6); color: #FFFFFF; display: grid; place-items: center; cursor: pointer; }
.pauza svg { width: 14px; height: 14px; fill: currentColor; }


.familii-banda { padding: var(--sp-5) 0; background: var(--fundal); }
.familii { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.familie { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--raza); text-decoration: none; color: #FFFFFF; background: #D9D4CC; }
.familie img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.familie::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,16,16,0) 30%, rgba(16,16,16,.88) 100%); }
.familie span { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: var(--sp-2) var(--sp-3); background: rgba(16,16,16,.78); font-family: "Gilda Display", Georgia, serif; font-size: var(--s16); line-height: 1.2; }
.familie:first-child img { object-position: center bottom; } 
@media (hover: hover) { .familie:hover img { transform: scale(1.03); } }

@media (max-width: 374px) { .familie span { font-size: var(--s14); padding: var(--sp-2) var(--sp-1); } }



.sectiune { padding: var(--sectiune) 0; }
.sectiune + .sectiune { padding-top: 0; }
.banda-inchisa + .sectiune, .sectiune + .banda-inchisa { padding-top: var(--sectiune); }
.cap { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.subgrup { margin-top: var(--sp-7); }


.produse { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.produs { background: var(--fundal-alt); border: 1px solid var(--linie); border-radius: var(--raza); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.t-alb .produs { background: #FFFFFF; }
.produs .poza { position: relative; aspect-ratio: 4 / 3; background: #FFFFFF; }
.produs .poza img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: var(--sp-2); }
.fav { position: absolute; top: var(--sp-1); right: var(--sp-1); width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.fav svg { width: 20px; height: 20px; stroke: #1B1B1B; fill: none; stroke-width: 1.6; }
.fav[aria-pressed="true"] svg { fill: var(--auriu); stroke: var(--auriu); }   

.produs .info { padding: var(--sp-3); display: grid; grid-template-rows: auto auto 1fr auto auto; gap: var(--sp-1); }
.produs .termen { align-self: end; padding-top: var(--sp-2); }
.produs h3 { font-size: var(--s16); line-height: 1.3; min-height: 2.6em; text-wrap: pretty; }
.produs h3 a { text-decoration: none; }
.produs h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.produs .dim { font-size: var(--s14); color: var(--secundar); }
.termen, .expus { font-size: var(--s14); display: flex; gap: var(--sp-2); align-items: flex-start; line-height: 1.4; color: var(--secundar); }

.termen::before { content: ""; width: 16px; height: 16px; flex: none; margin-top: .1em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M2 6h11v9H2zM13 9h4l3 3v3h-7'/%3E%3Ccircle cx='6' cy='17' r='2'/%3E%3Ccircle cx='16' cy='17' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M2 6h11v9H2zM13 9h4l3 3v3h-7'/%3E%3Ccircle cx='6' cy='17' r='2'/%3E%3Ccircle cx='16' cy='17' r='2'/%3E%3C/svg%3E") center / contain no-repeat; }
.produs .pret { font-weight: 700; font-size: var(--s18); }

.produs .btn.card { width: 100%; min-height: 44px; margin-top: var(--sp-2); padding: var(--sp-1); background: var(--btn-card); color: var(--btn-card-text); font-size: var(--s14); letter-spacing: 0; text-transform: none; }
.produs .btn.card:hover { filter: brightness(1.15); }
.card-tot { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); text-align: center; padding: var(--sp-5); background: var(--fundal-alt); border: 1px solid var(--linie); border-radius: var(--raza); text-decoration: none; font-weight: 700; }
.card-tot::after { content: "→"; color: var(--auriu); }


.plan { background: var(--fundal-alt); border: 1px solid var(--linie); border-radius: var(--raza); padding: var(--sp-5) var(--sp-4); display: grid; gap: var(--sp-5); }
.formular { display: grid; gap: var(--sp-3); }
.formular label { display: grid; gap: var(--sp-1); font-weight: 700; font-size: var(--s14); }
.formular textarea.camp { min-height: 96px; padding: var(--sp-3) var(--sp-4); }
.formular input[type="file"] { font: inherit; font-size: var(--s14); }
.formular input[type="file"]::file-selector-button { min-height: 44px; margin-right: var(--sp-3); padding: 0 var(--sp-4); border: 1px solid var(--auriu); border-radius: var(--raza);
  background: transparent; color: var(--text); font: 700 var(--s14)/1 "Lato", system-ui, sans-serif; cursor: pointer; }
.formular .mic { font-size: var(--s14); color: var(--secundar); margin: 0; }


.banda-inchisa { background: var(--banda); color: var(--banda-text); }
.banda-inchisa .sub, .banda-inchisa dd, .banda-inchisa .eticheta { color: var(--banda-sec); }
.showroom { display: grid; gap: var(--sp-5); align-items: center; }
.showroom .media { position: relative; border-radius: var(--raza); overflow: hidden; aspect-ratio: 4 / 3; background: #0B1F22; }
.showroom .media video, .showroom .media img { width: 100%; height: 100%; object-fit: cover; }
.showroom dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-4); margin: var(--sp-4) 0 0; }
.showroom dt { font-weight: 700; }
.showroom dd { margin: 0; }
.showroom dd a { color: inherit; }
.editorial { display: grid; gap: var(--sp-5); align-items: center; }
.editorial img { width: 100%; height: auto; border-radius: var(--raza); aspect-ratio: 4 / 3; object-fit: cover; }


.pasi { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); counter-reset: pas; }
.pasi li { counter-increment: pas; padding-left: var(--sp-7); position: relative; }
.pasi .ic { position: absolute; left: 0; top: 0; width: 32px; height: 32px; fill: none; stroke: var(--auriu); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pasi strong { display: block; font-size: var(--s18); }
.pasi span { color: var(--secundar); }


.sertar { position: fixed; z-index: 45; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--fundal-alt); color: var(--text); box-shadow: -8px 0 32px rgba(0,0,0,.18); padding: var(--sp-5); overflow-y: auto; }
.t-alb .sertar { background: #FFFFFF; }
.sertar[hidden], .dialog[hidden], .fundal-modal[hidden], .confirmare[hidden] { display: none; }
.sertar .sus, .dialog .sus { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-4); }
.inchide { width: 44px; height: 44px; border: 0; background: none; font-size: var(--s24); cursor: pointer; color: inherit; }
.sertar ul { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-3); }
.sertar li { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--sp-3); align-items: center; }
.sertar li img { width: 72px; aspect-ratio: 4 / 3; object-fit: contain; background: #FFFFFF; border: 1px solid var(--linie); }
.sertar .gol-lista { color: var(--secundar); }
.sertar .scoate { border: 0; background: none; color: var(--secundar); text-decoration: underline; cursor: pointer; font: inherit; font-size: var(--s14); min-height: 44px; }
.sertar .trimite { display: grid; gap: var(--sp-3); }
.fundal-modal { position: fixed; inset: 0; z-index: 44; background: rgba(0,0,0,.45); }
.dialog { position: fixed; z-index: 46; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100% - 2 * var(--sp-4))); background: #FFFFFF; color: #1B1B1B; border-radius: var(--raza); padding: var(--sp-5); }
.dialog .optiuni { display: grid; gap: var(--sp-2); margin: var(--sp-4) 0; }
.dialog .optiuni label { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; min-height: 48px; padding: 0 var(--sp-4); border: 1px solid #8A857E; border-radius: var(--raza); cursor: pointer; }
.dialog .optiuni input { accent-color: var(--auriu); width: 20px; height: 20px; }
.confirmare { position: fixed; z-index: 47; left: 50%; bottom: var(--sp-4); transform: translateX(-50%); width: min(420px, calc(100% - 2 * var(--sp-4))); background: #1B1B1B; color: #FFFFFF; border-radius: var(--raza); padding: var(--sp-4); display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; }
.dialog [data-confirma] { width: 100%; }
.confirmare a, .confirmare .inchide { color: #FFFFFF; font-weight: 700; }


.subsol { background: var(--subsol); color: var(--subsol-text); padding: var(--sp-8) 0 var(--sp-5); }
.subsol .coloane { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.subsol .h-subsol { font-family: "Lato", system-ui, sans-serif; font-size: var(--s12); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 var(--sp-3); }
.subsol ul { list-style: none; margin: 0; padding: 0; }
.subsol li { margin: 0; }
.subsol li a, .subsol li span { display: inline-flex; align-items: center; min-height: 44px; color: var(--subsol-sec); text-decoration: none; }
.subsol li a:hover { text-decoration: underline; }
.subsol p { color: var(--subsol-sec); margin: var(--sp-3) 0 0; }
.subsol .sigla img { height: 72px; }
.subsol .jos { border-top: 1px solid var(--linie); margin-top: var(--sp-7); padding-top: var(--sp-4); color: var(--subsol-sec); font-size: var(--s14); }
.t-inchis .subsol .jos { border-top-color: rgba(255,255,255,.18); }

.t-alb .subsol { background: #FFFFFF; border-top: 1px solid var(--linie); }
.subsol .jos a { color: inherit; display: inline-flex; min-height: 44px; align-items: center; }

@media (prefers-reduced-motion: reduce) { .familie img, .antet, .erou .media video, .produs .poza img, .produs, .familie span::after { transition: none; } }


@media (min-width: 640px) {
  :root { --gutter: var(--sp-6); }
  .produse { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .actiuni { flex-direction: row; flex-wrap: wrap; }
  .actiuni .btn { width: auto; }
  .familie span { font-size: var(--s20); left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); padding: 0; background: none; }
  .showroom, .editorial { grid-template-columns: 1fr 1fr; }
  .plan { grid-template-columns: 1fr 1fr; padding: var(--sp-6); align-items: start; }
  .subsol .coloane { grid-template-columns: repeat(3, 1fr); }
  h2 { font-size: var(--s30); }
  .erou h1 { font-size: var(--s38); }   
  .h-subgrup { font-size: var(--s24); }
}


@media (min-width: 1024px) {
  :root { --gutter: var(--sp-7); --sectiune: var(--sp-9); --antet-h: 88px; }
  .bara .dreapta { display: inline; }
  .sigla img { height: 64px; }
  .meniu { display: flex; gap: var(--sp-4); margin: 0 0 0 var(--sp-5); padding: 0; }
  .meniu > li { position: relative; list-style: none; }
  .meniu > li > a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; white-space: nowrap; }
  .meniu > li > a:hover { text-decoration: underline; text-underline-offset: 6px; }
  .submeniu { position: absolute; left: calc(-1 * var(--sp-4)); top: 100%; min-width: 240px; background: #FFFFFF; color: #1B1B1B; border: 1px solid var(--linie); border-radius: var(--raza); padding: var(--sp-3) 0; list-style: none; margin: 0; box-shadow: 0 12px 32px rgba(0,0,0,.14); display: none; }
  .meniu > li:hover .submeniu, .meniu > li:focus-within .submeniu { display: block; }
  .submeniu a { display: block; padding: var(--sp-2) var(--sp-4); text-decoration: none; }
  .submeniu a:hover { background: #F7F4EF; }
  .cautare { display: block; margin-left: auto; width: 160px; }
  .cautare .camp { min-height: 44px; }
  .t-inchis .cautare .camp { background: rgba(255,255,255,.1); color: #FFFFFF; border-color: rgba(255,255,255,.55); }
  .t-inchis .cautare .camp::placeholder { color: #CDD5D4; }
  .unelte { margin-left: var(--sp-3); }
  .unelte .doar-mic { display: none; }
  .unelte .doar-lat { display: inline-flex; }
  h2 { font-size: var(--s38); }
  .erou { min-height: calc(100svh - var(--antet-h) - 72px); max-height: 860px; display: flex; align-items: flex-end; }
  .erou .media { position: absolute; inset: 0; aspect-ratio: auto; }
  
  .erou .media::after { content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(var(--voal),.9) 0%, rgba(var(--voal),.82) 45%, rgba(var(--voal),.3) 70%, rgba(var(--voal),0) 88%),
                linear-gradient(180deg, rgba(var(--voal),0) 55%, rgba(var(--voal),.6) 100%); }
  .erou .text { width: 100%; padding: 0 var(--gutter) var(--sp-8); color: #FFFFFF; }
  .erou .eticheta, .erou .intro { color: #E6EBEA; }
  .erou .btn.secundar { border-color: #FFFFFF; color: #FFFFFF; }
  
  .t-alb .erou .media::after { background: linear-gradient(90deg, rgba(var(--voal),.84) 0%, rgba(var(--voal),.74) 42%, rgba(var(--voal),.24) 66%, rgba(var(--voal),0) 84%),
                linear-gradient(180deg, rgba(var(--voal),0) 60%, rgba(var(--voal),.5) 100%); }
  .erou h1 { font-size: var(--s48); max-width: 560px; }
  .erou .intro { max-width: 480px; }
  .pauza { right: var(--gutter); bottom: var(--sp-5); }
  .familii-banda { padding: var(--sp-6) 0; }
  .familie { aspect-ratio: 16 / 9; }
  .familie span { font-size: var(--s24); }
  .cap { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .produse { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
  .subsol .coloane { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .plan { padding: var(--sp-7); gap: var(--sp-7); }
  .showroom, .editorial { gap: var(--sp-8); }
}


@media (min-width: 1280px) {
  .meniu { gap: var(--sp-5); }
  .cautare { width: 240px; }
  .erou h1 { max-width: 640px; }
}


.btn.secundar { border-color: var(--auriu); color: var(--text); background: transparent; }
.btn.secundar:hover { background: rgba(143,113,26,.14); }
.t-inchis .erou .btn.secundar, .t-inchis .banda-inchisa .btn.secundar { border-color: #FFFFFF; color: #FFFFFF; }


.t-inchis .doar-alb, .t-alb .doar-inchis { display: none; }


.nota-macheta { display: flex; justify-content: center; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.comutator { display: inline-flex; align-items: center; gap: var(--sp-1); }
.et-comutator { font-weight: 700; margin-right: var(--sp-1); }
.comutator button { min-height: 32px; padding: 0 var(--sp-3); border: 1px solid #3A3222; border-radius: 16px; background: transparent; color: #3A3222; font: 700 var(--s12)/1 "Lato", system-ui, sans-serif; cursor: pointer; }
.comutator button[aria-pressed="true"] { background: #3A3222; color: #FFFFFF; }


.indicatori { background: var(--banda); color: var(--banda-text); padding: var(--sp-7) 0 var(--sp-5); }
.indicatori ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-4); }
.indicatori li { display: grid; gap: var(--sp-2); align-content: start; }
.linie-aur { display: block; width: 48px; height: 1px; background: var(--auriu); transform-origin: left; }
.t-inchis .linie-aur { background: #FFFFFF; opacity: .6; }
.indicatori .cifra { font-family: "Gilda Display", Georgia, serif; font-weight: 400; font-size: var(--s30); line-height: 1.1; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.stele { display: inline-flex; gap: 2px; }
.stele svg { width: 16px; height: 16px; fill: var(--auriu); }
.t-inchis .stele svg { fill: #FFFFFF; }
.indicatori li > span { font-size: var(--s14); color: var(--banda-sec); max-width: 26ch; }
.indicatori li > span a { color: inherit; font-weight: 700; }
.nota-recenzii { margin: var(--sp-6) 0 0; font-size: var(--s12); color: var(--banda-sec); }


.cap h2::after, .showroom h2::after, .editorial h2::after, .plan h2::after { content: ""; display: block; width: 48px; height: 1px; margin-top: var(--sp-3); background: var(--auriu); transform-origin: left; }
.t-inchis .banda-inchisa h2::after { background: #FFFFFF; opacity: .6; }


.produs { transition: border-color .3s ease, box-shadow .3s ease; }
.produs .poza { overflow: hidden; }
.produs .poza img { transition: transform .5s cubic-bezier(.2,.6,.2,1); }
@media (hover: hover) {
  .produs:hover { border-color: #C9C3B8; box-shadow: 0 8px 24px rgba(0,0,0,.06); }
  .produs:hover .poza img { transform: scale(1.04); }
}


.livrare { display: grid; gap: var(--sp-6); align-items: center; }
.harta-livrare { margin: 0; display: grid; gap: var(--sp-4); justify-items: center; }
.harta-livrare svg { width: 100%; max-width: 280px; height: auto; overflow: visible; }
.zona-tara { fill: none; stroke: var(--secundar); stroke-width: 1; stroke-dasharray: 4 6; }
.zona-50 { fill: rgba(143,113,26,.1); stroke: var(--auriu); stroke-width: 1.5; }
.punct { fill: var(--text); }
.t-oras { font: 700 14px "Lato", system-ui, sans-serif; fill: var(--text); }
.t-zona { font: 400 14px "Lato", system-ui, sans-serif; fill: var(--text); }
.harta-livrare figcaption { display: grid; gap: var(--sp-2); font-size: var(--s14); color: var(--secundar); max-width: 40ch; }
.leg { display: flex; gap: var(--sp-2); align-items: flex-start; }
.leg::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: .15em; border-radius: 50%; }
.leg-50::before { background: rgba(143,113,26,.1); border: 1.5px solid var(--auriu); }
.leg-tara::before { border: 1px dashed var(--secundar); }


.cu-aparitie .apare { opacity: 0; transform: translateY(12px); transition: opacity .4s ease var(--intarziere, 0ms), transform .4s cubic-bezier(.2,.6,.2,1) var(--intarziere, 0ms); }
.cu-aparitie .apare.vazut { opacity: 1; transform: none; }
.cu-aparitie .indicatori .linie-aur, .cu-aparitie .cap.apare h2::after { transform: scaleX(0); transition: transform .48s cubic-bezier(.2,.6,.2,1) calc(var(--intarziere, 0ms) + 120ms); }
.cu-aparitie .indicatori .vazut .linie-aur, .cu-aparitie .cap.apare.vazut h2::after { transform: scaleX(1); }
.cu-aparitie .harta-livrare .zona-50 { stroke-dasharray: 453; stroke-dashoffset: 453; transition: stroke-dashoffset 1.2s cubic-bezier(.2,.6,.2,1) .2s; }
.cu-aparitie .harta-livrare.vazut .zona-50 { stroke-dashoffset: 0; }


@media (prefers-reduced-motion: no-preference) {
  .erou .panou-erou > * { animation: urca .7s cubic-bezier(.2,.6,.2,1) both; }
  .erou .panou-erou > :nth-child(2) { animation-delay: .08s; }
  .erou .panou-erou > :nth-child(3) { animation-delay: .16s; }
  .erou .panou-erou > :nth-child(4) { animation-delay: .24s; }
}
@keyframes urca { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (min-width: 640px) {
  .indicatori ul { grid-template-columns: repeat(4, 1fr); }
  .indicatori .cifra { font-size: var(--s38); }
}
@media (min-width: 1024px) {
  .indicatori { padding: var(--sp-8) 0 var(--sp-6); }
  .livrare { grid-template-columns: 3fr 2fr; gap: var(--sp-8); }
  .pasi { grid-template-columns: 1fr; }
}


.produse > * { min-width: 0; }




.erou .panou-erou::before { content: ""; display: block; width: 48px; height: 1px; margin-bottom: var(--sp-4); background: var(--auriu); transform-origin: left; }
.derulare { display: none; }
@keyframes linie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes coboara { from { transform: translateY(-16px); } to { transform: translateY(48px); } }


@media (hover: hover) and (min-width: 640px) {
  .familie span::after { content: "→"; display: inline-block; margin-left: var(--sp-2); color: var(--auriu); transition: transform .3s cubic-bezier(.2,.6,.2,1); }
  .familie:hover span::after { transform: translateX(4px); }
}


.produs .btn.card.adaugat { background: var(--auriu); color: #FFFFFF; }
@keyframes puls { 50% { transform: scale(1.25); } }
@keyframes tresare { 30% { transform: translateY(-3px) scale(1.15); } }


.plan-desen { margin: var(--sp-5) 0 0; max-width: 360px; }
.plan-desen svg { display: block; width: 100%; height: auto; overflow: visible; }
.plan-desen .perete { fill: none; stroke: var(--text); stroke-width: 3; stroke-linecap: square; }
.plan-desen .usa, .plan-desen .cota { fill: none; stroke: var(--secundar); stroke-width: 1; }
.plan-desen .mobila { fill: none; stroke: var(--auriu); stroke-width: 1.5; }
.plan-desen text { font: 400 14px "Lato", system-ui, sans-serif; fill: var(--secundar); }
.plan-desen figcaption { margin-top: var(--sp-2); font-size: var(--s14); color: var(--secundar); }


.acum { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-4) 0 0; font-weight: 700; font-size: var(--s14); }
.acum[hidden] { display: none; }
.punct-viu { width: 8px; height: 8px; border-radius: 50%; background: var(--auriu); flex: none; }
.t-inchis .banda-inchisa .punct-viu { background: #FFFFFF; }
@keyframes bate { 50% { transform: scale(1.8); opacity: .5; } }


.editorial .cadru { border-radius: var(--raza); overflow: hidden; aspect-ratio: 4 / 3; }
.editorial .cadru img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto; }


.d1 { --d: .25s; } .d2 { --d: .5s; } .d3 { --d: .75s; }
.cu-aparitie .deseneaza .tr { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.2,.6,.2,1) var(--d, 0s); }
.cu-aparitie .vazut .deseneaza .tr { stroke-dashoffset: 0; }
.cu-aparitie .plan-desen text { opacity: 0; transition: opacity .4s ease 1.3s; }
.cu-aparitie .vazut .plan-desen text { opacity: 1; }


.semnatura { margin: var(--sp-8) 0 0; text-align: center; color: var(--subsol-text); }
.semnatura .yna { display: block; font-family: "Gilda Display", Georgia, serif; font-size: var(--s48); line-height: 1; letter-spacing: .3em; padding-left: .3em; }
.semnatura .din { display: block; margin-top: var(--sp-3); font-size: var(--s12); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--subsol-sec); }


.cu-aparitie .familie.cortina { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.65,0,.35,1) var(--intarziere, 0ms); }
.cu-aparitie .familie.cortina.vazut { clip-path: inset(0 0 0 0); }
.cu-aparitie .indicatori .stele svg { opacity: .2; transition: opacity .3s ease; }
.cu-aparitie .indicatori .vazut .stele svg { opacity: 1; }
.cu-aparitie .indicatori .vazut .stele svg:nth-child(1) { transition-delay: .3s; }
.cu-aparitie .indicatori .vazut .stele svg:nth-child(2) { transition-delay: .36s; }
.cu-aparitie .indicatori .vazut .stele svg:nth-child(3) { transition-delay: .42s; }
.cu-aparitie .indicatori .vazut .stele svg:nth-child(4) { transition-delay: .48s; }
.cu-aparitie .indicatori .vazut .stele svg:nth-child(5) { transition-delay: .54s; }
.cu-aparitie .semnatura.apare { transition-duration: .8s; }


@media (prefers-reduced-motion: no-preference) {
  .erou .panou-erou::before { animation: linie .7s cubic-bezier(.2,.6,.2,1) .35s both; }
  .fav.puls svg { animation: puls .32s cubic-bezier(.2,.6,.2,1); }
  .contor.tresare { animation: tresare .4s cubic-bezier(.2,.6,.2,1); }
  .acum.deschis .punct-viu { animation: bate 1.2s ease-in-out .6s 2; }
}

@media (min-width: 1024px) {
  
  .erou { margin-top: calc(-1 * var(--antet-h)); min-height: calc(100svh - 48px); max-height: calc(860px + var(--antet-h)); }
  .erou .media::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 200px; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 100%); }
  .antet { transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease; }
  .antet.peste { background: transparent; color: #FFFFFF; border-bottom-color: rgba(255,255,255,.2); }
  .antet.peste .doar-alb { display: none; }
  .antet.peste .doar-inchis { display: block; }
  .antet.peste .cautare .camp { background: rgba(255,255,255,.12); color: #FFFFFF; border-color: rgba(255,255,255,.6); }
  .antet.peste .cautare .camp::placeholder { color: #E6EBEA; }
  .antet.peste :focus-visible { outline-color: #FFFFFF; }
  .antet.peste .submeniu :focus-visible { outline-color: var(--auriu); }
  .erou .panou-erou::before { background: #FFFFFF; opacity: .7; }
  
  .derulare { display: block; position: absolute; z-index: 2; left: 50%; bottom: var(--sp-5); width: 1px; height: 48px; background: rgba(255,255,255,.35); overflow: hidden; }
  .derulare i { position: absolute; left: 0; top: 0; width: 1px; height: 16px; background: #FFFFFF; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .derulare i { animation: coboara 1.6s cubic-bezier(.65,0,.35,1) .9s 2 both; }
}



.cautare { position: relative; }
.cautare svg { position: absolute; left: var(--sp-3); top: 50%; width: 18px; height: 18px; transform: translateY(-50%); stroke: currentColor; fill: none; stroke-width: 1.8; pointer-events: none; opacity: .8; }
.cautare .camp { padding-left: 40px; }

.erou .pauza { border-color: rgba(255,255,255,.5); background: rgba(0,0,0,.28); transition: opacity .3s ease; }
@media (hover: hover) {
  .erou .pauza { opacity: 0; }
  .erou:hover .pauza, .erou .pauza:focus-visible { opacity: 1; }
}
@media (hover: none) { .erou .pauza { opacity: .6; } }



.familii { display: grid; grid-auto-flow: column; grid-auto-columns: 42%; grid-template-columns: none; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.familii::-webkit-scrollbar { display: none; }
.familie { aspect-ratio: 3 / 4; scroll-snap-align: start; }
.familii-sageti { display: none; }
@media (min-width: 640px) { .familii { grid-auto-columns: calc((100% - 2 * var(--sp-4)) / 3.3); gap: var(--sp-4); } }
@media (min-width: 1024px) {
  .familii { grid-auto-columns: calc((100% - 3 * var(--sp-5)) / 4); gap: var(--sp-5); }
  .familie { aspect-ratio: 3 / 4; }
  .familii-sageti:not([hidden]) { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-3); }
  .familii-sageti button { width: 44px; height: 44px; border: 1px solid var(--linie); border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; font-size: var(--s18); }
}


.cu-aparitie .apare { transform: none; transition: opacity .5s ease; }


.indicatori { padding: var(--sp-7) 0 var(--sp-5); }
.indicatori ul { max-width: 960px; margin: 0 auto; grid-template-columns: 1fr 1fr; gap: var(--sp-6) 0; }
.indicatori li { justify-items: center; text-align: center; gap: var(--sp-1); padding: 0 var(--sp-3); }
.indicatori .celula { display: grid; justify-items: center; gap: var(--sp-1); text-decoration: none; color: inherit; }
.indicatori .celula:hover .leg { text-decoration: underline; text-underline-offset: 4px; }
.indicatori .linie-aur { margin-bottom: var(--sp-2); width: 32px; transform-origin: center; }
.indicatori .cifra { justify-content: center; }
.indicatori .stele { margin-top: 2px; }
.indicatori .leg { font-size: var(--s12); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--banda-sec); max-width: none; }
.nota-recenzii { text-align: center; margin-top: var(--sp-5); }
@media (min-width: 640px) {
  .indicatori ul { grid-template-columns: repeat(4, 1fr); }
  .indicatori li + li { border-left: 1px solid rgba(143,113,26,.45); }
  .t-inchis .indicatori li + li { border-left-color: rgba(255,255,255,.2); }
}
@media (min-width: 1024px) { .indicatori .cifra { font-size: var(--s48); } }
.indicatori .leg { text-wrap: balance; }
@media (max-width: 639px) { .indicatori li { padding: 0 var(--sp-2); } .indicatori .leg { letter-spacing: .06em; } }