/* ============================================================
   BecLed.ro — Design tokens (conform Manual Identitate V1.1)
   Black/Graphite 55% · Warm White 30% · Champagne 10-15%
   ============================================================ */
:root{
  --black:#0B0B0C;
  --graphite:#343538;
  --champagne:#C7A66A;
  --warm-white:#F5F3EE;
  --soft-grey:#A8A8A5;

  --bg:var(--black);
  --surface:#111113;
  --surface-2:#17181A;
  --surface-3:#1E1F22;
  --text:var(--warm-white);
  --text-dim:#9C9C99;
  --text-mute:#7C7D79;
  --line:rgba(245,243,238,.09);
  --line-strong:rgba(245,243,238,.16);
  --accent:var(--champagne);
  --accent-soft:rgba(199,166,106,.12);
  --accent-line:rgba(199,166,106,.32);
  --glow:rgba(199,166,106,.16);
  --on-accent:#0B0B0C;

  /* Suprafața pe care se randează corpurile de iluminat rămâne nocturnă în
     ambele teme: lumina se citește doar pe întuneric, iar manualul cere
     55% black/graphite. Vezi blocul „SCENE" de mai jos. */
  --stage:#141416;

  --font-display:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --r-xs:4px; --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px;
  --pad:clamp(20px,4.2vw,64px);
  --max:1440px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --header-h:76px;
}
[data-theme="light"]{
  --bg:var(--warm-white);
  --surface:#FFFFFF;
  --surface-2:#EFEDE7;
  --surface-3:#E5E2DA;
  --text:var(--black);
  --text-dim:#54555A;
  --text-mute:#6E6F72;
  --line:rgba(11,11,12,.10);
  --line-strong:rgba(11,11,12,.20);
  /* Champagne întunecat pentru text pe fundal deschis — manual, p.30:
     „Champagne nu se recomandă pentru body text pe alb." */
  --accent:#7A6231;
  --accent-soft:rgba(122,98,49,.10);
  --accent-line:rgba(122,98,49,.32);
  --glow:rgba(199,166,106,.30);
  --on-accent:#FFFFFF;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background .5s var(--ease), color .5s var(--ease);
}
body.no-scroll{overflow:hidden}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:500; letter-spacing:-.02em; margin:0; line-height:1.14}
p{margin:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
img,svg{display:block; max-width:100%}
input,select{font:inherit; color:inherit}
::selection{background:var(--champagne); color:#0B0B0C}

.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--pad)}
.eyebrow{
  font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:12px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--accent-line)}
.section{padding-block:clamp(72px,9vw,132px); position:relative}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:clamp(32px,4vw,56px); flex-wrap:wrap}
.sec-head h2{font-size:clamp(28px,3.4vw,46px); margin-top:18px; max-width:16ch}
.sec-head p{color:var(--text-dim); max-width:46ch; font-size:15px}

/* --- three-bar E motif ------------------------------------- */
.bars{display:flex; flex-direction:column; gap:4px; width:26px; flex:none}
.bars i{display:block; height:3px; border-radius:2px; background:var(--accent)}
.bars i:nth-child(2){width:78%}

