/**
 * Foaia de stil a platformei mycloudshop.ro.
 *
 * Tokenii sunt LUATI din macheta sitului de prezentare
 * (services/cloudshop/plans/mockup-mycloudshop.html), ca wizardul sa para
 * acelasi produs, nu altul: aceleasi patru trepte de suprafata, aceeasi scara
 * tipografica, acelasi iris, aceeasi disciplina a degradeului (un moment, nu un
 * fundal). Paginile care vin dupa — intrarea in cont, resetarea parolei,
 * „Magazinele mele" — pornesc din aceiasi tokeni, fara nicio traducere.
 *
 * ZERO EMOJI. Toate pictogramele sunt Lucide (assets/css/lucide.css).
 *
 * Ultima modificare: 2026-08-17 01:55
 * Modificari:
 *   2026-08-17 01:55 — Sectiunile 28-29: panourile de sub macheta (se schimba cu pasul),
 *                      poze pe pastilele de categorii, schelet pe pozele de produs si
 *                      lumina care trece peste macheta la schimbarea temei. Coloana din
 *                      dreapta capata derulare proprie: mai inalta decat fereastra,
 *                      partea de jos nu mai putea fi adusa in ecran.
 *   2026-08-17 01:10 — Sectiunea 27: momentul de dupa alegere in pasul 2 — schelet pe
 *                      cardurile de tema cat se incarca poza, puls pe cardul ales,
 *                      bara „tema aleasa" lipita jos, filtru gol nefolosibil.
 *   2026-08-17 00:20 — Macheta: brandul ca TEXT pe variabila proprie (contrast citibil),
 *                      pastile de categorii cu icoana + randul se stinge la marginea din
 *                      dreapta, ca sa se citeasca drept „se deruleaza".
 *   2026-08-16 23:10 — Sectiunile 25-26: alegerea de stil din capul pasului 1
 *                      (badge + mostra reala de culoare) si macheta vie rescrisa
 *                      (cautare, cos, categorii, produse cu pret, banda de incredere).
 *   2026-08-16 21:35 — Sectiunile 18-22: antet/subsol de pagina, ecranele de
 *                      autentificare, paginile legale, „Magazinele mele".
 */

/* ============================================================
   1. FONTURI (locale — regula „fara CDN")
   ============================================================ */
@font-face{font-family:'Jakarta';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/plus-jakarta-sans/PlusJakartaSans-Regular-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jakarta';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/plus-jakarta-sans/PlusJakartaSans-Regular.woff2') format('woff2')}
@font-face{font-family:'Jakarta';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/plus-jakarta-sans/PlusJakartaSans-Medium-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jakarta';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/plus-jakarta-sans/PlusJakartaSans-Medium.woff2') format('woff2')}
@font-face{font-family:'Jakarta';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/plus-jakarta-sans/PlusJakartaSans-SemiBold-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jakarta';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/plus-jakarta-sans/PlusJakartaSans-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Jakarta';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/plus-jakarta-sans/PlusJakartaSans-Bold-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jakarta';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/plus-jakarta-sans/PlusJakartaSans-Bold.woff2') format('woff2')}

/* ============================================================
   2. TOKENI — identici cu macheta
   ============================================================ */
:root{
  --ink-950:#07070E;   /* fundalul paginii */
  --ink-900:#0B0B15;   /* zone alternate */
  --ink-850:#101019;   /* campuri */
  --ink-800:#15151F;   /* carduri */
  --ink-700:#1D1D2A;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --glint:inset 0 1px 0 rgba(255,255,255,.045);

  --iris:#6D5AF6;
  --iris-soft:#A99CFF;
  --iris-dim:rgba(109,90,246,.14);
  --mint:#3BEAB2;      /* rezervat CONFIRMARII: bifa, „liber", pas terminat */
  --amber:#FBBF24;     /* atentionare */
  --rose:#FB7185;      /* eroare — roz, nu rosu-alarma */

  --t1:#F5F5FA;        /* titluri */
  --t2:#B5B5CC;        /* corp */
  --t3:#8B8BA8;        /* meta */
  --t4:#5E5E77;        /* strict decorativ */

  --grad:linear-gradient(135deg,#6D5AF6 0%,#3BC9D8 55%,#2FE3A8 100%);

  --fs-micro:12px; --fs-meta:13px; --fs-sm:15px; --fs-base:16px;
  --fs-md:18px; --fs-lead:20px; --fs-h4:19px; --fs-h3:24px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px;

  --r-sm:10px; --r-md:14px; --r-lg:20px;
  --ease:cubic-bezier(.4,0,.2,1);
  --shadow:0 24px 64px rgba(0,0,0,.5);
  --wrap:1200px;
}

/* ============================================================
   3. BAZA
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink-950);color:var(--t2);
  font-family:'Jakarta',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:var(--fs-base);line-height:1.62;font-weight:420;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;min-height:100vh;
}
img{max-width:100%;display:block}
a{color:var(--iris-soft);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{color:var(--t1);font-weight:800;margin:0;text-wrap:balance;letter-spacing:-.022em}
h1{font-size:clamp(26px,3.4vw,38px);line-height:1.12}
h2{font-size:clamp(22px,2.4vw,28px);line-height:1.18}
h3{font-size:var(--fs-h4);line-height:1.3;font-weight:700}
p{margin:0 0 var(--sp-4)}

/* Focus vizibil peste tot — accesibilitate, nu optiune */
:focus-visible{outline:2px solid var(--iris-soft);outline-offset:3px;border-radius:6px}

/* Adancime: doua „orbs" blurate, ascunse pe mobil (provoaca scroll orizontal) */
.w-orb{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.w-orb-1{width:520px;height:520px;background:rgba(109,90,246,.16);top:-180px;left:-160px}
.w-orb-2{width:420px;height:420px;background:rgba(59,201,216,.10);bottom:-160px;right:-140px}
@media(max-width:768px){.w-orb{display:none}}

/* ============================================================
   4. SCHELET
   ============================================================ */
.w-shell{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
.w-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}

.w-head{padding:20px 0 8px}
.w-head-in{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.w-logo{height:30px;width:auto}
.w-head-tag{font-size:var(--fs-meta);color:var(--t3)}

/* Bara de progres — 4 pasi. Verificarea emailului e SUB-pas al lui 3, nu al
   cincilea: altfel drumul pare mai lung decat e. */
.w-steps{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-5) 0 var(--sp-6);flex-wrap:wrap}
.w-step{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);color:var(--t3);font-size:var(--fs-meta);font-weight:600;
  background:var(--ink-900);transition:all .3s var(--ease)}
.w-step-n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.06);font-size:11px;font-weight:700;color:var(--t3)}
.w-step.is-current{color:var(--t1);border-color:rgba(109,90,246,.4);background:var(--iris-dim)}
.w-step.is-current .w-step-n{background:var(--iris);color:#fff}
.w-step.is-done{color:var(--t2);border-color:rgba(59,234,178,.28);cursor:pointer}
.w-step.is-done .w-step-n{background:rgba(59,234,178,.16);color:var(--mint)}
.w-step-sep{width:22px;height:1px;background:var(--line)}
@media(max-width:900px){
  .w-steps{gap:0}
  .w-step,.w-step-sep{display:none}
  .w-steps::before{content:attr(data-mobile);display:block;width:100%;
    font-size:var(--fs-meta);font-weight:700;color:var(--t2);margin-bottom:8px}
  .w-steps::after{content:'';display:block;width:100%;height:3px;border-radius:2px;
    background:linear-gradient(90deg,var(--iris) var(--w-progress,25%),rgba(255,255,255,.08) var(--w-progress,25%))}
}

.w-main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:var(--sp-7);
  align-items:start;padding-bottom:120px}
@media(max-width:1100px){.w-main{grid-template-columns:1fr;gap:var(--sp-5)}}

/* ============================================================
   5. CARDUL PASULUI
   ============================================================ */
.w-pane{display:none}
.w-pane.is-active{display:block;animation:w-in .35s var(--ease)}
@keyframes w-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.w-card{background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-6);box-shadow:var(--glint)}
@media(max-width:640px){.w-card{padding:var(--sp-5) var(--sp-4);border-radius:var(--r-md)}}

.w-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-micro);
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--iris-soft);
  margin-bottom:var(--sp-3)}
.w-eyebrow::before{content:'';width:22px;height:1px;background:currentColor;opacity:.5}
.w-sub{color:var(--t2);font-size:var(--fs-md);margin:var(--sp-3) 0 var(--sp-6);max-width:44em}

/* ============================================================
   6. CAMPURI
   ============================================================ */
.w-field{margin-bottom:var(--sp-5)}
.w-label{display:block;font-size:var(--fs-meta);font-weight:700;color:var(--t2);
  margin-bottom:7px;letter-spacing:.01em}
