/*
 * Mazur SPA — style motywu.
 * Wszystkie wartości projektowe pochodzą z css/tokens.css (var(--...)).
 *
 * Spis sekcji:
 *   1. Baza / reset
 *   2. Topbar + nagłówek + wyszukiwarka
 *   3. Nawigacja (mega menu) + menu mobilne
 *   4. Pasek USP
 *   5. Sekcje, nagłówki, separatory
 *   6. Karty produktów / kategorii / bloga
 *   7. Slider hero
 *   8. Sekcje treściowe (seorow), opinie, FAQ, trust
 *   9. Stopka
 *  10. Elementy pływające (sticky, to-top), paginacja, breadcrumby
 *  11. Formularze, przyciski
 *  12. WordPress / WooCommerce podstawy
 */

/* ═══ 1. Baza ═══ */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body {
	margin: 0;
	font-family: var(--font);
	color: var(--ink);
	background: var(--surface);
	line-height: var(--lh);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--container-pad); }
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important;
	width: 1px; word-wrap: normal !important;
}

/* ═══ 2. Topbar + nagłówek ═══ */
.topbar { background: var(--navy-d); color: var(--topbar-text); font-size: var(--fs-13); }
.topbar .container { display: flex; justify-content: space-between; align-items: center; height: var(--topbar-h); }
.topbar a { color: var(--topbar-text); }
.topbar .fa-solid { margin-right: var(--sp-1); font-size: var(--fs-12); }
.tb-contact { display: flex; gap: var(--sp-4); align-items: center; min-width: 0; }
.tb-trust { display: flex; gap: var(--sp-4); align-items: center; }

.header { border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 41; }
.header .container { display: flex; align-items: center; gap: var(--sp-8); height: var(--header-h); }
.logo img { height: 66px; width: auto; }

/* Uwaga: selektor musi być zescope'owany do .header — WordPress nadaje
   body klasę "search" na stronie wyników wyszukiwania. */
.header .search { flex: 1; display: flex; border: 2px solid var(--navy); border-radius: var(--r-m); overflow: hidden; }
.header .search input { flex: 1; border: 0; padding: 11px 14px; font-size: var(--fs-15); outline: none; font-family: var(--font); min-width: 0; }
.header .search button { background: var(--navy); color: var(--surface); border: 0; padding: 0 18px; font-size: var(--fs-16); cursor: pointer; }

.hactions { display: flex; gap: 26px; align-items: center; font-size: var(--fs-12); color: var(--muted); flex-shrink: 0; }
.hactions .ha { display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; }
.hactions .ha b { color: var(--ink); font-size: var(--fs-13); }
.hactions .ico { font-size: 22px; color: var(--navy); }
.hactions .count {
	position: absolute; top: -6px; right: 2px; background: var(--accent); color: var(--surface);
	border-radius: var(--r-round); font-size: 10px; width: 16px; height: 16px;
	display: flex; align-items: center; justify-content: center;
}

/* ═══ 3. Nawigacja ═══ */
.nav { background: var(--navy); position: sticky; top: var(--header-h); z-index: 40; box-shadow: var(--sh-nav); }
.nav .container { display: flex; justify-content: space-between; }
.nav a { position: relative; color: var(--surface); padding: 15px 10px; font-size: var(--fs-14); font-weight: 600; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.nav a.has-mega::after { content: "\f078"; font: var(--fa-font-solid); font-size: 10px; opacity: .8; transition: transform var(--tr-fast); }
/* Odstępy między pozycjami (space-between) należą po połowie do sąsiadów: main.js mierzy odstęp i wpisuje go
   jako --np-l/--np-r, pozycja dostaje go jako padding. Cały pasek reaguje na najechanie, dropdown nie gaśnie
   w drodze do kolejnej pozycji. Stan hover to podkreślenie pod samym tekstem (bez strzałki), wjeżdżające
   z opacity 0 — tło kafelka odpadło, bo skrajne pozycje mają padding tylko z jednej strony i tekst
   siedział przy krawędzi podświetlenia. Dropdown wyrównany do tekstu, tak jak podkreślenie. */
.nav-item { position: relative; display: flex; padding: 0 var(--np-r, 0) 0 var(--np-l, 0); }
.nav-item:hover > a.has-mega::after { transform: rotate(180deg); }
.nav a::before {
	content: ""; position: absolute; left: 10px; right: 10px; bottom: 9px; height: 2px; border-radius: 2px;
	background: var(--surface); opacity: 0; transform: translateY(4px);
	transition: opacity var(--tr-fast), transform var(--tr-fast);
}
.nav a.has-mega::before { right: 26px; } /* strzałka 10px + odstęp 6px + padding 10px */
.nav-item:hover > a::before, .nav-item:focus-within > a::before, .nav-item.touch-open > a::before { opacity: 1; transform: none; }

.dropdown {
	position: absolute; top: 100%; left: var(--np-l, 0); background: var(--surface); color: var(--ink);
	border: 1px solid var(--line); border-top: 3px solid var(--accent);
	border-radius: 0 0 var(--r-l) var(--r-l); box-shadow: var(--sh-drop);
	padding: 18px 20px; opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: .16s; z-index: 60;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown, .nav-item.touch-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { color: var(--link-drop); padding: 7px 0; font-size: 13.5px; font-weight: 500; display: block; white-space: normal; line-height: 1.35; }
.dropdown.mega { max-width: min(1100px, calc(100vw - 40px)); }
.dropdown a:hover { color: var(--navy); background: none; }
.dropdown.simple { min-width: 250px; }
.dropdown.right { left: auto; right: var(--np-r, 0); }
.dropdown.mega { display: grid; gap: 6px 34px; }
.dropdown .col a.head { color: var(--navy); font-weight: 700; border-bottom: 1px solid var(--line); padding-bottom: 7px; margin-bottom: 6px; }
.dropdown .col h6 {
	margin: 0 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
	color: var(--navy); font-weight: 700; border-bottom: 1px solid var(--line); padding-bottom: 7px;
}
.dropdown .col a.all { color: var(--accent); font-weight: 700; }

/* Menu mobilne */
.menu-btn { display: none; border: 1px solid var(--line); background: var(--surface); color: var(--navy); width: 44px; height: 44px; border-radius: var(--r-m); font-size: 20px; cursor: pointer; flex-shrink: 0; }
.m-overlay { position: fixed; inset: 0; background: rgba(12, 28, 60, .5); z-index: 98; opacity: 0; visibility: hidden; transition: .2s; }
.m-overlay.open { opacity: 1; visibility: visible; }
.m-menu {
	position: fixed; top: 0; left: 0; bottom: 0; width: min(340px, 88vw); background: var(--surface); z-index: 99;
	transform: translateX(-105%); transition: transform var(--tr-slow); display: flex; flex-direction: column; box-shadow: var(--sh-menu);
}
.m-menu.open { transform: translateX(0); }
.m-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--navy); color: var(--surface); }
.m-head b { font-size: var(--fs-15); }
.m-head button { background: none; border: 0; color: var(--surface); font-size: 22px; line-height: 1; cursor: pointer; }
.m-nav { flex: 1; overflow-y: auto; padding: 6px 0; }
.m-nav > a { display: block; padding: 13px 18px; font-weight: 700; font-size: 14.5px; color: var(--ink); border-bottom: 1px solid var(--line); }
.m-nav details { border-bottom: 1px solid var(--line); }
.m-nav summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; font-weight: 700; font-size: 14.5px; cursor: pointer; color: var(--ink); }
.m-nav summary::-webkit-details-marker { display: none; }
.m-nav summary::after { content: "\f078"; font: var(--fa-font-solid); color: var(--muted); font-size: 11px; transition: var(--tr-fast); }
.m-nav details[open] summary { color: var(--navy); }
.m-nav details[open] summary::after { transform: rotate(180deg); }
.m-nav details a { display: block; padding: 9px 18px 9px 28px; font-size: 13.5px; color: var(--link-drop); }
.m-nav details a.m-sub { padding-left: 40px; font-size: var(--fs-13); color: var(--muted); }
.m-nav details a.m-all { font-weight: 700; color: var(--navy); }
/* Grupa podkategorii (np. Sauny → Sauny parowe…): zwijana, z licznikiem; jej linki na "gałęzi" po lewej. */
.m-nav details.m-group { border-bottom: 0; }
.m-nav details.m-group > summary { padding: 9px 18px 9px 28px; font-size: 13.5px; font-weight: 600; color: var(--link-drop); }
.m-nav details.m-group > summary::after { font-size: 10px; }
.m-nav details.m-group[open] > summary { color: var(--navy); font-weight: 700; }
.m-nav .m-count { margin-left: auto; margin-right: 10px; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--bg); border-radius: var(--r-pill); padding: 1px 7px; }
.m-nav .m-tree { margin: 0 0 8px 28px; border-left: 2px solid var(--line); }
.m-nav .m-tree a, .m-nav details .m-tree a.m-sub { padding: 8px 18px 8px 14px; font-size: var(--fs-13); color: var(--link-drop); }
.m-nav .m-tree a.m-all { color: var(--navy); font-weight: 700; }
.m-contact { border-top: 1px solid var(--line); padding: 14px 18px; font-size: 13.5px; }
.m-contact a { display: block; padding: var(--sp-1) 0; font-weight: 700; color: var(--navy); }

/* ═══ 4. Pasek USP ═══ */
.usp { background: var(--bg); border-bottom: 1px solid var(--line); }
.usp .container { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--container-pad); flex-wrap: wrap; }
.usp .u { display: flex; align-items: center; gap: 9px; font-size: var(--fs-13); font-weight: 600; color: var(--ink); }
.usp .u .ei { font-size: 18px; color: var(--navy); }
.usp .u small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; }

/* ═══ 5. Sekcje ═══ */
.section-h { color: var(--navy); font-size: var(--fs-26); margin: var(--sp-13) 0 var(--sp-5); }
.sechead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); margin: var(--sp-13) 0 var(--sp-5); flex-wrap: wrap; }
.sechead .section-h { margin: 0; }
.sechead .more { color: var(--accent); font-weight: 700; font-size: var(--fs-14); white-space: nowrap; }
.sechead .more:hover { text-decoration: underline; }
.sep { border: 0; height: 1px; background: var(--sep); margin: var(--sp-13) 0; }
.sep + .section-h, .sep + .sechead { margin-top: 0; }

/* ═══ 6. Karty ═══ */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cat { border: 1px solid var(--line); border-radius: var(--r-2xl); overflow: hidden; background: var(--surface); transition: var(--tr-med); display: flex; flex-direction: column; }
.cat:hover { transform: translateY(-3px); box-shadow: var(--sh-card); border-color: var(--card-hover-line); }
.cat .im { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg); flex: none; }
.cat .im img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tr-slow); }
.cat:hover .im img { transform: scale(1.04); }
.cat b { display: block; text-align: center; padding: 13px 12px; color: var(--navy); font-size: var(--fs-14); }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.card, ul.products li.product {
	border: 1px solid var(--line); border-radius: var(--r-2xl); overflow: hidden; position: relative;
	background: var(--surface); transition: var(--tr-med); display: flex; flex-direction: column;
	list-style: none; margin: 0;
}
.card:hover, ul.products li.product:hover { box-shadow: var(--sh-card); transform: translateY(-3px); border-color: var(--card-hover-line); }
.card-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.badge { font-size: var(--fs-11); font-weight: 700; padding: 4px 9px; border-radius: var(--r-s); color: var(--surface); min-width: 92px; text-align: center; }
.badge-hot { background: var(--stock); }
.badge-sale { background: var(--danger); }
/* Paleta etykiet ze słownika (Produkty → Etykiety) — kolory badge'y z makiety */
.badge-navy { background: var(--navy); }
.badge-green { background: var(--stock); }
.badge-blue { background: var(--accent); }
.badge-amber { background: var(--order); }
.badge-red { background: var(--danger); }
.badge-black { background: var(--black); }

.card-fav {
	position: absolute; top: 12px; right: 12px; z-index: 2; border: 1px solid var(--line); background: var(--surface);
	width: 36px; height: 36px; border-radius: var(--r-round); font-size: var(--fs-16); color: var(--accent);
	cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.card-fav:hover { background: var(--accent); color: var(--surface); }
.card-fav .bi-heart-fill { color: var(--danger); }
.card-fav:hover .bi-heart-fill { color: var(--surface); }

.card-imgwrap { background: var(--surface); padding: 18px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.card-imgwrap img { max-height: 230px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.grid4 .card-imgwrap img { max-height: 200px; }
.card-body { padding: 0 16px 16px; display: flex; flex-direction: column; flex: 1; }
.card-rating { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); margin-bottom: 6px; min-height: 18px; }
.stars { color: var(--star); letter-spacing: 1px; }
.rating-count { color: var(--muted); }
.card-title { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.35; min-height: 40px; }
.card-title:hover { color: var(--navy); }

.chips { display: flex; flex-wrap: wrap; gap: 7px 15px; margin: 12px 0 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.chip { font-size: var(--fs-13); color: var(--text-soft); background: none; border: 0; padding: 0; display: flex; align-items: center; gap: 5px; }
.chip .ic { display: inline-flex; width: 14px; height: 14px; flex: 0 0 auto; color: var(--navy); }
.chip .ic svg, .chip .ic img { width: 100%; height: 100%; display: block; }
.chip .ic svg *:not([fill="none"]) { fill: currentColor; }
.chip .ic svg [stroke]:not([stroke="none"]) { stroke: currentColor; }

.card-price-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-3); margin-top: auto; }
.card-price-wrap { margin-top: auto; }
.card-price { font-size: var(--fs-21); font-weight: 800; color: var(--navy); }
.card-price-old { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-13); color: var(--muted); }
.discount-percentage { background: var(--danger); color: var(--surface); font-size: var(--fs-11); font-weight: 700; border-radius: var(--r-xs); padding: 1px 6px; }

.pill { font-size: 11.5px; font-weight: 700; padding: 4px 0 4px 15px; position: relative; white-space: nowrap; display: inline-block; }
.pill::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: var(--r-round); }
.pill-stock { color: var(--stock); }
.pill-stock::before { background: var(--stock); }
.pill-order { color: var(--order); }
.pill-order::before { background: var(--order); }
.pill-out { color: var(--danger); }
.pill-out::before { background: var(--danger); }

.card-cta { display: flex; gap: var(--sp-2); margin: 14px 0 6px; }

