/**
 * Карточка предложения и страница магазина.
 *
 * Пишем поверх Bootstrap 3 родительской темы. Все классы с префиксом fskc-,
 * чужие селекторы не переопределяем: обновление родителя иначе молча ломает
 * вёрстку. Отдельно: внутренности кнопки кода не трогаем вовсе — там наложение
 * абсолютных блоков, и любой свой отступ выносит кнопку за край (правило R26).
 *
 * Проверять на 360, 768 и 1024 px.
 */

/*
 * Атрибут hidden должен побеждать всегда.
 *
 * Браузер скрывает [hidden] правилом `display: none` из своей таблицы,
 * а любое наше `display` в обычной таблице сильнее. Поэтому вкладки
 * «Промокоды / Акции» проставляли атрибут, а карточки оставались на месте —
 * фильтр не работал ни на одной странице сайта.
 */
[hidden] { display: none !important; }

:root {
	--fskc-ink: #16161a;
	--fskc-muted: #6e6e7a;
	--fskc-faint: #9a9aa6;
	--fskc-line: #e8e8ee;
	--fskc-soft: #f6f6f9;
	--fskc-green: #14874a;
	--fskc-green-dark: #0f6b3a;
	--fskc-green-soft: #eaf6ef;
	--fskc-shadow: 0 1px 2px rgba(22, 22, 26, .05);
	--fskc-shadow-hover: 0 4px 14px rgba(22, 22, 26, .09);
	--fskc-radius: 12px;
}

.fskc-store {
	/* Родительская тема отбивает <main> на 100px сверху под баннер страницы.
	   Своих баннеров мы не рисуем, и на телефоне это была пустая полоса
	   в пол-экрана перед первым блоком. */
	margin-top: 0;
	color: var(--fskc-ink);
	padding-bottom: 56px;
	font-size: 15px;
	line-height: 1.5;
}

.fskc-store h1,
.fskc-store h2,
.fskc-store h3 { color: var(--fskc-ink); }

/* ---------- шапка магазина ---------- */

.fskc-head {
	display: flex;
	gap: 24px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--fskc-line);
	border-radius: var(--fskc-radius);
	padding: 22px 24px;
	margin: 20px 0 12px;
	box-shadow: var(--fskc-shadow);
}

.fskc-head__logo {
	flex: 0 0 128px;
	max-width: 128px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
}
.fskc-head__logo img { max-width: 100%; max-height: 72px; height: auto; width: auto; display: block; }
.fskc-head__main { flex: 1 1 auto; min-width: 0; }

.fskc-head h1 {
	font-size: 27px;
	line-height: 1.18;
	margin: 0 0 6px;
	letter-spacing: -.01em;
}

.fskc-head__stats { color: var(--fskc-muted); font-size: 14px; margin: 0 0 4px; }
.fskc-head__stats strong { color: var(--fskc-ink); font-weight: 600; }

.fskc-rating { margin: 0 0 10px; font-size: 14px; }
.fskc-rating__value { font-weight: 700; font-size: 18px; }
.fskc-rating__count { color: var(--fskc-muted); margin-left: 6px; }

.fskc-head__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }

.fskc-visit {
	display: inline-block;
	background: var(--fskc-green);
	color: #fff;
	padding: 11px 22px;
	border-radius: 9px;
	text-decoration: none;
	font-weight: 600;
	transition: background .15s ease, transform .12s ease;
}
.fskc-visit:hover, .fskc-visit:focus { background: var(--fskc-green-dark); color: #fff; transform: translateY(-1px); }
.fskc-visit:focus-visible { outline: 2px solid var(--fskc-green); outline-offset: 3px; }

.fskc-disclosure {
	font-size: 13px;
	color: var(--fskc-faint);
	margin: 6px 0 18px;
	max-width: 92ch;
}

/* ---------- две колонки ---------- */

.fskc-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 24px;
	align-items: start;
}

/*
 * Правая колонка липнет при прокрутке, но своей прокрутки не имеет.
 *
 * `max-height` с `overflow-y: auto` давал внутри колонки второй скроллбар:
 * страница прокручивается, а содержимое колонки — отдельно, и до нижних
 * блоков добраться получалось только мышью внутри неё. Липнет теперь
 * не колонка целиком, а её верхняя карточка.
 */
.fskc-side {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-self: start;
}

.fskc-side > .fskc-storecard {
	position: sticky;
	top: 16px;
	z-index: 1;
}

/* ---------- вкладки ---------- */

