/*
 * Melegim – Elementor (spec §4): variabilele kit-ului și tipografia widgeturilor de pe homepage.
 * Kit-ul pune clasa .elementor-kit-<id> pe body; [class*=] o prinde indiferent de ID.
 * CSS-ul generat de Elementor pentru fiecare element are selectori (0,4,0)
 * (.elementor-762 .elementor-element.elementor-element-xxxx .elementor-heading-title);
 * selectorii de aici încep cu `body` ca să câștige fără !important.
 */

body[class*="elementor-kit-"] {
	--e-global-typography-primary-font-family: "Gilda Display";
	--e-global-typography-primary-font-weight: 400;
	--e-global-typography-secondary-font-family: "Gilda Display";
	--e-global-typography-secondary-font-weight: 400;
	--e-global-typography-text-font-family: "DM Sans";
	--e-global-typography-text-font-weight: 400;
	--e-global-typography-accent-font-family: "DM Sans";
	--e-global-typography-accent-font-weight: 600;
	--e-global-color-primary: var(--m-ink);
	--e-global-color-secondary: var(--m-ink-2);
	--e-global-color-text: var(--m-ink-2);
	--e-global-color-accent: var(--m-accent);
}

/* Titlurile H1/H2: Gilda Display, line-height corect, fără spațiere negativă */
body .elementor .elementor-element.elementor-widget-heading :is(h1, h2).elementor-heading-title {
	font-family: var(--m-font-serif);
	font-weight: 400;
	line-height: var(--m-leading-heading);
	letter-spacing: normal;
}

/* Textul widgeturilor: DM Sans, minimum 17px */
body .elementor .elementor-element.elementor-widget-text-editor,
body .elementor .elementor-element.elementor-widget-image-box .elementor-image-box-description,
body .elementor .elementor-element.elementor-widget-icon-list .elementor-icon-list-text,
body .elementor .elementor-element.elementor-widget-image-box .elementor-image-box-title,
body .elementor .elementor-element.elementor-widget-heading p.elementor-heading-title {
	font-family: var(--m-font-sans);
	font-size: var(--m-text);
	line-height: var(--m-leading);
	letter-spacing: normal;
}

/* Butoanele Elementor: ca butonul principal din base.css */
body .elementor .elementor-element.elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--m-button);
	padding: 1.2rem 2.4rem;
	border: 1px solid var(--m-ink);
	border-radius: var(--m-radius-s);
	background-color: var(--m-ink);
	color: var(--m-ivory);
	fill: var(--m-ivory);
	font-family: var(--m-font-sans);
	font-size: var(--m-text);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
}

body .elementor .elementor-element.elementor-widget-button .elementor-button:hover {
	background-color: var(--m-ink-2);
	color: var(--m-ivory);
}

/* ==========================================================================
   Homepage (spec §5.2): cardul hero, banda de avantaje, grila „Colecții"
   ========================================================================== */

body .elementor .melegim-hero-card .elementor-widget-wrap {
	gap: 1.6rem;
}

body .elementor .melegim-hero-card .elementor-widget-text-editor .melegim-eyebrow {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--m-muted);
}

body .elementor .elementor-element.melegim-hero-card .elementor-widget-heading h1.elementor-heading-title {
	font-size: clamp(4rem, 3rem + 2vw, 5.4rem);
	line-height: 1.1;
	text-transform: none;
}

body .elementor .melegim-hero-card .elementor-widget-button {
	display: inline-block;
	width: auto;
	margin-right: 1.2rem;
}

body .elementor .elementor-element.melegim-hero-button--secondary .elementor-button {
	background-color: transparent;
	color: var(--m-ink);
}

body .elementor .elementor-element.melegim-hero-button--secondary .elementor-button:hover {
	background-color: var(--m-ink);
	color: var(--m-ivory);
}

@media (max-width: 921px) {
	/* Pagina are header transparent pe mobil (meta „theme-transparent-header-meta"): cardul începe sub el. */
	.ast-theme-transparent-header .elementor .elementor-element.melegim-hero-card {
		padding-top: 13rem;
	}

	body .elementor .melegim-hero-card .elementor-widget-button {
		display: block;
		margin-right: 0;
	}

	body .elementor .melegim-hero-card .elementor-widget-button .elementor-button {
		width: 100%;
	}
}

