/* dzikiBARON — paczka "product" (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; }
}


/* --- product.css --- */
/* =========================================================================
 * dzikiBARON — strona pojedynczego produktu (design v2).
 * Źródło: design/Karta produktu.dc.html. Restyling struktury Woo/Storefront.
 * ========================================================================= */

/* minmax(0,..) — galeria (slajdy w rzedzie) ma ogromny min-content i rozsadza fr */
.single-product div.product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: start; }
/* clearfix ::before/::after Storefronta stawalby sie itemem grida (zajmuje 1. komorke) */
.single-product div.product::before, .single-product div.product::after { content: none !important; display: none !important; }
.single-product div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; margin-bottom: 0 !important; min-width: 0; overflow: hidden; }
.single-product div.product .entry-summary { width: 100% !important; float: none !important; display: flex; flex-direction: column; gap: 14px; }
.single-product div.product .woocommerce-tabs,
.single-product div.product .related.products,
.single-product div.product .up-sells,
.single-product div.product .db-pp__reviews,
.single-product div.product .db-pp__docs,
.single-product div.product .db-pp__gpsr,
.single-product div.product .db-reco,
.single-product div.product .woocommerce-notices-wrapper,
.single-product div.product > .onsale,
.single-product .storefront-sticky-add-to-cart { grid-column: 1 / -1; }
.single-product div.product .woocommerce-notices-wrapper:empty { display: none; }
/* makieta nie ma plywajacej paginacji produktow Storefront */
.storefront-product-pagination { display: none !important; }

/* — Galeria — zdjecia na bialym tle (takze dark mode) */
.woocommerce-product-gallery__wrapper { background: var(--db-photo-bg); border: 1px solid var(--db-border); border-radius: 6px; }
/* aspect-ratio 4/3 (zrodla 750x563) na slajdzie rezerwuje wysokosc = zero CLS przed initem
   flexslidera; na slajdzie (nie na .__wrapper, ktory flexslider rozciaga do szer. calej tasmy). */
.woocommerce-product-gallery__image { aspect-ratio: 4 / 3; }
.woocommerce-product-gallery__image a, .woocommerce-product-gallery__image img { height: 100%; }
.woocommerce-product-gallery .flex-control-thumbs img { background: var(--db-photo-bg); }
.woocommerce-product-gallery .flex-control-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 12px !important; }
.woocommerce-product-gallery .flex-control-thumbs li { width: auto !important; float: none !important; }
.woocommerce-product-gallery .flex-control-thumbs img { border: 1px solid var(--db-border); border-radius: 4px; background: var(--db-bg-card); opacity: 1; }
.woocommerce-product-gallery .flex-control-thumbs img.flex-active { border: 2px solid var(--db-olive); }

/* — Meta nad tytułem — */
.db-pp__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.db-pp__brand { font-family: var(--db-font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--db-olive) !important; font-weight: 600; text-transform: uppercase; text-decoration: none; }
.db-pp__sku { font-family: var(--db-font-mono); font-size: 11px; color: var(--db-text-muted); }

/* — Tytuł — */
.single-product .product_title { font-family: var(--db-font-head); font-weight: 900; font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }

