/* Боковая панель статьи: карточка сервиса, содержание, соседние сервисы.
   Показывается только на широком экране, на планшете и телефоне скрыта целиком. */

/* До 1199px панели нет, статья идёт одной колонкой, как раньше. */
.single-post .entry-content .op-aside { display: none; }

@media (min-width: 1200px) {

	/* Контейнер статьи шире обычного: иначе колонка текста сузилась бы ради панели.
	   Ширину задаёт родительская тема, поэтому перебиваем её явно. */
	/* На широком экране контейнер 1400px, на ноутбуке сжимается, оставляя поля по краям:
	   без этого при 1440 статья упиралась в самый край окна. */
	body.single-post .site-content .ast-container,
	body.single-post .ast-container { max-width: min(1300px, 100% - 80px) !important; }

	/* Родительская тема держит контент в 1000px, поэтому ширину сетки задаём явно:
	   иначе колонка текста остаётся узкой, сколько ни расширяй контейнер. */
	.single-post .entry-content .op-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 60px;
		align-items: start;
		max-width: 1240px !important;
	}
	.single-post .entry-content .op-grid__main { min-width: 0; }

	.single-post .entry-content .op-aside {
		display: flex;
		flex-direction: column;
		gap: 14px;
		position: sticky;
		top: 96px;
	}

	/* Содержание переехало в панель: второй такой же блок в тексте только мешает.
	   На планшете и телефоне он остаётся, панели там нет. */
	.single-post .entry-content .op-grid :is(.b26-toc, .opx-nav) { display: none; }

	.single-post .entry-content .op-aside__card {
		padding: 18px;
		border: 1px solid #e8edf3;
		border-radius: 16px;
		background: #fff;
		box-shadow: 0 12px 30px -24px rgba(15, 23, 42, .55);
	}

	/* Шапка карточки: значок сервиса, название и цена дня. */
	.single-post .entry-content .op-aside__head {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 14px;
	}
	.single-post .entry-content .op-aside__logo {
		width: 44px;
		height: 44px;
		flex: 0 0 auto;
		border-radius: 12px;
		object-fit: contain;
		background: #f8fafc;
	}
	.single-post .entry-content .op-aside__name {
		font-size: 16px;
		font-weight: 700;
		line-height: 1.25;
		color: #0f172a;
	}
	.single-post .entry-content .op-aside__price {
		margin-top: 3px;
		font-size: 13.5px;
		color: #64748b;
	}
	.single-post .entry-content .op-aside__price b {
		font-size: 15px;
		font-weight: 700;
		color: #0f172a;
	}

	.single-post .entry-content .op-aside__facts {
		margin: 0 0 16px;
		padding: 0;
		list-style: none;
	}
	.single-post .entry-content .op-aside__facts li {
		position: relative;
		margin: 0 0 7px;
		padding-left: 22px;
		font-size: 13.5px;
		line-height: 1.45;
		color: #475569;
	}
	.single-post .entry-content .op-aside__facts li:last-child { margin-bottom: 0; }
	.single-post .entry-content .op-aside__facts li::before {
		content: "";
		position: absolute;
		top: .35em;
		left: 0;
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background: #dcfce7 center / 9px 9px no-repeat;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	}

	.single-post .entry-content .op-aside__btn,
	.single-post .entry-content .op-aside__btn:hover {
		display: block;
		padding: 13px 16px;
		border-radius: 12px;
		background: var(--b26-accent, #2563eb);
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		transition: background .15s;
	}
	.single-post .entry-content .op-aside__btn:hover { background: var(--b26-accent-dark, #1d4ed8); }

	.single-post .entry-content .op-aside__link,
	.single-post .entry-content .op-aside__link:hover {
		display: block;
		margin-top: 10px;
		font-size: 13px;
		text-align: center;
		color: #64748b;
		text-decoration: none;
	}
	.single-post .entry-content .op-aside__link:hover { color: var(--b26-accent, #2563eb); }

	.single-post .entry-content .op-aside__title {
		margin-bottom: 10px;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: #94a3b8;
	}

	/* Содержание: номер раздела слева, название в одну-две строки. */
	.single-post .entry-content .op-aside__toc ol {
		margin: 0;
		padding: 0;
		list-style: none;
		counter-reset: op-aside-toc;
	}
	.single-post .entry-content .op-aside__toc li {
		counter-increment: op-aside-toc;
		margin: 0 0 9px;
	}
	.single-post .entry-content .op-aside__toc li:last-child { margin-bottom: 0; }
	.single-post .entry-content .op-aside__toc a {
		display: flex;
		gap: 9px;
		font-size: 13.5px;
		line-height: 1.4;
		color: #334155;
		text-decoration: none;
	}
	/* Название раздела бывает длинным: держим не больше двух строк, иначе список
	   из пяти пунктов превращается в полотно. Ограничение вешаем на сам текст,
	   чтобы номер слева остался на своём месте. */
	.single-post .entry-content .op-aside__toc a > span {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.single-post .entry-content .op-aside__toc a::before {
		content: counter(op-aside-toc, decimal-leading-zero);
		flex: 0 0 auto;
		font-size: 11.5px;
		font-weight: 700;
		color: #cbd5e1;
		padding-top: 1px;
	}
	.single-post .entry-content .op-aside__toc a:hover { color: var(--b26-accent, #2563eb); }

	/* Соседние сервисы: значок и название, без цен, чтобы не спорить с главной карточкой. */
	.single-post .entry-content .op-aside__rel ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.single-post .entry-content .op-aside__rel li { margin: 0 0 4px; }
	.single-post .entry-content .op-aside__rel li:last-child { margin-bottom: 0; }
	.single-post .entry-content .op-aside__rel a {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 7px 8px;
		margin: 0 -8px;
		border-radius: 10px;
		font-size: 13.5px;
		color: #334155;
		text-decoration: none;
		transition: background .12s, color .12s;
	}
	.single-post .entry-content .op-aside__rel a:hover {
		background: #f6f9fe;
		color: var(--b26-accent, #2563eb);
	}
	.single-post .entry-content .op-aside__rel img {
		width: 26px;
		height: 26px;
		flex: 0 0 auto;
		border-radius: 7px;
		object-fit: contain;
		background: #f8fafc;
	}
}