/**
 * Componentele paginilor construite direct in PHP: "Devino partener" si
 * paginile de produs.
 *
 * Folosesc tokenii si componentele din mcv-system.css: aceeasi tipografie,
 * aceleasi raze (18px carduri / 8px butoane), acelasi bronz ca accent discret.
 * Aici stau doar componentele care nu existau in sistem: hero-ul de pagina,
 * cardurile fara imagine, lista de categorii, blocul imagine + text, randurile,
 * randul de logo-uri, pasii si blocul de formular.
 *
 * Clasele sunt generice intentionat. Blocurile specifice paginii de parteneri
 * incep cu .mcv-partener-, cele specifice paginilor de produs cu .mcv-produs-.
 */

/* --------------------------------------------------
   0. INVELISUL PAGINII
   Hello Elementor limiteaza `.site-main` la latimea containerului sau.
   Pagina asta isi gestioneaza singura latimile, sectiune cu sectiune, ca sa
   poata avea hero pe toata latimea si benzi de fundal continue.
   -------------------------------------------------- */

/* Regula din hello-elementor este
   `body:not([class*=elementor-page-]) .site-main { max-width: 1140px; padding-inline: 10px }`.
   Are specificitatea (0,2,1), deci o clasa simpla nu o poate depasi. O egalam
   si castigam prin ordinea de incarcare: acest fisier vine dupa theme.css. */
body:not([class*="elementor-page-"]) .mcv-partener-main,
.mcv-partener-main {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
	padding-block: 0;
}

/* --------------------------------------------------
   1. HERO
   -------------------------------------------------- */

.mcv-ph-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(460px, 60vh, 640px);
	padding: var(--mcv-s7) var(--mcv-s3) var(--mcv-s6);
	background: var(--mcv-ink);
	overflow: hidden;
	isolation: isolate;
}

.mcv-ph-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.mcv-ph-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	display: block;
}

.mcv-ph-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(10, 10, 10, .86) 0%, rgba(10, 10, 10, .66) 46%, rgba(10, 10, 10, .28) 100%);
}

.mcv-ph-hero__inner {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
}

.mcv-eyebrow--light {
	justify-content: flex-start;
	color: rgba(255, 255, 255, .74);
}

.mcv-eyebrow--light::before { background: var(--mcv-bronze-light); }

.mcv-ph-hero__title {
	margin: 0;
	max-width: 18ch;
	font-family: var(--mcv-font);
	font-size: clamp(32px, 4.6vw, 58px);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -.02em;
	text-wrap: balance;
	color: #ffffff;
}

.mcv-ph-hero__sub {
	margin: var(--mcv-s3) 0 0;
	max-width: 58ch;
	font-size: 17px;
	line-height: 1.62;
	color: rgba(255, 255, 255, .82);
}

.mcv-ph-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: var(--mcv-s4);
}

.mcv-ph-hero__cta .mcv-btn--ghost {
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, .55) !important;
}

.mcv-ph-hero__cta .mcv-btn--ghost:hover {
	color: #ffffff !important;
	border-color: var(--mcv-bronze-light) !important;
	background-color: rgba(255, 255, 255, .08) !important;
}

/* --------------------------------------------------
   2. Carduri fara imagine
   -------------------------------------------------- */

.mcv-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--mcv-s3);
	max-width: 1180px;
	margin: 0 auto;
}

.mcv-tile {
	display: flex;
	flex-direction: column;
	padding: var(--mcv-s4);
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
	transition: border-color .28s var(--mcv-ease), box-shadow .28s var(--mcv-ease);
}

.mcv-tile:hover {
	border-color: var(--mcv-line-2);
	box-shadow: 0 14px 38px rgba(20, 20, 20, .07);
}

.mcv-tile__title {
	margin: 0;
	font-family: var(--mcv-font);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--mcv-ink);
}

.mcv-tile__rule {
	display: block;
	width: 26px;
	height: 2px;
	margin: 14px 0;
	background: var(--mcv-bronze);
}

.mcv-tile__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.66;
	color: var(--mcv-ink-soft);
}

/* --------------------------------------------------
   3. Bloc imagine + text
   -------------------------------------------------- */

.mcv-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mcv-s5);
	align-items: center;
	max-width: 1180px;
	margin: 0 auto;
}

.mcv-split__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 460px;
	object-fit: cover;
	border-radius: var(--mcv-r-card);
}

.mcv-split__body .mcv-eyebrow { justify-content: flex-start; }

.mcv-split__title {
	margin: 0 0 var(--mcv-s3);
	font-size: clamp(26px, 3.2vw, 38px) !important;
	font-weight: 600 !important;
	line-height: 1.16 !important;
	letter-spacing: -.02em !important;
	text-wrap: balance;
	color: var(--mcv-ink) !important;
}

.mcv-split__body p {
	margin: 0 0 var(--mcv-s2);
	font-size: 16px;
	line-height: 1.68;
	color: var(--mcv-ink-soft);
}

.mcv-split__body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------
   4. Categorii
   -------------------------------------------------- */

.mcv-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 1180px;
	margin: var(--mcv-s5) auto 0;
	padding: 0;
	list-style: none;
}

.mcv-chip {
	padding: 10px 16px;
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-btn);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--mcv-ink-soft);
}

/* --------------------------------------------------
   5. Sisteme si furnizori
   -------------------------------------------------- */

.mcv-sec--sisteme { background: var(--mcv-surface); border-block: 1px solid var(--mcv-line); }

.mcv-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--mcv-s4) var(--mcv-s5);
	max-width: 980px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.mcv-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 46px;
}

.mcv-logo img {
	display: block;
	width: auto;
	max-width: 148px;
	max-height: 46px;
	object-fit: contain;
	mix-blend-mode: multiply;
	filter: grayscale(1);
	opacity: .72;
	transition: opacity .28s var(--mcv-ease), filter .28s var(--mcv-ease);
}

.mcv-logo img:hover { filter: grayscale(0); opacity: 1; }

.mcv-sec__note {
	max-width: 62ch;
	margin: var(--mcv-s4) auto 0;
	text-align: center;
	font-size: 14px;
	line-height: 1.6;
	color: var(--mcv-ink-mute);
}

/* --------------------------------------------------
   6. Cu cine lucram
   -------------------------------------------------- */

.mcv-rows {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--mcv-line);
}

.mcv-row {
	display: grid;
	grid-template-columns: 1fr 1.9fr;
	gap: var(--mcv-s3) var(--mcv-s5);
	padding: var(--mcv-s4) 0;
	border-bottom: 1px solid var(--mcv-line);
}

.mcv-row__title {
	position: relative;
	margin: 0;
	padding-left: 22px;
	font-family: var(--mcv-font);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--mcv-ink);
}

.mcv-row__title::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 12px;
	height: 2px;
	background: var(--mcv-bronze);
}

.mcv-row__text {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.68;
	color: var(--mcv-ink-soft);
}

/* --------------------------------------------------
   7. Pasii colaborarii
   -------------------------------------------------- */

.mcv-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--mcv-s4) var(--mcv-s3);
	max-width: 1180px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.mcv-step {
	padding-top: var(--mcv-s3);
	border-top: 2px solid var(--mcv-line);
}

.mcv-step__nr {
	display: block;
	margin-bottom: 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--mcv-bronze);
}

.mcv-step__title {
	margin: 0 0 10px;
	font-family: var(--mcv-font);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mcv-ink);
}

.mcv-step__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.64;
	color: var(--mcv-ink-soft);
}

/* --------------------------------------------------
   8. Formular
   -------------------------------------------------- */

.mcv-sec--partener-form {
	background: var(--mcv-surface);
	border-top: 1px solid var(--mcv-line);
	scroll-margin-top: 95px;
}

#formular-partener { scroll-margin-top: 95px; }

.mcv-partener-form__inner {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: var(--mcv-s5);
	align-items: start;
	max-width: 1180px;
	margin: 0 auto;
}

.mcv-partener-form__intro .mcv-eyebrow { justify-content: flex-start; }

.mcv-partener-form__title {
	margin: 0 0 var(--mcv-s2);
	font-size: clamp(26px, 3.2vw, 38px) !important;
	font-weight: 600 !important;
	line-height: 1.16 !important;
	letter-spacing: -.02em !important;
	text-wrap: balance;
	color: var(--mcv-ink) !important;
}

.mcv-partener-form__text {
	margin: 0 0 var(--mcv-s3);
	font-size: 16px;
	line-height: 1.66;
	color: var(--mcv-ink-soft);
}

.mcv-partener-contact {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.5;
	color: var(--mcv-ink-soft);
}

.mcv-partener-contact li { padding: 9px 0; border-bottom: 1px solid var(--mcv-line); }
.mcv-partener-contact li:last-child { border-bottom: 0; }
.mcv-partener-contact a { color: var(--mcv-ink); text-decoration: none; font-weight: 600; }
.mcv-partener-contact a:hover { color: var(--mcv-bronze-deep); }

.mcv-partener-form__card {
	padding: var(--mcv-s4);
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
}

.mcv-partener-form__card .mcv-form-grid { gap: 0 var(--mcv-s3); }
.mcv-partener-form__card .mcv-field--full { grid-column: 1 / -1; }
.mcv-partener-form__card .mcv-field textarea { min-height: 130px; }
.mcv-partener-form__card .mcv-submit-wrap { text-align: left; }
.mcv-partener-form__card .mcv-message { margin-bottom: var(--mcv-s3); padding: 14px 16px; }
.mcv-partener-form__card .mcv-message p { margin: 0 0 6px; }
.mcv-partener-form__card .mcv-message p:last-child { margin-bottom: 0; }

.mcv-gdpr a {
	color: var(--mcv-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: var(--mcv-line-2);
}

.mcv-gdpr a:hover {
	color: var(--mcv-bronze-deep);
	text-decoration-color: var(--mcv-bronze);
}

/* --------------------------------------------------
   9. Sub 1025px
   -------------------------------------------------- */

@media (max-width: 1024px) {

	.mcv-ph-hero {
		min-height: clamp(400px, 56vh, 540px);
		padding: var(--mcv-s6) var(--mcv-s3) var(--mcv-s5);
	}

	.mcv-ph-hero::after {
		background: linear-gradient(180deg, rgba(10, 10, 10, .52) 0%, rgba(10, 10, 10, .78) 100%);
	}

	.mcv-tiles { grid-template-columns: repeat(2, 1fr); }
	.mcv-steps { grid-template-columns: repeat(2, 1fr); }
	.mcv-split { grid-template-columns: 1fr; gap: var(--mcv-s4); }
	.mcv-split__media img { max-height: 320px; }
	.mcv-partener-form__inner { grid-template-columns: 1fr; gap: var(--mcv-s4); }

	.mcv-sec--partener-form,
	#formular-partener { scroll-margin-top: 74px; }
}

@media (max-width: 620px) {

	.mcv-ph-hero { padding: var(--mcv-s5) var(--mcv-s2) var(--mcv-s4); }
	.mcv-ph-hero__title { max-width: none; }

	.mcv-tiles,
	.mcv-steps { grid-template-columns: 1fr; }

	.mcv-tile { padding: var(--mcv-s3); }
	.mcv-partener-form__card { padding: var(--mcv-s3); }

	.mcv-row { grid-template-columns: 1fr; gap: 10px; padding: var(--mcv-s3) 0; }

	.mcv-partener-form__card .mcv-submit-wrap { text-align: stretch; }
	.mcv-partener-form__card .mcv-submit { width: 100%; }
}


/* --------------------------------------------------
   10. PAGINI DE PRODUS
   -------------------------------------------------- */

/* Bloc de text introductiv, centrat, sub HERO */
.mcv-intro {
	max-width: 76ch;
	margin: 0 auto;
	text-align: center;
}

.mcv-intro p {
	margin: 0 0 var(--mcv-s2);
	font-size: 17px;
	line-height: 1.68;
	color: var(--mcv-ink-soft);
}

.mcv-intro p:last-child { margin-bottom: 0; }

/* Banda vizuala pe toata latimea, intre sectiuni */
.mcv-banda {
	position: relative;
	width: 100%;
	min-height: clamp(280px, 38vh, 420px);
	overflow: hidden;
	background: var(--mcv-ink);
}

.mcv-banda img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mcv-banda__text {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin: 0 auto;
	padding: var(--mcv-s6) var(--mcv-s3);
	color: #ffffff;
}

.mcv-banda::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10, 10, 10, .82) 0%, rgba(10, 10, 10, .52) 55%, rgba(10, 10, 10, .18) 100%);
}

.mcv-banda__text { position: relative; z-index: 2; }

.mcv-banda__titlu {
	margin: 0 0 var(--mcv-s2);
	max-width: 22ch;
	font-family: var(--mcv-font);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.mcv-banda__desc {
	margin: 0;
	max-width: 58ch;
	font-size: 16px;
	line-height: 1.66;
	color: rgba(255, 255, 255, .84);
}

/* Randul de produse conexe */
.mcv-conexe {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.mcv-conexe a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-btn);
	font-size: 14px;
	font-weight: 600;
	color: var(--mcv-ink) !important;
	text-decoration: none;
	transition: border-color .25s var(--mcv-ease), color .25s var(--mcv-ease), transform .25s var(--mcv-ease);
}

.mcv-conexe a::after {
	content: "";
	width: 7px;
	height: 7px;
	border-top: 2px solid var(--mcv-bronze);
	border-right: 2px solid var(--mcv-bronze);
	transform: rotate(45deg);
}

.mcv-conexe a:hover {
	border-color: var(--mcv-bronze);
	color: var(--mcv-bronze-deep) !important;
	transform: translateY(-1px);
}

/* Sectiunea de sisteme, cu logo pe card */
.mcv-sistem {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: var(--mcv-s3) var(--mcv-s4);
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
}

.mcv-sistem img {
	flex: 0 0 auto;
	width: auto;
	max-width: 110px;
	max-height: 38px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.mcv-sistem__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--mcv-ink-soft); }
.mcv-sistem__text strong { color: var(--mcv-ink); font-weight: 600; }

.mcv-sisteme {
	display: grid;
	gap: var(--mcv-s3);
	max-width: 1180px;
	margin: 0 auto;
}

@media (max-width: 620px) {
	.mcv-banda__text { padding: var(--mcv-s5) var(--mcv-s2); }
	.mcv-banda::after { background: linear-gradient(180deg, rgba(10, 10, 10, .45) 0%, rgba(10, 10, 10, .8) 100%); }
	.mcv-sistem { flex-direction: column; align-items: flex-start; gap: 12px; padding: var(--mcv-s3); }
	.mcv-conexe { justify-content: flex-start; }
}


/* --------------------------------------------------
   11. PAGINA "DESPRE NOI"
   -------------------------------------------------- */

/* Lantul de etape: consultanta -> ... -> receptie */
.mcv-flux {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 10px;
	max-width: 1180px;
	margin: var(--mcv-s5) auto 0;
	padding: 0;
	list-style: none;
	counter-reset: etapa;
}

.mcv-flux li {
	position: relative;
	flex: 1 1 150px;
	min-width: 140px;
	padding: var(--mcv-s3) 16px;
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-btn);
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mcv-ink);
}

.mcv-flux li::before {
	counter-increment: etapa;
	content: counter(etapa, decimal-leading-zero);
	display: block;
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--mcv-bronze);
}

/* Sageata dintre etape, doar pe ecranele unde stau pe acelasi rand */
@media (min-width: 1025px) {
	.mcv-flux li:not(:last-child)::after {
		content: "";
		position: absolute;
		right: -11px;
		top: 50%;
		width: 7px;
		height: 7px;
		margin-top: -4px;
		border-top: 2px solid var(--mcv-line-2);
		border-right: 2px solid var(--mcv-line-2);
		transform: rotate(45deg);
	}
}

/* Bloc de text pe latime de lectura, aliniat stanga */
.mcv-proza {
	max-width: 74ch;
	margin: 0 auto;
}

.mcv-proza p {
	margin: 0 0 var(--mcv-s2);
	font-size: 16.5px;
	line-height: 1.72;
	color: var(--mcv-ink-soft);
}

.mcv-proza p:last-child { margin-bottom: 0; }
.mcv-proza strong { color: var(--mcv-ink); font-weight: 600; }

/* Cele trei valori, mai mari decat un card obisnuit */
.mcv-valori {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--mcv-s3);
	max-width: 1180px;
	margin: 0 auto;
}

.mcv-valoare {
	padding: var(--mcv-s5) var(--mcv-s4);
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
	text-align: center;
}

.mcv-valoare__titlu {
	margin: 0;
	font-family: var(--mcv-font);
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--mcv-ink);
}

.mcv-valoare__rule {
	display: block;
	width: 26px;
	height: 2px;
	margin: 14px auto 0;
	background: var(--mcv-bronze);
}

/* Semnatura de final */
.mcv-semnatura {
	background: var(--mcv-ink);
	border-top: 1px solid rgba(255, 255, 255, .1);
	text-align: center;
}

.mcv-semnatura__nume {
	margin: 0;
	font-family: var(--mcv-font);
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 600;
	letter-spacing: -.02em;
	color: #ffffff;
}

.mcv-semnatura__sub {
	margin: 12px 0 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .58);
}

.mcv-semnatura__slogan {
	margin: var(--mcv-s4) 0 0;
	font-size: clamp(17px, 2.2vw, 21px);
	font-style: italic;
	color: var(--mcv-bronze-light);
}

@media (max-width: 1024px) {
	.mcv-valori { grid-template-columns: repeat(3, 1fr); gap: 12px; }
	.mcv-valoare { padding: var(--mcv-s4) var(--mcv-s3); }
}

@media (max-width: 620px) {
	.mcv-valori { grid-template-columns: 1fr; }
	.mcv-flux li { flex: 1 1 100%; text-align: left; }
	.mcv-flux li::before { display: inline-block; margin: 0 10px 0 0; }
}


/* --------------------------------------------------
   12. PAGINA "GARANTII"
   -------------------------------------------------- */

/* Tabelul duratelor: denumire la stanga, durata la dreapta */
.mcv-durate {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--mcv-line);
}

.mcv-durata {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px var(--mcv-s4);
	align-items: baseline;
	padding: var(--mcv-s3) 0;
	border-bottom: 1px solid var(--mcv-line);
}

.mcv-durata__nume {
	margin: 0;
	font-family: var(--mcv-font);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mcv-ink);
}

.mcv-durata__nota {
	grid-column: 1 / -1;
	margin: 4px 0 0;
	max-width: 68ch;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--mcv-ink-mute);
}

.mcv-durata__val {
	justify-self: end;
	font-family: var(--mcv-font);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--mcv-bronze-deep);
	white-space: nowrap;
}

.mcv-durata__val--text {
	font-weight: 600;
	font-size: 13.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
	white-space: normal;
	text-align: right;
	max-width: 22ch;
}

