/* ===== BREADCRUMBS ===== */
.breadcrumbs {
	font-size: 14px;
	color: #6b7280;
	margin-bottom: 24px;
}
.breadcrumbs a {
	color: #6b7280;
	transition: color 0.2s;
	margin: 0 2px;
}
.breadcrumbs span {
	margin: 0 2px;
}
.breadcrumbs a:hover { text-decoration: underline; color: #374151; }

/* ===== AUTHOR DATE BLOCK ===== */
.author-date-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
	font-size: 14px;
	color: #6b7280;
}
.author-date-bar .author-info {
	display: flex;
	align-items: center;
	gap: 8px;
}
.author-avatar-sm {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #d1d5db;
	overflow: hidden;
	flex-shrink: 0;
}
.author-avatar-sm svg { width: 100%; height: 100%; color: #6b7280; }
.author-date-bar strong { color: #374151; }
.author-date-bar .separator {
	display: none;
	color: #d1d5db;
}

/* ===== HERO ===== */
.hero-section {
	background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://www.mirpack.ru/wp-content/uploads/b01tg2mw7z28i5q60vz3ghv0ez64s7wr.jpg');
	background-size: cover;
	background-position: center;
	border-radius: 16px;
	padding: 24px;
	margin-bottom: 5px;
	color: #fff;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
	position: relative;
	overflow: hidden;
}
.hero-lcp-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	opacity: 0;
}
.hero-text { width: 100%; }
.hero-text h1 {
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 24px;
	line-height: 1.2;
}
.hero-text .lead {
	font-size: 16px;
	margin-bottom: 32px;
	color: #e5e7eb;
}
.hero-buttons {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.hero-btn-primary {
	display: inline-block;
	background: #27B243;
	color: #fff;
	padding: 16px 32px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 16px;
	text-align: center;
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
	transition: background 0.2s, transform 0.2s;
}
.hero-btn-primary:hover { background: #1f9436; transform: translateY(-2px); color: inherit; }
.hero-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #fff;
	color: #1f2937;
	padding: 16px 32px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 16px;
	text-align: center;
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
	transition: background 0.2s;
}
.hero-btn-secondary:hover { background: #f3f4f6; color: initial; }
.hero-btn-secondary svg { width: 20px; height: 20px; }

/* Trust block */
.hero-trust {
	background: rgba(255,255,255,0.1);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	padding: 24px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.2);
	width: 100%;
}
.hero-trust ul { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.hero-trust li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
}
.trust-check {
	background: #22c55e;
	border-radius: 50%;
	padding: 4px;
	display: flex;
	flex-shrink: 0;
}
.trust-check svg { width: 16px; height: 16px; color: #fff; }

/* ===== LAYOUT: article + sidebar ===== */
.content-layout {
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.article-main { width: 100%; }
.article-sidebar { width: 100%; display: flex; flex-direction: column; gap: 32px; }

/* ===== PROSE (article text) ===== */
.prose h2 {
	margin-top: 2rem;
	margin-bottom: 1rem;
	font-weight: 700;
	font-size: 22px;
	color: #1a202c;
}
.prose p {
	margin-bottom: 1.25rem;
	line-height: 1.7;
	color: #4a5568;
}
.prose ul {
	list-style-type: disc;
	padding-left: 1.5rem;
	margin-bottom: 1.5rem;
}
.prose li { margin-bottom: 0.5rem; }
.prose figure { margin: 1.5rem 0; }
.prose figcaption { text-align: center; font-size: 14px; color: #6b7280; margin-top: 8px; }
.prose img { border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); width: 100%; }
.prose .lead-text {
	font-size: 18px;
	color: #4b5563;
	margin-bottom: 24px;
}

/* ===== KEY TAKEAWAYS ===== */
.key-takeaways {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	padding: 24px;
	border-radius: 12px;
	margin-bottom: 32px;
}
.key-takeaways h2 {
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	color: #1a202c;
}
.key-takeaways h2 svg { width: 20px; height: 20px; color: #27B243; }
.key-takeaways ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.key-takeaways li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: #374151;
	font-size: 15px;
	line-height: 1.5;
}
.key-takeaways li .check { color: #27B243; font-weight: 700; margin-top: 2px; flex-shrink: 0; }

/* ===== TABLE OF CONTENTS ===== */
.toc-block {
	background: #f3f4f6;
	padding: 24px;
	border-radius: 12px;
	margin-bottom: 32px;
	border-left: 4px solid #27B243;
}
.toc-block .toc-title { font-weight: 700; font-size: 18px; margin-bottom: 16px; }
.toc-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.toc-list a {
	color: #16a34a;
	font-size: 15px;
	transition: color 0.2s;
}
.toc-list a:hover { text-decoration: underline; }

/* ===== MATERIAL CARDS ===== */
.material-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 32px 0;
}
.material-card {
	background: #fff;
	padding: 24px;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
	border-top: 4px solid;
}
.material-card--pnd { border-top-color: #3b82f6; }
.material-card--pvd { border-top-color: #22c55e; }
.material-card--psd { border-top-color: #a855f7; }
.material-card h3 { font-weight: 700; font-size: 20px; margin-bottom: 8px; }
.material-card .subtitle { font-size: 14px; color: #6b7280; margin-bottom: 8px; }
.material-card p { color: #374151; font-size: 15px; line-height: 1.6; }

/* ===== COMPARISON TABLE ===== */
.table-wrap { overflow-x: auto; margin: 32px 0; }
.comparison-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
	overflow: hidden;
	font-size: 14px;
}
.comparison-table caption {
	text-align: left;
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 12px;
	color: #1f2937;
}
.comparison-table thead tr { background: #f3f4f6; }
.comparison-table th {
	text-align: left;
	padding: 12px;
	font-weight: 600;
	border-bottom: 1px solid #e5e7eb;
}
.comparison-table th:not(:first-child) { text-align: center; border-left: 1px solid #e5e7eb; }
.comparison-table td {
	padding: 12px;
	border-bottom: 1px solid #e5e7eb;
}
.comparison-table td:not(:first-child) { text-align: center; border-left: 1px solid #e5e7eb; }
.comparison-table td:first-child { font-weight: 500; }
.comparison-table tbody tr:nth-child(even) { background: #f9fafb; }
.comparison-table .price-cell { color: #27B243; font-weight: 600; }

/* ===== ADDITIVES LIST ===== */
.additives-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	list-style: disc;
	padding-left: 1.5rem;
	margin-bottom: 1.5rem;
}

/* ===== TIP BOX ===== */
.tip-box {
	background: #eff6ff;
	padding: 16px;
	border-radius: 8px;
	border: 1px solid #dbeafe;
	margin: 24px 0;
}
.tip-box strong { display: block; margin-bottom: 4px; }

/* ===== CTA MID-ARTICLE ===== */
.cta-mid {
	margin: 40px 0;
	background: #111827;
	color: #fff;
	padding: 32px;
	border-radius: 16px;
	position: relative;
	overflow: hidden;
}
.cta-mid .cta-decor {
	position: absolute;
	top: 0; right: 0;
	width: 256px; height: 256px;
	background: #27B243;
	opacity: 0.2;
	border-radius: 50%;
	transform: translate(50%, -50%);
	transition: transform 0.5s;
}
.cta-mid:hover .cta-decor { transform: translate(50%, -50%) scale(1.1); }
.cta-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}
.cta-inner h3 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.cta-inner p { color: #d1d5db; font-size: 15px; }
.cta-btn {
	background: #27B243;
	color: #fff;
	padding: 12px 24px;
	border-radius: 8px;
	font-weight: 700;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.2s;
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 0 0 4px rgba(34,197,94,0.3);
	font-size: 15px;
}
.cta-btn:hover { background: #1f9436; }

/* ===== PRODUCTION STEPS ===== */
.production-row {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
	margin: 32px 0;
}
.production-row .img-col { width: 100%; }
.production-row .img-col img { border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); width: 100%; }
.production-row .text-col { width: 100%; }
.production-row h4 { font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.production-row ol {
	list-style: decimal;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.production-row ol li { font-size: 15px; color: #374151; line-height: 1.6; }

/* ===== GOST BLOCK ===== */
.gost-block {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.gost-block ul { display: flex; flex-direction: column; gap: 8px; }
.gost-block li {
	display: flex;
	align-items: center;
	color: #374151;
	font-size: 15px;
}
.gost-block .gost-code {
	font-weight: 700;
	color: #16a34a;
	width: 100px;
	flex-shrink: 0;
}

/* ===== AUTHOR BIO (bottom) ===== */
.author-bio {
	margin-top: 48px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.author-bio .label {
	font-size: 11px;
	color: #9ca3af;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 16px;
	font-weight: 600;
}
.author-bio-inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.author-bio-photo {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #dcfce7;
	flex-shrink: 0;
}
.author-bio-inner h3 { font-weight: 700; font-size: 18px; color: #1f2937; }
.author-bio-inner .role { font-size: 14px; color: #16a34a; font-weight: 500; margin-bottom: 8px; }
.author-bio-inner .bio-text { font-size: 14px; color: #4b5563; line-height: 1.6; margin-bottom: 12px; }
.author-bio-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.author-bio-links a { font-size: 14px; transition: color 0.2s; }
.author-bio-links a.link-primary { color: #16a34a; font-weight: 500; }
.author-bio-links a.link-primary:hover { text-decoration: underline; }
.author-bio-links a.link-secondary { color: #6b7280; }
.author-bio-links a.link-secondary:hover { color: #16a34a; }
.author-bio-links .sep { color: #d1d5db; }

/* Переопределяем .prose стили внутри author-bio */
.prose .author-bio p { margin-bottom: 0; color: inherit; line-height: inherit; }
.prose .author-bio .label { color: #9ca3af; margin-bottom: 16px; }
.prose .author-bio .role { color: #16a34a; margin-bottom: 8px; }
.prose .author-bio .bio-text { color: #4b5563; margin-bottom: 12px; line-height: 1.6; }
.prose .author-bio h3 { margin-top: 0; margin-bottom: 4px; font-size: 18px; }
.prose .author-bio img {
	border-radius: 50%;
	box-shadow: none;
	width: 80px;
	height: 80px;
}

/* ===== SIDEBAR ===== */
.sidebar-card {
	background: #fff;
	padding: 24px;
	border-radius: 12px;
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.06);
	border: 1px solid #f3f4f6;
}
.sidebar-sticky { position: sticky; top: 96px; }
.sidebar-card h3 { font-weight: 700; font-size: 20px; margin-bottom: 16px; }

/* Sidebar product items */
.sidebar-product {
	display: flex;
	gap: 12px;
	align-items: center;
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid #f3f4f6;
}
.sidebar-product:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.sidebar-product img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	background: #f9fafb;
	border-radius: 8px;
}
.sidebar-product a {
	font-weight: 600;
	font-size: 14px;
	color: #1f2937;
	transition: color 0.2s;
}
.sidebar-product a:hover { color: #27B243; }
.sidebar-product .stock { font-size: 12px; color: #6b7280; margin-top: 2px; }

.sidebar-catalog-btn {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 24px;
	background: #f3f4f6;
	color: #374151;
	padding: 10px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	transition: background 0.2s;
}
.sidebar-catalog-btn:hover { background: #e5e7eb; }

/* Sidebar manager widget */
.manager-widget {
	background: #f0fdf4;
	padding: 24px;
	border-radius: 12px;
	border: 1px solid #dcfce7;
}
.manager-top {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}
.manager-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #d1d5db;
	overflow: hidden;
}
.manager-avatar svg { width: 100%; height: 100%; color: #6b7280; }
.manager-name { font-weight: 700; font-size: 14px; color: #1f2937; }
.manager-sub { font-size: 12px; color: #6b7280; }
.manager-widget > p { font-size: 14px; color: #374151; margin-bottom: 16px; }
.wa-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background: #22c55e;
	color: #fff;
	padding: 10px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	transition: background 0.2s;
}
.wa-btn:hover { background: #16a34a; }
.wa-btn svg { width: 16px; height: 16px; }

/* Sidebar catalog nav */
.catalog-nav h3 { font-weight: 700; font-size: 18px; margin-bottom: 16px; }
.catalog-nav-list { display: flex; flex-direction: column; gap: 8px; }
.catalog-nav-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #374151;
	font-size: 14px;
	padding: 4px 0;
	border-bottom: 1px solid #f9fafb;
	transition: color 0.2s;
}
.catalog-nav-list a:hover { color: #27B243; }
.catalog-nav-list .arrow { color: #9ca3af; }

/* ===== FAQ ===== */
.faq-section {
	max-width: 800px;
	margin: 64px auto 48px;
}
.faq-section h2 {
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 32px;
}
.faq-list { display: flex; flex-direction: column; gap: 16px; }
.faq-item {
	background: #fff;
	padding: 16px;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	border: 1px solid #f3f4f6;
}
.faq-item summary {
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 15px;
	color: #1f2937;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-arrow {
	transition: transform 0.3s;
	font-size: 12px;
	color: #9ca3af;
}
.faq-item[open] summary .faq-arrow { transform: rotate(180deg); }
.faq-item p { color: #4b5563; margin-top: 8px; font-size: 15px; line-height: 1.6; }

/* ===== RELATED ARTICLES ===== */
.related-section {
	max-width: 1200px;
	margin: 48px auto;
}
.related-section h2 { font-size: 24px; font-weight: 700; margin-bottom: 32px; }
.related-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
.related-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	border: 1px solid #f3f4f6;
	overflow: hidden;
	transition: box-shadow 0.3s;
}
.related-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.related-card-img {
	height: 160px;
	background: #e5e7eb;
	overflow: hidden;
}
.related-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}
.related-card:hover .related-card-img img { transform: scale(1.05); }
.related-card-body { padding: 16px; }
.related-card-body .tag { font-size: 12px; color: #9ca3af; margin-bottom: 4px; }
.related-card-body h3 {
	font-weight: 700;
	font-size: 16px;
	color: #1f2937;
	transition: color 0.2s;
	margin-bottom: 8px;
}
.related-card:hover .related-card-body h3 { color: #27B243; }
.related-card-body p { font-size: 14px; color: #6b7280; line-height: 1.5; }

@media (max-width: 480px) {
	.hero-section { padding: 20px; border-radius: 12px; }
	.hero-text h1 { font-size: 24px; }
	.key-takeaways, .toc-block, .gost-block, .author-bio { padding: 16px; }
	.cta-mid { padding: 24px; }
	.comparison-table { font-size: 12px; }
	.comparison-table th, .comparison-table td { padding: 8px; }
}

@media (min-width: 640px) {
	.author-date-bar .separator { display: inline; }
	.hero-buttons { flex-direction: row; }
	.author-bio-inner { flex-direction: row; }
}

@media (min-width: 768px) {
	.hero-section {
		padding: 64px;
		text-align: left;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 5px;
	}
	.hero-text { width: 65%; }
	.hero-text h1 { font-size: 42px; }
	.hero-text .lead { font-size: 18px; }
	.hero-trust { width: 33%; }
	.toc-list { grid-template-columns: 1fr 1fr; column-gap: 16px; }
	.material-cards { grid-template-columns: repeat(3, 1fr); }
	.additives-list { grid-template-columns: 1fr 1fr; }
	.cta-inner { flex-direction: row; align-items: center; justify-content: space-between; }
	.production-row { flex-direction: row; }
	.production-row .img-col { width: 50%; }
	.production-row .text-col { width: 50%; }
	.related-grid { grid-template-columns: repeat(3, 1fr); }
	.author-bio { padding: 32px; }
}

@media (min-width: 1024px) {
	.content-layout { flex-direction: row; }
	.article-main { width: 75%; }
	.article-sidebar { width: 25%; }
}