/**
 * KWM Course Commerce – style WooCommerce
 *
 * Ładowany warunkowo: tylko na widokach WooCommerce (sklep, produkt, konto).
 * Stylizacja wyłącznie przez własne klasy .kwm-*.
 * Nie nadpisujemy klas globalnych Kadence, WooCommerce ani Greenshift
 * poza świadomymi, opisanymi korektami.
 *
 * Struktura:
 *   1. Zmienne CSS lokalne
 *   2. Nagłówek archiwum (.kwm-shop-header)
 *   2b. Odstęp hero archiwum → content-area (korekta marginesu Kadence)
 *   2c. Tło paska hero (.entry-hero-container-inner)
 *   3. Layout sklepu (.kwm-shop-layout)
 *   4. Sidebar + off-canvas (.kwm-shop-sidebar)
 *   5. Siatka produktów (.kwm-shop-content)
 *   6. Karta kursu (.kwm-course-card)
 *   7. Przyciski WooCommerce w kontekście karty
 */

/* =============================================================================
   1. ZMIENNE CSS LOKALNE
   Mapowane na globalne tokeny z main.css (--kwm-color-*).
   Kolory marki zdefiniowane w docs/DESIGN_SYSTEM.md.
   ============================================================================= */

:root {
	/* Szerokości sidebara */
	--kwm-sidebar-width:        320px;
	--kwm-sidebar-width-tablet: 260px;
	--kwm-sidebar-mobile-width: min(320px, 85vw);

	/* Karty i układ */
	--kwm-grid-gap:    1.5rem;
	--kwm-card-radius: 0.75rem;

	/* Cienie z ciepłym odcieniem śliwkowym */
	--kwm-shadow-card:       0 2px 8px rgba(47, 33, 71, 0.07);
	--kwm-shadow-card-hover: 0 8px 24px rgba(47, 33, 71, 0.14);
	--kwm-shadow-sidebar:    4px 0 24px rgba(47, 33, 71, 0.14);

	/* Przejścia */
	--kwm-transition: 0.25s ease;

	/* Z-index */
	--kwm-z-sidebar: 999;
	--kwm-z-overlay: 998;

	/* Tokeny lokalne – mapowane na Design System */
	--kwm-color-placeholder: var(--kwm-color-border); /* #E6E6EC */
	--kwm-color-focus-ring:  var(--kwm-color-accent); /* #C7A96B złoty */

	/* Sidebar – jasny panel premium (docs/DESIGN_SYSTEM.md) */
	--kwm-sidebar-bg-start:            #FBFAFC;
	--kwm-sidebar-bg-end:              #F6F4F8;
	--kwm-sidebar-border:              #ECE4D1;
	--kwm-sidebar-bg:                  linear-gradient(180deg, var(--kwm-sidebar-bg-start) 0%, var(--kwm-sidebar-bg-end) 100%);
	--kwm-sidebar-toggle-bg:           var(--kwm-sidebar-bg-start);
	--kwm-sidebar-toggle-hover-bg:     var(--kwm-sidebar-bg-end);
	--kwm-sidebar-toggle-hover-border: var(--kwm-sidebar-border);
	--kwm-sidebar-heading:             #2F2147;
	--kwm-sidebar-link:                #59556A;
	--kwm-sidebar-hover:               rgba(47, 33, 71, 0.05);
	--kwm-sidebar-active-bg:           rgba(47, 33, 71, 0.05);
	--kwm-sidebar-active-text:         #2F2147;
	--kwm-sidebar-active-border:       #C7A96B;
	--kwm-sidebar-icon:                #7D7890;
	--kwm-sidebar-icon-hover:          #2F2147;
	--kwm-sidebar-focus:               #2F2147;
}

/* =============================================================================
   2. NAGŁÓWEK ARCHIWUM
   Tytuł strony + opis kategorii (woocommerce_archive_description).
   Style stosują się tylko gdy .kwm-shop-header faktycznie renderuje treść
   (patrz woocommerce/archive-product.php – bufor ob_start()). Tło paska
   hero: sekcja 2c poniżej.
   ============================================================================= */

.kwm-shop-header {
	margin-bottom: 1.75rem;
}

.kwm-shop-header__title {
	font-size: clamp(1.625rem, 4vw, 2.5rem);
	font-weight: 800;
	color: #2F2147;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 1rem;
	position: relative;
	padding-bottom: 0.875rem;
}

/* Złoty akcent pod tytułem – podkreślenie premium */
.kwm-shop-header__title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 3rem;
	height: 2px;
	background: var(--kwm-color-accent);
	border-radius: 1px;
}

.kwm-shop-header .woocommerce-products-header__title {
	display: none; /* WooCommerce domyślny h1 – zastąpiony przez nasz */
}

.kwm-shop-header .term-description,
.kwm-shop-header .woocommerce-product-archive__description {
	color: #4a3d60;
	font-size: clamp(0.9375rem, 2vw, 1.0625rem);
	line-height: 1.75;
	margin: 0;
	max-width: 60ch !important;
}

.kwm-shop-header .term-description p {
	margin: 0 0 0.75rem;
}

.kwm-shop-header .term-description p:last-child {
	margin-bottom: 0;
}

/* =============================================================================
   2b. ODSTĘP HERO ARCHIWUM → CONTENT-AREA
   Kadence dodaje domyślnie .content-area { margin: var(--global-xxl-spacing) 0 }
   (5rem = 80px), bo body ma klasę content-vertical-padding-show. Selektor
   sąsiedztwa ogranicza korektę wyłącznie do hero archiwum produktów
   (.entry-hero.product-archive-hero-section), nie rusza innych szablonów
   (blog, strony, single), które też korzystają z .content-area.
   ============================================================================= */

.entry-hero.product-archive-hero-section + .content-area {
	margin-top: 1.5rem;
}