/* Caseta de atentionare, pentru precizarea despre componentele tertilor */
.mcv-nota {
	max-width: 1000px;
	margin: var(--mcv-s5) auto 0;
	padding: var(--mcv-s4);
	background: var(--mcv-surface);
	border: 1px solid var(--mcv-line);
	border-left: 3px solid var(--mcv-bronze);
	border-radius: var(--mcv-r-card);
}

.mcv-nota p {
	margin: 0 0 var(--mcv-s2);
	font-size: 16px;
	line-height: 1.68;
	color: var(--mcv-ink-soft);
}

.mcv-nota p:last-child { margin-bottom: 0; }
.mcv-nota strong { color: var(--mcv-ink); font-weight: 600; }

/* Lista de excluderi si de conditii */
.mcv-lista {
	max-width: 74ch;
	margin: var(--mcv-s3) auto 0;
	padding: 0;
	list-style: none;
}

.mcv-lista li {
	position: relative;
	padding: 0 0 12px 24px;
	font-size: 16px;
	line-height: 1.68;
	color: var(--mcv-ink-soft);
}

.mcv-lista li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .68em;
	width: 10px;
	height: 2px;
	background: var(--mcv-bronze);
}

.mcv-lista li:last-child { padding-bottom: 0; }

@media (max-width: 620px) {
	.mcv-durata { grid-template-columns: 1fr; }
	.mcv-durata__val,
	.mcv-durata__val--text { justify-self: start; text-align: left; max-width: none; }
	.mcv-nota { padding: var(--mcv-s3); }
}


/* ==================================================
   13. HERO CU ZOOM PENTRU PAGINILE DE PRODUS
   Acelasi sistem ca pe pagina de otel: imaginea este fundal pe sectiune,
   #mcv-hero-zoom din style.css o preia intr-un pseudo-element care se scaleaza
   lent la intrarea in cadru, iar mcv-responsive.css ii da inaltimile pe tableta
   si pe mobil. Aici raman doar dimensiunea pe desktop, valul de contrast si
   asezarea titlului.
   Titlul este asezat cu flex, nu absolut, ca sa ramana vizibil la orice latime.
   ================================================== */

.mcv-hero-produs {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	min-height: 1000px;
	padding: 60px;
	background-color: var(--mcv-ink);
	background-repeat: no-repeat;
	background-position: center 40%;
	background-size: cover;
}

/* Valul de contrast. Sta peste imagine (::before, z-index 0) si sub continut. */
.mcv-hero-produs::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(10, 10, 10, .28) 0%, rgba(10, 10, 10, 0) 38%, rgba(10, 10, 10, .62) 100%);
	pointer-events: none;
}

.mcv-hero-produs__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
}

.mcv-hero-produs__titlu {
	max-width: 850px;
	margin: 0;
	font-family: var(--mcv-font);
	font-size: 56px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-wrap: balance;
	color: #ffffff;
	text-shadow: 0 2px 26px rgba(0, 0, 0, .35);
}

/* Butonul de sub introducere, ca pe pagina de otel. */
.mcv-intro__cta {
	margin: var(--mcv-s4) 0 0;
	text-align: center;
}

/* ==================================================
   14. CARDURI DE CATEGORIE, CU FOTOGRAFIE
   Aceeasi componenta vizuala ca in portofoliu: colt de 18px, chenar subtire,
   filet bronz sub titlu. Fotografiile primite sunt toate in format portret
   1086x1448, deci raportul 3:4 le incadreaza fara decupaj.
   ================================================== */

.mcv-catg {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--mcv-s3);
	max-width: 1180px;
	margin: 0 auto;
}

.mcv-catg-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
	transition: border-color .3s var(--mcv-ease), box-shadow .3s var(--mcv-ease), transform .3s var(--mcv-ease);
}

.mcv-catg-card:hover {
	border-color: var(--mcv-line-2);
	box-shadow: 0 18px 44px rgba(20, 20, 20, .10);
	transform: translateY(-2px);
}

.mcv-catg-card__media {
	overflow: hidden;
	background: var(--mcv-surface);
}

.mcv-catg-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform .5s var(--mcv-ease);
}

.mcv-catg-card:hover .mcv-catg-card__media img { transform: scale(1.03); }

.mcv-catg-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--mcv-s3) var(--mcv-s3) var(--mcv-s4);
}

.mcv-catg-card__titlu {
	margin: 0;
	font-family: var(--mcv-font);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	text-wrap: balance;
	color: var(--mcv-ink);
}

.mcv-catg-card__rule {
	display: block;
	width: 26px;
	height: 2px;
	margin: 14px 0;
	background: var(--mcv-bronze);
	transition: width .3s var(--mcv-ease);
}

.mcv-catg-card:hover .mcv-catg-card__rule { width: 44px; }

.mcv-catg-card__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--mcv-ink-soft);
}

.mcv-catg-card__lista {
	margin: var(--mcv-s3) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--mcv-line);
}

.mcv-catg-card__lista li {
	position: relative;
	padding: 9px 0 9px 18px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--mcv-ink-mute);
	border-bottom: 1px solid var(--mcv-line);
}

.mcv-catg-card__lista li:last-child { border-bottom: 0; padding-bottom: 0; }

.mcv-catg-card__lista li::before {
	content: "";
	position: absolute;
	top: 17px;
	left: 0;
	width: 8px;
	height: 1px;
	background: var(--mcv-bronze);
}

/* ==================================================
   15. APARITIE DISCRETA LA DERULARE
   Elementul porneste vizibil daca JS-ul nu ruleaza; clasa este pusa de
   assets/js/mcv-reveal.js abia dupa ce confirma ca poate observa intrarea in
   cadru, deci continutul nu ramane niciodata ascuns.
   ================================================== */

[data-mcv-reveal].mcv-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s var(--mcv-ease), transform .6s var(--mcv-ease);
}

[data-mcv-reveal].mcv-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-mcv-reveal].mcv-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==================================================
   16. CATEGORII SI HERO PE ECRANE MICI
   Inaltimea si paddingul hero-ului vin din mcv-responsive.css, ca la otel.
   ================================================== */

@media (max-width: 1024px) {
	.mcv-catg { grid-template-columns: repeat(2, 1fr); }
	.mcv-hero-produs { min-height: 0; }
	.mcv-hero-produs__titlu { font-size: 42px; }
}

@media (max-width: 767px) {
	.mcv-catg { grid-template-columns: 1fr; }
	.mcv-hero-produs__titlu { font-size: 32px; letter-spacing: .5px; }
}


/* ==================================================
   17. CARD DE CATEGORIE CA LINK
   Cardul duce la pagina subcategoriei. Interiorul este format din span-uri,
   ca sa fie HTML valid intr-un <a>.
   ================================================== */

a.mcv-catg-card { text-decoration: none; color: inherit; }

.mcv-catg-card__media,
.mcv-catg-card__body,
.mcv-catg-card__text { display: block; }

.mcv-catg-card__lista { display: block; }
.mcv-catg-card__lista > span {
	position: relative;
	display: block;
	padding: 9px 0 9px 18px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--mcv-ink-mute);
	border-bottom: 1px solid var(--mcv-line);
}

.mcv-catg-card__lista > span:last-child { border-bottom: 0; padding-bottom: 0; }

.mcv-catg-card__lista > span::before {
	content: "";
	position: absolute;
	top: 17px;
	left: 0;
	width: 8px;
	height: 1px;
	background: var(--mcv-bronze);
}

.mcv-catg-card__mai {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--mcv-s3);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mcv-bronze-deep);
}

.mcv-catg-card__mai::after {
	content: "";
	width: 14px;
	height: 1px;
	background: var(--mcv-bronze);
	transition: width .28s var(--mcv-ease);
}

a.mcv-catg-card:hover .mcv-catg-card__mai::after { width: 26px; }

a.mcv-catg-card:focus-visible {
	outline: 2px solid var(--mcv-bronze);
	outline-offset: 3px;
}

/* ==================================================
   18. SOLUTII CONSTRUCTIVE
   Doua carduri mari, cu eticheta, lista de puncte si sigla furnizorului acolo
   unde exista. Doar sistemele confirmate.
   ================================================== */

.mcv-constructii {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--mcv-s3);
	max-width: 1180px;
	margin: 0 auto;
}

.mcv-constructie {
	display: flex;
	flex-direction: column;
	padding: var(--mcv-s4);
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
	transition: border-color .3s var(--mcv-ease), box-shadow .3s var(--mcv-ease);
}

.mcv-constructie:hover {
	border-color: var(--mcv-line-2);
	box-shadow: 0 18px 44px rgba(20, 20, 20, .08);
}

.mcv-constructie__eticheta {
	margin: 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
}

.mcv-constructie__nume {
	margin: 12px 0 0;
	font-family: var(--mcv-font);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
	text-wrap: balance;
	color: var(--mcv-ink);
}

.mcv-constructie__rule {
	display: block;
	width: 32px;
	height: 2px;
	margin: 16px 0;
	background: var(--mcv-bronze);
}

.mcv-constructie__text {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--mcv-ink-soft);
}

.mcv-constructie__lista {
	margin: var(--mcv-s3) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--mcv-line);
}

.mcv-constructie__lista li {
	position: relative;
	padding: 11px 0 11px 20px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--mcv-ink-soft);
	border-bottom: 1px solid var(--mcv-line);
}

.mcv-constructie__lista li::before {
	content: "";
	position: absolute;
	top: 20px;
	left: 0;
	width: 9px;
	height: 1px;
	background: var(--mcv-bronze);
}

.mcv-constructie__jos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mcv-s2);
	margin-top: auto;
	padding-top: var(--mcv-s3);
}

.mcv-constructie__sigla img {
	display: block;
	width: auto;
	max-width: 132px;
	max-height: 38px;
	object-fit: contain;
	opacity: .78;
}

.mcv-constructie__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mcv-bronze-deep);
}

.mcv-constructie__link::after {
	content: "";
	width: 16px;
	height: 1px;
	background: var(--mcv-bronze);
	transition: width .28s var(--mcv-ease);
}

.mcv-constructie__link:hover::after { width: 30px; }

/* ==================================================
   19. BLOC IMAGINE + TEXT PE PAGINILE DE PRODUS
   Fotografiile primite sunt in format portret, deci imaginea sta intr-o
   coloana, nu decupata pe toata latimea.
   ================================================== */

.mcv-split--produs {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: var(--mcv-s5);
	align-items: center;
	max-width: 1180px;
	margin: 0 auto;
}

.mcv-split--produs .mcv-split__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--mcv-r-card);
}

.mcv-split--produs .mcv-split__body .mcv-eyebrow { justify-content: flex-start; }

.mcv-split--produs .mcv-split__title {
	margin: 14px 0 var(--mcv-s3);
	font-family: var(--mcv-font);
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.02em;
	text-wrap: balance;
	color: var(--mcv-ink);
}

.mcv-split--produs .mcv-split__body p {
	margin: 0 0 var(--mcv-s3);
	font-size: 16px;
	line-height: 1.75;
	color: var(--mcv-ink-soft);
}

/* ==================================================
   20. PAGINILE DE SUBCATEGORIE
   Fir de navigare, zone pregatite pentru completare, fisa tehnica, galerie.
   ================================================== */

.mcv-fir {
	max-width: 1180px;
	margin: 0 auto;
	padding: var(--mcv-s4) var(--mcv-s3) 0;
}

.mcv-fir ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--mcv-ink-mute);
}

.mcv-fir li + li::before {
	content: "/";
	margin-right: 8px;
	color: var(--mcv-line-2);
}

.mcv-fir a { color: var(--mcv-ink-soft); text-decoration: none; }
.mcv-fir a:hover { color: var(--mcv-bronze-deep); }

/* Zona care asteapta continut. Spune ce urmeaza, nu se preface ca are date. */
.mcv-pregatit {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--mcv-s5) var(--mcv-s4);
	text-align: center;
	background: var(--mcv-surface);
	border: 1px dashed var(--mcv-line-2);
	border-radius: var(--mcv-r-card);
}

.mcv-pregatit__titlu {
	margin: 0 0 12px;
	font-family: var(--mcv-font);
	font-size: 18px;
	font-weight: 600;
	color: var(--mcv-ink);
}

.mcv-pregatit__text {
	margin: 0 0 var(--mcv-s3);
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--mcv-ink-soft);
}

/* Fisa tehnica, pentru momentul in care primeste date. */
.mcv-fisa-tehnica {
	max-width: 900px;
	margin: 0 auto;
}

.mcv-fisa-tehnica > div {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--mcv-s3);
	padding: 14px 0;
	border-bottom: 1px solid var(--mcv-line);
}

.mcv-fisa-tehnica dt {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
}

.mcv-fisa-tehnica dd {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--mcv-ink);
}

/* Galeria de produs, pentru momentul in care primeste fotografii. */
.mcv-galerie-produs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--mcv-s3);
	max-width: 1180px;
	margin: 0 auto;
}

.mcv-galerie-produs figure {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
}

.mcv-galerie-produs img {
	display: block;
	width: 100%;
	height: auto;
}

/* Hero-ul subcategoriilor este mai scund decat cel al paginii-parinte, dar
   suficient de inalt cat fotografiile in format portret sa se citeasca pe
   ecran lat. Incadrarea pe verticala se da din atributul style al sectiunii,
   pentru ca fiecare fotografie are subiectul in alt loc. */
.mcv-hero-produs--sub { min-height: 820px; }

.mcv-hero-produs--sub .mcv-eyebrow--light {
	justify-content: flex-start;
	margin-bottom: 14px;
}

/* Supratitlul sta pe fotografie, deci are nevoie de contrast propriu:
   regulile din mcv-system.css albesc doar titlurile, nu si paragrafele. */
.mcv-hero-produs .mcv-eyebrow,
.mcv-hero-produs .mcv-eyebrow--light {
	color: rgba(255, 255, 255, .88);
	text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
}

.mcv-hero-produs .mcv-eyebrow::before,
.mcv-hero-produs .mcv-eyebrow--light::before {
	background: var(--mcv-bronze-light);
}

.mcv-hero-produs--sub .mcv-hero-produs__titlu { font-size: clamp(30px, 3.4vw, 46px); }

/* Randul de sub titlu apare numai pe hero-ul unui sistem, unde tagline-ul
   spune in doua cuvinte ce este produsul. Are nevoie de aceeasi umbra ca
   titlul, altfel se pierde pe zonele luminoase ale fotografiei. */
.mcv-hero-produs__sub {
	max-width: 620px;
	margin: var(--mcv-s2) 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .92);
	text-shadow: 0 1px 18px rgba(0, 0, 0, .5);
}

@media (max-width: 720px) {
	.mcv-hero-produs__sub { font-size: 15px; }
}

/* ==================================================
   21. COMPONENTELE NOI PE ECRANE MICI
   ================================================== */

@media (max-width: 1024px) {
	.mcv-constructii { grid-template-columns: 1fr; }
	.mcv-split--produs { grid-template-columns: 1fr; gap: var(--mcv-s4); }
	.mcv-split--produs .mcv-split__media img { aspect-ratio: 4 / 3; }
	.mcv-galerie-produs { grid-template-columns: repeat(2, 1fr); }
	.mcv-fisa-tehnica > div { grid-template-columns: 200px 1fr; }
}

@media (max-width: 767px) {
	.mcv-galerie-produs { grid-template-columns: 1fr; }
	.mcv-fisa-tehnica > div { grid-template-columns: 1fr; gap: 4px; }
	.mcv-constructie { padding: var(--mcv-s3); }
	.mcv-pregatit { padding: var(--mcv-s4) var(--mcv-s3); }
	.mcv-fir { padding: var(--mcv-s3) var(--mcv-s2) 0; }
}


/* ==================================================
   22. DIPTIC: ACEEASI LUCRARE, DOUA PERSPECTIVE
   Doua fotografii mari, cu legenda sub fiecare. Folosit pe pagina de
   luminatoare, unde materialul contine acelasi ansamblu vazut din exterior si
   din interior.
   ================================================== */

.mcv-diptic {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--mcv-s3);
	max-width: 1180px;
	margin: 0 auto;
}

.mcv-diptic__parte {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
	transition: border-color .3s var(--mcv-ease), box-shadow .3s var(--mcv-ease);
}

.mcv-diptic__parte:hover {
	border-color: var(--mcv-line-2);
	box-shadow: 0 18px 44px rgba(20, 20, 20, .10);
}

.mcv-diptic__parte img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.mcv-diptic__parte figcaption {
	padding: var(--mcv-s3) var(--mcv-s3) var(--mcv-s4);
}

.mcv-diptic__et {
	display: block;
	margin-bottom: 12px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mcv-bronze-deep);
}

.mcv-diptic__parte figcaption p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--mcv-ink-soft);
}

/* ==================================================
   23. CARDURI DE SOLUTIE PE DOUA COLOANE
   Varianta cu doua coloane a cardurilor de categorie, pentru paginile cu
   fotografii in format peisaj. Restul stilului vine din sectiunile 14 si 17.
   ================================================== */

.mcv-catg--doua {
	grid-template-columns: repeat(2, 1fr);
}

.mcv-catg-card--lat .mcv-catg-card__media img {
	aspect-ratio: 4 / 3;
}

.mcv-catg-card--static {
	cursor: default;
}

@media (max-width: 860px) {
	.mcv-diptic { grid-template-columns: 1fr; }
	.mcv-catg--doua { grid-template-columns: 1fr; }
}


/* ==================================================
   24. PAGINA DE ACCESORII
   Carduri cu fisa produsului: nume, filet, descriere si lista de
   caracteristici. Cardul are si un loc pentru fotografie, care se randeaza
   doar cand produsul primeste o imagine.
   ================================================== */

.mcv-acc {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--mcv-s3);
	max-width: 1180px;
	margin: 0 auto;
}

.mcv-acc-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
	transition: border-color .3s var(--mcv-ease), box-shadow .3s var(--mcv-ease), transform .3s var(--mcv-ease);
}

.mcv-acc-card:hover {
	border-color: var(--mcv-line-2);
	box-shadow: 0 18px 44px rgba(20, 20, 20, .09);
	transform: translateY(-2px);
}

.mcv-acc-card__media {
	background: var(--mcv-surface);
	border-bottom: 1px solid var(--mcv-line);
}

.mcv-acc-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

.mcv-acc-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--mcv-s3) var(--mcv-s3) var(--mcv-s4);
}

.mcv-acc-card__nume {
	margin: 0;
	font-family: var(--mcv-font);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	text-wrap: balance;
	color: var(--mcv-ink);
}

.mcv-acc-card__rule {
	display: block;
	width: 26px;
	height: 2px;
	margin: 14px 0;
	background: var(--mcv-bronze);
	transition: width .3s var(--mcv-ease);
}

.mcv-acc-card:hover .mcv-acc-card__rule { width: 44px; }

