/**
 * Localized Commerce switcher.
 *
 * Two looks, one structure.
 *
 * `.lc-switcher--style-site` is the control the Fuelnox marketing site uses: a
 * rounded pill with a circular flag, and a dark panel beneath it. Every colour
 * in it comes from a custom property declared on the switcher itself, so a theme
 * update cannot change how it reads, and retuning it from Additional CSS is one
 * line rather than a specificity fight:
 *
 *   .lc-switcher { --lc-panel-bg: #123; }
 *
 * `.lc-switcher--style-theme` sets structure only and takes every colour from
 * `inherit` and `currentColor`, which is the safe answer on a theme this was not
 * designed for.
 *
 * Nothing here uses an ID selector or !important, so any of it can be overridden
 * with a single class.
 */

/* ---------- Shared structure ---------- */

.lc-switcher {
	position: relative;
	display: inline-flex;
	max-width: 100%;
	font: inherit;
	color: inherit;
	line-height: inherit;
	text-align: left;

	/* The palette. Values match fuelseteu.com; override any of them per theme. */
	--lc-radius: 999px;
	--lc-panel-radius: 12px;
	--lc-item-radius: 8px;
	--lc-flag-size: 18px;
	--lc-border: rgba(255, 255, 255, 0.22);
	--lc-border-hover: rgba(255, 255, 255, 0.5);
	--lc-text: rgba(255, 255, 255, 0.9);
	--lc-text-strong: #fff;
	--lc-text-muted: rgba(255, 255, 255, 0.62);
	--lc-panel-bg: #0c2b21;
	--lc-panel-border: rgba(255, 255, 255, 0.14);
	--lc-panel-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
	--lc-hover-bg: rgba(255, 255, 255, 0.08);
	--lc-active-bg: rgba(255, 255, 255, 0.12);
	--lc-accent: #5fe6c0;
	--lc-rule: rgba(255, 255, 255, 0.12);
	--lc-speed: 0.2s;

	/* What text inside the panel is painted with. Separate from --lc-text,
	   which is the *toggle* colour: the toggle sits on the page and the panel
	   is its own surface, and on the shop look the two are near opposites —
	   white on the green header, ink on the cream card. Every element inside
	   the panel names one of these rather than inheriting, because a theme
	   rule on `label` or `legend` beats an inherited value every time. */
	--lc-panel-text: var(--lc-text);
	--lc-panel-muted: var(--lc-text-muted);
}

.lc-switcher *,
.lc-switcher *::before,
.lc-switcher *::after {
	box-sizing: border-box;
}

.lc-switcher__list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 0.25em;
}

.lc-switcher__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The flag and the label sit on one line. Without this the flag — which is a
   block, so that the SVG inside it fills the circle — pushes the label onto a
   second line and the button grows to two rows. */
.lc-switcher__current {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

/* The flag is clipped to a circle and filled from the middle of whatever
   proportions the real flag has, so a wide flag and a square one read as the
   same element. */
.lc-switcher__flag {
	display: block;
	flex: 0 0 var(--lc-flag-size);
	width: var(--lc-flag-size);
	height: var(--lc-flag-size);
	overflow: hidden;
	border-radius: 50%;
}

.lc-switcher__flag svg {
	display: block;
	width: 100%;
	height: 100%;
}

.lc-switcher__flag--emoji {
	font-size: 1.1em;
	line-height: 1;
	border-radius: 0;
}

/* ---------- The site look ---------- */

.lc-switcher--style-site .lc-switcher__toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 10px;
	font: inherit;
	font-size: 13px;
	line-height: 1;
	color: var(--lc-text);
	letter-spacing: 0.6px;
	background: transparent;
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius);
	cursor: pointer;
	transition: border-color var(--lc-speed), color var(--lc-speed), background var(--lc-speed);
}

.lc-switcher--style-site .lc-switcher__toggle:hover {
	color: var(--lc-text-strong);
	border-color: var(--lc-border-hover);
}

.lc-switcher--style-site .lc-switcher__toggle:focus-visible,
.lc-switcher--style-site .lc-switcher__currency-link:focus-visible {
	outline: 2px solid var(--lc-accent);
	outline-offset: 2px;
}

.lc-switcher--style-site .lc-switcher__flag {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.lc-switcher--style-site .lc-switcher__current .lc-switcher__name {
	font-weight: 600;
}

.lc-switcher__caret {
	width: 7px;
	height: 7px;
	margin-left: 1px;
	border-right: 1.6px solid;
	border-bottom: 1.6px solid;
	opacity: 0.65;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--lc-speed);
}

.lc-switcher[data-open="true"] .lc-switcher__caret {
	transform: translateY(1px) rotate(-135deg);
}

/* The panel is animated on visibility rather than toggled with [hidden], so the
   fade has something to run on. The hidden attribute is still written by the
   script for anything that reads the DOM instead of the styles. */
.lc-switcher--style-site .lc-switcher__panel {
	position: absolute;
	z-index: 200;
	top: calc(100% + 8px);
	inset-inline-end: 0;
	min-width: 100%;
	padding: 6px;
	background: var(--lc-panel-bg);
	border: 1px solid var(--lc-panel-border);
	border-radius: var(--lc-panel-radius);
	box-shadow: var(--lc-panel-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);

	/* Visibility is stepped rather than interpolated, and it is what decides
	   whether the links inside can take focus. Transitioning it would leave the
	   panel unfocusable for the first frame after it opens — long enough for the
	   script's "move focus to the first language" to silently do nothing. So it
	   flips instantly on the way in, and is held back until the fade finishes on
	   the way out, which is the only part anyone can see. */
	transition: opacity 0.16s, transform 0.16s, visibility 0s 0.16s;
}