/* --- buttons ----------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:52px; padding:0 28px; border-radius:var(--r-sm);
  font-size:14px; font-weight:600; letter-spacing:.01em;
  position:relative; overflow:hidden; transition:.4s var(--ease); white-space:nowrap;
}
.btn-primary{background:var(--champagne); color:#0B0B0C}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 34px -12px rgba(199,166,106,.6)}
.btn-ghost{border:1px solid var(--line-strong); color:var(--text)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.btn-sm{height:42px; padding:0 20px; font-size:13px}
.btn svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7; transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}

.link-arrow{display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent); padding-bottom:6px;
  border-bottom:1px solid var(--accent-line); transition:.35s var(--ease)}
.link-arrow:hover{gap:16px; border-color:var(--accent)}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{background:var(--surface); border-bottom:1px solid var(--line); font-size:12px; color:var(--text-dim)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:38px; gap:24px}
.topbar-msgs{display:flex; gap:26px; overflow:hidden}
.topbar-msgs span{display:flex; align-items:center; gap:8px; white-space:nowrap}
.topbar-msgs span::before{content:""; width:4px; height:4px; border-radius:50%; background:var(--accent); flex:none}
.topbar-right{display:flex; gap:20px; align-items:center; white-space:nowrap}
.topbar-right a:hover{color:var(--accent)}
@media(max-width:900px){.topbar-msgs span:nth-child(n+2){display:none} .topbar-right a:nth-child(n+2){display:none}}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:80; background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line); transition:.4s var(--ease);
}
.site-header.scrolled{--header-h:64px; box-shadow:0 12px 40px -24px rgba(0,0,0,.9)}
.hdr{display:flex; align-items:center; gap:clamp(14px,2.2vw,34px); height:var(--header-h); transition:height .4s var(--ease)}
.logo{flex:none; display:block}
.logo svg{height:26px; width:auto; transition:.4s var(--ease)}
.site-header.scrolled .logo svg{height:22px}
.logo .lg-word{fill:var(--text)}
.logo .lg-accent{fill:var(--champagne)}

.nav{display:flex; align-items:center; gap:2px; margin-right:auto; height:100%; list-style:none; margin-block:0; padding:0}
.nav > li{height:100%; display:flex; align-items:center}
.nav a.nav-link{
  display:flex; align-items:center; gap:7px; padding:0 12px; height:38px; border-radius:var(--r-sm);
  font-size:13px; font-weight:500; color:var(--text-dim); transition:.3s var(--ease); white-space:nowrap;
}
.nav a.nav-link:hover,.nav li.open > a.nav-link{color:var(--text); background:var(--accent-soft)}
.nav .chev{width:9px; height:9px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); opacity:.6; transition:.3s var(--ease)}
.nav li.open .chev{transform:rotate(-135deg) translate(-1px,-1px)}
.nav .tag{font-size:9px; font-weight:600; letter-spacing:.1em; padding:2px 6px; border-radius:3px;
  background:var(--champagne); color:#0B0B0C}

.hdr-actions{display:flex; align-items:center; gap:6px; flex:none}
.icon-btn{width:42px; height:42px; border-radius:var(--r-sm); display:grid; place-items:center;
  color:var(--text-dim); transition:.3s var(--ease); position:relative}
.icon-btn:hover{color:var(--accent); background:var(--accent-soft)}
.icon-btn svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.badge{position:absolute; top:6px; right:5px; min-width:16px; height:16px; padding:0 4px; border-radius:8px;
  background:var(--champagne); color:#0B0B0C; font-size:10px; font-weight:600; display:grid; place-items:center; line-height:1}
.hdr-cta{margin-left:8px}
@media(max-width:1400px){.hdr-actions .icon-btn.opt{display:none}}
@media(max-width:1260px){.hdr-cta{display:none}}
@media(max-width:1180px){.nav{display:none}}
.burger{display:none}
@media(max-width:1180px){.burger{display:grid} .hdr-actions .icon-btn.opt{display:grid} .hdr-cta{display:inline-flex}}
@media(max-width:640px){.hdr-actions .icon-btn.opt,.hdr-cta{display:none}}
@media(max-width:560px){
  .hdr{gap:8px} .hdr-actions{gap:2px}
  .logo svg{height:21px} .site-header.scrolled .logo svg{height:19px}
  .icon-btn{width:38px; height:38px}
}

/* --- mega menu --------------------------------------------- */
.mega{
  position:absolute; top:calc(100% + 1px); left:var(--pad); transform:translateY(10px);
  width:min(1120px, calc(100vw - var(--pad) * 2 - 18px)); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:34px; display:grid; grid-template-columns:1.1fr 1.1fr 1fr .9fr; gap:34px;
  opacity:0; visibility:hidden; pointer-events:none; transition:.38s var(--ease);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85);
}
.nav li.open .mega{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0)}
.mega h5{font-family:var(--font-body); font-size:10.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); margin:0 0 16px}
.mega ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.mega ul a{display:flex; justify-content:space-between; align-items:center; padding:7px 10px; margin-inline:-10px;
  border-radius:var(--r-xs); font-size:14px; color:var(--text-dim); transition:.25s var(--ease)}
.mega ul a:hover{color:var(--text); background:var(--surface-2); padding-left:16px}
.mega ul a span{font-size:11px; color:var(--text-mute); font-variant-numeric:tabular-nums}
.mega-promo{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px; display:flex; flex-direction:column; justify-content:space-between; gap:18px; position:relative; overflow:hidden}
.mega-promo::after{content:""; position:absolute; inset:auto -30% -60% -30%; height:160px;
  background:radial-gradient(ellipse at 50% 100%, var(--glow), transparent 70%)}
.mega-promo strong{font-family:var(--font-display); font-size:19px; font-weight:500; line-height:1.25; position:relative}
.mega-promo p{font-size:12.5px; color:var(--text-dim); position:relative}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero::before{
  content:""; position:absolute; top:-20%; left:50%; width:120%; height:130%; transform:translateX(-50%);
  background:radial-gradient(ellipse 46% 52% at 68% 34%, var(--glow), transparent 62%);
  pointer-events:none; animation:breathe 9s var(--ease) infinite alternate;
}
@keyframes breathe{from{opacity:.65} to{opacity:1}}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:clamp(32px,5vw,72px);
  align-items:center; padding-block:clamp(56px,7vw,104px); position:relative;
}
.hero h1{font-size:clamp(38px,5.6vw,80px); letter-spacing:-.035em; margin:24px 0 0}
.hero h1 em{font-style:normal; color:var(--accent); position:relative; display:inline-block}
.hero h1 em::after{content:""; position:absolute; left:0; right:0; bottom:.06em; height:2px;
  background:var(--accent-line); transform:scaleX(0); transform-origin:left; animation:swipe 1.1s .7s var(--ease-out) forwards}
@keyframes swipe{to{transform:scaleX(1)}}
.hero-sub{margin-top:26px; font-size:clamp(15px,1.3vw,17.5px); color:var(--text-dim); max-width:48ch}
.hero-cta{display:flex; gap:14px; margin-top:38px; flex-wrap:wrap}
.hero-specs{display:flex; gap:clamp(20px,3vw,44px); margin-top:52px; padding-top:28px; border-top:1px solid var(--line); flex-wrap:wrap}
.spec strong{display:block; font-family:var(--font-display); font-size:clamp(22px,2.4vw,32px); font-weight:500; letter-spacing:-.02em}
.spec span{font-size:11.5px; color:var(--text-mute); letter-spacing:.11em; text-transform:uppercase}
.hero-art{position:relative}
.hero-art svg{width:100%; height:auto}
.hero-float{
  position:absolute; background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(14px);
  border:1px solid var(--line-strong); border-radius:var(--r-md); padding:13px 17px;
  display:flex; align-items:center; gap:12px; font-size:12.5px; box-shadow:0 24px 60px -30px rgba(0,0,0,.9);
  animation:floaty 6s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}
