/* ================================================
  Common styles
================================================ */

body:not(.o2k-template) {
	.header,
	.footer {
		line-height: normal;

		a {
			&:not([class]):not(:hover):not(:active) {
				color: inherit;
			}
		}

		.button {
			display: inline-flex;
			padding: 8px 32px;
			border-radius: 100vmax;
			font-weight: 600;
			font-size: 14px;
			line-height: normal;
		}

		.button--secondary {
			color: var(--color-text-light);

			&:not(:hover) {
				background-color: var(--color-text-primary);
			}
		}

		.button--outline {
			background-color: transparent;

			&:not(:hover) {
				color: var(--color-primary);
				outline: 1px solid var(--color-primary);
			}

			&:hover {
				color: var(--color-text-primary);
				outline-color: var(--color-text-primary);
			}
		}
	}

	.dropdown-block {
		padding: 16px 24px;
	}

	.page__content {
		padding-block: calc(16px + clamp(0px, (100vw - 1000px) * .08, 16px));
	}
}

@media (hover: hover) and (pointer: fine) {
	body:not(.o2k-template) {
		.header,
		.footer {
			.button--outline:hover {
				outline: 1px solid var(--color-text-primary);
			}
		}
	}
}

/* ================================================
  Header styles
================================================ */

body:not(.o2k-template) {
	.header {
		width: min(100%, 1320px);
		max-width: initial;
		padding-block: 0;
    padding-inline: var(--size-padding);
    background-color: var(--color-background-primary);
		color: var(--color-text-primary);

		&::after {
			pointer-events: none;
		}
	}

	.header-top {
		padding-block: calc(8px + clamp(0px, (100vw - 1000px) * .08, 16px));
	}

	.header-catalog-opener {
		border-radius: 23px;
		font-size: 15px;
    line-height: 1.22;
		background-color: var(--catalog-opener-background-color, var(--color-text-primary));
    color: var(--color-text-light);

		&:hover {
			background-color: var(--color-accent);
		}
	}

	.header-search {
		border: 1px solid var(--color-line-primary);
	}

	.header-search__input {
		font-size: 14px;
    line-height: 28px;
	}

	.header-account-button.button {
		padding-inline: 16px;
	}

	.header-login__toggle.button {
    font-weight: 400;
	}

	.header-menu__item--marked,
	.header-menu__item--marked a:hover {
		color: var(--color-text-light);
	}

	.header-menu__item--marked a {
		padding-inline: 12px;
	}

	.header-link {
		text-decoration: underline;

		&:not(:hover):not(:active) {
			color: var(--color-primary);
		}
	}

	.header__catalog {
		padding: 40px var(--size-padding);
	}

	.catalog-category {
		padding-block: 10px;
	}

	.header-catalog__subtitle {
		margin-bottom: 12px;
	}

	.header-catalog__sublist-more {
		margin-top: 12px;
		font-size: 16px;
    line-height: 1;
	}

	.header-catalog__sub-scroll {
		padding: 0 19px 30px 0;
	}

	.header-catalog__item--sub--1:not(:has(.header-catalog__list)) {
    margin-bottom: 11px;
		color: var(--color-primary);
	}

	.header-catalog__item--sub--1 > a:not([class]):not(:hover):not(:active) {
		color: var(--color-primary);
	}

	.header-catalog__list--sub--2 {
    margin-block: 10px 13px;
	}

	.button.header-catalog__more {
		padding-inline: 10px;
	}
}

@media (max-width: 999.98px) {
	body:not(.o2k-template) {	
		.header-main {
				padding-block: 12px;
		}
	}
}

@media (min-width: 1000px) {
	body:not(.o2k-template) {	
		.header-main__search {
			margin-right: 20px;
		}
	}
}

/* ================================================
  Footer styles
================================================ */

body:not(.o2k-template) {
	.footer {
		display: grid;
		background-color: #e8eae8;
		max-width: initial;
		padding-block: calc(20px + clamp(0px, (100vw - 1000px) * .1, 20px));
		padding-inline: max(12px, (100vw - 1280px) / 2);
	}

	.footer__banner-image {
		max-width: 400px;
	}

	.footer-menu__name {
		display: flex;
	}

	.footer__contacts-wrapper {
		margin-bottom: 12px;
	}

	.footer__contacts-link {
		text-decoration: underline;

		&:not(:hover):not(:active) {
			color: var(--color-primary) !important;
		}
	}

	.footer-button {
		padding: 12px 16px;
	}

	.footer__agreement span {
		margin-inline: 12px;
	}

	.footer__disclaimer span:not(:last-child):after {
		margin-inline: 12px;
	}
}

