/* ==========================================================================
   HNTR Legend — Designsystem (global)
   Cinematic Outdoor × Luxury Minimalism × Technical Product Design
   ========================================================================== */

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-var.woff2") format("woff2-variations"), url("../fonts/archivo-var.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/plex-mono-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/plex-mono-500.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "Instrument Serif";
	src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

:root {
	/* Farben */
	--hl-ink: #060907;
	--hl-950: #0a110d;
	--hl-900: #0e1812;
	--hl-850: #132019;
	--hl-800: #18291f;
	--hl-700: #23392b;
	--hl-moss: #76846a;
	--hl-bone: #ece6d8;
	--hl-bone-2: #cfc9ba;
	--hl-paper: #f3efe6;
	--hl-muted: #a3a99b;
	--hl-muted-dark: #5b6157;
	--hl-brass: #d9a74d;
	--hl-brass-2: #ebc172;
	--hl-danger: #f08a6b;
	--hl-ok: #9fc28a;
	--hl-line: rgba(236, 230, 216, 0.12);
	--hl-line-2: rgba(236, 230, 216, 0.24);
	--hl-line-dark: rgba(10, 17, 13, 0.14);

	/* Typografie */
	--hl-font: "Archivo", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--hl-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	--hl-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;

	/* Layout & Motion */
	--hl-gutter: clamp(16px, 4vw, 56px);
	--hl-max: 1360px;
	--hl-header-h: 72px;
	--hl-radius: 3px;
	--hl-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--hl-admin: var(--wp-admin--admin-bar--height, 0px);
}

/* Lenis / Smooth Scroll: natives smooth-scroll aus, sonst kämpfen beide */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

html { scroll-padding-top: calc(var(--hl-header-h) + var(--hl-admin) + 16px); }

body { font-family: var(--hl-font); }
h1, h2, h3, h4 { font-family: var(--hl-font); }
h1, h2 { font-stretch: 112%; }

/* Hilfsklassen ------------------------------------------------------------- */
.hl-container {
	width: 100%;
	max-width: calc(var(--hl-max) + 2 * var(--hl-gutter));
	margin-inline: auto;
	padding-inline: var(--hl-gutter);
	box-sizing: border-box;
}
.hl-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}
.hl-mono { font-family: var(--hl-mono); }
.hl-serif {
	font-family: var(--hl-serif);
	font-style: italic;
	font-weight: 400;
	font-stretch: 100%;
	text-transform: none;
	letter-spacing: -0.01em;
}
.hl-muted { color: var(--hl-muted); }

.hl-skip {
	position: fixed;
	left: 16px; top: calc(var(--hl-admin) + 12px);
	z-index: 1000;
	padding: 12px 18px;
	background: var(--hl-brass);
	color: var(--hl-ink);
	font-weight: 700;
	transform: translateY(-200%);
	transition: transform 0.2s var(--hl-ease);
}
.hl-skip:focus { transform: none; }

:where(.hl-header, .hl-footer, .hl-drawer, .hl-sticky-buy, main.hl-landing-main) :focus-visible {
	outline: 2px solid var(--hl-brass);
	outline-offset: 3px;
}

/* Buttons ------------------------------------------------------------------ */
.hl-btn {
	--_bg: transparent;
	--_fg: var(--hl-bone);
	--_bd: var(--hl-line-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.65em;
	min-height: 48px;
	padding: 0.95em 1.6em;
	border: 1px solid var(--_bd);
	border-radius: var(--hl-radius);
	background: var(--_bg);
	color: var(--_fg);
	font: 650 0.8rem/1 var(--hl-font);
	font-stretch: 118%;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.3s var(--hl-ease), border-color 0.3s var(--hl-ease), color 0.3s var(--hl-ease), transform 0.3s var(--hl-ease);
	-webkit-tap-highlight-color: transparent;
}
.hl-btn:hover { --_bd: var(--hl-bone); text-decoration: none; }
.hl-btn:active { transform: translateY(1px); }
.hl-btn[disabled], .hl-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.hl-btn--brass { --_bg: var(--hl-brass); --_fg: var(--hl-ink); --_bd: var(--hl-brass); }
.hl-btn--brass:hover { --_bg: var(--hl-brass-2); --_bd: var(--hl-brass-2); }
.hl-btn--ghost { --_bg: rgba(10, 17, 13, 0.25); backdrop-filter: blur(6px); }
.hl-btn--sm { min-height: 40px; padding: 0.7em 1.1em; font-size: 0.72rem; }
.hl-btn--lg { min-height: 56px; padding: 1.15em 1.9em; }
.hl-btn--block { width: 100%; }

/* Eyebrow / Überschriften ----------------------------------------------------- */
.hl-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.8em;
	margin: 0 0 1.4rem;
	font: 500 0.74rem/1.2 var(--hl-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hl-brass);
}
.hl-eyebrow__dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--hl-brass);
	box-shadow: 0 0 0 4px rgba(217, 167, 77, 0.18);
}
.hl-index {
	padding-right: 0.8em;
	border-right: 1px solid currentColor;
	opacity: 0.8;
}

