/*
 * Site chrome: header and footer (0.2.1, rebuilt from Figma 453:3 desktop / 454:2753 mobile).
 *
 * Mobile composition by default (320-767px, 390px reference).
 *   --m  = fluid mobile px: gutters and spacing keep growing up to 767px.
 *   --ms = --m capped at 1.25px: fonts, icons and controls.
 * Desktop composition from 768px (1440px reference): calc(N * var(--d)), capped at N px,
 * so nothing scales past the 1440px design; extra width becomes outer margin.
 *
 * "inferred" = not readable from Figma styles (derived from frame geometry or not designed).
 */

/* ---- Brand ------------------------------------------------------------ */
/* Fixed box (Figma group size); the SVG is centred in it so its artwork can be a little taller. */
.site-brand {
	position: relative;
	display: block;
	width: var(--brand-w);
	aspect-ratio: var(--brand-ar);
	color: var(--color-text-brand);
	line-height: 0;
	text-decoration: none;
}

.site-brand picture {
	display: contents;
}

.site-brand__logo {
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 100%;
	height: auto;
	transform: translateY(-50%);
}

/* ---- Header (mobile) -------------------------------------------------- */
.site-header {
	position: relative;
	z-index: 50;
	padding-block: calc(24 * var(--ms)) calc(24.68 * var(--ms)); /* 66px frame: 24 above the 17.32 logo box */
	background: var(--color-bg);
}

.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

.site-header__brand {
	--brand-w: calc(140.44 * var(--ms));
	--brand-ar: 140.44 / 17.32;
	grid-column: 2;
	grid-row: 1;
}

/* Cart left. */
.site-header__tools {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	justify-self: start;
}

.site-header__tool {
	position: relative;
	display: block;
	line-height: 0;
}

/* 44px hit area, layout box keeps the Figma size. */
.site-header__tool::after,
.site-header__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

.site-header__tool--search {
	display: none; /* desktop only */
}

.site-header__icon {
	display: block;
	width: calc(16 * var(--ms));
	height: calc(16 * var(--ms));
}

/* Hit area of the burger ends at the viewport edge instead of overflowing it. */
.site-header__toggle::after {
	left: auto;
	right: calc(-1 * var(--gutter));
	transform: translateY(-50%);
}

/* Burger: Figma draws a "≡" text glyph; CSS bars match its measured ink (10.7 wide, 1.6 thick, 3.84 pitch). */
.site-header__toggle {
	position: relative;
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	width: calc(10.7 * var(--ms));
	height: calc(9.3 * var(--ms));
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-text-body);
	cursor: pointer;
}

.site-header__burger {
	position: absolute;
	inset: 0;
	display: block;
}

.site-header__burger i {
	position: absolute;
	left: 0;
	width: 100%;
	height: calc(1.6 * var(--ms));
	background: currentColor;
	transition: transform var(--transition), opacity var(--transition), top var(--transition);
}

.site-header__burger i:nth-child(1) { top: 0; }
.site-header__burger i:nth-child(2) { top: calc(3.85 * var(--ms)); }
.site-header__burger i:nth-child(3) { top: calc(7.7 * var(--ms)); }

.site-header__toggle[aria-expanded="true"] i:nth-child(1) {
	top: calc(3.85 * var(--ms));
	transform: rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] i:nth-child(2) {
	opacity: 0;
}

.site-header__toggle[aria-expanded="true"] i:nth-child(3) {
	top: calc(3.85 * var(--ms));
	transform: rotate(-45deg);
}

/* ---- Navigation: mobile drop-down panel (open state not in Figma: inferred, minimal) ---- */
.site-nav {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	display: none;
	padding: calc(8 * var(--ms)) var(--gutter) calc(16 * var(--ms));
	border-top: var(--border-soft);
	background: var(--color-bg);
	box-shadow: var(--shadow-soft);
}

.site-header.is-nav-open .site-nav {
	display: block;
}

