:root{
  --gold-1:#c8a858; --gold-2:#e2c676; --gold-3:#ad842e; --gold-4:#fff2bf;
  --text:#eee8da; --muted:#b8b2a4;
  --texture-contrast:1.08; --texture-gain:.55; --texture-speed:.02; --texture-scale:1.8;
  --header-h:120px; --header-h-sm:96px; --logo-h:70px; --logo-h-sm:50px;
  --container:min(1240px, 92vw);
  --panel:#141416; --panel-border:#202024; --divider:rgba(255,255,255,.06);
  --card-bg:#121214; --card-bd:rgba(226,198,118,.20); --card-bd-hover:rgba(226,198,118,.38);
  --chip-bg:rgba(12,12,14,.75); --chip-bd:rgba(226,198,118,.58);
  --success:#9ee6b4; --used:#f0c27b;
  --footer-fg:#d8d2c6; --footer-fg-muted:#c9c3b6;
}

/* RESET/BAZA */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:#0e0e11; color:var(--text) }
img{ max-width:100%; height:auto; display:block }

/* TŁO WEBGL – pełen ekran, za treścią (usuwa „ciemną planszę”) */
#bg{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; display:block; pointer-events:none }

/* HEADER + LOGO + NAWIGACJA */
.site-header{ position:sticky; top:0; z-index:100; background:rgba(10,10,12,.75); backdrop-filter: blur(6px); border-bottom:1px solid var(--panel-border) }
.header-inner{ height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:18px }
.brand{ display:inline-flex; align-items:center; text-decoration:none }
.brand-logo{ height:var(--logo-h); width:auto }
.is-compact .header-inner{ height:var(--header-h-sm) }
.is-compact .brand-logo{ height:var(--logo-h-sm) }

/* WP generuje <ul><li><a> – usuń punktor i marginesy */
.site-nav ul{ list-style:none; display:flex; gap:10px; align-items:center; margin:0; padding:0 }
.site-nav li{ margin:0; padding:0 }
.site-nav a{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; letter-spacing:.04em; color:var(--text); padding:8px 12px; border-radius:10px; transition:.2s; text-decoration:none }
.site-nav a:hover, .site-nav a.is-current{ background:#1f1f23; color:var(--gold-2) }
.site-nav .btn{ position: relative; overflow: hidden; border:1px solid var(--card-bd); background: linear-gradient(135deg,var(--gold-3),var(--gold-2) 45%, var(--gold-4) 58%, var(--gold-1)); color:#1a1a1a; padding:8px 16px; border-radius:999px; font-weight:700; }
.nav-sep{ width:1px; height:20px; background:rgba(255,255,255,.12); border-radius:1px; margin-inline:4px }
@media (max-width:1024px){ .site-nav{ display:none !important } }

/* Rezerwacja szerokości pod ikony (unikamy CLS, gdy font się doczytuje) */
i[class^="ri-"], i[class*=" ri-"]{ display:inline-block; width:1.25em; min-width:1.25em; line-height:1; text-align:center }

/* SHEET / HAMBURGER */
/* Domyślnie ukryj hamburger na desktopie */
.hamburger{ display:none; position:fixed; right:4vw; top:24px; width:44px; height:44px; background:transparent; border:0; cursor:pointer; z-index:3002 }
@media (max-width:1024px){ .hamburger{ display:block } }

.sheet{ position:fixed; inset:0; z-index:1000; pointer-events:none; }
.sheet.is-open{ pointer-events:auto; }
.sheet .backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.68); opacity:0; transition:opacity .4s ease; z-index:1000; }
.sheet .panel{
  position:absolute; right:0; top:0; height:100dvh; width:min(360px, 88vw);
  background:#141416; border-left:1px solid var(--panel-border); z-index:1001;
  display:flex; flex-direction:column; gap:12px; padding: 120px 18px 18px;
  transform: translateX(100%); transition: transform .4s cubic-bezier(0.2, 1, 0.3, 1);
}
.sheet .panel hr{ border:0; height:1px; background:rgba(255,255,255,.08); margin:6px 0 2px }
.sheet.is-open .panel{ transform: translateX(0); }
.sheet .panel a{
  text-decoration:none; color:var(--text); padding:12px; border-radius:10px; border:1px solid var(--card-bd);
  background:#1b1b1f; font-weight:600; display:flex; align-items:center; gap:8px;
  opacity:0; transform:translateX(20px);
  transition: background-color .2s, border-color .2s, opacity .3s ease, transform .3s ease;
}
.sheet.is-open .panel a{ opacity:1; transform:translateX(0); }
.sheet .panel a.is-current{ border-color: var(--card-bd-hover); }

