/* =========================================================
   CAMERE.MD — Chrome: navigation, header, drawer,
   floating contact actions, footer.
   ========================================================= */

/* ---------------------------------------------------------
   HEADER — sits in flow at the top of the hero and scrolls
   away with it. Only the nav pill stays pinned.
--------------------------------------------------------- */
/* Below 1024px the fixed .mbar carries the logo instead, so this
   header would be a duplicate. responsive.css switches it back on. */
.site-header{
  position:relative;
  z-index:var(--z-local);
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-24);
  padding-block:var(--sp-24) var(--sp-8);
}

.brand{display:inline-flex;align-items:center;flex-shrink:0}
.brand img{
  width:160px;
  height:auto;
}
/* Logoul are doua variante, una pentru fiecare tema. Ambele sunt in pagina;
   se vede cea potrivita. A doua e marcata aria-hidden, ca cititorul de ecran
   sa anunte numele o singura data. */
.logo-dark{display:none}
.logo-light{display:block}
:root[data-theme="dark"] .logo-dark{display:block}
:root[data-theme="dark"] .logo-light{display:none}

.header-actions{
  display:flex;
  align-items:center;
  gap:var(--sp-12);
}

.call-pill{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-8);
  min-height:44px;
  padding:var(--sp-8) var(--sp-12);
  border-radius:var(--r-sm);
  border:1px solid var(--accent-line);
  background:var(--accent-wash);
  color:var(--text);
  font-family:var(--f-body);
  font-size:var(--fs-body);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  transition:border-color var(--t-ui) var(--e-out),background-color var(--t-ui) var(--e-out);
}
.call-pill .ic{
  display:grid;place-items:center;
  width:26px;aspect-ratio:1;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-size:var(--fs-micro);
  transition:transform var(--t-ui) var(--e-spring);
}
.call-pill:hover{border-color:var(--accent-line);background:rgba(234,107,8,.10)}
.call-pill:hover .ic{transform:rotate(-14deg) scale(1.06)}
.call-pill > .icon{width:18px;height:18px;color:var(--accent-text);flex-shrink:0}
.nav-actions{display:flex;align-items:center;gap:var(--sp-8);flex-shrink:0}
.nav-brand{justify-self:start}
.nav-actions{justify-self:end}
/* Inaltime, nu latime. Fisierul e 390×150, deci `width:176px` il facea inalt
   de 68px — pastila ajungea la 84px si intra peste titlul din hero. Cu
   inaltimea fixata, bara masoara 48px, iar cu cei 16px de sus incape exact in
   `--nav-h`, de care atarna spatiul de deasupra hero-ului. */
.nav-brand img{height:32px;width:auto}

/* ---------------------------------------------------------
   FLOATING NAV PILL
--------------------------------------------------------- */
.nav{
  position:fixed;
  top:var(--sp-16);
  left:50%;
  z-index:var(--z-nav);
  transform:translateX(-50%);
  display:none;
  align-items:center;
  /* 12px, nu 16: cu marca, noua intrari si trei actiuni, cei patru pixeli in
     plus pe fiecare interstitiu erau exact cat trebuia ca bara sa nu incapa
     la 1360px. */
  gap:var(--sp-12);
  /* Marca si uneltele (limba, telefon, tema) au latimea lor si nu se string;
     coloana din mijloc ia ce ramane si poate ajunge la zero — de acolo incolo
     meniul se deruleaza pe orizontala in loc sa sparga bara. */
  grid-template-columns:auto minmax(0,1fr) auto;
  width:min(calc(100% - var(--sp-48)),var(--maxw));
  padding:var(--sp-8) var(--sp-16);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface-raised);
  box-shadow:var(--sh-sm);
  transition:transform var(--t-comp) var(--e-out),opacity var(--t-comp) var(--e-out);
}
.nav.is-hidden{
  transform:translateX(-50%) translateY(-140%);
  opacity:0;
}