body .elementor .melegim-benefits {
	border-bottom: 1px solid var(--m-line);
}

body .elementor .melegim-benefits .elementor-icon-box-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 1.4rem;
	text-align: left;
}

body .elementor .melegim-benefits .elementor-icon {
	font-size: 2.6rem;
	color: var(--m-ink);
	fill: var(--m-ink);
}

body .elementor .elementor-element.elementor-widget-icon-box .elementor-icon-box-title {
	margin: 0;
	font-family: var(--m-font-sans);
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--m-ink);
}

body .elementor .elementor-element.elementor-widget-icon-box .elementor-icon-box-description {
	margin: 0;
	font-family: var(--m-font-sans);
	font-size: 1.6rem;
	color: var(--m-muted);
}

body .elementor .melegim-collections .elementor-image-box-img {
	width: 100% !important; /* Elementor scrie lățimea imaginii inline în CSS-ul generat al widgetului */
	margin-bottom: 1.4rem;
	overflow: hidden;
	border-radius: var(--m-radius-m);
	background-color: var(--m-stone);
}

body .elementor .melegim-collections .elementor-image-box-img img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

body .elementor .elementor-element.melegim-collections .elementor-image-box-title {
	margin: 0;
	font-family: var(--m-font-sans);
	font-size: 1.8rem;
	font-weight: 600;
	text-align: left;
	color: var(--m-ink);
}

/* ==========================================================================
   Homepage-ul existent din producție (hero „WELCOME TO MELEĞIM", păstrat la decizia proprietarului din 2026-10-24,
   în locul lui E1–E4 din LANSARE.md). Elementele se țintesc după ID-ul Elementor (`data-id`); pe local, unde
   scripts/elementor-homepage.php a înlocuit hero-ul, regulile lui nu prind nimic.
   ========================================================================== */

/* „Cele mai populare:" (E8–E11): se repeta sub fiecare titlu de secțiune. */
body.home .elementor .elementor-element:is(.elementor-element-0b22fb0, .elementor-element-e402fff, .elementor-element-3eb54e4, .elementor-element-6460b2c) {
	display: none;
}

/* Butonul din hero, „VEZI COLECȚIILE NOI!": deschis la culoare, ca să nu concureze cu titlul. */
body.home .elementor .elementor-element.elementor-element-54f1bda .elementor-button {
	min-height: 4.4rem;
	padding: 1rem 2.2rem;
	border-color: transparent;
	background-color: rgba(250, 249, 245, 0.88);
	background-image: none; /* Elementor pune peste culoare un gradient gri închis */
	color: var(--m-ink);
	fill: var(--m-ink);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	box-shadow: none;
}

body.home .elementor .elementor-element.elementor-element-54f1bda .elementor-button:hover {
	background-color: var(--m-ivory);
	color: var(--m-ink);
}

/*
 * Hero: butonul stă la 12px deasupra tăbliei albastre a patului, centrat pe ea, iar titlul la 24px deasupra butonului,
 * pe orice ecran. Elementor îi muta cu deplasări fixe în px dintr-o coloană din dreapta, deci pe mobil și tabletă
 * butonul intra peste tăblie, iar pe ecranele late ieșea spre dreapta. Fundalul (slideshow, 2400×1600) e „cover",
 * centrat pe secțiune, cu scara s = max(lățime / 2400, înălțime / 1600); în imagine, tăblia începe la y = 718 și are
 * mijlocul la x = 1190 (centrul imaginii: 1200 × 800). Față de secțiune: marginea de sus a tăbliei e la
 * 50% − 82·s din înălțime, adică la max(3,4167vw, 5,125%) deasupra mijlocului, iar mijlocul ei la 50% − 10·s din
 * lățime (≈ 0,4167vw). Titlul și butonul se poziționează absolut față de secțiune, cu aceleași valori.
 */
body.home .elementor .elementor-element.elementor-element-22ac6742 > .elementor-container,
body.home .elementor .elementor-element.elementor-element-22ac6742 .elementor-column,
body.home .elementor .elementor-element.elementor-element-22ac6742 .elementor-widget-wrap {
	position: static;
}

