/* ceraminika — Storefront overrides + WooCommerce overrides
   Built on top of brand.css design tokens. */

/* ---------- Page baseline ---------- */
body.wp-singular,
body {
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-sans);
	overflow-x: hidden; /* belt-and-braces against horizontal scroll on mobile */
}

/* WordPress emojis — normally added inline by WP emoji loader, but some
   plugins disable that and the SVG falls back to natural size (huge). */
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 0.07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}

#page, .site, .site-content {
	background: var(--bg);
}

/* ---------- Header / nav ----------
   Storefront wraps brand + nav in TWO separate .col-full divs (brand row,
   then nav row). We flex the whole .site-header itself and de-block the
   wrappers so brand sits left and nav sits right on the same line. */
.site-header {
	background: var(--bg) !important;
	border-bottom: 1px solid var(--border);
	padding: 14px 24px !important;
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
}
.site-header::before,
.site-header::after { display: none !important; }
.site-header > .col-full {
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}
.storefront-primary-navigation {
	flex: 1 1 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}
.storefront-primary-navigation > .col-full {
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 0 0 auto !important; /* push nav row to the right */
	display: flex;
	justify-content: flex-end;
	background: transparent !important;
}
.site-branding {
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	display: flex;
	align-items: center;
}
/* Storefront renders a fallback page list as a second <div class="menu"> inside
   .main-navigation when no menu is in the secondary location. Hide it. */
.main-navigation > div.menu { display: none !important; }
.site-branding .site-title,
.site-branding h1.site-title,
.site-title a {
	font-family: var(--font-display) !important;
	font-size: 28px !important;
	line-height: 1 !important;
	color: var(--crimson) !important;
	text-transform: lowercase;
	font-weight: 400;
	letter-spacing: -0.005em;
	margin: 0 !important;
}
.site-header .custom-logo,
.site-header .custom-logo-link img {
	height: 180px !important;
	width: auto !important;
	max-width: 360px !important;
	max-height: 180px !important;
	display: block;
}

/* ---------- Floating ("pinned") cart button ----------
   Rendered by cmk_render_cart_link() in functions.php; updated via WC's
   add-to-cart fragments AJAX so the badge reflects the cart count without
   a page reload. */
/* Hide the floating cart icon on cart & checkout — you're already there, and
   on mobile it overlaps the bottom-right of the quantity steppers / the
   "Kupuję i płacę" button, eating taps. */
.woocommerce-cart .cmk-cart,
.woocommerce-checkout .cmk-cart {
	display: none !important;
}

.cmk-cart {
	position: fixed;
	bottom: 24px; /* floating in bottom-right, classic e-commerce pattern */
	right: 24px;
	z-index: 10001; /* above cookie banner (10000) so it's clickable on mobile */
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--surface);
	color: var(--crimson);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	transition: all var(--dur-base) var(--ease-soft);
}
.cmk-cart:hover {
	background: var(--crimson);
	color: var(--blush-50);
	border-color: var(--crimson);
	box-shadow: var(--shadow-pop);
	transform: translateY(-2px);
}
.cmk-cart--has-items {
	background: var(--crimson);
	color: var(--blush-50);
	border-color: var(--crimson);
}
.cmk-cart__badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--coral);
	color: var(--blush-50);
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 11px;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--radius-pill);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* ---------- Container width — unify across all pages ---------- */
.col-full,
.woocommerce .col-full,
.woocommerce-page .col-full,
body.cmk-no-sidebar .col-full,
.site-content .col-full {
	max-width: 1200px !important;
	padding: 0 24px !important;
	margin: 0 auto !important;
	box-sizing: border-box;
}

/* ---------- Promo bar (above header) ---------- */
.cmk-promo {
	background: var(--crimson);
	color: var(--blush-50);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-align: center;
	padding: 8px 16px;
}
.cmk-promo__inner {
	display: block;
	max-width: 100%;
	white-space: normal !important;
	word-break: normal;
}
.cmk-promo__inner em { font-style: normal; color: var(--blush-200); }
@media (max-width: 600px) {
	.cmk-promo { font-size: 11px; padding: 6px 12px; line-height: 1.35; }
}
/* User opted out of the header search box. */
.site-search { display: none !important; }

/* Storefront's old header cart is removed in functions.php; hide any
   lingering markup just in case the action removal didn't apply. */
.site-header-cart, .site-header .header-cart { display: none !important; }

/* Hide Storefront's mobile sticky footer bar (account / search / cart).
   We have our own floating cart and the search box was disabled. */
.storefront-handheld-footer-bar { display: none !important; }
/* Front page: don't show the page title ("Strona główna") above the hero. */
body.home.page .entry-header,
body.home.page .page-title,
body.page.home .entry-header,
body.home .entry-header { display: none !important; }
.site-header-cart .cart-contents {
	padding: 8px 14px !important;
}

.main-navigation {
	font-family: var(--font-sans);
	font-size: 15px;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center;
	clear: none !important;
}
.main-navigation > .primary-navigation { display: contents !important; }

/* ---------- Mobile header / nav (≤ 768px) ----------
   Brand on top row; nav inline horizontal underneath, always visible
   (no JS toggle). Submenu hidden on mobile — categories accessible from
   the sklep page itself. */