/* PRZYCISK ZAMKNIĘCIA W PANELU (X) */
.close-btn{
  position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:12px;
  border:1px solid var(--card-bd); background:#1b1b1f; color:var(--text); z-index:1002;
  display:grid; place-items:center; cursor:pointer;
}
.close-btn:hover{ border-color:var(--card-bd-hover); background:#202025 }

/* HAMBURGER – paski */
.hamburger:focus-visible{ outline:2px solid var(--gold-2); border-radius:6px; }
.hamburger-box{ position:relative; width:28px; height:20px; display:block; margin:auto }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{ position:absolute; left:0; width:28px; height:3px; background-color:var(--text); border-radius:2px; transition: transform .22s cubic-bezier(.55,.055,.675,.19), background-color .2s ease, top .2s ease, bottom .2s ease; }
.hamburger-inner{ top:50%; transform: translateY(-50%); }
.hamburger-inner::before, .hamburger-inner::after{ content:''; }
.hamburger-inner::before{ top:-9px; }
.hamburger-inner::after{ bottom:-9px; }
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after{ background-color: var(--gold-2) }

/* HERO */
.hero-band{ border-top:1px solid var(--divider); border-bottom:1px solid var(--divider); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); }
.hero-inner{ padding:24px 0; text-align:center }
.hero-tag{ font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; font-weight:700; font-size:clamp(20px,3.6vw,30px); letter-spacing:.06em; color:var(--text) }
.hero-tag .highlight-link{ background:linear-gradient(135deg,var(--gold-3),var(--gold-2) 45%, var(--gold-4) 58%, var(--gold-1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; position:relative; display:inline-block }
.hero-tag .highlight-link::after{ content:''; position:absolute; bottom:-2px; left:0; width:100%; height:1px; background-color:var(--gold-2); transform:scaleX(0); transform-origin:left; animation:underline-draw .8s cubic-bezier(0.19,1,0.22,1) .6s forwards }
@keyframes underline-draw { to { transform: scaleX(1); } }

/* SEARCH */
.search-section{ padding:16px 0 0 }
.searchbar{ position:relative; width:100%; border:1px solid var(--card-bd); background:rgba(20,20,22,.78); border-radius:16px; padding:10px; box-shadow: 0 8px 24px rgba(0,0,0,.20) }
.search-grid{ display:grid; gap:10px; align-items:center; grid-template-columns: 1fr; grid-template-areas: "mode" "field" }
.search-grid .mode{ grid-area: mode; display:flex; gap:6px; padding:4px; border-radius:999px; background:#101013; border:1px solid var(--panel-border); width:100% }
.search-grid .mode button{ appearance:none; border:0; padding:9px 12px; border-radius:999px; cursor:pointer; font-weight:700; font-size:14px; letter-spacing:.04em; color:var(--muted); background:transparent; transition:.2s; flex:1 1 0 }
.search-grid .mode button.active{ color:#1a1a1a; background:linear-gradient(135deg,var(--gold-3),var(--gold-2) 45%, var(--gold-4) 58%, var(--gold-1)) }

/* pole combobox (ikonka + input + button w jednej linii) */
.search-field{ grid-area: field; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px }
.search-field i{ font-size:18px; opacity:.9 }
.search-field input{ min-width:0; background:transparent; border:0; outline:0; color:var(--text); font-size:14px }
.search-field .submit{ appearance:none; border:1px solid var(--card-bd); background:#17171a; color:var(--text); padding:10px 12px; border-radius:12px; font-weight:700; cursor:pointer; transition:.2s; min-width:110px; justify-self:end }
.search-field .submit:hover{ border-color:var(--card-bd-hover); background:#1b1b1f }

@media (min-width:992px){
  .search-grid{ grid-template-columns: auto 1fr auto; grid-template-areas: "mode field field" }
  .search-field{ grid-template-columns: 1fr auto }
  .search-field i{ display:none }
}

/* Suggestions */
.suggestions{ position:absolute; top:calc(100% + 6px); left:0; right:0; background:#141416; border:1px solid var(--panel-border); border-radius:14px; overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.35); display:none; max-height:52vh; overflow:auto; z-index:40 }
.suggestions[aria-hidden="false"]{ display:block }
.suggestion-item{ display:flex; gap:10px; align-items:center; padding:10px 12px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.04) }
.suggestion-item:last-child{ border-bottom:0 }
.suggestion-item i{ opacity:.9 }
.suggestion-item .kicker{ font-size:11px; color:var(--muted) }
.suggestion-item .main{ font-weight:600; font-size:14px }
.suggestion-item[aria-selected="true"], .suggestion-item:hover{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); outline: 1px solid rgba(226,198,118,.25) }

/* SEKCJE */
section{ padding:28px 0 }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px }
.section-title{ font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; font-weight:700; letter-spacing:.06em; font-size:clamp(20px,3.6vw,28px); background:linear-gradient(135deg,var(--gold-3),var(--gold-2) 45%, var(--gold-4) 60%, var(--gold-1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }

/* KATEGORIE */
.categories{ display:grid; gap:12px; grid-template-columns: repeat(2,1fr) }
@media (min-width:720px){ .categories{ grid-template-columns: repeat(4,1fr) } }
@media (min-width:1100px){ .categories{ grid-template-columns: repeat(6,1fr) } }
.cat{ display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:10px; padding:14px; border:1px solid var(--card-bd); background:var(--card-bg); border-radius:14px; text-decoration:none; color:var(--text); transition:.25s ease; backface-visibility:hidden }
.cat:hover{ transform:translateY(-2px); border-color:var(--card-bd-hover) }
.cat i{ font-size:22px; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:#17171a; background-image: linear-gradient(135deg,var(--gold-3),var(--gold-2) 45%, var(--gold-4) 58%, var(--gold-1)); -webkit-background-clip:text; background-clip:text; color:transparent; transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1) }
.cat:hover i{ transform: rotate(8deg) scale(1.1) }
.cat span{ font-weight:700; font-size:14px }

/* KARTY */
.grid{ display:grid; gap:14px; grid-template-columns: repeat(2,1fr) }
@media (min-width:720px){ .grid{ grid-template-columns: repeat(3,1fr) } }
@media (min-width:1100px){ .grid{ grid-template-columns: repeat(4,1fr) } }
.card{ position:relative; border:1px solid var(--card-bd); background:var(--card-bg); border-radius:16px; overflow:hidden; transition:.25s ease; display:flex; flex-direction:column }
.card:hover{ transform:translateY(-3px); border-color:var(--card-bd-hover) }
.thumb{ position:relative; aspect-ratio:4/3; background:#101012; display:block; overflow:hidden }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s cubic-bezier(0.4,0,0.2,1), filter .4s cubic-bezier(0.4,0,0.2,1) }
.card:hover .thumb img{ transform:scale(1.05); filter: blur(2px) brightness(.9) }

/* Overlay z chipami — zawsze widoczny */
.thumb-overlay{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:10px; display:flex; gap:8px; align-items:center; justify-content:space-between; background: linear-gradient(180deg, transparent 0%, rgba(6,6,8,.55) 35%, rgba(6,6,8,.92) 100%); backdrop-filter: blur(4px) }

.card .body{ padding:12px; display:grid; gap:6px }
.title{ font-weight:600; font-size:14px; color:#f1eee6 }
.meta{ display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:12px }
.price{ font-weight:700; letter-spacing:.04em; background:linear-gradient(135deg,var(--gold-3),var(--gold-2) 45%, var(--gold-4) 60%, var(--gold-1)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
.cta{ margin:8px 12px 12px; display:inline-flex; justify-content:center; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; text-decoration:none; border:1px solid var(--card-bd); color:var(--text); font-weight:600; font-size:14px; transition:.25s ease; background:#17171a }
.cta:hover{ border-color:var(--card-bd-hover); background:#1b1b1f }

/* CHIPY */
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.03em; color:#f7f3e8; background:var(--chip-bg); border:1px solid var(--chip-bd); text-shadow: 0 1px 0 rgba(0,0,0,.35); max-width:48%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
.chip i{ font-size:14px; opacity:.95; color:var(--gold-2); flex:0 0 auto; width:1.25em; min-width:1.25em; text-align:center }
.chip-text{ overflow:hidden; text-overflow:ellipsis }
.chip-new{ color:#eafff5; border-color: rgba(158,230,180,.7) }
.chip-new i{ color:#9ee6b4 }
.chip-used{ color:#fff4e5; border-color: rgba(240,194,123,.7) }
.chip-used i{ color:#f0c27b }

/* BREADCRUMBS (wyśrodkowane pod hasłem) */
.breadcrumbs{ padding:10px 0 0; text-align:center }
.breadcrumbs ol{ list-style:none; display:inline-flex; gap:8px; font-size:12px; color:var(--muted); margin:0; padding:0 }
.breadcrumbs li+li::before{ content:"›"; margin:0 6px; color:var(--muted) }
.breadcrumbs a{ color:var(--muted); text-decoration:none }
.breadcrumbs a[aria-current="page"], .breadcrumbs [aria-current="page"]{ color:var(--text); font-weight:700 }

/* FOOTER – bez punktorów i z linkami w jednej linii */
.footer{ margin-top:auto; padding:26px 0; background:#0a0a0c; border-top:1px solid var(--panel-border); color:var(--footer-fg); font-size:12px; letter-spacing:.04em }
.footer-inner{ display:grid; gap:16px; align-items:center; grid-template-columns:1fr; text-align:center }
.footer-left .footer-copy{ font-weight:700; color:var(--footer-fg) }
.footer-left .footer-small{ color:var(--footer-fg-muted); font-weight:500 }
.footer-mid{ display:flex; gap:10px; justify-content:center; align-items:center }
.footer-mid ul{ list-style:none; display:flex; gap:10px; margin:0; padding:0 }
.footer-mid li{ margin:0; padding:0 }
.footer-mid a{ color:var(--footer-fg); text-decoration:none; transition:color .2s }
.footer-mid a:hover{ color:var(--gold-2) }
.footer-crafted{ display:flex; justify-content:center; align-items:center; gap:6px }
.footer-crafted .ri-heart-fill{ color:var(--gold-3) }
.footer-crafted a{ color:var(--footer-fg); text-decoration:none; font-weight:600 }
@media (min-width:720px){
  .footer-inner{ grid-template-columns: 1fr auto 1fr; text-align:left }
  .footer-crafted{ justify-content:flex-end }
}

/* Reveal — TYLKO opacity (bez transform => mniej CLS) */
.hidden{ display:none !important }
.will-reveal{ opacity:0; transition:opacity .6s ease }
.will-reveal.in{ opacity:1 }
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important }
  .will-reveal{ opacity:1 }
}

/* --- STABILNOŚĆ OBRAZÓW (CLS) --- */
img.prod-img{
  width:100%; height:100%; object-fit:cover;
  aspect-ratio: 4 / 3;
  contain-intrinsic-size: 640px 480px;
}

/* CONTAINER */
.container{ width:var(--container); margin-inline:auto }