/* ============================================================
   Turnat — sistem vizual "beton + lumina"
   Mobile-first. Paleta: alb cald, bej, gri beton, antracit, teracota.
   ============================================================ */
:root{
  --alb:#F7F5F2;
  --bej:#E9E3DA;
  --gri:#B8B2A9;
  --gri-inchis:#8A857C;
  --antracit:#2B2B2B;
  --accent:#C06B4E;      /* teracota — folosit rar */
  --accent-hov:#A85940;
  --linie:#DED8CF;
  --ok:#4B7B5A; --err:#B4472F; --info:#5A6B7B;
  --radius:14px;
  --shadow:0 2px 8px rgba(43,43,43,.06);
  --shadow-lg:0 12px 40px rgba(43,43,43,.12);
  --font-titlu:'Fraunces',Georgia,serif;
  --font-text:'Inter',-apple-system,system-ui,sans-serif;
}
/* ============ TEME DE CULOARE (paleta comutabila) ============ */
/* Tema implicita e in :root de mai jos. Vizitatorul poate alege alta. */
[data-theme="warm"]{     /* Beton cald (implicit) */
  --alb:#F7F5F2;--bej:#E9E3DA;--gri:#B8B2A9;--gri-inchis:#8A857C;
  --antracit:#2B2B2B;--accent:#C06B4E;--accent-hov:#A85940;--linie:#DED8CF}
[data-theme="sage"]{     /* Verde salvie, natural */
  --alb:#F6F6F2;--bej:#E4E7DD;--gri:#B4B9AB;--gri-inchis:#7E8474;
  --antracit:#2C302A;--accent:#7A8B6F;--accent-hov:#63755A;--linie:#DBDED2}
[data-theme="dusk"]{     /* Albastru-cenusiu, sofisticat */
  --alb:#F4F5F7;--bej:#E1E4EA;--gri:#AEB4C0;--gri-inchis:#767E8D;
  --antracit:#282C33;--accent:#5B7A9C;--accent-hov:#496585;--linie:#D6DAE1}
[data-theme="mono"]{     /* Alb-negru minimalist */
  --alb:#F7F7F6;--bej:#E8E8E6;--gri:#B5B5B2;--gri-inchis:#828280;
  --antracit:#1E1E1E;--accent:#1E1E1E;--accent-hov:#000;--linie:#DDDDDB}

/* selector de tema (buton flotant) */
.theme-fab{position:fixed;bottom:20px;right:20px;z-index:60;width:48px;height:48px;
  border-radius:50%;background:var(--antracit);color:var(--alb);border:none;cursor:pointer;
  box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;transition:.2s}
.theme-fab:hover{transform:scale(1.08) rotate(15deg)}
.theme-panel{position:fixed;bottom:78px;right:20px;z-index:60;background:#fff;
  border:1px solid var(--linie);border-radius:14px;padding:14px;box-shadow:var(--shadow-lg);
  display:none;width:190px}
.theme-panel.open{display:block;animation:fadeInUp .3s ease both}
.theme-panel h5{margin:0 0 10px;font-family:var(--font-text);font-size:.75rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--gri-inchis)}
.theme-opts{display:flex;flex-direction:column;gap:6px}
.theme-opt{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;
  cursor:pointer;border:1px solid transparent;transition:.15s;font-size:.9rem;background:none;width:100%;text-align:left}
.theme-opt:hover{background:var(--bej)}
.theme-opt.active{border-color:var(--antracit)}
.theme-dots{display:flex;gap:3px}
.theme-dot{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.1)}
.theme-dot.rainbow-dot{background:conic-gradient(red,orange,yellow,lime,cyan,blue,magenta,red);
  animation:rainbow-spin 3s linear infinite}
@keyframes rainbow-spin{to{transform:rotate(360deg)}}

/* --------- tema RAINBOW / NEON (doar cu cont) --------- */
@property --hue{syntax:'<number>';inherits:true;initial-value:0}
[data-theme="rainbow"]{
  --hue:0;
  --alb:#0e0e14;--bej:#1b1b26;--gri:#3a3a4a;--gri-inchis:#9aa0c0;
  --antracit:#f0f0ff;
  --accent:hsl(var(--hue) 100% 60%);
  --accent-hov:hsl(calc(var(--hue) + 40) 100% 55%);
  --linie:hsl(var(--hue) 60% 30%);
  animation:rainbow-hue 8s linear infinite;
}
@keyframes rainbow-hue{to{--hue:360}}

/* --------- RADIO (buton plutitor, deasupra selectorului de teme) --------- */
.radio-fab{position:fixed;bottom:80px;right:20px;z-index:60;width:48px;height:48px;
  border-radius:50%;background:var(--accent);color:#fff;border:none;cursor:pointer;
  box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;transition:.2s}
.radio-fab:hover{transform:scale(1.08)}
.radio-fab.playing{animation:radio-pulse 1.6s ease-in-out infinite}
@keyframes radio-pulse{0%,100%{box-shadow:var(--shadow-lg)}50%{box-shadow:0 0 0 8px rgba(192,107,78,.28)}}
.radio-panel{position:fixed;bottom:138px;right:20px;z-index:60;background:#fff;
  border:1px solid var(--linie);border-radius:14px;padding:14px;box-shadow:var(--shadow-lg);
  display:none;width:270px;max-height:65vh;overflow:auto}
.radio-panel.open{display:block;animation:fadeInUp .3s ease both}
.radio-panel h5{margin:0 0 10px;font-family:var(--font-text);font-size:.75rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--gri-inchis)}
.radio-station{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px;border-radius:10px;cursor:pointer;border:1px solid transparent;font-size:.88rem;
  width:100%;background:none;text-align:left}
.radio-station:hover{background:var(--bej)}
.radio-station.active{border-color:var(--antracit);font-weight:600}
.radio-controls{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--linie)}
.radio-controls input[type=range]{flex:1}
.radio-propune-link{display:block;margin-top:10px;font-size:.82rem;color:var(--gri-inchis)}

