/* =========================================================================
   Global Figma shell: shared header, two-level mobile menu and footer.
   Geometry follows frames Header Desk, Header mob, Menu screen and Footer.
   ========================================================================= */

body { overflow-x: hidden; }

.at-header-shell {
	position: relative;
	z-index: 80;
	width: 100%;
	background: var(--at-bg);
	color: var(--at-accent-dark);
}
.home .at-header-shell {
	position: absolute;
	top: 0;
	left: 0;
	background: transparent;
	color: var(--at-bg);
}
.at-header {
	position: relative;
	height: 160px;
	border-bottom: 1px solid rgba(103, 50, 27, .18);
	background: transparent;
}
.home .at-header { border-bottom-color: rgba(238, 240, 242, .3); }

.at-header__desktop-top { position: relative; height: 80px; }
.at-header__wordmark {
	position: absolute;
	top: 23px;
	left: 60px;
	width: auto;
	height: auto;
	background: none;
	color: currentColor;
	font: italic 700 24px/1 Georgia, 'Times New Roman', serif;
}
.at-header__wordmark:hover { color: currentColor; text-decoration: none; }

.at-fig-logo {
	display: block;
	flex: none;
	background: currentColor;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}
.at-fig-logo--head {
	position: absolute;
	top: 11px;
	left: 50%;
	width: 111px;
	height: 53px;
	transform: translateX(-50%);
	-webkit-mask-image: url('../img/figma/logo-head-mask.png');
	mask-image: url('../img/figma/logo-head-mask.png');
}
.home .at-fig-logo--head { background: var(--at-bg); color: var(--at-bg); }
.at-fig-logo--footer {
	width: 291px;
	height: 73px;
	-webkit-mask-image: url('../img/figma/logo-footer-mask.png');
	mask-image: url('../img/figma/logo-footer-mask.png');
}

.at-header__tools {
	position: absolute;
	top: 25px;
	right: 60px;
	display: flex;
	align-items: center;
	gap: 30px;
}
.at-header__icon {
	position: relative;
	display: grid;
	width: 24px;
	height: 24px;
	place-items: center;
	color: currentColor;
}
.at-header__icon:hover { color: var(--at-accent); text-decoration: none; }
.at-header__icon .at-ico { width: 22px; height: 22px; }
.at-header__icon.at-tool--cart .at-badge {
	position: absolute;
	top: -14px;
	left: 9px;
	min-width: 14px;
	height: 14px;
	padding: 0 3px;
	background: currentColor;
	color: var(--at-ink);
	font-size: 9px;
}
.at-header__icon.at-tool--cart .at-badge[hidden] { display: none !important; }

.at-header__desktop-nav {
	display: flex;
	width: min(1200px, calc(100% - 80px));
	height: 80px;
	align-items: flex-start;
	justify-content: space-between;
	margin-inline: auto;
	padding-top: 20px;
}
.at-header__desktop-nav a {
	color: currentColor;
	font-family: var(--at-font-ui);
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}
.at-header__desktop-nav a:hover { color: var(--at-accent); text-decoration: none; }
.at-header__mobile,
.at-mobile-menu { display: none; }

/* ============================= mobile menu ============================= */
.at-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 200;
	overflow: hidden auto;
	background: var(--at-bg);
	color: var(--at-accent-dark);
}
.at-mobile-menu.is-open { display: block; }
.at-mobile-menu__panel {
	position: relative;
	display: none;
	width: 100%;
	min-height: max(737px, 100dvh);
	padding: 24px 12px 24px;
}
.at-mobile-menu__panel.is-active { display: block; }
.at-mobile-menu__close {
	position: absolute;
	top: 24px;
	right: 12px;
	display: grid;
	width: 26px;
	height: 26px;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--at-accent-dark);
	cursor: pointer;
}
.at-mobile-menu__close .at-ico { width: 26px; height: 26px; stroke-width: 1.7; }
.at-mobile-menu ul { margin: 0; padding: 0; list-style: none; }
.at-mobile-menu__main { display: grid; gap: 20px; padding-top: 0; }
.at-mobile-menu__main a,
.at-mobile-menu__main button {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	min-height: 27px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--at-accent-dark);
	font: 600 20px/1.35 var(--at-font-ui);
	cursor: pointer;
}
.at-mobile-menu__main svg,
.at-mobile-menu__back svg { width: 18px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.at-mobile-menu__back {
	display: inline-flex;
	align-items: center;
	gap: 0;
	min-height: 28px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--at-accent);
	font: 600 20px/1.35 var(--at-font-ui);
	cursor: pointer;
}
.at-mobile-menu__back svg { display: none; }
.at-mobile-menu__sub { display: grid; gap: 8px; margin-top: 16px !important; }
.at-mobile-menu__sub a { color: var(--at-ink); font: 600 14px/1.35 var(--at-font-ui); }
.at-mobile-menu a:hover { color: var(--at-accent); text-decoration: none; }

