/* Fonturi servite local (Anton, Italianno, Work Sans — licenta OFL), fara cereri catre Google. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/google/anton-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/google/anton-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Italianno';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/google/italianno-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Italianno';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/google/italianno-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/google/work-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/google/work-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Locke';src:url('../fonts/locke-regular.otf') format('opentype');font-style:normal;font-weight:400;font-display:swap;}

:root{
  /* Sistem tipografic: Georgia aduce vocea editoriala, Work Sans tine
     navigatia, specificatiile si formularele precise si usor de scanat.
     Italianno e un accent de scriere de mana, folosit punctual (ex.
     filigranul din spatele galeriei Lifestyle), nu ca voce principala. */
  --editorial: Georgia, 'Times New Roman', serif;
  --utility: 'Work Sans', Arial, sans-serif;
  --script: 'Italianno', 'Brush Script MT', cursive;
  --product-name: var(--editorial);
  --cream: #FEFFFD;
  --cream-soft: #E1E2DB;
  --olive: #5A5627;
  --olive-deep: #3F3C1B;
  --charcoal: #110F0A;
  --charcoal-soft: #1A1811;
  --ember: #D9772E;
  --ember-bright: #F0913F;
  --ember-deep: #A8541E;
  --line: rgba(17,15,10,0.12);
  --line-dark: rgba(254,255,253,0.14);

  --display: var(--editorial);
  --body: var(--utility);
  /* Aliasuri pastrate pentru componentele existente; numele lor istorice
     nu descriau fonturile reale (Georgia nu e condensed, Work Sans nu e mono). */
  --condensed: var(--editorial);
  --mono: var(--utility);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--body);
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video{ max-width:100%; display:block; }

/* #smooth-wrapper/#smooth-content sunt injectate de GSAP ScrollSmoother
   (assets/js/scroll-fx.js) ca sa mute tot continutul printr-un singur
   transform pe scroll — id-urile nu exista in HTML static, deci regula de
   mai jos nu face nimic daca GSAP nu porneste. Fara backface-visibility,
   rotunjirea sub-pixel a acelui transform lasa cate un gol de <1px intre
   sectiuni adiacente, care clipeste cu fundalul crem al body-ului dedesubt —
   vizibil mai ales intre sectiunile cu fundal inchis (Craft/CTA/Footer),
   unde crem-ul iese brusc in evidenta pe negru. */
#smooth-wrapper, #smooth-content{
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }

/* Vizibil doar la focus (tastatura) — lasa un utilizator care navigheaza cu Tab
   sa sara peste header/nav si sa ajunga direct la continut. */
.skip-link{
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--charcoal);
  color: var(--cream);
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  z-index: 300;
  transition: top .2s ease;
}
.skip-link:focus{ top: 16px; }

/* Continut real pentru screen readere/SEO, fara sa afecteze layout-ul vizual. */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

::selection{ background: var(--ember); color: var(--cream); }

/* Fara asta, orice element care nu e input de formular (linkuri, butoane,
   carduri) devine invizibil la navigare cu tastatura — Tab nu arata unde esti. */
:focus-visible{
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation: none !important; transition: none !important; }
}

/* Fade-in la scroll (GSAP, assets/js/scroll-fx.js). Ascuns doar cand JS-ul
   chiar a pornit (clasa .js-reveal e adaugata dintr-un script inline in
   <head>) — fara JS sau cu motion redus, continutul ramane vizibil normal. */
.js-reveal [data-reveal]{
  opacity: 0;
  transform: translateY(24px);
}
@media (prefers-reduced-motion: reduce){
  .js-reveal [data-reveal]{ opacity: 1; transform: none; }
}

/* ---------- Header ---------- */
/* Pagini fara hero intunecat sub header (legal, comanda, despre-noi):
   navul mostenit e cream, deci devine cream-pe-cream. */
.site-header.on-light .nav a,
.site-header.on-light .cart-link{ color: var(--charcoal); }
.site-header.on-light .lang-btn{ color: var(--charcoal); border-color: rgba(17,15,10,0.3); }
.site-header.on-light .lang-btn:hover:not(.active){ border-color: rgba(17,15,10,0.6); }
.site-header.on-light .nav-toggle{ color: var(--charcoal); }
/* Pagina curenta ramane ember chiar si pe on-light — altfel regula de mai
   sus (mai specifica decat .nav a.is-active) o suprascrie cu charcoal. */
.site-header.on-light .nav a.is-active{ color: var(--ember); }

.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 100;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 28px 5vw;
  background: none;
  transition: transform .4s ease, opacity .3s ease, background .3s ease;
}
.site-header.hidden{
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}

/* Zonele noi de desktop — ascunse implicit (mobil). Selectoare prefixate
   cu .site-header ca sa castige mereu in fata regulilor de baza .nav/
   .header-lang (aceeasi specificitate ar insemna ca cea scrisa mai jos in
   fisier castiga prin ordine, indiferent de media query — deja s-a
   intamplat de doua ori). */
.site-header .header-lang-left,
.site-header .header-nav-left,
.site-header .header-nav-right,
.site-header .header-cart-side,
.site-header .brand-center{ display: none; }

/* Sigla sta intr-un "medalion" circular care iese deasupra/dedesubtul
   barei subtiri — singurul loc unde header-ul e mai mare. Ramane un item
   normal de grid (nu absolute) ca sa cada exact in coloana lui, lipit de
   linkuri — marirea vizuala vine dintr-un transform:scale(), care nu
   participa la layout/dimensionarea randului, deci nu umfla toata bara. */
.brand-center{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(140% 90% at 100% 0%, rgba(240,145,63,0.22) 0%, rgba(240,145,63,0) 45%),
    rgba(17,15,10,0.6);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 10px 26px rgba(17,15,10,0.28), inset 0 1px 0 rgba(235,227,210,0.1);
  transform: scale(1.9);
  transition: transform .2s ease;
}
.brand-center:hover{ transform: scale(2); }
.brand-mark-center{ height: 21px; width: auto; display: block; }

/* Pe desktop, header-ul devine o bara minimalista, plutitoare — aceeasi
   textura "liquid glass" (blur + glow ember) ca meniul burger de pe mobil.
   Latimea bara urmeaza acelasi gutter de 5vw folosit pe restul continutului
   de pe toate paginile (nu un container ingust, artificial). Grid cu doua
   coloane elastice (1fr) langa sigla din centru — impinge limba/cosul spre
   capete si tine linkurile lipite de sigla, in imediata ei vecinatate. */
