/* ==========================================================================
   WooCommerce — warstwa wizualna.

   theme.json daje tokeny, ale WooCommerce renderuje własny markup
   (galeria, zakładki, warianty, komunikaty), którego theme.json nie dosięga.
   Ten arkusz doprowadza go do systemu.

   UWAGA: Fluid Checkout nadpisuje szablony koszyka i zamówienia.
   Przed zmianami w checkoucie sprawdź docs/plan.md — decyzja o jego losie
   jest wciąż otwarta.
   ========================================================================== */

/* Płyta z ziarnem — jedno źródło prawdy.
   Ta sama grafika (feTurbulence, bez pliku z zewnątrz) siedziała w trzech
   miejscach tego arkusza: pod hero produktu, w lightboxie galerii i teraz
   w pasach sekcji. Kolor i ziarno muszą być identyczne, bo hero i pas sekcji
   stykają się na stronie produktu — rozjechany odcień byłby od razu widoczny. */
:root {
	--fbc-plyta: #e8e8eb;
	--fbc-ziarno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23z)' opacity='.14'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   1. Przyciski

   W sekcji ciemnej CTA jest BIAŁY, nie fioletowy. Fiolet #760070 ma wobec
   czerni kontrast 1,59 — powierzchnia zlewa się z tłem i przycisk przestaje
   być widoczny. Biel na czerni to 16,64 i klasyka premium.
   Fiolet zostaje przyciskiem na jasnych sekcjach (biel na fiolecie: 10,48).
   -------------------------------------------------------------------------- */

/* Wymiary i krój jak `.wp-block-button__link` na stronie głównej. Ścięte rogi,
   wjazd koloru od lewej i hover są w style.css (sekcje 18 i 24) — tamte reguły
   obejmują też te selektory, więc tutaj tylko to, co Woo ustawia inaczej. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.single_add_to_cart_button,
.wc-block-components-button:not(.wc-block-components-drawer__close),
.wp-block-button__link {
	/* geometria i krój: JEDEN komponent w style.css (sekcja 18); tu tylko kolory */
	background: var(--wp--preset--color--purr);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}
/* Kolor najazdu wjeżdża plombą `::before` (style.css) — tło zostaje fioletowe,
   żeby nie przeskakiwało przed dojazdem plomby. */
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single_add_to_cart_button:hover,
.wc-block-components-button:not(.wc-block-components-drawer__close):hover {
	background: var(--wp--preset--color--purr);
	color: var(--wp--preset--color--base);
}

/* Przycisk BIAŁY na ciemnym — jak baner akcesoriów i Subscribe na głównej:
   plomba fioletowa, po najeździe ramka fioletowa i tekst biały. Wyjątek:
   „Add to cart" w bloku zakupowym zostaje fioletowy (tak jak główny przycisk
   w hero) — reguła niżej. */
.is-style-sekcja-ciemna .woocommerce .button,
.is-style-sekcja-ciemna .woocommerce button.button,
.is-style-sekcja-ciemna .wc-block-components-button:not(.wc-block-components-drawer__close) {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--base);
	transition: color .2s ease .4s, border-color .2s ease .4s;
}
.is-style-sekcja-ciemna .woocommerce .button::before,
.is-style-sekcja-ciemna .woocommerce button.button::before,
.is-style-sekcja-ciemna .wc-block-components-button:not(.wc-block-components-drawer__close)::before { background: var(--wp--preset--color--purr); }
.is-style-sekcja-ciemna .woocommerce .button:hover,
.is-style-sekcja-ciemna .woocommerce button.button:hover,
.is-style-sekcja-ciemna .wc-block-components-button:not(.wc-block-components-drawer__close):hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--purr);
	transition-delay: 0s, 0s;
}

/* --------------------------------------------------------------------------
   2. Ceny — mono, ale nie rozstrzelone
   -------------------------------------------------------------------------- */

.woocommerce .price,
.woocommerce .amount,
.wp-block-woocommerce-product-price {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	letter-spacing: -0.03em;   /* mono domyślnie rozstrzeliwuje liczby */
}
.woocommerce del .amount { opacity: .5; }
.woocommerce ins { text-decoration: none; }

/* --------------------------------------------------------------------------
   3. Ścieżka okruszków — część sekcji, nie osobny pasek
   -------------------------------------------------------------------------- */

/* Jedna linia wersalikami w mono, wyrównana do lewej jak reszta kolumny (WooCommerce
   domyślnie centruje). Bieżąca strona i separatory ciemniejsze, linki wyraźniejsze —
   klient 2026-09-10 („z kontrastem, wyglądem i w ogóle"). */
.woocommerce-breadcrumb,
.wp-block-woocommerce-breadcrumbs {
	margin-block: 0;
	/* Blok WooCommerce dostaje szerokość treści i auto marginesy, więc ścieżka lądowała
	   na środku kolumny — pełna szerokość wyrównuje ją do lewej krawędzi sekcji. */
	width: 100%;
	text-align: start;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}
.woocommerce-breadcrumb a,
.wp-block-woocommerce-breadcrumbs a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.woocommerce-breadcrumb a:hover,
.wp-block-woocommerce-breadcrumbs a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.is-style-sekcja-ciemna .woocommerce-breadcrumb,
.is-style-sekcja-ciemna .wp-block-woocommerce-breadcrumbs {
	color: rgba(255, 255, 255, 0.5);
}
.is-style-sekcja-ciemna .woocommerce-breadcrumb a,
.is-style-sekcja-ciemna .wp-block-woocommerce-breadcrumbs a {
	color: rgba(255, 255, 255, 0.82);
}
.is-style-sekcja-ciemna .woocommerce-breadcrumb a:hover,
.is-style-sekcja-ciemna .wp-block-woocommerce-breadcrumbs a:hover {
	color: var(--wp--preset--color--base);
}

/* --------------------------------------------------------------------------
   4. Galeria produktu

   Zdjęcia mają szare studyjne tło. Na ciemnej sekcji to rzuca się w oczy,
   więc kadr dostaje własną, jasną płytę — produkt zostaje na swoim tle,
   a sekcja na swoim.
   -------------------------------------------------------------------------- */

/* Klasyczna galeria (flexslider) nie jest już używana — strona produktu ma
   blok woocommerce/product-gallery (sekcja 12, „Galeria"). */

.flex-control-thumbs li { margin: 0; }
.flex-control-thumbs img {
	border-radius: 2px;
	opacity: .55;
	cursor: pointer;
	transition: opacity .15s ease;
}
.flex-control-thumbs img.flex-active,
.flex-control-thumbs img:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   5. Warianty produktu

   Katalog rośnie o GT, RALLY i CLUTCH, więc ten blok będzie używany często.
   -------------------------------------------------------------------------- */

.woocommerce div.product form.cart .variations {
	margin-block: var(--wp--preset--spacing--50);
	border-collapse: collapse;
	width: 100%;
}
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	border: 0;
	padding: 0;
	vertical-align: middle;
}
/* Etykieta NAD polem, nie obok (patrz 5a): dawne `width: 1%` z `white-space:
   nowrap` ściskało komórkę do zera, gdy tabela idzie na układ blokowy —
   słowo łamało się wtedy po jednej literze. */
.woocommerce div.product form.cart .variations th.label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.woocommerce div.product form.cart .variations label { font-weight: inherit; }

.woocommerce select,
.woocommerce .variations select {
	appearance: none;
	width: 100%;
	padding: 12px 40px 12px 14px;
	border: 1px solid var(--wp--preset--color--line-strong, #C6C9D0);
	border-radius: 2px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
	                  linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}
.is-style-sekcja-ciemna .woocommerce select,
.is-style-sekcja-ciemna .variations select {
	background-color: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--line-dark);
}
.woocommerce .reset_variations {
	font-size: var(--wp--preset--font-size--small);
	display: inline-block;
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Sekcja opisu na stronie akcesorium zostaje pusta, gdy produkt nie ma treści
   (wzorzec `produkt-opis` nic wtedy nie renderuje) — a sam kontener sekcji ma
   96 px oddechu z góry i z dołu, czyli 192 px niczego. Chowamy go, zamiast
   kasować z szablonu: treść może dojść w każdej chwili i wtedy sekcja wróci
   sama (2026-09-20). */
#description.fbc-sekcja-kotwica:not(:has(.fbc-produkt-opis, .fbc-opis)) { display: none; }

/* --------------------------------------------------------------------------
   5a. Warianty W BOKSIE ZAKUPOWYM

   WooCommerce renderuje wybór wariantu jako <table class="variations">:
   etykieta w jednej komórce, pole w drugiej. W wąskiej karcie zakupowej
   wychodziło z tego pole na 295 px przyklejone do etykiety, a przycisk
   „Add to cart" kurczył się do szerokości napisu i przestawał wyglądać jak
   przycisk z reszty serwisu (klient 2026-09-20: „to powinno być perfect
   ostylowane gdzieś w buy boxie, a przycisk nie będzie jak gdzieś indziej").
   Tabela idzie więc na blokowy układ — etykieta NAD polem, jak w każdym innym
   formularzu na stronie — a przycisk dostaje tę samą geometrię co przy
   produkcie prostym.
   -------------------------------------------------------------------------- */

.fbc-produkt-zakup .variations,
.fbc-produkt-zakup .variations tbody,
.fbc-produkt-zakup .variations tr,
.fbc-produkt-zakup .variations th,
.fbc-produkt-zakup .variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: start;
}
.fbc-produkt-zakup .variations { margin: 0 0 var(--wp--preset--spacing--40); }
.fbc-produkt-zakup .variations tr + tr { margin-block-start: var(--wp--preset--spacing--40); }
.fbc-produkt-zakup .variations th.label {
	margin-block-end: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
	white-space: normal;
}
.fbc-produkt-zakup .variations select {
	width: 100%;
	min-height: 51px;   /* ta sama wysokość co przycisk pod spodem */
	box-sizing: border-box;
	cursor: pointer;
}
.fbc-produkt-zakup .variations select:focus-visible {
	outline: 2px solid var(--wp--preset--color--purr);
	outline-offset: 2px;
}
/* „Clear" pokazuje się dopiero po wyborze wariantu — dyskretny odnośnik pod
   polem, nie drugi przycisk. */
.fbc-produkt-zakup .reset_variations {
	margin-block-start: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-3);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.fbc-produkt-zakup .reset_variations:hover { color: var(--wp--preset--color--purr); }
.fbc-produkt-zakup .single_variation_wrap,
.fbc-produkt-zakup .woocommerce-variation-add-to-cart { width: 100%; }
.fbc-produkt-zakup .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: 0;
}
.fbc-produkt-zakup .woocommerce-variation-add-to-cart .single_add_to_cart_button { flex: 1 1 auto; justify-content: center; }
/* Cena wybranego wariantu nad przyciskiem: ten sam krój co cena główna, mniejsza. */
.fbc-produkt-zakup .woocommerce-variation-price {
	margin-block-end: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}
.fbc-produkt-zakup .woocommerce-variation-price .price del { opacity: 0.5; font-size: 0.8em; }
.fbc-produkt-zakup .woocommerce-variation-description { display: none; }
/* Dopóki wariant nie jest wybrany, przycisk jest wyłączony — ma to wyglądać
   na wyłączony, a nie na wyblakły fiolet: szara powierzchnia i kursor „nie tędy". */
.fbc-produkt-zakup .single_add_to_cart_button.disabled,
.fbc-produkt-zakup .single_add_to_cart_button:disabled {
	background: var(--wp--preset--color--line) !important;
	color: var(--wp--preset--color--contrast-3) !important;
	cursor: not-allowed;
	opacity: 1;
}
.fbc-produkt-zakup .single_add_to_cart_button.disabled::before,
.fbc-produkt-zakup .single_add_to_cart_button:disabled::before { display: none; }


/* Ilość + przycisk w jednej linii */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart { width: 100%; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: stretch;
}
.woocommerce .quantity input.qty {
	width: 72px;
	padding: 14px 10px;
	text-align: center;
	border: 1px solid var(--wp--preset--color--line-strong, #C6C9D0);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
.is-style-sekcja-ciemna .woocommerce .quantity input.qty {
	background: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--line-dark);
}

/* --------------------------------------------------------------------------
   6. Metadane produktu (SKU, marka, kategorie)
   -------------------------------------------------------------------------- */

.product_meta,
.wp-block-woocommerce-product-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--line);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}
.is-style-sekcja-ciemna .product_meta,
.is-style-sekcja-ciemna .wp-block-woocommerce-product-meta {
	color: var(--wp--preset--color--contrast-3);
	border-block-start-color: var(--wp--preset--color--line-dark);
}

/* --------------------------------------------------------------------------
   7. Zakładki opisu — bez pudełek, na linii
   -------------------------------------------------------------------------- */

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--wp--preset--spacing--50);
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--60);
	border-block-end: 1px solid var(--wp--preset--color--line);
	overflow-x: auto;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
	box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: var(--wp--preset--spacing--30) 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--contrast-2);
	border-block-end: 2px solid transparent;
	margin-block-end: -1px;
	text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--wp--preset--color--contrast);
	border-block-end-color: var(--wp--preset--color--purr);
}

.woocommerce div.product .woocommerce-tabs .panel { margin: 0; }
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { display: none; }

/* --------------------------------------------------------------------------
   8. Siatka produktów w archiwum
   -------------------------------------------------------------------------- */

.wp-block-woocommerce-product-template,
.products.columns-3,
.products.columns-4 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--wp--preset--spacing--60);
	list-style: none;
	padding: 0;
	margin: 0;
}
.wp-block-woocommerce-product-template li,
.products li.product { margin: 0; width: auto; float: none; }

.woocommerce ul.products li.product a img {
	border-radius: 2px;
	margin-block-end: var(--wp--preset--spacing--30);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	letter-spacing: -0.02em;
	padding: 0;
	margin-block: 0 var(--wp--preset--spacing--20);
}

/* --------------------------------------------------------------------------
   9. Komunikaty
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: 2px;
	border: 1px solid var(--wp--preset--color--line);
	border-block-start-width: 2px;
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}
.woocommerce-message { border-block-start-color: var(--wp--preset--color--purr); }
.woocommerce-error   { border-block-start-color: #A32015; }

/* --------------------------------------------------------------------------
   10. Opinie
   -------------------------------------------------------------------------- */

.woocommerce #reviews #comments ol.commentlist li .comment-text {
	border: 0;
	border-block-end: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	padding: 0 0 var(--wp--preset--spacing--50);
	margin: 0;
}
.is-style-sekcja-ciemna .woocommerce #reviews #comments ol.commentlist li .comment-text {
	border-block-end-color: var(--wp--preset--color--line-dark);
}
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before { color: var(--wp--preset--color--purr); }
.is-style-sekcja-ciemna .woocommerce .star-rating span::before { color: var(--wp--preset--color--base); }


/* --------------------------------------------------------------------------
   11. Sklep — siatka z filtrami (archive-product.html, taxonomy-product_cat.html)

   Filtry WooCommerce (bloki product-filter-*) w przyklejonej kolumnie po
   lewej, siatka po prawej. Karta produktu: kafel 4:3 na szarej płycie
   (base-2) ze ściętymi rogami, zdjęcie w całości (`contain`), pod nim
   kategoria w mono, tytuł, cena i przycisk w jednym wierszu. Kafle
   akcesoriów to wycięte z tła oryginały osadzone na tej samej płycie
   (inc/sklep.php, meta `fbc_kadr_id`), więc siatka jest jednolita.
   -------------------------------------------------------------------------- */

/* Lista sklepu podzielona na kategorie (2026-09-20). Nagłówek jest pozycją tej
   samej siatki na całą jej szerokość — osobne listy rozjeżdżały podmianę
   wyników po kliknięciu filtra (inc/sklep.php). */
.fbc-sklep__naglowek {
	grid-column: 1 / -1;
	display: block;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	list-style: none;
}
.fbc-sklep__naglowek:not(:first-child) { margin-block-start: var(--wp--preset--spacing--60); }
.fbc-sklep__grupa-tytul {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--30);
	border-block-end: 1px solid var(--wp--preset--color--line);
	letter-spacing: -0.01em;
}

/* Oddech nad sklepem: sekcja dostaje padding atrybutem bloku (styl inline),
   więc nadpisujemy go `!important`. Między ciemnym nagłówkiem a etykietą
   „FILTER" było 120 px pustki (klient 2026-09-20: „tu jest za duża przerwa”);
   zostaje 24 px padding + 24 px odstępu sekcji. */
.fbc-sklep-sekcja { padding-block-start: var(--wp--preset--spacing--50) !important; }

/* Pola kwot w filtrze ceny są szersze niż ich połowa wiersza (WooCommerce daje
   im stałą szerokość), więc prawe wychodziło poza kadr — na telefonie o 14 px
   za krawędź ekranu (klient 2026-09-20: „tu jest jeszcze okropnie”). */
.wc-block-product-filter-price-slider__left,
.wc-block-product-filter-price-slider__right { min-width: 0; }
.wc-block-product-filter-price-slider__left input,
.wc-block-product-filter-price-slider__right input {
	box-sizing: border-box;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
}

.fbc-sklep {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
/* Obie kolumny zaczynają się na tej samej wysokości (klient 2026-09-26) —
   WordPress dawał siatce górny margines jak drugiemu elementowi w „flow”. */
.fbc-sklep > .fbc-sklep__siatka { margin-block-start: 0; }
.fbc-sklep__filtry { position: sticky; top: var(--wp--preset--spacing--60); }
.fbc-sklep__filtry .fbc-etykieta { margin-block-end: var(--wp--preset--spacing--40); }
.fbc-sklep__tytul-filtra {
	margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--20);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--line);
	font-size: 0.88rem;
	font-weight: 700;
}
.wp-block-woocommerce-product-filters { font-size: var(--wp--preset--font-size--small); }

/* --------------------------------------------------------------------------
   11a. Filtry — wygląd (klient 2026-09-17: „ostyluj to zgodnie z naszymi
        standardami")

   Bloki filtrów wchodzą z własnym arkuszem PO motywie i z gołymi polami
   formularza — pola ceny miały `border: 2px inset` i Arial (zmierzone).
   Tu jest cały wygląd kolumny: kwadratowe pola wyboru w brandowym fiolecie,
   suwak na naszej linii, kwoty wypełnione szarym jak reszta formularzy.
   Selektory celują w KLASY Z RENDERU (`wc-block-product-filter-*`), a nie
   w nazwy bloków — poprzednia wersja mijała się z połową z nich.
   -------------------------------------------------------------------------- */

/* Bloki filtrów mają własne pudełka i suwak szerszy niż kolumna — zdejmujemy. */
.wp-block-woocommerce-product-filters .wc-block-product-filter-checkbox-list,
.wp-block-woocommerce-product-filters .wc-block-interactivity-checkbox-list,
.wp-block-woocommerce-product-filters .wc-block-product-filter-checkbox-list__list,
.wp-block-woocommerce-product-filters .wp-block-woocommerce-product-filter-checkbox-list { border: 0 !important; padding: 0 !important; margin: 0 !important; list-style: none; }
.wp-block-woocommerce-product-filters .wp-block-woocommerce-product-filter-checkbox-list fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.wp-block-woocommerce-product-filters .wp-block-woocommerce-product-filter-checkbox-list legend { padding: 0; }
.wp-block-woocommerce-product-filters .wp-block-woocommerce-product-filter-price-slider,
.wp-block-woocommerce-product-filters .wc-block-product-filter-price-slider { max-width: 100%; box-sizing: border-box; }

/* ---- lista wyboru ---- */
.wp-block-woocommerce-product-filters .wc-block-product-filter-checkbox-list__items { display: grid; gap: 2px; }
.wp-block-woocommerce-product-filters .wc-block-product-filter-checkbox-list__item { margin: 0; }
.wp-block-woocommerce-product-filters .wc-block-product-filter-checkbox-list__label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-block: 7px;
	cursor: pointer;
}
/* Szara plama pod polem (`::before` bloku) ustępuje własnej ramce. */
.wp-block-woocommerce-product-filters .wc-block-product-filter-checkbox-list__input-wrapper::before { display: none !important; }
.wp-block-woocommerce-product-filters .wc-block-product-filter-checkbox-list__input-wrapper { display: flex; position: relative; }
.wp-block-woocommerce-product-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input {
	width: 16px;
	height: 16px;
	font-size: 16px;
	flex: none;
	background: var(--wp--preset--color--base) !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 2px;
	transition: background-color .15s ease, border-color .15s ease;
}
.wp-block-woocommerce-product-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked {
	background: var(--wp--preset--color--purr) !important;
	border-color: var(--wp--preset--color--purr) !important;
}
.wp-block-woocommerce-product-filters input[type="checkbox"].wc-block-product-filter-checkbox-list__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--purr);
	outline-offset: 2px;
}
/* Ptaszek leży NA polu, nie obok — blok wstawia go jako rodzeństwo inputa. */
.wp-block-woocommerce-product-filters .wc-block-product-filter-checkbox-list__mark {
	position: absolute;
	inset-block-start: 4px;
	inset-inline-start: 3px;
	width: 10px;
	height: 8px;
	color: var(--wp--preset--color--base);
	pointer-events: none;
}
.wp-block-woocommerce-product-filters .wc-block-product-filter-checkbox-list__text {
	font-size: 0.82rem;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast-2);
	transition: color .15s ease;
}
.wp-block-woocommerce-product-filters .wc-block-product-filter-checkbox-list__label:hover .wc-block-product-filter-checkbox-list__text { color: var(--wp--preset--color--contrast); }
.wp-block-woocommerce-product-filters .wc-block-product-filter-checkbox-list__count {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	color: var(--wp--preset--color--contrast-3);
}

/* ---- suwak ceny ---- */
.wp-block-woocommerce-product-filters .wc-block-product-filter-price-slider__content {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
	grid-template-areas: "price-slider price-slider" "left-input right-input" !important;
	column-gap: 10px;
	row-gap: var(--wp--preset--spacing--30);
}
.wp-block-woocommerce-product-filters .wc-block-product-filter-price-slider__range {
	--wc-product-filter-price-slider: var(--wp--preset--color--purr);
	width: auto !important;
	min-width: 0 !important;
	height: 3px;
	margin-block: 10px 4px;
}
.wp-block-woocommerce-product-filters .wc-block-product-filter-price-slider__range .range-bar { height: 3px; }
/* Uchwyty: białe koło w fioletowej obwódce. */
.wp-block-woocommerce-product-filters .wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--purr);
	box-shadow: none;
	cursor: pointer;
}
.wp-block-woocommerce-product-filters .wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--purr);
	box-shadow: none;
	cursor: pointer;
}
/* Kwoty: wypełnione szarym, bez ramki — jak pola w formularzu opinii. */
.wp-block-woocommerce-product-filters .wc-block-product-filter-price-slider__left,
.wp-block-woocommerce-product-filters .wc-block-product-filter-price-slider__right {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 9px 10px;
	background: #f4f4f6;
	border: 1px solid transparent;
	border-radius: 3px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.74rem;
	color: var(--wp--preset--color--contrast);
	transition: border-color .15s ease, background-color .15s ease;
}
.wp-block-woocommerce-product-filters .wc-block-product-filter-price-slider__right { text-align: end; }
.wp-block-woocommerce-product-filters .wc-block-product-filter-price-slider__left:focus-visible,
.wp-block-woocommerce-product-filters .wc-block-product-filter-price-slider__right:focus-visible {
	outline: none;
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--purr);
}

/* ---- wybrane filtry (plakietki) ---- */
.wp-block-woocommerce-product-filters .wc-block-product-filter-removable-chips__items { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--wp--preset--spacing--40); padding: 0; }
.wp-block-woocommerce-product-filters .wc-block-product-filter-removable-chips__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 8px;
	background: color-mix(in srgb, var(--wp--preset--color--purr) 10%, transparent);
	border: 0;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.66rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--purr);
}
.wp-block-woocommerce-product-filters .wc-block-product-filter-removable-chips__remove { color: inherit; cursor: pointer; }

/* ---- przycisk filtrów na telefonie ---- */
.wp-block-woocommerce-product-filters .wc-block-product-filters__open-overlay { font-family: var(--wp--preset--font-family--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
/* Liczba aktywnych filtrów na przycisku (assets/js/filtry.js) — na telefonie
   chipy z aktywnymi filtrami są schowane w zamkniętym panelu. */
.wp-block-woocommerce-product-filters .wc-block-product-filters__open-overlay[data-fbc-aktywne]::after {
	content: attr(data-fbc-aktywne);
	display: inline-grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	margin-inline-start: 8px;
	padding-inline: 5px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--wp--preset--color--purr);
	color: var(--wp--preset--color--base);
	font-size: 0.68rem;
	letter-spacing: 0;
	line-height: 1;
}
@media (max-width: 899.98px) {
	/* Na telefonie filtry zwijają się do przycisku „Filter products", więc
	   nadlinia FILTER nad nim to drugie to samo słowo. */
	.fbc-sklep__filtry > .fbc-etykieta { display: none; }
}
.wp-block-woocommerce-product-filters .wc-block-product-filter-price-slider__text,
.wp-block-woocommerce-product-filters .wc-block-product-filter-price__content { font-family: var(--wp--preset--font-family--mono); font-size: 0.78rem; }
.wp-block-woocommerce-product-filter-removable-chips .wc-block-product-filter-removable-chips__item,
.wc-block-product-filter-removable-chips__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 6px 6px 0;
	padding: 3px 10px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.wc-block-product-filter-clear-button button,
.wp-block-woocommerce-product-filter-clear-button button {
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--purr);
	cursor: pointer;
}

/* Pasek nad siatką: liczba wyników w mono, sortowanie jako zwykły select. */
.fbc-sklep__pasek {
	padding-block-end: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--50);
	border-block-end: 1px solid var(--wp--preset--color--line);
}
.fbc-sklep__pasek .woocommerce-result-count,
.fbc-sklep__pasek .wc-block-product-results-count { margin: 0; font-family: var(--wp--preset--font-family--mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--wp--preset--color--contrast-3); }
.fbc-sklep__pasek .woocommerce-ordering { margin: 0; }
.fbc-sklep__pasek .woocommerce-ordering select,
.fbc-sklep__pasek .wc-block-catalog-sorting select {
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	padding: 8px 32px 8px 12px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
	/* Select ma `appearance: none` (reset motywu), więc własny chevron —
	   bez niego pole wyglądało jak zwykła ramka (klient 2026-09-20). */
	background: var(--wp--preset--color--base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23111' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") no-repeat right 12px center;
	background-size: 10px auto;
}

/* Siatka i karta. */
/* Liczba kolumn wynika z SZEROKOŚCI karty, nie z liczby kolumn (klient
   2026-09-20: „wciąż te karty są gigantyczne, musi być tak, że w rzędzie ma się
   mieścić 6"). Przy sztywnych trzech kolumnach karta rosła z kontenerem —
   568 px pod opisem produktu. `auto-fill` z progiem 260 px daje sześć kolumn
   tam, gdzie kontener ma pełne 1728 px (karta 278 px), i pięć w sklepie, gdzie
   304 px zabiera kolumna filtrów (karta 275 px) — czyli w obu miejscach karta
   jest tej samej wielkości, a to ona jest jednostką, nie siatka. */
.fbc-sklep .wp-block-woocommerce-product-template,
.fbc-produkt-pasuje .wp-block-woocommerce-product-template {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
}
.fbc-sklep .wp-block-woocommerce-product-template > li:not(.fbc-sklep__naglowek),
.fbc-produkt-pasuje .wp-block-woocommerce-product-template > li {
	--fbc-sciecie: 16px;
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	clip-path: polygon(var(--fbc-sciecie) 0, 100% 0, 100% calc(100% - var(--fbc-sciecie)), calc(100% - var(--fbc-sciecie)) 100%, 0 100%, 0 var(--fbc-sciecie));
	/* Sam kolor ramki — karta nie podnosi się pod kursorem (klient 2026-09-20). */
	transition: border-color 250ms ease;
}
@supports (corner-shape: bevel) {
	.fbc-sklep .wp-block-woocommerce-product-template > li:not(.fbc-sklep__naglowek),
	.fbc-produkt-pasuje .wp-block-woocommerce-product-template > li { clip-path: none; corner-shape: bevel; border-radius: var(--fbc-sciecie) 0 var(--fbc-sciecie) 0; overflow: clip; }
}
@media (hover: hover) {
	.fbc-sklep .wp-block-woocommerce-product-template > li:not(.fbc-sklep__naglowek):hover,
	.fbc-produkt-pasuje .wp-block-woocommerce-product-template > li:hover { border-color: var(--wp--preset--color--purr); }
	.fbc-produkt-karta__kadr:hover img { transform: scale(1.03); }
	/* Drugie ujęcie po najechaniu (meta `fbc_okladka_hover`, inc/sklep.php). */
	.fbc-produkt-karta__kadr .fbc-okladka-hover {
		display: block;
		position: absolute;
		inset: 0;
		opacity: 0;
	}
	.fbc-produkt-karta__kadr img { transition: opacity .35s ease, transform 900ms cubic-bezier(.2,.7,.2,1); }
	.fbc-produkt-karta__kadr:hover .fbc-okladka-hover { opacity: 1; }
	.fbc-produkt-karta__kadr:has(.fbc-okladka-hover):hover img:not(.fbc-okladka-hover) { opacity: 0; }
}
/* Bez kursora (telefon, tablet) drugiego ujęcia nie ma — i się nie wczytuje. */
@media not (hover: hover) { .fbc-produkt-karta__kadr .fbc-okladka-hover { display: none; } }
.fbc-produkt-karta__kadr {
	position: relative;
	/* Kwadrat, jak karty na stronie głównej (klient 2026-09-15). */
	aspect-ratio: 1 / 1;
	/* Tło jak w galerii produktu: płyta z ziarnem (klient 2026-09-26: „na tym
	   samym tle co w galerii”), a nie jasne base-2. */
	background-color: var(--fbc-plyta);
	background-image: var(--fbc-ziarno);
	background-repeat: repeat;
	border-block-end: 1px solid var(--wp--preset--color--line);
	overflow: hidden;
}
.fbc-produkt-karta__kadr .wc-block-components-product-image,
.fbc-produkt-karta__kadr .wp-block-woocommerce-product-image,
.fbc-produkt-karta__kadr a { display: block; height: 100%; margin: 0; }
.fbc-produkt-karta__kadr img {
	width: 100%;
	height: 100%;
	max-width: none;
	/* Cały produkt w kadrze, z marginesem od krawędzi (klient 2026-09-20:
	   „brakuje paddingów… chodzi mi o zdjęcia"). `cover` przycinał wycinki
	   przy górnej i bocznych krawędziach płyty. `!important`, bo WooCommerce
	   wpisuje `object-fit:cover` w atrybut `style` obrazu. */
	object-fit: contain !important;
	/* Kadr jak w galerii: produkt stoi na dolnej krawędzi (cień jest w alfie
	   zdjęcia i ma dochodzić do krawędzi), oddech tylko u góry i po bokach —
	   w tych samych proporcjach co 64 px na kadrze galerii. */
	object-position: 50% 100%;
	padding: 8% 8% 0;
	box-sizing: border-box;
	display: block;
	border-radius: 0;
	background: transparent !important;
}
/* Kadr okładek pedałów (`img.fbc-okladka`) — wspólna reguła z kartami strony głównej w style.css. */
/* Na dolnej krawędzi stoją tylko wycinki z cieniem w alfie. Zdjęcia z własnym
   tłem (sprężyny) i placeholder są wyśrodkowane z równym marginesem (klient
   2026-09-26: „obraz przyklejony do dołu bez sensu, wyśrodkuj”). Klasy
   `has-transparency` / `not-transparent` dokłada wtyczka Dominant Color. */
.fbc-produkt-karta__kadr img:not(.has-transparency) {
	object-position: 50% 50%;
	padding: 10%;
	transition: transform 900ms cubic-bezier(.2,.7,.2,1);
}
.fbc-produkt-karta__kadr .wc-block-components-product-sale-badge,
.fbc-produkt-karta__kadr .wc-block-grid__product-onsale {
	position: absolute; top: var(--wp--preset--spacing--30); right: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--purr); color: var(--wp--preset--color--base); border: 0; border-radius: 2px;
	font-family: var(--wp--preset--font-family--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px;
}
.fbc-produkt-karta__tresc { display: flex; flex-direction: column; flex: 1; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50); }
.fbc-produkt-karta__kategoria { margin: 0 0 var(--wp--preset--spacing--20); font-family: var(--wp--preset--font-family--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--contrast-3); }
.fbc-produkt-karta__kategoria a { color: inherit; text-decoration: none; }
.fbc-produkt-karta__kategoria .wc-block-components-product-details__label,
.fbc-produkt-karta__kategoria .wc-block-components-product-category-list__label,
.fbc-produkt-karta__kategoria .wc-block-components-product-category-list__prefix { display: none; }
/* Tytuł schodzi z 1,2 rem na 1 rem: karta ma teraz ok. 278 px, a nazwy typu
   „PurrPRO BESPOKE HEEL CUP for PurrPRO FORMULA PEDALS" łamały się na pięć
   wierszy i blok tekstu był wyższy od zdjęcia (2026-09-20). */
