/* =========================
   W2C — STYLE FROM SCRATCH
   (spójne tło/nav jak na stronie)
   ========================= */

/* --- Reset & Vars --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --bg: #050508;
    --grid: rgba(255, 255, 255, .04);
    --text: #f3f4f6;
    --muted: rgba(243, 244, 246, .78);
    --accent: #7c3aed;
    --accent-2: #a78bfa;
    --radius: 14px;
    --ring: #93c5fd;
    --shellBg: rgba(17, 17, 20, .72);
    --shellBorder: rgba(255, 255, 255, .08);
    --shadow: 0 10px 40px rgba(0, 0, 0, .45);
    --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- CLEAN BUTTONS (global + modal) ---------- */
/* Baza: działa dla .btn i dla istniejących .btn-sm */
:root{
  --btn-bg: #15171c;
  --btn-bg-hover: #1a1c22;
  --btn-bg-active: #14161a;
  --btn-border: #2a2d33;
  --btn-border-hover: #343841;
  --btn-fg: #f5f6f8;

  --btn-sec-bg: #111318;
  --btn-sec-border: #2b2e36;
  --btn-sec-fg: #d7dae0;

  --ring: 0 0 0 3px rgba(147, 197, 253, .28);
}

.btn, .btn-sm{
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 500 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  letter-spacing: .1px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .06s ease, box-shadow .12s ease;
}

.btn:hover, .btn-sm:hover { background: var(--btn-bg-hover); border-color: var(--btn-border-hover); }
.btn:active, .btn-sm:active { background: var(--btn-bg-active); transform: translateY(1px); }

.btn:focus-visible, .btn-sm:focus-visible{
  outline: none; box-shadow: var(--ring);
}

/* Secondary – spokojniejszy, jaśniejszy tekst */
.btn-secondary, .btn--secondary{
  background: var(--btn-sec-bg);
  border-color: var(--btn-sec-border);
  color: var(--btn-sec-fg);
}
.btn-secondary:hover, .btn--secondary:hover{
  background: #14171c; border-color: #353943;
}

