/* ==========================================================================
   Saved products ("favorites")
   --------------------------------------------------------------------------
   1. .favbtn   — the heart toggle (catalogue cards, product page, list)
   2. .favs-*   — the saved-list page: coded header, card grid, side panels,
                  empty state, toast
   3. .favmail  — "mail it to me", the sheet offered after the first save
   Everything is built from the design-system tokens so the light/dark switch
   carries over without a second palette.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. the heart toggle
   -------------------------------------------------------------------------- */

.favbtn {
  --fav-size: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  width: var(--fav-size);
  height: var(--fav-size);
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-full);
  background: var(--ds-glass-bg-strong, var(--ds-surface));
  color: var(--ds-text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease,
              transform 160ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 160ms ease;
}

.favbtn:hover {
  color: var(--ds-primary);
  border-color: var(--ds-primary-line);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}

.favbtn:focus-visible {
  outline: 2px solid var(--ds-focus-color);
  outline-offset: 2px;
}

.favbtn-icon {
  position: relative;
  display: inline-flex;
  width: 18px;
  height: 18px;
}

.favbtn-icon > svg {
  width: 18px;
  height: 18px;
}

.favbtn.is-on {
  color: var(--ds-primary);
  border-color: color-mix(in srgb, var(--ds-primary) 46%, var(--ds-border));
  background: color-mix(in srgb, var(--ds-primary) 12%, var(--ds-surface));
}

.favbtn.is-on .favbtn-icon > svg:first-child {
  fill: currentColor;
}

/* the ring that bursts out of the heart the moment it is saved */
.favbtn-burst {
  position: absolute;
  inset: -3px;
  opacity: 0;
  transform: scale(0.6);
}

.favbtn.is-bursting .favbtn-burst {
  animation: favBurst 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes favBurst {
  0% { opacity: 0.85; transform: scale(0.55); }
  70% { opacity: 0.18; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(1.75); }
}

.favbtn.is-bursting .favbtn-icon > svg:first-child {
  animation: favPop 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes favPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.28); }
  60% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

/* on a catalogue card: a floating pill over the shot */
.favbtn-card {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 3;
  --fav-size: 34px;
  background: color-mix(in srgb, var(--lu-neutral-0) 88%, transparent);
  backdrop-filter: blur(10px);
}

.favbtn-card:hover { background: var(--lu-neutral-0); }

[data-theme="dark"] .favbtn-card {
  background: color-mix(in srgb, var(--lu-ink-950) 62%, transparent);
}

[data-theme="dark"] .favbtn-card:hover {
  background: color-mix(in srgb, var(--lu-ink-950) 82%, transparent);
}

/* on the product page: a full pill with a label */
.favbtn-pill {
  --fav-size: auto;
  padding: 13px 20px;
  height: auto;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.favbtn-pill .favbtn-label { white-space: nowrap; }

/* --------------------------------------------------------------------------
   2. the saved-list page
   -------------------------------------------------------------------------- */

.favs {
  padding-block: 26px clamp(56px, 8vw, 96px);
  color: var(--ds-text);
  font-family: var(--font-body);
  background: var(--ds-bg);
  min-height: calc(100svh - var(--luann-h, 0px) - var(--mnav-row1, 64px));
}

.favs-inner {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--container-pad, 24px);
}

/* ---------- header ---------- */

.favs-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  padding: 26px 0 24px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--ds-border);
  animation: favUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.favs-beam {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 88px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ds-primary), transparent);
}

.favs-hero-main { display: grid; gap: 10px; max-width: 620px; }

.favs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ds-primary);
}

.favs-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--ds-primary);
}

.favs-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
}

.favs-lede {
  margin: 0;
  max-width: 58ch;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ds-text-muted);
}

.favs-stats {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 0;
  flex-wrap: wrap;
}

.favs-stat {
  display: grid;
  gap: 3px;
  min-width: 104px;
  padding: 12px 16px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-md);
  background: var(--ds-surface);
  box-shadow: var(--shadow-1);
}

.favs-stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
}

.favs-stat-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.favs-stat-value.is-word {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* the counter pops when a product is added */
.favs-stat-value.is-bump { animation: favBump 420ms cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes favBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); color: var(--ds-primary); }
  100% { transform: scale(1); }
}

/* ---------- layout ---------- */

.favs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 26px;
  align-items: start;
}

