/* FARMA 2026-10: farma_oferta_specjalna — tylko układ; kolory, ramki, fonty i zaokrąglenia dziedziczone z motywu zeta. */

/* ── Strona główna: sekcja "Oferta specjalna" ──
   Telefon (<600px): kafelki 1:1 jak .fg-cat-card w "Przeglądaj kategorie" (hasło, podkategorie i "Zobacz" ukryte).
   Tablet (600–1023px): szerokie karty poziome, jedna pod drugą. PC (>=1024px): dwie karty poziome obok siebie. Tokeny (--fg-*) z themes/zeta/css/home-redesign.css. */
body#home .fg-special-section { padding: 40px 0 0; }
body#home .fg-special-section + .fg-cats-section { padding-top: 36px; }

/* Wspólne: karta jako <div>, link nazwy rozciągnięty na całą kartę (podkategorie leżą nad nim). */
body#home .fg-special-section .fos-special-card { position: relative; }
body#home .fg-special-section .fos-special-name { display: block; color: #111; text-decoration: none; }
body#home .fg-special-section .fos-special-name::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
body#home .fg-special-section .fos-special-name:hover { color: #111; text-decoration: none; }
body#home .fg-special-section .fos-special-name:focus-visible { outline: none; }
body#home .fg-special-section .fos-special-card:focus-within { border-color: var(--fg-green); }
body#home .fg-special-section .fos-special-lead,
body#home .fg-special-section .fos-special-subs,
body#home .fg-special-section .fos-special-more { display: none; }
/* Ilustracja ma własne jasne koło — wypełnia koło kafelka zamiast leżeć na drugim. */
body#home .fg-special-section .fos-special-icon { background: transparent; }
body#home .fg-special-section .fos-special-icon img { width: 100%; height: 100%; }

@media (min-width: 600px) {
  body#home .fg-special-section .fos-special-grid { grid-template-columns: minmax(0, 1fr); }

  body#home .fg-special-section .fos-special-card { display: flex; align-items: center; gap: 24px; padding: 22px 26px 22px 22px; text-align: left; }
  body#home .fg-special-section .fos-special-icon { flex: 0 0 148px; width: 148px; height: 148px; margin: 0; }
  body#home .fg-special-section .fos-special-body { flex: 1 1 auto; min-width: 0; }

  body#home .fg-special-section .fos-special-name { font-size: 19px; line-height: 1.25; margin: 0 0 6px; }
  body#home .fg-special-section .fos-special-lead { display: block; margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--fg-muted); }

  body#home .fg-special-section .fos-special-subs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
  body#home .fg-special-section .fos-special-subs li { margin: 0; padding: 0; }
  body#home .fg-special-section .fos-special-subs a { position: relative; z-index: 1; display: inline-block; padding: 5px 12px; border: 1.5px solid var(--fg-border); border-radius: 999px; background: #fff; font-size: 13px; line-height: 1.3; color: #374151; text-decoration: none; transition: border-color .18s, color .18s; }
  body#home .fg-special-section .fos-special-subs a:hover,
  body#home .fg-special-section .fos-special-subs a:focus-visible { border-color: var(--fg-green); color: var(--fg-green); text-decoration: none; }

  body#home .fg-special-section .fos-special-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--fg-border); }
  body#home .fg-special-section .fos-special-foot .fg-cat-count { font-size: 13px; }
  body#home .fg-special-section .fos-special-more { display: inline; font-size: 14px; font-weight: 600; color: var(--fg-green); white-space: nowrap; }
  body#home .fg-special-section .fos-special-card:hover .fos-special-more { text-decoration: underline; }
}

@media (min-width: 600px) and (max-width: 1023px) {
  body#home .fg-special-section .fos-special-card { gap: 20px; padding: 18px 22px 18px 18px; }
  body#home .fg-special-section .fos-special-icon { flex-basis: 128px; width: 128px; height: 128px; }
}

