/* =========================================================================
   Lecimy Biedaki — design system
   Wartości 1:1 z wp-content/themes/_design/README.md. Nie zmieniać liczb
   bez porównania z prototypem (_design/Lecimy Biedaki.dc.html).
   ========================================================================= */

:root {
	/* Kolory */
	--lb-ecru: #efeadf;
	--lb-ink: #151515;
	--lb-placeholder: #d9d4c7;
	--lb-green: #1d6a3b;
	--lb-amber: #f3b53f;
	--lb-status-green: #7fd39b;
	--lb-error: #8a2b1d;
	--lb-error-hover: #6e2216; /* ciemniejsza czerwień na hover — świadome odstępstwo od prototypu (tam błędnie zielony), patrz PLAN_WDROZENIA.md Faza 1 */
	--lb-thumb-dark: #2a2a28;
	--lb-board-bg: #161615;

	--lb-divider-on-light: rgba(21, 21, 21, .18);
	--lb-divider-on-dark: rgba(239, 234, 223, .25);
	--lb-muted-on-dark: rgba(239, 234, 223, .6);

	/* Fonty */
	--lb-font-display: 'Anton', sans-serif;
	--lb-font-serif: 'Instrument Serif', serif;
	--lb-font-body: 'Archivo', sans-serif;
	--lb-font-mono: 'JetBrains Mono', monospace;

	/* Border/shape */
	--lb-border-width: 1.5px;
	--lb-radius: 0;

	/* Layout */
	--lb-container-max: 1440px;
	--lb-container-pad: clamp(16px, 4vw, 48px);
	--lb-section-pad-sm: clamp(40px, 6vw, 80px);
	--lb-section-pad-lg: clamp(48px, 7vw, 104px);
}

/* =========================================================================
   Reset
   ========================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--lb-ecru);
	color: var(--lb-ink);
	font-family: var(--lb-font-body);
	font-size: 16px;
	line-height: 1.5;
	overflow-x: hidden; /* twarda gwarancja braku scrolla poziomego na mobile, patrz Faza 5 QA */
}

img,
svg {
	max-width: 100%;
	display: block;
}

/* Wtyczka shortcode-replacer maskuje wrażliwe dane (NIP, adres, telefon) w
   treści stron prawnych, renderując KAŻDE słowo jako osobny <img> (canvas
   z tekstem). Globalny reset display:block wyżej łamał to na jedno słowo
   na wiersz — te obrazki muszą płynąć jak zwykły tekst. */
img.sr-protected-content {
	display: inline-block;
	max-width: none;
}

button,
input,
select,
textarea {
	font-family: inherit;
	color: inherit;
}

a {
	color: inherit;
}

ul,
ol {
	padding-left: 1.2em;
}

/* Widoczny focus state na inputach/przyciskach — nieopisany w README,
   wymagany dla dostępności (Faza 5). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.lb-btn:focus-visible {
	outline: 2px solid var(--lb-amber);
	outline-offset: 2px;
}

/* =========================================================================
   Layout / kontener
   ========================================================================= */

.lb-container {
	max-width: var(--lb-container-max);
	margin-inline: auto;
	padding-inline: var(--lb-container-pad);
}

.lb-section {
	padding-block: var(--lb-section-pad-sm);
}

.lb-section--lg {
	padding-block: var(--lb-section-pad-lg);
}

.lb-section--dark {
	background: var(--lb-board-bg);
	color: var(--lb-ecru);
}

.lb-section--green {
	background: var(--lb-green);
	color: var(--lb-ecru);
}

.lb-section--placeholder-bg {
	background: var(--lb-placeholder);
	border-top: var(--lb-border-width) solid var(--lb-ink);
	border-bottom: var(--lb-border-width) solid var(--lb-ink);
}

/* =========================================================================
   Typografia
   ========================================================================= */

