/*
 * Karta produktu (woocommerce/content-single-product.php) – Figma "Karta produktu" / mobile.
 * Desktop od 64rem: lewa kolumna (breadcrumbs, galeria, sekcje), prawa – zakup, przyklejona przy przewijaniu.
 * Pod spodem: produkty do zestawu (karty z product-card.css) i features. Mobile: pasek zakupu na dole ekranu.
 * Kolory, fonty i rozmiary z :root (tokens).
 */

.product-page {
	--product-line: var(--color-text-strong);
	--product-field: color-mix(in srgb, var(--color-muted) 45%, var(--color-background));
	--product-sale: #8b1d18; /* Etykieta "promocja" – ciemna czerwień z projektu. */

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"crumbs"
		"gallery"
		"summary"
		"sections";
	gap: 1.5rem;
	padding-block: clamp(1rem, 0.5rem + 1.5vw, 2rem) 0;
	color: var(--color-text);
}

.product-page__crumbs { grid-area: crumbs; }
.product-page__gallery { grid-area: gallery; min-width: 0; }
.product-page__summary { grid-area: summary; min-width: 0; }
.product-page__sections { grid-area: sections; min-width: 0; }

/* ---------- Breadcrumbs: kreska od lewej krawędzi ekranu, tekst pod nią do prawej ---------- */

.product-page__crumbs {
	width: calc(100% + var(--page-pad));
	margin-left: calc(var(--page-pad) * -1);
	padding-top: 0.375rem;
	border-top: 1px solid var(--product-line);
	text-align: right;
}

.product-page__crumbs .woocommerce-breadcrumb {
	color: var(--color-text);
	font: 300 0.75rem / 1.4 var(--font-body);
}

.product-page__crumbs a { text-decoration: none; }
.product-page__crumbs a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- Galeria ---------- */

.product-gallery__main {
	display: grid;
	place-items: center;
	aspect-ratio: 10 / 7;
	overflow: hidden;
}

.product-gallery__main img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply; /* Białe tło zdjęcia znika. */
}

.product-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
	gap: 0.75rem;
	max-width: 30rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.product-gallery__thumb {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-bottom: 1px solid transparent;
	background: none;
	cursor: pointer;
	opacity: 0.65;
	transition: opacity var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.product-gallery__thumb:hover,
.product-gallery__thumb.is-active { opacity: 1; }
.product-gallery__thumb.is-active { border-bottom-color: var(--product-line); }

.product-gallery__thumb:focus-visible { outline: 2px solid var(--product-line); outline-offset: 2px; }

.product-gallery__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 10 / 7;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* ---------- Zakup ---------- */

.product-labels {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.product-label {
	padding: 0.1875rem 0.5rem;
	background: var(--color-text);
	color: var(--color-background);
	font: 300 0.75rem / 1.3 var(--font-body);
}

.product-label--sale { background: var(--product-sale); }

.product-label--light {
	padding-block: calc(0.1875rem - 1px);
	border: 1px solid var(--color-text);
	background: var(--color-background);
	color: var(--color-text);
}

.product-page h1.product-page__title {
	margin: 0 0 1rem;
	font: 500 clamp(1.75rem, 1.5rem + 1vw, 2.5rem) / 1.1 var(--font-heading);
	text-align: left;
}

.product-features {
	margin: 0 0 1.75rem;
	color: var(--color-text);
	font: 300 0.8125rem / 1.4 var(--font-body);
}

.product-features > :first-child { margin-top: 0; }
.product-features > :last-child { margin-bottom: 0; }
.product-features p { margin: 0 0 0.5rem; }

.product-features ul {
	display: grid;
	gap: 0.25rem;
	margin: 0 0 0.5rem;
	padding: 0 0 0 0.75rem;
	list-style: none;
}

.product-features li {
	display: flex;
	gap: 0.5rem;
}

.product-features li::before {
	content: "";
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	margin-top: 0.125rem;
	background: currentColor;
	-webkit-mask: url("../img/check.svg") center / contain no-repeat;
	mask: url("../img/check.svg") center / contain no-repeat;
}

/* Wybór rozmiaru: "Tabela rozmiarów" nad listą po prawej. */
.product-buy__variations {
	display: grid;
	gap: 0.75rem;
	max-width: 24rem;
}

.product-buy__variation-head {
	display: flex;
	justify-content: flex-end;
	min-height: 1.125rem;
	margin-bottom: 0.25rem;
}

.product-buy__size-link {
	color: var(--color-text);
	font: 300 0.75rem / 1.4 var(--font-body);
	text-underline-offset: 0.2em;
}

.product-buy select {
	display: block;
	width: 100%;
	min-height: 2.5rem;
	padding: 0.5rem 2.5rem 0.5rem 0.75rem;
	border: 1px solid var(--product-field);
	border-radius: 0;
	background: var(--color-background) url("../img/chevron-down.svg") right 0.75rem center / 18px no-repeat;
	color: var(--color-text-strong);
	font: 300 0.875rem / 1.5 var(--font-body);
	cursor: pointer;
	appearance: none;
	transition: border-color var(--dur-fast) ease;
}

.product-buy select:hover { border-color: var(--color-text); }
.product-buy select:focus-visible { border-color: var(--product-line); outline: none; box-shadow: 0 0 0 1px var(--product-line); }

/* Lista rozmiarów: "EU 40 | cena, dostępność" (solitstore_size_picker, product.js). */
.size-picker {
	--stock-ok: #2e7d32; /* "Wysyłka w 24 h" – zielony z projektu. */

	position: relative;
}

.size-picker__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--product-field);
	background: var(--color-background);
	color: var(--color-text-strong);
	font: 300 0.875rem / 1.4 var(--font-body);
	text-align: left;
	cursor: pointer;
	transition: border-color var(--dur-fast) ease;
}