/* Header -------------------------------------------------------------------- */
.wp-site-blocks > header.wp-block-template-part { margin: 0; }
.hl-header {
	position: sticky;
	top: var(--hl-admin);
	z-index: 50;
	color: var(--hl-bone);
	background: rgba(10, 17, 13, 0.92);
	backdrop-filter: saturate(1.2) blur(14px);
	border-bottom: 1px solid var(--hl-line);
	transition: background-color 0.4s var(--hl-ease), border-color 0.4s var(--hl-ease), transform 0.5s var(--hl-ease);
}
.hl-header--overlay {
	position: fixed;
	left: 0; right: 0;
	background: transparent;
	border-color: transparent;
	backdrop-filter: none;
}
.hl-header--overlay.is-scrolled {
	background: rgba(10, 17, 13, 0.78);
	backdrop-filter: saturate(1.2) blur(14px);
	border-color: var(--hl-line);
}
.hl-header.is-hidden { transform: translateY(-110%); }
.hl-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	height: var(--hl-header-h);
	max-width: calc(var(--hl-max) + 2 * var(--hl-gutter));
	margin: 0 auto;
	padding-inline: var(--hl-gutter);
}
.hl-brand { display: inline-flex; flex: none; }
.hl-brand img { display: block; height: 40px; width: auto; }

.hl-nav { margin-left: auto; }
.hl-nav ul { display: flex; gap: clamp(16px, 2.2vw, 36px); margin: 0; padding: 0; list-style: none; }
.hl-nav a {
	position: relative;
	display: inline-block;
	padding: 10px 0;
	color: var(--hl-bone);
	font: 500 0.72rem/1 var(--hl-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}
.hl-nav a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 4px;
	height: 1px;
	background: var(--hl-brass);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s var(--hl-ease);
}
.hl-nav a:hover::after, .hl-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }

.hl-header__actions { display: flex; align-items: center; gap: 10px; }
.hl-header__price { opacity: 0.75; font-weight: 500; }
.hl-cart-btn,
.hl-menu-btn,
.hl-icon-btn {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 44px; height: 44px;
	padding: 0;
	border: 1px solid var(--hl-line-2);
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: border-color 0.3s var(--hl-ease), background-color 0.3s var(--hl-ease);
}
.hl-cart-btn:hover, .hl-menu-btn:hover, .hl-icon-btn:hover { border-color: var(--hl-bone); }
.hl-cart-btn__count {
	position: absolute;
	top: -4px; right: -4px;
	min-width: 20px; height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--hl-brass);
	color: var(--hl-ink);
	font: 700 0.7rem/20px var(--hl-font);
	text-align: center;
}
.hl-cart-btn__count[hidden] { display: none; }
.hl-cart-btn.is-bumped { animation: hl-bump 0.6s var(--hl-ease); }
@keyframes hl-bump { 30% { transform: scale(1.18); } }

.hl-menu-btn { display: none; }
.hl-menu-btn__bars,
.hl-menu-btn__bars::before,
.hl-menu-btn__bars::after {
	display: block;
	width: 16px; height: 1.5px;
	background: currentColor;
	transition: transform 0.35s var(--hl-ease);
}
.hl-menu-btn__bars { position: relative; }
.hl-menu-btn__bars::before, .hl-menu-btn__bars::after { content: ""; position: absolute; left: 0; }
.hl-menu-btn__bars::before { top: -5px; }
.hl-menu-btn__bars::after { top: 5px; }
.hl-menu-btn[aria-expanded="true"] .hl-menu-btn__bars { background: transparent; }
.hl-menu-btn[aria-expanded="true"] .hl-menu-btn__bars::before { transform: translateY(5px) rotate(45deg); }
.hl-menu-btn[aria-expanded="true"] .hl-menu-btn__bars::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 960px) {
	:root { --hl-header-h: 64px; }
	.hl-brand img { height: 34px; }
	.hl-menu-btn { display: inline-grid; }
	.hl-header__price { display: none; }
	.hl-nav {
		position: fixed;
		inset: calc(var(--hl-header-h) + var(--hl-admin)) 0 auto 0;
		padding: 8px var(--hl-gutter) 24px;
		background: rgba(10, 17, 13, 0.97);
		border-bottom: 1px solid var(--hl-line);
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s var(--hl-ease), transform 0.3s var(--hl-ease), visibility 0s linear 0.3s;
	}
	.hl-nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	.hl-nav ul { flex-direction: column; gap: 0; }
	.hl-nav a { display: block; padding: 16px 0; font-size: 0.85rem; border-bottom: 1px solid var(--hl-line); }
	.hl-nav a::after { display: none; }
}
@media (max-width: 420px) {
	.hl-header__buy { padding-inline: 0.9em; }
}

