/*
  Стили того, чего не было в статическом прототипе.

  В прототипе список догружался кнопкой «Показать ещё», поэтому нумерации
  страниц там просто не существовало. В WordPress она нужна: и людям, и
  поисковикам. Плюс классы, которые WordPress и WooCommerce добавляют сами.

  Файл правится руками. Основной sd.css собирается скриптом из макета —
  туда дописывать нельзя, при следующей сборке перезапишется.
*/

/* ---------- нумерация страниц ---------- */

.morewrap ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.morewrap ul.page-numbers li {
	list-style: none;
	margin: 0;
}

.morewrap .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 13px;
	border: 1px solid var(--line2);
	border-radius: 10px;
	background: var(--bg);
	color: var(--ink2);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
}

.morewrap a.page-numbers:hover {
	background: var(--blue-l);
	border-color: var(--blue);
	color: var(--blue);
}

.morewrap .page-numbers.current {
	background: linear-gradient(180deg, #2f74e0, var(--blue));
	border-color: var(--blue);
	color: #fff;
	box-shadow: 0 4px 10px rgba(28, 95, 208, .28);
}

.morewrap .page-numbers.dots {
	border-color: transparent;
	background: none;
	box-shadow: none;
}

/* ---------- таблица цен после удаления колонки с единицей ---------- */

/*
  В основном CSS есть правило, скрывающее на узких экранах третью колонку —
  там была «Ед. изм.». Колонку убрали, третьей стала «Новые», то есть сама
  цена, и правило спрятало бы её на телефоне. Возвращаем на место.
*/
@media (max-width: 1024px) {

	table.pt thead th:nth-child(3),
	table.pt tbody td:nth-child(3) {
		display: table-cell;
	}
}

/* ---------- акцент на разделах каталога ---------- */

/*
  Кнопка «Каталог» ведёт теперь не в общий список, а в первый раздел.
  Значит человек попадает внутрь раздела и должен понимать, что рядом
  есть остальные и их можно щёлкать. Подсказка и стрелка при наведении
  этим и занимаются.
*/
.sidehint {
	margin: -6px 0 12px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--muted);
}

.chipshint {
	display: none;
}

.sidelist a {
	position: relative;
}

/* Стрелка появляется при наведении: подсказывает, что это переход. */
.sidelist a:not(.on)::after {
	content: "→";
	position: absolute;
	right: 12px;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .16s, transform .16s;
	color: var(--blue);
}

.sidelist a:not(.on):hover::after {
	opacity: 1;
	transform: none;
}

.sidelist a:not(.on):hover .c {
	opacity: 0;
}

@media (max-width: 1024px) {

	.chipshint {
		display: block;
		margin: 0 0 8px;
		font-size: 13px;
		font-weight: 600;
		color: var(--ink2);
	}
}

/* ---------- категории лентой на узких экранах ---------- */

/*
  На широких экранах категории живут в боковом списке, поэтому лента скрыта.
  На узких боковой список спрятан правилом .sideboxcats{display:none} —
  и без этой ленты выбрать раздел на телефоне было вообще невозможно.
*/
.catchips {
	display: none;
}

@media (max-width: 1024px) {

	.catchips {
		display: flex;
		gap: 8px;
		margin-bottom: 14px;
		padding-bottom: 6px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		/* Прокрутку видно по обрезанному краю последней плашки. */
		mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
	}

	.catchips a {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		flex: 0 0 auto;
		padding: 9px 14px;
		border: 1px solid var(--line2);
		border-radius: 999px;
		background: var(--bg);
		color: var(--ink2);
		font-size: 13.5px;
		font-weight: 600;
		white-space: nowrap;
		text-decoration: none;
	}

	.catchips a.on {
		background: linear-gradient(180deg, #2f74e0, var(--blue));
		border-color: var(--blue);
		color: #fff;
		box-shadow: 0 3px 9px rgba(28, 95, 208, .26);
	}

	.catchips a .c {
		font-size: 11.5px;
		opacity: .7;
	}

	.catchips a.on .c {
		opacity: .85;
	}
}

/* ---------- приманка для роботов ---------- */

/*
  Убираем поле из виду, но не через display:none: часть спам-программ
  такие поля распознаёт и пропускает. Поле остаётся в разметке, просто
  уезжает за пределы экрана и недоступно с клавиатуры.
*/
.hp-field {
	position: absolute !important;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- согласие на обработку данных в форме ---------- */

.consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 14px;
	font-size: 13px;
	line-height: 1.5;
	color: #aeb9c9;
	cursor: pointer;
}

/*
  Свой чекбокс вместо системного. Системный на тёмном фоне формы рисуется
  белым квадратом без рамки — выглядит как артефакт вёрстки, и посетитель
  его либо не замечает, либо не понимает, что это поле. Заявка при этом
  не отправляется, и человек уходит.
*/
.consent input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	position: relative;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 2px solid rgba(255, 255, 255, .45);
	border-radius: 6px;
	background: rgba(255, 255, 255, .06);
	cursor: pointer;
	transition: background .15s, border-color .15s;
}

.consent input[type="checkbox"]:hover {
	border-color: rgba(255, 255, 255, .75);
}

