/**
 * Современный вид витрины: главная, карточки, подвал.
 *
 * Лежит отдельно от store.css и chrome.css, потому что это следующий слой:
 * store.css отвечает за устройство (сетки, раскладки), здесь — внешний вид
 * (скругления, тени, типографика, подложки). Подключается после store.css.
 *
 * Родительскую тему не трогаем (R1), опции темы не дублируем — цвета и кегли
 * заголовков по-прежнему приходят из `design-preset.php` (R31), здесь только
 * то, чего в опциях нет.
 *
 * Базовая тема центрирует героя (`text-align: center`, `margin: 0 auto`),
 * а все остальные блоки выравнивает влево — от этого первый экран выглядел
 * криво. Герой выровнен влево и разложен в две колонки: текст и поиск слева,
 * каталог в цифрах справа.
 */

:root {
	--fskc-radius: 14px;
	--fskc-radius-lg: 18px;
	--fskc-line: #e9ebf0;
	--fskc-soft: #f4f6f8;
	--fskc-mint: #eef7f2;
	--fskc-mint-line: #dbeee4;
	--fskc-shadow: 0 1px 2px rgba(17, 24, 39, .04);
	--fskc-shadow-hover: 0 10px 28px rgba(17, 24, 39, .10);
}

/* ---------- карточки предложений ---------- */

.fskc-card {
	border-radius: var(--fskc-radius);
	border-color: var(--fskc-line);
	box-shadow: var(--fskc-shadow);
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.fskc-card:hover {
	transform: translateY(-2px);
	border-color: #dfe3ea;
	box-shadow: var(--fskc-shadow-hover);
}

.fskc-card__title {
	font-size: 16px;
	line-height: 1.38;
	font-weight: 600;
}

/* Бейдж выгоды — плитка с тоном по типу. Цвет остаётся смысловым:
   процент и рубли зелёные, подарок фиолетовый, доставка синяя. */
.fskc-badge {
	border-radius: 10px;
	padding: 7px 10px;
	font-weight: 700;
	font-size: 14.5px;
	letter-spacing: -.01em;
}
.fskc-badge--percent,
.fskc-badge--money { background: var(--fskc-green-soft); color: var(--fskc-green-dark); }
.fskc-badge--gift    { background: #f4edff; color: #6127cf; }
.fskc-badge--delivery{ background: #e8f0fe; color: #1857b8; }

.fskc-btn-wrap .coupon-action-button { border-radius: 11px; }

/* Заголовок секции и ссылка «все» в одну строку: блок читается как раздел
   с продолжением, а не как карточка без выхода. */
.fskc-block__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 14px;
}
.fskc-block__head h2 { margin: 0; font-size: 22px; letter-spacing: -.015em; }
.fskc-block__all {
	font-size: 14px;
	font-weight: 600;
	color: var(--fskc-green-dark);
	text-decoration: none;
	white-space: nowrap;
}
.fskc-block__all:hover { text-decoration: underline; }

.fskc-block:not(:has(.fskc-block__head)) > h2 { font-size: 22px; letter-spacing: -.015em; }

/* ---------- главная: герой ---------- */

.fskc-home .fskc-hero {
	position: relative;
	/* visible, а не hidden: внутри героя живёт поле поиска, и его список
	   подсказок должен выходить за пределы блока. С hidden от него оставалась
	   одна строка — «поиск на первом экране не работает». */
	overflow: visible;
	background: linear-gradient(180deg, #f0f8f3 0%, #f8fcfa 100%);
	border: 1px solid var(--fskc-mint-line);
	border-radius: var(--fskc-radius-lg);
	padding: 40px 40px 36px;
	margin: 6px 0 28px;
	text-align: left;
}

.fskc-home .fskc-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 36px;
	align-items: center;
}

.fskc-home .fskc-hero h1 {
	font-size: 40px;
	line-height: 1.1;
	letter-spacing: -.028em;
	margin: 0 0 12px;
	max-width: 24ch;
}

.fskc-home .fskc-hero__lead {
	font-size: 16px;
	color: var(--fskc-muted);
	max-width: 58ch;
	margin: 0 0 22px;
}
.fskc-home .fskc-hero__lead strong { color: var(--fskc-ink); font-weight: 700; }

/* Поиск — главное действие героя: большое поле с пилюлей-кнопкой. */
.fskc-home .fskc-search { max-width: 620px; margin: 0 0 16px; }
.fskc-home .fskc-search input[type="search"] {
	height: 54px;
	border-radius: 999px;
	border: 1px solid #d9e7df;
	background: #fff;
	padding: 0 160px 0 22px;
	font-size: 16px;
	box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
}
.fskc-home .fskc-search input[type="search"]:focus {
	outline: none;
	border-color: var(--fskc-green);
	box-shadow: 0 0 0 4px rgba(20, 135, 74, .12);
}
.fskc-home .fskc-search button {
	border-radius: 999px;
	font-weight: 700;
	font-size: 15px;
	padding: 0 26px;
}

/* «Часто ищут» — пилюлями, а не подчёркнутым текстом. */
.fskc-home .fskc-hero__quick { margin: 16px 0 0; color: var(--fskc-faint); font-size: 14px; }
.fskc-home .fskc-hero__quick a {
	display: inline-block;
	margin: 3px 2px;
	padding: 6px 13px;
	background: #fff;
	border: 1px solid var(--fskc-mint-line);
	border-radius: 999px;
	text-decoration: none;
	border-bottom: 1px solid var(--fskc-mint-line);
	color: var(--fskc-ink);
	transition: border-color .15s ease, color .15s ease;
}
.fskc-home .fskc-hero__quick a:hover { border-color: var(--fskc-green); color: var(--fskc-green-dark); }

/* Каталог в цифрах — правая колонка героя. */
.fskc-home .fskc-hero__side { display: grid; gap: 10px; }

.fskc-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 18px;
	background: #fff;
	border: 1px solid var(--fskc-mint-line);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
}
.fskc-stat b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fskc-stat span { color: var(--fskc-muted); font-size: 13.5px; }
.fskc-stat--wide b { font-size: 17px; }
/* Полная дата в узкую плитку на телефоне не влезает и рвётся на три строки;
   в коротком виде «17.09.2026» она читается без переносов. */
.fskc-stat__short { display: none; }

.fskc-hero__side-link {
	display: block;
	text-align: center;
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--fskc-green);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s ease;
}
.fskc-hero__side-link:hover { background: var(--fskc-green-dark); color: #fff; }

/* ---------- главная: категории ---------- */

.fskc-home .fskc-cats ul {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fskc-home .fskc-cats a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var(--fskc-line);
	border-radius: var(--fskc-radius);
	text-decoration: none;
	color: var(--fskc-ink);
	transition: border-color .15s ease, box-shadow .18s ease, transform .18s ease;
}
.fskc-home .fskc-cats a:hover {
	border-color: var(--fskc-green);
	background: #fff;
	box-shadow: 0 6px 18px rgba(17, 24, 39, .07);
	transform: translateY(-1px);
}

.fskc-cats__icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fskc-green-soft);
	color: var(--fskc-green-dark);
	border-radius: 12px;
}
.fskc-cats__icon svg { width: 22px; height: 22px; }

