/*
 * The cookie notice.
 *
 * Colours come from the brand plugin's custom properties where it is active,
 * with the literal hex as a fallback so the notice is still legible and still
 * on-brand if the brand plugin is ever switched off to test something. A
 * consent notice that renders as unstyled black text on white is the one piece
 * of furniture on the site that must never look broken — people read it as a
 * sign the shop itself is broken.
 */

/*
 * The banner ships with the `hidden` attribute and consent.js takes it off. The
 * browser's own [hidden] rule is only `display: none`, which loses to any
 * class-based `display` a theme happens to set, so it is restated here with
 * !important. Without this line the banner is visible on every page load for a
 * fraction of a second before the script runs — or permanently, if the script
 * fails to load at all.
 */
.labelcut-consent[hidden] {
	display: none !important;
}

/*
 * Anchored to the bottom, but the fixed layer is only the strip the card sits
 * in and it does not take clicks — pointer-events is handed back to the card
 * itself below. Otherwise an invisible full-width band would sit over whatever
 * is behind it at the bottom of the viewport.
 *
 * The z-index has to clear the floating WhatsApp button, which is the only
 * other thing this plugin pins to a corner. If anything is ever added that
 * needs to sit above BOTH, it goes higher than this number, not equal to it.
 */

/*
 * The theme's tokens, with the old brand hex as the fallback.
 *
 * Added 12 September 2026 for the Midnight Bold rebuild. These --lc-* names
 * were already being READ throughout this file, but they were never defined
 * anywhere, so every one of them silently fell back to its pastel hex - which
 * meant this component would have stayed pink on a near-black page.
 *
 * The fallback still matters: wp-admin never loads the theme's stylesheet, so
 * wherever this renders inside admin the fallback is the only value there is.
 */