.favs-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ds-border);
}

.favs-block-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

.favs-list-count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
}

.favs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* ---------- saved product card ---------- */

.fav-card {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-lg);
  background: var(--ds-surface);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, opacity 220ms ease;
  animation: favUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--fav-delay, 0.1s) both;
}

.fav-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--ds-primary) 38%, var(--ds-border));
  box-shadow: var(--shadow-2);
}

.fav-card.is-leaving {
  opacity: 0;
  transform: translateY(6px) scale(0.98);
}

.fav-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  background: #ffffff;
  overflow: hidden;
}

.fav-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.fav-card:hover .fav-card-media img { transform: scale(1.03); }

.fav-card-index {
  position: absolute;
  inset-inline-start: 12px;
  top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--lu-ink-950) 42%, transparent);
}

.fav-card-body {
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--ds-border);
}

.fav-card-code {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ds-primary);
}

.fav-card-title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
}

.fav-card-title a {
  color: var(--ds-text);
  text-decoration: none;
  transition: color 140ms ease;
}

.fav-card-title a:hover { color: var(--ds-primary); }

.fav-card-desc {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ds-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fav-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in srgb, var(--ds-border) 70%, transparent);
}

.fav-card-open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-primary);
  text-decoration: none;
  transition: gap 160ms ease, color 160ms ease;
}

.fav-card-open:hover { gap: 11px; color: var(--ds-primary-hover); }

[dir="rtl"] .fav-card-open svg { transform: scaleX(-1); }

.fav-card-remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--ds-text-muted);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

.fav-card-remove svg { width: 12px; height: 12px; }

.fav-card-remove:hover {
  color: var(--ds-danger, #c64b4b);
  border-color: color-mix(in srgb, var(--ds-danger, #c64b4b) 34%, transparent);
  background: color-mix(in srgb, var(--ds-danger, #c64b4b) 8%, transparent);
}

/* ---------- side panels ---------- */

.favs-side {
  display: grid;
  gap: 16px;
  position: sticky;
  top: calc(var(--luann-h, 0px) + var(--mnav-row1, 64px) + 16px);
}

.favs-panel {
  padding: 20px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-lg);
  background: var(--ds-surface);
  box-shadow: var(--shadow-1);
  animation: favUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

.favs-panel-mail {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--ds-primary-soft) 0%, transparent 58%),
    var(--ds-surface);
}

.favs-panel-mail::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ds-primary), transparent 72%);
}

.favs-panel-eyebrow {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ds-primary);
}

.favs-panel-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
}

.favs-panel-title.is-small { font-size: 16px; }

.favs-panel-text {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ds-text-muted);
}

/* mail form */
.favs-mail { display: grid; gap: 10px; }

/* A captioned field: the wording sits above the control. Inside the pill the
   label had to share the row with the input, so a two-word one wrapped, ate the
   room the visitor types in, and left the placeholder hanging off the side. */
.favs-mail-block { display: grid; gap: 7px; }

.favs-mail-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
}

.favs-mail-field {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-full);
  background: var(--ds-surface);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.favs-mail-field:focus-within {
  border-color: var(--ds-primary-line);
  box-shadow: 0 0 0 3px var(--ds-primary-soft);
}

.favs-mail-field svg { width: 16px; height: 16px; color: var(--ds-text-muted); flex: none; }

.favs-mail-field input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ds-text);
  font-family: var(--font-body);
  font-size: 13.5px;
  outline: none;
}

.favs-mail-field input::placeholder { color: color-mix(in srgb, var(--ds-text-muted) 78%, transparent); }

/* the "e-mail me whenever I save something new" choice, in both forms */
.favs-notify,
.favmail-notify {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 2px 2px 2px 4px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ds-text-muted);
  cursor: pointer;
}

.favs-notify input,
.favmail-notify input {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--ds-primary);
  cursor: pointer;
}

.favs-notify:has(input:checked),
.favmail-notify:has(input:checked) { color: var(--ds-text); }

.favs-notify:has(input:focus-visible),
.favmail-notify:has(input:focus-visible) {
  outline: 2px solid var(--ds-focus-color);
  outline-offset: 2px;
  border-radius: 6px;
}

.favs-notify-hint {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ds-text-muted) 88%, transparent);
}