/* Karty bloga */
.blogcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.blog-col .blogcards { grid-template-columns: repeat(2, 1fr); } /* na blogu obok sidebara 2 kolumny jak w makiecie */
.bcard { border: 1px solid var(--line); border-radius: var(--r-2xl); overflow: hidden; background: var(--surface); transition: var(--tr-med); display: flex; flex-direction: column; }
.bcard:hover { transform: translateY(-3px); box-shadow: var(--sh-card); border-color: var(--card-hover-line); }
.bcard .im { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg); display: block; }
.bcard .im img { width: 100%; height: 100%; object-fit: cover; }
.bcard .bd { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.bcard .meta { font-size: var(--fs-12); color: var(--muted); margin-bottom: var(--sp-2); }
.bcard .meta b { color: var(--accent); text-transform: uppercase; letter-spacing: .04em; font-size: 11.5px; }
.bcard h3 { margin: 0 0 var(--sp-2); font-size: 15.5px; color: var(--navy); line-height: 1.35; }
.bcard p { font-size: var(--fs-13); color: var(--muted); margin: 0 0 var(--sp-3); }
.bcard .more { color: var(--navy); font-weight: 700; font-size: var(--fs-13); margin-top: auto; }

/* ═══ 7. Slider hero ═══ */
.slider { position: relative; margin: var(--sp-6) 0 6px; border: 1px solid var(--line); border-radius: var(--r-2xl); overflow: hidden; background: var(--surface); }
.slides { display: flex; transition: transform .45s ease; }
.slide { flex: 0 0 100%; display: grid; grid-template-columns: 1fr 1.35fr; min-height: 430px; }
.slide .txt { padding: 46px 24px 56px 46px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.slide .k { font-size: 11.5px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--sp-3); }
.slide h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-34); line-height: 1.15; color: var(--navy); }
.slide p { margin: 0 0 22px; font-size: 15.5px; color: var(--text-soft); max-width: 460px; }
.slide .cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.slide .cta a { font-weight: 700; padding: 13px 26px; border-radius: var(--r-m); font-size: 14.5px; transition: var(--tr-fast); }
.slide .cta .b1 { background: var(--accent); color: var(--surface); }
.slide .cta .b1:hover { background: var(--accent-d); }
.slide .cta .b2 { border: 1.5px solid var(--navy); color: var(--navy); padding: 11.5px 24.5px; }
.slide .cta .b2:hover { background: var(--navy); color: var(--surface); }
.slide .im { background: var(--bg); }
.slide .im img { width: 100%; height: 100%; object-fit: cover; }
.slider .ctrl { position: absolute; right: 16px; bottom: 14px; display: flex; gap: var(--sp-2); z-index: 6; }
.slider .ctrl button {
	width: 42px; height: 42px; border-radius: var(--r-round); background: var(--surface); border: 1px solid var(--line);
	color: var(--navy); font-size: var(--fs-15); cursor: pointer; box-shadow: var(--sh-float); transition: var(--tr-fast);
}
.slider .ctrl button:hover { background: var(--navy); color: var(--surface); }
.slider .dots { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; gap: var(--sp-2); justify-content: center; z-index: 5; }
.slider .dots button { width: 10px; height: 10px; border-radius: 5px; border: 0; background: var(--dot); cursor: pointer; padding: 0; transition: .2s; }
.slider .dots button.on { background: var(--navy); width: 26px; }

/* ═══ 8. Sekcje treściowe ═══ */
.seorow { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; margin: 38px 0; }
.seorow.flip .txt { order: 2; }
.seorow .txt h3 { color: var(--navy); font-size: var(--fs-19); margin: 0 0 var(--sp-3); }
.seorow .txt p { color: var(--text-read); margin: 0 0 var(--sp-3); font-size: var(--fs-15); }
.seorow .txt p:last-child { margin-bottom: 0; }
.seorow .pic { border-radius: var(--r-2xl); overflow: hidden; aspect-ratio: 16 / 11; box-shadow: var(--sh-pic); }
.seorow .pic img { width: 100%; height: 100%; object-fit: cover; }
.about-cta { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); flex-wrap: wrap; }
.about-cta a { border-radius: var(--r-m); font-weight: 700; font-size: var(--fs-14); padding: 12px 22px; }
.about-cta a.b1 { background: var(--navy); color: var(--surface); }
.about-cta a.b1:hover { background: var(--navy-d); }
.about-cta a.b2 { border: 1.5px solid var(--navy); color: var(--navy); }
.about-cta a.b2:hover { background: var(--navy); color: var(--surface); }

/* Opinie: prawdziwy widget Trustindex (.home-reviews) ma własny CSS z CDN — nie stylujemy jego klas .ti-*.
   Poniżej tylko awaryjne opinie z ACF (własne klasy .mz-review-*). */
.home-reviews { margin: 0 0 var(--sp-4); }
/* Widget Trustindex przestylowany na karty z makiety: ramka zamiast cienia, inicjał w kolorowym
   kółku (main.js wpisuje data-initial), "Opublikowano na Google" pod nazwiskiem, fonty motywu.
   Selektory z .ti-widget.ti-goog + !important, bo CSS widgetu jest równie szczegółowy. */
.home-reviews .ti-widget.ti-goog, .home-reviews .ti-widget.ti-goog * { font-family: var(--font) !important; }
.home-reviews .ti-widget.ti-goog .ti-review-item .ti-inner {
	border: 1px solid var(--line) !important; border-radius: var(--r-xl) !important; box-shadow: none !important;
	padding: 20px 22px !important; background: var(--surface) !important;
}
.home-reviews .ti-widget.ti-goog .ti-review-header { gap: 12px !important; }
.home-reviews .ti-widget.ti-goog .ti-profile-img {
	width: 44px !important; height: 44px !important; border-radius: 50% !important; background: var(--navy);
	color: var(--surface); display: flex !important; align-items: center; justify-content: center;
	font-weight: 700; font-size: var(--fs-17); overflow: hidden; flex-shrink: 0;
}
.home-reviews .ti-widget.ti-goog .ti-profile-img[data-initial] img { display: none !important; }
.home-reviews .ti-widget.ti-goog .ti-profile-img[data-initial]::before { content: attr(data-initial); }
.home-reviews .ti-widget.ti-goog .ti-name { font-size: var(--fs-14) !important; font-weight: 700 !important; color: var(--ink) !important; }
.home-reviews .ti-widget.ti-goog .ti-date { font-size: var(--fs-12) !important; color: var(--muted) !important; }
/* Jak w makiecie: pod nazwiskiem tylko źródło; data widgetu ("10 miesięcy temu") schowana — przy 4 kartach nie mieści się w wierszu. */
.home-reviews .ti-widget.ti-goog .ti-date::before { content: "Opublikowano na Google"; }
.home-reviews .ti-widget.ti-goog .ti-date > span { display: none !important; }
.home-reviews .ti-widget.ti-goog .ti-platform-icon { width: 20px !important; height: 20px !important; }
.home-reviews .ti-widget.ti-goog .ti-stars { margin: 10px 0 8px !important; }
.home-reviews .ti-widget.ti-goog .ti-review-content { font-size: var(--fs-14) !important; color: var(--text-read) !important; }
.home-reviews .ti-widget.ti-goog .ti-read-more-active { color: var(--accent) !important; font-weight: 600 !important; }
.mz-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mz-review { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 20px 22px; background: var(--surface); }
.mz-review-head { display: flex; align-items: center; gap: var(--sp-3); }
.mz-review-avatar {
	width: 44px; height: 44px; border-radius: var(--r-round); background: var(--navy); color: var(--surface);
	display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-17);
	flex-shrink: 0; overflow: hidden;
}
.mz-review-who { flex: 1; min-width: 0; }
.mz-review-name { font-weight: 700; font-size: var(--fs-14); color: var(--ink); }
.mz-review-date { color: var(--muted); font-size: var(--fs-12); }
.mz-review-stars { color: var(--star); letter-spacing: 2px; font-size: var(--fs-15); margin: 10px 0 8px; }
.mz-review-text { color: var(--text-body); font-size: var(--fs-14); margin: 0; }

/* FAQ */
.faq { max-width: 960px; }
.faq .q { border: 1px solid var(--line); border-radius: var(--r-l); margin-bottom: var(--sp-3); background: var(--surface); transition: border-color var(--tr-fast), box-shadow var(--tr-fast); }
.faq .q[open] { border-color: var(--card-hover-line); box-shadow: 0 6px 18px rgba(16, 60, 131, .07); }
.faq .q summary {
	padding: 20px 22px; font-weight: 700; cursor: pointer; list-style: none;
	display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
	font-size: var(--fs-17); color: var(--ink);
}
.faq .q summary::-webkit-details-marker { display: none; }
.faq .q[open] summary { color: var(--navy); }
.faq .q .ic { flex: 0 0 26px; height: 26px; border: 1.5px solid var(--line); border-radius: var(--r-round); position: relative; transition: .2s; }
.faq .q .ic::before, .faq .q .ic::after { content: ""; position: absolute; background: var(--navy); border-radius: 2px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.faq .q .ic::before { width: 11px; height: 2px; }
.faq .q .ic::after { width: 2px; height: 11px; transition: .2s; }
.faq .q[open] .ic { background: var(--navy); border-color: var(--navy); }
.faq .q[open] .ic::before { background: var(--surface); }
.faq .q[open] .ic::after { opacity: 0; }
.faq .q p { padding: 0 22px 20px; color: var(--text-body); margin: 0; font-size: var(--fs-15); max-width: 760px; }
.faq-section { max-width: 900px; margin: 0 auto; }
.faq-section .section-h { text-align: center; }
.faq-section .faq { max-width: 100%; }

/* Trust strip */
.trust { margin: var(--sp-12) 0; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--surface); }
.trust .t { padding: 26px 16px; border-left: 1px solid var(--line); }
.trust .t:first-child { border-left: 0; }
.trust .t .n { font-size: var(--fs-26); font-weight: 800; color: var(--navy); }
.trust .t .l { font-size: var(--fs-13); color: var(--muted); margin-top: 6px; }

/* ═══ 9. Stopka ═══ */
.footer { background: var(--foot-bg); color: var(--foot-text); margin-top: var(--sp-14); padding: var(--sp-12) 0 var(--sp-10); font-size: 13.5px; }
.footer .container { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 34px; }
.footer h5, .footer .foot-title { color: var(--surface); font-size: 12.5px; margin: 0 0 14px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.footer a { color: var(--foot-text); display: block; padding: var(--sp-1) 0; }
.footer a:hover { color: var(--surface); }
.foot-logo, .woocommerce .foot-logo { height: 76px; width: auto; max-width: 220px; } /* .woocommerce img { height:auto } z rdzenia przebijało samą klasę */
.foot-brand p { color: var(--foot-soft); line-height: 1.6; margin: 14px 0 16px; font-size: var(--fs-13); max-width: 300px; }
.foot-contact { margin: 0 0 16px; }
.foot-contact span { display: block; font-weight: 600; color: var(--surface); font-size: var(--fs-14); padding: 3px 0; }
.foot-contact a { display: inline; padding: 0; color: var(--surface); }
.foot-contact .fa-solid { margin-right: var(--sp-1); color: var(--foot-soft); }
.foot-contact small { color: var(--foot-soft); display: block; margin-top: var(--sp-2); font-weight: 400; font-size: 12.5px; }
.pay { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-top: var(--sp-1); }
.pay img { background: var(--surface); border-radius: 5px; padding: 5px 7px; height: 26px; width: auto; object-fit: contain; }
.footer .foot-col .textwidget a + br { display: none; } /* listy linków — same linki są blokowe; <br> w tekście (dane firmy) zostaje */
.footer .foot-col .textwidget a { display: block; }

.footer-bottom { background: var(--foot-bottom-bg); color: var(--foot-dim); }
.footer-bottom .container { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.footer-bottom p { margin: 0; font-size: 12.5px; }
.footer-bottom p a { color: var(--surface); font-weight: 600; }
.footer-bottom .links { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.footer-bottom .links a { color: var(--foot-dim); font-size: 12.5px; }
.footer-bottom .links a:hover { color: var(--surface); }

/* ═══ 10. Elementy pływające, paginacja, breadcrumby ═══ */
.sticky-help {
	position: fixed; right: 22px; bottom: 22px; background: var(--accent); color: var(--surface);
	border-radius: var(--r-pill); padding: 14px 22px; font-weight: 700; box-shadow: var(--sh-sticky);
	z-index: 50; font-size: var(--fs-14);
}
.to-top {
	position: fixed; right: 22px; bottom: 82px; width: 46px; height: 46px; border-radius: var(--r-round);
	background: var(--surface); border: 1px solid var(--line); color: var(--navy); font-size: var(--fs-17);
	cursor: pointer; box-shadow: var(--sh-float); z-index: 50; display: none;
	align-items: center; justify-content: center; transition: background var(--tr-fast), color var(--tr-fast);
}
.to-top.show { display: flex; }
.to-top:hover { background: var(--navy); color: var(--surface); }

.breadcrumbs { font-size: var(--fs-13); color: var(--muted); margin: var(--sp-4) 0; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--navy); }
.breadcrumbs .breadcrumb_last { color: var(--ink); font-weight: 600; }

/* Paginacja (makieta blog.html). Selektory z ".woocommerce nav.woocommerce-pagination …" celowo
   powtarzają te z woocommerce.css (general) — bez tego arkusz Woo wygrywa specyficznością i na
   archiwum sklepu / recenzjach paginacja dostaje jego domyślny wygląd: inline-block przyklejony do
   siatki (margin 1px), ramka wokół listy, pływające li, chuda czcionka, fioletowa bieżąca strona. */
.woocommerce nav.woocommerce-pagination { text-align: center; }
.woocommerce nav.woocommerce-pagination ul.page-numbers, .pagination ul.page-numbers {
	display: flex; gap: var(--sp-2); list-style: none; margin: var(--sp-8) 0; padding: 0;
	justify-content: center; flex-wrap: wrap; border: 0; white-space: normal;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers::before, .woocommerce nav.woocommerce-pagination ul.page-numbers::after { content: none; } /* clearfix Woo (layout.css) robiłby puste elementy flex */
.woocommerce nav.woocommerce-pagination ul.page-numbers li, .pagination ul.page-numbers li { float: none; display: block; margin: 0; padding: 0; border: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a.page-numbers, .woocommerce nav.woocommerce-pagination ul li span.page-numbers,
a.page-numbers, span.page-numbers {
	display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
	margin: 0; padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-m);
	font-weight: 700; font-size: var(--fs-14); color: var(--ink); background: var(--surface);
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover, .woocommerce nav.woocommerce-pagination ul li a.page-numbers:focus,
a.page-numbers:hover { border-color: var(--navy); color: var(--navy); background: var(--surface); }
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current,
span.page-numbers.current { background: var(--navy); color: var(--surface); border-color: var(--navy); }

/* ═══ 11. Formularze i przyciski ═══ */
.btn, .button, button.button, a.button, input[type="submit"].button {
	display: inline-block; border-radius: var(--r-s); font-size: 13.5px; font-weight: 700; cursor: pointer;
	padding: 11px 12px; text-align: center; border: 1px solid transparent; font-family: var(--font);
	transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
}
.btn-primary, .button.btn-primary { background: var(--navy); color: var(--surface); flex: 1; }
.btn-primary:hover { background: var(--navy-d); color: var(--surface); }
.btn-ghost { background: var(--surface); border: 1px solid var(--line); color: var(--btn-ghost-text); flex: 0 0 46px; padding: 11px 0; font-size: var(--fs-16); }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); }

input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], input[type="number"], textarea, select {
	font-family: var(--font); font-size: var(--fs-14); color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--r-m); padding: 11px 14px; background: var(--surface);
	width: 100%; max-width: 100%;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--navy); }
label { font-size: var(--fs-13); font-weight: 600; color: var(--ink); }

/* ═══ 12. WordPress / WooCommerce podstawy ═══ */
/* Przyciski WooCommerce — zawsze granatowe (nadpisuje fiolet woocommerce-general.css) */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .woocommerce #respond input#submit.alt,
button.single_add_to_cart_button, .woocommerce button.button.alt.disabled {
	background-color: var(--navy); color: var(--surface); border-radius: var(--r-s);
	font-family: var(--font); font-weight: 700;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
button.single_add_to_cart_button:hover {
	background-color: var(--navy-d); color: var(--surface);
}
/* Wymiary jak .btn motywu — rdzeń (.woocommerce button.button) dawał padding .618em 1em i font-size 100%. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
	display: inline-block; padding: 10px 16px; font-size: 13.5px; line-height: 1.25; border: 0; text-align: center;
}
.woocommerce a.button.disabled, .woocommerce button.button.disabled, .woocommerce button.button:disabled, .woocommerce input.button:disabled {
	color: var(--surface); opacity: .5; padding: 10px 16px; font-size: 13.5px;
}
.woocommerce div.product form.cart div.quantity { margin: 0; }
.woocommerce .wc-bacs-bank-details-account-name { font-weight: 600; }
.site-main { display: block; }
/* Tylko pion — skrót `padding: X 0` zerował poziomy padding .container (treść podstron przy krawędzi ekranu). */
.page-content-wrap { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.entry-content h1, .entry-content h2, .entry-content h3 { color: var(--navy); }
.entry-content a { color: var(--accent); font-weight: 600; }
.entry-content a:hover { color: var(--accent-d); }
.entry-content img { border-radius: var(--r-xl); }
.entry-content table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-4); }
/* Spis treści (wtyczka Easy Table of Contents) — jej inline CSS ma własne niebieskie linki; selektory z id, żeby przebić. */
.entry-content div#ez-toc-container { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--sp-4) var(--sp-5); margin: 0 0 var(--sp-6); width: auto; }
.entry-content div#ez-toc-container p.ez-toc-title { color: var(--navy); font-weight: 700; font-size: var(--fs-15); }
.entry-content div#ez-toc-container ul.ez-toc-list a.ez-toc-link { color: var(--navy); font-weight: 500; }
.entry-content div#ez-toc-container ul.ez-toc-list a.ez-toc-link:hover { color: var(--accent); }
.entry-content table th, .entry-content table td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; vertical-align: top; }
.entry-content table th, .entry-content table thead td { background: var(--bg); color: var(--navy); }
/* Sekcje rdzenia Woo pod akordeonem ("Podobne produkty", "Może spodoba się również…") — nagłówek jak .section-h. */
.related > h2, .up-sells > h2 { color: var(--navy); font-size: var(--fs-26); margin: 0 0 var(--sp-5); }
/* Dwie sekcje pod rząd (upsell "Może spodoba się również…" + "Podobne produkty"): odstęp daje tylko akordeon
   przed pierwszą, więc druga dostaje własny margines jak .section-h — bez tego jej nagłówek klei się do kafelków. */