.hero-float.f1{top:12%; left:-4%}
.hero-float.f2{bottom:16%; right:-2%; animation-delay:-3s}
.hero-float b{display:block; font-family:var(--font-display); font-weight:500; font-size:14px}
.hero-float small{color:var(--text-mute); font-size:11px}
.dot-live{display:inline-block; vertical-align:middle; width:7px; height:7px; border-radius:50%;
  background:#5CC98E; box-shadow:0 0 0 0 rgba(92,201,142,.6); animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(92,201,142,0)} 100%{box-shadow:0 0 0 0 rgba(92,201,142,0)}}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr; padding-block:48px}
  .hero-art{order:-1; max-width:520px; margin-inline:auto}
  .hero-float.f1{left:0} .hero-float.f2{right:0}
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust{border-bottom:1px solid var(--line); background:var(--surface); overflow:hidden}
.trust .wrap{display:flex; align-items:center; gap:clamp(24px,4vw,56px); height:92px}
.trust-item{display:flex; align-items:center; gap:14px; flex:1; min-width:0}
.trust-item svg{width:26px; height:26px; stroke:var(--accent); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; flex:none}
.trust-item b{display:block; font-size:13.5px; font-weight:600}
.trust-item span{font-size:11.5px; color:var(--text-mute)}
@media(max-width:900px){.trust .wrap{height:auto; padding-block:22px; flex-wrap:wrap; gap:20px} .trust-item{flex:1 1 44%}}

/* ============================================================
   CATEGORII
   ============================================================ */
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.cat{
  position:relative; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
  padding:26px 24px 22px; min-height:210px; display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden; transition:.45s var(--ease);
}
.cat::before{content:""; position:absolute; inset:auto -40% -70% -40%; height:180px;
  background:radial-gradient(ellipse at 50% 100%, var(--glow), transparent 68%); opacity:0; transition:.5s var(--ease)}
.cat:hover{border-color:var(--accent-line); transform:translateY(-5px)}
.cat:hover::before{opacity:1}
.cat.big{grid-column:span 2; min-height:210px}
.cat-ico{width:44px; height:44px; stroke:var(--accent); fill:none; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; position:relative; transition:.45s var(--ease)}
.cat:hover .cat-ico{transform:translateY(-3px)}
.cat h3{font-size:19px; position:relative; margin-bottom:5px}
.cat p{font-size:12.5px; color:var(--text-mute); position:relative}
.cat .count{position:absolute; top:22px; right:24px; font-size:11px; color:var(--text-mute);
  font-variant-numeric:tabular-nums; padding:3px 9px; border:1px solid var(--line); border-radius:20px}
@media(max-width:1080px){.cat-grid{grid-template-columns:repeat(2,1fr)} .cat.big{grid-column:span 2}}
@media(max-width:560px){.cat-grid{grid-template-columns:1fr} .cat.big{grid-column:span 1}}

/* ============================================================
   KELVIN — selector temperatură culoare
   ============================================================ */
.kelvin{background:var(--surface); border-block:1px solid var(--line); position:relative; overflow:hidden}
.kelvin-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(36px,5vw,80px); align-items:center}
.kroom{position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:#0A0A0B; aspect-ratio:16/11}
.kroom svg{width:100%; height:100%}
.kroom .k-label{
  position:absolute; left:20px; bottom:20px; background:rgba(11,11,12,.72); backdrop-filter:blur(10px);
  border:1px solid rgba(245,243,238,.16); border-radius:var(--r-sm); padding:10px 16px; color:#F5F3EE;
}
.kroom .k-label b{font-family:var(--font-display); font-size:20px; font-weight:500; display:block; letter-spacing:-.02em}
.kroom .k-label span{font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.6}
.krange{width:100%; margin-top:34px; -webkit-appearance:none; appearance:none; height:4px; border-radius:4px;
  background:linear-gradient(90deg,#FF9C3F,#FFC98A,#FFE7CF,#FFFFFF,#DCEBFF,#B9D6FF); outline:none}
.krange::-webkit-slider-thumb{-webkit-appearance:none; width:26px; height:26px; border-radius:50%;
  background:var(--warm-white); border:5px solid var(--champagne); cursor:grab; box-shadow:0 6px 18px -4px rgba(0,0,0,.7); transition:transform .2s}
.krange::-webkit-slider-thumb:active{cursor:grabbing; transform:scale(1.12)}
.krange::-moz-range-thumb{width:26px; height:26px; border-radius:50%; background:var(--warm-white); border:5px solid var(--champagne); cursor:grab}
.kscale{display:flex; justify-content:space-between; margin-top:12px; font-size:11px; color:var(--text-mute); letter-spacing:.06em}
.kchips{display:flex; gap:8px; margin-top:30px; flex-wrap:wrap}
.kchip{padding:9px 16px; border:1px solid var(--line); border-radius:30px; font-size:12.5px; color:var(--text-dim); transition:.3s var(--ease)}
.kchip:hover{border-color:var(--accent-line); color:var(--text)}
.kchip.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.kdesc{margin-top:26px; padding:20px 22px; border-left:2px solid var(--accent); background:var(--accent-soft);
  border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:14px; color:var(--text-dim); min-height:86px}
.kdesc b{color:var(--text); font-weight:600}
@media(max-width:940px){.kelvin-grid{grid-template-columns:1fr}}

/* ============================================================
   PRODUSE
   ============================================================ */
.tabs{display:flex; gap:6px; flex-wrap:wrap; padding:5px; background:var(--surface); border:1px solid var(--line); border-radius:40px}
.tab{padding:10px 20px; border-radius:30px; font-size:13px; font-weight:500; color:var(--text-dim); transition:.3s var(--ease); white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.on{background:var(--champagne); color:#0B0B0C; font-weight:600}
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media(max-width:1080px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.prod-grid{grid-template-columns:1fr}}
/* ============================================================
   SCENE — orice suprafață pe care apare un corp de iluminat
   Redefinesc tokenii aici, deci tot ce e înăuntru (badge-uri, butonul
   de favorite, textele din diagrame) devine automat light-on-dark,
   indiferent de tema paginii.
   ============================================================ */
.card-media,.stage,.photo-stage,.ci-img,.sb-img,.cat-hero-art{
  --bg:#0B0B0C;
  --surface:#17181A;
  --surface-2:#1E1F22;
  --surface-3:#26272A;
  --text:#F5F3EE;
  --text-dim:#9C9C99;
  --text-mute:#7C7D79;
  --line:rgba(245,243,238,.10);
  --line-strong:rgba(245,243,238,.20);
  --accent:#C7A66A;
  --accent-soft:rgba(199,166,106,.12);
  --accent-line:rgba(199,166,106,.32);
  --glow:rgba(199,166,106,.16);
  background:var(--stage);
  color:var(--text);
}

.card{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); overflow:hidden;
  display:flex; flex-direction:column; transition:.45s var(--ease); position:relative;
}
.card:hover{border-color:var(--accent-line); transform:translateY(-6px); box-shadow:0 32px 60px -34px rgba(0,0,0,.9)}
.card-media{position:relative; aspect-ratio:1/1; overflow:hidden; display:grid; place-items:center}
.card-media::after{content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 42%, var(--glow), transparent 60%); opacity:.55; transition:.55s var(--ease)}
.card:hover .card-media::after{opacity:1}
.card-media svg{width:76%; height:76%; position:relative; z-index:1; transition:transform .6s var(--ease-out)}
.card:hover .card-media svg{transform:scale(1.06)}
.flag{position:absolute; top:14px; left:14px; z-index:2; font-size:10px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; padding:5px 10px; border-radius:4px; background:var(--champagne); color:#0B0B0C}
.flag.alt{background:transparent; border:1px solid var(--line-strong); color:var(--text-dim); backdrop-filter:blur(8px)}
.card-fav{position:absolute; top:12px; right:12px; z-index:2; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; background:color-mix(in srgb,var(--bg) 60%,transparent); backdrop-filter:blur(8px);
  color:var(--text-dim); opacity:0; transform:translateY(-6px); transition:.35s var(--ease)}
.card:hover .card-fav{opacity:1; transform:none}
.card-fav:hover{color:var(--accent)}
.card-fav svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.5}
.card-body{padding:20px; display:flex; flex-direction:column; gap:10px; flex:1}
.card-brand{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-mute)}
.card h3{font-size:15.5px; font-weight:500; line-height:1.35; letter-spacing:-.01em}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:2px}
.chip{font-size:10.5px; padding:4px 9px; border:1px solid var(--line); border-radius:4px; color:var(--text-mute); font-variant-numeric:tabular-nums}
.stars{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--text-mute)}
.stars i{color:var(--champagne); font-style:normal; letter-spacing:1px; font-size:11px}
.card-foot{margin-top:auto; padding-top:14px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px}
.price{font-family:var(--font-display); font-size:20px; font-weight:500; letter-spacing:-.02em}
.price small{font-size:11px; color:var(--text-mute); font-weight:400; letter-spacing:0}
.price del{display:block; font-size:12px; color:var(--text-mute); font-family:var(--font-body)}
.add{width:42px; height:42px; border-radius:var(--r-sm); border:1px solid var(--line-strong); display:grid; place-items:center;
  color:var(--text-dim); transition:.35s var(--ease); flex:none}
