/*
 * FAIM shell for /experience/
 * One header, one menu and one look, matched to faimglobal.com.
 * Loaded by every page in /experience/. Edit here, not in the pages.
 */

:root {
	--faim-ground: #121213;
	--faim-ink: #f1efed;
	--faim-green: #55e039;
	--faim-on-green: #0c1408;
	--faim-font: 'Zalando Sans', Arial, Helvetica, sans-serif;
	--faim-hdr-h: 90px;
}
@media (max-width: 999px) { :root { --faim-hdr-h: 64px; } }

body { font-family: var(--faim-font); }
h1, h2, h3, h4, h5, h6, button, input, select, textarea { font-family: var(--faim-font); }

/* ---------- Header ---------- */
.faim-hdr {
	position: fixed; top: 0; left: 0; right: 0; z-index: 120; /* same layer as the old header, so page modals and the lab intro still cover it */
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	height: var(--faim-hdr-h); padding: 0 clamp(18px, 4vw, 60px);
	background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
	transition: background .3s ease, backdrop-filter .3s ease, box-shadow .3s ease;
	font-family: var(--faim-font);
}
.faim-hdr.is-solid {
	background: rgba(0,0,0,.86);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.faim-logo { display: inline-flex; align-items: center; line-height: 0; flex: 0 0 auto; }
.faim-logo img { display: block; height: 40px; width: auto; }
.faim-logo:focus-visible { outline: 2px solid var(--faim-green); outline-offset: 6px; border-radius: 4px; }

.faim-hdr-r { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.faim-hdr-r a { text-decoration: none; }

.faim-cart {
	display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
	border-radius: 999px; color: var(--faim-ink) !important; font-size: 13px; font-weight: 500;
	border: 1px solid rgba(241,239,237,.22); background: rgba(255,255,255,.03);
	transition: border-color .2s ease, background .2s ease;
}
.faim-cart:hover { border-color: var(--faim-green); }
.faim-cart .qty {
	min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
	background: var(--faim-green); color: var(--faim-on-green); font-size: 11px; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}

.faim-cta {
	position: relative; overflow: hidden;
	display: inline-flex; align-items: center; height: 40px; padding: 0 20px;
	border-radius: 999px; border: 2px solid var(--faim-green);
	color: var(--faim-ink) !important; font-size: 14px; font-weight: 500; letter-spacing: .01em;
	transition: color .25s ease;
}
.faim-cta::before {
	content: ""; position: absolute; inset: 0; background: var(--faim-green);
	transform: translateY(101%); transition: transform .3s cubic-bezier(.22,1,.36,1); z-index: 0;
}
.faim-cta span { position: relative; z-index: 1; }
.faim-cta:hover, .faim-cta:focus-visible { color: var(--faim-on-green) !important; }
.faim-cta:hover::before, .faim-cta:focus-visible::before { transform: translateY(0); }

.faim-burger {
	width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	background: rgba(255,255,255,.08); border: 1px solid rgba(241,239,237,.18); cursor: pointer; padding: 0;
	transition: background .2s ease, border-color .2s ease;
}
.faim-burger i { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--faim-ink); transition: transform .3s ease; }
.faim-burger:hover { background: rgba(255,255,255,.14); border-color: var(--faim-green); }
.faim-burger:focus-visible { outline: 2px solid var(--faim-green); outline-offset: 3px; }

@media (max-width: 999px) {
	.faim-logo img { height: 24px; }
	.faim-cta { height: 36px; padding: 0 14px; font-size: 13px; }
	.faim-cart { height: 36px; padding: 0 12px; }
	.faim-burger { width: 40px; height: 40px; }
}
@media (max-width: 560px) {
	.faim-cart .faim-cart-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.faim-cart::before { content: "\FF0B"; font-size: 16px; line-height: 1; }
	.faim-cta { display: none; }
}

/* ---------- Slide-out menu, matched to the faimglobal.com off-canvas ---------- */
.faim-ocm-backdrop {
	position: fixed; inset: 0; z-index: 950; background: rgba(0,0,0,.55);
	opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.faim-ocm {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 960;
	width: min(440px, 100vw); overflow-y: auto; -webkit-overflow-scrolling: touch;
	background: var(--faim-ground); color: var(--faim-ink);
	padding: 96px clamp(28px, 4vw, 52px) 48px;
	transform: translateX(100%); transition: transform .45s cubic-bezier(.22,1,.36,1);
	font-family: var(--faim-font); visibility: hidden;
}
body.faim-ocm-open .faim-ocm { transform: translateX(0); visibility: visible; }
body.faim-ocm-open .faim-ocm-backdrop { opacity: 1; visibility: visible; }
body.faim-ocm-open { overflow: hidden; }

.faim-ocm-close {
	position: absolute; top: 22px; right: 22px; width: 46px; height: 46px; border-radius: 50%;
	background: rgba(255,255,255,.08); border: 1px solid rgba(241,239,237,.18); cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.faim-ocm-close i { position: absolute; width: 18px; height: 2px; background: var(--faim-ink); border-radius: 2px; }
.faim-ocm-close i:first-child { transform: rotate(45deg); }
.faim-ocm-close i:last-child { transform: rotate(-45deg); }
.faim-ocm-close:focus-visible { outline: 2px solid var(--faim-green); outline-offset: 3px; }

.faim-ocm ul { list-style: none; margin: 0; padding: 0; }
.faim-ocm-main a {
	display: block; padding: 7px 0; color: var(--faim-ink); text-decoration: none;
	font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; font-weight: 500; letter-spacing: -.01em;
	transition: color .2s ease, transform .2s ease;
}
.faim-ocm-main a:hover, .faim-ocm-main a:focus-visible { color: var(--faim-green); transform: translateX(4px); outline: none; }
.faim-ocm-main a[aria-current="page"] { color: var(--faim-green); }

.faim-ocm-group { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); }
.faim-ocm-label {
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
	color: var(--faim-green); margin: 0 0 14px;
}
.faim-ocm-group a {
	display: block; padding: 7px 0; font-size: 15px; line-height: 1.35;
	color: rgba(241,239,237,.72); text-decoration: none; transition: color .2s ease, transform .2s ease;
}
.faim-ocm-group a:hover, .faim-ocm-group a:focus-visible { color: var(--faim-green); transform: translateX(4px); outline: none; }
.faim-ocm-group.contact a { color: var(--faim-ink); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
	.faim-ocm, .faim-ocm-backdrop, .faim-cta::before, .faim-hdr { transition: none !important; }
}

/* ---------- Page adjustments for the standard header ---------- */
/* The old phone-only side rail is replaced by the standard header and menu. */
.mrail { display: none !important; }
body.inner main.wrap { padding-top: calc(var(--faim-hdr-h) + 20px) !important; }
body.inner .pagehero { padding-top: calc(var(--faim-hdr-h) + 8px) !important; }

/* Interactive Lab pages keep their own pill bar, moved below the standard header. */
body.faim-lab .topbar { top: calc(var(--faim-hdr-h) + 12px) !important; }