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

/* ===== 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.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/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; }
.nav-chip--promocje { --chip-accent: #FF3B3B; --chip-accent-soft: rgba(255, 59, 59, .18); }
.nav-chip--promocje .nav-chip__ico { color: #ff8a8a; }

.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); }

    /* 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; }
}


/* ===== 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/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/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/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/spreadsheet/spreadsheet.css ===== */
/* Kolorystyka "testowa" przeniesiona z panelu sprzedawcy (adminseller):
   głębsza czerń z lekkim czerwonym podbarwieniem, subtelne ramki,
   białe ceny i złote oceny zamiast czerwonych akcentów wszędzie. */
:root {
    --bg-main: #050202;
    --bg-card: #0e0606;
    --bg-hover: #170909;
    --border-color: rgba(255, 255, 255, 0.08);
    --text-muted: #8a8a8a;
    --nav-height: 70px;
    --primary: #E60000;
    --accent: #FF1A1A;
    --gold: #FFD24D;
    --active-bg: #8A0000;
    --error: #FF4081;
    --text-main: #FFFFFF;
}

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

.catalog-main.full-width-mode {
    /* więcej oddechu po bokach: rośnie z ekranem, ale ma sufit */
    padding: 6vw clamp(16px, 3.4vw, 64px) 4vw;
    max-width: 1920px;
    margin: 0 auto;
    min-height: 100vh;
}

/* NOWE STYLE DLA TOPKI - Kompaktowy widżet w kwadratach */
.top-stats-compact-widget {
    background: linear-gradient(160deg, #120606 0%, #0a0303 100%);
    border: 1px solid rgba(230,0,0,0.18);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
    box-shadow: 0 12px 28px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.03);
    position: relative;
    overflow: hidden;
}
.top-stats-compact-widget::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(230,0,0,0.6), transparent);
}

.top-stats-header {
    font-size: 0.78rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}
.tsh-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00FF99;
    box-shadow: 0 0 10px #00FF99;
    animation: tshPulse 1.4s ease-in-out infinite;
}
@keyframes tshPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.8); }
}
.top-stats-header i { color: var(--primary); font-size: 0.85rem; }
.tsh-text { flex: 1; }
.tsh-live {
    font-size: 0.55rem;
    font-weight: 800;
    color: #00FF99;
    background: rgba(0,255,153,0.1);
    border: 1px solid rgba(0,255,153,0.3);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.6px;
}

.top-rank-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.top-rank-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 6px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.06);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.top-rank-row::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, transparent, rgba(230,0,0,0.55), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.top-rank-row:hover::before { opacity: 1; }
.top-rank-row:hover {
    border-color: rgba(230,0,0,0.4);
    background: linear-gradient(90deg, rgba(230,0,0,0.08), rgba(230,0,0,0.02));
    transform: translateX(2px);
}