.lc-switcher--style-site[data-open="true"] .lc-switcher__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.16s, transform 0.16s, visibility 0s;
}

/* Sized off the toggle alone the panel would be narrower than its own heading,
   which is wider than "EN" ever gets. */
.lc-switcher--has-currency .lc-switcher__panel {
	min-width: 9.5rem;
}

/* [hidden] would win over the transition and make the panel pop rather than
   fade, so while the site look is animating it is overridden deliberately. */
.lc-switcher--style-site .lc-switcher__panel[hidden] {
	display: block;
}

.lc-switcher--style-site .lc-switcher__list {
	flex-direction: column;
	gap: 0;
}

.lc-switcher--style-site .lc-switcher__link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px 8px 8px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.6px;
	line-height: 1;
	color: var(--lc-text);
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--lc-item-radius);
}

.lc-switcher--style-site .lc-switcher__link:hover {
	color: var(--lc-text-strong);
	background: var(--lc-hover-bg);
}

.lc-switcher--style-site .lc-switcher__link:focus-visible {
	outline: none;
	color: var(--lc-text-strong);
	background: rgba(95, 230, 192, 0.16);
	box-shadow: inset 0 0 0 1.5px var(--lc-accent);
}

.lc-switcher--style-site .lc-switcher__link.is-current {
	background: var(--lc-active-bg);
	color: var(--lc-text-strong);
}

/* ---------- The panel layout ---------- */

/* Structure only, shared by all three looks. A list of links that act on click,
   grouped under two headings, with the option in force marked.

   Every option is a real link to a real URL, so the panel works with the script
   blocked and a middle-click opens the shop in another language in a new tab,
   the way a link should. The dot beside each one is decoration and says so with
   aria-hidden; what a screen reader announces is the link and its aria-current,
   which is the honest description of a list of links to other versions of this
   page. */

.lc-switcher--panel {
	position: relative;
	display: inline-flex;
}

.lc-switcher--panel .lc-switcher__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 8px;
	font: inherit;
	font-size: 13px;
	line-height: 1;
	background: transparent;
	border: 1px solid;
	border-radius: var(--lc-radius);
	cursor: pointer;
	transition: border-color var(--lc-speed), color var(--lc-speed), background var(--lc-speed);
}

.lc-switcher--panel .lc-switcher__name {
	font-weight: 700;
	letter-spacing: 0.8px;
}

/* The currency beside the language, divided by a hairline rather than a slash,
   because the two are separate answers and the toggle should not imply that
   picking one has picked the other. */
.lc-switcher__money {
	padding-inline-start: 8px;
	border-inline-start: 1px solid;
	border-color: inherit;
	font-weight: 600;
	letter-spacing: 0.5px;
	opacity: 0.75;
}

.lc-switcher--panel .lc-switcher__panel {
	position: absolute;
	z-index: 200;
	top: calc(100% + 10px);
	inset-inline-end: 0;
	width: max-content;
	min-width: 15rem;
	max-width: min(92vw, 23rem);
	padding: 4px;
	border-radius: var(--lc-panel-radius);
}

.lc-switcher--panel .lc-switcher__panel[hidden] {
	display: none;
}

.lc-switcher__form {
	margin: 0;
	padding: 0;
}

.lc-switcher__section {
	margin: 0;
	padding: 12px 12px 10px;
	border: 0;
}

.lc-switcher__section + .lc-switcher__section {
	border-top: 1px solid var(--lc-rule);
}

