/* mh_pdp v4 — новата продуктова страница. Стъпка 3: подредбата само с CSS (SPEC §1, §1а, §3).
   Зарежда се само на пилотните страници; HTML-ът на Journal не се променя и нищо не се мести с JS.
   Нови елементи — само с клас .mh-*. Без голи селектори (body, a, button) и без нови шрифтове.
   Обхват: .route-product-product без .popup (quickview на Journal не се пипа). */

/* .site-wrapper на Journal е overflow: hidden — това спира position: sticky (снимката, кутията „Поръчай“).
   clip реже по същия начин, без да прави контейнер за скрол. Стар браузър без clip — остава hidden (без лепкаво). */
.route-product-product:not(.popup) .site-wrapper {
	overflow: clip;
}

/* ---------- Горната част: grid вместо двете колони на Journal ---------- */
/* .product-left/.product-right стават display:contents → снимката, колоната за покупка,
   доверието и секциите (бившите табове) са преки клетки на grid-а. От 720 px — две колони (SPEC §1,
   TESTS §3: „sticky от 720 px“); под 720 px — една колона. Секциите винаги са на цяла ширина. */
.route-product-product:not(.popup) .product-info {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "img" "buy" "trust" "sec";
	column-gap: 40px;
	align-items: start;
}

.route-product-product:not(.popup) .product-info > .product-left,
.route-product-product:not(.popup) .product-info > .product-right {
	display: contents;
}

.route-product-product:not(.popup) .product-info .product-image,
.route-product-product:not(.popup) .product-info .lightgallery {
	grid-area: img;
	min-width: 0;
	width: 100%;
}

.route-product-product:not(.popup) .product-info #product {
	grid-area: buy;
	min-width: 0;
}

.route-product-product:not(.popup) .product-info .blocks-bottom {
	grid-area: trust;
	min-width: 0;
}

/* Journal 3.2.10 обвива снимката+табовете и детайлите+блоковете в .product-left-wrapper / .product-right-wrapper (3.1.8 ги нямаше);
   без това табовете остават в лявата колона (650 px) вместо в областта "sec sec" на цяла ширина. Обвивките стават прозрачни за grid-а. */
.route-product-product:not(.popup) .product-info .product-left-wrapper,
.route-product-product:not(.popup) .product-info .product-right-wrapper {
	display: contents;
}

.route-product-product:not(.popup) .product-info .blocks-image,
.route-product-product:not(.popup) .product-info .blocks-default {
	grid-area: sec;
	min-width: 0;
	margin-top: 32px;
	padding-top: 8px;
	border-top: 1px solid #e2e2e2;
}

@media (min-width: 720px) {
	.route-product-product:not(.popup) .product-info {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		/* Забележка № 2 (27.10): плочките (склад, доставка, гаранция, сервиз) на цяла ширина под снимката и „Поръчай“.
		   Измерено на 1366 px (findings/zabelezhki/README.md): с плочките под „Поръчай“ дясната колона е по-висока от
		   снимката с 45–135 px (на живия 58–299); под снимката — лявата става по-висока с 183–322; на цяла ширина
		   разликата е 24–114 px, под „Поръчай“. Без малки снимки (38 % от продуктите) снимката е по-висока и двете колони
		   са равни с плочките под „Поръчай“ (−2 px; на цяла ширина — 163 px) → там подредбата остава както на живия (:has,
		   както при .mh-box-col). Телефон (< 720 px) — без промяна. */
		grid-template-areas: "img buy" "trust trust" "sec sec";
	}

	.route-product-product:not(.popup) .product-info:not(:has(.additional-image)) {
		grid-template-areas: "img buy" "img trust" "sec sec";
	}

	/* Лепкава снимка (SPEC §1) — изключена (DECISIONS 29): в HTML-а на Journal снимката и секциите (бившите табове)
	   са в един контейнер (.product-info), без обвивка за горната част, и лепкавата снимка би покрила описанието. */
	.route-product-product:not(.popup) .product-info .product-image {
		align-self: start;
	}
}

/* Телефон: голямата снимка — най-много 75vw висока (SPEC §1); малки снимки не се разтягат. */
@media (max-width: 719px) {
	.route-product-product:not(.popup) .product-info .product-image .main-image img {
		display: block;
		width: auto;
		max-width: 100%;
		max-height: 75vw;
		margin: 0 auto;
		object-fit: scale-down;
	}
}

/* ---------- Заглавието (SPEC §1.1): 24 px; над 80 знака и под 720 px — 20 px (layout.php) ---------- */
.route-product-product:not(.popup) #product > .title.page-title,
.route-product-product:not(.popup) h1.page-title {
	font-size: 26px;
	line-height: 1.3;
}

/* ---------- Цената (SPEC §0.4): промоцията червена, старата — сива и зачертана, редовната — тъмна ---------- */
.route-product-product:not(.popup) #product .product-price-new {
	color: #dd0e1c;
}

.route-product-product:not(.popup) #product .product-price-old {
	color: #8b9198;
	text-decoration: line-through;
}

