/* =========================================================================
   Bukowina B2B — konfigurator produktu złożonego
   Odwzorowanie projektu graficznego `design-v3` (Figma Make) na markupie
   WooCommerce + WooCommerce Composite Products.

   Mapowanie projekt → markup wtyczki:

   | design-v3            | element Composite Products          |
   |----------------------|-------------------------------------|
   | Anchor nav (taby)    | .composite_pagination               |
   | ConfigStep (karta)   | .composite_component                |
   | kółko z numerem      | .step_index                         |
   | siatka kafelków      | .component_options ul.products      |
   | SummaryPanel (prawa) | .bukowina-summary (tworzone w JS)   |

   Panel podsumowania nie istnieje w markupie wtyczki — cena, ilość i przycisk
   są osobnym rodzeństwem na końcu formularza. Grupuje je assets/js/configurator.js;
   tutaj tylko je stylujemy. Bez JS układ degraduje się do jednej kolumny.

   Ładowany warunkowo na is_product(), priorytet 99 — patrz inc/enqueue.php.
   ========================================================================= */

:root {
	/* Tokeny 1:1 z design-v3/src/app/App.tsx */
	--bk-choc-dark: #2b1a12;
	--bk-choc: #4a2c1a;
	--bk-cocoa: #7b4b2a;
	--bk-gold: #c9a24b;
	--bk-cream: #f6efe6;
	--bk-cream-deep: #ede5d8;
	--bk-tint: #fbf7f2;
	--bk-error: #b00020;
	--bk-card: #ffffff;

	--bk-border: rgba(43, 26, 18, 0.12);
	--bk-border-soft: rgba(43, 26, 18, 0.08);
	--bk-border-input: rgba(43, 26, 18, 0.2);

	--bk-radius: 0.5rem;
	--bk-shadow-sm: 0 1px 2px rgba(43, 26, 18, 0.06), 0 1px 3px rgba(43, 26, 18, 0.08);
	--bk-shadow-sel: 0 4px 12px rgba(201, 162, 75, 0.25);

	--bk-serif: 'Playfair Display', Georgia, serif;
	--bk-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--bk-panel: 22.5rem;
}

/* =========================================================================
   1. Reset tła i typografii karty produktu.
   ========================================================================= */

body.single-product,
body.single-product .site-main,
body.single-product .wc-wrapper {
	background: var(--bk-cream);
	color: var(--bk-choc-dark);
	font-family: var(--bk-sans);
}

.woocommerce div.product,
.woocommerce div.product .summary,
.woocommerce div.product .entry-summary,
.composite_form,
.composite_wrap,
.composite_component {
	background: transparent;
	color: var(--bk-choc-dark);
}

.composite_form,
.composite_form input,
.composite_form select,
.composite_form button {
	font-family: var(--bk-sans);
}

/* =========================================================================
   2. Układ strony produktu.
   W projekcie konfigurator zajmuje pełną szerokość, a duża galeria
   WooCommerce nie występuje — podgląd produktu siedzi w panelu po prawej.
   ========================================================================= */

.woocommerce div.product {
	display: block;
	width: var(--bukowina-shell, min(100% - 2rem, 75rem));
	margin-inline: auto;
	padding-block: clamp(1.5rem, 4vw, 2.5rem);
}

.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .summary,
.woocommerce div.product .entry-summary {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	clear: none !important;
}

/* Galeria trafia do panelu po prawej (klon w JS) — oryginał chowamy. */
.woocommerce div.product .woocommerce-product-gallery {
	display: none;
}