.lc-switcher--panel .lc-switcher__heading {
	display: block;
	padding: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.lc-switcher__options {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Two columns once there is room for them. A language list is scanned, not
   read, and a single tall column pushes the Save button off a short screen. */
@media (min-width: 30em) {
	.lc-switcher__options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 6px;
	}

	.lc-switcher__options--currency {
		grid-template-columns: 1fr;
	}
}

.lc-switcher__option-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Every row states its own colour rather than inheriting one.

   This is not belt and braces. An inherited value loses to *any* rule that
   matches the element, however weak — and every WordPress theme ships one:
   Astra's is `label, legend { color: … }`, a two-element selector with the
   lowest specificity there is, which still beats inheritance because
   inheritance is not a match at all. The panel is built from labels, so
   without this the rows are painted the theme's form-label colour and a dark
   panel gets dark text on it.

   The `.lc-switcher` prefix is part of that, and it is not decoration. One class
   is a specificity of (0,1,0), and a theme only has to scope its own rule to a
   container to beat it: Astra paints links inside its off-canvas menu with a
   (0,1,1) selector, one notch above. In the site style these rows render as
   anchors rather than labels, so that rule caught them and the panel came out
   dark grey on a dark drawer while this rule sat there looking correct. Measured
   at (0,1,0) it loses; at (0,2,0) it wins. Do not drop the prefix. */
.lc-switcher .lc-switcher__option {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 2.5em;
	padding: 7px 8px;
	font-size: 13px;
	line-height: 1.25;
	color: var(--lc-panel-text);
	text-decoration: none;
	border-radius: var(--lc-item-radius);
	cursor: pointer;
}

.lc-switcher__option:hover,
.lc-switcher__option:focus-visible {
	text-decoration: none;
}

/* The children take the row's colour explicitly, for the same reason, and carry
   the same prefix so a themed rule on a span or a bdi cannot outrank them. */
.lc-switcher .lc-switcher__option-name,
.lc-switcher .lc-switcher__option-note,
.lc-switcher .lc-switcher__option-text,
.lc-switcher .lc-switcher__code,
.lc-switcher .lc-switcher__sep,
.lc-switcher .lc-switcher__option bdi {
	color: inherit;
}

/* Quieter than the rows rather than the same strength, and stated rather than
   inherited for the same reason the rows are. */
.lc-switcher--panel .lc-switcher__heading {
	color: var(--lc-panel-muted);
}

/* A radio's look without a radio's promise. A real input would say "pick one,
   then submit", and there is nothing to submit — the click is the change. So
   this is a decoration marking which option is in force, and the link's
   aria-current is what actually carries that to a screen reader. */
.lc-switcher__dot {
	flex: 0 0 15px;
	width: 15px;
	height: 15px;
	border: 1.5px solid;
	border-radius: 50%;
	opacity: 0.55;
	transition: border-width var(--lc-speed), opacity var(--lc-speed);
}

.lc-switcher__option.is-current .lc-switcher__dot {
	border-width: 4.5px;
	opacity: 1;
}

.lc-switcher__option .lc-switcher__flag {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
}

/* The symbol sits where the flag sits in the language list, so the two lists
   line up down one edge instead of reading as two unrelated blocks. */
.lc-switcher__symbol {
	flex: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	line-height: 1;
}

.lc-switcher__option-text {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 1px;
}

/* line-height is stated, not inherited. The root sets `line-height: inherit`, so
   in a theme that hands this element a ratio of 1 — Astra's off-canvas menu does —
   the line box is exactly the font size, the descenders sit outside it, and the
   `overflow: hidden` that `text-overflow: ellipsis` needs then clips them. It cost
   the tail of the g in "English" and the p in "Español". 1.35 keeps the ellipsis
   and gives the descenders somewhere to live. */
.lc-switcher__option-name {
	display: flex;
	align-items: baseline;
	gap: 0;
	font-weight: 600;
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The separator between the native name and the code. Its own element so the
   gap around it is set once rather than being two spaces in a translated
   string that a translator can lose. */
.lc-switcher__sep {
	padding: 0 0.35em;
	opacity: 0.45;
}

.lc-switcher__code {
	font-weight: 600;
	letter-spacing: 0.4px;
	opacity: 0.75;
}

/* Marks the shop's own currency. Quiet — it is a fact about the row, not a
   recommendation, and a customer who wants sterling should not feel steered. */
.lc-switcher__badge {
	margin-inline-start: 0.5em;
	padding: 1px 6px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
	border-radius: 999px;
	opacity: 0.85;
}

/* The name in the reader's own language, for somebody who has landed in a
   language they cannot read and needs to find their way out. */
.lc-switcher__option-note {
	font-size: 11px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0.7;
}

.lc-switcher__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px 12px;
	border-top: 1px solid var(--lc-rule);
}

.lc-switcher__save,
.lc-switcher__cancel {
	font: inherit;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

.lc-switcher__save {
	padding: 10px 18px;
	font-weight: 600;
	border: 1px solid transparent;
	border-radius: var(--lc-radius);
}

/* Quieter than Save because it is the lesser action, but quiet is done with a
   flat weight and an underline rather than with opacity. Fading a control to
   75% took it to 3.2:1 against the card — under the 4.5:1 that normal text
   needs, on the one element in the panel whose whole job is to be clicked. */
.lc-switcher__cancel {
	padding: 10px 4px;
	color: var(--lc-panel-muted);
	background: none;
	border: 0;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lc-switcher__cancel:hover,
.lc-switcher__cancel:focus-visible {
	color: var(--lc-panel-text);
}

/* ---------- The full preferences page ---------- */

/* Two selects and a button, and nothing else. No card, no border, no surface
   of its own: this is the page, not something hovering over it, so it takes
   the page's background and the page's text colour and adds neither.

   That is also what makes one look setting work in both places. The panel
   floats over a header and carries colours chosen against its own background;
   dropping those onto a light page would put the dark look's white text on
   cream. Here every colour comes from the page instead. */
/* The class is doubled deliberately. The look blocks below set --lc-panel-text
   to their own value at one-class specificity and come later in the file, so a
   single .lc-switcher--page here would lose to them — and losing means the dark
   look's white text on a cream page, which is the exact failure this block
   exists to prevent. Two classes wins regardless of order. */
.lc-switcher.lc-switcher--page {
	display: block;
	position: static;
	width: 100%;
	max-width: 30rem;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;

	--lc-panel-text: inherit;
	--lc-panel-muted: inherit;
}

/* The heading. Its size is stated rather than left to the theme's h2, which on
   most themes is a section heading for a full-width page and is being asked
   here to sit above a 30rem form — and which the page's own title, if it has
   one, has already used. Colour comes from the page, like everything else. */
.lc-preferences__title {
	margin: 0 0 1.25rem;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	color: inherit;
}

.lc-preferences__field {
	display: block;
	margin: 0 0 1.5rem;
}

.lc-preferences__label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: inherit;
}

/* Sized and spaced like a form control the theme would have drawn itself, but
   with its own border and radius so it does not disappear on a theme that
   styles only WooCommerce's fields. */
.lc-preferences__select {
	width: 100%;
	max-width: 100%;
	min-height: 2.75em;
	padding: 0.6em 2.2em 0.6em 0.8em;
	font: inherit;
	font-size: 1rem;
	line-height: 1.3;
	color: inherit;
	background-color: transparent;
	border: 1px solid;
	border-color: currentColor;
	border-radius: 0.5em;
}

/* currentColor rather than the accent. The accent is chosen to read against the
   panel's own background, and the page has none — mint on cream is 1.6:1, which
   is not a focus ring, it is a rumour. The text colour is by definition legible
   against the page it is on. */
.lc-preferences__select:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.lc-preferences__hint {
	display: block;
	margin-top: 0.45rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: inherit;
	opacity: 0.7;
}

.lc-switcher--page .lc-switcher__actions {
	gap: 1rem;
	padding: 0;
	border-top: 0;
}

.lc-switcher--page .lc-switcher__save {
	padding: 0.8rem 1.6rem;
	font-size: 0.9375rem;
}

/* ---------- The link from the panel to the page ---------- */

/* Stands where a note about recalculated baskets used to. The panel shows four
   languages and three currencies; this is the way to the rest, and it needs to
   look like a way out rather than like a caption. */
.lc-switcher__all {
	display: block;
	padding: 10px 12px 12px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--lc-panel-text);
	text-decoration: underline;
	text-underline-offset: 2px;
	opacity: 0.8;
}

.lc-switcher__all:hover,
.lc-switcher__all:focus-visible {
	opacity: 1;
}

/* ---------- The shop's own look ---------- */

/* Taken from the running theme rather than invented: the header green, the
   cream, the mint, the ink and the two radii are the same values the rest of
   the shop is built from, so the panel reads as part of the page instead of as
   a control bolted onto it. Every one is a custom property — retune any of
   them from Additional CSS in one line. */

.lc-switcher--style-store {
	--lc-radius: 999px;
	--lc-panel-radius: 16px;
	--lc-item-radius: 10px;
	--lc-flag-size: 18px;

	--lc-green: #0f4a32;
	--lc-green-deep: #0a3322;
	--lc-mint: #34d3a6;
	--lc-cream: #f3efe7;
	--lc-cream-2: #ebe5d8;
	--lc-ink: #0d1117;
	--lc-muted: #5d6b78;

	/* The toggle sits on the dark green header bar. */
	--lc-text: rgba(255, 255, 255, 0.92);
	--lc-text-strong: #fff;
	--lc-border: rgba(255, 255, 255, 0.3);
	--lc-border-hover: rgba(255, 255, 255, 0.6);

	/* The panel is a light card on the page, like every other card on it. */
	--lc-panel-bg: #fff;
	--lc-panel-border: rgba(12, 48, 36, 0.14);
	--lc-panel-shadow: 0 18px 44px rgba(10, 51, 34, 0.18);
	--lc-panel-text: var(--lc-ink);
	--lc-panel-muted: var(--lc-muted);
	--lc-hover-bg: var(--lc-cream);
	--lc-active-bg: var(--lc-cream-2);
	--lc-accent: var(--lc-green);
	--lc-focus: var(--lc-mint);
	--lc-rule: rgba(12, 48, 36, 0.12);
	--lc-speed: 0.18s;

	/* Named rather than inherited on purpose. A switcher pasted into a header
	   block can end up inside a <code> or a <pre> — which is exactly what
	   happens when the example markup is copied instead of the shortcode — and
	   `font: inherit` would then render the whole control in monospace. */
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--lc-panel-text);
}