.fskc-home .fskc-cats__name {
	font-weight: 600;
	line-height: 1.25;
	/* Длинное название («Электроника и техника») в колонке 170 px
	   выдавливало счётчик за пределы плитки: flex-элемент по умолчанию
	   не сжимается ниже min-content. */
	min-width: 0;
}
.fskc-home .fskc-cats__count {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--fskc-muted);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

/* ---------- главная: подборки (метки) ---------- */

.fskc-tagchips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}
.fskc-tagchips a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 15px;
	background: #fff;
	border: 1px solid var(--fskc-line);
	border-radius: 999px;
	text-decoration: none;
	color: var(--fskc-ink);
	font-size: 14px;
	transition: border-color .15s ease, color .15s ease;
}
.fskc-tagchips a:hover { border-color: var(--fskc-green); color: var(--fskc-green-dark); }
.fskc-tagchips span { color: var(--fskc-muted); font-size: 12.5px; }

/* ---------- главная: магазины плитками с логотипами ---------- */

.fskc-storetiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.fskc-storetiles a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 74px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var(--fskc-line);
	border-radius: var(--fskc-radius);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .18s ease, transform .18s ease;
}
.fskc-storetiles a:hover {
	border-color: var(--fskc-green);
	box-shadow: 0 6px 18px rgba(17, 24, 39, .07);
	transform: translateY(-1px);
}
.fskc-storetiles__logo {
	flex: 0 0 70px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fskc-storetiles__logo img { max-width: 70px; max-height: 34px; object-fit: contain; }
.fskc-storetiles__logo--mono {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--fskc-green-soft);
	color: var(--fskc-green-dark);
	font-weight: 700;
	font-size: 17px;
}
.fskc-storetiles__name { font-weight: 600; line-height: 1.25; min-width: 0; }
.fskc-storetiles__count {
	margin-left: auto;
	color: var(--fskc-muted);
	font-size: 13.5px;
	white-space: nowrap;
}

/* ---------- главная: полоса «Знаете рабочий промокод?» ---------- */

.fskc-home .fskc-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	background: linear-gradient(135deg, #14874a 0%, #0f6b3a 100%);
	border: 0;
	border-radius: var(--fskc-radius-lg);
	padding: 26px 30px;
	margin-top: 8px;
}
.fskc-home .fskc-cta h2 { color: #fff; margin: 0 0 6px; font-size: 22px; }
.fskc-home .fskc-cta p { color: #cfe9da; margin: 0; }
.fskc-home .fskc-cta__btn {
	background: #fff;
	color: #0f6b3a;
	border-radius: 12px;
	padding: 13px 24px;
	font-weight: 700;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .18s ease;
}
.fskc-home .fskc-cta__btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }

/* ---------- главная: «как это работает» ---------- */

.fskc-steps ol {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
}
.fskc-steps li {
	display: flex;
	gap: 14px;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--fskc-line);
	border-radius: var(--fskc-radius);
}
.fskc-steps__num {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--fskc-green);
	color: #fff;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fskc-steps li strong { display: block; margin-bottom: 4px; font-size: 15.5px; }
.fskc-steps li p { margin: 0; color: var(--fskc-muted); font-size: 14px; }

/* ---------- страница магазина: строка актуальности ---------- */

.fskc-actual {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding: 7px 14px;
	background: var(--fskc-green-soft);
	border-radius: 999px;
	color: var(--fskc-green-dark);
	font-size: 13.5px;
	font-weight: 600;
}

/*
 * Бейдж актуальности и строка о количестве предложений — одна строка.
 * Раньше это были две отдельные строки в шапке, и первая карточка уезжала вниз.
 */
.fskc-headmeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0 0 12px;
}
.fskc-headmeta .fskc-actual { margin: 0; }
.fskc-headmeta__stats { color: var(--fskc-muted); font-size: 14.5px; }
.fskc-headmeta__stats strong { color: var(--fskc-ink); font-variant-numeric: tabular-nums; }
.fskc-actual::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--fskc-green);
}

.fskc-tabs .fskc-tab { border-radius: 999px; }

/* Оценка и голосование: одна визуальная группа, звёзды не «двумя рядами». */
.fskc-vote { margin: 2px 0 10px; font-size: 13.5px; }

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

.fskc-footer {
	background: #fff;
	border-top: 1px solid var(--fskc-line);
	margin-top: 44px;
}

.fskc-footer__cols {
	display: grid;
	/* Владелец убрал колонки «Магазины» и «Категории» (22.09.2026): подвал
	   из четырёх колонок — слишком много информации. Осталось две: бренд
	   и сервис; длинный список сервисных ссылок раскладывается в две колонки. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 30px 48px;
	padding: 38px 0 28px;
}

.fskc-footer h2 {
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fskc-faint);
	margin: 0 0 12px;
	font-weight: 600;
}

.fskc-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.fskc-footer a { color: var(--fskc-ink); text-decoration: none; }
.fskc-footer a:hover { color: var(--fskc-green); }

.fskc-footer__logo {
	display: block;
	width: 120px;
	height: 26px;
	font-size: 0;
	line-height: 0;
	background: url("brand/freshskidki-wordmark.png") left center / contain no-repeat;
	margin-bottom: 10px;
}
.fskc-footer__logo span {
	display: none;
}
.fskc-footer__brand p { color: var(--fskc-muted); margin: 0 0 12px; max-width: 44ch; }
.fskc-footer__fresh { color: var(--fskc-faint); font-size: 13.5px; margin: 0; }

/* Две сквозные ссылки на разделы каталога под описанием бренда. */
.fskc-footer__links { font-size: 13.5px; }
.fskc-footer__links a { color: var(--fskc-muted); }
.fskc-footer__links a:hover { color: var(--fskc-green); }
.fskc-footer__links span { color: var(--fskc-line); margin: 0 6px; }

/*
 * Список «Сервис» длинный (13 ссылок) — в одну колонку подвал вырастал вдвое.
 * Две текстовые колонки внутри одного блока: заголовок один, список ниже.
 */
.fskc-footer__col--wide ul { display: block; columns: 2; column-gap: 38px; }
.fskc-footer__col--wide li { margin-bottom: 9px; break-inside: avoid; }
.fskc-footer__col--wide li:last-child { margin-bottom: 0; }

.fskc-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 24px;
	border-top: 1px solid var(--fskc-line);
	padding: 16px 0 24px;
	color: var(--fskc-faint);
	font-size: 13px;
}
.fskc-footer__bottom p { margin: 0; max-width: 78ch; }

