/* Cosmetpedia article + Gutenberg blocks */

.cp-article .single-page__title {
	margin-bottom: .85rem;
}

.cp-article-author {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin: 0 0 1.1rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--cp-border, rgba(32, 33, 43, .14));
	border-radius: var(--cp-radius, 12px);
	background: var(--cp-surface, #fff);
}

.cp-article-author__avatar {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--cp-soft, #f6f7fa);
}

.cp-article-author__name {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--cp-ink, #20212b);
}

.cp-article-author__name a {
	color: inherit;
	text-decoration: none;
}

.cp-article-author__name a:hover {
	color: var(--cp-hover, #4e3378);
}

.cp-article-author__title {
	margin: .15rem 0 0;
	color: var(--cp-muted, #6b6e79);
	font-size: .8rem;
	font-weight: 500;
	line-height: 1.3;
}

.cp-article-author--sidebar {
	align-items: flex-start;
	margin-bottom: .85rem;
	padding: .85rem .95rem;
}

.cp-article-author--sidebar .cp-article-author__name {
	font-size: .98rem;
	line-height: 1.2;
}

.cp-article-author--sidebar .cp-article-author__title {
	margin-top: .2rem;
	font-size: .76rem;
	line-height: 1.25;
	max-width: 15.5rem;
}

.cp-article-author--mobile {
	display: none;
}

/* Sticky menu stays above article chrome */
.cp-article-page .site-main-nav,
.cp-article-page .site-main-nav.is-sticky {
	z-index: 1000;
}

/*
 * The List already sticks .blog-section__sidebar.
 * Do NOT nest a second sticky on author/TOC — that overlays «Лидеры».
 * Keep the whole sidebar sticky, parked below the main nav.
 */
.cp-article-page .cp-article-sidebar.blog-section__sidebar {
	position: sticky;
	top: 5.25rem;
	z-index: 1;
	align-self: start;
}

.cp-article-sidebar__sticky {
	position: static;
	z-index: auto;
	margin-bottom: 1.25rem;
}

.cp-article-toc {
	margin: 0 0 1.5rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--cp-border, rgba(32, 33, 43, .14));
	border-radius: var(--cp-radius, 12px);
	background: var(--cp-soft, #f6f7fa);
}

.cp-article-toc__title {
	margin: 0 0 .75rem;
	font-size: .95rem;
	font-weight: 800;
}

.cp-article-toc ol {
	margin: 0;
	padding: 0 0 0 1.1rem;
}

.cp-article-toc li {
	position: static;
	margin: 0 0 .45rem;
	padding: 0;
}

.cp-article-toc li::before {
	content: none !important;
}

.cp-article-toc a {
	color: var(--cp-link, #7251a6);
	text-decoration: none;
	font-size: .92rem;
	line-height: 1.35;
}

.cp-article-toc a:hover {
	color: var(--cp-hover, #4e3378);
}

.cp-article-toc--sidebar {
	margin-bottom: 0;
}

.cp-article-toc--mobile {
	display: none;
}

@media (max-width: 960px) {
	.cp-article-author--mobile,
	.cp-article-toc--mobile {
		display: flex;
	}
	.cp-article-toc--mobile {
		display: block;
	}
	.cp-article-author--sidebar,
	.cp-article-toc--sidebar,
	.cp-article-sidebar__sticky {
		display: none;
	}
}

@media (min-width: 961px) {
	.cp-article-author--mobile,
	.cp-article-toc--mobile {
		display: none;
	}
}

/* Logged-in WP admin bar */
.admin-bar .cp-article-page .cp-article-sidebar.blog-section__sidebar {
	top: 7rem;
}

.cp-article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.5rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	color: var(--cp-muted, #6b6e79);
	font-size: .9rem;
}

.cp-article-meta li {
	position: static;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

.cp-icon {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
	vertical-align: middle;
	color: currentColor;
}

.cp-article-meta .cp-icon {
	width: 1.05rem;
	height: 1.05rem;
	opacity: .85;
}

.cp-blog-card-meta .cp-icon {
	width: .95rem;
	height: .95rem;
	opacity: .8;
}

.cp-blog-card-meta__reading {
	display: inline-flex !important;
	align-items: center;
	gap: .3rem;
}

.cp-article-meta li + li {
	padding-left: 1.5rem;
	border-left: 1px solid var(--cp-border, rgba(32, 33, 43, .14));
}

@media (max-width: 760px) {
	.cp-article-meta {
		gap: .55rem .85rem;
	}
	.cp-article-meta li + li {
		padding-left: 0;
		border-left: 0;
	}
}

.cp-article-meta li::before {
	content: none !important;
	display: none !important;
}

.cp-like-btn {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	padding: .28rem .65rem;
	border: 1px solid var(--cp-border, rgba(32, 33, 43, .14));
	border-radius: 999px;
	background: var(--cp-surface, #fff);
	color: var(--cp-ink, #20212b);
	font: inherit;
	font-size: .88rem;
	font-weight: 700;
	cursor: pointer;
}

.cp-like-btn.is-liked {
	border-color: color-mix(in srgb, var(--cp-accent, #9f7aea) 45%, var(--cp-border, #ddd));
	background: color-mix(in srgb, var(--cp-accent, #9f7aea) 14%, #fff);
}

.cp-article-hero {
	margin: 0 0 1.5rem;
	overflow: hidden;
	border-radius: var(--cp-radius, 12px);
	max-height: 280px;
}

.cp-article-hero img {
	display: block;
	width: 100%;
	height: 280px;
	object-fit: cover;
}

/* In-content blocks */
.cp-callout,
.cp-checklist,
.cp-download,
.cp-article-faq {
	max-width: 100%;
	box-sizing: border-box;
	position: relative;
	z-index: 0;
}

.cp-callout a,
.cp-checklist a,
.cp-download a,
.cp-article-faq a,
.cp-callout li,
.cp-checklist li,
.cp-article-faq li {
	position: static !important;
}

.cp-callout {
	margin: 1.5rem 0;
	padding: 1.1rem 1.2rem;
	border-radius: var(--cp-radius, 12px);
	border: 1px solid var(--cp-border, rgba(32, 33, 43, .14));
}

.cp-callout__label {
	margin: 0 0 .55rem;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.cp-callout__body {
	margin: 0;
	color: var(--cp-ink, #20212b);
	line-height: 1.6;
}

.cp-callout__body > :first-child {
	margin-top: 0;
}

.cp-callout__body > :last-child {
	margin-bottom: 0;
}

.cp-callout--important {
	border-color: color-mix(in srgb, #c9920f 45%, var(--cp-border, #ddd));
	background: linear-gradient(180deg, #fff8e8 0%, #fff 70%);
}

.cp-callout--important .cp-callout__label {
	color: #9a6b00;
}

.cp-callout--expert {
	border-color: color-mix(in srgb, var(--cp-link, #7251a6) 35%, var(--cp-border, #ddd));
	background: linear-gradient(180deg, color-mix(in srgb, var(--cp-accent, #9f7aea) 10%, #fff) 0%, #fff 65%);
}

.cp-callout--expert .cp-callout__label {
	color: var(--cp-link, #7251a6);
}

.cp-expert {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: .75rem;
}

.cp-expert__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.cp-expert__name {
	margin: 0;
	font-weight: 800;
}

.cp-expert__title {
	margin: .15rem 0 0;
	color: var(--cp-muted, #6b6e79);
	font-size: .88rem;
}

.cp-checklist {
	margin: 1.5rem 0;
	padding: 1.15rem 1.25rem;
	border: 1px solid var(--cp-border, rgba(32, 33, 43, .14));
	border-radius: var(--cp-radius, 12px);
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--cp-accent, #9f7aea) 8%, #fff), #fff 55%),
		var(--cp-surface, #fff);
}

.cp-checklist__title {
	margin: 0 0 .85rem;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.3;
}

.cp-checklist__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-checklist__item {
	position: static !important;
	display: flex !important;
	align-items: center;
	gap: .55rem;
	margin: 0 0 .55rem !important;
	padding: 0 !important;
	width: 100%;
}

.cp-checklist__item::before,
.cp-checklist__item::after {
	content: none !important;
	display: none !important;
}

.cp-checklist__item label {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	width: 100%;
	cursor: pointer;
	line-height: 1.45;
}

.cp-checklist__item input[type="checkbox"] {
	flex: 0 0 auto;
	margin-top: .2rem;
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--cp-link, #7251a6);
}

.cp-checklist__item.is-checked span {
	text-decoration: line-through;
	color: var(--cp-muted, #6b6e79);
}

.cp-checklist__input {
	flex: 1 1 auto !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: .45rem .65rem !important;
	box-sizing: border-box;
}

/* Editor: keep checklist row editable and full-width */
.editor-styles-wrapper .cp-checklist__item,
.block-editor-block-list__block .cp-checklist__item {
	display: flex !important;
	align-items: center;
	gap: .55rem;
	width: 100%;
}

.editor-styles-wrapper .cp-checklist__input,
.block-editor-block-list__block .cp-checklist__input {
	flex: 1 1 auto !important;
	width: 100% !important;
	min-width: 220px !important;
}

.cp-download {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 1.5rem 0;
	padding: 1.15rem 1.25rem;
	border: 1px dashed color-mix(in srgb, var(--cp-link, #7251a6) 40%, var(--cp-border, #ddd));
	border-radius: var(--cp-radius, 12px);
	background: color-mix(in srgb, var(--cp-soft, #f6f7fa) 80%, #fff);
}

.cp-download__icon {
	flex: 0 0 2.5rem;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	background: var(--cp-link, #7251a6);
	color: #fff;
	font-size: 1.2rem;
	font-weight: 800;
}

.cp-download__body {
	flex: 1 1 auto;
	min-width: 0;
}

.cp-download__title {
	margin: 0;
	font-weight: 800;
}

.cp-download__desc,
.cp-download__meta {
	margin: .35rem 0 0;
	color: var(--cp-muted, #6b6e79);
	font-size: .88rem;
}

.cp-download__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .55rem 1rem;
	border-radius: 999px;
	background: var(--cp-link, #7251a6);
	color: #fff !important;
	font-weight: 800;
	text-decoration: none !important;
}

.cp-download__btn:hover {
	background: var(--cp-hover, #4e3378);
}

.cp-article-faq {
	margin: 2.5rem 0 1.5rem;
}

.cp-article-faq__title {
	margin: 0 0 1rem;
	font-size: clamp(1.35rem, 3vw, 1.75rem);
}

.cp-article .post-content table,
.cp-article .wp-block-table table,
.cp-prose table,
.cp-prose .wp-block-table table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	margin: 1.25rem 0;
	font-size: .95rem;
}

.cp-article .post-content th,
.cp-article .post-content td,
.cp-article .wp-block-table th,
.cp-article .wp-block-table td,
.cp-prose th,
.cp-prose td,
.cp-prose .wp-block-table th,
.cp-prose .wp-block-table td {
	padding: .7rem .85rem;
	border: 1px solid var(--cp-border, rgba(32, 33, 43, .14));
	vertical-align: top;
	text-align: left;
}

.cp-article .post-content thead th,
.cp-article .wp-block-table thead th,
.cp-prose thead th,
.cp-prose .wp-block-table thead th {
	background: var(--cp-soft, #f6f7fa);
	font-weight: 800;
}

.cp-article .post-content tr:nth-child(even) td,
.cp-article .wp-block-table tbody tr:nth-child(even) td,
.cp-prose tr:nth-child(even) td,
.cp-prose .wp-block-table tbody tr:nth-child(even) td {
	background: color-mix(in srgb, var(--cp-soft, #f6f7fa) 55%, #fff);
}

@media (max-width: 760px) {
	.cp-download {
		flex-wrap: wrap;
	}
	.cp-download__btn {
		width: 100%;
	}
	.cp-article-hero,
	.cp-article-hero img {
		max-height: 200px;
		height: 200px;
	}
}

.cp-expert__name a {
	color: inherit;
	text-decoration: none;
}
.cp-expert__name a:hover {
	color: var(--cp-hover, #4e3378);
}

/* Inline "Подсказка" text format — hover/tap term in article prose. */
.cp-tip {
	position: relative;
	border-bottom: 1px dotted var(--cp-link, #7251a6);
	cursor: help;
	white-space: nowrap;
}

/* Small "i" badge right after the term — makes it obvious it's interactive,
   especially on touch where there's no hover to reveal a plain underline. */
.cp-tip::after {
	content: 'i';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	margin-left: .2rem;
	border-radius: 50%;
	background: var(--cp-link, #7251a6);
	color: #fff;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: .68rem;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
	vertical-align: super;
}

/* Popover is absolutely positioned, so being ::before in DOM order doesn't
   affect where it renders — it still floats above the term either way. */
.cp-tip::before {
	content: attr(data-tip);
	position: absolute;
	left: 50%;
	bottom: calc(100% + .5rem);
	transform: translate(-50%, .3rem);
	width: max-content;
	max-width: min(280px, 70vw);
	padding: .6rem .8rem;
	border-radius: 8px;
	background: var(--cp-ink, #20212b);
	color: #fff;
	font-size: .82rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1.45;
	text-align: left;
	white-space: normal;
	box-shadow: 0 10px 26px rgba(31, 24, 48, .18);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
	z-index: 20;
}

.cp-tip:hover::before,
.cp-tip:focus::before,
.cp-tip.is-open::before {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.cp-archive--blog .blog-section__wrap {
	margin-top: .5rem;
}

.cp-archive--blog .cp-term-nav {
	margin-top: 0;
}

.cp-author-hero {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	margin: 0 0 2rem;
	padding: 1.25rem;
	border: 1px solid var(--cp-border, rgba(32, 33, 43, .14));
	border-radius: var(--cp-radius, 12px);
	background: var(--cp-surface, #fff);
}
.cp-author-hero__avatar {
	flex: 0 0 140px;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--cp-soft, #f6f7fa);
}
.cp-author-hero__name {
	margin: 0 0 .35rem;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.2;
}
.cp-author-hero__title {
	margin: 0 0 .85rem;
	color: var(--cp-muted, #6b6e79);
	font-size: 1.05rem;
}
.cp-author-hero__facts {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .35rem;
	color: var(--cp-ink, #20212b);
	font-size: .95rem;
}
.cp-author-hero__facts li {
	position: static;
	margin: 0;
}
.cp-author-hero__facts li::before {
	content: none !important;
}
.cp-author-about {
	display: grid;
	gap: 1.25rem;
	margin: 0 0 2.5rem;
	max-width: 760px;
}
.cp-author-about__block h2 {
	margin: 0 0 .65rem;
	font-size: 1.25rem;
}
.cp-author-about__block p {
	margin: 0;
	color: var(--cp-muted, #6b6e79);
	line-height: 1.65;
}
.cp-author-posts__title {
	margin: 0 0 1.25rem;
	font-size: clamp(1.35rem, 3vw, 1.75rem);
}
@media (max-width: 760px) {
	.cp-author-hero {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.cp-author-hero__facts {
		justify-items: center;
	}
}

/* Authors directory /author/ */
.cp-authors-page .cp-archive__header {
	margin-bottom: 2rem;
}

.cp-authors-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.cp-authors-card {
	margin: 0;
}

.cp-authors-card__link {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: center;
	min-height: 100%;
	padding: 1.1rem 1.15rem;
	border: 1px solid var(--cp-border, rgba(32, 33, 43, .14));
	border-radius: var(--cp-radius, 12px);
	background: var(--cp-surface, #fff);
	text-decoration: none !important;
	color: inherit !important;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.cp-authors-card__link:hover,
.cp-authors-card__link:focus-visible {
	border-color: color-mix(in srgb, #778873 45%, var(--cp-border, rgba(32, 33, 43, .14)));
	box-shadow: 0 10px 28px rgba(31, 24, 48, .08);
}

.cp-authors-card__avatar {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	object-fit: cover;
	background: var(--cp-soft, #f6f7fa);
}

.cp-authors-card__avatar--empty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	font-weight: 700;
	color: #778873;
}

.cp-authors-card__body {
	display: grid;
	gap: .25rem;
	min-width: 0;
}

.cp-authors-card__name {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--cp-ink, #20212b);
}

.cp-authors-card__title {
	color: var(--cp-muted, #6b6e79);
	font-size: .95rem;
	line-height: 1.35;
}

.cp-authors-card__meta {
	margin-top: .15rem;
	color: #778873;
	font-size: .86rem;
	font-weight: 600;
}

.cp-author-hero .cp-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.cp-author-hero .cp-eyebrow a:hover {
	color: #778873;
}

@media (max-width: 1100px) {
	.cp-authors-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.cp-authors-grid {
		grid-template-columns: 1fr;
	}
}