/* =============================================================================
   2c. TŁO PASKA HERO (TYTUŁ + OPIS ARCHIWUM KATEGORII)
   Selektor ograniczony do .entry-hero-container-inner WEWNĄTRZ
   .product-archive-hero-section – dotyczy wyłącznie tego paska (H1 +
   archive-description), nie wycieka na .content-area/siatkę produktów
   ani na hero innych archiwów (blog, single), bo Kadence renderuje
   .entry-hero-container-inner tylko wewnątrz sekcji .entry-hero.
   Ścieżka względna do assets/images/ – ten sam plik co
   wp-content/uploads/2026/07/background-psychoenergetyka.webp,
   trzymany lokalnie w motywie zamiast w bibliotece mediów.
   ============================================================================= */

.entry-hero.product-archive-hero-section .entry-hero-container-inner {
	background-color: #F7F1E8;
	background-image: url('../images/background-psychoenergetyka.webp');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* =============================================================================
   3. LAYOUT SKLEPU
   Mobile-first: blokowy, sidebar off-canvas.
   Tablet (≥768px): grid 260px + 1fr, produkty 2 kol.
   Desktop (≥1024px): grid 320px + 1fr, produkty 2 kol. (szersze karty).
   max-width: 1480px – sklep zajmuje pełną szerokość ekranu premium.
   ============================================================================= */

.kwm-shop-layout {
	position: relative;
	padding-block: 2rem;
	max-width: 1480px;
	margin-inline: auto;
}

@media (min-width: 768px) {
	.kwm-shop-layout {
		display: grid;
		grid-template-columns: var(--kwm-sidebar-width-tablet) minmax(0, 1fr);
		gap: var(--kwm-grid-gap) 2rem;
		align-items: start;
	}
}

@media (min-width: 1024px) {
	.kwm-shop-layout {
		grid-template-columns: var(--kwm-sidebar-width) minmax(0, 1fr);
		gap: var(--kwm-grid-gap) clamp(2rem, 4vw, 4rem);
	}
}

/* =============================================================================
   4. SIDEBAR + OFF-CANVAS
   ============================================================================= */

/* ---- Przycisk toggle (tylko mobile) ---- */

.kwm-shop-sidebar__toggle {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	width: 100%;
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
	background: var(--kwm-sidebar-toggle-bg);
	border: 1px solid var(--kwm-sidebar-border);
	border-radius: 0.5rem;
	cursor: pointer;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--kwm-sidebar-heading);
	text-align: left;
	appearance: none;
	-webkit-appearance: none;
	transition: background var(--kwm-transition), border-color var(--kwm-transition);
}

.kwm-shop-sidebar__toggle:hover {
	background: var(--kwm-sidebar-toggle-hover-bg);
	border-color: var(--kwm-sidebar-toggle-hover-border);
}

.kwm-shop-sidebar__toggle:focus-visible {
	outline: 2px solid var(--kwm-sidebar-focus);
	outline-offset: 2px;
}

/* Ikona hamburgera (CSS, bez obrazka) */
.kwm-shop-sidebar__toggle-icon {
	flex-shrink: 0;
	display: block;
	width: 18px;
	height: 13px;
	position: relative;
}

.kwm-shop-sidebar__toggle-icon::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	box-shadow: 0 5.5px 0 currentColor, 0 11px 0 currentColor;
}

@media (min-width: 768px) {
	.kwm-shop-sidebar__toggle {
		display: none;
	}
}

/* ---- Panel sidebara ---- */

/* Mobile: off-canvas – wchodzi z lewej strony */
.kwm-shop-sidebar {
	position: fixed;
	top: 0;
	left: calc(-1 * var(--kwm-sidebar-mobile-width));
	width: var(--kwm-sidebar-mobile-width);
	height: 100dvh;
	z-index: var(--kwm-z-sidebar);
	background: var(--kwm-sidebar-bg);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.5rem;
	box-shadow: var(--kwm-shadow-sidebar);
	transition: left var(--kwm-transition);
}

.kwm-shop-sidebar.is-open {
	left: 0;
}

/* Tablet+: statyczny w gridzie */
@media (min-width: 768px) {
	.kwm-shop-sidebar {
		position: sticky;
		top: 2rem;
		left: auto;
		width: auto;
		height: auto;
		max-height: calc(100vh - 4rem);
		overflow-y: auto;
		z-index: auto;
		box-shadow: none;
		transition: none;

		padding: 1.25rem;
		background: var(--kwm-sidebar-bg);
		border: 1px solid var(--kwm-sidebar-border);
		border-radius: var(--kwm-card-radius);
	}
}

/* ---- Header sidebara (tytuł + przycisk zamknięcia) ---- */

.kwm-shop-sidebar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--kwm-sidebar-border);
}

.kwm-shop-sidebar__heading {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--kwm-sidebar-heading);
}

/* Przycisk zamknięcia – widoczny tylko na mobile */
.kwm-shop-sidebar__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	color: var(--kwm-color-muted);
	border-radius: 0.375rem;
	transition: background var(--kwm-transition), color var(--kwm-transition);
	flex-shrink: 0;
}

.kwm-shop-sidebar__close:hover {
	background: var(--kwm-sidebar-hover);
	color: var(--kwm-sidebar-icon-hover);
}

.kwm-shop-sidebar__close:focus-visible {
	outline: 2px solid var(--kwm-sidebar-focus);
	outline-offset: 2px;
}

@media (min-width: 768px) {
	.kwm-shop-sidebar__close {
		display: none;
	}
}

/* ---- Lista kategorii ---- */

.kwm-shop-sidebar__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.kwm-shop-sidebar__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border-radius: 0.375rem;
	color: var(--kwm-sidebar-link);
	text-decoration: none;
	font-size: 0.9375rem;
	line-height: 1.4;
	transition: background var(--kwm-transition), color var(--kwm-transition);
}

.kwm-shop-sidebar__link:hover {
	background: var(--kwm-sidebar-hover);
	color: var(--kwm-sidebar-heading);
	text-decoration: none;
}

.kwm-shop-sidebar__link:focus-visible {
	outline: 2px solid var(--kwm-sidebar-focus);
	outline-offset: 1px;
}

/* Aktywna kategoria – subtelny złoty tint + złoty pasek z lewej */
.kwm-shop-sidebar__item--active .kwm-shop-sidebar__link {
	background: var(--kwm-sidebar-active-bg);
	color: var(--kwm-sidebar-active-text);
	font-weight: 600;
	border-left: 3px solid var(--kwm-sidebar-active-border);
	padding-left: calc(0.75rem - 3px); /* kompensacja border-left */
}