/*
 * Правовая строка: в свёрнутом виде — одна строка, полный текст по клику.
 * Развёрнутый занимает всю ширину подвала: в узкой колонке он читался бы
 * по два слова в строке.
 */
.fskc-footer__note {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
}
.fskc-footer__note > span { max-width: 60ch; }
.fskc-footer__legal summary {
	cursor: pointer;
	color: var(--fskc-green-dark);
}
/* Треугольник браузера снят общей темой (им пользуются блоки FAQ),
   поэтому раскрытие показываем своим знаком. */
.fskc-footer__legal summary::after { content: " ▾"; }
.fskc-footer__legal[open] summary::after { content: " ▴"; }
.fskc-footer__legal[open] { flex: 1 1 100%; }
/*
 * Развёрнутый правовой текст — на всю ширину подвала. Владелец попросил именно
 * так: при ограничении в 100 знаков строка обрывалась на две трети ширины,
 * и блок выглядел сдвинутым влево («как будто справа должен быть сайдбар»).
 */
.fskc-footer__legal > p { margin: 10px 0 0; max-width: none; line-height: 1.55; }

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

@media (max-width: 1180px) {
	.fskc-home .fskc-cats ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
	.fskc-home .fskc-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	/* Три показателя в один ряд: на телефоне столбик из трёх плиток отодвигал
	   предложения далеко вниз, а они в главной — первое, за чем пришли. */
	.fskc-home .fskc-hero__side { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.fskc-stat--wide { grid-column: auto; }
	.fskc-hero__side-link { grid-column: 1 / -1; }
	.fskc-steps ol { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
	/* На главной поиск стоит в герое — второй такой же в шапке только
	   занимает первый экран. На остальных страницах он остаётся. */
	body.home header .main-search { display: none; }

	.fskc-home .fskc-hero { padding: 26px 20px 24px; border-radius: 16px; }
	.fskc-home .fskc-hero h1 { font-size: 28px; max-width: none; }
	.fskc-home .fskc-hero__lead { font-size: 15px; margin-bottom: 18px; }
	.fskc-home .fskc-search input[type="search"] { height: 50px; font-size: 15px; padding: 0 128px 0 18px; }
	.fskc-stat { padding: 11px 13px; border-radius: 12px; }
	.fskc-stat b { font-size: 16px; }
	.fskc-stat span { font-size: 11.5px; }
	.fskc-stat--wide b { font-size: 15px; }
	.fskc-stat__long { display: none; }
	.fskc-stat__short { display: inline; }

	.fskc-home .fskc-cats ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.fskc-home .fskc-cats a { padding: 10px 11px; gap: 8px; min-height: 58px; }
	.fskc-cats__icon { flex-basis: 30px; width: 30px; height: 30px; border-radius: 9px; }
	.fskc-cats__icon svg { width: 18px; height: 18px; }
	.fskc-home .fskc-cats__name { font-size: 14px; }
	.fskc-home .fskc-cats__count { font-size: 13px; }

	.fskc-block__head { margin-bottom: 12px; }
	.fskc-block__head h2 { font-size: 19px; }
	.fskc-block:not(:has(.fskc-block__head)) > h2 { font-size: 19px; }

	.fskc-storetiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.fskc-storetiles a { padding: 10px 12px; min-height: 64px; }
	.fskc-storetiles__logo { flex-basis: 54px; }
	.fskc-storetiles__logo img { max-width: 54px; }

	.fskc-footer__cols { grid-template-columns: 1fr; gap: 22px; padding: 28px 0 22px; }
	.fskc-footer__brand { grid-column: auto; }
	.fskc-footer__col--wide ul { columns: 1; }
}

/* ---------- сортировка и вкладки в одной строке ---------- */

/*
 * Вкладок на странице магазина бывает шесть и больше («Первый заказ»,
 * «Подарок»…). В колонке 795 px они переносились на вторую строку, а
 * сортировка уезжала на третью — шапка росла, первая карточка опускалась.
 * Теперь всё в одну строку: вкладки прокручиваются по горизонтали, сортировка
 * стоит справа и не переносится. Прокрутка — без полосы (её никто не ищет),
 * но колесом и свайпом вкладки листаются.
 */
.fskc-toolbar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 12px;
}
.fskc-toolbar .fskc-tabs {
	flex: 1 1 auto;
	min-width: 0;
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	margin: 0;
	padding: 2px 0;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.fskc-toolbar .fskc-tabs::-webkit-scrollbar { display: none; }
.fskc-toolbar .fskc-tab { flex: 0 0 auto; }
.fskc-toolbar .fskc-sortwrap { flex: 0 0 auto; }

/* Лента вкладок тянется мышью: курсор подсказывает, что её можно двигать. */
.fskc-toolbar .fskc-tabs { cursor: grab; }
.fskc-toolbar .fskc-tabs.is-dragging { cursor: grabbing; user-select: none; }
.fskc-toolbar .fskc-tabs .fskc-tab { cursor: pointer; }

/*
 * Подсказка «справа есть ещё»: пока лента вкладок прокручивается, её правый
 * край гаснет. Маска, а не градиент цветом, — фон под лентой менять нельзя.
 * Класс ставит и снимает store.js, ориентируясь на реальную прокрутку.
 */
.fskc-toolbar .fskc-tabs.is-scrollable {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
}
.fskc-sort {
	border: 1px solid var(--fskc-line);
	border-radius: 999px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%236b7280'/%3E%3C/svg%3E") no-repeat right 14px center;
	padding: 9px 34px 9px 15px;
	font-size: 14px;
	color: var(--fskc-ink);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.fskc-sort:focus { outline: 2px solid var(--fskc-green); outline-offset: 2px; }

/* ---------- сердечко избранного в карточке ---------- */

.fskc-card { position: relative; }

.fskc-fav {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--fskc-line);
	border-radius: 999px;
	background: #fff;
	color: var(--fskc-faint);
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.fskc-fav svg { width: 16px; height: 16px; }
.fskc-fav:hover { color: #d4306a; border-color: #f1c6d5; }
.fskc-fav.is-on { color: #d4306a; border-color: #f1c6d5; background: #fff5f8; }
.fskc-fav.is-on svg path { fill: currentColor; }
.fskc-fav.is-pulse { transform: scale(1.18); }

/* ---------- сердечко магазина: в каталоге и на странице магазина ---------- */

/*
 * Магазин тоже можно сохранить — тем же сердечком и в тот же список, только
 * список другой. В плитке кнопка стоит в углу карточки, на странице магазина
 * встаёт в готовое место темы (`.fskc-storecard__fav` уже позиционирован).
 */
.fskc-fav--store { top: 7px; right: 7px; width: 30px; height: 30px; }

.fskc-storecard__fav .fskc-fav--store {
	position: static;
	border-color: transparent;
	background: none;
}
.fskc-storecard__fav .fskc-fav--store:hover { background: #fff5f8; }

/* Значок избранного из темы (он работает только для вошедших) уступает
   место нашему: два сердечка рядом читаются как поломка. */
.fskc-storecard__fav a { display: none; }

/* ---------- страница «Избранное»: разделы, счётчики, сортировка ---------- */

.fskc-favsec { margin: 0 0 28px; }

.fskc-favsec__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin: 0 0 12px;
}
.fskc-favsec__head h2 { margin: 0; font-size: 19px; }
.fskc-favsec__n {
	display: inline-block;
	min-width: 28px;
	padding: 1px 9px;
	margin-left: 6px;
	border-radius: 999px;
	background: var(--fskc-green-soft);
	color: var(--fskc-green-dark);
	font-size: 13.5px;
	vertical-align: 2px;
	text-align: center;
}
.fskc-favsec__sort select {
	border: 1px solid var(--fskc-line);
	border-radius: 10px;
	background: #fff;
	padding: 8px 12px;
	font-size: 13.5px;
	color: var(--fskc-ink);
	cursor: pointer;
}
.fskc-favsec__sort select:focus { outline: 2px solid var(--fskc-green); outline-offset: 2px; }

/* Магазин без логотипа — монограмма: у магазинов логотип есть не всегда,
   а пустая плашка в списке выглядит сломанной. */
.fskc-saved__mono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--fskc-green-soft);
	color: var(--fskc-green-dark);
	font-weight: 700;
	font-size: 20px;
}

/* ---------- мини-списки: «чаще открывают», «недавно смотрели» ---------- */

.fskc-minilist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.fskc-minilist a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid var(--fskc-line);
	border-radius: var(--fskc-radius);
	text-decoration: none;
	color: var(--fskc-ink);
	transition: border-color .15s ease, box-shadow .18s ease;
}
.fskc-minilist a:hover { border-color: var(--fskc-green); box-shadow: 0 6px 18px rgba(17, 24, 39, .07); }

.fskc-minilist img {
	flex: 0 0 56px;
	max-width: 56px;
	max-height: 30px;
	object-fit: contain;
}
.fskc-minilist span { font-weight: 600; font-size: 14.5px; line-height: 1.35; min-width: 0; }
.fskc-minilist em {
	margin-left: auto;
	flex: 0 0 auto;
	color: var(--fskc-muted);
	font-style: normal;
	font-size: 13px;
	white-space: nowrap;
}

/* ---------- лента «сейчас на сайте» ---------- */

.fskc-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.fskc-feed li { color: var(--fskc-muted); font-size: 14px; }
.fskc-feed a { color: var(--fskc-ink); font-weight: 600; text-decoration: none; }
.fskc-feed a:hover { color: var(--fskc-green); }
.fskc-feed span { color: var(--fskc-faint); margin-left: 6px; font-size: 12.5px;white-space: nowrap; }

/* ---------- страница «Избранное» ---------- */

.fskc-savedlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.fskc-saved {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--fskc-line);
	border-radius: var(--fskc-radius);
}
.fskc-saved__logo { flex: 0 0 64px; display: flex; align-items: center; justify-content: center; }
.fskc-saved__logo img { max-width: 64px; max-height: 34px; object-fit: contain; }
.fskc-saved__main { min-width: 0; }
.fskc-saved__main strong { display: block; font-size: 15px; line-height: 1.35; }
.fskc-saved__meta { color: var(--fskc-muted); font-size: 13px; }
.fskc-saved__go {
	flex: 0 0 auto;
	margin-left: auto;
	background: var(--fskc-green);
	color: #fff;
	border-radius: 10px;
	padding: 10px 18px;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}
.fskc-saved__go:hover { background: var(--fskc-green-dark); color: #fff; }
.fskc-saved__del {
	flex: 0 0 auto;
	background: none;
	border: 0;
	color: var(--fskc-faint);
	font-size: 13px;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-style: dotted;
}
.fskc-saved__del:hover { color: #d4306a; }

/* ---------- страница «Подборки» ---------- */

.fskc-tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
}
.fskc-tiles a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	min-height: 62px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid var(--fskc-line);
	border-radius: var(--fskc-radius);
	text-decoration: none;
	color: var(--fskc-ink);
	transition: border-color .15s ease, box-shadow .18s ease, transform .18s ease;
}
.fskc-tiles a:hover {
	border-color: var(--fskc-green);
	box-shadow: 0 6px 18px rgba(17, 24, 39, .07);
	transform: translateY(-1px);
}
.fskc-tiles__name { font-weight: 600; }
.fskc-tiles__count { color: var(--fskc-muted); font-size: 13.5px; text-align: right; }

/* ---------- блог ---------- */

.fskc-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fskc-posts li {
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--fskc-line);
	border-radius: var(--fskc-radius);
}
.fskc-posts time { color: var(--fskc-faint); font-size: 13px; }
.fskc-posts h2 { font-size: 19px; margin: 6px 0 8px; letter-spacing: -.01em; }
.fskc-posts h2 a { color: var(--fskc-ink); text-decoration: none; }
.fskc-posts h2 a:hover { color: var(--fskc-green); }
.fskc-posts p { margin: 0; color: var(--fskc-muted); font-size: 14.5px; max-width: 80ch; }

