/* ============================================================
   Шапка сайта (десктоп) — макет «Главная_ПК», фрейм 1920px
   Все классы с префиксом hdr-, старые .header* не затрагиваются.
   Цвета/шрифты — переменные ниже.
   ============================================================ */
:root {
	--hdr-black: #000000;
	--hdr-white: #ffffff;
	--hdr-gold: #daaf76;
	--hdr-gray: #303131;
	--hdr-line: #efefee;
	--hdr-menu-bg: #ffffff; /* в макете --bel: #fff; кремовым казалось из-за цветового сдвига скриншота */
	--hdr-font: "Mulish", "Proxima Nova", Arial, sans-serif;
}

.site-header,
.site-header * {
	box-sizing: border-box;
}
.site-header {
	position: relative;
	z-index: 100;
	font-family: var(--hdr-font);
	box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.06);
	margin-bottom: 40px; /* как у старого .header-menu */
}
.site-header a {
	text-decoration: none;
}
.site-header ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-header li {
	margin: 0; /* общий стиль сайта задаёт li { margin-left: 20px } */
	padding: 0;
}

/* ---------- верхняя чёрная полоса ---------- */
.hdr-top {
	background: var(--hdr-black);
	padding: 19px 0;
}
.hdr-top__in,
.hdr-nav__in {
	width: min(1556px, calc(100% - 40px)); /* 1920 − 2×182 */
	margin: 0 auto;
	position: relative;
}
.hdr-top__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(12px, 1.5vw, 28px);
}

/* логотип */
.hdr-logo {
	display: flex;
	align-items: center;
	gap: 30px;
	flex-shrink: 0;
}
.hdr-logo__img {
	display: block;
	width: 189px;
	height: 51px;
}
.hdr-logo__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.hdr-logo__text {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 182px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
	color: var(--hdr-white);
}
.hdr-logo__domain {
	color: var(--hdr-gold);
	text-transform: uppercase;
}

/* вертикальные разделители */
.hdr-sep {
	flex-shrink: 0;
	width: 1px;
	height: 49px;
	background: var(--hdr-gray);
}

/* телефоны */
.hdr-phones {
	display: flex;
	align-items: flex-start;
	gap: clamp(16px, 2vw, 37px);
	flex-shrink: 1;
}
.hdr-phone {
	display: flex;
	align-items: flex-start;
	gap: 7px;
}
.hdr-phone:first-child {
	gap: 5px;
}
.hdr-phone__ico {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}
.hdr-phone__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.hdr-phone__main {
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.hdr-phone__city {
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	color: var(--hdr-white);
}
.hdr-phone__num {
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	color: var(--hdr-white);
	white-space: nowrap;
}
.hdr-phone__num:hover {
	color: var(--hdr-gold);
}
.hdr-msgs {
	display: flex;
	align-items: center;
	gap: 7px;
}
.hdr-msg {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
	border-radius: 100px;
	background: var(--hdr-gray);
	transition: background 0.2s;
}
.hdr-msg img {
	display: block;
	width: 14px;
	height: 14px;
}
.hdr-msg:hover {
	background: var(--hdr-gold);
}

/* поиск и корзина */
.hdr-tools {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2vw, 41px);
	flex-shrink: 1;
	min-width: 0;
}
.hdr-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 5px;
	width: 243px;
	min-width: 140px;
	padding: 11px 13px;
	border-radius: 50px;
	background: var(--hdr-gray);
}
.hdr-search__ico {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	opacity: 0.8;
}
.hdr-search input[type="text"] {
	flex: 1;
	min-width: 0;
	width: 100%;
	height: 18px;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: var(--hdr-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 18px;
	color: var(--hdr-white);
}
.hdr-search input[type="text"]::placeholder {
	color: var(--hdr-white);
	opacity: 0.8;
}
.hdr-search input[type="submit"] {
	position: absolute;
	right: 0;
	top: 0;
	width: 40px;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.hdr-cart {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}
.hdr-cart img {
	display: block;
	width: 40px;
	height: 40px;
}
.hdr-cart__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	padding: 7px 4px;
	border-radius: 100px;
	background: var(--hdr-gold);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--hdr-black);
}
.hdr-cart__badge:empty {
	display: none;
}

