/* zksearch v0.2.1 - front: lupa, warstwa wyszukiwarki, panel (paleta SW-PL, ostre rogi: border-radius 0).
   Wszystko z prefiksem .zks-, zeby nie ruszac stylow motywu. Ikony = SVG w HTML (bez data-URI w CSS). */

/* ---------- lupa w naglowku ---------- */
.zks-root { display: flex; align-items: center; }
.zks-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: inherit; line-height: 0;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.zks-trigger[hidden], .zks-layer[hidden], .zks-clear[hidden] { display: none !important; }
.zks-ico { display: block; width: 25px; height: 25px; }
.zks-ico.has-mask {
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.zks-ico .zks-i { width: 100%; height: 100%; }
.zks-x { display: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.zks-trigger.is-open .zks-ico { display: none; }
.zks-trigger.is-open .zks-x { display: block; }

/* aktywna nowa wyszukiwarka chowa stara (naglowek i strona 404) */
.zks-on #search_block_top { display: none !important; }

/* blokada przewijania strony pod otwarta warstwa */
html.zks-lock, html.zks-lock body { overflow: hidden !important; }

/* ---------- warstwa ---------- */
.zks-layer {
  --zks-brand: #C76D3B;       /* Glebokie Espresso */
  --zks-brand-dark: #A4562A;
  --zks-dark: #1A0F0D;        /* Palona Kawa */
  --zks-copper: #B87333;      /* Miedz Antyczna */
  --zks-cta: #D48806;         /* Zlocisty Karmel */
  --zks-cream: #FDF5E6;       /* Kremowa Pianka */
  --zks-line: #EADCC8;
  --zks-muted: #7A6A60;
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147482000;
  color: var(--zks-dark); font-size: 14px; line-height: 1.4; text-align: left;
}
.zks-layer *, .zks-layer *::before, .zks-layer *::after { box-sizing: border-box; }
.zks-backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(26, 15, 13, .55); opacity: 0; transition: opacity .18s ease; }
.zks-sheet {
  position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: center;
  opacity: 0; transform: translateY(-10px); transition: opacity .18s ease, transform .18s ease; pointer-events: none;
}
.zks-layer.is-open .zks-backdrop { opacity: 1; }
.zks-layer.is-open .zks-sheet { opacity: 1; transform: none; pointer-events: auto; }
.zks-sheet__in {
  width: 100%; max-width: 1320px; max-height: 100vh; max-height: 100dvh;
  display: flex; flex-direction: column; background: #fff;
  border-radius: 0; box-shadow: 0 18px 50px rgba(26, 15, 13, .28); overflow: hidden;
}
@media (prefers-reduced-motion: reduce) { .zks-backdrop, .zks-sheet { transition: none; } }

.zks-layer a, .zks-layer button { touch-action: manipulation; -webkit-tap-highlight-color: rgba(199, 109, 59, .18); }
.zks-layer a:focus-visible, .zks-layer button:focus-visible { outline: 2px solid var(--zks-cta); outline-offset: 2px; }
.zks-i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- pasek z polem ---------- */
.zks-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--zks-line); background: #fff; margin: 0; }
.zks-bar > .zks-i { width: 22px; height: 22px; flex: 0 0 auto; color: var(--zks-brand); }
.zks-input {
  flex: 1 1 auto; min-width: 0; border: 0 !important; outline: 0; box-shadow: none !important; background: transparent !important;
  font: inherit; font-size: 18px; padding: 10px 0; margin: 0; color: var(--zks-dark); height: auto;
  -webkit-appearance: none; appearance: none; border-radius: 0;
}
.zks-input::placeholder { color: #9C8C80; opacity: 1; }
.zks-input::-webkit-search-cancel-button, .zks-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.zks-clear, .zks-close {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto;
  border: 0; border-radius: 0; background: transparent; color: var(--zks-muted); cursor: pointer; padding: 0;
}
.zks-clear .zks-i, .zks-close .zks-i { width: 20px; height: 20px; }
.zks-clear:hover, .zks-close:hover { background: var(--zks-cream); color: var(--zks-dark); }
.zks-go {
  border: 0; border-radius: 0; background: var(--zks-brand); color: #fff; font: inherit; font-weight: 600;
  padding: 10px 18px; cursor: pointer; flex: 0 0 auto; transition: background .15s;
}
.zks-go:hover { background: var(--zks-cta); }

.zks-progress { height: 2px; flex: 0 0 auto; }
.zks-layer.is-loading .zks-progress {
  background: linear-gradient(90deg, transparent, var(--zks-cta), transparent); background-size: 40% 100%;
  background-repeat: no-repeat; animation: zksBar 1s linear infinite;
}
@keyframes zksBar { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* ---------- tresc panelu ---------- */
.zks-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 20px 22px 24px;
}
.zks-grid, .zks-bottom { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px 26px; }
.zks-col, .zks-bottom__item { grid-column: span var(--zks-span, 12); min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.zks-bottom { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--zks-line); }
.zks-grid:empty { display: none; }
.zks-grid:empty + .zks-bottom { margin-top: 0; padding-top: 0; border-top: 0; }
.zks-block { min-width: 0; }
.zks-block__title { font-size: 15px; font-weight: 700; margin: 0 0 10px; color: var(--zks-dark); letter-spacing: .2px; text-transform: none; line-height: 1.3; }
.zks-muted { color: var(--zks-muted); font-size: 13.5px; margin: 0; }

/* chipy: frazy, kategorie, linie */
.zks-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.zks-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--zks-line); border-radius: 0;
  background: #fff; color: var(--zks-dark) !important; font-size: 14px; line-height: 1.2; text-decoration: none !important;
  transition: border-color .15s, background .15s, color .15s;
}
.zks-chip:hover { border-color: var(--zks-brand); background: var(--zks-cream); color: var(--zks-brand) !important; }
.zks-chip .zks-i { width: 15px; height: 15px; color: var(--zks-brand); }
.zks-chips--lines .zks-chip, .zks-chip--line {
  background: var(--zks-dark); border-color: var(--zks-dark); color: var(--zks-cream) !important; font-weight: 600; letter-spacing: .3px;
}
.zks-chips--lines .zks-chip:hover, .zks-chip--line:hover { background: var(--zks-brand); border-color: var(--zks-brand); color: #fff !important; }

/* kafelki produktow */
.zks-tiles { display: grid; grid-template-columns: repeat(var(--zks-per-row, 3), minmax(0, 1fr)); gap: 14px; }
.zks-tile {
  display: flex; flex-direction: column; min-width: 0; padding: 10px; background: #fff; border: 1px solid var(--zks-line);
  border-radius: 0; color: var(--zks-dark) !important; text-decoration: none !important; transition: border-color .15s, box-shadow .15s;
}
.zks-tile:hover { border-color: var(--zks-brand); box-shadow: 0 6px 18px rgba(26, 15, 13, .08); }
.zks-tile__img {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; max-height: 190px; margin-bottom: 8px;
  background: var(--zks-cream); border-radius: 0; overflow: hidden;
}
.zks-tile__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.zks-tile__img .zks-i, .zks-row__img .zks-i { width: 30px; height: 30px; color: var(--zks-brand); }
.zks-tile__name {
  font-size: 13.5px; font-weight: 600; line-height: 1.3; min-height: 2.6em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.zks-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.zks-price { font-size: 14px; white-space: nowrap; }
.zks-price b { font-weight: 700; }
.zks-price s { color: var(--zks-muted); font-size: 12px; margin-right: 3px; }
.zks-tile__cart {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 0; background: var(--zks-brand); color: #fff; transition: background .15s;
}
.zks-tile__cart .zks-i { width: 19px; height: 19px; }
.zks-tile:hover .zks-tile__cart { background: var(--zks-cta); }

/* "Polecamy": kremowy boks z kompaktowa lista */
.zks-block--featured { background: var(--zks-cream); border-radius: 0; padding: 14px; }
.zks-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.zks-row {
  display: flex; align-items: center; gap: 12px; padding: 8px; background: #fff; border: 1px solid var(--zks-line); border-radius: 0;
  color: var(--zks-dark) !important; text-decoration: none !important; transition: border-color .15s;
}
.zks-row:hover { border-color: var(--zks-brand); }
.zks-row__img {
  display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex: 0 0 56px;
  border-radius: 0; background: var(--zks-cream); overflow: hidden;
}
.zks-row__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.zks-row__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zks-row__name { font-weight: 600; font-size: 14px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.zks-row__more { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--zks-brand); }
.zks-row__more .zks-i { width: 14px; height: 14px; }

/* baner + wlasny HTML */
.zks-banner { display: block; border-radius: 0; overflow: hidden; line-height: 0; }
.zks-banner img { display: block; width: 100%; height: auto; }
.zks-html { font-size: 14px; line-height: 1.55; }
.zks-html img { max-width: 100%; height: auto; }

/* ---------- wyniki ---------- */
.zks-results { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 26px; }
.zks-results__side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.zks-sugs { list-style: none; margin: 0; padding: 0; }
.zks-sugs a {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 0;
  color: var(--zks-dark) !important; text-decoration: none !important; font-size: 14.5px;
}
.zks-sugs a:hover, .zks-sugs a:focus { background: var(--zks-cream); outline: 0; }
.zks-sugs .zks-i { width: 16px; height: 16px; flex: 0 0 auto; color: var(--zks-brand); }
.zks-sugs mark { background: none; color: inherit; font-weight: 700; padding: 0; }
.zks-results__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.zks-results__head .zks-block__title { margin: 0; }
.zks-all { display: inline-flex; align-items: center; gap: 6px; color: var(--zks-brand) !important; font-weight: 600; font-size: 14px; text-decoration: none !important; white-space: nowrap; }
.zks-all:hover { color: var(--zks-cta) !important; }
.zks-all .zks-i { width: 16px; height: 16px; }

.zks-nores { text-align: center; padding: 26px 10px; }
.zks-nores__title { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.zks-nores .zks-chips { justify-content: center; margin-top: 16px; }

/* szkielet ladowania */
.zks-skeleton { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.zks-skeleton span {
  height: 130px; border-radius: 0; background: linear-gradient(90deg, #F5EFE6, #FBF7F1, #F5EFE6);
  background-size: 200% 100%; animation: zksSk 1.2s ease-in-out infinite;
}
@keyframes zksSk { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* bloki tylko na jedno urzadzenie */
@media (max-width: 767px) { .zks-dev-desktop { display: none !important; } }
@media (min-width: 768px) { .zks-dev-mobile { display: none !important; } }

/* ---------- tablet ---------- */
@media (max-width: 1023px) {
  .zks-col, .zks-bottom__item { grid-column: span 12; }
  .zks-results { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 18px; }
  .zks-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- telefon: pelny ekran ---------- */
@media (max-width: 767px) {
  .zks-sheet { bottom: 0; }
  .zks-sheet__in { height: 100%; max-height: none; border-radius: 0; }
  .zks-bar { padding: 8px 10px; gap: 6px; }
  .zks-input { font-size: 16px; } /* 16px = iOS nie powieksza strony przy wejsciu w pole */
  .zks-go { display: none; }      /* na telefonie szukamy klawiszem "Szukaj" na klawiaturze */
  .zks-body { padding: 14px 12px 32px; }
  .zks-grid, .zks-bottom { display: flex; flex-direction: column; gap: 18px; }
  .zks-results { grid-template-columns: 1fr; gap: 16px; }
  .zks-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .zks-skeleton { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- pole na stronie 404 ---------- */
.zks-inline { display: none; }
.zks-on .zks-inline { display: flex; gap: 8px; max-width: 520px; margin: 16px auto; }
.zks-inline__input { flex: 1 1 auto; min-width: 0; padding: 10px 14px; border: 1px solid #EADCC8; border-radius: 0; font: inherit; font-size: 16px; }
.zks-inline__btn { border: 0; border-radius: 0; background: #C76D3B; color: #fff; font: inherit; font-weight: 600; padding: 10px 18px; cursor: pointer; }

/* ---------- znaczek trybu testowego ---------- */
.zks-testbadge {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2147482001;
  background: #1A0F0D; color: #FDF5E6; font: 600 12px/1.3 Arial, sans-serif; padding: 8px 14px; border-radius: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25); white-space: nowrap;
}
.zks-testbadge a { color: #D48806 !important; margin-left: 8px; text-decoration: underline !important; }
