/* ============================================================
   BOMBOWE BALONY — design system (spec v3 §1)
   Jasny, handlowy sklep: biel + fiolet #6D28D9 + złoto #F59E0B.
   Fonty: Sora (nagłówki/ceny/logo) + Inter (body/UI) — strony
   linkują Google Fonts same (latin-ext).
   ============================================================ */

/* ---------- 1. Tokeny ---------- */
:root {
  --bg:#FFFFFF; --surface:#F7F7FB; --ink:#17151F; --muted:#55516B; --border:#E7E5F0;
  --accent:#6D28D9; --accent-hover:#5B21B6; --accent-soft:#F3EEFB;
  --gold:#F59E0B; --success:#15803D; --sale:#E11D48;
  --r-sm:10px; --r-md:14px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(23,21,31,.06); --sh-md:0 4px 12px rgba(23,21,31,.08); --sh-lg:0 12px 32px rgba(23,21,31,.12);
  /* pomocnicze (nie zmieniają kontraktu spec) */
  --accent-lite:#A78BFA;
  --font-head:"Sora","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --topbar-h:36px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Baza / reset ---------- */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img, svg, video { max-width:100%; }
img { display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
input, select, textarea { font:inherit; color:inherit; }
ul, ol { margin:0; padding:0; }
p { margin:0 0 1em; }
p:last-child { margin-bottom:0; }
h1, h2, h3, h4 { font-family:var(--font-head); line-height:1.2; margin:0 0 .5em; letter-spacing:-.015em; }
h1 { font-size:clamp(1.9rem,1.3rem + 2.2vw,3rem); font-weight:800; }
h2 { font-size:clamp(1.4rem,1.1rem + 1.3vw,2rem); font-weight:700; }
h3 { font-size:1.15rem; font-weight:700; }
h4 { font-size:1rem; font-weight:700; }
strong, b { font-weight:600; }
::selection { background:var(--accent); color:#fff; }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
body.no-scroll { overflow:hidden; }

.container { width:min(1240px, 100% - 32px); margin-inline:auto; }
.price { font-family:var(--font-head); font-weight:700; font-variant-numeric:tabular-nums; }
.muted { color:var(--muted); }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- 3. Przyciski ---------- */
.btn, .btn-primary, .btn-ghost {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 22px; border-radius:var(--r-sm);
  font-weight:600; font-size:15px; line-height:1.2; white-space:nowrap;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease),
             transform .2s var(--ease), box-shadow .2s var(--ease);
  cursor:pointer; text-align:center;
}
.btn-primary { background:var(--accent); color:#fff; border:1px solid var(--accent); }
.btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); transform:translateY(-1px); box-shadow:var(--sh-md); }
.btn-primary:active { transform:none; }
.btn-primary[disabled] { opacity:.55; pointer-events:none; }
.btn-ghost { background:#fff; color:var(--ink); border:1px solid var(--border); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }
.btn-gold { background:var(--gold); color:#3B2A07; border:1px solid var(--gold); }
.btn-gold:hover { filter:brightness(1.06); transform:translateY(-1px); }
.btn-sm { min-height:36px; padding:0 14px; font-size:13.5px; }
.btn-lg { min-height:50px; padding:0 28px; font-size:16px; }
.btn svg, .btn-primary svg, .btn-ghost svg { width:18px; height:18px; flex:none; }
.btn-block { width:100%; }

/* ---------- 4. Badge / chipy ---------- */
.badge {
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px;
  border-radius:var(--r-pill); font-size:11.5px; font-weight:600; letter-spacing:.02em;
  line-height:1.4; white-space:nowrap;
}
.badge-bestseller { background:#FEF3C7; color:#92400E; }
.badge-new { background:var(--accent-soft); color:var(--accent-hover); }
.badge-free { background:#DCFCE7; color:var(--success); }
.badge-sale { background:#FFE4EA; color:var(--sale); }
.badge-stock { background:#DCFCE7; color:var(--success); }
.badge svg { width:13px; height:13px; }

.chips, #chips { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.chip {
  display:inline-flex; align-items:center; gap:7px; padding:7px 14px;
  border-radius:var(--r-pill); border:1px solid var(--border); background:#fff;
  font-size:13.5px; font-weight:500; color:var(--ink); cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.chip:hover { border-color:var(--accent); color:var(--accent); }
.chip.on, .chip.is-on, .chip[aria-pressed="true"] {
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent-hover);
}
.chip .x { display:inline-flex; font-weight:700; opacity:.65; }
.chip .x:hover { opacity:1; }
.chip-clear { border:0; background:none; color:var(--muted); text-decoration:underline; font-size:13px; }
.chip-clear:hover { color:var(--sale); }

/* ---------- 5. Topbar ---------- */
.topbar { background:var(--ink); color:#fff; font-size:12.5px; }
.topbar-in { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:var(--topbar-h); }
.tb-msg { margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-msg b { color:var(--gold); font-weight:600; }
.tb-links { display:flex; gap:18px; flex:none; }
.tb-links a { color:rgba(255,255,255,.78); transition:color .2s; }
.tb-links a:hover { color:#fff; }
.tb-links a.is-active { color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ---------- 6. Header główny ---------- */
#site-header { position:sticky; top:calc(var(--topbar-h) * -1); z-index:300; }
body.is-stuck #site-header { box-shadow:var(--sh-md); }
.hdr { background:#fff; border-bottom:1px solid var(--border); }
.hdr-in { display:flex; align-items:center; gap:22px; min-height:72px; padding:8px 0; flex-wrap:wrap; }
.burger {
  display:none; width:44px; height:44px; border-radius:var(--r-sm);
  align-items:center; justify-content:center; flex:none; color:var(--ink);
}
.burger:hover { background:var(--accent-soft); color:var(--accent); }
.burger svg { width:24px; height:24px; }
.logo {
  font-family:var(--font-head); font-weight:800; font-size:23px; letter-spacing:-.02em;
  color:var(--ink); white-space:nowrap; flex:none; line-height:1;
}
.logo b { color:var(--accent); font-weight:800; }
.hdr-tools { display:flex; align-items:center; gap:18px; margin-left:auto; flex:none; }
.hdr-phone { display:flex; align-items:center; gap:10px; line-height:1.25; }
.hdr-phone svg { width:21px; height:21px; color:var(--accent); flex:none; }
.hdr-phone b { display:block; font-size:14px; font-weight:600; }
.hdr-phone small { display:block; font-size:12px; color:var(--muted); }
.cart-btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%; color:var(--ink); flex:none;
  transition:background .2s, color .2s;
}
.cart-btn:hover { background:var(--accent-soft); color:var(--accent); }
.cart-btn svg { width:23px; height:23px; }
.cart-badge {
  position:absolute; top:0; right:-2px; min-width:19px; height:19px; padding:0 5px;
  border-radius:var(--r-pill); background:var(--gold); color:#3B2A07;
  font-size:11px; font-weight:700; line-height:19px; text-align:center;
  font-variant-numeric:tabular-nums; box-shadow:0 0 0 2px #fff;
}
.cart-badge.is-empty { display:none; }

/* wyszukiwarka */
.search { position:relative; flex:1 1 260px; max-width:560px; }
.search input {
  width:100%; height:46px; padding:0 54px 0 20px;
  border:1px solid var(--border); border-radius:var(--r-pill); background:var(--surface);
  font-size:14.5px; transition:border-color .2s, background .2s, box-shadow .2s;
  -webkit-appearance:none; appearance:none;
}
.search input::placeholder { color:var(--muted); opacity:.8; }
.search input:focus { background:#fff; }
.search input::-webkit-search-cancel-button { -webkit-appearance:none; }
.search-btn {
  position:absolute; top:5px; right:5px; width:36px; height:36px; border-radius:50%;
  background:var(--accent); color:#fff; display:grid; place-items:center;
  transition:background .2s, transform .2s;
}
.search-btn:hover { background:var(--accent-hover); transform:scale(1.05); }
.search-btn svg { width:17px; height:17px; }

.search-sugg {
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:420;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--sh-lg); overflow:hidden; padding:6px;
}
.search-sugg[hidden] { display:none; }
.search-sugg .sg {
  display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:8px;
  transition:background .15s;
}
.search-sugg .sg:hover, .search-sugg .sg.is-hl { background:var(--accent-soft); }
.search-sugg .sg img {
  width:40px; height:40px; flex:none; object-fit:contain; background:var(--surface);
  border-radius:8px; border:1px solid var(--border);
}
.search-sugg .sg img.off { visibility:hidden; }
.search-sugg .sg-nm {
  flex:1; min-width:0; font-size:13.5px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.search-sugg .sg-pr { flex:none; font-family:var(--font-head); font-weight:700; font-size:13.5px; font-variant-numeric:tabular-nums; }
.search-sugg .sg-all {
  display:block; margin-top:4px; padding:11px 10px; border-top:1px solid var(--border);
  color:var(--accent); font-weight:600; font-size:13.5px; border-radius:0 0 8px 8px;
}
.search-sugg .sg-all:hover, .search-sugg .sg-all.is-hl { background:var(--accent-soft); }
.search-sugg .sg-empty { padding:12px 10px; font-size:13.5px; color:var(--muted); }

/* ---------- 7. Catnav + dropdowny ---------- */
.catnav { background:#fff; border-bottom:1px solid var(--border); }
.catnav-in { display:flex; align-items:stretch; gap:2px; }
.cn-item { position:relative; }
.cn-link {
  position:relative; height:44px; display:inline-flex; align-items:center; gap:7px;
  padding:0 13px; font-size:14px; font-weight:500; color:var(--ink); white-space:nowrap;
  transition:color .15s;
}
.cn-link:hover { color:var(--accent); }
.cn-link svg { width:16px; height:16px; flex:none; }
.cn-link .chev { width:13px; height:13px; opacity:.6; transition:transform .2s; }
.cn-item.open .chev { transform:rotate(180deg); }
.cn-item.is-active > .cn-link { color:var(--accent); font-weight:600; }
.cn-item.is-active > .cn-link::after {
  content:""; position:absolute; left:11px; right:11px; bottom:-1px; height:2.5px;
  background:var(--accent); border-radius:2px;
}
.cn-drop {
  position:absolute; top:calc(100% + 1px); left:0; min-width:268px; z-index:360;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--sh-lg); padding:8px; display:none;
}
.cn-item.open > .cn-drop { display:block; }
.cn-item:last-child > .cn-drop, .cn-item.drop-right > .cn-drop { left:auto; right:0; }
.cn-drop a {
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px;
  font-size:14px; line-height:1.35;
}
.cn-drop a:hover { background:var(--accent-soft); color:var(--accent-hover); }
.cn-drop .cnt { margin-left:auto; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.cn-drop.cols2 { min-width:460px; }
.cn-item.open > .cn-drop.cols2 { display:grid; grid-template-columns:1fr 1fr; column-gap:6px; }
.cn-drop .drop-all {
  grid-column:1 / -1; margin-top:6px; padding-top:11px; border-top:1px solid var(--border);
  color:var(--accent); font-weight:600;
}

/* ---------- 8. Drawer mobilny + scrim ---------- */
.scrim {
  position:fixed; inset:0; background:rgba(23,21,31,.5); z-index:500;
  opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility .25s;
}
.scrim.open { opacity:1; visibility:visible; }
.drawer {
  position:fixed; top:0; bottom:0; left:0; width:min(86vw, 340px); z-index:510;
  background:#fff; transform:translateX(-103%); transition:transform .3s var(--ease);
  display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
}
.drawer.open { transform:none; box-shadow:var(--sh-lg); }
.drawer-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--border); flex:none;
}
.drawer-close { width:40px; height:40px; border-radius:var(--r-sm); display:grid; place-items:center; }
.drawer-close:hover { background:var(--accent-soft); color:var(--accent); }
.drawer-close svg { width:20px; height:20px; }
.dw-acc { border-bottom:1px solid var(--border); }
.dw-head {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:15px 18px; font-weight:600; font-size:15px; text-align:left;
}
.dw-head svg { width:16px; height:16px; opacity:.6; transition:transform .2s; flex:none; }
.dw-acc.open .dw-head svg { transform:rotate(180deg); }
.dw-panel { display:none; padding:0 10px 12px; }
.dw-acc.open .dw-panel { display:block; }
.dw-panel a {
  display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:8px;
  font-size:14.5px;
}
.dw-panel a:hover { background:var(--accent-soft); color:var(--accent-hover); }
.dw-panel .cnt { margin-left:auto; font-size:12px; color:var(--muted); }
.dw-links { padding:12px 10px; border-bottom:1px solid var(--border); }
.dw-links a { display:block; padding:9px 10px; border-radius:8px; font-size:14.5px; }
.dw-links a:hover { background:var(--accent-soft); color:var(--accent-hover); }
.dw-links a.is-active, .drawer a[aria-current="page"] { color:var(--accent); font-weight:600; }
.dw-tel { display:flex; align-items:center; gap:11px; padding:16px 18px; font-weight:600; font-size:15px; margin-top:auto; }
.dw-tel svg { width:19px; height:19px; color:var(--accent); }
.dw-tel small { display:block; font-weight:400; font-size:12px; color:var(--muted); }

/* ---------- 9. Header minimalny (checkout) ---------- */
.hdr-min .hdr-in { justify-content:space-between; gap:16px; }
.back-link { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:500; color:var(--muted); }
.back-link:hover { color:var(--accent); }
.back-link svg { width:16px; height:16px; }

/* ---------- 10. Kroki koszyka / checkoutu ---------- */
.steps-ind { display:flex; align-items:center; gap:10px; list-style:none; flex-wrap:wrap; }
.steps-ind li { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--muted); }
.steps-ind li + li::before { content:""; width:26px; height:2px; background:var(--border); border-radius:2px; flex:none; }
.steps-ind .n {
  width:27px; height:27px; border-radius:50%; border:2px solid var(--border);
  display:grid; place-items:center; font-family:var(--font-head); font-weight:700; font-size:12.5px;
  background:#fff; flex:none;
}
.steps-ind li.is-active { color:var(--ink); font-weight:600; }
.steps-ind li.is-active .n { background:var(--accent); border-color:var(--accent); color:#fff; }
.steps-ind li.is-done { color:var(--success); }
.steps-ind li.is-done .n { background:var(--success); border-color:var(--success); color:#fff; }

/* ---------- 11. Breadcrumbs ---------- */
.crumbs {
  display:flex; flex-wrap:wrap; align-items:center; gap:7px; list-style:none;
  padding:14px 0; margin:0; font-size:13px; color:var(--muted);
}
.crumbs li { display:flex; align-items:center; gap:7px; }
.crumbs li + li::before { content:"›"; color:#B7B3C9; }
.crumbs .sep::before { content:"›"; color:#B7B3C9; }
.crumbs a { color:var(--muted); transition:color .15s; }
.crumbs a:hover { color:var(--accent); }
.crumbs [aria-current="page"], .crumbs .here { color:var(--ink); font-weight:500; }

/* ---------- 12. Karty produktowe ---------- */
.grid, #grid {
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px;
}
.card {
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.card:hover { transform:translateY(-2px); box-shadow:var(--sh-md); }
.card-media { position:relative; aspect-ratio:1 / 1; background:#fff; overflow:hidden; display:block; }
.card-media img {
  width:100%; height:100%; object-fit:contain; padding:8px;
  transition:opacity .3s ease, transform .35s var(--ease);
}
.card:hover .card-media img { transform:scale(1.04); }
.card-badges { position:absolute; top:10px; left:10px; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.card-body { display:flex; flex-direction:column; gap:5px; padding:12px 14px 14px; flex:1; }
.card-cat { font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.card-name {
  font-size:14px; font-weight:500; line-height:1.4; color:var(--ink); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.8em;
}
.card-name a { color:inherit; }
.card-name a::after { content:""; position:absolute; inset:0; z-index:1; }
.card-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:8px; }
.card-price { font-family:var(--font-head); font-weight:700; font-size:16.5px; font-variant-numeric:tabular-nums; }
.card-price small { font-size:11px; font-weight:500; color:var(--muted); display:block; }
.card-add {
  position:relative; z-index:2; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:40px; min-width:40px; padding:0 13px; border-radius:var(--r-sm);
  background:var(--accent); color:#fff; font-weight:600; font-size:13.5px; flex:none;
  transition:background .2s, transform .2s;
}
.card-add:hover { background:var(--accent-hover); transform:translateY(-1px); }
.card-add svg { width:17px; height:17px; }
.card-add.added { background:var(--success); }

/* skeleton shimmer — klasa .skel zdejmowana po load obrazka */
.skel { position:relative; background:var(--surface); overflow:hidden; }
.skel::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform:translateX(-100%); animation:shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform:translateX(100%); } }
.card-media.skel img { opacity:0; }
/* placeholder po onerror: tło surface + SVG + nazwa kategorii */
.card-ph, .img-ph {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; background:var(--surface); color:var(--muted);
  font-size:12.5px; font-weight:500; text-align:center; padding:12px; z-index:1;
}
.card-ph svg, .img-ph svg { width:34px; height:34px; opacity:.55; }

/* ---------- 13. Listing: layout, toolbar, filtry, paginacja ---------- */
.listing { display:grid; grid-template-columns:260px minmax(0,1fr); gap:32px; align-items:start; }
.toolbar {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin:12px 0 18px;
}
.toolbar-count { font-size:14px; color:var(--muted); }
.toolbar-count b { color:var(--ink); font-weight:600; }
.toolbar-right { display:flex; align-items:center; gap:10px; }
.toolbar label { font-size:13.5px; color:var(--muted); }

.filters { background:#fff; }
@media (min-width:1025px) {
  .filters { position:sticky; top:132px; max-height:calc(100vh - 150px); overflow-y:auto; padding-right:6px; }
}
.filters-head { display:none; align-items:center; justify-content:space-between; padding-bottom:10px; border-bottom:1px solid var(--border); }
.filters-head h3 { margin:0; }
.f-group { padding:16px 0; border-bottom:1px solid var(--border); }
.f-group:first-of-type { padding-top:4px; }
.f-group h4 {
  margin:0 0 10px; font-size:12.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink);
}
.f-opt {
  display:flex; align-items:center; gap:9px; padding:5px 0; font-size:14px;
  cursor:pointer; color:var(--ink);
}
.f-opt:hover { color:var(--accent); }
.f-opt input { accent-color:var(--accent); width:16px; height:16px; flex:none; margin:0; min-height:0; }
.f-opt .cnt { margin-left:auto; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.f-price { display:flex; align-items:center; gap:8px; }
.f-price input { width:100%; min-width:0; min-height:38px; height:38px; padding:0 10px; border:1px solid var(--border); border-radius:var(--r-sm); font-size:14px; }
.f-price .btn-ghost, .f-price button { min-height:38px; padding:0 13px; flex:none; }
.filters-toggle {
  display:none; align-items:center; gap:8px; min-height:42px; padding:0 16px;
  border:1px solid var(--border); border-radius:var(--r-sm); background:#fff; font-weight:600; font-size:14px;
}
.filters-toggle svg { width:17px; height:17px; }

.pager { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:30px 0 8px; }
.pager .pg, .pager a, .pager button {
  min-width:40px; height:40px; padding:0 8px; display:inline-flex; align-items:center;
  justify-content:center; border:1px solid var(--border); border-radius:var(--r-sm);
  background:#fff; font-weight:600; font-size:14px; font-variant-numeric:tabular-nums;
  transition:border-color .15s, color .15s, background .15s;
}
.pager .pg:hover { border-color:var(--accent); color:var(--accent); }
.pager .pg.is-current, .pager [aria-current="page"] { background:var(--accent); border-color:var(--accent); color:#fff; }
.pager .pg[disabled], .pager .pg.off { opacity:.4; pointer-events:none; }
.pager .dots { border:0; background:none; pointer-events:none; }

.empty { text-align:center; padding:56px 20px; }
.empty svg { width:52px; height:52px; color:var(--muted); opacity:.6; margin:0 auto 14px; display:block; }
.empty h2, .empty h3 { margin-bottom:8px; }
.empty p { color:var(--muted); max-width:46ch; margin-inline:auto; }
.empty .chips, .empty .sug { justify-content:center; margin-top:18px; }

/* ---------- 14. Selecty / formularze / walidacja ---------- */
select, .select {
  min-height:44px; padding:0 36px 0 14px; border:1px solid var(--border); border-radius:var(--r-sm);
  background:#fff url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355516B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 12px center / 15px no-repeat;
  font-size:14px; -webkit-appearance:none; appearance:none; cursor:pointer;
}
input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], textarea {
  border:1px solid var(--border); border-radius:var(--r-sm); background:#fff;
  min-height:44px; padding:9px 14px; font-size:14.5px; width:100%;
  transition:border-color .2s, box-shadow .2s;
}
textarea { min-height:120px; resize:vertical; line-height:1.5; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; }
.field label .req { color:var(--sale); }
.field .hint { font-size:12.5px; color:var(--muted); margin-top:5px; }
.err { color:var(--sale); font-size:12.5px; margin-top:5px; display:none; }
.field.invalid .err, .err.show { display:block; }
.field.invalid input, .field.invalid select, .field.invalid textarea,
input.invalid, select.invalid, textarea.invalid {
  border-color:var(--sale); box-shadow:0 0 0 3px rgba(225,29,72,.08);
}
.field.valid input { border-color:var(--success); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.check { display:flex; align-items:flex-start; gap:10px; font-size:14px; cursor:pointer; }
.check input { width:17px; height:17px; accent-color:var(--accent); flex:none; margin-top:2px; min-height:0; }
.check a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

/* radio-karty (dostawa / płatność) */
.opt-card {
  display:flex; align-items:center; gap:12px; padding:14px 16px; margin-bottom:10px;
  border:1px solid var(--border); border-radius:var(--r-md); background:#fff; cursor:pointer;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.opt-card:hover { border-color:var(--accent); }
.opt-card:has(input:checked), .opt-card.on {
  border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent) inset;
}
.opt-card input { accent-color:var(--accent); width:17px; height:17px; flex:none; min-height:0; }
.opt-card b { font-size:14.5px; display:block; }
.opt-card small { display:block; font-size:12.5px; color:var(--muted); }
.opt-card .opt-price { margin-left:auto; font-family:var(--font-head); font-weight:700; font-size:14.5px; white-space:nowrap; }
.opt-card .opt-price.free { color:var(--success); }

/* stepper ilości */
.qty { display:inline-flex; align-items:stretch; border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden; background:#fff; }
.qty button { width:38px; min-height:42px; display:grid; place-items:center; font-size:17px; font-weight:600; color:var(--muted); transition:background .15s, color .15s; }
.qty button:hover { background:var(--accent-soft); color:var(--accent); }
.qty input {
  width:46px; min-height:42px; border:0; border-inline:1px solid var(--border); border-radius:0;
  text-align:center; font-weight:600; font-variant-numeric:tabular-nums; padding:0; -moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* ---------- 15. Tabele ---------- */
.tbl-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-md); }
.tbl { width:100%; border-collapse:collapse; font-size:14.5px; background:#fff; }
.tbl th {
  text-align:left; font-weight:600; font-size:13px; letter-spacing:.03em;
  background:var(--surface); padding:12px 16px; border-bottom:1px solid var(--border); white-space:nowrap;
}
.tbl td { padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:top; }
.tbl tr:last-child td { border-bottom:0; }
.tbl .price { white-space:nowrap; }

/* ---------- 16. Akordeon ---------- */
.acc { border:1px solid var(--border); border-radius:var(--r-md); background:#fff; margin-bottom:10px; }
.acc-head {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 18px; font-weight:600; font-size:15px; text-align:left; border-radius:var(--r-md);
}
.acc-head svg, .acc-head .chev { width:17px; height:17px; flex:none; opacity:.6; transition:transform .25s var(--ease); }
.acc.open .acc-head svg, .acc.open .acc-head .chev { transform:rotate(180deg); }
.acc-body { display:none; padding:0 18px 16px; color:var(--muted); font-size:14.5px; }
.acc.open .acc-body { display:block; }
.acc-body a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

/* ---------- 17. Toast ---------- */
.cart-toast {
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 14px); z-index:620;
  max-width:min(92vw, 420px); background:var(--ink); color:#fff;
  padding:13px 22px; border-radius:var(--r-pill); box-shadow:var(--sh-lg);
  font-size:14.5px; font-weight:500; text-align:center; opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.cart-toast.show { opacity:1; transform:translate(-50%, 0); }

/* ---------- 18. Pasek darmowej dostawy / progress ---------- */
.ship-bar {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:13px 16px; font-size:14px;
}
.ship-bar b { font-weight:600; }
.ship-bar .ok { color:var(--success); font-weight:600; }
.ship-track { height:8px; background:var(--border); border-radius:var(--r-pill); overflow:hidden; margin-top:9px; }
.ship-fill {
  height:100%; border-radius:var(--r-pill); width:0;
  background:linear-gradient(90deg, var(--accent), var(--gold));
  transition:width .5s var(--ease);
}
.ship-bar.done .ship-fill { background:var(--success); }

/* ---------- 19. Szablon podstron (.page) ---------- */
.page { padding:6px 0 64px; }
.page-head { margin-bottom:22px; }
.page-head p { color:var(--muted); max-width:64ch; }
.page-body { max-width:800px; }
.page-body h2 { margin-top:1.8em; }
.page-body h3 { margin-top:1.4em; }
.page-body p, .page-body li { color:var(--muted); font-size:15.5px; }
.page-body ul, .page-body ol { padding-left:22px; margin:0 0 1em; }
.page-body li { margin-bottom:.4em; }
.page-body a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.page-body blockquote, .page-quote {
  margin:1.2em 0; padding:16px 20px; background:var(--surface);
  border-left:3px solid var(--accent); border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--ink); font-size:14.5px;
}
.toc { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:18px 22px; margin-bottom:26px; }
.toc ol { padding-left:20px; }
.toc a { color:var(--accent); text-decoration:none; }
.toc a:hover { text-decoration:underline; }

/* ---------- 20. Sekcje / home ---------- */
.section { padding:52px 0; }
.section.alt { background:var(--surface); }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.section-head h2 { margin:0; }
.section-head .more { font-weight:600; font-size:14px; color:var(--accent); white-space:nowrap; }
.section-head .more:hover { color:var(--accent-hover); text-decoration:underline; text-underline-offset:3px; }
.section-sub { color:var(--muted); margin-top:-16px; margin-bottom:24px; max-width:64ch; }

/* hero promocyjny — jasny */
.hero { background:linear-gradient(115deg, var(--accent-soft) 0%, #FFFFFF 52%, #FEF3C7 135%); border-bottom:1px solid var(--border); }
.hero-in { display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center; min-height:440px; padding:40px 0; }
.hero-kicker { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--accent-hover); background:#fff; border:1px solid var(--border); border-radius:var(--r-pill); padding:6px 14px; margin-bottom:16px; }
.hero h1 { margin-bottom:.4em; }
.hero h1 em, .hero .hl { font-style:normal; color:var(--accent); }
.hero-sub { color:var(--muted); font-size:17px; max-width:54ch; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.hero-media { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hero-media .hm {
  background:#fff; border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--sh-md); overflow:hidden; aspect-ratio:1/1;
}
.hero-media .hm img { width:100%; height:100%; object-fit:contain; padding:12px; }
.hero-media .hm:nth-child(even) { transform:translateY(16px); }

/* USP */
.usp { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.usp-item {
  display:flex; align-items:center; gap:13px; background:#fff;
  border:1px solid var(--border); border-radius:var(--r-md); padding:15px 17px; box-shadow:var(--sh-sm);
}
.usp-item svg { width:26px; height:26px; color:var(--accent); flex:none; }
.usp-item b { display:block; font-size:14px; font-weight:600; line-height:1.3; }
.usp-item small { display:block; font-size:12.5px; color:var(--muted); line-height:1.4; }

/* kafle okazji (ze zdjęciami) */
.occ-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.occ { position:relative; display:block; border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/3; background:var(--surface); border:1px solid var(--border); }
.occ img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.occ:hover img { transform:scale(1.05); }
.occ-label {
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:34px 16px 14px;
  background:linear-gradient(transparent, rgba(23,21,31,.78)); color:#fff;
}
.occ-label b { display:block; font-family:var(--font-head); font-weight:700; font-size:16.5px; }
.occ-label span { font-size:12.5px; opacity:.85; }

/* karty kategorii */
.cat-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.cat-card {
  display:block; background:#fff; border:1px solid var(--border); border-radius:var(--r-md);
  padding:14px 14px 16px; text-align:center; box-shadow:var(--sh-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cat-card:hover { transform:translateY(-2px); box-shadow:var(--sh-md); }
.cat-card .cc-media { aspect-ratio:1/1; border-radius:var(--r-sm); background:#fff; overflow:hidden; margin-bottom:11px; }
.cat-card .cc-media img { width:100%; height:100%; object-fit:contain; padding:6px; }
.cat-card b { display:block; font-family:var(--font-head); font-weight:700; font-size:14.5px; line-height:1.3; }
.cat-card span { font-size:12.5px; color:var(--muted); }

/* karuzela produktów */
.rail {
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 3*16px) / 4);
  gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 10px;
  scrollbar-width:thin;
}
.rail > * { scroll-snap-align:start; }

/* wąski baner tematyczny */
.banner-slim {
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
  background:linear-gradient(110deg, var(--accent), var(--accent-hover)); color:#fff;
  border-radius:var(--r-md); padding:26px 32px; box-shadow:var(--sh-md);
}
.banner-slim h3, .banner-slim b { color:#fff; margin:0; font-family:var(--font-head); }
.banner-slim p { color:rgba(255,255,255,.85); margin:4px 0 0; font-size:14.5px; }
.banner-slim .btn-ghost { background:#fff; border-color:#fff; color:var(--accent-hover); }
.banner-slim .btn-ghost:hover { background:var(--accent-soft); }

/* opinie */
.reviews { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.review { background:#fff; border:1px solid var(--border); border-radius:var(--r-md); padding:22px; box-shadow:var(--sh-sm); }
.stars { display:inline-flex; gap:3px; color:var(--gold); margin-bottom:12px; }
.stars svg { width:16px; height:16px; fill:currentColor; stroke:none; }
.review p { font-size:14.5px; color:var(--ink); }
.review .who { display:block; margin-top:12px; font-size:13px; font-weight:600; color:var(--muted); }

/* pasek newslettera (sekcja na index) */
.news-band { background:linear-gradient(120deg, var(--accent), var(--accent-hover)); color:#fff; }
.news-band-in { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:34px 0; }
.news-band b { font-family:var(--font-head); font-size:20px; display:block; }
.news-band span { color:rgba(255,255,255,.85); font-size:14.5px; }
.news-form { display:flex; gap:10px; flex:1 1 320px; max-width:460px; }
.news-form input { flex:1; min-width:0; border:0; background:#fff; }
.news-form button {
  flex:none; min-height:44px; padding:0 22px; border-radius:var(--r-sm);
  background:var(--ink); color:#fff; font-weight:600; transition:background .2s, transform .2s;
}
.news-form button:hover { background:#000; transform:translateY(-1px); }

/* ---------- 21. Stopka ---------- */
.footer { background:var(--ink); color:#CFCBE0; font-size:14px; }
.ft-news { background:linear-gradient(120deg, var(--accent), var(--accent-hover)); color:#fff; }
.ft-news-in { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:26px 0; }
.ft-news-txt b { display:block; font-family:var(--font-head); font-size:18px; }
.ft-news-txt span { color:rgba(255,255,255,.85); font-size:13.5px; }
.ft-news-form { display:flex; gap:10px; flex:1 1 300px; max-width:440px; }
.ft-news-form input { flex:1; min-width:0; border:0; background:#fff; color:var(--ink); }
.ft-news-form input.invalid { box-shadow:0 0 0 3px rgba(23,21,31,.35); }
.ft-news-form button {
  flex:none; min-height:44px; padding:0 20px; border-radius:var(--r-sm);
  background:var(--ink); color:#fff; font-weight:600; transition:background .2s;
}
.ft-news-form button:hover { background:#000; }
.ft-cols { display:grid; grid-template-columns:1.35fr 1fr 1fr 1fr; gap:34px; padding:46px 0 38px; }
.footer .logo { color:#fff; font-size:21px; }
.footer .logo b { color:var(--accent-lite); }
.ft-about { margin:14px 0 16px; font-size:13.5px; line-height:1.65; color:rgba(255,255,255,.66); max-width:34ch; }
.ft-contact { display:flex; flex-direction:column; gap:8px; font-size:13.5px; }
.ft-contact a, .ft-contact span { display:inline-flex; align-items:center; gap:9px; color:rgba(255,255,255,.82); }
.ft-contact a:hover { color:#fff; }
.ft-contact svg { width:16px; height:16px; color:var(--accent-lite); flex:none; }
.ft-social { display:flex; gap:10px; margin-top:16px; }
.ft-social a {
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.22);
  display:grid; place-items:center; color:rgba(255,255,255,.82); transition:border-color .2s, color .2s, background .2s;
}
.ft-social a:hover { border-color:var(--accent-lite); color:#fff; background:rgba(167,139,250,.12); }
.ft-social svg { width:17px; height:17px; }
.ft-col h4 { color:#fff; font-size:13px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; margin:0 0 15px; }
.ft-col ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.ft-col a { color:rgba(255,255,255,.68); font-size:13.5px; transition:color .2s; }
.ft-col a:hover { color:#fff; }
.ft-bottom {
  border-top:1px solid rgba(255,255,255,.1); padding:18px 0;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:12px; color:rgba(255,255,255,.5);
}
.ft-bottom .demo-note { color:rgba(255,255,255,.34); }
.ft-badges { display:flex; gap:7px; flex-wrap:wrap; }
.pay-badge {
  border:1px solid rgba(255,255,255,.22); border-radius:6px; padding:3px 9px;
  font-size:10.5px; font-weight:600; letter-spacing:.04em; color:rgba(255,255,255,.66);
  white-space:nowrap;
}

/* ---------- 22. Asystent (markup z assistant.js, nowa skóra) ---------- */
.asst-fab {
  position:fixed; right:20px; bottom:20px; z-index:210;
  display:inline-flex; align-items:center; gap:10px;
  height:56px; padding:0 22px 0 18px; border-radius:var(--r-pill);
  background:var(--accent); color:#fff; font-weight:600; font-size:15px;
  box-shadow:0 10px 28px rgba(109,40,217,.42);
  transition:transform .25s var(--ease), opacity .25s var(--ease), background .2s, box-shadow .2s;
}
.asst-fab .asst-fab-ic {
  display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.2); flex:none;
}
.asst-fab .asst-fab-ic svg { width:17px; height:17px; }
.asst-fab .asst-fab-tx { white-space:nowrap; }
.asst-fab::after {
  content:""; position:absolute; top:9px; right:14px;
  width:9px; height:9px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 0 rgba(245,158,11,.6); animation:fab-pulse 2.2s infinite;
}
@keyframes fab-pulse {
  0% { box-shadow:0 0 0 0 rgba(245,158,11,.55); }
  70% { box-shadow:0 0 0 9px rgba(245,158,11,0); }
  100% { box-shadow:0 0 0 0 rgba(245,158,11,0); }
}
.asst-fab:hover { background:var(--accent-hover); transform:translateY(-2px); box-shadow:0 14px 34px rgba(109,40,217,.5); }
.asst-fab.hidden { transform:scale(0); opacity:0; pointer-events:none; }

/* dymek zachęty */
.asst-hint {
  position:fixed; right:20px; bottom:86px; z-index:209;
  max-width:270px; padding:13px 15px; padding-right:34px;
  background:#fff; color:var(--ink); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--sh-lg); font-size:13.5px; line-height:1.45;
  opacity:0; transform:translateY(10px) scale(.96); pointer-events:none; transform-origin:bottom right;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.asst-hint.show { opacity:1; transform:none; pointer-events:auto; cursor:pointer; }
.asst-hint b { color:var(--accent); }
.asst-hint::after {
  content:""; position:absolute; right:26px; bottom:-7px; width:14px; height:14px;
  background:#fff; border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  transform:rotate(45deg);
}
.asst-hint-x {
  position:absolute; top:7px; right:7px; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; color:var(--muted);
}
.asst-hint-x:hover { background:var(--surface); color:var(--ink); }
.asst-hint-x svg { width:13px; height:13px; }

@media (max-width:520px) {
  .asst-fab .asst-fab-tx { display:none; }
  .asst-fab { padding:0; width:56px; justify-content:center; }
  .asst-fab .asst-fab-ic { width:26px; height:26px; }
  .asst-hint { display:none; }
}

.asst-panel {
  position:fixed; bottom:18px; right:18px; z-index:220;
  width:min(92vw, 396px); height:min(78vh, 600px);
  background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:var(--sh-lg);
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(20px) scale(.97); opacity:0; visibility:hidden;
  transition:transform .3s var(--ease), opacity .3s var(--ease), visibility .3s;
}
.asst-panel.open { transform:none; opacity:1; visibility:visible; }
.asst-head { display:flex; align-items:center; gap:12px; padding:15px 17px; background:var(--accent); color:#fff; }
.asst-head .av {
  width:38px; height:38px; border-radius:50%; background-color:rgba(255,255,255,.18); flex:none;
  font-size:0; line-height:0;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='9' rx='6' ry='7'/%3E%3Cpath d='M11.2 16l-.7 1.6h3l-.9 3.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:20px;
}
.asst-head b { font-family:var(--font-head); font-size:15px; display:block; line-height:1.2; }
.asst-head small { opacity:.82; font-size:12px; }
.asst-close { margin-left:auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:20px; line-height:1; }
.asst-close:hover { background:rgba(255,255,255,.15); }
.asst-body { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; background:var(--surface); }
.asst-msg { max-width:88%; padding:11px 15px; border-radius:15px; font-size:14px; line-height:1.5; }
.asst-msg.bot { background:#fff; border:1px solid var(--border); border-bottom-left-radius:5px; align-self:flex-start; box-shadow:var(--sh-sm); }
.asst-msg.user { background:var(--accent); color:#fff; border-bottom-right-radius:5px; align-self:flex-end; }
.asst-chips { display:flex; flex-wrap:wrap; gap:8px; }
.asst-chip {
  padding:8px 13px; border-radius:var(--r-pill); background:#fff; border:1px solid var(--border);
  font-size:13px; font-weight:500; color:var(--ink); transition:border-color .2s, color .2s;
}
.asst-chip:hover { border-color:var(--accent); color:var(--accent); }
.asst-recos { display:flex; flex-direction:column; gap:9px; align-self:stretch; }
.asst-reco {
  display:flex; gap:11px; align-items:center; background:#fff; border:1px solid var(--border);
  border-radius:var(--r-md); padding:9px; transition:border-color .2s, box-shadow .2s;
}
.asst-reco:hover { border-color:var(--accent); box-shadow:var(--sh-sm); }
.asst-reco img { width:52px; height:52px; border-radius:var(--r-sm); object-fit:contain; flex:none; background:var(--surface); border:1px solid var(--border); }
.asst-reco .info { flex:1; min-width:0; }
.asst-reco .nm { font-size:13px; font-weight:500; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.asst-reco .pr { font-family:var(--font-head); font-weight:700; color:var(--accent); font-size:14px; margin-top:2px; font-variant-numeric:tabular-nums; }
.asst-reco .add { flex:none; width:36px; height:36px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; transition:background .2s; }
.asst-reco .add:hover { background:var(--accent-hover); }
.asst-reco .add svg { width:16px; height:16px; }
.asst-foot { display:flex; gap:8px; padding:13px; border-top:1px solid var(--border); background:#fff; }
.asst-foot input { flex:1; min-height:44px; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--surface); padding:0 16px; font-size:14px; }
.asst-foot input:focus { background:#fff; border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
.asst-send { width:44px; height:44px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; flex:none; transition:background .2s, transform .2s; }
.asst-send:hover { background:var(--accent-hover); transform:scale(1.05); }
.asst-send svg { width:18px; height:18px; }
.asst-typing { display:inline-flex; gap:4px; padding:13px 15px; }
.asst-typing i { width:6px; height:6px; border-radius:50%; background:var(--muted); animation:blink 1.2s infinite; }
.asst-typing i:nth-child(2) { animation-delay:.2s; }
.asst-typing i:nth-child(3) { animation-delay:.4s; }
@keyframes blink { 0%,80%,100% { opacity:.25; } 40% { opacity:1; } }

/* ---------- 23. Reveal / utilsy animacji ---------- */
.rv { opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.rv.in { opacity:1; transform:none; }
[data-stag] > * { opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
[data-stag].in > * { opacity:1; transform:none; }

/* ---------- 24. Responsive ---------- */
@media (max-width:1024px) {
  .grid, #grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .listing { display:block; }
  .filters {
    position:fixed; top:0; bottom:0; left:0; width:min(88vw, 350px); z-index:520;
    transform:translateX(-103%); transition:transform .3s var(--ease);
    overflow-y:auto; padding:18px 20px; box-shadow:var(--sh-lg);
  }
  .filters.open { transform:none; }
  .filters-head { display:flex; }
  .filters-toggle { display:inline-flex; }
  .hdr-phone { display:none; }
  .usp { grid-template-columns:repeat(2, 1fr); }
  .occ-grid, .cat-grid { grid-template-columns:repeat(3, 1fr); }
  .reviews { grid-template-columns:repeat(2, 1fr); }
  .rail { grid-auto-columns:calc((100% - 2*16px) / 3); }
  .ft-cols { grid-template-columns:1.3fr 1fr 1fr; }
  .ft-cols .ft-col:last-child { grid-column:2 / -1; }
  .hero-in { grid-template-columns:1fr; min-height:0; padding:34px 0; }
  .hero-media { max-width:520px; }
}

@media (max-width:720px) {
  .tb-links { display:none; }
  .tb-msg { margin-inline:auto; text-align:center; }
  .burger { display:inline-flex; }
  .catnav { display:none; }
  .hdr-in { gap:10px; padding:10px 0 12px; }
  .hdr-min .hdr-in { padding:10px 0; }
  .search { order:10; flex:1 1 100%; max-width:none; }
  .search input { height:44px; }
  .search-btn { top:4px; }
  .logo { font-size:20px; margin-right:auto; }
  .hdr-min .logo { margin-right:0; }
  .hdr-tools { gap:6px; margin-left:0; }
  .steps-ind { gap:7px; }
  .steps-ind li { font-size:12.5px; }
  .steps-ind li + li::before { width:14px; }
  .hdr-min .steps-ind .lbl { display:none; }
  .grid, #grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .card-body { padding:10px 12px 12px; }
  .card-add { min-height:38px; padding:0 11px; font-size:13px; }
  .section { padding:38px 0; }
  .usp { grid-template-columns:1fr 1fr; gap:10px; }
  .usp-item { padding:12px 13px; gap:10px; }
  .occ-grid, .cat-grid { grid-template-columns:repeat(2, 1fr); gap:12px; }
  .reviews { grid-template-columns:1fr; }
  .rail { grid-auto-columns:calc((100% - 12px) / 2); gap:12px; }
  .form-row { grid-template-columns:1fr; }
  .ft-cols { grid-template-columns:1fr 1fr; gap:28px; padding:38px 0 30px; }
  .ft-cols .ft-col:first-child { grid-column:1 / -1; }
  .ft-cols .ft-col:last-child { grid-column:auto; }
  .ft-bottom { justify-content:center; text-align:center; }
  .ft-news-in { padding:22px 0; }
  .asst-panel { right:8px; bottom:8px; width:calc(100vw - 16px); }
  .banner-slim { padding:22px 20px; }
  .hero-media { grid-template-columns:1fr 1fr; gap:10px; }
  .hero-media .hm:nth-child(even) { transform:translateY(10px); }
  .toolbar { margin-top:6px; }
}

/* ---------- 25. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .rv, [data-stag] > * { opacity:1 !important; transform:none !important; }
  .card:hover, .btn-primary:hover, .btn-ghost:hover { transform:none; }
}