/**
 * Lamitex Catalogo — popup con slide dal basso, impilabili.
 *
 * Struttura generata dal JS:
 * <div class="lmx-popup">
 *   <div class="lmx-popup__overlay"></div>
 *   <div class="lmx-popup__dialog">
 *     <button class="lmx-popup__close">×</button>
 *     <div class="lmx-popup__content">…scheda…</div>
 *   </div>
 * </div>
 */

.lmx-popup {
	--lmx-popup-bg: #ffffff;
	--lmx-popup-border: #e5e5e5;
	/* Stacco tra le card: in trasparenza si vede l'overlay scuro sotto */
	--lmx-popup-gap: 2px;
	/* Allineamento orizzontale dei contenuti, in vw (proporzioni Figma
	   su frame 1688px: 156px sinistra = 9.2%, 96px destra = 5.7%).
	   Uniforme per TUTTE le card del popup. */
	--lmx-popup-pad-l: 9.2vw;
	--lmx-popup-pad-r: 5.7vw;
	--lmx-popup-radius: 10px;
	--lmx-popup-max-width: calc(100% - 40px);
	--lmx-popup-duration: 500ms;
	--lmx-popup-easing: cubic-bezier(0.32, 0.72, 0, 1);

	position: fixed;
	inset: 0;
	z-index: 10000; /* il JS incrementa per i popup impilati */
	display: flex;
	align-items: flex-end;
	justify-content: center;
	pointer-events: none;
}

.lmx-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	transition: opacity var(--lmx-popup-duration) ease;
	pointer-events: auto;
}

.lmx-popup__dialog {
	position: relative;
	width: 100%;
	max-width: var(--lmx-popup-max-width);
	height: calc(100vh - 40px);
	max-height: calc(100vh - 40px);
	background: transparent;
	border-radius: var(--lmx-popup-radius);
	transform: translateY(100%);
	transition: transform var(--lmx-popup-duration) var(--lmx-popup-easing);
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25);
	bottom: 20px;
}

/* Stato aperto: overlay visibile, dialog che sale */
.lmx-popup.is-open .lmx-popup__overlay {
	opacity: 1;
}
.lmx-popup.is-open .lmx-popup__dialog {
	transform: translateY(0);
}

.lmx-popup__close {
	position: absolute;
	top: 40px;
	right: 40px;
	z-index: 101;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #000000;
	color: #ffffff;
	border: 0;
	border-radius: 8px;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}
.lmx-popup__close:hover,
.lmx-popup__close:focus {
	background: #333333;
}