@media (max-width: 768px) {
	.site-header {
		padding: 10px 16px !important;
		gap: 8px;
		flex-direction: column;
		align-items: center;
	}
	.site-header > .col-full,
	.storefront-primary-navigation,
	.storefront-primary-navigation > .col-full {
		flex: 0 0 auto;
		width: 100% !important;
		justify-content: center !important;
		display: flex !important;
	}
	.storefront-primary-navigation { display: block !important; }
	.main-navigation { width: 100% !important; justify-content: center; }
	.site-header .custom-logo,
	.site-header .custom-logo-link img {
		height: 88px !important;
		max-height: 88px !important;
	}
	.site-branding { justify-content: center; width: 100%; }

	/* Hide Storefront's hamburger — menu is always visible on mobile. */
	button.menu-toggle { display: none !important; }

	.main-navigation > .primary-navigation {
		display: block !important;
		position: static !important;
		box-shadow: none !important;
		border: none !important;
		padding: 0 !important;
		background: transparent !important;
	}
	.main-navigation .primary-navigation ul.menu,
	.main-navigation .primary-navigation > ul {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px;
		padding: 0 !important;
		margin: 0 !important;
	}
	.main-navigation .primary-navigation ul.menu > li {
		display: inline-block;
	}
	.main-navigation .primary-navigation ul.menu > li > a {
		padding: 8px 12px !important;
	}
	/* Hide nested category menu on mobile — too much for a top nav.
	   Users land on /sklep/ to see all categories. */
	.main-navigation .primary-navigation ul ul.sub-menu { display: none !important; }

	/* Floating cart bottom-right so it never overlaps the promo bar. */
	.cmk-cart {
		top: auto !important;
		bottom: 16px !important;
		right: 16px !important;
		width: 48px;
		height: 48px;
	}

	/* Promo bar: allow it to wrap to a second line on small screens
	   so the message doesn't get truncated. */
	.cmk-promo {
		font-size: 11px !important;
		padding: 6px 10px !important;
		line-height: 1.4 !important;
		white-space: normal;
		overflow: visible;
	}

	/* View toggle: compact on mobile too. */
	.cmk-view-toggle__label { display: none; }
}
.main-navigation > div > ul,
.main-navigation ul.menu,
.main-navigation ul.nav-menu {
	display: flex !important;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.main-navigation ul li {
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.main-navigation ul li a {
	color: var(--ink) !important;
	text-transform: lowercase;
	text-decoration: none !important;
	font-weight: 500;
	padding: 8px 14px;
	display: inline-block;
	position: relative;
	transition: color var(--dur-fast) var(--ease-soft),
	            text-decoration-color var(--dur-fast) var(--ease-soft);
}
/* Underline by text-decoration so it spans only the actual word — not the
   submenu caret indicator that Storefront stamps next to the link text. */
.main-navigation ul li:hover > a,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current-menu-parent > a {
	color: var(--crimson) !important;
	text-decoration: underline !important;
	text-decoration-color: var(--crimson) !important;
	text-decoration-thickness: 1.5px !important;
	text-underline-offset: 4px !important;
}
/* Submenu under "sklep" — soft popover */
.main-navigation ul ul.sub-menu,
.main-navigation ul ul.children {
	background: var(--surface) !important;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	padding: 8px !important;
	min-width: 200px;
}
.main-navigation ul ul li { width: 100%; }
.main-navigation ul ul li a {
	padding: 8px 12px;
	border-radius: var(--radius-sm);
}
.main-navigation ul ul li a:hover { background: var(--blush-50); }

/* ---------- Mobile menu toggle ----------
   Storefront's hamburger button — exclude it from our universal button
   styling below (which makes everything a crimson pill). */
.main-navigation button.menu-toggle,
button.menu-toggle {
	background: transparent !important;
	color: var(--crimson) !important;
	border: 1.5px solid var(--border-strong) !important;
	border-radius: var(--radius-pill) !important;
	font-family: var(--font-sans) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	padding: 8px 16px !important;
	box-shadow: none !important;
	text-transform: lowercase;
	width: auto !important;
	min-height: auto !important;
}
button.menu-toggle:hover {
	background: var(--blush-50) !important;
	border-color: var(--crimson) !important;
	transform: none !important;
	box-shadow: none !important;
}
button.menu-toggle::before,
button.menu-toggle::after { display: none !important; }
button.menu-toggle .menu-toggle-bars,
button.menu-toggle span:not(.screen-reader-text) {
	background: currentColor !important;
}

/* ---------- Buttons (Storefront + WooCommerce) ----------
   Bare `button` is intentionally NOT in this list — it would also restyle the
   block editor's toolbar buttons (B / I / list / link …) when theme.css is
   loaded as an editor stylesheet. Frontend buttons all carry a class. */
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.widget a.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #content input.button,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce-page #respond input#submit,
.woocommerce-page #content input.button {
	background: var(--crimson) !important;
	color: var(--blush-100) !important;
	border: none;
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 15px;
	padding: 12px 22px;
	box-shadow: var(--shadow-sm);
	transition: all var(--dur-base) var(--ease-soft);
	text-transform: lowercase;
	letter-spacing: 0;
}
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page a.button:hover {
	background: var(--crimson-700) !important;
	box-shadow: var(--shadow-pop);
	transform: translateY(-2px);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--coral) !important;
	color: var(--blush-50) !important;
}
/* Single-product "Add to cart" button — coral was too pink, use crimson. */
.woocommerce div.product .single_add_to_cart_button,
.woocommerce div.product button.single_add_to_cart_button.alt {
	background: var(--crimson) !important;
	color: var(--blush-100) !important;
}
.woocommerce div.product .single_add_to_cart_button:hover {
	background: var(--crimson-700) !important;
}

/* ---------- Headings ----------
   The display heading sizes from brand.css are intended for hero copy, not
   for shop archive titles or sidebar widget titles. Constrain them in
   functional contexts. */
h1, h2 {
	font-family: var(--font-display);
	color: var(--crimson);
	font-weight: 400;
	text-transform: lowercase;
}
h3, h4 {
	font-family: var(--font-sans);
	font-weight: 700;
}
/* Page / archive titles — much smaller than a hero h1 */
.woocommerce-products-header__title,
.page-title,
.entry-title,
.woocommerce h1.page-title,
.woocommerce-page h1.page-title {
	font-size: clamp(32px, 4vw, 44px) !important;
	line-height: 1.05;
	margin: 0 0 var(--space-5);
	overflow-wrap: anywhere;
}
/* Single post / page heading */
.entry-header .entry-title,
.hentry .entry-title {
	font-size: clamp(28px, 3.5vw, 40px) !important;
}

/* ---------- Shop / category cards ---------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	box-shadow: var(--shadow-sm);
	transition: all var(--dur-base) var(--ease-soft);
}
.woocommerce ul.products li.product:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
	font-family: var(--font-sans) !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	color: var(--ink) !important;
	text-transform: none !important;
	text-align: center;
	padding: 12px 0 4px !important;
	margin: 0 !important;
	text-decoration: none !important;
}
/* Storefront wraps the whole product card content in <a>; remove the
   inherited brand.css underline from anything on the card except the
   "dodaj do koszyka" button. */