.lb-label {
	font-family: var(--lb-font-mono);
	font-size: clamp(10px, 1vw, 12px);
	font-weight: 500;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.lb-label--chip {
	display: inline-block;
	background: var(--lb-ink);
	color: var(--lb-ecru);
	padding: .5em .8em;
}

/* Nagłówki Anton — skale wg kontekstu z README (nie ujednolicać!). */
.lb-h-hero {
	font-family: var(--lb-font-display);
	font-size: clamp(72px, 9.5vw, 148px);
	line-height: .86;
	text-transform: uppercase;
	margin: 0;
}

.lb-h-hero-mobile {
	font-family: var(--lb-font-display);
	font-size: clamp(56px, 16vw, 96px);
	line-height: 1.02; /* mniejsza wartość powoduje nachodzenie linii na 390px — nie zmieniać */
	text-transform: uppercase;
	margin: 0;
}

/* Symbol ® przy dużych nagłówkach Anton — glif ® w samym Antonie ma bardzo
   cienką kreskę (font jest "turbo gruby" tylko dla liter), więc na tle
   reszty nagłówka wygląda rozmazany. Font zmieniony na Archivo Bold
   (tylko dla tego znaku) — grubszy, wyraźny obrys kółka i litery R. */
.lb-trademark {
	font-family: var(--lb-font-body);
	font-weight: 700;
	font-size: .42em;
	vertical-align: top;
	letter-spacing: 0;
}

.lb-h-shop {
	font-family: var(--lb-font-display);
	font-size: clamp(72px, 11vw, 160px);
	line-height: .88;
	text-transform: uppercase;
	margin: 0;
}

.lb-h-section {
	font-family: var(--lb-font-display);
	font-size: clamp(48px, 7vw, 88px);
	line-height: .9;
	text-transform: uppercase;
	margin: 0;
}

.lb-h-product {
	font-family: var(--lb-font-display);
	font-size: clamp(44px, 7vw, 76px);
	line-height: .92;
	text-transform: uppercase;
	margin: 0;
}

.lb-h-card {
	font-family: var(--lb-font-display);
	font-size: clamp(28px, 3vw, 40px);
	line-height: .92;
	text-transform: uppercase;
	margin: 0;
}

.lb-h-board {
	font-family: var(--lb-font-display);
	font-size: clamp(20px, 2.2vw, 32px);
	line-height: .92;
	text-transform: uppercase;
	margin: 0;
}

.lb-h-about {
	font-family: var(--lb-font-display);
	font-size: clamp(48px, 6vw, 92px);
	line-height: .9;
	text-transform: uppercase;
	margin: 0;
}

/* Nagłówek sekcji "Anton + italic accent + linia" — koszyk ("Koszyk"),
   checkout ("Odprawa"), kontakt ("Kontakt"). Wspólny komponent mimo nazwy
   klasy (patrz komentarz w checkout.css). */
.lb-checkout__title {
	margin: 0 0 32px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 16px;
	padding-bottom: 24px;
	border-bottom: var(--lb-border-width) solid var(--lb-ink);
}
.lb-checkout__title-main {
	font-family: var(--lb-font-display);
	font-size: clamp(56px, 8vw, 120px);
	line-height: .85;
	text-transform: uppercase;
}
.lb-checkout__title-accent {
	font-family: var(--lb-font-serif);
	font-style: italic;
	font-size: clamp(24px, 2.6vw, 36px);
	line-height: 1;
}

/* Kontakt ma inną skalę niż checkout/koszyk (prototyp: 72–160px/.82 vs
   56–120px/.85, margines 40 vs 32) — nie ujednolicać, patrz komentarz przy
   .lb-h-*. */
.lb-checkout__title--lg {
	margin-bottom: 40px;
}
.lb-checkout__title-main--lg {
	font-size: clamp(72px, 11vw, 160px);
	line-height: .82;
}

/* Akcenty serif italic — słowa/frazy w nagłówkach, cytaty. */
.lb-accent {
	font-family: var(--lb-font-serif);
	font-style: italic;
	font-weight: 400;
}

.lb-accent--xl {
	font-size: clamp(40px, 6vw, 72px);
	line-height: 1;
}

.lb-accent--green {
	color: var(--lb-green);
}

/* Ceny serif italic. */
.lb-price {
	font-family: var(--lb-font-serif);
	font-style: italic;
	font-size: 1.375rem;
}

.lb-price--lg {
	font-size: clamp(28px, 3.5vw, 40px);
}

.lb-price--total {
	font-size: clamp(26px, 3vw, 36px);
}

/* Ceny/meta w formie mono (listy, karty, tablica odlotów). */
.lb-price-mono {
	font-family: var(--lb-font-mono);
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.lb-body {
	font-family: var(--lb-font-body);
	font-size: 1.125rem;
	line-height: 1.55;
}

.lb-status {
	font-family: var(--lb-font-mono);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lb-green);
}

.lb-status--out {
	color: var(--lb-error);
}

.lb-status--on-dark {
	color: var(--lb-status-green);
}

/* =========================================================================
   Przyciski

   WooCommerce dolewa własny woocommerce.css (`.woocommerce button.button`,
   `.woocommerce a.button.alt` — specyficzność 0,2,1 / 0,3,1), który wygrywa
   z naszą pojedynczą klasą (0,1,0) na KAŻDYM przycisku renderowanym przez
   WC (add_to_cart_button, place_order itd. — wszędzie, gdzie dokładamy
   .lb-btn do natywnego markupu, nie budujemy elementu od zera). Stąd
   !important na kolorach/tle/obramowaniu w całym tym blok — jedyny
   niezawodny sposób wygrania z pluginem, którego selektorów nie
   kontrolujemy. Nie usuwać przy porządkowaniu CSS.
   ========================================================================= */

.lb-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: .5em;
	font-family: var(--lb-font-body) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	padding: 18px 30px !important;
	border: var(--lb-border-width) solid var(--lb-ink) !important;
	border-radius: var(--lb-radius) !important;
	background: transparent !important;
	color: var(--lb-ink) !important;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.lb-btn:disabled,
.lb-btn[aria-disabled="true"] {
	opacity: .4;
	cursor: not-allowed;
}

.lb-btn--primary {
	background: var(--lb-ink) !important;
	border-color: var(--lb-ink) !important;
	color: var(--lb-ecru) !important;
}
.lb-btn--primary:hover:not(:disabled) {
	background: var(--lb-green) !important;
	border-color: var(--lb-green) !important;
}

.lb-btn--outline {
	background: transparent !important;
	border-color: var(--lb-ink) !important;
	color: var(--lb-ink) !important;
}
.lb-btn--outline:hover:not(:disabled) {
	background: var(--lb-ink) !important;
	color: var(--lb-ecru) !important;
}

.lb-btn--outline-on-dark {
	background: transparent !important;
	border-color: var(--lb-ecru) !important;
	color: var(--lb-ecru) !important;
}
.lb-btn--outline-on-dark:hover:not(:disabled) {
	background: var(--lb-ecru) !important;
	color: var(--lb-ink) !important;
}

/* Wypełniony ecru na zielonym tle — sekcja Motylek ("Dodaj do koszyka" /
   "Do koszyka · 21 zł"). Hover INK (prototyp linie 232, 249). */
.lb-btn--ecru {
	background: var(--lb-ecru) !important;
	border-color: var(--lb-ecru) !important;
	color: var(--lb-ink) !important;
}
.lb-btn--ecru:hover:not(:disabled) {
	background: var(--lb-ink) !important;
	border-color: var(--lb-ink) !important;
	color: var(--lb-ecru) !important;
}

/* Zwykły podkreślony link na ciemnym tle (Motylek mobile "Szczegóły"). */
.lb-link-underline {
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--lb-font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lb-ecru);
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}