.favs-mail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 18px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--ds-primary);
  color: var(--ds-primary-text);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.favs-mail-btn:hover:not(:disabled) {
  background: var(--ds-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

.favs-mail-btn:disabled { opacity: 0.6; cursor: progress; }

.favs-mail-status {
  margin: 0;
  min-height: 16px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ds-text-muted);
}

.favs-mail-status.is-ok { color: var(--ds-success, #4d9077); }

.favs-mail-status.is-error { color: var(--ds-danger, #c64b4b); }

.favs-points {
  display: grid;
  gap: 7px;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px dashed color-mix(in srgb, var(--ds-border) 70%, transparent);
  list-style: none;
}

.favs-points li {
  position: relative;
  padding-inline-start: 20px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ds-text-muted);
}

.favs-points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 6px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--ds-primary);
  border-bottom: 2px solid var(--ds-primary);
  transform: rotate(-45deg);
}

/* permanent link */
.favs-linkrow { display: flex; gap: 8px; }

.favs-linkinput {
  flex: 1;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-md);
  background: var(--ds-surface-alt, var(--ds-bg));
  color: var(--ds-text-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  outline: none;
  text-overflow: ellipsis;
}

.favs-copy {
  flex: none;
  padding: 0 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-md);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.favs-copy:hover {
  border-color: var(--ds-primary-line);
  color: var(--ds-primary);
}

.favs-copy.is-done { color: var(--ds-success, #4d9077); border-color: currentColor; }

/* footer panel */
.favs-panel-foot { display: grid; gap: 16px; }

.favs-clear {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  border: 0;
  background: transparent;
  color: var(--ds-text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 150ms ease;
}

.favs-clear svg { width: 15px; height: 15px; }

.favs-clear:hover { color: var(--ds-danger, #c64b4b); }

.favs-help {
  padding-top: 14px;
  border-top: 1px dashed color-mix(in srgb, var(--ds-border) 70%, transparent);
}

.favs-help strong {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
}

.favs-help p {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ds-text-muted);
}

.favs-help a {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-primary);
  text-decoration: none;
}

.favs-help a:hover { color: var(--ds-primary-hover); }

/* ---------- empty state ---------- */

.favs-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(32px, 6vw, 64px) 24px;
  border: 1px dashed var(--ds-border);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--ds-surface), color-mix(in srgb, var(--ds-surface) 60%, var(--ds-bg)));
  text-align: center;
  animation: favUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}

.favs-empty-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-full);
  color: var(--ds-primary);
  background: var(--ds-surface);
  box-shadow: var(--shadow-1);
}

.favs-empty-icon svg { width: 28px; height: 28px; }

.favs-empty-title {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

.favs-empty-text {
  margin: 0;
  max-width: 46ch;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ds-text-muted);
}

.favs-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 14px 24px;
  border-radius: var(--radius-full);
  background: var(--ds-primary);
  color: var(--ds-primary-text);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.favs-empty-cta:hover {
  background: var(--ds-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.favs-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 30px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--ds-border);
  list-style: none;
  text-align: start;
}

.favs-step { display: grid; gap: 5px; }

.favs-step-n {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ds-primary);
}

.favs-step strong { font-size: 13.5px; }

.favs-step p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ds-text-muted);
}

/* ---------- toast ---------- */

.fav-toast {
  position: fixed;
  inset-inline: 0;
  bottom: 26px;
  z-index: 90;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.fav-toast-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 460px);
  padding: 12px 18px;
  border: 1px solid color-mix(in srgb, var(--ds-border) 60%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--lu-ink-950) 90%, transparent);
  color: var(--lu-neutral-0);
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: var(--shadow-3);
  transform: translateY(14px);
  opacity: 0;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms ease;
}

.fav-toast.is-on .fav-toast-inner { transform: translateY(0); opacity: 1; }

.fav-toast-heart {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--lu-mint, #7fe2d0);
  fill: currentColor;
}

/* ---------- "mail it to me" prompt ---------- */

/* The sheet that asks for the address right after the first product is saved.
   It floats over the page (never blocks it), remembers its answer and is
   skipped entirely on the saved-list page, which has the full mail panel. */