.route-product-product:not(.popup) #product .product-price {
	color: #333;
}

/* ---------- Табове → секции (SPEC §1а, ARCHITECTURE §3) ---------- */
/* Навигацията се скрива (възелът остава в DOM-а), всички панели се показват един под друг. */
.route-product-product:not(.popup) .product_tabs > .nav-tabs {
	display: none;
}

.route-product-product:not(.popup) .product_tabs > .tab-content > .tab-pane {
	display: block;
	opacity: 1;
	visibility: visible;
}

/* Заглавията на секциите — с текста на табовете на Journal (layout.php). */
.mh-section-title {
	margin: 32px 0 12px;
	color: #2c3640;
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.route-product-product:not(.popup) .product_tabs > .tab-content > .mh-section-title:first-child {
	margin-top: 16px;
}

/* Мобилният HTML на Journal е акордеон: всички панели отворени, заглавията остават. */
.route-product-product:not(.popup) .product_accordion .panel-collapse {
	display: block !important;
	height: auto !important;
	visibility: visible;
}

.route-product-product:not(.popup) .product_accordion .panel-heading {
	pointer-events: none;
}

/* Всички панели са отворени → иконата е „−“ навсякъде (Journal показва „−“ само на активния). */
.route-product-product:not(.popup) .product_accordion.panel-group .panel .panel-heading a::before {
	content: '\f068' !important;
	color: rgba(15, 58, 141, 1);
}

.route-product-product:not(.popup) .product_accordion .panel-heading .panel-title {
	color: #2c3640;
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	font-weight: 700;
}

/* Скриване — само с клас; възелът остава в DOM-а (SPEC §0.7). */
.mh-hide {
	display: none !important;
}

/* ---------- Стъпка 4: редът за наличност и изпращане (SPEC §1.6) ---------- */
/* Старият ред „Наличност: …“ на Journal се скрива (SPEC §1а, DECISIONS 6); възелът остава в DOM-а. */
.route-product-product:not(.popup) #product .product-stats .product-stock {
	display: none;
}

.mh-stock {
	margin: 12px 0 8px;
	color: #333;
}

.mh-stock-line {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	line-height: 1.4;
}

.mh-dot {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.mh-stock-sub {
	margin-left: 18px;
	color: #696973;
	font-size: 14px;
}

.mh-stock-sub:empty {
	display: none;
}

/* ---------- Стъпка 5: „Поръчай · сума“ и редът под бутона (SPEC §1.12) ---------- */
/* Бутонът на Journal е flex: span-ът става отделен елемент и водещият интервал би се изрязал → pre. */
.mh-sum {
	white-space: pre;
}

/* Количеството + „Поръчай“ — на цялата ширина на колоната; бутонът заема останалото (design: fritiurnik-390).
   Редът под бутона е в същата група на Journal (flex) — на собствен ред. */
.route-product-product:not(.popup) #product .buttons-wrapper > .stepper-group.cart-group {
	flex: 1 1 100%;
	flex-wrap: wrap;
}

.route-product-product:not(.popup) #product .stepper-group.cart-group > #button-cart {
	flex: 1 1 auto;
	min-width: 0;
}

/* Телефон (design: fritiurnik-390): бройката и „Поръчай“ на ЕДИН ред. Journal 3.2.10 дава на бутона width 100 % → той пада на втори ред,
   групата (flex-wrap) не го брои в височината си и бутонът на tbi („Купи с … вноски“) го покрива. */
@media (max-width: 719px) {
	/* групата остава wrap: редът под бутона (.mh-cart, 100 %) минава на нов ред; бутонът с basis 0 се побира до бройката */
	.route-product-product:not(.popup) #product .stepper-group.cart-group > #button-cart {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
	}

	/* Journal дава на бройката flex-basis calc((100% - 400px) * -999) (= „цял ред под 400 px“); тук тя е 100 px, бутонът — останалото. */
	.route-product-product:not(.popup) #product .stepper-group.cart-group > .stepper {
		flex: 0 0 100px;
		width: 100px;
		max-width: 100px;
	}
}

.mh-cart {
	flex: 0 0 100%;
	width: 100%;
	font-size: 14px;
	line-height: 1.4;
}

.mh-breakdown {
	margin-top: 6px;
	color: #696973;
}

.mh-qty-msg {
	margin-top: 6px;
	color: #dd0e1c;
}

.mh-qty-note {
	margin-top: 6px;
	color: #333;
}

.mh-breakdown:empty,
.mh-qty-msg:empty {
	display: none;
}

/* ---------- Стъпка 6: отзивите (SPEC §4) ---------- */
.mh-review-note {
	max-width: 760px;
	margin: 0 0 12px;
	color: #5f6370;
	font-size: 13px;
}

.route-product-product:not(.popup) #form-review #review {
	max-width: 760px;
}

/* Решение 24.10.2026: всички отзиви са видими (без „Още отзиви“). Скрит е само редът „Показани … от …“ и страницирането на Journal. */
.route-product-product:not(.popup) #form-review #review > .pagination-results,
.route-product-product:not(.popup) #form-review #review > .pagination {
	display: none;
}