.fbc-produkt-karta__tytul { margin: 0; font-size: 1rem; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.fbc-produkt-karta__tytul a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.fbc-produkt-karta__tytul a:hover { color: var(--wp--preset--color--purr); }
/* Na stronę produktu prowadzą nazwa i zdjęcie (klient 2026-09-26: „na kartach
   musi być klikalne zdjęcie, link taki sam jak w nazwie”). Od 16.09 klikalna
   była cała karta (rozciągnięty odnośnik tytułu) — to odpadło, bo w stopce
   karty wybiera się wariant i chybione kliknięcie nie może wyrzucać ze sklepu. */
.fbc-sklep .wp-block-woocommerce-product-template > li,
.fbc-produkt-pasuje .wp-block-woocommerce-product-template > li { position: relative; }
.fbc-produkt-karta__kadr,
.fbc-produkt-karta__kategoria,
.fbc-produkt-karta__stopka { position: relative; z-index: 2; }
.fbc-produkt-karta__stopka { margin-block-start: auto; padding-block-start: var(--wp--preset--spacing--40); gap: var(--wp--preset--spacing--30); }
/* Układ stopki (cena z lewej, przycisk z prawej) i krój ceny wprost w CSS, a nie
   z klas bloku — „Pairs with” (produkt-pasuje.php) składa karty ręcznie i bez tego
   miało cenę nad przyciskiem i inny krój (klient 2026-09-28: „to musi być
   praktycznie identyczna karta co w store, z przyciskiem po prawej”). */
.fbc-produkt-karta__stopka {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.fbc-produkt-karta__stopka .wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	font-weight: 500;
}
.fbc-produkt-karta__stopka .wc-block-components-product-price { margin: 0; }
/* Przycisk karty = obrysowany „ghost" ze strony głównej: blok product-button
   ma w szablonach klasę `is-style-outline`, więc krój, ścięcia, obrys i plomba
   przychodzą z jednej definicji w style.css. Tu tylko drobiazgi karty. */
.fbc-produkt-karta__przycisk { margin: 0; }
.fbc-produkt-karta__przycisk .wp-block-button__link { white-space: nowrap; }
/* Styl rdzenia dla bloku product-button drukuje sie po naszym arkuszu (blok
   renderowany w petli), wiec jego `border: 2px solid currentColor` wygrywal
   kolejnoscia - wyzsza specyficznosc przywraca obrys 1 px i kolor ghosta. */
.wp-block-button.is-style-outline.fbc-produkt-karta__przycisk > .wp-block-button__link { border: 0; color: var(--fbc-ghost-linia); }
/* Po najezdzie tekst na plombie (ta sama specyficznosc co wyzej, wiec musi stac tutaj). */
.wp-block-button.is-style-outline.fbc-produkt-karta__przycisk > .wp-block-button__link:hover,
.wp-block-button.is-style-outline.fbc-produkt-karta__przycisk > .wp-block-button__link:focus-visible { color: var(--fbc-ghost-tekst); }
@supports (corner-shape: bevel) {
	.wp-block-button.is-style-outline.fbc-produkt-karta__przycisk > .wp-block-button__link { border: 1px solid var(--fbc-ghost-linia); }
	.wp-block-button.is-style-outline.fbc-produkt-karta__przycisk > .wp-block-button__link:hover,
	.wp-block-button.is-style-outline.fbc-produkt-karta__przycisk > .wp-block-button__link:focus-visible { border-color: var(--fbc-ghost-plomba); }
}
/* Wypełnienie po najechaniu w fiolecie marki, tekst biały (2026-09-27: „te
   wypełnienia przycisków Add to cart chyba powinny być fioletowe”) — domyślny
   ghost na jasnym tle wypełniał się czernią. Wyszarzone „Out of stock” bez zmian. */
.wp-block-button.is-style-outline.fbc-produkt-karta__przycisk:not(.is-brak) > .wp-block-button__link {
	--fbc-ghost-plomba: var(--wp--preset--color--purr);
	--fbc-ghost-tekst: var(--wp--preset--color--base);
}
.fbc-produkt-karta__przycisk .wc-block-components-product-button__button--placeholder { display: none; }
/* „View cart" dopisywane po dodaniu do koszyka — jako link mono, nie drugi przycisk. */
.fbc-produkt-karta__przycisk .added_to_cart {
	display: inline-block;
	margin-inline-start: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--purr);
	text-decoration: none;
}

@media (max-width: 1023.98px) {
	.fbc-sklep .wp-block-woocommerce-product-template,
	.fbc-produkt-pasuje .wp-block-woocommerce-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899.98px) {
	/* Między przyciskiem „Filter products" a licznikiem wyników było 81 px
	   pustego miejsca (dolny odstęp kolumny filtrów + odstęp siatki) — klient
	   2026-09-23. Teraz: tekst przycisku, 27 px, linia, 16 px, licznik. */
	.fbc-sklep { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); }
	.fbc-sklep-sekcja { padding-block-start: var(--wp--preset--spacing--40) !important; }
	.fbc-sklep__filtry { position: static; padding-block-end: var(--wp--preset--spacing--30); border-block-end: 1px solid var(--wp--preset--color--line); }
	/* Lista pod filtrami dostawała jeszcze 24 px wspólnego odstępu bloków
	   (blockGap) — w siatce z własnym `gap` to podwójny odstęp. */
	.fbc-sklep > .fbc-sklep__siatka { margin-block-start: 0; }
	.fbc-sklep__filtry .wp-block-woocommerce-product-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--wp--preset--spacing--40); }
	.fbc-sklep__tytul-filtra { margin-block-start: 0; }
}
@media (max-width: 599.98px) {
	.fbc-sklep .wp-block-woocommerce-product-template,
	.fbc-produkt-pasuje .wp-block-woocommerce-product-template { grid-template-columns: 1fr; }
	.fbc-sklep__pasek { flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--30); }
}

/* --------------------------------------------------------------------------
   12. Strona produktu (single-product*.html)

   Blok zakupowy ciemny z poświatą i ziarnem jak hero; galeria po lewej,
   po prawej nadlinia, tytuł, ocena, lead, cztery cechy w mono, cena,
   formularz koszyka, meta i trzy gwarancje. Dalej: „w pudełku + liczby",
   opis z bazy w typografii stron treści, opinie na ciemnym, FAQ, „Pairs with".
   -------------------------------------------------------------------------- */

.fbc-produkt-zakup .wc-block-components-breadcrumbs,
.fbc-produkt-zakup .wp-block-woocommerce-breadcrumbs { color: var(--wp--preset--color--contrast-2); }
.fbc-produkt-zakup__okruszki { margin-block-end: 0 !important; }
/* Nadlinia pod tytułem (klient 2026-09-10). */
.fbc-produkt-zakup__tresc .wp-block-post-title + .fbc-eyebrow,
.fbc-produkt-zakup__tresc .wp-block-post-title + .fbc-produkt-zakup__kategoria { margin-block: var(--wp--preset--spacing--30) 0; }
.fbc-produkt-zakup .wp-block-woocommerce-breadcrumbs a { color: var(--wp--preset--color--contrast); }
/* Bez `z-index`: wynosiło kolumny nad lightbox, który WooCommerce otwiera atrybutem
   `open` (nie trafia do warstwy nadrzędnej) — przez powiększone zdjęcie przebijały napisy. */
.fbc-produkt-zakup__kolumny { position: relative; }
/* Całe hero produktu na jasnym tle w kolorze kadru zdjęcia (klient 2026-09-10):
   zdjęcia mają wyciętą alfę, więc leżą na nim bez szwu, a jasny obszar sięga
   obu krawędzi okna. Nagłówek nie jest tu nakładany (sekcja nie jest ciemna). */
.fbc-produkt-zakup {
	--fbc-hero-jasne: #fbfbfb;
	--fbc-hero-plyta: var(--fbc-plyta);   /* płyta pod zdjęciem — ta sama co w pasach sekcji */
	--fbc-margines: min(8vw, 136px);   /* margines strony, ten sam co w nagłówku */
	--fbc-pasek-h: 0px;                /* wysokość paska promocji, gdy jest na stronie */
	--fbc-nad: calc(72px + var(--fbc-pasek-h));   /* nagłówek + pasek nad hero */
	position: relative;
	/* Ziarno na samym bloku, nie w ::before (klient 2026-09-15: „zrównaj ziarno
	   w hero na telefonie też"). Wcześniej płyta z ziarnem siedziała w pseudo-
	   elemencie pod `min-width: 1200px`, więc na telefonie hero było płaskie,
	   a pasy sekcji już nie — na styku było to widać. */
	background-color: var(--fbc-hero-plyta);
	background-image: var(--fbc-ziarno);
	background-repeat: repeat;
	color: var(--wp--preset--color--contrast);
	padding-block-start: var(--wp--preset--spacing--50) !important;
}
/* Pseudoelement z płytą usunięty (2026-09-15). Odkąd klient kazał przedłużyć
   szare tło na prawą kolumnę (2026-09-10), miał `inset-block: 0` i `width: 100%`,
   czyli malował dokładnie pudełko bloku — był już tylko kopią jego tła, tyle że
   włączaną od 1200 px. Tło z ziarnem jest teraz na samym bloku, wyżej. */

/* Nagłówek na stronie produktu w tym samym kolorze co hero — inaczej na styku
   widać pasek jaśniejszej bieli. */
body.single-product .wp-site-blocks > header,
body.single-product .fbc-header { background: var(--wp--preset--color--base); }
/* Licznik koszyka (klient 2026-09-25): na białym nagłówku fioletowa plakietka
   z białą cyfrą — biała plakietka zlewała się z tłem. Odwrotnie tylko na
   przezroczystym nagłówku nad ciemnym hero (przed przyklejeniem): biała
   plakietka, fioletowa cyfra. `!important`, bo arkusz bloku mini-cart ładuje
   się po motywie. */
.fbc-header .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--purr) !important;
	color: var(--wp--preset--color--base) !important;
	border-color: var(--wp--preset--color--purr) !important;
	font-weight: 700;
}
body:has(.wp-site-blocks main > .is-style-sekcja-ciemna:first-child):not(.fbc-menu-przyklejone):not(.fbc-szukaj-otwarte) .fbc-header .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--purr) !important;
	border-color: var(--wp--preset--color--base) !important;
}
.fbc-produkt-zakup .wp-block-post-title,
.fbc-produkt-zakup .fbc-produkt-zakup__cechy li,
.fbc-produkt-zakup .fbc-produkt-zakup__gwarancje { color: var(--wp--preset--color--contrast); }
/* ---- Galeria: blok woocommerce/product-gallery (Interactivity API) ----
   Duży obraz na całą szerokość kolumny (zdjęcia 800×800, kwadrat), pod nim
   siatka miniatur 6 w rzędzie — wszystkie 12 widoczne, bez przewijania.
   Przełączanie: klik w miniaturę, strzałki na obrazie, klawisze ←/→,
   przeciągnięcie na dotyku (mechanika WooCommerce). Klik w obraz otwiera
   lightbox (<dialog>, Esc zamyka, ←/→ zmienia). Reguły WooCommerce są
   w :where(), więc nadpisania nie potrzebują !important — poza układem
   flex wrappera, który ustawia klasa układu bloku. */
.fbc-galeria {
	--fbc-mini: 92px;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
	width: 100%;
}
/* Desktop (klient 2026-09-10, wzór: Fanatec): blok zakupowy na całą wysokość
   okna, duże zdjęcie ograniczone wysokością okna (kwadrat), miniatury
   w pionowej kolumnie PO PRAWEJ od zdjęcia, przewijanej gdy nie mieszczą się
   wszystkie. Poniżej 1024 px: zdjęcie na całą szerokość i siatka miniatur pod nim. */
/* Bez ściętych rogów: na zdjęciach produktowych ścięcie tnie sam kadr, a nie ramkę
   (klient 2026-09-10). Ścięcia zostają na strzałkach, kartach i kadrach opisu. */
.fbc-galeria .wc-block-product-gallery-large-image {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	background: transparent;   /* tło daje sekcja — zdjęcia mają wyciętą alfę (klient 2026-09-10) */
}
.fbc-galeria .wc-block-product-gallery-large-image__container { display: flex; align-items: center; height: 100%; margin: 0; padding: 0; list-style: none; overflow: hidden; }
.fbc-galeria .wc-block-product-gallery-large-image__container:focus-visible { outline: 2px solid var(--wp--preset--color--base); outline-offset: -2px; }
.fbc-galeria .wc-block-product-gallery-large-image__wrapper { flex: 0 0 100%; min-width: 100%; max-width: 100%; height: 100%; display: flex; }
.fbc-galeria .wc-block-product-gallery-large-image__wrapper[hidden] { display: none; }
.fbc-galeria .wc-block-components-product-image { width: 100%; height: 100%; margin: 0; }
.fbc-galeria .wc-block-woocommerce-product-gallery-large-image__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain !important;   /* zdjęcia mają wyciętą alfę — mają leżeć w całości w kadrze */
	box-sizing: border-box;
	/* Dolny oddech zdjęty (klient 2026-09-15): duże zdjęcie ma teraz cień wtopiony
	   w kanał alfa i cień musi dochodzić do krawędzi kadru, a nie wisieć nad nią.
	   Bez tego produkt zrobiłby się mniejszy, bo cień zajmuje część wysokości. */
	padding: clamp(16px, 3.2vw, 64px) clamp(16px, 3.2vw, 64px) 0;
	background: transparent !important;   /* WC maluje na <img> „dominujący kolor" — prześwitywał jako szare pasy */
	cursor: zoom-in;
}
/* Strzałki na obrazie: białe kwadraty ze ściętym rogiem, jak nawigacja
   rotacji na głównej; pojawiają się wyraźniej po najeździe na galerię. */
.fbc-galeria .wc-block-product-gallery-large-image__inner-blocks { position: absolute; inset: 0; width: auto; height: auto; pointer-events: none; }
.fbc-galeria .wc-block-next-previous-buttons { position: absolute; inset: 0; width: auto; height: auto; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--wp--preset--spacing--40); pointer-events: none; }
.fbc-galeria .wc-block-next-previous-buttons__button {
	--fbc-sciecie: 8px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	pointer-events: auto;
	opacity: 0.7;
	transition: opacity .2s ease, background-color .2s ease;
	clip-path: polygon(var(--fbc-sciecie) 0, 100% 0, 100% calc(100% - var(--fbc-sciecie)), calc(100% - var(--fbc-sciecie)) 100%, 0 100%, 0 var(--fbc-sciecie));
}
@supports (corner-shape: bevel) {
	.fbc-galeria .wc-block-next-previous-buttons__button { clip-path: none; corner-shape: bevel; border-radius: var(--fbc-sciecie) 0 var(--fbc-sciecie) 0; }
}
.fbc-galeria:hover .wc-block-next-previous-buttons__button,
.fbc-galeria .wc-block-next-previous-buttons__button:focus-visible { opacity: 1; }
.fbc-galeria .wc-block-next-previous-buttons__button { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); fill: var(--wp--preset--color--base); }
.fbc-galeria .wc-block-next-previous-buttons__button:hover { background: var(--wp--preset--color--purr); color: var(--wp--preset--color--base); }
.fbc-galeria .wc-block-next-previous-buttons__button[aria-disabled="true"] { opacity: 0.25; cursor: default; pointer-events: none; }
.fbc-galeria .wc-block-next-previous-buttons__button:focus-visible { outline: 2px solid var(--wp--preset--color--base); outline-offset: 2px; }
.fbc-galeria .wc-block-next-previous-buttons__icon { width: 10px; height: 14px; }
/* Miniatury: siatka 6 kolumn, nieaktywne przygaszone, aktywna z fioletową ramką. */
.fbc-galeria .wc-block-product-gallery-thumbnails { aspect-ratio: auto !important; height: auto !important; width: 100%; order: 1; mask-image: none !important; -webkit-mask-image: none !important; }
.fbc-galeria .wc-block-product-gallery-thumbnails__scrollable { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); height: auto; overflow: visible; }
.fbc-galeria .wc-block-product-gallery-thumbnails__thumbnail { display: block; width: 100%; height: auto; }
.fbc-galeria .wc-block-product-gallery-thumbnails__thumbnail__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	max-height: none;
	aspect-ratio: 1;
	object-fit: contain;
	box-sizing: border-box;
	padding: 8px;   /* oddech wokół produktu w kafelku (klient 2026-09-10) */
	background: var(--wp--preset--color--base);   /* karta miniatury: biel dokładnie pod obrazem */
	border-radius: 2px;
	outline: 1px solid transparent;
	outline-offset: -1px;
	opacity: 0.72;
	cursor: pointer;
	transition: opacity .2s ease, outline-color .2s ease;
}
.fbc-galeria .wc-block-product-gallery-thumbnails__thumbnail__image:hover,
.fbc-galeria .wc-block-product-gallery-thumbnails__thumbnail__image:focus-visible { opacity: 1; }
.fbc-galeria .wc-block-product-gallery-thumbnails__thumbnail__image:focus-visible { outline: 2px solid var(--wp--preset--color--base); outline-offset: 2px; }
.fbc-galeria .wc-block-product-gallery-thumbnails__thumbnail__image--is-active { opacity: 1; filter: none; outline-color: var(--wp--preset--color--purr-light); cursor: default; }
@media (min-width: 1200px) {
	body:has(.wp-site-blocks main > .is-style-sekcja-ciemna:first-child) .wp-site-blocks main > .fbc-produkt-zakup:first-child {
		padding-block-start: calc(72px + var(--wp--preset--spacing--50));
	}
	/* Hero wypełnia okno pod nagłówkiem (72 px), żeby pasek zakładek nie wchodził
	   w kadr — ale treść stoi PRZY GÓRZE, nie na środku (klient 2026-09-10:
	   najpierw „tracimy miejsce z góry", potem „hero nie ma 100 dvh"). */
	.fbc-produkt-zakup {
		--fbc-galeria-h: calc(100dvh - var(--fbc-nad) - 8.5rem);
		box-sizing: border-box;
		min-height: calc(100dvh - var(--fbc-nad));
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding-block-end: var(--wp--preset--spacing--60) !important;
	}
	/* Kadr wypełnia całe wolne miejsce w kolumnie: pełna szerokość i wysokość okna,
	   więc na desktopie jest poziomy. Zdjęcia z sesji są kwadratowe i leżą w nim
	   w całości (`contain`) na tle w kolorze tła zdjęć — brzegi są niewidoczne
	   (klient 2026-09-10). Miniatury po LEWEJ stronie zdjęcia. */
	.fbc-galeria {
		/* Pierwszy tor `auto`, nie stałe `--fbc-mini`: produkt z jednym zdjęciem
		   NIE MA bloku miniatur (a przy wariantach bywa on ukryty), więc przy
		   stałym torze duże zdjęcie wpadało automatem do kolumny miniatur
		   i renderowało się na 92 px — na stronach akcesoriów kadr był po
		   prostu pusty (2026-09-20). Przy `auto` pusty tor ma zero szerokości,
		   a zdjęcie i tak stoi w drugiej kolumnie, bo obie pozycje mają
		   przypisane kolumny wprost. */
		grid-template-columns: auto minmax(0, 1fr);
		align-items: stretch;
		width: 100%;
	}
	/* Na szerokich ekranach kadr rośnie tylko na szerokość — wysokość zawsze mieści się
	   w oknie (klient 2026-09-10). 128 px to nagłówek 72 + odstępy sekcji 24 + 32. */
	.fbc-galeria .wc-block-product-gallery-large-image { width: 100%; aspect-ratio: auto; height: 100%; max-height: calc(100dvh - var(--fbc-nad) - 80px); min-height: 0; align-self: stretch; }
	.fbc-produkt-zakup .fbc-galeria .wc-block-product-gallery-thumbnails { max-height: calc(100dvh - var(--fbc-nad) - 80px); }
	.fbc-galeria .wc-block-woocommerce-product-gallery-large-image__image { object-fit: contain !important; }
	/* Selektory z `.fbc-produkt-zakup`, bo bazowe reguły miniatur (niżej w pliku,
	   z !important) inaczej wygrywają kolejnością. */
	/* height: 0 + min-height: 100% — kolumna miniatur nie podnosi wiersza siatki,
	   wysokość wiersza daje kwadratowy obraz, a miniatury się do niej dopasowują. */
	.fbc-produkt-zakup .fbc-galeria .wc-block-product-gallery-large-image { order: 2; grid-column: 2; grid-row: 1; }
	.fbc-produkt-zakup .fbc-galeria .wc-block-product-gallery-thumbnails { grid-column: 1; grid-row: 1; }
	/* WooCommerce chowa pasek miniatur, gdy w galerii zostaje jedno widoczne
	   zdjęcie (wiąże `hidden` z `context.hideNextPreviousButtons`). Klient chce
	   widzieć zawsze co najmniej jedną miniaturę, więc pasek pokazujemy mimo
	   tego atrybutu; przypadek „paska nie ma w ogóle" dokłada inc/galeria.php. */
	.fbc-produkt-zakup .fbc-galeria .wc-block-product-gallery-thumbnails[hidden] { display: block !important; }
	/* Miniatura dorysowana przez motyw: nie ma czego przełączać, więc nie udaje
	   przycisku. */
	.fbc-produkt-zakup .fbc-galeria .fbc-galeria__mini-jedna { pointer-events: none; }
	.fbc-produkt-zakup .fbc-galeria .wc-block-product-gallery-thumbnails { order: 1; width: var(--fbc-mini); height: 0 !important; min-height: 100%; align-self: stretch; overflow: hidden; }
	/* Miniatury stoją nieruchomo razem ze zdjęciem (klient 2026-09-15). Próbowały
	   podchodzić na miejsce zwolnione przez schowany nagłówek, ale w kadrze hero
	   każdy taki ruch to niepokój obok nieruchomego zdjęcia — a nagłówek chowa się
	   teraz dopiero za hero, więc i tak nie miałyby na co podchodzić. */
	.fbc-produkt-zakup .fbc-galeria .wc-block-product-gallery-thumbnails__scrollable {
		display: flex !important;
		flex-direction: column;
		grid-template-columns: none;
		gap: 8px;
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		scrollbar-width: none;
		mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
		-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
	}
	.fbc-produkt-zakup .fbc-galeria .wc-block-product-gallery-thumbnails__scrollable::-webkit-scrollbar { display: none; }
	.fbc-produkt-zakup .fbc-galeria .wc-block-product-gallery-thumbnails__thumbnail { flex: 0 0 auto; width: 100%; height: auto; }
	/* Kolumna ze zdjęciem zostaje w kadrze, gdy tekst po prawej jest dłuższy niż okno;
	   kolumna treści rozciąga się na wysokość sekcji, żeby pasek zakupowy usiadł
	   na jej dole i mógł się przykleić do dolnej krawędzi okna. */
	/* Blok zakupowy wykorzystuje całą szerokość okna (bez limitu „wide"), tylko
	   z marginesem strony — klient 2026-09-10. Dotyczy okruszków i obu kolumn. */
	/* `max-width: none` nie wystarcza: blok kolumn dostaje jeszcze `width` równe „wide size"
	   (przy szerokich oknach ~1629 px) i auto marginesy, więc siedział węziej niż okruszki. */
	.fbc-produkt-zakup > .alignwide { max-width: none !important; width: 100% !important; margin-inline: 0 !important; }
	/* Margines strony zostaje taki, jak w nagłówku (root padding), żeby lewa i prawa
	   krawędź hero stały w jednej linii z logo i menu — klient 2026-09-10. */
	/* Kolumna zdjęcia szersza niż domyślne 56 %, żeby kadr wypełniający wysokość okna
	   wychodził poziomy, a nie kwadratowy (klient 2026-09-10). */
	.fbc-produkt-zakup__kolumny > .wp-block-column:first-child { flex-basis: 64% !important; }
	.fbc-produkt-zakup__kolumny > .fbc-produkt-zakup__tresc { flex-basis: 36% !important; }
	.fbc-produkt-zakup__kolumny { align-items: stretch; }
	/* Kolumny wypełniają wysokość sekcji, a kadr wysokość kolumny — bez tego pod zdjęciem
	   zostawało 130–300 px pustki (klient 2026-09-10). Zdjęcie i miniatury nadal wyśrodkowane. */
	/* Wiersz kolumn rośnie z treścią; to strona się przewija, a zdjęcie zostaje w kadrze
	   (klient 2026-09-10, wzór Canyon: najpierw przewija się kolumna z treścią, potem strona). */
	.fbc-produkt-zakup__kolumny { flex: 1; min-height: 0; align-items: flex-start; }
	.fbc-produkt-zakup__kolumny > .wp-block-column:first-child {
		/* Element `sticky` tworzy własny kontekst układania, więc lightbox (dziecko galerii)
		   malował się razem z nim na poziomie zera i przebijały przez niego menu oraz karta.
		   Wyniesienie kolumny ponad nie rozwiązuje problem (klient 2026-09-11). */
		z-index: 30;
		position: sticky;
		/* Stały odstęp i stała wysokość — kolumna ze zdjęciem NIE bierze udziału
		   w rachunku z chowanym menu (klient 2026-09-15: "niech ono jak najmniej
		   drga"). Gdy wisiała na `--fbc-naglowek-teraz`, przy każdym ruchu nagłówka
		   zdjęcie płynęło razem z nim i zmieniało wysokość. Na zwolnione miejsce
		   podchodzi tylko pasek miniatur — patrz jego `transform` wyżej w tej sekcji. */
		inset-block-start: calc(72px + var(--wp--preset--spacing--50));
		align-self: flex-start;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: calc(100dvh - 72px - 2 * var(--wp--preset--spacing--50));
		min-height: 0;
	}
	.fbc-produkt-zakup .fbc-galeria { flex: 1; min-height: 0; align-items: center; }
	/* Prawa kolumna jako biała karta na szarej płycie (klient 2026-09-10), ze ściętymi
	   narożnikami jak karty produktów. */
	.fbc-produkt-zakup__tresc {
		--fbc-sciecie: 22px;
		--fbc-karta-pad: var(--wp--preset--spacing--60);
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		/* Karta sięga dolnej krawędzi okna: górny odstęp sekcji to 24 px, więc
		   tyle odejmujemy od wysokości okna. Wcześniej było 80 px i na stronie
		   z krótką treścią pasek zakupowy kończył się 24 px nad krawędzią,
		   podczas gdy na FORMULA (karta wyższa od okna) przyklejał się dokładnie
		   do niej — te same strony wyglądały inaczej (klient 2026-09-18). */
		min-height: calc(100dvh - var(--fbc-nad) - 24px);
		padding: var(--fbc-karta-pad) var(--fbc-karta-pad) 0;   /* dolny odstęp wnosi warstwa z przyciskiem */
		background: var(--wp--preset--color--base);
		clip-path: polygon(var(--fbc-sciecie) 0, 100% 0, 100% calc(100% - var(--fbc-sciecie)), calc(100% - var(--fbc-sciecie)) 100%, 0 100%, 0 var(--fbc-sciecie));
	}
	@supports (corner-shape: bevel) {
		.fbc-produkt-zakup__tresc { clip-path: none; corner-shape: bevel; border-radius: var(--fbc-sciecie) 0 var(--fbc-sciecie) 0; }
	}
	/* Blok z wysyłką, SKU i przyciskiem trzyma się dołu karty także wtedy, gdy treść
	   nad nim jest wyższa niż karta i przewija się w środku (klient 2026-09-10). */
	/* `display: contents`: formularz staje się bezpośrednim dzieckiem karty, więc jego
	   `position: sticky` ma do dyspozycji całą jej wysokość (inaczej rodzic był równy
	   samemu formularzowi i przyklejenie nic nie dawało). */
	.fbc-produkt-zakup__kup { display: contents !important; }   /* reguła bazowa stoi niżej w pliku */
	/* Przyklejony do dołu karty jest sam przycisk — lista wysyłki i SKU jadą z treścią
	   (klient 2026-09-10). */
	/* Pasek z przyciskiem to osobna warstwa nad przewijaną treścią: sięga krawędzi karty
	   i rzuca w górę delikatny cień (klient 2026-09-10, wzór canyon.com). */
	.fbc-produkt-zakup__kup .wp-block-woocommerce-add-to-cart-form {
		/* `!important`, bo odstęp bloków z rdzenia (`--wp--style--block-gap`) ląduje
		   na dzieciach kolumny z !important i zjadał ten automatyczny margines.
		   Bez niego pasek zakupowy siadał tam, gdzie kończyła się treść — na
		   stronie z krótkim opisem zostawało pod nim 117 px pustej karty
		   (klient 2026-09-18: „add to cart ma dochodzić do dołu ekranu nawet
		   jak jest za mało treści"). Na stronie FORMULA było tego nie widać,
		   bo tam karta jest wyższa od okna i pasek i tak wisi przyklejony. */
		margin-block-start: auto !important;
		position: sticky;
		inset-block-end: 0;
		z-index: 5; /* nad przyciskiem „Select” listy dodatków (.fbc-wariant-menu, z-index 3) */
		margin-inline: calc(-1 * var(--fbc-karta-pad));
		/* Odstępy w pionie takie same jak w poziomie — margines karty z każdej strony (klient). */
		padding: var(--fbc-karta-pad);
		background: var(--wp--preset--color--base);
		box-shadow: 0 -12px 24px -10px rgba(30, 30, 32, 0.16);
	}
}

/* Bardzo niskie okna (poniżej 800 px): jeszcze mniejszy tytuł i lead ograniczony do trzech
   linii, żeby cena i przycisk zostały nad krawędzią okna. */
/* Telefon i tablet: ta sama płyta pod galerią, na całą szerokość okna, a zamiast
   siatki miniatur — kropki pod zdjęciem (klient 2026-09-10). Kropką jest sam kafelek
   miniatury: obraz zostaje w środku, tylko niewidoczny, więc klik i cała mechanika
   przełączania WooCommerce działają bez zmian. */
@media (max-width: 1199.98px) {
	.fbc-galeria .wc-block-product-gallery-thumbnails__scrollable {
		display: flex !important;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		gap: 10px;
		grid-template-columns: none;
		padding-block-start: var(--wp--preset--spacing--20);
	}
	/* Poziome pigułki zamiast kropek (klient 2026-09-11): pozycja aktywna jest
	   szersza od pozostałych, więc widać ją bez patrzenia na kolor. */
	.fbc-galeria .wc-block-product-gallery-thumbnails__thumbnail {
		width: 16px;
		height: 6px;
		flex: 0 0 auto;
		border-radius: 999px;
		overflow: hidden;
		background: rgba(30, 30, 32, 0.22);
		transition: width 260ms cubic-bezier(.2,.7,.2,1), background 200ms ease;
	}
	.fbc-galeria .wc-block-product-gallery-thumbnails__thumbnail:has(.wc-block-product-gallery-thumbnails__thumbnail__image--is-active) {
		width: 38px;
		background: var(--wp--preset--color--purr);
	}
	.fbc-galeria .wc-block-product-gallery-thumbnails__thumbnail__image {
		width: 100%;
		height: 100%;
		min-width: 0;
		opacity: 0;
		background: transparent;
		border-radius: inherit;
		outline: 0 !important;
	}
	.fbc-produkt-zakup .fbc-galeria {
		position: relative;
		padding-block: var(--wp--preset--spacing--50);
		margin-inline: calc(-1 * var(--fbc-margines));
		padding-inline: var(--fbc-margines);
		background-color: var(--fbc-plyta);
		background-image: var(--fbc-ziarno);
		background-repeat: repeat;
	}
}

/* Lightbox: to samo szare tło z ziarnem co płyta pod zdjęciem (klient 2026-09-10),
   jedno zdjęcie na ekran. WooCommerce trzyma w dialogu
   wszystkie zdjęcia jedno pod drugim i po wyborze przewija listę tak, żeby
   wybrane było na środku — więc lista dostaje scroll-snap (każde zdjęcie
   = pełna wysokość okna, przyciąganie do środka), a przewijanie w dół/górę,
   klawisze ←/→ i strzałki (inc/galeria.php) zmieniają zdjęcie. */