.woocommerce ul.products li.product a,
.woocommerce ul.products li.product a:hover {
	text-decoration: none !important;
}
.woocommerce ul.products li.product a.button { /* keep button style intact */ }
.woocommerce ul.products li.product .price {
	font-family: var(--font-sans);
	color: var(--crimson);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	display: block;
	margin: 8px 0 12px;
}
/* Currency symbol stays at normal weight, just the number is bold. */
.woocommerce .woocommerce-Price-currencySymbol {
	font-weight: 400 !important;
	margin-left: 2px;
}
.woocommerce ul.products li.product img {
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-3) !important;
	aspect-ratio: 5 / 6;
	object-fit: cover;
	width: 100%;
	height: auto;
}
/* Out-of-stock tiles: pushed to the end via posts_clauses (functions.php).
   Visually faded + grayscaled so users immediately spot they're unavailable. */
.woocommerce ul.products li.product.outofstock { opacity: 0.55; }
.woocommerce ul.products li.product.outofstock img { filter: grayscale(0.6); }
.woocommerce ul.products li.product.outofstock:hover { opacity: 0.75; }
.woocommerce ul.products li.product.outofstock::before {
	content: "niedostępne";
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 9;
	background: var(--ink-muted) !important;
	color: var(--surface) !important;
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 6px 12px;
	pointer-events: none;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin: var(--space-3) auto 0 !important;
	display: block;
	width: max-content;
}

/* Mobile: shrink the add-to-cart CTA to a "+ cart" pill icon to save card width.
   The companion "View cart" link is hidden — the floating cart icon serves that. */
@media (max-width: 600px) {
	.woocommerce ul.products li.product .button.add_to_cart_button {
		width: auto !important;
		min-width: 64px;
		height: 44px;
		padding: 0 14px !important;
		border-radius: var(--radius-pill) !important;
		font-size: 0 !important;
		line-height: 1 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		gap: 6px;
	}
	/* "+" sign before the cart icon */
	.woocommerce ul.products li.product .button.add_to_cart_button::before {
		content: "+";
		font-size: 22px;
		font-weight: 400;
		line-height: 1;
		color: inherit;
	}
	/* Cart icon (SVG via mask, takes current text color) */
	.woocommerce ul.products li.product .button.add_to_cart_button::after {
		content: "";
		display: inline-block;
		width: 18px;
		height: 18px;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/><path d='M3 6h18'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>") no-repeat center / contain;
		        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/><path d='M3 6h18'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>") no-repeat center / contain;
	}
	/* Added state: collapse to a single check, hide the cart icon */
	.woocommerce ul.products li.product .button.add_to_cart_button.added::before,
	.woocommerce ul.products li.product .button.add_to_cart_button.loading::before {
		content: "✓";
		font-size: 20px;
		font-weight: 600;
	}
	.woocommerce ul.products li.product .button.add_to_cart_button.added::after,
	.woocommerce ul.products li.product .button.add_to_cart_button.loading::after {
		display: none;
	}
	/* Hide WC's "View cart" sibling link — floating cart icon already shows count. */
	.woocommerce ul.products li.product .added_to_cart {
		display: none !important;
	}
}

/* ---------- Shop toolbar (sort + view toggle) ----------
   Wrapped in `.cmk-shop-toolbar` (functions.php) so we get one flex row.
   Desktop: orderby <select> left, view-toggle pushed right.
   Mobile (<=600px): stacked vertically. */
.cmk-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 var(--space-5);
}
@media (max-width: 600px) {
	.cmk-shop-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.cmk-shop-toolbar form.woocommerce-ordering,
	.cmk-shop-toolbar form.woocommerce-ordering select { width: 100% !important; }
	.cmk-view-toggle {
		margin: 0 !important;
		justify-content: flex-start;
	}
}
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count { display: none !important; }
.woocommerce form.woocommerce-ordering,
.woocommerce-page form.woocommerce-ordering {
	float: none !important;
	margin: 0 !important;
	display: inline-block;
	vertical-align: middle;
}
.woocommerce form.woocommerce-ordering select {
	margin: 0;
	padding: 10px 14px;
}

/* ---------- View toggle (standard / compact grid) ---------- */
.cmk-view-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 0 auto !important; /* push to the right within the toolbar */
	font-family: var(--font-sans);
	font-size: 13px;
	flex-wrap: wrap;
	vertical-align: middle;
}
.cmk-view-toggle__label {
	color: var(--fg-muted);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-right: 4px;
}
.cmk-view-toggle button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent !important;
	color: var(--fg-soft) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-pill) !important;
	padding: 6px 12px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	box-shadow: none !important;
	text-transform: lowercase;
	transition: all var(--dur-fast) var(--ease-soft);
	cursor: pointer;
}
.cmk-view-toggle button:hover {
	color: var(--crimson) !important;
	border-color: var(--border-strong) !important;
	transform: none !important;
	box-shadow: none !important;
}
.cmk-view-toggle button.is-active {
	background: var(--crimson) !important;
	color: var(--blush-50) !important;
	border-color: var(--crimson) !important;
}