/* Формата е свита под „Напишете отзив“: всичко във формата освен отзивите и нашите елементи. */
.route-product-product:not(.popup) #form-review:not(.mh-write) > :not(#review):not(.mh-review-note):not(.mh-reviews-more):not(.mh-review-write):not(.alert) {
	display: none;
}

.mh-reviews-more,
.mh-review-write {
	display: block;
	margin: 12px 0 0;
	padding: 8px 16px;
	border: 1px solid #0f3a8d;
	border-radius: 0;
	background: #fff;
	color: #0f3a8d;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.mh-review-write {
	margin-bottom: 16px;
}

.mh-review-write[aria-expanded="true"] {
	background: #f3f5f9;
}

/* ---------- Стъпка 7: описанието (SPEC §3) ---------- */
/* K (кои блокове се скриват) е в малкия <style> на страницата: .mh-desc:not(.mh-open) > :nth-child(n+K+1). */
.mh-desc {
	position: relative;
}

/* Един дълъг блок (няма граница за рязане): само височината. */
.mh-desc-clip:not(.mh-open) {
	max-height: 640px;
	overflow: hidden;
}

/* Преливане към бяло над последните 64 px. */
.mh-desc:not(.mh-open)::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 64px;
	background: linear-gradient(rgba(255, 255, 255, 0), #fff);
	pointer-events: none;
}

.mh-desc-toggle {
	display: block;
	margin: 12px 0 0;
	padding: 8px 16px;
	border: 1px solid #0f3a8d;
	border-radius: 0;
	background: #fff;
	color: #0f3a8d;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

/* „Скрийте…“ връща заглавието в екрана с малко въздух отгоре — а при мобилния хедър на Journal (лепкав, 60 px + лента) под него. */
.route-product-product:not(.popup) .mh-section-title,
.route-product-product:not(.popup) .product_accordion .panel-heading,
.route-product-product:not(.popup) .mh-review-note,
.route-product-product:not(.popup) #review {
	scroll-margin-top: 16px;
}

.mobile-header-active.route-product-product:not(.popup) .mh-section-title,
.mobile-header-active.route-product-product:not(.popup) .product_accordion .panel-heading,
.mobile-header-active.route-product-product:not(.popup) .mh-review-note,
.mobile-header-active.route-product-product:not(.popup) #review {
	scroll-margin-top: 120px;
}

/* ---------- Технически параметри (SPEC §3) — таблицата на Journal (#tab-specification) ---------- */
/* Имената на групите (thead) се скриват; възлите остават. */
.route-product-product:not(.popup) #tab-specification thead {
	display: none;
}

.route-product-product:not(.popup) #tab-specification .table {
	margin-bottom: 0;
	font-size: 13px;
}

.mh-spec-more {
	display: block;
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: #0f3a8d;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.mh-spec-more::before {
	content: "\25B8\00A0";
}

.mh-spec-more[aria-expanded="true"]::before {
	content: "\25BE\00A0";
}

/* Кратко описание: 2–3 колони от 1024 px — <style> на страницата (layout.php, specColumnsCss). */

/* Дълго описание, от 1024 px: „описание | дясна колона Технически параметри“; отзивите — под описанието (SPEC §3).
   Само CSS върху контейнера на Journal (.tab-content); ако браузърът не знае :has(), остава една под друга. */
@media (min-width: 1024px) {
	.route-product-product:not(.popup) .product_tabs > .tab-content:has(.mh-desc):has(#tab-specification) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 360px;
		column-gap: 40px;
		align-items: start;
	}

	.route-product-product:not(.popup) .product_tabs > .tab-content:has(.mh-desc):has(#tab-specification) > * {
		grid-column: 1;
		min-width: 0;
	}

	.route-product-product:not(.popup) .product_tabs > .tab-content:has(.mh-desc) > .mh-section-title:has(+ .tab-pane #tab-specification) {
		grid-column: 2;
		grid-row: 1;
		margin: 16px 0 0;
		padding: 16px 16px 8px;
		border: 1px solid #e6e8ec;
		border-bottom: 0;
		font-size: 16px;
	}

	.route-product-product:not(.popup) .product_tabs > .tab-content:has(.mh-desc) > .tab-pane:has(#tab-specification) {
		grid-column: 2;
		grid-row: 2 / span 10;
		padding: 0 16px 16px;
		border: 1px solid #e6e8ec;
		border-top: 0;
	}

	.route-product-product:not(.popup) .product_tabs > .tab-content:has(.mh-desc) #tab-specification .table,
	.route-product-product:not(.popup) .product_tabs > .tab-content:has(.mh-desc) #tab-specification .table td {
		border: 0;
		background: none;
	}

	.route-product-product:not(.popup) .product_tabs > .tab-content:has(.mh-desc) #tab-specification td {
		padding: 6px 0;
		border-bottom: 1px solid #eef0f3;
		vertical-align: top;
	}

	.route-product-product:not(.popup) .product_tabs > .tab-content:has(.mh-desc) #tab-specification td + td {
		padding-left: 12px;
		text-align: right;
		font-weight: 700;
	}
}

