:root {
	--mk-brand-dark: #32271a;
	--mk-brand-dark-hover: #1a1a1a;
}

.mk-font-cormorant {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 400;
	font-style: normal;
}

html,
body {
	/* Panel menu mobilnego (.mk-drawer) stoi poza ekranem po prawej
	   (right:0 + translateX(100%)), co bez tego potrafi rozciągnąć
	   szerokość dokumentu i pozwolić na przewijanie strony w bok. */
	max-width: 100%;
	overflow-x: hidden;
}

body {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 500;
}

p {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 500;
}

/* Kontrolki formularzy nie dziedziczą fontu z body — wymuszamy Cormorant,
   żeby cały serwis był spójny (Inter całkowicie usunięty). */
input,
textarea,
select,
button {
	font-family: 'Cormorant Garamond', Georgia, serif;
}

#page.site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

main.site-main {
	flex: 1 0 auto;
}

.site-footer {
	margin-top: auto;
}

a:where(:not(.wp-element-button)) {
	text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	/* Nagłówki: Cinzel (ozdobny serif wersalikowy) — zgodnie z projektem Figma. */
	font-family: 'Cinzel', Georgia, serif;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.site-header {
	background-color: transparent;
}

body.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

body.admin-bar .site-header:not(.is-home-fixed) {
	top: auto;
}

.site-header a,
.site-header .menu a {
	color: inherit;
	text-decoration: none;
}

.site-header .custom-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

/* Logo — jedno źródło prawdy.
   Wcześniej header.php miał klasy Tailwind max-h-[60px]/[48px], ale ta reguła
   ma wyższą specyficzność i i tak je nadpisywała (logo wszędzie 75px).
   Teraz rozmiar sterowany tylko stąd. */
.site-header .custom-logo {
	display: block;
	width: auto;
	height: auto;
	max-height: 80px;
}

@media (min-width: 768px) {
	.site-header .custom-logo {
		max-height: 96px;
	}
}

/* Stopka: logo na jasnym tle bywa mało kontrastowe — powiększamy dla czytelności. */
.site-footer .footer-logo,
.site-footer .custom-logo {
	max-height: 104px !important;
}

/* ─── Menu mobilne: panel wysuwany z prawej ─────────────── */
/* z-index 60 — panel przykrywa header (z-50), dlatego ma własny przycisk X;
   hamburger byłby pod spodem i nie dałoby się nim zamknąć. */
.mk-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	width: min(86vw, 340px);
	background: #fbf4ed;
	color: #32271a;
	backdrop-filter: blur(8px);
	box-shadow: -18px 0 40px rgba(50, 36, 30, 0.28);
	transform: translateX(100%);
	visibility: hidden;
	transition:
		transform 300ms ease,
		visibility 300ms ease;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mk-drawer.is-open {
	transform: translateX(0);
	visibility: visible;
}

.mk-drawer__head {
	display: flex;
	justify-content: flex-end;
	padding: 1rem 1rem 0;
}

.mk-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	color: #32271a;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: background-color 150ms ease;
}

.mk-drawer__close:hover {
	background: rgba(50, 39, 26, 0.08);
}

.mk-drawer__body {
	padding: 0.5rem 1.5rem 2rem;
}

.mk-drawer__cta {
	display: inline-flex;
	margin-top: 2rem;
	padding: 0.75rem 1.5rem;
	border: 1px solid rgba(193, 145, 112, 0.5);
	border-radius: 0.375rem;
	color: #32271a;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.mk-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 55;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 300ms ease,
		visibility 300ms ease;
}

.mk-drawer-backdrop.is-open {
	opacity: 1;
	visibility: visible;
}

/* Blokada przewijania strony pod otwartym panelem */
body.mk-drawer-open {
	overflow: hidden;
}

/* ─── Hamburger ─────────────────────────────────────────── */
.mk-burger__box {
	position: relative;
	display: block;
	width: 22px;
	height: 16px;
}

.mk-burger__line {
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition:
		transform 220ms ease,
		opacity 160ms ease,
		top 220ms ease;
}

.mk-burger__line:nth-child(1) {
	top: 0;
}
.mk-burger__line:nth-child(2) {
	top: 7px;
}
.mk-burger__line:nth-child(3) {
	top: 14px;
}

/* Po otwarciu menu hamburger zmienia się w X */
.mk-burger[aria-expanded='true'] .mk-burger__line:nth-child(1) {
	top: 7px;
	transform: rotate(45deg);
}

.mk-burger[aria-expanded='true'] .mk-burger__line:nth-child(2) {
	opacity: 0;
}

.mk-burger[aria-expanded='true'] .mk-burger__line:nth-child(3) {
	top: 7px;
	transform: rotate(-45deg);
}

/* ─── Ikony SVG/PNG wrzucane w blokach (tint brand #6D2A3C) ─ */
.mk-block-icon {
	filter: brightness(0) saturate(100%) invert(18%) sepia(17%) saturate(2350%) hue-rotate(296deg) brightness(95%)
		contrast(91%);
}

/* ─── Karty w siatce: wyrównanie wiersza tytułu ─────────── */
/* Problem: tytuły kart mają różną liczbę linii (1–3), więc listy pod nimi
   startowały na różnych wysokościach i rząd kart wyglądał na rozjechany.
   Subgrid sprawia, że wiersz „tytuł" jest WSPÓLNY dla całego rzędu kart —
   wysokość bierze z najdłuższego tytułu, a listy równają się same.
   Bez magicznych min-height, które psują się przy innej treści. */
@supports (grid-template-rows: subgrid) {
	.mk-cards-grid > .mk-card {
		grid-row: span 2;
		display: grid;
		grid-template-rows: subgrid;
		/* Subgrid dziedziczy gap rodzica (gap-6 = 24px) — tu byłby to odstęp
		   między tytułem a listą. Zerujemy; odstęp daje `mt-4` na <ul>. */
		row-gap: 0;
	}
}

/* ─── Kropka punktora list (złota) ──────────────────────── */
/* Kropka ma trafiać w środek PIERWSZEJ linii tekstu, niezależnie od tego,
   ile linii ma pozycja i jaka jest interlinia.
   Wcześniej był sztywny `mt-2` (8px) — po zwiększeniu interlinii linia urosła
   i kropka wisiała za wysoko.
   `1lh` = realna wysokość linii elementu, więc wylicza się samo. */
.mk-bullet {
	margin-top: 11px; /* fallback dla starszych przeglądarek bez jednostki lh */
	margin-top: calc((1lh - 0.375rem) / 2);
}

/* ─── Licznik koszyka w headerze ────────────────────────── */
.mk-header-cart__count {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: #6d2a3c;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	pointer-events: none;
}

.mk-header-cart__count.is-empty {
	display: none;
}

/* ─── Quiz „Twoja ścieżka": znaczniki wyboru + stan aktywny ─── */
.mk-quiz-mark {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 2px solid #d8cec1;
	border-radius: 6px;
	position: relative;
	transition:
		border-color 0.15s ease,
		background-color 0.15s ease;
}

.mk-quiz-mark--radio {
	border-radius: 9999px;
}

.mk-quiz-option.is-selected {
	border-color: #6d2a3c;
	background: #f6eef0;
}

.mk-quiz-option.is-selected .mk-quiz-mark {
	border-color: #6d2a3c;
	background: #6d2a3c;
}

/* Checkmark w polu wielokrotnego wyboru */
.mk-quiz-option.is-selected .mk-quiz-mark:not(.mk-quiz-mark--radio)::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 2px;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Kropka w polu jednokrotnego wyboru */
.mk-quiz-option.is-selected .mk-quiz-mark--radio::after {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 9999px;
	background: #fff;
}

/* Focus dla dostępności (klawiatura) */
.mk-quiz-check:focus-visible + .mk-quiz-mark {
	outline: 2px solid #6d2a3c;
	outline-offset: 2px;
}

/* Przyciski CTA są w pełni ostylowane klasami Tailwinda w szablonach
   (kanoniczny zestaw: inline-flex … px-[26px] py-[16px] rounded-full font-normal
   text-[14px] md:text-[19px] uppercase leading-[1.2] no-underline).
   Żadnych nadpisań !important tutaj — Tailwind jest źródłem prawdy. */

.site-header .menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header .menu-item {
	position: relative;
}

.site-header .mk-primary-menu > .menu-item-has-children {
	padding-bottom: 0.75rem;
	margin-bottom: -0.75rem;
}

.site-header .mk-primary-menu > .menu-item-has-children::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0.85rem;
}

.site-header .mk-primary-menu > .menu-item > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0;
	letter-spacing: 0.08em;
	transition:
		color 180ms ease,
		opacity 180ms ease;
}

.site-header .mk-primary-menu > .menu-item > a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -0.35rem;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 220ms ease;
	opacity: 0.8;
}

.site-header .mk-primary-menu > .menu-item:hover > a::after,
.site-header .mk-primary-menu > .menu-item:focus-within > a::after,
.site-header .mk-primary-menu > .current-menu-item > a::after,
.site-header .mk-primary-menu > .current-menu-ancestor > a::after {
	transform: scaleX(1);
}

.site-header .mk-primary-menu > .menu-item:hover > a,
.site-header .mk-primary-menu > .menu-item:focus-within > a {
	opacity: 0.92;
}

