/*
 * Purovitalis theme styles.
 *
 * DESIGN TOKENS live here, on :root, so every component inherits them. They
 * were previously copy-pasted into each component sheet (cart, account, side
 * cart) because those shipped before there was a global stylesheet; those
 * local copies are now redundant duplicates of the same values and can be
 * removed as each component is next touched.
 */

:root {
	--pv-surface-card: #ffffff;
	--pv-surface-header: #f8f7f3;
	--pv-surface-muted: #efece5;
	--pv-surface-active: #564f78;
	--pv-surface-background: #ffffff;
	--pv-border-default: #e3ded4;
	--pv-text: #000000;
	--pv-text-inverse: #ffffff;
	--pv-text-primary: #564f78;
	--pv-text-secondary: #ef7e3f;
	--pv-neutral-300: #727272;
	--pv-neutral-400: #3d3d3d;
	--pv-radius: 8px;
	--pv-radius-full: 99px;
	--pv-font-heading: "Funnel Sans", "Public Sans", system-ui, sans-serif;
	--pv-font-body: "Public Sans", system-ui, sans-serif;

	/* Brand palette, from the design file's own token notes frame. */
	--pv-brand-purple: #493b6b;
	--pv-brand-orange: #ef7e3f;
	--pv-brand-cream: #f8f7f3;
	--pv-brand-ink: #2b2340;
	--pv-brand-green: #85a887;

	/*
	 * FOUNDATIONS 2026 — from Figma "Purovitalis final" (01 - Foundations).
	 * The rebuild's source of truth. Legacy --pv-brand-* tokens above keep
	 * the signed-off checkout/thank-you tint until those surfaces adopt
	 * this palette; new templates use ONLY the tokens below.
	 */
	--pv-color-primary: #824f78;        /* Basis 1 — hoofdkleur paars */
	--pv-color-accent: #ef7e3f;         /* Basis 2 — hoofdkleur oranje */
	--pv-color-grey: #f8f7f3;           /* grijs — warm page ground */
	--pv-color-black: #000000;
	--pv-color-white: #ffffff;

	/* Goal palette — one per product_cat goal term (chips, cards, filters). */
	--pv-goal-energy: #fad168;
	--pv-goal-resilience: #80a6c9;
	--pv-goal-renewal: #85a887;
	--pv-goal-balance: #a8364f;
	--pv-goal-foundation: #564f78;
	--pv-goal-recovery: #fa7d59;

	/* Type scale (desktop reference; clamp() steps down toward small
	 * screens until the mobile designs land). */
	--pv-text-h1: clamp(2.375rem, 1.35rem + 3.2vw, 3.8125rem);  /* 61px */
	--pv-text-h2: clamp(1.75rem, 1.2rem + 1.9vw, 2.5rem);       /* 40px */
	--pv-text-h3: clamp(1.75rem, 1.2rem + 1.9vw, 2.5rem);       /* 40px light */
	--pv-text-h5: 1.375rem;                                     /* 22px */
	--pv-text-body: 1rem;                                       /* 16px */
	--pv-text-label: 0.8125rem;                                 /* 13px */
	--pv-leading-tight: 1;
	--pv-leading-body: 1.35;

	/* Layout grid: 1440 page, 1342 content, 12 cols, 26px gutter. */
	--pv-page-max: 1440px;
	--pv-content-max: 1342px;
	--pv-grid-gutter: 26px;
	--pv-brand-blue: #80a6c9;

	/* Chrome layout. */
	--pv-wrap: 1440px;
	--pv-gutter: 52px;
	--pv-band-radius: 24px;
}

/*
 * The 52px gutter is the comp's 1440px figure. Held at every width it eats
 * 104px of a 375px phone — over a quarter of the screen — so the footer's
 * cards ended up as a narrow strip down the middle. Stepped down instead.
 */
@media (max-width: 900px) {
	:root { --pv-gutter: 24px; }
}

@media (max-width: 480px) {
	:root { --pv-gutter: 16px; }
}

/*
 * Border-box everywhere.
 *
 * The starter theme shipped without this, so any element combining an explicit
 * width with padding measured wider than it declared — the page wrapper set
 * `max-width: var(--pv-wrap)` plus a 52px gutter and came out 1544px, scrolling
 * the whole document sideways at 1440. cart.css and account.css had each
 * patched around it locally; this fixes the cause.
 *
 * Declared here rather than in legacy.css so Elementor-era rules, which load
 * afterwards, can still opt back out where they genuinely need content-box.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * Base typography.
 *
 * The starter theme set no font-family on body, so every element the theme
 * did not style explicitly fell back to the browser default — the whole site
 * was rendering in Times. Public Sans and Funnel Sans are already self-hosted
 * in assets/fonts; this is what actually puts them on the page.
 */
body {
	background: var(--pv-surface-background);
	color: var(--pv-text);
	font-family: var(--pv-font-body);
	line-height: 1.5;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip-path: none;
	display: block;
	height: auto;
	left: 5px;
	top: 5px;
	width: auto;
	z-index: 100000;
}