@media (min-width: 1025px){
  .site-header{
    top: 20px;
    left: 5vw;
    right: 5vw;
    width: auto;
    display: grid;
    grid-template-columns: auto 1fr auto auto auto 1fr auto;
    align-items: center;
    column-gap: 20px;
    padding: 9px 26px;
    border-radius: 18px;
    background:
      radial-gradient(140% 90% at 100% 0%, rgba(240,145,63,0.16) 0%, rgba(240,145,63,0) 45%),
      rgba(17,15,10,0.55);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 14px 40px rgba(17,15,10,0.22), inset 0 1px 0 rgba(235,227,210,0.08);
  }
  .site-header.hidden{ transform: translateY(-140%); }

  /* Bara are mereu fundal intunecat acum — textul ramane crem, indiferent
     de pagina (on-light nu mai are sens cand header-ul nu mai e transparent). */
  .site-header.on-light .nav a,
  .site-header.on-light .cart-link,
  .site-header.on-light .nav-toggle{ color: var(--cream); }
  .site-header.on-light .lang-btn{ color: var(--cream); border-color: rgba(235,227,210,0.4); }
  .site-header.on-light .lang-btn:hover:not(.active){ border-color: rgba(235,227,210,0.8); }
  .site-header.on-light .nav a.is-active{ color: var(--ember); }

  /* Randul mobil (brand cu wordmark + hamburger/nav/cos/limba din drawer)
     dispare pe desktop — inlocuit de cele cinci zone de mai jos. */
  .site-header > .brand,
  .site-header > .header-right{ display: none; }

  .site-header .header-lang-left,
  .site-header .header-nav-left,
  .site-header .header-nav-right,
  .site-header .header-cart-side,
  .site-header .brand-center{ display: flex; }

  .site-header .header-lang-left{ grid-column: 1; gap: 6px; }
  .site-header .header-nav-left{ grid-column: 3; gap: 20px; }
  .site-header .brand-center{ grid-column: 4; }
  .site-header .header-nav-right{ grid-column: 5; gap: 20px; }
  .site-header .header-cart-side{ grid-column: 7; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  @media (min-width: 1025px){
    .site-header{ background-color: rgba(17,15,10,0.92); }
    .brand-center{ background-color: rgba(17,15,10,0.92); }
  }
}
.header-right{
  display:flex;
  align-items:center;
  gap: 32px;
}
.brand{
  display:flex;
  align-items:center;
}
.brand-link{
  display:flex;
  align-items:center;
  transition: opacity .2s ease;
}
.brand-link:hover{ opacity: 0.75; }
.brand-lockup{
  height: 80px;
  width: auto;
  display: block;
}
/* Varianta orizontala (flacara + text pe un rand): la 80px inaltime ar iesi
   ~280px lata si ar inghesui navigatia, deci sta mai jos ca inaltime. */
.brand-lockup-inline{ height: 52px; }
.nav{
  display:flex;
  gap: 36px;
  font-size: 14px;
  letter-spacing: 0.03em;
  font-weight: 500;
}
.nav a{
  position: relative;
  color: var(--cream);
  transition: color .35s ease;
  padding: 4px 0;
}
.nav a:hover,
.site-header.on-light .nav a:hover{ color: var(--ember); }
.nav a.is-active{ color: var(--ember); }
.header-cta{
  background: var(--ember);
  color: var(--cream-soft);
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: none;
  transition: transform .2s ease, background .2s ease;
}
.header-cta:hover{ background: var(--ember-bright); transform: translateY(-1px); }

.nav-toggle{
  display:none;
  width: 44px; height: 44px;
  align-items:center; justify-content:center;
  border: none;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
}
.nav-toggle-bars{
  position:relative;
  width: 22px; height: 16px;
}
.nav-toggle-bars span{
  position:absolute; left:0; right:0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.nav-toggle-bars span:nth-child(1){ top:0; }
.nav-toggle-bars span:nth-child(2){ top:7px; }
.nav-toggle-bars span:nth-child(3){ top:14px; }

/* Ascuns implicit la orice latime — devine vizibil doar cand .nav are
   clasa .nav-open (vezi media query), asta se intampla exclusiv pe mobil. */
.mobile-nav-close{
  display:none;
  position:absolute;
  top: 6px; right: 5vw;
  width: 44px; height: 44px;
  align-items:center; justify-content:center;
  border: none;
  background: transparent;
  color: var(--cream);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

/* Ascunsa implicit la orice latime — devine vizibila doar in interiorul
   meniului mobil deschis (vezi media query de mai jos). Fara asta, div-ul
   apare ca rand normal in fluxul orizontal al .nav de pe desktop. */
.nav-lang-mobile{ display:none; }
/* Acelasi tratament: iconitele social exista doar in meniul mobil deschis,
   niciodata in randul orizontal de desktop. */
.nav-social{ display:none; }

/* Pana la 1024px (telefon + tableta, portret sau landscape) — nu doar telefon,
   randul de nav orizontal nu mai are loc confortabil incepand de pe tableta. */
@media (max-width: 1024px){
  /* Un singur header mobil pe tot site-ul: bara compacta, inchisa la
     culoare, ramane lizibila atat peste imagini cat si peste pagini albe. */
  .site-header{
    padding: 16px 5vw;
    background: rgba(17,15,10,.66);
    border-bottom: 1px solid rgba(254,255,253,.08);
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
  }
  .site-header.on-light .nav-toggle,
  .site-header.on-light .cart-link{ color: var(--cream); }

  /* backdrop-filter pe parintele unui element position:fixed poate schimba
     reperul acestuia din viewport in header. Il oprim numai cat drawer-ul
     este deschis, astfel meniul acopera mereu intregul ecran. */
  .site-header.menu-open{
    background: transparent;
    border-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Randul din header are acum si hamburger-ul; stramtoram spatiile ca
     butonul "Aprinde-o" sa nu se mai rupa pe doua linii. */
  .header-right{ gap: 10px; }
  .header-cta{ padding: 10px 14px; font-size: 12px; white-space: nowrap; }
  .brand-lockup-inline{ height: 34px; }

  .nav-toggle{ display:flex; }

  /* Pe mobil, .nav e ascuns implicit (nu prin [hidden] — evitam sa ne
     luptam cu stilul implicit al browserului pt. atribute hidden) si devine
     un panou fullscreen doar cand JS adauga .nav-open. Fade simplu (nu slide
     de sus in jos) — se simte mai premium si mai putin "notificare". */
  .nav{ display:none; }
  #siteNav.nav-open{
    display:flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 150;
    /* Fundal suficient de dens incat meniul sa fie identic si lizibil
       indiferent de imaginea sau culoarea paginii aflate dedesubt. */
    background:
      radial-gradient(140% 90% at 100% 0%, rgba(240,145,63,0.16) 0%, rgba(240,145,63,0) 45%),
      rgba(17,15,10,0.96);
    backdrop-filter: blur(12px) saturate(125%);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
    box-shadow: inset 0 1px 0 rgba(235,227,210,0.08);
    padding: 112px 8vw 32px;
    gap: 2px;
    animation: nav-fade-in .35s ease;
    counter-reset: navlink;
  }
  /* Browsere fara suport pentru backdrop-filter — revenim la fundal opac,
     ca textul sa ramana lizibil oricum. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    #siteNav.nav-open{ background-color: var(--charcoal); }
  }
  @keyframes nav-fade-in{
    from{ opacity: 0; transform: scale(0.99); }
    to{ opacity: 1; transform: scale(1); }
  }
  .nav.nav-open .mobile-nav-close{
    display:flex;
    top: 24px;
    width: 44px; height: 44px;
    border: 1px solid rgba(235,227,210,0.3);
    border-radius: 999px;
    font-size: 20px;
    transition: border-color .2s ease, color .2s ease;
  }
  .nav.nav-open .mobile-nav-close:hover{ border-color: var(--ember-bright); color: var(--ember-bright); }
  /* La deschiderea prin tap/click, focusul este mutat corect in drawer pentru
     accesibilitate, dar nu afisam un inel care pare o selectie accidentala.
     Deschiderea de la tastatura pastreaza inelul :focus-visible. */
  .nav.nav-open-pointer .mobile-nav-close:focus{ outline: none; }
  /* Selectorul de copil direct (> a) — nu si legaturile din interiorul
     .nav-social/.nav-lang-mobile, care nu trebuie numerotate ca "linkuri". */
  .nav.nav-open > a{
    display:flex;
    align-items: baseline;
    gap: 16px;
    padding: 18px 0;
    font-family: var(--display);
    font-size: 30px;
    letter-spacing: -0.01em;
    border-bottom: 1px solid var(--line-dark);
    counter-increment: navlink;
  }
  .nav.nav-open > a::before{
    content: counter(navlink, decimal-leading-zero);
    font-family: var(--body);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--ember-bright);
  }
  .nav.nav-open > a.is-active{ color: var(--ember-bright); }

  /* Fundalul e mereu charcoal, indiferent de pagina — dar pe paginile cu
     header "on-light" (produs, etc.) linkurile si lang-btn devin charcoal
     prin regula de mai sus, deci text charcoal pe fundal charcoal. ID-ul
     #siteNav castiga specificitatea si repune culorile corecte. */
  #siteNav.nav-open > a{ color: var(--cream); }
  #siteNav.nav-open > a.is-active{ color: var(--ember-bright); }
  #siteNav.nav-open .lang-btn{ color: var(--cream); border-color: rgba(235,227,210,0.4); }
  #siteNav.nav-open .lang-btn.active{ color: var(--charcoal); }

  /* Iconite social — randul de deasupra selectorului de limba, separat
     printr-o linie proprie; impinse la baza panoului cu margin-top:auto. */
  .nav.nav-open .nav-social{
    display:flex;
    gap: 12px;
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid var(--line-dark);
  }
  .nav-social a{
    display:flex;
    align-items:center;
    justify-content:center;
    width: 44px; height: 44px;
    border: 1px solid rgba(235,227,210,0.3);
    border-radius: 999px;
    color: var(--cream);
    transition: border-color .2s ease, color .2s ease;
  }
  /* Aceeasi problema de specificitate ca la linkurile principale: pe
     header-ele "on-light", ".site-header.on-light .nav a" (id-free, dar 3
     clase) ar face iconitele charcoal-pe-charcoal. ID-ul #siteNav rezolva. */
  #siteNav.nav-open .nav-social a{ color: var(--cream); }
  #siteNav.nav-open .nav-social a:hover{ color: var(--ember-bright); }
  .nav-social a:hover{ border-color: var(--ember-bright); color: var(--ember-bright); }
  .nav-social svg{ width: 17px; height: 17px; }

  /* Selectorul RO/EN se muta din bara de header (unde inghesuia langa cos si
     hamburger) in meniul mobil, ca ultim rand — tipar comun pt. drawere de
     navigare mobile. */
  .header-right > .header-lang{ display:none; }
  .nav.nav-open .nav-lang-mobile{
    display:flex;
    align-items:center;
    justify-content: space-between;
    margin-top: 18px;
  }
  .nav-lang-mobile-logo{
    height: 30px;
    width: auto;
    display: block;
    opacity: 0.9;
  }
  .nav-lang-mobile .header-lang{ gap: 10px; }
}

/* ---------- Hero slider (homepage) ---------- */
.hero{
  position: relative;
  /* Aproape un ecran complet, cu o muchie discreta din urmatorul card
     pastrata sub fold. vh ramane fallback pentru browserele fara svh. */
  height: 96vh;
  height: 96svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--charcoal);
  z-index: 1;
}
@media (max-width: 700px){
  .hero{ min-height: 620px; }
}

/* Fallback nativ atunci cand ScrollTrigger nu este disponibil. Clasa este
   adaugata doar de home-card-stack.js, pentru a nu combina sticky cu
   continutul transformat de ScrollSmoother. */
.hero.is-css-card-stack{ position: sticky; top: 0; }
.hero-slide-media{
  position: absolute;
  inset: 0;
}
.hero-slide-media img, .hero-slide-media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.hero-scrim{
  position:absolute;
  inset:0;
  z-index: 2;
  pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(28,27,24,0.35) 0%, rgba(28,27,24,0) 22%, rgba(28,27,24,0) 72%, rgba(28,27,24,0.5) 100%);
}
.hero-scroll-cue{
  position: absolute;
  left: 5vw;
  bottom: 38px;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  gap: 13px;
  color: var(--ember-bright);
  pointer-events: none;
}
.hero-scroll-track{
  position: relative;
  display: block;
  width: 1px;
  height: 58px;
  overflow: hidden;
  background: rgba(240,145,63,.28);
}
.hero-scroll-track span{
  position: absolute;
  top: 0;
  left: -1px;
  width: 3px;
  height: 16px;
  border-radius: 999px;
  background: var(--ember-bright);
  box-shadow: 0 0 12px rgba(240,145,63,.7);
  animation: hero-scroll-ember 1.9s cubic-bezier(.45,0,.25,1) infinite;
}
.hero-scroll-label{
  padding-bottom: 1px;
  font-family: var(--body);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(17,15,10,.8);
}
@keyframes hero-scroll-ember{
  0%{ transform: translateY(-18px); opacity: 0; }
  18%{ opacity: 1; }
  72%{ opacity: 1; }
  100%{ transform: translateY(60px); opacity: 0; }
}
.hero-copy{
  position:absolute;
  top: 190px;
  left: 6vw;
  z-index: 3;
  width: min(400px, 42vw);
  background: rgba(28,27,24,0.5);
  backdrop-filter: blur(6px);
  padding: 24px 26px;
  border-radius: 14px;
}