.lc-switcher--style-store .lc-switcher__toggle {
	color: var(--lc-text);
	border-color: var(--lc-border);
}

.lc-switcher--style-store .lc-switcher__toggle:hover {
	color: var(--lc-text-strong);
	border-color: var(--lc-border-hover);
	background: rgba(255, 255, 255, 0.08);
}

.lc-switcher--style-store .lc-switcher__toggle:focus-visible {
	outline: 2px solid var(--lc-focus);
	outline-offset: 2px;
}

.lc-switcher--style-store .lc-switcher__flag {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.lc-switcher--style-store .lc-switcher__panel {
	color: var(--lc-panel-text);
	background: var(--lc-panel-bg);
	border: 1px solid var(--lc-panel-border);
	box-shadow: var(--lc-panel-shadow);
}

.lc-switcher--style-store .lc-switcher__panel .lc-switcher__flag {
	box-shadow: inset 0 0 0 1px rgba(12, 48, 36, 0.18);
}

.lc-switcher--style-store .lc-switcher__heading {
	color: var(--lc-muted);
}

.lc-switcher--style-store .lc-switcher__option:hover {
	background: var(--lc-hover-bg);
}

.lc-switcher--style-store .lc-switcher__option.is-current {
	background: var(--lc-active-bg);
}

.lc-switcher--style-store .lc-switcher__dot {
	border-color: rgba(12, 48, 36, 0.4);
}

.lc-switcher--style-store .lc-switcher__option.is-current .lc-switcher__dot {
	border-color: var(--lc-accent);
}

/* On the link, not on the dot inside it. The dot is decoration; the thing that
   takes focus is the option, and that is what has to show it. */
.lc-switcher--style-store .lc-switcher__option:focus-visible {
	outline: none;
	background: var(--lc-hover-bg);
	box-shadow: inset 0 0 0 1.5px var(--lc-accent);
}

.lc-switcher--style-store .lc-switcher__symbol {
	color: var(--lc-green);
}

.lc-switcher--style-store .lc-switcher__badge {
	color: var(--lc-green);
	background: rgba(52, 211, 166, 0.22);
}

.lc-switcher--style-site .lc-switcher__badge {
	color: var(--lc-accent);
	background: rgba(95, 230, 192, 0.18);
}

.lc-switcher--style-theme .lc-switcher__badge {
	border: 1px solid currentColor;
}

.lc-switcher--style-store .lc-switcher__save {
	color: #fff;
	background: var(--lc-green);
}

.lc-switcher--style-store .lc-switcher__save:hover {
	background: var(--lc-green-deep);
}

.lc-switcher--style-store .lc-switcher__save:focus-visible,
.lc-switcher--style-store .lc-switcher__cancel:focus-visible {
	outline: 2px solid var(--lc-focus);
	outline-offset: 2px;
}


/* The link layouts in the shop's colours too, so the setting is a look rather
   than a look-and-a-layout. */

.lc-switcher--style-store .lc-switcher__link,
.lc-switcher--style-store .lc-switcher__currency-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px 8px 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--lc-panel-text);
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--lc-item-radius);
}