/* Footer -------------------------------------------------------------------- */
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }
.hl-footer {
	padding: clamp(56px, 8vw, 104px) 0 28px;
	background: var(--hl-ink);
	color: var(--hl-bone-2);
	font-size: 0.92rem;
	border-top: 1px solid var(--hl-line);
}
.hl-footer a { color: var(--hl-bone); text-decoration: none; }
.hl-footer a:hover { color: var(--hl-brass-2); text-decoration: underline; text-underline-offset: 4px; }
.hl-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.hl-footer__brand img { height: 44px; width: auto; }
.hl-footer__claim {
	margin: 20px 0 8px;
	color: var(--hl-bone);
	font-weight: 800;
	font-stretch: 125%;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.hl-footer__brand .hl-muted { max-width: 30ch; }
.hl-footer__title {
	margin: 0 0 16px;
	color: var(--hl-muted);
	font: 500 0.7rem/1 var(--hl-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.hl-footer .hl-footer__title--spaced { margin-top: 28px; }
.hl-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.hl-chips { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
.hl-chips li { padding: 5px 10px; border: 1px solid var(--hl-line-2); border-radius: 999px; font-size: 0.78rem; }
.hl-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid var(--hl-line);
	color: var(--hl-muted);
	font-size: 0.8rem;
}
.hl-footer__bottom p { margin: 0; }
@media (max-width: 860px) {
	.hl-footer__grid { grid-template-columns: 1fr 1fr; }
	.hl-footer__brand { grid-column: 1 / -1; }
}

/* Warenkorb-Drawer ------------------------------------------------------------ */
.hl-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(440px, 100vw);
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--hl-900);
	color: var(--hl-bone);
	font-family: var(--hl-font);
	box-shadow: -40px 0 80px rgba(0, 0, 0, 0.45);
	transform: translateX(100%);
	transition: transform 0.5s var(--hl-ease), overlay 0.5s allow-discrete, display 0.5s allow-discrete;
}
.hl-drawer[open] { transform: none; }
@starting-style { .hl-drawer[open] { transform: translateX(100%); } }
.hl-drawer::backdrop { background: rgba(3, 6, 4, 0.6); backdrop-filter: blur(3px); }
.hl-drawer__panel { display: flex; flex-direction: column; height: 100%; }
.hl-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var(--hl-line);
}
.hl-drawer__title {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 700;
	font-stretch: 118%;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.hl-drawer__body { flex: 1; overflow-y: auto; padding: 8px 24px; overscroll-behavior: contain; }
.hl-drawer__foot { padding: 20px 24px 24px; border-top: 1px solid var(--hl-line); display: grid; gap: 10px; }
.hl-drawer__foot[hidden] { display: none; }
.hl-drawer__totals { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 0 0 4px; }
.hl-drawer__totals dt { color: var(--hl-muted); }
.hl-drawer__totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.hl-drawer__totals .is-total { color: var(--hl-bone); font-weight: 700; font-size: 1.1rem; }
.hl-drawer__note { margin: 0 0 6px; color: var(--hl-muted); font-size: 0.8rem; }
.hl-line-item {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--hl-line);
}
.hl-line-item img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--hl-radius); background: #fff; }
.hl-line-item__name { margin: 0 0 4px; font-weight: 600; line-height: 1.3; }
.hl-line-item__meta { margin: 0 0 12px; color: var(--hl-muted); font-size: 0.85rem; }
.hl-line-item__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hl-line-item__price { font-variant-numeric: tabular-nums; font-weight: 600; }
.hl-link-btn {
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--hl-muted);
	font: inherit;
	font-size: 0.8rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.hl-link-btn:hover { color: var(--hl-bone); }
.hl-empty { padding: 48px 0; text-align: center; color: var(--hl-muted); }
.hl-empty .hl-btn { margin-top: 16px; }