.mcv-acc-card__desc {
	margin: 0 0 var(--mcv-s3);
	font-size: 15px;
	line-height: 1.65;
	color: var(--mcv-ink-soft);
}

.mcv-acc-card__car,
.mcv-acc-card__var {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--mcv-line);
}

.mcv-acc-card__car li,
.mcv-acc-card__var li {
	position: relative;
	padding: 9px 0 9px 18px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--mcv-ink-mute);
	border-bottom: 1px solid var(--mcv-line);
}

.mcv-acc-card__car li:last-child,
.mcv-acc-card__var li:last-child { border-bottom: 0; }

.mcv-acc-card__car li::before,
.mcv-acc-card__var li::before {
	content: "";
	position: absolute;
	top: 17px;
	left: 0;
	width: 8px;
	height: 1px;
	background: var(--mcv-bronze);
}

.mcv-acc-card__et {
	margin: var(--mcv-s3) 0 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mcv-bronze-deep);
}

.mcv-acc-card__var { border-top: 0; }

.mcv-acc-card__nota {
	margin: var(--mcv-s3) 0 0;
	padding-top: var(--mcv-s2);
	border-top: 1px solid var(--mcv-line);
	font-size: 13.5px;
	line-height: 1.55;
	font-style: italic;
	color: var(--mcv-ink-mute);
}

/* --------------------------------------------------
   Cuprinsul: sarituri catre grupe
   -------------------------------------------------- */

.mcv-cuprins {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	max-width: 1180px;
	margin: 0 auto;
}

.mcv-cuprins__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px;
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-btn);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--mcv-ink);
	transition: border-color .25s var(--mcv-ease), color .25s var(--mcv-ease), transform .25s var(--mcv-ease);
}

.mcv-cuprins__item:hover {
	border-color: var(--mcv-bronze);
	color: var(--mcv-bronze-deep);
	transform: translateY(-1px);
}

.mcv-cuprins__nr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	background: var(--mcv-surface);
	border-radius: 999px;
	font-size: 12px;
	color: var(--mcv-ink-mute);
}

/* Titlul grupei nu trebuie sa intre sub header cand se sare din cuprins. */
.mcv-sec--acc { scroll-margin-top: 110px; }

/* --------------------------------------------------
   Sub 1200px si sub 861px
   -------------------------------------------------- */

@media (max-width: 1199px) {
	.mcv-acc { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
	.mcv-acc { grid-template-columns: 1fr; }
	.mcv-cuprins__item { padding: 10px 14px; font-size: 13px; }
}


/* --------------------------------------------------
   25. ACCESORII: fotografiile de produs
   Imaginile Cortizo sunt pe fundal alb si au proportii diferite, de la aproape
   patrate la foarte inalte. Le incadram intr-o cutie constanta, cu `contain`,
   ca sigla si forma produsului sa nu fie decupate si ca randul de carduri sa
   ramana aliniat.
   -------------------------------------------------- */

.mcv-acc-card__media img {
	padding: var(--mcv-s2);
	aspect-ratio: 4 / 3;
	background: #ffffff;
}

/* Variantele cu imagine proprie, sub fisa produsului */
.mcv-acc-card__variante {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.mcv-acc-card__variante li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: center;
}

.mcv-acc-card__variante img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--mcv-surface);
	border: 1px solid var(--mcv-line);
	border-radius: 10px;
}

.mcv-acc-card__variante span {
	font-size: 11px;
	line-height: 1.35;
	color: var(--mcv-ink-mute);
}

/* Alte vederi ale aceluiasi produs */
.mcv-acc-card__vederi {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.mcv-acc-card__vederi img {
	display: block;
	width: 96px;
	height: 72px;
	object-fit: contain;
	background: var(--mcv-surface);
	border: 1px solid var(--mcv-line);
	border-radius: 10px;
}

@media (max-width: 720px) {
	.mcv-acc-card__variante { grid-template-columns: repeat(2, 1fr); }
}


/* ==================================================
   26. SISTEME CORTIZO
   Catalogul tehnic: catalog, pagini de categorie si pagini de sistem.
   Continutul este dens si preponderent tabelar, deci componentele de aici sunt
   construite in jurul lizibilitatii unui tabel lung, nu in jurul fotografiei.
   Toate cotele vin din tokenii existenti; nu introduc culori noi.
   ================================================== */

/* --------------------------------------------------
   26.1 Hero tipografic
   Paginile de categorie si catalogul nu au fotografie proprie, deci hero-ul
   este construit din tipografie, pe fundalul inchis al sistemului.
   -------------------------------------------------- */

.mcv-cz-hero {
	display: flex;
	align-items: flex-end;
	width: 100%;
	min-height: 420px;
	padding: 60px var(--mcv-s3) 56px;
	background:
		radial-gradient(120% 140% at 12% 0%, rgba(138, 106, 59, .34) 0%, rgba(138, 106, 59, 0) 58%),
		linear-gradient(180deg, #1c1c1a 0%, var(--mcv-ink) 100%);
}

.mcv-cz-hero__inner {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
}

.mcv-cz-hero__titlu {
	max-width: 900px;
	margin: 10px 0 0;
	font-family: var(--mcv-font);
	font-size: clamp(34px, 5vw, 56px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-wrap: balance;
	color: #ffffff;
}

/* --------------------------------------------------
   26.2 Bara de categorii
   Prezenta pe fiecare pagina a modulului, ca orice categorie sa fie la un
   singur clic distanta de oriunde.
   -------------------------------------------------- */

.mcv-cz-bara {
	max-width: 1180px;
	margin: 0 auto;
	padding: var(--mcv-s3) var(--mcv-s3) 0;
}

.mcv-cz-bara ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mcv-cz-bara__link {
	display: inline-block;
	padding: 9px 15px;
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	color: var(--mcv-ink-soft) !important;
	text-decoration: none;
	transition: border-color .22s var(--mcv-ease), color .22s var(--mcv-ease), background-color .22s var(--mcv-ease);
}

.mcv-cz-bara__link:hover {
	border-color: var(--mcv-bronze);
	color: var(--mcv-bronze-deep) !important;
}

.mcv-cz-bara__link.is-activ {
	background: var(--mcv-ink);
	border-color: var(--mcv-ink);
	color: #ffffff !important;
}

/* --------------------------------------------------
   26.3 Fraza-rezumat de sub titlu
   -------------------------------------------------- */

.mcv-cz-tagline {
	font-size: 19px !important;
	line-height: 1.55 !important;
	font-weight: 500;
	color: var(--mcv-ink) !important;
	text-wrap: balance;
}

/* --------------------------------------------------
   26.4 Grila de carduri de sistem
   -------------------------------------------------- */

.mcv-cz-grila {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--mcv-s3);
	max-width: 1180px;
	margin: 0 auto;
}

.mcv-cz-card {
	display: flex;
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
	overflow: hidden;
	transition: border-color .28s var(--mcv-ease), box-shadow .28s var(--mcv-ease), transform .28s var(--mcv-ease);
}

.mcv-cz-card:hover {
	border-color: var(--mcv-bronze);
	box-shadow: var(--mcv-shadow-lift);
	transform: translateY(-2px);
}

.mcv-cz-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit !important;
	text-decoration: none !important;
}

.mcv-cz-card__media {
	display: block;
	position: relative;
	background: var(--mcv-surface);
	border-bottom: 1px solid var(--mcv-line);
}

.mcv-cz-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	padding: var(--mcv-s3);
	background: #ffffff;
}

/* Marcajul tipografic folosit cat timp un sistem nu are inca render oficial. */
.mcv-cz-card__marca {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	aspect-ratio: 4 / 3;
	background:
		radial-gradient(90% 120% at 20% 0%, rgba(138, 106, 59, .22) 0%, rgba(138, 106, 59, 0) 60%),
		linear-gradient(180deg, #232320 0%, var(--mcv-ink) 100%);
	text-align: center;
}

.mcv-cz-card__marca-nume {
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #ffffff;
}

.mcv-cz-card__marca-sub {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--mcv-bronze-light);
}

.mcv-cz-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--mcv-s3);
}

.mcv-cz-card__titlu {
	display: block;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.3;
	color: var(--mcv-ink);
}

.mcv-cz-card__tagline {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--mcv-ink-soft);
}

.mcv-cz-card__spec {
	display: block;
	margin-top: var(--mcv-s3);
	border-top: 1px solid var(--mcv-line);
}

.mcv-cz-card__rand {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--mcv-line);
}

.mcv-cz-card__et {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
}

.mcv-cz-card__val {
	font-size: 14px;
	font-weight: 600;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--mcv-ink);
}

.mcv-cz-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: auto;
	padding-top: var(--mcv-s3);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mcv-bronze-deep);
}

.mcv-cz-card__cta::after {
	content: "";
	width: 7px;
	height: 7px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .25s var(--mcv-ease);
}

.mcv-cz-card:hover .mcv-cz-card__cta::after { transform: rotate(45deg) translate(2px, -2px); }

/* --------------------------------------------------
   26.5 Cardurile de categorie, din catalog
   -------------------------------------------------- */

.mcv-cz-grila--cat { grid-template-columns: repeat(3, 1fr); }

.mcv-cz-catcard {
	display: flex;
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
	transition: border-color .28s var(--mcv-ease), box-shadow .28s var(--mcv-ease), transform .28s var(--mcv-ease);
}

.mcv-cz-catcard:hover {
	border-color: var(--mcv-bronze);
	box-shadow: var(--mcv-shadow-lift);
	transform: translateY(-2px);
}

.mcv-cz-catcard a {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--mcv-s4);
	color: inherit !important;
	text-decoration: none !important;
}

.mcv-cz-catcard__nr {
	display: inline-block;
	align-self: flex-start;
	padding: 5px 11px;
	background: var(--mcv-bronze-tint);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mcv-bronze-deep);
}

.mcv-cz-catcard__titlu {
	display: block;
	margin-top: var(--mcv-s3);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -.01em;
	color: var(--mcv-ink);
	text-wrap: balance;
}

.mcv-cz-catcard__text {
	display: block;
	margin-top: 10px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--mcv-ink-soft);
}

/* --------------------------------------------------
   26.6 Banda "pe scurt"
   -------------------------------------------------- */

.mcv-cz-scurt {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	max-width: 1180px;
	margin: 0 auto;
	background: var(--mcv-line);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
	overflow: hidden;
}

.mcv-cz-scurt__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--mcv-s4) var(--mcv-s3);
	background: var(--mcv-white);
}

.mcv-cz-scurt__et {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
}

.mcv-cz-scurt__val {
	font-size: clamp(17px, 1.7vw, 21px);
	font-weight: 600;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
	color: var(--mcv-ink);
}

/* --------------------------------------------------
   26.7 Tabele
   Tabelul comparativ poate fi lat; primeste derulare orizontala proprie, ca
   pagina sa nu capete niciodata scroll lateral.
   -------------------------------------------------- */

.mcv-cz-tabel {
	max-width: 1180px;
	margin: 0 auto var(--mcv-s4);
}

.mcv-cz-tabel__titlu {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
}

.mcv-cz-tabel__scroll {
	overflow-x: auto;
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
}

.mcv-cz-tabel table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.mcv-cz-tabel th,
.mcv-cz-tabel td {
	padding: 13px var(--mcv-s3);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--mcv-line);
}

.mcv-cz-tabel thead th {
	position: sticky;
	top: 0;
	background: var(--mcv-surface);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
	white-space: nowrap;
}

.mcv-cz-tabel tbody th {
	font-size: 13px;
	font-weight: 600;
	color: var(--mcv-ink);
}

.mcv-cz-tabel tbody td {
	color: var(--mcv-ink-soft);
	font-variant-numeric: tabular-nums;
}

.mcv-cz-tabel tbody tr:last-child th,
.mcv-cz-tabel tbody tr:last-child td { border-bottom: 0; }

.mcv-cz-tabel tbody tr:hover th,
.mcv-cz-tabel tbody tr:hover td { background: var(--mcv-surface); }

.mcv-cz-tabel a {
	font-weight: 600;
	color: var(--mcv-bronze-deep) !important;
}

.mcv-cz-tabel__nota {
	max-width: 80ch;
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--mcv-ink-mute);
}

/* Tabelul comparativ are coloane cu latime minima, ca sa nu se strivesca. */
.mcv-cz-tabel--comparativ th,
.mcv-cz-tabel--comparativ td { min-width: 190px; }

.mcv-cz-tabel--comparativ tbody th { min-width: 210px; }

/* --------------------------------------------------
   26.8 Blocul unei variante
   -------------------------------------------------- */

.mcv-cz-grup {
	max-width: 1180px;
	margin: var(--mcv-s6) auto var(--mcv-s2);
	padding-top: var(--mcv-s4);
	border-top: 2px solid var(--mcv-ink);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--mcv-ink);
}

.mcv-cz-sec--variante .mcv-cz-grup:first-of-type { margin-top: 0; }

.mcv-cz-grup__text {
	max-width: 1180px;
	margin: 0 auto var(--mcv-s4);
	font-size: 15.5px;
	line-height: 1.62;
	color: var(--mcv-ink-soft);
}

.mcv-cz-varianta {
	max-width: 1180px;
	margin: 0 auto var(--mcv-s3);
	padding: var(--mcv-s5);
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
}

.mcv-cz-varianta__cap {
	padding-bottom: var(--mcv-s3);
	border-bottom: 1px solid var(--mcv-line);
}

.mcv-cz-varianta__nume {
	margin: 0;
	font-size: clamp(18px, 2vw, 23px);
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.25;
	color: var(--mcv-ink);
}

.mcv-cz-varianta__sub {
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mcv-bronze-deep);
}

.mcv-cz-varianta__text {
	max-width: 80ch;
	margin: var(--mcv-s3) 0 0;
	font-size: 15.5px;
	line-height: 1.68;
	color: var(--mcv-ink-soft);
}

.mcv-cz-eticheta {
	margin: var(--mcv-s5) 0 var(--mcv-s2);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mcv-bronze-deep);
}

/* In interiorul cardului de varianta, fisa nu mai are nevoie de centrare. */
.mcv-cz-varianta .mcv-fisa-tehnica { max-width: none; }
.mcv-cz-varianta .mcv-fisa-tehnica > div { grid-template-columns: 300px 1fr; }
.mcv-cz-varianta .mcv-cz-tabel { max-width: none; margin-bottom: 0; }
.mcv-cz-varianta .mcv-cz-tabel + .mcv-cz-tabel { margin-top: var(--mcv-s4); }

.mcv-cz-lista {
	max-width: 80ch;
	margin: 0;
	padding-left: 20px;
}

.mcv-cz-lista li {
	margin-bottom: 7px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--mcv-ink-soft);
}

.mcv-cz-lista li::marker { color: var(--mcv-bronze); }

.mcv-cz-lista--cert li {
	font-weight: 600;
	color: var(--mcv-ink);
}

/* --------------------------------------------------
   26.9 Note
   -------------------------------------------------- */

.mcv-cz-nota {
	max-width: 80ch;
	margin: var(--mcv-s4) 0 0;
	padding: var(--mcv-s3);
	background: var(--mcv-surface);
	border-left: 3px solid var(--mcv-line-2);
	border-radius: 0 var(--mcv-r-btn) var(--mcv-r-btn) 0;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--mcv-ink-soft);
}

.mcv-cz-nota--sec {
	max-width: 1180px;
	margin-inline: auto;
}

.mcv-cz-nota--atentie {
	background: var(--mcv-bronze-tint);
	border-left-color: var(--mcv-bronze);
	color: var(--mcv-ink);
}

/* --------------------------------------------------
   26.10 Descarcarea fisei tehnice
   -------------------------------------------------- */

.mcv-cz-pdf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mcv-s3);
	margin: var(--mcv-s5) 0 0;
	padding-top: var(--mcv-s4);
	border-top: 1px solid var(--mcv-line);
}

.mcv-cz-pdf__link {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	line-height: 1.3;
	text-align: left;
}

.mcv-cz-pdf__meta {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: none;
	opacity: .78;
}

.mcv-cz-pdf__sistem {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
}

/* --------------------------------------------------
   26.11 Sub 1200px, 1024px si 720px
   -------------------------------------------------- */

@media (max-width: 1199px) {
	.mcv-cz-grila,
	.mcv-cz-grila--cat { grid-template-columns: repeat(2, 1fr); }
	.mcv-cz-scurt { grid-template-columns: repeat(2, 1fr); }
	.mcv-cz-varianta { padding: var(--mcv-s4); }
	.mcv-cz-varianta .mcv-fisa-tehnica > div { grid-template-columns: 220px 1fr; }
}

@media (max-width: 1024px) {
	.mcv-cz-hero { min-height: 320px; padding: 48px var(--mcv-s3) 40px; }
}

@media (max-width: 767px) {
	.mcv-cz-grila,
	.mcv-cz-grila--cat { grid-template-columns: 1fr; }
	.mcv-cz-scurt { grid-template-columns: 1fr; }
	.mcv-cz-varianta { padding: var(--mcv-s3); }
	.mcv-cz-varianta .mcv-fisa-tehnica > div { grid-template-columns: 1fr; gap: 4px; }
	.mcv-cz-bara { padding: var(--mcv-s3) var(--mcv-s2) 0; }
	.mcv-cz-bara__link { padding: 8px 13px; font-size: 12.5px; }
	.mcv-cz-tabel th,
	.mcv-cz-tabel td { padding: 11px var(--mcv-s2); }
	.mcv-cz-tabel--comparativ th,
	.mcv-cz-tabel--comparativ td { min-width: 165px; }
	.mcv-cz-pdf { gap: var(--mcv-s2); }
}


/* --------------------------------------------------
   26.12 Hero-ul paginii de sistem
   Randerele CORTIZO sunt pe fundal alb, deci nu pot deveni imagine de fundal
   cu val intunecat, ca fotografiile noastre. Le asezam pe o placa deschisa,
   langa titlu: randerul ramane citibil, iar pagina pastreaza registrul inchis
   al celorlalte hero-uri.
   -------------------------------------------------- */

.mcv-cz-hero--sistem {
	align-items: center;
	min-height: 0;
	padding-block: 64px;
}

.mcv-cz-hero__inner--doua {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 440px;
	gap: var(--mcv-s6);
	align-items: center;
}

.mcv-cz-hero__sub {
	max-width: 52ch;
	margin: var(--mcv-s3) 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .78);
}

.mcv-cz-hero__media {
	margin: 0;
	padding: var(--mcv-s4) var(--mcv-s4) var(--mcv-s3);
	background: #ffffff;
	border-radius: var(--mcv-r-card);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}

.mcv-cz-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: contain;
}

.mcv-cz-hero__media figcaption {
	margin-top: var(--mcv-s2);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-align: center;
	color: var(--mcv-ink-mute);
}

/* --------------------------------------------------
   26.13 Randerul din capul unei variante
   -------------------------------------------------- */