/* Override Storefront's float-based product grid with CSS Grid so columns
   actually obey our class. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	gap: 24px !important;
	margin: 0 0 var(--space-7) !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}
/* WooCommerce's `[products columns="N"]` renders `<ul class="products columns-N">` */
.woocommerce ul.products.columns-1 { grid-template-columns: 1fr !important; }
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.woocommerce ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
/* View-toggle (shop toolbar) overrides apply on shop pages where user picks. */
.woocommerce ul.products.cmk-view-standard {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.woocommerce ul.products.cmk-view-compact {
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	gap: 16px !important;
}
/* Home "nowości" with cmk-view-compact AND columns-4: 4 cols on desktop,
   smaller below. */
.woocommerce ul.products.cmk-view-compact.columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 768px) {
	.woocommerce ul.products.cmk-view-compact.columns-4 {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 480px) {
	.woocommerce ul.products.cmk-view-compact.columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
/* Compact view always hides the per-tile add-to-cart button (we keep it on
   the standard view; in compact the floating cart is enough). */
.woocommerce ul.products.cmk-view-compact li.product .button,
.woocommerce ul.products.cmk-view-compact li.product .added_to_cart {
	display: none !important;
}
.woocommerce ul.products.cmk-view-compact li.product { padding: 10px !important; }
.woocommerce ul.products.cmk-view-compact .woocommerce-loop-product__title {
	font-size: 14px !important;
}
.woocommerce ul.products.cmk-view-compact .price {
	font-size: 22px !important;
	line-height: 1.15 !important;
}
.woocommerce ul.products.cmk-view-compact .button { display: none !important; }
@media (max-width: 1024px) {
	.woocommerce ul.products.cmk-view-compact { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 768px) {
	.woocommerce ul.products.cmk-view-standard { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.woocommerce ul.products.cmk-view-compact { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 480px) {
	.woocommerce ul.products.cmk-view-standard { grid-template-columns: 1fr !important; }
	.woocommerce ul.products.cmk-view-compact { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Sale and "nowość" badges — sale uses Storefront's .onsale flash, "nowość"
   is our own .cmk-badge rendered from a post-meta flag. Both share visuals. */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale,
.woocommerce ul.products li.product .cmk-badge,
.woocommerce div.product .cmk-badge {
	background: var(--coral) !important;
	color: var(--blush-50) !important;
	border-radius: var(--radius-pill) !important;
	font-family: var(--font-sans) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	padding: 6px 12px !important;
	min-height: auto !important;
	min-width: auto !important;
	line-height: 1.2 !important;
	margin: 0 !important;
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 9;
}
/* "Nowość" sits below sale badge if both are present. */
.woocommerce ul.products li.product .onsale + .cmk-badge--new,
.woocommerce div.product .onsale + .cmk-badge--new {
	top: 48px;
}
.woocommerce ul.products li.product .cmk-badge--new,
.woocommerce div.product .cmk-badge--new {
	background: var(--crimson) !important;
}

/* ---------- No-sidebar layouts (front, shop, product) ---------- */
body.cmk-no-sidebar #primary,
body.cmk-no-sidebar #content > .col-full > #primary {
	float: none !important;
	width: 100% !important;
	max-width: 1200px;
	margin: 0 auto !important;
}
body.cmk-no-sidebar #secondary,
body.cmk-no-sidebar .widget-area { display: none !important; }

/* Narrow content column on regular static pages (O mnie, Kontakt, …) so the
   front layout matches Gutenberg's editor canvas width. Shop, single product,
   and the home template keep the full 1200px. */
body.page-template-default:not(.home) .entry-content,
body.page-template-default:not(.home) .entry-header {
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
}
/* Larger reading text on those static pages — comfortable for longer copy. */
body.page-template-default:not(.home) .entry-content p,
body.page-template-default:not(.home) .entry-content li {
	font-size: 18px;
	line-height: 1.7;
}
/* Container width is unified globally (see "Container width" rule earlier);
   no per-layout override here. */

/* ---------- Custom front-page sections ---------- */
.cmk-hero--big {
	padding: 96px 48px !important;
	margin: 0 0 48px;
	min-height: 420px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
@media (max-width: 600px) {
	.cmk-hero--big {
		padding: 48px 20px !important;
		min-height: 0;
	}
}
.cmk-hero .cmk-cta-row {
	display: flex;
	gap: 12px;
	margin-top: var(--space-5);
	margin-bottom: 0;
	flex-wrap: wrap;
}
.cmk-btn {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 15px;
	padding: 12px 22px;
	border-radius: var(--radius-pill);
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all var(--dur-base) var(--ease-soft);
}
.cmk-btn--primary {
	background: var(--crimson);
	color: var(--blush-100) !important;
	box-shadow: var(--shadow-sm);
}
.cmk-btn--primary:hover {
	background: var(--crimson-700);
	box-shadow: var(--shadow-pop);
	transform: translateY(-2px);
}
.cmk-btn--ghost {
	background: transparent;
	color: var(--crimson) !important;
	border: 1.5px solid var(--crimson);
}
.cmk-btn--ghost:hover {
	background: var(--blush-50);
	border-color: var(--crimson);
}
.cmk-section { margin: 64px 0; }
.cmk-section-title {
	font-family: var(--font-display) !important;
	color: var(--crimson) !important;
	font-size: clamp(36px, 5vw, 56px) !important;
	text-transform: lowercase;
	font-weight: 400;
	margin: 0 0 32px !important;
	text-align: left;
}
.cmk-band {
	background: var(--clay);
	padding: 48px;
	border-radius: var(--radius-lg);
	text-align: center;
	margin: 64px 0 32px;
}
.cmk-band-text {
	font-family: var(--font-sans);
	font-size: 17px;
	color: var(--fg-soft);
	max-width: 580px;
	margin: 0 auto !important;
}
.cmk-band-text em { color: var(--crimson); font-style: italic; }

/* ---------- Full-bleed section (escapes the 1200px container) ----------
   Used for the Instagram feed strip on the home page. */
.cmk-fullbleed {
	position: relative;
	width: 100vw;
	left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	right: 50%;
	background: var(--clay);
	padding: var(--space-8) 0;
	margin-top: var(--space-8);
	margin-bottom: var(--space-8);
}
.cmk-fullbleed__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 24px;
}

.cmk-instagram__header {
	text-align: center;
	margin-bottom: var(--space-7);
}
.cmk-instagram__title {
	font-family: var(--font-display);
	color: var(--crimson);
	font-weight: 400;
	font-size: clamp(36px, 5vw, 56px);
	text-transform: lowercase;
	margin: 8px 0 12px;
}
.cmk-instagram__sub {
	font-family: var(--font-sans);
	font-size: 17px;
	color: var(--fg-soft);
	max-width: 580px;
	margin: 0 auto;
}
.cmk-instagram__sub a {
	color: var(--crimson);
	text-decoration: none;
	font-weight: 600;
}
.cmk-instagram__sub a:hover { color: var(--coral-500); }

/* Spotlight popup — height-only cap. Width is left to plugin JS so nav
   arrows position correctly. Container clips overflow so a tall reel can't
   exceed the viewport even if its inner element computes a bigger height.
   Photos render with even black bars on the sides (acceptable). */
.MediaPopupBox__container {
	max-height: 100vh !important;
	overflow: hidden !important;
}
.MediaPopupBox__modal-layer,
.MediaPopupBox__modal-aligner,
.MediaPopupBox__modal {
	max-height: 100vh !important;
}
.MediaPopupBox__modal img,
.MediaPopupBox__modal video,
.MediaPopupBox__modal iframe,
.MediaPopupBoxImage__container,
.MediaPopupBoxImage__image {
	max-height: 90vh !important;
	object-fit: contain !important;
}
/* Plugin defaults: container=#bbb (gray), image=#000, MediaThumbnail__root
   uses --sli-grey, MediaPopupBoxObject loading anim uses --sli-barely-grey.
   Make all of them transparent so vertical media don't get gray/black
   side bars in the popup. */
.MediaPopupBoxImage__container,
.MediaPopupBoxImage__image,
.IgVideoPlayer__root,
.MediaThumbnail__root,
.MediaPopupBoxObject__loading-animation,
.MediaPopupBoxObject__reset {
	background: transparent !important;
	background-color: transparent !important;
}

/* IgVideoPlayer / Reels — keep plugin's absolute positioning (thumbnail
   overlays the video) but center the thumbnail horizontally and cap heights.
   Reset min-width/min-height that the plugin sets to 100%!important. */
/* Drop the black bg + cap root height to viewport. Center thumbnail/video
   both axes via translate(-50%, -50%). Empty space around the media is now
   transparent, so popup overlay shows through instead of a black box. */
.IgVideoPlayer__root {
	max-height: 85vh !important;
}
/* Thumbnail and video fill the root same way `.IgVideoPlayer__control` does
   (top/bottom/left/right: 0). object-fit on inner img/video keeps proportions
   without distortion. */
.IgVideoPlayer__thumbnail,
.IgVideoPlayer__video {
	top: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	transform: none !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 100% !important;
	max-height: 85vh !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
}
.IgVideoPlayer__thumbnail img,
.IgVideoPlayer__video {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}
/* When the user clicks play the plugin adds `.IgVideoPlayer__thumbnail-hidden`.
   Our `display: flex !important` above breaks that — restore the hide. */
.IgVideoPlayer__thumbnail-hidden {
	display: none !important;
}

/* Empty-state placeholder shown while the feed isn't connected yet. */
.cmk-instagram-placeholder {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	max-width: 100%;
}
.cmk-instagram-placeholder__cell {
	aspect-ratio: 1 / 1;
	background: var(--blush-100);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--coral-500);
	font-size: 32px;
}
.cmk-instagram-placeholder__cta {
	margin: 24px 0 0 !important;
	text-align: center;
}
.cmk-instagram-placeholder__cta small {
	display: block;
	margin-top: 8px;
	color: var(--fg-muted);
	font-size: 12px;
}

/* ---------- Admin-only notice (shown via [cmk_admin_notice]) ---------- */
.cmk-admin-notice {
	background: var(--blush-50);
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-md);
	padding: 16px 20px;
	margin: 16px 0;
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--fg-soft);
}
.cmk-admin-notice::before {
	content: "tylko dla admina · ";
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--crimson);
	font-size: 11px;
}
@media (max-width: 768px) {
	.cmk-instagram-placeholder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Order form ([cmk_order_form] shortcode) ---------- */
.cmk-order-form {
	max-width: 640px;
	margin: var(--space-5) 0 var(--space-6);
	display: grid;
	gap: var(--space-4);
}
.cmk-form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}
.cmk-form-row label {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 500;
	color: var(--fg-soft);
}
.cmk-form-req { color: var(--crimson); margin-left: 2px; }
.cmk-form-hint { color: var(--fg-muted); font-weight: 400; font-size: 13px; }
.cmk-order-form input,
.cmk-order-form textarea {
	width: 100%;
	box-sizing: border-box;
}
.cmk-order-form textarea { resize: vertical; min-height: 140px; }
.cmk-form-submit { margin: 0; }
.cmk-form-honeypot {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.cmk-form-errors {
	background: var(--blush-50);
	border: 1px solid var(--coral);
	border-radius: var(--radius-md);
	padding: 12px 16px;
	color: var(--crimson);
}
.cmk-form-errors p { margin: 4px 0; font-size: 14px; }
.cmk-form-success {
	background: var(--blush-50);
	border: 1px solid var(--coral);
	border-radius: var(--radius-md);
	padding: 16px 20px;
	color: var(--ink);
	font-family: var(--font-sans);
	max-width: 640px;
	margin: var(--space-5) 0;
}
.cmk-form-success p { margin: 0; }
.cmk-form-success strong { color: var(--crimson); }

/* Checkbox rows: regulamin/polityka + newsletter. Aligned at top so multi-line
   labels read cleanly. */
.cmk-form-row--check {
	display: block;
	font-size: 14px;
	line-height: 1.5;
}
.cmk-form-row--check > label {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 10px;
	align-items: start;
	cursor: pointer;
	font-weight: 400;
	color: var(--fg);
}
.cmk-form-row--check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--crimson);
	cursor: pointer;
}
.cmk-form-row--check a {
	color: var(--crimson);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.cmk-form-row--check a:hover { color: var(--coral-500); }

/* ---------- Cookie consent banner ---------- */
/* While the banner is visible, push page content up so the fixed banner
   never sits on top of interactive elements at the bottom of the page.
   The height is measured in cookie-banner.js → --cmk-cookie-h. */
body.cmk-has-cookie-banner {
	padding-bottom: var(--cmk-cookie-h, 0) !important;
}

.cmk-cookie-banner {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-pop);
	padding: 18px 22px;
	z-index: 10000;
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--fg);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 18px;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .25s var(--ease-soft), transform .25s var(--ease-soft);
}
.cmk-cookie-banner.is-visible { opacity: 1; transform: none; }
.cmk-cookie-banner__text { margin: 0; line-height: 1.55; }
.cmk-cookie-banner__actions {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}
.cmk-cookie-banner__link {
	font-size: 13px;
	color: var(--crimson);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.cmk-cookie-banner__link:hover { color: var(--coral-500); }
.cmk-cookie-banner .cmk-btn { padding: 10px 18px; font-size: 14px; }
@media (max-width: 700px) {
	.cmk-cookie-banner {
		grid-template-columns: 1fr;
		left: 12px;
		right: 12px;
		bottom: 12px;
		padding: 16px;
	}
	.cmk-cookie-banner__actions { justify-content: flex-start; }
	.cmk-cookie-banner .cmk-btn { flex: 1 1 auto; justify-content: center; }
	.cmk-cookie-banner__link { width: 100%; text-align: center; padding-top: 4px; }
}

/* ---------- Single product ---------- */
.woocommerce div.product .product_title {
	font-family: var(--font-display);
	color: var(--crimson);
	font-weight: 400;
	text-transform: lowercase;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price,
body.single-product .woocommerce div.product p.price,
body.single-product .woocommerce div.product span.price {
	font-family: var(--font-sans) !important;
	color: var(--crimson) !important;
	font-weight: 700 !important;
	font-size: 2.4em !important;
	line-height: 1.15 !important;
	margin: 0.2em 0 0.5em !important;
}

/* Product gallery: image fills its column (Storefront/WC leave it at natural size). */
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image--placeholder {
	width: 100%;
}
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image a,
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image--placeholder a {
	display: block;
	width: 100%;
}
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image--placeholder img {
	width: 100%;
	height: auto;
	display: block;
}

/* Magnifier trigger: replace WC pseudo-element icon with a clean white SVG on a crimson disc. */
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	background-color: var(--crimson) !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='20' y1='20' x2='16.5' y2='16.5'/></svg>") !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 58% 58%;
	border: none !important;
	box-shadow: var(--shadow-sm);
	text-indent: -9999px;
	transition: background-color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger::before,
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger::after {
	display: none !important;
}
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
	background-color: var(--crimson-700) !important;
	transform: scale(1.05);
}

/* ---------- Form inputs ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--fg);
	transition: border-color var(--dur-fast) var(--ease-soft);
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--coral);
	box-shadow: 0 0 0 3px rgba(255, 132, 150, 0.15);
}

/* ---------- Footer ----------
   Custom three-column footer (brand · menu · legal) on a real ceramic photo
   background — the bottom of one of Dominika's plates with the brand stamp.
   A blush gradient overlay keeps text readable on top of the texture. */
.site-footer {
	color: var(--fg-soft);
	border-top: 1px solid var(--border);
	padding: var(--space-8) 0 var(--space-6);
	background-color: var(--clay);
	background-image:
		linear-gradient(180deg,
			rgba(255, 244, 235, 0.85) 0%,
			rgba(255, 244, 235, 0.70) 50%,
			rgba(255, 244, 235, 0.85) 100%),
		url("../img/footer-bg.jpg");
	background-size: cover, cover;
	background-position: center;
	background-repeat: no-repeat;
}
.site-footer a { color: var(--crimson); text-decoration: none; }
.site-footer a:hover { color: var(--coral-500); }

.cmk-footer {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}
.cmk-footer__cols {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr;
	gap: var(--space-7);
	padding-bottom: var(--space-6);
	border-bottom: 1px solid var(--border);
}
@media (max-width: 768px) {
	.cmk-footer__cols {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}
}
.cmk-footer__name {
	font-family: var(--font-display);
	font-size: clamp(36px, 4.5vw, 56px);
	color: var(--crimson);
	text-transform: lowercase;
	font-weight: 400;
	line-height: 1;
	margin-bottom: 12px;
}
.cmk-footer__tagline {
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-soft);
	margin: 0 0 16px;
	max-width: 280px;
}
.cmk-footer__contact {
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.7;
	margin: 0;
}
.cmk-footer__heading {
	font-family: var(--font-sans) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--crimson) !important;
	margin: 0 0 16px !important;
	line-height: 1.3 !important;
}
.cmk-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}
.cmk-footer__menu li { margin: 0; }
.cmk-footer__menu a {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 400;
	color: var(--ink) !important;
	transition: color var(--dur-fast) var(--ease-soft);
}
.cmk-footer__menu a:hover {
	color: var(--crimson) !important;
}
.cmk-footer__base {
	font-family: var(--font-sans);
	font-size: 13px;
	color: var(--fg-muted);
	letter-spacing: 0.04em;
	text-align: center;
	padding-top: var(--space-5);
}