/* ---------- номер в топе магазинов ---------- */

.fskc-storetiles__rank {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--fskc-green-soft);
	color: var(--fskc-green-dark);
	font-size: 12.5px;
	font-weight: 700;
}

/* ---------- телефон: новые блоки ---------- */

@media (max-width: 860px) {
	/* Вкладки и сортировка остаются одной строкой: вкладки прокручиваются
	   по горизонтали, сортировка компактная — шапка на телефоне не растёт. */
	.fskc-sort { padding: 8px 30px 8px 12px; font-size: 13.5px; }
	.fskc-minilist em { display: none; }
	.fskc-saved { flex-wrap: wrap; }
	.fskc-saved__go { margin-left: 0; width: 100%; text-align: center; }
	.fskc-tiles { grid-template-columns: 1fr; }
}

/* На узких экранах счётчик у названия категории не помещается: две колонки
   по 160 px, значок, название и число вместе не сходятся — либо число
   за краем плитки, либо перенос внутри слова. Название важнее, полные
   счётчики остаются на странице «Все категории». */
@media (max-width: 480px) {
	.fskc-home .fskc-cats__count { display: none; }
}

/* ---------- один код на несколько товаров ---------- */

/* «Тот же код ещё для 7 товаров» — подпись в строке доверия и «+7» в плитке. */
.fskc-variants-note { color: var(--fskc-muted); }
.fskc-tilemeta .fskc-variants-note {
	flex: 0 0 auto;
	padding: 1px 6px;
	border-radius: 6px;
	background: var(--fskc-soft);
	font-size: 12.5px;
	font-weight: 600;
}
.fskc-details__variants {
	margin: 0 0 12px;
	padding: 10px 14px;
	background: var(--fskc-soft);
	border-radius: 10px;
	color: var(--fskc-muted);
	font-size: 13.5px;
	line-height: 1.5;
}

