/*
Theme Name: SMMPrime Ru
Description: Тема сайта smmprime.info. Направление «Столбец»: несущая ось — раскладка, шапки как строки нет. Контракт — в header.php.
Version: 1.0.0
Text Domain: smp-theme
*/

/* ──────────────────────────────────────────────────────────
   ТОКЕНЫ. Палитра снята кодом с smmprime.com 18.09.2026
   (собственные правила шапки офсайта, не бутстраповская подложка).
   Контраст посчитан, а не прикинут:
     --muted   #5d7093 на белом = 5,0:1
     --link    #2f5ad6 на белом = 5,9:1
     --coral   с чернильной подписью = 5,3:1  (белая подпись давала 2,7 — запрещена)
     --blue    #407bff только на графике и крупных числах (3,8:1, порог 3:1)
   ────────────────────────────────────────────────────────── */
:root{
	--ink:#152956;
	--ink-2:#3a4d75;
	--muted:#5d7093;
	--blue:#407bff;
	--link:#2f5ad6;
	--coral:#ff725e;
	--coral-dk:#e85c48;
	--paper:#ffffff;
	--mist:#f6f9ff;
	--mist-2:#eef3fd;
	--line:#dfe8f6;
	--line-2:#c9d6ef;
	--rail:320px;
	--fieldw:1180px;
	--pad:46px;
	--r:4px;
	--serif:'Gentium Plus',Georgia,'Times New Roman',serif;
	--num:'Roboto Serif',Georgia,serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
	margin:0;
	background:var(--paper);
	color:var(--ink);
	font-family:var(--serif);
	font-size:18px;
	line-height:1.62;
	overflow-wrap:break-word;
}
img{max-width:100%;height:auto}
a{color:var(--link)}
h1,h2,h3{line-height:1.18;margin:0 0 14px;font-weight:700}
h1{font-size:clamp(30px,1.5rem + 1.7vw,42px);letter-spacing:-.012em}
h2{font-size:clamp(23px,1.2rem + .8vw,29px);margin-top:0}
h3{font-size:20px}
p{margin:0 0 15px}
b,strong{font-weight:700}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:60}
.skip:focus{left:0}

::selection{background:#d9e4ff;color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
html{scrollbar-color:var(--line-2) var(--mist)}

/* ── Кнопка. Единственное скругление на сайте. ── */
.btn{
	display:inline-flex;align-items:center;justify-content:center;
	padding:14px 24px;
	background:var(--coral);color:var(--ink);
	font-family:var(--num);font-weight:700;font-size:16px;line-height:1.2;
	text-decoration:none;border-radius:var(--r);
	transition:background .18s ease;
	white-space:nowrap;
}
.btn:hover{background:var(--coral-dk)}
.btn--wide{display:flex;width:100%}
.btn__short{display:none}

/* ══════════════════════════════════════════════════════════
   РАСКЛАДКА: столбец слева, поле справа.
   Контейнер по правилу 19 считается как 320 + 1180 = 1500px.
   ══════════════════════════════════════════════════════════ */
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);align-items:start}