.nav-pill{
  position:relative;
  display:flex;
  align-items:center;
  gap:2px;
  padding:var(--sp-4);
  border-radius:var(--r-sm);
  /* Lista se deruleaza pe orizontala: ce nu incape se ascunde in marginea
     din dreapta si apare pe masura ce ajungi acolo. Fara bara de derulare
     vizibila — marginea estompata spune ca mai e ceva dincolo. */
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
  --fade-l:0px;
  --fade-r:0px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent 100%);
  /* Singurul element cu tratament de sticla din tot site-ul (F4).
     Fallback intai: fundal opac din tokens. Sticla se aplica doar unde
     backdrop-filter chiar exista, altfel ar ramane o bara transparenta cu
     text ilizibil. Un strat, nu sase: culoare + blur + saturatie usoara. */
  background:transparent;
  transition:background-color var(--t-comp) var(--e-out),border-color var(--t-comp) var(--e-out);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{
    background:var(--glass);
    backdrop-filter:blur(14px) saturate(1.25);
    -webkit-backdrop-filter:blur(14px) saturate(1.25);
  }
}

.nav-pill::-webkit-scrollbar{width:0;height:0;display:none}
/* Cand totul incape, lista sta centrata ca inainte. Cand nu incape, pleaca
   din stanga — altfel primul element ar ramane inaccesibil la derulare. */
.nav-pill.is-fit{justify-content:center}
.nav-pill.has-left{--fade-l:22px}
.nav-pill.has-right{--fade-r:22px}
.nav-pill > .nav-item{flex:0 0 auto}

.nav-item{position:relative}

.nav-link{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:var(--sp-8);
  /* 44px: pragul de tinta de atingere. Bara a fost o vreme la 36px, ca sa
     fie mai subtire, si a iesit o dunga — randul de meniu nu mai avea aerul
     cu care se citeste dintr-o privire. `nav.js` remasoara bara si rescrie
     `--nav-h`, deci spatiul de deasupra hero-ului urmeaza inaltimea reala. */
  min-height:44px;
  padding:var(--sp-8) var(--sp-12);
  border-radius:var(--r-sm);
  font-family:var(--f-head);
  font-size:var(--fs-body);
  font-weight:500;
  letter-spacing:.02em;
  color:var(--text-muted);
  white-space:nowrap;
  transition:color var(--t-ui) var(--e-out);
}
.nav-link .caret{
  font-size:.62em;
  transition:transform var(--t-ui) var(--e-out);
}
/* D7: activul si hover-ul folosesc proprietati DIFERITE.
   Activ = pastila plina, permanent, sub el. Hover = doar culoarea textului.
   Inainte, ambele scriau color:#fff, iar cand pastila pleca sub elementul
   din hover, cel activ ramanea cu text alb pe suprafata deschisa - invizibil.
   Elementul activ nu raspunde la hover: e deja in starea finala. */
.nav-item:hover > .nav-link{color:var(--text)}
.nav-item.is-open > .nav-link .caret{transform:rotate(180deg)}

/* the travelling indicator — one element, spring transition */
.nav-ind{
  position:absolute;
  z-index:1;
  top:4px;
  bottom:4px;
  left:0;
  width:0;
  border-radius:var(--r-sm);
  background:var(--accent-wash);
  box-shadow:inset 0 0 0 1px var(--accent-line);
  opacity:0;
  transform:translateX(0);
  transition:
    transform 380ms var(--e-spring),
    width 380ms var(--e-spring),
    opacity var(--t-ui) var(--e-out);
  pointer-events:none;
}
.nav-ind.is-on{opacity:1}
.nav-item.is-active > .nav-link,
.nav-item.is-active:hover > .nav-link{color:var(--accent-text)}

/* dropdown */
.nav-drop{
  position:absolute;
  top:calc(100% + 12px);
  left:50%;
  min-width:232px;
  padding:var(--sp-8);
  border-radius:var(--r-md);
  background:var(--surface-raised);
  border:1px solid var(--border);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--sh-lg);
  opacity:0;
  visibility:hidden;
  transform:translateX(-50%) translateY(-8px) scale(.98);
  transform-origin:top center;
  transition:
    opacity var(--t-ui) var(--e-out),
    transform var(--t-ui) var(--e-out),
    visibility 0s linear var(--t-ui);
}
.nav-item.is-open .nav-drop,
.nav-drop.is-open{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0) scale(1);
  transition-delay:0s;
}
/* Lista derulabila isi taie continutul, deci panoul de Servicii nu mai poate
   sta in ea: nav.js il muta in <body> si il aseaza sub declansator. */