/* Mengen-Stepper (Drawer + Kaufbereich) */
.hl-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--hl-line-2);
	border-radius: var(--hl-radius);
}
.hl-qty__btn {
	width: 40px;
	min-height: 40px;
	border: 0;
	background: none;
	color: inherit;
	font-size: 1.1rem;
	cursor: pointer;
}
.hl-qty__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.hl-qty__input, .hl-qty__value {
	width: 40px;
	border: 0;
	background: none;
	color: inherit;
	font: 600 1rem/1 var(--hl-font);
	text-align: center;
	-moz-appearance: textfield;
	display: grid;
	place-items: center;
}
.hl-qty__input::-webkit-inner-spin-button, .hl-qty__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Sticky-Kaufleiste (mobil) ---------------------------------------------------- */
.hl-sticky-buy {
	position: fixed;
	left: 12px; right: 12px; bottom: 12px;
	z-index: 40;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 10px 10px 18px;
	border: 1px solid var(--hl-line-2);
	border-radius: 6px;
	background: rgba(10, 17, 13, 0.92);
	backdrop-filter: blur(14px);
	color: var(--hl-bone);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
	transform: translateY(140%);
	transition: transform 0.5s var(--hl-ease);
}
.hl-sticky-buy strong { display: block; font-size: 0.85rem; }
.hl-sticky-buy span { font-size: 0.78rem; color: var(--hl-muted); }
.hl-sticky-buy.is-visible { transform: none; }
@media (max-width: 960px) { .hl-sticky-buy { display: flex; } }

/* Innenseiten (Warenkorb, Kasse, Rechtliches) — dunkles Chrome, heller Inhalt */
body:not(.hl-landing) .wp-site-blocks > main { padding-top: clamp(32px, 5vw, 64px); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Sprachumschalter ----------------------------------------------------------- */
.hl-lang { display: flex; gap: 2px; margin-right: 4px; }
.hl-lang a {
	display: inline-grid;
	place-items: center;
	min-width: 32px;
	min-height: 32px;
	padding: 0 6px;
	border-radius: 3px;
	color: var(--hl-muted);
	font: 500 0.72rem/1 var(--hl-mono);
	letter-spacing: 0.1em;
	text-decoration: none;
}
.hl-lang a:hover { color: var(--hl-bone); }
.hl-lang a[aria-current="true"] { color: var(--hl-bone); box-shadow: inset 0 -1px 0 var(--hl-brass); }
@media (max-width: 420px) { .hl-lang a { min-width: 28px; padding: 0 3px; } }

/* Widerrufsbutton (§ 356a BGB: deutlich hervorgehoben, dauerhaft im Footer) */
.hl-footer__withdraw { margin: 24px 0 0; }
.hl-footer .hl-footer__withdraw .hl-btn { --_bd: var(--hl-bone-2); color: var(--hl-bone); text-decoration: none; }
.hl-footer .hl-footer__withdraw .hl-btn:hover { --_bd: var(--hl-brass); color: var(--hl-brass-2); }

/* Rechtstexte (Innenseiten, heller Inhaltsbereich) ---------------------------- */
.hl-legal { max-width: 760px; margin: 0 auto; line-height: 1.7; }
.hl-legal h2 { margin: 2.2em 0 0.6em; font-size: 1.25rem; font-stretch: 105%; text-transform: none; letter-spacing: 0; }
.hl-legal h3 { margin: 1.6em 0 0.4em; font-size: 1.05rem; text-transform: none; }
.hl-legal ul { padding-left: 1.2em; }
.hl-legal__note { padding: 12px 16px; border-left: 3px solid var(--wp--preset--color--accent, #d9a74d); background: rgba(217, 167, 77, 0.1); }
.hl-legal__stand { margin-top: 3em; color: var(--wp--preset--color--neutral, #6b7268); font-size: 0.85rem; }
.hl-legal .hl-btn--brass { color: #060907; text-decoration: none; }
mark.hl-missing { padding: 0 4px; border-radius: 2px; background: #ffe08a; color: #3d2c00; }

/* Kasse/Warenkorb: Produktliste der (dunklen) Bestellübersicht lesbar halten —
   WooCommerce setzt dort #eee als Hintergrund, die Schrift erbt aber die helle Panelfarbe. */
body .wc-block-components-order-summary.is-large,
body .wc-gzd-checkout .wc-block-components-order-summary,
body .wc-gzd-checkout .wc-block-components-order-summary.is-large,
body .wc-block-components-order-summary .wc-block-components-order-summary__content { background: transparent; }
body .wc-block-components-order-summary-item .wc-block-components-product-price,
body .wc-block-components-order-summary-item .wc-block-components-formatted-money-amount,
body .wc-block-components-order-summary-item__total-price,
body .wc-block-components-order-summary-item .wc-block-components-product-price__value { color: #f7f4ec; }
body .wc-block-components-order-summary-item del,
body .wc-block-components-order-summary-item .wc-block-components-product-price__regular { color: rgba(247, 244, 236, 0.6); }