.wc-block-product-gallery-dialog {
	/* WooCommerce otwiera dialog atrybutem `open`, nie `showModal()`, więc nie trafia on
	   do warstwy nadrzędnej przeglądarki — bez własnego `z-index` przebijały się przez niego
	   elementy strony z ustawionym z-index (okruszki, ocena) — klient 2026-09-11. */
	z-index: 1000;
	/* Pełny ekran i `overflow: hidden`: powiększone zdjęcie ma zostać w oknie lightboxa,
	   inaczej wychodzi poza dialog i przez jego przezroczystą alfę widać stronę. */
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: var(--fbc-plyta);
	background-image: var(--fbc-ziarno);
	background-repeat: repeat;
	color: var(--wp--preset--color--contrast);
	border: 0;
}
.wc-block-product-gallery-dialog::backdrop { background: rgba(232, 232, 235, 0.94); }
.wc-block-product-gallery-dialog__header { position: absolute; top: 0; right: 0; z-index: 2; padding: var(--wp--preset--spacing--50); }
.wc-block-product-gallery-dialog__close-button,
.fbc-galeria-dialog__strzalka {
	--fbc-sciecie: 8px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	fill: var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--contrast);
	cursor: pointer;
	clip-path: polygon(var(--fbc-sciecie) 0, 100% 0, 100% calc(100% - var(--fbc-sciecie)), calc(100% - var(--fbc-sciecie)) 100%, 0 100%, 0 var(--fbc-sciecie));
}
@supports (corner-shape: bevel) {
	.wc-block-product-gallery-dialog__close-button,
	.fbc-galeria-dialog__strzalka { clip-path: none; corner-shape: bevel; border-radius: var(--fbc-sciecie) 0 var(--fbc-sciecie) 0; }
}
/* Zamknięcie: sama ikona, bez płytki (klient 2026-09-10). */
.wc-block-product-gallery-dialog__close-button {
	background: transparent;
	fill: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
	clip-path: none;
	border-radius: 0;
	width: 48px;
	height: 48px;
}
.wc-block-product-gallery-dialog__close-button:hover { background: transparent; fill: var(--wp--preset--color--purr); color: var(--wp--preset--color--purr); }
.fbc-galeria-dialog__strzalka:hover { background: var(--wp--preset--color--purr); fill: var(--wp--preset--color--base); color: var(--wp--preset--color--base); }
.wc-block-product-gallery-dialog__close-button:focus-visible,
.fbc-galeria-dialog__strzalka:focus-visible { outline: 2px solid var(--wp--preset--color--contrast); outline-offset: 2px; }
.fbc-galeria-dialog__strzalka[aria-disabled="true"] { opacity: 0.25; cursor: default; pointer-events: none; }
.fbc-galeria-dialog__nav { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--wp--preset--spacing--40); pointer-events: none; }
.fbc-galeria-dialog__nav > * { pointer-events: auto; }
.wc-block-product-gallery-dialog .wc-block-product-gallery-dialog__content {
	display: block;
	height: 100vh;
	height: 100dvh;
	padding: 0;
	overflow-y: auto;
	scroll-snap-type: y mandatory;
	scrollbar-width: none;
}
.wc-block-product-gallery-dialog .wc-block-product-gallery-dialog__content::-webkit-scrollbar { display: none; }
.wc-block-product-gallery-dialog .wc-block-product-gallery-dialog__content img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	padding: var(--wp--preset--spacing--70) clamp(4rem, 8vw, 7rem);
	object-fit: contain;
	margin: 0;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}
.wc-block-product-gallery-dialog .wc-block-product-gallery-dialog__content img:last-child { margin-bottom: 0; }
/* Powiększanie i przesuwanie zdjęcia (assets/js/lightbox.js): przy 1× kursor lupy,
   po powiększeniu łapka, a lista przestaje przewijać się między zdjęciami. */
.wc-block-product-gallery-dialog .wc-block-product-gallery-dialog__content img {
	cursor: zoom-in;
	transform-origin: center center;
	transition: transform 120ms ease-out;
	touch-action: pan-y pinch-zoom;
	will-change: transform;
}
.wc-block-product-gallery-dialog .wc-block-product-gallery-dialog__content img.fbc-lightbox--zoom { cursor: grab; transition: none; touch-action: none; }
.wc-block-product-gallery-dialog .wc-block-product-gallery-dialog__content img.fbc-lightbox--zoom:active { cursor: grabbing; }
.wc-block-product-gallery-dialog .wc-block-product-gallery-dialog__content.fbc-lightbox-lista--zoom { overflow: hidden; scroll-snap-type: none; }
.fbc-produkt-zakup__tresc .fbc-eyebrow { margin-block-end: var(--wp--preset--spacing--30); }
.fbc-produkt-zakup__kategoria { margin-block-end: var(--wp--preset--spacing--30) !important; }
.fbc-produkt-zakup__kategoria a { color: inherit; text-decoration: none; }
.fbc-produkt-zakup__kategoria .wc-block-components-product-details__label,
.fbc-produkt-zakup__kategoria .wc-block-components-product-category-list__label,
.fbc-produkt-zakup__kategoria .wc-block-components-product-category-list__prefix { display: none; }
.fbc-produkt-zakup__tresc .wp-block-post-title { margin-block-start: var(--wp--preset--spacing--30); max-width: none; text-wrap: balance; letter-spacing: -0.02em; line-height: 1.05; }
.fbc-produkt-zakup__lead { margin-block-start: var(--wp--preset--spacing--40); color: var(--wp--preset--color--contrast-2); max-width: none !important; max-width: 46ch; }
.fbc-produkt-zakup__lead p { margin: 0; }
/* Pięć cech w leadzie (klient 2026-09-14, zamiast rozwijanej listy „What makes it
   different"). Treść przychodzi z krótkiego opisu w bazie, więc znacznik to zwykły
   <ul> bez klas — marker rysuje CSS, klient nie musi pamiętać o dodatkowym HTML-u. */
/* Cechy na własnej płycie, z ikoną przy każdej (klient 2026-09-15). Ta sama
   szarość z ziarnem co pas liczb i kafle specyfikacji, więc blok czyta się jak
   jedna rzecz, a nie jak luźne wiersze w białej karcie. Ikony wstawia filtr
   `render_block_woocommerce/product-summary` (inc/sklep.php), dobierając je po
   słowie kluczowym — treść zostaje zwykłym `<ul>` w krótkim opisie w bazie. */
.fbc-produkt-zakup__lead ul {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--wp--preset--spacing--30);
	/* Dokładnie to samo tło co paski "Worldwide Shipping" niżej w karcie
	   (klient 2026-09-15) — płyta sekcji z ziarnem ciążyła tu za mocno. Panel
	   i paski czytają się teraz jak jedna rodzina elementów karty. */
	background: #f4f4f6;
	border-radius: 3px;
}
.fbc-produkt-zakup__lead li {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	padding-inline-start: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--wp--preset--color--contrast);
}
/* Dawny marker — kreska rysowana w CSS — ustąpił ikonom. */
.fbc-produkt-zakup__lead li::before { content: none; }
/* Zwykła fioletowa kropka, nie rysunek (klient 2026-09-15 — po próbie z ikonami
   z serii produkcyjnej). Wyrównana do pierwszej linii tekstu, nie do środka
   wiersza: cechy bywają dwuwierszowe. */
.fbc-lead__ikona {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin-block-start: 0.55em;
	border-radius: 50%;
	background: var(--wp--preset--color--purr);
}
.fbc-lead__tekst { min-width: 0; }

/* Skróty do sekcji, zaraz pod boksem z cechami (klient 2026-09-16). Zwykłe linki
   tekstowe w jednym wierszu; przy wąskiej karcie łamią się same. */
.fbc-skroty {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--30) 0 !important;
	font-size: var(--wp--preset--font-size--small);
}
.fbc-skroty a {
	color: var(--wp--preset--color--contrast-2);
	text-decoration: none;
	border-block-end: 1px solid var(--wp--preset--color--line);
	padding-block-end: 2px;
	transition: color 160ms ease, border-color 160ms ease;
}
.fbc-skroty a:hover,
.fbc-skroty a:focus-visible { color: var(--wp--preset--color--purr); border-color: var(--wp--preset--color--purr); }
.fbc-produkt-zakup__cechy {
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	border-block-start: 1px solid var(--wp--preset--color--line);
}
.fbc-produkt-zakup__cechy li {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: baseline;
	padding-block: var(--wp--preset--spacing--20);
	border-block-end: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}
.fbc-produkt-zakup__cechy .fbc-nr { font-family: var(--wp--preset--font-family--mono); font-size: 0.72rem; color: var(--wp--preset--color--purr); min-width: 1.6rem; }
.fbc-produkt-zakup .wp-block-woocommerce-product-price { color: var(--wp--preset--color--contrast); }
/* Bez wyboru ilości, przycisk na całą szerokość kolumny (klient 2026-09-10) — pole ilości
   zostaje w formularzu (wartość 1), tylko go nie widać. */
/* Formularz bez własnych marginesów i odstępów: jedyną przestrzenią wokół przycisku
   jest padding warstwy, więc góra, dół i boki są równe (klient 2026-09-11). */
.fbc-produkt-zakup .wp-block-woocommerce-add-to-cart-form .cart { display: flex; gap: 0 !important; align-items: stretch; flex-direction: column; margin: 0 !important; padding: 0 !important; }
.fbc-produkt-zakup .wp-block-woocommerce-add-to-cart-form .cart > * { margin: 0 !important; }
.fbc-produkt-zakup .wp-block-woocommerce-add-to-cart-form .screen-reader-text { display: none !important; }
.fbc-produkt-zakup .single_add_to_cart_button { margin: 0 !important; }
.fbc-produkt-zakup .wp-block-woocommerce-add-to-cart-form .quantity { display: none !important; }
.fbc-produkt-zakup .single_add_to_cart_button { display: flex !important; width: 100% !important; max-width: none !important; align-self: stretch !important; }
.fbc-produkt-zakup .wp-block-woocommerce-add-to-cart-form .quantity input { box-sizing: border-box; height: auto; min-height: 51px; width: 72px; border: 1px solid var(--wp--preset--color--line); background: transparent; color: var(--wp--preset--color--contrast); border-radius: 2px; text-align: center; font-family: var(--wp--preset--font-family--mono); }
/* Fioletowy na ciemnym jak główny przycisk w hero; wymiary z definicji ogólnej. */
.fbc-produkt-zakup .single_add_to_cart_button { background: var(--wp--preset--color--purr) !important; color: var(--wp--preset--color--base) !important; border-color: transparent !important; }
.fbc-produkt-zakup .wp-block-woocommerce-add-to-cart-form .quantity input { min-height: 51px; }
/* Ocena tuż pod tytułem: gwiazdki mniejsze i złote; obok SKU i dostępność (klient 2026-09-10). */
.fbc-produkt-zakup__ocena {
	/* Flex zamiast gridu: trzy elementy o różnej wysokości (gwiazdki, tekst, plakietka)
	   wyrównują się do wspólnej osi tylko wtedy, gdy każdy jest osobnym flex-itemem
	   wyśrodkowanym w pionie (klient 2026-09-10). */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	line-height: 1;
	margin-block-start: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
}
/* Blok SKU nosi klasę `product_meta`, której WooCommerce dorysowuje górną kreskę. */
.fbc-produkt-zakup .product_meta,
.fbc-produkt-zakup .wp-block-woocommerce-product-sku { border: 0 !important; padding-block: 0 !important; }
/* SKU nad przyciskiem, wygaszone (klient 2026-09-10). */
.fbc-produkt-zakup__tresc > .wp-block-woocommerce-product-sku {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 0.4em;
	margin-block-end: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-3);
	opacity: 0.85;
	/* Kreska oddzielająca listę wysyłki od SKU i przycisku (klient 2026-09-10) —
	   z `!important`, bo wyżej zerujemy bordery bloku `product_meta`. */
	border-block-start: 1px solid var(--wp--preset--color--line) !important;
	padding-block-start: var(--wp--preset--spacing--40) !important;
}
.fbc-produkt-zakup__ocena > * { display: flex; align-items: center; min-height: 26px; margin-block: 0 !important; }
.fbc-produkt-zakup__ocena .wp-block-woocommerce-product-sku,
.fbc-produkt-zakup__ocena .wp-block-woocommerce-product-stock-indicator {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}

/* Dostępność jako zielona plakietka (klient 2026-09-10), od 2026-09-11 mniejsza —
   ma być notatką obok oceny, nie drugim przyciskiem. */
.fbc-produkt-zakup__ocena .wp-block-woocommerce-product-stock-indicator {
	padding: 5px 8px 4px;
	font-size: 0.64rem;
	line-height: 1.6;   /* termin przedsprzedaży łamie się na dwa wiersze (2026-09-30) */
	border-radius: 2px;
	background: rgba(18, 128, 92, 0.12);
	color: #0f6b4d;
}
/* Termin wysyłki przedsprzedaży (inc/przedsprzedaz.php) — osobny, cichy wiersz pod rzędem
   ocena / plakietka / udostępnianie; bez tła, żeby nie konkurował z plakietką. */
.fbc-produkt-zakup__ocena > .fbc-preorder-wysylka {
	order: 10;
	flex-basis: 100%;
	display: block;
	min-height: 0;
	margin: calc(-1 * var(--wp--preset--spacing--20)) 0 0 !important;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.66rem;
	letter-spacing: 0.04em;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-2);
}
.fbc-produkt-zakup__ocena .wc-block-components-product-stock-indicator--low-stock,
.fbc-produkt-zakup__ocena .wc-block-components-product-stock-indicator--out-of-stock {
	background: rgba(190, 60, 60, 0.12);
	color: #a33636;
}
.fbc-produkt-zakup__ocena .wc-block-components-product-sku,
.fbc-produkt-zakup__ocena .wp-block-woocommerce-product-sku {
	display: flex !important;
	flex-direction: row !important;   /* blok post-terms układa spany w kolumnie */
	align-items: baseline;
	gap: 0.4em;
	flex-wrap: nowrap !important;
	white-space: nowrap;
	min-width: max-content;
}
.fbc-produkt-zakup__ocena .wp-block-post-terms__prefix,
.fbc-produkt-zakup__ocena .sku { display: inline; white-space: nowrap; }
/* WooCommerce dokłada „In stock" jeszcze raz w formularzu koszyka — zostaje jedno miejsce. */
.fbc-produkt-zakup .wp-block-woocommerce-add-to-cart-form p.stock { display: none; }
.fbc-produkt-zakup__ocena .star-rating,
.fbc-produkt-zakup__ocena .wc-block-components-product-rating__stars {
	display: block;
	font-size: 0.82rem;
	line-height: 1;
	letter-spacing: normal;   /* WooCommerce liczy szerokość gwiazdek w em — rozstrzelenie ucinało ostatnią */
	/* Glify gwiazdek siedzą w górnej części swojego wiersza, więc mimo równych środków
	   boxów wyglądały o 2 px wyżej niż tekst obok (klient 2026-09-10). */
	transform: translateY(2px);
}
.fbc-produkt-zakup__ocena .wc-block-components-product-rating,
.fbc-produkt-zakup__ocena .wp-block-woocommerce-product-rating { display: flex; align-items: center; line-height: 1; }
.fbc-produkt-zakup__ocena .wc-block-components-product-rating__container { display: flex; align-items: center; }
.fbc-produkt-zakup .star-rating span::before,
.fbc-produkt-zakup .star-rating::before,
.fbc-produkt-zakup .wc-block-components-product-rating__stars span::before,
.fbc-produkt-zakup .wc-block-components-product-rating__stars::before { color: #e3b341; }
.fbc-produkt-zakup__ocena .wc-block-components-product-rating__reviews_count,
.fbc-produkt-zakup__ocena .woocommerce-review-link { color: var(--wp--preset--color--contrast-2); }
/* Liczba opinii dopisana filtrem (inc/sklep.php) — prowadzi do zakładki „Reviews". */
.fbc-produkt-zakup__recenzje {
	margin-inline-start: 1.1em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
	text-decoration: none;
	white-space: nowrap;
}
.fbc-produkt-zakup__recenzje:hover { color: var(--wp--preset--color--purr); text-decoration: underline; text-underline-offset: 3px; }

/* Cena pod oceną, stan magazynowy obok niej (klient 2026-09-10). */
.fbc-produkt-zakup__cena {
	align-items: baseline;
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--40);
}
.fbc-produkt-zakup__cena > * { margin-block: 0 !important; }
.fbc-produkt-zakup__cena .wc-block-components-product-stock-indicator {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Wysyłka, gwarancja i zwroty pod listą rozwijaną — SKU zdjęte (klient 2026-09-10). */
.fbc-szczegoly {
	margin-block-start: var(--wp--preset--spacing--50);
	border-block: 1px solid var(--wp--preset--color--line);
	border-block-end-width: 0;
}
.fbc-szczegoly > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
	cursor: pointer;
	list-style: none;
}
.fbc-szczegoly > summary::-webkit-details-marker { display: none; }
.fbc-szczegoly > summary::after {
	content: "+";
	font-size: 1.1rem;
	line-height: 1;
	color: var(--wp--preset--color--purr);
}
.fbc-szczegoly[open] > summary::after { content: "×"; }
.fbc-szczegoly > summary:hover { color: var(--wp--preset--color--contrast); }
.fbc-szczegoly .fbc-produkt-zakup__gwarancje { margin-block: 0 var(--wp--preset--spacing--40); }
.fbc-szczegoly .fbc-produkt-zakup__cechy { margin-block: 0 var(--wp--preset--spacing--30); border-block-start: 0; }
.fbc-szczegoly--cechy { margin-block-start: var(--wp--preset--spacing--50); }
.fbc-szczegoly + .fbc-szczegoly { margin-block-start: 0; }
.fbc-produkt-zakup__tresc > .fbc-produkt-zakup__gwarancje { margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); }

/* ---- Akcesoria do wyboru (wzorzec produkt-dodatki, klient 2026-09-10) ----
   Trzy wiersze pod „What makes it different": miniatura, nazwa, cena i przycisk, który
   dorzuca produkt do koszyka bez przeładowania (assets/js/koszyk.js). */
.fbc-dodatki { margin-block-start: var(--wp--preset--spacing--50); }
/* Trzy pierwsze pozycje stoja otworem, reszta pod "show more" (klient 2026-09-15).
   Wczesniej cala lista byla zwinieta — piec pozycji ze zdjeciami podnosilo karte
   zakupowa o ponad 300 px, ale zwiniete w calosci nie pokazywalo nic. */
.fbc-dodatki__tytul { margin-block-end: var(--wp--preset--spacing--30) !important; color: var(--wp--preset--color--contrast-2); }
.fbc-dodatki__wiecej { margin-block-start: 8px; }
.fbc-dodatki__wiecej-przycisk {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding-block: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
	cursor: pointer;
	list-style: none;
}
.fbc-dodatki__wiecej-przycisk::-webkit-details-marker { display: none; }
.fbc-dodatki__wiecej-przycisk::marker { content: ''; }
.fbc-dodatki__wiecej-przycisk:hover { color: var(--wp--preset--color--purr); }
.fbc-dodatki__wiecej-przycisk:focus-visible { outline: 2px solid var(--wp--preset--color--purr); outline-offset: 2px; }
/* Po rozwinieciu przycisk mowi, co zrobi klikniety ponownie — tekst podmienia CSS,
   zeby nie trzymac tego w skrypcie. */
.fbc-dodatki__wiecej[open] .fbc-dodatki__wiecej-tekst { font-size: 0; }
.fbc-dodatki__wiecej[open] .fbc-dodatki__wiecej-tekst::after {
	content: attr(data-mniej);
	font-size: 0.72rem;
}
.fbc-dodatki__strzalka {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-block-start: -3px;
	border-inline-end: 1.6px solid currentColor;
	border-block-end: 1.6px solid currentColor;
	rotate: 45deg;
	transition: rotate 0.2s ease;
}
.fbc-dodatki__wiecej[open] .fbc-dodatki__strzalka { margin-block-start: 3px; rotate: -135deg; }
.fbc-dodatki__wiecej .fbc-dodatki__lista { margin-block-start: 8px; }
.fbc-dodatki__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fbc-dodatki__el {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: 8px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	background: var(--wp--preset--color--base);
}
/* Bez własnego tła i wcięcia pod obrazkiem (klient 2026-09-11: „niepotrzebny jest
   taki border"): jasny kadr z odstępem rysował wokół miniatury obwódkę, bo zdjęcia
   mają własne tło. Miniatura leży wprost na białej karcie. */
.fbc-dodatki__kadr { display: block; width: 44px; height: 44px; background: transparent; overflow: hidden; }
.fbc-dodatki__kadr img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fbc-dodatki__tresc { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fbc-dodatki__nazwa {
	font-size: 0.8rem;
	line-height: 1.25;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.fbc-dodatki__nazwa:hover { color: var(--wp--preset--color--purr); }
/* Na stronę akcesorium prowadzi tylko nazwa (klient 2026-09-26) — tak jak na
   kartach. Wcześniej (16.09) klikalny był cały wiersz, co przy liście
   wariantów w wierszu wyrzucałoby na stronę produktu przy chybionym kliknięciu. */
.fbc-dodatki__el { position: relative; }
.fbc-dodatki__cena { font-family: var(--wp--preset--font-family--mono); font-size: 0.72rem; color: var(--wp--preset--color--contrast-2); }
.fbc-dodatki__cena .woocommerce-Price-amount { color: inherit; }
.fbc-dodatki__przycisk {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	min-height: 34px;
	padding: 0 12px;
	border: 1px solid var(--wp--preset--color--purr);
	border-radius: 2px;
	background: transparent;
	color: var(--wp--preset--color--purr);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.fbc-dodatki__przycisk:hover { background: var(--wp--preset--color--purr); color: var(--wp--preset--color--base); }
.fbc-dodatki__przycisk.is-ladowanie { opacity: 0.5; cursor: progress; }
.fbc-dodatki__przycisk.is-dodane {
	border-color: rgba(18, 128, 92, 0.4);
	background: rgba(18, 128, 92, 0.12);
	color: #0f6b4d;
	cursor: default;
}
.fbc-dodatki__przycisk.is-dodane .fbc-dodatki__znak { content: none; }
.fbc-dodatki__przycisk.is-dodane .fbc-dodatki__znak::before { content: "✓"; }
.fbc-dodatki__przycisk.is-dodane .fbc-dodatki__znak { font-size: 0; }
.fbc-dodatki__przycisk.is-dodane .fbc-dodatki__znak::before { font-size: 0.85rem; }

/* Ilość i „Add to cart" na dole kolumny treści. Przyklejony pasek na dole okna pojawia się
   dopiero PO zejściu bloku zakupowego z ekranu (klient 2026-09-10) — niżej, `.fbc-kup-pasek`. */
.fbc-produkt-zakup__kup {
	display: block;
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: 1px solid var(--wp--preset--color--line);
}
.fbc-produkt-zakup__kup > * { margin-block: 0 !important; }
.fbc-produkt-zakup__kup .wp-block-woocommerce-product-price { font-size: var(--wp--preset--font-size--x-large); }

/* Ten sam pasek na dole okna po wyjechaniu bloku zakupowego (assets/js/kup.js).
   Przycisk klika oryginalny w formularzu, więc nie ma drugiego formularza. */
.fbc-kup-pasek {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 30;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding: 12px var(--wp--preset--spacing--50);
	background: rgba(22, 20, 24, 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-block-start: 1px solid var(--wp--preset--color--line-dark);
	color: var(--wp--preset--color--base);
	animation: fbc-kup-wjazd 240ms cubic-bezier(.2, .7, .2, 1);
}
/* `display: flex` wyżej ma tę samą specyficzność co [hidden] z arkusza przeglądarki
   i wygrywa kolejnością — bez tego pasek byłby widoczny od razu. */
.fbc-kup-pasek[hidden] { display: none; }
@keyframes fbc-kup-wjazd { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .fbc-kup-pasek { animation: none; } }
.fbc-kup-pasek__tresc { min-width: 0; display: flex; align-items: baseline; gap: var(--wp--preset--spacing--40); flex-wrap: wrap; }
.fbc-kup-pasek__nazwa {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fbc-kup-pasek__cena { margin: 0; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--medium); font-weight: 500; }
.fbc-kup-pasek__cena del { display: none; }
.fbc-kup-pasek__przycisk { flex: 0 0 auto; background: var(--wp--preset--color--purr) !important; color: var(--wp--preset--color--base) !important; border-color: transparent !important; }
@media (max-width: 599.98px) {
	.fbc-kup-pasek { padding-inline: var(--wp--preset--spacing--40); }
	.fbc-kup-pasek__nazwa { display: none; }
}
/* Poniżej 1200 px (jedna kolumna) formularz zakupu — wybór wariantu, cena, „Add to
   cart” — jest ZAWSZE przyklejony do dołu ekranu (klient 2026-09-28: „to całe
   powinno być przyczepione zawsze na stronie produktowej do dołu ekranu i tyle,
   bez żadnych wyjątków”). Pasek z kup.js jest wtedy zbędny i znika. Wysokość
   formularza (zależy od wariantów) kup.js wpisuje w --fbc-formularz-h, żeby stopka
   strony nie chowała się pod nim. */
@media (max-width: 1199.98px) {
	.fbc-produkt-zakup__kup .wp-block-woocommerce-add-to-cart-form {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 30;
		box-sizing: border-box;
		margin: 0 !important;
		padding: 12px var(--fbc-gutter) calc(12px + env(safe-area-inset-bottom, 0px));
		background: var(--wp--preset--color--base);
		border-block-start: 1px solid var(--wp--preset--color--line);
		box-shadow: 0 -10px 30px rgba(20, 20, 24, 0.08);
	}
	.fbc-produkt-zakup__kup .wp-block-woocommerce-add-to-cart-form form.cart { margin: 0; }
	.fbc-kup-pasek { display: none !important; }
	body.fbc-formularz-na-dole { padding-block-end: var(--fbc-formularz-h, 96px); }
}
.fbc-produkt-zakup__meta { margin-block-start: var(--wp--preset--spacing--40); display: flex; gap: var(--wp--preset--spacing--50); flex-wrap: wrap; font-family: var(--wp--preset--font-family--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--wp--preset--color--contrast-3); }
.fbc-produkt-zakup__meta > * { margin: 0; }
.fbc-produkt-zakup__meta .wc-block-components-product-stock-indicator--in-stock { color: var(--wp--preset--color--purr); }
.fbc-produkt-zakup__gwarancje {
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
}
/* ---- Wyróżniki: rozwijane wiersze z ikoną (klient 2026-09-11, wzór canyon.com) ---- */
.fbc-wyrozniki { display: grid; gap: 6px; margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
/* Oddech nad wyróżnikami: 48 px zamiast 24 (klient 2026-09-20: „większy gap
   między ceną a USP"). `!important`, bo na stronach bez leadu i bez listy
   akcesoriów — czyli przy akcesoriach — blok wyróżników jest PIERWSZYM
   dzieckiem karty, a rdzeń zeruje górny margines pierwszemu dziecku: cena
   i pierwszy wiersz USP stykały się wtedy bez żadnej przerwy. */
.fbc-produkt-zakup .fbc-wyrozniki { margin-block-start: var(--wp--preset--spacing--70) !important; }
/* Desktop (klient 2026-09-28): „za duża przerwa między USP a opisem”, „USP nie mają
   żadnego paddingu na dole” (przyklejony panel zakupu nachodził na ostatni wiersz).
   48 px zostaje między ceną a USP; gdy nad USP stoi opis produktu — 24 px. Pod USP
   24 px (reguła „dzieci bloku zakupowego bez marginesów” zerowała go). */
@media (min-width: 1200px) {
	.fbc-produkt-zakup .wp-block-woocommerce-product-summary + .fbc-produkt-zakup__kup > .fbc-wyrozniki { margin-block-start: var(--wp--preset--spacing--50) !important; }
	.fbc-produkt-zakup .fbc-produkt-zakup__kup > .fbc-wyrozniki { margin-block-end: var(--wp--preset--spacing--50) !important; }
}
/* Lista wariantów niższa od przycisku „Add to cart” (51 px) — klient 2026-09-28:
   „ten wybór wariantu jest jakiś za wysoki, większy nawet od CTA”. */
.fbc-produkt-zakup .fbc-wybor__pole,
.fbc-produkt-zakup .variations select { height: 42px; min-height: 0; padding-block: 0; }
/* Poniżej 1200 px blok zakupowy ma własną linię i odstęp u góry, więc 48 px nad
   USP dawało ~70 px pustki pod opisem, a reguła „dzieci bloku bez marginesów”
   zerowała odstęp pod USP i lista wariantów się do nich kleiła (klient 2026-09-28:
   „za duża przerwa między USP a opisem”, „brakuje przerwy między USP a wyborem
   wariantu”). */
@media (max-width: 1199.98px) {
	.fbc-produkt-zakup .fbc-produkt-zakup__kup > .fbc-wyrozniki { margin-block: 0 var(--wp--preset--spacing--50) !important; }
}
.fbc-wyroznik { background: #f4f4f6; border-radius: 3px; }
.fbc-wyroznik > summary {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) 16px;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: 12px 14px;
	font-size: 0.82rem;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	list-style: none;
}
.fbc-wyroznik > summary::-webkit-details-marker { display: none; }
.fbc-wyroznik__ikona { display: block; width: 20px; height: 20px; color: var(--wp--preset--color--contrast); }
.fbc-wyroznik__ikona svg { display: block; width: 100%; height: 100%; }
.fbc-wyroznik__znak {
	display: block;
	width: 9px;
	height: 9px;
	margin-inline-start: auto;
	border-inline-end: 1.5px solid var(--wp--preset--color--contrast-2);
	border-block-end: 1.5px solid var(--wp--preset--color--contrast-2);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 200ms ease;
}
.fbc-wyroznik[open] .fbc-wyroznik__znak { transform: rotate(225deg) translate(-3px, -3px); }
.fbc-wyroznik > summary:hover { color: var(--wp--preset--color--purr); }
.fbc-wyroznik > summary:hover .fbc-wyroznik__ikona { color: var(--wp--preset--color--purr); }
.fbc-wyroznik > p {
	margin: 0;
	padding: 0 14px 14px calc(20px + var(--wp--preset--spacing--30) + 14px);
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-2);
}

/* W pudełku + liczby. */
.fbc-produkt-liczby__uklad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.fbc-produkt-liczby__pudelko h2 { max-width: 20ch; text-wrap: balance; }
.fbc-produkt-liczby__lista { list-style: none; margin: var(--wp--preset--spacing--50) 0 0; padding: 0; border-block-start: 1px solid var(--wp--preset--color--line); }
.fbc-produkt-liczby__lista li { display: flex; gap: var(--wp--preset--spacing--30); align-items: baseline; padding-block: var(--wp--preset--spacing--30); border-block-end: 1px solid var(--wp--preset--color--line); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast-2); }
.fbc-produkt-liczby__lista .fbc-nr { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--purr); min-width: 1.8rem; }
/* Schemat pudelka w prawej kolumnie; liczby ida pod spodem, na pelna szerokosc
   (klient 2026-09-15). */
.fbc-produkt-liczby__schemat { align-self: center; }
/* Bez zdjęcia pudełka (GT, klient 2026-09-27): nagłówek po lewej, lista po prawej
   na siatce dwóch kolumn z recenzji i FAQ — pusta prawa połowa wyglądała jak błąd.
   Pudełko rozkłada się na siatkę (`display: contents`), więc znaczniki zostają te same. */
.fbc-produkt-liczby__uklad--bez-zdjecia { grid-template-columns: var(--fbc-dwie-kolumny); grid-template-rows: auto 1fr; gap: 0 var(--fbc-dwie-kolumny-gap); }
.fbc-produkt-liczby__uklad--bez-zdjecia .fbc-produkt-liczby__pudelko { display: contents; }
.fbc-produkt-liczby__uklad--bez-zdjecia .fbc-eyebrow,
.fbc-produkt-liczby__uklad--bez-zdjecia h2 { grid-column: 1; }
.fbc-produkt-liczby__uklad--bez-zdjecia h2 { margin-block-end: 0; }
/* W siatce marginesy się nie składają — bez tego nadlinia stała 12 px dalej od H2 niż przy FORMULA. */
.fbc-produkt-liczby__uklad--bez-zdjecia .fbc-eyebrow { margin-block-end: 0; }
.fbc-produkt-liczby__uklad--bez-zdjecia .fbc-produkt-liczby__lista { grid-column: 2; grid-row: 1 / span 2; margin-block-start: 0; }
.fbc-pudelko-svg { display: block; width: 100%; height: auto; }
/* Zdjęcie pudełka ze ściętym narożnikiem, jak kadry produktowe w sklepie
   i na kartach (klient 2026-09-16). */
.fbc-pudelko-foto {
	--fbc-sciecie: 16px;
	display: block;
	width: 100%;
	height: auto;
	clip-path: polygon(var(--fbc-sciecie) 0, 100% 0, 100% calc(100% - var(--fbc-sciecie)), calc(100% - var(--fbc-sciecie)) 100%, 0 100%, 0 var(--fbc-sciecie));
}
@supports (corner-shape: bevel) {
	.fbc-pudelko-foto { clip-path: none; corner-shape: bevel; border-radius: var(--fbc-sciecie) 0 var(--fbc-sciecie) 0; }
}
/* Liczby siedzą na płycie z ziarnem, a same karty zostają białe (klient 2026-09-15):
   sekcja Specifications jest biała, więc szary panel wydziela ten blok, a białe
   kafle odcinają się na nim bez potrzeby ramki. */
/* Pas na całą szerokość okna, od krawędzi do krawędzi (klient 2026-09-15) —
   bez ścięcia narożnika, bo pas dotyka brzegów i nie czyta się już jako karta.
   Wcięcie poziome takie samo jak margines strony, żeby kafle stały w jednej
   linii z resztą treści. */
.fbc-produkt-liczby__spec {
	/* Odstęp od treści nad pasem równy odstępowi treści od krawędzi sekcji (klient
	   2026-09-15: "top i bottom muszą być takie same"). Pas zjada dolny padding
	   sekcji, więc to on odmierza dolną przerwę białej części — stałe 64 px dawały
	   96 u góry i 64 u dołu. Token rytmu, bo padding sekcji skaluje się z oknem. */
	margin-block-start: var(--fbc-rytm);
	/* Pełne wybicie na szerokość okna. Bez klasy `alignfull`: łapie ona reguły
	   rytmu sekcji ze `style.css`, które zerują margines i szerokość, więc blok
	   i tak zostawał w kolumnie treści.
	   Wybicie liczone marginesem strony, nie przez `100vw`: `vw` obejmuje pasek
	   przewijania i pas wychodził o kilka pikseli poza okno, zamiast równo do
	   krawędzi. Kolumna treści = okno minus dwa marginesy, więc ujemny margines
	   o tej samej wartości dokładnie ją dopełnia. */
	width: auto;
	max-width: none;
	margin-inline: calc(-1 * var(--fbc-margines, min(8vw, 136px))) !important;
	/* Pion z tego samego tokenu co rytm sekcji (klient 2026-09-15): pas jest pełną
	   szerokością i czyta się jak własna sekcja, więc ma oddychać tak jak każda inna.
	   Poziom zostaje na marginesie strony, żeby kafle stały w linii z resztą treści. */
	padding: var(--fbc-rytm) var(--fbc-margines, min(8vw, 136px)) !important;
	background-color: var(--fbc-plyta);
	background-image: var(--fbc-ziarno);
	background-repeat: repeat;
}
.fbc-produkt-liczby__spec .fbc-eyebrow { margin-block-end: var(--wp--preset--spacing--40); }
.fbc-produkt-liczby__spec .fbc-specs { margin: 0; }

/* Liczby w kaflach — poziomo, zamiast pionowej listy (klient 2026-09-15).
   Wartosc na gorze i wieksza, etykieta pod nia w mono jak nadlinie; kafel ze
   scieciem naroznika, tym samym jezykiem co karty produktow. `auto-fit` dobiera
   liczbe kolumn sam, wiec siatka nie wymaga progow na kazda szerokosc. */
.fbc-liczby-kafle {
	display: grid;
	/* Trzy kolumny WPROST, nie `auto-fit`: sześć kafli klienta (2026-09-18) ma
	   wartości słowne („2 BRAKE HYDRAULIC DAMPERS"), nie same liczby, a przy
	   automatycznym doborze wychodziły cztery kolumny i układ 4 + 2. Teraz
	   zawsze 3 × 2, z wartością w dwóch liniach zamiast czterech. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
}
.fbc-liczby-kafel {
	--fbc-sciecie: 12px;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
	/* Bez ramki: biała karta na szarej płycie i tak ma wyraźną krawędź. */
	clip-path: polygon(var(--fbc-sciecie) 0, 100% 0, 100% calc(100% - var(--fbc-sciecie)), calc(100% - var(--fbc-sciecie)) 100%, 0 100%, 0 var(--fbc-sciecie));
}
@supports (corner-shape: bevel) {
	.fbc-liczby-kafel { clip-path: none; corner-shape: bevel; border-radius: var(--fbc-sciecie) 0 var(--fbc-sciecie) 0; }
}
.fbc-liczby-kafel__wartosc {
	margin: 0;
	/* Stały stopień, bez skalowania z szerokością okna (klient 2026-09-15):
	   przy `vw` wartości rosły na szerokich ekranach szybciej niż kafle i traciły
	   proporcję do podpisu. 1,6 rem było już za duże (klient 2026-09-15). */
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--contrast);
	text-wrap: balance;
}
.fbc-liczby-kafel__etykieta {
	/* Etykieta przy dolnej krawędzi kafla: wartości mają różną długość, a bez tego
	   podpisy lądowałyby na różnych wysokościach i rząd tracił rytm. */
	margin: auto 0 0;
	font-family: var(--wp--preset--font-family--mono);
	/* Podpis ma być wyraźnie mniejszy od wartości — mono przy tym samym stopniu
	   co reszta wygląda ciężko (klient 2026-09-15). */
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	line-height: 1.45;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}
.is-style-sekcja-ciemna .fbc-liczby-kafel {
	background: var(--wp--preset--color--graphite);
	border-color: var(--wp--preset--color--line-dark);
}
.is-style-sekcja-ciemna .fbc-liczby-kafel__wartosc { color: var(--wp--preset--color--base); }
.is-style-sekcja-ciemna .fbc-liczby-kafel__etykieta { color: var(--wp--preset--color--contrast-3); }
@media (max-width: 899.98px) {
	.fbc-liczby-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
	.fbc-liczby-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); }
	.fbc-liczby-kafel { padding: var(--wp--preset--spacing--30); }
	.fbc-liczby-kafel__wartosc { font-size: 1.05rem; }
	.fbc-liczby-kafel__etykieta { font-size: 0.62rem; }
}
.fbc-produkt-liczby__spec .fbc-spec:first-of-type { border-block-start: 1px solid var(--wp--preset--color--line); }

