/* dzikiBARON — paczka "potrzeba" (css), wygenerowana automatycznie. Nie edytuj — źródła: assets/css/ */

/* --- shop.css --- */
/* =========================================================================
 * dzikiBARON — listing / karty produktu (design v2). Źródło: Kategoria - Bagazniki.dc.html.
 * ========================================================================= */

/* — Układ 2-kol: filtry + produkty — */
.db-listing { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px; align-items: start; }
.db-listing__main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.db-listing__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 4px; border-bottom: 1px solid var(--db-border); }
.db-listing__bar .woocommerce-result-count { margin: 0; font-family: var(--db-font-mono); font-size: 12px; color: var(--db-text-muted); }
.db-listing__bar .woocommerce-ordering { margin: 0; float: none; }
.db-listing__bar select { font-family: var(--db-font-mono); font-size: 12.5px; padding: 8px 10px; border: 1px solid var(--db-border); border-radius: 3px; background: var(--db-bg-card); color: var(--db-text); }
/* WS-G: selektor per_page także pod listingiem (parytet góra+dół) */
.db-listing__bar--bottom { border-bottom: none; border-top: 1px solid var(--db-border); padding: 12px 0 0; margin-top: 16px; justify-content: flex-end; }

/* „Pokaż więcej" (2026-09-30): dociąganie kolejnej strony bez przeładowania, obok zwykłej
 * paginacji poniżej. Link (progresywne wzmocnienie) — listing.js zamienia go w AJAX-append. */
.db-loadmore-wrap { display: flex; justify-content: center; margin: 22px 0 4px; }
.db-loadmore { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px; border: 1px solid var(--db-accent); border-radius: var(--db-radius); background: var(--db-bg-card); color: var(--db-accent); font-family: var(--db-font-head); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; cursor: pointer; }
.db-loadmore:hover { background: var(--db-bg-section); }
.db-loadmore[aria-busy="true"] { opacity: .6; pointer-events: none; }
.db-loadmore__c { font-family: var(--db-font-mono); font-weight: 400; font-size: 11px; color: var(--db-text-muted); text-transform: none; letter-spacing: 0; }

/* — Panel filtrów — */
.db-filters { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 12px; }
.db-filters__form { display: flex; flex-direction: column; gap: 22px; }
.db-filter { display: flex; flex-direction: column; gap: 4px; }
.db-filter__h { font-family: var(--db-font-head); font-weight: 800; font-size: 13px; text-transform: uppercase; color: var(--db-text); margin-bottom: 6px; }
.db-filter--cats { background: var(--db-bg-card); border: 1px solid var(--db-border); border-radius: 4px; padding: 16px 18px; }
.db-filter__cat { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; text-decoration: none; color: var(--db-text-muted); font-family: var(--db-font-mono); font-size: 12.5px; padding: 7px 8px; border-radius: 4px; }
.db-filter__cat:hover { background: var(--db-bg-section); color: var(--db-text); }
.db-filter__cat.is-current { background: var(--db-fill); color: var(--db-ecru); font-weight: 600; }
.db-filter__cat.is-current .db-filter__c { color: var(--db-khaki); }
.db-filter__cat span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-filter__c { color: var(--db-text-muted); white-space: nowrap; flex: none; }
.db-filter__row { display: flex; align-items: center; gap: 10px; font-family: var(--db-font-mono); font-size: 12.5px; color: var(--db-text); cursor: pointer; padding: 2px 0; }
.db-filter__row input { accent-color: var(--db-olive); width: 15px; height: 15px; flex: none; }
.db-filter__row span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-filter__row .db-filter__c { margin-left: auto; }
.db-filter__row.is-sel { color: var(--db-accent); font-weight: 600; }
.db-filter__row.is-sel .db-filter__c { color: var(--db-accent); }
/* wyróżniona marka (opcja dzikiBARON→Filtry) — przypięta na górze grupy */
.db-filter__row.is-feat:not(.is-sel) { color: var(--db-olive); font-weight: 700; }
.db-tree__vehicle { font-family: var(--db-font-mono); font-size: 11px; color: var(--db-text-muted); background: var(--db-bg-section); border-radius: var(--db-radius); padding: 6px 9px; margin-bottom: 8px; line-height: 1.5; }
.db-tree__vehicle strong { color: var(--db-accent); }
.db-tree__vehicle a { color: var(--db-cta); text-decoration: underline; white-space: nowrap; }
.db-filter__price { display: flex; align-items: center; gap: 8px; }
.db-filter__price input { width: 100%; min-width: 0; border: 1px solid var(--db-border); border-radius: 3px; background: var(--db-bg-card); padding: 9px 10px; font-family: var(--db-font-mono); font-size: 12px; color: var(--db-text); }
.db-filters__actions { display: flex; flex-direction: column; gap: 10px; }
.db-filters__apply { border: none; background: var(--db-fill); color: var(--db-ecru); font-family: var(--db-font-head); font-weight: 700; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 12px; border-radius: 3px; cursor: pointer; }
.db-filters__apply:hover { background: var(--db-fill-hov); color: var(--db-ecru); }
.db-filters__clear { font-family: var(--db-font-mono); font-size: 11px; color: var(--db-text-muted); text-decoration: underline; }
.db-filters__clear:hover { color: var(--db-olive); }
/* WSK-7 (K-07/K-08 mobile): 16px anty-zoom na min/max cena + cel dotykowy ≥44px na „wyczyść filtry". */
@media (max-width: 1023.98px) {
  .db-filter__price input { font-size: 16px; }
  .db-filters__clear { display: inline-flex; align-items: center; min-height: 44px; }
}
/* nagłówek sheetu filtrów (W3/W13) — na desktopie ukryty; pokazany w bottom-sheecie @900 */
.db-filters__sheethead { display: none; }

/* — MM-01: licznik wyników pod H1 (mono, kompakt) — */
.db-resultcount .woocommerce-result-count { margin: 0 0 14px; font-family: var(--db-font-mono); font-size: 12px; color: var(--db-text-muted); }
/* — MM-01: pełny opis SEO termu pod gridem (oba viewporty) — */
.db-cat-desc { margin: 30px 0 4px; max-width: var(--db-measure); font-size: 14.5px; line-height: 1.6; color: var(--db-text-muted); overflow-wrap: anywhere; }
.db-cat-desc h2, .db-cat-desc h3 { color: var(--db-text); font-family: var(--db-font-head); font-weight: 800; }
.db-cat-desc strong { color: var(--db-text); }

/* — MM-03/W14: przycisk „Filtry (N)" w pasku narzędzi (widoczny tylko na mobile — patrz @900) — */
.db-listing__filterbtn { display: none; align-items: center; gap: 7px; border: 1px solid var(--db-border); background: var(--db-bg-card); color: var(--db-text); font-family: var(--db-font-head); font-weight: 700; font-size: 12.5px; letter-spacing: .02em; padding: 10px 14px; border-radius: 3px; min-height: 44px; cursor: pointer; }
.db-listing__filterbtn svg { flex: none; }
.db-listing__filtern { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--db-fill); color: var(--db-ecru); font-family: var(--db-font-mono); font-size: 11px; }