.woocommerce div.product .product_title:not(.composited_product_title) {
	margin: 0 0 0.4rem;
	font-family: var(--bk-serif);
	font-size: clamp(1.9rem, 4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: var(--bk-choc-dark);
}

/* Podpis pod tytułem — jak w projekcie („Ceny poglądowe…"). */
.bukowina-config-lead {
	margin: 0 0 2rem;
	font-size: 0.875rem;
	text-align: center;
	color: var(--bk-cocoa);
}

/* =========================================================================
   3. Nawigacja kroków — w projekcie to TABY z podkreśleniem, nie pigułki.

   Composite Products buduje efekt strzałek floatami, marginesami ujemnymi
   i pseudo-elementami. Punktowe reguły przegrywają specyficznością, więc
   najpierw zerujemy całe poddrzewo, a potem rysujemy taby od nowa.
   ========================================================================= */

.composite_form .composite_pagination {
	margin: 0 0 2.5rem;
	padding: 0;
	border: 0;
	background: none;
}

.composite_form .composite_pagination .pagination_elements_wrapper,
.composite_form .composite_pagination li.pagination_element,
.composite_form .composite_pagination .element_inner,
.composite_form .composite_pagination .element_index,
.composite_form .composite_pagination .element_title,
.composite_form .composite_pagination .element_link {
	float: none !important;
	position: static !important;
	inset: auto !important;
	transform: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	line-height: 1.4 !important;
	overflow: visible !important;
	text-indent: 0 !important;
	list-style: none !important;
}

.composite_form .composite_pagination *::before,
.composite_form .composite_pagination *::after {
	content: none !important;
	display: none !important;
}

.composite_form .composite_pagination ul.pagination_elements {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 !important;
	padding: 0 !important;
	border-bottom: 1px solid rgba(43, 26, 18, 0.15);
	list-style: none;
}

.composite_form .composite_pagination li.pagination_element {
	display: block !important;
}

/* Tab. Dolna krawędź jest przezroczysta i „zapala się" na złoto — dzięki
   temu aktywny tab nie przesuwa sąsiadów o 2px. */
.composite_form .composite_pagination .element_inner {
	display: block !important;
	padding: 0.75rem 1.25rem !important;
	border-bottom: 2px solid transparent !important;
	color: var(--bk-cocoa);
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

/* Projekt nie pokazuje numerów w nawigacji — tylko etykiety kroków. */
.composite_form .composite_pagination .element_index {
	display: none !important;
}

.composite_form .composite_pagination .element_link {
	color: inherit;
	font: inherit;
	text-decoration: none;
}

.composite_form .composite_pagination .element_inner:hover {
	color: var(--bk-choc-dark);
}

.composite_form .composite_pagination li.pagination_element_current .element_inner {
	border-bottom-color: var(--bk-gold) !important;
	color: var(--bk-gold);
}

.composite_form .composite_pagination .element_link.inactive {
	cursor: default;
}

/* =========================================================================
   4. Układ dwukolumnowy: kroki + przyklejony panel podsumowania.
   Panel powstaje w JS (assets/js/configurator.js). Gdy go nie ma, formularz
   zostaje jednokolumnowy i nic się nie psuje.
   ========================================================================= */

.woocommerce div.product form.cart.composite_form {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* Kontener tworzony w JS: [ kroki | panel ].
   Świadomie flexbox, nie grid — panel musi sięgać całej wysokości kolumny,
   żeby `position: sticky` miało po czym jechać, a liczba kroków jest zmienna.
   Na siatce wymagałoby to rozpięcia na nieznaną liczbę wierszy. */
.composite_form .bukowina-layout {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: stretch;
}

.composite_form .bukowina-steps {
	flex: 1 1 auto;
	min-width: 0;
}

@media (min-width: 1000px) {
	.composite_form .bukowina-layout {
		flex-direction: row;
		gap: 2rem;
		align-items: flex-start;
	}

	.composite_form .bukowina-summary {
		flex: 0 0 var(--bk-panel);
		width: var(--bk-panel);
		position: sticky;
		/* Nagłówek jest sticky — panel musi zaczynać się pod nim, także gdy
		   nagłówek urośnie (dłuższa nazwa marki, większa czcionka systemowa). */
		top: calc(var(--bukowina-header-h, 4rem) + 1.5rem);
	}
}

@media (min-width: 1280px) {
	:root {
		--bk-panel: 24rem;
	}
}

/* Odstęp między kartami kroków (w projekcie: space-y-6). */
.composite_form .composite_component + .composite_component {
	margin-top: 1.5rem;
}

/* =========================================================================
   5. Karta kroku (ConfigStep).
   ========================================================================= */

.composite_form .composite_component {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--bk-radius);
	background: var(--bk-card);
	box-shadow: var(--bk-shadow-sm);
	overflow: hidden;
}

/* Nagłówek karty: kółko z numerem + tytuł + plakietka. */
.composite_form .component_title_wrapper {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--bk-border-soft);
}

.composite_form .component_title {
	display: contents;
	margin: 0;
	font-family: var(--bk-sans);
	font-size: 1rem;
	font-weight: 600;
	color: var(--bk-choc-dark);
}

.composite_form .component_title .aria_title {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.composite_form .component_title .component_title_text,
.composite_form .component_title .step_title_text,
.composite_form .component_title .step_title {
	font-family: var(--bk-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--bk-choc-dark);
}

/* Kółko z numerem — wstawiane w JS (.bukowina-step-num) lub .step_index z wtyczki. */
.composite_form .bukowina-step-num,
.composite_form .component_title .step_index {
	order: -1;
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--bk-choc-dark);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
}

.composite_form .component_title .step_index::before,
.composite_form .component_title .step_index::after,
.composite_form .component_title .step_title::before,
.composite_form .component_title .step_title::after {
	content: none !important;
	display: none !important;
}

/* Etykieta Wymagane / Opcjonalne — prawy górny róg nagłówka karty. */
.composite_form .bukowina-step-badge {
	margin-left: auto;
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	font-family: var(--bk-sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	white-space: nowrap;
	text-transform: uppercase;
}

.composite_form .bukowina-step-badge--required {
	background: rgba(201, 162, 75, 0.18);
	color: var(--bk-cocoa);
}

.composite_form .bukowina-step-badge--optional {
	background: rgba(43, 26, 18, 0.08);
	color: var(--bk-choc-dark);
}

/* Ciało karty (w projekcie: p-5). */
.composite_form .component_inner {
	padding: 1.25rem;
}

.composite_form .component_description_wrapper:empty {
	display: none;
}

.composite_form .component_description {
	margin: 0 0 1rem;
	color: var(--bk-cocoa);
	font-size: 0.875rem;
}

/* Etykieta „Dostępne opcje" — zbędna przy kartach z mockupu. */
.composite_form .component_selections > .component_section_title {
	display: none;
}

.composite_form .component_section_title .select_label {
	font: inherit;
	color: inherit;
}

/* =========================================================================
   6. Kafelki opcji (OptionTile) — tryb Thumbnails Composite Products.
   Markup: ul.component_option_thumbnails_container >
           li.component_option_thumbnail_container >
           .component_option_thumbnail
   (starszy wariant ul.products li.product też obsługujemy).
   ========================================================================= */

.composite_form .component_options,
.composite_form .component_options_inner,
.composite_form .component_option_thumbnails {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	float: none !important;
	width: auto !important;
}

.composite_form ul.products,
.composite_form ul.component_option_thumbnails_container,
.composite_form .component_options ul {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	float: none !important;
	width: auto !important;
}

.composite_form ul.products::before,
.composite_form ul.products::after,
.composite_form ul.component_option_thumbnails_container::before,
.composite_form ul.component_option_thumbnails_container::after {
	content: none !important;
	display: none !important;
}

.composite_form ul.products li.product,
.composite_form li.component_option_thumbnail_container {
	position: relative;
	display: block !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	border: 0;
	background: none;
	list-style: none;
}

.composite_form .component_option_thumbnail,
.composite_form ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 2px solid var(--bk-border);
	border-radius: var(--bk-radius);
	background: var(--bk-card);
	overflow: hidden;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.composite_form .component_option_thumbnail:hover,
.composite_form ul.products li.product:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(43, 26, 18, 0.1);
}

.composite_form .component_option_thumbnail_link {
	display: block;
	pointer-events: none;
}

.composite_form .thumbnail_image,
.composite_form .component_option_thumbnail .image {
	margin: 0;
	padding: 0;
	background: var(--bk-cream-deep);
	overflow: hidden;
}

.small_width .component_option_thumbnail .image {
	width: 100%;
}

.composite_form .component_option_thumbnail img,
.composite_form ul.products li.product img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: var(--bk-cream-deep);
}

.composite_form .thumbnail_description {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.75rem;
}