/* Ghost – tylko kontur, tło pojawia się dopiero w hover */
.btn-ghost, .btn--ghost{
  background: transparent;
  border-color: #2d3139;
  color: #e9ecf2;
}
.btn-ghost:hover, .btn--ghost:hover{ background:#15181d; border-color:#3a3f48; }

/* Ikonowe (okrągłe) – np. dla ✕ w nagłówku, zostawiamy neutralne */
.icon-btn{
  width: 32px; height: 32px;
  padding: 0; border-radius: 8px;
  display:inline-grid; place-items:center;
  background: transparent; border:1px solid #2a2e36; color:#aeb2bb;
}
.icon-btn:hover{ background:#161a21; color:#fff; border-color:#363b45; }
.icon-btn:focus-visible{ box-shadow: var(--ring); }

/* Rozmiary (opcjonalnie) */
.btn--sm, .btn-sm{ padding: 7px 10px; min-height: 32px; font-size:12.5px; border-radius:8px; }
.btn--md{ padding: 9px 14px; min-height: 36px; }
.btn--lg{ padding: 11px 16px; min-height: 40px; font-size:14px; }

/* Disabled */
.btn[disabled], .btn-sm[disabled],
button:disabled{
  opacity: .55; cursor: not-allowed; transform: none !important;
  filter: saturate(.6);
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    font-family: "SF Pro Text", Segoe UI, Roboto, Helvetica, "IBM Plex Sans", "Noto Sans", Ubuntu, Cantarell, system-ui, sans-serif;
    font-weight: 400;
    background: var(--bg);
    color: var(--text);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

/* --- Background (grid + blobs) --- */
.bg-grid {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(100% 100% at 50% 0%, rgba(124, 58, 237, .08), transparent 55%),
        linear-gradient(to bottom, rgba(0, 0, 0, .35), transparent 35% 65%, rgba(0, 0, 0, .55)),
        repeating-linear-gradient(to right, transparent 0 78px, var(--grid) 78px 79px),
        repeating-linear-gradient(to bottom, transparent 0 78px, var(--grid) 78px 79px);
    mask-image: radial-gradient(80% 80% at 50% 40%, black 30%, transparent 100%);
    animation: gridDrift 12s linear infinite;
}

@keyframes gridDrift {
    to {
        background-position: 0 0, 0 0, 30px 0, 0 30px
    }
}

.blob {
    position: fixed;
    filter: blur(50px);
    opacity: .5;
    z-index: 0
}

.blob-a {
    width: 640px;
    height: 640px;
    left: -120px;
    top: -120px;
    background: radial-gradient(closest-side, rgba(124, 58, 237, .7), transparent)
}

.blob-b {
    width: 520px;
    height: 520px;
    right: -140px;
    top: 22%;
    background: radial-gradient(closest-side, rgba(167, 139, 250, .55), transparent)
}

.blob-c {
    width: 460px;
    height: 460px;
    left: 18%;
    bottom: -160px;
    background: radial-gradient(closest-side, rgba(99, 102, 241, .5), transparent)
}

/* --- Navigation --- */
.nav {
    position: fixed;
    top: 18px;
    left: 0;
    right: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    padding: 0 16px;
}

.nav-shell {
    width: min(1280px, 100%);
    height: 100px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 2000px;
    background: var(--shellBg);
    border: 1px solid var(--shellBorder);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
    backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
}

.nav-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(167, 139, 250, .18) 0%, rgba(124, 58, 237, .25) 50%, rgba(167, 139, 250, .18) 100%);
    opacity: 0;
    transform: translateX(-100%);
}

.nav-shell:hover::after {
    animation: glow 1.2s cubic-bezier(.4, 0, .2, 1)
}

@keyframes glow {
    0% {
        opacity: 0;
        transform: translateX(-100%)
    }

    25% {
        opacity: .35
    }

    50% {
        opacity: .5
    }

    100% {
        opacity: 0;
        transform: translateX(100%)
    }
}

.nav-brand img {
    width: 78px;
    height: 78px;
    border-radius: 6px;
    display: block
}

.nav-center {
    display: flex;
    justify-content: center;
    gap: 28px
}

.nav-link {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    color: rgba(243, 244, 246, .8);
    text-decoration: none;
    padding: 10px 4px;
    background: linear-gradient(90deg, rgba(167, 139, 250, .9), rgba(124, 58, 237, .9));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: 0 calc(100% - 8px);
    transition: color .15s ease, background-size .25s ease;
}

.nav-link:hover {
    color: #fff;
    background-size: 100% 2px
}

.nav-link.is-active {
    color: #fff;
    font-weight: 600;
    background-size: 100% 2px
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 10px
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .06);
    color: #e5e7eb;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
    transition: .18s;
}

.chip:hover {
    transform: translateY(-2px) scale(1.02);
    background: rgba(255, 255, 255, .09)
}

.chip-round {
    width: 38px;
    height: 38px;
    justify-content: center
}

.chip-round img {
    width: 22px;
    height: 22px;
    border-radius: 999px
}

.chip-pill {
    background: #2f3137;
    border-color: rgba(255, 255, 255, .1)
}

.chip-icon {
    width: 18px;
    height: 18px;
    fill: #cbd5e1
}

.nav.is-shrink .nav-shell {
    height: 64px;
    padding: 6px 12px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .36);
    transition: height .26s var(--ease), padding .26s var(--ease), box-shadow .26s var(--ease);
}

.nav.is-shrink .nav-brand img {
    width: 56px;
    height: 56px;
    transition: width .26s var(--ease), height .26s var(--ease)
}

.nav.is-shrink .nav-link {
    font-size: 14px
}

.nav--compact .nav-shell {
    height: 64px;
    padding: 6px 12px
}