.lb-btn--amber-outline {
	background: transparent !important;
	border-color: var(--lb-amber) !important;
	color: var(--lb-amber) !important;
}
.lb-btn--amber-outline:hover:not(:disabled),
.lb-btn--amber-outline.is-active {
	background: var(--lb-amber) !important;
	color: var(--lb-ink) !important;
}

/* Wypełniony amber — WYŁĄCZNIE checkout CTA i newsletter CTA (jedyne dwa
   miejsca w designie z pełnym amber tłem, oba na ciemnym tle). Baza bez
   własnego hover — każde miejsce użycia ma swój, potwierdzony w prototypie:
   checkout → hover ink, newsletter → hover ecru. Nie dodawać wspólnego
   hover tutaj, żeby nie zgadywać za trzecie, nieistniejące jeszcze miejsce. */
.lb-btn--amber {
	background: var(--lb-amber) !important;
	border-color: var(--lb-amber) !important;
	color: var(--lb-ink) !important;
}

/* Checkout CTA "Zamawiam i płacę" — hover ECRU, tekst zostaje ink (prototyp,
   linia 454: style-hover="background:#efeadf"). Poprzednia wersja tego
   komentarza błędnie mówiła "ink" — sprawdzone bezpośrednio w źródle. */
.lb-btn--checkout-cta:hover:not(:disabled) {
	background: var(--lb-ecru) !important;
	border-color: var(--lb-ecru) !important;
	color: var(--lb-ink) !important;
}

/* Newsletter CTA "Zapisz mnie" — hover ECRU, tekst zostaje ink (prototyp,
   linia 534: style-hover="background:#efeadf"). */
.lb-btn--newsletter-cta:hover:not(:disabled) {
	background: var(--lb-ecru) !important;
	border-color: var(--lb-ecru) !important;
	color: var(--lb-ink) !important;
}