/* ---------- поиск: фильтры и результаты ---------- */

.fskc-filters {
	background: #fff;
	border: 1px solid var(--fskc-line);
	border-radius: var(--fskc-radius);
	padding: 14px 16px;
	margin: 0 0 18px;
}
.fskc-filters__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.fskc-filters__row + .fskc-filters__row { margin-top: 10px; }
.fskc-filters__field { display: block; }
.fskc-filters__field--grow { flex: 1 1 260px; }

.fskc-filters input[type="search"],
.fskc-filters select {
	width: 100%;
	height: 46px;
	border: 1px solid var(--fskc-line);
	border-radius: 10px;
	background: #fff;
	padding: 0 14px;
	font-size: 15px;
	color: var(--fskc-ink);
}
.fskc-filters input[type="search"]:focus,
.fskc-filters select:focus {
	outline: none;
	border-color: var(--fskc-green);
	box-shadow: 0 0 0 3px rgba(20, 135, 74, .12);
}
.fskc-filters button[type="submit"] {
	flex: 0 0 auto;
	height: 46px;
	border: 0;
	border-radius: 10px;
	background: var(--fskc-green);
	color: #fff;
	font-weight: 700;
	padding: 0 26px;
	cursor: pointer;
}
.fskc-filters button[type="submit"]:hover { background: var(--fskc-green-dark); }
.fskc-filters__row--checks { color: var(--fskc-muted); font-size: 14px; }
.fskc-filters__row--checks label { display: inline-flex; align-items: center; gap: 6px; }
.fskc-filters__reset { margin-left: auto; color: var(--fskc-muted); font-size: 13.5px; }

.fskc-found { margin: 0; color: var(--fskc-muted); font-size: 14px; }

.fskc-pagination { margin: 20px 0 0; }
.fskc-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.fskc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--fskc-line);
	border-radius: 10px;
	background: #fff;
	color: var(--fskc-ink);
	text-decoration: none;
	font-size: 14px;
}
.fskc-pagination a.page-numbers:hover { border-color: var(--fskc-green); color: var(--fskc-green-dark); }
.fskc-pagination .page-numbers.current { background: var(--fskc-green); border-color: var(--fskc-green); color: #fff; font-weight: 700; }

/* ---------- форма «Предложить промокод» ---------- */

.fskc-form {
	max-width: 760px;
	background: #fff;
	border: 1px solid var(--fskc-line);
	border-radius: var(--fskc-radius);
	padding: 24px 26px 26px;
}
.fskc-form__note { margin: 0 0 18px; color: var(--fskc-muted); font-size: 14px; }

.fskc-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
}
.fskc-form__field { display: block; }
.fskc-form__field--wide { grid-column: 1 / -1; }
.fskc-form__field > span { display: block; margin-bottom: 6px; font-size: 13.5px; color: var(--fskc-muted); }

.fskc-form input[type="text"],
.fskc-form input[type="url"],
.fskc-form textarea {
	width: 100%;
	border: 1px solid var(--fskc-line);
	border-radius: 10px;
	padding: 11px 14px;
	font-size: 15px;
	font-family: inherit;
	color: var(--fskc-ink);
	background: #fff;
}
.fskc-form input:focus,
.fskc-form textarea:focus {
	outline: none;
	border-color: var(--fskc-green);
	box-shadow: 0 0 0 3px rgba(20, 135, 74, .12);
}
.fskc-form textarea { resize: vertical; min-height: 96px; }

/* Ловушка для ботов: поле есть в разметке, но человек его не видит. */
.fskc-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.fskc-form__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 18px;
}
.fskc-form__submit {
	border: 0;
	border-radius: 10px;
	background: var(--fskc-green);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	padding: 12px 24px;
	cursor: pointer;
}
.fskc-form__submit:hover { background: var(--fskc-green-dark); }
.fskc-form__msg { color: var(--fskc-muted); font-size: 14px; }
.fskc-form__msg.is-ok { color: var(--fskc-green-dark); }
.fskc-form__msg.is-err { color: #b3261e; }

/* ---------- страницы вендорских шаблонов ---------- */

/*
 * «Контакты», юридические страницы и всё, что рисует page.php темы: белые
 * блоки без общего радиуса и рамок, таблицы виджетов, заголовки виджетов.
 * Приводим к тому же виду, что и наши блоки.
 */
.white-block {
	background: #fff;
	border: 1px solid var(--fskc-line);
	border-radius: var(--fskc-radius);
	box-shadow: var(--fskc-shadow);
}
.white-block-content { padding: 20px 22px; }
.widget-title h4, .widget-title h3 {
	margin: 0 0 12px;
	font-size: 18px;
	letter-spacing: -.01em;
}
.main-listing { padding-bottom: 8px; }
.styled-select select {
	width: 100%;
	height: 44px;
	border: 1px solid var(--fskc-line);
	border-radius: 10px;
	background: #fff;
	padding: 0 12px;
	font-size: 15px;
}
.pagination { margin: 18px 0 0; }
.pagination > span, .pagination > a { margin-right: 6px; }

@media (max-width: 860px) {
	.fskc-filters__row--checks { font-size: 13.5px; }
	.fskc-form { padding: 18px; }
	.fskc-form__grid { grid-template-columns: 1fr; }
}

/* ---------- «поделиться» ---------- */

.fskc-share {
	position: absolute;
	top: 10px;
	right: 48px;
	z-index: 2;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--fskc-line);
	border-radius: 999px;
	background: #fff;
	color: var(--fskc-faint);
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}
.fskc-share svg { width: 16px; height: 16px; }
.fskc-share:hover { color: var(--fskc-green-dark); border-color: var(--fskc-mint-line); }

.fskc-sharepop {
	position: absolute;
	z-index: 1200;
	width: 208px;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--fskc-line);
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(17, 24, 39, .18);
}
.fskc-shr__head {
	margin: 0 0 9px;
	font-size: 12px;
	font-weight: 600;
	color: var(--fskc-faint);
	letter-spacing: .02em;
}
.fskc-shr__grid {
	display: grid;
	grid-template-columns: repeat(4, 40px);
	gap: 8px;
	justify-content: center;
}
.fskc-shr__grid a {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--fskc-ink);
	border-radius: 50%;
	transition: transform .15s ease, box-shadow .15s ease;
}
.fskc-shr__grid a:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(17, 24, 39, .18);
}
.fskc-shr__ic {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .02em;
}