.fskc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.fskc-tab {
	border: 1px solid var(--fskc-line);
	background: #fff;
	color: var(--fskc-ink);
	border-radius: 99px;
	padding: 8px 16px;
	font-size: 14px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.fskc-tab span {
	background: var(--fskc-soft);
	border-radius: 99px;
	padding: 1px 8px;
	font-size: 12.5px;
	color: var(--fskc-muted);
	font-variant-numeric: tabular-nums;
}

.fskc-tab:hover { border-color: var(--fskc-green); color: var(--fskc-green); }
.fskc-tab.is-active { background: var(--fskc-green); border-color: var(--fskc-green); color: #fff; }
.fskc-tab.is-active span { background: rgba(255, 255, 255, .24); color: #fff; }
.fskc-tab:focus-visible { outline: 2px solid var(--fskc-green); outline-offset: 2px; }

/* ---------- карточка ---------- */

.fskc-list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.fskc-card {
	--fskc-ink: #16161a;
	--fskc-muted: #6e6e7a;
	--fskc-faint: #9a9aa6;
	--fskc-line: #e8e8ee;
	--fskc-soft: #f6f6f9;
	--fskc-green: #14874a;
	--fskc-green-soft: #eaf6ef;
	--fskc-shadow: 0 1px 2px rgba(22, 22, 26, .05);
	--fskc-shadow-hover: 0 4px 14px rgba(22, 22, 26, .09);
	--fskc-radius: 12px;
	color: var(--fskc-ink);

	display: grid;
	/* Было 108 / 236 при отступах 20 — между блоком выгоды и названием
	   оставалась дыра, а у коротких названий пустовала вся середина.
	   Ужали крайние колонки и поля: на экран влезает на треть больше. */
	grid-template-columns: 92px minmax(0, 1fr) 218px;
	gap: 16px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--fskc-line);
	border-radius: var(--fskc-radius);
	padding: 14px 16px;
	box-shadow: var(--fskc-shadow);
	transition: box-shadow .16s ease, border-color .16s ease;
}

.fskc-card:hover { box-shadow: var(--fskc-shadow-hover); border-color: #d8d8e2; }

.fskc-list--muted .fskc-card,
.fskc-card.is-expired { opacity: .58; }
.fskc-list--muted .fskc-card:hover,
.fskc-card.is-expired:hover { opacity: .78; }

/* блок выгоды */

.fskc-card__media { position: relative; text-align: center; }

.fskc-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	background: var(--fskc-green-soft);
	color: var(--fskc-green);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.1;
	padding: 12px 8px;
	border-radius: 10px;
	word-break: break-word;
	font-variant-numeric: tabular-nums;
}

.fskc-badge--plain { background: var(--fskc-soft); color: var(--fskc-muted); font-size: 14px; font-weight: 600; }
.fskc-badge--percent { background: #eaf6ef; color: #14874a; }
.fskc-badge--money { background: #fff3e3; color: #9a5300; }
.fskc-badge--gift { background: #f4edff; color: #6127cf; }
.fskc-badge--delivery { background: #e8f1ff; color: #1857b8; }

/* Кнопку избранного рисует родительская тема — прижимаем в угол. */
.fskc-card__media .save-coupon,
.fskc-card__media a[class*="save"] {
	position: absolute;
	top: -8px;
	left: -10px;
	z-index: 2;
	background: #fff;
	border: 1px solid var(--fskc-line);
	border-radius: 50%;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: var(--fskc-faint);
}
.fskc-card__media .save-coupon:hover { color: #d4306a; border-color: #f1c6d5; }

/* центр */

.fskc-card__main { min-width: 0; }
.fskc-main, .fskc-side { min-width: 0; }

.fskc-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 7px; }

.fskc-flag,
.fskc-flag--best {
	display: inline-block;
	font-size: 11.5px;
	line-height: 1.7;
	border-radius: 5px;
	padding: 0 8px;
	white-space: nowrap;
	font-weight: 600;
}

.fskc-flag { background: #f4edff; color: #6127cf; }
.fskc-flag--best { background: #fff3e3; color: #9a5300; }

.fskc-card__store {
	font-size: 12.5px;
	color: var(--fskc-faint);
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}
.fskc-card__store:hover { color: var(--fskc-green); }

.fskc-card__title {
	font-size: 16.5px;
	line-height: 1.35;
	margin: 0 0 8px;
	font-weight: 600;
	letter-spacing: -.005em;
}

.fskc-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; }
.fskc-chips li {
	background: var(--fskc-soft);
	border-radius: 6px;
	padding: 3px 10px;
	font-size: 12.5px;
	color: var(--fskc-muted);
}

/* строка доверия */

.fskc-trust {
	margin: 0;
	font-size: 13px;
	color: var(--fskc-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	align-items: center;
}

.fskc-check {
	color: var(--fskc-green);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.fskc-used { font-variant-numeric: tabular-nums; }

.fskc-more {
	background: none;
	border: 0;
	padding: 0;
	color: var(--fskc-muted);
	font-size: 13px;
	cursor: pointer;
	border-bottom: 1px dotted currentColor;
}
.fskc-more:hover { color: var(--fskc-green); }
.fskc-more:focus-visible { outline: 2px solid var(--fskc-green); outline-offset: 3px; }

.fskc-details {
	margin-top: 10px;
	padding: 11px 13px;
	background: var(--fskc-soft);
	border-radius: 8px;
	font-size: 14px;
	color: var(--fskc-muted);
}
.fskc-details p { margin: 0 0 6px; }
.fskc-details p:last-child { margin-bottom: 0; }
.fskc-details__terms { color: var(--fskc-ink); }

/* правая часть */

.fskc-card__right {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 9px;
	align-items: stretch;
	justify-content: center;
}

.fskc-until { font-size: 12.5px; color: var(--fskc-faint); }
.fskc-until--none { font-style: italic; }
.fskc-expired-label { display: inline-block; font-size: 12.5px; color: #b3304a; font-weight: 600; }

/**
 * Внутренности кнопки НЕ трогаем: у темы `.code-text` — абсолютный блок
 * на 80% ширины поверх рамки, а хвост кода выглядывает справа из-под него.
 * Наша задача только дать место и правильную модель коробки.
 */
.fskc-btn-wrap { position: relative; display: block; }
.fskc-btn-wrap > a { display: block !important; width: 100%; }

.fskc-btn-wrap .coupon-action-button,
.fskc-btn-wrap .code-text,
.fskc-btn-wrap .partial-code {
	box-sizing: border-box;
	max-width: 100%;
}

.fskc-btn-wrap .code-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fskc-empty {
	color: var(--fskc-muted);
	padding: 20px;
	background: var(--fskc-soft);
	border-radius: var(--fskc-radius);
	text-align: center;
}

/* ---------- блоки основной колонки ---------- */

.fskc-block {
	background: #fff;
	border: 1px solid var(--fskc-line);
	border-radius: var(--fskc-radius);
	padding: 22px 24px;
	margin-bottom: 16px;
	box-shadow: var(--fskc-shadow);
}

.fskc-block > h2 { font-size: 20px; margin: 0 0 14px; letter-spacing: -.01em; }
.fskc-note { color: var(--fskc-faint); font-size: 13px; margin: 10px 0 0; }

.fskc-tablewrap { overflow-x: auto; }
.fskc-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.fskc-table th, .fskc-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--fskc-line); }
.fskc-table th { font-size: 12.5px; color: var(--fskc-muted); font-weight: 500; background: var(--fskc-soft); }
.fskc-table td:nth-child(3), .fskc-table td:nth-child(4) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fskc-table tr:last-child td { border-bottom: 0; }

.fskc-prose p { max-width: 75ch; }

.fskc-faq details { border-bottom: 1px solid var(--fskc-line); }
.fskc-faq details:last-child { border-bottom: 0; }
.fskc-faq summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 15px;
	padding: 13px 0;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: center;
}
.fskc-faq summary::-webkit-details-marker { display: none; }
.fskc-faq summary::after {
	content: "+";
	color: var(--fskc-faint);
	font-weight: 400;
	font-size: 19px;
	line-height: 1;
	flex: 0 0 auto;
}
.fskc-faq details[open] summary::after { content: "−"; }
.fskc-faq summary:hover { color: var(--fskc-green); }
.fskc-faq details > div { padding: 0 0 14px; color: var(--fskc-muted); max-width: 75ch; }

/* Селектор по голому тегу внутри блока дотянулся до каталога магазинов:
   у страницы был тот же класс на <main>, и её сетка превращалась во флекс.
   Отсюда прямой потомок и ограничение на список. */
.fskc-stores > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fskc-stores > ul a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--fskc-line);
	border-radius: 99px;
	padding: 7px 15px;
	font-size: 14px;
	text-decoration: none;
	color: var(--fskc-ink);
	transition: border-color .15s ease, color .15s ease;
}
.fskc-stores > ul a:hover { border-color: var(--fskc-green); color: var(--fskc-green); }
.fskc-stores > ul a span { color: var(--fskc-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ---------- правая колонка ---------- */

.fskc-side__box {
	background: #fff;
	border: 1px solid var(--fskc-line);
	border-radius: var(--fskc-radius);
	padding: 16px 18px;
	box-shadow: var(--fskc-shadow);
}

.fskc-side__box h2 {
	font-size: 12px;
	margin: 0 0 12px;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--fskc-faint);
	font-weight: 600;
}
.fskc-side__box p { margin: 0; font-size: 14px; color: var(--fskc-muted); }

.fskc-side__box dl { margin: 0; }
.fskc-side__box dl > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid var(--fskc-line);
	font-size: 14px;
}
.fskc-side__box dl > div:last-child { border-bottom: 0; }
.fskc-side__box dt { font-weight: 400; color: var(--fskc-muted); }
.fskc-side__box dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.fskc-side__info dd { font-weight: 400; overflow-wrap: anywhere; }

.fskc-side__cta {
	display: block;
	text-align: center;
	background: #fff;
	color: var(--fskc-green);
	border: 1.5px solid var(--fskc-green);
	border-radius: 9px;
	padding: 12px 16px;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.fskc-side__cta:hover, .fskc-side__cta:focus { background: var(--fskc-green); color: #fff; }

.fskc-side__list { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.fskc-side__list li { padding: 4px 0; color: var(--fskc-muted); }

.fskc-side__links { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.fskc-side__links li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid var(--fskc-line);
}
.fskc-side__links li:last-child { border-bottom: 0; }
.fskc-side__links a { color: var(--fskc-ink); text-decoration: none; }
.fskc-side__links a:hover { color: var(--fskc-green); }
.fskc-side__links span { color: var(--fskc-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.fskc-side__editor > div { display: flex; gap: 12px; align-items: center; }
.fskc-side__editor img { border-radius: 50%; }
.fskc-side__editor span { display: block; color: var(--fskc-muted); font-size: 13px; }
.fskc-side__editor p { margin-top: 10px; }
/* Ссылка «Как мы проверяем коды» — отдельным цветом: в тексте блока её иначе не отличить. */
.fskc-side__editor p a { color: #126f3e; text-decoration: underline; text-underline-offset: 2px; }
.fskc-side__editor p a:hover { color: #0e5630; }

/* ---------- карточка в общих списках темы ---------- */

.col-sm-12 > .fskc-card,
.col-sm-6 > .fskc-card,
.col-md-6 > .fskc-card,
.col-xs-12 > .fskc-card { margin-bottom: 12px; }

/*
 * Здесь раньше жила «сетка» в старом смысле — двухрядная раскладка той же
 * строки. Её правила спорили с настоящей плиткой ниже: `flex: 1 1 150px`
 * на обёртке кнопки растягивал её до 150 px, и плитка выходила под 370 px
 * высотой при кнопке в 46. Раскладки теперь описаны в одном месте — там же,
 * где плитка и плотная плитка.
 */

/* ---------- узкие экраны ---------- */

@media (max-width: 1024px) {
	.fskc-cols { grid-template-columns: minmax(0, 1fr) 286px; gap: 18px; }
	.fskc-card { grid-template-columns: 84px minmax(0, 1fr) 196px; gap: 14px; }
}

@media (max-width: 860px) {
	/* Именно minmax(0, 1fr), а не 1fr: у 1fr минимум равен max-content,
	   и строка «Проверено · Применён · Подробнее» растягивала колонку
	   до 550 px — страница уезжала вбок на телефоне. */
	.fskc-cols { grid-template-columns: minmax(0, 1fr); }
	.fskc-side { position: static; max-height: none; overflow: visible; }
	.fskc-head { flex-direction: column; align-items: flex-start; gap: 16px; }
	.fskc-head__logo { flex-basis: auto; justify-content: flex-start; }
	.fskc-head h1 { font-size: 22px; }

	.fskc-card {
		grid-template-columns: 88px minmax(0, 1fr);
		grid-template-areas: "media main" "right right";
		row-gap: 14px;
		align-items: start;
	}
	.fskc-card__media { grid-area: media; }
	.fskc-card__main { grid-area: main; }
	.fskc-card__right {
		grid-area: right;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		text-align: left;
		flex-wrap: wrap;
	}
	.fskc-card__right .fskc-btn-wrap { flex: 1 1 100%; order: 2; }
	.fskc-card__right .fskc-until,
	.fskc-card__right .fskc-expired-label { order: 1; }
}

@media (max-width: 420px) {
	.fskc-head, .fskc-block, .fskc-side__box { padding: 15px; }
	.fskc-card { padding: 14px; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
	.fskc-badge { font-size: 17px; min-height: 52px; padding: 10px 6px; }
	.fskc-card__title { font-size: 15.5px; }
	.fskc-head h1 { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.fskc-card, .fskc-visit, .fskc-tab, .fskc-stores > ul a, .fskc-side__cta { transition: none; }
	.fskc-visit:hover { transform: none; }
}


/* ---------- главная ---------- */

.fskc-hero {
	background: linear-gradient(180deg, #fff 0%, var(--fskc-soft) 100%);
	border: 1px solid var(--fskc-line);
	border-radius: var(--fskc-radius);
	padding: 34px 32px;
	margin: 20px 0 16px;
	text-align: center;
}

.fskc-hero h1 {
	font-size: 30px;
	line-height: 1.16;
	margin: 0 0 10px;
	letter-spacing: -.015em;
}

.fskc-hero__lead {
	color: var(--fskc-muted);
	font-size: 15.5px;
	max-width: 62ch;
	margin: 0 auto 20px;
}
.fskc-hero__lead strong { color: var(--fskc-ink); font-variant-numeric: tabular-nums; }

.fskc-search {
	display: flex;
	gap: 8px;
	max-width: 560px;
	margin: 0 auto 14px;
}

.fskc-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var(--fskc-line);
	border-radius: 9px;
	padding: 12px 16px;
	font-size: 15px;
	background: #fff;
	color: var(--fskc-ink);
}
.fskc-search input[type="search"]:focus {
	outline: 2px solid var(--fskc-green);
	outline-offset: 1px;
	border-color: var(--fskc-green);
}

.fskc-search button {
	flex: 0 0 auto;
	background: var(--fskc-green);
	color: #fff;
	border: 0;
	border-radius: 9px;
	padding: 12px 24px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease;
}
.fskc-search button:hover { background: var(--fskc-green-dark); }

.fskc-hero__quick { font-size: 13.5px; color: var(--fskc-faint); margin: 0; }
.fskc-hero__quick a {
	color: var(--fskc-muted);
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
	margin: 0 4px;
}
.fskc-hero__quick a:hover { color: var(--fskc-green); }

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

.fskc-cats a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	/* Названия в две строки («Электроника и техника») делали свою плитку выше
	   соседних, и ряд выглядел сбитым. Высоту задаём по двухстрочному имени,
	   чтобы совпадали все, а не только однострочные. */
	min-height: 70px;
	border: 1px solid var(--fskc-line);
	border-radius: 9px;
	padding: 12px 14px;
	text-decoration: none;
	color: var(--fskc-ink);
	font-size: 14.5px;
	transition: border-color .15s ease, background .15s ease;
}
.fskc-cats a:hover { border-color: var(--fskc-green); background: var(--fskc-green-soft); }
.fskc-cats__count {
	color: var(--fskc-faint);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
}

@media (max-width: 860px) {
	.fskc-hero { padding: 24px 18px; }
	.fskc-hero h1 { font-size: 23px; }
	.fskc-search { flex-direction: column; }
	.fskc-search button { width: 100%; }
}

/* ---------- иконки строки доверия ---------- */

/* Спрайт лежит в подвале и ничего не занимает, но display:none на <svg>
   в части браузеров отключал бы и <use> внутри — поэтому убираем размером. */
.fskc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.fskc-ic {
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	vertical-align: -2px;
	margin-right: 5px;
}

.fskc-check,
.fskc-used,
.fskc-more,
.fskc-until { display: inline-flex; align-items: center; }

.fskc-check { color: var(--fskc-green); font-weight: 600; gap: 0; }
.fskc-used { color: var(--fskc-muted); }

/* Точки-разделители вместо крупных промежутков: строка читается как одна
   фраза, а не как три оторванных метки (так же у promokod.com). */
.fskc-trust { gap: 4px 0; }
.fskc-sep { color: var(--fskc-line); margin: 0 9px; user-select: none; }

/* Кликом открывается вся карточка, поэтому курсор — на ней целиком.
   Вложенным ссылкам и кнопкам курсор возвращаем: у них своё назначение. */
.fskc-card { cursor: pointer; }
.fskc-card a,
.fskc-card button { cursor: pointer; }
.fskc-card__title { transition: color .14s ease; }
.fskc-card:hover .fskc-card__title { color: var(--fskc-green); }

.fskc-until .fskc-ic { opacity: .75; }

@media (max-width: 420px) {
	.fskc-sep { margin: 0 6px; }
}

.fskc-details__src {
	margin: 6px 0 0;
	font-size: 12.5px;
	color: var(--fskc-faint);
}

/* ---------- кнопка кода ---------- */

/*
 * Саму кнопку рисует родительская тема: оранжевая подпись абсолютом на 80%
 * ширины, под ней хвост кода. Внутренности не трогаем (R26) — правим только
 * внешнюю рамку кнопки. Без этого хвост висел на цвете страницы и выглядел
 * как обрезанная кнопка, а угол в 2px не имел отношения к остальной карточке.
 */
.fskc-btn-wrap .coupon-action-button {
	border-radius: 9px;
	overflow: hidden;
	/* тон подложки берём от рамки кнопки, а не нейтрально-серый:
	   хвост кода должен читаться как часть того же элемента */
	background: #fff6e8;
	text-decoration: none;
	transition: filter .15s ease;
}

.fskc-btn-wrap .coupon-action-button:hover { filter: brightness(.94); }
.fskc-btn-wrap .coupon-action-button:focus-visible { outline: 2px solid var(--fskc-green); outline-offset: 3px; }


/* ---------- каталог магазинов ---------- */

/* Заголовок страницы — не карточка: коробка вокруг заголовка и строки
   описания добавляет рамку и ничего не группирует. */
.fskc-pagehead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 24px;
	margin: 26px 0 18px;
}

.fskc-pagehead__text { min-width: 0; }

.fskc-pagehead h1 {
	font-size: 30px;
	line-height: 1.15;
	margin: 0 0 6px;
	letter-spacing: -.02em;
}

.fskc-pagehead p {
	margin: 0;
	color: var(--fskc-muted);
	font-size: 14.5px;
}
.fskc-pagehead p strong { color: var(--fskc-ink); font-variant-numeric: tabular-nums; }

/* поле поиска */

.fskc-field {
	position: relative;
	flex: 0 1 380px;
	display: flex;
	align-items: center;
}

.fskc-field .fskc-ic {
	position: absolute;
	left: 15px;
	width: 16px;
	height: 16px;
	margin: 0;
	color: var(--fskc-faint);
	pointer-events: none;
}

.fskc-field input[type="search"] {
	width: 100%;
	height: 46px;
	border: 1px solid var(--fskc-line);
	border-radius: 999px;
	background: #fff;
	padding: 0 16px 0 42px;
	font-size: 14.5px;
	color: var(--fskc-ink);
	box-shadow: var(--fskc-shadow);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fskc-field input[type="search"]::placeholder { color: var(--fskc-faint); }
.fskc-field input[type="search"]:focus {
	outline: none;
	border-color: var(--fskc-green);
	box-shadow: 0 0 0 3px rgba(20, 135, 74, .13);
}

.fskc-field__found {
	position: absolute;
	right: 16px;
	font-size: 12.5px;
	color: var(--fskc-faint);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
	background: #fff;
	padding-left: 8px;
}

/* плитка магазинов — раскладка, пока каталог небольшой */

/* Плитка магазинов сама состоит из карточек — держать её ещё и в белой
   панели значит рисовать карточку на карточке. Селектор удвоен: правило
   про панель стоит ниже по файлу и при равном весе выигрывало бы. */
.fskc-catalog__list.fskc-catalog__list--plain {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
}
.fskc-catalog__list--plain .fskc-letter { padding: 0; }

.fskc-storegrid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
	gap: 12px;
}

/* Плитка держит сердечко избранного в своём углу. */
.fskc-storegrid li { position: relative; }

.fskc-storegrid a {
	display: flex;
	flex-direction: column;
	/*
	 * Именно stretch, а не center.
	 *
	 * При `align-items: center` дочерние элементы сжимаются по содержимому,
	 * и `width: 100%` у полосы логотипа ни к чему не приводит: полоса получала
	 * нулевую ширину. Дальше складывалась замкнутая цепочка — полоса нулевая,
	 * значит картинка с `loading="lazy"` никогда не попадает в поле зрения,
	 * значит не грузится, значит полоса остаётся нулевой. Логотипы просто
	 * не появлялись, и ошибки загрузки при этом не было, так что запасная
	 * монограмма тоже не срабатывала.
	 *
	 * Содержимое центрируем текстом, а не выравниванием элементов.
	 */
	align-items: stretch;
	text-align: center;
	justify-content: center;
	gap: 12px;
	height: 100%;
	min-height: 132px;
	background: #fff;
	border: 1px solid var(--fskc-line);
	border-radius: var(--fskc-radius);
	padding: 18px 14px;
	text-decoration: none;
	color: var(--fskc-ink);
	box-shadow: var(--fskc-shadow);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.fskc-storegrid a:hover {
	border-color: #cfe7da;
	box-shadow: var(--fskc-shadow-hover);
	transform: translateY(-2px);
}
.fskc-storegrid a:focus-visible { outline: 2px solid var(--fskc-green); outline-offset: 2px; }

.fskc-storegrid__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 46px;
}
.fskc-storegrid__logo:has(.fskc-logo-img) .fskc-storegrid__mono { display: none; }

.fskc-storegrid__logo img {
	/* Ширину не задаём в процентах: у картинки должна остаться своя пропорция,
	   а место под неё держит полоса. */
	max-width: 132px;
	max-height: 46px;
	width: auto;
	height: auto;
	display: block;
}

/* Магазин без логотипа получает монограмму: пустое место в ряду
   с картинками читается как незагрузившееся изображение. */
.fskc-storegrid__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);
	font-size: 20px;
	font-weight: 700;
}

.fskc-storegrid__name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	overflow-wrap: anywhere;
}
.fskc-storegrid a:hover .fskc-storegrid__name { color: var(--fskc-green); }

/* указатель по алфавиту — раскладка для большого каталога */

.fskc-abc {
	position: sticky;
	top: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(6px);
	border: 1px solid var(--fskc-line);
	border-radius: var(--fskc-radius);
	padding: 8px 10px;
	margin-bottom: 14px;
}

/* Два ряда: русский алфавит и цифры с латиницей. Второй ряд отделён
   тонкой линией, чтобы указатель читался как две строки, а не как поток. */
.fskc-abc__row { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; min-width: 0; }
.fskc-abc__row + .fskc-abc__row { padding-top: 6px; border-top: 1px solid #eef1f0; }

.fskc-abc a,
.fskc-abc button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 6px;
	border-radius: 7px;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1;
	color: var(--fskc-ink);
}
.fskc-abc button {
	border: 0;
	background: none;
	font-family: inherit;
	cursor: pointer;
}

.fskc-abc a:hover,
.fskc-abc a:focus-visible,
.fskc-abc button:hover,
.fskc-abc button:focus-visible { background: var(--fskc-green-soft); color: var(--fskc-green); }
.fskc-abc a:focus-visible,
.fskc-abc button:focus-visible { outline: 2px solid var(--fskc-green); outline-offset: 1px; }

.fskc-abc button.is-active { background: var(--fskc-green); color: #fff; }
.fskc-abc button.is-active:hover { background: var(--fskc-green-dark); color: #fff; }

/* «Все» — пилюлей и с отступом: это не буква, а сброс отбора. */
.fskc-abc__all { padding: 0 12px !important; margin-right: 6px; background: var(--fskc-soft); border-radius: 999px !important; }

/*
 * Названия колонками, как у promokod.com: при сотнях магазинов список
 * плашками растянулся бы на десяток экранов, а колонки читаются сверху вниз
 * и занимают вчетверо меньше высоты.
 */
.fskc-catalog__list .fskc-letter__items {
	display: block;
	columns: 4 210px;
	column-gap: 26px;
}

.fskc-catalog__list .fskc-letter__items li {
	break-inside: avoid;
	margin-bottom: 2px;
	/* Сердечко магазина стоит рядом с плашкой, а не поверх неё: в списке
	   плашка узкая и кнопка в углу закрывала бы название. */
	display: flex;
	align-items: center;
	gap: 2px;
}
.fskc-letter__items .fskc-fav--store {
	position: static;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-color: transparent;
	background: none;
}
.fskc-letter__items .fskc-fav--store:hover { background: #fff5f8; }

.fskc-catalog__list .fskc-letter__items a {
	display: block;
	border: 0;
	border-radius: 6px;
	padding: 5px 8px;
	margin-left: -8px;
	font-size: 14px;
	background: none;
}
.fskc-catalog__list .fskc-letter__items a:hover {
	background: var(--fskc-green-soft);
	color: var(--fskc-green);
}

.fskc-letter__top {
	font-size: 12.5px;
	font-weight: 400;
	color: var(--fskc-faint);
	text-decoration: none;
	white-space: nowrap;
}
.fskc-letter__top:hover { color: var(--fskc-green); }

.fskc-catalog__list {
	background: #fff;
	border: 1px solid var(--fskc-line);
	border-radius: var(--fskc-radius);
	padding: 8px 22px 22px;
	box-shadow: var(--fskc-shadow);
}

.fskc-letter { padding: 14px 0 0; scroll-margin-top: 92px; }

.fskc-letter__title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 11px;
	color: var(--fskc-green);
}

/* Линия вправо от буквы: она и разделяет разделы, и задаёт ритм списку. */
/* Порядок в строке буквы: сама буква, линия, «Наверх». Псевдоэлемент всегда
   последний в разметке, поэтому порядок задаём явно — иначе линия уезжала
   за ссылку и выталкивала букву к правому краю. */
.fskc-letter__title span { order: 0; }
.fskc-letter__title::after {
	content: "";
	order: 1;
	flex: 1 1 auto;
	height: 1px;
	background: var(--fskc-line);
}
.fskc-letter__top { order: 2; }

.fskc-letter__title span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--fskc-green-soft);
	line-height: 1;
}

.fskc-letter__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.fskc-letter__items a {
	display: inline-block;
	max-width: 100%;
	border: 1px solid var(--fskc-line);
	border-radius: 8px;
	padding: 7px 13px;
	text-decoration: none;
	color: var(--fskc-ink);
	font-size: 14px;
	line-height: 1.3;
	overflow-wrap: anywhere;
	transition: border-color .13s ease, background .13s ease, color .13s ease;
}
.fskc-letter__items a:hover {
	border-color: var(--fskc-green);
	background: var(--fskc-green-soft);
	color: var(--fskc-green);
}
.fskc-letter__items a:focus-visible { outline: 2px solid var(--fskc-green); outline-offset: 1px; }

.fskc-catalog__empty {
	background: #fff;
	border: 1px dashed var(--fskc-line);
	border-radius: var(--fskc-radius);
	padding: 26px;
	text-align: center;
	color: var(--fskc-muted);
	margin-top: 12px;
}
.fskc-catalog__empty a { color: var(--fskc-green); }

.fskc-chipset { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.fskc-chipset a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--fskc-line);
	border-radius: 99px;
	padding: 7px 15px;
	font-size: 14px;
	text-decoration: none;
	color: var(--fskc-ink);
	background: #fff;
}
.fskc-chipset a:hover { border-color: var(--fskc-green); background: var(--fskc-green-soft); color: var(--fskc-green); }

@media (max-width: 860px) {
	.fskc-pagehead { margin: 18px 0 14px; align-items: stretch; }
	.fskc-pagehead h1 { font-size: 24px; }
	.fskc-field { flex: 1 1 100%; }
	.fskc-storegrid { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 10px; }
	.fskc-storegrid a { min-height: 118px; padding: 14px 10px; gap: 10px; }
	.fskc-catalog__list { padding: 4px 16px 16px; }

	/* На телефоне ряд букв не переносим, а прокручиваем: иначе указатель
	   разворачивается на треть экрана и липкая шапка перестаёт быть шапкой. */
	.fskc-abc__row {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.fskc-abc__row::-webkit-scrollbar { display: none; }
	.fskc-abc a { flex: 0 0 auto; }
}

@media (max-width: 420px) {
	.fskc-abc { padding: 6px; gap: 2px; }
	.fskc-abc a { min-width: 25px; height: 25px; font-size: 12.5px; }
	.fskc-storegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fskc-letter__items a { font-size: 13.5px; padding: 6px 11px; }
}

/* ---------- плитка и плотная плитка ---------- */

/*
 * Контейнер списка рисует вызывающий шаблон, и класс раскладки до него
 * не доходит. Поэтому ловим его двумя способами: :has() для свежих браузеров
 * и класс, который вешает скрипт, — для остальных. Достаточно любого.
 */
.fskc-list:has(.fskc-card--grid),
.fskc-list:has(.fskc-card--compact),
.fskc-list--tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
	/* Одинаковая высота у всех рядов, а не только внутри ряда: иначе соседние
	   ряды расходятся на два десятка пикселей и сетка выглядит расшатанной. */
	grid-auto-rows: 1fr;
	gap: 14px;
	align-items: stretch;
}

.fskc-list--tiles-compact,
.fskc-list:has(.fskc-card--compact) {
	grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
	gap: 12px;
}

.fskc-card--grid,
.fskc-card--compact {
	display: flex;
	flex-direction: column;
	/* Базовая карточка — сетка с align-items: center, и в колонке это
	   центрирование ужимало содержимое по ширине: кнопка кода получалась
	   в 71 px вместо всей ширины, а подпись обрезалась до «П...». */
	align-items: stretch;
	gap: 12px;
	padding: 18px 16px 16px;
	height: 100%;
}

.fskc-card--compact { padding: 15px 14px 14px; gap: 10px; }

/* ---- логотип ---- */

.fskc-card--grid .fskc-card__media,
.fskc-card--compact .fskc-card__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	text-align: center;
}
.fskc-card--compact .fskc-card__media { height: 38px; }

.fskc-card__logo { display: block; max-width: 100%; }
.fskc-card__logo img {
	/*
	 * Высота задана, а не «max-height»: часть логотипов сеть отдаёт в SVG
	 * без собственных width/height (только viewBox). Внутри <img> такой файл
	 * в плитке схлопывался в 0×0 — сверху карточки оставалась пустая полоса,
	 * и человек видел «сломанную» карточку. С заданной высотой браузер берёт
	 * пропорции из viewBox.
	 */
	height: 42px;
	width: auto;
	max-width: 140px;
	max-height: 44px;
	display: block;
	margin: 0 auto;
	object-fit: contain;
}

/* Монограмма вместо логотипа: у части магазинов картинки нет вовсе,
   и пустая полоса сверху читалась как сломанная карточка. */
.fskc-card__logo--mono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 auto;
	border-radius: 12px;
	background: var(--fskc-soft);
	color: var(--fskc-muted);
	font-size: 19px;
	font-weight: 700;
	line-height: 1;
}
.fskc-card--compact .fskc-card__logo--mono { width: 38px; height: 38px; font-size: 16px; }
.fskc-card--mini .fskc-card__logo--mono { margin: 0 auto; }

/* Плитка без логотипа и без магазина (страница самого магазина) не должна
   резервировать пустую полосу под картинку. */
.fskc-card--grid .fskc-card__media:not(:has(img)):not(:has(.fskc-card__logo--mono)),
.fskc-card--compact .fskc-card__media:not(:has(img)):not(:has(.fskc-card__logo--mono)),
.fskc-card--mini .fskc-card__media:not(:has(img)):not(:has(.fskc-card__logo--mono)) { display: none; }
.fskc-card--compact .fskc-card__logo img { height: 36px; max-width: 116px; max-height: 38px; }

/* Избранное — в правый верхний угол карточки, как у эталонов. Раньше оно
   стояло слева и сталкивалось с блоком выгоды. */
.fskc-card--grid .fskc-card__media .save-coupon,
.fskc-card--compact .fskc-card__media .save-coupon {
	top: -10px;
	left: auto;
	right: -6px;
}

/* ---- середина ---- */

.fskc-card--grid .fskc-card__main,
.fskc-card--compact .fskc-card__main {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

/*
 * Название занимает две строки всегда, даже если текст в одну: иначе кнопки
 * соседних плиток стоят на разной высоте и ряд выглядит рассыпавшимся.
 */
.fskc-card--grid .fskc-card__title,
.fskc-card--compact .fskc-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: 15px;
	line-height: 1.32;
	min-height: calc(2 * 1.32em);
}
.fskc-card--compact .fskc-card__title { font-size: 14px; min-height: calc(2 * 1.32em); }

/* Подпись под названием: выгода, проверка, срок — одной строкой. */
.fskc-tilemeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin: 0;
	font-size: 12.5px;
	color: var(--fskc-muted);
	line-height: 1.5;
}

.fskc-tilemeta__gain {
	background: var(--fskc-soft);
	color: var(--fskc-muted);
	border-radius: 6px;
	padding: 1px 8px;
	font-weight: 700;
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.fskc-tilemeta .fskc-check { font-size: 12.5px; font-weight: 600; }
.fskc-tilemeta .fskc-until { font-size: 12.5px; color: var(--fskc-faint); }
.fskc-tilemeta .fskc-ic { width: 13px; height: 13px; flex: 0 0 13px; margin-right: 4px; }

.fskc-card--grid .fskc-flags,
.fskc-card--compact .fskc-flags { margin: 0; }

.fskc-card--grid .fskc-trust,
.fskc-card--compact .fskc-trust { display: none; }

/* ---- низ ---- */

.fskc-card--grid .fskc-card__right,
.fskc-card--compact .fskc-card__right {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	/* Без nowrap плитка на узком экране переносит ссылку «Все промокоды …»
	   во вторую колонку флекса и вылезает за карточку: у мобильного правила
	   выше flex-wrap: wrap и flex-basis: 100% у кнопки. */
	flex-wrap: nowrap;
	gap: 8px;
	text-align: left;
	margin-top: auto;
}

.fskc-card--grid .fskc-card__right .fskc-btn-wrap,
.fskc-card--compact .fskc-card__right .fskc-btn-wrap { flex: 0 0 auto; order: 1; width: 100%; }

.fskc-card--grid .fskc-card__all,
.fskc-card--compact .fskc-card__all { align-self: stretch; }

.fskc-card--grid .fskc-btn-wrap,
.fskc-card--compact .fskc-btn-wrap { order: 1; display: block; }

.fskc-card--grid .fskc-btn-wrap .coupon-action-button,
.fskc-card--compact .fskc-btn-wrap .coupon-action-button {
	width: 100%;
	/* Кегль задаём на самой кнопке — внутренние блоки его наследуют,
	   и высота падает с 46 до 40 без вмешательства в их устройство (R26). */
	font-size: 13px;
	letter-spacing: 0;
}

/* В плотной плитке кнопка уже: подпись темы набрана прописными и стоит
   абсолютом на 80% ширины, при 13 px она упиралась в край. */
.fskc-card--compact .fskc-btn-wrap .coupon-action-button { font-size: 12px; }

.fskc-card__all {
	order: 2;
	font-size: 12.5px;
	color: var(--fskc-muted);
	text-decoration: none;
	border-bottom: 1px dotted transparent;
	align-self: flex-start;
	/* Ссылка не должна вылезать за карточку: длинное название магазина
	   («Все промокоды Интернет-магазин «билайн»») в плитке на узком экране
	   расширяло страницу до горизонтальной прокрутки. */
	max-width: 100%;
	overflow-wrap: anywhere;
}
.fskc-card__all:hover { color: var(--fskc-green); border-bottom-color: currentColor; }

@media (max-width: 560px) {
	.fskc-list--tiles,
	.fskc-list:has(.fskc-card--grid) { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
	.fskc-list--tiles-compact,
	.fskc-list:has(.fskc-card--compact) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fskc-card--grid, .fskc-card--compact { padding: 13px 12px 12px; }
	.fskc-card__logo img { max-width: 104px; }
}

@media (max-width: 480px) {
	.fskc-list--tiles,
	.fskc-list:has(.fskc-card--grid),
	.fskc-list--tiles-compact,
	.fskc-list:has(.fskc-card--compact) { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- полоса призыва на главной ---------- */

.fskc-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: var(--fskc-green-soft);
	border: 1px solid #cfe7da;
	border-radius: var(--fskc-radius);
	padding: 22px 26px;
	margin-bottom: 16px;
}

.fskc-cta h2 { margin: 0 0 4px; font-size: 19px; }
.fskc-cta p { margin: 0; color: var(--fskc-muted); font-size: 14.5px; }

.fskc-cta__btn {
	flex: 0 0 auto;
	background: var(--fskc-green);
	color: #fff;
	border-radius: 9px;
	padding: 12px 24px;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease;
}
.fskc-cta__btn:hover, .fskc-cta__btn:focus { background: var(--fskc-green-dark); color: #fff; }

/* Плитка была под 370 px высотой: слишком много для витрины, где ценность
   в том, сколько предложений видно сразу. Ужимаем заголовок и поля. */

@media (max-width: 560px) {
	.fskc-cta { padding: 18px; }
	.fskc-cta__btn { width: 100%; text-align: center; }
}


/* ---------- страница категорий ---------- */

.fskc-catgrid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
	gap: 12px;
}

.fskc-catgrid a {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	height: 100%;
	background: #fff;
	border: 1px solid var(--fskc-line);
	border-radius: var(--fskc-radius);
	padding: 18px;
	text-decoration: none;
	color: var(--fskc-ink);
	box-shadow: var(--fskc-shadow);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.fskc-catgrid a:hover {
	border-color: #cfe7da;
	box-shadow: var(--fskc-shadow-hover);
	transform: translateY(-2px);
}
.fskc-catgrid a:focus-visible { outline: 2px solid var(--fskc-green); outline-offset: 2px; }

.fskc-catgrid__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--fskc-green-soft);
	color: var(--fskc-green);
	flex: 0 0 auto;
}
.fskc-cat-ic { width: 24px; height: 24px; display: block; }

/*
 * Название занимает две строки всегда: «Электроника и техника» переносилась,
 * и её плитка была выше соседних — ряд выглядел сбитым.
 */
.fskc-catgrid__name {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	min-height: calc(2 * 1.3em);
	overflow-wrap: anywhere;
}
.fskc-catgrid a:hover .fskc-catgrid__name { color: var(--fskc-green); }

.fskc-catgrid__count {
	margin-top: auto;
	font-size: 12.5px;
	color: var(--fskc-faint);
	font-variant-numeric: tabular-nums;
}

/* Пустая категория показана бледнее: она есть, но идти в неё незачем. */
.fskc-catgrid a.is-empty { opacity: .62; }
.fskc-catgrid a.is-empty .fskc-catgrid__icon { background: var(--fskc-soft); color: var(--fskc-faint); }

@media (max-width: 420px) {
	.fskc-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.fskc-catgrid a { padding: 14px; }
	.fskc-catgrid__icon { width: 38px; height: 38px; }
	.fskc-cat-ic { width: 21px; height: 21px; }
}


/* ---------- карточка магазина в правой колонке ---------- */

.fskc-storecard {
	position: relative;
	text-align: center;
}

.fskc-storecard__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	margin-bottom: 12px;
}
.fskc-storecard__logo img {
	max-width: 170px;
	max-height: 56px;
	width: auto;
	height: auto;
	display: block;
}

/* Избранное — в угол карточки, как у всех трёх эталонов. */
.fskc-storecard__fav {
	position: absolute;
	top: 12px;
	right: 14px;
	font-size: 15px;
	color: var(--fskc-faint);
	line-height: 1;
}
.fskc-storecard__fav a { color: inherit; text-decoration: none; }
.fskc-storecard__fav a:hover { color: #d4306a; }

.fskc-storecard .fskc-rating { margin: 0 0 12px; }
.fskc-storecard .fskc-visit { display: block; text-align: center; }

/*
 * Свёрнутый вид липкой карточки.
 *
 * Карточка липнет к верху и едет вместе со страницей — так задумано ради
 * перехода в магазин. Но полная карточка с логотипом, оценкой, голосованием
 * и формой отзыва занимает пол-экрана и всё это время закрывает предложения.
 * Для перехода хватает строки: название магазина и кнопка. Полный состав
 * возвращается, как только карточка встала на своё место (класс ставит
 * store.js по положению — прилипла или нет).
 */
.fskc-visit__short { display: none; }
.fskc-storecard__name { display: none; }

.fskc-storecard--mini {
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: left;
	padding: 10px 12px;
}

.fskc-storecard--mini .fskc-storecard__fav,
.fskc-storecard--mini .fskc-storecard__logo,
.fskc-storecard--mini .fskc-rating,
.fskc-storecard--mini .fskc-vote,
.fskc-storecard--mini .fskc-reviewform { display: none; }

.fskc-storecard--mini .fskc-storecard__name {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.3;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.fskc-storecard--mini .fskc-visit {
	flex: 0 0 auto;
	display: inline-block;
	padding: 8px 14px;
	font-size: 14px;
}

.fskc-storecard--mini .fskc-visit__long { display: none; }
.fskc-storecard--mini .fskc-visit__short { display: inline; }

/* Заголовок стоит внутри левой колонки — верхний отступ задаёт сама колонка,
   а карточка магазина справа встаёт на одну с ним высоту. */
.fskc-main > .fskc-pagehead { margin: 0 0 10px; }
.fskc-main > .fskc-disclosure { margin-bottom: 16px; }
.fskc-cols { margin-top: 18px; }


/* ---------- хлебные крошки ---------- */

.fskc-crumbs {
	margin: 18px 0 10px;
	font-size: 13px;
	color: var(--fskc-faint);
}

.fskc-crumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
}

.fskc-crumbs a { color: var(--fskc-muted); text-decoration: none; }
.fskc-crumbs a:hover { color: var(--fskc-green); }
.fskc-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--fskc-line); }
.fskc-crumbs [aria-current] { color: var(--fskc-ink); }

/* Крошки идут над заголовком — верхний отступ у него уже не нужен. */
.fskc-crumbs + .fskc-pagehead { margin-top: 6px; }


/* ---------- звёзды оценки ---------- */

/*
 * Звёзды — две накладывающиеся строки одного символа: серая подложка
 * и золотая поверх, обрезанная по доле. Так 4.8 видно как «почти пять»,
 * а не как ровные пять звёзд.
 */
.fskc-stars {
	position: relative;
	display: inline-block;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 2px;
	color: #dcdce4;
	white-space: nowrap;
}
.fskc-stars::before { content: "★★★★★"; }

.fskc-stars__on {
	position: absolute;
	inset: 0;
	overflow: hidden;
	color: #f5a623;
}
.fskc-stars__on::before { content: "★★★★★"; }

.fskc-rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}
.fskc-rating__value { font-weight: 700; font-size: 16px; }
.fskc-rating__count { color: var(--fskc-muted); font-size: 13px; margin-left: 0; }

/* Голосование за магазин: звёзды — кнопки, а не картинка. */
.fskc-vote {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 2px 0 10px;
}
.fskc-vote__label { font-size: 13px; color: var(--fskc-muted); }
.fskc-vote__stars { display: inline-flex; gap: 2px; }
.fskc-vote__star {
	background: none;
	border: 0;
	padding: 0 2px;
	font-size: 20px;
	line-height: 1;
	color: #dcdce4;
	cursor: pointer;
	transition: color .12s ease, transform .12s ease;
}
.fskc-vote__star:hover { color: #f5a623; transform: translateY(-1px); }
.fskc-vote__star.is-on { color: #f5a623; }
.fskc-vote__star:focus-visible { outline: 2px solid var(--fskc-green); outline-offset: 2px; }
.fskc-vote__msg { font-size: 12px; color: var(--fskc-muted); flex-basis: 100%; text-align: center; }

/* ---------- окно промокода ---------- */

.fskc-modal {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

body.fskc-modal-open { overflow: hidden; }

.fskc-modal__back {
	position: absolute;
	inset: 0;
	background: rgba(22, 22, 26, .55);
	backdrop-filter: blur(2px);
}

.fskc-modal__win {
	position: relative;
	width: 100%;
	max-width: 460px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(22, 22, 26, .28);
	animation: fskc-pop .16s ease-out;
}

@keyframes fskc-pop {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to { opacity: 1; transform: none; }
}

.fskc-modal__x {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 8px;
	background: var(--fskc-soft);
	color: var(--fskc-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.fskc-modal__x:hover { background: #e9e9ef; color: var(--fskc-ink); }

.fskc-modal__head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 56px 16px 22px;
	border-bottom: 1px solid var(--fskc-line);
}

.fskc-modal__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 44px;
}
.fskc-modal__logo img { max-width: 62px; max-height: 44px; width: auto; height: auto; display: block; }

.fskc-modal__head h2 {
	margin: 0;
	font-size: 17px;
	line-height: 1.3;
	color: var(--fskc-ink);
}

.fskc-modal__until {
	margin: 5px 0 0;
	font-size: 12.5px;
	color: var(--fskc-faint);
}

.fskc-modal__body { padding: 20px 22px 22px; }

/* Код — крупно и в рамке из штрихов: это главное, ради чего окно открыли. */
.fskc-modal__code { text-align: center; margin-bottom: 16px; }

.fskc-modal__label {
	display: block;
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fskc-faint);
	margin-bottom: 8px;
}

.fskc-modal__coderow {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.fskc-modal__copy {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	border: 0;
	border-radius: 12px;
	padding: 0 18px;
	background: var(--fskc-green);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease;
}
.fskc-modal__copy:hover { background: var(--fskc-green-dark); }
.fskc-modal__copy:focus-visible { outline: 2px solid var(--fskc-green); outline-offset: 2px; }
.fskc-modal__copy.is-done { background: #0f6b3a; }
.fskc-modal__copy .fskc-ic { width: 15px; height: 15px; margin: 0; }

.fskc-modal__value {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	border: 2px dashed #cfe7da;
	border-radius: 12px;
	background: var(--fskc-green-soft);
	padding: 16px 18px;
	font-family: inherit;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: .04em;
	color: var(--fskc-green-dark);
	cursor: pointer;
	word-break: break-all;
	transition: background .15s ease, border-color .15s ease;
}
.fskc-modal__value:hover { background: #dff0e6; border-color: var(--fskc-green); }
.fskc-modal__value:focus-visible { outline: 2px solid var(--fskc-green); outline-offset: 2px; }

.fskc-modal__hint {
	display: block;
	margin-top: 8px;
	font-size: 12.5px;
	color: var(--fskc-faint);
}
.fskc-modal__hint.is-done { color: var(--fskc-green); font-weight: 600; }

.fskc-modal__terms {
	margin: 0 0 16px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--fskc-muted);
}

.fskc-modal__go {
	display: block;
	text-align: center;
	background: var(--fskc-green);
	color: #fff;
	border-radius: 10px;
	padding: 14px 20px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: background .15s ease;
}
.fskc-modal__go:hover, .fskc-modal__go:focus { background: var(--fskc-green-dark); color: #fff; }

.fskc-modal__note {
	margin: 12px 0 0;
	text-align: center;
	font-size: 12.5px;
	color: var(--fskc-faint);
}

@media (max-width: 480px) {
	/* На телефоне кнопка уходит под код: рядом они оба становятся тесными. */
	.fskc-modal__coderow { flex-direction: column; }
	.fskc-modal__copy { padding: 13px 18px; }

	.fskc-modal { padding: 12px; align-items: flex-end; }
	.fskc-modal__win { max-width: none; border-radius: 16px 16px 0 0; }
	.fskc-modal__head { padding: 18px 50px 14px 16px; }
	.fskc-modal__body { padding: 16px; }
	.fskc-modal__value { font-size: 22px; padding: 14px; }
}