/* Pagina de campanie redesign 2025 (/ofertele-momentului)
   Figma (fisierul DHkLOvwyNiplyVcHZOplN5, copia designerului):
     1036:30916 desktop (sidebar + grila) · 1036:45125 mobil · 1036:46875 overlay filtre
     header/hero din 1036:24376 / 1036:38987 (landing-ul cu sectiuni a fost scos 2026-09-21)
   Singurul CSS al paginii (fara Tailwind / bootstrap / main.min.css). Valorile de mai jos
   sunt cele din nodurile Figma (padding/gap/tipografie), tokens = paleta "Colours".
   Breakpoint desktop = 1024px (ca lg-ul site-ului). */

:root {
    --evo: #E10054;
    --raisin: #1E1F27;
    --white: #FFFFFF;
    --smoke: #F2F2F2;
    --platinum: #E2E2E2;
    --silver1: #C8C8C8;
    --silver2: #A8A8A8;
    --davys: #777777;
    --yellow: #FED82C;
    --badge: #FFBD2F;
    --green: #36E482;
    --green-dot: #00BD52;
    --grad: linear-gradient(180deg, #EB4612 0%, #EB136B 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } /* ca in layouts/main.php: fara saltul orizontal cand apare scrollbar-ul clasic */
body.cmp-body {
    margin: 0;
    background: var(--raisin);
    color: var(--white);
    font-family: Ubuntu, sans-serif;
    font-size: 15px;
    line-height: 1.42;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; border: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
svg { display: block; }

/* ── container: 1380 la ≥1440 (margini 150 la 1680, ca in Figma), 24 pe mobil ── */
.cmp-container { width: calc(100% - 48px); max-width: 1380px; margin-left: auto; margin-right: auto; }
@media (min-width: 1024px) { .cmp-container { width: calc(100% - 80px); } }

/* ── header ─────────────────────────────────────────────────────────────── */
.cmp-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0; }
.cmp-logo img { width: 129px; height: 24px; }
.cmp-back {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    padding: 12px 20px; border-radius: 12px; background: var(--grad);
    font-weight: 500; font-size: 15px; line-height: 1.42; letter-spacing: -0.0025em; color: var(--white); white-space: nowrap;
}
.cmp-back svg { width: 24px; height: 24px; flex-shrink: 0; }
.cmp-back:hover { opacity: .92; }
@media (min-width: 1024px) {
    .cmp-header { padding: 42px 0; }
    .cmp-logo img { width: 225px; height: 42px; }
    .cmp-back { width: 226px; height: 54px; padding: 10px 20px; }
}

/* ── bara lipita la scroll (compacta, apare dupa header) ─────────────────── */
.cmp-sbar { position: fixed; top: 0; left: 0; right: 0; z-index: 900; background: var(--raisin); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); transform: translateY(-100%); transition: transform .2s ease; }
.cmp-sbar.is-visible { transform: none; }
.cmp-sbar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.cmp-sbar__logo img { width: 129px; min-width: 129px; height: 24px; }
.cmp-sbar__actions { display: flex; align-items: center; gap: 8px; }
.cmp-sbar__back { width: 44px; height: 44px; padding: 0; border-radius: 12px; font-size: 13px; }
.cmp-sbar__txt { display: none; }
.cmp-sbar__back svg { width: 20px; height: 20px; }
.cmp-sbar__filter { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: 1px solid var(--davys); border-radius: 12px; background: transparent; color: var(--white); font-weight: 500; font-size: 13px; cursor: pointer; }
.cmp-sbar__filter svg { color: var(--evo); }
@media (min-width: 1024px) {
    .cmp-sbar__back { width: auto; height: 44px; padding: 0 20px; font-size: 15px; }
    .cmp-sbar__txt { display: inline; }
    .cmp-sbar__filter { display: none; }
}

/* ── hero: hairline · grafica · hairline · text · hairline ─────────────── */
.cmp-hero { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 16px 0; }
.cmp-hero::before, .cmp-hero__sub::before, .cmp-hero__sub::after {
    content: ""; display: block; width: 100%; height: 1px; border-radius: 4px; background: var(--grad);
}
.cmp-hero__pic { position: relative; width: 100%; }
.cmp-hero__pic picture { display: block; }
.cmp-hero__pic img { width: 100%; height: auto; aspect-ratio: 343 / 60; object-fit: cover; object-position: center top; }
.cmp-hero__sub { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; margin: 0; text-align: center; font-size: 15px; line-height: 1.42; letter-spacing: -0.0025em; }
.cmp-hero > .cmp-hero__sub:first-child::before { display: none; }
@media (min-width: 1024px) {
    .cmp-hero { padding: 42px 0; }
    .cmp-hero::before, .cmp-hero__sub::before, .cmp-hero__sub::after { height: 2px; }
    .cmp-hero__sub { gap: 24px; font-size: 23px; line-height: 1.36; letter-spacing: -0.01em; }
    .cmp-hero__pic img { aspect-ratio: 1380 / 240; }
}

/* ── bannere de tab/subtab (in grila) ─────────────────────────────────────── */
/* Figma 1036:24779: fundalul bannerului = raisin + logo evomag alb 5% in grila rotita -12°
   (`pattern-evomag.svg`), MEREU prezent — poza uploadata sta peste el; bannerele compuse (B1) l-ar
   lasa vizibil. */
.cmp-banner { position: relative; margin-left: -18px; margin-right: -18px; border-radius: 16px; background: var(--raisin) url(/img/evo2025/campaign/pattern-evomag.svg) center / cover no-repeat; box-shadow: 0 12px 12px rgba(0, 0, 0, .25); overflow: hidden; }
.cmp-banner img { display: block; width: 100%; border-radius: 16px; }
.cmp-banner a, .cmp-banner picture { display: block; }
/* varianta mobila portret (Figma 1036:39313: 366×618) — doar cand exista un asset mobil */
.cmp-banner--portrait img { aspect-ratio: 366 / 618; object-fit: cover; }
@media (min-width: 1024px) {
    .cmp-banner { margin-left: 0; margin-right: 0; border-radius: 24px; }
    /* Figma 1036:24778: card 1380 × ~341 (4.05:1); poza uploadata (1400×400) e decupata pe acest raport */
    .cmp-banner img, .cmp-banner--portrait img { border-radius: 24px; aspect-ratio: 1380 / 341; object-fit: cover; }
    .cmp-banner__ph { aspect-ratio: 1380 / 341; font-size: 23px; }
}

/* ── cardul de produs (cc) — Figma product-card 244/p20 desktop, 210/p0 mobil ── */
.cc { position: relative; display: flex; flex-direction: column; gap: 16px; background: var(--white); border-radius: 16px; padding: 0; color: var(--raisin); min-width: 0; }
.cc-media { position: relative; }
.cc-badges { position: absolute; top: 0; left: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: calc(100% - 8px); }
.cc-badge { display: inline-block; padding: 6px 8px; border-radius: 4px; background: var(--badge); color: var(--raisin); font-weight: 500; font-style: normal; font-size: 11px; line-height: 1.46; letter-spacing: .02em; }
.cc-badge--green { background: var(--green); }
.cc-img { display: flex; align-items: center; justify-content: center; height: 204px; overflow: hidden; }
.cc-img img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.cc-out {
    position: absolute; left: 9px; right: 9px; top: 215px; z-index: 3;
    display: flex; align-items: center; justify-content: center; padding: 16px 20px; border-radius: 12px;
    background: var(--yellow); color: #000; font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase;
}
.cc-meta { display: flex; flex-direction: column; gap: 8px; }
/* divider-ul e al randului de rating (ca in widgetul Aqurate): fara review-uri randul e gol si divider-ul dispare,
   dar inaltimea (20 + 8 + 1) ramane, ca titlul/pretul/CTA-ul sa fie aliniate pe toate cardurile */
.cc-rating { display: flex; align-items: center; gap: 6px; box-sizing: border-box; min-height: 29px; padding-bottom: 8px; border-bottom: 1px solid var(--platinum); font-size: 11px; line-height: 1.46; letter-spacing: .02em; }
.cc-rating:empty { border-bottom-color: transparent; }
.cc-star { flex-shrink: 0; color: var(--badge); }
.cc-rating b { font-weight: 500; color: var(--raisin); }
.cc-rating span { color: var(--davys); }
.cc-title { margin: 0; font-weight: 500; font-size: 13px; line-height: 1.42; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cc-title a { color: var(--raisin); }
.cc:hover .cc-title a { color: var(--evo); }
.cc-buy { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.cc-old { min-height: 20px; font-size: 11px; line-height: 1.42; color: var(--davys); }
.cc-old s { font-family: 'Ubuntu Mono', monospace; font-weight: 700; font-size: 16px; line-height: 1.24; letter-spacing: .005em; color: var(--silver2); text-decoration: none; position: relative; display: inline-block; }
.cc-old s::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 1px; border-radius: 2px; background: var(--evo); }
/* PRP-ul NU e pret taiat (e pretul recomandat, nu un pret vechi): mono regular davys, ca "7.199 lei PRP" din pagina de produs */
.cc-prp { font-family: 'Ubuntu Mono', monospace; font-size: 16px; line-height: 1.24; letter-spacing: .005em; color: var(--davys); }
.cc-price { margin: 0; font-family: 'Ubuntu Mono', monospace; font-weight: 700; font-size: 18px; line-height: 1; letter-spacing: -0.0072em; color: var(--evo); }
.cc-price sup { font-size: 13px; line-height: 0; position: relative; vertical-align: baseline; top: -6px; letter-spacing: -0.33px; margin-left: 2px; }
.cc-price span { margin-left: 8px; }
.cc-stock { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 11px; line-height: 1.46; }
.cc-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--evo); }
.cc-dot--ok { background: var(--green-dot); }
.cc-dot--soon { background: var(--badge); }
.cc-cta { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; padding: 12px 24px; border-radius: 12px; background: var(--evo); color: var(--white); font-weight: 500; font-size: 13px; line-height: 1.42; text-transform: uppercase; }
.cc-cta svg { width: 20px; height: 20px; flex-shrink: 0; }
.cc-cta:hover { opacity: .9; }
.cc-cta.is-busy { opacity: .6; pointer-events: none; }
.cc--out { opacity: .4; }
.cc--out .cc-cta { pointer-events: none; }
@media (min-width: 1024px) {
    .cc { padding: 20px; gap: 16px; transition: box-shadow .2s; }
    .cc:hover { box-shadow: 8px 12px 24px rgba(0, 0, 0, .12); }
    .cc-badge { font-size: 13px; line-height: 1.42; letter-spacing: 0; }
    .cc-meta { gap: 8px; }
    .cc-rating { font-size: 13px; line-height: 1.42; letter-spacing: 0; }
    .cc-title { font-size: 15px; letter-spacing: -0.0025em; }
    .cc-buy { gap: 8px; }
    .cc-meta + .cc-buy { padding-top: 8px; }   /* product-info gap 24 = 16 (card) + 8; margin-top ramane auto ca blocul sa stea jos */
    .cc-old { font-size: 13px; }
    .cc-price { font-size: 19px; letter-spacing: -0.13px; }
    .cc-cta { margin-top: 0; }
    .cc-cta svg { width: 24px; height: 24px; }
    .cc-out { top: 195px; }
}