.fskc-shr__copy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	margin-top: 10px;
	padding: 9px 12px;
	border: 1px solid var(--fskc-line);
	border-radius: 10px;
	background: #fff;
	color: var(--fskc-ink);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}
.fskc-shr__copy svg { width: 14px; height: 14px; }
.fskc-shr__copy:hover { border-color: var(--fskc-green); color: var(--fskc-green-dark); }

.fskc-modal__share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
}
.fskc-modal__sharelabel { color: var(--fskc-muted); font-size: 13px; }
.fskc-modal__shareicons { display: inline-flex; align-items: center; gap: 8px; }
/* Те же значки, что в панели на карточке, — только строкой в окне. */
.fskc-modal__share .fskc-shr__ic {
	width: 36px;
	height: 36px;
	font-size: 11.5px;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
}
.fskc-modal__share .fskc-shr__ic:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(17, 24, 39, .18); }
.fskc-shr__ic--copy {
	border: 1px solid var(--fskc-line);
	background: #fff;
	color: var(--fskc-ink);
}
.fskc-shr__ic--copy svg { width: 16px; height: 16px; }
.fskc-shr__ic--copy:hover { border-color: var(--fskc-green); color: var(--fskc-green-dark); }
.fskc-shr__ic--copy.is-done {
	background: var(--fskc-green-soft);
	border-color: var(--fskc-green);
	color: var(--fskc-green-dark);
}
.fskc-shr__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

/* ---------- визитка магазина и график переходов ---------- */

/* Отдельные стили, а не общий `.fskc-table`: у той таблицы минимальная
   ширина 520 px и серые плашки заголовков — в колонке 286 px это ломало
   раскладку. Здесь узкая таблица «подпись — число». */
.fskc-visitka {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.fskc-visitka th,
.fskc-visitka td { padding: 9px 0; border-bottom: 1px solid var(--fskc-line); vertical-align: top; }
.fskc-visitka th {
	color: var(--fskc-muted);
	font-weight: 400;
	text-align: left;
	background: none;
	font-size: 13.5px;
	line-height: 1.35;
	/* Подпись отдаём почти половину ширины: числа справа короткие,
	   а длинная дата («17 сентября 2026») должна дышать. */
	width: 45%;
}
.fskc-visitka td {
	text-align: right;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	padding-left: 10px;
	/* Кегль на полпункта меньше и отступ справа: раньше дата упиралась
	   в границу таблицы — владелец это и заметил. */
	padding-right: 3px;
	font-size: 13.5px;
}
.fskc-visitka tr:last-child th,
.fskc-visitka tr:last-child td { border-bottom: 0; }

.fskc-bars {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 68px;
	margin: 14px 0 0;
}
.fskc-bars__col {
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	gap: 4px;
}
.fskc-bars__bar {
	width: 100%;
	border-radius: 4px 4px 2px 2px;
	background: var(--fskc-green-soft);
	border-top: 2px solid var(--fskc-green);
}
.fskc-bars__day { font-size: 11px; color: var(--fskc-faint); text-transform: lowercase; }

/* ---------- «как применить код» ---------- */

.fskc-howto ol {
	list-style: none;
	counter-reset: fskc-step;
	display: grid;
	gap: 12px;
	margin: 0 0 12px;
	padding: 0;
}
.fskc-howto li {
	position: relative;
	padding: 0 0 0 44px;
	color: var(--fskc-muted);
	font-size: 15px;
	line-height: 1.55;
}
.fskc-howto li strong { color: var(--fskc-ink); }
.fskc-howto li::before {
	counter-increment: fskc-step;
	content: counter(fskc-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--fskc-green-soft);
	color: var(--fskc-green-dark);
	font-weight: 800;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- отзывы о магазине ---------- */

.fskc-reviewform { margin: 10px 0 4px; }
.fskc-reviewform label { display: block; font-size: 13px; color: var(--fskc-muted); margin-bottom: 6px; }
.fskc-reviewform textarea {
	width: 100%;
	border: 1px solid var(--fskc-line);
	border-radius: 10px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	resize: vertical;
	min-height: 72px;
	background: #fff;
	color: var(--fskc-ink);
}
.fskc-reviewform textarea:focus {
	outline: none;
	border-color: var(--fskc-green);
	box-shadow: 0 0 0 3px rgba(20, 135, 74, .12);
}
.fskc-reviewform__privacy { display: block; margin-top: 5px; color: var(--fskc-faint); font-size: 12px; line-height: 1.4; }
.fskc-reviewform__consent { display: flex !important; align-items: flex-start; gap: 7px; margin: 9px 0 0; color: var(--fskc-muted) !important; font-size: 12px !important; line-height: 1.4; }
.fskc-reviewform__consent input { flex: 0 0 auto; margin: 2px 0 0; }
.fskc-reviewform__consent a { color: var(--fskc-green-dark); text-decoration: underline; text-underline-offset: 2px; }
.fskc-reviewform__btn {
	margin-top: 8px;
	border: 0;
	border-radius: 9px;
	background: var(--fskc-green);
	color: #fff;
	font-weight: 600;
	font-size: 13.5px;
	padding: 9px 16px;
	cursor: pointer;
}
.fskc-reviewform__btn:hover { background: var(--fskc-green-dark); }
.fskc-reviewform__btn[disabled] { opacity: .6; cursor: default; }
.fskc-reviewform__msg { display: inline-block; margin-left: 10px; font-size: 13px; color: var(--fskc-muted); }
.fskc-reviewform__msg.is-ok { color: var(--fskc-green-dark); }
.fskc-reviewform__msg.is-err { color: #b3261e; }

.fskc-reviews ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fskc-reviews li { padding: 14px 16px; border: 1px solid var(--fskc-line); border-radius: 12px; }
.fskc-reviews__head { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; flex-wrap: wrap; }
.fskc-reviews__who { font-weight: 600; font-size: 14px; }
.fskc-reviews__head time { margin-left: auto; color: var(--fskc-faint); font-size: 12.5px; }
.fskc-reviews__text { margin: 0; color: var(--fskc-muted); font-size: 14.5px; line-height: 1.55; }

/* ---------- «другие магазины» под раскрытием ---------- */

.fskc-side__more { margin-top: 10px; }
.fskc-side__more summary {
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fskc-green-dark);
	list-style: none;
	display: flex;
	align-items: center;
	gap: 6px;
}
.fskc-side__more summary::-webkit-details-marker { display: none; }
.fskc-side__more summary::before {
	content: "＋";
	font-weight: 700;
	line-height: 1;
}
.fskc-side__more[open] summary::before { content: "−"; }
.fskc-side__more ul { margin-top: 8px; }

/* ---------- плашка «города» на странице магазина ---------- */

.fskc-cities { padding: 16px 18px; }
.fskc-cities__text {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
	color: var(--fskc-muted);
	font-size: 14px;
	line-height: 1.6;
}
.fskc-cities__text .fskc-ic {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--fskc-faint);
}

/* Кольцевая ссылка теперь без подписей — отдельный стиль не нужен. */

/* ---------- мини-карточки похожих предложений ---------- */

.fskc-list--mini {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.fskc-card--mini {
	display: flex;
	flex-direction: column;
	/* stretch, а не center: с center флекс-колонка ужимает обёртку кнопки,
	   и кнопка кода (подпись темы стоит абсолютом) схлопывается в полоску.
	   Тот же урок, что с плиткой: align-items в колонке и в сетке — разное. */
	align-items: stretch;
	text-align: center;
	gap: 10px;
	padding: 18px 16px 16px;
}
.fskc-card--mini .fskc-card__media { min-height: 46px; display: flex; align-items: center; justify-content: center; }
.fskc-card--mini .fskc-card__media .save-coupon { position: absolute; top: 0; right: 0; }
.fskc-card--mini .fskc-card__logo img { height: 38px; width: auto; max-width: 120px; max-height: 42px; }
.fskc-card--mini .fskc-btn-wrap .coupon-action-button { width: 100%; font-size: 13px; letter-spacing: 0; }

.fskc-mini__gain {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 3px 10px;
	border-radius: 8px;
	background: var(--fskc-green-soft);
	color: var(--fskc-green-dark);
	font-size: 13.5px;
	font-weight: 700;
}
/* Пустая плашка занимает место, но не выглядит плашкой. */
.fskc-mini__gain--empty { background: none; }

.fskc-card--mini .fskc-card__title {
	font-size: 15px;
	line-height: 1.4;
	margin: 0;
	/* Три строки — самая частая высота названия; по ним выравниваются
	   соседние карточки в ряду. */
	min-height: calc(3 * 1.4em);
}

.fskc-mini__store {
	font-size: 13px;
	color: var(--fskc-muted);
	text-decoration: none;
	min-height: 1.4em;
}
.fskc-mini__store span { color: var(--fskc-faint); }
.fskc-mini__store:hover { color: var(--fskc-green-dark); }
.fskc-mini__store--empty { display: block; }

.fskc-mini__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 12px;
	margin: 0;
	min-height: 1.4em;
	color: var(--fskc-faint);
	font-size: 12.5px;
}
.fskc-mini__meta .fskc-ic { width: 13px; height: 13px; }

.fskc-card--mini .fskc-btn-wrap { width: 100%; margin-top: auto; }

.fskc-mini__until {
	margin: 0;
	min-height: 1.4em;
	color: var(--fskc-faint);
	font-size: 12.5px;
}

@media (max-width: 1024px) {
	.fskc-list--mini { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 560px) {
	.fskc-list--mini { grid-template-columns: 1fr; }
	.fskc-card--mini { padding: 16px 14px; }
}

/* ---------- статья блога ---------- */

.fskc-article { padding: 30px 34px 26px; }
.fskc-article h1 { font-size: 32px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 10px; }
.fskc-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	color: var(--fskc-muted);
	font-size: 13.5px;
	margin: 0 0 20px;
}
.fskc-article__cover { margin: 0 0 20px; }
.fskc-article__cover img { max-width: 100%; height: auto; border-radius: var(--fskc-radius); }
.fskc-article__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--fskc-line);
}
.fskc-article__back { font-weight: 600; color: var(--fskc-green-dark); text-decoration: none; }
.fskc-article__back:hover { text-decoration: underline; }