.hero-copy-title{
  font-family: var(--condensed);
  font-style: normal;
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0;
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1;
  color: var(--cream);
  margin: 0 0 16px;
}
.hero-copy-desc{
  font-family: var(--condensed);
  font-size: 15.5px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: rgba(235,227,210,0.85);
  text-align: justify;
  margin: 0;
}
@media (max-width: 700px){
  .hero-copy{ top: 150px; width: 74vw; }
  .hero-copy-title{ font-size: 34px; }
}
/* Wordmark-ul si butonul stau in aceeasi coloana, aliniate la dreapta, ca
   marginea din dreapta a textului sa cada exact peste marginea butonului. */
.hero-cta-stack{
  position:absolute;
  bottom: 40px;
  right: 5vw;
  z-index: 4;
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 28px;
}
.hero-wordmark{
  height: min(46vh, 440px);
  width: auto;
  display:block;
}
/* Descriere scurta, discreta, intre wordmark si linkul spre colectie —
   nu trebuie sa concureze cu wordmark-ul, doar sa-l contextualizeze. */
.hero-tagline{
  margin: 0;
  max-width: min(320px, 44vw);
  font-family: var(--condensed);
  font-style: normal;
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.45;
  letter-spacing: 0.005em;
  text-align: right;
  color: rgba(235,227,210,0.88);
  text-shadow: 0 1px 10px rgba(20,18,14,0.45);
}
/* Acelasi tratament ca wordmark-ul de deasupra: Anton, majuscule, compact. */
.hero-view-link{
  display:inline-flex;
  align-items: baseline;
  gap: 0.16em;
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--cream);
}

/* Umplere de jos in sus, ca un pahar. Fundalul e de doua ori mai inalt decat
   textul — jumatatea de sus crem, cea de jos ember — si e decupat pe forma
   literelor. La hover fundalul aluneca in sus, deci granita dintre culori
   urca de la baza literei spre varf.
   Sagetii i se aplica separat: are transform propriu (animatia), deci se
   deseneaza independent si nu ar prinde decuparea de pe parinte.
   @supports tine textul vizibil daca browserul nu stie background-clip:text. */
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .hero-view-link > .lang-ro,
  .hero-view-link > .lang-en,
  .hero-view-arrow{
    background-image: linear-gradient(to top, var(--ember) 50%, var(--cream) 50%);
    background-size: 100% 200%;
    background-position: 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Iesirea din hover: lunga, se scurge lin. */
    transition: background-position 620ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .hero-view-link:hover > .lang-ro,
  .hero-view-link:hover > .lang-en,
  .hero-view-link:hover .hero-view-arrow{
    background-position: 0 100%;
    /* Intrarea: scurta, dar cat sa se vada umplerea. Regula sta pe :hover ca
       sa se aplice doar la intrare — la iesire ramane tranzitia lunga. */
    transition: background-position 240ms cubic-bezier(0.55, 0, 1, 0.45);
  }
}
.hero-view-arrow{
  display:inline-block;
  animation: hero-arrow-nudge 1.8s ease-in-out infinite;
}
.hero-view-link:hover .hero-view-arrow{ animation-duration: .9s; }
@keyframes hero-arrow-nudge{
  0%, 100%{ transform: translateX(0); }
  50%{ transform: translateX(.22em); }
}
@media (max-width: 700px){
  .hero-scroll-cue{
    left: 18px;
    bottom: 28px;
    gap: 10px;
  }
  .hero-scroll-track{ height: 46px; }
  .hero-scroll-label{ font-size: 8px; }
  /* Wordmark-ul si butonul raman aliniate la dreapta, ca pe desktop —
     doar mai mici, ca sa nu atinga caseta de text de sus in hero-ul de
     64vh de pe telefon. */
  .hero-cta-stack{ gap: 20px; }
  .hero-wordmark{ height: min(24vh, 180px); }
  .hero-tagline{ max-width: 60vw; font-size: 13px; }
  .hero-view-link{ font-size: 30px; }
}

/* ---------- Intro ---------- */
.intro{
  padding: 140px 5vw 120px;
  max-width: 980px;
  margin: 0 auto;
}
.intro .eyebrow{
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--ember-deep);
  text-transform: uppercase;
  margin-bottom: 22px;
  display:block;
}
.intro h2{
  font-family: var(--condensed);
  font-weight: 400;
  font-size: clamp(30px, 4.35vw, 48px);
  line-height: 1.2;
  letter-spacing: -0.018em;
  text-wrap: balance;
  color: var(--charcoal);
  margin: 0;
  max-width: 22ch;
}
.intro h2 em{
  font-style: normal;
  color: var(--olive);
  border-bottom: 2px solid var(--ember);
}

/* ---------- Collection ---------- */
.collection{
  background: var(--charcoal);
  color: var(--cream);
  padding: 120px 5vw;
}
.section-head{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 64px;
  gap: 24px;
  flex-wrap: wrap;
}
.section-head h3{
  font-family: var(--display);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.015em;
  font-size: clamp(32px, 5vw, 58px);
  margin:0;
  line-height: 1.06;
}
.section-head p{
  max-width: 360px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(235,227,210,0.65);
  margin:0;
}
/* Colectia ca acordeon: un singur rand de panouri inalte, din care unul e
   deschis. Cel deschis e la culoare si ia partea leului din latime; restul stau
   inguste si scoase din culoare, cu numele aratat la hover. */
.showcase{
  display: flex;
  gap: 10px;
  height: clamp(420px, 58vh, 620px);
}
.showcase-panel{
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  background: var(--charcoal-soft);
  transition: flex-grow .6s cubic-bezier(.22, 1, .36, 1);
}
.showcase-panel.is-active{ flex-grow: 4.2; }

.showcase-img{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focal-x, 50%) 74%;
  filter: grayscale(1) brightness(0.62);
  /* Sursele sunt panoramice, cu numele produsului scris mare in fundal. Intr-o
     fasie ingusta "cover" scaleaza dupa inaltime, deci intra in cadru toata
     inaltimea pozei — adica litera, nu masa. Zoom-ul ancorat de marginea de jos
     lasa in fasie doar treimea de jos, unde sta produsul. */
  transform: scale(2.1);
  transform-origin: 50% 100%;
  transition: filter .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
/* Cat de mult trebuie impinsa incadrarea lateral ca fasia sa cada pe masa, nu pe
   fundal gol — difera de la o poza la alta. Ca variabila, nu ca object-position
   intreg, ca sa poata fi schimbata doar componenta verticala pe mobil. In foaia
   de stil, nu inline: CSP-ul nu are 'unsafe-inline' la style-src, deci
   atributele style sunt ignorate de browser. */
.showcase-panel[data-product="embera"]{ --focal-x: 40%; }
.showcase-panel[data-product="aether"]{ --focal-x: 60%; }
.showcase-panel[data-product="flavo"] { --focal-x: 44%; }
.showcase-panel[data-product="fera"]  { --focal-x: 46%; }
.showcase-panel[data-product="ignite"]{ --focal-x: 50%; }
.showcase-panel:hover .showcase-img{ filter: grayscale(0.5) brightness(0.82); }
/* Panoul deschis e lat: acolo "cover" scaleaza dupa latime, incadrarea intreaga
   incape si zoom-ul nu mai e necesar. */
.showcase-panel.is-active .showcase-img{
  filter: none;
  transform: none;
}

/* Butonul acopera tot panoul — se apasa oriunde pe imagine. Sta sub legenda,
   ca sa nu inghita apasarea pe "Vezi produsul". */