/* Hide Storefront's leftover empty .site-info if it ever creeps back. */
.site-info { display: none !important; }

/* ---------- WooCommerce notices (added-to-cart, info, error) ----------
   WC outputs `<a class="button wc-forward">Zobacz koszyk</a> {text}` so the
   button comes first in DOM. Flex + `margin-left: auto` on the button
   pushes it to the far right, text stays left, both vertically centered. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border: 1px solid var(--border) !important;
	border-left: 4px solid var(--coral) !important;
	border-top-color: var(--border) !important;
	border-radius: var(--radius-md) !important;
	background: var(--surface) !important;
	color: var(--ink) !important;
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.5;
	padding: 16px 20px !important;
	box-shadow: var(--shadow-sm);
	display: flex !important;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none !important;
}
.woocommerce-error { border-left-color: var(--crimson) !important; }
/* The "Zobacz koszyk" button inside the notice — our pill style. */
.woocommerce-message .button.wc-forward,
.woocommerce-info .button.wc-forward {
	background: var(--crimson) !important;
	color: var(--blush-100) !important;
	border-radius: var(--radius-pill) !important;
	padding: 8px 18px !important;
	font-size: 14px !important;
	box-shadow: var(--shadow-sm) !important;
	text-transform: lowercase;
	flex-shrink: 0;
}
.woocommerce-message .button.wc-forward:hover {
	background: var(--crimson-700) !important;
	transform: translateY(-1px);
}