.lmx-popup__content {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0;
	/* A inizio/fine popup lo scroll NON deve passare alla pagina sotto */
	overscroll-behavior: contain;
	/* Scrollbar nascosta: lo scroll resta pienamente funzionante
	   (rotella, touch, tastiera), sparisce solo la barra visiva */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.lmx-popup__content::-webkit-scrollbar {
	display: none;
}

/* Loading spinner minimale */
.lmx-popup__content.is-loading::before {
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	margin: 80px auto;
	border: 3px solid #e5e5e5;
	border-top-color: #111111;
	border-radius: 50%;
	animation: lmx-popup-spin 0.7s linear infinite;
}
@keyframes lmx-popup-spin {
	to { transform: rotate(360deg); }
}

/* Scroll lock della pagina sotto (classi aggiunte dal JS su html e body).
   Il body viene congelato in position:fixed; il JS salva/ripristina scrollY */
html.lmx-popup-open {
	overflow: hidden !important;
}
body.lmx-popup-open {
	position: fixed !important;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden !important;
}

/* ============================================================
   SCHEDA PRODOTTO — struttura a CARD separate:
   ogni blocco e' bianco con radius 10, tra i blocchi un micro-gap
   trasparente lascia intravedere l'overlay scuro (come nel Figma:
   Rectangle 84 / 81 / 82 sono rettangoli distinti su fondo scuro)
   ============================================================ */
.lmx-popup-prodotto {
	display: flex;
	flex-direction: column;
	gap: var(--lmx-popup-gap);
}
.lmx-popup-prodotto__card {
	background: var(--lmx-popup-bg);
	border-radius: var(--lmx-popup-radius);
	padding: 70px var(--lmx-popup-pad-r) 70px var(--lmx-popup-pad-l);
}
.lmx-popup-prodotto__card--header {
	padding-top: 20px;
}
.lmx-popup-prodotto__card--aside {
	/* la colonna immagine non segue l'allineamento contenuti */
	padding: 20px;
}
.lmx-popup-prodotto__header {
	margin-bottom: 40px;
}

/* Allineamento titolo/description con i contenuti del main:
   la colonna vuota 1/5 dell'header viene irrigidita a
   313px (aside) + gap - 30px (gutter uk-grid della colonna dopo),
   cosi' "NextVeneer" parte esattamente dove parte "Linee prodotto".
   Solo >=960px (sotto, uk-width-*@m collassa a colonna singola). */
@media (min-width: 960px) {
	.lmx-popup-prodotto__card--header > .lmx-popup-prodotto__header > .uk-grid > [class*="uk-width-1-5"],
	.lmx-popup-prodotto__card--header > .uk-grid > [class*="uk-width-1-5"] {
		width: calc(313px + var(--lmx-popup-gap) - 30px);
	}
	.lmx-popup-prodotto__card--header > .lmx-popup-prodotto__header > .uk-grid > [class*="uk-width-4-5"],
	.lmx-popup-prodotto__card--header > .uk-grid > [class*="uk-width-4-5"] {
		width: calc(100% - 313px - var(--lmx-popup-gap) + 30px);
	}
}
.lmx-popup-prodotto__title {
	margin: 0;
}

/* ============================================================
   DESCRIZIONE: riga sotto il titolo, come nel Figma —
   label (273px, stessa colonna dell'aside) + testo a destra
   ============================================================ */
.lmx-popup-prodotto__description {
	display: grid;
	grid-template-columns: 273px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	margin-bottom: 40px;
}
.lmx-popup-prodotto__description-text > p:first-child {
	margin-top: 0;
}
.lmx-popup-prodotto__description-text > p:last-child {
	margin-bottom: 0;
}

/* ============================================================
   HERO: immagine di copertina full-bleed in testa al popup
   (margini negativi = compensano il padding di .lmx-popup__content)
   ============================================================ */
.lmx-popup-prodotto__hero {
	/* si estende oltre il padding vw della card fino a 20px dai bordi:
	   cornice 20 uniforme come nel Figma */
	margin: 0 calc(20px - var(--lmx-popup-pad-r)) 40px calc(20px - var(--lmx-popup-pad-l));
}
.lmx-popup-prodotto__hero-img {
	display: block;
	width: 100%;
	height: 65vh;
	object-fit: cover;
	border-radius:10px;
}

/* ============================================================
   LAYOUT A DUE COLONNE: aside immagine prodotto (sticky) + contenuti
   Dal Figma: colonna sinistra 313px con immagine 273x429 (padding 20).
   L'immagine e' sticky DENTRO il contenitore scrollabile del popup
   (.lmx-popup__content): raggiunta la sua posizione, segue lo scroll.
   ============================================================ */
.lmx-popup-prodotto__layout {
	display: grid;
	/* Default: colonna singola. Le due colonne si attivano SOLO quando
	   l'aside e' presente (modifier dal template): senza immagine in
	   evidenza i contenuti occupano tutta la larghezza. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lmx-popup-gap);
	align-items: start;
}
.lmx-popup-prodotto__layout--has-aside {
	grid-template-columns: 313px minmax(0, 1fr);
}
.lmx-popup-prodotto__aside {
	/* stretch: l'aside deve essere alto quanto la colonna contenuti,
	   altrimenti (con align-items:start) la cella si restringe
	   all'immagine e lo sticky non ha corsa per seguire lo scroll */
	align-self: stretch;
}
.lmx-popup-prodotto__aside-sticky {
	position: sticky;
	top: 20px;
}
.lmx-popup-prodotto__main {
	display: flex;
	flex-direction: column;
	gap: var(--lmx-popup-gap);
}
/* ALLINEAMENTO CONTENUTI ↔ TITOLO PRODOTTO.
   Il titolo nell'header parte a circa (pad-l + 285px) dal bordo dialog
   [padding card header + colonna 1/5 irrigidita]; le card del main
   iniziano a 315px (aside 313 + gap 2). Differenza: pad-l - 30px.
   Valore VERIFICATO al pixel sul sito live (scarto = 0). */
@media (min-width: 960px) {
	.lmx-popup-prodotto__main > .lmx-popup-prodotto__card {
		padding-left: calc(var(--lmx-popup-pad-l) - 30px);
	}
}
.lmx-popup-prodotto__product-img {
	display: block;
	width: 100%;
	aspect-ratio: 273 / 429;
	object-fit: cover;
	border-radius: 5px;
}
.d-table{
	display:table!important
}
.lmx-popup-prodotto__section {
	margin-bottom: 70px;
}
/* Divisore interno alla card contenuti (tra formati e Tecnologia) */
.lmx-popup-prodotto__section + .lmx-popup-prodotto__section {
	border-top: 1px solid #000;
	padding-top: 70px;
}
.lmx-popup-prodotto__card > .lmx-popup-prodotto__section:last-child {
	margin-bottom: 0;
}
.lmx-popup-prodotto__subtitle {
	margin: 0 0 12px;
	text-align: left;
}
.lmx-popup-prodotto__label {
	margin: 0 0 12px;
	text-align: left;
	display: block;
}
.lmx-popup-prodotto__intro {
	margin: 0 auto 32px;
	max-width: 740px;
	text-align: left;
	margin-left:0px;
}

/* ============================================================
   ALLINEAMENTO TITOLO <-> CONTENUTI MAIN
   Il titolo (uk-width-4-5) sta a: bordo colonna + gutter uk-grid
   (40px da 1200px in su, 30px sotto). Il main parte al bordo della
   colonna 4/5 (via --lmx-popup-aside-col): pareggiando il padding
   sinistro delle card al gutter, "Linee prodotto" si allinea
   esattamente a "NextVeneer".
   ============================================================ */
@media (min-width: 1200px) {
	.lmx-popup-prodotto__main .lmx-popup-prodotto__card {
		padding-left: 40px;
	}
}
@media (min-width: 961px) and (max-width: 1199px) {
	.lmx-popup-prodotto__main .lmx-popup-prodotto__card {
		padding-left: 30px;
	}
}

/* Formati: 1/2/3 box centrati */
.lmx-popup-prodotto__formati {
	display: flex;
	justify-content: left;
	gap: 24px;
	flex-wrap: wrap;
}
.lmx-popup-prodotto__formato {
	/* i box si dividono equamente TUTTA la larghezza disponibile,
	   che siano 1, 2 o 3 (flex-grow su base 0) */
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 24px;
	background: #f7f7f7;
	border-radius: 8px;
}
.lmx-popup-prodotto__formato-img {
	max-width: 100%;
	height: auto;
	display: block;
}
.lmx-popup-prodotto__formato-label {
	margin: 0;
}

/* Tecnologia: 4 box grigi */
.lmx-popup-prodotto__tech-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.lmx-popup-prodotto__tech-box {
	background: #f0f0f0;
	border-radius: 10px;
	padding: 70px 20px;
	border:1px solid #D3D3D3;
}
.lmx-popup-prodotto__tech-img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto 16px;
}
.lmx-popup-prodotto__tech-title {
	margin: 0 0 8px;
}
.lmx-popup-prodotto__tech-text {
	margin: 0;
	font-size: 14px;
}