.nav-drop--portal{
  position:fixed;
  top:auto;
  z-index:calc(var(--z-nav) + 1);
}
.nav-drop a{
  display:flex;
  align-items:center;
  gap:var(--sp-8);
  padding:var(--sp-8) var(--sp-16);
  border-radius:var(--r-sm);
  font-size:var(--fs-body);
  color:var(--text-muted);
  transition:background-color var(--t-micro) var(--e-out),color var(--t-micro) var(--e-out);
}
.nav-drop a .ic{color:var(--accent-text);width:16px;height:16px}
.nav-drop a:hover,.nav-drop a:focus-visible{background:var(--accent-wash);color:var(--text)}

/* ---------------------------------------------------------
   MOBILE TOP BAR — the pill cannot fit below 1024px, so a
   compact fixed bar keeps navigation always reachable.
--------------------------------------------------------- */
.mbar{
  position:fixed;
  inset:0 0 auto 0;
  z-index:var(--z-nav);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-12);
  --mbar-pad:16px;
  padding:8px max(var(--mbar-pad),env(safe-area-inset-right)) 8px max(var(--mbar-pad),env(safe-area-inset-left));
  padding-top:max(8px,env(safe-area-inset-top));
  background:var(--surface);
  border-bottom:1px solid var(--border-soft);
  transition:background-color var(--t-comp) var(--e-out),border-color var(--t-comp) var(--e-out);
}
.mbar.is-solid{
  background:var(--surface-raised);
  border-bottom-color:var(--border);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
/* Cand nu incape tot, logoul cedeaza — nu butoanele. Pe paginile de magazin
   bara poarta CINCI comenzi (limba, cos, market, telefon, meniu): 395px de
   bara pe un ecran de 390px, deci ultimul buton se taia pe margine la
   telefoanele obisnuite, nu doar la cele mici. Butoanele nu se pot micsora —
   44px e tinta de atingere — iar o comanda taiata in doua arata ca o pagina
   stricata. Logoul, in schimb, se citeste si mai mic, iar cine il vede e deja
   pe pagina.

   Cat de mic nu se hotaraste pe praguri de latime: un prag nu poate sti cate
   butoane are pagina, iar paginile de magazin au cu unul mai mult decat
   celelalte. Randul de flex stie. De aceea 144px e o DORINTA (`flex-basis`),
   nu o masura: cand incape, atat e; cand nu, se ia de acolo exact cat lipseste.

   Latimea sta pe LINK, iar imaginea o urmeaza cu `width:100%`. Invers — latime
   pe imagine si `max-width:100%` — nu merge: procentul s-ar masura fata de un
   link care se intinde dupa imagine, iar un procent fata de ceva nedefinit se
   ignora, deci linkul ar fi ramas teapan orice s-ar fi intamplat. */
/* Cat s-a parcurs din pagina. Sta EXACT peste linia de jos a barei, care
   exista oricum: nu adauga un rand pe un ecran inalt de 812px, doar coloreaza
   din stanga o linie care era deja acolo. Elementul il pune `nav.js`.

   Doi pixeli, culoarea de accent, fara tranzitie: derularea e miscarea, o
   tranzitie peste ea ar face bara sa ramana in urma degetului. */
.mbar-progres{
  position:absolute;
  inset:auto 0 -1px 0;
  height:2px;
  background:var(--accent);
  transform:scaleX(var(--p,0));
  transform-origin:left center;
}

.mbar .brand{min-width:0;flex:0 1 144px}
.mbar .brand img{width:100%}
.mbar-right{display:flex;align-items:center;gap:var(--sp-8);flex-shrink:0}
/* `justify-content` pe fata: butonul are nevoie de flex (pictograma + cuvant,
   cu spatiu intre ele), iar flex-ul nu stie de `place-items` pe orizontala.
   Sub 440px cuvantul se ascunde si butonul se face patrat — fara randul asta
   pictograma ramanea lipita de marginea din stanga. */
.mbar .mobile-call{display:flex;justify-content:center;gap:var(--sp-8);width:auto;height:44px;aspect-ratio:auto;padding-inline:var(--sp-12);font-family:var(--f-head);font-weight:600}
.mobile-call__label{font-size:var(--fs-body)}
.drawer-tools{display:flex;align-items:center;gap:var(--sp-8)}
/* Bara mobila poarta acum si limba, deci butonul de telefon ramane doar
   iconita mai devreme decat inainte (era 374px). */
@media (max-width:440px){
  .mbar{--mbar-pad:12px;gap:var(--sp-8)}
  .mbar-right{gap:var(--sp-4)}
  .mbar .mobile-call{width:44px;padding-inline:0}
  .mobile-call__label{display:none}
}

/* =========================================================
   ANCORELE SI BARA FIXA

   Bara de sus e `position:fixed`, deci nu ocupa loc in pagina. Cand browserul
   sare la o ancora, el aseaza tinta la y=0 — adica FIX SUB bara, ascunsa.
   Pe `#acasa` se vedea cel mai urat: `.hero-inner` are doar 24px deasupra
   titlului, deci primul rand („Vedem") intra complet sub bara.

   De ce nu era prins de codul care exista: `nav.js` compenseaza inaltimea
   barei, dar numai la CLIC pe `a[href^="#"]` — adica pe ancore din aceeasi
   pagina. Cand omul AJUNGE pe pagina cu ancora in adresa (sigla de pe o fisa
   de produs duce la `/#acasa`, un semn de carte, un link trimis pe WhatsApp),
   saltul il face browserul singur si nu trece prin niciun JavaScript.
   `scroll-margin-top` e singurul lucru pe care browserul il asculta acolo.

   Valorile sunt cele din `legal.css`, unde problema a fost rezolvata deja
   pentru paginile de termeni: 112px cand bara e pastila de sus (jos la 85px),
   92px cand e bara de telefon (jos la 72px). Pragul e 1024px, acolo unde se
   schimba una cu alta — nu 700px ca in legal.css, fiindca acolo conteaza alt
   lucru decat bara.
   ========================================================= */
main[id],
.section[id],
.hero-inner[id]{scroll-margin-top:112px}
@media (max-width:1024px){
  main[id],
  .section[id],
  .hero-inner[id]{scroll-margin-top:92px}
}

.icon-btn{
  display:grid;
  place-items:center;
  width:44px;
  aspect-ratio:1;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  color:var(--text);
  background:var(--surface-raised);
  transition:background-color var(--t-ui) var(--e-out),border-color var(--t-ui) var(--e-out);
}
.icon-btn:hover{border-color:var(--accent-line)}
.icon-btn--accent{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-accent)}