.w-label .w-opt{font-weight:500;color:var(--t4);text-transform:none;letter-spacing:0}
.w-hint{font-size:var(--fs-meta);color:var(--t3);margin-top:7px}

.w-input,.w-select,.w-textarea{
  width:100%;background:var(--ink-850);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--t1);padding:13px 14px;
  /* 16px minimum: sub atat, iOS mareste pagina la focus. */
  font-size:16px;line-height:1.4;transition:border-color .2s var(--ease),background .2s var(--ease)}
.w-input::placeholder{color:var(--t4)}
.w-input:focus,.w-select:focus,.w-textarea:focus{outline:none;border-color:rgba(109,90,246,.55);background:var(--ink-800)}
.w-input.is-bad,.w-select.is-bad{border-color:rgba(251,113,133,.6)}
.w-input.is-good{border-color:rgba(59,234,178,.45)}
.w-select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238B8BA8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.w-select option{background:var(--ink-800);color:var(--t1)}

.w-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
@media(max-width:640px){.w-row{grid-template-columns:1fr}}

/* Campul de adresa: sufixul e text fix, in interiorul ramei */
.w-addr{display:flex;align-items:stretch;background:var(--ink-850);
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;transition:border-color .2s var(--ease)}
.w-addr:focus-within{border-color:rgba(109,90,246,.55)}
.w-addr.is-good{border-color:rgba(59,234,178,.45)}
.w-addr.is-bad{border-color:rgba(251,113,133,.6)}
.w-addr input{flex:1;min-width:0;background:none;border:0;color:var(--t1);
  padding:13px 14px;font-size:16px;font-family:inherit}
.w-addr input:focus{outline:none}
.w-addr-suffix{display:flex;align-items:center;padding:0 14px;background:rgba(255,255,255,.03);
  color:var(--t3);font-size:var(--fs-sm);border-left:1px solid var(--line);white-space:nowrap}

/* Randul de stare de sub adresa — INALTIME FIXA din start, ca sa nu sara layoutul */
.w-slug-state{display:flex;align-items:center;gap:8px;min-height:26px;margin-top:9px;
  font-size:var(--fs-meta);color:var(--t3)}
.w-slug-state.is-free{color:var(--mint)}
.w-slug-state.is-taken{color:var(--rose)}
.w-slug-state.is-warn{color:var(--amber)}
.w-slug-state i{font-size:15px;flex:none}
.w-suggest{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.w-suggest-btn{padding:6px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--ink-850);color:var(--t2);font-size:var(--fs-meta);font-weight:600;
  transition:all .2s var(--ease)}
.w-suggest-btn:hover{border-color:rgba(109,90,246,.5);color:var(--t1);background:var(--iris-dim)}

/* Rotita de „se verifica" */
.w-spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.16);border-top-color:var(--iris-soft);
  border-radius:50%;animation:w-spin .7s linear infinite;flex:none}
@keyframes w-spin{to{transform:rotate(360deg)}}

/* ============================================================
   7. PASTILE DE ALEGERE (tip activitate, plati, monede)
   ============================================================ */
/* Pe telefon un <select> cere trei atingeri; o pastila cere una. */
.w-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
@media(max-width:640px){.w-chips{grid-template-columns:1fr 1fr}}
.w-chip{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--ink-850);color:var(--t2);
  font-size:var(--fs-sm);font-weight:600;text-align:left;transition:all .2s var(--ease)}
.w-chip i{font-size:17px;color:var(--t3);flex:none;transition:color .2s var(--ease)}
.w-chip:hover{border-color:var(--line-strong);color:var(--t1)}
.w-chip.is-on{border-color:rgba(109,90,246,.55);background:var(--iris-dim);color:var(--t1)}
.w-chip.is-on i{color:var(--iris-soft)}
.w-chip-note{display:block;font-size:var(--fs-micro);font-weight:500;color:var(--t3);margin-top:2px}
.w-chip-body{min-width:0}

/* ============================================================
   8. BUTOANE
   ============================================================ */
.w-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:var(--r-sm);font-weight:600;font-size:var(--fs-sm);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),
             border-color .2s var(--ease),opacity .2s var(--ease)}
.w-btn i{font-size:16px}
.w-btn-primary{background:var(--iris);color:#fff;box-shadow:0 6px 18px rgba(109,90,246,.28),var(--glint)}
.w-btn-primary:hover{background:#7C6BF8;transform:translateY(-1px)}
.w-btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.w-btn-ghost{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--t2)}
.w-btn-ghost:hover{border-color:var(--line-strong);color:var(--t1)}
.w-btn-text{color:var(--t3);padding:13px 6px;font-weight:600}
.w-btn-text:hover{color:var(--t1)}
.w-btn-lg{padding:16px 30px;font-size:var(--fs-md);border-radius:var(--r-md)}

.w-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  margin-top:var(--sp-6);flex-wrap:wrap}
.w-quiet{font-size:var(--fs-meta);color:var(--t4);margin-top:var(--sp-3)}

/* Pe telefon butonul principal e fixat jos, deasupra zonei sigure. */
@media(max-width:900px){
  .w-actions{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(11,11,21,0),var(--ink-950) 34%);
    padding:16px 0 calc(16px + env(safe-area-inset-bottom));margin-left:-4px;margin-right:-4px;z-index:5}
  .w-actions .w-btn-primary{flex:1;justify-content:center}
}

/* ============================================================
   9. GALERIA DE TEME
   ============================================================ */
.w-theme-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:var(--sp-5)}
.w-theme-search{flex:1;min-width:200px}
.w-theme-count{font-size:var(--fs-meta);color:var(--t3);white-space:nowrap}
.w-theme-group{font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t3);margin:var(--sp-5) 0 var(--sp-3)}
.w-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
@media(max-width:640px){.w-themes{grid-template-columns:1fr 1fr;gap:10px}}
.w-theme{position:relative;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:var(--ink-850);text-align:left;transition:all .25s var(--ease)}
.w-theme:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.w-theme.is-on{border-color:rgba(109,90,246,.6);box-shadow:0 0 0 1px rgba(109,90,246,.35)}
.w-theme-shot{aspect-ratio:16/10;background-size:cover;background-position:center;position:relative}
.w-theme-shot::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55))}
.w-theme-swatches{position:absolute;left:10px;bottom:10px;display:flex;gap:5px;z-index:1}
.w-theme-sw{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7)}
.w-theme-meta{padding:11px 12px}
.w-theme-name{font-size:var(--fs-sm);font-weight:700;color:var(--t1);line-height:1.3}
.w-theme-desc{font-size:var(--fs-micro);color:var(--t3);margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.w-theme-tick{position:absolute;top:9px;right:9px;width:24px;height:24px;border-radius:50%;
  background:var(--mint);color:#062a1f;display:none;place-items:center;font-size:14px;z-index:2}
.w-theme.is-on .w-theme-tick{display:grid}
.w-theme-tag{position:absolute;top:9px;left:9px;padding:3px 8px;border-radius:999px;
  background:rgba(0,0,0,.55);color:#fff;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;z-index:2;backdrop-filter:blur(4px)}

/* Variantele de culoare — derivate din tema, nu selectoare goale */
.w-palettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:var(--sp-3)}
.w-palette{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;background:var(--ink-850);
  text-align:left;transition:all .2s var(--ease)}
.w-palette:hover{border-color:var(--line-strong)}
.w-palette.is-on{border-color:rgba(109,90,246,.55);background:var(--iris-dim)}
.w-palette-dots{display:flex;gap:6px;margin-bottom:9px}
.w-palette-dot{width:22px;height:22px;border-radius:7px;border:1px solid rgba(255,255,255,.12)}
/* ACELAȘI bug ca la cardurile de temă: `span` e INLINE, deci numele și
   descrierea curgeau lipite pe un rând („Cum vine temaPaleta desenată…").
   Amândouă devin bloc. */
.w-palette-name{display:block;font-size:var(--fs-meta);font-weight:700;color:var(--t1)}
.w-palette-note{display:block;font-size:var(--fs-micro);color:var(--t3);line-height:1.4;margin-top:3px}

/* ============================================================
   10. CODUL DE 6 CIFRE
   ============================================================ */
.w-otp{display:flex;gap:10px;justify-content:flex-start;margin:var(--sp-5) 0}
@media(max-width:480px){.w-otp{gap:7px}}
.w-otp input{width:52px;height:62px;text-align:center;font-size:24px;font-weight:700;
  background:var(--ink-850);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--t1)}
@media(max-width:480px){.w-otp input{width:44px;height:54px;font-size:20px}}
.w-otp input:focus{outline:none;border-color:rgba(109,90,246,.6);background:var(--ink-800)}
.w-otp.is-bad input{border-color:rgba(251,113,133,.55);animation:w-shake .35s var(--ease)}
.w-otp.is-good input{border-color:rgba(59,234,178,.5)}
@keyframes w-shake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ============================================================
   11. RECAPITULARE
   ============================================================ */
.w-recap{display:grid;gap:12px}
.w-recap-card{display:flex;gap:14px;padding:16px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--ink-850)}
.w-recap-ico{width:38px;height:38px;border-radius:11px;background:var(--iris-dim);
  color:var(--iris-soft);display:grid;place-items:center;font-size:18px;flex:none}