/* — Box ceny — */
.single-product div.product p.price { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.single-product div.product .summary p.price { margin: 12px 0 6px; } /* test mobilny 2026-11-04: Storefront dawał 32 px nad i pod ceną — pusta dziura między ceną a „brutto” */
.single-product div.product p.price .woocommerce-Price-amount { font-family: var(--db-font-mono); font-weight: 600; font-size: 34px; color: var(--db-text); }
.db-pp__pricebox-extra { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--db-border); }
.db-pp__omni { font-family: var(--db-font-mono); font-size: 11px; color: var(--db-text-muted); }
.db-pp__omni .woocommerce-Price-amount { font-size: 11px; font-weight: 400; }
.db-pp__raty { display: flex; align-items: center; gap: 10px; font-family: var(--db-font-mono); font-size: 13px; color: var(--db-text-muted); }
/* S1.5: badge rat jako przycisk otwierajacy modal — reset defaultow buttona */
button.db-pp__raty { border: none; background: transparent; padding: 0; width: 100%; text-align: left; cursor: pointer; }
button.db-pp__raty:hover .db-pp__raty-badge { background: var(--db-cta); color: var(--db-ecru); }
.db-pp__raty strong { color: var(--db-text); }
.db-pp__raty-badge { background: #FFF3EA; color: var(--db-cta); border: 1px solid var(--db-cta); border-radius: 2px; font-size: 10.5px; font-weight: 600; padding: 4px 8px; }

/* — Cena na zapytanie — */
.db-price-ask { font-family: var(--db-font-head); font-weight: 800; font-size: 24px; color: var(--db-olive); }

/* — Ilość + CTA — */
.single-product div.product form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 6px 0 0 !important; }
.single-product div.product form.cart .quantity { display: flex; align-items: center; border: 1px solid var(--db-border); border-radius: 3px; overflow: hidden; margin: 0 !important; float: none !important; }
.single-product div.product form.cart .quantity .qty { border: none; background: var(--db-bg-section); width: 64px; height: 100%; min-height: 52px; text-align: center; font-family: var(--db-font-mono); font-weight: 600; font-size: 15px; color: var(--db-text); }
/* WSK-7 (K-07): stepper ± na PDP — przyciski ≥44px, spójne z ramką .quantity (JS: product.js). */
.single-product div.product form.cart .quantity .db-qtybtn { flex: none; width: 44px; min-height: 52px; border: none; background: var(--db-bg-section); color: var(--db-text); font-family: var(--db-font-mono); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.single-product div.product form.cart .quantity .db-qtybtn:hover { background: var(--db-border); }
.single-product div.product form.cart .quantity .db-qtybtn--minus { border-right: 1px solid var(--db-border); }
.single-product div.product form.cart .quantity .db-qtybtn--plus { border-left: 1px solid var(--db-border); }
/* WSK-7 (K-07): 16px anty-zoom iOS na quantity (mobile). */
@media (max-width: 1023.98px) { .single-product div.product form.cart .quantity .qty { font-size: 16px; } }
.single-product div.product form.cart .single_add_to_cart_button { flex: 1; font-size: 15px !important; font-weight: 800 !important; letter-spacing: 0.05em; padding: 16px !important; }
.db-pp__express { flex-basis: 100%; border: none; background: var(--db-ink); color: var(--db-ecru); font-family: var(--db-font-head); font-weight: 800; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; padding: 14px; border-radius: 3px; cursor: pointer; }
.db-pp__express:hover { background: #2C2D22; } /* hover z makiety (Karta produktu.dc.html) */

/* — Przyciski wtórne — */
.db-pp__secondary { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.db-pp__project { display: block; text-align: center; border: 1px solid var(--db-olive); background: transparent; color: var(--db-olive) !important; font-family: var(--db-font-head); font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; padding: 13px; border-radius: 3px; text-decoration: none; }
.db-pp__project:hover { background: var(--db-fill); color: var(--db-ecru) !important; }
.db-pp__askbtn { display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--db-border); background: var(--db-bg-card); color: var(--db-text) !important; font-family: var(--db-font-head); font-weight: 700; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 13px; border-radius: 3px; text-decoration: none; }
.db-pp__askbtn:hover { border-color: var(--db-olive); color: var(--db-olive) !important; }
.db-ask-btn { margin-top: 6px; }

/* — Lista zaufania — */
.db-pp__trust { list-style: none; margin: 10px 0 0; padding: 14px 0 0; border-top: 1px solid var(--db-border); display: flex; flex-direction: column; gap: 9px; }
.db-pp__trust li { display: flex; align-items: center; gap: 10px; font-family: var(--db-font-mono); font-size: 12px; color: var(--db-text-muted); margin: 0; }
.db-pp__trust li { font-size: 12.5px; color: var(--db-text); }
.db-pp__trust .db-ui-ico { width: 24px; height: 24px; }
.db-pp__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--db-text-muted); flex: none; }
.db-pp__dot--ok { background: var(--db-success); }

/* — Do pobrania (karta produktu / instrukcja) — */
/* W6: produkt-widmo — komunikat „dostępny na zapytanie" w miejscu ukrytego koszyka */
.db-pp__ask-notice { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 2px; padding: 12px 14px; border: 1px solid var(--db-olive); border-left-width: 3px; border-radius: 3px; background: var(--db-bg-card); }
.db-pp__ask-notice-t { font-family: var(--db-font-head); font-weight: 800; font-size: 13px; color: var(--db-olive); text-transform: uppercase; letter-spacing: 0.04em; }
.db-pp__ask-notice-d { font-family: var(--db-font-mono); font-size: 12px; line-height: 1.5; color: var(--db-text-muted); }

