/**
 * Витрина, категории, поиск, «Похожие», карусель главной.
 *
 * Дизайн-система (2026): холодные нейтралы, цвет в сетке отдаём логотипам сервисов,
 * действие — фирменный градиент #2563EB → #4F46E5. Шрифт Onest. Хайрлайн 1px, мягкие
 * тени, радиусы 12-16px, подписи не светлее #64748b.
 *
 * Подключается на /shop/, категориях, поиске, товаре («Похожие») и главной.
 */

:root {
	--op-ink: #0B0C0E;      /* заголовки, имя, цена */
	--op-ink2: #454C57;     /* вторичный текст */
	--op-mut: #64748B;      /* подписи */
	--op-ico: #94A3B8;      /* декоративные значки */
	--op-line: #E6E8EC;     /* хайрлайн */
	--op-line2: #F0F2F5;    /* разделитель внутри карточки */
	--op-canvas: #F6F7F9;   /* холст витрины / плитки */
	--op-brand: linear-gradient(135deg, #2563EB, #4F46E5); /* действие */
	--op-focus: #2E6BFF;    /* фокус-кольцо */
	--op-star: #F5B301;
	--op-font: 'Onest', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.opcat { font-family: var(--op-font); max-width: 100%; color: var(--op-ink); }
.opcat *, .opc, .opc-grid, .op-search { box-sizing: border-box; }

/* ── Крошки ── */
.op-crumbs { display: flex; align-items: center; gap: 7px; font-family: var(--op-font); font-size: 13px; color: var(--op-mut); margin: 0 0 12px; }
.op-crumbs a { color: var(--op-mut); text-decoration: none; transition: color .15s ease; }
.op-crumbs a:hover { color: var(--op-ink); }
.op-crumbs b { color: var(--op-ink2); font-weight: 600; }

/* ВЕРХ СТРАНИЦЫ. Отступ контейнера Astra на витрине не нужен: каталог должен
   начинаться сразу под шапкой. Забираем вертикальный ритм себе — так он не зависит
   от настроек темы и не «дышит» при их смене. */
body.op-shop-rows #content.site-content,
body.op-cat-rows #content.site-content,
body.op-shop-rows #primary, body.op-cat-rows #primary { margin-top: 0; padding-top: 0; }
body.op-shop-rows .site-main, body.op-cat-rows .site-main { margin-top: 0; padding-top: 0; }
body.op-shop-rows .ast-woocommerce-container,
body.op-cat-rows .ast-woocommerce-container,
body.op-shop-rows .woocommerce-products-header,
body.op-cat-rows .woocommerce-products-header { margin: 0; padding: 0; }

/* Шапка — плавающая капсула: без отступа крошки прилипали к её нижнему краю. */
body.op-shop-rows .op-crumbs, body.op-cat-rows .op-crumbs { margin-top: 22px; }
@media (max-width: 640px) { body.op-shop-rows .op-crumbs, body.op-cat-rows .op-crumbs { margin-top: 16px; } }

/* ШАПКА-МАРКЕТПЛЕЙС.
   Тихий минимализм читался как бедность («скромно»). Большие магазины (Ozon, WB,
   Яндекс Маркет) делают наоборот: плотная фирменная панель, крупный поиск с яркой
   кнопкой, быстрые ссылки на хиты и строка гарантий. Это язык, которому доверяют
   деньгами — он говорит «за нами компания», а не «мы тут скромно попробуем». */
.op-hero {
	position: relative;
	/* НЕ ставим overflow:hidden и НЕ создаём stacking-context (isolation/z-index):
	   подсказки поиска живут внутри шапки и должны свободно выходить за её нижний
	   край поверх каталога. Фон-градиент и так обрезается по border-radius. */
	border-radius: 28px;
	padding: 52px 48px 42px;
	margin: 0 0 22px;
	text-align: left;
	font-family: var(--op-font);
	color: var(--ui-ink);
	background: var(--ui-panel-bg);
	box-shadow: var(--ui-card-sh);
	border: 1px solid var(--ui-line);
}
.op-hero__in { max-width: 860px; }
.op-hero__t { font-size: clamp(30px, 4vw, 48px); font-weight: 800; letter-spacing: -.03em; color: var(--ui-ink); margin: 0 0 12px; line-height: 1.02; max-width: 15ch; text-wrap: balance; }
.op-hero__accent { color: var(--ui-accent); }
.op-hero__s { font-size: clamp(15px, 1.4vw, 17px); color: var(--ui-text); margin: 0 0 28px; max-width: 560px; line-height: 1.55; }
/* Поиск — крупный, белый, «начни отсюда» (стили формы в main.css). */
.op-hero__search { max-width: 640px; margin: 0; }
.op-hero__search .op-search { margin: 0; max-width: none; border-color: #dbe3ef; border-radius: 14px; padding: 5px 5px 5px 18px; box-shadow: 0 14px 30px -20px rgba(15, 23, 42, .35); }
.op-hero__search .op-search:focus-within { border-color: #93b4fd; box-shadow: 0 0 0 4px rgba(37, 99, 235, .14), 0 14px 30px -20px rgba(15, 23, 42, .35); }
.op-hero__search .op-search__ico svg { width: 20px; height: 20px; }
/* Двойной класс — перебиваем глобальные input[type="search"] от Astra (см. main.css). */
.op-hero__search .op-search__input { padding: 13px 2px; font-size: 16px; }
/* Гарантии — не мелкая сноска, а полноценная строка доверия. */
.op-hero__trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 30px 0 0; padding-top: 24px; border-top: 1px solid var(--ui-line); font-size: 13.5px; font-weight: 500; color: var(--ui-text); }
.op-hero__trust span { display: inline-flex; align-items: center; gap: 8px; }
.op-hero__trust svg { width: 16px; height: 16px; color: var(--ui-accent); flex: 0 0 auto; }

/* Иллюстрация витрины (только ПК): графитовая карта OPLATIM поверх синей, вокруг значки сервисов.
   Надписи на карте рисует CSS, в тексте страницы их нет. Без анимации. */
.op-hcard {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	width: 290px;
	aspect-ratio: 1.586;
	border-radius: 18px;
	transform: translate(-54%, -44%) rotate(-8deg);
	background:
		radial-gradient(160px 120px at 100% 100%, rgba(255, 122, 26, .34), transparent 70%),
		linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .07) 44%, rgba(255, 255, 255, 0) 58%),
		linear-gradient(135deg, #2b2d34 0%, #17181c 55%, #0d0e11 100%);
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.op-hcard--back {
	z-index: 1;
	transform: translate(-40%, -64%) rotate(7deg);
	background:
		linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .12) 44%, rgba(255, 255, 255, 0) 58%),
		linear-gradient(135deg, #4d8bff 0%, #2563eb 50%, #1d3fb0 100%);
	border-color: rgba(255, 255, 255, .18);
}
.op-hcard__brand { position: absolute; left: 20px; top: 18px; display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .92); font: 700 13px/1 var(--op-font); letter-spacing: .2em; }
.op-hcard__brand::after { content: "OPLATIM"; }
.op-hcard__brand svg { width: 20px; height: 20px; }
.op-hcard__nfc { position: absolute; right: 18px; top: 16px; display: flex; color: rgba(255, 255, 255, .55); }
.op-hcard__nfc svg { width: 22px; height: 22px; }
.op-hcard__chip { position: absolute; left: 22px; top: 64px; width: 42px; height: 32px; border-radius: 7px; background: linear-gradient(135deg, #f1dfae 0%, #c9a563 55%, #9d7a3c 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.op-hcard__chip::after { content: ""; position: absolute; inset: 7px 9px; border: 1px solid rgba(0, 0, 0, .22); border-radius: 4px; }
.op-hcard__num { position: absolute; left: 22px; bottom: 22px; color: rgba(255, 255, 255, .78); font: 600 14px/1 ui-monospace, 'SFMono-Regular', Consolas, monospace; letter-spacing: .12em; }
.op-hcard__num::before { content: "\2022\2022\2022\2022  \2022\2022\2022\2022  \2022\2022\2022\2022  2026"; white-space: pre; }
.op-hcard__ok { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--ui-dark-accent); color: var(--ui-dark-accent); }
.op-hcard__ok svg { width: 15px; height: 15px; }
.op-hero__tile { position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 16px; background: #fff; box-shadow: 0 18px 30px -18px rgba(15, 23, 42, .45), 0 0 0 1px var(--ui-line); }
.op-hero__tile .opc__ic { width: 40px; height: 40px; border-radius: 11px; font-size: 18px; }
.op-hero__tile--1 { left: 4%; top: 4%; transform: rotate(-8deg); }
.op-hero__tile--2 { left: 72%; top: 0; transform: rotate(6deg); }
.op-hero__tile--3 { right: 0; top: 42%; transform: rotate(-5deg); }
.op-hero__tile--4 { left: 68%; bottom: 0; transform: rotate(8deg); }
.op-hero__tile--5 { left: 4%; bottom: -6%; transform: rotate(5deg); }
.op-hero__tile--6 { left: 0; top: 46%; transform: rotate(-6deg); }

/* ── Декоративная hero-иллюстрация справа (карта OPLATIM + монеты) ──
   Только широкий десктоп (≥1080px): hero становится 2-колоночным (контент | картинка),
   поэтому иллюстрация НИКОГДА не наезжает на текст/поиск. Ниже — display:none: фон
   через CSS-переменную --op-art браузер на мобиле НЕ грузит. aria-hidden в разметке →
   для Google это оформление (не LCP, без alt/индексации). Движение — чистый CSS. */
.op-hero__art { display: none; }
@media (min-width: 1080px) {
	/* Гарантии — сквозной строкой на всю ширину (область "trust" на обе колонки),
	   иначе в узкой текстовой колонке 4 пункта не помещаются и последний съезжает. */
	.op-hero { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "content art" "trust trust"; align-items: center; column-gap: 24px; }
	.op-hero__in { grid-area: content; max-width: none; }
	.op-hero__art { grid-area: art; display: block; align-self: stretch; min-height: 300px; position: relative; }
	.op-hero__trust { grid-area: trust; }
}

@media (max-width: 640px) {
	.op-hero { padding: 24px 18px 18px; border-radius: 18px; margin-bottom: 20px; }
	.op-hero__t { letter-spacing: -1px; margin-bottom: 8px; }
	.op-hero__s { margin-bottom: 18px; }
	.op-hero__search .op-search__input { padding: 12px 2px; font-size: 15.5px; }
	/* Гарантии на телефоне — одна строка с прокруткой и затуханием справа: панель не растёт. */
	.op-hero__trust { flex-wrap: nowrap; gap: 18px; overflow-x: auto; margin-top: 18px; padding-top: 14px; font-size: 12.5px; white-space: nowrap; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
	.op-hero__trust::-webkit-scrollbar { display: none; }
}
/* На узком экране кнопка «Найти» компактнее, а левую лупу прячем — чтобы полю
   оставалось больше места и плейсхолдер не обрезался. */
@media (max-width: 480px) {
	.op-hero__search .op-search__ico { display: none; }
	.op-hero__search .op-search { padding-left: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ХОЛСТ ВИТРИНЫ — во всю ширину экрана.
   Фон идёт от края до края, а контент остаётся в сетке сайта (1240px — ровно
   как шапка). Фон отдаём телу страницы: у Astra тут макет ast-plain-container,
   она .site-content не красит — обходимся без костылей с 100vw.
   ═══════════════════════════════════════════════════════════════════════ */
body.op-shop-rows, body.op-cat-rows, body.search { background: var(--op-canvas); }

/* ── Строка управления: заголовок + счётчик + сортировка ── */
.op-sechead { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 26px 0 14px; padding-top: 22px; border-top: 1px solid var(--op-line); font-family: var(--op-font); flex-wrap: wrap; }
.op-sechead--first { margin-top: 0; padding-top: 0; border-top: 0; }
.op-sechead h2 { font-size: 19px; font-weight: 700; letter-spacing: -.5px; color: var(--op-ink); margin: 0; }
.op-secr { display: flex; align-items: center; gap: 12px; min-width: 0; }
.op-shown { font: 500 13px var(--op-font); color: var(--op-mut); margin: 0; }
@media (max-width: 640px) { .op-sechead h2 { font-size: 17px; } .op-secr { width: 100%; justify-content: space-between; } }

/* Сортировка — аккуратная пилюля вместо «системного» селекта (подпись в aria-label). */
.op-tb-sort { display: inline-flex; align-items: center; font-family: var(--op-font); }
.op-tb-sort select { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; border: 1px solid var(--op-line); border-radius: 10px; padding: 9px 34px 9px 13px; font: 600 13px var(--op-font); color: var(--op-ink); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.op-tb-sort select:hover { border-color: #D3D7DE; }
.op-tb-sort select:focus { outline: none; border-color: var(--op-ink); box-shadow: 0 0 0 3px rgba(11, 12, 14, .07); }

/* ═══════════════════════════════════════════════════════════════════════
   ЛЕНТА РАЗДЕЛОВ: один компонент на витрине (фильтр) и в категориях (ссылки).
   Края ленты мягко затухают там, где есть что листать, и там же лежит стрелка
   (классы из app.js): по умолчанию лента в начале, затухает только правый край.
   Магнитной привязки (scroll-snap) здесь нет: плитки разной ширины, и привязка
   отбрасывала ленту назад вместо того, чтобы листать.
   ═══════════════════════════════════════════════════════════════════════ */
.op-cols-vp { position: relative; margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--op-line); }
.op-cols {
	--fade: 64px;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-behavior: smooth;
	padding: 2px;
	margin: 0;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent);
}
.op-cols::-webkit-scrollbar { display: none; }
.op-cols-vp.is-scrolled .op-cols { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); }
.op-cols-vp.is-end .op-cols { -webkit-mask-image: none; mask-image: none; }
.op-cols-vp.is-scrolled.is-end .op-cols { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade)); mask-image: linear-gradient(90deg, transparent, #000 var(--fade)); }
/* Плитка раздела: стопка логотипов трёх сервисов раздела вместо пиктограммы.
   Логотипы те же, что у первых карточек раздела ниже, поэтому лента честно показывает,
   что внутри. Счётчика нет. Активный раздел берёт цвета тёмного блока с главной:
   графит, оранжевый контур и пятно света у правого края. */
.op-col { position: relative; overflow: hidden; flex: 0 0 auto; min-width: 0; display: inline-flex; align-items: center; gap: 11px; text-align: left; background: #fff; border: 1px solid var(--op-line); border-radius: 999px; padding: 6px 16px 6px 7px; cursor: pointer; font-family: var(--op-font); white-space: nowrap; box-shadow: 0 1px 2px rgba(11, 12, 14, .04); transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.op-col__st { position: relative; z-index: 1; display: flex; flex: 0 0 auto; }
.op-col__st img { width: 26px; height: 26px; border-radius: 8px; object-fit: contain; background: #fff; box-shadow: 0 0 0 2px #fff; margin-left: -8px; opacity: .95; transition: box-shadow .16s ease, opacity .16s ease; }
.op-col__st img:first-child { margin-left: 0; }
.op-col__t { position: relative; z-index: 1; font-size: 14px; font-weight: 600; color: var(--op-ink); line-height: 1.25; }
/* Глобальные стили кнопок и ссылок Astra не должны красить наши контролы: фиксируем состояния явно. */
.opcat .op-col, .opcat .op-col:hover, .opcat .op-col:focus, .opcat .op-col:active { background: #fff; border: 1px solid var(--op-line); color: var(--op-ink); text-decoration: none; }
.opcat .op-col:hover, .opcat .op-col:focus { border-color: #C9CED6; box-shadow: 0 6px 16px -10px rgba(11, 12, 14, .45); }
/* Активный раздел: графит и оранжевый, один в один с тёмным блоком на главной. */
.opcat .op-col.is-on, .opcat .op-col.is-on:hover, .opcat .op-col.is-on:focus, .opcat .op-col.is-on:active { background: var(--ui-dark, #151619); border-color: rgba(255, 122, 26, .75); }
.op-col.is-on::before { content: ""; position: absolute; right: -30px; top: -34px; width: 104px; height: 104px; border-radius: 50%; pointer-events: none; opacity: .9; background: radial-gradient(circle, var(--ui-dark-accent, #ff7a1a) 0%, rgba(255, 122, 26, .55) 10%, rgba(255, 122, 26, .18) 32%, transparent 66%); }
.op-col.is-on .op-col__t { color: #fff; }
.op-col.is-on .op-col__st img { box-shadow: 0 0 0 2px var(--ui-dark, #151619); opacity: 1; }

/* Стрелки лежат на затухании и не закрывают текст плиток. У края, где листать
   некуда, стрелки нет (класс disabled ставит app.js). Колесом мыши лента вбок
   не листается, поэтому на широком экране стрелки обязательны. */
.op-cols-arr { position: absolute; top: calc(50% - 8px); transform: translateY(-50%); width: 34px; height: 34px; border-radius: 999px; background: #fff; border: 1px solid var(--op-line); box-shadow: 0 6px 18px -8px rgba(11, 12, 14, .35); display: flex; align-items: center; justify-content: center; color: var(--op-ink2); cursor: pointer; z-index: 5; padding: 0; transition: opacity .18s ease, border-color .15s ease; }
.op-cols-arr svg { width: 15px; height: 15px; }
.op-cols-arr--l { left: 0; }
.op-cols-arr--r { right: 0; }
.op-cols-arr[disabled] { opacity: 0; pointer-events: none; }
.opcat .op-cols-arr, .opcat .op-cols-arr:hover, .opcat .op-cols-arr:focus, .opcat .op-cols-arr:active { background: #fff; border: 1px solid var(--op-line); color: var(--op-ink2); }
.opcat .op-cols-arr:hover, .opcat .op-cols-arr:focus { border-color: #C9CED6; }
/* На телефоне лента листается пальцем, стрелки не нужны. */
@media (max-width: 700px) { .op-cols-arr { display: none; } .op-cols { --fade: 36px; } }
/* На телефоне плитки компактнее: два логотипа вместо трёх, и видно, что ряд листается. */
@media (max-width: 640px) {
	.op-cols-vp { margin-bottom: 18px; padding-bottom: 14px; }
	.op-col { padding: 5px 13px 5px 6px; gap: 9px; }
	.op-col__st img { width: 23px; height: 23px; border-radius: 7px; margin-left: -7px; }
	.op-col__st img:nth-child(3) { display: none; }
	.op-col__t { font-size: 13px; }
}

/* ── Разделы каталога ── */
.op-groups { padding: 0 0 6px; }
.op-group + .op-group { margin-top: 32px; }
/* Ряды за пределами экрана браузер не размечает и не рисует, пока до них не дошли:
   со 150 карточками это заметно ускоряет первую отрисовку. Весь HTML при этом на месте,
   поиск по странице и переход по якорю ряд разворачивают. Высота-заглушка примерно
   равна реальной высоте ряда, чтобы полоса прокрутки не прыгала. */
.op-group { content-visibility: auto; contain-intrinsic-size: auto 340px; }
.op-group[hidden] { display: none; }
.op-group__h { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-family: var(--op-font); }
.op-group__ic { width: 18px; height: 18px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: var(--op-mut); }
.op-group__ic svg { width: 18px; height: 18px; }
.op-group__h h3 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -.35px; color: var(--op-ink); }
.op-group__n { font-size: 12.5px; font-weight: 500; color: var(--op-mut); white-space: nowrap; }
.op-group__line { flex: 1; height: 1px; background: var(--op-line); }
.op-group__all { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font-size: 12.5px; font-weight: 600; color: var(--op-mut); text-decoration: none !important; white-space: nowrap; transition: color .15s ease; }
.op-group__all:hover { color: var(--op-ink); }
@media (max-width: 640px) { .op-group + .op-group { margin-top: 26px; } .op-group__h h3 { font-size: 15px; } }

/* ── Сетка (категория, поиск) ── */
.opc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px 12px; padding: 8px 0 4px; }
.opc-grid .opc { width: auto; flex: none; min-width: 0; }
@media (max-width: 760px) { .opc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; } }

/* ═══════════════════════════════════════════════════════════════════════
   РАЗДЕЛ-ЛЕНТА. Раздел листается вбок, а не растёт вниз простынёй: витрина из
   десятка разделов остаётся обозримой. Сверху запас под бейдж на кромке карточки.
   ═══════════════════════════════════════════════════════════════════════ */
.op-group .opc-grid {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	gap: 12px;
	margin: 0;
	padding: 10px 0 14px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}
.op-group .opc-grid::-webkit-scrollbar { display: none; }
/* Ширина карточки считается от ленты: в кадр всегда влезает РОВНО N штук, без «торчащей половины». */
.op-group .opc-grid .opc { flex: 0 0 calc((100% - 36px) / 4); width: calc((100% - 36px) / 4); scroll-snap-align: start; }
@media (max-width: 1120px) { .op-group .opc-grid .opc { flex-basis: calc((100% - 24px) / 3); width: calc((100% - 24px) / 3); } }
@media (max-width: 860px) { .op-group .opc-grid .opc { flex-basis: calc((100% - 12px) / 2); width: calc((100% - 12px) / 2); } }

/* Кнопки ленты — в заголовке раздела, для мыши на ПК: карточки не перекрывают. Неактивная
   тускнеет, обе исчезают, если листать нечего (is-static из app.js). На телефоне и тач-экранах
   их нет: там листают пальцем. */
.op-row__nav { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.op-row__arr { width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: opacity .18s ease, border-color .15s ease, box-shadow .15s ease; }
.op-row__arr svg { width: 14px; height: 14px; }
.opcat .op-row__arr, .opcat .op-row__arr:hover, .opcat .op-row__arr:focus, .opcat .op-row__arr:active { background: #fff; border: 1px solid var(--op-line); color: var(--op-ink); box-shadow: 0 1px 2px rgba(11, 12, 14, .05); }
.opcat .op-row__arr:hover, .opcat .op-row__arr:focus { border-color: #C9CED6; box-shadow: 0 6px 16px -8px rgba(11, 12, 14, .3); }
.op-row__arr[disabled] { opacity: .4; pointer-events: none; }
.op-row__arr:focus-visible { outline: 2px solid var(--op-focus); outline-offset: 2px; }
.op-group.is-static .op-row__nav { display: none; }
@media (hover: none), (pointer: coarse), (max-width: 640px) { .op-row__nav { display: none; } }
@media (max-width: 640px) {
	/* Одна карточка почти на весь экран + узкий край следующей (намёк на прокрутку). */
	.op-group .opc-grid { padding: 10px 0 12px; gap: 10px; scroll-snap-type: x mandatory; }
	.op-group .opc-grid .opc { flex: 0 0 90%; width: 90%; }
	/* На широкой карточке ленты описание возвращаем: без него карточка «приплюснутая». */
	.op-group .opc-grid .opc__desc { display: -webkit-box; }
}

/* ═══════════════════════════════════════════════════════════════════════
   КАРТОЧКА СЕРВИСА
   ═══════════════════════════════════════════════════════════════════════ */
.opc { position: relative; background: #fff; border: 1px solid var(--ui-line); border-radius: var(--ui-r); padding: 15px; scroll-snap-align: start; text-decoration: none !important; color: inherit; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--ui-card-sh); transition: transform .18s cubic-bezier(.2, .7, .2, 1), box-shadow .18s ease, border-color .18s ease; }
/* В marquee-ленте (главная) — фиксированная ширина. В сетке — резиновая. */
.opcat-marq__track > .opc { flex: 0 0 250px; width: 250px; }
.opc[hidden] { display: none; }
@media (hover: hover) {
	.opc:hover { transform: translateY(-2px); border-color: #D5D9E0; box-shadow: 0 1px 2px rgba(11, 12, 14, .04), 0 14px 30px -14px rgba(11, 12, 14, .18); }
}
.opc:active { transform: scale(.99); transition: transform .09s ease; }

/* Бейдж — ровно один на карточку (приоритет задаёт PHP). Висит на верхней кромке, как
   «Популярный» у тарифов: не отнимает место у названия и не обрезает его. */
.opc__bdg { position: absolute; top: -9px; left: 14px; z-index: 1; border-radius: 999px; padding: 3px 9px; font-size: 10.5px; font-weight: 700; line-height: 1.3; letter-spacing: .02em; white-space: nowrap; color: #fff; }
.opc__bdg--hit { background: var(--ui-accent); box-shadow: none; }
.opc__bdg--new { background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 4px 10px -4px rgba(5, 150, 105, .55); }

.opc__head { display: flex; align-items: center; gap: 11px; min-width: 0; }
/* Плитка иконки: фон задаёт --tile (брендовый цвет моста или градиент буквы). Логотипы уже
   нарисованы плитками приложения (свой фон и скругление), им подложка не нужна. */
.opc__ic { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 10px; background: var(--tile, transparent); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 17px; letter-spacing: -.3px; }
.opc__ic--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.opc__ic--gift svg { width: 24px; height: 24px; display: block; }
.opc__id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* Название до двух строк: длинное («Карты PlayStation Store») переносится, а не режется. */
.opc__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15.5px; font-weight: 700; color: var(--ui-ink); line-height: 1.25; letter-spacing: -.3px; }
.opc__cat { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 12px; font-weight: 500; color: var(--op-mut); }
.opc__cat svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--op-ico); }
.opc__cat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.opc__desc { margin: 0; font-size: 12.8px; line-height: 1.45; color: var(--op-mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 37px; }

.opc__rate { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--op-mut); min-width: 0; min-height: 18px; }
.opc__rate .opc__stars { color: var(--op-star); font-size: 11.5px; letter-spacing: .5px; flex: 0 0 auto; }
.opc__rate b { color: var(--op-ink2); font-weight: 700; }
.opc__rate .opc__rc, .opc__rate--trust span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Товар без отзывов: вместо пустоты — честный сигнал доверия. */
.opc__rate--trust svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--op-ico); }

.opc__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--ui-line); padding-top: 11px; }
/* Цена — единственный крупный акцент карточки. nowrap: «/ мес» не отрывается от числа. */
.opc__price { font-size: 19px; font-weight: 800; color: var(--op-ink); line-height: 1.15; letter-spacing: -.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.opc__price .op-price-before, .opc__price .op-price-after { font-size: 11.5px; color: var(--op-mut); font-weight: 500; letter-spacing: 0; }
/* Действие — тихая пилюля, на ховере заливается фирменным градиентом. */
.opc__go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; background: var(--ui-soft); color: var(--ui-ink); border-radius: 9px; padding: 8px 11px; font-size: 12.5px; font-weight: 650; white-space: nowrap; transition: background .16s ease, color .16s ease; }
.opc__arr { width: 14px; height: 14px; flex: 0 0 auto; transition: transform .16s ease; }
@media (hover: hover) {
	.opc:hover .opc__go { background: var(--op-brand); color: #fff; }
	.opc:hover .opc__arr { transform: translateX(2px); }
}
.opc:focus-visible { outline: 2px solid var(--op-focus); outline-offset: 3px; }
.op-col:focus-visible, .op-tb-sort select:focus-visible { outline: 2px solid var(--op-focus); outline-offset: 2px; }

/* Мобилка, сетка в две колонки: иконка над названием (длинному названию хватает ширины),
   описание прячем, подпись переносится, у кнопки остаётся стрелка (тапается вся карточка).
   Цены в ряду стоят на одной линии за счёт margin-top: auto у низа. Ленты разделов (.op-group) — как на ПК. */
@media (max-width: 560px) {
	.opc-grid .opc { padding: 12px 11px; gap: 8px; border-radius: 12px; }
	.opc-grid .opc__ic { width: 38px; height: 38px; font-size: 15px; border-radius: 9px; }
	.opc-grid .opc__head { flex-direction: column; align-items: flex-start; gap: 9px; }
	.opc-grid .opc__name { font-size: 14px; }
	.opc-grid .opc__desc { display: none; }
	.opc-grid .opc__rate { font-size: 11.5px; gap: 5px; align-items: flex-start; }
	.opc-grid .opc__rate--trust span { white-space: normal; }
	.opc-grid .opc__price { font-size: 16.5px; }
	.opc-grid .opc__go { font-size: 0; gap: 0; padding: 8px; }
	.opc-grid .opc__bdg { left: 11px; font-size: 10px; padding: 2px 7px; }
	.op-group .opc-grid .opc__head { flex-direction: row; align-items: center; gap: 11px; }
	.op-group .opc-grid .opc__rate { align-items: center; }
}

/* ── Фирменная кнопка действия: заявки в Telegram, «Сбросить фильтры», «Оформить».
   Одинаковая на витрине, в категориях и на товаре. Раскладку задаёт сам компонент. ── */
.op-brandbtn, .op-brandbtn:hover, .op-brandbtn:focus, .op-brandbtn:active, .op-brandbtn:visited { background: var(--op-brand); color: #fff !important; border-color: transparent; text-decoration: none !important; }
.op-brandbtn { box-shadow: 0 10px 22px -10px rgba(79, 70, 229, .6); transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.op-brandbtn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 16px 30px -12px rgba(79, 70, 229, .7); }
.op-brandbtn:focus-visible { outline: 2px solid var(--op-focus); outline-offset: 2px; }
.op-brandbtn__ic { width: 20px; height: 20px; flex: 0 0 auto; }

/* ── Пустая выдача ── */
.op-empty { text-align: center; padding: 48px 0 34px; font-family: var(--op-font); }
.op-empty p { color: var(--op-mut); font-size: 15px; margin: 0 0 16px; }
.op-empty__btn { border: none; border-radius: 12px; padding: 11px 22px; font: 650 13.5px var(--op-font); cursor: pointer; }

/* ── CTA «не нашли сервис» — светлая карточка, фирменное действие ── */
.op-shopcta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: #fff; border: 1px solid var(--op-line); border-radius: 14px; padding: 22px 24px; margin: 26px 0 10px; font-family: var(--op-font); }
.op-shopcta__t b { display: block; color: var(--op-ink); font-size: 16.5px; font-weight: 700; letter-spacing: -.35px; margin-bottom: 5px; }
.op-shopcta__t span { color: var(--op-mut); font-size: 13.5px; line-height: 1.55; max-width: 560px; display: block; }
.op-shopcta__btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 700; font-size: 14px; line-height: 1.1; border-radius: 12px; padding: 13px 22px; }
@media (max-width: 640px) { .op-shopcta { padding: 18px; } .op-shopcta__btn { width: 100%; } }

/* ── «Популярные» на главной — едут сами ── */
.opcat-marq { overflow: hidden; position: relative; padding: 10px 0 12px; }
.opcat-marq__track { display: flex; gap: 12px; width: max-content; animation: opcat-scroll 60s linear infinite; }
.opcat-marq:hover .opcat-marq__track { animation-play-state: paused; }
/* Лента «Популярных» на главной: та же бесшовная авто-лента, но чуть шире контейнера
   (до 1520px по центру, на ноутбуках — почти во всю ширину окна), карточки крупнее,
   фейды по краям шире. */
.op-home-pop .opcat-marq {
	--opw: min(100vw - 32px, 1520px);
	width: var(--opw);
	margin-left: calc((100% - var(--opw)) / 2);
	padding: 12px 0 16px;
}
.op-home-pop .opcat-marq__track { animation-duration: 110s; gap: 16px; }
.op-home-pop .opcat-marq__track > .opc { flex: 0 0 300px; width: 300px; }
.op-home-pop .opcat-marq::before,
.op-home-pop .opcat-marq::after { width: 70px; }
@media (max-width: 640px) {
	.op-home-pop .opcat-marq__track > .opc { flex-basis: 260px; width: 260px; }
	.op-home-pop .opcat-marq::before,
	.op-home-pop .opcat-marq::after { width: 30px; }
}
@keyframes opcat-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.opcat-marq::before, .opcat-marq::after { content: ""; position: absolute; top: 0; bottom: 0; width: 44px; z-index: 2; pointer-events: none; }
.opcat-marq::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.opcat-marq::after { right: 0; background: linear-gradient(270deg, #fff, transparent); }
@media (prefers-reduced-motion: reduce) { .opcat-marq__track { animation: none; } }

/* ── «Похожие сервисы» на странице товара ── */
.op-related { margin: 46px 0 8px; clear: both; }
.op-related__h { font-family: var(--op-font); font-size: 20px; font-weight: 700; letter-spacing: -.5px; color: var(--op-ink); margin: 0; }
@media (max-width: 544px) { .op-related { margin-top: 34px; } .op-related__h { font-size: 18px; } }
/* Сама лента «Похожих» — те же правила, что у разделов магазина: секция сама .op-group
   с заголовком .op-group__h (см. inc/product-template.php), отдельный CSS не нужен. */

/* ── Категория: отступ описания раздела ── */
.op-cat-rows .term-description { margin-top: 44px; }

/* ═══════════════════════════════════════════════════════════════════════
   КАТЕГОРИЯ МАГАЗИНА: hero компактнее витринного; справа на ПК — иконки сервисов
   раздела на белых плитках (вместо иллюстрации витрины). FAQ раздела в эталонных
   размерах гифт-полок.
   ═══════════════════════════════════════════════════════════════════════ */
.op-hero--cat { padding: 40px 40px 32px; }
.op-hero--cat .op-hero__t { font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -1px; }
.op-hero--cat .op-hero__s { margin-bottom: 22px; }
.op-hero--cat .op-hero__trust { margin-top: 24px; padding-top: 20px; }
.op-hero__logos { display: none; }
@media (min-width: 1080px) {
	.op-hero--cat:not(.op-hero--logos) { display: block; }
	.op-hero--logos { grid-template-columns: minmax(0, 1fr) 380px; }
	.op-hero__logos { grid-area: art; display: grid; grid-template-columns: repeat(3, 84px); gap: 16px; justify-content: center; align-content: center; padding-bottom: 28px; transform: rotate(-7deg); }
	.op-hero__logos--n2, .op-hero__logos--n4 { grid-template-columns: repeat(2, 84px); }
	.op-hero__logo { width: 84px; height: 84px; border-radius: 22px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 34px -20px rgba(15, 23, 42, .45), 0 0 0 1px var(--ui-line); }
	/* Средний столбец (или правый при двух) ниже соседей — живая «лесенка», а не таблица. */
	.op-hero__logos--n6 .op-hero__logo:nth-child(3n+2),
	.op-hero__logos--n4 .op-hero__logo:nth-child(2n),
	.op-hero__logos--n2 .op-hero__logo:nth-child(2n),
	.op-hero__logos--n3 .op-hero__logo:nth-child(2) { margin-top: 28px; margin-bottom: -28px; }
		.op-hero__logo .opc__ic { width: 56px; height: 56px; border-radius: 14px; font-size: 24px; }
	.op-hero__logo .opc__ic--gift svg { width: 30px; height: 30px; }
}

.op-catfaq { max-width: 860px; margin: 46px auto 10px; }
.op-catfaq__t { text-align: center; font-size: 21px; font-weight: 800; color: #0f172a; margin: 0 0 16px; }
.op-catfaq__list details {
	background: #fff;
	border: 1px solid #e5e9f2;
	border-radius: 12px;
	margin-bottom: 8px;
	overflow: hidden;
}
.op-catfaq__list summary {
	padding: 14px 16px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
	color: #0f172a;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
.op-catfaq__list summary::-webkit-details-marker { display: none; }
.op-catfaq__list summary::after {
	content: "+";
	flex: 0 0 auto;
	color: #8a94a6;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}
.op-catfaq__list details[open] summary::after { content: "\2212"; }
.op-catfaq__a { padding: 0 16px 15px; color: #4b5563; font-size: 14.5px; line-height: 1.6; }

/* Телефон: hero категории компактнее, товары начинаются на первом экране. */
@media (max-width: 640px) {
	.op-hero--cat { padding: 22px 18px 16px; }
	.op-hero--cat .op-hero__t { font-size: 27px; }
	.op-hero--cat .op-hero__s { font-size: 14px; line-height: 1.5; margin-bottom: 14px; }
	.op-hero--cat .op-hero__trust { margin-top: 14px; padding-top: 12px; }
	.op-catfaq { margin-top: 34px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ВЫДАЧА ПОИСКА (search.php): крошки, hero категории с запросом и сетка карточек.
   Холст общий с витриной (см. выше), раскладку Astra задаёт inc/search.php.
   ═══════════════════════════════════════════════════════════════════════ */
.ops { flex: 1 1 auto; width: 100%; min-width: 0; padding: 22px 0 72px; font-family: var(--op-font); }
.ops .op-crumbs { margin: 0 0 12px; }
.ops .op-hero__t { max-width: none; overflow-wrap: anywhere; }

/* Ничего не нашлось: подсказка и дорога в магазин и блог. */
.ops-empty { padding: 40px 28px; border: 1px solid var(--ui-line); border-radius: var(--ui-r); background: #fff; box-shadow: var(--ui-card-sh); text-align: center; }
.ops-empty__ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent); }
.ops-empty__ic svg { width: 24px; height: 24px; }
.ops .ops-empty__s { max-width: 560px; margin: 0 auto 22px; font-size: 15.5px; line-height: 1.6; color: var(--ui-text); text-wrap: balance; }
.ops .ops-empty__s a { color: var(--ui-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ops-empty__btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.ops .ops-btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border: 1px solid transparent; border-radius: 999px; background: var(--ui-btn); color: #fff; font-size: 14.5px; font-weight: 700; line-height: 1.2; text-decoration: none; box-shadow: var(--ui-btn-sh); transition: filter .15s ease; }
.ops .ops-btn:hover { color: #fff; filter: brightness(1.06); }
.ops .ops-btn--ghost { border-color: var(--ui-line); background: #fff; color: var(--ui-ink); box-shadow: none; }
.ops .ops-btn--ghost:hover { border-color: #cbd5e1; color: var(--ui-ink); filter: none; }
@media (max-width: 640px) {
	.ops { padding: 16px 0 56px; }
	.ops-empty { padding: 28px 18px; }
	.ops .ops-btn { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ГЛАВНАЯ: ритм блоков из контента страницы (только CSS, тексты не трогаем).
   Базовые стили этих блоков — в main.css, здесь поправки поверх.
   ═══════════════════════════════════════════════════════════════════════ */
/* H2 «Оплата подписок…» в одной шкале с «Надёжной оплатой»: не крупнее соседних секций. */
.services-header .services-title { font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; text-wrap: balance; font-family: var(--ui-h-font); }
/* Карточки «Популярных» на телефоне чуть шире: описание в две строки без обрезки. */
@media (max-width: 640px) { .op-home-pop .opcat-marq__track > .opc { flex-basis: 280px; width: 280px; } }
/* Стрелки ленты отзывов — под скринами по центру, текст отзывов не закрывают. */
.rv-marq { padding-bottom: 56px; }
.rv-marq .rv-btn { top: auto; bottom: 4px; transform: none; }
.rv-marq .rv-btn--prev { left: calc(50% - 50px); }
.rv-marq .rv-btn--next { right: calc(50% - 50px); }
@media (max-width: 921px) {
	.services-header .services-title { font-size: 30px; }
	/* H1 на телефоне: последнее слово («году») не остаётся одно в строке. */
	.hero-title { text-wrap: pretty; }
	/* Тёмный блок «Нужна помощь…» отделяем от последней карточки преимуществ. */
	.benefits-cta-box { margin-top: 28px; }
}