/**
 * Обвязка сайта: шапка, меню, подвал, формы, общая типографика.
 *
 * Цвета и размеры шрифтов сюда не пишем — они приходят из опций темы
 * (`design-preset.php`), и там же их меняет владелец. Здесь только то,
 * чего в опциях нет: раскладка шапки, скругления, отступы, тени, поведение
 * поля поиска.
 *
 * Родительская тема собрана на Bootstrap 3, поэтому селекторы приходится
 * брать её. Внутренности её элементов не переопределяем (правило R26) —
 * трогаем рамки, отступы и цвета, а не устройство внутри.
 */

:root {
	--fsk-ink: #16161a;
	--fsk-muted: #6e6e7a;
	--fsk-faint: #9a9aa6;
	--fsk-line: #e9e9ef;
	--fsk-soft: #f4f5f7;
	--fsk-green: #14874a;
	--fsk-green-soft: #eaf6ef;
	--fsk-radius: 12px;
}

html body { background: #f6f7f9; }

body,
body[class*=" "] {
	font-family: "Golos Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body h1, body h2, body h3, body h4, body h5, body h6 {
	font-family: "Golos Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
	letter-spacing: -.012em;
	text-wrap: balance;
}

/* ---------- шапка ---------- */

/*
 * Шапка — одно светлое полотно без линии снизу: границу видно по цвету
 * фона страницы, а полоса под шапкой только дробила первый экран
 * (владелец просил убрать). Высота первого экрана — под содержимое.
 */
header .top-header {
	padding: 15px 0;
}

header .navigation {
	padding: 0;
	box-shadow: none;
	border-bottom: 0;
}

header .navigation .navbar-nav > li > a {
	padding: 13px 0;
	border-radius: 0;
	position: relative;
}

/* Подчёркивание вместо смены фона: активный пункт видно, а меню остаётся
   лёгким. Линия рисуется по нижней границе шапки, поэтому не двигает текст. */
header .navigation .navbar-nav > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--fsk-green);
	opacity: 0;
	transition: opacity .15s ease;
}
header .navigation .navbar-nav > li > a:hover::after,
header .navigation .navbar-nav > li.current-menu-item > a::after,
header .navigation .navbar-nav > li.current-menu-parent > a::after { opacity: 1; }

header .navigation .navbar-nav > li { margin-right: 26px; }
header .navigation .navbar-nav > li:last-child { margin-right: 0; }

/* логотип */

header .logo h2 {
	/* Цвет логотипа тема задаёт в своей таблице белым — он был рассчитан
	   на чёрную шапку. На светлой он просто исчезал. */
	margin: 0;
	width: 143px;
	height: 30px;
	font-size: 0;
	line-height: 0;
	background: url("brand/freshskidki-wordmark.png") left center / contain no-repeat;
}

/* поиск в шапке */

header .main-search { position: relative; min-width: 320px; }

header .main-search .form-control {
	/*
	 * Компактная пилюля: 38 px высоты вместо 44. Владелец просил поиск
	 * поменьше — прежнее поле занимало почти всю строку. Отступы: слева
	 * место под лупу (её рисует `::before`), справа — под кнопку «Поиск».
	 */
	height: 38px;
	min-height: 38px;
	border-radius: 999px !important;
	/*
	 * Фон — белый и в покое, и в фокусе; в покое поле отделяет тонкая рамка.
	 * Раньше в покое фон был серым, и при фокусе он менялся на белый: тот же
	 * серый текст на белом выглядит иначе, и это читалось как «текст стал
	 * меньше и дёрнулся». Замер пикселей показал, что размер текста при этом
	 * не меняется ни на пиксель — меняется только фон.
	 */
	background: #fff;
	border: 1px solid var(--fsk-line);
	box-shadow: none;
	padding: 0 84px 0 33px;
	font-size: 14px;
	-webkit-appearance: none;
	appearance: none;
	/* Тема держит поле на 350 px даже внутри формы 250–268 px. Из-за этого
	   оно перекрывало первый пункт меню и выводило страницу за экран. */
	box-sizing: border-box;
	width: 100% !important;
	max-width: 100%;
	/* Переход только по цвету рамки: ничего не двигается и не вспыхивает. */
	transition: border-color .15s ease;
}