section.products + section.products { margin-top: var(--sp-13); }
/* 404 */
.error-404 { text-align: center; max-width: 620px; margin: 0 auto; padding: var(--sp-10) 0; }
.error-404 .error-code { font-size: 64px; font-weight: 800; color: var(--accent); line-height: 1; margin: 0 0 var(--sp-3); }
.error-404 h1 { color: var(--navy); font-size: 30px; margin: 0 0 var(--sp-3); }
.error-404 p { color: var(--text-soft); font-size: var(--fs-15); margin: 0 0 var(--sp-5); }
.aligncenter { margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 0 var(--sp-4) var(--sp-3) 0; }
.alignright { float: right; margin: 0 0 var(--sp-3) var(--sp-4); }

body.admin-bar .header { top: 32px; }
body.admin-bar .nav { top: calc(var(--header-h) + 32px); }

.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-m);
	background: var(--surface); padding: var(--sp-4) var(--sp-5); margin: var(--sp-4) 0; list-style: none;
	color: var(--ink); font-size: var(--fs-14);
}
.woocommerce-error { border-left-color: var(--danger); }
.woocommerce-message { border-left-color: var(--stock); }
.woocommerce-error li { margin: 0; }

ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.columns-4 ul.products, ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }

/* ═══ 13. Archiwum sklepu ═══ */
/* Nagłówek strony: stały odstęp od tego, co pod nim (sidebar, toolbar, siatka) — makieta nie miała żadnego. */
.pagehead { margin-bottom: var(--sp-5); }
.pagehead h1 { font-size: 30px; margin: var(--sp-2) 0; color: var(--navy); }
.pagehead .lead { color: var(--text-soft); max-width: 900px; font-size: 15.5px; margin: 0 0 6px; }
.term-desc { color: var(--text-soft); max-width: 900px; font-size: var(--fs-15); margin: 0 0 var(--sp-1); }
.term-desc p { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.term-desc.open p { display: block; }
.term-desc .czytaj-wiecej-but { display: none; }
.term-desc.open .czytaj-wiecej-but { display: inline-block; color: var(--navy); font-weight: 700; font-size: 13.5px; margin-top: var(--sp-2); }
.term-more { background: none; border: 0; padding: 0; color: var(--navy); font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: var(--font); }
.card-ask { display: inline-block; background: none; border: 0; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 2px 0; }
.card-ask:hover { color: var(--navy); }

.toolbar {
	display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 0 0 18px; /* górna krawędź równo z panelem filtrów */
	padding: var(--sp-3) var(--sp-4); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-l); flex-wrap: wrap;
}
.toolbar .count { font-weight: 600; }
.toolbar .count p { margin: 0; }
.toolbar .right { display: flex; gap: 10px; align-items: center; }
.toolbar select, .toolbar .orderby { height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); font-size: var(--fs-14); font-family: var(--font); width: auto; }
.toolbar form.woocommerce-ordering { margin: 0; }
/* Ta sama wysokość co select (40 px), ikony wyśrodkowane flexem — ikony FA mają inną wysokość linii niż tekst. */
.viewtoggle { display: flex; height: 40px; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; flex-shrink: 0; }
.viewtoggle button { border: 0; background: var(--surface); padding: 0 12px; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-14); line-height: 1; }
.viewtoggle button.active { background: var(--navy); color: var(--surface); }

.layout { display: grid; grid-template-columns: 262px 1fr; gap: 26px; align-items: start; }
.shop-col { min-width: 0; }

.side { border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
.side .filter-widget, .side .sect { border-bottom: 1px solid var(--line); padding: var(--sp-4); }
.side > :last-child { border-bottom: 0; }
.side h3, .side .filter-title, .side .bapf_head h3 { font-size: var(--fs-14); margin: 0 0 var(--sp-3); text-transform: uppercase; letter-spacing: .03em; color: var(--navy); font-weight: 700; }
.side input[type="checkbox"], .side input[type="radio"] { accent-color: var(--navy); width: 16px; height: 16px; }
.side ul { list-style: none; margin: 0; padding: 0; }
.side .product-categories a, .cat-tree a { display: flex; justify-content: space-between; font-size: var(--fs-14); padding: 6px 0; color: var(--link-drop); }
.side .product-categories a:hover, .cat-tree a:hover { color: var(--navy); }
.side .product-categories .current-cat > a, .cat-tree a.cur { color: var(--navy); font-weight: 700; }
.side .product-categories li { display: block; }
.side .product-categories li > a { display: inline; }
.side .product-categories .count { color: var(--muted); font-size: var(--fs-12); float: right; }
.side .product-categories .children { padding-left: var(--sp-3); clear: both; }

/* Zdublowany widget "Potrzebujesz pomocy?" — zastępuje go help-box motywu */
.side #custom_html-6 { display: none; }

/* BeRocket AJAX filters — wygląd z makiety (index.html: .sect / .opt), bez zmian w plikach wtyczki.
   Które filtry i gdzie: ustawienia wtyczki + inc/filters.php (tryb per kategoria). */
/* Wtyczka nie używa before_widget sidebara (.filter-widget) — sekcję z paddingiem i separatorem daje blok facetu. */
.side .bapf_sfilter { margin: 0; padding: var(--sp-4); border-bottom: 1px solid var(--line); }
.side .bapf_sfilter .bapf_head { margin: 0 0 var(--sp-3); }
/* Zwinięty facet (bapf_ocolaps = ciało schowane): sam nagłówek, mniej powietrza. */
.side .bapf_sfilter.bapf_ocolaps { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.side .bapf_sfilter.bapf_ocolaps .bapf_head, .side .bapf_sfilter.bapf_ocolaps .bapf_head h3 { margin-bottom: 0; } /* h3 też — jego 12px przechodziło przez .bapf_head (margin collapsing) i nagłówek siedział za wysoko */
.side .bapf_sfilter .bapf_head h3 { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.side .bapf_sfilter .bapf_head h3 .bapf_colaps_smb { font-size: var(--fs-12); color: var(--muted); }
.side .bapf_sfilter .bapf_body { max-height: 300px; overflow: auto; }
.side .bapf_sfilter .bapf_body ul li { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: var(--fs-14); color: var(--link-drop); }
.side .bapf_sfilter .bapf_body label { flex: 1; margin: 0; padding: 0; font-size: var(--fs-14); font-weight: 400; color: inherit; cursor: pointer; }
.side .bapf_sfilter .bapf_body li:hover label { color: var(--navy); }
.side .bapf_sfilter .bapf_body .pcs { margin-left: auto; color: var(--muted); font-size: var(--fs-12); }
/* Natywny checkbox w kolorze marki zamiast kwadratu wtyczki (template_styles/css/square.css). */
.side .bapf_ckbox_square input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; width: 16px; height: 16px; margin: 0; padding: 0; border: 0; flex: 0 0 16px; }
.side .bapf_ckbox_square input[type="checkbox"]:checked { background: none; }
.side .bapf_slidr_all { opacity: 1 !important; }

/* Suwak ceny (ion.rangeSlider, skin "modern") jak w makiecie: cienki tor, okrągłe granatowe
   uchwyty, zakres tekstem nad torem — zamiast zielonego paska i etykiet w ramkach. */
.side .irs--modern { height: 52px; }
.side .irs--modern .irs-line { top: 30px; height: 6px; background: var(--line); border: 0; border-radius: var(--r-xs); }
.side .irs--modern .irs-bar { top: 30px; height: 6px; background: var(--navy); }
.side .irs--modern .irs-handle { top: 26px; width: 14px; height: 14px; border: 0; border-radius: var(--r-round); background: var(--navy); box-shadow: none; cursor: grab; }
.side .irs--modern .irs-handle:hover, .side .irs--modern .irs-handle.state_hover { background: var(--navy-d); }
/* Skórka wtyczki ładuje się po CSS motywu — selektor musi być bardziej specyficzny niż .irs--modern .irs-handle>i:nth-child(n). */
.side .bapf_slidr_ion .irs--modern .irs-handle > i { display: none; }
.side .irs--modern .irs-min, .side .irs--modern .irs-max { display: none; }
.side .irs--modern .irs-from, .side .irs--modern .irs-to, .side .irs--modern .irs-single { top: 0; padding: 0; background: none; color: var(--muted); font-size: var(--fs-13); font-weight: 400; }
.side .irs--modern .irs-from::before, .side .irs--modern .irs-to::before, .side .irs--modern .irs-single::before { display: none; }

.help-box { background: var(--navy); color: var(--surface); padding: 18px 16px; text-align: center; }
.help-box .exp { width: 64px; height: 64px; border-radius: var(--r-round); background: rgba(255, 255, 255, .13); margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.help-box b { display: block; font-size: var(--fs-15); margin-bottom: 2px; }
.help-box p { font-size: 12.5px; color: var(--card-hover-line); margin: 0 0 var(--sp-3); }
.help-box a { display: block; background: var(--surface); color: var(--navy); font-weight: 700; padding: 10px; border-radius: var(--r-m); margin-bottom: var(--sp-2); font-size: var(--fs-14); }
.help-box a.line2 { background: var(--accent); color: var(--surface); }

.products.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.products.grid > * { min-width: 0; }
.filter-toggle { display: none; }

/* Widok listy */
.products.grid.list { grid-template-columns: 1fr; gap: 14px; }
.products.grid.list .card { flex-direction: row; align-items: stretch; }
.products.grid.list .card-imgwrap { flex: 0 0 260px; width: 260px; aspect-ratio: auto; border-right: 1px solid var(--line); }
.products.grid.list .card-body { flex: 1; padding: 18px 22px; }
.products.grid.list .card-title { min-height: 0; }
.products.grid.list .card-cta { max-width: 420px; }

/* Sekcja SEO pod siatką */
.seo { margin: 0 0 var(--sp-2); }
.seo h2 { color: var(--navy); font-size: var(--fs-26); margin: 0 0 var(--sp-2); }
.seo h3 { color: var(--navy); font-size: var(--fs-19); }
.seo p { color: var(--text-read); font-size: var(--fs-15); max-width: 900px; }
.seo img { border-radius: var(--r-2xl); }

/* ═══ 14. Porównywarka ═══ */
.btn-ghost.on { background: var(--navy); color: var(--surface); border-color: var(--navy); }
.comparebar {
	position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 2px solid var(--navy);
	box-shadow: 0 -8px 26px rgba(12, 44, 98, .16); z-index: 70; transform: translateY(110%); transition: transform var(--tr-slow);
}
.comparebar.open { transform: translateY(0); }
.comparebar .inner { max-width: var(--container); margin: 0 auto; padding: 14px var(--container-pad); display: flex; align-items: center; gap: 18px; }
/* overflow-x: auto (przewijanie miniatur na wąskim ekranie) ucina wszystko poza pudełkiem, a X wystaje 8 px nad
   i za miniaturę — padding daje mu miejsce wewnątrz przewijanego pudełka, ujemny margines zeruje wpływ na układ. */
.comparebar .cmp-items { display: flex; gap: var(--sp-3); flex: 1; overflow-x: auto; padding: 8px 8px 0 0; margin: -8px -8px 0 0; }
.cmp-thumb { position: relative; flex: 0 0 auto; width: 66px; height: 66px; border: 1px solid var(--line); border-radius: var(--r-m); padding: 6px; background: var(--surface); }
.cmp-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cmp-thumb .rm { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: var(--r-round); background: var(--navy); color: var(--surface); border: 0; font-size: var(--fs-12); cursor: pointer; line-height: 1; }
.comparebar .cmp-actions { display: flex; align-items: center; gap: var(--sp-4); flex: 0 0 auto; }
.comparebar .cmp-count { font-weight: 700; font-size: var(--fs-14); color: var(--ink); }
.comparebar .cmp-count small { display: block; color: var(--muted); font-weight: 400; font-size: var(--fs-12); }
.comparebar .cmp-clear { background: none; border: 0; color: var(--muted); font-size: var(--fs-13); font-weight: 600; cursor: pointer; text-decoration: underline; font-family: var(--font); }
.comparebar .cmp-clear:hover { color: var(--navy); }
.comparebar .cmp-go { background: var(--navy); color: var(--surface); border: 0; border-radius: var(--r-m); padding: 12px 26px; font-weight: 700; font-size: var(--fs-14); cursor: pointer; font-family: var(--font); }
.comparebar .cmp-go:disabled { background: var(--disabled); cursor: not-allowed; }
body.cmp-bar-open { padding-bottom: 98px; }
body.cmp-bar-open .sticky-help { bottom: 118px; }
body.cmp-bar-open .to-top { bottom: 178px; }

.cmp-modal { position: fixed; inset: 0; background: rgba(12, 28, 60, .55); z-index: 90; display: none; padding: 34px 16px; overflow: auto; }
.cmp-modal.open { display: block; }
.cmp-dialog { max-width: 1100px; margin: 0 auto; background: var(--surface); border-radius: var(--r-2xl); overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.cmp-head { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line); }
.cmp-head h3 { margin: 0; color: var(--navy); font-size: 20px; }
.cmp-close { background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: var(--muted); }
.cmp-close:hover { color: var(--ink); }
.cmp-scroll { overflow-x: auto; }
table.cmp-table { border-collapse: collapse; width: 100%; min-width: 640px; }
table.cmp-table th, table.cmp-table td { border-bottom: 1px solid var(--line); padding: 14px 16px; text-align: left; font-size: var(--fs-14); vertical-align: middle; }
table.cmp-table thead th { border-bottom: 2px solid var(--line); vertical-align: top; text-align: center; }
table.cmp-table .rowlabel { color: var(--muted); font-weight: 600; width: 180px; background: var(--bg); }
.cmp-prod img { height: 96px; object-fit: contain; mix-blend-mode: multiply; margin: 0 auto 8px; }
.cmp-prod .nm { font-weight: 600; font-size: 12.5px; line-height: 1.35; color: var(--ink); }
.cmp-price { font-weight: 800; color: var(--navy); font-size: var(--fs-17); }
.cmp-yes { color: var(--stock); font-weight: 700; }
.cmp-no { color: var(--disabled); font-weight: 700; }
.cmp-buy { display: inline-block; background: var(--navy); color: var(--surface); border-radius: var(--r-s); padding: 9px 14px; font-size: var(--fs-13); font-weight: 700; }
.cmp-buy:hover { background: var(--navy-d); }

/* ═══ 15. Karta produktu (PDP) ═══ */
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: 38px; margin: var(--sp-4) 0 var(--sp-2); align-items: start; }
.pdp > * { min-width: 0; }
.gal-main { border: 1px solid var(--line); border-radius: var(--r-2xl); overflow: hidden; background: var(--surface); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
.gal-main img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.gal-thumbs { display: flex; gap: 10px; margin-top: var(--sp-3); flex-wrap: wrap; }
.gal-thumbs button { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); padding: 6px; width: 86px; height: 86px; cursor: pointer; overflow: hidden; }
.gal-thumbs button img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.gal-thumbs button.active { border: 2px solid var(--navy); }

.buybox h1 { font-size: var(--fs-23); color: var(--ink); margin: 0 0 6px; line-height: 1.3; }
.meta-row { display: flex; gap: 14px; align-items: center; font-size: 12.5px; color: var(--muted); margin-bottom: 14px; flex-wrap: wrap; }
.meta-row a, .meta-row b { color: var(--navy); font-weight: 600; }
.pdp-labels { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--sp-3); }
.pdp-labels .badge { min-width: 0; }

.price-block { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 6px 0 var(--sp-1); }
.price-old-line { display: flex; align-items: center; gap: var(--sp-2); color: var(--muted); font-size: var(--fs-14); }
.price-big { font-size: var(--fs-34); font-weight: 800; color: var(--navy); line-height: 1.1; }
.price-big .woocommerce-Price-amount { font-size: inherit; }
/* Treści doklejane do ceny filtrem woocommerce_get_price_html (Omnibus w trybie
   "dodaj do ceny", format ceny Barn2) — nie dziedziczą rozmiaru ceny. */
.price-big p, .price-big .wpo-price-display-prefix { font-size: var(--fs-13); font-weight: 400; color: var(--muted); margin: var(--sp-1) 0 0; }
/* Omnibus: "Najniższa cena z 30 dni przed obniżką" — pod ceną, jak w starym motywie. */
#omnibus-price-data { display: block; font-size: var(--fs-13); font-weight: 400; color: var(--muted); line-height: 1.4; }
.pdp-meta-hooks { margin: var(--sp-2) 0 0; }
.pdp-meta-hooks:empty { display: none; }
/* Krótki opis produktu (pole "Krótki opis") — między ceną a formularzem zakupu. */
.pdp-short-desc { margin: var(--sp-3) 0 0; font-size: var(--fs-14); line-height: 1.6; color: var(--text-read); }
.pdp-short-desc p { margin: 0 0 var(--sp-2); }
.pdp-short-desc p:last-child, .pdp-short-desc ul:last-child { margin-bottom: 0; }
.rata-line { font-size: var(--fs-13); color: var(--muted); margin-top: 10px; } /* 4 px zlewało linię rat z ceną */
.rata-line b { color: var(--stock); }
.rata-line a { color: var(--navy); font-weight: 700; text-decoration: underline; }
.rata-line a:hover { color: var(--accent); }
.availability-block { text-align: right; }
.ship-note { font-size: var(--fs-13); color: var(--stock); font-weight: 600; margin: 6px 0 0; } /* prawa kolumna w rytmie linii rat */

/* Formularz zakupu + opcje produktu (Barn2 Product Options) */
/* Wiersz "Dodaj do koszyka" + ulubione jak w makiecie (.cta-row): przycisk na całą szerokość,
   serce obok; bloki opcji Barn2 i inne divy formularza zajmują pełną szerokość nad nim. */
.buy-form form.cart, .woocommerce div.product .buy-form form.cart { margin: var(--sp-4) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } /* rdzeń daje form.cart margin-bottom 2em */
.buy-form form.cart > div:not(.quantity) { flex: 0 0 100%; }
/* Rdzeń Woo daje form.cart clearfix ::before/::after (display:table). W kontenerze flex to puste elementy,
   przez które gap 10px odsuwał pole ilości od lewej krawędzi, a przycisk od prawej. Wyłączone. */
.woocommerce div.product .buy-form form.cart::before, .woocommerce div.product .buy-form form.cart::after { content: none; display: none; }
/* Ilość ukryta (min = max, np. 1 szt. na stanie): pusty .quantity też generował gap przed przyciskiem. */
.buy-form .quantity:has(input[type="hidden"]) { display: none; }
.buy-form .single_add_to_cart_button { flex: 1 1 auto; }
.buy-form .card-fav.fav-single { margin-left: 0; }
/* Rdzeniowe "N w magazynie" z simple.php dubluje pill dostępności — ukryte jak w starym motywie. */
.buy-form p.stock { display: none; }
.buy-form .quantity { display: inline-flex; margin-right: var(--sp-2); }
.buy-form .quantity input, .woocommerce .buy-form .quantity .qty { width: 74px; height: 50px; padding: 0 var(--sp-2); text-align: center; }
/* Selektor z .woocommerce div.product … przebija rdzeń (.woocommerce button.button: padding .618em, line-height 1 → 36 px).
   Ilość, przycisk i serce mają jedną wysokość 50 px. */
.buy-form .single_add_to_cart_button, .woocommerce div.product .buy-form form.cart .single_add_to_cart_button {
	background: var(--navy); color: var(--surface); border: 0; border-radius: var(--r-s);
	height: 50px; padding: 0 22px; font-size: var(--fs-15); line-height: 1; font-weight: 700; cursor: pointer; font-family: var(--font);
	transition: background var(--tr-fast);
}
.buy-form .single_add_to_cart_button:hover { background: var(--navy-d); }
.card-fav.fav-single {
	position: static; display: inline-flex; vertical-align: middle; margin-left: var(--sp-2);
	width: 50px; height: 50px; font-size: var(--fs-17);
}
/* Opcje produktu (Barn2 Product Options) — wygląd bloku .opts z makiety produkt.html: ramka, nagłówek grupy
   małymi wersalikami, jedna kolumna wyborów, cena po prawej, kwadracik 16 px w granacie. Arkusz wtyczki
   (wpo-frontend-fields.css) ładuje się PO main.css, stąd selektory z .woocommerce div.product — inaczej
   siatka dwóch kolumn, szerokość fit-content pozycji i zielona cena z rdzenia Woo wygrywają. */
.woocommerce div.product .buy-form .wpo-options-container {
	--wpo-input-focus-color: var(--navy); --wpo-input-selected-color: var(--navy);
	--wpo-input-border-color: var(--line); --wpo-input-border-color-alt: var(--muted); --wpo-input-border-color-dark: var(--navy);
	--wpo-input-border-radius: 3px; --wpo-input-font-size: 13.5px; --wpo-option-price-font-size: 12.5px;
	--wpo-option-gap-small: 0px; --wpo-option-gap: 9px; --wpo-option-gap-large: 0px;
	border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--sp-4) 18px; margin: 18px 0 0;
}
.woocommerce div.product .buy-form .wpo-field { margin: 0; gap: 0; }
/* Nagłówek grupy ("Wybierz kolor akrylu i obudowy:") jak .opts h4; kolejne grupy oddzielone linią jak osobne ramki w makiecie. */
.woocommerce div.product .buy-form .wpo-field-display p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.3; text-transform: uppercase; letter-spacing: .03em; color: var(--navy); font-weight: 700; }
.woocommerce div.product .buy-form .wpo-field + .wpo-field-display { border-top: 1px solid var(--line); margin-top: var(--sp-4); padding-top: var(--sp-4); }
/* Lista checkboxów/radio: jedna kolumna na całą szerokość, cena dosunięta do prawej (makieta .opt-check + .pr).
   Tylko te listy — przyciski obrazkowe (próbki kolorów, ul.wpo-image-buttons) zostają w siatce wtyczki 118 px. */
