/* ==============================================================================================
   catalog-2026-socoteala.css — pagina /Catalog-Epilare-Laser-2026-2 „Socoteala” (macheta C).
   Portat din scratchpad/mockups/socoteala.html pe 2026-10-19. Prefix so-. Paleta „hartie + cerneala,
   un singur violet pe bare” (decizie dupa panou, 18 oct 2026). Fata de macheta lipsesc replicile de
   chrome (meniu, subsol, butoane flotante, recenzii, banda 242, formular): vin din layout si partiale.
   Bootstrap si CSS-ul meniului sunt globale, deci regulile de baza stau sub .so-pagina, nu pe body.
   ============================================================================================== */

/* ---------- 1. Tokenuri (si variabilele comune c26-, suprascrise cu paleta paginii) ---------- */
:root {
    --so-hartie: #f3f1f5;
    --so-cerneala: #1b1522;
    --so-violet: #6b0572;
    --so-pruna: #35022f;
    --so-linie: #e4dde7;
    --so-alb: #ffffff;
    --so-gri: #5e5566;
    --so-gri-slab: #8a8190;
    --so-tenta: #faf5fb;
    --so-verde-wa: #1e9e5a;
    --so-rosu: #b3261e;
    --so-font-text: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --so-font-cifre: 'Archivo', 'IBM Plex Sans', system-ui, sans-serif;
    --so-durata: .32s;
    --so-curba: cubic-bezier(.2,.7,.2,1);

    --c26-fond: var(--so-hartie);
    --c26-text: var(--so-cerneala);
    --c26-text2: var(--so-gri);
    --c26-accent: var(--so-violet);
    --c26-accent-hov: var(--so-pruna);
    --c26-accent-pal: var(--so-alb);
    --c26-linie: var(--so-linie);
    --c26-raza: 8px;
    --c26-subsol-fond: var(--so-cerneala);
    --c26-subsol-text: var(--so-hartie);
    --c26-subsol-text2: rgba(243,241,245,.8);
    --c26-font: var(--so-font-text);
}

/* ---------- 2. Baza, sub .so-pagina (fara reseturi globale) ---------- */
.so-pagina { background: var(--so-hartie); color: var(--so-cerneala); font: 400 16px/1.5 var(--so-font-text); -webkit-text-size-adjust: 100%; }
.so-pagina img, .so-pagina video { max-width: 100%; height: auto; display: block; }
.so-pagina a { color: var(--so-violet); }
/* :where() tine specificitatea la (0,0,1): regulile bat elementele goale din Bootstrap, dar nu si clasele paginii, ale
   partialelor (.so-plus, .so-pachet, .c26-form-sub …) sau ale componentei de recenzii (.sf-rev-title, .sf-rev-name), care
   isi pierdeau marginile, culoarea si marimea (review 19 oct 2026) */