.trr-rank {
    flex-shrink: 0;
    width: 26px;
    text-align: center;
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: -0.5px;
    line-height: 1;
}
.trr-rank.gold { color: #FFD700; text-shadow: 0 0 8px rgba(255,215,0,0.4); }
.trr-rank.silver { color: #C0C0C0; }
.trr-rank.bronze { color: #CD7F32; }

.trr-thumb {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #060000;
    border: 1px solid rgba(255,255,255,0.06);
}
.trr-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.top-rank-row:hover .trr-thumb img { transform: scale(1.1); }

.trr-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trr-cat {
    font-size: 0.58rem;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trr-name {
    font-size: 0.74rem;
    font-weight: 600;
    color: #f0f0f0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.trr-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 1px;
}

.trr-price {
    font-size: 0.78rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.trr-growth {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #00FF99;
    background: rgba(0,255,153,0.08);
    border: 1px solid rgba(0,255,153,0.22);
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
}
.trr-growth i { font-size: 0.55rem; }

.ts-view-all {
    width: 100%;
    background: linear-gradient(135deg, rgba(230,0,0,0.12), rgba(230,0,0,0.04));
    border: 1px solid rgba(230,0,0,0.4);
    color: #fff;
    padding: 9px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.25s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.ts-view-all i:first-child { color: #FFD700; }
.ts-view-all i:last-child { font-size: 0.7rem; transition: transform 0.25s ease; }
.ts-view-all:hover {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark, #8A0000));
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(230,0,0,0.4);
    transform: translateY(-1px);
}
.ts-view-all:hover i:first-child { color: #fff; }
.ts-view-all:hover i:last-child { transform: translateX(3px); }

.show-full-top-btn { 
    width: 100%; 
    background: linear-gradient(135deg, var(--bg-card), var(--bg-hover)); 
    border: 1px solid var(--primary); 
    color: white; 
    padding: 8px; 
    border-radius: 8px; 
    font-family: 'Poppins', sans-serif; 
    font-weight: 700; 
    font-size: 0.8rem; 
    cursor: pointer; 
    transition: 0.3s; 
    box-shadow: 0 4px 10px rgba(230,0,0,0.15); 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

.show-full-top-btn:hover { 
    background: var(--primary); 
    transform: translateY(-2px); 
    box-shadow: 0 6px 15px rgba(230,0,0,0.3); 
    color: #fff; 
}

/* MODAL / SLIDER Z PEŁNĄ TOPKĄ */
#fullTopModal.kako-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(10px);
    z-index: 5000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 30px;
}
#fullTopModal.kako-modal-overlay.show { display: flex; animation: ftOverlayIn 0.25s ease; }
@keyframes ftOverlayIn { from { opacity: 0; } to { opacity: 1; } }

.full-top-modal-content {
    background: linear-gradient(180deg, #0c0606 0%, #050202 100%);
    width: 92vw;
    max-width: 1400px;
    height: 86vh;
    border-radius: 18px;
    border: 1px solid rgba(230,0,0,0.25);
    padding: 26px 28px 22px;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 80px rgba(0,0,0,0.85), 0 0 60px rgba(230,0,0,0.1);
    animation: ftModalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ftModalIn { from { opacity: 0; transform: scale(0.96) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.full-top-modal-content .modal-close-x {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(15,15,15,0.85);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    z-index: 3;
}
.full-top-modal-content .modal-close-x:hover { background: var(--primary); transform: rotate(90deg); }

.ft-modal-title {
    font-size: 1.6rem;
    font-weight: 900;
    color: white;
    text-align: center;
    margin: 0 0 4px;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.ft-modal-title i { color: #FFD700; }
.ft-modal-sub {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 18px;
}
.ft-modal-body {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 18px;
    flex: 1;
    min-height: 0;
}
.ft-sidebar {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    max-height: 100%;
}
.ft-sidebar-title {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0 0 8px;
    padding: 4px 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ft-sidebar-title i { color: var(--primary); }
.ft-sidebar-btn {
    background: transparent;
    border: 1px solid transparent;
    color: #ccc;
    text-align: left;
    padding: 8px 10px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ft-sidebar-btn:hover { background: rgba(230,0,0,0.08); color: #fff; }
.ft-sidebar-btn.active { background: rgba(230,0,0,0.16); border-color: rgba(230,0,0,0.35); color: #fff; }
.ft-sb-count {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 50px;
}
.ft-cat-sub { color: var(--text-muted); font-weight: 500; font-size: 0.85rem; text-transform: none; letter-spacing: 0; }

@media (max-width: 900px) {
    .ft-modal-body { grid-template-columns: 1fr; }
    .ft-sidebar { flex-direction: row; flex-wrap: wrap; max-height: none; overflow-x: auto; overflow-y: hidden; }
    .ft-sidebar-title { display: none; }
    .ft-sidebar-btn { flex-shrink: 0; }
    .full-top-modal-content { padding: 20px 18px; }
    .ft-modal-title { font-size: 1.3rem; }
}

#fullTopSliderContainer { 
    flex: 1; 
    overflow-y: auto; 
    overflow-x: hidden; 
    padding-right: 10px; 
}

#fullTopSliderContainer::-webkit-scrollbar { width: 8px; }
#fullTopSliderContainer::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 8px; }

.full-top-slider-wrapper { 
    display: flex; 
    flex-direction: column; 
    gap: 30px; 
}

.full-top-cat-slide { 
    background: var(--bg-card); 
    border: 1px solid var(--border-color); 
    border-radius: 12px; 
    padding: 15px; 
}

.full-top-cat-slide h3 { 
    margin: 0 0 15px 0; 
    font-size: 1.2rem; 
    color: var(--accent); 
    border-bottom: 1px solid var(--border-color); 
    padding-bottom: 10px; 
    font-weight: 800; 
    text-transform: uppercase; 
}

.full-top-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 15px; 
}

.full-top-card { 
    display: flex; 
    flex-direction: column; 
    background: var(--bg-hover); 
    border: 1px solid var(--border-color); 
    border-radius: 10px; 
    padding: 10px; 
    text-decoration: none; 
    color: white; 
    transition: 0.3s; 
    position: relative; 
    overflow: hidden; 
}

.full-top-card:hover { 
    transform: translateY(-5px); 
    border-color: var(--primary); 
    box-shadow: 0 8px 20px rgba(230,0,0,0.2); 
    z-index: 2; 
}

.full-top-rank { 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: var(--primary); 
    font-weight: 900; 
    padding: 4px 10px; 
    border-radius: 0 0 10px 0; 
    font-size: 0.8rem; 
    z-index: 2; 
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5); 
}

.full-top-card img { 
    width: 100%; 
    height: 140px; 
    object-fit: cover; 
    border-radius: 6px; 
    margin-bottom: 10px; 
}

.full-top-info { 
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
}

.ft-name { 
    font-size: 0.85rem; 
    font-weight: 600; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.ft-growth { 
    font-size: 0.75rem; 
    color: #2ecc71; 
    font-weight: 700; 
    display: flex; 
    align-items: center; 
    gap: 4px; 
    background: rgba(46, 204, 113, 0.1); 
    padding: 4px 6px; 
    border-radius: 4px; 
    width: fit-content; 
}

/* === Szkielety kart (pierwszy render zanim przyjdą dane z API) === */
.product-skeleton {
    background: var(--bg-card, #0e0606);
    border: 1px solid var(--border-color, rgba(255,255,255,0.06));
    border-radius: 12px;
    overflow: hidden;
    padding: 0 0 12px;
    animation: psFadeIn 0.3s ease backwards;
}
@keyframes psFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.ps-img {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #110707;
    overflow: hidden;
}
.ps-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%);
    animation: psShimmer 1.3s ease-in-out infinite;
}
@keyframes psShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.ps-line {
    height: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    margin: 10px 12px 0;
    position: relative;
    overflow: hidden;
}
.ps-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%);
    animation: psShimmer 1.3s ease-in-out infinite;
}
.ps-line-cat { width: 32%; height: 8px; margin-top: 12px; opacity: 0.7; }
.ps-line-title { width: 88%; height: 12px; margin-top: 10px; }
.ps-line-title.short { width: 60%; }
.ps-line-price { width: 38%; height: 14px; margin-top: 14px; }

/* === Floating "Trending teraz" panel (otwierany przez TOP) === */
.trending-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: trendFadeIn .25s ease;
}
.trending-panel-overlay.hidden { display: none; }
@keyframes trendFadeIn { from { opacity: 0; } to { opacity: 1; } }

.trending-panel {
    position: relative;
    max-width: 460px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    background: linear-gradient(160deg, #0e0606 0%, #050000 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 18px 14px 14px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.75), 0 0 40px rgba(230,0,0,0.12);
    animation: trendPanelIn .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes trendPanelIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.trending-panel-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #ccc;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all .2s ease;
    z-index: 2;
}
.trending-panel-close:hover { background: var(--primary, #E60000); color: #fff; transform: rotate(90deg); }
/* Wewnątrz panelu top-stats-compact-widget już ma styl - tylko poprawki */
.trending-panel .top-stats-compact-widget { margin: 0; }

/* === Floating Sheets FAB — małe zielone kółko nad kołem fortuny ===
   Koło fortuny (.kfw-fab z promo-widgets.js): 62px, bottom:22/right:18.
   Arkusz jest celowo MNIEJSZY (44px) i wycentrowany do tej samej osi. */
.sheets-fab-wrap {
    position: fixed;
    right: 27px;  /* środek FAB = środek koła fortuny (18 + 31 = 49 = 27 + 22) */
    bottom: 98px;
    z-index: 8000;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-decoration: none;
    color: #fff;
    font-size: 1.1rem;
    background: linear-gradient(135deg, #1FA968, #14633F);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 24px rgba(20, 99, 63, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.sheets-fab-wrap:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 16px 34px rgba(31, 169, 104, 0.55); }
.sheets-fab-wrap:active { transform: translateY(-1px) scale(.97); }
.sheets-fab-tip {
    position: absolute;
    right: 54px;
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    background: #121212;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    padding: 6px 11px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all .22s ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}
.sheets-fab-wrap:hover .sheets-fab-tip { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }

@media (max-width: 600px) {
    .trending-panel { padding: 14px 10px 10px; }
}

/* Na mobile koło fortuny ma 54px / bottom:16 - utrzymaj Arkusz nad nim, w tej samej osi */
@media (max-width: 768px) {
    .sheets-fab-wrap { width: 40px; height: 40px; right: 19px; bottom: 80px; font-size: 1rem; }
    .sheets-fab-tip { display: none; }
}

/* === Pusty stan wyników (z maskotką KakoFind) === */
.kf-empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 64px 20px; gap: 14px;
}
.kf-empty-state__mascot {
    width: 190px; max-width: 60vw; height: auto;
    filter: drop-shadow(0 14px 34px rgba(230,0,0,.28));
    margin-bottom: 4px;
}
.kf-empty-state h3 { margin: 0; font-size: 1.4rem; font-weight: 800; color: #fff; }
.kf-empty-state p { margin: 0; max-width: 420px; color: var(--text-muted, #808080); font-size: .96rem; line-height: 1.55; }
.kf-empty-state__btn {
    margin-top: 8px; display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
    background: linear-gradient(135deg, #E60000, #FF1A1A); color: #fff; border: none;
    padding: 12px 24px; border-radius: 12px; font-family: inherit; font-weight: 700; font-size: .95rem;
    box-shadow: 0 10px 26px rgba(230,0,0,.32); transition: transform .2s ease, box-shadow .2s ease;
}
.kf-empty-state__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(230,0,0,.45); }
.kf-empty-state__btn:active { transform: translateY(0); }

/* === Proponowane podobne produkty (po końcu wyników wyszukiwania) === */
.similar-divider {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 26px 0 10px;
    animation: sdFadeIn .4s ease both;
}
.similar-divider .sd-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(230,0,0,.45), transparent);
}
.similar-divider .sd-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}
.similar-divider .sd-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    white-space: nowrap;
}
.similar-divider .sd-title i {
    color: var(--accent, #FF1A1A);
    filter: drop-shadow(0 0 8px rgba(230,0,0,.5));
}
.similar-divider .sd-sub {
    font-size: .76rem;
    color: var(--text-muted, #808080);
    max-width: 480px;
}
@keyframes sdFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
    .similar-divider { gap: 10px; }
    .similar-divider .sd-title { font-size: .92rem; white-space: normal; }
}

/* =====================================================================
   BAZA PRODUKTÓW (2026-09): prostszy układ.
   Nagłówek w jednym rzędzie, pasek z trzema kontrolkami (szukaj, sortuj,
   filtry), jeden panel filtrów, lżejsze karty z ceną na metce na zdjęciu.
   ===================================================================== */
:root {
    --kf-line: rgba(255, 255, 255, 0.08);
    --kf-line-2: rgba(255, 255, 255, 0.16);
    --kf-field: rgba(255, 255, 255, 0.045);
    --kf-field-hover: rgba(255, 255, 255, 0.075);
    --kf-soft: #a6a6a6;
    --kf-dim: #7d7d7d;
    --kf-panel: #110808;
    --kf-tag: #ffffff;
    --kf-ink: #140909;
    --kf-focus: rgba(255, 255, 255, 0.85);
}

/* overflow-x: hidden robi z body kontener przewijania i psuje position: sticky paska;
   clip przycina tak samo, ale nie tworzy kontenera (hidden zostaje dla starszych przeglądarek). */
body { overflow-x: hidden; overflow-x: clip; }

.catalog-main.full-width-mode {
    padding: calc(var(--nav-height) + 22px) clamp(14px, 3vw, 56px) 48px;
}

/* --- Nagłówek --- */
.kf-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin: 0 0 16px;
}
.kf-head__text { flex: 1 1 520px; min-width: 0; }
.kf-head h1 {
    margin: 0 0 6px;
    font-size: clamp(1.3rem, 0.95rem + 1.1vw, 1.85rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: #fff;
    text-wrap: balance;
}
.kf-head p {
    margin: 0;
    max-width: 68ch;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--kf-soft);
}
.kf-head p [data-dynamic-count] { color: #fff; font-weight: 700; }
.kf-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.kf-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--kf-line);
    background: var(--kf-field);
    color: #e6e6e6;
    font: 600 0.8rem/1 'Poppins', sans-serif;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.kf-pill:hover { background: var(--kf-field-hover); border-color: var(--kf-line-2); color: #fff; }
.kf-pill i { font-size: 0.9rem; }
.kf-pill--top i { color: var(--gold); }
.kf-pill--discord i { color: #7c86f7; }
.kf-pill--sheet i { color: #34c37f; }

/* --- Pasek: szukaj, sortuj, filtry --- */
.kf-bar {
    position: sticky;
    top: calc(var(--nav-height) + 8px);
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 8px;
    background: rgba(17, 8, 8, 0.86);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--kf-line);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.kf-search {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-radius: 11px;
    border: 1px solid transparent;
    background: var(--kf-field);
    cursor: text;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.kf-search:hover { background: var(--kf-field-hover); }
.kf-search:focus-within {
    border-color: rgba(230, 0, 0, 0.7);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(230, 0, 0, 0.16);
}
.kf-search > i { color: var(--kf-dim); font-size: 0.95rem; }
.kf-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    color: #fff;
    font: 500 0.95rem 'Poppins', sans-serif;
}
.kf-search input::placeholder { color: var(--kf-dim); }
.kf-search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    cursor: pointer;
    opacity: 0.75;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfcfcf' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.kf-sort { position: relative; flex: 0 0 auto; height: 46px; border-radius: 11px; }
.kf-sort > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--kf-dim);
    font-size: 0.9rem;
    pointer-events: none;
}
.kf-sort select {
    height: 100%;
    min-width: 224px;
    padding: 0 36px 0 40px;
    border: 1px solid transparent;
    border-radius: 11px;
    outline: 0;
    background: var(--kf-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a6a6a6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center / 12px;
    color: #fff;
    font: 600 0.85rem 'Poppins', sans-serif;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.kf-sort select:hover { background-color: var(--kf-field-hover); }
.kf-sort select:focus-visible { border-color: rgba(230, 0, 0, 0.7); box-shadow: 0 0 0 3px rgba(230, 0, 0, 0.16); }
.kf-sort select option { background: #170b0b; color: #fff; }

.kf-filter-btn {
    flex: 0 0 auto;
    height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 18px;
    border: 0;
    border-radius: 11px;
    background: var(--primary);
    color: #fff;
    font: 700 0.88rem 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}
.kf-filter-btn:hover { background: #ff1a1a; box-shadow: 0 8px 22px rgba(230, 0, 0, 0.3); }
.kf-filter-btn[aria-expanded="true"] { background: #a80000; box-shadow: none; }
.kf-filter-btn .active-filters-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #fff;
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
}

/* --- Panel filtrów (komputer: pod paskiem, pozycję ustawia JS) --- */
.kf-panel-backdrop { display: none; }
.kf-panel {
    position: fixed;
    top: 150px;
    right: 24px;
    z-index: 1000; /* nad bocznymi widżetami (991), pod paskiem nawigacji (9999) */
    width: min(860px, calc(100vw - 32px));
    max-height: calc(100vh - 170px);
    display: none;
    flex-direction: column;
    overflow: hidden;
    background: var(--kf-panel);
    border: 1px solid var(--kf-line-2);
    border-radius: 16px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.65);
}
.kf-panel.active { display: flex; animation: kfPanelIn 0.18s ease-out; }
@keyframes kfPanelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.kf-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 10px 20px;
}
.kf-panel__title { font-size: 1rem; font-weight: 800; color: #fff; }
.kf-panel__close {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--kf-line);
    border-radius: 10px;
    background: none;
    color: #cfcfcf;
    font-size: 0.95rem;
    cursor: pointer;
}
.kf-panel__close:hover { background: var(--kf-field-hover); color: #fff; }
.kf-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 0 30px;
    padding: 0 20px 10px;
}
.kf-fgroup { padding: 12px 0 16px; border-top: 1px solid var(--kf-line); }
.kf-fgroup__label {
    display: block;
    margin: 0 0 10px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kf-dim);
}
.kf-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.kf-opts + .kf-range { margin-top: 10px; }
.kf-opt {
    height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 13px;
    border: 1px solid var(--kf-line);
    border-radius: 999px;
    background: none;
    color: #d8d8d8;
    font: 600 0.8rem 'Poppins', sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kf-opt i { color: var(--gold); font-size: 0.68rem; }
.kf-opt:hover { background: var(--kf-field); border-color: var(--kf-line-2); color: #fff; }
.kf-opt.is-active { background: rgba(230, 0, 0, 0.16); border-color: rgba(230, 0, 0, 0.75); color: #fff; }

.kf-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    max-width: 320px;
}
.kf-range__sep { height: 1px; background: var(--kf-line-2); }
.kf-range input {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--kf-line);
    border-radius: 10px;
    outline: 0;
    background: var(--kf-field);
    color: #fff;
    font: 500 0.88rem 'Poppins', sans-serif;
    -moz-appearance: textfield;
}
.kf-range input::-webkit-outer-spin-button,
.kf-range input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kf-range input::placeholder { color: var(--kf-dim); }
.kf-range input:focus { border-color: rgba(230, 0, 0, 0.7); box-shadow: 0 0 0 3px rgba(230, 0, 0, 0.14); }

.kf-catgrid { display: flex; flex-wrap: wrap; gap: 6px; }
.kf-catgrid__loading { color: var(--kf-dim); font-size: 0.8rem; }
.kf-cat { position: relative; display: inline-flex; cursor: pointer; }
.kf-cat input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kf-cat__in {
    height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px 0 9px;
    border: 1px solid var(--kf-line);
    border-radius: 999px;
    color: #d8d8d8;
    font-size: 0.8rem;
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kf-cat__in .cat-ic-img { width: 16px; height: 16px; vertical-align: 0; }
.kf-cat__name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-cat__n { font-size: 0.68rem; font-weight: 700; color: var(--kf-dim); }
.kf-cat:hover .kf-cat__in { background: var(--kf-field); border-color: var(--kf-line-2); color: #fff; }
.kf-cat input:checked + .kf-cat__in { background: rgba(230, 0, 0, 0.16); border-color: rgba(230, 0, 0, 0.75); color: #fff; }
.kf-cat input:checked + .kf-cat__in .kf-cat__n { color: rgba(255, 255, 255, 0.75); }

.kf-panel__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--kf-line);
    background: rgba(0, 0, 0, 0.25);
}
.kf-panel__reset {
    padding: 8px 4px;
    border: 0;
    background: none;
    color: var(--kf-soft);
    font: 600 0.84rem 'Poppins', sans-serif;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.25);
    text-underline-offset: 3px;
    cursor: pointer;
}
.kf-panel__reset:hover { color: #fff; }
.kf-panel__apply {
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 11px;
    background: var(--primary);
    color: #fff;
    font: 700 0.9rem 'Poppins', sans-serif;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
}
.kf-panel__apply:hover { background: #ff1a1a; }
.kf-panel__apply:disabled { opacity: 0.6; cursor: default; }

/* --- Kategorie (rail) --- */
.cat-rail-section { margin: 0 0 4px; padding: 0; }
.cat-rail-scroll { position: relative; }
.cat-rail-scroll::before,
.cat-rail-scroll::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 8px;
    width: 40px;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.cat-rail-scroll::before { left: 0; background: linear-gradient(90deg, var(--bg-main) 15%, transparent); }
.cat-rail-scroll::after { right: 0; background: linear-gradient(270deg, var(--bg-main) 15%, transparent); }
.cat-rail-scroll:has(.cat-rail-arrow--l.is-hidden)::before,
.cat-rail-scroll:has(.cat-rail-arrow--r.is-hidden)::after { opacity: 0; }
.cat-rail {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 0 8px;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.cat-rail::-webkit-scrollbar { display: none; }
.cat-chip {
    flex-shrink: 0;
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 13px 0 10px;
    border: 1px solid var(--kf-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: #d4d4d4;
    font: 600 0.82rem 'Poppins', sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cat-chip:hover { background: var(--kf-field); border-color: var(--kf-line-2); color: #fff; }
.cat-chip__ic { width: 18px; height: 18px; flex-shrink: 0; display: grid; place-items: center; }
.cat-chip__ic .cat-chip-img { width: 18px; height: 18px; object-fit: contain; }
.cat-chip__ic .cat-ic-emoji { font-size: 0.9rem; line-height: 1; }
.cat-chip__lbl { line-height: 1; }
.cat-chip__count { font-size: 0.7rem; font-weight: 700; line-height: 1; color: var(--kf-dim); }
.cat-chip--all { padding: 0 16px; }
.cat-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.cat-chip.is-active .cat-chip__count { color: rgba(255, 255, 255, 0.8); }
.cat-rail-arrow {
    position: absolute;
    top: calc(50% - 4px);
    transform: translateY(-50%);
    z-index: 3;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid var(--kf-line-2);
    border-radius: 50%;
    background: rgba(22, 11, 11, 0.96);
    color: #fff;
    font-size: 0.72rem;
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.15s ease;
}
.cat-rail-arrow:hover { background: var(--primary); border-color: var(--primary); }
.cat-rail-arrow--l { left: 0; }
.cat-rail-arrow--r { right: 0; }
.cat-rail-arrow.is-hidden { opacity: 0; pointer-events: none; }
.cat-chip-skel {
    position: relative;
    flex-shrink: 0;
    width: 104px;
    height: 36px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
}
.cat-chip-skel:nth-child(2) { width: 84px; }
.cat-chip-skel:nth-child(4) { width: 122px; }
.cat-chip-skel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
    animation: psShimmer 1.3s ease-in-out infinite;
}

/* --- Wynik: liczba, aktywne filtry, ostatnio oglądane --- */
.kf-results {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-height: 34px;
    margin: 2px 0 14px;
}
.kf-results__count { margin: 0; font-size: 0.88rem; font-weight: 500; color: var(--kf-soft); white-space: nowrap; }
.kf-results__count b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.active-filters-row { display: none; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.active-tag {
    height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 12px;
    border: 1px solid rgba(230, 0, 0, 0.5);
    border-radius: 999px;
    background: rgba(230, 0, 0, 0.12);
    color: #fff;
    font: 600 0.76rem 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.15s ease;
}
.active-tag:hover { background: rgba(230, 0, 0, 0.26); }
.active-tag > .fa-xmark { font-size: 0.7rem; color: rgba(255, 255, 255, 0.7); }
.kf-tag-star { color: var(--gold); font-size: 0.66rem; }
.kf-textbtn {
    height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 6px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--kf-soft);
    font: 600 0.8rem 'Poppins', sans-serif;
    white-space: nowrap;
    cursor: pointer;
}
.kf-textbtn:hover { color: #fff; }
.kf-textbtn--clear { color: #ff6b6b; }
.kf-rv-toggle { margin-left: auto; }
.kf-rv-toggle__n { color: var(--kf-dim); font-weight: 700; }
.kf-rv-toggle__chev { font-size: 0.64rem; transition: transform 0.2s ease; }
.kf-rv-toggle[aria-expanded="true"] .kf-rv-toggle__chev { transform: rotate(180deg); }

.rv-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -4px 0 16px;
    padding: 10px 12px;
    border: 1px solid var(--kf-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
}
.rv-strip { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.rv-strip::-webkit-scrollbar { display: none; }
.rv-card {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border: 1px solid var(--kf-line);
    border-radius: 10px;
    background: #1a0b0b;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.rv-card:hover { border-color: rgba(230, 0, 0, 0.7); transform: translateY(-1px); }
.rv-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rv-clear-btn { flex-shrink: 0; }

/* --- Siatka i karta produktu ---
   Zawartość kart jak dawniej (ocena, wyświetlenia, weryfikacja, nowa karta,
   Zobacz, agent, ulubione); odświeżony tylko wygląd. Kolumny jak dawniej. */
.catalog-content { padding: 0; }
.products-grid-6 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}
@media (min-width: 1921px) { .products-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1600px) { .products-grid-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1200px) { .products-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .products-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.product-card {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(180deg, #130909 0%, #0b0505 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease;
    animation: kfCardIn 0.35s ease backwards;
}
@keyframes kfCardIn { from { opacity: 0; } to { opacity: 1; } }
.product-card:hover {
    z-index: 10;
    transform: translateY(-4px);
    border-color: rgba(230, 0, 0, 0.45);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(230, 0, 0, 0.12);
}

/* Zdjęcie w ramce karty */
.card-image-wrapper {
    position: relative;
    aspect-ratio: 1 / 1;
    margin: 6px 6px 0;
    overflow: hidden;
    border-radius: 12px;
    background: #160a0a;
}
.card-image-wrapper::before {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 38%;
    z-index: 2;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.38));
    pointer-events: none;
}
/* Zdjęcia: shimmer podczas ładowania i miękkie pojawienie się (klasę .img-loaded
   nadaje JS). Animacja imgReveal to bezpiecznik, gdyby JS nie zadziałał. */
.product-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
    animation: imgReveal 0.01s ease 1.8s forwards;
}
.product-img.img-loaded { opacity: 1; animation: none; }
@keyframes imgReveal { to { opacity: 1; } }
.card-image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0 -60%;
    z-index: 1;
    background: linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, 0.06) 50%, transparent 68%);
    transform: translateX(-65%);
    animation: imgShimmer 1.15s linear infinite;
    pointer-events: none;
}
@keyframes imgShimmer { to { transform: translateX(65%); } }
.card-image-wrapper:has(.product-img.img-loaded)::after { content: none; }
.product-card:hover .product-img { transform: scale(1.05); }
.broken-image-text {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--kf-dim);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}
.broken-image-text i { font-size: 1.8rem; opacity: 0.5; }

/* Nakładki na zdjęciu: jeden styl "szklanych" plakietek */
.badges {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.boosted-card .badges { left: 38px; }
.badge {
    height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(8, 4, 4, 0.66);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}
.badge.new { background: var(--primary); border-color: transparent; }
.badge.promo { background: #1faa59; border-color: transparent; }
.badge.quality { color: var(--gold); border-color: rgba(255, 210, 77, 0.28); }
.badge.quality i { font-size: 0.62rem; }

.verified-dot {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 210, 77, 0.45);
    border-radius: 8px;
    background: rgba(8, 4, 4, 0.66);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--gold);
    font-size: 0.62rem;
    cursor: help;
    transition: background 0.2s ease, color 0.2s ease;
}
.verified-dot:hover,
.verified-dot:focus-visible { background: var(--gold); color: #120a00; }
.verified-tip {
    position: absolute;
    top: 30px;
    left: -2px;
    z-index: 30;
    width: max-content;
    max-width: 200px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #141010;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    color: #fff;
    font: 600 0.68rem/1.35 'Poppins', sans-serif;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.verified-dot:hover .verified-tip,
.verified-dot:focus-visible .verified-tip { opacity: 1; visibility: visible; transform: none; }

.views-badge-wrap { position: absolute; left: 8px; bottom: 8px; z-index: 3; }
.views-badge i { font-size: 0.7rem; opacity: 0.9; }
/* t1 (>=10) najsłabszy -> t7 (>=10k) najmocniejszy */
.views-badge--t1 { color: #f0c9c9; }
.views-badge--t2 { color: #ffdada; }
.views-badge--t3 { background: rgba(160, 20, 20, 0.72); }
.views-badge--t4 { background: rgba(200, 16, 16, 0.82); }
.views-badge--t5 { background: linear-gradient(135deg, #d40000, #ff2d2d); border-color: transparent; box-shadow: 0 4px 14px rgba(230, 0, 0, 0.4); }
.views-badge--t6 { background: linear-gradient(135deg, #ff1f1f, #ff5a2d); border-color: transparent; box-shadow: 0 4px 16px rgba(255, 60, 0, 0.45); }
.views-badge--t7 { background: linear-gradient(135deg, #ff3b00, #ffb300); border-color: transparent; color: #1a0a00; box-shadow: 0 4px 16px rgba(255, 120, 0, 0.45); }

.kako-new-tab-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 6;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 9px;
    background: rgba(8, 4, 4, 0.62);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 0.74rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.kako-new-tab-btn:hover { background: #fff; border-color: #fff; color: #000; }
.kako-new-tab-tooltip {
    position: absolute;
    top: 50%;
    right: 38px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #141010;
    color: #fff;
    font: 600 0.7rem 'Poppins', sans-serif;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translate(4px, -50%);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.kako-new-tab-btn:hover .kako-new-tab-tooltip { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.platform-logo-top {
    position: absolute;
    top: 44px;
    right: 8px;
    z-index: 3;
    width: 30px;
    height: 30px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    background: rgba(8, 4, 4, 0.72);
    object-fit: contain;
}

/* Treść karty */
.card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 14px 14px;
}
.product-category {
    margin-bottom: 4px;
    overflow: hidden;
    color: #8c8c8c;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.card-link { color: inherit; text-decoration: none; outline: 0; }
.card-link::after { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: 16px; }
.card-link:focus-visible::after { box-shadow: inset 0 0 0 2px var(--kf-focus); }
.product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 12px;
    color: #f2f2f2;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.38;
    overflow-wrap: anywhere;
}
.product-card:hover .product-title { color: #fff; }
.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.current-price {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.footer-actions { display: flex; align-items: center; gap: 6px; }
.view-btn,
.product-card .kakobuy-action-btn,
.product-card .heart-action-btn { position: relative; z-index: 5; }
.view-btn {
    height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border: 1px solid rgba(230, 0, 0, 0.38);
    border-radius: 10px;
    background: rgba(230, 0, 0, 0.1);
    color: #fff;
    font: 600 0.8rem 'Poppins', sans-serif;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.view-btn:hover { background: var(--primary); border-color: var(--primary); box-shadow: 0 6px 16px rgba(230, 0, 0, 0.35); }
.mini-agent-logo { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; }
.product-card .kakobuy-action-btn,
.product-card .heart-action-btn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--kf-line);
    border-radius: 10px;
    background: var(--kf-field);
    color: var(--kf-soft);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.product-card .kakobuy-action-btn img { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; }
.product-card .kakobuy-action-btn:hover { border-color: rgba(255, 193, 7, 0.5); background: rgba(255, 193, 7, 0.1); }
.product-card .heart-action-btn:hover { border-color: #ff4081; background: rgba(255, 64, 129, 0.1); color: #ff4081; }
.product-card .heart-action-btn.active { border-color: #ff4081; background: rgba(255, 64, 129, 0.16); color: #ff4081; }
.product-card .heart-action-btn.active i { animation: heartPulse 0.35s ease; }
@keyframes heartPulse { 50% { transform: scale(1.35); } }

/* Ikony kategorii jako obrazki (skalują się z otaczającym tekstem) */
.cat-ic-img { width: 1.15em; height: 1.15em; object-fit: contain; vertical-align: -0.22em; display: inline-block; flex-shrink: 0; }
.cat-ic-emoji { font-style: normal; }
.full-top-cat-slide h3 .cat-ic-img { width: 1.3em; height: 1.3em; vertical-align: -0.28em; }

/* Fokus z klawiatury */
.kf-pill:focus-visible,
.kf-filter-btn:focus-visible,
.kf-opt:focus-visible,
.kf-panel__close:focus-visible,
.kf-panel__reset:focus-visible,
.kf-panel__apply:focus-visible,
.cat-chip:focus-visible,
.cat-rail-arrow:focus-visible,
.active-tag:focus-visible,
.kf-textbtn:focus-visible,
.rv-card:focus-visible,
.product-card .heart-action-btn:focus-visible,
.product-card .kakobuy-action-btn:focus-visible,
.kf-cat input:focus-visible + .kf-cat__in { outline: 2px solid var(--kf-focus); outline-offset: 2px; }

/* --- Tablet i telefon --- */
@media (max-width: 760px) {
    .catalog-main.full-width-mode { padding: calc(var(--nav-height) + 14px) 12px 40px; }
    .kf-head { gap: 10px; margin-bottom: 12px; }
    .kf-head__text { flex-basis: 100%; }
    .kf-head h1 { font-size: 1.28rem; }
    .kf-head p { font-size: 0.8rem; }
    .kf-head__actions { gap: 6px; }
    .kf-pill { height: 32px; padding: 0 11px; font-size: 0.74rem; }

    .kf-bar {
        top: calc(var(--nav-height) + 6px);
        gap: 6px;
        margin-bottom: 12px;
        padding: 6px;
        border-radius: 14px;
        background: rgba(15, 7, 7, 0.97);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .kf-search { height: 42px; padding: 0 12px; gap: 8px; }
    .kf-search input { font-size: 16px; }
    .kf-search input::placeholder { font-size: 0.8rem; }
    .kf-sort { width: 42px; height: 42px; background: var(--kf-field); }
    .kf-sort:focus-within { box-shadow: 0 0 0 2px var(--kf-focus); }
    .kf-sort > i { left: 50%; transform: translate(-50%, -50%); color: #e6e6e6; }
    .kf-sort select { position: absolute; inset: 0; width: 100%; min-width: 0; padding: 0; opacity: 0; font-size: 16px; }
    .kf-filter-btn { height: 42px; gap: 7px; padding: 0 12px; }

    .kf-panel-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 10001;
        background: rgba(0, 0, 0, 0.62);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }
    .kf-panel-backdrop.active { opacity: 1; visibility: visible; }
    .kf-panel {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10002;
        width: 100%;
        max-height: 86vh;
        max-height: 86dvh;
        border-bottom: 0;
        border-radius: 20px 20px 0 0;
    }
    .kf-panel.active { animation: kfSheetIn 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
    .kf-panel__head { position: relative; padding: 18px 12px 6px 18px; }
    .kf-panel__head::before {
        content: '';
        position: absolute;
        top: 7px;
        left: 50%;
        width: 38px;
        height: 4px;
        margin-left: -19px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.2);
    }
    .kf-panel__body { grid-template-columns: minmax(0, 1fr); padding: 0 18px 8px; }
    .kf-range { max-width: none; }
    .kf-panel__foot { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
    .kf-panel__apply { flex: 1; }
    body.kf-sheet-open { overflow: hidden; }

    .cat-rail-arrow { display: none; }
    .cat-rail-scroll::before,
    .cat-rail-scroll::after { width: 24px; }
    .cat-chip { height: 34px; font-size: 0.78rem; }
    .kf-results { margin-bottom: 10px; }
    .rv-section { padding: 8px 10px; }
    .rv-card { width: 48px; height: 48px; }
    .rv-clear-btn span { display: none; }
}
@keyframes kfSheetIn { from { transform: translateY(100%); } to { transform: none; } }

@media (max-width: 768px) {
    .products-grid-6 { gap: 12px; }
    .card-image-wrapper { margin: 5px 5px 0; border-radius: 11px; }
    .card-body { padding: 10px 10px 12px; }
    .product-category { font-size: 0.6rem; margin-bottom: 3px; }
    .product-title { font-size: 0.8rem; margin-bottom: 8px; }
    .badges { top: 6px; left: 6px; gap: 3px; }
    .boosted-card .badges { left: 34px; }
    .verified-dot { top: 11px; left: 11px; width: 22px; height: 22px; }
    .verified-tip, .kako-new-tab-tooltip { display: none; }
    .badge { height: 20px; padding: 0 6px; border-radius: 6px; font-size: 0.58rem; }
    .views-badge-wrap { left: 6px; bottom: 6px; }
    .kako-new-tab-btn { top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 8px; font-size: 0.66rem; }
    .platform-logo-top { top: 36px; right: 6px; width: 26px; height: 26px; padding: 3px; border-radius: 8px; }
    .current-price { font-size: 1.1rem; }
    .card-footer { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 10px; }
    .footer-actions { width: 100%; justify-content: space-between; }
    .view-btn { flex: 1; justify-content: center; padding: 0 8px; }
    .product-card .kakobuy-action-btn,
    .product-card .heart-action-btn { width: 34px; height: 34px; }
    .product-card:hover { transform: none; }
}
@media (max-width: 480px) {
    .products-grid-6 { gap: 8px; }
    .product-title { font-size: 0.76rem; }
    .current-price { font-size: 1rem; }
    .view-btn { font-size: 0.74rem; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
    .product-card,
    .product-img,
    .kf-panel.active,
    .kf-panel-backdrop,
    .card-image-wrapper::after { animation: none !important; transition: none !important; }
    .product-img { opacity: 1; }
    .product-card:hover,
    .product-card:hover .product-img { transform: none; }
    .cat-rail { scroll-behavior: auto; }
}

/* ---- Lista produktow renderowana po stronie serwera ----
   Crawler widzial pusta siatke, bo produkty dociaga dopiero JavaScript.
   Ta lista jest w HTML od razu i jest zwyklym, widocznym elementem strony. */
.sp-ssr {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid #232323;
}
.sp-ssr h2 {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}
.sp-ssr > p {
    margin: 0 0 16px;
    font-size: .88rem;
    line-height: 1.6;
    color: #999;
}
.sp-ssr__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sp-ssr__item a {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid #1c1c1c;
    color: #cfcfcf;
    font-size: .88rem;
    text-decoration: none;
}
.sp-ssr__item a:hover {
    color: #fff;
    border-bottom-color: #E60000;
}
.sp-ssr__name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-ssr__cat {
    flex: 0 0 auto;
    font-size: .74rem;
    color: #777;
}
.sp-ssr__price {
    flex: 0 0 auto;
    font-weight: 700;
    color: #ff4d4d;
    font-size: .84rem;
}

/* ---- Huby kategorii (/spreadsheet/<kategoria>) i linki do nich ---- */
.sp-cat-intro {
    max-width: 780px;
    margin: 6px 0 0;
    font-size: .95rem;
    line-height: 1.65;
    color: #b8b8b8;
}
.sp-cat-intro strong { color: #fff; }
.sp-hubs {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid #232323;
}
.sp-hubs h2 {
    margin: 0 0 14px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}
.sp-hubs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sp-hubs__list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid #2a2a2a;
    border-radius: 999px;
    background: rgba(255, 255, 255, .02);
    color: #d6d6d6;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s, color .2s;
}
.sp-hubs__list a:hover,
.sp-hubs__list a[aria-current="page"] {
    border-color: #E60000;
    color: #fff;
}
.sp-hubs__n {
    font-size: .74rem;
    font-weight: 700;
    color: #888;
}
.sp-hubs__back { margin: 16px 0 0; font-size: .88rem; }
.sp-hubs__back a { color: #ff4d4d; text-decoration: none; font-weight: 600; }
.sp-hubs__back a:hover { text-decoration: underline; }