.size-picker__toggle:hover,
.size-picker.is-open .size-picker__toggle { border-color: var(--color-text); }

.size-picker__toggle:focus-visible { outline: 2px solid var(--product-line); outline-offset: 2px; }

.size-picker.has-value .size-picker__value { font-weight: 400; }

.size-picker__toggle .icon {
	width: 20px;
	height: 20px;
	transition: transform var(--dur) var(--ease-out);
}

.size-picker.is-open .size-picker__toggle .icon { transform: rotate(180deg); }

.size-picker__list {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 20;
	max-height: min(24rem, 60vh);
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--product-field);
	border-top: 0;
	background: var(--color-background);
	box-shadow: 0 0.75rem 1.5rem rgb(0 0 0 / 0.08);
	list-style: none;
	animation: size-picker-in var(--dur-fast) var(--ease-out);
}

@keyframes size-picker-in {
	from {
		opacity: 0;
		transform: translateY(-0.25rem);
	}
}

.size-picker__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.625rem 0.875rem;
	color: var(--color-text-strong);
	cursor: pointer;
	transition: background-color var(--dur-fast) ease;
}

.size-picker__option + .size-picker__option { border-top: 1px solid var(--color-border); }

.size-picker__option:hover,
.size-picker__option:focus,
.size-picker__option[aria-selected="true"] {
	background: var(--color-surface);
	outline: none;
}

.size-picker__size { font: 400 0.9375rem / 1.3 var(--font-body); }

.size-picker__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.125rem;
	text-align: right;
}

.size-picker__price { font: 300 0.875rem / 1.3 var(--font-body); }

.size-picker__stock {
	color: var(--color-muted);
	font: 300 0.75rem / 1.3 var(--font-body);
}

.size-picker__stock--instock { color: var(--stock-ok); }

/* Rozmiar, którego WooCommerce nie pozwala kupić. */
.size-picker__option.is-disabled {
	color: var(--color-muted);
	cursor: not-allowed;
}

.size-picker__option.is-disabled .size-picker__size { text-decoration: line-through; }
.size-picker__option.is-disabled:hover { background: none; }

