@layer reset, tokens, base, layout, components, utilities;

@layer reset {

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: 100%;
		scroll-behavior: smooth;
	}

	body,
	h1,
	h2,
	h3,
	p,
	ul,
	ol {
		margin: 0;
	}

	img,
	picture,
	svg {
		display: block;
		max-width: 100%;
	}

	button,
	input,
	select,
	textarea {
		font: inherit;
	}
}

@layer tokens {
	:root {
		--color-brand-900: #062768;
		--color-brand-800: #073b91;
		--color-brand-700: #064eb5;
		--color-brand-100: #eaf2ff;
		--color-accent: #f0a20b;
		--color-success: #51aa4f;
		--color-ink: #111827;
		--color-muted: #64748b;
		--color-line: #dfe5ee;
		--color-surface: #ffffff;
		--color-surface-soft: #f6f8fb;
		--color-focus: #ffbf47;

		--font-sans: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
		--font-size-xs: 0.75rem;
		--font-size-sm: 0.875rem;
		--font-size-base: 1rem;
		--font-size-lg: 1.125rem;
		--font-size-xl: clamp(1.25rem, 2vw, 1.5rem);
		--font-size-2xl: clamp(1.75rem, 3vw, 2rem);
		--font-size-hero: clamp(2rem, 4.5vw, 3.75rem);
		--line-height-tight: 1.15;
		--line-height-base: 1.6;

		--space-1: 0.25rem;
		--space-2: 0.5rem;
		--space-3: 0.75rem;
		--space-4: 1rem;
		--space-5: 1.5rem;
		--space-6: 2rem;
		--space-7: 3rem;
		--space-8: 4rem;
		--space-section: clamp(3rem, 7vw, 3rem);

		--radius-sm: 0.5rem;
		--radius-md: 0.875rem;
		--radius-lg: 1.25rem;
		--radius-pill: 999px;
		--shadow-sm: 0 0.25rem 1rem rgb(15 39 78 / 8%);
		--shadow-md: 0 1rem 2.5rem rgb(15 39 78 / 13%);

		--container: 74rem;
		--header-container: 86.25rem;
		--container-gutter: clamp(1rem, 4vw, 2rem);
		--header-height: 6.5rem;
		--transition: 180ms ease;
	}
}

@layer base {
	body {
		min-width: 20rem;
		background: var(--color-surface);
		color: var(--color-ink);
		font-family: var(--font-sans);
		font-size: var(--font-size-base);
		line-height: var(--line-height-base);
		text-rendering: optimizeLegibility;
	}

	a {
		color: var(--color-brand-700);
		text-decoration-thickness: 0.08em;
		text-underline-offset: 0.2em;
	}

	a:hover {
		color: var(--color-brand-900);
	}

	:focus-visible {
		outline: 0.2rem solid var(--color-focus);
		outline-offset: 0.2rem;
	}

	h1,
	h2,
	h3 {
		color: var(--color-brand-900);
		font-weight: 750;
		line-height: var(--line-height-tight);
		text-wrap: balance;
	}

	h1 {
		font-size: var(--font-size-hero);
	}

	h2 {
		font-size: var(--font-size-2xl);
	}

	h3 {
		font-size: var(--font-size-xl);
	}

	p {
		text-wrap: pretty;
	}
}

@layer layout {
	.container {
		width: min(100% - (2 * var(--container-gutter)), var(--container));
		margin-inline: auto;
	}

	.site-main {
		min-height: 50vh;
	}

	.section {
		padding-block: var(--space-section);
	}

	.section--soft {
		background: var(--color-surface-soft);
	}

	.section-heading {
		display: flex;
		align-items: end;
		justify-content: space-between;
		gap: var(--space-4);
		margin-bottom: var(--space-6);
	}

	.auto-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
		gap: var(--space-4);
	}
}

