/**
 * Site chrome v5 (design handoff v5 "Global chrome", s4/App.jsx + app.css `.hdr*` / `.sf*`),
 * site-wide: Flatsome header with the Help menu and language tile, and the "Custom Footer" UX block.
 * Markup: flatsome-child/inc/sf-site-chrome.php (shortcodes) + Flatsome header elements + the block.
 *
 * Everything is scoped to `body.sfc-v5` (set once the header carries [pm_sf_header_help]), so this
 * file changes nothing before the theme mods are switched over.
 *
 * Tokens: midnight #1A2839 · ink-2 #475569 · ink-3 #64748B · ink-4 #94A3B8 · surface-2 #F0F5FA
 *         line #E2E8F0 · orange #F05123 · orange-light #F87D3B · elev-2 0 12px 32px rgba(1,16,19,.2)
 */

/* ===== Header: midnight, 56px, content in a centred 1280px container (SF-166, like paj-gps.de) ===== */

body.sfc-v5 #header .header-main,
body.sfc-v5 #header .header-wrapper.stuck .header-main {
	background-color: #1A2839;
	height: 56px;
}

/* The bar stays full width; Flatsome's full-width header (theme mod header_width) sets
   .header-full-width .container { max-width: 100% !important }, hence the !important here. */
body.sfc-v5 #masthead .header-inner {
	position: relative; /* anchors the Help / language dropdowns */
	max-width: 1280px !important;
	margin-left: auto;
	margin-right: auto;
	padding: 0 16px;
}

@media (min-width: 640px) {
	body.sfc-v5 #masthead .header-inner {
		padding: 0 24px;
	}
}

@media (min-width: 1024px) {
	body.sfc-v5 #masthead .header-inner {
		padding: 0 32px;
	}
}

/* Wordmark 27px mobile / 29px desktop */
body.sfc-v5 #logo {
	width: auto !important;
}

body.sfc-v5 #logo img {
	height: 27px !important;
	width: auto !important;
	max-height: none;
	padding: 0;
}

@media (min-width: 640px) {
	body.sfc-v5 #logo img {
		height: 29px !important;
	}
}

/* Header items: 8px apart, vertically centred */
body.sfc-v5 #masthead .nav > li.html.custom {
	position: static; /* dropdowns anchor to .header-inner, not to the item */
	margin: 0 0 0 8px;
	padding: 0;
	display: flex;
	align-items: center;
}

body.sfc-v5 #masthead .nav > li.nav-icon {
	margin-left: 8px;
}

body.sfc-v5 #masthead .nav-icon > a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	color: #fff;
}

body.sfc-v5 #masthead .nav-icon > a:hover {
	background: rgba(255, 255, 255, .08);
}

/* Burger: on desktop only on wizard pages (they hide the site navigation, v5 shows none there) */
body.sfc-v5:not(.sf-wizard) #masthead .hide-for-medium .nav-icon {
	display: none;
}

body.sfc-v5.sf-wizard #masthead .hide-for-medium .header-nav-main > li.menu-item {
	display: none;
}

/* ===== Help button + language button ===== */

body.sfc-v5 .sfc-dd {
	position: static;
	display: flex;
}

body.sfc-v5 .sfc-help-btn,
body.sfc-v5 .sfc-lang-btn,
body.sfc-v5 .sfc-site-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 40px;
	min-height: 0;
	min-width: 44px;
	margin: 0;
	padding: 0 4px;
	border: 0;
	border-radius: 8px !important; /* theme options #custom-css: button:not(.icon) { 10px !important } */
	background: none;
	box-shadow: none;
	color: #fff;
	font: 500 14px/20px Roboto, system-ui, sans-serif;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