.lc-switcher--style-store.lc-switcher--dropdown .lc-switcher__list {
	flex-direction: column;
	gap: 0;
}

.lc-switcher--style-store .lc-switcher__link:hover,
.lc-switcher--style-store .lc-switcher__currency-link:hover {
	background: var(--lc-hover-bg);
}

.lc-switcher--style-store .lc-switcher__link.is-current,
.lc-switcher--style-store .lc-switcher__currency-link.is-current {
	background: var(--lc-active-bg);
}

.lc-switcher--style-store .lc-switcher__link:focus-visible,
.lc-switcher--style-store .lc-switcher__currency-link:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 1.5px var(--lc-accent);
}

/* ---------- The panel in the other two looks ---------- */

.lc-switcher--style-site.lc-switcher--panel .lc-switcher__panel {
	color: var(--lc-text);
	background: var(--lc-panel-bg);
	border: 1px solid var(--lc-panel-border);
	box-shadow: var(--lc-panel-shadow);
}

.lc-switcher--style-site.lc-switcher--panel .lc-switcher__toggle {
	color: var(--lc-text);
	border-color: var(--lc-border);
}

.lc-switcher--style-site .lc-switcher__option:hover {
	background: var(--lc-hover-bg);
}

.lc-switcher--style-site .lc-switcher__option.is-current {
	background: var(--lc-active-bg);
}

.lc-switcher--style-site .lc-switcher__dot {
	border-color: rgba(255, 255, 255, 0.45);
}

.lc-switcher--style-site .lc-switcher__option.is-current .lc-switcher__dot {
	border-color: var(--lc-accent);
}

.lc-switcher--style-site .lc-switcher__save {
	color: #06231a;
	background: var(--lc-accent);
}


.lc-switcher--style-theme.lc-switcher--panel {
	--lc-panel-text: CanvasText;
	--lc-panel-muted: CanvasText;
}

.lc-switcher--style-theme.lc-switcher--panel .lc-switcher__panel {
	background-color: Canvas;
	color: CanvasText;
	border: 1px solid currentColor;
}

/* The heading has no muted colour to fall back on here, because the theme look
   has no palette of its own — so it is dimmed instead. */
.lc-switcher--style-theme .lc-switcher__heading {
	opacity: 0.7;
}

@supports not (background-color: Canvas) {
	.lc-switcher--style-theme.lc-switcher--panel {
		--lc-panel-text: #000;
		--lc-panel-muted: #000;
	}

	.lc-switcher--style-theme.lc-switcher--panel .lc-switcher__panel {
		background-color: #fff;
		color: #000;
	}
}

.lc-switcher--style-theme.lc-switcher--panel .lc-switcher__toggle {
	color: inherit;
	border-color: currentColor;
}

.lc-switcher--style-theme .lc-switcher__dot {
	border-color: currentColor;
}

.lc-switcher--style-theme .lc-switcher__option.is-current {
	font-weight: bolder;
}

.lc-switcher--style-theme .lc-switcher__save {
	color: inherit;
	background: transparent;
	border-color: currentColor;
}


/* ---------- The currency half of the panel ---------- */

/* Its own heading and a rule above it, because currency is a different question
   from language and running the two together is what made people think choosing
   a language had priced their basket. */
.lc-switcher__currency {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--lc-rule);
}

.lc-switcher__heading {
	display: block;
	padding: 2px 8px 6px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--lc-text-muted);
}

/* One per row, on the same reading line as the languages above. Pills of three
   different widths in a row read as an accident; a column that lines up under
   the language list reads as the second half of one menu, which is what it is. */
.lc-switcher__currencies {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	padding: 0 2px 2px;
}

.lc-switcher__currency-link {
	display: flex;
	align-items: center;
	padding: 6px 10px 6px 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
	line-height: 1;
	color: var(--lc-text);
	text-decoration: none;
	white-space: nowrap;
	border: 0;
	border-radius: var(--lc-item-radius);
	transition: background var(--lc-speed), color var(--lc-speed);
}

.lc-switcher__currency-link:hover {
	color: var(--lc-text-strong);
	background: var(--lc-hover-bg);
}

.lc-switcher__currency-link:focus-visible {
	outline: none;
	color: var(--lc-text-strong);
	background: rgba(95, 230, 192, 0.16);
	box-shadow: inset 0 0 0 1.5px var(--lc-accent);
}

.lc-switcher__currency-link.is-current {
	color: var(--lc-text-strong);
	background: var(--lc-active-bg);
}

/* ---------- The theme look ---------- */

.lc-switcher--style-theme .lc-switcher__toggle,
.lc-switcher--style-theme .lc-switcher__link,
.lc-switcher--style-theme .lc-switcher__select,
.lc-switcher--style-theme .lc-switcher__currency-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 2.75em; /* ~44px at a 16px base: a comfortable touch target. */
	padding: 0.4em 0.6em;
	font: inherit;
	color: inherit;
	line-height: 1.2;
	text-decoration: none;
	background: none;
	border: 0;
	border-radius: 0.25em;
	cursor: pointer;
}

.lc-switcher--style-theme .lc-switcher__toggle {
	width: 100%;
	border: 1px solid currentColor;
}

