/* Webpush-knoppen en -paneel */
.follow-btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer; color: var(--ink, #111); background: var(--white, #fff); border: 2px solid var(--line-strong, #cfcac0); border-radius: 999px; padding: 10px 16px; }
.follow-btn:hover, .follow-btn:focus-visible { border-color: var(--ink, #111); }
.follow-btn.is-on { background: var(--ink, #111); color: var(--yellow, #ffd60a); border-color: var(--ink, #111); }
.follow-btn[disabled] { opacity: .6; cursor: progress; }
.follow-btn__icon { flex: none; }
.follow-btn--icon { position: relative; z-index: 6; width: 34px; height: 34px; padding: 0; justify-content: center; border-width: 1px; }
.follow-btn--icon .follow-btn__icon { width: 16px; height: 16px; }
.deal-card__follow { position: absolute; z-index: 6; top: 66px; right: 24px; }
.deal-card__follow .follow-btn--icon { background: var(--white, #fff); box-shadow: 0 1px 5px rgba(0, 0, 0, .3); border-color: transparent; }
.deal-card__follow .follow-btn--icon.is-on { background: var(--ink, #111); color: var(--yellow, #ffd60a); }
.deal-grid .deal-card__follow { top: 58px; right: 20px; }
.push-form { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.push-form label { font-weight: 700; font-size: 15px; }
.push-form input[type="text"] { flex: 1 1 220px; height: 52px; border: 2px solid var(--ink, #111); border-radius: 10px; padding: 0 16px; font-size: 17px; background: var(--white, #fff); }
.push-form .btn-dark { height: 52px; font-size: 17px; }
.push-form small { font-size: 14px; }
.follow-wrap { margin: 14px 0 0; }
.follow-toast { position: fixed; left: 50%; bottom: 20px; z-index: 1000; transform: translate(-50%, 20px); max-width: min(560px, calc(100vw - 32px)); background: var(--ink, #111); color: #fff; padding: 14px 18px; border-radius: 12px; font-size: 15px; line-height: 1.4; box-shadow: 0 8px 30px rgba(0, 0, 0, .3); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.follow-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.follow-panel { position: fixed; inset: 0; z-index: 1001; background: rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.follow-panel__box { position: relative; background: var(--white, #fff); color: var(--ink, #111); border-radius: 16px; padding: 24px; width: min(480px, 100%); max-height: 80vh; overflow: auto; }
.follow-panel__box h2 { margin: 0 0 14px; font-size: 24px; }
.follow-panel__close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; background: none; font-size: 28px; cursor: pointer; color: inherit; }
.follow-panel__list { list-style: none; margin: 0 0 16px; padding: 0; }
.follow-panel__list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line, #e6e2d9); }
.follow-panel__list button, .follow-panel__all { font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; background: var(--white, #fff); border: 2px solid var(--line-strong, #cfcac0); border-radius: 999px; padding: 6px 14px; color: inherit; }
.follow-panel__list button:hover, .follow-panel__all:hover { border-color: var(--ink, #111); }
@media (prefers-reduced-motion: reduce) { .follow-toast { transition: none; } }