.composite_form .thumbnail_title,
.composite_form ul.products li.product .component_option_title,
.composite_form ul.products li.product h2,
.composite_form ul.products li.product h3,
.composite_form ul.products li.product h5,
.composite_form ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 0.125rem !important;
	padding: 0 !important;
	font-family: var(--bk-sans) !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	color: var(--bk-choc-dark) !important;
}

.composite_form .thumbnail_price,
.composite_form .thumbnail_price.price,
.composite_form span.thumbnail_price,
.composite_form .thumbnail_price .price,
.composite_form .thumbnail_price .woocommerce-Price-amount,
.composite_form .thumbnail_price bdi,
.composite_form .thumbnail_price .woocommerce-Price-currencySymbol,
.composite_form ul.products li.product .price,
.composite_form ul.products li.product .price .woocommerce-Price-amount {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--bk-cocoa) !important;
	font-family: var(--bk-sans) !important;
	font-size: 0.75rem !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	background: none !important;
}

.composite_form .thumbnail_price del,
.composite_form .thumbnail_price ins,
.composite_form ul.products li.product .price del,
.composite_form ul.products li.product .price ins {
	background: none !important;
	text-decoration: none !important;
	font-size: inherit !important;
	color: inherit !important;
}

.composite_form .bukowina-price-placeholder {
	color: var(--bk-cocoa) !important;
	font-size: 0.75rem !important;
	font-weight: 400 !important;
}

.composite_form .thumbnail_buttons,
.composite_form .component_option_thumbnail_select {
	display: none !important;
}

/* Stan wybrany: złota ramka, uniesienie i złoty „ptaszek" w rogu. */
.composite_form .component_option_thumbnail.selected,
.composite_form ul.products li.product.selected,
.composite_form ul.products li.product.active {
	border-color: var(--bk-gold);
	transform: none;
	box-shadow: var(--bk-shadow-sel);
}

.composite_form .component_option_thumbnail.selected::after,
.composite_form ul.products li.product.selected::after,
.composite_form ul.products li.product.active::after {
	content: '' !important;
	display: block !important;
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 2;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--bk-gold) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B1A12' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}

.composite_form .component_option_thumbnail.disabled,
.composite_form .component_option_thumbnail.out_of_stock,
.composite_form ul.products li.product.disabled,
.composite_form ul.products li.product.unavailable,
.composite_form li.component_option_thumbnail_container.hidden .component_option_thumbnail,
.composite_form li.component_option_thumbnail_container.disabled .component_option_thumbnail,
.composite_form li.component_option_radio_button_container.hidden .component_option_radio_button,
.composite_form li.component_option_radio_button_container.disabled .component_option_radio_button {
	opacity: 0.42;
	cursor: not-allowed;
	pointer-events: none;
}

/*
 * Mutex dodatków: wtyczka na `.hidden` stawia `display: none` — u nas opcja
 * ma zostać widoczna, tylko wyszarzone i nieklikalne. Dlatego własne
 * `bukowina-mutex-hidden` przebija display i trzyma wygląd „disabled".
 */
.composite_form li.component_option_thumbnail_container.bukowina-mutex-hidden,
.composite_form li.component_option_radio_button_container.bukowina-mutex-hidden,
.composite_form ul.products li.product.bukowina-mutex-hidden {
	display: block !important;
}

.composite_form li.bukowina-mutex-hidden .component_option_thumbnail,
.composite_form li.bukowina-mutex-hidden .component_option_radio_button,
.composite_form ul.products li.product.bukowina-mutex-hidden {
	opacity: 0.42;
	cursor: not-allowed;
	pointer-events: none;
}

/* Opcjonalny, już wybrany kafelek — wciąż klikalny (ponowne kliknięcie = odznacz). */
.composite_form .component_option_thumbnail.bukowina-can-deselect,
.composite_form .component_option_thumbnail.bukowina-can-deselect:hover,
.composite_form .component_option_radio_button.bukowina-can-deselect,
.composite_form ul.products li.product.bukowina-can-deselect {
	cursor: pointer !important;
}