.product-buy__hint {
	margin: 0.5rem 0 0;
	color: var(--product-sale);
	font: 400 0.75rem / 1.4 var(--font-body);
}

/* Cena: stara przekreślona mniejsza, nowa duża. */
.product-buy__price-wrap { margin-top: 2rem; }

.product-buy__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	margin: 0;
	color: var(--color-text-strong);
	font: 400 clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem) / 1.2 var(--font-body);
}

.product-buy__price del {
	order: -1;
	color: var(--color-muted);
	font-size: 0.7em;
	font-weight: 300;
}

.product-buy__price ins { text-decoration: none; }

.product-buy__price .screen-reader-text { position: absolute; }

.product-buy__delivery {
	margin: 0.5rem 0 0;
	color: var(--color-muted);
	font: 300 0.75rem / 1.4 var(--font-body);
}

/* Cenę wariantu pokazuje główna cena (product.js) – w bloku wariantu zostaje tylko dostępność. */
.product-buy .woocommerce-variation-price,
.product-buy .woocommerce-variation-description:empty { display: none; }

.product-buy .woocommerce-variation-availability .stock {
	margin: 0.75rem 0 0;
	color: var(--color-muted);
	font: 300 0.75rem / 1.4 var(--font-body);
}

.product-buy .stock.out-of-stock { color: var(--product-sale); }

.product-buy__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.product-buy__add { justify-content: center; }

/* Licznik − 1 +. */
.qty-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--product-field);
}

.qty-stepper__btn {
	width: 2rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-text-strong);
	font: 300 1rem / 1 var(--font-body);
	cursor: pointer;
	transition: background-color var(--dur-fast) ease;
}

.qty-stepper__btn:hover { background: var(--color-surface); }
.qty-stepper__btn:focus-visible { outline: 2px solid var(--product-line); outline-offset: -2px; }

.qty-stepper .quantity { display: flex; }

.qty-stepper input.qty {
	width: 2.25rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-text-strong);
	font: 300 0.875rem / 1 var(--font-body);
	text-align: center;
	-moz-appearance: textfield;
}

.qty-stepper input.qty:focus { outline: none; }

.qty-stepper input.qty::-webkit-inner-spin-button,
.qty-stepper input.qty::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.product-page__note {
	margin: 1rem 0 0;
	color: var(--color-muted);
	font: 300 0.75rem / 1.4 var(--font-body);
}

.product-payments {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

/* Każde logo w jednakowej ramce, dopasowane bez przycinania (pliki mają różne proporcje i marginesy). */
.product-payments__item {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 1.75rem;
	padding: 0.25rem 0.3125rem;
	border: 1px solid var(--color-border);
	border-radius: 0.25rem;
	background: var(--color-background);
}

.product-payments img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.product-meta {
	display: grid;
	gap: 0.25rem;
	margin: 1.25rem 0 0;
	color: var(--color-muted);
	font: 300 0.6875rem / 1.4 var(--font-body);
	text-transform: uppercase;
}

.product-meta div { display: flex; gap: 0.25rem; }
.product-meta dd { margin: 0; }
.product-meta a { color: inherit; text-decoration: none; }
.product-meta a:hover { text-decoration: underline; }

/* Komunikaty po nieudanym dodaniu (minicart.js wstawia je nad formularzem). */
.product-buy .solitstore-notices :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) {
	margin: 0;
	padding: 0.75rem 1rem;
	border-left: 2px solid var(--product-sale);
	background: var(--color-surface);
	color: var(--color-text-strong);
	font: 300 0.8125rem / 1.5 var(--font-body);
	list-style: none;
}

/* ---------- Sekcje rozwijane ---------- */

.product-section {
	border-top: 1px solid var(--product-line);
}

.product-section:last-child { border-bottom: 1px solid var(--product-line); }

.product-section__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;
	color: var(--color-text-strong);
	font: 400 1rem / 1.3 var(--font-body);
	list-style: none;
	cursor: pointer;
}

.product-section__title::-webkit-details-marker { display: none; }