:where(.so-pagina) h1, :where(.so-pagina) h2, :where(.so-pagina) h3 { margin: 0; font-family: var(--so-font-cifre); font-weight: 700; font-variation-settings: "wdth" 112; letter-spacing: -.01em; color: var(--so-cerneala); }
:where(.so-pagina) h2 { font-size: 24px; line-height: 1.2; margin-bottom: 14px; }
:where(.so-pagina) p { margin: 0 0 12px; }
.so-pagina button { font: inherit; color: inherit; }
.so-pagina fieldset { min-width: 0; }
.so-pagina :focus-visible { outline: 2px solid var(--so-violet); outline-offset: 2px; }
.so-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.so-cont { width: 100%; max-width: 1330px; margin: 0 auto; padding: 0 16px; }
.so-sect { padding: 40px 0; }
.so-pagina [hidden] { display: none !important; }
html.so-js .so-nojs { display: none; }
.so-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 8px; border: 1.5px solid var(--so-cerneala); background: var(--so-alb); color: var(--so-cerneala); font: 500 15px/1 var(--so-font-text); text-decoration: none; cursor: pointer; white-space: nowrap; }
.so-btn:hover, .so-btn:focus { color: var(--so-cerneala); text-decoration: none; }
.so-btn-ink { background: var(--so-cerneala); color: var(--so-hartie); border-color: var(--so-cerneala); }
.so-btn-ink:hover, .so-btn-ink:focus { color: var(--so-hartie); }
.so-btn-violet { background: var(--so-violet); color: #fff; border-color: var(--so-violet); }
.so-btn-violet:hover, .so-btn-violet:focus { color: #fff; }
.so-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- 3. Erou + tabla „Socoteala” (elementul memorabil) ---------- */
.so-erou { padding: 12px 0 16px; }
.so-erou h1 { font-size: 30px; line-height: 1.08; margin: 0 0 8px; }
.so-erou-sub { font-size: 16px; line-height: 1.45; margin: 0 0 12px; color: var(--so-cerneala); }
.so-contact { display: flex; gap: 8px; margin: 0 0 10px; }
.so-contact .so-btn { flex: 1 1 0; min-width: 0; min-height: 48px; font-size: clamp(13px, 4vw, 15px); padding: 0 8px; }
/* Sub 480 px „Scrie pe WhatsApp” nu incape nowrap in 167 px; ramane doar „WhatsApp”, ca in formular */
@media (max-width: 479px) { .so-lung { display: none; } }
.so-contact .so-btn-wa svg { color: var(--so-verde-wa); }
.so-nota-desk { display: none; font-size: 14px; color: var(--so-gri); }

.so-tabla-wrap { scroll-margin-top: 72px; }
.so-tabla { background: var(--so-alb); border: 1px solid var(--so-linie); border-radius: 16px; padding: 16px; scroll-margin-top: 72px; margin: 0; }
.so-tabla-titlu { display: block; font: 500 14px/1.2 var(--so-font-text); margin: 0 0 8px; }
.so-chipuri { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
/* Paddingul vertical de 4 px duce zona de atingere la 44 px fara sa creasca cipul vizibil (36 px) */
.so-chip { position: relative; display: inline-block; padding: 4px 0; margin: 0; font-weight: 400; }
.so-chip > span { display: inline-flex; align-items: center; height: 36px; min-width: 44px; padding: 0 12px; border: 1.5px solid var(--so-cerneala); border-radius: 18px; background: var(--so-alb); color: var(--so-cerneala); font: 500 15px/1 var(--so-font-text); cursor: pointer; transition: background .12s, color .12s; user-select: none; }
.so-chip input:checked + span { background: var(--so-cerneala); color: var(--so-hartie); }
.so-chip input:focus-visible + span { outline: 2px solid var(--so-violet); outline-offset: 2px; }
.so-chip input:disabled + span { opacity: .4; cursor: not-allowed; }
.so-mai { display: contents; }
.so-mai > summary { list-style: none; display: inline-block; padding: 4px 0; cursor: pointer; user-select: none; }
.so-mai > summary > span { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border: 1.5px dashed var(--so-cerneala); border-radius: 18px; font: 500 15px/1 var(--so-font-text); }
.so-mai > summary::-webkit-details-marker { display: none; }
.so-mai[open] > summary > span { border-style: solid; background: var(--so-hartie); }
.so-mai-grup { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-top: 4px; }
.so-mai-grup > b { flex-basis: 100%; font: 500 12px/1.2 var(--so-font-text); color: var(--so-gri); margin-top: 4px; }
/* cipurile „pachet” au etichete lungi: se pot rupe pe doua randuri (19 oct 2026) */
.so-mai-pachete .so-chip > span { height: auto; min-height: 36px; padding: 7px 12px; line-height: 1.2; white-space: normal; text-align: left; }
.so-calc { margin-top: 12px; }

.so-randuri { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--so-linie); }
.so-rand { margin: 0 -6px; padding: 0 6px; border-radius: 8px; }
.so-rand[data-laser="beyond"] { background: var(--so-tenta); }
.so-rand[open] { outline: 2px solid var(--so-violet); outline-offset: -2px; transition: outline-color .2s; }
/* cat se strange randul (JS, catalog-2026-socoteala.js), conturul violet se stinge treptat, nu dispare brusc la final */
.so-rand.so-se-inchide[open] { outline-color: transparent; }
/* „Indemnul”: cat timp niciun rand nu e deschis, randurile isi aprind usor conturul pe rand, de sus in jos. Fiecare aprindere
   tine 2 s (1 s creste, 1 s se stinge) si e „concertata”: urmatorul rand incepe sa se aprinda exact cand cel dinainte incepe
   sa se stinga (decalaj 1 s, nth-of-type), deci perioada valului e 5 s pentru 5 randuri si valul e continuu. JS-ul pune clasa pe
   .so-randuri la incarcare si o scoate la primul rand deschis. Cerere Alexandru, 19 oct 2026. Cu miscare redusa nu ruleaza. */
.so-randuri.so-indemn > .so-rand:not([open]) { outline: 2px solid transparent; outline-offset: -2px; animation: so-indemn 5s ease-in-out infinite; }
.so-randuri.so-indemn > .so-rand:nth-of-type(2) { animation-delay: 1s; }
.so-randuri.so-indemn > .so-rand:nth-of-type(3) { animation-delay: 2s; }
.so-randuri.so-indemn > .so-rand:nth-of-type(4) { animation-delay: 3s; }
.so-randuri.so-indemn > .so-rand:nth-of-type(5) { animation-delay: 4s; }
@keyframes so-indemn { 0%, 40%, 100% { outline-color: transparent; } 20% { outline-color: rgba(107, 5, 114, .55); } }
.so-rand-cap { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 0; cursor: pointer; transition: opacity .2s; }
.so-rand-cap::-webkit-details-marker { display: none; }
.so-rand.so-estompat > .so-rand-cap { opacity: .4; }
.so-rand-nume { flex: 0 0 120px; display: flex; flex-direction: column; font: 600 14px/1.15 var(--so-font-text); }
.so-rand-tag { font: 400 11px/1.25 var(--so-font-text); color: var(--so-gri); }
.so-rand[data-laser="beyond"] .so-rand-tag { color: var(--so-violet); font-weight: 500; }
.so-pista { flex: 1 1 0; min-width: 0; height: 20px; display: block; }
.so-bara { display: block; height: 20px; max-width: 100%; border-radius: 4px; background: var(--so-violet); transition: width var(--so-durata) var(--so-curba); }
.so-rand.so-fara-pret .so-bara { display: none; }
.so-total { flex: 0 0 auto; min-width: 72px; text-align: right; font-family: var(--so-font-cifre); font-weight: 700; font-variation-settings: "wdth" 112; font-variant-numeric: tabular-nums; font-size: 22px; line-height: 1; white-space: nowrap; }
.so-total-nr { display: inline-block; transition: opacity .16s; }
.so-total-nr.so-iese { opacity: 0; transition-duration: .12s; }
.so-total-u { font: 400 13px/1 var(--so-font-text); color: var(--so-gri); }
.so-rand.so-fara-pret .so-total-u { display: none; }
.so-plus { margin: -2px 0 4px; padding: 0 0 0 10px; font-size: 11.5px; line-height: 1.3; color: var(--so-gri); position: relative; }
.so-plus::before { content: ""; position: absolute; left: 2px; top: 3px; width: 2px; height: 10px; background: var(--so-violet); border-radius: 1px; }
.so-fisa { padding: 4px 0 12px; animation: so-fisa .2s var(--so-curba); }
@keyframes so-fisa { from { opacity: .4; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.so-fapte { margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: 1fr; gap: 4px 12px; font-size: 13px; line-height: 1.35; }
.so-fapte > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--so-linie); padding: 4px 0; }
.so-fapte dt { color: var(--so-gri); flex: 0 0 auto; font-weight: 400; }
.so-fapte dd { margin: 0; text-align: right; font-weight: 500; }
.so-fisa-act { display: flex; gap: 8px; }
.so-fisa-act .so-btn { flex: 1 1 0; min-width: 0; min-height: 44px; font-size: 14px; padding: 8px 10px; white-space: normal; line-height: 1.2; text-align: center; }
/* Pe telefon numele canonice („Rezervă pe Laser 3K Clasic”) nu incap doua pe un rand: butoanele se stivuiesc */
@media (max-width: 479px) { .so-fisa-act { flex-direction: column; } }
.so-nojs { display: block; margin-top: 8px; font-size: 13px; color: var(--so-gri); font-weight: 400; }
.so-subsol-tabla { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--so-gri); }
.so-pachet { margin: 8px 0 0; padding: 8px 10px; border: 1px solid var(--so-linie); border-radius: 8px; background: var(--so-tenta); font-size: 13px; line-height: 1.4; }
.so-nota-pret { margin: 6px 0 0; font-size: 11px; line-height: 1.4; color: var(--so-gri); } /* era --so-gri-slab: contrast 3,7:1 pe alb, sub AA (revizie 19 oct 2026) */
.so-nota-tel { font-size: 14px; color: var(--so-cerneala); }
.so-nota-tel a { font-weight: 600; white-space: nowrap; }
.so-conteaza { margin: 12px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--so-linie); display: flex; flex-wrap: wrap; gap: 4px 6px; }
.so-conteaza legend { float: left; width: 100%; padding: 0; margin: 0 0 6px; font: 500 12px/1.2 var(--so-font-text); color: var(--so-gri); border: 0; }
.so-pil { position: relative; display: inline-block; padding: 6px 0; margin: 0; font-weight: 400; }
.so-pil > span { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--so-linie); background: var(--so-hartie); font: 500 13px/1 var(--so-font-text); cursor: pointer; user-select: none; transition: background .12s, color .12s; }
.so-pil input:checked + span { background: var(--so-violet); border-color: var(--so-violet); color: #fff; }
.so-pil input:focus-visible + span { outline: 2px solid var(--so-violet); outline-offset: 2px; }

/* ---------- 4. Rezerva: formularul real (_FormularCatalog2026) pe panoul alb al machetei ---------- */
.so-rezerva { padding: 32px 0 8px; }
.so-pagina .c26-form-in { border: 1px solid var(--so-linie); border-radius: 16px; }
.so-pagina .c26-form-h2 { font-family: var(--so-font-cifre); font-weight: 700; font-variation-settings: "wdth" 112; letter-spacing: -.01em; font-size: 24px; }
.so-pagina .c26-form-sub { font-size: 15px; }
.so-rezumat { font-size: 14px; line-height: 1.5; color: rgba(27,21,34,.72); margin: 0 0 14px; }
.so-rezumat a { white-space: nowrap; }
.so-garantie { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--so-gri); }
.so-pagina .c26-camp input { border-width: 1.5px; border-color: var(--so-cerneala); }
.so-pagina .c26-camp input.input-validation-error { border-color: var(--so-rosu); }