.burger{position:relative}
.burger span{
  position:absolute;
  left:13px;
  width:18px;height:1.5px;
  background:currentColor;
  /* linie de 1.5px: 2px o face capsula, iar --r-pill spune asta explicit */
  border-radius:var(--r-pill);
  transition:transform var(--t-ui) var(--e-out),opacity var(--t-micro) linear;
}
.burger span:nth-child(1){transform:translateY(-5px)}
.burger span:nth-child(3){transform:translateY(5px)}
.burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}

/* ---------------------------------------------------------
   MOBILE DRAWER
--------------------------------------------------------- */
.drawer{
  position:fixed;
  inset:0;
  z-index:var(--z-drawer);
  display:grid;
  grid-template-rows:auto 1fr;
  background:var(--surface);
  visibility:hidden;
  opacity:0;
  transition:opacity var(--t-comp) var(--e-out),visibility 0s linear var(--t-comp);
}
.drawer.is-open{
  visibility:visible;
  opacity:1;
  transition-delay:0s;
}

.drawer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--sp-8) var(--sp-16);
  padding-top:max(8px,env(safe-area-inset-top));
  border-bottom:1px solid var(--border);
}
.drawer-top .brand img{width:160px}
.drawer-body{
  overflow-y:auto;
  padding:24px 20px max(32px,env(safe-area-inset-bottom));
  -webkit-overflow-scrolling:touch;
}
.drawer-nav li{
  border-bottom:1px solid var(--border-soft);
  opacity:0;
  transform:translateY(10px);
}
.drawer.is-open .drawer-nav li{
  opacity:1;
  transform:none;
  transition:opacity var(--t-comp) var(--e-out),transform var(--t-comp) var(--e-out);
  transition-delay:calc(80ms + var(--i,0) * 40ms);
}
.drawer-nav a{
  display:flex;
  align-items:baseline;
  gap:var(--sp-16);
  padding:var(--sp-16) 2px;
  font-family:var(--f-head);
  font-size:var(--fs-h4);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:var(--text);
}
.drawer-nav a span{
  font-size:var(--fs-micro);
  letter-spacing:.14em;
  color:var(--text-faint);
}
.drawer-nav a:hover{color:var(--accent-text)}