.product-section__title .icon {
	width: 20px;
	height: 20px;
	transition: transform var(--dur) var(--ease-out);
}

.product-section[open] .product-section__title .icon { transform: rotate(180deg); }

.product-section__body {
	padding-bottom: 1.25rem;
	color: var(--color-text);
	font: 300 0.8125rem / 1.6 var(--font-body);
}

.product-section__body > :first-child { margin-top: 0; }
.product-section__body > :last-child { margin-bottom: 0; }

.product-section__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.75rem;
}

.product-section__body :is(th, td) {
	padding: 0.375rem 0.5rem;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
}

/* Płynne rozwijanie sekcji, gdzie przeglądarka to obsługuje. */
@supports (interpolate-size: allow-keywords) {
	.product-section { interpolate-size: allow-keywords; }

	.product-section::details-content {
		height: 0;
		overflow: clip;
		transition: height var(--dur) var(--ease-out), content-visibility var(--dur) allow-discrete;
	}

	.product-section[open]::details-content { height: auto; }
}

/* ---------- Tabela rozmiarów: okno i sekcja pod galerią (template-parts/size-table.php) ---------- */

.product-buy__size-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-text);
	font: 300 0.75rem / 1.4 var(--font-body);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.size-dialog {
	width: min(100% - 2rem, 40rem);
	max-height: min(100% - 2rem, 54rem);
	padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
	border: 0;
	background: var(--color-background);
	color: var(--color-text);
	box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.18);
}

.size-dialog::backdrop {
	background: rgb(0 0 0 / 0.45);
	backdrop-filter: blur(3px);
}

.size-dialog[open] { animation: size-dialog-in var(--dur) var(--ease-out); }

@keyframes size-dialog-up {
	from { transform: translateY(100%); }
}

@keyframes size-dialog-in {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
}

.size-dialog__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: inline-flex;
	padding: 0.25rem;
	border: 0;
	background: none;
	color: var(--color-text-strong);
	cursor: pointer;
}

.size-table__eyebrow {
	margin: 0 0 0.75rem;
	color: var(--color-text);
	font: 400 0.6875rem / 1.4 var(--font-body);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.size-table__title {
	margin: 0 0 0.75rem;
	color: var(--color-text-strong);
	font: 300 clamp(1.5rem, 1.2rem + 1.2vw, 2rem) / 1.2 var(--font-body);
}

.size-table__lead {
	margin: 0;
	color: var(--color-text-strong);
	font: 300 0.875rem / 1.5 var(--font-body);
}

.size-table__note {
	margin: 0.25rem 0 0;
	color: var(--color-muted);
	font: 300 0.75rem / 1.4 var(--font-body);
}

.size-table__units {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.375rem;
	margin: 0.75rem 0 0.5rem;
	color: var(--color-text);
	font: 300 0.75rem / 1.4 var(--font-body);
}

.size-table__units button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-muted);
	font: inherit;
	cursor: pointer;
}

.size-table__units button[aria-pressed="true"] {
	color: var(--color-text-strong);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.size-table__scroll { overflow-x: auto; }

.size-table__table {
	width: 100%;
	border-collapse: collapse;
	color: var(--color-text-strong);
	font: 300 0.8125rem / 1.4 var(--font-body);
}

.size-table__table th {
	padding: 0.625rem 0.75rem;
	border-bottom: 1px solid var(--color-text-strong);
	font-weight: 500;
	text-align: left;
}

.size-table__table td {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--color-border);
}

.size-table__howto { margin-top: 1.75rem; }

.size-table__howto-title {
	margin: 0 0 1rem;
	color: var(--color-text-strong);
	font: 300 1.25rem / 1.3 var(--font-body);
}

.size-table__howto-body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
}

.size-table__howto-image {
	flex: none;
	width: 10rem;
	height: auto;
}

.size-table__steps {
	flex: 1 1 14rem;
	margin: 0;
	padding-left: 1.125rem;
	color: var(--color-text-strong);
	font: 300 0.8125rem / 1.6 var(--font-body);
}

