/*
 * V3 ↔ Elementor/Woodmart plumbing.
 *
 * The approved layout in v3.css assumes plain markup. Elementor wraps every
 * heading, paragraph, image and button in its own element and Woodmart clamps
 * the page in a padded container. This file reconciles the two WITHOUT changing
 * any approved value: it neutralises host chrome, lets Elementor containers act
 * as the prototype's grid, makes widget wrappers transparent to typography, and
 * redraws the prototype's inline SVG arrows and step icons as masks.
 */

/* ── Host chrome ──────────────────────────────────────────────────────────── */

body.iq-v3 main.wd-content-layout {
	max-width: none;
	width: 100%;
	margin-inline: 0;
	padding: 0;
}

body.iq-v3 .wd-page-content > .elementor { margin-inline: 0; padding-inline: 0; max-width: none; }

body.iq-v3,
body.iq-v3 .wd-page-wrapper,
body.iq-v3 .wd-page-content {
	background-image: none !important;
	background-color: var(--paper);
}

/* Demo chrome that must never appear on the catalogue. */
.whb-header,
.wd-page-title,
.wd-toolbar,
.wd-footer,
.wd-prefooter,
.cart-widget-side,
.wd-wishlist-side,
.wd-compare-side,
.login-form-side,
.wd-popup-wrap,
.wd-scroll-top { display: none !important; }

/* ── Containers become the prototype's grid ───────────────────────────────── */

/* `.e-con.e-flex` outranks a bare class, so the grid is re-asserted here. */
.iq-v3 .e-con.layout {
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--gutter), 1fr)
		repeat(12, [col] minmax(0, var(--col)))
		[content-end] minmax(var(--gutter), 1fr) [full-end];
	column-gap: var(--col-gap);
	row-gap: 0;
}

/* Elementor's 10px default padding and boxed width are not part of the design. */
body.iq-v3.iq-home .elementor .e-con {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--container-max-width: none;
	--content-width: 100%;
	/* Elementor's 20px default gap would inflate every section; spacing comes
	   from the approved rules (section padding, element margins) instead. */
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--grid-gap: 0px;
}

body.iq-v3.iq-home .elementor .e-con-inner { display: contents; }

/* Elementor containers default to a column; these four are rows in the approved
   design (its plain markup relied on flex-direction's initial value). */
body.iq-v3.iq-home .elementor :is(.sectionHead, .trust__item, .card__foot, .hero__actions) { flex-direction: row; }

/* Inside a row, a nested container must take its natural width — Elementor's
   default `--width: 100%` would push the section link onto its own line. */
body.iq-v3.iq-home .elementor .sectionHead > .e-con { width: auto; flex: 0 1 auto; }

/* Widgets are layout-transparent: the approved classes live on the containers. */
body.iq-v3.iq-home .elementor .elementor-widget { width: 100%; }
body.iq-v3.iq-home .elementor .elementor-widget-container { display: block; }
body.iq-v3.iq-home .elementor .elementor-widget-image,
body.iq-v3.iq-home .elementor .elementor-widget-image .elementor-image,
body.iq-v3.iq-home .elementor .elementor-widget-image figure { margin: 0; line-height: 0; }