.consent input[type="checkbox"]:focus-visible {
	outline: 2px solid #cfe0ff;
	outline-offset: 2px;
}

.consent input[type="checkbox"]:checked {
	background: linear-gradient(180deg, #2f74e0, var(--blue));
	border-color: var(--blue);
}

/* Галка рисуется двумя линиями, чтобы не тянуть иконку. */
.consent input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

/* Подсветка, если посетитель попытался отправить без согласия. */
.consent.err input[type="checkbox"] {
	border-color: #ff8a80;
	background: rgba(255, 138, 128, .12);
}

.consent a {
	color: #cfe0ff;
	text-decoration: underline;
}

.consent a:hover {
	color: #fff;
}

/*
  Раньше здесь стояло правило на `:invalid`. Для обязательной галочки оно
  верно с точки зрения браузера — она действительно «не заполнена», — но
  срабатывало сразу при загрузке страницы: посетитель ещё ничего не сделал,
  а поле уже обведено красным, как будто он ошибся. Подсвечиваем только
  после попытки отправки: класс `err` ставит скрипт формы.
*/
.consent input.err {
	outline: 2px solid #ff8a80;
	outline-offset: 2px;
}

/* ---------- вторая кнопка в плашке согласия ---------- */

.ck-bar .ck-ghost {
	background: none;
	border: 1px solid rgba(255, 255, 255, .45);
	color: #fff;
	box-shadow: none;
}

.ck-bar .ck-ghost:hover {
	background: rgba(255, 255, 255, .12);
}

.ck-bar a {
	color: #cfe0ff;
	text-decoration: underline;
}

/* ---------- реквизиты в подвале ---------- */

.foot-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .09);
	font-size: 12.5px;
	line-height: 1.6;
	color: #7c8aa0;
}

.foot-legal span {
	white-space: normal;
}

/* ---------- страницы, собранные в конструкторе ---------- */

/*
  Содержимое Elementor выводим во всю ширину, как его и рисовали: свои фоны,
  свои сетки, свои отступы. Ограничивать его нашей колонкой нельзя — блоки
  сжимаются, и страница выглядит хуже, чем была до редизайна.
*/
.sd-builder-page {
	width: 100%;
}

/* Отбивка от нашего заголовка страницы и от блока призыва под содержимым. */
.sd-builder-page > .elementor {
	margin-bottom: clamp(24px, 3vw, 48px);
}

/* ---------- честные надписи ---------- */

/*
  Огонёк у телефона гаснет вне рабочих часов. Раньше он горел круглосуточно
  рядом со словами «Сейчас на связи»: в три часа ночи это неправда, а человек
  по такой надписи звонит и попадает в пустоту.
*/
.livedot.off {
	background: #8fa0b5;
	box-shadow: none;
	animation: none;
}

/* Подпись под заголовком отзывов вместо выдуманных оценок. */
.rev-lead {
	max-width: 620px;
	margin: -8px 0 22px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink2);
}

/* ---------- выбор мессенджера для отправки фото ---------- */

/*
  Раньше любая кнопка «Отправить фото» открывала WhatsApp. Теперь спрашиваем,
  куда: у части людей WhatsApp не установлен, а Telegram и MAX были спрятаны
  иконками в шапке.
*/
.sd-send {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(9, 17, 31, .62);
	backdrop-filter: blur(2px);
}

.sd-send-c {
	width: 100%;
	max-width: 380px;
	padding: 24px;
	border-radius: 18px;
	background: #10203a;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
	color: #fff;
	text-align: center;
}

.sd-send-t {
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 8px;
}

.sd-send-s {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.5;
	color: #aeb9c9;
}

.sd-send-b {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-bottom: 10px;
}

/* Цвета мессенджеров: так кнопка узнаётся раньше, чем прочитана. */
.sd-send-b.wa {
	background: #25d366;
	box-shadow: 0 4px 12px rgba(37, 211, 102, .28);
}

.sd-send-b.tg {
	background: #29a9eb;
	box-shadow: 0 4px 12px rgba(41, 169, 235, .28);
}

.sd-send-b.mx {
	background: #7c4dff;
	box-shadow: 0 4px 12px rgba(124, 77, 255, .28);
}

.sd-send-b:hover {
	filter: brightness(1.07);
}

.sd-send-x {
	width: 100%;
	margin-top: 4px;
	padding: 11px;
	border: none;
	border-radius: 10px;
	background: none;
	color: #8fa0b8;
	font-size: 14.5px;
	font-family: inherit;
	cursor: pointer;
}

.sd-send-x:hover {
	color: #fff;
	background: rgba(255, 255, 255, .07);
}

/* Галочка в окне «заявка отправлена». */
.sd-done-ic {
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
}

.sd-done-ic svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ---------- страница «О нас» ---------- */

/*
  Заголовок с фотографией во всю ширину. Фотография та же, что стояла на этой
  странице раньше, — она узнаваемая, менять её незачем. Тёмная заливка слева
  нужна, чтобы белый текст читался поверх снимка при любой его яркости.
*/
.ab-hero {
	position: relative;
	padding: clamp(56px, 8vw, 116px) 0 clamp(48px, 7vw, 96px);
	background-color: #0b1524;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
}