/* --- Krok 2: rodzaj czekolady — pasek koloru zamiast zdjęcia --- */
.composite_form .bukowina-step--coating ul.component_option_thumbnails_container {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 640px) {
	.composite_form .bukowina-step--coating ul.component_option_thumbnails_container {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.composite_form .bukowina-step--coating .component_option_thumbnail {
	text-align: center;
}

.composite_form .bukowina-step--coating .thumbnail_image {
	height: 3.5rem;
	aspect-ratio: auto;
}

.composite_form .bukowina-step--coating .thumbnail_image img {
	display: none;
}

.composite_form .bukowina-step--coating .thumbnail_description {
	padding: 0.5rem 0.5rem 0.65rem;
	align-items: center;
	gap: 0.1rem;
}

.composite_form .bukowina-step--coating .thumbnail_title {
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	color: var(--bk-choc-dark) !important;
}

.composite_form .bukowina-step--coating .thumbnail_price,
.composite_form .bukowina-step--coating .thumbnail_price.price,
.composite_form .bukowina-step--coating span.thumbnail_price,
.composite_form .bukowina-step--coating .thumbnail_price .woocommerce-Price-amount,
.composite_form .bukowina-step--coating .thumbnail_price bdi {
	font-size: 0.75rem !important;
	font-weight: 400 !important;
	color: var(--bk-cocoa) !important;
}

.composite_form .bukowina-step--coating .component_option_thumbnail.selected {
	box-shadow: 0 4px 12px rgba(201, 162, 75, 0.22);
}

.composite_form .bukowina-step--coating .component_option_thumbnail.selected::after {
	top: 0.35rem;
	right: 0.35rem;
	width: 1rem;
	height: 1rem;
	background-size: 0.55rem;
}

.composite_form .bukowina-step--coating .component_option_thumbnail[data-val='18'] .thumbnail_image,
.composite_form .bukowina-step--coating .bukowina-swatch--milk .thumbnail_image {
	background: #c4832a !important;
}

.composite_form .bukowina-step--coating .component_option_thumbnail[data-val='28'] .thumbnail_image,
.composite_form .bukowina-step--coating .bukowina-swatch--dark .thumbnail_image {
	background: #3d1f0c !important;
}

.composite_form .bukowina-step--coating .component_option_thumbnail[data-val='30'] .thumbnail_image,
.composite_form .bukowina-step--coating .bukowina-swatch--white .thumbnail_image {
	background: #f5e6c8 !important;
	box-shadow: inset 0 0 0 1px #d4b896;
}

.composite_form .bukowina-step--coating .component_option_thumbnail[data-val='31'] .thumbnail_image,
.composite_form .bukowina-step--coating .bukowina-swatch--ruby .thumbnail_image {
	background: #c06b7a !important;
}

.composite_form .bukowina-step--coating .component_option_thumbnail[data-val='33'] .thumbnail_image,
.composite_form .bukowina-step--coating .bukowina-swatch--matcha .thumbnail_image {
	background: #6b8c5a !important;
}

.composite_form .bukowina-step--coating .component_option_thumbnail[data-val='34'] .thumbnail_image,
.composite_form .bukowina-step--coating .bukowina-swatch--dark72 .thumbnail_image {
	background: #1a0d05 !important;
}

/* UBE — czekolada z fioletowego batata. */
.composite_form .bukowina-step--coating .bukowina-swatch--ube .thumbnail_image {
	background: #8f6bb3 !important;
}

/* --- Krok 3: dodatki — karta ze zdjęciem i checkboxem NA zdjęciu ---
   Kwadratowy checkbox (a nie okrągły „ptaszek" jak przy polewie/opakowaniu)
   celowo odróżnia wizualnie krok wielokrotnego wyboru od kroków, gdzie
   wybiera się jedną opcję. Karta wraca do bazowego stylu ze zdjęciem
   (pełna szerokość, `.thumbnail_description` z domyślnym paddingiem) —
   dawniej zdjęcie było ukryte na rzecz samego checkboxa, co miało sens,
   dopóki nie było jeszcze prawdziwych fotografii składników. */
.composite_form .bukowina-step--addons .component_option_thumbnail::before {
	content: '';
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 2;
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid rgba(43, 26, 18, 0.28);
	border-radius: 0.25rem;
	background: #fff;
	box-shadow: 0 1px 3px rgba(43, 26, 18, 0.25);
	transition: border-color 0.15s ease, background 0.15s ease;
}

.composite_form .bukowina-step--addons .thumbnail_title {
	margin-bottom: 0.25rem !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	color: var(--bk-choc-dark) !important;
}

.composite_form .bukowina-step--addons .thumbnail_price,
.composite_form .bukowina-step--addons .thumbnail_price.price,
.composite_form .bukowina-step--addons span.thumbnail_price {
	font-size: 0.75rem !important;
	font-weight: 400 !important;
	color: var(--bk-cocoa) !important;
}

/* Ramka, uniesienie i cień zaznaczenia bierze już wspólna reguła (patrz
   `.component_option_thumbnail.selected` wyżej w pliku) — tu tylko checkbox. */
.composite_form .bukowina-step--addons .component_option_thumbnail.selected::before {
	border-color: var(--bk-gold);
	background: var(--bk-gold) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B1A12' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}

.composite_form .bukowina-step--addons .component_option_thumbnail.selected::after {
	display: none !important;
}

/* --- Krok 4: opakowanie — ikona + tekst --- */
.composite_form .bukowina-step--packaging {
	overflow: visible;
}

.composite_form .bukowina-step--packaging .component_inner,
.composite_form .bukowina-step--packaging .component_selections,
.composite_form .bukowina-step--packaging .component_options,
.composite_form .bukowina-step--packaging .component_options_inner {
	overflow: visible;
}

.composite_form .bukowina-step--packaging .thumbnail_image {
	display: none;
}

.composite_form .bukowina-step--packaging .component_option_thumbnail {
	padding: 1rem;
	background: var(--bk-card);
}

.composite_form .bukowina-step--packaging .component_option_thumbnail::before {
	content: '';
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0 0 0.75rem;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B4B2A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z'/%3E%3Cpath d='M12 22V12'/%3E%3Cpolyline points='3.29 7 12 12 20.71 7'/%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3C/svg%3E") center / contain no-repeat;
}

.composite_form .bukowina-step--packaging .component_option_thumbnail.selected {
	background: var(--bk-tint);
	box-shadow: 0 4px 12px rgba(201, 162, 75, 0.2);
}

.composite_form .bukowina-step--packaging .component_option_thumbnail.selected::before {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A24B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z'/%3E%3Cpath d='M12 22V12'/%3E%3Cpolyline points='3.29 7 12 12 20.71 7'/%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3C/svg%3E");
}

.composite_form .bukowina-step--packaging .thumbnail_description {
	padding: 0;
}

.composite_form .bukowina-step--packaging .thumbnail_title {
	margin-bottom: 0.25rem !important;
	/* Miejsce na złoty „ptaszek" zaznaczenia (::after, top/right 0.5rem,
	   szerokość 1.25rem) — bez tego zawijający się dłuższy tytuł (np. „Opakowanie
	   — premium (kartonik z logo)") chowa się pod plakietką w prawym górnym rogu. */
	padding-right: 1.5rem !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	color: var(--bk-choc-dark) !important;
}

.composite_form .bukowina-step--packaging .thumbnail_price,
.composite_form .bukowina-step--packaging .thumbnail_price.price,
.composite_form .bukowina-step--packaging span.thumbnail_price {
	font-size: 0.75rem !important;
	font-weight: 400 !important;
	color: var(--bk-cocoa) !important;
}

.composite_form .bukowina-step--packaging .component_option_thumbnail {
	overflow: visible;
	border-color: rgba(43, 26, 18, 0.14);
}

/* Plakietka „Na wycenę" siedzi w kafelku, nie nad jego krawędzią: przy
   wystającym elemencie wystarczy jeden przodek z `overflow: hidden`
   (a wtyczka bywa ich pełna), żeby napis został ucięty w połowie. */
.composite_form .bukowina-tile-badge {
	align-self: flex-start;
	margin-top: 0.5rem;
	padding: 0.1rem 0.5rem;
	border-radius: 0.25rem;
	background: var(--bk-gold);
	color: var(--bk-choc-dark);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.3;
	pointer-events: none;
}

.composite_form .bukowina-step--packaging .component_option_thumbnail.selected::after {
	top: 0.5rem;
	right: 0.5rem;
}

.composite_form .quantity.quantity_hidden {
	display: none !important;
}

/* Paginacja opcji w kroku (Page 1 of 2). */
.composite_form .component_pagination {
	display: none !important;
}

/* =========================================================================
   7. Lista rozwijana — gdy komponent nie używa miniatur.
   ========================================================================= */

.composite_form .component_options_select_wrapper {
	max-width: 100%;
}

.composite_form select.component_options_select,
.composite_form .component_options select {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--bk-border-input);
	border-radius: var(--bk-radius);
	background: var(--bk-card);
	color: var(--bk-choc-dark);
	font-family: var(--bk-sans);
	font-size: 0.9rem;
}

.composite_form select:focus-visible,
.composite_form input:focus-visible,
.composite_form button:focus-visible,
.composite_form a:focus-visible {
	outline: 2px solid var(--bk-gold);
	outline-offset: 2px;
}

/* =========================================================================
   8. Podgląd wyboru wewnątrz kroku (.component_summary).

   WAŻNE: ten obszar MUSI zostać widoczny. Composite Products renderuje w nim
   m.in. pole ilości komponentu — a to na kroku „Baza produktu" jest teraz
   miejscem, w którym klient ustala liczbę sztuk (np. 100 draży). Ukrycie go
   (było tu kiedyś `display: none`) odbierało jedyny sposób zmiany ilości.
   ========================================================================= */

.composite_form .component_summary {
	margin: 1rem 0 0;
	padding: 0;
	border: 0;
	background: none;
}

/* Z podglądu zostaje TYLKO sterowanie ilością. Tytuł „Twój wybór", zdjęcie
   i powtórzona cena dublują to, co widać na kafelku tuż wyżej. */
.composite_form .component_summary .composited_product_title_wrapper,
.composite_form .component_summary .composited_product_images,
.composite_form .component_summary .component_wrap > .price {
	display: none !important;
}


.woocommerce ul.component_option_thumbnails_container li.component_option_thumbnail_container .thumbnail_description .price{
	font-size:0.75rem !important;
}

/* Krok z ilością sztywną (min = max) nie ma czego pokazać — wtyczka chowa
   wtedy pole (`quantity_hidden`), a sama ramka podglądu zostałaby pustym
   prostokątem. */
/* Podgląd wyboru w kroku niesie już tylko pole ilości, a tym steruje jedno
   wspólne pole w panelu podsumowania (decorateQuantity() w JS wpisuje jego
   wartość do każdego kroku). Osobne pola przy każdym kroku byłyby kilkoma
   liczbami do pilnowania zamiast jednej, więc cały ten podgląd chowamy.
   Pola zostają w formularzu — wtyczka ich potrzebuje przy dodawaniu do
   koszyka — tylko nie są widoczne. */
.composite_form .component_summary {
	display: none !important;
}

.composite_form .component_summary .composited_product_title_wrapper {
	grid-column: 2;
	margin: 0;
}

.composite_form .component_summary .composited_product_title_wrapper,
.composite_form .component_summary .composited_product_details_wrapper {
	float: none !important;
	width: auto !important;
	text-align: left !important;
}

.composite_form .component_summary .composited_product_images {
	width: 56px;
	margin: 0;
	float: none;
}

.composite_form .component_summary figure.composited_product_image {
	width: 56px;
	height: 56px;
	margin: 0;
	border-radius: 0.375rem;
	overflow: hidden;
	background: var(--bk-cream-deep);
}

.composite_form .component_summary figure.composited_product_image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.composite_form .component_summary .composited_product_title {
	margin: 0 !important;
	font-family: var(--bk-sans) !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: var(--bk-choc-dark);
	text-align: left !important;
	text-transform: none;
	letter-spacing: 0;
}

.composite_form .component_summary .composited_product_title_wrapper .component_section_title {
	margin: 0 0 0.1rem;
	font-size: 0.7rem;
}

/* Tu mieszka pole ilości komponentu, więc blok MUSI być widoczny (było tu
   `display: none` z czasów, gdy chowaliśmy cały podgląd). Wtyczka nadaje mu
   szerokość i float pod swój dwukolumnowy układ ze zdjęciem — a że zdjęcie
   chowamy, resetujemy to, żeby sterowanie ilością zaczynało się przy lewej
   krawędzi ramki, a nie w jej środku. */
.composite_form .component_summary .details.component_data,
.composite_form .component_summary .details.component_data .component_wrap,
.composite_form .component_summary .quantity_button {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
}

/* =========================================================================
   9. Nawigacja „wstecz / dalej" wewnątrz kroku.
   ========================================================================= */

.composite_form .composite_navigation,
.composite_form .composite_navigation.movable {
	position: static !important;
	transform: none !important;
	margin: 1rem 0 0 !important;
	padding: 0;
	border: 0;
	background: none;
}

.composite_form .composite_navigation_inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
}

.composite_form .composite_navigation .page_button {
	display: inline-flex !important;
	align-items: center;
	gap: 0.4rem;
	width: auto !important;
	max-width: 48%;
	min-height: 2.5rem;
	padding: 0.5rem 1rem !important;
	border: 1px solid var(--bk-border-input) !important;
	border-radius: var(--bk-radius) !important;
	background: var(--bk-card);
	color: var(--bk-choc);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
	cursor: pointer;
}

.composite_form .composite_navigation .page_button.next {
	margin-left: auto;
	border-color: var(--bk-gold) !important;
	background: var(--bk-gold);
	color: var(--bk-choc-dark);
}

.composite_form .composite_navigation .page_button.invisible {
	display: none !important;
}

/* =========================================================================
   10. Panel podsumowania (SummaryPanel) — budowany w JS.
   ========================================================================= */

.bukowina-summary {
	border: 2px solid var(--bk-border);
	border-radius: var(--bk-radius);
	background: var(--bk-card);
	overflow: hidden;
}

/* Pasek podglądu produktu na górze panelu (h-40 w projekcie). */
.bukowina-summary__preview {
	height: 10rem;
	background: var(--bk-cream-deep);
	overflow: hidden;
}

.bukowina-summary__preview img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bukowina-summary__body {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 1.25rem;
}

.bukowina-summary__body > .composite_button,
.bukowina-summary__body > .composite_data {
	margin-top: 0;
	margin-bottom: 1rem;
}

.bukowina-summary__body > .bukowina-premium-cta {
	margin-top: 0;
}

.bukowina-summary__title {
	margin: 0 0 1rem;
	font-family: var(--bk-serif);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bk-choc-dark);
}

