/* Eupepsia Consent Banner plugin: copy of the child theme consent.css (CONSENT-PORT.md) with its tokens defined here, so it works without the theme. */
:root {
	--eupc-brand: var(--eup-brand, #00ccb8);
	--eupc-brand-text: var(--eup-brand-text, #0e7a70);
	--eupc-deep: var(--eup-deep, #123f3a);
	--eupc-ink: var(--eup-ink, #17211e);
	--eupc-muted: var(--eup-muted, #565f5b);
	--eupc-line-soft: var(--eup-line-soft, #e8e2d4);
	--eupc-surface-alt: var(--eup-surface-alt, #f7f5ef);
}

/**
 * eup-consent — the Complianz consent banner, dressed in the store's own clothes.
 *
 * Handle:  eup-consent (style)
 * Loads:   inc/enqueue-consent.php, behind the option `eupepsia_consent_v2` (default `no`)
 * Depends: cmplz-banner-<id>-<type>, the stylesheet Complianz generates into
 *          wp-content/uploads/complianz/css/. Declaring that dependency is the whole point:
 *          WordPress then prints this file after Complianz's, so ordinary specificity decides
 *          and almost nothing here needs !important.
 *
 * Plain CSS with a .css extension, matching the rest of the repository: there is no build step
 * yet, so src/scss/consent.css is copied verbatim to assets/css/consent.css.
 *
 * WHAT THIS FILE IS ALLOWED TO DO
 * ------------------------------
 * Appearance and layout only. Every consent decision — the US opt-out model, the four
 * categories, the statistics-via-GTM wiring, the Consent Mode `default` block that GTM4WP emits
 * before gtm.js — is Complianz's and GTM4WP's, and nothing here touches any of it. The controls
 * this file reveals (Decline, Manage, Save choices) are Complianz's own buttons, already present
 * in Complianz's own markup and already bound to Complianz's own handlers; the plugin's
 * `optout.css` module hides them with CSS alone, and revealing them changes no consent logic.
 *
 * WHY THE BUTTONS NEED REVEALING AT ALL
 * ------------------------------------
 * cookiebanner/css/optout.css ships this rule:
 *
 *     .cmplz-categories, .cmplz-deny, .cmplz-view-preferences,
 *     .cmplz-save-preferences, .cmplz-btn.cmplz-manage-options { display: none; }
 *
 * so an opt-out banner renders with a single Accept button and no way to refuse or to choose
 * per category from the banner itself. That is what management saw. The selectors below are ID
 * + class (specificity 1,2,0) so they beat the plugin's single-class rules whatever the print
 * order ends up being, while still losing to the inline `style.display` that Complianz's own
 * JavaScript sets when it swaps Manage for Save choices — which is exactly the precedence we
 * want, because that swap is Complianz's behaviour and must keep working.
 *
 * WHY EVERYTHING HANGS OFF #cmplz-cookiebanner-container
 * -----------------------------------------------------
 * The banner's own id is `cmplz-cookiebanner-<banner id>-<consent type>`, and its class list
 * carries a slug of the banner's title. Both move if the banner row is ever re-created with a
 * different id or renamed, and the id was `cmplz-cookiebanner--optout` (two hyphens, an empty
 * id) for as long as the row was missing. The wrapper `#cmplz-cookiebanner-container` is printed
 * by `CMPLZ_BANNER_LOADER::cookiebanner_html()` with a fixed id and does not move, so it is the
 * anchor here. One id plus one class already outranks any number of the plugin's classes.
 *
 * THE THREE BULLET DOTS
 * --------------------
 * cookiebanner/templates/cookiebanner.php always prints
 *
 *     <div class="cmplz-documents cmplz-links"><ul>
 *       <li><a class="cmplz-link cookie-statement" …>{title}</a></li>
 *       <li><a class="cmplz-link privacy-statement" …>{title}</a></li>
 *       <li><a class="cmplz-link impressum" …>{title}</a></li>
 *     </ul></div>
 *
 * regardless of whether those documents exist. complianz.js then hides the anchors it cannot
 * resolve, and the plugin's own "no legal documents" setting adds
 * `.cmplz-cookiebanner .cmplz-links .cmplz-link { display: none; }` — both of which hide the
 * <a> and neither of which hides the <li>. Three empty list items survive, and the theme draws
 * their markers. The banner row is now configured with `legal_documents = 0` so Complianz stops
 * offering links to documents this store has not published; the container rule below closes the
 * remaining gap, and the list reset under it means no marker can come back if a document is
 * assigned later and its title fails to resolve.
 *
 * TOKENS
 * ------
 * D-027 again: --eup-brand (#00CCB8) is a fill/rule/focus-ring colour and measures about 1.9:1
 * on white, so it is never type here — it is the toggle's active fill and the focus ring, and
 * nothing else. Type is --eup-ink; the accent type colour is --eup-brand-text (#0E7A70, about
 * 5.2:1); solid buttons are --eup-deep (#123F3A) with white text, about 11:1. The colour tokens
 * are also set in Complianz's own colour fields, so the generated stylesheet and this one agree;
 * they are repeated here because this file styles elements Complianz has no field for.
 * Typography is Poppins, already self-hosted by the theme from /wp-content/fonts/poppins/ — no
 * font is loaded here (D-028).
 *
 * NO LAYOUT SHIFT
 * --------------
 * The banner and the manage-consent tab are `position: fixed` in Complianz's own stylesheet and
 * nothing here takes them out of that, so neither can move the document. Nothing here sets a
 * height on <body>, and there is no overlay: `soft_cookiewall` is off, so the page behind the
 * banner stays scrollable, clickable and reachable by keyboard, which is what an opt-out banner
 * requires.
 */

#cmplz-cookiebanner-container .cmplz-cookiebanner,
#cmplz-manage-consent {
	--eup-brand: #00ccb8;
	--eup-brand-text: #0e7a70;
	--eup-deep: #123f3a;
	--eup-ink: #17211e;
	--eup-muted: #565f5b;
	--eup-line: #dcd3c0;
	--eup-line-soft: #e8e2d4;
	--eup-surface: #ffffff;
	--eup-surface-alt: #f7f5ef;
}

/* --------------------------------------------------------------------------
 * Shell
 * ----------------------------------------------------------------------- */

#cmplz-cookiebanner-container .cmplz-cookiebanner {
	box-shadow: 0 10px 40px rgba(18, 63, 58, 0.16);
	color: var(--eupc-ink);
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-weight: 300;
	max-width: calc(100vw - 20px);
	padding: 20px 22px 18px;
}

/*
 * A card, not a panel. Complianz's bottom-left module applies the banner width as a `min-width`
 * only, and sizes the message with `calc(var(--cmplz_banner_width) - 42px)`, so the widest child
 * — here the statutory opt-out link — pushes the card past the 420px set in the plugin's own
 * Banner width field. Pinning the width to that same custom property keeps the two in step: change
 * the number in Complianz and this follows, because the property is the one Complianz generates.
 */
@media (min-width: 768px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		min-width: 0;
		width: var(--cmplz_banner_width, 420px);
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message,
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories {
		width: auto;
	}

	/*
	 * 2026-09-24 (critique C-001, Blocker). Complianz's bottom-left module has two queries that
	 * both match at exactly 768px: `min-width: 768px` (the card) and `max-width: 768px` (the
	 * phone sheet, which also sets `.cmplz-buttons { flex-direction: column }`). The phone block
	 * below starts at 767px, so at 768 the card kept the plugin's column direction while the
	 * buttons kept their `flex-wrap` and 50% basis: the four controls wrapped into four columns,
	 * 81 and 85px wide, and Decline and the opt-out link were laid out past the viewport's right
	 * edge. From 768 the row direction and the card's position are stated here, so the card is
	 * the same 420px card at every width from 768 up.
	 */
	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		bottom: 10px;
		left: 10px;
		right: auto;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
		flex-direction: row;
	}
}

#cmplz-cookiebanner-container .cmplz-cookiebanner * {
	font-family: inherit;
}

/* --------------------------------------------------------------------------
 * Header
 * ----------------------------------------------------------------------- */

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header {
	align-items: center;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
	color: var(--eupc-deep);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

/*
 * The divider under the header is Complianz's, drawn full-bleed with negative margins that were
 * measured against its own 20px padding. Ours matches, so only the colour changes.
 */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider {
	background-color: var(--eupc-line-soft);
	margin-left: -22px;
	margin-right: -22px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close {
	color: var(--eupc-muted);
	opacity: 1;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:hover {
	color: var(--eupc-deep);
}

/* --------------------------------------------------------------------------
 * Message
 * ----------------------------------------------------------------------- */

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
	color: var(--eupc-ink);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.6;
	margin: 0;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body {
	max-height: 58vh;
}

/* --------------------------------------------------------------------------
 * Buttons
 *
 * Row one is Accept and Manage, equal width and equal height — one solid, one outlined, neither
 * louder than the other. When Manage is open Complianz swaps Manage for Save choices in place,
 * so row one keeps its shape. Row two carries the two refusal paths as plain links.
 * ----------------------------------------------------------------------- */

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
	column-gap: 10px;
	flex-wrap: wrap;
	row-gap: 12px;
}

/*
 * 2026-09-24 (critique C-027): 13px sentence case, the site's button voice, instead of 11px
 * uppercase with 0.12em tracking. `min-width: 0` so no label can hold a button wider than its
 * share of the row (C-001).
 */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	border-style: solid;
	border-width: 1px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.3;
	min-height: 46px;
	min-width: 0;
	padding: 12px 14px;
	text-transform: none;
	transition: background-color 0.15s ease, color 0.15s ease;
	white-space: normal;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
	align-items: center;
	flex: 1 1 calc(50% - 5px);
	justify-content: center;
	width: auto;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept {
	display: inline-flex;
	order: 1;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences {
	order: 2;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
	order: 3;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
	background-color: var(--eupc-brand-text);
	border-color: var(--eupc-brand-text);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover {
	background-color: var(--eupc-deep);
	color: #ffffff;
}

/*
 * Reveal the refusal paths. Complianz's optout.css hides .cmplz-deny outright; the markup and
 * the delegated click handler are both already there, so this is presentation only. Specificity
 * 1,2,0 beats the plugin's 0,1,0 rule without !important.
 */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences {
	display: inline-flex;
}

/*
 * Row two: Decline, and the statutory opt-out link. Both are links rather than buttons so the
 * two equal-weight buttons above stay the primary pair, and both are full-size hit targets.
 */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny,
#cmplz-cookiebanner-container .cmplz-cookiebanner .eup-consent__dnsmpi {
	align-items: center;
	background: none;
	border: 0;
	color: var(--eupc-brand-text);
	cursor: pointer;
	display: flex;
	flex: 1 1 100%;
	font-size: 13px;
	font-weight: 400;
	justify-content: center;
	letter-spacing: 0.01em;
	line-height: 1.4;
	min-height: 32px;
	padding: 4px 0;
	text-align: center;
	text-decoration: underline;
	text-transform: none;
	width: 100%;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny {
	order: 4;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.eup-consent__dnsmpi {
	color: var(--eupc-muted);
	font-size: 13px;
	order: 5;
	overflow-wrap: anywhere;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .eup-consent__dnsmpi:hover {
	background: none;
	color: var(--eupc-deep);
}

/* --------------------------------------------------------------------------
 * Preferences view
 * ----------------------------------------------------------------------- */

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories {
	margin-top: 14px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category {
	background-color: var(--eupc-surface-alt);
	border: 1px solid var(--eupc-line-soft);
	padding: 10px 12px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-title {
	color: var(--eupc-deep);
	font-size: 13px;
	font-weight: 500;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-always-active {
	color: var(--eupc-brand-text);
	font-size: 11px;
	font-weight: 400;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-description,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-description span {
	color: var(--eupc-muted);
	font-size: 12px;
	font-weight: 300;
	line-height: 1.55;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle {
	background: none;
	border: 0;
	color: var(--eupc-deep);
	cursor: pointer;
}

/* --------------------------------------------------------------------------
 * The three bullet dots, and any list marker that could replace them
 *
 * .cmplz-documents holds three <li> for a Cookie Policy, a Privacy Statement and an Impressum.
 * None of the three is published on this site, so complianz.js and the plugin's own hide-links
 * module hide the anchors and leave the list items behind. .cmplz-information holds four more,
 * three of which are TCF-only and never resolve either. Both containers go, and the reset under
 * them means a marker cannot return through either container.
 * ----------------------------------------------------------------------- */

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links.cmplz-documents,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links.cmplz-information {
	display: none;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links ul li::marker {
	content: none;
}

/* --------------------------------------------------------------------------
 * Focus
 *
 * Same ring as the rest of the site: 3px of --eup-brand, offset 2. :focus is kept for browsers
 * without :focus-visible and then withdrawn for mouse users where :focus-visible is understood.
 * .cmplz-close is a div with role="button" and tabindex="0", so it needs the ring too.
 * ----------------------------------------------------------------------- */

#cmplz-cookiebanner-container .cmplz-cookiebanner a:focus,
#cmplz-cookiebanner-container .cmplz-cookiebanner button:focus,
#cmplz-cookiebanner-container .cmplz-cookiebanner input:focus,
#cmplz-cookiebanner-container .cmplz-cookiebanner label:focus,
#cmplz-cookiebanner-container .cmplz-cookiebanner [tabindex]:focus,
#cmplz-manage-consent button:focus {
	outline: 3px solid var(--eupc-brand);
	outline-offset: 2px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner a:focus-visible,
#cmplz-cookiebanner-container .cmplz-cookiebanner button:focus-visible,
#cmplz-cookiebanner-container .cmplz-cookiebanner input:focus-visible,
#cmplz-cookiebanner-container .cmplz-cookiebanner label:focus-visible,
#cmplz-cookiebanner-container .cmplz-cookiebanner [tabindex]:focus-visible,
#cmplz-manage-consent button:focus-visible {
	outline: 3px solid var(--eupc-brand);
	outline-offset: 2px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner a:focus:not(:focus-visible),
#cmplz-cookiebanner-container .cmplz-cookiebanner button:focus:not(:focus-visible),
#cmplz-cookiebanner-container .cmplz-cookiebanner input:focus:not(:focus-visible),
#cmplz-cookiebanner-container .cmplz-cookiebanner label:focus:not(:focus-visible),
#cmplz-cookiebanner-container .cmplz-cookiebanner [tabindex]:focus:not(:focus-visible),
#cmplz-manage-consent button:focus:not(:focus-visible) {
	outline: none;
}

/*
 * The category checkbox is visually replaced by the slider drawn on its <label>, so the ring has
 * to follow the label rather than the hidden input.
 */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-consent-checkbox:focus-visible + .cmplz-label {
	outline: 3px solid var(--eupc-brand);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
 * The manage-consent tab
 * ----------------------------------------------------------------------- */

#cmplz-manage-consent .cmplz-manage-consent {
	color: var(--eupc-deep);
	font-family: Poppins, Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: none;
}

/* --------------------------------------------------------------------------
 * Phone: a slim bottom sheet
 *
 * Complianz's bottom-left module already pins the banner to the full width of the viewport
 * below 768px. This trims the padding, keeps the sheet clear of the home indicator, and stacks
 * the two primary buttons so neither is squeezed under a long label.
 * ----------------------------------------------------------------------- */

@media (max-width: 767px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		max-width: 100%;
		padding: 16px 16px calc(14px + env(safe-area-inset-bottom, 0px));
	}

	/* 2026-09-24 (C-011): the rule under the title is dropped on phone; it cost a grid row and
	   its gaps, and the title already opens the sheet. */
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider {
		display: none;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body {
		max-height: 44vh;
	}

	/*
	 * Complianz hides the banner title below 425px. The title is the dialog's accessible name —
	 * the banner's own `aria-labelledby` points at it — so `display: none` leaves the dialog
	 * unnamed on exactly the devices where a name matters most. A 16px line fits the sheet, so
	 * it stays.
	 */
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-title {
		display: block;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
		column-gap: 10px;
		flex-direction: row;
		justify-content: center;
		row-gap: 0;
	}

	/*
	 * 2026-09-24 (critique C-011). The sheet was 346 of 844px, 41% of the first screen, with four
	 * stacked 46px controls. It is now the title, the one-sentence message, one row of two equal
	 * 44px buttons — Decline and Accept, refusal first and never smaller than consent — and
	 * Manage and the statutory opt-out as text links beneath. Every control is still Complianz's
	 * own element with Complianz's own handler; only the presentation changes. When Manage is
	 * pressed Complianz hides it and shows Save choices (inline `style.display`, which beats
	 * everything here); Save choices then takes a full-width row of its own.
	 */
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:not(.eup-consent__dnsmpi) {
		background-color: #ffffff;
		border: 1px solid var(--eupc-deep);
		color: var(--eupc-deep);
		flex: 1 1 calc(50% - 5px);
		font-weight: 500;
		min-height: 44px;
		order: 1;
		padding: 10px 12px;
		text-decoration: none;
		width: auto;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:not(.eup-consent__dnsmpi):hover {
		background-color: var(--eupc-deep);
		color: #ffffff;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
		flex: 1 1 calc(50% - 5px);
		min-height: 44px;
		order: 2;
		padding: 10px 12px;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
		flex: 1 1 100%;
		margin-top: 10px;
		min-height: 44px;
		order: 3;
	}

	/* Manage and the opt-out: text links on one line under the buttons, wrapping if they must. */
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.eup-consent__dnsmpi {
		background: none;
		border: 0;
		color: var(--eupc-deep);
		flex: 0 1 auto;
		font-size: 13px;
		font-weight: 400;
		min-height: 44px;
		padding: 0 4px;
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 3px;
		width: auto;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
		order: 4;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.eup-consent__dnsmpi {
		color: var(--eupc-muted);
		order: 5;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.eup-consent__dnsmpi:hover {
		background: none;
		color: var(--eupc-deep);
	}

	/* The first link row sits 6px under the buttons, not a full gap: they are one group. */
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
		margin-top: 6px;
	}
}

/*
 * 2026-09-24 (critique C-011). Complianz stacks the banner at `z-index: 99999`. The header's
 * phone drawer is `z-index: 120` inside the header's own stacking context (`.eup-hd` is
 * `position: relative; z-index: 90`), so against the page it sits at 90 and the banner covered
 * its lower half. While the drawer is open — header-v2.js puts `eup-hd-locked` on <html> for
 * exactly that time — the banner drops under the header. It is not lowered permanently: on every
 * other screen it must stay above the page, the sign-up popup and any sticky bar, as Complianz
 * intends. Closing the drawer puts it straight back.
 */
.eup-hd-locked #cmplz-cookiebanner-container .cmplz-cookiebanner {
	z-index: 80;
}

/*
 * Complianz fades the preferences view in over a second. Honour a reduced-motion preference.
 */
@media (prefers-reduced-motion: reduce) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories.cmplz-fade-in {
		animation: none;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
		transition: none;
	}
}