.add:hover{background:var(--champagne); border-color:var(--champagne); color:#0B0B0C}
.add svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round}
.add.done{background:#5CC98E; border-color:#5CC98E; color:#0B0B0C}

/* ============================================================
   VALORI
   ============================================================ */
.val-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.val{background:var(--bg); padding:clamp(28px,3vw,44px); transition:.4s var(--ease); position:relative}
.val:hover{background:var(--surface)}
.val .n{font-family:var(--font-display); font-size:12px; color:var(--accent); letter-spacing:.16em}
.val h3{font-size:21px; margin:20px 0 12px}
.val p{font-size:14px; color:var(--text-dim); max-width:36ch}
.val .bars{margin-bottom:24px; width:34px}
@media(max-width:900px){.val-grid{grid-template-columns:1fr}}

/* ============================================================
   PROIECTE
   ============================================================ */
.proj{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center}
.proj-art{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:#0A0A0B; aspect-ratio:5/4}
.proj-art svg{width:100%; height:100%}
.proj-list{list-style:none; margin:32px 0 0; padding:0; display:flex; flex-direction:column}
.proj-list li{display:flex; gap:18px; padding:20px 0; border-top:1px solid var(--line); align-items:flex-start}
.proj-list li:last-child{border-bottom:1px solid var(--line)}
.proj-list b{font-family:var(--font-display); font-weight:500; font-size:16px; display:block; margin-bottom:4px}
.proj-list p{font-size:13.5px; color:var(--text-dim)}
.proj-list .num{font-size:11px; color:var(--accent); letter-spacing:.14em; padding-top:5px; flex:none}
@media(max-width:940px){.proj{grid-template-columns:1fr}}

/* ============================================================
   CONSULTANȚĂ CTA
   ============================================================ */
.cta-band{position:relative; overflow:hidden; border-radius:var(--r-xl); background:var(--surface-2); border:1px solid var(--line);
  padding:clamp(40px,5.5vw,76px); display:grid; grid-template-columns:1.3fr .9fr; gap:44px; align-items:center}
.cta-band::before{content:""; position:absolute; inset:-40% -10% auto -10%; height:420px;
  background:radial-gradient(ellipse at 30% 0%, var(--glow), transparent 62%)}
.cta-band > *{position:relative}
.cta-band h2{font-size:clamp(26px,3.2vw,42px); max-width:18ch; margin:18px 0 16px}
.cta-band p{color:var(--text-dim); max-width:44ch; font-size:15px}
.cta-form{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; display:flex; flex-direction:column; gap:12px}
.field{display:flex; flex-direction:column; gap:7px}
.field label{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute)}
.field input,.field select{height:48px; padding:0 15px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--surface-2); transition:.3s var(--ease); font-size:14px}
.field input:focus,.field select:focus{outline:none; border-color:var(--accent); background:var(--surface-3)}
.cta-form .btn{width:100%; margin-top:6px}
.cta-form small{font-size:11px; color:var(--text-mute); text-align:center}
@media(max-width:940px){.cta-band{grid-template-columns:1fr}}

