/* ============================================================
   ELEVARTS — Craft layer (merge cu show.ai-ai.ro)
   Aditiv peste designul Andrew. NU schimbă paleta/fonturile.
   Paletă Andrew: --primary #af18ed · --pink #ec83bb · #e100e7
   ============================================================ */

:root{
  /* Alias moștenit — valoarea vine din src/config/tokens.mjs (motion.ease-out). */
  --ev-ease: var(--motion-ease-out);
}

/* respectă utilizatorii care vor mai puțină mișcare */
@media (prefers-reduced-motion: reduce){
  .ev-mesh,.ev-blob,.ev-grain{display:none!important}
  *{scroll-behavior:auto!important}
}

/* ---- Gradient mesh background (în spatele întregului site) ---- */
.ev-mesh{position:fixed;inset:0;z-index:-3;overflow:hidden;filter:blur(72px);opacity:.50;pointer-events:none}
.ev-blob{position:absolute;width:46vw;height:46vw;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.ev-b1{background:radial-gradient(circle,var(--primary),transparent 62%);top:-12%;left:-8%;animation:ev-f1 20s ease-in-out infinite}
.ev-b2{background:radial-gradient(circle,var(--grad-start),transparent 62%);top:18%;right:-12%;animation:ev-f2 24s ease-in-out infinite}
.ev-b3{background:radial-gradient(circle,var(--pink),transparent 60%);bottom:-16%;left:24%;animation:ev-f3 28s ease-in-out infinite}
@keyframes ev-f1{50%{transform:translate(16vw,13vh) scale(1.18)}}
@keyframes ev-f2{50%{transform:translate(-13vw,17vh) scale(1.14)}}
@keyframes ev-f3{50%{transform:translate(9vw,-15vh) scale(1.22)}}

/* film grain fin peste tot */
.ev-grain{position:fixed;inset:0;z-index:-1;opacity:.04;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* pe mobil: mesh mai ieftin (fără jank), grain păstrat */
@media (max-width:760px){
  .ev-mesh{filter:blur(54px);opacity:.42}
  .ev-blob{width:70vw;height:70vw;animation:none}
}

/* asigură că secțiunile cu fundal propriu rămân deasupra mesh-ului */
body{position:relative;z-index:0}

/* ---- Preloader (în stil shows, paletă Andrew) ---- */
.ev-loader{position:fixed;inset:0;z-index:99999;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px}
.ev-loader .ev-pct{font-family:"General Sans",system-ui,sans-serif;font-weight:600;
  font-size:clamp(60px,16vw,200px);letter-spacing:-.04em;line-height:1;
  background:linear-gradient(135deg,var(--grad-start) 0%,var(--white) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ev-loader .ev-msg{font-family:"General Sans",system-ui,sans-serif;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.55);height:16px}
.ev-loader .ev-barwrap{width:min(360px,70vw);height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.ev-loader .ev-barfill{height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--grad-start),var(--pink))}
html.ev-loading,html.ev-loading body{overflow:hidden}

/* ---- Reveal de bază (fallback fără JS / înainte de GSAP) ---- */
.ev-reveal{opacity:0;transform:translateY(34px)}
.ev-reveal.ev-in{opacity:1;transform:none;transition:opacity .9s var(--ev-ease),transform .9s var(--ev-ease)}
html.ev-no-js .ev-reveal{opacity:1;transform:none}

/* ---- 3D tilt (doar pointer fin / desktop) ---- */
@media (hover:hover) and (pointer:fine){
  .ev-tilt{transform-style:preserve-3d;transition:transform .35s var(--ev-ease),box-shadow .35s var(--ev-ease)}
  .ev-tilt:hover{box-shadow:0 28px 70px rgba(175,24,237,.28)}
}

/* count-up: rezervă spațiu ca să nu sară layout-ul */
.stat-number{font-variant-numeric:tabular-nums}

/* Lenis: dezactivează smooth pe touch ca să nu „înoate" scroll-ul nativ mobil */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ============================================================
   CARD THEMING — culori oficiale BRANDBOOK Elevarts
   Purple #645faa · Magenta #862d91 · Dark #131120 · gradient 135deg purple→magenta
   Secundare: Red #D6413A Pink #DE607D Magenta2 #C94895 Purple2 #7A4294
              Periwinkle #626AB1 LightBlue #6BA3D7 Coral #E17B62 Peach #EEA172
   Aplici: <div class="act-card" data-card="gradient"> sau pe grid <div class="acts-grid" data-cards="aurora">
   Tema setează DOAR `--card-bg`, pe card. Suprafața care o consumă e separată
   (.act-card__scene, .sugg-card__scene, .act-detail__image) — așa aceeași paletă
   îmbracă și cardul din grilă, și sugestia, și poza de pe pagina de produs, fără
   ca vreuna să-și copieze valorile.
   ============================================================ */
/* DEFAULT — brand dark #131120 + glow mov subtil jos (NU negru simplu) */
/* Rândul de sugestii ia același fundal, nu o copie a lui: e tot o suprafață de
   scenă sub decupaje, doar mai mică. Variantele per temă rămân ale grilei —
   acolo dau ritm, aici ar concura cu lista pe care omul o citește. */
.cat-sugg .sugg-card__scene::before,
.act-detail__image[data-card],
.act-related-card__image[data-card],
.acts-grid--catalog .act-card__scene{
  background: var(--card-bg,
    radial-gradient(120% 82% at 50% 120%, rgba(100,95,170,.20), transparent 60%),
    linear-gradient(160deg,#1b1832 0%,#131120 58%,#0f0d1a 100%));
}
/* --- GRADIENT brand (135deg purple→magenta, mat) --- */
[data-card="gradient"],
[data-cards="gradient"]{
  --card-bg: linear-gradient(135deg, rgba(100,95,170,.34) 0%, rgba(134,45,145,.34) 100%), linear-gradient(160deg,#181530 0%,#120f1f 100%);
}
/* --- SPOTLIGHT (reflector purple→magenta sub personaj) --- */
[data-card="spotlight"],
[data-cards="spotlight"]{
  --card-bg: radial-gradient(120% 92% at 50% 120%, rgba(134,45,145,.48), rgba(100,95,170,.14) 46%, transparent 64%), linear-gradient(160deg,#1a1730 0%,#100e1b 100%);
}
/* --- AURORA (periwinkle + light-blue + magenta în colțuri) --- */
[data-card="aurora"],
[data-cards="aurora"]{
  --card-bg: radial-gradient(75% 60% at 10% 6%, rgba(98,106,177,.32), transparent 58%), radial-gradient(70% 55% at 92% 94%, rgba(107,163,215,.26), transparent 58%), radial-gradient(60% 50% at 62% 50%, rgba(134,45,145,.15), transparent 60%), linear-gradient(160deg,#16142a 0%,#100e1a 100%);
}
/* --- HALO (inel purple/magenta în spatele personajului) --- */
[data-card="halo"],
[data-cards="halo"]{
  --card-bg: radial-gradient(46% 46% at 50% 50%, rgba(134,45,145,.30), rgba(100,95,170,.12) 55%, transparent 72%), linear-gradient(160deg,#181530 0%,#0f0d1a 100%);
}
/* --- WARM (coral + pink + peach — pt acte calde/Crăciun/Paște) --- */
[data-card="warm"],
[data-cards="warm"]{
  --card-bg: radial-gradient(115% 82% at 50% 118%, rgba(225,123,98,.36), transparent 60%), radial-gradient(62% 50% at 82% 12%, rgba(222,96,125,.22), transparent 60%), linear-gradient(160deg,#241826 0%,#15101a 100%);
}
/* --- GLOW-BLUE (light-blue rece — pt LED/iarnă/futuristic) --- */
[data-card="cool"],
[data-cards="cool"]{
  --card-bg: radial-gradient(120% 88% at 50% 118%, rgba(107,163,215,.34), transparent 60%), radial-gradient(60% 50% at 18% 14%, rgba(98,106,177,.22), transparent 60%), linear-gradient(160deg,#141a2a 0%,#0f1018 100%);
}

/* --- PATTERN "A" Elevarts (simbol brand, subtil) peste brand dark --- */
[data-card="pattern"],
[data-cards="pattern"]{
  --card-bg: url("/images/patterns/brand-a.png") center/150px 150px, radial-gradient(120% 82% at 50% 120%, rgba(100,95,170,.18), transparent 60%), linear-gradient(160deg,#1b1832 0%,#131120 60%,#0f0d1a 100%);
}
/* --- PATTERN "A" peste gradient brand --- */
[data-card="pattern-gradient"],
[data-cards="pattern-gradient"]{
  --card-bg: url("/images/patterns/brand-a-2.png") center/150px 150px, linear-gradient(135deg, rgba(100,95,170,.30), rgba(134,45,145,.30)), linear-gradient(160deg,#181530,#120f1f);
}
/* --- PATTERN dens (tile mic) --- */
[data-card="pattern-dense"],
[data-cards="pattern-dense"]{
  --card-bg: url("/images/patterns/brand-a-dense.png") center/96px 96px, radial-gradient(120% 82% at 50% 120%, rgba(134,45,145,.16), transparent 60%), linear-gradient(160deg,#1a1730,#120f1e);
}
/* --- DUOTONE (split purple/magenta diagonal, premium) --- */
[data-card="duotone"],
[data-cards="duotone"]{
  --card-bg: linear-gradient(118deg, rgba(100,95,170,.34) 0%, rgba(100,95,170,.10) 42%, rgba(134,45,145,.12) 58%, rgba(134,45,145,.34) 100%), linear-gradient(160deg,#171430,#0f0d1a);
}
/* --- VIGNETTE (ramă întunecată, focus pe personaj) --- */
[data-card="vignette"],
[data-cards="vignette"]{
  --card-bg: radial-gradient(75% 90% at 50% 42%, rgba(100,95,170,.16), transparent 60%), radial-gradient(140% 120% at 50% 50%, transparent 52%, rgba(0,0,0,.55) 100%), linear-gradient(160deg,#16142a,#0d0b16);
}
/* --- STAGE (podea reflectorizantă + glow, ca pe scenă) --- */
[data-card="stage"],
[data-cards="stage"]{
  --card-bg: linear-gradient(0deg, rgba(134,45,145,.22) 0%, transparent 26%), radial-gradient(90% 70% at 50% 8%, rgba(107,163,215,.18), transparent 60%), linear-gradient(160deg,#161430,#0f0d1a);
}
/* --- PATTERN "A" color (gradient brand) peste dark --- */
[data-card="pattern-color"],
[data-cards="pattern-color"]{
  --card-bg: url("/images/patterns/brand-a-color.png") center/150px 150px, radial-gradient(120% 82% at 50% 120%, rgba(100,95,170,.16), transparent 60%), linear-gradient(160deg,#1a1730 0%,#120f1e 100%);
}

/* ============================================================
   WATERMARK "VA" — monograma Elevarts, colț dreapta-jos, pe fiecare card.
   Compozabil cu orice temă de culoare. Activezi pe grid: <div class="acts-grid" data-va>
   sau pe un card: <div class="act-card" data-va>. Reglezi mărimea/opacitatea din variabile.
   ============================================================ */
.acts-grid--catalog [data-va] .act-card__scene::after,
.acts-grid--catalog[data-va] .act-card__scene::after{
  content:"";
  position:absolute;
  right: var(--va-inset, 14px);
  bottom: var(--va-inset, 14px);
  width: var(--va-size, 46px);
  height: var(--va-size, 46px);
  background: url("/images/patterns/va-mark-white.png") center/contain no-repeat;
  opacity: var(--va-opacity, .16);
  pointer-events:none;
  z-index:2;
}

/* ============================================================
   GRILA + carduri TALL pentru personaje pe picioroange
   Cardurile de picioroange [data-tall] primesc scenă mai înaltă → personajul
   se vede mai mare, iar rândul crește după ele.

   A fost `column-count`. Scos pe 2026-07-29: pe Safari, decupajele cardurilor
   TALL scăpau din card și se randau la baza paginii (prins de George pe
   Jack Skellington, Pheonyx Birds, Ice Queen & King — toate picioroange,
   singurele cu `overflow:hidden` pe scenă, într-un container multicol).
   Playwright-WebKit NU reproduce bug-ul, deci un petic n-ar fi fost verificabil;
   am scos construcția fragilă în loc s-o cârpesc.

   Bonus, tot din multicol: ordinea de citire era pe COLOANE, nu pe rânduri —
   într-un catalog alfabetic, A-B-C mergeau în jos pe prima coloană. Grila
   citește pe rânduri, cum se așteaptă omul.
   ============================================================ */
/* Masonry REAL, pe unități de rând.
   `align-items:start` + două înălțimi fixe lăsau, sub fiecare card scund dintr-un
   rând care conținea un card de picioroange, un gol cât diferența dintre ele —
   41 din 99 de produse sunt picioroange, deci golul apărea aproape pe fiecare rând
   (prins de George pe 2026-08-05).

   Fix fără JS: rândul devine o unitate mică (`--u`), iar cardul ocupă un număr
   ÎNTREG de unități — 3 normal, 5 picioroange. Auto-placement-ul CSS caută prima
   poziție liberă de după cursor, deci un card scund se așază exact sub cel de
   deasupra lui, nu la baza rândului. Spanurile trebuie să rămână întregi:
   cu înălțimi arbitrare grila n-ar mai avea unde să le potrivească.

   De ce nu JS (coloane sau poziționare absolută): catalogul se filtrează live,
   deci masonry-ul ar trebui recalculat la fiecare click pe o fațetă. Aici
   `display:none` pe cardul filtrat lasă grila să se reaşeze singură.
   De ce nu `dense`: ar muta carduri înapoi în goluri și ar rupe ordinea alfabetică. */
.acts-grid--masonry{
  /* Unitatea și golul se mișcă împreună: cardul are 3u + 2 goluri, deci ca să dai
     mai mult aer între rânduri fără să umfli cardul, crește golul și scazi u.
     Aerul nu e estetică — decupajul iese ~10% peste marginea de sus a scenei și
     avea doar 24px până la cardul de deasupra, deci capul apărea înghesuit. */
  --u:63px;            /* unitatea de rând; cardul normal = 3u + 2 gap-uri */
  --gap-y:3.6rem;
  display:grid;
  /* minmax(0,…) și nu 1fr: `1fr` are minimul = min-content, iar numele produsului
     e `white-space:nowrap`, deci min-content-ul lui e textul întreg. La 390px
     coloanele se umflau la 269px fiecare și grila ieșea din ecran pe ambele
     laturi — invizibil la testul de scroll orizontal, fiindcă `overflow-x:hidden`
     de pe body ascunde exact asta. */
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap-y) 2rem;
  grid-auto-rows:var(--u);
  padding-top:90px;
}
@media (max-width:1100px){ .acts-grid--masonry{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.acts-grid--masonry .act-card{ width:100%; margin:0; grid-row:span 3; min-width:0; }
/* fără asta, `text-overflow:ellipsis` de pe nume n-are cum să se aplice:
   minimul automat al unui flex item cu text nowrap e textul întreg */
.acts-grid--catalog .act-card__name{ min-width:0; }
.acts-grid--masonry .act-card[data-tall]{ grid-row:span 5; }
/* Scena ia tot ce rămâne din card după pastilă — altfel un nume pe două rânduri
   ar împinge cardul peste înălțimea spanului și ar strica alinierea grilei. */
.acts-grid--masonry .act-card__scene{
  flex:1 1 auto; height:auto; min-height:0; max-height:none;
}
/* TALL (picioroange) — personajul umple înălțimea (laterale transparente clip) */
.acts-grid--masonry .act-card[data-tall] .act-card__scene{ overflow:hidden; }
.acts-grid--masonry .act-card[data-tall] .act-card__character{ height:102%; max-width:none; }
/* Excepție: cardul de picioroange CU galerie. `overflow:hidden` taie pe ambele
   axe, deci acolo decupajul nu mai ieșea deloc din card — se vedea la LED Robots.
   Tăierea laterală o face `clip-path`-ul de la galerie, care lasă capul afară. */
.acts-grid--masonry .act-card[data-tall] .act-card__scene:has(.gc){ overflow:visible; }
.acts-grid--masonry .act-card[data-tall] .act-card__scene .gc{ height:110%; }

/* Pe telefon rămân DOUĂ coloane, nu una: la 99 de produse, o coloană înseamnă
   99 de ecrane de derulat până jos. Scenele scad proporțional cu lățimea —
   un card de 173px cu scenă de 250px arată ca o coloană, nu ca un card. */
@media (max-width:680px){
  /* Unitatea scade cu lățimea cardului, iar picioroangele trec pe 4 unități:
     la 165px lățime, un span de 5 ar da un card mai înalt decât ecranul. */
  .acts-grid--masonry{
    --u:59px; --gap-y:2.5rem;
    grid-template-columns:repeat(2,1fr); gap:var(--gap-y) 12px; padding-top:56px;
  }
  .acts-grid--masonry .act-card[data-tall]{ grid-row:span 4; }

  /* Pastila și butonul au fost desenate pentru un card de 390px. La 165px,
     „vezi mai multe detalii” nu se micșorează (flex-shrink:0) și strivea numele
     la lățime zero — cardul rămânea fără titlu. Pe două coloane rămân numele
     și săgeata; textul lung și eticheta butonului dispar. */
  /* margin-top:-32px (regula veche de mobil) trăgea pastila peste scenă, unde
     stă badge-ul „La sol” — pe două coloane ajungeau unul peste altul și
     numele devenea ilizibil. Pe un card lat suprapunerea arăta bine; aici nu. */
  .acts-grid--catalog .act-card__pill{ padding:11px 14px; gap:8px; margin-top:0; }
  /* Două rânduri, nu un rând cu „…": pe o coloană de 165px, „Black Suits Disco
     Heads" și „Black Suits Disco Heads Picioroange" se tăiau amândouă la
     „Black Suits Disco…" — două carduri vecine, aceeași etichetă. Înălțimea
     cardului o fixează spanul grilei, deci al doilea rând ia din scenă. */
  .acts-grid--catalog .act-card__name{
    font-size:13px; flex:1 1 auto; line-height:1.25;
    white-space:normal; display:-webkit-box; -webkit-line-clamp:2;
    -webkit-box-orient:vertical; overflow:hidden;
  }
  .acts-grid--catalog .act-card__details-text{ display:none; }
  .acts-grid--catalog .act-card__details-link{ gap:0; }
  .acts-grid--catalog .act-card__add-btn{
    padding:0; width:32px; height:32px; border-radius:50%;
    justify-content:center; gap:0;
  }
  .acts-grid--catalog .act-card__add-btn .act-card__add-text{ display:none; }
}

/* ============================================================
   BADGE sol / picioroange — pilulă frosted colț stânga-jos
   ============================================================ */
.acts-grid--catalog .act-card__scene .ev-badge{
  position:absolute; left:12px; bottom:12px; z-index:5;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px 5px 8px; border-radius:100px;
  background:rgba(18,15,31,.42); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.14);
  font-family:"General Sans",system-ui,sans-serif; font-size:11px; font-weight:600; letter-spacing:.01em;
  color:#f3f0ff; line-height:1; box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.acts-grid--catalog .act-card__scene .ev-badge svg{width:15px;height:15px;flex:0 0 auto}
.ev-badge--picioroange{ color:#e7d6ff }
.ev-badge--picioroange svg{ stroke:#c69cff }
.ev-badge--sol svg{ stroke:#8fb8e0 }
.ev-badge--accesoriu{ color:#d9f0e6 }
.ev-badge--accesoriu svg{ stroke:#7fd3b0 }
/* Show-ul de scenă e singurul badge cu contur propriu: stă pe 10 carduri din 102,
   iar rostul lui e să se vadă din capul listei — celelalte trei doar clasifică ce
   te uiți deja. Auriu, fiindcă e singura familie cromatică pe care n-o poartă
   niciun alt element al cardului; movul ar concura cu insigna „NOU". */
.ev-badge--show{ color:#ffd27a; border-color:rgba(255,197,92,.42); background:rgba(38,24,8,.5) }
.ev-badge--show svg{ stroke:#ffc25c }

/* ============================================================
   INSIGNA NOU / CEL MAI CERUT — colț stânga-SUS
   Dreapta-sus e ocupată de bifa de adăugare în listă, iar stânga-jos de badge-ul
   de format. Colțul rămas e singurul care nu acoperă nimic.
   ============================================================ */
.acts-grid--catalog .act-card__scene .ev-flag{
  position:absolute; left:12px; top:12px; z-index:6;
  padding:5px 11px; border-radius:100px;
  font-family:"General Sans",system-ui,sans-serif; font-size:10.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; line-height:1; white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,.42);
}
/* „NOU" e plin, ca să bată orice fundal de scenă; „cel mai cerut" e o pastilă de
   sticlă — apare pe 11 carduri și, plină, ar face lista să țipe. */
.ev-flag--new{
  background:linear-gradient(135deg,var(--primary),var(--pink)); color:var(--white); border:0;
}
.ev-flag--wanted{
  background:rgba(12,10,20,.5); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.28); color:#f3f0ff;
}
@media (max-width:560px){
  .acts-grid--catalog .act-card__scene .ev-flag{font-size:9.5px; padding:4px 9px; left:10px; top:10px}
}
@media (max-width:560px){
  .acts-grid--catalog .act-card__scene .ev-badge{font-size:10px;padding:4px 8px 4px 7px}
  .acts-grid--catalog .act-card__scene .ev-badge svg{width:13px;height:13px}
}

/* ============================================================
   HOVER-GALERIE pe catalog (decupaje multiple + scrub) + buton semiopac
   ============================================================ */
/* Decupajele din galerie se dimensionează pe ÎNĂLȚIME, egal pentru toate trei, și
   se lasă să iasă lateral. Cu `max-width` (regula decupajului singur) o poză de
   grup — 1350x900 la Disco Heads — se strângea până încăpea în lățime și ieșea o
   figurină de nimic, iar una portret urca 145% și intra sub butonul „Adaugă în
   listă". George, 2026-08-05: „celelalte doua poze din slider sunt prea mici...
   le-as mari putin, cu riscul ca vom taia putin din margini stanga/dreapta". */
.acts-grid--catalog .act-card__scene .gc{
  opacity:0; transition:opacity .16s ease; z-index:1;
  /* 110%, nu 145% ca la decupajul singur: fișierele de galerie sunt tăiate pe
     conturul alfa, deci 110% din ele e personaj plin, pe când 145% dintr-un
     decupaj cu margine e tot personaj mic. Restul de 10% e cât iese în sus fără
     să ajungă sub butonul „Adaugă în listă" din colțul scenei. */
  height:110%; width:auto; max-width:none;
}
.acts-grid--catalog .act-card__scene .gc.on{opacity:1}
/* Taie stânga/dreapta la marginea cardului, dar lasă capul să iasă în sus.
   `overflow` n-ar merge: nu se poate ascunde o singură axă, hidden pe X îl
   forțează și pe Y. `round` păstrează colțurile rotunjite ale scenei. */
.acts-grid--catalog .act-card__scene:has(.gc){
  /* `crosshair` spunea „aici se derulează”. De când poza e și link, mâna e
     afirmația onestă: derularea rămâne, dar clicul duce undeva. */
  cursor:pointer;
  clip-path:inset(-14% 0 0 0 round 24px);
}
/* Cadrele-fotografie (src/data/card-photos.mjs): umplu cardul și se opresc la
   marginea lui. N-au alfa, deci nimic nu „iese" din ele — ce iese e o muchie
   dreaptă de poză, adică o greșeală de montaj. Încadrarea rămâne pe centru:
   `50% 22%` din regula portretelor ar tăia jumătate din urmele de lumină. */
.acts-grid--catalog .act-card__scene .gc.act-card__photo{
  height:100%; width:100%; max-width:none; object-position:50% 50%;
}
/* Fotografia SINGURĂ (n-are `.gc`, fiindcă n-are ce roti) ține LĂȚIMEA, nu
   înălțimea. Cadrul cardului își schimbă forma cu ecranul — 1,65 pe trei coloane,
   dar 0,76 pe telefon, unde grila are două coloane și cardul iese portret. Cu
   `cover`, o fotografie de 1,5 pierde acolo jumătate din lățime: la White Tails
   rămâneau două cozi din patru, iar efectul e chiar formația. George, 29.08.2026:
   „imi taie cele 2 cozi din laterale, si efectul frumos e cu toate 4 vizibile".
   Deci lățime plină mereu, înălțime naturală, centrată pe verticală: pe cadrul
   lat prisosul de sus și de jos se taie, pe cel îngust rămân benzi din fundalul
   de scenă. Tăierea o face `clip-path`, nu `overflow` — scena e `overflow:visible`
   ca să lase decupajele să iasă pe sus. */
.acts-grid--catalog .act-card__scene > .act-card__photo:not(.gc){ height:auto; margin-block:auto; }
.acts-grid--catalog .act-card__scene:has(> .act-card__photo:not(.gc)){ clip-path:inset(0 round 24px); }
.acts-grid--catalog .act-card__scene:has(.gc.act-card__photo){ clip-path:inset(0 round 24px); }
/* Bareluțele de preview: centrate, subtile, doar pe cardurile cu galerie.
   Erau `left:14px;right:64px` — adică lipite de stânga, peste badge-ul „La sol". */
.acts-grid--catalog .ev-segs{
  position:absolute; bottom:12px; left:0; right:0;
  display:flex; justify-content:center; gap:5px;
  z-index:4; opacity:.55; transition:opacity .25s; pointer-events:none;
}
/* Vizibile și fără hover: sunt singurul semn că produsul ăsta are mai multe poze.
   Ascunse până la hover, omul afla că există preview abia după ce trecea peste
   card — adică prea târziu ca să-l facă să treacă. Pe hover se aprind complet. */
.acts-grid--catalog .act-card__scene:hover .ev-segs{opacity:1}
.acts-grid--catalog .ev-segs i{
  width:26px; height:3px; border-radius:3px;
  background:rgba(255,255,255,.30); box-shadow:0 1px 3px rgba(0,0,0,.5);
}
.acts-grid--catalog .ev-segs i.on{background:var(--white)}
/* ============================================================
   POZA E LINK — strat transparent peste scenă
   Sub butonul „Adaugă în listă” (z-index 3), ca butonul să rămână buton, și
   peste poze, ca să prindă clicul oriunde pe cadru. Pastilele de colț nu mai
   opresc clicul: erau etichete, nu ținte, dar stăteau deasupra și înghițeau
   exact colțurile pe care cade degetul.
   ============================================================ */
.acts-grid--catalog .act-card__scene-link{
  position:absolute; inset:0; z-index:2;
  border-radius:24px; display:block;
  -webkit-tap-highlight-color:transparent;
}
.acts-grid--catalog .act-card__scene .ev-badge,
.acts-grid--catalog .act-card__scene .ev-flag,
.acts-grid--catalog .act-card__variants{ pointer-events:none; }

/* buton „Adaugă în listă" SEMIOPAC (se vede personajul prin el) */
.acts-grid--catalog .act-card__add-btn{background:rgba(18,15,31,.34)!important;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border:1px solid rgba(255,255,255,.15)!important}
.acts-grid--catalog .act-card:hover .act-card__add-btn{background:rgba(18,15,31,.52)!important}

/* ============================================================
   CONFIGURATOR DE COSTUM (pagina de produs)
   Piesele sunt tăiate din aceeași fotografie la aceleași coordonate, deci se
   îmbină prin construcție. CSS-ul de aici are o singură treabă grea: să lase
   casca să iasă în sus din cutie, fără ca stiva să sară la fiecare schimbare.
   ============================================================ */
.cfg{ padding:72px 0 24px; }
.cfg__title{ font-size:clamp(24px,3.4vw,34px); margin:0 0 8px; }
.cfg__lead{ color:var(--text-muted); font-size:15px; line-height:1.65; margin:0 0 28px; max-width:62ch; }

.cfg__stage{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:900px){
  .cfg__stage{ grid-template-columns:minmax(0,470px) minmax(0,430px); gap:48px;
               align-items:start; justify-content:center; }
  .cfg__stack{ --cfg-body-h:520px; }
}

.cfg__figure{
  background:linear-gradient(160deg,#1b1832,#0f0d1a);
  border:1px solid var(--border); border-radius:24px;
  padding:20px 12px 16px; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  /* Casca iese peste marginea de sus; fără spațiu rezervat i s-ar tăia vârful
     (unicornul are corn, iepurele are urechi). */
  padding-top:120px;
}
.cfg__stack{ --cfg-body-h:400px; display:flex; flex-direction:column; align-items:center; }
.cfg__piece{ display:block; width:auto; height:auto; margin:0; }
.cfg__piece + .cfg__piece{ margin-top:-1px; }   /* acoperă rotunjirea de subpixel */
.cfg__caption{ margin:14px 0 0; font-size:12px; color:var(--text-subtle); text-align:center; line-height:1.5; }

.cfg__rows{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.cfg__row{ background:var(--card-bg); border:1px solid var(--border); border-radius:18px; padding:13px 0 14px; }
.cfg__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 16px 10px; min-width:0; }
.cfg__label{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-subtle); white-space:nowrap; }
.cfg__value{ font-size:14px; text-align:right; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.cfg__slider{ display:flex; align-items:center; gap:6px; min-width:0; }
.cfg__arrow{
  flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--border-strong); border-radius:999px; background:transparent;
  color:var(--text); font-size:17px; line-height:1; padding:0; margin-inline:6px;
}
.cfg__arrow:hover{ background:var(--glass-bg); }
.cfg__arrow:active{ transform:scale(.94); }

/* Pista e mai îngustă decât șirul de pastile, deci mereu se vede începutul
   următoarei — semnalul că se poate da swipe, la fel pe desktop și pe telefon. */
.cfg__track{
  flex:1 1 auto; min-width:0; display:flex; gap:10px; overflow-x:auto;
  scroll-snap-type:x proximity; scrollbar-width:none;
  padding-block:4px; padding-inline:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.cfg__track::-webkit-scrollbar{ display:none; }
.cfg__sw{
  flex:0 0 66px; height:66px; scroll-snap-align:center; cursor:pointer; padding:0;
  border:2px solid transparent; border-radius:14px; background:rgba(0,0,0,.35);
  display:grid; place-items:center; overflow:hidden;
  opacity:.45; transform:scale(.86);
  transition:opacity .18s ease, transform .18s ease, border-color .18s ease;
}
.cfg__sw img{ width:100%; height:100%; object-fit:contain; display:block; }
.cfg__sw.on{ opacity:1; transform:scale(1); border-color:var(--primary); }

.cfg__seg{ display:flex; gap:2px; padding:3px; border:1px solid var(--border);
           border-radius:999px; background:var(--glass-bg); flex:0 0 auto; }
.cfg__seg button{ border:0; background:transparent; color:var(--text-muted); font:inherit;
                  font-size:12px; padding:6px 13px; border-radius:999px; cursor:pointer; white-space:nowrap; }
.cfg__seg button.on{ background:var(--primary); color:var(--white); }

/* ── trupa ─────────────────────────────────────────────────────────────────── */
.cfg__crew{ margin-top:22px; background:var(--card-bg); border:1px solid var(--border);
            border-radius:18px; padding:16px; }
.cfg__crew-head{ display:flex; align-items:baseline; justify-content:space-between;
                 gap:6px 12px; margin-bottom:12px; flex-wrap:wrap; }
.cfg__crew-title{ font-size:15px; font-weight:500; }
.cfg__crew-hint{ font-size:12px; color:var(--text-subtle); }
.cfg__crew-empty{ color:var(--text-subtle); font-size:13px; padding:10px 0; margin:0; }
.cfg__crew-list{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; }
.cfg__member{ flex:0 0 116px; background:rgba(0,0,0,.3); border:1px solid var(--border);
              border-radius:14px; padding:8px; position:relative; }
.cfg__member.is-editing{ border-color:var(--primary); }
.cfg__member-fig{ display:flex; flex-direction:column; align-items:center; height:112px; }
.cfg__member-fig img{ display:block; max-width:100%; }
.cfg__member-fig img:first-child{ height:34%; width:auto; }
.cfg__member-fig img:last-child{ height:66%; width:auto; }
.cfg__member-spec{ display:block; font-size:10px; color:var(--text-muted); line-height:1.45; margin-top:6px; }
/* Ștergerea sus-dreapta, editarea în colțul opus: pe un card mic, mijlocul e
   exact unde apuci imaginea, iar o ștergere din greșeală n-are undo. */
.cfg__member-x, .cfg__member-edit{
  position:absolute; top:4px; width:22px; height:22px; border-radius:50%;
  border:1px solid var(--border-strong); background:rgba(0,0,0,.65); color:var(--white);
  font-size:12px; line-height:1; cursor:pointer; display:grid; place-items:center; padding:0; z-index:2;
}
.cfg__member-x{ right:4px; }
.cfg__member-edit{ left:4px; }
.cfg__member-x:hover{ background:#b3261e; border-color:#b3261e; }
.cfg__member-edit:hover{ background:var(--primary); border-color:var(--primary); }

.cfg__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.cfg__btn-ghost{ background:transparent; border:1px solid var(--border-strong); color:var(--text); }
.cfg__btn-ghost:disabled{ opacity:.4; cursor:not-allowed; }
.cfg__draft{ margin-top:18px; color:var(--text-subtle); font-size:12px; line-height:1.7;
             border-top:1px solid var(--border); padding-top:14px; }

/* Configurația din listă: fără rândurile astea, în coș ar apărea doar
   „Mirror Men — 3 artiști", fără să se știe CE trei costume.
   Culoarea e #888, ca la codul de produs de deasupra — sertarul are fundal ALB,
   deci `--text-muted` (alb translucid) ar fi ieșit invizibil. */
.cart-drawer__item-spec{ list-style:none; margin:4px 0 0; padding:0;
                         font-size:11px; line-height:1.55; color:#888; }

@media (max-width:560px){
  .cfg{ padding-top:48px; }
  .cfg__figure{ padding-top:96px; }
  .cfg__stack{ --cfg-body-h:340px; }
}

/* ============================================================
   „ADAUGĂ ÎN LISTĂ" — cerc mic, eticheta apare la hover
   Pastila cu etichetă (~180×36px) acoperea în medie 50% din zona ei, la 75 din
   94 de carduri cu poză — măsurat desenând decupajul randat pe canvas și
   numărând pixelii opaci sub buton. Cercul de 34px scade media la 15%.
   Poziția aproape nu contează (15% sus, 16% jos): mărimea rezolvă, nu colțul.
   ============================================================ */
.acts-grid--catalog .act-card__add-btn{
  padding:0; width:34px; height:34px; border-radius:50%;
  justify-content:center; gap:0;
  background:rgba(0,0,0,.45);
  border-color:rgba(255,255,255,.24);
}
@media (hover:hover) and (pointer:fine){
  /* Butonul NU își schimbă cutia — rămâne cercul. Eticheta e un element alăturat
     care intră din transform și opacitate. Animarea lățimii ar pune layout la
     fiecare hover, pe o pagină cu 99 de carduri. */
  .acts-grid--catalog .act-card__add-text{
    position:absolute; right:calc(100% + 8px); top:50%;
    white-space:nowrap; padding:6px 12px; border-radius:999px;
    background:rgba(0,0,0,.72); border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    font-size:13px; opacity:0;
    transform:translateY(-50%) translateX(8px);
    transition:opacity .18s ease, transform .26s var(--ev-ease);
    pointer-events:none;
  }
  .acts-grid--catalog .act-card:hover .act-card__add-text{
    opacity:1; transform:translateY(-50%) translateX(0);
  }
}
/* Pe touch nu există hover, deci eticheta n-ar apărea niciodată — și oricum nu
   încape pe un card de 165px. Rămâne cercul singur. */
@media not all and (hover:hover){
  .acts-grid--catalog .act-card__add-text{ display:none; }
}