.site-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	display: block;
	padding-block: 14px;
	border-bottom: var(--border-soft);
	color: var(--color-text-body);
	font-size: max(16px, calc(18 * var(--ms)));
	letter-spacing: var(--ls-tight);
	text-decoration: none;
}

.site-nav__list--end li:last-child a {
	border-bottom: 0;
}


/* ---- Shop submenu (mobile): accordion inside the burger panel. Open state not in Figma: inferred ---- */
.site-nav__list__item.has-submenu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: var(--border-soft);
}

.site-nav__list .has-submenu > a {
	flex: 1 1 auto;
	border-bottom: 0;
}

.site-nav__list--end .has-submenu:last-child {
	border-bottom: 0;
}

.site-nav__sub-toggle {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-text-body);
	cursor: pointer;
}

.site-nav .site-nav__sub-icon {
	display: block;
	transition: transform var(--transition);
}

.site-nav__sub-toggle[aria-expanded="true"] .site-nav__sub-icon {
	transform: rotate(180deg);
}

.site-nav__sub {
	display: none;
	flex: 0 0 100%;
	margin: 0;
	padding: 0 0 calc(8 * var(--ms)) calc(16 * var(--ms));
	list-style: none;
}

.has-submenu.is-open > .site-nav__sub {
	display: block;
}

.site-nav__list .site-nav__sub a {
	padding-block: 10px;
	border-bottom: 0;
	font-size: max(14px, calc(16 * var(--ms)));
	line-height: 1.1875; /* explicit (19px at 16px): the row height must not depend on the glyph font */
}

/* Leading arrow: part of the label's own text ("→ Label"), same font, size, line-height and baseline.
   Hidden with display:none when inactive; the explicit row line-height above keeps the row height identical in every state. */
.site-nav__sub-arrow {
	display: none;
}

.site-nav__sub__item.is-current .site-nav__sub-arrow,
.site-nav__sub a:hover .site-nav__sub-arrow,
.site-nav__sub a:focus-visible .site-nav__sub-arrow {
	display: inline;
}

/* Without JS the submenu is simply shown. */
.no-js .site-nav__sub {
	display: block;
}

.no-js .site-nav__sub-toggle {
	display: none;
}

/* Two classes: beats Elementor's `svg:not(:root) { display: inline }` without !important. */
.site-nav .site-nav__chevron {
	display: none; /* desktop only */
}

html.pt-nav-lock {
	overflow: hidden;
}

/* Without JS the panel cannot be toggled, so show it in the flow. */
.no-js .site-nav {
	position: static;
	display: block;
	box-shadow: none;
}

.no-js .site-header__toggle {
	display: none;
}

/* ---- Footer (mobile) -------------------------------------------------- */
.site-footer {
	margin-top: var(--section-gap);
	background: var(--color-surface-3);
	color: var(--color-text-brand);
	font-size: max(12px, calc(14 * var(--ms)));
	line-height: 1.21; /* Figma: normal */
	letter-spacing: var(--ls-tight);
}

.site-footer a {
	color: inherit;
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	opacity: var(--opacity-secondary);
}

.site-footer__main {
	display: grid;
	grid-template-columns: 181fr 169fr; /* nav x=0, legal x=181 in the 350px frame */
	align-items: start;
	padding: calc(24 * var(--ms)) var(--gutter) 0;
}

.site-footer__brand {
	--brand-w: calc(140.44 * var(--ms));
	--brand-ar: 140.44 / 17.32;
	grid-column: 1 / -1;
	margin-bottom: calc(24 * var(--ms));
}

.site-footer__nav {
	grid-column: 1;
	grid-row: 2 / span 2;
}

.site-footer__legal {
	grid-column: 2;
	grid-row: 2;
}

.site-footer__list {
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--ms));
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Social: exported tiles at their own size, nothing added around them. */
.site-footer__social {
	grid-column: 2;
	grid-row: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: calc(16 * var(--ms)) 0 0;
	padding: 0;
	list-style: none;
}

.site-footer__social a {
	display: block;
	line-height: 0;
}

.site-footer__icon {
	display: block;
	width: auto;
	height: calc(20 * var(--ms));
}