/* ---------- Горната част: ред под заглавието, атрибути, брояч (SPEC §1.2, §1.3, §1.5) ---------- */
.mh-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin: 6px 0 4px;
	color: #5f6370;
	font-size: 14px;
}

.mh-meta .mh-brand {
	color: #0f3a8d;
	font-weight: 700;
}

.mh-meta .mh-rating {
	color: #8a6200;
	font-weight: 700;
	text-decoration: none;
}

.mh-meta .mh-compare {
	padding: 0;
	border: 0;
	background: none;
	color: #0f3a8d;
	font-size: 14px;
	cursor: pointer;
}

.mh-attrs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 14px;
	margin: 0 0 10px;
	color: #333;
	font-size: 14px;
}

.mh-attrs b {
	font-weight: 700;
}

.mh-countdown {
	margin: 2px 0 0;
	color: #5f6370;
	font-size: 14px;
}

/* Цената на един ред: промоционалната, после старата (design: „406 € 428 €“). Само подредба с CSS. */
.route-product-product:not(.popup) #product .product-price-group .price-group {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 12px;
}

.route-product-product:not(.popup) #product .product-price-group .price-group > .product-price-new {
	order: 0;
}

.route-product-product:not(.popup) #product .product-price-group .price-group > .product-price-old {
	order: 1;
	margin: 0;
}

/* Телефон: цената и „Поръчай“ — в първия екран (390×844, над долната лента на Journal). По-малко въздух, снимката —
   до 50vw (design: fritiurnik-390 ≈ 54vw), атрибутите — до 3. */
@media (max-width: 719px) {
	.route-product-product:not(.popup) .product-info .product-image .main-image img {
		max-height: 50vw;
	}

	.route-product-product:not(.popup) #product > .title.page-title {
		margin-top: 8px;
		margin-bottom: 6px;
	}

	.route-product-product:not(.popup) #product > .title.page-title::after {
		margin-top: 6px;
	}

	.route-product-product:not(.popup) #product > .mh-meta {
		gap: 2px 10px;
		margin: 4px 0 2px;
	}

	.route-product-product:not(.popup) #product > .mh-attrs {
		margin-bottom: 4px;
	}

	/* CLS (решение 32): височината на двата реда не зависи от шрифта (Roboto от Google Fonts идва след първото
	   изобразяване). Редът под заглавието — един ред, при нужда с плъзгане вътре в него и преливане към бяло вдясно
	   (личи, че продължава). Редът с атрибутите —
	   фиксиран един ред: виждат се само атрибутите, които се събират изцяло; останалите минават на втори,
	   скрит ред (в DOM-а са). Нито една дума не е отрязана наполовина. */
	.route-product-product:not(.popup) #product > .mh-meta {
		flex-wrap: nowrap;
		overflow-x: auto;
		white-space: nowrap;
		scrollbar-width: none;
		padding-right: 24px;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
	}

	.route-product-product:not(.popup) #product > .mh-meta::-webkit-scrollbar {
		display: none;
	}

	.route-product-product:not(.popup) #product > .mh-meta > * {
		flex: 0 0 auto;
	}

	.route-product-product:not(.popup) #product > .mh-attrs {
		flex-wrap: wrap;
		row-gap: 0;
		height: 20px;
		overflow: hidden;
		line-height: 20px;
	}

	.route-product-product:not(.popup) #product > .mh-attrs > * {
		max-width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.route-product-product:not(.popup) #product > .mh-attrs .mh-attr:nth-child(n+4) {
		display: none;
	}

	.route-product-product:not(.popup) #product > .product-price-group {
		margin-bottom: 4px;
	}

	.route-product-product:not(.popup) #product .mh-stock {
		margin: 4px 0 4px;
	}

	.route-product-product:not(.popup) #product > .mh-countdown,
	.route-product-product:not(.popup) #product > .mh-req {
		margin-bottom: 4px;
	}
}

/* ---------- Стъпка 8: изискване, доверие, алтернативи (SPEC §1.9, §1.16, §5, §8) ---------- */
.mh-req {
	margin: 0 0 10px;
	color: #333;
	font-size: 14px;
}

.mh-req-400,
.mh-req-gas {
	padding: 8px 12px;
	border: 1px solid #e0b400;
	background: #fff8db;
}

/* Доверието: областта „trust“ на grid-а (от 720 px — на цяла ширина под снимката и „Поръчай“); 2 × 2 до 1023 px, 4 в ред от 1024 px. */
.route-product-product:not(.popup) .product-info > .product-right > .mh-trust,
.route-product-product:not(.popup) .product-info .mh-trust {
	grid-area: trust;
	min-width: 0;
}

.mh-trust-tiles {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px 20px;
	margin: 16px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid #eef0f3;
	list-style: none;
	font-size: 13px;
}