body.sfc-v5 .sfc-help-btn:hover .sfc-help-label,
body.sfc-v5 .sfc-dd.is-open .sfc-help-label {
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.sfc-v5 .sfc-lang-btn {
	min-width: 40px;
	padding: 0 8px;
}

body.sfc-v5 .sfc-lang-btn:hover {
	background: rgba(255, 255, 255, .08);
}

body.sfc-v5 .sfc-lang.is-open .sfc-lang-btn {
	background: rgba(255, 255, 255, .12);
}

body.sfc-v5 .sfc-flag {
	display: block;
	border-radius: 2px;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}

/* Menu row: the flag inside the 36px icon square, on the light tile. */
body.sfc-v5 .sfc-lang-flag .sfc-flag {
	box-shadow: 0 0 0 1px rgba(26, 40, 57, .15);
}

/* SF-168 (design v5.3, SF-124): flags stand without a tile, the active one too (the check marks it). */
body.sfc-v5 .sfc-mi-ic.sfc-lang-flag {
	background: none;
}

body.sfc-v5 .sfc-lang-code {
	font-size: 13px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: .06em;
	color: #fff;
}

body.sfc-v5 .sfc-help-btn:focus-visible,
body.sfc-v5 .sfc-lang-btn:focus-visible,
body.sfc-v5 .sfc-site-btn:focus-visible,
body.sfc-v5 .sfc-menu-item:focus-visible,
body.sfc-v5 #masthead .nav-icon > a:focus-visible {
	outline: 2px solid #F05123;
	outline-offset: 2px;
}

/* ===== Dropdown menus (NEED HELP? / LANGUAGE) ===== */

body.sfc-v5 .sfc-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 16px;
	z-index: 1002; /* above Flatsome's sticky header (1001) */
	width: min(296px, calc(100vw - 32px));
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(1, 16, 19, .2);
	text-align: left;
	animation: sfc-menu-in .16s cubic-bezier(.2, 0, 0, 1) both;
}

body.sfc-v5 .sfc-menu[hidden] {
	display: none;
}

@media (min-width: 640px) {
	body.sfc-v5 .sfc-menu {
		right: 24px;
	}
}

@media (min-width: 1024px) {
	body.sfc-v5 .sfc-menu {
		right: 32px;
	}
}

@keyframes sfc-menu-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

body.sfc-v5 .sfc-menu-lang {
	width: min(280px, calc(100vw - 32px));
	max-height: min(70vh, 520px);
	overflow-y: auto;
}

body.sfc-v5 .sfc-menu-eb {
	margin: 0;
	padding: 8px 10px 4px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #64748B;
}

body.sfc-v5 #header .sfc-menu a.sfc-menu-item,
body.sfc-v5 .sfc-menu a.sfc-menu-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 10px;
	border-radius: 8px;
	background: none;
	color: #1A2839;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
}

body.sfc-v5 .sfc-menu a.sfc-menu-item:hover,
body.sfc-v5 .sfc-menu a.sfc-menu-item.is-active {
	background: #F0F5FA;
	color: #1A2839;
}

body.sfc-v5 .sfc-mi-ic {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: #F0F5FA;
	color: #1A2839;
}

body.sfc-v5 .sfc-mi-ic.is-wa {
	color: #25D366;
}

/* Official WhatsApp glyph (design v5.3): 32px in the 36px tile, file unchanged, aspect ratio kept */
body.sfc-v5 .sfc-wa-logo {
	display: block;
	width: 20px;
	height: auto;
	margin: 0;
}

body.sfc-v5 .sfc-mi-ic.is-wa .sfc-wa-logo {
	width: 32px;
}

body.sfc-v5 .sfc-lang-tile {
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: .06em;
	color: #1A2839;
}

body.sfc-v5 .sfc-lang-item.is-active .sfc-lang-tile {
	background: #1A2839;
	color: #fff;
}

body.sfc-v5 .sfc-mi-tx {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

body.sfc-v5 .sfc-mi-tx b {
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
	color: #1A2839;
}

body.sfc-v5 .sfc-mi-sub {
	font-size: 14px;
	line-height: 20px;
	color: #475569;
	overflow-wrap: anywhere;
}

body.sfc-v5 .sfc-mi-hours {
	font-size: 13px;
	line-height: 18px;
	color: #64748B;
}

body.sfc-v5 .sfc-mi-chev {
	flex: 0 0 auto;
	color: #64748B;
}

body.sfc-v5 .sfc-lang-check {
	color: #1A2839;
}

body.sfc-v5 .sfc-ico {
	display: block;
	flex-shrink: 0;
}

/* ===== Footer (UX block "Custom Footer", v5 SiteFooter) ===== */

body.sfc-v5 #footer .absolute-footer {
	display: none; /* the empty copyright bar; v5 has nothing below the block */
}

