/* Шапка страницы корзины /cart (cart_page_header.twig), подключается только там.
 * Белая полоса - правила белой полосы темы (.header-inner, .logo, .top-menu): та же высота, ширина, логотип.
 * Темная полоса - фон темы (.menu-inner), цвет текста - настройка темы "цвет текста меню" (--cph-fg).
 * Без своих скруглений и теней. Телефон и планшет (до 992px) - шапка темы как на других страницах. */

.cph {
	display: none;
}

@media (min-width: 992px) {
	/* Полосы темы: остаются в разметке (mango.js нужен #menu), но не видны */
	body > #top,
	body > header.header,
	body > #menu {
		display: none !important;
	}

	/* Обе полосы закреплены при прокрутке */
	.cph {
		display: block;
		position: sticky;
		top: 0;
		z-index: 100;
		background: #fff;
	}

	/* Белая полоса: высота и ширина - из .header-inner темы; колонка логотипа - как .header-logo темы */
	/* Не сжимается: по ней же выровнена темная полоса ("Каталог", начало поиска) */
	.cph .cph-logo-col {
		flex: 0 0 24%;
		width: 24%;
	}

	/* Блок после логотипа в одной рамке: "Ваши корзины" | "Плательщик" - заглушки (выбора пока нет).
	 * Цвета - с макета */
	.cph .cph-box {
		display: flex;
		flex: 0 1 auto;
		min-width: 0;
		border: 1px solid #dde4ea;
		background: #f7f9fa;
		line-height: 1.3;
	}

	.cph .cph-box-part {
		min-width: 0;
		max-width: 240px;
		padding: 5px 14px;
	}

	.cph .cph-box-part + .cph-box-part {
		border-left: 1px solid #e3e8ec;
	}

	.cph .cph-box-label {
		font-size: 10px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		color: #8a96a0;
	}

	.cph .cph-box-value {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 700;
	}

	.cph .cph-box-value.cph-muted {
		font-weight: 400;
		color: #8a96a0;
	}

	.cph .cph-box-arrow {
		margin-left: 8px;
		font-weight: 400;
		color: #7d8b96;
	}

	.cph .cph-links {
		margin-left: auto;
		flex: 0 0 auto;
	}

	.cph .cph-links .list-inline {
		margin: 0;
	}

	/* Как .top-menu-list li темы */
	.cph .cph-links li {
		padding: 0 10px;
	}

	/* Заглушки "Корзины", "Документы": не ссылки, серым, подсказка "Скоро" */
	.cph .cph-stub {
		color: #8a96a0;
		cursor: default;
	}

	/* Число в сером кружке ("Заказы 2"), цвета - с макета */
	.cph .cph-badge {
		display: inline-block;
		min-width: 18px;
		height: 18px;
		margin-left: 6px;
		padding: 0 5px;
		border-radius: 9px;
		background: #e8eef3;
		color: #525363;
		font-size: 11px;
		font-weight: 400;
		line-height: 18px;
		text-align: center;
		vertical-align: middle;
	}

	/* Покупатель: значок как у "Кабинета" темы (.top-menu-list i), имя или "Войти", под ним мелко телефон */
	.cph .cph-user {
		display: flex;
		align-items: center;
		flex: 0 0 auto;
		padding-left: 20px;
		border-left: 1px solid #dde4ea;
	}

	.cph .cph-user > i {
		font-size: 24px;
		margin-right: 10px;
	}

	/* Вошедший покупатель: темный кружок с инициалами (цвет - с макета) */
	.cph .cph-avatar {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 32px;
		width: 32px;
		height: 32px;
		margin-right: 10px;
		border-radius: 50%;
		background: #2c3a45;
		color: #fff;
		font-size: 12px;
		font-weight: 700;
		line-height: 1;
	}

	.cph .cph-user-lines {
		display: flex;
		flex-direction: column;
		line-height: 1.3;
	}

	.cph .cph-phone {
		font-size: 12px;
		color: #8a96a0;
		white-space: nowrap;
	}

	.cph .cph-phone:hover,
	.cph .cph-phone:focus {
		color: #8a96a0;
		text-decoration: underline;
	}

	/* Темная полоса - по сетке белой полосы темы: там .header-inner.row (ширина контейнера), колонка
	 * логотипа с отступом 15px (промежуток после clearfix-элемента row) и шириной 24%.
	 * Здесь так же: "Каталог" - в колонке логотипа, поиск - от ее правого края, корзина - у края, как ссылки */
	.cph .cph-dark-inner {
		position: relative;
		display: flex;
		align-items: center;
		height: 46px;
	}

	/* Clearfix row Bootstrap во flex не нужен: отступ колонки задан явно */
	.cph .cph-dark-inner::before,
	.cph .cph-dark-inner::after {
		display: none;
	}

	.cph .cph-catalog {
		position: static;
		flex: 0 0 24%;
		margin-left: 15px;
		min-width: 0;
	}

	.cph .cph-catalog-btn,
	.cph .cph-cart {
		display: flex;
		align-items: center;
		height: 32px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--cph-fg, #fff);
		font-weight: 400;
		white-space: nowrap;
		opacity: 0.9;
	}

	.cph .cph-catalog-btn .fa-bars {
		margin-right: 10px;
		font-size: 16px;
	}

	/* Корзина - просто текст (страница корзины уже открыта): без наведения, курсор обычный */
	.cph .cph-cart {
		flex: 0 0 auto;
		margin-left: 30px;
		margin-right: 15px;
		opacity: 1;
		cursor: default;
	}

	.cph .cph-cart .fa-shopping-cart {
		margin-right: 8px;
		font-size: 16px;
	}

	/* Наведение: без заливки и подчеркивания, только чуть светлее текст */
	.cph .cph-catalog-btn:hover,
	.cph .cph-catalog-btn:focus,
	.cph .cph-catalog.open .cph-catalog-btn {
		color: var(--cph-fg, #fff);
		background: transparent;
		text-decoration: none;
		opacity: 1;
	}

	/* Меню категорий темы - на всю ширину полосы, сразу под ней */
	.cph .category-menu .dropdown-menu.menu-content {
		top: 100%;
		left: 0;
		width: 100%;
	}

	/* Поиск: поле на всю свободную ширину, светлое с легким градиентом, лупа внутри справа */
	.cph .cph-search {
		position: relative;
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
	}

	.cph .cph-search-input {
		height: 32px;
		padding-right: 40px;
		/* Как на макете: сверху серее, к низу светлее */
		background-color: #eef2f4;
		background-image: linear-gradient(to bottom, #d5dee2, #f4f7f8);
	}

	.cph .cph-search-btn {
		position: absolute;
		top: 0;
		right: 0;
		width: 40px;
		height: 32px;
		padding: 0;
		border: 0;
		background: transparent;
		color: #777;
	}

	.cph .cph-search-btn:hover,
	.cph .cph-search-btn:focus {
		color: #333;
	}
}