/* Читаемая колонка: строка не длиннее ~80 знаков, абзацы дышат. */
.fskc-article .fskc-prose,
.fskc-article .fskc-prose p,
.fskc-article .fskc-prose li { max-width: 80ch; }
.fskc-article .fskc-prose { font-size: 16px; line-height: 1.72; color: #2f333b; }
.fskc-article .fskc-prose h2 { font-size: 24px; margin: 30px 0 12px; letter-spacing: -.015em; }
.fskc-article .fskc-prose h3 { font-size: 19px; margin: 24px 0 10px; }
.fskc-article .fskc-prose ul,
.fskc-article .fskc-prose ol { margin: 0 0 20px; padding-left: 24px; }
.fskc-article .fskc-prose ul li { list-style: disc; margin-bottom: 7px; }
.fskc-article .fskc-prose ol li { list-style: decimal; margin-bottom: 7px; }
.fskc-article .fskc-prose p { margin: 0 0 18px; }
.fskc-article .fskc-prose a {
	color: var(--fskc-green-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.fskc-article .fskc-prose a:hover { text-decoration-thickness: 2px; }
.fskc-article .fskc-prose em { color: var(--fskc-muted); }
.fskc-article .fskc-prose blockquote {
	margin: 20px 0;
	padding: 14px 20px;
	border-left: 3px solid var(--fskc-green);
	background: var(--fskc-green-soft);
	border-radius: 0 12px 12px 0;
}
.fskc-article .fskc-prose blockquote p { margin: 0; }

/*
 * Текст главной и ответы FAQ — на всю ширину блока (просьба владельца).
 *
 * В базовом правиле абзац ограничен 75 знаками ради читаемости, но на главной
 * блок шириной 1140 px, и справа оставалась пустая треть — это выглядело как
 * сломанная колонка без сайдбара. На страницах магазина и подборок ограничение
 * остаётся: там справа действительно есть колонка, и узкая строка уместна.
 */
.fskc-prose--wide p,
.fskc-prose--wide li { max-width: none; }
body.home .fskc-faq details > div { max-width: none; }

/* Список статей: карточка ведёт себя как ссылка целиком. */
.fskc-posts__more {
	display: inline-block;
	margin-top: 10px;
	font-weight: 600;
	font-size: 14px;
	color: var(--fskc-green-dark);
	text-decoration: none;
}
.fskc-posts__more:hover { text-decoration: underline; }

/* ---------- чужие крошки в шапке страниц темы ---------- */

/*
 * На страницах, которые рисует вендорский шаблон (например «Контакты»),
 * остаётся его полоса `.main-title`: заголовок слева, крошки справа,
 * и первым словом «Дома» — перевод строки Home. Своих крошек там нет,
 * поэтому приводим эти к нашему виду: под заголовок, слева, без фона.
 */
.main-title .flex-wrap { display: block; }
.main-title .flex-right { margin-top: 8px; }
.main-title .breadcrumb {
	background: none;
	padding: 0;
	margin: 0;
	font-size: 13.5px;
	color: var(--fskc-muted);
}
.main-title .breadcrumb > li + li::before { content: "/ "; color: var(--fskc-faint); }
.main-title .breadcrumb a { color: var(--fskc-muted); text-decoration: none; }
.main-title .breadcrumb a:hover { color: var(--fskc-green); }

@media (max-width: 860px) {
	.fskc-article { padding: 22px 18px; }
	.fskc-article h1 { font-size: 25px; }
}


/* ---------- «Предложить промокод»: группы, выбор типа, поля ---------- */

/* Поля, которые появились в форме позже: дата, число, список.
   Без них браузер рисует своё — форма выглядит разнородной. */
.fskc-form input[type="date"],
.fskc-form input[type="number"],
.fskc-form select {
	width: 100%;
	border: 1px solid var(--fskc-line);
	border-radius: 10px;
	padding: 11px 14px;
	font-size: 15px;
	font-family: inherit;
	color: var(--fskc-ink);
	background: #fff;
	-webkit-appearance: none;
	appearance: none;
}
.fskc-form select {
	background-image: linear-gradient(45deg, transparent 50%, var(--fskc-muted) 50%), linear-gradient(135deg, var(--fskc-muted) 50%, transparent 50%);
	background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 34px;
}
.fskc-form input[type="date"]:focus,
.fskc-form input[type="number"]:focus,
.fskc-form select:focus {
	outline: none;
	border-color: var(--fskc-green);
	box-shadow: 0 0 0 3px rgba(20, 135, 74, .12);
}

.fskc-form__group { margin: 0 0 22px; padding: 0 0 20px; border-bottom: 1px solid var(--fskc-line); }
.fskc-form__group:last-of-type { border-bottom: 0; padding-bottom: 0; }
.fskc-form__group-title {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fskc-muted);
}

.fskc-form__field small { display: block; margin-top: 6px; color: var(--fskc-muted); font-size: 12.5px; }
.fskc-form__field + .fskc-form__field { margin-top: 14px; }
.fskc-form__grid + .fskc-form__field { margin-top: 14px; }

/* Скрытое поле кода: [hidden] слабее наших display — держим его силой (R40). */
.fskc-form__field[hidden] { display: none !important; }

.fskc-form__code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: .04em;
}

/* Выбор типа: две карточки вместо радиокнопок — видно, чем они отличаются. */
.fskc-form__choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.fskc-choice { display: block; cursor: pointer; }
.fskc-choice input { position: absolute; opacity: 0; pointer-events: none; }
.fskc-choice > span {
	display: block;
	border: 1px solid var(--fskc-line);
	border-radius: 10px;
	padding: 12px 14px;
	transition: border-color .15s ease, background .15s ease;
}
.fskc-choice strong { display: block; font-size: 15px; color: var(--fskc-ink); }
.fskc-choice em { display: block; margin-top: 2px; font-size: 12.5px; font-style: normal; color: var(--fskc-muted); }
.fskc-choice input:checked + span { border-color: var(--fskc-green); background: rgba(20, 135, 74, .06); }
.fskc-choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(20, 135, 74, .16); }