.at-mobile-menu__contact {
	position: absolute;
	right: 12px;
	bottom: 24px;
	left: 12px;
	padding-top: 22px;
	border-top: 1px solid rgba(103, 50, 27, .3);
}
.at-mobile-menu__contact::before {
	content: '';
	position: absolute;
	top: -85px;
	right: 0;
	left: 0;
	border-top: 1px solid rgba(103, 50, 27, .3);
}
.at-socials { display: flex; align-items: center; gap: 14px; }
.at-socials a { display: block; width: 40px; height: 40px; }
.at-socials img { display: block; width: 40px; height: 40px; }
.at-mobile-menu .at-socials { position: absolute; bottom: 130px; gap: 14px; }
.at-mobile-menu .at-socials img {
	filter: brightness(0) saturate(100%) invert(38%) sepia(55%) saturate(1310%) hue-rotate(142deg) brightness(87%) contrast(101%);
}
.at-mobile-menu__phone,
.at-mobile-menu__email {
	display: flex;
	align-items: center;
	gap: 18px;
	color: var(--at-accent-dark);
	font: 600 20px/1.35 var(--at-font-ui);
}
.at-mobile-menu__phone { margin-bottom: 14px; }
.at-mobile-menu__phone .at-ico { width: 24px; height: 24px; color: var(--at-support); }
.at-mobile-menu__email > :first-child { width: 24px; color: var(--at-support); font-size: 24px; line-height: 1; }
body.at-menu-open { overflow: hidden; }

/* ================================ footer =============================== */
.at-footer {
	position: relative;
	padding: 0;
	background: var(--at-accent-dark);
	color: var(--at-bg);
}
.at-footer a { color: inherit; }
.at-footer a:hover { color: var(--at-accent); text-decoration: none; }
.at-footer__inner {
	position: relative;
	width: min(1200px, calc(100% - 80px));
	min-height: 595px;
	margin-inline: auto;
	padding-top: 52px;
}
.at-footer__brand { position: absolute; top: 52px; left: 0; }
.at-footer__support { position: absolute; top: 52px; left: 404px; width: 330px; }
.at-footer__follow { position: absolute; top: 52px; left: 808px; width: 392px; }
.at-footer h2 {
	margin: 0;
	color: inherit;
	font: 600 14px/1 var(--at-font-ui);
	letter-spacing: .03em;
	text-transform: uppercase;
}
.at-footer__support > a {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 19px;
	font: 400 14px/1 var(--at-font-ui);
}
.at-footer__support > a .at-ico { width: 24px; height: 24px; }
.at-footer__support > a small { margin-left: 6px; font-size: 14px; }
.at-footer__support > p { display: flex; gap: 32px; margin-top: 16px; }
.at-footer__support > p a { display: flex; align-items: center; gap: 8px; font: 400 14px/1 var(--at-font-ui); }
.at-footer__support img { width: 24px; height: 24px; }
.at-footer__follow > p { margin-top: 16px; font: 400 14px/1 var(--at-font-ui); }
.at-footer__follow .at-socials { margin-top: 24px; }

.at-footer__primary-contact {
	position: absolute;
	top: 195px;
	right: 0;
	left: 0;
	display: grid;
	grid-template-columns: 391px 380px;
	gap: 15px;
	padding-top: 31px;
	border-top: 1px solid rgba(238, 240, 242, .3);
}
.at-footer__primary-contact div { display: flex; flex-direction: column; gap: 9px; }
.at-footer__primary-contact a { font: 600 25px/1 var(--at-font-ui); }
.at-footer__primary-contact span { font: 400 14px/1.35 var(--at-font-ui); opacity: .85; }