/* — W15: chipy aktywnych filtrów nad gridem (oba viewporty) — */
.db-activefilters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.db-chip { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; border: 1px solid var(--db-olive); background: var(--db-bg-card); color: var(--db-olive); font-family: var(--db-font-mono); font-size: 12px; padding: 6px 10px; border-radius: 999px; line-height: 1.2; }
.db-chip:hover { background: var(--db-bg-section); }
.db-chip__x { font-size: 15px; line-height: 1; }
.db-chip--clear { border-style: dashed; color: var(--db-text-muted); }

/* scroll-lock ciała przy otwartej warstwie/sheecie (MM-22) */
body.db-layer-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .db-filters { transition: none !important; } }

/* siatka listingu (w kolumnie produktów) */
.db-listing__main ul.products,
.woocommerce ul.products, .woocommerce-page ul.products, ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; }
/* clearfix ::before/::after zajmowalby komorki grida */
ul.products::before, ul.products::after { content: none !important; display: none !important; }
.woocommerce ul.products li.product, .woocommerce ul.products li.db-card {
  width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; border: none; background: transparent;
}
.woocommerce ul.products li.product::before { content: none; }
/* Wydajność (2026-10-29, TBT ~1,2 s = głównie Layout ok. 3700 węzłów): karty poniżej pierwszego ekranu przeglądarka układa
 * dopiero przy zbliżeniu do widoku. contain-intrinsic-size „auto” zapamiętuje prawdziwą wysokość po pierwszym wyświetleniu (bez skoków). */
.woocommerce ul.products li.product:nth-child(n+7) { content-visibility: auto; contain-intrinsic-block-size: auto 420px; }

/* karta */
.db-card__inner { position: relative; background: var(--db-bg-card); border: 1px solid var(--db-border); border-radius: 4px; display: flex; flex-direction: column; height: 100%; transition: box-shadow .18s ease; }
.db-card__inner:hover { box-shadow: 0 14px 34px rgba(27,28,19,0.12); }

/* media — zdjecia katalogu sa na bialym tle -> biale tlo takze w dark mode */
.db-card__media { position: relative; display: block; height: 200px; background: var(--db-photo-bg); border-radius: 4px 4px 0 0; overflow: hidden; }
.db-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; box-sizing: border-box; }
.db-card__raty { position: absolute; top: 10px; left: 10px; background: #FFF3EA; color: var(--db-cta); border: 1px solid var(--db-cta); border-radius: 2px; font-family: var(--db-font-mono); font-size: 10px; font-weight: 600; padding: 3px 7px; }

/* body */
.db-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.db-card__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.db-card__brand { font-family: var(--db-font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--db-text-muted); text-transform: uppercase; }
.db-card__sku { font-family: var(--db-font-mono); font-size: 10px; color: var(--db-text-muted); } /* było var(--db-border) = 1,3:1, kod produktu niewidoczny (skaner kontrastu 2026-10-15) */
.db-card__title { color: var(--db-text); font-family: var(--db-font-head); font-weight: 700; font-size: 14.5px; line-height: 1.35; text-decoration: none; }
.db-card__title:hover { color: var(--db-accent); }
.db-card__stock { display: flex; align-items: center; gap: 7px; font-family: var(--db-font-mono); font-size: 11px; }
.db-card__dot { width: 6px; height: 6px; border-radius: 50%; }
.db-card__stock--in { color: #477236; } /* R0.1: tekst 11 px — 5,63:1 na białym (#5A8A46 = --db-success miało 4,07:1); kropka zostaje w kolorze tokenu */ .db-card__stock--in .db-card__dot { background: var(--db-success); }
.db-card__stock--out { color: var(--db-text-muted); } .db-card__stock--out .db-card__dot { background: var(--db-text-muted); }
.db-card__stock--ask { color: var(--db-olive); } .db-card__stock--ask .db-card__dot { background: var(--db-olive); } /* W6: produkt-widmo „na zapytanie" */

/* cena */
.db-card__price { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.db-card__amount { font-family: var(--db-font-mono); font-weight: 600; font-size: 18px; white-space: nowrap; color: var(--db-text); }
.db-card__amount .woocommerce-Price-amount { font-weight: 600; }
.db-card__rata { font-family: var(--db-font-mono); font-size: 10px; color: var(--db-cta); }
.db-card__omni { font-family: var(--db-font-mono); font-size: 10px; color: var(--db-text-muted); }
.db-card__ask { font-family: var(--db-font-head); font-weight: 800; font-size: 15px; color: var(--db-olive); }

/* akcje */
.db-card__actions { display: flex; gap: 8px; }
.woocommerce ul.products li a.button.db-card__cart,
.db-card__cart { flex: 1; text-align: center; background: var(--db-ink); color: var(--db-ecru); font-family: var(--db-font-head); font-weight: 700; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 11px; border-radius: 3px; }
.woocommerce ul.products li a.button.db-card__cart:hover, .db-card__cart:hover { background: var(--db-fill); color: var(--db-ecru); }
html.db-dark .db-card__cart { background: #000; }
.woocommerce ul.products li a.button.db-card__ask-btn,
.db-card__ask-btn { flex: 1; text-align: center; background: transparent; color: var(--db-olive); border: 1px solid var(--db-olive); font-family: var(--db-font-head); font-weight: 700; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 10px; border-radius: 3px; }
.woocommerce ul.products li a.button.db-card__ask-btn:hover, .db-card__ask-btn:hover { background: var(--db-fill); color: var(--db-ecru); }
.db-card__cart.added { opacity: .7; }
.db-card__cart .added_to_cart { display: none; }

/* — Koszyk / checkout (WooCommerce Blocks) — */
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-proceed-to-checkout-block a {
  background: var(--db-cta) !important; color: #FFF7EE !important; border: none !important;
  font-family: var(--db-font-head) !important; font-weight: 800 !important;
  text-transform: uppercase; letter-spacing: 0.05em; border-radius: 3px !important;
}
.wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block a:hover { background: var(--db-cta-hov) !important; }
.wc-block-components-product-name { font-family: var(--db-font-head); font-weight: 700; }
.wc-block-components-product-price, .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--db-font-mono); font-variant-numeric: tabular-nums;
}
.wc-block-components-sidebar .wc-block-components-totals-wrapper { border-color: var(--db-border); }

/* responsywność */
@media (max-width: 1100px) { .db-listing__main ul.products, .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1023.98px) { /* W1: tryb mobilny nawigacji/listingu = granica tabletu (dotyk → filtry-sheet) */
  .db-listing { grid-template-columns: 1fr; gap: 16px; }
  .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); }
  .db-cat-intro { margin: 0 0 12px; font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* W13/W14 — filtry POZA strumieniem treści: aside zostaje w DOM (parytet W7),
     CSS wyjmuje go z układu i prezentuje jako pełnoekranowy bottom-sheet.
     Dzięki temu grid produktów zaczyna się od razu pod paskiem narzędzi. */
  .db-filters {
    position: fixed; inset: 0; z-index: 320;
    display: flex; flex-direction: column; gap: 0;
    background: var(--db-bg);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    overscroll-behavior: contain;
    visibility: hidden;
  }
  body.db-filters-open .db-filters { transform: none; visibility: visible; }
  .db-filters__sheethead {
    display: flex; align-items: center; justify-content: space-between;
    flex: none; padding: 12px 16px; border-bottom: 1px solid var(--db-border); background: var(--db-bg);
  }
  .db-filters__sheeth { font-family: var(--db-font-head); font-weight: 900; font-size: 17px; text-transform: uppercase; color: var(--db-text); }
  .db-filters__close { width: 44px; height: 44px; border: none; background: transparent; color: var(--db-text); font-size: 26px; line-height: 1; cursor: pointer; }
  .db-filters__form { flex: 1 1 auto; overflow-y: auto; padding: 18px 16px 16px; gap: 20px; -webkit-overflow-scrolling: touch; }
  .db-filters__actions {
    position: sticky; bottom: 0; margin: 8px -16px -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--db-bg); border-top: 1px solid var(--db-border); flex-direction: column; gap: 8px;
  }
  .db-filters__apply { min-height: 48px; font-size: 13.5px; }
  .db-filters__clear { text-align: center; }

  /* MM-01 — kompaktowy H1 listingu na mobile (mniej pionu nad produktami). */
  .woocommerce-products-header__title, .db-listing ~ * .page-title { font-size: 27px; line-height: 1.18; margin-bottom: 10px; }

  /* MM-03 — pasek narzędzi [Filtry (N) | Sortuj | Na stronie]: sticky (best-effort);
     Filtry pełną szerokością (główna akcja), pod spodem Sortuj + Na stronie po połowie. */
  .db-listing__bar { position: sticky; top: 0; z-index: 40; background: var(--db-bg); gap: 8px; padding: 8px 0; }
  .db-listing__filterbtn { display: inline-flex; flex: 1 1 100%; justify-content: center; }
  .db-listing__bar .storefront-sorting { flex: 1 1 0; min-width: 0; margin: 0; }
  .db-listing__bar .woocommerce-ordering { width: 100%; }
  .db-listing__bar .woocommerce-ordering select { width: 100%; min-height: 44px; }
  .db-perpage { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; }
  .db-perpage select { flex: 1 1 auto; min-width: 0; min-height: 44px; }
}
/* WSK-6 (K-06 / odłożone W11/MM-06): 2-kolumnowa KOMPAKTOWA siatka na telefonie
   (było 1-kol → wolne skanowanie 5900 SKU). minmax(0,1fr) chroni przed przepełnieniem
   przy długich cenach; media o stałej wysokości = 0 CLS; tap-targety ≥44px. */
