/* Ikony stanu: serduszko (ulubione) i dzwonek (alert cenowy) - jedna rodzina
   na stronie głównej i na LEGO, zamiast emoji, które na każdym systemie wyglądają
   inaczej (🤍 na Androidzie to szary kształt, 🔔 trzeba było odbarwiać filtrem).

   Zasada: wygaszone = szary kontur, włączone = wypełnione i kolorowe. O stanie mówi
   wyłącznie klasa rodzica (.active na stronie głównej, .is-on na LEGO) - JS nie
   podmienia znaków, tylko przełącza klasę.

   Technika: SVG jako maska, kolor z currentColor - ikona przyjmuje kolor przycisku. */

.ikona {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--ikona) center / contain no-repeat;
    mask: var(--ikona) center / contain no-repeat;
    transition: transform .15s ease;
}

.ikona-serce { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E"); }
.ikona-dzwonek { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E"); }

:is(.active, .is-on) > .ikona-serce { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z' fill='black'/%3E%3C/svg%3E"); }
:is(.active, .is-on) > .ikona-dzwonek { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9' fill='black'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E"); }

/* Pozostałe ikony serwisu (wygląd „Metka”, 10.2026) - ten sam mechanizm maski,
   kolor z currentColor. Kształty jak na płótnie projektu. */
.ikona-lupa { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4'/%3E%3C/svg%3E"); }
.ikona-menu { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
.ikona-metka { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l9 9-8 8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3'/%3E%3C/svg%3E"); }
.ikona-klocek { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h18v9H3zM6 10V7h4v3M14 10V7h4v3'/%3E%3C/svg%3E"); }
.ikona-pudelko { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l9-4 9 4v10l-9 4-9-4zM3 7l9 4 9-4M12 11v10'/%3E%3C/svg%3E"); }
.ikona-klucz { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 14a4 4 0 1 1 3-6.6L21 7v4h-3v3h-3l-1.4-1.4A4 4 0 0 1 8 14z'/%3E%3C/svg%3E"); }
.ikona-wyloguj { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5V3h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E"); }
.ikona-pobierz { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E"); }
.ikona-x { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }
.ikona-filtry { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E"); }
.ikona-sortuj { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M4 17l3 3 3-3M17 20V4M14 7l3-3 3 3'/%3E%3C/svg%3E"); }
.ikona-kula { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18'/%3E%3C/svg%3E"); }
.ikona-wykres { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19h16M5 15l4-5 4 3 6-7'/%3E%3C/svg%3E"); }
.ikona-wyjscie { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v6H4V6h6'/%3E%3C/svg%3E"); }
/* Papryczka = oryginalny płomień z logo pepper.pl (favicon.svg, #fb4c01), w swoim kolorze,
   więc obrazek zamiast maski z currentColor (Seba 16.10.2026). */
.ikona.ikona-papryczka { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 36'%3E%3Cpath fill='%23fb4c01' d='M16.381 33.98c-.684.017-.67-.612-.259-.777.465-.187 1.177-.481 1.645-.776 4.729-2.973 1.525-9.28-2.38-8.688-1.257.19-1.732.303-2.384.018-1.68-.735-2.01-2.584-1.282-3.961.21-.835-.426-.705-.753-.398q-.08.05-.157.104c-1.962 1.455-3.742 4.1-3.466 7.553.318 3.983 3.255 5.804 4.229 6.143.439.153.427.833-.105.782-2.267-.217-4.921-1.403-7.01-3.606C1.494 27.251.112 22.46 1.59 17.856c2.213-6.894 10.983-9.533 10.215-14.559-.287-1.4.955-1.479 1.485-1.198 1.847 1.102 2.564 2.4 2.973 3.7 1.335 4.246-.665 5.496 1.335 7.747.457.456 1.217.955 1.965 1.042 1.786.208 2.603-1.18 2.695-1.861.091-.682.687-.714.95-.453 6.382 7.088 2.372 15.39-.125 18.088-2.692 2.908-6.107 3.603-6.702 3.618'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: none; mask: none; }
.ikona-strzalka-dol { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.ikona-kopiuj { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9h11v11H9zM5 15H4V4h11v1'/%3E%3C/svg%3E"); }

/* Kolory: wspólny szary dla wygaszonych, własny kolor dla włączonych. */
:root {
    --ikona-wygaszona: #3A404C;
    --ikona-serce-on: #E0245E;
    --ikona-dzwonek-on: #2747D8;
}

/* Przyciski z ikoną w białym kółku (karta produktu, kafelek LEGO) - kółko jest zawsze
   białe, bo leży na zdjęciu, więc szary jest ten sam w jasnym i ciemnym motywie. */
.product-favorite-btn, .product-watch-btn, .lego-card-fav { color: var(--ikona-wygaszona); }
.product-favorite-btn.active, .lego-card-fav.is-on { color: var(--ikona-serce-on); }
.product-watch-btn.active { color: var(--ikona-dzwonek-on); }
.product-favorite-btn .ikona, .product-watch-btn .ikona, .lego-card-fav .ikona { font-size: 16px; }

/* Krótki "puls" przy włączeniu - potwierdzenie kliknięcia bez komunikatu. */
:is(.product-favorite-btn, .product-watch-btn, .lego-card-fav, .lego-fav-btn).active > .ikona,
:is(.product-favorite-btn, .product-watch-btn, .lego-card-fav, .lego-fav-btn).is-on > .ikona {
    animation: ikona-wlaczona .3s ease;
}
@keyframes ikona-wlaczona { 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) {
    .ikona { transition: none; }
    :is(.active, .is-on) > .ikona { animation: none !important; }
}

/* Strona LEGO (karta zestawu): przyciski z ramką, ikona w kolorze tekstu motywu. */
.lego-fav-btn { color: var(--text-light, var(--ikona-wygaszona)); }
.lego-fav-btn.is-on { color: var(--ikona-serce-on); }
.lego-fav-btn .ikona { font-size: 18px; }
.lego-watch-btn .ikona { font-size: 15px; }

.product-action-btn:focus-visible, .lego-card-fav:focus-visible, .lego-fav-btn:focus-visible {
    outline: 2px solid var(--primary-color, #2563eb);
    outline-offset: 2px;
}

/* Telefon / tablet: 30 px to za mały cel dla palca - na ekranach dotykowych 36 px. */
@media (pointer: coarse) {
    .product-action-btn { width: 36px; height: 36px; }
    .product-favorite-btn .ikona, .product-watch-btn .ikona { font-size: 18px; }
    .lego-card-fav { width: 34px; height: 34px; }
}

/* Kula na karcie Amazona kręci się, dopóki trwa sprawdzanie innych Amazonów
   (kraje.js dodaje is-kreci; wcześniej podmieniało klatki emoji 🌍🌎🌏). */
.is-kreci > .ikona-kula { animation: ikona-kula-obrot 1.6s linear infinite; }
@keyframes ikona-kula-obrot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .is-kreci > .ikona-kula { animation: none; } }
.ikona-pomoc { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6v.6M12 17h.01'/%3E%3C/svg%3E"); }
.ikona-dymek { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12.5a7.5 7.5 0 0 1-11.2 6.5L4 20l1.1-4.3A7.5 7.5 0 1 1 20 12.5z'/%3E%3C/svg%3E"); }
.ikona-powieksz { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E"); }
.ikona-zmniejsz { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7'/%3E%3C/svg%3E"); }
.ikona-wyslij { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 10 14M21 3l-7 18-4-7-7-4 18-7z'/%3E%3C/svg%3E"); }

/* Moneta InCoin z grafiki inpost.pl zamiast emoji 🪙 (Seba 16.10.2026) - piksel-art, więc bez wygładzania. */
.incoin { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.17em; image-rendering: pixelated; }