/* ============================================================
   Sklep Blisko Polski - motyw "Noc na stadionie" (wspolny dla wszystkich stron)
   Ladowany tylko przy cookie tema=2. Nie edytuje sklep.css / motyw.css / stopka.css:
   nadpisuje je wyzsza specyficznoscia (":root body" + zagniezdzone selektory).
   Klasy wlasne: .bp-*  (lockup, dock, paleta, stopka), .cta, .kbd, .mono, .sr
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@300..900&family=Fraunces:ital,opsz,wght@0,9..144,400..600;1,9..144,300..500&family=JetBrains+Mono:wght@400;500&display=swap&subset=latin-ext");

@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --bg: #0B0C10;
  --bg2: #12141b;
  --face: #161821;
  --line: rgba(244, 241, 234, .14);
  --ink: #F4F1EA;
  --mute: #A4A9B6;
  --red: #D4122E;
  --red-t: #F0283A;
  --paper: #ECE9E2;
  --f-disp: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --f-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --gut: clamp(16px, 4vw, 56px);
  --r: 20px;
}

html { background: var(--bg); color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ---------- pomocnicze (wspolne dla strony glownej) ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.kbd { font-family: var(--f-mono); font-size: .68rem; padding: 3px 7px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,.35); color: var(--mute); margin-inline: 2px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--red-t); box-shadow: 0 0 0 0 rgba(240,40,58,.7); animation: bp-pulse 2s infinite; }
@keyframes bp-pulse { 70% { box-shadow: 0 0 0 12px rgba(240,40,58,0); } 100% { box-shadow: 0 0 0 0 rgba(240,40,58,0); } }

.cta, .bp-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 26px; border-radius: 999px; background: var(--red); color: #fff; text-decoration: none; font-family: var(--f-mono); font-size: .8rem; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; border: 0; cursor: pointer; will-change: transform; transition: background .25s, box-shadow .25s, transform .25s; box-shadow: 0 10px 40px -10px rgba(212,18,46,.8); }
.cta svg, .bp-cta svg { width: 18px; height: 18px; transition: transform .3s; }
.cta:hover, .bp-cta:hover { background: #ea1d3a; color: #fff; }
.cta:hover svg, .bp-cta:hover svg { transform: translateX(4px); }
.cta--ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.cta--ghost:hover { background: var(--ink); color: var(--bg); }
@media (max-width: 700px) { .cta, .bp-cta { padding: 14px 22px; } }

/* ---------- LOCKUP MARKI: [orzel] SKLEP + (BLISKO / POLSKI) ----------
   Skala przez font-size elementu (.bp-lockup--lg dla hero, --xl dla stopki). */
.bp-lockup { display: inline-flex; align-items: center; gap: .42em; font-family: var(--f-disp); font-weight: 900; text-transform: uppercase; color: var(--ink); line-height: 1; font-size: 13px; text-decoration: none; white-space: nowrap; }
.bp-lockup__herb { width: 2.7em; height: 2.7em; flex: none; fill: currentColor; filter: drop-shadow(0 2px 10px rgba(0,0,0,.6)); }
.bp-lockup__sklep { font-size: 2.55em; line-height: .78; letter-spacing: .005em; padding-top: .04em; }
.bp-lockup__sub { display: flex; flex-direction: column; justify-content: center; font-size: 1.12em; line-height: .86; letter-spacing: .16em; font-weight: 800; }
.bp-lockup__sub span:last-child { color: var(--red-t); }
.bp-lockup--lg { font-size: clamp(18px, 3.4vw, 34px); }
.bp-lockup--xl { font-size: clamp(30px, 7vw, 66px); }
.bp-lockup--noherb .bp-lockup__herb, .bp-lockup__herb { display: none; }

/* ============================================================
   NADPISANIA SILNIKA (strony sklepu i strony tresci)
   ============================================================ */