/* Typography flows from the approved section rules, not from the imported kit. */
.iq-v3 .elementor-heading-title {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

.iq-v3 .elementor-widget-text-editor,
.iq-v3 .elementor-widget-text-editor p {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* Headings keep the display face; the label/eyebrow classes override it back to
   the body face exactly as they do in the prototype. */
body.iq-v3.iq-home .elementor h1,
body.iq-v3.iq-home .elementor h2,
body.iq-v3.iq-home .elementor h3,
body.iq-v3.iq-home .elementor h4 { font-family: var(--font-display); }

body.iq-v3.iq-home .elementor .label,
body.iq-v3.iq-home .elementor .label .elementor-heading-title,
body.iq-v3.iq-home .elementor .card__tag,
body.iq-v3.iq-home .elementor .promo__stamp,
body.iq-v3.iq-home .elementor .step__no { font-family: var(--font-body); }

/* ── Hero shortcut strip ──────────────────────────────────────────────────── */

body.iq-v3.iq-home .elementor .hero__jump { display: flex; flex-direction: row; flex-wrap: wrap; }
body.iq-v3.iq-home .elementor .hero__jump .elementor-widget-button { width: auto; }

body.iq-v3.iq-home .elementor .hero__jump .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 58px;
	padding: 0 clamp(14px, 2vw, 26px);
	border: 0;
	border-radius: 0;
	background: none;
	color: #FFFFFF;
	font-family: var(--font-display);
	font-size: var(--t-small);
	font-weight: 600;
	white-space: nowrap;
}

body.iq-v3.iq-home .elementor .hero__jump .elementor-widget-button:not(:last-child) .elementor-button { border-inline-end: 1px solid rgba(255, 255, 255, .3); }
body.iq-v3.iq-home .elementor .hero__jump .elementor-widget-button:first-child .elementor-button { padding-inline-start: 0; }
body.iq-v3.iq-home .elementor .hero__jump .elementor-button:hover,
body.iq-v3.iq-home .elementor .hero__jump .elementor-button:focus-visible { color: var(--rose); background: none; }
body.iq-v3.iq-home .elementor .hero__jump .elementor-button:hover::after { transform: translateX(4px); }

@media (max-width: 860px) {
	body.iq-v3.iq-home .elementor .hero__jump { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.iq-v3.iq-home .elementor .hero__jump .elementor-widget-button { width: 100%; }
	body.iq-v3.iq-home .elementor .hero__jump .elementor-button { justify-content: space-between; width: 100%; min-height: 52px; padding-inline: 14px; }
	body.iq-v3.iq-home .elementor .hero__jump .elementor-widget-button:first-child .elementor-button { padding-inline-start: 14px; }
	body.iq-v3.iq-home .elementor .hero__jump .elementor-widget-button:nth-child(2n) .elementor-button { border-inline-end: 0; }
	body.iq-v3.iq-home .elementor .hero__jump .elementor-widget-button:nth-child(n + 3) .elementor-button { border-block-start: 1px solid rgba(255, 255, 255, .3); }
}

/* Rows of buttons keep their natural width. */
body.iq-v3.iq-home .elementor .hero__actions .elementor-widget-button,
body.iq-v3.iq-home .elementor .sectionHead .elementor-widget-button,
body.iq-v3.iq-home .elementor .promo__body .elementor-widget-button,
body.iq-v3.iq-home .elementor .close__actions .elementor-widget-button { width: auto; }

/* ── Buttons and links ────────────────────────────────────────────────────── */

body.iq-v3.iq-home .elementor .elementor-widget-button .elementor-button-wrapper { line-height: 0; }

/* The approved classes (btn, btn--outline, link…) sit on the widget wrapper, so
   the wrapper would draw a second box around the real button. Strip it back. */
body.iq-v3.iq-home .elementor .elementor-widget-button:is(.btn, .btn--light, .btn--outline, .link) {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

body.iq-v3.iq-home .elementor .btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 26px;
	border: 1px solid var(--red);
	border-radius: 0;
	background: var(--red);
	color: #FFFFFF;
	font-family: var(--font-display);
	font-size: var(--t-small);
	font-weight: 600;
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

body.iq-v3.iq-home .elementor .btn .elementor-button:hover,
body.iq-v3.iq-home .elementor .btn .elementor-button:focus-visible { background: var(--red-deep); border-color: var(--red-deep); color: #FFFFFF; }

body.iq-v3.iq-home .elementor .btn--light .elementor-button { background: #FFFFFF; border-color: #FFFFFF; color: var(--ink); }
body.iq-v3.iq-home .elementor .btn--light .elementor-button:hover,
body.iq-v3.iq-home .elementor .btn--light .elementor-button:focus-visible { background: var(--sunk); border-color: var(--sunk); color: var(--ink); }

body.iq-v3.iq-home .elementor .btn--outline .elementor-button { background: transparent; border-color: rgba(255, 255, 255, .55); color: #FFFFFF; }
body.iq-v3.iq-home .elementor .btn--outline .elementor-button:hover,
body.iq-v3.iq-home .elementor .btn--outline .elementor-button:focus-visible { background: rgba(255, 255, 255, .12); border-color: #FFFFFF; }

body.iq-v3.iq-home .elementor .link .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-family: var(--font-display);
	font-size: var(--t-small);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

body.iq-v3.iq-home .elementor .link .elementor-button:hover,
body.iq-v3.iq-home .elementor .link .elementor-button:focus-visible { color: var(--red); background: none; }

/* ── The arrow, drawn as a mask so no inline SVG is needed in Elementor ───── */

.iq-v3 .arrow-after::after,
body.iq-v3.iq-home .elementor .link .elementor-button::after,
body.iq-v3.iq-home .elementor .tile h3::after,
body.iq-v3.iq-home .elementor .card__foot::after,
.iq-v3 .masthead .hero__jump a::after {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 10px;
	background-color: currentColor;
	-webkit-mask: var(--arrow) no-repeat center / contain;
	mask: var(--arrow) no-repeat center / contain;
	transition: transform var(--dur) var(--ease);
}

:root {
	--arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='m11 1 4 4-4 4M0 5h15' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}

body.iq-v3.iq-home .elementor .link .elementor-button:hover::after,
body.iq-v3.iq-home .elementor .link .elementor-button:focus-visible::after,
body.iq-v3.iq-home .elementor .tile:hover h3::after,
body.iq-v3.iq-home .elementor .tile:focus-visible h3::after,
body.iq-v3.iq-home .elementor .card:hover .card__foot::after,
body.iq-v3.iq-home .elementor .card:focus-visible .card__foot::after { transform: translateX(5px); }

body.iq-v3.iq-home .elementor .tile h3 { display: flex; align-items: center; gap: 10px; }
body.iq-v3.iq-home .elementor .card__foot .elementor-widget { width: auto; }

/* ── Section details that were single elements in the prototype ───────────── */

/* The kerf rule above each section head. */
body.iq-v3.iq-home .elementor .sectionHead {
	position: relative;
	border-top: 1px solid var(--rule);
	margin-top: 0;
}

body.iq-v3.iq-home .elementor .sectionHead::before {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline-start: 0;
	width: clamp(40px, 5vw, 84px);
	height: 3px;
	background: var(--red);
}

/* The scrim behind tile and gallery captions. */
body.iq-v3.iq-home .elementor .tile::after,
body.iq-v3.iq-home .elementor .shot::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(2, 0, 0, 0) 30%, rgba(2, 0, 0, .84) 100%);
	pointer-events: none;
}

/* Media cells: the photograph is absolutely positioned against the cell, so every
   Elementor wrapper between the two must stay static and out of the way. */
body.iq-v3.iq-home .elementor :is(.tile, .shot, .card__media, .promo__media, .craft__media) :is(.elementor-widget-image, .elementor-widget-container, .elementor-image, figure) {
	position: static;
	height: auto;
}

body.iq-v3.iq-home .elementor :is(.promo__media, .craft__media) { display: block; }

/* Inline runs that the prototype renders as separate lines. */
body.iq-v3.iq-home .elementor :is(.flow__step, .trust__item) :is(b, small, span) { display: block; }
body.iq-v3.iq-home .elementor .flow__step small { margin-top: 4px; }

/* The contact block under the closing CTA is a stack, not a sentence. */
body.iq-v3.iq-home .elementor .close__actions .contact .elementor-widget-container {
	display: grid;
	gap: 2px;
	justify-items: start;
}

body.iq-v3.iq-home .elementor .tile__body,
body.iq-v3.iq-home .elementor .shot__cap { z-index: 1; }

body.iq-v3.iq-home .elementor .shot__cap {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 14px 16px;
	color: #FFFFFF;
	font-size: var(--t-small);
}

body.iq-v3.iq-home .elementor .shot__cap b { display: block; font-family: var(--font-display); font-size: 16px; }
body.iq-v3.iq-home .elementor .shot__cap span { color: rgba(255, 255, 255, .88); }

/* Material card tag and foot sit on the media/edge exactly as approved. */
body.iq-v3.iq-home .elementor .card__media { position: relative; }
body.iq-v3.iq-home .elementor .card__tag { position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 1; width: auto; }
body.iq-v3.iq-home .elementor .card { position: relative; }
body.iq-v3.iq-home .elementor .card__foot { margin-top: auto; }

/* Featured card stamp. */
body.iq-v3.iq-home .elementor .promo__media { position: relative; }
body.iq-v3.iq-home .elementor .promo__stamp { position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 1; width: auto; }

/* ── Step and trust icons, as masks ───────────────────────────────────────── */

.iq-v3 .icon-lead::before {
	content: "";
	display: block;
	/* Host CSS positions stray pseudo-elements absolutely, which lifted these
	   icons out of flow and on top of their own labels. They are flow items. */
	position: static;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-bottom: 6px;
	background-color: var(--red);
	-webkit-mask: var(--icon) no-repeat center / contain;
	mask: var(--icon) no-repeat center / contain;
}

/* Column module (atelier steps): icon above its label. */
.iq-v3 .flow__step.icon-lead::before { align-self: flex-start; margin-bottom: 8px; }

/* Row module (trust strip): icon beside the label stack, optically centred. */
.iq-v3 .trust__item.icon-lead::before {
	background-color: var(--rose);
	align-self: center;
	margin: 0 12px 0 0;
}

.iq-v3 .trust__item { align-items: center; }

.iq-v3 .icon--rule  { --icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M1 15 15 1l6 6L7 21z' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='m6 10 2 2m3-5 2 2' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); }
.iq-v3 .icon--cut   { --icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M2 17 17 2m0 0h3v3' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M1 21h20' stroke='%23000' stroke-width='1.4'/%3E%3Ccircle cx='7' cy='12' r='2.4' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); }
.iq-v3 .icon--edge  { --icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M1 13h20M1 13a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M6 18h10' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); }
.iq-v3 .icon--fit   { --icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M1 8h20M1 8 11 1l10 7M4 8v13h14V8' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); }
.iq-v3 .icon--truck { --icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M2 4h11v11H2zM13 8h4l3 4v3h-7z' stroke='%23000' stroke-width='1.4'/%3E%3Ccircle cx='6' cy='18' r='2' stroke='%23000' stroke-width='1.4'/%3E%3Ccircle cx='16' cy='18' r='2' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); }
.iq-v3 .icon--slabs { --icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='m11 1 10 5-10 5L1 6z' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='m1 11 10 5 10-5M1 16l10 5 10-5' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); }
.iq-v3 .icon--shop  { --icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none'%3E%3Crect x='1' y='5' width='20' height='12' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M1 11h20M8 5v12' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); }

/* ── Hero media as a container background ─────────────────────────────────── */

body.iq-v3.iq-home .elementor .hero {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	body.iq-v3.iq-home .elementor .link .elementor-button::after,
	body.iq-v3.iq-home .elementor .tile h3::after { transition: none; }
}

@media (max-width: 860px) {
	/* The two hero actions are one column wide each, so they stay equal. */
	body.iq-v3.iq-home .elementor .hero__actions { display: grid; grid-template-columns: 1fr; }
	body.iq-v3.iq-home .elementor :is(.hero__actions, .close__actions) .elementor-widget-button,
	body.iq-v3.iq-home .elementor :is(.hero__actions, .close__actions) .elementor-widget-container,
	body.iq-v3.iq-home .elementor :is(.hero__actions, .close__actions) .elementor-button-wrapper,
	body.iq-v3.iq-home .elementor :is(.hero__actions, .close__actions) .elementor-button { width: 100%; }
}

/* ── Material cards: one real link, stretched over the card ───────────────── */

/* Elementor's container link control renders no anchor in this version, so the
   four material cards were divs that only looked clickable. Each card now holds a
   single anchor in its foot; the rules below stretch that one anchor over the
   whole card. The approved look is untouched: `.card:hover` still fires, because
   the overlay is a descendant of the card. */

body.iq-v3.iq-home .elementor .card { position: relative; }

/* Elementor positions every element, which would anchor the overlay to the foot
   widget instead of the card. */
body.iq-v3.iq-home .elementor .card__foot,
body.iq-v3.iq-home .elementor .card__foot .elementor-element,
body.iq-v3.iq-home .elementor .card__foot .elementor-widget-container { position: static; }

body.iq-v3.iq-home .elementor .card__cta { color: inherit; text-decoration: none; }

body.iq-v3.iq-home .elementor .card__cta::after {
	content: '';
	position: absolute;
	inset: 0;
	/* Above the media layer and its `.card__tag`, which carries z-index 1. */
	z-index: 2;
}

/* The ring belongs on the card, not on the small label. Woodmart draws its own
   ring with `!important`, so it is switched off through its own variable rather
   than fought — otherwise the card shows two rings at once. */
body.iq-v3.iq-home .elementor .card__cta { --wd-otl-width: 0; }
body.iq-v3.iq-home .elementor .card__cta:focus-visible { outline: none; }

body.iq-v3.iq-home .elementor .card:has(.card__cta:focus-visible) {
	border-color: var(--ink);
	outline: 3px solid var(--red);
	outline-offset: 3px;
}

body.iq-v3.iq-home .elementor .card:has(.card__cta:focus-visible) .card__media img { transform: scale(1.045); }

/* ── Aplicații tiles: the Blaturi tile carries one real link ──────────────── */

/* Same stretched-link pattern as the material cards: Elementor's container link
   renders no anchor, so the tile holds one anchor stretched over its whole face.
   The approved tile design is untouched. */

body.iq-v3.iq-home .elementor .tile { position: relative; }

body.iq-v3.iq-home .elementor .tile__body,
body.iq-v3.iq-home .elementor .tile__body .elementor-element,
body.iq-v3.iq-home .elementor .tile__body .elementor-widget-container { position: static; }

body.iq-v3.iq-home .elementor .tile__cta {
	--wd-otl-width: 0;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: #FFFFFF;
	font-family: var(--font-display);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: .25em;
}

body.iq-v3.iq-home .elementor .tile__cta::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3; /* above the tile's scrim */
}

body.iq-v3.iq-home .elementor .tile__cta:focus-visible { outline: none; }
body.iq-v3.iq-home .elementor .tile:has(.tile__cta:focus-visible) { outline: 3px solid #FFFFFF; outline-offset: -3px; }