.mh-trust-tiles li {
	display: flex;
	flex-direction: column;
	padding-left: 22px;
	position: relative;
}

.mh-trust-tiles li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: #26732b;
	font-weight: 700;
}

.mh-trust-tiles b {
	color: #222;
}

.mh-trust-tiles span {
	color: #5f6370;
}

@media (min-width: 1024px) {
	/* На цяла ширина (забележка № 2): 4 плочки в един ред — лентата е 70 px вместо 119; под „Поръчай“ (без малки снимки) — 2 × 2. */
	.mh-trust-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.route-product-product:not(.popup) .product-info:not(:has(.additional-image)) .mh-trust-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Алтернативи и карти */
.mh-alts {
	margin: 32px 0;
}

.mh-alts-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 16px;
	margin-bottom: 14px;
}

.mh-block-title {
	color: #2c3640;
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	font-weight: 700;
}

.mh-alts-all {
	color: #0f3a8d;
	font-weight: 700;
}

.mh-alts-category {
	margin: 24px 0;
}

.mh-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}

.mh-cards-1 {
	grid-template-columns: minmax(0, 760px);
}

.mh-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
	border: 1px solid #e6e8ec;
	background: #fff;
}

.mh-card-img {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150px;
}

.mh-card-img img {
	max-width: 150px;
	max-height: 150px;
	object-fit: scale-down;
}

.mh-noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 200px;
	aspect-ratio: 4 / 3;
	background: #f3f4f6;
	color: #8b9198;
	font-size: 13px;
}

.mh-card-label,
.mh-card-pct {
	position: absolute;
	top: 0;
	padding: 2px 6px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.mh-card-label {
	left: 0;
}

.mh-card-pct {
	right: 0;
	background: #dd0e1c;
}

.mh-card-name {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	color: #222;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

.mh-card-stars {
	color: #8a6200;
	font-size: 13px;
	text-align: center;
}

.mh-card-attrs {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #333;
	font-size: 12px;
}

.mh-card-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	margin-top: auto;
}

.mh-card-new {
	color: #333;
	font-size: 18px;
	font-weight: 700;
}

.mh-card-promo {
	color: #dd0e1c;
}

.mh-card-old {
	color: #8b9198;
	text-decoration: line-through;
}

.mh-card-btn {
	display: block;
	padding: 8px;
	border: 1px solid #0f3a8d;
	color: #0f3a8d;
	font-weight: 700;
	text-align: center;
}

/* „Имате въпрос? ☎ · Viber · Обадете ми се“ (SPEC §1.16) */
.mh-ask {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin: 12px 0 0;
	font-size: 14px;
}

.mh-ask-label {
	color: #5f6370;
}

.mh-ask a,
.mh-ask-callback {
	color: #0f3a8d;
	font-weight: 700;
}

.mh-ask-callback {
	padding: 0;
	border: 0;
	background: none;
	text-decoration: underline;
	cursor: pointer;
}

.mh-sep {
	color: #8b9198;
}

@media (max-width: 719px) {
	.mh-ask-label {
		display: none;
	}
}

/* 1024–1279 px: снимката получава повече ширина (по-висока), за да не е колоната за покупка много по-дълга от нея. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.route-product-product:not(.popup) .product-info {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		column-gap: 32px;
	}
}

/* ---------- Стъпка 9: лентата на телефона и кутията „Поръчай“ (SPEC §3, §9) ---------- */
.mh-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-top: 1px solid #e6e8ec;
	background: #fff;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, .08);
	transform: translateY(150%);
	visibility: hidden;
	transition: transform .2s ease;
}

.mh-bar.mh-bar-on {
	transform: none;
	visibility: visible;
}

.mh-bar-info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.mh-bar-sum {
	color: #222;
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
}

.mh-bar-status,
.mh-box-status {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	color: #333;
	font-size: 12px;
}