body.home .elementor .elementor-element.elementor-element-22ac6742 .elementor-element:is(.elementor-element-54f1bda, .elementor-element-f46ac7b) {
	--mlg-hero-headboard: max(3.4167vw, 5.125%);
	position: absolute;
	left: calc(50% - 0.4167vw);
	z-index: 1;
	width: max-content;
	max-width: calc(100% - 4rem);
	margin: 0;
	transform: translateX(-50%);
}

body.home .elementor .elementor-element.elementor-element-22ac6742 .elementor-element:is(.elementor-element-54f1bda, .elementor-element-f46ac7b) > .elementor-widget-container {
	--e-transform-translateX: 0px;
	--e-transform-translateY: 0px;
}

body.home .elementor .elementor-element.elementor-element-22ac6742 .elementor-element.elementor-element-54f1bda {
	bottom: calc(50% + var(--mlg-hero-headboard) + 1.2rem);
}

/* Titlul: deasupra butonului (4,4rem) cu 2,4rem. */
body.home .elementor .elementor-element.elementor-element-22ac6742 .elementor-element.elementor-element-f46ac7b {
	bottom: calc(50% + var(--mlg-hero-headboard) + 1.2rem + 4.4rem + 2.4rem);
	text-align: center;
}

@media (max-width: 767px) {

	/* Titlurile secțiunilor editoriale (Imperial, Bumbac organic, Homewear, Mulberry, Our Story): mai mici, echilibrate. */
	body.home .elementor .elementor-element.elementor-widget-heading h2.elementor-heading-title {
		font-size: 2.2rem;
		line-height: 1.2;
		text-wrap: balance;
	}

	/*
	 * „Our<br> Story" și „ECO-home<br>by<br>Meleğim": pe un rând. Un <br> ascuns cu CSS lipește cuvintele („ECO-homeby…”)
	 * și Safari îl respectă totuși la „Our Story”; un filtru PHP n-ar ajunge pe site până la golirea cache-ului Elementor.
	 * Textul din pagină devine transparent, într-un singur rând cu restul tăiat (rămâne pentru cititoarele de ecran),
	 * iar rândul afișat vine din CSS, peste el, ascuns pentru cititoare („/ ""”). Dacă textul se schimbă în Elementor,
	 * se schimbă și aici.
	 */
	body.home .elementor .elementor-element:is(.elementor-element-7bcc28f8, .elementor-element-121aae03) h2.elementor-heading-title {
		position: relative;
		height: 1.2em;
		overflow: hidden;
		color: transparent;
	}

	body.home .elementor .elementor-element:is(.elementor-element-7bcc28f8, .elementor-element-121aae03) h2.elementor-heading-title::after {
		position: absolute;
		inset: 0;
		color: #312a26; /* culoarea pusă în Elementor pe aceste două titluri */
		text-align: center;
		white-space: nowrap;
	}

	body.home .elementor .elementor-element.elementor-element-7bcc28f8 h2.elementor-heading-title::after {
		content: "Our Story";
		content: "Our Story" / "";
	}

	body.home .elementor .elementor-element.elementor-element-121aae03 h2.elementor-heading-title {
		font-size: 2.6rem;
	}

	body.home .elementor .elementor-element.elementor-element-121aae03 h2.elementor-heading-title::after {
		content: "ECO-home by Meleğim";
		content: "ECO-home by Meleğim" / "";
	}

	/* „VEZI MAI MULT!" de sub „Our Story" stătea lipit de imaginea de dedesubt. */
	body.home .elementor .elementor-element.elementor-element-c63c6d7 {
		margin-bottom: 2.4rem;
	}

	/* ECO-home: titlul pe toată lățimea, fără deplasarea la scroll, cu mai puțin spațiu în jur. */
	body.home .elementor .elementor-element.elementor-element-6586ded6 {
		padding: 4.8rem 2rem 1.6rem;
	}

	body.home .elementor .elementor-element.elementor-element-121aae03.elementor-widget {
		width: 100%;
		max-width: 100%;
		transform: none !important; /* Motion Effects scrie translateY inline, la scroll */
	}

	/* ECO-home: imaginea cu sulurile de material era poziționată absolut peste text; trece deasupra textului. */
	body.home .elementor .elementor-element.elementor-element-1eaa2c14.elementor-widget {
		position: relative;
		inset: auto;
		order: -1;
		width: 100%;
		max-width: 100%;
		margin-bottom: 2.4rem;
	}
}