/* Cookie consent banner. ADDED 2026-09-26. Uses the brand tokens where they
 * exist and plain fallbacks where they do not, so it reads the same on a page
 * the single-voice layer has not reached. Accept and Reject are deliberately
 * the same button: same size, same weight, same colour.
 *
 * CHANGED 2026-10-23 (launch review C1). At 375 px the banner was 320 px tall,
 * 39% of the first screen, and sat over the hero and the product picture. Now:
 * a phone gets one compact block (about a fifth of the screen), a desktop gets
 * one slim row with the buttons on the right. The words are shorter (see
 * labelpal_cookie_banner_copy) and the heading runs into the first line instead
 * of standing on its own. Nothing about the CHOICE changed: both buttons are
 * still identical and one click each, focus is still an outline only, the 44 px
 * thumb target stays. */
.lp-cookie[hidden] { display: none !important; }
.lp-cookie {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 99999;
	background: var(--lp-surface, #fff);
	color: var(--lp-ink, #1a1a1a);
	border-top: 2px solid var(--lp-brand, #e6007e);
	box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
	font-family: var(--lp-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	font-size: 14px;
	line-height: 1.4;
	max-height: 60vh;              /* a phone held sideways never loses the page to the banner */
	overflow-y: auto;
}
.lp-cookie__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 10px 16px max(12px, env(safe-area-inset-bottom, 0px));
}
.lp-cookie__text p { margin: 0; }
.lp-cookie__heading { font-weight: 700; margin-right: .25em; }
.lp-cookie__fine {
	margin-top: 4px !important;
	font-size: 12px;
	opacity: .8;
}
.lp-cookie__more {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}
.lp-cookie__actions {
	display: flex;
	gap: 10px;
	margin-top: 8px;
}
.lp-cookie__btn {
	flex: 1 1 0;
	min-height: 44px;              /* a thumb target, not a mouse target */
	padding: 8px 16px;
	font: inherit;
	font-weight: 700;
	color: var(--lp-ink, #1a1a1a);
	background: var(--lp-surface, #fff);
	border: 2px solid var(--lp-ink, #1a1a1a);
	border-radius: 8px;
	cursor: pointer;
}
.lp-cookie__btn:hover {
	background: var(--lp-ink, #1a1a1a);
	color: var(--lp-surface, #fff);
}
/* Focus is an outline ONLY. On 2026-09-26 focus also changed the fill, and
 * because the script focused the first button, Accept opened looking like the
 * "real" button and Reject like the afterthought. Equal means visually equal. */
.lp-cookie__btn:focus-visible,
.lp-cookie:focus-visible {
	outline: 3px solid var(--lp-brand, #e6007e);
	outline-offset: 2px;
}
.lp-cookie:focus { outline: none; }
.lp-cookie:focus-visible { outline-offset: -3px; }
@media (min-width: 720px) {
	.lp-cookie__inner {
		display: flex;
		align-items: center;
		gap: 24px;
	}
	.lp-cookie__text { flex: 1 1 auto; }
	.lp-cookie__actions { flex: 0 0 auto; margin-top: 0; }
	.lp-cookie__btn { flex: 0 0 auto; min-width: 120px; }
}