/* Wiersze „etykieta … wartość". */
.bukowina-summary__rows {
	margin: 0 0 1.25rem;
	padding: 0 0 1.25rem;
	border-bottom: 1px solid var(--bk-border-soft);
	list-style: none;
}

.bukowina-summary__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
	font-family: var(--bk-sans);
	font-size: 0.875rem;
	line-height: 1.4;
}

.bukowina-summary__row:last-child {
	margin-bottom: 0;
}

.bukowina-summary__label {
	flex-shrink: 0;
	font-weight: 400;
	color: var(--bk-cocoa);
}

.bukowina-summary__value {
	font-weight: 500;
	text-align: right;
	color: var(--bk-choc-dark);
}

/* Blok ilości. */
.bukowina-summary__qty {
	margin: 0 0 1.25rem;
}

/* Ilość produktu NADRZĘDNEGO — ukryta, ale nadal w formularzu (WooCommerce
   potrzebuje tego pola do dodania do koszyka; zostaje na 1). Liczbą sztuk
   steruje wspólne pole wyżej, wpisując ją do każdego kroku — ilość nadrzędna
   mnożyłaby to, co komponenty już policzyły. */
.bukowina-summary .bukowina-parent-qty {
	display: none !important;
}

.bukowina-summary__qty-label {
	display: block;
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--bk-choc-dark);
}