/* ============================================================
   REVIEWS + MARQUEE
   ============================================================ */
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.rev{border:1px solid var(--line); border-radius:var(--r-md); padding:28px; background:var(--surface); transition:.4s var(--ease)}
.rev:hover{border-color:var(--accent-line)}
.rev p{font-size:14.5px; color:var(--text-dim); margin:16px 0 22px; line-height:1.7}
.rev-who{display:flex; align-items:center; gap:12px; padding-top:18px; border-top:1px solid var(--line)}
.av{width:38px; height:38px; border-radius:50%; background:var(--surface-3); display:grid; place-items:center;
  font-family:var(--font-display); font-size:13px; color:var(--accent); border:1px solid var(--line)}
.rev-who b{font-size:13.5px; font-weight:600; display:block}
.rev-who span{font-size:11.5px; color:var(--text-mute)}
@media(max-width:940px){.rev-grid{grid-template-columns:1fr}}

.marquee{border-block:1px solid var(--line); overflow:hidden; padding-block:30px; background:var(--surface)}
.mq-track{display:flex; gap:clamp(40px,6vw,90px); width:max-content; animation:mq 32s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-item{font-family:var(--font-display); font-size:clamp(15px,1.5vw,19px); font-weight:500; letter-spacing:.06em;
  color:var(--text-mute); white-space:nowrap; transition:.3s var(--ease)}
.mq-item:hover{color:var(--accent)}

/* ============================================================
   NEWSLETTER + FOOTER
   ============================================================ */
.news{text-align:center; padding-block:clamp(64px,8vw,110px)}
.news h2{font-size:clamp(26px,3.4vw,44px); margin:20px auto 16px; max-width:20ch}
.news p{color:var(--text-dim); max-width:52ch; margin-inline:auto; font-size:15px}
.news .eyebrow{justify-content:center}
.news-form{display:flex; gap:10px; max-width:520px; margin:36px auto 14px; flex-wrap:wrap}
.news-form input{flex:1; min-width:220px; height:54px; padding:0 20px; border-radius:var(--r-sm);
  border:1px solid var(--line-strong); background:var(--surface); font-size:14px}
.news-form input:focus{outline:none; border-color:var(--accent)}
.news small{font-size:11.5px; color:var(--text-mute)}

.site-footer{background:var(--surface); border-top:1px solid var(--line); padding-top:clamp(56px,6vw,86px)}
.f-grid{display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:clamp(28px,3vw,48px); padding-bottom:56px}
.f-brand .logo svg{height:24px; margin-bottom:22px}
.f-brand p{font-size:13.5px; color:var(--text-dim); max-width:34ch}
.f-social{display:flex; gap:8px; margin-top:24px}
.f-social a{width:38px; height:38px; border:1px solid var(--line); border-radius:var(--r-sm); display:grid; place-items:center;
  color:var(--text-dim); transition:.3s var(--ease)}
.f-social a:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.f-social svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.5}
.f-col h5{font-family:var(--font-body); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-mute); margin:0 0 18px; font-weight:600}
.f-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.f-col a{font-size:13.5px; color:var(--text-dim); transition:.25s var(--ease)}
.f-col a:hover{color:var(--accent)}
.f-bottom{border-top:1px solid var(--line); padding-block:24px; display:flex; align-items:center;
  justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:12px; color:var(--text-mute)}
.f-pay{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.f-pay span{padding:5px 11px; border:1px solid var(--line); border-radius:4px; font-size:10.5px; letter-spacing:.08em}
@media(max-width:1000px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.f-grid{grid-template-columns:1fr}}

/* ============================================================
   DRAWERS / OVERLAY
   ============================================================ */
.backdrop{position:fixed; inset:0; background:rgba(6,6,7,.66); backdrop-filter:blur(4px); z-index:90;
  opacity:0; visibility:hidden; transition:.4s var(--ease)}
.backdrop.on{opacity:1; visibility:visible}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(420px,100%); background:var(--bg); z-index:100;
  border-left:1px solid var(--line); transform:translateX(102%); transition:.5s var(--ease-out);
  display:flex; flex-direction:column}
.drawer.on{transform:none}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line)}
.drawer-head h4{font-size:16px}
.drawer-body{flex:1; overflow-y:auto; padding:22px 24px; display:flex; flex-direction:column; gap:18px}
.ci{display:flex; gap:14px; align-items:center}
.ci-img{width:66px; height:66px; border-radius:var(--r-sm); display:grid; place-items:center; flex:none; overflow:hidden}
.ci-img svg{width:74%; height:74%}
.ci b{font-size:13.5px; font-weight:500; display:block; line-height:1.35}
.ci span{font-size:11.5px; color:var(--text-mute)}
.ci .p{margin-left:auto; font-family:var(--font-display); font-size:14px; white-space:nowrap}
.drawer-foot{padding:22px 24px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:14px}
.total{display:flex; justify-content:space-between; align-items:baseline}
.total b{font-family:var(--font-display); font-size:24px; font-weight:500}
.empty{color:var(--text-mute); font-size:13.5px; text-align:center; padding:40px 0}