.nav--compact .nav-brand img {
    width: 48px;
    height: 48px;
    filter: brightness(1.1)
}

.nav--compact .nav-center {
    transform: translateY(-2px) scale(.98)
}

/* --- Hero --- */
.hero {
    position: relative;
    z-index: 1;
    min-height: 44svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 1.25rem 1rem;
    gap: .6rem;
}

.brand {
    margin: 0;
    font-weight: 900;
    font-size: clamp(2.4rem, 7vw, 4.6rem)
}

.brand .brand-word {
    background: linear-gradient(180deg, #fff, #e9e9ff 48%, #dcd7ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lead {
    margin: 0;
    font-weight: 600;
    font-size: clamp(1rem, .9rem + .6vw, 1.15rem);
    color: var(--muted)
}

/* --- W2C search row --- */
.w2c {
    position: relative;
    z-index: 1;
    padding: 1.2rem 16px 2rem
}

.w2c-shell {
    width: min(1040px, 100%);
    margin: 0 auto;
    padding: 1.25rem;
    background: var(--shellBg);
    border: 1px solid var(--shellBorder);
    border-radius: calc(var(--radius) + 8px);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}

.w2c-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .6rem
}

.input {
    width: 100%;
    padding: 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .05);
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: .2s;
}

.input::placeholder {
    color: rgba(243, 244, 246, .55)
}

.input:focus {
    border-color: rgba(167, 139, 250, .45);
    box-shadow: 0 0 0 6px rgba(167, 139, 250, .08)
}

.input--xl {
    padding: 1.05rem 1.2rem;
    font-size: 1.05rem
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap
}

.btn .btn-icon {
    width: 20px;
    height: 20px
}

.btn--xl {
    padding: .95rem 1.2rem;
    font-weight: 800;
    border: 1px solid rgba(167, 139, 250, .35)
}

.btn-ghost {
    background: rgba(255, 255, 255, .06);
    color: #fff
}

.btn-ghost:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .09);
    border-color: rgba(167, 139, 250, .55)
}

/* --- Reveal --- */
[data-reveal] {
    opacity: 0;
    transform: translateY(8px) scale(.98);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
    transition-delay: var(--delay, 0s);
}

.is-visible {
    opacity: 1;
    transform: none
}

/* --- Drawer placeholder --- */
.drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(440px, 100%);
    background: rgba(15, 15, 20, .96);
    border-left: 1px solid rgba(255, 255, 255, .08);
    box-shadow: -12px 0 40px rgba(0, 0, 0, .45);
    z-index: 20;
    padding: 16px;
}

/* --- A11y --- */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- W2C in hero --- */
.w2c--in-hero {
    padding: 1rem 16px 0
}

/* --- Items --- */
.items {
    position: relative;
    z-index: 1;
    padding: 1.5rem 16px 3rem
}

.items-shell {
    width: min(1280px, 100%);
    margin: 0 auto
}

.items-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px
}

/* --- Card --- */
.item-card {
    position: relative;
    border-radius: 16px;
    background: rgba(17, 17, 20, .72);
    border: 1px solid rgba(255, 255, 255, .08);
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
    transform: translateZ(0);
    transition: transform .25s var(--ease);
}

.item-card {
    opacity: 0;
    transform: translateY(8px) scale(.985);
    transition: opacity .35s var(--ease), transform .35s var(--ease), box-shadow .22s var(--ease);
    transition-delay: var(--d, 0ms)
}

.item-card.is-inview {
    opacity: 1;
    transform: none
}

.item-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg, rgba(167, 139, 250, .0), rgba(124, 58, 237, .55), rgba(167, 139, 250, .0));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .25s var(--ease);
}

.item-card:hover {
    transform: scale(1.015)
}

.item-card:hover::before {
    opacity: 1
}

.item-card {
    display: flex;
    flex-direction: column
}

/* media */
.item-media {
    aspect-ratio: 1/1;
    width: 100%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #0b0b10
}

.item-media>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none !important;
    will-change: auto
}