/* Opis z bazy: nagłówki z Divi bez klas rozmiaru — sekcja 26 style.css
   ustawia je; tu tylko zdjęcia z opisu na całą kolumnę. */
/* ---- Opis produktu: sekcje pełnoekranowe 50/50 (wzorzec produkt-opis) ----
   Klient 2026-09-10: każda cecha na całą wysokość okna, zdjęcie (oryginalne, z tłem)
   dotyka krawędzi ekranu, po połowie ze tekstem. Zdjęcie na przemian
   z lewej i z prawej. Poniżej 900 px sekcje wracają do pionu. */
.fbc-opis__uklad {
	display: grid;
	gap: 0;
	/* Wyjście z kontenera „wide" panelu zakładek — sekcje mają dotykać krawędzi okna. */
	width: 100vw !important;
	max-width: 100vw !important;
	margin-inline: calc(50% - 50vw) !important;
}
.fbc-opis__sekcja {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: 100dvh;
}
/* Parzyste sekcje mają zdjęcie po prawej — kolumny też zamieniają proporcje,
   inaczej zdjęcie dostawało 40 % zamiast 60 %. */
.fbc-opis__sekcja:nth-child(even) { grid-template-columns: 1fr 1fr; }
.fbc-opis__sekcja:nth-child(even) .fbc-opis__kadr { order: 2; }
.fbc-opis__kadr {
	position: relative;
	margin: 0;
	min-height: 0;
	overflow: hidden;
	background: #f6f5f4;
}
/* `height: 100%` bez `min-height`: inaczej obraz brał wysokość ze swoich proporcji 1:1
   i sekcja rosła ponad okno (przy 2560 px było 1536 px zamiast 1440 px). */
/* Obraz poza przepływem: przy `height: 100%` w rozciąganym gridzie przeglądarka brała
   jego proporcje 1:1 i sekcja rosła ponad okno (1152 px zamiast 1080 px). */
.fbc-opis__render {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;   /* globalne `img { height: auto }` inaczej wygrywa */
	max-width: none;
	min-height: 0;
	object-fit: cover;
	background: transparent;
}
.fbc-opis__tekst {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--80) clamp(var(--wp--preset--spacing--60), 5vw, var(--wp--preset--spacing--90));
}
.fbc-opis__tekst > * { max-width: 34rem; }
.fbc-opis__tekst h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--2-x-large);
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.fbc-opis__tekst h2 .fbc-nr {
	display: block;
	margin-block-end: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--purr);
}
.fbc-opis__tekst h3 {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast-2);
	text-wrap: pretty;
}
.fbc-opis__tekst p, .fbc-opis__tekst ul, .fbc-opis__tekst ol { margin: var(--wp--preset--spacing--40) 0 0; color: var(--wp--preset--color--contrast-2); line-height: 1.6; }
.fbc-opis__tekst ul, .fbc-opis__tekst ol { padding-inline-start: 1.2em; }
.fbc-opis__tekst li { margin-block: var(--wp--preset--spacing--20); padding-inline-start: 0.2em; }
.fbc-opis__tekst li::marker { color: var(--wp--preset--color--purr); font-family: var(--wp--preset--font-family--mono); font-size: 0.85em; }
.fbc-opis__tekst strong { color: var(--wp--preset--color--contrast); }
.fbc-opis__tekst a { color: var(--wp--preset--color--purr); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fbc-opis__tekst a:hover { color: var(--wp--preset--color--purr-hover); }
@media (max-width: 899.98px) {
	/* Telefon: zdjęcie na pół ekranu, pod nim tekst — sekcja nie musi mieć 100 dvh. */
	.fbc-opis__sekcja,
	.fbc-opis__sekcja:nth-child(even) { grid-template-columns: 1fr; min-height: 0; gap: 0; }
	.fbc-opis__sekcja:nth-child(even) .fbc-opis__kadr { order: 0; }
	.fbc-opis__render { min-height: 0; height: 54dvh; }
	.fbc-opis__tekst { padding: var(--wp--preset--spacing--70) var(--fbc-margines, var(--wp--preset--spacing--50)) var(--wp--preset--spacing--80); }
	.fbc-opis__tekst { max-width: none; }
}
/* Produkt bez sekcji (akcesoria): zwykły opis, bez kolumny spisu. */
.fbc-produkt-opis__prosty { max-width: 44rem; }
.fbc-produkt-opis .wp-block-woocommerce-product-details img { max-width: 100%; height: auto; border-radius: 2px; }
/* Blok product-details renderuje zakładki (opis, dodatkowe informacje,
   opinie). Zostaje sam opis + dodatkowe informacje jako zwykły tekst;
   nawigacja zakładek i panel opinii (własna sekcja niżej) — schowane. */
.fbc-produkt-opis .wp-block-woocommerce-product-details ul.wc-tabs,
.fbc-produkt-opis .wp-block-woocommerce-product-details ul.tabs,
.fbc-produkt-opis .wp-block-woocommerce-product-details #tab-reviews { display: none !important; }
.fbc-produkt-opis .wp-block-woocommerce-product-details .woocommerce-Tabs-panel { display: block !important; padding: 0; margin: 0; }
.fbc-produkt-opis .wp-block-woocommerce-product-details .woocommerce-Tabs-panel--additional_information { margin-block-start: var(--wp--preset--spacing--80); }

/* ---- Zakładki (opis / specyfikacja / recenzje) ----
   Pasek przyklejony pod nagłówkiem witryny, kotwice z numerem mono jak listy
   na stronie; aktywna z fioletową linią. Panele = pełne sekcje (wzorce),
   ukryty panel dostaje `hidden` ze skryptu; bez JS wszystkie stoją po kolei. */
/* Grupa zakładek bez domyślnego odstępu i paddingu sekcji `main > .alignfull`
   (klient: pasek zaczynał się 120 px pod blokiem zakupowym) — odstępy dają
   same panele. */
main.wp-block-group > .alignfull.fbc-zakladki { margin-block: 0; padding-block: 0; }
.fbc-zakladki > .fbc-zakladki__panel { margin-block: 0; }
.fbc-zakladki__pasek {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-inline: calc(50% - 50vw) !important;
	padding-inline: 0;
	box-sizing: border-box;
	position: sticky;
	top: 0;   /* nagłówek witryny nie jest przyklejony — pasek staje na krawędzi okna */
	z-index: 5;
	background: var(--wp--preset--color--base);
	border-block-end: 1px solid var(--wp--preset--color--line);
}
.fbc-zakladki__lista {
	box-sizing: border-box;
	padding-inline: var(--fbc-margines, min(8vw, 136px)); display: flex; gap: clamp(1.5rem, 4vw, 3rem); overflow-x: auto; scrollbar-width: none; }
.fbc-zakladki__lista::-webkit-scrollbar { display: none; }
.fbc-zakladki__karta {
	display: inline-flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20);
	flex: none;
	padding: var(--wp--preset--spacing--40) 0;
	margin-block-end: -1px;
	border-block-end: 2px solid transparent;
	font-weight: 700;
	color: var(--wp--preset--color--contrast-3);
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease, border-color .2s ease;
}
.fbc-zakladki__karta .fbc-nr { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--small); font-weight: 400; color: var(--wp--preset--color--contrast-3); transition: color .2s ease; }
.fbc-zakladki__karta:hover { color: var(--wp--preset--color--contrast); }
.fbc-zakladki__karta.is-active { color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--purr); }
.fbc-zakladki__karta.is-active .fbc-nr { color: var(--wp--preset--color--purr); }
.fbc-zakladki__karta:focus-visible { outline: 2px solid var(--wp--preset--color--purr); outline-offset: 4px; }
.fbc-zakladki__panel[hidden] { display: none; }
.fbc-zakladki__panel:focus { outline: 0; }
/* Panel „Specifications": wzorzec liczb bez własnego górnego marginesu ponad pasek. */
/* Pierwsza sekcja w panelu potrzebuje oddechu od paska zakładek — blok zakładek ma
   `padding-block: 0`, więc bez tego nadlinia „VERIFIED OWNERS" przyklejała się do
   kreski paska (klient 2026-09-11). Opis ma własny układ pełnoekranowy i zostaje
   bez wcięcia. */
.fbc-zakladki__panel > .fbc-produkt-liczby,
.fbc-zakladki__panel > .fbc-produkt-opinie { padding-block-start: var(--wp--preset--spacing--80); }

/* ---- Tabele specyfikacji (wzorzec produkt-tabele) ----
   Każde zestawienie to zwinięty kafel, który rozwija tabelę (klient 2026-09-15):
   trzy pełne tabele jedna pod drugą dały ścianę na 1200 px, przez którą nie dało
   się przewinąć do opinii. Kafel ma układ „hero” ze scen opisu — numer w mono
   nad dużym tytułem — i ten sam język co kafle liczb, tylko odwrotnie: płytka
   z tej samej szarej płyty z ziarnem na białym tle sekcji, ścięty narożnik, bez
   ramki. Sekcja zostaje biała, bo pod nią kończy się szary pas liczb i szara
   sekcja dałaby szare–białe–szare z wąską białą szczeliną między nimi.
   Mechanika na `details`, bez JS-a. */
.fbc-tabele__uklad { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--30); align-items: start; }
.fbc-tabele__eyebrow { grid-column: 1 / -1; margin: 0 0 var(--wp--preset--spacing--30); }
.fbc-tabele__blok {
	--fbc-sciecie: 12px;
	/* Ten sam szary co w bloku zakupowym — panel z cechami i paski wysyłki
	   (klient 2026-09-16). Płyta z ziarnem była tu ciemniejsza i wybijała się
	   z rodziny elementów strony. */
	background: #f4f4f6;
	clip-path: polygon(var(--fbc-sciecie) 0, 100% 0, 100% calc(100% - var(--fbc-sciecie)), calc(100% - var(--fbc-sciecie)) 100%, 0 100%, 0 var(--fbc-sciecie));
}
@supports (corner-shape: bevel) {
	.fbc-tabele__blok { clip-path: none; corner-shape: bevel; border-radius: var(--fbc-sciecie) 0 var(--fbc-sciecie) 0; }
}
.fbc-tabele__kafel {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding: clamp(20px, 2.2vw, 36px) clamp(20px, 2.6vw, 44px);
	cursor: pointer;
	/* Domyślny trójkąt `details` zdjęty — znak rozwinięcia stoi po prawej. */
	list-style: none;
}
.fbc-tabele__kafel::-webkit-details-marker { display: none; }
.fbc-tabele__kafel::marker { content: ''; }
.fbc-tabele__kafel:focus-visible { outline: 2px solid var(--wp--preset--color--purr); outline-offset: -4px; }
.fbc-tabele__kafel .fbc-nr {
	/* Numer jak nad naglowkiem sceny w opisie: mono, fiolet, drobny. */
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--purr);
}
.fbc-tabele__tytul {
	flex: 1;
	font-size: clamp(1.25rem, 1.9vw, 2.1rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
}
/* Znak rozwinięcia: kwadrat obrócony o 45° z dwiema krawędziami — strzałka
   w dół, po otwarciu obraca się do góry. Bez ikony w pliku. */
.fbc-tabele__znak {
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	margin-block-start: -5px;
	border-inline-end: 2px solid var(--wp--preset--color--contrast-2);
	border-block-end: 2px solid var(--wp--preset--color--contrast-2);
	rotate: 45deg;
	transition: rotate 0.2s ease, border-color 0.2s ease;
}
.fbc-tabele__blok[open] .fbc-tabele__znak { margin-block-start: 5px; rotate: -135deg; border-color: var(--wp--preset--color--purr); }
.fbc-tabele__kafel:hover .fbc-tabele__znak { border-color: var(--wp--preset--color--purr); }
.fbc-tabele__tresc { padding: 0 clamp(20px, 2.6vw, 44px) clamp(20px, 2.2vw, 36px); }
/* Linia z palety jest dobrana pod biel — na szarej płytce ginie. Stąd własna,
   liczona z koloru tekstu, żeby miała ten sam kontrast co na białym tle. */
.fbc-tabele__blok { --fbc-linia-kafla: color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent); }
.fbc-tabele__blok table { width: 100%; border-collapse: collapse; border-block-start: 1px solid var(--fbc-linia-kafla); font-size: var(--wp--preset--font-size--small); }
.fbc-tabele__blok td, .fbc-tabele__blok th { padding: var(--wp--preset--spacing--30) 0; border-block-end: 1px solid var(--fbc-linia-kafla); vertical-align: top; text-align: start; line-height: 1.5; }
.fbc-tabele__blok td:first-child, .fbc-tabele__blok th:first-child { width: 40%; padding-inline-end: var(--wp--preset--spacing--40); color: var(--wp--preset--color--contrast-2); }
.fbc-tabele__blok td:last-child { color: var(--wp--preset--color--contrast); }
.fbc-tabele__blok td p { margin: 0; }
@media (max-width: 599.98px) {
	.fbc-tabele__kafel { gap: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); }
	.fbc-tabele__blok td:first-child, .fbc-tabele__blok th:first-child { width: 45%; }
}

/* Opinie: klasyczny wątek jak na forum (klient 2026-09-05) — jedna kolumna,
   każda recenzja to wiersz oddzielony linią; po lewej autor, data i ocena,
   po prawej treść. Reguły bazowe dla ciemnego tła, niżej wariant jasny. */
.fbc-produkt-opinie .wp-block-woocommerce-product-reviews { color: var(--wp--preset--color--base); }
/* Tytuł bloku „10 reviews for …" dubluje nagłówek sekcji. */
.fbc-produkt-opinie .wp-block-woocommerce-product-reviews > h2:first-child,
.fbc-produkt-opinie .wp-block-woocommerce-product-reviews-title,
.fbc-produkt-opinie .woocommerce-Reviews-title,
.fbc-produkt-opinie #reviews > h2:first-child { display: none; }
.fbc-produkt-opinie .commentlist { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--wp--preset--color--line-dark); }
.fbc-produkt-opinie .commentlist::before, .fbc-produkt-opinie .commentlist::after { display: none; }   /* clearfix WooCommerce */
.fbc-produkt-opinie .commentlist li { margin: 0; padding: 0; border-block-end: 1px solid var(--wp--preset--color--line-dark); }
.fbc-produkt-opinie .comment_container { display: block; padding: var(--wp--preset--spacing--50) 0; border: 0; border-radius: 0; }
.fbc-produkt-opinie .comment_container img.avatar { display: none; }
.fbc-produkt-opinie .comment-text {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	grid-template-rows: auto auto 1fr;
	column-gap: var(--wp--preset--spacing--60);
	margin: 0;
	padding: 0;
	border: 0;
}
.fbc-produkt-opinie .comment-text .star-rating { grid-column: 1; grid-row: 2; margin: var(--wp--preset--spacing--20) 0 0; font-size: 0.85rem; color: var(--wp--preset--color--purr-light); }
.fbc-produkt-opinie .comment-text .meta { grid-column: 1; grid-row: 1; order: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; font-family: var(--wp--preset--font-family--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--wp--preset--color--contrast-3); }
.fbc-produkt-opinie .comment-text .meta strong { font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--medium); font-weight: 700; letter-spacing: 0; color: var(--wp--preset--color--base); }
.fbc-produkt-opinie .comment-text .meta .woocommerce-review__dash { display: none; }
.fbc-produkt-opinie .comment-text .meta .woocommerce-review__verified { font-style: normal; color: var(--wp--preset--color--purr-light); }
.fbc-produkt-opinie .comment-text .description { grid-column: 2; grid-row: 1 / span 3; max-width: 44rem; }
.fbc-produkt-opinie .comment-text .description p { margin: 0 0 var(--wp--preset--spacing--30); line-height: 1.6; color: var(--wp--preset--color--base-3); }
.fbc-produkt-opinie .comment-text .description p:last-child { margin-block-end: 0; }
@media (max-width: 899.98px) {
	.fbc-produkt-opinie .comment-text { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: var(--wp--preset--spacing--20); }
	.fbc-produkt-opinie .comment-text .meta { grid-row: 1; }
	.fbc-produkt-opinie .comment-text .star-rating { grid-row: 2; margin: 0; }
	.fbc-produkt-opinie .comment-text .description { grid-column: 1; grid-row: 3; margin-block-start: var(--wp--preset--spacing--20); }
}
/* Opinie na jasnym (w zakładce): te same karty, kolory dla bieli. */
.fbc-produkt-opinie--jasna .wp-block-woocommerce-product-reviews { color: var(--wp--preset--color--contrast); }
.fbc-produkt-opinie--jasna .commentlist, .fbc-produkt-opinie--jasna .commentlist li { border-color: var(--wp--preset--color--line); }
.fbc-produkt-opinie--jasna .comment-text .meta { color: var(--wp--preset--color--contrast-3); }
.fbc-produkt-opinie--jasna .comment-text .meta strong { color: var(--wp--preset--color--contrast); }
.fbc-produkt-opinie--jasna .comment-text .description p { color: var(--wp--preset--color--contrast-2); }
.fbc-produkt-opinie--jasna .star-rating, .fbc-produkt-opinie--jasna .comment-text .meta .woocommerce-review__verified { color: var(--wp--preset--color--purr); }
/* --------------------------------------------------------------------------
   Formularz opinii (klient 2026-09-16: „ostyluj to nowocześniej")

   Domyślny formularz komentarza WordPressa: etykiety nad polami na całą
   szerokość ekranu, lista rozwijana zamiast gwiazdek, pola bez tła. Tu dostaje
   kartę o szerokości tekstu, pola wypełnione szarym, ocenę w gwiazdkach
   (assets/js/opinia-formularz.js) i imię z adresem obok siebie.
   -------------------------------------------------------------------------- */
.fbc-produkt-opinie #review_form_wrapper {
	--fbc-sciecie: 16px;
	max-width: 46rem;
	margin-block-start: var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--line-dark);
	clip-path: polygon(var(--fbc-sciecie) 0, 100% 0, 100% calc(100% - var(--fbc-sciecie)), calc(100% - var(--fbc-sciecie)) 100%, 0 100%, 0 var(--fbc-sciecie));
}
@supports (corner-shape: bevel) {
	.fbc-produkt-opinie #review_form_wrapper {
		clip-path: none;
		corner-shape: bevel;
		border-radius: var(--fbc-sciecie) 0 var(--fbc-sciecie) 0;
	}
}
.fbc-produkt-opinie #reply-title {
	display: block;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-block-end: var(--wp--preset--spacing--20);
}
.fbc-produkt-opinie .comment-notes {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-3);
}
/* Dwie kolumny tylko dla imienia i adresu — reszta pól idzie przez całą
   szerokość. Bez zmian w znacznikach: pola są sąsiadami w tej samej siatce. */
.fbc-produkt-opinie #commentform {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
}
.fbc-produkt-opinie #commentform > * { grid-column: 1 / -1; margin: 0; }
.fbc-produkt-opinie #commentform > .comment-form-author { grid-column: 1; }
.fbc-produkt-opinie #commentform > .comment-form-email { grid-column: 2; }
.fbc-produkt-opinie #commentform label {
	display: block;
	margin-block-end: 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-3);
}
.fbc-produkt-opinie #commentform .required { color: var(--wp--preset--color--purr); }
.fbc-produkt-opinie #review_form_wrapper input:not([type="submit"]),
.fbc-produkt-opinie #review_form_wrapper textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--wp--preset--color--line-dark);
	border-radius: 3px;
	color: var(--wp--preset--color--base);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
.fbc-produkt-opinie #review_form_wrapper textarea { min-height: 8.5rem; resize: vertical; }
.fbc-produkt-opinie #review_form_wrapper input:not([type="submit"]):focus-visible,
.fbc-produkt-opinie #review_form_wrapper textarea:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--purr);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--purr) 25%, transparent);
}
/* Lista z oceną zostaje w formularzu (to ona wysyła wartość), ale schodzi
   z oczu do jednego piksela — `display: none` odebrałoby przeglądarce miejsce
   na komunikat o brakującej ocenie. */
.fbc-produkt-opinie .fbc-ocena__lista {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}
.fbc-produkt-opinie .fbc-ocena { display: flex; align-items: center; gap: 4px; }
.fbc-produkt-opinie .fbc-ocena__gwiazdka {
	padding: 2px;
	background: none;
	border: 0;
	line-height: 0;
	cursor: pointer;
	color: var(--wp--preset--color--line-dark);
	transition: color 120ms ease, transform 120ms ease;
}
.fbc-produkt-opinie .fbc-ocena__gwiazdka svg { width: 26px; height: 26px; fill: currentColor; }
.fbc-produkt-opinie .fbc-ocena__gwiazdka.is-pelna { color: #e3b341; }
.fbc-produkt-opinie .fbc-ocena__gwiazdka:hover { transform: translateY(-1px); }
.fbc-produkt-opinie .fbc-ocena__podpis {
	margin-inline-start: 10px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-3);
}
.fbc-produkt-opinie .form-submit { display: flex; align-items: center; gap: var(--wp--preset--spacing--40); flex-wrap: wrap; }
.fbc-produkt-opinie .form-submit .cf-turnstile-br { display: none; }
.fbc-produkt-opinie .form-submit #submit { margin: 0; cursor: pointer; }
@media (max-width: 599.98px) {
	.fbc-produkt-opinie #commentform > .comment-form-author,
	.fbc-produkt-opinie #commentform > .comment-form-email { grid-column: 1 / -1; }
}
/* Wariant jasny (formularz stoi w sekcji na bieli). Reguły muszą iść PO
   bazowych: obie mają tę samą wagę, więc rozstrzyga kolejność — wcześniej
   stały wyżej i ciemne pola je przykrywały. */
.fbc-produkt-opinie--jasna #review_form_wrapper { border-color: var(--wp--preset--color--line); }
.fbc-produkt-opinie--jasna #review_form_wrapper input:not([type="submit"]),
.fbc-produkt-opinie--jasna #review_form_wrapper textarea {
	background: #f4f4f6;
	border-color: transparent;
	color: var(--wp--preset--color--contrast);
}
.fbc-produkt-opinie--jasna #review_form_wrapper input:not([type="submit"]):focus-visible,
.fbc-produkt-opinie--jasna #review_form_wrapper textarea:focus-visible { background: var(--wp--preset--color--base); border-color: var(--wp--preset--color--purr); }
.fbc-produkt-opinie--jasna .fbc-ocena__gwiazdka { color: #d5d5dd; }
.fbc-produkt-opinie--jasna .fbc-ocena__gwiazdka.is-pelna { color: #e3b341; }

@media (max-width: 899.98px) {
	.fbc-galeria .wc-block-product-gallery-thumbnails__scrollable { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.fbc-galeria .wc-block-next-previous-buttons__button { opacity: 1; width: 40px; height: 40px; }
	.wc-block-product-gallery-dialog .wc-block-product-gallery-dialog__content img { padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--40); }
	.fbc-produkt-liczby__uklad { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--70); }
	.fbc-produkt-liczby__uklad--bez-zdjecia { grid-template-rows: none; gap: 0; }
	.fbc-produkt-liczby__uklad--bez-zdjecia .fbc-produkt-liczby__lista { grid-column: 1; grid-row: auto; margin-block-start: var(--wp--preset--spacing--50); }
}

/* --------------------------------------------------------------------------
   Niskie okna: hero razem z nagłówkiem ma się zmieścić w 100 dvh. Bloki muszą stać
   NA KOŃCU pliku — wcześniej przegrywały kolejnością z regułami bazowymi kolumny.
   -------------------------------------------------------------------------- */

/* Niskie okna (laptopy 768–860 px): hero razem z nagłówkiem ma się zmieścić w 100 dvh,
   więc kolumna treści dostaje mniejszy tytuł, ciaśniejsze odstępy i krótszy lead. */
@media (min-width: 1200px) and (max-height: 960px) {
	.fbc-produkt-zakup__tresc { --fbc-karta-pad: var(--wp--preset--spacing--50); }
	.fbc-produkt-zakup__tresc > .wp-block-woocommerce-product-sku { margin-block-end: var(--wp--preset--spacing--20); }
	.fbc-produkt-zakup__tresc .wp-block-post-title { font-size: var(--wp--preset--font-size--2-x-large) !important; }
	.fbc-produkt-zakup__cena { margin-block-start: var(--wp--preset--spacing--30); }
	.fbc-produkt-zakup__cena .wp-block-woocommerce-product-price { font-size: var(--wp--preset--font-size--x-large) !important; }
	.fbc-produkt-zakup__lead { margin-block-start: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--small) !important; }
	.fbc-szczegoly { margin-block-start: var(--wp--preset--spacing--40); }
	.fbc-szczegoly > summary { padding-block: var(--wp--preset--spacing--30); }
	.fbc-produkt-zakup__kup { padding-block-start: var(--wp--preset--spacing--40); }
	.fbc-produkt-zakup__okruszki { margin-block-end: 0 !important; }
}

@media (min-width: 1200px) and (max-height: 880px) {
	.fbc-produkt-zakup__gwarancje { margin-block-start: var(--wp--preset--spacing--40); font-size: 0.82rem; }
	.fbc-produkt-zakup__gwarancje li { margin-block: 4px; }
}

@media (min-width: 1200px) and (max-height: 800px) {
	.fbc-produkt-zakup__tresc .wp-block-post-title { font-size: var(--wp--preset--font-size--x-large) !important; }
	.fbc-produkt-zakup__kup { padding-block-start: var(--wp--preset--spacing--30); }
	.fbc-szczegoly > summary { padding-block: var(--wp--preset--spacing--20); }
	.fbc-produkt-zakup__gwarancje { margin-block-start: var(--wp--preset--spacing--30); font-size: 0.78rem; }
	.fbc-produkt-zakup__gwarancje li { margin-block: 2px; }
	.fbc-produkt-zakup__ikona { width: 16px; height: 16px; }
	.fbc-produkt-zakup__cena .wp-block-woocommerce-product-price { font-size: var(--wp--preset--font-size--large) !important; }
	.fbc-produkt-zakup__cena { margin-block-start: var(--wp--preset--spacing--20); }
	.fbc-produkt-zakup__ocena { margin-block-start: var(--wp--preset--spacing--20); }
	.fbc-produkt-zakup__tresc .wp-block-post-title + .fbc-eyebrow { margin-block: var(--wp--preset--spacing--20) 0; }
	.fbc-produkt-zakup__okruszki { margin-block-end: 0 !important; }
	.fbc-szczegoly { margin-block-start: var(--wp--preset--spacing--30); }
	.fbc-produkt-zakup__lead { margin-block-start: var(--wp--preset--spacing--20); }
}