/* Stan błędu add-to-cart ("Najpierw wybierz rozmiar") — hover ciemniejsza
   czerwień, NIE zielony jak w prototypie (poprawka, patrz Faza 1). */
.lb-btn--error {
	background: var(--lb-error) !important;
	border-color: var(--lb-error) !important;
	color: var(--lb-ecru) !important;
}
.lb-btn--error:hover:not(:disabled) {
	background: var(--lb-error-hover) !important;
	border-color: var(--lb-error-hover) !important;
}

.lb-btn--full {
	width: 100% !important;
}

/* =========================================================================
   Inputy
   ========================================================================= */

.lb-input,
.lb-select,
.lb-textarea {
	appearance: none;
	width: 100%;
	background: transparent;
	border: var(--lb-border-width) solid var(--lb-ink);
	border-radius: var(--lb-radius);
	padding: 16px;
	font-family: var(--lb-font-body);
	font-size: 15px;
	color: var(--lb-ink);
}

/* Strzałka wskazująca, że to select, a nie wypełnione pole tekstowe.
   select.lb-input też objęty — część formularzy CF7 ma na <select>
   ustawioną klasę "lb-input" zamiast "lb-select" (config w treści CF7). */
.lb-select,
select.lb-input {
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23151515' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 14px;
}
.lb-select--on-dark {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23efeadf' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

.lb-input::placeholder,
.lb-textarea::placeholder {
	color: rgba(21, 21, 21, .45);
}

.lb-input--on-dark,
.lb-select--on-dark,
.lb-textarea--on-dark {
	border-color: var(--lb-ecru);
	color: var(--lb-ecru);
	background: transparent;
}
.lb-input--on-dark::placeholder,
.lb-textarea--on-dark::placeholder {
	color: var(--lb-muted-on-dark);
}

.lb-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
}

/* =========================================================================
   Karta produktu
   ========================================================================= */

/* Karta produktu — sklep, "Leć też z tym" (template-parts/product-card.php).
   Uwaga: BEZ obwódki wokół całej karty — border jest tylko na zdjęciu,
   reszta stoi bez ramki (zweryfikowane z markupu prototypu, sekcje Shop
   i "Leć też z tym", nie z domysłu). Osobny, mocniej obramowany wariant
   karty ("Powiedz to koszulką") ma swoje własne klasy niżej. */
.lb-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lb-card__media {
	position: relative;
	display: block;
	width: 100%;
	flex-shrink: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--lb-placeholder);
	border: var(--lb-border-width) solid var(--lb-ink);
	padding: 0;
}

.lb-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lb-card__media img.lb-card__img--secondary {
	opacity: 0;
	transition: opacity .3s ease;
}

/* Hover-swap tylko na urządzeniach z realnym wskaźnikiem myszy —
   zabezpieczenie przed "zawieszonym" hover na dotyku (iOS Safari),
   wykryte w teście prototypu. Patrz PLAN_WDROZENIA.md Faza 3. */
@media (hover: hover) and (pointer: fine) {
	.lb-card:hover .lb-card__img--secondary {
		opacity: 1;
	}
}

.lb-card__tag {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--lb-ecru);
	font-family: var(--lb-font-mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 5px 7px;
	border: var(--lb-border-width) solid var(--lb-ink);
}

.lb-card__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.lb-card__name {
	font-family: var(--lb-font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.25;
	margin: 0;
	background: none;
	border: 0;
	padding: 0;
	text-align: left;
	color: var(--lb-ink);
	text-decoration: none;
}

.lb-card__price {
	font-family: var(--lb-font-mono);
	font-weight: 500;
	font-size: 14px;
	white-space: nowrap;
}

/* WC renderuje ten link jako <a class="button add_to_cart_button ...">, więc
   jego własny `.woocommerce a.button` (0,2,1) bije naszą klasę bez elementu
   (0,2,0) — !important z tego samego powodu co w bloku "Przyciski" wyżej. */
.lb-card__cta.button {
	display: block !important;
	width: 100% !important;
	margin-top: auto !important;
	background: transparent !important;
	border: var(--lb-border-width) solid var(--lb-ink) !important;
	border-radius: 0 !important;
	padding: 12px !important;
	font-family: var(--lb-font-body) !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	color: var(--lb-ink) !important;
	text-decoration: none !important;
	cursor: pointer;
}
.lb-card__cta.button:hover {
	background: var(--lb-ink) !important;
	color: var(--lb-ecru) !important;
}

/* Karta "Powiedz to koszulką" — pełna ramka 1.5px, Anton nazwa w treści,
   pełnoszerokościowy czarny przycisk (prototyp linie 107-119). */
.lb-feature-card {
	display: flex;
	flex-direction: column;
	border: var(--lb-border-width) solid var(--lb-ink);
	background: var(--lb-ecru);
}

.lb-feature-card__media {
	position: relative;
	display: block;
	width: 100%;
	flex-shrink: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--lb-placeholder);
	border: 0;
	border-bottom: var(--lb-border-width) solid var(--lb-ink);
	padding: 0;
}
.lb-feature-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.lb-feature-card__media img.lb-card__img--secondary {
	opacity: 0;
	transition: opacity .3s ease;
}
@media (hover: hover) and (pointer: fine) {
	.lb-feature-card:hover .lb-card__img--secondary {
		opacity: 1;
	}
}