.kwm-shop-sidebar__item--active .kwm-shop-sidebar__link:hover {
	background: var(--kwm-sidebar-active-bg);
	color: var(--kwm-sidebar-active-text);
}

.kwm-shop-sidebar__count {
	font-size: 0.8125rem;
	opacity: 0.55;
	flex-shrink: 0;
	white-space: nowrap;
}

/* ---- Overlay ---- */

.kwm-shop-sidebar__overlay {
	display: none;
}

@media (max-width: 767px) {
	.kwm-shop-sidebar__overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: var(--kwm-z-overlay);
		background: rgba(47, 33, 71, 0.55);
		backdrop-filter: blur(2px);
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--kwm-transition);
	}

	.kwm-shop-sidebar__overlay.is-active {
		opacity: 1;
		pointer-events: auto;
	}
}

/* =============================================================================
   5. SIATKA PRODUKTÓW
   WooCommerce renderuje <ul class="products"> przez woocommerce_product_loop_start().
   Nie zmieniamy klas WooCommerce – dodajemy układ przez kontekst (.kwm-shop-content).
   Mobile   (<768px):  1 kolumna – pełna szerokość.
   Tablet+  (≥768px):  2 kolumny – karty szerokie, okładka 16:9 wyraźna.
   4K/wide  (≥1600px): 3 kolumny – dopiero gdy sidebar + content mają dość miejsca.
   ============================================================================= */

.kwm-shop-content ul.products {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (min-width: 768px) {
	.kwm-shop-content ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1600px) {
	.kwm-shop-content ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Toolbar WooCommerce (result count + sortowanie) */
.kwm-shop-content .woocommerce-ordering,
.kwm-shop-content .woocommerce-result-count {
	margin-bottom: 1rem;
	color: var(--kwm-color-muted);
	font-size: 0.875rem;
}

/* =============================================================================
   6. KARTA KURSU
   Własne klasy .kwm-course-card__*.
   Struktura: [image 16:9] → <a flex:1>[category + title]</a> → [footer: cena + CTA]
   Hover: TYLKO box-shadow na karcie + scale(1.03) na obrazie.
   Wszystkie elementy tekstowe mają transform:none !important – stałe i na hover.
   ============================================================================= */

.kwm-course-card {
	display: flex;
	flex-direction: column;
	background: var(--kwm-color-bg);
	border-radius: var(--kwm-card-radius);
	/*
	 * Nieco mocniejszy niż globalne --kwm-shadow-card (które zostaje
	 * niezmienione – używa go też .kwm-gallery-strip__item na stronie
	 * produktu, poza zakresem tej poprawki) – karta w archiwum wyglądała
	 * za płasko. Nadal "bardzo delikatny": tylko blur/opacity w górę,
	 * bez zmiany offsetu ani koloru (ten sam odcień śliwkowy co reszta cieni).
	 */
	box-shadow: 0 2px 10px rgba(47, 33, 71, 0.10);
	overflow: hidden;
	transition: box-shadow var(--kwm-transition);
}

.kwm-course-card:hover {
	box-shadow: var(--kwm-shadow-card-hover);
}

/*
 * ŹRÓDŁO PROBLEMU – blokada Kadence:
 * Kadence i WooCommerce mogą mieć:
 *   .woocommerce ul.products li.product:hover { transform: translateY(-Xpx); }
 *   .woocommerce ul.products li.product:hover .woocommerce-loop-product__title { ... }
 * li.product.kwm-course-card nakłada się na obie klasy – specificity (0,1,0,2) = 102,
 * a !important wygrywa z regułą Kadence bez !important.
 */
li.product.kwm-course-card:hover {
	transform: none !important;
}

/*
 * Twardy blok: żaden element tekstowy nie może zmienić pozycji na hover.
 * Kontruje reguły Kadence/WooCommerce dla :hover .woocommerce-loop-product__title,
 * :hover a, :hover .entry-content i podobne.
 * transition:none !important zapobiega animowaniu POWROTU do pozycji po un-hover.
 *
 * Dodatkowa, bardziej specyficzna wersja selektora (z prefiksem
 * body.woocommerce ul.products) – na wypadek, gdyby Kadence celował w tytuł
 * selektorem o wyższej specyficzności niż nasze (0,3,0,0); ta wersja ma
 * specyficzność (0,4,0,3), więc wygrywa niezależnie od dokładnego selektora
 * Kadence. position:static i margin-top:0 – dodatkowe blokady na wypadek,
 * gdyby "unoszenie" tytułu było robione przez position:relative;top:-Npx
 * albo margin-top:-Npx zamiast transform (stąd tytuł "przykrywał" kategorię
 * nad nim, mimo transform:none).
 */
.kwm-course-card:hover .kwm-course-card__body,
.kwm-course-card:hover .kwm-course-card__link,
.kwm-course-card:hover .kwm-course-card__category,
.kwm-course-card:hover .woocommerce-loop-product__title,
.kwm-course-card:hover .kwm-course-card__footer,
.kwm-course-card:hover .kwm-course-card__price,
.kwm-course-card:hover .kwm-course-card__actions,
body.woocommerce ul.products li.product.kwm-course-card:hover .kwm-course-card__body,
body.woocommerce ul.products li.product.kwm-course-card:hover .kwm-course-card__link,
body.woocommerce ul.products li.product.kwm-course-card:hover .kwm-course-card__category,
body.woocommerce ul.products li.product.kwm-course-card:hover .woocommerce-loop-product__title,
body.woocommerce ul.products li.product.kwm-course-card:hover .kwm-course-card__footer,
body.woocommerce ul.products li.product.kwm-course-card:hover .kwm-course-card__price,
body.woocommerce ul.products li.product.kwm-course-card:hover .kwm-course-card__actions {
	transform: none !important;
	translate: none !important;
	transition: none !important;
	position: static !important;
	top: auto !important;
	bottom: auto !important;
	margin-top: 0 !important;
}

/* ---- Link: okładka + nagłówek ---- */

.kwm-course-card__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	color: inherit;
	text-decoration: none;
	transform: none !important;
	transition: none !important;
}

.kwm-course-card__link:hover {
	color: inherit;
	text-decoration: none;
}

/* ---- Miniatura 16:9 ---- */

.kwm-course-card__image {
	flex-shrink: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--kwm-color-placeholder);
}