/* Telefon i tablet: treść na białym tle od krawędzi do krawędzi okna, bez marginesów
   sekcji (klient 2026-09-10). Blok musi stać na końcu pliku — wcześniej przegrywał
   kolejnością. Wcięcie tekstu zostaje jako padding wewnętrzny. */
@media (max-width: 1199.98px) {
	.fbc-produkt-zakup__tresc {
		box-sizing: border-box !important;
		width: 100vw !important;
		max-width: 100vw !important;
		margin-inline: calc(-1 * var(--fbc-margines)) !important;
		padding: var(--wp--preset--spacing--60) var(--fbc-margines) var(--wp--preset--spacing--50) !important;
		background: var(--wp--preset--color--base) !important;
	}
}

/* Węższe wcięcie boczne hero na telefonie i tablecie (klient 2026-09-11: „za duży
   jest padding x w hero na mobile"). Globalny gutter strony daje tu 8vw, czyli 31 px
   przy 390 px i 61 px przy 768 px — a zdjęcie ma jeszcze własny oddech w kadrze,
   więc produkt robił się mały. Zmienna działa na sekcji, więc zwęża naraz płytę
   pod zdjęciem, kadr i białą kartę z treścią. Blok na końcu pliku — inaczej
   przegrywa kolejnością z definicją bazową. */
@media (max-width: 1199.98px) {
	.fbc-produkt-zakup {
		--fbc-margines: clamp(18px, 4.6vw, 32px);
		padding-inline: var(--fbc-margines) !important;
	}
}

/* Naddatek tła nad zdjęciem i pod kropkami (klient 2026-09-11). Sekcja dokładała
   24 px białego paska pod nagłówkiem, zanim zaczynała się szara płyta, a płyta
   miała jeszcze 24 px na dole, już po kropkach. Szare tło zaczyna się teraz tuż
   pod nagłówkiem, oddech w płycie zostaje węższy. */
@media (max-width: 1199.98px) {
	.fbc-produkt-zakup { padding-block-start: 0 !important; }
	.fbc-produkt-zakup .fbc-galeria { padding-block: var(--wp--preset--spacing--40); }
	/* Bez szarego pasa pod białą kartą: karta przechodzi prosto w biały pasek
	   kotwic (klient 2026-09-26: „przy przewijaniu pojawia się szara szpara”). */
	.fbc-produkt-zakup { padding-block-end: 0 !important; }
}

/* Odstęp między kolumnami malował pasek w kolorze płyty, ale bez ziarna — na styku
   zdjęcia i białej karty widać było gładki szary pas (klient 2026-09-11). Biała karta
   ma własne wcięcie u góry, więc odstęp jest tu zbędny. */
@media (max-width: 1199.98px) {
	.fbc-produkt-zakup__kolumny { row-gap: 0 !important; }
}

/* --------------------------------------------------------------------------
   Galeria: zdjęcia przejeżdżają przez całą szerokość hero (klient 2026-09-11)

   WooCommerce przewija listę zdjęć poziomo (`scrollTo({ left: index * clientWidth })`),
   a każdy slajd ma szerokość swojego kontenera. Dotąd kontener kończył się na kadrze,
   więc zdjęcia pojawiały się i znikały na jego krawędzi. Teraz kontener ma szerokość
   okna i jest wyśrodkowany względem kadru, a slajdy wraz z nim — matematyka WooCommerce
   zostaje nietknięta, bo slajd dalej równa się szerokości kontenera. Samo zdjęcie
   wraca do rozmiaru kadru przez jednostkę kontenerową `cqw` (`.large-image` jest
   kontenerem zapytań), więc stoi dokładnie tam, gdzie stało, a sąsiednie nadjeżdżają
   od krawędzi okna i za nią uciekają.

   Przycinanie przeniesione na sekcję: `overflow-x: clip` przycina bez tworzenia
   obszaru przewijania, więc przyklejona kolumna ze zdjęciem dalej działa
   (`overflow: hidden` by ją zepsuł).

   Warstwy: karta z treścią i miniatury stoją nad przejeżdżającym pasem, a kolumna
   ze zdjęciem wskakuje na wierzch dopiero z otwartym lightboxem.
   -------------------------------------------------------------------------- */
.fbc-produkt-zakup { overflow-x: clip; }
.fbc-galeria .wc-block-product-gallery-large-image {
	overflow: visible;
	container-type: inline-size;
}
.fbc-galeria .wc-block-product-gallery-large-image__container {
	width: 100vw;
	margin-inline: calc((100% - 100vw) / 2);
}
.fbc-galeria .wc-block-product-gallery-large-image__wrapper { justify-content: center; }
.fbc-galeria .wc-block-components-product-image {
	width: 100cqw;
	max-width: 100cqw;
}
/* Pas sięga krawędzi okna, więc nie może przechwytywać kliknięć poza samym zdjęciem
   (pod nim leżą miniatury i karta). Zdarzenie z obrazu i tak bąbelkuje do kontenera,
   na którym WooCommerce trzyma obsługę otwarcia lightboxa. */
.fbc-galeria .wc-block-product-gallery-large-image__container,
.fbc-galeria .wc-block-product-gallery-large-image__wrapper { pointer-events: none; }
.fbc-galeria .wc-block-components-product-image { pointer-events: auto; }
.fbc-galeria .wc-block-product-gallery-thumbnails { position: relative; z-index: 2; }
.fbc-produkt-zakup__tresc { position: relative; z-index: 10; }
.fbc-produkt-zakup__kolumny > .wp-block-column:first-child { z-index: 1; }
.fbc-produkt-zakup__kolumny > .wp-block-column:first-child:has(.wc-block-product-gallery-dialog[open]) { z-index: 100; }

/* Równy oddech po obu stronach zdjęcia (klient 2026-09-11): między miniaturami
   a kadrem było 12 px, a między kadrem a kartą 64 px z odstępu kolumn. Kolumny
   dostają ten sam odstęp co siatka galerii. */
@media (min-width: 1200px) {
	.fbc-produkt-zakup__kolumny { column-gap: var(--wp--preset--spacing--30) !important; }
}

/* ---- Cena promocyjna ----
   WooCommerce daje `<del>` ze starą ceną i `<ins>` z nową w tym samym rozmiarze,
   więc bez stylu obie wyglądają jak jedna długa liczba. Stara schodzi na drugi
   plan (mniejsza, w kolorze tekstu pobocznego), nowa zostaje główną ceną,
   a plakietka z `inc/sklep.php` mówi, ile to procent. Obie ceny siedzą
   w wewnętrznym `div` bloku — to on jest tu pojemnikiem, nie sam blok. */
.fbc-produkt-zakup .wp-block-woocommerce-product-price,
.fbc-produkt-zakup .wc-block-components-product-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--30);
}
.fbc-produkt-zakup .wp-block-woocommerce-product-price del {
	font-size: 0.64em;
	color: var(--wp--preset--color--contrast-2);
	text-decoration-thickness: 1px;
	opacity: 0.85;
}
.fbc-produkt-zakup .wp-block-woocommerce-product-price ins { text-decoration: none; background: transparent; }
.fbc-promo-plakietka {
	align-self: center;
	padding: 3px 8px 4px;
	border-radius: 2px;
	background: var(--wp--preset--color--purr);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	line-height: 1;
	white-space: nowrap;
}
/* Omnibus (inc/omnibus.php): najniższa cena z 30 dni przed obniżką, drobnym
   drukiem pod ceną. W bloku zakupowym wewnętrzny pojemnik ceny znika z układu,
   żeby linia mogła zejść pod ceny i plakietkę na całą szerokość. */
.fbc-omnibus {
	display: block;
	flex-basis: 100%;
	margin-block-start: 4px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--wp--preset--color--contrast-2);
	white-space: normal;
}
.fbc-omnibus .woocommerce-Price-amount { font: inherit; color: inherit; }
.fbc-produkt-zakup .wp-block-woocommerce-product-price .wc-block-components-product-price:has(.fbc-omnibus) { display: contents; }
.fbc-produkt-zakup .wp-block-woocommerce-product-price .fbc-omnibus { order: 1; margin-block-start: 6px; font-size: 0.74rem; }
.fbc-kotwice__cena .fbc-omnibus { display: none; }
/* Cena przedsprzedażowa / wprowadzająca (inc/promocje.php): etykieta przed ceną, cena regularna
   drobnym drukiem pod spodem — jak linia Omnibus, bez przekreślenia. */
.fbc-cena-wprowadzajaca__etykieta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72em;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--purr);
	margin-inline-end: 4px;
}
.fbc-cena-regularna {
	display: block;
	flex-basis: 100%;
	margin-block-start: 4px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--wp--preset--color--contrast-2);
	white-space: normal;
}
.fbc-cena-regularna .woocommerce-Price-amount { font: inherit; color: inherit; }
.fbc-produkt-zakup .wp-block-woocommerce-product-price .wc-block-components-product-price:has(.fbc-cena-regularna) { display: contents; }
.fbc-produkt-zakup .wp-block-woocommerce-product-price .fbc-cena-regularna { order: 1; margin-block-start: 6px; font-size: 0.74rem; }
.fbc-kotwice__cena .fbc-cena-regularna,
.fbc-kotwice__cena .fbc-cena-wprowadzajaca__etykieta { display: none; }

/* ---- Pasek promocji (wzorzec produkt-pasek-promo) ----
   Czarna listwa między nagłówkiem a hero: wielkość obniżki, nazwa produktu
   i odliczanie do końca promocji (assets/js/promo.js). Hero liczy swoją wysokość
   od `--fbc-nad`, więc pasek podnosi tę wartość o własną wysokość i okno dalej
   mieści cały blok zakupowy. */
.fbc-pasek-promo {
	--fbc-pasek-wys: 46px;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--fbc-pasek-wys);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px var(--fbc-gutter);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.fbc-produkt-zakup { --fbc-pasek-h: 0px; }
body:has(.fbc-pasek-promo) .fbc-produkt-zakup { --fbc-pasek-h: 46px; }
.fbc-pasek-promo__tresc {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 14px;
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.3;
	text-align: center;
}
.fbc-pasek-promo__znak {
	padding: 3px 8px 4px;
	border-radius: 2px;
	background: var(--wp--preset--color--purr);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	line-height: 1;
	white-space: nowrap;
}
.fbc-pasek-promo__zegar { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.fbc-pasek-promo__etykieta { color: rgba(255, 255, 255, 0.62); }
.fbc-pasek-promo__czas {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;   /* cyfry nie skaczą przy każdym tyknięciu */
}
@media (max-width: 599.98px) {
	/* Na telefonie nazwa produktu zjada całą listwę — zostaje obniżka i zegar. */
	.fbc-pasek-promo { --fbc-pasek-wys: 40px; }
	.fbc-pasek-promo__tekst { display: none; }
	.fbc-pasek-promo__tresc { font-size: 0.78rem; }
}
/* Układ „flow" dokłada odstęp między blokami — hero przestało być pierwsze, więc
   pod paskiem pojawiał się biały prześwit. Sekcje mają się stykać. */
.fbc-pasek-promo + .fbc-produkt-zakup { margin-block-start: 0 !important; }

/* Hero produktu przechodzi na jeden słupek już przy 1200 px (klient 2026-09-11:
   „na pośrednich się rozjeżdża"). Bloki kolumn WordPressa łamią się dopiero przy
   782 px, więc między tymi wartościami trzeba je złamać ręcznie — inaczej reguły
   telefonu (karta na całą szerokość, kropki zamiast miniatur) mieszają się
   z układem dwukolumnowym. */
@media (max-width: 1199.98px) {
	.fbc-produkt-zakup__kolumny { flex-wrap: wrap !important; }
	/* Bez `max-width` — biała karta z treścią rozlewa się na całą szerokość okna
	   (`width: 100vw` niżej), a ograniczenie do szerokości kolumny zostawiało
	   z prawej szary pas. */
	.fbc-produkt-zakup__kolumny > .wp-block-column { flex-basis: 100% !important; }
	.fbc-produkt-zakup__kolumny > .fbc-produkt-zakup__tresc { flex-basis: 100vw !important; }
	/* WooCommerce układa miniatury w pionie od 768 px wzwyż — w jednym słupku mają
	   leżeć poziomo pod zdjęciem, tak jak na telefonie. */
	.fbc-galeria .wc-block-product-gallery-thumbnails__scrollable { flex-direction: row !important; }
	.fbc-galeria .wc-block-product-gallery-thumbnails { height: auto !important; min-height: 0 !important; }
}
/* W układzie jednosłupkowym kadr jest kwadratem na całą szerokość — przy 1180 px
   dawało to zdjęcie wyższe niż okno i widać było sam czubek pedału. Wysokość
   ograniczona do części okna; kwadrat zwęża się razem z nią, więc kadr zostaje
   wyśrodkowany. Na telefonie nic się nie zmienia — tam kwadrat jest niższy niż próg. */
@media (max-width: 1199.98px) {
	.fbc-galeria .wc-block-product-gallery-large-image {
		max-height: 58dvh;
		justify-self: center;
	}
}
/* Kreska nad leadem (klient 2026-09-11) — ta sama linia co nad listą „What makes
   it different", więc cena i opis rozdzielają się tak samo jak reszta karty. */
.fbc-produkt-zakup__lead {
	border-block-start: 1px solid var(--wp--preset--color--line);
	padding-block-start: var(--wp--preset--spacing--40);
}

/* ---- Udostępnienie oferty ----
   Sama ikona na końcu wiersza z oceną — słowo „Share" rozpychało wiersz na dwie
   linie w wąskiej karcie. Etykieta zostaje w znaczniku dla czytników ekranu,
   a po skopiowaniu linku wychodzi z ukrycia jako dymek nad resztą treści, więc
   potwierdzenie niczego nie przesuwa. */
.fbc-udostepnij {
	position: relative;
	margin-inline-start: auto;
	margin-inline-end: -7px;   /* rysunek wraca do krawędzi karty */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: transparent;
	color: var(--wp--preset--color--contrast-2);
	line-height: 1;
	cursor: pointer;
	transition: color 160ms ease, background 160ms ease;
}
.fbc-udostepnij:hover { color: var(--wp--preset--color--purr); background: rgba(30, 30, 32, 0.05); }
.fbc-udostepnij:focus-visible { outline: 2px solid var(--wp--preset--color--purr); outline-offset: 2px; }
.fbc-udostepnij.is-gotowe { color: var(--wp--preset--color--purr); }
.fbc-udostepnij svg { flex: 0 0 auto; }

/* Rozwijana lista udostępniania (klient 2026-09-15). Wcześniej przycisk wołał
   Web Share API i na desktopie otwierał systemowe okno Windows — "jakiś applet,
   strasznie toporne". Panel wisi pod przyciskiem, przy prawej krawędzi karty,
   w tym samym języku co reszta: biały, ze ściętym narożnikiem, bez ramki. */
/* Obudowa buduje się w JS wokół przycisku — to od niej panel liczy swoje położenie. */
.fbc-udostepnij-obudowa { position: relative; margin-inline-start: auto; display: inline-flex; }
.fbc-udostepnij-obudowa .fbc-udostepnij { margin-inline-start: 0; }
/* `display: flex` z tej reguły bije domyślne `[hidden] { display: none }` — ma
   wyższą specyficzność niż styl przeglądarki. Panel zostawał więc widoczny mimo
   `panel.hidden = true` i nie dawał się zamknąć (klient 2026-09-15). */
.fbc-udostepnij-panel[hidden] { display: none; }
.fbc-udostepnij-panel {
	--fbc-sciecie: 10px;
	position: absolute;
	inset-block-start: calc(100% + 6px);
	inset-inline-end: 0;
	z-index: 40;
	display: flex;
	flex-direction: column;
	min-width: 172px;
	padding: 6px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 10px 30px -12px rgba(30, 30, 32, 0.35), 0 0 0 1px var(--wp--preset--color--line);
	clip-path: polygon(var(--fbc-sciecie) 0, 100% 0, 100% calc(100% - var(--fbc-sciecie)), calc(100% - var(--fbc-sciecie)) 100%, 0 100%, 0 var(--fbc-sciecie));
}
@supports (corner-shape: bevel) {
	.fbc-udostepnij-panel { clip-path: none; corner-shape: bevel; border-radius: var(--fbc-sciecie) 0 var(--fbc-sciecie) 0; }
}
.fbc-udostepnij-panel__poz {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	width: 100%;
	padding: 8px 10px;
	border: 0;
	background: transparent;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
	text-align: start;
	text-decoration: none;
	cursor: pointer;
	transition: background 140ms ease, color 140ms ease;
}
.fbc-udostepnij-panel__poz:hover { background: var(--wp--preset--color--base-2); color: var(--wp--preset--color--purr); }
.fbc-udostepnij-panel__poz:focus-visible { outline: 2px solid var(--wp--preset--color--purr); outline-offset: -2px; }
.fbc-udostepnij-panel__poz svg { flex: 0 0 auto; color: var(--wp--preset--color--contrast-2); }
.fbc-udostepnij-panel__poz:hover svg { color: inherit; }
/* Kopiowanie linku oddzielone kreską: to jedyna pozycja, która nie wychodzi na zewnątrz. */
.fbc-udostepnij-panel__kopiuj { margin-block-start: 4px; padding-block-start: 10px; border-block-start: 1px solid var(--wp--preset--color--line); }
.fbc-udostepnij-panel__kopiuj.is-gotowe { color: var(--wp--preset--color--purr); }
.fbc-udostepnij-panel__kopiuj.is-gotowe svg { color: inherit; }
.fbc-udostepnij__etykieta {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.fbc-udostepnij.is-gotowe .fbc-udostepnij__etykieta {
	z-index: 3;
	inset-block-start: calc(100% + 6px);
	inset-inline-end: 0;
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
	padding: 5px 8px 6px;
	border-radius: 2px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   13. Opis produktu — „zmienne tło" (wariant F z /lab/opis/, klient 2026-09-11)

   Scena zostaje na całym ekranie i przenika w kolejną, a przewijają się same
   teksty. Nad wszystkim pasek cech, przy produkcie jeden znacznik na scenę.
   Znaczniki są pozycjonowane w procentach ZDJĘCIA, więc kadr musi leżeć
   w pudełku o jego proporcjach — stąd `.fbc-opis-kino__scena` zamiast
   `object-fit` na obrazie. Reguły przeniesione z assets/css/lab-opis.css.
   -------------------------------------------------------------------------- */
.fbc-opis-kino {
	/* Pasek kotwic jest przyklejony do krawędzi okna i zasłania 60 px — sceny i bloki
	   tekstu liczą swoją wysokość od tego, co zostaje (klient 2026-09-11). */
	--fbc-pasek: 60px;
	/* Płyta z ziarnem, ta sama co pod zdjęciami w galerii i w hero (klient 2026-09-15):
	   zdjęcia scen z przezroczystym tłem mają leżeć na tym samym materiale, bez własnego
	   prostokąta w innym odcieniu szarego. */
	--fbc-opis-tlo: var(--fbc-plyta);
	/* Ten sam margines co reszta strony — tekst i pasek cech mają stać w kolumnie
	   treści; poza kontener wychodzi tylko zdjęcie. */
	--fbc-margines: min(8vw, 136px);
}
/* ---- F. Zmienne tło (A + D) ----
   Scena zostaje przyklejona na cały ekran i przenika w kolejną, a przewijają się
   same teksty. Treść wchodzi nad tło marginesem ujemnym — bez tego sticky
   i bloki tekstu stałyby jedno pod drugim. */
.fbc-opis-kino { position: relative; background-color: var(--fbc-opis-tlo); background-image: var(--fbc-ziarno); background-repeat: repeat; }
.fbc-opis-kino__tlo {
	position: sticky;
	inset-block-start: var(--fbc-pasek);
	height: calc(100dvh - var(--fbc-pasek));
	overflow: hidden;
}
/* Scena ma proporcje zdjęcia i jest przyklejona do prawej krawędzi okna — to samo,
   co robił `object-fit: cover` z `object-position: 100%`, tylko że tu kadr jest
   prawdziwym pudełkiem. Dzięki temu znacznik można ustawić w procentach ZDJĘCIA:
   przy `object-fit` procenty odnosiłyby się do okna i punkt uciekałby przy każdej
   zmianie proporcji. */
.fbc-opis-kino__scena {
	position: absolute;
	/* Pół sekcji; zdjęcie wypełnia je jak `cover` (klient 2026-09-11). Okno przycina,
	   kadr w środku trzyma kwadratowe proporcje oryginału — bez tego współrzędne
	   znaczników odnosiłyby się do przyciętego wycinka i punkt uciekałby od celu. */
	inset-inline-end: 0;
	inset-block-end: 0;
	width: 50%;
	height: 100%;
	opacity: 0;
	transition: opacity 700ms ease;
}
.fbc-opis-kino__okno {
	position: absolute;
	inset: 0;
	overflow: hidden;
	/* Bez miękkiej krawędzi po lewej (klient 2026-09-15). Maska miała wtapiać kadr
	   w białe tło, gdy zdjęcia były wycinkami bez tła; zdjęcia z sesji 4 mają własne
	   tło i kadr ma się kończyć prostą krawędzią. */
}
.fbc-opis-kino__kadr {
	position: absolute;
	/* Wysokość rządzi (klient 2026-09-11): kadr wypełnia całą dostępną wysokość pod
	   paskiem, a szerokość wychodzi z kwadratowych proporcji zdjęcia — bez `min-width`,
	   bo rozciągnęłoby kwadrat i punkty przestałyby trzymać się produktu. Przypięty
	   prawym dolnym narożnikiem; jeśli wyjdzie węższy od kolumny, po lewej zostaje tło. */
	/* Wyśrodkowany w osi swojej połowy sekcji (klient 2026-09-15): przypięcie do
	   prawej krawędzi sprawiało, że przy zmianie szerokości okna zdjęcie odjeżdżało
	   w bok, zamiast zostawać na środku kolumny. */
	inset-inline-start: 50%;
	transform: translateX(-50%);
	inset-block-end: 0;
	height: 100%;
	aspect-ratio: 1;
}
.fbc-opis-kino__kadr img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fbc-opis-kino__scena.is-widoczne { opacity: 1; }
/* Desktop: pod tekstem czysta biel — zdjęcie wyłania się z niej maską na scenie.
   Tło sekcji też jest białe, więc kadr nie ma z czym kontrastować. */
/* Na desktopie też płyta — wcześniej sekcja szła na biel, bo kadry były wycinkami
   bez tła i biel była tłem docelowym (klient 2026-09-15). */
/* Wyprowadzenie: cel na produkcie, podpis daleko na czystym tle, między nimi łamana
   pod kątem prostym rysowana skryptem (assets/js/opis-kino.js) — ten sam zabieg co
   przy punktach na stronie głównej. Współrzędne celu i podpisu są procentami kadru,
   więc trzymają się produktu niezależnie od szerokości okna. */
.fbc-opis-kino__linie {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}
/* Znacznik jest od razu na swoim miejscu — bez wchodzenia (klient 2026-09-15,
   po próbie z rysowaniem jak punkty na stronie głównej): podpis ma być czytelny
   w tej samej chwili, w której scena się pojawia. */
.fbc-opis-kino__linie polyline {
	fill: none;
	stroke: var(--wp--preset--color--purr);
	stroke-width: 1;
	opacity: 0.5;
}
/* Cel jak punkty na stronie głównej (klient 2026-09-15): mały kwadrat z ledwie
   zaokrąglonym narożnikiem, a wokół niego dwie fale rozchodzące się co sekundę.
   Klatki `fbc-sonar` są wspólne — stoją w style.css przy punktach hero. */
.fbc-opis-kino__cel {
	position: absolute;
	inset-block-start: var(--y);
	inset-inline-start: var(--x);
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	border-radius: 1px;
	/* Kwadrat w środku biały, obwódki sonaru zostają fioletowe
	   (klient 2026-09-16) — cel leży na produkcie, który jest ciemny. */
	background: var(--wp--preset--color--base);
}
.fbc-opis-kino__cel::before,
.fbc-opis-kino__cel::after {
	content: "";
	position: absolute;
	inset: -1px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--purr) 80%, transparent);
	border-radius: 1px;
	opacity: 0;
}
/* Pulsuje tylko cel sceny, którą widać — pozostałe leżą pod nią i nie ma powodu,
   żeby liczyły animację. */
.fbc-opis-kino__scena.is-widoczne .fbc-opis-kino__cel::before,
.fbc-opis-kino__scena.is-widoczne .fbc-opis-kino__cel::after { animation: fbc-sonar 2s ease-out infinite; }
.fbc-opis-kino__scena.is-widoczne .fbc-opis-kino__cel::after { animation-delay: 1s; }
@media (prefers-reduced-motion: reduce) {
	.fbc-opis-kino__scena.is-widoczne .fbc-opis-kino__cel::before { animation: none; opacity: 1; transform: scale(2.2); }
	.fbc-opis-kino__scena.is-widoczne .fbc-opis-kino__cel::after { display: none; }
}
.fbc-opis-kino__nazwa {
	position: absolute;
	inset-block-start: var(--ly);
	inset-inline-start: var(--lx);
	transform: translateY(-50%);
	padding: 8px 12px 9px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.92);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	line-height: 1;
	white-space: nowrap;
	color: var(--wp--preset--color--contrast);
}

/* Treść wchodzi nad scenę marginesem ujemnym — bez tego przyklejone tło i bloki
   tekstu stałyby jedno pod drugim. */
/* Kolumna z treścią leży NAD sceną i ma pełną szerokość sekcji, więc bez tego
   przechwytywała najazd myszy nad pigułkami i dymek z nazwą cechy nie pokazywał się
   na desktopie (klient 2026-09-14). Zdarzenia łapie sam blok tekstu, nie pusty pas
   obok niego. */
.fbc-opis-kino__tresc {
	position: relative;
	z-index: 1;
	margin-block-start: calc(-1 * (100dvh - var(--fbc-pasek)));
	pointer-events: none;
}
.fbc-opis-kino__blok { pointer-events: auto; }

/* Opis skokami po scenach robi skrypt (assets/js/opis-slajdy.js, stała
   FBC_OPIS_SLAJDY w inc/produkt-opis.php). `scroll-snap` tu nie wystarcza:
   bloki mają wysokość okna, więc przy `mandatory` jeden ruch kółkiem nie pokonuje
   połowy bloku i przeglądarka wraca do punktu wyjścia — zmierzone, strona stała
   w miejscu mimo kolejnych ruchów. Klasa `--slajdy` zostaje, bo po niej skrypt
   poznaje, że próba jest włączona. */
.fbc-opis-kino__blok {
	box-sizing: border-box;
	min-height: calc(100dvh - var(--fbc-pasek));
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 50%;
	/* Większy oddech z prawej: tekst i zdjęcie dzielą sekcję po połowie, więc bez
	   tego wiersz kończyłby się tuż przy krawędzi kadru. */
	padding-inline: var(--fbc-margines) calc(var(--fbc-margines) * 1.6);
	opacity: 0.3;
	transform: translateY(8px);
	transition: opacity 420ms ease, transform 420ms ease;
}
.fbc-opis-kino__blok.is-aktywny { opacity: 1; transform: none; }

/* ---- Wskaźnik cech ----
   Pigułki na dole sceny zamiast drugiego poziomego paska: pasek zakładek produktu
   jest przyklejony do krawędzi okna i dwie listwy jedna nad drugą biły się o to samo
   miejsce (klient 2026-09-11). Ten sam język co miniatury w galerii — aktywna pozycja
   jest szersza, nazwa cechy wychodzi dopiero przy najechaniu. */
.fbc-opis-kino__pigulki {
	position: absolute;
	inset-inline: 0;
	inset-block-end: var(--wp--preset--spacing--50);
	z-index: 3;
	pointer-events: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding-inline: var(--fbc-margines);
}
.fbc-opis-kino__krok {
	position: relative;
	width: 18px;
	height: 6px;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(30, 30, 32, 0.22);
	cursor: pointer;
	transition: width 260ms cubic-bezier(.2,.7,.2,1), background 200ms ease;
}
.fbc-opis-kino__krok:hover { background: rgba(30, 30, 32, 0.45); }
.fbc-opis-kino__krok.is-aktywny { width: 44px; background: var(--wp--preset--color--purr); }
.fbc-opis-kino__krok:focus-visible { outline: 2px solid var(--wp--preset--color--purr); outline-offset: 4px; }
/* Nazwa cechy jest dostępna dla czytników ekranu i wychodzi jako dymek przy najechaniu
   — na pigułce nie ma miejsca na tekst, a stały podpis zrobiłby z tego drugi pasek. */
.fbc-opis-kino__krok-nazwa {
	position: absolute;
	inset-block-end: calc(100% + 10px);
	inset-inline-start: 50%;
	transform: translateX(-50%);
	padding: 6px 10px 7px;
	border-radius: 2px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.04em;
	line-height: 1;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 180ms ease;
}
.fbc-opis-kino__krok:hover .fbc-opis-kino__krok-nazwa,
.fbc-opis-kino__krok:focus-visible .fbc-opis-kino__krok-nazwa { opacity: 1; }
@media (max-width: 1023.98px) {
	/* W jednym słupku tekst nie zmieści się obok produktu — prawdziwe cechy mają po
	   kilka akapitów i listę. Scena przykleja się więc POD paskiem kotwic jako pas
	   u góry, a tekst przewija się pod nią. Zmiana zdjęcia zostaje, znika tylko
	   nakładanie tekstu na produkt. */
	.fbc-opis-kino__tlo {
		/* `svh`, nie `dvh`: `dvh` zmienia się, gdy przy przewijaniu chowa się pasek
		   adresu, i scena przeliczała się w trakcie przewijania (2026-09-26). */
		height: 42svh;
		/* Nad tekstem, z własnym tłem: akapity mają wjeżdżać POD scenę, nie na nią. */
		z-index: 2;
		background: var(--fbc-opis-tlo) var(--fbc-ziarno) repeat;   /* z ziarnem sekcji, żeby krawędź pasa się nie odcinała */
	}
	.fbc-opis-kino__scena { width: 100%; }
	.fbc-opis-kino__tresc { z-index: 1; margin-block-start: 0; }
	.fbc-opis-kino__blok {
		width: 100%;
		min-height: 0;
		opacity: 1;
		transform: none;
		padding-block: var(--wp--preset--spacing--60);
	}
	/* Podpis nie mieści się obok produktu stojącego przy krawędzi — nazwa części
	   jest i tak w tytule cechy obok. */
	.fbc-opis-kino__nazwa,
	.fbc-opis-kino__linie { display: none; }
}

@media (max-width: 1023.98px) {
	/* Na telefonie pigułki leżą na produkcie, nie na czystym tle — potrzebują własnej
	   podkładki, żeby dało się je zobaczyć na ciemnym karbonie. */
	/* Pigułki pionowo przy lewej krawędzi sceny (klient 2026-09-26: najpierw „na
	   bok, pionowo”, potem „na lewo”), na środku jej wysokości. Aktywna pigułka
	   jest wyższa zamiast szerszej, obszar dotyku obrócony tak samo. Pas pod sceną
	   (przerwa od tekstu, gdy pigułki leżały na dole) zdjęty — już niepotrzebny. */
	.fbc-opis-kino__pigulki {
		inset-block: 50% auto;
		inset-inline: 12px auto;
		transform: translateY(-50%);
		flex-direction: column;
		flex-wrap: nowrap;
		width: auto;
		margin: 0;
		padding: 12px 8px;
		border-radius: 999px;
		/* Bez `backdrop-filter`: rozmycie tła pod pigułkami liczy się przy każdej
		   klatce przewijania — na telefonie kosztowne. Pełniejsza biel wystarcza. */
		background: rgba(255, 255, 255, 0.92);
	}
	.fbc-opis-kino__krok { width: 6px; height: 18px; transition: height 260ms cubic-bezier(.2,.7,.2,1), background 200ms ease; }
	.fbc-opis-kino__krok.is-aktywny { width: 6px; height: 44px; }
	.fbc-opis-kino__krok::after { inset: -4px -19px; }
	/* Cień pod sceną: przewijany tekst ma wyraźnie wjeżdżać POD nią (klient 2026-09-26). */
	.fbc-opis-kino__tlo { box-shadow: 0 8px 14px -10px rgba(20, 20, 24, 0.14); }
}
/* Dopasowanie do prawdziwej treści opisu: akapity mają listy i pogrubienia,
   a tytuł jest H2 z numerem w środku (renderer wstawia `.fbc-nr` na początku
   nagłówka) — numer musi udawać osobny wiersz, inaczej skleja się z tytułem. */