/*
 * Автозаполнение Chrome: он подменяет фон и обводку поля своими. Держим
 * и фон, и форму — иначе выбранное из подсказок значение перекрашивает поле.
 */
header .main-search .form-control:-webkit-autofill,
header .main-search .form-control:-webkit-autofill:hover,
header .main-search .form-control:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--fsk-ink);
	-webkit-box-shadow: 0 0 0 40px #fff inset;
	border-radius: 999px !important;
}

header .main-search .form-control:focus {
	background: #fff;
}

/*
 * Кольцо фокуса рисуем псевдоэлементом ПОВЕРХ поля, а не свойствами самого поля.
 *
 * Почему так. При фокусе Chrome перерисовывает поле (меняется рамка, появляется
 * свечение) и заодно меняет сглаживание текста: подсказка «Промокод или магазин»
 * становится темнее и как будто дёргается — владелец это и заметил. Замер
 * кадров показал, что геометрия при этом не меняется ни на пиксель, меняется
 * именно отрисовка. Когда рамка и свечение живут на отдельном слое, внутри поля
 * не меняется ничего: подсказка остаётся ровно той же.
 */
header .main-search::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid transparent;
	border-radius: 999px;
	pointer-events: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

header .main-search:focus-within::after {
	border-color: var(--fsk-green);
	box-shadow: 0 0 0 3px rgba(20, 135, 74, .12);
}

/*
 * Рамку держим и в фокусе, и при нажатии. Вендорская тема в `:active` ставит
 * полю `border: none`, и ровно в момент клика поле теряло рамку: содержимое
 * съезжало влево на пиксель и возвращалось при отпускании — владелец описал
 * это как «текст смещается, пока держишь кнопку». Селектор с тегом и классом
 * (`input.form-control`) перебивает вендорский `:active` по весу.
 */
header .main-search input.form-control,
header .main-search input.form-control:focus,
header .main-search input.form-control:active {
	border: 1px solid var(--fsk-line);
}

header .main-search a.submit-form {
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
	top: 5px;
	right: 5px;
	bottom: 5px;
	height: auto;
	display: flex;
	align-items: center;
	border-radius: 999px;
	padding: 0 20px;
	font-size: 13.5px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

/* Подсказка по магазинам под полем — тоже карточкой, а не голым списком. */
header .store-search-results {
	border: 1px solid var(--fsk-line);
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(22, 22, 26, .1);
	overflow: hidden;
	margin-top: 6px;
}

/*
 * Родительская тема отбивает <main> на 100 px сверху — это место было
 * рассчитано под баннер страницы, которого мы не рисуем. На страницах темы
 * (поиск, категории, кабинет) оставалась пустая полоса в пол-экрана.
 * Наши шаблоны задают свои отступы сами и обнуляют этот ниже.
 */
main { margin-top: 24px; }

/* ---------- общие элементы ---------- */

.btn, a.btn, a.visit-store, .form-submit #submit, .form-submit a {
	border-radius: 9px;
	font-weight: 600;
	border: 0;
	transition: filter .15s ease, transform .12s ease;
}
.btn:hover, a.btn:hover, a.visit-store:hover { filter: brightness(.94); }

.form-control {
	border-radius: 9px;
	border: 1px solid var(--fsk-line);
	box-shadow: none;
}
.form-control:focus {
	border-color: var(--fsk-green);
	box-shadow: 0 0 0 3px rgba(20, 135, 74, .12);
}

/* Белые блоки темы: единый радиус и тень вместо жёстких рамок. */
.white-block,
.widget,
.pagination > span,
.pagination > a {
	border-radius: var(--fsk-radius);
}

.widget {
	border: 1px solid var(--fsk-line);
	box-shadow: 0 1px 2px rgba(22, 22, 26, .05);
}