/* ---------- 5. Sectiunile linistite: lasere pe scurt, sedinta, FAQ ---------- */
/* Sectiunile de text se opresc la 960 px ca randul sa ramana sub ~80 de caractere pe desktop */
.so-lasere .so-cont, .so-sedinta .so-cont, .so-faq .so-cont { max-width: 960px; }
.so-rand-lista { list-style: none; margin: 0; padding: 0; }
.so-rand-lista li { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--so-linie); align-items: start; }
.so-rand-lista li:last-child { border-bottom: 1px solid var(--so-linie); }
.so-foto { position: relative; width: 72px; height: 83px; border-radius: 8px; overflow: hidden; background: var(--so-alb); border: 1px solid var(--so-linie); }
/* Decupajele aparatelor (512x768, cu transparenta): contain, nu cover, ca sa nu se taie aparatul */
.so-foto img { width: 100%; height: 100%; object-fit: contain; }
.so-foto small { position: absolute; left: 0; right: 0; bottom: 0; font-size: 9px; line-height: 1.4; text-align: center; background: rgba(243,241,245,.9); color: var(--so-gri); }
.so-rand-lista h3 { font-size: 17px; margin: 0 0 4px; }
.so-rand-lista p { font-size: 15px; line-height: 1.45; margin: 0 0 6px; }
.so-rand-lista a { font-weight: 500; }
.so-blond { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--so-gri); }