.drawer-foot{
  margin-top:var(--sp-32);
  display:grid;
  gap:var(--sp-12);
}
.drawer-social{
  display:flex;
  gap:var(--sp-8);
  margin-top:var(--sp-8);
}
.drawer-social a{
  display:grid;place-items:center;
  width:48px;aspect-ratio:1;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  color:var(--text-muted);
  font-size:var(--fs-lead);
  transition:color var(--t-ui) var(--e-out),border-color var(--t-ui) var(--e-out);
}
.drawer-social a:hover{color:var(--accent-text);border-color:var(--accent-line)}

/* ---------------------------------------------------------
   FLOATING CONTACT ACTIONS
   Present, never competing. Collapses to one primary action
   that expands on demand.
--------------------------------------------------------- */
.dock{
  position:fixed;
  right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));
  z-index:var(--z-dock);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:var(--sp-8);
}

/* La subsol docul se retrage. Acolo sunt oricum telefonul, adresa si toate
   canalele, deci butonul plutitor nu mai adauga nimic, iar la 1280 si 1440
   latime cadea fix peste randul cu „Termeni" si „Confidentialitate", care
   ramanea inaccesibil. Se traduce, nu se ascunde cu display: asa revine lin
   la derulare in sus si nu produce salt de asezare. */
.dock{
  transition:transform var(--t-comp) var(--e-out),opacity var(--t-ui) var(--e-out);
}
.dock.is-tucked{
  transform:translateY(calc(100% + max(16px,env(safe-area-inset-bottom))));
  opacity:0;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .dock{transition:none}
}