.site-header .mk-primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 8px);
	min-width: 220px;
	padding: 0.55rem;
	border: 1px solid #e0d9d1;
	border-radius: 0.65rem;
	background: #fbf4ed;
	backdrop-filter: blur(8px);
	box-shadow: 0 14px 30px rgba(50, 36, 30, 0.16);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* pointer-events przełącza się na "none" dopiero PO dokończeniu zanikania
	   (delay = czas trwania) — inaczej myszka traci możliwość najechania na
	   podmenu w ułamku sekundy, zanim animacja się w ogóle skończy. */
	transition:
		opacity 200ms ease,
		transform 200ms ease,
		visibility 200ms ease,
		pointer-events 0ms 200ms;
	z-index: 90;
}

.site-header .mk-primary-menu > .menu-item-has-children > a {
	padding-right: 0.9rem;
}

.site-header .mk-primary-menu > .menu-item-has-children > a::before {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transform: translateY(-35%);
	opacity: 0.85;
}

.site-header .mk-primary-menu .sub-menu::before {
	content: '';
	position: absolute;
	top: -6px;
	left: 50%;
	width: 12px;
	height: 12px;
	background: #fbf4ed;
	border-left: 1px solid #e0d9d1;
	border-top: 1px solid #e0d9d1;
	transform: translateX(-50%) rotate(45deg);
}

.site-header .mk-primary-menu .menu-item-has-children:hover > .sub-menu,
.site-header .mk-primary-menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	pointer-events: auto;
	/* Przy otwieraniu pointer-events ma zadziałać od razu, bez opóźnienia
	   odziedziczonego z reguły zamykania powyżej. */
	transition:
		opacity 200ms ease,
		transform 200ms ease,
		visibility 200ms ease,
		pointer-events 0ms;
}

.site-header .mk-primary-menu .sub-menu li + li {
	margin-top: 0.2rem;
}

.site-header .mk-primary-menu .sub-menu a {
	display: block;
	padding: 0.55rem 0.65rem;
	border-radius: 0.45rem;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: #32271a;
	transition:
		background-color 180ms ease,
		color 180ms ease;
}

.site-header .mk-primary-menu .sub-menu a:hover,
.site-header .mk-primary-menu .sub-menu a:focus-visible {
	background: rgba(193, 145, 112, 0.16);
	color: #32271a;
}

.site-header .mk-primary-menu .sub-menu .current-menu-item > a {
	background: rgba(193, 145, 112, 0.22);
}

.site-header .mk-mobile-menu .sub-menu {
	margin-top: 0.55rem;
	padding-top: 0.55rem;
	padding-left: 0.95rem;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.site-header .mk-mobile-menu .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.site-header .mk-mobile-menu .menu-item-has-children > a::after {
	content: '▾';
	font-size: 0.7rem;
	opacity: 0.8;
}

.site-header.is-solid {
	background-color: #e0d9d1;
	box-shadow: 0 8px 24px rgba(50, 36, 30, 0.12);
}

.site-header.is-scrolled {
	backdrop-filter: blur(10px);
	background-color: #e0d9d1;
	box-shadow: 0 8px 24px rgba(50, 36, 30, 0.18);
}

/* Górny pasek (ikony + Panel Pacjenta) chowa się po rozpoczęciu scrolla —
   przyklejony zostaje tylko rząd z logo i menu. */
.mk-header-toprow {
	overflow: hidden;
	max-height: 60px;
	opacity: 1;
	transition:
		max-height 320ms ease,
		opacity 200ms ease,
		margin 320ms ease;
}

.site-header.is-scrolled .mk-header-toprow {
	max-height: 0;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

/* Kolor tekstu/ikon headera zależnie od tła:
   – strona główna nad ciemnym hero (przed scrollem): biały,
   – header z karmelowym tłem (podstrony + główna po scrollu): brąz. */
/* Hero na stronie głównej jest teraz jasną grafiką — header nad nim musi mieć
   ciemny (brązowy) tekst, tak samo jak na podstronach. */
.site-header.is-home-fixed:not(.is-scrolled),
.site-header.is-home-fixed:not(.is-scrolled) a,
.site-header.is-home-fixed:not(.is-scrolled) .mk-burger {
	color: #32271a;
}

.site-header.is-solid,
.site-header.is-solid a,
.site-header.is-solid .mk-burger,
.site-header.is-scrolled,
.site-header.is-scrolled a,
.site-header.is-scrolled .mk-burger {
	color: #32271a;
}

/* Panel mobilny jest zawsze jasny — tekst zawsze brązowy (niezależnie od stanu headera). */
.mk-drawer a,
.mk-drawer .mk-drawer__close {
	color: #32271a !important;
}

.woocommerce .woocommerce-breadcrumb {
	margin-bottom: 1.5rem;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 14px;
	color: rgba(50, 39, 26, 0.72);
}

.woocommerce-notices-wrapper {
	margin-bottom: 1.25rem;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem;
	padding: 0.8rem 0.95rem;
	border: 1px solid #d8cec1;
	border-radius: 10px;
	background: #fffdfa;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 14px;
	line-height: 1.4;
	color: #32271a;
}

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

.woocommerce-message .button.wc-forward,
.woocommerce-info .button.wc-forward,
.woocommerce-error .button.wc-forward {
	margin-left: auto;
	border-radius: 6px;
	border: 0;
	background: #c19170 !important;
	color: #fff !important;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 12px;
	letter-spacing: 0.04em;
	padding: 0.5rem 0.75rem;
	text-transform: uppercase;
	text-decoration: none;
}

/* Wyśrodkowany popup „Dodano do koszyka" na stronie sklepu
   (assets/js/shop-added-to-cart-popup.js, event WooCommerce added_to_cart). */
.mk-added-popup {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.mk-added-popup.is-visible {
	visibility: visible;
	opacity: 1;
}

.mk-added-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(50, 39, 26, 0.35);
}

.mk-added-popup__box {
	position: relative;
	max-width: 340px;
	width: calc(100% - 2.5rem);
	background: #fffdfa;
	border: 1px solid #d8cec1;
	border-radius: 16px;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
	padding: 1.75rem 1.5rem 1.5rem;
	text-align: center;
	transform: translateY(6px);
	transition: transform 0.2s ease;
}

.mk-added-popup.is-visible .mk-added-popup__box {
	transform: translateY(0);
}

.mk-added-popup__text {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 20px;
	color: #32271a;
	margin: 0 0 1.1rem;
}

.mk-added-popup__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.mk-added-popup__cart-link {
	display: inline-block;
	background: #32271a;
	color: #fff;
	text-decoration: none;
	border-radius: 999px;
	padding: 0.55rem 1.4rem;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mk-added-popup__cart-link:hover {
	background: #6d2a3c;
}

.mk-added-popup__close {
	position: absolute;
	top: 0.6rem;
	right: 0.75rem;
	border: none;
	background: transparent;
	font-size: 22px;
	line-height: 1;
	color: #8a7f76;
	cursor: pointer;
}

.mk-added-popup__close:hover {
	color: #32271a;
}

.woocommerce .page-title,
.woocommerce div.product .product_title {
	margin-bottom: 1.5rem;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(2rem, 3vw, 2.75rem);
	line-height: 1.14;
	color: #32271a;
	text-transform: uppercase;
}

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 24px;
	clear: both;
	padding: 0;
	margin: 0;
}

.woocommerce ul.products li.product {
	margin: 0;
	padding: 14px;
	border: 1px solid #d8cec1;
	border-radius: 14px;
	background: #fffdfa;
	width: auto !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 460px;
	clear: none !important;
	transition:
		transform 180ms ease,
		box-shadow 180ms ease,
		border-color 180ms ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-2px);
	border-color: #c8b7a5;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.woocommerce ul.products li.product a {
	text-decoration: none;
	color: #32271a;
}

/* Kafelek produktu: proporcja zamiast sztywnych 190 px.
   Przy 190 px zdjęcie portretowe (2:3) było ścinane do wąskiego paska —
   widoczne zostawało ~35% kadru, a plik musiał być pomniejszany ~4,7x, co
   dawało efekt rozmycia. 4:5 pokazuje sylwetkę i łagodzi skalowanie. */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .woocommerce-placeholder {
	width: 100% !important;
	aspect-ratio: 4 / 5;
	height: auto;
	object-fit: cover;
	margin: 0 0 12px;
	border-radius: 10px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(1.7rem, 2vw, 2rem);
	line-height: 1.14;
	text-transform: uppercase;
	margin: 0 0 0.85rem;
	min-height: 3.25em;
}

.woocommerce ul.products li.product .price {
	font-family: 'Cormorant Garamond', Georgia, serif;
	color: #32271a;
	font-size: 18px;
	margin-bottom: 0.85rem;
}

.woocommerce ul.products li.product .button {
	display: inline-flex !important;
	width: 100%;
	align-self: flex-start;
	justify-content: center;
	margin-top: auto;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-bottom: 1.5rem;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 14px;
	float: none !important;
}

.woocommerce .woocommerce-ordering select {
	border: 1px solid #d8cec1;
	border-radius: 6px;
	background: #fffdfa;
	padding: 0.45rem 0.65rem;
}

.woocommerce .woocommerce-ordering {
	display: flex;
	justify-content: flex-end;
}

.woocommerce div.product {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

/* Desktop: klasyczny układ premium — galeria po lewej, szczegóły po prawej.
   Taby i „Podobne produkty" idą pełną szerokością (span obu kolumn). */
@media (min-width: 900px) {
	.woocommerce div.product {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		gap: 48px;
		align-items: start;
	}

	.woocommerce div.product > .woocommerce-tabs,
	.woocommerce div.product > .related.products,
	.woocommerce div.product > .upsells.products {
		grid-column: 1 / -1;
	}
}

/* Galeria wcgs bywa mała (inline max-width ~301px) — na desktopie pozwalamy
   jej wypełnić swoją kolumnę, żeby nie wisiała drobna z pustką obok. */
@media (min-width: 900px) {
	.woocommerce div.product #wpgs-gallery,
	.woocommerce div.product .wcgs-woocommerce-product-gallery {
		max-width: 100% !important;
		width: 100% !important;
	}
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
}

.woocommerce div.product div.images img {
	width: 100%;
	border-radius: 14px;
	border: 1px solid #d8cec1;
}

/* Galeria WooCommerce (flexslider) dostaje sztywną szerokość inline z JS —
   na mobile przekracza ekran i rozpycha stronę w poziomie. Zbijamy do 100%. */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product .flex-viewport,
.woocommerce div.product .woocommerce-product-gallery__image {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

.woocommerce div.product .woocommerce-product-gallery img {
	max-width: 100% !important;
	height: auto !important;
}

/* Prawdziwa przyczyna overflow (sztywna szerokość galerii z JS) jest naprawiona
   wyżej — bez ukrywania overflow, żeby nic nie przycinać. */

.woocommerce div.product .summary .price {
	font-family: 'Cormorant Garamond', Georgia, serif;
	color: #32271a;
	font-size: 24px;
	margin-bottom: 0.8rem;
}

.woocommerce div.product .summary p,
.woocommerce div.product .summary .product_meta {
	font-family: 'Cormorant Garamond', Georgia, serif;
	color: #4a4034;
}

.product_meta {
	display: flex;
	flex-direction: column;
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 1rem 0 1.25rem;
}

.woocommerce div.product form.cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid #d8cec1;
	border-radius: 8px;
	background: #fffdfa;
	overflow: hidden;
}

.woocommerce div.product form.cart .quantity .qty {
	width: 56px;
	height: 42px;
	border: 0;
	text-align: center;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 16px;
	background: transparent;
	appearance: textfield;
	-moz-appearance: textfield;
}

.woocommerce div.product form.cart .quantity .qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.woocommerce div.product form.cart .quantity .mk-qty-btn {
	width: 40px;
	height: 42px;
	border: 0;
	background: #f4ece4;
	color: #32271a;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.woocommerce div.product form.cart .quantity .mk-qty-btn:hover {
	background: #eadbcf;
}

.woocommerce div.product .woocommerce-tabs {
	grid-column: 1 / -1;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	border: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	border: 1px solid #d8cec1;
	border-radius: 8px;
	padding: 0.5rem 0.85rem;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 14px;
	color: #32271a;
	text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	background: #c19170;
	border-color: #c19170;
	color: #fff;
}

.woocommerce div.product .woocommerce-tabs .panel {
	margin: 0;
	padding: 1rem 1.1rem;
	border: 1px solid #d8cec1;
	border-radius: 12px;
	background: #fffdfa;
}

.woocommerce .related.products {
	grid-column: 1 / -1;
}

.woocommerce .related.products > h2 {
	margin-bottom: 1rem;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 30px;
	line-height: 1.14;
	text-transform: uppercase;
	color: #32271a;
}

.woocommerce .related.products ul.products {
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 18px;
}

.woocommerce .related.products ul.products li.product {
	min-height: 420px;
}

.woocommerce .related.products ul.products.mk-related-products li.product {
	min-width: 280px;
	scroll-snap-align: start;
}

.woocommerce .related.products ul.products.mk-related-products::-webkit-scrollbar {
	height: 8px;
}

.woocommerce .related.products ul.products.mk-related-products::-webkit-scrollbar-thumb {
	background: rgba(50, 39, 26, 0.45);
	border-radius: 999px;
}

.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
	font-family: 'Cormorant Garamond', Georgia, serif;
	color: #32271a;
}

.woocommerce-cart .site-main > section,
.woocommerce-checkout .site-main > section,
.woocommerce-order-received .site-main > section {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout,
.woocommerce-order-received .wp-block-woocommerce-order-confirmation {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* ── Checkout klasyczny ([woocommerce_checkout]) ───────────────────────────
   Domyślne style WooCommerce są wyłączone w motywie (patrz
   motyw_kolomanska_disable_woocommerce_styles() w functions.php), więc
   klasyczny checkout bez tego bloku wychodzi kompletnie surowy. Bazowy
   przebieg pod wygląd reszty strony — layout dwukolumnowy, pola, tabela
   podsumowania, metody płatności, przycisk złożenia zamówienia. */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	margin-top: 2.5rem;
}

@media (min-width: 1024px) {
	.woocommerce-checkout form.checkout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
		align-items: start;
	}
}

.woocommerce-checkout #customer_details {
	grid-column: 1;
}