.rail{
	position:sticky;top:0;
	height:100vh;height:100dvh;
	display:flex;flex-direction:column;
	background:var(--ink);color:#dfe8f6;
	padding:30px 26px;
	min-width:0;
}
.rail__top{min-width:0}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;min-width:0}
.mark__sign{display:block;flex:0 0 32px;color:#8fb2ff}
.mark__sign svg{display:block}
.mark__name{font-family:var(--num);font-weight:700;font-size:20px;letter-spacing:.01em;white-space:nowrap}
.mark__ru{color:#8fb2ff}
.mark__note{margin:9px 0 0;font-size:15px;color:#a9bbdd}

.rail__cta{display:none}

.rail__panel{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin-top:26px}
.rail__nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;min-height:0;padding-right:4px}
.rail__link{
	display:block;padding:7px 0 7px 12px;margin-left:-12px;
	color:#dfe8f6;text-decoration:none;font-size:16.5px;
	border-left:3px solid transparent;
	transition:border-color .16s ease,transform .16s ease,color .16s ease;
}
.rail__link:hover{color:#fff;border-left-color:#4f6ba8;transform:translateX(2px)}
.rail__link.is-on{color:#fff;font-weight:700;border-left-color:var(--coral)}

.rail__foot{margin-top:auto;padding-top:20px;border-top:1px solid #2b4479}
.rail__price{margin:0 0 12px;font-size:15px;color:#a9bbdd}
.rail__price b{color:#fff;font-family:var(--num)}

.burger{display:none}

/* ── Поле контента.
   Ширина считается вместе со столбцом: 320 + 1180 = 1500px (правило 19).
   На мониторе шире 1920 поле центрируется в своей колонке, иначе текст
   прижимается влево и справа образуется та же пустая полоса, ради которой
   порог контейнера и поднимали. ── */
.field{min-width:0;margin-inline:auto;padding:34px var(--pad) 60px;max-width:calc(var(--fieldw) + var(--pad) * 2)}
.lede{font-size:19.5px;line-height:1.56;color:var(--ink-2);max-width:62ch;margin:0 0 26px}
.prose{max-width:66ch}
.prose p{margin:0 0 15px}

.crumbs{font-size:15px;color:var(--muted);margin:0 0 18px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--link);text-decoration:underline}
.crumbs__sep{margin:0 7px;color:var(--line-2)}

.slab{margin:46px 0 0;max-width:var(--fieldw)}
.slab--tight{margin-top:34px}

/* ── Несущая форма: строка «ключ — пояснение — число» ── */
.grid{display:grid;margin:8px 0 0;border-top:1px solid var(--line)}
.grid__h,.grid__r{
	display:grid;
	grid-template-columns:minmax(0,270px) minmax(0,1fr) minmax(0,132px);
	gap:22px;align-items:baseline;
	padding:15px 0;border-bottom:1px solid var(--line);
}
.grid__h{font-size:14.5px;color:var(--muted);padding:10px 0;font-family:var(--num)}
.grid__h span:last-child,.grid__p{text-align:right}
.grid__k{font-weight:700;font-size:17.5px}
.grid__v{font-size:16.5px;color:var(--muted)}
.grid__p{font-family:var(--num);font-weight:700;font-size:18px;white-space:nowrap}
.grid__r:hover{background:var(--mist)}

/* ── Факты первого экрана ── */
.facts{margin:26px 0 0;border-top:1px solid var(--line)}
.facts__r{
	display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr) minmax(0,128px);
	gap:22px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);
}
.facts__k{font-weight:700;font-size:18px}
.facts__v{font-size:16.5px;color:var(--muted)}
.facts__p{text-align:right;font-family:var(--num);font-weight:700;font-size:19px;white-space:nowrap}

/* ── Аккордеон FAQ: grid-template-rows, не max-height ── */
.qa{margin:8px 0 0;border-top:1px solid var(--line)}
.qa__i{border-bottom:1px solid var(--line)}
.qa__i summary{
	list-style:none;cursor:pointer;padding:15px 34px 15px 0;position:relative;
	font-weight:700;font-size:17.5px;
}
.qa__i summary::-webkit-details-marker{display:none}
.qa__i summary::after{
	content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;
	border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
	transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.qa__i[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.qa__a{padding:0 0 15px;color:var(--ink-2);max-width:72ch}
.qa__a p{margin:0}

/* ── Отзывы ── */
.voice{padding:20px 0;border-bottom:1px solid var(--line)}
.voice__top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 8px}
.voice__who{font-weight:700;font-size:17px}
.voice__txt{margin:0;color:var(--ink-2);max-width:74ch}

/* ── Звёзды: процентная заливка ── */
.stars{position:relative;display:inline-flex;line-height:0;vertical-align:middle}
.stars__bg,.stars__fg{display:flex;gap:2px}
.stars__bg{color:var(--line-2)}
.stars__fg{position:absolute;top:0;left:0;bottom:0;overflow:hidden;white-space:nowrap;color:#f0a500}
.stars svg{width:var(--star-size,18px);height:var(--star-size,18px);flex-shrink:0;fill:currentColor;stroke:currentColor}

/* ── Оценка крупно ── */
.score{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:0 0 18px}
.score__n{font-family:var(--num);font-weight:700;font-size:54px;line-height:1;color:var(--ink)}
.score__of{font-size:16px;color:var(--muted)}

/* ── Перелинковка ── */
.near{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--line)}
.near__i{
	display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:22px;
	padding:15px 0;border-bottom:1px solid var(--line);
	text-decoration:none;color:var(--ink);
	transition:background .16s ease;
}
.near__i:hover{background:var(--mist)}
.near__i b{font-size:17.5px}
.near__i span{color:var(--muted);font-size:16.5px}

/* ── Отметка/врезка ── */
.mark-note{margin:24px 0 0;padding:16px 20px;background:var(--mist);border-left:3px solid var(--blue);max-width:74ch}
.mark-note p{margin:0;color:var(--ink-2)}

/* ── Подвал ── */
.apron{background:var(--ink);color:#c9d6ef;margin-top:64px}
.apron__in{padding:44px var(--pad) 40px;max-width:calc(var(--rail) + var(--fieldw));margin:0 auto}
.apron__cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:40px}
.apron__sign{font-family:var(--num);font-weight:700;font-size:20px;color:#fff;margin:0 0 10px}
.apron__txt{margin:0 0 20px;font-size:16px;max-width:52ch}
.apron__h{font-family:var(--num);font-size:15px;color:#8fa6d4;margin:0 0 12px}
.apron__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
/* Подпись кнопки в подвале не перекрашивается правилом .apron a:
   селектор сужен, иначе класс кнопки проигрывает по специфичности. */
.apron a:not(.btn){color:#c9d6ef;text-decoration:none;font-size:16.5px}
.apron a:not(.btn):hover{color:#fff;text-decoration:underline}
.btn--apron{margin-top:10px}
.apron__note{margin:34px 0 0;padding-top:20px;border-top:1px solid #2b4479;font-size:15px;color:#8fa6d4;max-width:88ch}

/* ══════════════════════════════════════════════════════════
   БРЕЙКПОИНТЫ. Порог столбца — 1180: ниже него столбец
   становится горизонтальной полосой, а реф-кнопка остаётся
   В ПОЛОСЕ, снаружи бургера, на любой ширине.
   ══════════════════════════════════════════════════════════ */
@media (max-width:1499px){
	:root{--rail:290px;--fieldw:1080px;--pad:40px}
}
@media (max-width:1319px){
	:root{--rail:268px;--pad:34px}
	.rail__link{font-size:16px}
}

@media (max-width:1180px){
	.shell{display:block}
	.rail{
		position:sticky;top:0;z-index:40;
		height:auto;
		flex-direction:column;
		padding:12px 24px;
		border-bottom:1px solid #2b4479;
	}
	.rail__top{display:flex;align-items:center;gap:14px;min-width:0}
	.mark{flex:0 1 auto;min-width:0}
	.mark__note{display:none}
	.rail__cta{display:block;margin-left:auto;flex:0 0 auto;order:2}
	.rail__cta .btn{padding:11px 18px;font-size:15px}
	.burger{
		display:flex;flex-direction:column;justify-content:center;gap:5px;
		flex:0 0 auto;order:3;
		width:44px;height:44px;padding:0 10px;
		background:transparent;border:1px solid #2b4479;border-radius:var(--r);
		cursor:pointer;
	}
	.burger span{display:block;height:2px;background:#dfe8f6;border-radius:1px}
	.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
	.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
	.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
	.burger span{transition:transform .18s ease,opacity .18s ease}

	.rail__panel{
		display:none;
		margin:12px 0 0;
		max-height:calc(100dvh - 76px);
		overflow-y:auto;overscroll-behavior:contain;
	}
	.rail__panel.is-open{display:flex}
	.rail__nav{overflow:visible}
	.rail__link{padding:10px 0 10px 12px;font-size:17px}
	.rail__foot{margin-top:18px}

	.field{max-width:none;padding:26px 34px 52px}
	.apron__in{max-width:none;padding-left:34px;padding-right:34px}
}

@media (max-width:1024px){
	.field{padding:24px 28px 48px}
	.apron__in{padding-left:28px;padding-right:28px}
	.apron__cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

@media (max-width:820px){
	body{font-size:17px}
	.grid__h,.grid__r,.facts__r,.near__i{gap:16px}
	.grid__h,.grid__r{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,116px)}
	.facts__r{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,112px)}
}

@media (max-width:640px){
	/* Строки становятся карточками: ни одна таблица не едет вбок. */
	.grid{border-top:0}
	.grid__h{display:none}
	.grid__r{
		display:block;padding:14px 0;
	}
	.grid__k{display:block;font-size:17px}
	.grid__v{display:block;margin:3px 0 0}
	.grid__v:empty{display:none}
	.grid__p{display:block;text-align:left;margin:7px 0 0;font-size:19px}
	.grid__p::before{content:attr(data-label) " · ";font-family:var(--serif);font-weight:400;color:var(--muted);font-size:15px}
	.facts__r{display:block;padding:14px 0}
	.facts__k,.facts__v{display:block}
	.facts__p{display:block;text-align:left;margin:6px 0 0}
	.near__i{display:block}
	.near__i span{display:block;margin:3px 0 0}
	.apron__cols{grid-template-columns:minmax(0,1fr);gap:28px}
	.score__n{font-size:44px}
}

@media (max-width:480px){
	/* Первая жертва — подпись кнопки, знак не трогаем. */
	.btn__full{display:none}
	.btn__short{display:inline}
	.rail{padding:10px 18px}
	.field{padding:22px 18px 44px}
	.apron__in{padding-left:18px;padding-right:18px}
}

@media (max-width:400px){
	.rail{padding:9px 14px}
	.rail__top{gap:10px}
	.rail__cta .btn{padding:10px 14px;font-size:14.5px}
	.burger{width:40px;height:40px}
	.field{padding:20px 14px 40px}
	.apron__in{padding-left:14px;padding-right:14px}
	.mark__name{font-size:18px}
	body{font-size:16.5px}
}

@media (max-width:345px){
	/* Последняя жертва — подпись под знаком; сам знак остаётся. */
	.mark__ru{display:none}
	.mark__name{font-size:17px}
	.rail__cta .btn{padding:9px 12px;font-size:14px}
}

@media (prefers-reduced-motion:reduce){
	*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}