.w-recap-body{flex:1;min-width:0}
.w-recap-label{font-size:var(--fs-micro);font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--t3)}
.w-recap-main{font-size:var(--fs-md);font-weight:700;color:var(--t1);margin-top:3px;word-break:break-word}
.w-recap-line{font-size:var(--fs-meta);color:var(--t3);margin-top:2px;word-break:break-word}
.w-recap-edit{align-self:flex-start;font-size:var(--fs-meta);color:var(--t3);font-weight:600}
.w-recap-edit:hover{color:var(--iris-soft)}

.w-note{display:flex;gap:11px;padding:14px 16px;border-radius:var(--r-sm);
  background:rgba(109,90,246,.08);border:1px solid rgba(109,90,246,.2);
  font-size:var(--fs-sm);color:var(--t2);margin:var(--sp-4) 0}
.w-note i{color:var(--iris-soft);font-size:17px;flex:none;margin-top:2px}
.w-note.is-ok{background:rgba(59,234,178,.07);border-color:rgba(59,234,178,.22)}
.w-note.is-ok i{color:var(--mint)}
.w-note.is-warn{background:rgba(251,191,36,.07);border-color:rgba(251,191,36,.22)}
.w-note.is-warn i{color:var(--amber)}
.w-note.is-bad{background:rgba(251,113,133,.07);border-color:rgba(251,113,133,.24)}
.w-note.is-bad i{color:var(--rose)}

/* Blocuri care se desfac (contact, retele, plati) */
.w-fold{border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-850);
  margin-bottom:12px;overflow:hidden}
.w-fold-head{display:flex;align-items:center;gap:12px;width:100%;padding:15px 16px;text-align:left}
.w-fold-head i:first-child{color:var(--iris-soft);font-size:18px;flex:none}
.w-fold-title{flex:1;font-size:var(--fs-sm);font-weight:700;color:var(--t1)}
.w-fold-state{font-size:var(--fs-micro);color:var(--t3);white-space:nowrap}
.w-fold-caret{color:var(--t3);transition:transform .25s var(--ease)}
.w-fold.is-open .w-fold-caret{transform:rotate(180deg)}
.w-fold-body{display:none;padding:0 16px 18px}
.w-fold.is-open .w-fold-body{display:block}

/* Camp cu pictograma in fata (retele sociale) */
.w-ig{display:flex;align-items:center;background:var(--ink-800);border:1px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden}
.w-ig:focus-within{border-color:rgba(109,90,246,.55)}
.w-ig-ico{width:44px;display:grid;place-items:center;color:var(--t3);font-size:17px;
  border-right:1px solid var(--line);align-self:stretch}
.w-ig input{flex:1;min-width:0;background:none;border:0;color:var(--t1);padding:12px 13px;font-size:16px;font-family:inherit}
.w-ig input:focus{outline:none}

/* ============================================================
   12. PREVIZUALIZAREA VIE
   ============================================================ */
/* ⚠️ MASURAT la 1280×900: cu panoul de sub machetă coloana ajunge la 1029px, deci
   mai înaltă decât fereastra. Un element `sticky` mai înalt decât fereastra rămâne
   agățat de marginea de sus și partea lui de jos NU mai poate fi adusă în ecran
   prin derulare — panoul „Tema aleasă" ar fi fost tăiat definitiv. De aceea
   coloana capătă propria înălțime maximă și derulează pe dinăuntru; NU pun
   `overscroll-behavior:contain`, ca derularea să treacă firesc la pagină când
   ajunge la capăt. */