.size-table__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.75rem;
}

.size-table__help {
	margin: 0;
	color: var(--color-text-strong);
	font: 300 0.75rem / 1.4 var(--font-body);
}

.size-table__help a { margin-left: 0.25rem; text-underline-offset: 0.2em; }

.size-table__back { justify-content: center; }

/* W sekcji pod galerią: bez nagłówka okna, opis mniejszy. */
.product-section__body .size-table__lead { font-size: 0.8125rem; }
.product-section__body .size-table__howto-title { font-size: 1rem; }

/*
 * Okno na desktopie: szerokie, bez przewijania – nagłówek na całą szerokość, tabela po lewej,
 * "Jak zmierzyć stopę?" po prawej, stopka na dole.
 */
@media (min-width: 48rem) {
	.size-dialog {
		width: min(100% - 3rem, 60rem);
		padding: 2rem 2.5rem;
	}

	.size-table--dialog {
		display: grid;
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		grid-auto-flow: row dense; /* "Jak zmierzyć" wskakuje obok przełącznika i tabeli, choć w HTML jest pod nimi. */
		column-gap: 3rem;
		align-items: start;
	}

	.size-table--dialog > * { grid-column: 1 / -1; }

	.size-table--dialog .size-table__units,
	.size-table--dialog .size-table__scroll { grid-column: 1; }

	.size-table--dialog .size-table__units { margin-top: 1rem; }

	.size-table--dialog .size-table__howto {
		grid-column: 2;
		grid-row: span 2;
		margin-top: 1rem;
		padding-left: 2rem;
		border-left: 1px solid var(--color-border);
	}

	.size-table--dialog .size-table__howto-body {
		flex-direction: column;
		align-items: flex-start;
	}

	.size-table--dialog .size-table__table td { padding-block: 0.375rem; }
	.size-table--dialog .size-table__table th { padding-block: 0.5rem; }

	.size-table--dialog .size-table__footer {
		margin-top: 1.5rem;
		padding-top: 1.25rem;
		border-top: 1px solid var(--color-border);
	}
}

@media (max-width: 47.999rem) {
	/* Pełny ekran, tabela mieści się w szerokości (bez bocznego przewijania). */
	.size-dialog {
		width: 100%;
		max-width: none;
		height: 100dvh;
		max-height: none;
		margin: 0;
		padding: 1.25rem var(--page-pad) calc(1.25rem + env(safe-area-inset-bottom, 0px));
		box-shadow: none;
	}

	.size-dialog[open] { animation-name: size-dialog-up; }

	.size-table__title { padding-right: 2.5rem; }

	.size-table__scroll { overflow: visible; }

	.size-table__table { font-size: 0.75rem; }

	.size-table__table :is(th, td) {
		padding-inline: 0.375rem;
		overflow-wrap: anywhere;
	}

	.size-table__table :is(th, td):first-child { padding-left: 0; }
	.size-table__table :is(th, td):last-child { padding-right: 0; }

	.size-table__howto-image { width: 7.5rem; }

	.size-table__back { width: 100%; }
}

/* ---------- Produkty do zestawu ---------- */

/* Odstęp między sekcjami: produkt → zestaw → features. */
:root { --product-gap: clamp(5rem, 3rem + 5vw, 9rem); }

.product-related { margin-top: var(--product-gap); }

/* Tytuł nad kartami, kreska od lewej krawędzi ekranu. */
.product-related__title { margin: 0 0 1.5rem; }

.product-related__title > span {
	display: block;
	width: fit-content;
	min-width: calc(var(--page-pad) + clamp(9rem, 14vw, 14rem));
	margin-left: calc(var(--page-pad) * -1);
	padding: 0 1rem 0.5rem var(--page-pad);
	border-bottom: 1px solid var(--product-line, var(--color-text-strong));
	color: var(--color-text-strong);
}

.product-related__title > .product-related__label--mobile { display: none; }

/* ---------- Features ---------- */

