.header
{
	--banner-h: clamp(240px, 70vw, 360px);
	position: relative;
	height: calc(139px + var(--banner-h));
	background: var(--chernyy);
	z-index: 10;
	top: 0;
	margin-bottom: 20px;
}

.header--desktop { display: none; }

.header--filter
{
	padding: 15px;
	height: 54px;
	box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.07);
	background: var(--belyy);
	position: fixed;
	width: 100%;
	left: 0;
	right: 0;
	display: flex;
	gap: 10px;
	align-items: center;
}

.header__catalog
{
	display: none;
	background: var(--belyy);
	padding: 20px 0;
}

.header__back-arrow { width: 8px; }

.header__back
{
	display: flex;
	gap: 5px;
	align-items: center;
}

.header__back-link
{
	font-weight: 600;
	font-size: 20px;
	line-height: 120%;
	text-transform: uppercase;
	color: var(--chernyy);
}

.header__filter-count
{
	background: var(--temno-belyy);
	padding-inline: 5.5px;
	aspect-ratio: 1/1;
	text-align: center;
	font-weight: 500;
	font-size: 15px;
	line-height: 140%;
	color: var(--chernyy);
	margin-left: 5px;
}

.header__wrapper
{
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 30px 0 15px;
	padding-inline: 15px;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.header__logo
{
	max-width: 51px;
	margin: 0 auto;
	margin-bottom: 15px;
	z-index: 2;
}

.header__search
{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0;
	height: 47px;
	z-index: 2;
}

.header__catalog-btn
{
	height: 100%;
	width: 46px;
	flex-shrink: 0;
	background: var(--krasnyy);
}

.header__catalog-icon
{
	padding: 0;
	margin: 0 auto;
	max-width: 20px;
}

.header__search-row
{
	height: 100%;
	min-width: 0;
	flex: 1;
	background: var(--svetlo-chernyy);
	padding: 13px 15px;
	font-weight: 500;
	font-size: 15px;
	line-height: 21px;
	color: var(--belyy);
}

.header__search-row::placeholder
{
	color: var(--seryy);
	opacity: 1;
}

.header__login-btn
{
	margin: auto 0 10px;
	background: var(--chernyy);
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 10px;
	min-height: 48px;
	max-width: max-content;
	z-index: 2;
}

.header__login-icon { max-width: 22px; }

.header__login-label
{
	font-weight: 500;
	font-size: 15px;
	line-height: 21px;
	color: var(--belyy);
}

.header__slider
{
	background-color: rgba(128, 128, 128, 0.566);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--banner-h);
	padding-inline: 0;
	z-index: 1;
}

.header__slider-swiper
{
	width: 100%;
	height: 100%;
}

.header__slider .swiper-pagination
{
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: 15px !important;
	display: flex;
	gap: 5px;
	max-width: 60px;
	z-index: 2;
}

.header__slider .swiper-pagination-bullet
{
	width: 10px;
	height: 2px;
	background: var(--chernyy);
	border-radius: 5px;
	opacity: 1 !important;
	margin: 0 !important;
	transition: width 0.3s ease;
}

.header__slider .swiper-pagination-bullet-active { width: 30px; }
@media (min-width: 768px)
{
	.header
	{
		height: 300px;
		margin-bottom: 30px;
	}

	.header__overlay
	{
		display: none;
		position: fixed;
		top: 110px;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.21);
		z-index: 90;
	}

	.header__catalog
	{
		display: none;
		position: fixed;
		top: 110px;
		padding: 20px 0;
		width: 100%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 110;
	}
}
@media (min-width: 1200px)
{
	.header
	{
		height: auto;
		margin-bottom: 45px;
	}

	.header--desktop { display: block; }

	.header--mobile { display: none; }

	.header__top { background: var(--chernyy); }

	.header__top-wrapper
	{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 40px;
		padding: 30px 80px;
		height: 115px;
	}

	.header__logo
	{
		flex-shrink: 0;
		max-width: max-content;
		margin: 0;
	}

	.header__logo img { height: 54px; }

	/* Figma "Header": search fills the row between the logo and the links */
	.header__top-wrapper .search { max-width: none; }

	.header__links
	{
		display: flex;
		align-items: center;
		gap: 30px;
	}

	.header__navigation-link
	{
		font-weight: 500;
		font-size: 18px;
		line-height: 140%;
		color: var(--svetlo-seryy);
		white-space: nowrap;
		border-bottom: 2px solid transparent;
	}

	.header__navigation-link:hover,
	.header__navigation-link.is-current { border-bottom-color: var(--belyy); }

	.header__pages
	{
		display: flex;
		align-items: center;
		gap: 40px;
	}

	.header__pages-item
	{
		width: 26px;
		position: relative;
	}

	.header__pages-count,
	.header__pages-fav-count
	{
		border-radius: 11px;
		width: 32px;
		height: 21px;
		font-weight: 500;
		font-size: 18px;
		line-height: 140%;
		text-align: center;
		color: var(--chernyy);
		background: var(--belyy);
		position: absolute;
		top: -10px;
		left: 18px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.header__pages-fav-count[hidden] { display: none; }

	.header__bottom { background: var(--temno-belyy); }

	.header__bottom-wrapper
	{
		display: flex;
		justify-content: center;
		gap: clamp(30px, 5.2vw, 100px);
		padding: 20px clamp(16px, 4vw, 80px);
		height: 65px;
	}

	.header__bottom-link
	{
		font-weight: 500;
		font-size: clamp(12px, 1.2vw, 18px);
		line-height: 140%;
		color: var(--chernyy);
		white-space: nowrap;
	}

	.header__overlay { top: 180px; }

	.header__catalog
	{
		top: 180px;
		padding: 45px 0;
	}

	.header__search { gap: 0px; }
}
@media (min-width: 1600px)
{
	.header__top-wrapper { gap: 60px; }

	.header__bottom-wrapper { gap: clamp(30px, 5.2vw, 100px); }

	.header__pages { gap: 60px; }
}
/* Inner pages header (Figma "Header" 393x77: white bar, burger 46x47, search #f4f4f4) */
.header--inner
{
	height: 77px;
	margin-bottom: 40px;
	background: var(--belyy);
	box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.07);
}