.w-preview{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.w-preview::-webkit-scrollbar{width:8px}
.w-preview::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px}
.w-preview::-webkit-scrollbar-track{background:transparent}
@media(max-width:1100px){
  /* pe telefon coloana nu mai e lipită: nu are de ce să aibă derulare proprie */
  .w-preview{max-height:none;overflow:visible}
}
@media(max-width:1100px){
  .w-preview{position:static;order:-1;margin-bottom:var(--sp-4)}
  .w-preview-inner{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
  /* macheta e acum un magazin intreg, nu sase dreptunghiuri: are nevoie de loc */
  .w-preview.is-open .w-preview-inner{max-height:1200px}
}
.w-preview-toggle{display:none}
@media(max-width:1100px){
  .w-preview-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;
    border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ink-850);
    font-size:var(--fs-meta);font-weight:600;color:var(--t2);margin-bottom:10px}
}
.w-browser{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:var(--ink-800);box-shadow:var(--shadow)}
.w-browser-bar{display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:var(--ink-700);border-bottom:1px solid var(--line)}
.w-dots{display:flex;gap:5px}
.w-dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.w-url{flex:1;background:rgba(0,0,0,.28);border-radius:6px;padding:5px 10px;
  font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-url b{color:var(--t1);font-weight:600}
/* ── Macheta magazinului ─────────────────────────────────────────────────────
   Culorile vin TOATE din variabile pictate din JS (stilul ales in pasul 1 sau
   tema aleasa in pasul 2). Aici nu se scrie nicio culoare de magazin „de mana":
   ce e in `var(...)` fara alternativa e intotdeauna setat de `paintPreview`. */
/* ⚠️ FARA `transition` aici. Cand valoarea vine dintr-o variabila CSS si variabila
   se schimba, Chrome NU reporneste tranzitia: proprietatea ramane inghetata pe
   culoarea veche (macheta ramanea intunecata dupa ce omul comuta pe „Luminos",
   desi bara si textul se schimbau). Masurat la 1280 pe 16 aug. Recolorarea e
   oricum instantanee peste tot in macheta — asa e si consecventa. */
.w-mock{background-color:var(--mock-bg,#F3F4F6);color:var(--mock-text,#16161D);min-height:330px}

.w-mock-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;
  background:var(--mock-surface,#fff);border-bottom:1px solid var(--mock-border,#eee)}
.w-mock-brand{font-size:14px;font-weight:800;color:var(--mock-primary-text,#6D5AF6);
  font-family:var(--mock-fh,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.w-mock-tools{display:flex;align-items:center;gap:8px;flex:none}
.w-mock-search{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
  background:var(--mock-bg,#f3f4f6);border:1px solid var(--mock-border,#eee);
  font-size:10px;font-weight:600;color:var(--mock-muted,#6B6B80)}
.w-mock-search i{font-size:11px}
.w-mock-cart{position:relative;display:grid;place-items:center;width:26px;height:26px;border-radius:9px;
  background:var(--mock-primary,#6D5AF6);color:var(--mock-on-primary,#fff);font-size:13px;flex:none}
.w-mock-cart b{position:absolute;top:-5px;right:-5px;min-width:15px;height:15px;padding:0 3px;
  border-radius:999px;background:var(--mock-accent,#2FE3A8);color:var(--mock-on-accent,#08201a);
  font-size:9px;font-weight:800;display:grid;place-items:center;line-height:1}

.w-mock-hero{padding:13px 14px 15px;background:var(--mock-primary,#6D5AF6);color:var(--mock-on-primary,#fff)}
.w-mock-hero-badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;
  background:var(--mock-onp-soft,rgba(255,255,255,.22));font-size:9px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase}
.w-mock-hero b{display:block;font-size:16px;font-weight:800;line-height:1.2;margin-top:9px;
  font-family:var(--mock-fh,inherit)}
.w-mock-hero-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:11px;line-height:1.45;opacity:.86;margin-top:4px}
.w-mock-hero em{display:inline-block;margin-top:11px;padding:6px 14px;border-radius:999px;
  background:var(--mock-accent,#2FE3A8);color:var(--mock-on-accent,#08201a);
  font-size:10px;font-weight:800;font-style:normal}

/* Randul de categorii se STINGE la marginea din dreapta, ca sa se citeasca drept
   „mai sunt si altele, se deruleaza" — nu ca o pastila taiata din greseala.
   La domeniile cu nume lungi (Mamă și copil, Încălțăminte) ultima pastila
   depaseste latimea machetei; masurat la 1280. */
.w-mock-cats{display:flex;gap:6px;padding:10px 13px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
.w-mock-cat{display:inline-flex;align-items:center;gap:5px;flex:none;
  padding:4px 10px;border-radius:999px;white-space:nowrap;font-size:10px;font-weight:700;
  background:var(--mock-surface,#fff);border:1px solid var(--mock-border,#eee);color:var(--mock-muted,#6B6B80)}
.w-mock-cat i{font-size:11px;line-height:1;color:var(--mock-primary-text,#6D5AF6)}
.w-mock-cat.is-on{background:var(--mock-primary,#6D5AF6);border-color:transparent;color:var(--mock-on-primary,#fff)}
.w-mock-cat.is-on i{color:var(--mock-on-primary,#fff)}

.w-mock-sect{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:11px 13px 0}
.w-mock-sect b{font-size:12px;font-weight:800;color:var(--mock-text,#16161D);font-family:var(--mock-fh,inherit)}
.w-mock-sect span{font-size:10px;font-weight:700;color:var(--mock-primary-text,#6D5AF6);white-space:nowrap}

.w-mock-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 13px 12px}
.w-mock-prod{position:relative;display:block;border:1px solid var(--mock-border,#eee);border-radius:10px;
  overflow:hidden;background:var(--mock-surface,#fff)}
.w-mock-prod .ph{display:grid;place-items:center;aspect-ratio:3/2;
  background:var(--mock-bg,#f3f4f6) center/cover;color:var(--mock-primary-text,#6D5AF6);font-size:22px}
.w-mock-prod .tg{position:absolute;top:7px;left:7px;padding:2px 7px;border-radius:999px;
  background:var(--mock-accent,#2FE3A8);color:var(--mock-on-accent,#08201a);
  font-size:9px;font-weight:800;letter-spacing:.02em}
.w-mock-prod .nm{display:block;margin:8px 9px 0;font-size:11px;font-weight:700;line-height:1.25;
  color:var(--mock-text,#16161D);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-mock-prod .rt{display:flex;align-items:center;gap:3px;margin:3px 9px 0;
  font-size:9px;font-weight:700;color:var(--mock-muted,#6B6B80)}
.w-mock-prod .rt i{font-size:10px;color:var(--mock-accent,#2FE3A8)}
.w-mock-prod .rw{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:5px 9px 9px}
.w-mock-prod .pr{font-size:12px;font-weight:800;color:var(--mock-primary-text,#6D5AF6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-mock-prod .ad{display:grid;place-items:center;width:21px;height:21px;border-radius:7px;flex:none;
  background:var(--mock-accent,#2FE3A8);color:var(--mock-on-accent,#08201a);font-size:11px}

.w-mock-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 13px;
  border-top:1px solid var(--mock-border,#eee);background:var(--mock-surface,#fff)}
.w-mock-foot span{display:inline-flex;align-items:center;gap:4px;min-width:0;
  font-size:9px;font-weight:600;color:var(--mock-muted,#6B6B80);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.w-mock-foot i{font-size:11px;color:var(--mock-primary-text,#6D5AF6);flex:none}
.w-mock-foot b{font-weight:700;overflow:hidden;text-overflow:ellipsis}

.w-preview-cap{font-size:var(--fs-micro);color:var(--t4);margin-top:10px;text-align:center}

/* ============================================================
   13. ECRANUL DE ASTEPTARE
   ============================================================ */
.w-build{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-6);align-items:start}
@media(max-width:900px){.w-build{grid-template-columns:1fr}}
.w-build-steps{display:grid;gap:9px;margin:var(--sp-5) 0}
.w-bstep{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-sm);
  border:1px solid transparent;color:var(--t3);font-size:var(--fs-sm);opacity:.35;
  transition:all .4s var(--ease)}
.w-bstep-ico{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.06);
  display:grid;place-items:center;font-size:13px;flex:none}
.w-bstep.is-now{opacity:1;color:var(--t1);background:var(--iris-dim);border-color:rgba(109,90,246,.25)}
.w-bstep.is-now .w-bstep-ico{background:var(--iris);color:#fff}
.w-bstep.is-done{opacity:1;color:var(--t2)}
.w-bstep.is-done .w-bstep-ico{background:rgba(59,234,178,.18);color:var(--mint)}
.w-build-line{font-size:var(--fs-sm);color:var(--t3);min-height:24px}

.w-tour{margin-top:var(--sp-6);border-top:1px solid var(--line);padding-top:var(--sp-5)}
.w-tour-card{display:none}
.w-tour-card.is-on{display:flex;gap:12px;animation:w-in .4s var(--ease)}
.w-tour-ico{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.05);
  color:var(--iris-soft);display:grid;place-items:center;flex:none;font-size:16px}
.w-tour-t{font-size:var(--fs-sm);font-weight:700;color:var(--t1)}
.w-tour-d{font-size:var(--fs-meta);color:var(--t3);margin-top:2px}
.w-tour-dots{display:flex;gap:6px;margin-top:14px}
.w-tour-dot{width:22px;height:3px;border-radius:2px;background:rgba(255,255,255,.12)}
.w-tour-dot.is-on{background:var(--iris)}

/* Vitrina care se construieste */
.w-shopsvg{width:100%;height:auto;display:block}
.w-shopsvg .sv-part{opacity:0;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.w-shopsvg .sv-part.on{opacity:1}
.w-shopsvg .sv-walls{transform:translateY(14px)}
.w-shopsvg .sv-walls.on{transform:none}
.w-shopsvg .sv-facade{fill:#2A2A3A;transition:fill .8s var(--ease)}
.w-shopsvg .sv-prod{transform:translateY(-8px)}
.w-shopsvg .sv-prod.on{transform:none;transition:opacity .4s var(--ease),transform .5s cubic-bezier(.34,1.56,.64,1)}
.w-shopsvg .sv-sign{filter:drop-shadow(0 0 6px rgba(109,90,246,.6))}
.w-shopsvg .sv-signtext{font-family:'Jakarta',sans-serif;font-weight:800;font-size:15px;fill:#fff}
.w-shopsvg .sv-cloud{animation:sv-drift 26s linear infinite}
.w-shopsvg .sv-cloud-2{animation-duration:38s;animation-delay:-8s}
@keyframes sv-drift{from{transform:translateX(-40px)}to{transform:translateX(340px)}}
.w-shopsvg .sv-person{animation:sv-walk 15s linear infinite}
.w-shopsvg .sv-person-2{animation-duration:21s;animation-delay:-7s}
@keyframes sv-walk{from{transform:translateX(-30px)}to{transform:translateX(330px)}}

@media(prefers-reduced-motion:reduce){
  /* Desenul ramane, miscarea nu. Nimeni nu pierde informatie. */
  .w-shopsvg .sv-cloud,.w-shopsvg .sv-person{animation:none}
  .w-shopsvg .sv-part{transition:none}
  .w-pane.is-active{animation:none}
  .w-spin{animation:none}
}

/* ============================================================
   14. ECRANUL FINAL
   ============================================================ */
.w-done{text-align:center;max-width:640px;margin:0 auto}
.w-done-url{display:inline-flex;align-items:center;gap:10px;margin:var(--sp-4) 0 var(--sp-5);
  padding:14px 22px;border-radius:var(--r-md);background:var(--ink-850);border:1px solid rgba(109,90,246,.3);
  font-size:var(--fs-lead);font-weight:800;color:var(--t1);word-break:break-all}
.w-done-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:640px){.w-done-btns .w-btn{width:100%}}
.w-next{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:var(--sp-6);text-align:left}
@media(max-width:640px){.w-next{grid-template-columns:1fr}}
.w-next a{display:flex;gap:11px;padding:14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--ink-850);color:var(--t2);font-size:var(--fs-meta);font-weight:600;text-decoration:none}
.w-next a:hover{border-color:rgba(109,90,246,.45);color:var(--t1)}
.w-next i{color:var(--iris-soft);font-size:17px;flex:none}
.w-qr{margin:var(--sp-5) auto 0;width:132px;height:132px;background:#fff;border-radius:12px;padding:8px}

/* ============================================================
   15. INDICATORUL DE PAROLA
   ============================================================ */
.w-pw-wrap{position:relative}
.w-pw-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding:8px;
  color:var(--t3);font-size:17px;border-radius:8px}
.w-pw-eye:hover{color:var(--t1)}
.w-pw-meter{display:flex;gap:5px;margin-top:9px}
.w-pw-bar{height:3px;flex:1;border-radius:2px;background:rgba(255,255,255,.09);transition:background .3s var(--ease)}
.w-pw-txt{font-size:var(--fs-meta);color:var(--t3);margin-top:6px}
.w-pw.lvl-1 .w-pw-bar:nth-child(1){background:var(--rose)}
.w-pw.lvl-2 .w-pw-bar:nth-child(-n+2){background:var(--amber)}
.w-pw.lvl-3 .w-pw-bar{background:var(--mint)}

/* ============================================================
   16. ECRANUL „AI DEJA CONT"
   ============================================================ */
.w-recover{text-align:center;padding:var(--sp-6) var(--sp-4)}
.w-recover-ico{width:56px;height:56px;border-radius:18px;background:var(--iris-dim);
  color:var(--iris-soft);display:grid;place-items:center;font-size:26px;margin:0 auto var(--sp-4)}

/* ============================================================
   17. MICI
   ============================================================ */
.w-err{font-size:var(--fs-meta);color:var(--rose);margin-top:7px;min-height:0}
.w-err:empty{display:none}
.w-foot{padding:22px 0 34px;font-size:var(--fs-meta);color:var(--t4);text-align:center}
.w-noscript{max-width:560px;margin:80px auto;padding:24px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--ink-800);color:var(--t2)}
.w-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.w-mono{font-variant-numeric:tabular-nums}

/* ============================================================
   18. ANTETUL SI SUBSOLUL PAGINILOR (nu ale wizardului)

   In wizard logoul NU e link si nu exista meniu — acolo orice usa de iesire e o
   pierdere. Paginile de fata sunt exact pe dos: omul trebuie sa poata umbla.
   ============================================================ */
.w-head-home{display:inline-flex;text-decoration:none}
.w-head-home:hover{text-decoration:none}
.w-head-nav{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.w-head-nav a{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
  font-size:var(--fs-meta);font-weight:600;color:var(--t2);text-decoration:none;
  border:1px solid transparent;transition:all .2s var(--ease)}
.w-head-nav a:hover{color:var(--t1);border-color:var(--line);background:var(--ink-850);text-decoration:none}
.w-head-nav a i{font-size:15px;color:var(--t3)}
.w-head-nav a:hover i{color:var(--iris-soft)}
.w-head-cta{border-color:rgba(109,90,246,.35) !important;background:var(--iris-dim);color:var(--t1) !important}
@media(max-width:520px){.w-head-cta{display:none}}

.w-foot-in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.w-foot-links{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.w-foot-links a{color:var(--t3);text-decoration:none}
.w-foot-links a:hover{color:var(--iris-soft);text-decoration:underline}
@media(max-width:640px){.w-foot-in{justify-content:center;text-align:center}}

/* ============================================================
   19. ECRANELE DE AUTENTIFICARE
   ============================================================ */
.w-auth{max-width:470px;margin:0 auto;padding-top:var(--sp-5);padding-bottom:110px}
.w-auth-ico{width:54px;height:54px;border-radius:17px;background:var(--iris-dim);color:var(--iris-soft);
  display:grid;place-items:center;font-size:24px;margin:0 auto var(--sp-4)}
.w-auth-head{text-align:center;margin-bottom:var(--sp-6)}
.w-auth-head h1{font-size:clamp(23px,3vw,30px)}
.w-auth-head .w-sub{margin:var(--sp-3) auto 0;font-size:var(--fs-sm)}
.w-auth .w-btn-primary{width:100%}
.w-auth-alt{margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line);
  text-align:center;font-size:var(--fs-meta);color:var(--t3)}
.w-auth-alt a{font-weight:600}
.w-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3)}
.w-label-row a{font-size:var(--fs-meta);font-weight:600}
.w-back{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-meta);font-weight:600;
  color:var(--t3);text-decoration:none;margin-bottom:var(--sp-4)}
.w-back:hover{color:var(--t1);text-decoration:none}

/* ============================================================
   20. PAGINILE LEGALE

   Doua coloane pe ecran lat: textul si cuprinsul lipit sus. Sub 980px cuprinsul
   trece deasupra, ca o lista scurta — un document de 12 sectiuni citit pe telefon
   fara cuprins inseamna derulare oarba.
   ============================================================ */
.w-legal{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:var(--sp-7);
  align-items:start;padding-bottom:110px}
@media(max-width:980px){.w-legal{grid-template-columns:1fr;gap:var(--sp-5)}}

.w-page-head{margin-bottom:var(--sp-5)}
.w-page-head h1{margin-bottom:var(--sp-3)}
.w-page-meta{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  font-size:var(--fs-meta);color:var(--t3)}
.w-page-meta i{font-size:14px;margin-right:5px}

.w-doc{background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-6);box-shadow:var(--glint)}
@media(max-width:640px){.w-doc{padding:var(--sp-5) var(--sp-4);border-radius:var(--r-md)}}
.w-doc-intro{font-size:var(--fs-md);color:var(--t2);border-left:2px solid rgba(109,90,246,.45);
  padding-left:var(--sp-4);margin-bottom:var(--sp-6)}
.w-doc section{scroll-margin-top:24px;padding-top:var(--sp-5)}
.w-doc section+section{border-top:1px solid var(--line)}
.w-doc h2{font-size:var(--fs-h3);margin-bottom:var(--sp-3);display:flex;gap:12px;align-items:baseline}
.w-doc h2 .w-doc-n{font-size:var(--fs-meta);font-weight:800;color:var(--iris-soft);
  font-variant-numeric:tabular-nums;flex:none}
.w-doc h3{font-size:var(--fs-md);margin:var(--sp-5) 0 var(--sp-2)}
.w-doc p,.w-doc li{color:var(--t2);font-size:var(--fs-sm);line-height:1.7}
.w-doc ul,.w-doc ol{margin:0 0 var(--sp-4);padding-left:20px}
.w-doc li{margin-bottom:7px}
.w-doc li::marker{color:var(--t4)}
.w-doc strong{color:var(--t1);font-weight:700}
.w-doc a{font-weight:600}
.w-doc-box{background:var(--ink-850);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--sp-4);margin:0 0 var(--sp-4)}
.w-doc-box p:last-child{margin-bottom:0}
.w-doc-table{width:100%;border-collapse:collapse;margin:0 0 var(--sp-4);font-size:var(--fs-meta)}
.w-doc-table th,.w-doc-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);
  vertical-align:top;color:var(--t2)}
.w-doc-table th{color:var(--t3);font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap}
.w-doc-table tr:last-child td{border-bottom:0}
.w-doc-scroll{overflow-x:auto}

/* Cuprinsul e un `<details>` INCHIS: asa, pe telefon (unde sta primul pe ecran)
   nu impinge textul cu 14 randuri, dar ramane la un deget distanta. Pe ecran lat
   `order:2` il muta in coloana din dreapta si il DESCHIDE din CSS — acolo n-are
   pe cine deranja si e mai util deschis.
   Cele doua reguli de deschidere acopera doua generatii de browsere: motoarele
   vechi ascund copiii cu `display:none`, cele noi (Chrome 131+) prin
   `content-visibility` pe `::details-content`. */
.w-toc{order:2;position:sticky;top:24px;background:var(--ink-800);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--sp-4)}
@media(min-width:981px){
  .w-toc>ol{display:block}
  .w-toc::details-content{content-visibility:visible;block-size:auto}
  .w-toc>summary{list-style:none;cursor:default;pointer-events:none}
  .w-toc>summary::-webkit-details-marker{display:none}
}
@media(max-width:980px){
  .w-toc{order:0;position:static}
  .w-toc>summary{cursor:pointer;display:flex;align-items:center;gap:8px;margin-bottom:0}
  .w-toc[open]>summary{margin-bottom:var(--sp-3)}
  /* Doua coloane: 14 randuri unul sub altul ar acoperi tot ecranul. */
  .w-toc ol{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}
}
@media(max-width:480px){.w-toc ol{grid-template-columns:1fr}}
.w-toc-t{font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t3);margin-bottom:var(--sp-3)}
.w-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.w-toc li{counter-increment:toc;margin-bottom:2px}
.w-toc a{display:flex;gap:9px;padding:6px 8px;border-radius:8px;font-size:var(--fs-meta);
  color:var(--t3);text-decoration:none;line-height:1.4}
.w-toc a::before{content:counter(toc);color:var(--t4);font-variant-numeric:tabular-nums;flex:none}
.w-toc a:hover{background:var(--ink-850);color:var(--t1);text-decoration:none}

/* ============================================================
   21. MAGAZINELE MELE
   ============================================================ */
.w-account{max-width:840px;margin:0 auto;padding-bottom:110px}
.w-account-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.w-account-who{font-size:var(--fs-meta);color:var(--t3);margin-top:6px}
.w-account-who b{color:var(--t2);font-weight:600}

.w-shops{display:grid;gap:12px}
.w-shop{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--ink-850);transition:border-color .2s var(--ease)}
.w-shop:hover{border-color:var(--line-strong)}
.w-shop-ico{width:40px;height:40px;border-radius:12px;background:var(--iris-dim);color:var(--iris-soft);
  display:grid;place-items:center;font-size:19px;flex:none}
.w-shop-body{flex:1;min-width:0}
.w-shop-name{font-size:var(--fs-md);font-weight:700;color:var(--t1);word-break:break-word}
.w-shop-host{font-size:var(--fs-meta);color:var(--t3);margin-top:2px;word-break:break-all}
.w-shop-note{font-size:var(--fs-meta);color:var(--t3);margin-top:7px}
.w-shop-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.w-shop-acts .w-btn{padding:9px 15px;font-size:var(--fs-meta)}
.w-shop-acts .w-btn i{font-size:15px}
@media(max-width:520px){.w-shop-acts .w-btn{flex:1;justify-content:center}}

.w-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.02em;white-space:nowrap;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--t3)}
.w-badge i{font-size:13px}
.w-badge.is-ok{color:var(--mint);border-color:rgba(59,234,178,.28);background:rgba(59,234,178,.08)}
.w-badge.is-info{color:var(--iris-soft);border-color:rgba(109,90,246,.3);background:var(--iris-dim)}
.w-badge.is-warn{color:var(--amber);border-color:rgba(251,191,36,.28);background:rgba(251,191,36,.08)}
.w-badge.is-bad{color:var(--rose);border-color:rgba(251,113,133,.3);background:rgba(251,113,133,.08)}

.w-empty{text-align:center;padding:var(--sp-7) var(--sp-4);border:1px dashed var(--line);
  border-radius:var(--r-md);background:var(--ink-850)}
.w-empty i{font-size:30px;color:var(--t4);display:block;margin-bottom:var(--sp-3)}
.w-empty p{color:var(--t3);font-size:var(--fs-sm);max-width:38em;margin:0 auto var(--sp-4)}

/* ============================================================
   22. BLOCUL DE SETARI DIN CONT (schimbarea parolei, iesirea)
   ============================================================ */
.w-panel{margin-top:var(--sp-6);border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--ink-800);overflow:hidden}
.w-panel-head{display:flex;align-items:center;gap:12px;width:100%;padding:15px 16px;text-align:left}
.w-panel-head i:first-child{color:var(--iris-soft);font-size:18px;flex:none}
.w-panel-title{flex:1;font-size:var(--fs-sm);font-weight:700;color:var(--t1)}
.w-panel-caret{color:var(--t3);transition:transform .25s var(--ease)}
.w-panel.is-open .w-panel-caret{transform:rotate(180deg)}
.w-panel-body{display:none;padding:0 16px 18px;max-width:440px}
.w-panel.is-open .w-panel-body{display:block}

/* ============================================================
   23. CÂMPURI CU ICOANĂ + SELECT PROPRIU (pasul 1)
   Cerere user: fiecare câmp să aibă icoană sugestivă în față, iar moneda
   să nu mai fie select-ul browserului — acela arată altfel pe fiecare
   sistem, nu poate primi icoane și pe temă închisă iese alb, strident.
   ============================================================ */
.w-ig{position:relative;display:block}
.w-ig > .w-input,
.w-ig > input{padding-left:42px}
.w-ig-i{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:16px;line-height:1;color:var(--t3);pointer-events:none;
  transition:color .2s var(--ease);
}
.w-ig:focus-within .w-ig-i{color:var(--iris-soft)}
.w-req{color:var(--iris-soft);font-weight:700;margin-left:2px}

/* select propriu — nativul rămâne în pagină, ascuns, ca valoarea să plece
   corect chiar dacă JS-ul nu pornește */
.w-sel-native{display:none}
.w-sel{position:relative}
.w-sel-btn{
  width:100%;display:flex;align-items:center;gap:10px;
  background:var(--ink-850);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--t1);padding:13px 14px 13px 42px;font-size:16px;line-height:1.4;
  cursor:pointer;text-align:left;position:relative;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.w-sel-btn:hover{border-color:var(--line-strong)}
.w-sel-btn:focus-visible{outline:none;border-color:rgba(109,90,246,.55);background:var(--ink-800)}
.w-sel.is-open .w-sel-btn{border-color:rgba(109,90,246,.55);background:var(--ink-800)}
.w-sel-btn > .w-ig-i{pointer-events:none}
.w-sel-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-sel-caret{font-size:14px;color:var(--t3);transition:transform .22s var(--ease)}
.w-sel.is-open .w-sel-caret{transform:rotate(180deg)}
.w-sel-panel{
  position:absolute;z-index:60;left:0;right:0;top:calc(100% + 6px);
  background:var(--ink-800);border:1px solid var(--line-strong);border-radius:12px;
  padding:6px;max-height:280px;overflow:auto;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.9);
}
.w-sel-opt{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 12px;border-radius:8px;background:none;border:0;
  color:var(--t2);font-size:15px;text-align:left;cursor:pointer;
}
.w-sel-opt:hover,.w-sel-opt.is-active{background:rgba(109,90,246,.16);color:var(--t1)}
.w-sel-opt.is-sel{color:var(--t1);font-weight:650}
.w-sel-sym{
  flex:none;min-width:30px;text-align:center;font-weight:700;
  color:var(--iris-soft);font-size:14px;
}
.w-sel-opt.is-sel .w-sel-check{margin-left:auto;font-size:14px;color:var(--mint,#2FE3A8)}

/* Adresa magazinului are altă structură (input + sufixul `.mycloudshop.ro`),
   deci nu putea folosi `.w-ig` — icoana intră direct în cutie, ca frate al
   inputului, altfel sufixul ar fi fost împins peste ea. */
.w-addr-i{
  align-self:center;padding-left:14px;margin-right:-4px;
  font-size:16px;line-height:1;color:var(--t3);flex:none;pointer-events:none;
  transition:color .2s var(--ease);
}
.w-addr:focus-within .w-addr-i{color:var(--iris-soft)}
.w-addr.is-good .w-addr-i{color:#2FE3A8}
.w-addr.is-bad  .w-addr-i{color:#FB7185}

/* ============================================================
   24. PASUL 2 — cardurile de temă, reparate + filtre

   BUGUL: cardul e un <button> cu <span>-uri înăuntru, iar span-ul e INLINE.
   `aspect-ratio` și `padding` nu au ce face pe un inline, deci poza temei se
   prăbușea la înălțime 0, iar bulinele de culoare — poziționate absolut față de
   ea — cădeau exact peste titlu. De-aia lista arăta ca un dezastru: fără nicio
   imagine, cu numele tăiat de trei cerculețe.
   ============================================================ */
.w-theme{display:flex;flex-direction:column;text-align:left}
.w-theme-shot{display:block;width:100%}
.w-theme-meta{display:block}
.w-theme-name{display:block}
.w-theme-desc{display:block}
.w-theme-swatches{display:flex}

/* miniaturile produselor, ca în galeria de pe prima pagină */
.w-theme-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.w-theme-thumbs span{display:block;height:34px;background-size:cover;background-position:center}

/* filtrul familiei: magazin / prezentare */
.w-theme-modes{display:flex;gap:6px;flex-wrap:wrap}
.w-mode{
  display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
  background:transparent;border:1px solid var(--line);color:var(--t3);
  font-size:var(--fs-meta);font-weight:600;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.w-mode:hover{color:var(--t2);border-color:var(--line-strong)}
.w-mode.is-on{background:rgba(109,90,246,.16);border-color:rgba(109,90,246,.5);color:var(--t1)}
.w-mode i{font-size:14px;line-height:1}
.w-mode-n{opacity:.65;font-variant-numeric:tabular-nums}

/* Bifa de pe câmpul rezolvat. Un buton stins nu spune CE anume lipsește;
   bifa verde arată ce e deja în regulă, iar icoana din stânga o urmează. */
.w-ig{position:relative}
.w-ig-ok{
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  font-size:17px;line-height:1;color:#2FE3A8;pointer-events:none;
  animation:wIgPop .28s var(--ease);
}
@keyframes wIgPop{from{opacity:0;transform:translateY(-50%) scale(.6)}to{opacity:1;transform:translateY(-50%) scale(1)}}
.w-ig.is-ok > .w-input{padding-right:40px;border-color:rgba(47,227,168,.42)}
.w-ig.is-ok .w-ig-i{color:#2FE3A8}
.w-ig.is-bad > .w-input{border-color:rgba(251,113,133,.6)}
.w-ig.is-bad .w-ig-i{color:#FB7185}
@media(prefers-reduced-motion:reduce){.w-ig-ok{animation:none}}

/* ============================================================
   25. ALEGEREA DE STIL — prima intrebare din pasul 1

   Nu e un select si nu e o pereche de cuvinte: sunt doua MOSTRE reale de
   culoare, fiecare cu badge-ul ei. Omul vede exact ce primeste, iar
   previzualizarea de alaturi se schimba pe loc.
   ============================================================ */
.w-field-style{margin-bottom:var(--sp-5)}
.w-styles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.w-styles{grid-template-columns:1fr}}

.w-style{position:relative;display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-850);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.w-style:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.w-style.is-on{border-color:rgba(109,90,246,.65);
  box-shadow:0 0 0 1px rgba(109,90,246,.45),0 16px 34px -22px rgba(109,90,246,.95)}

/* badge-ul care iese in evidenta — sta peste mostra, in coltul din stanga sus */
.w-style-badge{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px 5px 9px;border-radius:999px;font-size:var(--fs-micro);font-weight:800;letter-spacing:.02em;
  background:#FFFFFF;color:#101019;border:1px solid rgba(0,0,0,.10);box-shadow:0 6px 16px -8px rgba(0,0,0,.75)}
.w-style-badge i{font-size:14px;line-height:1;color:#F59E0B}
.w-style-badge.is-dark{background:#0B0B12;color:#F5F5FA;border-color:rgba(255,255,255,.34)}
.w-style-badge.is-dark i{color:#A99CFF}

.w-style-tick{position:absolute;top:10px;right:10px;z-index:2;width:24px;height:24px;border-radius:50%;
  background:var(--mint);color:#062a1f;display:none;place-items:center;font-size:14px}
.w-style.is-on .w-style-tick{display:grid}

/* mostra: un magazin in miniatura, pictat cu chiar culorile stilului */
.w-style-mini{display:block;padding:34px 12px 12px;background:var(--s-bg)}
.w-style[data-style="light"] .w-style-mini{--s-bg:#F3F4F6;--s-sf:#FFFFFF;--s-tx:#16161D;--s-bd:#E4E6EB;--s-ac:#6D5AF6}
.w-style[data-style="dark"]  .w-style-mini{--s-bg:#101017;--s-sf:#1A1A23;--s-tx:#F2F2F7;--s-bd:#2B2B37;--s-ac:#8B7BFF}
.w-style-mini .m-bar{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:6px 6px 0 0;
  background:var(--s-sf);border:1px solid var(--s-bd);border-bottom:0}
.w-style-mini .m-dot{width:12px;height:12px;border-radius:4px;background:var(--s-ac);flex:none}
.w-style-mini .m-line{height:5px;flex:1;border-radius:3px;background:var(--s-bd)}
.w-style-mini .m-hero{display:block;height:22px;background:var(--s-ac);opacity:.92}
.w-style-mini .m-body{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:7px;
  background:var(--s-bg);border:1px solid var(--s-bd);border-top:0;border-radius:0 0 6px 6px}
.w-style-mini .m-card{display:block;padding:5px;border-radius:5px;background:var(--s-sf);border:1px solid var(--s-bd)}
.w-style-mini .m-img{display:block;height:22px;border-radius:3px;background:var(--s-bd)}
.w-style-mini .m-l1{display:block;height:4px;margin-top:5px;border-radius:2px;background:var(--s-tx);opacity:.75}
.w-style-mini .m-l2{display:block;height:4px;width:52%;margin-top:4px;border-radius:2px;background:var(--s-ac)}

.w-style-meta{display:block;padding:11px 13px 13px}
.w-style-name{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--t1);line-height:1.3}
.w-style-note{display:block;font-size:var(--fs-micro);color:var(--t3);line-height:1.45;margin-top:3px}
.w-style-chips{display:flex;gap:5px;margin-top:9px}
.w-style-chips i{width:15px;height:15px;border-radius:5px;border:1px solid rgba(255,255,255,.16);
  font-style:normal;flex:none}
.w-style.is-on .w-style-name{color:var(--t1)}

/* ============================================================
   26. PASUL 2 — al doilea rand de filtre (stilul ales in pasul 1)
   Filtrul de familie (Toate/Magazin/Prezentare) ramane exact cum era; asta e
   un rand NOU, sub el, cu aceleasi pastile.
   ============================================================ */
.w-theme-styles{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
#wStyleHint:empty{display:none}
#wStyleHint{margin-top:9px}


/* ── Banda de sus a previzualizării, CU FOTOGRAFIE ──────────────────────────
   Cerere user: „să fie cu poză, sugestie de hero, nu doar o culoare."
   Poza se pune din JS; aici doar o facem lizibilă. Vălul e în culoarea
   magazinului, nu un gri neutru — așa banda rămâne a LUI, nu a pozei.
   `background-blend-mode` face amestecul într-un singur strat, deci nu e nevoie
   de un element în plus peste care ar trebui ridicat textul. */
.w-mock-hero.has-photo{
  background-size:cover;
  background-position:center;
  background-color:var(--mock-primary,#6D5AF6);
  background-blend-mode:multiply;
  position:relative;
}
/* Al doilea strat, subtil: închide marginea de jos, ca subtitlul și butonul să
   nu cadă peste o zonă deschisă din fotografie. */
.w-mock-hero.has-photo::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.34) 100%);
  pointer-events:none;
}
.w-mock-hero.has-photo > *{position:relative;z-index:1}
/* Peste fotografie textul are nevoie de o umbră ca să se desprindă — pe banda
   plină nu, acolo ar murdări. */
.w-mock-hero.has-photo b,
.w-mock-hero.has-photo .w-mock-hero-sub{text-shadow:0 1px 3px rgba(0,0,0,.45)}
.w-mock-hero.has-photo .w-mock-hero-badge{backdrop-filter:blur(3px)}


/* Bifă pe „Datele firmei" când chiar au venit de la registru — userul voia să
   vadă limpede că firma a fost găsită, nu doar că i-a acceptat CUI-ul. */
.w-fold.is-ok .w-fold-state{color:#2FE3A8;font-weight:700}
.w-fold.is-ok .w-fold-state::before{
  content:'\e226';font-family:'lucide';font-weight:400;margin-right:6px;font-size:14px;vertical-align:-2px;
}
.w-fold.is-ok > .w-fold-head > .icon-building-2{color:#2FE3A8}


/* ── Icoana din fața titlului fiecărui pas ─────────────────────────────────
   Cerere user: „îmi place să văd icoane la titluri, să fie sugestive."
   Fiecare pas are icoana LUI (magazin, paletă, cont, plic, bifă, petrecere) —
   aceeași peste tot ar fi fost decor, nu semn.
   `vertical-align` în loc de flex: titlul poate curge pe două rânduri, iar cu
   flex icoana ar fi rămas centrată pe verticală, departe de primul rând. */
.w-h1-ico{
  display:inline-block;margin-right:11px;vertical-align:-2px;
  font-size:.78em;line-height:1;color:var(--iris-soft);
}
@media(max-width:640px){.w-h1-ico{margin-right:8px;font-size:.72em}}


/* ============================================================
   27. PASUL 2 — MOMENTUL DE DUPĂ ALEGERE

   Până acum, alegerea unei teme era o bifă verde pe un card de la rândul 7 și
   atât: nimic nu confirma CE ai ales, iar butonul de continuare era la capătul
   listei. Aici se repară trei lucruri: cardurile au schelet cât se încarcă poza,
   alegerea urcă într-o bară lipită de marginea de jos, iar filtrul care n-ar
   întoarce nimic nu mai poate fi apăsat.

   ⚠️ `span` e INLINE. Fiecare `span` de aici care primește `padding`, dimensiuni
   sau poziționare capătă și `display:block`/`flex` — greșeala asta a prăbușit deja
   de două ori pozele din cardurile de temă.
   ============================================================ */

/* ── Schelet cât se încarcă poza temei ──────────────────────────────────────
   82 de carduri = 82 de fotografii de pe alt domeniu. Fără schelet, galeria e un
   gard de dreptunghiuri goale care se umple în salturi. Clasa `is-loading` o pune
   JS-ul și o scoate când poza chiar a ajuns (nu după un cronometru inventat).
   `!important` pentru că poza e scrisă în `style=""` pe element, deci bate orice
   regulă de foaie. */
.w-theme-shot{background-color:var(--ink-700);transition:transform .35s var(--ease)}
.w-theme:hover .w-theme-shot{transform:scale(1.05)}
.w-theme.is-loading .w-theme-shot,
.w-theme.is-loading .w-theme-thumbs span{
  background-image:linear-gradient(100deg,
    rgba(255,255,255,.03) 28%,rgba(255,255,255,.09) 48%,rgba(255,255,255,.03) 68%) !important;
  background-size:220% 100%;
  animation:wShimmer 1.15s linear infinite;
}
@keyframes wShimmer{from{background-position:120% 0}to{background-position:-120% 0}}

/* Cardul ales: un puls scurt, ca ochiul să prindă CARE dintre cele 82 s-a aprins */
@keyframes wThemePick{
  from{box-shadow:0 0 0 0 rgba(109,90,246,.55),0 0 0 1px rgba(109,90,246,.35)}
  to{box-shadow:0 0 0 14px rgba(109,90,246,0),0 0 0 1px rgba(109,90,246,.35)}
}
.w-theme.is-just-picked{animation:wThemePick .6s var(--ease)}
@keyframes wTickPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.w-theme.is-on .w-theme-tick{animation:wTickPop .32s var(--ease)}

/* Filtrul care n-ar întoarce nimic nu se mai poate apăsa — altfel omul dă click
   și primește o listă goală, adică pare stricat. */
.w-mode:disabled{opacity:.32;cursor:not-allowed}
.w-mode:disabled:hover{color:var(--t3);border-color:var(--line)}

/* ── Bara temei alese ───────────────────────────────────────────────────────
   `position:sticky;bottom` ține bara pe ecran cât timp omul derulează galeria,
   pentru că elementul-container (`.w-card`) e mult mai înalt decât fereastra.
   Pe telefon devine statică: acolo rândul de acțiuni e deja lipit jos, iar două
   bare suprapuse ar mânca jumătate de ecran. */
.w-picked{
  position:sticky;bottom:16px;z-index:6;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:var(--sp-5);padding:12px 14px;border-radius:var(--r-md);
  border:1px solid rgba(109,90,246,.45);
  background:linear-gradient(180deg,rgba(30,27,58,.97),rgba(16,16,25,.97));
  box-shadow:0 22px 46px -24px rgba(0,0,0,.95),var(--glint);
  backdrop-filter:blur(10px);
}
.w-picked[hidden]{display:none}
.w-picked-shot{
  display:block;width:66px;height:44px;flex:none;border-radius:9px;
  background:var(--ink-700) center/cover no-repeat;border:1px solid var(--line);
}
.w-picked-body{display:block;flex:1;min-width:140px}
.w-picked-label{display:block;font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--iris-soft)}
.w-picked-name{display:block;font-size:var(--fs-sm);font-weight:800;color:var(--t1);
  line-height:1.25;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-picked-name i{font-size:13px;color:var(--t3);margin-right:7px;vertical-align:-1px}
.w-picked-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px;
  font-size:var(--fs-micro);color:var(--t3)}
.w-picked-meta b{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.w-picked-meta i{font-size:13px;line-height:1;color:var(--t4)}
.w-picked-sw{display:flex;gap:5px;flex:none}
.w-picked-sw span{display:block;width:17px;height:17px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.34)}
.w-picked .w-btn{flex:none;padding:11px 18px}
@keyframes wPickedPop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.w-picked.is-pop{animation:wPickedPop .32s var(--ease)}
@media(max-width:900px){
  .w-picked{position:static;bottom:auto}
  .w-picked .w-btn{width:100%;justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  .w-theme.is-loading .w-theme-shot,
  .w-theme.is-loading .w-theme-thumbs span,
  .w-theme.is-just-picked,
  .w-theme.is-on .w-theme-tick,
  .w-picked.is-pop{animation:none}
  .w-theme:hover .w-theme-shot{transform:none}
}


/* ============================================================
   28. PANOURILE DE SUB MACHETĂ — se schimbă cu pasul

   Macheta rămâne aceeași (e magazinul lui, n-are de ce să dispară), dar sub ea
   coloana din dreapta spune altceva la fiecare pas: culorile temei la 2, ce
   urmează la 3, recapitularea la 4. Vezi `preview-live.php`.

   ⚠️ Iar `span`-uri: toate cele care primesc dimensiuni sau padding capătă și
   `display:block`/`flex`.
   ============================================================ */
.w-pv{
  margin-top:14px;padding:14px 15px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--ink-800);box-shadow:var(--glint);
  animation:wPvIn .3s var(--ease);
}
.w-pv[hidden]{display:none}
@keyframes wPvIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.w-pv-title{display:flex;align-items:center;gap:8px;margin-bottom:11px;
  font-size:var(--fs-meta);font-weight:800;color:var(--t1);letter-spacing:.01em}
.w-pv-title i{font-size:16px;line-height:1;color:var(--iris-soft);flex:none}
.w-pv-hint{font-size:var(--fs-micro);color:var(--t3);line-height:1.5}

/* ── Pasul 2: culorile temei, cu rolul lor scris ─────────────────────────── */
.w-pv-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.w-pv-col{display:flex;flex-direction:column;gap:6px;min-width:0}
.w-pv-col .sw{display:block;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.14)}
.w-pv-col b{font-size:var(--fs-micro);font-weight:700;color:var(--t2);line-height:1.2}
/* Codul de culoare e INFORMAȚIE, nu decor: pe `--t4` măsura dădea 2,9:1 pe fundalul
   cardului. Cu `--t3` urcă la 5,6:1 — măsurat, nu ghicit. */
.w-pv-col i{font-style:normal;font-size:11px;color:var(--t3);font-variant-numeric:tabular-nums;
  text-transform:uppercase;letter-spacing:.03em}
.w-pv-fonts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.w-pv-font{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--ink-850);font-size:var(--fs-micro);color:var(--t2)}
.w-pv-font i{font-size:13px;line-height:1;color:var(--t4);flex:none}
.w-pv-font b{font-weight:700;color:var(--t1)}

/* ── Pasul 3: ce urmează ─────────────────────────────────────────────────── */
.w-pv-steps{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.w-pv-steps li{display:grid;grid-template-columns:24px 1fr;gap:4px 10px;align-items:start}
.w-pv-steps .n{grid-row:span 2;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--iris-dim);border:1px solid rgba(109,90,246,.35);
  color:var(--iris-soft);font-size:11px;font-weight:800;line-height:1}
.w-pv-steps b{font-size:var(--fs-meta);font-weight:700;color:var(--t1);line-height:1.3}
.w-pv-steps li > span:last-child{font-size:var(--fs-micro);color:var(--t3);line-height:1.45}
.w-pv-trust{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:13px;padding-top:12px;
  border-top:1px solid var(--line)}
.w-pv-trust span{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-micro);color:var(--t3)}
.w-pv-trust i{font-size:14px;line-height:1;color:var(--mint);flex:none}

/* ── Pasul 4: recapitularea ──────────────────────────────────────────────── */
.w-pv-rows{display:grid;gap:9px}
.w-pv-row{display:grid;grid-template-columns:26px 1fr;gap:2px 10px;align-items:start}
.w-pv-row > i{grid-row:span 2;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:var(--iris-dim);color:var(--iris-soft);font-size:14px;font-style:normal}
.w-pv-row b{display:block;font-size:var(--fs-meta);font-weight:700;color:var(--t1);
  line-height:1.3;word-break:break-word}
.w-pv-row > span{display:block;font-size:var(--fs-micro);color:var(--t3);line-height:1.4;word-break:break-word}

@media(prefers-reduced-motion:reduce){.w-pv{animation:none}}


/* ============================================================
   29. MACHETA — poze pe categorii, schelet, semn la schimbarea temei
   ============================================================ */

/* Poza categoriei în pastilă. `span` INLINE ⇒ `display:block`, altfel lățimea și
   înălțimea n-ar avea niciun efect și poza n-ar apărea deloc. */
.w-mock-cat .cph{
  display:block;width:16px;height:16px;border-radius:50%;flex:none;
  background:var(--mock-bg,#f3f4f6) center/cover no-repeat;
  border:1px solid var(--mock-border,#eee);
}

/* Schelet cât vine poza produsului. Banda se face din CHIAR variabilele machetei,
   deci merge și pe temă luminoasă, și pe temă închisă, fără o a doua regulă.
   `!important` pentru că poza e scrisă în `style=""` pe element. */
.w-mock-prod .ph.is-loading{
  background-image:linear-gradient(100deg,
    var(--mock-bg,#f3f4f6) 26%,var(--mock-border,#e4e6eb) 48%,var(--mock-bg,#f3f4f6) 70%) !important;
  background-size:220% 100%;
  animation:wShimmer 1.15s linear infinite;
}

/* SEMNUL CĂ S-A SCHIMBAT HAINA. Recolorarea e instantanee (variabile CSS), deci
   între două teme apropiate ca nuanță omul nu e sigur că s-a întâmplat ceva. O
   lumină trece o dată peste machetă — se animă `background-position`, nu
   `transform`, ca să nu iasă nimic din ramă. */
.w-mock{position:relative}
.w-mock.is-swap::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.30) 50%,transparent 62%);
  background-size:260% 100%;
  animation:wMockSweep .62s var(--ease);
}
@keyframes wMockSweep{from{background-position:160% 0}to{background-position:-160% 0}}

@media(prefers-reduced-motion:reduce){
  .w-mock.is-swap::after{animation:none;display:none}
  .w-mock-prod .ph.is-loading{animation:none}
}