/* ---------- нижняя полоса: меню ---------- */
.hdr-nav {
	background: var(--hdr-menu-bg);
	border-bottom: 1px solid var(--hdr-line);
}
.hdr-nav__in {
	display: flex;
	align-items: center;
	gap: 32px;
}
.hdr-catalog {
	flex-shrink: 0;
	align-self: stretch;
	display: flex;
	align-items: center;
}
.hdr-catalog__btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 0;
	border-radius: 50px;
	background: var(--hdr-black);
	cursor: pointer;
	font-family: var(--hdr-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	text-transform: uppercase;
	color: var(--hdr-white);
	transition: background 0.2s, color 0.2s;
}
.hdr-catalog__btn img {
	display: block;
	width: 24px;
	height: 24px;
}
.hdr-catalog:hover .hdr-catalog__btn,
.hdr-catalog:focus-within .hdr-catalog__btn {
	background: var(--hdr-gray);
}

.hdr-nav__list {
	display: flex;
	align-items: stretch;
	flex: 1;
	min-width: 0;
}
.hdr-nav__list li {
	flex: 1;
	display: flex;
	border-left: 1px solid var(--hdr-line);
}
.hdr-nav__list li:last-child {
	border-right: 1px solid var(--hdr-line);
}
.hdr-nav__list a {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	padding: 10px 20px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	color: var(--hdr-black);
	transition: color 0.2s;
}
.hdr-nav__list a:hover {
	color: var(--hdr-gold);
}

/* ---------- выпадающее меню каталога (содержимое — из прежней шапки) ---------- */
.hdr-popup {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	padding: 24px 20px;
	background: #212121;
	z-index: 999;
}
.hdr-catalog:hover .hdr-popup,
.hdr-catalog:focus-within .hdr-popup {
	display: flex;
	flex-wrap: wrap;
}
.hdr-popup__col {
	width: 25%;
	padding-right: 20px;
}
.hdr-popup__title {
	margin-bottom: 15px;
	font-size: 18px;
	font-weight: 700;
	color: var(--hdr-white);
}
.hdr-popup li {
	margin: 10px 0;
}
.hdr-popup li a {
	color: var(--hdr-white);
}
.hdr-popup li a:hover {
	color: var(--hdr-gold);
}

/* ---------- ужимаем на узких десктопах ---------- */
@media (max-width: 1500px) {
	.hdr-logo { gap: 20px; }
	.hdr-logo__text { width: 150px; font-size: 12px; }
	.hdr-search { width: 200px; }
}
@media (max-width: 1360px) {
	.hdr-logo__text { display: none; }
	.hdr-nav__in { gap: 16px; }
	.hdr-nav__list a { padding: 10px 8px; font-size: 15px; }
}