.woocommerce div.product .buy-form .wpo-field ul.wpo-checkboxes, .woocommerce div.product .buy-form .wpo-field ul.wpo-radios { --wpo-choice-columns: 1; display: block; width: 100%; }
.woocommerce div.product .buy-form .wpo-field ul.wpo-checkboxes li.wpo-choice-item, .woocommerce div.product .buy-form .wpo-field ul.wpo-radios li.wpo-choice-item { display: block; width: 100%; margin: 0; }
.woocommerce div.product .buy-form .wpo-field label.wpo-checkbox, .woocommerce div.product .buy-form .wpo-field label.wpo-radio {
	display: flex; align-items: center; gap: 9px; margin: 0; padding: 6px 0; font-size: 13.5px; font-weight: 400; color: var(--link-drop); cursor: pointer;
}
.woocommerce div.product .buy-form .wpo-field label.wpo-checkbox span.wpo-checkbox-inner { width: 16px; height: 16px; flex: none; border: 1px solid var(--muted); border-radius: 3px; background-size: 11px; }
.woocommerce div.product .buy-form .wpo-field label.wpo-checkbox:hover span.wpo-checkbox-inner { background-color: var(--bg); }
.woocommerce div.product .buy-form .wpo-field label.wpo-checkbox input:checked + span.wpo-checkbox-inner { background-color: var(--navy); border-color: var(--navy); }
.woocommerce div.product .buy-form .wpo-field label.wpo-radio span.wpo-radio-inner { width: 16px; height: 16px; border: 1px solid var(--muted); }
.woocommerce div.product .buy-form .wpo-field .wpo-choice-label { flex: 1 1 auto; }
.woocommerce div.product .buy-form .wpo-field span.price.wpo-price-container { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.woocommerce div.product .buy-form .wpo-field span.price.wpo-price-container .wpo-price, .woocommerce div.product .buy-form .wpo-field span.price.wpo-price-container .wpo-currency { color: inherit; font-weight: inherit; font-size: inherit; }
/* Próbki (przyciski obrazkowe, np. kolor akrylu i obudowy): nazwa i cena w dymku nad próbką po najechaniu,
   zamiast nakładki wtyczki na obrazku (życzenie klienta). Tekst dymka: atrybut data-tip (js/main.js przepisuje
   go z title, żeby nie dublować natywnego dymka przeglądarki). */
.woocommerce div.product .buy-form .wpo-image-buttons label.wpo-image-button { position: relative; overflow: visible; }
.woocommerce div.product .buy-form .wpo-image-buttons figcaption.wpo-image-text { display: none; }
.woocommerce div.product .buy-form .wpo-image-buttons label.wpo-image-button[data-tip]::after {
	content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 10px); transform: translateY(4px);
	background: var(--navy); color: var(--surface); font-size: 12.5px; font-weight: 600; line-height: 1.35; padding: 7px 10px;
	border-radius: var(--r-m); white-space: normal; width: max-content; max-width: min(300px, 80vw);
	box-shadow: var(--sh-card); opacity: 0; visibility: hidden; pointer-events: none; z-index: 20;
	transition: opacity var(--tr-fast), transform var(--tr-fast), visibility var(--tr-fast);
}
.woocommerce div.product .buy-form .wpo-image-buttons label.wpo-image-button[data-tip]::before {
	content: ""; position: absolute; left: 18px; bottom: calc(100% + 4px); transform: translateY(4px);
	border: 6px solid transparent; border-top-color: var(--navy); border-bottom: 0;
	opacity: 0; visibility: hidden; pointer-events: none; z-index: 20; transition: opacity var(--tr-fast), transform var(--tr-fast), visibility var(--tr-fast);
}
.woocommerce div.product .buy-form .wpo-image-buttons label.wpo-image-button[data-tip]:hover::after, .woocommerce div.product .buy-form .wpo-image-buttons label.wpo-image-button[data-tip]:focus-within::after,
.woocommerce div.product .buy-form .wpo-image-buttons label.wpo-image-button[data-tip]:hover::before, .woocommerce div.product .buy-form .wpo-image-buttons label.wpo-image-button[data-tip]:focus-within::before { opacity: 1; visibility: visible; transform: translateY(0); }
/* Najechana próbka nie może mieć przezroczystości (dymek dziedziczy opacity z etykiety). */
.woocommerce div.product .buy-form .wpo-image-buttons label.wpo-image-button:hover, .woocommerce div.product .buy-form .wpo-image-buttons label.wpo-image-button:active { opacity: 1; }
.buy-form .wpo-totals-container { display: none; }

.total-row { display: flex; justify-content: space-between; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-l); padding: 13px 18px; margin: var(--sp-4) 0 14px; }
.total-row span { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.total-row b { font-size: 22px; color: var(--navy); }
/* display:flex wyżej wygrywa z regułą UA [hidden] — przywracamy jej działanie. */
.total-row[hidden] { display: none; }

.alt-cta { display: flex; gap: var(--sp-5); margin: 18px 0 0; font-size: 13.5px; flex-wrap: wrap; }
.alt-cta a { color: var(--navy); font-weight: 700; }
.alt-cta a:hover { text-decoration: underline; }

.info-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 18px 0 0; }
.info-tiles > * { min-width: 0; }
.itile { border: 1px solid var(--line); border-radius: var(--r-l); padding: 11px 14px; font-size: 12.5px; color: var(--muted); display: flex; gap: 10px; align-items: center; }
.itile[hidden] { display: none; }
.itile .ei { font-size: 18px; color: var(--navy); flex-shrink: 0; }
/* Logo producenta w kaflu "Producent: X" zamiast ikony (logotypy są w różnych proporcjach — stała wysokość, szerokość auto). */
.itile .ei.brand img { display: block; height: 28px; width: auto; max-width: 96px; object-fit: contain; }
.itile b { display: block; color: var(--ink); font-size: var(--fs-13); }
.itile-link { color: var(--navy); text-decoration: underline; }
.buybox .pay { margin-top: 18px; }
.buybox .pay img { border: 1px solid var(--line); }

.acf-data { list-style: none; margin: 18px 0 0; padding: var(--sp-4) 18px; border: 1px solid var(--line); border-radius: var(--r-xl); font-size: 13.5px; color: var(--link-drop); }
.acf-data li { padding: 3px 0; }
.acf-data li span { color: var(--muted); }
.acf-data li b { color: var(--ink); font-weight: 600; }

/* Akordeon sekcji produktu */
.ptabs { border-top: 1px solid var(--line); margin: var(--sp-13) 0; }
.ptab { border-bottom: 1px solid var(--line); }
.ptab-btn {
	width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
	background: none; border: 0; padding: var(--sp-5) var(--sp-1); font-family: var(--font);
	font-size: var(--fs-19); font-weight: 700; line-height: 1.3; color: var(--navy); cursor: pointer; text-align: left;
}
.ptab-btn:hover { color: var(--accent); }
.ptab-btn .chev { font-size: var(--fs-13); color: var(--muted); transition: transform .2s; }
.ptab.open .ptab-btn .chev { transform: rotate(180deg); }
.ptab-body { display: none; padding: 2px var(--sp-1) 28px; }
.ptab.open .ptab-body { display: block; }
.wc-desc { font-size: var(--fs-15); line-height: 1.65; color: var(--text-read); }
.wc-desc img { max-width: 100%; height: auto; border-radius: var(--r-l); }
.wc-desc p { margin: 0 0 14px; }
.wc-desc strong { color: var(--ink); }
.wc-desc h2, .wc-desc h3 { color: var(--navy); }
.wc-desc table { border-collapse: collapse; width: 100%; }
.wc-desc table th, .wc-desc table td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
/* Lista dokumentów w zakładce z dokumentami (inc/spec-pdf.php): specyfikacja PDF + pliki klienta, jeden wygląd. */
.wc-desc .docs-list { list-style: none; margin: 0; padding: 0; }
.docs-list li { margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.docs-list li:last-child { border-bottom: 0; }
.docs-list a { display: flex; align-items: center; gap: var(--sp-3); padding: 12px 0; color: var(--navy); font-weight: 600; font-size: var(--fs-15); transition: color var(--tr-fast); }
.docs-list a:hover { color: var(--accent); }
.docs-list i { flex: none; width: 18px; text-align: center; color: var(--accent); font-size: var(--fs-15); position: relative; top: 1px; } /* +1px: optyczne wyrównanie do małych liter */
.wc-desc table th { background: var(--bg); color: var(--navy); }
/* Tabela atrybutów Woo (zakładka "Dane techniczne"): rdzeń daje kursywę, zebrę i padding 8px/0 — jak inne tabele motywu. */
.woocommerce table.shop_attributes { border-collapse: collapse; margin: 0; }
.woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { border: 1px solid var(--line); padding: 10px 14px; font-style: normal; line-height: 1.5; }
.woocommerce table.shop_attributes th { background: var(--bg); color: var(--navy); width: 240px; }
.woocommerce table.shop_attributes tr:nth-child(2n) td { background: none; }
.woocommerce table.shop_attributes tr:nth-child(2n) th { background: var(--bg); }
.woocommerce table.shop_attributes td p { margin: 0; }

/* Kroki dostawy */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.steps > * { min-width: 0; }
.step { border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--sp-5) 22px; }
.step .num { width: 34px; height: 34px; border-radius: var(--r-round); background: var(--navy); color: var(--surface); display: flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: var(--sp-3); font-size: var(--fs-15); }
.step b { display: block; margin-bottom: 6px; font-size: 14.5px; color: var(--navy); }
.step p { margin: 0; font-size: var(--fs-13); color: var(--muted); }