.ab-hero .crumbs {
	margin-bottom: 14px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .72);
}

.ab-hero .crumbs a {
	color: rgba(255, 255, 255, .88);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
}

.ab-hero .crumbs a:hover {
	color: #fff;
}

.ab-hero h1 {
	margin: 0 0 16px;
	max-width: 15em;
	font-size: clamp(30px, 4.4vw, 54px);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -.01em;
	text-transform: none;
}

.ab-hero h1 .b {
	color: #9cc4ff;
}

.ab-hero .lead {
	max-width: 46em;
	margin: 0 0 26px;
	font-size: clamp(15px, 1.6vw, 18px);
	line-height: 1.6;
	color: rgba(255, 255, 255, .86);
}

.ab-hero .actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ab-hero .btn.ghost {
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
	background: rgba(255, 255, 255, .06);
}

.ab-hero .btn.ghost:hover {
	background: rgba(255, 255, 255, .16);
}

/* Заголовок слева, текст справа. */
.ab-two {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: clamp(20px, 4vw, 56px);
	align-items: start;
}

/*
  Подпись под заголовком: продолжение фразы, поэтому тоном тише.
  Отбивка снизу обязательна: без неё подпись сливалась с идущим за ней
  текстом в одну сплошную простыню.
*/
.ab-note {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--muted);
}

.ab-note:last-child {
	margin-bottom: 0;
}

/* Фотография и текст рядом. */
.ab-split {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: clamp(20px, 4vw, 52px);
	align-items: start;
}

.ab-ph {
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid var(--line);
	background: var(--soft);
}

.ab-ph img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 460px;
	object-fit: cover;
}

/* Бонус новым клиентам — единственная цифра на странице, её и выделяем. */
.ab-bonus {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 20px 0 22px;
	padding: 15px 18px;
	border: 1px solid var(--line2);
	border-left: 4px solid var(--blue);
	border-radius: 12px;
	background: var(--blue-l);
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--ink2);
}

.ab-bonus .icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--blue);
}

@media (max-width: 900px) {

	.ab-two,
	.ab-split {
		grid-template-columns: 1fr;
	}

	/* На узком экране фотография идёт после текста, а не разрывает его. */
	.ab-split .ab-ph {
		order: 2;
	}
}

/* ---------- страницы WooCommerce: корзина, оформление, кабинет ---------- */

.sd-wc-page {
	font-size: 15.5px;
	color: var(--ink2);
	line-height: 1.65;
}

.sd-wc-page h2,
.sd-wc-page h3 {
	color: var(--ink);
	font-weight: 800;
	margin: 26px 0 12px;
}

.sd-wc-page table {
	width: 100%;
	border-collapse: collapse;
}

.sd-wc-page table th,
.sd-wc-page table td {
	padding: 11px 13px;
	border-bottom: 1px solid var(--line);
	text-align: left;
}

/* Таблицы корзины на узких экранах не должны рвать страницу. */
.sd-wc-page .woocommerce,
.sd-wc-page form {
	overflow-x: auto;
}

.sd-wc-page .button,
.sd-wc-page button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: none;
	border-radius: 10px;
	background: linear-gradient(180deg, #2f74e0, var(--blue));
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(28, 95, 208, .26);
}

.sd-wc-page .woocommerce-message,
.sd-wc-page .woocommerce-info,
.sd-wc-page .woocommerce-error {
	border: 1px solid var(--line2);
	border-left: 4px solid var(--blue);
	border-radius: 10px;
	background: var(--soft);
	padding: 14px 18px;
	margin-bottom: 18px;
	list-style: none;
}

.sd-wc-page .woocommerce-error {
	border-left-color: #d64545;
}

/* ---------- классы, которые расставляет сам WordPress ---------- */

.prose img.alignleft,
.prose .alignleft {
	float: left;
	margin: 6px 20px 14px 0;
	max-width: 50%;
}

.prose img.alignright,
.prose .alignright {
	float: right;
	margin: 6px 0 14px 20px;
	max-width: 50%;
}

.prose img.aligncenter,
.prose .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.prose .wp-caption {
	max-width: 100%;
}

.prose .wp-caption-text,
.prose figcaption {
	font-size: 13.5px;
	color: var(--muted);
	text-align: center;
	margin-top: 7px;
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 18px 0;
	font-size: 15px;
}

.prose table th,
.prose table td {
	padding: 10px 13px;
	border: 1px solid var(--line);
	text-align: left;
}

.prose table th {
	background: var(--soft);
	font-weight: 700;
	color: var(--ink);
}

.prose blockquote {
	margin: 18px 0;
	padding: 14px 20px;
	border-left: 4px solid var(--blue);
	background: var(--soft);
	border-radius: 0 10px 10px 0;
	color: var(--ink2);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* На узких экранах плавающие картинки в тексте только мешают. */
@media (max-width: 640px) {

	.prose img.alignleft,
	.prose .alignleft,
	.prose img.alignright,
	.prose .alignright {
		float: none;
		margin: 12px auto;
		max-width: 100%;
	}
}