.mcv-cz-varianta__cap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: var(--mcv-s4);
	align-items: start;
}

.mcv-cz-varianta__media {
	margin: 0;
	padding: var(--mcv-s2);
	background: #ffffff;
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
}

.mcv-cz-varianta__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: contain;
}

/* Descrierea a intrat in capul variantei; nu mai are nevoie de marginea ei. */
.mcv-cz-varianta__capt .mcv-cz-varianta__text { margin-top: var(--mcv-s3); }

@media (max-width: 1024px) {
	.mcv-cz-hero__inner--doua {
		grid-template-columns: 1fr;
		gap: var(--mcv-s4);
	}
	.mcv-cz-hero__media { max-width: 480px; }
}

@media (max-width: 767px) {
	.mcv-cz-varianta__cap {
		grid-template-columns: 1fr;
		gap: var(--mcv-s3);
	}
	.mcv-cz-varianta__media { max-width: 320px; }
	.mcv-cz-hero--sistem { padding-block: 44px; }
}

/* ==================================================
   27. FINISAJE: CELE DOUA FAMILII SI CARTILE DE CULORI
   Fiecare familie sta intr-un card mare care isi poarta propriile carti de
   culori. Mostrele sunt fotografii de profil finisat, nu esantioane de culoare,
   deci se trateaza ca imagini: colt rotunjit, chenar discret, cod dedesubt.
   Barele de file sunt ascunse in markup si le arata scriptul; fara JavaScript
   raman toate cartile vizibile, una sub alta.
   ================================================== */

.mcv-fin-ancora { scroll-margin-top: 110px; }

/* Ritmul benzilor pe pagina: familii si texturi pe fond surface, restul alb,
   ca sectiunile sa se citeasca separat fara linii de despartire. */
.mcv-sec--familii,
.mcv-fin-speciale { background: var(--mcv-surface); }

.mcv-fin-familii {
	display: flex;
	flex-direction: column;
	gap: var(--mcv-s4);
	max-width: 1180px;
	margin: 0 auto;
}

.mcv-fin-mare {
	padding: var(--mcv-s5);
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
}

/* --------------------------------------------------
   28.1 Capul cardului: fotografie + prezentare
   -------------------------------------------------- */

.mcv-fin-mare__cap {
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	gap: var(--mcv-s5);
	align-items: stretch;
}

/* Fotografia umple coloana pe toata inaltimea textului: profilele din ea sunt
   verticale, deci decupajul inalt le prinde intreg. */
.mcv-fin-mare__media {
	position: relative;
	min-height: 340px;
	margin: 0;
}

.mcv-fin-mare__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
	border: 1px solid var(--mcv-line);
}

.mcv-fin-mare__body {
	display: flex;
	flex-direction: column;
}

.mcv-fin-mare__nume {
	margin: 0;
	font-size: clamp(24px, 2.4vw, 30px);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.15;
	color: var(--mcv-ink);
}

.mcv-fin-mare__sub {
	margin: 6px 0 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mcv-bronze-deep);
}

.mcv-fin-mare__text {
	margin: var(--mcv-s3) 0 0;
	font-size: 15px;
	line-height: 1.68;
	color: var(--mcv-ink-soft);
}

.mcv-fin-mare__body .mcv-cz-eticheta { margin-top: var(--mcv-s4); }

.mcv-fin-mare__std {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: auto 0 0;
	padding-top: var(--mcv-s3);
	border-top: 1px solid var(--mcv-line);
}

.mcv-fin-mare__std span {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
}

.mcv-fin-mare__std strong {
	font-size: 14px;
	line-height: 1.45;
	color: var(--mcv-ink);
}

/* --------------------------------------------------
   28.2 Cartile de culori din interiorul cardului
   -------------------------------------------------- */

.mcv-fin-mare__palete {
	margin-top: var(--mcv-s5);
	padding-top: var(--mcv-s5);
	border-top: 1px solid var(--mcv-line);
}

.mcv-fin-mare__palete > .mcv-cz-eticheta {
	margin: 0 0 var(--mcv-s3);
	text-align: center;
}

.mcv-pal__file {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: var(--mcv-s4);
}

.mcv-pal__fila {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 10px 17px;
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line-2);
	border-radius: var(--mcv-r-btn);
	font-family: var(--mcv-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mcv-ink);
	cursor: pointer;
	transition: border-color .25s var(--mcv-ease), color .25s var(--mcv-ease),
	            background-color .25s var(--mcv-ease), transform .25s var(--mcv-ease);
}

.mcv-pal__fila:hover {
	border-color: var(--mcv-bronze);
	color: var(--mcv-bronze-deep);
	transform: translateY(-1px);
}

.mcv-pal__fila:focus-visible {
	outline: 2px solid var(--mcv-bronze-ring);
	outline-offset: 2px;
}

.mcv-pal__fila.is-activ {
	background: var(--mcv-ink);
	border-color: var(--mcv-ink);
	color: var(--mcv-white);
}

.mcv-pal__fila.is-activ:hover { transform: none; }

.mcv-pal__nr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 22px;
	padding: 0 6px;
	background: var(--mcv-surface);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: var(--mcv-ink-mute);
	transition: background-color .25s var(--mcv-ease), color .25s var(--mcv-ease);
}

.mcv-pal__fila.is-activ .mcv-pal__nr {
	background: rgba(255, 255, 255, .16);
	color: var(--mcv-white);
}

/* Fara JavaScript, cartile stau una sub alta, despartite de o linie. */
.mcv-pal__panou + .mcv-pal__panou {
	margin-top: var(--mcv-s5);
	padding-top: var(--mcv-s5);
	border-top: 1px solid var(--mcv-line);
}

.are-file .mcv-pal__panou + .mcv-pal__panou {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.mcv-pal__panou:focus-visible {
	outline: 2px solid var(--mcv-bronze-ring);
	outline-offset: 3px;
}

.mcv-pal__cap {
	max-width: 760px;
	margin: 0 auto var(--mcv-s4);
	text-align: center;
}

.mcv-pal__titlu {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.2;
	color: var(--mcv-ink);
}

.mcv-pal__oficial {
	margin: 7px 0 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
}

.mcv-pal__oficial span { color: var(--mcv-bronze-deep); }

.mcv-pal__intro {
	margin: var(--mcv-s2) 0 0;
	font-size: 14px;
	line-height: 1.68;
	color: var(--mcv-ink-soft);
}

/* --------------------------------------------------
   28.3 Grila de mostre
   -------------------------------------------------- */

.mcv-pal__grila {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--mcv-s3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mcv-pal__item { margin: 0; }

.mcv-pal__item figure {
	margin: 0;
	transition: transform .3s var(--mcv-ease);
}

.mcv-pal__item figure:hover { transform: translateY(-2px); }

.mcv-pal__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 560 / 268;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--mcv-line);
	background: var(--mcv-surface);
}

.mcv-pal__cod {
	margin-top: 9px;
	font-size: 13px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--mcv-ink);
	text-align: center;
}

.mcv-pal__nota {
	max-width: 760px;
	margin: var(--mcv-s4) auto 0;
	padding-top: var(--mcv-s3);
	border-top: 1px solid var(--mcv-line);
	font-size: 13px;
	line-height: 1.6;
	color: var(--mcv-ink-mute);
	text-align: center;
}

.mcv-pal__disclaimer {
	max-width: 820px;
	margin: var(--mcv-s5) auto 0;
	font-size: 13px;
	line-height: 1.65;
	color: var(--mcv-ink-mute);
	text-align: center;
}

/* --------------------------------------------------
   28.4 Nuante si tratamente: etichete
   -------------------------------------------------- */

.mcv-fin-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: var(--mcv-s3) 0 0;
	padding: 0;
	list-style: none;
}

.mcv-fin-chips li {
	padding: 8px 14px;
	background: var(--mcv-surface);
	border: 1px solid var(--mcv-line);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	color: var(--mcv-ink);
}

.mcv-sec--anodizare .mcv-fin-col .mcv-cz-nota { margin-top: var(--mcv-s3); }

/* --------------------------------------------------
   28.5 Standarde de referinta
   -------------------------------------------------- */

.mcv-fin-std {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--mcv-s3);
	max-width: 1000px;
	margin: 0 auto;
}

.mcv-fin-std__item {
	display: flex;
	flex-direction: column;
	padding: var(--mcv-s4);
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-top: 3px solid var(--mcv-bronze);
	border-radius: var(--mcv-r-card);
	transition: box-shadow .28s var(--mcv-ease), transform .28s var(--mcv-ease);
}

.mcv-fin-std__item:hover {
	box-shadow: var(--mcv-shadow-lift);
	transform: translateY(-2px);
}

.mcv-fin-std__et {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
}

.mcv-fin-std__nume {
	margin: 9px 0 0;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.25;
	color: var(--mcv-ink);
}

.mcv-fin-std__text {
	margin: var(--mcv-s2) 0 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--mcv-ink-soft);
}

.mcv-fin-std__val {
	margin: auto 0 0;
	padding-top: var(--mcv-s3);
	border-top: 1px solid var(--mcv-line);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--mcv-bronze-deep);
}

/* --------------------------------------------------
   28.6 Nota despre reproducerea culorii
   -------------------------------------------------- */

.mcv-sec--nota-culoare { background: var(--mcv-surface); }

.mcv-fin-nota {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--mcv-s6) var(--mcv-s5);
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-left: 3px solid var(--mcv-bronze);
	border-radius: var(--mcv-r-card);
}

.mcv-fin-nota__titlu {
	margin: var(--mcv-s2) 0 var(--mcv-s3);
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.18;
	color: var(--mcv-ink);
	text-wrap: balance;
}

.mcv-fin-nota p {
	margin: 0 0 var(--mcv-s2);
	font-size: 16px;
	line-height: 1.7;
	color: var(--mcv-ink-soft);
}

.mcv-fin-nota__cta { margin-top: var(--mcv-s4) !important; }

/* --------------------------------------------------
   28.7 Cele doua coloane (anodizare, bicolor)
   -------------------------------------------------- */

.mcv-fin-doua {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--mcv-s3);
	max-width: 1180px;
	margin: 0 auto;
}

.mcv-fin-col {
	padding: var(--mcv-s4);
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
}

.mcv-fin-col .mcv-cz-eticheta { margin-top: 0; }
.mcv-fin-col .mcv-cz-lista li { font-size: 14px; }

/* --------------------------------------------------
   28.8 Sub 1200px, 900px si 620px
   -------------------------------------------------- */

@media (max-width: 1199px) {
	.mcv-pal__grila { grid-template-columns: repeat(4, 1fr); }
	.mcv-fin-mare__cap { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--mcv-s4); }
}

@media (max-width: 899px) {
	.mcv-fin-mare { padding: var(--mcv-s4) var(--mcv-s3); }
	.mcv-fin-mare__cap { grid-template-columns: 1fr; }
	.mcv-fin-mare__media { position: static; min-height: 0; }
	.mcv-fin-mare__media img { position: static; height: auto; aspect-ratio: 16 / 9; }
	.mcv-fin-mare__palete { margin-top: var(--mcv-s4); padding-top: var(--mcv-s4); }
	.mcv-pal__grila { grid-template-columns: repeat(3, 1fr); gap: var(--mcv-s2); }
	.mcv-pal__fila { padding: 9px 14px; font-size: 13px; }
	.mcv-fin-doua { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
	.mcv-fin-std { grid-template-columns: 1fr; }
	.mcv-pal__grila { grid-template-columns: repeat(2, 1fr); }
	.mcv-pal__cap { margin-bottom: var(--mcv-s3); }
	.mcv-pal__file { gap: 8px; }
	.mcv-pal__fila { padding: 9px 12px; font-size: 12px; }
	.mcv-pal__cod { font-size: 12px; }
	.mcv-fin-chips li { padding: 7px 12px; font-size: 12px; }
	.mcv-fin-nota { padding: var(--mcv-s5) var(--mcv-s3); }
}

@media (prefers-reduced-motion: reduce) {
	.mcv-pal__fila,
	.mcv-pal__item figure,
	.mcv-fin-std__item { transition: none; }
	.mcv-pal__fila:hover,
	.mcv-pal__item figure:hover,
	.mcv-fin-std__item:hover { transform: none; }
}

/* ==================================================
   29. CATALOGUL DE OTEL JANSEN
   Blocul unui sistem: randerul de colt si desenul de sectiune sus, apoi
   denumirea, fisa tehnica si butoanele. Aceleasi carduri ca la CORTIZO,
   deci grila si tipografia vin din sectiunile 23-24.
   ================================================== */

/* --- 29.1 Zona vizuala: render + sectiune --- */

.mcv-ot-vizual {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: var(--mcv-s4);
	align-items: start;
	margin-bottom: var(--mcv-s5);
}

.mcv-ot-vizual--singur { grid-template-columns: 300px; }

.mcv-ot-vizual figure {
	margin: 0;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
}

.mcv-ot-vizual img {
	display: block;
	width: 100%;
	height: auto;
}

.mcv-ot-vizual figcaption {
	margin-top: 12px;
	font-size: 11px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
}

/* Randerul are fundal propriu si nu trebuie sa se intinda pe toata coloana. */
.mcv-ot-vizual__render img { max-width: 260px; margin: 0 auto; }

/* --- 29.2 Corpul blocului --- */

.mcv-ot-bloc__tagline {
	margin: 0 0 var(--mcv-s3);
	text-align: left;
}

.mcv-ot-bloc .mcv-cz-varianta__nume { margin-bottom: 4px; }

.mcv-ot-doua {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mcv-s4) var(--mcv-s5);
	margin-top: var(--mcv-s4);
}

.mcv-ot-doua > div > .mcv-cz-eticheta { margin-top: 0; }

/* --- 29.3 Butoanele: fisa tehnica si pagina producatorului --- */

.mcv-ot-actiuni {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mcv-s3) var(--mcv-s4);
	margin-top: var(--mcv-s5);
	padding-top: var(--mcv-s4);
	border-top: 1px solid var(--mcv-line);
}

.mcv-ot-doc {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	line-height: 1.3;
	text-align: left;
}

.mcv-ot-doc__meta {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: none;
	color: var(--mcv-ink-mute);
}

.mcv-ot-extern {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mcv-bronze-deep);
	text-decoration: none;
	border-bottom: 1px solid var(--mcv-bronze);
	padding-bottom: 2px;
	transition: color var(--mcv-ease), border-color var(--mcv-ease);
}

.mcv-ot-extern:hover { color: var(--mcv-ink); border-bottom-color: var(--mcv-ink); }

.mcv-ot-extern__sageata { font-size: 15px; line-height: 1; }

/* --- 29.4 Documentele secundare --- */

.mcv-ot-docs {
	list-style: none;
	margin: var(--mcv-s3) 0 0;
	padding: 0;
	display: grid;
	gap: 7px;
}

.mcv-ot-docs li { font-size: 14px; }

.mcv-ot-docs a {
	color: var(--mcv-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--mcv-line-2);
	transition: color var(--mcv-ease), border-color var(--mcv-ease);
}

.mcv-ot-docs a:hover { color: var(--mcv-bronze-deep); border-bottom-color: var(--mcv-bronze); }

.mcv-ot-docs__meta {
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
}

/* --- 29.5 Text doar pentru cititoarele de ecran --- */

.mcv-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- 29.6 Ecrane mici --- */

@media (max-width: 1099px) {
	.mcv-ot-vizual { grid-template-columns: 260px 1fr; gap: var(--mcv-s3); }
}

@media (max-width: 899px) {

	.mcv-ot-vizual,
	.mcv-ot-vizual--singur {
		grid-template-columns: 1fr;
		gap: var(--mcv-s3);
	}

	.mcv-ot-vizual__render img { max-width: 220px; }

	.mcv-ot-doua { grid-template-columns: 1fr; gap: var(--mcv-s3); }
}

@media (max-width: 620px) {

	.mcv-ot-vizual figure { padding: 12px; }

	.mcv-ot-actiuni { flex-direction: column; align-items: stretch; }

	.mcv-ot-actiuni .mcv-ot-doc { text-align: center; align-items: center; }

	.mcv-ot-extern { justify-content: center; }
}


/* ==================================================
   30. OTEL: MATERIALE SI FINISAJE
   Paleta este o redare proprie in CSS, nu o fotografie a producatorului.
   ================================================== */

.mcv-ot-materiale {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--mcv-s3);
	max-width: 1180px;
	margin: 0 auto var(--mcv-s6);
}

.mcv-ot-material {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
}

.mcv-ot-material__mostra {
	display: block;
	height: 132px;
	width: 100%;
}

.mcv-ot-material__corp { padding: var(--mcv-s4); }

.mcv-ot-material__nume {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .01em;
}

.mcv-ot-material__corp p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--mcv-ink-mute);
}

.mcv-ot-eticheta--centru {
	max-width: 1180px;
	margin: 0 auto var(--mcv-s3);
	text-align: center;
}

@media (max-width: 899px) {
	.mcv-ot-materiale { grid-template-columns: 1fr; }
	.mcv-ot-material__mostra { height: 104px; }
}


/* ==================================================
   31. CULORILE TAMPLARIEI DIN PVC
   Fiecare decor RENOLIT are mostra publicata de producator, asa ca
   paletarul se citeste vizual, nu doar ca lista de coduri.
   ================================================== */

.mcv-cpvc { max-width: 1180px; margin: 0 auto; }

.mcv-cpvc__grila {
	list-style: none;
	margin: var(--mcv-s4) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
	gap: var(--mcv-s3);
}

.mcv-cpvc__decor {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 0 14px;
	background: #fff;
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
	overflow: hidden;
}

.mcv-cpvc__mostra {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	margin-bottom: 12px;
	background: var(--mcv-bg-soft, #f4f2ef);
}

.mcv-cpvc__mostra--gol {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: repeating-linear-gradient(45deg, #f1efec 0 8px, #e8e5e1 8px 16px);
}

.mcv-cpvc__nume {
	padding: 0 14px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mcv-ink);
}

.mcv-cpvc__cod {
	padding: 0 14px;
	font-size: 11px;
	letter-spacing: .06em;
	color: var(--mcv-ink-mute);
}

.mcv-cpvc__intro { margin-bottom: var(--mcv-s5); }

.mcv-cpvc__subtitlu {
	max-width: 1180px;
	margin: var(--mcv-s5) auto var(--mcv-s3);
	font-weight: 600;
	color: var(--mcv-ink);
}

/* Numarul de decoruri, pe fila gamei. */
.mcv-pal__cnt {
	display: inline-block;
	min-width: 22px;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .06);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0;
}

