/* =======================
     Wishlist (scoped) wl3
     ======================= */
  .wl3{padding:16px 0 90px}
  .wl3-hero{
    border-radius:18px;
    padding:14px 14px 12px;
    color:#fff;
    background:
      radial-gradient(900px 240px at 10% 0%, rgba(255,255,255,.20), transparent 60%),
      radial-gradient(700px 260px at 90% 40%, rgba(255,255,255,.16), transparent 60%),
      linear-gradient(135deg,#ff4d6d 0%, #7c3aed 48%, #0ea5e9 100%);
    box-shadow:0 14px 30px rgba(0,0,0,.14);
    border:1px solid rgba(255,255,255,.18);
    position:relative;
    overflow:hidden;
    margin-bottom:14px;
  }
  .wl3-hero:after{
    content:"";
    position:absolute; inset:-40px;
    background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.16) 40%,transparent 80%);
    transform:translateX(-60%) rotate(8deg);
    animation:wl3-sheen 5.5s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes wl3-sheen{0%,55%{transform:translateX(-60%) rotate(8deg)} 100%{transform:translateX(60%) rotate(8deg)}}
  @media (prefers-reduced-motion:reduce){.wl3-hero:after{animation:none}}

  .wl3-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;position:relative;z-index:1}
  .wl3-title{margin:0;font-weight:1000;font-size:22px;letter-spacing:-.2px}
  .wl3-sub{margin:6px 0 0;opacity:.92;font-weight:800;font-size:13px}
  .wl3-count{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 10px;border-radius:999px;
    background:rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.18);
    font-weight:1000;font-size:12px;white-space:nowrap;
  }
  .wl3-count b{font-weight:1000}
  .wl3-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;position:relative;z-index:1}
  .wl3-chip{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 12px;border-radius:999px;
    font-weight:1000;font-size:12px;text-decoration:none;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.14);
    color:#fff;
    backdrop-filter: blur(8px);
  }
  .wl3-chip:hover{background:rgba(255,255,255,.20)}
  .wl3-chip--solid{
    background:#fff;color:#111;border-color:rgba(255,255,255,.30);
    box-shadow:0 10px 20px rgba(0,0,0,.12);
  }

  /* Controls */
  .wl3-controls{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;flex-wrap:wrap;margin:10px 0 14px;
  }
  .wl3-sort{display:flex;align-items:center;gap:10px;margin:0}
  .wl3-sort label{font-size:12px;opacity:.7;font-weight:1000}
  .wl3-select{
    padding:10px 12px;border-radius:12px;
    border:1px solid rgba(0,0,0,.14);
    background:#fff;font-weight:900;
    font-size:16px;
  }
  .wl3-btn{
    min-height:44px;padding:10px 14px;border-radius:14px;
    border:1px solid rgba(0,0,0,.12);
    font-weight:1000;cursor:pointer;
    display:inline-flex;align-items:center;gap:8px;
    background:linear-gradient(135deg,#111,#222);
    color:#fff;
    box-shadow:0 10px 22px rgba(0,0,0,.12);
  }
  .wl3-btn:hover{opacity:.94;transform:translateY(-1px)}
  @media (prefers-reduced-motion:reduce){.wl3-btn:hover{transform:none}}

  /* Cards: badge + hover swap (no zoom) */
  .wl3 .showcase-banner{position:relative;overflow:hidden;border-radius:var(--border-radius-md)}
  .wl3-badge{
    position:absolute;top:10px;left:10px;z-index:4;
    padding:6px 10px;border-radius:999px;
    font-size:11px;font-weight:1000;letter-spacing:.4px;
    color:#111;background:rgba(255,255,255,.92);
    border:1px solid rgba(0,0,0,.10);
    box-shadow:0 10px 22px rgba(0,0,0,.10);
  }
  .wl3-badge--sale{
    background:linear-gradient(135deg,#ffd60a,#ff4d6d);
    color:#111;border-color:rgba(0,0,0,.08);
  }

  .wl3 .product-img.hover{position:absolute;inset:0;opacity:0;transition:opacity .18s ease}
  .wl3 .showcase-banner:hover .product-img.hover{opacity:1}
  .wl3 .showcase-banner:hover .product-img.default{opacity:0}
  @media (hover:none){
    .wl3 .product-img.hover{display:none}
    .wl3 .showcase-banner:hover .product-img.default{opacity:1}
  }

  /* remove button */
  .wl3-btn-action{
    width:40px;height:40px;border-radius:14px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(0,0,0,.25);
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;backdrop-filter: blur(8px);
  }
  .wl3-btn-action ion-icon{font-size:18px;color:#fff}
  .wl3-actions-wrap{
    position:absolute;right:10px;top:10px;z-index:5;
    display:flex;gap:10px;align-items:center;
  }

  /* empty state */
  .wl3-empty{
    margin-top:10px;
    border-radius:18px;
    padding:16px;
    background:
      radial-gradient(420px 180px at 10% 0%, rgba(124,58,237,.16), transparent 60%),
      radial-gradient(420px 180px at 90% 40%, rgba(14,165,233,.14), transparent 60%),
      rgba(0,0,0,.02);
    border:1px solid rgba(0,0,0,.10);
  }
  .wl3-empty-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  .wl3-empty h2{margin:0;font-weight:1000;font-size:18px}
  .wl3-empty p{margin:6px 0 0;opacity:.75;font-weight:900}
  .wl3-empty-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
  .wl3-primary{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:12px 14px;border-radius:16px;text-decoration:none;
    font-weight:1000;background:linear-gradient(135deg,#ff4d6d,#7c3aed,#0ea5e9);
    color:#fff;border:1px solid rgba(0,0,0,.06);
    box-shadow:0 14px 26px rgba(0,0,0,.12);
  }
  .wl3-ghost{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:12px 14px;border-radius:16px;text-decoration:none;
    font-weight:1000;background:#fff;color:#111;
    border:1px solid rgba(0,0,0,.12);
  }

  /* rec strip (Temu-like) */
  .wl3-strip{margin-top:18px}
  .wl3-strip-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
  .wl3-strip-title{margin:0;font-size:16px;font-weight:1000}
  .wl3-strip-link{font-size:13px;opacity:.8;text-decoration:none;font-weight:1000}
  .wl3-scroller{
    display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;
    padding:2px 0 10px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
  }
  .wl3-scroller::-webkit-scrollbar{height:6px}
  .wl3-scroller::-webkit-scrollbar-thumb{border-radius:999px;background:rgba(0,0,0,.18)}
  .wl3-card{
    flex:0 0 170px;scroll-snap-align:start;
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;overflow:hidden;background:#fff;
    box-shadow:0 10px 22px rgba(0,0,0,.06);
  }
  @media (max-width:360px){.wl3-card{flex-basis:160px}}
  .wl3-card-media{display:block;aspect-ratio:4/5;overflow:hidden;background:rgba(0,0,0,.03)}
  .wl3-card-media img{width:100%;height:100%;object-fit:cover;display:block}
  .wl3-card-body{padding:10px}
  .wl3-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:12px;opacity:.8;font-weight:1000}
  .wl3-pill{
    font-size:11px;padding:3px 8px;border-radius:999px;
    border:1px solid rgba(0,0,0,.10);
    background:rgba(0,0,0,.02);
    font-weight:1000;
  }
  .wl3-pill--hot{
    background:linear-gradient(135deg,#ffd60a,#ff4d6d);
    border-color:rgba(0,0,0,.08);
  }
  .wl3-card-title{
    display:block;font-size:13px;line-height:1.25;
    text-decoration:none;color:inherit;margin-bottom:8px;
    overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    min-height:32px;font-weight:1000;
  }
  .wl3-card-price{font-size:13px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-weight:1000}
  .wl3-card-price del{opacity:.6;font-size:12px;font-weight:900}

  /* subtle “grab me” hint on touch */
  @media (hover:none){
    .wl3-scroller{animation:wl3-nudge 4.2s ease-in-out infinite}
    @keyframes wl3-nudge{0%,70%,100%{transform:translateX(0)} 78%{transform:translateX(-14px)} 86%{transform:translateX(0)}}
  }
  @media (prefers-reduced-motion:reduce){.wl3-scroller{animation:none}}