:root body {
  --shop-primary: #12141b !important;
  --shop-primary-text: #F4F1EA !important;
  --shop-accent: #D4122E !important;
  --shop-accent-text: #ffffff !important;
  --shop-bg: #0B0C10 !important;
  --shop-text: #F4F1EA !important;
  --shop-font: "Fraunces", Georgia, serif !important;
  --shop-heading-font: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif !important;
  --ink: #F4F1EA; --accent: #D4122E; --paper: #ECE9E2; --line: rgba(244,241,234,.14);
  --red: #D4122E; --red-dark: #A80E24; --red-jasny: #F0283A; --dark: #0B0C10; --dark-deep: #0E0F14; --dark-soft: #161821;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif; --body: "Fraunces", Georgia, serif;
  --danger: #FF4D5E; --muted: #A4A9B6;
  position: relative;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-serif);
  font-size: 17px; line-height: 1.55;
  font-optical-sizing: auto;
  overflow-x: hidden;
  padding-bottom: 120px;
  min-height: 100vh;

  /* scena: swiatla reflektorow */
  &::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(60% 40% at 15% -5%, rgba(255,255,255,.10), transparent 70%),
      radial-gradient(50% 40% at 90% -5%, rgba(212,18,46,.20), transparent 70%),
      radial-gradient(120% 80% at 70% 0%, #1a1d28 0%, var(--bg) 62%); }
  /* ziarno */
  &::after { content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .08; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
    animation: bp-grain 1.2s steps(6) infinite; }

  h1, h2, h3, h4 { font-family: var(--f-disp); color: var(--ink); }
  a { color: inherit; }
  ::selection { background: var(--red); color: #fff; }
  :focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 5px var(--red); border-radius: 6px; }

  .skip-link { background: var(--ink); color: var(--bg); border-radius: 10px; z-index: 10000; }
}
@keyframes bp-grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* ---------- NAGLOWEK ---------- */
:root body {
  .site-header, .site-header--podstrona, .site-header.is-fixed { position: sticky; top: 0; z-index: 60; background: rgba(11,12,16,.72); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); color: var(--ink); border-bottom: 1px solid var(--line); }
  .site-header .nav { display: flex; align-items: center; gap: 22px; min-height: 68px; width: min(1360px, calc(100% - 2 * var(--gut))); }
  .brand { display: flex; align-items: center; margin-right: auto; text-decoration: none; padding: 6px 0; }
  .brand b { font-family: var(--f-disp); font-size: 22px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
  .brand .bp-lockup { font-size: 14.5px; flex-direction: row; }
  .brand .bp-lockup span { display: block; }
  .brand .bp-lockup .bp-lockup__sub { display: flex; flex-direction: column; }
  .brand .bp-lockup svg { display: block; }
  .main-menu { gap: clamp(14px, 2vw, 28px); }
  .main-menu a { font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); text-decoration: none; padding: 8px 0; transition: color .2s; display: inline-flex; align-items: center; gap: 8px; }
  .main-menu a:hover, .main-menu a[aria-current], .main-menu a.bp-on { color: var(--ink); }
  .main-menu a::after { bottom: 0; background: var(--red-t); }
  .main-menu a.bp-on::after { right: 0; }
  .szukaj-przelacznik { color: var(--ink); width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line); background: rgba(244,241,234,.06); padding: 0; }
  .szukaj-przelacznik:hover { background: var(--red); border-color: var(--red); color: #fff; }
  .menu-button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(244,241,234,.06); padding: 0; display: none; flex-direction: column; align-items: center; justify-content: center; }
  .menu-button span:not(.sr-only) { background: var(--ink); width: 18px; height: 2px; margin: 2.5px 0; border-radius: 2px; }
  .szukaj-panel { background: #12141b; border-top: 1px solid var(--line); }
  .szukaj-formularz { display: flex; gap: 10px; }
  .szukaj-formularz input { flex: 1; }
  @media (max-width: 980px) {
    .menu-button { display: flex; }
    .main-menu { background: rgba(14,15,20,.97); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); padding: 10px var(--gut) 22px; }
    .main-menu a { padding: 14px 0; font-size: .8rem; width: 100%; border-bottom: 1px solid var(--line); }
    .main-menu a::after { display: none; }
    .site-header .nav { gap: 10px; }
  }
}
.bp-count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--red); color: #fff; font: 600 .68rem/19px var(--f-mono); letter-spacing: 0; text-align: center; }
.bp-count[hidden] { display: none !important; }

/* ---------- uklad strony ---------- */
:root body {
  .sklep-wrap { width: min(1360px, calc(100% - 2 * var(--gut))); padding: clamp(28px, 5vw, 64px) 0 40px; min-height: 60vh; }
  .sklep-okruszki { margin-bottom: 22px; }
  .sklep-okruszki ol { color: var(--mute); font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; gap: 6px; }
  .sklep-okruszki a { color: var(--mute); text-decoration: none; }
  .sklep-okruszki a:hover { color: var(--ink); }
  .sklep-okruszki li + li::before { content: "/"; color: var(--red-t); margin-right: 6px; }
  .sklep-okruszki [aria-current="page"] { color: var(--ink); font-weight: 500; }

  h1 { font-family: var(--f-disp); font-weight: 900; text-transform: uppercase; line-height: .9; letter-spacing: -.005em; margin: 6px 0 0; font-size: clamp(2.8rem, 8vw, 6rem); color: var(--ink); text-shadow: 0 6px 40px rgba(0,0,0,.5); }
  .sklep-wrap > h1 { margin-bottom: 22px; }
  main h2 { font-family: var(--f-serif); font-weight: 400; letter-spacing: -.01em; font-variation-settings: "opsz" 144; }

  .sklep-hero { align-items: flex-end; margin-bottom: clamp(24px, 4vw, 44px); padding-bottom: clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--line); }
  .sklep-hero p { font-family: var(--f-mono); font-size: .74rem; font-weight: 500; letter-spacing: .12em; color: var(--ink); display: flex; align-items: center; gap: 10px; }
  .sklep-hero p::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--red-t); box-shadow: 0 0 0 0 rgba(240,40,58,.7); animation: bp-pulse 2s infinite; }
  .sklep-hero form { gap: 8px; }
  .sklep-hero form { flex: 0 1 520px; min-width: 0; max-width: 100%; }
  .sklep-hero input { flex: 1 1 auto; width: auto; min-width: 0; }
  .sklep-hero form button { flex: none; }
}

