/* ===========================================================================
 * CINECUM — DESIGN SYSTEM
 * Redesign UX/UI cinecum.ro · Contract nr. 110 / 17.07.2026
 * Namespace: cnc-   ·   Versiune: 3.8.0
 *
 * Sursa: redesign-docs/design-output/P1-fundatie/P1-fundatie.html (runda 2)
 *        + P1-fundatie-spec.md §2, §3, §4.4, §4.5
 *
 * ┌─ CE CONȚINE ────────────────────────────────────────────────────────────┐
 * │ §1 TOKENI          — variabile CSS. Fără efect până nu sunt folosite.   │
 * │ §2 TRACK           — comutatorul cerere/ofertă prin [data-track].       │
 * │ §3 BAZĂ            — scopat sub `body.cnc`. 🟡 ARE EFECT GLOBAL.        │
 * │ §4 COMPONENTE      — Mod A, clase `cnc-` noi. Inerte până sunt puse     │
 * │                      în markup. Risc vizual ZERO.                       │
 * │ §5 HEADER (skin)   — Mod B, scopat `body.cnc #site-header`.             │
 * │ §6 FOOTER (skin)   — Mod B, scopat `body.cnc #page > footer`.           │
 * │ §7–§12 COMPONENTE  — P6 · P4 · P7 · P2 (Mod A).                         │
 * │ §8, §10, §11, §13  — SKIN cont · /trimite-date/ · login/404 · homepage. │
 * │ §14 COMPONENTE P3  — arhiva (antet, breadcrumb, bară, sidebar, pager).  │
 * │ §15 SKIN ARHIVĂ    — Mod B peste temă, plugin și mu-plugins.            │
 * │ §16–§17 WIZARD     — componente P5 + skin peste Form-Builder (Ant v5).  │
 * │ §18 SKIN GHID      — „Cum funcționează" (P7).                           │
 * │ §19 COMPONENTE P4  — pagina de anunț (brief, dhead, actionbox, offer…). │
 * │ §20 SKIN ANUNȚ     — 🔴 SINGURA zonă care atinge mascarea telefonului.  │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * 🔴 REGULA #1: clasele existente (`rtin-`, `rtcl-`, `cc-`) se ÎMBRACĂ, nu se
 *    redenumesc. Vezi redesign-docs/design-prompts/00-context-pack.md §G și §H.
 *
 * 🔴 REGULA #2: fără `@layer` pentru override-uri. Stilurile nelayerizate din
 *    mu-plugins (tipărite în `wp_footer`, deci DUPĂ noi) ar bate orice layer,
 *    indiferent de specificitate.
 *
 * 🟡 ATENȚIE LA ACTIVARE: §3 schimbă fontul pe TOT site-ul. Restul (§4, §5, §6)
 *    e fie inert, fie limitat la header/footer. Vezi README.md al temei.
 * =========================================================================== */


/* ---------------------------------------------------------------------------
 * FONT — auto-găzduit (GDPR: fără Google Fonts CDN). Licență SIL OFL 1.1.
 *
 * ✅ INSTALAT 17.08.2026. Provenieța, subsetul și verificarea diacriticelor:
 *    `assets/fonts/README.md`. Pe scurt: variabil (wght 200–800), 47 KB,
 *    ș/ț cu VIRGULĂ (U+0219/U+021B) cu glife ȘI contururi distincte de cele
 *    cu sedilă (U+015F/U+0163) — greșeala clasică de pe site-urile românești,
 *    verificată programatic, nu presupusă.
 *
 * ⚠️ `format('woff2')`, NU `format('woff2-variations')`.
 *    A doua e sintaxa tranzitorie din 2018, pe care Firefox NU a implementat-o
 *    niciodată: cu ea, fontul ar fi fost ignorat în tăcere pe Firefox, iar
 *    site-ul ar fi căzut pe stack-ul de sistem fără niciun semn.
 *    Axa variabilă e declarată de intervalul `font-weight: 200 800`.
 * ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}


/* ═══════════════════════════════════════════════════════════════════════════
 * §1 TOKENI
 * ═════════════════════════════════════════════════════════════════════════ */

:root {

  /* ═══ BRAND ═══════════════════════════════════════════════════════════ */
  --c-emerald:        #0F6B4A;   /* primar — CERERE, butoane, linkuri, inel logo */
  --c-emerald-700:    #0A5238;   /* hover / pressed */
  --c-emerald-800:    #245140;   /* suprafețe închise, footer */
  --c-emerald-600:    #3F6B54;   /* verde desaturat, text secundar pe închis */
  --c-emerald-100:    #C6E6D4;   /* borduri tint verde */
  --c-emerald-50:     #E4F4EC;   /* tint verde — chips Cerere, carduri soft */

  --c-gold:           #E2A93B;   /* accent — OFERTĂ / preț. 🔴 NICIODATĂ text pe alb (2.1:1) */
  --c-gold-600:       #D19A2C;   /* auriu hover */
  --c-gold-700:       #8A5A12;   /* 🔴 SINGURUL auriu admis ca text pe deschis (6.5:1) */
  --c-gold-100:       #F0DFB8;   /* borduri tint auriu */
  --c-gold-50:        #FBF0D9;   /* tint auriu — badge Ofertă, price pill */

  /* ═══ INK / TEXT ══════════════════════════════════════════════════════ */
  --c-ink:            #15201B;   /* titluri & body */
  --c-ink-800:        #2A342E;
  --c-text-muted:     #5B6B62;   /* body secundar, captions */
  --c-text-muted-2:   #7C877F;   /* meta („· acum 2 zile") — min. 18px sau bold */
  --c-text-faint:     #9AA69F;   /* placeholder / disabled — niciodată info esențială */
  --c-on-dark:        #F7F8F5;   /* text pe suprafețe emerald/ink */
  --c-on-dark-muted:  #C9D3CC;   /* text secundar pe închis (footer) */
  --c-on-accent:      #FFFFFF;   /* text pe fill emerald/danger */
  --c-green-slate:    #3A4640;   /* borduri pe suprafețe închise */

  /* ═══ SURFACES ════════════════════════════════════════════════════════ */
  --c-surface:        #FFFFFF;
  --c-surface-2:      #FCFDFB;   /* card ridicat / dropdown */
  --c-bg:             #F7F8F5;   /* fundal app, off-white cald */
  --c-bg-alt:         #F1F4F0;   /* tint subtil de secțiune */

  /* ═══ BORDERS ═════════════════════════════════════════════════════════ */
  --c-border:         #E5E9E4;   /* hairline default */
  --c-border-strong:  #C9D3CC;   /* outline input */

  /* ═══ PLACEHOLDER MEDIA (miniaturi fără imagine) — P1 runda 2, M1 ═════
   * 🔴 Nu e decorativ: 67% dintre CERERI au ZERO poze (E-matrice §5.4).
   * Starea „fără imagine" e regula, nu excepția — trebuie să arate intenționată. */
  --c-placeholder-1:  #EDF1EC;
  --c-placeholder-2:  #DCE5DE;
  --c-placeholder-ink:#9DB0A2;

  /* ═══ SEMANTIC ════════════════════════════════════════════════════════ */
  --c-success:        #2E7D52;   /* „acceptat" — variantă text-safe */
  --c-success-300:    #6FD39B;   /* succes pe fundal ÎNCHIS (toast) — P1 runda 2, M1 */
  --c-success-50:     #E4F4EC;
  --c-warning:        #8A5A12;   /* „în așteptare" — text-safe */
  --c-warning-50:     #FBF0D9;
  --c-danger:         #C0442C;   /* eroare / respins — text-safe */
  --c-danger-700:     #A63722;   /* danger hover */
  --c-danger-100:     #F2D3CC;   /* bordură danger */
  --c-danger-50:      #FBEAE6;
  --c-info:           #245140;
  --c-lock:           #5B6B62;   /* stare „contact protejat" */

  /* ═══ TRACK — comută întregul aspect al unei componente ═══════════════
   * Mandatul central de design: distincția CERERE vs OFERTĂ.
   * O singură componentă, două înfățișări, printr-un singur atribut.
   * ⚠️ Culoarea e doar UNUL din 4 semnale. Vezi §B din context pack:
   *    badge cu text + pictogramă + rail + tentă. Test: planșa în alb-negru. */
  --track-accent:        var(--c-emerald);
  --track-accent-strong: var(--c-emerald-700);
  --track-tint:          var(--c-emerald-50);
  --track-border:        var(--c-emerald-100);
  --track-glow:          var(--shadow-emerald);
  --track-on-accent:     var(--c-on-accent);

  /* ═══ SPAȚIERE (bază 4px) ═════════════════════════════════════════════ */
  --s-1:2px;  --s-2:4px;  --s-3:6px;  --s-4:8px;  --s-5:12px; --s-6:16px;
  --s-7:20px; --s-8:24px; --s-9:32px; --s-10:40px; --s-11:56px; --s-12:72px; --s-13:96px;

  /* ═══ RADIUS ══════════════════════════════════════════════════════════ */
  --r-xs:6px; --r-sm:9px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-blob:44px; --r-pill:999px;

  /* ═══ ELEVAȚIE — mari, soft, low-opacity, cu tentă emerald ════════════ */
  --shadow-hairline: 0 1px 2px rgba(21,32,27,.05);
  --shadow-soft:     0 12px 24px -12px rgba(21,32,27,.20);
  --shadow-card:     0 24px 60px -24px rgba(21,32,27,.40);
  --shadow-pop:      0 30px 70px -20px rgba(21,32,27,.40);
  --shadow-emerald:  0 8px 18px -8px rgba(15,107,74,.50);
  --shadow-gold:     0 8px 18px -8px rgba(226,169,59,.50);
  --shadow-inset:    inset 0 1px 0 rgba(255,255,255,.6);

  /* ═══ MOTION ══════════════════════════════════════════════════════════ */
  --dur-instant: 90ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    380ms;
  --dur-page:    520ms;
  --stagger:     45ms;

  --ease-standard: cubic-bezier(.2,.8,.2,1);
  --ease-out:      cubic-bezier(.16,1,.3,1);
  --ease-in:       cubic-bezier(.7,0,.84,0);
  --ease-spring:   cubic-bezier(.34,1.4,.64,1);

  /* ═══ FOCUS — vizibil ÎNTOTDEAUNA ═════════════════════════════════════ */
  --focus-ring:  0 0 0 3px rgba(15,107,74,.30);
  --focus-color: var(--c-emerald);

  /* ═══ TIPOGRAFIE — scală fluidă, mobile-first ═════════════════════════ */
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  /* alias: prototipul P1 folosește `var(--font)`. Păstrat ca să poată fi
     copiate 1:1 fragmente din planșe fără să cadă în tăcere. */
  --font: var(--font-sans);

  --t-display: clamp(36px, 7vw, 60px);
  --t-h1:      clamp(30px, 5.2vw, 42px);
  --t-h2:      clamp(24px, 3.8vw, 32px);
  --t-h3:      clamp(19px, 2.4vw, 24px);
  --t-h4:      clamp(17px, 1.8vw, 19px);
  --t-lead:    clamp(16px, 1.7vw, 18px);
  --t-body:    15px;
  --t-small:   13px;
  --t-xsmall:  11.5px;

  /* ═══ LAYOUT ══════════════════════════════════════════════════════════ */
  --w-page:   1200px;
  --w-narrow: 720px;   /* wizard, formulare, articole */
  --gutter:   clamp(16px, 4vw, 32px);

  /* ═══ Z-INDEX ═════════════════════════════════════════════════════════ */
  --z-base:1; --z-sticky:900; --z-header:1000; --z-dropdown:1100; --z-sheet:1200; --z-toast:1300;

  /* ═══ PICTOGRAME CA MĂȘTI ═════════════════════════════════════════════
   * Se folosesc ca `mask-image`, NU ca `background-image`: masca ia culoarea
   * din `background-color`, deci pictograma urmează tokenul de text sau de
   * pistă. Același mecanism îl folosește și `rtcl-public.css` pentru
   * pictogramele de cont — de aceea se pot completa cele care lipsesc
   * fără să atingem markup-ul. Vezi §8.3.
   * ⚠️ Traseele sunt fără `fill`/`stroke` colorat: într-o mască doar alfa contează. */
  --cnc-ico-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22l-9-9V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.4'/%3E%3C/svg%3E");
  --cnc-ico-receipt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2.5-2 2.5 2 2.5-2 2.5 2 2.5-2 2.5 2V2l-2.5 2L15 2l-2.5 2L10 2 7.5 4Z'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E");
  --cnc-ico-store: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h18l-1.5-5.2A2 2 0 0 0 17.6 2H6.4a2 2 0 0 0-1.9 1.4Z'/%3E%3Cpath d='M4 9v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V9'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E");
  --cnc-ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
  --cnc-ico-empty: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 12 3l9 5.5v7L12 21l-9-5.5Z'/%3E%3Cpath d='m3 8.5 9 5.5 9-5.5M12 14v7'/%3E%3C/svg%3E");
  /* adăugate la pasul 4 (homepage): cele două câmpuri ale barei de căutare */
  --cnc-ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  --cnc-ico-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.3-6-10a6 6 0 0 1 12 0c0 4.7-6 10-6 10z'/%3E%3Ccircle cx='12' cy='11' r='2.2'/%3E%3C/svg%3E");

  /* ═══ adăugate la pasul 5 (pagina de anunț) ═══════════════════════════
   * 🔴🔴 AICI MECANISMUL NU MAI E O PREFERINȚĂ, E SINGURA CALE.
   *
   * Constatarea C36 (20.08), prinsă la prima randare reală, nu în cod:
   * pe pagina de anunț, pentru orice vizitator care NU poate vedea contactele,
   * pluginul filtrează ÎNTREG documentul prin `rtcl_mask_seller_html()`. A doua
   * trecere (`rtcl-offers.php:1284`) aplică pe tot HTML-ul scrubberul de
   * telefoane: `(?<!\w)(\+?\d[\d\s\-\(\)]{4,}\d)(?!\w)` → `****`.
   *
   * Un `<svg viewBox="0 0 24 24">` inline se potrivește cu tiparul ăla.
   * Rezultatul măsurat: `viewBox="****"` și `d="M8 10V7a **** 0v3"` —
   * pictograma dispare, fără nicio eroare în consolă, DOAR pentru vizitatorii
   * mascați, adică pentru majoritatea. Aceeași capcană a lovit deja pluginul:
   * data-URI-ul lui din `wp_head` iese `viewBox='****'` în pagina randată.
   *
   * O foaie de stil externă NU trece prin `ob_start()`. Deci pe pagina de anunț
   * pictogramele se desenează din CSS, ca măști, nu din markup.
   * ⚠️ Regula, pe scurt: pe `single-rtcl_listing`, ZERO SVG inline în markup.
   * ------------------------------------------------------------------------- */
  --cnc-ico-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --cnc-ico-lock-pending: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3Cpath d='M12 14v3.5'/%3E%3C/svg%3E");
  --cnc-ico-unlock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 7.5-2'/%3E%3C/svg%3E");
  --cnc-ico-imageoff: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 19'/%3E%3C/svg%3E");
  --cnc-ico-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3C/svg%3E");
  --cnc-ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
  --cnc-ico-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9.5 17H2.5L12 3z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E");
  --cnc-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9.5'/%3E%3C/svg%3E");
}


/* ═══════════════════════════════════════════════════════════════════════════
 * §2 COMUTATORUL DE TRACK
 * Se pune pe orice container: card, secțiune, pagină.
 * `cnc_get_track()` (functions.php) oglindește EXACT gardul de mascare din
 * rtcl-offers.php:337-340 — vezi P1-fundatie-spec.md §2.4.
 * ═════════════════════════════════════════════════════════════════════════ */

[data-track="cerere"] {
  --track-accent:        var(--c-emerald);
  --track-accent-strong: var(--c-emerald-700);
  --track-tint:          var(--c-emerald-50);
  --track-border:        var(--c-emerald-100);
  --track-glow:          var(--shadow-emerald);
  --track-on-accent:     var(--c-on-accent);
}

[data-track="oferta"] {
  --track-accent:        var(--c-gold-700);   /* text/borduri — contrast OK pe deschis */
  --track-accent-strong: var(--c-gold);       /* fill decorativ: rail, price pill */
  --track-tint:          var(--c-gold-50);
  --track-border:        var(--c-gold-100);
  --track-glow:          var(--shadow-gold);
  --track-on-accent:     var(--c-ink);        /* pe auriu se scrie cu INK, nu cu alb */
}


/* ---------------------------------------------------------------------------
 * REDUCED MOTION — obligatoriu, nu opțional.
 * Anulează duratele; animațiile infinite (shimmer, spin) se opresc explicit.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant:0ms; --dur-fast:0ms; --dur-base:0ms;
    --dur-slow:0ms;    --dur-page:0ms; --stagger:0ms;
  }
  .cnc-skel::after,
  .cnc-btn.is-loading::after,
  .cnc-card__rail {
    animation: none !important;   /* motiv: animații infinite/decorative */
  }
  .cnc-card__rail { transform: scaleY(1); }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * §3 BAZĂ — 🟡 SINGURA secțiune cu efect global
 *
 * ⚠️ ADAPTARE FAȚĂ DE PROTOTIP, DELIBERATĂ:
 *    Prototipul P1 e o pagină de sine stătătoare și își permite
 *    `*{box-sizing}`, `p{margin:0}`, `h1..h4{margin:0}`.
 *    Peste tema Classima (Bootstrap) astea ar rupe spațierea pe TOT site-ul.
 *    Aici NU resetăm marginile global — resetul trăiește doar în interiorul
 *    componentelor `cnc-`, unde controlăm noi întregul context.
 * ═════════════════════════════════════════════════════════════════════════ */

body.cnc {
  font-family: var(--font-sans);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Titlurile primesc greutatea și tracking-ul din P1, dar NU marginile.
 *
 * 🔴 CONSTATARE 19.08 (C31), la pasul 8 — doi defecți vechi, invizibili până
 *    la primul titlu așezat pe fundal închis:
 *
 *    a) FONTUL NU AJUNGEA LA TITLURI. Regula asta declara greutate și tracking,
 *       dar nu și `font-family`. Tema tipărește un `<style>` inline cu
 *       `h1 { font-family: Nunito }` (dynamic styles din Redux), deci TOATE
 *       titlurile de pe site au rămas pe Nunito, deși §4.1 instalase Plus
 *       Jakarta Sans și corpul de text îl folosea corect. Se vedea greu tocmai
 *       fiindcă ambele sunt sans-serif geometrice.
 *
 *    b) CULOAREA TITLURILOR ERA FIXĂ, NU MOȘTENITĂ. Același bloc inline pune
 *       `h1 { color: #181B31 }` (0,0,1). În interiorul unei componente pe
 *       `--c-ink` (`.cnc-pagehero`, `.cnc-credexp`), titlul ieșea aproape
 *       invizibil: negru pe negru.
 *
 * 🔴 A DOUA Încercare a fost GREȘITĂ și e notată ca să nu se repete: pus aici,
 *    un `color: inherit` rezolvă hero-ul și RUPE homepage-ul. `body.cnc h2` e
 *    (0,1,2) — UN element în plus față de `.cnc-closing h2`, care e (0,1,1) și
 *    dă titlul alb pe blocul emerald. Regula globală l-a bătut și titlul a
 *    devenit negru pe verde, prins la verificarea vizuală, nu de validator.
 *    **Culoarea rămâne treaba fiecărei componente**, ca peste tot în sistem;
 *    aici trece doar fontul, pentru care nicio componentă nu concurează.
 */
body.cnc h1, body.cnc h2, body.cnc h3,
body.cnc h4, body.cnc h5, body.cnc h6 {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -.02em;
}

/* Focus vizibil peste tot. Tema ascunde outline-ul pe multe elemente. */
body.cnc :focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-xs);
}

/* Utilitar de adâncime: zgomot SVG 2–3% + glow radial.
   Adâncime fără ornamente și fără imagini (P1 §1, decizia 1). */
.cnc-depth { position: relative; isolation: isolate; }
.cnc-depth::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 80% at 85% -10%, rgba(15,107,74,.10), transparent 60%);
}
.cnc-depth::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Test de accesibilitate: verifică cele 4 semnale redundante fără culoare. */
[data-grayscale="on"] { filter: grayscale(1); }


/* ═══════════════════════════════════════════════════════════════════════════
 * §4 COMPONENTE (Mod A) — clase `cnc-` NOI
 *
 * Toate sunt INERTE până sunt puse în markup. Nu ating niciun selector
 * existent (`rtin-`, `rtcl-`, `cc-`). Risc vizual la activare: ZERO.
 * Nescopate sub `body.cnc` intenționat: namespace nou, fără coliziuni, și
 * pot fi refolosite în prototipuri/planșe fără rescriere.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── 4.1 BUTOANE ────────────────────────────────────────────────────────── */
.cnc-btn {
  --btn-h: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-4);
  min-height: var(--btn-h); padding: 0 var(--s-7);
  font-family: inherit; font-size: var(--t-body); font-weight: 700; line-height: 1;
  border: 1px solid transparent; border-radius: var(--r-pill);
  cursor: pointer; text-align: center; white-space: nowrap; text-decoration: none;
  transition: transform var(--dur-instant) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.cnc-btn:active:not(:disabled) { transform: scale(.97); }            /* motion: press */
.cnc-btn:disabled, .cnc-btn.is-disabled { opacity: .45; cursor: not-allowed; }
.cnc-btn--sm { --btn-h: 36px; font-size: var(--t-small); padding: 0 var(--s-6); }
.cnc-btn--lg { --btn-h: 52px; font-size: var(--t-lead); padding: 0 var(--s-9); }
.cnc-btn--block { width: 100%; }

.cnc-btn--primary { background: var(--c-emerald); color: var(--c-on-accent); box-shadow: var(--shadow-emerald); }
.cnc-btn--primary:hover:not(:disabled) { background: var(--c-emerald-700); color: var(--c-on-accent); }

.cnc-btn--offer { background: var(--c-gold); color: var(--c-ink); box-shadow: var(--shadow-gold); }
.cnc-btn--offer:hover:not(:disabled) { background: var(--c-gold-600); color: var(--c-ink); }

.cnc-btn--secondary { background: var(--c-surface); color: var(--c-emerald-700); border-color: var(--c-border-strong); }
.cnc-btn--secondary:hover:not(:disabled) { border-color: var(--c-emerald); background: var(--c-emerald-50); color: var(--c-emerald-700); }

.cnc-btn--ghost { background: transparent; color: var(--c-text-muted); }
.cnc-btn--ghost:hover:not(:disabled) { background: var(--c-bg-alt); color: var(--c-ink); }

.cnc-btn--danger { background: var(--c-danger); color: var(--c-on-accent); }
.cnc-btn--danger:hover:not(:disabled) { background: var(--c-danger-700); color: var(--c-on-accent); }

.cnc-btn--icon { padding: 0; width: var(--btn-h); }

/* track-aware: butonul își ia culoarea din pista containerului */
.cnc-btn--track { background: var(--track-accent-strong); color: var(--track-on-accent); box-shadow: var(--track-glow); }

/* 🔴 BUTOANELE CARE SUNT `<a>` — corectură măsurată (18.08, pasul 3).
   Tema tipărește în `<head>`, din Redux, regula `a:link, a:visited { color:#0F6B4A }`.
   Specificitatea ei e (0,1,1) — tip + pseudo-clasă — deci bate ORICE variantă
   de mai sus, care e (0,1,0). Rezultatul măsurat: „Trimite o ofertă" ieșea
   `rgb(15,107,74)` pe fundal `rgb(10,82,56)` — verde pe verde, contrast 1.3:1,
   text practic invizibil. Se vedea și pe homepage (aceleași carduri), unde
   trecuse neobservat fiindcă `--secondary` și `--ghost` au ÎNTÂMPLĂTOR aceeași
   culoare cu linkul temei.

   Reafirmarea de mai jos e (0,2,1), deci câștigă fără `!important`. E scrisă
   variantă cu variantă, deliberat: un `color: inherit` global ar fi luat
   culoarea părintelui (a cardului), nu pe cea a butonului. */
a.cnc-btn--primary:link,   a.cnc-btn--primary:visited   { color: var(--c-on-accent); }
a.cnc-btn--offer:link,     a.cnc-btn--offer:visited     { color: var(--c-ink); }
a.cnc-btn--secondary:link, a.cnc-btn--secondary:visited { color: var(--c-emerald-700); }
a.cnc-btn--ghost:link,     a.cnc-btn--ghost:visited     { color: var(--c-text-muted); }
a.cnc-btn--danger:link,    a.cnc-btn--danger:visited    { color: var(--c-on-accent); }
a.cnc-btn--track:link,     a.cnc-btn--track:visited     { color: var(--track-on-accent); }

.cnc-btn.is-loading { pointer-events: none; color: transparent !important; position: relative; }
.cnc-btn.is-loading::after {
  content: ''; position: absolute; width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; border-right-color: transparent;
  animation: cnc-spin .7s linear infinite;
  color: var(--c-on-accent);
}
.cnc-btn--secondary.is-loading::after,
.cnc-btn--ghost.is-loading::after { color: var(--c-emerald); }
@keyframes cnc-spin { to { transform: rotate(360deg); } }


/* ── 4.2 FORMULARE ──────────────────────────────────────────────────────── */
.cnc-field { display: flex; flex-direction: column; gap: var(--s-4); }
/* 🔴 `display:flex` bate valoarea implicită a atributului `[hidden]`, deci un
   câmp ascuns ar rămâne vizibil. Contează la orice câmp condiționat — primul
   caz real: nivelurile 2–3 din panoul de căutare avansată (§13.6). */
.cnc-field[hidden] { display: none; }
.cnc-field__label { font-size: var(--t-small); font-weight: 600; color: var(--c-ink); }
.cnc-field__label span { color: var(--c-danger); }   /* marcajul de „obligatoriu" */
.cnc-field__hint { font-size: var(--t-xsmall); color: var(--c-text-muted-2); }

.cnc-input, .cnc-select, .cnc-textarea {
  width: 100%; font-family: inherit; font-weight: 500; color: var(--c-ink);
  font-size: 16px;                          /* 🔴 16px pe mobil = fără zoom la focus în iOS */
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm); padding: 12px var(--s-6); min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
@media (min-width: 768px) {
  .cnc-input, .cnc-select, .cnc-textarea { font-size: var(--t-body); }
}
.cnc-input::placeholder, .cnc-textarea::placeholder { color: var(--c-text-faint); }
.cnc-input:hover, .cnc-select:hover, .cnc-textarea:hover { border-color: var(--c-text-muted-2); }
.cnc-input:focus, .cnc-select:focus, .cnc-textarea:focus {
  outline: none; border-color: var(--focus-color); box-shadow: var(--focus-ring);
}
.cnc-textarea { min-height: 108px; resize: vertical; line-height: 1.55; }
.cnc-select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: var(--s-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B62' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s-5) center; background-size: 18px;
}
/* ⚠️ `mu-plugins/cc-filters-auto-simple.php` pune `appearance:auto!important` pe
   `.cc-mm select` → acolo săgeata noastră NU se poate aplica. Constatat la P3. */

.cnc-field.has-error .cnc-input,
.cnc-field.has-error .cnc-select,
.cnc-field.has-error .cnc-textarea { border-color: var(--c-danger); }
.cnc-field__error {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-xsmall); font-weight: 600; color: var(--c-danger);
}

/* radio-card / checkbox-card — inputul real rămâne operabil de la tastatură */
.cnc-choice { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.cnc-choice__item { position: relative; }
.cnc-choice__item input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.cnc-choice__box {
  display: flex; flex-direction: column; gap: var(--s-5); height: 100%;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--s-7) var(--s-6); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.cnc-choice__ico {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--c-bg-alt); color: var(--c-text-muted);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.cnc-choice__label { font-size: var(--t-body); font-weight: 700; }
.cnc-choice__item input:hover + .cnc-choice__box { border-color: var(--c-border-strong); }
.cnc-choice__item input:focus-visible + .cnc-choice__box { box-shadow: var(--focus-ring); border-color: var(--focus-color); }
.cnc-choice__item input:checked + .cnc-choice__box {
  border-color: var(--track-accent); border-width: 2px;
  padding: calc(var(--s-7) - 1px) calc(var(--s-6) - 1px);   /* compensează bordura de 2px */
  box-shadow: 0 6px 16px -8px rgba(15,107,74,.4);
}
.cnc-choice__item input:checked + .cnc-choice__box .cnc-choice__ico { background: var(--track-tint); color: var(--track-accent); }
.cnc-choice__item input:checked + .cnc-choice__box::after {
  content: ''; position: absolute; top: var(--s-5); right: var(--s-5);
  width: 22px; height: 22px; border-radius: 50%; background: var(--track-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E");
  background-size: 14px; background-repeat: no-repeat; background-position: center;
  animation: cnc-pop var(--dur-base) var(--ease-spring);
}
@keyframes cnc-pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* stepper */
.cnc-stepper {
  display: inline-flex; align-items: center; gap: var(--s-2);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-pill);
  padding: var(--s-2); background: var(--c-surface);
}
.cnc-stepper__btn {
  width: 40px; height: 40px; border: none; background: var(--c-bg-alt); border-radius: 50%;
  color: var(--c-ink); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-standard);
}
.cnc-stepper__btn:hover { background: var(--c-emerald-50); color: var(--c-emerald); }
.cnc-stepper__val { min-width: 56px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* upload */
.cnc-upload {
  border: 1.5px dashed var(--c-border-strong); border-radius: var(--r-md);
  padding: var(--s-9) var(--s-7); text-align: center; background: var(--c-surface-2);
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
  cursor: pointer;
}
.cnc-upload:hover { border-color: var(--c-emerald); background: var(--c-emerald-50); }
.cnc-upload__thumbs { display: flex; gap: var(--s-4); margin-top: var(--s-6); justify-content: center; flex-wrap: wrap; }
.cnc-upload__thumb {
  width: 56px; height: 56px; border-radius: var(--r-xs); position: relative;
  background: linear-gradient(135deg, var(--c-placeholder-2), var(--c-placeholder-1));
  display: flex; align-items: center; justify-content: center; color: var(--c-placeholder-ink);
}
.cnc-upload__thumb--add { border: 1.5px dashed var(--c-border-strong); background: none; color: var(--c-text-faint); }


/* ── 4.3 BADGE / CHIP / PRICE / COUNT ───────────────────────────────────── */
.cnc-badge {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-xsmall); font-weight: 800; line-height: 1;
  padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid transparent;
  white-space: nowrap;
}
.cnc-badge--track    { background: var(--track-tint);    border-color: var(--track-border);   color: var(--track-accent); }
.cnc-badge--pending  { background: var(--c-warning-50);  border-color: var(--c-gold-100);     color: var(--c-warning); }
.cnc-badge--accepted { background: var(--c-success-50);  border-color: var(--c-emerald-100);  color: var(--c-success); }
.cnc-badge--rejected { background: var(--c-danger-50);   border-color: var(--c-danger-100);   color: var(--c-danger); }
.cnc-badge--closed   { background: var(--c-bg-alt);      border-color: var(--c-border);       color: var(--c-text-muted); }
/* 🔴 `.rtcl-badge--accepted` și `.is-masked` sunt CITITE de PHP (rtcl-offers.php).
   Clasele `cnc-badge--*` se ADAUGĂ pe lângă ele, nu le înlocuiesc. */

.cnc-chip {
  display: inline-flex; align-items: center; gap: var(--s-4);
  font-size: var(--t-small); font-weight: 600; color: var(--c-ink);
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  padding: 7px 8px 7px 14px; border-radius: var(--r-pill); min-height: 36px;
}
.cnc-chip__x {
  width: 22px; height: 22px; border: none; border-radius: 50%; cursor: pointer;
  background: var(--c-bg-alt); color: var(--c-text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.cnc-chip__x:hover { background: var(--c-danger-50); color: var(--c-danger); }

/* 🔴 Formatul obligatoriu e `1.200 lei` — vezi nota din §4.6 despre scrubber. */
.cnc-price {
  display: inline-flex; align-items: center;
  font-size: var(--t-body); font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--c-gold); color: var(--c-ink);          /* ink pe auriu = 9:1 */
  padding: 5px 12px; border-radius: var(--r-sm);
}
.cnc-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--c-danger); color: var(--c-on-accent); border-radius: var(--r-pill);
}


/* ── 4.4 CARD — componenta centrală ─────────────────────────────────────── */
.cnc-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); box-shadow: var(--shadow-hairline);
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.cnc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--track-border); }
.cnc-card:focus-within { box-shadow: var(--focus-ring); }

/* semnalul 3 din 4: rail-ul de track */
.cnc-card__rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 2;
  background: var(--track-accent-strong);
  transform: scaleY(0); transform-origin: top;
  animation: cnc-rail-draw var(--dur-base) var(--ease-out) forwards;
}
@keyframes cnc-rail-draw { to { transform: scaleY(1); } }

.cnc-card__media {
  position: relative; aspect-ratio: 4 / 3; background: var(--track-tint);
  display: flex; align-items: center; justify-content: center; color: var(--track-accent-strong);
  overflow: hidden;
}
.cnc-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cnc-card__badges { position: absolute; top: var(--s-5); left: var(--s-6); display: flex; gap: var(--s-3); z-index: 2; }
.cnc-card__fav {
  position: absolute; top: var(--s-4); right: var(--s-4); z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--c-text-muted-2);
  display: flex; align-items: center; justify-content: center;
  transition: color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-spring);
}
.cnc-card__fav:hover { color: var(--c-danger); transform: scale(1.1); }
.cnc-card__price-abs { position: absolute; bottom: var(--s-4); right: var(--s-4); z-index: 2; margin: 0; }
.cnc-card__body { padding: var(--s-6) var(--s-6) var(--s-7) var(--s-7); display: flex; flex-direction: column; gap: var(--s-4); flex: 1; }
.cnc-card__title {
  font-size: var(--t-h4); font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cnc-card__title a { color: inherit; text-decoration: none; }
.cnc-card__title a:hover { color: var(--track-accent); }
.cnc-card__meta { font-size: var(--t-small); color: var(--c-text-muted-2); margin: 0; }
.cnc-card__foot {
  display: flex; align-items: center; gap: var(--s-5);
  font-size: var(--t-small); color: var(--c-text-muted);
  margin-top: auto; padding-top: var(--s-4);
}
.cnc-card__foot svg { color: var(--track-accent); }

/* variantă listă — orizontal de la 768px */
@media (min-width: 768px) {
  .cnc-card--list { flex-direction: row; }
  .cnc-card--list .cnc-card__media { flex: 0 0 232px; aspect-ratio: auto; }
  .cnc-card--list .cnc-card__body { padding: var(--s-7) var(--s-8); }
}
.cnc-card--compact .cnc-card__media { aspect-ratio: 16 / 9; }
.cnc-card--compact .cnc-card__body { padding: var(--s-5) var(--s-6) var(--s-6) var(--s-7); }
.cnc-card--compact .cnc-card__title { font-size: var(--t-body); }

/* skeleton — înlocuiește spinnerele existente la filtrare AJAX */
.cnc-skel { background: var(--c-bg-alt); border-radius: var(--r-xs); position: relative; overflow: hidden; }
.cnc-skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: cnc-shimmer 1.4s linear infinite;
}
@keyframes cnc-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.cnc-skel--media { aspect-ratio: 4/3; border-radius: 0; }
.cnc-skel--line { height: 13px; }


/* ── 4.5 NAVIGAȚIE (breadcrumb · tabs · pagination · iconbtn) ───────────── */
.cnc-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  font-size: var(--t-small); color: var(--c-text-muted-2);
}
.cnc-breadcrumb a { color: var(--c-text-muted); }
.cnc-breadcrumb span[aria-current] { color: var(--c-ink); font-weight: 600; }

.cnc-tabs { display: flex; gap: var(--s-2); border-bottom: 1px solid var(--c-border); overflow-x: auto; scrollbar-width: none; }
.cnc-tabs::-webkit-scrollbar { display: none; }
.cnc-tab {
  flex: 0 0 auto; position: relative; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: var(--t-small); font-weight: 700; color: var(--c-text-muted);
  padding: var(--s-5) var(--s-6); min-height: 44px;
  transition: color var(--dur-fast) var(--ease-standard);
}
.cnc-tab::after {
  content: ''; position: absolute; left: var(--s-5); right: var(--s-5); bottom: -1px; height: 2px;
  background: var(--c-emerald); transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.cnc-tab:hover { color: var(--c-ink); }
.cnc-tab[aria-selected="true"] { color: var(--c-emerald); }
.cnc-tab[aria-selected="true"]::after { transform: scaleX(1); }

.cnc-pagination { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.cnc-pagination a, .cnc-pagination span {
  min-width: 44px; min-height: 44px;                      /* ținte de atingere */
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-small); font-weight: 700; border-radius: var(--r-sm);
  border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-ink);
  font-variant-numeric: tabular-nums; text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.cnc-pagination a:hover { border-color: var(--c-emerald); background: var(--c-emerald-50); color: var(--c-emerald); }
.cnc-pagination [aria-current] { background: var(--c-emerald); border-color: var(--c-emerald); color: var(--c-on-accent); }
.cnc-pagination .is-gap { border: none; background: none; color: var(--c-text-faint); min-width: 24px; }

.cnc-iconbtn {
  position: relative; width: 44px; height: 44px; border-radius: var(--r-sm);
  border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-ink);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.cnc-iconbtn:hover { border-color: var(--c-emerald); background: var(--c-emerald-50); color: var(--c-emerald); }
.cnc-iconbtn .cnc-count { position: absolute; top: -5px; right: -5px; }


/* ── 4.6 FEEDBACK (banner · toast · empty · progress · steps · modal) ───── */
.cnc-banner {
  display: flex; gap: var(--s-5); align-items: flex-start;
  border-radius: var(--r-md); padding: var(--s-6) var(--s-7);
  border: 1px solid; font-size: var(--t-small); line-height: 1.5;
}
.cnc-banner svg { flex: 0 0 auto; margin-top: 1px; }
.cnc-banner strong { display: block; margin-bottom: 2px; }
.cnc-banner p { margin: 0; }
.cnc-banner--info    { background: var(--c-emerald-50); border-color: var(--c-emerald-100); color: var(--c-emerald-800); }
.cnc-banner--success { background: var(--c-success-50); border-color: var(--c-emerald-100); color: var(--c-success); }
.cnc-banner--warning { background: var(--c-warning-50); border-color: var(--c-gold-100);    color: var(--c-warning); }
.cnc-banner--error   { background: var(--c-danger-50);  border-color: var(--c-danger-100);  color: var(--c-danger); }

.cnc-toast {
  display: flex; align-items: center; gap: var(--s-5);
  background: var(--c-ink); color: var(--c-on-dark);
  border-radius: var(--r-md); padding: var(--s-6) var(--s-7); box-shadow: var(--shadow-pop);
  font-size: var(--t-small); font-weight: 600; max-width: 380px;
}
.cnc-toast svg { color: var(--c-success-300); flex: 0 0 auto; }   /* succes pe fundal închis */
.cnc-toast.is-in { animation: cnc-toast-in var(--dur-slow) var(--ease-out); }
@keyframes cnc-toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }

.cnc-empty {
  text-align: center; padding: var(--s-11) var(--s-8);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
}
.cnc-empty__art { margin: 0 auto var(--s-7); display: block; }
.cnc-empty h4 { font-size: var(--t-h4); margin: 0 0 var(--s-4); }
.cnc-empty p { font-size: var(--t-small); color: var(--c-text-muted); max-width: 40ch; margin: 0 auto var(--s-7); }

.cnc-progress { height: 6px; background: var(--c-border); border-radius: var(--r-pill); overflow: hidden; }
.cnc-progress__bar { height: 100%; background: var(--c-emerald); border-radius: var(--r-pill); transition: width var(--dur-slow) var(--ease-out); }

.cnc-steps { display: flex; gap: var(--s-3); }
.cnc-steps span { flex: 1; height: 5px; border-radius: 3px; background: var(--c-border); transition: background var(--dur-base) var(--ease-standard); }
.cnc-steps span.is-done { background: var(--c-emerald); }

.cnc-modal {
  background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
  padding: var(--s-9); max-width: 440px; border: 1px solid var(--c-border);
}
.cnc-modal h4 { font-size: var(--t-h3); margin: 0 0 var(--s-5); }
.cnc-sheet {
  background: var(--c-surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-pop); padding: var(--s-6) var(--s-7) var(--s-9); max-width: 380px;
  border: 1px solid var(--c-border); border-bottom: none;
}
.cnc-sheet__grab { width: 42px; height: 4px; border-radius: 2px; background: var(--c-border-strong); margin: 0 auto var(--s-7); }
.cnc-sheet.is-in { animation: cnc-sheet-up var(--dur-slow) var(--ease-out); }
@keyframes cnc-sheet-up { from { transform: translateY(100%); } to { transform: none; } }


/* ── 4.7 BARA DE CĂUTARE COMPOZITĂ ──────────────────────────────────────── */
.cnc-search {
  display: flex; flex-direction: column; gap: var(--s-4);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-soft);
}
.cnc-search__field {
  display: flex; align-items: center; gap: var(--s-5);
  background: var(--c-bg); border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 0 var(--s-6); min-height: 48px; color: var(--c-emerald);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.cnc-search__field:focus-within { border-color: var(--c-emerald); background: var(--c-surface); box-shadow: var(--focus-ring); }
.cnc-search__field input {
  flex: 1; border: none; background: none; outline: none; min-width: 0;
  font-family: inherit; font-size: 16px; font-weight: 500; color: var(--c-ink); padding: 12px 0;
}
.cnc-search__field input::placeholder { color: var(--c-text-faint); }
@media (min-width: 768px) {
  .cnc-search { flex-direction: row; align-items: center; border-radius: var(--r-pill); padding: var(--s-4); }
  .cnc-search__field { border-radius: var(--r-pill); }
  .cnc-search__field--where { flex: 0 0 250px; }   /* ordinea reală: Locație → Keywords (erata P2) */
  .cnc-search__field--what  { flex: 1; }
  .cnc-search__field input { font-size: var(--t-body); }
}
.cnc-search__sugg {
  border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2);
  box-shadow: var(--shadow-soft); overflow: hidden; margin-top: var(--s-4);
}
.cnc-search__sugg ul { margin: 0; padding: 0; }
.cnc-search__sugg li {
  display: flex; align-items: center; gap: var(--s-5); padding: var(--s-5) var(--s-6);
  font-size: var(--t-small); color: var(--c-ink); cursor: pointer; list-style: none;
  border-bottom: 1px solid var(--c-border);
  opacity: 0; transform: translateY(6px);
  animation: cnc-sugg-in var(--dur-base) var(--ease-out) forwards;
}
.cnc-search__sugg li:last-child { border-bottom: none; }
.cnc-search__sugg li:hover { background: var(--c-emerald-50); }
.cnc-search__sugg li svg { color: var(--c-text-faint); }
@keyframes cnc-sugg-in { to { opacity: 1; transform: none; } }


/* ── 4.8 cnc-trackswitch ────────────────────────────────────────────────── */
.cnc-trackswitch {
  position: relative; display: inline-flex; padding: var(--s-2);
  background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--r-pill);
}
.cnc-trackswitch__thumb {
  position: absolute; top: var(--s-2); bottom: var(--s-2); left: var(--s-2);
  width: calc(50% - var(--s-2)); border-radius: var(--r-pill);
  background: var(--c-surface); box-shadow: var(--shadow-soft);
  border: 1px solid var(--track-border);
  transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-base) var(--ease-standard);
}
.cnc-trackswitch[data-active="oferta"] .cnc-trackswitch__thumb { transform: translateX(100%); }
.cnc-trackswitch__opt {
  position: relative; z-index: 1; flex: 1 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-4);
  min-height: 40px; padding: 0 var(--s-7); border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: var(--t-small); font-weight: 700; color: var(--c-text-muted);
  border-radius: var(--r-pill);
  transition: color var(--dur-base) var(--ease-standard);
}
.cnc-trackswitch__opt[aria-pressed="true"] { color: var(--track-accent); }


/* ── 4.9 🔴🔴 cnc-lockstrip — „Contact protejat" ─────────────────────────
 *
 * ZONA CEA MAI PERICULOASĂ DIN TOT PROIECTUL. Citește P1-fundatie-spec.md §4.1
 * ÎNAINTE de a atinge orice de aici.
 *
 * Regulile care nu se încalcă:
 *  1. `.classified-seller-info.widget` e selector COMPUS purtător de sarcină:
 *     de el depind CSS-ul de mascare (rtcl-offers.php:1301), JS-ul (:1319) și
 *     re-etichetarea titlului (vanzator-nu-cumparator.php:21,39).
 *  2. Ierarhia rădăcină › h3.widgettitle › .rtin-box NU se aplatizează —
 *     tema stilează prin lanțuri descendente (inc/dynamic-styles/listing.php:90-102).
 *  3. NICIUN <div> nou înaintea numelui: masca de nume (:1150-1152) captează
 *     leneș până la primul `</div>`. Un înveliș greșit oprește mascarea ÎN TĂCERE.
 *  4. Purtătorul real al telefonului e `div.rtcl-contact-reveal-wrapper.reveal-phone`
 *     (Fns::the_phone(), custom/functions.php:849-865) — NU `a.rtcl-contact-reveal-phone`,
 *     care nu există în output-ul temei Classima.
 *  5. Starea mascată o produce PLUGINUL (data-blocked, aria-disabled,
 *     pointer-events:none). Noi doar REACȚIONĂM la atribute.
 *
 * ⚠️ Regulile `__core` de mai jos sunt INERTE azi: `.cnc-lockstrip__core` nu
 *    există în markup până la override-ul de template din P4.
 * ------------------------------------------------------------------------- */
.cnc-lockstrip {
  --ls-accent: var(--c-lock);
  --ls-tint:   var(--c-bg-alt);
  --ls-border: var(--c-border);
  border: 1px solid var(--ls-border); border-radius: var(--r-md);
  background: var(--ls-tint); overflow: hidden;
  transition: background var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
}
.cnc-lockstrip__head { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-6) var(--s-7); }
.cnc-lockstrip__ico {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--r-sm);
  background: var(--c-surface); color: var(--ls-accent);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ls-border);
}
.cnc-lockstrip__txt { flex: 1; min-width: 0; }
.cnc-lockstrip__title {
  font-size: var(--t-small); font-weight: 800; color: var(--ls-accent);
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
}
.cnc-lockstrip__sub { font-size: var(--t-xsmall); color: var(--c-text-muted); margin-top: 2px; }
.cnc-lockstrip__track { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-7) var(--s-6); }
.cnc-lockstrip__dot {
  flex: 1; height: 4px; border-radius: 2px; background: var(--c-border-strong);
  transition: background var(--dur-slow) var(--ease-out);
}
.cnc-lockstrip__dot.is-on { background: var(--ls-accent); }
.cnc-lockstrip__body { border-top: 1px solid var(--ls-border); background: var(--c-surface); padding: var(--s-6) var(--s-7); }

/* miezul de mascare — clasele existente rămân neatinse. Stilăm PE lanțul real. */
.cnc-lockstrip__core { font-size: var(--t-small); }
.cnc-lockstrip__core > .widgettitle {
  font-size: var(--t-xsmall); font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-text-muted); margin: 0 0 var(--s-5);
}
.cnc-lockstrip__core > .rtin-box { display: flex; flex-direction: column; gap: var(--s-4); }
.cnc-lockstrip__core .rtin-name { font-size: var(--t-body); font-weight: 700; margin: 0; }
.cnc-lockstrip__core .rtin-name a { color: var(--c-ink); text-decoration: none; }
.cnc-lockstrip__core .rtcl-user-status { font-size: var(--t-xsmall); color: var(--c-text-muted); }
.cnc-lockstrip__core .rtcl-contact-reveal-wrapper {
  display: block; border: 1px solid var(--ls-border); border-radius: var(--r-md);
  background: var(--ls-tint); padding: var(--s-5) var(--s-6);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.cnc-lockstrip__core .rtcl-contact-reveal-wrapper.reveal-phone { cursor: pointer; }
.cnc-lockstrip__core .rtcl-contact-reveal-wrapper.reveal-phone:hover { border-color: var(--ls-accent); }
.cnc-lockstrip__core .rtcl-contact-reveal-wrapper[data-blocked="1"] { opacity: .85; }
.cnc-lockstrip__core .numbers {
  font-size: var(--t-h4); font-weight: 800; color: var(--c-ink);
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
/* `.numbers` afișează `****` în starea mascată (:1249). E text real, nu „gol". */
.cnc-lockstrip__core [data-blocked="1"] .numbers { color: var(--c-text-faint); }
/* 🔴 Fraza e ÎNLOCUITĂ de plugin (:1243-1246) cu un text de 45 de caractere.
   Caseta trebuie să-l încapă pe mobil — de aici `line-height` generos, fără nowrap. */
.cnc-lockstrip__core small.text-muted {
  display: block; font-size: var(--t-xsmall); color: var(--c-text-muted);
  margin-top: 2px; line-height: 1.45;
}

.cnc-lockstrip[data-lock="pending"]  { --ls-accent: var(--c-warning); --ls-tint: var(--c-warning-50); --ls-border: var(--c-gold-100); }
.cnc-lockstrip[data-lock="unlocked"] { --ls-accent: var(--c-success); --ls-tint: var(--c-success-50); --ls-border: var(--c-emerald-100); }
.cnc-lockstrip[data-lock="unlocked"] .cnc-lockstrip__ico { animation: cnc-unlock var(--dur-slow) var(--ease-spring); }
@keyframes cnc-unlock {
  0%   { transform: rotate(0) scale(1); }
  45%  { transform: rotate(-14deg) scale(1.08); }
  100% { transform: rotate(0) scale(1); }
}
.cnc-lockstrip[data-lock="unlocked"] .cnc-lockstrip__body > * { animation: cnc-reveal var(--dur-slow) var(--ease-out) both; }
@keyframes cnc-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }


/* ── 4.10 MOTION: reveal la intrare ─────────────────────────────────────
 * 🔴 Starea ascunsă e condiționată de `html.cnc-js` — marcaj pus de
 *    `assets/js/cnc-home.js` ca PRIMĂ instrucțiune. Fără el (JS dezactivat,
 *    scriptul blocat, eroare mai devreme în pagină), regula nu se potrivește
 *    și conținutul rămâne vizibil. Altfel un `opacity:0` necondiționat ar
 *    goli jumătate de homepage exact în cazul în care nimeni nu-l poate repara
 *    — cerința „JS dezactivat" din P2 §7.
 * ------------------------------------------------------------------------- */
.cnc-js .cnc-reveal { opacity: 0; transform: translateY(16px); }
.cnc-js .cnc-reveal.is-in { animation: cnc-reveal-up var(--dur-slow) var(--ease-out) forwards; }
@keyframes cnc-reveal-up { to { opacity: 1; transform: none; } }
/* la `prefers-reduced-motion` JS-ul marchează totul `is-in` din start; centura
   de siguranță de aici acoperă și cazul în care observatorul nu apucă să ruleze */
@media (prefers-reduced-motion: reduce) {
  .cnc-js .cnc-reveal { opacity: 1; transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * §5 HEADER — Mod B, SKIN PUR. Zero override de template.
 *
 * Markup real (verificat 17.08 în cod, nu presupus):
 *   template-parts/content-menu.php  → <header id="site-header" class="site-header">
 *   template-parts/header/header-2.php → .main-header > .container
 *   template-parts/header/part-2.php   → .main-header-inner > .site-branding
 *                                        + .main-navigation-area > #main-navigation
 *                                        + .header-icon-area
 *
 * 🔴 BLOCANT EVITAT: clasa `.main-header-inner` e REFOLOSITĂ de
 *    header-offscreen.php pentru bara de căutare mobilă
 *    (`.main-header-inner.mobile-header-search`), care e SORĂ cu `#site-header`,
 *    nu copil. Un selector `.main-header-inner` neancorat ar fi lovit-o și pe ea
 *    (flex + min-height 72px pe un formular de căutare). De aici ancorarea
 *    obligatorie în `#site-header`.
 *
 * 🔴 CONTRACT: `a.header-login-icon` trebuie să păstreze SIMULTAN clasa ȘI un
 *    `href` care conține `/my-account/` — regexul din
 *    cc-wisechatpro-badge-mesaje-necitite.php:64 le cere pe amândouă.
 *    Se schimbă una → badge-ul de mesaje necitite dispare în tăcere.
 *    Noi doar STILIZĂM, nu atingem markupul.
 * ═════════════════════════════════════════════════════════════════════════ */

/* 🔴 CORECTURĂ 17.08, după prima activare reală a temei — vezi §6.3 din
 *    06-implementare. Prima versiune picta fundalul pe `#site-header` și
 *    header-ul rămânea NEGRU: banda care se vede nu e wrapperul, ci
 *    `.main-header` (`template-parts/header/header-2.php`), iar culoarea ei
 *    vine din Redux (`menu_bg_color = #000000`), tipărită ca stil dinamic
 *    în `wp_head` (`inc/dynamic-styles/frontend.php:139`):
 *        .mean-container .mean-bar, .main-header { background-color: … }
 *    Structura reală, verificată în cod:
 *        header#site-header  ›  div.main-header  ›  .container  ›  .main-header-inner
 *    Fundalul se pune pe `.main-header`; `#site-header` rămâne doar ancora
 *    de scopare (și îi dăm aceeași culoare, pentru clona sticky).
 * 🟡 Ce NU rezolvă CSS-ul: `menu_bg_color` rămâne `#000000` în Redux. Îl batem
 *    prin specificitate, dar valoarea corectă e să fie golită din panou —
 *    același tipar ca la copyright (întrebarea 17) și ca erata P2. */
body.cnc #site-header,
body.cnc #site-header .main-header {
  background: var(--c-surface);
  background-color: var(--c-surface);
}
body.cnc #site-header .main-header { border-bottom: 1px solid var(--c-border); }
body.cnc #site-header { border-bottom: none; }

/* tema dă `.main-header .site-branding { text-align:center; margin-top:10px }`
   și `.main-navigation-area { min-height:90px }` — ambele se bat cu flexul nostru */
body.cnc #site-header .main-header .container { max-width: var(--w-page); }
body.cnc #site-header .main-header-inner {
  display: flex; align-items: center; gap: var(--s-7);
  min-height: 72px; padding: var(--s-4) 0;
}
body.cnc #site-header .main-header .main-navigation-area { min-height: 0; }
body.cnc #site-header .main-header .site-branding { text-align: left; margin-top: 0; }

body.cnc #site-header .site-branding { flex: 0 0 auto; display: flex; align-items: center; }
body.cnc #site-header .site-branding img { width: 160px; height: auto; display: block; }
/* part-2.php tipărește AMBELE logo-uri (.dark-logo + .light-logo).
   Header-ul nostru e pe fundal deschis → rămâne cel închis. */
body.cnc #site-header .light-logo { display: none; }
@media (max-width: 400px) {
  body.cnc #site-header .site-branding img { width: 130px; }
}

body.cnc #site-header .main-navigation-area { min-width: 0; }
body.cnc #site-header .main-navigation ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: var(--s-7);
}
body.cnc #site-header .main-navigation li { position: relative; }

/* 🔴 Lanțul de mai jos OGLINDEȘTE lanțul stilului dinamic al temei
 *    (`.main-header .main-navigation-area .main-navigation ul li a`,
 *    `frontend.php:142`, culoarea `menu_color = #f4f4f4` din Redux) și adaugă
 *    `body.cnc` în față. Un selector mai scurt câștigă teoretic prin `#id`,
 *    dar aici nu ne bazăm pe aritmetica de specificitate: oglindim lanțul,
 *    ca regula să rămână validă și dacă tema își schimbă ancora. */
body.cnc #site-header .main-header .main-navigation-area .main-navigation ul li a {
  display: block; padding: var(--s-4) 0;
  font-size: var(--t-small); font-weight: 600; color: var(--c-ink);
  text-decoration: none;
  /* ⚠️ Etichetele sunt scrise CU MAJUSCULE ÎN BAZA DE DATE, nu prin CSS
     (întrebarea 16). `text-transform` NU le poate normaliza — se editează
     din Aspect → Meniuri. Aici doar ne asigurăm că nu ADĂUGĂM majuscule. */
  text-transform: none; letter-spacing: 0;
}
/* hoverul temei e `menu_hover_color = #f85c70` — roz, același din erata P2 */
body.cnc #site-header .main-header .main-navigation-area .main-navigation ul.menu > li > a:hover,
body.cnc #site-header .main-header .main-navigation-area .main-navigation ul li a:hover {
  color: var(--c-emerald);
}
body.cnc #site-header .main-header .main-navigation-area .main-navigation ul li.current-menu-item > a,
body.cnc #site-header .main-header .main-navigation-area .main-navigation ul li.current_page_item > a {
  color: var(--c-emerald);
}
body.cnc #site-header .main-header .main-navigation-area .main-navigation ul.menu > li.current-menu-item > a::after,
body.cnc #site-header .main-header .main-navigation-area .main-navigation ul.menu > li.current > a::after {
  content: ''; display: block; height: 2px; border-radius: 1px; width: auto;
  background-color: var(--c-emerald); margin-top: 2px;
}

body.cnc #site-header .header-icon-area { display: flex; align-items: center; gap: var(--s-5); margin-left: auto; }
body.cnc #site-header .header-chat-icon,
body.cnc #site-header .header-login-icon {
  position: relative; width: 44px; height: 44px; border-radius: var(--r-sm);
  border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-ink);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
body.cnc #site-header .header-chat-icon:hover,
body.cnc #site-header .header-login-icon:hover { border-color: var(--c-emerald); background: var(--c-emerald-50); color: var(--c-emerald); }

/* badge-ul e INJECTAT de mu-plugin printr-un ob_start() global — îl stilăm, nu îl generăm */
body.cnc .cc-wc-badge {
  position: absolute; top: -5px; right: -5px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--c-danger); color: var(--c-on-accent); border-radius: var(--r-pill);
}

/* `.header-btn` e clasa temei; primește look-ul de `.cnc-btn--primary`.
   ⚠️ `header_btn_url` e azi `http://cinecum.local/post-an-ad/` — URL local
   hardcodat în Redux (întrebarea 15). Se repară la migrare, nu din CSS. */
body.cnc #site-header .header-btn {
  display: inline-flex; align-items: center; gap: var(--s-4);
  height: 44px; padding: 0 var(--s-6); border-radius: var(--r-sm);
  background: var(--c-emerald); color: var(--c-on-accent);
  font-size: var(--t-small); font-weight: 700; white-space: nowrap; text-decoration: none;
  box-shadow: var(--shadow-emerald);
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
body.cnc #site-header .header-btn:hover { background: var(--c-emerald-700); color: var(--c-on-accent); transform: translateY(-1px); }

/* ── 5.1 Meniul mobil — `#meanmenu` e SORĂ cu `#site-header`, nu copil ────
 * 🔴 Aceeași corectură ca la §5: `.mean-container .mean-bar` primește
 *    `menu_bg_color` (#000000) din ACELAȘI stil dinamic ca `.main-header`
 *    (`frontend.php:139`). Fără regula de fundal de mai jos, bara mobilă
 *    rămânea neagră chiar dacă header-ul de desktop devenea alb.
 * ------------------------------------------------------------------------- */
body.cnc #meanmenu .mean-bar,
body.cnc .mean-container .mean-bar {
  background: var(--c-surface);
  background-color: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
body.cnc #meanmenu .mean-bar { display: flex; align-items: center; gap: var(--s-5); min-height: 64px; }
body.cnc #meanmenu .mean-logo-area img { width: 130px; height: auto; }
body.cnc #meanmenu .header-mobile-icons { display: flex; align-items: center; gap: var(--s-4); margin-left: auto; }
body.cnc #meanmenu .header-menu-btn-mob span { display: none; }        /* pe mobil rămâne doar „+" */
body.cnc #meanmenu .header-chat-icon,
body.cnc #meanmenu .header-login-icon,
body.cnc #meanmenu .header-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; border-radius: var(--r-sm); text-decoration: none;
}
body.cnc #meanmenu .header-btn { background: var(--c-emerald); color: var(--c-on-accent); padding: 0 var(--s-5); }


/* ═══════════════════════════════════════════════════════════════════════════
 * §6 FOOTER — Mod B, SKIN PUR. Conținutul rămâne în widgeturi.
 *
 * Markup real (content-footer.php, footer_style = 1):
 *   <footer> › .footer-top-area > .container > .row > [col-*]  (o coloană per
 *              zonă de widget activă: footer-1…footer-4)
 *           › .footer-bottom-area > .container > .row > [col-*]  (copyright)
 *
 * `<footer>` nu are nici clasă, nici id. E copil DIRECT al `#page.site`
 * (footer.php: `</div><!-- #content -->` apoi footer, apoi `</div><!-- #page -->`).
 * De aceea ancorăm `#page > footer` — un simplu `footer` ar prinde orice
 * `<footer>` din interiorul unui card sau widget.
 *
 * 🔴 Copyright-ul NU e în template: vine din Redux (`copyright_text`), scrie azi
 *    „…2025…", iar `copyright_bgcolor` #111212 / `copyright_color` #ababab sunt
 *    salvate în opțiuni și BAT design system-ul (tiparul eratei P2).
 *    Se golesc din Redux ÎNAINTE ca CSS-ul de mai jos să conteze.
 * 🔴 ANPC / ANPC-SAL / SOL lipsesc complet — obligație legală pentru un
 *    marketplace B2C românesc. `.cnc-footer__legal` e pregătit; conținutul
 *    se adaugă ca widget, nu din cod.
 * ═════════════════════════════════════════════════════════════════════════ */

body.cnc #page > footer { background: var(--c-ink); color: var(--c-on-dark-muted); }
body.cnc #page > footer .footer-top-area { padding: var(--s-10) 0 var(--s-9); }

/* Nu depindem de clasele `col-*` — numărul lor variază cu câte zone sunt active
   (tema calculează 1→12, 2→6, 3→4, 4→3). Grid cu auto-fit acoperă toate cazurile. */
body.cnc #page > footer .footer-top-area .row {
  display: grid; gap: var(--s-9);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
body.cnc #page > footer .footer-top-area .row > [class*="col-"] {
  width: auto; max-width: none; flex: none; padding: 0;
}

body.cnc #page > footer .widget + .widget { margin-top: var(--s-8); }
body.cnc #page > footer .widgettitle {
  font-size: var(--t-xsmall); letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-text-muted-2); margin: 0 0 var(--s-5); font-weight: 700;
}
body.cnc #page > footer ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s-4); font-size: var(--t-small);
}
body.cnc #page > footer a { color: var(--c-on-dark-muted); text-decoration: none; }
body.cnc #page > footer a:hover { color: var(--c-on-accent); }

/* Slot pregătit pentru ANPC / ANPC-SAL / SOL (widget, nu cod) */
.cnc-footer__legal { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-6); }
.cnc-footer__legal span, .cnc-footer__legal a {
  display: inline-block; border: 1px solid var(--c-green-slate); border-radius: var(--r-xs);
  padding: 5px 9px; font-size: 10.5px; font-weight: 700;
}

body.cnc #page > footer .footer-bottom-area {
  margin-top: 0; padding: var(--s-6) 0; border-top: 1px solid var(--c-ink-800);
  font-size: var(--t-xsmall); color: var(--c-text-muted-2); background: transparent;
}
body.cnc #page > footer .footer-bottom-area .row {
  display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center;
}
body.cnc #page > footer .payment-icons {
  display: flex; flex-direction: row; gap: var(--s-4);
  list-style: none; margin: 0; padding: 0; margin-left: auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
 * §7 COMPONENTE P6 — cont / dashboard (Mod A) — clase `cnc-` NOI
 *
 * Sursa: design-output/P6-cont-dashboard/P6-cont-dashboard.html
 *        + P6-cont-dashboard-spec.md §3–§7
 *
 * Ca și §4: INERTE până sunt puse în markup. Sunt scrise aici, nu doar în
 * skin-ul din §8, pentru că ecranele care CER markup nou (antetul contului,
 * cardul de credite, bannerul post-publicare, detaliul comenzii ca perechi
 * cheie/valoare) se implementează în pasul următor, prin override de template.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── 7.1 Scheletul contului ─────────────────────────────────────────────── */
.cnc-account {
  max-width: var(--w-page); margin: 0 auto;
  padding: var(--s-9) var(--gutter) var(--s-13);
  display: grid; gap: var(--s-9); align-items: start;
}
@media (min-width: 992px) { .cnc-account { grid-template-columns: 248px minmax(0, 1fr); } }

/* ── 7.2 Navigația contului ─────────────────────────────────────────────── */
.cnc-accnav {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--s-5); position: sticky; top: var(--s-7);
}
.cnc-accnav__group + .cnc-accnav__group {
  margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--c-border);
}
.cnc-accnav__lbl {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-text-faint); padding: 0 var(--s-5) var(--s-4);
}
.cnc-accnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cnc-accnav a {
  display: flex; align-items: center; gap: var(--s-5); min-height: 42px; padding: 0 var(--s-5);
  border-radius: var(--r-sm); font-size: var(--t-small); font-weight: 600; color: var(--c-text-muted);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.cnc-accnav a:hover { background: var(--c-bg-alt); color: var(--c-ink); }
.cnc-accnav a svg { flex: 0 0 auto; opacity: .75; }
.cnc-accnav__n {
  margin-left: auto; font-size: var(--t-xsmall); font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--c-text-faint);
}
/* starea activă: `is-active` pe <li>, NU aria-selected — vezi F §1.1 */
.cnc-accnav li.is-active > a { background: var(--track-tint); color: var(--track-accent); position: relative; }
.cnc-accnav li.is-active > a::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 2px; background: var(--track-accent-strong);
}
.cnc-accnav li.is-active > a svg { opacity: 1; }
.cnc-accnav__out { color: var(--c-danger); }

@media (max-width: 991px) {
  .cnc-accnav { position: static; padding: var(--s-4); overflow-x: auto; scrollbar-width: none; }
  .cnc-accnav::-webkit-scrollbar { display: none; }
  .cnc-accnav__group + .cnc-accnav__group { margin-top: 0; padding-top: 0; border-top: none; }
  .cnc-accnav__lbl { display: none; }
  .cnc-accnav__inner { display: flex; gap: var(--s-4); }
  .cnc-accnav ul { flex-direction: row; gap: var(--s-3); }
  .cnc-accnav a { white-space: nowrap; border: 1px solid var(--c-border); }
  .cnc-accnav li.is-active > a::before { display: none; }
  .cnc-accnav li.is-active > a { border-color: var(--track-border); }
}

/* ── 7.3 Antetul contului ───────────────────────────────────────────────── */
.cnc-acchead { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; margin-bottom: var(--s-8); }
.cnc-acchead__av {
  width: 52px; height: 52px; border-radius: 50%; background: var(--c-emerald-50);
  color: var(--c-emerald); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--t-lead); flex: 0 0 auto; border: 1px solid var(--c-emerald-100);
}
.cnc-acchead__t { font-size: var(--t-h3); margin: 0; }
.cnc-acchead__s { font-size: var(--t-small); color: var(--c-text-muted-2); margin: 0; }
.cnc-acchead__act { margin-left: auto; }

/* ── 7.4 Statistici ─────────────────────────────────────────────────────── */
.cnc-stats {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); margin-bottom: var(--s-9);
}
.cnc-stat {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: var(--s-7); display: flex; flex-direction: column; gap: var(--s-3);
}
.cnc-stat__k {
  font-size: var(--t-xsmall); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-text-muted-2); display: flex; align-items: center; gap: var(--s-4);
}
.cnc-stat__v { font-size: var(--t-h2); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.cnc-stat--track { background: var(--track-tint); border-color: var(--track-border); }
.cnc-stat--track .cnc-stat__v { color: var(--track-accent); }

/* ── 7.5 Cardul de credite ──────────────────────────────────────────────
 * 🔴 Vezi P6 §4 și constatarea din §8.6 de mai jos: azi cardul NU se
 *    randează deloc (e agățat de un hook care nu se declanșează nicăieri).
 *    Componenta e pregătită; activarea ei e o corectură de date afișate
 *    (întrebarea 29), nu de prezentare. Nu se aplică din oficiu.
 * ------------------------------------------------------------------------- */
.cnc-credits {
  background: var(--c-ink); color: var(--c-on-dark); border-radius: var(--r-md);
  padding: var(--s-8); display: flex; align-items: center; gap: var(--s-7); flex-wrap: wrap;
  position: relative; overflow: hidden; isolation: isolate;
}
.cnc-credits::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 140% at 90% -20%, rgba(226,169,59,.30), transparent 62%);
}
.cnc-credits__ico {
  width: 48px; height: 48px; border-radius: var(--r-sm); background: rgba(255,255,255,.10);
  display: flex; align-items: center; justify-content: center; color: var(--c-gold); flex: 0 0 auto;
}
.cnc-credits__v { font-size: var(--t-h1); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.cnc-credits__k {
  font-size: var(--t-xsmall); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-on-dark-muted); margin-bottom: var(--s-3);
}
.cnc-credits__d { font-size: var(--t-small); color: var(--c-on-dark-muted); max-width: 34ch; }
.cnc-credits__act { margin-left: auto; }
.cnc-credits--empty { background: var(--c-danger); }
.cnc-credits--empty::before { background: none; }
.cnc-credits--empty .cnc-credits__ico { color: var(--c-on-accent); }
.cnc-credits--empty .cnc-credits__d { color: rgba(255,255,255,.86); }

/* ── 7.6 cnc-datalist — UN singur tipar pentru cele 4 liste ─────────────
 * Azi: carduri la „Ofertele mele", tabele la „Comenzi" și „Anunturi Vanzari",
 * pentru date de aceeași natură. §8 le aduce pe toate la tiparul ăsta,
 * fără să rescrie markup-ul: rânduri pe desktop, carduri pe mobil.
 * ------------------------------------------------------------------------- */
.cnc-dlhead {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-6);
  flex-wrap: wrap; margin-bottom: var(--s-6);
}
.cnc-dlhead h2 { font-size: var(--t-h3); display: flex; align-items: center; gap: var(--s-5); margin: 0; }
.cnc-dlhead__hint { font-size: var(--t-xsmall); color: var(--c-text-muted-2); }

.cnc-datalist { display: flex; flex-direction: column; gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
.cnc-dlrow {
  position: relative; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--s-6) var(--s-7) var(--s-6) calc(var(--s-7) + 4px);
  display: grid; gap: var(--s-5); overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.cnc-dlrow:hover { border-color: var(--track-border); box-shadow: var(--shadow-soft); }
.cnc-dlrow__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--track-accent-strong); }
.cnc-dlrow__main { min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.cnc-dlrow__t {
  font-size: var(--t-body); font-weight: 700; line-height: 1.35; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cnc-dlrow__t a { color: inherit; text-decoration: none; }
.cnc-dlrow__t a:hover { color: var(--track-accent); }
.cnc-dlrow__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); font-size: var(--t-xsmall);
  color: var(--c-text-muted-2); margin: 0; padding: 0; list-style: none;
}
.cnc-dlrow__meta li { display: flex; align-items: center; gap: var(--s-3); }
.cnc-dlrow__meta b { font-weight: 700; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.cnc-dlrow__amt { font-size: var(--t-h4); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--c-ink); }
.cnc-dlrow__side { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.cnc-dlrow__act { display: flex; gap: var(--s-4); flex-wrap: wrap; }
@media (min-width: 768px) {
  .cnc-dlrow { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .cnc-dlrow__side { justify-content: flex-end; flex-direction: column; align-items: flex-end; gap: var(--s-5); }
}
.cnc-dlrow--accent { background: var(--track-tint); border-color: var(--track-border); }
.cnc-dlrow--muted { opacity: .7; }

/* ── 7.7 Detaliul comenzii: perechi cheie/valoare, nu al doilea tabel ───── */
.cnc-kv {
  display: grid; gap: var(--s-1); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; background: var(--c-border);
}
.cnc-kv__i { background: var(--c-surface); padding: var(--s-6) var(--s-7); }
.cnc-kv__k {
  display: block; font-size: var(--t-xsmall); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--c-text-muted-2); margin-bottom: var(--s-3);
}
.cnc-kv__v { font-size: var(--t-body); font-weight: 600; color: var(--c-ink); overflow-wrap: anywhere; }
.cnc-kv__i--wide { grid-column: 1 / -1; }

/* slot de acțiune în banner (bannerul post-publicare, P6 §7) */
.cnc-banner__act { margin-left: auto; flex: 0 0 auto; align-self: center; }


/* ═══════════════════════════════════════════════════════════════════════════
 * §8 SKIN CONT / DASHBOARD — Mod B, ZERO override de template, ZERO PHP
 *
 * Pasul 1 din P6 §14. Ancore verificate în cod pe 17.08:
 *   plugins/classified-listing/templates/myaccount/{my-account,navigation,
 *     dashboard,user-info,my-listings-table}.php
 *   themes/classima/classified-listing/myaccount/{my-account,navigation}.php
 *   mu-plugins/{cc-classima-offers-dashboard, cc-classima-vanzari-piese-dashboard,
 *     cinecum-comenzi-dashboard}.php
 *
 * ┌─ CONSTATĂRI LA IMPLEMENTARE (nu erau în spec, verificate în cod) ───────┐
 * │ C1. Tema randează `rtcl_account_navigation` de DOUĂ ori (my-account.php │
 * │     al temei, liniile 40 și 44): o dată în `.rtcl-MyAccount-mobile-     │
 * │     navbar`, o dată în `.rtcl-MyAccount-wrap`. Deci `<nav>`-ul contului │
 * │     există de două ori în DOM. Skin-ul le acoperă pe amândouă. Fuziunea │
 * │     lor cere override de template → rămâne pentru pasul următor.        │
 * │ C2. Cele 4 tab-uri custom (`offers`, `orders`, `anunturi-vanzari`,      │
 * │     `inbox`) NU au pictogramă în `rtcl-public.css` — dar regula         │
 * │     generică `li a:before` le dă `background-color:#BEBEBE` + 21×16px   │
 * │     fără `mask-image`. Rezultatul de azi: un DREPTUNGHI GRI în locul    │
 * │     pictogramei. §8.3 le dă măști proprii.                              │
 * │ C3. `rtcl_account_menu_icons` (filtrat de `cc-classima-offers-          │
 * │     dashboard.php:227`) NU EXISTĂ în plugin — filtru mort.              │
 * │ C4. `.rtcl-user-stats-card` (cardul „Credite") e agățat de              │
 * │     `rtcl_account_dashboard_stats`, hook care nu se declanșează nicăieri│
 * │     în `wp-content`. Cardul nu se randează DELOC — nu „arată 0,00 lei"  │
 * │     cum spune F §5. Statisticile reale sunt `.rtcl-listing-statistics`. │
 * │     Skin-ul acoperă ambele: cel viu și cel pregătit.                    │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * SPECIFICITATE: pluginul și tema stilizează contul prin lanțuri lungi
 * (până la 0,6,0). Fiecare regulă de aici își oglindește lanțul-țintă cu
 * `body.cnc` în față, deci câștigă strict. Unde a fost nevoie de `!important`,
 * motivul e notat pe loc (art. §6.6 din 06-implementare).
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── 8.1 Scheletul: două coloane, fundal de app ─────────────────────────── */
body.cnc .rtcl-MyAccount-wrap {
  display: grid; align-items: start; gap: var(--s-8);
  background: var(--c-bg); min-height: 0;
}
@media (min-width: 992px) {
  body.cnc .rtcl-MyAccount-wrap { grid-template-columns: 248px minmax(0, 1fr); }
}

body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-content {
  background: transparent; color: var(--c-ink);
  padding: 0; min-width: 0; flex: none;
}
/* 🔴 `!important` OBLIGATORIU, și e singurul mod. `classified-listing-pro`
   rulează la `$(document).ready()`, pe ORICE pagină de cont:

     function rtcl_set_chat_content_width() {                 // public.js:290
       var windowWidth  = $(window).width(),
           sidebarWidth = $('.rtcl-MyAccount-navigation').width(),
           contentWidth = windowWidth - sidebarWidth;
       $('.rtcl-MyAccount-content').width(contentWidth);      // → style="width:…px"
     }

   Formula presupune un layout FULL-BLEED: „conținutul se întinde de la
   marginea dreaptă a sidebar-ului până la marginea FERESTREI". În containerul
   boxed al temei (1205px, nu 1265px) rezultatul e mereu prea lat — măsurat
   1311px într-o pistă de grilă de 933px, adică ~378px în afara paginii. De
   acolo cardul „Credite rămase" tăiat pe dreapta din raportul clientului, și
   statisticile care se recalculau pe lățimea greșită (4 coloane de 308px).

   ⚠️ E un stil INLINE, pus din JS. Nicio specificitate din foaie nu-l poate
   bate — doar `!important` (§6.6). `width: auto` lasă elementul să ia exact
   lățimea pistei de grilă, adică ce cere planșa.
   ⚠️ Nu dezactivăm funcția pluginului și nu-i atingem fișierul: e logică de
   prezentare a LUI, iar peste 992px oricum nu mai are ce strica aici. */
body.cnc .rtcl-MyAccount-wrap > .rtcl-MyAccount-content { width: auto !important; }
body.cnc .rtcl-MyAccount-content-inner {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--s-7);
}
/* titlurile de secțiune din interiorul tab-urilor (Comenzi, detaliu comandă) */
body.cnc .rtcl-MyAccount-content > h2 { font-size: var(--t-h3); margin: 0 0 var(--s-5); }
body.cnc .rtcl-MyAccount-content > h3 { font-size: var(--t-h4); margin: var(--s-9) 0 var(--s-5); }

/* ── 8.2 Navigația — de la bara închisă a pluginului la card deschis ─────
 * Pluginul o randează `background:#1d2327`, 300px, `position:fixed` sub 992px.
 * Aici devine cardul din P6: suprafață deschisă, pastile, rail de track.
 * ------------------------------------------------------------------------- */
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--s-5);
}
/* 🔴 `flex`/`max-width` se rescriu DOAR peste 992px. Sub prag, pluginul
   trece navigația pe `position:fixed; left:-225px` (rtcl-public.css, media
   max-width:991px) și se bazează pe `max-width:220px` ca să-i dea lățimea —
   un element fixat fără lățime se strânge pe conținut. Un `max-width:none`
   nescopat ar fi lățit drawer-ul peste tot ecranul. */
@media (min-width: 992px) {
  body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation {
    position: sticky; top: var(--s-7); flex: none; max-width: none; width: auto;
  }
}
@media (max-width: 991px) {
  body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation {
    border-radius: 0; border-width: 0 1px 0 0; box-shadow: var(--shadow-pop);
    padding: var(--s-6) var(--s-4); overflow-y: auto;
  }
}
/* logo-ul și „My Account" din <nav> sunt redundante lângă header-ul site-ului */
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation > h3,
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation > .rtcl-myaccount-logo { display: none; }

body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation ul,
body.cnc .rtcl-MyAccount-mobile-navbar .rtcl-MyAccount-navigation ul {
  margin: 0; padding: 0; list-style: none; font-size: var(--t-small);
  display: flex; flex-direction: column; gap: 2px;
}
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation ul li,
body.cnc .rtcl-MyAccount-mobile-navbar .rtcl-MyAccount-navigation ul li {
  display: block; margin: 0; padding: 0; border: none; background: none; color: var(--c-text-muted);
}
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation ul li a,
body.cnc .rtcl-MyAccount-mobile-navbar .rtcl-MyAccount-navigation ul li a {
  position: relative; display: flex; align-items: center;
  min-height: 44px;                                  /* ținta de atingere din §7.3 QA */
  padding: var(--s-4) var(--s-5) var(--s-4) 42px;
  border-radius: var(--r-sm); text-decoration: none;
  font-size: var(--t-small); font-weight: 600; line-height: 1.3; color: var(--c-text-muted);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation ul li a:hover,
body.cnc .rtcl-MyAccount-mobile-navbar .rtcl-MyAccount-navigation ul li a:hover {
  background: var(--c-bg-alt); color: var(--c-ink);
}
/* pictograma: pluginul o dă ca `mask-image` + `background-color` → e recolorabilă */
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation ul li.rtcl-MyAccount-navigation-link a:before,
body.cnc .rtcl-MyAccount-mobile-navbar .rtcl-MyAccount-navigation ul li.rtcl-MyAccount-navigation-link a:before {
  left: var(--s-5); top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; margin: 0; vertical-align: baseline;
  background-color: var(--c-text-muted-2);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  background-image: none;   /* neutralizează pictograma bitmap din mu-plugin (C2/§8.3) */
  content: '';
}
/* bara verticală a pluginului (`a:after`) devine rail-ul de track */
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation ul li.rtcl-MyAccount-navigation-link a:after,
body.cnc .rtcl-MyAccount-mobile-navbar .rtcl-MyAccount-navigation ul li.rtcl-MyAccount-navigation-link a:after {
  left: 0; top: 8px; bottom: 8px; height: auto; width: 3px;
  border-radius: 2px; background-color: var(--track-accent-strong);
}
/* starea activă — `.is-active` pe <li>; `aria-selected` NU există (F §1.1) */
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation ul li.is-active,
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation ul li:hover,
body.cnc .rtcl-MyAccount-mobile-navbar .rtcl-MyAccount-navigation ul li.is-active,
body.cnc .rtcl-MyAccount-mobile-navbar .rtcl-MyAccount-navigation ul li:hover {
  background: none; color: var(--c-text-muted);
}
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation ul li.is-active > a,
body.cnc .rtcl-MyAccount-mobile-navbar .rtcl-MyAccount-navigation ul li.is-active > a {
  background: var(--track-tint); color: var(--track-accent); font-weight: 700;
}
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation ul li.is-active > a:before,
body.cnc .rtcl-MyAccount-mobile-navbar .rtcl-MyAccount-navigation ul li.is-active > a:before {
  background-color: var(--track-accent);
}

/* ── 8.3 Cele patru tab-uri custom: pictogramă în loc de dreptunghi gri ──
 * Constatarea C2. `rtcl-public.css` definește măști doar pentru endpoint-urile
 * lui; `offers` · `orders` · `anunturi-vanzari` · `inbox` moșteneau regula
 * generică fără `mask-image`, deci se afișau ca un bloc plin de 21×16px.
 * Pictogramele sunt DISTINCTE ca formă, nu doar ca tentă — testul alb-negru.
 * ------------------------------------------------------------------------- */
body.cnc .rtcl-MyAccount-navigation ul li.rtcl-MyAccount-navigation-link--offers a:before {
  -webkit-mask-image: var(--cnc-ico-tag); mask-image: var(--cnc-ico-tag);
}
body.cnc .rtcl-MyAccount-navigation ul li.rtcl-MyAccount-navigation-link--orders a:before {
  -webkit-mask-image: var(--cnc-ico-receipt); mask-image: var(--cnc-ico-receipt);
}
body.cnc .rtcl-MyAccount-navigation ul li[class*="navigation-link--anunturi"] a:before {
  -webkit-mask-image: var(--cnc-ico-store); mask-image: var(--cnc-ico-store);
}
body.cnc .rtcl-MyAccount-navigation ul li.rtcl-MyAccount-navigation-link--inbox a:before {
  -webkit-mask-image: var(--cnc-ico-mail); mask-image: var(--cnc-ico-mail);
}

/* ── 8.4 Track pe tab: cerere = emerald, ofertă = auriu ─────────────────
 * Mandatul central de design, obținut FĂRĂ markup nou: fiecare <li> își
 * setează variabilele de pistă, iar regulile din §8.2 le consumă.
 * Sursa adevărului rămâne `cnc_get_track()` — aici doar oglindim, pe tab:
 * „Cererile mele" e pista cerere, „Ofertele mele" și „Anunturi Vanzari"
 * (categoria `vanzari-piese-auto`) sunt pista ofertă.
 * ------------------------------------------------------------------------- */
body.cnc .rtcl-MyAccount-navigation ul li.rtcl-MyAccount-navigation-link--offers,
body.cnc .rtcl-MyAccount-navigation ul li[class*="navigation-link--anunturi"] {
  --track-accent:        var(--c-gold-700);
  --track-accent-strong: var(--c-gold);
  --track-tint:          var(--c-gold-50);
  --track-border:        var(--c-gold-100);
}

/* ── 8.5 Tab-urile cu tratament propriu: „Adaugă anunț" și „Ieși din cont" ── */
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation ul li.rtcl-MyAccount-navigation-link--add-listing {
  background: none; margin-top: var(--s-6); padding-top: var(--s-6);
  border-top: 1px solid var(--c-border);
}
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation ul li.rtcl-MyAccount-navigation-link--add-listing a {
  background: var(--c-emerald); color: var(--c-on-accent);
  box-shadow: var(--shadow-emerald); font-weight: 700; justify-content: center;
  padding-left: var(--s-6); padding-right: var(--s-6);
}
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation ul li.rtcl-MyAccount-navigation-link--add-listing a:before {
  position: static; transform: none; margin-right: var(--s-4); background-color: currentColor;
}
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation ul li.rtcl-MyAccount-navigation-link--add-listing a:hover {
  background: var(--c-emerald-700); color: var(--c-on-accent);
}
/* tema pune #ffefdb / #ff8800 pe „Logout", cu `!important` pe pictogramă */
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation ul li.rtcl-MyAccount-navigation-link.rtcl-MyAccount-navigation-link--logout {
  background-color: transparent;
}
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation ul li.rtcl-MyAccount-navigation-link.rtcl-MyAccount-navigation-link--logout a {
  color: var(--c-danger);
}
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation ul li.rtcl-MyAccount-navigation-link.rtcl-MyAccount-navigation-link--logout a:hover {
  background: var(--c-danger-50); color: var(--c-danger);
}
/* `!important` deliberat: tema îl folosește la sursă (listing.css, regula
   `--logout a:before`), deci e singurul mod de a recolora pictograma. */
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-navigation ul li.rtcl-MyAccount-navigation-link.rtcl-MyAccount-navigation-link--logout a:before {
  background-color: var(--c-danger) !important;
}

/* ── 8.6 Bara mobilă + drawer-ul ────────────────────────────────────────
 * 🔴 NU se convertește în pastile orizontale (P6 §9), deși designul o cere:
 *    deschiderea meniului e condusă de DOUĂ mecanisme JS diferite —
 *    `.classima-MyAccount-open-menu` (tema, `slideToggle`) și
 *    `.rtcl-MyAccount-open-menu` (pluginul, off-canvas cu `left` INLINE +
 *    un overlay `.sidebar-menu-opened` injectat în conținut).
 *    Un `position:static` din CSS ar lăsa hamburgerele să injecteze overlay-ul
 *    peste un meniu deja vizibil. Conversia cere override de template
 *    (eliminarea randării duble, C1) → pasul următor, nu skin.
 *    Aici: aceleași tokeni, aceeași suprafață deschisă, mecanica neatinsă.
 * ------------------------------------------------------------------------- */
body.cnc .rtcl-MyAccount-mobile-navbar {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); box-shadow: none; align-items: center; gap: var(--s-5);
}
body.cnc .rtcl-MyAccount-mobile-navbar > h4 {
  font-size: var(--t-h4); margin: 0; padding: var(--s-6) 0 var(--s-6) var(--s-7); left: 0;
}
body.cnc .rtcl-MyAccount-mobile-navbar .rtcl-myaccount-logo { display: none; }
/* cele două hamburgere sunt desenate cu linii albe pe fundal închis */
body.cnc .rtcl-MyAccount-mobile-navbar .rtcl-MyAccount-open-menu span,
body.cnc .rtcl-MyAccount-mobile-navbar .rtcl-MyAccount-open-menu:before,
body.cnc .rtcl-MyAccount-mobile-navbar .rtcl-MyAccount-open-menu:after,
body.cnc .rtcl-MyAccount-mobile-navbar .classima-MyAccount-open-menu span,
body.cnc .rtcl-MyAccount-mobile-navbar .classima-MyAccount-open-menu:before,
body.cnc .rtcl-MyAccount-mobile-navbar .classima-MyAccount-open-menu:after {
  background-color: var(--c-ink);
}
body.cnc .rtcl-MyAccount-mobile-navbar .rtcl-MyAccount-open-menu,
body.cnc .rtcl-MyAccount-mobile-navbar .classima-MyAccount-open-menu {
  margin: 0 var(--s-7) 0 auto;
}
body.cnc .rtcl-MyAccount-mobile-navbar .rtcl-MyAccount-navigation {
  background: var(--c-surface); padding: var(--s-4);
}
/* tema pune „\f105" (Font Awesome) roz pe fiecare <li> al copiei mobile */
body.cnc .rtcl-MyAccount-mobile-navbar .rtcl-MyAccount-navigation ul li:before { content: none; }
body.cnc .rtcl-MyAccount-content .sidebar-menu-opened { background: rgba(21,32,27,.45); }

/* ── 8.7 Antetul contului (`rtcl-user-info`) ────────────────────────────── */
body.cnc .rtcl-user-info {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--s-7); margin-bottom: var(--s-8);
}
body.cnc .rtcl-user-info .rtcl-user-content-inner {
  display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap;
}
body.cnc .rtcl-user-info .rtcl-user-avatar img {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block;
  border: 1px solid var(--c-border);
}
body.cnc .rtcl-user-info .rtcl-user-details { min-width: 0; }
body.cnc .rtcl-user-info .rtcl-user-details h5 { font-size: var(--t-h4); margin: 0 0 2px; font-weight: 800; }
body.cnc .rtcl-user-info .rtcl-user-details p {
  font-size: var(--t-small); color: var(--c-text-muted); margin: 0; overflow-wrap: anywhere;
}
body.cnc .rtcl-user-info .rtcl-user-note-inner {
  margin-top: var(--s-6); background: var(--c-emerald-50); border: 1px solid var(--c-emerald-100);
  border-radius: var(--r-sm); padding: var(--s-6) var(--s-7);
}
body.cnc .rtcl-user-info .rtcl-user-note-inner h4 { font-size: var(--t-small); margin: 0 0 var(--s-3); }
body.cnc .rtcl-user-info .rtcl-user-note-inner p { font-size: var(--t-small); margin: 0; }

/* ── 8.8 Statisticile reale (`.rtcl-listing-statistics`) ────────────────
 * NU `.rtcl-user-stats-card` — vezi constatarea C4. Tema le dă prin Bootstrap
 * `flex:25%`; le trecem pe grid, ca la footer (P1 §6), fără să atingem clasele.
 * SVG-urile au `fill="#FF3C48"` hardcodat în template, dar pluginul le pune
 * `fill: currentColor` — deci se recolorează din `color`.
 * ------------------------------------------------------------------------- */
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics {
  display: grid; gap: var(--s-6); margin: 0 0 var(--s-9);
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
/* 🔴 LANȚUL ARE `body.cnc.rtcl-account`, NU doar `body.cnc` — și nu e zel.
   Pluginul își scrie regula ca
     `body.rtcl-account:not(.page-template-rtcl-canvas_template)
      .rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics > div
      { flex: 1 1 50%; max-width: 50% }`
   adică (0,5,0) — un `:not()` contează cât argumentul lui. Varianta noastră cu
   un singur `body.cnc` era (0,4,0) și PIERDEA: cardurile de statistici se
   opreau la `max-width: 50%` dintr-o pistă de grilă deja împărțită în patru,
   deci ieșeau 107px lățime în loc de 214 — înguste, cu eticheta ruptă pe trei
   rânduri și cu înălțimi inegale. Exact „elemente lipite / nearanjate" din
   raport. Cu a doua clasă pe `body` ajungem la (0,6,1) și câștigăm curat.
   Aceeași familie cu §6.8: adversarul nu e ordinea, e specificitatea. */
body.cnc.rtcl-account .rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics > div {
  flex: none; max-width: none; padding: 0;
}
/* Cardurile unui rând au aceeași înălțime chiar dacă o etichetă se rupe pe
   două rânduri: altfel rândul arată zimțat, ceea ce citim ca „nealiniat". */
body.cnc .rtcl-MyAccount-content .rtcl-listing-statistics > div,
body.cnc .rtcl-MyAccount-content .rtcl-listing-statistics .rtcl-listing-count-inner { height: 100%; }
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics .rtcl-listing-count-inner {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: var(--s-7); gap: var(--s-6); align-items: center;
}
body.cnc.rtcl-account .rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics .rtcl-listing-count-inner .rtcl-listing-icon,
body.cnc.rtcl-account .rtcl-MyAccount-content .rtcl-user-credits .rtcl-listing-icon {
  width: 44px; height: 44px; border-radius: var(--r-sm); flex: 0 0 auto;
  background: var(--c-bg-alt); color: var(--c-text-muted);
}
/* Cardul de credite refolosește structura statisticilor, dar pictograma lui e
   un `<i>` gol, fără clasa de variantă — deci nu prindea nicio culoare de-a
   noastră și rămânea pe albastrul hardcodat al pluginului, singura pată de
   culoare străină de paletă din tot panoul. */
body.cnc.rtcl-account .rtcl-MyAccount-content .rtcl-user-credits .rtcl-listing-icon {
  background: var(--c-gold-50); color: var(--c-gold-700);
}
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics .rtcl-listing-count-inner .rtcl-listing-icon svg {
  width: 22px; height: 22px;
}
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics .rtcl-listing-count-inner .rtcl-listing-icon.total-icon {
  background: var(--c-emerald-50); color: var(--c-emerald);
}
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics .rtcl-listing-count-inner .rtcl-listing-icon.published-icon {
  background: var(--c-success-50); color: var(--c-success);
}
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics .rtcl-listing-count-inner .rtcl-listing-icon.pending-icon {
  background: var(--c-warning-50); color: var(--c-warning);
}
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics .rtcl-listing-count-inner .rtcl-listing-icon.expired-icon {
  background: var(--c-danger-50); color: var(--c-danger);
}
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics .rtcl-listing-count-inner .rtcl-listing-number h5 {
  font-size: var(--t-xsmall); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-text-muted-2); margin: 0 0 var(--s-3); line-height: 1.3;
}
body.cnc .rtcl-MyAccount-wrap .rtcl-MyAccount-content .rtcl-listing-statistics .rtcl-listing-count-inner .rtcl-listing-number span {
  font-size: var(--t-h2); font-weight: 800; color: var(--c-ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}

/* cardul „Credite" — pregătit, dar azi nu se randează (C4). Se îmbracă la
   tiparul `.cnc-credits`, ca activarea lui să nu ceară o a doua trecere. */
body.cnc .rtcl-user-stats-card {
  background: var(--c-ink); color: var(--c-on-dark); border-radius: var(--r-md);
  padding: var(--s-7); display: flex; align-items: center; gap: var(--s-6);
  position: relative; overflow: hidden; isolation: isolate;
}
body.cnc .rtcl-user-stats-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 140% at 90% -20%, rgba(226,169,59,.30), transparent 62%);
}
body.cnc .rtcl-user-stats-card__icon {
  width: 48px; height: 48px; border-radius: var(--r-sm); background: rgba(255,255,255,.10);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
body.cnc .rtcl-user-stats-card__title {
  font-size: var(--t-xsmall); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-on-dark-muted); margin: 0 0 var(--s-3);
}
body.cnc .rtcl-user-stats-card__count {
  font-size: var(--t-h2); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
}

/* ── 8.9 Tabelul „Cererile mele" (`rtcl-my-listing-table`) ──────────────── */
body.cnc .rtcl-MyAccount-content .rtcl-my-listing-table {
  width: 100%; border-collapse: separate; border-spacing: 0 var(--s-5); background: none;
}
body.cnc .rtcl-MyAccount-content .rtcl-my-listing-table thead th {
  background: none; border: none; padding: 0 var(--s-6) var(--s-3);
  font-size: var(--t-xsmall); font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-text-muted-2);
}
body.cnc .rtcl-MyAccount-content .rtcl-my-listing-table tbody tr {
  background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-border);
  border-radius: var(--r-md);
}
body.cnc .rtcl-MyAccount-content .rtcl-my-listing-table tbody td {
  border: none; padding: var(--s-6); vertical-align: middle;
}
body.cnc .rtcl-MyAccount-content .rtcl-my-listing-table tbody td:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
body.cnc .rtcl-MyAccount-content .rtcl-my-listing-table tbody td:last-child  { border-radius: 0 var(--r-md) var(--r-md) 0; }
body.cnc .rtcl-MyAccount-content .rtcl-my-listing-table .listing-thumb img {
  width: 72px; height: 54px; object-fit: cover; border-radius: var(--r-xs); display: block;
  background: linear-gradient(135deg, var(--c-placeholder-2), var(--c-placeholder-1));
}
body.cnc .rtcl-MyAccount-content .rtcl-my-listing-table .listing-title {
  font-size: var(--t-body); font-weight: 700; color: var(--c-ink); text-decoration: none;
}
body.cnc .rtcl-MyAccount-content .rtcl-my-listing-table .listing-title:hover { color: var(--track-accent); }
body.cnc .rtcl-MyAccount-content .rtcl-my-listing-table .rtcl-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  list-style: none; margin: var(--s-4) 0 0; padding: 0;
  font-size: var(--t-xsmall); color: var(--c-text-muted-2);
}
body.cnc .rtcl-MyAccount-content .rtcl-my-listing-table .rtcl-meta li {
  display: flex; align-items: center; gap: var(--s-3); margin: 0;
}
body.cnc .rtcl-MyAccount-content .rtcl-my-listing-table .status-cell span {
  display: inline-flex; align-items: center;
  font-size: var(--t-xsmall); font-weight: 800; line-height: 1;
  padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid transparent;
  background: var(--c-bg-alt); border-color: var(--c-border); color: var(--c-text-muted);
}
body.cnc .rtcl-MyAccount-content .rtcl-my-listing-table .status-cell span.publish {
  background: var(--c-success-50); border-color: var(--c-emerald-100); color: var(--c-success);
}
body.cnc .rtcl-MyAccount-content .rtcl-my-listing-table .status-cell span.pending {
  background: var(--c-warning-50); border-color: var(--c-gold-100); color: var(--c-warning);
}
body.cnc .rtcl-MyAccount-content .rtcl-my-listing-table .status-cell span.rtcl-expired,
body.cnc .rtcl-MyAccount-content .rtcl-my-listing-table .status-cell span.draft {
  background: var(--c-danger-50); border-color: var(--c-danger-100); color: var(--c-danger);
}

/* mobil: rândul devine card; capetele de coloană există deja ca `data-column` */
@media (max-width: 767px) {
  body.cnc .rtcl-MyAccount-content .rtcl-my-listing-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  body.cnc .rtcl-MyAccount-content .rtcl-my-listing-table tbody tr {
    display: grid; gap: var(--s-4); padding: var(--s-6); grid-template-columns: 72px minmax(0, 1fr);
  }
  body.cnc .rtcl-MyAccount-content .rtcl-my-listing-table tbody td { padding: 0; border-radius: 0; }
  body.cnc .rtcl-MyAccount-content .rtcl-my-listing-table tbody td.title-cell { grid-column: 2; }
  body.cnc .rtcl-MyAccount-content .rtcl-my-listing-table tbody td.list-on-responsive {
    grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--s-5);
  }
  body.cnc .rtcl-MyAccount-content .rtcl-my-listing-table tbody td.list-on-responsive::before {
    content: attr(data-column); font-size: var(--t-xsmall); font-weight: 700; color: var(--c-text-muted-2);
  }
}

/* ── 8.10 „Ofertele mele" — carduri (`cc-offers-*`) ─────────────────────
 * Blocul `<style>` din mu-plugin se tipărește în corpul endpoint-ului, deci
 * DUPĂ noi: fiecare regulă de aici își depășește ținta ca specificitate.
 * 🔴 `.cc-offer-delete-button` e ținta `wp_ajax_cc_delete_offer` — se îmbracă,
 *    nu se redenumește (lista neagră, P1 §2.3).
 * ------------------------------------------------------------------------- */
body.cnc .cc-offers-wrap { display: flex; flex-direction: column; gap: var(--s-5); }
body.cnc .cc-offers-wrap .cc-offers-item {
  position: relative; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); box-shadow: none; overflow: hidden;
  padding: var(--s-6) var(--s-7) var(--s-6) calc(var(--s-7) + 4px);
  /* `display:flex` e repetat deliberat: mu-pluginul îl dă, dar nu vrem ca
     skin-ul să depindă de un bloc `<style>` pe care îl putem scoate la sursă. */
  display: flex; gap: var(--s-6); align-items: center; flex-wrap: wrap;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
/* rail-ul de track — semnalul 3 din 4. Ofertele sunt pista auriu. */
body.cnc .cc-offers-wrap .cc-offers-item.cc-offer-row {
  --track-accent:        var(--c-gold-700);
  --track-accent-strong: var(--c-gold);
  --track-tint:          var(--c-gold-50);
  --track-border:        var(--c-gold-100);
}
body.cnc .cc-offers-wrap .cc-offers-item.cc-offer-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--track-accent-strong);
}
body.cnc .cc-offers-wrap .cc-offers-item:hover { border-color: var(--track-border); box-shadow: var(--shadow-soft); }
body.cnc .cc-offers-wrap .cc-offers-icon {
  width: 40px; height: 40px; flex: 0 0 40px; padding: 9px; border-radius: var(--r-sm);
  background: var(--track-tint); color: var(--track-accent); box-sizing: border-box;
}
body.cnc .cc-offers-wrap .cc-offers-title {
  font-size: var(--t-body); font-weight: 700; line-height: 1.35; margin: 0 0 var(--s-3); color: var(--c-ink);
}
body.cnc .cc-offers-wrap .cc-offers-listing { color: inherit; text-decoration: none; }
body.cnc .cc-offers-wrap .cc-offers-listing:hover { color: var(--track-accent); text-decoration: none; }
body.cnc .cc-offers-wrap .cc-offers-sub {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5);
  font-size: var(--t-xsmall); color: var(--c-text-muted-2); margin: 0;
}
/* statusurile → tiparul `.cnc-badge--*`. Clasele existente rămân. */
body.cnc .cc-offers-wrap .cc-offers-status {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-xsmall); font-weight: 800; line-height: 1;
  padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid transparent; white-space: nowrap;
}
body.cnc .cc-offers-wrap .cc-offers-status--pending {
  background: var(--c-warning-50); border-color: var(--c-gold-100); color: var(--c-warning);
}
body.cnc .cc-offers-wrap .cc-offers-status--accepted {
  background: var(--c-success-50); border-color: var(--c-emerald-100); color: var(--c-success);
}
body.cnc .cc-offers-wrap .cc-offers-status--rejected {
  background: var(--c-danger-50); border-color: var(--c-danger-100); color: var(--c-danger);
}
body.cnc .cc-offers-wrap .cc-offers-actions { gap: var(--s-4); margin-left: auto; }

/* ── 8.11 Butoanele din cont — un singur tipar pentru cele 4 tab-uri ─────
 * Azi: `#111827` la oferte și vânzări, patru roșuri diferite pentru „Șterge"
 * (F §2). Aici toate devin `.cnc-btn--secondary` / `--danger`, la 36px.
 * 🔴 `.cc-order-delete-btn` și `.cc-offer-delete-button` sunt ținte AJAX —
 *    se îmbracă, nu se redenumesc.
 * ------------------------------------------------------------------------- */
body.cnc .rtcl-MyAccount-content .cc-offers-actions a.button,
body.cnc .rtcl-MyAccount-content .cc-vanzari-table a.button,
body.cnc .rtcl-MyAccount-content .my_account_orders a.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-4);
  min-height: 36px; padding: 0 var(--s-6); margin: 0;
  font-family: inherit; font-size: var(--t-small); font-weight: 700; line-height: 1;
  border-radius: var(--r-pill); text-decoration: none; white-space: nowrap;
  background: var(--c-surface); color: var(--c-emerald-700);
  border: 1px solid var(--c-border-strong);
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
body.cnc .rtcl-MyAccount-content .cc-offers-actions a.button:hover,
body.cnc .rtcl-MyAccount-content .cc-vanzari-table a.button:hover,
body.cnc .rtcl-MyAccount-content .my_account_orders a.button:hover {
  border-color: var(--c-emerald); background: var(--c-emerald-50); color: var(--c-emerald-700); opacity: 1;
}
/* `!important` deliberat: cele două mu-plugins pun `background/border/color`
   cu `!important` pe butoanele de ștergere (offers:309, comenzi:352 și :545).
   Fără el, cele patru roșuri divergente rămân. Vezi 06-implementare §6.6. */
body.cnc .rtcl-MyAccount-content .cc-offers-actions a.cc-offer-delete-button,
body.cnc .rtcl-MyAccount-content .my_account_orders a.cc-order-delete-btn,
body.cnc .rtcl-MyAccount-content .cc-vanzari-table a.button-danger {
  background: var(--c-danger-50) !important;
  border-color: var(--c-danger-100) !important;
  color: var(--c-danger) !important;
  margin-left: 0;
}
body.cnc .rtcl-MyAccount-content .cc-offers-actions a.cc-offer-delete-button:hover,
body.cnc .rtcl-MyAccount-content .my_account_orders a.cc-order-delete-btn:hover,
body.cnc .rtcl-MyAccount-content .cc-vanzari-table a.button-danger:hover {
  background: var(--c-danger) !important;
  border-color: var(--c-danger) !important;
  color: var(--c-on-accent) !important;
}

/* ── 8.12 Cele două tabele → rânduri pe desktop, carduri pe mobil ────────
 * 🔴 `data-label` NU există pe `<td>`-uri (P6 §5.3). Varianta A: rolul se
 *    dă pe poziție, fiindcă AICI ordinea coloanelor e fixată în același
 *    fișier care randează tabelul, nu într-un filtru. Varianta B (`data-label`
 *    în mu-plugins, 10 atribute) rămâne întrebarea 33.
 * ------------------------------------------------------------------------- */
body.cnc .rtcl-MyAccount-content .my_account_orders,
body.cnc .rtcl-MyAccount-content .cc-vanzari-table {
  width: 100%; border-collapse: separate; border-spacing: 0 var(--s-5); margin-top: var(--s-6);
}
body.cnc .rtcl-MyAccount-content .my_account_orders thead th,
body.cnc .rtcl-MyAccount-content .cc-vanzari-table thead th {
  background: none; border: none; padding: 0 var(--s-6) var(--s-3); text-align: left;
  font-size: var(--t-xsmall); font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-text-muted-2);
}
body.cnc .rtcl-MyAccount-content .my_account_orders tbody tr,
body.cnc .rtcl-MyAccount-content .cc-vanzari-table tbody tr {
  background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-border);
  transition: box-shadow var(--dur-fast) var(--ease-standard);
}
body.cnc .rtcl-MyAccount-content .my_account_orders tbody tr:hover,
body.cnc .rtcl-MyAccount-content .cc-vanzari-table tbody tr:hover {
  background: var(--c-surface); box-shadow: 0 0 0 1px var(--track-border), var(--shadow-soft);
}
body.cnc .rtcl-MyAccount-content .my_account_orders tbody td,
body.cnc .rtcl-MyAccount-content .cc-vanzari-table tbody td {
  border: none; border-bottom: none; padding: var(--s-6); vertical-align: middle;
  font-size: var(--t-small); color: var(--c-text-muted);
}
body.cnc .rtcl-MyAccount-content .my_account_orders tbody td:first-child,
body.cnc .rtcl-MyAccount-content .cc-vanzari-table tbody td:first-child {
  border-radius: var(--r-md) 0 0 var(--r-md);
  font-size: var(--t-body); font-weight: 700; color: var(--c-ink);
}
body.cnc .rtcl-MyAccount-content .my_account_orders tbody td:last-child,
body.cnc .rtcl-MyAccount-content .cc-vanzari-table tbody td:last-child {
  border-radius: 0 var(--r-md) var(--r-md) 0; white-space: nowrap;
}
body.cnc .rtcl-MyAccount-content .cc-vanzari-table tbody td:first-child a {
  color: inherit; text-decoration: none;
}
body.cnc .rtcl-MyAccount-content .cc-vanzari-table tbody td:first-child a:hover { color: var(--track-accent); }
/* „Anunturi Vanzari" e categoria `vanzari-piese-auto` → pista ofertă */
body.cnc .rtcl-MyAccount-content .cc-vanzari-table {
  --track-accent:        var(--c-gold-700);
  --track-accent-strong: var(--c-gold);
  --track-tint:          var(--c-gold-50);
  --track-border:        var(--c-gold-100);
}

@media (max-width: 767px) {
  body.cnc .rtcl-MyAccount-content .my_account_orders thead,
  body.cnc .rtcl-MyAccount-content .cc-vanzari-table thead {
    /* `clip-path`, NU `display:none` — altfel dispare și pentru cititoarele de ecran */
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  body.cnc .rtcl-MyAccount-content .my_account_orders tbody tr,
  body.cnc .rtcl-MyAccount-content .cc-vanzari-table tbody tr {
    display: grid; gap: var(--s-4); padding: var(--s-6); border-radius: var(--r-md);
  }
  body.cnc .rtcl-MyAccount-content .my_account_orders tbody td,
  body.cnc .rtcl-MyAccount-content .cc-vanzari-table tbody td {
    padding: 0; border-radius: 0 !important;   /* motiv: colțurile de rând, nu de celulă, pe mobil */
    white-space: normal;
  }
  body.cnc .rtcl-MyAccount-content .my_account_orders tbody td:last-child,
  body.cnc .rtcl-MyAccount-content .cc-vanzari-table tbody td:last-child {
    display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-3);
    padding-top: var(--s-5); border-top: 1px solid var(--c-border);
  }
}

/* detaliul comenzii — cele două `shop_table` devin perechi cheie/valoare */
body.cnc .rtcl-MyAccount-content .shop_table:not(.my_account_orders) {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden;
}
body.cnc .rtcl-MyAccount-content .shop_table:not(.my_account_orders) th {
  width: 40%; text-align: left; vertical-align: top;
  background: var(--c-bg-alt); border-bottom: 1px solid var(--c-border);
  padding: var(--s-5) var(--s-6);
  font-size: var(--t-xsmall); font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-text-muted-2);
}
body.cnc .rtcl-MyAccount-content .shop_table:not(.my_account_orders) td {
  border-bottom: 1px solid var(--c-border); padding: var(--s-5) var(--s-6);
  font-size: var(--t-body); font-weight: 600; color: var(--c-ink); overflow-wrap: anywhere;
}
body.cnc .rtcl-MyAccount-content .shop_table:not(.my_account_orders) tr:last-child th,
body.cnc .rtcl-MyAccount-content .shop_table:not(.my_account_orders) tr:last-child td { border-bottom: none; }

/* ── 8.13 Notice-uri — 5 clase, 3 palete → un singur tipar ──────────────── */
body.cnc .rtcl-MyAccount-content .cc-offers-notice,
body.cnc .rtcl-MyAccount-content .cc-orders-notice,
body.cnc .rtcl-MyAccount-content .cc-av-notice,
body.cnc .rtcl-MyAccount-content .cc-offers-ajax-notice,
body.cnc .rtcl-MyAccount-content .cc-orders-ajax-notice {
  display: flex; gap: var(--s-5); align-items: flex-start;
  margin: 0 0 var(--s-6); padding: var(--s-6) var(--s-7);
  border-radius: var(--r-md); border: 1px solid var(--c-emerald-100);
  background: var(--c-success-50); color: var(--c-success);
  font-size: var(--t-small); line-height: 1.5;
}
body.cnc .rtcl-MyAccount-content .cc-av-notice-success {
  background: var(--c-success-50); border-color: var(--c-emerald-100); color: var(--c-success);
}
body.cnc .rtcl-MyAccount-content .cc-av-notice-error {
  background: var(--c-danger-50); border-color: var(--c-danger-100); color: var(--c-danger);
}
body.cnc .rtcl-MyAccount-content .rtcl-response .alert,
body.cnc .rtcl-MyAccount-content .rtcl-error {
  border-radius: var(--r-md); border: 1px solid var(--c-danger-100);
  background: var(--c-danger-50); color: var(--c-danger);
  padding: var(--s-6) var(--s-7); font-size: var(--t-small);
}

/* ── 8.14 Stările goale ────────────────────────────────────────────────
 * Cele trei tab-uri custom randează un `<p>` fără clasă (comenzi, vânzări)
 * sau un `.cc-offers-item` fără `.cc-offer-row` (oferte). Ambele se pot
 * prinde din CSS, fără markup nou. 🟡 CTA-ul rămâne întrebarea 34: un `<a>`
 * nou nu se poate produce din CSS.
 * ------------------------------------------------------------------------- */
body.cnc .rtcl-MyAccount-content > p:not([class]):only-of-type,
body.cnc .rtcl-MyAccount-content .rtcl-no-data-found,
body.cnc .rtcl-MyAccount-content .cc-offers-wrap > .cc-offers-item:only-child:not(.cc-offer-row) {
  display: block; text-align: center; padding: var(--s-11) var(--s-8);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
  font-size: var(--t-small); color: var(--c-text-muted); margin: 0;
}
body.cnc .rtcl-MyAccount-content > p:not([class]):only-of-type::before,
body.cnc .rtcl-MyAccount-content .rtcl-no-data-found::before,
body.cnc .rtcl-MyAccount-content .cc-offers-wrap > .cc-offers-item:only-child:not(.cc-offer-row)::before {
  content: ''; display: block; width: 48px; height: 48px; margin: 0 auto var(--s-6);
  background-color: var(--c-text-faint);
  -webkit-mask-image: var(--cnc-ico-empty); mask-image: var(--cnc-ico-empty);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* varianta „oferte": pictograma proprie a cardului iese, textul se centrează */
body.cnc .rtcl-MyAccount-content .cc-offers-wrap > .cc-offers-item:only-child:not(.cc-offer-row) .cc-offers-icon { display: none; }
body.cnc .rtcl-MyAccount-content .cc-offers-wrap > .cc-offers-item:only-child:not(.cc-offer-row) .cc-offers-title {
  font-size: var(--t-h4); font-weight: 800; color: var(--c-ink); margin: 0 0 var(--s-4);
}
body.cnc .rtcl-MyAccount-content .cc-offers-wrap > .cc-offers-item:only-child:not(.cc-offer-row) .cc-offers-sub {
  justify-content: center; font-size: var(--t-small); color: var(--c-text-muted);
  max-width: 42ch; margin: 0 auto;
}

/* ── 8.15 Paginare + formularul de căutare din „Cererile mele" ──────────── */
body.cnc .rtcl-MyAccount-content .rtcl-pagination ul {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  list-style: none; margin: var(--s-8) 0 0; padding: 0;
}
body.cnc .rtcl-MyAccount-content .rtcl-pagination ul li a,
body.cnc .rtcl-MyAccount-content .rtcl-pagination ul li span {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-small); font-weight: 700; border-radius: var(--r-sm);
  border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-ink);
  font-variant-numeric: tabular-nums; text-decoration: none;
}
body.cnc .rtcl-MyAccount-content .rtcl-pagination ul li a:hover {
  border-color: var(--c-emerald); background: var(--c-emerald-50); color: var(--c-emerald);
}
body.cnc .rtcl-MyAccount-content .rtcl-pagination ul li span.current {
  background: var(--c-emerald); border-color: var(--c-emerald); color: var(--c-on-accent);
}

/* ── 8.16 Formularele de cont (Datele contului, login din /my-account/) ─── */
body.cnc .rtcl-MyAccount-content input[type="text"],
body.cnc .rtcl-MyAccount-content input[type="email"],
body.cnc .rtcl-MyAccount-content input[type="tel"],
body.cnc .rtcl-MyAccount-content input[type="url"],
body.cnc .rtcl-MyAccount-content input[type="number"],
body.cnc .rtcl-MyAccount-content input[type="password"],
body.cnc .rtcl-MyAccount-content select,
body.cnc .rtcl-MyAccount-content textarea {
  width: 100%; font-family: inherit; font-weight: 500; color: var(--c-ink); font-size: 16px;
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm); padding: 12px var(--s-6); min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
@media (min-width: 768px) {
  body.cnc .rtcl-MyAccount-content input[type="text"],
  body.cnc .rtcl-MyAccount-content input[type="email"],
  body.cnc .rtcl-MyAccount-content input[type="tel"],
  body.cnc .rtcl-MyAccount-content input[type="url"],
  body.cnc .rtcl-MyAccount-content input[type="number"],
  body.cnc .rtcl-MyAccount-content input[type="password"],
  body.cnc .rtcl-MyAccount-content select,
  body.cnc .rtcl-MyAccount-content textarea { font-size: var(--t-body); }
}
body.cnc .rtcl-MyAccount-content input:focus,
body.cnc .rtcl-MyAccount-content select:focus,
body.cnc .rtcl-MyAccount-content textarea:focus {
  outline: none; border-color: var(--focus-color); box-shadow: var(--focus-ring);
}
body.cnc .rtcl-MyAccount-content label { font-size: var(--t-small); font-weight: 600; color: var(--c-ink); }
body.cnc .rtcl-MyAccount-content button[type="submit"],
body.cnc .rtcl-MyAccount-content input[type="submit"],
body.cnc .rtcl-MyAccount-content .rtcl-EditAccountForm .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-4);
  min-height: 44px; width: auto; padding: 0 var(--s-7);
  font-family: inherit; font-size: var(--t-body); font-weight: 700; line-height: 1;
  border: 1px solid transparent; border-radius: var(--r-pill); cursor: pointer;
  background: var(--c-emerald); color: var(--c-on-accent); box-shadow: var(--shadow-emerald);
  transition: background var(--dur-fast) var(--ease-standard);
}
body.cnc .rtcl-MyAccount-content button[type="submit"]:hover,
body.cnc .rtcl-MyAccount-content input[type="submit"]:hover,
body.cnc .rtcl-MyAccount-content .rtcl-EditAccountForm .btn:hover {
  background: var(--c-emerald-700); color: var(--c-on-accent);
}


/* ── 8.17 COMPLETĂRILE DE DUPĂ PASUL 1 — punctele 29 · 33 · 34 · 35 ─────
 * Adăugate pe 20.08, după închiderea celor 8 pagini. Sursa: registrul de
 * decizii, grupele B și C, toate confirmate de client pe 17.08.
 *
 * ┌─ CE ÎMBRACĂ ────────────────────────────────────────────────────────────┐
 * │ · cardul de credite injectat de `rtcl-offers.php:1631` prin JavaScript   │
 * │ · cele două tabele de cont, rupte în carduri pe telefon (`data-label`)   │
 * │ · stările goale, acum cu ieșire (`.cnc-empty`, componentă din §4)        │
 * │ · banda de confirmare după publicare (`inc/cnc-account.php`)             │
 * └─────────────────────────────────────────────────────────────────────────┘
 * ------------------------------------------------------------------------- */

/* ── 8.17.1 Cardul de credite (punctul 29) ─────────────────────────────
 * 🔴 Cardul NU e al nostru și nici al mu-pluginului: îl construiește
 *    `rtcl-offers.php:1631` în JavaScript, în `wp_print_footer_scripts`, și îl
 *    inserează în `.rtcl-user-info`. Numărul e corect (myCred), dar hainele
 *    sunt ale pluginului: alb pur, colț de 12px, pătrat indigo `#3730a3` pe
 *    post de pictogramă — trei lucruri care nu există în paleta noastră.
 *
 * ⚠️ Stilurile lui se tipăresc în FOOTER, deci DUPĂ foaia noastră: la
 *    specificitate egală câștigă el. De aceea fiecare regulă de mai jos are
 *    `body.cnc` în față — (0,2,0) sau mai mult contra (0,1,0)/(0,2,0) al lui.
 * ------------------------------------------------------------------------- */
body.cnc .rtcl-user-credits .rtcl-listing-count {
  background: var(--c-surface); border: 1px solid var(--c-emerald-100);
  border-radius: var(--r-md); box-shadow: var(--shadow-hairline);
}
body.cnc .rtcl-user-credits .rtcl-listing-count-inner { gap: var(--s-6); padding: var(--s-7); }
body.cnc .rtcl-user-credits .rtcl-listing-number h5 {
  font-size: var(--t-xsmall); font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--c-text-muted-2); margin: 0 0 var(--s-3);
}
body.cnc .rtcl-user-credits .rtcl-listing-number span {
  font-size: var(--t-h2); font-weight: 800; color: var(--c-emerald);
  font-variant-numeric: tabular-nums; line-height: 1;
}
/* Pătratul indigo devine pictograma de credite, pe tokenii paletei. Aceeași
   mască folosită și de blocul owner de pe pagina de anunț — un singur limbaj. */
body.cnc .rtcl-user-credits .rtcl-listing-icon i {
  width: 26px; height: 26px; border-radius: 0; background: var(--c-emerald);
  mask-image: var(--cnc-ico-receipt); -webkit-mask-image: var(--cnc-ico-receipt);
  mask-repeat: no-repeat; mask-size: contain; mask-position: center;
  -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; -webkit-mask-position: center;
}

/* ── 8.17.2 Tabelele de cont pe telefon (punctul 33) ───────────────────
 * Sub 768px, fiecare rând devine un card, iar fiecare celulă își tipărește
 * numele coloanei din `data-label`.
 *
 * 🔴 `content: attr(data-label)` citește DOAR atributele elementului căruia îi
 *    aparține pseudo-elementul (`06` §6.10) — de aceea atributul e pe `<td>`,
 *    nu pe `<tr>`. Dacă vezi etichete goale, asta e cauza.
 * ⚠️ Regula se aplică NUMAI celulelor care au atributul: `td:not([data-label])`
 *    rămâne neatins, deci un tabel al pluginului pe care nu l-am marcat nu se
 *    rupe în carduri pe jumătate.
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body.cnc .rtcl-MyAccount-content table:has(td[data-label]),
  body.cnc .cc-vanzari-table:has(td[data-label]) { border: 0; display: block; }

  body.cnc .rtcl-MyAccount-content table:has(td[data-label]) thead,
  body.cnc .cc-vanzari-table:has(td[data-label]) thead {
    /* ascuns vizual, PĂSTRAT pentru cititoarele de ecran: capul de tabel
       rămâne asocierea semantică dintre celulă și coloană */
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }

  body.cnc .rtcl-MyAccount-content table:has(td[data-label]) tbody,
  body.cnc .cc-vanzari-table:has(td[data-label]) tbody { display: block; }

  body.cnc .rtcl-MyAccount-content table:has(td[data-label]) tbody tr,
  body.cnc .cc-vanzari-table:has(td[data-label]) tbody tr {
    display: block; margin-bottom: var(--s-6);
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-md); padding: var(--s-6) var(--s-7);
  }

  /* ⚠️ Celulele se scopează sub ACELEAȘI două tabele ca regulile de mai sus.
     Un `body.cnc td[data-label]` liber ar fi prins orice celulă marcată de un
     plugin viitor — i-ar fi dat `display:flex` fără ca rândul părinte să devină
     bloc, adică exact jumătate de transformare. Azi nu există alt tabel cu
     `data-label` (verificat), dar asigurarea e gratuită. */
  body.cnc .rtcl-MyAccount-content td[data-label],
  body.cnc .cc-vanzari-table td[data-label] {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s-6); border: 0; padding: var(--s-4) 0;
    text-align: right; font-size: var(--t-small);
  }
  body.cnc .rtcl-MyAccount-content td[data-label] + td[data-label],
  body.cnc .cc-vanzari-table td[data-label] + td[data-label] { border-top: 1px solid var(--c-border); }
  body.cnc .rtcl-MyAccount-content td[data-label]::before,
  body.cnc .cc-vanzari-table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto; text-align: left;
    font-size: var(--t-xsmall); font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--c-text-muted-2);
  }
  /* Ultima celulă e „Acțiuni": butoanele trec pe rând propriu, full-width,
     ca să respecte ținta de atingere de 44px. */
  body.cnc .rtcl-MyAccount-content td[data-label]:last-child,
  body.cnc .cc-vanzari-table td[data-label]:last-child { flex-wrap: wrap; justify-content: flex-start; }
  body.cnc .rtcl-MyAccount-content td[data-label]:last-child .button,
  body.cnc .cc-vanzari-table td[data-label]:last-child .button { flex: 1; text-align: center; margin-left: 0; }
}

/* ── 8.17.3 Stările goale, cu ieșire (punctul 34) ──────────────────────
 * `.cnc-empty` e componenta din §4 — aici doar aerul din jur, fiindcă cele trei
 * tab-uri o randează în containere diferite.
 * ------------------------------------------------------------------------- */
body.cnc .cc-orders-empty,
body.cnc .cc-offers-empty,
body.cnc .cc-vanzari-empty { margin: var(--s-8) 0; }

/* ── 8.17.4 Banda de confirmare după publicare (punctul 35) ────────────── */
body.cnc .cnc-acc__banner { margin: 0 0 var(--s-8); }


/* ═══════════════════════════════════════════════════════════════════════════
 * §9 COMPONENTE P4 · P7 (Mod A) — clase `cnc-` NOI
 *
 * Sursa: P4-pagina-anunt.html (`.cnc-flow`, `.cnc-form`) +
 *        P7-pagini-sistem.html (restul) + P7-pagini-sistem-spec.md §3.
 *
 * Inerte. Se pun în markup din:
 *   · câmpul „Advanced → CSS Classes" al widget-urilor Elementor („Cum funcționează")
 *   · un bloc Gutenberg deasupra shortcode-ului, pe pagina 3911 (`.cnc-flow`)
 *   · override-ul `404.php` din tema copil (`.cnc-404`)
 * 🔴 NICIODATĂ pe `.elementor-element-<hash>` — hash-urile se schimbă la re-editare.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── 9.1 Bara de proces în 3 pași (P4 §7.1) ─────────────────────────────── */
.cnc-flow { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cnc-flowstep {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: var(--s-7); display: flex; flex-direction: column; gap: var(--s-5);
}
.cnc-flowstep__n {
  width: 28px; height: 28px; border-radius: 50%; background: var(--c-emerald); color: var(--c-on-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-xsmall); font-weight: 800; flex: 0 0 auto;
}
.cnc-flowstep__t { font-size: var(--t-small); font-weight: 800; }
.cnc-flowstep__d { font-size: var(--t-xsmall); color: var(--c-text-muted); line-height: 1.55; }
.cnc-flowstep--done { background: var(--c-success-50); border-color: var(--c-emerald-100); }
.cnc-flowstep--now  { border-color: var(--c-emerald); box-shadow: 0 0 0 3px rgba(15,107,74,.10); }
.cnc-flowstep--next .cnc-flowstep__n { background: var(--c-border-strong); }

.cnc-form { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cnc-form__full { grid-column: 1 / -1; }

/* ── 9.2 Secțiune de pagină de conținut ─────────────────────────────────── */
.cnc-sec { padding: var(--s-13) 0; }
.cnc-sec__h { text-align: center; max-width: 60ch; margin: 0 auto var(--s-10); }
.cnc-sec__t { font-size: var(--t-h2); margin: 0 0 var(--s-5); }
.cnc-sec__s { font-size: var(--t-lead); color: var(--c-text-muted); line-height: 1.6; margin: 0; }

/* ── 9.3 Hero de pagină de conținut („Cum funcționează") ────────────────
 * 🔴 REDENUMIT `.cnc-hero` → `.cnc-pagehero` LA IMPLEMENTARE (17.08).
 *    Motivul: P2 și P7 definesc AMÂNDOUĂ o clasă `.cnc-hero`, dar sunt două
 *    componente diferite — P2 e o bandă DESCHISĂ pe `--c-bg`, fără colțuri
 *    rotunjite, cu titlu la stânga; P7 e un card ÎNCHIS pe `--c-ink`, cu două
 *    glow-uri radiale, centrat. Puse în același fișier, ultima definiție ar fi
 *    câștigat peste tot: hero-ul închis din „Cum funcționează" ar fi devenit
 *    tăcut o bandă deschisă, sau invers.
 *    Cine cedează numele: **P2**, fiindcă e planșa APROBATĂ DE CLIENT (31.07) —
 *    markup-ul ei ajunge primul în producție. P7 nu e încă în niciun markup,
 *    deci redenumirea costă zero. Copiii ei (`__k`, `__t`, `__s`, `__cta`)
 *    rămân neschimbați.
 * ------------------------------------------------------------------------- */
.cnc-pagehero {
  position: relative; background: var(--c-ink); color: var(--c-on-dark); border-radius: var(--r-xl);
  padding: var(--s-12) var(--s-9); text-align: center; overflow: hidden; isolation: isolate;
}
.cnc-pagehero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 120% at 20% -10%, rgba(15,107,74,.55), transparent 60%),
              radial-gradient(70% 100% at 88% 8%, rgba(226,169,59,.28), transparent 62%);
}
.cnc-pagehero__k {
  display: inline-flex; align-items: center; gap: var(--s-4);
  font-size: var(--t-xsmall); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-on-dark-muted); border: 1px solid var(--c-green-slate);
  border-radius: var(--r-pill); padding: 6px 14px; margin-bottom: var(--s-7);
}
.cnc-pagehero__t { font-size: var(--t-display); line-height: 1.05; margin: 0 0 var(--s-7); }
.cnc-pagehero__t em { font-style: normal; color: var(--c-gold); }
.cnc-pagehero__s {
  font-size: var(--t-lead); color: var(--c-on-dark-muted);
  max-width: 56ch; margin: 0 auto var(--s-9); line-height: 1.6;
}
.cnc-pagehero__cta { display: flex; gap: var(--s-5); justify-content: center; flex-wrap: wrap; }

/* ── 9.4 Comparația „marketplace inversat" ──────────────────────────────── */
.cnc-flip { display: grid; gap: var(--s-6); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 768px) { .cnc-flip { grid-template-columns: 1fr auto 1fr; } }
.cnc-flipcard {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: var(--s-9); display: flex; flex-direction: column; gap: var(--s-5);
}
.cnc-flipcard--off { background: var(--c-bg-alt); border-style: dashed; color: var(--c-text-muted); }
.cnc-flipcard--on  { border-color: var(--c-emerald-100); background: var(--c-emerald-50); }
.cnc-flipcard__k {
  font-size: var(--t-xsmall); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-text-faint);
}
.cnc-flipcard--on .cnc-flipcard__k { color: var(--c-emerald); }
.cnc-flipcard__t { font-size: var(--t-h4); margin: 0; }
.cnc-flipvs {
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-xsmall); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-text-faint);
}

/* ── 9.5 Pașii, pe track („Cum funcționează") ───────────────────────────
 * 🔴 A DOUA COLIZIUNE rezolvată la implementare: `.cnc-step` e definit ȘI în
 *    P2 (cei 3 pași de pe homepage: numărul într-un pătrat emerald, fără rail,
 *    fără contor CSS) ȘI în P7 (cei 4 pași pe track: rail, contor decorativ,
 *    pictogramă în casetă tintată). Aici NU redenumim — le SCOPĂM sub grila
 *    părinte, `.cnc-steps2` pentru P7 și `.cnc-steps3` pentru P2 (§12.5).
 *    Ambele planșe își păstrează markup-ul exact cum a fost desenat.
 * ------------------------------------------------------------------------- */
.cnc-steps2 { counter-reset: st; display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 768px)  { .cnc-steps2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cnc-steps2 { grid-template-columns: repeat(4, 1fr); } }
.cnc-steps2 .cnc-step {
  position: relative; counter-increment: st; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: var(--s-9) var(--s-7) var(--s-7);
  display: flex; flex-direction: column; gap: var(--s-5); overflow: hidden;
}
.cnc-steps2 .cnc-step__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--track-accent-strong); }
.cnc-steps2 .cnc-step::after {
  content: counter(st); position: absolute; top: var(--s-6); right: var(--s-7);
  font-size: 44px; font-weight: 800; line-height: 1; color: var(--track-tint); z-index: 0;
}
.cnc-steps2 .cnc-step__ico {
  width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--track-tint);
  color: var(--track-accent); display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1; margin: 0;
}
.cnc-steps2 .cnc-step__t { font-size: var(--t-h4); position: relative; z-index: 1; margin: 0; }
.cnc-steps2 .cnc-step__d { font-size: var(--t-small); color: var(--c-text-muted); line-height: 1.6; position: relative; z-index: 1; }

/* ── 9.6 Explicația creditelor ──────────────────────────────────────────── */
.cnc-credexp {
  background: var(--c-ink); color: var(--c-on-dark); border-radius: var(--r-xl);
  padding: var(--s-11) var(--s-9); position: relative; overflow: hidden; isolation: isolate;
}
.cnc-credexp::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(100% 130% at 88% -10%, rgba(226,169,59,.30), transparent 60%);
}
.cnc-credexp__grid { display: grid; gap: var(--s-8); grid-template-columns: 1fr; }
@media (min-width: 900px) { .cnc-credexp__grid { grid-template-columns: repeat(3, 1fr); } }
.cnc-credexp__i { display: flex; flex-direction: column; gap: var(--s-4); }
.cnc-credexp__n {
  font-size: var(--t-h1); font-weight: 800; line-height: 1;
  color: var(--c-gold); font-variant-numeric: tabular-nums;
}
.cnc-credexp__t { font-size: var(--t-h4); margin: 0; }
.cnc-credexp__d { font-size: var(--t-small); color: var(--c-on-dark-muted); line-height: 1.6; }

/* ── 9.7 FAQ — `<details>` nativ, fără JS ───────────────────────────────── */
.cnc-faq { display: flex; flex-direction: column; gap: var(--s-4); }
.cnc-faq__i { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.cnc-faq__i[open] { border-color: var(--c-emerald-100); }
.cnc-faq__q {
  display: flex; align-items: center; gap: var(--s-5); cursor: pointer; list-style: none;
  padding: var(--s-7); font-size: var(--t-body); font-weight: 700; min-height: 56px;
}
.cnc-faq__q::-webkit-details-marker { display: none; }
.cnc-faq__q::after {
  content: ''; margin-left: auto; width: 11px; height: 11px; flex: 0 0 auto;
  border-right: 2px solid var(--c-text-muted); border-bottom: 2px solid var(--c-text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-base) var(--ease-standard);
}
.cnc-faq__i[open] .cnc-faq__q::after { transform: rotate(-135deg) translate(-3px, -3px); }
.cnc-faq__i[open] .cnc-faq__q { color: var(--c-emerald); }
.cnc-faq__a { padding: 0 var(--s-7) var(--s-7); font-size: var(--t-small); color: var(--c-text-muted); line-height: 1.65; }
.cnc-faq__a p + p { margin-top: var(--s-5); }

/* ── 9.8 404 ────────────────────────────────────────────────────────────── */
.cnc-404 { text-align: center; padding: var(--s-13) var(--s-8); }
.cnc-404__art { margin: 0 auto var(--s-9); display: block; }
.cnc-404__t { font-size: var(--t-h1); margin: 0 0 var(--s-5); }
.cnc-404__s { font-size: var(--t-lead); color: var(--c-text-muted); max-width: 46ch; margin: 0 auto var(--s-9); }
.cnc-404__hint {
  font-size: var(--t-small); color: var(--c-text-muted); max-width: 46ch;
  margin: var(--s-9) auto var(--s-6);
}
.cnc-404__links { display: flex; gap: var(--s-5); justify-content: center; flex-wrap: wrap; }

/* ── 9.9 Login / cont nou ───────────────────────────────────────────────── */
.cnc-auth {
  max-width: 460px; margin: 0 auto; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--s-10) var(--s-9); box-shadow: var(--shadow-soft);
}
.cnc-auth__tabs {
  display: flex; gap: var(--s-2); background: var(--c-bg-alt); border-radius: var(--r-pill);
  padding: 3px; margin-bottom: var(--s-9);
}
.cnc-auth__tab {
  flex: 1; border: none; background: none; cursor: pointer; min-height: 38px; border-radius: var(--r-pill);
  font-family: inherit; font-size: var(--t-small); font-weight: 700; color: var(--c-text-muted);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.cnc-auth__tab[aria-selected="true"] { background: var(--c-surface); color: var(--c-emerald); box-shadow: var(--shadow-hairline); }
.cnc-auth__t { font-size: var(--t-h3); margin: 0 0 var(--s-3); }
.cnc-auth__s { font-size: var(--t-small); color: var(--c-text-muted); margin: 0 0 var(--s-9); }
.cnc-auth__form { display: flex; flex-direction: column; gap: var(--s-7); }
.cnc-auth__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.cnc-auth__foot {
  margin-top: var(--s-8); padding-top: var(--s-7); border-top: 1px solid var(--c-border);
  font-size: var(--t-xsmall); color: var(--c-text-muted-2); line-height: 1.6;
}
.cnc-check {
  display: inline-flex; align-items: center; gap: var(--s-4);
  font-size: var(--t-small); color: var(--c-text-muted); cursor: pointer;
}
.cnc-passwrap { position: relative; }
.cnc-passwrap .cnc-input { padding-right: var(--s-11); }
.cnc-toggle {
  position: absolute; right: var(--s-4); top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: none; background: none; cursor: pointer;
  color: var(--c-text-muted-2); display: flex; align-items: center; justify-content: center;
}
.cnc-toggle:hover { color: var(--c-ink); }


/* ═══════════════════════════════════════════════════════════════════════════
 * §10 SKIN `/trimite-date/` + bannerul permanent — Mod B, ZERO PHP
 *
 * Pasul 2 din 06-implementare §4.3. Sursa: P4 §7.1 și §7.3.
 * Markup real: `mu-plugins/cinecum-offers-flow.php:106-296` (shortcode
 * `[cc_trimite_date_oferta]`, pagina 3911) și `plugins/rtcl-offers/
 * rtcl-offers.php:1998-2005` (bannerul din `wp_footer`).
 *
 * 🔴 TOATE `name=` sunt contractuale (`$_POST['nume']`, `prenume`, `firma`,
 *    `tara`, `judet`, `oras`, `strada`, `telefon`, `email`,
 *    `info_suplimentare`, `offer_id`, `cc_trimite_date_nonce`).
 *    La fel `#rtclo-banner` / `#rtclo-dismiss` — citite de JS-ul inline.
 *    Aici NU se atinge niciunul: doar prezentare.
 *
 * 🔴 DE CE ATÂTEA `!important`: fiecare `<input>`, `<textarea>`, `<button>`
 *    și tot bannerul poartă `style="…"` PE ATRIBUT. Atributul bate orice
 *    selector, deci `!important` e singura cale. E soluția acceptată pentru v1
 *    (întrebarea 27); curățarea la sursă rămâne opțională.
 * ═════════════════════════════════════════════════════════════════════════ */

body.cnc .cc-trimite-date-form {
  display: grid; gap: var(--s-6); grid-template-columns: 1fr;
  max-width: var(--w-narrow); margin: 0 auto;
}
@media (min-width: 600px) {
  body.cnc .cc-trimite-date-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Strada, informațiile suplimentare și butonul ocupă toată lățimea.
     `:has()` e Baseline din dec. 2023; unde nu e suportat, câmpurile rămân
     pe o coloană — degradare grațioasă, nu ruptură. */
  body.cnc .cc-trimite-date-form p:has(#cc_strada),
  body.cnc .cc-trimite-date-form p:has(#cc_info_supl),
  body.cnc .cc-trimite-date-form p:last-child { grid-column: 1 / -1; }
}
body.cnc .cc-trimite-date-form p {
  display: flex; flex-direction: column; gap: var(--s-4); margin: 0;
}
body.cnc .cc-trimite-date-form label { font-size: var(--t-small); font-weight: 600; color: var(--c-ink); }
body.cnc .cc-trimite-date-form label + br { display: none; }   /* `<br>` din markup, nu spațiere */
body.cnc .cc-trimite-date-form input[type="text"],
body.cnc .cc-trimite-date-form input[type="email"],
body.cnc .cc-trimite-date-form textarea {
  /* `!important`: `style="width:100%;max-width:400px"` e pe atribut (:230-273) */
  max-width: none !important;
  width: 100%; font-family: inherit; font-weight: 500; color: var(--c-ink); font-size: 16px;
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm); padding: 12px var(--s-6); min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
@media (min-width: 768px) {
  body.cnc .cc-trimite-date-form input[type="text"],
  body.cnc .cc-trimite-date-form input[type="email"],
  body.cnc .cc-trimite-date-form textarea { font-size: var(--t-body); }
}
body.cnc .cc-trimite-date-form input:hover,
body.cnc .cc-trimite-date-form textarea:hover { border-color: var(--c-text-muted-2); }
body.cnc .cc-trimite-date-form input:focus,
body.cnc .cc-trimite-date-form textarea:focus {
  outline: none; border-color: var(--focus-color); box-shadow: var(--focus-ring);
}
body.cnc .cc-trimite-date-form textarea { min-height: 108px; resize: vertical; line-height: 1.55; }
body.cnc .cc-trimite-date-form button[type="submit"] {
  /* `!important`: `style="padding:10px 20px"` pe atribut (:288) */
  padding: 0 var(--s-9) !important;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-4);
  min-height: 52px; justify-self: start;
  font-family: inherit; font-size: var(--t-lead); font-weight: 700; line-height: 1;
  border: 1px solid transparent; border-radius: var(--r-pill); cursor: pointer;
  background: var(--c-emerald); color: var(--c-on-accent); box-shadow: var(--shadow-emerald);
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard);
}
body.cnc .cc-trimite-date-form button[type="submit"]:hover { background: var(--c-emerald-700); }
body.cnc .cc-trimite-date-form button[type="submit"]:active { transform: scale(.97); }

/* alertele shortcode-ului → tiparul `.cnc-banner` */
body.cnc .cc-alert {
  /* `!important`: `style="margin-bottom:20px;padding:15px;border:1px solid …"` (:214, :221) */
  padding: var(--s-6) var(--s-7) !important;
  border-width: 1px !important; border-style: solid !important;
  display: flex; gap: var(--s-5); align-items: flex-start;
  border-radius: var(--r-md); margin: 0 0 var(--s-8);
  font-size: var(--t-small); line-height: 1.5;
  max-width: var(--w-narrow); margin-inline: auto;
}
body.cnc .cc-alert p { margin: 0; }
body.cnc .cc-alert p + p { margin-top: var(--s-3); }
body.cnc .cc-alert-success {
  background: var(--c-success-50); border-color: var(--c-emerald-100) !important; color: var(--c-success);
}
body.cnc .cc-alert-error {
  background: var(--c-danger-50); border-color: var(--c-danger-100) !important; color: var(--c-danger);
}

/* ── 10.1 🔴 Bannerul permanent (`#rtclo-banner`) ───────────────────────
 * Tipărit în `wp_footer` pe FIECARE pagină, pentru orice utilizator cu o
 * ofertă acceptată și fără `rtcl_buyer_details_submitted` — meta care nu e
 * scrisă niciodată (P4 §7.3). Deci nu dispare, iar „Închide" îl scoate doar
 * de pe pagina curentă. Aici se rezolvă DOAR aspectul; permanența e
 * întrebarea de la P4 §7.3, iar linkul mort se repară creând pagina cu
 * slug-ul `date-oferta` (întrebarea 24) — zero cod, ambele.
 * Fiecare proprietate de mai jos are un `style=` pe atribut în față.
 * ------------------------------------------------------------------------- */
body.cnc #rtclo-banner {
  left: var(--gutter) !important; right: var(--gutter) !important; bottom: var(--s-6) !important;
  background: var(--c-ink) !important; color: var(--c-on-dark) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-pop) !important;
  padding: var(--s-6) var(--s-7) !important;
  gap: var(--s-6) !important;
  flex-wrap: wrap;
  max-width: var(--w-page); margin: 0 auto;
  font-size: var(--t-small);
}
body.cnc #rtclo-banner > div:first-child { font-weight: 700 !important; }
body.cnc #rtclo-banner a.button {
  background: var(--c-emerald) !important; color: var(--c-on-accent) !important;
  padding: 0 var(--s-7) !important; border-radius: var(--r-pill) !important;
  display: inline-flex !important; align-items: center; min-height: 40px;
  font-size: var(--t-small); font-weight: 700 !important; text-decoration: none;
}
body.cnc #rtclo-banner a.button:hover { background: var(--c-emerald-700) !important; }
body.cnc #rtclo-banner #rtclo-dismiss {
  border: 1px solid var(--c-green-slate) !important; color: var(--c-on-dark-muted) !important;
  padding: 0 var(--s-6) !important; border-radius: var(--r-pill) !important;
  min-height: 40px; font-family: inherit; font-size: var(--t-small); font-weight: 700;
}
body.cnc #rtclo-banner #rtclo-dismiss:hover { color: var(--c-on-dark) !important; }
@media (max-width: 599px) {
  body.cnc #rtclo-banner { flex-direction: column; align-items: stretch !important; text-align: center; }
  body.cnc #rtclo-banner > div:last-child { justify-content: center; }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * §11 SKIN LOGIN / CONT NOU + 404 — Mod B
 *
 * Pasul 7 din 06-implementare §4.3. Sursa: P7 §3.1 și §3.2.
 * Markup real: `templates/global/{form-login,email-login-form}.php`,
 * `templates/myaccount/form-registration.php`, `themes/classima/404.php`.
 *
 * 🔴 ANCORE CONTRACTUALE, doar îmbrăcate:
 *    `#rtcl-login-form` · `name="username"` · `name="password"` ·
 *    `name="rememberme"` · `#rtcl-rememberme` · `button[name="rtcl-login"]` ·
 *    `input[name="rtcl-register"]` · `#rtcl-user-registration-wrapper` ·
 *    `.rtcl-toggle-pass` + `.rtcl-icon-eye-off` (JS-ul RTCL comută a doua
 *    clasă în `rtcl-icon-eye` la afișarea parolei — NU se înlocuiește).
 *
 * 🟡 Toate etichetele sunt engleze, din `esc_html__(…, 'classified-listing')`
 *    → se traduc din Loco, zero cod (06-implementare §4.2).
 * ═════════════════════════════════════════════════════════════════════════ */

body.cnc .rtcl-login-form-wrap,
body.cnc .rtcl-registration-form-wrap {
  max-width: 460px; margin: 0 auto;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--s-10) var(--s-9); box-shadow: var(--shadow-soft);
}
body.cnc .rtcl-login-form-wrap .rtcl-tab-content > .rtcl-tab-pane { display: none; }
body.cnc .rtcl-login-form-wrap .rtcl-tab-content > .rtcl-tab-pane.active { display: block; }

body.cnc #rtcl-login-form,
body.cnc #rtcl-register-form { display: flex; flex-direction: column; gap: var(--s-7); }
body.cnc #rtcl-login-form .rtcl-form-group,
body.cnc #rtcl-register-form .rtcl-form-group { display: flex; flex-direction: column; gap: var(--s-4); margin: 0; }
body.cnc #rtcl-login-form .rtcl-field-label,
body.cnc #rtcl-register-form .rtcl-field-label {
  font-size: var(--t-small); font-weight: 600; color: var(--c-ink); margin: 0;
}
body.cnc #rtcl-login-form .rtcl-required,
body.cnc #rtcl-register-form .rtcl-required { color: var(--c-danger); font-weight: 700; }
body.cnc #rtcl-login-form .rtcl-form-control,
body.cnc #rtcl-register-form .rtcl-form-control {
  width: 100%; font-family: inherit; font-weight: 500; color: var(--c-ink); font-size: 16px;
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm); padding: 12px var(--s-6); min-height: 48px; box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
@media (min-width: 768px) {
  body.cnc #rtcl-login-form .rtcl-form-control,
  body.cnc #rtcl-register-form .rtcl-form-control { font-size: var(--t-body); }
}
body.cnc #rtcl-login-form .rtcl-form-control:focus,
body.cnc #rtcl-register-form .rtcl-form-control:focus {
  outline: none; border-color: var(--focus-color); box-shadow: var(--focus-ring);
}
body.cnc #rtcl-login-form .help-block,
body.cnc #rtcl-register-form .help-block { font-size: var(--t-xsmall); color: var(--c-text-muted-2); }

/* parola: comutatorul rămâne al RTCL, doar îl așezăm și îl colorăm */
body.cnc .rtcl-user-pass-wrap { position: relative; }
body.cnc .rtcl-user-pass-wrap .rtcl-form-control { padding-right: var(--s-11); }
body.cnc .rtcl-user-pass-wrap .rtcl-toggle-pass {
  position: absolute; right: var(--s-4); top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  color: var(--c-text-muted-2); cursor: pointer; border-radius: var(--r-xs);
}
body.cnc .rtcl-user-pass-wrap .rtcl-toggle-pass:hover { color: var(--c-ink); }

/* „Ține-mă minte" + submit */
body.cnc #rtcl-login-form .rtcl-login-form-submit-wrap {
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
}
body.cnc #rtcl-login-form .rtcl-check {
  display: inline-flex; align-items: center; gap: var(--s-4);
  font-size: var(--t-small); color: var(--c-text-muted); cursor: pointer; margin: 0;
}
body.cnc #rtcl-login-form .rtcl-check-label { font-weight: 500; }
body.cnc #rtcl-login-form button[name="rtcl-login"],
body.cnc #rtcl-register-form input[name="rtcl-register"] {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-4);
  min-height: 48px; padding: 0 var(--s-9); width: auto;
  font-family: inherit; font-size: var(--t-body); font-weight: 700; line-height: 1;
  border: 1px solid transparent; border-radius: var(--r-pill); cursor: pointer;
  background: var(--c-emerald); color: var(--c-on-accent); box-shadow: var(--shadow-emerald);
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard);
}
body.cnc #rtcl-login-form button[name="rtcl-login"]:hover,
body.cnc #rtcl-register-form input[name="rtcl-register"]:hover { background: var(--c-emerald-700); }
body.cnc #rtcl-login-form button[name="rtcl-login"]:active,
body.cnc #rtcl-register-form input[name="rtcl-register"]:active { transform: scale(.97); }
body.cnc #rtcl-user-registration-wrapper .login-link,
body.cnc .rtcl-login-form-wrap .rtcl-lost-password {
  font-size: var(--t-small); color: var(--c-text-muted); margin: var(--s-5) 0 0;
}

/* ── 11.1 404 ───────────────────────────────────────────────────────────
 * `404.php` din tema copil păstrează integral cele trei elemente Redux
 * (`error_bodybanner`, `error_text`, `error_buttontext`) și adaugă doar
 * două ieșiri suplimentare. Skin-ul de aici acoperă și varianta temei-mamă,
 * ca pagina să arate corect chiar dacă override-ul e scos.
 * ------------------------------------------------------------------------- */
body.cnc .error-page {
  text-align: center; padding: var(--s-13) var(--s-8);
  max-width: var(--w-narrow); margin: 0 auto;
}
body.cnc .error-page img { max-width: 320px; height: auto; margin: 0 auto var(--s-9); display: block; }
body.cnc .error-page h3 { font-size: var(--t-h1); margin: 0 0 var(--s-5); }
body.cnc .error-page a.error-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-4);
  min-height: 48px; padding: 0 var(--s-9);
  font-size: var(--t-body); font-weight: 700; line-height: 1; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--c-emerald); color: var(--c-on-accent); box-shadow: var(--shadow-emerald);
  transition: background var(--dur-fast) var(--ease-standard);
}
body.cnc .error-page a.error-btn:hover { background: var(--c-emerald-700); color: var(--c-on-accent); }


/* ═══════════════════════════════════════════════════════════════════════════
 * §12 COMPONENTE P2 — HOMEPAGE (Mod A) — clase `cnc-` NOI
 *
 * Sursa: `design-output/P2-homepage/P2-homepage.html` — planșa **APROBATĂ DE
 * CLIENT pe 31.07.2026**. Designul nu se modifică; se citește împreună cu
 * `P2-ERATA-IMPLEMENTARE.md`, care **bate specul** pe ancorele tehnice.
 *
 * DE CE SUNT AICI ÎNAINTE DE HOMEPAGE. Homepage-ul e **E3 — Elementor**
 * (pagina 2556), deci ultimul pas nu e CSS, ci trei operații în interfața WP:
 *   1. se GOLESC setările de Style de pe fiecare widget (§6.2) — altfel CSS-ul
 *      se aplică în gol; exemplul real e butonul de căutare, salvat **alb** cu
 *      pictogramă **roz `#F85C70`** pe widget;
 *   2. se pun clasele `cnc-` din **Advanced → CSS Classes**;
 *   3. 🔴 NICIODATĂ pe `.elementor-element-<hash>` — hash-urile se schimbă
 *      la re-editare.
 * Scriind componentele acum, pasul rămas e **asamblare**, nu redactare.
 *
 * ⚠️ CE NU S-A PORTAT, DELIBERAT — și de ce:
 *   · `.cnc-topbar*`, `.cnc-footer*`, `.cnc-mobnav`, `.cnc-avatar`,
 *     `.cnc-accountlink*` — sunt **schela prototipului**, care e o pagină de
 *     sine stătătoare. Pe site real, header-ul și footer-ul sunt deja Mod B
 *     (§5 și §6), peste markup-ul temei. Portate, ar fi fost cod mort.
 *   · `.cnc-wrap` — Elementor își dă singur containerul și lățimea.
 *   · `.caut-radio` — e skin peste `#caut-dd-*`, deci Mod B pe homepage;
 *     intră la pasul 4, cu ancorele citite din `caut-dropdown.js`, nu ghicite.
 *   · `.cnc-btn`, `.cnc-card`, `.cnc-search`, `.cnc-field`, `.cnc-select`,
 *     `.cnc-trackswitch`, `.cnc-reveal` — prototipul le RECOPIAZĂ din P1;
 *     aici există deja în §4. Nu se dublează.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── 12.1 Utilitare de accesibilitate ───────────────────────────────────── */
.cnc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* linkul „Sari la conținut" — se ascunde până primește focus de la tastatură */
.cnc-skip {
  position: absolute; left: var(--s-6); top: -60px; z-index: var(--z-toast);
  background: var(--c-emerald); color: var(--c-on-accent);
  font-size: var(--t-small); font-weight: 700; text-decoration: none;
  padding: var(--s-5) var(--s-7); border-radius: var(--r-sm);
  transition: top var(--dur-fast) var(--ease-standard);
}
.cnc-skip:focus { top: var(--s-6); color: var(--c-on-accent); }

/* ── 12.2 Pictograme SVG inline ─────────────────────────────────────────── */
.cnc-icon {
  width: 24px; height: 24px; flex: 0 0 auto;
  stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.cnc-icon--sm { width: 18px; height: 18px; stroke-width: 2; }
.cnc-icon--lg { width: 32px; height: 32px; stroke-width: 1.5; }

/* ── 12.3 Secțiune + grile ──────────────────────────────────────────────── */
.cnc-section { padding: var(--s-12) 0; }
.cnc-section__head { margin-bottom: var(--s-9); }
.cnc-section__bar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-7); flex-wrap: wrap;
}
.cnc-section__eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-4);
  font-size: var(--t-xsmall); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-emerald); margin-bottom: var(--s-5);
}
.cnc-section__eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--c-gold); }
.cnc-section__title { font-size: var(--t-h2); margin: 0; }
.cnc-section__lead {
  font-size: var(--t-lead); color: var(--c-text-muted); max-width: 60ch; margin: var(--s-5) 0 0;
}

.cnc-grid { display: grid; gap: var(--s-6); }
.cnc-grid--cards { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px)  { .cnc-grid--cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .cnc-grid--cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .cnc-grid--cards { grid-template-columns: repeat(4, 1fr); } }
.cnc-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 900px)  { .cnc-grid--2 { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }

/* ── 12.4 Hero-ul homepage-ului ────────────────────────────────────────
 * Bandă deschisă, NU card închis — vezi nota de coliziune din §9.3.
 * Căutarea trăiește ÎN hero: aceeași lățime optică, text aliniat la stânga.
 * ------------------------------------------------------------------------- */
.cnc-hero { padding: var(--s-12) 0; background: var(--c-bg); }
.cnc-hero__kicker {
  display: inline-flex; align-items: center; gap: var(--s-4);
  font-size: var(--t-xsmall); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-gold-700); background: var(--c-gold-50); border: 1px solid var(--c-gold-100);
  padding: 6px 12px; border-radius: var(--r-pill); margin-bottom: var(--s-7);
}
.cnc-hero__title {
  font-size: var(--t-display); line-height: .98; letter-spacing: -.03em; margin: 0 0 var(--s-6);
}
.cnc-hero__title em { font-style: normal; color: var(--c-emerald); }
.cnc-hero__lead {
  font-size: var(--t-lead); color: var(--c-text-muted); max-width: 46ch; margin: 0 0 var(--s-10);
}
.cnc-hero__actions {
  position: relative; display: flex; flex-wrap: wrap; gap: var(--s-5);
  padding-top: var(--s-9); margin-bottom: var(--s-8);
}
/* separatorul dintre căutare și CTA-ul de cerere */
.cnc-hero__actions::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 72px; height: 1px; background: var(--c-border-strong);
}
.cnc-hero__note {
  display: flex; align-items: center; gap: var(--s-4);
  font-size: var(--t-small); color: var(--c-text-muted);
}
.cnc-hero__note svg { color: var(--c-emerald); }

.cnc-hero__center { max-width: 860px; margin-inline: auto; text-align: center; }
.cnc-hero__center .cnc-hero__title { max-width: 20ch; margin-inline: auto; }
.cnc-hero__center .cnc-hero__lead { max-width: 54ch; margin-inline: auto; }
.cnc-hero__center .cnc-hero__actions,
.cnc-hero__center .cnc-hero__note { justify-content: center; }

.cnc-hero__search { max-width: 780px; margin: 0 auto var(--s-9); text-align: left; }
.cnc-hero__search .cnc-search { box-shadow: var(--shadow-card); border-color: transparent; }
.cnc-hero__search .cnc-searchblock__row { justify-content: space-between; }
.cnc-hero__search .cnc-searchblock__hint { text-align: left; }

/* ── 12.5 Cei 3 pași („Cum funcționează", pe homepage) ──────────────────
 * Scopat sub `.cnc-steps3` — vezi nota de coliziune din §9.5.
 * ------------------------------------------------------------------------- */
.cnc-steps3 { display: grid; gap: var(--s-6); position: relative; }
@media (min-width: 768px) { .cnc-steps3 { grid-template-columns: repeat(3, 1fr); gap: var(--s-8); } }
.cnc-steps3 .cnc-step {
  position: relative; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--s-8);
  display: flex; gap: var(--s-6); align-items: flex-start;
}
@media (min-width: 768px) { .cnc-steps3 .cnc-step { flex-direction: column; gap: var(--s-7); } }
.cnc-steps3 .cnc-step__n {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: var(--r-sm);
  background: var(--c-emerald); color: var(--c-on-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-h4); font-weight: 800; font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-emerald);
}
.cnc-steps3 .cnc-step__ico { color: var(--c-emerald); margin-bottom: var(--s-2); }
.cnc-steps3 .cnc-step h3 { font-size: var(--t-h4); margin: 0 0 var(--s-4); }
.cnc-steps3 .cnc-step p { font-size: var(--t-small); color: var(--c-text-muted); line-height: 1.55; margin: 0; }
/* conector doar pe desktop, pur decorativ */
@media (min-width: 768px) {
  .cnc-steps3 .cnc-step:not(:last-child)::after {
    content: ''; position: absolute; top: var(--s-9); right: calc(var(--s-8) * -1);
    width: var(--s-8); height: 2px; background: var(--c-border-strong);
  }
}

/* ── 12.6 Cele 4 tipuri de cerere ───────────────────────────────────────
 * Cardurile care duc la `/post-an-ad/?_fb=…`. Rail-ul de track pe muchia
 * stângă e semnalul 3 din 4 — vezi §2.
 * ------------------------------------------------------------------------- */
.cnc-typegrid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px)  { .cnc-typegrid { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
@media (min-width: 1024px) { .cnc-typegrid { grid-template-columns: repeat(4, 1fr); } }
.cnc-type {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--s-6);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: var(--s-8) var(--s-7) var(--s-7) var(--s-8);
  color: var(--c-ink); min-height: 44px; text-decoration: none; box-shadow: var(--shadow-hairline);
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.cnc-type::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--track-accent-strong);
}
.cnc-type:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-card);
  border-color: var(--track-border); color: var(--c-ink);
}
.cnc-type__ico {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: var(--r-sm);
  background: var(--track-tint); color: var(--track-accent);
  display: flex; align-items: center; justify-content: center;
}
.cnc-type__name { font-size: var(--t-h4); font-weight: 700; letter-spacing: -.01em; }
.cnc-type__sub { font-size: var(--t-small); color: var(--c-text-muted); line-height: 1.5; }
.cnc-type__go {
  display: flex; align-items: center; gap: var(--s-4); margin-top: auto; padding-top: var(--s-5);
  font-size: var(--t-small); font-weight: 700; color: var(--track-accent);
}
.cnc-type__go svg { transition: transform var(--dur-fast) var(--ease-standard); }
.cnc-type:hover .cnc-type__go svg { transform: translateX(3px); }

/* ── 12.7 Căutarea avansată: comutator, panou, pastile de intenție ─────── */
.cnc-searchblock__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-6);
}
.cnc-searchblock__hint { font-size: var(--t-small); color: var(--c-text-muted); }

.cnc-advtoggle {
  display: inline-flex; align-items: center; gap: var(--s-4); min-height: 44px;
  padding: 0 var(--s-6); border-radius: var(--r-pill);
  border: 1px solid var(--c-border-strong); background: var(--c-surface);
  font-family: inherit; font-size: var(--t-small); font-weight: 700; color: var(--c-emerald-700);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.cnc-advtoggle:hover { background: var(--c-emerald-50); border-color: var(--c-emerald); }
.cnc-advtoggle__chev { transition: transform var(--dur-base) var(--ease-standard); }
.cnc-advtoggle[aria-expanded="true"] .cnc-advtoggle__chev { transform: rotate(180deg); }

.cnc-advpanel { display: none; margin-top: var(--s-6); padding-top: var(--s-7); border-top: 1px solid var(--c-border); }
.cnc-advpanel.is-open { display: block; animation: cnc-reveal-up var(--dur-base) var(--ease-out); }
.cnc-advpanel__grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .cnc-advpanel__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cnc-advpanel__grid { grid-template-columns: repeat(3, 1fr); } }
.cnc-advpanel__foot { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-7); }
.cnc-advpanel__note { font-size: var(--t-xsmall); color: var(--c-text-muted-2); }
.cnc-radiorow { display: flex; gap: var(--s-4); flex-wrap: wrap; }

.cnc-intentpills { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-7); }
.cnc-intentpill { position: relative; }
.cnc-intentpill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.cnc-intentpill span {
  display: inline-flex; align-items: center; gap: var(--s-4); min-height: 44px; padding: 0 var(--s-6);
  border-radius: var(--r-pill); border: 1px solid var(--c-border-strong); background: var(--c-surface);
  font-size: var(--t-small); font-weight: 600; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.cnc-intentpill span svg { color: var(--c-emerald); }
.cnc-intentpill input:hover + span { border-color: var(--c-text-muted-2); }
.cnc-intentpill input:focus-visible + span { box-shadow: var(--focus-ring); border-color: var(--focus-color); }
.cnc-intentpill input:checked + span {
  background: var(--c-emerald); border-color: var(--c-emerald); color: var(--c-on-accent); font-weight: 700;
}
.cnc-intentpill input:checked + span svg { color: var(--c-on-accent); }

/* ── 12.8 Bottom-sheet pe mobil ────────────────────────────────────────
 * `.cnc-sheet` are deja o definiție de bază în §4.6 (foaia statică din P1).
 * Aici primește DOAR poziționarea, scopată sub văl — deci cele două nu se bat.
 * Ținta reală de la implementare: modalul `RtclModal` al pluginului, care se
 * deschide la clic pe câmpul de locație (erata P2, B-2). 🔴 Selectorul lui se
 * citește din `rtcl-public.js` LA IMPLEMENTARE, nu se fixează aici.
 * ------------------------------------------------------------------------- */
.cnc-sheetveil {
  display: none; position: fixed; inset: 0; z-index: var(--z-sheet);
  background: rgba(21,32,27,.45); backdrop-filter: blur(2px);
}
.cnc-sheetveil.is-open { display: block; animation: cnc-fade-in var(--dur-fast) var(--ease-out); }
@keyframes cnc-fade-in { from { opacity: 0; } to { opacity: 1; } }
.cnc-sheetveil .cnc-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: none;
  max-height: 88vh; overflow-y: auto;
}
.cnc-sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); margin-bottom: var(--s-7);
}
.cnc-sheet__head h2 { font-size: var(--t-h4); margin: 0; }
/* selectorul de tip: foaie pe mobil, dialog centrat pe desktop */
.cnc-typesheet { max-width: 560px; margin-inline: auto; }
@media (min-width: 768px) {
  .cnc-typeveil { display: none; align-items: center; justify-content: center; padding: var(--gutter); }
  .cnc-typeveil.is-open { display: flex; }
  .cnc-typeveil .cnc-typesheet {
    position: relative; inset: auto; border-radius: var(--r-xl);
    animation: cnc-reveal-up var(--dur-base) var(--ease-out);
  }
}

/* ── 12.9 Banda de vânzător — singurul bloc auriu de pe homepage ─────────
 * Pista ofertă, pe toată banda: e chemarea către vânzătorii de piese auto,
 * singura categorie cu contact public prin design.
 * ------------------------------------------------------------------------- */
.cnc-sellerstrip {
  background: var(--c-gold-50); border-block: 1px solid var(--c-gold-100); padding: var(--s-10) 0;
  --track-accent:        var(--c-gold-700);
  --track-accent-strong: var(--c-gold);
  --track-tint:          var(--c-gold-50);
  --track-border:        var(--c-gold-100);
}
.cnc-sellerstrip__in { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
.cnc-sellerstrip__ico {
  width: 64px; height: 64px; flex: 0 0 auto; border-radius: var(--r-md);
  background: var(--c-gold); color: var(--c-ink);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-gold);
}
.cnc-sellerstrip__txt { flex: 1 1 340px; min-width: 0; }
.cnc-sellerstrip__scope {
  background: var(--c-surface); border-color: var(--c-gold-100); color: var(--c-gold-700);
  margin-bottom: var(--s-5);
}
.cnc-sellerstrip__scope svg { color: var(--c-gold-700); }
.cnc-sellerstrip__t { font-size: var(--t-h3); color: var(--c-gold-700); margin: 0; }
.cnc-sellerstrip__s {
  font-size: var(--t-small); color: var(--c-text-muted); margin: var(--s-4) 0 0; max-width: 52ch;
}
.cnc-sellerstrip__s strong { color: var(--c-gold-700); }
.cnc-sellerstrip__act { display: flex; gap: var(--s-5); flex-wrap: wrap; flex: 0 0 auto; }
/* 🔴 Cele două butoane însumează ~365px, iar `flex:0 0 auto` nu le lasă să
   cedeze — la 360px banda ieșea din ecran cu 15px, clipată tăcut de
   `#page { overflow-x:hidden }`. Sub 560px trec pe câte un rând fiecare.
   Măsurat la 360px, nu presupus. */
@media (max-width: 559px) {
  .cnc-sellerstrip__act { flex: 1 1 100%; min-width: 0; }
  .cnc-sellerstrip__act .cnc-btn { flex: 1 1 100%; justify-content: center; }
}

/* ── 12.10 Banda de încredere ───────────────────────────────────────────── */
.cnc-trust { background: var(--c-surface); border-block: 1px solid var(--c-border); padding: var(--s-11) 0; }
.cnc-trustgrid { display: grid; gap: var(--s-8); grid-template-columns: 1fr; }
@media (min-width: 640px) { .cnc-trustgrid { grid-template-columns: repeat(3, 1fr); } }
.cnc-trustitem { display: flex; gap: var(--s-6); align-items: flex-start; }
.cnc-trustitem__ico {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: var(--r-sm);
  background: var(--c-emerald-50); color: var(--c-emerald);
  display: flex; align-items: center; justify-content: center;
}
.cnc-trustitem h3 { font-size: var(--t-body); font-weight: 700; margin: 0 0 var(--s-3); }
.cnc-trustitem p { font-size: var(--t-small); color: var(--c-text-muted); line-height: 1.5; margin: 0; }

/* ── 12.11 CTA-ul final ─────────────────────────────────────────────────── */
.cnc-closing {
  background: linear-gradient(150deg, var(--c-emerald), var(--c-emerald-700));
  border-radius: var(--r-xl); padding: var(--s-13) var(--s-9); text-align: center;
  position: relative; overflow: hidden;
}
.cnc-closing::before {
  content: ''; position: absolute; top: -140px; right: -100px; width: 420px; height: 420px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
  pointer-events: none;
}
.cnc-closing h2 { position: relative; font-size: var(--t-h1); color: var(--c-on-accent); margin: 0 0 var(--s-6); }
.cnc-closing p {
  position: relative; font-size: var(--t-lead); color: var(--c-emerald-100);
  max-width: 52ch; margin: 0 auto var(--s-9);
}
.cnc-closing__btn { position: relative; background: var(--c-surface); color: var(--c-emerald-700); box-shadow: var(--shadow-card); }
.cnc-closing__btn:hover:not(:disabled) { background: var(--c-bg); color: var(--c-emerald-700); }

/* prototipul P2 folosește `<h3>` în starea goală, P1 folosea `<h4>` — ambele valide */
.cnc-empty h3 { font-size: var(--t-h4); margin: 0 0 var(--s-4); }


/* ═══════════════════════════════════════════════════════════════════════════
 * §13 SKIN HOMEPAGE — Mod B, pasul 4 din 06-implementare §4.3
 *
 * Sursa: P2-homepage-spec.md §2.1, §4.1, §4.3 + P1-fundatie-spec.md §2.2,
 *        CORECTATE de P2-ERATA-IMPLEMENTARE.md (B-1, B-3, B-5, I-1).
 *        🔴 Unde erata contrazice specul, ERATA CÂȘTIGĂ (06 §5).
 *
 * ┌─ SPECIFICITATE ─────────────────────────────────────────────────────────┐
 * │ Tema își scrie regulile de card ca `#content .listing-grid-each-9 …`     │
 * │ (`assets/css/listing.css`) — deci un `#id`. `body.cnc` singur NU ajunge. │
 * │ Toate regulile de card de mai jos păstrează `#content` în lanț și adaugă │
 * │ `body.cnc` în față: (1 id, 3 clase) bate (1 id, 2 clase), fără           │
 * │ `!important` și fără să depindă de ordinea de încărcare.                 │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * 🔴 CE NU SE ATINGE AICI (lista neagră, 06 §7.2): `name="q"`,
 *    `name="rtcl_location"`, `.rtcl-autocomplete`, `.rtcl-term-field`,
 *    `data-type="listing"`, `#el_load_more`, `.load-more-btn`.
 *    Toate se ÎMBRACĂ; niciuna nu se redenumește și niciuna nu se ascunde.
 * ═════════════════════════════════════════════════════════════════════════ */


/* ── 13.1 CARDUL DE ANUNȚ (P1 §2.2) ─────────────────────────────────────
 * Markup-ul vine din override-ul `classified-listing/custom/list-items/
 * archive-grid-9.php`, care adaugă TREI lucruri: clasa `cnc-card` pe wrapper,
 * `data-track`, plus rail-ul și badge-ul. Restul e skin peste `.rtin-*`.
 *
 * 🟡 DOMENIU: regulile NU sunt scopate la homepage. `archive-grid-9.php` e
 *    template-ul de grilă implicit (`listing_grid_style = 9`), deci cardul nou
 *    apare și pe arhive. Decizie explicită (17.08): cardul e componenta
 *    aprobată la P2, deci se aplică peste tot unde se randează. Pagina de
 *    arhivă în sine (filtre, sidebar, bara de stări) rămâne NEATINSĂ — aia e
 *    pasul 3, blocat pe aprobarea P3.
 * ------------------------------------------------------------------------- */

/* wrapperul devine cardul; `.rtin-item` din interior se aplatizează complet */
body.cnc #content .listing-grid-each-9.cnc-card { padding: 0; margin-bottom: 0; }
body.cnc #content .listing-grid-each-9.cnc-card .rtin-item {
  border: none; border-radius: 0; padding: 0; box-shadow: none; margin-bottom: 0;
  background: none; display: flex; flex-direction: column; flex: 1;
}
/* varianta „promovat" a temei punea bordură portocalie pe `.rtin-item` —
   o mutăm pe card, ca să nu taie colțurile rotunjite */
body.cnc #content .listing-grid-each-9.featured-listing.cnc-card { border-color: var(--c-gold); }
body.cnc #content .listing-grid-each-9.featured-listing.cnc-card .rtin-item { border: none; }

/* media */
body.cnc #content .listing-grid-each-9.cnc-card .rtin-thumb {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--track-tint); flex: 0 0 auto;
}
body.cnc #content .listing-grid-each-9.cnc-card .rtin-thumb-inner {
  display: block; width: 100%; height: 100%;
}
body.cnc #content .listing-grid-each-9.cnc-card .rtin-item .rtcl-thumbnail {
  width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block;
}
/* zoomul de 1.22 al temei taie subiectul; 1.05 e suficient ca semnal de hover */
body.cnc #content .listing-grid-each-9.cnc-card .rtin-item:hover .rtin-thumb-inner .rtcl-thumbnail {
  transform: scale(1.05);
}
/* voalul întunecat de la hover (gradient pe `::after`) nu are ce comunica pe un
   card de cerere — nu există text peste imagine. Îl oprim din a mai apărea. */
body.cnc #content .listing-grid-each-9.cnc-card .rtin-item:hover .rtin-thumb-inner::after,
body.cnc #content .listing-grid-each-9.cnc-card .rtin-item:hover .rtin-thumb-inner::before {
  opacity: 0; visibility: hidden;
}

/* badge-urile temei („Promovat", „For Sale") coexistă cu badge-ul nostru de
   pistă: al nostru stă sus-stânga, ale temei coboară sub el */
body.cnc #content .listing-grid-each-9.cnc-card .rtin-thumb .rtin-featured-ad,
body.cnc #content .listing-grid-each-9.cnc-card .rtin-thumb .rtin-type {
  top: 52px; left: var(--s-6); clip-path: none; border-radius: var(--r-pill);
  padding: 4px 10px; font-size: var(--t-xsmall); font-weight: 700;
}
body.cnc #content .listing-grid-each-9.cnc-card .rtin-thumb .rtin-featured-ad + .rtin-type { top: 84px; }

/* butonul de favorite: al temei apare doar la hover și e translatat.
   Îl facem permanent și îl aducem la geometria `.cnc-card__fav` (44px țintă). */
body.cnc #content .listing-grid-each-9.cnc-card .rtin-thumb .rtcl-meta-buttons {
  position: absolute; top: var(--s-4); right: var(--s-4); bottom: auto; left: auto;
  width: auto; opacity: 1; visibility: visible; transform: none; z-index: 3;
}
body.cnc #content .listing-grid-each-9.cnc-card .rtin-item:hover .rtin-thumb .rtcl-meta-buttons {
  opacity: 1; visibility: visible; transform: none;
}
body.cnc #content .listing-grid-each-9.cnc-card .rtin-thumb .rtcl-meta-buttons .rtcl-btn,
body.cnc #content .listing-grid-each-9.cnc-card .rtin-thumb .rtcl-meta-buttons .rtcl-favourites {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--c-surface); color: var(--c-text-muted-2);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-hairline);
}
body.cnc #content .listing-grid-each-9.cnc-card .rtin-thumb .rtcl-meta-buttons .rtcl-btn:hover,
body.cnc #content .listing-grid-each-9.cnc-card .rtin-thumb .rtcl-meta-buttons .rtcl-favourites:hover {
  background: var(--c-surface); color: var(--c-danger);
}
/* eticheta textuală („Adaugă la favorite") rămâne în DOM pentru cititoarele de
   ecran — tema o ascunde deja pe layout 8, o păstrăm ascunsă ACCESIBIL */
body.cnc #content .listing-grid-each-9.cnc-card .rtcl-meta-buttons .favourite-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* corp */
body.cnc #content .listing-grid-each-9.cnc-card .rtin-item .rtin-content {
  padding: var(--s-6) var(--s-6) var(--s-7) var(--s-7);
  display: flex; flex-direction: column; gap: var(--s-4); flex: 1;
}
body.cnc #content .listing-grid-each-9.cnc-card .rtin-title {
  font-size: var(--t-h4); font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.cnc #content .listing-grid-each-9.cnc-card .rtin-title a { color: var(--c-ink); text-decoration: none; }
body.cnc #content .listing-grid-each-9.cnc-card .rtin-item .rtin-content .rtin-title a:hover { color: var(--track-accent); }

/* 🔴 tema pune `font-size: 0` pe `.rtin-cat` la layout 9 (listing.css) — deci
   dimensiunea TREBUIE dată pe ancora din interior, altfel categoria dispare. */
/* 🔴 `.rtin-cat-action` și `.rtin-cat-wrap` sunt flex (regulile temei). Un copil
   de flex are `min-width:auto`, deci NU se strânge sub min-content — elipsa de
   mai jos nu s-ar aplica niciodată și linia de categorii ar depăși cardul
   (măsurat: 1460px într-un card de 283px, clipat tăcut). `min-width:0` pe tot
   lanțul e ce o face să funcționeze. */
body.cnc #content .listing-grid-each-9.cnc-card .rtin-item .rtin-cat-action { margin: 0; min-width: 0; }
body.cnc #content .listing-grid-each-9.cnc-card .rtin-item .rtin-cat-wrap { min-width: 0; max-width: 100%; }
/* Un anunț poate fi în 3 categorii („Auto, moto și ambarcațiuni, Autoturisme,
   Caut să cumpăr") — pe un card de 300px asta e două rânduri de majuscule care
   concurează cu titlul. Se taie VIZUAL la un rând, cu elipsă; toate rămân în
   DOM și rămân linkuri, deci nu se pierde nici informație, nici SEO. */
body.cnc #content .listing-grid-each-9.cnc-card .rtin-item .rtin-content .rtin-cat {
  border: none; padding: 0; margin: 0; font-size: 0;
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.cnc #content .listing-grid-each-9.cnc-card .rtin-item .rtin-content .rtin-cat a {
  display: inline-flex; align-items: center;
  font-size: var(--t-xsmall); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--track-accent); text-decoration: none;
}
body.cnc #content .listing-grid-each-9.cnc-card .rtin-item .rtin-content .rtin-cat a:hover { text-decoration: underline; }
body.cnc #content .listing-grid-each-9.cnc-card .rtin-item .rtin-content .rtcl-delimiter { font-size: var(--t-xsmall); color: var(--c-text-muted-2); }

body.cnc #content .listing-grid-each-9.cnc-card .rtin-item .rtin-content .rtin-meta {
  margin: auto 0 0; padding: var(--s-4) 0 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
}
body.cnc #content .listing-grid-each-9.cnc-card .rtin-item .rtin-content .rtin-meta li,
body.cnc #content .listing-grid-each-9.cnc-card .rtin-item .rtin-content .rtin-meta li a {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-small); color: var(--c-text-muted-2);
}
/* pictogramele de meta au `stroke="#ACACAC"` scris ÎN SVG, în template-ul temei;
   nu se pot recolora din CSS fără să atingem template-ul. Le lăsăm, dar le
   aducem la aceeași opacitate optică cu textul. */
body.cnc #content .listing-grid-each-9.cnc-card .rtin-item .rtin-content .rtin-meta li svg { opacity: .85; }

body.cnc #content .listing-grid-each-9.cnc-card .rtin-item .rtin-price { margin: var(--s-4) 0 0; }
body.cnc #content .listing-grid-each-9.cnc-card span.rtcl-price-amount {
  display: inline-flex; align-items: center;
  font-size: var(--t-body); font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--c-ink); background: var(--c-gold-50);
  border: 1px solid var(--c-gold-100); border-radius: var(--r-sm);
  padding: 4px 10px; margin-bottom: 0;
}


/* ── 13.2 GRILA WIDGETULUI `rt-listing-grid` ────────────────────────────
 * 🔴 ERATA B-5: specul §4.3 dădea `> .row.auto-clear > .listing-grid-each`,
 *    dar `classima-core/elementor/listing-grid/view.php:43` pune un wrapper de
 *    coloană Bootstrap ÎNTRE ele. Selectorul corect e cel din §2.1.
 * 🟡 I-3: `#el_load_more` NU e tipărit pe homepage (`load_more_btn_display: ""`),
 *    deci regulile lui rămân valabile în general, dar aici nu se potrivesc.
 * ------------------------------------------------------------------------- */
/* 🔴 `minmax(0, 1fr)`, NU `1fr`. Pistele de grilă `1fr` sunt `minmax(auto, 1fr)`,
   iar minimul `auto` e min-content-ul cardului — care include imaginea cu
   `width="400"` din markup. Rezultatul măsurat la 360px: cardul forța 416px și
   ieșea din ecran (clipat tăcut de `#page { overflow-x:hidden }`, deci fără
   bară de scroll care să dea de gol problema). */
body.cnc .rt-el-listing-grid > .row.auto-clear {
  display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr);
  margin: 0;
}
@media (min-width: 560px)  { body.cnc .rt-el-listing-grid > .row.auto-clear { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { body.cnc .rt-el-listing-grid > .row.auto-clear { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { body.cnc .rt-el-listing-grid > .row.auto-clear { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Bootstrap-ul temei pune float + width procentual pe copii — se neutralizează
   explicit, altfel grila CSS primește elemente care își impun singure lățimea */
body.cnc .rt-el-listing-grid > .row.auto-clear > [class*="col-"] {
  width: 100%; max-width: none; float: none; padding-inline: 0; display: flex;
}
body.cnc .rt-el-listing-grid > .row.auto-clear > [class*="col-"] > .listing-grid-each { width: 100%; }


/* ── 13.3 BARA DE CĂUTARE — `rtcl-listing-search-sortable-form` ─────────
 * 🔴 ERATA B-1: câmpul de locație NU e un input. Widgetul e salvat cu
 *    `search_style: "popup"`, deci `templates/elementor/search-sortable/fields/
 *    location-field.php` produce un `<div class="rtcl-search-input-button
 *    rtcl-search-input-location">` care deschide `RtclModal` (rtcl-public.js:2268)
 *    și un `<input type="hidden" class="rtcl-term-field" name="rtcl_location">`.
 *    `.location-field-wrapper`, `.rtcl-location` și `data-type="location"`
 *    NU EXISTĂ în pagină — regulile pe ele din spec s-ar fi aplicat în gol.
 * 🔴 ERATA B-3: cuvântul-cheie are un nivel în plus, `.keywords-field-wrapper`.
 *    Fără `flex:1` pe el, inputul nu se întinde și pastila se strânge.
 * 🟡 ERATA I-1: setările de Style salvate pe widget (buton alb, pictogramă roz
 *    #F85C70, radius 6px) au fost GOLITE din `_elementor_data` la pasul 4 —
 *    altfel tot blocul de mai jos s-ar fi aplicat în gol.
 * ⚠️ `.rtcl-el-search-style-4` se PĂSTREAZĂ ca ancoră de scoping (I-1), dar
 *    regula ei `.rtcl-flex-column > label { display:none }` scoate eticheta din
 *    arborele de accesibilitate. O readucem ca etichetă ascunsă VIZUAL.
 * ------------------------------------------------------------------------- */
body.cnc .rtcl-elementor-widget-search-sortable .rtcl-widget-search-sortable-wrapper {
  display: flex; flex-direction: column; gap: var(--s-4);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-card);
}
/* 🔴 `max-width` NU e opțional aici. `elementor-widget.css` are
   `.rtcl-widget-search-sortable-inline .rtcl-form-group { max-width:50%; flex:0 0 50% }`.
   Un `flex:1` care nu resetează și `max-width` lasă cele două câmpuri să ocupe
   exact 100% din pastilă — iar butonul „Caută" cade pe al doilea rând, fiindcă
   wrapperul are `flex-wrap:wrap` de la plugin. Constatat vizual, nu presupus. */
body.cnc .rtcl-widget-search-sortable-wrapper .rtcl-form-group {
  flex: 1; min-width: 0; max-width: none; margin-bottom: 0; position: relative;
}
/* eticheta: ascunsă vizual, NU din arborele de accesibilitate */
body.cnc .rtcl-el-search-style-4 .rtcl-widget-search-sortable-wrapper .rtcl-flex-column > label,
body.cnc .rtcl-widget-search-sortable-wrapper .rtcl-from-label {
  display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

body.cnc .rtcl-widget-search-sortable-wrapper .rtcl-form-group-field {
  display: flex; align-items: center; gap: var(--s-5);
  background: var(--c-bg); border: 1px solid transparent;
  border-radius: var(--r-sm); padding: 0 var(--s-6); min-height: 52px;
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
body.cnc .rtcl-widget-search-sortable-wrapper .rtcl-form-group-field:focus-within {
  border-color: var(--c-emerald); background: var(--c-surface); box-shadow: var(--focus-ring);
}
/* pictograma de câmp: mască, deci ia culoarea din `background-color` */
body.cnc .rtcl-widget-search-sortable-wrapper .ws-location .rtcl-form-group-field::before,
body.cnc .rtcl-widget-search-sortable-wrapper .rt-autocomplete-wrapper .rtcl-form-group-field::before {
  content: ''; flex: 0 0 auto; width: 18px; height: 18px;
  background-color: var(--c-emerald);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain;     mask-size: contain;
}
body.cnc .rtcl-widget-search-sortable-wrapper .ws-location .rtcl-form-group-field::before {
  -webkit-mask-image: var(--cnc-ico-pin); mask-image: var(--cnc-ico-pin);
}
body.cnc .rtcl-widget-search-sortable-wrapper .rt-autocomplete-wrapper .rtcl-form-group-field::before {
  -webkit-mask-image: var(--cnc-ico-search); mask-image: var(--cnc-ico-search);
}

/* 🔴 B-3: nivelul în plus al cuvântului-cheie */
body.cnc .rtcl-widget-search-sortable-wrapper .keywords-field-wrapper { flex: 1; min-width: 0; display: flex; }

body.cnc .rtcl-widget-search-sortable-wrapper .rtcl-form-control {
  border: none; background: none; outline: none; box-shadow: none; flex: 1; min-width: 0;
  height: auto; min-height: 0; padding: 14px 0;
  font: 500 16px/1.4 var(--font); color: var(--c-ink);
}
body.cnc .rtcl-widget-search-sortable-wrapper .rtcl-form-control::placeholder { color: var(--c-text-faint); }

/* 🔴 B-1: locația e un `<div>` care deschide un modal, nu un input.
   Îl îmbrăcăm ca să ARATE ca un câmp; nu îl transformăm în input. */
body.cnc .rtcl-widget-search-sortable-wrapper .rtcl-search-input-button {
  flex: 1; min-width: 0; display: flex; align-items: center;
  border: none; background: none; box-shadow: none; padding: 14px 0; height: auto; min-height: 0;
  cursor: pointer;
}
/* 🔴 Tema are propria pictogramă Font Awesome pe `::before`, iar lanțul ei e
   `.rtcl-widget-search-sortable .rtcl-widget-search-form .rtcl-search-input-button.rtcl-search-input-location:before`
   (elementor.css) = PATRU clase. Un selector de trei clase + un element pierde,
   oricât de „mai specific" pare la citire — de aceea lanțul de mai jos e
   OGLINDIT, nu scurtat. Fără el se văd DOUĂ pictograme de locație. */
body.cnc .rtcl-widget-search-sortable .rtcl-widget-search-form .rtcl-search-input-button.rtcl-search-input-location::before,
body.cnc .rtcl-widget-search-sortable .rtcl-widget-search-form .rtcl-search-input-button.rtcl-search-input-category::before,
body.cnc .rtcl-widget-search-sortable-wrapper .rtcl-search-input-button::before { content: none; }
body.cnc .rtcl-widget-search-sortable-wrapper .search-input-label {
  font: 500 16px/1.4 var(--font); color: var(--c-text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* JS-ul rescrie conținutul la selecție (rtcl-public.js:2563) — când e o
   valoare aleasă, hidden-ul are `value`, deci textul devine text real */
body.cnc .rtcl-widget-search-sortable-wrapper .rtcl-search-input-button:has(.rtcl-term-field:not([value=""])) .search-input-label {
  color: var(--c-ink); font-weight: 600;
}
body.cnc .rtcl-widget-search-sortable-wrapper .rtcl-search-input-button:focus-visible {
  outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm);
}

body.cnc .rtcl-widget-search-sortable-wrapper .ws-button .rtcl-from-label { display: none; }
body.cnc .rtcl-widget-search-sortable-wrapper .ws-button-inner { padding: 0; background: none; border: none; min-height: 0; }
body.cnc .rtcl-widget-search-sortable-wrapper .rtcl-btn.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-4);
  width: 100%; min-height: 52px; padding: 0 var(--s-9);
  border: none; border-radius: var(--r-sm);
  background: var(--c-emerald); color: var(--c-on-accent);
  font: 700 var(--t-body)/1 var(--font); cursor: pointer; box-shadow: var(--shadow-emerald);
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-instant) var(--ease-standard);
}
body.cnc .rtcl-widget-search-sortable-wrapper .rtcl-btn.btn-primary:hover { background: var(--c-emerald-700); color: var(--c-on-accent); }
body.cnc .rtcl-widget-search-sortable-wrapper .rtcl-btn.btn-primary:active { transform: scale(.97); }
body.cnc .rtcl-widget-search-sortable-wrapper .rtcl-btn.btn-primary .icon-wrapper { display: inline-flex; }

/* de la 768px devine O SINGURĂ pastilă orizontală (spec §5) */
@media (min-width: 768px) {
  body.cnc .rtcl-elementor-widget-search-sortable .rtcl-widget-search-sortable-wrapper {
    flex-direction: row; align-items: center; gap: var(--s-4); flex-wrap: nowrap;
    border-radius: var(--r-pill); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  }
  body.cnc .rtcl-widget-search-sortable-wrapper .rtcl-form-group-field { border-radius: var(--r-pill); }
  /* 🔴 `width:auto` NU e redundant lângă `flex:0 0 auto`. Pluginul dă
     `.rtcl-widget-search-sortable .rtcl-form-group { width:100% }`, iar
     `flex-basis:auto` ia dimensiunea de bază TOCMAI din `width` — deci grupul
     butonului pornea de la 100% din pastilă și, fiind `flex-shrink:0`, nu mai
     ceda nimic: cele două câmpuri se strângeau la 0px. Măsurat în browser
     (CDP), nu dedus. */
  body.cnc .rtcl-widget-search-sortable-wrapper .ws-item.ws-button { flex: 0 0 auto; width: auto; }
  body.cnc .rtcl-widget-search-sortable-wrapper .ws-button-inner { width: auto; }
  body.cnc .rtcl-widget-search-sortable-wrapper .rtcl-btn.btn-primary { border-radius: var(--r-pill); width: auto; }
  body.cnc .rtcl-widget-search-sortable-wrapper .rtcl-form-control,
  body.cnc .rtcl-widget-search-sortable-wrapper .search-input-label { font-size: var(--t-body); }
  /* separator subtil între cele două câmpuri, ca pastila să nu pară un singur input */
  body.cnc .rtcl-widget-search-sortable-wrapper .rt-autocomplete-wrapper::before {
    content: ''; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px;
    background: var(--c-border); z-index: 1;
  }
}

/* panoul de sugestii al autocomplete-ului (jQuery UI) — apare la tastare */
body.cnc .ui-autocomplete.rtcl-autocomplete-items,
body.cnc .rtcl-autocomplete-items {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: var(--s-3);
  z-index: var(--z-dropdown);
}
body.cnc .rtcl-autocomplete-items li a,
body.cnc .rtcl-autocomplete-items .ui-menu-item-wrapper {
  display: block; padding: var(--s-5) var(--s-6); border-radius: var(--r-xs);
  font-size: var(--t-small); color: var(--c-ink); text-decoration: none;
}
body.cnc .rtcl-autocomplete-items li a:hover,
body.cnc .rtcl-autocomplete-items .ui-menu-item-wrapper.ui-state-active {
  background: var(--c-emerald-50); color: var(--c-emerald-700); border: none;
}


/* ── 13.4 MODALUL DE LOCAȚIE / CATEGORIE — `RtclModal` ──────────────────
 * 🔴 ERATA B-2, varianta (a) recomandată: se refolosește vocabularul
 *    `.cnc-sheet` în loc să se accepte aspectul implicit al pluginului.
 * Markup-ul e construit în JS (`rtcl-common.min.js`, `t.RtclModal`), verificat
 * la implementare — NU ghicit din spec:
 *    .rtcl-ui-modal › .rtcl-modal-wrapper › .rtcl-modal-content
 *                       › .rtcl-modal-header (.rtcl-modal-title + button.rtcl-modal-close)
 *                       › .rtcl-modal-body › .rtcl-modal-footer
 *                   › .rtcl-mask-wrapper
 * Modalul se adaugă pe `<body>` — care poartă clasa `cnc`, deci scoparea ține.
 * Instanța de locație e creată cu `footer:false, wrapClass:"no-heading"`.
 * ------------------------------------------------------------------------- */
/* 🔴 NU pune `z-index` pe `.rtcl-modal-wrapper`. Pluginul are deja o stivă
 *    coerentă și strânsă: `.rtcl-ui-modal` 2000 › `.rtcl-mask-wrapper` 2001 ›
 *    `.rtcl-modal-wrapper` 2003. Iar masca e ULTIMUL copil în DOM, deci orice
 *    valoare mai mică decât 2001 pe wrapper o aduce PESTE modal: fundalul negru
 *    la 50% plus `backdrop-filter` cad peste listă, care apare gri, neclară și
 *    complet neclicabilă. Exact asta a produs `var(--z-sheet)` (= 1200).
 *    Scara noastră de `z-*` merge până la 1300, deci NU poate coexista cu a
 *    pluginului aici — soluția e să nu ne atingem de ea.
 * ⚠️ `backdrop-filter` rămâne pe mască (2001), unde blurează pagina din spate,
 *    nu modalul din față. */
body.cnc .rtcl-ui-modal .rtcl-mask-wrapper {
  background: var(--c-ink); backdrop-filter: blur(2px);
}
/* ⚠️ FĂRĂ `overflow:hidden` aici. Instanța de locație e creată cu
   `wrapClass:"no-heading"`, iar pluginul scoate butonul de închidere ÎN AFARA
   colțului cardului (`position:absolute; top:0; right:0`) — de aceea își pune
   singur `overflow:initial`. Un `overflow:hidden` de-al nostru l-ar tăia. */
body.cnc .rtcl-ui-modal .rtcl-modal-content {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-pop);
}
body.cnc .rtcl-ui-modal .rtcl-modal-header {
  border-bottom: 1px solid var(--c-border); padding: var(--s-7) var(--s-8);
}
body.cnc .rtcl-ui-modal .rtcl-modal-wrapper.no-heading .rtcl-modal-header { border: none; padding: 0; }
body.cnc .rtcl-ui-modal .rtcl-modal-title { font-size: var(--t-h4); font-weight: 700; color: var(--c-ink); }
/* lanț oglindit: al pluginului e `.rtcl-ui-modal .rtcl-modal-wrapper
   .rtcl-modal-content .rtcl-modal-close` = 4 clase (fundal `#2f3432`, 30px) */
body.cnc .rtcl-ui-modal .rtcl-modal-wrapper .rtcl-modal-content .rtcl-modal-close,
body.cnc .rtcl-ui-modal .rtcl-modal-wrapper.no-heading .rtcl-modal-close {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 3px solid var(--c-surface); background-color: var(--c-ink); color: var(--c-on-accent);
  box-shadow: var(--shadow-soft); padding: 0; opacity: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
body.cnc .rtcl-ui-modal .rtcl-modal-wrapper .rtcl-modal-content .rtcl-modal-close:hover { background-color: var(--c-emerald); }
body.cnc .rtcl-ui-modal .rtcl-modal-wrapper .rtcl-modal-content .rtcl-modal-close i { color: var(--c-on-accent); }
body.cnc .rtcl-ui-modal .rtcl-modal-body { padding: var(--s-7) var(--s-8) var(--s-8); }
body.cnc .rtcl-ui-modal .rtcl-ui-select-list-wrap > h4 {
  font-size: var(--t-h4); margin: 0 0 var(--s-6); color: var(--c-ink);
}
body.cnc .rtcl-ui-modal .rtcl-ui-select-list ul { list-style: none; margin: 0; padding: 0; }
body.cnc .rtcl-ui-modal .rtcl-ui-select-list li a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  min-height: 44px; padding: var(--s-5) var(--s-6); border-radius: var(--r-sm);
  font-size: var(--t-small); font-weight: 600; color: var(--c-ink); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
body.cnc .rtcl-ui-modal .rtcl-ui-select-list li a:hover { background: var(--c-emerald-50); color: var(--c-emerald-700); }
/* afordanța de „intră în subcategorii" — un chevron desenat din bordură */
body.cnc .rtcl-ui-modal .rtcl-ui-select-list li.has-sub > a::after {
  content: ''; flex: 0 0 auto; width: 8px; height: 8px;
  border-right: 2px solid var(--c-text-muted-2); border-bottom: 2px solid var(--c-text-muted-2);
  transform: rotate(-45deg);
}
body.cnc .rtcl-ui-modal .rtcl-select-action { margin-bottom: var(--s-5); }
body.cnc .rtcl-ui-modal .rtcl-select-action a {
  display: inline-flex; align-items: center; gap: var(--s-4); min-height: 36px;
  font-size: var(--t-small); font-weight: 700; color: var(--c-emerald-700); text-decoration: none;
}


/* ── 13.5 SECȚIUNILE E2 ÎN ELEMENTOR ────────────────────────────────────
 * CONVENȚIA DE COMPOZIȚIE, ca să nu se dubleze nici padding-ul, nici lățimea:
 *
 *   · clasa de BANDĂ (`cnc-hero`, `cnc-section`, `cnc-trust`, `cnc-sellerstrip`)
 *     stă pe SECȚIUNEA Elementor — care e oricum full-width, deci fundalul și
 *     bordurile de bandă ies corect pe toată lățimea ecranului;
 *   · `.elementor-container` (boxed) ține lățimea și gutter-ul — de aceea
 *     `.cnc-wrap` din prototip NU s-a portat (§6.7 din 06-implementare);
 *   · widgetul HTML conține DOAR interiorul: capul de secțiune + grila.
 *
 * ⚠️ Regula din spec §2.1: NU se pune `display:grid` pe `.elementor-column` —
 *    Elementor îi gestionează `flex-basis` din UI și s-ar bate cu noi.
 * ------------------------------------------------------------------------- */

/* secțiunea-bandă își dă singură padding-ul vertical; Elementor nu trebuie să
   mai adauge nimic peste, altfel ritmul vertical se dublează */
body.cnc .elementor-section.cnc-hero,
body.cnc .elementor-section.cnc-section,
body.cnc .elementor-section.cnc-trust,
body.cnc .elementor-section.cnc-sellerstrip { margin: 0; }

/* hero-ul e centrat pe o coloană mai îngustă decât restul paginii (§12.4) */
body.cnc .elementor-section.cnc-hero > .elementor-container { max-width: 900px; }
/* bara de căutare primește `cnc-hero__search` din Advanced → CSS Classes */
body.cnc .cnc-hero__search { max-width: 780px; margin-inline: auto; text-align: left; }

/* titlul „Cereri recente" e un widget `heading` al temei → skin, nu markup nou */
body.cnc .elementor-widget-heading .elementor-heading-title.cnc-section__title { margin: 0; }
body.cnc .elementor-section.cnc-section > .elementor-container > .elementor-column > .elementor-widget-wrap { align-content: flex-start; }


/* ── 13.6 PANOUL „CĂUTARE AVANSATĂ" — Mod B peste `[caut_dropdown]` ──────
 * Markup-ul îl randează `[cnc_advanced_search]` (functions.php §3): învelișul e
 * al nostru, interiorul e al mu-pluginului, nod cu nod. Componentele `cnc-`
 * (§12.7) erau scrise din 17.08 dimineața; aici se lipesc peste DOM-ul real.
 *
 * 🔴 DE CE ARE FIECARE REGULĂ PREFIXUL `body.cnc .cnc-advpanel`:
 *    `caut-dropdown.php:47` înregistrează stylesheet-ul cu `src = false` și îi
 *    atârnă CSS-ul prin `wp_add_inline_style`, iar punerea în coadă se face DIN
 *    SHORTCODE — deci în timpul randării conținutului, deci tipărit în FOOTER,
 *    deci DUPĂ fișierul nostru. La specificitate egală câștiga el (capcana §6.1
 *    din 06-implementare, aceeași ca la blocurile `<style>` din mu-plugins).
 *    Prefixul nu e exces de zel: fără el, regulile de mai jos nu există.
 *
 * 🔴 CE NU SE ATINGE: cele 9 ID-uri `#caut-dd-*`, `name="caut_cond"`, tipul
 *    `<select>`, `type="button"` de pe „Filtrează", ordinea în DOM. Nodurile nu
 *    se scot: eticheta implicită a shortcode-ului se ascunde, nu se șterge.
 *
 * 🟢 PASUL 3 (18.08) — DOUĂ SCOPURI, ACELEAȘI REGULI.
 *    `[caut_dropdown]` se randează în DOUĂ locuri: panoul „Căutare avansată" de
 *    pe homepage (`.cnc-advpanel`) și panoul de filtre din sidebar-ul arhivei
 *    (`.cnc-filterpanel`, adică `#filters-host`). Markup-ul mu-pluginului e
 *    IDENTIC în ambele, deci skin-ul trebuie să fie identic.
 *
 *    Alternativa era să copiez cele ~100 de linii de mai jos în §15, cu alt
 *    prefix — exact capcana §6.7 din `06-implementare` („două planșe împart
 *    nume de clase, iar CSS nu te avertizează"): peste trei luni, o corectură
 *    pe homepage nu s-ar mai fi propagat pe arhivă, în tăcere.
 *
 *    Soluția e `:is(.cnc-advpanel, .cnc-filterpanel)`. Specificitatea lui `:is()`
 *    e cea a celui mai specific argument — aici două clase simple, deci
 *    IDENTICĂ cu selectorul de dinainte. Nicio regulă nu s-a întărit sau slăbit;
 *    s-a lărgit doar domeniul.
 * ------------------------------------------------------------------------- */
body.cnc .cnc-advsearch { max-width: 780px; margin-inline: auto; text-align: left; }

/* fieldsetul pastilelor: reset complet. `min-width:0` fiindcă `<fieldset>` are
   `min-width:min-content` implicit și ar refuza să se strângă sub 360px. */
body.cnc .cnc-intentset { border: 0; margin: 0; padding: 0; min-width: 0; }
body.cnc .cnc-intentset > legend { padding: 0; margin-bottom: var(--s-5); }

body.cnc :is(.cnc-advpanel, .cnc-filterpanel) .caut-dropdown-wrap {
  padding: 0; border: 0; background: none; border-radius: 0;
}
body.cnc :is(.cnc-advpanel, .cnc-filterpanel) .caut-dropdown-wrap[hidden] { display: none; }
/* randat cu `label=""` (panoul își are deja legenda), deci elementul e gol */
body.cnc :is(.cnc-advpanel, .cnc-filterpanel) .caut-dropdown-label { display: none; }

/* rândul de câmpuri devine grila din planșă (`.cnc-advpanel__grid`, §12.7).
   `minmax(0, 1fr)`, nu `1fr`: lecția C7 — minimul implicit `auto` al unei
   coloane e min-content-ul copilului, iar un `<select>` nu se strânge. */
body.cnc :is(.cnc-advpanel, .cnc-filterpanel) .caut-dropdown-row {
  display: grid; gap: var(--s-5); align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
/* `align-items: start`, nu `end`: celulele nu au aceeași înălțime (select 48px,
   pastilele de „Stare" 44px), iar alinierea la bază decalează ETICHETELE între
   ele pe al doilea rând. Se vede doar în captură, nu în cod. */
@media (min-width: 640px) {
  body.cnc :is(.cnc-advpanel, .cnc-filterpanel) .caut-dropdown-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  body.cnc :is(.cnc-advpanel, .cnc-filterpanel) .caut-dropdown-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Aspectul selectoarelor vine din `.cnc-select`, pe care JS-ul îl adaugă lângă
   `.caut-dd` (îmbrăcăm, nu redenumim). Aici se bat DOAR cele două proprietăți
   care vin din CSS-ul de footer al mu-pluginului: `min-width:200px` — care ar
   sparge grila la 360px — și `padding:6px`, care ar călca peste chevron. */
body.cnc :is(.cnc-advpanel, .cnc-filterpanel) select.caut-dd {
  width: 100%; min-width: 0; padding: 12px var(--s-10) 12px var(--s-6);
}

/* Comutarea intenției cere un tur AJAX (pe local: ~5s). Semnalul de așteptare
   e obligatoriu — altfel pastila apăsată pare o pastilă moartă. */
body.cnc :is(.cnc-advpanel, .cnc-filterpanel)[aria-busy="true"] select.caut-dd:disabled { opacity: .55; cursor: progress; }

/* „Stare": pastile pe `<label>`, fiindcă `caut-dropdown.js:55-63` golește
   containerul și reconstruiește radiourile FĂRĂ `<span>` (erata B3). */
body.cnc :is(.cnc-advpanel, .cnc-filterpanel) #caut-dd-condition {
  display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center;
}
body.cnc :is(.cnc-advpanel, .cnc-filterpanel) #caut-dd-condition label {
  position: relative; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--s-7);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-pill);
  background: var(--c-surface);
  font-size: var(--t-small); font-weight: 600; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
body.cnc :is(.cnc-advpanel, .cnc-filterpanel) #caut-dd-condition label input {
  position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer;
}
body.cnc :is(.cnc-advpanel, .cnc-filterpanel) #caut-dd-condition label:hover { border-color: var(--c-text-muted-2); }
body.cnc :is(.cnc-advpanel, .cnc-filterpanel) #caut-dd-condition label:has(input:checked) {
  background: var(--c-emerald); border-color: var(--c-emerald);
  color: var(--c-on-accent); font-weight: 700;
}
body.cnc :is(.cnc-advpanel, .cnc-filterpanel) #caut-dd-condition label:has(input:focus-visible) {
  box-shadow: var(--focus-ring); border-color: var(--focus-color);
}

/* „Filtrează" — skin complet, nu `.cnc-btn` adăugat pe element: mu-pluginul îi
   dă `background:#2b7a2b` și `border-radius:6px` din footer, deci o clasă de
   componentă cu un singur nivel de specificitate ar pierde exact culoarea. */
body.cnc :is(.cnc-advpanel, .cnc-filterpanel) .caut-dd-btn {
  grid-column: 1 / -1; justify-self: start;
  display: inline-flex; align-items: center; gap: var(--s-4);
  min-height: 44px; padding: 0 var(--s-8);
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--c-emerald); color: var(--c-on-accent);
  font-family: inherit; font-size: var(--t-body); font-weight: 700; line-height: 1;
  cursor: pointer; box-shadow: var(--shadow-emerald);
  transition: background var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
body.cnc :is(.cnc-advpanel, .cnc-filterpanel) .caut-dd-btn:hover:not(:disabled) { background: var(--c-emerald-700); }
body.cnc :is(.cnc-advpanel, .cnc-filterpanel) .caut-dd-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Nota mu-pluginului rămâne unde e, ca micro-copy.
   🔴 Azi textul ei e tehnic: taxonomia `rtcl_condition` NU are niciun termen,
   deci `caut-dropdown.js:64` scrie „Notă: se folosește listă implicită pentru
   Tip (Nou/Second)." E conținut preexistent (identic pe arhive) — raportat la
   client ca punct de conținut, nu rescris din CSS. */
body.cnc :is(.cnc-advpanel, .cnc-filterpanel) .caut-inline-note {
  margin-top: var(--s-5); font-size: var(--t-xsmall); color: var(--c-text-muted-2);
}
body.cnc :is(.cnc-advpanel, .cnc-filterpanel) #caut-dd-extras { margin-top: var(--s-6); }

/* Ieșirea pentru intenția fără subcategorii (azi: rădăcina 18 „Caut servicii" —
   întrebarea deschisă 7). O stare goală fără ieșire e un capăt de drum. */
.cnc-advpanel__empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); }
.cnc-advpanel__empty[hidden] { display: none; }
.cnc-advpanel__empty .cnc-advpanel__note { margin: 0; font-size: var(--t-small); color: var(--c-text-muted); }
.cnc-advpanel__empty a { text-decoration: none; }

/* Foaia de jos, pe mobil. Panoul MUTAT aici (un singur nod, `appendChild`) e
   conținutul foii, nu o extensie a barei de căutare → pierde muchia de sus. */
body.cnc .cnc-advsheet { max-width: none; }
body.cnc .cnc-advsheet__body .cnc-advpanel { margin-top: 0; padding-top: 0; border-top: 0; }
/* plasă de siguranță: pe desktop vălul nu are ce căuta, indiferent de stare */
@media (min-width: 768px) { body.cnc .cnc-advveil { display: none; } }


/* ═══════════════════════════════════════════════════════════════════════════
 * §14 COMPONENTE P3 — ARHIVA (Mod A) — clase `cnc-` NOI
 *
 * Sursa: P3-lista-anunturi-spec.md §12 (opt componente + patru modificatoare),
 *        plus cele adăugate în runda 3 (`.cnc-arcnav`, `.cnc-thin`,
 *        `.cnc-card__price`, `.cnc-thumb__none`, `.cnc-crumbs__sep`,
 *        `.cnc-pager__gap`). Markup-ul îl scriu override-urile T2 din
 *        `classified-listing/` și `template-parts/`.
 *
 * 🟢 ZERO TOKENI NOI (spec §12.10). Toate culorile vin din §1; pistele vin din
 *    §2, prin `--track-*` — deci aceleași reguli desenează arhiva emerald și
 *    arhiva aurie, fără o singură ramificație pe culoare.
 *
 * 🔴 CE NU E AICI: nicio regulă peste `.rtin-*`, `.rtcl-*`, `.caut-*` sau
 *    `.cc-*`. Alea sunt skin (Mod B) și stau în §15, unde au nevoie de
 *    specificitatea care bate tema și mu-pluginurile. Componentele de aici
 *    sunt inerte până sunt puse în markup.
 * ═════════════════════════════════════════════════════════════════════════ */


/* ── 14.1 ANTETUL DE ARHIVĂ (spec §12.1) ────────────────────────────────
 * De ce nu `.cnc-section__head` din P2: acela e antetul unei SECȚIUNI dintr-o
 * pagină. Acesta e antetul PAGINII, poartă pista la nivel de zonă și are un
 * element pe care nicio secțiune nu-l are — propoziția care traduce mandatul
 * dual-track în cuvinte, nu doar în culoare (`__what`).
 * ------------------------------------------------------------------------- */
.cnc-archead {
  background: var(--track-tint); border-bottom: 1px solid var(--track-border);
  padding: var(--s-8) 0 var(--s-9);
}
.cnc-archead__top { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-5); }
.cnc-archead__title { font-size: var(--t-h1); letter-spacing: -.025em; margin: 0; }
.cnc-archead__lead { font-size: var(--t-lead); color: var(--c-text-muted); max-width: 62ch; margin: var(--s-5) 0 0; }
.cnc-archead__lead strong { color: var(--track-accent); font-weight: 800; font-variant-numeric: tabular-nums; }
/* Caseta „ce e locul ăsta" — răspunsul la problema #1 de UX din spec §1:
   lista arăta ca orice site de anunțuri, fără să spună CINE caută pe cine. */
.cnc-archead__what {
  display: flex; align-items: center; gap: var(--s-5); margin-top: var(--s-7);
  background: var(--c-surface); border: 1px solid var(--track-border);
  border-radius: var(--r-md); padding: var(--s-6) var(--s-7); max-width: 62ch;
}
.cnc-archead__what svg { flex: 0 0 auto; color: var(--track-accent); }
.cnc-archead__what p { font-size: var(--t-small); color: var(--c-text-muted); line-height: 1.5; margin: 0; }
.cnc-archead__what strong { color: var(--c-ink); }


/* ── 14.2 BREADCRUMB (spec §12.2) ───────────────────────────────────────── */
.cnc-crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3);
  font-size: var(--t-small); color: var(--c-text-muted); margin-bottom: var(--s-6);
}
.cnc-crumbs a { color: var(--c-text-muted); text-decoration: none; }
.cnc-crumbs a:hover { color: var(--track-accent); text-decoration: underline; }
.cnc-crumbs [aria-current] { color: var(--c-ink); font-weight: 700; }
.cnc-crumbs__sep { display: inline-flex; align-items: center; color: var(--c-text-faint); }
.cnc-crumbs__sep svg { width: 14px; height: 14px; }

/* 🔴 Sub 560px rămâne O SINGURĂ verigă: părintele direct, prefixat cu „‹".
   Pe mobil singura treabă a breadcrumb-ului e „înapoi cu un nivel" —
   orientarea o dau deja titlul și badge-ul de pistă, iar calea completă poate
   avea 4 verigi („Acasă › Caut să cumpăr › Auto, moto și ambarcațiuni ›
   Autoturisme"), adică două rânduri înaintea titlului.

   ⚠️ ERATĂ FAȚĂ DE PROTOTIP. Prototipul selecta veriga prin `[data-crumbl1]`
      și trata absența cu `:has(> a[data-crumbl1][hidden])`. Selectorul acela
      (0,2,1) bate `[hidden] { display:none !important }` (0,1,0), deci sub
      560px REAPĂREA exact veriga marcată ca absentă. Aici verigile inexistente
      nici nu se tipăresc (vezi `cnc_archive_crumbs()`), deci „ultimul link" e
      întotdeauna părintele direct — pe rădăcină, „Acasă". Fără `[hidden]`,
      fără `:has()`, fără atribute de slot. */
@media (max-width: 560px) {
  .cnc-crumbs { flex-wrap: nowrap; }
  .cnc-crumbs > * { display: none; }
  .cnc-crumbs > a:last-of-type { display: inline-flex; align-items: center; gap: var(--s-3); }
  .cnc-crumbs > a:last-of-type::before { content: '‹'; font-size: 1.1em; line-height: 1; }
}


/* ── 14.3 NAVIGAȚIA ÎNTRE ARHIVE (spec §12.7c, Decizia 5a) ──────────────
 * De pe o arhivă nu exista NICIUN drum către alta: utilizatorul trebuia să se
 * întoarcă pe homepage, deși acolo tocmai văzuse cele patru intenții.
 * ------------------------------------------------------------------------- */
.cnc-arcnav { border-bottom: 1px solid var(--c-border); background: var(--c-surface); }
.cnc-arcnav__in { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; padding: var(--s-6) 0; }
.cnc-arcnav__lbl { font-size: var(--t-small); font-weight: 700; color: var(--c-text-muted); }
.cnc-arcnav .cnc-intentpills { display: flex; gap: var(--s-4); flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }

/* 🔴 MODIFICATOR DECLARAT, nu refolosire tăcută: P2 desenează `.cnc-intentpill`
   ca `<label>` + `<input type="radio">` — un control de scop, cu `:checked`.
   Aici e NAVIGAȚIE: un `<a>` cu `aria-current="page"`. Aceeași formă, alt
   element, altă stare. */
.cnc-intentpill--link {
  display: inline-flex; align-items: center; gap: var(--s-4); min-height: 44px; padding: 0 var(--s-6);
  border-radius: var(--r-pill); border: 1px solid var(--c-border-strong); background: var(--c-surface);
  font-size: var(--t-small); font-weight: 600; color: var(--c-ink); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.cnc-intentpill--link svg { color: var(--c-emerald); }
.cnc-intentpill--link:hover { border-color: var(--c-emerald); background: var(--c-emerald-50); color: var(--c-emerald-700); }
.cnc-intentpill--link[aria-current="page"] {
  background: var(--c-emerald); border-color: var(--c-emerald); color: var(--c-on-accent); font-weight: 700;
}
.cnc-intentpill--link[aria-current="page"] svg { color: var(--c-on-accent); }

/* A cincea arhivă e pista OPUSĂ: separată, aurie, niciodată în același rând
   cromatic. Un rând care le amestecă ar sparge exact mandatul dual-track. */
.cnc-arcnav__sell {
  display: inline-flex; align-items: center; gap: var(--s-4); min-height: 44px; padding: 0 var(--s-6);
  margin-left: auto; border-radius: var(--r-pill); text-decoration: none;
  border: 1px solid var(--c-gold-100); background: var(--c-gold-50); color: var(--c-gold-700);
  font-size: var(--t-small); font-weight: 700;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.cnc-arcnav__sell:hover { border-color: var(--c-gold); color: var(--c-gold-700); }
.cnc-arcnav__sell[aria-current="page"] { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-ink); }

/* 🔴 La 390px, patru pastile + eticheta + linkul auriu ocupau 217px pe
   verticală — un sfert de ecran ÎNAINTE de primul rezultat, adică exact
   reproșul adus sidebar-ului de filtre. Devine un rând derulabil orizontal,
   iar linkul auriu rămâne LIPIT de marginea dreaptă (`sticky`), ca vânzătorul
   să-l vadă fără să deruleze. Separarea cromatică se păstrează printr-o
   umbră-muchie, nu printr-un rând nou. */
@media (max-width: 640px) {
  .cnc-arcnav__in { flex-wrap: nowrap; overflow-x: auto; gap: var(--s-4); padding-block: var(--s-5); scrollbar-width: none; }
  .cnc-arcnav__in::-webkit-scrollbar { display: none; }
  .cnc-arcnav__lbl { flex: 0 0 auto; }
  .cnc-arcnav .cnc-intentpills { flex-wrap: nowrap; }
  .cnc-intentpill--link { white-space: nowrap; }
  .cnc-arcnav__sell {
    margin-left: var(--s-6); flex: 0 0 auto; white-space: nowrap;
    position: sticky; right: 0; box-shadow: -8px 0 12px -6px rgba(21,32,27,.18);
  }
}


/* ── 14.4 BARA DE ACȚIUNI (spec §12.3, §12.4) ───────────────────────────
 * Sticky, cu contor live (`aria-live`), sortare și butonul de filtre.
 * `top: 0`: tema NU are header sticky pe arhive (verificat în opțiunile Redux),
 * deci nu există o bandă fixă sub care bara ar trebui să se așeze.
 * ------------------------------------------------------------------------- */
.cnc-toolbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--c-bg); border-bottom: 1px solid var(--c-border);
  padding-block: var(--s-5); margin-bottom: var(--s-8);
}
.cnc-toolbar__in { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.cnc-toolbar__count {
  font-size: var(--t-small); font-weight: 700; color: var(--c-ink);
  font-variant-numeric: tabular-nums; margin: 0 auto 0 0;
}
.cnc-toolbar__count span { color: var(--c-text-muted); font-weight: 500; }
.cnc-toolbar__sort { display: flex; align-items: center; gap: var(--s-4); }
/* Eticheta „Sortează" e vizibilă doar de la 900px: sub el, bara are deja trei
   elemente pe două rânduri, iar un al patrulea cuvânt împinge selectul pe al
   treilea. Legătura `for`/`id` rămâne, deci cititoarele de ecran o citesc oricum. */
.cnc-toolbar__sort .cnc-field__label { display: none; }
@media (min-width: 900px) {
  .cnc-toolbar__sort .cnc-field__label { display: inline; white-space: nowrap; color: var(--c-text-muted); }
}
/* 🔴 DOUĂ rânduri pe mobil, nu trei. Măsurat la 390px: contorul („13 rezultate ·
   pagina 1 din 2", ~250px) + „Filtrează" (130px) depășeau cei 358px utili, deci
   fiecare element cădea pe rândul lui — 200px de bară înaintea primului card,
   exact costul pe care planșa îl reproșa sidebar-ului. Contorul ia un rând
   întreg, butonul și sortarea îl împart pe al doilea. */
@media (max-width: 640px) {
  body.cnc-archive .cnc-toolbar .cnc-toolbar__count { flex: 1 0 100%; margin: 0; }
  /* `flex: 1 1 0`, NU `auto`: cu bază automată, containerul de sortare își cere
     lățimea de max-content a celei mai lungi opțiuni („Cele mai puțin
     vizualizate", ~250px), deci butonul + sortarea cereau 392px pe un rând de
     360 și cădeau una sub alta. Cu baza 0 împart rândul, oricât ar fi textul. */
  body.cnc-archive .cnc-toolbar .cnc-toolbar__sort { flex: 1 1 0; min-width: 0; }
}

/* Butonul de filtre: vizibil doar sub 1024px, unde sidebar-ul devine foaie. */
.cnc-filterbtn { position: relative; }
.cnc-filterbtn .cnc-count {
  position: absolute; top: calc(var(--s-3) * -1); right: calc(var(--s-3) * -1);
  background: var(--track-accent-strong); color: var(--track-on-accent);
}
@media (min-width: 1024px) { .cnc-filterbtn { display: none; } }


/* ── 14.5 FILTRE ACTIVE (spec §12.5) ────────────────────────────────────
 * P1 are chip-ul; nu are LISTA lui cu semantică de filtru. Cerința de
 * accesibilitate („filtrele active trebuie citibile ca listă, nu doar
 * colorate") o face o componentă cu contract propriu.
 * ------------------------------------------------------------------------- */
.cnc-activefilters { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-7); }
.cnc-activefilters__label { font-size: var(--t-small); font-weight: 700; color: var(--c-text-muted); }
/* `display:contents` — lista rămâne `<ul>` pentru cititoarele de ecran, dar
   chips-urile participă direct la flex-ul părintelui, deci se înfășoară
   individual în loc să formeze un bloc rigid. */
.cnc-activefilters__list { display: contents; list-style: none; margin: 0; padding: 0; }
.cnc-activefilters__clear {
  border: none; background: none; cursor: pointer; font-family: inherit; text-decoration: none;
  font-size: var(--t-small); font-weight: 700; color: var(--c-emerald-700);
  min-height: 36px; padding: 0 var(--s-4); border-radius: var(--r-pill);
  display: inline-flex; align-items: center;
  transition: background var(--dur-fast) var(--ease-standard);
}
.cnc-activefilters__clear:hover { background: var(--c-emerald-50); color: var(--c-emerald-700); }


/* ── 14.6 LAYOUT: SIDEBAR + REZULTATE (spec §12.6) ──────────────────────
 * Primul layout cu coloană laterală din sistem — P1/P2 sunt pe o coloană.
 * ------------------------------------------------------------------------- */
.cnc-layout { display: grid; gap: var(--s-9); grid-template-columns: minmax(0, 1fr); align-items: start; padding-bottom: var(--s-12); }
.cnc-results { min-width: 0; }

/* 🔴 SIDEBAR-UL E VIZIBIL ȘI PE MOBIL. Prima variantă îl ascundea sub 1024px
   și îl reafișa doar în starea „fără filtre" — ceea ce lăsa cutia de abonare
   INACCESIBILĂ pe mobil exact pe cele 4 arhive care AU filtre, adică pe
   controlul promovat la acțiune principală. Un singur regim, deci nicio stare
   nu îl poate ascunde: doar PANOUL de filtre pleacă de aici, în foaie. */
.cnc-side { display: block; min-width: 0; }
.cnc-side__stack { display: flex; flex-direction: column; gap: var(--s-6); }
.cnc-side__panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--s-7); }
.cnc-side__title { font-size: var(--t-body); font-weight: 800; margin: 0 0 var(--s-6); display: flex; align-items: center; gap: var(--s-4); }
.cnc-side__title svg { color: var(--track-accent); }

/* Selectorul e DESCENDENT, nu de element: când JS-ul mută `#filters-host` în
   foaie, regula nu se mai potrivește și panoul devine vizibil acolo. Un singur
   nod, o singură regulă, zero ramificare pe stare. */
@media (max-width: 1023px) { .cnc-side #filters-host { display: none; } }
@media (min-width: 1024px) {
  .cnc-layout { grid-template-columns: 288px minmax(0, 1fr); gap: var(--s-10); }
  .cnc-side { position: sticky; top: var(--s-13); }
}
/* În sidebar (288px) panoul de filtre e o COLOANĂ, nu grila de 3 din P2.
   🔴 Lanțul trebuie să bată `body.cnc :is(.cnc-advpanel, .cnc-filterpanel)
      .caut-dropdown-row` din §13.6, care în `@media (min-width:1024px)` cere
      trei coloane — exact pragul de la care apare sidebar-ul. Măsurat înainte
      de corectură: trei selecturi de 74px, cu etichetele tăiate la „- S", „Ju",
      „Lo". Selectorul de aici are aceleași trei clase PLUS `.cnc-side`, deci
      câștigă la orice lățime. */
body.cnc .cnc-side .cnc-filterpanel .caut-dropdown-row { grid-template-columns: minmax(0, 1fr); }


/* ── 14.7 SLOTUL DE FILTRE EXTRA (spec §12.8, §11.1) ────────────────────
 * `#caut-dd-extras` e gol pe TOATE arhivele (patru cauze suprapuse, C17), dar
 * rămâne în DOM: conținutul lui e proprietatea JS-ului mu-pluginului.
 * `:empty` îl face invizibil fără să-l atingem.
 * ------------------------------------------------------------------------- */
.cnc-extraslot { display: block; }
.cnc-extraslot:empty { display: none; }


/* ── 14.8 CUTIA DE ABONARE (spec §12.7, §4.5.1) ─────────────────────────
 * Cea mai apropiată de `.cnc-banner--info` din P1, dar are altă funcție
 * (acțiune, nu informare), altă anatomie și stare (`.is-subscribed`).
 * ------------------------------------------------------------------------- */
.cnc-subbox {
  background: var(--track-tint); border: 1px solid var(--track-border);
  border-radius: var(--r-md); padding: var(--s-7); text-align: left;
}
.cnc-subbox__ico {
  width: 40px; height: 40px; border-radius: var(--r-sm); margin-bottom: var(--s-5);
  background: var(--c-surface); border: 1px solid var(--track-border); color: var(--track-accent);
  display: flex; align-items: center; justify-content: center;
}
.cnc-subbox__t { font-size: var(--t-body); font-weight: 800; margin: 0 0 var(--s-4); }
.cnc-subbox__hint { font-size: var(--t-small); color: var(--c-text-muted); line-height: 1.5; margin: 0 0 var(--s-6); max-width: none; }
.cnc-subbox__btn.is-subscribed {
  background: var(--c-surface); color: var(--track-accent);
  border-color: var(--track-border); box-shadow: none;
}
/* 🔴 Ramura deconectată e un `<a>`, nu un `<button>` — deci NU primește
   `aria-pressed` și nu comută. Pe o platformă unde vânzătorul aterizează din
   Google, asta e starea FRECVENTĂ, nu excepția (spec §4.5.1). */
.cnc-subbox__login {
  display: flex; align-items: center; justify-content: center; gap: var(--s-4);
  min-height: 44px; padding: 0 var(--s-6); border-radius: var(--r-pill); text-decoration: none;
  border: 1px solid var(--track-border); background: var(--c-surface);
  color: var(--track-accent); font-size: var(--t-small); font-weight: 700; text-align: center;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.cnc-subbox__login:hover { background: var(--track-tint); border-color: var(--track-accent); color: var(--track-accent); }
/* În starea goală cutia e ACȚIUNEA PRINCIPALĂ, deci se centrează cu restul. */
.cnc-subbox--empty { max-width: 44ch; margin: 0 auto var(--s-7); }


/* ── 14.9 NOTA „FĂRĂ FILTRE" (spec §12.7b, §4.8) ────────────────────────
 * Nu e `.cnc-banner--info`: acela e o alertă în interiorul unui panou, aceasta
 * e o STARE STRUCTURALĂ a paginii, în fluxul rezultatelor. Un sidebar aproape
 * gol fără explicație arată rupt; cu o frază arată intenționat.
 * ------------------------------------------------------------------------- */
.cnc-nofilters {
  display: flex; gap: var(--s-5); align-items: flex-start;
  background: var(--c-surface); border: 1px solid var(--track-border);
  border-radius: var(--r-md); padding: var(--s-6) var(--s-7); margin-bottom: var(--s-7);
  font-size: var(--t-small); line-height: 1.5; color: var(--c-text-muted);
}
.cnc-nofilters svg { flex: 0 0 auto; color: var(--track-accent); margin-top: 1px; }
.cnc-nofilters p { margin: 0; }
.cnc-nofilters strong { color: var(--c-ink); }
/* Aceeași componentă, alt MOMENT: `.cnc-nofilters` explică ABSENȚA filtrelor,
   `.cnc-thin` avertizează ÎNAINTE de a le folosi, pe arhiva cu filtre vii și
   conținut aproape zero (15: o singură cerere, 4 din 5 ramuri goale). */
.cnc-thin { background: var(--c-warning-50); border-color: var(--c-gold-100); }
.cnc-thin svg { color: var(--c-warning); }


/* ── 14.10 MINIATURA CU SPAȚIU REZERVAT (spec §12.8, §7) ────────────────
 * Prima componentă din sistem care tratează imagini reale. Ambele variante
 * coexistă în nod, iar clasa alege — cardul comută între imagine și placă
 * fără să rescrie markup.
 * ------------------------------------------------------------------------- */
.cnc-thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-bg-alt); }
.cnc-thumb__none {
  position: absolute; inset: 0; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--s-4);
  background: var(--track-tint); color: var(--track-accent);
}
.cnc-thumb__none span { font-size: var(--t-xsmall); font-weight: 700; color: var(--track-accent); }
.cnc-thumb--none .cnc-thumb__none { display: flex; }


/* ── 14.11 MODIFICATOARE PE COMPONENTE P1 (spec §12.9) ──────────────────
 * Sunt modificatoare, nu rescrieri: nicio regulă `.cnc-card {` sau
 * `.cnc-badge {` nu se redefinește aici.
 * ------------------------------------------------------------------------- */
.cnc-card--promoted { border-color: var(--c-gold-100); background: var(--c-gold-50); }
.cnc-card--promoted .cnc-card__body { background: var(--c-surface); }
.cnc-badge--promoted { background: var(--c-gold-50); border-color: var(--c-gold-100); color: var(--c-gold-700); }
/* ⚠️ `.cnc-badge--closed` NU se redefinește aici: există din P1 (§4). O a doua
   declarație ar fi fost exact capcana §6.7 — două planșe care își bat aceeași
   clasă, fără niciun avertisment de la CSS. Prins de validatorul de duplicate. */


/* ── 14.12 PAGINAREA (spec §12.8, §4.7) ─────────────────────────────────── */
.cnc-pager { display: flex; align-items: center; justify-content: center; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-10); }
.cnc-pager__n, .cnc-pager__arrow {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-4);
  min-width: 44px; min-height: 44px; padding: 0 var(--s-5);
  border-radius: var(--r-sm); border: 1px solid var(--c-border-strong);
  background: var(--c-surface); color: var(--c-ink); text-decoration: none;
  font-size: var(--t-small); font-weight: 700; font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.cnc-pager__n:hover, .cnc-pager__arrow:hover { border-color: var(--track-accent); background: var(--track-tint); color: var(--c-ink); }
.cnc-pager__n[aria-current] { background: var(--track-accent-strong); border-color: var(--track-accent-strong); color: var(--track-on-accent); }
.cnc-pager__arrow[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.cnc-pager__gap { display: inline-flex; align-items: center; padding: 0 var(--s-3); color: var(--c-text-muted); }
.cnc-pager__info {
  width: 100%; text-align: center; font-size: var(--t-small);
  color: var(--c-text-muted); margin: var(--s-4) 0 0; font-variant-numeric: tabular-nums;
}


/* ── 14.13 STĂRILE GOALE — variantele P3 (spec §7) ──────────────────────
 * Pe cinecum GOLUL E CAZUL FRECVENT: 81 de anunțuri pe 5 arhive și un arbore
 * de 3 niveluri, cu volume în SCĂDERE. De aceea are trei tratări, nu una.
 * ------------------------------------------------------------------------- */
.cnc-empty h3 { font-size: var(--t-h4); margin: 0 0 var(--s-4); }
.cnc-empty__acts { display: flex; gap: var(--s-5); justify-content: center; flex-wrap: wrap; }
.cnc-empty__chips { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-7); }
/* Varianta „filtre prea înguste" e aliniată la stânga: conține o listă de
   filtre pe care utilizatorul trebuie s-o CITEASCĂ, nu un mesaj de citit dintr-o
   privire. Centrarea face listele greu de parcurs. */
.cnc-empty--filters { text-align: left; }
.cnc-empty--filters .cnc-empty__art { margin-inline: 0; }
.cnc-empty--filters p { margin-inline: 0; }
.cnc-empty--filters .cnc-empty__acts { justify-content: flex-start; }
.cnc-empty--filters .cnc-empty__chips { justify-content: flex-start; }


/* ═══════════════════════════════════════════════════════════════════════════
 * §15 SKIN ARHIVĂ — Mod B, peste tema și pluginul existente
 *
 * Sursa: P3-lista-anunturi-spec.md §2 (tabelul de ancore), §4.1–§4.8.
 *
 * ┌─ SPECIFICITATE ─────────────────────────────────────────────────────────┐
 * │ Aceeași situație ca la §13: tema își scrie regulile de arhivă ca         │
 * │ `#content .rtcl-listings…` și `#content .listing-grid-each…` — deci un   │
 * │ `#id`. Regulile de mai jos păstrează `#content` în lanț și adaugă        │
 * │ `body.cnc`. Pentru mu-pluginuri (CSS tipărit în FOOTER, deci mereu după  │
 * │ al nostru) ordinea nu ajută deloc — acolo e nevoie de ≥ 2 clase, iar     │
 * │ skin-ul lui `[caut_dropdown]` e deja scris o dată în §13.6 și refolosit  │
 * │ prin `:is(.cnc-advpanel, .cnc-filterpanel)`.                             │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * 🔴 CE NU SE ATINGE (lista neagră): `.rtin-*`, `.rtcl-*`, `.caut-*`, `.cc-*`
 *    se ÎMBRACĂ. `.rtcl-view-switcher` se ascunde, NU se scoate din DOM —
 *    `data-type="grid|list"` și `?view=` rămân funcționale pentru cine ajunge
 *    pe URL direct. `#caut-dd-level2` / `#caut-dd-level3` au `display:none`
 *    INLINE, comutat de jQuery: nicio regulă de aici nu le forțează.
 * ═════════════════════════════════════════════════════════════════════════ */


/* ── 15.1 PAGINA ────────────────────────────────────────────────────────── */
/* Bara de căutare a temei rămâne (e singura suprafață de căutare de pe desktop),
   dar pierde muchia grea de sub ea: acum urmează antetul nostru, care are
   propria linie de pistă. */
body.cnc-archive .banner-search { background: var(--c-bg); border-bottom: 0; padding-bottom: 0; }
body.cnc-archive #primary.classima-listing-archive { padding-top: 0; }
/* Antetul, navigația între arhive și bara sticky sunt benzi pe toată lățimea;
   containerul Bootstrap din interior le ține conținutul aliniat cu restul. */
body.cnc-archive .cnc-archead > .container,
body.cnc-archive .cnc-arcnav > .container,
body.cnc-archive .cnc-toolbar > .container { max-width: var(--w-page); }

/* Decizia #2 din spec §4.3 — comutatorul grid/listă e ASCUNS, nu șters.
   Regulă CSS reversibilă; ștergerea din template ar fi fost un T2 inutil.
   ⚠️ Lanțul are PATRU clase + un tip fiindcă elementul e ținta a două reguli
   concurente, măsurate în browser, nu presupuse:
     · `.rtcl .rtcl-listings-actions .rtcl-view-switcher` (0,3,0), tipărită
       DUPĂ foaia noastră — deci la specificitate egală câștiga ea;
     · `.site-content .listing-archive-top .listing-sorting .rtcl-view-switcher`
       (0,4,0), din tema însăși — pe care nici ordinea n-o putea depăși.
   Prima încercare, la trei clase, lăsa comutatorul vizibil (`display` calculat:
   `inline-block`). */
body.cnc-archive .cnc-toolbar .listing-sorting .rtcl-view-switcher { display: none; }
/* Bara de acțiuni a temei devine `.cnc-toolbar`; regulile ei de flex ar
   suprascrie layoutul nostru la specificitate egală. */
body.cnc-archive .cnc-toolbar.listing-archive-top { display: block; border-top: 0; }
body.cnc-archive .cnc-toolbar .listing-sorting { margin: 0; display: flex; align-items: center; gap: var(--s-4); }


/* ── 15.2 CARDUL — ce s-a adăugat la pasul 3 ────────────────────────────
 * Restul cardului e §13.1, scris la pasul 4 și nemodificat. Aici sunt DOAR
 * cele patru sloturi noi din markup-ul restructurat (meta pe un rând, preț,
 * localitate, CTA) plus stările de promovare.
 * ------------------------------------------------------------------------- */

/* 🔴 CAPCANĂ MĂSURATĂ (18.08) — `margin: 0 auto` ANULEAZĂ `justify-self: stretch`.
   Tema pune `#content .listing-grid-each { margin: 0 auto }` sub 767.98px (o
   rămășiță din layoutul pe float). Într-o grilă CSS, marginile `auto` pe axa
   inline absorb spațiul liber, iar cutia NU se mai întinde pe coloană: se
   dimensionează la fit-content. Măsurat la 390px: coloană de 370px, card de
   283px, centrat, cu 87px de gol în jur — arăta ca o eroare de grilă, dar
   grila era corectă. Nicio eroare, nicio depășire, doar un card mai mic.
   `max-width` cade odată cu ea: 400px ar fi plafonat cardul pe ecrane late. */
body.cnc #content .listing-grid-each-9.cnc-card { margin-inline: 0; max-width: none; }

/* 🔴 `margin: auto 0 0` era pe META, la pasul 4: atunci meta era ultimul
   element din card, deci ea trebuia împinsă la bază. Acum sub ea vin prețul,
   localitatea și CTA-ul — dacă rămânea, ar fi împins TOT blocul de jos într-o
   poziție diferită pe fiecare card, iar rândurile nu s-ar mai fi aliniat.
   Marginea automată se mută pe CTA, singurul element prezent pe orice card. */
body.cnc #content .listing-grid-each-9.cnc-card .rtin-item .rtin-content .rtin-meta {
  margin: 0; padding: var(--s-3) 0 0;
}
body.cnc #content .listing-grid-each-9.cnc-card .rtin-item .rtin-content .rtin-meta li svg { opacity: 1; color: var(--c-text-faint); }

/* Prețul: chipul auriu din P1, al CINCILEA semnal al pistei — și singurul care
   apare EXCLUSIV pe ofertă. Pe cerere elementul nici nu se randează (template),
   iar regulile de mai jos rămân ca plasă de siguranță pentru markup vechi din
   cache sau pentru un card randat prin AJAX de o versiune anterioară. */
body.cnc #content .listing-grid-each-9.cnc-card .rtin-item .rtin-price.cnc-card__price { margin: var(--s-4) 0 0; }
body.cnc #content .listing-grid-each-9.cnc-card[data-track="cerere"] .cnc-card__price { display: none; }
body.cnc #content .listing-grid-each-9.cnc-card .cnc-card__price:empty { display: none; }

/* 🔴 CONSTATARE C19 (18.08) — PREȚUL E REDESENAT DIN JS, DE PLUGINUL DE
   MASCARE. `rtcl-offers.php:1812-1861` tipărește în footer un script care
   caută `.rtin-price` (printre altele) și îi ÎNLOCUIEȘTE `innerHTML` cu
   `<span class="rtcl-price-main">3.300&nbsp;lei</span>`, apoi repetă operația
   la `DOMContentLoaded`, la `load`, la evenimentul `tp_on_load` al
   TranslatePress și într-un `setInterval` de 20 de încercări.

   Consecința directă: chipul `.cnc-price` randat de noi în template EXISTĂ în
   HTML-ul livrat de server, dar DISPARE din DOM la câteva sute de milisecunde
   după afișare. O regulă scrisă doar pe `.cnc-price` ar fi trecut orice
   verificare pe sursa paginii și ar fi eșuat în browser.

   🔴 `rtcl-offers.php` NU se modifică — acolo trăiește mascarea telefonului
      (art. 2.14, `05` §5.4). Deci nu îi luăm scriptul, ci îi îmbrăcăm
      rezultatul: chipul se aplică pe COPILUL slotului, oricare ar fi el
      (`.cnc-price` înainte de script, `.rtcl-price-main` după).

   ⚠️ Specificitatea trebuie să bată `.rtcl-grid-view .rtcl-price-main` din
      CSS-ul aceluiași plugin — tipărit tot în footer, deci mereu după al
      nostru — care impune verdele `#16a34a`, o culoare din afara paletei. */
body.cnc #content .listing-grid-each-9.cnc-card .cnc-card__price > span {
  display: inline-flex; align-items: center;
  font-size: var(--t-body); font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--c-gold); color: var(--c-ink);          /* ink pe auriu = 9:1 */
  border: 0; border-radius: var(--r-sm); padding: 5px 12px; margin: 0;
}
/* Chipul intern al temei (`span.rtcl-price-amount`, §13.1) apare doar în
   fereastra dinaintea scriptului; neutralizat, ca să nu fie cutie în cutie. */
body.cnc #content .listing-grid-each-9.cnc-card .cnc-card__price .rtcl-price,
body.cnc #content .listing-grid-each-9.cnc-card .cnc-card__price span.rtcl-price-amount,
body.cnc #content .listing-grid-each-9.cnc-card .cnc-card__price .rtcl-price-currencySymbol {
  background: none; border: 0; padding: 0; margin: 0; color: inherit;
  font: inherit; font-variant-numeric: tabular-nums; display: inline;
}
/* Unitatea („/ lună"), când există, rămâne secundară — nu intră în chip. */
body.cnc #content .listing-grid-each-9.cnc-card .cnc-card__price > span.rtcl-price-unit {
  background: none; padding: 0; margin-left: var(--s-4);
  font-size: var(--t-small); font-weight: 500; color: var(--c-text-muted);
}

/* Localitatea: iese din lista de meta și primește slot propriu, cu pictogramă.
   E informația pe care un vânzător o citește prima — „e în județul meu?". */
body.cnc #content .listing-grid-each-9.cnc-card .cnc-card__foot {
  display: flex; align-items: center; gap: var(--s-4);
  padding-top: var(--s-4); font-size: var(--t-small); color: var(--c-text-muted);
  min-width: 0;
}
body.cnc #content .listing-grid-each-9.cnc-card .cnc-card__foot svg { color: var(--track-accent); }
body.cnc #content .listing-grid-each-9.cnc-card .cnc-card__foot span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.cnc #content .listing-grid-each-9.cnc-card .cnc-card__foot a { color: inherit; text-decoration: none; }

/* CTA-ul: verbul paginii. `margin-top:auto` îl lipește de bază, deci rândurile
   rămân aliniate chiar dacă un card n-are preț sau localitate. */
body.cnc #content .listing-grid-each-9.cnc-card .cnc-card__cta { margin-top: auto; padding-top: var(--s-6); }
/* 🔴 Pe mobil CTA-ul urcă de la 36px (`--sm`, cum e în planșă) la 44px: e
   ACȚIUNEA principală a cardului și singura de pe suprafața de atingere, iar
   `06` §7.3 cere ținte de minimum 44×44. Pe desktop rămâne cel din planșă —
   acolo ținta e cursorul, nu degetul. */
@media (max-width: 767px) {
  body.cnc #content .listing-grid-each-9.cnc-card .cnc-card__cta .cnc-btn { --btn-h: 44px; }
}

/* Butonul de favorite: pluginul randează un `<a>` de 19×21px în interiorul
   cutiei noastre de 34px — măsurat, nu presupus. Linkul se întinde pe toată
   cutia, iar cutia urcă la 44px pe mobil: altfel ținta reală rămâne sub prag,
   oricât de mare ar arăta butonul. */
/* `position:absolute; inset:0`, NU `width/height:100%` — prima încercare a dat
   tot 20×32px: `.rtcl-btn` e container flex (§13.1), iar un item de flex cu
   `width:100%` se poate strânge la min-content, ceea ce s-a și întâmplat.
   Poziționarea absolută nu depinde de algoritmul de flex. */
body.cnc #content .listing-grid-each-9.cnc-card .rtcl-meta-buttons .rtcl-btn { position: relative; }
body.cnc #content .listing-grid-each-9.cnc-card .rtcl-meta-buttons .rtcl-btn > a {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; color: inherit;
}
@media (max-width: 767px) {
  body.cnc #content .listing-grid-each-9.cnc-card .rtin-thumb .rtcl-meta-buttons .rtcl-btn,
  body.cnc #content .listing-grid-each-9.cnc-card .rtin-thumb .rtcl-meta-buttons .rtcl-favourites {
    width: 44px; height: 44px;
  }
}

/* Promovate: etichetă textuală + tentă discretă, în ACELAȘI flux — nu o
   secțiune separată. 🔴 Cele trei clase de stare stau pe wrapperul EXTERIOR
   (`.listing-grid-each`), nu pe `.rtin-item`; wrapperul e chiar `.cnc-card`. */
body.cnc #content .listing-grid-each-9.cnc-card.rtin-top,
body.cnc #content .listing-grid-each-9.cnc-card.featured-listing {
  border-color: var(--c-gold-100); background: var(--c-gold-50);
}
body.cnc #content .listing-grid-each-9.cnc-card.rtin-top .rtin-content,
body.cnc #content .listing-grid-each-9.cnc-card.featured-listing .rtin-content { background: var(--c-surface); }
/* `.is-sold` apare doar pe arhiva 22 (o cerere nu se „vinde"). */
body.cnc #content .listing-grid-each-9.cnc-card.is-sold { opacity: .72; }
body.cnc #content .listing-grid-each-9.cnc-card.is-sold .cnc-card__cta { display: none; }


/* ── 15.3 GRILA DE REZULTATE ────────────────────────────────────────────
 * 🔴 Containerul real e `div.rtcl-listings.rtcl-grid-view.columns-3…`, cu
 *    coloanele definite de plugin la pragurile 991/500px și reguli la
 *    specificitate de ID (`#content .rtcl-listings…`). Clasele noastre se
 *    ADAUGĂ pe același element (`listing_loop_start_class`), deci selectorul
 *    de mai jos are 1 id + 4 clase și bate ambele surse fără `!important`.
 *
 * 🔴 `minmax(0, 1fr)`, NU `1fr` — lecția C7 de la homepage: pistele `1fr` sunt
 *    `minmax(auto, 1fr)`, iar minimul `auto` e min-content-ul cardului, care
 *    include `<img width="400">`. La 360px cardul forța 416px și ieșea din
 *    ecran, clipat tăcut de `#page { overflow-x:hidden }`.
 *
 * 🔴 `auto-fill`, NU praguri de viewport — CORECTURĂ MĂSURATĂ (18.08).
 *    Planșa cerea 1 / 2 / 3 / 4 coloane la 360 / 560 / 900 / 1200px. Pe
 *    homepage funcționează, fiindcă grila ocupă toată lățimea. Pe arhivă NU:
 *    sidebar-ul ia 288px + 40px gutter, deci la un viewport de 1440px coloana
 *    de rezultate are 877px. Cu regula de la 1200px, măsurat în browser:
 *    PATRU carduri de 207px — sub pragul la care titlul pe două rânduri și
 *    butonul „Trimite o ofertă" mai încap fără să se rupă.
 *
 *    Un al treilea rând de praguri (1400? 1700?) ar fi fost o ghicitoare
 *    despre lățimea sidebar-ului, refăcută la fiecare schimbare de layout.
 *    `auto-fill` + `minmax(230px, 1fr)` măsoară SPAȚIUL REAL al coloanei, nu
 *    ecranul: 877px → 3 · 640px → 2 · 330px → 1. Aceleași numere ca în planșă
 *    la aceleași lățimi utile, dar fără nicio presupunere.
 *
 * ⚠️ 230px e minimul la care cardul rămâne întreg (miniatură 4:3, titlu pe 2
 *    rânduri, meta, CTA de 44px). Sub el nu se strânge: trece la o coloană.
 * ------------------------------------------------------------------------- */
body.cnc #content .rtcl-listings.rtcl-grid-view.cnc-grid--cards {
  display: grid; gap: var(--s-6);
  grid-column-gap: var(--s-6); grid-row-gap: var(--s-6);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
/* Sub 380px, `minmax(230px, …)` ar mai încăpea o dată pe un ecran de 480px în
   landscape; forțăm o coloană, ca miniatura să nu devină o dungă. */
@media (max-width: 380px) {
  body.cnc #content .rtcl-listings.rtcl-grid-view.cnc-grid--cards { grid-template-columns: minmax(0, 1fr); }
}
/* Starea goală ocupă toată lățimea grilei, oricâte coloane ar avea. */
body.cnc #content .rtcl-listings.cnc-grid--cards.no-listing-found { grid-template-columns: minmax(0, 1fr); }
body.cnc #content .rtcl-listings.cnc-grid--cards > .cnc-empty { grid-column: 1 / -1; }
/* `content-visibility` — indiciu de performanță (context pack §F.3).
   900px e o estimare de înălțime pentru scrollbar, nu o valoare de design. */
body.cnc .cnc-results__grid { content-visibility: auto; contain-intrinsic-size: auto 900px; }


/* ── 15.4 SIDEBAR-UL ȘI WIDGETURILE DIN EL ──────────────────────────────
 * Zona `sidebar-archive-listing` conține un singur widget vizibil: blocul cu
 * cele patru `[cc-if-cat]`. Wrapperul lui de widget nu mai are ce desena —
 * panoul din jur e al nostru.
 * ------------------------------------------------------------------------- */
body.cnc-archive .cnc-side .widget {
  margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
}
body.cnc-archive .cnc-side .widget .widget-title,
body.cnc-archive .cnc-side .widget h2.widget-title { display: none; }
/* 🔴 `wpautop` peste conținutul widgetului de blocuri lasă TREI `<p>` goale, un
   `<p><br></p>` și un `<br>` liber între cele patru `[cc-if-cat]` — trei dintre
   ele au înălțime 0, dar două însumează 49px de gol între titlul panoului și
   primul select. Măsurat în DOM, nu presupus. Conținutul widgetului rămâne
   NEATINS: doar nodurile goale se ascund. */
body.cnc-archive .cnc-side .widget > p:empty,
body.cnc-archive .cnc-side .widget > p:has(> br:only-child),
body.cnc-archive .cnc-side .widget > br { display: none; }
/* Eticheta shortcode-ului („Oferte piese auto" — cuvântul CELEILALTE piste, pe
   patru arhive de cereri) e ascunsă, nu ștearsă: titlul corect îl dă panoul,
   din tabelul canonic. Corectura în widget rămâne cerută clientului (spec §9.2),
   fiindcă textul se vede și în alte contexte. */
body.cnc-archive .cnc-side .caut-dropdown-label { display: none; }


/* ── 15.5 FOAIA DE FILTRE PE MOBIL (spec §4.6) ──────────────────────────
 * 🔴 ACELAȘI NOD, MUTAT. `#filters-host` intră aici prin `appendChild` și se
 *    întoarce la închidere. Clonarea ar duplica cele 9 ID-uri `#caut-dd-*`,
 *    iar `caut-dropdown.js` (legat la `DOMContentLoaded`) ar rămâne pe nodul
 *    greșit — filtrarea ar muri fără nicio eroare în consolă.
 * ------------------------------------------------------------------------- */
body.cnc .cnc-sheet__body .cnc-side__panel {
  border: 0; padding: 0; background: none; display: block;
}
body.cnc .cnc-sheet__body .cnc-side__title { display: none; }
/* În foaie (lățime de ecran) panoul redevine grilă de 2 coloane peste 640px,
   moștenind regulile din §13.6 — de aceea nu se rescrie nimic aici. */
/* 🔴 REGRESIE REPARATĂ (18.08, după pasul 6): regula de aici era scrisă pe
   `.cnc-sheetveil` — clasa de BAZĂ a TUTUROR foilor din sistem. Peste 1024px
   ascundea și foaia de tipuri de cerere de pe homepage (`#cnc-typeveil`), pe
   care o deschid cele trei butoane „Adaugă o cerere".
   Simptomul nu arăta a CSS: controllerul punea `.is-open`, apoi
   `body.style.overflow = 'hidden'` — deci pagina se BLOCA (nu mai derula) și
   nu se întâmpla nimic vizibil. Exact capcana din §6.7 („planșele împart nume
   de clase"), doar că de data asta o planșă a rupt-o pe alta, nu pe sine.
   Regula se scopează pe foaia ei, ca cele două surori (`.cnc-advveil` §13.6,
   `.cnc-typeveil` §12). */
@media (min-width: 1024px) { body.cnc .cnc-filterveil { display: none; } }


/* ── 15.5.1 🔴 ARHIVELE NEACOPERITE DE P3 (`/all-ads/`, arhivele de locație)
 *
 * Cardul (`custom/list-items/archive-grid-9.php`) e un override de template,
 * deci se aplică pe ORICE listă de anunțuri — inclusiv pe arhive care NU intră
 * în tratamentul P3, fiindcă `cnc_archive_ctx()` întoarce `false` acolo
 * (decizie deliberată: mai bine forma originală decât o pagină pe jumătate
 * restilizată). Consecința nedorită: cardurile NOASTRE ajungeau în grila
 * PLUGINULUI, care are `gap: 0 25px` — adică `row-gap: 0`. Cu cardul vechi
 * nu se vedea, fiindcă el avea marginea lui de jos; al nostru nu are, deci
 * rândurile se lipeau unul de altul.
 *
 * `/all-ads/` NU e o cale moartă: e ținta butonului „Vezi tot" de pe homepage.
 *
 * Regula de mai jos dă grilei pluginului aceleași distanțe ca grila noastră,
 * DOAR unde tratamentul P3 lipsește (`:not(.cnc-archive)`) — pe cele 5 arhive
 * P3 clasa `.cnc-results__grid` e deja pe același nod și rămâne stăpână.
 * ------------------------------------------------------------------------- */
/* 🔴 `#content` în lanț, ca la §15.3: regula care trebuie bătută e a TEMEI,
   `#content .rtcl-listings.rtcl-grid-view { gap: 0 25px }` — (1,2,0). Un `#id`
   bate oricâte clase, deci prima variantă (0,4,1) pierdea în tăcere și
   rândurile rămâneau lipite. Măsurat în browser, nu presupus. */
body.cnc:not(.cnc-archive) #content .rtcl-listings.rtcl-grid-view {
  gap: var(--s-6);
  align-items: stretch;
}
/* Bara de sortare/vizualizare a pluginului: aceeași carte de vizită ca
   `.cnc-toolbar` de pe arhivele P3 — altfel pagina arată ca două design-uri
   lipite, ceea ce e exact reproșul din raport. */
body.cnc:not(.cnc-archive) .rtcl-listings-actions {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--s-5) var(--s-6);
  margin-bottom: var(--s-7);
}


/* ── 15.5.2 `/all-ads/` — antet NEUTRU (decizia din 18.08) ──────────────
 * Antetul de arhivă își ia culoarea din `--track-*`, adică din pista paginii.
 * `/all-ads/` NU are o pistă: amestecă cereri și oferte. Un antet emerald ar
 * spune „ești pe cereri", iar unul auriu „ești pe oferte" — ambele false, și
 * ar strica exact semnalul pe care §2 îl apără. Deci: suprafață neutră, iar
 * distincția rămâne unde e adevărată — pe fiecare card în parte, care își
 * poartă badge-ul, pictograma și rail-ul propriu.
 * ------------------------------------------------------------------------- */
.cnc-archead--all { background: var(--c-bg-alt); border-bottom-color: var(--c-border); }
body.cnc:not(.cnc-archive) .cnc-archead > .container,
body.cnc:not(.cnc-archive) .cnc-arcnav > .container { max-width: var(--w-page); }
/* Banda de arhive stă lipită de antet, ca pe cele 5 arhive P3. */
body.cnc:not(.cnc-archive) .cnc-arcnav { margin-bottom: var(--s-8); }


/* ── 15.6 ABONAREA — peste ancorele mu-pluginului ───────────────────────
 * CSS-ul mu-pluginului se tipărește în FOOTER (`wp_add_inline_style` pe un
 * handle cu `src=false`), deci e MEREU după al nostru: ordinea nu ne poate
 * ajuta, doar specificitatea. De aici cele două clase pe fiecare regulă.
 *
 * ⚠️ Verdele `#3EA510` hardcodat de mu-plugin e învins de `.cnc-btn--track`
 *    doar dacă lanțul are ≥ 2 clase — `.cnc-subbox .cc-rtcl-cat-sub-btn` le are.
 * ------------------------------------------------------------------------- */
body.cnc .cnc-subbox.cc-rtcl-cat-sub-box {
  padding: var(--s-7); border-radius: var(--r-md);
  border: 1px solid var(--track-border); background: var(--track-tint);
}
body.cnc .cnc-subbox .cc-rtcl-cat-sub-title { margin: 0 0 var(--s-4); font-size: var(--t-body); font-weight: 800; }
body.cnc .cnc-subbox .cc-rtcl-cat-sub-hint {
  margin: 0 0 var(--s-6); font-size: var(--t-small); line-height: 1.5;
  color: var(--c-text-muted); opacity: 1;
}
body.cnc .cnc-subbox .cc-rtcl-cat-sub-btn {
  width: 100%; min-height: 44px; padding: 0 var(--s-6);
  border-radius: var(--r-pill); border: 1px solid transparent;
  background: var(--track-accent-strong); color: var(--track-on-accent);
  font-family: inherit; font-size: var(--t-small); font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard);
}
body.cnc .cnc-subbox .cc-rtcl-cat-sub-btn:hover { background: var(--track-accent); opacity: 1; }
body.cnc .cnc-subbox .cc-rtcl-cat-sub-btn.is-subscribed {
  background: var(--c-surface); color: var(--track-accent); border-color: var(--track-border);
}
body.cnc .cnc-subbox .cc-rtcl-cat-sub-btn:disabled { opacity: .55; cursor: progress; }


/* ── 15.7 SORTAREA ──────────────────────────────────────────────────────
 * Formularul e al pluginului (`form.rtcl-ordering`), inclusiv auto-submit-ul
 * la `change`. Override-ul de template a adăugat DOAR `id` + `<label>`.
 * ------------------------------------------------------------------------- */
body.cnc-archive form.rtcl-ordering.cnc-sortform {
  display: flex; align-items: center; gap: var(--s-4); margin: 0;
}
/* ⚠️ Tema și pluginul își scriu propriile reguli pe `.rtcl-ordering select`
   (bordură gri `#d7d7d7`, `background: none`), la specificități de 3 clase.
   `.cnc-select` singur (o clasă) pierdea și rămânea fără bordură de sistem și
   FĂRĂ chevron — un select care nu arăta ca un select. Măsurat: `appearance`
   ajungea `none`, dar `background-image` ajungea tot `none`. */
body.cnc-archive form.rtcl-ordering select.orderby.cnc-select {
  min-height: 44px; width: auto; min-width: 190px;
  padding: 0 var(--s-10) 0 var(--s-6); font-size: var(--t-small);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm);
  background-color: var(--c-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B62' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s-5) center; background-size: 18px;
}
/* Pe mobil selectul cedează lățime, ca „Filtrează" + sortarea să încapă pe
   ACELAȘI rând: 130 + 12 + 190 = 332px de conținut cerut, dar la 390px sunt
   358px utili și butonul are marginile lui — cădea pe al treilea rând pentru
   3px. Cu `min-width:0` + `flex:1` ocupă restul rândului, oricât ar fi. */
@media (max-width: 640px) {
  body.cnc-archive form.rtcl-ordering.cnc-sortform { flex: 1 1 auto; min-width: 0; }
  body.cnc-archive form.rtcl-ordering select.orderby.cnc-select { min-width: 0; width: 100%; flex: 1 1 auto; }
}
body.cnc-archive form.rtcl-ordering select.orderby.cnc-select:hover { border-color: var(--c-text-muted-2); }
body.cnc-archive form.rtcl-ordering select.orderby.cnc-select:focus {
  outline: none; border-color: var(--focus-color); box-shadow: var(--focus-ring);
}


/* ── 15.8 STAREA „FĂRĂ FILTRE" (arhiva 22) ──────────────────────────────
 * Consecințe ale arhivei, nu comutatoare: `data-hasfilters` derivă din tabel.
 * Butonul de filtre și panoul dispar; cutia de abonare NU — ea are aceeași
 * suprafață mobilă în ambele stări (regula din §14.6).
 * ------------------------------------------------------------------------- */
body.cnc [data-hasfilters="off"] #filters-host,
body.cnc [data-hasfilters="off"] .cnc-filterbtn { display: none; }


/* ── 15.9 ADÂNCIMEA PANOULUI — de ce NU e nevoie de nicio regulă ────────
 * Specul (runda 3) cerea reguli `[data-depth]` care să ascundă treptele pe care
 * arhiva nu le poate atinge. La implementare s-a dovedit că nu sunt necesare
 * și că ar fi fost chiar dăunătoare:
 *
 *   · `#caut-dd-level2` și `#caut-dd-level3` au deja `style="display:none"`
 *     INLINE din PHP (`caut-dropdown.php:183,186`), iar `caut-dropdown.js` le
 *     afișează DOAR când primesc opțiuni (`fetchChildrenCategory` → `count`).
 *     Pe o arhivă fără acea treaptă, apelul întoarce 0 și selectul rămâne
 *     ascuns. Deci starea corectă se produce singură.
 *   · O regulă `display:none` din foaia noastră ar fi intrat în cursă cu
 *     `.show()`-ul lui jQuery (care scrie `display:block` inline și ar fi
 *     câștigat oricum) — adică o regulă care nu face nimic în cazul bun și
 *     nimic în cazul rău. Cod mort cu aparență de siguranță.
 *
 * `data-depth` rămâne pe `<main>` ca stare CITIBILĂ (QA, depanare, viitoare
 * reguli), nu ca hook de stil. Adâncimile reale, reverificate pe DB la
 * implementare: 14 → 2 · 15 → 2 · 17 → 1 · 18 → 0 · 22 → 2.
 *
 * 🔴 Cazul depth = 0 (arhiva 18 „Caut servicii") NU se rezolvă din CSS, ci din
 *    PHP: acolo panoul întreg e inoperant, fiindcă `#caut-dd-apply` cere un
 *    `termId` de frunză, iar arborele e plat. Vezi `inc/cnc-archive.php` §4.3.
 * ------------------------------------------------------------------------- */


/* ═════════════════════════════════════════════════════════════════════════
 * §16 COMPONENTE P5 — WIZARDUL (Mod A) — clase `cnc-` NOI
 *
 * Sursa: `P5-wizard-cerere-spec.md` §12 (șase componente noi) + prototipul.
 * Markup-ul îl scrie override-ul T2 `classified-listing/listing-form/form-builder.php`;
 * pașii îi comută `assets/js/cnc-wizard.js`.
 *
 * 🟢 ZERO TOKENI NOI. Pistele vin din §2, prin `--track-*`: aceleași reguli
 *    desenează wizardul emerald (cele 4 cereri) și pe cel auriu („Vând piese
 *    auto"), fără nicio ramificație pe culoare.
 *
 * 🔴 CE NU E AICI: nicio regulă peste `.rtcl-fb-*` sau `.ant-*`. Alea sunt
 *    skin (Mod B) și stau în §17, unde au nevoie de specificitatea care bate
 *    `form-builder/public.css` și stilurile injectate la runtime de Ant Design.
 * ═════════════════════════════════════════════════════════════════════════ */


/* ── 16.1 SHELL-UL (spec §12.2) ─────────────────────────────────────────
 * Rețeta C din P1 (flux îngust, 720px) — dar aplicată unei PAGINI de sarcină,
 * nu unui articol: aici lățimea mică nu e o preferință tipografică, e ce ține
 * un pas într-un ecran fără scroll pe mobil.
 * ------------------------------------------------------------------------- */
.cnc-wiz { max-width: var(--w-narrow); margin: 0 auto; padding: 0 0 var(--s-11); }
.cnc-wiz__head { padding: var(--s-8) 0 var(--s-7); }
.cnc-wiz__badges { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6); }
.cnc-wiz__kicker { font-size: var(--t-small); color: var(--c-text-muted); }
.cnc-wiz__kicker strong { color: var(--track-accent); font-weight: 800; }

/* Antetul selectorului de formular (aterizarea fără `?_fb=`). */
.cnc-wiz__pickhead { padding: var(--s-8) 0 var(--s-7); }
.cnc-wiz__pickq { font-size: var(--t-h2); letter-spacing: -.025em; margin: 0 0 var(--s-5); }

/* Linia de încărcare. Dispare când controllerul găsește câmpuri. */
.cnc-wiz__loading { font-size: var(--t-small); color: var(--c-text-muted-2); text-align: center; margin: var(--s-6) 0 0; }


/* ── 16.2 PROGRESUL — `.cnc-steps` din P1, cu stări noi ─────────────────
 * 🔴 Clasa de bază NU se redefinește (capcana §6.7 din 06-implementare: două
 *    planșe care se bat pe același nume). `.cnc-steps` și `.cnc-steps span`
 *    rămân exact cum le-a scris P1, în §4. Aici se adaugă DOAR modificatorul
 *    de pistă și cele două stări pe care P1 nu le avea: pasul curent și pasul
 *    cu eroare.
 * ------------------------------------------------------------------------- */
.cnc-steps--track span.is-done,
.cnc-steps--track span.is-current { background: var(--track-accent-strong); }
.cnc-steps--track span.is-error { background: var(--c-danger); }
/* Pasul curent e pe jumătate „plin": arată unde ești, nu unde ai fost. */
.cnc-steps--track span.is-current {
  background: linear-gradient(90deg, var(--track-accent-strong) 55%, var(--c-border) 55%);
}

.cnc-steps__label {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  font-size: var(--t-small); font-weight: 700; color: var(--track-accent);
  margin: var(--s-5) 0 0;
}
.cnc-steps__label span:last-child { color: var(--c-text-muted-2); font-weight: 600; }


/* ── 16.3 CARDUL DE PAS (spec §12.1) ────────────────────────────────────
 * De ce nu `.cnc-card` din P1: acela e un OBIECT dintr-o listă (are media,
 * rail, hover care sugerează „mă poți deschide"). Acesta e un ECRAN: primește
 * focus programatic, are un singur `<h1>` care se schimbă la fiecare pas și
 * o tranziție proprie. Un card de listă cu 12 câmpuri înăuntru ar minți.
 * ------------------------------------------------------------------------- */
.cnc-step-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--s-9) var(--s-8);
  box-shadow: var(--shadow-hairline);
}
.cnc-step-card:focus { outline: none; }
.cnc-step-card__q { font-size: var(--t-h3); letter-spacing: -.02em; margin: 0 0 var(--s-4); }
.cnc-step-card__sub { font-size: var(--t-small); color: var(--c-text-muted); line-height: 1.55; margin: 0 0 var(--s-8); }
.cnc-step-card > .cnc-banner { margin-bottom: var(--s-7); }
@media (max-width: 560px) {
  .cnc-step-card { padding: var(--s-8) var(--s-7); border-radius: var(--r-md); }
}

/* Tranziția între pași — doar `transform` și `opacity`, deci compozitată. */
.cnc-step-card.is-entering { animation: cnc-slide-step var(--dur-base) var(--ease-out); }
.cnc-step-card.is-entering-back { animation: cnc-slide-step-back var(--dur-base) var(--ease-out); }
@keyframes cnc-slide-step { from { opacity: 0; transform: translateX(14px); } }
@keyframes cnc-slide-step-back { from { opacity: 0; transform: translateX(-14px); } }
@media (prefers-reduced-motion: reduce) {
  .cnc-step-card.is-entering,
  .cnc-step-card.is-entering-back { animation: none; }
}


/* ── 16.4 NAVIGAREA (spec §12.2, §5) ────────────────────────────────────
 * 🔴 Sub 768px navigarea e STICKY jos, în thumb-zone. Peste, revine în flux:
 *    pe desktop o bară fixată jos ar fi zgomot, fiindcă întreg pasul încape
 *    pe ecran și mâna e pe mouse, nu pe marginea de jos a telefonului.
 * ------------------------------------------------------------------------- */
.cnc-wiz__nav { display: flex; gap: var(--s-5); align-items: center; padding: var(--s-7) 0 0; }
.cnc-wiz__nav .cnc-btn--next { flex: 1; }
.cnc-wiz__skip {
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: var(--t-small); font-weight: 700; color: var(--c-text-muted);
  min-height: 44px; padding: 0 var(--s-5); border-radius: var(--r-pill);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.cnc-wiz__skip:hover { background: var(--c-bg-alt); color: var(--c-ink); }

@media (max-width: 768px) {
  .cnc-wiz__nav {
    position: sticky; bottom: 0; z-index: var(--z-sticky);
    background: var(--c-bg); border-top: 1px solid var(--c-border);
    padding: var(--s-5) var(--gutter);
    margin: var(--s-7) calc(var(--gutter) * -1) 0;
  }
}


/* ── 16.5 REZUMATUL (spec §12.4) ────────────────────────────────────────
 * De ce nu se putea din P1/P3: e o listă de definiții CU ACȚIUNE PE GRUP.
 * `.cnc-kv` (P6) afișează perechi; aici fiecare grup are un buton care duce
 * înapoi exact la pasul lui.
 * ------------------------------------------------------------------------- */
.cnc-summary { display: flex; flex-direction: column; gap: var(--s-5); }
.cnc-sumgroup {
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  overflow: hidden; background: var(--c-surface);
}
.cnc-sumgroup__head {
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  background: var(--c-bg-alt); border-bottom: 1px solid var(--c-border);
}
.cnc-sumgroup__t { font-size: var(--t-small); font-weight: 800; flex: 1; margin: 0; }
.cnc-sumgroup__edit {
  border: 1px solid var(--c-border-strong); background: var(--c-surface); cursor: pointer;
  font: 700 var(--t-xsmall)/1 var(--font); color: var(--track-accent);
  min-height: 36px; padding: 0 var(--s-5); border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: var(--s-3);
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.cnc-sumgroup__edit:hover { background: var(--track-tint); border-color: var(--track-accent); }
.cnc-sumgroup__rows { margin: 0; }
.cnc-sumrow {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-6); padding: var(--s-5) var(--s-6);
}
.cnc-sumrow + .cnc-sumrow { border-top: 1px solid var(--c-border); }
.cnc-sumrow dt { font-size: var(--t-xsmall); color: var(--c-text-muted-2); flex: 0 0 40%; }
/* Un titlu de 90 de caractere se înfășoară, nu rupe layoutul (spec §7). */
.cnc-sumrow dd {
  font-size: var(--t-small); font-weight: 600; color: var(--c-ink);
  margin: 0; text-align: right; flex: 1; overflow-wrap: anywhere;
}
.cnc-sumrow dd.is-empty { color: var(--c-text-faint); font-weight: 500; font-style: italic; }


/* ── 16.6 GARDUL DE LOGIN (spec §7) ─────────────────────────────────────
 * Doar antetul. Formularul de dedesubt e cel randat de `Functions::login_form()`
 * și e deja îmbrăcat în §11, de la pasul „404 + login".
 * ------------------------------------------------------------------------- */
.cnc-gate__head { text-align: center; max-width: 46ch; margin: 0 auto var(--s-8); }
.cnc-gate__ico {
  width: 56px; height: 56px; border-radius: var(--r-md); margin: 0 auto var(--s-7);
  background: var(--track-tint); color: var(--track-accent);
  display: flex; align-items: center; justify-content: center;
}
.cnc-gate__head .cnc-step-card__sub { margin-bottom: 0; }


/* ═════════════════════════════════════════════════════════════════════════
 * §17 SKIN WIZARD — Mod B, peste Form-Builder (React) și Ant Design v5
 *
 * Sursa: `P5-VERIFICARE-IMPLEMENTABILITATE.md` B5 + măsurători în DOM-ul
 * randat, 18.08. Tot §17 e scopat sub `body.cnc-wizpage`.
 *
 * ┌─ DE CE E PE DOUĂ STRATURI ──────────────────────────────────────────────┐
 * │ Controalele NU sunt `<input class="rtcl-fb-…">`, cum presupunea specul   │
 * │ §2 rândul 3. Form-Builder-ul e o aplicație **Ant Design v5**:            │
 * │   · STRUCTURA e a pluginului — `.rtcl-fb-section`, `.rtcl-fb-field-wrap`,│
 * │     `.rtcl-fb-field-label`, `.rtcl-fb-field-content`;                    │
 * │   · CONTROLUL e Ant — `.ant-input`, `.ant-select`, `.ant-input-number`,  │
 * │     `.ant-radio`, `.ant-upload`, `.ant-btn`.                             │
 * │ `.cnc-input` / `.cnc-select` din P1 NU se pot aplica: clasele le pune    │
 * │ React, nu noi. Se RE-EXPRIMĂ ca skin pe `.ant-*`, cu aceiași tokeni.     │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * ┌─ SPECIFICITATE: DOUĂ ADVERSARI DIFERIȚI ────────────────────────────────┐
 * │ 1. `form-builder/public.css` — 70 KB, se pune în coadă la prioritatea    │
 * │    999 (`ScriptLoader.php:48`), fără nicio dependență. Foaia noastră e   │
 * │    la 1000, deci se tipărește DUPĂ → la specificitate egală câștigăm.    │
 * │    (Reparat pe 17.08; înainte era la 20 și pierdea pe toată pagina.)     │
 * │ 2. Ant Design v5 injectează stiluri LA RUNTIME în `<head>`, prin         │
 * │    `@ant-design/cssinjs` — adică după orice stylesheet. Le batem nu prin │
 * │    ordine, ci prin specificitate: Ant își împachetează regulile în       │
 * │    `:where()`, care are specificitate ZERO. Orice selector de clasă le   │
 * │    întrece. Regulile de mai jos folosesc ≥ 2 clase, ca marja să existe   │
 * │    și pentru puținele reguli Ant care NU sunt în `:where()`.             │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * 🔴 CE NU SE ATINGE: nicio clasă `rtcl-fb-*` sau `ant-*` nu e redenumită și
 *    niciun nod nu e mutat. Butonul real de submit e ASCUNS VIZUAL, nu scos
 *    din DOM — wizardul îl declanșează cu `.click()`.
 * ═════════════════════════════════════════════════════════════════════════ */


/* ── 17.1 PAGINA ────────────────────────────────────────────────────────── */
body.cnc-wizpage .site-content-block { background: var(--c-bg); }

/* 🔴 Banda de titlu a temei — `.theme-banner > h1.entry-title` cu textul
   „Post an Ad" — se randează DOAR pentru vizitatorii DELOGAȚI (măsurat: logat
   nu există în DOM, delogat există). Efectul e că exact pe ecranul gardului de
   login pagina ajungea cu DOUĂ `<h1>`, dintre care primul în engleză.
   Se ascunde, ca întrebarea noastră să rămână singurul titlu — aceeași
   decizie ca pe arhive, unde `template-parts/content-banner.php` scoate
   `<h1>`-ul dublu al temei. Aici ajunge o regulă CSS: nu e niciun override
   de template de întreținut pentru o bandă goală. */
body.cnc-wizpage .theme-banner { display: none; }
/* Wizardul își are propria lățime (720px); coloana Bootstrap a temei nu mai
   trebuie să o strângă suplimentar. */
body.cnc-wizpage .cnc-wiz { width: 100%; }

/* 🔴 Sub 768px navigarea e sticky. Fără spațiul de dedesubt, ultimul câmp al
   pasului stă sub bara de butoane și nu se poate atinge. */
@media (max-width: 768px) {
  html.cnc-wiz-on body.cnc-wizpage #rtcl-form-builder { padding-bottom: var(--s-6); }

  /* 🔴 `position: sticky` NU funcționa deloc, tăcut. Cauza: tema pune
     `overflow: hidden` pe `#page.site` (măsurat pe strămoși, nu presupus), iar
     un strămoș cu `overflow` diferit de `visible` devine contextul de derulare
     al elementului sticky — iar `#page` nu derulează, deci n-are unde „lipi".
     Bara de navigare rămânea pur și simplu la sfârșitul cardului, sub linia de
     plutire, exact ce trebuia să evite thumb-zone-ul din spec §5.

     `overflow: clip` taie la fel ca `hidden` (motivul temei — meniul off-canvas
     care ar lăţi pagina), dar NU creează context de derulare, deci sticky-ul
     redevine relativ la fereastră. Degradare sigură: pe motoarele care nu
     cunosc `clip`, declarația e invalidă și se ignoră — rămâne `hidden`, adică
     exact comportamentul de azi, nu unul mai rău.

     Scopat pe pagina wizardului: nu atingem `#page` pe restul site-ului. */
  body.cnc-wizpage #page.site { overflow: clip; }
}


/* ── 17.2 VIZIBILITATEA PAȘILOR ─────────────────────────────────────────
 * 🔴 GARDATĂ de `html.cnc-wiz-on`, pusă de controller DOAR după ce a găsit
 *    câmpuri reale și cel puțin doi pași. Fără gardă, un controller care nu
 *    se încarcă sau moare devreme ar lăsa câmpurile ascunse permanent — exact
 *    ecranul gol pe care spec §4.1 punctul 6 promite că nu poate exista.
 *    Cu gardă, fallback-ul e formularul lung, stilizat, funcțional.
 *
 * 🔴 Ascunderea e pe ATRIBUT, nu pe clasă: `className` e o proprietate pe care
 *    React o gestionează și o poate rescrie la re-randare, ștergând tăcut o
 *    clasă de-a noastră. Atributele `data-cnc-*` nu-i sunt cunoscute, deci nu
 *    intră în diff. Vezi antetul lui `cnc-wizard.js`.
 * ------------------------------------------------------------------------- */
html.cnc-wiz-on body.cnc-wizpage .rtcl-fb-field-wrap[data-cnc-hidden],
html.cnc-wiz-on body.cnc-wizpage .rtcl-fb-section[data-cnc-hidden] { display: none !important; }

/* Antetele de secțiune ale Form-Builder-ului (constatarea C24): trei pe
   fiecare formular — numele formularului cu majuscule, „Cerere ofertă" /
   „Anunț vânzare" și „Imagini". Într-un wizard ele ar fi trei titluri străine
   deasupra fiecărei întrebări. Se ascund; întrebarea pasului le ține locul. */
html.cnc-wiz-on body.cnc-wizpage .rtcl-fb-section .section-header { display: none; }
html.cnc-wiz-on body.cnc-wizpage .rtcl-fb-section { margin-bottom: 0; }

/* Câmpul care și-a dat eticheta ca întrebare a pasului nu o mai repetă. */
html.cnc-wiz-on body.cnc-wizpage .rtcl-fb-field-wrap[data-cnc-qowner] .rtcl-fb-field-label { display: none; }

/* Butonul real de submit: ascuns VIZUAL, prezent în DOM. Wizardul îl
   declanșează; ștergerea lui ar rupe fluxul de salvare (linia roșie). */
html.cnc-wiz-on body.cnc-wizpage .rtcl-form-submit-btn {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}


/* ── 17.3 STRUCTURA CÂMPULUI ────────────────────────────────────────────
 * Form-Builder pune eticheta la STÂNGA inputului, pe o coloană de 200px
 * (`public.css`: `.rtcl-fb-field{flex-direction:row}` + `.rtcl-fb-field-label
 * {flex:0 0 200px}`). Pe un ecran de 360px asta lasă inputului 140px. Trece
 * pe coloană, peste tot.
 * ------------------------------------------------------------------------- */
/* 🔴 LANȚUL DE 5 CLASE NU E ZEL. Regula care trebuie bătută NU e din plugin,
   ci din TEMĂ (`classima/assets/css/listing.css:6889`, în `@media min-width:768px`):
     `.rtcl-fb-sections .rtcl-fb-section .rtcl-fb-field-wrap:not(.label-top,
      .label-bottom) .rtcl-fb-field { flex-direction: row; grid-column-gap: 25px }`
   plus perechea ei, care dă etichetei `flex: 0 0 20%`. Sunt (0,5,0) — un `:not()`
   contează cât cel mai specific argument al lui. Un `body.cnc-wizpage
   .rtcl-fb-field` (0,2,0) pierde, iar simptomul e discret: pe desktop eticheta
   rămâne la stânga, într-o coloană de 20%, și pare o alegere de design.
   Măsurat în browser (`flex: 0 0 20%`, `column-gap: 25px`), nu presupus. */
body.cnc-wizpage .rtcl-fb-sections .rtcl-fb-section .rtcl-fb-field-wrap .rtcl-fb-field {
  display: flex; flex-direction: column; gap: var(--s-4); column-gap: 0; grid-column-gap: 0;
}
body.cnc-wizpage .rtcl-fb-sections .rtcl-fb-section .rtcl-fb-field-wrap .rtcl-fb-field .rtcl-fb-field-label {
  flex: 0 0 auto; max-width: none; width: auto; margin: 0;
  align-items: center; justify-content: flex-start; gap: var(--s-3);
  font-size: var(--t-small); font-weight: 600; color: var(--c-ink); line-height: 1.3;
}
body.cnc-wizpage .rtcl-fb-field .rtcl-fb-field-label .required { color: var(--c-danger); }
body.cnc-wizpage .rtcl-fb-sections .rtcl-fb-field-content { flex: 1 1 auto; }
/* Aceleași margini laterale procentuale, din aceeași sursă: fără ele, pasul de
   preț și cele trei elemente „speciale" ar sta decalate față de restul cardului. */
body.cnc-wizpage .rtcl-fb-sections .rtcl-fb-section .rtcl-fb-field-wrap,
body.cnc-wizpage .rtcl-fb-sections .rtcl-fb-section .rtcl-fb-section-columns,
body.cnc-wizpage .rtcl-fb-sections .rtcl-fb-section .rtcl-price-range { margin-left: 0; }
body.cnc-wizpage .rtcl-fb-field-wrap { margin-top: var(--s-7); }
body.cnc-wizpage .rtcl-fb-field-wrap:first-child { margin-top: 0; }

/* Ajutorul contextual — text din PHP, adus prin atribut. 🔴 Un `<p>` injectat
   ar fi fost un nod NOU în subarborele React; `content: attr()` nu atinge DOM-ul. */
/* 🔴 Pseudo-elementul stă pe WRAPPER, nu pe `.rtcl-fb-field-content`.
   `attr()` citește doar atributele elementului CĂRUIA îi aparține pseudo-ul;
   pus pe copil, regula se potrivea (măsurat: display, font-size și culoarea se
   aplicau), dar `content` ieșea șirul gol — un ajutor invizibil, fără nicio
   eroare. Prins în browser, nu la citire. */
body.cnc-wizpage .rtcl-fb-field-wrap[data-cnc-hint]::after {
  content: attr(data-cnc-hint);
  display: block; margin-top: var(--s-4);
  font-size: var(--t-xsmall); color: var(--c-text-muted-2); line-height: 1.5;
}
/* ⚠️ `content: attr()` nu e citit de toate tehnologiile de asistare. De aceea
   ajutorul e SECUNDAR peste tot: nicio informație de care completarea depinde
   nu trăiește doar aici. Ce e obligatoriu stă în etichetă și în mesajele FB. */

/* Ajutoarele și erorile proprii ale pluginului. */
body.cnc-wizpage .rtcl-fb-field .rtcl-fb-help {
  font-size: var(--t-xsmall); color: var(--c-text-muted-2); line-height: 1.5; margin-top: var(--s-3);
}
/* 🔴 C30: nodul de eroare randat efectiv e `.rtcl-fb-errors > .rtcl-error`.
   `.rtcl-fb-error` / `.rtcl-fb-help-error` există în `public.css`, dar nu sunt
   ce scrie React. Măsurat în DOM după un submit respins. Le stilăm pe toate:
   cele nefolosite nu costă nimic, iar dacă un update al pluginului revine la
   ele, eroarea rămâne desenată corect. */
body.cnc-wizpage .rtcl-fb-field .rtcl-fb-help.rtcl-fb-help-error,
body.cnc-wizpage .rtcl-fb-errors,
body.cnc-wizpage .rtcl-error,
body.cnc-wizpage .rtcl-fb-error {
  font-size: var(--t-xsmall); color: var(--c-danger); font-weight: 600;
  margin-top: var(--s-3); line-height: 1.5;
}

/* Câmp obligatoriu gol, blocat la „Continuă" (spec §4.2 varianta a).
   🔴 Marcajul e vizual — mesajul rămâne al Form-Builder-ului. Nu scriem noi o
      frază care i-ar putea contrazice pe a lui. */
body.cnc-wizpage .rtcl-fb-field-wrap[data-cnc-invalid] .ant-input,
body.cnc-wizpage .rtcl-fb-field-wrap[data-cnc-invalid] .ant-input-affix-wrapper,
body.cnc-wizpage .rtcl-fb-field-wrap[data-cnc-invalid] .ant-input-number,
body.cnc-wizpage .rtcl-fb-field-wrap[data-cnc-invalid] .ant-select .ant-select-selector {
  border-color: var(--c-danger);
  box-shadow: 0 0 0 3px var(--c-danger-50);
}


/* ── 17.4 CONTROALELE ANT — inputuri, numere, selecturi ─────────────────
 * 🔴 `font-size: 16px` nu e o alegere estetică: sub 16px, iOS face zoom
 *    automat la focus și aruncă utilizatorul din pas. Aceeași regulă ca la
 *    bara de căutare din P1.
 * 🔴 Ținta tactilă minimă e 48px (spec §8), nu 44: aici sunt câmpuri de
 *    completat, nu butoane de apăsat o dată.
 * ------------------------------------------------------------------------- */
body.cnc-wizpage .rtcl-fb-field .ant-input,
body.cnc-wizpage .rtcl-fb-field .ant-input-affix-wrapper,
body.cnc-wizpage .rtcl-fb-field .ant-input-number,
body.cnc-wizpage .rtcl-fb-field .ant-select .ant-select-selector {
  width: 100%; min-height: 48px; padding: 10px var(--s-6);
  font-family: var(--font); font-size: 16px; font-weight: 500; line-height: 1.4;
  color: var(--c-ink); background: var(--c-surface);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm);
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
/* Inputul din interiorul unui `affix-wrapper` nu mai poartă el chenarul. */
body.cnc-wizpage .rtcl-fb-field .ant-input-affix-wrapper > .ant-input,
body.cnc-wizpage .rtcl-fb-field .ant-input-number .ant-input-number-input {
  min-height: 26px; padding: 0; border: 0; border-radius: 0; background: transparent;
}
body.cnc-wizpage .rtcl-fb-field .ant-select .ant-select-selection-search-input { height: 100%; }
body.cnc-wizpage .rtcl-fb-field .ant-select .ant-select-selection-item,
body.cnc-wizpage .rtcl-fb-field .ant-select .ant-select-selection-placeholder {
  line-height: 26px; font-size: 16px;
}
body.cnc-wizpage .rtcl-fb-field .ant-select .ant-select-selection-placeholder,
body.cnc-wizpage .rtcl-fb-field .ant-input::placeholder { color: var(--c-text-faint); }

body.cnc-wizpage .rtcl-fb-field .ant-input:hover,
body.cnc-wizpage .rtcl-fb-field .ant-input-affix-wrapper:hover,
body.cnc-wizpage .rtcl-fb-field .ant-input-number:hover,
body.cnc-wizpage .rtcl-fb-field .ant-select:hover .ant-select-selector { border-color: var(--c-text-muted-2); }

body.cnc-wizpage .rtcl-fb-field .ant-input:focus,
body.cnc-wizpage .rtcl-fb-field .ant-input-affix-wrapper-focused,
body.cnc-wizpage .rtcl-fb-field .ant-input-number-focused,
body.cnc-wizpage .rtcl-fb-field .ant-select-focused .ant-select-selector {
  border-color: var(--track-accent); box-shadow: var(--focus-ring); outline: none;
}

/* Săgeata selectului: desenată, ca să nu depindem de fontul de pictograme Ant. */
body.cnc-wizpage .rtcl-fb-field .ant-select .ant-select-arrow { color: var(--c-text-muted); inset-inline-end: var(--s-6); }

/* Lista derulantă a selecturilor e randată în `<body>`, în afara wizardului —
   deci scopată pe pagină, nu pe `.cnc-wiz`. */
body.cnc-wizpage .ant-select-dropdown { border-radius: var(--r-sm); box-shadow: var(--shadow-soft); font-family: var(--font); }
body.cnc-wizpage .ant-select-dropdown .ant-select-item { min-height: 40px; font-size: var(--t-body); display: flex; align-items: center; }
body.cnc-wizpage .ant-select-dropdown .ant-select-item-option-selected { background: var(--track-tint); color: var(--track-accent); font-weight: 700; }

/* Categoria și locația randează un select PE NIVEL, unul sub altul. */
body.cnc-wizpage .rtcl-fb-field-content .rtcl-fb-input-category + .rtcl-fb-input-category,
body.cnc-wizpage .rtcl-fb-field-content .rtcl-fb-input-location + .rtcl-fb-input-location { margin-top: var(--s-5); }


/* ── 17.5 RADIO ȘI CHECKBOX CA RADIO-CARDURI (spec §12.3) ───────────────
 * Aceeași componentă ca în P1, la scara wizardului: 56px, țintă tactilă mare,
 * stare bifată desenată cu tokenii pistei. Nodurile rămân ale Ant-ului —
 * `<label class="ant-radio-wrapper">` cu inputul nativ în spate.
 * ------------------------------------------------------------------------- */
body.cnc-wizpage .rtcl-fb-field .ant-radio-group,
body.cnc-wizpage .rtcl-fb-field .rtcl-checkbox-group {
  display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 480px) {
  body.cnc-wizpage .rtcl-fb-field .ant-radio-group,
  body.cnc-wizpage .rtcl-fb-field .rtcl-checkbox-group { grid-template-columns: 1fr 1fr; }
}
body.cnc-wizpage .rtcl-fb-field .ant-radio-wrapper,
body.cnc-wizpage .rtcl-fb-field .ant-checkbox-wrapper {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: 56px; padding: var(--s-5) var(--s-6); margin: 0;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface);
  font-family: var(--font); font-size: var(--t-body); font-weight: 600; color: var(--c-ink);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
body.cnc-wizpage .rtcl-fb-field .ant-radio-wrapper:hover,
body.cnc-wizpage .rtcl-fb-field .ant-checkbox-wrapper:hover { border-color: var(--c-text-muted-2); }
body.cnc-wizpage .rtcl-fb-field .ant-radio-wrapper-checked,
body.cnc-wizpage .rtcl-fb-field .ant-checkbox-wrapper-checked {
  border-color: var(--track-accent); background: var(--track-tint);
  box-shadow: var(--track-glow); font-weight: 700;
}
body.cnc-wizpage .rtcl-fb-field .ant-radio-wrapper:focus-within,
body.cnc-wizpage .rtcl-fb-field .ant-checkbox-wrapper:focus-within { box-shadow: var(--focus-ring); }
body.cnc-wizpage .rtcl-fb-field .ant-radio-inner,
body.cnc-wizpage .rtcl-fb-field .ant-checkbox-inner { border-color: var(--c-border-strong); }
body.cnc-wizpage .rtcl-fb-field .ant-radio-checked .ant-radio-inner,
body.cnc-wizpage .rtcl-fb-field .ant-checkbox-checked .ant-checkbox-inner {
  border-color: var(--track-accent-strong); background: var(--track-accent-strong);
}


/* ── 17.6 UPLOADUL DE IMAGINI (spec §12.5) ──────────────────────────────
 * 🔴 Fluxul de upload (REST, validare, limite) NU se atinge. Se schimbă doar
 *    cum arată zona: sloturi pătrate, o zonă de adăugare vizibil tactilă și
 *    hintul de limite scos din caseta roșie în care îl pune pluginul —
 *    roșul spunea „eroare" pentru un text care e doar informație.
 * ------------------------------------------------------------------------- */
body.cnc-wizpage .rtcl-fb-image-upload-wrap .ant-upload.ant-upload-select {
  width: 100%; min-height: 132px; margin: 0;
  border: 1.5px dashed var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--track-accent);
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
body.cnc-wizpage .rtcl-fb-image-upload-wrap .ant-upload.ant-upload-select:hover {
  border-color: var(--track-accent); background: var(--track-tint);
}
body.cnc-wizpage .rtcl-fb-image-upload-wrap .ant-upload-list-item-container { border-radius: var(--r-sm); }
body.cnc-wizpage .rtcl-fb-image-upload-wrap .ant-upload-list-item { border-radius: var(--r-sm); border-color: var(--c-border); }
/* Hintul de limite: informație, nu eroare. */
body.cnc-wizpage .rtcl-file-upload-instruction {
  background: var(--c-bg-alt); color: var(--c-text-muted);
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  padding: var(--s-5) var(--s-6); margin-top: var(--s-5);
  font-size: var(--t-xsmall); line-height: 1.6; text-align: left;
}


/* ── 17.7 DESCRIEREA — editorul WordPress (constatarea C27) ─────────────
 * `description` nu e un `<textarea>`, ci editorul complet, cu TinyMCE și
 * taburile Visual/Code. Nu îl înlocuim (ar fi logică, nu prezentare) — îl
 * încadrăm ca pe orice alt câmp: același chenar, aceeași rază, aceeași
 * înălțime minimă utilă.
 * ------------------------------------------------------------------------- */
body.cnc-wizpage .rtcl_wp_editor_wrap .wp-editor-container {
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); overflow: hidden;
}
body.cnc-wizpage .rtcl_wp_editor_wrap .wp-editor-tabs { margin-bottom: var(--s-3); }
body.cnc-wizpage .rtcl_wp_editor_wrap .wp-switch-editor {
  font-family: var(--font); font-size: var(--t-xsmall); font-weight: 700;
  border-radius: var(--r-xs) var(--r-xs) 0 0;
}
body.cnc-wizpage .rtcl_wp_editor_wrap .mce-edit-area iframe { min-height: 180px; }
body.cnc-wizpage .rtcl_wp_editor_wrap textarea.wp-editor-area {
  min-height: 180px; font-family: var(--font); font-size: 16px; line-height: 1.6;
}


/* ── 17.8 SELECTORUL DE FORMULAR — aterizarea fără `?_fb=` ──────────────
 * 🔴 Constatarea C25: ancora reală e `.rtcl-form-list > .rtcl-form-item
 *    [data-slug]`, NU `.rtcl-fb-form-action > .current` din verificarea B3 —
 *    aceea nu se randează pe cinecum, deși sunt 5 formulare publicate.
 *
 * Cardurile primesc doar ATRIBUTE de la controller (sub-titlu, pistă); textul
 * și handlerele rămân ale React-ului. Sub-titlul intră prin `content: attr()`,
 * nu prin noduri injectate.
 * ------------------------------------------------------------------------- */
body.cnc-wizpage .rtcl-form-list {
  display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr);
  margin: 0; padding: 0; border: 0; background: none;
}
@media (min-width: 560px) { body.cnc-wizpage .rtcl-form-list { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }

body.cnc-wizpage .rtcl-form-list .rtcl-form-item {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--s-4);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: var(--s-7) var(--s-7) var(--s-7) var(--s-8);
  min-height: 44px; cursor: pointer; box-shadow: var(--shadow-hairline);
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
/* Rail-ul de pistă pe muchia stângă — semnalul 3 din 4 (§2). */
body.cnc-wizpage .rtcl-form-list .rtcl-form-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--c-emerald-700);
}
body.cnc-wizpage .rtcl-form-list .rtcl-form-item[data-cnc-track="oferta"]::before { background: var(--c-gold); }
body.cnc-wizpage .rtcl-form-list .rtcl-form-item:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--c-emerald-100);
}
body.cnc-wizpage .rtcl-form-list .rtcl-form-item .rtcl-form-title {
  font-size: var(--t-h4); font-weight: 700; letter-spacing: -.01em; color: var(--c-ink);
}
body.cnc-wizpage .rtcl-form-list .rtcl-form-item[data-cnc-sub]::after {
  content: attr(data-cnc-sub);
  font-size: var(--t-small); color: var(--c-text-muted); line-height: 1.5;
}


/* Pe selectorul de formulare, cardul de pas nu mai are ce încadra: grila de
   carduri e deja obiectul paginii, iar un al doilea chenar în jurul ei ar fi
   doar zgomot. Starea vine ca atribut de la controller, nu dintr-un `:has()`
   pe `hidden`-ul unui frate — mai ieftin și lizibil la depanare. */
body.cnc-wizpage .cnc-wiz[data-cnc-view="picker"] .cnc-step-card {
  background: none; border: 0; box-shadow: none; padding: 0;
}


/* ── 17.9 ÎNCĂRCAREA ────────────────────────────────────────────────────
 * Loaderul pluginului, prezentat ca schelet cu geometria primului pas (spec
 * §7): la înlocuirea cu formularul real, saltul de layout e mic.
 * ------------------------------------------------------------------------- */
body.cnc-wizpage .rtcl-fb-loader-container { min-height: 180px; display: flex; align-items: center; justify-content: center; }
body.cnc-wizpage .rtcl-fb-loader { border-top-color: var(--c-emerald); }


/* ── 17.10 GARDUL DE LOGIN ──────────────────────────────────────────────
 * Formularul e cel al pluginului, deja îmbrăcat în §11. Aici doar îl punem
 * într-un card centrat, ca să nu plutească pe toată lățimea paginii.
 * ------------------------------------------------------------------------- */
body.cnc-wizpage .rtcl-login-form-wrap {
  max-width: 460px; margin: var(--s-9) auto; padding: var(--s-9) var(--s-8);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-hairline);
}


/* ═══════════════════════════════════════════════════════════════════════════
 * §18 SKIN „CUM FUNCȚIONEAZĂ" — pasul 8 din 06-implementare §4.3
 *
 * Sursa: P7-pagini-sistem-spec.md §3.3, §4, §7, §8 + prototipul, `data-pg="cum"`.
 * Markup-ul îl randează `inc/cnc-guide.php` prin `[cnc_guide]`; pagina 3433
 * conține un singur widget Elementor de tip „Shortcode".
 *
 * ┌─ CE E AICI ȘI CE NU ────────────────────────────────────────────────────┐
 * │ Componentele paginii (`.cnc-pagehero`, `.cnc-flip`, `.cnc-steps2`,      │
 * │ `.cnc-credexp`, `.cnc-faq`) sunt scrise de la 17.08 în §9 și NU se       │
 * │ redefinesc aici — ar fi exact capcana §6.7 („două planșe împart nume").  │
 * │ §18 adaugă doar ce lipsea la contactul cu pagina reală:                  │
 * │   a) cele două butoane de pe fundal închis, care nu existau în sistem;   │
 * │   b) copiii pe care prototipul îi stiliza INLINE (lista neagră cere      │
 * │      tokeni, nu `style=""`);                                            │
 * │   c) comutarea celor două liste de pași;                                │
 * │   d) marginile pe care le aduce TEMA, nu noi.                           │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * 🔴 ZERO TOKENI NOI. Toate culorile vin din §1; pistele, din §2.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── 18.1 PAGINA ────────────────────────────────────────────────────────
 * Banda de titlu a temei nu se ascunde de aici: e scoasă din DOM în
 * `template-parts/content-banner.php`, ca `<h1>`-ul să fie unul singur ȘI în
 * arborele de accesibilitate, nu doar vizual. Aceeași decizie ca pe arhive.
 * ------------------------------------------------------------------------- */
body.cnc-guidepage .site-content-block { background: var(--c-bg); }

/* Elementor randează pagina în `.elementor-section-boxed`, deci lățimea vine
   de acolo. Aici doar aerul de sus și de jos, pe care secțiunea nu îl are. */
.cnc-guide { margin: var(--s-9) 0 var(--s-11); }

/* Prima secțiune vine imediat după hero, care e deja un card cu padding —
   `.cnc-sec` ar fi adăugat încă un etaj de spațiu peste el. */
.cnc-guide > .cnc-pagehero + .cnc-sec { padding-top: var(--s-11); }

/* ── 18.2 CELE DOUĂ BUTOANE DE PE FUNDAL ÎNCHIS ─────────────────────────
 * `.cnc-btn--primary` (emerald) pe `--c-ink` are contrast de fundal prea mic:
 * hero-ul ar fi arătat un buton care se topește în bandă. Prototipul P7 le
 * desenează ca inversul lor — de aici cele două modificatoare noi.
 * 🔴 `:link`/`:visited` sunt obligatorii: tema colorează ancorele prin
 *    `a:link` (0,1,1), care bate o clasă simplă. Aceeași pereche de reguli
 *    există pentru toate celelalte variante, în §4.2.
 * ------------------------------------------------------------------------- */
.cnc-btn--onink { background: var(--c-on-dark); color: var(--c-ink); }
.cnc-btn--onink:hover:not(:disabled) { background: var(--c-surface); color: var(--c-ink); }
a.cnc-btn--onink:link, a.cnc-btn--onink:visited { color: var(--c-ink); }

.cnc-btn--ondark {
  background: transparent; color: var(--c-on-dark-muted);
  border-color: var(--c-green-slate);
}
.cnc-btn--ondark:hover:not(:disabled) {
  background: rgba(255, 255, 255, .06); color: var(--c-on-dark);
  border-color: var(--c-on-dark-muted);
}
a.cnc-btn--ondark:link, a.cnc-btn--ondark:visited { color: var(--c-on-dark-muted); }
a.cnc-btn--ondark:hover { color: var(--c-on-dark); }

/* ── 18.3 COPIII CARE ERAU INLINE ÎN PROTOTIP ───────────────────────────
 * Prototipul e o pagină de sine stătătoare și își permite `style="…"`.
 * În producție, fiecare dimensiune și fiecare culoare trebuie să fie un token
 * — altfel validatorul din `06` §2.2 semnalează hexuri în afara lui `:root`,
 * iar o schimbare de paletă lasă în urmă valori orfane.
 * ------------------------------------------------------------------------- */
.cnc-flipcard__d { font-size: var(--t-small); line-height: 1.6; margin: 0; }

.cnc-guide__note {
  text-align: center; margin: var(--s-9) auto 0; max-width: var(--w-narrow);
  font-size: var(--t-small); color: var(--c-text-muted-2);
}

.cnc-guide__switch { margin-top: var(--s-8); }

.cnc-guide__narrow { max-width: var(--w-narrow); margin-left: auto; margin-right: auto; }

.cnc-guide__end { text-align: center; margin: var(--s-10) 0 0; }

/* 🔴 Titlurile de pe fundal închis își declară culoarea ELE, nu o moștenesc
   dintr-o regulă globală — vezi nota din §3, unde încercarea inversă a rupt
   titlul de pe blocul de închidere al homepage-ului. Clasa de pe titlu (0,1,0)
   bate blocul inline al temei (`h1 { color: #181B31 }`, 0,0,1), care altfel
   lăsa hero-ul negru pe negru. */
.cnc-pagehero__t { color: var(--c-on-dark); }
.cnc-credexp__t  { color: var(--c-on-dark); }

/* Fundalul închis al blocului de credite: titlul și subtitlul secțiunii sunt
   aceleași componente ca pe alb, deci culoarea se inversează aici, o dată. */
.cnc-credexp .cnc-sec__t { color: var(--c-on-dark); }
.cnc-credexp .cnc-sec__s { color: var(--c-on-dark-muted); }

/* Tema dă `<p>` o margine de jos; în răspunsurile FAQ ea se adaugă peste
   `padding-bottom`-ul componentei și rupe ritmul. Distanța dintre paragrafe
   rămâne cea din §9.7 (`p + p`). */
.cnc-faq__a p { margin: 0; }

/* ── 18.4 COMUTAREA CELOR DOUĂ LISTE DE PAȘI ────────────────────────────
 * 🔴 CAPCANA, DEJA PLĂTITĂ O DATĂ (`06` §4.4, punctul 2): `[hidden]` e un
 *    atribut, iar regula UA care îl ascunde (`display:none`) pierde în fața
 *    oricărei clase care declară un `display`. `.cnc-steps2` declară
 *    `display:grid` → lista „ascunsă" ar fi rămas pe ecran, fără nicio eroare.
 *    Se reafirmă explicit, la nivelul componentei.
 *
 * ⚠️ DEGRADARE FĂRĂ JS: markup-ul NU pleacă cu `hidden` pe niciuna dintre
 *    liste. Fără JavaScript se văd amândouă, una sub alta — pagina rămâne
 *    completă și corectă. `hidden` îl pune controllerul la inițializare.
 *    Invers (ascuns din HTML, arătat de JS) ar fi lăsat jumătate din
 *    explicație inaccesibilă exact utilizatorilor fără JS.
 * ------------------------------------------------------------------------- */
.cnc-steps2[hidden] { display: none; }

/* ── 18.5 RESPONSIVE (spec §8) ──────────────────────────────────────────
 * `.cnc-flip` e `1fr auto 1fr` de la 768px în sus (§9.4). Sub prag trece pe o
 * coloană, iar săgeata dintre carduri trebuie să arate în jos — altfel indică
 * o direcție care nu mai există.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .cnc-pagehero { padding: var(--s-10) var(--s-7); border-radius: var(--r-lg); }
  .cnc-flipvs svg { transform: rotate(90deg); }
  .cnc-credexp { padding: var(--s-9) var(--s-7); border-radius: var(--r-lg); }
  .cnc-guide { margin: var(--s-7) 0 var(--s-9); }
}

/* 🔴 Limita cea mai strânsă din toată planșa, semnalată în spec §8: cele două
   etichete ale comutatorului („Vreau să cumpăr" / „Vreau să vând") trebuie să
   încapă pe o singură linie la 360px. Măsurat în pagina randată: cu padding-ul
   implicit (`0 var(--s-7)`) comutatorul depășea containerul. Strâns aici, nu
   în componentă — pe restul planșelor `.cnc-trackswitch` are doar două
   cuvinte scurte și încape. */
@media (max-width: 400px) {
  .cnc-guide .cnc-trackswitch { display: flex; width: 100%; }
  .cnc-guide .cnc-trackswitch__opt { padding: 0 var(--s-4); font-size: var(--t-xsmall); }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * §19 COMPONENTE P4 — PAGINA DE ANUNȚ (Mod A) — clase `cnc-` NOI
 *
 * Sursa: P4-pagina-anunt-spec.md §4 + prototipul `P4-pagina-anunt.html`.
 * Markup-ul îl pun TREI override-uri de template din tema copil:
 *   · `classified-listing/custom/content-single-2.php` — corpul paginii
 *   · `classified-listing/custom/sidebar-single.php`   — coloana laterală
 *   · `classified-listing/custom/seller-info.php`      — cardul de contact
 * plus `inc/cnc-single.php`, care produce lockstrip-ul și blocul owner.
 *
 * ┌─ CE NU E AICI ──────────────────────────────────────────────────────────┐
 * │ `.cnc-lockstrip` e scris din 13.08 in §4.9 si NU se redefineste — ar fi  │
 * │ exact capcana §6.7. La fel `.cnc-flow` / `.cnc-form` (§9.1), care sunt   │
 * │ tot P4, dar pentru ecranul de dupa acceptare.                           │
 * │ Lista de oferte se imbraca in §20.6, pe selectoarele PLUGINULUI: markup- │
 * │ ul ei se produce prin concatenare de string, fara niciun filtru, deci nu │
 * │ exista unde sa-i punem o clasa `cnc-` (P4 §4.3).                        │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * DECIZIA CENTRALA A PLANSEI — DOUA IERARHII, ACELASI TEMPLATE.
 *    Datele o impun (E §5.4): pe pista `cerere`, 67% dintre anunturi au ZERO
 *    poze, mediana 0. Pe `oferta`, mediana e 4. O pagina construita in jurul
 *    galeriei e goala in doua cazuri din trei. Deci pe `cerere` eroul e TEXTUL
 *    (`.cnc-brief`), iar starea „fara poze" e proiectata ca INTENTIE
 *    (`.cnc-nomedia`), nu ca anunt incomplet. Comutatorul e `data-track` din §2
 *    — costul e o clasa, nu un template in plus.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── 19.1 Containerul de detaliu ────────────────────────────────────────
 * Carlig de scopare, nu componenta de layout: latimea si coloanele vin de la
 * Bootstrap-ul temei (`.container` > `.row` > `.col-xl-9`), pe care nu-l
 * rescriem (P4 §9). `.cnc-detail__grid` din prototip descrie INTENTIA; aici
 * intentia se aplica pe `.row`-ul existent, in §20.1.
 * ------------------------------------------------------------------------- */
.cnc-detail { position: relative; }
.cnc-single__banner { margin: 0 0 var(--s-8); }
.cnc-banner__cta { margin-top: var(--s-5); }

/* ── 19.1.1 🔴 `.cnc-ico` — pictograma ca MASCĂ, nu ca SVG inline ───────
 * Vezi nota lungă de la tokenii `--cnc-ico-*` din §1: pe pagina de anunț,
 * scrubberul de telefoane al pluginului rescrie `viewBox="0 0 24 24"` în
 * `viewBox="****"`, deci orice `<svg>` din markup e distrus pentru vizitatorii
 * mascați. Masca trăiește în foaia de stil, care nu trece prin `ob_start()`.
 *
 * Ia culoarea din `currentColor` prin `background`, deci urmează tokenul de
 * text sau de pistă al părintelui — exact ca pictogramele de cont din §8.3.
 * `aria-hidden` se pune în markup: sunt decorative, informația e în text.
 * ------------------------------------------------------------------------- */
.cnc-ico {
  display: inline-block; flex: 0 0 auto;
  width: 1em; height: 1em; background: currentColor;
  mask-repeat: no-repeat; mask-position: center; mask-size: contain;
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
}
.cnc-ico--lock         { mask-image: var(--cnc-ico-lock);         -webkit-mask-image: var(--cnc-ico-lock); }
.cnc-ico--lock-pending { mask-image: var(--cnc-ico-lock-pending); -webkit-mask-image: var(--cnc-ico-lock-pending); }
.cnc-ico--unlock       { mask-image: var(--cnc-ico-unlock);       -webkit-mask-image: var(--cnc-ico-unlock); }
.cnc-ico--imageoff     { mask-image: var(--cnc-ico-imageoff);     -webkit-mask-image: var(--cnc-ico-imageoff); }
.cnc-ico--lines        { mask-image: var(--cnc-ico-lines);        -webkit-mask-image: var(--cnc-ico-lines); }
.cnc-ico--search       { mask-image: var(--cnc-ico-search);       -webkit-mask-image: var(--cnc-ico-search); }
.cnc-ico--store        { mask-image: var(--cnc-ico-store);        -webkit-mask-image: var(--cnc-ico-store); }
.cnc-ico--info         { mask-image: var(--cnc-ico-info);         -webkit-mask-image: var(--cnc-ico-info); }
.cnc-ico--warning      { mask-image: var(--cnc-ico-warning);      -webkit-mask-image: var(--cnc-ico-warning); }
.cnc-ico--check        { mask-image: var(--cnc-ico-check);        -webkit-mask-image: var(--cnc-ico-check); }
.cnc-ico--lg { width: 20px; height: 20px; }

/* ── 19.2 Antetul anuntului ─────────────────────────────────────────────── */
.cnc-dhead { display: flex; flex-direction: column; gap: var(--s-5); }
.cnc-dhead__badges { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.cnc-dhead__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-7);
  font-size: var(--t-small); color: var(--c-text-muted-2);
  list-style: none; margin: 0; padding: 0;
}

/* ── 19.3 `.cnc-brief` — EROUL IERARHIEI A ─────────────────────────────
 * Cardul care tine textul cererii. Rail-ul de 4px e semnalul redundant nr. 3
 * din cele 4 (badge + pictograma + rail + tenta): in alb-negru ramane vizibil
 * ca pozitie si grosime, nu ca nuanta.
 * ------------------------------------------------------------------------- */
.cnc-brief {
  position: relative; background: var(--c-surface);
  border: 1px solid var(--track-border); border-radius: var(--r-lg);
  padding: var(--s-9) var(--s-9) var(--s-9) calc(var(--s-9) + 4px);
  overflow: hidden;
}
.cnc-brief__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--track-accent-strong); }
.cnc-brief__kicker {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-xsmall); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--track-accent); margin-bottom: var(--s-6);
}
.cnc-brief__text { font-size: var(--t-lead); line-height: 1.7; color: var(--c-ink-800); }
.cnc-brief__text > p:first-child { margin-top: 0; }
.cnc-brief__text > p:last-child { margin-bottom: 0; }
.cnc-brief__text img { max-width: 100%; height: auto; border-radius: var(--r-sm); }

/* ── 19.4 Starea „fara poze" pe cerere — INTENTIONATA ───────────────────
 * Nu e un placeholder de imagine lipsa. Pe cereri, absenta pozelor e norma
 * (26 din 39). Caseta explica de ce si muta asteptarea catre oferte.
 * ------------------------------------------------------------------------- */
.cnc-nomedia {
  display: flex; align-items: center; gap: var(--s-6);
  background: var(--track-tint); border: 1px dashed var(--track-border);
  border-radius: var(--r-md); padding: var(--s-6) var(--s-7);
  font-size: var(--t-small); color: var(--c-text-muted); line-height: 1.5;
  margin-bottom: var(--s-8);
}
.cnc-nomedia svg { flex: 0 0 auto; color: var(--track-accent); }

/* ── 19.5 Zona de galerie ───────────────────────────────────────────────
 * NU e grila din prototip. Galeria reala e un Swiper randat de plugin
 * (`$listing->the_gallery()`), cu navigatie, lightbox PhotoSwipe si dimensiuni
 * proprii — a o inlocui cu o grila `cnc-` ar fi insemnat s-o rescriem, adica
 * exact ce nu facem. Clasa da doar rama, colturi si aer.
 * ------------------------------------------------------------------------- */
.cnc-gallery { border-radius: var(--r-lg); overflow: hidden; }

/* ── 19.6 Coloana laterala ──────────────────────────────────────────────── */
.cnc-aside { display: flex; flex-direction: column; gap: var(--s-6); }

/* ── 19.7 Blocul de actiune ─────────────────────────────────────────────
 * Il foloseste azi doar ramura 3 (blocul owner, scris de noi). Celelalte patru
 * ramuri vin din plugin ca string si se imbraca in §20.5, pe selectoarele lui.
 * ------------------------------------------------------------------------- */
.cnc-actionbox {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--s-7);
  display: flex; flex-direction: column; gap: var(--s-5);
  box-shadow: var(--shadow-hairline);
}
.cnc-actionbox__lead { font-size: var(--t-small); color: var(--c-text-muted); line-height: 1.55; margin: 0; }
.cnc-actionbox__lead strong { color: var(--c-ink); }
.cnc-actionbox__note {
  font-size: var(--t-xsmall); color: var(--c-text-muted-2); line-height: 1.5;
  display: flex; gap: var(--s-4); align-items: flex-start; margin: 0;
}
.cnc-actionbox__note svg { flex: 0 0 auto; margin-top: 2px; }
.cnc-actionbox__note strong { color: var(--c-ink); }
/* Avertismentul de credite nu e o nuanta mai inchisa a aceleiasi note: e alt
   mesaj. Fond propriu, ca sa se vada INAINTE de clic, nu dupa (P4 §5). */
.cnc-actionbox__note.is-warning {
  background: var(--c-warning-50); border: 1px solid var(--c-gold-100);
  border-radius: var(--r-sm); padding: var(--s-5) var(--s-6);
  color: var(--c-warning);
}
.cnc-actionbox__note.is-warning strong { color: var(--c-warning); }
.cnc-actionbox--owner { border-color: var(--c-emerald-100); }

/* ── 19.8 Zona de oferte ────────────────────────────────────────────────
 * `.cnc-offerzone` = containerul RIDICAT din `.rtin-content` (vezi antetul lui
 * `content-single-2.php`). Tine doua lucruri: blocul de actiune si lista.
 * Numele NU contine „offers": `rtcl-offers.php:1387` ascunde cu `!important`
 * orice `section[class*="offers"]`. Un `<section class="cnc-offers">` ar fi
 * disparut in tacere. Aici e un `<div>`, dar disciplina se tine de nume.
 * ------------------------------------------------------------------------- */
.cnc-offerzone { margin-top: var(--s-10); display: flex; flex-direction: column; gap: var(--s-8); }
.cnc-offers__h { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.cnc-offers__count { font-variant-numeric: tabular-nums; }
.cnc-offers__hint { font-size: var(--t-xsmall); color: var(--c-text-muted-2); margin: 0 0 var(--s-6); }


/* ═══════════════════════════════════════════════════════════════════════════
 * §20 SKIN PAGINA DE ANUNT — Mod B, peste tema si peste DOUA pluginuri
 *
 * Pasul 5 din 06-implementare §4.3. ULTIMUL pas de implementare.
 * Sursa: P4 §2, §4, §9, §10 + DOM-ul real, citit din pagina randata.
 *
 * ┌─ TREI ADVERSARI DE SPECIFICITATE, TOTI MASURATI, NU PRESUPUSI ──────────┐
 * │ 1. TEMA — `assets/css/listing.css` are lanturi de (0,3,0) si (0,4,0) pe  │
 * │    tot cardul de contact: `.classified-seller-info .rtin-box .rtin-phone │
 * │    .numbers`. Regulile noastre din §4.9 sunt (0,2,0) si PIERD. De aceea  │
 * │    §20.2 le rescrie cu lantul complet + clasa noastra.                   │
 * │ 2. REDUX — CSS inline in `wp_head`, TIPARIT INAINTEA foii noastre, deci  │
 * │    la specificitate egala castigam noi. `.classima-single-details-2      │
 * │    .rtin-price` e (0,3,0): il batem cu (0,3,0) plus ordinea.             │
 * │ 3. PLUGINUL `rtcl-offers` — `<style>` in `wp_head` la prioritatea 10,    │
 * │    adica DUPA `wp_print_styles` (prioritatea 8). Verificat pe pagina     │
 * │    randata: foaia noastra e la octetul 57.709, blocul lui la 63.273.     │
 * │    La specificitate egala castiga EL. De aceea fiecare regula de la      │
 * │    §20.5 si §20.6 are ancora `.cnc-offerzone` in fata.                   │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * PLUS stilurile inline pe atribut, din plugin (P4 §4.2, punctul 27 din
 * registru: „recomandam `!important` in v1"). Sunt trei, toate masurate:
 *   · `:411` cardul „Inchis"  — `style="background:#f8fafc;border:1px solid
 *     #e5e7eb;color:#111827"`
 *   · `:837` butonul „Sterge" — `style="background:#dc2626;color:#fff;..."`
 *   · `:1999` bannerul verde  — deja tratat in §10.
 * Un stil inline nu se poate bate altfel decat cu `!important` (§6.6).
 *
 * CE NU FACE NICIO REGULA DE AICI: nu ascunde si nu arata nimic legat de
 * contact. Vizibilitatea contactului e decisa server-side de plugin, care
 * SCOATE numarul din HTML — nu il ascunde cu CSS (P4 §3.1). Nu exista, in tot
 * §20, nicio regula de `display` sau `visibility` pe `.rtin-name`,
 * `.rtin-phone`, `.numbers` sau `.rtcl-contact-reveal-wrapper`.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── 20.1 LAYOUT — doua coloane, sidebarul la DREAPTA ───────────────────
 * Tema randeaza coloana laterala INAINTEA continutului
 * (`RDTheme::$layout == 'left-sidebar'` -> `single-rtcl_listing.php:31`).
 * Plansa o vrea la dreapta. Nu mutam noduri (P4 §10 cere ordinea de focus
 * neschimbata) — inversam cu `order`, ceea ce lasa DOM-ul si tabularea intacte.
 *
 * Efectul secundar e chiar cel dorit pe mobil: la sub 992px coloanele se
 * stivuiesc in ordinea din DOM, deci contactul si blocul de actiune ajung
 * DEASUPRA listei de oferte — exact P4 §9, fara o linie de JavaScript.
 *
 * Ancora e `#primary > .container > .row`, cu `>` obligatoriu: mai exista un
 * `.row` INAUNTRUL continutului (`.rtin-content-area > .row`), iar o regula
 * fara `>` l-ar fi intors si pe acela.
 * ------------------------------------------------------------------------- */
body.cnc-single #primary > .container > .row { row-gap: var(--s-9); }

@media (min-width: 992px) {
  body.cnc-single #primary > .container > .row > .col-xl-3,
  body.cnc-single #primary > .container > .row > .col-lg-4 { order: 2; }
  body.cnc-single #primary > .container > .row > .col-xl-9,
  body.cnc-single #primary > .container > .row > .col-lg-8 { order: 1; }

  /* Sticky pe `aside`, NU pe `.cnc-aside`: blocul care da inaltimea de
     derulare e coloana Bootstrap (`.col-xl-3`, intinsa pe toata inaltimea
     randului de flex). `.cnc-aside` e nepot, iar parintele lui, `aside`, are
     inaltimea continutului — un sticky acolo nu ar avea pe ce sa alunece.
     Capcana §6.9 (un stramos cu `overflow:hidden` omoara sticky-ul in tacere)
     s-a verificat in browser pe lantul #primary > .container > .row. */
  body.cnc-single #primary > .container > .row > div > aside.sidebar-widget-area {
    position: sticky; top: var(--s-7);
  }
}

/* Celelalte widgeturi din coloană — azi doar cel de chat, din
   `dynamic_sidebar( 'sidebar-single-listing' )`. Nu le rescriem conținutul; le
   punem în același card ca lockstrip-ul, ca sidebarul să arate ca o coloană, nu
   ca două componente lipite. */
.cnc-aside > .widget:not(.classified-seller-info) {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--s-7); margin: 0;
}
.cnc-aside > .widget:not(.classified-seller-info) > .widgettitle {
  font-size: var(--t-small); font-weight: 800; color: var(--c-ink);
  margin: 0 0 var(--s-5); padding: 0;
}
.cnc-aside > .widget:not(.classified-seller-info) > .widgettitle::after { display: none; }
.cnc-aside > .widget:not(.classified-seller-info) p {
  font-size: var(--t-small); color: var(--c-text-muted); line-height: 1.55; margin: 0;
}

/* Fundalul paginii + banda de titlu a temei.
   Banda ramane: pe pagina de anunt `<h1>`-ul ei e SINGURUL titlu al anuntului
   — spre deosebire de „Cum functioneaza" sau de arhive, continutul nu-si
   tipareste titlul deloc (`content-single-2.php` incepe direct cu galeria). */
body.cnc-single .site-content-block { background: transparent; }
body.cnc-single .theme-banner .entry-title { font-size: var(--t-h1); line-height: 1.15; }

/* ── 20.2 CARDUL DE CONTACT, IN LOCKSTRIP ───────────────────────────────
 * Regulile din §4.9 sunt (0,2,0) si pierd in fata temei, care are (0,3,0) si
 * (0,4,0) pe acelasi lant. Aici se reia lantul COMPLET, cu clasa noastra in
 * fata, ca sa castige pe specificitate, nu pe ordine.
 *
 * LISTA NEAGRA, inca o data: nicio clasa de mai jos nu e redenumita, niciun
 * element nu e ascuns, iar fraza „Apasa pentru a vedea numarul" nu e atinsa.
 * Se schimba culori, spatii si colturi.
 * ------------------------------------------------------------------------- */
.cnc-lockstrip__core.classified-seller-info { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; }
.cnc-lockstrip__core.classified-seller-info .rtin-box { padding: 0; }

/* Numele. Titlul (`.widgettitle`) ramane ascuns de mu-plugin si rescris de el
   in JS — nu-l atingem, doar ii dam tipografia corecta cand reapare. */
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtin-author { margin-bottom: var(--s-6); }
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtin-author .rtin-name {
  font-size: var(--t-body); font-weight: 700; line-height: 1.4; margin-bottom: 0;
}
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtin-author .rtin-name a { color: var(--c-ink); }
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtin-author .rtin-name a:hover { color: var(--c-emerald); }
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtin-author img { max-width: 40px; }

/* Starea online/offline: pastilele temei sunt rosu/verde pur. Le aducem pe
   tokeni, pastrand exact acelasi mecanism (`::before` pe `> span`). */
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtcl-user-status > span {
  font-size: var(--t-xsmall); color: var(--c-text-muted-2); padding-left: 18px;
}
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtcl-user-status > span::before {
  width: 8px; height: 8px; top: 3px; left: 3px;
}
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtcl-user-status.online > span::before { background: var(--c-success); }
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtcl-user-status.offline > span::before { background: var(--c-text-faint); }

/* Caseta de telefon. `.rtin-phone` e cutia temei (gri `#f2f2f2`, colturi de
   2px); wrapperul de dezvaluire e inauntru si e stilizat in §4.9.
   Caseta trebuie sa incapa 45 de caractere pe mobil, nu 28: pluginul
   inlocuieste fraza din miez cu una mai lunga (`:1243`). De aceea nu are
   `white-space: nowrap` si are `line-height` generos. */
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtin-phone {
  background: none; border-radius: 0; padding: 0; margin-top: var(--s-5);
}
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtin-phone .numbers {
  font-size: var(--t-h4); font-weight: 800; color: var(--c-ink);
  font-variant-numeric: tabular-nums; letter-spacing: .04em; line-height: 1.3;
}
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtin-phone .numbers a { color: var(--c-ink); }
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtin-phone .numbers::before,
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtin-phone .rtcl-contact-reveal-wrapper .numbers a:first-child::before {
  color: var(--track-accent); padding-right: var(--s-5);
}
.cnc-lockstrip[data-lock="locked"] .cnc-lockstrip__core .rtin-phone .numbers,
.cnc-lockstrip[data-lock="pending"] .cnc-lockstrip__core .rtin-phone .numbers { color: var(--c-text-faint); }

/* Butonul de chat: roz `#f85c70` din tema -> emerald. */
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtin-chat { margin-top: var(--s-6); }
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtin-chat a {
  background-color: var(--c-emerald); color: var(--c-on-accent);
  border-radius: var(--r-sm); padding: 11px var(--s-7); font-weight: 700;
  font-size: var(--t-small); text-align: center; min-height: 44px;
  display: flex; align-items: center; justify-content: center; gap: var(--s-4);
}
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtin-chat a:hover { background-color: var(--c-emerald-700); }
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtin-chat a i { padding-right: 0; }

/* Butonul de email: gri inchis din tema -> secundar. */
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtin-email { margin-top: var(--s-5); }
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtin-email a {
  background-color: var(--c-surface); color: var(--c-emerald);
  border: 1px solid var(--c-emerald-100); border-radius: var(--r-sm);
  padding: 11px var(--s-7); font-weight: 700; font-size: var(--t-small);
  text-align: center; min-height: 44px;
  display: flex; align-items: center; justify-content: center; gap: var(--s-4);
}
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtin-email a:hover { background-color: var(--c-emerald-50); }

/* Locatia si celelalte `.rtin-box-item` — tema le pune pe `float`. */
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtin-box-item { margin-top: var(--s-5); }
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtin-box-item i { color: var(--c-text-faint); width: 20px; margin-top: 3px; }
.cnc-lockstrip__core.classified-seller-info .rtin-box .rtin-box-item .rtin-box-item-text {
  font-size: var(--t-small); color: var(--c-text-muted); width: calc(100% - 20px);
}

/* Mesajul „Trebuie sa fiti conectat…" pentru vizitatorii delogati. */
.cnc-lockstrip__core.classified-seller-info .login-message {
  font-size: var(--t-xsmall); color: var(--c-text-muted); line-height: 1.55; margin: 0;
}
.cnc-lockstrip__core.classified-seller-info .login-message a { color: var(--c-emerald); font-weight: 700; }

/* ── 20.2.1 CELE DOUA COPII ALE CARDULUI — care se vede la ce latime ────
 * `seller-info.php` se randeaza de DOUA ori: o data in coloana laterala si o
 * data in copia mobila a temei (`single-rtcl_listing.php:57`). Tema le comuta
 * cu doua reguli care se bat intre ele:
 *   `.classima-listing-single-sidebar .classified-seller-info{display:none}`
 *   la <=991px, apoi `.classima-listing-single-mob .classified-seller-info
 *   {display:block !important}` — iar copia mobila are AMANDOUA clasele.
 *
 * PROBLEMA PE CARE O CREEAZA INVELISUL NOSTRU: regula temei ascunde
 * `.classified-seller-info`, dar `.cnc-lockstrip` e PARINTELE ei si ramane
 * vizibil. Sub 992px ar fi aparut un lockstrip cu antet, bara de progres si
 * corp GOL, in coloana laterala.
 *
 * DECIZIA: pe mobil pastram exemplarul din coloana laterala si ascundem
 * invelisul din copia mobila. Motivul e P4 §9 — la 360-599px contactul si
 * blocul de actiune trebuie sa fie DEASUPRA listei de oferte, iar coloana
 * laterala e prima in DOM. Copia mobila e ultima, dupa oferte.
 * Nu ascundem containerul mobil intreg: el mai gazduieste
 * `classima_single_listing_mobile_info`, folosit de formularul de rezervare.
 * ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* copia mobila: invelisul iese, miezul ramane in DOM (JS-ul de mascare al
     pluginului itereaza pe TOATE exemplarele — nu-i taiem niciunul) */
  body.cnc-single .classima-listing-single-mob .cnc-lockstrip { display: none; }

  /* coloana laterala: miezul, reafisat peste regula temei.
     (0,4,0) + clasa noastra bate (0,2,0) al temei. */
  body.cnc-single .classima-listing-single-sidebar:not(.classima-listing-single-mob) .cnc-lockstrip__core.classified-seller-info {
    display: block;
  }
}

/* ── 20.3 ANTET, GALERIE, PRET ──────────────────────────────────────────── */
/* Tema centrează `.single-listing-meta-wrap` pe stilul 2. Pe o pagină al cărei
   erou e un bloc de TEXT aliniat la stânga, un antet centrat rupe axa de
   citire — prins la QA vizual, nu în cod. */
/* 🔴 `body.cnc-single` e obligatoriu: regula temei care centrează antetul e
   `.classima-listing-single .classima-single-details-2 .single-listing-meta-wrap`
   (0,3,0), iar `.cnc-detail .cnc-dhead` e doar (0,2,0). Măsurat în browser:
   `alignItems` rămânea `center` deși declarasem `flex-start`. */
body.cnc-single .cnc-detail .cnc-dhead {
  margin: var(--s-8) 0 var(--s-7);
  text-align: left; align-items: flex-start;
}
body.cnc-single .cnc-detail .cnc-dhead .single-listing-meta { justify-content: flex-start; }
.cnc-detail .cnc-dhead .single-listing-meta { margin-bottom: 0; }
.cnc-detail .cnc-dhead .single-listing-meta li i { color: var(--c-text-faint); margin-right: var(--s-3); }
.cnc-detail .cnc-dhead .single-listing-meta li a { color: var(--c-text-muted); }
.cnc-detail .cnc-dhead .single-listing-meta li a:hover { color: var(--c-emerald); }

/* Galeria. Cutia temei are `padding-bottom:20px` chiar si cand e goala; pe
   cereri e goala in doua cazuri din trei, deci ar fi lasat 20px de nimic. */
.cnc-detail .rtin-slider-box { padding-bottom: 0; margin-bottom: var(--s-8); }
.cnc-detail .rtin-slider-box.no-gallery-image { display: none; }

/* Pretul. Redux il picteaza verde plin (`.classima-single-details-2
   .rtin-price`, (0,3,0), tiparit INAINTEA foii noastre). Pastila aurie a
   sistemului castiga la specificitate egala, prin ordine. */
.cnc-detail .rtin-price.cnc-price {
  background-color: var(--c-gold); color: var(--c-ink);
  display: inline-flex; width: auto; padding: 7px var(--s-6);
  border-radius: var(--r-pill); margin-bottom: var(--s-7);
}
.cnc-detail .rtin-price.cnc-price .rtcl-price,
.cnc-detail .rtin-price.cnc-price .rtcl-price-amount { color: var(--c-ink); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── 20.4 „PREZENTARE GENERALA" DEVINE FOAIE DE SPECIFICATII ────────────
 * ABATERE MASURATA FATA DE SPEC (constatarea C35).
 *    P4 §4.1 randul 5 lega `.cnc-specs` de `.rtin-specs` / `ul.rtin-spec-items`
 *    („Features" din temă). Pe cinecum acea lista e GOALA pe toate anunturile
 *    verificate: campul `classima_spec_info` nu e completat de nimeni, fiindca
 *    wizardul nu-l cere. Lista care CHIAR se randeaza e a pluginului —
 *    „Prezentare generala", `.classima-custom-fields > ul.rtcl-cf-properties`,
 *    din coloana `col-md-4`. Foaia de specificatii se aplica pe ea; regulile
 *    pentru `.rtin-specs` raman, pentru cazul in care campul se completeaza.
 * ------------------------------------------------------------------------- */
.cnc-detail .rtin-content-area { margin-top: 0; }
.cnc-detail .rtin-content-area > .row { row-gap: var(--s-8); }

.cnc-detail .cnc-aside2 .rtin-specs-title,
.cnc-detail .rtin-specs .rtin-specs-title {
  font-size: var(--t-xsmall); font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-text-muted-2); margin: 0 0 var(--s-6);
}
.cnc-detail .cnc-aside2 .rtin-specs-title::after,
.cnc-detail .rtin-specs .rtin-specs-title::after { display: none; }

.cnc-detail .classima-custom-fields .rtcl-cf-properties {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--c-border); border: 1px solid var(--c-border);
  border-radius: var(--r-md); overflow: hidden;
}
.cnc-detail .classima-custom-fields .rtcl-cf-properties > li {
  background: var(--c-surface); padding: var(--s-6) var(--s-7); margin: 0; border: 0;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.cnc-detail .classima-custom-fields .rtcl-cf-properties > li::before { content: none; }
/* Cele doua puncte sunt un nod de TEXT direct in `.rtin-label`, langa `<span>`.
   `font-size:0` pe parinte il stinge fara sa atinga eticheta. */
.cnc-detail .classima-custom-fields .rtcl-cf-properties .rtin-label { font-size: 0; margin: 0; }
.cnc-detail .classima-custom-fields .rtcl-cf-properties .rtin-label > span {
  font-size: var(--t-xsmall); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--c-text-muted-2);
}
.cnc-detail .classima-custom-fields .rtcl-cf-properties .rtin-title {
  font-size: var(--t-body); font-weight: 700; color: var(--c-ink); line-height: 1.4;
}

.cnc-detail .rtin-specs .rtin-spec-items {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--c-border); border: 1px solid var(--c-border);
  border-radius: var(--r-md); overflow: hidden;
}
.cnc-detail .rtin-specs .rtin-spec-items li {
  background: var(--c-surface); padding: var(--s-6) var(--s-7);
  font-size: var(--t-small); color: var(--c-ink); width: auto;
}
.cnc-detail .rtin-specs .rtin-spec-items li::before { display: none; }

/* Bara de meta a anuntului (vizualizari, favorite, raportare). */
.cnc-detail .rtcl-single-listing-action {
  margin: var(--s-7) 0 0; padding: 0; border: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--s-5); font-size: var(--t-xsmall);
}
.cnc-detail .rtcl-single-listing-action > li {
  border: 1px solid var(--c-border); border-radius: var(--r-pill);
  padding: 7px var(--s-6); background: var(--c-surface); color: var(--c-text-muted);
  display: inline-flex; align-items: center; gap: var(--s-3);
}
.cnc-detail .rtcl-single-listing-action > li a { color: var(--c-text-muted); }
.cnc-detail .rtcl-single-listing-action > li a:hover { color: var(--c-emerald); }

/* ── 20.5 BLOCUL DE ACTIUNE — cele 5 ramuri ale `[rtcl_offer_button]` ───
 * Ordinea ramurilor e FIXA in PHP (`rtcl-offers.php:397-470`) si nu se schimba:
 *   1 acceptata -> `.rtcl-offer-card` cu doua `.rtcl-offer-alert`
 *   2 nelogat   -> `a.button`
 *   3 owner     -> SIR GOL (de aici blocul nostru, §19.7)
 *   4 limita 3  -> `.rtcl-offer-alert.error` + buton `disabled`
 *   5 altfel    -> `#rtcl-offer-open` + `#rtcl-offer-form`
 * Ramura 1 BATE ramura 3: dupa acceptare, pana si owner-ul vede „Inchis".
 *
 * ID-urile `#rtcl-offer-open`, `#rtcl-offer-form`, `#rtcl-offer-images`,
 * `#rtcl-offer-resp` si `name=`-urile (`amount`, `message`, `offer_images[]`,
 * `listing_id`, nonce) sunt in lista neagra: stilizate, NEMUTATE, neredenumite.
 *
 * NU ATINGEM `display` PE `#rtcl-offer-form`. Comutatorul pluginului scrie
 *    `form.style.display` inline; un `!important` de-al nostru l-ar fi blocat
 *    inchis, adica ar fi rupt trimiterea ofertelor. Vezi si C34: pentru
 *    utilizatorii logati fara oferta la acel anunt, pluginul insusi forteaza
 *    `form[id*="offer"]{display:block!important}` (`:1393`), deci formularul e
 *    deja deschis. Skinul trebuie sa arate bine in AMBELE stari.
 * ------------------------------------------------------------------------- */
.cnc-offerzone .rtcl-offer-card,
.cnc-offerzone .rtcl-offer-form {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: var(--s-7);
  box-shadow: var(--shadow-hairline); max-width: none;
}
.cnc-offerzone .rtcl-offer.rtcl-offer-card > .rtcl-offer-form { margin-top: var(--s-6); }

/* Ramura 2 — `a.button` al pluginului, fara nicio clasa proprie. */
.cnc-offerzone > a.button,
.cnc-offerzone .rtcl-offer-toggle,
.cnc-offerzone .rtcl-offer-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-4);
  font-family: inherit; font-size: var(--t-small); font-weight: 700;
  min-height: 46px; padding: 0 var(--s-8); border: 0; border-radius: var(--r-sm);
  background: var(--c-gold); color: var(--c-ink); box-shadow: var(--shadow-gold);
  cursor: pointer; text-align: center; transition: background var(--dur-fast) var(--ease-standard);
}
.cnc-offerzone > a.button:hover,
.cnc-offerzone .rtcl-offer-toggle:hover,
.cnc-offerzone .rtcl-offer-submit:hover { background: var(--c-gold-600); color: var(--c-ink); transform: none; }
.cnc-offerzone > a.button { width: 100%; }
.cnc-offerzone .rtcl-offer-toggle { width: 100%; }

/* Butonul de trimitere e AURIU, nu emerald: e o OFERTA, chiar daca traieste pe
   pagina unei cereri. Mandatul central al proiectului — semnalul de pista bate
   conventia „butonul principal e verde". */
.cnc-offerzone .rtcl-offer-toggle[disabled],
.cnc-offerzone .rtcl-offer-submit[disabled] {
  background: var(--c-border-strong); color: var(--c-text-muted); box-shadow: none; cursor: not-allowed;
}
/* 44px, nu 40: ținta minimă de atingere din P4 §10. Măsurat în browser —
   la 40px pica exact butonul „Anulează". */
.cnc-offerzone .rtcl-offer-cancel {
  background: none; color: var(--c-text-muted); border: 1px solid var(--c-border);
  border-radius: var(--r-sm); min-height: 44px; padding: 0 var(--s-7);
  font-family: inherit; font-size: var(--t-small); font-weight: 700; cursor: pointer;
  margin-left: var(--s-5);
}
.cnc-offerzone .rtcl-offer-cancel:hover { background: var(--c-bg-alt); color: var(--c-ink); }

/* Campurile formularului. */
.cnc-offerzone .rtcl-offer-field { margin: 0 0 var(--s-6); }
.cnc-offerzone .rtcl-offer-label {
  font-size: var(--t-small); font-weight: 700; color: var(--c-ink);
  margin: 0 0 var(--s-4); display: block;
}
.cnc-offerzone .rtcl-offer-field input[type="number"],
.cnc-offerzone .rtcl-offer-field textarea,
.cnc-offerzone .rtcl-offer-field input[type="file"] {
  width: 100%; font-family: inherit; font-size: var(--t-body); color: var(--c-ink);
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm); padding: 11px var(--s-6); min-height: 46px;
}
.cnc-offerzone .rtcl-offer-field input:focus,
.cnc-offerzone .rtcl-offer-field textarea:focus {
  border-color: var(--c-gold-600); box-shadow: 0 0 0 3px rgba(226, 169, 59, .25); outline: none;
}
.cnc-offerzone .rtcl-offer-field small {
  display: block; margin-top: var(--s-4);
  font-size: var(--t-xsmall); color: var(--c-text-muted-2); line-height: 1.5;
}

/* Alertele. `.rtcl-offer-alert` are `style=""` inline pe ramura 1 — de aici
   `!important`, exact pe cele trei proprietati pe care le scrie atributul
   (`background`, `border`, `color`) si pe niciuna in plus. */
.cnc-offerzone .rtcl-offer-alert {
  border-radius: var(--r-sm); padding: var(--s-6) var(--s-7);
  font-size: var(--t-small); font-weight: 600; line-height: 1.5;
  background: var(--c-bg-alt) !important; border: 1px solid var(--c-border) !important;
  color: var(--c-text-muted) !important;
}
.cnc-offerzone .rtcl-offer-alert.success {
  background: var(--c-success-50) !important; border-color: var(--c-emerald-100) !important;
  color: var(--c-success) !important;
}
.cnc-offerzone .rtcl-offer-alert.error {
  background: var(--c-danger-50) !important; border-color: var(--c-danger-100) !important;
  color: var(--c-danger) !important;
}
.cnc-offerzone .rtcl-offer-response:not(:empty) {
  margin-top: var(--s-6); font-size: var(--t-small); color: var(--c-text-muted);
}

/* ── 20.6 LISTA DE OFERTE ───────────────────────────────────────────────
 * Markup-ul se produce prin concatenare de string, fara `post_class()` si fara
 * niciun filtru (P4 §4.3), deci clasele `cnc-` din plansa raman VOCABULAR DE
 * DESIGN: in CSS se scriu pe selectoarele reale.
 *
 * `#oferte` e ancora de link (blocul owner trimite acolo) — nu se redenumeste.
 * `.rtcl-offer-bidder.is-masked` si `.rtcl-badge--accepted` sunt CITITE de PHP:
 * se imbraca, nu se inlocuiesc.
 * ------------------------------------------------------------------------- */
.cnc-offerzone .rtcl-offers-wrap { margin: 0; }
.cnc-offerzone .rtcl-offers-wrap h3 {
  font-size: var(--t-h3); margin: 0 0 var(--s-6); color: var(--c-ink);
}
.cnc-offerzone .rtcl-offers-list { display: flex; flex-direction: column; gap: var(--s-5); }

/* Fiecare oferta poarta rail AURIU: e o oferta, chiar pe pagina unei cereri.
   `--track-*` se forteaza local, fiindca zona mosteneste `data-track` de la
   anunt, care pe cereri e emerald. */
.cnc-offerzone .rtcl-offer-item {
  position: relative; overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); box-shadow: none;
  padding: var(--s-7) var(--s-7) var(--s-7) calc(var(--s-7) + 4px);
  gap: var(--s-6); align-items: flex-start;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.cnc-offerzone .rtcl-offer-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--c-gold);
}
.cnc-offerzone .rtcl-offer-item:hover { border-color: var(--c-gold-100); box-shadow: var(--shadow-soft); }
.cnc-offerzone .rtcl-offer-left { gap: var(--s-4); }
.cnc-offerzone .rtcl-offer-row { gap: var(--s-5); }
.cnc-offerzone .rtcl-offer-amount {
  font-size: var(--t-h4); font-weight: 800; color: var(--c-ink); font-variant-numeric: tabular-nums;
}
.cnc-offerzone .rtcl-offer-id { font-size: var(--t-xsmall); font-weight: 600; color: var(--c-text-faint); font-variant-numeric: tabular-nums; }
.cnc-offerzone .rtcl-offer-bidder { font-size: var(--t-small); font-weight: 600; color: var(--c-text-muted); }
/* Masca `a******* ******` trebuie sa arate ca o MASCA, nu ca o eroare de
   randare. Monospace + tracking o fac lizibila ca intentie. */
.cnc-offerzone .rtcl-offer-bidder.is-masked {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .06em; color: var(--c-text-muted-2);
}
.cnc-offerzone .rtcl-offer-meta { gap: var(--s-4); }

/* Badge-urile de status. Cele `rtcl-` raman; le imbracam pe tokeni. */
.cnc-offerzone .rtcl-badge {
  font-size: var(--t-xsmall); font-weight: 800; line-height: 1;
  padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid transparent;
}
.cnc-offerzone .rtcl-badge--pending { background: var(--c-warning-50); border-color: var(--c-gold-100); color: var(--c-warning); }
.cnc-offerzone .rtcl-badge--accepted { background: var(--c-success-50); border-color: var(--c-emerald-100); color: var(--c-success); }
.cnc-offerzone .rtcl-badge--rejected { background: var(--c-danger-50); border-color: var(--c-danger-100); color: var(--c-danger); }

/* Actiunile. Tinta de atingere minima 44px (P4 §10). */
.cnc-offerzone .rtcl-offer-actions { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-end; flex: 0 0 auto; }
.cnc-offerzone .rtcl-offer-actions .rtcl-offer-accept {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--s-7); border-radius: var(--r-sm);
  background: var(--c-emerald); color: var(--c-on-accent);
  font-size: var(--t-small); font-weight: 700; border: 0; white-space: nowrap;
}
.cnc-offerzone .rtcl-offer-actions .rtcl-offer-accept:hover { background: var(--c-emerald-700); color: var(--c-on-accent); }
.cnc-offerzone .rtcl-offer-accept.is-loading { opacity: .6; pointer-events: none; }

/* „Sterge" vine cu `style="background:#dc2626;color:#fff;border:none;
   margin-left:8px"` inline (`:837`) — singura cale e `!important`, pe exact
   proprietatile pe care le scrie atributul. Eticheta ramane „Sterge": „Retrage"
   din plansa e o TRADUCERE, nu o modificare de cod (P4 §4.3). */
.cnc-offerzone .rtcl-offer-actions .rtcl-offer-delete {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--s-7); border-radius: var(--r-sm);
  font-size: var(--t-small); font-weight: 700; white-space: nowrap;
  background: none !important; color: var(--c-text-muted) !important;
  border: 1px solid var(--c-border) !important; margin-left: 0 !important;
}
.cnc-offerzone .rtcl-offer-actions .rtcl-offer-delete:hover {
  background: var(--c-danger-50) !important; color: var(--c-danger) !important;
  border-color: var(--c-danger-100) !important;
}

/* Miniaturile ofertei — doar 7 din 80 de oferte au imagini. */
.cnc-offerzone .rtcl-offer-images { gap: var(--s-4); margin-top: var(--s-5); }
.cnc-offerzone .rtcl-offer-image-thumb {
  width: 56px; height: 56px; border-radius: var(--r-xs);
  border: 1px solid var(--c-border); object-fit: cover;
}

/* Starea goala: `<p>Nu exista oferte inca.</p>`, fara clasa, generat la `:780`.
   P4 §4.4 alege varianta 1 din trei — tratam `<p>`-ul ca stare goala, cu CSS,
   fara nicio linie de PHP. Textul insusi nu se poate schimba: e hardcodat fara
   `__()`, deci invizibil pentru Loco (punctul 26 din registru). */
/* 🔴 `:not(.cnc-offers__hint)` NU e paranoia. `cnc-single.js` inserează
   explicația măștii ca `<p>`, sora lui `<h3>`, tot în `#oferte` — fără gard,
   propria noastră notă ar fi fost desenată ca o cutie punctată de „stare
   goală", deasupra unei liste pline. Prins la QA vizual, nu la citire. */
.cnc-offerzone .rtcl-offers-wrap > p:not(.cnc-offers__hint) {
  text-align: center; margin: 0;
  background: var(--c-bg-alt); border: 1px dashed var(--c-border);
  border-radius: var(--r-md); padding: var(--s-10) var(--s-8);
  font-size: var(--t-small); color: var(--c-text-muted);
}
.cnc-offerzone .rtcl-offers-wrap > p:not(.cnc-offers__hint)::before {
  content: ''; display: block; width: 44px; height: 44px; margin: 0 auto var(--s-6);
  background: var(--c-border-strong); mask-image: var(--cnc-ico-empty);
  -webkit-mask-image: var(--cnc-ico-empty); mask-repeat: no-repeat; mask-size: contain;
  -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain;
}

/* Cand gardul pluginului sterge lista (C33), zona nu mai are ce anunta.
   Marcajul vine din PHP; CSS-ul doar strange spatiul, nu ascunde continut. */
.cnc-offerzone[data-offers="hidden"] { gap: var(--s-6); }

/* 🔴 CONSTATAREA C40 — pe pista `oferta`, zona de oferte NU are ce cauta.
 * `mu-plugins/cc-ascunde-oferte-vanzari-auto.php` ascunde, pentru categoria
 * `vanzari-piese-auto`, `#rtcl-offer-open`, `.rtcl-offer-card` si
 * `.rtcl-offers-wrap`. Lista lui NU acopera insa ramura 2 din
 * `[rtcl_offer_button]`, care pentru vizitatorii DELOGATI intoarce un simplu
 * `<a class="button">Autentifica-te pentru a trimite o oferta</a>`, fara nicio
 * clasa proprie. Masurat pe anuntul 4954: butonul se vede, pe un anunt unde
 * ofertele sunt oprite prin design. Nu e o regresie de-a noastra — era acolo si
 * inainte, doar ca inauntrul lui `.rtin-content`.
 *
 * Ascundem ZONA, nu inventam o regula noua: conditia e identica cu a
 * mu-pluginului (`has_term('vanzari-piese-auto')`, acelasi slug pe care il
 * oglindeste `cnc_get_track()`), iar rezultatul e cel pe care mu-pluginul il
 * urmarea oricum. Zero atingere a logicii: butonul ducea la autentificare,
 * dupa care oferta tot nu se putea trimite. */
body.cnc-track-oferta .cnc-offerzone { display: none; }

/* ── 20.7 RESPONSIVE — pragurile reale ale proiectului: 991px si 500px ──
 * P4 §9 cerea 992 / 600 / 360. Se folosesc pragurile deja stabilite la P3
 * (991.98 si 500), ca sa nu apara un al treilea set de rupturi in site.
 * ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .cnc-detail .cnc-dhead { margin-top: var(--s-7); }
  .cnc-offerzone { margin-top: var(--s-9); }
}

@media (max-width: 600px) {
  .cnc-brief { padding: var(--s-7) var(--s-7) var(--s-7) calc(var(--s-7) + 4px); border-radius: var(--r-md); }
  .cnc-brief__text { font-size: var(--t-body); }
  .cnc-nomedia { align-items: flex-start; }

  /* Cardul de oferta trece pe verticala, actiunile pe un rand orizontal
     (P4 §9). Pluginul il tine `align-items:flex-start` sub 640px, dar nu
     schimba directia — de aici regula. */
  .cnc-offerzone .rtcl-offer-item { flex-direction: column; }
  .cnc-offerzone .rtcl-offer-actions { flex-direction: row; align-items: center; width: 100%; }
  .cnc-offerzone .rtcl-offer-actions > * { flex: 1; }
  .cnc-offerzone .rtcl-offer-cancel { margin-left: 0; margin-top: var(--s-5); width: 100%; }
}

@media (max-width: 500px) {
  .cnc-brief { padding: var(--s-6) var(--s-6) var(--s-6) calc(var(--s-6) + 4px); }
  .cnc-detail .cnc-dhead__meta { gap: var(--s-4) var(--s-6); }
  .cnc-offerzone .rtcl-offer-item { padding: var(--s-6) var(--s-6) var(--s-6) calc(var(--s-6) + 4px); }
}


/* ===========================================================================
 * STARE — pașii din 06-implementare.md §4.3
 *
 *   ✅ 1. skin dashboard                            (P6 §3, §5)   → §8
 *   ✅ 2. skin `/trimite-date/` + banner permanent  (P4 §7.1,7.3) → §10
 *   ✅ 3. skin listă anunțuri / card                (P3)          → §14 + §15
 *        Toate cele 5 arhive. 6 override-uri T2 + `inc/cnc-archive.php`
 *        (tabelul canonic de copy) + `assets/js/cnc-archive.js`.
 *        🔴 T3-ul de la abonare a fost EVITAT, nu plătit: markup propriu peste
 *           ancorele mu-pluginului + `widget_display_callback`, deci zero linii
 *           scrise în afara temei copil.
 *        🔴 Trei abateri măsurate față de planșă — grila trece pe `auto-fill`
 *           (pragurile de viewport dădeau 4 carduri de 207px lângă sidebar),
 *           breadcrumb-ul renunță la sloturile `[hidden]` (regula de mobil a
 *           prototipului le reafișa), iar arhiva 18 rămâne fără panou de filtre
 *           (butonul „Filtrează" nu se poate activa acolo NICIODATĂ).
 *           Detaliile, în `STATUS.md`, secțiunea de 18.08.
 *   ✅ 4. homepage (Elementor)                      (P2 + erata)  → §13
 *        ✅ INCLUSIV panoul „Căutare avansată" (§13.6). Decizia a1/a2 din specul
 *           P2 §4.2 s-a închis cu o a treia variantă: o singură instanță de
 *           `[caut_dropdown]` (deci zero ID-uri duplicate), iar pastilele de
 *           intenție reumplu `#caut-dd-level1` prin acțiunea AJAX publică a
 *           mu-pluginului — fără reîncărcare de pagină și fără PHP de business.
 *           `CautDropdown.parentId` nu e citit NICIODATĂ de `caut-dropdown.js`,
 *           deci lista de opțiuni e singura stare legată de instanță.
 *   ✅ 5. pagina de anunț + `cnc-lockstrip`         (P4 §3, §4)   → §19 + §20
 *        3 override-uri T2 + `inc/cnc-single.php` + `assets/js/cnc-single.js`.
 *        🔴 **TESTUL DE MASCARE: TRECUT** (20.08), pe 3 anunțuri × toate rolurile —
 *           delogat · ofertant pending · ofertant respins · ofertant ACCEPTAT ·
 *           owner · anunț din `vanzari-piese-auto`. Zero telefon în HTML pentru
 *           cine nu are voie, zero `href="tel:"` real, ancorele listei negre
 *           intacte. Raportul: `STATUS.md`, secțiunea de 20.08.
 *        🔴 Opt constatări noi (C33–C40). Trei schimbă implementarea față de spec:
 *           · **C33** — lista de oferte NU e publică: un al doilea gard din plugin
 *             o ȘTERGE din DOM pentru vizitatorii fără ofertă. Stările C1–C3 din
 *             matricea P4 nu se pot produce. `data-offers` oglindește gardul.
 *           · **C36** — `<svg>` inline MOARE pe pagina asta: scrubberul de
 *             telefoane rescrie `viewBox="0 0 24 24"` în `viewBox="****"`.
 *             Toate pictogramele sunt măști CSS (`--cnc-ico-*`, `.cnc-ico`).
 *           · **C37** — `rtcl_count_user_offers_for_listing()` întoarce MEREU 0
 *             (`no_found_rows` + `found_posts`). Specul o folosea. Consecință în
 *             plugin: limita de 3 oferte nu se aplică NICIODATĂ.
 *        ➕ Reparate aici, deși vin din pașii 3 și 6: al doilea `<h1>` de pe
 *           `/all-ads/` și de pe `/post-an-ad/` (`template-parts/content-banner.php`).
 *   ✅ 6. wizard `/post-an-ad/`                     (P5)          → §16 + §17
 *        Toate cele 5 formulare (6·6·5·6·7 pași). 1 override T2 + `inc/cnc-wizard.php`
 *        + `assets/js/cnc-wizard.js`. Skin pe DOUĂ straturi: `.rtcl-fb-*` (structură)
 *        și `.ant-*` (control) — Form-Builder e o aplicație Ant Design v5, ceea ce
 *        specul nu menționa. 🔴 Șapte constatări noi (C24–C30), dintre care C25 și C30
 *        CONTRAZIC verificarea P5. Capcanele: §6.8–§6.11 din `06-implementare.md`.
 *   ✅ 7. 404 + login/cont                          (P7 §3)       → §11 + 404.php
 *   ✅ 8. „Cum funcționează" (Elementor)            (P7 §2.1)     → §18
 *        Reconstruită integral. Markup-ul și copy-ul în `inc/cnc-guide.php`
 *        (`[cnc_guide]`), pagina păstrează un singur widget Elementor.
 *        🔴 Corecturile 37 și 38 sunt aplicate pe TEXT, nu pe cod: promisiunea
 *           celor 10 zile și al doilea pas de acceptare al vânzătorului au fost
 *           scoase — niciunul nu există în produs (art. 2.14 interzice
 *           implementarea lor). A treia contradicție din P7 §6, „publicarea
 *           costă 1 credit", devine 50 / 0 / 1 în secțiunea de credite.
 *        🔴 Foaia de tipuri de cerere e acum o COMPONENTĂ PARTAJATĂ
 *           (`[cnc_type_sheet]`), scrisă o singură dată în PHP: homepage-ul o
 *           avea copiată de mână în `_elementor_data`, cu patru URL-uri
 *           `cinecum.local` hardcodate (P7 §5).
 *
 * ✅ §8.17 (20.08) — punctele 29 · 30 · 33 · 34 · 35 din registru, TOATE făcute:
 *      cardul de credite pe tokeni și pe sursa corectă (myCred) · coloana „Total"
 *      care se completează și retroactiv · tabelele ca CARDURI pe telefon
 *      (`data-label`) · cele 3 stări goale cu ieșire · banda de după publicare.
 *
 * Rămase la cont/dashboard, imposibile din CSS (cer markup). ⚠️ Niciuna nu e un
 * DEFECT — sunt rafinări peste un skin care funcționează:
 *   · `.cnc-acchead` / `.cnc-credits` / `.cnc-kv` puse efectiv în markup
 *   · `aria-current="page"` (P6 §10)
 *   · navigația mobilă ca pastile orizontale (vezi nota din §8.6)
 *   · unificarea celor două randări ale `<nav>`-ului de cont (constatarea C1)
 *   · `.cnc-flow` deasupra formularului din `/trimite-date/` (bloc Gutenberg)
 *
 * 🟢 CELE 8 PAGINI DIN `06-implementare.md` §4.3 SUNT LIVRATE. Faza 2 e completă
 *    pe implementare. Ce rămâne nu mai e cod de scris de noi:
 *      · prețurile și creditele reale (punctul 5) — blocul „Pachete" de pe
 *        homepage rămâne scos până vin cifrele de la client;
 *      · `WPLANG` pe Română + traducerile din Loco (punctele 25 · 31 · 45 · 48);
 *      · corecturile de conținut confirmate (meniuri, ANPC, termeni).
 *
 * 🔴 Înainte de ORICE modificare pe pagina de anunț:
 *    redesign-docs/05-plan-si-status.md §5.5 — testul de mascare a telefonului.
 *    Singurele secțiuni care ating pagina de anunț sunt §19 și §20 (plus §4.9,
 *    componenta `cnc-lockstrip`). Nimic din §5–§18 nu o atinge.
 *    Harnașamentul de test e reutilizabil: vezi `STATUS.md`, secțiunea de 20.08.
 * =========================================================================== */