.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
	grid-column: 1;
}

@media (min-width: 1024px) {
	.woocommerce-checkout #customer_details {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
	/* Nagłówek "Twoje zamówienie" (#order_review_heading) leży w DOM POZA
	   #order_review, jako osobny <h3> — bez jawnego umiejscowienia w siatce
	   trafiał w kolumnę 1, oderwany od tabeli/zgód, które są w #order_review. */
	.woocommerce-checkout #order_review_heading {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
	}
	.woocommerce-checkout #order_review {
		grid-column: 2;
		grid-row: 2;
	}
}

.woocommerce-checkout h3 {
	font-size: clamp(1.25rem, 0.6vw + 1.1rem, 1.6rem);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #32271a;
	margin-top: 2rem;
	margin-bottom: 1rem;
}

.woocommerce-checkout .form-row {
	margin-bottom: 1.1rem;
}

.woocommerce-checkout .form-row label {
	display: block;
	font-size: 14px;
	color: #4a4034;
	margin-bottom: 0.35rem;
}

.woocommerce-checkout .form-row input[type='text'],
.woocommerce-checkout .form-row input[type='email'],
.woocommerce-checkout .form-row input[type='tel'],
.woocommerce-checkout .form-row input[type='password'],
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-selection {
	width: 100%;
	border: 1px solid #d8cec1;
	border-radius: 10px;
	background: #fffdfa;
	padding: 0.7rem 0.9rem;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 17px;
	color: #32271a;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
	outline: 2px solid #6d2a3c;
	outline-offset: 1px;
}

.woocommerce-checkout #order_review {
	border: 1px solid #d8cec1;
	border-radius: 16px;
	background: #fffdfa;
	padding: 1.5rem;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
	padding: 0.6rem 0;
	border-bottom: 1px solid #e5ddd2;
	text-align: left;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout table.woocommerce-checkout-review-order-table th:last-child {
	text-align: right;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total th {
	border-bottom: none;
	font-weight: 600;
	color: #6d2a3c;
}

.woocommerce-checkout #payment {
	margin-top: 1.5rem;
	border-top: 1px solid #e5ddd2;
	padding-top: 1.5rem;
}

.woocommerce-checkout ul.wc_payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-checkout ul.payment_methods li {
	border: 1px solid #d8cec1;
	border-radius: 10px;
	padding: 0.85rem 1rem;
	margin-bottom: 0.6rem;
	background: #fffdfa;
}

.woocommerce-checkout ul.payment_methods li .payment_box {
	margin-top: 0.6rem;
	font-size: 15px;
	color: #4a4034;
}

.woocommerce-checkout #place_order,
.woocommerce-checkout #payment #place_order {
	width: 100%;
	background: #32271a;
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 1rem 1.5rem;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #payment #place_order:hover {
	background: #6d2a3c;
}

.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	border-radius: 10px;
	background: #fbeceb;
	border: 1px solid #e3a9a4;
	color: #7a2b24;
}

/* Zgody wymagane przy zamówieniu (motyw_kolomanska_render_checkout_consents
   w functions.php) — checkboxy przed przyciskiem złożenia zamówienia. */
.mk-checkout-consents {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e5ddd2;
}

.mk-checkout-consents__row {
	margin-bottom: 1rem;
}

.mk-checkout-consents__label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	cursor: pointer;
}

.mk-checkout-consents__input {
	margin-top: 0.2rem;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	accent-color: #6d2a3c;
}

.mk-checkout-consents__text {
	font-size: 15px;
	line-height: 1.5;
	color: #4a4034;
}

.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart-collaterals {
	width: 100%;
}

.woocommerce-cart table.shop_table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid #d8cec1;
	border-radius: 12px;
	overflow: hidden;
	background: #fffdfa;
}

.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td {
	padding: 0.95rem 0.9rem;
	border-bottom: 1px solid #eee2d7;
}

.woocommerce-cart table.shop_table tr:last-child td {
	border-bottom: 0;
}