@media (max-width: 520px) {
  .db-listing__main ul.products, .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .db-card__media { height: 140px; }
  .db-card__media img { padding: 8px; }
  .db-card__body { padding: 10px 11px 12px; gap: 6px; }
  .db-card__meta { gap: 6px; }
  .db-card__sku { display: none; } /* mniej szumu w wąskiej karcie */
  .db-card__brand { font-size: 9.5px; }
  .db-card__title { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .db-card__amount { font-size: 15.5px; }
  .db-card__raty { top: 6px; left: 6px; font-size: 9px; padding: 2px 5px; }
  .db-card__actions { gap: 6px; }
  .woocommerce ul.products li a.button.db-card__cart, .db-card__cart,
  .woocommerce ul.products li a.button.db-card__ask-btn, .db-card__ask-btn {
    min-height: 44px; display: flex; align-items: center; justify-content: center;
    padding: 6px 8px; font-size: 10.5px; text-align: center;
  }
  .db-card__compare { width: 44px; min-height: 44px; }
}

/* stan ladowania podczas podmiany AJAX */
.db-listing.is-loading { opacity: 0.5; pointer-events: none; transition: opacity .15s; }

/* =========================================================================
 * Porównywarka (⇄, pasek, sheet) — design v2.1 §5.
 * ========================================================================= */
.db-card__actions { display: flex; gap: 8px; }
.db-card__compare { flex: none; width: 42px; border: 1px solid var(--db-olive); background: var(--db-bg-card); color: var(--db-olive); border-radius: 3px; font-size: 15px; cursor: pointer; line-height: 1; }
/* 2026-11-04: ikona „dwie kolumny” + podpis zamiast znaku ⇄ (wyglądał jak ₴); podpis znika na wąskich kartach. */
.db-card__compare { width: auto; min-width: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; font-size: 12px; font-weight: 700; }
.db-card__compare .db-ui-ico { width: 18px; height: 18px; color: currentColor; }
.db-card__compare.is-active .db-ui-ico .db-ui-ico__a { stroke: var(--db-ecru); }
@container (max-width: 230px) { .db-card__cmpt { display: none; } }
@media (max-width: 560px) { .db-card__cmpt { display: none; } .db-card__compare { padding: 0; } }
.db-card__compare:hover { background: var(--db-bg-section); color: var(--db-olive); }
.db-card__compare.is-active { background: var(--db-fill); color: var(--db-ecru); }

/* pasek i okno porównania → assets/css/compare.css (paczka core, 2026-11-04: na karcie produktu brakowało stylów) */

/* — Box celu nad listą (design v3 §5.2) — */
.db-celbox { grid-column: 1 / -1; margin: 0 0 14px; padding: 11px 14px; background: #fff; border: 1px solid var(--db-border); border-left: 3px solid var(--db-olive); border-radius: 3px; font-size: 12.5px; color: var(--db-text); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.db-celbox__h { font-family: var(--db-font-mono); font-size: 11.5px; }
.db-celbox a { color: var(--db-olive); text-decoration: none; border: 1px solid var(--db-border); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; }
.db-celbox a:hover { border-color: var(--db-olive); background: var(--db-bg-section); }

/* =========================================================================
 * QUICK WINS nawigacji (spec 2026-07-11-nawigacja-redesign.md §3.1)
 * ========================================================================= */

/* — QW5: widoczne breadcrumby (Rank Math / WooCommerce) — */
.db-breadcrumbs { margin: 0 0 16px; font-family: var(--db-font-mono); font-size: 12px; color: var(--db-text-muted); }
.db-breadcrumbs nav, .db-breadcrumbs p { margin: 0; }
.db-breadcrumbs a { color: var(--db-text-muted); text-decoration: none; }
.db-breadcrumbs a:hover { color: var(--db-olive); text-decoration: underline; }
.db-breadcrumbs .separator, .db-breadcrumbs .breadcrumbs__separator, .db-breadcrumbs .breadcrumb-separator { margin: 0 6px; color: var(--db-border); }
.db-breadcrumbs strong, .db-breadcrumbs .last { color: var(--db-text); font-weight: 600; }

/* — B3: intro landingu kategorii (pod tytułem, nad kaflami) — */
.db-cat-intro { max-width: var(--db-measure); margin: 0 0 20px; font-size: 14.5px; line-height: 1.6; color: var(--db-text-muted); overflow-wrap: anywhere; }
.db-cat-intro strong { color: var(--db-text); font-weight: 700; }
.db-cat-intro__link { border: 0; padding: 0; background: none; font: inherit; color: var(--db-olive); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.db-cat-intro__link:hover { color: var(--db-olive-hov); background: none; }

/* — QW1 + QW4: kafle podkategorii nad gridem / chipsy na mobile — */
.db-subcats { margin: 0 0 26px; }
.db-subcats__h { display: block; font-family: var(--db-font-head); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--db-text); margin: 0 0 12px; }
.db-subcats__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.db-subcats__tile { position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--db-text); background: var(--db-bg-card); border: 1px solid var(--db-border); border-radius: 6px; overflow: hidden; min-height: 44px; transition: border-color .15s ease, box-shadow .15s ease; }
.db-subcats__tile:hover { border-color: var(--db-olive); box-shadow: 0 8px 22px rgba(27,28,19,.09); }
.db-subcats__ico { position: absolute; top: 8px; left: 8px; z-index: 1; width: 30px; height: 30px; padding: 5px; color: var(--db-olive); background: var(--db-bg-card); border: 1px solid var(--db-border); border-radius: 7px; box-shadow: 0 2px 5px rgba(27,28,19,.07); }
.db-subcats__img { height: 104px; background: var(--db-photo-bg) center/contain no-repeat; }
.db-subcats__tile.is-ph .db-subcats__img { background: var(--db-photo-ph); }
.db-subcats__label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 12px; }
.db-subcats__name { font-family: var(--db-font-head); font-weight: 700; font-size: 13px; line-height: 1.25; min-width: 0; }
.db-subcats__c { font-family: var(--db-font-mono); font-size: 11px; color: var(--db-text-muted); flex: none; }