@media (max-width: 899px) {
	.mcv-cpvc__grila { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

@media (max-width: 620px) {
	.mcv-cpvc__grila { grid-template-columns: repeat(2, 1fr); gap: var(--mcv-s2, 12px); }
	.mcv-cpvc__nume { font-size: 13px; }
}

/* ==================================================
   32. JANSEN: ACCESORII CU IMAGINE SI PALETAR
   ================================================== */

.mcv-ot-acc__media {
	background: #fff;
	padding: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Aceeasi inaltime peste tot, ca titlurile sa se alinieze pe rand. */
	height: 262px;
	box-sizing: border-box;
	border-bottom: 1px solid var(--mcv-line);
}

.mcv-ot-acc__media img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.mcv-ot-acc__media--semn {
	background:
		repeating-linear-gradient(135deg, #faf9f7 0 10px, #f3f1ee 10px 20px);
	color: #b9b2a6;
}

.mcv-ot-acc__media--semn svg { width: 96px; height: 100px; }

.mcv-ot-paletar {
	max-width: 1180px;
	margin: 0 auto;
	padding: 20px 24px;
	background: #fff;
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
}

.mcv-ot-paletar img { display: block; width: 100%; height: auto; }

.mcv-ot-paletar__nota {
	max-width: 1180px;
	margin: var(--mcv-s3) auto var(--mcv-s6);
}

@media (max-width: 620px) {
	.mcv-ot-acc__media { height: 210px; }
	.mcv-ot-acc__media--semn svg { width: 74px; height: 78px; }
	.mcv-ot-paletar { padding: 14px; }
}


/* ==================================================
   33. KFV: ELEMENTELE DE INCHIDERE
   Fiecare tip de element are imaginea lui oficiala, ca sa se vada
   diferenta dintre bolt si carlig, nu doar sa fie descrisa.
   ================================================== */

.mcv-kfv {
	max-width: 1180px;
	margin: var(--mcv-s5) auto 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--mcv-s4);
}

.mcv-kfv__card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
	overflow: hidden;
}

.mcv-kfv__media {
	margin: 0;
	padding: 0;
	background: #f7f6f4;
}

.mcv-kfv__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 700 / 1040;
	object-fit: contain;
}

.mcv-kfv__body { padding: 18px 20px 22px; }

.mcv-kfv__serie {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mcv-bronze);
}

.mcv-kfv__tip {
	margin: 0 0 10px;
	font-size: 17px;
	line-height: 1.25;
	color: var(--mcv-ink);
}

.mcv-kfv__declar {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--mcv-ink-mute);
}

.mcv-kfv__inseam {
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--mcv-line);
	font-size: 14px;
	line-height: 1.6;
	color: var(--mcv-ink);
}

.mcv-kfv__inseam span {
	display: block;
	margin-bottom: 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
}

@media (max-width: 620px) {
	.mcv-kfv { grid-template-columns: repeat(2, 1fr); gap: var(--mcv-s3); }
	.mcv-kfv__body { padding: 14px 14px 18px; }
	.mcv-kfv__tip { font-size: 15px; }
	.mcv-kfv__declar, .mcv-kfv__inseam { font-size: 13px; }
}


/* ==================================================
   34. SISTEMELE DIN LEMN
   Blocurile sunt concepute sa arate complet si fara imagine: desenele de
   sectiune vin de la client si se adauga ulterior, in .mcv-ls-vizual.
   ================================================== */

.mcv-ls-lista {
	max-width: 1180px;
	margin: var(--mcv-s5) auto 0;
	display: grid;
	gap: var(--mcv-s4);
}

.mcv-ls-bloc {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mcv-s4);
}

/* Cand primim desenul, blocul trece pe doua coloane. */
.mcv-ls-bloc:has(.mcv-ls-vizual) { grid-template-columns: 420px 1fr; }

.mcv-ls-vizual {
	margin: 0;
	padding: 0;
	align-self: start;
	background: #fff;
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
	overflow: hidden;
}

.mcv-ls-vizual img { display: block; width: 100%; height: auto; }

.mcv-ls-bloc__tagline { margin-bottom: var(--mcv-s3); }

/* --- Pachetele de geam --- */

.mcv-ls-vitraje {
	max-width: 1180px;
	margin: var(--mcv-s5) auto 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--mcv-s3);
}

.mcv-ls-vitraj {
	padding: 22px 24px 24px;
	background: #fff;
	border: 1px solid var(--mcv-line);
	border-top: 3px solid var(--mcv-bronze);
	border-radius: var(--mcv-r-card);
}

.mcv-ls-vitraj__ug {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--mcv-ink);
}

.mcv-ls-vitraj__nume {
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.3;
	color: var(--mcv-ink);
}

.mcv-ls-vitraj__alc {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--mcv-ink-mute);
}

.mcv-ls-vitraj__unde {
	margin: 0;
	padding-top: 10px;
	border-top: 1px solid var(--mcv-line);
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--mcv-ink-mute);
}

/* --- Scarile de clasificare --- */

.mcv-ls-clase {
	max-width: 1180px;
	margin: var(--mcv-s5) auto 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--mcv-s4);
}

.mcv-ls-clasa {
	padding: 24px 26px 20px;
	background: #fff;
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
}

.mcv-ls-clasa__nume {
	margin: 2px 0 10px;
	font-size: 19px;
	line-height: 1.25;
	color: var(--mcv-ink);
}

/* Cardurile de clase sunt inguste: eticheta trece deasupra valorii. */
.mcv-ls-clasa .mcv-fisa-tehnica > div {
	display: block;
	padding: 12px 0;
}

.mcv-ls-clasa .mcv-fisa-tehnica dt {
	margin-bottom: 4px;
	width: auto;
	max-width: none;
	flex: none;
}

.mcv-ls-clasa .mcv-fisa-tehnica dd {
	margin: 0;
	width: auto;
	max-width: none;
	flex: none;
	text-align: left;
	font-size: 14px;
	line-height: 1.6;
}
.mcv-ls-clasa__text {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--mcv-ink-mute);
}

/* --- Placarea din aluminiu ---

   Clasa s-a numit .mcv-ls-cora pana la trecerea de la GUTMANN CORA la GUTMANN
   MIRA. Atunci markup-ul a fost redenumit in .mcv-ls-mira, dar regulile de aici
   au ramas pe numele vechi: containerul a ramas fara max-width, fara margin
   auto si fara grila, asa ca cele doua coloane s-au intins pe toata latimea
   ferestrei, in timp ce tabelele dinauntru si-au pastrat propria centrare. */

.mcv-ls-mira {
	max-width: 1180px;
	margin: var(--mcv-s5) auto 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
	gap: var(--mcv-s5);
}

.mcv-ls-mira__col > .mcv-cz-eticheta:not(:first-child) { margin-top: var(--mcv-s4); }

.mcv-ls-nota { margin-top: var(--mcv-s5); }

@media (max-width: 1099px) {
	.mcv-ls-bloc:has(.mcv-ls-vizual) { grid-template-columns: 320px 1fr; }
}

@media (max-width: 899px) {
	.mcv-ls-bloc, .mcv-ls-bloc:has(.mcv-ls-vizual) { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
	.mcv-ls-vitraje { grid-template-columns: 1fr; }
	.mcv-ls-clase { grid-template-columns: 1fr; }
	.mcv-ls-clasa { padding: 18px 18px 14px; }
	.mcv-ls-vitraj { padding: 18px 18px 20px; }
}


/* ==================================================
   35. SOLUTII DIN STICLA
   Sectiunile prin pachet sunt desenate in CSS, nu preluate ca imagine.
   ================================================== */

/* --- Selectorul dupa nevoie --- */

.mcv-st-nevoi {
	max-width: 1180px;
	margin: var(--mcv-s5) auto 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--mcv-s3);
}

.mcv-st-nevoie {
	position: relative;
	display: block;
	padding: 24px 46px 24px 26px;
	background: #fff;
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease;
}

.mcv-st-nevoie:hover, .mcv-st-nevoie:focus-visible {
	border-color: var(--mcv-bronze);
	transform: translateY(-2px);
}

.mcv-st-nevoie__nume {
	display: block;
	margin-bottom: 8px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mcv-ink);
}

.mcv-st-nevoie__text {
	display: block;
	font-size: 14px;
	line-height: 1.6;
	color: var(--mcv-ink-mute);
}

.mcv-st-nevoie__sageata {
	position: absolute;
	top: 24px;
	right: 22px;
	font-size: 18px;
	color: var(--mcv-bronze);
}

/* --- Sectiunea desenata prin pachet --- */

.mcv-st-diag { text-align: center; }

.mcv-st-diag__scena {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 0;
	height: 132px;
	padding: 0 4px;
}

.mcv-st-diag__ext, .mcv-st-diag__int {
	align-self: center;
	padding: 0 10px;
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
	white-space: nowrap;
}

.mcv-st-diag__foaie {
	position: relative;
	flex: 0 0 auto;
	background: linear-gradient(90deg, #cfe0e6 0%, #eaf3f6 45%, #cfe0e6 100%);
	border: 1px solid #9fb9c2;
	border-radius: 2px;
}

/* Foaia laminata are folia desenata la mijloc. */
.mcv-st-diag__foaie.is-laminat::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: var(--mcv-bronze);
}

.mcv-st-diag__cam::after {
	content: attr(data-eticheta);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(180deg);
	writing-mode: vertical-rl;
	font-size: 10px;
	letter-spacing: .06em;
	line-height: 1;
	color: var(--mcv-ink-mute);
	white-space: nowrap;
}

.mcv-st-diag__cam {
	position: relative;
	flex: 0 0 auto;
	background: repeating-linear-gradient(90deg, #f7f9fa 0 3px, #eef2f4 3px 6px);
	border-top: 1px solid var(--mcv-line);
	border-bottom: 1px solid var(--mcv-line);
}

.mcv-st-diag__cod {
	margin: 18px 0 0;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--mcv-ink);
}

.mcv-st-diag__sub {
	margin: 4px 0 0;
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--mcv-bronze);
}

.mcv-st-diag__nota {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--mcv-ink-mute);
}

/* --- Decodorul de notatie --- */

.mcv-st-decodor {
	max-width: 1180px;
	margin: var(--mcv-s5) auto 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--mcv-s3);
}

.mcv-st-exemplu {
	padding: 26px 22px 24px;
	background: #fff;
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
}

.mcv-st-exemplu__text {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--mcv-ink-mute);
}

.mcv-st-legenda {
	max-width: 1180px;
	margin: var(--mcv-s4) auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--mcv-s4);
}

.mcv-st-legenda p {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 12.5px;
	color: var(--mcv-ink-mute);
}

.mcv-st-legenda span {
	display: inline-block;
	width: 16px;
	height: 18px;
	border-radius: 2px;
}

.mcv-st-legenda__foaie {
	background: linear-gradient(90deg, #cfe0e6, #eaf3f6, #cfe0e6);
	border: 1px solid #9fb9c2;
}

.mcv-st-legenda__lam {
	background: linear-gradient(90deg, #cfe0e6 0 6px, var(--mcv-bronze) 6px 9px, #cfe0e6 9px 100%);
	border: 1px solid #9fb9c2;
}

.mcv-st-legenda__cam {
	background: repeating-linear-gradient(90deg, #f7f9fa 0 3px, #eef2f4 3px 6px);
	border: 1px solid var(--mcv-line);
}

/* --- Parametrii --- */

.mcv-st-param {
	max-width: 1180px;
	margin: var(--mcv-s5) auto var(--mcv-s6);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--mcv-s3);
}

.mcv-st-param__card {
	padding: 24px 26px 26px;
	background: #fff;
	border: 1px solid var(--mcv-line);
	border-left: 3px solid var(--mcv-bronze);
	border-radius: var(--mcv-r-card);
}

.mcv-st-param__cod {
	margin: 0 0 6px;
	font-size: 28px;
	font-weight: 600;
	line-height: 1;
	color: var(--mcv-ink);
}

.mcv-st-param__cod span {
	margin-left: 8px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--mcv-ink-mute);
}

.mcv-st-param__nume {
	margin: 0 0 10px;
	font-size: 16px;
	line-height: 1.3;
	color: var(--mcv-ink);
}

.mcv-st-param__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--mcv-ink-mute);
}

/* --- Familiile --- */

.mcv-st-familii {
	max-width: 1180px;
	margin: var(--mcv-s5) auto 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--mcv-s3);
}

.mcv-st-familie {
	display: flex;
	flex-direction: column;
	padding: 24px 26px 22px;
	background: #fff;
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
}

.mcv-st-familie__grup {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mcv-bronze);
}

.mcv-st-familie__nume {
	margin: 0 0 10px;
	font-size: 18px;
	line-height: 1.25;
	color: var(--mcv-ink);
}

.mcv-st-familie__text {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--mcv-ink-mute);
}

.mcv-st-familie__cand {
	margin: auto 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--mcv-line);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--mcv-ink);
}

.mcv-st-familie__cand span {
	display: block;
	margin-bottom: 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
}

/* --- Retetele --- */

.mcv-st-retete {
	max-width: 1180px;
	margin: var(--mcv-s5) auto 0;
	display: grid;
	gap: var(--mcv-s4);
}

.mcv-st-reteta {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: var(--mcv-s5);
	align-items: start;
	padding: 30px 32px;
	background: #fff;
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
	scroll-margin-top: 110px;
}

.mcv-st-reteta__vizual {
	padding: 18px 10px 14px;
	background: #fafbfb;
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
}

.mcv-st-reteta__rol {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mcv-bronze);
}

.mcv-st-reteta__nume {
	margin: 0 0 12px;
	font-size: 22px;
	line-height: 1.2;
	color: var(--mcv-ink);
}

.mcv-st-reteta__text {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--mcv-ink-mute);
}

.mcv-st-reteta__atentie {
	margin: 18px 0 0;
	padding: 14px 16px;
	background: var(--mcv-bg-soft, #f6f5f3);
	border-radius: var(--mcv-r-card);
	font-size: 14px;
	line-height: 1.6;
	color: var(--mcv-ink);
}

.mcv-st-reteta__atentie span {
	display: block;
	margin-bottom: 3px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
}

/* --- Valoarea masurata, in interiorul unei retete --- */

.mcv-st-reteta__masurat {
	margin: 18px 0 0;
	padding: 14px 16px;
	background: var(--mcv-bronze-tint);
	border-radius: var(--mcv-r-card);
}

.mcv-st-reteta__masurat-cap {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mcv-bronze-deep);
}

.mcv-st-reteta__masurat-cod {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13.5px;
	color: var(--mcv-ink);
}

.mcv-st-reteta__masurat-val {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--mcv-ink);
}

/* --- Sursa de sub un tabel --- */

.mcv-st-tabel__sursa {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--mcv-ink-mute);
}

/* --- Caseta de precizare --- */

.mcv-st-precizare {
	max-width: 820px;
	margin: var(--mcv-s5) auto 0;
	padding: 28px 32px 24px;
	background: #fff;
	border: 1px solid var(--mcv-line);
	border-left: 3px solid var(--mcv-bronze);
	border-radius: var(--mcv-r-card);
}

.mcv-st-precizare__titlu {
	margin: 0 0 14px;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--mcv-ink);
}

.mcv-st-precizare p {
	margin: 0 0 12px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--mcv-ink-soft);
}

.mcv-st-precizare p:last-child { margin-bottom: 0; }

.mcv-st-precizare strong { color: var(--mcv-ink); }

.mcv-st-precizare__final {
	margin-top: 16px !important;
	padding-top: 14px;
	border-top: 1px solid var(--mcv-line);
}

/* --- Perechea izolare termica / control solar --- */

.mcv-st-doua {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
	max-width: 1180px;
	margin: var(--mcv-s5) auto 0;
}

.mcv-st-doua__card {
	padding: 26px 28px 22px;
	background: #fff;
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
}

.mcv-st-doua__card > .mcv-st-doua__cod {
	margin: 0 0 10px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	color: var(--mcv-bronze);
}

.mcv-st-doua__nume {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 600;
	color: var(--mcv-ink);
}

.mcv-st-doua__card p {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--mcv-ink-soft);
}

.mcv-st-doua__card > .mcv-st-doua__cheie {
	margin: 14px 0 0 !important;
	padding-top: 12px;
	border-top: 1px solid var(--mcv-line);
}

.mcv-st-doua__card > .mcv-st-doua__cheie strong { color: var(--mcv-bronze-deep); }

@media (max-width: 620px) {

	.mcv-st-precizare { padding: 22px 20px 20px; }
	.mcv-st-doua__card { padding: 22px 20px 20px; }
}

/* --- Tabelele de performante --- */

.mcv-st-tabel {
	max-width: 1180px;
	margin: var(--mcv-s5) auto 0;
}

.mcv-st-tabel__titlu {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mcv-bronze);
}

.mcv-st-tabel__scroll { overflow-x: auto; }

.mcv-st-tabel table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
	overflow: hidden;
}

.mcv-st-tabel th, .mcv-st-tabel td {
	padding: 13px 16px;
	text-align: right;
	font-size: 14px;
	border-bottom: 1px solid var(--mcv-line);
}

.mcv-st-tabel thead th {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
	background: #fafbfb;
}

.mcv-st-tabel th:first-child, .mcv-st-tabel tbody th {
	text-align: left;
	font-weight: 600;
	color: var(--mcv-ink);
}

.mcv-st-tabel tbody tr:last-child th, .mcv-st-tabel tbody tr:last-child td { border-bottom: 0; }

/* --- Aplicatii --- */

.mcv-st-aplicatii {
	max-width: 1180px;
	margin: var(--mcv-s5) auto 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--mcv-s3);
}

.mcv-st-aplicatie {
	display: flex;
	flex-direction: column;
	padding: 24px 26px 22px;
	background: #fff;
	border: 1px solid var(--mcv-line);
	border-top: 3px solid var(--mcv-bronze);
	border-radius: var(--mcv-r-card);
}

.mcv-st-aplicatie__nume {
	margin: 0 0 10px;
	font-size: 18px;
	line-height: 1.25;
	color: var(--mcv-ink);
}

.mcv-st-aplicatie__text {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--mcv-ink-mute);
}

.mcv-st-aplicatie__cere {
	margin: auto 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--mcv-line);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--mcv-ink);
}

.mcv-st-aplicatie__cere span {
	display: block;
	margin-bottom: 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
}

/* --- Productia --- */

.mcv-st-prod {
	max-width: 1180px;
	margin: var(--mcv-s5) auto 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
	gap: var(--mcv-s5);
}

.mcv-st-fisa > div { grid-template-columns: 1fr; }
.mcv-st-fisa dt { margin-bottom: 4px; }

/* --- Standardele --- */

.mcv-st-acord {
	max-width: 900px;
	margin: var(--mcv-s5) auto 0;
	background: #fff;
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
	overflow: hidden;
}

.mcv-st-acord__item { border-bottom: 1px solid var(--mcv-line); }
.mcv-st-acord__item:last-child { border-bottom: 0; }

.mcv-st-acord__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 22px;
	cursor: pointer;
	list-style: none;
}

.mcv-st-acord__item summary::-webkit-details-marker { display: none; }