.showcase-toggle{
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.showcase-panel.is-active .showcase-toggle{ cursor: default; }
/* Butonul umple panoul, iar panoul taie ce iese din el: cu offset-ul pozitiv din
   site.css, conturul de focus s-ar desena exact in afara si nu s-ar vedea deloc.
   Il aducem inauntru. */
.showcase-toggle:focus-visible{ outline-offset: -5px; }

.showcase-caption{
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  /* Padding mare sus: acolo se stinge degradeul, deasupra textului. */
  padding: 70px 24px 26px;
  /* Doar CTA-ul isi ia click-urile inapoi; restul legendei le lasa sa treaca
     spre butonul de dedesubt, ca sa ramana tot panoul apasabil. */
  pointer-events: none;
  /* Jumatatea de jos a fotografiilor e crem deschis (Fera, Aether, Flavo), nu
     inchisa ca la Embera. Ca textul crem sa treaca de 4.5:1 si acolo, valul
     trebuie sa ajunga la ~0.8 opacitate inca de la primul rand de text. */
  background: linear-gradient(to top,
    rgba(17,15,10,0.94) 0%,
    rgba(17,15,10,0.82) 70%,
    rgba(17,15,10,0.45) 88%,
    rgba(17,15,10,0) 100%);
}
.showcase-name{
  margin: 0;
  font-family: var(--product-name);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(26px, 2.4vw, 36px);
  letter-spacing: 0.01em;
  color: var(--cream);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.showcase-panel:hover .showcase-name,
.showcase-panel:focus-within .showcase-name,
.showcase-panel.is-active .showcase-name{ opacity: 1; transform: none; }

.showcase-specs{
  display: flex;
  gap: 16px;
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(235,227,210,0.8);
}
.showcase-line{
  max-width: 36ch;
  margin: 0;
  font-family: var(--condensed);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.5;
  color: rgba(235,227,210,0.85);
}
.showcase-cta{
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--ember);
  color: var(--charcoal);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background .2s ease, transform .2s ease;
}
.showcase-cta:hover{ background: var(--ember-bright); transform: translateY(-2px); }
.showcase-cta-arrow{ transition: transform .2s ease; }
.showcase-cta:hover .showcase-cta-arrow{ transform: translateX(3px); }

/* Detaliile apar doar pe panoul deschis, iar cat sunt ascunse nu trebuie sa
   ocupe spatiu: altfel numele aratat la hover ar pluti la mijlocul panoului, nu
   in stanga jos. Trucul 0fr -> 1fr animeaza exact pana la inaltimea continutului,
   fara sa ghicim un max-height. */
.showcase-detail{
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .55s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.showcase-detail-inner{
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  /* Scoate linkul din ordinea de Tab cat panoul e inchis. */
  visibility: hidden;
}
.showcase-panel.is-active .showcase-detail{
  grid-template-rows: 1fr;
  opacity: 1;
}
.showcase-panel.is-active .showcase-detail-inner{ visibility: visible; }

/* Fara hover (touch), numele nu ar aparea niciodata pe panourile inchise. */
@media (hover: none){
  .showcase-name{ opacity: 1; transform: none; }
}

/* Sub 900px randul devine coloana: cinci fasii verticale pe latimea unui
   telefon ar fi prea inguste ca sa se mai vada ceva in ele. */
@media (max-width: 900px){
  .showcase{
    flex-direction: column;
    height: auto;
    gap: 8px;
  }
  .showcase-panel{
    flex: 0 0 auto;
    height: 120px;
    transition: height .5s cubic-bezier(.22, 1, .36, 1);
  }
  .showcase-panel.is-active{ flex-grow: 0; height: 380px; }
  .showcase-caption{ padding: 56px 20px 20px; }
  /* Sursele au numele produsului scris urias in fundal (vezi comentariul de pe
     desktop). Pe coloana, panoul deschis e aproape patrat: "cover" taie doar pe
     orizontala si lasa toata inaltimea vizibila — adica literele intregi, nu
     doar produsul. Pastram zoom-ul din desktop (ancorat jos) si pe mobil, ca sa
     ramana in cadru doar banda de jos, unde sta masa. */
  .showcase-panel:not(.is-active) .showcase-img{ object-position: var(--focal-x, 50%) 100%; }
  /* Regula .is-active de mai sus (in afara acestui media query) reseteaza
     transform-ul la "none" pentru desktop — aici il refacem explicit, altfel
     ramane fara zoom si pe mobil. */
  .showcase-panel.is-active .showcase-img{
    object-position: var(--focal-x, 50%) 100%;
    transform: scale(2.1);
    transform-origin: 50% 100%;
  }
}

/* ---------- Craft / process: cadru editorial stabil ---------- */
.craft{ padding: clamp(64px, 8vw, 110px) 0 0; background: var(--charcoal); }
.craft .section-head{
  display: grid;
  grid-template-columns: .55fr 1.45fr .8fr;
  align-items: end;
  gap: clamp(24px, 4vw, 72px);
  padding: 0 5vw;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.craft .home-section-kicker{ align-self: start; color: rgba(235,227,210,.65); }
.craft-head-title{
  margin: 0;
  color: var(--cream);
  font-family: var(--display);
  font-size: clamp(48px, 7.2vw, 106px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.craft .craft-head-desc{ margin: 0 0 5px; max-width: 42ch; color: rgba(235,227,210,.68); font-size: 15px; line-height: 1.65; }

.craft-pin{
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  box-sizing: border-box;
  /* Cadru cinematic compact, nu un ecran plin — nu necesita pinning/scroll
     controlat, doar o inaltime maxima rezonabila pe desktop. */
  height: min(78vh, 760px);
  min-height: 460px;
  padding: clamp(24px, 3vh, 40px) 5vw clamp(40px, 6vw, 84px);
  border-top: 1px solid rgba(235,227,210,.16);
}
.craft-pin-toolbar{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 24px; }
.craft-pin-steps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
}
.craft-pin-step{
  position: relative;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 11px 0 0;
  overflow: hidden;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-top: 1px solid rgba(235,227,210,.22);
  background: transparent;
  color: rgba(235,227,210,.38);
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .35s ease, border-color .35s ease;
}
.craft-pin-step.is-active{ border-color: var(--ember); color: var(--ember); }
.craft-pin-step:hover{ color: var(--cream); border-color: rgba(235,227,210,.7); }
.craft-pin-step:focus-visible,
.craft-autoplay-toggle:focus-visible{ outline: 2px solid var(--ember); outline-offset: 4px; }
.craft-autoplay-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 92px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(235,227,210,.28);
  background: transparent;
  color: rgba(235,227,210,.78);
  font: 600 10px/1 var(--body);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.craft-autoplay-icon{ width: 7px; height: 11px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.craft-autoplay-toggle:hover{ border-color: var(--ember); color: var(--cream); }
.craft-autoplay-toggle[aria-pressed="true"] .craft-autoplay-icon{ width: 0; height: 0; border: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; }
.craft-pin-row{
  display: grid;
  /* ~60% video / 40% text pe desktop. */
  grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid rgba(235,227,210,.16);
  border-bottom: 1px solid rgba(235,227,210,.16);
}
.craft-side{ position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.craft-pin-media{ position: absolute; inset: 0; overflow: hidden; background: #090908; isolation: isolate; }
.craft-pin-media::after{ content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, transparent 62%, rgba(9,8,7,.32)); }
.craft-pin-video{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #090908;
  opacity: 1; transform: scale(1.001); filter: blur(0) saturate(1);
}
.craft-pin-copy{ position: absolute; inset: 0; display: flex; align-items: center; padding: clamp(34px, 5vw, 78px); }
.craft-pin-panels{ position: relative; display: grid; width: 100%; }
.craft-pin-panel{
  grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden;
  transform: translate3d(0,24px,0); filter: blur(3px); clip-path: inset(0 0 18% 0);
  transition: opacity .5s ease, transform .72s cubic-bezier(.22,1,.36,1), filter .55s ease, clip-path .72s cubic-bezier(.22,1,.36,1), visibility 0s linear .72s;
}
.craft-pin-panel.is-active{ opacity: 1; visibility: visible; transform: translate3d(0,0,0); filter: blur(0); clip-path: inset(0); transition-delay: .16s; }
.craft-pin-panel:last-child{ margin-bottom: 0; }
.craft-pin-num{ display: block; margin: 0 0 24px; font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: .15em; color: var(--ember); }
.craft-pin-title{ display: block; margin: 0 0 20px; font-family: var(--product-name); font-size: clamp(34px, 3.4vw, 54px); font-style: normal; font-weight: 500; line-height: 1.02; letter-spacing: -.025em; color: var(--cream); }
.craft-pin-detail{ display: block; max-width: 38ch; font-size: 15px; line-height: 1.7; color: rgba(254,255,253,.67); }

@media (max-width: 860px){
  .craft{ padding: 56px 0 64px; }
  .craft .section-head{ grid-template-columns: 1fr; gap: 18px; padding: 0 18px; margin-bottom: 32px; }
  .craft .home-section-kicker{ margin-bottom: 12px; }
  .craft-head-title{ font-size: clamp(44px, 14vw, 68px); }
  .craft .craft-head-desc{ max-width: 36ch; font-size: 14px; }
  .craft-pin{ display: grid; height: auto; min-height: 0; gap: 18px; padding: 0 18px; border-top: 0; }
  .craft-pin-toolbar{ gap: 12px; }
  .craft-pin-steps{ gap: 6px; }
  .craft-autoplay-toggle{ position: relative; min-width: 44px; width: 44px; padding: 0; }
  .craft-autoplay-toggle .lang-ro, .craft-autoplay-toggle .lang-en{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .craft-pin-row{ display: grid; grid-template-columns: 1fr; overflow: visible; border: 0; }
  .craft-side-left{ display: block; aspect-ratio: 4 / 3; }
  .craft-side-right{ overflow: visible; border: 0; }
  .craft-pin-copy{ position: relative; inset: auto; display: block; padding: 0; }
  .craft-pin-panel{ padding-bottom: 32px; border-bottom: 1px solid rgba(235,227,210,.2); }
  .craft-pin-num{ margin-bottom: 12px; }
  .craft-pin-title{ margin-bottom: 14px; font-size: clamp(31px, 9vw, 42px); }
  .craft-pin-detail{ font-size: 14px; }
}

/* ---------- CTA strap ---------- */
.cta-strap{
  background: var(--ember);
  color: var(--charcoal);
  padding: 100px 5vw;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-strap h2{
  font-family: var(--display);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.025em;
  font-size: clamp(36px, 6vw, 86px);
  line-height: 1.04;
  text-wrap: balance;
  margin: 0 0 34px;
}
.cta-buttons{
  display:flex;
  gap: 18px;
  justify-content:center;
  flex-wrap: wrap;
}
.btn{
  padding: 16px 34px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1.5px solid var(--charcoal);
  transition: background .2s ease, color .2s ease, transform .2s ease;
  display: inline-block;
}
.btn-solid{ background: var(--charcoal); color: var(--cream); }
.btn-solid:hover{ transform: translateY(-2px); background: var(--olive-deep); }
.btn-outline{ background: transparent; color: var(--charcoal); }
.btn-outline:hover{ transform: translateY(-2px); background: rgba(28,27,24,0.08); }

/* ---------- CTA strap: capitol final editorial (doar homepage) ----------
   Scoped cu .home-cta ca sa nu atinga .cta-strap de pe despre-noi.html,
   care ramane pe varianta ember originala. Fundal charcoal
   identic cu Craft si Footer — cele trei sectiuni curg ca un singur pasaj
   intunecat, fara nicio linie intre ele (o bordura de 1px pe fundalul
   transformat de GSAP ScrollSmoother randa instabil/tremurat in timpul
   scroll-ului — acelasi motiv pentru care nici Footer-ul nu are una).
   Selector compus (.cta-strap.home-cta), nu doar .home-cta — .cta-strap
   are aceeasi specificitate (0,1,0), asa ca fara asta izolarea depinde doar
   de ordinea din fisier, nu e garantata de cascada. */
.cta-strap.home-cta{
  background: var(--charcoal);
  color: var(--cream);
  /* ScrollSmoother muta intregul continut pe valori fractionare de pixel.
     Suprapunerea de 2px acopera fanta de rasterizare dintre Craft, CTA si
     Footer fara sa adauge o bordura sau un strat animat separat. */
  margin-block: -2px;
  padding: clamp(90px, 11vw, 160px) 5vw clamp(100px, 12vw, 170px);
}
.home-cta-inner{ max-width: 860px; margin: 0 auto; }
.home-cta .home-cta-title{
  margin: 0 0 26px;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.03em;
  font-size: clamp(38px, 6vw, 80px);
  line-height: 1.04;
  text-wrap: balance;
  color: var(--cream);
}
.home-cta .home-cta-desc{
  max-width: 50ch;
  margin: 0 auto clamp(40px, 5vw, 56px);
  font-family: var(--condensed);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: rgba(254,255,253,.68);
}
.home-cta .cta-buttons{ justify-content: center; }
/* Ember doar ca accent la hover — suprafata implicita e crem, nu portocaliu. */
.home-cta .btn-solid{ background: var(--cream); color: var(--charcoal); border-color: var(--cream); }
.home-cta .btn-solid:hover{ background: var(--ember-bright); border-color: var(--ember-bright); color: var(--charcoal); }
.home-cta .btn-outline{ background: transparent; color: var(--cream); border-color: rgba(254,255,253,.38); }
.home-cta .btn-outline:hover{ border-color: var(--ember); background: rgba(217,119,46,.12); color: var(--cream); }

@media (max-width: 860px){
  .home-cta{ padding: 70px 20px 84px; }
  .home-cta .home-cta-title{ font-size: clamp(32px, 9vw, 48px); }
  .home-cta .home-cta-desc{ font-size: 15px; }
}

/* ---------- Footer ---------- */
.site-footer{
  background: var(--charcoal);
  color: rgba(235,227,210,0.55);
  padding: 60px 5vw 34px;
  font-size: 13px;
}
.footer-top{
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-dark);
  margin-bottom: 26px;
}
.footer-brand{
  font-family: var(--condensed);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--cream);
  font-size: 17px;
}
.footer-brand-logo{
  height: 34px;
  width: auto;
  display: block;
}
.footer-links{
  display:flex;
  gap: 40px;
  flex-wrap: wrap;
}
.footer-links div{ display:flex; flex-direction:column; gap:10px; }
.footer-links a:hover{ color: var(--cream); }
/* Text simplu, neinteractiv — pt. randuri fara link real (ex. retele
   sociale fara URL confirmat). Aceeasi pozitie in coloana, fara cursor/hover
   de link, ca sa nu para o promisiune stricata. */
.footer-static{ cursor: default; }
.footer-legal{
  display:flex;
  gap: 20px;
  padding-bottom: 20px;
}
.footer-legal a:hover{ color: var(--cream); }
.footer-bottom{
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 700px){
  .site-footer{
    position: relative;
    padding: 64px 20px 26px;
    font-size: 13px;
  }
  .site-footer::before{
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    width: 72px;
    height: 2px;
    background: var(--ember);
  }
  .footer-top{
    display: block;
    padding-bottom: 34px;
    margin-bottom: 0;
  }
  .footer-brand{
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    margin-bottom: 42px;
  }
  .footer-brand-logo{ height: 42px; }
  .footer-links{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    width: 100%;
  }
  .footer-links div{
    min-width: 0;
    gap: 0;
    padding: 20px 0;
    border-top: 1px solid var(--line-dark);
  }
  .footer-links div:first-child{
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    padding-top: 22px;
  }
  .footer-links div:last-child{
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
  .footer-links a,
  .footer-static{
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-links a{ color: rgba(254,255,253,.82); }
  .footer-links div:first-child a{
    font-family: var(--display);
    font-size: 18px;
    font-style: normal;
    color: var(--cream);
  }
  .footer-static{ color: rgba(254,255,253,.42); }
  .footer-legal{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
    border-top: 1px solid var(--line-dark);
    border-bottom: 1px solid var(--line-dark);
  }
  .footer-legal a{
    display: grid;
    place-items: center;
    min-height: 52px;
    color: rgba(254,255,253,.7);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
  }
  .footer-legal a + a{ border-left: 1px solid var(--line-dark); }
  .footer-bottom{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    padding-top: 34px;
  }
  .footer-bottom > span:last-child{
    order: -1;
    max-width: 15ch;
    font-family: var(--display);
    font-size: clamp(22px, 7vw, 28px);
    font-style: normal;
    line-height: 1.22;
    color: var(--cream);
  }
  .footer-bottom > span:first-child{
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(254,255,253,.42);
  }
}

/* ============================================================
   PRODUCT DETAIL PAGES
   ============================================================ */

.product-hero{
  position: relative;
  height: 72vh;
  min-height: 460px;
  overflow: hidden;
  background: var(--charcoal);
}
.product-hero-media{ position:absolute; inset:0; }
.product-hero-media img, .product-hero-media video{
  width:100%; height:100%; object-fit:cover; display:block;
}
.product-hero-scrim{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(28,27,24,0.5) 0%, rgba(28,27,24,0.05) 40%, rgba(28,27,24,0.05) 70%, rgba(28,27,24,0.65) 100%);
}
.product-hero-content{
  position:absolute;
  bottom: 56px;
  left: 5vw;
  right: 5vw;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.product-eyebrow{
  font-family: var(--condensed);
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--ember-bright);
  font-weight: 600;
  margin: 0 0 10px;
}
.product-eyebrow::before{ content:'('; }
.product-eyebrow::after{ content:')'; }
.product-hero-title{
  font-family: var(--display);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.025em;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.95;
  color: var(--cream);
  margin: 0;
  text-shadow: 0 6px 40px rgba(0,0,0,0.4);
}
.product-hero-dims{
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 400;
  color: var(--cream);
  background: rgba(28,27,24,0.5);
  backdrop-filter: blur(6px);
  padding: 10px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

.header-lang{
  display:flex;
  gap: 6px;
}

.cart-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Cream implicit (nu inherit) — pe index.html, header-ul n-are .on-light,
     deci fara asta mostenea culoarea inchisa a body-ului si devenea
     invizibil pe bara "liquid glass" intunecata. */
  color: var(--cream);
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.cart-link svg{ width: 100%; height: 100%; }
.cart-badge{
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ember);
  color: var(--charcoal);
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* Iconita de metoda de plata (Card/Ramburs/Transfer bancar) — reutilizata in
   buy-box (colectie.html) si in sumarul de comanda (comanda.html). */
.buy-payment-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--body);
  font-size: 12px;
  color: rgba(17,15,10,0.6);
}
.buy-payment-item svg{
  width: 22px;
  height: 15px;
  fill: none;
  stroke: rgba(17,15,10,0.45);
  stroke-width: 1.3;
}
.buy-payment-item svg.icon-fill{
  fill: rgba(17,15,10,0.45);
  stroke: none;
}
.lang-btn{
  border: 1px solid rgba(235,227,210,0.4);
  background: transparent;
  color: var(--cream);
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 6px 13px;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.lang-btn:hover:not(.active){ border-color: rgba(235,227,210,0.8); }
.lang-btn.active{
  background: var(--ember);
  color: var(--charcoal);
  border-color: var(--ember);
  font-weight: 600;
}

/* Zona de atins sub 44x44px pe mobil (WCAG 2.5.5) — marim padding-ul,
   nu fontul, ca sa pastram aceeasi dimensiune vizuala a etichetei. */
@media (max-width: 1024px){
  .lang-btn{
    min-height: 44px;
    min-width: 44px;
    padding: 6px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

[hidden]{ display:none !important; }

.product-body{
  max-width: 780px;
  margin: 0 auto;
  padding: 80px 5vw 40px;
}
.product-body p{
  font-size: 17px;
  line-height: 1.8;
  color: rgba(28,27,24,0.82);
  margin: 0 0 24px;
}
.product-delivery{
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--ember);
  letter-spacing: 0.02em;
  margin: 0 0 40px;
}
.product-tagline{
  font-family: var(--condensed);
  font-weight: 500;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--olive);
  line-height: 1.4;
  margin: 40px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.product-story{
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 5vw 80px;
}
.product-story h3{
  font-family: var(--condensed);
  font-weight: 600;
  font-size: 22px;
  color: var(--charcoal);
  margin: 0 0 24px;
}

/* ---- Descriere (stanga) + Standard PureFlame (dreapta), recenzii dedesubt ----
   Standard PureFlame nu se comuta pe produs (continutul e identic peste tot),
   deci sta o singura data si se intinde pe toate randurile din dreapta
   descrierii + recenziei curente (grid-row:1/-1). */
.story-grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px 56px;
  align-items: start;
}
.story-desc{ grid-column: 1; }
.story-review{
  grid-column: 1;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.story-standard{
  grid-column: 2;
  grid-row: 1 / -1;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px;
}
.story-standard-intro{
  font-family: var(--body);
  font-size: 13px;
  color: rgba(28,27,24,0.55);
  margin: -8px 0 20px;
}
.standard-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.standard-list li{
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.standard-list svg{
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--ember);
  margin-top: 1px;
}
.standard-list span{
  font-size: 14px;
  line-height: 1.6;
  color: rgba(28,27,24,0.78);
}
@media (max-width: 1024px){
  .story-grid{ grid-template-columns: 1fr; gap: 0; }
  .story-desc, .story-review{ grid-column: 1; }
  .story-standard{ grid-column: 1; grid-row: auto; margin-top: 40px; }
}
.feature-list{
  list-style: none;
  margin:0; padding:0;
  display: grid;
  gap: 14px;
}
.feature-list li{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(28,27,24,0.78);
}
.feature-list li::before{
  content:'';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ember);
  margin-top: 8px;
  flex-shrink: 0;
}

/* ============================================================
   BUY BOX (produs)
   ============================================================ */
.buy-box{
  max-width: 780px;
  margin: 0 auto;
  padding: 44px 5vw 40px;
  border-bottom: 1px solid var(--line);
}
.buy-box-inner{
  display:flex;
  align-items:center;
  gap: 24px;
  flex-wrap: wrap;
}
.buy-price-value{
  font-family: var(--condensed);
  font-weight: 600;
  font-size: 30px;
  color: var(--charcoal);
  margin-right: auto;
}
.buy-colors{
  display:flex;
  gap: 8px;
}
.color-swatch{
  padding: 9px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--charcoal);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.color-swatch:hover{ border-color: rgba(28,27,24,0.35); }
.color-swatch.active{
  background: var(--charcoal);
  color: var(--cream);
  border-color: var(--charcoal);
}
.buy-cta{ border: none; }
.buy-qty{
  display:flex;
  align-items:center;
  gap: 2px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}
.qty-btn{
  width: 40px; height: 40px;
  border: none;
  background: transparent;
  color: var(--charcoal);
  font-size: 18px;
  line-height: 1;
  border-radius: 50%;
  transition: background .2s ease;
}
.qty-btn:hover{ background: rgba(28,27,24,0.08); }
.qty-btn:disabled{ opacity: 0.35; cursor: not-allowed; background: transparent; }
.qty-value{
  min-width: 22px;
  text-align: center;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 400;
}
.buy-bulk-note{
  margin: 16px 0 0;
  font-size: 13px;
  color: rgba(28,27,24,0.6);
}
.buy-bulk-note a{ color: var(--ember); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.buy-cancelled-note{
  margin: 18px 0 0;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--ember);
}
@media (max-width: 560px){
  .buy-price-value{ width:100%; margin-right:0; }
}

/* ============================================================
   ORDER MODAL
   ============================================================ */
.order-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(28,27,24,0.6);
  backdrop-filter: blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
}
.order-modal-overlay[hidden]{ display:none; }
.order-modal{
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--cream-soft);
  border-radius: 14px;
  padding: 40px 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}
.order-modal h3{
  font-family: var(--condensed);
  font-size: 24px;
  font-weight: 600;
  color: var(--charcoal);
  margin: 0 0 8px;
}
.order-modal-summary{
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  color: rgba(28,27,24,0.65);
  margin: 0 0 24px;
}
.order-modal-close{
  position: absolute;
  top: 12px; right: 12px;
  width: 40px; height: 40px;
  border: none;
  background: transparent;
  color: var(--charcoal);
  font-size: 22px;
  line-height: 1;
  border-radius: 50%;
  transition: background .2s ease;
}
.order-modal-close:hover{ background: rgba(28,27,24,0.08); }
#orderForm,
#contactForm,
#checkoutForm{
  display:flex;
  flex-direction: column;
  gap: 16px;
}
#orderForm label,
#contactForm label,
#newsletterForm label,
#checkoutForm label{
  display:flex;
  flex-direction:column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--charcoal);
}
.form-row{
  display:flex;
  gap: 12px;
}
.form-row label{ flex: 1; min-width: 0; }
.form-row .form-row-narrow{ flex: 0 0 88px; }
.form-row .form-row-wide{ flex: 1.6; }
#orderForm input:not([type="checkbox"]):not([type="radio"]),
#orderForm textarea,
#contactForm input:not([type="checkbox"]):not([type="radio"]),
#contactForm textarea,
#checkoutForm input:not([type="checkbox"]):not([type="radio"]),
#checkoutForm textarea{
  font-family: var(--body);
  font-size: 15px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  background: var(--cream);
  color: var(--charcoal);
  resize: vertical;
}
#orderForm input:focus:not([type="checkbox"]):not([type="radio"]),
#orderForm textarea:focus,
#contactForm input:focus:not([type="checkbox"]):not([type="radio"]),
#contactForm textarea:focus,
#checkoutForm input:focus:not([type="checkbox"]):not([type="radio"]),
#checkoutForm textarea:focus{
  outline: none;
  border-color: var(--ember);
}
.order-form-error{
  margin:0;
  font-size: 13px;
  color: #b3261e;
}
.contact-form-success{
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--olive);
  text-align: center;
  padding: 12px 0;
}
.order-submit{
  border:none;
  width:100%;
  text-align:center;
  margin-top: 4px;
}
.order-submit:disabled{
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* ============================================================
   CONFIRMATION PAGE
   ============================================================ */
body.page-confirm{
  display:flex;
  flex-direction:column;
  min-height: 100vh;
}
/* ScrollSmoother muta continutul in #smooth-content (div obisnuit) si body-ul flex
   nu mai ajunge la sectiune/footer — aceeasi regula trebuie pusa pe invelis. */
body.page-confirm #smooth-content{
  display:flex;
  flex-direction:column;
  min-height: 100vh;
}
.confirm-section{
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 160px 5vw 100px;
  text-align:center;
}
.confirm-box{
  max-width: 560px;
}
.confirm-eyebrow{
  font-family: var(--condensed);
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--ember);
  font-weight: 600;
  margin: 0 0 14px;
}
.confirm-box h1,
.confirm-box h2{
  font-family: var(--display);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.015em;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.05;
  color: var(--charcoal);
  margin: 0 0 20px;
}
.confirm-copy{
  font-size: 16px;
  line-height: 1.7;
  color: rgba(28,27,24,0.75);
  margin: 0 0 32px;
}
.confirm-summary{
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 0 0 32px;
  text-align: left;
}
.confirm-row{
  display:flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  font-size: 14px;
  color: var(--charcoal);
  border-bottom: 1px solid var(--line);
}
.confirm-row:last-child{ border-bottom:none; }
.confirm-row span:first-child{ color: rgba(28,27,24,0.55); }

