/* =============================================================================
   PORTAT 1:1 din LP (nutritie-desktop/index.html) — secțiunea #showcase
   („Așa arată programul tău"): mockup-ul de telefon construit integral din
   HTML/CSS. Regulile de mai jos sunt cele originale; NU le rescrie.
   ============================================================================= */

/* compat cu replica: variabilele LP care nu există în base-v6 + baza .wrap
   (în LP .wrap e globală; aici o dăm doar secțiunii) */
#showcase { --s6: 28px; --lh-snug: 1.12; margin-top: 40px; }
#showcase .wrap { max-width: 560px; margin: 0 auto; padding: 0; }
#showcase .shead .lede { margin-top: 10px; color: var(--muted); line-height: 1.6; }
/* Adăugat la integrare (măsurat față de replică): regula de sus declară doar
   `margin-top`, deci în replică marginea de jos e cea implicită de browser (1em).
   `framework.bundle.css` din stiva noastră o resetează la 0. Vezi și `.pdesc` din
   `magazin-program-lp.css` și `.shead p` din `magazin-detalii-lp.css`. */
#showcase .shead .lede { margin-bottom: 1em; }

/* CTA de conversie sub mockup (doar în magazin — în LP urmează alte secțiuni);
   ținta + eticheta se sincronizează cu obiectivul ales (magazin-v7.js) */
.mgx-showcase-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 26px; }
.mgx-showcase-cta .cta { min-width: min(340px, 100%); }
.mgx-showcase-cta .hint { margin: 0; font-size: 12.5px; color: var(--muted); }