/* --------- PROPUNERI / FEEDBACK (buton plutitor, deasupra radioului) --------- */
.feedback-fab{position:fixed;bottom:140px;right:20px;z-index:60;width:48px;height:48px;
  border-radius:50%;background:var(--antracit);color:var(--alb);border:none;cursor:pointer;
  box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;transition:.2s}
.feedback-fab:hover{transform:scale(1.08)}
.feedback-panel{position:fixed;bottom:198px;right:20px;z-index:61;background:#fff;
  border:1px solid var(--linie);border-radius:14px;padding:16px;box-shadow:var(--shadow-lg);
  display:none;width:290px;max-height:75vh;overflow:auto}
.feedback-panel.open{display:block;animation:fadeInUp .3s ease both}
.feedback-panel h5{margin:0 0 10px;font-family:var(--font-text);font-size:.75rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--gri-inchis)}
.feedback-panel label{display:block;font-size:.82rem;margin-top:10px;color:var(--gri-inchis)}
.feedback-panel input,.feedback-panel select,.feedback-panel textarea{
  width:100%;padding:8px;margin-top:4px;border:1px solid var(--linie);border-radius:8px;
  font-family:inherit;font-size:.88rem}
@media(max-width:480px){
  .theme-panel,.radio-panel,.feedback-panel{width:calc(100vw - 40px);max-width:300px}
}

.despre-photo{margin-top:26px}
.despre-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);
  background:var(--gri);box-shadow:var(--shadow-lg)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* ============ ANIMATII PREMIUM ============ */
/* apar lin la scroll */
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.visible{opacity:1;transform:none}
/* intarziere in cascada pentru grile */
.reveal-2{transition-delay:.08s}
.reveal-3{transition-delay:.16s}
.reveal-4{transition-delay:.24s}
/* respecta preferinta "reduce motion" (accesibilitate) */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}
/* fade-in general la incarcarea paginii */
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero > .container > .hero-grid > div:first-child{animation:fadeInUp .8s cubic-bezier(.22,.61,.36,1) both}
.hero-visual{animation:fadeInUp 1s cubic-bezier(.22,.61,.36,1) .15s both}
body{
  margin:0;font-family:var(--font-text);color:var(--antracit);
  background:var(--alb);line-height:1.6;font-size:16px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-titlu);font-weight:500;line-height:1.15;margin:0 0 .4em}
h1{font-size:clamp(2rem,6vw,3.4rem)}
h2{font-size:clamp(1.5rem,4vw,2.3rem)}
h3{font-size:1.25rem}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.muted{color:var(--gri-inchis)}
.center{text-align:center}