.bukowina-summary__qty-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.bukowina-summary .quantity,
.composite_form .bukowina-summary .quantity {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	min-width: 0;
	margin: 0;
	float: none;
}

.bukowina-summary .quantity .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.bukowina-summary .quantity input.qty,
.bukowina-summary__qty-input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	padding: 0.5rem;
	border: 1px solid var(--bk-border-input);
	border-radius: 0.375rem;
	background: var(--bk-card);
	color: var(--bk-choc-dark);
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	outline: none;
	appearance: textfield;
	-moz-appearance: textfield;
}

.bukowina-summary .quantity input.qty::-webkit-outer-spin-button,
.bukowina-summary .quantity input.qty::-webkit-inner-spin-button,
.bukowina-summary__qty-input::-webkit-outer-spin-button,
.bukowina-summary__qty-input::-webkit-inner-spin-button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
}

.bukowina-summary__qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--bk-border-input);
	border-radius: 0.375rem;
	background: var(--bk-card);
	color: var(--bk-cocoa);
	cursor: pointer;
	transition: background 0.15s ease;
}

.bukowina-summary__qty-btn:hover {
	background: var(--bk-cream);
}

.bukowina-summary__unit {
	flex: none;
	font-size: 0.875rem;
	color: var(--bk-cocoa);
}

/* Blok ceny — karta jak w mockupu (jednostkowa + Razem netto/brutto). */
.bukowina-summary__price {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
	text-align: left;
}

/* Cenę wtyczki chowamy WYŁĄCZNIE wtedy, gdy motyw pokazuje własną
   (klasę dokłada decoratePrice() przy `customPricing`, patrz inc/enqueue.php).
   Domyślnie widoczna jest cena z Composite Products — ta sama, która trafia
   do koszyka. */
.bukowina-summary__price--custom .composite_price {
	display: none !important;
}

/* Cena z wtyczki w panelu: sam wygląd (typografia motywu), bez ruszania treści
   — liczby zostają dokładnie takie, jakie policzyło Composite Products. */
.bukowina-summary__price .composite_price {
	margin: 0;
	padding: 1rem 0;
	border-top: 1px solid rgba(43, 26, 18, 0.1);
	border-bottom: 1px solid rgba(43, 26, 18, 0.1);
	font-family: var(--bk-serif);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--bk-choc-dark);
	text-align: center;
}

.bukowina-summary__price .composite_price .amount,
.bukowina-summary__price .composite_price bdi {
	color: inherit;
	font: inherit;
}

.bukowina-summary__price .composite_price .subtotal,
.bukowina-summary__price .composite_price small,
.bukowina-summary__price .composite_price .price_label {
	display: block;
	margin-top: 0.25rem;
	font-family: var(--bk-sans);
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--bk-cocoa);
}

.bukowina-summary__price-card {
	padding: 0.875rem 1rem;
	border: 1px solid rgba(43, 26, 18, 0.1);
	border-radius: 0.5rem;
	background: #faf7f2;
}

.bukowina-summary__price-unit {
	margin: 0 0 0.75rem;
	padding: 0 0 0.75rem;
	border-bottom: 1px solid rgba(43, 26, 18, 0.12);
}

.bukowina-summary__price-unit-label {
	display: block;
	margin: 0 0 0.2rem;
	font-family: var(--bk-sans);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--bk-cocoa);
}

.bukowina-summary__unit-net {
	margin: 0;
	font-family: var(--bk-sans);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--bk-choc-dark);
}

.bukowina-summary__price-totals {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.bukowina-summary__price-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
}

.bukowina-summary__price-row-label {
	font-family: var(--bk-sans);
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--bk-cocoa);
}

.bukowina-summary__total-net,
.bukowina-summary__total-gross {
	margin: 0;
	font-family: var(--bk-sans);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bk-choc-dark);
	text-align: right;
	white-space: nowrap;
}

.bukowina-summary__price-note {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--bk-cocoa);
	text-align: left;
}

/* Główne CTA — Przejdź do zamówienia (nadpisuje fiolet motywu). */
.bukowina-summary .composite_button {
	display: block;
	clear: both;
	width: 100%;
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
	background: none;
	float: none;
}

.bukowina-summary .single_add_to_cart_button,
.bukowina-summary button.single_add_to_cart_button,
.bukowina-summary .composite_button .button,
.bukowina-summary .composite_button .button.alt,
.bukowina-summary .composite_button .wp-element-button,
.woocommerce div.product form.cart .bukowina-summary .single_add_to_cart_button,
.woocommerce div.product form.cart .bukowina-summary button.button.alt {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	float: none !important;
	clear: both !important;
	position: static !important;
	width: 100% !important;
	min-height: 2.75rem;
	margin: 0 !important;
	padding: 0.75rem 1.25rem !important;
	border: 0 !important;
	border-radius: 0.375rem !important;
	background: var(--bk-gold) !important;
	background-color: var(--bk-gold) !important;
	background-image: none !important;
	color: var(--bk-choc-dark) !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer;
}