body.sfc-v5 .sfc-footer {
	background: #1A2839 !important;
	color: #fff;
	padding: 0 !important;
}

body.sfc-v5 .sfc-footer > .section-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 16px 24px;
	display: flex;
	flex-direction: column;
}

body.sfc-v5 .sfc-footer .row {
	max-width: none;
	margin: 0;
}

body.sfc-v5 .sfc-footer .col,
body.sfc-v5 .sfc-footer .col-inner {
	padding: 0;
}

body.sfc-v5 .sfc-footer p {
	margin: 0;
}

body.sfc-v5 .sfc-footer a {
	font-weight: inherit;
	text-decoration: none;
}

body.sfc-v5 .sfc-footer .sfc-eb,
body.sfc-v5 .sfc-contact .sfc-eb {
	margin: 0;
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #94A3B8;
}

/* Logo */
body.sfc-v5 .sfc-f-logo img {
	display: block;
	width: 139px;
	height: 40px;
	margin: 0 0 24px;
}

/* Contact tile */
body.sfc-v5 .sfc-contact {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 16px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 16px;
}

body.sfc-v5 .sfc-ci {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

body.sfc-v5 .sfc-cl {
	font-size: 14px;
	line-height: 20px;
	color: #94A3B8;
}

body.sfc-v5 .sfc-footer a.sfc-cv,
body.sfc-v5 a.sfc-cv {
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	overflow-wrap: anywhere;
}

body.sfc-v5 a.sfc-cv:hover {
	color: #F87D3B;
}

/* "Chat on WhatsApp" (SF-130 (i)) and "Open in your browser" (SF-130 (j)): plain links — glyph,
   white text, small grey external-link arrow, orange on hover (design v5.3, no box) */
body.sfc-v5 .sfc-footer a.sfc-wa,
body.sfc-v5 .sfc-footer a.sfc-web {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
}

body.sfc-v5 .sfc-footer a.sfc-wa .sfc-ico:last-child,
body.sfc-v5 .sfc-footer a.sfc-web .sfc-ico:last-child {
	color: #94A3B8;
}

body.sfc-v5 .sfc-footer a.sfc-wa:hover,
body.sfc-v5 .sfc-footer a.sfc-web:hover,
body.sfc-v5 .sfc-footer a.sfc-wa:hover .sfc-ico,
body.sfc-v5 .sfc-footer a.sfc-web:hover .sfc-ico {
	color: #F87D3B;
}

body.sfc-v5 .sfc-hours {
	font-size: 14px;
	line-height: 20px;
	color: #E2E8F0;
}

/* Right column: app block first on phones, under the link columns on desktop */
body.sfc-v5 .sfc-f-right > .col-inner {
	display: flex;
	flex-direction: column;
}

body.sfc-v5 .sfc-f-app {
	order: -1;
	padding: 32px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

/* FINDER Portal block (SF-130 (j)): eyebrow, browser link, store badges stacked */
body.sfc-v5 .sfc-f-app .col-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

body.sfc-v5 .sfc-f-app .img {
	flex: 1 1 0;
	width: auto !important;
	max-width: 160px;
	margin: 0 !important;
}

body.sfc-v5 .sfc-f-app .img img {
	height: 44px;
	width: auto;
	object-fit: contain;
}

/* Link columns: 2 × 2 on phones (Shop · Help · Company · Follow us, design v5.3) */
body.sfc-v5 .sfc-f-links {
	padding: 32px 0 40px;
	row-gap: 32px;
}

body.sfc-v5 .sfc-f-links > .col {
	padding-right: 12px;
}

body.sfc-v5 .sfc-f-col .col-inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

body.sfc-v5 .sfc-f-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.sfc-v5 .sfc-f-list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.sfc-v5 .sfc-footer .sfc-f-list a {
	font-size: 15px;
	line-height: 22px;
	color: #E2E8F0;
}

body.sfc-v5 .sfc-footer .sfc-f-list a:hover {
	color: #F87D3B;
}

/* Social circles ([pm_sf_footer_social]): official glyphs in one colour on the dark ground */
body.sfc-v5 .sfc-footer .sfc-social {
	display: flex;
	gap: 8px;
	margin: 0;
}

body.sfc-v5 .sfc-footer a.sfc-soc {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	background: none;
	color: #E2E8F0;
	line-height: 1;
	transition: border-color .15s cubic-bezier(.2, 0, 0, 1), color .15s cubic-bezier(.2, 0, 0, 1);
}

body.sfc-v5 .sfc-footer a.sfc-soc:hover {
	border-color: #fff;
	color: #fff;
}

body.sfc-v5 .sfc-footer .sf-social-ico {
	display: block;
}

/* Bottom: payment tiles above the legal line on phones */
body.sfc-v5 .sfc-f-bottom {
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	row-gap: 16px;
}

body.sfc-v5 .sfc-f-br {
	order: -1;
}

body.sfc-v5 .sfc-f-br .col-inner {
	display: flex;
	align-items: center;
	gap: 24px;
}

body.sfc-v5 .sfc-f-br .sfc-social,
body.sfc-v5 .sfc-f-div {
	display: none;
}

body.sfc-v5 .sfc-f-bl .col-inner {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

body.sfc-v5 .sfc-f-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

body.sfc-v5 .sfc-footer .sfc-f-legal a {
	font-size: 14px;
	line-height: 20px;
	color: #94A3B8;
}

body.sfc-v5 .sfc-footer .sfc-f-legal a:hover {
	color: #fff;
}

/* "Cookie settings" (SF-130 (d)): a button that reopens the consent banner, styled like the legal
   links (Flatsome's button defaults — uppercase, min-height, margins — reset) */
body.sfc-v5 .sfc-footer .sfc-f-legal button.sfc-cookie {
	display: inline;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font: inherit;
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: #94A3B8;
	cursor: pointer;
	vertical-align: baseline;
}

body.sfc-v5 .sfc-footer .sfc-f-legal button.sfc-cookie:hover {
	color: #fff;
}

body.sfc-v5 .sfc-f-vat {
	font-size: 14px;
	line-height: 20px;
	color: #64748B;
}

/* Payment tiles (Flatsome [ux_payment_icons]) */
body.sfc-v5 .sfc-footer .payment-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	opacity: 1;
}

body.sfc-v5 .sfc-footer .payment-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 26px;
	margin: 0;
	padding: 3px 5px;
	border-radius: 4px;
	background: #fff;
	opacity: 1;
}

body.sfc-v5 .sfc-footer .payment-icon svg {
	width: 100%;
	height: 100%;
	fill: #1A2839;
}

/* Official payment logos ([pm_sf_footer_payments], SF-134, design v5.3): full-colour files
   unchanged, each brings its own white tile with a hairline — no backing here; one height (20px),
   aspect ratio of the files (38 × 26). */
body.sfc-v5 .sfc-footer .sfc-pay {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

/* Explicit width (height × 38/26): with width:auto the column measured the <img> width attribute
   instead of the rendered logo, so the payment row ran under the social circles (01.10.). */
body.sfc-v5 .sfc-footer .sf-pay-logo {
	display: block;
	flex: 0 0 auto;
	width: 29px;
	height: 20px;
	object-fit: contain;
	margin: 0;
}

body.sfc-v5 .sfc-footer .sfc-f-br .sfc-pay,
body.sfc-v5 .sfc-footer .sfc-f-br .sfc-social,
body.sfc-v5 .sfc-f-div {
	flex: 0 0 auto;
}

body.sfc-v5 .sfc-footer .sf-pay-logo--ph {
	display: grid;
	place-items: center;
	border-radius: 3px;
	background: rgba(255, 255, 255, .1);
	color: #CBD5E1;
}

body.sfc-v5 .sfc-footer .sf-pay-logo--ph svg {
	width: 56%;
	height: auto;
	fill: currentColor;
}

/* Official store badges ([pm_sf_app_badges], SF-97): pair, same height, never stretched */
body.sfc-v5 .sfc-footer .sfc-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

body.sfc-v5 .sfc-footer .sf-store {
	display: block;
	flex: none;
}

body.sfc-v5 .sfc-footer .sf-store img {
	display: block;
	width: auto;
	height: 44px;
}

body.sfc-v5 .sfc-footer :focus-visible {
	outline: 2px solid #F05123;
	outline-offset: 2px;
}

@media (min-width: 900px) {
	body.sfc-v5 .sfc-footer > .section-content {
		max-width: 1104px;
		padding: 40px 40px 32px;
	}

	body.sfc-v5 .sfc-f-logo img {
		width: 160px;
		height: 46px;
		margin: 0 0 40px;
	}

	body.sfc-v5 .sfc-f-main {
		flex-wrap: nowrap;
	}

	body.sfc-v5 .sfc-f-contact-col {
		flex: 0 0 368px !important;
		max-width: 368px !important;
		padding-right: 48px !important;
	}

	body.sfc-v5 .sfc-contact {
		padding: 24px;
		margin-bottom: 48px;
	}

	body.sfc-v5 .sfc-f-right {
		flex: 1 1 auto !important;
		max-width: none !important;
	}

	body.sfc-v5 .sfc-f-app {
		order: 0;
		padding: 0 0 48px;
		border-bottom: 0;
	}

	body.sfc-v5 .sfc-f-app .img {
		flex: 0 0 auto;
		width: 135px !important;
	}

	body.sfc-v5 .sfc-f-app .img img {
		height: 40px;
	}

	body.sfc-v5 .sfc-f-links {
		padding: 0 0 40px;
	}

	body.sfc-v5 .sfc-f-links > .col {
		flex-basis: 33.333% !important;
		max-width: 33.333% !important;
		padding-right: 48px;
	}

	body.sfc-v5 .sfc-f-follow {
		display: none !important;
	}

	body.sfc-v5 .sfc-f-bottom {
		align-items: center;
		padding-top: 24px;
	}

	body.sfc-v5 .sfc-f-br {
		order: 0;
	}

	body.sfc-v5 .sfc-f-br .col-inner {
		justify-content: flex-end;
	}

	/* One row of payment and social icons (design v5): the column takes the width it
	   needs instead of Flatsome's 4/12, the legal links get the rest. */
	body.sfc-v5 .sfc-f-bottom > .col.sfc-f-br {
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: none !important;
	}

	body.sfc-v5 .sfc-f-bottom > .col.sfc-f-bl {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0;
		max-width: none !important;
	}

	body.sfc-v5 .sfc-footer .sfc-f-br .payment-icons {
		flex-wrap: nowrap;
	}

	body.sfc-v5 .sfc-f-br .sfc-social {
		display: flex;
	}

	body.sfc-v5 .sfc-f-div {
		display: block;
		width: 1px;
		height: 24px;
		background: rgba(255, 255, 255, .12);
	}

	body.sfc-v5 .sfc-footer a.sfc-soc {
		width: 36px;
		height: 36px;
	}

	body.sfc-v5 .sfc-f-bl .col-inner {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 24px;
	}

	body.sfc-v5 .sfc-f-legal {
		gap: 8px 24px;
	}

	body.sfc-v5 .sfc-footer .payment-icon {
		width: 44px;
		height: 28px;
	}

	body.sfc-v5 .sfc-footer .sfc-f-br .sfc-pay {
		flex-wrap: nowrap;
	}

	body.sfc-v5 .sfc-footer .sf-store img {
		height: 40px;
	}
}

/* Checkout consent card (design v5.4): checkbox texts left-aligned, also on narrow screens */
body.sfc-v5 .sf-consent .form-row,
body.sfc-v5 .sf-consent label,
body.sfc-v5 .sf-consent .sf-privacy-info {
	text-align: left;
}

/* SF-169 (design v5.4, variant 2a): burger as an icon button with the MENU dropdown */
body.sfc-v5 .sfc-site-btn {
	min-width: 40px;
	padding: 0 8px;
}

body.sfc-v5 .sfc-site-btn:hover,
body.sfc-v5 .sfc-site.is-open .sfc-site-btn {
	background: rgba(255, 255, 255, .12);
}

body.sfc-v5 .sfc-menu-site {
	width: min(260px, calc(100vw - 32px));
}

/* SF-164 (design v5.4): the email label of the account step carries the required mark too */
body.sfc-v5 .sf-entry__label .req {
	margin-left: 2px;
	color: var(--err);
}