/* ════════════════════════════════════════════════════════════════
   HALA WISHLIST — Slice 1 (anonymous / localStorage)
   House style: warm paper, terracotta, Fraunces / Schibsted / Plex Mono.
   All UI is injected by wishlist.js; these styles only target wishlist nodes,
   so loading order vs. page content is not a concern (no FOUC of page content).
   ════════════════════════════════════════════════════════════════ */
:root{
  --hw-paper:#F5E9D5;
  --hw-paper-soft:#EFE0C6;
  --hw-ink:#1F1A14;
  --hw-ink-60:rgba(31,26,20,.62);
  --hw-ink-38:rgba(31,26,20,.40);
  --hw-terra:#B25238;
  --hw-terra-deep:#8E3F2A;
  --hw-hair:rgba(31,26,20,.12);
  --hw-fd:"Fraunces",ui-serif,Georgia,serif;
  --hw-fb:"Schibsted Grotesk","Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --hw-fu:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ── HEART BUTTON (on cards) ─────────────────────────────── */
.hw-heart{
  position:absolute;top:10px;right:10px;z-index:6;
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border:none;border-radius:50%;cursor:pointer;padding:0;
  background:rgba(245,233,213,.86);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  box-shadow:0 1px 6px rgba(31,26,20,.16);
  transition:background .25s ease,transform .25s ease;
  isolation:isolate;
}
.hw-heart:hover{background:rgba(245,233,213,.98);transform:translateY(-1px)}
.hw-heart svg{width:17px;height:17px;display:block;overflow:visible}
.hw-heart svg path{
  fill:none;stroke:var(--hw-terra);stroke-width:1.7;
  transition:fill .2s ease,stroke .2s ease;
}
.hw-heart[aria-pressed="true"] svg path{fill:var(--hw-terra);stroke:var(--hw-terra)}
.hw-heart:focus-visible{outline:2px solid var(--hw-terra);outline-offset:2px}
/* confetti pulse */
.hw-heart .hw-spark{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--hw-terra);opacity:0;pointer-events:none}
@keyframes hw-burst{0%{opacity:.9;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}
.hw-heart.hw-pop .hw-spark{animation:hw-burst .6s cubic-bezier(.2,.65,.3,1) forwards}
@keyframes hw-fill-bounce{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
.hw-heart.hw-pop svg{animation:hw-fill-bounce .45s ease}

/* ── HEADER "SAVED (N)" (desktop nav) ────────────────────── */
.hw-navlink{
  font-family:var(--hw-fu);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--hw-ink-60);text-decoration:none;white-space:nowrap;cursor:pointer;
  display:inline-flex;align-items:center;gap:.4em;transition:color .25s ease;background:none;border:none;padding:0;
}
.hw-navlink:hover{color:var(--hw-terra)}
.hw-navlink[data-count]:not([data-count="0"]){color:var(--hw-terra)}

/* ── MOBILE FLOATING BUTTON ──────────────────────────────── */
.hw-fab{
  position:fixed;bottom:16px;right:16px;z-index:9000;
  width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:var(--hw-terra);color:var(--hw-paper);
  display:none;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(31,26,20,.28);
  transition:transform .2s ease;
}
.hw-fab:active{transform:scale(.94)}
.hw-fab svg{width:22px;height:22px}
.hw-fab svg path{fill:var(--hw-paper)}
.hw-fab .hw-fab-badge{
  position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;
  border-radius:10px;background:var(--hw-ink);color:var(--hw-paper);
  font-family:var(--hw-fu);font-size:10px;font-weight:600;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--hw-paper);
}
@media(max-width:780px){.hw-fab{display:flex}}

/* ── TOAST ───────────────────────────────────────────────── */
.hw-toast{
  position:fixed;bottom:24px;right:24px;z-index:9500;max-width:320px;
  background:var(--hw-paper);border:1px solid var(--hw-hair);border-left:3px solid var(--hw-terra);
  border-radius:3px;padding:13px 18px;box-shadow:0 6px 24px rgba(31,26,20,.16);
  font-family:var(--hw-fd);font-style:italic;font-size:15px;color:var(--hw-ink);
  cursor:pointer;opacity:0;transform:translateY(8px);
  transition:opacity .4s ease,transform .4s ease;
}
.hw-toast.hw-show{opacity:1;transform:translateY(0)}
.hw-toast .hw-toast-link{color:var(--hw-terra);font-style:normal;font-family:var(--hw-fu);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-left:.5em}
@media(max-width:780px){.hw-toast{bottom:84px;right:16px;left:16px;max-width:none}}