/* --- badges/chips line --- */
.item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 10px
}

/* SPÓJNY ROZMIAR WSZYSTKICH BADGY */
.badge-bestseller,
.batch-chip,
.seller-chip,
.verified-chip,
.team-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .42rem .7rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .82rem;
    line-height: 1;
    min-height: 30px;
}

/* Bestseller */
.badge-bestseller {
    border: 1.5px solid rgba(255, 60, 60, .9);
    background: rgba(255, 60, 60, .08);
    color: #ff4d4d;
    letter-spacing: .3px;
}

.badge-bestseller .badge-fire {
    filter: drop-shadow(0 0 6px rgba(255, 80, 80, .35))
}

.badge-bestseller .badge-text {
    display: inline-block;
    animation: badge-flicker 1.8s infinite ease-in-out
}

@keyframes badge-flicker {

    0%,
    100% {
        opacity: 1;
        transform: translateY(0)
    }

    50% {
        opacity: .85;
        transform: translateY(-1px)
    }
}

/* ——— Wewnętrzny glow/ripple dla .item-card ——— */
.item-card{
  position: relative;
  overflow: hidden;            /* ważne: wszystko zostaje w środku */
  --x: 50%;
  --y: 50%;
}

/* warstwa efektu wewnątrz karty */
.item-card::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
              rgba(167,139,250,.14) 0%,
              rgba(167,139,250,0) 60%);
  opacity: 0;
  transform: scale(0);
  transition: transform .4s ease, opacity .4s ease;
  z-index: 0; /* pod treścią (bo treść ma z-index:1) */
}

/* aktywacja w hoverze */
.item-card:hover::after{
  opacity: .38;
  transform: scale(1.8);
}

/* jeżeli chcesz też „klik-ripple” jak w przycisku */
.item-card:active::after{
  opacity: .5;
  transform: scale(2.0);
  transition: transform .35s ease, opacity .35s ease;
}

/* wspólny akcent i promień */
.box::before,
.item-card::after{
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
              rgba(167,139,250,.14) 0%,
              rgba(167,139,250,0) 60%);
}


/* stary wariant absolutny (zostawiony) */
.item-media .badge-bestseller {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3
}

/* Pozostałe chipy */
.batch-chip {
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: #e9e9ff
}

.seller-chip {
    border: 1px solid rgba(124, 58, 237, .32);
    background: rgba(124, 58, 237, .1);
    color: #d6ccff
}

.verified-chip,
.team-badge {
    border: 1px solid rgba(16, 185, 129, .45);
    background: rgba(16, 185, 129, .12);
    color: #d2fde9
}

.verified-chip::before {
    content: "✔";
    font-weight: 900;
    color: #86efac
}

/* BODY w kolumnie + miejsce na przyciski na dole */
.item-body {
    position: relative;
    /* potrzebne dla absolute w .item-actions */
    flex: 1 1 auto;
    padding: 14px 16px 64px;
    /* od razu rezerwujemy miejsce na przyciski */
    display: flex;
    flex-direction: column;
}

/* Responsive media */
@media (max-width:640px) {
    .item-media {
        aspect-ratio: 1/1
    }
}

@media (min-width: 981px){
  .burger { display: none !important; }
  .mobile-menu { display: none !important; }
}


/* Name + price */
.item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
}

