/* PLIK GENEROWANY: node tools/build-css.mjs. Nie edytować ręcznie. */
/* Strona: index.html | arkuszy w paczce: 24 */

/* ===== css/index.css ===== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #000000;
}

/* ===== Globalna siatka bezpieczeństwa dla mobilek =====
   Na telefonie żadna ozdobna poświata / sub-pikselowy element nie może
   wywołać poziomego przewijania. `clip` (a nie `hidden`) nie psuje
   position: sticky / fixed. Duże realne przepełnienia są naprawione u źródła. */
@media (max-width: 1024px) {
    html, body { overflow-x: clip; max-width: 100%; }
}
/* ================= KNOWLEDGE HUB SECTION ================= */
.knowledge-hub {
    position: relative;
    padding: 6vw 0;
    background: #080000; /* Bardzo ciemne tło */
    overflow: hidden;
}

/* Subtelny gradient w tle */
.knowledge-hub::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(255, 0, 0, 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.hub-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Header sekcji */
.hub-header {
    text-align: center;
    margin-bottom: 4vw;
}

.hub-badge {
    display: inline-block;
    padding: 0.5vw 1vw;
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.2);
    border-radius: 20px;
    color: #ff4d4d;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.hub-title {
    font-size: 2.5rem;
    color: white;
    font-weight: 700;
    margin: 0 0 1rem 0;
}

.hub-desc {
    color: #888;
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Grid kart */
.hub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
}

/* Styl kart */
.hub-card {
    position: relative;
    background: #110505;
    border: 1px solid #2a0a0a;
    border-radius: 16px;
    padding: 3vw;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    group: pointer;
}

/* Efekt glow w tle karty */
.hub-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(255, 0, 0, 0.1), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.hub-card:hover .hub-card-bg {
    opacity: 1;
}

.hub-card:hover {
    transform: translateY(-5px);
    border-color: #ff0000;
    box-shadow: 0 10px 30px rgba(255, 0, 0, 0.15);
}

/* Ikona */
.card-icon-box {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #220000, #3d0000);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    color: #ff3333;
    border: 1px solid #550000;
    transition: transform 0.4s ease;
}

.hub-card:hover .card-icon-box {
    transform: scale(1.1) rotate(5deg);
    background: #ff0000;
    color: white;
    border-color: #ff0000;
}

/* Treść karty */
.card-content h3 {
    color: white;
    font-size: 1.5rem;
    margin: 0 0 0.8rem 0;
    font-weight: 600;
}

.card-content p {
    color: #999;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 2rem 0;
}

/* Link na dole karty */
.card-link {
    font-weight: 600;
    color: #ff3333;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.3s ease;
}

.hub-card:hover .card-link {
    color: #ff6666;
    gap: 1rem;
}

/* Responsywność */
@media (max-width: 768px) {
    .hub-grid {
        grid-template-columns: 1fr;
    }
    .hub-title {
        font-size: 1.8rem;
    }
}
/* (Sekcja „Program Partnerski / Twój Hype to Waluta" została usunięta z indexu.) */
/* Widoczna data aktualizacji (stemplowana przez tools/stamp-dates.mjs). */
.kf-updated {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 6px 0 14px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid #262626;
    background: rgba(255, 255, 255, .03);
    font-size: .78rem;
    color: #9a9a9a;
}
.kf-updated i { color: #E60000; font-size: .9em; }
.kf-updated time { color: #d0d0d0; font-weight: 600; }


/* ===== css/index/navbar.css ===== */
body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* ================= NAVBAR ================= */
.custom-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, rgba(22, 3, 3, 0.80) 0%, rgba(8, 0, 0, 0.60) 100%);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid rgba(255, 26, 26, 0.12);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    transition: background 0.4s cubic-bezier(.4,0,.2,1), border-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
    z-index: 9999;
}

/* Animowana, świecąca linia na dole navbaru */
.custom-navbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(230, 0, 0, 0.5), rgba(255, 26, 26, 0.85), rgba(230, 0, 0, 0.5), transparent);
    opacity: 0.45;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.custom-navbar.is-scrolled {
    background: linear-gradient(180deg, rgba(13, 0, 0, 0.96) 0%, rgba(9, 0, 0, 0.92) 100%);
    border-bottom-color: rgba(138, 0, 0, 0.7);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
    padding: 7px 0;
}

.custom-navbar.is-scrolled::after { opacity: 1; }

/* ================= INNER ================= */
.nav-inner {
    width: 95%;
    max-width: 1800px;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ================= LOGO ================= */
.nav-brand img {
    width: 60px;
    height: 40px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.4s ease;
}

@media (min-width: 1600px) {
    .nav-brand img { width: 72px; height: 46px; }
    .nav-inner { gap: 18px; }
}

.nav-brand img:hover {
    transform: scale(1.05);
}
/* ================= 1. NOWY TRIGGER W NAVBARZE ================= */
/* ================= 1. NOWY TRIGGER W NAVBARZE ================= *//* ================= 1. NOWY TRIGGER W NAVBARZE (Poprawione rozmiary) ================= */
.nav-search-trigger {
    display: flex;
    align-items: center;
    gap: 12px; /* Zamiast vw */
    background: rgba(20, 0, 0, 0.6);
    border: 1px solid rgba(255, 26, 26, 0.15); /* Zamiast vw */
    padding: 0 16px; /* Zamiast vw */
    border-radius: 25px; /* Pigułka */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 50px; /* STAŁA WYSOKOŚĆ - to naprawi problem */
    min-width: 250px; /* STAŁA SZEROKOŚĆ */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

/* Subtelny gradient */
.nav-search-trigger::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(45deg, rgba(255, 26, 26, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-search-trigger i {
    color: #FF1A1A;
    font-size: 16px; /* Stały rozmiar lupy */
    z-index: 1;
    transition: transform 0.3s ease;
}

.search-placeholder {
    color: #888;
    font-size: 14px; /* Stały rozmiar tekstu */
    font-weight: 500;
    letter-spacing: 0.5px;
    z-index: 1;
    transition: color 0.3s ease;
}

/* Efekty na Hover */
.nav-search-trigger:hover {
    border-color: #FF1A1A;
    background: rgba(30, 0, 0, 0.8);
    box-shadow: 0 0 15px rgba(255, 26, 26, 0.15), inset 0 0 5px rgba(255, 26, 26, 0.05);
    transform: translateY(-2px);
}

.nav-search-trigger:hover::before {
    opacity: 1;
}

.nav-search-trigger:hover i {
    transform: scale(1.1);
}

.nav-search-trigger:hover .search-placeholder {
    color: #fff;
}
/* ================= 2. PALETA WYSZUKIWANIA + SZUKANIE PO ZDJĘCIU ================= */
/* Przeniesione do css/index/search.css (2026-09-19). */

/* ================= KUPONY I NOWOŚCI - GOLD NAV ITEM ================= */
.nav-qc-btn {
    border-color: rgba(0, 255, 153, 0.45) !important;
    color: #00FF99 !important;
    background: rgba(0, 255, 153, 0.05) !important;
}
.nav-qc-btn i { color: #00FF99 !important; }
.nav-qc-btn:hover {
    background: rgba(0, 255, 153, 0.12) !important;
    border-color: #00FF99 !important;
    color: #66ffbb !important;
}
.nav-qc-btn.active {
    background: rgba(0, 255, 153, 0.18) !important;
    border-color: #00FF99 !important;
    box-shadow: 0 0 12px rgba(0, 255, 153, 0.25);
}

.nav-kupony-btn {
    border-color: rgba(255, 215, 0, 0.55) !important;
    color: #FFD700 !important;
    background: rgba(255, 215, 0, 0.06) !important;
    animation: kuponyGlow 2.8s ease-in-out infinite;
}

.nav-kupony-btn:hover {
    background: rgba(255, 215, 0, 0.14) !important;
    border-color: #FFD700 !important;
    color: #ffe566 !important;
}

.nav-kupony-badge {
    display: inline-flex;
    align-items: center;
    background: #FFD700;
    color: #111;
    font-size: 0.55rem;
    font-weight: 800;
    border-radius: 4px;
    padding: 0 5px;
    margin-left: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1;
    height: 1.2vw;
    min-height: 14px;
    animation: kuponyBadgePulse 2.8s ease-in-out infinite;
}

@keyframes kuponyGlow {
    0%, 100% { border-color: rgba(255, 215, 0, 0.55); box-shadow: none; }
    50% { border-color: rgba(255, 215, 0, 0.85); box-shadow: 0 0 10px rgba(255, 215, 0, 0.15); }
}

@keyframes kuponyBadgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}

/* ================= MENU ================= */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 4px;
    margin: 0;
    padding: 0;
    margin-left: 8px;
    align-items: center;
}

.nav-menu > li { display: flex; align-items: center; }

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #cccccc;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    line-height: 1;
    height: 36px;
    white-space: nowrap;
}

/* Bardzo szerokie ekrany - lekko większy tekst */
@media (min-width: 1600px) {
    .nav-link { font-size: 13px; padding: 9px 12px; height: 38px; gap: 6px; }
    .nav-menu { gap: 5px; margin-left: 10px; }
}

.nav-link:hover {
    color: #ffffff;
    background: rgba(230, 0, 0, 0.10);
    border-color: rgba(255, 26, 26, 0.22);
}

.nav-menu > li > .nav-link.active:not(.nav-qc-btn):not(.nav-kupony-btn) {
    color: #fff;
    background: rgba(230, 0, 0, 0.14);
    border-color: rgba(230, 0, 0, 0.45);
    box-shadow: inset 0 0 14px rgba(230, 0, 0, 0.12), 0 2px 10px rgba(230, 0, 0, 0.15);
}

/* Świecący wskaźnik pod aktywnym linkiem */
.nav-menu > li > .nav-link.active:not(.nav-qc-btn):not(.nav-kupony-btn)::after {
    content: '';
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #FF1A1A, transparent);
    box-shadow: 0 0 8px rgba(255, 26, 26, 0.7);
}

.nav-link i {
    font-size: 14px;
    transition: transform 0.3s ease, color 0.3s ease;
    line-height: 1;
}

.nav-link:hover i {
    transform: translateY(-2px) scale(1.05);
    color: #FF1A1A;
}

/* ================= DROPDOWN ================= */
.dropdown { position: relative; }

.dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px;
}

.dropdown-menu {
    position: absolute;
    top: 120%;
    left: 0;
    min-width: max-content;
    padding: 8px;
    background: linear-gradient(160deg, rgba(26, 2, 2, 0.97), rgba(13, 0, 0, 0.97));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(138, 0, 0, 0.8);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 26, 26, 0.06);
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(.4,0,.2,1), transform 0.35s cubic-bezier(.4,0,.2,1);
    z-index: 100;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    color: #ddd;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
    transition: 0.25s ease;
}

.dropdown-menu a i {
    color: #FF1A1A;
    width: 16px;
    text-align: center;
    transition: transform 0.25s ease;
}

.dropdown-menu a:hover {
    background: linear-gradient(90deg, #8A0000, #6a0000);
    color: white;
    transform: translateX(3px);
}

.dropdown-menu a:hover i {
    color: #fff;
    transform: scale(1.12);
}

.arrow {
    font-size: 9px;
    transition: 0.3s ease;
}

.dropdown:hover .arrow {
    transform: rotate(180deg);
}

/* ================= SETTINGS, FAVS & PREFS ================= */
/* push menu items grupę w lewo, a co po niej (auth, settings, hamburger) w prawo */
.nav-menu {
    margin-right: auto;
}
.nav-auth {
    display: flex;
    align-items: center;
    gap: 10px;
}
.nav-auth:empty { display: none; }

/* --- STYL PRZYCISKU ULUBIONE (PEŁNE SERCE) --- */
.nav-fav-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E60000;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.nav-fav-btn i {
    font-size: 18px;
    filter: drop-shadow(0 0 3px rgba(230, 0, 0, 0.3));
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav-fav-btn:hover {
    background: #140000;
    border-color: #8A0000;
    box-shadow: 0 0 15px rgba(230, 0, 0, 0.4);
    transform: translateY(-1px);
}

.nav-fav-btn:hover i {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.6));
}

/* --- USTAWIENIA (segmentowy kontroler z ikonami) --- */
.nav-settings-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(20, 0, 0, 0.55);
    border: 1px solid rgba(255, 26, 26, 0.16);
    border-radius: 13px;
    padding: 4px;
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
    position: relative;
}

.nav-settings-trigger:hover {
    border-color: rgba(255, 26, 26, 0.5);
    background: rgba(36, 0, 0, 0.7);
    box-shadow: 0 0 18px rgba(230, 0, 0, 0.22);
}

.nav-prefs {
    display: flex;
    align-items: center;
    gap: 0;
    background: transparent;
    border: none;
    padding: 0;
    color: #d8d8d8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1;
}

/* Segment: ikona + wartość (globus / moneta / sklep) */
.nav-pref-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease;
}

.nav-pref-item:not(:first-child) {
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.08);
}

.nav-pref-item i {
    font-size: 12px;
    color: #FF1A1A;
    transition: transform 0.25s ease;
}

.nav-pref-item span { color: #ededed; }

.nav-pref-item:hover {
    background: rgba(255, 26, 26, 0.12);
}

.nav-pref-item:hover i {
    transform: scale(1.15);
}

/* Stary separator '|' – ukryty, gdyby JS nie zdążył przebudować */
.nav-prefs-sep { display: none; }

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(160deg, #E60000, #8A0000);
    border: 1px solid rgba(255, 26, 26, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.btn-icon i {
    color: #ffffff;
    font-size: 15px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.nav-settings-trigger:hover .btn-icon {
    box-shadow: 0 0 14px rgba(230, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

/* Zębatka: płynny obrót na hover (zastępuje wieczną pętlę JS — działa na każdej stronie) */
.btn-icon i { transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.nav-settings-trigger:hover .btn-icon i { transform: rotate(90deg); }

/* Średnie ekrany (1280–1450px): chowamy etykiety, zostają same ikony */
@media (max-width: 1450px) {
    .nav-pref-item span { display: none; }
    .nav-pref-item { padding: 6px 8px; }
}
/* ==========================================
   MOBILE RESPONSIVENESS (RWD) - NAVBAR
   ========================================== */

/* Domyślnie ukrywamy hamburgera na komputerach */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    cursor: pointer;
    z-index: 10001; /* Zawsze nad menu */
}

.hamburger-menu span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #fff;
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}
/* ==========================================
   IKONA NEWSÓW I DYMEK
   ========================================== */
.nav-news-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-news-btn {
    color: var(--text-main);
    font-size: 1.3rem;
    position: relative;
    text-decoration: none;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
}
.nav-news-btn:hover { color: var(--primary); }

/* Pulsująca kropka powiadomienia */
.news-pulse-dot {
    position: absolute;
    top: 6px; right: 6px;
    width: 10px; height: 10px;
    background-color: var(--primary);
    border-radius: 50%;
    border: 2px solid var(--bg-card);
}
.news-pulse-dot::after {
    content: '';
    position: absolute;
    top: -2px; left: -2px; width: 10px; height: 10px;
    background-color: var(--primary);
    border-radius: 50%;
    animation: pulseRed 2s infinite;
}
@keyframes pulseRed {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.5); opacity: 0; }
}


.nav-news-btn {
    position: relative;
    color: #fff;
    font-size: 1.4rem;
    transition: 0.3s;
}

.news-pulse-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #ff0000;
    border-radius: 50%;
    box-shadow: 0 0 10px #ff0000;
}

/* Styl dymku ze zdjęcia */
.nav-news-bubble {
    position: absolute;
    top: 50px;
    right: -13.4px;
    background: #ff0000; /* Mocna czerwień */
    color: #fff;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 5px 20px rgba(255, 0, 0, 0.4);
    z-index: 999;
    display: none; /* Sterowane przez JS */
    animation: bounce 2s infinite;
}

/* Strzałka dymku */
.nav-news-bubble::after {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 25px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #ff0000 transparent;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
/* Wyskakujący dymek (Tooltip) */
.nav-news-tooltip {
    position: absolute;
    top: 140%;
    right: 50%;
    transform: translateX(50%) translateY(10px);
    background: #E60000;
    color: white;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    box-shadow: 0 10px 25px rgba(230, 0, 0, 0.4);
    z-index: 100;
    font-family: 'Poppins', sans-serif;
}

/* Trójkącik dymku */
.nav-news-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%; right: 50%;
    transform: translateX(50%);
    border-width: 7px;
    border-style: solid;
    border-color: transparent transparent #E60000 transparent;
}

.nav-news-wrapper:hover .nav-news-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(50%) translateY(0);
}
/* FIX: usunięcie przerwy między dzwonkiem a sercem */
.nav-news-wrapper + .nav-auth {
    margin-left: 0 !important;
}

.nav-news-wrapper {
    margin-right: -0.5vw; /* delikatne "dociśnięcie" */
}

/* Dodatkowo wyrównanie flexa */
.custom-navbar .nav-inner {
    gap: 1.2vw; /* możesz zmniejszyć globalny gap tylko trochę */
}

/* ================= TABLETY I MNIEJSZE (do 1024px) ================= */
@media (max-width: 1280px) {
    .custom-navbar {
        padding: 15px 0; /* Przechodzimy z vw na stałe piksele */
    }

    .nav-inner {
        justify-content: space-between; /* Rozsuwamy elementy na boki */
        width: 95%;
        gap: 15px;
    }

    /* Logo i Ikonki - powiększamy na stałe wartości */
    .nav-brand img {
        width: auto;
        height: 35px;
    }

    /* Wyszukiwarka - chowamy tekst, zostawiamy tylko lupkę jako okrągły przycisk */
   /* Wyszukiwarka (Mobilna) - większa i przesunięta w lewo */
    .nav-search-trigger {
        min-width: unset;
        width: 42px; /* Lekko powiększona */
        height: 42px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
        margin-left: 15px; /* Przesuwa w lewo, tuż obok loga */
        margin-right: auto; /* Wypycha resztę elementów (ulubione, zębatkę) do prawej strony */
    }
    
    .nav-search-trigger i {
        font-size: 18px; /* Powiększona ikona lupy */
    }
    
    .search-placeholder {
        display: none; /* Ukrywamy "Szukaj..." */
    }

    /* Ulubione - stały rozmiar */
    .nav-fav-btn {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    .nav-fav-btn i {
        font-size: 18px;
    }

    /* Ustawienia - Chowamy tekst "PL | PLN | Kakobuy", zostawiamy tylko zębatkę */
    .nav-prefs {
        display: none; 
    }
    .btn-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    .btn-icon i {
        font-size: 18px;
    }

    /* Włączamy Hamburgera */
    .hamburger-menu {
        display: flex;
        margin-left: 10px;
    }

    /* Otwarty hamburger (krzyżyk) */
    .hamburger-menu.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
        background-color: #FF1A1A;
    }
    .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger-menu.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
        background-color: #FF1A1A;
    }

    /* Boczny Panel Menu (Drawer) */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        max-width: 88vw;
        height: 100vh;
        height: 100dvh;
        background: linear-gradient(180deg, rgba(15,0,0,0.98) 0%, rgba(8,0,0,0.98) 100%);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-left: 1px solid rgba(255, 0, 0, 0.25);
        flex-direction: column;
        justify-content: flex-start;
        padding: 90px 22px 30px;
        margin-right: 0;
        transition: right 0.4s cubic-bezier(.4,0,.2,1);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.85);
        overflow-y: auto;
        gap: 4px;
        z-index: 9998;
    }

    .nav-menu.active {
        right: 0;
    }

    /* Scroll styling dla drawera */
    .nav-menu::-webkit-scrollbar { width: 6px; }
    .nav-menu::-webkit-scrollbar-track { background: transparent; }
    .nav-menu::-webkit-scrollbar-thumb { background: rgba(230,0,0,0.3); border-radius: 3px; }

    .nav-link {
        font-size: 16px;
        padding: 14px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 10px;
        height: auto;
        gap: 14px;
    }
    .nav-link:hover {
        background: rgba(230,0,0,0.08);
    }
    .nav-link.active, .nav-link.nav-qc-btn.active, .nav-link.nav-kupony-btn.active {
        background: rgba(230,0,0,0.15);
        border-color: rgba(230,0,0,0.3);
        color: #fff;
    }

    .nav-link i {
        font-size: 18px;
        width: 24px;
        text-align: center;
    }

    /* Naprawa Dropdownu dla widoku mobilnego */
    .dropdown::after { display: none; }
    
    .dropdown-menu {
        position: relative;
        top: 0;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        background: transparent;
        border: none;
        padding: 10px 0 10px 20px; /* Wcięcie podkategorii */
        display: none; /* Domyślnie zwinięte */
    }

    /* Klasa dodawana przez JS do rozwijania na kliknięcie */
    .dropdown.mobile-open .dropdown-menu {
        display: flex;
        flex-direction: column;
    }
    
    .dropdown.mobile-open .arrow {
        transform: rotate(180deg);
    }

    .dropdown-menu a {
        font-size: 15px;
        padding: 10px 15px;
    }

    /* paleta wyszukiwania na telefonie: css/index/search.css */
}

/* ================= TELEFONY (do 480px) ================= */
@media (max-width: 480px) {
    .nav-inner { gap: 10px; }
    .nav-brand img { height: 30px; }
    
    /* Trochę mniejsze ikonki akcji, żeby się zmieściły */
    .nav-search-trigger, .nav-fav-btn, .btn-icon {
        width: 35px; height: 35px; border-radius: 10px;
    }
    .nav-search-trigger i, .nav-fav-btn i, .btn-icon i {
        font-size: 16px;
    }
}


/* ===== css/index/modal.css ===== */
/* ==========================================
   1. BLOKADA SCROLLA I TŁO OVERLAY
   ========================================== */
body.modal-open {
    overflow: hidden !important;
}

.kako-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(5, 5, 5, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 99999;
    
    display: flex; flex-direction: column; 
    justify-content: center; align-items: center;
    opacity: 0; visibility: hidden;
    transition: all 0.4s ease;
}

.kako-modal-overlay.show { opacity: 1; visibility: visible; }

/* ==========================================
   2. NAPIS SVG
   ========================================== */
.kako-title-wrapper {
    width: 100%; display: flex; justify-content: center; align-items: center;
    margin-bottom: -35px; /* Mocniej nachodzi, żeby było zwięźlej */
    z-index: 100000; pointer-events: none;
    transform: scale(0.95); /* Lekko zmniejszony napis */
}