/* ── DRAWER ──────────────────────────────────────────────── */
.hw-backdrop{position:fixed;inset:0;z-index:9600;background:rgba(31,26,20,.34);opacity:0;pointer-events:none;transition:opacity .3s ease}
.hw-backdrop.hw-open{opacity:1;pointer-events:auto}
.hw-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:9700;width:420px;max-width:100vw;
  background:var(--hw-paper);border-left:1px solid var(--hw-hair);
  box-shadow:-8px 0 40px rgba(31,26,20,.14);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.65,.3,1);
  display:flex;flex-direction:column;
}
.hw-drawer.hw-open{transform:translateX(0)}
.hw-drawer::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.10 0 0 0 0 0.06 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@media(max-width:560px){
  .hw-drawer{top:auto;left:0;width:100%;height:88vh;border-left:none;border-top:1px solid var(--hw-hair);border-radius:14px 14px 0 0;transform:translateY(100%)}
  .hw-drawer.hw-open{transform:translateY(0)}
}

.hw-dr-head{position:relative;z-index:1;padding:26px 26px 18px;border-bottom:1px solid var(--hw-hair);flex-shrink:0}
.hw-dr-kicker{font-family:var(--hw-fu);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--hw-terra);display:block;margin-bottom:8px}
.hw-dr-title{font-family:var(--hw-fd);font-weight:400;font-size:30px;line-height:1;color:var(--hw-ink);letter-spacing:-.01em}
.hw-dr-guest{font-family:var(--hw-fb);font-style:italic;font-size:13px;color:var(--hw-ink-60);margin-top:10px;line-height:1.5}
.hw-dr-guest a{color:var(--hw-terra);font-style:normal;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.hw-dr-close{position:absolute;top:22px;right:22px;background:none;border:none;cursor:pointer;font-family:var(--hw-fd);font-size:24px;line-height:1;color:var(--hw-terra)}
.hw-dr-close:hover{color:var(--hw-terra-deep)}

.hw-dr-body{position:relative;z-index:1;flex:1;overflow-y:auto;padding:8px 0}
.hw-row{display:grid;grid-template-columns:80px 1fr auto;gap:14px;align-items:center;padding:12px 26px;transition:background .2s ease;position:relative}
.hw-row:hover{background:var(--hw-paper-soft)}
.hw-row-thumb{width:80px;height:80px;border-radius:3px;overflow:hidden;background:var(--hw-paper-soft);flex-shrink:0}
.hw-row-thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) sepia(.06)}
.hw-row-main{min-width:0}
.hw-row-name{font-family:var(--hw-fd);font-weight:400;font-size:17px;line-height:1.15;color:var(--hw-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-row-meta{font-family:var(--hw-fu);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--hw-terra);margin-top:5px}
.hw-row-go{font-family:var(--hw-fd);font-size:18px;color:var(--hw-terra);text-decoration:none;opacity:0;transition:opacity .2s ease;padding:0 4px}
.hw-row:hover .hw-row-go{opacity:1}
.hw-row-remove{background:none;border:none;cursor:pointer;font-family:var(--hw-fd);font-size:19px;line-height:1;color:var(--hw-ink-38);padding:4px 6px;transition:color .2s ease}
.hw-row-remove:hover{color:var(--hw-terra)}

.hw-empty{padding:64px 32px;text-align:center}
.hw-empty p{font-family:var(--hw-fd);font-style:italic;font-size:18px;line-height:1.5;color:var(--hw-ink-60);max-width:26ch;margin:0 auto}

.hw-dr-foot{position:relative;z-index:1;border-top:1px solid var(--hw-hair);padding:16px 26px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.hw-dr-foot a,.hw-dr-foot button{font-family:var(--hw-fu);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--hw-ink-60);text-decoration:none;background:none;border:none;cursor:pointer;transition:color .2s ease}
.hw-dr-foot a:hover,.hw-dr-foot button:hover{color:var(--hw-terra)}
/* Phase 3 placeholder slot — intentionally empty, reserved for "Have us build this into a trip →" */
.hw-dr-foot .hw-foot-future{display:none}

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .hw-heart,.hw-heart svg,.hw-toast,.hw-drawer,.hw-backdrop,.hw-fab,.hw-row,.hw-row-go{transition:none!important;animation:none!important}
  .hw-heart .hw-spark{display:none!important}
}