.search-ov{position:fixed; inset:0; z-index:100; background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(20px); opacity:0; visibility:hidden; transition:.4s var(--ease); padding-top:14vh}
.search-ov.on{opacity:1; visibility:visible}
.search-box{max-width:760px; margin-inline:auto; padding-inline:24px}
.search-box input{width:100%; height:74px; background:transparent; border:0; border-bottom:1px solid var(--line-strong);
  font-family:var(--font-display); font-size:clamp(22px,3vw,34px); font-weight:400; letter-spacing:-.02em; padding:0 8px}
.search-box input:focus{outline:none; border-color:var(--accent)}
.search-box input::placeholder{color:var(--text-mute)}
.sugg{margin-top:32px}
.sugg h5{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-mute); font-family:var(--font-body); margin:0 0 16px}
.sugg-list{display:flex; gap:10px; flex-wrap:wrap}
.sugg-list a{padding:9px 16px; border:1px solid var(--line); border-radius:30px; font-size:13px; color:var(--text-dim); transition:.3s var(--ease)}
.sugg-list a:hover{border-color:var(--accent); color:var(--accent)}

/* mobile nav */
.mnav{position:fixed; inset:0 0 0 auto; width:min(360px,100%); background:var(--bg); border-left:1px solid var(--line);
  z-index:100; transform:translateX(102%); transition:.5s var(--ease-out); padding:24px; overflow-y:auto}
.mnav.on{transform:none}
.mnav ul{list-style:none; margin:24px 0 0; padding:0}
.mnav li{border-bottom:1px solid var(--line)}
.mnav a{display:block; padding:16px 0; font-family:var(--font-display); font-size:19px; font-weight:500}
.mnav a:hover{color:var(--accent)}

/* reveal */
.rv{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition-duration:.01ms!important}
  .rv{opacity:1; transform:none}
}
/* ============================================================
   MENIU MOBIL — subcategorii
   ============================================================ */
.mnav a{display:flex; justify-content:space-between; align-items:center}
.mnav a em{font-style:normal; font-family:var(--font-body); font-size:11px; color:var(--text-mute)}
.msub{display:flex; flex-direction:column; padding:0 0 14px}
.msub a{font-family:var(--font-body); font-size:14px; font-weight:400; padding:8px 0 8px 14px;
  color:var(--text-dim); border-left:1px solid var(--line)}
.msub a:hover{color:var(--accent); border-color:var(--accent)}

/* ============================================================
   ANTET DE CATEGORIE
   ============================================================ */
.cat-hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:var(--surface)}
.cat-hero::before{content:""; position:absolute; top:-60%; right:-10%; width:70%; height:220%;
  background:radial-gradient(ellipse 50% 40% at 60% 50%, var(--glow), transparent 66%); pointer-events:none}
.cat-hero .wrap{position:relative; padding-block:clamp(24px,3vw,38px) 0}
.cat-hero-grid{display:grid; grid-template-columns:1fr 210px; gap:32px; align-items:center;
  padding-block:clamp(20px,3vw,34px) clamp(24px,3vw,34px)}
.cat-hero h1{font-size:clamp(30px,4.2vw,54px); letter-spacing:-.03em; max-width:18ch}
.cat-hero p{margin-top:16px; color:var(--text-dim); max-width:62ch; font-size:15px}
.cat-hero-art{justify-self:end; width:190px; border-radius:var(--r-md); padding:10px}
.cat-hero-art svg{width:100%; height:auto}
@media(max-width:820px){.cat-hero-grid{grid-template-columns:1fr} .cat-hero-art{display:none}}

.crumbs{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--text-mute); flex-wrap:wrap}
.crumbs a{color:var(--text-dim); transition:.25s var(--ease)}
.crumbs a:hover{color:var(--accent)}
.crumbs i{font-style:normal; opacity:.4}
.crumbs span:last-child{color:var(--text)}

.subrail{display:flex; gap:8px; overflow-x:auto; padding-block:4px 20px; scrollbar-width:none}
.subrail::-webkit-scrollbar{display:none}
.pill{flex:none; display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:30px;
  border:1px solid var(--line); font-size:13px; color:var(--text-dim); white-space:nowrap; transition:.3s var(--ease)}
.pill:hover{border-color:var(--accent-line); color:var(--text)}
.pill.on{background:var(--champagne); border-color:var(--champagne); color:#0B0B0C; font-weight:600}
.pill em{font-style:normal; font-size:11px; opacity:.65; font-variant-numeric:tabular-nums}

/* ============================================================
   CATALOG — filtre + rezultate
   ============================================================ */
.catalog{padding-block:clamp(32px,4vw,56px) clamp(64px,8vw,110px)}
.catalog-grid{display:grid; grid-template-columns:250px minmax(0,1fr); gap:clamp(24px,3vw,48px); align-items:start}
@media(max-width:980px){.catalog-grid{grid-template-columns:1fr}}

.filters{position:sticky; top:calc(var(--header-h) + 20px)}
.filters-head{display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid var(--line)}
.filters-head h4{font-size:15px}
.reset{font-size:12px; color:var(--text-mute); text-decoration:underline; text-underline-offset:3px}
.reset:hover{color:var(--accent)}
.fgroup{padding:22px 0; border-bottom:1px solid var(--line)}
.fgroup h5{font-family:var(--font-body); font-size:10.5px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-mute); margin:0 0 14px}
.fchips{display:flex; flex-wrap:wrap; gap:7px}
.fchips button{padding:7px 13px; border:1px solid var(--line); border-radius:20px; font-size:12.5px;
  color:var(--text-dim); transition:.28s var(--ease)}