.woocommerce-cart .product-name a {
	color: #32271a;
	text-decoration: none;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 22px;
	line-height: 1.2;
}

.woocommerce-cart .cart_totals {
	border: 1px solid #d8cec1;
	border-radius: 12px;
	padding: 1rem;
	background: #fffdfa;
}

.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout {
	margin: 0.8rem 0 0;
}

.woocommerce-cart .cart-collaterals .checkout-button {
	width: 100%;
	text-align: center;
}

@media (min-width: 980px) {
	.woocommerce div.product {
		grid-template-columns: minmax(320px, 460px) 1fr;
		align-items: start;
	}
}

@media (min-width: 768px) {
	.woocommerce .related.products ul.products.mk-related-products {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		overflow: visible;
		scroll-snap-type: none;
	}

	.woocommerce .related.products ul.products.mk-related-products li.product {
		min-width: 0;
	}
}

@media (min-width: 1100px) {
	.woocommerce .related.products ul.products.mk-related-products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.mk-post-content {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 18px;
	line-height: 1.6;
	color: #32271a;
}

.mk-post-content p {
	margin: 0 0 1rem;
}

:where(main.site-main) p:not([class]) {
	margin: 0 0 1rem;
}

:where(main.site-main) p:not([class]):last-child {
	margin-bottom: 0;
}

.mk-post-content h2,
.mk-post-content h3,
.mk-post-content h4 {
	margin: 1.6rem 0 0.8rem;
	font-family: 'Cormorant Garamond', Georgia, serif;
	line-height: 1.2;
	color: #32271a;
}

.mk-post-content ul,
.mk-post-content ol {
	margin: 0 0 1rem 1.25rem;
	padding-left: 1.25rem;
}

.mk-post-content ul {
	list-style: disc;
}

.mk-post-content ol {
	list-style: decimal;
}

.mk-post-content li {
	margin-bottom: 0.45rem;
}

.mk-post-excerpt {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 16px;
	line-height: 1.5;
	color: #4a4034;
}

.mk-post-excerpt p:last-child {
	margin-bottom: 0;
}

.mk-patient-login form {
	display: grid;
	gap: 0.75rem;
}

.mk-patient-login label {
	display: block;
	margin-bottom: 0.3rem;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 14px;
	color: #5b5044;
}

.mk-patient-login input[type='text'],
.mk-patient-login input[type='password'] {
	width: 100%;
	border: 1px solid #d9ccbe;
	border-radius: 8px;
	padding: 0.7rem 0.85rem;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 15px;
	color: #32271a;
	background: #fffdfa;
}

.mk-patient-login .login-remember label {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-bottom: 0;
	font-size: 14px;
}

.mk-patient-login .login-submit {
	margin-top: 0.3rem;
}

.mk-patient-login input[type='submit'] {
	border: 0;
	border-radius: 8px;
	background: #c19170;
	color: #fff;
	padding: 0.75rem 1rem;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.mk-patient-login input[type='submit']:hover {
	background: #5e2232;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	border-radius: 0.375rem;
	background: #c19170;
	color: #fff !important;
	font-family: 'Cormorant Garamond', Georgia, serif;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.04em;
	padding: 0.78rem 1.4rem;
}

/* Przyciski BLOKU WooCommerce (Koszyk / Kasa: „Kupuję i płacę",
   „Przejdź do kasy" itd.) — inne klasy niż klasyczne, stąd osobna reguła.
   To markup wtyczki, więc CSS (jak Amelia). */
.wc-block-components-button,
.wp-element-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.woocommerce-cart .checkout-button {
	border-radius: 0.375rem !important;
}

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

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

@media (min-width: 768px) {
	.js-mobile-menu-toggle,
	.js-mobile-menu {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.site-header .mk-primary-menu .sub-menu {
		position: static;
		min-width: 0;
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		border: 0;
		background: transparent;
		box-shadow: none;
		backdrop-filter: none;
		padding: 0;
	}

	.site-header .mk-primary-menu .sub-menu::before {
		content: none;
	}
}

@media (max-width: 1023px) {
	:where(main.site-main) h1 {
		font-size: clamp(2rem, 7.2vw, 2.7rem);
		line-height: 1.12;
	}

	:where(main.site-main) h2 {
		font-size: clamp(1.75rem, 6.2vw, 2.35rem);
		line-height: 1.14;
	}

	:where(main.site-main) h3 {
		font-size: clamp(1.45rem, 4.9vw, 1.95rem);
		line-height: 1.18;
	}

	:where(main.site-main) h4 {
		font-size: clamp(1.25rem, 4.2vw, 1.6rem);
		line-height: 1.2;
	}
}

@media (max-width: 767px) {
	:where(main.site-main) h1 {
		font-size: clamp(1.7rem, 8.4vw, 2.2rem);
	}

	:where(main.site-main) h2 {
		font-size: clamp(1.5rem, 7.1vw, 1.95rem);
	}

	:where(main.site-main) h3 {
		font-size: clamp(1.28rem, 5.8vw, 1.62rem);
	}
}

.mk-cf7-prereq {
	display: grid;
	gap: 1.2rem;
}

.mk-cf7-prereq p {
	margin: 0;
}

.mk-cf7-prereq label {
	display: block;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
}

.mk-cf7-prereq .wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.45rem;
}

.mk-cf7-prereq input[type='text'],
.mk-cf7-prereq input[type='email'],
.mk-cf7-prereq textarea {
	display: block;
	width: 100%;
	border: 1px solid #32271a;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	padding: 0.85rem 1rem;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 18px;
	line-height: 1.45;
	outline: none;
	transition:
		border-color 0.18s ease,
		background-color 0.18s ease;
}

.mk-cf7-prereq input[type='text']:focus,
.mk-cf7-prereq input[type='email']:focus,
.mk-cf7-prereq textarea:focus {
	border-color: #32271a;
	background: rgba(255, 255, 255, 0.12);
}

.mk-cf7-prereq textarea {
	min-height: 180px;
	resize: vertical;
}

.mk-cf7-prereq__note {
	font-size: 16px;
	line-height: 1.55;
}

.mk-cf7-prereq .wpcf7-submit {
	width: 100%;
	border: 1px solid #fff;
	border-radius: 9999px;
	background: #c19170;
	color: #fffdfa;
	padding: 0.95rem 1.15rem;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease;
}

/* Wszystkie przyciski „Wyślij" Contact Form 7 — pełna pigułka, waga 400,
   spójnie z pozostałymi CTA. wpcf7-submit to <input>, więc główny selektor
   CTA (a/button) go nie łapie — stąd osobna reguła. */
.site-main .wpcf7-submit {
	border-radius: 0.375rem !important;
	font-weight: 400 !important;
}

.mk-cf7-prereq .wpcf7-submit:hover,
.mk-cf7-prereq .wpcf7-submit:focus-visible {
	background: #1a1a1a;
	border-color: #1a1a1a;
	transform: translateY(-1px);
}

.mk-cf7-prereq .wpcf7-spinner {
	margin: 0.5rem 0 0;
}

body:not(.woocommerce):not(.woocommerce-page)
	main
	:where(ul, ol):not(.menu):not(.mk-primary-menu):not(.mk-mobile-menu):not(.products):not(.mk-no-markers)
	> li {
	list-style: none;
	padding-left: 1.65rem;
	position: relative;
}

body:not(.woocommerce):not(.woocommerce-page)
	main
	:where(ul, ol):not(.menu):not(.mk-primary-menu):not(.mk-mobile-menu):not(.products):not(.mk-no-markers)
	> li::before {
	content: '';
	position: absolute;
	left: 10px;
	top: 50%;
	display: inline-block;
	height: 5px;
	width: 5px;
	border-radius: 9999px;
	background: #c19170;
	transform: translateY(-50%);
}

#cookie-notice,
.cn-button.bootstrap,
.cky-consent-bar,
.cky-banner-container,
.cmplz-cookiebanner {
	font-family: 'Cormorant Garamond', Georgia, serif !important;
}

#cookie-notice,
.cky-consent-bar,
.cky-banner-container,
.cmplz-cookiebanner {
	background: #fffdfa !important;
	color: #32271a !important;
	border: 1px solid #d8cec1 !important;
	border-radius: 12px !important;
	box-shadow: 0 12px 28px rgba(60, 42, 28, 0.12) !important;
}

.cky-btn,
.cmplz-btn,
#cookie-notice .cn-button,
#cookie-notice .cn-revoke-cookie {
	border-radius: 8px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
}

.cky-btn-accept,
.cmplz-btn.cmplz-accept,
#cookie-notice .cn-button {
	background: #c19170 !important;
	color: #fffdfa !important;
	border-color: #c19170 !important;
}

.cky-btn-reject,
.cmplz-btn.cmplz-deny {
	background: transparent !important;
	color: #32271a !important;
	border: 1px solid #c19170 !important;
}