.lc-switcher--style-theme .lc-switcher__link:hover,
.lc-switcher--style-theme .lc-switcher__link:focus-visible,
.lc-switcher--style-theme .lc-switcher__toggle:hover,
.lc-switcher--style-theme .lc-switcher__toggle:focus-visible {
	text-decoration: underline;
}

.lc-switcher--style-theme .lc-switcher__toggle:focus-visible,
.lc-switcher--style-theme .lc-switcher__link:focus-visible,
.lc-switcher--style-theme .lc-switcher__select:focus-visible,
.lc-switcher--style-theme .lc-switcher__currency-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.lc-switcher--style-theme .lc-switcher__caret {
	opacity: 0.7;
}

.lc-switcher--style-theme .lc-switcher__currency {
	border-top-color: currentColor;
	opacity: 0.999;
}

.lc-switcher--style-theme .lc-switcher__heading {
	color: inherit;
	opacity: 0.7;
}

.lc-switcher--style-theme .lc-switcher__currency-link.is-current,
.lc-switcher--style-theme .lc-switcher__link.is-current {
	font-weight: bolder;
}

/* A dropdown on a transparent header needs an opaque panel, and the only value
   guaranteed to exist on every theme is the page background. */
.lc-switcher--style-theme.lc-switcher--dropdown .lc-switcher__panel {
	position: absolute;
	z-index: 100;
	inset-inline-start: 0;
	top: calc(100% + 0.25em);
	min-width: 100%;
	padding: 0.25em;
	background-color: Canvas;
	color: CanvasText;
	border: 1px solid currentColor;
	border-radius: 0.25em;
}

@supports not (background-color: Canvas) {
	.lc-switcher--style-theme.lc-switcher--dropdown .lc-switcher__panel {
		background-color: #fff;
		color: #000;
	}
}

.lc-switcher--style-theme.lc-switcher--dropdown .lc-switcher__list {
	flex-direction: column;
	gap: 0;
}

.lc-switcher--style-theme.lc-switcher--dropdown .lc-switcher__link {
	width: 100%;
	white-space: nowrap;
}

.lc-switcher--style-theme .lc-switcher__panel[hidden] {
	display: none;
}

/* ---------- Pills ---------- */

.lc-switcher--pills .lc-switcher__list {
	flex-wrap: wrap;
	gap: 0.4em;
}

.lc-switcher--pills .lc-switcher__link {
	border: 1px solid;
	border-color: currentColor;
	border-radius: 2em;
}

.lc-switcher--style-site.lc-switcher--pills .lc-switcher__link {
	border-color: var(--lc-border);
}

.lc-switcher--pills .lc-switcher__link:hover,
.lc-switcher--pills .lc-switcher__link.is-current {
	text-decoration: none;
}

.lc-switcher--style-site.lc-switcher--pills .lc-switcher__link.is-current {
	border-color: transparent;
}

/* ---------- Horizontal and vertical ---------- */

.lc-switcher--horizontal .lc-switcher__list {
	flex-wrap: wrap;
	gap: 0.25em 0.9em;
}

.lc-switcher--vertical,
.lc-switcher--horizontal {
	display: block;
}

.lc-switcher--vertical .lc-switcher__list {
	flex-direction: column;
	gap: 0.1em;
}

.lc-switcher--vertical .lc-switcher__link {
	width: 100%;
}

/* ---------- Native select ---------- */

.lc-switcher--select {
	display: inline-flex;
	gap: 0.5em;
	flex-wrap: wrap;
}

.lc-switcher--select .lc-switcher__select {
	max-width: 100%;
	border: 1px solid;
	border-color: currentColor;
	background-color: transparent;
}

.lc-switcher--style-site.lc-switcher--select .lc-switcher__select {
	padding: 6px 10px;
	font: inherit;
	font-size: 13px;
	color: var(--lc-text);
	border-color: var(--lc-border);
	border-radius: var(--lc-radius);
}

/* ---------- Flag-only mode ---------- */

/* The name stays in the accessibility tree; only the pixels go away, so a
   screen reader still announces "Deutsch" rather than an unnamed link. */