.kwm-course-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	transition: transform var(--kwm-transition);
	will-change: transform;
}

.kwm-course-card:hover .kwm-course-card__image img {
	transform: scale(1.03);
}

/* Placeholder gdy brak miniatury */
.kwm-course-card__image-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #F8F7FB 0%, #E6E6EC 100%);
}

/* ---- Body: kategoria + tytuł ---- */

.kwm-course-card__body {
	padding: 1.25rem 1.5rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	transform: none !important;
	transition: none !important;
}

/*
 * Kategoria – bez kolorowego podświetlenia (rezygnacja z wersji chip).
 * Kolor: --kwm-color-muted ("tekst pomocniczy" w palecie) zamiast sage –
 * sage/sage-dark na białym tle nie dają wymaganego kontrastu WCAG AA
 * (odpowiednio ~2.6:1 i ~3:1, potrzeba 4.5:1), --kwm-color-muted daje ~4.8:1.
 * Font-weight 800 i większy margin-bottom (oddech przed tytułem) zostają.
 */
.kwm-course-card__category {
	display: block;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kwm-color-muted);
	line-height: 1;
	margin-bottom: 0.625rem;
	transform: none !important;
	transition: none !important;
}

/* Tytuł kursu – grubszy i ciaśniejszy niż domyślny WC, ta sama premium
   konwencja co .kwm-product-info__title na stronie produktu (font-weight 800,
   ujemny letter-spacing, ścieśniony line-height). */
/*
 * !important na display/box-orient/line-clamp/overflow: bez tego Kadence
 * gdzieś w swoim CSS przebijało nasz display:-webkit-box (tą samą walką
 * specyficzności co hover title lift opisany niżej) — line-clamp wtedy
 * w ogóle się nie włączał, tytuł renderował się w pełnych 3 liniach, a
 * dopiero rodzic (.kwm-course-card__body) obcinał go w połowie 3. linii
 * zamiast czystego zatrzymania na 2. linii z "…".
 */
/*
 * !important na font-size/font-weight/margin/padding: niezależna od
 * wrappera Kadence (patrz kwm_fix_archive_title_markup() w inc/woocommerce.php)
 * reguła bazowa Kadence — .woocommerce ul.products li.product
 * .woocommerce-loop-product__title { font-size:1em; font-weight:500;
 * padding:.5rem 0; } — ma wyższą specyficzność (4 klasy + 2 elementy) niż
 * nasza (2 klasy) i bez !important nadal by wygrywała.
 */
.kwm-course-card__body .woocommerce-loop-product__title {
	font-size: 1.1875rem !important;
	font-weight: 900 !important;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--kwm-color-primary);
	margin: 0 !important;
	padding: 0 !important;
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 2 !important;
	line-clamp: 2 !important;
	overflow: hidden !important;
	transform: none !important;
	transition: none !important;
}

/* ---- Stopka: cena + CTA (stos pionowy) ---- */

.kwm-course-card__footer {
	padding: 0.875rem 1.5rem 1.25rem;
	border-top: 1px solid var(--kwm-color-border);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	transform: none !important;
	transition: none !important;
}

/* Cena regularna – font-weight 600 (nie 700) i lekko ujemny letter-spacing,
   ta sama premium konwencja co tytuł/cena na stronie produktu. */
.kwm-course-card__price .price {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--kwm-color-primary);
	line-height: 1.3;
}

/* Cena stara w promocji (del): mniejsza, przekreślona, wyciszona */
.kwm-course-card__price .price del {
	display: inline;
	text-decoration: line-through;
	opacity: 0.85;
	margin-right: 0.375rem;
}

.kwm-course-card__price .price del,
.kwm-course-card__price .price del .woocommerce-Price-amount {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--kwm-color-muted);
}

/* Cena promocyjna (ins): mocna, śliwkowa, bez podkreślenia. Nie czerwona. */
.kwm-course-card__price .price ins {
	display: inline;
	text-decoration: none;
}

.kwm-course-card__price .price ins .woocommerce-Price-amount {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--kwm-color-primary);
}

/* =============================================================================
   8. SINGLE PRODUCT – HERO
   Obraz poziomy (landscape). Desktop: obraz po lewej 7fr (~58%), info 5fr (~42%).
   Obraz wyróżnia się box-shadow + bg-subtle + border-radius.
   Karta okładki (.kwm-product-cover) MA WYSOKOŚĆ WYNIKAJĄCĄ Z OBRAZU 16:9 –
   celowo bez align-items:stretch na .kwm-product-hero, bo to rozciągało
   dekoracyjne pudełko (box-shadow/border-radius/tło) karty do wysokości
   dłuższej kolumny info, zostawiając pustą przestrzeń pod zdjęciem WEWNĄTRZ
   karty. Zamiast tego: align-items:center na .kwm-product-hero + align-self:
   center i height:auto na .kwm-product-cover – karta zawsze ma wysokość
   zdjęcia, a .kwm-product-info centruje się względem niej jako całość
   (patrz komentarz przy .kwm-product-hero niżej).
   ============================================================================= */

.kwm-single-product {
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	/*
	 * --kwm-back-to-shop-gap = margin-bottom, którego .kwm-back-to-shop
	 * niżej używa do odstępu link → karta produktu. padding-top liczony
	 * z tej SAMEJ zmiennej przez calc(* 2), więc odstęp menu → link jest
	 * ZAWSZE dokładnie 2x większy niż link → karta, na każdej szerokości
	 * ekranu – wystarczy zmieniać wartość zmiennej w jednym miejscu
	 * (mobile-first: mniejsza baza niżej, większa w @media ≥768px),
	 * bez ręcznego pilnowania dwóch osobnych wartości w synchronizacji.
	 */
	--kwm-back-to-shop-gap: 1.125rem;
	padding-top: calc(var(--kwm-back-to-shop-gap) * 2);
	padding-bottom: clamp(2rem, 4vw, 4rem);
}