.product-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	margin: var(--product-gap) 0 0;
	padding: 0;
	list-style: none;
}

.product-trust__item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem clamp(1rem, 2vw, 1.75rem);
}

.product-trust__item:first-child { padding-left: 0; }
.product-trust__item + .product-trust__item { border-left: 1px solid var(--color-border); }

.product-trust__icon {
	flex: none;
	width: 3rem;
	height: 3rem;
}

.product-trust__text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.product-trust__title {
	color: var(--color-text-strong);
	font: 400 0.9375rem / 1.3 var(--font-body);
}

.product-trust__desc {
	color: var(--color-muted);
	font: 300 0.75rem / 1.4 var(--font-body);
}

/* ---------- Opinie (shortcode wtyczki, template-parts/home-reviews.php) ---------- */

/* Sekcja ma .container, a strona już jest w kontenerze – bez podwójnego paddingu. */
.single-product .home-reviews {
	margin-top: var(--product-gap);
	padding-inline: 0;
}

.single-product .home-reviews__hint {
	margin: 0;
	padding: 3rem 1.5rem;
	border: 1px dashed var(--color-border);
	color: var(--color-muted);
	font: 300 0.875rem / 1.5 var(--font-body);
	text-align: center;
}

/* ---------- Pasek zakupu na dole (mobile i tablet) ---------- */

.product-sticky {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 40;
	display: none;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.625rem var(--page-pad) calc(0.625rem + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--color-border);
	background: var(--color-background);
	box-shadow: 0 -0.5rem 1.5rem rgb(0 0 0 / 0.06);
	transform: translateY(100%);
	visibility: hidden;
	transition: transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}

.product-sticky.is-visible {
	transform: none;
	visibility: visible;
	transition: transform var(--dur) var(--ease-out), visibility 0s;
}

.product-sticky__info {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	min-width: 0;
}

/* Drugi rząd: rozmiar (lista otwiera się w górę) i "Dodaj do koszyka". */
.product-sticky__actions {
	display: flex;
	gap: 0.5rem;
}

/* Z listą rozmiarów: rozmiar ~40%, przycisk ~60%, ta sama wysokość. */
.product-sticky__actions:has(.size-picker) {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

.product-sticky .size-picker { min-width: 0; }

.product-sticky .size-picker__toggle {
	height: 100%;
	min-height: 3rem;
	padding: 0.375rem 0.625rem;
	font-size: 0.8125rem;
}

.product-sticky .size-picker__toggle { justify-content: flex-start; gap: 0.5rem; }
.product-sticky .size-picker__toggle .icon--chevron { width: 16px; height: 16px; margin-left: auto; }
.product-sticky .size-picker__toggle .icon--ruler { width: 18px; height: 18px; }

.icon--ruler {
	width: 20px;
	height: 20px;
	-webkit-mask-image: url("../img/ruler.svg");
	mask-image: url("../img/ruler.svg");
}

.size-picker__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.15;
}

.size-picker__caption {
	color: var(--color-muted);
	font: 300 0.6875rem / 1.2 var(--font-body);
}

.product-sticky .size-picker__value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Bez wyboru: wartość wyróżniona, żeby przyciągała uwagę. */
.product-sticky .size-picker:not(.has-value) .size-picker__value { text-decoration: underline; text-underline-offset: 0.2em; }

.product-sticky .size-picker__list {
	top: auto;
	right: auto;
	bottom: calc(100% + 0.625rem);
	width: calc(100vw - 2 * var(--page-pad));
	max-height: min(22rem, 60dvh);
	border-top: 1px solid var(--product-field, var(--color-border));
	box-shadow: 0 -0.75rem 1.5rem rgb(0 0 0 / 0.1);
}