/* Zakładka "Opinie": pasek podsumowania + przycisk rozwijający formularz (makieta: .rev-sum / .btn-rev) */
.rev-sum { display: flex; align-items: center; gap: 18px; margin: 0 0 18px; flex-wrap: wrap; }
.rev-sum p { margin: 0; font-size: var(--fs-15); color: var(--ink); }
.rev-sum small { color: var(--muted); display: block; font-size: 12.5px; margin-top: 4px; }
.rev-sum .rev-avg { display: flex; align-items: center; gap: 8px; color: var(--star); font-size: var(--fs-15); }
.rev-sum .rev-avg b { color: var(--ink); font-size: var(--fs-17); }
.btn-rev {
	margin-left: auto; background: var(--surface); border: 1.5px solid var(--navy); color: var(--navy);
	font-weight: 700; font-size: var(--fs-14); padding: 11px 22px; border-radius: var(--r-m); cursor: pointer; font-family: var(--font);
	transition: background var(--tr-fast), color var(--tr-fast);
}
.btn-rev:hover, .btn-rev[aria-expanded="true"] { background: var(--navy); color: var(--surface); }
/* woocommerce-layout.css dokleja do listy clearfix ::before/::after — w siatce stają się pustymi komórkami
   i spychają pierwszą opinię w drugą kolumnę, na formularz. Awatary motyw wyłącza (inc/reviews.php). */
.woocommerce #reviews #comments ol.commentlist::before, .woocommerce #reviews #comments ol.commentlist::after { content: none; display: none; }
.woocommerce #reviews #comments ol.commentlist li img.avatar { display: none; }
.woocommerce #reviews #comments ol.commentlist li .comment-text { margin-left: 0; border: 0; padding: 0; }
/* WooCommerce daje każdej opinii class="review" — to samo, co przyklejony panel "Twoje zamówienie" (.review, sticky top:150px). */
.woocommerce-Reviews .commentlist li.review { position: relative; top: auto; overflow: visible; }
/* Karta opinii — selektor z dwoma id, bo rdzeń (#reviews #comments ol.commentlist li) zeruje border/padding. */
.woocommerce #reviews #comments ol.commentlist li.review { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 18px 22px; margin: 0; background: var(--surface); }
#review_form_wrapper { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px; background: var(--surface); }
#review_form_wrapper[hidden] { display: none; }

/* Opinie produktowe */
.woocommerce-Reviews .commentlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 1000px; }
.woocommerce-Reviews .commentlist > li { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px; background: var(--surface); }
.woocommerce-Reviews .comment-text p { color: var(--text-body); font-size: var(--fs-14); margin: 10px 0 0; }
.woocommerce-Reviews .meta { font-weight: 700; font-size: 13.5px; margin: 0 0 var(--sp-1); }
.woocommerce-Reviews .star-rating { color: var(--star); }
.review-pros { color: var(--stock); }
.review-cons { color: var(--danger); }
.comment-form-rating .stars a { color: var(--star); }
.comment-respond { max-width: 640px; }
.comment-respond input[type="submit"] { background: var(--navy); color: var(--surface); border: 0; border-radius: var(--r-s); padding: 12px 24px; font-weight: 700; cursor: pointer; }

/* Zapytanie o produkt (CF7) */
.tab-contact-title { color: var(--navy); font-size: 22px; }
.contact-form { background: var(--navy); border-radius: var(--r-2xl); color: var(--surface); padding: 30px 34px; max-width: 760px; }
.contact-form .wpcf7 p { margin: 0 0 10px; }
.contact-form input, .contact-form textarea { border: 0; }
.contact-form .wpcf7-submit { background: var(--accent); color: var(--surface); border: 0; border-radius: var(--r-m); padding: 13px 26px; font-size: var(--fs-15); font-weight: 700; cursor: pointer; width: auto; }
.contact-form .wpcf7-submit:hover { background: var(--accent-d); }

/* Innowacyjne rozwiązania */
.innovations-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.innovations-grid > * { min-width: 0; }
.innovation { border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--sp-5) 22px; text-align: center; }
.innovation img { max-height: 64px; width: auto; margin: 0 auto var(--sp-3); }
.innovation h3 { color: var(--navy); font-size: var(--fs-15); margin: 0 0 var(--sp-2); }
.innovation p { color: var(--muted); font-size: var(--fs-13); margin: 0; }

/* Pasek "kup teraz" */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 2px solid var(--navy); box-shadow: 0 -8px 26px rgba(12, 44, 98, .16); z-index: 70; transform: translateY(110%); transition: transform var(--tr-slow); }
.buybar.open { transform: translateY(0); }
.buybar .inner { max-width: var(--container); margin: 0 auto; padding: var(--sp-3) var(--container-pad); display: flex; align-items: center; gap: 18px; }
.buybar img { width: 54px; height: 54px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-m); padding: 4px; background: var(--surface); }
.buybar .nm { font-weight: 600; font-size: 13.5px; line-height: 1.3; max-width: 520px; }
.buybar .pr { margin-left: auto; font-weight: 800; color: var(--navy); font-size: 20px; white-space: nowrap; }
.buybar .btn-primary { flex: 0 0 auto; padding: 13px 28px; font-size: var(--fs-14); }
body.buybar-open .sticky-help { bottom: 106px; }
body.buybar-open .to-top { bottom: 166px; }
body.buybar-open { padding-bottom: 86px; }

/* ═══ 16. Zamówienie (checkout) ═══ */
.woocommerce-form-coupon-toggle .woocommerce-info, .woocommerce-form-login-toggle .woocommerce-info {
	background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--navy);
	border-radius: var(--r-m); padding: 13px 18px; font-size: var(--fs-14); margin: 0 0 var(--sp-3); color: var(--link-drop);
}
.woocommerce-form-coupon-toggle a, .woocommerce-form-login-toggle a { color: var(--navy); font-weight: 700; cursor: pointer; }
.woocommerce-checkout form.checkout_coupon, .woocommerce-checkout form.woocommerce-form-login.login { border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--sp-4) 18px; margin: -4px 0 var(--sp-3); max-width: none; }
form.checkout_coupon p, form.woocommerce-form-login p { margin: 0 0 10px; }
form.checkout_coupon button, form.woocommerce-form-login button:not(.show-password-input) { background: var(--navy); color: var(--surface); border: 0; border-radius: var(--r-m); padding: 11px 26px; font-weight: 700; cursor: pointer; }

.checkoutgrid { display: grid; grid-template-columns: 1fr 430px; gap: 30px; align-items: start; margin-top: 10px; }
.checkoutgrid > * { min-width: 0; }
.formbox { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px 24px; }
.formbox h3 { margin: 0 0 var(--sp-4); font-size: var(--fs-17); color: var(--navy); }
.formbox + .formbox { margin-top: 18px; }
.formbox-shipping:empty { display: none; }

.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form-row { margin: 0; display: flex; flex-direction: column; gap: 6px; padding: 0; }
.form-row.form-row-wide, .form-row.notes { grid-column: 1 / -1; }
.form-row label { font-size: var(--fs-13); font-weight: 600; color: var(--link-drop); }
.form-row label .optional { color: var(--muted); font-weight: 400; }
.form-row .required { color: var(--danger); text-decoration: none; }
.form-row .woocommerce-input-wrapper { display: block; }
.form-row input, .form-row select, .form-row textarea { width: 100%; }
/* Rdzeń Woo (woocommerce.css / -layout.css, selektory .woocommerce form .form-row …) psuł rytm z makiety:
   padding 3px + margin 6px na wierszu, label line-height 2 (26 px), pola padding .5em (35 px zamiast 43),
   clearfix ::before/::after, które w kolumnie flex są elementami i dokładają 2× gap. Ta sama specyficzność
   (0,2,1)+ i późniejsza kolejność — wiersz ma 69 px jak w makiecie. */
.woocommerce form .form-row, .woocommerce-page form .form-row { padding: 0; margin: 0; }
.woocommerce form .form-row::before, .woocommerce form .form-row::after,
.woocommerce-page form .form-row::before, .woocommerce-page form .form-row::after { content: none; display: none; }
.woocommerce form .form-row label, .woocommerce-page form .form-row label { line-height: 1.5; }
.woocommerce form .form-row .input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea {
	padding: 11px 13px; font-size: var(--fs-14); line-height: normal; color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); box-shadow: none;
}
.woocommerce form .form-row .input-text:focus, .woocommerce form .form-row select:focus, .woocommerce form .form-row textarea:focus { border-color: var(--navy); outline: none; }
.woocommerce form .form-row textarea { height: auto; min-height: 84px; resize: vertical; }
/* Woo koloruje poprawne pola na zielono — makieta ma neutralną ramkę; błąd zostaje czerwony. */
.woocommerce form .form-row.woocommerce-validated .input-text, .woocommerce form .form-row.woocommerce-validated select { border-color: var(--line); }
.woocommerce form .form-row.woocommerce-invalid .input-text, .woocommerce form .form-row.woocommerce-invalid select { border-color: var(--danger); }
.woocommerce form .form-row .required { visibility: visible; color: var(--danger); font-weight: 700; }
/* Jeden dozwolony kraj: Woo rysuje "Polska" jako tekst — w wysokości pola, żeby siatka trzymała rytm. */
.woocommerce form .form-row .country_to_state--single, .woocommerce form .form-row strong.woocommerce-input-wrapper,
.woocommerce form .form-row .woocommerce-input-wrapper > strong { display: block; padding: 11px 0; font-size: var(--fs-14); font-weight: 700; line-height: normal; }
/* Wiersze z checkboxem ("Stworzyć konto?", "Wysłać na inny adres?"): width:100% wyżej łamało etykietę pod checkbox. */
.form-row input[type="checkbox"], .woocommerce-form__input-checkbox { width: auto; }
.woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-weight: 600; }
.woocommerce-form__label-for-checkbox input[type="checkbox"] { accent-color: var(--navy); width: 16px; height: 16px; margin: 0; flex-shrink: 0; }
#ship-to-different-address { margin: 0; font-size: var(--fs-14); }
/* woocommerce-layout.css daje .form-row-first/-last width:47% + float — w siatce 2 kolumn to zwęża pole do ~90px. */
.woocommerce form .form-row-first, .woocommerce form .form-row-last,
.woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last { width: auto; float: none; }
/* Checkbox w wierszu (rdzeń: margin -2px 8px 0 0, label.checkbox inline). */
.woocommerce form .form-row .input-checkbox { margin: 0; }
.woocommerce form .form-row label.checkbox, .woocommerce-page form .form-row label.checkbox,
.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: var(--sp-2); }
/* Formularze konta (adresy, dane konta, zapomniane hasło) — ta sama siatka co checkout. */
.woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.woocommerce-EditAccountForm > fieldset, .woocommerce-EditAccountForm > p:not(.form-row-first):not(.form-row-last), .woocommerce-address-fields > p { grid-column: 1 / -1; }
.woocommerce-EditAccountForm fieldset { border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--sp-4) 18px; margin: var(--sp-2) 0 0; display: grid; gap: 14px 16px; }
.woocommerce-EditAccountForm legend { font-weight: 700; color: var(--navy); font-size: var(--fs-14); padding: 0 6px; }
.woocommerce-EditAccountForm .form-row span em { display: block; font-size: var(--fs-12); color: var(--muted); font-style: normal; margin-top: var(--sp-1); }
.woocommerce-address-fields__field-wrapper + p, .woocommerce-EditAccountForm > p:last-child { margin: 0; }
form.lost_reset_password { max-width: 460px; }
form.lost_reset_password .form-row-first, .woocommerce form.lost_reset_password .form-row-first { width: 100%; }
.form-row .select2-container .select2-selection--single { height: 44px; border: 1px solid var(--line); border-radius: var(--r-m); }
.form-row .select2-container .select2-selection__rendered { line-height: 42px; padding-left: 13px; }
.form-row .select2-container .select2-selection__arrow { height: 42px; }

.review { border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; position: sticky; top: 150px; background: var(--surface); }
.review > h3 { margin: 0; padding: var(--sp-4) var(--sp-5); font-size: var(--fs-14); text-transform: uppercase; letter-spacing: .03em; color: var(--navy); border-bottom: 1px solid var(--line); background: var(--bg); }
.ritem { display: flex; gap: var(--sp-3); padding: 14px var(--sp-5); border-bottom: 1px solid var(--line); align-items: flex-start; }
.ritem .th { flex: 0 0 62px; width: 62px; height: 62px; border: 1px solid var(--line); border-radius: var(--r-m); padding: 4px; background: var(--surface); display: block; }
.ritem .th img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ritem-main { min-width: 0; }
.ritem .nm { font-size: var(--fs-13); font-weight: 600; line-height: 1.35; }
.ritem .nm a:hover { color: var(--navy); }
.ritem .meta { font-size: 11.5px; color: var(--muted); margin-top: var(--sp-1); line-height: 1.5; }
/* Dane pozycji (warianty, opcje Barn2): "nazwa: wartość" jako zawijający się wiersz, każda opcja od nowej linii. */
.ritem .meta dl { display: block; margin: 0; }
.ritem .meta dt { display: inline; margin: 0 2px 0 0; font-weight: 600; }
.ritem .meta dd, .ritem .meta p { display: inline; margin: 0; }
.ritem .meta dd::after { content: ""; display: block; height: 2px; }
.ritem .qty { font-size: var(--fs-12); color: var(--muted); margin-top: var(--sp-1); }
/* Ilość +/- i "Usuń" przy pozycji (sklep nie ma strony koszyka; js/checkout.js). */
.ritem .qty-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
.ritem .qty-ctl .qbtn { width: 26px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); color: var(--navy); font-family: var(--font); font-size: var(--fs-15); line-height: 1; cursor: pointer; transition: border-color var(--tr-fast); }
.ritem .qty-ctl .qbtn:hover { border-color: var(--navy); }
.ritem .qty-ctl .qval { width: 44px; height: 26px; padding: 0 4px; border: 1px solid var(--line); border-radius: var(--r-s); text-align: center; font-size: var(--fs-13); color: var(--ink); -moz-appearance: textfield; }
.ritem .qty-ctl .qval::-webkit-outer-spin-button, .ritem .qty-ctl .qval::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ritem .qty-ctl .qrm { margin-left: var(--sp-1); padding: 0; border: 0; background: none; color: var(--muted); font-family: var(--font); font-size: var(--fs-12); cursor: pointer; }
.ritem .qty-ctl .qrm:hover { color: var(--danger); }
.ritem .qty-ctl.is-busy { opacity: .5; pointer-events: none; }
.review .mazur-cart-notice { margin: var(--sp-3) var(--sp-5) 0; }
.ritem .pr { margin-left: auto; font-weight: 700; font-size: var(--fs-13); white-space: nowrap; }
.review .rw { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line); font-size: var(--fs-14); }
.review .rw .k { color: var(--muted); }
.review .rw .v { font-weight: 700; white-space: nowrap; text-align: right; }
/* Wysyłka w podsumowaniu: prawdziwa tabela (core emituje tr/th/td). */
.review table.shipping-table { width: 100%; border-collapse: collapse; }
.review table.shipping-table th, .review table.shipping-table td { padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line); font-size: var(--fs-14); text-align: left; vertical-align: top; }
.review table.shipping-table th { color: var(--muted); font-weight: 400; white-space: nowrap; width: 1%; background: none; }
.review table.shipping-table ul { list-style: none; margin: 0; padding: 0; }
.review table.shipping-table li { padding: 3px 0; font-size: 13.5px; }
.review table.shipping-table input[type="radio"] { accent-color: var(--navy); margin-right: 6px; width: auto; }
.review table.shipping-table label { font-weight: 500; }
/* Opis metody dostawy (inc/shipping.php) — pod nazwą, wyrównany do tekstu etykiety (radio 16px + 6px). */
.review table.shipping-table .ship-desc { display: block; padding-left: 22px; margin: 1px 0 5px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.review .sum { display: flex; justify-content: space-between; align-items: baseline; padding: 15px var(--sp-5) 14px; border-bottom: 1px solid var(--line); }
.review .sum .k { font-weight: 700; font-size: var(--fs-15); }
.review .sum .v { font-weight: 800; font-size: var(--fs-23); color: var(--navy); white-space: nowrap; }
.review .sum .v small { display: block; font-size: var(--fs-12); color: var(--muted); font-weight: 400; }

/* Metody płatności */
.woocommerce-checkout-payment { background: none; }
.wc_payment_methods { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-5) var(--sp-1); }
.wc_payment_method { border: 1px solid var(--line); border-radius: var(--r-l); margin: var(--sp-2) 0; overflow: hidden; }
.wc_payment_method > label { display: flex; align-items: center; gap: 10px; padding: 13px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; margin: 0; }
.wc_payment_method input.input-radio { accent-color: var(--navy); width: 16px; height: 16px; flex-shrink: 0; }
/* Ikony metod: wspólna wysokość, naturalna szerokość. Wciskanie wszystkich w 64×30 rozciągało kwadratowe (BLIK, karty)
   i zmniejszało szerokie (CA Raty 183×38, Lease Now 128×24) — decyzja 2026-09-11: szerokie logo ma być szerokie. */