.mcv-st-acord__item summary::after {
	content: '+';
	font-size: 18px;
	color: var(--mcv-bronze);
}

.mcv-st-acord__item[open] summary::after { content: '\2212'; }

.mcv-st-acord__cod {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--mcv-ink);
}

.mcv-st-acord__item p {
	margin: 0;
	padding: 0 22px 18px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--mcv-ink-mute);
}

@media (max-width: 1099px) {
	.mcv-st-reteta { grid-template-columns: 280px 1fr; gap: var(--mcv-s4); }
}

@media (max-width: 899px) {
	.mcv-st-reteta { grid-template-columns: 1fr; padding: 24px 22px; }
	.mcv-st-prod { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
	.mcv-st-nevoi, .mcv-st-decodor, .mcv-st-param,
	.mcv-st-familii, .mcv-st-aplicatii { grid-template-columns: 1fr; }
	.mcv-st-diag__scena { height: 112px; }
	.mcv-st-param__cod { font-size: 24px; }
	.mcv-st-reteta__nume { font-size: 19px; }
}

/* ==================================================
   37. PVC: CERTIFICARI SI TESTARI
   ================================================== */

.mcv-pvc-cert__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 20px;
	max-width: 1180px;
	margin: var(--mcv-s4) auto var(--mcv-s5);
}

.mcv-pvc-doc {
	display: flex;
	flex-direction: column;
	padding: 26px 28px 22px;
	background: #fff;
	border: 1px solid var(--mcv-line);
	border-top: 3px solid var(--mcv-bronze);
	border-radius: var(--mcv-r-card);
}

.mcv-pvc-doc__tip {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mcv-bronze-deep);
}

.mcv-pvc-doc__nr {
	margin: 0 0 16px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 20px;
	font-weight: 600;
	color: var(--mcv-ink);
}

.mcv-pvc-doc__fisa {
	margin: 0;
	display: grid;
	gap: 10px;
}

.mcv-pvc-doc__fisa > div {
	display: grid;
	grid-template-columns: 116px 1fr;
	gap: 12px;
	align-items: start;
}

.mcv-pvc-doc__fisa dt {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
	line-height: 1.5;
	padding-top: 2px;
}

.mcv-pvc-doc__fisa dd {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--mcv-ink);
}

.mcv-pvc-doc__cta {
	margin: 20px 0 0;
}

@media (max-width: 620px) {

	.mcv-pvc-doc { padding: 22px 20px 20px; }

	.mcv-pvc-doc__fisa > div {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}

/* ==================================================
   38. VERANDE SI PERGOLE BIOCLIMATICE
   ================================================== */

/* Slotul de imagine ramane gol pana cand primeste atasament; cand exista,
   se aseaza in acelasi limbaj ca restul cardurilor. */
.mcv-cat-vizual,
.mcv-cat-fam__media,
.mcv-cat-confort__media {
	margin: 0 0 18px;
}

.mcv-cat-vizual img,
.mcv-cat-fam__media img,
.mcv-cat-confort__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--mcv-r-card);
}

.mcv-cat-vizual figcaption,
.mcv-cat-fam__media figcaption,
.mcv-cat-confort__media figcaption {
	margin-top: 10px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--mcv-ink-mute);
}

/* --- Cele doua familii --- */

.mcv-cat-doua {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 24px;
	max-width: 1180px;
	margin: var(--mcv-s5) auto 0;
}

.mcv-cat-fam {
	display: flex;
	flex-direction: column;
	padding: 30px 32px 26px;
	background: #fff;
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
}

.mcv-cat-fam__nume {
	margin: 0 0 4px;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--mcv-ink);
}

.mcv-cat-fam__sub {
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mcv-bronze);
}

.mcv-cat-fam__corp p {
	margin: 0 0 14px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--mcv-ink-soft);
}

.mcv-cat-fam__corp .mcv-cz-lista {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--mcv-line);
}

/* --- Confort --- */

.mcv-cat-confort {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	max-width: 1180px;
	margin: var(--mcv-s5) auto 0;
}

.mcv-cat-confort__card {
	padding: 26px 28px 22px;
	background: #fff;
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
}

.mcv-cat-confort__nume {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 600;
	color: var(--mcv-ink);
}

.mcv-cat-confort__nume::before {
	content: "";
	display: block;
	width: 26px;
	height: 2px;
	margin-bottom: 12px;
	background: var(--mcv-bronze);
}

.mcv-cat-confort__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--mcv-ink-soft);
}

/* --- Treptele --- */

.mcv-cat-trepte {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	max-width: 1180px;
	margin: var(--mcv-s5) auto 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.mcv-cat-treapta {
	display: flex;
	flex-direction: column;
	padding: 24px 26px 22px;
	background: var(--mcv-bg-soft, #f6f5f3);
	border-radius: var(--mcv-r-card);
}

.mcv-cat-treapta__nr {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-bottom: 16px;
	border: 1px solid var(--mcv-bronze);
	border-radius: 50%;
	font-size: 14px;
	font-weight: 600;
	color: var(--mcv-bronze-deep);
}

.mcv-cat-treapta__nume {
	margin-bottom: 8px;
	font-size: 16.5px;
	font-weight: 600;
	color: var(--mcv-ink);
}

.mcv-cat-treapta__text {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--mcv-ink-soft);
}

@media (max-width: 620px) {

	.mcv-cat-fam { padding: 24px 20px 20px; }
	.mcv-cat-confort__card { padding: 22px 20px 20px; }
	.mcv-cat-treapta { padding: 20px 18px 18px; }
}

/* ==================================================
   39. CLASELE DE REZISTENTA LA EFRACTIE
   ================================================== */

.mcv-rc {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 20px;
	max-width: 1180px;
	margin: var(--mcv-s5) auto 0;
	padding: 0;
	list-style: none;
}

.mcv-rc__card {
	display: flex;
	flex-direction: column;
	padding: 26px 26px 22px;
	background: #fff;
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
}

.mcv-rc__cap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.mcv-rc__cod {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1;
	color: var(--mcv-bronze);
}

.mcv-rc__scara {
	display: inline-flex;
	gap: 4px;
}

.mcv-rc__scara i {
	display: block;
	width: 8px;
	height: 8px;
	border: 1px solid var(--mcv-line-2);
	border-radius: 50%;
}

.mcv-rc__scara i.is-plin {
	background: var(--mcv-bronze);
	border-color: var(--mcv-bronze);
}

.mcv-rc__nume {
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--mcv-line);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--mcv-ink);
}

.mcv-rc__fisa {
	margin: 0;
	display: grid;
	gap: 12px;
}

.mcv-rc__fisa dt {
	margin-bottom: 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
}

.mcv-rc__fisa dd {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--mcv-ink-soft);
}

.mcv-rc__fisa dd strong {
	color: var(--mcv-bronze-deep);
}

.mcv-rc__cand {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--mcv-line);
	font-size: 14px;
	line-height: 1.6;
	color: var(--mcv-ink-soft);
}

.mcv-rc__cand span {
	display: block;
	margin-bottom: 3px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
}

@media (max-width: 620px) {
	.mcv-rc__card { padding: 22px 20px 20px; }
}


/* ==================================================
   40. ACCESORII: CARDURILE SI RANDURILE PE MARCI

   Paginile de accesorii (otel, PVC, lemn) emit clase BEM cu doua
   liniute jos - .mcv-acc__card, .mcv-acc__media, .mcv-acc__body - care
   pana acum nu aveau nicio regula in CSS: cardurile se randau
   nestilizate. Le aducem la acelasi limbaj vizual cu .mcv-acc-card de
   la accesoriile Cortizo, sectiunea 24.

   La manerele din PVC beneficiarul a cerut (septembrie 2026) ca fiecare
   marca sa stea pe randul ei, nu amestecate in aceeasi grila. Grila de
   baza .mcv-acc are trei coloane, deci gama Roto, cu trei modele, intra
   deja pe un singur rand pe desktop. Gamele cu patru produse primesc a
   patra coloana numai de la 1200px in sus, ca sa nu ramana un card
   singur pe al doilea rand. Sub 1200px raman regulile generale de la
   sectiunea 24: doua coloane, apoi una.
   ================================================== */

.mcv-acc__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
	transition: border-color .3s var(--mcv-ease), box-shadow .3s var(--mcv-ease), transform .3s var(--mcv-ease);
}

.mcv-acc__card:hover {
	border-color: var(--mcv-line-2);
	box-shadow: 0 18px 44px rgba(20, 20, 20, .09);
	transform: translateY(-2px);
}

.mcv-acc__media {
	margin: 0;
	background: var(--mcv-surface);
	border-bottom: 1px solid var(--mcv-line);
}

.mcv-acc__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

/* Placa de marca: tine locul fotografiei care lipseste, fara sa afirme
   nimic despre cum arata piesa. */
.mcv-acc__media--placa {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: var(--mcv-surface);
}

.mcv-acc__media--placa span {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mcv-line-2);
}

.mcv-acc__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--mcv-s3) var(--mcv-s3) var(--mcv-s4);
}

.mcv-acc__marca {
	margin: 0 0 6px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mcv-bronze-deep);
}

.mcv-acc__nume {
	margin: 0 0 14px;
	font-family: var(--mcv-font);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	text-wrap: balance;
	color: var(--mcv-ink);
}

.mcv-acc__text {
	margin: 0 0 var(--mcv-s3);
	font-size: 15px;
	line-height: 1.65;
	color: var(--mcv-ink-soft);
}

.mcv-acc__sursa {
	margin: auto 0 0;
	padding-top: var(--mcv-s2);
	border-top: 1px solid var(--mcv-line);
	font-size: 13px;
}

.mcv-acc__sursa a {
	color: var(--mcv-bronze-deep);
	text-decoration: none;
	border-bottom: 1px solid var(--mcv-bronze-ring);
	transition: border-color .3s var(--mcv-ease);
}

.mcv-acc__sursa a:hover { border-color: var(--mcv-bronze); }

/* --------------------------------------------------
   Randurile pe marci
   -------------------------------------------------- */

.mcv-acc__eticheta {
	max-width: 1180px;
	margin: var(--mcv-s5) auto var(--mcv-s3);
	text-align: center;
}

.mcv-acc__tehnologii {
	max-width: 1180px;
	margin: 0 auto;
}

.mcv-acc__nota-marca {
	max-width: 760px;
	margin: var(--mcv-s4) auto 0;
	font-size: 13.5px;
	line-height: 1.6;
	font-style: italic;
	text-align: center;
	color: var(--mcv-ink-mute);
}

@media (min-width: 1200px) {
	.mcv-acc[data-mcv-nr="4"] { grid-template-columns: repeat(4, 1fr); }
	.mcv-acc[data-mcv-nr="2"] { grid-template-columns: repeat(2, 1fr); max-width: 780px; }
	.mcv-acc[data-mcv-nr="1"] { grid-template-columns: 1fr; max-width: 380px; }
}

@media (max-width: 720px) {
	.mcv-acc__body { padding: var(--mcv-s3) var(--mcv-s2) var(--mcv-s3); }
	.mcv-acc__eticheta { margin-top: var(--mcv-s4); }
}

/* ==================================================
   41. LEMN: CARDURI EDITORIALE SI ACCESORII IN PAGINA

   Cerinta beneficiarului (septembrie 2026): fotografiile de produs intra in
   paginile de lemn ca material editorial, nu ca galerie, iar accesoriile se
   prezinta in pagina produsului caruia ii apartin.

   Imaginile de aici NU sunt clicabile: nu au link in markup, iar regula
   pointer-events le scoate si din calea unui eventual lightbox global.
   ================================================== */

.mcv-lv-sec { --mcv-lv-r: var(--mcv-r-card); }

.mcv-lv-media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--mcv-lv-r);
	background: var(--mcv-surface);
}

.mcv-lv-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

.mcv-lv-media--inalt img { aspect-ratio: 3 / 4; }
.mcv-lv-media--portret img { aspect-ratio: 3 / 4; }  /* usile sunt verticale */

/* Plansele de accesorii sunt fotografii de catalog pe fundal deschis:
   se incadreaza intregi, nu se decupeaza. */
.mcv-lv-media--acc img {
	aspect-ratio: 3 / 2;
	object-fit: contain;
	background: var(--mcv-white);
}



/* --------------------------------------------------
   Cardul editorial: fotografie plus text, alaturate
   -------------------------------------------------- */

.mcv-lv-editorial {
	display: grid;
	grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
	gap: var(--mcv-s5);
	align-items: center;
	max-width: 1180px;
	margin: 0 auto;
	padding: var(--mcv-s5);
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-lv-r);
}

.mcv-lv-titlu {
	margin: 10px 0 var(--mcv-s3);
	font-family: var(--mcv-font);
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -.015em;
	text-wrap: balance;
	color: var(--mcv-ink);
}

.mcv-lv-corp p {
	margin: 0 0 var(--mcv-s2);
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--mcv-ink-soft);
}

.mcv-lv-corp p:last-child { margin-bottom: 0; }

/* --------------------------------------------------
   Doua carduri alaturate
   -------------------------------------------------- */

.mcv-lv-duo {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--mcv-s3);
	max-width: 1180px;
	margin: 0 auto;
}

.mcv-lv-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-lv-r);
	transition: border-color .3s var(--mcv-ease), box-shadow .3s var(--mcv-ease), transform .3s var(--mcv-ease);
}

.mcv-lv-card:hover {
	border-color: var(--mcv-line-2);
	box-shadow: 0 18px 44px rgba(20, 20, 20, .09);
	transform: translateY(-2px);
}

.mcv-lv-card .mcv-lv-media { border-radius: 0; }

.mcv-lv-card__corp { padding: var(--mcv-s3) var(--mcv-s3) var(--mcv-s4); }

.mcv-lv-card__titlu {
	margin: 0 0 12px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--mcv-ink);
}

.mcv-lv-card__corp p {
	margin: 0;
	font-size: 15px;
	line-height: 1.68;
	color: var(--mcv-ink-soft);
}

/* --------------------------------------------------
   Feronerie si accesorii
   -------------------------------------------------- */

.mcv-lv-grup {
	max-width: 1180px;
	margin: 0 auto var(--mcv-s6);
}

.mcv-lv-grup:last-of-type { margin-bottom: 0; }

.mcv-lv-grup__titlu {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--mcv-ink);
}

.mcv-lv-grup__text {
	max-width: 780px;
	margin: 0 0 var(--mcv-s4);
	font-size: 15px;
	line-height: 1.7;
	color: var(--mcv-ink-soft);
}

.mcv-lv-acc {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--mcv-s3);
}

.mcv-lv-acc__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-lv-r);
	transition: border-color .3s var(--mcv-ease), box-shadow .3s var(--mcv-ease), transform .3s var(--mcv-ease);
}

.mcv-lv-acc__card:hover {
	border-color: var(--mcv-line-2);
	box-shadow: 0 14px 34px rgba(20, 20, 20, .08);
	transform: translateY(-2px);
}

.mcv-lv-acc__card .mcv-lv-media { border-radius: 0; border-bottom: 1px solid var(--mcv-line); }

.mcv-lv-acc__corp { padding: var(--mcv-s3) var(--mcv-s3) var(--mcv-s4); }

.mcv-lv-acc__nume {
	margin: 0 0 10px;
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.32;
	color: var(--mcv-ink);
}

.mcv-lv-acc__corp p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--mcv-ink-soft);
}

.mcv-lv-grup__sursa {
	margin: var(--mcv-s3) 0 0;
	font-size: 13px;
}

.mcv-lv-grup__sursa a {
	color: var(--mcv-bronze-deep);
	text-decoration: none;
	border-bottom: 1px solid var(--mcv-bronze-ring);
}

/* Lista de coduri, la obloane */
.mcv-lv-coduri {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 var(--mcv-s5);
	margin: var(--mcv-s4) 0 0;
	padding: 0;
	list-style: none;
}

.mcv-lv-coduri li {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: var(--mcv-s2);
	padding: 12px 0;
	border-bottom: 1px solid var(--mcv-line);
}

.mcv-lv-coduri__cod {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mcv-bronze-deep);
}

.mcv-lv-coduri__text {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--mcv-ink-soft);
}

/* --------------------------------------------------
   Solutie realizata pe proiect (patrimoniu)
   -------------------------------------------------- */

.mcv-lv-proiect {
	max-width: 860px;
	margin: 0 auto;
	padding: var(--mcv-s5);
	text-align: center;
	background: var(--mcv-surface);
	border-radius: var(--mcv-r-card);
}

.mcv-lv-proiect__text {
	margin: var(--mcv-s3) 0 0;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--mcv-ink-soft);
}

.mcv-lv-proiect__et { margin: var(--mcv-s5) 0 var(--mcv-s2); }

.mcv-lv-analiza {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mcv-lv-analiza li {
	padding: 9px 16px;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--mcv-ink-soft);
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: 999px;
}

.mcv-lv-proiect__cta { margin: var(--mcv-s5) 0 0; }

/* --------------------------------------------------
   Sub 1200px si sub 900px
   -------------------------------------------------- */

/* Grila de accesorii se echilibreaza dupa numarul de carduri din grup, ca sa
   nu ramana un card singur pe randul al doilea. Patru carduri stau 2x2, nu
   3+1: textul are nevoie de latime, iar randul ramane uniform. */
@media (min-width: 1200px) {
	.mcv-lv-acc[data-mcv-nr="1"] { grid-template-columns: 1fr; max-width: 380px; }
	.mcv-lv-acc[data-mcv-nr="2"],
	.mcv-lv-acc[data-mcv-nr="4"] { grid-template-columns: repeat(2, 1fr); }
	.mcv-lv-acc[data-mcv-nr="2"] { max-width: 780px; }
}

@media (max-width: 1199px) {
	.mcv-lv-acc { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 899px) {
	.mcv-lv-editorial {
		grid-template-columns: 1fr;
		gap: var(--mcv-s4);
		padding: var(--mcv-s3);
	}
	.mcv-lv-media--inalt img { aspect-ratio: 4 / 3; }
	.mcv-lv-duo { grid-template-columns: 1fr; }
	.mcv-lv-coduri { grid-template-columns: 1fr; }
	.mcv-lv-proiect { padding: var(--mcv-s4) var(--mcv-s3); }
}

@media (max-width: 720px) {
	.mcv-lv-acc { grid-template-columns: 1fr; }
	.mcv-lv-coduri li { grid-template-columns: 1fr; gap: 4px; }
}

/* ==================================================
   42. LEMN: FISA VIZUALA DE PRODUS

   Fotografia de prezentare si datele tehnice, intr-o singura sectiune: doua
   coloane pe desktop, una sub alta pe mobil. Nu este un tabel tehnic, ci o
   prezentare de produs - de aceea fotografia are aceeasi greutate vizuala ca
   datele, iar valorile stau aerisit, cu accent bronz discret pe eticheta grupei.

   Fotografia nu este clicabila: fara link in markup, plus pointer-events.
   ================================================== */

.mcv-lv-fisa {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--mcv-s5);
	align-items: start;
	max-width: 1180px;
	margin: 0 auto;
}