.fbc-opis-kino__blok h2 {
	margin: var(--wp--preset--spacing--20) 0 0;
	/* Skaluje się z szerokością okna tym samym współczynnikiem co hero na stronie
	   głównej (klient 2026-09-15) — przy stałym `em` nagłówek na szerokim ekranie
	   wyglądał drobno wobec pełnoekranowej sceny obok. */
	font-size: clamp(1.75rem, 2.6vw, 3.4rem) !important;
	line-height: 1.08;
	letter-spacing: -0.01em;
}
.fbc-opis-kino__blok h2 .fbc-nr {
	display: block;
	margin-block-end: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.42em;
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--purr);
}
.fbc-opis-kino__blok h3 { margin-block: var(--wp--preset--spacing--40) 0; font-size: 1.05em !important; }
.fbc-opis-kino__blok p { margin-block: var(--wp--preset--spacing--30) 0; color: var(--wp--preset--color--contrast-2); }
/* Pierwszy akapit prowadzi do tekstu: więcej powietrza od tytułu (nagłówek skaluje
   się z szerokością okna i przy dużych stopniach odstęp z rytmu akapitów był za
   ciasny) i odrobinę większy stopień. Rola przejęta po podtytule H3, który od
   2026-09-15 nie jest renderowany (klient). */
.fbc-opis-kino__blok p:first-of-type {
	margin-block-start: var(--wp--preset--spacing--50);
	font-size: 1.05em;
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
}
.fbc-opis-kino__blok ul,
.fbc-opis-kino__blok ol { margin-block: var(--wp--preset--spacing--30); padding-inline-start: 1.3em; color: var(--wp--preset--color--contrast-2); }
.fbc-opis-kino__blok li { margin-block: var(--wp--preset--spacing--20); }
.fbc-opis-kino__blok strong { color: var(--wp--preset--color--contrast); }
/* Prawdziwe cechy bywają dłuższe niż okno — blok ma wtedy rosnąć, a nie ścinać treści. */
.fbc-opis-kino__blok { padding-block: var(--wp--preset--spacing--80); }

/* --------------------------------------------------------------------------
   12b. Pasek kotwic na stronie produktu (klient 2026-09-11)

   Zakładki zastąpione jedną stroną: sekcje stoją jedna pod drugą, a pasek
   prowadzi do nich kotwicami i podświetla tę, w której jest czytelnik
   (assets/js/kotwice.js). Wygląd jak dawne zakładki — pełna szerokość okna,
   biała listwa z dolną kreską, aktywna pozycja podkreślona fioletem.
   -------------------------------------------------------------------------- */
.fbc-kotwice {
	box-sizing: border-box;
	display: flex;
	align-items: stretch;
	gap: var(--wp--preset--spacing--50);
	/* Pasek przylega do bloku zakupowego. Bez tego dostaje globalny odstęp między
	   blokami (`blockGap`, spacing--50) i nad listwą zostaje biały pas — klient
	   2026-09-15. Reguła layoutu rdzenia siedzi w `:where()`, więc sama klasa
	   wystarczy, bez `!important`. */
	margin-block-start: 0;
	position: sticky;
	inset-block-start: 0;
	z-index: 6;
	width: 100%;
	background: var(--wp--preset--color--base);
	border-block-end: 1px solid var(--wp--preset--color--line);
	/* Jeden rozmiar tekstu dla całego paska: kotwice po lewej i nazwa produktu
	   po prawej to ten sam poziom nawigacji, więc mają wyglądać tak samo
	   (klient 2026-09-21). Wcześniej na szerokim ekranie kotwice miały 16 px,
	   a nazwa 13 px. */
	--fbc-kotwice-tekst: 1rem;
}
.fbc-kotwice__lista {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	/* Ciaśniej niż przed dołożeniem zakupu po prawej (klient 2026-09-16):
	   przy dawnym odstępie dwie ostatnie kotwice wypadały poza ekran. */
	gap: clamp(1rem, 2.4vw, 2rem);
	padding-inline: var(--fbc-margines, min(8vw, 136px));
	overflow-x: auto;
	scrollbar-width: none;
}
.fbc-kotwice__lista::-webkit-scrollbar { display: none; }
/* Wygaszenie krawędzi, gdy po danej stronie są dalsze kotwice (kotwice.js,
   klient 2026-09-26) — ucięte słowo czyta się jako przewijanie, nie błąd. */
.fbc-kotwice__lista.is-dalej { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.fbc-kotwice__lista.is-wstecz { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent); }
.fbc-kotwice__lista.is-wstecz.is-dalej { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.fbc-kotwice__karta {
	display: inline-flex;
	/* Do środka, nie do linii bazowej: numer ma mniejszy stopień, więc przy
	   wyrównaniu bazowym cała etykieta wyjeżdżała o 3,5 px wyżej niż nazwa
	   produktu po prawej stronie paska (klient 2026-09-21: „kotwice nie są na
	   tej samej wysokości co nazwa produktu"). */
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	flex: none;
	padding: var(--wp--preset--spacing--40) 0;
	margin-block-end: -1px;
	border-block-end: 2px solid transparent;
	font-size: var(--fbc-kotwice-tekst);
	font-weight: 700;
	color: var(--wp--preset--color--contrast-3);
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease, border-color .2s ease;
}
.fbc-kotwice__karta .fbc-nr {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--preset--color--contrast-3);
	transition: color .2s ease;
}
.fbc-kotwice__karta:hover { color: var(--wp--preset--color--contrast); }
.fbc-kotwice__karta.is-aktywna { color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--purr); }
.fbc-kotwice__karta.is-aktywna .fbc-nr { color: var(--wp--preset--color--purr); }
.fbc-kotwice__karta:focus-visible { outline: 2px solid var(--wp--preset--color--purr); outline-offset: 4px; }
/* Tryb ciasny: znikają numery (same numery to ponad 150 px). Stopień pisma
   zostaje bez zmian — tekst, który kurczy się wraz z oknem, czyta się jak
   usterka (klient 2026-09-21). Tryb włącza pomiar w assets/js/kotwice.js,
   a nie próg szerokości okna: pasek z trzema kotwicami mieści się tam, gdzie
   pasek z sześcioma już nie. */
.fbc-kotwice.is-ciasno .fbc-kotwice__karta .fbc-nr { display: none; }
/* Zakup po prawej stronie paska (klient 2026-09-16: „żeby była zawsze pod
   ręką"). Pasek stoi pod blokiem zakupowym i jest przyklejony, więc od chwili,
   gdy boks wyjedzie z ekranu, to jedyne miejsce z ceną i przyciskiem. */
.fbc-kotwice__zakup {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	flex: none;
	padding-inline-end: var(--fbc-margines, min(8vw, 136px));
	padding-block: var(--wp--preset--spacing--20);
}
.fbc-kotwice__nazwa {
	font-size: var(--fbc-kotwice-tekst);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
}
.fbc-kotwice__cena {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
	white-space: nowrap;
}
.fbc-kotwice__cena del { opacity: 0.5; margin-inline-end: 4px; }
.fbc-kotwice__cena ins { text-decoration: none; color: var(--wp--preset--color--purr); }
/* Sam przycisk nie ma własnej geometrii: klasy przycisku blokowego dają mu
   ten sam krój, wysokość, ścięcie narożnika i wjazd koloru co każde CTA
   (klient 2026-09-16). Tutaj zostaje wyłącznie stan „dodane". */
.fbc-kotwice__przycisk { flex: none; }
.fbc-kotwice__przycisk.is-ladowanie { opacity: 0.6; }
.fbc-kotwice__przycisk.is-dodane,
.fbc-kotwice__przycisk.is-dodane:hover { background: var(--wp--preset--color--contrast); }
.fbc-kotwice__przycisk.is-dodane::before { transform: scaleX(0); }
/* Wąsko: cała grupa zakupowa schodzi naraz, a nie kawałek po kawałku —
   decyduje pomiar w assets/js/kotwice.js. */
.fbc-kotwice.is-bez-zakupu .fbc-kotwice__zakup { display: none; }
@media (max-width: 599.98px) {
	.fbc-kotwice__zakup { gap: var(--wp--preset--spacing--30); padding-inline-end: var(--wp--preset--spacing--40); }
}
/* Miniatury, które przełączają wariant (assets/js/galeria-warianty.js), mają
   zachowywać się jak przyciski — inaczej nic nie zapowiada, że są klikalne. */
.fbc-galeria-miniatury--wybieralne .wc-block-product-gallery-thumbnails__thumbnail { cursor: pointer; }

/* Zapas na wysokość paska, gdy ktoś wejdzie prosto z linku z hashem. */
.fbc-sekcja-kotwica { scroll-margin-block-start: 60px; }
/* Sekcja z opisem jest wyjęta z rytmu pionowego (style.css 9). Globalna reguła
   `main > .wp-block-group { padding-block: clamp(3.5rem, 7vw, 6rem) }` daje tu 96 px
   u góry i u dołu, a scena trzyma własną wysokość (100dvh minus pasek kotwic) —
   więc tego paddingu nic nie wypełnia i nad zdjęciem zostaje biały pas, a pod nim
   drugi (klient 2026-09-15). `:has()` zamiast osobnej klasy w szablonie, żeby regułę
   dało się czytać razem z resztą opisu. */
.wp-site-blocks main > .fbc-sekcja-kotwica:has(.fbc-opis-kino) {
	padding-block: 0;
	margin-block-start: 0;
}
/* Sekcja po opisie startuje bez odstępu — inaczej między dolną krawędzią sceny
   a szarym pasem Specifications zostaje 24 px bieli (globalny `blockGap`).
   Treści to nie skleja: Specifications ma własne wcięcie górne. */
.wp-site-blocks main > .fbc-sekcja-kotwica:has(.fbc-opis-kino) + .fbc-sekcja-kotwica {
	margin-block-start: 0;
}
/* Naprzemienne tło sekcji (klient 2026-09-15). Description zostaje biała — ma
   własne zdjęcia scen — więc szara jest Specifications, potem FAQ. Klasa jest
   jawna, nie `nth-of-type`: sekcje sąsiadują z blokiem zakupowym i paskiem
   promocji, więc liczenie rodzeństwa rozjechałoby się przy pierwszej zmianie
   kolejności. Padding daje zawartość wzorców (spacing 90), wrapper tylko maluje. */
/* Płyta z hero, nie token z palety (klient 2026-09-15): pas sekcji ma być tym
   samym materiałem co tło bloku zakupowego — ten sam #e8e8eb i to samo ziarno.
   Wcześniejsze base-2 (#F4F5F7) było 4% od bieli i w ogóle nie czytało się jako
   szare, a base-3 (#EAECEF) było blisko, ale nie identycznie. */
.fbc-sekcja-szara {
	background-color: var(--fbc-plyta);
	background-image: var(--fbc-ziarno);
	background-repeat: repeat;
}

/* Sekcja oddzielona samą kreską, bez malowania tła (klient 2026-09-15: opinie
   mają być na białym, a sekcja przed nimi ma być czymś zamknięta). Kreska idzie
   przez całą szerokość okna, bo taką szerokość ma sekcja. */
.fbc-sekcja-kreska { border-block-start: 1px solid var(--wp--preset--color--line); }
/* Oddech od paska daje sam rytm sekcji (style.css 9: `padding-block` na
   `main > .wp-block-group`), więc pierwszy blok w kotwicy nie dokłada własnego
   wcięcia. Wcześniej Specifications i Reviews miały u góry 96 + 64 = 160 px,
   a FAQ i Accessories 96 — stąd wrażenie przypadkowych odstępów
   (klient 2026-09-15). Opis jest z rytmu wyjęty osobno, bo scena trzyma
   własną wysokość. */
#reviews > .fbc-produkt-opinie { padding-block-start: 0; }
/* Sekcja "w pudełku" kończy się pasem liczb, który maluje własne szare tło na pełną
   szerokość — gdyby pod nim został jeszcze dolny padding sekcji, nad "Technical
   specifications" stałoby 192 px bieli (96 stąd + 96 z tamtej sekcji), a pod nią tylko
   96, bo Reviews jest szara i swój padding ma już w kolorze. Wychodził odstęp dwa razy
   większy z góry niż z dołu (klient 2026-09-15). Pas ma własne wcięcie 64 px w środku,
   więc treść nie dotyka krawędzi — oddaje tylko padding sekcji. */
#whats-in-the-box { padding-block-end: 0 !important; }

/* --------------------------------------------------------------------------
   26. Szuflada koszyka (klient 2026-09-16)

   Koszyk to wyłącznie ta szuflada — do podstrony `/cart/` nie prowadzi już
   żaden przycisk (klient: „po co mnożyć kroki"). Strona zostaje w bazie,
   bo trzyma `noindex` i korzysta z niej WooCommerce w swoich przekierowaniach;
   znika tylko z drogi kupującego.

   Bloki koszyka wgrywają swój arkusz PO motywie, więc część reguł musi mieć
   `!important` — inaczej wracają domyślne obramowania i odstępy.
   -------------------------------------------------------------------------- */
.wc-block-mini-cart__drawer .wc-block-components-drawer__content {
	background: var(--wp--preset--color--base);
}
.wc-block-mini-cart__template-part {
	padding-inline: var(--wp--preset--spacing--50);
}
/* Nagłówek szuflady — wariant A z propozycji (klient 2026-09-27): tytuł i licznik
   w jednym wierszu, licznik jako etykieta mono („QTY: 3”, tekst z filtra w
   inc/rabaty.php), × w osi tytułu, kreska widoczna. WooCommerce kładzie na tytuł
   maskę gradientową z ujemnym marginesem (lista „wygasa” pod tytułem) — maska
   zjadała kreskę, a × wisiał 19 px nad osią tytułu i wystawał poza szufladę.
   `top` krzyżyka: 16 px paddingu kontenera + 20 px + połowa wiersza − 22 px. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
	align-items: baseline;
	margin: 0 16px !important;
	padding: 20px 56px 20px 0 !important;
	gap: 12px;
	border-block-end: 1px solid var(--wp--preset--color--line) !important;
	font-size: var(--wp--preset--font-size--large) !important;
	font-weight: 700;
	line-height: 22px;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
	-webkit-mask-image: none !important;
	mask-image: none !important;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__title > span { margin: 0 !important; font-weight: 700; }
.wc-block-mini-cart__title .wp-block-woocommerce-mini-cart-title-items-counter-block {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	font-weight: 400 !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-3);
}
.wc-block-mini-cart__drawer .wc-block-components-drawer__close {
	top: 25px !important;
	right: 2px !important;
	width: 44px;
	height: 44px;
	margin: 0 !important;
	padding: 10px !important;
	color: var(--wp--preset--color--contrast-2);
	transition: color .2s ease;
}
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:hover { color: var(--wp--preset--color--purr); }
/* Po otwarciu szuflady Woo przenosi fokus na × i rysuje niebieską ramkę także
   przy myszy — zostaje tylko obrys przy nawigacji klawiaturą, w fiolecie. */
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:focus:not(:focus-visible) { box-shadow: none !important; }
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:focus-visible {
	box-shadow: none !important;
	outline: 2px solid var(--wp--preset--color--purr);
	outline-offset: -4px;
}

/* Nagłówek tabeli („Product", „Total") nie niesie nic w szufladzie na jedną
   kolumnę — zostaje sama lista. */
.wc-block-mini-cart-items .wc-block-cart-items__header { display: none !important; }

.wc-block-mini-cart-items .wc-block-cart-items__row {
	padding-block: var(--wp--preset--spacing--40) !important;
	border-block-end: 1px solid var(--wp--preset--color--line) !important;
}
.wc-block-mini-cart-items .wc-block-cart-items__row:last-child { border-block-end: 0 !important; }

/* Telefon: lista w szufladzie przelewała się w poziomie o ~30 px i ucinała kolumnę
   cen (2026-09-27). Siatka Woo zakłada 80 + 132 px + kolumna ceny, a na 375 px
   zostaje 295 px. Bez zmniejszania liter: miniatura 56 px, kolumna treści elastyczna, plakietka „SAVE x €” schowana — przekreślona
   cena i linia „BUNDLE” mówią to samo. */
@media (max-width: 480px) {
	.wc-block-mini-cart__drawer .wc-block-cart-items { width: 100% !important; table-layout: fixed; }
	/* Selektory z `.wc-block-mini-cart__drawer`, bo reguły miniatury niżej w arkuszu
	   mają tę samą specyficzność i wygrywały (miniatura wychodziła 40 × 72). */
	.wc-block-mini-cart__drawer .wc-block-mini-cart-items .wc-block-cart-items__row {
		grid-template-columns: 56px minmax(0, 1fr) 0 auto !important;
		column-gap: 10px !important;
	}
	.wc-block-mini-cart__drawer .wc-block-mini-cart-items .wc-block-cart-item__image { padding-inline-end: 0 !important; }
	.wc-block-mini-cart__drawer .wc-block-mini-cart-items .wc-block-cart-item__image img {
		width: 56px !important;
		height: 56px !important;
		max-width: none;
		padding: 4px;
	}
	.wc-block-mini-cart__drawer .wc-block-mini-cart-items .wc-block-cart-item__total .wc-block-components-product-badge { display: none !important; }
	.wc-block-mini-cart__drawer .wc-block-mini-cart-items .wc-block-cart-item__product { min-width: 0; }
	.wc-block-mini-cart__drawer .wc-block-mini-cart-items .wc-block-components-product-name { overflow-wrap: anywhere; }
}

/* Miniatura na szarej płycie, tak jak kadry w sklepie i w akcesoriach. */
.wc-block-mini-cart-items .wc-block-cart-item__image {
	padding-inline-end: var(--wp--preset--spacing--40) !important;
}
.wc-block-mini-cart-items .wc-block-cart-item__image img {
	width: 72px;
	height: 72px;
	object-fit: contain;
	background: #f4f4f6;
	padding: 6px;
	box-sizing: border-box;
}

.wc-block-mini-cart-items .wc-block-components-product-name {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color .2s ease;
}
.wc-block-mini-cart-items .wc-block-components-product-name:hover { color: var(--wp--preset--color--purr); }

/* Opis produktu w szufladzie tylko zaszumia: kupujący wie, co dodał, a i tak
   urywa się w połowie zdania wielokropkiem. Chowamy SAM opis — ten sam blok
   niesie wybrany wariant („SIDE: LEFT”, „HEEL CUP SIZE: 80 mm”), który do
   26.09 znikał razem z opisem (klient: „dodałem wariant LEWY, a nie widać
   tego w koszyku”). */
.wc-block-mini-cart-items .wc-block-components-product-metadata__description { display: none !important; }
.wc-block-mini-cart-items .wc-block-components-product-metadata { margin: 2px 0 0; }
.wc-block-mini-cart-items .wc-block-components-product-details {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--contrast-2);
}
.wc-block-mini-cart-items .wc-block-components-product-details__name { color: var(--wp--preset--color--contrast-3); }

.wc-block-mini-cart-items .wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem;
	color: var(--wp--preset--color--contrast-2);
}
.wc-block-mini-cart-items .wc-block-components-product-price__regular { opacity: 0.55; }
.wc-block-mini-cart-items .wc-block-components-product-price__value.is-discounted { color: var(--wp--preset--color--purr); }

/* Licznik sztuk: jedno pole ze ściętym narożnikiem zamiast trzech osobnych
   kontrolek z własnymi ramkami. */
/* Odstęp od ceny na całym wierszu, nie na samym liczniku — z marginesem na liczniku
   kosz obok wyśrodkowywał się względem pudełka z marginesem i stał 6 px za wysoko
   (2026-09-27). */
.wc-block-mini-cart-items .wc-block-cart-item__quantity {
	margin-block-start: var(--wp--preset--spacing--30);
}
.wc-block-mini-cart-items .wc-block-components-quantity-selector {
	--fbc-sciecie: 8px;
	margin-block: 0 !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 0 !important;
	background: var(--wp--preset--color--base);
	overflow: hidden;
}
@supports (corner-shape: bevel) {
	.wc-block-mini-cart-items .wc-block-components-quantity-selector {
		corner-shape: bevel;
		border-radius: var(--fbc-sciecie) 0 var(--fbc-sciecie) 0 !important;
	}
}
/* Fokus przycisków „−” / „+”: WooCommerce rysuje na `:focus` szary wewnętrzny
   obrys z zaokrąglonym narożnikiem — po każdym kliknięciu myszą zostawała ramka
   wokół „−” (2026-09-27: „co to za bug?”). Bez niej po kliknięciu; przy
   nawigacji klawiaturą obrys całego licznika w kolorze marki. */
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus {
	box-shadow: none !important;
}
.wc-block-components-quantity-selector:has(.wc-block-components-quantity-selector__button:focus-visible) {
	outline: 2px solid var(--wp--preset--color--purr);
	outline-offset: 2px;
}
.wc-block-mini-cart-items .wc-block-components-quantity-selector__input {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
	color: var(--wp--preset--color--contrast);
}
.wc-block-mini-cart-items .wc-block-components-quantity-selector__button {
	color: var(--wp--preset--color--contrast-3) !important;
	transition: color .2s ease, background-color .2s ease;
}
.wc-block-mini-cart-items .wc-block-components-quantity-selector__button:hover {
	color: var(--wp--preset--color--purr) !important;
	background: #f4f4f6;
}
.wc-block-mini-cart-items .wc-block-cart-item__remove-link {
	color: var(--wp--preset--color--contrast-3) !important;
	transition: color .2s ease;
}
.wc-block-mini-cart-items .wc-block-cart-item__remove-link:hover { color: var(--wp--preset--color--purr) !important; }

/* Plakietka oszczędności w brandowym fiolecie zamiast szarej listwy. */
.wc-block-mini-cart-items .wc-block-components-sale-badge {
	background: color-mix(in srgb, var(--wp--preset--color--purr) 12%, transparent) !important;
	color: var(--wp--preset--color--purr) !important;
	border: 0 !important;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.62rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Stopka: suma i jedno wyjście — do kasy. */
.wc-block-mini-cart__footer {
	padding-block: var(--wp--preset--spacing--50) !important;
	border-block-start: 1px solid var(--wp--preset--color--line);
}
.wc-block-mini-cart__footer-subtotal {
	margin-block-end: var(--wp--preset--spacing--40) !important;
}
.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-3);
}
.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description {
	font-size: var(--wp--preset--font-size--x-small, 0.78rem);
	color: var(--wp--preset--color--contrast-3) !important;
}
.wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}
/* Rabat zestawowy jako rachunek (inc/rabaty.php, 2026-09-27): pozycje, rabat,
   kreska, „Subtotal” PO rabacie. Natywna kwota WooCommerce to suma pozycji, więc
   przy rabacie ustępuje miejsca kwocie po odjęciu (.fbc-rabat-po). */
.fbc-rabat-rozbicie {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin-block-end: var(--wp--preset--spacing--30);
	padding-block-end: var(--wp--preset--spacing--30);
	border-block-end: 1px solid var(--wp--preset--color--line);
}
.fbc-rabat-wiersz {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	color: var(--wp--preset--color--contrast);
}
.fbc-rabat-wiersz > span:first-child {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-3);
}
.fbc-rabat-wiersz--rabat,
.fbc-rabat-wiersz--rabat > span:first-child { color: var(--wp--preset--color--purr); }
.fbc-rabat-wiersz--rabat > span:last-child { font-weight: 700; }
.fbc-rabat-rozbicie[hidden],
.fbc-rabat-po[hidden],
.fbc-rabat-ihs[hidden] { display: none !important; }
.wc-block-mini-cart__footer-subtotal:has(.fbc-rabat-po:not([hidden])) > .wc-block-components-totals-item__value:not(.fbc-rabat-po) {
	display: none;
}
.wc-block-mini-cart__footer-subtotal .fbc-rabat-po { margin-inline-start: auto; }
/* Przy pozycji: która jest zrabatowana i dlaczego („BUNDLE: −5 % · 2 heel cups”,
   inc/rabaty.php). Pod wariantem, w kolorze rabatu — w szufladzie, koszyku i kasie. */
.wc-block-components-product-metadata { display: flex; flex-direction: column; }
.wc-block-components-product-details:has(.wc-block-components-product-details__bundle) { order: 2; }
.wc-block-components-product-details__bundle,
.wc-block-components-product-details__bundle .wc-block-components-product-details__value {
	color: var(--wp--preset--color--purr) !important;
}
/* Podsumowanie kasy (Fluid Checkout): kwota pozycji po prawej w jednej linii
   z nazwą (2026-09-27: „nierówno są tu teksty”). Wtyczka daje nazwie 5 px
   marginesu i interlinię 18 px, a kwocie interlinię 1 bez marginesu — kwota
   stała ok. 10 px wyżej niż pierwsza linia nazwy. */
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .product-total {
	padding-top: 10px !important;   /* arkusz wtyczki ładuje się po naszym */
	line-height: 18px !important;
}
/* Cena pozycji z rabatem w podsumowaniu kasy: regularna przekreślona, obok
   obniżona w kolorze rabatu — jak w szufladzie. */
.cart-item__price del { margin-inline-end: 0.4em; opacity: 0.55; }
.cart-item__price ins { text-decoration: none; color: var(--wp--preset--color--purr); }
/* Podsumowanie w kasie ma własny znacznik (dl.variation) — ta sama linia w jednym wierszu. */
.cart-item__meta dl.variation { margin: 0.25em 0 0; }
.cart-item__meta dl.variation .variation-Bundle {
	display: inline;
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	color: var(--wp--preset--color--purr);
}
.cart-item__meta dl.variation dt.variation-Bundle { text-transform: uppercase; }
.cart-item__meta dl.variation dd.variation-Bundle p { display: inline; margin: 0; }
.wc-block-components-product-details__bundle .wc-block-components-product-details__name {
	text-transform: uppercase;
	color: var(--wp--preset--color--purr) !important;
}
.fbc-rabat-ihs {
	margin-block-end: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
	background: color-mix(in srgb, var(--wp--preset--color--purr) 6%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--purr) 25%, transparent);
}
.fbc-rabat-ihs__tekst {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--x-small, 0.78rem);
	line-height: 1.45;
	color: var(--wp--preset--color--contrast-2, var(--wp--preset--color--contrast));
}
.fbc-rabat-ihs__przycisk {
	display: inline-flex;
	gap: 0.6em;
	align-items: baseline;
	padding: 0.55em 1em;
	border: 1px solid var(--wp--preset--color--contrast);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}
.fbc-rabat-ihs__przycisk:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.fbc-rabat-ihs__przycisk:disabled { opacity: 0.5; cursor: progress; }
.fbc-rabat-ihs__cena { opacity: 0.7; }
/* Podstrona koszyka wypada z drogi: zostaje sama kasa (klient 2026-09-16). */
.wc-block-mini-cart__footer-cart { display: none !important; }
.wc-block-mini-cart__footer-actions { gap: var(--wp--preset--spacing--30); }
.wc-block-mini-cart__footer-checkout { width: 100%; }
.wc-block-mini-cart__empty-cart-wrapper { padding-block: var(--wp--preset--spacing--70); }

/* --------------------------------------------------------------------------
   12c. Opinie: podsumowanie w nagłówku i zwijanie długich wypowiedzi
        (klient 2026-09-16)

   Obok tytułu sekcji stało puste pół ekranu, a same opinie potrafią mieć
   pół strony tekstu i jadą jedna pod drugą. Po prawej idzie więc średnia
   z liczbą opinii, a każda dłuższa wypowiedź dostaje przycięcie i przycisk
   (assets/js/opinie-produkt.js).
   -------------------------------------------------------------------------- */
/* Dwie kolumny: karta z podsumowaniem po lewej, opinie po prawej (klient
   2026-09-16). Wcześniej opinie szły przez całą szerokość i na szerokim
   monitorze zostawało puste pół ekranu. Nagłówek zajmuje oba pasy. */
.fbc-produkt-opinie__uklad {
	display: grid;
	grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
	column-gap: clamp(2rem, 5vw, 5rem);
	row-gap: var(--wp--preset--spacing--60);
	align-items: start;
}
.fbc-opinie-naglowek { grid-column: 1 / -1; }
.fbc-opinie-naglowek > h2 { margin-block: var(--wp--preset--spacing--30) 0; }
.fbc-produkt-opinie__uklad > .wp-block-woocommerce-product-reviews { grid-column: 2; margin: 0; }

.fbc-opinie-podsumowanie {
	grid-column: 1;
	/* Karta jedzie z czytelnikiem: lista bywa długa, a średnia to punkt
	   odniesienia, do którego wraca się w trakcie czytania. */
	position: sticky;
	inset-block-start: calc(var(--fbc-naglowek-teraz, 0px) + 84px);
	/* Kreska nad kartą w jednej linii z tą nad listą opinii (klient 2026-09-16).
	   Własny górny margines musi zejść do zera: to on podnosił kartę o 24 px
	   względem wiersza siatki, przez co obie linie się rozjeżdżały. */
	margin-block-start: 0;
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--line);
}
.fbc-opinie-podsumowanie__ocena { display: flex; align-items: center; gap: var(--wp--preset--spacing--40); }
.fbc-opinie-podsumowanie__srednia {
	font-size: clamp(2.6rem, 3.4vw, 3.4rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
}
.fbc-opinie-podsumowanie__prawa { display: flex; flex-direction: column; gap: 5px; }
.fbc-opinie-podsumowanie__gwiazdki {
	font-size: 1rem;
	letter-spacing: 0.12em;
	line-height: 1;
	color: #e3b341;
}
.fbc-opinie-podsumowanie__ile {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-3);
}
/* Rozkład ocen: pasek proporcjonalny do najliczniejszego stopnia, a nie do
   sumy — przy jednym dominującym stopniu inne byłyby kreskami bez znaczenia. */
.fbc-opinie-rozklad {
	list-style: none;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	display: grid;
	gap: 7px;
}
.fbc-opinie-rozklad__wiersz {
	display: grid;
	grid-template-columns: 2.4rem minmax(0, 1fr) 1.8rem;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	color: var(--wp--preset--color--contrast-2);
}
.fbc-opinie-rozklad__stopien { color: var(--wp--preset--color--contrast-3); }
.fbc-opinie-rozklad__pasek {
	display: block;
	height: 4px;
	background: var(--wp--preset--color--line);
}
.fbc-opinie-rozklad__pasek i {
	display: block;
	height: 100%;
	width: var(--fbc-udzial, 0%);
	background: var(--wp--preset--color--purr);
}
.fbc-opinie-rozklad__liczba { text-align: end; }
.fbc-opinie-rozklad__wiersz.is-pusty { color: var(--wp--preset--color--contrast-3); opacity: 0.55; }

/* Autor nad tekstem, nie obok: w prawej kolumnie nie ma już miejsca na dwie
   kolumny wewnątrz jednej opinii. */
.fbc-produkt-opinie__uklad .comment-text {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	row-gap: var(--wp--preset--spacing--20);
}
.fbc-produkt-opinie__uklad .comment-text .meta { grid-column: 1; grid-row: 1; flex-direction: row; align-items: baseline; gap: var(--wp--preset--spacing--30); flex-wrap: wrap; }
.fbc-produkt-opinie__uklad .comment-text .star-rating { grid-column: 1; grid-row: 2; margin: 0; }
.fbc-produkt-opinie__uklad .comment-text .description { grid-column: 1; grid-row: 3; max-width: 66ch; margin-block-start: var(--wp--preset--spacing--20); }
.fbc-produkt-opinie__uklad .comment-text .fbc-opinia__wiecej { grid-column: 1; justify-self: start; }

/* Przycięcie długich opinii: maska wygasza ostatni wiersz, żeby było widać,
   że tekst trwa dalej. `max-height` liczy skrypt z interlinii — stała
   w pikselach rozjeżdżałaby się przy zmianie szerokości okna. */