.db-pp__downloads { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--db-border); }
.db-pp__downloads-h { font-family: var(--db-font-head); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--db-text-muted); }
.db-pp__dl { display: flex; align-items: center; gap: 9px; font-family: var(--db-font-mono); font-size: 12.5px; color: var(--db-olive) !important; text-decoration: none; }
.db-pp__dl:hover { text-decoration: underline; }

/* W7: pełnoszeroka sekcja „Pliki do pobrania" pod opisem/specyfikacją (zescrapowane dokumenty rayo) */
.db-pp__docs { margin: 8px 0 40px; }
.db-pp__docs-h { font-family: var(--db-font-head); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 16px; }
.db-pp__docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.db-pp__doc { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--db-border); border-radius: 4px; background: var(--db-bg-card); color: var(--db-text) !important; text-decoration: none; transition: border-color .15s; }
.db-pp__doc:hover { border-color: var(--db-olive); }
.db-pp__doc-ic { flex-shrink: 0; color: var(--db-olive); }
.db-pp__doc-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.db-pp__doc-name { font-family: var(--db-font-head); font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.db-pp__doc-size { font-family: var(--db-font-mono); font-size: 11px; color: var(--db-text-muted); }
.db-pp__doc-dl { flex-shrink: 0; color: var(--db-text-muted); }
@media (max-width: 480px) { .db-pp__docs-grid { grid-template-columns: 1fr; } }

/* Łatka 15: sekcja „Bezpieczeństwo produktu (GPSR)” w HTML karty (inc/gpsr.php) */
.db-pp__gpsr { margin: 8px 0 40px; padding: 16px 18px; border: 1px solid var(--db-border); border-radius: 4px; background: var(--db-bg-card); }
.db-pp__gpsr-h { font-family: var(--db-font-head); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 12px; }
.db-pp__gpsr-det > summary { cursor: pointer; }
.db-pp__gpsr-det > summary .db-pp__gpsr-h { display: inline; }
.db-pp__gpsr-det[open] > summary { margin-bottom: 12px; }
.db-pp__gpsr-dl { margin: 0; display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 10px 18px; }
.db-pp__gpsr-dl dt { font-weight: 700; }
.db-pp__gpsr-dl dd { margin: 0; overflow-wrap: anywhere; }
.db-pp__gpsr-dl dd p { margin: 0 0 .5em; }
@media (max-width: 600px) { .db-pp__gpsr-dl { grid-template-columns: 1fr; gap: 4px; } .db-pp__gpsr-dl dd { margin-bottom: 10px; } }

/* — Udostępnij — */
.db-pp__share { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.db-pp__share-l { font-family: var(--db-font-mono); font-size: 10px; color: var(--db-text-muted); letter-spacing: 0.1em; }
.db-pp__share a { width: 34px; height: 34px; border: 1px solid var(--db-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--db-text-muted); background: var(--db-bg-card); text-decoration: none; }
.db-pp__share a:hover { border-color: var(--db-olive); color: var(--db-olive); }
.db-pp__copy { display: flex; align-items: center; gap: 7px; border: 1px solid var(--db-border); border-radius: 17px; background: var(--db-bg-card); padding: 8px 14px; font-family: var(--db-font-mono); font-size: 10.5px; color: var(--db-text-muted); cursor: pointer; }
.db-pp__copy:hover { border-color: var(--db-olive); color: var(--db-olive); background: var(--db-bg-card); } /* background jawnie: base.css button:hover */

/* — Zakładki (Opis / Specyfikacja / Opinie) — */
.woocommerce-tabs { margin-top: 48px !important; }
.woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--db-border) !important; }
.woocommerce-tabs ul.tabs li a { font-family: var(--db-font-head); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--db-text-muted) !important; }
.woocommerce-tabs ul.tabs li.active a { color: var(--db-text) !important; box-shadow: inset 0 -2px 0 var(--db-olive); }
.woocommerce-Tabs-panel table.shop_attributes { font-family: var(--db-font-mono); font-size: 12.5px; }
.woocommerce-Tabs-panel table.shop_attributes th { color: var(--db-text-muted); font-weight: 500; text-transform: none; }

/* opis wzbogacony z importu */
.woocommerce-Tabs-panel .db-intro { font-size: 15px; line-height: 1.6; color: var(--db-text); border-left: 3px solid var(--db-olive); padding-left: 16px; }
.woocommerce-Tabs-panel .db-faq h3 { font-size: 15px; margin: 18px 0 6px; }