.lc-switcher--display-flag .lc-switcher__name {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- In a navigation menu ---------- */

.lc-menu-item .lc-switcher {
	display: inline-flex;
}

.lc-switcher--style-theme.lc-switcher--context-menu .lc-switcher__toggle {
	border: 0;
	padding-inline: 0;
}

/* ---------- Checkout currency field ---------- */

/* Deliberately plain: it sits above the checkout form, where the theme owns the
   look, and a control styled like the header would read as something to click
   before reading the order. */
.lc-checkout-currency {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 0.75em;
	margin: 0 0 1.5em;
	padding: 0.9em 1.1em;
	border: 1px solid rgba(127, 127, 127, 0.3);
	border-radius: 0.5em;
}

.lc-checkout-currency__label {
	font-weight: 600;
}

.lc-checkout-currency__select {
	min-height: 2.75em;
	max-width: 100%;
}

.lc-checkout-currency__note {
	flex: 1 0 100%;
	margin: 0;
	font-size: 0.875em;
	opacity: 0.7;
}

.lc-checkout-currency__links a {
	margin-inline-end: 0.5em;
}

/* ---------- Small screens ---------- */

@media (max-width: 782px) {
	.lc-switcher--dropdown .lc-switcher__panel {
		inset-inline-start: auto;
		inset-inline-end: 0;
		max-width: min(90vw, 20em);
	}

	.lc-switcher--horizontal .lc-switcher__list,
	.lc-switcher--pills .lc-switcher__list {
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}
}

@media (max-width: 480px) {
	.lc-switcher--context-menu {
		display: block;
		width: 100%;
	}

	.lc-switcher--context-menu .lc-switcher__toggle {
		width: 100%;
		justify-content: space-between;
	}

	/* A panel anchored to a toggle near the right edge of a phone has nowhere
	   to go. Pinned to the viewport it always has somewhere, and the actions
	   stay above the fold on a short screen because the lists scroll rather
	   than the panel.

	   Full-bleed to three edges with only the top corners rounded, which is
	   what a sheet looks like. Floated 8px off every edge it read as a card
	   that had come loose from something, and the gap under it showed a strip
	   of page that made it look like a mistake rather than a layer. */
	.lc-switcher--panel .lc-switcher__panel {
		position: fixed;
		inset: auto 0 0 0;
		width: auto;
		max-width: none;
		max-height: min(80vh, 34rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		border-inline: 0;
		border-block-end: 0;
		border-start-start-radius: var(--lc-panel-radius);
		border-start-end-radius: var(--lc-panel-radius);
		border-end-start-radius: 0;
		border-end-end-radius: 0;
		box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);

		/* Clear of the home indicator on a phone that has one. */
		padding-bottom: max(6px, env(safe-area-inset-bottom));
	}

	.lc-switcher__options {
		grid-template-columns: 1fr;
	}
}

/* ---------- Touch ---------- */

/* Keyed on the pointer rather than on the width. A finger is the same size on
   a phone, on a tablet and on a laptop with a touchscreen, and 44px is the
   smallest thing it can reliably hit — the width of the screen has never had
   anything to do with it. */

@media (pointer: coarse) {
	.lc-switcher__option,
	.lc-switcher__all,
	.lc-switcher__currency-link {
		min-height: 44px;
	}

	/* Two classes deep because an option row carries both `__option` and
	   `__link`, and each look sets a size on the second one — so a single-class
	   rule here loses to it. The `max-width: 480px` rule this replaces was
	   written with one class and had therefore never applied to anything. */
	.lc-switcher--panel .lc-switcher__options .lc-switcher__option,
	.lc-switcher .lc-switcher__all,
	.lc-switcher .lc-switcher__currency-link {
		font-size: 14px;
	}

	.lc-switcher__all {
		display: flex;
		align-items: center;
	}

	/* The toggle grows its *hit area* rather than its box. In a header bar the
	   pill sits in a row with a logo and a burger, and making it 12px taller
	   would push that row open on every page — so the target is extended past
	   the border instead, where it costs nothing and nobody can see it. */
	.lc-switcher--panel .lc-switcher__toggle,
	.lc-switcher--dropdown .lc-switcher__toggle {
		position: relative;
	}

	.lc-switcher--panel .lc-switcher__toggle::after,
	.lc-switcher--dropdown .lc-switcher__toggle::after {
		content: "";
		position: absolute;
		inset: min(0px, calc((44px - 100%) / -2)) -8px;
	}

	/* Where the control is already a full-width row there is room to simply be
	   44px tall, and a hit area wider than the row would overhang the drawer. */
	.lc-switcher--panel:is(
		.lc-switcher--context-block,
		.lc-switcher--context-menu,
		.lc-switcher--context-widget
	) .lc-switcher__toggle::after {
		content: none;
	}
}

/* ---------- Placed in a menu, a widget or a block ---------- */

/* The header pill floats a panel over the page, which is right for a control
   sitting in a bar and wrong everywhere else. An off-canvas menu is where it
   goes most visibly wrong: the drawer is a column of full-width rows, and a
   126px pill with a floating sheet over it reads as something that escaped
   from another page.

   It also breaks in a way that is invisible until it is not. A drawer is
   normally a `transform`ed, scrolling element, and a transformed ancestor
   becomes the containing block for `position: fixed` — so a sheet meant to be
   pinned to the viewport is pinned to the drawer instead, travels with it, and
   is clipped by its scroll box. It looks right only while the drawer happens
   to be still and full-height.

   So in these three placements the control stops floating. The toggle becomes
   a full-width row and the options open in flow beneath it, which is what the
   menu's own sub-menus already do — one interaction, not two.

   Colour comes from whatever it was dropped into rather than from the palette
   at the top of this file. That palette is white-on-dark, for a dark header.
   Dropped into a light drawer it paints white text on white, which is not a
   subtle mistake: the language code disappears completely.

   The rgba values below are fallbacks for browsers without color-mix(); the
   line after each one replaces it where it is supported. Both say "a bit of
   whatever colour the host is using", the second one accurately. */

.lc-switcher--panel:is(
	.lc-switcher--context-block,
	.lc-switcher--context-menu,
	.lc-switcher--context-widget
) {
	display: block;
	width: 100%;

	--lc-text: currentColor;
	--lc-text-strong: currentColor;
	--lc-panel-text: currentColor;
	--lc-accent: currentColor;

	--lc-text-muted: rgba(128, 128, 128, 0.85);
	--lc-text-muted: color-mix(in srgb, currentColor 65%, transparent);
	--lc-panel-muted: var(--lc-text-muted);

	--lc-border: rgba(128, 128, 128, 0.32);
	--lc-border: color-mix(in srgb, currentColor 24%, transparent);
	--lc-border-hover: rgba(128, 128, 128, 0.55);
	--lc-border-hover: color-mix(in srgb, currentColor 45%, transparent);
	--lc-rule: var(--lc-border);
	--lc-panel-border: var(--lc-border);

	--lc-hover-bg: rgba(128, 128, 128, 0.1);
	--lc-hover-bg: color-mix(in srgb, currentColor 8%, transparent);
	--lc-active-bg: rgba(128, 128, 128, 0.16);
	--lc-active-bg: color-mix(in srgb, currentColor 13%, transparent);

	--lc-panel-bg: transparent;
	--lc-panel-shadow: none;

	/* How far the rows are indented from the edge. A menu row almost always
	   has a gutter, and a control sitting flush against the edge beside them
	   is the thing that reads as broken rather than as minimal — but the exact
	   figure belongs to the theme, not to us. 20px is what most off-canvas
	   menus use, including Astra's. Match yours in one line:

	     .lc-switcher { --lc-inline-gutter: 1.5rem; } */
	--lc-inline-gutter: 1.25rem;
}

/* A row, not a pill. Square, full width, and tall enough for a thumb — 44px is
   the smallest target anyone should have to hit. */
.lc-switcher--panel:is(
	.lc-switcher--context-block,
	.lc-switcher--context-menu,
	.lc-switcher--context-widget
) .lc-switcher__toggle {
	display: flex;
	width: 100%;
	min-height: 44px;
	justify-content: space-between;
	padding: 10px var(--lc-inline-gutter);
	font-size: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: 0;
}

/* In flow. Not absolute, not fixed, and therefore not at the mercy of an
   ancestor's transform or overflow. */
.lc-switcher--panel:is(
	.lc-switcher--context-block,
	.lc-switcher--context-menu,
	.lc-switcher--context-widget
) .lc-switcher__panel {
	position: static;
	inset: auto;
	z-index: auto;
	width: 100%;
	min-width: 0;
	max-width: none;
	max-height: none;
	overflow: visible;
	padding: 0 0 8px;
	color: inherit;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--lc-rule);
	border-radius: 0;
	box-shadow: none;

	/* The floating panel fades and lifts. In flow there is nothing to lift
	   over, and a transform on an open disclosure only fights the scroll. */
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: none;
}