.product-sticky__name {
	overflow: hidden;
	color: var(--color-text-strong);
	font: 400 0.8125rem / 1.3 var(--font-body);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.product-sticky__price {
	color: var(--color-text-strong);
	font: 500 0.875rem / 1.3 var(--font-body);
}

.product-sticky__price del {
	margin-right: 0.375rem;
	color: var(--color-muted);
	font-weight: 300;
}

.product-sticky__price ins { text-decoration: none; }

.product-sticky__btn {
	flex: 1;
	justify-content: center;
	min-width: 0;
	min-height: 3rem;
	padding-inline: 0.75rem;
	white-space: nowrap;
}

/* ---------- Tablet i mobile ---------- */

@media (max-width: 63.999rem) {
	.product-sticky { display: flex; }

	/* Pasek nie zasłania stopki. */
	body.has-sticky-buy { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)); }

	.product-related { --cards: 3.25; }

	.product-related__title { margin-bottom: 1.25rem; }
	.product-related__title > span { width: min(80vw, 100%); }
	.product-related__title > .product-related__label--desktop { display: none; }
	.product-related__title > .product-related__label--mobile { display: block; }

	.product-related .product-related__list {
		display: flex;
		gap: 0.375rem;
		margin-inline: calc(var(--page-pad) * -1);
		padding-inline: var(--page-pad);
		overflow-x: auto;
		scroll-padding-inline: var(--page-pad);
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.product-related__item {
		flex: 0 0 calc((100vw - var(--page-pad)) / var(--cards) - 0.25rem);
		scroll-snap-align: start;
	}

	.product-trust__item {
		padding: 1.25rem 0;
	}

	.product-trust__item + .product-trust__item {
		border-top: 1px solid var(--color-border);
		border-left: 0;
	}
}

@media (max-width: 47.999rem) {
	.product-related { --cards: 1.75; }

	.product-buy__variations { max-width: none; }

	.product-buy__actions { flex-wrap: nowrap; }
	.product-buy__add { flex: 1; }
}

/* ---------- Desktop ---------- */

@media (min-width: 64rem) {
	.product-page {
		grid-template-columns: minmax(0, 46fr) minmax(0, 40fr);
		grid-template-areas:
			"crumbs summary"
			"gallery summary"
			"sections summary";
		grid-template-rows: auto auto 1fr;
		column-gap: clamp(3rem, 9vw, 9rem);
		row-gap: 1rem;
	}

	.product-page__crumbs {
		width: fit-content;
		min-width: calc(var(--page-pad) + 14rem);
		padding-left: var(--page-pad);
	}

	.product-page__summary {
		position: sticky;
		top: var(--scroll-offset);
		align-self: start;
		max-width: 32rem;
		padding-top: 1rem;
	}

	.product-page__sections { margin-top: 3rem; }

	.product-buy__add { min-width: 10rem; }
}

@media (prefers-reduced-motion: reduce) {
	.product-sticky,
	.product-sticky.is-visible { transition: none; }
}

/* ---------- "Powiadom mnie" przy wyprzedanym rozmiarze (funkcja WooCommerce) ---------- */

.product-page .wc_bis_form {
	margin-top: 1.25rem;
	padding: 1rem;
	border: 1px solid var(--color-border);
}

.product-page .wc_bis_form h3 {
	margin: 0 0 0.75rem;
	color: var(--color-text-strong);
	font: 400 0.875rem / 1.4 var(--font-body);
}

.product-page .wc_bis_form__form-row {
	display: flex;
	gap: 0.5rem;
}

.product-page .wc_bis_form__input {
	flex: 1;
	min-width: 0;
	min-height: 2.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--product-field);
	border-radius: 0;
	font: 300 0.875rem / 1.5 var(--font-body);
}

.product-page .wc_bis_form__input:focus { border-color: var(--product-line); outline: none; box-shadow: 0 0 0 1px var(--product-line); }

.product-page .wc_bis_form__button {
	flex: none;
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--btn-secondary);
	border-radius: 0;
	background: none;
	color: var(--btn-secondary);
	font: 500 0.875rem / 1.5 var(--font-body);
	cursor: pointer;
	transition: background-color var(--dur) ease, color var(--dur) ease;
}

.product-page .wc_bis_form__button:hover { background: var(--btn-secondary); color: var(--color-background); }