.labelcut-consent {
	--lc-plum: var(--plum, #4a3b3b);
	--lc-cream: var(--cream, #fff9f2);
	--lc-paper: var(--paper, #ffffff);
	--lc-blush: var(--blush, #f7c9ce);
	--lc-butter: var(--butter, #fce38a);
	--lc-rose: var(--rose, #e8848f);
	--lc-rule: var(--hairline, #f2ebe6);
	--lc-on-accent: var(--ink, #4a3b3b);
	--lc-hairline: var(--hairline, #f2ebe6);
}

.labelcut-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999999;
	box-sizing: border-box;
	padding: 0 0.75rem 0.75rem;
	/* Clears the home indicator on an iPhone. Browsers without env() drop this
	   line and keep the plain padding above. */
	padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
	pointer-events: none;
	transform: translateY(110%);
	opacity: 0;
	transition: transform 0.28s ease, opacity 0.28s ease;
}

.labelcut-consent.is-open {
	transform: none;
	opacity: 1;
}

/*
 * Focus is moved here programmatically when the notice appears, so a screen
 * reader announces it instead of leaving it sitting unread at the end of the
 * document. It is not reachable by Tab, so it can never receive focus a visitor
 * asked for, and a ring around the whole card would only be confusing.
 */
.labelcut-consent:focus {
	outline: none;
}

.labelcut-consent__inner {
	pointer-events: auto;
	box-sizing: border-box;
	max-width: 34rem;
	margin: 0 auto;
	padding: 1rem 1.1rem 1.1rem;
	background: var(--lc-paper);
	color: var(--lc-plum);
	border: 1px solid var(--lc-hairline, var(--lc-rule));
	border-radius: var(--lc-radius, 1rem);
	/* Deeper than the brand's usual lift, because this one is floating over the
	   page rather than sitting on it. */
	box-shadow: 0 4px 20px rgba(74, 59, 59, 0.16);
}

.labelcut-consent__title {
	margin: 0 0 0.4rem;
	font-family: Quicksand, -apple-system, "Segoe UI", sans-serif;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--lc-plum);
}

/*
 * Plum rather than the muted grey the rest of the site uses for secondary text.
 * Muted on white is around 4:1, which is under the contrast floor for body
 * copy, and this is the one paragraph on the site that everybody is asked to
 * read.
 */
.labelcut-consent__text {
	margin: 0 0 0.9rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--lc-plum);
}

.labelcut-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/*
 * Both buttons are the same size, the same shape and equally easy to hit. The
 * usual trick is a big coloured yes and a small grey no, and it is not honest —
 * it is also the thing that gets a cookie banner complained about. The only
 * difference between them is the fill.
 */
.labelcut-consent__button {
	flex: 1 1 auto;
	min-width: 8.5rem;
	box-sizing: border-box;
	margin: 0;
	padding: 0.7rem 1.1rem;
	font-family: inherit;
	/* 16px. Anything smaller and iOS zooms the page when it is tapped. */
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	color: var(--lc-plum);
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.labelcut-consent__button--yes {
	background: var(--lc-blush);
	border-color: var(--lc-blush);
}

.labelcut-consent__button--no {
	background: var(--lc-cream);
	border-color: var(--lc-hairline, var(--lc-rule));
}

/* Butter is the accent, and on Midnight the accent is acid - so the hover state
   has to carry the text colour that belongs on it, not the page's. */
.labelcut-consent__button:hover {
	color: var(--lc-on-accent);
	background: var(--lc-butter);
	border-color: var(--lc-butter);
}

.labelcut-consent__more {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.labelcut-consent__link {
	color: var(--lc-plum);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.labelcut-consent__link:hover {
	color: var(--lc-rose);
}

/*
 * A ring that is actually visible against both the white card and the blush
 * button. Rose is the brand's accent and reads clearly on both.
 */
.labelcut-consent__button:focus-visible,
.labelcut-consent__link:focus-visible {
	outline: 2px solid var(--lc-rose);
	outline-offset: 2px;
}

/*
 * The notice is pinned over the bottom of the page, which on a phone is exactly
 * where the add-to-basket button ends up. Padding the document while it is open
 * means everything can still be scrolled clear of it — nothing is permanently
 * covered, and no measurement in this stylesheet has to be right for that to
 * hold. consent.js measures the real height and writes it into the custom
 * property; the fallback only applies for the moment before it does.
 */
body.labelcut-consent-open {
	padding-bottom: var(--labelcut-consent-height, 13rem);
}

/* At 320px the buttons stop fitting side by side and stack instead. */
@media (max-width: 22.5em) {
	.labelcut-consent {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	.labelcut-consent__inner {
		padding: 0.9rem 0.9rem 1rem;
	}

	.labelcut-consent__button {
		flex-basis: 100%;
	}
}

/*
 * No slide. The notice still appears and still takes focus — reduced motion is
 * a request to stop things moving, not a request to be left out of the choice.
 */
@media (prefers-reduced-motion: reduce) {
	.labelcut-consent {
		transform: none;
		opacity: 1;
		transition: none;
	}
}

/*
 * On the basket and the checkout the notice is the same notice, smaller and
 * out of the way. The full card sat over the bottom of the page, which on a
 * phone is exactly where "Go to checkout" and "Place order" are. The
 * heading goes, the paragraph shrinks to one line, the buttons sit beside it,
 * and on a wide screen it keeps to the left, away from the order summary and
 * the button under it. Nothing about what it asks or stores changes.
 */
body.woocommerce-cart .labelcut-consent,
body.woocommerce-checkout .labelcut-consent {
	padding: 0 0.75rem 0.5rem;
	padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
}

body.woocommerce-cart .labelcut-consent__inner,
body.woocommerce-checkout .labelcut-consent__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	max-width: 44rem;
	margin: 0;
	padding: 0.7rem 0.9rem;
}

body.woocommerce-cart .labelcut-consent__title,
body.woocommerce-checkout .labelcut-consent__title,
body.woocommerce-cart .labelcut-consent__more,
body.woocommerce-checkout .labelcut-consent__more {
	display: none;
}

body.woocommerce-cart .labelcut-consent__text,
body.woocommerce-checkout .labelcut-consent__text {
	flex: 1 1 16rem;
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.45;
}

body.woocommerce-cart .labelcut-consent__actions,
body.woocommerce-checkout .labelcut-consent__actions {
	flex: 0 0 auto;
	flex-wrap: nowrap;
}

body.woocommerce-cart .labelcut-consent__button,
body.woocommerce-checkout .labelcut-consent__button {
	flex: 0 0 auto;
	min-width: 0;
	padding: 0.5rem 0.9rem;
	font-size: 0.875rem;
}

@media print {
	.labelcut-consent {
		display: none !important;
	}

	body.labelcut-consent-open {
		padding-bottom: 0;
	}
}