.mh-copy-status {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mh-bar-phone,
.mh-bar-viber {
	flex: none;
	color: #0f3a8d;
	font-weight: 700;
}

.mh-bar-phone {
	font-size: 20px;
}

.mh-bar-buy,
.mh-box-buy {
	flex: none;
	padding: 10px 16px;
	border: 0;
	background: #dd0e1c;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
}

.mh-bar-buy[data-action="ask"] {
	background: #0f3a8d;
}

/* Място под футъра: лентата (≈60 px, над плаващия бутон за съобщения) не покрива последните линкове
   (вкл. „Откажете се от договора тук“). Постоянно (не при показване) — без изместване на съдържанието (CLS). */
@media (max-width: 1023px) {
	body.route-product-product:not(.popup) {
		padding-bottom: 110px;
	}
}

@media (min-width: 1024px) {
	.mh-bar {
		display: none;
	}
}

/* Кутията „Поръчай“: само от 1024 px и само при дясна колона (дълго описание); лепкава е само тя. */
.mh-box {
	display: none;
}

@media (min-width: 1024px) {
	.route-product-product:not(.popup) .product_tabs > .tab-content:has(.mh-desc) > .tab-pane:has(#tab-specification) {
		align-self: stretch;
		padding: 0;
		border: 0;
	}

	.route-product-product:not(.popup) .product_tabs > .tab-content:has(.mh-desc) > .tab-pane:has(#tab-specification) > .block-body {
		height: auto; /* Journal: 100% от панела — тогава за кутията „Поръчай“ няма място */
		padding: 0 16px 16px;
		border: 1px solid #e6e8ec;
		border-top: 0;
	}

	/* Без таблица „Спецификации“ (двойна таблица 24.10 / продукт без атрибути): дясната колона е само кутията „Поръчай“
	   (.mh-box-col след таба с описанието, blocks.php) — решение 25.10. */
	.route-product-product:not(.popup) .product_tabs > .tab-content:has(> .mh-box-col) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 360px;
		column-gap: 40px;
		align-items: start;
	}

	.route-product-product:not(.popup) .product_tabs > .tab-content:has(> .mh-box-col) > * {
		grid-column: 1;
		min-width: 0;
	}

	.route-product-product:not(.popup) .product_tabs > .tab-content > .mh-box-col {
		grid-column: 2;
		grid-row: 1 / span 40;
		align-self: stretch;
	}

	/* Решение 24.10: кутията се вижда само когато основният „Поръчай“ е извън екрана (pdp.js слага mh-box-on). */
	.route-product-product:not(.popup) .product_tabs > .tab-content .mh-box.mh-box-on {
		position: sticky;
		top: 16px;
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-top: 16px;
		padding: 14px;
		border: 1px solid #e6e8ec;
		background: #f7f8fa;
	}

	.mh-box-head {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.mh-box-head img {
		flex: none;
		object-fit: scale-down;
	}

	.mh-box-name {
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #222;
		font-family: 'Montserrat', sans-serif;
		font-size: 14px;
		font-weight: 700;
	}

	.mh-box-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}

	.mh-box-sum {
		color: #dd0e1c;
		font-size: 20px;
		font-weight: 700;
	}

	.mh-box-ask {
		color: #5f6370;
		font-size: 13px;
		text-align: center;
	}

	.mh-box-ask a {
		color: #0f3a8d;
		font-weight: 700;
	}
}

/* ---------- Поправки (21.10): бутонът „нагоре“, заглавието, описанието, „с ДДС“ ---------- */
/* Бутонът „нагоре“ на Journal — над лентата на телефона, докато тя се вижда (pdp.js слага mh-lift). */
.route-product-product:not(.popup) .scroll-top.mh-lift {
	bottom: var(--mh-lift-bottom, 130px) !important;
}

/* „с ДДС“ до цената — малко и сиво, в реда на цената. */
.mh-vat {
	order: 2; /* след старата цена: „406 € 428 € с ДДС“ */
	color: #8b9198;
	font-size: 13px;
	font-weight: 400;
}

/* Заглавията в описанието: нормален размер (решение 24.10 — като design/shots: 18 px компютър / 17 px телефон, получер). HTML-ът е същият. */
.route-product-product:not(.popup) .mh-desc h2 {
	margin: 18px 0 8px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
}

.route-product-product:not(.popup) .mh-desc h3 {
	margin: 14px 0 6px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

@media (max-width: 719px) {
	/* Заглавието започва на една линия с реда под него (design: fritiurnik-390). */
	.route-product-product:not(.popup) #product > .title.page-title {
		margin-right: 0;
		margin-left: 0;
	}

	.route-product-product:not(.popup) .mh-desc h2 {
		font-size: 17px;
	}

	.route-product-product:not(.popup) .mh-desc h3 {
		font-size: 16px;
	}
}

/* Текстът на описанието е подравнен вляво на всички ширини (решение 24.10; в някои описания има inline „двустранно“). */
.route-product-product:not(.popup) .mh-desc,
.route-product-product:not(.popup) .mh-desc * {
	text-align: left !important;
}

/* ---------- Довършване по SPEC: основа, TBI, „В комплекта“, Google, отзиви, сравнение ---------- */
.mh-base {
	margin: 0 0 12px;
}

.mh-base-title,
.mh-kit-title {
	margin-bottom: 6px;
	color: #222;
	font-weight: 700;
}

.mh-base-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mh-base-options [role="radio"] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: 1px solid #c9ced6;
	background: #fff;
	color: #222;
	font-size: 13px;
	cursor: pointer;
}

.mh-base-options [role="radio"][aria-checked="true"] {
	border: 2px solid #0f3a8d;
	font-weight: 700;
}

.mh-base-options [aria-disabled="true"] {
	border-style: dashed;
	color: #8b9198;
	cursor: not-allowed;
}

.mh-base-price {
	color: #333;
}

.mh-base-selected {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	font-size: 13px;
}

.mh-base-selected:empty {
	display: none;
}

.mh-base-stock {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #5f6370;
}

@media (max-width: 719px) {
	.mh-base-options {
		flex-direction: column;
	}
}