.widget-title {
	font-size: 14px;
	letter-spacing: .02em;
}

/* ---------- подвал ---------- */

footer,
.copyrights {
	border-top: 0;
}

.copyrights { padding: 18px 0; font-size: 13.5px; }

/* ---------- телефон ---------- */

@media (max-width: 860px) {
	header .top-header { padding: 12px 0; }
	header .top-header .flex-wrap { display: block; }
	header .logo h2 { width: 126px; height: 27px; }
	header .main-search { min-width: 0; margin-top: 12px; }
	header .navigation .navbar-nav > li { margin-right: 0; }
	header .navigation .navbar-nav > li > a::after { display: none; }
}

/* Кнопка поиска — тоже строго пилюлей: расширения правят и её. */
header .main-search a.submit-form { border-radius: 999px !important; }

/* ---------- шапка в одну строку: логотип, меню, поиск ---------- */

/*
 * Владелец попросил одну строку вместо двух полос: логотип, пункты меню
 * и поле поиска стоят рядом (см. дочерний `header.php`). Меню при этом
 * осталось внутри `.navigation` — на этом классе держится и мобильное
 * раскрытие, и липкая копия шапки из `custom.js`.
 *
 * Раскладка устойчивая: логотип и поиск занимают свою ширину и не сжимаются,
 * меню берёт остаток. Если пункты в него не влезают, лента меню прокручивается
 * по горизонтали — раньше она выдавливала поиск за край экрана и наезжала
 * на него текстом.
 */
.fskc-topbar__row {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: nowrap;
}

.fskc-topbar__row .logo { flex: 0 0 auto; }
/* Логотип центрируем по строке текста, а не по её полям: с `line-height: 1.2`
   от шапки темы он садился на пару пикселей ниже пунктов меню. */
.fskc-topbar__row .logo h2 { line-height: 1; }

/* Меню — часть строки, а не отдельная полоса с линией. */
.fskc-topbar__row .navigation {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	border-bottom: 0;
	box-shadow: none;
}
.fskc-topbar__row .navigation .navbar-collapse { padding: 0; border: 0; }
/*
 * У `.navbar` из Bootstrap `min-height: 50px`, и пункты меню прижимались
 * к его верхнему краю — текст меню стоял на 8 px выше логотипа. Снимаем
 * минимум: высоту задаёт сам список, и он центрируется в строке.
 */