.kako-curved-title {
    width: 100%; max-width: 650px; height: 130px;
    overflow: visible; flex-shrink: 0;
    animation: svgEnter 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.kako-curved-title text {
    font-family: 'Poppins', sans-serif; font-size: 65px; font-weight: 900; letter-spacing: 5px;
}

.text-red { fill: #E60000; filter: drop-shadow(0 0 20px rgba(230, 0, 0, 0.8)); }
.text-white { fill: #FFFFFF; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3)); }

@keyframes svgEnter {
    0% { opacity: 0; transform: translateY(-50px) scale(0.8); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================
   3. GŁÓWNE OKNO - WYWAŻONE
   ========================================== */
.kako-modal {
    background-color: #121212;
    border: 1px solid #2C2C2C;
    width: 90%;
    /* ZWIĘKSZONA SZEROKOŚĆ DLA BALANSU */
    max-width: 460px; 
    border-radius: 24px;
    /* ZWIĘKSZONY PADDING */
    padding: 1.8rem; 
    box-shadow: 0 25px 50px rgba(0,0,0,0.8);
    position: relative;
    display: flex; flex-direction: column;
    gap: 1.2rem; 
    z-index: 99990;
    transform: translateY(30px);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.kako-modal-overlay.show .kako-modal { transform: translateY(0); }

/* PRZYCISK ZAMKNIĘCIA "X" */
.modal-close-x {
    position: absolute; top: 15px; right: 15px;
    background: transparent; border: none; color: #666;
    font-size: 1.3rem; cursor: pointer; transition: all 0.3s ease;
    z-index: 10; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.modal-close-x:hover { color: #E60000; background-color: rgba(230, 0, 0, 0.1); transform: rotate(90deg); }

.kako-modal__header { text-align: center; margin-bottom: 0; }

.kako-modal__icon {
    width: 54px; height: 54px; 
    background: linear-gradient(135deg, #1e1e1e, #000);
    border: 1px solid #2C2C2C; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 0.8rem auto; font-size: 1.3rem; color: #E60000;
    box-shadow: 0 0 15px rgba(230, 0, 0, 0.15);
}

.kako-modal__header p { color: #808080; font-size: 0.9rem; margin: 0; font-family: 'Poppins', sans-serif;}

.kako-label {
    display: block; color: #808080; font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 0.6rem; font-weight: 600; font-family: 'Poppins', sans-serif;
}

/* ==========================================
   4. SIATKI I PRZYCISKI
   ========================================== */
.kako-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* WALUTY W JEDNEJ LINII - WYMUSZENIE */
.currency-grid {
    grid-template-columns: 1fr 1fr 1fr !important; /* 3 równe kolumny */
}

.kako-option {
    background-color: #1E1E1E; border: 1px solid #2C2C2C; color: white;
    padding: 12px; 
    border-radius: 12px; cursor: pointer; font-family: 'Poppins', sans-serif;
    font-weight: 500; transition: all 0.2s ease; display: flex; align-items: center;
    justify-content: center; gap: 8px; font-size: 0.95rem;
}

.kako-option:hover { background-color: #2C2C2C; }
.kako-option.active {
    background-color: rgba(230, 0, 0, 0.1); border-color: #E60000; color: #E60000;
    box-shadow: 0 0 10px rgba(230, 0, 0, 0.15);
}

/* Języki */
.lang-btn { justify-content: flex-start; gap: 12px; padding: 12px 14px; text-align: left; }
.lang-badge {
    background-color: #2C2C2C; color: #808080; font-size: 0.85rem; font-weight: 700;
    padding: 7px 11px; border-radius: 7px;
}
.kako-option.active.lang-btn .lang-badge { background-color: #E60000; color: white; }
.lang-text { display: flex; flex-direction: column; }
.lang-text .lang-main { font-size: 1rem; font-weight: 600; color: white; line-height: 1.2; }
.lang-text .lang-sub { font-size: 0.75rem; color: #808080; }

/* Agenci - Lista */
.kako-agents-scroll {
    display: flex; flex-direction: column; gap: 8px; 
    /* ZWIĘKSZONA WYSOKOŚĆ SCROLLA */
    max-height: 220px; 
    overflow-y: auto; padding-right: 4px;
}
.kako-agents-scroll::-webkit-scrollbar { width: 4px; }
.kako-agents-scroll::-webkit-scrollbar-thumb { background-color: #2C2C2C; border-radius: 10px; }
.kako-agents-scroll::-webkit-scrollbar-track { background-color: #121212; }

/* Karta Agenta */
.kako-agent-card {
    display: flex; align-items: center; justify-content: space-between;
    background-color: #1E1E1E; border: 1px solid #2C2C2C; border-radius: 12px;
    padding: 10px 14px; 
    cursor: pointer; transition: all 0.2s ease; width: 100%; box-sizing: border-box;
}

.agent-info { display: flex; align-items: center; gap: 12px; }

.kako-agent-card .agent-icon {
    width: 34px; height: 34px; 
    background-color: #050505; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; color: #808080;
    flex-shrink: 0; overflow: hidden; border: 1px solid #333;
}
.kako-agent-card .agent-icon img { width: 100%; height: 100%; object-fit: contain; }

.kako-agent-card span { font-size: 0.95rem; color: #cccccc; font-weight: 500; font-family: 'Poppins', sans-serif;}

.kako-agent-card:hover { background-color: #252525; border-color: #404040; }
.kako-agent-card.active { background-color: rgba(230, 0, 0, 0.08); border-color: #E60000; }
.kako-agent-card.active span { color: white; font-weight: 600; }

/* Przycisk Rejestracji wewnątrz agenta */
.agent-register-btn {
    background-color: #E60000; color: white; text-decoration: none;
    font-size: 0.75rem; font-weight: 700; padding: 6px 12px;
    border-radius: 7px; opacity: 1; visibility: visible; transform: none;
    transition: all 0.2s ease; display: flex; align-items: center; gap: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.agent-register-btn:hover { background-color: #ff1a1a; transform: translateY(-1px); }

/* Przycisk Zapisz */
.kako-modal__save-btn {
    background-color: #E60000; color: white; border: none; padding: 16px; width: 100%;
    border-radius: 12px; font-size: 1rem; font-weight: 700; cursor: pointer; 
    transition: background 0.3s, transform 0.2s; font-family: 'Poppins', sans-serif;
    margin-top: 10px;
}
.kako-modal__save-btn:hover { background-color: #FF1A1A; transform: translateY(-2px);}

/* Drobne animacje */
.spin-icon { animation: slowSpin 8s linear infinite; display: inline-block; }
@keyframes slowSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.fade-up { opacity: 0; transform: translateY(15px); animation: fadeUpAnim 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
@keyframes fadeUpAnim { to { opacity: 1; transform: translateY(0); } }


/* ==========================================
   5. RESPONSYWNOŚĆ (MOBILE)
   ========================================== */

@media (max-width: 480px) {
    /* Dopasowanie kontenera modala */
    .kako-modal {
        width: 92%;
        padding: 1.2rem; /* Mniejszy padding na boki */
        gap: 1rem;
        max-height: 85vh; /* Zabezpieczenie przed ucięciem na małych ekranach */
        overflow-y: auto;
    }

    /* Skalowanie napisu SVG - kluczowe dla mobile */
    .kako-title-wrapper {
        transform: scale(0.7); /* Zmniejszenie całości */
        margin-bottom: -50px; /* Większe nachodzenie przy mniejszej skali */
        margin-top: -20px;
    }

    .kako-curved-title {
        height: 100px;
    }

    /* Układ walut - 3 kolumny mogą być za ciasne na bardzo małych telefonach */
    .currency-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 6px;
    }

    .kako-option {
        padding: 10px 5px;
        font-size: 0.85rem;
    }

    /* Układ języków - zmiana na 1 kolumnę dla czytelności lub mniejsze przyciski */
    .kako-options-grid:not(.currency-grid) {
        grid-template-columns: 1fr; /* Języki jeden pod drugim */
        gap: 8px;
    }

    /* Poprawki karty agenta */
    .kako-agent-card {
        padding: 8px 10px;
    }

    .agent-info {
        gap: 8px;
    }

    .kako-agent-card span {
        font-size: 0.85rem;
    }

    .agent-register-btn {
        padding: 5px 8px;
        font-size: 0.7rem;
    }

    /* Ikona nagłówka */
    .kako-modal__icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    /* Przycisk zapisu */
    .kako-modal__save-btn {
        padding: 14px;
        font-size: 0.95rem;
    }
}

/* Obsługa bardzo krótkich ekranów (np. iPhone SE w poziomie lub małe modele) */
@media (max-height: 700px) {
    .kako-title-wrapper {
        display: none; /* Ukrywamy ozdobny napis, by starczyło miejsca na formularz */
    }
    .kako-modal {
        margin-top: 20px;
    }
    .kako-agents-scroll {
        max-height: 140px;
    }
}

/* ===== css/index/floating-social.css ===== */
/* ================= FLOATING SOCIAL - NEW PREMIUM ================= */

.floating-social {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    align-items: flex-end;
      padding: 1.2vw 0.8vw;
    gap: 0.8vw;
    border-top-left-radius: 1.6vw;
    border-bottom-left-radius: 1.6vw;

    background: rgba(20, 0, 0, 0.75);
    backdrop-filter: blur(1.2vw);

    border-left: 0.2vw solid #E60000;


    box-shadow: -1vw 0 2vw rgba(230, 0, 0, 0.25);

    z-index: 999;
}

/* IKONY - TERAZ KWADRATOWE */

.social-icon {
   width: 2.8vw;
    height: 2.8vw;
    font-size: 1.05vw;
    border-radius: 0.7vw;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        145deg,
        #1a0000,
        #330000
    );

    border: 0.1vw solid rgba(255, 26, 26, 0.3);

    color: #FF1A1A;
    font-size: 1.2vw;

    text-decoration: none;

    transition: 0.35s ease;
}

/* Hover bardziej elegancki - przesunięcie */

.social-icon:hover {
    transform: translateX(-0.5vw);
    background: #8A0000;
    color: #fff;
}

/* ================= CENA - WYSUNIĘTY BADGE ================= */

.social-price {
    position: relative;

    padding: 0.6vw 1vw;
    margin-top: 0.8vw;
    font-size: 0.85vw;
    border-radius: 1.6vw 0 0 1.6vw;
    font-weight: 600;
    letter-spacing: 0.05vw;

    color: white;
    text-decoration: none;


    background: linear-gradient(
        90deg,
        #FF4081,
        #E60000
    );

    box-shadow: -0.5vw 0 1.5vw rgba(230, 0, 0, 0.5);

    transition: 0.35s ease;
}

.social-price:hover {
    transform: translateX(-0.5vw);
    box-shadow: -0.8vw 0 2vw rgba(255, 64, 129, 0.7);
}



/* ==========================================
   MOBILE RESPONSIVENESS (RWD) - FLOATING SOCIAL
   ========================================== */

/* 1. TABLETY (do 1024px) */
@media (max-width: 1024px) {
    .floating-social {
        padding: 15px 10px;
        gap: 12px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        border-left: 3px solid #E60000;
        box-shadow: -5px 0 15px rgba(230, 0, 0, 0.3);
    }

    .social-icon {
        width: 55px;
        height: 55px;
        border-radius: 12px;
        font-size: 20px; /* Rozmiar samej ikony */
        border-width: 1px;
    }

    .social-price {
        padding: 8px 14px;
        margin-top: 10px;
        font-size: 14px;
        border-radius: 20px 0 0 20px;
        box-shadow: -5px 0 15px rgba(230, 0, 0, 0.4);
    }

    /* Przejście z hoverów vw na px */
    .social-icon:hover, .social-price:hover {
        transform: translateX(-5px);
    }
}

/* 2. TELEFONY (do 768px) */
@media (max-width: 768px) {
    .floating-social {
        /* Na małym ekranie możemy go lekko podnieść, żeby nie zasłaniał środka */
        top: 60%; 
        padding: 10px 8px;
        gap: 10px;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
    }

    .social-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 18px;
    }

    .social-price {
        padding: 6px 10px;
        margin-top: 8px;
        font-size: 12px;
        border-radius: 15px 0 0 15px;
    }

    /* Na telefonach nie ma najechania myszką (hover), ale dla wciśnięcia palcem warto to zmniejszyć */
    .social-icon:hover, .social-price:hover {
        transform: translateX(-3px);
    }
}

/* 3. BARDZO MAŁE TELEFONY (do 480px) */
@media (max-width: 480px) {
    .floating-social {
        padding: 8px 6px;
        gap: 8px;
        border-left-width: 2px;
    }

    .social-icon {
        width: 35px;
        height: 35px;
        font-size: 16px;
        border-radius: 8px;
    }

    .social-price {
        font-size: 11px;
        padding: 5px 8px;
    }
}

/* ===== css/index/hero.css ===== */
:root {
    --bg-main: #050505;
    --text-white: #FFFFFF;
    --text-grey: #808080;
    --red-primary: #E60000;
    --red-hover: #FF1A1A;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-main);
    overflow-x: hidden;
}

.kako-hero {
    margin-top: 3.5vw;
    position: relative;
    width: 100vw;
    height: 86vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at 0% 0%, rgba(230, 0, 0, 0.15) 0%, transparent 40%),
                radial-gradient(circle at 100% 100%, rgba(255, 64, 129, 0.1) 0%, transparent 40%);
    overflow: hidden;
}

/* Tło statyczne, delikatne */
.kako-hero__bg-fx {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 80vw;
    background: radial-gradient(circle, rgba(236, 230, 230, 0.027) 0%, rgba(5, 5, 5, 0) 60%);
    z-index: 0;
    pointer-events: none;
}

.kako-hero__container {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80vw;
}

/* --- BADGE --- */
.kako-badge {
    background: rgba(18, 18, 18, 0.8);
    border: 0.1vw solid #2C2C2C;
    padding: 0.6vw 1.5vw;
    border-radius: 10vw;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 0 0.27vw var(--text-white);
    gap: 0.8vw;
    margin-bottom: 2vw;
}

.kako-badge__text {
    color: var(--text-white);
    font-size: 0.9vw;
    font-weight: 600;
    letter-spacing: 0.1vw;
    text-transform: uppercase;
}

.kako-badge__dot {
    width: 0.6vw;
    height: 0.6vw;
    background-color: var(--red-hover);
    border-radius: 50%;
    box-shadow: 0 0 1vw var(--red-hover);
    animation: pulse 2s infinite;
}

/* --- TYTUŁ (GLITCH CIĄGŁY) --- */
.kako-hero__title {
    font-size: 7vw;
    line-height: 0.9;
    font-weight: 900;
    color: var(--text-white);
    margin: 0 0 2vw 0;
    letter-spacing: -0.2vw;
}

.kako-hero__title--highlight {
    color: var(--red-primary);
    position: relative;
    display: inline-block;
    animation: glitch 1.8s infinite;
}
.kako-hero__title--highlight2 {
    color: var(--red-primary);
    position: relative;
    display: inline-block;
    animation: glitch 3.6s infinite;
}

/* --- OPIS (TYPEWRITER) --- */
.kako-hero__description {
    font-size: 1.2vw;
    color: var(--text-grey);
    max-width: 50vw;
    min-height: 4vw;
    margin: 0 auto 3vw auto;
    line-height: 1.6;
    text-align: center;
}

.cursor {
    display: inline-block;
    width: 0.2vw;
    height: 1.2vw;
    background-color: var(--red-primary);
    margin-left: 0.2vw;
    vertical-align: middle;
    animation: blink 1s infinite;
}

/* --- BUTTONS --- */
.kako-actions {
    display: flex;
    gap: 1.5vw;
    justify-content: center;
    margin-bottom: 4vw;
}

.kako-btn {
    padding: 1vw 2.0vw; 
    font-size: 1.1vw;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0.6vw;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.8vw;
}

.kako-btn__icon {
    width: 1.4vw;
    height: 1.4vw;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.icon-discord { fill: currentColor; }
.icon-sheet { stroke: currentColor; }

/* --- PRIMARY BUTTON (PULSUJĄCY) --- */
.kako-btn--primary {
    background-color: var(--red-primary);
    color: white;
    position: relative;
    z-index: 1;
    animation: button-pulse-red 2s infinite;
}

.kako-btn--primary:hover {
    background-color: var(--red-hover);
    animation: none;
    transform: translateY(0.31px) scale(1.02);
    box-shadow: 0 0 25px rgba(230, 0, 0, 0.8);
}

.kako-btn--primary:hover .icon-sheet {
    transform: translate(0.2vw, -0.2vw);
}

/* --- SECONDARY BUTTON (DISCORD WIGGLE) --- */
.kako-btn--secondary {
    background-color: transparent;
    border: 0.1vw solid #2C2C2C;
    color: white;
}

.kako-btn--secondary:hover {
    background-color: rgba(255,255,255,0.05);
    border-color: var(--text-grey);
    transform: scale(1.05);
}

.kako-btn--secondary:hover .icon-discord {
    animation: wiggle 0.5s ease-in-out infinite;
}

/* --- VIP BUTTON --- */
.kako-btn--vip {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    color: #FFD700; 
    border: 1px solid rgba(255, 215, 0, 0.3); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 215, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    gap: 5px;
}

.kako-btn--vip:hover {
    transform: translateY(-3px) scale(1.02);
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border-color: rgba(255, 215, 0, 0.8);
    box-shadow: 0 10px 25px rgba(255, 215, 0, 0.2), inset 0 1px 0 rgba(255, 215, 0, 0.3);
    color: #FFF; 
}

/* --- STATYSTYKI --- */
.kako-stats {
    display: flex;
    align-items: center;
    gap: 4vw;
    padding-top: 2vw;
    border-top: 0.1vw solid #2C2C2C;
}

.kako-stats__item {
    display: flex;
    flex-direction: column;
}

.kako-stats__number {
    font-size: 3vw;
    font-weight: 800;
    color: var(--text-white);
    line-height: 1;
}

.kako-stats__label {
    font-size: 0.7vw;
    color: var(--text-grey);
    font-weight: 700;
    letter-spacing: 0.2vw;
    text-transform: uppercase;
    margin-top: 0.5vw;
}

.kako-stats__separator {
    width: 0.1vw;
    height: 3vw;
    background-color: #2C2C2C;
}

/* --- ANIMACJE --- */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes glitch {
    0% { transform: translate(0); }
    2% { transform: translate(-0.1vw, 0.1vw); }
    4% { transform: translate(-0.1vw, -0.1vw); }
    6% { transform: translate(0.1vw, 0.1vw); }
    8% { transform: translate(0.1vw, -0.1vw); }
    10% { transform: translate(0); }
    100% { transform: translate(0); }
}

@keyframes button-pulse-red {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(230, 0, 0, 0.7); }
    70% { transform: scale(1.03); box-shadow: 0 0 0 15px rgba(230, 0, 0, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(230, 0, 0, 0); }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
}

.fade-in {
    opacity: 0;
    transform: translateY(2vw);
    animation: fadeInUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.delay-1 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.4s; }
.delay-4 { animation-delay: 0.6s; }

@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile Fix */
@media (max-width: 1200px) {
    .kako-hero__title { font-size: 8vw; }
    .kako-hero__description { max-width: 70vw; font-size: 1.5vw; }
    .kako-btn { padding: 1.2vw 2.5vw; font-size: 1.3vw; }
    .kako-stats { gap: 5vw; }
    .kako-stats__number { font-size: 4vw; }
    .kako-stats__label { font-size: 1vw; }
}

@media (max-width: 900px) {
    .kako-hero { height: auto; min-height: 80vh; padding: 120px 0 60px; }
    .kako-hero__container { width: 90vw; }
    .kako-badge { padding: 10px 25px; border-radius: 50px; margin-bottom: 30px; border: 1px solid #2C2C2C; }
    .kako-badge__dot { width: 8px; height: 8px; }
    .kako-badge__text { font-size: 12px; letter-spacing: 1px; }
    .kako-hero__title { font-size: 12vw; line-height: 1; margin-bottom: 25px; }
    .kako-hero__description { font-size: 16px; max-width: 95vw; min-height: 50px; margin-bottom: 40px; }
    .kako-actions { flex-direction: column; width: 100%; max-width: 400px; margin: 0 auto 50px auto; gap: 15px; }
    .kako-btn { width: 100%; padding: 18px 20px; font-size: 15px; border-radius: 12px; justify-content: center; }
    .kako-btn__icon { width: 20px; height: 20px; }
    .kako-stats { width: 100%; justify-content: center; gap: 30px; padding-top: 30px; }
    .kako-stats__number { font-size: 32px; }
    .kako-stats__label { font-size: 11px; letter-spacing: 2px; }
    .kako-stats__separator { display: none; }
}

@media (max-width: 480px) {
    .kako-hero { padding: 100px 0 40px; }
    .kako-badge { padding: 8px 20px; margin-bottom: 20px; }
    .kako-badge__text { font-size: 10px; }
    .kako-hero__title { font-size: 14.5vw; } 
    .kako-hero__description { font-size: 14px; line-height: 1.5; min-height: 60px; }
    .kako-actions { gap: 12px; max-width: 100%; padding: 0 10px; }
    .kako-btn { padding: 15px 10px; font-size: 14px; }
    .kako-stats { gap: 20px; flex-wrap: wrap; } 
    .kako-stats__number { font-size: 28px; }
    .kako-stats__label { font-size: 10px; }
}
/* --- H1: wordmark + linia z frazą ---
   H1 brzmiał wcześniej po prostu "KAKOFIND.NET", czyli nie niósł żadnego
   sygnału tematycznego. Znak firmowy zostaje, pod nim doszła linia z frazą. */
.kako-hero__wordmark {
    display: block;
}
.kako-hero__kicker {
    display: block;
    margin-top: 0.8vw;
    font-size: 1.45vw;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--text-grey);
}
@media (max-width: 900px) {
    .kako-hero__kicker { font-size: 2.6vw; margin-top: 2vw; }
}
@media (max-width: 600px) {
    .kako-hero__kicker { font-size: 3.6vw; margin-top: 3vw; }
}


/* ===== css/porownywarka-index-i-comprasion/index.css ===== */
/* Poppins leci z wlasnej domeny (css/shared/fonts.css). Wczesniej byl tu @import do Google Fonts,
   ktory szeregowal pobieranie i blokowal renderowanie. */

/* === Notatka o Arkuszu #2 nad sekcją wyboru agenta === */
.arkusz2-note-section {
    max-width: 1200px;
    margin: 30px auto 0;
    padding: 0 24px;
}
.arkusz2-note-card {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 20px 26px;
    background: linear-gradient(135deg, rgba(31,142,92,0.10) 0%, rgba(31,142,92,0.02) 100%);
    border: 1px solid rgba(31,142,92,0.35);
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.arkusz2-note-card::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(31,142,92,0.25) 0%, transparent 65%);
    pointer-events: none;
}
.arkusz2-note-card:hover {
    transform: translateY(-3px);
    border-color: rgba(31,142,92,0.7);
    box-shadow: 0 18px 40px rgba(0,0,0,0.5), 0 0 30px rgba(31,142,92,0.18);
}
.a2n-icon {
    position: relative;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1F8E5C, #14633F);
    display: grid;
    place-items: center;
    box-shadow: 0 8px 20px rgba(31,142,92,0.35), inset 0 0 10px rgba(255,255,255,0.08);
}
.a2n-icon i { font-size: 1.7rem; color: #fff; }
.a2n-icon-badge {
    position: absolute;
    top: -6px; right: -6px;
    background: #FFD700;
    color: #1a1a1a;
    font-size: 0.62rem;
    font-weight: 900;
    padding: 3px 7px;
    border-radius: 50px;
    border: 2px solid #14633F;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.a2n-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.a2n-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #1F8E5C;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.a2n-title {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.25;
}
.a2n-desc {
    font-size: 0.86rem;
    color: #aaa;
    margin: 0;
    line-height: 1.5;
}
.a2n-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(31,142,92,0.4);
    border-radius: 50px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    transition: all .2s ease;
    position: relative;
    z-index: 1;
}
.arkusz2-note-card:hover .a2n-cta {
    background: linear-gradient(135deg, #1F8E5C, #14633F);
    border-color: #1F8E5C;
}
@media (max-width: 760px) {
    .arkusz2-note-card { flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px; }
    .a2n-cta { width: 100%; justify-content: center; }
    .a2n-icon { width: 52px; height: 52px; }
    .a2n-icon i { font-size: 1.35rem; }
}

/* === Glowny / Oficjalny Arkusz - akcent czerwono-zloty, promowany najmocniej === */
.arkusz-main-section {
    margin-top: 40px;
}
.arkusz-main-note-card {
    background: linear-gradient(135deg, rgba(230, 0, 0, 0.14) 0%, rgba(255, 196, 0, 0.06) 100%);
    border: 1px solid rgba(255, 196, 0, 0.45);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 0 28px rgba(255, 196, 0, 0.08);
}
.arkusz-main-note-card::before {
    background: radial-gradient(circle, rgba(255, 196, 0, 0.28) 0%, transparent 65%);
}
.arkusz-main-note-card:hover {
    border-color: rgba(255, 196, 0, 0.8);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55), 0 0 40px rgba(255, 196, 0, 0.22);
}
.a2n-icon--main {
    background: linear-gradient(135deg, #E60000, #8a0000);
    box-shadow: 0 8px 20px rgba(230, 0, 0, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.1);
}
.a2n-icon-badge--main {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #2a1a00;
    border-color: #8a0000;
    padding: 4px 6px;
    font-size: 0.7rem;
}
.a2n-icon-badge--main i { font-size: 0.7rem; }
.a2n-eyebrow--main {
    color: #FFD700;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.12), transparent);
    padding: 3px 10px 3px 8px;
    border-radius: 6px;
    border-left: 2px solid #FFD700;
}
.a2n-cta--main {
    background: linear-gradient(135deg, #E60000, #b30000);
    border-color: rgba(255, 196, 0, 0.5);
    color: #fff;
}
.arkusz-main-note-card:hover .a2n-cta--main {
    background: linear-gradient(135deg, #ff1a1a, #cc0000);
    border-color: #FFD700;
    box-shadow: 0 6px 18px rgba(230, 0, 0, 0.4);
}

/* Zmienne Palety (Dla pewności, że mamy to samo) */
:root {
    --bg-body: #050505; 
    --bg-card: #121212; 
    --bg-zebra: #1E1E1E; 
    --border-color: #2C2C2C; 
    --text-muted: #808080; 
    --btn-primary: #E60000; 
    --btn-hover: #FF1A1A; 
    --bg-active: #8A0000; 
    --color-error: #FF4081; 
    --text-main: #FFFFFF;
    --text-green: #00E676;
    --text-yellow: #FFC107;
    --font-main: 'Poppins', sans-serif;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-body);
    color: var(--text-main);
}

/* Utilities */
.text-highlight { color: var(--btn-primary); }
.text-green { color: var(--text-green); }

/* --- Przyciski (Globalne + Hero) --- */
.btn-primary {
    background-color: var(--btn-primary);
    color: var(--text-main);
    border: none;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--btn-hover);
    transform: translateY(-2px);
}

.btn-primary--large {
    padding: 16px 36px;
    font-size: 1.15rem;
}

.btn-glow {
    box-shadow: 0 4px 20px rgba(230, 0, 0, 0.3);
}

.btn-glow:hover {
    box-shadow: 0 6px 30px rgba(255, 26, 26, 0.5);
}

/* Animacja ikony wagi w przycisku */
.hero-btn__icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Sprężysty efekt */
}

.hero-btn:hover .hero-btn__icon {
    transform: rotate(-15deg) scale(1.2);
}

/* --- SEKCJA HERO (Index) --- */
.porownywarka-hero {
    padding: 100px 20px;
    background: radial-gradient(circle at 70% 30%, rgba(138, 0, 0, 0.1) 0%, var(--bg-body) 70%);
    overflow: hidden; /* Dla efektów wejścia */
}

.porownywarka-hero__container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Lewa kolumna - Treść */
.porownywarka-hero__logo-wrapper {
    margin-bottom: 30px;
}

.porownywarka-hero__logo {
    max-width: 80px;
    height: auto;
    
}

.porownywarka-hero__badge {
    display: inline-block;
    background-color: rgba(230, 0, 0, 0.1);
    color: var(--btn-primary);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 25px;
    border: 1px solid rgba(230, 0, 0, 0.3);
}

.porownywarka-hero__title {
    font-size: 3.2rem;
    line-height: 1.15;
    margin-bottom: 25px;
    font-weight: 700;
}

.porownywarka-hero__desc {
    color: var(--text-muted);
    font-size: 1.15rem;
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 90%;
}

.porownywarka-hero__desc strong {
    color: var(--text-main);
    font-weight: 600;
}

.porownywarka-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.porownywarka-hero__note {
    font-size: 0.9rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- PRAWA KOLUMNA - ABSTRAKCYJNY DASHBOARD (Zamiast grafiki) --- */
.porownywarka-hero__visual {
    display: flex;
    justify-content: center;
    perspective: 1000px; /* Dla lekkiego efektu 3D */
}

.abstract-dashboard {
    width: 100%;
    max-width: 500px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(230, 0, 0, 0.05);
    transform: rotateY(-5deg) rotateX(5deg); /* Lekki obrót 3D */
    transition: transform 0.5s ease;
}

.abstract-dashboard:hover {
     transform: rotateY(0deg) rotateX(0deg); /* Wyprostowanie po najechaniu */
}

.abstract-dashboard__header {
    display: flex;
    gap: 8px;
    margin-bottom: 30px;
}

.bulb { width: 10px; height: 10px; border-radius: 50%; }
.bulb--red { background-color: var(--btn-primary); box-shadow: 0 0 10px var(--btn-primary); }
.bulb--grey { background-color: var(--border-color); }

.data-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 12px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
}

.data-row--highlight {
    background-color: rgba(230, 0, 0, 0.1);
    border-color: var(--btn-primary);
}

.data-row__label { font-weight: 700; font-size: 0.9rem; width: 80px; }

.data-row__bars {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 20px;
}

.bar { height: 6px; border-radius: 3px; opacity: 0.8; }
.bar--long { width: 90%; }
.bar--medium { width: 60%; }
.bar--short { width: 35%; }
.bar--green { background-color: var(--text-green); }
.bar--yellow { background-color: var(--text-yellow); }
.bar--red { background-color: var(--color-error); }

.data-row__score { font-weight: 700; font-size: 0.9rem; width: 60px; text-align: right; }

.abstract-dashboard__footer {
    margin-top: 30px;
    height: 50px;
    overflow: hidden;
}

.trend-line path {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: drawLine 3s ease-out forwards infinite;
}

/* Animacje Dashboardu */
@keyframes drawLine {
    to { stroke-dashoffset: 0; }
}

.pulse-animation {
    animation: gentlePulse 3s infinite ease-in-out;
}

@keyframes gentlePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* --- ANIMACJA SCROLL REVEAL (Wejście sekcji) --- */

/* Stan początkowy (ukryty) */
.js-scroll-trigger {
    opacity: 0;
    transform: translateY(50px) scale(0.98);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Stan końcowy (widoczny) - dodawany przez JS */
.js-scroll-trigger.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* RWD */
/* RWD */
@media (max-width: 992px) {
    .porownywarka-hero__container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    .porownywarka-hero__title { font-size: 2.5rem; }
    .porownywarka-hero__actions { align-items: center; }
    .porownywarka-hero__visual { order: -1; /* Dashboard nad tekstem na mobile */ }
    
    /* === DODANE WYŚRODKOWANIE OPISU === */
    .porownywarka-hero__desc { 
        margin: 0 auto 40px auto; /* auto po bokach idealnie go centruje */
        text-align: center; 
    }

    .abstract-dashboard { transform: none; max-width: 100%; }
}

/* Możemy dodać jeszcze próg dla mniejszych telefonów (opcjonalnie) */
@media (max-width: 480px) {
    .porownywarka-hero__title { font-size: 2rem; }
    .porownywarka-hero__desc { font-size: 1rem; max-width: 100%; }
}

/* ===== css/index/footer.css ===== */
:root {
    --c1: #E60000;
    --c2: #FF1A1A;
    --c3: #8A0000;
    --pink: #FF4081;
}

body {
    background-color: #050505;
    font-family: 'Poppins', sans-serif;
    margin: 0;
}

a{

    text-decoration: none;
}

.custom-footer {
    padding: 5vw 2vw;
    display: flex;
    justify-content: center;
    /* Efekt poświaty tła w rogach */
    background: radial-gradient(circle at 0% 100%, rgba(230, 0, 0, 0.15) 0%, transparent 40%),
                radial-gradient(circle at 100% 0%, rgba(255, 64, 129, 0.1) 0%, transparent 40%);
}

.footer-container {
    display: flex;
    gap: 8vw;
    width: 90vw;
    justify-content: center;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.info-column {
    align-items: flex-start;
    text-align: left;
}

.footer-title {
    font-size: 1.2vw;
    font-weight: 800;
    letter-spacing: 0.1vw;
    margin-bottom: 1.5vw;
    padding-bottom: 0.4vw;
    border-bottom: 0.2vw solid var(--pink);
    text-transform: uppercase;
}

/* Logo jako zdjęcie */
.user-logo img {
    width: 6vw;
    height: 6vw;
    object-fit: cover;
    border-radius: 1vw;
    margin-bottom: 1.5vw;
    border: 0.15vw solid var(--c1);
    box-shadow: 0 0 1.5vw rgba(230, 0, 0, 0.4);
}

/* Sekcja ikon społecznościowych */
.social-icons {
    display: flex;
    gap: 15px; /* Stały odstęp zamiast vw dla stabilności */
    margin-bottom: 25px;
    justify-content: center; /* Kluczowe dla 2 ikon */
    width: 100%;
}

.social-icons a {
    color: white;
    font-size: 24px; /* Stały rozmiar */
    background: rgba(255, 255, 255, 0.05);
    width: 50px;  /* Stała szerokość */
    height: 50px; /* Stała wysokość */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
    flex-shrink: 0; /* Nie pozwala ikonom się gnieść */
}

.social-icons a:hover {
    background: var(--c1);
    box-shadow: 0 0 1vw var(--c1);
}

/* Przycisk Discord */
.discord-button {
    background: linear-gradient(135deg, var(--c3), var(--c1));
    color: white;
    text-decoration: none;
    padding: 0.8vw 2.5vw;
    border-radius: 2vw;
    font-size: 1vw;
    font-weight: bold;
    box-shadow: 0 0.3vw 1.5vw rgba(230, 0, 0, 0.5);
    transition: 0.3s;
}

.discord-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 2vw var(--pink);
}

/* Teksty */
.copyright {
    font-size: 0.9vw;
    color: #666;
    margin-bottom: 1vw;
}

.disclaimer {
    font-size: 0.85vw;
    color: #aaa;
    max-width: 25vw;
    line-height: 1.5;
    margin-bottom: 0.5vw;
}

.footer-legal {
    font-size: 0.85vw;
    color: var(--pink);
    margin-top: 1vw;
    transition: 0.3s ease;
}

.footer-legal:hover {
    color: white;
    text-shadow: 0 0 0.8vw var(--pink);
}
/* ==========================================
   NOWE PRZYCISKI I LINKI W STOPCE
   ========================================== */

/* Kontener na przyciski z lewej strony */
.footer-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

/* Wymuszenie ikonek w przycisku Discorda */
.discord-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

/* Nowy przycisk Support (Styl outline/secondary) */
.support-button {
    background-color: transparent;
    color: #cccccc;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.support-button:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: #E60000;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(230, 0, 0, 0.2);
}

.support-button i {
    color: #E60000;
}

/* Kontener na linki po prawej stronie */
.footer-links-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Delikatna linia oddzielająca od disclaimerów */
}

/* Styl pojedynczego linku (np. FAQ) */
.footer-link {
    color: #aaaaaa;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
}

.footer-link i {
    font-size: 1.1rem;
    color: #666;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #ffffff;
    transform: translateX(5px); /* Subtelny wjazd w prawo po najechaniu */
}

.footer-link:hover i {
    color: #E60000;
}


/* ==========================================
   MOBILE RESPONSIVENESS (RWD) - FOOTER
   ========================================== */

/* 1. TABLETY POZIOMO (do 1024px) */
@media (max-width: 1024px) {
    .custom-footer {
        padding: 60px 20px; /* Przejście z vw na stałe piksele */
    }
    
    .footer-container {
        gap: 40px;
        width: 95vw;
    }
    
    .footer-title {
        font-size: 18px;
        margin-bottom: 20px;
        padding-bottom: 8px;
        border-bottom-width: 2px;
    }
    
    .user-logo img {
        width: 80px;
        height: 80px;
        border-width: 2px;
        border-radius: 15px;
    }
    
    .social-icons a {
        font-size: 20px;
        padding: 12px;
        width: 45px;
        height: 45px;
    }
    
    .discord-button {
        font-size: 14px;
        padding: 12px 24px;
        border-radius: 30px;
    }
    
    .copyright {
        font-size: 14px;
        margin-bottom: 15px;
    }
    
    .disclaimer {
        font-size: 12px;
        max-width: 45vw; /* Zwiększamy obszar tekstu na tablecie */
    }
}

/* 2. TABLETY PIONOWO I TELEFONY (do 768px) */
@media (max-width: 768px) {
   .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 40px;
    }

    .social-icons {
        margin-bottom: 20px;
    }

    /* Ustawiamy stałą szerokość dla przycisków, żeby nie latały na boki */
    .footer-action-buttons {
        width: 100%;
        max-width: 280px; 
        margin: 0 auto;
    }

    .discord-button, .support-button {
        width: 100%; /* Oba przyciski będą tej samej szerokości */
        padding: 14px;
        font-size: 14px;
        box-sizing: border-box;
    }
}

/* 3. MAŁE TELEFONY (do 480px) */
@media (max-width: 480px) {
    .custom-footer {
        padding: 50px 15px;
    }
    
  .footer-title {
        font-size: 16px;
        margin-bottom: 25px;
    }
    
    .user-logo img {
        width: 70px;
        height: 70px;
    }
    
    .social-icons {
        gap: 15px;
    }
    
   .social-icons a {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
    
    /* Przyciski Discord i Support na pełną szerokość bloku */
    .discord-button, .support-button {
        width: 100%; 
        padding: 14px 20px;
        font-size: 14px;
        justify-content: center;
    }
    
    .footer-link {
        font-size: 14px;
    }
}
/* ==========================================
   NASZA SIEĆ - naglowek grupy linkow do
   siostrzanych domen w stopce (blok
   KF-NETWORK w kazdej podstronie).
   ========================================== */
.footer-net-title {
    margin: 14px 0 2px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6f6f6f;
}

/* ==========================================
   PORADNIKI + QC FINDER DLA AGENTOW (blok
   KF-GUIDES w stopce kazdej podstrony).
   ========================================== */
.footer-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
}
.footer-inline a {
    color: #aaaaaa;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-inline a:hover {
    color: #ffffff;
}


/* ===== css/index/linkkonwerter.css ===== */
/* --- STYLIZACJA SEKCJI TEASERA KONWERTERA --- */
#link-konwerter-teaser {
    background-color: #050505;
    padding: 130px 20px;
    position: relative;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
    border-top: 1px solid #1E1E1E;
}

/* Znak wodny w tle */
.teaser-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 15rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.02);
    z-index: 0;
    pointer-events: none;
    user-select: none;
    letter-spacing: 10px;
}

.teaser-bg-glow {
    position: absolute;
    top: 40%;
    left: 20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #8A0000 0%, transparent 50%);
    filter: blur(90px);
    z-index: 1;
    opacity: 0.3;
    animation: pulseTeaser 8s infinite alternate ease-in-out;
}

@keyframes pulseTeaser {
    0% { transform: translateY(-30%) scale(0.9); opacity: 0.2; }
    100% { transform: translateY(-50%) scale(1.1); opacity: 0.4; }
}

.teaser-container {
    max-width: 1250px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    position: relative;
    z-index: 2;
}

/* --- LEWA KOLUMNA: WIZUALIZACJA --- */
.teaser-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    perspective: 1200px;
}

.conversion-box {
    background-color: #121212;
    border: 1px solid #2C2C2C;
    border-radius: 24px;
    padding: 30px;
    width: 100%;
    max-width: 450px;
    box-shadow: -20px 25px 60px rgba(0,0,0,0.8);
    transform: rotateY(12deg) rotateX(4deg);
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s ease;
}

.conversion-box:hover {
    transform: rotateY(0deg) rotateX(0deg) scale(1.02);
    border-color: #E60000;
}

.conv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #1E1E1E;
    padding-bottom: 15px;
}

.conv-dots { display: flex; gap: 6px; }
.conv-dots span { width: 12px; height: 12px; border-radius: 50%; }
.conv-dots .r { background-color: #FF4081; }
.conv-dots .y { background-color: #f1c40f; }
.conv-dots .g { background-color: #2ecc71; }

.conv-status {
    font-size: 0.8rem;
    color: #808080;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}
.conv-status i { color: #E60000; animation: pulseSignal 2s infinite; }

@keyframes pulseSignal { 
    0% { opacity: 1; transform: scale(1); } 
    50% { opacity: 0.3; transform: scale(1.2); } 
    100% { opacity: 1; transform: scale(1); } 
}

/* Wiersze agentów */
.agent-row {
    background-color: #1E1E1E;
    border: 1px solid #2C2C2C;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    overflow: hidden;
}

.agent-logo-wrapper {
    width: 48px;
    height: 48px;
    background-color: #050505;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border: 1px solid #2C2C2C;
    z-index: 2;
}

.agent-logo-wrapper img { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; }

.agent-link-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 2;
}

.link-label { font-size: 0.75rem; color: #808080; font-weight: 600; margin-bottom: 4px; }
.link-value { font-size: 0.9rem; color: #ffffff; font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Animacje wierszy w karcie */
.source-anim-container { transition: opacity 0.4s ease, transform 0.4s ease; }
.conv-arrow {
    display: flex; justify-content: center; align-items: center;
    height: 55px; color: #E60000; font-size: 1.6rem;
}
.conv-arrow i { animation: arrowSlide 2s infinite ease-in-out; }

@keyframes arrowSlide {
    0% { transform: translateY(-8px); opacity: 0.4; }
    50% { transform: translateY(8px); opacity: 1; }
    100% { transform: translateY(-8px); opacity: 0.4; }
}

/* Wyróżniony Kakobuy */
.target-row {
    background: linear-gradient(135deg, rgba(230,0,0,0.12) 0%, #161616 100%);
    border-color: rgba(230, 0, 0, 0.4);
    box-shadow: 0 0 20px rgba(230, 0, 0, 0.1) inset;
}
.target-row .link-value { color: #2ecc71; font-weight: 600; }
.kakobuy-glow-border { border-color: #E60000; box-shadow: 0 0 10px rgba(230,0,0,0.3); }

/* Skaner */
.scanner-line {
    position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(230, 0, 0, 0.15), transparent);
    transform: skewX(-20deg); animation: scan 3s infinite; z-index: 1;
}
@keyframes scan { 0% { left: -100%; } 100% { left: 200%; } }


/* --- PRAWA KOLUMNA: TEKST --- */
.teaser-content {
    flex: 1;
    max-width: 580px;
}

.teaser-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #121212;
    border: 1px solid #2C2C2C;
    color: #FF1A1A;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.teaser-title {
    font-size: 3.2rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 25px;
}

.title-overline {
    display: block;
    font-size: 1.2rem;
    color: #808080;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 500;
    margin-bottom: 10px;
}

.highlight-gradient {
    background: linear-gradient(90deg, #E60000, #FF4081);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
}
.highlight-gradient::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #E60000;
    border-radius: 2px;
}

.teaser-description {
    font-size: 1.15rem;
    color: #808080;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 40px;
}

.teaser-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.teaser-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #E60000;
    color: #ffffff;
    padding: 18px 36px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 25px rgba(230, 0, 0, 0.3);
    text-transform: uppercase;
}

.teaser-cta-btn:hover {
    background-color: #FF1A1A;
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 35px rgba(255, 26, 26, 0.5);
}

.teaser-note {
    font-size: 0.85rem;
    color: #808080;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}
.teaser-note i { color: #2ecc71; }


/* =========================================
   ANIMACJE POJAWIANIA SIĘ PRZY SCROLLOWANIU
   ========================================= */

.scroll-anim {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: opacity, transform;
}

/* Stan początkowy */
.scroll-left { transform: translateX(-80px); }
.scroll-right { transform: translateX(80px); }
.scroll-up { transform: translateY(50px); }
.scroll-fade { transform: translate(-50%, -50%) scale(0.85); /* Ważne: utrzymuje środek dla znaku wodnego */ }

/* Stan po wjechaniu na ekran */
.scroll-anim.is-in-view {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Wypośrodkowany znak wodny - override na is-in-view */
.teaser-watermark.is-in-view {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.02; /* Przezroczystość znaku wodnego */
}

/* Opóźnienia kaskadowe */
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.30s; }
.delay-3 { transition-delay: 0.45s; }


/* --- RWD --- */
@media (max-width: 1024px) {
    .teaser-container {
        flex-direction: column;
        text-align: center;
    }
    .teaser-content {
        order: -1;
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 100%;
    }
    .teaser-actions { flex-direction: column; }
    .conversion-box { transform: none; }
    .teaser-watermark { font-size: 8rem; }
    .highlight-gradient:after { display: none;}
    
    /* Na telefonach wyłączamy kierunki i dajemy proste "scroll-up" dla płynności */
    .scroll-left, .scroll-right { transform: translateY(40px); }
}

/* ===== css/index/wheel.css ===== */
/* ==========================================
   KAKOBUY WHEEL OF FORTUNE - PREMIUM REDESIGN
   Logika (prize'y, szanse) nietknięte. Tylko CSS.
   ========================================== */

/* ==========================================
   1. FAB + Tooltip
   ========================================== */
.kako-wheel-tooltip {
    position: absolute;
    right: 100px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #E60000, #8A0000);
    color: white;
    padding: 11px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 8px 22px rgba(230, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
}

.kako-wheel-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -8px;
    transform: translateY(-50%);
    border-width: 8px 0 8px 8px;
    border-style: solid;
    border-color: transparent transparent transparent #E60000;
}

.kako-wheel-tooltip.show-tooltip {
    opacity: 1;
    visibility: visible;
    animation: pulseTooltip 2.2s infinite alternate;
}

@keyframes pulseTooltip {
    0% { transform: translateY(-50%) scale(1); }
    100% { transform: translateY(-50%) scale(1.06); box-shadow: 0 12px 30px rgba(230, 0, 0, 0.65); }
}

@media (max-width: 400px) {
    .kako-wheel-tooltip { display: none; }
}

.kako-wheel-fab {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 88px;
    height: 88px;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 9990;
    animation: premiumFloat 3.2s ease-in-out infinite;
    filter: drop-shadow(0 8px 18px rgba(230, 0, 0, 0.35));
    transition: filter .35s ease;
}
.kako-wheel-fab:hover {
    filter: drop-shadow(0 12px 28px rgba(255, 26, 26, 0.6));
}

.wheel-svg-icon {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 12px rgba(230, 0, 0, 0.75));
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rotating-wheel-part {
    animation: spinWheel 8s linear infinite;
    transform-origin: center;
}

.kako-wheel-fab:hover .wheel-svg-icon {
    transform: scale(1.18);
    filter: drop-shadow(0 0 28px rgba(255, 20, 20, 1));
}
.kako-wheel-fab:hover .rotating-wheel-part {
    animation: spinWheel 1.8s linear infinite;
}

@keyframes spinWheel {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes premiumFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

/* ==========================================
   2. MODAL OVERLAY - GLASSMORPHISM PREMIUM
   ========================================== */
.kako-wheel-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(ellipse at center, rgba(230,0,0,0.15) 0%, rgba(0,0,0,0.85) 70%);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    z-index: 100000;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden;
    transition: opacity .4s ease, visibility 0s linear .4s;
    padding: 20px;
}

.kako-wheel-overlay.show {
    opacity: 1; visibility: visible;
    transition: opacity .4s ease;
}

.kako-wheel-box {
    background: linear-gradient(180deg, rgba(20, 15, 15, 0.92) 0%, rgba(10, 5, 5, 0.95) 100%);
    border: 1px solid rgba(230, 0, 0, 0.18);
    width: 95%;
    max-width: 560px;
    border-radius: 32px;
    padding: 2.5rem 2rem 2rem;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.85),
        0 0 60px rgba(230, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 60px rgba(230, 0, 0, 0.04);
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    transform: scale(0.92) translateY(30px);
    opacity: 0;
    transition: all 0.55s cubic-bezier(0.18, 0.9, 0.32, 1.2);
    overflow: hidden;
}
/* Subtelny pattern w tle */
.kako-wheel-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.03) 1px, transparent 0);
    background-size: 22px 22px;
    pointer-events: none;
    mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}

.kako-wheel-overlay.show .kako-wheel-box {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Close button */
.kako-wheel-close {
    position: absolute; top: 18px; right: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    width: 38px; height: 38px; border-radius: 50%;
    color: #aaa; font-size: 1rem; cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    transition: all 0.3s ease;
    z-index: 5;
}

.kako-wheel-close:hover {
    background: #E60000;
    border-color: #FF1A1A;
    color: white;
    transform: rotate(90deg);
    box-shadow: 0 6px 16px rgba(230, 0, 0, 0.4);
}

/* Header */
.kako-wheel-header { text-align: center; margin-bottom: 2rem; position: relative; z-index: 2; }
.kako-wheel-header h2 {
    color: #ffffff;
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    margin: 0 0 0.6rem 0;
    font-weight: 800;
    letter-spacing: 0.5px;
    background: linear-gradient(120deg, #fff 0%, #FFD7D7 50%, #fff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.kako-wheel-header p {
    color: #b0a8a8; font-size: 0.92rem; margin: 0 auto;
    max-width: 88%; line-height: 1.55;
}

/* ==========================================
   3. WIN ANIMATION
   ========================================== */
#wheelDesc strong {
    display: inline-block;
    color: #FF1A1A !important;
    font-size: 1.55rem !important;
    font-weight: 900;
    text-shadow: 0 0 25px rgba(230, 0, 0, 0.7), 0 0 50px rgba(230, 0, 0, 0.3);
    animation: epicWinPop 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    letter-spacing: 0.5px;
}

@keyframes epicWinPop {
    0% { transform: scale(0.3) translateY(20px); opacity: 0; filter: brightness(2.2); }
    50% { transform: scale(1.25) translateY(-6px); filter: brightness(1.6); }
    100% { transform: scale(1) translateY(0); filter: brightness(1); opacity: 1; }
}

/* ==========================================
   4. THE WHEEL — premium look
   ========================================== */
.kako-wheel-container {
    position: relative;
    width: 360px;
    height: 360px;
    margin-bottom: 2.2rem;
    border-radius: 50%;
    z-index: 2;
}

/* Glowing aura - więcej warstw dla głębi */
.kako-wheel-container::before {
    content: '';
    position: absolute;
    top: -20px; left: -20px; right: -20px; bottom: -20px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(230,0,0,0.05) 0%,
        rgba(255,40,40,0.45) 25%,
        rgba(230,0,0,0.05) 50%,
        rgba(255,40,40,0.45) 75%,
        rgba(230,0,0,0.05) 100%);
    animation: spinWheel 5s linear infinite;
    z-index: -1;
    filter: blur(20px);
    opacity: 0.85;
}
/* Drugi pierścień blasku - powolny w przeciwną stronę */
.kako-wheel-container::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: conic-gradient(from 180deg, transparent, rgba(255,215,0,0.18), transparent, rgba(255,40,40,0.2), transparent);
    animation: spinWheelReverse 8s linear infinite;
    z-index: -1;
    filter: blur(8px);
}
@keyframes spinWheelReverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

/* Arrow — premium pointer */
.kako-wheel-arrow {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 42px;
    color: #FF1A1A;
    z-index: 20;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.7)) drop-shadow(0 0 8px rgba(255,26,26,0.6));
    animation: arrowBop 2s infinite ease-in-out;
    text-shadow: 0 0 14px rgba(230, 0, 0, 0.6);
}

@keyframes arrowBop {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(4px); }
}

/* Wheel core */
.kako-wheel {
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 8px solid #1a1010;
    box-shadow:
        0 20px 50px rgba(0,0,0,0.7),
        inset 0 0 30px rgba(0,0,0,0.85),
        inset 0 0 0 2px rgba(230, 0, 0, 0.25),
        0 0 60px rgba(230, 0, 0, 0.18);
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at center, #1a0808 0%, #0a0303 100%);
    transition: transform 6.5s cubic-bezier(0.15, 0.85, 0.15, 1);
}

/* Central hub - złoty środek koła */
.kako-wheel::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFE066 0%, #FFB800 40%, #B8860B 100%);
    box-shadow:
        0 0 20px rgba(255,184,0,0.6),
        inset 0 -3px 6px rgba(0,0,0,0.35),
        inset 0 3px 6px rgba(255,255,255,0.45);
    z-index: 15;
    pointer-events: none;
}

.wheel-slice span {
    position: absolute;
    transform: rotate(18deg) translateY(-115px);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-shadow: 0 1px 4px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,0.8);
    text-align: center;
    width: 80px;
}

@media (max-width: 500px) {
    .kako-wheel-container { width: 280px; height: 280px; }
    .kako-wheel-header h2 { font-size: 1.55rem; }
    .wheel-slice span { transform: rotate(18deg) translateY(-85px); font-size: 0.72rem; }
    .kako-wheel::after { width: 42px; height: 42px; }
    .kako-wheel-arrow { font-size: 36px; top: -14px; }
    .kako-wheel-box { padding: 2rem 1.2rem 1.5rem; border-radius: 24px; }
}

/* ==========================================
   5. SPIN BUTTON + TIMER
   ========================================== */
.wheel-spin-btn {
    width: 88%;
    padding: 18px 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, #E60000 0%, #B30000 100%);
    color: white;
    border: 1px solid #FF1A1A;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 2;
    box-shadow:
        0 10px 26px rgba(230, 0, 0, 0.35),
        inset 0 1px 0 rgba(255,255,255,0.18);
    transition: all 0.3s cubic-bezier(0.18, 0.9, 0.32, 1.2);
    font-family: 'Poppins', sans-serif;
}

.wheel-spin-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -120%; width: 80%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
    transform: skewX(-20deg);
    transition: left 0.7s ease;
}

.wheel-spin-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #FF1A1A 0%, #E60000 100%);
    box-shadow:
        0 14px 32px rgba(230, 0, 0, 0.55),
        inset 0 1px 0 rgba(255,255,255,0.25);
}

.wheel-spin-btn:hover:not(:disabled)::before {
    left: 120%;
}

.wheel-spin-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(230, 0, 0, 0.3);
}

.wheel-spin-btn:disabled {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    color: #666;
    border-color: rgba(255,255,255,0.05);
    box-shadow: none;
    text-align: center;
    cursor: not-allowed;
}

/* Timer */
.wheel-timer {
    color: #FF6B6B;
    font-size: 0.88rem;
    margin-top: 1.4rem;
    font-weight: 600;
    min-height: 20px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: rgba(230, 0, 0, 0.08);
    border: 1px solid rgba(230, 0, 0, 0.18);
    padding: 9px 22px;
    border-radius: 12px;
    margin-left: auto; margin-right: auto;
    max-width: 92%; line-height: 1.45;
    letter-spacing: 0.3px;
}

/* ==========================================
   MOBILE RESPONSIVENESS - FAB
   ========================================== */
@media (max-width: 1024px) {
    .kako-wheel-fab { width: 72px; height: 72px; bottom: 25px; right: 25px; }
}

@media (max-width: 768px) {
    .kako-wheel-fab { width: 58px; height: 58px; bottom: 20px; right: 15px; }
    .kako-wheel-tooltip { display: none !important; }
    @keyframes premiumFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }
    .kako-wheel-fab:hover .wheel-svg-icon {
        transform: scale(1);
        filter: drop-shadow(0 0 10px rgba(230, 0, 0, 0.8));
    }
}

@media (max-width: 480px) {
    .kako-wheel-fab { width: 50px; height: 50px; bottom: 14px; right: 10px; }
}


/* ===== css/index/oszacujpake.css ===== */
/* ==========================================================================
   OSZACUJ PAKĘ MINIMAL - INDEX (BEM)
   ========================================================================== */
.oszacuj-pake-minimal {
    background-color: #050505;
    padding: 80px 20px; /* Znacznie mniejszy padding niż w innych sekcjach */
    position: relative;
    border-top: 1px solid #1a1a1a;
    display: flex;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
}

.op-minimal__container {
    background: radial-gradient(ellipse at top, #161616 0%, #0a0a0a 100%);
    border: 1px solid #2C2C2C;
    border-radius: 30px;
    padding: 60px 40px;
    max-width: 900px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    position: relative;
}

/* --- NAGŁÓWEK --- */
.op-minimal__badge {
    display: inline-block;
    background: rgba(230, 0, 0, 0.1);
    color: #E60000;
    border: 1px solid rgba(230, 0, 0, 0.3);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.op-minimal__title {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 15px;
    line-height: 1.2;
}

.op-minimal__desc {
    color: #808080;
    font-size: 1.05rem;
    max-width: 600px;
    margin: 0 auto 40px auto;
    line-height: 1.6;
}

/* --- INTERAKTYWNY WIDŻET --- */
.op-minimal__widget {
    position: relative;
    max-width: 650px;
    margin: 0 auto;
    z-index: 2;
}

/* Tagi w tle */
.op-tag {
    position: absolute;
    background: #1E1E1E;
    border: 1px solid #333;
    color: #888;
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0.5;
    pointer-events: none;
    z-index: -1;
}
.tag-1 { top: -20px; left: -40px; transform: rotate(-10deg); }
.tag-2 { bottom: -30px; right: -30px; transform: rotate(5deg); }
.tag-3 { top: -10px; right: -10px; transform: rotate(15deg); }

/* Wyszukiwarka (Pasek AI) */
.op-minimal__search-box {
    background: #050505;
    border: 1px solid #333;
    border-radius: 50px;
    display: flex;
    align-items: center;
    padding: 10px 10px 10px 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    transition: 0.3s border-color;
}
.op-minimal__search-box:hover {
    border-color: #E60000;
}

.search-icon {
    color: #E60000;
    font-size: 1.2rem;
    margin-right: 15px;
}

.op-minimal__typing-area {
    flex: 1;
    text-align: left;
    font-family: monospace;
    font-size: 1.1rem;
    color: #fff;
    height: 24px;
    display: flex;
    align-items: center;
}

.op-cursor {
    color: #E60000;
    font-weight: bold;
    animation: blink 1s infinite;
    margin-left: 2px;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.op-minimal__search-btn {
    background: #E60000;
    color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: 0.3s;
}
.op-minimal__search-btn:hover {
    background: #FF1A1A;
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(230,0,0,0.4);
}

/* Wynik */
.op-minimal__result {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
    background: #121212;
    border: 1px solid #2C2C2C;
    border-radius: 16px;
    padding: 15px 30px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.op-minimal__result.show-result {
    opacity: 1;
    transform: translateY(0);
}

.op-res-item {
    display: flex;
    flex-direction: column;
    text-align: center;
}
.op-res-label { font-size: 0.75rem; color: #808080; text-transform: uppercase; margin-bottom: 4px; }
.op-res-value { font-size: 1.2rem; font-family: monospace; }
.text-white { color: #fff; }
.text-red { color: #E60000; }

.op-res-divider { width: 1px; height: 30px; background: #2C2C2C; }

/* --- STOPKA WIDŻETU --- */
.op-minimal__footer {
    margin-top: 40px;
}
.op-minimal__cta-link {
    color: #808080;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.op-minimal__cta-link:hover {
    color: #E60000;
}

/* --- ANIMACJE SCROLL --- */
.scroll-fade-up {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-fade-up.is-in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
}
/* --- ZMIANY: PRZEKREŚLONA CENA I RABAT --- */
.op-res-price-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.op-old-price {
    text-decoration: line-through;
    color: #666; /* Ciemniejszy szary dla mniejszego kontrastu */
    font-size: 0.95rem;
    font-weight: 500;
}

.op-discount-badge {
    display: inline-block;
    margin-top: 5px;
    font-size: 0.75rem;
    color: #2ecc71; /* Zielony kolor zysku */
    background: rgba(46, 204, 113, 0.1);
    padding: 3px 10px;
    border-radius: 8px;
    border: 1px solid rgba(46, 204, 113, 0.2);
    font-weight: 600;
}
/* --- DUAL INPUT (Nazwa + Rozmiar) --- */
.dual-input-box {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}
.item-name-box { flex: 7; margin-bottom: 0 !important; }
.item-size-box { flex: 3; margin-bottom: 0 !important; }

@media (max-width: 768px) {
    .dual-input-box { flex-direction: column; }
}

/* RWD */
@media (max-width: 600px) {
    .op-minimal__container { padding: 40px 20px; }
    .op-minimal__result { flex-direction: column; gap: 10px; padding: 15px; }
    .op-res-divider { width: 50px; height: 1px; }
    .op-tag { display: none; } /* Ukrywamy tagi na mobile by było czysto */
}


/* ===== css/index/mini-products.css ===== */
/* ==========================================
   MINI PRODUCT PREVIEW - INDEX PAGE
   ========================================== */

.index-products-preview {
    position: relative;
    padding: 2rem 0 5vw;
    background: #040000;
    overflow: hidden;
}

.index-products-preview::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 100%;
    background: radial-gradient(ellipse at center top, rgba(230, 0, 0, 0.06) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.preview-container {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* --- HEADER --- */
.preview-header {
    text-align: center;
    margin-bottom: 2rem;
}

.preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.1rem;
    background: rgba(230, 0, 0, 0.1);
    border: 1px solid rgba(230, 0, 0, 0.22);
    border-radius: 50px;
    color: #ff4d4d;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 1.2rem;
}

.preview-title {
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.8rem 0;
    line-height: 1.15;
}

.preview-title .text-red { color: #E60000; }

.preview-desc {
    color: #777;
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    max-width: 540px;
    margin: 0 auto;
}

/* --- PRODUCT GRID --- */
.preview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 3vw;
}

/* --- PRODUCT CARD (INDEX) --- */
.idx-product-card {
    background: #121212;
    border: 1px solid #2C2C2C;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                border-color 0.3s ease,
                box-shadow 0.3s ease;
    position: relative;
}

.idx-product-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #E60000;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7), 0 0 22px rgba(230, 0, 0, 0.18);
    z-index: 5;
}

.idx-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #1a1a1a;
    overflow: hidden;
}

.idx-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.idx-product-card:hover .idx-card-image img {
    transform: scale(1.1);
    filter: brightness(1.08);
}

.idx-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(230, 0, 0, 0.9);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    z-index: 3;
}

.idx-card-quality {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(18, 18, 18, 0.85);
    border: 1px solid #2C2C2C;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 4px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 4px;
    backdrop-filter: blur(4px);
}

.idx-card-quality i { color: #FFD700; font-size: 0.6rem; }

.idx-card-broken {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #555;
    text-align: center;
    font-size: 0.8rem;
    z-index: 2;
    background: #161616;
}

.idx-card-broken i { font-size: 1.8rem; opacity: 0.4; margin-bottom: 6px; }

/* --- CARD BODY --- */
.idx-card-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.idx-card-cat {
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.idx-card-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e8e8e8;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.idx-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #1e1e1e;
}

.idx-card-price {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    transition: color 0.3s ease, transform 0.3s ease;
}

.idx-product-card:hover .idx-card-price {
    color: #FF1A1A;
    transform: scale(1.08);
}

.idx-card-btn {
    background: transparent;
    border: 1px solid #2C2C2C;
    color: #aaa;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: 'Poppins', sans-serif;
    white-space: nowrap;
}

.idx-product-card:hover .idx-card-btn {
    background: #E60000;
    border-color: #E60000;
    color: #fff;
    box-shadow: 0 4px 12px rgba(230, 0, 0, 0.35);
}

/* --- LOADING STATE --- */
.preview-skeleton {
    background: #121212;
    border: 1px solid #1e1e1e;
    border-radius: 14px;
    overflow: hidden;
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

.preview-skeleton-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #1a1a1a;
}

.preview-skeleton-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preview-skeleton-line {
    height: 10px;
    border-radius: 4px;
    background: #1e1e1e;
}

.preview-skeleton-line.w-60 { width: 60%; }
.preview-skeleton-line.w-80 { width: 80%; }
.preview-skeleton-line.w-40 { width: 40%; }

@keyframes skeletonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* --- ERROR STATE --- */
.preview-error {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px 20px;
    color: #555;
}

.preview-error i {
    font-size: 2.5rem;
    margin-bottom: 14px;
    opacity: 0.4;
    display: block;
}

/* --- FOOTER / CTA --- */
.preview-footer {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.preview-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    background: transparent;
    border: 1.5px solid #E60000;
    color: #fff;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease;
    font-family: 'Poppins', sans-serif;
}

.preview-cta-btn:hover {
    background: #E60000;
    box-shadow: 0 8px 25px rgba(230, 0, 0, 0.35);
    transform: translateY(-2px);
}

.preview-cta-btn i {
    transition: transform 0.3s ease;
}

.preview-cta-btn:hover i {
    transform: translateX(4px);
}

.preview-count-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: rgba(255,255,255,0.03);
    border: 1px solid #2C2C2C;
    border-radius: 8px;
    color: #666;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
}

.preview-count-chip strong { color: #ccc; }

/* --- "POKAŻ WIĘCEJ KATEGORII" --- */
.catnav-rows-more {
    display: flex;
    justify-content: center;
    margin: 6px 0 28px;
}

.catnav-rows-more-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 30px;
    background: rgba(255, 255, 255, 0.02);
    border: 1.5px solid #2C2C2C;
    border-radius: 10px;
    color: #ccc;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    overflow: hidden;
    transition: color 0.3s ease, border-color 0.3s ease,
                box-shadow 0.3s ease, transform 0.25s ease;
}

/* czerwony „fill" wjeżdżający od dołu */
.catnav-rows-more-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #E60000, #ff2b2b);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
}

.catnav-rows-more-btn > * {
    position: relative;
    z-index: 1;
}

.catnav-rows-more-btn:hover {
    color: #fff;
    border-color: #E60000;
    box-shadow: 0 8px 25px rgba(230, 0, 0, 0.35);
    transform: translateY(-2px);
}

.catnav-rows-more-btn:hover::before {
    transform: translateY(0);
}

.catnav-rows-more-btn:active {
    transform: translateY(0);
}

.catnav-rows-more-btn i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.catnav-rows-more-btn:hover i {
    transform: translateY(3px);
    animation: catMoreBounce 0.9s ease-in-out infinite;
}

@keyframes catMoreBounce {
    0%, 100% { transform: translateY(2px); }
    50%      { transform: translateY(6px); }
}

@media (max-width: 600px) {
    .catnav-rows-more-btn { padding: 11px 22px; font-size: 0.82rem; }
}

.idx-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.idx-kakobuy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid #2C2C2C;
    transition: all 0.25s ease;
    flex-shrink: 0;
    text-decoration: none;
}

.idx-kakobuy-btn img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 3px;
}

.idx-kakobuy-btn:hover {
    background: rgba(255, 193, 7, 0.12);
    border-color: rgba(255, 193, 7, 0.4);
    transform: scale(1.1);
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 1100px) {
    .preview-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .index-products-preview { padding: 12vw 0 8vw; }
    .preview-header { margin-bottom: 6vw; }
    .preview-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .preview-grid .idx-product-card:nth-child(n+7) { display: none; }
}

@media (max-width: 480px) {
    .preview-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .preview-grid .idx-product-card:nth-child(n+5) { display: none; }
    .idx-card-name { font-size: 0.8rem; }
    .idx-card-price { font-size: 0.9rem; }
}

/* =========================================================
   RZĘDY KATEGORII ("Netflix rows")
   ========================================================= */
.category-rows {
    --row-h: 300px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    margin-bottom: 2.5vw;
}

.cat-row {
    display: flex;
    gap: 16px;
    align-items: stretch;
    min-width: 0;
}

/* --- KARTA KATEGORII (lewa, nasza grafika) --- */
.cat-rail-card {
    flex: 0 0 auto;
    height: var(--row-h);
    aspect-ratio: 3 / 4;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: #0a0606;
    border: 1px solid #2a1414;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                border-color 0.3s ease, box-shadow 0.3s ease;
}

.cat-rail-card:hover {
    transform: translateY(-6px) scale(1.015);
    border-color: #E60000;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.7), 0 0 28px rgba(230, 0, 0, 0.3);
}

/* górny gradient pod tytuł */
.cat-rail-grad-top {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 36%;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(5, 0, 0, 0.85) 0%, rgba(5, 0, 0, 0.4) 45%, transparent 100%);
    pointer-events: none;
}

/* NAZWA KATEGORII — na górze, wyśrodkowana, duża */
.cat-rail-title {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 3;
    padding: 16px 12px 0;
    font-size: clamp(1.15rem, 1.7vw, 1.7rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.6px;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}

/* dolny gradient pod przycisk */
.cat-rail-grad {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 50%;
    z-index: 1;
    background: linear-gradient(to top, rgba(5, 0, 0, 0.9) 6%, rgba(5, 0, 0, 0.4) 40%, transparent 100%);
    pointer-events: none;
}

.cat-rail-info {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* LICZBA PRODUKTÓW — na dole, mała i dyskretna */
.cat-rail-count {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.4px;
    font-weight: 500;
    text-align: center;
}

.cat-rail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #E60000;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.25s ease, box-shadow 0.25s ease, gap 0.25s ease;
    box-shadow: 0 6px 18px rgba(230, 0, 0, 0.32);
}
.cat-rail-card:hover .cat-rail-btn { background: #FF1A1A; gap: 11px; box-shadow: 0 8px 22px rgba(230, 0, 0, 0.5); }

/* --- PRZEWIJALNY PASEK PRODUKTÓW (prawa) --- */
.cat-rail-scroll {
    display: flex;
    gap: 12px;
    height: var(--row-h);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: #E60000 #1a1a1a;
    min-width: 0;
    flex: 1;
}
.cat-rail-scroll::-webkit-scrollbar { height: 7px; }
.cat-rail-scroll::-webkit-scrollbar-track { background: #161616; border-radius: 10px; }
.cat-rail-scroll::-webkit-scrollbar-thumb { background: #7a0d0d; border-radius: 10px; }
.cat-rail-scroll::-webkit-scrollbar-thumb:hover { background: #E60000; }

/* --- MINI KARTA PRODUKTU --- */
.cat-prod-card {
    flex: 0 0 178px;
    height: 100%;
    background: #121212;
    border: 1px solid #2C2C2C;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    scroll-snap-align: start;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.cat-prod-card:hover {
    transform: translateY(-5px);
    border-color: #E60000;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.65), 0 0 18px rgba(230, 0, 0, 0.18);
}

.cmc-img {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    background: #1a1a1a;
    overflow: hidden;
}
.cmc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.cat-prod-card:hover .cmc-img img { transform: scale(1.08); }

.cmc-q {
    position: absolute;
    top: 8px; left: 8px;
    background: rgba(18, 18, 18, 0.85);
    border: 1px solid #2C2C2C;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 3px;
    backdrop-filter: blur(4px);
}
.cmc-q i { color: #FFD700; font-size: 0.55rem; }

.cmc-broken {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    color: #444;
    font-size: 1.6rem;
    background: #161616;
}

.cmc-body { padding: 9px 10px 10px; display: flex; flex-direction: column; gap: 7px; }
.cmc-name {
    font-size: 0.76rem;
    font-weight: 600;
    color: #e8e8e8;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2em;
}
.cmc-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cmc-price { font-size: 0.9rem; font-weight: 700; color: #fff; }
.cat-prod-card:hover .cmc-price { color: #FF1A1A; }
.cmc-agent {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 7px;
    background: #1c1c1c;
    border: 1px solid #2C2C2C;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.25s ease, background 0.25s ease;
}
.cmc-agent:hover { border-color: #E60000; background: #251010; }
.cmc-agent img { width: 20px; height: 20px; object-fit: contain; }

/* --- "Zobacz wszystkie" na końcu paska --- */
.cat-rail-seeall {
    flex: 0 0 120px;
    height: 100%;
    border-radius: 12px;
    border: 1px dashed #3a1414;
    background: linear-gradient(160deg, #160808, #0a0505);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ff5b5b;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    transition: all 0.3s ease;
}
.cat-rail-seeall i { font-size: 1.2rem; transition: transform 0.3s ease; }
.cat-rail-seeall:hover { border-color: #E60000; background: linear-gradient(160deg, #2a0c0c, #140707); color: #fff; }
.cat-rail-seeall:hover i { transform: translateX(5px); }

/* --- PRZYCISK "POKAŻ WIĘCEJ KATEGORII" --- */
.cat-rows-more { text-align: center; margin: 8px 0 3vw; }
.cat-rows-more-btn {
    background: transparent;
    border: 1px solid #3a1414;
    color: #ddd;
    font-family: 'Poppins', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 12px 26px;
    border-radius: 50px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}
.cat-rows-more-btn:hover { background: #E60000; border-color: #E60000; color: #fff; box-shadow: 0 8px 22px rgba(230, 0, 0, 0.35); }
.cat-rows-more-btn:hover i { transform: translateY(3px); }
.cat-rows-more-btn i { transition: transform 0.3s ease; }

/* --- SKELETONY --- */
.cat-row-skel .cat-rail-card.skel,
.cat-prod-card.skel { animation: skeletonPulse 1.5s ease-in-out infinite; background: #121212; }
.cat-prod-card.skel .cmc-img { flex: 1; background: #1a1a1a; }
.cat-prod-card.skel .skel-line { height: 9px; border-radius: 5px; background: #1f1f1f; margin: 6px 0; }
.cat-prod-card.skel .skel-line.w-80 { width: 80%; }
.cat-prod-card.skel .skel-line.w-40 { width: 40%; }

/* --- RESPONSYWNOŚĆ --- */
@media (max-width: 900px) {
    .category-rows { --row-h: 250px; }
    .cat-prod-card { flex-basis: 150px; }
}
@media (max-width: 600px) {
    .category-rows { --row-h: 210px; gap: 20px; }
    .cat-row { gap: 10px; }
    .cat-rail-card { border-radius: 13px; }
    .cat-rail-title { font-size: 1rem; }
    .cat-rail-btn { font-size: 0.7rem; padding: 7px 10px; }
    .cat-prod-card { flex-basis: 132px; }
    .cat-rail-seeall { flex-basis: 96px; font-size: 0.72rem; }
}


/* ===== css/index/top-month.css ===== */
/* =========================================================
   TOP 10 PRODUKTÓW TEGO MIESIĄCA
   ========================================================= */
.top-month-section {
    max-width: 1100px;
    margin: 10px auto 60px;
    padding: 0 20px;
}
.top-month-header {
    text-align: center;
    margin-bottom: 28px;
}
.top-month-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #FFD24A;
    background: rgba(255, 196, 0, 0.1);
    border: 1px solid rgba(255, 196, 0, 0.3);
    padding: 6px 14px;
    border-radius: 999px;
}
.top-month-title {
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    font-weight: 800;
    color: #fff;
    margin: 14px 0 8px;
}
.top-month-title .text-red { color: #E60000; }
.top-month-desc {
    color: #9a9a9a;
    font-size: 0.95rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ===== Wyróżniony riser ===== */
.top-riser-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    text-decoration: none;
    background: linear-gradient(135deg, #1d1207 0%, #160d0d 55%, #0e0e0e 100%);
    border: 1px solid rgba(255, 120, 0, 0.35);
    border-radius: 20px;
    padding: 16px 20px;
    margin-bottom: 26px;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(.175,.885,.32,1.275), border-color 0.3s, box-shadow 0.3s;
}
.top-riser-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 150, 0, 0.7);
    box-shadow: 0 22px 50px rgba(255, 110, 0, 0.22);
}
.top-riser-glow {
    position: absolute; inset: -40% -10%;
    background: radial-gradient(circle at 12% 30%, rgba(255,120,0,.28), transparent 55%);
    pointer-events: none;
}
.top-riser-rank {
    position: relative; z-index: 1; flex: 0 0 auto;
    width: 46px; height: 46px; border-radius: 12px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #ff3b00, #ffb300);
    color: #1a0a00; font-size: 1.2rem;
    box-shadow: 0 6px 18px rgba(255,120,0,.5);
}
.top-riser-img {
    position: relative; z-index: 1; flex: 0 0 auto;
    width: 72px; height: 72px; border-radius: 14px; overflow: hidden;
    border: 2px solid rgba(255,160,0,.4); background: #1a1a1a;
}
.top-riser-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.top-riser-info { position: relative; z-index: 1; flex: 1; min-width: 0; }
.top-riser-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: #ffb259;
}
.top-riser-name {
    font-size: 1.15rem; font-weight: 700; color: #fff; margin: 4px 0 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-riser-cat { font-size: 0.8rem; color: #9a9a9a; text-transform: uppercase; letter-spacing: .5px; }
.top-riser-stats {
    position: relative; z-index: 1; flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
}
.top-riser-views, .top-riser-velocity {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.82rem; font-weight: 700; white-space: nowrap;
}
.top-riser-views { color: #fff; }
.top-riser-velocity {
    color: #fff; background: linear-gradient(135deg, #ff3b00, #ffae00);
    padding: 5px 11px; border-radius: 999px; box-shadow: 0 4px 14px rgba(255,120,0,.4);
}

/* ===== Lista TOP 10 (mini-spreadsheet) ===== */
.top-month-list {
    list-style: none; margin: 0; padding: 0;
    background: #111;
    border: 1px solid #262626;
    border-radius: 18px;
    overflow: hidden;
}
.tm-row {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 16px;
    border-bottom: 1px solid #1e1e1e;
    cursor: pointer;
    transition: background 0.2s ease;
}
.tm-row:last-child { border-bottom: none; }

/* link do pełnego rankingu (/top) pod listą */
.top-month-more {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    margin: 12px 0 0; padding: 12px 16px;
    border: 1px solid #262626; border-radius: 14px;
    background: #111; color: #fff; font-weight: 600; font-size: 0.9rem; text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.top-month-more i:first-child { color: #FFD24A; }
.top-month-more i:last-child { color: #ff5a5a; font-size: 0.8rem; transition: transform 0.2s ease; }
.top-month-more:hover { border-color: rgba(230, 0, 0, 0.5); background: rgba(230, 0, 0, 0.06); }
.top-month-more:hover i:last-child { transform: translateX(3px); }
.tm-row:hover { background: rgba(230, 0, 0, 0.06); }
.tm-row.is-riser { background: rgba(255, 120, 0, 0.07); }
.tm-row.is-riser:hover { background: rgba(255, 120, 0, 0.12); }

.tm-rank {
    flex: 0 0 auto; width: 28px; text-align: center;
    font-weight: 800; font-size: 0.95rem; color: #777;
}
.tm-rank--top { color: #fff; }
.tm-rank--1 { color: #FFD24A; text-shadow: 0 0 12px rgba(255,196,0,.5); }
.tm-rank--2 { color: #d6d6d6; }
.tm-rank--3 { color: #e6915a; }

.tm-thumb {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; overflow: hidden;
    background: #1a1a1a; border: 1px solid #2a2a2a;
}
.tm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tm-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tm-name {
    color: #fff; font-weight: 600; font-size: 0.9rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-cat {
    font-size: 0.72rem; color: #888; text-transform: uppercase; letter-spacing: .4px;
    display: inline-flex; align-items: center; gap: 8px;
}
.tm-riser-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.62rem; font-weight: 800; letter-spacing: .3px;
    color: #1a0a00; background: linear-gradient(135deg, #ff3b00, #ffae00);
    padding: 2px 7px; border-radius: 999px; text-transform: uppercase;
}

.tm-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.tm-views {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.74rem; font-weight: 800; letter-spacing: .5px;
    color: #fff; padding: 4px 9px; border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.12);
}
.tm-views i { font-size: 0.82em; opacity: .95; }
.tm-views--none { background: #1a1a1a; color: #666; border-color: #262626; }
/* te same tiery co na spreadsheecie */
.tm-views.views-badge--t1 { background: rgba(120,30,30,.72); color: #f0c9c9; }
.tm-views.views-badge--t2 { background: rgba(150,30,30,.78); color: #ffdada; }
.tm-views.views-badge--t3 { background: rgba(185,25,25,.82); }
.tm-views.views-badge--t4 { background: rgba(210,20,20,.88); }
.tm-views.views-badge--t5 { background: linear-gradient(135deg,#E60000,#ff2d2d); }
.tm-views.views-badge--t6 { background: linear-gradient(135deg,#ff1f1f,#ff5a2d); }
.tm-views.views-badge--t7 { background: linear-gradient(135deg,#ff3b00,#ffb300); color: #1a0a00; box-shadow: 0 0 16px rgba(255,120,0,.6); }

.tm-rating {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.74rem; font-weight: 700; color: #FFD24A;
    background: rgba(0,0,0,.5); border: 1px solid #2a2a2a;
    padding: 4px 9px; border-radius: 7px;
}
.tm-arrow { color: #555; font-size: 0.8rem; flex: 0 0 auto; transition: transform .2s, color .2s; }
.tm-row:hover .tm-arrow { color: #E60000; transform: translateX(3px); }

@media (max-width: 640px) {
    .top-riser-card { flex-wrap: wrap; gap: 12px; padding: 14px; }
    .top-riser-stats { flex-direction: row; width: 100%; justify-content: space-between; }
    .tm-rating { display: none; }
    .tm-cat { font-size: 0.66rem; }
    .tm-meta { gap: 6px; }
}


/* ===== css/shared/fonts.css ===== */
/* KakoFind: lokalny Poppins (SIL OFL 1.1), podzbior latin + latin-ext.
   Generowane skryptem, nie edytowac recznie. */
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url("/font/poppins/poppins-300.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-012F,U+0130,U+0132-0151,U+0154-017F,U+0180-024F,U+0259,U+1E00-1E9F,U+1EF2-1EFF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("/font/poppins/poppins-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-012F,U+0130,U+0132-0151,U+0154-017F,U+0180-024F,U+0259,U+1E00-1E9F,U+1EF2-1EFF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("/font/poppins/poppins-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-012F,U+0130,U+0132-0151,U+0154-017F,U+0180-024F,U+0259,U+1E00-1E9F,U+1EF2-1EFF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("/font/poppins/poppins-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-012F,U+0130,U+0132-0151,U+0154-017F,U+0180-024F,U+0259,U+1E00-1E9F,U+1EF2-1EFF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("/font/poppins/poppins-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-012F,U+0130,U+0132-0151,U+0154-017F,U+0180-024F,U+0259,U+1E00-1E9F,U+1EF2-1EFF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:800;font-display:swap;src:url("/font/poppins/poppins-800.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-012F,U+0130,U+0132-0151,U+0154-017F,U+0180-024F,U+0259,U+1E00-1E9F,U+1EF2-1EFF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:900;font-display:swap;src:url("/font/poppins/poppins-900.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-012F,U+0130,U+0132-0151,U+0154-017F,U+0180-024F,U+0259,U+1E00-1E9F,U+1EF2-1EFF,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* KF-LINE-HEIGHT: Poppins ma line-height "normal" = 1,5, a czcionka zastępcza ok. 1,15. Bez jawnej
   wartości każda linia rosła o 30% w chwili doczytania fontu i układ skakał (CLS). Z Poppins wygląd bez zmian.
   Reguły z innym krojem (monospace) wracają do "normal", żeby zachowały dotychczasowe odstępy. */
html{line-height:1.5}
.link-value,.op-minimal__typing-area,.op-res-value,.lc-result-link,.aa-link,.history-link,.ci-box-input,.ci-mid span,.weight-highlight,.price-base,.price-discount,.pkg-weight,.c-row span:last-child,.ship-headline__old,.ccard-old,.ep-rates td:nth-child(n+4),.ship-mini__old,.loader-status,.avg-calc,.qcx__code,.qc-lb-zoom-badge,.ku-card__code,.ku-dead__code,.code-value,.side-coupon-code,.rn-codes__code,.kupony-summary-table .code-cell,.sp-seo-faq summary::after{line-height:normal}
/* Zastępczy krój o metrykach Poppins (Arial / Arial Bold przeskalowane osobno dla każdej grubości,
   size-adjust zmierzony na polskim tekście): tekst rysowany przed doczytaniem
   Poppins zajmuje tyle samo miejsca, więc podmiana fontu nie przesuwa układu (CLS). */
@font-face{font-family:"Poppins Fallback";font-style:normal;font-display:swap;font-weight:300;src:local("Arial"),local("ArialMT"),local("Helvetica");size-adjust:105.27%;ascent-override:99.74%;descent-override:33.25%;line-gap-override:9.50%}
@font-face{font-family:"Poppins Fallback";font-style:normal;font-display:swap;font-weight:400;src:local("Arial"),local("ArialMT"),local("Helvetica");size-adjust:106.92%;ascent-override:98.20%;descent-override:32.73%;line-gap-override:9.35%}
@font-face{font-family:"Poppins Fallback";font-style:normal;font-display:swap;font-weight:500;src:local("Arial"),local("ArialMT"),local("Helvetica");size-adjust:108.76%;ascent-override:96.54%;descent-override:32.18%;line-gap-override:9.19%}
@font-face{font-family:"Poppins Fallback";font-style:normal;font-display:swap;font-weight:600;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Helvetica-Bold");size-adjust:104.14%;ascent-override:100.83%;descent-override:33.61%;line-gap-override:9.60%}
@font-face{font-family:"Poppins Fallback";font-style:normal;font-display:swap;font-weight:700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Helvetica-Bold");size-adjust:105.40%;ascent-override:99.62%;descent-override:33.21%;line-gap-override:9.49%}
@font-face{font-family:"Poppins Fallback";font-style:normal;font-display:swap;font-weight:800;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Helvetica-Bold");size-adjust:106.49%;ascent-override:98.60%;descent-override:32.87%;line-gap-override:9.39%}
@font-face{font-family:"Poppins Fallback";font-style:normal;font-display:swap;font-weight:900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Helvetica-Bold");size-adjust:107.56%;ascent-override:97.62%;descent-override:32.54%;line-gap-override:9.30%}


/* ===== css/shared/icons.css ===== */
/* KakoFind: lokalny podzbior ikon Font Awesome 6.4.2 (CC BY 4.0, fontawesome.com).
   Zawiera wylacznie glify faktycznie uzywane w serwisie. Generowane skryptem, nie edytowac recznie. */
@font-face{font-family:"KF Icons";font-style:normal;font-weight:900;font-display:swap;
src:url("/font/fa/fa-solid-900.woff2") format("woff2")}
@font-face{font-family:"KF Icons Brands";font-style:normal;font-weight:400;font-display:swap;
src:url("/font/fa/fa-brands-400.woff2") format("woff2")}

.fa,.fas,.fa-solid,.far,.fa-regular,.fab,.fa-brands{
  -moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;
  display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;
  line-height:1;text-rendering:auto}
.fa,.fas,.fa-solid{font-family:"KF Icons";font-weight:900}
.far,.fa-regular{font-family:"KF Icons";font-weight:400}
.fab,.fa-brands{font-family:"KF Icons Brands";font-weight:400}

/* klasy pomocnicze uzywane w serwisie */
.fa-fw{text-align:center;width:1.25em}
.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}
.fa-2x{font-size:2em}.fa-3x{font-size:3em}
.fa-spin{animation-name:fa-spin;animation-duration:var(--fa-animation-duration,2s);
  animation-iteration-count:var(--fa-animation-iteration-count,infinite);
  animation-timing-function:var(--fa-animation-timing,linear)}
.fa-spin-pulse{animation-name:fa-spin;animation-direction:var(--fa-animation-direction,normal);
  animation-duration:var(--fa-animation-duration,1s);
  animation-iteration-count:var(--fa-animation-iteration-count,infinite);
  animation-timing-function:var(--fa-animation-timing,steps(8))}
.fa-beat{animation-name:fa-beat;animation-delay:var(--fa-animation-delay,0s);
  animation-direction:var(--fa-animation-direction,normal);
  animation-duration:var(--fa-animation-duration,1s);
  animation-iteration-count:var(--fa-animation-iteration-count,infinite);
  animation-timing-function:var(--fa-animation-timing,ease-in-out)}
.fa-bounce{animation-name:fa-bounce;animation-delay:var(--fa-animation-delay,0s);
  animation-direction:var(--fa-animation-direction,normal);
  animation-duration:var(--fa-animation-duration,1s);
  animation-iteration-count:var(--fa-animation-iteration-count,infinite);
  animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}
@keyframes fa-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes fa-beat{0%,90%{transform:scale(1)}45%{transform:scale(var(--fa-beat-scale,1.25))}}
@keyframes fa-bounce{
  0%{transform:scale(1) translateY(0)}
  10%{transform:scale(1.1,.9) translateY(0)}
  30%{transform:scale(.9,1.1) translateY(-.5em)}
  50%{transform:scale(1.05,.95) translateY(0)}
  57%{transform:scale(1) translateY(-.125em)}
  64%{transform:scale(1) translateY(0)}
  100%{transform:scale(1) translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .fa-spin,.fa-spin-pulse,.fa-beat,.fa-bounce{animation-delay:-1ms;animation-duration:1ms;
    animation-iteration-count:1;transition-delay:0s;transition-duration:0s}}

/* glify */
.fa-alipay::before{content:"\f642"}
.fa-angle-right::before{content:"\f105"}
.fa-angles-down::before{content:"\f103"}
.fa-apple::before{content:"\f179"}
.fa-arrow-down::before{content:"\f063"}
.fa-arrow-down-1-9::before{content:"\f162"}
.fa-arrow-down-9-1::before{content:"\f886"}
.fa-arrow-down-a-z::before{content:"\f15d"}
.fa-arrow-down-wide-short::before{content:"\f160"}
.fa-arrow-left::before{content:"\f060"}
.fa-arrow-right::before{content:"\f061"}
.fa-arrow-right-from-bracket::before{content:"\f08b"}
.fa-arrow-right-long::before{content:"\f178"}
.fa-arrow-right-to-bracket::before{content:"\f090"}
.fa-arrow-rotate-left::before{content:"\f0e2"}
.fa-arrow-trend-down::before{content:"\e097"}
.fa-arrow-trend-up::before{content:"\e098"}
.fa-arrow-up::before{content:"\f062"}
.fa-arrow-up-right-from-square::before{content:"\f08e"}
.fa-arrow-up-wide-short::before{content:"\f161"}
.fa-ban::before{content:"\f05e"}
.fa-battery-full::before{content:"\f240"}
.fa-bitcoin::before{content:"\f379"}
.fa-bolt::before{content:"\f0e7"}
.fa-bolt-lightning::before{content:"\e0b7"}
.fa-book-open::before{content:"\f518"}
.fa-box::before{content:"\f466"}
.fa-box-archive::before{content:"\f187"}
.fa-box-open::before{content:"\f49e"}
.fa-brain::before{content:"\f5dc"}
.fa-building-columns::before{content:"\f19c"}
.fa-bullhorn::before{content:"\f0a1"}
.fa-bullseye::before{content:"\f140"}
.fa-calculator::before{content:"\f1ec"}
.fa-calendar::before{content:"\f133"}
.fa-calendar-check::before{content:"\f274"}
.fa-calendar-days::before{content:"\f073"}
.fa-camera::before{content:"\f030"}
.fa-camera-retro::before{content:"\f083"}
.fa-camera-rotate::before{content:"\e0d8"}
.fa-caret-down::before{content:"\f0d7"}
.fa-cart-flatbed::before{content:"\f474"}
.fa-cart-shopping::before{content:"\f07a"}
.fa-chart-line::before{content:"\f201"}
.fa-chart-pie::before{content:"\f200"}
.fa-check::before{content:"\f00c"}
.fa-check-circle::before{content:"\f058"}
.fa-check-double::before{content:"\f560"}
.fa-chevron-down::before{content:"\f078"}
.fa-chevron-left::before{content:"\f053"}
.fa-chevron-right::before{content:"\f054"}
.fa-chevron-up::before{content:"\f077"}
.fa-circle::before{content:"\f111"}
.fa-circle-check::before{content:"\f058"}
.fa-circle-exclamation::before{content:"\f06a"}
.fa-circle-info::before{content:"\f05a"}
.fa-circle-notch::before{content:"\f1ce"}
.fa-circle-question::before{content:"\f059"}
.fa-clipboard::before{content:"\f328"}
.fa-clipboard-check::before{content:"\f46c"}
.fa-clock::before{content:"\f017"}
.fa-clock-rotate-left::before{content:"\f1da"}
.fa-cloud-arrow-up::before{content:"\f0ee"}
.fa-code::before{content:"\f121"}
.fa-code-compare::before{content:"\e13a"}
.fa-coins::before{content:"\f51e"}
.fa-comment-dots::before{content:"\f4ad"}
.fa-compass::before{content:"\f14e"}
.fa-compress::before{content:"\f066"}
.fa-copy::before{content:"\f0c5"}
.fa-credit-card::before{content:"\f09d"}
.fa-crown::before{content:"\f521"}
.fa-cube::before{content:"\f1b2"}
.fa-database::before{content:"\f1c0"}
.fa-desktop::before{content:"\f390"}
.fa-dice::before{content:"\f522"}
.fa-discord::before{content:"\f392"}
.fa-earth-europe::before{content:"\f7a2"}
.fa-ellipsis::before{content:"\f141"}
.fa-envelope::before{content:"\f0e0"}
.fa-eraser::before{content:"\f12d"}
.fa-expand::before{content:"\f065"}
.fa-eye::before{content:"\f06e"}
.fa-eye-slash::before{content:"\f070"}
.fa-file-contract::before{content:"\f56c"}
.fa-file-excel::before{content:"\f1c3"}
.fa-file-import::before{content:"\f56f"}
.fa-file-invoice-dollar::before{content:"\f571"}
.fa-file-lines::before{content:"\f15c"}
.fa-file-shield::before{content:"\e4f0"}
.fa-filter::before{content:"\f0b0"}
.fa-filter-circle-xmark::before{content:"\e17b"}
.fa-fire::before{content:"\f06d"}
.fa-fire-flame-curved::before{content:"\f7e4"}
.fa-floppy-disk::before{content:"\f0c7"}
.fa-gavel::before{content:"\f0e3"}
.fa-gear::before{content:"\f013"}
.fa-gem::before{content:"\f3a5"}
.fa-ghost::before{content:"\f6e2"}
.fa-gift::before{content:"\f06b"}
.fa-globe::before{content:"\f0ac"}
.fa-google::before{content:"\f1a0"}
.fa-graduation-cap::before{content:"\f19d"}
.fa-grip::before{content:"\f58d"}
.fa-hand-holding-dollar::before{content:"\f4c0"}
.fa-hand-pointer::before{content:"\f25a"}
.fa-handshake::before{content:"\f2b5"}
.fa-headset::before{content:"\f590"}
.fa-heart::before{content:"\f004"}
.fa-heart-crack::before{content:"\f7a9"}
.fa-heart-pulse::before{content:"\f21e"}
.fa-house::before{content:"\f015"}
.fa-id-card::before{content:"\f2c2"}
.fa-image::before{content:"\f03e"}
.fa-images::before{content:"\f302"}
.fa-info::before{content:"\f129"}
.fa-info-circle::before{content:"\f05a"}
.fa-keyboard::before{content:"\f11c"}
.fa-language::before{content:"\f1ab"}
.fa-layer-group::before{content:"\f5fd"}
.fa-leaf::before{content:"\f06c"}
.fa-life-ring::before{content:"\f1cd"}
.fa-lightbulb::before{content:"\f0eb"}
.fa-link::before{content:"\f0c1"}
.fa-link-slash::before{content:"\f127"}
.fa-list::before{content:"\f03a"}
.fa-list-check::before{content:"\f0ae"}
.fa-list-ul::before{content:"\f0ca"}
.fa-location-crosshairs::before{content:"\f601"}
.fa-location-dot::before{content:"\f3c5"}
.fa-lock::before{content:"\f023"}
.fa-lock-open::before{content:"\f3c1"}
.fa-magnifying-glass::before{content:"\f002"}
.fa-magnifying-glass-chart::before{content:"\e522"}
.fa-magnifying-glass-dollar::before{content:"\f688"}
.fa-magnifying-glass-location::before{content:"\f689"}
.fa-magnifying-glass-minus::before{content:"\f010"}
.fa-magnifying-glass-plus::before{content:"\f00e"}
.fa-medal::before{content:"\f5a2"}
.fa-microchip::before{content:"\f2db"}
.fa-minus::before{content:"\f068"}
.fa-mobile-screen::before{content:"\f3cf"}
.fa-mobile-screen-button::before{content:"\f3cd"}
.fa-money-bill-transfer::before{content:"\e528"}
.fa-money-bill-trend-up::before{content:"\e529"}
.fa-money-bill-wave::before{content:"\f53a"}
.fa-network-wired::before{content:"\f6ff"}
.fa-newspaper::before{content:"\f1ea"}
.fa-note-sticky::before{content:"\f249"}
.fa-palette::before{content:"\f53f"}
.fa-paper-plane::before{content:"\f1d8"}
.fa-pause::before{content:"\f04c"}
.fa-paypal::before{content:"\f1ed"}
.fa-pen::before{content:"\f304"}
.fa-pen-to-square::before{content:"\f044"}
.fa-plane::before{content:"\f072"}
.fa-plane-departure::before{content:"\f5b0"}
.fa-play::before{content:"\f04b"}
.fa-plug::before{content:"\f1e6"}
.fa-qrcode::before{content:"\f029"}
.fa-receipt::before{content:"\f543"}
.fa-reddit::before{content:"\f1a1"}
.fa-right-from-bracket::before{content:"\f2f5"}
.fa-right-to-bracket::before{content:"\f2f6"}
.fa-robot::before{content:"\f544"}
.fa-rocket::before{content:"\f135"}
.fa-rotate-left::before{content:"\f2ea"}
.fa-rotate-right::before{content:"\f2f9"}
.fa-ruler::before{content:"\f545"}
.fa-sack-dollar::before{content:"\f81d"}
.fa-satellite-dish::before{content:"\f7c0"}
.fa-scale-balanced::before{content:"\f24e"}
.fa-scale-unbalanced::before{content:"\f515"}
.fa-screwdriver-wrench::before{content:"\f7d9"}
.fa-scroll::before{content:"\f70e"}
.fa-server::before{content:"\f233"}
.fa-share-from-square::before{content:"\f14d"}
.fa-share-nodes::before{content:"\f1e0"}
.fa-shield-halved::before{content:"\f3ed"}
.fa-ship::before{content:"\f21a"}
.fa-shirt::before{content:"\f553"}
.fa-shoe-prints::before{content:"\f54b"}
.fa-shop::before{content:"\f54f"}
.fa-sliders::before{content:"\f1de"}
.fa-snowflake::before{content:"\f2dc"}
.fa-spinner::before{content:"\f110"}
.fa-star::before{content:"\f005"}
.fa-star-half-stroke::before{content:"\f5c0"}
.fa-stop::before{content:"\f04d"}
.fa-store::before{content:"\f54e"}
.fa-table-cells::before{content:"\f00a"}
.fa-table-cells-large::before{content:"\f009"}
.fa-table-list::before{content:"\f00b"}
.fa-tablet-screen-button::before{content:"\f3fa"}
.fa-tag::before{content:"\f02b"}
.fa-tags::before{content:"\f02c"}
.fa-thumbtack::before{content:"\f08d"}
.fa-ticket::before{content:"\f145"}
.fa-tiktok::before{content:"\e07b"}
.fa-toolbox::before{content:"\f552"}
.fa-tower-broadcast::before{content:"\f519"}
.fa-trash::before{content:"\f1f8"}
.fa-trash-can::before{content:"\f2ed"}
.fa-triangle-exclamation::before{content:"\f071"}
.fa-trophy::before{content:"\f091"}
.fa-truck::before{content:"\f0d1"}
.fa-truck-fast::before{content:"\f48b"}
.fa-umbrella::before{content:"\f0e9"}
.fa-up-right-from-square::before{content:"\f35d"}
.fa-upload::before{content:"\f093"}
.fa-user::before{content:"\f007"}
.fa-user-check::before{content:"\f4fc"}
.fa-user-group::before{content:"\f500"}
.fa-user-plus::before{content:"\f234"}
.fa-user-shield::before{content:"\f505"}
.fa-user-slash::before{content:"\f506"}
.fa-user-tie::before{content:"\f508"}
.fa-users::before{content:"\f0c0"}
.fa-users-gear::before{content:"\f509"}
.fa-users-viewfinder::before{content:"\e595"}
.fa-venus-mars::before{content:"\f228"}
.fa-video::before{content:"\f03d"}
.fa-wallet::before{content:"\f555"}
.fa-wand-magic-sparkles::before{content:"\e2ca"}
.fa-warehouse::before{content:"\f494"}
.fa-weight-scale::before{content:"\f496"}
.fa-wine-glass::before{content:"\f4e3"}
.fa-xmark::before{content:"\f00d"}
.fa-youtube::before{content:"\f167"}


/* ===== css/index/redesign.css ===== */
/* =========================================================
   KAKOFIND — INDEX REDESIGN LAYER (2026)
   Spójna, premium warstwa wizualna nakładana NA istniejące style
   (ładowana jako ostatnia, więc wygrywa kaskadę dla ustawianych
   właściwości). Nie zmienia struktury HTML — tylko wygląd.
   Paleta: czerń #050505 / czerwień #E60000·#FF1A1A·#8A0000.
   ========================================================= */

:root {
    --kf-red: #E60000;
    --kf-red-lt: #FF2D2D;
    --kf-red-dk: #8A0000;
    --kf-ink: #f3f3f3;
    --kf-muted: #9a9a9a;
    --kf-line: rgba(255, 255, 255, 0.08);
    --kf-glass: rgba(255, 255, 255, 0.035);
}

body { background-color: #050505; }

/* Wspólny, mocniejszy styl „pigułki/badge” nagłówków sekcji */
.preview-badge,
.porownywarka-hero__badge,
.op-minimal__badge,
.teaser-badge,
.hub-badge {
    backdrop-filter: blur(6px);
    box-shadow: 0 0 0 1px rgba(230, 0, 0, 0.12), 0 8px 22px rgba(230, 0, 0, 0.12);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

/* =========================================================
   HERO
   ========================================================= */
.kako-hero {
    background:
        radial-gradient(ellipse 60% 50% at 50% -10%, rgba(230, 0, 0, 0.16), transparent 60%),
        radial-gradient(ellipse 50% 40% at 12% 18%, rgba(230, 0, 0, 0.08), transparent 55%),
        #050505;
}
/* Subtelna siatka punktowa w tle hero */
.kako-hero__bg-fx {
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
    background-size: 30px 30px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
    opacity: 0.6;
}

/* Statystyki jako szklane karty z czerwonym akcentem */
.kako-stats {
    gap: 0 !important;
    padding: 10px;
    border: 1px solid var(--kf-line);
    border-radius: 18px;
    background: var(--kf-glass);
    backdrop-filter: blur(8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.kako-stats__item { padding: 6px 26px; }
.kako-stats__number {
    background: linear-gradient(180deg, #fff, #ffd9d9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 26px rgba(230, 0, 0, 0.25);
}
.kako-stats__label { letter-spacing: 0.6px; }
.kako-stats__separator {
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(230, 0, 0, 0.5), transparent) !important;
}

/* =========================================================
   PODGLĄD PRODUKTÓW
   ========================================================= */
.index-products-preview { padding-top: clamp(48px, 7vw, 96px); }
.preview-title { letter-spacing: -0.5px; }

/* Karty produktów — mocniejszy hover + gradientowa obwódka */
.idx-product-card {
    position: relative;
    border-radius: 16px !important;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.idx-product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(230, 0, 0, 0.55) !important;
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.6), 0 0 26px rgba(230, 0, 0, 0.18);
}
.idx-card-image img { transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.idx-product-card:hover .idx-card-image img { transform: scale(1.07); }
.idx-card-quality {
    background: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(255, 210, 77, 0.35);
}

/* Stopka: CTA + dynamiczny licznik produktów */
.preview-footer { gap: 16px; }
.preview-cta-btn {
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(230, 0, 0, 0.28);
}
.preview-cta-btn::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: kfShine 3.4s ease-in-out infinite;
}
@keyframes kfShine { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } }
.preview-count-chip {
    border: 1px solid rgba(230, 0, 0, 0.25) !important;
    background: linear-gradient(180deg, rgba(230, 0, 0, 0.08), rgba(255, 255, 255, 0.02)) !important;
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.preview-count-chip:hover { transform: translateY(-2px); border-color: rgba(230, 0, 0, 0.5) !important; }
.preview-count-chip strong { color: #fff; }

/* =========================================================
   OFICJALNY ARKUSZ (premium „official” card)
   ========================================================= */
.arkusz-main-note-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 210, 77, 0.28) !important;
    background:
        radial-gradient(ellipse 50% 120% at 0% 0%, rgba(255, 210, 77, 0.08), transparent 60%),
        linear-gradient(180deg, #140d05, #0a0703) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.arkusz-main-note-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #FFD24D, transparent);
}
.arkusz-main-note-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 210, 77, 0.55) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), 0 0 32px rgba(255, 210, 77, 0.14);
}
.a2n-icon--main {
    background: linear-gradient(135deg, #1e7a44, #0e3d22) !important;
    box-shadow: 0 10px 24px rgba(31, 122, 68, 0.3);
}
.a2n-eyebrow--main { color: #FFD24D !important; }
.a2n-cta--main {
    background: linear-gradient(135deg, #FFD24D, #C99500) !important;
    color: #1a0a00 !important;
}

/* =========================================================
   PORÓWNYWARKA AGENTÓW — „live ranking" dashboard
   ========================================================= */
.porownywarka-hero {
    background:
        radial-gradient(ellipse 55% 60% at 88% 26%, rgba(230, 0, 0, 0.12), transparent 60%),
        radial-gradient(ellipse 40% 50% at 4% 82%, rgba(230, 0, 0, 0.06), transparent 60%),
        #050505;
}
.text-highlight {
    background: linear-gradient(110deg, #FF2D2D, #FF7A7A);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.porownywarka-hero__title { letter-spacing: -0.5px; }

/* Badge „LIVE DATA 2026" — pulsująca kropka */
.porownywarka-hero__badge { display: inline-flex !important; align-items: center; gap: 8px; }
.porownywarka-hero__badge::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: #FF3B3B; box-shadow: 0 0 8px #FF3B3B;
    animation: kfLive 1.5s ease-in-out infinite;
}
@keyframes kfLive { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }

/* Karta dashboardu */
.abstract-dashboard {
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(230,0,0,0.08), transparent 60%),
        linear-gradient(180deg, #100c0c, #070505) !important;
    box-shadow: 0 36px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(230,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.05) !important;
    transform: rotateY(-6deg) rotateX(4deg) !important;
}
.abstract-dashboard:hover { transform: rotateY(0) rotateX(0) translateY(-4px) !important; }

/* Nagłówek: kropki · tytuł · LIVE */
.abstract-dashboard__header {
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 18px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.abstract-dashboard__header .bulb--red { animation: kfLive 1.6s ease-in-out infinite; }
.abstract-dashboard__header::before {
    content: "RANKING AGENTÓW · 2026"; order: 5; margin-left: 12px;
    font-size: 0.66rem; font-weight: 800; letter-spacing: 1.4px; color: #cfcfcf;
}
.abstract-dashboard__header::after {
    content: "● LIVE"; order: 10; margin-left: auto;
    font-size: 0.6rem; font-weight: 800; letter-spacing: 1px; color: #00FF99;
    padding: 3px 9px; border-radius: 50px;
    background: rgba(0,255,153,0.1); border: 1px solid rgba(0,255,153,0.3);
}

/* Wiersze rankingu + numerki */
.abstract-dashboard__body { counter-reset: kfrank; }
.data-row {
    position: relative; gap: 12px;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.025) !important;
    counter-increment: kfrank;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.data-row:hover { transform: translateX(3px); background: rgba(255,255,255,0.05) !important; }
.data-row::before {
    content: counter(kfrank); flex: 0 0 auto;
    width: 24px; height: 24px; display: grid; place-items: center;
    font-size: 0.72rem; font-weight: 800; color: #cfcfcf;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
}

/* Zwycięzca (Kakobuy) — zielona poświata + złoty numerek + korona */
.data-row--highlight {
    border: 1px solid rgba(0,255,153,0.4) !important;
    background: linear-gradient(90deg, rgba(0,255,153,0.1), rgba(0,255,153,0.02)) !important;
}
.porownywarka-hero .data-row--highlight.pulse-animation { animation: kfWinnerGlow 2.6s ease-in-out infinite; }
@keyframes kfWinnerGlow {
    0%,100% { box-shadow: 0 0 22px rgba(0,255,153,0.12); }
    50% { box-shadow: 0 0 36px rgba(0,255,153,0.24); }
}
.data-row--highlight::before {
    color: #07140d; background: linear-gradient(135deg, #FFE066, #FFB800);
    border-color: #FFB800; box-shadow: 0 0 12px rgba(255,184,0,0.4);
}
.data-row--highlight::after {
    content: "\f521"; font-family: "KF Icons"; font-weight: 900;
    position: absolute; top: -10px; right: -8px;
    font-size: 0.66rem; color: #07140d;
    width: 24px; height: 24px; display: grid; place-items: center;
    background: linear-gradient(135deg, #FFE066, #FFB800); border-radius: 50%;
    box-shadow: 0 4px 12px rgba(255,184,0,0.45); transform: rotate(12deg);
}
.data-row__label { width: auto !important; min-width: 62px; }
.data-row--highlight .data-row__label { color: #fff; }

/* Paski — gradient, zaokrąglenie, animacja „wzrostu" */
.data-row__bars { margin: 0 6px !important; gap: 7px !important; }
.bar {
    height: 7px !important; border-radius: 50px !important; opacity: 1 !important;
    transform-origin: left; animation: kfBarGrow 0.9s cubic-bezier(.2,.8,.2,1) backwards;
}
@keyframes kfBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bar--green { background: linear-gradient(90deg, #00FF99, #00C97B) !important; box-shadow: 0 0 12px rgba(0,255,153,0.45); }
.bar--yellow { background: linear-gradient(90deg, #FFD24D, #E6A700) !important; }
.bar--red { background: linear-gradient(90deg, #FF6B6B, #C92A2A) !important; }

/* Wyniki */
.data-row__score { font-size: 1rem !important; width: auto !important; min-width: 52px; }
.data-row__score small { font-size: 0.62rem; color: #888; font-weight: 600; }
.data-row__score.text-green { color: #00FF99 !important; text-shadow: 0 0 14px rgba(0,255,153,0.45); }

/* Stopka: trend zaufania */
.abstract-dashboard__footer {
    height: auto !important; overflow: visible !important;
    margin-top: 22px !important; padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.dash-trend-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.72rem; font-weight: 600; color: #9a9a9a; margin-bottom: 6px;
}
.dash-trend-label i, .dash-trend-label strong { color: #00FF99; }
.dash-trend-label strong { font-weight: 800; }
.trend-line { width: 100%; height: 46px; display: block; filter: drop-shadow(0 4px 8px rgba(230,0,0,0.35)); }
.trend-line path { stroke-dasharray: 320; stroke-dashoffset: 320; animation: kfDraw 2.4s ease-out forwards !important; }
.trend-line .trend-area { stroke-dasharray: none; stroke-dashoffset: 0; animation: kfFadeIn 1s ease 1.4s backwards !important; }
@keyframes kfDraw { to { stroke-dashoffset: 0; } }
@keyframes kfFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Wyłączamy migotanie opacity wierszy (rozprasza) — zostaje sam glow zwycięzcy */
.porownywarka-hero .pulse-animation { animation: none; }

/* CTA */
.porownywarka-hero .btn-primary { box-shadow: 0 14px 32px rgba(230,0,0,0.32); }

/* =========================================================
   AI WEIGHT ENGINE (oszacuj pakę)
   ========================================================= */
.oszacuj-pake-minimal {
    background:
        radial-gradient(ellipse 60% 50% at 50% 110%, rgba(230, 0, 0, 0.08), transparent 60%),
        #060404;
}
.op-minimal__widget {
    position: relative;
    border-radius: 22px;
    padding: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)) ;
    border: 1px solid var(--kf-line);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.op-minimal__search-box {
    border: 1px solid rgba(230, 0, 0, 0.3) !important;
    box-shadow: 0 0 0 4px rgba(230, 0, 0, 0.07), 0 16px 36px rgba(0, 0, 0, 0.5);
    background: rgba(10, 8, 8, 0.9) !important;
}
.op-minimal__search-box .search-icon { color: var(--kf-red-lt) !important; }
.op-tag {
    backdrop-filter: blur(6px);
    border: 1px solid var(--kf-line) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.op-res-value.text-red { text-shadow: 0 0 20px rgba(230, 0, 0, 0.4); }

/* =========================================================
   KONWERTER LINKÓW
   ========================================================= */
.link-konwerter {
    background:
        radial-gradient(ellipse 45% 50% at 10% 40%, rgba(230, 0, 0, 0.08), transparent 60%),
        #050505;
}
.highlight-gradient {
    background: linear-gradient(110deg, #FF2D2D, #FF7A7A);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.conversion-box {
    border: 1px solid var(--kf-line) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
    background: linear-gradient(180deg, #0f0d0d, #070505) !important;
}
.kakobuy-glow-border {
    box-shadow: 0 0 0 1px rgba(230, 0, 0, 0.4), 0 0 22px rgba(230, 0, 0, 0.25) !important;
}
.teaser-cta-btn {
    position: relative; overflow: hidden;
    box-shadow: 0 12px 30px rgba(230, 0, 0, 0.3);
}
.teaser-cta-btn::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.2) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: kfShine 3.6s ease-in-out infinite;
}

/* =========================================================
   KNOWLEDGE HUB — bardziej unikalne karty
   ========================================================= */
.knowledge-hub { background: #070303; }
.hub-card {
    background: linear-gradient(180deg, #130707, #0b0404) !important;
    border: 1px solid var(--kf-line) !important;
}
/* Gradientowa obwódka pojawiająca się na hover */
.hub-card::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(230, 0, 0, 0.6), transparent 45%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.hub-card:hover::after { opacity: 1; }
/* Duża, „duchowa” ikona w tle karty */
.hub-card .card-icon-box { position: relative; z-index: 2; }
.tutorial-card .hub-card-bg::before,
.faq-card .hub-card-bg::before {
    content: "\f19d"; /* graduation cap */
    font-family: "KF Icons";
    font-weight: 900;
    position: absolute;
    right: -10px; bottom: -24px;
    font-size: 9rem;
    color: rgba(230, 0, 0, 0.06);
    line-height: 1;
    pointer-events: none;
}
.faq-card .hub-card-bg::before { content: "\f059"; /* question circle */ }
.card-icon-box { box-shadow: 0 10px 26px rgba(230, 0, 0, 0.18); }

/* =========================================================
   FOOTER
   ========================================================= */
.custom-footer {
    border-top: 1px solid var(--kf-line);
    background: linear-gradient(180deg, #070303, #030101) !important;
}
.footer-title { letter-spacing: 1.5px; }
.discord-button { box-shadow: 0 10px 24px rgba(88, 101, 242, 0.18); }
.social-icons a { transition: transform 0.25s ease, color 0.25s ease; }
.social-icons a:hover { transform: translateY(-3px); }

/* =========================================================
   RWD
   ========================================================= */
@media (max-width: 768px) {
    .kako-stats__item { padding: 6px 16px; }
    .tutorial-card .hub-card-bg::before,
    .faq-card .hub-card-bg::before { font-size: 6rem; }
}


/* ===== css/index/navbar-redesign.css ===== */
/* =========================================================
   KAKOFIND — NAVBAR REDESIGN 2026 (warstwa nakładkowa)
   Ładowana PO navbar.css. Czysty, „agent-shop" układ:
   logo · szybkie akcje · wyszukiwarka · waluta/agent · ulubione.
   Animacje wyłącznie na transform/opacity → płynnie, bez lagów.
   ========================================================= */

/* ---------- pasek ---------- */
.custom-navbar {
    padding: 9px 0;
    background: linear-gradient(180deg, rgba(14, 4, 4, 0.82) 0%, rgba(6, 0, 0, 0.66) 100%);
    backdrop-filter: blur(16px) saturate(135%);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    border-bottom: 1px solid rgba(255, 26, 26, 0.10);
    /* UWAGA: bez `contain: paint` — przycinałoby pełnowysokościową
       szufladę mobilną (position:fixed) do wysokości paska. */
}
.custom-navbar.is-scrolled { padding: 6px 0; }

.nav-inner {
    width: 95%;
    max-width: 1760px;
    gap: 14px;
}

/* ---------- logo ---------- */
.nav-brand { flex-shrink: 0; line-height: 0; }
.nav-brand img {
    width: 58px; height: 40px;
    border-radius: 11px;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}
.nav-brand a:hover img {
    transform: translateY(-1px) scale(1.04) rotate(-1.5deg);
    filter: drop-shadow(0 6px 14px rgba(230, 0, 0, .35));
}

/* =========================================================
   SZYBKIE AKCJE (chipy ikona-góra / etykieta-dół)
   ========================================================= */
.nav-quick {
    display: none;                 /* mobile: ukryte (jest hamburger) */
    align-items: stretch;
    gap: 6px;
    flex-shrink: 0;
}

.nav-chip {
    --chip-accent: #FF1A1A;
    --chip-accent-soft: rgba(230, 0, 0, .14);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 66px;
    padding: 7px 4px;
    border-radius: 14px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .025);
    color: #c9c9c9;
    overflow: hidden;
    transition: transform .28s cubic-bezier(.2,.8,.2,1),
                border-color .28s ease, background .28s ease, color .28s ease;
}
/* poświata pojawiająca się od dołu */
.nav-chip::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 50% 130%, var(--chip-accent-soft), transparent 70%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.nav-chip__ico {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .05);
    color: #fff;
    font-size: 14px;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .3s ease, color .3s ease, box-shadow .3s ease;
}
.nav-chip__lbl {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .2px;
    line-height: 1;
    color: inherit;
}
.nav-chip:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--chip-accent) 55%, transparent);
    background: rgba(255, 255, 255, .045);
    color: #fff;
}
.nav-chip:hover::before { opacity: 1; }
.nav-chip:hover .nav-chip__ico {
    transform: translateY(-1px) scale(1.08);
    background: var(--chip-accent);
    color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--chip-accent) 45%, transparent);
}
.nav-chip:active { transform: translateY(-1px) scale(.97); }

/* warianty akcentów */
.nav-chip--qc { --chip-accent: #00FF99; --chip-accent-soft: rgba(0, 255, 153, .14); }
.nav-chip--qc .nav-chip__ico { color: #66ffbb; }
/* Promocje: zimowe promki wleciały, więc chip jest niebieski z płatkiem śniegu */
.nav-chip--promocje { --chip-accent: #3BA7FF; --chip-accent-soft: rgba(59, 167, 255, .2); }
.nav-chip--promocje .nav-chip__ico {
    color: #8fd3ff;
    background: rgba(59, 167, 255, .1);
    border-color: rgba(120, 200, 255, .22);
}
.nav-chip--promocje:hover .nav-chip__ico { transform: translateY(-1px) scale(1.08) rotate(60deg); }

/* ---------- Produkty | Kategorie: para w jednej ramce ----------
   Oba chipy wyglądają jak reszta paska (ikona nad podpisem), a wspólna ramka i cienka
   kreska pokazują, że Kategorie należą do Produktów. W parze chip nie podskakuje przy
   najechaniu (rozerwałby ramkę), tylko podświetla tło i ikonę. */
.nav-prod {
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
    transition: border-color .28s ease, background .28s ease;
}
.nav-prod:hover { border-color: rgba(255, 70, 70, .28); background: rgba(255, 255, 255, .035); }
.nav-prod .nav-chip {
    border-color: transparent;
    background: transparent;
    border-radius: 13px;
}
.nav-prod .nav-chip:hover,
.nav-prod .nav-chip:active {
    transform: none;
    border-color: transparent;
    background: rgba(255, 255, 255, .045);
}
.nav-chip--cat .nav-chip__ico { color: #ffb0b0; }
/* Top (ranking /top): trzeci chip w ramce, bursztynowy jak puchar */
.nav-chip--top { --chip-accent: #FF9F1C; --chip-accent-soft: rgba(255, 159, 28, .18); }
.nav-chip--top .nav-chip__ico { color: #ffc46b; }
.nav-chip--cat::after,
.nav-chip--top::after {                 /* kreska między chipami w ramce */
    content: "";
    position: absolute;
    left: 0;
    top: 24%;
    bottom: 24%;
    width: 1px;
    background: linear-gradient(transparent, rgba(255, 255, 255, .16), transparent);
    pointer-events: none;
}
.nav-chip--cat.is-active,
.nav-chip--top.is-active { color: #fff; }
.nav-chip--cat.is-active::before,
.nav-chip--top.is-active::before { opacity: 1; }
.nav-chip--cat.is-active .nav-chip__ico,
.nav-chip--top.is-active .nav-chip__ico {
    background: var(--chip-accent);
    color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--chip-accent) 45%, transparent);
}

.nav-chip--kupony { --chip-accent: #FFD700; --chip-accent-soft: rgba(255, 215, 0, .16); }
.nav-chip--kupony .nav-chip__ico { color: #ffd866; }
.nav-chip--kupony::after {            /* mała kropka „nowość" — statyczna, bez migania */
    content: "";
    position: absolute; top: 6px; right: 10px;
    width: 6px; height: 6px; border-radius: 50%;
    background: #FFD700;
    box-shadow: 0 0 6px rgba(255,215,0,.6);
}

/* =========================================================
   „WIĘCEJ" — rozwijane menu z dodatkowymi podstronami (desktop)
   ========================================================= */
.nav-more { position: relative; display: flex; }
.nav-chip--more {
    --chip-accent: #8E8BFF;
    --chip-accent-soft: rgba(142, 139, 255, .16);
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
}
.nav-more.open .nav-chip--more {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--chip-accent) 55%, transparent);
    color: #fff;
}
.nav-more.open .nav-chip--more::before { opacity: 1; }
.nav-more.open .nav-chip--more .nav-chip__ico {
    transform: translateY(-1px) scale(1.08);
    background: var(--chip-accent); color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--chip-accent) 45%, transparent);
}

.nav-more-panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: 380px;
    max-width: min(380px, calc(100vw - 32px));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(20, 8, 8, .98), rgba(9, 3, 3, .98));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);
    transform-origin: top left;
    transition: opacity .2s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .2s;
    z-index: 1200;
}
.nav-more.open .nav-more-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity .2s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.nav-more-title {
    grid-column: 1 / -1;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #8a8a8a;
    padding: 10px 8px 4px;
}
.nav-more-title:first-child { padding-top: 4px; }
.nav-more-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.nav-more-item:hover { background: rgba(230, 0, 0, .10); border-color: rgba(230, 0, 0, .28); transform: translateY(-1px); }
.nav-more-item.active { background: rgba(230, 0, 0, .14); border-color: rgba(230, 0, 0, .40); }
.nmi-ico {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .06);
    color: #ff6a6a;
    font-size: 14px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-more-item:hover .nmi-ico { background: linear-gradient(160deg, #E60000, #8A0000); color: #fff; transform: scale(1.06); }
.nav-more-item.active .nmi-ico { background: linear-gradient(160deg, #E60000, #8A0000); color: #fff; }
.nmi-txt { display: flex; flex-direction: column; min-width: 0; }
.nmi-name { font-size: 13px; font-weight: 600; color: #ececec; line-height: 1.2; }
.nav-more-item:hover .nmi-name, .nav-more-item.active .nmi-name { color: #fff; }
.nmi-desc { font-size: 10.5px; color: #888; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =========================================================
   „NARZĘDZIA" (zastąpiło „Więcej", 2026-09): narzędzia jako kafelki,
   w bocznej kolumnie pozostałe strony. Panel jest w HTML strony.
   ========================================================= */
.nav-tools-panel {
    width: 640px;
    max-width: min(640px, calc(100vw - 32px));
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
}
.ntp-tools, .ntp-side { display: flex; flex-direction: column; min-width: 0; }
.ntp-side { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .07); }
.ntp-side .nav-more-title:not(:first-child) { padding-top: 14px; }
.ntp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ntp-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    min-height: 96px;
    padding: 12px;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    background: rgba(255, 255, 255, .025);
    border-color: rgba(255, 255, 255, .06);
}
button.ntp-card { width: 100%; }
.ntp-card .nmi-desc { white-space: normal; }
.ntp-card--qc .nmi-ico { color: #66ffbb; }
.ntp-card--qc:hover { background: rgba(0, 255, 153, .07); border-color: rgba(0, 255, 153, .30); }
.ntp-card--qc:hover .nmi-ico,
.ntp-card--qc.active .nmi-ico { background: linear-gradient(160deg, #00d27f, #007a4a); color: #fff; }
.ntp-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    color: #d4d4d4;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.ntp-link i { width: 18px; text-align: center; font-size: 13px; color: #ff6a6a; }
.ntp-link:hover { background: rgba(230, 0, 0, .10); border-color: rgba(230, 0, 0, .25); color: #fff; }
.ntp-link.active { background: rgba(230, 0, 0, .14); border-color: rgba(230, 0, 0, .40); color: #fff; }
/* dymek „Nowe kupony" (navbar.js) wisi nad paskiem - przy otwartym panelu nachodziłby na kafelki */
body:has(.nav-tools.open) .kfnc-ping { opacity: 0 !important; pointer-events: none !important; }

/* =========================================================
   WYSZUKIWARKA (rośnie na środku)
   ========================================================= */
.nav-search-trigger {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 560px;
    height: 46px;
    margin: 0 4px;
    gap: 10px;
    padding: 0 8px 0 18px;
    border-radius: 16px;
    background: rgba(0, 0, 0, .34);
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    transition: border-color .3s ease, background .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.nav-search-trigger i { font-size: 15px; }
.search-placeholder {
    flex: 1;
    text-align: left;
    font-size: 13.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-search-kbd {
    flex-shrink: 0;
    display: inline-flex; align-items: center;
    font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
    color: #b9b9b9;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 8px;
    padding: 5px 9px;
    transition: border-color .3s ease, color .3s ease;
}
.nav-search-trigger:hover {
    transform: none;
    border-color: rgba(255, 26, 26, .5);
    background: rgba(12, 0, 0, .5);
    box-shadow: 0 0 0 4px rgba(230, 0, 0, .07);
}
.nav-search-trigger:hover .nav-search-kbd { border-color: rgba(255,26,26,.4); color: #fff; }

/* =========================================================
   PRAWA STRONA — ulubione · waluta/agent
   ========================================================= */
.nav-auth { gap: 8px; }

.nav-fav-btn {
    width: 46px; height: 46px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .06);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, background .28s ease, box-shadow .28s ease;
}
.nav-fav-btn:hover {
    transform: translateY(-3px);
    background: rgba(230, 0, 0, .10);
    border-color: rgba(230, 0, 0, .55);
    box-shadow: 0 10px 22px rgba(230, 0, 0, .22);
}
.nav-fav-btn.has-favs { border-color: rgba(230, 0, 0, .35); color: #ff6a6a; }

/* =========================================================
   ULUBIONE — plakietka licznika + hover-statystyki
   ========================================================= */
.nav-fav { position: relative; display: inline-flex; }
.nav-fav-badge {
    position: absolute;
    top: -5px; right: -5px;
    min-width: 18px; height: 18px;
    padding: 0 4px;
    display: none;            /* JS pokazuje gdy > 0 */
    place-items: center;
    border-radius: 9px;
    background: linear-gradient(160deg, #FF1A1A, #B30000);
    color: #fff;
    font-size: 10px; font-weight: 800; line-height: 1;
    border: 2px solid #0a0202;
    box-shadow: 0 3px 8px rgba(230, 0, 0, .45);
    pointer-events: none;
    z-index: 2;
}

.fav-pop {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 300px;
    max-width: calc(100vw - 28px);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(20, 8, 8, .98), rgba(9, 3, 3, .98));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .62);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);
    transform-origin: top right;
    transition: opacity .2s ease, transform .26s cubic-bezier(.2,.8,.2,1), visibility 0s linear .2s;
    z-index: 1200;
}
.nav-fav.show .fav-pop {
    opacity: 1; visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity .2s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.fav-pop-inner { padding: 14px; }
.fav-pop-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: #fff;
    margin-bottom: 12px;
}
.fav-pop-head i { color: #FF3B3B; }

.fav-pop-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.fps {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .06);
}
.fps-num { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.1; }
.fps-lbl { font-size: 10px; font-weight: 600; color: #8c8c8c; text-transform: uppercase; letter-spacing: .4px; }

.fav-pop-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.fpl-item {
    display: flex; align-items: center; gap: 10px;
    padding: 6px; border-radius: 10px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .18s ease, border-color .18s ease;
}
.fpl-item:hover { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }
.fpl-item img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; background: #1a0000; flex-shrink: 0; }
.fpl-name {
    flex: 1; min-width: 0;
    font-size: 12px; color: #d8d8d8;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fpl-price { font-size: 12px; font-weight: 800; color: #ff6a6a; flex-shrink: 0; }
.fpl-more { font-size: 11px; color: #8c8c8c; text-align: center; padding: 4px; }

.fav-pop-empty { font-size: 12px; color: #9a9a9a; line-height: 1.6; text-align: center; padding: 6px 4px 14px; }
.fav-pop-empty i { color: #FF3B3B; }
.fav-pop-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; box-sizing: border-box;
    padding: 10px;
    border-radius: 11px;
    text-decoration: none;
    font-size: 12.5px; font-weight: 700;
    color: #fff;
    background: linear-gradient(160deg, #E60000, #8A0000);
    box-shadow: 0 8px 18px rgba(230, 0, 0, .28);
    transition: filter .2s ease, transform .2s ease;
}
.fav-pop-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* na wąskich ekranach nie pokazujemy hover-popovera (brak hovera/dotyk) */
@media (max-width: 1280px) {
    .fav-pop { display: none; }
}

/* segment waluta/agent (settings-panel.js przebudowuje .nav-prefs) */
.nav-settings-trigger {
    height: 46px;
    gap: 4px;
    padding: 4px 4px 4px 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .07);
    transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.nav-settings-trigger:hover {
    border-color: rgba(255, 26, 26, .45);
    background: rgba(28, 4, 4, .6);
    box-shadow: 0 0 16px rgba(230, 0, 0, .16);
}
.nav-prefs { font-size: 11px; }
.nav-pref-item { padding: 6px 9px; border-radius: 9px; }
.nav-pref-item i { color: #FF3B3B; }
.btn-icon {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: linear-gradient(160deg, #E60000, #8A0000);
}
.btn-icon i { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
/* zębatka kręci się TYLKO na hover (zamiast wiecznego requestAnimationFrame) */
.nav-settings-trigger:hover .btn-icon i { transform: rotate(90deg); }

/* =========================================================
   PRZEŁĄCZNIK DESKTOP / MOBILE
   ========================================================= */
@media (min-width: 1281px) {
    .nav-quick { display: flex; }
    .nav-menu { display: none; }          /* tekstowe menu tylko jako szuflada mobilna */
}
@media (min-width: 1600px) {
    .nav-chip { width: 72px; }
    .nav-chip__lbl { font-size: 11px; }
    .nav-search-trigger { height: 48px; max-width: 620px; }
}

/* średni desktop — chowamy etykiety chipów tylko gdy naprawdę ciasno
   (od 2026-08 chipów jest 7, więc próg podniesiony z 1360 na 1440) */
@media (min-width: 1281px) and (max-width: 1440px) {
    .nav-chip { width: 46px; }
    .nav-chip__lbl { display: none; }
}

/* mobile: wyszukiwarka znów jako czysty przycisk-ikona (równy z sercem/zębatką),
   ale chowamy podpowiedź klawiszową i tekst "Szukaj…" */
@media (max-width: 1280px) {
    .nav-search-kbd { display: none; }
    .nav-search-trigger {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        min-width: 0;
        margin: 0;
        padding: 0;
        gap: 0;
        border-radius: 13px;
        justify-content: center;
        overflow: visible;
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .08);
    }
    .nav-search-trigger .search-placeholder { display: none; }
    .nav-search-trigger i { font-size: 17px; }
    /* lupa + aparat (szukanie po zdjęciu) jako pigułka: css/index/search.css */
}

/* =========================================================
   SZUFLADA MOBILNA 2026 — dopracowane menu boczne
   (overlay + nagłówek wstrzykiwane przez js/index/navbarhamb.js)
   ========================================================= */

/* przyciemnienie strony pod szufladą */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 9997;
    background: rgba(4, 0, 0, .56);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
}
.nav-overlay.active { opacity: 1; visibility: visible; }

/* blokada przewijania tła, gdy szuflada otwarta */
body.nav-drawer-open { overflow: hidden; }

/* szuflada otwarta: chowamy hamburger (zamienia się w „X"), żeby nie było DWÓCH
   krzyżyków — zostaje jeden przycisk zamykania w nagłówku szuflady */
body.nav-drawer-open .hamburger-menu { display: none; }

@media (max-width: 1280px) {
    /* szuflada — trochę szersza, z miejscem na nagłówek */
    .nav-menu {
        width: 330px;
        max-width: 90vw;
        padding: 22px 18px calc(28px + env(safe-area-inset-bottom));
        gap: 6px;
        align-items: stretch;          /* nadpisuje align-items:center z bazy */
        box-shadow: -18px 0 60px rgba(0, 0, 0, .9);
    }

    /* nagłówek szuflady (logo + zamknij) */
    .nav-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0 12px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }
    .nav-drawer-head img {
        height: 32px; width: auto;
        border-radius: 10px;
    }
    .nav-drawer-close {
        width: 42px; height: 42px;
        display: grid; place-items: center;
        border-radius: 12px;
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .09);
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        transition: background .25s ease, border-color .25s ease, transform .3s cubic-bezier(.2,.8,.2,1);
    }
    .nav-drawer-close:hover {
        background: rgba(230, 0, 0, .16);
        border-color: rgba(230, 0, 0, .55);
        transform: rotate(90deg);
    }

    /* pozycje menu jako kafelki z ikoną w „pudełku" */
    .nav-menu > li { width: 100%; }
    /* rozwijane „Tools" — Narzędzia nad podlistą, nie obok */
    .nav-menu > li.dropdown {
        flex-direction: column;
        align-items: stretch;
    }
    .nav-menu .nav-link {
        width: 100%;
        height: auto;
        border: 1px solid transparent;
        border-radius: 13px;
        padding: 11px 12px;
        font-size: 15.5px;
        font-weight: 600;
        gap: 13px;
    }
    .nav-menu .nav-link > i:first-child {
        display: grid; place-items: center;
        flex-shrink: 0;
        width: 40px; height: 40px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .06);
        font-size: 16px;
        color: #ff5a5a;
        transition: background .25s ease, color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
    }
    .nav-menu .nav-link:hover {
        background: rgba(230, 0, 0, .08);
        border-color: rgba(230, 0, 0, .22);
        transform: none;
    }
    .nav-menu .nav-link:hover > i:first-child {
        transform: translateY(-2px) scale(1.06);
    }
    .nav-menu .nav-link.active {
        background: rgba(230, 0, 0, .15);
        border-color: rgba(230, 0, 0, .38);
        color: #fff;
    }
    .nav-menu .nav-link.active > i:first-child {
        background: linear-gradient(160deg, #E60000, #8A0000);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 6px 16px rgba(230, 0, 0, .4);
    }

    /* QC / Kupony — akcenty również w szufladzie */
    .nav-qc-btn > i:first-child { color: #66ffbb; }
    .nav-qc-btn:hover > i:first-child { background: #00FF99; color: #04130d; box-shadow: 0 6px 16px rgba(0,255,153,.35); }
    .nav-kupony-btn > i:first-child { color: #ffd866; }
    .nav-kupony-btn:hover > i:first-child { background: #FFD700; color: #2a2200; box-shadow: 0 6px 16px rgba(255,215,0,.35); }
    .nav-promocje-btn > i:first-child { color: #8fd3ff; background: rgba(59, 167, 255, .1); border-color: rgba(120, 200, 255, .22); }
    .nav-promocje-btn:hover > i:first-child { background: #3BA7FF; color: #fff; box-shadow: 0 6px 16px rgba(59, 167, 255, .38); }
    .nav-kategorie-btn > i:first-child { color: #ff8a8a; }
    .nav-top-btn > i:first-child { color: #ffc46b; }

    /* rozwijane „Tools" w szufladzie */
    .dropdown > .nav-link .arrow {
        margin-left: auto;
        width: auto; height: auto;
        background: none; border: none;
        font-size: 13px; color: #9a9a9a;
        transition: transform .3s ease, color .3s ease;
    }
    .dropdown.mobile-open > .nav-link .arrow { color: #ff5a5a; }
    .dropdown-menu {
        padding: 6px 0 6px 14px;
        gap: 2px;
    }
    .dropdown-menu a {
        gap: 12px;
        font-size: 14.5px;
        font-weight: 500;
        color: #cfcfcf;
        border-radius: 11px;
        padding: 10px 12px;
    }
    .dropdown-menu a > i {
        width: 22px; text-align: center;
        color: #ff7a7a;
    }
    .dropdown-menu a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
    .dropdown-menu a.active { background: rgba(230, 0, 0, .12); color: #fff; }
    /* nagłówki grup w rozwijanych „Narzędziach" */
    .dropdown-menu .nav-sub-title {
        display: block;
        padding: 12px 12px 4px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .8px;
        text-transform: uppercase;
        color: #7d7d7d;
    }

    /* delikatne wejście pozycji po otwarciu */
    .nav-menu.active > li {
        animation: navDrawerItemIn .42s cubic-bezier(.2,.8,.2,1) both;
    }
    .nav-menu.active > li:nth-of-type(1) { animation-delay: .05s; }
    .nav-menu.active > li:nth-of-type(2) { animation-delay: .09s; }
    .nav-menu.active > li:nth-of-type(3) { animation-delay: .13s; }
    .nav-menu.active > li:nth-of-type(4) { animation-delay: .17s; }
    .nav-menu.active > li:nth-of-type(5) { animation-delay: .21s; }
    .nav-menu.active > li:nth-of-type(6) { animation-delay: .25s; }
    .nav-menu.active > li:nth-of-type(7) { animation-delay: .29s; }
    .nav-menu.active > li:nth-of-type(8) { animation-delay: .33s; }
    .nav-menu.active > li:nth-of-type(9) { animation-delay: .37s; }
}

@keyframes navDrawerItemIn {
    from { opacity: 0; transform: translateX(22px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* dostępność / wydajność */
@media (prefers-reduced-motion: reduce) {
    .nav-chip, .nav-fav-btn, .nav-brand img, .btn-icon i { transition: none !important; }
    .nav-chip--kupony::after { animation: none; }
    .nav-menu.active > li { animation: none !important; }
    .nav-overlay { transition: opacity .15s ease; }
}

/* =========================================================
   ZĘBATKA BEZ PIGUŁKI (2026-10): w pasku została sama zębatka,
   bieżący język, waluta i agent są w panelu ustawień, który
   na desktopie otwiera się już po najechaniu (settings-panel.js). Markup .nav-prefs zostaje,
   bo settings-panel.js trzyma w nim aktualne wartości.
   ========================================================= */
.nav-settings-trigger,
.nav-settings-trigger:hover {
    height: auto;
    gap: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
.nav-settings-trigger .nav-prefs { display: none !important; }
.nav-settings-trigger .btn-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
}
.nav-settings-trigger:hover .btn-icon,
.nav-settings-trigger.is-open .btn-icon {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(230, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.nav-settings-trigger.is-open .btn-icon i { transform: rotate(90deg); }
@media (max-width: 1280px) {
    .nav-settings-trigger .btn-icon { width: 44px; height: 44px; border-radius: 13px; }
}

/* =========================================================
   PODGLĄDY W PASKU (js/index/nav-mega.js): jeden panel, który
   przy przejściu między chipami przesuwa się, zmienia rozmiar
   i podmienia treść. Tylko desktop z myszką (skrypt sam pilnuje).
   ========================================================= */
.nav-chip.kfm-on {
    border-color: color-mix(in srgb, var(--chip-accent) 55%, transparent);
    background: rgba(255, 255, 255, .045);
    color: #fff;
}
.nav-chip.kfm-on::before { opacity: 1; }
.nav-chip.kfm-on .nav-chip__ico {
    transform: translateY(-1px) scale(1.08);
    background: var(--chip-accent);
    color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--chip-accent) 45%, transparent);
}
.nav-quick > .nav-chip.kfm-on,
.nav-more .nav-chip.kfm-on { transform: translateY(-3px); }
.nav-prod:has(.kfm-on) { border-color: rgba(255, 70, 70, .28); background: rgba(255, 255, 255, .035); }
/* dymek „Nowe kupony” (navbar.js) nie może wisieć na otwartym podglądzie */
body.kfm-open .kfnc-ping { opacity: 0 !important; pointer-events: none !important; }

.kfm {
    --kfm-ease: cubic-bezier(.2, .8, .2, 1);
    position: absolute;
    left: 0;
    top: 64px;
    z-index: 1200;
    width: var(--kfm-w, 460px);
    height: var(--kfm-h, 200px);
    transform: translate3d(var(--kfm-x, 0px), 8px, 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    font-family: 'Poppins', sans-serif;
    text-align: left;
    transition: opacity .18s ease, transform .34s var(--kfm-ease), width .34s var(--kfm-ease),
                height .34s var(--kfm-ease), visibility 0s linear .18s;
}
.kfm.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(var(--kfm-x, 0px), 0, 0);
    transition: opacity .2s ease, transform .34s var(--kfm-ease), width .34s var(--kfm-ease),
                height .34s var(--kfm-ease), visibility 0s;
}
.kfm.kfm--snap,
.kfm.kfm--snap .kfm__arrow { transition: none !important; }
/* tło osobno, żeby strzałka mogła na nim leżeć */
.kfm::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(22, 8, 8, .985), rgba(10, 3, 3, .985));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .62), 0 0 40px rgba(230, 0, 0, .05);
}
/* most nad szczeliną między chipem a panelem: kursor nie „wypada” w drodze w dół */
.kfm::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
}
.kfm__arrow {
    position: absolute;
    top: -6px;
    left: 0;
    z-index: 1;
    width: 12px;
    height: 12px;
    border-radius: 3px 0 0 0;
    background: rgb(22, 8, 8);
    border-left: 1px solid rgba(255, 255, 255, .08);
    border-top: 1px solid rgba(255, 255, 255, .08);
    transform: translateX(calc(var(--kfm-ax, 40px) - 6px)) rotate(45deg);
    transition: transform .34s var(--kfm-ease);
}
.kfm__stage {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
}
.kfm__sec {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .32s var(--kfm-ease), visibility 0s linear .32s;
}
.kfm__sec:not(.is-on) { pointer-events: none; }
.kfm__sec.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .24s ease .05s, transform .32s var(--kfm-ease), visibility 0s;
}
.kfm__sec.is-on.from-l { transform: translateX(28px); }
.kfm__sec.is-on.from-r { transform: translateX(-28px); }
.kfm__sec.to-l { transform: translateX(-28px); }
.kfm__sec.to-r { transform: translateX(28px); }

/* --- elementy wspólne --- */
.kfm-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.kfm-head__ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(160deg, #E60000, #8A0000);
    color: #fff;
    font-size: 16px;
    box-shadow: 0 8px 18px rgba(230, 0, 0, .3);
}
.kfm-ico--gold { background: linear-gradient(160deg, #FFD24A, #C9930E); color: #2a1d00; box-shadow: 0 8px 18px rgba(255, 190, 40, .26); }
.kfm-ico--green { background: linear-gradient(160deg, #2fe08f, #007a4a); box-shadow: 0 8px 18px rgba(0, 210, 127, .26); }
.kfm-ico--blue { background: linear-gradient(160deg, #3BA7FF, #1460b8); box-shadow: 0 8px 18px rgba(59, 167, 255, .28); }
.kfm-head__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kfm-head__txt b { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.25; }
.kfm-head__txt span { font-size: 12.5px; color: #9d9d9d; line-height: 1.45; }
.kfm-sub {
    margin: 14px 0 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #8a8a8a;
}
.kfm-sub em { font-style: normal; color: #ff6a6a; margin-left: 4px; }
.kfm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kfm-chips--mt { margin-top: 12px; }
.kfm-chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .03);
    color: #dcdcdc;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.kfm-chip:hover { border-color: rgba(230, 0, 0, .5); background: rgba(230, 0, 0, .1); color: #fff; }
.kfm-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}
.kfm-hint { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: #8c8c8c; min-width: 0; }
.kfm-hint i { color: #ff6a6a; font-size: 11px; }
.kfm-foot__btns { display: flex; gap: 8px; flex-shrink: 0; }
.kfm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
    color: #e8e8e8;
    font: 600 12.5px 'Poppins', sans-serif;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.kfm-btn:hover { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); color: #fff; }
.kfm-btn--p {
    border-color: transparent;
    background: linear-gradient(160deg, #E60000, #8A0000);
    color: #fff;
    box-shadow: 0 8px 18px rgba(230, 0, 0, .28);
}
.kfm-btn--p:hover { border-color: transparent; background: linear-gradient(160deg, #E60000, #8A0000); filter: brightness(1.12); transform: translateY(-1px); }
.kfm-btn__arr { font-size: 11px; transition: transform .2s ease; }
.kfm-btn--p:hover .kfm-btn__arr { transform: translateX(3px); }
.kfm-btn--gold { border-color: transparent; background: linear-gradient(160deg, #FFD24A, #C9930E); color: #251a00; }
.kfm-btn--gold:hover { border-color: transparent; background: linear-gradient(160deg, #FFD24A, #C9930E); color: #251a00; filter: brightness(1.08); }
.kfm-btn--gold.is-done,
.kfm-btn--gold.is-done:hover { background: linear-gradient(160deg, #2fe08f, #0c9a5b); color: #fff; }
.kfm-err { grid-column: 1 / -1; margin: 0; padding: 10px 0; font-size: 12.5px; color: #9a9a9a; }
.kfm-skel {
    display: block;
    border-radius: 14px;
    background: linear-gradient(100deg, rgba(255, 255, 255, .03) 30%, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .03) 70%);
    background-size: 300% 100%;
    animation: kfmShimmer 1.2s linear infinite;
}
.kfm-skel--card { aspect-ratio: .74; }
.kfm-skel--tall { aspect-ratio: .62; }
@keyframes kfmShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* --- Baza: jedna liczba + skróty, bez listy --- */
.kfm-stat2 {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(230, 0, 0, .22);
    background: radial-gradient(120% 140% at 0% 0%, rgba(230, 0, 0, .2), rgba(230, 0, 0, .03));
}
.kfm-stat2 b { font-size: 28px; font-weight: 800; line-height: 1; color: #fff; }
.kfm-stat2 span { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: #e2e2e2; }
.kfm-stat2 em { font-style: normal; font-size: 11.5px; font-weight: 500; color: #9d9d9d; }

/* --- Kategorie --- */
.kfm-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kfm-cat {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 6px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .025);
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .25s var(--kfm-ease);
}
.kfm-cat:hover { border-color: rgba(230, 0, 0, .45); background: rgba(230, 0, 0, .08); transform: translateY(-2px); }
.kfm-cat__img {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    background: #1a0505;
    transition: transform .35s var(--kfm-ease);
}
.kfm-cat:hover .kfm-cat__img { transform: scale(1.07) rotate(-2deg); }
.kfm-cat__txt { display: flex; flex-direction: column; min-width: 0; }
.kfm-cat__txt b { font-size: 12.5px; font-weight: 700; color: #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kfm-cat__n { font-size: 10.5px; color: #8f8f8f; }

/* --- karty: Top, Outfity, Promocje --- */
.kfm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kfm-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 6px 6px 8px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .06);
    background: rgba(255, 255, 255, .025);
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .25s var(--kfm-ease);
}
.kfm-card:hover { border-color: rgba(230, 0, 0, .45); background: rgba(230, 0, 0, .07); transform: translateY(-2px); }
.kfm-card__pic {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 10px;
    background: #140505;
}
.kfm-card--tall .kfm-card__pic { aspect-ratio: 4 / 5; }
.kfm-card__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--kfm-ease); }
.kfm-card:hover .kfm-card__pic img { transform: scale(1.05); }
.kfm-card__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    padding: 0 2px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: #e6e6e6;
}
.kfm-card__price { padding: 0 2px; font-size: 12.5px; font-weight: 800; color: #ff6a6a; }
.kfm-card__price s { margin-left: 4px; font-size: 11px; font-weight: 500; color: #777; }
.kfm-card__meta { padding: 0 2px; font-size: 11px; font-weight: 600; color: #9a9a9a; }
.kfm-rank {
    position: absolute;
    top: 6px;
    left: 6px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
    color: #1b1200;
    background: linear-gradient(160deg, #FFD24A, #C9930E);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
}
.kfm-rank--2 { background: linear-gradient(160deg, #eef2f6, #9aa5b1); }
.kfm-rank--3 { background: linear-gradient(160deg, #f3b783, #a8582a); }
.kfm-off {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 3px 7px;
    border-radius: 8px;
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(160deg, #3BA7FF, #1460b8);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}

/* --- Konwerter: agenci --- */
.kfm-agents { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kfm-agent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 8px 2px 6px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .05);
    background: rgba(255, 255, 255, .025);
}
/* tło jest wtopione w miniatury graphics/inne/nav (jasne logo = ciemne tło, ciemne logo = białe) */
.kfm-agent img { width: 32px; height: 32px; border-radius: 9px; object-fit: contain; }
.kfm-agent span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 600; color: #bdbdbd; }
.kfm-note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 12px; color: #a9a9a9; }
.kfm-note i { color: #ff6a6a; }

/* --- QC Finder: kroki --- */
.kfm-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.kfm-steps li {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 13px;
    border: 1px solid rgba(0, 255, 153, .14);
    background: rgba(0, 255, 153, .04);
    font-size: 12px;
    line-height: 1.35;
    color: #d8d8d8;
}
.kfm-steps em {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
    color: #04130d;
    background: linear-gradient(160deg, #2fe08f, #00a865);
}

/* --- naklejka 2D w nagłówku podglądu (Kupony, Top, docelowo grafiki z MJ) --- */
.kfm-head--art { align-items: center; }
/* naklejka zastępuje kafelek z ikoną, żeby nagłówek nie miał dwóch obrazków */
.kfm-head--art .kfm-head__ico { display: none; }
.kfm-head__art {
    flex-shrink: 0;
    width: 80px;
    height: 68px;
    margin: -10px -4px -8px auto;
    object-fit: contain;
    transform: rotate(-7deg);
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45));
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.kfm__sec:hover .kfm-head__art { transform: rotate(-2deg) scale(1.06); }

/* --- Kupony --- */
.kfm-code {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 3px 12px;
    margin-top: 14px;
    padding: 14px;
    border-radius: 14px;
    border: 1px dashed rgba(255, 214, 102, .45);
    background: linear-gradient(150deg, rgba(40, 30, 7, .65), rgba(23, 17, 4, .65));
}
.kfm-code__lbl { grid-column: 1; font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #bfae7c; }
.kfm-code b { grid-column: 1; font-family: 'Courier New', monospace; font-size: 22px; font-weight: 800; letter-spacing: 2px; line-height: 1.2; color: #ffd866; }
.kfm-code__bonus { grid-column: 1; font-size: 11.5px; font-weight: 700; color: #8ff0b5; }
.kfm-code .kfm-btn { grid-column: 2; grid-row: 1 / span 3; }

/* --- Narzędzia: panel z HTML strony przeniesiony do podglądu --- */
.kfm__sec[data-k="tools"] { padding: 14px; }
.kfm .nav-tools-panel {
    position: static;
    width: auto;
    max-width: none;
    padding: 0;
    opacity: 1;
    visibility: inherit;          /* ukryta sekcja ma zostać ukryta (i nie łapać myszki) */
    transform: none;
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
}
.kfm .ntp-side { position: relative; }
.kfm .ntp-side::after {
    content: "";
    position: absolute;
    right: -2px;
    bottom: -4px;
    width: 104px;
    height: 98px;
    background: url(/graphics/nav-art/narzedzia-200.webp) center / contain no-repeat;
    transform: rotate(-8deg);
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45));
    pointer-events: none;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.kfm__sec[data-k="tools"]:hover .ntp-side::after { transform: rotate(-3deg) scale(1.05); }
/* Wycena paczki: pierwsza i wyróżniona w Narzędziach (chip zniknął z paska) */
.ntp-card--est {
    position: relative;
    overflow: hidden;
    border-color: rgba(230, 0, 0, .28);
    background: radial-gradient(120% 120% at 0% 0%, rgba(230, 0, 0, .16), rgba(255, 255, 255, .02));
}
.ntp-card--est .nmi-txt { position: relative; z-index: 1; max-width: 66%; }
.ntp-card--est::after {
    content: "";
    position: absolute;
    right: -16px;
    bottom: -8px;
    width: 92px;
    height: 62px;
    background: url(/graphics/mascot/web/parcel-fly-190.webp) center / contain no-repeat;
    transform: rotate(-6deg);
    pointer-events: none;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.ntp-card--est:hover::after { transform: rotate(-6deg) translate(5px, -4px); }
.ntp-card--track { position: relative; overflow: hidden; }
.ntp-card--track .nmi-txt { position: relative; z-index: 1; }
.ntp-card--track::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 96px;
    height: 55px;
    margin-top: -27px;
    background: url(/graphics/mascot/web/stage-plane-128.webp) center / contain no-repeat;
    opacity: .9;
    pointer-events: none;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.ntp-card--track:hover::after { transform: translateX(10px) rotate(-3deg); }

@media (prefers-reduced-motion: reduce) {
    .kfm, .kfm.open, .kfm__sec, .kfm__sec.is-on, .kfm__arrow { transition: opacity .12s ease, visibility 0s !important; }
    .kfm__sec.is-on.from-l, .kfm__sec.is-on.from-r, .kfm__sec.to-l, .kfm__sec.to-r { transform: none; }
    .kfm-skel { animation: none; }
}


/* ===== css/index/search.css ===== */
/* =========================================================
   WYSZUKIWARKA 2026-09: pasek w navbarze, paleta Ctrl+K, szukanie po zdjęciu.
   Logika: js/szukaj.js. Ładowany PO navbar.css i navbar-redesign.css.
   Motyw przewodni: narożniki wizjera (jak w aparacie) przy szukaniu po zdjęciu.
   ========================================================= */
@property --vf-l {
    syntax: '<length>';
    inherits: false;
    initial-value: 24px;
}

:root {
    --ks-bg: #110b0b;
    --ks-raise: rgba(255, 255, 255, .035);
    --ks-line: rgba(255, 255, 255, .075);
    --ks-line-2: rgba(255, 255, 255, .12);
    --ks-red: #ff2a2a;
    --ks-red-soft: rgba(255, 42, 42, .12);
    --ks-text: #f3eeee;
    --ks-muted: #a39a9a;
    --ks-dim: #7a7070;
    --ks-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* ---------- 1. Pasek w navbarze ---------- */
.nav-search-trigger:focus-visible {
    outline: none;
    border-color: rgba(255, 42, 42, .6);
    box-shadow: 0 0 0 3px rgba(230, 0, 0, .22);
}
.nav-search-trigger .nav-search-cam {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .045);
    color: #ff4d4d;
    font-size: 15px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.nav-search-trigger .nav-search-cam svg { display: block; }
.nav-search-trigger .nav-search-cam:hover,
.nav-search-trigger .nav-search-cam:focus-visible {
    outline: none;
    background: #e60000;
    border-color: #e60000;
    color: #fff;
}
.nav-search-trigger .nav-search-cam:active { transform: scale(.94); }
/* desktop: zamiast 18px z lewej i 8px z prawej, aparat dosuwa się do krawędzi pigułki */
.nav-search-trigger:has(.nav-search-cam) { padding-right: 6px; }

@media (max-width: 1280px) {
    /* lupa + aparat jako jedna pigułka (inaczej ikony nachodzą na siebie) */
    .nav-inner .nav-search-trigger:has(.nav-search-cam) {
        width: auto;
        min-width: 44px;
        padding: 0 5px 0 13px;
        gap: 10px;
        border-radius: 14px;
        justify-content: flex-start;
    }
    .nav-search-trigger .nav-search-cam {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        background: rgba(255, 42, 42, .13);
        border-color: rgba(255, 42, 42, .28);
        color: #ff5a5a;
    }
}
@media (max-width: 480px) {
    .nav-inner .nav-search-trigger:has(.nav-search-cam) {
        padding: 0 3px 0 10px;
        gap: 8px;
        border-radius: 11px;
    }
    .nav-search-trigger .nav-search-cam {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        font-size: 13px;
    }
}

/* ---------- 2. Okno palety ---------- */
.cmd-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 11vh 16px 24px;
    background: rgba(5, 2, 2, .66);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility 0s linear .18s;
}
.cmd-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity .18s ease, visibility 0s;
}
.cmd-modal {
    position: relative;
    width: min(680px, 100%);
    min-width: 0;
    max-height: min(740px, 82vh);
    display: flex;
    flex-direction: column;
    background: var(--ks-bg);
    border: 1px solid var(--ks-line-2);
    border-radius: 18px;
    box-shadow: 0 32px 90px rgba(0, 0, 0, .72), 0 0 70px rgba(230, 0, 0, .07);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow: hidden;
    color: var(--ks-text);
    font-family: 'Poppins', sans-serif;
    transform: translateY(-8px) scale(.985);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.cmd-overlay.active .cmd-modal { transform: none; }
/* dymek „Nowe kupony” (navbar.js) ma wyższy z-index i wisiałby nad paletą */
html.ks-lock .kfnc-ping { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.cmd-modal [hidden] { display: none !important; }

/* nagłówek: lupa · pole · wyczyść · aparat · Esc */
.cmd-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 62px;
    padding: 0 12px 0 20px;
    border-bottom: 1px solid var(--ks-line);
    flex-shrink: 0;
}
.cmd-header .search-icon {
    flex-shrink: 0;
    margin: 0;
    color: var(--ks-red);
    font-size: 17px;
    filter: none;
}
.cmd-header input {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 60px;
    margin: 0;
    padding: 0 4px;
    background: transparent;
    border: 0;
    outline: 0;
    box-shadow: none;
    color: #fff;
    font: 500 17px/1.2 'Poppins', sans-serif;
    letter-spacing: .1px;
}
.cmd-header input::placeholder { color: #6f6666; font-weight: 400; }
.cmd-header .ks-clear,
.cmd-header .cmd-cam-btn,
.cmd-header .cmd-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cmd-header .ks-clear {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .06);
    color: var(--ks-muted);
    font-size: 13px;
}
.cmd-header .ks-clear:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.cmd-header:not(.has-q) .ks-clear { display: none; }
.cmd-header .cmd-cam-btn {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid var(--ks-line-2);
    background: var(--ks-raise);
    color: #ff4d4d;
    font-size: 16px;
}
.cmd-header .cmd-cam-btn:hover { border-color: rgba(255, 42, 42, .55); background: rgba(255, 42, 42, .12); }
.cmd-header .cmd-cam-btn.is-on { background: #e60000; border-color: #e60000; color: #fff; }
.cmd-header .cmd-close {
    min-width: 40px;
    width: auto;
    height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--ks-line-2);
    background: rgba(255, 255, 255, .04);
    color: var(--ks-muted);
    font: 600 11px/1 var(--ks-mono);
}
.cmd-header .cmd-close i { display: none; }
.cmd-header .cmd-close:hover { color: #fff; border-color: rgba(255, 42, 42, .5); background: rgba(255, 42, 42, .1); }

/* treść */
.cmd-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 10px 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 42, 42, .25) transparent;
}
.cmd-body::-webkit-scrollbar { width: 6px; }
.cmd-body::-webkit-scrollbar-thumb { background: rgba(255, 42, 42, .25); border-radius: 6px; }

.ks-sec { padding: 12px 6px 2px; }
.ks-sec-h,
.ks-tools .cmd-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px 8px;
    color: var(--ks-dim);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.ks-sec-act {
    border: 0;
    background: none;
    padding: 2px 4px;
    color: var(--ks-dim);
    font: 500 12px 'Poppins', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    text-decoration: none;
}
.ks-sec-act:hover { color: #ff6b6b; }

/* przyciski */
.ks-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 11px;
    border: 1px solid var(--ks-line-2);
    background: rgba(255, 255, 255, .05);
    color: #eee;
    font: 600 13.5px/1 'Poppins', sans-serif;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, filter .15s ease, color .15s ease;
}
.ks-btn svg { font-size: 15px; flex-shrink: 0; }
.ks-btn:hover { border-color: rgba(255, 42, 42, .5); background: rgba(255, 42, 42, .1); color: #fff; }
.ks-btn-sm { height: 34px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; }
.ks-btn-sm svg { font-size: 14px; }
.ks-btn-red,
.ks-btn-red:hover {
    border-color: transparent;
    background: linear-gradient(180deg, #ff2a2a, #d10f0f);
    color: #fff;
    box-shadow: 0 8px 22px rgba(230, 0, 0, .28);
}
.ks-btn-red:hover { filter: brightness(1.08); }

/* chipy */
.ks-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ks-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid var(--ks-line-2);
    background: var(--ks-raise);
    color: #e6dfdf;
    font: 500 13px/1 'Poppins', sans-serif;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ks-chip:hover,
.ks-chip.selected,
.ks-chip-rec:has(> .ks-nav.selected) {
    border-color: rgba(255, 42, 42, .5);
    background: rgba(255, 42, 42, .1);
    color: #fff;
}
.ks-chip-rec { padding: 0 5px 0 0; gap: 0; }
.ks-chip-rec > .ks-nav {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 100%;
    padding: 0 6px 0 12px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    border-radius: 999px;
}
.ks-chip-rec > .ks-nav svg { color: var(--ks-dim); font-size: 13px; }
.ks-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--ks-dim);
    font-size: 11px;
    cursor: pointer;
}
.ks-chip-x:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* kategorie */
.ks-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ks-cat {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--ks-line);
    background: var(--ks-raise);
    color: #e6dfdf;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.ks-cat img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.ks-cat span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-cat:hover, .ks-cat.selected { border-color: rgba(255, 42, 42, .45); background: rgba(255, 42, 42, .08); color: #fff; }

/* skróty zapisane w HTML strony (#cmdDefault) */
.ks-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 12px 6px 2px;
}
.ks-tools .cmd-group-title { grid-column: 1 / -1; padding-bottom: 2px; }
.ks-tools .cmd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--ks-line);
    background: var(--ks-raise);
    color: inherit;
    text-decoration: none;
    transform: none;
    transition: background .15s ease, border-color .15s ease;
}
.ks-tools .cmd-item:hover,
.ks-tools .cmd-item.selected { border-color: rgba(255, 42, 42, .45); background: rgba(255, 42, 42, .08); transform: none; }
.ks-tools .cmd-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid rgba(255, 42, 42, .2);
    background: rgba(255, 42, 42, .1);
    color: #ff5a5a;
    font-size: 13px;
    box-shadow: none;
}
.ks-tools .cmd-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ks-tools .cmd-name {
    color: #eee;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ks-tools .cmd-desc,
.ks-tools .cmd-item .arrow { display: none; }

/* pasek "Szukaj po zdjęciu" w widoku startowym */
.ks-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 12px 6px 2px;
    padding: 12px 12px 12px 14px;
    border-radius: 14px;
    border: 1px dashed rgba(255, 255, 255, .17);
    background: linear-gradient(100deg, rgba(255, 42, 42, .08), rgba(255, 42, 42, 0) 62%);
    cursor: pointer;
    outline: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.ks-strip:hover,
.ks-strip:focus-visible,
.is-drag .ks-strip { border-color: rgba(255, 42, 42, .65); background-color: rgba(255, 42, 42, .05); }
.ks-strip-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ks-strip-txt b { color: #fff; font-size: 14px; font-weight: 600; }
.ks-strip-txt span { color: var(--ks-muted); font-size: 12.5px; line-height: 1.4; }

/* ---------- 3. Wyniki wpisywania ---------- */
.ks-all {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 2px;
    padding: 9px 12px 9px 9px;
    border-radius: 12px;
    border: 1px solid var(--ks-line);
    background: var(--ks-raise);
    color: #ddd;
    font-size: 14px;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.ks-all:hover, .ks-all.selected { border-color: rgba(255, 42, 42, .45); background: rgba(255, 42, 42, .08); }
.ks-all-ic {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ks-red-soft);
    color: #ff4d4d;
    font-size: 15px;
}
.ks-all-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-all-t b { color: #fff; font-weight: 600; }
.ks-count {
    flex-shrink: 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--ks-red-soft);
    color: #ffb0b0;
    font-size: 12px;
    font-weight: 600;
}
.ks-enter {
    flex-shrink: 0;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid var(--ks-line-2);
    color: var(--ks-muted);
    font: 600 11px/1 var(--ks-mono);
    opacity: 0;
    transition: opacity .15s ease;
}
.ks-all.selected .ks-enter { opacity: 1; }

.ks-catrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 2px 2px; }
.ks-catrow-l { margin-right: 2px; color: var(--ks-dim); font-size: 12px; }
.ks-chip-cat { height: 30px; padding: 0 11px; font-size: 12.5px; }
.ks-chip-n { color: var(--ks-dim); font-size: 11.5px; font-weight: 600; }

.ks-qbody { transition: opacity .15s ease; }
.ks-qbody.is-stale { opacity: .5; }
.ks-qbody > .ks-sec-h { padding: 14px 6px 6px; }
.ks-prod {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px 6px 6px;
    border-radius: 12px;
    border: 1px solid transparent;
    color: inherit;
    text-decoration: none;
    transition: background .12s ease, border-color .12s ease;
}
.ks-prod:hover, .ks-prod.selected { background: rgba(255, 255, 255, .045); border-color: var(--ks-line); }
.ks-prod.selected { border-color: rgba(255, 42, 42, .38); }
.ks-prod-img {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--ks-line);
    background: #1b1414;
}
.ks-prod-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks-prod-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ks-prod-name { color: #eee; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-prod-name mark { background: none; color: #ff6b6b; font-weight: 600; }
.ks-prod-meta { color: var(--ks-muted); font-size: 12px; }
.ks-prod-price { flex-shrink: 0; color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; }

/* ---------- 4. Szukanie po zdjęciu ---------- */
/* narożniki wizjera: 8 pasków z gradientów, długość w --vf-l (animowana) */
.ks-drop,
.ks-scan-ph,
.ks-strip-ic {
    --vf-c: #ff2a2a;
    --vf-w: 2px;
    background-image:
        linear-gradient(var(--vf-c), var(--vf-c)), linear-gradient(var(--vf-c), var(--vf-c)),
        linear-gradient(var(--vf-c), var(--vf-c)), linear-gradient(var(--vf-c), var(--vf-c)),
        linear-gradient(var(--vf-c), var(--vf-c)), linear-gradient(var(--vf-c), var(--vf-c)),
        linear-gradient(var(--vf-c), var(--vf-c)), linear-gradient(var(--vf-c), var(--vf-c));
    background-size:
        var(--vf-l) var(--vf-w), var(--vf-w) var(--vf-l),
        var(--vf-l) var(--vf-w), var(--vf-w) var(--vf-l),
        var(--vf-l) var(--vf-w), var(--vf-w) var(--vf-l),
        var(--vf-l) var(--vf-w), var(--vf-w) var(--vf-l);
    background-position:
        left top, left top, right top, right top,
        left bottom, left bottom, right bottom, right bottom;
    background-repeat: no-repeat;
}
.ks-strip-ic {
    --vf-l: 9px;
    --vf-w: 1.5px;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background-color: rgba(255, 42, 42, .1);
    color: #ff4040;
    font-size: 18px;
}

.ks-drop {
    --vf-l: 26px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 250px;
    margin: 14px 6px 6px;
    padding: 26px 20px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, .018);
    text-align: center;
    cursor: pointer;
    outline: none;
    transition: --vf-l .28s cubic-bezier(.2, .8, .2, 1), background-color .2s ease;
}
.ks-drop::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(255, 42, 42, .09), transparent 62%);
    pointer-events: none;
}
.ks-drop:hover,
.ks-drop:focus-visible,
.is-drag .ks-drop { --vf-l: 44px; background-color: rgba(255, 42, 42, .045); }
.ks-drop > * { position: relative; }
.ks-drop-ic {
    width: 62px;
    height: 62px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 42, 42, .28);
    background: rgba(255, 42, 42, .12);
    color: #ff4040;
    font-size: 27px;
}
.ks-drop-t { color: #fff; font-size: 16px; font-weight: 600; }
.ks-drop-s { color: var(--ks-muted); font-size: 13px; }
.ks-drop kbd,
.ks-strip kbd {
    display: inline-block;
    min-width: 20px;
    padding: 2px 5px;
    border-radius: 5px;
    border: 1px solid var(--ks-line-2);
    background: rgba(255, 255, 255, .06);
    color: #ddd;
    font: 600 11px/1.3 var(--ks-mono);
}
.ks-drop .ks-btn { margin-top: 10px; }
.ks-tip {
    margin: 6px 24px 12px;
    color: var(--ks-dim);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

/* ładowanie: Twoje zdjęcie w wizjerze + linia skanu */
.ks-scan { display: flex; align-items: center; gap: 18px; padding: 18px 8px 8px; }
.ks-scan-ph {
    --vf-l: 16px;
    position: relative;
    width: 96px;
    height: 96px;
    padding: 7px;
    flex-shrink: 0;
    box-sizing: border-box;
}
.ks-scan-ph img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 5px; }
.ks-scan-line {
    position: absolute;
    left: 7px;
    right: 7px;
    top: 7px;
    height: 2px;
    border-radius: 2px;
    background: #ff3b3b;
    box-shadow: 0 0 10px 2px rgba(255, 42, 42, .6);
    animation: ksScan 1.5s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
@keyframes ksScan { to { transform: translateY(80px); } }
.ks-scan-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ks-scan-txt b { color: #fff; font-size: 15px; font-weight: 600; }
.ks-scan-txt span { color: var(--ks-muted); font-size: 12.5px; }

.ks-skel span,
.ks-skel i,
.ks-prod-skel .ks-prod-img,
.ks-prod-skel i {
    background: linear-gradient(90deg, rgba(255, 255, 255, .04) 25%, rgba(255, 255, 255, .085) 50%, rgba(255, 255, 255, .04) 75%);
    background-size: 200% 100%;
    animation: ksShim 1.2s linear infinite;
}
@keyframes ksShim { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ks-skel { display: flex; flex-direction: column; gap: 7px; }
.ks-skel span { display: block; aspect-ratio: 1 / 1; border-radius: 12px; }
.ks-skel i { display: block; height: 10px; width: 85%; border-radius: 5px; }
.ks-skel i + i { width: 45%; }
.ks-prod-skel { pointer-events: none; }
.ks-prod-skel .ks-prod-img { border-color: transparent; }
.ks-prod-skel i { display: block; height: 11px; width: 62%; border-radius: 5px; }
.ks-prod-skel i + i { width: 28%; }

/* wyniki po zdjęciu */
.ks-imghead { display: flex; align-items: center; gap: 12px; padding: 14px 6px 12px; }
.ks-imghead-q {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(255, 42, 42, .45);
}
.ks-imghead-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ks-imghead-txt b { color: #fff; font-size: 15px; font-weight: 600; }
.ks-imghead-txt span { color: var(--ks-muted); font-size: 12.5px; }
.ks-imghead-act { display: flex; gap: 6px; flex-shrink: 0; }

.ks-imggrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 16px 12px;
    padding: 4px 6px 8px;
}
.ks-icard { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: inherit; text-decoration: none; border-radius: 12px; }
.ks-icard-ph {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--ks-line);
    background: #1b1414;
    transition: border-color .15s ease;
}
.ks-icard-ph > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.ks-icard:hover .ks-icard-ph,
.ks-icard.selected .ks-icard-ph { border-color: rgba(255, 42, 42, .6); }
.ks-icard:hover .ks-icard-ph > img { transform: scale(1.04); }
.ks-icard-match {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 40%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
.ks-icard-match img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks-icard-match em {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(230, 0, 0, .9);
    color: #fff;
    font: normal 700 8px/1.6 'Poppins', sans-serif;
    letter-spacing: .05em;
    text-align: center;
}
.ks-icard-name {
    min-height: 2.6em;
    color: #e6dfdf;
    font-size: 12.5px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ks-icard-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #fff; font-size: 13px; font-weight: 600; }
.ks-pct {
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--ks-red-soft);
    color: #ff8a8a;
    font-size: 11px;
    font-weight: 600;
}
img.is-ph { object-fit: contain !important; padding: 18%; opacity: .45; }

/* puste wyniki i błędy */
.ks-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 30px 18px 26px;
    color: var(--ks-muted);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}
.ks-empty b { color: #eee; font-size: 15px; font-weight: 600; }
.ks-empty-ic {
    width: 46px;
    height: 46px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ks-red-soft);
    color: #ff5a5a;
    font-size: 22px;
}
.ks-empty-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }

/* plik przeciągany nad paletą */
.cmd-modal.is-drag::after {
    content: attr(data-drop-label);
    position: absolute;
    inset: 8px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(255, 42, 42, .75);
    border-radius: 14px;
    background: rgba(20, 4, 4, .9);
    color: #fff;
    font: 600 16px 'Poppins', sans-serif;
    pointer-events: none;
}

/* stopka ze skrótami */
.cmd-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 18px;
    border-top: 1px solid var(--ks-line);
    background: rgba(0, 0, 0, .25);
    flex-shrink: 0;
}
.cmd-hint { display: flex; align-items: center; gap: 4px; color: var(--ks-dim); font-size: 12px; white-space: nowrap; }
.cmd-hint > span:last-child { margin-left: 4px; }
.cmd-hint .key-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 5px;
    border: 1px solid var(--ks-line-2);
    background: rgba(255, 255, 255, .05);
    color: #bbb;
    font: 600 11px/1 var(--ks-mono);
}
.cmd-footer .ks-hint-img { margin-left: auto; }

/* fokus z klawiatury */
.cmd-modal .ks-nav:focus-visible,
.cmd-modal .ks-btn:focus-visible,
.cmd-modal .ks-chip-x:focus-visible,
.cmd-modal .ks-sec-act:focus-visible,
.cmd-header .ks-clear:focus-visible,
.cmd-header .cmd-cam-btn:focus-visible,
.cmd-header .cmd-close:focus-visible,
.ks-drop:focus-visible,
.ks-strip:focus-visible {
    outline: 2px solid rgba(255, 60, 60, .85);
    outline-offset: 2px;
}

/* ---------- 5. "Duży widok" wyników po zdjęciu ---------- */
.kf-imgbrowse {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: flex;
    flex-direction: column;
    background: rgba(8, 5, 6, .95);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-family: 'Poppins', sans-serif;
    animation: kfIbIn .2s ease;
}
@keyframes kfIbIn { from { opacity: 0; } to { opacity: 1; } }
.kf-ib-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.kf-ib-q { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; border: 1px solid rgba(255, 42, 42, .5); }
.kf-ib-title { color: #fff; font-size: 18px; font-weight: 700; }
.kf-ib-title b { color: #ff6b6b; }
.kf-ib-hint { color: #888; font-size: 13px; }
.kf-ib-close {
    margin-left: auto;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    color: #ccc;
    font-size: 18px;
    cursor: pointer;
}
.kf-ib-close:hover { background: rgba(255, 42, 42, .15); border-color: rgba(255, 42, 42, .4); color: #fff; }
.kf-ib-grid {
    flex: 1;
    overflow-y: auto;
    align-content: start;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
    padding: 22px;
}
.kf-bcard { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.kf-bc-stage {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: #1a1414;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.kf-bcard:hover .kf-bc-stage { border-color: rgba(255, 42, 42, .4); box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
.kf-bc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s ease; }
.kf-bc-alt { opacity: 0; }
.kf-bcard.swapped .kf-bc-main { opacity: 0; }
.kf-bcard.swapped .kf-bc-alt { opacity: 1; }
.kf-bc-score {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(0, 0, 0, .6);
    color: #ff8585;
    font-size: 11px;
    font-weight: 700;
}
.kf-bc-mini {
    position: absolute;
    right: 9px;
    bottom: 9px;
    z-index: 3;
    width: 38%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(255, 42, 42, .5), 0 4px 14px rgba(0, 0, 0, .55);
    cursor: pointer;
    transition: transform .2s ease;
}
.kf-bc-mini:hover { transform: scale(1.06); }
.kf-bc-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s ease; }
.kf-bc-mini-main { opacity: 0; }
.kf-bcard.swapped .kf-bc-mini-alt { opacity: 0; }
.kf-bcard.swapped .kf-bc-mini-main { opacity: 1; }
.kf-bc-tag {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: rgba(230, 0, 0, .9);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
    text-align: center;
}
.kf-bc-meta { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.kf-bc-name {
    color: #eee;
    font-size: 13px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kf-bc-sub { color: #888; font-size: 12px; }

/* ---------- 6. Telefon: paleta na cały ekran ---------- */
@media (max-width: 760px) {
    html.ks-lock,
    html.ks-lock body { overflow: hidden; }
    .cmd-overlay {
        padding: 0;
        background: var(--ks-bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .cmd-modal {
        width: 100%;
        height: 100%;
        height: 100dvh;
        max-height: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        transform: none !important;
    }
    .cmd-header {
        min-height: 58px;
        padding: env(safe-area-inset-top) 6px 0 16px;
        gap: 6px;
    }
    .cmd-header input { height: 56px; font-size: 16px; }
    .cmd-header .cmd-close {
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--ks-muted);
        font-size: 20px;
    }
    .cmd-header .cmd-close .ks-esc { display: none; }
    .cmd-header .cmd-close i { display: inline-block; }
    .cmd-body { padding: 2px 8px calc(20px + env(safe-area-inset-bottom)); }
    .cmd-footer { display: none; }
    .ks-cats { gap: 6px; }
    .ks-cat {
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        height: 72px;
        padding: 6px 4px;
        font-size: 11.5px;
    }
    .ks-cat img { width: 28px; height: 28px; }
    .ks-tools { grid-template-columns: 1fr; }
    .ks-tools .cmd-desc {
        display: block;
        color: var(--ks-muted);
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ks-strip .ks-btn { display: none; }
    .ks-drop { min-height: 230px; margin-top: 10px; }
    .ks-scan { padding-top: 14px; }
    .ks-imghead { flex-wrap: wrap; }
    .ks-imghead-act { width: 100%; }
    .ks-imghead-act .ks-btn { flex: 1; }
    .ks-only-wide { display: none !important; }
    .ks-imggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
    .kf-ib-bar { padding: 12px 14px; }
    .kf-ib-hint { display: none; }
    .kf-ib-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 14px; }
}
@media (max-width: 400px) {
    .ks-prod-img { width: 46px; height: 46px; }
    .ks-prod-name { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .cmd-overlay,
    .cmd-modal,
    .ks-drop { transition: none; }
    .ks-scan-line { animation: none; transform: translateY(40px); }
    .ks-skel span,
    .ks-skel i,
    .ks-prod-skel .ks-prod-img,
    .ks-prod-skel i { animation: none; }
    .ks-icard:hover .ks-icard-ph > img { transform: none; }
}


/* ===== css/index/categories.css ===== */
/* =========================================================
   KAKOFIND — PASEK KATEGORII (catnav)
   Dwa przewijane rzędy „kafli" z białymi ikonami na ciemnych
   squircle-ach. Maskotka wita po prawej. Animacje na transform.
   ========================================================= */

.catnav {
    position: relative;
    padding: clamp(34px, 5vw, 70px) 0 clamp(24px, 3vw, 44px);
    background:
        radial-gradient(ellipse 60% 80% at 88% 0%, rgba(230, 0, 0, .07), transparent 60%),
        #060303;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .05);
}
.catnav__inner {
    width: 92%;
    max-width: 1500px;
    margin: 0 auto;
}

/* ---------- nagłówek + maskotka ---------- */
.catnav__head {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(20px, 2.6vw, 34px);
}
.catnav__badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 13px;
    border-radius: 30px;
    background: rgba(230, 0, 0, .1);
    border: 1px solid rgba(230, 0, 0, .22);
    color: #ff5a5a;
    font-size: .72rem; font-weight: 700;
    letter-spacing: 1.1px; text-transform: uppercase;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 0 1px rgba(230,0,0,.08), 0 8px 22px rgba(230,0,0,.12);
}
.catnav__title {
    font-size: clamp(1.6rem, 3.3vw, 2.6rem);
    font-weight: 800;
    color: #fff;
    margin: 12px 0 8px;
    letter-spacing: -.5px;
}
.catnav__title .text-red { color: #FF1A1A; }
.catnav__desc {
    color: #9a9a9a;
    font-size: clamp(.9rem, 1vw, 1rem);
    max-width: 540px;
    line-height: 1.6;
    margin: 0;
}
.catnav__mascot {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: clamp(110px, 13vw, 168px);
    height: auto;
    object-fit: contain;
    /* czerwona neonowa poświata wzdłuż sylwetki + miękki cień głębi */
    filter:
        drop-shadow(0 0 12px rgba(255, 42, 42, .45))
        drop-shadow(0 16px 26px rgba(0, 0, 0, .6));
    transform-origin: bottom center;
    animation: catMascotFloat 6s ease-in-out infinite;
    align-self: flex-end;
    margin-bottom: -8px;
}
@keyframes catMascotFloat {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    50%      { transform: translateY(-12px) rotate(1.6deg) scale(1.02); }
}

/* reflektor-poświata za maskotką w nagłówku (czysto wizualnie, bez wpływu na układ) */
.catnav__head { isolation: isolate; }
.catnav__intro { position: relative; z-index: 1; }
.catnav__head::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: -18px;
    width: clamp(170px, 20vw, 260px);
    aspect-ratio: 1;
    background: radial-gradient(circle at 50% 60%, rgba(255, 26, 26, .30), rgba(230, 0, 0, .10) 46%, transparent 70%);
    filter: blur(10px);
    border-radius: 50%;
    pointer-events: none;
    animation: catStageGlow 5.5s ease-in-out infinite;
}
@keyframes catStageGlow {
    0%, 100% { opacity: .5;  transform: scale(1); }
    50%      { opacity: .95; transform: scale(1.08); }
}

/* ---------- rzędy ---------- */
.catnav__rows { display: flex; flex-direction: column; gap: 14px; }

.catnav-row {
    display: flex;
    gap: clamp(10px, 1vw, 16px);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 2px 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    /* miękkie wygaszanie na krawędziach */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}
.catnav-row::-webkit-scrollbar { display: none; }
.catnav-row.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.catnav-row.is-dragging .catnav-chip { pointer-events: none; }

/* ---------- kafelek ---------- */
.catnav-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    width: 84px;
    padding: 4px 2px;
    text-decoration: none;
    color: #b6b6b6;
    transition: color .25s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.catnav-chip__disc {
    position: relative;
    display: grid; place-items: center;
    width: 66px; height: 66px;
    border-radius: 21px;
    background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 22px rgba(0,0,0,.4);
    overflow: hidden;
    transition: border-color .28s ease, box-shadow .28s ease, transform .28s cubic-bezier(.34,1.56,.64,1), background .28s ease;
}
/* czerwona poświata na hover */
.catnav-chip__disc::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(80% 80% at 50% 120%, rgba(230,0,0,.45), transparent 70%);
    opacity: 0;
    transition: opacity .3s ease;
}
.catnav-chip__disc img {
    width: 42px; height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.5));
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    z-index: 1;
}
.catnav-chip__disc i {
    font-size: 24px;
    color: #fff;
    z-index: 1;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.catnav-chip__name {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1px;
    line-height: 1.1;
    text-align: center;
    color: inherit;
}

/* hover / focus */
.catnav-chip:hover, .catnav-chip:focus-visible { color: #fff; outline: none; }
.catnav-chip:hover .catnav-chip__disc,
.catnav-chip:focus-visible .catnav-chip__disc {
    transform: translateY(-5px);
    border-color: rgba(255, 26, 26, .6);
    box-shadow: 0 16px 30px rgba(0,0,0,.5), 0 0 22px rgba(230,0,0,.28);
}
.catnav-chip:hover .catnav-chip__disc::after { opacity: 1; }
.catnav-chip:hover .catnav-chip__disc img,
.catnav-chip:hover .catnav-chip__disc i { transform: scale(1.12); }
.catnav-chip:active .catnav-chip__disc { transform: translateY(-2px) scale(.95); }

/* warianty */
.catnav-chip--all .catnav-chip__disc {
    background: linear-gradient(160deg, #E60000, #8A0000);
    border-color: rgba(255, 90, 90, .5);
}
.catnav-chip--all .catnav-chip__disc i { color: #fff; }
.catnav-chip--all .catnav-chip__name { color: #ff8a8a; }
.catnav-chip--alt .catnav-chip__disc { border-style: dashed; border-color: rgba(255,255,255,.16); }
.catnav-chip--alt .catnav-chip__disc i { color: #FF6B6B; }

/* aktywny (gdy JS doda .is-active) */
.catnav-chip.is-active .catnav-chip__disc {
    border-color: #FF1A1A;
    box-shadow: 0 0 0 1px rgba(255,26,26,.5), 0 0 20px rgba(230,0,0,.3);
}
.catnav-chip.is-active .catnav-chip__name { color: #fff; }

/* ---------- RWD ---------- */
@media (max-width: 900px) {
    .catnav__mascot { display: none; }
    .catnav__head::after { display: none; }
    .catnav__head { margin-bottom: 18px; }
}
@media (max-width: 560px) {
    .catnav-chip { width: 72px; }
    .catnav-chip__disc { width: 58px; height: 58px; border-radius: 18px; }
    .catnav-chip__disc img { width: 36px; height: 36px; }
    .catnav-chip__name { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .catnav__mascot { animation: none; }
    .catnav__head::after { animation: none; }
    .catnav-chip, .catnav-chip__disc, .catnav-chip__disc img, .catnav-chip__disc i { transition: none !important; }
}


/* ===== css/index/mascots.css ===== */
/* =========================================================
   KAKOFIND — MASKOTKI + REDESIGN HERO + BAND DISCORD
   Streetwearowe naklejki (czerwień/czerń/biel) wplecione w sekcje.
   Wszystkie ruchy na transform/opacity → płynnie, bez repaintów.
   ========================================================= */

/* ===================== HERO 2-KOLUMNY ===================== */
.kako-hero {
    height: auto;
    min-height: min(88vh, 820px);
    margin-top: 0;
    padding: clamp(96px, 10vw, 140px) 0 clamp(40px, 5vw, 70px);
}
.kako-hero__container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 4vw, 64px);
    width: 90vw;
    max-width: 1400px;
    text-align: left;
}
.kako-hero__copy {
    flex: 1 1 54%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
}
.kako-hero__title {
    font-size: clamp(2.7rem, 5.1vw, 5.1rem);
    text-align: left;
    margin: 0 0 1.2rem;
    letter-spacing: -1px;
}
.kako-hero__description {
    font-size: clamp(.95rem, 1.15vw, 1.15rem);
    max-width: 46ch;
    min-height: 3.4em;
    margin: 0 0 2rem;
    text-align: left;
}
.kako-actions { justify-content: flex-start; margin-bottom: 2.4rem; gap: 14px; flex-wrap: wrap; }
.kako-btn { padding: 14px 22px; font-size: .92rem; border-radius: 13px; }
.kako-btn__icon { width: 19px; height: 19px; }
.kako-stats { gap: 0; }

/* --- prawa kolumna: maskotka na cokole + bąbelki ikon --- */
.kako-hero__art {
    flex: 1 1 40%;
    position: relative;
    display: grid;
    place-items: center;
    align-self: center;
    min-height: 440px;
}
.kako-hero__mascot {
    position: relative;
    z-index: 2;
    width: clamp(260px, 30vw, 430px);
    height: auto;
    filter: drop-shadow(0 30px 45px rgba(0, 0, 0, .6));
    animation: heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-16px) rotate(-1deg); }
}
/* poświata za maskotką */
.kako-hero__halo {
    position: absolute; z-index: 0;
    width: 78%; aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230, 0, 0, .34) 0%, rgba(230, 0, 0, .08) 42%, transparent 66%);
    filter: blur(8px);
    animation: heroHalo 5s ease-in-out infinite;
}
@keyframes heroHalo {
    0%, 100% { opacity: .8; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.06); }
}
/* obracający się pierścień */
.kako-hero__ring {
    position: absolute; z-index: 1;
    width: 70%; aspect-ratio: 1;
    border-radius: 50%;
    border: 1px dashed rgba(255, 26, 26, .28);
    animation: heroSpin 26s linear infinite;
}
.kako-hero__ring::after {
    content: ""; position: absolute; top: -4px; left: 50%;
    width: 7px; height: 7px; border-radius: 50%;
    background: #FF1A1A; box-shadow: 0 0 12px #FF1A1A; transform: translateX(-50%);
}
@keyframes heroSpin { to { transform: rotate(360deg); } }
/* cień-cokół pod nogami */
.kako-hero__pedestal {
    position: absolute; z-index: 1; bottom: 7%;
    width: 46%; height: 26px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 70%);
    filter: blur(5px);
}

/* bąbelki z ikonami kategorii */
.hero-bubble {
    position: absolute; z-index: 3;
    display: grid; place-items: center;
    width: 58px; height: 58px;
    border-radius: 16px;
    background: rgba(18, 8, 8, .72);
    border: 1px solid rgba(255, 26, 26, .25);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .5);
    backdrop-filter: blur(6px);
    animation: bubbleFloat 5s ease-in-out infinite;
}
.hero-bubble img { width: 34px; height: 34px; object-fit: contain; }
.hero-bubble--a { top: 8%;  left: 2%;  animation-delay: 0s;   }
.hero-bubble--b { top: 26%; right: 0%; animation-delay: .8s;  }
.hero-bubble--c { bottom: 22%; left: -2%; animation-delay: 1.6s; }
.hero-bubble--d { bottom: 6%; right: 6%; animation-delay: 2.4s; }
@keyframes bubbleFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* ===================== MASKOTKI SEKCYJNE ===================== */
.index-products-preview,
.oszacuj-pake-minimal { position: relative; overflow: hidden; }
.preview-container,
.op-minimal__container,
.porownywarka-hero__container,
.teaser-container,
.partner-teaser__container { position: relative; z-index: 2; }

.sec-mascot {
    position: absolute;
    z-index: 1;
    height: auto;
    pointer-events: none;
    object-fit: contain;
    filter: drop-shadow(0 22px 32px rgba(0, 0, 0, .55));
    opacity: .97;
    animation: secFloat 6.5s ease-in-out infinite;
}
@keyframes secFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-13px) rotate(1deg); }
}

/* podgląd produktów — niosący torby, dół-lewo */
.sec-mascot--stack { width: clamp(120px, 13vw, 188px); left: 1%; bottom: 0; animation-delay: .3s; }

/* porównywarka — z kalkulatorem, przy wizualizacji */
.porownywarka-hero__visual { position: relative; }
.sec-mascot--analyze { width: clamp(110px, 12vw, 170px); left: -10%; bottom: -4%; z-index: 1; animation-delay: .6s; }

/* AI waga — trzyma tablicę, dół-prawo */
.sec-mascot--glow { width: clamp(110px, 12vw, 168px); right: 2%; bottom: -2%; animation-delay: 1s; }

/* konwerter — z trybikiem, dół-lewo */
.link-konwerter { position: relative; overflow: hidden; }
.sec-mascot--gears { width: clamp(110px, 12vw, 172px); left: 1%; bottom: 0; opacity: .9; animation-delay: 1.3s; }

/* partnerstwo — przytula serce, obok karty */
.partner-teaser__visual { position: relative; }
.sec-mascot--heart { width: clamp(110px, 12vw, 165px); left: -14%; bottom: -6%; z-index: 1; animation-delay: .4s; }

/* oficjalny arkusz — siedząca maskotka z boku */
.arkusz-main-section { position: relative; overflow: hidden; }
.arkusz-main-note-card { position: relative; z-index: 2; }
.sec-mascot--sit { width: clamp(86px, 9vw, 128px); left: 1.5%; bottom: -6px; z-index: 1; opacity: .92; animation-delay: .9s; }
@media (max-width: 1150px) { .sec-mascot--sit { opacity: .4; } }

/* ===================== HUB (Poradniki / FAQ) ===================== */
.hub-card { position: relative; overflow: hidden; }
.hub-mascot {
    position: absolute;
    right: -18px; bottom: -10px;
    width: clamp(90px, 9vw, 128px);
    height: auto;
    opacity: .22;
    pointer-events: none;
    filter: grayscale(.1);
    transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1);
    z-index: 1;
}
.hub-card .card-content, .hub-card .card-icon-box { position: relative; z-index: 2; }
.hub-card:hover .hub-mascot { opacity: .85; transform: translateY(-6px) rotate(-2deg); }

/* ===================== CAT-RAIL: maskotka „search" ===================== */
.catnav__seek {
    position: absolute;
    left: 0; bottom: 8px;
    width: clamp(80px, 8vw, 120px);
    height: auto;
    opacity: .95;
    pointer-events: none;
    /* spójnie z maskotką nagłówka: neonowa czerwona poświata + cień */
    filter:
        drop-shadow(0 0 11px rgba(255, 42, 42, .4))
        drop-shadow(0 14px 22px rgba(0, 0, 0, .55));
    animation: catSeekIdle 7s ease-in-out infinite;
    transform-origin: bottom center;
    z-index: 0;
}
@keyframes catSeekIdle {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    50%      { transform: translateY(-10px) rotate(-1.5deg) scale(1.025); }
}

/* ===================== BAND DISCORD ===================== */
.dc-band {
    position: relative;
    overflow: hidden;
    padding: clamp(50px, 7vw, 96px) 0;
    background:
        radial-gradient(ellipse 50% 80% at 12% 50%, rgba(88, 101, 242, .14), transparent 60%),
        radial-gradient(ellipse 50% 80% at 88% 50%, rgba(230, 0, 0, .12), transparent 60%),
        linear-gradient(180deg, #070303, #0a0408);
    border-top: 1px solid rgba(255, 255, 255, .05);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    display: flex;
    justify-content: center;
}
.dc-band__glow {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 120%, rgba(88, 101, 242, .15), transparent 55%);
    pointer-events: none;
}
.dc-band__grid {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
    background-size: 30px 30px;
    -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000 30%, transparent 75%);
    opacity: .5; pointer-events: none;
}
.dc-band__content {
    position: relative; z-index: 3;
    width: 90%; max-width: 720px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
}
.dc-band__badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 15px; border-radius: 30px;
    background: rgba(88, 101, 242, .14);
    border: 1px solid rgba(88, 101, 242, .4);
    color: #aab4ff; font-size: .74rem; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    margin-bottom: 1.1rem;
}
.dc-band__title {
    font-size: clamp(1.7rem, 3.6vw, 3rem);
    font-weight: 800; color: #fff; line-height: 1.1;
    margin: 0 0 1rem; letter-spacing: -.5px;
}
.dc-band__title .text-red { color: #FF1A1A; }
.dc-band__desc {
    color: #a9a9b6; font-size: clamp(.92rem, 1.1vw, 1.06rem);
    line-height: 1.65; margin: 0 0 1.9rem; max-width: 560px;
}
.dc-band__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.dc-band__btn {
    display: inline-flex; align-items: center; gap: 11px;
    padding: 15px 30px; border-radius: 14px;
    background: linear-gradient(135deg, #5865F2, #4752c4);
    color: #fff; font-weight: 700; font-size: 1rem; text-decoration: none;
    box-shadow: 0 14px 34px rgba(88, 101, 242, .4);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
}
.dc-band__btn i { font-size: 1.2rem; }
.dc-band__btn:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 20px 44px rgba(88, 101, 242, .55); }
.dc-band__btn:hover i { animation: dcWiggle .5s ease-in-out infinite; }
@keyframes dcWiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.dc-band__stat { color: #c9c9d4; font-size: .92rem; }
.dc-band__stat strong { color: #fff; font-size: 1.18rem; font-weight: 800; }

.dc-band__mascot {
    position: absolute; bottom: 0; z-index: 2;
    height: auto; pointer-events: none;
    filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .55));
    animation: secFloat 6s ease-in-out infinite;
}
.dc-band__mascot--headset { left: 3%; width: clamp(140px, 16vw, 232px); animation-delay: .2s; }
.dc-band__mascot--wave    { right: 3%; width: clamp(130px, 15vw, 212px); animation-delay: 1.1s; }

/* ===================== RWD ===================== */
@media (max-width: 1180px) {
    .dc-band__mascot--headset { width: 150px; left: 0; opacity: .65; }
    .dc-band__mascot--wave { width: 140px; right: 0; opacity: .65; }
}
@media (max-width: 980px) {
    /* hero → kolumna; maskotka mniejsza, bez bąbelków */
    .kako-hero__container { flex-direction: column; text-align: center; }
    .kako-hero__copy { align-items: center; text-align: center; flex: none; }
    .kako-hero__title { text-align: center; }
    .kako-hero__description { text-align: center; max-width: 90%; margin-left: auto; margin-right: auto; }
    .kako-actions { justify-content: center; }
    .kako-hero__art { flex: none; min-height: 300px; width: 100%; margin-top: 18px; order: 3; }
    .kako-hero__mascot { width: clamp(200px, 48vw, 280px); }
    .hero-bubble { display: none; }

    /* maskotki sekcyjne — zejdź z drogi treści */
    .sec-mascot--analyze, .sec-mascot--heart { opacity: .5; }
}
@media (max-width: 760px) {
    .sec-mascot, .catnav__seek { display: none; }   /* czyściej na telefonie */
    .dc-band__mascot { display: none; }
    .dc-band__content { max-width: 100%; }
    .hub-mascot { opacity: .5; width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
    .kako-hero__mascot, .kako-hero__halo, .kako-hero__ring, .hero-bubble,
    .sec-mascot, .catnav__seek, .dc-band__mascot { animation: none !important; }
}


/* ===== css/index/seo-faq.css ===== */
/* ============================================================
   SEKCJA SEO: Kakobuy Spreadsheet / QC Finder / Item Finder + FAQ
   ============================================================ */

.kf-seo {
    position: relative;
    background-color: #050505;
    padding: 90px 20px;
    overflow: hidden;
}

.kf-seo::before {
    content: '';
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 380px;
    background: radial-gradient(ellipse at center, rgba(230, 0, 0, 0.10) 0%, transparent 70%);
    pointer-events: none;
}

.kf-seo__container {
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.kf-seo__head {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 50px;
}

.kf-seo__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(230, 0, 0, 0.10);
    border: 1px solid rgba(230, 0, 0, 0.35);
    color: #FF4D4D;
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 7px 16px;
    border-radius: 50px;
    margin-bottom: 18px;
}

.kf-seo__title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.25;
    margin: 0 0 16px;
}

.kf-seo__title .text-red { color: #E60000; }

.kf-seo__desc {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    color: #A9A9A9;
    line-height: 1.7;
    margin: 0;
}

.kf-seo__desc strong { color: #E8E8E8; font-weight: 600; }

/* ---------- Karty narzędzi ---------- */
.kf-seo__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 70px;
}

.kf-seo__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 28px 26px;
    text-decoration: none;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.kf-seo__card:hover {
    transform: translateY(-5px);
    border-color: rgba(230, 0, 0, 0.55);
    background: rgba(230, 0, 0, 0.05);
}

.kf-seo__card-ico {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(230, 0, 0, 0.22), rgba(230, 0, 0, 0.06));
    border: 1px solid rgba(230, 0, 0, 0.35);
    color: #FF1A1A;
    font-size: 1.35rem;
}

.kf-seo__card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.18rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 4px 0 0;
}

.kf-seo__card-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: #A0A0A0;
    line-height: 1.65;
    margin: 0;
    flex-grow: 1;
}

.kf-seo__card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: #FF4D4D;
    margin-top: 6px;
    transition: gap 0.2s ease;
}

.kf-seo__card:hover .kf-seo__card-cta { gap: 13px; }

/* ---------- FAQ ---------- */
.kf-seo__faq {
    max-width: 880px;
    margin: 0 auto;
}

.kf-seo__faq-title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.25rem, 2.6vw, 1.65rem);
    font-weight: 700;
    color: #FFFFFF;
    text-align: center;
    margin: 0 0 28px;
}

.kf-faq__item {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.25s ease;
}

.kf-faq__item[open] { border-color: rgba(230, 0, 0, 0.45); }

.kf-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
    padding: 18px 22px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.98rem;
    font-weight: 600;
    color: #F0F0F0;
    user-select: none;
}

.kf-faq__q::-webkit-details-marker { display: none; }

.kf-faq__q i {
    color: #E60000;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.kf-faq__item[open] .kf-faq__q i { transform: rotate(180deg); }

.kf-faq__a {
    padding: 0 22px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.92rem;
    color: #ABABAB;
    line-height: 1.7;
}

.kf-faq__a strong { color: #E8E8E8; }

.kf-faq__a a {
    color: #FF4D4D;
    text-decoration: none;
    border-bottom: 1px dashed rgba(255, 77, 77, 0.5);
}

.kf-faq__a a:hover { color: #FF1A1A; border-bottom-style: solid; }

/* ---------- Responsywność ---------- */
@media (max-width: 920px) {
    .kf-seo__grid { grid-template-columns: 1fr; gap: 16px; margin-bottom: 55px; }
    .kf-seo { padding: 70px 16px; }
}


/* ===== css/index/section-scroller.css ===== */
/* =========================================================
   SECTION SCROLLER — mała strzałka na dole/na górze ekranu,
   która płynnie przeskakuje między sekcjami strony głównej.
   Subtelna, dopasowana do reszty serwisu (ciemny glass + czerwień).
   ========================================================= */
.kf-scroller {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none; /* tylko przyciski łapią klik */
}

.kf-scroller__btn {
    pointer-events: auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(15, 15, 15, 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    opacity: 0.82;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
                background 0.25s ease, border-color 0.25s ease,
                opacity 0.35s ease, visibility 0.35s ease;
}

.kf-scroller__btn:hover {
    opacity: 1;
    background: rgba(230, 0, 0, 0.92);
    border-color: rgba(230, 0, 0, 0.9);
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(230, 0, 0, 0.4);
}

.kf-scroller__btn:active {
    transform: translateY(-1px) scale(0.95);
}

.kf-scroller__btn:focus-visible {
    outline: 2px solid #E60000;
    outline-offset: 3px;
}

/* Przycisk "do góry" — mniejszy, pojawia się dopiero po przewinięciu */
.kf-scroller__btn--up {
    width: 35px;
    height: 35px;
    font-size: 0.8rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
}
.kf-scroller.show-up .kf-scroller__btn--up {
    opacity: 0.78;
    visibility: visible;
    transform: translateY(0);
}

/* Na samym dole strony chowamy strzałkę w dół */
.kf-scroller.at-bottom .kf-scroller__btn--down {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
}

/* Delikatna podpowiedź — bardzo subtelne, powolne bujanie ikony w dół */
.kf-scroller__btn--down i {
    animation: kfBob 2.8s ease-in-out infinite;
}
.kf-scroller__btn--down:hover i {
    animation: none;
}
@keyframes kfBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
    .kf-scroller__btn--down i { animation: none; }
    .kf-scroller__btn { transition: opacity 0.2s ease, visibility 0.2s ease; }
}

@media (max-width: 600px) {
    .kf-scroller { bottom: 16px; gap: 7px; }
    .kf-scroller__btn { width: 37px; height: 37px; font-size: 0.85rem; }
    .kf-scroller__btn--up { width: 32px; height: 32px; }
}


/* ===== css/index/special-offers.css ===== */
/* =========================================================
   KAKOFIND — OFERTY SPECJALNE (sekcja na stronie głównej)
   Wyświetla się NAD "Przeglądaj kategorie". Slider zweryfikowanych
   promocji (do 10+ kart) sterowany z panelu admina/sprzedawcy.
   Paleta spójna z resztą: czerń #050505 / czerwień #E60000·#FF2D2D.
   ========================================================= */

.special-offers {
    position: relative;
    padding: 64px 0 56px;
    overflow: hidden;
    isolation: isolate;
}

/* Wyróżniające, ale spójne tło: czerwona poświata u góry + delikatne
   pasy „taśmy ostrzegawczej” w rogach, żeby od razu krzyczało SALE. */
.special-offers::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse 70% 60% at 50% -8%, rgba(230, 0, 0, 0.18), transparent 62%),
        radial-gradient(circle at 92% 14%, rgba(255, 45, 45, 0.10), transparent 40%),
        linear-gradient(180deg, rgba(230, 0, 0, 0.05), transparent 30%);
    pointer-events: none;
}
.special-offers::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 0);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 25%, transparent 78%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 25%, transparent 78%);
    opacity: 0.5;
    pointer-events: none;
}

.so-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
}

/* Taśma ostrzegawcza na górnej krawędzi sekcji (cały rok; zimą zamiast niej
   wiszą sople z css/shared/winter.css). Grafika: graphics/allseason/web/divider-tape-*. */
.kf-tape {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 42px;
    z-index: 2;
    pointer-events: none;
    background-image: url(/graphics/allseason/web/divider-tape-551.webp);
    background-image: image-set(url(/graphics/allseason/web/divider-tape-551.webp) 1x, url(/graphics/allseason/web/divider-tape-1102.webp) 2x);
    background-repeat: repeat-x;
    background-size: auto 100%;
}
@media (max-width: 768px) {
    .kf-tape { height: 30px; }
}

/* Maskotka biegnąca (FAST) — dekoracyjna, w prawym górnym rogu */
.so-deco-fast {
    position: absolute;
    top: -34px;
    right: 8px;
    width: 168px;
    height: auto;
    opacity: 0.92;
    pointer-events: none;
    filter: drop-shadow(0 14px 26px rgba(230, 0, 0, 0.28));
    z-index: 1;
    animation: soFloat 6s ease-in-out infinite;
}

@keyframes soFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-10px) rotate(1deg); }
}

/* ---------- Nagłówek ---------- */
.so-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    margin-bottom: 26px;
}

.so-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #E60000, #8A0000);
    border: 1px solid rgba(255, 90, 90, 0.45);
    box-shadow: 0 0 0 1px rgba(230, 0, 0, 0.18), 0 10px 26px rgba(230, 0, 0, 0.30);
}
.so-badge i { font-size: 0.85rem; animation: soPulse 1.8s ease-in-out infinite; }
@keyframes soPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.18); opacity: 0.82; }
}

.so-title {
    margin: 0;
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.5px;
    color: #f5f5f5;
}
.so-title .text-red {
    background: linear-gradient(120deg, #FF2D2D, #E60000 60%, #FF6a6a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.so-subtitle {
    margin: 0;
    max-width: 640px;
    color: var(--kf-muted, #9a9a9a);
    font-size: 1rem;
    line-height: 1.55;
}

/* ---------- „Literka” + opis (callout zaufania) ---------- */
.so-intro {
    display: flex;
    align-items: center;
    gap: 22px;
    max-width: 940px;
    margin: 0 auto 34px;
    padding: 18px 24px 18px 18px;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(230, 0, 0, 0.08), rgba(255, 255, 255, 0.025));
    border: 1px solid rgba(230, 0, 0, 0.22);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}
.so-intro::before {
    /* czerwona „taśma” po lewej */
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, #FF2D2D, #8A0000);
}

.so-intro__art {
    flex-shrink: 0;
    width: 118px;
    height: 118px;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(230, 0, 0, 0.3));
    animation: soFloat 5s ease-in-out infinite;
}

.so-intro__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}
.so-intro__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #FF6a6a;
}
.so-intro__title i { color: #2ecc71; }
.so-intro__desc {
    margin: 0;
    color: #d9d9d9;
    font-size: 0.96rem;
    line-height: 1.6;
}
.so-intro__desc strong { color: #fff; }

/* ---------- Pasek narzędzi: filtry + nawigacja ---------- */
.so-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.so-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.so-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--kf-line, rgba(255, 255, 255, 0.1));
    color: #cfcfcf;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}
.so-filter i { font-size: 0.82rem; opacity: 0.85; }
.so-filter:hover { border-color: rgba(230, 0, 0, 0.5); color: #fff; transform: translateY(-1px); }
.so-filter.is-active {
    background: linear-gradient(135deg, #E60000, #8A0000);
    border-color: rgba(255, 90, 90, 0.5);
    color: #fff;
    box-shadow: 0 8px 20px rgba(230, 0, 0, 0.28);
}

.so-nav {
    display: flex;
    gap: 8px;
}
.so-nav-btn {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid var(--kf-line, rgba(255, 255, 255, 0.12));
    color: #fff;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.so-nav-btn:hover:not(:disabled) {
    background: #E60000;
    border-color: #E60000;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(230, 0, 0, 0.35);
}
.so-nav-btn:disabled { opacity: 0.32; cursor: default; }

/* ---------- Slider / rail ---------- */
.so-rail-wrap { position: relative; }
.so-rail {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px 4px 22px;
    margin: 0 -4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.so-rail::-webkit-scrollbar { display: none; }

/* Miękkie wygaszenie krawędzi railu, sugeruje „jest więcej” */
.so-rail-wrap::before,
.so-rail-wrap::after {
    content: "";
    position: absolute;
    top: 0; bottom: 22px;
    width: 46px;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.so-rail-wrap::before { left: -4px; background: linear-gradient(90deg, #050505, transparent); }
.so-rail-wrap::after { right: -4px; background: linear-gradient(270deg, #050505, transparent); }
.so-rail-wrap.at-start::before { opacity: 0; }
.so-rail-wrap.at-end::after { opacity: 0; }

/* ---------- Karta promocji ---------- */
.so-card {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: clamp(240px, 80vw, 286px);
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--kf-line, rgba(255, 255, 255, 0.09));
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.28s ease, box-shadow 0.28s ease;
}
.so-card:hover {
    transform: translateY(-6px);
    border-color: rgba(230, 0, 0, 0.55);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(230, 0, 0, 0.25);
}

.so-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #0c0c0c;
    overflow: hidden;
}
.so-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.so-card:hover .so-card__media img { transform: scale(1.06); }

/* Wstążka zniżki */
.so-card__disc {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    padding: 7px 12px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 1.02rem;
    line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, #FF2D2D, #B00000);
    box-shadow: 0 8px 18px rgba(230, 0, 0, 0.45);
    letter-spacing: -0.5px;
}
.so-card__disc small { font-size: 0.6rem; font-weight: 800; opacity: 0.92; }

/* Tag „Nowość” */
.so-card__new {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #07210f;
    background: linear-gradient(135deg, #4dffa3, #19c46a);
    box-shadow: 0 6px 14px rgba(25, 196, 106, 0.35);
}

.so-card__body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 14px 15px 16px;
    flex: 1;
}

.so-card__name {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
}

.so-card__desc {
    margin: 0;
    font-size: 0.82rem;
    color: var(--kf-muted, #9a9a9a);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.so-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    color: var(--kf-muted, #9a9a9a);
}
.so-card__rating { color: #ffc83d; font-weight: 700; }
.so-card__rating i { font-size: 0.72rem; }

.so-card__prices {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: auto;
    flex-wrap: wrap;
}
.so-card__price-new {
    font-size: 1.32rem;
    font-weight: 900;
    color: #FF4040;
    letter-spacing: -0.5px;
}
.so-card__price-old {
    font-size: 0.9rem;
    color: #8c8c8c;
    text-decoration: line-through;
    text-decoration-color: rgba(230, 0, 0, 0.6);
}
.so-card__save {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 800;
    color: #4dffa3;
    background: rgba(25, 196, 106, 0.12);
    border: 1px solid rgba(25, 196, 106, 0.3);
    padding: 3px 8px;
    border-radius: 8px;
    white-space: nowrap;
}

/* Pasek dostępności (limit sztuk) */
.so-card__stock { display: flex; flex-direction: column; gap: 5px; }
.so-card__stock-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.so-card__stock-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #FF2D2D, #FFA53d);
}
.so-card__stock-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #ffb35c;
}
.so-card__stock-label i { font-size: 0.68rem; }

.so-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #E60000, #B00000);
    border: 1px solid rgba(255, 90, 90, 0.4);
    transition: filter 0.2s ease, transform 0.2s ease;
}
.so-card:hover .so-card__cta { filter: brightness(1.12); }
.so-card__cta i { transition: transform 0.2s ease; }
.so-card:hover .so-card__cta i { transform: translateX(3px); }

/* ---------- CTA na koniec listy ---------- */
.so-foot {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.so-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #E60000, #8A0000);
    border: 1px solid rgba(255, 90, 90, 0.45);
    box-shadow: 0 12px 28px rgba(230, 0, 0, 0.28);
    transition: transform 0.2s ease, filter 0.2s ease;
}
.so-all-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.so-all-btn i:last-child { transition: transform 0.2s ease; }
.so-all-btn:hover i:last-child { transform: translateX(3px); }
.so-all-btn__count {
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    font-size: 0.8rem;
    font-weight: 900;
}

/* ---------- Stan: ładowanie ---------- */
.so-skeleton {
    flex: 0 0 auto;
    width: clamp(240px, 80vw, 286px);
    height: 380px;
    border-radius: 18px;
    background: linear-gradient(100deg, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 70%);
    background-size: 200% 100%;
    animation: soShimmer 1.3s linear infinite;
}
@keyframes soShimmer { to { background-position: -200% 0; } }

/* ---------- Wejście sekcji ---------- */
.special-offers .so-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.special-offers.is-revealed .so-reveal { opacity: 1; transform: none; }
.special-offers.is-revealed .so-reveal:nth-child(2) { transition-delay: 0.06s; }
.special-offers.is-revealed .so-reveal:nth-child(3) { transition-delay: 0.12s; }

/* ---------- Responsywność ---------- */
@media (max-width: 900px) {
    .so-deco-fast { width: 120px; top: -20px; right: 0; }
}

@media (max-width: 720px) {
    /* Na telefonie sam nagłówek + opis zjadał cały ekran, a promki lądowały
       poza kadrem w poziomej karuzeli — użytkownik ich po prostu nie widział.
       Dlatego: mocno skracamy część opisową i pokazujemy karty w siatce 2×3. */
    .special-offers { padding: 36px 0 34px; }
    .so-container { padding: 0 16px; }
    .so-head { gap: 8px; margin-bottom: 16px; }
    .so-subtitle { font-size: 0.88rem; line-height: 1.45; }

    .so-intro {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 12px;
        padding: 12px 14px;
        margin-bottom: 18px;
        border-radius: 16px;
    }
    .so-intro__text { text-align: left; }
    .so-intro__title { justify-content: flex-start; font-size: 0.68rem; letter-spacing: 0.9px; }
    .so-intro__art { width: 62px; height: 62px; }
    .so-intro__desc {
        font-size: 0.82rem;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .so-deco-fast { display: none; }
    .so-nav { display: none; }
    .so-toolbar { justify-content: center; margin-bottom: 14px; }
    .so-filter { font-size: 0.78rem; padding: 8px 13px; }

    /* Siatka zamiast karuzeli: 6 kart widocznych od razu, reszta na /promocje */
    .so-rail {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        overflow: visible;
        scroll-snap-type: none;
        padding: 0 0 4px;
        margin: 0;
    }
    .so-rail-wrap::before,
    .so-rail-wrap::after { display: none; }

    .so-card { width: auto; scroll-snap-align: none; }
    .so-card:nth-child(n+7) { display: none; }
    .so-skeleton { width: auto; height: 300px; }

    .so-card__body { padding: 11px 11px 13px; gap: 7px; }
    .so-card__name { font-size: 0.82rem; min-height: 2.4em; }
    .so-card__desc { display: none; }
    .so-card__price-new { font-size: 1.02rem; }
    .so-card__price-old { font-size: 0.76rem; }
    .so-card__save { font-size: 0.62rem; padding: 2px 6px; }
    .so-card__disc { font-size: 0.86rem; padding: 5px 9px; top: 8px; left: 8px; }
    .so-card__new { font-size: 0.56rem; padding: 4px 7px; top: 8px; right: 8px; }
    .so-card__cta { font-size: 0.76rem; padding: 9px 10px; }

    .so-all-btn { width: 100%; justify-content: center; padding: 14px 18px; }
}

@media (max-width: 360px) {
    .so-rail { grid-template-columns: minmax(0, 1fr); }
    .so-card:nth-child(n+5) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .so-deco-fast, .so-intro__art, .so-badge i { animation: none; }
    .special-offers .so-reveal { transition: opacity 0.3s ease; transform: none; }
    .so-card, .so-card__media img { transition: none; }
}


/* ===== css/shared/promo-extras.css ===== */
/* =========================================================
   DODATKI NA KARTACH PROMOCJI (strona główna .so-card i /promocje .pr-card)
   • zawieszka „Nowe” na 10 ostatnio dodanych ofertach (metka na sznurku),
   • plakietka „Zimowa promka” (kurtki, swetry, rękawiczki itd.),
   • dopisek o ograniczonej liczbie sztuk na dole każdej karty.
   ========================================================= */

/* Metka wisi wewnątrz zdjęcia (karty mają overflow: hidden), sznurek od górnej krawędzi. */
.kf-hangtag {
    position: absolute;
    top: 0;
    right: 16px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    transform-origin: 50% 0;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
    animation: kfTagSway 4s ease-in-out infinite;
}
.kf-hangtag::before {          /* sznurek */
    content: "";
    width: 2px;
    height: 17px;
    border-radius: 1px;
    background: #efdcb4;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);    /* widoczny też na jasnych zdjęciach */
}
.kf-hangtag__txt {
    position: relative;
    display: block;
    min-width: 46px;
    margin-top: -8px;           /* sznurek kończy się w dziurce */
    padding: 15px 9px 8px;
    color: #8a0000;
    background: linear-gradient(180deg, #fffaf1, #ffe6c4);
    font: 900 0.64rem/1 'Poppins', sans-serif;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    clip-path: polygon(50% 0, 100% 18%, 100% 100%, 0 100%, 0 18%);
}
.kf-hangtag__txt::before {     /* dziurka */
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: #2a1a12;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}
@keyframes kfTagSway {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

/* Zimowa promka: lewy dolny róg zdjęcia */
.so-card__winter,
.pr-card__winter {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(190, 230, 255, 0.45);
    background: linear-gradient(135deg, rgba(59, 167, 255, 0.94), rgba(31, 127, 224, 0.94));
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 14px rgba(31, 127, 224, 0.4);
}
.so-card__winter i,
.pr-card__winter i { font-size: 0.68rem; }

/* Dopisek na dole każdej karty */
.so-card__note,
.pr-card__note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 2px 0 0;
    color: #8d8d8d;
    font-size: 0.66rem;
    font-weight: 500;
    line-height: 1.4;
}
.so-card__note i,
.pr-card__note i { margin-top: 2px; color: #4dd48a; font-size: 0.64rem; }

/* Odznaki sekcji: zimowe promki wleciały */
.so-badge--winter,
.pr-hero__badge--winter {
    background: linear-gradient(135deg, #3BA7FF, #1560b8);
    border-color: rgba(170, 220, 255, 0.5);
    box-shadow: 0 0 0 1px rgba(59, 167, 255, 0.18), 0 10px 26px rgba(31, 127, 224, 0.35);
}
.so-badge--winter i,
.pr-hero__badge--winter i { animation: kfSnowSpin 6s linear infinite; }
@keyframes kfSnowSpin { to { transform: rotate(360deg); } }

/* Filtr „Zimowe” na /promocje */
.pr-sort--winter i { color: #8fd3ff; }
.pr-sort--winter.is-active { background: linear-gradient(135deg, #3BA7FF, #1f7fe0); border-color: transparent; color: #fff; }
.pr-sort--winter.is-active i { color: #fff; }

@media (max-width: 760px) {
    .kf-hangtag { right: 10px; }
    .kf-hangtag::before { height: 14px; }
    .kf-hangtag__txt { min-width: 40px; padding: 13px 7px 7px; font-size: 0.58rem; }
    .so-card__winter, .pr-card__winter { left: 8px; bottom: 8px; padding: 4px 8px; font-size: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
    .kf-hangtag, .so-badge--winter i, .pr-hero__badge--winter i { animation: none; }
}


/* ===== css/shared/winter.css ===== */
/* =========================================================
   SEZON: zima + wydarzenia (graphics/winter-graphics/web)
   Klasy na <html> ustawia mały skrypt w <head> index.html i pages/promocje.html:
     kf-winter          zima, 1 grudnia - koniec lutego,
     kf-ev kf-ev-<id>   wydarzenie: 1111 (1-11 XI), bf (20-30 XI), xmas (1-26 XII), ny (27 XII - 6 I),
     kf-season          trwa zima albo wydarzenie.
   Podgląd poza sezonem: ?zima=1, ?zima=1111|bf|xmas|ny, wyłączenie: ?zima=0.
   Poza sezonem nic się tu nie pobiera: sezonowe <img> mają loading="lazy" i display:none,
   a tła ładują się tylko, gdy reguła z klasą sezonu faktycznie pasuje.
   ========================================================= */

html:not(.kf-winter) .kf-winter-only { display: none !important; }
html.kf-winter .kf-winter-hide { display: none !important; }

/* Grafiki wydarzeń: domyślna znika w sezonie, każdy wariant widać tylko w swoim okresie.
   Same reguły ukrywania, więc wariant zachowuje zwykłe display (i np. chowanie na telefonie). */
html.kf-season .kf-season-off { display: none !important; }
html:not(.kf-ev-1111) .kf-season-on--1111,
html:not(.kf-ev-bf) .kf-season-on--bf,
html:not(.kf-ev-xmas) .kf-season-on--xmas,
html:not(.kf-ev-ny) .kf-season-on--ny,
html:not(.kf-winter) .kf-season-on--winter,
html.kf-ev .kf-season-on--winter { display: none !important; }

/* /promocje: grafiki wydarzeń mają różne proporcje, więc trzymamy je wysokością */
.pr-hero__art--season {
    width: auto;
    height: clamp(170px, 19vw, 250px);
    max-width: 300px;
}

/* Padający śnieg w tle sekcji (sekcja musi mieć position + isolation). */
.kf-snow { display: none; }
html.kf-winter .kf-snow {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url(/graphics/winter-graphics/web/snowfall-tile-512.webp);
    background-size: 380px 380px;
    opacity: 0.35;
    mix-blend-mode: screen; /* ciemne obwódki z Midjourney znikają, zostaje sam śnieg */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
    animation: kfSnowFall 38s linear infinite;
}
@keyframes kfSnowFall {
    from { background-position: 0 0; }
    to   { background-position: 60px 380px; }
}

/* Sople zwisające z górnej krawędzi sekcji. */
.kf-icicles { display: none; }
html.kf-winter .kf-icicles {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 64px;
    z-index: 0;
    pointer-events: none;
    background-image: url(/graphics/winter-graphics/web/icicles-strip-387.webp);
    background-image: image-set(url(/graphics/winter-graphics/web/icicles-strip-387.webp) 1x, url(/graphics/winter-graphics/web/icicles-strip-774.webp) 2x);
    background-repeat: repeat-x;
    background-size: auto 100%;
    opacity: 0.9;
}

/* Strona główna, Oferty specjalne: zamrożony zegar zamiast biegnącej maskotki. */
.so-deco-fast--winter {
    width: 136px;
    top: -22px;
}

@media (prefers-reduced-motion: reduce) {
    html.kf-winter .kf-snow { animation: none; }
}
@media (max-width: 768px) {
    html.kf-winter .kf-icicles { height: 44px; }
}