.wc_payment_method label img { box-sizing: border-box; height: 30px; width: auto; max-width: 140px; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; object-fit: contain; margin-left: var(--sp-1); }
.wc_payment_method .payment_box { padding: 0 14px 12px 40px; font-size: 12.5px; color: var(--muted); margin: 0; background: none; }
.wc_payment_method:has(input:checked) { border-color: var(--navy); }
/* Bez paddingu bocznego: zgoda ma zaczynać się równo z ramkami metod płatności i przyciskiem „Kupuję i płacę”. */
.woocommerce-terms-and-conditions-wrapper { padding: var(--sp-3) 0 0; font-size: 12.5px; color: var(--muted); }
.woocommerce-terms-and-conditions-wrapper a { color: var(--navy); font-weight: 600; }
.woocommerce-terms-and-conditions-wrapper .form-row { display: block; }
/* Zgoda na regulamin: checkbox absolutnie z lewej, tekst + gwiazdka płyną w linii (flex robił z &nbsp; osobny element
   i odsuwał gwiazdkę), zawinięty tekst wisi równo pod pierwszą linią. */
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox, .woocommerce .woocommerce-terms-and-conditions-wrapper .form-row label.checkbox { display: block; position: relative; padding-left: 26px; font-size: 13.5px; line-height: 1.5; color: var(--link-drop); }
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] { accent-color: var(--navy); width: 16px; height: 16px; margin: 0; position: absolute; left: 0; top: 2px; }
.woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text { display: inline; }
.woocommerce-terms-and-conditions-wrapper .required { display: inline; }
.form-row.place-order { display: block; padding: 0 var(--sp-5); }
#place_order {
	display: block; margin: var(--sp-4) 0; background: var(--accent); color: var(--surface); text-align: center;
	font-weight: 700; font-size: 15.5px; padding: 15px; border-radius: var(--r-m); border: 0; cursor: pointer; width: 100%;
	font-family: var(--font);
}
#place_order:hover { background: var(--accent-d); }

/* Silniejsze nadpisania #payment (woocommerce-general.css używa ID) */
.woocommerce-checkout #payment { background: none; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 0; padding: var(--sp-2) var(--sp-5) var(--sp-1); }
.woocommerce-checkout #payment ul.payment_methods li { border: 1px solid var(--line); border-radius: var(--r-l); margin: var(--sp-2) 0; overflow: hidden; line-height: 1.5; }
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) { border-color: var(--navy); }
/* WooCommerce wstawia radio jako rodzeństwo etykiety (input, label, .payment_box) — w jednym wierszu jak w makiecie. */
.woocommerce-checkout #payment ul.payment_methods li { display: flex; flex-wrap: wrap; align-items: center; }
.woocommerce-checkout #payment ul.payment_methods li > input.input-radio { margin: 0 0 0 14px; }
.woocommerce-checkout #payment ul.payment_methods li > label { flex: 1; min-width: 0; padding-left: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.woocommerce-checkout #payment ul.payment_methods li > label img:first-of-type { margin-left: auto; }
.woocommerce-checkout #payment ul.payment_methods li > .payment_box { flex: 0 0 100%; }
/* Tylko ikony w etykiecie (li > label): obrazki w .payment_box, np. przycisk kalkulatora CA Raty, zostają w naturalnym rozmiarze. */
.woocommerce-checkout #payment ul.payment_methods li > label img { box-sizing: border-box; height: 30px; width: auto; max-width: 140px; min-width: 0; margin-left: 0; padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); object-fit: contain; }
.woocommerce-checkout #payment div.payment_box { background: var(--bg); border-radius: 0; margin: 0; padding: var(--sp-3) 14px; font-size: 12.5px; color: var(--muted); }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
/* Akapity opisu: bez domyślnego marginesu górnego przeglądarki (1em), który dawał 25 px nad tekstem przy 12 px pod nim. */
.woocommerce-checkout #payment div.payment_box p { margin: 0 0 var(--sp-2); }
.woocommerce-checkout #payment div.payment_box p:last-child { margin-bottom: 0; }
.woocommerce-checkout #payment div.form-row { padding: 0 var(--sp-5); }

/* Ikony powiadomień Woo (font WooCommerce bywa niedostępny) */
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { padding-left: var(--sp-5); }

/* Tabela koszyka na stronie zamówienia */
table.shop_table, .woocommerce table.shop_table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; margin: 0 0 var(--sp-5); }
table.shop_table th, table.shop_table td, .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); font-size: var(--fs-14); line-height: 1.5; text-align: left; vertical-align: middle; }
.woocommerce table.shop_table tbody tr:last-child td, .woocommerce table.shop_table tbody tr:last-child th { border-bottom: 1px solid var(--line); }
.woocommerce table.shop_table tfoot tr:last-child td, .woocommerce table.shop_table tfoot tr:last-child th { border-bottom: 0; }
table.shop_table thead th, .woocommerce table.shop_table thead th { background: var(--bg); color: var(--navy); text-transform: uppercase; font-size: var(--fs-12); letter-spacing: .03em; }
.woocommerce table.shop_table tfoot th, .woocommerce table.shop_table tbody th { font-weight: 600; color: var(--muted); }
.woocommerce table.shop_table tbody th, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th { border-top: 0; }
.woocommerce table.my_account_orders { font-size: var(--fs-14); }
.woocommerce table.my_account_orders th, .woocommerce table.my_account_orders td { padding: 12px 16px; }
.woocommerce table.my_account_orders .woocommerce-orders-table__cell-order-actions .button { margin: 0 6px 0 0; }
table.shop_table .product-remove a { color: var(--danger); font-size: var(--fs-17); font-weight: 700; }
table.shop_table .product-thumbnail img { width: 62px; height: 62px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-m); padding: 4px; }
/* Dane pozycji w tabeli koszyka (warianty, opcje Barn2): nazwa i wartość w jednej zawijającej się linii, opcje jedna pod drugą. */
table.shop_table dl.variation { display: block; margin: 6px 0 0; font-size: var(--fs-13); line-height: 1.5; color: var(--muted); }
table.shop_table dl.variation dt { display: inline; margin: 0 2px 0 0; font-weight: 600; color: var(--ink); }
table.shop_table dl.variation dd { display: inline; margin: 0; padding: 0; }
table.shop_table dl.variation dd p { display: inline; margin: 0; }
table.shop_table dl.variation dd::after { content: ""; display: block; height: 2px; }
table.shop_table .product-name a { font-weight: 600; color: var(--navy); }
table.shop_table .coupon { display: flex; gap: var(--sp-2); align-items: center; }
/* Kupon w tabeli koszyka: rdzeń zwężał pole do 80px z paddingiem 6px i fioletową ramką. */
table.shop_table .coupon input[type="text"], .woocommerce table.cart td.actions .coupon .input-text { width: 180px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-m); font-size: var(--fs-14); }
table.shop_table .coupon label { display: none; }

.woocommerce-checkout .blockUI.blockOverlay { border-radius: var(--r-xl); }

/* Widget eKomi (stopka: #widget-container; skrypt wstrzykuje #pos-bottom_left, fixed, z-index 9999).
   Desktop: podnoszony nad paski "Dodaj do koszyka" / porównywarki. Mobile: ukryty (zasłaniał pasek zakupu). */
body.buybar-open #pos-bottom_left, body.cmp-bar-open #pos-bottom_left { bottom: 96px !important; }
@media (max-width: 1024px) {
	#widget-container.ekomi-widget-container, #pos-bottom_left { display: none !important; }
}

/* ═══ 17. Zamówienie otrzymane (thank you) ═══ */
/* Strona /zamowienie zawiera też shortcode koszyka — na potwierdzeniu i przy
   "opłać zamówienie" (koszyk z założenia pusty) chowamy jego pusty stan */
.woocommerce-order-received .wc-empty-cart-message,
.woocommerce-order-received .cart-empty,
.woocommerce-order-received .return-to-shop,
.woocommerce-order-pay .wc-empty-cart-message,
.woocommerce-order-pay .cart-empty,
.woocommerce-order-pay .return-to-shop { display: none; }
.woocommerce-order { max-width: 860px; margin: 0 auto; }
.ty-hero { text-align: center; padding: 38px 0 10px; }
.ty-hero .ok {
	width: 74px; height: 74px; border-radius: var(--r-round); background: var(--stock); color: var(--surface);
	display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 18px;
	box-shadow: 0 0 0 10px var(--success-soft);
}
.ty-hero h1 { font-size: 30px; margin: 0 0 10px; color: var(--navy); }
.woocommerce-thankyou-order-received { font-size: var(--fs-16); color: var(--text-read); margin: 0 0 30px; text-align: center; }
.ty-help { background: var(--navy); color: var(--surface); border-radius: var(--r-xl); padding: var(--sp-5) 22px; margin: 0 0 26px; }
.ty-help b { display: block; font-size: var(--fs-15); margin-bottom: 6px; }
.ty-help p { margin: 0 0 var(--sp-3); font-size: var(--fs-13); color: var(--card-hover-line); }
.ty-help a { display: inline-block; font-weight: 700; font-size: 14.5px; padding: 3px 12px 3px 0; }
/* Podsumowanie zamówienia + dane do przelewu (BACS): oba to <ul class="order_details">, a rdzeń
   (.woocommerce ul.order_details li) daje float, border-right dashed, padding-right 2em i clearfix ::before/::after,
   które w siatce stają się pustymi komórkami — stąd selektory z .woocommerce ul., żeby przebić rdzeń. */
.woocommerce-order-received .page-title { display: none; } /* tytuł endpointu dubluje nagłówek .ty-hero (makieta ma jeden) */
.woocommerce ul.woocommerce-order-overview, .woocommerce ul.wc-bacs-bank-details {
	list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 4 lub 5 pozycji (metoda płatności bywa pusta) — zawsze pełny wiersz */
	border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--surface);
}
.woocommerce ul.wc-bacs-bank-details { grid-template-columns: repeat(4, 1fr); }
.woocommerce ul.woocommerce-order-overview::before, .woocommerce ul.woocommerce-order-overview::after,
.woocommerce ul.wc-bacs-bank-details::before, .woocommerce ul.wc-bacs-bank-details::after { content: none; display: none; }
.woocommerce ul.woocommerce-order-overview li, .woocommerce ul.wc-bacs-bank-details li {
	float: none; margin: 0; padding: var(--sp-4) 18px; border: 0; border-left: 1px solid var(--line); min-width: 0;
	font-size: var(--fs-12); line-height: 1.5; color: var(--muted); text-transform: uppercase; letter-spacing: .03em;
}
.woocommerce ul.woocommerce-order-overview li:first-child, .woocommerce ul.wc-bacs-bank-details li:first-child { border-left: 0; }
.woocommerce ul.woocommerce-order-overview li strong, .woocommerce ul.wc-bacs-bank-details li strong {
	display: block; font-size: 14.5px; line-height: 1.4; color: var(--ink); margin-top: var(--sp-1); text-transform: none; letter-spacing: 0; overflow-wrap: anywhere;
}
.woocommerce-bacs-bank-details h3 { font-size: var(--fs-15); font-weight: 600; color: var(--ink); margin: 0 0 10px; }
.woocommerce-order-details, .woocommerce .woocommerce-order-details, .woocommerce .woocommerce-customer-details { margin: 0 0 26px; }
.woocommerce-order-details h2, .woocommerce-customer-details h2, .woocommerce-bacs-bank-details h2 { color: var(--navy); font-size: var(--fs-21); margin: 0 0 14px; }
.woocommerce-table--order-details, .woocommerce-table--custom-fields { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
.woocommerce-table--order-details th, .woocommerce-table--order-details td { padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: var(--fs-14); text-align: left; background: var(--surface); vertical-align: top; }
.woocommerce-table--order-details tfoot th { color: var(--muted); font-weight: 600; }
.woocommerce-table--order-details tfoot tr:last-child th, .woocommerce-table--order-details tfoot tr:last-child td { font-weight: 800; color: var(--navy); }
.woocommerce-customer-details address, .woocommerce .woocommerce-customer-details address { border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--sp-4) 18px; font-style: normal; background: var(--surface); line-height: 1.7; }
/* Ostatnia komórka podsumowania: rdzeń (li:last-of-type { border: none }) zdejmował lewą linię. */
.woocommerce ul.woocommerce-order-overview li:last-of-type, .woocommerce ul.wc-bacs-bank-details li:last-of-type { border: 0; border-left: 1px solid var(--line); }
.woocommerce-columns--addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ═══ 18. Blog, realizacje, inspiracje, instrukcje, kontakt ═══ */
.facetbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 26px; }
.facetbar .lbl { font-size: var(--fs-13); font-weight: 700; color: var(--muted); margin-right: var(--sp-1); }
.facetbar .fc { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-s); padding: 7px 13px; font-size: var(--fs-13); font-weight: 600; color: var(--facet-text); cursor: pointer; transition: var(--tr-fast); }
.facetbar .fc b { color: var(--muted); font-weight: 600; margin-left: 3px; }
.facetbar .fc.active { background: var(--navy); color: var(--surface); border-color: var(--navy); }
.facetbar .fc.active b { color: var(--facet-active-accent); }
.facetbar .fc:not(.active):hover { border-color: var(--navy); color: var(--navy); }