.dock-stack{
  display:flex;
  flex-direction:column;
  gap:var(--sp-8);
  align-items:flex-end;
}
.dock-chan{
  display:flex;
  align-items:center;
  gap:var(--sp-8);
  padding:0;
  border-radius:var(--r-pill);
  color:#fff;
  opacity:0;
  transform:translateY(10px) scale(.9);
  pointer-events:none;
  transition:
    opacity var(--t-ui) var(--e-out),
    transform var(--t-ui) var(--e-spring);
  transition-delay:calc(var(--i,0) * 45ms);
}
.dock.is-open .dock-chan{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.dock-chan i{
  display:grid;place-items:center;
  width:46px;aspect-ratio:1;
  border-radius:50%;
  font-size:var(--fs-h4);
  box-shadow:var(--sh-md);
  transition:transform var(--t-micro) var(--e-out);
}
.dock-chan:hover i{transform:scale(1.08)}
.dock-chan .lbl{
  order:-1;
  padding:var(--sp-8) var(--sp-12);
  border-radius:var(--r-pill);
  background:var(--surface);
  color:var(--text);
  font-size:var(--fs-micro);
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:0;
  transform:translateX(6px);
  transition:opacity var(--t-micro) var(--e-out),transform var(--t-micro) var(--e-out);
}
.dock-chan:hover .lbl{opacity:1;transform:none}
.dock-chan--wa i{background:#25d366}
.dock-chan--vb i{background:#7360f2}
.dock-chan--tg i{background:#2aabee}

.dock-toggle{
  display:grid;
  place-items:center;
  width:58px;aspect-ratio:1;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-size:var(--fs-h4);
  box-shadow:0 14px 30px -12px rgba(234,107,8,.75);
  transition:transform var(--t-ui) var(--e-spring),background-color var(--t-ui) var(--e-out);
}
.dock-toggle:hover{background:var(--accent-press);transform:scale(1.05)}
.dock-toggle .close-ic{display:none}
.dock.is-open .dock-toggle{transform:rotate(90deg)}
.dock.is-open .dock-toggle .open-ic{display:none}
.dock.is-open .dock-toggle .close-ic{display:block}

.to-top{
  display:grid;place-items:center;
  width:44px;aspect-ratio:1;
  border-radius:50%;
  background:var(--surface-raised);
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:var(--sh-sm);
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity var(--t-ui) var(--e-out),transform var(--t-ui) var(--e-out),color var(--t-micro) var(--e-out);
}
.to-top.is-on{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{color:var(--accent-text)}

/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */
.site-footer{
  background:var(--surface);
  color:var(--text-muted);
  padding-top:clamp(64px,7vw,76px);
  border-top:1px solid var(--border);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:clamp(24px,4vw,64px);
  padding-bottom:clamp(40px,5vw,64px);
}
/* Logoul e o pânză de 390x150 în care simbolul ocupă 92px pe înălțime.
   Regula asta nu e sub `.brand`, deci nu moștenea `width:auto`: imaginea își
   lua lățimea din atributul HTML (220px) și ieșea întinsă de 2,2 ori.
   În pânză, sloganul are 17px din 150: la 38px cât era logoul aici, ajungea la
   4,3px și se citea ca o pată. De la 64px sloganul are 7,2px și se citește, iar
   logoul e dimensionat pentru subsol, nu doar micșorat din antet.
   Zona de protecție de dedesubt e cel puțin cât simbolul: la 64px de pânză
   simbolul are 39,3px, deci 40px e minimul care respectă regula. */
.footer-brand img{height:64px;width:auto;margin-bottom:var(--sp-40)}
.footer-brand p{max-width:40ch;font-size:var(--fs-body)}
.footer-social{display:flex;gap:var(--sp-8);margin-top:var(--sp-24)}
.footer-social a{
  display:grid;place-items:center;
  width:42px;aspect-ratio:1;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  color:var(--text-muted);
  transition:color var(--t-ui) var(--e-out),border-color var(--t-ui) var(--e-out),transform var(--t-ui) var(--e-out);
}
.footer-social a:hover{color:var(--accent-text);border-color:var(--accent-line);transform:translateY(-2px)}

.site-footer h4{
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:var(--sp-16);
}
.footer-list li + li{margin-top:var(--sp-12)}
.footer-list a,.footer-list li{font-size:var(--fs-body);color:var(--text-muted)}
/* 24px inaltime minima si pe desktop: e pragul WCAG 2.5.8 pentru tinta de
   pointer. Pe telefon creste la 44, in responsive.css. */
.footer-list a{
  display:inline-flex;align-items:center;min-height:24px;
  transition:color var(--t-micro) var(--e-out);
}
.footer-list a:hover{color:var(--accent-text)}
.footer-list--contact li{
  display:flex;
  gap:var(--sp-12);
  align-items:flex-start;
}
.footer-list--contact .ic{color:var(--accent-text);margin-top:3px;width:16px;height:16px;flex:0 0 auto}
.footer-cta{margin-top:var(--sp-24)}

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-16) var(--sp-24);
  align-items:center;
  justify-content:space-between;
  padding-block:var(--sp-24);
  border-top:1px solid var(--border);
  font-size:var(--fs-mono);
  letter-spacing:.08em;
  color:var(--text-faint);
}
.footer-bottom a{transition:color var(--t-micro) var(--e-out)}
.footer-bottom a:hover{color:var(--accent-text)}
.footer-bottom-links{display:flex;flex-wrap:wrap;gap:var(--sp-8) var(--sp-24);align-items:center}
.footer-bottom-links a{display:inline-flex;align-items:center;min-height:44px}

/* ---------------------------------------------------------
   CHROME BOOT
   The pill and the mobile bar arrive at 150ms, with the brand.
   The pill is centred with a transform, so it fades rather
   than translating — otherwise the centring would break.
--------------------------------------------------------- */
/* Bara si bara mobila intra dupa ce pagina e gata, la 150 ms, odata cu marca.
   `opacity:0` la pornire NU e o scapare: e chiar animatia. Pusa pe 1, bara
   apare brusc, inaintea restului, si intrarea orchestrata a paginii isi pierde
   primul pas.

   Pastila e centrata cu `translateX(-50%)`, deci se aduce prin opacitate si o
   coborare de cativa pixeli — nu prin translatie pe orizontala, care ar rupe
   centrarea.

   `<noscript>` din <head> le pune inapoi pe 1: fara JavaScript nu vine nimeni
   sa adauge `.is-booted`, si bara ar ramane invizibila pentru totdeauna. */
.nav,.mbar{opacity:0}
.nav{transform:translateX(-50%) translateY(-8px)}
.mbar{transform:translateY(-8px)}
.is-booted .nav,
.is-booted .mbar{
  opacity:1;
  transition:opacity var(--t-comp) var(--e-out) 150ms,
             transform var(--t-comp) var(--e-out) 150ms;
}
.is-booted .nav{transform:translateX(-50%)}
.is-booted .mbar{transform:none}
.is-booted .nav.is-hidden{opacity:0}

/* Cine a cerut mai putina miscare primeste bara direct la locul ei. */
@media (prefers-reduced-motion:reduce){
  .nav,.mbar{transform:none}
  .nav{transform:translateX(-50%)}
  .is-booted .nav,.is-booted .mbar{transition:opacity var(--t-ui) linear}
}


/* =========================================================
   CONSTRUCTOR — intrarea catre /constructor/
   Nu e o sectiune a paginii, ci o unealta separata, asa ca linkul se
   distinge de restul navigatiei fara sa devina un al doilea buton primar:
   accent pe text, contur discret, aceeasi pastila.
   ========================================================= */
/* MARKET — singura actiune plina din antet.
   Ierarhia e in trei trepte, nu in trei butoane la fel: Market umplut,
   constructorul conturat, restul linkuri simple. Umplut inseamna „incepe de
   aici", si nu poate fi decat unul. */
.nav-item--market .nav-link{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-8);
  background:var(--accent-strong);
  color:var(--on-accent);
  font-weight:600;
  border-radius:var(--r-pill);
}
.nav-item--market .nav-link .ic{width:18px;height:18px}
.nav-item--market .nav-link:hover,
.nav-item--market .nav-link:focus-visible{background:var(--accent-press);color:var(--on-accent)}
/* Indicatorul care aluneca trece pe sub pastila; textul alb ramane alb. */
.nav-item--market.is-active .nav-link{color:var(--on-accent)}

.nav-item--cta .nav-link{
  color:var(--accent-text);
  font-weight:600;
  box-shadow:inset 0 0 0 1px var(--accent-line);
}
.nav-item--cta .nav-link:hover,
.nav-item--cta .nav-link:focus-visible{ color:var(--accent-press) }
/* indicatorul care aluneca e portocaliu: peste el, textul trebuie sa ramana lizibil */
.nav-item--cta.is-active .nav-link{ color:var(--accent-text) }

/* meniul mobil: ultimul rand, marcat ca actiune */
.drawer-nav .drawer-cta a{ color:var(--accent-text) }
.drawer-nav .drawer-cta a span{ color:var(--accent-deep) }
.drawer-nav .drawer-cta{
  margin-top:var(--sp-8);
  border-top:1px solid var(--border);
}

/* ---------------------------------------------------------
   COMUTATORUL DE TEMA (F1)
   Doua iconite in acelasi loc; se vede cea a temei in care ai INTRA
   daca apesi, nu cea in care esti. Soarele in tema inchisa, luna in
   cea deschisa. Butonul isi spune starea prin aria-pressed.
--------------------------------------------------------- */
.theme-toggle{
  display:grid;place-items:center;
  width:44px;height:44px;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  background:none;
  color:var(--text-muted);
  cursor:pointer;
  transition:color var(--t-ui) var(--e-out),border-color var(--t-ui) var(--e-out),background-color var(--t-ui) var(--e-out),transform var(--t-micro) var(--e-out);
}
.theme-toggle:hover{color:var(--text);border-color:var(--border)}
.theme-toggle svg{width:19px;height:19px;display:block}
/* in tema deschisa se ofera trecerea la cea inchisa: luna */
.theme-toggle .ic-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:block}

.nav-item--theme{display:flex;align-items:center;padding-left:var(--sp-4)}
.nav-item--theme::before{
  content:"";width:1px;height:20px;
  background:var(--border);margin-right:var(--sp-8);
}
.drawer-tools .theme-toggle{border-color:var(--border)}


/* =========================================================
   BARA, PE CONTEXT

   Pagina de start si magazinul nu pun aceleasi intrebari. Pe site omul cauta
   „ce faceti si cat costa" — deci sectiunile paginii, fara cos, fiindca acolo
   nu se cumpara nimic. In magazin are deja ceva de facut: cos, cont,
   configurator, si un drum inapoi la site.
   ========================================================= */

/* Cosul, ca intrare de meniu: pictograma, cuvant, si numarul doar cand exista
   ceva in el. */
.nav-link--cart{display:inline-flex;align-items:center;gap:var(--sp-8)}
.nav-link--cart .ic{width:16px;height:16px}
.nav-link--cart .cart-count{
  min-width:18px;height:18px;
  display:grid;place-items:center;
  padding-inline:5px;
  border-radius:var(--r-pill);
  background:var(--accent-strong);
  color:var(--on-accent);
  font-family:var(--f-mono);
  font-size:10px;
  line-height:1;
}

/* In magazin, accentul se muta de pe „Configureaza" pe „Inapoi la site".
   Motivul e ce are omul de facut acolo: e deja in fluxul de cumparare, iar
   singura intrare care il scoate din el e drumul inapoi. Configuratorul ramane
   o optiune ca oricare alta — pe pagina de start, unde chiar e actiunea
   principala, isi pastreaza accentul. */
.nav--shop .nav-item--cta .nav-link{
  /* Conturul lui „Configureaza" vine dintr-un `box-shadow` inset, nu dintr-o
     bordura — deci se stinge de acolo, nu prin `border-color`. */
  box-shadow:none;
  color:var(--text-muted);
  font-weight:inherit;
}
.nav--shop .nav-item--cta .nav-link:hover,
.nav--shop .nav-item--cta .nav-link:focus-visible{color:var(--text)}

.nav-item--inapoi .nav-link{
  display:inline-flex;align-items:center;gap:var(--sp-8);
  color:var(--accent-text);
  border:1px solid var(--accent-line);
  border-radius:var(--r-pill);
  font-weight:600;
}
.nav-item--inapoi .nav-link .ic{width:16px;height:16px}
.nav-item--inapoi .nav-link:hover{
  border-color:var(--accent-strong);
  background:var(--accent-strong);
  color:var(--on-accent);
}

/* Market, in bara de pe telefon. Pe ecran mare bara de sus il are scris, pe
   telefon bara aia nu exista — iar drumul era burger, sertar, cauta in lista.
   Trei apasari pentru magazinul cu 1.968 de produse. */
/* „Cum lucram" nu e un serviciu, e o explicatie: se desparte de lista,
   altfel pare al saptelea lucru pe care il vindem. */
.nav-drop__sep{
  margin-top:var(--sp-4);
  padding-top:var(--sp-4);
  border-top:1px solid var(--border);
}

.market-link{display:none}
@media (max-width:1024px){
  .market-link{display:inline-flex}
}

/* Pastila are nume, nu doar firma. O pictograma de magazin singura e o
   ghicitoare — se citeste „cos", „cumparaturi" sau nimic, dupa cine se uita.
   Inaltimea ramane 44px, cat ceruta pentru atingere. */
.pill-link{
  align-items:center;
  gap:var(--sp-8);
  height:44px;
  padding-inline:var(--sp-12);
  border-radius:var(--r-sm);
  border:1px solid var(--accent-line);
  background:var(--surface-raised);
  color:var(--accent-text);
  font-family:var(--f-head);
  font-weight:600;
  font-size:var(--fs-body);
}
.pill-link .icon{width:18px;height:18px}
.pill-link:hover,
.pill-link:focus-visible{border-color:var(--accent-strong)}
/* Sub 380px numele iese, ca sa incapa si telefonul si burgerul. Eticheta
   ramane pentru cititoarele de ecran prin `aria-label`-ul legaturii. */
@media (max-width:380px){
  .pill-link span{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  .pill-link{width:44px;padding-inline:0;justify-content:center}
}

/* Randul catre Market de sub butoanele din hero. Nu e un al treilea buton:
   doua indemnuri pline se bat intre ele, trei nu mai inseamna niciunul. */
.hero-market{
  margin:var(--sp-16) 0 0;
  font-size:var(--fs-small);
  color:var(--on-dark-muted, var(--text-muted));
}
.hero-market a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}
.hero-market a:hover{color:var(--accent-text)}