.mcv-lv-media--fisa {
	position: sticky;
	top: 110px;
	border-radius: var(--mcv-r-card);
	background: var(--mcv-surface);
}

.mcv-lv-media--fisa img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.mcv-lv-fisa__date {
	padding: var(--mcv-s5);
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
}

.mcv-lv-fisa__grup + .mcv-lv-fisa__grup {
	margin-top: var(--mcv-s5);
	padding-top: var(--mcv-s4);
	border-top: 1px solid var(--mcv-line);
}

.mcv-lv-fisa__titlu {
	margin: 0 0 var(--mcv-s2);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mcv-bronze-deep);
}

/* Perechi eticheta / valoare */
.mcv-lv-fisa__lista {
	margin: 0;
	padding: 0;
}

.mcv-lv-fisa__lista > div {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px var(--mcv-s2);
	padding: 11px 0;
	border-bottom: 1px solid var(--mcv-line);
}

.mcv-lv-fisa__lista > div:last-child { border-bottom: 0; padding-bottom: 0; }

.mcv-lv-fisa__lista dt {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--mcv-ink-mute);
}

.mcv-lv-fisa__lista dd {
	margin: 0;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.5;
	text-align: right;
	color: var(--mcv-ink);
}

/* Puncte simple, fara valoare */
.mcv-lv-fisa__puncte {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mcv-lv-fisa__puncte li {
	position: relative;
	padding: 10px 0 10px 20px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--mcv-ink-soft);
	border-bottom: 1px solid var(--mcv-line);
}

.mcv-lv-fisa__puncte li:last-child { border-bottom: 0; padding-bottom: 0; }

.mcv-lv-fisa__puncte li::before {
	content: "";
	position: absolute;
	top: 19px;
	left: 0;
	width: 9px;
	height: 1px;
	background: var(--mcv-bronze);
}

.mcv-lv-fisa__nota {
	margin: var(--mcv-s4) 0 0;
	padding-top: var(--mcv-s3);
	border-top: 1px solid var(--mcv-line);
	font-size: 13px;
	line-height: 1.6;
	font-style: italic;
	color: var(--mcv-ink-mute);
}

@media (max-width: 899px) {
	.mcv-lv-fisa {
		grid-template-columns: 1fr;
		gap: var(--mcv-s3);
	}
	.mcv-lv-media--fisa { position: static; }
	.mcv-lv-media--fisa img { aspect-ratio: 4 / 3; }
	.mcv-lv-fisa__date { padding: var(--mcv-s3); }
}

/* ==================================================
   43. LEMN: CEREREA DE SECTIUNE TEHNICA

   Bloc discret, separat de CTA-ul final de oferta: text la stanga, buton
   fantoma la dreapta. Nu concureaza vizual cu "Solicita oferta", pentru ca
   este o alta intrebare, nu acelasi pas.
   ================================================== */

.mcv-lv-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mcv-s3) var(--mcv-s5);
	max-width: 1180px;
	margin: 0 auto;
	padding: var(--mcv-s4) var(--mcv-s5);
	background: var(--mcv-surface);
	border-radius: var(--mcv-r-card);
}

.mcv-lv-cta__text { flex: 1 1 380px; }

.mcv-lv-cta__titlu {
	margin: 8px 0 10px;
	font-family: var(--mcv-font);
	font-size: clamp(20px, 1.9vw, 25px);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.012em;
	color: var(--mcv-ink);
}

.mcv-lv-cta__text p:last-child {
	margin: 0;
	max-width: 620px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--mcv-ink-soft);
}

.mcv-lv-cta__buton {
	flex: 0 0 auto;
	margin: 0;
}

@media (max-width: 720px) {
	.mcv-lv-cta {
		padding: var(--mcv-s3);
		text-align: left;
	}
	.mcv-lv-cta__buton { width: 100%; }
	.mcv-lv-cta__buton .mcv-btn { display: block; text-align: center; }
}

/* Intro-ul formularului, cand se cere documentatie tehnica */
.mcv-form-intro {
	max-width: 640px;
	margin: 0 0 var(--mcv-s3);
	font-size: 15px;
	line-height: 1.65;
	color: var(--mcv-ink-soft);
}

.mcv-form-intro strong { color: var(--mcv-ink); }

/* ==================================================
   44. LEMN: LATIMEA BLOCURILOR SI LIGHTBOX-UL DE FERONERIE

   CAUZA REALA a sectiunii inguste (raportata 19.09.2026): containerul
   .mcv-lv-grup era la 1180px si centrat corect, dar regulile pe data-mcv-nr
   puneau peste el un max-width de 780px (doua carduri) si de 380px (un card),
   fara margin auto. Grila ramanea deci lipita la stanga, iar cardurile ieseau
   la ~330px pe un ecran de 1920px. Nu era un plafon mostenit de la .mcv-sec
   (acela nu are max-width) si nici de la sablon.

   Reparat la nivelul containerului si al grilei, nu pe card:
   - blocurile din paginile de lemn trec la 1280px, in intervalul cerut;
   - grila de accesorii are doua coloane egale care umplu containerul, la orice
     numar de carduri; regulile pe data-mcv-nr au fost eliminate.
   ================================================== */

.mcv-lv-grup,
.mcv-lv-editorial,
.mcv-lv-duo,
.mcv-lv-fisa,
.mcv-lv-cta,
.mcv-lv-coduri,
.mcv-lv-tehnologii { max-width: 1280px; }

.mcv-lv-acc {
	grid-template-columns: repeat(2, 1fr);
	max-width: none;
}

/* Anuleaza plafoanele pe numar de carduri: ele produceau exact defectul. */
.mcv-lv-acc[data-mcv-nr="1"],
.mcv-lv-acc[data-mcv-nr="2"],
.mcv-lv-acc[data-mcv-nr="4"] {
	grid-template-columns: repeat(2, 1fr);
	max-width: none;
}

/* Cu cardul la ~620px, plansele se vad mult mai bine. Raportul ramane 3:2 si
   se incadreaza intreg, deci nu se taie niciun cod MCV. */
.mcv-lv-media--acc img { aspect-ratio: 3 / 2; object-fit: contain; }

@media (max-width: 899px) {
	.mcv-lv-acc,
	.mcv-lv-acc[data-mcv-nr="1"],
	.mcv-lv-acc[data-mcv-nr="2"],
	.mcv-lv-acc[data-mcv-nr="4"] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
	.mcv-lv-acc,
	.mcv-lv-acc[data-mcv-nr="1"],
	.mcv-lv-acc[data-mcv-nr="2"],
	.mcv-lv-acc[data-mcv-nr="4"] { grid-template-columns: 1fr; }
}

/* --------------------------------------------------
   Lightbox pentru plansele de feronerie
   -------------------------------------------------- */

.mcv-lv-media--zoom { cursor: zoom-in; }

.mcv-lv-media--zoom img {
	/* imaginile de prezentare au pointer-events: none; aici trebuie sa primeasca
	   click, deci il reactivam punctual */
	pointer-events: auto;
}

.mcv-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 48px);
	background: rgba(20, 20, 20, .92);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s var(--mcv-ease), visibility .25s var(--mcv-ease);
}

.mcv-lb.is-deschis { opacity: 1; visibility: visible; }

.mcv-lb__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 10px;
	background: var(--mcv-white);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
	transform: scale(.98);
	transition: transform .25s var(--mcv-ease);
}

.mcv-lb.is-deschis .mcv-lb__img { transform: scale(1); }

.mcv-lb__inchide {
	position: absolute;
	top: clamp(10px, 2vw, 24px);
	right: clamp(10px, 2vw, 24px);
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	line-height: 1;
	color: var(--mcv-white);
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 50%;
	cursor: pointer;
	transition: background .2s var(--mcv-ease);
}

.mcv-lb__inchide:hover { background: rgba(255, 255, 255, .24); }

.mcv-lb__titlu {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(10px, 2vw, 22px);
	padding: 0 60px;
	font-size: 13.5px;
	line-height: 1.5;
	text-align: center;
	color: rgba(255, 255, 255, .82);
}

@media (max-width: 720px) {
	.mcv-lb { padding: 10px; }
	.mcv-lb__img { border-radius: 6px; }
	.mcv-lb__titlu { bottom: 6px; padding: 0 16px; font-size: 12.5px; }
}

/* ==================================================
   45. LEMN: GRUPUL CU UN SINGUR CARD DE FERONERIE

   Dupa reparatia de la punctul 44 mai ramanea un caz: grupurile cu un singur
   produs (de exemplu „Balamale decorative") lasau cardul pe jumatate de latime,
   in coloana din stanga, cu jumatatea dreapta goala -- adica exact aspectul de
   coloana ingusta pierduta in pagina.

   Rezolvat tot la nivel de grila: cu un singur card, grila trece pe o coloana,
   iar cardul se desfasoara pe orizontala -- plansa in stanga, textul in dreapta.
   Ierarhia si raportul imaginii raman neschimbate.
   ================================================== */

.mcv-lv-acc[data-mcv-nr="1"] { grid-template-columns: 1fr; }

@media (min-width: 900px) {

	.mcv-lv-acc[data-mcv-nr="1"] .mcv-lv-acc__card {
		display: grid;
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		align-items: center;
	}

	.mcv-lv-acc[data-mcv-nr="1"] .mcv-lv-acc__card .mcv-lv-media {
		border-bottom: 0;
		border-right: 1px solid var(--mcv-line);
	}

	.mcv-lv-acc[data-mcv-nr="1"] .mcv-lv-acc__corp {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: var(--mcv-s4);
	}
}

/* ==================================================
   46. PERGOLE BIOCLIMATICE: GALERIA LUCRARII SI DETALIILE TEHNICE

   Blocul „Pergole bioclimatice premium" de pe pagina de verande si pergole.
   O imagine mare in stanga si trei detalii in dreapta, toate marite la click
   prin acelasi lightbox ca plansele de feronerie (data-mcv-zoom).
   ================================================== */

.mcv-zoomabil { cursor: zoom-in; }

.mcv-perg-galerie {
	display: grid;
	/* Doua coloane egale. Fotografiile sunt de formate diferite (doua peisaj,
	   una portret): un cadru comun 4:3 le aseaza fara sa taie subiectul, ceea
	   ce un cadru inalt pentru prima imagine nu reusea. */
	grid-template-columns: repeat(2, 1fr);
	gap: var(--mcv-s3);
	max-width: 1280px;
	margin: 0 auto;
}

.mcv-perg-poza {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
	transition: box-shadow .3s var(--mcv-ease), transform .3s var(--mcv-ease);
}

.mcv-perg-poza:hover,
.mcv-perg-poza:focus-visible {
	box-shadow: 0 18px 44px rgba(20, 20, 20, .14);
	transform: translateY(-2px);
}

.mcv-perg-poza img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

/* Prima fotografie este luata de jos si are mult cer deasupra pergolei. */
.mcv-perg-poza--mare img { object-position: center 46%; }

/* Fotografia portret cu iluminatul: subiectul este in jumatatea de sus. */
.mcv-perg-galerie .mcv-perg-poza:nth-child(3) img { object-position: center 38%; }

/* Fotografiile raman curate: nu exista legenda peste imagine. */

/* --------------------------------------------------
   Detaliile tehnice
   -------------------------------------------------- */

.mcv-perg-tehnice {
	max-width: 1280px;
	margin: var(--mcv-s5) auto 0;
	padding: var(--mcv-s4);
	background: var(--mcv-cream, #F7F5F1);
	border-radius: var(--mcv-r-card);
}

.mcv-perg-tehnice__titlu {
	margin: 0 0 var(--mcv-s3);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--mcv-ink);
}

.mcv-perg-lista {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 0;
	margin: 0;
}

.mcv-perg-lista dt,
.mcv-perg-lista dd {
	margin: 0;
	padding: 14px 0;
	border-top: 1px solid var(--mcv-line);
	font-size: 14.5px;
	line-height: 1.6;
}

.mcv-perg-lista dt {
	padding-right: var(--mcv-s3);
	font-weight: 600;
	color: var(--mcv-ink);
}

.mcv-perg-lista dd { color: var(--mcv-ink-2, #4A4A4A); }

.mcv-perg-tehnice .mcv-cz-nota { margin-top: var(--mcv-s3); }

@media (max-width: 1099px) {
	.mcv-perg-lista { grid-template-columns: 170px minmax(0, 1fr); }
}

@media (max-width: 899px) {

	.mcv-perg-lista { grid-template-columns: 1fr; }

	.mcv-perg-lista dt { padding-bottom: 0; }

	.mcv-perg-lista dd { padding-top: 4px; border-top: 0; }
}

@media (max-width: 599px) {

	.mcv-perg-galerie { grid-template-columns: 1fr; }
}

/* ==================================================
   47. LEMN: CARDURILE DUO DIN ZONA TEHNICA

   Perechile de fotografii de pe IV68 (fereastra si usa) si de pe Obloane
   (oblon plin si oblon cu lamele). Doua carduri egale pe desktop, unul sub
   altul pe mobil, cu acelasi cadru si aceeasi inaltime de imagine in pereche.
   ================================================== */

/* Formatul peisaj, pentru fotografiile aproape patrate de la obloane. */
.mcv-lv-media--peisaj img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

/* Datele tehnice de sub text, in cardul duo. */
.mcv-lv-card__date {
	display: grid;
	grid-template-columns: minmax(0, 46%) minmax(0, 54%);
	margin: var(--mcv-s3) 0 0;
	border-top: 1px solid var(--mcv-line);
}

.mcv-lv-card__date dt,
.mcv-lv-card__date dd {
	margin: 0;
	padding: 10px 0;
	font-size: 13.5px;
	line-height: 1.55;
	border-bottom: 1px solid var(--mcv-line);
}

.mcv-lv-card__date dt {
	padding-right: var(--mcv-s2);
	font-weight: 600;
	color: var(--mcv-ink);
}

.mcv-lv-card__date dd { color: var(--mcv-ink-2, #4A4A4A); }

/* Nota comuna de sub perechea de carduri. */
.mcv-lv-nota {
	max-width: 1280px;
	margin: var(--mcv-s4) auto 0;
}

@media (max-width: 899px) {

	.mcv-lv-card__date { grid-template-columns: 1fr; }

	.mcv-lv-card__date dt {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.mcv-lv-card__date dd { padding-top: 2px; }
}

/* ==================================================
   48. PERGOLE: GRILA DOTARILOR

   Lista de dotari a ramas la patru pozitii, confirmate de beneficiar. Pe
   grila implicita de trei coloane a componentei .mcv-tiles, a patra cadea
   singura pe randul doi. Aici, si numai aici, trecem pe doua coloane.
   ================================================== */

@media (min-width: 900px) {
	#echipamente .mcv-tiles { grid-template-columns: repeat(2, 1fr); }
}


/* ==================================================
   49. GUTMANN MIRA: FOTOGRAFIA SISTEMULUI

   Sta intre titlul sectiunii si grila de date tehnice, in aceeasi axa cu ea.
   Nu are aspect-ratio impus: pastreaza proportiile fotografiei si nu taie
   nimic din fereastra. Latimea este plafonata sub cea a containerului de
   1180 px, ca inaltimea naturala sa ramana rezonabila.

   Este element frate cu .mcv-ls-mira, nu parinte: grila isi pastreaza
   max-width-ul si centrarea proprii.
   ================================================== */

.mcv-ls-mira-foto {
	max-width: 900px;
	margin: var(--mcv-s5) auto 0;
	overflow: hidden;
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
	transition: box-shadow .3s var(--mcv-ease), transform .3s var(--mcv-ease);
}

.mcv-ls-mira-foto:hover,
.mcv-ls-mira-foto:focus-visible {
	box-shadow: 0 18px 44px rgba(20, 20, 20, .14);
	transform: translateY(-2px);
}

.mcv-ls-mira-foto img {
	display: block;
	width: 100%;
	height: auto;
}

/* Fotografia si grila raman lipite ca o singura unitate vizuala: cand exista
   fotografie, grila porneste cu un spatiu mai mic. */
.mcv-ls-mira-foto + .mcv-ls-mira { margin-top: var(--mcv-s4); }


/* ==================================================
   50. UMBRIRE SI PROTECTIE EXTERIOARA: GRILA DE PATRU CARDURI

   Componenta .mcv-cz-grila--cat este pe trei coloane si este folosita si de
   alte pagini, deci nu se atinge. Aici avem patru categorii, care pe trei
   coloane ar lasa un card singur pe randul doi.

   Cardurile au descrieri de trei-patru randuri, asa ca patru coloane la
   1180 px ar da coloane de ~280 px, prea inguste pentru textul lor. Asezarea
   2x2 umple containerul fara goluri si pastreaza lizibilitatea.
   ================================================== */

@media (min-width: 900px) {
	.mcv-cz-grila--patru { grid-template-columns: repeat(2, 1fr); }
}


/* ==================================================
   51. UMBRIRE EXTERIOARA: CARDURI DE SISTEM

   Cele patru sisteme proprii folosesc exact componenta cardurilor CORTIZO
   (.mcv-cz-card). Aici sunt doar cele doua completari pe care componenta nu
   le avea: subtitlul de sub denumire si locul pregatit pentru fotografie.
   ================================================== */

/* Sectiunea continua familia de carduri de deasupra, deci nu isi mai reia
   spatiul de sus ca o sectiune noua. */
.mcv-cz-sec--continuare { padding-top: 0; }

/* Denumirea comerciala are nevoie si de numele descriptiv: „Raffstore" nu
   spune de la sine ca este o jaluzea exterioara din aluminiu. */
.mcv-cz-card__sub {
	display: block;
	margin: 2px 0 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mcv-bronze);
}

/*
   Locul pregatit pentru fotografie.

   Cat timp nu avem fotografie de produs pentru un sistem, cardul nu primeste
   nici sigla unui producator, nici o imagine imprumutata de la alt produs.
   Ramane un camp neutru, cu aceeasi inaltime ca imaginile celorlalte carduri,
   ca grila sa nu se strice.
*/
.mcv-cz-card__gol {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	background:
		repeating-linear-gradient(
			135deg,
			var(--mcv-surface) 0 10px,
			#ffffff 10px 20px
		);
}

.mcv-cz-card__gol-text {
	padding: 7px 14px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
	background: rgba(255, 255, 255, .92);
	border: 1px solid var(--mcv-line);
	border-radius: 999px;
}


/* ==================================================
   52. ACCESORII PVC: SUBGRUPE, LOC DE FOTOGRAFIE, LEGATURA EXTERNA

   Adaugate odata cu categoria „Balamale pentru usi" si cu reducerea gamei
   HOPPE la patru serii (19.09.2026).
   ================================================== */

/* Textul care insoteste titlul unei subgrupe (aplicate / cilindrice). */
.mcv-acc__subtext {
	max-width: 780px;
	margin: 0 auto var(--mcv-s4);
	font-size: 14.5px;
	line-height: 1.7;
	text-align: center;
	color: var(--mcv-ink-mute);
}

/* Intre doua subgrupe ale aceleiasi sectiuni. */
.mcv-acc + .mcv-acc__eticheta { margin-top: var(--mcv-s6); }

/*
   Locul pregatit pentru fotografie.

   Inlocuieste placa cu numele marcii, pe care beneficiarul a cerut sa nu o mai
   folosim in locul fotografiei. Pastreaza inaltimea cadrului, ca randul de
   carduri sa ramana aliniat.
*/
.mcv-acc__media--gol {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	border-bottom: 1px solid var(--mcv-line);
	background:
		repeating-linear-gradient(
			135deg,
			var(--mcv-surface) 0 10px,
			#ffffff 10px 20px
		);
}

.mcv-acc__media-eticheta {
	padding: 7px 14px;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mcv-ink-mute);
	background: rgba(255, 255, 255, .92);
	border: 1px solid var(--mcv-line);
	border-radius: 999px;
}

/* Butonul catre catalogul producatorului. */
.mcv-acc__extern {
	margin: var(--mcv-s5) 0 0;
	text-align: center;
}


/* ==================================================
   53. ACCESORII PVC: MODELUL, IN PLAN SECUND

   Pe cardurile de balamale titlul este solutia, nu produsul. Denumirea exacta
   a modelului identificat sta sub titlu, discret; cardurile fara model
   identificat nu au aceasta linie deloc.
   ================================================== */

.mcv-acc__model {
	margin: -2px 0 10px;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--mcv-bronze);
}

/* Eticheta randului al doilea dintr-o subgrupa. */
.mcv-acc__eticheta--mica { margin-top: var(--mcv-s5); }


/* ==================================================
   54. ACCESORII PVC: RANDUL DE FINISAJE

   Aceeasi balama in mai multe finisaje nu inseamna mai multe produse, deci nu
   primeste carduri, ci un rand de mostre sub cardul produsului.
   ================================================== */

.mcv-acc-culori {
	display: grid;
	/* Sase mostre: trei pe rand, doua randuri egale. */
	grid-template-columns: repeat(3, 1fr);
	gap: var(--mcv-s3);
	max-width: 840px;
	margin: 0 auto;
}

.mcv-acc-culoare {
	margin: 0;
	/* Marginea de jos era mai mare decat cea de sus fiindca sub numele culorii
	   statea si codul de finisaj (F1, RAL 9016 si asa mai departe). Codul nu se
	   mai afiseaza, deci spatiul acela ramanea gol si cardul parea greu la
	   baza. Acum toate cele patru margini sunt egale. */
	padding: var(--mcv-s2);
	text-align: center;
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
	transition: border-color .28s var(--mcv-ease), box-shadow .28s var(--mcv-ease);
}

.mcv-acc-culoare:hover {
	border-color: var(--mcv-bronze);
	box-shadow: var(--mcv-shadow-lift);
}

.mcv-acc-culoare img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: var(--mcv-s2);
}

.mcv-acc-culoare figcaption { display: block; }

.mcv-acc-culoare__nume {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--mcv-ink);
}