/* (regula veche „.so-sedinta figure { margin }” batea .so-filmw { margin: 0 } prin specificitate; distanta o da .so-filme / .so-filmw--lat) */
.so-sedinta figure img { width: 100%; border-radius: 12px; }
.so-sedinta figcaption { font-size: 12px; color: var(--so-gri); margin-top: 6px; }
.so-sedinta-sub { font-size: 15px; color: var(--so-gri); margin: -6px 0 14px; }
.so-film { position: relative; border-radius: 12px; overflow: hidden; background: var(--so-cerneala); }
.so-film img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.so-film-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 12px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--so-cerneala); border: 0; font: 500 15px/1 var(--so-font-text); text-decoration: none; cursor: pointer; white-space: nowrap; }
.so-film-btn:hover, .so-film-btn:focus { color: var(--so-cerneala); text-decoration: none; }
.so-film-btn svg { width: 22px; height: 22px; color: var(--so-violet); }
.so-film video { width: 100%; aspect-ratio: 16 / 9; background: #000; }

/* ---------- 5b. Adaugirile din 19 oct 2026: clipurile pe laser, „de ce cinci lasere”, cele doua sectiuni portate de pe
   Potrivirea (po-fapt / po-lista, cu aceleasi pictograme) si cele trei filmari cu fatada ---------- */
.so-rand-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
/* fatada clipului e un <a>: regula .so-pagina a { color } ar face textul violet, de aici specificitatea marita */
.so-clip, .so-pagina a.so-clip, .so-pagina a.so-clip:hover, .so-pagina a.so-clip:focus { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 3px 12px 3px 3px; border-radius: 999px; background: var(--so-alb); border: 1px solid var(--so-linie); color: var(--so-cerneala); font-size: 13px; font-weight: 500; text-decoration: none; }
.so-clip img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.so-clip span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.so-clip svg { width: 16px; height: 16px; color: var(--so-violet); }
.so-clip[aria-expanded="true"], .so-pagina a.so-clip[aria-expanded="true"] { background: var(--so-tenta); border-color: var(--so-violet); }
.so-clip-player { grid-column: 1 / -1; margin-top: 10px; scroll-margin-top: 72px; }
.so-player { position: relative; width: 100%; max-width: 480px; border-radius: 12px; overflow: hidden; background: #000; }
.so-player--vertical { max-width: 270px; }
.so-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.so-dece { padding-top: 0; }
.so-dece .so-cont, .so-explica .so-cont, .so-asteapta .so-cont { max-width: 960px; }
.so-dece-cutie { background: var(--so-alb); border: 1px solid var(--so-linie); border-radius: 14px; padding: 18px 16px; }
.so-dece-cutie h2 { font-size: 22px; margin: 0 0 8px; }
.so-dece-cutie p { font-size: 15px; line-height: 1.5; margin: 0 0 10px; }
.so-dece-cutie p:last-child { margin-bottom: 0; }
.so-dece-lista { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.so-dece-lista li { font-size: 14px; padding: 6px 12px; border-radius: 999px; background: var(--so-tenta); border: 1px solid var(--so-linie); color: var(--so-cerneala); }

.so-foto-lata { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; margin-bottom: 18px; }
.so-explica h2, .so-asteapta h2 { margin-bottom: 16px; }
.so-fapt { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; margin-bottom: 18px; }
.so-fapt:last-child { margin-bottom: 0; }
.so-fapt h3 { font-size: 17px; margin: 0 0 4px; }
.so-fapt p { font-size: 15px; line-height: 1.5; margin: 0; }
.so-picto { display: flex; flex-direction: column; justify-content: center; gap: 4px; height: 44px; }
.so-picto i { display: block; background: var(--so-violet); border-radius: 999px; }
.so-picto--putere i:nth-child(1) { height: 3px; width: 30px; }
.so-picto--putere i:nth-child(2) { height: 6px; width: 34px; }
.so-picto--putere i:nth-child(3) { height: 10px; width: 38px; }
.so-picto--racire { font-size: 11px; color: var(--so-gri); line-height: 1.1; font-variant-numeric: tabular-nums; }
.so-picto--unde i { height: 2px; }
.so-picto--unde i:nth-child(1) { width: 26px; }
.so-picto--unde i:nth-child(2) { width: 28px; }
.so-picto--unde i:nth-child(3) { width: 33px; }
.so-picto--unde i:nth-child(4) { width: 38px; }
.so-asteapta-grid > img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; margin-bottom: 18px; }
.so-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.so-lista li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px; font-size: 15px; line-height: 1.5; }
.so-lista li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--so-violet); margin-top: 7px; }