/* Decorativi: griglia card informative (non cliccabili, hover mantenuto) */
.lmx-popup-prodotto__decorativi {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}
.lmx-popup-prodotto__deco {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: none;
	border: 0;
	padding: 0;
	cursor: default;
	text-align: left;
	font: inherit;
	color: inherit;
	padding:5px;
	border-radius:5px;
}
.tk-margin-bottom-50{
	margin-bottom:50px!important;
}
.lmx-popup-prodotto__deco-media {
	display: block;
	aspect-ratio: 270 / 380;
	overflow: hidden;
	border-radius: 6px;
	background: #fff;
}
.lmx-popup-prodotto__deco-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.lmx-popup-prodotto__deco .lmx-popup-prodotto__deco-media img{
	border-radius:5px;
}
.lmx-popup-prodotto__deco:hover .lmx-popup-prodotto__deco-media img {
	transform: scale(0.6);
}
.lmx-popup-prodotto__deco-code {
	display: block;
	font-size: 16px;
	margin-bottom: -8px;
}
.lmx-popup-prodotto__deco-title {
	display: block;
	font-size: 16px;
}

.lmx-popup-prodotto__deco:hover{
	border:1px solid #dddddd;
}

/* ============================================================
   FASCIA FINITURE 3D APPLICABILI — slider vanilla nel popup.
   Struttura Figma: sfondo full + badge decorativo a sinistra +
   pannello bianco a destra (~48%) con header num|label|num,
   titolo, immagine 273x382, testo, frecce.
   ============================================================ */
.lmx-popup-prodotto__card--finiture {
	padding: 20px;
}
/* ------------------------------------------------------------------
   STACK FINITURE "a pannelli sticky" (26/08/2026, terza versione).
   La card e' alta N schermi e scorre con il popup, in modo del tutto
   naturale. Ogni finitura e' un pannello sticky alto uno schermo: resta
   fermo mentre il successivo gli scivola sopra da sotto. Nessuna
   intercettazione della rotella. I box bianchi sono un overlay sticky
   sopra tutto, con il contenuto sostituito dal JS.
   Altezze: dialog = 100vh - 40px; card con padding 20+20; pagina = 100vh - 80px.
   ------------------------------------------------------------------ */
.lmx-fin-stack {
	position: relative;
	/* NIENTE scroll-snap: col touchpad "afferra" lo scroll a meta' gesto e
	   sembra un blocco. L'assestamento lo fa gia' lo sticky da solo */
}
.lmx-fin-stack__scroller {
	position: relative;
	border-radius: 5px;
	/* altezza = N pagine; impostata dal JS (--lmx-fin-pages), fallback 1 */
	height: calc((100vh - 80px) * var(--lmx-fin-pages, 1));
}
.lmx-fin {
	position: sticky;
	top: 20px;               /* = padding della card: si ferma dove partirebbe */
	height: calc(100vh - 80px);
	overflow: hidden;
	border-radius: 5px;
}
/* Le pagine successive coprono le precedenti: z-index crescente (JS) */
/* Overlay: i due box bianchi fissi. Stesso riquadro delle pagine
   (inset = padding 20px della card), trasparente ai click tranne i box */
/* Il contenitore assoluto copre TUTTA la card (N pagine) senza occupare
   spazio; dentro, l'overlay sticky ha l'altezza VERA di una pagina, cosi'
   si ferma con l'ultima finitura invece di pendere sul contenuto che segue */