/* — MM-07: „Dostawa i zwroty" (treść zakładki) — */
.db-pp__steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: none; }
.db-pp__steps li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 8px; border: 1px solid var(--db-border); border-radius: var(--db-radius); background: var(--db-bg-section); margin: 0; position: relative; }
.db-pp__steps .db-ui-ico { width: 34px; height: 34px; margin-bottom: 4px; }
.db-pp__stepn { font-family: var(--db-font-head); font-weight: 700; font-size: 14px; color: var(--db-text); }
.db-pp__stepo { font-size: 12.5px; line-height: 1.35; color: var(--db-text-muted); }
@media (max-width: 640px) { .db-pp__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .db-pp__steps .db-ui-ico { width: 28px; height: 28px; } }
.db-pp__delivery { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.db-pp__delivery li { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.5; color: var(--db-text); margin: 0; }
.db-pp__delivery li::before { content: "✓"; color: var(--db-olive); font-weight: 700; flex: none; }
.db-pp__delivery-more { margin: 14px 0 0; font-family: var(--db-font-head); font-weight: 700; font-size: 12.5px; }
.db-pp__delivery-more a { color: var(--db-olive) !important; text-decoration: none; }

/* — MM-07: akordeony zakładek na mobile (nagłówki wstrzyknięte przez product.js) —
   Domyślnie ukryte (desktop = zakładki WC); widoczne dopiero w trybie mobilnym. */
.db-acc__h { display: none; }
@media (max-width: 1023.98px) {
  .woocommerce-tabs.db-acc { margin-top: 28px !important; }
  .woocommerce-tabs.db-acc ul.tabs { display: none; }
  .db-acc__h { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 14px 2px; background: transparent; border: none; border-top: 1px solid var(--db-border); font-family: var(--db-font-head); font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--db-text); cursor: pointer; text-align: left; }
  .db-acc__h::after { content: "＋"; font-weight: 400; font-size: 18px; color: var(--db-olive); flex: none; }
  .db-acc__h[aria-expanded="true"]::after { content: "－"; }
  .woocommerce-tabs.db-acc .woocommerce-Tabs-panel { display: none !important; padding: 2px 2px 18px; }
  .woocommerce-tabs.db-acc .woocommerce-Tabs-panel.db-acc__open { display: block !important; }
}

