/**
 * Application pages (Blaturi, Trepte, Glafuri) — the showroom and configurator.
 *
 * Both sections follow the system the rest of these pages already use, rather
 * than one of their own: section padding `--v5-pad`, the pages' h2 scale and
 * weight, `--bl-r` corners, pill buttons. Both lay out on the same 12 tracks as
 * the V5 grid (same gutter), split 5 + 1 + 6, so the showroom's slab and the
 * configurator's intro share a left edge and their right columns start on the
 * same line.
 *
 * Loaded after v5-blaturi.css on the three pages.
 */

body.iq-blaturi {
	--ap-on: #FFFFFF;
	--ap-on-soft: rgba(255, 255, 255, .74);
	--ap-on-dim: rgba(255, 255, 255, .6);
	--ap-line-on: rgba(255, 255, 255, .16);
	--ap-line: rgba(23, 24, 26, .14);
	--ap-cream: #F6F1EA;
	--ap-ink: #17181A;
	--ap-graphite: #55585C;
	--ap-red: #7C0B0B;
	--ap-red-deep: #480404;
	--ap-h2: clamp(28px, 2.6vw, 38px);
	--ap-ease: cubic-bezier(.22, .61, .36, 1);
	--ap-inner-r: 10px;
}

body.iq-v3.iq-blaturi .elementor .elementor-widget-iq-bl-showroom,
body.iq-v3.iq-blaturi .elementor .elementor-widget-iq-bl-showroom > .elementor-widget-container,
body.iq-v3.iq-blaturi .elementor .elementor-widget-iq-bl-configurator,
body.iq-v3.iq-blaturi .elementor .elementor-widget-iq-bl-configurator > .elementor-widget-container { margin: 0; padding: 0; }

/* Shared: section heads and the 5 + 1 + 6 split. */
body.iq-blaturi .elementor :is(.shw__title, .cfg__title) {
	margin: 0;
	max-inline-size: 22ch;
	font-family: var(--v5-display);
	font-size: var(--ap-h2);
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -.016em;
}

body.iq-blaturi .elementor :is(.shw__lede, .cfg__lede) {
	margin: 12px 0 0;
	max-inline-size: 52ch;
	font-size: 16px;
	line-height: 1.6;
}

@media (min-width: 1000px) {
	.shw__stage,
	.cfg {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--v5-gap);
	}

	.shw__slab,
	.cfg__intro { grid-column: 1 / span 5; }

	.shw__info,
	.cfg__form { grid-column: 7 / span 6; }
}

/* ── Showroom ─────────────────────────────────────────────────────────────── */

body.iq-blaturi .elementor .elementor-element.bl-shw {
	padding-block: var(--v5-pad);
	background: var(--bl-band);
	color: var(--ap-on);
	--wd-otl-color: #FFFFFF;
}

.shw { color: var(--ap-on); font-family: var(--v5-body); }

.shw__head { margin-block-end: var(--v5-head-gap); }
body.iq-blaturi .elementor .shw__kicker { display: none; }
body.iq-blaturi .elementor .shw__title { color: var(--ap-on); }
body.iq-blaturi .elementor .shw__lede { color: var(--ap-on-soft); }

/* Tabs: one ruled row, the chosen material underlined. */
.shw__tabs {
	display: flex;
	gap: 28px;
	margin-block-end: var(--v5-head-gap);
	border-block-end: 1px solid var(--ap-line-on);
	overflow-x: auto;
	scrollbar-width: none;
}

.shw__tabs::-webkit-scrollbar { display: none; }
.shw__tabs[hidden] { display: none; }

body.iq-blaturi .elementor button.shw__tab {
	all: unset;
	box-sizing: border-box;
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-block-size: 52px;
	font-family: var(--v5-body);
	font-size: 16px;
	font-weight: 500;
	color: var(--ap-on-dim);
	cursor: pointer;
	transition: color 240ms var(--ap-ease);
}

body.iq-blaturi .elementor button.shw__tab::after {
	content: '';
	position: absolute;
	inset: auto 0 -1px;
	block-size: 2px;
	background: var(--ap-on);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 320ms var(--ap-ease);
}

body.iq-blaturi .elementor button.shw__tab:hover,
body.iq-blaturi .elementor button.shw__tab[aria-selected="true"] { color: var(--ap-on); }
body.iq-blaturi .elementor button.shw__tab[aria-selected="true"]::after { transform: scaleX(1); }
body.iq-blaturi .elementor button.shw__tab:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -2px; }