/* Pe telefon cele doua filme stau unul sub altul: alaturi, clipul vertical ar fi avut 117 px latime si playerul ar fi ramas in cutia aia
   (in browserele in-app TikTok/Instagram nu exista fullscreen). Pe desktop (>= 992) stau alaturi. Revizie 19 oct 2026. */
.so-filme { display: flex; flex-direction: column; gap: 14px; align-items: stretch; margin-bottom: 14px; }
.so-filmw { margin: 0; min-width: 0; }
.so-filmw--patrat { flex: none; width: 100%; }
.so-filmw--vertical { flex: none; width: 60%; margin: 0 auto; }
.so-filmw--lat { margin-top: 14px; }
.so-filmw figcaption { font-size: 12px; color: var(--so-gri); margin-top: 6px; }
.so-fatada, .so-pagina a.so-fatada { position: relative; display: block; border-radius: 12px; overflow: hidden; background: #000; }
.so-filmw--patrat .so-fatada, .so-filmw--patrat .so-player { aspect-ratio: 1 / 1; }
.so-filmw--vertical .so-fatada, .so-filmw--vertical .so-player { aspect-ratio: 9 / 16; }
.so-filmw .so-fatada img { display: block; width: 100%; height: 100%; object-fit: cover; }
.so-filmw .so-player { max-width: none; }
.so-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center; color: var(--so-violet); }
.so-play svg { width: 26px; height: 26px; margin-left: 3px; }

