/*
 * Старый сайт centrisprint.uz — дополнение к style.new.css темы.
 *
 * Здесь только кнопка на витрину Centris Print Cup в шапке. Её вид взят
 * у «Оставить заявку» с первого экрана: белая, чёрная рамка, сдвинутая
 * чёрная тень, при наведении вдавливается.
 *
 * Размеры — в px, а не в rem: тема на ширине 992–1170 уменьшает rem
 * до 7px, и кнопка съёживалась бы вместе с ним.
 *
 * Чтобы кнопке нашлось место, меню шапки на части ширин ведёт себя иначе,
 * чем у темы (раскладка посчитана по ширине пунктов при шрифте Roboto 500):
 *   ≥1400    — как у темы: меню по центру, кнопка справа, зеркально логотипу;
 *   1171–1399 — меню прижато вправо, к кнопке, шрифт чуть меньше. У темы
 *              здесь меню стояло по центру и наезжало на логотип;
 *   992–1170 — как у темы: меню вправо, мелким шрифтом, но пункты чуть
 *              плотнее, иначе меню не помещается между логотипом и кнопкой;
 *   ≤991     — бургер: кнопка перед ним, ещё одна — в выезжающем меню.
 * После прокрутки меню у темы и так прижато вправо — оно просто кончается
 * перед кнопкой.
 */

.header__cup {
	--cup-shadow: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	box-sizing: border-box;
	padding: 10px 14px;
	border: 2px solid #000;
	border-radius: 6px;
	background-color: #fff;
	box-shadow: var(--cup-shadow) var(--cup-shadow) 0 #000;
	font-family: Roboto, sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 1;
	color: #000;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 250ms ease 0s, box-shadow 250ms ease 0s;
}

.header__cup:hover {
	transform: translate(var(--cup-shadow), var(--cup-shadow));
	box-shadow: 0 0 0 #000;
}

.header__cup svg {
	flex: none;
}

/* ── Компьютер ─────────────────────────────────────────────────── */

@media (min-width: 992px) {
	.header__col {
		--cup-w: 184px;
	}

	.header__cup {
		position: absolute;
		right: 15px;
		width: var(--cup-w);
	}

	/* Прижатое вправо меню кончается за 24px до кнопки. */
	.header--fixed .header__col {
		padding-right: calc(var(--cup-w) + 39px);
	}
}

@media (min-width: 992px) and (max-width: 1399px) {
	.header .header__col {
		justify-content: flex-end;
		padding-right: calc(var(--cup-w) + 39px);
	}
}

@media (min-width: 1171px) and (max-width: 1399px) {
	.header .header__menu nav ul li a {
		font-size: min(2.4rem, calc(3.3vw - 23px));
	}

	.header--fixed .header__menu nav ul li a {
		font-size: min(1.8rem, calc(3.3vw - 23px));
	}
}

@media (min-width: 992px) and (max-width: 1170px) {
	.header .header__menu nav ul li {
		padding: 0 14px;
	}

	.header .header__menu nav ul li a {
		font-size: min(2.4rem, calc(3.3vw - 19.5px));
	}
}

/* ── Телефон и планшет ─────────────────────────────────────────── */

@media (max-width: 991px) {
	.header__cup {
		--cup-shadow: 3px;
		gap: 5px;
		margin: 0 20px 0 auto;
		padding: 8px 11px;
		font-size: 14px;
	}

	.header__cup svg {
		width: 11px;
		height: 10px;
	}
}

@media (max-width: 575px) {
	.header__cup-brand {
		display: none;
	}
}

/* Совсем узкий экран: рядом с логотипом места нет — остаётся пункт в меню. */
@media (max-width: 359px) {
	.header__cup {
		display: none;
	}
}

/* Пункт в выезжающем меню — та же кнопка, на оранжевом. */
.mobile-menu__wrap nav ul li.mobile-menu__cup {
	margin-top: 40px;
}

.mobile-menu__wrap nav ul li.mobile-menu__cup a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 16px;
	border: 2px solid #000;
	border-radius: 6px;
	background-color: #fff;
	box-shadow: 4px 4px 0 #000;
	color: #000;
}

.mobile-menu__wrap nav ul li.mobile-menu__cup a svg {
	width: 12px;
	height: 11px;
}