/* ── vederea filtrata: sidebar (desktop) / overlay (mobil) + grila ───────── */
.cmp-filter { padding: 16px 0 0; }
.cmp-fcontrol {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 6px 7px 12px; border: 1px solid var(--platinum); border-radius: 8px; background: var(--white);
    color: var(--raisin); text-align: left; cursor: pointer; margin-bottom: 22px;
}
.cmp-fcontrol__text { display: flex; flex-direction: column; min-width: 0; }
.cmp-fcontrol__label { font-size: 11px; line-height: 1.46; letter-spacing: .02em; color: var(--davys); }
.cmp-fcontrol__value { font-weight: 500; font-size: 13px; line-height: 1.42; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-fcontrol svg { width: 20px; height: 20px; color: var(--evo); flex-shrink: 0; }

.cmp-side { display: none; }
.cmp-side__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; flex-shrink: 0; }
.cmp-side__head img { width: 129px; height: 24px; }
.cmp-side__close { width: 42px; height: 42px; border-radius: 50%; background: var(--white); border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; color: var(--evo); }
.cmp-side__body { flex: 1; overflow-y: auto; padding: 16px 24px 24px; }
.cmp-side__foot { display: flex; flex-direction: column; gap: 8px; padding: 16px; box-shadow: 8px 8px 42px rgba(0, 0, 0, .2); flex-shrink: 0; }
.cmp-btn { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; height: 54px; padding: 8px 24px; border: 0; border-radius: 10px; cursor: pointer; font-weight: 500; font-size: 15px; line-height: 1.42; letter-spacing: -0.0025em; color: var(--white); }
.cmp-btn--evo { background: var(--evo); }
.cmp-btn--grey { background: var(--davys); }