@media (min-width: 768px) {
	.kwm-single-product {
		--kwm-back-to-shop-gap: 1.5rem;
	}
}

/* ---- Link "Wróć do sklepu" (zastępuje breadcrumbs, tylko single product) ---- */

.kwm-back-to-shop {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-bottom: var(--kwm-back-to-shop-gap);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--kwm-color-muted);
	text-decoration: none;
	transition: color 0.2s ease;
}

.kwm-back-to-shop:hover,
.kwm-back-to-shop:focus-visible {
	color: var(--kwm-color-accent);
}

.kwm-back-to-shop:focus-visible {
	outline: 2px solid var(--kwm-color-focus-ring);
	outline-offset: 3px;
	border-radius: 2px;
}

.kwm-back-to-shop__arrow {
	line-height: 1;
}

/*
 * Zabezpieczenie: kwm_remove_single_product_breadcrumb() (inc/woocommerce.php)
 * usuwa domyślny woocommerce_breadcrumb() z woocommerce_before_main_content,
 * ale Kadence (motyw nadrzędny) może renderować WŁASNY ślad breadcrumbs inną
 * ścieżką (własny hook/klasa), niezależną od WooCommerce – bez dostępu do
 * źródeł Kadence nie da się tego zweryfikować/dokładnie odpiąć w PHP.
 *
 * [class*="breadcrumb"] chwyta dowolną implementację niezależnie od
 * dokładnej nazwy klasy (WooCommerce: .woocommerce-breadcrumb, Kadence:
 * zwykle .kadence-breadcrumbs lub podobna) – scoped tylko do
 * body.single-product (klasa dodawana automatycznie przez WP/WC), więc
 * breadcrumbs na archiwum/blogu/innych stronach zostają bez zmian.
 */
body.single-product [class*="breadcrumb"] {
	display: none;
}

/* ---- Hero grid ---- */

.kwm-product-hero {
	display: grid;
	gap: 1.75rem;
}

@media (min-width: 768px) {
	.kwm-product-hero {
		grid-template-columns: 7fr 5fr;
		gap: clamp(1.75rem, 3.5vw, 3rem);
		/*
		 * align-items: center (NIE stretch) – symetryczne centrowanie w OBIE
		 * strony, bez wyjątków: żaden z dwóch elementów wiersza nigdy nie jest
		 * rozciągany, każdy zachowuje swoją naturalną wysokość (obraz 16:9 –
		 * .kwm-product-cover; treść – .kwm-product-info). Wysokość wiersza =
		 * wysokość WYŻSZEGO z nich; KRÓTSZY element centruje się względem
		 * niego w pionie:
		 *
		 *   – galeria dłuższa niż info (prosty produkt bez cech/startu/limitu)
		 *     → .kwm-product-info (krótszy) centruje się względem galerii;
		 *   – info dłuższe niż galeria (kurs z listą cech + blokiem
		 *     start/limit) → .kwm-product-cover (krótszy) centruje się
		 *     względem info.
		 *
		 * Działa automatycznie z samego align-items: center na tym poziomie –
		 * oba elementy dziedziczą je jako swój align-self, więc to ZAWSZE
		 * krótszy się centruje, niezależnie od tego, która strona akurat jest
		 * dłuższa w danym produkcie. Dłuższy element z definicji wypełnia
		 * całą wysokość wiersza, więc "centrowanie" nie ma dla niego żadnego
		 * efektu (0 wolnej przestrzeni do rozdystrybuowania) – i o to chodzi.
		 */
		align-items: center;
	}
}

/* ---- Okładka produktu ---- */

.kwm-product-cover {
	border-radius: 10px;
	overflow: hidden;
	/* Subtelne tło – widoczne gdy obraz się ładuje lub ma przezroczystość */
	background: var(--kwm-color-bg-subtle);
	/* Cień odróżnia od tła strony – zbliżony do karty archiwum, ale mocniejszy */
	box-shadow:
		0 2px 8px  rgba(47, 33, 71, 0.07),
		0 8px 32px rgba(47, 33, 71, 0.13);
}

@media (min-width: 768px) {
	.kwm-product-cover {
		/*
		 * Jawne align-self:center + height:auto – karta NIGDY nie rozciąga
		 * się do wysokości .kwm-product-info (patrz komentarz przy
		 * .kwm-product-hero powyżej). Wysokość karty = wysokość obrazu 16:9.
		 */
		align-self: center;
		height: auto;
	}
}

/*
 * Kadr 16:9 na każdej szerokości – naturalna wysokość wynikająca z
 * aspect-ratio, karta (.kwm-product-cover) nigdy nie jest wyższa niż to
 * zdjęcie (patrz align-self:center + height:auto powyżej). object-fit:
 * cover kadruje bez zniekształceń, bez pustej przestrzeni.
 */
.kwm-product-cover__img,
.kwm-product-cover img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.kwm-product-cover__placeholder {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--kwm-color-bg-subtle) 0%, var(--kwm-color-border) 100%);
}

/* ---- Blok info ----
   Wyśrodkowana w poziomie: align-items: center centruje badge/tytuł/cenę
   (elementy shrink-to-fit, patrz text-align: center niżej), a .kwm-product-info__cart/
   __features/__meta dostają jawne width: 100%, żeby nie skurczyły się razem
   z resztą (m.in. przycisk CTA ma width: 100% względem SWOJEGO rodzica –
   bez tego jawnego overrida skurczyłby się nieprzewidywalnie).

   Bez justify-content – .kwm-product-hero nie ma już align-items:stretch
   (patrz wyżej), więc ta kolumna nigdy nie dostaje dodatkowej wysokości od
   grida do rozdystrybuowania; jej box zawsze === wysokość własnej treści. */

.kwm-product-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
}

.kwm-product-info__cart,
.kwm-product-info__features,
.kwm-product-info__meta {
	width: 100%;
}

/* Kategoria – złoty eyebrow
   Mały, uppercase, szeroki spacing – "Premium" feel */
.kwm-product-info__eyebrow {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kwm-color-accent); /* #C7A96B złoty */
}