/* — Sticky pasek ceny+CTA (po 620 px) — */
.db-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; background: var(--db-bg); border-top: 1px solid var(--db-border); box-shadow: 0 -10px 30px rgba(27,28,19,0.12); }
.db-sticky[hidden] { display: none; }
.db-sticky__wrap { max-width: var(--db-container); margin: 0 auto; padding: 10px 32px; display: flex; align-items: center; gap: 18px; }
.db-sticky__img { width: 46px; height: 46px; object-fit: contain; background: var(--db-photo-bg); border: 1px solid var(--db-border); border-radius: 4px; flex: none; }
.db-sticky__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--db-font-head); font-weight: 700; font-size: 13.5px; color: var(--db-text); }
.db-sticky__price { font-family: var(--db-font-mono); font-weight: 600; font-size: 17px; white-space: nowrap; color: var(--db-text); }
.db-sticky__price--ask { font-family: var(--db-font-head); font-weight: 800; font-size: 14px; color: var(--db-olive); }
.db-sticky__cta { flex: none; text-decoration: none; background: var(--db-cta); color: #FFF7EE !important; font-family: var(--db-font-head); font-weight: 800; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; padding: 12px 26px; border-radius: 3px; }
.db-sticky__cta:hover { background: var(--db-cta-hov); }
.db-sticky__cta--ask { background: var(--db-fill); }
.db-sticky__cta--ask:hover { background: var(--db-fill-hov); }
/* W1: kanoniczny próg nav-mobile (1023.98) — dolny pasek nawigacji istnieje ≤1023.98,
   więc sticky CTA podnosi się nad niego dokładnie na tej granicy (MM-08 geometria:
   wysokość bottombara + safe-area). */
@media (max-width: 1023.98px) {
  .db-sticky { bottom: calc(58px + env(safe-area-inset-bottom)); }
  .db-sticky__wrap { padding: 8px 12px; gap: 10px; }
  .db-sticky__img { display: none; }
}

/* — Responsywność (W1: próg kanoniczny 1023.98) — */
@media (max-width: 1023.98px) {
  .single-product div.product { grid-template-columns: 1fr; gap: 24px; }
  .single-product .product_title { font-size: 24px; }
  .single-product div.product p.price .woocommerce-Price-amount { font-size: 28px; }
  /* miniatury galerii: poziomy scroll zamiast 5-kolumnowej siatki (dluga galeria = 10 rzedow na telefonie) */
  .woocommerce-product-gallery .flex-control-thumbs { display: flex; grid-template-columns: none; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .woocommerce-product-gallery .flex-control-thumbs li { flex: 0 0 64px; scroll-snap-align: start; }
}

/* — CTA rat (design v3 §11: trzeci przycisk, oliwkowy) — */
.db-pp__ratybtn { flex-basis: 100%; border: none; background: var(--db-fill); color: var(--db-ecru); font-family: var(--db-font-head); font-weight: 800; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; padding: 14px; border-radius: 3px; cursor: pointer; }
.db-pp__ratybtn:hover { background: var(--db-olive-dark, #4A4F2A); }
.db-pp__ratybtn strong { font-family: var(--db-font-mono); font-weight: 600; }

/* — Galeria (v3 pkt 9): zdjęcia contain + wycentrowane, strzałki, aktywna miniatura — */
.single-product div.product .woocommerce-product-gallery__image img { object-fit: contain; width: 100%; background: var(--db-photo-bg, #fff); }
.single-product .flex-direction-nav { position: absolute; inset: 0; pointer-events: none; margin: 0; list-style: none; z-index: 5; }
.single-product .flex-direction-nav li { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: auto; }
.single-product .flex-direction-nav .flex-nav-prev { left: 8px; }
.single-product .flex-direction-nav .flex-nav-next { right: 8px; }
.single-product .flex-direction-nav a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(27, 28, 19, 0.55); color: var(--db-ecru) !important; font-size: 24px; line-height: 1; text-decoration: none; transition: background 200ms; }
.single-product .flex-direction-nav a:hover { background: rgba(27, 28, 19, 0.8); }
.single-product .flex-control-thumbs img { border: 2px solid transparent; border-radius: 3px; transition: border-color 200ms; cursor: pointer; }
.single-product .flex-control-thumbs img.flex-active { border-color: var(--db-olive); }

/* — MM-09: licznik pozycji galerii „2/18" (mobile) + strzałki ≥44px — */
.db-gallery-count { display: none; position: absolute; top: 10px; right: 10px; z-index: 6; background: rgba(27,28,19,0.72); color: var(--db-ecru); font-family: var(--db-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; padding: 3px 10px; border-radius: 999px; pointer-events: none; }
@media (max-width: 1023.98px) {
  .db-gallery-count { display: block; }
  .single-product .flex-direction-nav a { width: 44px; height: 44px; font-size: 26px; }
}

/* — Panel „Raty 5×0%" (modal, wzorzec .db-garage) — */
.db-raty { position: fixed; inset: 0; z-index: 1250; display: flex; align-items: center; justify-content: center; }
.db-raty[hidden] { display: none; }
.db-raty__bg { position: absolute; inset: 0; background: rgba(27,28,19,0.55); }
.db-raty__panel { position: relative; width: 92vw; max-width: 420px; background: var(--db-bg-card, #fff); border-radius: 10px; padding: 20px; box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.db-raty__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.db-raty__t { font-family: var(--db-font-head); font-weight: 900; font-size: 16px; color: var(--db-text); }
.db-raty__x { border: none; background: transparent; font-size: 17px; cursor: pointer; color: var(--db-text); flex: none; }
.db-raty__calc { font-family: var(--db-font-mono); font-size: 20px; color: var(--db-text); margin: 14px 0 4px; }
.db-raty__calc strong { color: var(--db-cta); }
.db-raty__star { color: var(--db-cta); }
.db-raty__note { font-size: 11.5px; color: var(--db-text-muted); margin: 0 0 14px; }
.db-raty__info { font-size: 13px; color: var(--db-text); line-height: 1.5; margin: 0 0 12px; padding-top: 12px; border-top: 1px solid var(--db-border); }
.db-raty__link { display: inline-block; font-family: var(--db-font-head); font-weight: 700; font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--db-olive) !important; text-decoration: none; }
.db-raty__link:hover { text-decoration: underline; }

/* — Opinie klientów (moduł prod_opinie): sekcja pod zakładkami/related, WC reviews — */
.db-pp__reviews { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--db-border); max-width: 100%; }
.db-pp__reviews-h { font-family: var(--db-font-head); font-weight: 900; font-size: 22px; text-transform: uppercase; letter-spacing: -0.01em; color: var(--db-text); margin: 0 0 20px; }
.db-pp__reviews .woocommerce-Reviews-title { display: none; } /* natywny naglowek WC (Opinie/Recenzje) - dubluje nasz .db-pp__reviews-h */
.db-pp__reviews #review_form_wrapper,
.db-pp__reviews .comment-form input[type="text"],
.db-pp__reviews .comment-form input[type="email"],
.db-pp__reviews .comment-form textarea { max-width: 100%; box-sizing: border-box; }
/* Systemowe zaciśnięcie natywnego markupu recenzji WC — koniec z rozjazdem sekcji opinii. */
.db-pp__reviews, .db-pp__reviews * { min-width: 0; }
.db-pp__reviews input, .db-pp__reviews textarea, .db-pp__reviews select { max-width: 100%; box-sizing: border-box; }
.db-pp__reviews .comment-form-author, .db-pp__reviews .comment-form-email { float: none; width: 100%; }
.db-pp__reviews .commentlist, .db-pp__reviews .comment-form, .db-pp__reviews li, .db-pp__reviews p { max-width: 100%; overflow-wrap: anywhere; }
.db-pp__reviews img { max-width: 100%; height: auto; }
@media (max-width: 600px) { .db-pp__reviews .commentlist .children { padding-left: 12px; } }

/* — Drzewko na karcie produktu: 3-kolumnowy grid (v3 §11; desktop) — */
.db-pp-tree { display: none; }
@media (min-width: 1024px) {
  body.db-has-tree.single-product div.product { grid-template-columns: 230px minmax(0, 1fr) minmax(0, 0.9fr); gap: 32px; }
  body.db-has-tree .db-pp-tree { display: block; position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow: auto; }
}

/* Dopisek „zdjęcie poglądowe serii” + FAQ z meta _db_faq (2026-09-25) */
.db-pp__gallery-note { margin: 8px 0 0; font-family: var(--db-font-mono); font-size: 11.5px; color: #6B6B56; } /* leży na białym tle galerii w obu motywach */
.db-pp__faq { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--db-border); }
.db-pp__faq-h { font-family: var(--db-font-head); font-weight: 800; font-size: 18px; margin: 0 0 10px; }
.db-pp__faq-i { border-bottom: 1px solid var(--db-border); padding: 8px 0; }
.db-pp__faq-i summary { cursor: pointer; font-weight: 600; font-size: 14.5px; }
.db-pp__faq-i p { margin: 8px 0 2px; font-size: 14px; line-height: 1.55; color: var(--db-text-muted); }

.db-pp__fitnote { margin: 8px 0; padding: 9px 12px; border-left: 3px solid var(--db-warn); background: var(--db-bg-section); font-size: 13.5px; color: var(--db-text); }

/* CLS karty (RANKSTER, pomiar 15.10 wieczór: 0,118). Do startu galerii WooCommerce trzyma ją z opacity:0, a zdjęcia stoją jedno
   pod drugim (1370 px na telefonie), a w chwili startu flexslidera na moment nawet 2800 px. Blok z nazwą i ceną skakał wtedy o ~1000 px.
   Na czas startu: obszar zdjęć przycięty do wysokości pierwszego zdjęcia (4:3 szerokości galerii, jednostka cqw), a na telefonie
   miejsce na rząd miniatur (116 px = odstęp 26 + miniatury 90; 90, gdy odstęp już daje .flex-viewport). Po starcie bez zmian. */
.woocommerce-product-gallery { container-type: inline-size; }
.woocommerce-product-gallery[style*="opacity: 0"]:has(.woocommerce-product-gallery__image:nth-child(2)) .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery[style*="opacity: 0"]:has(.woocommerce-product-gallery__image:nth-child(2)) .flex-viewport { max-height: 75cqw; overflow: hidden; }
@media (max-width: 1023.98px) {
  .woocommerce-product-gallery[style*="opacity: 0"]:has(.woocommerce-product-gallery__image:nth-child(2)):not(:has(.flex-viewport)) { padding-bottom: 116px; }
  .woocommerce-product-gallery[style*="opacity: 0"]:has(.woocommerce-product-gallery__image:nth-child(2)):has(.flex-viewport):not(:has(.flex-control-nav)) { padding-bottom: 90px; }
}