.cmp-acc__item { border-bottom: 1px solid var(--davys); }
.cmp-acc__head { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0; background: none; border: 0; text-align: left; cursor: pointer; font-weight: 500; font-size: 15px; line-height: 1.42; letter-spacing: -0.0025em; color: var(--white); }
.cmp-acc__icon { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--evo) center / 24px 24px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 7.5V16.5M7.5 12H16.5' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cmp-acc__item.is-open .cmp-acc__icon { background: transparent center / 24px 24px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='11.35' stroke='%23E10054' stroke-width='1.3'/%3E%3Cpath d='M7.5 12H16.5' stroke='%23E10054' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cmp-acc__body { display: none; padding: 0 0 16px; }
.cmp-acc__item.is-open .cmp-acc__body { display: block; }
/* cautare in listele lungi (> 7 subtab-uri) — acelasi camp ca .filter-search-rd din listare (r8, smoke, 13px, lupa la 16px) */
.cmp-search { position: relative; margin-bottom: 12px; }
.cmp-search input { width: 100%; background: var(--smoke); border: 0; border-radius: 8px; padding: 10px 44px 10px 16px; font-family: inherit; font-size: 13px; line-height: 1.42; color: var(--raisin); }
.cmp-search input::placeholder { color: var(--davys); }
.cmp-search input:focus { outline: 2px solid var(--evo); outline-offset: 1px; }
.cmp-search svg { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--davys); }
/* Figma 1036:31012: lista 286 + gap 24 + scrollbar 6 = 316; 8 randuri vizibile (25 + gap 12 → 284); track #777, thumb evo, r3.
   Chrome >= 121 ignora ::-webkit-scrollbar-* daca elementul are si scrollbar-width/scrollbar-color (si deseneaza
   scrollbar-ul nativ "thin", cu track-ul lat si gri) — de-aia proprietatile standard sunt doar pentru Firefox. */