.shw__panel { position: relative; }
.shw__panel + .shw__panel { margin-block-start: var(--v5-pad); }
.is-tabs .shw__panel + .shw__panel { margin-block-start: 0; }
.shw__panel[hidden] { display: none; }
.is-tabs .shw__panel:not([hidden]) { animation: ap-in 420ms var(--ap-ease) both; }

@keyframes ap-in { from { opacity: 0; } to { opacity: 1; } }

.shw__anchor { position: absolute; margin-block-start: -140px; }

.shw__stage { display: grid; gap: 28px; align-items: center; }

/* The slab: square, on the content edge, one soft shadow. */
body.iq-blaturi .elementor .shw__slab { position: relative; margin: 0; min-inline-size: 0; }

body.iq-blaturi .elementor button.shw__zoom {
	all: unset;
	box-sizing: border-box;
	position: relative;
	display: block;
	inline-size: 100%;
	overflow: hidden;
	border-radius: var(--bl-r);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
	cursor: zoom-in;
	line-height: 0;
}

body.iq-blaturi .elementor button.shw__zoom:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; }

body.iq-blaturi .elementor .shw__img {
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: 50% 50%;
	border-radius: var(--bl-r);
	transition: object-position 520ms var(--ap-ease);
}

body.iq-blaturi .elementor .shw__slab.is-split .shw__img { object-position: 100% 50%; }
body.iq-blaturi .elementor .shw__slab.is-split[data-view="room"] .shw__img { object-position: 0% 50%; }
body.iq-blaturi .elementor .shw__slab.is-swap .shw__img { animation: ap-in 420ms var(--ap-ease) both; }

/* A small magnifier mark in the corner; the lens replaces it under a mouse. */
body.iq-blaturi .elementor button.shw__zoom::after {
	content: '';
	position: absolute;
	inset: auto 14px 14px auto;
	inline-size: 38px;
	block-size: 38px;
	border-radius: 50%;
	background: rgba(2, 0, 0, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.5'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cpath d='M10.4 10.4 14 14'/%3E%3C/svg%3E") center / 16px no-repeat;
	transition: opacity 200ms ease;
}

body.iq-blaturi .elementor button.shw__zoom.is-lens { cursor: none; }
body.iq-blaturi .elementor button.shw__zoom.is-lens::after { opacity: 0; }

body.iq-blaturi .elementor .shw__lens {
	position: absolute;
	inset: 0 auto auto 0;
	inline-size: 180px;
	block-size: 180px;
	border-radius: 50%;
	border: 2px solid #FFFFFF;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
	background-color: #222222;
	background-repeat: no-repeat;
	opacity: 0;
	pointer-events: none;
	transition: opacity 160ms ease;
}

body.iq-blaturi .elementor button.shw__zoom.is-lens .shw__lens { opacity: 1; }

/* Placa / În ambianță: a quiet segmented control, top-left of the slab. */
body.iq-blaturi .elementor .shw__view {
	position: absolute;
	inset: 14px auto auto 14px;
	z-index: 2;
	display: inline-flex;
	padding: 3px;
	border-radius: 999px;
	background: rgba(2, 0, 0, .55);
}

body.iq-blaturi .elementor .shw__view[hidden] { display: none; }

body.iq-blaturi .elementor .shw__view button {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	min-block-size: 34px;
	padding: 0 14px;
	border-radius: 999px;
	font-family: var(--v5-body);
	font-size: 13px;
	font-weight: 500;
	color: var(--ap-on-soft);
	cursor: pointer;
}

body.iq-blaturi .elementor .shw__view button[aria-pressed="true"] { background: #FFFFFF; color: var(--ap-ink); }
body.iq-blaturi .elementor .shw__view button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* Facts. */
.shw__info { display: grid; gap: 16px; align-content: center; min-inline-size: 0; }

body.iq-blaturi .elementor .shw__name {
	margin: 0;
	font-family: var(--v5-display);
	font-size: clamp(28px, 2.8vw, 40px);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -.02em;
	color: var(--ap-on);
}

/* Colour, thickness, finish — one line, dot-separated. */
body.iq-blaturi .elementor .shw__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	font-size: 16px;
	color: var(--ap-on-soft);
}

body.iq-blaturi .elementor .shw__colour,
body.iq-blaturi .elementor .shw__specs,
body.iq-blaturi .elementor .shw__specs li { margin: 0; padding: 0; list-style: none; }

body.iq-blaturi .elementor .shw__colour[hidden],
body.iq-blaturi .elementor .shw__specs:empty { display: none; }

body.iq-blaturi .elementor .shw__specs { display: contents; }

body.iq-blaturi .elementor .shw__specs li::before {
	content: '·';
	margin-inline: 10px;
	color: var(--ap-on-dim);
}

body.iq-blaturi .elementor .shw__colour[hidden] + .shw__specs li:first-child::before { content: none; margin: 0; }

body.iq-blaturi .elementor .shw__text {
	margin: 0;
	max-inline-size: 48ch;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--ap-line-on);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ap-on-soft);
}