.header--inner .header__wrapper
{
	position: static;
	height: auto;
	padding: 15px;
}

.header--inner .header__logo,
.header--inner .header__slider,
.header--inner .header__login-btn { display: none; }

.header--inner .header__search { gap: 5px; }

.header--inner .header__catalog-btn { background: var(--chernyy); }

.header--inner .header__search-row
{
	background: var(--svetlo-seryy);
	color: var(--chernyy);
}

/* Mobile menu drawer (Figma "М. Меню": 286px panel, 64px rows, 2 buttons) */
.mobile-menu__overlay
{
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.21);
	z-index: 100;
}

.mobile-menu__overlay.is-open { display: block; }

.mobile-menu
{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 110;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: min(286px, calc(100vw - 60px));
	padding: 80px 15px;
	overflow-y: auto;
	background: var(--belyy);
	box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.07);
	transform: translateX(-105%);
	visibility: hidden;
	transition: transform 0.25s ease, visibility 0.25s;
}

.mobile-menu.is-open
{
	transform: none;
	visibility: visible;
}

.mobile-menu__head
{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.mobile-menu__title
{
	font-weight: 600;
	font-size: 20px;
	line-height: 120%;
	text-transform: uppercase;
	color: var(--chernyy);
}

.mobile-menu__close
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: -12px -17px 0 0;
}

.mobile-menu__close img
{
	width: 14px;
	height: 14px;
}

.mobile-menu__nav
{
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
}

.mobile-menu__link
{
	display: flex;
	align-items: center;
	min-height: 64px;
	font-weight: 700;
	font-size: 16px;
	line-height: 150%;
	color: var(--chernyy);
}

.mobile-menu__buttons
{
	display: flex;
	gap: 5px;
}

.mobile-menu__btn
{
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-height: 51px;
	padding: 15px;
	font-weight: 500;
	font-size: 15px;
	line-height: 21px;
}

.mobile-menu__btn--light
{
	background: var(--svetlo-seryy);
	color: var(--chernyy);
}

.mobile-menu__btn--red
{
	background: var(--krasnyy);
	color: var(--belyy);
}

@media (min-width: 1200px)
{
	.mobile-menu,
	.mobile-menu__overlay { display: none !important; }
}

/* Tablet 768-1199px: no Figma frame, derived from mobile + desktop.
   Compact dark bar on the home page (the desktop hero grid below replaces the banner),
   header content aligned to the 968px content column. */
@media (min-width: 768px) and (max-width: 1199px)
{
	.header:not(.header--inner)
	{
		--banner-h: 0px;
		height: 139px;
		margin-bottom: 30px;
	}

	.header .header__slider,
	.header .header__login-btn { display: none; }

	.header__wrapper
	{
		max-width: 968px;
		padding-inline: 40px;
	}

	.header--inner .header__wrapper { padding: 15px 40px; }
}

/* Back button on account sub-pages (Figma: #f4f4f4 square with a dark chevron) */
.header__back-btn
{
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--svetlo-seryy) !important;
}

.header__back-btn img
{
	width: 8px;
	height: 14px;
}

/* ---- Cart / checkout desktop header (Figma "Корзина", "Оплата"): 115px, back link, city, centred logo, phones ---- */
.header--checkout {
    display: none;
}

@media (min-width: 1200px) {
    .header--checkout {
        display: block;
        background: var(--chernyy);
    }

    .header-checkout {
        position: relative;
        display: flex;
        align-items: center;
        gap: 50px;
        height: 115px;
        font: 500 18px/140% var(--font-family);
        color: var(--svetlo-seryy);
    }

    .header-checkout a {
        color: inherit;
        text-decoration: none;
    }

    .header-checkout__back {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 15px 25px;
        background: #332d2e;
        white-space: nowrap;
    }

    .header-checkout__back-icon {
        width: 30px;
        height: 22px;
    }

    .header-checkout__city {
        display: flex;
        align-items: center;
        gap: 10px;
        white-space: nowrap;
    }

    .header-checkout__city-icon {
        width: 20px;
        height: 25px;
    }

    .header-checkout__logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .header-checkout__logo img {
        height: 54px;
        width: auto;
    }

    .header-checkout__phones {
        display: flex;
        gap: 50px;
        margin-left: auto;
        white-space: nowrap;
    }
}