/* — QW2: hub kafli kategorii na /sklep/ — */
.db-hub { margin: 4px 0 10px; }
.db-hub__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; }
.db-hub__kicker { font-family: var(--db-font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--db-olive); }
.db-hub__all { text-decoration: none; color: var(--db-text); font-family: var(--db-font-head); font-weight: 700; font-size: 13px; border-bottom: 2px solid var(--db-olive); padding-bottom: 3px; white-space: nowrap; }
.db-hub__all:hover { color: var(--db-olive); }
.db-hub__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.db-hub__tile { position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--db-text); background: var(--db-bg-card); border: 1px solid var(--db-border); border-radius: 8px; overflow: hidden; min-height: 44px; transition: border-color .15s ease, box-shadow .15s ease; }
.db-hub__tile:hover { border-color: var(--db-olive); box-shadow: 0 10px 26px rgba(27,28,19,.1); }
.db-hub__ico { position: absolute; top: 12px; left: 12px; z-index: 1; width: 38px; height: 38px; padding: 7px; color: var(--db-olive); background: var(--db-bg-card); border: 1px solid var(--db-border); border-radius: 9px; box-shadow: 0 2px 6px rgba(27,28,19,.08); }
.db-hub__img { height: 150px; background: var(--db-photo-bg) center/contain no-repeat; }
.db-hub__tile.is-ph .db-hub__img { background: var(--db-photo-ph); }
.db-hub__label { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; }
.db-hub__name { font-family: var(--db-font-head); font-weight: 800; font-size: 16px; text-transform: uppercase; line-height: 1.15; }
.db-hub__c { font-family: var(--db-font-mono); font-size: 11.5px; color: var(--db-text-muted); }

/* — Mobile (<768): kafle huba 2-kol; podkategorie jako poziomy pasek chipsów (scroll-snap) — */
@media (max-width: 767.98px) {
  .db-hub__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .db-hub__img { height: 104px; }
  .db-hub__name { font-size: 13.5px; }
  .db-hub__label { padding: 11px 12px; }

  /* MM-02 — podkategorie jako kompaktowe chipy TEKSTOWE (nazwa + licznik) zamiast kafli
     ze zdjęciem: odzyskujemy ~100px pionu, produkty wyżej. Ten sam markup, inna prezentacja
     (parytet W7). Poziomy scroll z „wystającym" ostatnim chipem = affordance przewijania (W10). */
  .db-subcats { margin: 0 0 12px; }
  .db-subcats__h { font-size: 11px; margin-bottom: 8px; }
  .db-subcats__grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x proximity; gap: 8px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .db-subcats__tile { flex: 0 0 auto; scroll-snap-align: start; flex-direction: row; align-items: center; min-height: 44px; border-radius: 999px; overflow: visible; }
  .db-subcats__tile:hover { box-shadow: none; }
  .db-subcats__ico, .db-subcats__img { display: none; }
  .db-subcats__label { padding: 0 14px; align-items: center; gap: 6px; min-height: 44px; }
  .db-subcats__name { font-size: 12.5px; white-space: nowrap; }
  .db-subcats__c { font-size: 10.5px; }

  .db-breadcrumbs { font-size: 11.5px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
}

/* =========================================================================
 * O7 / MM-18 + MM-19 — Koszyk i checkout (WooCommerce Blocks), tuning mobilny.
 * Blocks dają natywnie: 1 kolumnę @mobile, inline-walidację przy polu,
 * autocomplete/typy pól, składany kupon i podsumowanie z sumą. Bez forka Blocks —
 * tu WYŁĄCZNIE: cele dotykowe ≥44px, CTA pełną szerokością ≥48px, tokeny/kontrast.
 * (Styl bazowy CTA/sum/nazw jest w sekcji „Koszyk / checkout" wyżej.)
 * ========================================================================= */
@media (max-width: 767.98px) {
  /* CTA pełna szerokość: koszyk „Przejdź do kasy" + checkout „Zamawiam z obowiązkiem zapłaty" */
  .wc-block-cart__submit-button,
  .wp-block-woocommerce-proceed-to-checkout-block a,
  .wc-block-components-checkout-place-order-button {
    width: 100%; min-height: 48px; font-size: 15px;
  }

  /* MM-18: stepper ilości — cały selektor i przyciski ±/pole ≥44px (kciuk) */
  .wc-block-components-quantity-selector { min-height: 44px; }
  .wc-block-components-quantity-selector__button { min-width: 44px; min-height: 44px; font-size: 18px; }
  .wc-block-components-quantity-selector__input { min-height: 44px; }

  /* MM-18: „usuń pozycję" — powiększony cel dotykowy bez zmiany wyglądu linku */
  .wc-block-cart-item__remove-link { display: inline-flex; align-items: center; min-height: 44px; }

  /* MM-18: kupon jako składany wiersz (Blocks) + akordeon podsumowania checkoutu —
     belka rozwijana ≥44px, żeby dała się otworzyć kciukiem */
  .wc-block-components-panel__button,
  .wc-block-components-totals-coupon__button { min-height: 44px; }

  /* MM-18: miniatura pozycji koszyka — klikalna, sensowny rozmiar na wąskim ekranie */
  .wc-block-cart-item__image img { max-width: 64px; height: auto; }
}

/* MM-19 (e): pasek zaufania POD przyciskiem „Zamawiam" (render: inc/checkout.php,
   render_block po woocommerce/checkout-actions-block). Na mobile ląduje od razu pod CTA. */
.db-checkout-trust { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--db-border); border-radius: 8px; background: var(--db-bg-card); }
.db-checkout-trust ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 20px; }
.db-checkout-trust li { display: flex; align-items: center; gap: 8px; font-family: var(--db-font-head); font-weight: 600; font-size: 12.5px; color: var(--db-text-muted); }
.db-checkout-trust svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--db-olive); }
@media (max-width: 767.98px) { .db-checkout-trust ul { flex-direction: column; gap: 10px; } }