.shw__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-block-start: 8px; }

body.iq-blaturi .elementor a.shw__cta {
	display: inline-flex;
	align-items: center;
	min-block-size: 50px;
	padding-inline: 26px;
	border-radius: 999px;
	background: #FFFFFF;
	font-size: 16px;
	font-weight: 600;
	color: var(--ap-ink);
	text-decoration: none;
	transition: background 240ms var(--ap-ease);
}

body.iq-blaturi .elementor a.shw__cta:hover { background: var(--ap-cream); color: var(--ap-ink); }

body.iq-blaturi .elementor :is(a.shw__link, a.shw__all) {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-size: 16px;
	font-weight: 500;
	color: var(--ap-on);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .3em;
}

body.iq-blaturi .elementor .shw :is(a, button):focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

/* The rack: exactly the content width, eight equal slots, one rule above. */
body.iq-blaturi .elementor .shw__rack {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: var(--v5-gap);
	margin: var(--v5-pad) 0 0;
	padding: var(--v5-head-gap) 0 0;
	border-block-start: 1px solid var(--ap-line-on);
	list-style: none;
}

body.iq-blaturi .elementor .shw__rack li { margin: 0; min-inline-size: 0; }

body.iq-blaturi .elementor button.shw__slot {
	all: unset;
	box-sizing: border-box;
	display: grid;
	gap: 10px;
	inline-size: 100%;
	color: var(--ap-on-dim);
	cursor: pointer;
	transition: color 240ms var(--ap-ease);
}

body.iq-blaturi .elementor .shw__slot-img {
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--ap-inner-r);
	outline: 2px solid transparent;
	outline-offset: 3px;
	opacity: .78;
	transition: outline-color 240ms var(--ap-ease), opacity 240ms var(--ap-ease);
}

body.iq-blaturi .elementor .shw__slot.is-split .shw__slot-img { object-position: 100% 50%; }

body.iq-blaturi .elementor .shw__slot-name {
	overflow: hidden;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: inherit;
}

body.iq-blaturi .elementor .shw__slot-colour { margin-block-start: -6px; font-size: 13px; color: var(--ap-on-dim); }

body.iq-blaturi .elementor button.shw__slot:hover { color: var(--ap-on); }
body.iq-blaturi .elementor button.shw__slot:hover .shw__slot-img { opacity: 1; }
body.iq-blaturi .elementor button.shw__slot[aria-pressed="true"] { color: var(--ap-on); }
body.iq-blaturi .elementor button.shw__slot[aria-pressed="true"] .shw__slot-img { opacity: 1; outline-color: #FFFFFF; }
body.iq-blaturi .elementor button.shw__slot:focus-visible { outline: none; }
body.iq-blaturi .elementor button.shw__slot:focus-visible .shw__slot-img { opacity: 1; outline-color: #FFFFFF; }

body.iq-blaturi .elementor a.shw__all { margin-block-start: 16px; }

/* ── Configurator ─────────────────────────────────────────────────────────── */

body.iq-blaturi .elementor .elementor-element.bl-cfg {
	padding-block: var(--v5-pad);
	background: var(--v5-warm);
	color: var(--ap-ink);
}

.cfg { display: grid; gap: 28px; font-family: var(--v5-body); color: var(--ap-ink); }

.cfg__intro { align-self: start; min-inline-size: 0; }

@media (min-width: 1000px) {
	.cfg__intro { position: sticky; top: 104px; }
}

body.iq-blaturi .elementor .cfg__kicker { display: none; }
body.iq-blaturi .elementor .cfg__title { color: var(--ap-ink); }
body.iq-blaturi .elementor .cfg__lede { color: var(--ap-graphite); }

.cfg__offer { margin-block-start: 28px; padding-block-start: 24px; border-block-start: 1px solid var(--ap-line); }

body.iq-blaturi .elementor .cfg__offer-title { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--ap-ink); }

body.iq-blaturi .elementor .cfg__offer ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

body.iq-blaturi .elementor .cfg__offer li {
	position: relative;
	margin: 0;
	padding-inline-start: 22px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ap-graphite);
}