.cmp-subs { list-style: none; margin: 0; padding: 0 24px 0 0; display: flex; flex-direction: column; gap: 12px; max-height: 284px; overflow-y: auto; }
.cmp-subs::-webkit-scrollbar { width: 6px; }
.cmp-subs::-webkit-scrollbar-track { background: var(--davys); border-radius: 3px; }
.cmp-subs::-webkit-scrollbar-thumb { background: var(--evo); border-radius: 3px; }
@supports not selector(::-webkit-scrollbar) {
    .cmp-subs { scrollbar-width: thin; scrollbar-color: var(--evo) var(--davys); }
}
.cmp-sub { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; line-height: 1.42; letter-spacing: -0.0025em; color: var(--white); position: relative; }
.cmp-sub input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.cmp-sub__box { width: 25px; height: 25px; flex-shrink: 0; border-radius: 6px; border: 1px solid var(--davys); background: var(--raisin) center no-repeat; }
.cmp-sub input:checked + .cmp-sub__box { background-color: var(--evo); border-color: var(--evo); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M1.5 6.5L4.5 9.5L10.5 2.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.cmp-sub input:focus-visible + .cmp-sub__box { outline: 2px solid var(--white); outline-offset: 2px; }
.cmp-sub__name { flex: 1; min-width: 0; }
.cmp-sub__count { font-family: 'Ubuntu Mono', monospace; font-size: 16px; line-height: 1.44; letter-spacing: -0.008em; color: var(--silver1); }

.cmp-results__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.cmp-results__title { margin: 0; font-weight: 700; font-size: 24px; line-height: 1.24; letter-spacing: -0.01em; color: var(--white); }
/* min-height = plasa de siguranta: chiar gol (fragment lipsa), footerul nu porneste in viewport */
.cmp-results { display: flex; flex-direction: column; gap: 24px; min-height: 70vh; }
.cmp-group__title { margin: 0 0 12px; font-weight: 700; font-size: 20px; line-height: 1.24; color: var(--white); }
.cmp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cmp-grid > .cc { padding: 12px; }
.cmp-grid > .cc .cc-cta { padding: 12px 8px; white-space: nowrap; }
.cmp-grid > .cc .cc-out { left: 6px; right: 6px; top: 190px; }
.cmp-results .cmp-banner { margin: 0; }
/* bannerele „Sus”/„Jos” ale unui subtab stau in section.cmp-group, lipite de titlu/grila: spatiu fata de
   grila ca intre randurile ei (Figma 1036:31112: coloana de rezultate are gap 40 pe desktop) */
.cmp-group > .cmp-banner + .cmp-grid, .cmp-group > .cmp-grid + .cmp-banner { margin-top: 16px; }
.cmp-empty { padding: 32px 0; text-align: center; color: var(--silver2); }
/* scheletul unui grup pana soseste fragmentul (campaign-rd.js skeletonGroup): carduri cu inaltimea
   celor reale (~470 mobil / 512 desktop, poza 204 + text), tonuri transparente peste fundalul raisin */
.cc--skel { min-height: 470px; background: rgba(255, 255, 255, .06); animation: cmp-skel 1.4s ease-in-out infinite; }
.cc--skel::before { content: ""; display: block; height: 204px; border-radius: 12px; background: rgba(255, 255, 255, .07); }
.cc--skel::after { content: ""; display: block; height: 14px; width: 72%; border-radius: 7px; background: rgba(255, 255, 255, .09);
    box-shadow: 0 24px 0 -2px rgba(255, 255, 255, .07), 0 56px 0 2px rgba(255, 255, 255, .09); }
.cmp-grid--skel > .cc--skel:nth-child(n+7) { display: none; }
@keyframes cmp-skel { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .cc--skel { animation: none; } }

@media (max-width: 1023.98px) {
    body.cmp-overlay-open { overflow: hidden; }
    body.cmp-overlay-open .cmp-side { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 1000; background: var(--raisin); }
}
@media (min-width: 1024px) {
    .cmp-filter { display: grid; grid-template-columns: 316px minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 12px; }
    .cmp-fcontrol { display: none; }
    /* sidebar-ul e lipit sub bara compacta (64 + 16) si are scroll propriu, ca meniul sa ramana vizibil oricat ai
       derula grila, iar pozitia din lista sa nu se piarda cand grila e adusa in viewport la un click pe subtab */
    .cmp-side { display: block; position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow-y: auto; }
    /* scrollbar-ul sidebar-ului sta in gutter-ul de 40 (sidebar-ul se largeste cu 20 peste coloana de 316, continutul
       ramane 316): 16 gol + 4 bara, discret (fara track, thumb gri translucid) ca sa nu concureze cu cel rosu al listelor */
    .cmp-side { width: calc(100% + 20px); }
    .cmp-side__body { padding: 0 20px 0 0; overflow: visible; }
    .cmp-side::-webkit-scrollbar { width: 4px; }
    .cmp-side::-webkit-scrollbar-track { background: transparent; }
    .cmp-side::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 2px; }
    .cmp-side::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .3); }
    @supports not selector(::-webkit-scrollbar) {
        .cmp-side { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
    }
    .cmp-side__head, .cmp-side__foot { display: none; }
    .cmp-acc__item { border-bottom: 0; }
    .cmp-acc__item + .cmp-acc__item { border-top: 1px solid var(--davys); }
    .cmp-acc__head { padding: 20px 0; }
    .cmp-acc__body { padding: 0 0 20px; }
    .cmp-main { min-width: 0; }
    .cmp-results__head { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; margin-bottom: 40px; }
    .cmp-results__title { font-size: 40px; line-height: 1.16; letter-spacing: -0.015em; }
    .cmp-results { gap: 40px; }
    .cmp-group__title { font-size: 24px; margin-bottom: 24px; }
    .cmp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 16px; }
    .cmp-group > .cmp-banner + .cmp-grid, .cmp-group > .cmp-grid + .cmp-banner { margin-top: 40px; }
    .cmp-grid > .cc { padding: 20px; }
    .cmp-grid > .cc .cc-cta { padding: 12px 24px; }
    .cmp-grid > .cc .cc-out { left: 9px; right: 9px; top: 195px; }
    .cc--skel { min-height: 512px; }
    .cmp-grid--skel > .cc--skel:nth-child(n+7) { display: block; }
}