.item-name {
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    letter-spacing: .2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

/* Marquee */
.item-name {
    position: relative;
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.item-name .marq {
    flex: 0 0 auto;
    will-change: transform;
    pointer-events: none
}

.item-name.no-marquee .marq--clone {
    display: none
}

.item-card:hover .item-name {
    text-overflow: clip
}

.item-card:hover .item-name:not(.no-marquee) .marq {
    animation: nameScroll 8s linear infinite
}

.item-card:hover .item-name:not(.no-marquee) .marq--clone {
    transform: translateX(100%);
    animation: nameScroll 8s linear infinite
}

@keyframes nameScroll {
    to {
        transform: translateX(-100%)
    }
}

.item-price {
    font-weight: 800;
    font-size: 15px;
    color: #e5e7eb;
    white-space: nowrap;
    flex: 0 0 auto;
    padding-left: 8px;
    text-align: right
}

.item-meta {
    color: rgba(243, 244, 246, .65);
    font-size: 12.5px;
    line-height: 1.4;
    margin-bottom: 4px
}

/* Stars */
.stars {
    display: inline-flex;
    gap: 2px;
    align-items: center;
    margin-bottom: 16px;
    /* stały dystans do separatora/przycisków */
}

.star {
    width: 16px;
    height: 16px;
    display: inline-block
}

.star svg {
    width: 100%;
    height: 100%;
    display: block
}

.star--on svg {
    fill: #fbbf24
}

.star--off svg {
    fill: #e5e7eb
}

/* ==================
   SEPARATOR + PRZYCISKI (wyrównane na dole)
   ================== */

/* chowamy stary pełnoszerokości separator */
.item-sep {
    display: none;
}

/* grupa przycisków – przyklejona do dołu .item-body */
.item-actions {
    position: absolute;
    left: 50%;
    bottom: 14px;
    /* stały odstęp od dolnej krawędzi karty */
    transform: translateX(-50%);
    display: inline-flex;
    width: max-content;
    gap: 8px;
    justify-content: center;
    margin-top: 0;
    /* nie potrzebujemy już marginesu od góry */
}

/* cienka linia na szerokość grupy przycisków */
.item-actions::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    /* nie nachodzi na gwiazdki */
    height: 1px;
    background: rgba(255, 255, 255, .08);
    border-radius: 1px;
}

/* Buttons */
/* ======== ULTRA-CLEAN, SURPRISING BUTTONS ======== */

/* 1) Lepsza typografia (system + Inter, bez ładowania webfontów) */
:root{
  --btn-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
              Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
              "Segoe UI Emoji", "Segoe UI Symbol";
  --btn-ease: cubic-bezier(.2,.8,.2,1);
}

/* 2) Bazowy wygląd + mikrodetale renderingu */
.btn-sm {
  position: relative;
  overflow: hidden; /* <-- to zatrzymuje animację wewnątrz */
  border-radius: 999px;
  border: 1px solid rgba(167,139,250,.45);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: .9rem;
  padding: .55rem .9rem;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), background .18s, border-color .18s;
}

/* Delikatne podniesienie */
.btn-sm:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.06));
  border-color: rgba(167,139,250,.65);
}

/* Efekt shine + ripple tylko wewnątrz */
.btn-sm::before,
.btn-sm::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: none;
}

/* Świetlisty shine */
.btn-sm::before {
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
              rgba(167,139,250,.35) 0%,
              rgba(167,139,250,0) 60%);
  opacity: 0;
  transform: scale(0);
  transition: transform .4s ease, opacity .4s ease;
}

.btn-sm:hover::before {
  opacity: .4;
  transform: scale(1.6);
}

/* Ripple (kliknięcie) */
.btn-sm::after {
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
              rgba(167,139,250,.25) 0%,
              rgba(167,139,250,0) 60%);
  opacity: 0;
  transform: scale(0);
}

.btn-sm:active::after {
  opacity: .5;
  transform: scale(1.8);
  transition: transform .4s ease, opacity .4s ease;
}


/* 9) Ograniczenie ruchu, jeśli użytkownik woli statykę */
@media (prefers-reduced-motion: reduce){
  .btn-sm, .btn-sm::after, .btn-sm::before{
    transition: none !important;
    animation: none !important;
  }
}


@media (max-width:1024px) {
    .items-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width:640px) {
    .items-grid {
        grid-template-columns: 1fr
    }
}

.input::placeholder {
    transition: opacity .25s var(--ease)
}

.input:focus::placeholder {
    opacity: .5
}

.btn-sm,
.btn-sm:link,
.btn-sm:visited {
    text-decoration: none
}