/* ============================================================
   LEGAL PAGES (privacy policy)
   ============================================================ */
.legal-page{
  max-width: 780px;
  margin: 0 auto;
  padding: 160px 5vw 100px;
}
.legal-page h1{
  font-family: var(--display);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.015em;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  margin: 0 0 8px;
  color: var(--charcoal);
}
.legal-updated{
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  color: rgba(28,27,24,0.5);
  margin: 0 0 48px;
}
.legal-page h2{
  font-family: var(--condensed);
  font-size: 22px;
  font-weight: 600;
  color: var(--charcoal);
  margin: 40px 0 16px;
}
.legal-page p{
  font-size: 16px;
  line-height: 1.8;
  color: rgba(28,27,24,0.8);
  margin: 0 0 20px;
}
.legal-page .feature-list{ margin: 0 0 20px; }

/* ---------- Consent checkbox (order/contact forms) ---------- */
.consent-field{
  display:flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: rgba(28,27,24,0.75) !important;
}
.consent-field input[type="checkbox"]{
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--ember);
}
.consent-field a{ color: var(--ember); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   NEWSLETTER POPUP
   ============================================================ */
.newsletter-modal{
  max-width: 540px;
  text-align: center;
  padding: 52px 44px 44px;
}
/* Ambele clase sunt pe acelasi element (.order-modal.newsletter-modal), deci
   folosim specificitate explicita ca sa nu depindem de ordinea din fisier. */
.order-modal.newsletter-modal h3{
  font-family: var(--display);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.015em;
  font-size: clamp(26px, 4.5vw, 40px);
  line-height: 1.05;
  margin: 0 0 16px;
}
.newsletter-copy{
  font-size: 14px;
  line-height: 1.7;
  color: rgba(28,27,24,0.65);
  max-width: 400px;
  margin: 0 auto 28px;
}
#newsletterForm{
  display:flex;
  flex-direction: column;
  gap: 14px;
}
/* Camp si buton pe acelasi rand pe desktop, stivuite pe ecrane inguste. */
.newsletter-inline{
  display:flex;
  gap: 10px;
}
@media (max-width: 520px){
  .newsletter-inline{ flex-direction: column; }
}
#newsletterForm input[type="email"]{
  flex: 1;
  min-width: 0;
  font-family: var(--body);
  font-size: 15px;
  padding: 15px 16px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  background: var(--cream);
  color: var(--charcoal);
}
#newsletterForm input[type="email"]:focus{
  outline: none;
  border-color: var(--ember);
}
.newsletter-submit{
  border: none;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 15px 28px;
  border-radius: 8px;
}
.newsletter-submit:disabled{ opacity: 0.6; cursor: not-allowed; transform: none !important; }
.newsletter-consent{
  justify-content: center;
  font-size: 12px !important;
  line-height: 1.5;
  margin-top: 2px;
}
.newsletter-note{
  font-size: 12px;
  line-height: 1.6;
  color: rgba(28,27,24,0.5);
  margin: 0;
}
.newsletter-success{ padding: 6px 0 2px; }
.newsletter-success p{
  font-size: 15px;
  line-height: 1.7;
  color: rgba(28,27,24,0.78);
  margin: 0 0 14px;
}
.newsletter-success .newsletter-note{ margin: 0; }