@layer components {
	.site-breadcrumb {
		display: flex;
		min-width: 0;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2);
		margin: 0;
		color: var(--color-muted);
		font-size: var(--font-size-sm);
		font-weight: 500;
		line-height: 1.4;
	}

	.site-breadcrumb a {
		color: var(--color-brand-700);
		font-weight: 650;
		text-decoration: none;
	}

	.site-breadcrumb a:hover {
		color: var(--color-brand-900);
		text-decoration: underline;
	}

	.site-breadcrumb__separator {
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		color: var(--color-muted);
	}

	.content-entry > .site-breadcrumb {
		margin-bottom: var(--space-4);
	}

	.button,
	button.button,
	a.button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 2.875rem;
		padding: 0.75rem 1.25rem;
		border: 0.0625rem solid var(--color-brand-800);
		border-radius: var(--radius-sm);
		background: var(--color-brand-800);
		color: #fff;
		font-size: var(--font-size-sm);
		font-weight: 700;
		line-height: 1;
		text-decoration: none;
		transition: background-color var(--transition), color var(--transition), transform var(--transition);
	}

	.button:hover {
		background: var(--color-brand-900);
		color: #fff;
		transform: translateY(-0.0625rem);
	}

	.button--outline {
		background: transparent;
		color: var(--color-brand-900);
	}

	.quantity-control,
	.woocommerce .quantity,
	.woocommerce-cart .quantity {
		--quantity-button-size: 2.75rem;
		--quantity-input-width: 3.25rem;
		--quantity-control-height: 2.875rem;

		display: inline-grid;
		grid-template-columns: var(--quantity-button-size) var(--quantity-input-width) var(--quantity-button-size);
		height: var(--quantity-control-height);
		flex: 0 0 auto;
		border: 0.0625rem solid var(--color-line);
		border-radius: var(--radius-sm);
		background: #fff;
		overflow: hidden;
	}

	.quantity-control--compact,
	.quantity-control--mini-cart {
		--quantity-button-size: 1.875rem;
		--quantity-input-width: 2.5rem;
		--quantity-control-height: 2.25rem;
	}

	.quantity-control--quick-view {
		--quantity-button-size: 2.5rem;
		--quantity-input-width: 3rem;
		--quantity-control-height: 2.875rem;
	}

	.quantity-control>label,
	.quantity-control>.quantity,
	.woocommerce .quantity>label,
	.woocommerce-cart .quantity>label {
		display: contents;
	}

	.quantity-control button,
	.quantity-control input[type="number"],
	.woocommerce .quantity button,
	.woocommerce .quantity input,
	.woocommerce-cart .quantity button,
	.woocommerce-cart .quantity input {
		min-width: 0;
		height: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: #fff;
		color: var(--color-ink);
		text-align: center;
	}

	.quantity-control button,
	.woocommerce .quantity button,
	.woocommerce-cart .quantity button {
		display: grid;
		place-items: center;
		cursor: pointer;
	}

	.quantity-control button:hover,
	.quantity-control button:focus-visible,
	.woocommerce .quantity button:hover,
	.woocommerce .quantity button:focus-visible,
	.woocommerce-cart .quantity button:hover,
	.woocommerce-cart .quantity button:focus-visible {
		background: var(--color-brand-100);
		color: var(--color-brand-800);
	}

	.quantity-control input[type="number"],
	.woocommerce .quantity input,
	.woocommerce-cart .quantity input {
		width: 100%;
		border-inline: 0.0625rem solid var(--color-line);
		font-weight: 750;
		-moz-appearance: textfield;
	}

	.quantity-control input[type="number"]::-webkit-inner-spin-button,
	.quantity-control input[type="number"]::-webkit-outer-spin-button,
	.woocommerce .quantity input::-webkit-inner-spin-button,
	.woocommerce .quantity input::-webkit-outer-spin-button,
	.woocommerce-cart .quantity input::-webkit-inner-spin-button,
	.woocommerce-cart .quantity input::-webkit-outer-spin-button {
		margin: 0;
		-webkit-appearance: none;
	}

	.quantity-control:focus-within,
	.woocommerce .quantity:focus-within,
	.woocommerce-cart .quantity:focus-within {
		border-color: var(--color-brand-700);
		box-shadow: 0 0 0 0.125rem var(--color-brand-100);
	}

	.card {
		border: 0.0625rem solid var(--color-line);
		border-radius: var(--radius-md);
		background: var(--color-surface);
		box-shadow: var(--shadow-sm);
		overflow: clip;
	}
}

@layer utilities {

	.screen-reader-text,
	.skip-link:not(:focus) {
		position: absolute;
		width: 0.0625rem;
		height: 0.0625rem;
		padding: 0;
		margin: -0.0625rem;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.skip-link:focus {
		position: fixed;
		top: var(--space-3);
		left: var(--space-3);
		z-index: 10000;
		padding: var(--space-3) var(--space-4);
		background: var(--color-surface);
		box-shadow: var(--shadow-md);
	}
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* Shared pagination */
.woocommerce-pagination,
.reviews-pagination {
	margin-top: var(--space-6);
}

.woocommerce-pagination ul,
.reviews-pagination ul {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-pagination a,
.woocommerce-pagination span,
.reviews-pagination a,
.reviews-pagination span {
	display: grid;
	min-width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	border: 0.0625rem solid var(--color-line);
	border-radius: 50%;
	background: #fff;
	color: var(--color-brand-900);
	font-weight: 800;
	text-decoration: none;
}

.woocommerce-pagination .current,
.reviews-pagination .current {
	background: var(--color-brand-800);
	color: #fff;
}