.mh-tbi-note {
	display: block;
	margin-top: 4px;
	color: #5f6370;
	font-size: 12px;
}

.mh-tbi-note:empty {
	display: none;
}

.mh-kit {
	margin-top: 16px;
	font-size: 13px;
}

.mh-kit ul {
	margin: 0;
	padding-left: 18px;
}

.mh-google {
	display: inline-block;
	margin-top: 12px;
	color: #333;
	font-size: 13px;
}

.mh-google .mh-stars {
	color: #f5b301;
	letter-spacing: 1px;
}

/* „Отзиви (5) ★ 5,0“ */
.mh-section-title .mh-count {
	color: #5f6370;
	font-weight: 400;
}

.mh-section-title .mh-avg {
	color: #8a6200;
	font-size: 16px;
}

/* Без отзиви: нашият текст; „Няма мнения…“ на Journal (в #review) — скрит, възелът остава. */
.mh-review-empty {
	margin: 0 0 12px;
	color: #5f6370;
}

.route-product-product:not(.popup) .mh-review-empty + #review > p:only-child {
	display: none;
}

/* Сравнението */
.mh-compare-wrap {
	overflow-x: auto;
}

.mh-compare {
	width: auto;
	margin: 0 auto;
	border-collapse: collapse;
	font-size: 13px;
}

.mh-compare th,
.mh-compare td {
	min-width: 140px;
	padding: 8px 12px;
	border-bottom: 1px solid #eef0f3;
	text-align: left;
	vertical-align: top;
}

.mh-compare thead th {
	vertical-align: bottom;
}

.mh-compare-label {
	display: inline-block;
	margin-bottom: 6px;
	padding: 2px 6px;
	background: #e8eefb;
	color: #0f3a8d;
	font-size: 11px;
	font-weight: 700;
}

.mh-compare-current .mh-compare-label {
	background: #222;
	color: #fff;
}

.mh-compare-name {
	display: block;
	margin-top: 6px;
	color: #222;
	font-weight: 700;
}

.mh-compare .mh-diff {
	background: #e8eefb;
	font-weight: 700;
}

.mh-diff-swatch {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: #e8eefb;
}

.mh-compare-legend {
	color: #5f6370;
	font-weight: 400;
}

.mh-compare-viewing {
	color: #8b9198;
}

.mh-compare-cards {
	display: none;
}

@media (max-width: 639px) {
	.mh-compare-wrap {
		display: none;
	}

	.mh-compare-cards {
		display: grid;
		gap: 12px;
	}

	.mh-compare-card {
		padding: 12px;
		border: 1px solid #e6e8ec;
	}

	.mh-compare-card ul {
		margin: 8px 0;
		padding-left: 16px;
		font-size: 13px;
	}

	.mh-compare-card li span {
		color: #8b9198;
	}
}

/* ---------- Известие след „Поръчай“, ако това на Journal е изключено; обратно обаждане (SPEC §1.12, §1.16) ---------- */
.mh-added {
	margin: 6px 0;
	color: #1d7a3a;
	font-size: 14px;
}

.mh-added a,
.mh-toast a {
	font-weight: 700;
	white-space: nowrap;
}

.mh-toast {
	position: fixed;
	left: 50%;
	top: 16px;
	z-index: 10000;
	display: none;
	max-width: calc(100vw - 32px);
	width: 560px;
	padding: 12px 16px;
	border-radius: 6px;
	background: #1d7a3a;
	color: #fff;
	font-size: 14px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
	transform: translateX(-50%);
}

.mh-toast.mh-toast-on {
	display: block;
}

.mh-toast a {
	color: #fff;
	text-decoration: underline;
}

.mh-ask-error {
	margin-top: 6px;
	color: #c0392b;
	font-size: 14px;
}

.mh-ask-error:empty {
	display: none;
}

/* ---------- CLS на телефона: докато Montserrat (Google Fonts на Journal) се зарежда, заглавието е с местен шрифт
   на устройството с размерите на Montserrat — пренася се на същия брой редове и нищо под него не се мести. Не е нов
   шрифт (нищо не се сваля): Arial (Windows, macOS, iOS; Liberation Sans на Linux) или Roboto (Android), всеки със свой
   мащаб, настроен върху заглавията на пилота (163) на 360 и 390 px. HTML-ът на заглавието не се пипа (решение 32). ---------- */
@font-face {
	font-family: "mh-montserrat-arial";
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
	font-weight: 700;
	size-adjust: 113.4%;
	ascent-override: 85.3%;
	descent-override: 22.1%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "mh-montserrat-roboto";
	src: local("Roboto Bold"), local("Roboto-Bold");
	font-weight: 700;
	size-adjust: 115.5%;
	ascent-override: 83.8%;
	descent-override: 21.7%;
	line-gap-override: 0%;
}

.route-product-product:not(.popup) #product > .title.page-title,
.route-product-product:not(.popup) h1.page-title {
	font-family: Montserrat, "mh-montserrat-arial", "mh-montserrat-roboto", sans-serif;
}