/* ---- Meniuri din header: colectie (hover) si cos (click) ----
   Panourile nu plutesc sub bara: pornesc din ea. Acelasi fundal, aceeasi
   sticla, colturi de sus drepte si doua racordari concave la imbinare, ca
   sa se citeasca drept o singura masa care curge in jos. Miscarea o face
   GSAP (assets/js/site.js); fara el, raman tranzitiile de mai jos. */
.hdr-menu{ position: relative; display: inline-flex; align-items: center; }
.hdr-panel{
  --hdr-skin: rgba(38,36,32,0.94);
  position: absolute;
  top: 100%;   /* recalculat in JS fata de marginea barei */
  z-index: 120;
  padding: 16px;
  background: var(--hdr-skin);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.36);
  color: #F5EEE6;
  visibility: hidden;
  transform-origin: 50% 0;
  /* Decuparea, nu opacitatea, ascunde panoul: la opacity 0 backdrop-filter
     continua sa picteze fundalul neclar si ramane o fantoma gri sub bara. */
  clip-path: inset(0 0 100% 0);
}
/* Racordarea: doua pene concave chiar deasupra panoului, care il fac sa
   se evazeze in bara in loc sa se lipeasca de ea in unghi drept. */
.hdr-panel::before{
  content: '';
  position: absolute;
  bottom: 100%;
  left: -14px;
  right: -14px;
  height: 14px;
  pointer-events: none;
  background:
    radial-gradient(14px at 0 0, rgba(0,0,0,0) 14px, var(--hdr-skin) 0) 0 100% / 14px 14px no-repeat,
    radial-gradient(14px at 100% 0, rgba(0,0,0,0) 14px, var(--hdr-skin) 0) 100% 100% / 14px 14px no-repeat;
}
.hdr-panel.is-open{ visibility: visible; clip-path: inset(0 0 0 0); }
html:not(.has-gsap) .hdr-panel{
  transition: clip-path .34s cubic-bezier(.22,1,.36,1), visibility 0s .34s;
}
html:not(.has-gsap) .hdr-panel.is-open{ transition-delay: 0s; }
@media (prefers-reduced-motion: reduce){ .hdr-panel{ transition: none !important; } }