/* ---------- Order received / thank-you page ---------- */
.woocommerce-order {
	max-width: 880px;
	margin: 0 auto;
}
.woocommerce-thankyou-order-received {
	font-family: var(--font-sans);
	font-size: 17px;
	color: var(--fg-soft);
	text-align: center;
	margin: 0 0 var(--space-6) !important;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	box-shadow: none !important;
	display: block !important;
}
.woocommerce-thankyou-order-received::before { display: none !important; }
.woocommerce-order-overview {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--space-4);
	background: var(--blush-50);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-5) !important;
	margin: 0 0 var(--space-6) !important;
	list-style: none !important;
}
.woocommerce-order-overview li {
	font-family: var(--font-sans) !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	color: var(--fg-muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: none !important;
	padding: 0 !important;
}
.woocommerce-order-overview li strong {
	display: block;
	font-family: var(--font-sans) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--ink) !important;
	line-height: 1.4 !important;
	letter-spacing: 0;
	text-transform: none;
	margin-top: 6px;
}
.woocommerce-order-details h2,
.woocommerce-customer-details h2,
.woocommerce-column__title {
	font-family: var(--font-display) !important;
	color: var(--crimson) !important;
	font-size: clamp(24px, 3vw, 32px) !important;
	text-transform: lowercase;
	font-weight: 400 !important;
	margin: var(--space-6) 0 var(--space-4) !important;
}
/* WC Blocks checkout — order summary product description is rendered way too
   big (inherits .entry-content p sizing). Shrink + mute so it's a subtitle. */
.wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__description p,
.wc-block-components-product-metadata__description,
.wc-block-components-product-metadata__description p,
.wc-block-components-product-details {
	font-size: 12px !important;
	line-height: 1.4 !important;
	color: var(--fg-muted) !important;
	margin: 4px 0 0 !important;
}

/* Email-verify form on shared / link-only access. */
.woocommerce-verify-email {
	max-width: 480px;
	margin: var(--space-6) auto !important;
	padding: var(--space-5);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

/* ---------- Cart / checkout ---------- */
.woocommerce table.shop_table,
.woocommerce-cart table.cart {
	border-radius: var(--radius-md);
	border-color: var(--border);
}
.woocommerce table.shop_table thead {
	background: var(--clay);
	font-family: var(--font-sans);
}

/* ---------- Categories widget / shop sidebar ---------- */
.widget {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	box-shadow: var(--shadow-sm);
}
.widget .widget-title,
.widget h2,
.widget h3,
.widget-area .widget-title,
.widget-area .widget h2,
.widget-area .widget h3 {
	font-family: var(--font-sans) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--crimson) !important;
	line-height: 1.3 !important;
	margin: 0 0 var(--space-4) !important;
}

/* ---------- Hero block helper class (free use in pages) ---------- */
.cmk-hero {
	background: var(--blush);
	padding: 64px 40px;
	border-radius: var(--radius-lg);
	position: relative;
	margin-bottom: var(--space-6);
}
@media (max-width: 600px) {
	.cmk-hero { padding: 40px 20px; }
}
.cmk-hero .cmk-eyebrow {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--crimson);
	margin-bottom: 16px;
	display: block;
}
.cmk-hero .cmk-headline {
	font-family: var(--font-display);
	color: var(--crimson);
	font-size: clamp(28px, 4vw, 48px);
	line-height: 1.1;
	margin: 0 0 var(--space-4);
	text-transform: lowercase;
	overflow-wrap: break-word;
	hyphens: none;
}
/* The big front-page hero keeps a slightly larger ceiling. */
.cmk-hero--big .cmk-headline {
	font-size: clamp(28px, 5.5vw, 64px);
}

/* ---------- Floated images in page content ----------
   WP `.alignleft` / `.alignright` cap to 33% of the column width on desktop
   so text wraps naturally; on mobile they fall back to full width. Each
   image-paragraph clears prior floats so successive image + text blocks
   stack predictably (matches the editor preview). */
.entry-content .alignleft,
.entry-content .wp-block-image.alignleft,
.entry-content img.alignleft {
	float: left;
	width: 33% !important;
	max-width: 33% !important;
	height: auto !important;
	margin: 0 var(--space-5) var(--space-4) 0;
}
.entry-content .alignright,
.entry-content .wp-block-image.alignright,
.entry-content img.alignright {
	float: right;
	width: 33% !important;
	max-width: 33% !important;
	height: auto !important;
	margin: 0 0 var(--space-4) var(--space-5);
}
/* Headings, separators, the spacer block and another hero always clear past
   floats. Plain paragraphs do NOT auto-clear — text wraps next to images
   freely, matching the editor preview. */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content .wp-block-separator,
.entry-content .wp-block-spacer,
.entry-content .cmk-hero {
	clear: both;
}
/* Manual "drop down past the floats" markers:
   • truly empty <p>
   • whitespace-only paragraph (`<p>&nbsp;</p>`, `<p> </p>`)
   • the [break] shortcode (renders <div class="cmk-break">)
   • any plain <div> directly inside .entry-content (lets the editor wrap a
     section in a div and have it start fresh below previous floats). */
.entry-content p:empty,
.entry-content p:has(> br:only-child),
.entry-content > div,
.entry-content > .wp-block-group,
.cmk-break {
	clear: both;
}
.entry-content p:empty,
.entry-content p:has(> br:only-child) {
	min-height: 1em;
	margin: 0 0 var(--space-3);
}
.cmk-break {
	display: block;
	height: var(--space-5);
}

/* Utility: paste `cmk-clear` into a block's "Klasa CSS" field (editor →
   Zaawansowane → Klasa CSS) to make that element start below any previous
   floated images. Works on images, paragraphs, headings, divs — anything. */
.entry-content .cmk-clear,
.entry-content p:has(> .cmk-clear),
.entry-content p:has(> img.cmk-clear) {
	clear: both !important;
}