.fchips button:hover{border-color:var(--accent-line); color:var(--text)}
.fchips button.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600}
.frow{display:flex; justify-content:space-between; margin-top:10px; font-size:11.5px; color:var(--text-mute)}
.frow b{color:var(--text); font-family:var(--font-display); font-weight:500; font-size:13px}
.prange{margin-top:6px; background:linear-gradient(90deg, var(--champagne), var(--line-strong))}
.fbrands{display:flex; flex-direction:column; gap:2px; max-height:230px; overflow-y:auto}
.fcheck{display:flex; align-items:center; gap:10px; padding:7px 0; font-size:13px; color:var(--text-dim); cursor:pointer}
.fcheck:hover{color:var(--text)}
.fcheck input{width:16px; height:16px; accent-color:var(--champagne); flex:none; cursor:pointer}
.fcheck span{flex:1}
.fcheck em{font-style:normal; font-size:11px; color:var(--text-mute); font-variant-numeric:tabular-nums}

.toolbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-bottom:22px; margin-bottom:24px;
  border-bottom:1px solid var(--line)}
.toolbar .count{font-size:13.5px; color:var(--text-dim)}
.toolbar .count b{color:var(--text); font-family:var(--font-display); font-weight:500}
.active-chips{display:flex; gap:7px; flex-wrap:wrap; flex:1}
.achip{display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:20px;
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-size:11.5px; font-weight:500}
.achip i{font-style:normal; opacity:.7}
.achip:hover{background:var(--champagne); border-color:var(--champagne); color:#0B0B0C}
.sort{display:flex; align-items:center; gap:10px; margin-left:auto; font-size:12.5px; color:var(--text-mute)}
.sort select{height:40px; padding:0 12px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--surface); font-size:13px; cursor:pointer}
.sort select:focus{outline:none; border-color:var(--accent)}
.filters-toggle{display:none}
.filters-toggle svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round}
@media(max-width:980px){
  .filters-toggle{display:inline-flex}
  .filters{position:static; display:none; margin-bottom:28px}
  .filters.open{display:block}
  .sort{margin-left:0}
}

.catalog .prod-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:1240px){.catalog .prod-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.catalog .prod-grid{grid-template-columns:1fr}}

.empty-state{text-align:center; padding:clamp(48px,7vw,90px) 20px; border:1px dashed var(--line-strong); border-radius:var(--r-lg)}
.empty-state h3{font-size:20px; margin-bottom:10px}
.empty-state p{color:var(--text-dim); font-size:14px; max-width:44ch; margin-inline:auto}
.more{display:flex; justify-content:center; margin-top:44px}

/* ============================================================
   PAGINA DE PRODUS
   ============================================================ */
.pdp-top{border-bottom:1px solid var(--line); position:relative; overflow:hidden}
.pdp-top::before{content:""; position:absolute; top:-40%; left:-5%; width:60%; height:180%;
  background:radial-gradient(ellipse 50% 42% at 50% 50%, var(--glow), transparent 68%); pointer-events:none}
.pdp-top .wrap{position:relative; padding-block:clamp(22px,3vw,34px) clamp(40px,5vw,72px)}
.pdp-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,64px); align-items:start; margin-top:clamp(20px,3vw,34px)}
/* minmax(0,1fr): fără asta coloana nu se poate strânge sub min-content-ul
   rândului de cumpărare și iese din grilă pe ecrane mici */
@media(max-width:940px){.pdp-grid{grid-template-columns:minmax(0,1fr)}}

.gallery{position:sticky; top:calc(var(--header-h) + 20px)}
@media(max-width:940px){.gallery{position:static}}
.stage{position:relative; aspect-ratio:4/3; border:1px solid var(--line); border-radius:var(--r-lg);
  display:grid; place-items:center; overflow:hidden}
.stage::after{content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 42%, var(--glow), transparent 62%); pointer-events:none}
.stage.v1::after,.stage.v2::after{opacity:.3}
.stage-art{width:66%; position:relative; z-index:1}
.stage .flag{top:18px; left:18px}
.stage svg{position:relative; z-index:1}
.beam-svg,.dim-svg{width:92%; height:auto}
.stage-empty{text-align:center; padding:40px; color:var(--text-dim); font-size:14px; max-width:34ch; position:relative; z-index:1}
.views{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap}
.view{padding:9px 16px; border:1px solid var(--line); border-radius:30px; font-size:12.5px;
  color:var(--text-dim); transition:.3s var(--ease)}
.view:hover{border-color:var(--accent-line); color:var(--text)}
.view.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600}

.buybox{display:flex; flex-direction:column; gap:26px}
.bb-head h1{font-size:clamp(24px,2.8vw,36px); letter-spacing:-.025em; margin:10px 0 14px}
.bb-meta{display:flex; align-items:center; gap:12px; font-size:12.5px; color:var(--text-mute); flex-wrap:wrap}
.bb-meta .stars:hover span{color:var(--accent)}
.bb-meta .sep{opacity:.4}
.bb-price{display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:22px 24px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); flex-wrap:wrap}
.price.big{font-size:34px}
.price.big del{display:inline; font-size:15px; margin-left:12px}
.bb-price small{display:block; margin-top:6px; font-size:12px; color:var(--text-mute)}
.stock{text-align:right; font-size:12.5px}
.stock b{display:inline-block; margin-left:6px; font-size:13px; color:#5CC98E}
.stock small{display:block; color:var(--text-mute); font-size:11.5px; margin-top:4px}

.vgroup + .vgroup{margin-top:22px}
.vgroup h5{font-family:var(--font-body); font-size:10.5px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text-mute); margin:0 0 12px}
.vgroup h5 em{font-style:normal; letter-spacing:0; text-transform:none; font-weight:400; font-size:12px; margin-left:6px}
.vchips{display:flex; gap:8px; flex-wrap:wrap}
.vchip{display:inline-flex; align-items:center; padding:10px 18px; border:1px solid var(--line);
  border-radius:var(--r-sm); font-size:13px; color:var(--text-dim); transition:.28s var(--ease)}