@media (min-width: 1024px) {
  body#home .fg-special-section .fos-special-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) and (max-width: 1100px) {
  body#home .fg-special-section .fos-special-card { gap: 18px; padding: 18px; }
  body#home .fg-special-section .fos-special-icon { flex-basis: 112px; width: 112px; height: 112px; }
  body#home .fg-special-section .fos-special-name { font-size: 17px; }
}

/* ── Formularz dodawania/edycji: blok "Dane pojazdu" w #post-hooks ── */
/* Motyw ukrywa .attr-wrap w sekcji ceny (custom CSS: ".prio > .attr-wrap {display:none !important}") — pokazujemy go
   wyłącznie, gdy wtyczka wstawiła pola pojazdu. */
.item-publish .box section.prio > .attr-wrap:has(.fos-vehicle) { display: block !important; }
.item-publish .attr-wrap:has(.fos-vehicle) > .in.var2 { border-bottom: 0; margin-bottom: 0; }

.fos-vehicle { display: block; width: 100%; }
.fos-vehicle-head { display: block; margin: 0 0 12px; font-size: 13px; color: #6b7280; }

.fos-vehicle .fos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 2px; }
#plugin-hook .fos-vehicle .row.fos-field { display: block; width: 100%; margin: 0 0 12px; }
#plugin-hook .fos-vehicle .fos-field label { display: block; width: 100%; margin: 0 0 4px; }
#plugin-hook .fos-vehicle .fos-field select,
#plugin-hook .fos-vehicle .fos-field input[type="text"],
#plugin-hook .fos-vehicle .fos-field input[type="number"] { width: 100% !important; min-width: 0; max-width: 100%; }

/* Liczba z jednostką: jeden kontener jak pole ceny z walutą (ramka na kontenerze, jednostka w szarym polu). */
.item-publish .fos-unit-box { position: relative; display: flex; align-items: stretch; border: 1.5px solid #d0d5dd; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.item-publish .fos-unit-box:hover { border-color: #b0b8c4; }
.item-publish .fos-unit-box:focus-within { border-color: var(--mb-color-secondary, #3a7a3a); box-shadow: 0 0 0 3px rgba(58,122,58,0.12); }
.item-publish .fos-unit-box input[type="number"] { flex: 1; min-width: 0; border: none !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; height: 41px !important; outline: none !important; -moz-appearance: textfield; }
.item-publish .fos-unit-box input[type="number"]:focus { border: none !important; box-shadow: none !important; }
.item-publish .fos-unit-box input::-webkit-outer-spin-button,
.item-publish .fos-unit-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.item-publish .fos-unit-box .fos-unit { display: flex; align-items: center; justify-content: center; min-width: 52px; padding: 0 10px; background: #f4f6f8; border-left: 1.5px solid #d0d5dd; font-size: 13px; font-weight: 600; color: var(--mb-color2, #2c2c2c); letter-spacing: -0.2px; white-space: nowrap; }
.item-publish .fos-unit-box input.error, .item-publish .fos-vehicle select.error, .item-publish .fos-vehicle input.error { border-color: #dc2626; }
.item-publish .fos-unit-box:has(input.error) { border-color: #dc2626; }

@media (max-width: 560px) {
  .fos-vehicle .fos-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Wyszukiwarka: panel "Wszystkie filtry" ── */
.ssfrm .fos-side { display: block; width: 100%; }
/* Odstępy jak w wierszach motywu: lista = .input-box (margin 20px), zakres = .line 6px + wiersz 14px (jak "Cena"). */
.ssfrm .fos-side .row { display: block; width: 100%; margin: 0; }
.ssfrm .fos-side .row.fos-side-range { margin-bottom: 14px; }

/* Przycisk-lista w pasku filtrów: lista marek przewijana jak inne długie listy. */
#filter-line .simple-select.fos-simple .list { max-height: 360px; overflow-y: auto; min-width: 200px; }
#filter-line .simple-select.fos-range-sel .list { min-width: 300px; }