/* ---------- butoane ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;justify-content:center;
  padding:13px 26px;border-radius:40px;border:1px solid var(--antracit);
  background:var(--antracit);color:var(--alb);font-weight:500;cursor:pointer;
  font-size:.95rem;transition:.2s;font-family:var(--font-text)}
.btn:hover{background:#000;transform:translateY(-1px)}
.btn-accent{background:var(--accent);border-color:var(--accent)}
.btn-accent:hover{background:var(--accent-hov);border-color:var(--accent-hov)}
.btn-ghost{background:transparent;color:var(--antracit)}
.btn-ghost:hover{background:var(--bej)}
.btn-sm{padding:8px 16px;font-size:.85rem}
.btn-block{width:100%}
.btn-wa{background:#25D366;border-color:#25D366;color:#fff}
.btn-tg{background:#0088cc;border-color:#0088cc;color:#fff}

/* ---------- popup cookie-uri (modal) ---------- */
.cookie-overlay{position:fixed;inset:0;z-index:200;background:rgba(20,20,18,.55);
  backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px}
.cookie-modal{background:var(--alb);border-radius:18px;max-width:440px;width:100%;
  padding:32px 28px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);
  animation:fadeInUp .35s cubic-bezier(.22,.61,.36,1) both}
.cookie-modal-ico{font-size:2.4rem;margin-bottom:8px}
.cookie-modal h3{margin:0 0 10px}
.cookie-modal p{color:var(--gri-inchis);font-size:.92rem;margin:0 0 12px}
.cookie-modal-link{display:inline-block;color:var(--accent);font-size:.85rem;margin-bottom:20px}
.cookie-modal-actions{display:flex;flex-direction:column;gap:8px}
.cookie-modal-actions .btn{width:100%}

/* ---------- bara animata de sus (marquee, banda plina non-stop) ---------- */
.ticker{background:var(--accent);color:#fff;overflow:hidden;white-space:nowrap;
  height:38px;display:flex;align-items:center}
/* mai multe copii identice, asezate una langa alta, se misca impreuna -> banda mereu plina */
.ticker-track{display:inline-flex;align-items:center;flex-shrink:0;
  animation:tickerScroll 30s linear infinite;will-change:transform}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{padding:0 22px;font-size:.88rem;font-weight:500;line-height:38px}
.ticker-link{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ticker-link:hover{opacity:.85}
/* logo cu ~30% mai mare decat banda, iese proeminent, apare des (dupa fiecare mesaj) */
.ticker-logo{height:50px;width:auto;padding:0 18px;
  filter:brightness(0) invert(1);opacity:.95;vertical-align:middle;display:block}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---------- retele sociale (follow) ---------- */
.social-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;padding:4px 0}
.social-btn{width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;background:#fff;color:var(--antracit);border:1px solid var(--linie);
  transition:.18s;flex-shrink:0;line-height:0}