.vchip:hover{border-color:var(--accent-line); color:var(--text)}
.vchip.on{border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:600}

.bb-buy{display:flex; gap:10px; align-items:stretch}
.bb-buy .btn{flex:1; height:56px}
.qty{display:flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--r-sm); overflow:hidden; flex:none}
.qty button{width:44px; height:56px; font-size:18px; color:var(--text-dim); transition:.25s var(--ease)}
.qty button:hover{color:var(--accent); background:var(--accent-soft)}
.qty input{width:40px; height:56px; text-align:center; background:none; border:0;
  font-family:var(--font-display); font-size:15px; font-weight:500}
.qty input:focus{outline:none}
.bb-fav{width:56px; height:56px; border:1px solid var(--line-strong); flex:none}
@media(max-width:460px){
  .bb-buy{flex-wrap:wrap}
  .bb-buy .btn{order:3; flex:1 0 100%}
  .bb-fav{margin-left:auto}
}

.bb-trust{list-style:none; margin:0; padding:22px 0 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:18px}
.bb-trust li{display:flex; gap:14px; align-items:flex-start}
.bb-trust svg{width:22px; height:22px; stroke:var(--accent); fill:none; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round; flex:none; margin-top:2px}
.bb-trust b{display:block; font-size:13.5px; font-weight:600}
.bb-trust span{font-size:12.5px; color:var(--text-mute)}
.bb-trust a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}

.pdp-sec{padding-block:clamp(56px,7vw,96px)}
.spec-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
@media(max-width:760px){.spec-grid{grid-template-columns:1fr}}
.spec-card{border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); padding:26px 28px}
.spec-card h4{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  font-family:var(--font-body); font-weight:600; margin:0 0 18px}
.spec-card table{width:100%; border-collapse:collapse}
.spec-card tr + tr th,.spec-card tr + tr td{border-top:1px solid var(--line)}
.spec-card th{text-align:left; font-weight:400; font-size:13.5px; color:var(--text-dim); padding:11px 0}
.spec-card td{text-align:right; font-size:13.5px; font-weight:500; padding:11px 0; font-variant-numeric:tabular-nums}

.photo-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,64px); align-items:center}
@media(max-width:940px){.photo-grid{grid-template-columns:1fr}}
.photo-grid h2{font-size:clamp(26px,3.2vw,40px); margin:18px 0 16px}
.photo-grid p{color:var(--text-dim); font-size:15px; max-width:52ch}
.photo-stage{border:1px solid var(--line); border-radius:var(--r-lg);
  display:grid; place-items:center; aspect-ratio:4/3; overflow:hidden}
.lux-table{width:100%; border-collapse:collapse; margin-top:28px; font-size:13.5px}
.lux-table th{text-align:left; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-mute); font-weight:600; padding:0 0 12px}
.lux-table td{padding:13px 0; border-top:1px solid var(--line); color:var(--text-dim)}
.lux-table td b{color:var(--text); font-family:var(--font-display); font-weight:500; font-size:15px}
.note{margin-top:22px; font-size:12.5px; color:var(--text-mute); padding-left:14px; border-left:2px solid var(--accent-line)}
.note b{color:var(--text-dim)}
.note a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}

.rev-layout{display:grid; grid-template-columns:270px minmax(0,1fr); gap:clamp(24px,3vw,48px); align-items:start}
@media(max-width:860px){.rev-layout{grid-template-columns:1fr}}
.rev-summary{border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); padding:28px; text-align:center}
.rev-big{font-family:var(--font-display); font-size:52px; font-weight:500; letter-spacing:-.03em; line-height:1}
.rev-summary .stars{justify-content:center; margin:10px 0 4px}
.rev-summary .stars i{font-size:14px}
.rev-count{font-size:12px; color:var(--text-mute)}
.rev-bars{margin-top:22px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:9px}
.rbar{display:flex; align-items:center; gap:10px; font-size:11.5px; color:var(--text-mute)}
.rtrack{flex:1; height:5px; border-radius:3px; background:var(--surface-3); overflow:hidden}
.rtrack i{display:block; height:100%; background:var(--champagne); border-radius:3px}
.rbar em{font-style:normal; min-width:26px; text-align:right; font-variant-numeric:tabular-nums}
.rev-list{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:1100px){.rev-list{grid-template-columns:1fr}}

.sticky-buy{position:fixed; left:0; right:0; bottom:0; z-index:70; border-top:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(18px);
  transform:translateY(102%); transition:.4s var(--ease)}
.sticky-buy.on{transform:none}
.sticky-buy .wrap{display:flex; align-items:center; gap:18px; height:76px}
.sb-img{width:48px; height:48px; border-radius:var(--r-sm);
  display:grid; place-items:center; flex:none; overflow:hidden}
.sb-img svg{width:80%; height:80%}
.sb-txt{min-width:0; flex:1}
.sb-txt b{display:block; font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sb-txt span{font-size:11.5px; color:var(--text-mute); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; display:block}
.sticky-buy .price{font-size:18px; flex:none}
@media(max-width:640px){.sb-txt span,.sb-img{display:none}}

/* titlul din card devine link */
.card h3 a{color:inherit}
.card h3 a:hover{color:var(--accent)}