.bukowina-summary .single_add_to_cart_button:hover,
.bukowina-summary .composite_button .button:hover,
.woocommerce div.product form.cart .bukowina-summary .single_add_to_cart_button:hover {
	background: var(--bk-gold) !important;
	background-color: var(--bk-gold) !important;
	color: var(--bk-choc-dark) !important;
	opacity: 0.92;
}

.bukowina-summary .single_add_to_cart_button::after {
	content: '';
	display: inline-block;
	width: 0.9rem;
	height: 0.9rem;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B1A12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Ukryj skorupy Composite, ale zachowaj normalny flow (bez display:contents). */
.bukowina-summary .composite_data,
.bukowina-summary .composite_wrap {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	float: none;
	width: 100%;
}

.bukowina-summary .composite_status,
.bukowina-summary .composite_availability {
	display: none !important;
}

.bukowina-summary .composite_message {
	display: none;
}

.bukowina-summary .composite_message:has(.msg:not(:empty)) {
	display: block;
	margin: 0 0 0.75rem;
}

/* =========================================================================
   11. CTA premium — karta pod głównym przyciskiem.
   ========================================================================= */

.bukowina-summary .bukowina-premium-cta {
	clear: both;
	position: relative;
	z-index: 0;
	margin: 0;
	padding: 1rem;
	border: 1.5px solid rgba(201, 162, 75, 0.4);
	border-radius: var(--bk-radius);
	background: var(--bk-tint);
	box-shadow: none;
	overflow: hidden;
}

.bukowina-summary .bukowina-premium-cta h3 {
	display: block;
	margin: 0 0 0.25rem;
	font-family: var(--bk-sans);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bk-choc-dark);
}

.bukowina-summary .bukowina-premium-cta p {
	display: block;
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bk-cocoa);
}

.bukowina-premium-cta__button,
.woocommerce div.product .bukowina-premium-cta__button,
.woocommerce div.product form.cart .bukowina-premium-cta__button,
.woocommerce div.product form.cart .bukowina-premium-cta a.button,
.bukowina-summary .bukowina-premium-cta__button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	float: none !important;
	width: 100% !important;
	min-height: 2.25rem;
	margin: 0 !important;
	padding: 0.5rem 0.75rem !important;
	border: 1px solid var(--bk-gold) !important;
	border-radius: 0.375rem !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--bk-choc) !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	text-align: center;
	text-decoration: none;
	box-shadow: none !important;
	transition: background 0.15s ease;
}

.woocommerce div.product form.cart .bukowina-premium-cta__button:hover,
.bukowina-summary .bukowina-premium-cta__button:hover {
	background: rgba(201, 162, 75, 0.12) !important;
	color: var(--bk-choc-dark) !important;
	opacity: 1;
}

/* =========================================================================
   12. Komunikaty.
   ========================================================================= */

.woocommerce div.product .woocommerce-info,
.woocommerce div.product .woocommerce-message,
.woocommerce div.product .woocommerce-error,
.composite_form .component_message {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--bk-border);
	border-left: 3px solid var(--bk-gold);
	border-radius: var(--bk-radius);
	background: var(--bk-tint);
	color: var(--bk-choc-dark);
	font-size: 0.875rem;
	list-style: none;
}

.woocommerce-info ul{
	padding-left:  0 !important;
}

.woocommerce div.product .woocommerce-info::before,
.woocommerce div.product .woocommerce-message::before,
.woocommerce div.product .woocommerce-error::before,
.composite_form .composite_message::before {
	content: none !important;
	display: none !important;
}

/* =========================================================================
   13. Elementy zbędne na demo.
   ========================================================================= */

.woocommerce div.product .product_meta,
.woocommerce div.product .woocommerce-tabs,
.woocommerce .woocommerce-breadcrumb {
	display: none;
}

/* Placeholder ceny („Cena wg konfiguracji" z inc/mockup.php) nad krokami tylko
   dubluje panel podsumowania, w którym cena liczy się na żywo — chowamy sam
   napis, a tam gdzie jest całą treścią akapitu `p.price`, również akapit
   (inaczej zostaje po nim pusty margines). */
.woocommerce div.product p.price > .bukowina-price-placeholder {
	display: none;
}

.woocommerce div.product p.price:has(> .bukowina-price-placeholder) {
	display: none;
}

/* Pasek „wersja poglądowa" (inc/mockup.php). */
.bukowina-demo-bar {
	padding: 0.5rem 1rem;
	background: var(--bk-gold);
	color: var(--bk-choc-dark);
	font-family: var(--bk-sans);
	font-size: 0.8rem;
	font-weight: 600;
	text-align: center;
}

/* =========================================================================
   14. Mobile.
   Progi: 1000px — układ dwukolumnowy, 768px — dotyk i przewijane taby,
   600px — dwie kolumny kafelków.
   ========================================================================= */

@media (max-width: 999px) {
	.bukowina-summary {
		position: static !important;
	}

	.composite_form .bukowina-layout {
		gap: 1.25rem;
	}

	/* Panel podsumowania stoi pod krokami — niższy podgląd trzyma cenę
	   i przycisk bliżej krawędzi ekranu. */
	.bukowina-summary__preview {
		height: clamp(8rem, 38vw, 10rem);
	}
}