/* ---------- formularze i przyciski silnika ---------- */
:root body {
  input, select, textarea { font-family: var(--f-serif); font-size: 1rem; color: var(--ink); background: rgba(0,0,0,.4); border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px; transition: border-color .2s, box-shadow .2s, background .2s; }
  input::placeholder, textarea::placeholder { color: #8B90A0; opacity: 1; }
  input:hover, select:hover, textarea:hover { border-color: rgba(244,241,234,.34); }
  input:focus, select:focus, textarea:focus { outline: 2px solid transparent; border-color: var(--ink); box-shadow: 0 0 0 3px var(--red); background: rgba(0,0,0,.55); }
  select { appearance: none; -webkit-appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1.5l6 6 6-6' fill='none' stroke='%23F4F1EA' stroke-width='1.8'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; cursor: pointer; }
  select option { background: #14161d; color: var(--ink); }
  input[type="checkbox"], input[type="radio"] { accent-color: var(--red); width: 20px; height: 20px; padding: 0; flex: none; }
  input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
  input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  label { color: var(--ink); }
  textarea { min-height: 120px; resize: vertical; }
  fieldset { border-color: var(--line); }

  /* przyciski: wypelniona czerwien */
  main button, main .sklep-button, main .button, .sklep-footer button, .footer button {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 24px; border-radius: 999px; border: 0; background: var(--red); color: #fff;
    font-family: var(--f-mono); font-size: .78rem; line-height: 1.2; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
    box-shadow: 0 10px 40px -12px rgba(212,18,46,.8); cursor: pointer; transition: background .25s, transform .25s, box-shadow .25s;
  }
  main button:hover, main .sklep-button:hover, main .button:hover { background: #ea1d3a; color: #fff; }
  main button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; background: #3a3d49; color: #cfd2db; }
  main .sklep-button--drugorzedny { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
  main .sklep-button--drugorzedny:hover { background: var(--ink); color: var(--bg); }

  /* przyciski pomocnicze - bez wypelnienia */
  main .link-usun { background: none; box-shadow: none; padding: 6px 2px; color: var(--red-t); letter-spacing: .06em; border-radius: 6px; }
  main .link-usun:hover { background: none; color: #fff; text-decoration: underline; }
  main .ilosc-kontrolki button { background: rgba(244,241,234,.07); color: var(--ink); box-shadow: none; padding: 0; font-size: 1.1rem; border: 1px solid var(--line); font-family: var(--f-mono); }
  main .ilosc-kontrolki button:first-child { border-radius: 14px 0 0 14px; }
  main .ilosc-kontrolki button:last-child { border-radius: 0 14px 14px 0; }
  main .ilosc-kontrolki button:hover { background: var(--ink); color: var(--bg); }
  main .ilosc-kontrolki input { border-radius: 0; border-left: 0; border-right: 0; text-align: center; font-family: var(--f-mono); }
  main .ilosc-kontrolki { grid-template-columns: 46px minmax(56px, 1fr) 46px; }
  main .ilosc-kontrolki button, main .ilosc-kontrolki input { min-height: 48px; }
  main .sklep-filtry-toggle { background: rgba(244,241,234,.07); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); justify-content: space-between; border-radius: 14px; }
  main .lightbox-zamknij, main .lightbox-prev, main .lightbox-next { padding: 0; width: 44px; height: 44px; border-radius: 50%; background: #1b1d25; box-shadow: none; border: 1px solid var(--line); font-size: 1.3rem; }
  main .produkt-miniatury button { padding: 3px; border-radius: 12px; background: var(--paper); box-shadow: none; flex: 0 0 76px; }
  main .produkt-miniatury button:hover { background: #fff; }
  main .produkt-miniatury button[aria-current="true"], main .produkt-miniatury button[aria-pressed="true"] { border-color: var(--red); }
  main .produkt-galeria-glowne { padding: 0; border-radius: 18px; background: var(--paper); box-shadow: none; display: grid; }
  main .produkt-galeria-glowne:hover { background: var(--paper); }
}

/* ---------- KATALOG: filtry, narzedzia, kategorie, paginacja ---------- */
:root body {
  .sklep-podkategorie { margin-bottom: clamp(26px, 4vw, 40px); }
  .sklep-podkategorie h2 { font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--red-t); margin: 0 0 12px; }
  .sklep-podkategorie ul { gap: 8px; }
  .sklep-podkategorie a { padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: transparent; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; gap: 10px; transition: background .2s, color .2s, border-color .2s; }
  .sklep-podkategorie a:hover { background: rgba(244,241,234,.1); }
  .sklep-podkategorie a[aria-current] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .sklep-podkategorie small { color: var(--mute); font-size: .66rem; }
  .sklep-podkategorie a[aria-current] small { color: #555; }

  .sklep-katalog { grid-template-columns: 270px minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); }
  .sklep-filtry { border: 1px solid var(--line); border-radius: 20px; background: rgba(22,24,33,.7); backdrop-filter: blur(6px); overflow: hidden; }
  .sklep-filtry-form { padding: 22px; }
  .sklep-filtry-form legend { font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--red-t); }
  .sklep-filtry-form fieldset { border-bottom-color: var(--line); }
  .sklep-filtry-form fieldset > label small { color: var(--mute); }
  .sklep-filtry-akcje a { color: var(--mute); }
  .sklep-lewa, .sklep-sidebar { color: var(--ink); }

  .sklep-wyniki-toolbar { padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
  .sklep-wyniki-toolbar > p { font-family: var(--f-mono); font-size: .76rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
  .sklep-sortowanie label { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
  .sklep-sortowanie select { padding: 10px 40px 10px 16px; border-radius: 999px; font-family: var(--f-mono); font-size: .76rem; }

  .sklep-aktywne-filtry a { background: rgba(244,241,234,.08); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; }
  .sklep-aktywne-filtry .wyczysc { background: none; border-color: transparent; color: var(--red-t); text-decoration: underline; }

  .sklep-paginacja { gap: 8px; margin-top: 52px; }
  .sklep-paginacja a, .sklep-paginacja span { min-width: 46px; min-height: 46px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-family: var(--f-mono); font-size: .8rem; text-decoration: none; transition: background .2s, color .2s; }
  .sklep-paginacja a:hover { background: rgba(244,241,234,.12); }
  .sklep-paginacja a[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .sklep-paginacja a[rel="next"], .sklep-paginacja a[rel="prev"] { padding-inline: 18px; }
  .sklep-pusto { padding: 36px; border: 1px dashed rgba(244,241,234,.26); border-radius: 20px; background: rgba(22,24,33,.6); color: var(--mute); font-size: 1.1rem; }
  .sklep-pusto a { color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--red-t); }
  .sklep-start-sekcja > h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 24px; }
}

/* ---------- KARTY PRODUKTOW: tilt + foliowa obwodka + spotlight ---------- */
:root body {
  .sklep-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; perspective: 1400px; }
  @media (max-width: 1100px) { .sklep-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
  @media (max-width: 900px) { .sklep-katalog { grid-template-columns: 1fr; } }
  @media (max-width: 680px) { .sklep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

  .produkt-karta { position: relative; display: flex; flex-direction: column; border: 0; border-radius: 18px; background: var(--face); color: var(--ink);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .25s ease-out, box-shadow .4s; will-change: transform; --mx: 50%; --my: 50%; }
  .produkt-karta:hover { border: 0; box-shadow: none; }
  .produkt-karta::before { content: ""; position: absolute; inset: -1px; border-radius: 19px; padding: 1.5px; pointer-events: none; z-index: 3; opacity: .28; transition: opacity .35s;
    background: conic-gradient(from var(--ang), #fff, var(--red), #fff 25%, #ff5a68 40%, var(--red) 55%, #fff 75%, var(--red), #fff);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: bp-spin 6s linear infinite; }
  .produkt-karta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .3s;
    background: radial-gradient(320px circle at var(--mx) var(--my), rgba(255,255,255,.18), transparent 60%); }
  @media (hover: hover) {
    .produkt-karta:hover::before, .produkt-karta:hover::after { opacity: 1; }
    .produkt-karta:hover { box-shadow: 0 30px 60px -25px rgba(212,18,46,.55); }
    .produkt-karta:hover .produkt-obraz img { transform: scale(1.06); }
  }
  .produkt-karta:focus-within::before { opacity: 1; }

  .produkt-obraz-wrap { margin: 8px 8px 0; border-radius: 12px; background: var(--paper); overflow: hidden; }
  .produkt-obraz-wrap > a { text-decoration: none; }
  .produkt-obraz { background: var(--paper); aspect-ratio: 1; }
  .produkt-obraz img { object-fit: contain; mix-blend-mode: multiply; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
  .produkt-badge-lista { top: 8px; left: 8px; z-index: 2; }
  .produkt-badge { background: var(--red); color: #fff; font-family: var(--f-mono); font-size: .66rem; font-weight: 500; letter-spacing: .1em; padding: 5px 9px; border-radius: 6px; }
  .produkt-badge--promocja { background: var(--red); }
  .produkt-badge--brak { background: #111; }

  .produkt-karta-tresc { padding: 12px 14px 14px; gap: 6px; }
  .produkt-karta h2 { font-family: var(--f-serif); font-weight: 400; font-size: .98rem; line-height: 1.25; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .produkt-karta h2 a { text-decoration: none; }
  .produkt-karta h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 18px; }
  .produkt-karta h2 a:hover { text-decoration: none; }
  .produkt-karta-akcje { position: relative; z-index: 4; padding-top: 10px; }
  .produkt-karta-akcje button, .produkt-karta-akcje .sklep-button { padding: 12px 14px; font-size: .68rem; background: rgba(244,241,234,.07); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
  .produkt-karta-akcje button:hover, .produkt-karta-akcje .sklep-button:hover { background: var(--red); box-shadow: none; color: #fff; }
  .produkt-karta-akcje form { margin: 0; }
  .produkt-dostepnosc { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; margin: 0; }
  .produkt-dostepnosc.jest-dostepny { color: #7fe0a4; }
  .produkt-dostepnosc.brak-dostepnosci { color: var(--red-t); }

  /* ceny */
  .cena { color: var(--ink); font-family: var(--f-disp); font-weight: 800; font-size: 1.6rem; line-height: 1.05; letter-spacing: .01em; gap: 4px 10px; align-items: baseline; }
  .cena del { order: 2; color: var(--mute); font-family: var(--f-mono); font-size: .72rem; font-weight: 400; }
  .cena ins { order: 1; text-decoration: none; }
  .cena:has(del) ins { color: var(--red-t); }
  .cena--duza { font-size: clamp(2.4rem, 5vw, 3.4rem); }
  .cena--duza del { font-size: .95rem; }
  .cena-brak { color: var(--mute); }
  .produkt-karta .cena { display: flex; flex-wrap: wrap; }
  .produkt-karta-cena { margin-bottom: 2px !important; }
  @media (max-width: 700px) { .produkt-karta h2 { font-size: .9rem; } .produkt-karta-tresc { padding: 10px 11px 12px; } .cena { font-size: 1.35rem; } }
}
@keyframes bp-spin { to { --ang: 360deg; } }

/* ---------- KARTA PRODUKTU ---------- */
:root body {
  .produkt { gap: clamp(28px, 5vw, 72px); grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); align-items: start; }
  .produkt-galeria { background: transparent; min-height: 0; }
  .produkt-galeria-glowne { min-height: 0; position: relative; overflow: hidden; border: 1px solid var(--line); }
  .produkt-galeria-glowne img { mix-blend-mode: multiply; max-height: 680px; }
  .produkt-miniatury { gap: 10px; padding: 14px 2px 4px; }
  .produkt-miniatury button { border: 2px solid transparent; }
  .produkt-miniatury img { border-radius: 9px; mix-blend-mode: multiply; }
  .produkt-lightbox { background: #0B0C10; color: var(--ink); border: 1px solid var(--line); border-radius: 22px; }
  .produkt-lightbox::backdrop { background: rgba(5,6,9,.82); backdrop-filter: blur(6px); }
  .produkt-lightbox figcaption { color: var(--mute); font-family: var(--f-mono); font-size: .76rem; }

  .produkt > div:last-child { position: sticky; top: 92px; }
  .produkt h1 { font-family: var(--f-serif); font-weight: 400; text-transform: none; letter-spacing: -.02em; line-height: 1.04; font-size: clamp(1.9rem, 3.6vw, 3rem); font-variation-settings: "opsz" 144; text-shadow: none; margin: 14px 0 18px; }
  .wstecz { display: inline-flex; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); text-decoration: none; }
  .wstecz:hover { color: var(--ink); }
  .opis-krotki { color: var(--mute); margin: 18px 0 0; }
  .opis-krotki ul { margin: 0; padding-left: 20px; list-style: disc; }
  .opis-krotki li::marker { color: var(--red-t); }
  .produkt .produkt-dostepnosc { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; }
  .produkt .produkt-dostepnosc.jest-dostepny::before, .produkt .produkt-dostepnosc.brak-dostepnosci::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

  .dodaj-koszyk { grid-template-columns: 1fr; margin-top: 26px; gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: rgba(22,24,33,.7); backdrop-filter: blur(6px); align-items: stretch; }
  .dodaj-koszyk label { gap: 8px; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
  .dodaj-koszyk label select, .dodaj-koszyk label input { text-transform: none; letter-spacing: 0; }
  .dodaj-koszyk select { width: 100%; }
  .produkt-ilosc { min-width: 0; max-width: 220px; }
  .dodaj-koszyk [data-add-cart] { width: 100%; padding: 18px 26px; font-size: .85rem; }
  .dodaj-koszyk [data-add-cart]::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--bp-ic-cart) center / contain no-repeat; mask: var(--bp-ic-cart) center / contain no-repeat; }
  .wariant-wyczysc { justify-self: start; }

  .produkt-meta { border-top-color: var(--line); margin-top: 26px; font-size: .92rem; }
  .produkt-meta dt { font-family: var(--f-mono); font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); padding-top: 3px; }
  .produkt-meta a { text-decoration-color: var(--red-t); text-underline-offset: 3px; }
  .cennik-ilosciowy caption { color: var(--red-t); font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
  .cennik-ilosciowy td { border-bottom-color: var(--line); }

  .produkt-sekcja { margin: clamp(40px, 7vw, 80px) 0; }
  .produkt-sekcja h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.05; margin: 0 0 22px; }
  .produkt-opis { max-width: 800px; font-size: 1.08rem; line-height: 1.7; }
  .produkt-opis ul { list-style: disc; padding-left: 22px; }
  .produkt-opis li::marker { color: var(--red-t); }
  .produkt-opis a { text-decoration-color: var(--red-t); text-underline-offset: 3px; }
  .produkt-sekcja th { background: rgba(244,241,234,.06); color: var(--ink); font-weight: 500; }
  .produkt-sekcja th, .produkt-sekcja td { border-bottom-color: var(--line); }
  @media (max-width: 760px) { .produkt { grid-template-columns: 1fr; } .produkt > div:last-child { position: static; } .dodaj-koszyk { padding: 16px; } }
}
:root {
  --bp-ic-cart: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 4h3l2.4 11h10.2L21 7H7' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'/><circle cx='9.5' cy='19.5' r='1.5'/><circle cx='17.5' cy='19.5' r='1.5'/></svg>");
}

/* ---------- KOSZYK ---------- */
:root body {
  .sklep-alert { padding: 16px 20px; border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 14px; background: rgba(22,24,33,.85); color: var(--ink); margin: 18px 0 24px; font-size: 1rem; }
  .sklep-alert--blad { border-left-color: var(--red-t); background: rgba(212,18,46,.14); }
  .koszyk-blad { background: rgba(212,18,46,.14); color: #ffd3da; border-left-color: var(--red-t); border-radius: 8px; }
  .koszyk-uklad { gap: clamp(24px, 4vw, 56px); }
  .koszyk-lista { border-top: 0; display: grid; gap: 12px; margin-top: 8px; }
  .koszyk-wiersz { padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(22,24,33,.75); gap: 14px 18px; }
  .koszyk-zdjecie { border-radius: 12px; background: var(--paper); }
  .koszyk-zdjecie img { mix-blend-mode: multiply; }
  .koszyk-produkt strong { font-weight: 400; font-size: 1.05rem; line-height: 1.25; }
  .koszyk-produkt > a { text-decoration: none; }
  .koszyk-produkt > a:hover strong { text-decoration: underline; text-decoration-color: var(--red-t); text-underline-offset: 3px; }
  .koszyk-cena-jednostkowa, .koszyk-wiersz small { color: var(--mute); font-family: var(--f-mono); font-size: .74rem; letter-spacing: .04em; }
  .koszyk-ilosc label { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-weight: 500; }
  .koszyk-ilosc .sklep-button { padding: 9px 12px; font-size: .66rem; }
  .koszyk-suma-pozycji span { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
  .koszyk-suma-pozycji strong { font-family: var(--f-disp); font-weight: 800; font-size: 1.6rem; line-height: 1; }

  .sumy, .checkout-podsumowanie { background: linear-gradient(160deg, rgba(34,20,26,.9), rgba(22,24,33,.92) 60%); border: 1px solid rgba(244,241,234,.2); border-radius: 22px; padding: 24px; box-shadow: 0 30px 80px -40px rgba(212,18,46,.45); }
  .sumy p { margin: 0 0 10px; font-family: var(--f-mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); align-items: baseline; }
  .sumy p b { color: var(--ink); font-weight: 500; }
  .sumy .razem { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink); }
  .sumy .razem b { font-family: var(--f-disp); font-size: 2.3rem; font-weight: 800; letter-spacing: .01em; line-height: 1; text-transform: none; }
  .sumy .sklep-button, .checkout-podsumowanie > button { width: 100%; margin-top: 14px; padding: 18px 24px; font-size: .84rem; }
  .checkout-podsumowanie .sumy { background: none; border: 0; box-shadow: none; padding: 14px 0 0; }
  .link-usun { color: var(--red-t); }
}

/* ---------- ZAMOWIENIE ---------- */
:root body {
  .checkout fieldset { border: 1px solid var(--line); border-radius: 20px; background: rgba(22,24,33,.7); padding: clamp(18px, 3vw, 28px); backdrop-filter: blur(6px); min-width: 0; }
  .checkout legend { font-family: var(--f-disp); font-weight: 800; font-size: 1.5rem; letter-spacing: .02em; text-transform: uppercase; padding: 0 10px; color: var(--ink); }
  .checkout label { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); gap: 8px; }
  .checkout label input, .checkout label select, .checkout label textarea { text-transform: none; letter-spacing: 0; font-family: var(--f-serif); font-size: 1rem; color: var(--ink); }
  .pole-pomoc { color: var(--mute); font-size: .92rem; }
  .pole-pomoc a { color: var(--ink); text-decoration-color: var(--red-t); text-underline-offset: 3px; }
  .checkout-metoda { padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(0,0,0,.25); cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; font-family: var(--f-serif) !important; font-size: 1rem !important; color: var(--ink) !important; transition: border-color .2s, background .2s; }
  .checkout-metoda:hover, .checkout-metoda:has(input:checked) { border-color: var(--ink); background: rgba(244,241,234,.07); }
  .checkout-metoda strong { font-weight: 500; }
  .checkout-metoda small, .zgoda small { color: var(--mute); }
  .zgoda { align-items: start; text-transform: none !important; letter-spacing: 0 !important; font-family: var(--f-serif) !important; font-size: .95rem !important; color: var(--ink) !important; gap: 12px !important; }
  .zgoda a { text-decoration-color: var(--red-t); text-underline-offset: 3px; }
  .checkout-podsumowanie h2 { font-family: var(--f-disp); font-weight: 800; text-transform: uppercase; font-size: 1.8rem; margin: 0 0 14px; }
  .checkout-podsumowanie ul { border-bottom-color: var(--line); }
  .checkout-podsumowanie li { font-size: .98rem; }
  .checkout-podsumowanie li b { font-family: var(--f-mono); font-weight: 500; font-size: .84rem; white-space: nowrap; }
  .checkout-podsumowanie > .pole-pomoc { margin: 12px 0 0; font-size: .8rem; }
  .checkout-wybor-adresu select { width: 100%; }
}

/* ---------- KONTO ---------- */
:root body {
  .konto-auth { width: min(520px, 100%); padding: clamp(22px, 4vw, 40px); border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(160deg, rgba(34,20,26,.85), rgba(22,24,33,.9) 60%); box-shadow: 0 40px 100px -50px rgba(212,18,46,.5); }
  .konto-auth h1 { font-size: clamp(2.4rem, 7vw, 3.6rem); margin: 0 0 22px; }
  .konto-auth label, .konto-adres-form label { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
  .konto-auth label small { text-transform: none; letter-spacing: 0; color: var(--mute); font-family: var(--f-serif); }
  .konto-auth input { text-transform: none; letter-spacing: 0; font-family: var(--f-serif); font-size: 1rem; }
  .konto-auth form > button { width: 100%; padding: 17px 24px; }
  .konto-auth p { color: var(--mute); margin: 16px 0 0; }
  .konto-auth p a { color: var(--ink); text-decoration-color: var(--red-t); text-underline-offset: 4px; }
  .konto-zgoda { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--f-serif) !important; font-size: .92rem !important; color: var(--ink) !important; }
  .konto-naglowek { border-bottom: 1px solid var(--line); padding-bottom: 24px; }
  .konto-naglowek p { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .12em; color: var(--red-t); }
  .konto-zamowienia h2, .konto-bezpieczenstwo h2, .konto-adresy h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 16px; }
  .konto-zamowienia table, .konto-zamowienie table { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; border-collapse: separate; border-spacing: 0; background: rgba(22,24,33,.6); }
  .konto-zamowienia th, .konto-zamowienie th { font-family: var(--f-mono); font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); background: rgba(244,241,234,.04); }
  .konto-zamowienia th, .konto-zamowienia td, .konto-zamowienie th, .konto-zamowienie td { border-bottom: 1px solid var(--line); }
  .konto-zamowienia tr:last-child td, .konto-zamowienie tr:last-child td { border-bottom: 0; }
  .konto-adresy article { border: 1px solid var(--line); border-radius: 18px; background: rgba(22,24,33,.7); }
  .konto-akcje a { text-decoration-color: var(--red-t); }
  .podsumowanie { padding: clamp(40px, 8vw, 100px) 0; }
  .podsumowanie .sukces, .sukces { color: #7fe0a4; font-family: var(--f-mono); font-size: .8rem; letter-spacing: .12em; }
}

/* ---------- STRONY TRESCI: kontakt, regulamin, 404 ---------- */
:root body {
  .podglowie, .podglowie--artykul, .podglowie--404 { background: transparent; color: var(--ink); padding: clamp(40px, 7vw, 84px) 0 clamp(20px, 3vw, 34px); }
  .podglowie--404 { padding: clamp(60px, 12vw, 150px) 0; }
  .podglowie h1, .podglowie--artykul h1 { font-family: var(--f-disp); font-weight: 900; font-size: clamp(3rem, 9vw, 7rem); line-height: .86; letter-spacing: -.01em; }
  .podglowie .eyebrow { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--red-t); display: flex; gap: 10px; align-items: center; }
  .podglowie__opis { color: var(--mute); font-size: 1.1rem; }
  .artykul { background: transparent; color: var(--ink); }
  .artykul__cialo { padding-bottom: 80px; }
  .wrap--waski { width: min(840px, calc(100% - 2 * var(--gut))); }
  .brak-wynikow { color: var(--mute); }

  .tresc-wpisu { font-family: var(--f-serif); font-size: 1.1rem; line-height: 1.78; color: #dedbd3; padding: clamp(22px, 4vw, 44px); border: 1px solid var(--line); border-radius: 24px; background: rgba(22,24,33,.62); backdrop-filter: blur(6px); }
  .tresc-wpisu p { margin: 0 0 1.15em; }
  .tresc-wpisu a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red-t); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
  .tresc-wpisu a:hover { color: #fff; text-decoration-color: #fff; }
  .tresc-wpisu h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 .6em; }
  .tresc-wpisu h2, .tresc-wpisu h3, .tresc-wpisu h4 { font-family: var(--f-disp); color: var(--ink); text-transform: uppercase; letter-spacing: .01em; line-height: 1.02; }
  .tresc-wpisu h2 { font-size: clamp(2rem, 4vw, 2.7rem); margin: 1.6em 0 .5em; }
  .tresc-wpisu h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 1.7em 0 .5em; padding-top: 1.1em; border-top: 1px solid var(--line); }
  .tresc-wpisu .title + .content h3:first-child, .tresc-wpisu h3:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
  .tresc-wpisu h4 { font-size: 1.3rem; margin: 1.4em 0 .4em; }
  .tresc-wpisu ul, .tresc-wpisu ol { margin: 0 0 1.2em; padding-left: 1.4em; list-style: revert; }
  .tresc-wpisu li { margin-bottom: .45em; }
  .tresc-wpisu li::marker { color: var(--red-t); }
  .tresc-wpisu blockquote { border-left: 3px solid var(--red); background: rgba(0,0,0,.3); color: var(--ink); border-radius: 0 14px 14px 0; }
  .tresc-wpisu table { border: 1px solid var(--line); border-radius: 12px; }
  .tresc-wpisu th, .tresc-wpisu td { border-color: var(--line); }
  .tresc-wpisu hr { border-top-color: var(--line); }
  .tresc-wpisu * { max-width: 100%; }
  .tresc-wpisu [style*="color"] { color: inherit !important; }
  .tresc-wpisu [style*="background"] { background: transparent !important; }

  .blad-http__etykieta { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .14em; color: var(--red-t); }
  .blad-http h1 { font-size: clamp(3rem, 10vw, 7rem); }
  .blad-http__opis { color: var(--mute); font-size: 1.15rem; }
  .blad-http__akcja { padding: 16px 28px; border-radius: 999px; background: var(--red); font-family: var(--f-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 10px 40px -10px rgba(212,18,46,.8); }
  .blad-http__akcja:hover { filter: none; background: #ea1d3a; }
  .section { padding: 30px 0 60px; }
}

/* ---------- STOPKA ---------- */
:root body {
  .footer, .sklep-footer { position: relative; margin-top: clamp(60px, 9vw, 120px); padding: clamp(40px, 6vw, 72px) 0 0; background: linear-gradient(180deg, rgba(11,12,16,0), #08090c 40%); color: var(--ink); border-top: 1px solid var(--line); font-family: var(--f-serif); font-size: 1rem; }
  .footer > .wrap, .sklep-footer-inner { width: min(1360px, calc(100% - 2 * var(--gut))); margin-inline: auto; }
  .footer__top { gap: 36px 48px; padding-bottom: 36px; align-items: flex-start; }
  .footer__brand { flex: 2 1 280px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer__brand b { font-family: var(--f-disp); font-weight: 900; font-size: clamp(2.2rem, 6vw, 4rem); line-height: .85; text-transform: uppercase; }
  .footer__brand p { color: var(--mute); font-size: .95rem; margin: 0; }
  .footer__brand .bp-lockup { font-size: clamp(22px, 4.4vw, 40px); }
  .footer h2, .sklep-footer h2 { font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--red-t); opacity: 1; margin: 0 0 14px; }
  .footer__kolumna a { color: var(--ink); opacity: .9; font-size: .98rem; text-decoration: none; margin: 0; padding: 5px 0; }
  .footer__kolumna a:hover { text-decoration: underline; text-decoration-color: var(--red-t); text-underline-offset: 4px; }
  .footer__kolumna p { color: var(--mute); font-size: .95rem; }
  .footer__bottom { border-top: 1px solid var(--line); color: var(--mute); font-family: var(--f-mono); font-size: .68rem; letter-spacing: .08em; padding: 22px 0 26px; }
  .footer__bottom a { color: var(--ink); }
  .footer__grafiki { border-top-color: var(--line); }
  .footer__grafika { color: var(--ink); }
  .sklep-footer { background: #08090c; border-top: 1px solid var(--line); }
  .shop-footer--jasny .sklep-footer, .shop-footer--ciemny .sklep-footer { background: #08090c; color: var(--ink); border-top: 1px solid var(--line); }
  .sklep-footer-meta, .sklep-footer-newsletter { color: var(--mute); }
  .sklep-footer .newsletter-formularz input[type="email"] { background: rgba(0,0,0,.4); color: var(--ink); }
  .sklep-footer .newsletter-komunikat { border-left-color: var(--red); }
}
.bp-foot-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 8px; }
.bp-foot-nav a { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: 6px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s; }
.bp-foot-nav a:hover { background-size: 100% 1px; }
.bp-foot-note { color: var(--mute); max-width: 32rem; margin: 6px 0 0; font-size: .98rem; }

/* ---------- DOCK ---------- */
.bp-dock { position: fixed; z-index: 70; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); translate: -50% 0; max-width: calc(100vw - 16px); }
.bp-dock ul { display: flex; align-items: flex-end; gap: 4px; padding: 8px; margin: 0; list-style: none; border-radius: 26px; background: rgba(22,24,33,.78); border: 1px solid rgba(244,241,234,.2); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 20px 60px -10px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.12); }
.bp-dock__i { position: relative; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 16px; border: 0; background: transparent; color: var(--ink); text-decoration: none; transform: scale(var(--s, 1)); transform-origin: 50% 100%; transition: transform .12s ease-out, background .2s; cursor: pointer; font: inherit; }
.bp-dock__i:hover { background: rgba(244,241,234,.12); }
.bp-dock__i svg { width: 23px; height: 23px; }
.bp-dock__i[aria-current="page"] { background: rgba(244,241,234,.14); }
.bp-dock__i[aria-current="page"]::before { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--red-t); }
.bp-dock__i::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 4px; background: var(--ink); color: var(--bg); font-family: var(--f-mono); font-size: .68rem; padding: 4px 9px; border-radius: 6px; opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity .15s, translate .15s; }
.bp-dock__i:hover::after, .bp-dock__i:focus-visible::after { opacity: 1; translate: -50% 0; }
.bp-dock__sep { width: 1px; height: 28px; background: var(--line); align-self: center; margin-inline: 4px; }
.bp-dock .bp-count { position: absolute; top: 3px; right: 1px; }
.bp-dock__i.bp-bump { animation: bp-bump .5s; }
@keyframes bp-bump { 30% { transform: scale(1.35) rotate(-8deg); } }
@media (max-width: 420px) { .bp-dock__i { width: 46px; height: 46px; } .bp-dock ul { gap: 1px; padding: 6px; } }
@media (hover: none) { .bp-dock__i::after { display: none; } }

/* ---------- PALETA WYSZUKIWANIA ---------- */
.bp-pal { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 12px 0; }
.bp-pal[hidden] { display: none !important; }
.bp-pal__bg { position: absolute; inset: 0; background: rgba(5,6,9,.72); backdrop-filter: blur(6px); }
.bp-pal__box { position: relative; width: min(640px, 100%); max-height: 76vh; max-height: 76dvh; display: flex; flex-direction: column; border-radius: 22px; background: #14161d; border: 1px solid rgba(244,241,234,.22); box-shadow: 0 40px 120px -20px #000, 0 0 0 1px rgba(212,18,46,.25); overflow: hidden; animation: bp-palin .25s cubic-bezier(.2,.9,.2,1); color: var(--ink); font-family: var(--f-serif); }
@keyframes bp-palin { from { opacity: 0; transform: translateY(-12px) scale(.97); } }
.bp-pal__in { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.bp-pal__in svg { width: 20px; height: 20px; color: var(--mute); flex: none; }
:root body .bp-pal__in input { flex: 1; min-width: 0; background: transparent; border: 0; box-shadow: none; color: var(--ink); font: inherit; font-size: 1.1rem; outline: 0; padding: 0; border-radius: 0; }
.bp-pal__in:focus-within { box-shadow: inset 0 -2px 0 var(--red); }
.bp-pal__list { overflow: auto; padding: 8px; flex: 1; overscroll-behavior: contain; margin: 0; list-style: none; }
.bp-pal__grp { padding: 10px 12px 4px; color: var(--mute); list-style: none; }
.bp-pal__it { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; cursor: pointer; text-decoration: none; color: var(--ink); }
.bp-pal__it[aria-selected="true"] { background: rgba(212,18,46,.92); color: #fff; }
.bp-pal__it img { width: 40px; height: 40px; border-radius: 8px; object-fit: contain; background: var(--paper); flex: none; }
.bp-pal__ic { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line); display: grid; place-items: center; flex: none; background: #1b1d25; font-family: var(--f-mono); font-size: .8rem; }
.bp-pal__ic--txt { background-image: none; }
.bp-pal__nm { flex: 1; min-width: 0; font-size: .95rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-pal__nm mark { background: none; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 600; }
.bp-pal__pr { font-family: var(--f-mono); font-size: .78rem; flex: none; }
.bp-pal__none { padding: 28px 16px; color: var(--mute); text-align: center; }
.bp-pal__foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 16px; margin: 0; border-top: 1px solid var(--line); color: var(--mute); font-size: .66rem; }
.bp-pal__foot .bp-pal__count { margin-left: auto; }
@media (max-width: 520px) { .bp-pal__foot span:not(.bp-pal__count):not(:first-child) { display: none; } .bp-pal { padding-top: 7vh; } }

/* ---------- ograniczony ruch / dotyk ---------- */
@media (max-width: 700px) {
  :root body::after { animation: none; opacity: .06; }
}
@media (hover: none), (pointer: coarse) {
  :root body .produkt-karta { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  :root body::after { display: none; }
  :root body .produkt-karta { transform: none !important; }
}
@media print {
  :root body::before, :root body::after, .bp-dock, .bp-pal { display: none !important; }
}