/* ---------- 5c. Playerul Wistia (popover), exact ca pe pagina veche: iconitele din randurile tablei + invelisul fatadelor (19 oct 2026) ---------- */
.wistia-center { display: flex; justify-content: center; }
.wistia-sm { width: 150px; height: 150px; }
.so-fisa-film { margin: 10px 0 12px; }
/* playerele goale (doar fereastra popover) nu ocupa loc in pagina */
.so-popover-gol { display: block; width: 0; height: 0; overflow: hidden; }
/* pana se defineste elementul, iconita arata miniatura „swatch” estompata (acelasi CSS ca pe pagina veche) */
wistia-player[media-id='6brqb4rds6']:not(:defined) { background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/6brqb4rds6/swatch'); display: block; filter: blur(5px); }
wistia-player[media-id='6ya3hdfzqo']:not(:defined) { background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/6ya3hdfzqo/swatch'); display: block; filter: blur(5px); }
wistia-player[media-id='loxigcthdw']:not(:defined) { background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/loxigcthdw/swatch'); display: block; filter: blur(5px); }
wistia-player[media-id='k7nbqiias0']:not(:defined) { background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/k7nbqiias0/swatch'); display: block; filter: blur(5px); }
wistia-player[media-id='tvxr0im8qr']:not(:defined) { background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/tvxr0im8qr/swatch'); display: block; filter: blur(5px); }

.so-faq details { border-top: 1px solid var(--so-linie); }
.so-faq details:last-of-type { border-bottom: 1px solid var(--so-linie); }
.so-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 10px 0; cursor: pointer; font-family: var(--so-font-cifre); font-weight: 600; font-variation-settings: "wdth" 110; font-size: 18px; line-height: 1.25; }
.so-faq summary::-webkit-details-marker { display: none; }
.so-faq summary svg { width: 18px; height: 18px; flex: 0 0 auto; transition: transform .2s; }
.so-faq details[open] summary svg { transform: rotate(45deg); }
.so-faq details p { font-size: 15px; line-height: 1.5; margin: 0 0 14px; }
.so-faq .so-elevi { margin-top: 16px; font-size: 15px; }

/* ---------- 6. Recenziile reale (componenta RecenziiGoogle), pe aceeasi hartie; id-urile raman ale ei ---------- */
.so-pagina .sf-rev { background: var(--so-hartie); border-top: 1px solid var(--so-pruna); }
.so-pagina .sf-rev-title { font-family: var(--so-font-cifre); font-variation-settings: "wdth" 112; letter-spacing: -.01em; }

/* ---------- 7. Desktop (>= 992) si miscare redusa ---------- */
@media (min-width: 992px) {
    .so-erou { padding: 40px 0 32px; }
    .so-erou-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 48px; align-items: start; }
    .so-erou h1 { font-size: 48px; line-height: 1.05; margin-bottom: 16px; }
    .so-erou-sub { font-size: 17px; line-height: 1.55; margin-bottom: 20px; }
    .so-contact { max-width: 420px; }
    .so-nota-desk { display: block; }
    .so-tabla-wrap { max-width: 600px; justify-self: end; width: 100%; }
    .so-tabla { padding: 20px; }
    /* Pe desktop grila de zone e deschisa complet (JS-ul o deschide; summary-ul se ascunde) */
    html.so-js .so-mai > summary { display: none; }
    .so-total { font-size: 26px; min-width: 84px; }
    .so-rand-nume { flex-basis: 124px; }
    .so-fapte { grid-template-columns: 1fr 1fr; }
    .so-fisa-act { max-width: 420px; }
    .so-pagina .c26-form-in { max-width: 760px; display: grid; grid-template-columns: 180px 1fr; gap: 0 24px; }
    .so-pagina .c26-form-in > * { grid-column: 2; }
    .so-pagina .c26-form-in > .so-rezumat { grid-column: 1; grid-row: 1 / span 8; font-size: 15px; margin: 0; padding-top: 24px; }
    .so-rand-lista li { grid-template-columns: 96px 1fr auto; align-items: center; }
    .so-foto { width: 96px; height: 110px; }
    .so-explica-grid, .so-asteapta-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; align-items: center; }
    .so-explica-grid .so-foto-lata { margin: 0; aspect-ratio: 4 / 3; }
    .so-asteapta-grid > img { margin: 0; }
    .so-dece-cutie { padding: 24px 28px; }
    .so-filme { flex-direction: row; align-items: flex-start; gap: 16px; }
    .so-filmw--patrat { flex: 1 1 0; width: auto; }
    .so-filmw--vertical { width: 30%; margin: 0; }
    .so-filmw--lat { margin-top: 16px; }
    .so-player { max-width: 560px; }
    .so-player--vertical { max-width: 300px; }
    .so-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
    .so-pagina *, .so-pagina *::before, .so-pagina *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-delay: 0s !important; }
    .so-total-nr { transition: none; }
}

/* Butoanele sunt linkuri: regula .so-pagina a { color } le batea culoarea (text violet pe fond violet la „Suna acum”).
   Specificitate marita deliberat. 2026-10-19 */
.so-pagina a.so-btn, .so-pagina a.so-btn:hover, .so-pagina a.so-btn:focus { color: var(--so-cerneala); }
.so-pagina a.so-btn-ink, .so-pagina a.so-btn-ink:hover, .so-pagina a.so-btn-ink:focus { color: var(--so-hartie); }
.so-pagina a.so-btn-violet, .so-pagina a.so-btn-violet:hover, .so-pagina a.so-btn-violet:focus { color: #fff; }

/* Main_Epil.css lasa body negru: zonele de overscroll si banda cu linkurile de politici de sub subsol ar fi negre pe o
   pagina deschisa (review 19 oct 2026). */
body { background: var(--so-hartie, #f3f1f5); }