/*
 * page.css — оформление страниц-подборок.
 *
 * Подключается только на страницах, собранных конструктором (CLAUDE.md §3.7).
 * Раскладка зависит от ширины самого блока, а не окна: колонка страницы
 * у темы узкая, и ширина окна о ней ничего не говорит. Порог тот же,
 * что у телефона в контракте (§11) — 600 px.
 *
 * Сила свечения одна на весь сайт, решение заказчика от 22 октября 2026:
 * меняется двумя переменными ниже, а не настройкой в блоке.
 */

.nn-pb {
	--nn-pb-glow: 16px;
	--nn-pb-glow-alpha: 40%;
	--nn-pb-gap: var(--nn-space-4, 16px);
	--nn-pb-radius: var(--nn-radius-lg, 16px);

	container-type: inline-size;
	display: grid;
	gap: var(--nn-pb-gap);
	margin: 0 auto;
}

.nn-pb-hide-title .nn-entry__title {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ------------------------------------------------------------------
 * Шрифты текстов на выбор (поле «Шрифт» у текста).
 *
 * Файлы лежат в плагине, как шрифты темы, а не тянутся с Google Fonts:
 * доступность внешнего хоста не гарантирована (см. fonts.css темы).
 * Браузер скачивает файл, только когда текст этим шрифтом есть на
 * странице, и только нужный алфавит — разбивка по unicode-range.
 *
 * У Cinzel нет кириллицы. Русские буквы в «NN PB Cinzel» берутся
 * из Cormorant SC Bold: те же римские прописные, а без подмены
 * кириллица падала бы в шрифт подстановки и выглядела бы чужой.
 *
 * Файлы — Fontsource 5.2.8 (Google Fonts), лицензия Open Font License.
 * ------------------------------------------------------------------ */

@font-face {
	font-family: "NN PB Cinzel";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/cinzel-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "NN PB Cinzel";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/cormorant-sc-cyrillic-700-normal.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "NN PB Montserrat";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/montserrat-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "NN PB Montserrat";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/montserrat-cyrillic-400-normal.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "NN PB Montserrat";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/montserrat-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "NN PB Montserrat";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/montserrat-cyrillic-700-normal.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "NN PB Cormorant";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "NN PB Cormorant";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/cormorant-garamond-cyrillic-400-normal.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "NN PB Cormorant";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "NN PB Cormorant";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/cormorant-garamond-cyrillic-700-normal.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

.nn-pb-t.nn-pb-f-cinzel { font-family: "NN PB Cinzel", "Times New Roman", serif; font-weight: 700; }
.nn-pb-t.nn-pb-f-montserrat { font-family: "NN PB Montserrat", "Helvetica Neue", Arial, sans-serif; }
.nn-pb-t.nn-pb-f-cormorant { font-family: "NN PB Cormorant", Georgia, "Times New Roman", serif; }

/* «Regular» значит обычное начертание и в заголовке, если не стоит «Ж». */
.nn-pb-t.nn-pb-f-montserrat.nn-pb-s-xl:not(.is-bold) { font-weight: 400; }

/* ------------------------------------------------------------------
 * Блок
 * ------------------------------------------------------------------ */

.nn-pb-block {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-sizing: border-box;
	min-width: 0;
	border: 1.5px solid var(--nn-pb-accent);
	border-radius: var(--nn-pb-radius);
	background: var(--nn-color-surface, #0b1322);
	color: var(--nn-color-text, #dfe7ee);
}

.nn-pb-neon {
	box-shadow: 0 0 var(--nn-pb-glow) color-mix(in srgb, var(--nn-pb-accent) var(--nn-pb-glow-alpha), transparent);
}

.nn-pb-h-s { min-height: 140px; }
.nn-pb-h-m { min-height: 220px; }
.nn-pb-h-l { min-height: 320px; }
.nn-pb-h-xl { min-height: 420px; }

.nn-pb-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
}

.nn-pb-fit-cover { background-size: cover; }
.nn-pb-fit-contain { background-size: contain; }
.nn-pb-focus-center { background-position: center; }
.nn-pb-focus-top { background-position: top; }
.nn-pb-focus-bottom { background-position: bottom; }
.nn-pb-focus-left { background-position: left; }
.nn-pb-focus-right { background-position: right; }

/*
 * Затемнения картинки нет: оно делало картинки тусклыми (замечание
 * заказчика от 22 октября). Читаемость текста на картинке даёт тень букв,
 * а длинный текст лучше ставить под картинкой — режим «stack».
 */

/*
 * Картинка сверху, текст в блоке под ней. Высота картинки — по её
 * собственным пропорциям, поэтому логотип и кадр не обрезаются.
 * Подложка текста тонируется цветом рамки.
 */
.nn-pb-layout-stack {
	background: linear-gradient(180deg, color-mix(in srgb, var(--nn-pb-accent) 24%, #0a1020), color-mix(in srgb, var(--nn-pb-accent) 8%, #060a14));
}

.nn-pb-layout-stack .nn-pb-img {
	position: relative;
	inset: auto;
	flex: none;
	height: auto;
	aspect-ratio: var(--nn-pb-ratio, 16 / 9);
	background-size: cover;
}

.nn-pb-layout-stack.nn-pb-h-s,
.nn-pb-layout-stack.nn-pb-h-m,
.nn-pb-layout-stack.nn-pb-h-l,
.nn-pb-layout-stack.nn-pb-h-xl { min-height: 0; }

.nn-pb-layout-stack .nn-pb-body { padding-top: var(--nn-space-3, 12px); }

.nn-pb-layout-stack .nn-pb-t { text-shadow: none; }

/*
 * Горизонтальная плитка: картинка слева, текст справа, на всю ширину.
 * В узком блоке (< 600 px) схлопывается в «картинка сверху, текст под ней».
 */
.nn-pb-layout-side {
	background: linear-gradient(90deg, color-mix(in srgb, var(--nn-pb-accent) 24%, #0a1020), color-mix(in srgb, var(--nn-pb-accent) 8%, #060a14));
}

.nn-pb-layout-side.nn-pb-h-s,
.nn-pb-layout-side.nn-pb-h-m,
.nn-pb-layout-side.nn-pb-h-l,
.nn-pb-layout-side.nn-pb-h-xl { min-height: 0; }

.nn-pb-layout-side .nn-pb-t { text-shadow: none; }

@container (min-width: 600px) {
	.nn-pb-block.nn-pb-layout-side { flex-direction: row; min-height: 220px; }
	.nn-pb-layout-side .nn-pb-img {
		position: relative;
		inset: auto;
		flex: 0 0 42%;
		height: auto;
		min-height: 100%;
		background-size: cover;
	}
	.nn-pb-layout-side .nn-pb-body { padding: var(--nn-space-4, 16px) var(--nn-space-5, 24px); }
}

@container (max-width: 599px) {
	.nn-pb-layout-side .nn-pb-img {
		position: relative;
		inset: auto;
		flex: none;
		height: auto;
		aspect-ratio: var(--nn-pb-ratio, 16 / 9);
		background-size: cover;
	}
	.nn-pb-layout-side .nn-pb-body { padding-top: var(--nn-space-3, 12px); }
}

/*
 * Горизонтальная плитка с картинкой на всю плитку: картинка — подложка,
 * текст в правой части. Без затемнения; читаемость — тень букв.
 * В узком блоке — «картинка сверху, текст под ней».
 */
.nn-pb-layout-sidebg.nn-pb-h-s,
.nn-pb-layout-sidebg.nn-pb-h-m,
.nn-pb-layout-sidebg.nn-pb-h-l,
.nn-pb-layout-sidebg.nn-pb-h-xl { min-height: 0; }

@container (min-width: 600px) {
	.nn-pb-block.nn-pb-layout-sidebg { min-height: 220px; }
	.nn-pb-layout-sidebg .nn-pb-body {
		flex: none;
		align-self: stretch;
		width: 52%;
		margin-left: auto;
		padding: var(--nn-space-4, 16px) var(--nn-space-5, 24px);
	}
}

@container (max-width: 599px) {
	.nn-pb-layout-sidebg {
		background: linear-gradient(180deg, color-mix(in srgb, var(--nn-pb-accent) 24%, #0a1020), color-mix(in srgb, var(--nn-pb-accent) 8%, #060a14));
	}
	.nn-pb-layout-sidebg .nn-pb-img {
		position: relative;
		inset: auto;
		flex: none;
		height: auto;
		aspect-ratio: var(--nn-pb-ratio, 16 / 9);
		background-size: cover;
	}
	.nn-pb-layout-sidebg .nn-pb-body { padding-top: var(--nn-space-3, 12px); }
	.nn-pb-layout-sidebg .nn-pb-t { text-shadow: none; }
}

/*
 * Высота по пропорциям картинки. Переменная --nn-pb-ratio стоит
 * на самом блоке, её ставит вывод.
 *
 * Блок из одной картинки держит пропорции всегда, при любой «Высоте»
 * и любом расположении: картинка видна целиком на любой ширине экрана.
 * Пустая подложка текста ему не нужна.
 *
 * «Текст поверх картинки» с высотой «авто» — тоже по картинке, но
 * длинный текст растягивает блок. Одним aspect-ratio этого не сделать:
 * у блока overflow: hidden, и тогда высота содержимого его не растягивает.
 * Поэтому распорка по пропорциям картинки и текст лежат в одной ячейке
 * сетки, и высота ряда — большая из двух.
 */
.nn-pb .nn-pb-layout-overlay.nn-pb-h-auto.nn-pb-has-img {
	display: grid;
	grid-template: 1fr / 1fr;
}

.nn-pb .nn-pb-layout-overlay.nn-pb-h-auto.nn-pb-has-img::before {
	content: "";
	grid-area: 1 / 1;
	aspect-ratio: var(--nn-pb-ratio, 16 / 9);
}

.nn-pb .nn-pb-layout-overlay.nn-pb-h-auto.nn-pb-has-img > .nn-pb-body { grid-area: 1 / 1; }

.nn-pb .nn-pb-block.nn-pb-imgonly {
	aspect-ratio: var(--nn-pb-ratio, 16 / 9);
	min-height: 0;
	flex-direction: column;
	background: var(--nn-color-surface, #0b1322);
}

.nn-pb .nn-pb-block.nn-pb-imgonly .nn-pb-img {
	position: absolute;
	inset: 0;
	flex: none;
	width: 100%;
	height: 100%;
	min-height: 0;
	aspect-ratio: auto;
}

.nn-pb .nn-pb-block.nn-pb-imgonly .nn-pb-body { display: none; }

/*
 * Номер блока: золотой кружок с тёмной заливкой. В плитке с картинкой
 * сверху — в углу блока, в горизонтальной — в тексте перед заголовком.
 */
.nn-pb-num {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 34px;
	height: 34px;
	border: 2px solid #d9a93a;
	border-radius: 50%;
	background: #0a0f1c;
	box-shadow: 0 0 8px rgba(217, 169, 58, 0.45);
	color: #f0c45a;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

.nn-pb-block > .nn-pb-num {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
}

.nn-pb-zone > .nn-pb-num { align-self: flex-start; }

/* ------------------------------------------------------------------
 * Содержимое: три зоны сверху вниз, внутри зоны тексты идут потоком.
 * Наложиться друг на друга они не могут.
 * ------------------------------------------------------------------ */

.nn-pb-body {
	position: relative;
	z-index: 2;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--nn-space-4, 16px);
	box-sizing: border-box;
	min-width: 0;
	padding: var(--nn-space-4, 16px);
}

/* Длинный адрес ссылки переносится, а не вылезает за плитку. */
.nn-pb-t { overflow-wrap: anywhere; }

.nn-pb-zone {
	display: flex;
	flex-direction: column;
	gap: var(--nn-space-2, 8px);
}

.nn-pb-zone:empty { display: none; }

.nn-pb-zone--middle {
	flex: 1;
	justify-content: center;
}

.nn-pb-zone--top { justify-content: flex-start; }
.nn-pb-zone--bottom { justify-content: flex-end; }

.nn-pb-zone--top:empty + .nn-pb-zone--middle:empty + .nn-pb-zone--bottom { margin-top: auto; }

.nn-pb-a-left { align-self: flex-start; text-align: left; }
.nn-pb-a-center { align-self: center; text-align: center; }
.nn-pb-a-right { align-self: flex-end; text-align: right; }

.nn-pb-t {
	max-width: 100%;
	margin: 0;
	line-height: 1.3;
	overflow-wrap: anywhere;
	text-shadow: 0 1px 6px rgb(0 0 0 / 80%), 0 0 14px rgb(0 0 0 / 55%);
}

.nn-pb-s-s { font-size: 13px; }
.nn-pb-s-m { font-size: 16px; }
.nn-pb-s-l { font-size: 22px; }
.nn-pb-s-xl { font-size: clamp(24px, 6cqw, 40px); line-height: 1.1; text-transform: uppercase; }

.nn-pb-t.is-bold { font-weight: 700; }
.nn-pb-t.is-italic { font-style: italic; }
.nn-pb-s-xl { font-weight: 800; }

.nn-pb-link {
	color: var(--nn-pb-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.nn-pb-link:hover { text-decoration-thickness: 2px; }

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

/*
 * Кнопка по образцу заказчика (31.10.2026): тёмное стекло, неоновое кольцо
 * и свечение цвета кнопки (по умолчанию — цвет рамки блока). При наведении
 * кнопка чуть растёт, по кольцу идёт мягкая полоса света. Острая искра
 * из образца заменена размытой полосой — решение заказчика.
 */
@property --nn-pb-btn-a {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

.nn-pb-btn {
	--nn-pb-neon: var(--nn-pb-btn-fill, var(--nn-pb-accent));
	position: relative;
	isolation: isolate;
	display: inline-block;
	max-width: 100%;
	box-sizing: border-box;
	border: 2px solid var(--nn-pb-neon);
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--nn-pb-neon) 32%, #183653) 0%,
		color-mix(in srgb, var(--nn-pb-neon) 12%, #081428) 30%,
		#020711 68%,
		color-mix(in srgb, var(--nn-pb-neon) 16%, #0b1429) 100%);
	box-shadow:
		0 0 6px var(--nn-pb-neon),
		0 0 22px color-mix(in srgb, var(--nn-pb-neon) 50%, transparent),
		inset 0 0 12px color-mix(in srgb, var(--nn-pb-neon) 30%, transparent),
		inset 0 2px 6px rgba(255, 255, 255, .19);
	text-shadow: 0 0 9px color-mix(in srgb, var(--nn-pb-neon) 75%, transparent);
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .08em;
	transition: transform .25s ease, box-shadow .25s ease;
}

/*
 * Стеклянный блик в верхней половине — размытый овал без краёв, как в образце
 * заказчика: светлый сверху, тает книзу, с лёгким оттенком цвета кнопки.
 */
.nn-pb-btn::after {
	content: "";
	position: absolute;
	inset: 10% 5% auto;
	height: 38%;
	z-index: -1;
	border-radius: 50%;
	background: linear-gradient(180deg, color-mix(in srgb, var(--nn-pb-neon) 20%, rgba(225, 240, 255, .55)), transparent 90%);
	filter: blur(3px);
	pointer-events: none;
}

/* Полоса света по кольцу: вращающийся конический градиент, вырезанный маской в кольцо. */
.nn-pb-btn::before {
	content: "";
	position: absolute;
	inset: -3px;
	padding: 4px;
	border-radius: inherit;
	background: conic-gradient(from var(--nn-pb-btn-a),
		transparent 0deg 200deg,
		color-mix(in srgb, var(--nn-pb-neon) 70%, transparent) 290deg,
		#fff 335deg,
		transparent 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	opacity: 0;
	transition: opacity .3s;
	animation: nn-pb-btn-spin 3s linear infinite paused;
	pointer-events: none;
}

@keyframes nn-pb-btn-spin {
	to { --nn-pb-btn-a: 360deg; }
}

/*
 * Кнопка перевода (галочка «Сайт на иностранном языке»): тот же цвет, кольцо
 * и свечение, что у основной кнопки над ней (просьба администратора
 * 09.11.2026); отличается только размером и строчными буквами.
 */
.nn-pb-btn.nn-pb-btn--tr {
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: none;
}

.nn-pb-btn--full {
	display: block;
	width: 100%;
	align-self: stretch;
	text-align: center;
}

.nn-pb-btn:hover,
.nn-pb-btn:focus-visible {
	transform: scale(1.03);
	text-decoration: none; /* у темы a:hover подчёркивает */
	box-shadow:
		0 0 10px var(--nn-pb-neon),
		0 0 38px color-mix(in srgb, var(--nn-pb-neon) 70%, transparent),
		inset 0 0 14px color-mix(in srgb, var(--nn-pb-neon) 40%, transparent),
		inset 0 2px 8px rgba(255, 255, 255, .27);
}

.nn-pb-btn:hover::before,
.nn-pb-btn:focus-visible::before {
	opacity: 1;
	animation-play-state: running;
}

.nn-pb-btn:active { transform: scale(.985); }

.nn-pb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
	.nn-pb-btn { transition: none; }
	.nn-pb-btn::before { display: none; }
	.nn-pb-btn:hover,
	.nn-pb-btn:focus-visible { transform: none; }
}

.nn-pb-shape-round { border-radius: 10px; }
.nn-pb-shape-pill { border-radius: 999px; }
.nn-pb-shape-square { border-radius: 2px; }

.nn-pb-bs-s { padding: 8px 16px; font-size: 12.5px; }
.nn-pb-bs-m { padding: 11px 22px; font-size: 14px; }
.nn-pb-bs-l { padding: 15px 30px; font-size: 17px; }

/* ------------------------------------------------------------------
 * Раскладка: полоса — во всю ширину, плитки — по две в ряд.
 * Плитки одного ряда тянутся до высоты самой длинной (align-items
 * по умолчанию stretch), провалов в сетке нет.
 * ------------------------------------------------------------------ */

.nn-pb-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--nn-pb-gap);
}

.nn-pb-grid > .nn-pb-wide { grid-column: 1 / -1; }

@container (max-width: 599px) {
	.nn-pb-grid { grid-template-columns: 1fr; }
	.nn-pb-s-l { font-size: 19px; }
}

/* Выделение внутри текста: **жирный** и *курсив*. */
.nn-pb-t strong { font-weight: 700; }
.nn-pb-t em { font-style: italic; }

/*
 * Свой фон под текстом (галочка «Свой фон под текстом»). Заменяет
 * подложку от цвета рамки. Виден там, где картинка не на весь блок:
 * под ней, справа от неё и в блоке без картинки. Картинка на весь блок
 * его закрывает.
 */
.nn-pb .nn-pb-block.nn-pb-own-bg { background: var(--nn-pb-text-bg); }

/* ------------------------------------------------------------------
 * Блок «Поделиться» (галочка в форме страницы). Тёмная полоса с золотой
 * рамкой, как у блоков; значки — круги цвета соцсети с золотым кольцом,
 * при наведении приподнимаются и светятся.
 * ------------------------------------------------------------------ */

.nn-pb-share {
	--nn-pb-share-gold: #e0b04a;
	overflow: hidden;
	border: 2px solid var(--nn-pb-share-gold);
	border-radius: var(--nn-pb-radius);
	background: linear-gradient(180deg, #13223a 0%, #0a1222 100%);
	box-shadow: 0 0 var(--nn-pb-glow) color-mix(in srgb, var(--nn-pb-share-gold) var(--nn-pb-glow-alpha), transparent);
	text-align: center;
}

.nn-pb-share__body {
	display: grid;
	justify-items: center;
	gap: 14px;
	padding: 22px 16px 16px;
}

.nn-pb-share__head {
	width: 100%;
	background-position: center;
	background-size: cover;
}

.nn-pb-share--head .nn-pb-share__body { padding-top: 16px; }

.nn-pb-share__title {
	margin: 0;
	color: #f3c969;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
}

.nn-pb-share__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.nn-pb .nn-pb-share__i {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: 2px solid var(--nn-pb-share-gold);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--nn-pb-share-c) 75%, #fff) 0%, var(--nn-pb-share-c) 55%, color-mix(in srgb, var(--nn-pb-share-c) 70%, #000) 100%);
	box-shadow: 0 0 8px color-mix(in srgb, var(--nn-pb-share-gold) 50%, transparent);
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}

.nn-pb-share__i svg {
	width: 24px;
	height: 24px;
}

.nn-pb .nn-pb-share__i:hover,
.nn-pb .nn-pb-share__i:focus-visible {
	transform: translateY(-3px) scale(1.06);
	box-shadow: 0 0 6px var(--nn-pb-share-gold), 0 0 22px color-mix(in srgb, var(--nn-pb-share-c) 70%, transparent);
	color: #fff;
	text-decoration: none;
}

.nn-pb-share__i:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.nn-pb-share__i[hidden] { display: none; }

.nn-pb-share__status {
	min-height: 1.4em;
	margin: 0;
	color: #cfe3ff;
	font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.nn-pb-share__i { transition: none; }
	.nn-pb .nn-pb-share__i:hover,
	.nn-pb .nn-pb-share__i:focus-visible { transform: none; }
}