/* --- colectie: lista de text, fara miniaturi --- */
.hdr-panel-collection{ left: 50%; width: 244px; margin-left: -122px; padding: 10px; }
.hdr-prod{ display: block; padding: 10px 12px; border-radius: 10px; color: #F5EEE6; text-decoration: none; }
.hdr-prod:hover, .hdr-prod:focus-visible{ background: rgba(255,255,255,0.09); outline: none; }
.hdr-prod b{ display: block; font: 600 13px/1.25 var(--body); letter-spacing: .01em; }
.hdr-prod span{ display: block; margin-top: 2px; font: 400 11px/1.35 var(--body); opacity: .58; }
.hdr-panel-all{ display: block; margin-top: 6px; padding: 12px 10px 6px; text-align: center; border-top: 1px solid rgba(255,255,255,0.1); font: 600 10px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #F5EEE6; text-decoration: none; }
.hdr-panel-all:hover, .hdr-panel-all:focus-visible{ color: var(--ember-bright); outline: none; }

/* --- cos --- */
.hdr-panel-cart{ right: 0; width: 372px; transform-origin: 100% 0; }
.hdr-cart-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; font: 600 10px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.hdr-cart-head span{ opacity: .55; letter-spacing: .04em; text-transform: none; font-weight: 400; font-size: 11px; }
.hdr-cart-list{ display: grid; gap: 12px; max-height: 46vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.hdr-cart-item{ display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: 11px; align-items: center; }
.hdr-cart-item img{ width: 52px; height: 40px; object-fit: cover; border-radius: 6px; background: rgba(255,255,255,0.06); }
.hdr-cart-item b{ display: block; font: 600 12px/1.3 var(--body); }
.hdr-cart-item small{ display: block; font: 400 11px/1.4 var(--body); opacity: .58; }
.hdr-cart-price{ font: 600 12px/1 var(--body); white-space: nowrap; }
.hdr-cart-qty{ display: inline-flex; align-items: center; gap: 2px; margin-top: 5px; }
.hdr-cart-qty button{ width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.22); background: none; color: #F5EEE6; border-radius: 5px; font-size: 13px; line-height: 1; cursor: pointer; }
.hdr-cart-qty button:hover:not(:disabled){ border-color: rgba(255,255,255,0.5); }
.hdr-cart-qty button:disabled{ opacity: .3; cursor: default; }
.hdr-cart-qty output{ min-width: 20px; text-align: center; font: 600 12px/1 var(--body); }
.hdr-cart-remove{ margin-left: 8px; background: none; border: 0; color: #F5EEE6; opacity: .5; cursor: pointer; font: 400 11px/1 var(--body); text-decoration: underline; text-underline-offset: 3px; }
.hdr-cart-remove:hover{ opacity: 1; }
.hdr-cart-foot{ margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,0.12); }
.hdr-cart-total{ display: flex; justify-content: space-between; align-items: baseline; font: 600 13px/1 var(--body); margin-bottom: 12px; }
.hdr-cart-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hdr-cart-actions a{ display: grid; place-items: center; min-height: 42px; border-radius: 9px; font: 600 11px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; text-align: center; padding: 0 10px; }
.hdr-cart-ghost{ border: 1px solid rgba(255,255,255,0.28); color: #F5EEE6; }
.hdr-cart-ghost:hover{ border-color: rgba(255,255,255,0.6); }
.hdr-cart-solid{ background: var(--ember); color: #fff; }
.hdr-cart-solid:hover{ background: var(--ember-bright); }
.hdr-cart-empty{ margin: 2px 0 4px; font: 400 12px/1.6 var(--body); opacity: .68; }
.hdr-cart-close{display:none}

@media (max-width:1024px){
  .site-header.mobile-cart-open.hidden{transform:none!important;opacity:1!important}
  body>.hdr-panel-cart{position:fixed;left:12px;right:12px;width:auto;z-index:1200;padding:20px;border-radius:16px;border:1px solid rgba(255,255,255,.14);max-height:calc(100dvh - var(--cart-top,80px) - 12px);overflow-y:auto;overscroll-behavior:contain;transform-origin:50% 0}
  body>.hdr-panel-cart::before{display:none}
  .hdr-cart-close{position:absolute;top:16px;right:16px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:0;background:none;color:#f5eee6;cursor:pointer}
  .hdr-cart-close>.lang-ro,.hdr-cart-close>.lang-en{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .hdr-cart-close>span[aria-hidden]{font-size:24px}
  .hdr-cart-head{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:8px 14px;min-height:44px;margin:0 44px 24px 0;font-size:20px;text-transform:none;letter-spacing:0}
  .hdr-cart-head>.lang-ro,.hdr-cart-head>.lang-en{font:500 20px/1.3 var(--body);color:#f5eee6}
  .hdr-cart-head span,.hdr-cart-item small,.hdr-cart-empty{opacity:1;color:#d6d1c8}
  .hdr-cart-list{max-height:none;overflow:visible;gap:24px}
  .hdr-cart-item{grid-template-columns:80px minmax(0,1fr);grid-template-rows:auto auto auto auto;gap:6px 18px;padding:0 0 24px;border:0;border-bottom:1px solid rgba(255,255,255,.12);align-items:start}
  .hdr-cart-item>img{grid-column:1;grid-row:1/4;width:80px;height:88px;object-fit:contain;border-radius:10px;background:rgba(255,255,255,.05)}
  .hdr-cart-item>div{display:contents}
  .hdr-cart-item b{grid-column:2;grid-row:1;font:500 16px/1.4 var(--body);padding-top:4px}
  .hdr-cart-item small{grid-column:2;grid-row:2;font-size:12px}
  .hdr-cart-price{grid-column:2;grid-row:3;font:500 14px/1.5 var(--body);padding-top:4px}
  .hdr-cart-qty{grid-column:1/-1;grid-row:4;display:flex;gap:0;margin-top:16px}
  .hdr-cart-qty button{width:44px;height:44px;flex-shrink:0;border-color:rgba(255,255,255,.16);border-radius:8px;font-size:16px}
  .hdr-cart-qty output{min-width:38px}
  .hdr-cart-qty .hdr-cart-remove{width:auto;min-width:44px;margin-left:auto;border:0;opacity:1;font-size:12px;color:#d6d1c8}
  .hdr-cart-foot{border:0;margin-top:0;padding-top:4px}
  .hdr-cart-total{margin:0 0 24px;font:500 16px/1.4 var(--body)}
  .hdr-cart-actions{grid-template-columns:1fr;gap:8px}
  .hdr-cart-actions a{min-height:48px;font:500 14px/1.4 var(--body);letter-spacing:0;text-transform:none;border-radius:10px}
  .hdr-cart-actions .hdr-cart-solid{grid-row:1;min-height:52px}
  .hdr-cart-actions .hdr-cart-ghost{border:0;color:#d6d1c8}
  .hdr-cart-empty{font-size:14px;margin:12px 0 32px}
  .hdr-panel-cart :is(a,button):focus-visible{outline:2px solid var(--ember-bright);outline-offset:2px}
}

@media (max-width: 900px){
  .hdr-panel-cart{ position: fixed; top: 70px; left: 12px; right: 12px; width: auto; border-radius: 16px; border-top: 1px solid rgba(255,255,255,0.08); }
  .hdr-panel-cart::before{ display: none; }
  .hdr-panel-collection{ position: fixed; top: 70px; left: 12px; right: 12px; width: auto; margin-left: 0; border-radius: 16px; border-top: 1px solid rgba(255,255,255,0.08); }
  .hdr-panel-collection::before{ display: none; }
}

/* Readable shared footer utility text. */
.site-footer .footer-links a,.site-footer .footer-legal a,.site-footer .footer-bottom{color:rgba(254,255,253,.76)}
.site-footer .footer-links a{font-size:13px;line-height:1.6}
.site-footer .footer-legal a{font-size:12px}
.site-footer a:hover{color:var(--ember-bright)}
.epp-demo-note{font:400 12px/1.6 var(--utility);color:var(--charcoal);margin:12px 0 0}
/* Persistent access, outside the transformed smooth-scroll content. */
.pf-floating-cart{position:fixed;right:32px;bottom:32px;z-index:110;display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:0 18px 0 20px;border:1px solid rgba(204,197,117,.38);border-radius:999px;background:rgba(17,15,10,.93);color:var(--cream);box-shadow:0 8px 32px rgba(17,15,10,.18);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);text-decoration:none;transition:background .3s,border-color .3s,box-shadow .3s}
.pf-floating-cart:hover{background:var(--charcoal-soft);border-color:var(--ember);box-shadow:0 10px 36px rgba(17,15,10,.26)}
.pf-floating-cart:focus-visible{outline:2px solid var(--ember-bright);outline-offset:5px}
.pf-floating-cart svg{width:21px;height:21px;flex:none;color:var(--cream-soft)}
.pf-floating-cart-label{font:500 11px/1 var(--utility);letter-spacing:.12em;text-transform:uppercase}
.pf-floating-cart-count{display:grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border:1px solid var(--line-dark);border-radius:50%;font:500 11px/1 var(--utility);font-variant-numeric:tabular-nums;color:var(--cream-soft)}
.pf-floating-cart[data-filled=true] .pf-floating-cart-count{background:var(--ember);border-color:var(--ember);color:var(--charcoal)}
@media(max-width:767px){.pf-floating-cart{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));min-height:52px;gap:10px;padding:0 12px 0 16px}.pf-floating-cart-label{display:none}}
@media(prefers-reduced-motion:reduce){.pf-floating-cart{transition:none}}
#pf-cart-dialog{position:fixed;inset:24px 24px auto auto;margin:0;width:min(480px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);overflow:auto;padding:32px;border:1px solid var(--line-dark);border-radius:12px;background:var(--charcoal);color:var(--cream);box-shadow:0 24px 80px rgba(0,0,0,.3)}
#pf-cart-dialog::backdrop{background:rgba(17,15,10,.5);backdrop-filter:blur(5px)}
.pf-cart-head,.pf-cart-total{display:flex;align-items:center;justify-content:space-between;gap:16px}.pf-cart-head h2{font:400 34px/1.1 var(--editorial);margin:0}.pf-cart-close{background:none;color:inherit;border:1px solid var(--line-dark);border-radius:50%;width:44px;height:44px;font-size:26px}
.pf-cart-items{margin:24px 0}.pf-cart-row{display:grid;grid-template-columns:64px 1fr auto;gap:16px;border-bottom:1px solid var(--line-dark);padding:20px 0;align-items:start}.pf-cart-row img{width:64px;height:72px;object-fit:cover}.pf-cart-row strong{font:400 22px var(--editorial)}.pf-cart-row small{display:block;margin-top:8px;color:var(--cream-soft);font-size:12px}.pf-cart-price{font-size:12px;white-space:nowrap}.pf-cart-remove{display:block;min-height:44px;border:0;padding:8px 0;color:var(--ember-bright);background:none;font-size:12px}.pf-cart-empty{font:400 19px/1.6 var(--editorial);color:var(--cream-soft)}.pf-cart-total{margin:24px 0;font-size:14px}.pf-cart-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.pf-cart-actions a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px;border:1px solid var(--line-dark);font-size:12px}.pf-cart-actions .pf-cart-primary{background:var(--cream);color:var(--charcoal)}
@media(max-width:1024px){.pf-floating-cart{display:none!important}#pf-cart-dialog{inset:0 0 auto;margin:0;width:100%;max-height:100dvh;border-radius:0;padding:28px 24px}#siteNav.nav-open{animation:pf-nav-down .55s cubic-bezier(.22,1,.36,1)}}
@keyframes pf-nav-down{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}

/* Icon-only cart access, with its caption revealed beside it. */
.pf-floating-cart{width:56px;height:56px;min-height:56px;justify-content:center;gap:0;padding:0;border-radius:50%}
.pf-floating-cart-label{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);padding:12px 16px;border:1px solid var(--line-dark);border-radius:2px;background:var(--charcoal);color:var(--cream);font:500 13px/1.4 var(--utility);letter-spacing:0;text-transform:none;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
.pf-floating-cart:hover .pf-floating-cart-label,.pf-floating-cart:focus-visible .pf-floating-cart-label{opacity:1;visibility:visible}
.pf-floating-cart-count{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 4px;font-size:10px;background:var(--charcoal)}
.pf-floating-cart[data-filled=false] .pf-floating-cart-count{display:none}
@media(prefers-reduced-motion:reduce){.pf-floating-cart-label{transition:none}}

/* Transparent, optimized AE flame with a static fallback. */
.flame-mark{position:relative;display:inline-block;flex:none;width:32px;height:49px;vertical-align:middle}
.flame-mark img,.flame-mark video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:none;filter:none}
.flame-mark video{opacity:0;pointer-events:none}
.flame-mark.is-playing video{opacity:1}
.flame-mark.is-playing img{opacity:0}
.site-header .brand-link .flame-mark{width:28px;height:44px}
.footer-brand{display:inline-flex;align-items:center;gap:14px}
.footer-brand .flame-mark{width:38px;height:58px}
.footer-brand-word{font:400 26px/1.2 var(--editorial);letter-spacing:-.025em;text-transform:none}
#rail-menu .rail-brand{display:inline-flex;align-items:center}
#rail-menu .rail-brand .flame-mark{width:40px;height:61px}
.flame-mark--confirmation{display:block;width:72px;height:110px;margin:0 auto 24px}
@media(min-width:1025px){.rail-item .flame-mark--rail{width:28px;height:44px;transform:rotate(90deg)}.rail-item .flame-mark img,.rail-toggle:hover .rail-item .flame-mark img{width:100%;height:100%;transform:none;animation:none}}
@media(prefers-reduced-motion:reduce){.flame-mark video{display:none}.flame-mark.is-playing img{opacity:1}}

@media (prefers-reduced-motion: reduce){
  .craft-pin-panel{transition:none;transform:none;filter:none;clip-path:none}
}

/* Cart feedback: a short label slides out beside the cart icon when an item lands. */
.pf-cart-flag{position:fixed;z-index:120;display:flex;align-items:baseline;gap:8px;padding:11px 15px;border:1px solid var(--line-dark);background:var(--charcoal);color:var(--cream-soft);font:500 12px/1.35 var(--utility);letter-spacing:.02em;white-space:nowrap;box-shadow:0 12px 34px rgba(17,15,10,.24);opacity:0;pointer-events:none;transition:opacity .28s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.pf-cart-flag b{max-width:min(210px,42vw);overflow:hidden;text-overflow:ellipsis;font-weight:500;color:var(--ember-bright)}
.pf-cart-flag[data-side=right]{transform:translate(-12px,-50%)}
.pf-cart-flag[data-side=left]{transform:translate(12px,-50%)}
.pf-cart-flag.is-visible{opacity:1;transform:translate(0,-50%)}
.rail-cart.is-cart-added,.cart-link.is-cart-added{color:var(--ember-bright)}
.rail-cart.is-cart-added .cart-badge,.cart-link.is-cart-added .cart-badge{animation:pf-badge-pop .55s cubic-bezier(.22,1,.36,1)}
@keyframes pf-badge-pop{0%{transform:scale(.55)}55%{transform:scale(1.18)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
 .pf-cart-flag{transition:opacity .2s ease}
 .pf-cart-flag[data-side=right],.pf-cart-flag[data-side=left]{transform:translate(0,-50%)}
 .rail-cart.is-cart-added .cart-badge,.cart-link.is-cart-added .cart-badge{animation:none}
}