.lmx-fin-stack__overlay-wrap {
	position: absolute;
	inset: 0;
	z-index: 100;
	pointer-events: none;
}
.lmx-fin-stack__overlay {
	position: sticky;
	top: 20px;
	height: calc(100vh - 80px); /* = altezza di una pagina */
	pointer-events: none;
}
.lmx-fin-stack__overlay-inner {
	position: relative;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.lmx-fin-stack__panel {
	pointer-events: auto;
}
.lmx-fin-stack__deco {
	background: transparent;
	overflow: visible;
}
/* Su desktop i box SORGENTE dentro le pagine restano in layout ma invisibili:
   quelli che si vedono sono nell'overlay */
.lmx-fin-stack .lmx-fin__slide .lmx-fin__deco-tag,
.lmx-fin-stack .lmx-fin > .lmx-fin__panel {
	visibility: hidden;
}
/* Cambio finitura: i box bianchi NON si muovono ne' sfumano. Entra con
   "slide up" solo il contenuto del pannello (immagine finitura, titolo,
   testo); lo sfondo scorre verso l'alto con lo scroll guidato dal JS */
@keyframes lmx-fin-enter {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: translateY(0); }
}
.lmx-fin-stack__panel.is-entering .lmx-fin__title,
.lmx-fin-stack__panel.is-entering .lmx-fin__text {
	animation: lmx-fin-enter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lmx-fin-stack__panel.is-entering .lmx-fin__text  { animation-delay: 60ms; }
/* Finestra immagini finitura nel pannello fisso: un layer per finitura,
   impilati. Il primo da' la misura, gli altri sono sovrapposti e vengono
   traslati dal JS in sincrono con lo scroll (100% = sotto, 0 = a posto) */
/* Il riquadro ha una misura PROPRIA (proporzione 273x382 da Figma) che
   non dipende dalle immagini: ogni layer lo riempie per intero con
   object-fit: cover, cosi' la trama nuova copre tutto lo spazio della
   precedente, qualunque sia la dimensione del file caricato */
.lmx-fin-stack__media-window {
	position: relative;
	overflow: hidden;
	display: block;
	aspect-ratio: 273 / 382;
	flex: 0 1 auto;
	min-height: 0;
}
.lmx-fin-stack__media-layer {
	position: absolute;
	inset: 0;
	background: var(--lmx-popup-bg, #fff);
	will-change: transform;
}
.lmx-fin-stack__media-layer img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
	.lmx-fin-stack__panel.is-entering .lmx-fin__title,
	.lmx-fin-stack__panel.is-entering .lmx-fin__text {
		animation: none;
	}
}
.lmx-fin__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 450ms ease;
}
.lmx-fin__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}
.lmx-fin__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Badge decorativo d'esempio: immagine del decorativo come sfondo
   del riquadro, con CARTELLINO BIANCO centrato sopra (come da design):
   Code: / codice grande / divider / nome / spazio /
   Finitura applicata: / nome finitura */
.lmx-fin__deco {
	position: absolute;
	left: 15%;
	top: 50%;
	transform: translateY(-50%);
	width: 273px;
	aspect-ratio: 273 / 382;
	border-radius: 8px;
	overflow: hidden;
}
.lmx-fin__deco-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lmx-fin__deco-tag {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	background: #ffffff;
	border-radius: 5px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
}
.lmx-fin__deco-tag .lmx-fin__deco-label {
	margin: 0 0 2px;
	padding-top:10px;
}
.lmx-fin__deco-code {
	margin: 0;
	padding-bottom: 8px;
	border-bottom: 1px solid #333333;
	font-size:64px
}
.lmx-fin__deco-name {
	padding: 8px 0;
	border-bottom: 1px solid #333333;
	font-size: 18px;
}
.lmx-fin__deco-spacer {
	flex: 1 1 auto;
	min-height: 150px;
}
.lmx-fin__deco-fin {
	font-size: 14px;
}

/* Pannello a destra — FISSO, fratello delle slide dentro .lmx-fin
   (dal 26/08/2026 non e' piu' dentro ogni slide: sfondo e badge
   decorativo scorrono sotto, il pannello resta fermo sopra) */
.lmx-fin__panel {
	position: absolute;
	z-index: 2;
	top: 20px;
	right: 20px;
	bottom: 20px;
	width: 48%;
	background: #ffffff;
	border-radius: 5px;
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
}
.lmx-fin__header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}
.lmx-fin__number {
	flex: 0 0 auto;
}
.lmx-fin__label {
	flex: 1 1 auto;
	text-align: center;
	font-size:14px;
	text-transform:uppercase
}
.lmx-fin__title {
	margin: 0 0 24px;
	text-align: center;
}
.lmx-fin__media {
	width: min(273px, 70%);
	flex: 0 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lmx-fin__media img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 5px;
	display: block;
}
.lmx-fin__text {
	margin: 24px 0 0;
	text-align: center;
}
.lmx-fin__nav {
	margin-top: auto;
	padding-top: 16px;
	display: flex;
	gap: 10px;
}
.lmx-fin__nav-btn {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #000000;
	color: #ffffff;
	border: 0;
	border-radius: 5px;
	cursor: pointer;
	font-size: 14px;
	transition: background 0.15s ease;
}
.lmx-fin__nav-btn:hover {
	background: #333333;
}