/* [hidden] means hidden here. The site look overrides it to `display: block` so
   its fade has something to run on; in flow that would leave the whole list
   sitting open underneath the toggle. */
.lc-switcher--panel:is(
	.lc-switcher--context-block,
	.lc-switcher--context-menu,
	.lc-switcher--context-widget
) .lc-switcher__panel[hidden] {
	display: none;
}

.lc-switcher--panel:is(
	.lc-switcher--context-block,
	.lc-switcher--context-menu,
	.lc-switcher--context-widget
) .lc-switcher__section {
	padding-inline: var(--lc-inline-gutter);
}

/* One column of full-width rows, matching the menu above it rather than the
   two-column grid a floating panel uses to stay compact. */
.lc-switcher--panel:is(
	.lc-switcher--context-block,
	.lc-switcher--context-menu,
	.lc-switcher--context-widget
) .lc-switcher__options {
	grid-template-columns: 1fr;
}

.lc-switcher--panel:is(
	.lc-switcher--context-block,
	.lc-switcher--context-menu,
	.lc-switcher--context-widget
) .lc-switcher__option {
	min-height: 44px;
	border-radius: 0;
}

.lc-switcher--panel:is(
	.lc-switcher--context-block,
	.lc-switcher--context-menu,
	.lc-switcher--context-widget
) .lc-switcher__all {
	min-height: 44px;
	display: flex;
	align-items: center;
	padding-inline: var(--lc-inline-gutter);
}

/* ---------- Setup hint ---------- */

/* Shown in place of the switcher when only one language exists, and only to
   users who can configure the site. Deliberately looks like a notice rather
   than like the theme, so it is not mistaken for real front-end content. */

.lc-switcher-notice {
	display: inline-block;
	padding: 0.5em 0.75em;
	font-size: 0.875em;
	line-height: 1.4;
	color: #664d03;
	background-color: #fff3cd;
	border: 1px dashed #997404;
	border-radius: 0.25em;
}

.lc-switcher-notice a {
	color: inherit;
	font-weight: bolder;
}

.lc-switcher-notice em {
	opacity: 0.75;
}

/* ---------- Reduced motion and forced colours ---------- */

@media (prefers-reduced-motion: reduce) {
	.lc-switcher__panel,
	.lc-switcher__caret,
	.lc-switcher__toggle,
	.lc-switcher__link,
	.lc-switcher__currency-link,
	.lc-switcher__dot,
	.lc-switcher__save {
		transition: none;
	}

	.lc-switcher[data-open="true"] .lc-switcher__caret {
		transform: translateY(1px) rotate(-135deg);
	}
}

@media (forced-colors: active) {
	.lc-switcher__panel,
	.lc-switcher__toggle {
		border: 1px solid;
	}

	.lc-switcher__caret {
		forced-color-adjust: none;
	}

	.lc-switcher__link:focus-visible,
	.lc-switcher__currency-link:focus-visible,
	.lc-switcher__option:focus-visible,
	.lc-switcher__toggle:focus-visible,
	.lc-switcher__all:focus-visible,
	.lc-preferences__select:focus-visible,
	.lc-switcher__save:focus-visible,
	.lc-switcher__cancel:focus-visible {
		outline: 3px solid highlight;
		outline-offset: 2px;
	}

	/* The dot is a hand-drawn ring and forced colours will not paint it, so the
	   option in force would be indistinguishable. The row itself carries the
	   distinction instead — see the is-current rule below. */
	.lc-switcher__dot {
		forced-color-adjust: none;
	}

	.lc-switcher__option.is-current {
		forced-color-adjust: none;
		background: Highlight;
		color: HighlightText;
	}

	.lc-switcher__save {
		border: 1px solid;
	}
}