.fskc-topbar__row .navigation .navbar { min-height: 0; }
.fskc-topbar__row .navigation .nav.navbar-nav {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 20px;
	margin: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.fskc-topbar__row .navigation .nav.navbar-nav::-webkit-scrollbar { display: none; }
.fskc-topbar__row .navigation .nav.navbar-nav > li { float: none; margin: 0; flex: 0 0 auto; }
.fskc-topbar__row .navigation .nav.navbar-nav > li > a {
	padding: 8px 0;
	line-height: 1.2;
	white-space: nowrap;
}

/*
 * Поиск — компактная пилюля справа: 268 px и 38 px высоты вместо прежних
 * 44 px во всю ширину. Лупа нарисована псевдоэлементом, поэтому разметку
 * вендора трогать не нужно.
 */
.fskc-topbar__row .main-search { flex: 0 0 300px; margin: 0 0 0 auto; min-width: 0; }
header .fskc-topbar__row .main-search .form-control {
	height: 38px;
	padding: 0 84px 0 33px;
	font-size: 14px;
}
header .fskc-topbar__row .main-search::before {
	content: "";
	position: absolute;
	left: 13px;
	top: 50%;
	width: 15px;
	height: 15px;
	margin-top: -7px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e7a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: .6;
	pointer-events: none;
}
header .fskc-topbar__row .main-search a.submit-form {
	top: 4px;
	right: 4px;
	bottom: 4px;
	padding: 0 14px;
	font-size: 13.5px;
}

/* Бургер нужен только на узких экранах. */
.fskc-topbar__burger { display: none; }

/*
 * Узкие экраны: логотип и бургер в строке, поиск под ними, меню раскрывается
 * бургером (механика вендора: `.navbar-collapse` + Bootstrap collapse).
 */
@media (max-width: 1199px) {
	.fskc-topbar__row { flex-wrap: wrap; gap: 10px 16px; }
	.fskc-topbar__row .logo { order: 1; }
	.fskc-topbar__burger {
		order: 2;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-left: auto;
	}
	.fskc-topbar__row .main-search { order: 3; flex: 1 1 100%; margin: 0; min-width: 0; }
	header .fskc-topbar__row .main-search .form-control { height: 42px; min-height: 42px; padding: 0 108px 0 34px; }
	.fskc-topbar__row .navigation { order: 4; flex: 1 1 100%; }
	.fskc-topbar__row .navigation .nav.navbar-nav {
		display: block;
		overflow-x: visible;
	}
	.fskc-topbar__row .navigation .nav.navbar-nav > li > a { padding: 11px 0; }

	/*
	 * Bootstrap на экранах от 768 px раскрывает `.navbar-collapse` силой
	 * (`display: block !important`), и на 1024 меню стояло развёрнутым
	 * списком под поиском. Возвращаем ему поведение телефона: скрыто,
	 * пока бургер не раскрыл (`collapse.in`).
	 */
	.fskc-topbar__row .navigation .navbar-collapse.collapse { display: none !important; }
	.fskc-topbar__row .navigation .navbar-collapse.collapse.in { display: block !important; }

	/*
	 * У пустой меню-обёртки остаётся `min-height: 50px` из Bootstrap — под
	 * закрытым меню висела пустая полоса в 50 px. Снимаем: высоту задаёт
	 * раскрытый список.
	 */
	.fskc-topbar__row .navigation .navbar { min-height: 0; }
	.fskc-topbar__row .navigation .navbar-collapse.in { padding-bottom: 10px; }
}

/* Компактная шапка использует исходные меню и поиск: их обработчики и
   введённый запрос сохраняются при прокрутке. Копия вендора остаётся скрытой. */
.navigation.sticky-nav { display: none !important; }
.fskc-topbar__mark { display: none; }

@media (min-width: 1200px) {
	body > header {
		position: sticky;
		top: 0;
		z-index: 110;
		height: 68px;
		background: #fff;
	}
	body.admin-bar > header { top: 32px; }
	body.fskc-is-scrolled > header {
		height: 54px;
		background: #fff;
		border-bottom: 1px solid var(--fsk-line);
		box-shadow: 0 4px 14px rgba(22, 22, 26, .08);
	}
	body.fskc-is-scrolled > header .fskc-topbar {
		box-sizing: border-box;
		width: 100%;
		margin: 0;
		padding: 7px 0;
		background: #fff;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	body.fskc-is-scrolled > header .fskc-topbar > .container {
		box-sizing: border-box;
		width: calc(100% - 30px);
		max-width: 1170px;
		margin: 0 auto;
		padding: 0 15px;
	}
	body.fskc-is-scrolled .fskc-topbar__row { gap: 20px; }
	body.fskc-is-scrolled .fskc-topbar__row .logo { order: 1; }
	body.fskc-is-scrolled .fskc-topbar__row .logo > :not(.fskc-topbar__mark) { display: none; }
	body.fskc-is-scrolled .fskc-topbar__row .fskc-topbar__mark {
		display: block;
		width: 34px;
		height: 34px;
	}
	body.fskc-is-scrolled .fskc-topbar__row .main-search {
		order: 3;
		flex: 0 0 310px;
		margin: 0 0 0 auto;
	}
	body.fskc-is-scrolled .fskc-topbar__row .navigation { order: 2; }
	body.fskc-is-scrolled .fskc-topbar__row .navigation .nav.navbar-nav { gap: 19px; }
	.fskc-topbar__row .navigation .nav.navbar-nav { overflow: visible; }
}

@media (prefers-reduced-motion: no-preference) {
	@media (min-width: 1200px) {
		body > header .fskc-topbar { transition: box-shadow .16s ease, border-radius .16s ease; }
	}
}