.btn-sm:active {
    transform: translateY(0) scale(.98)
}

.item-card {
    transition: transform .22s var(--ease), box-shadow .22s var(--ease)
}

.item-card:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 48px rgba(0, 0, 0, .45)
}

.item-row {
    transition: transform .2s var(--ease)
}

.item-name,
.item-price {
    transition: transform .18s var(--ease), color .18s var(--ease)
}

.item-card:hover .item-name,
.item-card:hover .item-price {
    transform: scale(1.05)
}

.item-card::before {
    pointer-events: none
}

.item-media,
.item-actions .btn-sm,
.item-actions a {
    position: relative;
    z-index: 1
}

/* Icons */
.btn-icon-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: inline-block
}

/* ---------- Filtry ---------- */
#filtersPanel {
    font-family: "Poppins", "Nunito", system-ui, sans-serif;
    color: #f3f4f6;
    font-size: .95rem;
    line-height: 1.5;
    padding: 16px;
}

#filtersPanel.filters-overlay[hidden] {
    display: none
}

#filtersPanel.filters-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    background: rgba(5, 5, 8, .55);
    backdrop-filter: blur(10px) saturate(1.05);
    animation: overlayIn .25s var(--ease);
}

@keyframes overlayIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

#filtersPanel .filters-dialog {
    width: min(980px, 94vw);
    max-height: min(86vh, 880px);
    background: linear-gradient(180deg, rgba(20, 20, 28, .96), rgba(17, 17, 23, .96));
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transform-origin: 50% 40%;
    animation: dialogIn .26s var(--ease);
}

#filtersPanel .filters-dialog::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: 0;
    pointer-events: none;
    opacity: .32;
    mix-blend-mode: screen;
    background:
        radial-gradient(80px 80px at 12% 78%, rgba(167, 139, 250, .35), transparent 60%),
        radial-gradient(120px 120px at 78% 86%, rgba(124, 58, 237, .30), transparent 62%),
        radial-gradient(72px 72px at 32% 18%, rgba(167, 139, 250, .28), transparent 58%),
        radial-gradient(110px 110px at 86% 26%, rgba(124, 58, 237, .26), transparent 62%),
        radial-gradient(56px 56px at 58% 54%, rgba(147, 99, 241, .22), transparent 60%);
    animation: bubblesRise 16s linear infinite, bubblesPulse 4.6s ease-in-out infinite;
}

#filtersPanel .filters-dialog::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .28), inset 0 0 24px rgba(124, 58, 237, .16);
    background: transparent;
}

@keyframes dialogIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.98)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes bubblesRise {
    0% {
        transform: translateY(6%)
    }

    50% {
        transform: translateY(-4%)
    }

    100% {
        transform: translateY(6%)
    }
}

@keyframes bubblesPulse {

    0%,
    100% {
        opacity: .30
    }

    50% {
        opacity: .45
    }
}

@media (prefers-reduced-motion: reduce) {
    #filtersPanel .filters-dialog::before {
        animation: none
    }
}

#filtersPanel .filters-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent);
}

#filtersPanel .filters-header h3 {
    margin: 0;
    font-weight: 800;
    letter-spacing: .2px;
    font-size: 1.15rem;
    color: #fff
}

#filtersPanel .filters-close {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #e5e7eb;
    font-size: 20px;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: .18s var(--ease);
}

#filtersPanel .filters-close:hover {
    background: rgba(255, 255, 255, .06);
    transform: translateY(-1px)
}

#filtersPanel .filters-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 16px;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
    position: relative;
    z-index: 1;
}

@media (max-width:860px) {
    #filtersPanel .filters-content {
        grid-template-columns: 1fr
    }
}

#filtersPanel .filters-col h4 {
    margin: .4rem 0 .6rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff
}

#filtersPanel .price-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px
}

#filtersPanel .price-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    padding: 10px 12px;
}