/* Tytuł – węższy niż landing page H1, bo kolumna jest węższa.
   line-height/letter-spacing lekko ścieśnione – premium, zwarty nagłówek. */
.kwm-product-info__title {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 800;
	color: var(--kwm-color-primary); /* #2F2147 */
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0;
	max-width: 26ch;
}

/* ---- Cena ---- */

.kwm-product-info__price .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Stara cena – mała, wyciszona, z kreską */
.kwm-product-info__price .price del .woocommerce-Price-amount {
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--kwm-color-muted);
}

.kwm-product-info__price .price ins {
	text-decoration: none;
}

/*
 * Cena promocyjna – dominująca, śliwkowa, gruba. Powiększona względem
 * poprzedniej wersji (2.125rem), format ceny (grosze, waluta, separator)
 * pozostaje w 100% z wc_price()/get_price_html() – to tylko font-size.
 */
.kwm-product-info__price .price ins .woocommerce-Price-amount,
.kwm-product-info__price .price > .woocommerce-Price-amount {
	font-size: clamp(2rem, 5vw, 2.75rem);
	font-weight: 800;
	color: var(--kwm-color-primary); /* #2F2147 */
	line-height: 1;
}

/* Raty – bezpośrednio pod ceną, minimalne */
.kwm-product-info__installment {
	font-size: 0.775rem;
	color: var(--kwm-color-muted);
	margin-top: -0.375rem; /* blisko ceny */
}

/*
 * Cena — produkty stworzone w edytorze blokowym (Product Editor).
 * Te produkty NIE przechodzą przez woocommerce/content-single-product.php
 * (nasz klasyczny szablon z .kwm-product-info__price) — renderują się przez
 * blok WooCommerce "Product Price", który tylko owija get_price_html()
 * w .wc-block-components-product-price zamiast w naszą klasę. Środek
 * (.price / .woocommerce-Price-amount) jest identyczny, więc dublujemy
 * te same reguły, żeby cena wyglądała spójnie niezależnie od tego, jakim
 * edytorem powstał produkt (zgłoszenie: cena "69 zł" wyglądała blado na
 * karcie ebooka, mimo że w innych produktach jest już duża i pogrubiona).
 */
.single-product .wc-block-components-product-price .price del .woocommerce-Price-amount {
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--kwm-color-muted);
}
.single-product .wc-block-components-product-price .price ins {
	text-decoration: none;
}
.single-product .wc-block-components-product-price .price ins .woocommerce-Price-amount,
.single-product .wc-block-components-product-price .price > .woocommerce-Price-amount {
	font-size: clamp(2rem, 5vw, 2.75rem);
	font-weight: 800;
	color: var(--kwm-color-primary); /* #2F2147 */
	line-height: 1;
}

/*
 * Tytuł — blok "Product Title" (edytor blokowy) renderuje
 * .wc-block-components-product-title (zweryfikowane w skompilowanym
 * assets/client/blocks/product-title.css z paczki WooCommerce). Lustrzane
 * odbicie .kwm-product-info__title.
 */
.single-product .wc-block-components-product-title {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 800;
	color: var(--kwm-color-primary); /* #2F2147 */
	line-height: 1.08;
	letter-spacing: -0.01em;
}

/*
 * Przycisk "Dodaj do koszyka" — blok "Product Button" renderuje zawsze
 * klasę .wc-block-components-product-button__button (zweryfikowane w
 * src/Blocks/BlockTypes/ProductButton.php i skompilowanym product-button.css).
 * Lustrzane odbicie .kwm-product-info__cart .single_add_to_cart_button.
 */
.single-product .wc-block-components-product-button__button {
	display: flex;
	width: 100%;
	min-height: 54px;
	padding: 15px 24px;
	background: var(--kwm-color-primary) !important; /* #2F2147 */
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(47, 33, 71, 0.15);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}
.single-product .wc-block-components-product-button__button:hover {
	background: var(--kwm-color-primary-hover) !important; /* #241937 */
	box-shadow: 0 12px 30px rgba(47, 33, 71, 0.20);
	transform: translateY(-1px);
}
.single-product .wc-block-components-product-button__button:focus-visible {
	outline: 2px solid var(--kwm-color-focus-ring); /* #C7A96B złoty */
	outline-offset: 3px;
}

/* ---- Formularz add-to-cart ---- */

/* Dodatkowy oddech nad CTA – ponad gap: 1rem z .kwm-product-info, żeby
   cena/raty wyraźnie odseparować od przycisku "Dodaj do koszyka". */
.kwm-product-info__cart {
	margin-top: 0.75rem;
}