@media (max-width: 960px) {
	/* Mobile: niente pagine, finiture in flusso una sotto l'altra,
	   box sorgente visibili e overlay spento */
	.lmx-fin-stack__scroller {
		height: auto;
		overflow: visible;
	}
	.lmx-fin-stack__overlay-wrap {
		display: none;
	}
	.lmx-fin-stack .lmx-fin__slide .lmx-fin__deco-tag,
	.lmx-fin-stack .lmx-fin > .lmx-fin__panel {
		visibility: visible;
	}
	.lmx-fin {
		position: relative;
		top: auto;
		height: auto;
		overflow: visible;
	}
	.lmx-fin + .lmx-fin {
		margin-top: 32px;
	}
	.lmx-fin__slide {
		position: relative;
		display: none;
	}
	.lmx-fin__slide.is-active {
		display: block;
	}
	.lmx-fin__bg {
		position: relative;
		height: 240px;
		border-radius: 8px;
	}
	.lmx-fin__deco {
		position: static;
		transform: none;
		width: 100%;
		max-width: 273px;
		margin: 16px auto 0;
	}
	.lmx-fin__panel {
		position: static;
		width: 100%;
		margin-top: 16px;
	}
	/* Su mobile il pannello segue le slide nel flusso: viene dopo in ordine DOM */
}

/* ============================================================
   SCHEDA DECORATIVO — riusa il sistema card del prodotto
   (l'article porta entrambe le classi). Qui solo le regole
   specifiche: codice grande a sinistra e specifiche a 3 colonne.
   ============================================================ */

/* Codice grande: nella colonna 1/5, tirato a sinistra fino ad
   allinearsi al bordo dell'hero (stessa formula della cornice hero) */
/* Specificita' (0,2,0) VOLUTA: il CSS del tema (UIkit) viene caricato
   DOPO popup.css e "h1, .uk-h1 { margin: ... }" a pari specificita'
   vincerebbe azzerando il margine negativo. Non abbassare il selettore. */
.lmx-popup-prodotto__header .lmx-popup-decorativo__code-big {
	display: block;
	margin: 0 0 0 calc(20px - var(--lmx-popup-pad-l));
}

/* Specifiche: tre colonne — label meta sopra, valore sotto */
.lmx-popup-decorativo__specs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	margin-top: 24px;
}
.lmx-popup-decorativo__spec-label {
	display: block;
	margin-bottom: 8px;
}
.lmx-popup-decorativo__spec-value {
	font-size: 16px;
	line-height: 1.5;
}
.lmx-popup-decorativo__spec-note {
	display: block;
	margin-top: 12px;
	font-size: 11px;
	color: #999999;
}

/* Caption sotto l'immagine sticky dell'aside: codice + nome */
.lmx-popup-decorativo__aside-caption {
	display: block;
	margin-top: 10px;
}
.lmx-popup-decorativo__aside-code,
.lmx-popup-decorativo__aside-name {
	display: block;
	font-size: 16px;
	line-height: 1.4;
}

/* Griglia "Tecnologie applicabili": card-link ai prodotti,
   immagine a sinistra, meta in alto e nome in basso */