.blog-side .sect { border-bottom: 1px solid var(--line); padding: var(--sp-4); }
.blog-side .archives { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.blog-side .archives a { font-size: var(--fs-13); color: var(--text-read); text-decoration: none; text-transform: lowercase; }
.blog-side .archives a:hover { color: var(--navy); }
.blog-side { display: block; }
.mini { display: flex; gap: 10px; padding: 7px 0; align-items: flex-start; }
.mini img { width: 56px; height: 44px; object-fit: cover; border-radius: var(--r-m); flex-shrink: 0; }
.mini a { font-size: var(--fs-13); line-height: 1.35; font-weight: 600; color: var(--link-drop); }
.mini a:hover { color: var(--navy); }
.mini small { display: block; color: var(--muted); font-weight: 400; font-size: 11.5px; margin-top: 2px; }
.cat-tree span { color: var(--muted); font-size: var(--fs-12); }

.featured { display: grid; grid-template-columns: 1.15fr 1fr; border: 1px solid var(--line); border-radius: var(--r-2xl); overflow: hidden; background: var(--surface); margin-bottom: 26px; transition: var(--tr-med); }
.featured > * { min-width: 0; }
.featured:hover { box-shadow: var(--sh-card); border-color: var(--card-hover-line); }
.featured .im { min-height: 300px; background: var(--bg); display: block; }
.featured .im img { width: 100%; height: 100%; object-fit: cover; }
.featured .bd { padding: 28px 30px; display: flex; flex-direction: column; justify-content: center; }
.featured .meta { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.featured h2 { margin: 0 0 10px; font-size: var(--fs-21); color: var(--navy); line-height: 1.3; }
.featured p { font-size: var(--fs-14); color: var(--text-soft); margin: 0 0 14px; }
.featured .more { color: var(--navy); font-weight: 700; font-size: var(--fs-13); }

.page-narrow { max-width: 900px; }
.woocommerce-checkout .page-narrow, .woocommerce-account .page-narrow { max-width: var(--container); }
.page-title { color: var(--navy); font-size: 30px; margin: var(--sp-2) 0 var(--sp-4); }
.post-meta { color: var(--muted); font-size: var(--fs-13); margin: 0 0 var(--sp-4); }
.post-hero { border-radius: var(--r-2xl); overflow: hidden; margin-bottom: var(--sp-6); }
.entry-content { font-size: var(--fs-15); line-height: 1.7; color: var(--text-read); }

/* Kafle realizacji / inspiracji */
.tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.tile-grid > * { min-width: 0; }
.tile {
	display: flex; align-items: flex-end; min-height: 300px; border-radius: var(--r-2xl); overflow: hidden;
	background-color: var(--bg); background-size: cover; background-position: center; position: relative; transition: var(--tr-med);
}
.tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 37, 54, 0) 40%, rgba(15, 37, 54, .78) 100%); }
.tile:hover { transform: translateY(-3px); box-shadow: var(--sh-card); }
.tile h2 { position: relative; color: var(--surface); font-size: var(--fs-19); margin: 0; padding: var(--sp-5) 22px; }

.realizacja-hero { border-radius: var(--r-2xl); overflow: hidden; margin-bottom: var(--sp-6); }
.pswp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 15px; margin-top: 15px; }
.pswp-gallery a { display: block; overflow: hidden; height: 0; padding-top: 75%; position: relative; border-radius: var(--r-l); }
.pswp-gallery img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.pswp-gallery a:hover img { transform: scale(1.05); }
.realizacja-tresc, .inspiracja-tresc { margin-top: var(--sp-6); }

/* Inspiracje: znaczniki produktów */
.inspiracja-canvas { position: relative; border-radius: var(--r-2xl); overflow: visible; }
.inspiracja-canvas > img { width: 100%; height: auto; border-radius: var(--r-2xl); }
.hotspot { position: absolute; cursor: pointer; }
.product-popup {
	display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
	background: var(--surface); color: var(--navy); border-radius: var(--r-round); font-size: 22px; font-weight: 700;
	box-shadow: var(--sh-float); transition: var(--tr-fast); cursor: pointer;
}
.product-popup:hover { background: var(--navy); color: var(--surface); }
.product-info {
	position: absolute; top: 0; left: calc(100% + 8px); z-index: 20; width: 220px; background: var(--surface);
	border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--sp-3); box-shadow: var(--sh-drop);
}
.product-info img { border-radius: var(--r-m); }
.product-info h4 { font-size: var(--fs-13); color: var(--ink); margin: var(--sp-2) 0 var(--sp-1); }
.product-info .price { font-weight: 800; color: var(--navy); font-size: var(--fs-14); }

/* Instrukcje */
.instrukcje-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-6); }
.instrukcje-grid > * { min-width: 0; }
.instrukcja-btn {
	display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-l);
	padding: 14px 16px; font-size: var(--fs-14); font-weight: 600; color: var(--link-drop); background: var(--surface);
	transition: var(--tr-fast);
}
.instrukcja-btn i { color: var(--danger); font-size: var(--fs-17); }
.instrukcja-btn:hover { border-color: var(--navy); color: var(--navy); }

/* Kontakt */
.contact-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 26px; align-items: start; }
.contact-grid > * { min-width: 0; }
.contact-box { border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--sp-4) 18px; margin-bottom: var(--sp-3); }
.contact-box h3 { color: var(--navy); font-size: var(--fs-14); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 10px; }
.contact-box h3 i { margin-right: 6px; }
.contact-box-body { font-size: var(--fs-14); color: var(--link-drop); }
/* Nagłówki wewnątrz treści pola (np. "Godziny otwarcia sklepu:") jako podtytuły, nie drugi tytuł ramki. */
.contact-box .contact-box-body h3 { font-size: var(--fs-13); font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ink); margin: var(--sp-3) 0 var(--sp-1); }
.contact-box .contact-box-body h3:first-child { margin-top: 0; }
.contact-box-body a { color: var(--navy); font-weight: 600; }
/* Pole ACF "Dane kontaktowe" to same linki tel:/mailto: bez <br> — każdy w osobnej linii. */
.contact-box-body a[href^="tel:"], .contact-box-body a[href^="mailto:"] { display: block; padding: 2px 0; }
.contact-box-body p { margin: 0 0 6px; }
.askband { background: var(--navy); border-radius: var(--r-2xl); color: var(--surface); padding: 30px 34px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 34px; align-items: center; margin: 0; }
.askband > * { min-width: 0; }
.askband h3, .wc-desc .askband h3 { margin: 0 0 var(--sp-2); font-size: 22px; color: var(--surface); } /* .wc-desc h3 daje granat — na granatowym pasie nagłówek znikał */
.askband p { margin: 0 0 14px; color: var(--card-hover-line); font-size: var(--fs-14); }
.askband .tel { font-size: var(--fs-17); font-weight: 800; color: var(--surface); display: block; margin-bottom: var(--sp-1); }
.askband .wpcf7, .askband .wpcf7 label, .askband .wpcf7 p, .askband .wpcf7 .wpcf7-list-item-label,
.askband .wpcf7 .wpcf7-quiz-label, .askband .wpcf7 span { color: var(--text-on-navy); }
.askband .wpcf7 a { color: var(--surface); text-decoration: underline; font-weight: 600; }
.askband .wpcf7 .wpcf7-not-valid-tip { color: var(--danger-on-navy); }
.askband .wpcf7 .wpcf7-response-output { border-color: var(--accent); color: var(--surface); }
.askband .wpcf7 input, .askband .wpcf7 textarea { border: 0; margin-bottom: var(--sp-2); color: var(--ink); }
/* Zgody (checkboxy CF7): etykieta w jednej linii z polem, bez wcięcia 1em z CSS wtyczki (na mobile łamało się z ujemnym wcięciem). */
.askband .wpcf7-list-item { display: block; margin: 0 0 var(--sp-1); }
.askband .wpcf7-list-item label { display: flex; align-items: flex-start; gap: var(--sp-2); font-weight: 500; }
.askband .wpcf7-list-item input[type="checkbox"] { width: 16px; height: 16px; margin: 3px 0 0; flex-shrink: 0; accent-color: var(--accent); }
.askband .wpcf7 .wpcf7-submit { background: var(--accent); color: var(--surface); font-weight: 700; cursor: pointer; width: auto; padding: 13px 26px; }
.askband .wpcf7 .wpcf7-submit:hover { background: var(--accent-d); }
/* Zakładka "Zapytanie o produkt": formularz CF7 w siatce 2 kolumn jak .askform z makiety
   (e-mail | imię, pytanie i przycisk na całą szerokość). */
.askband .askform .wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.askband .askform .wpcf7-form > .form-group, .askband .askform .wpcf7-form > div { min-width: 0; }
.askband .askform .wpcf7-form > div:has(textarea), .askband .askform .wpcf7-form > div:has(.wpcf7-submit),
.askband .askform .wpcf7-form > .wpcf7-response-output, .askband .askform .wpcf7-form > .hidden-fields-container { grid-column: 1 / -1; }
.askband .askform .wpcf7 p { margin: 0; }
.askband .askform .wpcf7 label { font-size: 12.5px; font-weight: 600; }
.askband .askform .wpcf7 input, .askband .askform .wpcf7 textarea { width: 100%; margin: 4px 0 0; border-radius: var(--r-m); padding: 12px 14px; font-size: var(--fs-14); font-family: var(--font); }
.askband .askform .wpcf7 textarea { min-height: 74px; resize: vertical; }
.askband .askform .wpcf7 .wpcf7-submit { width: 100%; margin-top: 4px; padding: 13px; border-radius: var(--r-m); }
.askband .askform .wpcf7-spinner { display: none; }
.askband-mail a { color: var(--surface); font-weight: 600; text-decoration: underline; }
.contact-page-band { align-items: start; grid-template-columns: 1fr; gap: var(--sp-5); } /* krótkie wprowadzenie nad formularzem, nie obok */
.contact-page-band .tel { margin-bottom: 0; }
/* Formularz CF7 kontaktu: zgody (w DOM za przyciskiem) wizualnie nad "Wyślij". */
.contact-page-band .wpcf7-form { display: flex; flex-direction: column; }
.contact-page-band .wpcf7-form > .wpcf7-submit-p { order: 10; margin: var(--sp-2) 0 0; }
.contact-page-band .wpcf7-form > .wpcf7-response-output { order: 11; }
.contact-map { margin-top: 26px; border-radius: var(--r-2xl); overflow: hidden; }
.contact-map iframe { display: block; width: 100%; border: 0; }

.home-baner { border-radius: var(--r-2xl); overflow: hidden; }
.home-baner img { width: 100%; height: auto; }
.slide .im picture, .cat .im picture { display: contents; }
.home-wiecej .seorow .txt h2, .home-wiecej .seorow .txt h3 { color: var(--navy); }

/* ═══ 19. Moje konto ═══ */
.woocommerce-MyAccount-navigation { border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; margin-bottom: var(--sp-6); }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line); }
.woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-MyAccount-navigation a { display: block; padding: 13px 18px; font-size: var(--fs-14); font-weight: 600; color: var(--link-drop); }
.woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation a:hover { background: var(--bg); color: var(--navy); }
/* Siatka nawigacja+treść tylko dla zalogowanych (gdy jest nawigacja konta) */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 262px 1fr; gap: 26px; align-items: start; }
.woocommerce-account .woocommerce > *:not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) { grid-column: 1 / -1; }
.woocommerce-account.woocommerce-checkout .woocommerce { display: block; }
.woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: auto; grid-column: 1; }
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; grid-column: 2; }
.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 { color: var(--navy); font-size: var(--fs-19); margin: 0 0 14px; }
.woocommerce-MyAccount-content .woocommerce-info, .woocommerce-MyAccount-content .woocommerce-message { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.woocommerce-MyAccount-content .woocommerce-info .button, .woocommerce-MyAccount-content .woocommerce-message .button { float: none; order: 2; margin-left: auto; }
/* Pusty kontener powiadomień jest elementem siatki i dokładał pusty wiersz + 2× gap nad treścią konta. */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce .col2-set::before, .woocommerce .col2-set::after { content: none; display: none; }
.woocommerce-Addresses.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.woocommerce-Addresses .woocommerce-Address { border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--sp-4) 18px; }
.woocommerce-Address-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.woocommerce-Address-title h2, .woocommerce-Address-title h3 { margin: 0; flex: 1 1 auto; float: none; text-align: left; }
.woocommerce-Address-title .edit { float: none; }
.woocommerce-Address-title .edit { color: var(--accent); font-weight: 600; font-size: var(--fs-13); }
.woocommerce-Addresses address { font-style: normal; line-height: 1.7; }
.woocommerce-MyAccount-content table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
.woocommerce-MyAccount-content th, .woocommerce-MyAccount-content td { padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: var(--fs-14); text-align: left; }
.woocommerce-MyAccount-content th { background: var(--bg); color: var(--navy); }
/* Formularze konta bez siatki (logowanie, rejestracja, zapomniane/nowe hasło): jedna karta i rytm 14 px między wierszami.
   Selektory z „form” (0,2,2) — reset wyżej `.woocommerce form .form-row` (0,2,1) zerował marginesy wierszy, przez co
   pola, checkbox i przycisk sklejały się. */
.woocommerce-form-login, .woocommerce-form-register, .woocommerce form.login, .woocommerce form.register, .woocommerce form.lost_reset_password { max-width: 460px; border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--sp-6); margin: 0; }
.woocommerce .woocommerce-form-login .woocommerce-form-login__submit { float: none; margin: 0; width: 100%; }
.woocommerce form.woocommerce-form-login > p, .woocommerce form.woocommerce-form-register > p, .woocommerce form.lost_reset_password > p { margin: 0 0 14px; }
.woocommerce form.woocommerce-form-login > p:last-of-type, .woocommerce form.woocommerce-form-register > p:last-of-type, .woocommerce form.lost_reset_password > p:last-of-type { margin-bottom: 0; } /* last-of-type: po przycisku rdzeń dokłada ukryte pola nonce */
/* „Zapamiętaj mnie” i przycisk „Zaloguj się” siedzą w jednym <p>. */
.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme { margin-bottom: 14px; }
.woocommerce-form-login .button, .woocommerce-form-register .button, form.lost_reset_password .button { background: var(--navy); color: var(--surface); width: 100%; }
.woocommerce form.woocommerce-form-login > .lost_password { margin: var(--sp-3) 0 0; }
.woocommerce-form-login .lost_password a { color: var(--navy); font-weight: 600; }
.woocommerce-form-login .show-password-input { top: 12px; }
#customer_login { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
#customer_login > * { min-width: 0; }
#customer_login::before, #customer_login::after { display: none; }
#customer_login .col-1, #customer_login .col-2, .woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2 { float: none; width: auto; max-width: none; }
#customer_login h2 { color: var(--navy); font-size: var(--fs-21); margin: 0 0 14px; }
@media (max-width: 960px) {
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
	.woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { grid-column: 1 / -1; }
	#customer_login { grid-template-columns: 1fr; }
	.woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm, .woocommerce-Addresses.col2-set { grid-template-columns: 1fr; }
}

/* ═══ Responsywność (wspólna) ═══
   Progi jak w makietach: 1024 (nagłówek mobilny, mniejsze nagłówki, rytm sekcji 40px),
   960 (układy jednokolumnowe, siatki 2 kolumny), 820 (seorow), 640 (siatki 1 kolumna,
   ciaśniejsze paddingi paneli). Padding boczny daje zawsze .container (20px). */
.slide > *, .cats > *, .grid3 > *, .grid4 > *, .blogcards > *, .mz-reviews > *, .trust > *, .seorow > *, .footer .container > *, ul.products > *, .layout > *, .checkoutgrid > *, .featured > *, .contact-grid > *, .askband > * { min-width: 0; }
.topbar .container > div:first-child { min-width: 0; }