/* ------------------------- regulile LP, neatinse ------------------------- */
/* ===================== PRODUCT SHOWCASE — mockup telefon (show-don't-tell) ===================== */
  .mk-stage{--prot:#36C5F0;--carb:#FFB23C;--fat:#F76C9B;--prep:#FF8A3C; position:relative; max-width:300px; margin:0 auto var(--s6)}
.mk-stage *{box-sizing:border-box}
.mk-i{display:inline-flex; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; flex:none}
.mk-phone{position:relative; width:min(280px,86vw); margin:0 auto; border-radius:46px; background:#0A0C10; padding:11px; z-index:3;
    box-shadow:inset 0 0 0 1.5px #1c1f27, inset 0 0 0 2.5px #05070b, 0 0 0 1px rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.4), 0 34px 64px -22px rgba(0,0,0,.75)}
.mk-phone::before{content:""; position:absolute; inset:-20px; z-index:-1; border-radius:56px; opacity:.6; filter:blur(28px);
    background:radial-gradient(58% 48% at 28% 12%, rgba(0,194,255,.24), transparent 60%), radial-gradient(58% 48% at 76% 30%, rgba(181,33,233,.26), transparent 62%)}
.mk-island{position:absolute; top:19px; left:50%; transform:translateX(-50%); width:86px; height:25px; border-radius:13px; background:#000; z-index:6}
.mk-pscreen{position:relative; border-radius:35px; overflow:hidden; aspect-ratio:278/600; background:#080B12; display:flex; flex-direction:column; color:var(--fg); font-family:var(--font-display)}
.mk-pscreen::after{content:""; position:absolute; inset:0; z-index:7; pointer-events:none; border-radius:35px; mix-blend-mode:screen;
    background:linear-gradient(135deg, rgba(255,255,255,.06), transparent 22%, transparent 80%, rgba(255,255,255,.03))}
.mk-pbody{flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column}
.mk-status{display:flex; align-items:center; justify-content:space-between; padding:8px 18px 2px; font:700 11px/1 var(--font-display); font-variant-numeric:tabular-nums; color:#E8E8F0}
.mk-status .mk-sig{display:inline-flex; gap:5px; opacity:.9}
.mk-status .mk-i{width:13px;height:11px}
.mk-phdr{display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:8px 14px 8px; border-bottom:1px solid rgba(255,255,255,.05)}
.mk-kick{font:800 8.5px/1 var(--font-display); letter-spacing:.12em}
.mk-h1{font:800 16px/1.1 var(--font-display); color:#fff; margin-top:2px}
.mk-sub{font:500 10px/1.2 'Inter',sans-serif; color:#8A8A9A; margin-top:2px}
.mk-goal{display:inline-flex; align-items:center; gap:4px; font:700 10.5px/1 'Inter'; color:#cbb8ff; background:rgba(124,92,252,.12); border:1px solid rgba(124,92,252,.3); border-radius:999px; padding:5px 9px; white-space:nowrap}
.mk-goal .mk-i{width:11px;height:11px}
.mk-week{display:grid; grid-template-columns:repeat(7,1fr); gap:3px; padding:9px 12px 5px}
.mk-d{position:relative; text-align:center; padding:5px 0 6px; border-radius:8px; border:1px solid transparent}
.mk-d .wd{font:700 8px/1 'Inter'; color:#55556a}
.mk-d .nm{font:800 13px/1 var(--font-display); color:#fff; margin-top:3px}
.mk-d.off .nm{color:#3a3a45}
.mk-d.sel{border-color:rgba(124,92,252,.65); background:rgba(124,92,252,.14)}
.mk-d.sel .nm{color:#cbb8ff}
.mk-d.prep::after{content:""; position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:linear-gradient(90deg,var(--grad-a),var(--grad-b))}
.mk-daylbl{padding:2px 14px 8px; font:800 12px/1 var(--font-display); color:#fff}
.mk-daylbl span{font-weight:500; color:#8A8A9A; font-family:'Inter'}
.mk-nutri{margin:0 13px; background:rgba(255,255,255,.02); border:1px solid rgba(124,92,252,.3); border-radius:14px; padding:13px 12px; display:flex; gap:11px; align-items:center}
.mk-ring{position:relative; width:70px; height:70px; flex:none}
.mk-ring svg{transform:rotate(-90deg)}
.mk-ringc{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.mk-ringc b{font:800 18px/1 var(--font-display); color:#fff; font-variant-numeric:tabular-nums}
.mk-ringc span{font:500 8.5px/1 'Inter'; color:#8A8A9A; margin-top:2px}
.mk-macros{flex:1; min-width:0; display:flex; flex-direction:column; gap:7px}
.mk-mac .mk-mrow{display:flex; justify-content:space-between; gap:6px; font-variant-numeric:tabular-nums}
.mk-mac .l{font:500 10.5px/1.1 'Inter'; color:#8A8A9A; white-space:nowrap; letter-spacing:-.01em}
.mk-mac .v{font:700 10.5px/1.1 'Inter'; color:#E8E8F0; white-space:nowrap; flex:none}
.mk-bar{height:4px; border-radius:3px; background:rgba(255,255,255,.08); margin-top:4px; overflow:hidden}
.mk-bar i{display:block; height:100%; border-radius:3px}
.mk-mac.sub{margin-left:13px; border-left:1px solid rgba(255,255,255,.1); padding-left:8px}
.mk-mac.sub .l,.mk-mac.sub .v{font-size:9.5px}
.mk-mac.sub .mk-bar{height:3px}
.mk-coach{margin:11px 13px 0; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05); border-left:3px solid var(--prep); border-radius:11px; padding:10px 12px}
.mk-cnh{display:flex; align-items:center; gap:7px}
.mk-av{width:24px;height:24px;border-radius:50%; background:linear-gradient(135deg,var(--grad-a),var(--grad-b)); display:flex; align-items:center; justify-content:center; font:800 9px/1 var(--font-display); color:#fff; flex:none; overflow:hidden}
.mk-av img{width:100%;height:100%;object-fit:cover}
.mk-cnh b{font:800 10.5px/1 var(--font-display); color:#f3c39a; flex:1}
.mk-cntag{font:800 8px/1 var(--font-display); letter-spacing:.05em; color:#ffb98a; background:rgba(255,138,60,.14); border-radius:5px; padding:3px 6px}
.mk-coach p{margin:7px 0 0; font:400 11.5px/1.5 'Inter'; color:#d7d7e2}
.mk-cnbtn{display:inline-flex; align-items:center; gap:5px; margin-top:9px; font:700 10px/1 'Inter'; color:#ffb98a; background:rgba(255,138,60,.13); border-radius:8px; padding:6px 10px}
.mk-cnbtn .mk-i{width:11px;height:11px}
.mk-seclbl{padding:12px 14px 5px; font:800 9px/1 var(--font-display); letter-spacing:.06em; color:#55556a}
.mk-meal{display:flex; align-items:center; gap:9px; margin:0 13px 7px; padding:9px 10px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05); border-radius:11px}
.mk-chk{width:19px;height:19px;border-radius:50%; border:1.5px solid rgba(255,255,255,.16); flex:none; display:flex; align-items:center; justify-content:center}
.mk-meal.done .mk-chk{background:var(--ok); border-color:transparent}
.mk-meal.done .mk-chk .mk-i{width:11px;height:11px; stroke:#06281a; stroke-width:2.6}
.mk-meal .mt{font:700 9px/1 'Inter'; letter-spacing:.04em; color:#8A8A9A; text-transform:uppercase}
.mk-meal .mn{font:600 13.5px/1.25 'Inter'; color:#E8E8F0; margin-top:2px}
.mk-meal.done .mn{color:#55556a; text-decoration:line-through}
.mk-meal .mkcal{font:500 10px/1 'Inter'; color:#8A8A9A; margin-top:3px; font-variant-numeric:tabular-nums}
.mk-meal .mbody{flex:1; min-width:0}
.mk-prep{font:800 7.5px/1 var(--font-display); color:#ffb98a; background:rgba(255,138,60,.14); border-radius:4px; padding:2px 5px; margin-left:6px}
.mk-tab{flex:none; display:grid; grid-template-columns:repeat(4,1fr); padding:8px 6px 14px; background:rgba(13,17,23,.94); border-top:1px solid rgba(255,255,255,.06)}
.mk-tab a{display:flex; flex-direction:column; align-items:center; gap:3px; font:600 9px/1 'Inter'; color:#5b5b68}
.mk-tab a .mk-i{width:18px;height:18px}
.mk-tab a.on{color:#cbb8ff}
/* ecran mai înalt (20:9, ca telefoanele moderne) + ritm compact —
     cina („momentul VREAU") trebuie să fie complet vizibilă deasupra tab-bar-ului */
  .mk-pscreen{aspect-ratio:278/664}
.mk-nutri{padding:10px 12px}
.mk-ring{width:62px; height:62px}
.mk-ring svg{width:62px; height:62px}
.mk-ringc b{font-size:16px}
.mk-week{padding:6px 12px 3px}
.mk-phdr{padding:6px 14px 6px}
.mk-status{padding:6px 18px 2px}
.mk-seclbl{padding:9px 14px 4px}
.mk-coach{padding:9px 12px}
.mk-coach p{margin-top:6px}
.mk-cnbtn{margin-top:7px}
.mk-meal{padding:8px 10px; margin-bottom:6px}
.mk-laptop{display:none}
@media (prefers-reduced-motion:reduce){
 .mk-stage *{animation:none !important}
}
.mk-points{display:none}
@media (min-width:1100px){


    /* SHOWCASE — textul la stânga, telefonul la dreapta */
    #showcase .wrap{max-width:940px; display:grid; grid-template-columns:minmax(0,1fr) 320px; align-items:center; column-gap:56px}

    #showcase .shead{text-align:left; margin:0; max-width:none}

    #showcase .shead .lede{margin-left:0; max-width:40ch}

    #showcase .mk-stage{margin:0}

    #showcase .mk-points{display:flex; flex-direction:column; gap:13px; margin:24px 0 0; padding:0; list-style:none}

    #showcase .mk-points li{display:flex; gap:11px; align-items:flex-start; font-size:15px; line-height:1.5; color:var(--fg-2)}
}
/* ---- override de aliniere (magazin, NU LP): secțiunea showcase folosește
   aceeași lățime utilă ca restul paginii (.mgx-wrap = 980px), ca marginea
   din stânga să cadă exact sub titlu și sub cardul de program. */
@media (min-width: 1100px) {
  #showcase .wrap { max-width: 980px; }
}