/* ── toast (adaugare in cos) ─────────────────────────────────────────────── */
.cmp-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1100;
    display: flex; align-items: center; gap: 16px; max-width: calc(100% - 32px);
    padding: 14px 20px; border-radius: 12px; background: var(--white); color: var(--raisin);
    box-shadow: 8px 8px 42px rgba(0, 0, 0, .3); font-size: 15px; line-height: 1.42;
}
.cmp-toast a { color: var(--evo); font-weight: 500; white-space: nowrap; }
.cmp-toast--error { background: #FFEAF3; }

/* ── „Înapoi sus”: cerc alb fix dreapta-jos, apare dupa un ecran de scroll; sub toast (1100) si overlay (1000), peste bara (900) ── */
.cmp-totop {
    position: fixed; right: 16px; bottom: 16px; z-index: 950;
    width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--white); color: var(--raisin); box-shadow: 8px 8px 42px rgba(0, 0, 0, .3);
    cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s, background-color .15s ease, color .15s ease;
}
.cmp-totop svg { width: 24px; height: 24px; }
.cmp-totop.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.cmp-totop:hover, .cmp-totop:focus-visible { background: var(--evo); color: var(--white); }
.cmp-totop:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.cmp-totop:active { transform: scale(.94); }
body.cmp-overlay-open .cmp-totop { visibility: hidden; opacity: 0; }
@media (min-width: 1024px) {
    .cmp-totop { right: 24px; bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .cmp-totop { transition: none; transform: none; }
}

/* ── footer (fara design in Figma — regula #2) ───────────────────────────── */
.cmp-footer { padding: 48px 0 32px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--silver2); }
.cmp-footer p { margin: 0 0 8px; }
.cmp-footer a { color: var(--white); text-decoration: underline; }
.cmp-footer__links span { margin: 0 8px; }
@media (min-width: 1024px) { .cmp-footer { padding: 64px 0 40px; } }