@media (max-width: 999.98px) {
	body:not(.o2k-template) {
    .footer-menu:has(.footer-menu__checkbox:checked) .footer-menu__list {
			margin-top: 14px;
			padding-bottom: 10px;
		}
	}
}

@media (min-width: 1000px) {
	body:not(.o2k-template) {
		.footer__disclaimer {
			margin-right: 240px;
		}

		.footer-button {
			margin-bottom: 20px;
		}
	}
}

/* ================================================
  Mobile menu
================================================ */

body:not(.o2k-template) {
	.header-menu-mobile__top {
		padding: 20px 44px 18px 16px;
	}

	.header-menu-mobile__search {
		padding: 0 44px 0 16px;
	}

	.header-menu-mobile .header-search__input {
		font-size: 12px;
    padding-right: 16px;
	}

	.header-menu-mobile__box {		
		padding: 20px 24px 20px 16px;
		margin-bottom: 8px;
	}

	.header-menu-mobile__box-title {
		margin-bottom: 28px;

		&:not(:hover):not(:active) {
			color: var(--color-primary);
		}
	}

	.header-menu-mobile__box-title--alt {
		margin-bottom: 10px;
	}

	.header-menu-mobile__list {
		padding-right: 22px;
	}

	.header-menu-mobile__box li:not(:first-child) {
		margin-top: 20px;
	}

	.header-menu-mobile-brands {
		margin-left: -16px;
    margin-right: -24px;
	}

	.header-menu-mobile__box-area {
		padding: 0 20px;
	}

	.header-menu-mobile__socials {
		margin-top: 20px;

		li:not(:first-child) {
			margin-top: 0;
		}
	}

	.header-menu-mobile__social-link--telegram {
    color: var(--color-accent);
	}

	.header-menu-mobile__social-link--whatsApp {
    color: #8db982;
	}

	.header-menu-mobile__bottom {
    padding: 0 24px 0 16px;
    margin-top: 8px;
    margin-bottom: 10px;
	}

	.header-menu-mobile__bottom-link:not(:hover):not(:active) {
		color: var(--color-text-light);
	}

	.header-menu-sublist__top {
    margin-bottom: 35px;
	}

	.header-menu-sublist__item > ul {
    margin-top: 24px;
	}

	.header-menu-sublist__item-title:not(:hover):not(:active) {
		color: var(--color-primary);
	}

	.header-menu-sublist__show-more {
    margin-top: 20px;
		font-size: 16px;
    line-height: 100%;
	}
}

/* ================================================
  Auth dropdown
================================================ */

body:not(.o2k-template) {
	.header-login__dropdown {
		padding-inline: 25px;
    padding-top: 17px;
    padding-bottom: 25px;
	}

	.header-login__title {
    margin-bottom: 4px;
    font-weight: 700;
    font-size: 22px;
    line-height: 110%;
	}

	.header-login__subtitle {
		margin-bottom: 24px;
	}

	.header-login__list {
		margin-bottom: 35px;
	}

	.header-login__item:not(:last-child) {
    margin-bottom: 16px;
	}

	.header-login__btn.button {
		font-weight: 500;
    font-size: 13px;
    line-height: 18.4px;
	}

	.header-account__item--active {
		font-weight: 500;

		&:not(:hover) {
			color: var(--color-primary);
		}
	}
}

/* ================================================
  Breadcrumbs
================================================ */

body:not(.o2k-template) {
	.breadcrumbs {
		padding-bottom: 0;
		font-weight: 400;
		font-size: 16px;
		line-height: 1.4;

		a {
			color: #2b2e3c;

			&:hover {
				color: #024dbc;
			}
		}
	}

	.breadcrumbs__list {
		padding-bottom: 16px;
	}

	.breadcrumbs__item:not(:last-child):after {
    margin-inline: 4px;
	}
}

@media (max-width: 999.98px) {
	body:not(.o2k-template) {
		.breadcrumbs {
			font-size: 12px;
		}
	}
}