.kwm-product-info__cart .cart {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/*
 * Ukryj quantity – zawsze kupuje się 1 sztukę/miejsce, niezależnie od typu
 * produktu (proste kursy i warianty/pakiety traktujemy tak samo — decyzja
 * świadoma, nie tylko dla prostych produktów).
 * !important konieczne: dla wariantów Kadence dokłada własny stepper +/-
 * (kadence-shop-spinner, wstrzykiwany przez JS bezpośrednio do .quantity),
 * i bez !important ten div i tak się przebijał na produktach z pakietami.
 */
.kwm-product-info__cart .quantity {
	display: none !important;
}

/*
 * Produkt wariantowy: WooCommerce renderuje formularz jako
 * single-product/add-to-cart/variable.php, gdzie woocommerce_after_add_to_cart_button
 * (czyli nasz Trust Box, kwm_render_product_trust_box w inc/woocommerce.php)
 * ląduje WEWNĄTRZ .woocommerce-variation-add-to-cart.variations_button, a nie
 * jako zwykły blokowy sibling przycisku jak w simple.php. Ten wrapper bywa
 * flex/inline (WC/Kadence layout na quantity+button obok siebie), więc Trust
 * Box stawał się kolejnym elementem TEGO SAMEGO rzędu – wyświetlał się obok
 * przycisku zamiast pod nim. Wymuszamy block – i tak nic więcej w tym
 * wrapperze nie potrzebuje flexa, bo quantity jest ukryte powyżej.
 */
.kwm-product-info__cart .woocommerce-variation-add-to-cart,
.kwm-product-info__cart .variations_button {
	display: block !important;
}

/*
 * Przycisk CTA – premium, spokojny, pełna szerokość.
 * Wysokość/padding mobile-first (base = mobile), nadpisane na desktopie w
 * @media (min-width: 768px) poniżej – konwencja zgodna z resztą pliku.
 * !important na background/color: konieczne, by przebić globalny .button
 * WooCommerce/Kadence (ta sama konwencja co gdzie indziej w tym pliku).
 */
.kwm-product-info__cart .single_add_to_cart_button {
	display: block;
	width: 100%;
	min-height: 54px;
	padding: 15px 24px;
	background: var(--kwm-color-primary) !important; /* #2F2147 */
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(47, 33, 71, 0.15);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
}

@media (min-width: 768px) {
	.kwm-product-info__cart .single_add_to_cart_button {
		min-height: 58px;
		padding: 16px 28px;
	}
}

.kwm-product-info__cart .single_add_to_cart_button:hover {
	background: var(--kwm-color-primary-hover) !important; /* #241937 */
	box-shadow: 0 12px 30px rgba(47, 33, 71, 0.20);
	transform: translateY(-1px);
}

.kwm-product-info__cart .single_add_to_cart_button:focus-visible {
	outline: 2px solid var(--kwm-color-focus-ring); /* #C7A96B złoty – akcent premium, nie tło */
	outline-offset: 3px;
}

/* disabled/wc-variation-selection-needed – produkt wariantowy przed wyborem wariantu */
.kwm-product-info__cart .single_add_to_cart_button.disabled,
.kwm-product-info__cart .single_add_to_cart_button:disabled {
	cursor: not-allowed;
	opacity: 0.55;
	box-shadow: none;
	transform: none;
}

/*
 * ---- Wybór wariantu ("Pakiet") — produkty wariantowe ----
 * WooCommerce renderuje to jako gołą <table class="variations"> bez żadnej
 * klasy na <select> (patrz templates/single-product/add-to-cart/variable.php
 * i wc_dropdown_variation_attribute_options() w wc-template-functions.php —
 * $args['class'] jest domyślnie puste, callera w variable.php też go nie
 * ustawia). Jedyny stabilny hak to sam tag <select> w obrębie .variations.
 * Zgłoszenie: brak jakiejkolwiek stylizacji, wygląda jak przeglądarkowy
 * default, zamiast spójnie z resztą karty produktu.
 */
.kwm-product-info__cart .variations {
	width: 100%;
	max-width: 320px;
	margin: 0.5rem auto 0;
	border-collapse: collapse;
}
.kwm-product-info__cart .variations tbody,
.kwm-product-info__cart .variations tr,
.kwm-product-info__cart .variations th,
.kwm-product-info__cart .variations td {
	display: block;
	width: 100%;
	text-align: center;
	padding: 0;
	border: none;
}
.kwm-product-info__cart .variations th.label {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--kwm-color-text);
	margin-bottom: 0.5rem;
}
.kwm-product-info__cart .variations td.value {
	margin-bottom: 0.375rem;
}

/* Strzałka w SVG zamiast systemowej — kolor = var(--kwm-color-muted) #6F7282,
   wpisany na sztywno bo custom properties nie działają wewnątrz data-URI. */
.kwm-product-info__cart .variations select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	display: block;
	margin: 0 auto;
	padding: 0.75rem 2.25rem;
	font-size: 0.9375rem;
	color: var(--kwm-color-text);
	background-color: #ffffff;
	border: 1px solid var(--kwm-color-border);
	border-radius: 10px;
	text-align: center;
	text-align-last: center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236F7282' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 10px;
	cursor: pointer;
	transition: border-color 0.15s ease;
}
.kwm-product-info__cart .variations select:hover {
	border-color: var(--kwm-color-primary);
}
.kwm-product-info__cart .variations select:focus-visible {
	outline: 2px solid var(--kwm-color-focus-ring); /* #C7A96B złoty */
	outline-offset: 2px;
	border-color: var(--kwm-color-primary);
}

.kwm-product-info__cart .reset_variations {
	display: inline-block;
	margin-top: 0.625rem;
	font-size: 0.8125rem;
	color: var(--kwm-color-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.kwm-product-info__cart .reset_variations:hover {
	color: var(--kwm-color-primary);
}

/* Opis / cena / dostępność wybranego wariantu (wstrzykiwane przez JS
   z templates/single-product/add-to-cart/variation.php) */
.kwm-product-info__cart .single_variation_wrap {
	width: 100%;
	text-align: center;
}
.kwm-product-info__cart .woocommerce-variation-description {
	font-size: 0.9375rem;
	color: var(--kwm-color-muted);
	line-height: 1.6;
	margin: 0.75rem 0;
}
.kwm-product-info__cart .woocommerce-variation-description p {
	margin: 0;
}
.kwm-product-info__cart .woocommerce-variation-price .price {
	display: flex;
	justify-content: center;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}
.kwm-product-info__cart .woocommerce-variation-price .price del .woocommerce-Price-amount {
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--kwm-color-muted);
}
.kwm-product-info__cart .woocommerce-variation-price .price ins {
	text-decoration: none;
}
.kwm-product-info__cart .woocommerce-variation-price .price ins .woocommerce-Price-amount,
.kwm-product-info__cart .woocommerce-variation-price .price > .woocommerce-Price-amount {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--kwm-color-primary);
}
.kwm-product-info__cart .woocommerce-variation-availability {
	font-size: 0.8125rem;
	color: var(--kwm-color-sage-dark);
	margin-bottom: 0.5rem;
}

/*
 * Trust Box pod CTA (kwm_render_product_trust_box, inc/woocommerce.php).
 * Treść zależna od typu produktu (_kwm_product_trust_box_type) – patrz
 * kwm_get_product_trust_box_lines(). Lekka, premium: bez tła, bez cienia,
 * subtelny border-top jako jedyny separator od przycisku. Wartości padding/
 * margin/font-size/line-height zgodne z wytycznymi zadania – bez wariantów
 * responsywnych, bo sekcja to zawsze pojedyncza kolumna krótkich linii.
 */
.kwm-product-trust-box {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--kwm-color-border);
	background: transparent;
}