.fbc-produkt-opinie .comment-text .description.is-zwinieta {
	max-height: var(--fbc-opinia-max);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5em), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5em), transparent 100%);
}
.fbc-opinia__wiecej {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-block-start: var(--wp--preset--spacing--30);
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--purr);
	transition: color .2s ease;
}
.fbc-opinia__wiecej::after {
	content: "";
	width: 7px;
	height: 7px;
	border-inline-end: 1px solid currentColor;
	border-block-end: 1px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s ease;
}
.fbc-opinia__wiecej[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.fbc-opinia__wiecej:hover { color: var(--wp--preset--color--contrast); }
.fbc-opinia__wiecej:focus-visible { outline: 2px solid var(--wp--preset--color--purr); outline-offset: 3px; }

@media (max-width: 899.98px) {
	.fbc-produkt-opinie__uklad { grid-template-columns: minmax(0, 1fr); }
	.fbc-produkt-opinie__uklad > .wp-block-woocommerce-product-reviews { grid-column: 1; }
	.fbc-opinie-podsumowanie { position: static; }
}

/* --------------------------------------------------------------------------
   Kasa: wybór paczkomatu InPost (wtyczka inpost-for-woocommerce)
   Klient 2026-09-22: „musi być żółty, bo to InPost, ale reszta niech się
   zgadza z naszą konwencją". Wtyczka rysuje przycisk jako `div` o szerokości
   200 px, z białym tekstem 19 px na żółtym (kontrast ~1,6:1), zaokrągleniem
   3 px i ciężkim cieniem, wyśrodkowany nad „Place order". Tu dostaje geometrię
   naszego komponentu przycisku (style.css, sekcja „JEDEN komponent
   przycisku"): pełna szerokość jak „Place order", wysokość 51 / 46 px, krój
   i stopień przycisku, ścięcie 10 px w lewym górnym i prawym dolnym rogu.
   Żółty InPost zostaje, tekst ciemny — tak jak w barwach samego InPost.
   Wtyczka nadaje część reguł z `!important`, stąd identyfikator w selektorze.
   -------------------------------------------------------------------------- */
#easypack_show_geowidget.easypack_show_geowidget {
	--fbc-sciecie: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	/* Wysokość „Place order" z Fluid Checkout (50 px na każdej szerokości) —
	   oba przyciski stoją jeden pod drugim, więc mają być równe. */
	min-height: 50px;
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--30);
	padding: 0 28px;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	background-color: #fcc905;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-align: center;
	cursor: pointer;
	clip-path: polygon(
		var(--fbc-sciecie) 0,
		100% 0,
		100% calc(100% - var(--fbc-sciecie)),
		calc(100% - var(--fbc-sciecie)) 100%,
		0 100%,
		0 var(--fbc-sciecie)
	);
	transition: background-color .25s ease;
}
#easypack_show_geowidget.easypack_show_geowidget:hover { background-color: #e6b600; }
#easypack_show_geowidget.easypack_show_geowidget:focus-visible { outline: 2px solid var(--wp--preset--color--contrast); outline-offset: 3px; }
@media (max-width: 599.98px) {
	#easypack_show_geowidget.easypack_show_geowidget { padding-inline: 22px; }
}

/* Wybrany paczkomat: zamiast grubej żółtej ramki i kursywy na zielonym tle —
   nasz callout z bazy wiedzy (szara płyta, cienka linia, akcent z lewej),
   akcent w żółci InPost, nagłówek jako etykieta mono. Arkusz wtyczki ładuje
   się PO naszym i ma ten sam identyfikator, więc potrzebny jest `body`. */
body #selected-parcel-machine {
	box-sizing: border-box;
	min-width: 0;
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--line);
	border-inline-start: 3px solid #fcc905;
	border-radius: 2px;
	background: var(--wp--preset--color--base-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--wp--preset--color--contrast);
}
body #selected-parcel-machine .easypack-visible-point-header {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--20);
	background: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	font-style: normal;
	font-weight: 400 !important;   /* wtyczka wpisuje pogrubienie w atrybut style */
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-3);
}

/* Logo pod nazwą metody wysyłki (2026-09-27: „czemu tu logo nie ma”). Wtyczka
   wkłada je w element flex, który kurczy się do zera, a obrazek ma
   `max-width: 100%` tego zera — po wczytaniu wychodził 0 × 0 px. Stała
   wysokość i szerokość z proporcji pliku. */
.easypack-custom-shipping-method-logo { flex: none; }
.easypack-custom-shipping-method-logo img {
	width: auto !important;
	height: 28px !important;
	max-width: none !important;
	max-height: none !important;
}

/* --------------------------------------------------------------------------
   Miniatury wariantów na telefonie (2026-09-23, punkt 11 z audytu mobilnego)
   Poniżej 1200 px galeria pokazuje pigułki zamiast miniatur (klient
   2026-09-10). Przy produktach z wariantami (inc/galeria.php dodaje klasę
   `fbc-galeria--warianty`) pigułka nie mówi, który to kolor, a WooCommerce
   dodatkowo chował cały pasek atrybutem `hidden` — na telefonie nie dało się
   przejrzeć zdjęć wariantów ani wybrać wariantu zdjęciem. Tu wracają prawdziwe
   miniatury: 56 × 56 px (cel dotyku ≥ 44), jeden rząd przewijany w bok.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.fbc-galeria.fbc-galeria--warianty .wc-block-product-gallery-thumbnails,
	.fbc-galeria.fbc-galeria--warianty .wc-block-product-gallery-thumbnails[hidden] { display: block !important; }
	.fbc-galeria.fbc-galeria--warianty .wc-block-product-gallery-thumbnails__scrollable {
		display: flex !important;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: var(--wp--preset--spacing--20);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		padding-block: var(--wp--preset--spacing--30) 2px;
	}
	.fbc-galeria.fbc-galeria--warianty .wc-block-product-gallery-thumbnails__scrollable::-webkit-scrollbar { display: none; }
	.fbc-galeria.fbc-galeria--warianty .wc-block-product-gallery-thumbnails__thumbnail,
	.fbc-galeria.fbc-galeria--warianty .wc-block-product-gallery-thumbnails__thumbnail:has(.wc-block-product-gallery-thumbnails__thumbnail__image--is-active) {
		flex: 0 0 56px;
		width: 56px;
		height: 56px;
		border-radius: 0;
		overflow: hidden;
		background: var(--wp--preset--color--base);
		scroll-snap-align: start;
	}
	.fbc-galeria.fbc-galeria--warianty .wc-block-product-gallery-thumbnails__thumbnail__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* Biała ramka wokół zdjęcia: 5 px było za grubo (klient 2026-09-23),
		   zostaje cienki pasek 2 px. Desktop bez zmian (8 px na 92 px). */
		padding: 2px;
		opacity: 0.55;
		border-radius: 0;
		outline: 2px solid transparent !important;
		outline-offset: -2px;
		transition: opacity 200ms ease;
	}
	.fbc-galeria.fbc-galeria--warianty .wc-block-product-gallery-thumbnails__thumbnail__image--is-active {
		opacity: 1;
		outline-color: var(--wp--preset--color--purr) !important;
	}
}

/* --------------------------------------------------------------------------
   Rozwijany „Select” z wariantami (klient 2026-09-26, inc/sklep.php
   `fbc_wariant_szybki_menu`, assets/js/wariant-szybki.js). „Add to your set”:
   przycisk jak „+ Add” obok; karty w sklepie i „Pairs with”: ghost jak „Add to
   cart” (klient: „ten sam styl do przycisków na kartach daj”). Strzałka mówi,
   że się rozwija. Lista przy otwarciu przenosi się do <body> i stoi w `fixed`
   pod przyciskiem — ścięte narożniki kart przycinały ją. Pierwsza wersja
   (pole wyboru nad ceną + osobny przycisk) odpadła tego samego dnia.
   -------------------------------------------------------------------------- */
.fbc-wariant-menu { position: relative; z-index: 3; justify-self: end; }
.fbc-wariant-menu__przycisk { display: inline-flex; align-items: center; gap: 6px; }
.fbc-wariant-menu--karta .fbc-wariant-menu__przycisk { justify-content: center; gap: 8px; }
.fbc-wariant-menu__przycisk.is-ladowanie,
[data-fbc-szybki-prosty].is-ladowanie { opacity: 0.5; cursor: progress; }
.fbc-wariant-menu__strzalka {
	width: 6px; height: 6px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	rotate: 45deg; margin-block-start: -3px;
	transition: rotate 160ms ease, margin 160ms ease;
}
.fbc-wariant-menu__przycisk[aria-expanded="true"] { background: var(--wp--preset--color--purr); color: var(--wp--preset--color--base); }
.fbc-wariant-menu__przycisk[aria-expanded="true"] .fbc-wariant-menu__strzalka { rotate: -135deg; margin-block-start: 3px; }
.fbc-wariant-menu__lista {
	position: absolute;
	inset-block-start: calc(100% + 6px);
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	min-width: 240px;
	max-width: min(320px, 80vw);
	padding: 4px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line-strong, #C6C9D0);
	border-radius: 2px;
	box-shadow: 0 12px 32px rgba(10, 10, 12, 0.14);
}
.fbc-wariant-menu__lista[hidden] { display: none; }
.fbc-wariant-menu__opcja {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 10px 12px;
	border: 0;
	border-radius: 2px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.82rem;
	line-height: 1.3;
	text-align: start;
	cursor: pointer;
}
.fbc-wariant-menu__opcja:hover:not(:disabled),
.fbc-wariant-menu__opcja:focus-visible { background: color-mix(in srgb, var(--wp--preset--color--purr) 8%, var(--wp--preset--color--base)); color: var(--wp--preset--color--purr); outline: none; }
.fbc-wariant-menu__opcja:disabled { color: var(--wp--preset--color--contrast-3); cursor: not-allowed; }
.fbc-wariant-menu__cena { flex: none; font-family: var(--wp--preset--font-family--mono); font-size: 0.74rem; color: var(--wp--preset--color--contrast-2); }
.fbc-wariant-menu__opcja:disabled .fbc-wariant-menu__cena { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.66rem; }


/* „Fits” — do czego pasuje akcesorium (klient 2026-09-26, inc/sklep.php
   `fbc_pasuje_do_html`). Plakietki w języku `.fbc-badge--obrys`: mono,
   wersaliki, fioletowy obrys. Na karcie krótkie nazwy pod tytułem, na stronie
   akcesorium pełne nazwy pedałów jako odnośniki. Pismo nie mniejsze niż
   11,5 px (drobny tekst był uwagą audytu mobilnego). */
.fbc-pasuje {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 10px 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.fbc-pasuje__etykieta { color: var(--wp--preset--color--contrast-3); margin-inline-end: 2px; }
.fbc-pasuje__tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 7px;
	border: 1px solid var(--wp--preset--color--purr);
	border-radius: 2px;
	color: var(--wp--preset--color--purr);
	text-decoration: none;
	white-space: nowrap;
}
.fbc-pasuje--produkt { margin-block: var(--wp--preset--spacing--30) 0; gap: 8px; }
/* Pełne nazwy pedałów w zapisie klienta (PurrPRO FORMULA PEDALS), nie wersalikami. */
.fbc-pasuje--produkt .fbc-pasuje__tag { padding: 6px 9px; text-transform: none; letter-spacing: 0.02em; }
a.fbc-pasuje__tag { transition: background 160ms ease, color 160ms ease; }
a.fbc-pasuje__tag:hover,
a.fbc-pasuje__tag:focus-visible { background: var(--wp--preset--color--purr); color: var(--wp--preset--color--base); }
/* „From” przed najniższą ceną wariantu (inc/sklep.php) — ciszej niż kwota. */
.fbc-cena-od { font-size: 0.78em; letter-spacing: 0.04em; color: var(--wp--preset--color--contrast-3); }
/* Na karcie „From” w osobnej linii nad kwotą (klient 2026-09-26) — cena jest
   wtedy węższa i przycisk obok się nie łamie. */
.wc-block-product .fbc-cena-od { display: block; margin-block-end: 2px; font-size: 0.72rem; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; }
/* „Out of stock” na karcie (inc/sklep.php `fbc_przycisk_brak_karta`): obrys
   ghosta, wyszarzony, bez najazdu i bez kliknięcia. */
.wp-block-button.is-style-outline.fbc-produkt-karta__przycisk.is-brak > .wp-block-button__link {
	color: var(--wp--preset--color--contrast-3);
	opacity: 0.6;
	cursor: default;
	pointer-events: none;
}
/* Sklep nie przyjmuje zamówień na brakujące produkty (klient 2026-09-26: „nie
   będzie możliwości backordera”) — opcja znika z filtra dostępności. Filtr po
   stronie PHP nie wystarcza: WooCommerce trzyma policzone statusy w cache. */
.wc-block-product-filter-checkbox-list__item:has(#status-onbackorder) { display: none; }

/* Etykieta „FILTER” ma wysokość paska sortowania obok, a pierwsza grupa filtrów
   nie dokłada górnego marginesu — kreska pod etykietą leży na tej samej
   wysokości co kreska pod „Showing all … results” (klient 2026-09-26). */
@media (min-width: 900px) {
	.fbc-sklep__filtry .fbc-etykieta { display: flex; align-items: center; min-height: 40px; margin: 0; }
	/* Odstęp nad filtrami = dolny padding paska wyników (WordPress dawał tu 24 px blockGap). */
	.fbc-sklep__filtry .fbc-etykieta + .wc-block-product-filters { margin-block-start: var(--wp--preset--spacing--40); }
	.fbc-sklep__filtry .wp-block-woocommerce-product-filter-taxonomy .fbc-sklep__tytul-filtra { margin-block-start: 0; }
}
/* Mniej powietrza między ceną a leadem (klient 2026-09-26: „za duży padding top
   trochę”) — blok opisu dostawał 24 px blockGap nad własnym marginesem 12 px. */
.fbc-produkt-zakup .wp-block-woocommerce-product-summary { margin-block-start: 12px !important; }

/* Przyklejona scena opisu kończy się nad dolnym paskiem zakupu (kup.js, 76 px),
   gdy ten jest na ekranie — inaczej pigułki chowały się pod paskiem i wyskakiwały
   dopiero przy wyjeździe z sekcji (2026-09-26). */
@media (min-width: 1024px) {
	body.fbc-ma-pasek-kup .fbc-opis-kino__tlo { height: calc(100dvh - var(--fbc-pasek) - 76px); }
}

/* --------------------------------------------------------------------------
   Rozwijane listy w stylu motywu (klient 2026-09-28: „wszystkie tego typu
   dropdowny mogłyby mieć styl jak ten, co zrobiliśmy w innych miejscach”).
   assets/js/wybor.js ulepsza natywne <select> (warianty na stronie produktu,
   sortowanie w sklepie, formularze kontaktu i wsparcia): select zostaje
   w formularzu pod polem, niewidoczny, a pole i lista idą za wzorem
   rozwijanego „Select” z kart (biała lista, cień, pozycje 44 px, fiolet 8 %).
   Na ekranach dotykowych skrypt nic nie robi — zostaje systemowy wybierak,
   a zamknięte pole wygląda tak samo jak tu.
   -------------------------------------------------------------------------- */
.fbc-wybor { position: relative; display: block; width: 100%; }
.fbc-wybor select.fbc-wybor__natywny {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}
.fbc-wybor__pole {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--line-strong, #C6C9D0);
	border-radius: 2px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: normal;
	text-align: start;
	text-transform: none;
	cursor: pointer;
	transition: border-color 160ms ease;
}
.fbc-wybor__pole:hover { border-color: var(--wp--preset--color--contrast-3); }
.fbc-wybor__pole:focus,
.fbc-wybor__pole:focus-visible,
.fbc-wybor.is-otwarta .fbc-wybor__pole { outline: none; border-color: var(--wp--preset--color--contrast); }
.fbc-wybor__pole:disabled { color: var(--wp--preset--color--contrast-3); cursor: not-allowed; }
.fbc-wybor__pole.is-blad { border-color: #b3261e; }
/* Pełna nazwa wariantu łamie się w polu zamiast ucinać (grip tapes, I.H.S). */
.fbc-wybor__wartosc { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fbc-wybor__pole.is-pusta .fbc-wybor__wartosc { color: var(--wp--preset--color--contrast-3); }
.fbc-wybor__strzalka {
	flex: none;
	width: 6px; height: 6px;
	margin-inline-end: 4px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	rotate: 45deg; margin-block-start: -3px;
	transition: rotate 160ms ease, margin 160ms ease;
}
.fbc-wybor.is-otwarta .fbc-wybor__strzalka { rotate: -135deg; margin-block-start: 3px; }

/* Lista — w <body>, `fixed`, pozycję i szerokość liczy skrypt. */
.fbc-wybor__lista {
	z-index: 1000;
	box-sizing: border-box;
	max-width: min(420px, calc(100vw - 16px));
	margin: 0;
	padding: 4px;
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line-strong, #C6C9D0);
	border-radius: 2px;
	box-shadow: 0 12px 32px rgba(10, 10, 12, 0.14);
}
.fbc-wybor__lista.is-w-gore { box-shadow: 0 -12px 32px rgba(10, 10, 12, 0.14); }
.fbc-wybor__lista[hidden] { display: none; }
.fbc-wybor__lista:focus { outline: none; }
.fbc-wybor__opcja {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	box-sizing: border-box;
	margin: 0;
	padding: 12px;
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	cursor: pointer;
}
.fbc-wybor__nazwa { min-width: 0; overflow-wrap: anywhere; }
.fbc-wybor__opcja.is-aktywna { background: color-mix(in srgb, var(--wp--preset--color--purr) 8%, var(--wp--preset--color--base)); color: var(--wp--preset--color--purr); }
/* Wybrana pozycja: fiolet i ptaszek na końcu wiersza. */
.fbc-wybor__opcja[aria-selected="true"] { color: var(--wp--preset--color--purr); font-weight: 500; }
.fbc-wybor__opcja[aria-selected="true"]::after {
	content: "";
	flex: none;
	align-self: center;
	width: 4px; height: 9px;
	margin-inline: 2px 4px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	rotate: 45deg;
	translate: 0 -2px;
}
.fbc-wybor__opcja[aria-selected="true"] .fbc-wybor__dopisek { margin-inline-start: auto; }
.fbc-wybor__opcja[aria-disabled="true"] { color: var(--wp--preset--color--contrast-3); cursor: not-allowed; }
.fbc-wybor__dopisek { flex: none; font-family: var(--wp--preset--font-family--mono); font-size: 0.74rem; font-weight: 400; color: var(--wp--preset--color--contrast-2); }
.fbc-wybor__opcja.is-brak .fbc-wybor__dopisek { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.66rem; color: var(--wp--preset--color--contrast-3); }

/* Konteksty — pole ma geometrię natywnego selecta, który zastępuje. */
.fbc-produkt-zakup .variations .fbc-wybor__pole { min-height: 0; height: 42px; }   /* niższa od przycisku (klient 2026-09-28: „wybór wariantu większy nawet od CTA”) */
.fbc-formularz__pole .fbc-wybor__pole {
	min-height: 48px;
	padding: 10px 14px;
	border-color: var(--wp--preset--color--line);
	font: inherit;
	line-height: 1.4;
}
.woocommerce-ordering .fbc-wybor { display: inline-block; width: auto; }
.woocommerce-ordering .fbc-wybor__pole {
	width: auto;
	gap: 14px;
	padding: 8px 12px;
	border-color: var(--wp--preset--color--line);
	white-space: nowrap;
}
.fbc-formularz__pole .fbc-wybor__pole:hover,
.woocommerce-ordering .fbc-wybor__pole:hover { border-color: var(--wp--preset--color--contrast-3); }
.fbc-formularz__pole .fbc-wybor__pole:focus,
.fbc-formularz__pole .fbc-wybor.is-otwarta .fbc-wybor__pole,
.woocommerce-ordering .fbc-wybor__pole:focus,
.woocommerce-ordering .fbc-wybor.is-otwarta .fbc-wybor__pole { border-color: var(--wp--preset--color--contrast); }
.woocommerce-ordering .fbc-wybor__wartosc { overflow-wrap: normal; }
.is-style-sekcja-ciemna .fbc-wybor__pole {
	background: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--line-dark);
}
.is-style-sekcja-ciemna .fbc-wybor__pole:focus,
.is-style-sekcja-ciemna .fbc-wybor.is-otwarta .fbc-wybor__pole { border-color: var(--wp--preset--color--base); }

/* --------------------------------------------------------------------------
   Fokus bez obrysu z odstępem (klient 2026-09-28: „ten autofocus wciąż razi,
   pozbądź się go wszędzie”). Globalna reguła `:focus-visible` ze style.css
   (2 px fioletu z odstępem 3 px) łapie pola tekstowe przy KAŻDYM fokusie —
   także po kliknięciu myszą i po ustawieniu kursora przez skrypt — i wyglądała
   jak gruba podwójna obwódka. Zasada dla całego motywu:
     • pola (input, textarea, select, pole listy z wybor.js): fokus =
       ciemniejsze obramowanie samego pola, bez `outline` i bez poświaty,
       jak pole wyszukiwarki w nagłówku;
     • przyciski i linki: obrys tylko przy `:focus-visible` (klawiatura) —
       to już robi style.css; po kliknięciu myszą nic.
   Arkusz ładuje się po style.css, więc przy równej wadze wygrywa kolejność.
   Pola wyboru (checkbox, radio, suwak) zostają z obrysem z klawiatury —
   nie mają obramowania, które mogłoby go zastąpić.
   -------------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="color"]):focus,
textarea:focus,
select:focus {
	outline: none;
}
/* Konkretne pola motywu, które miały na fokusie fiolet i poświatę. */
.fbc-formularz__pole input:focus,
.fbc-formularz__pole select:focus,
.fbc-formularz__pole textarea:focus,
.woocommerce select:focus,
.woocommerce .variations select:focus,
.fbc-produkt-zakup .variations select:focus,
.fbc-sklep__pasek .woocommerce-ordering select:focus,
.fbc-sklep__pasek .wc-block-catalog-sorting select:focus,
.woocommerce form .input-text:focus,
.woocommerce-account input.input-text:focus {
	outline: none;
	border-color: var(--wp--preset--color--contrast);
	box-shadow: none;
}
.fbc-produkt-zakup .variations select:focus-visible { outline: none; }
.wp-block-woocommerce-product-filters .wc-block-product-filter-price-slider__left:focus,
.wp-block-woocommerce-product-filters .wc-block-product-filter-price-slider__right:focus {
	outline: none;
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}
/* Formularz opinii: na ciemnej karcie jaśniejsza krawędź, na jasnej ciemna. */
.fbc-produkt-opinie #review_form_wrapper input:not([type="submit"]):focus,
.fbc-produkt-opinie #review_form_wrapper textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--base);
	box-shadow: none;
}
.fbc-produkt-opinie--jasna #review_form_wrapper input:not([type="submit"]):focus,
.fbc-produkt-opinie--jasna #review_form_wrapper textarea:focus {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}
.is-style-sekcja-ciemna select:focus { border-color: var(--wp--preset--color--base); }
/* Kasa (Fluid Checkout): wtyczka rysuje na `:focus` pól i pól wyboru obrys
   2 px z odstępem, z `!important` — po kliknięciu myszą w e-mail wychodziła
   podwójna ramka. Pola tekstowe: sam ciemny brzeg (WooCommerce daje
   `border-color: currentcolor`); pola wyboru i lista kraju: obrys tylko
   z klawiatury. Selecty kasy zostają natywne/selectWoo — tu tylko fokus. */
body div.woocommerce form .form-row :is(input, select, textarea, .select2-selection):focus:not(:focus-visible),
body div.woocommerce form .form-row :is(input:not([type="checkbox"]):not([type="radio"]), textarea):focus {
	outline: none !important;
}

/* Odstęp pole wariantu → przycisk (klient 2026-09-28: „za duża przerwa selecta
   od przycisku”). Link „Clear” WooCommerce przełącza przez inline
   `visibility: hidden / visible`, więc ukryty dalej zajmował 40 px pod polem
   (td.value 91 px zamiast 51). Teraz stoi w wierszu etykiety, po prawej —
   poza przepływem, więc nic nie rezerwuje i nic nie skacze po wyborze.
   Odstęp pole → przycisk = odstęp między wierszami cech (16 px), a po wyborze
   cena wariantu siedzi między nimi: pole 16 px cena 12 px przycisk. */
.fbc-produkt-zakup .variations tr:has(.reset_variations) { position: relative; }
.fbc-produkt-zakup .variations .reset_variations {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	margin: 0;
	padding: 0;
	line-height: 2;   /* = interlinia etykiety (26,6 px), tekst w osi „HEEL CUP SIZE” */
}
/* Obszar dotyku 44 px bez zmiany wyglądu (zasada z 2026-09-23). */
.fbc-produkt-zakup .variations .reset_variations::before {
	content: "";
	position: absolute;
	inset: -9px -10px;
}
/* Etykieta i lista w jednym rzędzie, także na telefonie (klient 2026-09-28: „może
   label dać przed selectem w jednej linii? nawet na mobile”). Wiersz to siatka:
   etykieta w lewej kolumnie, lista w prawej na wysokość całego wiersza, „Clear”
   (po wyborze wariantu) w lewej kolumnie pod etykietą — `td` znika z układu
   (`display: contents`), żeby jego dzieci były elementami siatki. */
.fbc-produkt-zakup .variations tr {
	display: grid;
	grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: var(--wp--preset--spacing--40);
	align-items: center;
}
.fbc-produkt-zakup .variations th.label { grid-column: 1; grid-row: 1 / span 2; margin: 0; align-self: center; }
.fbc-produkt-zakup .variations tr:has(.reset_variations[style*="visible"]) th.label { grid-row: 1; align-self: end; }
.fbc-produkt-zakup .variations td.value { display: contents; }
.fbc-produkt-zakup .variations td.value > .fbc-wybor,
.fbc-produkt-zakup .variations td.value > select { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.fbc-produkt-zakup .variations .reset_variations {
	position: static;
	grid-column: 1;
	grid-row: 2;
	align-self: start;
	justify-self: start;
	line-height: 1.6;
}
.fbc-produkt-zakup .variations .reset_variations[style*="hidden"] { display: none; }
.woocommerce div.product .fbc-produkt-zakup form.cart .single_variation_wrap { margin-block-start: var(--wp--preset--spacing--40) !important; }   /* `.cart > * { margin: 0 !important }` wyżej */
.woocommerce div.product .fbc-produkt-zakup form.cart .single_variation_wrap .woocommerce-variation.single_variation { margin: 0 0 var(--wp--preset--spacing--30); }
.woocommerce div.product .fbc-produkt-zakup form.cart .single_variation_wrap .woocommerce-variation-price { margin: 0; }

/* Przyciski bloków WooCommerce (Go to checkout w szufladzie, przyciski kasy i koszyka):
   Woo rysuje na `:focus` biało-niebieski cień w kolorze panelu administracyjnego —
   po kliknięciu „Go to checkout” zostawała niebieska obwódka (2026-09-28). Bez niego;
   przy klawiaturze działa globalny fioletowy obrys `:focus-visible` (style.css). */
.wc-block-components-button:not(.is-link):focus { box-shadow: none !important; }

/* ==========================================================================
   Konto (/my-account/) — 2026-09-28
   Klient: „weź na warsztat stronę profilu my account, bo nic nie ruszone”.
   Szablon templates/page-my-account.html (szerokość „wide”), pulpit
   woocommerce/myaccount/dashboard.php, teksty formularzy inc/konto.php.
   Układ: nawigacja z ikonami po lewej (na telefonie pasek do przewijania),
   treść obok; karty z cienką linią jak reszta motywu, bez zaokrągleń.
   Style Woo (layout, smallscreen, general) ładują się przed tym arkuszem —
   tu je prostujemy: floaty zamiast siatki, niebieskie powiadomienia, obramowane
   formularze logowania.
   ========================================================================== */
.wp-site-blocks main > .alignfull.fbc-konto-sekcja { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem); }
.fbc-konto-uklad .woocommerce::before,
.fbc-konto-uklad .woocommerce::after,
.fbc-konto-uklad .col2-set::before,
.fbc-konto-uklad .col2-set::after { display: none; }
.fbc-konto-uklad .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--70);
	align-items: start;
}
.fbc-konto-uklad .woocommerce-MyAccount-navigation,
.fbc-konto-uklad .woocommerce-MyAccount-content { float: none; width: auto; margin: 0; }
/* Arkusz Woo dla motywów blokowych zwęża konto do 1000 px i daje pozycjom menu
   po 16 px paddingu, a aktywnej podkreślenie — tu pełna szerokość „wide”. */
.fbc-konto-uklad .woocommerce,
.woocommerce-account main .fbc-konto-uklad .woocommerce { max-width: none; margin: 0; }
.fbc-konto-uklad .fbc-eyebrow { text-transform: uppercase; }
.fbc-konto-uklad .cf-turnstile-br { display: none; }
.fbc-konto-uklad .woocommerce-MyAccount-content > :first-child,
.fbc-konto-uklad .woocommerce-notices-wrapper:empty + * { margin-block-start: 0; }
.fbc-konto-uklad .woocommerce-notices-wrapper:empty { display: none; }