.favmail {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-end: 24px;
  z-index: 88;
  display: grid;
  gap: 6px;
  width: min(92vw, 376px);
  padding: 22px 22px 18px;
  border: 1px solid color-mix(in srgb, var(--ds-border) 65%, transparent);
  border-radius: 22px;
  background:
    radial-gradient(120% 80% at 100% 0%, var(--ds-primary-soft) 0%, transparent 60%),
    var(--ds-glass-bg-strong, var(--ds-surface));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 260ms ease;
}

.favmail[hidden] { display: none; }

.favmail.is-on { opacity: 1; transform: none; }

.favmail-beam {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ds-primary), transparent 74%);
  pointer-events: none;
}

.favmail-close {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--ds-text-muted);
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.favmail-close svg { width: 13px; height: 13px; }

.favmail-close:hover {
  color: var(--ds-text);
  border-color: var(--ds-border);
  background: var(--ds-surface);
}

.favmail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 4px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--ds-primary) 14%, var(--ds-surface));
  color: var(--ds-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-primary) 26%, transparent);
}

.favmail-icon svg { width: 18px; height: 18px; fill: currentColor; }

.favmail-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ds-primary);
}

.favmail-title {
  margin: 0;
  padding-inline-end: 26px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  color: var(--ds-text);
}

.favmail-text {
  margin: 6px 0 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ds-text-muted);
}

.favmail-form { display: grid; gap: 9px; }

.favmail-field {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-full);
  background: var(--ds-surface);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.favmail-field:focus-within {
  border-color: var(--ds-primary-line);
  box-shadow: 0 0 0 3px var(--ds-primary-soft);
}

.favmail-field svg { width: 16px; height: 16px; color: var(--ds-text-muted); flex: none; }

.favmail-field input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ds-text);
  font-family: var(--font-body);
  font-size: 13.5px;
  outline: none;
}

.favmail-field input::placeholder { color: color-mix(in srgb, var(--ds-text-muted) 78%, transparent); }

.favmail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 18px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--ds-primary);
  color: var(--ds-primary-text);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.favmail-btn svg { width: 15px; height: 15px; }

.favmail-btn:hover:not(:disabled) {
  background: var(--ds-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

.favmail-btn:disabled { opacity: 0.6; cursor: progress; }

.favmail-status {
  margin: 0;
  min-height: 15px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ds-text-muted);
}

.favmail-status.is-ok { color: var(--ds-success, #4d9077); }

.favmail-status.is-error { color: var(--ds-danger, #c64b4b); }

.favmail-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in srgb, var(--ds-border) 75%, transparent);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ds-text-muted);
}

.favmail-note svg { width: 13px; height: 13px; flex: none; margin-top: 1px; }

.favmail :focus-visible {
  outline: 2px solid var(--ds-focus-color);
  outline-offset: 2px;
}

/* ---------- entrance ---------- */

@keyframes favUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .favs-layout { grid-template-columns: 1fr; }
  .favs-side { position: static; }
}

@media (max-width: 720px) {
  .favmail {
    inset-inline: 12px;
    inset-block-end: 12px;
    width: auto;
    padding: 18px 18px 16px;
    border-radius: 20px;
  }

  .favs-hero { align-items: flex-start; }
  .favs-stats { width: 100%; }
  .favs-stat { flex: 1; min-width: 0; }
  .favs-grid { grid-template-columns: 1fr; }
  .favs-steps { grid-template-columns: 1fr; gap: 14px; }
  .favs-step { padding-bottom: 12px; border-bottom: 1px dashed color-mix(in srgb, var(--ds-border) 70%, transparent); }
  .favs-step:last-child { border-bottom: 0; padding-bottom: 0; }
  .favbtn-card { --fav-size: 32px; }
}

@media (hover: none) {
  /* hearts stay visible on touch devices, where there is no hover state */
  .favbtn-card { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .favmail { transition: none; }

  .favs-hero,
  .fav-card,
  .favs-panel,
  .favs-empty { animation: none; }

  .favbtn,
  .fav-card,
  .fav-card-media img,
  .fav-toast-inner { transition: none; }
}

/* ---------- print: the list is a quotation starting point ---------- */

@media print {
  .favs-side,
  .favbtn,
  .fav-card-remove,
  .fav-toast,
  .favmail,
  .mnav,
  .footer { display: none !important; }

  .favs { padding: 0; background: #fff; }
  .favs-layout { grid-template-columns: 1fr; }
  .favs-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .fav-card { break-inside: avoid; box-shadow: none; }
}