/* [gap size=… mobile=… desktop=…] vertical spacer rendered as an inline span;
   block-level with a height defined by CSS vars set inline by the shortcode.
   No `clear` — sits inside the wrap column next to floats so text continues
   wrapping. */
.cmk-gap {
	display: block;
	height: var(--gap-d, 1em);
}
@media (max-width: 600px) {
	.cmk-gap { height: var(--gap-m, var(--gap-d, 1em)); }
}

/* [duo image=… align=… valign=…] — two-column block: image + text.
   Stacks on mobile. Use this instead of float/clear acrobatics for predictable
   image+text rows with proper vertical alignment. */
.cmk-duo {
	display: grid;
	grid-template-columns: var(--duo-img, 1fr) var(--duo-txt, 2fr);
	gap: var(--space-5);
	margin: var(--space-5) 0;
	align-items: center;
	clear: both;
}
.cmk-duo--right {
	grid-template-columns: var(--duo-txt, 2fr) var(--duo-img, 1fr);
}
.cmk-duo--right .cmk-duo__media { grid-column: 2; grid-row: 1; }
.cmk-duo--right .cmk-duo__text  { grid-column: 1; grid-row: 1; }
.cmk-duo--vtop    { align-items: start; }
.cmk-duo--vcenter { align-items: center; }
.cmk-duo--text-left   .cmk-duo__text { text-align: left; }
.cmk-duo--text-right  .cmk-duo__text { text-align: right; }
.cmk-duo--text-center .cmk-duo__text { text-align: center; }
.cmk-duo__media   { margin: 0; }
.cmk-duo__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius-md);
}
.cmk-duo__text > *:first-child { margin-top: 0; }
.cmk-duo__text > *:last-child  { margin-bottom: 0; }
@media (max-width: 600px) {
	.cmk-duo,
	.cmk-duo--right {
		grid-template-columns: 1fr;
	}
	.cmk-duo--right .cmk-duo__media { grid-column: 1; grid-row: 1; }
	.cmk-duo--right .cmk-duo__text  { grid-column: 1; grid-row: 2; }
}

/* Mobile-only clear — paste `cmk-mobile-clear` into a block's "Klasa CSS"
   field. On screens ≤600px that element drops below the previous float.
   Desktop ignores it. Useful when 50% mobile images don't leave enough room
   for text to wrap and the next paragraph crashes into the image. */
@media (max-width: 600px) {
	.entry-content .cmk-mobile-clear,
	.entry-content p:has(> .cmk-mobile-clear),
	.entry-content p:has(> img.cmk-mobile-clear) {
		clear: both !important;
	}
}
/* Mobile: keep the float so text still wraps next to image, but cap at 50%
   so image is large enough to read without crowding the column. */
@media (max-width: 600px) {
	.entry-content .alignleft,
	.entry-content img.alignleft,
	.entry-content .wp-block-image.alignleft {
		float: left !important;
		width: 50% !important;
		max-width: 50% !important;
		margin: 0 12px 8px 0 !important;
	}
	.entry-content .alignright,
	.entry-content img.alignright,
	.entry-content .wp-block-image.alignright {
		float: right !important;
		width: 50% !important;
		max-width: 50% !important;
		margin: 0 0 8px 12px !important;
	}
}
.cmk-hero .cmk-sub {
	font-family: var(--font-sans);
	font-size: 16px;
	color: var(--ink-soft);
	max-width: 420px;
	line-height: 1.55;
}
.cmk-hero .cmk-heart {
	position: absolute;
	top: 32px;
	right: 40px;
	font-size: 28px;
	color: var(--crimson);
}

/* ====================================================================
   Custom-orders page (/ceramika-na-zamowienie/) helper components.
   ==================================================================== */

/* Feature cards — "co mogę dla Ciebie zrobić" */
.cmk-features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
	margin: var(--space-6) 0;
}
@media (max-width: 600px) {
	.cmk-features { grid-template-columns: 1fr; gap: var(--space-4); }
}
.cmk-feature {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	box-shadow: var(--shadow-sm);
}
.cmk-feature__icon {
	font-size: 28px;
	line-height: 1;
	margin-bottom: 12px;
}
.cmk-feature h3 {
	font-family: var(--font-display) !important;
	color: var(--crimson) !important;
	font-size: 24px !important;
	text-transform: lowercase;
	font-weight: 400 !important;
	margin: 0 0 8px !important;
}
.cmk-feature p {
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.6;
	color: var(--fg-soft);
	margin: 0;
}

/* Process steps — "jak to działa" */
.cmk-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--space-4);
	margin: var(--space-6) 0;
	counter-reset: cmk-step;
}
@media (max-width: 900px) { .cmk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cmk-steps { grid-template-columns: 1fr; } }
.cmk-step {
	position: relative;
	background: var(--blush-50);
	border-radius: var(--radius-md);
	padding: var(--space-5) var(--space-4) var(--space-4);
}
.cmk-step::before {
	counter-increment: cmk-step;
	content: counter(cmk-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--crimson);
	color: var(--blush-100);
	font-family: var(--font-display);
	font-size: 20px;
	line-height: 1;
	margin-bottom: 12px;
}
.cmk-step h3 {
	font-family: var(--font-sans) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--ink) !important;
	margin: 0 0 6px !important;
	text-transform: none;
	letter-spacing: 0;
}
.cmk-step p {
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.55;
	color: var(--fg-soft);
	margin: 0;
}

/* FAQ — native <details> accordion */
.cmk-faq { margin: var(--space-6) 0; max-width: 760px; }
.cmk-faq details {
	border-bottom: 1px solid var(--border);
	padding: 4px 0;
}
.cmk-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 16px 32px 16px 0;
	position: relative;
	font-family: var(--font-sans);
	font-size: 17px;
	font-weight: 600;
	color: var(--ink);
}
.cmk-faq summary::-webkit-details-marker { display: none; }
.cmk-faq summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 24px;
	color: var(--crimson);
	transition: transform var(--dur-fast) var(--ease-soft);
}
.cmk-faq details[open] summary::after { content: "−"; }
.cmk-faq details p {
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.65;
	color: var(--fg-soft);
	margin: 0 0 16px;
	padding-right: 32px;
}