.lmx-popup-decorativo__tech-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.lmx-popup-decorativo__tech {
	display: flex;
	gap: 16px;
	border: 1px solid var(--lmx-popup-border);
	border-radius: 10px;
	padding: 10px;
}
.lmx-popup-decorativo__tech-media {
	flex: 0 0 84px;
	aspect-ratio: 84 / 96;
	border-radius: 6px;
	overflow: hidden;
}
.lmx-popup-decorativo__tech-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.lmx-popup-decorativo__tech-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 4px 0;
	min-width: 0;
}
.lmx-popup-decorativo__tech-meta {
	display: block;
}
.lmx-popup-decorativo__tech-name {
	margin: 0;
}
.lmx-fin__number{
	font-size:14px;
	color:#A3A3A3
}
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
	.lmx-popup-prodotto__tech-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.lmx-popup-decorativo__specs {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.lmx-popup-decorativo__tech-grid {
		grid-template-columns: 1fr;
	}
	.lmx-popup-prodotto__header .lmx-popup-decorativo__code-big {
		margin-left: 0;
	}
	/* Aside: colonna singola, immagine statica sopra i contenuti */
	.lmx-popup-prodotto__layout {
		grid-template-columns: 1fr;
	}

	.lmx-popup-prodotto__description {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.lmx-popup-prodotto__aside-sticky {
		position: static;
	}
	.lmx-popup-prodotto__product-img {
		max-width: 273px;
		margin: 0 auto;
	}
}
@media (max-width: 640px) {
	.lmx-popup__dialog {
		height: calc(100vh - 32px);
		max-height: calc(100vh - 32px);
	}
	.lmx-popup-prodotto__card {
		padding: 20px;
	}
	.lmx-popup-prodotto__hero {
		margin-left: -10px;
		margin-right: -10px;
		margin-bottom: 24px;
	}
	.lmx-popup-prodotto__card--header {
		padding-top: 10px;
	}
	.lmx-popup-decorativo {
		padding: 32px 20px;
	}
	.lmx-popup-prodotto__hero-img {
		height: clamp(200px, 32vh, 320px);
	}
	.lmx-popup-prodotto__tech-grid {
		grid-template-columns: 1fr;
	}
	.lmx-popup-prodotto__formato {
		flex-basis: 100%;
	}
}

/* Accessibilità: riduzione movimento */
@media (prefers-reduced-motion: reduce) {
	.lmx-popup__dialog,
	.lmx-popup__overlay {
		transition: none;
	}
}


/* ============================================================
   SINGLE SERVER-RENDERED (soluzione ibrida SEO/GEO):
   la scheda popup renderizzata come pagina. Cornice come il
   dialog e sfondo neutro per far leggere i micro-gap tra card.
   ============================================================ */
.lmx-single {
	/* Le variabili del sistema popup vivono su .lmx-popup, che qui non
	   esiste: vanno RIDICHIARATE, altrimenti tutte le regole con var()
	   collassano (card trasparenti, padding a zero). Tenere allineate
	   ai valori del blocco .lmx-popup in cima al file. */
	--lmx-popup-bg: #ffffff;
	--lmx-popup-border: #e5e5e5;
	--lmx-popup-gap: 2px;
	--lmx-popup-pad-l: 9.2vw;
	--lmx-popup-pad-r: 5.7vw;
	--lmx-popup-radius: 10px;

	padding: 20px;
	background: #e8e8e8;
}

/* ============================================================
   !!! ALLINEAMENTO TITOLO <-> CONTENUTI — NON RIMUOVERE !!!
   Blocco volutamente IN FONDO al file: vince su qualsiasi
   regola precedente a parita' di specificita'. Copre entrambi
   i selettori usati storicamente (con e senza >).
   Verificato al pixel sul sito live (scarto 0).
   ============================================================ */
@media (min-width: 960px) {
	.lmx-popup-prodotto__main > .lmx-popup-prodotto__card,
	.lmx-popup-prodotto__main .lmx-popup-prodotto__card {
		padding-left: calc(var(--lmx-popup-pad-l) - 30px);
	}
}

/* ==================================================================
   POPUP FINITURA (DETTAGLIO_FINITURE)
   ================================================================== */
.lmx-popup-finitura__descr {
	display: grid;
	grid-template-columns: 273px 1fr;
	gap: 10px;
	margin-top: 48px;
	padding-bottom: 90px;
	border-bottom: 1px solid #333333;
}
.lmx-popup-finitura__descr-text {
	margin: 0;
	font-size: 16px;
}
@media (max-width: 960px) {
	.lmx-popup-finitura__descr {
		grid-template-columns: 1fr;
		margin-top: 24px;
		padding-bottom: 40px;
	}
}
/* Decorativi nel popup finitura: sempre 4 colonne fisse (Figma), non
   auto-fill come nel prodotto */
.lmx-popup-finitura__decorativi {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}
@media (max-width: 960px) {
	.lmx-popup-finitura__decorativi {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 479px) {
	.lmx-popup-finitura__decorativi {
		grid-template-columns: 1fr;
	}
}
/* Decorativi applicabili nella finitura: sempre 4 colonne su desktop */
.lmx-popup-finitura__decorativi {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 960px) {
	.lmx-popup-finitura__decorativi {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==================================================================
   GRIGLIA FINITURE (elemento YOOtheme lamitex_finiture, CATEGORIA_FINITURE)
   Markup: .lmx-finiture > a.lmx-finiture__card (link a /finitura/{slug}/,
   intercettato da popup.js). Le colonne sono una variabile CSS.
   ================================================================== */
.lmx-finiture {
	display: grid;
	grid-template-columns: repeat(var(--lmx-fin-cols, 3), minmax(0, 1fr));
	gap: 10px;
}
.lmx-finiture__card {
	display: block;
	color: inherit;
	text-decoration: none;
}
.lmx-finiture__card:hover {
	color: inherit;
	text-decoration: none;
}
.lmx-finiture__media {
	position: relative;
	display: block;
	aspect-ratio: 540 / 350;
	overflow: hidden;
	border-radius: 6px;
	background: #e9e9e9;
}
.lmx-finiture__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.lmx-finiture__card:hover .lmx-finiture__media img {
	transform: scale(1.03);
}
.lmx-finiture__plus {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	background: #fff;
	color: #111111;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
}
.lmx-finiture__card:hover .lmx-finiture__plus {
	background: #111111;
	color: #fff;
}
.lmx-finiture__caption {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-size: 16px;
}
.lmx-finiture__code {
	display: inline-block;
	padding: 0 6px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 10px;
	line-height: 14px;
	text-transform: uppercase;
	letter-spacing: .04em;
}
@media (max-width: 960px) {
	.lmx-finiture {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 639px) {
	.lmx-finiture {
		grid-template-columns: 1fr;
	}
}

/* ==================================================================
   GRIGLIA DECORATIVI (elemento lamitex_decorativi, CATEGORIA_DECORATIVO)
   6 colonne bordo a bordo, badge NEW, codice+nome sotto, "Mostra di piu'"
   ================================================================== */
.lmx-decorativi__grid {
	display: grid;
	grid-template-columns: repeat(var(--lmx-deco-cols, 6), minmax(0, 1fr));
	gap: 10px;
}
.lmx-decorativi__card {
	display: block;
	color: inherit;
	text-decoration: none;
	background: #ffffff;
}
.lmx-decorativi__card:hover {
	color: inherit;
	text-decoration: none;
}
.lmx-decorativi__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #e9e9e9;
	border-radius:6px;
}
.lmx-decorativi__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.lmx-decorativi__card:hover .lmx-decorativi__media img {
	transform: scale(1.03);
}
.lmx-decorativi__new {
	position: absolute;
	top: 25px;
	left: 20px;
	padding: 0 8px;
	border-radius: 999px;
	background: #ffffff;
	font-size: 10px;
	line-height: 16px;
	letter-spacing: .04em;
}
.lmx-decorativi__caption {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 10px 10px;
}
.lmx-decorativi__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.lmx-decorativi__code {
	font-family: "Geist Mono", monospace;
	font-size: 14px;
	color: #777777;
}
.lmx-decorativi__name {
	font-size: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Icone informative (materico / orizzontale) con tag descrittivo
   all'hover o al focus, come da grafica */
.lmx-decorativi__icons {
	flex: none;
	display: flex;
	align-items: center;
	gap: 6px;
}
.lmx-decorativi__ico {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: #1d1d1b;
	outline: none;
}
.lmx-decorativi__tip {
	position: absolute;
	bottom: calc(100% + 8px);
	right: -6px;
	padding: 5px 12px;
	border-radius: 6px;
	background: #111111;
	color: #ffffff;
	font-size: 11px;
	line-height: 1.4;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	pointer-events: none;
	z-index: 5;
}
.lmx-decorativi__ico:hover .lmx-decorativi__tip,
.lmx-decorativi__ico:focus-visible .lmx-decorativi__tip {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.lmx-decorativi__more-wrap {
	display: flex;
	justify-content: center;
	padding: 40px 0;
}
.lmx-decorativi__more {
	padding: 10px 28px;
	border: 0;
	border-radius: 999px;
	background: #111111;
	color: #ffffff;
	font-family: 'At Hauss', sans-serif;
	font-size: 13px;
	cursor: pointer;
}
.lmx-decorativi__more:disabled {
	opacity: .5;
	cursor: wait;
}
@media (max-width: 1200px) {
	.lmx-decorativi__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media (max-width: 960px) {
	.lmx-decorativi__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 639px) {
	.lmx-decorativi__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==================================================================
   POPUP DECORATIVO — descrizione e tab gamma (nextVeneer / CPL)
   ================================================================== */
.lmx-popup-decorativo__descr {
	max-width: 720px;
	margin-top: 16px;
	font-size: 16px;
}
.lmx-popup-decorativo__gamma-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
}
.lmx-popup-decorativo__gamma-tab {
	padding: 8px 20px;
	border: 1px solid #111111;
	border-radius: 999px;
	background: transparent;
	color: #111111;
	font-family: 'At Hauss', sans-serif;
	font-size: 13px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.lmx-popup-decorativo__gamma-tab.is-active {
	background: #111111;
	color: #ffffff;
}
.lmx-popup-decorativo__gamme [data-lmx-gamma-panel] {
	display: none;
}
.lmx-popup-decorativo__gamme [data-lmx-gamma-panel].is-active {
	display: grid;
}
.lmx-popup-decorativo__spec--note {
	grid-column: 1 / -1;
}

/* ==================================================================
   FILTRI DECORATIVI — barra nera sopra la griglia + pannello laterale
   (Figma: FILTRA | cerca | N articoli; pannello con sezioni e reset)
   ================================================================== */
.lmx-filtri__bar {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 24px;
	padding: 8px 14px;
	border-radius: 6px;
	background: #111111;
	color: #ffffff;
}
.lmx-filtri__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border: 0;
	background: transparent;
	color: #ffffff;
	font-family: "Geist Mono", monospace;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}
.lmx-filtri__cerca {
	flex: 1;
	max-width: 340px;
	margin: 0 auto;
	padding: 7px 16px;
	border: 0;
	border-radius: 999px;
	background: #3a3a3a;
	color: #ffffff;
	font-family: "Geist Mono", monospace;
	letter-spacing: .06em;
	text-align: center;
}
.lmx-filtri__cerca::placeholder {
	color: #9a9a9a;
	text-transform: uppercase;
}
.lmx-filtri__cerca:focus {
	outline: 1px solid #6a6a6a;
}
.lmx-filtri__count {
	font-family: "Geist Mono", monospace;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Pannello laterale */
.lmx-filtri__overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(0, 0, 0, .55);
}
/* Stessa logica estetica del menu: card bianche staccate che fluttuano
   sull'overlay, pannello ancorato a DESTRA */
.lmx-filtri__panel {
	position: absolute;
	/* Piena altezza: l'overlay e' fixed su tutto il viewport, quindi
	   0 sopra e sotto = altezza dello schermo a ogni risoluzione,
	   comprese le barre mobili (niente vh cablati). */
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	width: 92vw;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: transparent;
	animation: lmx-filtri-in .28s ease;
	scrollbar-width: 92vw;
}

/* Larghezza allineata al menu del sito: il tema (theme.1.css) da' alla
   .uk-offcanvas-bar width:35vw dal breakpoint 640px in su (270px sotto).
   Sotto i 640px restiamo a 92vw: 270px non basterebbero ai filtri. */
@media (min-width: 640px) {
	.lmx-filtri__panel { width: 35vw; }
}
.lmx-filtri__panel::-webkit-scrollbar { display: none; }
@keyframes lmx-filtri-in {
	from { transform: translateX(40px); opacity: 0; }
	to   { transform: none; opacity: 1; }
}
html.lmx-filtri-aperti { overflow: hidden; }

.lmx-filtri__sez {
	background: #ffffff;
	border-radius: 12px;
	padding: 16px 22px;
}
.lmx-filtri__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.lmx-filtri__label {
	display: block;
	margin-bottom: 10px;
	font-family: "Geist Mono", monospace;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #777777;
}
.lmx-filtri__head .lmx-filtri__label { margin-bottom: 0; }
.lmx-filtri__chiudi {
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 10px;
	background: #111111;
	color: #ffffff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.lmx-filtri__cerca--panel {
	display: block;
	width: 100%;
	max-width: none;
	border-radius: 10px;
	background: #dcdcdc;
	color: #111111;
	text-align: left;
	font-family: 'At Hauss', sans-serif;
	font-size:24px;
}
.lmx-filtri__cerca--panel::placeholder {
	color: #8a8a8a;
	text-transform: none;
	letter-spacing: .02em;
}

.lmx-filtri__voce {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 3px 0;
	border: 0;
	background: transparent;
	color: #111111;
	font-family: 'At Hauss', sans-serif;
	font-size: 15px;
	text-align: left;
	cursor: pointer;
}
.lmx-filtri__voce-testo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	font-size:24px;
}
.lmx-filtri__ico { display: inline-flex; color: #1d1d1b; }
.lmx-filtri__ico--rot svg { transform: rotate(90deg); }
.lmx-filtri__new {
	padding: 0 8px;
	border: 1px solid #111111;
	border-radius: 999px;
	font-family: "Geist Mono", monospace;
	font-size: 9px;
	line-height: 16px;
	letter-spacing: .04em;
}
.lmx-filtri__box {
	flex: none;
	display: inline-block; /* dentro .lmx-filtri__boxbtn (non-flex) un inline collassa a 0x0 */
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: #d9d9d9;
	transition: background .15s ease;
}
.lmx-filtri__voce.is-on .lmx-filtri__box { background: #111111; }
.lmx-filtri__voce:hover .lmx-filtri__box { background: #9a9a9a; }
.lmx-filtri__voce.is-on:hover .lmx-filtri__box { background: #111111; }

/* L'ultima card cresce fino in fondo: cosi' la colonna riempie
   visivamente il pannello a piena altezza, a ogni risoluzione */
.lmx-filtri__sez--reset { flex: 1 0 auto; }
.lmx-filtri__reset {
	display: block;
	width: 100%;
	padding: 12px 0;
	border: 0;
	border-radius: 999px;
	background: #111111;
	color: #ffffff;
	font-family: "Geist Mono", monospace;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
}

.lmx-decorativi--loading .lmx-decorativi__grid { opacity: .45; transition: opacity .15s ease; }

@media (max-width: 700px) {
	.lmx-filtri__bar { flex-wrap: wrap; gap: 10px; }
	.lmx-filtri__cerca { order: 3; flex-basis: 100%; max-width: none; }
}

/* Famiglie con sottofamiglie (Legni -> Noce, Rovere...) */
.lmx-filtri__voce--fam {
	padding: 0;
	cursor: default;
}
.lmx-filtri__espandi {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
	padding: 3px 0;
	border: 0;
	background: transparent;
	color: #111111;
	font-family: 'At Hauss', sans-serif;
	font-size: 24px;
	text-align: left;
	cursor: pointer;
}
.lmx-filtri__caret {
	flex: none;
	transition: transform .18s ease;
}
.lmx-filtri__espandi.is-open .lmx-filtri__caret {
	transform: rotate(180deg);
}
.lmx-filtri__boxbtn {
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 7px 0 7px 12px;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.lmx-filtri__boxbtn.is-on .lmx-filtri__box {
	background: #111111;
}
.lmx-filtri__figli {
	padding-left: 14px;
}
.lmx-filtri__voce--figlio .lmx-filtri__voce-testo {
	font-size: 14px;
	color: #3a3a3a;
}