[ux_html]
<div class="dps">
<!-- PAGE HEADER -->
<div class="pagehead">
  <div class="crumb"><a href="/">Acasa</a> / <a href="/contul-meu/">Contul meu</a> / <b>Wishlist</b></div>
  <h1>Wishlist-ul tau</h1>
  <p class="sub">Bifeaza <b>2 produse</b> ca sa le compari. Nu-ti spunem care-i mai buna &mdash; fiecare culoare are momentul ei. Si, sincer, de multe ori cel mai bun raspuns e <em>amandoua</em>.</p>
</div>
</div>
[/ux_html]

[ux_html]
<div class="dps">
<!-- WISHLIST GRID + COMPARISON PANEL -->
<!-- NOTA: gridul de mai jos e SHELL vizual mock (4 produse demo). In productie -->
<!-- continutul listei de dorinte e randat de pluginul YITH WooCommerce Wishlist (nativ Flatsome). -->
<!-- Layer-ul de comparatie pe culori (checkbox „Compara" + tabel „de ce o porti" + „ia-le pe amandoua") e custom. -->
<div class="wl-grid" id="wlGrid">
  <article class="wl-card" data-key="blush">
    <!-- SWAP: poza produs Blush --><div class="wl-ph"><img src="https://dapsis.ro/wp-content/uploads/2026/06/set-costum-medical-roz-blush-doll-flares2.webp" style="object-position:30% 72%" alt="Costum Blush"><span class="wl-heart"><svg viewBox="0 0 24 24"><path d="M12 21s-7-4.4-9.3-8.2C1.2 10 2 6.5 5 5.4c2-0.7 3.9.2 5 2 1.1-1.8 3-2.7 5-2 3 1.1 3.8 4.6 2.3 7.4C19 16.6 12 21 12 21Z"/></svg></span><button class="wl-x" aria-label="Scoate din wishlist">&times;</button></div>
    <div class="wl-b">
      <span class="wl-mat">Vascoza</span><h3 class="serif">Costum Blush</h3>
      <span class="wl-cdot"><i style="background:#e6b0c0"></i>Roz blush</span>
      <label class="wl-cmp"><input type="checkbox" class="cmp-cb" checked><span class="bx"><svg class="i" viewBox="0 0 24 24"><path d="m5 12 5 5 9-11"/></svg></span><span class="lbl">Compara</span></label>
      <span class="wl-pr">350 lei</span>
      <div class="wl-foot"><button class="wl-add">Adauga in cos</button></div>
    </div>
  </article>

  <article class="wl-card" data-key="forest">
    <!-- SWAP: poza produs Forest --><div class="wl-ph"><img src="https://dapsis.ro/wp-content/uploads/2025/10/Coperta-costum-medical-forest-green.jpg" style="object-position:50% 30%" alt="Costum Forest"><span class="wl-heart"><svg viewBox="0 0 24 24"><path d="M12 21s-7-4.4-9.3-8.2C1.2 10 2 6.5 5 5.4c2-0.7 3.9.2 5 2 1.1-1.8 3-2.7 5-2 3 1.1 3.8 4.6 2.3 7.4C19 16.6 12 21 12 21Z"/></svg></span><button class="wl-x" aria-label="Scoate din wishlist">&times;</button></div>
    <div class="wl-b">
      <span class="wl-mat">Vascoza</span><h3 class="serif">Costum Forest</h3>
      <span class="wl-cdot"><i style="background:#4d6b54"></i>Verde</span>
      <label class="wl-cmp"><input type="checkbox" class="cmp-cb" checked><span class="bx"><svg class="i" viewBox="0 0 24 24"><path d="m5 12 5 5 9-11"/></svg></span><span class="lbl">Compara</span></label>
      <span class="wl-pr">350 lei</span>
      <div class="wl-foot"><button class="wl-add">Adauga in cos</button></div>
    </div>
  </article>

  <article class="wl-card" data-key="navy">
    <!-- SWAP: poza produs Navy --><div class="wl-ph"><img src="https://dapsis.ro/wp-content/uploads/2026/04/Coperta-set-costum-medical-navy.jpg" style="object-position:50% 26%" alt="Costum Navy"><span class="wl-heart"><svg viewBox="0 0 24 24"><path d="M12 21s-7-4.4-9.3-8.2C1.2 10 2 6.5 5 5.4c2-0.7 3.9.2 5 2 1.1-1.8 3-2.7 5-2 3 1.1 3.8 4.6 2.3 7.4C19 16.6 12 21 12 21Z"/></svg></span><button class="wl-x" aria-label="Scoate din wishlist">&times;</button></div>
    <div class="wl-b">
      <span class="wl-mat">Vascoza</span><h3 class="serif">Costum Navy</h3>
      <span class="wl-cdot"><i style="background:#2f4f7a"></i>Albastru</span>
      <label class="wl-cmp"><input type="checkbox" class="cmp-cb"><span class="bx"><svg class="i" viewBox="0 0 24 24"><path d="m5 12 5 5 9-11"/></svg></span><span class="lbl">Compara</span></label>
      <span class="wl-pr">350 lei</span>
      <div class="wl-foot"><button class="wl-add">Adauga in cos</button></div>
    </div>
  </article>

  <article class="wl-card" data-key="ballerina">
    <!-- SWAP: poza produs Ballerina --><div class="wl-ph"><img src="https://dapsis.ro/wp-content/uploads/2026/05/scrub-roz-ballerina-coperta.jpg" style="object-position:40% 24%" alt="Scrub Ballerina"><span class="wl-heart"><svg viewBox="0 0 24 24"><path d="M12 21s-7-4.4-9.3-8.2C1.2 10 2 6.5 5 5.4c2-0.7 3.9.2 5 2 1.1-1.8 3-2.7 5-2 3 1.1 3.8 4.6 2.3 7.4C19 16.6 12 21 12 21Z"/></svg></span><button class="wl-x" aria-label="Scoate din wishlist">&times;</button></div>
    <div class="wl-b">
      <span class="wl-mat">Bumbac</span><h3 class="serif">Scrub Ballerina</h3>
      <span class="wl-cdot"><i style="background:#d894ad"></i>Roz ballerina</span>
      <label class="wl-cmp"><input type="checkbox" class="cmp-cb"><span class="bx"><svg class="i" viewBox="0 0 24 24"><path d="m5 12 5 5 9-11"/></svg></span><span class="lbl">Compara</span></label>
      <span class="wl-pr">340 lei</span>
      <div class="wl-foot"><button class="wl-add">Adauga in cos</button></div>
    </div>
  </article>
</div>

<!-- COMPARISON PANEL -->
<div class="cmp-wrap">
  <div class="cmp glass" id="cmpPanel"><!-- rendered by JS --></div>
</div>

<!-- JS comparatie pe culori MIGRAT in Code Snippet: site-source/snippets/30-wishlist-compare.php (Faza 3.7 - ux_html strip-uieste tagurile de script) -->
</div>
[/ux_html]