@media (max-width: 767px) {
	/* Taby kroków przewijają się w poziomie zamiast łamać na kilka rzędów. */
	.composite_form .composite_pagination ul.pagination_elements {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.composite_form .composite_pagination ul.pagination_elements::-webkit-scrollbar {
		display: none;
	}

	/* Bez `flex: none` taby kurczą się poniżej długości etykiet i napisy
	   zachodzą na siebie zamiast przewijać. */
	.composite_form .composite_pagination li.pagination_element {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.composite_form .composite_pagination .element_inner {
		padding: 0.75rem 0.9rem !important;
	}

	.composite_form .composite_pagination {
		margin-bottom: 1.75rem;
	}

	/* Cele dotykowe ≥ 44px i czcionka pól ≥ 16px (poniżej iOS przybliża
	   stronę przy wejściu w pole ilości). */
	.bukowina-summary__qty-btn {
		width: 2.75rem;
		height: 2.75rem;
	}

	.bukowina-summary .quantity input.qty {
		min-height: 2.75rem;
		font-size: 1rem;
	}

	.composite_form select.component_options_select,
	.composite_form .component_options select {
		min-height: 2.75rem;
		font-size: 1rem;
	}

	.composite_form .composite_navigation .page_button {
		min-height: 2.75rem;
	}

	.bukowina-summary .single_add_to_cart_button,
	.bukowina-summary button.single_add_to_cart_button,
	.woocommerce div.product form.cart .bukowina-summary button.button.alt {
		min-height: 3rem !important;
		font-size: 0.9375rem !important;
	}
}

@media (max-width: 599px) {
	.composite_form ul.products,
	.composite_form ul.component_option_thumbnails_container,
	.composite_form .component_options ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.625rem;
	}

	.composite_form .bukowina-step--coating ul.component_option_thumbnails_container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.composite_form .component_title_wrapper {
		flex-wrap: wrap;
		padding: 0.9rem 1rem;
	}

	.composite_form .component_inner {
		padding: 1rem;
	}

	.bukowina-summary__body {
		padding: 1rem;
	}
}

/* =========================================================================
   15. Konfigurator jako sekcja strony (blok ACF „Konfigurator produktu").

   Ten sam formularz co na karcie produktu, tylko osadzony w treści strony:
   sekcja daje nagłówek, tło i własną ramę, więc szerokość karty produktu
   trzeba tu wyzerować.
   ========================================================================= */

.bukowina-configurator-section {
	padding-block: clamp(3.5rem, 7vw, 5rem);
	background: var(--bk-cream);
	font-family: var(--bk-sans);
}

.bukowina-configurator-section__inner {
	width: var(--bukowina-shell, min(100% - 2rem, 75rem));
	margin-inline: auto;
}

.bukowina-configurator-section__header {
	margin: 0 0 clamp(2rem, 5vw, 3rem);
	text-align: center;
}

.bukowina-configurator-section__title {
	margin: 0 0 0.75rem;
	font-family: var(--bk-serif);
	font-size: clamp(1.875rem, 4vw, 2.25rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--bk-choc-dark);
}

.bukowina-configurator-section__lead {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--bk-cocoa);
}

/* Karta produktu ma własną ramę i marginesy — wewnątrz sekcji byłyby drugą
   szerokością i podwójnym marginesem bocznym. */
.woocommerce.bukowina-configurator-embed,
.bukowina-configurator-embed .woocommerce {
	width: 100%;
	margin: 0;
	padding: 0;
}

.woocommerce.bukowina-configurator-embed div.product {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.bukowina-configurator-section__placeholder {
	margin: 0;
	padding: 1.5rem;
	border: 1px dashed rgba(201, 162, 75, 0.55);
	border-radius: var(--bk-radius);
	background: var(--bk-card);
	text-align: center;
	font-size: 0.875rem;
	color: var(--bk-cocoa);
}

/* =========================================================================
   17. Opcje jako przyciski radio.

   Composite Products ma dwa tryby wyświetlania opcji: miniatury i listę
   przycisków radio (`component_option_radio_buttons_container`). Motyw
   ubiera oba tak samo — kafelek z ramką, wybrany na złoto z „ptaszkiem".
   Kliknięcie obsługuje rozciągnięta etykieta, więc działa cały prostokąt.
   ========================================================================= */

.composite_form ul.component_option_radio_buttons_container {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	float: none !important;
	width: auto !important;
}

.composite_form ul.component_option_radio_buttons_container::before,
.composite_form ul.component_option_radio_buttons_container::after {
	content: none !important;
	display: none !important;
}

.composite_form li.component_option_radio_button_container {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	border: 0;
	background: none;
	list-style: none;
}

.composite_form .component_option_radio_button {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100%;
	margin: 0;
	padding: 1rem;
	border: 2px solid rgba(43, 26, 18, 0.14);
	border-radius: var(--bk-radius);
	background: var(--bk-card);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.composite_form .component_option_radio_button:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(43, 26, 18, 0.1);
}

/* Natywny przycisk radio chowamy — stan niesie ramka i „ptaszek”. Pusta
   etykieta wtyczki rozciąga się na kafelek, dzięki czemu klikalny jest
   cały prostokąt, bez dokładania JavaScriptu. */
.composite_form .component_option_radio_button .radio_button_input {
	position: static;
	margin: 0;
	padding: 0;
}

.composite_form .component_option_radio_button input.radio_button {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.composite_form .component_option_radio_button label.component_option_radio_button_select {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.composite_form .component_option_radio_button .radio_button_description {
	margin: 0;
	padding: 0;
}

.composite_form .component_option_radio_button .radio_button_title,
.composite_form .component_option_radio_button .radio_button_title.title {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--bk-sans) !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	color: var(--bk-choc-dark) !important;
	text-transform: none;
	letter-spacing: 0;
}

.composite_form .component_option_radio_button .radio_button_price,
.composite_form .component_option_radio_button .price {
	display: block;
	margin: 0.15rem 0 0 !important;
	font-size: 0.75rem !important;
	font-weight: 400 !important;
	color: var(--bk-cocoa) !important;
	background: none !important;
}

.composite_form .component_option_radio_button.selected {
	border-color: var(--bk-gold);
	background: var(--bk-tint);
	box-shadow: var(--bk-shadow-sel);
}

.composite_form .component_option_radio_button.selected::after {
	content: '';
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 2;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--bk-gold) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B1A12' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
	pointer-events: none;
}

.composite_form .component_option_radio_button.selected .radio_button_title {
	padding-right: 1.5rem;
}

.composite_form .component_option_radio_button.disabled,
.composite_form .component_option_radio_button.unavailable {
	opacity: 0.42;
	cursor: not-allowed;
	pointer-events: none;
}

@media (max-width: 599px) {
	.composite_form ul.component_option_radio_buttons_container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.625rem;
	}
}