body.iq-blaturi .elementor .cfg__offer li::before {
	content: '';
	position: absolute;
	inset: .62em auto auto 4px;
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--ap-red);
}

/* The form card. */
.cfg__form {
	display: grid;
	gap: 24px;
	min-inline-size: 0;
	padding: clamp(24px, 2.6vw, 36px);
	border-radius: var(--bl-r);
	background: #FFFFFF;
}

.cfg__progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cfg__progress[hidden] { display: none; }

.cfg__dot { display: grid; gap: 8px; margin: 0; font-size: 13px; font-weight: 500; color: var(--ap-graphite); }
.cfg__dot::before { content: ''; block-size: 3px; border-radius: 3px; background: var(--ap-line); transition: background 320ms var(--ap-ease); }
.cfg__dot span { display: none; }
.cfg__dot[data-state="current"] { color: var(--ap-ink); }
.cfg__dot:is([data-state="current"], [data-state="done"])::before { background: var(--ap-red); }

.cfg__step { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.cfg__step + .cfg__step { margin-block-start: 32px; }
.is-stepped .cfg__step + .cfg__step { margin-block-start: 0; }
.cfg__step[hidden] { display: none; }
.is-stepped .cfg__step:not([hidden]) { animation: ap-in 320ms var(--ap-ease) both; }

.cfg__legend {
	display: block;
	margin: 0 0 18px;
	padding: 0;
	font-family: var(--v5-display);
	font-size: clamp(21px, 1.8vw, 26px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -.012em;
	color: var(--ap-ink);
}

.cfg__opts { display: grid; gap: 10px; }

@media (min-width: 600px) {
	.cfg__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cfg__opts--chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Radio cards. The input stays real and focusable, folded into the card. */
.cfg__opt { position: relative; display: block; margin: 0; cursor: pointer; }
.cfg__opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }

.cfg__opt-body {
	position: relative;
	display: grid;
	align-content: start;
	gap: 4px;
	block-size: 100%;
	min-block-size: 64px;
	padding: 16px 18px 16px 48px;
	border: 1px solid rgba(23, 24, 26, .18);
	border-radius: var(--ap-inner-r);
	background: #FFFFFF;
	transition: border-color 200ms var(--ap-ease), box-shadow 200ms var(--ap-ease);
}

.cfg__opt-body::before {
	content: '';
	position: absolute;
	inset: 18px auto auto 18px;
	inline-size: 18px;
	block-size: 18px;
	border: 1.5px solid rgba(23, 24, 26, .45);
	border-radius: 50%;
	background: #FFFFFF;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}

.cfg__opt-label { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ap-ink); }
.cfg__opt-hint { font-size: 14px; line-height: 1.45; color: var(--ap-graphite); }

.cfg__opt:hover .cfg__opt-body { border-color: rgba(23, 24, 26, .4); }
.cfg__opt input:checked + .cfg__opt-body { border-color: var(--ap-red); box-shadow: inset 0 0 0 1px var(--ap-red); }
.cfg__opt input:checked + .cfg__opt-body::before { border-color: var(--ap-red); box-shadow: inset 0 0 0 3px #FFFFFF, inset 0 0 0 9px var(--ap-red); }
.cfg__opt input:focus-visible + .cfg__opt-body { outline: 3px solid var(--ap-red); outline-offset: 2px; }

.cfg__opt--chip .cfg__opt-body { min-block-size: 46px; padding: 0 18px 0 42px; align-content: center; border-radius: 999px; }
.cfg__opt--chip .cfg__opt-body::before { inset: 50% auto auto 16px; inline-size: 16px; block-size: 16px; transform: translateY(-50%); }
.cfg__opt--chip input:checked + .cfg__opt-body::before { box-shadow: inset 0 0 0 3px #FFFFFF, inset 0 0 0 8px var(--ap-red); }
.cfg__opt--chip .cfg__opt-label { font-size: 15px; font-weight: 500; }

.cfg__error { margin: 12px 0 0; font-size: 14px; font-weight: 500; color: #B3261E; }
.cfg__error[hidden] { display: none; }

.cfg__dims { display: grid; gap: 12px; }

@media (min-width: 600px) {
	.cfg__dims { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cfg__dim { display: grid; gap: 8px; margin: 0; min-inline-size: 0; }
.cfg__dim-label { font-size: 14px; font-weight: 500; color: var(--ap-graphite); }

.cfg__dim-box {
	position: relative;
	display: flex;
	align-items: center;
	border: 1px solid rgba(23, 24, 26, .22);
	border-radius: var(--ap-inner-r);
	background: #FFFFFF;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}

.cfg__dim-box:focus-within { border-color: var(--ap-red); box-shadow: inset 0 0 0 1px var(--ap-red); }

body.iq-blaturi .elementor .cfg__dim input {
	all: unset;
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 54px;
	padding: 0 50px 0 16px;
	font-family: var(--v5-body);
	font-size: 18px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--ap-ink);
	-moz-appearance: textfield;
}

body.iq-blaturi .elementor .cfg__dim input::-webkit-outer-spin-button,
body.iq-blaturi .elementor .cfg__dim input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cfg__dim-unit { position: absolute; inset-inline-end: 16px; font-size: 14px; color: var(--ap-graphite); pointer-events: none; }

.cfg__hint { margin: 14px 0 0; font-size: 14px; color: var(--ap-graphite); }

.cfg__summary {
	margin: 0;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--ap-line);
	font-size: 15px;
	font-weight: 500;
	color: var(--ap-ink);
}

.cfg__summary[hidden] { display: none; }

.cfg__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

body.iq-blaturi .elementor .cfg__nav button {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 50px;
	padding-inline: 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--v5-body);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 240ms var(--ap-ease), border-color 240ms var(--ap-ease);
}

body.iq-blaturi .elementor .cfg__nav button[hidden] { display: none; }
body.iq-blaturi .elementor .cfg__nav :is(.cfg__next, .cfg__submit) { margin-inline-start: auto; background: var(--ap-red); color: #FFFFFF; }
body.iq-blaturi .elementor .cfg__nav :is(.cfg__next, .cfg__submit):hover { background: var(--ap-red-deep); }
body.iq-blaturi .elementor .cfg__nav .cfg__back { border-color: rgba(23, 24, 26, .25); color: var(--ap-ink); }
body.iq-blaturi .elementor .cfg__nav .cfg__back:hover { border-color: var(--ap-ink); }
body.iq-blaturi .elementor .cfg__nav button:focus-visible { outline: 3px solid var(--ap-red); outline-offset: 3px; }

/* Without script all three steps show; the submit then sits at the start. */
.cfg:not(.is-stepped) .cfg__nav .cfg__submit { margin-inline-start: 0; }

.cfg__note { margin: 0; font-size: 14px; color: var(--ap-graphite); }

/* ── Below the two-column layout ──────────────────────────────────────────── */

@media (max-width: 999px) {
	/* The form straight after the heading; the list of what can be ordered after
	   the form, so it never pushes the configurator a screen down. */
	.cfg__intro { display: contents; }
	.cfg > .cfg__intro > * { order: 0; }
	.cfg > .cfg__form { order: 1; }
	.cfg > .cfg__intro > .cfg__offer { order: 2; margin-block-start: 0; }
	.cfg { gap: 0; }
	.cfg > .cfg__form { margin-block: 24px; }

	/* The rack scrolls: slots keep a readable size instead of shrinking to fit. */
	body.iq-blaturi .elementor .shw__rack {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 132px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	body.iq-blaturi .elementor .shw__rack::-webkit-scrollbar { display: none; }
	body.iq-blaturi .elementor .shw__rack li { scroll-snap-align: start; }
}

@media (max-width: 599px) {
	/* Bleed the two horizontal scrollers to the screen edge, keeping the snap
	   aligned with the text column. */
	.shw__tabs,
	body.iq-blaturi .elementor .shw__rack {
		margin-inline: -20px;
		padding-inline: 20px;
		scroll-padding-inline: 20px;
	}

	.shw__tabs { gap: 24px; }
	body.iq-blaturi .elementor .shw__rack { grid-auto-columns: 116px; gap: 12px; }
	body.iq-blaturi .elementor .shw__lens { display: none; }
	body.iq-blaturi .elementor .shw__actions a.shw__cta { flex: 1 1 100%; justify-content: center; }
	body.iq-blaturi .elementor .shw__actions a.shw__link { margin-inline: auto; }
	body.iq-blaturi .elementor .cfg__nav button { flex: 1 1 auto; }
	body.iq-blaturi .elementor .cfg__nav :is(.cfg__next, .cfg__submit) { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.shw *, .shw *::before, .shw *::after,
	.cfg *, .cfg *::before, .cfg *::after { animation: none !important; transition: none !important; }
}

/* The closing band uses the same heading scale as every other section. */
body.iq-blaturi .elementor .bl-conv :is(h2, .elementor-heading-title) {
	max-inline-size: 32ch;
	font-size: var(--ap-h2);
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -.016em;
}

/* On phones the phone number becomes a button; same pill as every other. */
@media (max-width: 599px) {
	body.iq-blaturi .elementor .bl-conv__tel { border-radius: 999px; }
}

/* Every section, the closing band included, on the same vertical rhythm. */
body.iq-blaturi .elementor .elementor-element.bl-conv { padding-block: var(--v5-pad); }

/* ── Page head ────────────────────────────────────────────────────────────────
   The same 5 + 1 + 6 split as the showroom and configurator: the title and the
   two actions on the left, one photograph on the right. White under the white
   header, so the dark showroom band is the first strong contrast on the page. */

body.iq-v3.iq-blaturi .elementor :is(.elementor-widget-iq-bl-hero, .elementor-widget-iq-bl-materials),
body.iq-v3.iq-blaturi .elementor :is(.elementor-widget-iq-bl-hero, .elementor-widget-iq-bl-materials) > .elementor-widget-container { margin: 0; padding: 0; }

body.iq-blaturi .elementor .elementor-element.bl-top {
	padding-block: var(--v5-pad);
	background: #FFFFFF;
	color: var(--ap-ink);
}

.blh { display: grid; gap: 32px; font-family: var(--v5-body); color: var(--ap-ink); }
.blh__copy { align-self: center; min-inline-size: 0; }

body.iq-blaturi .elementor .blh__title {
	margin: 0;
	max-inline-size: 16ch;
	font-family: var(--v5-display);
	font-size: clamp(34px, 3.9vw, 56px);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -.024em;
	text-wrap: balance;
	color: var(--ap-ink);
}

body.iq-blaturi .elementor .blh__sub {
	margin: 18px 0 0;
	max-inline-size: 46ch;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ap-graphite);
}

.blh__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 30px; }

body.iq-blaturi .elementor :is(a.blh__cta, a.blh__ghost, a.mtl__all) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 50px;
	padding-inline: 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--v5-display);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: background 240ms var(--ap-ease), border-color 240ms var(--ap-ease), color 240ms var(--ap-ease);
}

body.iq-blaturi .elementor a.blh__cta { background: var(--ap-red); border-color: var(--ap-red); color: #FFFFFF; }
body.iq-blaturi .elementor a.blh__cta:hover { background: var(--ap-red-deep); border-color: var(--ap-red-deep); color: #FFFFFF; }
body.iq-blaturi .elementor a.blh__ghost { border-color: rgba(23, 24, 26, .24); color: var(--ap-ink); }
body.iq-blaturi .elementor a.blh__ghost:hover { border-color: var(--ap-ink); color: var(--ap-ink); }

.blh__fig {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--bl-r);
	background: var(--v5-warm);
}

body.iq-blaturi .elementor .blh__img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

body.iq-blaturi .elementor :is(.blh, .mtl) :is(a):focus-visible { outline: 2px solid var(--ap-ink); outline-offset: 3px; }

@media (min-width: 1000px) {
	.blh { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 28px; /* matches .shw__stage and .cfg */ align-items: center; }
	.blh__copy { grid-column: 1 / span 5; }
	.blh__fig { grid-column: 7 / span 6; }
	.blh.is-textonly .blh__copy { grid-column: 1 / span 8; }
}

/* ── Toate materialele ───────────────────────────────────────────────────────
   One card per material into its catalogue category, the count read live.
   The whole card is the link; the name carries it, so it is read once. */

body.iq-blaturi .elementor .elementor-element.bl-mtl {
	padding-block: var(--v5-pad);
	background: var(--v5-warm);
	color: var(--ap-ink);
}

.mtl { font-family: var(--v5-body); color: var(--ap-ink); }
.mtl__head { margin-block-end: var(--v5-head-gap); }

body.iq-blaturi .elementor .mtl__title {
	margin: 0;
	max-inline-size: 22ch;
	font-family: var(--v5-display);
	font-size: var(--ap-h2);
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -.016em;
	color: var(--ap-ink);
}

body.iq-blaturi .elementor .mtl__lede { margin: 12px 0 0; max-inline-size: 52ch; font-size: 16px; line-height: 1.6; color: var(--ap-graphite); }

body.iq-blaturi .elementor .mtl__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px var(--v5-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mtl__card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto auto;
	column-gap: 12px;
	align-items: center;
	min-inline-size: 0;
}

.mtl__fig {
	grid-column: 1 / -1;
	grid-row: 1;
	margin: 0 0 16px;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--bl-r);
	background: var(--v5-warm-deep);
}

body.iq-blaturi .elementor .mtl__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 640ms var(--ap-ease);
}

.mtl__card:hover .mtl__img { transform: scale(1.03); }

body.iq-blaturi .elementor .mtl__name {
	grid-column: 1;
	grid-row: 2;
	margin: 0;
	font-family: var(--v5-display);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -.01em;
}

body.iq-blaturi .elementor a.mtl__link { color: var(--ap-ink); text-decoration: none; }
body.iq-blaturi .elementor a.mtl__link::after { content: ''; position: absolute; inset: 0; border-radius: var(--bl-r); }
body.iq-blaturi .elementor .mtl a.mtl__link:focus-visible { outline: none; }
body.iq-blaturi .elementor a.mtl__link:focus-visible::after { outline: 2px solid var(--ap-ink); outline-offset: 4px; }

body.iq-blaturi .elementor .mtl__meta { grid-column: 1; grid-row: 3; margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: var(--ap-graphite); }

.mtl__go {
	grid-column: 2;
	grid-row: 2 / span 2;
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border: 1px solid rgba(23, 24, 26, .2);
	border-radius: 999px;
	color: var(--ap-ink);
	transition: background 240ms var(--ap-ease), border-color 240ms var(--ap-ease), color 240ms var(--ap-ease);
}

.mtl__go::before {
	content: '';
	inline-size: 18px;
	block-size: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mtl__card:hover .mtl__go { background: var(--ap-ink); border-color: var(--ap-ink); color: #FFFFFF; }

.mtl__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	margin-block-start: 40px;
	padding-block-start: 28px;
	border-block-start: 1px solid var(--ap-line);
}

body.iq-blaturi .elementor a.mtl__all { background: var(--ap-ink); border-color: var(--ap-ink); color: #FFFFFF; }
body.iq-blaturi .elementor a.mtl__all:hover { background: #000000; color: #FFFFFF; }

body.iq-blaturi .elementor a.mtl__guide {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-size: 16px;
	font-weight: 500;
	color: var(--ap-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .3em;
}

@media (min-width: 1000px) {
	body.iq-blaturi .elementor .mtl__grid { grid-template-columns: repeat(var(--mtl-n, 4), minmax(0, 1fr)); }
}

@media (max-width: 599px) {
	.blh { gap: 24px; }
	body.iq-blaturi .elementor .blh__sub { font-size: 16px; }
	.blh__actions { margin-block-start: 24px; }
	body.iq-blaturi .elementor .blh__actions a { flex: 1 1 100%; }

	/* The four cards as a snap rail, like the slab rack above. */
	body.iq-blaturi .elementor .mtl__grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 72%;
		gap: 12px;
		margin-inline: -20px;
		padding-inline: 20px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 20px;
		scrollbar-width: none;
	}
	body.iq-blaturi .elementor .mtl__grid::-webkit-scrollbar { display: none; }
	.mtl__card { scroll-snap-align: start; }
	body.iq-blaturi .elementor a.mtl__link::after { inset: 0; }
	.mtl__foot { margin-block-start: 28px; padding-block-start: 20px; }
	body.iq-blaturi .elementor a.mtl__all { flex: 1 1 100%; }
	body.iq-blaturi .elementor a.mtl__guide { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.blh *, .mtl * { transition: none !important; }
}

/* Every card the same height whatever the photograph's own shape, and titles
   that break where the grid column does rather than at a character count. */
body.iq-blaturi .elementor .mtl__grid { align-items: start; }
.mtl__card { align-content: start; }
.mtl__fig { position: relative; min-block-size: 0; }
body.iq-blaturi .elementor .mtl__img { position: absolute; inset: 0; }
body.iq-blaturi .elementor .blh__title { max-inline-size: none; }

/* ── Audit pass: alignment and tablet layouts ────────────────────────────────── */

/* Project captions sat 2px inside the photograph's edge. */
body.iq-blaturi .bl-pjs .v5-pj__body { padding-inline: 0; }

/* One gap for every row of cards on the page: the rail was 14px, the rack,
   material cards and project grid 20px. */
body.iq-blaturi .elementor .bl-userail { gap: var(--v5-gap); }

/* Every other control on the page is round; the rail arrows were square. */
body.iq-blaturi .bl-railctl .v5-arrows button { border-radius: 999px; }

@media (min-width: 600px) and (max-width: 999px) {
	/* Hero: a landscape band rather than a 4:3 block taller than the copy. */
	.blh__fig { aspect-ratio: 16 / 9; }

	/* Material cards: four across, so the section is one row, not two screens.
	   The whole card is the link; the arrow has no room to add anything. */
	body.iq-blaturi .elementor .mtl__grid { grid-template-columns: repeat(var(--mtl-n, 4), minmax(0, 1fr)); gap: 24px 16px; }
	body.iq-blaturi .elementor .mtl__name { font-size: 18px; }
	.mtl__fig { margin-block-end: 12px; }
	.mtl__go { display: none; }

	/* Projects: the first one wide, the other two beneath it. */
	body.iq-blaturi .elementor .bl-pjs .v5-pjgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--v5-gap); }
	body.iq-blaturi .elementor .bl-pjs .v5-pjgrid > :first-child:not(:last-child) { grid-column: 1 / -1; }
	body.iq-blaturi .elementor .bl-pjs .v5-pjgrid > :first-child:not(:last-child) .v5-pj__img { aspect-ratio: 16 / 9; }
	body.iq-blaturi .elementor .bl-pjs .v5-pj__title { font-size: 17px; }
}

@media (min-width: 720px) and (max-width: 999px) {
	/* Showroom: slab and details side by side, as on desktop, instead of a
	   700px-tall square followed by the text. */
	.shw__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
	body.iq-blaturi .elementor .shw__actions a.shw__cta { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 599px) {
	/* The heading gets the whole line; the counter and arrows made it wrap to
	   three. Phones swipe the rail, and the progress bar still shows position. */
	body.iq-blaturi .bl-uses .bl-railctl { display: none; }

	body.iq-blaturi .elementor .mtl__grid { grid-auto-columns: 76%; gap: 16px; }
}

/* Text links read the same everywhere on the page: an underline on the text
   (as "Vezi pagina produsului", "Compară materialele"), not a rule at the
   bottom of the 44px target, which hung 12px below the words. */
body.iq-blaturi .elementor .v5-link-w .elementor-button {
	border-block-end: 0;
	font-family: var(--v5-body);
	font-size: 16px;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .3em;
}

@media (min-width: 1000px) and (max-width: 1199px) {
	/* Eight slots in a 940px row left 76px each and cut every name to
	   "Calacatta Be…": the rack scrolls at a readable size instead. */
	body.iq-blaturi .elementor .shw__rack {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 132px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}
	body.iq-blaturi .elementor .shw__rack::-webkit-scrollbar { display: none; }

	/* The form column is 440px here: two radio cards side by side broke every
	   label and hint over three lines. */
	.cfg__opts:not(.cfg__opts--chips) { grid-template-columns: minmax(0, 1fr); }
}

/* ── Material cards: breathing room and centred photographs ─────────────────── */

/* Elementor resets figure margins (.elementor .elementor-widget:not():not()
   figure), so the photograph sat flush on the title: outranked here. */
body.iq-blaturi .elementor .mtl__card > figure.mtl__fig { margin: 0 0 20px; }
body.iq-blaturi .elementor .mtl__img { object-position: 50% 50%; transform-origin: 50% 50%; }
body.iq-blaturi .elementor .mtl__meta { margin-block-start: 6px; }

@media (max-width: 1199px) {
	body.iq-blaturi .elementor .mtl__card > figure.mtl__fig { margin-block-end: 16px; }
}