.lb-feature-card__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 16px;
}

.lb-feature-card__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.lb-feature-card__name {
	font-family: var(--lb-font-display);
	font-size: clamp(28px, 2.6vw, 40px);
	line-height: 1;
	text-transform: uppercase;
}

.lb-feature-card__price {
	font-family: var(--lb-font-mono);
	font-weight: 500;
	font-size: 14px;
	white-space: nowrap;
}

.lb-feature-card__cta {
	display: block;
	width: 100%;
	margin-top: auto;
	background: var(--lb-ink);
	border: 0;
	border-radius: 0;
	padding: 16px;
	font-family: var(--lb-font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
	color: var(--lb-ecru);
	text-decoration: none;
	cursor: pointer;
}
.lb-feature-card__cta:hover {
	background: var(--lb-green);
}

/* Placeholder "[ zdjęcie produktu ]" gdy produkt nie ma zdjęcia. */
.lb-card__placeholder,
.lb-feature-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 16px;
	text-align: left;
}
.lb-feature-card__placeholder {
	padding: 20px;
}
.lb-card__placeholder-name {
	font-family: var(--lb-font-serif);
	font-style: italic;
	font-size: 34px;
	line-height: 1;
}
.lb-feature-card__placeholder .lb-card__placeholder-name {
	font-size: 48px;
}

/* =========================================================================
   Chip filtra
   ========================================================================= */