/* Согласие: обычная галочка, но строка целиком — кликабельная. */
.fskc-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 14px;
	font-size: 13.5px;
	color: var(--fskc-muted);
	cursor: pointer;
}
.fskc-form__consent input { flex: 0 0 auto; margin-top: 2px; }

@media (max-width: 640px) {
	.fskc-form__choice { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- Типографика формы ----------
   Родительская тема вешает на `label` жирный вес и капс — в форме это
   делало смазанным всё: подписи, подсказки, значения полей и карточки
   выбора. Свои селекторы специфичнее, поэтому перекрываем их целиком,
   а вес расставляем по смыслу: подпись — 500, подсказка — 400,
   значение поля — 400, действие — 700. */
.fskc-form label,
.fskc-form__field,
.fskc-form__field > span,
.fskc-form__field small,
.fskc-form__consent,
.fskc-choice span,
.fskc-choice strong,
.fskc-choice em {
	font-weight: 400;
	text-transform: none;
}
.fskc-form__field > span { font-weight: 500; }
.fskc-choice strong { font-weight: 600; }
.fskc-form input,
.fskc-form select,
.fskc-form textarea { font-weight: 400; }
.fskc-form__submit { font-weight: 700; }

/* Значения покрупнее: 15 px на светлом фоне читается впритык, а 16 px
   ещё и не даёт мобильному Safari увеличивать страницу при фокусе. */
.fskc-form input[type="text"],
.fskc-form input[type="url"],
.fskc-form input[type="date"],
.fskc-form input[type="number"],
.fskc-form select,
.fskc-form textarea { font-size: 16px; }

/* Подсказка под полем: было 12.5 px того же цвета, что подпись, — сливалось. */
.fskc-form__field small { font-size: 13px; line-height: 1.45; }

/* Быстрый выбор срока: тот же приём, что у выбора типа. */
.fskc-form__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.fskc-chip-option { cursor: pointer; }
.fskc-chip-option input { position: absolute; opacity: 0; pointer-events: none; }
.fskc-chip-option > span {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--fskc-line);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 400;
	text-transform: none;
	color: var(--fskc-ink);
	transition: border-color .15s ease, background .15s ease;
}
.fskc-chip-option input:checked + span { border-color: var(--fskc-green); background: rgba(20, 135, 74, .07); }
.fskc-chip-option input:focus-visible + span { box-shadow: 0 0 0 3px rgba(20, 135, 74, .16); }

/* Скрытое поле даты: [hidden] слабее нашего display — держим силой (R40). */
.fskc-form input[hidden] { display: none !important; }

/* Внутри сетки отступ между полями даёт зазор, а не отступ соседа:
   иначе «минимальная сумма» и «категория» встают на разной высоте. */
.fskc-form__grid .fskc-form__field + .fskc-form__field { margin-top: 0; }

/* ---------- кнопка «наверх» ---------- */

/*
 * Кружок в правом нижнем углу: появляется после длинной прокрутки, когда
 * до меню иначе идти через весь экран. Цвет — тот же зелёный, что у кнопок
 * действия, и это единственный элемент сайта, который висит поверх текста,
 * поэтому тень мягкая: кнопку должно быть видно, но не должно быть слышно.
 */
.fskc-top {
	position: fixed;
	right: 20px;
	bottom: 22px;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--fskc-green);
	color: #fff;
	box-shadow: 0 6px 18px rgba(16, 24, 40, .18);
	cursor: pointer;
	transition: background .15s ease, transform .12s ease;
}

/* `[hidden]` из браузерных стилей слабее нашего `display: flex` — держим силой. */
.fskc-top[hidden] { display: none; }

.fskc-top:hover { background: var(--fskc-green-dark); transform: translateY(-1px); }
.fskc-top:focus-visible { outline: 2px solid var(--fskc-green); outline-offset: 3px; }
.fskc-top svg { display: block; width: 22px; height: 22px; }

@media (max-width: 600px) {
	.fskc-top { right: 14px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.fskc-top { transition: none; }
	.fskc-top:hover { transform: none; }
}