#filtersPanel .price-box span {
    font-size: .85rem;
    color: rgba(243, 244, 246, .75)
}

#filtersPanel .price-box input {
    appearance: textfield;
    -moz-appearance: textfield;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .10);
    color: #fff;
    border-radius: 10px;
    padding: .55rem .7rem;
    outline: none;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}

#filtersPanel .price-box input::placeholder {
    color: rgba(243, 244, 246, .55)
}

#filtersPanel .price-box input:focus {
    border-color: rgba(167, 139, 250, .55);
    box-shadow: 0 0 0 4px rgba(167, 139, 250, .12);
    background: rgba(255, 255, 255, .05)
}

#filtersPanel .kind-scroller {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    max-height: 140px;
    overflow: auto;
    padding-right: 4px;
}

#filtersPanel .kind-item {
    --bd: rgba(255, 255, 255, .10);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: .45rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--bd);
    background: rgba(255, 255, 255, .06);
    color: #e9e9ff;
    font-weight: 700;
    font-size: .92rem;
    transition: .18s var(--ease);
}

#filtersPanel .kind-item:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .16)
}

#filtersPanel .kind-item:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px rgba(167, 139, 250, .25)
}

#filtersPanel .kind-item[aria-selected="true"],
#filtersPanel .kind-item.is-selected,
#filtersPanel .kind-item.active {
    background: linear-gradient(180deg, rgba(124, 58, 237, .22), rgba(124, 58, 237, .14));
    border-color: rgba(167, 139, 250, .55);
    color: #fff;
}

#filtersPanel .radio-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

#filtersPanel .radio-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    padding: .42rem .65rem;
    cursor: pointer;
    transition: .18s var(--ease);
    font-weight: 700;
    line-height: 1;
}

#filtersPanel .radio-pill input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0
}

#filtersPanel .radio-pill span {
    pointer-events: none;
    color: #e9e9ff;
    font-size: .92rem
}

#filtersPanel .radio-pill:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .16)
}

#filtersPanel .radio-pill:has(input:focus-visible) {
    box-shadow: 0 0 0 4px rgba(167, 139, 250, .25)
}

#filtersPanel .radio-pill:has(input:checked) {
    background: linear-gradient(180deg, rgba(124, 58, 237, .22), rgba(124, 58, 237, .14));
    border-color: rgba(167, 139, 250, .55);
}

#filtersPanel .radio-pill:has(input:checked) span {
    color: #fff
}

#filtersPanel .filters-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(0deg, rgba(255, 255, 255, .03), transparent);
}

#filtersPanel .filters-footer .spacer {
    flex: 1
}

#filtersPanel .filters-footer .btn-sm {
    border: 1px solid rgba(167, 139, 250, .35);
    background: rgba(255, 255, 255, .06);
    color: #fff
}

#filtersPanel .filters-footer .btn-sm.btn-secondary {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12)
}

#filtersPanel .filters-footer .btn-sm.btn-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .14)
}

#filtersPanel .filters-footer .btn-sm:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(167, 139, 250, .55)
}

/* Lookup */
.lookup-dialog .metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.lookup-dialog .metric {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    padding: 10px 12px
}

.lookup-dialog .metric .k {
    opacity: .7;
    font-size: .9rem
}

.lookup-dialog .metric .v {
    font-weight: 800
}

.lookup-dialog .media-main {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: #0b0b10
}

.lookup-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 18px;
    align-items: start
}

@media (max-width:860px) {
    .lookup-grid {
        grid-template-columns: 1fr
    }
}

.lookup-photos {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px
}

.lookup-photos>div {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    overflow: hidden;
    background: #0b0b10
}

.lookup-photos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1/1
}

/* ---------- NOTE MODAL (minimal, flat) ---------- */
#noteOverlay[hidden] { display:none; }

#noteOverlay{
  position:fixed; inset:0; z-index:50;
  display:grid; place-items:center;
  padding:16px;
  background: rgba(15,16,20,.55);
  animation: fadeIn .15s ease-out;
}