.site-footer__bar {
	margin: calc(16 * var(--ms)) var(--gutter) 0;
	padding: calc(16 * var(--ms)) 0 calc(30 * var(--ms)); /* bottom inferred from the clipped frame */
	border-top: 1px solid var(--color-muted);
}

.site-footer__copy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(16 * var(--ms));
	margin: 0;
}

.site-footer__dot {
	flex: none;
	width: calc(4 * var(--ms));
	height: calc(4 * var(--ms));
	border-radius: 50%;
	background: currentColor;
}

/* ======================================================================
 * Desktop composition: 768px and up (1440px reference, capped at 1440px)
 * ==================================================================== */
@media (min-width: 768px) {
	/* ---- Header: 120px frame = 32 + 56 logo + 32 ---- */
	.site-header {
		--nav-fs: max(14px, calc(20 * var(--d)));
		--nav-gap: max(16px, calc(72 * var(--d)));
		--icon: 24px;
		--icon-gap: max(12px, calc(24 * var(--d)));
		--tools-w: calc(2 * var(--icon) + var(--icon-gap));
		--end-inset: calc(11 * var(--d)); /* right nav ends 11px further in than the left starts (frame geometry) */
		--nav-top: calc(8 * var(--d)); /* nav row y=40, logo y=32 */

		padding-block: calc(32 * var(--d));
	}

	.site-header__inner {
		align-items: start;
	}

	.site-header__brand {
		--brand-w: max(170px, calc(275.1 * var(--d)));
		--brand-ar: 275.1 / 56;
	}

	.site-header__toggle {
		display: none;
	}

	/* Both nav lists become grid items either side of the logo. */
	.site-header .site-nav,
	.site-header.is-nav-open .site-nav {
		display: contents;
	}

	.site-nav__list {
		grid-row: 1;
		display: flex;
		align-items: center;
		gap: var(--nav-gap);
		padding-top: var(--nav-top);
		font-size: var(--nav-fs);
		line-height: var(--lh-body);
		white-space: nowrap;
	}

	.site-nav__list a {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		padding-block: 0;
		border-bottom: 0;
		font-size: inherit;
	}

	.site-nav__list a:hover,
	.site-nav__list a:focus-visible {
		color: var(--color-text-accent);
	}

	.site-nav .site-nav__chevron {
		display: block;
		flex: none;
	}

	.site-nav__list--start {
		grid-column: 1;
		justify-self: start;
	}

	.site-nav__list--end {
		grid-column: 3;
		justify-self: end;
		margin-inline-end: calc(var(--tools-w) + var(--nav-gap) + var(--end-inset));
	}

	.site-header__tools {
		grid-column: 3;
		justify-self: end;
		gap: var(--icon-gap);
		margin-inline-end: var(--end-inset);
		padding-top: calc(var(--nav-top) + 1px);
	}

	.site-header__tool--search {
		display: block;
	}

	.site-header__icon {
		width: var(--icon);
		height: var(--icon);
	}


	/* ---- Shop dropdown (Figma 453:908): overlay panel under the Shop item ---- */
	.site-nav__list__item.has-submenu {
		position: relative;
		display: flex;
		flex-wrap: nowrap;
		gap: 5px;
		border-bottom: 0;
	}

	.site-nav__list .has-submenu > a {
		flex: none;
	}

	/* 8 x 4 chevron, 24px hit area. */
	.site-nav__sub-toggle {
		width: 8px;
		height: 26px;
		margin-top: 0;
	}

	.site-nav__sub-toggle::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 24px;
		height: 24px;
		transform: translate(-50%, -50%);
	}

	.site-nav__sub {
		position: absolute;
		top: 100%;
		left: -16px; /* panel x=34 vs Shop x=50 */
		z-index: 60;
		display: block;
		flex: none;
		box-sizing: border-box;
		/* Sized by the longest item in its widest ("→ Label") state, via the hidden sizer below, so hover/focus never resizes it.
		   Capped to the viewport; an over-long label is clipped with an ellipsis instead of creating page overflow. */
		width: max-content;
		max-width: calc(100vw - 2 * var(--gutter));
		margin: 5px 0 0; /* panel y=71, nav row ends y=66 */
		padding: 20px 20px 20px 19px;
		border-radius: 24px;
		background: var(--color-bg);
		box-shadow: var(--shadow-card);
		visibility: hidden;
		opacity: 0;
		transition: opacity var(--transition), visibility var(--transition);
	}

	/* Keeps the pointer inside the item while crossing the 5px gap. */
	.site-nav__sub::before {
		content: "";
		position: absolute;
		inset: -5px 0 auto;
		height: 5px;
	}

	.has-submenu.is-open > .site-nav__sub {
		display: block;
		visibility: visible;
		opacity: 1;
	}

	.site-nav__sub__item {
		position: relative;
	}

	.site-nav__sub__item + .site-nav__sub__item {
		margin-top: 16px; /* 8 above and 8 below the 0.5px separator */
	}

	.site-nav__sub__item + .site-nav__sub__item::before {
		content: "";
		position: absolute;
		top: -8px;
		right: 0;
		left: 0;
		height: 0.5px;
		background: var(--color-text-body);
		opacity: var(--opacity-decor);
	}

	.site-nav__list .site-nav__sub a {
		display: block;
		padding-block: 0;
		font-size: max(14px, calc(16 * var(--d)));
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		line-height: 1.1875; /* 19px at 16px, as in Figma; independent of the arrow glyph's fallback font */
	}

	/* Zero-height, invisible copy of each label in its widest state ("→ Label"): contributes to the panel's max-content width only. */
	.site-nav__list .site-nav__sub a::after {
		content: "\2192\00a0" attr(data-label);
		display: block;
		height: 0;
		overflow: hidden;
		visibility: hidden;
		white-space: nowrap;
	}

	.site-nav__list .site-nav__sub a:hover,
	.site-nav__list .site-nav__sub a:focus-visible {
		color: var(--color-text-body);
	}

	.has-submenu.is-open .site-nav__sub-icon {
		transform: rotate(180deg);
	}

	/* No JS: open on keyboard focus only (hover never opens it). */
	.no-js .has-submenu:focus-within > .site-nav__sub {
		visibility: visible;
		opacity: 1;
	}

	.no-js .site-nav__sub-toggle {
		display: flex;
	}

	/* ---- Footer: 314px frame, 32 padding, 48 gap, 24 gap ---- */
	.site-footer {
		font-size: max(14px, calc(20 * var(--d)));
		line-height: var(--lh-body);
	}

	.site-footer__main {
		display: flex;
		align-items: flex-start;
		justify-content: space-between; /* 232px gaps at 1440 */
		gap: var(--space-5);
		padding: calc(32 * var(--d)) calc(39.57 * var(--d)) 0;

		/* Inner content stops at the 1440px composition and is centred; the footer background stays full width. */
		max-width: var(--composition);
		margin-inline: auto;
	}

	.site-footer__brand {
		--brand-w: max(180px, calc(334.9 * var(--d)));
		--brand-ar: 334.9 / 41.33;
		flex: none;
		margin-bottom: 0;
	}

	.site-footer__list {
		gap: calc(16 * var(--d));
	}

	/* 3 x 2 grid, 8px gaps; the second row sits in columns 2-3. */
	.site-footer__social {
		flex: none;
		justify-content: flex-end;
		width: calc(3 * 21px + 2 * 8px); /* icons render 21 x 20 (aspect kept) */
		margin: 0;
	}

	.site-footer__icon {
		height: 20px;
	}

	/* Divider runs edge to edge. */
	.site-footer__bar {
		margin: calc(48 * var(--d)) 0 0;
		padding: calc(24 * var(--d)) 0 calc(32 * var(--d));
		border-top-color: var(--color-border-strong);
	}

	.site-footer__copy {
		gap: max(20px, calc(60 * var(--d)));
	}

	.site-footer__dot {
		width: 8px;
		height: 8px;
	}
}