:root {

	/* COLORS */
	--consent-surface: var(--color-consent-surface);
	--consent-text-color: var(--color-consent-text);
	--consent-border-color: var(--color-consent-border);

	/* SPACING */
	--consent-section-gap: var(--space-consent-section);
	--consent-banner-padding-bottom: var(--space-consent-banner-padding-bottom);

	/* FORMS */
	--consent-checkbox-size: var(--size-consent-checkbox);

	/* LAYERING */
	--consent-z-index: var(--z-layer-consent-banner);
}

/* DO NOT EDIT BELOW THIS LINE — these are the actual styles using the above tokens. */

/* ===== CONSENT BANNER WRAPPERS ===== */

/*
 * !important overrides are required to win against GTM consent banner inline styles.
 */

#consent-banner-main {
	z-index: var(--consent-z-index) !important;
}

/*
 * Pin the consent banner to the bottom of the viewport as a full-width bar so it
 * is visible on long pages without scrolling to the footer. The plugin's bundled
 * CSS only fixes the banner to the bottom inside a max-width:576px media query, so
 * we force it across all breakpoints here.
 *
 * The banner's stacking context lives inside #consent-banner-main (z-index 230),
 * which sits below the mini-cart drawer (z-index 300) — so an expanded drawer
 * always paints over the banner rather than being obscured by it.
 */
#consent-banner-modal {
	padding: 0 0 var(--consent-banner-padding-bottom) !important;
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: var(--consent-z-index) !important;
}

/* ===== HEADINGS ===== */

#consent-banner-modal h2,
#consent-banner-settings h2 {
	font: var(--title-small);
	margin: var(--consent-section-gap) 0 0;
}

/* ===== BUTTONS ===== */

/*
 * Modal and settings panels share identical button styling.
 * [href="#accept"] marks the primary accept-all action.
 */

:is(#consent-banner-modal, #consent-banner-settings) .consent-banner-button {
	border-color: var(--consent-border-color);
	color: var(--consent-text-color);
}

:is(#consent-banner-modal, #consent-banner-settings) .consent-banner-button[href="#accept"] {
	background-color: var(--consent-surface);
	border-color: var(--consent-border-color);
	color: var(--consent-text-color);
}

/* ===== SETTINGS FORM ===== */

#consent-banner-settings input[type="checkbox"] {
	aspect-ratio: 1;
	height: var(--consent-checkbox-size);
	width: var(--consent-checkbox-size);
}