@keyframes fadeIn { from{opacity:0} to{opacity:1} }

#noteOverlay .note-dialog{
  width:min(640px, 94vw);
  max-height:min(80vh, 780px);
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:12px;
  background:#111215;          /* ciemne, ale gładkie tło */
  border:1px solid #23252a;    /* subtelna ramka */
  box-shadow: 0 20px 40px rgba(0,0,0,.45);
  opacity:0; transform: translateY(6px);
  animation: cardIn .16s ease-out forwards;
}

@keyframes cardIn { to{opacity:1; transform:none;} }

.note-header{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-bottom:1px solid #1c1e23;
  background:#101115;
}
.note-icon{ display:none; }  /* wycinamy ozdobnik */
#noteOverlay .filters-header h3{
  margin:0; font: 600 15px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:#f4f5f7;
}

.filters-close{
  margin-left:auto;
  appearance:none; border:0; background:transparent; color:#aeb2bb;
  font-size:18px; line-height:1; padding:4px 6px; border-radius:8px; cursor:pointer;
}
.filters-close:hover{ background:#181a20; color:#fff; }

.note-content{ padding:14px; overflow:auto; max-height:56vh; }
.note-body{
  color:#e6e7ea; font: 400 14px/1.65 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  white-space:pre-wrap; word-break:break-word;
}
.note-body p{ margin:.5rem 0; }
.note-body a{ color:#9ab7ff; text-decoration:underline; text-underline-offset:2px; }

.note-footer{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px;
  border-top:1px solid #1c1e23;
  background:#101115;
}
.note-meta{ font-size:12px; color:#9aa0aa; }
.spacer{ flex:1; }

/* przyciski – proste, bez świecenia */
#noteOverlay .btn-sm{
  appearance:none; border:1px solid #2a2d33; background:#16181d; color:#f5f6f8;
  font: 500 12.5px/1 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  padding:8px 12px; border-radius:8px; cursor:pointer;
}
#noteOverlay .btn-sm:hover{ background:#1a1c22; border-color:#32353c; }
#noteOverlay .btn-sm.btn-secondary{ color:#d4d7dd; }

/* mniej ruchu, gdy użytkownik woli statykę */
@media (prefers-reduced-motion: reduce){
  #noteOverlay, #noteOverlay .note-dialog{ animation:none; }
}


/* === Mobile slide-out menu (copied from main) === */
.mobile-menu{
  position: fixed;
  top: 0;
  right: -100%;
  width: 78%;
  height: 100vh;
  background: #111;
  padding: 2rem 1.5rem;
  transition: right 0.3s ease;
  z-index: 999;
  display: grid;
  grid-template-rows: auto 1fr;
}
.mobile-menu.open{ right: 0; }
.mobile-menu #closeMenu{
  position:absolute;
  top:10px; right:14px;
  font-size:32px; line-height:1;
  background:transparent; border:0; color:#fff; cursor:pointer;
}
.mobile-menu ul{
  list-style:none; padding:0; margin:1.6rem 0 0 0;
  display:flex; flex-direction:column; gap:10px;
}
.mobile-menu a{
  color:#fff; text-decoration:none;
  font-family: "Poppins","Nunito", system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  font-weight:700; font-size:1.05rem; letter-spacing:.2px;
}

/* Block scroll when menu open */
body.menu-open{ overflow:hidden; }

/* Burger on mobile to the far right */
@media (max-width: 980px){
  .nav-shell{ display:flex; align-items:center; }
  .nav-center{ display:none !important; }
  .nav-right{ margin-left:auto; display:flex; align-items:center; }
  .burger{
    display:inline-flex; flex-direction:column; gap:4px;
    width:40px; height:40px; justify-content:center; align-items:center;
    border:0; background:transparent; cursor:pointer;
  }
  .burger span{ display:block; width:22px; height:2px; background:#fff; }
}


.mobile-menu a:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}