.mk-szkolenia-products .products {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.mk-szkolenia-products .products li.product {
	padding: 16px;
	border: 1px solid #d8cec1;
	border-radius: 16px;
	background: #fffdfa;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
}

.mk-szkolenia-products .products li.product .woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.mk-szkolenia-products .products li.product a img,
.mk-szkolenia-products .products li.product .woocommerce-placeholder {
	width: 100% !important;
	height: 210px;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center;
	border-radius: 12px;
	margin-bottom: 14px;
}

.mk-szkolenia-products .products li.product .woocommerce-loop-product__title {
	font-size: clamp(1.15rem, 1.8vw, 1.45rem);
	line-height: 1.25;
	min-height: 3.2em;
	margin-bottom: 0.7rem;
}

.mk-szkolenia-products .products li.product .price {
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 0.65rem;
	display: block;
}

.mk-szkolenia-products .products li.product .button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: auto;
	border-radius: 8px;
	padding: 0.8rem 0.9rem;
	text-align: center;
	background: #c19170 !important;
	color: #fffdfa !important;
	border: 1px solid #c19170 !important;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.mk-szkolenia-products .products li.product .button:hover,
.mk-szkolenia-products .products li.product .button:focus-visible {
	background: #1a1a1a !important;
	border-color: #1a1a1a !important;
	color: #fffdfa !important;
}

@media (max-width: 1024px) {
	.mk-szkolenia-products .products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.mk-szkolenia-products .products {
		grid-template-columns: minmax(0, 1fr);
	}
}

.mk-szkolenia-wysiwyg > *:first-child {
	margin-top: 0;
}

.mk-szkolenia-wysiwyg > *:last-child {
	margin-bottom: 0;
}

.mk-szkolenia-wysiwyg p {
	margin: 0 0 0.85em;
}

.mk-szkolenia-wysiwyg ul,
.mk-szkolenia-wysiwyg ol {
	margin: 0.5em 0 0.85em;
	padding-left: 1.35em;
}

.mk-szkolenia-wysiwyg li {
	margin: 0.25em 0;
}

.mk-szkolenia-wysiwyg h2,
.mk-szkolenia-wysiwyg h3,
.mk-szkolenia-wysiwyg h4 {
	margin: 1.1em 0 0.45em;
	font-weight: 600;
	line-height: 1.2;
	color: #32271a;
}

.mk-szkolenia-wysiwyg h2:first-child,
.mk-szkolenia-wysiwyg h3:first-child,
.mk-szkolenia-wysiwyg h4:first-child {
	margin-top: 0;
}

.mk-szkolenia-wysiwyg a {
	color: #32271a;
	text-decoration: underline;
}

.mk-szkolenia-wysiwyg--on-dark h2,
.mk-szkolenia-wysiwyg--on-dark h3,
.mk-szkolenia-wysiwyg--on-dark h4 {
	color: #fffdfa;
}

.mk-szkolenia-wysiwyg--on-dark a {
	color: #f5ebe3;
}

/* Style Amelii przeniesione do assets/css/amelia-overrides.css
   (jedno źródło prawdy — ten plik ładuje się w wp_footer, więc i tak wygrywał). */

/* ─── Hero: diagonalna poświata na dolnej połowie ───────── */
/* Wzór z referencji: gradient „to right bottom", od przezroczystego w połowie
   do koloru w prawym dolnym rogu. Kolor ciepły (złoto marki), a nie niebieski —
   hero jest ciemne, więc działa to jak subtelny blask, nie jak mgła. */
.mk-split-blend__media--left .mk-split-blend__img {
	-webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
	mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
}

.mk-split-blend__media--right .mk-split-blend__img {
	-webkit-mask-image: linear-gradient(270deg, #000 55%, transparent 100%);
	mask-image: linear-gradient(270deg, #000 55%, transparent 100%);
}

@media (min-width: 1024px) {
	.mk-split-blend__media--left .mk-split-blend__img {
		-webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 92%);
		mask-image: linear-gradient(90deg, #000 62%, transparent 92%);
	}

	.mk-split-blend__media--right .mk-split-blend__img {
		-webkit-mask-image: linear-gradient(270deg, #000 62%, transparent 92%);
		mask-image: linear-gradient(270deg, #000 62%, transparent 92%);
	}
}

/* Karuzela logotypów (mk-logos-marquee.php) — nieskończony pasek nazw firm/mediów. */
.mk-logos-marquee {
	position: relative;
	width: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.mk-logos-marquee__track {
	display: flex;
	width: max-content;
	align-items: center;
	animation: mk-logos-marquee-scroll var(--mk-marquee-duration, 32s) linear infinite;
}

.mk-logos-marquee:hover .mk-logos-marquee__track {
	animation-play-state: paused;
}

.mk-logos-marquee__item {
	flex: 0 0 auto;
	padding: 0 2rem;
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space: nowrap;
	color: rgba(50, 39, 26, 0.55);
}

@keyframes mk-logos-marquee-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@media (max-width: 767px) {
	.mk-logos-marquee__item {
		padding: 0 1.25rem;
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mk-logos-marquee__track {
		animation: none;
		overflow-x: auto;
	}
}

/* Przycisk CTA w menu — dodaj klasę "menu-cta" do pozycji menu (Wygląd → Menu) */
.mk-primary-menu .menu-cta > a,
.mk-mobile-menu .menu-cta > a {
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(193, 145, 112, 0.6);
	border-radius: 9999px;
	padding: 0.55rem 1.35rem;
	color: #32271a;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}
.mk-primary-menu .menu-cta > a:hover,
.mk-mobile-menu .menu-cta > a:hover {
	background-color: #c19170;
	border-color: #c19170;
	color: #ffffff;
	opacity: 1;
}

/* Pływający koszyk WooCommerce — widoczny tylko gdy koszyk niepusty */
.mk-floating-cart {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 60;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		visibility 0.25s;
}
.mk-floating-cart.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.mk-floating-cart__btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: #c19170;
	color: #ffffff;
	border-radius: 9999px;
	padding: 13px 22px;
	text-decoration: none;
	box-shadow: 0 12px 34px rgba(9, 9, 9, 0.28);
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 14px;
	font-weight: 600;
	transition: background-color 0.2s ease;
}
.mk-floating-cart__btn:hover {
	background: #c19170;
}
.mk-floating-cart__icon {
	position: relative;
	display: inline-flex;
}
.mk-floating-cart__count {
	position: absolute;
	top: -8px;
	right: -10px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #c19170;
	color: #fff;
	border-radius: 9999px;
	font-size: 11px;
	line-height: 1;
}
.mk-floating-cart__total {
	white-space: nowrap;
}
.mk-floating-cart__total .amount {
	color: #fff;
}
@media (max-width: 640px) {
	.mk-floating-cart {
		right: 14px;
		bottom: 14px;
	}
	.mk-floating-cart__btn {
		padding: 12px 18px;
		font-size: 13px;
	}
}

/* Czytelność — podniesienie kontrastu najjaśniejszego drobnego tekstu na jasnym tle */
.site-main .text-\[\#8a7a6d\],
.site-main .text-\[\#8A7F76\],
.site-main .text-\[\#7A6F67\],
.site-main .text-\[\#6a6054\],
.site-main .text-\[\#6d5d4c\] {
	color: #63584c !important;
}
/* delikatnie ciemniejsze „przygaszone" akapity body */
.site-main .text-\[\#5d5348\] {
	color: #524839 !important;
}

/* ==========================================================================
   Moje konto (WooCommerce → My Account)
   Domyślnie Woo renderuje nawigację jako zwykły <ul> obok treści — bez
   stylowania wygląda jak lista linków z kropkami. Robimy z tego układ
   dwukolumnowy: menu w karcie po lewej, treść po prawej.
   ========================================================================== */
.woocommerce-account .woocommerce {
	display: grid;
	gap: 2rem;
	align-items: start;
	font-family: 'Cormorant Garamond', Georgia, serif;
	color: #32271a;
}

@media (min-width: 900px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: 2.5rem;
	}
}

/* Nawigacja konta */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	margin: 0;
	padding: 0.5rem;
	border: 1px solid #e5ddd2;
	border-radius: 14px;
	background: #fffdfa;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li::before {
	content: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 0.7rem 0.9rem;
	border-radius: 9px;
	font-size: 15px;
	font-weight: 500;
	color: #4a4034;
	text-decoration: none;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	background: #f6eee5;
	color: #32271a;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: #6d2a3c;
	color: #fff;
	font-weight: 600;
}

/* Treść konta */
.woocommerce-account .woocommerce-MyAccount-content {
	border: 1px solid #e5ddd2;
	border-radius: 14px;
	background: #fffdfa;
	padding: 1.75rem;
	font-size: 16px;
	line-height: 1.7;
	color: #4a4034;
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
	color: #6d2a3c;
	text-decoration: underline;
}

/* Formularz logowania (gdy niezalogowany — Woo nie renderuje wtedy nawigacji) */
.woocommerce-account:not(.logged-in) .woocommerce {
	grid-template-columns: minmax(0, 1fr);
	max-width: 560px;
	margin-inline: auto;
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	border: 1px solid #e5ddd2;
	border-radius: 14px;
	background: #fffdfa;
	padding: 1.75rem;
}

.woocommerce-account .woocommerce-form-login input[type='text'],
.woocommerce-account .woocommerce-form-login input[type='email'],
.woocommerce-account .woocommerce-form-login input[type='password'],
.woocommerce-account .woocommerce-form-register input[type='text'],
.woocommerce-account .woocommerce-form-register input[type='email'],
.woocommerce-account .woocommerce-form-register input[type='password'],
.woocommerce-account .woocommerce-MyAccount-content input[type='text'],
.woocommerce-account .woocommerce-MyAccount-content input[type='email'],
.woocommerce-account .woocommerce-MyAccount-content input[type='tel'],
.woocommerce-account .woocommerce-MyAccount-content input[type='password'] {
	width: 100%;
	padding: 0.65rem 0.8rem;
	border: 1px solid #d8cec1;
	border-radius: 8px;
	background: #fff;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 16px;
	color: #32271a;
}

.woocommerce-account .button,
.woocommerce-account button[type='submit'] {
	border-radius: 0.375rem !important;
	background: #6d2a3c !important;
	color: #fff !important;
	border: 0 !important;
	padding: 0.6rem 1.4rem !important;
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em;
	/* Reset cienia/obramowania domyślnego WooCommerce — usuwa „grudkowaty" efekt. */
	box-shadow: none !important;
	text-shadow: none !important;
	line-height: 1.2 !important;
	display: inline-block;
	white-space: nowrap;
	text-transform: uppercase;
	transition: background-color 160ms ease;
}

.woocommerce-account .button:hover,
.woocommerce-account button[type='submit']:hover {
	background: #58212f !important;
}

/* Tabela zamówień w koncie — oddech i czytelne kolumny (domyślnie zlewały się). */
.woocommerce-account .woocommerce-orders-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid #e6ddd2;
	border-radius: 12px;
	overflow: hidden;
	font-size: 14px;
	color: #32271a;
	background: #fffdfa;
}

.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-orders-table td {
	padding: 0.9rem 1.1rem;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid #efe7db;
	line-height: 1.4;
}

.woocommerce-account .woocommerce-orders-table thead th {
	background: #f7f1ea;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: #6a6054;
}

.woocommerce-account .woocommerce-orders-table tbody tr:last-child td,
.woocommerce-account .woocommerce-orders-table tr:last-child td {
	border-bottom: 0;
}

.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
	text-align: right;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.woocommerce-account .woocommerce-orders-table th,
	.woocommerce-account .woocommerce-orders-table td {
		padding: 0.65rem 0.75rem;
	}
}

/* ==========================================================================
   Strona „Zamówienie otrzymane" (order-received / podziękowanie)
   ========================================================================== */
.woocommerce-order-received .woocommerce {
	font-family: 'Cormorant Garamond', Georgia, serif;
	color: #32271a;
	max-width: 780px;
	margin: 2.5rem auto 0;
}

.woocommerce-order-received .woocommerce-thankyou-order-received {
	font-size: 20px;
	line-height: 1.5;
	color: #32271a;
	padding: 1.1rem 1.4rem;
	border: 1px solid #d8cec1;
	border-left: 4px solid #6d2a3c;
	border-radius: 12px;
	background: #f6eee5;
	margin-bottom: 1.75rem;
}

/* Lista podsumowania (Numer zamówienia / Data / E-mail / Razem / Metoda) */
.woocommerce-order-received ul.woocommerce-order-overview {
	list-style: none !important;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0.75rem;
	border: 0;
}

.woocommerce-order-received ul.woocommerce-order-overview li {
	list-style: none !important;
	border: 1px solid #eadfd3 !important;
	border-radius: 10px;
	background: #fffdfa;
	padding: 0.9rem 1rem;
	margin: 0;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #6a6054;
	text-align: left;
}

.woocommerce-order-received ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 0.35rem;
	font-size: 17px;
	letter-spacing: 0;
	text-transform: none;
	color: #32271a;
}

/* Nagłówki sekcji */
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-customer-details h2,
.woocommerce-order-received .woocommerce-column__title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 26px;
	letter-spacing: 0.02em;
	color: #32271a;
	margin: 2rem 0 1rem;
}

/* Tabela szczegółów zamówienia */
.woocommerce-order-received table.shop_table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid #d8cec1;
	border-radius: 12px;
	overflow: hidden;
	background: #fffdfa;
	margin: 0 0 2rem;
}

.woocommerce-order-received table.shop_table th,
.woocommerce-order-received table.shop_table td {
	padding: 0.9rem 1.1rem;
	border-bottom: 1px solid #eee2d7;
	text-align: left;
	vertical-align: top;
	font-size: 15px;
	line-height: 1.5;
}

.woocommerce-order-received table.shop_table thead th {
	background: #f6eee5;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #6a6054;
}

.woocommerce-order-received table.shop_table td.product-total,
.woocommerce-order-received table.shop_table th.product-total,
.woocommerce-order-received table.shop_table tfoot td {
	text-align: right;
	white-space: nowrap;
}

.woocommerce-order-received table.shop_table .product-name a {
	color: #32271a;
	text-decoration: none;
	font-weight: 600;
}

/* Meta pozycji (Amelia: Czas lokalny / service / employee itd.) */
.woocommerce-order-received table.shop_table .wc-item-meta,
.woocommerce-order-received table.shop_table .variation {
	list-style: none !important;
	margin: 0.5rem 0 0;
	padding: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: #5d5348;
}

.woocommerce-order-received table.shop_table .wc-item-meta li,
.woocommerce-order-received table.shop_table .variation p {
	list-style: none !important;
	margin: 0.15rem 0;
}

.woocommerce-order-received table.shop_table .wc-item-meta strong {
	font-weight: 600;
	color: #32271a;
}

.woocommerce-order-received table.shop_table tfoot th {
	text-align: left;
	background: transparent;
	color: #32271a;
}

.woocommerce-order-received table.shop_table tfoot tr:last-child th,
.woocommerce-order-received table.shop_table tfoot tr:last-child td {
	font-size: 16px;
	color: #32271a;
}

/* Adres rozliczeniowy */
.woocommerce-order-received .woocommerce-customer-details address {
	border: 1px solid #eadfd3;
	border-radius: 10px;
	background: #fffdfa;
	padding: 1.1rem 1.25rem;
	font-style: normal;
	line-height: 1.65;
	color: #4a4034;
}

/* Blok CTA oceny nastroju dodany przez motyw */
.mk-assessment-thankyou {
	margin-top: 2rem;
}

/* ==========================================================================
   MOBILE — mniejsze odstępy pionowe między sekcjami.
   Sekcje mają duże py (100px / py-20 / py-24 …). Na telefonie to za dużo.
   Redukujemy TYLKO bazowe klasy py (bez prefiksu), więc działa to wyłącznie
   na mobile — warianty md:/lg: (desktop) zostają nietknięte.
   ========================================================================== */
@media (max-width: 767px) {
	.site-main .py-\[100px\] {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}
	.site-main .py-28 {
		padding-top: 2.75rem !important;
		padding-bottom: 2.75rem !important;
	}
	.site-main .py-24 {
		padding-top: 2.75rem !important;
		padding-bottom: 2.75rem !important;
	}
	.site-main .py-20 {
		padding-top: 2.5rem !important;
		padding-bottom: 2.5rem !important;
	}
	.site-main .py-16 {
		padding-top: 2.25rem !important;
		padding-bottom: 2.25rem !important;
	}
	/* duże pionowe marginesy startowe też zbijamy */
	.site-main .mt-\[100px\] {
		margin-top: 3rem !important;
	}
	.site-main .mt-\[60px\] {
		margin-top: 2.25rem !important;
	}
	.site-main .mt-16 {
		margin-top: 2.25rem !important;
	}
}

/* ==========================================================================
   TYPOGRAFIA — powiększenie treści, interlinia i letter-spacing.
   Warstwa nadpisująca klasy Tailwind (stąd !important) — zebrana w jednym
   miejscu, żeby dało się ją łatwo stroić lub cofnąć.
   Zakres: .site-main (treści). Menu w headerze celowo pominięte — ma własny
   rozmiar 12px, bo przy 14px pozycje łamały się do dwóch linii.
   ========================================================================== */

/* --- Nagłówki: płynna skala (clamp) ---
   Szablony mają rozmiary wpisane klasami (np. `text-[40px] md:text-[64px]`),
   więc bez !important clamp by nie zadziałał.
   h1/h2 — wartości zadane wprost; h3/h4 dobrane proporcjonalnie, żeby skala
   była spójna, a nie żeby h3 nagle „doganiało" h2.

   WAŻNE — zakres: tylko strony budowane blokami.
   Strony WooCommerce (koszyk, zamówienie, moje konto, sklep) są wykluczone,
   bo tam „TWÓJ KOSZYK JEST PUSTY" w 72px to nie jest nagłówek sekcji,
   tylko komunikat systemowy. Mają własną, spokojniejszą skalę niżej. */
/* JEDNA skala dla całego serwisu.
   Szablony mają zaszytych 18 różnych rozmiarów h2 (22–64px) — każdy wymyślony
   osobno. Clamp poniżej sprowadza je wszystkie do wspólnej skali, więc
   nagłówek sekcji wygląda tak samo na każdej podstronie.
   To jest ta skala, która sprawdziła się na Kontakcie (o ~5px mniejsza). */
body:not(.woocommerce):not(.woocommerce-page) .site-main h1 {
	/* Skala Figma: nagłówki stron ~36–60px. */
	font-size: clamp(2.25rem, 2.5vw + 1.3rem, 3.75rem) !important;
	line-height: 1.05 !important;
	text-transform: none !important;
}

/* Jeden rozmiar dla WSZYSTKICH h2 (poza WooCommerce, które ma własną skalę).
   Rozmiary/`font-['Inter']` na h2 w szablonach są zbędne — steruje tym ta reguła. */
body:not(.woocommerce):not(.woocommerce-page) .site-main h2 {
	/* Skala Figma: nagłówki sekcji ~30–48px. */
	font-size: clamp(1.875rem, 1.6vw + 1.2rem, 3rem) !important;
	line-height: 1.08 !important;
	text-transform: none !important;
}

/* h3/h4 CELOWO bez clampa.
   Miały go wcześniej (24–36px) i to rozwalało karty: w wąskiej kolumnie
   jednowyrazowy nagłówek typu „PRZYGOTOWANIE" przy 36px nie ma jak się złamać
   i wychodzi poza kartę.
   h3/h4 pełnią w motywie dwie różne role — tytuł sekcji ORAZ tytuł karty —
   więc jeden globalny rozmiar zawsze zepsuje jedną z nich.
   Szablony dobierają rozmiar per kontekst (18–38px) i to jest właściwe miejsce. */

/* Hero — wyjątek od globalnego h1.
   Nagłówek dzieli kadr z portretem, więc przy 96px każde słowo lądowało
   w osobnej linii. Tu potrzebny węższy zakres. */
.site-main .mk-hero-split h1 {
	/* Hero = pełna grafika (bez portretu), więc nagłówek jak w Figmie ~40–72px. */
	font-size: clamp(2.5rem, 3.5vw + 1.3rem, 4.5rem) !important;
	line-height: 1.05 !important;
}

/* --- WooCommerce: własna, stonowana skala nagłówków ---
   Koszyk i zamówienie to interfejs użytkowy, nie strona sprzedażowa:
   „Podsumowanie koszyka" czy „Opcje płatności" to etykiety sekcji formularza,
   a nie tytuły do eksponowania. Duże nagłówki tylko odciągają od CTA. */
.woocommerce .site-main h1,
.woocommerce-page .site-main h1 {
	font-size: clamp(1.5rem, 1vw + 1.1rem, 2rem) !important;
}

.woocommerce .site-main h2,
.woocommerce-page .site-main h2 {
	font-size: clamp(1.125rem, 0.5vw + 1rem, 1.5rem) !important;
}

.woocommerce .site-main h3,
.woocommerce-page .site-main h3 {
	font-size: clamp(1rem, 0.4vw + 0.9rem, 1.25rem) !important;
}

/* Checkout/Cart w wersji blokowej ma własne nagłówki poza .site-main h* */
.woocommerce-cart .wp-block-woocommerce-cart h2,
.woocommerce-checkout .wp-block-woocommerce-checkout h2,
.woocommerce-cart .wc-block-cart__totals-title,
.woocommerce-checkout .wc-block-components-title,
.woocommerce-checkout .wc-block-components-checkout-step__title {
	font-size: clamp(1.125rem, 0.5vw + 1rem, 1.5rem) !important;
	line-height: 1.3 !important;
}

/* --- Treści: jeden rozmiar tekstu czytanego = 19px ---
   Wszystkie warianty używane w motywie na tekst ciągły sprowadzone do 19px.
   Wyjątki (celowo NIE ruszane):
   • text-[14px] — wersalikowe etykiety/eyebrow nad nagłówkami. Przy 19px
     przestałyby być etykietami i konkurowałyby z nagłówkiem.
   • leady (text-[20px]+) — mają być większe od tekstu, to buduje hierarchię. */
/* :not(a):not(button):not(input) — przyciski/inputy zostają w gestii Tailwinda,
   nie skalujemy ich rozmiaru globalnie (żeby nie prowadzić wojny !important). */
body:not(.woocommerce):not(.woocommerce-page) .site-main :not(a):not(button):not(input).text-\[15px\],
body:not(.woocommerce):not(.woocommerce-page) .site-main :not(a):not(button):not(input).text-\[16px\],
body:not(.woocommerce):not(.woocommerce-page) .site-main :not(a):not(button):not(input).text-\[17px\],
body:not(.woocommerce):not(.woocommerce-page) .site-main :not(a):not(button):not(input).text-\[18px\] {
	/* 19px na desktopie, na telefonie płynnie do 17px. */
	font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem) !important;
}

/* --- Zabezpieczenie: długie słowa nie mogą wychodzić poza kadr ---
   Na mobile jednowyrazowe nagłówki typu „KWESTIONARIUSZ" nie mają gdzie się
   złamać i wychodziły poza kontener (ucięty tekst). To siatka bezpieczeństwa
   niezależna od tego, jak jeszcze zmienimy rozmiary. */
.site-main h1,
.site-main h2,
.site-main h3,
.site-main h4 {
	overflow-wrap: break-word;
	word-wrap: break-word;
	/* Bez automatycznego dzielenia słów myślnikami — długie słowa łamie
	   overflow-wrap (bez wstawiania „-"); reszta zawija się do nowej linii. */
	hyphens: none;
}

/* Globalne wyłączenie automatycznej hifenacji (żaden tekst nie ma być
   dzielony myślnikami przy zwężaniu okna). */
body,
.site-main {
	hyphens: none;
	-webkit-hyphens: none;
	-ms-hyphens: none;
}

/* --- Etykiety „eyebrow" (wersaliki nad nagłówkami): jeden rozmiar wszędzie ---
   Sekcje miały je w różnych rozmiarach (14–24px). Ujednolicamy do 14px na
   każdej szerokości. Selektor łapie <p> z `uppercase` + `tracking-` — to
   wzorzec eyebrow-a; wyższa specyficzność niż utility md:text-[…], więc bije
   też warianty responsywne. */
.site-main p[class*='uppercase'] {
	font-size: 20px !important; /* desktop — text-xl jak w Figmie */
	line-height: 1.4 !important;
	color: #6d2a3c !important; /* eyebrow zawsze burgundowy */
	font-family: 'Cormorant Garamond', Georgia, serif !important; /* eyebrow = Cardium (Figma) */
	letter-spacing: 0.14em;
	font-weight: 600;
}

/* Przyciski CTA (marketingowe, wersalikowe) — Cinzel + zaokrąglenie jak w Figmie
   (rounded-md ~6px, nie pełna pigułka). Nadpisuje utility `rounded-full`. */
.site-main :is(a, button).rounded-full.uppercase {
	font-family: 'Cinzel', Georgia, serif;
	font-weight: 600;
	border-radius: 0.375rem !important;
}

@media (max-width: 767px) {
	.site-main p[class*='uppercase'] {
		font-size: 14px !important; /* mobile mniejsze */
	}
}

/* --- Akapity: JEDEN line-height wszędzie ---
   Niezależnie od klasy leading-[…] na danym <p>, każdy akapit ma tę samą
   interlinię. Eyebrow (p.uppercase.tracking) ma wyższą specyficzność, więc
   zachowuje swoją ciasną 1.4. */
.site-main p {
	line-height: 1.5 !important;
}

/* Interlinia dla pozostałych elementów tekstu (listy itd.) */
.site-main li,
.site-main dd {
	line-height: 1.5 !important;
}

/* --- Interlinia nagłówków ---
   Wcześniej były zbite (1.0–1.1) wzorem tonyrobbins.com (90px/81px = 0.9).
   Poluzowane na życzenie — ale nadal wyraźnie ciaśniej niż akapity, bo
   wielolinijkowy nagłówek przy interlinii akapitowej rozpada się na
   luźne, niepowiązane linie zamiast czytać się jako jedna całość. */
.site-main .leading-\[1\.08\] {
	line-height: 1.15 !important;
}
.site-main .leading-\[1\.1\] {
	line-height: 1.16 !important;
}
.site-main .leading-\[1\.14\] {
	line-height: 1.18 !important;
}
.site-main .leading-\[1\.2\] {
	line-height: 1.22 !important;
}
.site-main .leading-tight {
	line-height: 1.2 !important;
}

/* --- Letter-spacing treści --- */
.site-main p,
.site-main li,
.site-main dd,
.site-main figcaption {
	letter-spacing: 0.022em;
}

/* --- Letter-spacing nagłówków --- */
.site-main h1,
.site-main h2,
.site-main h3,
.site-main h4 {
	letter-spacing: 0.028em;
}

.site-main .tracking-\[0\.02em\] {
	letter-spacing: 0.028em !important;
}
.site-main .tracking-\[0\.03em\] {
	letter-spacing: 0.032em !important;
}

/* Kafelki wideo (mk-media) — cała karta klikalna (stretched-link).
   Article ma już `position:relative` (klasa Tailwind), więc ::after linku
   rozciąga się na całą kartę. */
.mk-tile__link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Ikona play na kafelku wideo — osobny link (nowa karta). Musi leżeć NAD
   rozciągniętym ::after karty (z-index 1), a nakładki wokół niej mają
   `pointer-events: none`, żeby nie przechwytywały kliknięć w całe zdjęcie. */
.mk-tile__play {
	position: relative;
	z-index: 2;
	pointer-events: auto;
}

/* ── Strony długiego tekstu (RODO / klauzula / regulamin) ──────────────────
   Nagłówki jak tytuły sekcji, nie jak plakat. Globalny h1/h2 (clamp do 96px)
   jest za duży dla treści prawnych — tu zbijamy do czytelnego rozmiaru.
   Selektor ma wyższą specyficzność niż reguła globalna, więc wygrywa. */
body:not(.woocommerce):not(.woocommerce-page) .site-main.mk-longform h1 {
	font-size: clamp(2rem, 2vw + 1.4rem, 3rem) !important;
	line-height: 1.12 !important;
}
body:not(.woocommerce):not(.woocommerce-page) .site-main.mk-longform h2 {
	font-size: clamp(1.4rem, 0.8vw + 1.1rem, 1.9rem) !important;
	line-height: 1.2 !important;
}
body:not(.woocommerce):not(.woocommerce-page) .site-main.mk-longform h3 {
	font-size: clamp(1.15rem, 0.5vw + 1rem, 1.35rem) !important;
	line-height: 1.3 !important;
}
/* Czytelna długość wiersza treści prawnej. */
.site-main.mk-longform p {
	max-width: 72ch;
}

#payment_method_bacs,
.input-radio {
	accent-color: #c19170 !important;
}

/* ── Treść dokumentu wklejona do edytora (np. tłumaczenie EN) ──────────────
   Wersja zaszyta w szablonie ma klasy Tailwinda, a treść z edytora nie —
   te reguły wyrównują oba warianty, żeby przetłumaczona strona wyglądała
   identycznie jak polska. Rozmiar tekstu celowo tym samym clampem, co
   globalna reguła dla text-[15px]…text-[18px] wyżej. */
.mk-longform__editor :is(p, ol, ul) {
	font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
	line-height: 1.65;
	color: #4a4034;
}

.mk-longform__editor h2 {
	margin-top: 3rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #32271a;
}

.mk-longform__editor h3 {
	margin-top: 2rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #32271a;
}

.mk-longform__editor :is(p, ol, ul) {
	margin-top: 1rem;
}

.mk-longform__editor ol {
	list-style: decimal;
	padding-left: 1.5rem;
}

.mk-longform__editor ul {
	list-style: disc;
	padding-left: 1.5rem;
}

.mk-longform__editor ol ol {
	list-style: lower-alpha;
}

.mk-longform__editor li + li {
	margin-top: 0.75rem;
}

.mk-longform__editor li::marker {
	color: #6d2a3c;
	font-weight: 600;
}

/* Link do dokumentu pod checkboxem zgody w klasycznym checkoucie
   (motyw_kolomanska_render_checkout_consents() w functions.php).
   Wcięcie równa go z tekstem etykiety, obok pola wyboru. */
.mk-consent-doc-link {
	display: inline-block;
	margin: 2px 0 0 30px;
	font-size: 14px;
	line-height: 1.4;
	color: #6d2a3c;
	text-decoration: underline !important;
}

.mk-consent-doc-link:hover,
.mk-consent-doc-link:focus-visible {
	color: #32271a;
}

/* Drugi CTA w menu mobilnym (Panel Profesjonalisty) — wypełniony karmelem. */
.mk-drawer__cta--filled {
	margin-top: 0.75rem;
	background: #c19170;
	color: #fff;
	border-color: #c19170;
}

/* Hero z ciemnym przyciemnieniem — eyebrow biały i trochę większy
   (nadpisuje globalny burgund + rozmiar 20px). */
.site-main .mk-hero-split p[class*='uppercase'] {
	color: #ffffff !important;
	font-size: 26px !important;
	letter-spacing: 0.16em;
}

@media (max-width: 767px) {
	.site-main .mk-hero-split p[class*='uppercase'] {
		font-size: 20px !important;
	}
}

/* CookieYes: ukryty preference center ma sztywną szerokość ~845px i przy
   overflow:visible na .cky-modal rozpycha document scrollWidth (pasek X). */
.cky-modal {
	max-width: 100vw !important;
	overflow: hidden !important;
}

.cky-preference-center {
	width: 100% !important;
	max-width: 100% !important;
}

/* Panel pacjenta: dzień wybrany w kalendarzu nastroju (patient-panel.js).
   Zwykła klasa CSS, nie Tailwind — tailwind.config.js skanuje tylko *.php,
   więc klasa użyta wyłącznie w JS zostałaby ucięta przy buildzie. */
.js-mood-grid button[data-date-key].is-selected {
	outline: 2px solid #6d2a3c;
	outline-offset: 1px;
}

/* ── Łamanie wierszy: czytelna typografia na każdej szerokości ─────────────
   Problem: przy zmianie szerokości okna nagłówki i akapity zostawiały
   pojedyncze wyrazy (a nawet pojedyncze litery, np. „I" w „ZDROWIE PSYCHICZNE
   I INTYMNE") samotnie w ostatnim wierszu.

   Rozwiązanie jest dwuwarstwowe:
   1) PHP wstawia twardą spację po jednoliterowych wyrazach (a i o u w z) —
      patrz motyw_kolomanska_no_orphans() w functions.php,
   2) poniższe reguły każą przeglądarce równoważyć wiersze zamiast upychać
      maksimum słów w pierwszym z nich.

   `text-wrap` jest ignorowane przez starsze przeglądarki — degraduje się do
   dotychczasowego zachowania, więc nie ma ryzyka regresji. */

.site-main :is(h1, h2, h3, h4, h5, h6),
.site-header :is(h1, h2, h3),
.site-footer :is(h2, h3, h4) {
	/* Równe długości wierszy — koniec z jednym słowem w ostatniej linii. */
	text-wrap: balance;
	/* Nie dziel wyrazów w środku, jeśli tylko mieszczą się w kadrze.
	   `overflow-wrap: break-word` (reguła wyżej) zostaje jako siatka
	   bezpieczeństwa dla wyrazów szerszych niż kontener. */
	word-break: normal;
}

.site-main :is(p, li, dd, dt, figcaption, blockquote, label),
.site-footer :is(p, li) {
	/* Nie zostawiaj krótkiej „wdowy" w ostatnim wierszu akapitu. */
	text-wrap: pretty;
	word-break: normal;
}

/* ── Nagłówki kart: rozmiar liczony od szerokości KOLUMNY ──────────────────
   Problem, który wracał w kilku blokach: „INDYWIDUALIZACJA" w standardzie
   pracy i „PSYCHOSEKSUOLOGIA" w metodach łamały się w środku wyrazu i
   pojedyncza litera schodziła do nowej linii.

   Przyczyna nie leży w łamaniu, tylko w rozmiarze: szablony ustawiają stałe
   24-30 px niezależnie od tego, ile miejsca ma kolumna. Gdy siatka przechodzi
   na 2 lub 4 kolumny, najdłuższy polski wyraz bywa szerszy niż kolumna —
   a wtedy `overflow-wrap: break-word` (siatka bezpieczeństwa przed wyjściem
   poza kadr) robi dokładnie to, co ma robić, czyli tnie wyraz.

   Media queries tego nie rozwiążą, bo szerokość karty zależy od liczby kolumn
   w danym bloku, a nie od szerokości okna. Dlatego karta staje się
   kontenerem zapytań, a nagłówek skaluje się jednostką `cqi` (1cqi = 1%
   szerokości karty). Reguła włącza się TYLKO w wąskich kartach — szerokie
   zachowują rozmiary z szablonów.

   Strojenie: jeśli nagłówki mają być większe/mniejsze, zmieniasz jedną
   liczbę — 6.4cqi. */

/* Celowo tylko siatki o równych kolumnach (grid-cols-2/3/4 wraz z wariantami
   sm:/md:/lg:). Siatki z torami `auto` (np. grid-cols-[1fr_auto_auto]) są
   wykluczone — tam szerokość kolumny wynika z treści, a `container-type`
   wyzerowałby jej wkład i kolumna by się złożyła. */
.site-main [class*='grid-cols-2'] > *:has(:is(h3, h4)),
.site-main [class*='grid-cols-3'] > *:has(:is(h3, h4)),
.site-main [class*='grid-cols-4'] > *:has(:is(h3, h4)) {
	container-type: inline-size;
}

@container (max-width: 420px) {
	.site-main :is(h3, h4) {
		font-size: clamp(1rem, 6.4cqi, 1.75rem);
		line-height: 1.16;
	}
}

/* Elementy, w których łamanie w środku wyrazu jest wręcz pożądane:
   długie adresy e-mail i URL-e w stopce, kontakcie i treściach prawnych. */
.site-main a[href^='mailto:'],
.site-main a[href^='http'],
.site-footer a[href^='mailto:'],
.site-footer a[href^='http'] {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Wersaliki z dużym trackingiem (eyebrow, przyciski CTA) są najbardziej
   podatne na rozjeżdżanie się — tu zawsze wolimy przenieść całe słowo. */
.site-main p[class*='uppercase'],
.site-main :is(a, button).uppercase {
	text-wrap: balance;
	word-break: normal;
	overflow-wrap: normal;
}

.wc-block-components-address-card,
.wc-block-components-totals-wrapper,
.wc-block-components-checkbox__label {
	font-size: 18px !important;
}

.wc-block-components-product-metadata__description {
	display: none !important;
}

.mk-cta-media__img {
	border-radius: 0.75rem;
}

button,
a {
	cursor: pointer !important;
}