.at-footer__nav {
	position: absolute;
	top: 322px;
	right: 0;
	left: 0;
	display: grid;
	grid-template-columns: 170px 200px 170px 200px 170px 250px;
	gap: 15px;
	padding-top: 35px;
	border-top: 1px solid rgba(238, 240, 242, .3);
}
.at-footer__nav div { display: flex; flex-direction: column; gap: 14px; }
.at-footer__nav a { font: 400 14px/1 var(--at-font-ui); opacity: .82; white-space: nowrap; }
.at-footer__copyright {
	position: absolute;
	top: 488px;
	right: 0;
	left: 0;
	margin: 0;
	padding-top: 39px;
	border-top: 1px solid rgba(238, 240, 242, .3);
	font: 400 14px/1.35 var(--at-font-ui);
	text-align: center;
}

@media (max-width: 767px) {
	.at-header__wordmark { background: var(--at-accent); color: var(--at-accent); }
	.home .at-fig-logo--head { background: var(--at-accent-dark); color: var(--at-accent-dark); }
	.at-header-shell,
	.home .at-header-shell { position: relative; background: var(--at-bg); color: var(--at-accent-dark); }
	.at-header { height: 60px; border-bottom-color: rgba(103, 50, 27, .3); }
	.at-header__desktop-top,
	.at-header__desktop-nav { display: none; }
	.at-header__mobile {
		display: grid;
		grid-template-columns: 26px 22px 1fr 22px 24px;
		align-items: center;
		gap: 28px;
		height: 60px;
		padding-inline: 12px;
	}
	.at-header__mobile .at-burger {
		display: grid;
		width: 26px;
		height: 22px;
		place-items: center;
		padding: 0;
		border: 0;
		background: none;
		color: currentColor;
	}
	.at-header__mobile .at-burger .at-ico { width: 26px; height: 22px; }
	.at-header__mobile .at-fig-logo--head { position: static; width: 77px; height: 37px; transform: none; justify-self: center; }
	.at-header__mobile .at-header__icon { width: 22px; height: 22px; }
	.at-header__mobile .at-header__icon:last-child { width: 24px; }
	.at-header__mobile .at-header__icon.at-tool--cart .at-badge { top: -13px; left: 7px; }

	.at-footer__inner {
		width: 100%;
		min-height: 1080px;
		padding: 26px 12px 0;
	}
	.at-footer__brand,
	.at-footer__support,
	.at-footer__follow,
	.at-footer__primary-contact,
	.at-footer__nav,
	.at-footer__copyright { position: absolute; right: 12px; left: 12px; width: auto; }
	.at-footer__brand { top: 26px; }
	.at-fig-logo--footer { width: 209px; height: 52px; }
	.at-footer__primary-contact {
		top: 100px;
		display: grid;
		grid-template-columns: 1fr;
		gap: 22px;
		padding: 0;
		border: 0;
	}
	.at-footer__primary-contact a { font-size: 25px; }
	.at-footer__support { top: 291px; padding-top: 29px; border-top: 1px solid rgba(238, 240, 242, .3); }
	.at-footer__support > a { justify-content: space-between; }
	.at-footer__support > a small { margin-left: auto; }
	.at-footer__nav {
		top: 457px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 22px;
		padding-top: 29px;
	}
	.at-footer__nav div { gap: 12px; }
	.at-footer__nav-spacer h2 { visibility: hidden; }
	.at-footer__nav > div:nth-child(3), .at-footer__nav > div:nth-child(4) { margin-top: 38px; }
	.at-footer__nav > div:nth-child(5), .at-footer__nav > div:nth-child(6) { margin-top: 38px; }
	.at-footer__follow { top: 808px; padding-top: 29px; border-top: 1px solid rgba(238, 240, 242, .3); }
	.at-footer__follow .at-socials { margin-top: 20px; }
	.at-footer__copyright {
		top: 978px;
		padding-top: 29px;
		font-size: 14px;
		text-align: left;
	}
	.at-footer { margin-top: 41px; }
}

@media (min-width: 768px) and (max-width: 1350px) {
	.at-header__wordmark { left: 28px; }
	.at-header__tools { right: 28px; }
	.at-header__desktop-nav { width: calc(100% - 80px); }
	.at-header__desktop-nav a { font-size: 16px; }
	.at-footer__inner { transform-origin: top left; }
}