.hdr-msg { color: #fff; }
.hdr-msg .msg-ico { display: block; width: 14px; height: 14px; }

/* поиск: активное состояние (фокус/ввод) — прозрачный фон, белая рамка */
.hdr-search { padding: 10px 12px; border: 1px solid transparent; transition: background 0.2s, border-color 0.2s; }
.hdr-search:focus-within { background: transparent; border-color: #fff; }
.hdr-search:focus-within .hdr-search__ico { opacity: 1; }
.hdr-search input[type="text"] { caret-color: #fff; }
.hdr-search:focus-within input[type="text"]::placeholder { opacity: 0.5; }

/* ============================================================
   Меню (макет «Выпадающее меню» + состояния кнопки/пунктов)
   ============================================================ */
.hdr-nav { position: relative; }
.hdr-nav .hdr-nav__in { position: static; }
.hdr-nav .hdr-catalog { position: static; }

/* кнопка «Каталог товаров»: чёрная → при наведении/открытом меню золотая */
.hdr-catalog__btn .hdr-burger { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.hdr-catalog:hover .hdr-catalog__btn,
.hdr-catalog:focus-within .hdr-catalog__btn {
	background: var(--hdr-gold);
	color: var(--hdr-black);
}

/* пункты меню: при наведении тёплая подложка и золотая линия снизу, текст остаётся чёрным */
.hdr-nav__list a { transition: background 0.2s, box-shadow 0.2s; }
.hdr-nav__list a:hover {
	color: var(--hdr-black);
	background: #fff8e6;
	box-shadow: inset 0 -3px 0 var(--hdr-gold);
}

/* выпадающее меню */
.hdr-nav .hdr-popup {
	display: none;
	left: 0;
	right: 0;
	top: 100%;
	width: 100%;
	padding: 60px 0 70px;
	background: linear-gradient(89.65deg, #fff 0%, rgba(255, 255, 255, .44) 100%), #fff;
	border: 1px solid var(--hdr-line);
	box-shadow: 0 4px 90px rgba(0, 0, 0, .1);
	overflow: hidden;
	z-index: 999;
}
.hdr-nav .hdr-catalog:hover .hdr-popup,
.hdr-nav .hdr-catalog:focus-within .hdr-popup { display: block; }
.hdr-popup__in {
	display: flex;
	align-items: stretch;
	gap: 42px;
	width: min(1556px, calc(100% - 40px));
	margin: 0 auto;
}
.hdr-popup__main {
	flex: 1 1 0;
	min-width: 0;
	max-width: 850px;
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding-bottom: 20px;
}
.hdr-popup__head { display: flex; flex-direction: column; gap: 20px; padding-bottom: 30px; border-bottom: 1px dashed #e2e2e2; }
.hdr-popup .hdr-popup__h { font-size: 37px; line-height: 1.2; font-weight: 700; text-transform: uppercase; color: var(--hdr-black); }
.hdr-popup .hdr-popup__lead { margin: 0; padding: 0; font-size: 16px; line-height: 22px; font-weight: 300; color: #666; }
.hdr-popup__cols { display: flex; gap: 40px; align-items: flex-start; }
.hdr-popup .hdr-popup__col { width: auto; padding: 0; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.hdr-popup .hdr-popup__title { margin: 0; font-size: 19px; line-height: 1.2; font-weight: 600; text-transform: uppercase; color: var(--hdr-black); }
.hdr-popup .hdr-popup__col ul { display: flex; flex-direction: column; gap: 0; align-self: stretch; }
.hdr-popup .hdr-popup__col li { margin: 0; padding: 0 0 7px; }
.hdr-popup .hdr-popup__col li + li { padding-top: 6px; border-top: 1px dashed #e2e2e2; }
.hdr-popup .hdr-popup__col li a { font-size: 16px; line-height: 22px; font-weight: 300; white-space: nowrap; color: #303131; }
.hdr-popup .hdr-popup__col li a:hover { color: #000; text-decoration: underline; }
.hdr-popup .hdr-popup__all { font-size: 16px; line-height: 22px; font-weight: 400; text-decoration: underline; color: var(--hdr-gold); }
.hdr-popup .hdr-popup__all:hover { text-decoration: none; }

/* баннер «Подберите ковер по фото интерьера» (фон-картинку заменим на макетную) */
.hdr-popup__promo {
	position: relative;
	flex: 0 1 646px;
	min-width: 420px;
	border-radius: 30px;
	overflow: hidden;
	background: #1d1a17 url("/themes/new2/img/menu/banner.jpg") center / cover no-repeat;
}
.hdr-popup__promo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(137.58deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, 0) 100%);
}
.hdr-popup__promo-in { position: absolute; left: 35px; top: 35px; width: 277px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hdr-popup__promo-line { display: block; align-self: stretch; height: 2px; background: var(--hdr-gold); }
.hdr-popup .hdr-popup__promo-title {
	width: 309px;
	font-family: "Philosopher", Georgia, serif;
	font-size: 35px;
	line-height: 36px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
}
.hdr-popup .hdr-popup__promo-btn {
	padding: 15px 25px;
	border-radius: 50px;
	background: var(--hdr-gold);
	font-size: 16px;
	line-height: 1.2;
	font-weight: 600;
	text-transform: uppercase;
	color: #000;
	transition: background 0.2s;
}
.hdr-popup .hdr-popup__promo-btn:hover { background: #e3bb85; color: #000; }

/* картинки меню из макета */
.hdr-nav .hdr-popup {
	background: linear-gradient(89.65deg, #fff 0%, rgba(255, 255, 255, .44) 100%), #fff url("/themes/new2/img/menu/fon-menu.png") center / cover no-repeat;
}
.hdr-popup__promo { background: #1d1a17 url("/themes/new2/img/menu/podbor-menu.png") center / cover no-repeat; }
/* линия над заголовком баннера: сначала короткая белая, дальше золотая */
.hdr-popup__promo-line { height: 2px; background: linear-gradient(90deg, #fff 0, #fff 88px, var(--hdr-gold) 88px, var(--hdr-gold) 100%); }

/* узкие десктопы / планшеты: шапка не должна вылезать за экран */
@media (max-width: 1100px) {
	.hdr-top__in { gap: 10px; }
	.hdr-search { width: 150px; min-width: 120px; }
	.hdr-nav__in { gap: 10px; }
	.hdr-nav__list a { padding: 10px 4px; font-size: 14px; }
	.hdr-catalog__btn { padding: 10px 14px; font-size: 14px; }
}

/* ---- ховеры (макет): кнопки .btn2 и карточки tryon-card ---- */
@media (hover: hover) {
	.btn2 { transition: background 0.2s, color 0.2s, border-color 0.2s; }
	/* чёрная кнопка → светлая с чёрной рамкой и чёрным текстом */
	.btn2:not(.white):hover { background: #fff; color: #000; border-color: #000; }
	/* светлая кнопка → чёрная */
	.btn2.white:hover { background: #000; color: #fff; border-color: #000; }
}