.social-btn svg{display:block;margin:auto}
.social-btn:hover{background:var(--sc,var(--antracit));color:#fff;border-color:var(--sc,var(--antracit));transform:translateY(-3px)}
.site-footer .social-row{justify-content:flex-start}
.site-footer .social-btn{background:transparent;color:var(--gri);border-color:#444}
.site-footer .social-btn:hover{background:var(--sc);color:#fff;border-color:var(--sc)}
@media(max-width:560px){
  .social-row{gap:12px}
  .social-btn{width:44px;height:44px}
}

/* ---------- banda intunecata (CTA premium, cu margini rotunjite) ---------- */
.dark-band{background:linear-gradient(120deg,var(--antracit),#3a3a37);color:var(--alb);
  border-radius:calc(var(--radius) + 6px);padding:56px 32px;box-shadow:var(--shadow-lg)}
@media(max-width:560px){.dark-band{padding:40px 22px}}

/* ---------- canal telegram CTA ---------- */
.tg-cta{display:flex;align-items:center;gap:18px;
  background:linear-gradient(100deg,#2f2f2d,#3a3a37);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);padding:26px 30px;flex-wrap:wrap;box-shadow:var(--shadow-lg)}
.tg-ico{color:#2AABEE;flex-shrink:0;display:flex}
.tg-ico svg{display:block}
.tg-cta > div[style]{flex:1 1 240px;min-width:200px}   /* textul nu se mai suprapune cu butonul */
.tg-cta .btn-tg{flex-shrink:0}
/* pe ecrane mici + medii, aseaza pe verticala ca sa nu se inghesuie nimic */
@media(max-width:680px){
  .tg-cta{flex-direction:column;text-align:center;padding:24px 20px;gap:14px}
  .tg-cta > div[style]{min-width:0;width:100%}
  .tg-cta .btn-tg{width:100%}
  .promo-bar{font-size:.8rem;padding:8px 12px}
}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(247,245,242,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{display:flex;flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(43,43,43,.15))}
.logo-mark svg{display:block}
.logo-txt{font-family:var(--font-titlu);font-size:1.4rem;font-weight:500;
  letter-spacing:.01em;line-height:1;color:var(--antracit);display:flex;flex-direction:column}
.logo-txt-2{font-family:var(--font-text);font-size:.62rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.32em;color:var(--gri-inchis);margin-top:2px}
.site-footer .logo-txt{color:var(--alb)}
.site-footer .logo-txt-2{color:var(--gri)}
/* logo-ul tau (imagine transparenta, alb/gri) */
/* header alb-cald: FARA fundal. Inversam culorile logo-ului ca sa apara inchis si vizibil. */
.logo-img-wrap{display:flex;align-items:center;background:none;padding:0;box-shadow:none}
.logo-img{height:52px;width:auto;display:block;filter:invert(1) brightness(.3)}
/* daca lipseste imaginea, aratam numele scris (fallback) */
.logo-fallback{flex-direction:column;line-height:1;color:var(--antracit);font-family:var(--font-titlu);font-size:1.4rem}
.logo-fallback-2{font-family:var(--font-text);font-size:.6rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.3em;color:var(--gri-inchis);margin-top:2px}
/* footer e deja inchis -> logo-ul deschis apare direct, mai mare */
.logo-img-footer{height:64px;width:auto;display:block;margin-bottom:8px}
@media(max-width:560px){.logo-img{height:44px}}
@media(max-width:400px){.logo-img{height:38px}}
.nav-links{display:none;gap:26px;align-items:center}
.nav-links a{font-size:.92rem;color:var(--gri-inchis);transition:.2s}
.nav-links a:hover{color:var(--antracit)}
.nav-actions{display:flex;align-items:center;gap:14px}
.lang-switch{position:relative;font-size:.8rem}
.lang-current{display:flex;align-items:center;gap:3px;padding:5px 9px;border-radius:6px;
  color:var(--gri-inchis);background:none;border:1px solid var(--linie);cursor:pointer;
  font-family:inherit;font-size:.8rem}
.lang-current:hover{background:var(--bej)}
.lang-caret{font-size:.7rem}
.lang-dropdown{position:absolute;top:calc(100% + 6px);right:0;background:#fff;
  border:1px solid var(--linie);border-radius:10px;box-shadow:var(--shadow-lg);
  display:none;min-width:60px;overflow:hidden;z-index:50}
.lang-dropdown.open{display:block}
.lang-dropdown a{display:block;padding:8px 12px;color:var(--gri-inchis)}
.lang-dropdown a:hover{background:var(--bej);color:var(--antracit)}
.cart-link{position:relative;font-size:.92rem}
.cart-badge{position:absolute;top:-8px;right:-12px;background:var(--accent);
  color:#fff;font-size:.68rem;min-width:18px;height:18px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;padding:0 4px}
.burger{background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--antracit);
  padding:4px;line-height:1}
@media(min-width:900px){.nav-links{display:flex}.burger{display:none}}
/* telefoane mici: stramteaza header-ul ca sa incapa tot fara suprapuneri */
@media(max-width:400px){
  .logo-txt{font-size:1.15rem}
  .logo-txt-2{font-size:.55rem;letter-spacing:.24em}
  .logo-mark svg{width:20px;height:20px}
  .nav-actions{gap:8px}
  .lang-current{padding:5px 7px}
  .cart-link{font-size:.85rem}
}

.mobile-menu{display:none;flex-direction:column;padding:12px 20px 20px;
  border-bottom:1px solid var(--linie);background:var(--alb)}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:10px 0;border-bottom:1px solid var(--linie);color:var(--antracit)}

/* ---------- hero ---------- */
.hero{padding:64px 0 72px;background:
  radial-gradient(120% 90% at 80% -10%,var(--bej) 0%,var(--alb) 55%)}
.hero-grid{display:grid;gap:36px;align-items:center}
.hero h1{margin-bottom:.3em}
.hero .lead{font-size:1.15rem;color:var(--gri-inchis);max-width:46ch;margin-bottom:1.6em}
.hero-visual{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);
  background:var(--bej);aspect-ratio:4/3}
@media(min-width:900px){.hero-grid{grid-template-columns:1.05fr 1fr}
  .hero{padding:90px 0 100px}}

/* ---------- sectiuni ---------- */
section{padding:56px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;
  margin-bottom:28px;gap:16px;flex-wrap:wrap}
.section-head p{margin:.2em 0 0;color:var(--gri-inchis)}
.eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--accent);font-weight:600;margin-bottom:.6em}

/* ---------- categorii ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.cat-card{position:relative;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:1;background:var(--bej);box-shadow:var(--shadow);transition:.25s}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.cat-card .label{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  background:linear-gradient(transparent,rgba(43,43,43,.55));color:#fff;
  font-family:var(--font-titlu);font-size:1.05rem}
@media(min-width:700px){.cat-grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- produse ---------- */
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:700px){.product-grid{grid-template-columns:repeat(3,1fr);gap:24px}}
@media(min-width:1000px){.product-grid{grid-template-columns:repeat(4,1fr)}}
.p-card{background:var(--alb);border-radius:var(--radius);overflow:hidden;
  transition:.22s;border:1px solid transparent}
.p-card:hover{transform:translateY(-4px)}
.p-card:hover .p-img{box-shadow:var(--shadow-lg)}
.p-img{position:relative;aspect-ratio:1;border-radius:var(--radius);overflow:hidden;
  background:var(--bej);box-shadow:var(--shadow);transition:.22s}
.p-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.p-card:hover .p-img img{transform:scale(1.06)}
.p-badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px}
.badge{font-size:.68rem;font-weight:600;padding:4px 10px;border-radius:20px;
  background:var(--antracit);color:#fff;text-transform:uppercase;letter-spacing:.04em}
.badge.comanda{background:var(--gri-inchis)}
.badge.epuizat{background:#9a9a9a}
.badge.reducere{background:var(--err)}
/* embleme colorate */
.badge-nou{background:var(--accent)}
.badge-set{background:#5A6B7B}
.badge-oferta{background:var(--err)}
.badge-cadou{background:#8A5A7B}
.badge-limitat{background:#2B2B2B}
.badge-bestseller{background:#B8860B}
.badge-handmade{background:#4B7B5A}
.p-info{padding:14px 4px 6px}
.p-cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gri-inchis)}
.p-name{font-family:var(--font-titlu);font-size:1.08rem;margin:4px 0 6px;line-height:1.2}
.p-price{font-weight:600}
.p-price .old{color:var(--gri-inchis);text-decoration:line-through;font-weight:400;
  margin-right:8px;font-size:.9em}
.p-price .now{color:var(--accent)}

/* ---------- pagina produs ---------- */
.pd-grid{display:grid;gap:32px}
@media(min-width:900px){.pd-grid{grid-template-columns:1.1fr 1fr}}
/* vizualizator 360 */
.viewer360{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--bej);
  aspect-ratio:1;box-shadow:var(--shadow);cursor:grab;user-select:none;touch-action:pan-y}
.viewer360.grabbing{cursor:grabbing}
.v360-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:none;pointer-events:none}
.v360-frame.show{display:block}
.v360-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  background:rgba(43,43,43,.75);color:#fff;font-size:.78rem;padding:5px 12px;
  border-radius:20px;pointer-events:none}
.viewer360.grabbing .v360-hint{opacity:0}

.gallery-main{border-radius:var(--radius);overflow:hidden;background:var(--bej);
  aspect-ratio:1;box-shadow:var(--shadow)}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.gallery-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.gallery-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:8px;
  cursor:pointer;border:2px solid transparent;background:var(--bej)}
.gallery-thumbs img.active{border-color:var(--antracit)}
.pd-price{font-size:1.7rem;font-weight:600;margin:.3em 0}
.sale-timer{display:inline-block;background:#F6E3DD;color:var(--err);font-size:.85rem;
  padding:6px 14px;border-radius:8px;margin-bottom:12px;font-weight:500}
.pd-price .old{font-size:1.1rem}
.spec-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.92rem}
.spec-table td{padding:9px 0;border-bottom:1px solid var(--linie)}
.spec-table td:first-child{color:var(--gri-inchis);width:42%}
.handmade-note{background:var(--bej);border-left:3px solid var(--accent);
  padding:14px 16px;border-radius:8px;font-size:.9rem;margin:18px 0}
/* ---------- variante de culoare (swatches) ---------- */
.variant-picker{margin:18px 0}
.variant-label{font-size:.9rem;color:var(--gri-inchis);margin-bottom:10px}
.variant-label span{color:var(--antracit);font-weight:500}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatch{width:38px;height:38px;border-radius:50%;border:2px solid var(--linie);
  cursor:pointer;padding:0;transition:.15s;position:relative;box-shadow:inset 0 0 0 2px #fff}
.swatch:hover{transform:scale(1.08)}
.swatch.active{border-color:var(--antracit);box-shadow:inset 0 0 0 2px #fff,0 0 0 2px var(--antracit)}
.swatch.oos{position:relative;opacity:.75}
.swatch.oos::after{content:"";position:absolute;left:50%;top:50%;width:135%;height:3px;
  background:#d33;transform:translate(-50%,-50%) rotate(-45deg);border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.preorder-note{background:var(--bej);border-left:3px solid var(--accent);
  padding:12px 16px;border-radius:8px;font-size:.88rem;margin-bottom:14px}

.qty-row{display:flex;gap:12px;align-items:center;margin:18px 0}
.qty-input{width:70px;padding:11px;border:1px solid var(--linie);border-radius:10px;
  text-align:center;font-size:1rem}
.msg-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* ---------- filtre catalog ---------- */
.catalog-layout{display:grid;gap:28px}
@media(min-width:900px){.catalog-layout{grid-template-columns:240px 1fr}}
.filters{background:var(--alb);border:1px solid var(--linie);border-radius:var(--radius);
  padding:20px;height:fit-content;position:relative}
/* sticky DOAR pe desktop (2 coloane). Pe mobil filtrul curge normal, nu pluteste peste produse */
@media(min-width:900px){.filters{position:sticky;top:80px}}
.filter-group{margin-bottom:20px}
.filter-group h4{font-family:var(--font-text);font-size:.8rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--gri-inchis);margin-bottom:10px}
.filter-group label{display:block;padding:5px 0;font-size:.92rem;cursor:pointer}
.filter-group select,.filter-group input{width:100%;padding:9px;border:1px solid var(--linie);
  border-radius:8px;font-size:.9rem;font-family:inherit;background:#fff}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;
  gap:12px;flex-wrap:wrap}

/* ---------- cos / checkout ---------- */
.cart-item{display:grid;grid-template-columns:80px 1fr auto;gap:14px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--linie)}
.cart-item img{width:80px;height:80px;object-fit:cover;border-radius:10px;background:var(--bej)}
.summary-box{background:var(--alb);border:1px solid var(--linie);border-radius:var(--radius);
  padding:22px}
.summary-row{display:flex;justify-content:space-between;padding:7px 0}
.summary-total{display:flex;justify-content:space-between;padding:14px 0 0;margin-top:10px;
  border-top:1px solid var(--linie);font-weight:600;font-size:1.2rem}
.form-grid{display:grid;gap:16px}
@media(min-width:700px){.form-grid.two{grid-template-columns:1fr 1fr}}
.field label{display:block;font-size:.85rem;color:var(--gri-inchis);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:12px;border:1px solid var(--linie);
  border-radius:10px;font-size:1rem;font-family:inherit;background:#fff}
.field textarea{min-height:90px;resize:vertical}
.pay-option,.del-option{display:flex;gap:12px;align-items:flex-start;padding:14px;
  border:1px solid var(--linie);border-radius:12px;margin-bottom:10px;cursor:pointer;transition:.15s}
.pay-option:hover,.del-option:hover{border-color:var(--gri)}
.pay-option input,.del-option input{margin-top:3px}
.checkout-grid{display:grid;gap:28px}
@media(min-width:900px){.checkout-grid{grid-template-columns:1.4fr 1fr}}
.coupon-field{background:var(--bej);padding:14px 16px;border-radius:12px;border:1px dashed var(--gri)}
.coupon-field small{display:block;margin-top:6px}

/* ---------- proces / beneficii ---------- */
.steps{display:grid;gap:24px}
@media(min-width:700px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{text-align:center}
.step .num{width:44px;height:44px;border-radius:50%;background:var(--bej);
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;
  font-family:var(--font-titlu);font-size:1.2rem}
.benefits{display:grid;gap:18px}
@media(min-width:700px){.benefits{grid-template-columns:repeat(3,1fr)}}
.benefit{padding:22px;background:var(--alb);border:1px solid var(--linie);border-radius:var(--radius)}
.benefit .ico{width:40px;height:40px;margin-bottom:12px;color:var(--accent)}

/* ---------- pagina proces (pasi alternati) ---------- */
.proc-step{display:grid;gap:28px;align-items:center}
@media(min-width:800px){.proc-step{grid-template-columns:1fr 1fr}
  .proc-step.reverse .proc-visual{order:2}}
.proc-visual{position:relative;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:4/3;background:var(--gri);box-shadow:var(--shadow)}
.proc-visual img{width:100%;height:100%;object-fit:cover}
.proc-photo-hint{position:absolute;bottom:10px;left:10px;background:rgba(43,43,43,.7);
  color:#fff;font-size:.72rem;padding:4px 10px;border-radius:6px}
.proc-text h2{margin-bottom:.3em}

/* ---------- banner joc (homepage) ---------- */
.game-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:linear-gradient(100deg,var(--antracit),#3a3a3a);color:var(--alb);
  padding:16px 24px;border-radius:var(--radius);font-weight:500;transition:.2s}
.game-banner:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.game-banner-arrow{font-size:1.3rem;transition:transform .2s}
.game-banner:hover .game-banner-arrow{transform:translateX(5px)}

/* ---------- joc zilnic (sparge betonul) ---------- */
.game-stage{position:relative;margin:24px auto;height:220px;display:flex;
  align-items:center;justify-content:center}
.block{cursor:pointer;user-select:none;transition:transform .1s;filter:drop-shadow(0 8px 20px rgba(43,43,43,.2))}
.block.shake{animation:blockShake .25s}
@keyframes blockShake{0%,100%{transform:translate(0,0) rotate(0)}
  25%{transform:translate(-4px,2px) rotate(-1.5deg)}
  75%{transform:translate(4px,-2px) rotate(1.5deg)}}
.block.broken{animation:blockBreak .5s forwards}
@keyframes blockBreak{to{transform:scale(1.15) rotate(3deg);opacity:0;filter:blur(2px)}}
.crack{opacity:0;transition:opacity .25s;stroke-dasharray:300;stroke-dashoffset:300}
.crack.show{opacity:1;animation:drawCrack .4s forwards}
@keyframes drawCrack{to{stroke-dashoffset:0}}
.hammer{position:absolute;top:0;right:30%;font-size:2.4rem;transform-origin:bottom right;
  opacity:0;pointer-events:none}
.hammer.swing{animation:swing .28s}
@keyframes swing{0%{opacity:1;transform:rotate(-45deg) translateY(-10px)}
  50%{opacity:1;transform:rotate(10deg) translateY(0)}100%{opacity:0;transform:rotate(0)}}

.game-result{display:none;margin-top:20px;animation:fadeInUp .5s both}
.game-result.show{display:block}
.game-won-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.18em;color:var(--gri-inchis)}
.game-prize{font-family:var(--font-titlu);font-size:4rem;color:var(--accent);line-height:1;margin:6px 0 16px}
.game-code-box{display:inline-flex;align-items:center;gap:12px;background:var(--bej);
  border:1px dashed var(--gri);border-radius:12px;padding:12px 18px;flex-wrap:wrap;justify-content:center}
.game-code-box strong{font-family:monospace;font-size:1.2rem;letter-spacing:.08em}
.confetti{position:fixed;top:30%;width:9px;height:9px;border-radius:2px;z-index:80;
  pointer-events:none;animation:confettiFall 2.2s ease-out forwards}
@keyframes confettiFall{to{top:100%;opacity:0;transform:translateY(0) rotate(540deg)}}

/* ---------- carduri politici (premium) ---------- */
.policy-card{display:flex;gap:20px;align-items:flex-start;padding:24px;margin-top:16px;
  background:var(--alb);border:1px solid var(--linie);border-radius:var(--radius);transition:.25s}
.policy-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.policy-num{font-family:var(--font-titlu);font-size:1.8rem;color:var(--accent);
  flex-shrink:0;line-height:1;opacity:.7}
.policy-card h3{margin:0 0 .4em}

/* ---------- pagini de continut editate ---------- */
.page-content{line-height:1.7;color:var(--antracit)}
.page-content h2,.page-content h3{margin-top:1.4em}
.page-content p{margin:0 0 1em}
.page-content ul,.page-content ol{margin:0 0 1em;padding-left:22px}
.page-content li{margin:.3em 0}

/* ---------- faq ---------- */
.faq-item{border-bottom:1px solid var(--linie)}
.faq-q{padding:18px 0;cursor:pointer;font-weight:500;display:flex;justify-content:space-between}
.faq-a{padding:0 0 18px;color:var(--gri-inchis);display:none}
.faq-item.open .faq-a{display:block}

/* ---------- recenzii ---------- */
.reviews{display:grid;gap:18px}
@media(min-width:700px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{padding:22px;background:var(--bej);border-radius:var(--radius)}
.review .stars{color:var(--accent);margin-bottom:8px}

/* ---------- footer ---------- */
.site-footer{background:var(--antracit);color:var(--gri);padding:56px 0 28px;margin-top:40px}
.footer-grid{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:700px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.site-footer h4{color:var(--alb);font-family:var(--font-text);font-size:.85rem;
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.site-footer a{color:var(--gri);display:block;padding:5px 0;font-size:.92rem}
.site-footer a:hover{color:var(--alb)}
.footer-bottom{margin-top:36px;padding-top:20px;border-top:1px solid #444;
  font-size:.82rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ---------- flash ---------- */
.flash{padding:13px 18px;border-radius:10px;margin-bottom:14px;font-size:.92rem}
.flash.success{background:#E4F0E8;color:var(--ok)}
.flash.error{background:#F6E3DD;color:var(--err)}
.flash.info{background:#E3E9F0;color:var(--info)}

/* ---------- admin ---------- */
.admin-wrap{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.admin-side{background:var(--antracit);color:var(--gri);padding:24px 0}
.admin-side .brand{padding:0 22px 22px;color:var(--alb);font-family:var(--font-titlu);
  font-size:1.3rem;border-bottom:1px solid #444;margin-bottom:14px}
.admin-side a{display:block;padding:11px 22px;color:var(--gri);font-size:.92rem}
.admin-side a:hover,.admin-side a.active{background:#3a3a3a;color:var(--alb)}
.side-badge{display:inline-block;min-width:18px;padding:1px 6px;margin-left:6px;
  background:var(--err,#b4472f);color:#fff;border-radius:20px;font-size:.72rem;text-align:center}
.admin-main{padding:28px 32px;background:var(--alb)}
.admin-main h1{font-size:1.6rem;margin-bottom:20px}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:28px}
@media(min-width:900px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:18px}
.stat .val{font-size:1.7rem;font-weight:600;font-family:var(--font-titlu)}
.stat .lbl{font-size:.8rem;color:var(--gri-inchis);text-transform:uppercase;letter-spacing:.05em}
.data-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}
.data-table th{background:var(--bej);text-align:left;padding:12px;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--gri-inchis)}
.data-table td{padding:12px;border-top:1px solid var(--linie);font-size:.92rem}
.status-pill{font-size:.75rem;padding:4px 10px;border-radius:20px;background:var(--bej);
  white-space:nowrap}
.admin-login{max-width:360px;margin:80px auto;padding:32px;background:#fff;
  border:1px solid var(--linie);border-radius:var(--radius)}
.admin-topbar{display:none}
.admin-backdrop{display:none}
@media(max-width:800px){
  .admin-wrap{grid-template-columns:1fr}
  .admin-topbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:60;
    background:var(--antracit);color:var(--alb);padding:10px 14px;font-family:var(--font-titlu)}
  .admin-topbar .admin-burger{background:none;border:1px solid #555;color:var(--alb);
    font-size:1.25rem;line-height:1;padding:3px 12px;border-radius:8px;cursor:pointer}
  .admin-side{position:fixed;top:0;left:0;bottom:0;width:264px;max-width:84vw;z-index:80;
    overflow-y:auto;transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:0 0 46px rgba(0,0,0,.55)}
  .admin-nav-open .admin-side{transform:translateX(0)}
  .admin-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:70;
    opacity:0;pointer-events:none;transition:opacity .22s}
  .admin-nav-open .admin-backdrop{opacity:1;pointer-events:auto}
  .admin-main{padding:18px 15px}
  .admin-main h1{font-size:1.35rem}
  .data-table{display:block;overflow-x:auto;white-space:nowrap}
}
@media print{.admin-side,.admin-topbar,.admin-backdrop,.no-print{display:none!important}
  .admin-wrap{display:block}.admin-main{padding:0}}

/* buton in forma de link (ex. ajutor cod promo la checkout) */
.chip-link{background:none;border:none;padding:0;margin:0;font:inherit;cursor:pointer;
  color:var(--accent,#C06B4E);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.chip-link:hover{opacity:.8}
#mg_block.mg-hit{transform:scale(.9) rotate(-4deg)}

/* utilitare */
.grid-2{display:grid;gap:20px}@media(min-width:700px){.grid-2{grid-template-columns:1fr 1fr}}
.mt{margin-top:20px}.mb{margin-bottom:20px}
.tag{display:inline-block;font-size:.75rem;padding:3px 9px;border-radius:6px;background:var(--bej)}