.kwm-product-trust-box__line {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--kwm-color-muted);
}

.kwm-product-trust-box__line + .kwm-product-trust-box__line {
	margin-top: 0.375rem;
}

.kwm-product-trust-box__icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--kwm-color-muted);
	line-height: 1;
	margin-top: 0.125rem;
}

.kwm-product-trust-box__svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.85;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kwm-product-trust-box__svg--accent {
	color: var(--kwm-color-accent); /* #C7A96B złoty – akcent premium */
}

/* ---- Lista zalet (checkmarki złote) ---- */

.kwm-product-info__features {
	list-style: none;
	padding: 0.75rem 0 0;
	margin: 0;
	border-top: 1px solid var(--kwm-color-border);
	display: flex;
	flex-direction: column;
}

.kwm-product-info__features li {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--kwm-color-text);
	padding: 0.3125rem 0;
}

.kwm-product-info__features li::before {
	content: '✓';
	flex-shrink: 0;
	color: var(--kwm-color-accent); /* złoty checkmark */
	font-weight: 700;
	font-size: 0.8125rem;
	margin-top: 0.1rem;
}

/* ---- Meta: data + limit – przyklejona do dołu info ---- */

.kwm-product-info__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 1.5rem;
	padding: 0.75rem 1rem;
	background: var(--kwm-color-bg-subtle);
	border: 1px solid var(--kwm-color-border);
	border-radius: 6px;
}

.kwm-product-info__meta-item {
	font-size: 0.8125rem;
	color: var(--kwm-color-muted);
	margin: 0;
	line-height: 1.4;
}

.kwm-product-info__meta-item strong {
	color: var(--kwm-color-primary);
	font-weight: 700;
}

.kwm-product-info__meta-item--limit {
	color: var(--kwm-color-primary);
	font-weight: 600;
}

/* =============================================================================
   9. POZIOMA GALERIA PRODUKTU
   Zdjęcia z galerii WooCommerce (nie featured image) w poziomym scrollu.
   Pionowe kadry (aspect-ratio 3:4) – dopasowane do zdjęć kursu.
   Mobile/tablet: scroll z snap. Desktop: flex wrap jeśli ≤4 zdjęcia.
   ============================================================================= */

.kwm-gallery-strip {
	margin-block: clamp(2rem, 4vw, 3.5rem);
	/* Wychodzi poza padding .kwm-single-product na mobile */
	margin-inline: -1.25rem;
	padding-inline: 1.25rem;
}

@media (min-width: 1024px) {
	.kwm-gallery-strip {
		margin-inline: 0;
		padding-inline: 0;
	}
}

.kwm-gallery-strip__track {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.875rem; /* miejsce na scrollbar */
	scrollbar-width: thin;
	scrollbar-color: var(--kwm-color-border) transparent;
}

.kwm-gallery-strip__track::-webkit-scrollbar      { height: 4px; }
.kwm-gallery-strip__track::-webkit-scrollbar-track { background: transparent; }
.kwm-gallery-strip__track::-webkit-scrollbar-thumb {
	background: var(--kwm-color-border);
	border-radius: 2px;
}

.kwm-gallery-strip__item {
	flex-shrink: 0;
	width: clamp(200px, 28vw, 260px);
	scroll-snap-align: start;
	margin: 0;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: var(--kwm-shadow-card);
}

.kwm-gallery-strip__img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	transition: transform var(--kwm-transition);
}

.kwm-gallery-strip__item:hover .kwm-gallery-strip__img {
	transform: scale(1.03);
}

/* =============================================================================
   10. OPIS PRODUKTU (LANDING W GUTENBERGU)
   Zakładki WooCommerce usunięte w kwm_remove_product_tabs() (inc/woocommerce.php).
   Zamiast nich – pełny post_content produktu renderowany przez
   kwm_render_product_landing_content(), bez ograniczenia szerokości: opis ma
   pomieścić dowolny układ bloków Gutenberga, w tym bloki pełnej szerokości.
   ============================================================================= */

.kwm-product-description {
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* =============================================================================
   7. PRZYCISKI CTA W KARCIE
   Specificity (0,3,0,0) = 300 – przebija globalne reguły Kadence/WC dla a/.button.
   !important na background/color primary: gwarancja widoczności przy nadpisaniach motywu.
   ============================================================================= */

.kwm-course-card .kwm-course-card__footer .kwm-course-card__view-link,
.kwm-course-card .kwm-course-card__footer .kwm-course-card__add-to-cart {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.5625rem 1rem;
	border-radius: 0.375rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: 1.5px solid transparent;
	box-sizing: border-box;
	transition: background var(--kwm-transition), color var(--kwm-transition), border-color var(--kwm-transition);
}

/* Primary – "Zobacz więcej" */
.kwm-course-card .kwm-course-card__footer .kwm-course-card__view-link {
	background: var(--kwm-color-primary) !important; /* #2F2147 */
	color: #ffffff !important;
	border-color: var(--kwm-color-primary);
}

.kwm-course-card .kwm-course-card__footer .kwm-course-card__view-link:hover {
	background: var(--kwm-color-primary-hover) !important; /* #241937 */
	border-color: var(--kwm-color-primary-hover);
	color: #ffffff !important;
	text-decoration: none;
}

.kwm-course-card .kwm-course-card__footer .kwm-course-card__view-link:focus-visible {
	outline: 2px solid var(--kwm-color-primary);
	outline-offset: 2px;
	color: #ffffff !important;
}

/* Secondary – "Dodaj do koszyka" (outline, nie czerwony, nie filled) */
.kwm-course-card .kwm-course-card__footer .kwm-course-card__add-to-cart {
	background: transparent !important;
	color: var(--kwm-color-primary) !important;
	border-color: var(--kwm-color-primary);
}

.kwm-course-card .kwm-course-card__footer .kwm-course-card__add-to-cart:hover {
	background: var(--kwm-color-secondary-hover-bg) !important;
	color: var(--kwm-color-primary) !important;
	text-decoration: none;
}

.kwm-course-card .kwm-course-card__footer .kwm-course-card__add-to-cart:focus-visible {
	outline: 2px solid var(--kwm-color-primary);
	outline-offset: 2px;
}