/* =========================================================
   hey-tools — shared component system (modals, forms, buttons)
   ========================================================= */
:root{
  --hg-space-1:4px; --hg-space-2:8px; --hg-space-3:12px; --hg-space-4:16px;
  --hg-space-5:24px; --hg-space-6:32px;
  --hg-radius-sm:10px; --hg-radius:14px; --hg-radius-lg:20px;
  --hg-tap:44px;
  --hg-focus:0 0 0 3px rgba(79,70,229,.35);
  --hg-line:var(--line,#e5e7eb);
  --hg-soft:var(--soft,#f3f4f6);
  --hg-accent:var(--accent,#4F46E5);
  --hg-accent-dark:var(--accent-dark,#3730a3);
  --hg-accent-soft:var(--accent-soft,#eef2ff);
  --hg-ink:var(--ink-strong,#111827);
  --hg-muted:var(--muted,#6b7280);
  --hg-danger:var(--danger,#dc2626);
  --hg-ok:var(--ok,#059669);
  --hg-shadow:var(--shadow,0 10px 30px rgba(17,24,39,.08));
  --hg-shadow-lg:var(--shadow-lg,0 24px 60px rgba(17,24,39,.18));
}

/* ----- Overlay / Modal ----- */
.overlay{
  position:fixed; inset:0; z-index:100;
  display:none; align-items:center; justify-content:center;
  background:rgba(17,24,39,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:var(--hg-space-5);
}
.overlay.is-open{display:flex}
.overlay.is-open[hidden]{display:flex!important}
@media (prefers-reduced-motion:no-preference){
  .overlay.is-open{animation:hgFadeIn .18s ease}
  .overlay.is-open .sheet{animation:hgRise .26s cubic-bezier(.2,.8,.2,1)}
}
@keyframes hgFadeIn{from{opacity:0}to{opacity:1}}
@keyframes hgRise{from{transform:translateY(14px) scale(.985);opacity:0}to{transform:none;opacity:1}}

.sheet{
  width:min(720px,100%);
  max-height:min(860px,92vh);
  background:#fff;
  border-radius:var(--hg-radius-lg);
  box-shadow:var(--hg-shadow-lg);
  display:flex; flex-direction:column;
  overflow:hidden;
  outline:none;
}
.sheet--narrow{width:min(560px,100%)}
.sheet.sheet--wide,.sheet--wide{width:min(960px,100%) !important; max-width:960px}
.sheet--form{width:min(560px,100%)}

.sheet__top{
  display:flex; align-items:center; gap:var(--hg-space-3);
  min-height:calc(var(--hg-tap) + var(--hg-space-5));
  padding:var(--hg-space-4) var(--hg-space-5);
  border-bottom:1px solid var(--hg-line);
  flex-shrink:0;
}
.sheet__title{
  margin:0; flex:1; min-width:0;
  font-size:1.125rem; /* 18px */
  font-weight:700; letter-spacing:-.02em;
  color:var(--hg-ink); line-height:1.3;
}
/* Beat GeneratePress button { background:#55555e; color:#fff } */
.overlay button.sheet__close,
.sheet button.sheet__close,
button.sheet__close{
  box-sizing:border-box;
  width:var(--hg-tap); height:var(--hg-tap);
  min-width:var(--hg-tap); min-height:var(--hg-tap);
  margin:0; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--hg-radius-sm);
  border:1px solid var(--hg-line) !important;
  background:#fff !important;
  background-color:#fff !important;
  color:#111827 !important;
  font-size:0; line-height:0;
  cursor:pointer;
  flex-shrink:0;
  box-shadow:none !important;
  text-shadow:none !important;
  transition:background .15s, border-color .15s, color .15s;
}
.overlay button.sheet__close svg,
button.sheet__close svg{display:block; width:20px; height:20px; pointer-events:none; stroke:#111827}
.overlay button.sheet__close:hover,
.overlay button.sheet__close:focus,
.overlay button.sheet__close:focus-visible,
.overlay button.sheet__close:active,
button.sheet__close:hover,
button.sheet__close:focus,
button.sheet__close:focus-visible,
button.sheet__close:active{
  background:#f3f4f6 !important;
  background-color:#f3f4f6 !important;
  border-color:#d1d5db !important;
  color:#111827 !important;
}
button.sheet__close:focus-visible{outline:none; box-shadow:var(--hg-focus) !important}

.progress{
  height:4px; background:var(--hg-soft); overflow:hidden;
  margin:0; flex-shrink:0;
}
.progress__bar{
  height:100%; width:0;
  background:linear-gradient(90deg,var(--hg-accent),#818cf8);
  border-radius:99px; transition:width .35s ease;
}
@media (prefers-reduced-motion:reduce){
  .progress__bar{transition:none}
  .overlay.is-open,.overlay.is-open .sheet{animation:none}
}

.sheet.sheet--wide{
  max-height:min(92vh, 900px);
  display:flex; flex-direction:column;
}
.sheet.sheet--wide .sheet__body{
  flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch;
  max-height:none;
}
.sheet__body{
  padding:var(--hg-space-5);
  overflow:auto; flex:1; min-height:0;
  scrollbar-width:thin;
}
.sheet__body--swipe{
  display:flex; flex-direction:column; gap:var(--hg-space-3);
}

.sheet__foot{
  display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:var(--hg-space-3);
  padding:var(--hg-space-4) var(--hg-space-5);
  border-top:1px solid var(--hg-line);
  background:#fafafa;
  flex-shrink:0;
  min-height:calc(var(--hg-tap) + var(--hg-space-4));
}
.sheet__foot > .btn--primary,
.sheet__foot > .sheet__foot-actions{ margin-left:auto; }
.sheet__foot > .btn--ghost:not([hidden]),
.sheet__foot > .streak,
.sheet__foot > #finderSkip,
.sheet__foot > #adventStreak{ margin-right:auto; margin-left:0; }
.sheet__foot-actions{display:flex; align-items:center; gap:var(--hg-space-2); margin-left:auto}
.sheet__foot-spacer{flex:1}

/* ----- Buttons (all states) ----- */
.overlay .btn,
.sheet .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--hg-tap);
  padding:10px 18px;
  border-radius:12px; border:1px solid transparent;
  font:inherit; font-weight:700; font-size:14px;
  line-height:1.2; text-decoration:none !important;
  cursor:pointer; transition:background .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s;
}
.overlay .btn:active:not(:disabled),
.sheet .btn:active:not(:disabled){transform:scale(.98)}
.overlay .btn:focus-visible,
.sheet .btn:focus-visible{outline:none; box-shadow:var(--hg-focus)}
.overlay .btn:disabled,
.sheet .btn:disabled,
.overlay .btn[aria-disabled="true"],
.sheet .btn[aria-disabled="true"]{
  opacity:.45; cursor:not-allowed; transform:none; box-shadow:none;
}

.overlay .btn--primary,
.overlay a.btn--primary:link,
.overlay a.btn--primary:visited,
.sheet .btn--primary{
  background:var(--hg-accent) !important;
  color:#fff !important;
  border-color:var(--hg-accent) !important;
  box-shadow:0 6px 16px rgba(79,70,229,.28);
}
.overlay .btn--primary:hover:not(:disabled),
.overlay .btn--primary:focus-visible:not(:disabled),
.overlay a.btn--primary:hover,
.overlay a.btn--primary:focus-visible,
.sheet .btn--primary:hover:not(:disabled),
.sheet .btn--primary:focus-visible:not(:disabled){
  background:var(--hg-accent-dark) !important;
  border-color:var(--hg-accent-dark) !important;
  color:#fff !important;
}

.overlay .btn--ghost,
.sheet .btn--ghost{
  background:var(--hg-soft) !important;
  color:var(--hg-ink) !important;
  border-color:transparent !important;
  box-shadow:none;
}
.overlay .btn--ghost:hover:not(:disabled),
.overlay .btn--ghost:focus-visible:not(:disabled),
.sheet .btn--ghost:hover:not(:disabled),
.sheet .btn--ghost:focus-visible:not(:disabled){
  background:#e5e7eb !important;
  color:var(--hg-ink) !important;
}

.overlay .btn--outline,
.sheet .btn--outline{
  background:#fff !important;
  color:var(--hg-ink) !important;
  border-color:var(--hg-line) !important;
}
.overlay .btn--outline:hover:not(:disabled),
.sheet .btn--outline:hover:not(:disabled){
  border-color:#c7d2fe !important;
  background:var(--hg-accent-soft) !important;
}

/* ----- Forms ----- */
.field-stack{display:flex; flex-direction:column; gap:var(--hg-space-5); width:100%; max-width:none}
.field{display:flex; flex-direction:column; gap:6px; width:100%}
.field__label{
  font-size:14px; font-weight:600;
  color:var(--hg-ink);
  text-transform:none; letter-spacing:0;
}
.field-hint{
  margin:0; font-size:13px; color:var(--hg-muted); line-height:1.4;
}
.field-error{
  margin:0; font-size:13px; font-weight:600; color:var(--hg-danger);
}
.field__control,
.field-stack textarea,
.field-stack input[type="text"],
.field-stack input:not([type]){
  box-sizing:border-box;
  width:100%; max-width:100%;
  min-height:var(--hg-tap);
  padding:12px 14px;
  border:1.5px solid var(--hg-line);
  border-radius:12px;
  background:#fff;
  color:var(--hg-ink);
  font:inherit; font-size:15px; line-height:1.4;
  transition:border-color .15s, box-shadow .15s, background .15s;
  appearance:none; -webkit-appearance:none;
}
.field-stack textarea.field__control{
  min-height:140px; resize:vertical; line-height:1.5;
}
.field__control::placeholder,
.field-stack textarea::placeholder,
.field-stack input::placeholder{
  color:#9ca3af !important;
  opacity:1;
  font-weight:400;
}
.field__control:hover{border-color:#d1d5db}
.field__control:focus,
.field__control:focus-visible{
  outline:none;
  border-color:var(--hg-accent);
  box-shadow:var(--hg-focus);
  background:#fff;
}
.field.is-invalid .field__control{
  border-color:var(--hg-danger);
  box-shadow:0 0 0 3px rgba(220,38,38,.18);
}
.field.is-invalid .field__label{color:var(--hg-danger)}

/* legacy wichtel selectors → full width */
.wichtel-form{display:flex; flex-direction:column; gap:var(--hg-space-5); width:100%; max-width:none}
.wichtel-result{margin-top:var(--hg-space-5); display:grid; gap:var(--hg-space-2); width:100%}
.wichtel-ideas{margin-top:var(--hg-space-5); width:100%}
.pair{
  padding:14px 16px; border-radius:12px;
  background:var(--hg-accent-soft); border:1px solid #c7d2fe;
  font-size:14px; font-weight:600; color:var(--hg-ink);
}
.pair span{color:var(--hg-accent)}

/* ----- Finder steps ----- */
.step-kicker{
  font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--hg-accent); margin-bottom:8px;
}
.step-title{
  font-size:1.35rem; font-weight:700; letter-spacing:-.02em;
  color:var(--hg-ink); margin:0 0 6px; line-height:1.25;
}
.step-sub{font-size:14px; color:var(--hg-muted); margin:0 0 18px; line-height:1.45}
.choice-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.choice{
  border:1.5px solid var(--hg-line); border-radius:16px;
  padding:16px 12px; background:#fff; text-align:center;
  min-height:110px; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  transition:transform .15s, border-color .15s, background .15s, box-shadow .15s;
  color:var(--hg-ink);
}
.choice:hover{border-color:#c7d2fe}
.choice:focus-visible{outline:none; box-shadow:var(--hg-focus)}
.choice.is-on{
  border-color:var(--hg-accent); background:var(--hg-accent-soft);
  box-shadow:0 0 0 3px rgba(79,70,229,.12);
}
@media (prefers-reduced-motion:no-preference){
  .choice:hover{transform:translateY(-2px)}
  .choice.is-on{transform:translateY(-2px)}
}
.choice__emoji{font-size:26px; line-height:1; display:grid; place-items:center}
.choice__emoji img,.choice__emoji img.hg-av-img{width:40px; height:40px; border-radius:50%; object-fit:contain; background:#f3f4f6; padding:2px; box-sizing:border-box}
.choice__label{font-size:13.5px; font-weight:700; color:var(--hg-ink)}
.choice__hint{font-size:11px; color:var(--hg-muted)}

.results-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.results-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.results-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
  margin-top:8px;
}
.result-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--hg-line); border-radius:16px;
  overflow:hidden; min-height:100%;
  box-shadow:0 6px 18px rgba(17,24,39,.04);
}
.result-card__media{
  position:relative; width:100%; aspect-ratio:1;
  max-height:240px; background:#fafafa;
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}
.result-card__media img,
.result-card img{
  width:100% !important; height:100% !important; max-width:100%;
  max-height:240px; object-fit:contain; padding:16px; box-sizing:border-box;
  border-right:0 !important; background:transparent;
}
.result-card__media img{
  width:100%; height:100%; object-fit:contain; padding:18px; box-sizing:border-box;
}
.result-card__media .ad{
  position:absolute; top:10px; left:10px;
  font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:#6b7280; background:rgba(255,255,255,.92); border-radius:999px; padding:3px 8px;
}
.result-card__body{
  padding:14px 14px 16px; display:flex; flex-direction:column; gap:6px; flex:1;
}
.result-card__title{
  margin:0; font-size:15px; font-weight:700; color:var(--hg-ink); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.result-card__reason{
  margin:0; font-size:12.5px; color:#6b7280; line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.result-card__price{
  margin:2px 0 0; font-size:15px; font-weight:700; color:var(--hg-ink);
}
.result-card__actions{
  display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:8px;
}
.result-card__cta{flex:1; justify-content:center; min-height:44px; font-size:13.5px}
.sheet .btn--icon,
.result-card__save{
  flex:0 0 44px; width:44px; height:44px; min-width:44px; padding:0;
  border-radius:12px; border:1px solid var(--hg-line); background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1; color:#4f46e5; cursor:pointer;
}
.result-card__save.is-saved{background:#eef2ff; border-color:#c7d2fe; color:#3730a3}
.result-actions{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; padding-top:8px;
}
@media (max-width:640px){
  .results-grid{grid-template-columns:1fr}
}
.empty-state,.loading-state,.error-state{
  padding:28px 18px; text-align:center; color:var(--hg-muted);
  border:1px dashed var(--hg-line); border-radius:14px; background:#fafafa;
}
.error-state{border-color:#fecaca; background:#fef2f2; color:var(--hg-danger)}

/* ----- Swipe ----- */
.swipe-stage{
  position:relative; width:100%;
  height:min(420px,48vh); min-height:260px; max-height:440px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; touch-action:none;
  isolation:isolate;
}
.swipe-card{
  position:relative;
  left:auto; top:auto;
  transform:none;
  width:min(300px,86%);
  max-height:calc(100% - 8px);
  background:#fff; border:1px solid var(--hg-line); border-radius:20px;
  box-shadow:var(--hg-shadow); overflow:hidden;
  touch-action:none; user-select:none; -webkit-user-select:none;
  cursor:grab;
  display:flex; flex-direction:column;
  flex-shrink:0;
  will-change:transform;
  transition:transform .2s ease, opacity .2s ease;
  z-index:2;
}
.swipe-card.is-dragging{ transition:none; z-index:3; }
.swipe-card.is-exit{ pointer-events:none; }
.swipe-card:active{cursor:grabbing}
.swipe-card img{
  width:100%; height:auto; max-height:min(200px,32vh); aspect-ratio:1;
  object-fit:contain; padding:16px; background:#fafafa;
  border-bottom:1px solid var(--hg-line); flex-shrink:1;
  pointer-events:none; -webkit-user-drag:none;
}
.swipe-card__body{padding:12px 16px 14px; flex-shrink:0}
.swipe-card__body h3{
  font-size:15px; font-weight:700; color:var(--hg-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.swipe-stamp{position:absolute; top:18px; padding:6px 10px; border:3px solid; border-radius:10px;
  font-weight:800; letter-spacing:.06em; text-transform:uppercase; opacity:0; pointer-events:none}
.swipe-stamp.yes{left:16px; color:var(--hg-ok); border-color:var(--hg-ok); transform:rotate(-12deg)}
.swipe-stamp.no{right:16px; color:var(--hg-danger); border-color:var(--hg-danger); transform:rotate(12deg)}
.swipe-actions{display:flex; justify-content:center; gap:18px; margin-top:4px; flex-shrink:0}
.swipe-btn{
  width:58px; height:58px; min-width:58px; min-height:58px;
  border-radius:50%; border:1.5px solid var(--hg-line);
  background:#fff; color:var(--hg-ink);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:var(--hg-shadow); cursor:pointer;
}
.swipe-btn svg{display:block}
.swipe-btn:focus-visible{outline:none; box-shadow:var(--hg-focus)}
.swipe-btn.yes{border-color:#a7f3d0; color:var(--hg-ok)}
.swipe-btn.no{border-color:#fecaca; color:var(--hg-danger)}
.swipe-btn:hover{background:#fafafa}
.merkliste{margin-top:8px; border-top:1px solid var(--hg-line); padding-top:12px; flex-shrink:0; max-height:140px; overflow:auto}
.merkliste h4{font-size:13px; font-weight:700; margin:0 0 8px; color:var(--hg-ink)}
.merkliste ul{list-style:none; display:flex; flex-direction:column; gap:6px; margin:0; padding:0}
.merkliste li{display:flex; justify-content:space-between; gap:8px; font-size:13px; padding:8px 10px; background:var(--hg-soft); border-radius:10px}
#swipeEmptyHint{margin-top:4px}
.merkliste:has(li) #swipeEmptyHint,
#swipeList:not(:empty) + #swipeEmptyHint{display:none}

/* ----- Advent ----- */
.advent-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:6px}
.door{
  aspect-ratio:1; border-radius:10px; border:1px solid var(--hg-line);
  background:linear-gradient(160deg,#312e81,#4F46E5);
  color:#fff; font-weight:800; display:grid; place-items:center; font-size:13px;
  position:relative; overflow:hidden; min-height:44px;
}
.door:focus-visible{outline:none; box-shadow:var(--hg-focus)}
.door.is-open{background:#fff; color:var(--hg-ink); border-color:#c7d2fe}
.door.is-today{box-shadow:0 0 0 3px rgba(79,70,229,.35)}
.door.is-locked{opacity:.45; cursor:not-allowed}
.door__reward{font-size:10px; font-weight:600; text-align:center; padding:6px; line-height:1.2}
.advent-reveal{margin-top:16px; padding-top:12px; border-top:1px solid var(--hg-line)}
.streak{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff7ed; color:#c2410c; border:1px solid #fed7aa;
  border-radius:999px; padding:8px 12px; font-size:12px; font-weight:700;
  min-height:36px;
}

/* ----- Responsive ----- */
@media (max-width:960px){
  .choice-grid{grid-template-columns:repeat(2,1fr)}
  .results-grid{grid-template-columns:1fr}
  .advent-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:480px){
  .overlay{padding:0; align-items:stretch}
  .sheet,.sheet--narrow,.sheet--form{
    width:100%; max-height:100%; height:100%; border-radius:0;
  }
  @media (prefers-reduced-motion:no-preference){
    .overlay.is-open .sheet{animation:hgSheetUp .28s cubic-bezier(.2,.8,.2,1)}
  }
  @keyframes hgSheetUp{from{transform:translateY(100%)}to{transform:none}}
  .sheet__top,.sheet__body,.sheet__foot{padding-left:var(--hg-space-4); padding-right:var(--hg-space-4)}
  .choice-grid{grid-template-columns:1fr 1fr}
  .advent-grid{grid-template-columns:repeat(3,1fr)}
  .sheet__foot{flex-wrap:wrap}
  .sheet__foot .btn{flex:1 1 auto}
}

[hidden]{display:none!important}
.overlay.is-open[hidden]{display:flex!important}


/* icon harden — WebKit stroke SVG width collapse */
.hg-icon,
button.sheet__close svg,
.sheet__close svg,
.swipe-btn svg{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  min-height:20px !important;
  display:block !important;
  flex-shrink:0 !important;
  overflow:visible !important;
  pointer-events:none;
}
.swipe-btn svg{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
}
button.sheet__close,
.sheet__close,
button.sheet__close svg,
.sheet__close svg{
  color:#111827 !important;
}
.swipe-btn.yes svg{color:inherit; fill:currentColor}
.swipe-btn.no svg{color:inherit}

/* avatar contain v4b */
.choice__emoji{min-height:44px}


/* Multi-select interest chips */
.step-multi-hint{margin:-8px 0 14px}
.step-multi-hint__pill{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--hg-accent);
  background:var(--hg-accent-soft); border:1px solid #c7d2fe;
  border-radius:999px; padding:4px 10px;
}
.choice-grid--chips{grid-template-columns:repeat(3,1fr)}
.choice--multi{position:relative; padding-top:18px}
.choice--multi .choice__check{
  position:absolute; top:8px; right:8px;
  width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center;
  background:transparent; color:transparent;
  border:1.5px solid var(--hg-line);
  transition:background .15s, border-color .15s, color .15s;
}
.choice--multi.is-on{
  border-color:var(--hg-accent);
  background:var(--hg-accent-soft);
  box-shadow:0 0 0 3px rgba(79,70,229,.12);
}
.choice--multi.is-on .choice__check{
  background:var(--hg-accent); border-color:var(--hg-accent); color:#fff;
}
.choice--egal{grid-column:1 / -1; min-height:72px; flex-direction:row; gap:12px; justify-content:flex-start; padding:14px 16px; text-align:left}
.choice--egal .choice__emoji{font-size:22px}
.choice--egal .choice__label{font-size:14px}
#finderNext:disabled,
#finderNext[aria-disabled="true"]{
  opacity:.45; cursor:not-allowed; pointer-events:none;
}
mark.match-hit{
  background:color-mix(in srgb, var(--hg-accent-soft) 80%, #fff);
  color:var(--hg-accent); font-weight:700;
  padding:0 3px; border-radius:4px;
}
.result-card__reason{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.aff-star{
  font-size:.72em; font-weight:500; vertical-align:super; line-height:0;
  margin-left:0; opacity:.7; color:inherit;
}
.btn--primary .aff-star{color:#fff; opacity:.7}
.ad{display:none!important}
@media (max-width:640px){
  .choice-grid--chips{grid-template-columns:repeat(2,1fr)}
  .choice--egal{grid-column:1 / -1}
}

/* ===== Merkliste ===== */
.merk-badge{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:999px; border:1px solid var(--hg-line, #e5e7eb);
  background:#fff; color:#be123c; cursor:pointer; font-size:16px;
}
.merk-badge:hover{ border-color:#fda4af; background:#fff1f2 }
.merk-badge__count, .merk-fab__count{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:#be123c; color:#fff; font-size:11px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
.merk-fab{
  position:fixed; right:18px; bottom:88px; z-index:45;
  width:52px; height:52px; border-radius:999px; border:0;
  background:#fff; color:#be123c; box-shadow:0 8px 28px rgba(15,23,42,.18);
  cursor:pointer; font-size:20px; display:inline-flex; align-items:center; justify-content:center;
}
.merk-fab:hover{ transform:translateY(-1px) }
@media (min-width:900px){ .merk-fab{ display:none } }

.sheet--merk{ max-width:520px }
.sheet--merk .step-sub{ color:#64748b; font-size:14px; line-height:1.5; margin:0 0 14px }
.sheet__foot--merk{
  display:flex; flex-direction:column; gap:10px; align-items:stretch;
  padding-top:12px;
}
.merk-foot__cart{
  width:100%; justify-content:center; text-align:center;
}
.merk-foot__row{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; width:100%;
}
.merk-foot__btn{
  display:inline-flex !important; align-items:center; justify-content:center; gap:6px;
  width:100%; font-size:12.5px; padding:10px 6px; white-space:nowrap;
}
.merk-foot__btn .merk-ico{ flex-shrink:0 }
.merk-ico{ display:block; flex-shrink:0 }
.merk-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.merk-item{
  display:flex; gap:12px; padding:10px; border:1px solid var(--hg-line,#e5e7eb);
  border-radius:14px; background:#fff;
}
.merk-item__media{
  width:64px; height:64px; border-radius:10px; background:#f8fafc; overflow:hidden; flex-shrink:0;
  display:grid; place-items:center; border:1px solid #eef2f7;
}
.merk-item__media img{ width:100%; height:100%; object-fit:contain }
.merk-item__ph{
  width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,#e2e8f0,#f1f5f9);
}
.merk-item__body{ flex:1; min-width:0 }
.merk-item__name{ margin:0 0 2px; font-size:14px; font-weight:650; color:var(--hg-ink,#0f172a); line-height:1.35 }
.merk-item__price{ margin:0 0 8px; font-size:13px; color:var(--hg-accent,#4f46e5); font-weight:700 }
.merk-item__price:empty{ display:none !important; margin:0 !important; height:0; padding:0; overflow:hidden }
.merk-item__actions{ margin-top:6px }
.merk-item__actions{ display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.merk-item__btn{
  border:1px solid var(--hg-line,#e5e7eb); background:#fff; border-radius:8px;
  padding:4px 8px; font-size:12px; cursor:pointer; color:#334155;
  display:inline-flex; align-items:center; justify-content:center;
}
.merk-item__btn:disabled{ opacity:.35; cursor:not-allowed }
.merk-item__btn--icon{
  width:32px; height:32px; padding:0;
}
.merk-item__btn--text{
  border:0; background:transparent; color:#64748b; padding:4px 6px; gap:4px;
  font-size:12px; font-weight:500;
}
.merk-item__btn--text:hover{ color:#be123c; background:#fff1f2 }
.merk-item__amz{
  margin-left:auto; font-size:12px !important; padding:6px 10px !important;
  border-radius:8px !important; font-weight:650 !important;
}
.merk-empty{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:28px 12px 18px; gap:8px;
}
.merk-empty[hidden]{ display:none !important }
.merk-empty__art{ margin-bottom:4px }
.merk-empty__title{ margin:0; font-size:17px; font-weight:700; color:var(--hg-ink,#0f172a) }
.merk-empty__text{ margin:0 0 10px; font-size:14px; color:#64748b; max-width:32ch; line-height:1.45 }

.merk-heart, .result-card__save.is-saved{ color:#be123c }
.merk-heart.is-saved{ font-weight:700 }

.merk-toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:#0f172a; color:#fff; padding:10px 16px; border-radius:999px; font-size:13px;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:80;
}
.merk-toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0) }

.merk-shared__head{ margin-bottom:22px }
.merk-shared__lead{ color:var(--muted,#64748b); max-width:60ch; line-height:1.5 }
.merk-shared__actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px }
.merk-shared__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px }
.merk-shared-card{
  border:1px solid var(--line,#e5e7eb); border-radius:16px; overflow:hidden; background:#fff;
  display:flex; flex-direction:column;
}
.merk-shared-card__media{ aspect-ratio:1; background:#fafafa; display:grid; place-items:center }
.merk-shared-card__media img{ width:100%; height:100%; object-fit:contain; padding:12px }
.merk-shared-card__body{ padding:14px; display:flex; flex-direction:column; gap:8px; flex:1 }
.merk-shared-card__body h3{ font-size:15px; margin:0; line-height:1.35 }
.merk-shared-card__row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto }

/* Heart on theme product tiles */
.tile{ position:relative }
.tile .merk-heart{
  position:absolute; top:10px; right:10px; z-index:2;
  width:36px; height:36px; border-radius:999px; border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.95); color:#94a3b8; cursor:pointer; font-size:16px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(15,23,42,.08);
}
.tile .merk-heart.is-saved, .tile .merk-heart[aria-pressed="true"]{ color:#be123c }