.mcv-acc-culoare__cod {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--mcv-ink-mute);
}

@media (max-width: 720px) {
	.mcv-acc-culori { grid-template-columns: repeat(2, 1fr); }
}


/* ==================================================
   55. ACCESORII LEMN: BALAMALE PENTRU USI

   Sectiunea are doua familii cu numar diferit de carduri — doua balamale 3D si
   patru cilindrice. Pe grila implicita de trei coloane, prima familie lasa un
   gol in dreapta, iar a doua se rupe 3 + 1. Doua coloane egale le aseaza pe
   amandoua in randuri pline, cu aceeasi latime de card in toata sectiunea.
   ================================================== */

@media (min-width: 721px) {

	#balamale-usi .mcv-acc,
	#balamale-usi .mcv-acc[data-mcv-nr="2"],
	#balamale-usi .mcv-acc[data-mcv-nr="4"] {
		grid-template-columns: repeat(2, 1fr);
		max-width: 1180px;
	}
}


/* ==================================================
   56. ACCESORII PVC: LATIMEA CARDURILOR DE BALAMA

   In sectiunea de balamale, un card singur si o pereche de carduri trebuie sa
   aiba aceeasi latime, ca randurile sa se citeasca la fel. Fara regula asta,
   .mcv-acc[data-mcv-nr="1"] ramane la 380 px, iar perechea la 780 px.
   ================================================== */

@media (min-width: 721px) {

	#balamale-usi .mcv-acc[data-mcv-nr="1"] {
		grid-template-columns: 1fr;
		max-width: 580px;
	}

	#balamale-usi .mcv-acc[data-mcv-nr="2"] {
		grid-template-columns: repeat(2, 1fr);
		max-width: 1180px;
	}
}


/* ==================================================
   57. FINISAJELE UNEI SERII DE MANERE

   Acelasi maner, in fiecare finisaj: carduri verticale albe, identice ca
   dimensiune, cu imaginea centrata si denumirea sub ea. Grila umple randul cu
   cate carduri incap, ca sa mearga si la patru finisaje, si la sase.
   ================================================== */

/* Patru coloane: o gama de patru finisaje umple un rand, una de opt umple
   doua randuri egale. Cu auto-fit ieseau 5 + 3, adica un rand rupt. */
.mcv-acc-culori--auto {
	grid-template-columns: repeat(4, 1fr);
	max-width: 1180px;
}

/* Patru coloane se pastreaza si pe tableta: la 3 coloane, gama de patru
   finisaje s-ar rupe 3 + 1. Sub 720 px trec pe doua. */

/* Cinci finisaje pe patru coloane lasau al cincilea singur pe randul doi.
   Cinci coloane le tin pe toate pe un rand; cardurile raman destul de late,
   pentru ca mostrele sunt inalte si inguste. Numai peste 720 px: pe telefon
   raman doua coloane, ca la restul gamelor. */
@media (min-width: 721px) {

	.mcv-acc-culori--auto[data-mcv-nr="5"] {
		grid-template-columns: repeat(5, 1fr);
	}

	/* Sase finisaje pe patru coloane se rupeau 4 + 2. Trei coloane le aseaza
	   in doua randuri pline si lasa fotografia mai mare, ceea ce ajuta la
	   seturile de maner, unde conteaza nuanta. */
	.mcv-acc-culori--auto[data-mcv-nr="6"] {
		grid-template-columns: repeat(3, 1fr);
		max-width: 940px;
	}
}

/* Loc pregatit pentru fotografia unui finisaj. Fara sigla si fara imagine
   recolorata: pastreaza doar cadrul, ca randul sa ramana aliniat. */
.mcv-acc-culoare__gol {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin-bottom: var(--mcv-s2);
	background:
		repeating-linear-gradient(
			135deg,
			var(--mcv-surface) 0 10px,
			#ffffff 10px 20px
		);
	border-radius: 10px;
}

.mcv-acc-culoare__gol span {
	padding: 6px 12px;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-align: center;
	color: var(--mcv-ink-mute);
	background: rgba(255, 255, 255, .92);
	border: 1px solid var(--mcv-line);
	border-radius: 999px;
}

@media (max-width: 720px) {
	.mcv-acc-culori--auto { grid-template-columns: repeat(2, 1fr); }
}


/* ==================================================
   58. GAMA DE CULORI A UNUI ACCESORIU

   Cateva culori, fiecare cu bulina ei. Nu este o paleta de finisaje cu
   fotografii, ci codurile RAL din fisa producatorului redate pe ecran, deci
   bulinele stau mici si poarta codul sub ele.
   ================================================== */

.mcv-acc-bule {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
	gap: var(--mcv-s2);
	margin: 0 0 var(--mcv-s2);
	padding: 0;
	list-style: none;
}

.mcv-acc-bula {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	text-align: center;
}

.mcv-acc-bula__pastila {
	width: 26px;
	height: 26px;
	border-radius: 999px;
	border: 1px solid var(--mcv-line);
	/* Un inel interior alb ca bulinele inchise sa nu para lipite de card. */
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}

.mcv-acc-bula__nume {
	font-size: 11.5px;
	line-height: 1.25;
	color: var(--mcv-ink);
}

.mcv-acc-bula__ral {
	font-size: 10.5px;
	line-height: 1.2;
	color: var(--mcv-ink-mute);
}

.mcv-acc-bule__nota {
	margin: 0 0 var(--mcv-s2);
	font-size: 11px;
	line-height: 1.45;
	font-style: italic;
	color: var(--mcv-ink-mute);
}


/* ==================================================
   59. PALETARE DE CULORI SI FINISAJE

   Aceeasi componenta pe umbrire si pe usile de garaj. Pastila coloratа se
   deseneaza numai pentru culorile cu cod RAL; decorurile cu desen de lemn
   primesc o pastila neutra, hasurata, pentru ca nuanta lor nu poate fi
   redata corect pe ecran.
   ================================================== */

.mcv-pal__eticheta {
	/* Eticheta paletarului sta peste un bloc centrat, deci se centreaza si ea;
	   aceeasi clasa este aliniata la stanga in restul site-ului. */
	margin-top: var(--mcv-s4);
	justify-content: center;
	text-align: center;
}

.mcv-pal__text {
	max-width: 760px;
	margin: 0 auto var(--mcv-s3);
	text-align: center;
	color: var(--mcv-ink-mute);
}

.mcv-pal {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: var(--mcv-s3) var(--mcv-s2);
	max-width: 1180px;
	margin: 0 auto var(--mcv-s3);
	padding: 0;
	list-style: none;
}

.mcv-pal__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.mcv-pal__chip {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	/* Conturul este singurul lucru care face vizibil un alb pe fundal alb,
	   deci este ceva mai inchis decat linia obisnuita a site-ului. */
	border: 1px solid rgba(26, 26, 24, .22);
	/* Inel interior alb: pastilele foarte inchise nu se lipesc de fundal. */
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

/* Mostra reala a finisajului, decupata din documentatia furnizorului. */
.mcv-pal__chip--mostra {
	background-size: cover;
	background-position: center;
	/* Conturul de pe .mcv-pal__chip ramane: si mostrele foarte deschise
	   trebuie sa se vada pe fundal alb. */
}

/* Decor fara cod de culoare si fara mostra. Hasura spune „nu este o nuanta reala”. */
.mcv-pal__chip--decor {
	background:
		repeating-linear-gradient(
			135deg,
			var(--mcv-surface) 0 6px,
			#ffffff 6px 12px
		);
}

.mcv-pal__nume {
	font-size: 12.5px;
	line-height: 1.3;
	color: var(--mcv-ink);
}

.mcv-pal__cod {
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: .02em;
	color: var(--mcv-ink-mute);
}

.mcv-pal__nota {
	max-width: 760px;
	margin: 0 auto var(--mcv-s5);
	font-size: 12px;
	line-height: 1.5;
	font-style: italic;
	text-align: center;
	color: var(--mcv-ink-mute);
}

/* --------------------------------------------------
   „Orice culoare RAL” — blocul de finisaj la comanda
   -------------------------------------------------- */

.mcv-pal-ral {
	display: flex;
	max-width: 1180px;
	margin: 0 auto var(--mcv-s5);
	overflow: hidden;
	background: #ffffff;
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
}

/* Banda de culoare: o trecere peste cateva RAL-uri reale din paletar. */
.mcv-pal-ral__banda {
	flex: 0 0 14px;
	background: linear-gradient(
		180deg,
		#f1f0ea 0%, #e6d2b5 16%, #442f29 32%, #4a3526 48%,
		#114232 64%, #0e294b 78%, #383e42 90%, #0a0a0a 100%
	);
}

.mcv-pal-ral__corp {
	padding: var(--mcv-s4) var(--mcv-s5);
}

/* Blocul este aliniat la stanga, deci si eticheta lui: in restul paginii
   eyebrow-ul sta centrat, sub titlul de sectiune. */
.mcv-pal-ral__corp .mcv-eyebrow {
	justify-content: flex-start;
	text-align: left;
}

.mcv-pal-ral__titlu {
	margin: 6px 0 var(--mcv-s2);
	font-family: var(--mcv-font);
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--mcv-ink);
}

.mcv-pal-ral__text {
	max-width: 780px;
	margin: 0;
}

.mcv-pal-ral__nota {
	max-width: 780px;
	margin: var(--mcv-s2) 0 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--mcv-ink-mute);
}

@media (max-width: 720px) {

	.mcv-pal {
		grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
		gap: var(--mcv-s3) var(--mcv-s1);
	}

	/* Sub 720 px pastila ramane destul de mare cat sa se poata compara
	   doua nuante alaturate, dar nu mai ocupa jumatate de ecran. */
	.mcv-pal__chip {
		width: 38px;
		height: 38px;
	}

	.mcv-pal__nume { font-size: 12px; }

	.mcv-pal-ral__corp { padding: var(--mcv-s4); }
}


/* ==================================================
   60. DESENUL TEHNIC, LANGA SPECIFICATII
   Pe cardurile sistemelor de umbrire a intrat fotografia produsului montat.
   Desenul tehnic al sistemului nu s-a pierdut: sta aici, intr-o coloana
   proprie, lipit de datele cu care trebuie citit impreuna. Pe desktop cele
   doua coloane merg in paralel si desenul ramane la vedere cat timp se
   deruleaza tabelele; sub 768 px trec una sub alta, desenul primul.
   ================================================== */

.mcv-cz-tehnic {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: var(--mcv-s5);
	align-items: start;
	margin-top: var(--mcv-s4);
}

/* Fara asta, tabelele din coloana de date impun latimea lor intregii pagini. */
.mcv-cz-tehnic__date { min-width: 0; }

.mcv-cz-tehnic__media {
	position: sticky;
	top: 96px;
	margin: 0;
	padding: var(--mcv-s4);
	background: #ffffff;
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
}

.mcv-cz-tehnic__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.mcv-cz-tehnic__legenda {
	margin: var(--mcv-s3) 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	text-align: center;
	color: var(--mcv-ink-mute);
}

/* Primul element al coloanei de date nu are nevoie de spatiu deasupra:
   alinierea de sus cu desenul este ce face blocul sa arate asezat. */
.mcv-cz-tehnic__date > *:first-child { margin-top: 0; }

@media (max-width: 1024px) {

	.mcv-cz-tehnic {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--mcv-s4);
	}

	/* Pe o singura coloana desenul nu mai are de ce sa ramana lipit de
	   marginea de sus: sta deasupra datelor, centrat. */
	.mcv-cz-tehnic__media {
		position: static;
		max-width: 360px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 767px) {

	.mcv-cz-tehnic__media { max-width: 320px; }
}


/* ==================================================
   61. CATALOGUL DE MODELE DE USA
   Imaginile sunt elementul principal: cardul nu are alt continut, pentru ca
   modelul si codul lui sunt deja in fotografie. Raportul este cel al
   fotografiilor (681 x 1536), deci nimic nu se deformeaza si nimic nu se
   decupeaza la afisare.

   Numarul de coloane scade odata cu latimea, dar nu mai jos decat pastreaza
   codul lizibil: patru pe ecran lat, trei pe laptop, doua pe tableta si unul
   singur pe telefon.
   ================================================== */

.mcv-usi-catalog {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--mcv-s3);
	max-width: 1400px;
	margin: 0 auto;
}

.mcv-usa-model {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--mcv-white);
	border: 1px solid var(--mcv-line);
	border-radius: var(--mcv-r-card);
	cursor: zoom-in;
	transition: border-color .4s var(--mcv-ease), box-shadow .4s var(--mcv-ease), transform .4s var(--mcv-ease);
}

.mcv-usa-model img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 681 / 1536;
	object-fit: cover;
	transition: transform .6s var(--mcv-ease);
}

/* Discret: chenarul se inchide putin, cardul urca un pixel, fotografia
   creste aproape imperceptibil. Fara umbre mari si fara salturi. */
.mcv-usa-model:hover,
.mcv-usa-model:focus-visible {
	border-color: var(--mcv-line-2);
	box-shadow: 0 14px 34px rgba(20, 20, 20, .09);
	transform: translateY(-2px);
}

.mcv-usa-model:hover img,
.mcv-usa-model:focus-visible img { transform: scale(1.015); }

.mcv-usa-model:focus-visible {
	outline: 2px solid var(--mcv-bronze);
	outline-offset: 3px;
}

.mcv-usi-nota {
	max-width: 780px;
	margin: var(--mcv-s5) auto 0;
	font-size: 12.5px;
	line-height: 1.6;
	text-align: center;
	color: var(--mcv-ink-mute);
}

@media (max-width: 1200px) {

	.mcv-usi-catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {

	.mcv-usi-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {

	.mcv-usi-catalog {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--mcv-s4);
	}
}

/* ==================================================
   ETICHETELE DE GRUP DINAINTEA UNEI GRILE DE DALE

   Componenta este `mcv_ue_actionari()` din inc/umbrire-extins.php — grupele de
   acționări de pe rulouri, raffstore, zipscreen și grilaje — plus aceleași
   etichete de pe pagina de uși de garaj.

   Cauza dezalinierii: eticheta ocupa toată lățimea secțiunii, care are numai
   24 px de padding lateral, în timp ce grila `.mcv-tiles` de sub ea se
   centrează pe 1180 px. La 1440 px asta însemna titlul la 24 px de margine și
   primul card la 123 px; la 1920 px, diferența ajungea la circa 370 px.

   Le punem aceeași lățime maximă și aceleași margini automate ca grilei, deci
   titlul, linia și primul card pornesc de pe aceeași axă. Grila nu se atinge:
   rândurile incomplete umplu coloanele de la stânga, cum face orice grilă CSS.
   ================================================== */

.mcv-cz-eticheta.mcv-ue-act__eticheta {
	max-width: 1180px;
	margin: var(--mcv-s6) auto 0;
	padding-bottom: 10px;
	font-size: 12.5px;
	letter-spacing: .14em;
	border-bottom: 1px solid var(--mcv-bronze-ring);
}

/* Primul grup vine imediat după capul secțiunii, care își are deja distanța. */
.mcv-sec__head + .mcv-cz-eticheta.mcv-ue-act__eticheta { margin-top: 0; }

/* Titlu → carduri. Linia stă la 10 px sub text, cardurile la 24 px sub linie. */
.mcv-ue-act__eticheta + .mcv-tiles,
.mcv-ue-act__eticheta + .mcv-pal__text { margin-top: var(--mcv-s3); }

@media (max-width: 620px) {
	.mcv-cz-eticheta.mcv-ue-act__eticheta {
		margin-top: var(--mcv-s5);
		font-size: 12px;
	}
}