/* Същото за текстовите редове на плъгина в горната част (Roboto от Google Fonts): докато се зарежда — местен Arial
   с размерите на Roboto, отделно за 400 и 700 (съотношението на ширините върху текстовете на пилота: 0,986 и 1,021).
   На Android няма Arial и остава системният Roboto — със същите размери. */
@font-face {
	font-family: "mh-roboto-arial";
	src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
	font-weight: 400;
	size-adjust: 98.6%;
	ascent-override: 94.1%;
	descent-override: 24.8%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "mh-roboto-arial";
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
	font-weight: 700;
	size-adjust: 102.1%;
	ascent-override: 90.9%;
	descent-override: 23.9%;
	line-gap-override: 0%;
}

.route-product-product:not(.popup) #product .mh-meta,
.route-product-product:not(.popup) #product .mh-attrs,
.route-product-product:not(.popup) #product .mh-countdown,
.route-product-product:not(.popup) #product .mh-stock,
.route-product-product:not(.popup) #product .mh-req {
	font-family: Roboto, "mh-roboto-arial", sans-serif;
}


/* ---------- 29.10.2026, решение на собственика: горната част беше по-дребна от стария сайт ---------- */
@media (min-width: 720px) {
	.route-product-product:not(.popup) #product > .title.page-title,
	.route-product-product:not(.popup) h1.page-title {
		font-size: 32px;
		line-height: 1.25;
	}
}
.mh-stock-line {
	font-size: 16px;
}
.route-product-product:not(.popup) #product .stepper-group.cart-group > #button-cart,
.route-product-product:not(.popup) #product .stepper-group.cart-group > #button-cart span {
	font-size: 16px;
	line-height: 1.5;
	overflow: visible;
}

/* ---------- 29.10.2026: поръчковите продукти (наличност 0) също се поръчват ----------
   Journal 3.2.10 слага на .product-info клас out-of-stock и прави групата „бройка + Поръчай“ pointer-events: none
   (бутонът изглежда активен, но не приема клик с мишката). Магазинът продава и по поръчка → връщаме кликането. */
.product-info.out-of-stock .stepper-group.cart-group,
.product-info.out-of-stock .stepper-group.cart-group *,
.product-thumb.out-of-stock .button-group,
.product-thumb.out-of-stock .button-group *,
.product-layout.out-of-stock .btn-cart,
.product-layout.out-of-stock .btn-cart * {
	pointer-events: auto !important;
}
/* 29.10.2026: промоционалната и старата цена на един ред; под тях „Цена с ДДС · Спестявате X €“ (без %). */
.route-product-product:not(.popup) #product .product-price-group .price-group {
	display: flex !important;
	flex-wrap: wrap;
	align-items: baseline !important;
	gap: 0 10px;
}

.route-product-product:not(.popup) #product .product-price-group .price-group > .product-price-new {
	line-height: 1 !important;
}

.route-product-product:not(.popup) #product .product-price-group .price-group > .product-price-old {
	order: 1;
	margin: 0 !important;
	padding: 0 !important;
	position: static !important;
	vertical-align: baseline !important;
	line-height: 1 !important;
	font-size: 20px;
}

.route-product-product:not(.popup) #product .product-price-group .mh-vat {
	order: 2;
	flex-basis: 100%;
	margin-top: 6px;
}
/* 29.10.2026: старата цена — точно на линията на новата. */
.route-product-product:not(.popup) #product .product-price-group .price-group > .product-price-new,
.route-product-product:not(.popup) #product .product-price-group .price-group > .product-price-old {
	align-self: baseline !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	top: auto !important;
	bottom: auto !important;
	transform: none !important;
}
/* 29.10.2026: атрибутите „ВАЖНИ“ като етикети. */
.route-product-product:not(.popup) #product > .mh-attrs {
	gap: 6px;
	margin: 8px 0 12px;
}

.route-product-product:not(.popup) #product > .mh-attrs .mh-attr {
	padding: 3px 10px;
	border-radius: 6px;
	background: #f2f3f5;
	color: #222;
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
}

.route-product-product:not(.popup) #product > .mh-attrs .mh-attr b {
	margin-right: 2px;
	color: #6b7079;
	font-weight: 400;
}

@media (max-width: 719px) {
	.route-product-product:not(.popup) #product > .mh-attrs {
		height: 26px;
		line-height: 20px;
		margin: 6px 0 8px;
	}
}/* 29.10.2026: етикетите — бели с рамка, стойността в синьо. */
.route-product-product:not(.popup) #product > .mh-attrs {
	margin: 8px 0 8px;
}

.route-product-product:not(.popup) #product > .mh-attrs .mh-attr {
	background: #fff;
	border: 1px solid #dfe3e8;
	color: #133a8f;
	font-weight: 700;
}

.route-product-product:not(.popup) #product > .mh-attrs .mh-attr b {
	color: #6b7079;
	font-weight: 400;
}.route-product-product:not(.popup) #product > .mh-attrs { margin-bottom: 4px; }