/* =========================================================
   Wunschliste – Occasion Themes & Layout
   Amzly 2026
   ========================================================= */

/* ---------- Base tokens (overridden per occasion) --------- */
.wl-pro-page {
  --wlp-accent:   #f472b6;
  --wlp-accent2:  #c084fc;
  --wlp-grad:     linear-gradient(135deg, #fdf2f8 0%, #fce7f3 50%, #ede9fe 100%);
  --wlp-grad-dk:  linear-gradient(135deg, #2a1a2e 0%, #1f1525 50%, #1e1b2e 100%);
  --wlp-hero-txt: #9d174d;
  --wlp-badge-bg: #fce7f3;
  --wlp-badge-co: #be185d;
  --wlp-border:   #f9a8d4;
  --wlp-card-r:   18px;
  --wlp-shadow:   0 4px 24px rgba(244,114,182,.15);
  /* Dashboard mini-card: saturated gradient + texture + watermark */
  --wlp-card-grad:    linear-gradient(135deg, #a78bfa 0%, #818cf8 50%, #f472b6 100%);
  --wlp-card-pattern: radial-gradient(circle, rgba(255,255,255,.3) 1.5px, transparent 2px);
  --wlp-card-pattern-size: 26px 26px;
  --wlp-watermark: "✨";
}

/* ---------- Occasion: Birthday 🎂 ------------------------- */
.wl-oc-birthday {
  --wlp-accent:   #f472b6;
  --wlp-accent2:  #fb923c;
  --wlp-grad:     linear-gradient(135deg, #fff1f2 0%, #fce7f3 45%, #fff7ed 100%);
  --wlp-grad-dk:  linear-gradient(135deg, #2d0a1f 0%, #271228 100%);
  --wlp-hero-txt: #be185d;
  --wlp-badge-bg: #fce7f3;
  --wlp-badge-co: #be185d;
  --wlp-border:   #fbcfe8;
  --wlp-shadow:   0 4px 24px rgba(244,114,182,.18);
  --wlp-card-grad: linear-gradient(135deg, #fb7185 0%, #f472b6 50%, #fbbf24 100%);
  --wlp-card-pattern:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.55) 2px, transparent 2.5px),
    radial-gradient(circle at 68% 58%, rgba(255,255,255,.4)  2px, transparent 2.5px),
    radial-gradient(circle at 40% 82%, rgba(255,255,255,.5) 1.5px, transparent 2px),
    radial-gradient(circle at 85% 18%, rgba(255,255,255,.45) 1.5px, transparent 2px);
  --wlp-card-pattern-size: 46px 46px, 60px 60px, 38px 38px, 52px 52px;
  --wlp-watermark: "🎂";
}

/* ---------- Occasion: Christmas 🎄 ------------------------ */
.wl-oc-christmas {
  --wlp-accent:   #16a34a;
  --wlp-accent2:  #dc2626;
  --wlp-grad:     linear-gradient(135deg, #f0fdf4 0%, #dcfce7 40%, #fef2f2 100%);
  --wlp-grad-dk:  linear-gradient(135deg, #052e16 0%, #1a0505 100%);
  --wlp-hero-txt: #14532d;
  --wlp-badge-bg: #dcfce7;
  --wlp-badge-co: #166534;
  --wlp-border:   #86efac;
  --wlp-shadow:   0 4px 24px rgba(22,163,74,.15);
  --wlp-card-grad: linear-gradient(160deg, #166534 0%, #14532d 45%, #7f1d1d 100%);
  --wlp-card-pattern:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.6) 1.5px, transparent 2px),
    radial-gradient(circle at 55% 60%, rgba(255,255,255,.45) 1.5px, transparent 2px),
    radial-gradient(circle at 80% 15%, rgba(255,255,255,.55) 1.5px, transparent 2px),
    radial-gradient(circle at 30% 85%, rgba(255,255,255,.4) 1px, transparent 1.5px),
    radial-gradient(circle at 90% 75%, rgba(251,191,36,.5) 1.5px, transparent 2px);
  --wlp-card-pattern-size: 40px 40px, 55px 55px, 34px 34px, 48px 48px, 60px 60px;
  --wlp-watermark: "🎄";
}

/* ---------- Occasion: Easter 🐣 --------------------------- */
.wl-oc-easter {
  --wlp-accent:   #a3e635;
  --wlp-accent2:  #f9a8d4;
  --wlp-grad:     linear-gradient(135deg, #fefce8 0%, #ecfccb 40%, #fdf2f8 100%);
  --wlp-grad-dk:  linear-gradient(135deg, #1a1a08 0%, #200e1a 100%);
  --wlp-hero-txt: #3f6212;
  --wlp-badge-bg: #ecfccb;
  --wlp-badge-co: #3f6212;
  --wlp-border:   #bef264;
  --wlp-shadow:   0 4px 24px rgba(163,230,53,.18);
  --wlp-card-grad: linear-gradient(135deg, #a3e635 0%, #fde047 50%, #f9a8d4 100%);
  --wlp-card-pattern:
    radial-gradient(ellipse 5px 7px at 20% 30%, rgba(255,255,255,.5) 99%, transparent),
    radial-gradient(ellipse 4px 6px at 70% 65%, rgba(255,255,255,.4) 99%, transparent),
    radial-gradient(ellipse 5px 7px at 45% 80%, rgba(255,255,255,.45) 99%, transparent),
    radial-gradient(ellipse 4px 6px at 88% 25%, rgba(255,255,255,.4) 99%, transparent);
  --wlp-card-pattern-size: 50px 50px, 62px 62px, 44px 44px, 56px 56px;
  --wlp-watermark: "🐣";
}

/* ---------- Occasion: Nikolaus 🎅 ------------------------- */
.wl-oc-nikolaus {
  --wlp-accent:   #dc2626;
  --wlp-accent2:  #ca8a04;
  --wlp-grad:     linear-gradient(135deg, #fff7ed 0%, #fef2f2 45%, #fefce8 100%);
  --wlp-grad-dk:  linear-gradient(135deg, #2d0505 0%, #1c1200 100%);
  --wlp-hero-txt: #991b1b;
  --wlp-badge-bg: #fef2f2;
  --wlp-badge-co: #991b1b;
  --wlp-border:   #fca5a5;
  --wlp-shadow:   0 4px 24px rgba(220,38,38,.15);
  --wlp-card-grad: repeating-linear-gradient(45deg, #dc2626 0 18px, #b91c1c 18px 36px);
  --wlp-card-pattern:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.4) 1.5px, transparent 2px),
    radial-gradient(circle at 75% 70%, rgba(251,191,36,.5) 1.5px, transparent 2px);
  --wlp-card-pattern-size: 44px 44px, 50px 50px;
  --wlp-watermark: "🎅";
}

/* ---------- Occasion: Wedding 💍 -------------------------- */
.wl-oc-wedding {
  --wlp-accent:   #c084fc;
  --wlp-accent2:  #f9a8d4;
  --wlp-grad:     linear-gradient(135deg, #faf5ff 0%, #f5f0ff 40%, #fdf2f8 100%);
  --wlp-grad-dk:  linear-gradient(135deg, #1e0a2e 0%, #240e1e 100%);
  --wlp-hero-txt: #6b21a8;
  --wlp-badge-bg: #f3e8ff;
  --wlp-badge-co: #7e22ce;
  --wlp-border:   #d8b4fe;
  --wlp-shadow:   0 4px 24px rgba(192,132,252,.18);
  --wlp-card-grad: linear-gradient(135deg, #c084fc 0%, #a78bfa 50%, #f9a8d4 100%);
  --wlp-card-pattern:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,.55) 1.5px, transparent 2px),
    radial-gradient(circle at 65% 60%, rgba(255,255,255,.45) 1.5px, transparent 2px),
    radial-gradient(circle at 85% 30%, rgba(255,255,255,.4) 1px, transparent 1.5px);
  --wlp-card-pattern-size: 40px 40px, 54px 54px, 32px 32px;
  --wlp-watermark: "💍";
}

/* ---------- Occasion: Baby 🍼 ----------------------------- */
.wl-oc-baby {
  --wlp-accent:   #67e8f9;
  --wlp-accent2:  #a5b4fc;
  --wlp-grad:     linear-gradient(135deg, #ecfeff 0%, #cffafe 40%, #eef2ff 100%);
  --wlp-grad-dk:  linear-gradient(135deg, #051012 0%, #0d0a20 100%);
  --wlp-hero-txt: #155e75;
  --wlp-badge-bg: #cffafe;
  --wlp-badge-co: #0e7490;
  --wlp-border:   #a5f3fc;
  --wlp-shadow:   0 4px 24px rgba(103,232,249,.18);
  --wlp-card-grad: linear-gradient(135deg, #67e8f9 0%, #a5b4fc 50%, #fbcfe8 100%);
  --wlp-card-pattern:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,.5) 6px, transparent 7px),
    radial-gradient(circle at 70% 65%, rgba(255,255,255,.4) 5px, transparent 6px),
    radial-gradient(circle at 45% 80%, rgba(255,255,255,.35) 4px, transparent 5px);
  --wlp-card-pattern-size: 70px 70px, 84px 84px, 60px 60px;
  --wlp-watermark: "🍼";
}

/* ---------- Occasion: Anniversary 💖 ---------------------- */
.wl-oc-anniversary {
  --wlp-accent:   #fb7185;
  --wlp-accent2:  #c084fc;
  --wlp-grad:     linear-gradient(135deg, #fff1f2 0%, #ffe4e6 40%, #fdf4ff 100%);
  --wlp-grad-dk:  linear-gradient(135deg, #2d0a10 0%, #1e0a2e 100%);
  --wlp-hero-txt: #9f1239;
  --wlp-badge-bg: #ffe4e6;
  --wlp-badge-co: #9f1239;
  --wlp-border:   #fda4af;
  --wlp-shadow:   0 4px 24px rgba(251,113,133,.18);
  --wlp-card-grad: linear-gradient(135deg, #fb7185 0%, #e11d48 50%, #c084fc 100%);
  --wlp-card-pattern:
    radial-gradient(circle at 18% 25%, rgba(255,255,255,.5) 1.5px, transparent 2px),
    radial-gradient(circle at 62% 55%, rgba(255,255,255,.4) 1.5px, transparent 2px),
    radial-gradient(circle at 85% 75%, rgba(255,255,255,.45) 1.5px, transparent 2px);
  --wlp-card-pattern-size: 42px 42px, 56px 56px, 36px 36px;
  --wlp-watermark: "💖";
}

/* ---------- Occasion: Travel ✈️ --------------------------- */
.wl-oc-travel {
  --wlp-accent:   #0ea5e9;
  --wlp-accent2:  #14b8a6;
  --wlp-grad:     linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 40%, #f0fdfa 100%);
  --wlp-grad-dk:  linear-gradient(135deg, #040d14 0%, #03120f 100%);
  --wlp-hero-txt: #0369a1;
  --wlp-badge-bg: #e0f2fe;
  --wlp-badge-co: #0369a1;
  --wlp-border:   #7dd3fc;
  --wlp-shadow:   0 4px 24px rgba(14,165,233,.15);
  --wlp-card-grad: linear-gradient(135deg, #0ea5e9 0%, #14b8a6 50%, #fde047 100%);
  --wlp-card-pattern: repeating-linear-gradient(-45deg, rgba(255,255,255,.28) 0 3px, transparent 3px 26px);
  --wlp-card-pattern-size: auto;
  --wlp-watermark: "✈️";
}

/* ---------- Occasion: Other ⭐ ----------------------------- */
.wl-oc-other {
  --wlp-accent:   #a78bfa;
  --wlp-accent2:  #fb923c;
  --wlp-grad:     linear-gradient(135deg, #f5f3ff 0%, #ede9fe 40%, #fff7ed 100%);
  --wlp-grad-dk:  linear-gradient(135deg, #1a1228 0%, #1c0f00 100%);
  --wlp-hero-txt: #5b21b6;
  --wlp-badge-bg: #ede9fe;
  --wlp-badge-co: #5b21b6;
  --wlp-border:   #c4b5fd;
  --wlp-shadow:   0 4px 24px rgba(167,139,250,.18);
  --wlp-card-grad: linear-gradient(135deg, #a78bfa 0%, #818cf8 50%, #fb923c 100%);
  --wlp-card-pattern:
    radial-gradient(circle at 22% 28%, rgba(255,255,255,.5) 1.5px, transparent 2px),
    radial-gradient(circle at 68% 62%, rgba(255,255,255,.4) 1.5px, transparent 2px),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.45) 1px, transparent 1.5px);
  --wlp-card-pattern-size: 44px 44px, 58px 58px, 34px 34px;
  --wlp-watermark: "⭐";
}

/* =========================================================
   Hero Banner
   ========================================================= */
.wlp-hero {
  background: var(--wlp-grad);
  border-radius: var(--wlp-card-r);
  padding: 2rem 2rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--wlp-shadow);
  border: 1px solid var(--wlp-border);
  position: relative;
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .wlp-hero { background: var(--wlp-grad-dk); }
}
:root[data-theme="dark"] .wlp-hero  { background: var(--wlp-grad-dk); }
:root[data-theme="light"] .wlp-hero { background: var(--wlp-grad); }

.wlp-hero-icon {
  font-size: 3rem;
  line-height: 1;
  display: block;
  margin-bottom: .5rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.12));
}
.wlp-hero h1 {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--wlp-hero-txt);
  margin: 0;
  letter-spacing: -.02em;
}
@media (prefers-color-scheme: dark) { .wlp-hero h1 { color: #fff; } }
:root[data-theme="dark"] .wlp-hero h1 { color: #fff; }

.wlp-hero-desc {
  color: var(--amzly-muted);
  font-size: .9rem;
  margin-top: .4rem;
}
.wlp-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
  align-items: center;
}
.wlp-occasion-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .7rem;
  border-radius: 99px;
  background: var(--wlp-badge-bg);
  color: var(--wlp-badge-co);
  font-size: .78rem;
  font-weight: 600;
  border: 1px solid var(--wlp-border);
}
:root[data-theme="dark"] .wlp-occasion-badge,
@media (prefers-color-scheme: dark) { .wlp-occasion-badge { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.12); } }
:root[data-theme="dark"] .wlp-occasion-badge { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.12); }

/* Share buttons use Bootstrap btn-outline-light in the hero */

/* =========================================================
   Wish Cards
   ========================================================= */
.wlp-wish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
@media (max-width: 576px) {
  .wlp-wish-grid { grid-template-columns: 1fr; }
}

.wlp-card {
  border-radius: var(--wlp-card-r);
  border: 1px solid var(--amzly-border);
  background: var(--amzly-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .15s;
  position: relative;
}
.wlp-card:hover { box-shadow: var(--wlp-shadow); transform: translateY(-2px); }

.wlp-card-img {
  width: 100%;
  height: 160px;
  object-fit: contain;
  background: var(--amzly-bg-alt, #f8f8f8);
  padding: .5rem;
}
:root[data-theme="dark"] .wlp-card-img { background: #1e1e1e; }

.wlp-card-img-placeholder {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--amzly-border);
  font-size: 3rem;
  opacity: .4;
}

.wlp-card-body {
  padding: .85rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.wlp-card-title {
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: .35rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wlp-card-shop {
  font-size: .72rem;
  color: var(--amzly-muted);
  margin-bottom: .35rem;
}
.wlp-card-price {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--wlp-accent);
  margin-bottom: .4rem;
}
.wlp-card-note {
  font-size: .75rem;
  color: var(--amzly-muted);
  border-left: 3px solid var(--wlp-border);
  padding-left: .5rem;
  margin-bottom: .4rem;
  font-style: italic;
}
.wlp-must-have {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: #ef4444;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: 99px;
  letter-spacing: .03em;
}
.wlp-qty-badge {
  font-size: .7rem;
  color: var(--amzly-muted);
  margin-bottom: .25rem;
}
.wlp-card-footer {
  padding: .6rem .85rem;
  border-top: 1px solid var(--amzly-border);
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  align-items: center;
}
.wlp-reserve-btn {
  flex: 1;
  min-width: 100px;
  font-size: .8rem;
  font-weight: 600;
  padding: .35rem .7rem;
  border-radius: 99px;
  border: none;
  cursor: pointer;
  background: var(--amzly-accent);
  color: #111;
  transition: opacity .15s;
  white-space: nowrap;
}
.wlp-reserve-btn:hover { opacity: .85; }
.wlp-reserve-btn:disabled,
.wlp-reserve-btn.is-reserved {
  background: var(--amzly-border);
  color: var(--amzly-muted);
  cursor: default;
  opacity: 1;
}
.wlp-amazon-btn {
  font-size: .75rem;
  padding: .3rem .6rem;
  border-radius: 99px;
  background: #ff9900;
  color: #111;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.wlp-amazon-btn:hover { background: #e68900; color: #000; }

.wlp-owner-actions {
  display: flex;
  gap: .3rem;
}
.wlp-owner-actions button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--amzly-muted);
  font-size: .85rem;
  padding: .2rem .3rem;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.wlp-owner-actions button:hover { color: var(--amzly-text); background: var(--amzly-border); }
.wlp-owner-actions .btn-del:hover { color: #ef4444; }

/* Free wish card */
.wlp-card.wlp-free-wish {
  border-style: dashed;
  border-color: var(--wlp-border);
}
.wlp-free-wish-icon { font-size: 2.5rem; text-align: center; padding: 1.2rem 0 .4rem; }

/* =========================================================
   My Wishlists Dashboard – occasion-themed cards
   ========================================================= */
.wlp-list-card {
  --_h: 168px;
  border-radius: 16px;
  padding: .9rem 1rem;
  min-height: var(--_h);
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .15s;
  text-decoration: none;
  color: #fff;
  background-image: var(--wlp-card-pattern, none), var(--wlp-card-grad);
  background-size: var(--wlp-card-pattern-size, auto), cover;
  background-repeat: repeat, no-repeat;
  border: none;
  box-shadow: 0 4px 18px rgba(0,0,0,.16);
  position: relative;
  overflow: hidden;
}
.wlp-list-card:hover { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(0,0,0,.22); }

/* Giant translucent occasion watermark, bottom-right */
.wlp-list-card::after {
  content: var(--wlp-watermark, "");
  position: absolute;
  right: -.6rem;
  bottom: -1.1rem;
  font-size: 5rem;
  line-height: 1;
  opacity: .22;
  transform: rotate(-8deg);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
  pointer-events: none;
}

.wlp-list-card-icon {
  font-size: 1.9rem;
  line-height: 1;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.25));
  position: relative;
  z-index: 1;
}
.wlp-list-card-info { flex: 1; min-width: 0; position: relative; z-index: 1; margin-top: .6rem; }
.wlp-list-card-name {
  font-weight: 700;
  font-size: .95rem;
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.wlp-list-card-meta {
  font-size: .74rem;
  margin-top: .3rem;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.wlp-list-card-open {
  align-self: flex-start;
  margin-top: .7rem;
  font-size: .76rem;
  font-weight: 600;
  padding: .3rem .8rem;
  border-radius: 99px;
  border: 1.5px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.18);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(2px);
}
.wlp-list-card-open:hover { background: rgba(255,255,255,.32); color: #fff; }

/* =========================================================
   Add-Item panel (owner only)
   ========================================================= */
.wlp-add-panel {
  border: 2px dashed var(--amzly-border);
  border-radius: var(--wlp-card-r);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  background: var(--amzly-card);
}
.wlp-add-panel.collapsed { display: none; }

/* Smart input: mode indicator pill */
.wlp-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 600;
  padding: .18rem .6rem;
  border-radius: 99px;
  margin-bottom: .5rem;
  transition: background .2s, color .2s;
}
.wlp-mode-badge.mode-search { background: rgba(251,191,36,.15); color: var(--amzly-accent); }
.wlp-mode-badge.mode-url    { background: rgba(34,197,94,.12);  color: #16a34a; }
.wlp-mode-badge.mode-free   { background: rgba(167,139,250,.15); color: #7c3aed; }

/* Free-wish toggle link */
.wlp-free-toggle {
  font-size: .8rem;
  color: var(--amzly-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color .15s;
}
.wlp-free-toggle:hover { color: var(--amzly-text); }

/* =========================================================
   Icon picker
   ========================================================= */
.wlp-icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .75rem;
}
.wlp-icon-opt {
  font-size: 1.85rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  cursor: pointer;
  border: 2px solid var(--amzly-border);
  transition: border-color .15s, transform .1s, background .15s;
  background: transparent;
  line-height: 1;
}
.wlp-icon-opt:hover { transform: scale(1.12); border-color: var(--amzly-accent); }
.wlp-icon-opt.selected { border-color: var(--amzly-accent); background: rgba(251,191,36,.12); }

/* =========================================================
   Occasion picker (create form)
   ========================================================= */
.wlp-occasion-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .5rem;
  margin-bottom: 1rem;
}
.wlp-oc-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .7rem .5rem;
  border-radius: 14px;
  border: 2px solid var(--amzly-border);
  cursor: pointer;
  font-size: .78rem;
  text-align: center;
  transition: border-color .15s, background .15s;
  background: transparent;
  color: var(--amzly-text);
}
.wlp-oc-opt:hover { border-color: var(--amzly-accent); background: rgba(251,191,36,.08); }
.wlp-oc-opt.selected { border-color: var(--amzly-accent); background: rgba(251,191,36,.12); color: var(--amzly-text); }
.wlp-oc-emoji { font-size: 1.8rem; line-height: 1; }

/* Modal content base */
.modal-content { background: var(--amzly-card); border: 1px solid var(--amzly-border); border-radius: 18px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 576px) {
  .wlp-hero { padding: 1.25rem; }
  .wlp-hero-icon { font-size: 2.2rem; }
  .wlp-hero h1 { font-size: 1.3rem; }
  .wlp-list-card-actions { display: none; }
}

/* Search result hover util */
.hover-bg:hover { background: var(--amzly-card-hov, var(--amzly-card)); }