/* ---- Nawigacja konta ---- */
.fbc-konto-uklad .woocommerce-MyAccount-navigation { position: sticky; top: calc(var(--fbc-naglowek-h, 72px) + var(--wp--preset--spacing--50)); }
.fbc-konto-uklad .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--wp--preset--color--line);
}
.fbc-konto-uklad .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; border-block-end: 1px solid var(--wp--preset--color--line); }
.fbc-konto-uklad .woocommerce-MyAccount-navigation li a,
.fbc-konto-uklad .woocommerce-MyAccount-navigation li.is-active a { text-decoration: none; }
.fbc-konto-uklad .woocommerce-MyAccount-navigation a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 10px 12px 10px 14px;
	color: var(--wp--preset--color--contrast-2);
	font-size: 0.94rem;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.fbc-konto-uklad .woocommerce-MyAccount-navigation a::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--fbc-ikona) center / contain no-repeat;
	mask: var(--fbc-ikona) center / contain no-repeat;
}
.fbc-konto-uklad .woocommerce-MyAccount-navigation a:hover { background: var(--wp--preset--color--base-2); color: var(--wp--preset--color--contrast); }
.fbc-konto-uklad .woocommerce-MyAccount-navigation .is-active a {
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	box-shadow: inset 2px 0 0 var(--wp--preset--color--purr);
}
.fbc-konto-uklad .woocommerce-MyAccount-navigation .is-active a::before { background: var(--wp--preset--color--purr); }
.fbc-konto-uklad .woocommerce-MyAccount-navigation-link--customer-logout { margin-block-start: var(--wp--preset--spacing--50); border-block-start: 1px solid var(--wp--preset--color--line); }
.fbc-konto-uklad .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--wp--preset--color--contrast-3); }
/* Pozycja bez własnej ikony (np. z wtyczki): kropka zamiast pustego miejsca. */
.woocommerce-MyAccount-navigation-link { --fbc-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--dashboard { --fbc-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7'/%3E%3Crect x='13.5' y='3.5' width='7' height='7'/%3E%3Crect x='3.5' y='13.5' width='7' height='7'/%3E%3Crect x='13.5' y='13.5' width='7' height='7'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--orders { --fbc-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M12 3 20 7v10l-8 4-8-4V7l8-4Z'/%3E%3Cpath d='m4 7 8 4 8-4M12 11v10'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--downloads { --fbc-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7.5 10.5 12 15l4.5-4.5M4.5 19.5h15'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-address { --fbc-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-account { --fbc-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20.5c1.2-3.8 4-5.5 7.5-5.5s6.3 1.7 7.5 5.5'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--vat-number { --fbc-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h12v17l-3-1.8-3 1.8-3-1.8-3 1.8v-17Z'/%3E%3Cpath d='M9 8.5h6M9 12h6'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--payment-methods { --fbc-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='3' y='5.5' width='18' height='13'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--customer-logout { --fbc-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4.5H5v15h9M10 12h10M16.5 8.5 20 12l-3.5 3.5'/%3E%3C/svg%3E"); }

/* ---- Wspólne: karty, nagłówki, powiadomienia ---- */
.fbc-konto-karta {
	display: block;
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
.fbc-konto-uklad .woocommerce-MyAccount-content h2,
.fbc-konto-uklad .woocommerce-MyAccount-content h3:not(.fbc-eyebrow) {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin-block: 0 var(--wp--preset--spacing--40);
}
.fbc-konto-uklad .woocommerce-MyAccount-content > p { color: var(--wp--preset--color--contrast-2); }
.fbc-konto-uklad .wc-block-components-notice-banner,
.fbc-konto-uklad .woocommerce-info,
.fbc-konto-uklad .woocommerce-message,
.fbc-konto-uklad .woocommerce-error {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 14px 16px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
	font-size: 0.9rem;
	line-height: 1.5;
}
.fbc-konto-uklad .woocommerce-info::before,
.fbc-konto-uklad .woocommerce-message::before,
.fbc-konto-uklad .woocommerce-error::before { display: none; }
.fbc-konto-uklad .wc-block-components-notice-banner > svg { flex: none; width: 20px; height: 20px; margin: 0; padding: 0; border-radius: 0; background: none; fill: var(--wp--preset--color--purr); }
.fbc-konto-uklad .wc-block-components-notice-banner.is-error > svg { fill: #b3261e; }
.fbc-konto-uklad .wc-block-components-notice-banner.is-error { border-color: #e7b7b3; background: #fdf4f3; }
.fbc-konto-uklad .wc-block-components-notice-banner__content { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex: 1; }
.fbc-konto-uklad .wc-block-components-notice-banner__content .button,
.fbc-konto-uklad .woocommerce-info .button,
.fbc-konto-uklad .woocommerce-message .button {
	order: 2;
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--purr);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	opacity: 1;
	box-shadow: none;
}

/* ---- Pulpit ---- */
.fbc-konto-pulpit { display: grid; gap: var(--wp--preset--spacing--50); }
.fbc-konto-pulpit__powitanie { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; }
.fbc-konto-uklad .fbc-konto-pulpit__tytul { margin: 0; font-size: var(--wp--preset--font-size--2-x-large); }
.fbc-konto-pulpit__nie-ty { margin: 0; font-size: 0.88rem; color: var(--wp--preset--color--contrast-3); }
.fbc-konto-pulpit__nie-ty a { color: inherit; }
.fbc-konto-karta .fbc-eyebrow { display: block; margin: 0 0 var(--wp--preset--spacing--40); font-size: 0.72rem; }
.fbc-konto-zam { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--wp--preset--spacing--50); align-items: center; }
.fbc-konto-zam__miniatury { display: flex; }
.fbc-konto-zam__miniatury img,
.fbc-konto-zam__pusta {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: contain;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base-2);
}
.fbc-konto-zam__miniatury > * + * { margin-inline-start: -28px; box-shadow: -4px 0 0 var(--wp--preset--color--base); }
.fbc-konto-zam__opis p { margin: 0; }
.fbc-konto-zam__numer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-weight: 600; font-size: 1.05rem; }
.fbc-konto-zam__szczegoly { margin-block-start: 4px !important; font-family: var(--wp--preset--font-family--mono); font-size: 0.8rem; color: var(--wp--preset--color--contrast-2); }
.fbc-konto-zam__pozycje { margin-block-start: 6px !important; font-size: 0.88rem; color: var(--wp--preset--color--contrast-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbc-konto-zam__akcje { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fbc-konto-zam__akcje .wp-block-button__link { white-space: nowrap; }
.fbc-konto-link,
.fbc-konto-kafel__akcja {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--purr);
}
.fbc-konto-zam--brak { grid-template-columns: minmax(0, 1fr) auto; }
.fbc-konto-zam--brak p { margin: 0; color: var(--wp--preset--color--contrast-2); }
.fbc-konto-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 8px 4px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base-2);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}
.fbc-konto-status::before,
.fbc-konto-uklad .woocommerce-orders-table__cell-order-status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--fbc-status, var(--wp--preset--color--contrast-3));
}
.fbc-konto-status--processing,
.woocommerce-orders-table__row--status-processing { --fbc-status: #d08a00; }
.fbc-konto-status--completed,
.woocommerce-orders-table__row--status-completed { --fbc-status: #1f8a4c; }
.fbc-konto-status--on-hold,
.fbc-konto-status--pending,
.woocommerce-orders-table__row--status-on-hold,
.woocommerce-orders-table__row--status-pending { --fbc-status: var(--wp--preset--color--purr); }
.fbc-konto-status--cancelled,
.fbc-konto-status--failed,
.fbc-konto-status--refunded,
.woocommerce-orders-table__row--status-cancelled,
.woocommerce-orders-table__row--status-failed,
.woocommerce-orders-table__row--status-refunded { --fbc-status: #b3261e; }
.fbc-konto-kafle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--50); }
.fbc-konto-kafel { display: flex; flex-direction: column; gap: 6px; text-decoration: none; transition: border-color 0.15s ease; }
.fbc-konto-kafel:hover { border-color: var(--wp--preset--color--contrast); }
.fbc-konto-kafel .fbc-eyebrow { margin-block-end: 4px; }
.fbc-konto-kafel__tresc { font-size: 0.95rem; overflow-wrap: anywhere; }
.fbc-konto-kafel__akcja { margin-block-start: auto; padding-block-start: var(--wp--preset--spacing--30); }
.fbc-konto-pomoc { margin-block-start: var(--wp--preset--spacing--30); }
.fbc-konto-uklad .fbc-konto-pomoc > .fbc-eyebrow { margin: 0 0 var(--wp--preset--spacing--40); font-size: 0.72rem; font-weight: 400; }
.fbc-konto-pomoc__lista {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--wp--preset--color--line);
}
.fbc-konto-pomoc__lista li { margin: 0; }
.fbc-konto-pomoc__lista li + li { border-inline-start: 1px solid var(--wp--preset--color--line); }
.fbc-konto-pomoc__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.fbc-konto-pomoc__link::before {
	content: "";
	width: 22px;
	height: 22px;
	margin-block-end: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--purr);
	-webkit-mask: var(--fbc-ikona) center / contain no-repeat;
	mask: var(--fbc-ikona) center / contain no-repeat;
}
.fbc-konto-pomoc__link:hover { background: var(--wp--preset--color--base-2); }
.fbc-konto-pomoc__link strong { font-size: 0.95rem; }
.fbc-konto-pomoc__link span { font-size: 0.82rem; color: var(--wp--preset--color--contrast-2); }
.fbc-konto-ikona--pliki { --fbc-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7.5 10.5 12 15l4.5-4.5M4.5 19.5h15'/%3E%3C/svg%3E"); }
.fbc-konto-ikona--wiedza { --fbc-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M4 5.5c3-1 5.5-.8 8 1 2.5-1.8 5-2 8-1v13c-3-1-5.5-.8-8 1-2.5-1.8-5-2-8-1v-13Z'/%3E%3Cpath d='M12 6.5v13'/%3E%3C/svg%3E"); }
.fbc-konto-ikona--pomoc { --fbc-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 5.8v5.4c0 4.6 3.1 8.6 7.5 9.8 4.4-1.2 7.5-5.2 7.5-9.8V5.8L12 3Z'/%3E%3Cpath d='m9 12.2 2.1 2.1L15.2 10'/%3E%3C/svg%3E"); }
.fbc-konto-ikona--discord { --fbc-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M4.5 5.5h15v10h-8l-4.5 3.5v-3.5H4.5v-10Z'/%3E%3Ccircle cx='9.5' cy='10.5' r='.6' fill='%23000'/%3E%3Ccircle cx='14.5' cy='10.5' r='.6' fill='%23000'/%3E%3C/svg%3E"); }

/* ---- Zamówienia (tabela) ---- */
.fbc-konto-uklad table.shop_table {
	width: 100%;
	margin: 0 0 var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--line);
	border-collapse: collapse;
	border-radius: 0;
}
.fbc-konto-uklad table.shop_table th,
.fbc-konto-uklad table.shop_table td { padding: 14px 16px; border: 0; border-block-start: 1px solid var(--wp--preset--color--line); vertical-align: middle; line-height: 1.4; }
.fbc-konto-uklad table.shop_table thead th {
	border-block-start: 0;
	background: var(--wp--preset--color--base-2);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
	text-align: start;
}
.fbc-konto-uklad .woocommerce-orders-table__cell-order-number a { font-family: var(--wp--preset--font-family--mono); font-weight: 600; white-space: nowrap; text-decoration: none; }
.fbc-konto-uklad .woocommerce-orders-table__cell-order-number a:hover { text-decoration: underline; }
.fbc-konto-uklad .woocommerce-orders-table__cell-order-date,
.fbc-konto-uklad .woocommerce-orders-table__cell-order-total { font-family: var(--wp--preset--font-family--mono); font-size: 0.85rem; white-space: nowrap; }
.fbc-konto-uklad .woocommerce-orders-table__cell-order-total { white-space: normal; color: var(--wp--preset--color--contrast-2); }
.fbc-konto-uklad .woocommerce-orders-table__cell-order-total .amount { color: var(--wp--preset--color--contrast); font-weight: 500; }
.fbc-konto-uklad .woocommerce-orders-table__cell-order-status { font-size: 0.88rem; white-space: nowrap; }
.fbc-konto-uklad .woocommerce-orders-table__cell-order-status::before { display: inline-block; margin-inline-end: 8px; vertical-align: 1px; }
.fbc-konto-uklad .woocommerce-orders-table__cell-order-actions { text-align: end; }
.fbc-konto-uklad .woocommerce-MyAccount-content .woocommerce-button,
.fbc-konto-uklad .woocommerce-MyAccount-content .woocommerce-Button--previous,
.fbc-konto-uklad .woocommerce-MyAccount-content .woocommerce-Button--next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	margin: 2px 0 2px 6px;
	padding: 6px 16px;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.2;
	clip-path: none;
	text-decoration: none;
}
.fbc-konto-uklad .woocommerce-MyAccount-content .woocommerce-button:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }

/* ---- Podgląd zamówienia ---- */
.fbc-konto-uklad mark { background: none; color: inherit; font-weight: 600; }
.fbc-konto-uklad .woocommerce-order-details,
.fbc-konto-uklad .woocommerce-customer-details { margin-block-start: var(--wp--preset--spacing--60); }
.fbc-konto-uklad table.order_details thead th.product-total { text-align: end; }
.fbc-konto-uklad .woocommerce-customer-details h2,
.fbc-konto-uklad .woocommerce-order-details h2 { font-weight: 600; }
.fbc-konto-uklad table.order_details tfoot th { font-weight: 500; color: var(--wp--preset--color--contrast-2); text-align: start; }
.fbc-konto-uklad table.order_details tfoot tr:last-child th,
.fbc-konto-uklad table.order_details tfoot tr:last-child td { font-weight: 600; color: var(--wp--preset--color--contrast); }
.fbc-konto-uklad table.order_details td.product-total,
.fbc-konto-uklad table.order_details tfoot td { font-family: var(--wp--preset--font-family--mono); font-size: 0.88rem; text-align: end; }
.fbc-konto-uklad .woocommerce-customer-details address {
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	font-style: normal;
	line-height: 1.7;
}

/* ---- Adresy ---- */
.fbc-konto-uklad .woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--50); margin: 0; }
.fbc-konto-uklad .woocommerce-Addresses .woocommerce-Address {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--line);
}
.fbc-konto-uklad .woocommerce-Address-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-block-end: var(--wp--preset--spacing--40); }
/* Woo dokłada tu clearfix (`.addresses .title::before/::after`) — w flexie to
   dwa puste elementy, które rozpychały tytuł od krawędzi. */
.fbc-konto-uklad .woocommerce-Addresses .woocommerce-Address-title::before,
.fbc-konto-uklad .woocommerce-Addresses .woocommerce-Address-title::after { content: none; display: none; }
.fbc-konto-uklad .woocommerce-MyAccount-content .woocommerce-Address-title h2 { margin: 0; font-size: var(--wp--preset--font-size--large); }
.fbc-konto-uklad .woocommerce-Address-title .edit { float: none; font-family: var(--wp--preset--font-family--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.fbc-konto-uklad .woocommerce-Address address { margin: 0; font-style: normal; line-height: 1.7; color: var(--wp--preset--color--contrast-2); }

/* ---- Formularze (dane konta, edycja adresu) ---- */
.fbc-konto-uklad .woocommerce-EditAccountForm,
.fbc-konto-uklad .woocommerce-address-fields,
.fbc-konto-uklad .woocommerce-MyAccount-content > form { max-width: 640px; }
.fbc-konto-uklad .woocommerce-EditAccountForm fieldset {
	margin: var(--wp--preset--spacing--50) 0;
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--line);
}
.fbc-konto-uklad .woocommerce-EditAccountForm legend {
	padding: 0 8px;
	margin-inline-start: -8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}
.fbc-konto-uklad .woocommerce-MyAccount-content form em,
.fbc-konto-uklad #account_display_name_description {
	display: block;
	margin-block-start: 6px;
	font-style: normal;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-3);
}

/* ---- Logowanie i rejestracja ---- */
.fbc-konto-uklad #customer_login {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
	max-width: 960px;
	margin: 0 auto;
}
.fbc-konto-uklad #customer_login > .u-column1,
.fbc-konto-uklad #customer_login > .u-column2 {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
}
.fbc-konto-uklad #customer_login h2 { margin: 0 0 var(--wp--preset--spacing--30); padding: 0; border: 0; font-size: var(--wp--preset--font-size--2-x-large); line-height: 1.15; }
.fbc-konto-uklad #customer_login form.login,
.fbc-konto-uklad #customer_login form.register { margin: 0; padding: 0; border: 0; border-radius: 0; }
.fbc-konto-uklad .fbc-konto-wstep { margin: 0 0 var(--wp--preset--spacing--50); font-size: 0.92rem; color: var(--wp--preset--color--contrast-2); }
.fbc-konto-uklad .fbc-konto-korzysci { margin: 0 0 var(--wp--preset--spacing--50); padding: 0; list-style: none; display: grid; gap: 8px; }
.fbc-konto-uklad .fbc-konto-korzysci li { position: relative; margin: 0; padding-inline-start: 26px; font-size: 0.92rem; color: var(--wp--preset--color--contrast-2); }
.fbc-konto-uklad .fbc-konto-korzysci li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.2em;
	width: 16px;
	height: 16px;
	background: var(--wp--preset--color--purr);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fbc-konto-uklad #customer_login .form-row { margin: 0 0 var(--wp--preset--spacing--40); padding: 0; }
.fbc-konto-uklad #customer_login .form-row:has(.woocommerce-form-login__submit) { display: flex; flex-direction: column; align-items: stretch; gap: var(--wp--preset--spacing--40); margin-block-start: var(--wp--preset--spacing--40); }
.fbc-konto-uklad .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 0.9rem; color: var(--wp--preset--color--contrast-2); }
.fbc-konto-uklad #customer_login .woocommerce-form-login__submit,
.fbc-konto-uklad #customer_login .woocommerce-form-register__submit { float: none; width: 100%; margin: 0; justify-content: center; }
.fbc-konto-uklad .woocommerce-LostPassword { margin: var(--wp--preset--spacing--40) 0 0; font-size: 0.88rem; }
.fbc-konto-uklad .woocommerce-privacy-policy-text p { margin: 0 0 var(--wp--preset--spacing--40); font-size: 0.8rem; line-height: 1.55; color: var(--wp--preset--color--contrast-3); }

/* ---- Telefon i tablet ---- */
@media (max-width: 999.98px) {
	.fbc-konto-uklad .woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--50); }
	.fbc-konto-uklad .woocommerce-MyAccount-navigation {
		position: static;
		margin-inline: calc(-1 * var(--fbc-gutter));
		overflow-x: auto;
		scrollbar-width: none;
		border-block: 1px solid var(--wp--preset--color--line);
	}
	.fbc-konto-uklad .woocommerce-MyAccount-navigation::-webkit-scrollbar { display: none; }
	.fbc-konto-uklad .woocommerce-MyAccount-navigation ul { display: flex; width: max-content; padding-inline: var(--fbc-gutter); border: 0; }
	.fbc-konto-uklad .woocommerce-MyAccount-navigation li,
	.fbc-konto-uklad .woocommerce-MyAccount-navigation-link--customer-logout { margin: 0; border: 0; }
	.fbc-konto-uklad .woocommerce-MyAccount-navigation a { min-height: 48px; padding: 10px 14px; gap: 8px; font-size: 0.88rem; white-space: nowrap; }
	.fbc-konto-uklad .woocommerce-MyAccount-navigation a::before { width: 16px; height: 16px; }
	.fbc-konto-uklad .woocommerce-MyAccount-navigation .is-active a { background: transparent; box-shadow: inset 0 -2px 0 var(--wp--preset--color--purr); }
	.fbc-konto-pomoc__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fbc-konto-pomoc__lista li:nth-child(3) { border-inline-start: 0; }
	.fbc-konto-pomoc__lista li:nth-child(n+3) { border-block-start: 1px solid var(--wp--preset--color--line); }
}
@media (max-width: 767.98px) {
	.fbc-konto-uklad #customer_login,
	.fbc-konto-uklad .woocommerce-Addresses,
	.fbc-konto-kafle { grid-template-columns: minmax(0, 1fr); }
	.fbc-konto-uklad #customer_login > .u-column1,
	.fbc-konto-uklad #customer_login > .u-column2 { padding: var(--wp--preset--spacing--50); }
	.fbc-konto-zam { grid-template-columns: auto minmax(0, 1fr); }
	.fbc-konto-zam__akcje { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
	.fbc-konto-zam--brak { grid-template-columns: minmax(0, 1fr); }
	.fbc-konto-zam__miniatury img,
	.fbc-konto-zam__pusta { width: 56px; height: 56px; }
	/* Tabela zamówień jako karty: Woo (smallscreen) zamienia wiersze na bloki
	   z etykietą z data-title — tu tylko nasza typografia i obramowanie. */
	.fbc-konto-uklad table.shop_table_responsive { border: 0; }
	.fbc-konto-uklad table.shop_table_responsive tbody tr { display: block; margin-block-end: var(--wp--preset--spacing--40); border: 1px solid var(--wp--preset--color--line); }
	.fbc-konto-uklad table.shop_table_responsive tbody th,
	.fbc-konto-uklad table.shop_table_responsive tbody td { display: block; padding: 10px 14px; text-align: end !important; }
	.fbc-konto-uklad table.shop_table_responsive tbody tr > :first-child { border-block-start: 0; background: var(--wp--preset--color--base-2); }
	.fbc-konto-uklad table.shop_table_responsive tbody [data-title]::before {
		content: attr(data-title);
		float: left;
		margin-inline-end: 12px;
		line-height: 1.9;
		font-family: var(--wp--preset--font-family--mono);
		font-size: 0.68rem;
		font-weight: 500;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--wp--preset--color--contrast-3);
	}
	.fbc-konto-uklad .woocommerce-orders-table__cell-order-status::before { display: inline; width: auto; height: auto; margin: 0; border-radius: 0; background: none; }
	.fbc-konto-uklad table.shop_table_responsive .woocommerce-orders-table__cell-order-actions::before { display: none; }
	.fbc-konto-uklad .woocommerce-orders-table__cell-order-actions .woocommerce-button { display: flex; width: 100%; margin: 0; }
}

/* ==========================================================================
   Strona koszyka (/cart/) — otwiera ją tylko „Edit cart” z kasy; na co dzień koszyk to szuflada.
   Szablon templates/page-cart.html, treść: klasyczny [woocommerce_cart] (inc/divi-transition.php),
   bez wyceny wysyłki (liczy kasa).
   ========================================================================== */
main .fbc-koszyk-strona .woocommerce { max-width: none; width: 100%; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--wp--preset--spacing--50); align-items: start; }
.fbc-koszyk-strona .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.fbc-koszyk-strona .woocommerce-notices-wrapper:empty { display: none; }
.fbc-koszyk-strona .woocommerce-cart-form,
.fbc-koszyk-strona .cart-collaterals { margin: 0; min-width: 0; width: auto; }
.fbc-koszyk-strona .cart-collaterals .cart_totals { float: none; width: 100%; box-sizing: border-box; padding: 20px; background: var(--wp--preset--color--base-2); border: 1px solid var(--wp--preset--color--line); }
.fbc-koszyk-strona table.shop_table { width: 100%; margin: 0; border: 0; border-collapse: collapse; border-radius: 0; font-size: .95rem; }
.fbc-koszyk-strona table.shop_table th,
.fbc-koszyk-strona table.shop_table td { padding: 14px 10px; border: 0; border-block-start: 1px solid var(--wp--preset--color--line); vertical-align: middle; background: none; }
.fbc-koszyk-strona table.shop_table thead th { border-block-start: 0; font-family: var(--wp--preset--font-family--mono); font-size: .7rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--contrast-2); }
.fbc-koszyk-strona table.cart td.product-remove { width: 24px; padding-inline: 0; }
.fbc-koszyk-strona table.cart td.product-thumbnail { width: 80px; }
.fbc-koszyk-strona table.cart td.product-thumbnail img { width: 72px; height: auto; display: block; }
.fbc-koszyk-strona table.cart td.product-name { width: 45%; }
.fbc-koszyk-strona table.cart td.product-name a { color: var(--wp--preset--color--contrast); text-decoration: none; font-weight: 600; }
.fbc-koszyk-strona table.cart td.product-name a:hover { text-decoration: underline; }
.fbc-koszyk-strona table.cart td.product-name dl.variation { display: block; margin: 6px 0 0; font-family: var(--wp--preset--font-family--mono); font-size: .66rem; letter-spacing: .04em; line-height: 1.5; color: var(--wp--preset--color--contrast-2); }
.fbc-koszyk-strona table.cart td.product-name dl.variation dt,
.fbc-koszyk-strona table.cart td.product-name dl.variation dd,
.fbc-koszyk-strona table.cart td.product-name dl.variation p { display: inline; margin: 0; padding: 0; float: none; font-weight: 400; }
.fbc-koszyk-strona table.cart td.product-price,
.fbc-koszyk-strona table.cart td.product-subtotal { white-space: nowrap; }
.fbc-koszyk-strona table.cart td.product-quantity .qty { width: 64px; }
.fbc-koszyk-strona table.cart td.product-remove a.remove { color: var(--wp--preset--color--contrast-2) !important; font-size: 1.3rem; font-weight: 400; background: none !important; }
.fbc-koszyk-strona table.cart td.product-remove a.remove:hover { color: var(--wp--preset--color--contrast) !important; }
.fbc-koszyk-strona table.cart td.actions { padding-inline: 0; }
.fbc-koszyk-strona table.cart td.actions .coupon { display: flex; gap: 8px; align-items: stretch; }
.fbc-koszyk-strona table.cart td.actions .coupon .input-text { width: 180px; }
.fbc-koszyk-strona .cart_totals h2 { margin: 0 0 12px; font-size: 1.05rem; }
.fbc-koszyk-strona .cart_totals table.shop_table th { padding-inline-start: 0; font-weight: 400; }
.fbc-koszyk-strona .cart_totals table.shop_table td { padding-inline-end: 0; text-align: end; }
.fbc-koszyk-strona .cart_totals tr.shipping,
.fbc-koszyk-strona .cart_totals .woocommerce-shipping-totals { display: none; }
.fbc-koszyk-strona .cart_totals .order-total small { display: block; }
.fbc-koszyk-strona .cart_totals .order-total td::after { content: "Shipping calculated at checkout"; display: block; margin-block-start: 4px; font-family: var(--wp--preset--font-family--mono); font-size: .66rem; letter-spacing: .04em; color: var(--wp--preset--color--contrast-2); }
.fbc-koszyk-strona .wc-proceed-to-checkout { padding: 16px 0 0; }
main .fbc-koszyk-strona .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; margin: 0 0 10px; padding: 14px 20px; font-size: 1rem; line-height: 1.2; text-align: center; }
@media (max-width: 900px) {
	.fbc-koszyk-strona .woocommerce { grid-template-columns: minmax(0, 1fr); }
	.fbc-koszyk-strona table.cart td.product-name { width: auto; }
	.fbc-koszyk-strona table.cart td.actions .coupon { flex-wrap: wrap; }
}

/* ==========================================================================
   Potwierdzenie zamówienia (klasyczne) — templates/page-zamowienie.html, woocommerce/checkout/thankyou.php
   ========================================================================== */
main .fbc-zamowienie-strona .woocommerce { max-width: none; width: 100%; margin: 0; }
.fbc-zamowienie-strona .woocommerce-order { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); }
.fbc-zamowienie-strona .woocommerce-order > * { margin: 0 !important; }
.fbc-zamowienie-strona .woocommerce-thankyou-order-received { font-size: 1.15rem; font-weight: 600; }
.fbc-zamowienie-strona h2,
.fbc-zamowienie-strona .woocommerce-column__title { margin: 0 0 12px; font-size: 1.15rem; }
.fbc-zamowienie-strona ul.woocommerce-order-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--wp--preset--color--line); border: 1px solid var(--wp--preset--color--line); }
.fbc-zamowienie-strona ul.woocommerce-order-overview::before,
.fbc-zamowienie-strona ul.woocommerce-order-overview::after { display: none; }
.fbc-zamowienie-strona ul.woocommerce-order-overview li { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 14px 16px; float: none; border: 0; background: var(--wp--preset--color--base-2); font-family: var(--wp--preset--font-family--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--contrast-2); overflow-wrap: anywhere; }
.fbc-zamowienie-strona ul.woocommerce-order-overview li strong { font-family: var(--wp--preset--font-family--body, inherit); font-size: .95rem; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--wp--preset--color--contrast); }
.fbc-zamowienie-strona table.shop_table { width: 100%; margin: 0; border: 0; border-collapse: collapse; border-radius: 0; }
.fbc-zamowienie-strona table.shop_table th,
.fbc-zamowienie-strona table.shop_table td { padding: 12px 0; border: 0; border-block-start: 1px solid var(--wp--preset--color--line); text-align: start; vertical-align: top; background: none; }
.fbc-zamowienie-strona table.shop_table thead th { border-block-start: 0; font-family: var(--wp--preset--font-family--mono); font-size: .7rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--contrast-2); }
.fbc-zamowienie-strona table.shop_table th:last-child,
.fbc-zamowienie-strona table.shop_table td:last-child { text-align: end; }
.fbc-zamowienie-strona table.shop_table tfoot th { font-weight: 400; }
.fbc-zamowienie-strona table.shop_table tfoot tr:last-child th,
.fbc-zamowienie-strona table.shop_table tfoot tr:last-child td { font-weight: 700; }
.fbc-zamowienie-strona table.shop_table td.product-name a { color: var(--wp--preset--color--contrast); text-decoration: none; font-weight: 600; }
.fbc-zamowienie-strona table.shop_table .wc-item-meta { margin: 4px 0 0; padding: 0; list-style: none; font-family: var(--wp--preset--font-family--mono); font-size: .66rem; letter-spacing: .04em; color: var(--wp--preset--color--contrast-2); }
.fbc-zamowienie-strona table.shop_table .wc-item-meta li,
.fbc-zamowienie-strona table.shop_table .wc-item-meta p { display: inline; margin: 0; }
.fbc-zamowienie-strona .woocommerce-customer-details .col2-set,
.fbc-zamowienie-strona .woocommerce-columns--addresses { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--40); width: 100%; }
.fbc-zamowienie-strona .woocommerce-columns--addresses::before,
.fbc-zamowienie-strona .woocommerce-columns--addresses::after { display: none; }
.fbc-zamowienie-strona .woocommerce-column { float: none !important; width: auto !important; max-width: none !important; }
.fbc-zamowienie-strona address { margin: 0; padding: 16px; font-style: normal; line-height: 1.6; background: var(--wp--preset--color--base-2); border: 1px solid var(--wp--preset--color--line); border-radius: 0; }
.fbc-zamowienie-strona .woocommerce-bacs-bank-details { padding: 20px; background: var(--wp--preset--color--base-2); border: 1px solid var(--wp--preset--color--line); }
.fbc-zamowienie-strona .wc-bacs-bank-details-heading { margin: 0 0 8px; font-size: 1.15rem; }
.fbc-zamowienie-strona .wc-bacs-bank-details-account-name { margin: 12px 0 6px; font-family: var(--wp--preset--font-family--mono); font-size: .72rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--contrast-2); }
.fbc-zamowienie-strona ul.wc-bacs-bank-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 24px; margin: 0; padding: 0; list-style: none; font-size: .85rem; color: var(--wp--preset--color--contrast-2); }
.fbc-zamowienie-strona ul.wc-bacs-bank-details strong { display: block; font-family: var(--wp--preset--font-family--mono); font-size: .9rem; color: var(--wp--preset--color--contrast); overflow-wrap: anywhere; }
@media (max-width: 781px) {
	.fbc-zamowienie-strona .woocommerce-customer-details .col2-set,
	.fbc-zamowienie-strona .woocommerce-columns--addresses { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Przyciski płatności ekspresowych (Apple Pay / Google Pay — WooPayments, PayPal)
   Rysują się w iframe'ach bramek, więc CSS nie sięga do środka: kolor i obrys wybiera się
   w ustawieniach wtyczek (styl „ghost”: WooPayments theme light-outline + promień 0, PayPal
   white + rect). Tu tylko nasz kształt — ścięte narożniki jak w przyciskach motywu (10 px).
   ========================================================================== */
#wcpay-express-checkout-element,
#wc-stripe-express-checkout-element,
.ppc-button-wrapper {
	--fbc-sciecie: 10px;
	clip-path: polygon(
		var(--fbc-sciecie) 0,
		100% 0,
		100% calc(100% - var(--fbc-sciecie)),
		calc(100% - var(--fbc-sciecie)) 100%,
		0 100%,
		0 var(--fbc-sciecie)
	);
}
.ppc-button-wrapper { margin-block: 10px 0; line-height: 0; }
#wcpay-express-checkout-element,
#wc-stripe-express-checkout-element { margin-block: 10px 0; }
#wcpay-express-checkout-button-separator { display: none !important; }
/* Na stronie produktu bez przycisków ekspresowych — pod „Add to cart” tylko nasz przycisk
   (użytkownik 2026-09-30). Zostają w koszyku i w kasie. */
.single-product .wcpay-express-checkout-wrapper,
.single-product #wc-stripe-express-checkout-element,
.single-product #wc-stripe-express-checkout-button-separator,
.single-product #wcpay-express-checkout-element,
.single-product #wcpay-express-checkout-button-separator,
.single-product .ppc-button-wrapper,
.single-product .ppcp-messages { display: none !important; }

/* Karta produktu w promocji (od 2026-10-01 promocje GT ze zwykłym przekreśleniem): przekreślona
   cena drobno NAD ceną promocyjną, linia Omnibus pod całym wierszem stopki — przycisk zostaje obok
   ceny jak na kartach bez promocji (wcześniej Omnibus rozpychał cenę na całą szerokość i przycisk
   spadał pod spód). */
.fbc-produkt-karta__stopka:has(.fbc-omnibus) { position: relative; flex-wrap: nowrap; padding-block-end: calc(2 * 1.4 * 0.68rem + 8px); }
.fbc-produkt-karta__stopka .wp-block-woocommerce-product-price { min-width: 0; }
.fbc-produkt-karta__stopka .wc-block-components-product-price:has(del) { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.15; }
.fbc-produkt-karta__stopka .wc-block-components-product-price del { font-size: 0.72em; font-weight: 400; color: var(--wp--preset--color--contrast-2); }
.fbc-produkt-karta__stopka .wc-block-components-product-price ins { text-decoration: none; }
.fbc-produkt-karta__stopka .fbc-omnibus { position: absolute; inset-inline: 0; inset-block-end: 0; margin: 0; }
/* Pusty pojemnik reCAPTCHA PayPala (margines 20 px z obu stron) robił dziurę pod ceną. */
.single-product #ppcp-recaptcha-v2-container { display: none !important; }

/* Stopka karty zawsze w jednym wierszu: cena z lewej, przycisk z prawej (klient 2026-10-01: „jakim
   cudem karty pedałów mają inny układ niż akcesoriów”). Przy stopce węższej niż ~230 px (okna ok.
   1300–1400 px, cztery karty w rzędzie) długa cena pedałów + „Add to cart” nie mieściły się i przycisk
   spadał pod cenę. Zamiast zmniejszać litery — węższe marginesy przycisku w wąskiej stopce. */
.fbc-produkt-karta__stopka { container-type: inline-size; container-name: fbc-stopka; }
@container fbc-stopka (max-width: 240px) {
	.fbc-produkt-karta__przycisk .wp-block-button__link { padding-inline: 14px !important; }
}
@container fbc-stopka (max-width: 205px) {
	.fbc-produkt-karta__przycisk .wp-block-button__link { padding-inline: 10px !important; }
}

/* Pod treścią karty było 12 px za dużo (klient 2026-10-01: „na dole jest coś jeszcze, przycisk nie jest równo
   oddalony”) — stopka 37 px od dołu, przycisk 25 px od prawej. WordPress daje blokom karty dolny margines
   (odstęp bloków) i zeruje go tylko na OSTATNIM dziecku, a ostatnim jest pusty <span class="gtm4wp_productdata">
   z GTM4WP (dane dla analityki) — treść karty zachowywała więc swój margines. Zerujemy go wprost; span wyjęty
   z układu (nie ukryty — wtyczka czyta jego atrybuty). */
.fbc-produkt-karta__tresc { margin-block-end: 0 !important; }
.wc-block-product > .gtm4wp_productdata,
.fbc-produkt-karta > .gtm4wp_productdata { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Uwaga pod sumą zamówienia (inc/wysylka.php, 2026-10-14): mała szara linia; selektor przebija text-align Fluid Checkout. */
.fbc-uwaga td,
div.woocommerce .fc-wrapper #order_review table.woocommerce-checkout-review-order-table > tfoot > tr.fbc-uwaga > td { padding-block: 12px 8px !important; border: 0 !important; font-size: .75rem; font-weight: 400; line-height: 1.4; text-align: start !important; color: var(--wp--preset--color--contrast-2); }