.lb-chip {
	display: inline-flex;
	align-items: center;
	font-family: var(--lb-font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 10px 18px;
	border: var(--lb-border-width) solid var(--lb-ink);
	background: transparent;
	color: var(--lb-ink);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.lb-chip.is-active {
	background: var(--lb-ink);
	color: var(--lb-ecru);
}

/* =========================================================================
   Stepper ilości
   ========================================================================= */

.lb-stepper {
	display: inline-flex;
	align-items: stretch;
	border: var(--lb-border-width) solid var(--lb-ink);
}

.lb-stepper__btn {
	width: 44px;
	background: transparent;
	border: none;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: var(--lb-ink);
}

.lb-stepper__btn:hover {
	background: var(--lb-ink);
	color: var(--lb-ecru);
}

.lb-stepper__value {
	min-width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--lb-font-mono);
	font-size: 14px;
	border-left: var(--lb-border-width) solid var(--lb-ink);
	border-right: var(--lb-border-width) solid var(--lb-ink);
}

/* =========================================================================
   Warianty (rozmiar / kolor) — kwadratowe przyciski
   ========================================================================= */

.lb-variant-btn {
	min-width: 56px;
	height: 48px;
	padding-inline: 12px;
	border: var(--lb-border-width) solid var(--lb-ink);
	background: transparent;
	color: var(--lb-ink);
	font-family: var(--lb-font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}

.lb-variant-btn.is-selected {
	background: var(--lb-ink);
	color: var(--lb-ecru);
}

/* Wariant na ciemnym tle (tablica odlotów). */
.lb-variant-btn--on-dark {
	min-width: 48px;
	height: 44px;
	padding-inline: 14px;
	border-color: var(--lb-ecru);
	color: var(--lb-ecru);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.lb-variant-btn--on-dark:hover {
	background: var(--lb-amber);
	border-color: var(--lb-amber);
	color: var(--lb-ink);
}

/* =========================================================================
   Sekcja feature (zdjęcie + tekst) — template-parts/feature-section.php
   ========================================================================= */

.lb-feature {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.lb-feature__media {
	aspect-ratio: 1;
	background: var(--lb-placeholder);
	overflow: hidden;
	border: var(--lb-border-width) solid var(--lb-ink);
}
.lb-feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lb-feature__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.lb-feature__spec {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: auto;
	justify-content: start;
	border: var(--lb-border-width) solid var(--lb-ink);
	font-family: var(--lb-font-mono);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.lb-feature__spec span {
	padding: 12px 16px;
	border-right: var(--lb-border-width) solid var(--lb-ink);
}
.lb-feature__spec span:last-child {
	border-right: 0;
}

.lb-feature__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* =========================================================================
   Wiersz "Tablicy odlotów" — template-parts/board-row.php
   ========================================================================= */

.lb-board-row {
	border-bottom: 1px solid var(--lb-divider-on-dark);
}

.lb-board-row__main {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 20px;
	align-items: center;
	padding: 14px 0;
}

.lb-board-row__thumb {
	width: 72px;
	height: 72px;
	flex-shrink: 0;
	background: var(--lb-thumb-dark);
	overflow: hidden;
	display: block;
}
.lb-board-row__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lb-board-row__info {
	flex: 1 1 220px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--lb-ecru);
	text-decoration: none;
}
.lb-board-row__info:hover .lb-board-row__name {
	color: var(--lb-amber);
}

.lb-board-row__code {
	font-family: var(--lb-font-mono);
	font-weight: 500;
	font-size: 13px;
	color: var(--lb-amber);
	letter-spacing: .08em;
}

.lb-board-row__name {
	font-family: var(--lb-font-display);
	font-size: clamp(20px, 2.4vw, 32px);
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: .01em;
}

.lb-board-row__status {
	font-family: var(--lb-font-mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lb-status-green);
}
.lb-board-row__status--closed {
	color: var(--lb-error);
}

.lb-board-row__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-left: auto;
}

@media (max-width: 759.98px) {
	/* Gdy wiersz się łamie, .lb-board-row__actions ląduje na nowej linii —
	   margin-left:auto pcha go wtedy do prawej krawędzi. Design chce cenę
	   wyrównaną z tekstem statusu (zielona kropka), czyli o szerokość
	   miniaturki + odstęp (72px + 20px gap z .lb-board-row__main). */
	.lb-board-row__actions {
		flex-basis: 100%;
		margin-left: 92px;
	}
}

.lb-board-row__price {
	font-family: var(--lb-font-mono);
	font-weight: 500;
	font-size: 16px;
	white-space: nowrap;
	color: var(--lb-ecru);
}

.lb-board-row__toggle.lb-btn {
	width: 172px;
	padding: 14px 12px;
	white-space: nowrap;
	text-decoration: none;
}

.lb-board-row__variants {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 0 0 16px;
}
.lb-board-row__variants[hidden] {
	display: none;
}
.lb-board-row__variants-label {
	color: var(--lb-muted-on-dark);
	margin-right: 8px;
}

/* =========================================================================
   Tabela rozmiarów (renderowana z ACF term meta, patrz inc/woocommerce-hooks.php)
   ========================================================================= */

.lb-size-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--lb-font-mono);
	font-size: 13px;
}

.lb-size-table th,
.lb-size-table td {
	border: var(--lb-border-width) solid var(--lb-ink);
	padding: 10px 14px;
	text-align: center;
}

.lb-size-table thead th {
	background: var(--lb-ink);
	color: var(--lb-ecru);
}

/* =========================================================================
   Podziałki (dividers)
   ========================================================================= */

.lb-divider {
	border: none;
	border-top: 1px solid var(--lb-divider-on-light);
}

.lb-divider--on-dark {
	border-top-color: var(--lb-divider-on-dark);
}

.lb-divider--dashed {
	border: none;
	border-top: 1.5px dashed var(--lb-divider-on-light);
}

.lb-divider--dashed.lb-divider--on-dark {
	border-top-color: var(--lb-divider-on-dark);
}

/* =========================================================================
   Trust strip (karta produktu)
   ========================================================================= */

.lb-trust-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: var(--lb-border-width) solid var(--lb-ink);
}

.lb-trust-strip__cell {
	padding: 14px 12px;
	text-align: center;
	font-family: var(--lb-font-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-left: var(--lb-border-width) solid var(--lb-ink);
}
.lb-trust-strip__cell:first-child {
	border-left: none;
}

@media (max-width: 480px) {
	.lb-trust-strip {
		grid-template-columns: 1fr;
	}
	.lb-trust-strip__cell {
		border-left: none;
		border-top: var(--lb-border-width) solid var(--lb-ink);
	}
	.lb-trust-strip__cell:first-child {
		border-top: none;
	}
}