/* WSK-1: nudge progu darmowej dostawy nad listą pozycji koszyka. */
.db-freeship { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--db-border); border-radius: 8px; background: var(--db-bg-card); font-family: var(--db-font-head); font-weight: 600; font-size: 13.5px; color: var(--db-text); display: flex; align-items: center; gap: 8px; }
.db-freeship strong { color: var(--db-olive); }
.db-freeship--met { border-color: var(--db-success); color: var(--db-success); }
.db-freeship__ico { font-weight: 800; }

/* =========================================================================
 * Widoki listingu: lista / kafelki / szczegóły (2026-09-25, uwaga właściciela: ucięte nazwy na telefonie).
 * Klasa na <html>: db-view-lista | db-view-kafelki | db-view-szczegoly (inc/filters.php, localStorage `db-view`).
 * ========================================================================= */
.db-view { display: inline-flex; gap: 4px; margin-left: auto; }
.db-view__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border: 1px solid var(--db-border); border-radius: var(--db-radius); background: var(--db-bg-card); color: var(--db-text-muted); font-family: var(--db-font-mono); font-size: 11.5px; cursor: pointer; }
.db-view__btn[aria-pressed="true"] { border-color: var(--db-accent); color: var(--db-accent); background: var(--db-bg-section); }
.db-card__excerpt { display: none; margin: 0; font-size: 13px; line-height: 1.5; color: var(--db-text-muted); }
@media (max-width: 767.98px) { .db-view__t { display: none; } .db-view__btn { min-height: 44px; min-width: 44px; justify-content: center; padding: 0; } }

/* Kafelki: pełna nazwa (do 4 linii zamiast 2 z „…”). */
html.db-view-kafelki .db-card__title { -webkit-line-clamp: 4; line-clamp: 4; }

/* Lista: jedna kolumna, zdjęcie z lewej, pełna nazwa. */
html.db-view-lista .db-listing__main ul.products, html.db-view-lista .woocommerce ul.products { grid-template-columns: 1fr !important; gap: 10px; }
html.db-view-lista ul.products li.db-card .db-card__inner { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; }
html.db-view-lista ul.products li.db-card .db-card__media { height: 112px; grid-row: 1 / span 2; }
html.db-view-lista ul.products li.db-card .db-card__media img { padding: 6px; }
html.db-view-lista ul.products li.db-card .db-card__tools { display: none; }
html.db-view-lista ul.products li.db-card .db-card__body { padding: 10px 12px; gap: 5px; text-align: left; align-items: stretch; }
html.db-view-lista .db-card__title { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; font-size: 14px; text-align: left; }
html.db-view-lista .db-card__price, html.db-view-lista .db-card__stock { justify-content: flex-start; text-align: left; }
html.db-view-lista .db-card__actions { display: flex; gap: 8px; }
html.db-view-lista .woocommerce ul.products li a.button.db-card__ask-btn, html.db-view-lista .db-card__ask-btn,
html.db-view-lista .woocommerce ul.products li a.button.db-card__cart, html.db-view-lista .db-card__cart { flex: 1 1 auto; min-height: 40px; font-size: 11px; }

/* Szczegóły: jedna kolumna, duże zdjęcie, pełna nazwa i krótki opis. */
html.db-view-szczegoly .db-listing__main ul.products, html.db-view-szczegoly .woocommerce ul.products { grid-template-columns: 1fr !important; gap: 14px; }
html.db-view-szczegoly .db-card__media { height: 220px !important; }
html.db-view-szczegoly .db-card__title { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; font-size: 15.5px; }
html.db-view-szczegoly .db-card__excerpt { display: block; }
@media (min-width: 768px) {
  html.db-view-szczegoly ul.products li.db-card .db-card__inner { display: grid; grid-template-columns: 260px minmax(0, 1fr); }
  html.db-view-lista .db-listing__main ul.products, html.db-view-lista .woocommerce ul.products { gap: 8px; }
}

/* Podkategorie na telefonie: wszystkie widoczne (zawijanie), bez przewijania w bok. */
@media (max-width: 767.98px) {
  .db-subcats__grid { flex-wrap: wrap; overflow-x: visible; }
  .db-subcats__name { white-space: normal; }
}

/* Zwinięcie pełnej siatki podkategorii na telefonie, gdy jest ich dużo — inc/filters.php renderuje
 * checkbox TYLKO gdy >4 (krótsze listy nigdy nie chowają się, więc tu nic się nie zmienia dla nich).
 * Czysty CSS (checkbox-hack): bez JS, bez FOUC, bezpieczne dla adblocków. Uwaga właściciela 2026-09-30:
 * cała siatka potrafiła zepchnąć pierwszy produkt poza ekran nawet na dużym telefonie. */
@media (max-width: 767.98px) {
  .db-subcats:has(.db-subcats__cb) .db-subcats__grid { max-height: 160px; overflow: hidden; position: relative; }
  .db-subcats:has(.db-subcats__cb) .db-subcats__grid::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: linear-gradient(transparent, var(--db-bg)); pointer-events: none; }
  .db-subcats__cb { position: absolute; opacity: 0; pointer-events: none; }
  .db-subcats__cb:checked ~ .db-subcats__grid { max-height: none; }
  .db-subcats__cb:checked ~ .db-subcats__grid::after { display: none; }
  .db-subcats__morebtn { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; margin-top: 4px; font-family: var(--db-font-mono); font-size: 12px; color: var(--db-olive); cursor: pointer; }
  .db-subcats__moretxt-open { display: none; }
  .db-subcats__cb:checked ~ .db-subcats__morebtn .db-subcats__moretxt-closed { display: none; }
  .db-subcats__cb:checked ~ .db-subcats__morebtn .db-subcats__moretxt-open { display: inline; }
}
.db-subcats__tile.is-current { border-color: var(--db-accent); box-shadow: inset 0 0 0 1px var(--db-accent); }

