/**
 * Base layer: tokens only, no colour or font literals (D-85). Loaded on every page after tokens.css.
 */

body {
	font-family: var(--materli-font-body);
	font-size: var(--materli-text-body);
	line-height: var(--materli-leading-body);
	color: var(--materli-color-text);
	background: var(--materli-color-surface);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--materli-color-focus);
	outline-offset: 2px;
}

/* One shared backdrop for every dialog. */
dialog::backdrop {
	background: var(--materli-backdrop);
}

.materli-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.materli-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--materli-hit);
	padding: 0 var(--materli-space-md);
	font-weight: var(--materli-weight-strong);
	border-radius: var(--materli-radius);
	cursor: pointer;
	transition: background var(--materli-motion), color var(--materli-motion);
}

.materli-button--primary {
	background: var(--materli-color-accent);
	color: var(--materli-color-surface);
	border: 1px solid var(--materli-color-accent);
}

.materli-button--secondary {
	background: transparent;
	color: var(--materli-color-text);
	border: 1px solid var(--materli-color-text);
}

.materli-button--secondary:hover {
	background: var(--materli-color-text);
	color: var(--materli-color-surface);
}

.materli-text-label {
	font-size: var(--materli-text-label);
	font-weight: var(--materli-weight-strong);
	line-height: var(--materli-leading-body);
}

.materli-text-body {
	font-size: var(--materli-text-body);
	font-weight: var(--materli-weight-regular);
	line-height: var(--materli-leading-body);
}

.materli-text-heading {
	font-family: var(--materli-font-heading);
	font-size: var(--materli-text-heading);
	font-weight: var(--materli-weight-strong);
	line-height: var(--materli-leading-heading);
}

.materli-text-display {
	font-family: var(--materli-font-heading);
	font-size: var(--materli-text-display);
	font-weight: var(--materli-weight-strong);
	line-height: var(--materli-leading-heading);
}

/* Product card badge, shared by archives and homepage strips (UI-SPEC: one badge per card, top-left). */
.materli-badge {
	position: absolute;
	top: var(--materli-space-sm);
	left: var(--materli-space-sm);
	z-index: 2;
	padding: var(--materli-space-xs) var(--materli-space-sm);
	font-size: var(--materli-text-label);
	font-weight: var(--materli-weight-strong);
	line-height: var(--materli-leading-body);
	border-radius: var(--materli-radius);
	pointer-events: none;
}

.materli-badge--new {
	background: var(--materli-color-accent);
	color: var(--materli-color-surface);
}

.materli-badge--sale {
	background: var(--materli-color-danger);
	color: var(--materli-color-surface);
}

.materli-badge--soldout {
	background: var(--materli-color-surface-alt);
	color: var(--materli-color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0ms !important;
		animation-duration: 0ms !important;
		animation-delay: 0ms !important; /* staggered entrances must not wait while invisible */
		scroll-behavior: auto !important;
	}
}

/* D-G: UI-SPEC sets labels in sentence case (Polish diacritics read poorly in capitals). These are the
   places where Blocksy defaults to uppercase: header cart total, product-card category line, archive
   result count, pagination, breadcrumbs and the mini-cart subtotal. Element-qualified where Blocksy's own
   rule is more specific or loads later (result count, pagination.min.css). */
#header .ct-header-cart .ct-label,
ul.products .entry-meta,
div.woo-listing-top p.woocommerce-result-count,
nav.ct-pagination a.page-numbers,
.ct-breadcrumbs,
.ct-breadcrumbs *,
.materli-cart-drawer .woocommerce-mini-cart__total {
	--theme-text-transform: none; /* Blocksy also reads this variable. */
	text-transform: none;
	letter-spacing: normal;
}

/* D-H: dialog titles receive focus by script on open (tabindex="-1", not in the tab order). They are not
   controls, so they show no focus box; the dialog's interactive elements keep the focus ring. */
dialog h2[tabindex="-1"]:focus {
	outline: none;
}

/* Product card hover (05-19): every WooCommerce product grid (shop, categories, homepage strips,
   related products). The whole card is one link (title ::after overlay), so hovering anywhere on it
   slowly zooms the photo inside its frame and fades in the title underline. Keyboard focus gets the
   underline. Zoom only on hover-capable pointers; transform-only, so no layout shift. */
ul.products > li.product .woocommerce-loop-product__link {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: transparent;
	text-underline-offset: 0.35em;
	transition: text-decoration-color var(--materli-motion-quick), text-underline-offset var(--materli-motion-quick);
}

ul.products > li.product:hover .woocommerce-loop-product__link,
ul.products > li.product .woocommerce-loop-product__link:focus-visible {
	text-decoration-color: currentColor;
	text-underline-offset: 0.2em;
}

@media (hover: hover) and (pointer: fine) {
	ul.products > li.product .ct-media-container {
		overflow: hidden;
	}

	ul.products > li.product .ct-media-container img {
		transition: transform var(--materli-motion-zoom);
	}

	ul.products > li.product:hover .ct-media-container img {
		transform: scale(1.04);
	}
}

/* Omnibus line on product-loop cards (COMP-11, D-145): archive, related, upsell and strip cards. */
li.product .materli-omnibus {
	display: block;
	margin-top: var(--materli-space-xs);
	font-size: var(--materli-text-label);
	font-weight: var(--materli-weight-regular);
	line-height: var(--materli-leading-body);
	color: var(--materli-color-text-muted);
	white-space: normal;
}

li.product .materli-omnibus .amount {
	font-weight: var(--materli-weight-regular);
}

/* Admin-only placeholder box (Placeholder::storefront). A span so it is valid inside <p>/<span>; shown as a block. */
.materli-placeholder {
	display: block;
}