@media (max-width: 1024px) {
	.topbar .tb-trust { display: none; }
	.topbar .container { height: 32px; font-size: var(--fs-12); justify-content: center; }
	.topbar .container > div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.header .container { height: auto; flex-wrap: wrap; gap: 10px 12px; padding-top: 10px; padding-bottom: 12px; }
	.header { position: static; }
	.menu-btn { display: block; }
	.logo img { height: 42px; }
	.hactions { margin-left: auto; gap: 14px; }
	.hactions .ha b { display: none; }
	.header .search { flex: 1 1 100%; order: 5; }
	.nav { display: none; }
	/* Pasek USP zawija się w wiersze (bez poziomego przewijania; makieta przewijała — wyglądało na urwane). */
	.usp .container { justify-content: flex-start; gap: var(--sp-2) 22px; }
	/* Nagłówki i rytm sekcji (makiety: h1 23px, section-h 21px z marginesem 40/16, sep 40) */
	.pagehead h1, .page-title { font-size: var(--fs-23); }
	.section-h, .seo h2, .related > h2, .up-sells > h2 { font-size: var(--fs-21); }
	.section-h { margin: var(--sp-10) 0 var(--sp-4); }
	.sechead { margin: var(--sp-10) 0 var(--sp-4); }
	section.products + section.products { margin-top: var(--sp-10); }
	.sep { margin: var(--sp-10) 0; }
	.ptabs { margin: var(--sp-10) 0; }
	.rv-section { margin-top: var(--sp-6); }
	/* Pasek kategorii bloga przewija się poziomo zamiast łamać (makieta blog.html) */
	.facetbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
	.facetbar .fc, .facetbar .lbl { flex-shrink: 0; white-space: nowrap; }
	/* Podsumowanie zamówienia (dziękujemy): 2 kolumny z liniami między wierszami (makieta dziekujemy.html) */
	.woocommerce ul.woocommerce-order-overview, .woocommerce ul.wc-bacs-bank-details { grid-template-columns: 1fr 1fr; }
	.woocommerce ul.woocommerce-order-overview li, .woocommerce ul.wc-bacs-bank-details li { border-left: 0; border-top: 1px solid var(--line); }
	.woocommerce ul.woocommerce-order-overview li:nth-child(-n+2), .woocommerce ul.wc-bacs-bank-details li:nth-child(-n+2) { border-top: 0; }
	.woocommerce ul.woocommerce-order-overview li:nth-child(even), .woocommerce ul.wc-bacs-bank-details li:nth-child(even) { border-left: 1px solid var(--line); }
	.woocommerce ul.woocommerce-order-overview li:last-of-type, .woocommerce ul.wc-bacs-bank-details li:last-of-type { border-left: 0; border-top: 1px solid var(--line); }
	.woocommerce ul.woocommerce-order-overview li:last-of-type:nth-child(even), .woocommerce ul.wc-bacs-bank-details li:last-of-type:nth-child(even) { border-left: 1px solid var(--line); }
	.woocommerce ul.woocommerce-order-overview li:last-of-type:nth-child(-n+2), .woocommerce ul.wc-bacs-bank-details li:last-of-type:nth-child(-n+2) { border-top: 0; }
	.sticky-help { padding: 12px 16px; font-size: var(--fs-13); right: 14px; bottom: 14px; }
	.to-top { right: 14px; bottom: 66px; }
	body.buybar-open .sticky-help { bottom: 96px; }
	body.buybar-open .to-top { bottom: 150px; }
	body.cmp-bar-open .sticky-help { bottom: 110px; }
	body.cmp-bar-open .to-top { bottom: 164px; }
	body.admin-bar .header { top: auto; }
}

@media (max-width: 960px) {
	.featured { grid-template-columns: 1fr; }
	.tile-grid { grid-template-columns: 1fr; }
	.contact-grid { grid-template-columns: 1fr; }
	.askband { grid-template-columns: 1fr; }
	.instrukcje-grid { grid-template-columns: repeat(2, 1fr); }
	.side.blog-side { display: block; }
	.checkoutgrid { grid-template-columns: 1fr; }
	.review { position: static; }
	.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; }
	.pdp { grid-template-columns: 1fr; }
	.steps { grid-template-columns: repeat(2, 1fr); }
	.woocommerce-Reviews .commentlist { grid-template-columns: 1fr; }
	.innovations-grid { grid-template-columns: repeat(2, 1fr); }
	.availability-block { text-align: left; }
	.layout { grid-template-columns: 1fr; }
	/* Jeden rytm 16 px między przyciskiem filtrów, rozwiniętym sidebarem i toolbarem (odstęp daje gap siatki). */
	.layout { gap: var(--sp-4); }
	.side { display: none; margin-bottom: 0; }
	.side.open { display: block; }
	.shop-col .toolbar { margin-top: 0; }
	.filter-toggle { display: block; width: 100%; background: var(--surface); border: 1.5px solid var(--navy); color: var(--navy); font-weight: 700; font-size: var(--fs-14); padding: var(--sp-3); border-radius: var(--r-m); cursor: pointer; margin: 0; font-family: var(--font); }
	.products.grid { grid-template-columns: repeat(2, 1fr); }
	.products.grid.list .card { flex-direction: column; }
	.products.grid.list .card-imgwrap { width: 100%; flex: none; border-right: 0; aspect-ratio: 1 / 1; }
	.slide { grid-template-columns: 1fr; }
	.slide .im { order: -1; min-height: 220px; }
	.slide .txt { padding: 24px 24px 56px; }
	.slide h2 { font-size: var(--fs-26); }
	.cats { grid-template-columns: repeat(2, 1fr); }
	.grid3, .grid4, .mz-reviews, .blogcards, ul.products, .columns-4 ul.products { grid-template-columns: repeat(2, 1fr); }
	.blog-col .blogcards { grid-template-columns: 1fr; } /* makieta blog.html: .postgrid 1 kolumna (selektor musi przebić regułę desktopową) */
	.blog-layout .blog-side { order: 2; margin-top: var(--sp-4); } /* kategorie/ostatnie wpisy/archiwa pod listą artykułów, nie przed nią */
	/* Karta produktu: tytuł i meta nad zdjęciem. Galeria i buybox stają się przezroczyste (display: contents),
	   ich dzieci są elementami siatki .pdp w kolejności DOM, a h1 + .meta-row idą na początek przez order. */
	.pdp { gap: 0; }
	.pdp-gallery, .buybox { display: contents; }
	.pdp > * > * { min-width: 0; }
	.buybox > h1 { order: -2; }
	.buybox > .meta-row { order: -1; }
	.gal-thumbs { margin-bottom: var(--sp-5); }
	.gal-main:last-child { margin-bottom: var(--sp-5); }
	.trust { grid-template-columns: repeat(2, 1fr); }
	.trust .t { border-left: 0; border-top: 1px solid var(--line); }
	.trust .t:nth-child(-n+2) { border-top: 0; }
	.trust .t:nth-child(even) { border-left: 1px solid var(--line); }
	.footer .container { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
	/* Wiersze tekst + obraz ("O nas", "Więcej informacji") — makieta home.html */
	.seorow { grid-template-columns: 1fr; gap: var(--sp-5); margin: var(--sp-8) 0; }
	.seorow.flip .txt { order: 0; }
}

@media (max-width: 640px) {
	/* Opis metody dostawy (inc/shipping.php): na wąskim ekranie od lewej krawędzi, nie pod tekstem etykiety. */
	.review table.shipping-table .ship-desc { padding-left: 0; margin-top: 4px; }
	.usp .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-4); }
	.usp .u { min-width: 0; font-size: var(--fs-12); }
	.usp .u .ei { font-size: 16px; }
	.grid3, .grid4, .mz-reviews, .blogcards, ul.products, .columns-4 ul.products, .products.grid, .steps, .info-tiles, .innovations-grid, .instrukcje-grid, .woocommerce-columns--addresses { grid-template-columns: 1fr; }
	.buybox h1 { font-size: var(--fs-19); }
	.price-big { font-size: 28px; }
	.gal-thumbs { flex-wrap: nowrap; overflow-x: auto; gap: var(--sp-2); padding: 2px 2px 6px; scroll-snap-type: x proximity; }
	.gal-thumbs button { flex: 0 0 64px; width: 64px; height: 64px; scroll-snap-align: start; }
	/* Hero: niższe zdjęcie i opis przycięty do 3 linii (pełny tekst w ACF — na telefonie i tak go nikt nie czyta). */
	.slide .im { height: 200px; min-height: 0; }
	.slide .txt { padding: 18px 20px 52px; }
	.slide h2 { margin-bottom: var(--sp-2); }
	.slide p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; margin-bottom: var(--sp-4); }
	.slide .cta a { padding: 12px 22px; }
	.buybar img, .buybar .nm { display: none; }
	.buybar .inner { gap: var(--sp-3); }
	.toolbar .right { width: 100%; justify-content: space-between; }
	.comparebar .inner { flex-wrap: wrap; gap: 10px; }
	.comparebar .cmp-actions { width: 100%; justify-content: space-between; }
	.slide h2 { font-size: var(--fs-23); }
	.slide .txt { padding: 20px 20px 56px; }
	.footer .container { grid-template-columns: 1fr; }
	.trust .t .n { font-size: var(--fs-21); }
	/* Blog: wyróżniony wpis i paginacja (makieta blog.html) */
	.featured .im { min-height: 200px; }
	.featured .bd { padding: var(--sp-5); }
	.featured h2 { font-size: var(--fs-19); }
	.woocommerce nav.woocommerce-pagination ul li a.page-numbers, .woocommerce nav.woocommerce-pagination ul li span.page-numbers,
	a.page-numbers, span.page-numbers { min-width: 38px; height: 38px; }
	/* Zamówienie i potwierdzenie (makiety koszyk.html, dziekujemy.html) */
	.formbox { padding: 18px var(--sp-4); }
	.ty-hero h1 { font-size: 24px; }
	.woocommerce-table--order-details th, .woocommerce-table--order-details td { padding: 11px 12px; }
	/* Ciemne pasy z formularzem, FAQ, tabele w treści: mniej paddingu na wąskim ekranie */
	.askband, .contact-form { padding: var(--sp-6) var(--sp-5); }
	.faq .q summary { padding: var(--sp-4) 18px; font-size: var(--fs-15); }
	.faq .q p { padding: 0 18px var(--sp-4); font-size: var(--fs-14); }
	/* Szerokie tabele przewijają się poziomo wewnątrz treści zamiast wypychać stronę. */
	.wc-desc table, .entry-content table { display: block; overflow-x: auto; }
	.wc-desc table th, .wc-desc table td, .entry-content table th, .entry-content table td,
	.woocommerce table.shop_attributes tr th, .woocommerce table.shop_attributes tr td { padding: 8px 10px; font-size: var(--fs-13); }
	.woocommerce table.shop_attributes th { width: 40%; }
	.cmp-modal { padding: var(--sp-4) var(--sp-2); }
	.cmp-head { padding: var(--sp-4); }
	/* Porównywarka: etykiety w wąskiej, przyklejonej kolumnie (zostają widoczne przy przesuwaniu), produkty po 150 px,
	   nad tabelą podpowiedź, że tabelę można przesuwać. */
	.cmp-scroll::before { content: "Przesuń tabelę w bok, aby zobaczyć kolejne produkty"; display: block; position: sticky; left: 0; width: 100%; padding: 8px 14px; font-size: var(--fs-12); color: var(--muted); background: var(--bg); border-bottom: 1px solid var(--line); }
	.cmp-scroll { scroll-snap-type: x proximity; scroll-padding-left: 96px; }
	table.cmp-table { min-width: 0; border-collapse: separate; border-spacing: 0; }
	table.cmp-table th, table.cmp-table td { padding: 10px; font-size: var(--fs-13); }
	table.cmp-table .rowlabel { width: 96px; min-width: 96px; max-width: 96px; font-size: var(--fs-12); padding: 10px 8px; position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 var(--line); }
	table.cmp-table thead th.rowlabel { background: var(--surface); }
	table.cmp-table th.cmp-prod, table.cmp-table td:not(.rowlabel) { min-width: 150px; scroll-snap-align: start; }
	.cmp-prod img { height: 72px; }
	.woocommerce table.my_account_orders .button { padding: 8px 12px; font-size: 12.5px; margin: 2px 0 2px 6px; }
	.error-404 .error-code { font-size: 48px; }
	.error-404 h1 { font-size: var(--fs-23); }
}

/* ===== Ostatnio oglądane ===== */
.rv-section { margin-top: var(--sp-8); }
.rv-row { display: flex; gap: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-2); scroll-snap-type: x mandatory; }
.rv-card { flex: 0 0 190px; scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--sp-3); text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: var(--sp-2); transition: border-color var(--tr-fast); }
.rv-card:hover { border-color: var(--card-hover-line); }
.rv-card img { width: 100%; height: 120px; object-fit: contain; border-radius: var(--r-s); background: var(--bg); }
.rv-name { font-size: var(--fs-13); font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rv-card .card-price-wrap { margin-top: auto; }

/* ===== Komentarze (blog / strony) ===== */
.comments-area { margin-top: var(--sp-8); border-top: 1px solid var(--line); padding-top: var(--sp-6); }
.comments-title, .comment-reply-title { font-size: var(--fs-19); color: var(--navy); margin: 0 0 var(--sp-4); }
.comment-list { list-style: none; margin: 0 0 var(--sp-6); padding: 0; }
.comment-list .children { list-style: none; margin: var(--sp-3) 0 0 var(--sp-6); padding: 0; }
.comment-list .comment-body { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-3); }
.comment-list .comment-meta { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.comment-list .comment-author { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; color: var(--ink); }
.comment-list .comment-author img { border-radius: var(--r-round); }
.comment-list .comment-metadata { font-size: var(--fs-12); }
.comment-list .comment-metadata a { color: var(--muted); text-decoration: none; }
.comment-list .comment-content { font-size: var(--fs-14); color: var(--text-body); }
.comment-list .comment-content p { margin: 0 0 var(--sp-2); }
.comment-list .reply { font-size: var(--fs-13); }
.comment-list .reply a { color: var(--accent); text-decoration: none; font-weight: 600; }
.comment-list .comment-awaiting-moderation { display: block; font-size: var(--fs-12); color: var(--order); }
.no-comments { color: var(--muted); font-size: var(--fs-14); }
.comment-respond .comment-notes, .comment-respond .logged-in-as { font-size: var(--fs-13); color: var(--muted); }
.comment-respond p { margin: 0 0 var(--sp-3); }
.comment-respond label { display: block; font-size: var(--fs-13); font-weight: 600; color: var(--ink); margin-bottom: var(--sp-1); }
.comment-respond input[type="text"], .comment-respond input[type="email"], .comment-respond input[type="url"], .comment-respond textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 12px; font: inherit; font-size: var(--fs-14); background: var(--surface); color: var(--ink); }
.comment-respond input:focus, .comment-respond textarea:focus { outline: none; border-color: var(--accent); }
.comment-respond .comment-form-cookies-consent { display: flex; align-items: center; gap: var(--sp-2); }
.comment-respond .comment-form-cookies-consent input { width: auto; }
.comment-respond .comment-form-cookies-consent label { display: inline; margin: 0; font-weight: 500; }

/* Kafelek: dopisek o opcjach do wyboru (makieta .card-opts) */
.card-opts { font-size: 12.5px; color: var(--text-soft); margin: 8px 0 0; }

/* Strona "dziękujemy": przyciski pod szczegółami (makieta .ty-actions) */
.ty-actions { display: flex; gap: 12px; margin: 30px 0 0; flex-wrap: wrap; justify-content: center; }
.ty-actions a { border-radius: var(--r-m); font-weight: 700; font-size: var(--fs-14); padding: 13px 26px; text-decoration: none; }
.ty-actions .b1 { background: var(--navy); color: var(--surface); }
.ty-actions .b1:hover { background: var(--navy-d); }
.ty-actions .b2 { border: 1.5px solid var(--navy); color: var(--navy); }
.ty-actions .b2:hover { background: var(--navy); color: var(--surface); }