/* Pasek „Twoje auto” nad listingiem (inc/garaz.php) */
.db-garagebar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--db-accent); border-radius: var(--db-radius); background: var(--db-bg-section); color: var(--db-text); font-size: 13.5px; }
.db-garagebar__b { display: flex; gap: 8px; }
.db-garagebar__btn { min-height: 40px; padding: 0 14px; border: 1px solid var(--db-accent); border-radius: var(--db-radius); background: var(--db-bg-card); color: var(--db-accent); font-family: var(--db-font-head); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.db-garagebar__btn--x { border-color: var(--db-border); color: var(--db-text-muted); }
@media (max-width: 767.98px) {
  .db-listing__bar { flex-wrap: wrap; }
  .db-perpage__label { display: none; }
  .db-view { order: 10; width: 100%; justify-content: flex-end; margin-left: 0; }
}

/* Kompaktowy nagłówek listingu + podkategorie (uwaga właściciela 2026-10-14: na laptopie 1366×768 pierwszy produkt
 * dopiero na ~1209 px — Storefront dawał 96 px pustego padding-bottom pod opisem, a kafle podkategorii 104 px zdjęcia
 * w 2 rzędach). Pełna lista podkategorii ZOSTAJE (uwaga z 2026-09-25 „chcę całe drzewko”) — tylko zwarta forma. */
body .site-main .woocommerce-products-header { padding-bottom: 0; margin-bottom: 14px; text-align: left; } /* wygrywa z Storefront `.storefront-full-width-content .woocommerce-products-header` (center + padding 5.99em) */
.woocommerce-products-header .woocommerce-products-header__title.page-title { font-size: 32px; line-height: 1.15; margin: 6px 0 8px; text-align: left; }
.woocommerce-products-header .db-cat-intro { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.woocommerce-products-header .db-resultcount .woocommerce-result-count { float: none; margin: 0 0 6px; } /* Storefront float:left nachodził na opis */
.db-subcats__cb { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* był widoczny na desktopie (ukryty tylko ≤767px) */
@media (min-width: 768px) {
  .db-subcats { margin: 0 0 18px; }
  .db-subcats__h { font-size: 12px; margin-bottom: 8px; }
  .db-subcats__grid { display: flex; flex-wrap: wrap; gap: 8px; }
  .db-subcats__tile { flex-direction: row; align-items: center; min-height: 54px; padding: 4px; }
  .db-subcats__ico { display: none; }
  .db-subcats__img { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 4px; }
  .db-subcats__label { padding: 0 12px 0 10px; gap: 8px; align-items: center; }
  .db-subcats__name { white-space: nowrap; }
  .db-subcats__morebtn { display: none; }
}
/* Telefon: podkategorie w JEDNYM przewijanym w bok rzędzie (jak w dużych sklepach) zamiast zawijanej listy z „Pokaż
 * wszystkie” — wszystkie dalej dostępne przesunięciem palca, produkty ~150 px wyżej (2026-10-14). */
@media (max-width: 767.98px) {
  .db-subcats .db-subcats__grid, .db-subcats:has(.db-subcats__cb) .db-subcats__grid { flex-wrap: nowrap; overflow-x: auto; max-height: none; scroll-snap-type: x proximity; padding-bottom: 6px; }
  .db-subcats:has(.db-subcats__cb) .db-subcats__grid::after, .db-subcats__morebtn { display: none; }
  .db-subcats .db-subcats__name { white-space: nowrap; }
}

/* Łatka 16: piktogramy 64×64 w plakietkach podkategorii i działu (mniejszy margines, większy rysunek). */
.db-subcats__ico.db-pikto { width: 36px; height: 36px; padding: 4px; }
.db-hub__ico.db-pikto { width: 46px; height: 46px; padding: 6px; }

/* Strona „Sklep” — wariant A RANKSTER (zatwierdzony 2026-10-15; inc/filters.php dzikibaron_render_shop_hub). Kolory z wzoru
   `wzor-strony-sklep.html`, w obu trybach przez zmienne lokalne (html.db-dark i prefers-color-scheme bez .db-light). */
.db-sklep { --sk-tile: #ECEBDF; --sk-chip: #ECEBDF; --sk-chipT: #33381E; --sk-more: #7A5F22; --sk-bar: #1B1C13; --sk-barT: #F2F1EA; margin: 4px 0 10px; }
html.db-dark .db-sklep { --sk-tile: #2C2E22; --sk-chip: #2C2E22; --sk-chipT: #D9D6C2; --sk-more: #C7A65B; --sk-bar: #2C2E22; --sk-barT: #EBE8D5; }
@media (prefers-color-scheme: dark) {
  html:not(.db-light) .db-sklep { --sk-tile: #2C2E22; --sk-chip: #2C2E22; --sk-chipT: #D9D6C2; --sk-more: #C7A65B; --sk-bar: #2C2E22; --sk-barT: #EBE8D5; }
}
.db-sklep__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; }
.db-sklep__car { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--sk-bar); color: var(--sk-barT); border-radius: 16px; padding: 14px 18px; margin: 0 0 26px; font-family: var(--db-font-head); font-weight: 700; }
.db-sklep__car b { color: var(--db-gold, #C7A65B); }
.db-sklep__carbtn { margin-left: auto; background: var(--db-gold, #C7A65B); color: #1B1C13; border: 0; border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 14px; cursor: pointer; }
.db-sklep__carbtn:hover { filter: brightness(1.06); }
.db-sklep__area { margin: 0 0 26px; }
.db-sklep__sh { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid var(--db-border); padding-bottom: 6px; margin-bottom: 14px; }
.db-sklep__sh h2 { margin: 0; font-family: var(--db-font-head); font-size: 24px; font-weight: 800; color: var(--db-text); }
.db-sklep__sh span { font-family: var(--db-font-mono); font-size: 13px; color: var(--db-text-muted); }
.db-sklep__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 14px; }
.db-sklep__tile { display: flex; gap: 16px; background: var(--db-bg-card); border: 1px solid var(--db-border); border-radius: 18px; padding: 16px; }
.db-sklep__ic { flex: 0 0 76px; height: 76px; border-radius: 16px; background: var(--sk-tile); display: grid; place-items: center; color: var(--db-olive); }
.db-sklep__ic svg { width: 58px; height: 58px; overflow: visible; }
.db-sklep__tx { min-width: 0; }
.db-sklep__name { margin: 2px 0 8px; font-family: var(--db-font-head); font-size: 18px; font-weight: 800; line-height: 1.2; }
.db-sklep__name a { color: var(--db-text); text-decoration: none; font-weight: 800; }
.db-sklep__name a:hover { color: var(--db-olive); }
.db-sklep__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.db-sklep__chip { font-size: 13px; background: var(--sk-chip); color: var(--sk-chipT); border-radius: 999px; padding: 5px 10px; text-decoration: none; line-height: 1.3; }
.db-sklep__chip:hover { outline: 1px solid var(--db-olive); }
.db-sklep__more { font-family: var(--db-font-mono); font-weight: 600; font-size: 13px; color: var(--sk-more); text-decoration: none; }
.db-sklep__more:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .db-sklep__grid { grid-template-columns: 1fr; }
  .db-sklep__ic { flex-basis: 64px; height: 64px; }
  .db-sklep__ic svg { width: 48px; height: 48px; }
  .db-sklep__carbtn { margin-left: 0; }
}
@media (max-width: 380px) {
  .db-sklep__tile { gap: 12px; padding: 14px 12px; }
  .db-sklep__ic { flex-basis: 48px; height: 48px; border-radius: 12px; }
  .db-sklep__ic svg { width: 38px; height: 38px; }
  .db-sklep__car { padding: 12px 14px; }
}
.db-sklep__onas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; margin: 0 0 22px; }
.db-sklep__opis { max-width: 860px; margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--db-text); }
.db-sklep__social { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0; }
.db-sklep__soc { font-family: var(--db-font-head); font-weight: 700; font-size: 14px; color: var(--db-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--db-gold, #C7A65B); }
.db-sklep__soc:hover { color: var(--db-olive); }
.db-sklep__tags { font-family: var(--db-font-mono); font-size: 13px; color: var(--db-text-muted); }
.db-sklep__foto { display: flex; gap: 10px; }
.db-sklep__foto img { width: 150px; height: 200px; object-fit: cover; border-radius: 14px; border: 1px solid var(--db-border); display: block; }
@media (min-width: 1200px) { .db-sklep__foto img { width: 180px; height: 240px; } }
@media (max-width: 600px) {
  /* telefon: opis pod kaflami (kafle od razu na ekranie), na komputerze nad nimi; dla wyszukiwarek tekst jest w HTML tak samo */
  .db-sklep { display: flex; flex-direction: column; }
  .db-sklep__onas { order: 9; grid-template-columns: 1fr; gap: 14px; margin: 6px 0 0; }
  .db-sklep__opis { font-size: 14px; color: var(--db-text-muted); }
  .db-sklep__foto img { width: calc(50% - 5px); height: auto; aspect-ratio: 3 / 4; }
}
/* lista produktów jednej potrzeby (?cel=…): opis z poradnika + wskazówki (inc/potrzeby-landing.php, 2026-11-04) */
.db-cel-intro { margin: 0 0 18px; padding: 14px 16px; border-left: 3px solid #C4923A; background: rgba(196,146,58,.08); border-radius: 0 10px 10px 0; }
.db-cel-intro p { margin: 0 0 6px; font-size: 15px; line-height: 1.55; color: var(--db-text); max-width: 80ch; }
.db-cel-intro__a { font-family: var(--db-font-head); font-weight: 800; color: var(--db-olive); text-decoration: none; }
/* Nagłówek strony marki: logo + opis (inc/brands.php) */
.tax-product_brand .woocommerce-products-header .db-resultcount { order: 3; } /* nagłówek WC jest tu flex column, H1 ma order 2 */
.db-markahead { order: 4; }
.db-markahead { display: flex; gap: 18px; align-items: flex-start; margin: 4px 0 16px; padding: 14px 16px; border: 1px solid var(--db-border); border-radius: 8px; background: var(--db-bg-card); }
.db-markahead__logo { flex: none; width: 170px; height: 90px; border: 1px solid var(--db-border); }
.db-markahead__logo img { max-height: 76px; max-width: 150px; width: auto; }
.db-markahead__txt { flex: 1; min-width: 0; font-size: 15px; line-height: 1.6; color: var(--db-text); }
.db-markahead__txt p { margin: 0 0 8px; }
.db-markahead__txt p:last-child { margin-bottom: 0; }
.db-markahead__txt a { color: var(--db-olive); }
.db-markahead__wiecej summary { cursor: pointer; font-family: var(--db-font-head); font-weight: 700; font-size: 14px; color: var(--db-olive); margin-bottom: 6px; }
@media (max-width: 640px) {
  .db-markahead { flex-direction: column; gap: 12px; padding: 12px; }
  .db-markahead__logo { width: 140px; height: 70px; }
  .db-markahead__logo img { max-height: 58px; max-width: 124px; }
  .db-markahead__txt { font-size: 14.5px; }
}


/* --- potrzeby.css --- */
/* dzikiBARON — strony potrzeb /potrzeba/… (inc/potrzeby-landing.php). Grafika zamiast ściany tekstu: piktogram w hero,
   kroki „Jak wybrać” z numerem i ikoną, ramka „Na co uważać”, kafle innych potrzeb. */
.db-pz__wrap { max-width: var(--db-container); margin: 0 auto; padding: 0 32px; }
.db-pz__hero { background: var(--db-ink); color: #F2EBDC; padding: 18px 0 40px; margin-bottom: 8px; }
.db-pz__okr { font-size: 12.5px; margin: 0 0 18px; opacity: .85; }
.db-pz__hero .db-pz__okr, .db-pz__hero .db-pz__okr a { color: #F2EBDC; }
.db-pz__herogrid { display: grid; grid-template-columns: 180px 1fr; gap: 32px; align-items: center; }
.db-pz__piktobox { width: 180px; height: 180px; border-radius: 24px; background: rgba(242, 235, 220, 0.06); border: 1px solid rgba(242, 235, 220, 0.18); display: flex; align-items: center; justify-content: center; }
.db-pz__pik { width: 120px; height: 120px; color: #F2EBDC; }
.db-pz__kicker { display: block; font-family: var(--db-font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #C4923A; margin-bottom: 8px; }
.db-pz__h1 { margin: 0 0 12px; font-family: var(--db-font-head); font-weight: 900; font-size: 40px; line-height: 1.08; text-transform: none; color: inherit; }
.db-pz--spis .db-pz__h1 { color: var(--db-text); margin-top: 8px; }
.db-pz__lead { margin: 0 0 20px; font-size: 16.5px; line-height: 1.55; max-width: 70ch; opacity: .9; }
.db-pz--spis .db-pz__lead { color: var(--db-text-muted); }
.db-pz__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.db-pz__btn { display: inline-flex; align-items: center; padding: 13px 22px; border-radius: 6px; background: var(--db-cta); color: #FFF7EE !important; font-family: var(--db-font-head); font-weight: 800; text-decoration: none; }
.db-pz__btn2 { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px !important; border-radius: 6px; border: 1px solid rgba(242, 235, 220, 0.4); background: transparent; color: #F2EBDC; font-family: var(--db-font-head); font-weight: 700; cursor: pointer; }
.db-pz__btn2 .db-ui-ico { width: 20px; height: 20px; }
.db-pz__sek { padding: 32px 0; border-bottom: 1px solid var(--db-border); }
.db-pz__h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-family: var(--db-font-head); font-weight: 900; font-size: 24px; text-transform: none; color: var(--db-text); }
.db-pz__h2 .db-ui-ico { width: 26px; height: 26px; color: var(--db-olive); }
.db-pz__h2row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.db-pz__h2row a { font-family: var(--db-font-head); font-weight: 700; color: var(--db-olive); text-decoration: none; }
.db-pz__dla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.db-pz__dla li { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px; background: var(--db-bg-card, #fff); border: 1px solid var(--db-border); border-radius: 10px; font-size: 14.5px; line-height: 1.45; color: var(--db-text); }
.db-pz__dla .db-ui-ico { flex: none; width: 24px; height: 24px; color: var(--db-olive); }
/* kroki: numer + ikona w kółku, linia łącząca na komputerze */
.db-pz__kroki { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; counter-reset: none; }
.db-pz__kroki li { position: relative; margin: 0; padding: 18px 16px 16px; background: var(--db-bg-card, #fff); border: 1px solid var(--db-border); border-radius: 12px; }
.db-pz__nr { position: absolute; top: -12px; left: 14px; width: 26px; height: 26px; border-radius: 50%; background: #C4923A; color: #1C1A17; font-family: var(--db-font-head); font-weight: 900; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.db-pz__kico { display: flex; width: 52px; height: 52px; border-radius: 50%; background: var(--db-bg-section); align-items: center; justify-content: center; margin: 6px 0 10px; }
.db-pz__kico .db-ui-ico { width: 28px; height: 28px; color: var(--db-olive); }
.db-pz__kroki b { display: block; font-family: var(--db-font-head); font-size: 16px; margin-bottom: 6px; color: var(--db-text); }
.db-pz__kroki p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--db-text-muted); }
.db-pz__wiecej { text-align: center; margin: 22px 0 0; }
.db-pz__uwaga { border-bottom: 0; }
.db-pz__uwaga ul { margin: 0; padding: 18px 22px 18px 40px; background: rgba(196, 146, 58, 0.1); border: 1px solid #C4923A; border-radius: 12px; }
.db-pz__uwaga li { margin: 6px 0; font-size: 14.5px; line-height: 1.5; color: var(--db-text); }
.db-pz__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.db-pz__chip { padding: 8px 14px; border: 1px solid var(--db-border); border-radius: 999px; background: var(--db-bg-card, #fff); color: var(--db-text); text-decoration: none; font-family: var(--db-font-head); font-weight: 700; font-size: 13px; }
.db-pz__chip:hover { border-color: var(--db-olive); }
.db-pz__faq details { border: 1px solid var(--db-border); border-radius: 10px; background: var(--db-bg-card, #fff); margin: 0 0 8px; }
.db-pz__faq summary { cursor: pointer; padding: 14px 16px; font-family: var(--db-font-head); font-weight: 700; font-size: 15px; color: var(--db-text); }
.db-pz__faq p { margin: 0; padding: 0 16px 16px; font-size: 14.5px; line-height: 1.6; color: var(--db-text-muted); }
.db-pz__pory { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.db-pz__por { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--db-text); border: 1px solid var(--db-border); border-radius: 10px; overflow: hidden; background: var(--db-bg-card, #fff); }
.db-pz__por img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.db-pz__por b { padding: 0 14px 14px; font-family: var(--db-font-head); }
.db-pz__kafle { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 8px 0 32px; }
.db-pz__kafel { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; text-align: center; border: 1px solid var(--db-border); border-radius: 10px; background: var(--db-bg-card, #fff); color: var(--db-text); text-decoration: none; }
.db-pz__kafel:hover { border-color: var(--db-olive); }
.db-pz__kpik { width: 44px; height: 44px; }
.db-pz__kafel b { font-family: var(--db-font-head); font-size: 14px; }
.db-pz__kafel span { font-family: var(--db-font-mono); font-size: 11px; color: var(--db-text-muted); }
@media (max-width: 767.98px) {
  .db-pz__wrap { padding: 0 16px; }
  .db-pz__hero { padding: 12px 0 28px; }
  .db-pz__herogrid { grid-template-columns: 1fr; gap: 14px; }
  .db-pz__piktobox { width: 84px; height: 84px; border-radius: 16px; }
  .db-pz__pik { width: 58px; height: 58px; }
  .db-pz__h1 { font-size: 27px; }
  .db-pz__lead { font-size: 15px; }
  .db-pz__cta > * { flex: 1 1 100%; justify-content: center; }
  .db-pz__h2 { font-size: 20px; }
  .db-pz__sek { padding: 24px 0; }
  .db-pz__kroki { grid-template-columns: 1fr; gap: 18px; }
  .db-pz__kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.db-pz__kpik { color: var(--db-olive); }
.dzb-potrzeba .site-content { padding-top: 0; }
.db-pz__hero { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.db-pz .db-pz__wrap { padding-left: 0; padding-right: 0; }
.db-pz__hero .db-pz__wrap { padding: 0 32px; }
.db-pz__btn2 { background: transparent !important; color: #F2EBDC !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; min-height: 0; }
.db-pz__btn2:hover { border-color: #C4923A; color: #C4923A !important; }
@media (max-width: 767.98px) { .db-pz__hero .db-pz__wrap { padding: 0 16px; } }
/* przypisy i źródła */
.db-pz__ref { font-size: .72em; line-height: 0; margin-left: 1px; }
.db-pz__ref a { color: var(--db-olive); text-decoration: none; font-weight: 700; }
.db-pz__hero .db-pz__ref a { color: #C4923A; }
.db-pz__zrodla ol { margin: 0; padding-left: 22px; font-size: 13.5px; line-height: 1.6; color: var(--db-text-muted); }
.db-pz__zrodla li { margin: 4px 0; scroll-margin-top: 90px; }
.db-pz__zrodla a { color: var(--db-text); }
.db-pz__zrodla li:target { background: rgba(196, 146, 58, 0.15); }
/* lista kontrolna (strona-przewodnik, np. przygotowanie auta) */
.db-pz__lista { margin: 0; padding: 0; list-style: none; counter-reset: pkt; display: grid; gap: 10px; }
.db-pz__lista li { counter-increment: pkt; position: relative; margin: 0; padding: 14px 16px 14px 56px; background: var(--db-bg-card, #fff); border: 1px solid var(--db-border); border-radius: 10px; }
.db-pz__lista li::before { content: counter(pkt); position: absolute; left: 14px; top: 14px; width: 28px; height: 28px; border-radius: 50%; background: #C4923A; color: #1C1A17; font-family: var(--db-font-head); font-weight: 900; display: flex; align-items: center; justify-content: center; }
.db-pz__lista b { display: block; font-family: var(--db-font-head); font-size: 16px; color: var(--db-text); }
.db-pz__lista p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--db-text-muted); }
.db-pz__linki { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.db-pz__linki a { font-family: var(--db-font-head); font-weight: 700; font-size: 13.5px; color: var(--db-olive); text-decoration: none; }