:root {
	--bg: #0b0c10;
	--fg: #17181b;
	--fgw: #e9e9ea; /* chiaro per footer scuro */
	--text: #222;
	--title: #E34A43;
}

:root{
  /* palette base */
  --page-bg: #fafafa;
  --paper: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --line: #e5e7eb;

  /* brand (puoi cambiarli per ogni sito) */
  --brand: #111827;
  --accent: #f97316; /* arancione “Stratego-ish” */
  --hover: #ea580c;

  /* barre/layout */
  --supertop-bg: #0b0c10ee;
  --topbar-bg: #f3f4f6;
  --footer-bg: #f3f4f6;

  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}


* {
	box-sizing: border-box
}

body {
	background: var(--page-bg); 
	color: var(--text); 
}


html,
body {
	margin: 0px;
	padding: 0px;
	height: 100%;
}

body {
	display: block;
	text-align: center;
	/* font-size: 11px;
	font-style: normal;
	color: #1F1F1F;
	text-decoration: none;
	font-family:  'Open Sans', Verdana, Arial, Helvetica, sans-serif;*/
}

/*=====================ELEMENTI HTML STANDARD=====================*/
a,
a:link,
a:visited {
	text-decoration: none;
	font-weight: normal;
	color: var(--title)
}

a:hover,
a:focus,
a:active {
	color: var(--hover)
}
a img {
	border: none;
}
a.nodec {
	text-decoration: none;
}

a.gray,
.gray {
	text-decoration: none;
	color: #cccccc;
}
a.gray:hover {
	text-decoration: none;
	color: #CA7B45;
}

a.inv, a.inv:link, a.inv:visited
{
	text-decoration: none;
	color: #ffffff;
	font-size:18px;
	transition: color 0.3s ease;
}
a.inv:hover
{
	text-decoration: none;
	color: var(--hover);
}


/* 14) Accessibilità/hover */
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid #e34a43;
	outline-offset: 2px;
}

hr{
	opacity: 0.5;
	box-shadow: var(--shadow);
}

.w-text-value
{
color:white
}

sup {
	font-size: 11px
}

input,
input.evi {
	font-family: Verdana, Arial;
	font-size: 14px;
	font-style: normal;
	text-decoration: none;
	padding: 0px;
	padding-left: 4px;
	overflow: hidden;
	font-weight: normal;
	margin: 0px;
	width: 250px;
	height: 42px;
	border: solid 1px #999999;
	border-radius: 8px;
	color: #333333;
}

input.input2 {
	height: 32px !important;
}


input.input_evi,
input[type=select].input_evi,
select.input_evi {
	border-color: #D56E26;
}

input.readonly,
select.readonly {
	background-color: #dddddd;
	color: gray;
}

select,
input[type=file] {
	font-family: Verdana, Arial;
	font-size: 14px;
	font-style: normal;
	text-decoration: none;
	padding: 0px;
	padding-left: 4px;
	overflow: hidden;
	font-weight: normal;
	margin: 0px;
	width: 244px;
	height: 32px;
	border: solid 1px #ccc;
	color: #7d7d7d;
	border-radius: 4px;
	background-color: White;
}

textarea {
	font-family: Verdana, Arial;
	font-size: 14px;
	font-style: normal;
	text-decoration: none;
	padding: 0px;
	padding-left: 4px;
	padding-top: 4px;
	overflow: hidden;
	font-weight: normal;
	border: solid 1px #7d7d7d;
	border-radius: 8px;
	color: #7d7d7d;
	margin: 0px;
	width: 250px;
	height: 114px;
	background-color: white;
}

input[type=checkbox],
input[type=radio] {
	width: 14px;
	height: 14px;
	border: none;
}

input.mini {
	width: 36px;
	height: 24px;
	border-top-left-radius: 4px;
	border-radius: 4px;
}

input.large,
textarea.large {
	width: 380px;

	border-top-left-radius: 4px;
	border-radius: 4px;
}

input.medium,
.medium {
	width: 76px;

	border-top-left-radius: 4px;
	border-radius: 4px;

}

p {
	margin: 0px;
	padding: 0px;
}

small{
	font-size:12px;
	text-wrap: nowrap;
}



/*=====================ELEMENTI/CLASSI STANDARD=====================*/
/* -------------------------------------------------------- */

.ico16 {
	width: 16px;
	height: 16px;
}
.ico18 {
	width: 18px;
	height: 18px;
}
.ico20 {
	width: 20px;
	height: 20px;
}
.ico24 {
	width: 24px;
	height: 24px;
}

.ico32 {
	width: 32px;
	height: 32px;
}
.ico36 {
	width: 36px;
	height: 36px;
}
.ico48 {
	width: 48px;
	height: 48px;
}

.green{
	color: #10b951 !important;
}
.red{
	color: #ef4444 !important;
}
.blue{
	color: #3b82f6 !important;
}
.yellow{
	color: yellow !important;
}
.orange
{
	color: #f59e0b !important;
}
/* 9) Utility contenitori responsivi */
.resp-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

@media (min-width: 700px) {
	.resp-row--2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.resp-row--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* 10) Layout form responsivi */
.form-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	align-items: start;
	margin-bottom: 12px;
}

@media (min-width: 700px) {
	.form-row {
		grid-template-columns: 200px 1fr;
		align-items: center;
		gap: 16px;
	}
}

.form-label {
	font-weight: bold;
	color: #333;
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select,
.form-field textarea {
	width: 100%;
	max-width: 400px;
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	box-sizing: border-box;
}

.form-field input:not([type="checkbox"]):not([type="radio"]):focus,
.form-field select:focus,
.form-field textarea:focus {
	outline: none;
	border-color: #E34A43;
	box-shadow: 0 0 0 2px rgba(227, 74, 67, 0.1);
}

.form-field .note {
	font-size: 12px;
	color: #666;
	margin-top: 2px;
	text-align: left;
}

/* 12) Spaziature verticali coerenti */
.section {
	padding: clamp(24px, 5vw, 48px) 0;
	padding-top: 6px;
}


/* ===== CTA PANEL (dark band + card elevata) ===== */
.cta-panel {
	position: relative;
	padding: clamp(24px, 6vw, 64px) 0;
}

.cta-panel__band {
	position: absolute;
	inset: 0;
	background: #2b2e36;
	/* banda scura */
	z-index: 0;
}

/* la card bianca “sospesa” sopra la banda */
.cta-panel__card {
	position: relative;
	z-index: 1;
	margin: 0 auto;
	max-width: 860px;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 20px;
	/* o var(--radius) */
	padding: clamp(20px, 4vw, 36px);
	text-align: center;
	box-shadow:
		0 20px 45px rgba(0, 0, 0, .18),
		0 2px 0 rgba(0, 0, 0, .12);
	/* bordo basso leggermente più scuro */
}

/* titolo rosso “brand” */
.cta-panel__title {
	margin: 0 0 .35rem;
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-weight: 800;
	color: var(--accent, #e34a43);
	letter-spacing: .2px;
}

/* sottotitolo grigio */
.cta-panel__subtitle {
	margin: 0 0 1rem;
	color: #6b7280;
	font-weight: 600;
}

/* bottoni */
.cta-panel__actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.btn-cta {
	/* leggero “peso” in più al primario */
	font-weight: 800;
	padding: .8rem 1.4rem;
	border-radius: 10px;
}

/* ombra soffice attorno ai bordi (glow) per enfatizzare */
.cta-panel__card::after {
	content: "";
	position: absolute;
	inset: 10px;
	pointer-events: none;
	border-radius: inherit;
	box-shadow: 0 14px 40px rgba(0, 0, 0, .12);
}

/* responsive spacing */
@media (max-width: 600px) {
	.cta-panel {
		padding: 28px 0;
	}
}



/*=====================MENU=====================*/
/* -------------------- menu ---------------- */


ul.menu2,
ul.menutopdown {
	list-style: none;
	margin: 0;
	padding: 0
}

ul.menu2 li {

	display: inline;
	margin: auto;
	padding: 0;
	height: 14px;
	margin-left: 3px;
	margin-right: 3px;
	/*padding-top: 29px;*/
	color: #ffffff;
}

ul.menutopdown li {


	margin: 8px;
	padding: 0;
	height: 18px;

}

ul.menu3 {
	list-style: none;
	margin: 0;
	padding: 0
}

ul.menu3 li {

	display: inline;
	margin: auto;
	padding: 0;
	height: 14px;
	margin-left: 3px;
	margin-right: 3px;
	/*padding-top: 29px;*/
	color: #ffffff;
}

ul.menu4 {
	list-style: none;
	margin: 0;
	padding: 0
}

ul.menu4 li {

	display: inline;
	margin: auto;
	padding: 0;
	height: 14px;
	margin-left: 0px;
	margin-right: 12px;
	/*padding-top: 29px;*/
	color: #ffffff;
}

/* ===== MENU01 MODERNO (FLEX) ===== */

/* disattiva il layout a tabella ereditato */
table.menu01,
table.menu01 td {
	border: none !important;
}

table.menu01 {
	display: none !important;
}

/* nuovo markup: <nav id="menu01"><ul class="menu01"> ... */
#top #menu01 {
	width: 100%;
}

#top .menu01 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* item */
#top .menu01__item {
	margin: 0;
	padding: 0;
}

.menu01__label {
	font-size: 14px;
}

/* link base: manteniamo le classi legacy menuoff/menuon/menuitem01 */
#top .menu01 a.menuitem01 {
	position: relative;
	display: inline-block;
	padding: .65rem .9rem;
	line-height: 1;
	border: 1px solid transparent;
	/* evita layout shift */
	text-decoration: none;
	font-weight: 600;
	/* evita jitter al hover */
	transition: color .20s ease-out, background-color .20s ease-out;
}

/* colori/stati (riuso regole legacy) */
#top .menu01 a.menuoff {
	color: #333;
}

#top .menu01 a.menuon {
	color: #e34a43;
}

/* effetto underline “slide-in” GPU-friendly */
#top .menu01 a.menuitem01::after {
	content: "";
	position: absolute;
	left: .9rem;
	right: .9rem;
	bottom: .45rem;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	opacity: .8;
	transition: transform .22s ease-out;
}

/* hover / focus: cambia solo il colore e anima la riga */
#top .menu01 a.menuitem01:hover,
#top .menu01 a.menuitem01:focus-visible {
	color: #e34a43;
	/*background-color: rgba(0,0,0,.04);*/
}

#top .menu01 a.menuitem01:hover::after,
#top .menu01 a.menuitem01:focus-visible::after {
	transform: scaleX(1);
}

/* stato attivo sempre sottolineato */
#top .menu01 a.menuon::after {
	transform: scaleX(1);
}

/* accessibilità focus */
#top .menu01 a.menuitem01:focus-visible {
	outline: 2px solid #e34a43;
	outline-offset: 2px;
}

/* responsive: compatta su schermi stretti */
@media (max-width: 720px) {
	#top .menu01 {
		gap: 4px 8px;
	}

	#top .menu01 a.menuitem01 {
		padding: .55rem .75rem;
	}
}

/* ===== OPZIONE ALTERNATIVA “sobria” (solo colori) — DISATTIVA l’underline sopra se preferisci
#top .menu01 a.menuitem01::after { display:none; }
#top .menu01 a.menuitem01:hover,
#top .menu01 a.menuitem01:focus-visible {
  color:#e34a43; background-color: rgba(0,0,0,.06);
}
*/
/*
table.menu01, table.menu01 td {
	border-collapse: collapse;
	
	border-right-color: #eeeeee;
 border-right-style: solid;
 border-right-width: 1px;
 
 border-left-color: #eeeeee;
 border-left-style: solid;
 border-left-width: 1px;
}

.menuitem01{

padding: 0;
height: 59px;
padding-left:13px;
padding-right:13px;
float:left;

}

.menuitem01 p {
	margin-top:18px;
}


.menuoff{
color: #333333; 
font-weight: normal;
font-family: 'Open Sans', Verdana, Arial, sans-serif;
font-size: 14px;
text-decoration: none;
text-decoration-color: #e34a43;
text-decoration-thickness: 2px;
text-underline-offset: 8px;
font-weight: 600;
}

.menuon, .menuoff:hover {
color: #e34a43;
font-size:14px;
text-decoration: underline;
font-family: 'Open Sans', Verdana, Arial, sans-serif;
text-decoration-color: #e34a43;
text-decoration-thickness: 2px;
text-underline-offset: 6px;
font-weight: 600;

}
.menuoff, .menuoff:hover {
    transition: color 0.3s, text-decoration-color 0.3s, text-decoration-thickness 0.3s, text-underline-offset 0.3s;
}
*/
ul.menu3 li a.menu3off,
ul.menu3 li a.menu3on {
	color: #ffffff;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-decoration: none;
}

ul.menu3 li a.menu3off:hover,
ul.menu3 li a.menu3on {
	color: #e34a43;

}

ul.menu2 li a.menu2off,
ul.menu2 li a.menu2on {
	color: #ffffff;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-decoration: none;

}

ul.menu2 li a.menu2off:hover,
ul.menu2 li a.menu2on {
	color: #bf0000;

}

ul.menu4 li a.menu4off,
ul.menu4 li a.menu4on {

	color: #ffffff;
	/*font-weight: bold;*/
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-decoration: none;

}

ul.menu4 li a.menu4off:hover,
ul.menu4 li a.menu4on {
	color: #ffffff;
	text-decoration: underline;

}

/* Stili per le icone del menu */
ul.menu2 li a i,
ul.menu4 li a i {
	margin-right: 4px;
	font-size: 14px;
}

/* Assicura che le icone siano allineate verticalmente */
ul.menu2 li a,
ul.menu4 li a {
	display: inline-flex;
	align-items: center;
}


.menuitem02 {

	margin-left: 0px;
	margin-top: 10px;
	padding: 0;
	height: 18px;
	border: none;

}


.menuitem02 a.menuoff {

	color: #000000;
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-decoration: none;
	border: none;
}


.menuitem02 a.menuoff:hover,
.menuitem02 a.menuon,
.menuitem02 a:hover,
.menuitem02:hover {
	color: #B3D455;
	font-size: 14px;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
}

#menutop {
	position: relative;

	top: 4px;
	width: auto;
	height: 18px;

	left: 0px;

	padding: 0px;
}

#menurtop {
	position: absolute;

	top: 0px;
	width: auto;
	height: 18px;

	right: clamp(12px, 3vw, 24px);

	padding: 0px;
}

#menurtop img {

	border: 0;
	/*float: right;
	margin-left: 15px;*/
}

/*=====================ELEMENTI DI PAGINA=====================*/


#container {
	position: static !important;
	/* era absolute */
	min-height: 100dvh;
	/* viewport-height dinamica mobile */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/*
    width: 100%;
    position: absolute;
    top: 0px;  
    margin-top: 0px;
    text-align: left;   
    min-height: 100%;
	*/
	padding: 0px;
	margin: 0px auto;
}

#supertop {
	width: 100% !important;
	/* scardina i width fissi */
	/*max-width: 1200px;*/
	/* contenuto leggibile su desktop */
	margin-inline: auto;
	padding-left: clamp(12px, 3vw, 24px);
	padding-right: clamp(12px, 3vw, 24px);
	height: 33px;
	border: 0px;
	overflow: hidden;
    flex-shrink: 0; /* impedisce che si riduca */
}

.supertopnologged, .supertoplogged {
	background: var(--supertop-bg) !important;
    border-bottom: 1px solid var(--line);
}

.supertoplogged {
	background-color: #E34A43;
}

#top {
	width: 100% !important;
	height: 74px;
	border: none;
	background: var(--topbar-bg) !important;
    border-bottom: 1px solid var(--line);

	margin-inline: auto;
	box-sizing: border-box;
	
}
#cookiesbanner {

	position: relative;
	top: 0px;
	width: auto;
	left: 0;
	background: navy;
	color: white;
	z-index: 10000;
	padding: 8px;
	text-align: justify;
}


#logo {
	position: absolute;
	z-index: 100;
	max-width: 160px;
	text-align: left;
    padding: 5px;
}

#img_logo {
	max-height: 60px;
	height: auto;
	width: auto;
}

#contents,
#contents1,
#center {

	width: 100% !important;
	/* scardina i width fissi */
	/*max-width: 1200px;*/
	/* contenuto leggibile su desktop */
	margin-inline: auto;
	padding-left: clamp(12px, 3vw, 24px);
	padding-right: clamp(12px, 3vw, 24px);
	box-sizing: border-box;
	flex: 1 0 auto;
	/* cresce e spinge il footer giù */
}
#contents,
#contents1,
#center {
	/*min-height: calc(100vh - 97px - 212px);*/
	 flex: 1; /* prende tutto lo spazio disponibile */
}

.content {

	width: 100% !important;
	/* scardina i width fissi */
	max-width: 1280px;
	/* contenuto leggibile su desktop */
	margin-inline: auto;
	/*padding-left: clamp(12px, 3vw, 24px);
	padding-right: clamp(12px, 3vw, 24px);*/
	box-sizing: border-box;
	position: relative;
	text-align: left;
}

#toolbar {
	width: auto;
	height: 70px;
	position: absolute;
	top: 0px;
	overflow: visible;
	padding: 0px;
	right: 0px;
	display: flex;
	align-items: center;
	padding-right: clamp(12px, 3vw, 24px);
}

#slider {
	width: 100%;
	height: auto !important;
	/* era vincolato */
	background: #ffffff;
	padding: 0;
}

/* immagini nello slider centrabili e responsive */
#slider img {
	position: static !important;
	display: block;
	max-width: 100%;
	margin: 0 auto;
}

	#paginazione {

		line-height: 200%;
		margin-top: 6px;
	}

/* === HERO SOTTILE === */
.hero {
	position: relative;
	overflow: hidden;
	background: #000;
}

.hero--thin picture img {
	display: block;
	width: 100%;
	height: min(42vh, 520px);
	object-fit: cover;
	object-position: center;
}


.hero__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
	color: #fff;
	background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .45));
	text-align: left;
	padding-left: clamp(24px, 8vw, 120px);
}

.hero__overlay .container {
	width: 100%;
	max-width: 1280px;
	/* limite coerente col resto del sito */
	margin: 0 auto;
	/* centra orizzontalmente */
	padding-left: clamp(24px, 5vw, 80px);
	/* contenuto spostato un po’ verso dentro */
	padding-right: clamp(16px, 3vw, 60px);
}

.hero__overlay .container-inner {
	max-width: 600px;
	/* il blocco testuale non si allunga troppo */
}

.hero__title {
	margin: 0 0 .4rem 0;
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	color: #fff;
	font-size: 38px;
}

.hero__subtitle {
	margin: 0 0 1rem 0;
	color: #e5e7eb;
	font-size: 18px;
}

.hero--thin picture img {
	height: clamp(180px, 28vh, 320px);
}

/* per allineare a sx */
.hero__title,
.hero__subtitle {
	text-align: left;
}

.hero__cta {
	display: flex;
	gap: 12px;
	margin-top: 1rem;
}

/* bottoni usati nella hero */
.btn {
	display: inline-block;
	padding: .65rem 1rem;
	border-radius: 999px;
	border: 1px solid transparent;
	text-decoration: none;
	font-size: 16px;
}

.btn-accent {
	background: #E34A43;
	color: #fff;

}

a.btn-accent {
	color: #fff;
	font-weight: 600;
	text-align: center;
}

.btn-ghost {
	background: #fff;
	color: #111;
	border-color: #e5e7eb
}

.btn:hover {
	opacity: .9
}

/* Cards / griglia */
.grid-3 {
	display: grid;
	gap: 16px
}

@media (min-width:700px) {
	.grid-3 {
		grid-template-columns: repeat(3, 1fr)
	}
}

.card {
	background: #fff;
	border: 1px solid #eee;
	border-radius: var(--radius);
	padding: 24px;
	padding-bottom: 32px;
	box-shadow: var(--shadow)
}

.card h3 {
	margin: 0 0 .4rem
}

.strengths__grid {
	display: grid;
	gap: 24px;
	/* già hai .grid-3, ma per sicurezza puoi combinare */
}

.strengths__icon {
	font-size: 2.5rem;
	/* dimensione icona */
	color: var(--title);
	/* o altro colore tema */
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* CTA banda */
.cta__inner {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start
}

@media (min-width:700px) {
	.cta__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between
	}
}

/* ==== CTA CARD EVIDENZIATA ==== */
.cta-card {
	padding: clamp(24px, 5vw, 48px) 0;
}

.cta-card__inner {
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 28px;
	box-shadow: 0 20px 55px rgba(0, 0, 0, .08);
	padding: clamp(18px, 3.2vw, 32px);
	position: relative;
}

.cta-card__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(1280px 300px at -10% 120%, rgba(227, 74, 67, .14), transparent 60%),
		radial-gradient(800px 220px at 120% -20%, rgba(30, 41, 59, .06), transparent 60%);
	border-radius: inherit;
	pointer-events: none;
}

.cta-card__text h2 {
	margin: 0 0 6px;
	font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.cta-card__text p {
	margin: 0;
	color: #555;
}

.cta-card__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

@media (max-width:800px) {
	.cta-card__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==== ABOUT FULL-WIDTH — GRAY ==== */
.about--gray {
	background: linear-gradient(180deg, #f6f6f6, #f9f9f9);
	padding: clamp(32px, 6vw, 72px) 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}

.about__inner {
	max-width: 950px;
	margin: 0 auto;
	text-align: center;
}

.about__inner h2 {
	margin: 0 0 8px;
}

.about__inner p {
	color: #555;
}

/* === Featured Products Slider === */
/* === Featured Products Slider (versione compatta) === */
.featured-slider {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
}

.featured-track {
  display: flex;
  gap: 12px;
  transition: transform 0.4s ease;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 6px;
}

.featured-item {
  flex: 0 0 calc(20% - 12px); /* 5 prodotti per riga su desktop */
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow);
  text-align: center;
  padding: 8px;
  min-width: 160px;
  max-width: 180px;
}

.featured-item img {
  /*width: 100%;*/
  height: 100px;
  /* object-fit: contain; meglio per immagini non uniformi */
  border-radius: 8px;
  background: #f6f6f6;
}

.featured-item h3 {
  font-size: 13px;
  margin-top: 6px;
  color: #333;
  line-height: 1.3;
}

/* Frecce desktop */
.featured-prev,
.featured-next {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 18px;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  opacity: 0.8;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.featured-prev:hover,
.featured-next:hover {
  opacity: 1;
}

.featured-prev { left: 6px; }
.featured-next { right: 6px; }

/* Responsivo */
@media (max-width: 1024px) {
  .featured-item { flex: 0 0 30%; }
}

@media (max-width: 768px) {
  .featured-item { flex: 0 0 45%; }
  .featured-prev, .featured-next { display: none; } /* mobile: scroll touch */
}
/* === Featured: più respiro + scrollbar che non tocca le card === */
.featured-track{
  gap: 20px;                        /* più spazio tra le card */
  padding: 10px 10px 22px;          /* extra bottom per non sovrapporsi alla scrollbar */
  scrollbar-gutter: stable both-edges; /* riserva spazio alla scrollbar dove supportato */
  -webkit-overflow-scrolling: touch;   /* smoother su iOS */
}

/* allineamento “a scatti” gradevole quando si scrolla */
.featured-track{ scroll-snap-type: x mandatory; }
.featured-item{ scroll-snap-align: start; }

/* Card più leggere e ariose */
.featured-item{
  border: 1px solid #ececec;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}
.featured-item:hover{
  box-shadow: 0 8px 22px rgba(0,0,0,.09);
  transform: translateY(-1px);
  transition: box-shadow .2s ease, transform .2s ease;
}

/* Immagini più piccole e contenute */
.featured-item img{
  width: 100%;
  height: 92px;           /* compatto per immagini non HD */
  object-fit: contain;
  background: #f7f7f7;
  border-radius: 8px;
}

/* Testo alleggerito */
.featured-item h3{
  font-size: 14px;
  font-weight: 600;       /* meno “urlato” rispetto al bold pieno */
  line-height: 1.35;
  color: #4f4e4e;
  margin: 10px 6px 2px;
  text-transform: none;
}

/* Frecce: leggermente staccate e non coprono il contenuto */
.featured-prev, .featured-next{
  top: 38%;
  box-shadow: 0 6px 14px rgba(227,74,67,.25);
}

/* Scrollbar sottile e discreta (non sovrapposta ai bordi card) */
.featured-track{
  scrollbar-width: thin;              /* Firefox */
  scrollbar-color: #d0d0d0 transparent;
}
.featured-track::-webkit-scrollbar{   /* Chrome/Edge/Safari */
  height: 8px;
}
.featured-track::-webkit-scrollbar-track{
  background: transparent;
}
.featured-track::-webkit-scrollbar-thumb{
  background: #d0d0d0;
  border-radius: 8px;
}

/* Responsivo */
@media (max-width: 1024px){
  .featured-item{ flex: 0 0 28%; }
}
@media (max-width: 768px){
  .featured-item{ flex: 0 0 46%; }
  .featured-prev, .featured-next{ display:none; } /* su mobile si trascina col dito */
}


/*=====================ELEMENTI LEGACY NON USATI=====================*/

#tema {
	position: absolute;
	top: 0px;
	left: 2px;
	height: 368px;
	width: 1076px;
	background-color: white;

}

#tema img {
	border: none;
	height: 368px;
	width: 1076px;

}

/*
	#top_toolbox, #top_toolbox2
	{
		position: absolute;
		top: 78px;
		right: 10px;
		width: 200px;
		height: 14px;
		padding: 0px;
		overflow: hidden;
	}
	#top_toolbox2{
		top: 100px;
	}
	*/

#cuscino {
	width: 1000px;
	clear: both;
	left: 20px;
	top: 0px;
	padding: 0px;

	height: 64px;
	z-index: 3;
	background-image: url(immagini/cuscino.jpg);

}


#xcenter {
	float: left;
	width: 1000px;
	margin-left: 0px;
	margin-top: 20px;

}

#fcenter {
	float: left;
	width: 880px;
	margin-left: 10px;
	margin-top: 10px;

}


#left {
	float: left;
	width: 50%;
	margin-left: 0px;
	margin-top: 0px;

}

.left {
	float: left;
	width: 296px;
	margin-left: 0px;
	margin-top: 0px;

}

#right {
	float: left;
	width: 50%;
	margin-left: 0px;
	margin-top: 0px;


}

.right {
	float: left;
	width: 960px;
	margin-left: 20px;
	margin-top: 0px;
}

/* 7) Griglie legacy basate su float → fallback responsive */
#left,
#right
{
	float: none;
	width: 100% !important;
}

@media (min-width: 900px) {

	#left,
	#right {
		float: left;
		width: 50% !important;
	}
}

/*======================FOOTER======================*/

#footer {

	text-align: center;
	background-color: #0b0c10ee;

	position: static !important;
	margin-top: 0px;/*auto*/
	/* lo spinge in basso quando la pagina è corta -> ora non serve , si espande #contents */
	width: 100%;
	min-height: 212px;
	/* rispetta il design attuale */

	background-image: url(immagini/vago-footer-scaled.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right;
	background-blend-mode: overlay;

}
#foowrapper {
	width: 100%;
	min-height:262px;
	position: relative;
}

/*non serve più? */
#foocuscino_____ {
	position: relative;
	width: 100%;
	height: 212px;
}

/*
	#foosep{
		
		width: 980px;
		height: 6px;
		
		background-image: url(immagini/bgfoosep.png); 
		margin-left: 22px
	}
	#foomenu
	{
		width: 340px;
		height: auto;
		padding:0px;
		float:left;
		margin-top:35px;
	 text-align: left;	
		 margin-left: 52px;
		 
	}
		#foomenu2
	{
		width: 300px;
		height: auto;
		padding:0px;
		float:left;
		margin-top:35px;
	 text-align: left;	
		 
		 
	}
		#foomenu3
	{
		width: 300px;
		height: auto;
		padding:0px;
		float:left;
		margin-top:35px;
	 text-align: left;	
		 
		 
	}
	*/
#fooin {
	width: 100%;
	position: static !important;
	/* erano absolute */
	top: auto !important;
	left: auto !important;
}

#fooinfo {
	width: auto;
	/*height: 20px;
	position: absolute;
	top: 10px;
	left: 16px;*/
	overflow: hidden;
	padding: 0px;
}

#foocreditscnt {

	bottom: 0px;
	/*height: 37px;
	background-color: #333333;*/
	z-index: 100;
	position: absolute;
    width: 100%;
}

#fooin .footer-columns {
	/*display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 24px;
	padding-left: 12px;
	padding-right: 12px;
*/
	display: grid !important;
	grid-template-columns: repeat(3, minmax(220px, 1fr));
	gap: clamp(12px, 2vw, 28px);
	align-items: start;
	padding: 16px;
	padding-top: 26px;
}


.colonnafoo,
.colonnafoo2 {
	/*flex: 1 1 300px;
	
	max-width: 33%;
	box-sizing: border-box;
	margin: 0;*/
	margin-top: 0;
	text-align: left;
	line-height: 200%;


	flex: 1 1 auto;
	max-width: 100% !important;
	margin: 0;

}

.colonnafoo2 {
	max-width: 66%;
}

/* social */
.av-footer__social{display:flex;gap:12px}
.av-footer__sociallink{display:inline-flex;width:32px;height:32px;border:1px solid var(--line);border-radius:999px;align-items:center;justify-content:center;transition:transform .15s ease}
.av-footer__sociallink:hover{transform:translateY(-1px)}
.av-footer__sociallink svg{width:16px;height:16px;fill:var(--fgw)}

@media (max-width: 1000px) {
	#foocreditscnt {
		height:auto;
		position: relative;
		padding: 12px 0;
		text-align: center;
	}

}

/* Per schermi piccoli, le colonne vanno in verticale * /
@media (max-width: 980px) {
	#fooin .content {
		flex-direction: column;
		gap: 12px;
	}

}
/* sotto 980px NON nascondiamo più la terza colonna * /
@media (max-width: 980px){
  #fooin .footer-columns{
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
  #colonnafoo3{
    display: block !important;
  }
}
*/
/* sotto 800px tutte in colonna (pulito e leggibile) */
@media (max-width: 800px){
  #fooin .footer-columns{
    grid-template-columns: 1fr;
  }
  /* non nascondere .colonnafoo2 */
  #colonnafoo2{
    display: block !important;
  }
}

.button_foo {
	width: 62px;
	height: 30px;

	float: left;
	margin-left: 8px;
	border: none;
	border-radius: 0px;
	background-repeat: no-repeat;
	background-color: #bf0000;
	text-align: center;
	cursor: pointer;
}

.button_foo p {
	text-align: center;
	padding-top: 9px;
	color: white;
}


/*=====================ALTRI ELEMENTI DI PAGINA=====================*/
/* -------------------------------------------------------- */

#main_overlay,
#main_woverlay {
	position: fixed;
	top: 0px;
	left: 0px;
	margin: auto;
	text-align: center;
	width: 100%;
	height: 200%;
	z-index: 2000
}

#overlay,
#woverlay {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	min-height: 100%;
	z-index: 2900;
}

#cnt_overlay {
	position: absolute;
	margin: auto;
	background-color: #bf0000;
	border-bottom: solid 2px #bf0000;
	z-index: 2920;
}

#titleoverlay {
	width: 100%;
	height: 36px;
	cursor: move;
}

#overlay,
#woverlay {
	background-color: Gray;
	filter: alpha(opacity=60);
	opacity: 0.6;
}

/*
 #woverlay{
 	
	 background-color: Black; 

 }
 */
#overlayframe {
	width: 1050px;
	height: 640px;
}

#loading {
	width: 96px;
	height: 96px;
	position: absolute;
	margin: auto;

	top: 50%;
	left: 50%;
	margin-left: -48px;
	margin-top: -48px;
	z-index: 2400;

}

#cnt_woverlay {

	position: absolute;
	margin: auto;
	/*
    width: 820px;
    height:  470px;
    top: 50%;
    left: 50%;
    margin-left: -410px;
    margin-top: -235px;
    */
	z-index: 2400;
}
#titleframe {
	color: #ffffff;
	float: left;
	margin: 5px
}

#closeframe,
#closeframe a {
	color: #ffffff;
	float: right;
	margin: 5px
}


#alertbox {
	width: 400px;
	height: 220px;
	border: solid 6px #bF0000;
	background: #efefef;
	display: inline-table;
}

#alertbox p {
	padding: 12px
}

/* ------------------------------------------------------------ */

.box2,
.box3 {

	margin: 0px;
	padding: 0px;

}

.box2 {
	margin-top: 26px;
}

.box1,
.box7,
.box1x {
	width: 100%;
	padding: 0px;
	margin: 0;
	margin-top: 36px;
	clear: both;
	display: block;
}

.boxinfo {
	max-width: 260px;
	/*height: 245px;*/
	border-color: #e6e6e6;
	border-style: solid;
	border-width: 1px;
	background-color: #ffffff;
	float: right;
	padding: 8px;
}


.ml {
	margin-left: 18px;
}

.nodec {
	text-decoration: none;
}

.cntbox2 {
	position: relative;
	left: 12px;
	top: -8px;
	width: 276px;
	height: 86px;
}

.box4 {

	width: 470px;
	height: 417px;
	background-color: #F6F6F6;

	margin: 0px;
	margin-top: 18px
}



.box_in {
	width: 90%;
	padding: 20px;
	text-align: left;

}

.boxc_in {
	width: 90%;

	text-align: center;

}

.box_cnt {
	padding: 12px;
}



.box5,
.box5t {

	width: 726px;
	height: auto;
	padding: 0px;
	margin: 0px;
	float: left;
	margin-top: 26px;
	margin-left: 10px;
	margin-right: 10px;
}

.titolobox1 {
	width: 686px;
	height: 45px;
	text-align: center;
	background-image: url(immagini/bgtitoloscheda.jpg);
}

.box6,
.box6t {

	width: 276px;
	height: auto;
	padding: 0px;
	margin: 0px;
	float: left;
	margin-top: 26px;
	margin-left: 10px;
	margin-right: 10px;
}

.box8 {
	clear: both;
	width: 100%;
	height: auto;
	padding: 0px;
	margin: 0px;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 26px;
}

.box8t {
	clear: both;
	width: 1002px;
	height: auto;
	padding: 0px;
	margin: 0px;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 26px;
}

.box10 {

	width: 525px;
	height: auto;
	padding: 0px;
	margin: 10px;

	margin-top: 26px;
}

.box9 {

	width: 253px;
	height: auto;
	padding: 0px;
	margin: 0px;
	float: right;
	margin-top: 26px;
	background-image: url(immagini/bgbox9.png);
	background-repeat: repeat-y;
}

.box9top {
	width: 253px;
	height: 17px;
	padding: 0px;
	margin: 0px;
	position: relative;
	top: 0px;
	left: 0px;
	background-image: url(immagini/bgbox9top.png);
}

.box9in {
	width: 253px;
	height: auto;
	padding: 10px;
	margin: 0px;
	position: relative;
	top: 0px;
	left: 0px;

}

.box9down {
	width: 253px;
	height: 17px;
	padding: 0px;
	margin: 0px;
	position: relative;
	top: 0px;
	left: 0px;
	background-image: url(immagini/bgbox9down.png);
}



.rounded {

	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	/**/
}
.shadowed {

	box-shadow: var(--shadow);
	/**/
}

.spessore {
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 10px;

	clear: both;

}

.clearbox {
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 1px;

	clear: both;

}

.separatore {
	clear: both;
	width: 100%;
	height: 10px;
	border: none;
	border-bottom: solid 1px #D7D7D7;
	border-bottom-style: dashed;
}



.fleft {

	float: left;
}
.fright {

	float: right;
}

.fleftm {

	float: left;
	margin-left: 14px;
}

.frightm {
	margin-right: 14px;
	float: right;
}


.spaced {
	margin-left: 10px;
	margin-right: 10px;
}

.fcenter {
	width: auto;
	height: 100%;
	margin: auto;

}

.invisibile {
	background-color: transparent;
	background-image: none;
	border: none;
}

.label {
	font-weight: bold;
}
.element {
	clear: both;
	float: left;
}

/* ---------------------------------------- */




.button,
.button1 {

	font-family: Arial;
	font-size: 16px;
	font-style: normal;
	text-decoration: none;
	padding: 0px;
	overflow: hidden;
	text-align: center;
	font-weight: normal;
	margin: 0px;
	width: 186px;
	height: 43px;
	border-radius: 8px;
	background-repeat: no-repeat;
	background-color: #E34A43;
	background-position: right;
	color: #ffffff;
	cursor: pointer;
	-webkit-transition: background 1000ms;
	transition: background 1000ms;
	-moz-transition: background 1000ms;
	-o-transition: background 1000ms;
}



.button:hover,
.button1:hover,
.rbutton2:hover,
.button2:hover {
	background-color: #E34A43;
	opacity: 0.8;
}

.button1 {
	background-image: url(immagini/button1.png);
}


.rbutton1 {
	font-family: Arial;
	font-size: 16px;
	font-style: normal;

	text-decoration: none;
	padding: 0px;

	overflow: hidden;
	text-align: center;
	font-weight: normal;

	margin: 0px;
	width: 186px;
	height: 45px;

	background-image: url(immagini/button1r.png);
	/*
	background-repeat: no-repeat;
	background-color: #FC8342;
	background-position: left;
	*/
	color: #ffffff;

	cursor: pointer;
}

.rbutton1 p {
	font-weight: normal;
	color: #ffffff;
	padding-top: 10px;
	padding-left: 35px;
	text-decoration: none;
}

.button div,
.button1 p,
.button1 div{
	font-weight: normal;
	color: #ffffff;
	padding-top: 11px;
	padding-right: 35px;
	line-height: 150%;
}


.button3,
.button3b {
    font-family: system-ui, -apple-system, 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: 2px 16px;
    overflow: hidden;
    text-align: center;
    margin: 0;
    min-width: 100px;
    height: auto;
    background-image: none; /* rimuovi l'immagine legacy */
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #ced4da;
    border-radius: 6px;
    color: #495057;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.button3:hover,
.button3b:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    border-color: #e34a43;
    color: #e34a43;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(227, 74, 67, 0.15);
}

.button3:active,
.button3b:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}


.button2,
.button4,
.rbutton2,
.rbutton4 {
	font-family: Arial;
	font-size: 14px;
	font-style: normal;
	text-decoration: none;
	padding: 0px;
	overflow: hidden;
	text-align: center;
	font-weight: normal;
	margin: 0px;
	width: 110px;
	height: 24px;
	color: #ffffff;
	cursor: pointer;
	-webkit-transition: background 1000ms;
	transition: background 1000ms;
	-moz-transition: background 1000ms;
	-o-transition: background 1000ms;
	border-radius: 4px;
}

.button2 {
	background-image: url(immagini/button2.png);
	background-repeat: no-repeat;
	background-color: var(--accent);
	background-position: right;
	padding-right: 16px;
}

.button4 {
	background-color: #bF0000;

}

.rbutton2,
.rbutton4 {
	background-image: url(immagini/button2r.png);
	background-repeat: no-repeat;
	background-color: var(--accent);
	background-position: left;
	padding-right: 0px;
	padding-left: 16px;
	position: relative;
}

.rbutton2::before,
.rbutton4::before {
	content: "←";
	display: inline-block;
	margin-right: 4px;
	font-weight: bold;
	font-size: 13px;
}

.button2 div,
.button4 div {
	font-weight: normal;
	color: #ffffff;
	padding: 4px;
	line-height: 100%;
}



.rbutton2 div,
.rbutton2 p .rbutton4 div {
	font-weight: normal;
	color: #ffffff;
	line-height: 100%;
	padding-left: 19px;
	padding: 4px;
}

.buttonsm {
	width: 100px;
}



.paginazioneofferte {
	margin-left: 18px;
}

#paginazione_main {

	border: solid 1px #E9E9E9;
	width: 130px;
	float: left;
	margin-right: 5px;
	font-size: 14px;
	height: 28px;
}

.pbox {
	float: left;
	border: solid 1px #E9E9E9;
	width: 28px;
	height: 28px;
	margin-right: 5px;
	text-align: center;
	color: #333333;
	font-size: 14px;
	cursor: pointer;
}

.pboxon {
	float: left;
	border: solid 1px #E9E9E9;
	width: 28px;
	height: 28px;
	margin-right: 5px;
	text-align: center;
	background-color: #333333;
	color: white;
	font-size: 14px;
	cursor: pointer;
}

#paginazione_main a {
	color: #333333;
}

.pboxnav {
	float: left;
	border: solid 1px #E9E9E9;
	width: 24px;
	height: 28px;
	margin-right: 5px;
	font-size: 12px;
	text-align: center;
	color: #333333;
}


#menu3 {
	width: auto;
	height: 22px;
	/*position: absolute;
	top: 12px;
	right: 16px;*/
	overflow: hidden;
	padding: 0px;

}

#toolbar2 {

	width: 200px;
	height: auto;
	position: absolute;
	top: 0px;
	right: 2%;
	cursor: pointer;
	padding: 0px;

}

#icotoolbar2 {

	width: 48px;
	height: 48px;
	position: absolute;
	right: 0px;
	top: 0px;
	display: none;
	background-image: url(immagini/menu.png);
	background-size: cover;
}

#dropdownmenu {

	width: 280px;
	height: auto;
	position: absolute;
	left: -2px;
	top: 48px;
	background-color: White;
	/*display: none;*/
	z-index: 10;
	border: solid 2px black;
	border-top: none;
}

#cercacnt {
	position: absolute;
	top: 1px;
	right: 0px;

	border-right-color: #eeeeee;
	border-right-style: solid;
	border-right-width: 1px;

	border-left-color: #eeeeee;
	border-left-style: solid;
	border-left-width: 1px;

	height: 63px;
	width: 166px;

	background-color: White;

}

#cercacnt img {
	position: absolute;
	top: 0px;
	right: 0px;
	border: none;

}

.input_cerca {
	width: 110px;
	height: 16px;
	background-color: transparent;


	/* margin-top: 24px;*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #747474;
}

.input_cerca img {
	margin: 0px;
	padding: 0px;
}



.input_foo {
	width: 152px;
	height: 30px;

	float: left;
	border: none;
	border-radius: 0px;
	background-repeat: no-repeat;
	background-color: #ffffff;
	font-size: 11px;
}

.input_gray {
	width: 203px;
	height: 29px;
	background-image: none;
	background-color: #dddddd;
	border: 1px solid #ababab;
	color: #565656;
}

.textarea_gray {
	width: 100%;
	height: 190px;
	background-image: none;
	background-color: #dddddd;
	border: 1px solid #ababab;
	color: #565656;
}



.freccia {
	background-image: url(immagini/freccia.png);
	background-position: left;
	background-repeat: no-repeat;
	padding-left: 25px;
}

.accordiontitle {
	background-image: url(immagini/piu.png);
	background-position: left;
	background-repeat: no-repeat;
	padding-left: 36px;
	cursor: pointer;
}

.accordion {
	max-height: 0;
	overflow: hidden;
	-webkit-transition: max-height 1000ms;
	transition: max-height 1000ms;
	-moz-transition: max-height 1000ms;
	-o-transition: max-height 1000ms;
}

.boxgray {
	width: auto;
	height: auto;
	background-color: #F6F6F6;
	padding: 14px;
}

.boxnogray {
	width: 100%;
	height: auto;

	padding: 16px;
}

.green {
	color: green;
}

#formlogin {
	position: relative;
}

#ricorda_passw {
	position: relative;
	overflow: hidden;
}

.megathumbx {
	width: 329px;
	height: 169px;
	border: 0;

	margin: 1px;
	margin-bottom: 0px;
}

.megathumbcntx {
	float: left;
	width: 331px;
	height: 401px;
	background-color: #f5f5f5;
	margin: 20px;
	text-align: center;
	border: 1px solid #dedede;
}

.megathxombra {
	position: relative;
	left: 0px;
	top: 0px;
	width: 329px;
	height: 29px;
	background-image: url(immagini/megathxombra.png);
	background-size: 100% 200%;
}

.megathxtitolo {

	position: absolute;
	left: 0px;
	top: 17px;
	width: 459px;
	height: 39px;
	padding-left: 52px;
	text-align: left;
	background-image: url(immagini/cerchiogt.png);
	background-position: left;
	background-repeat: no-repeat;
	padding-top: 18px;

}

.megathtxt {
	position: relative;
	left: 0px;
	top: 0px;
	/*width:459px;*/
	height: 125px;
	padding: 8px;
}

.megathumbcnt {
	float: left;
	width: 301px;
	height: 285px;
	background-color: #dddddd;
	margin: 10px;
	text-align: center;
	background-image: url(immagini/bgmegathumb.jpg);
	background-position: bottom;
	background-repeat: repeat-x;
}

.thumbcnt {
	float: left;
	width: 221px;
	height: 222px;
	background-color: #dddddd;
	margin: 10px;
	text-align: center;
	background-image: url(immagini/bgthumb.jpg);
	background-position: bottom;
	background-repeat: repeat-x;
}

.megathumb {
	width: 301px;
	height: 233px;
	border: 0;
	margin: 0px;

}

.thumb {
	width: 221px;
	max-height: 170px;
	border: 0;
	margin: 0px;

}

.minithumb {
	max-width: 90px;
	max-height: 90px;
	border: 0;
	margin: 0px;

}

.cnthtmlslide {}

.imginslide {
	position: absolute;

	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;

}

.imginslide0 {
	top: 60px;
	left: 20%;
	height: 280px;
}

.imginslide1 {
	top: 60px;
	margin-left: 50%;
	height: 280px;
	left: -105px;

}

.imginslide2 {
	top: 60px;
	right: 20%;
	height: 280px;
}

.titolo_scheda {
	width: 100%;
	height: 21px;
	padding-left: 29px;
	background-image: url(immagini/icotitolo.png);
	background-position: left;
	background-repeat: no-repeat;
}

.boxtitolo {
	width: 100%;
	margin-bottom: 12px;
	text-align: left;
}

/* NON USATO */
.boxtitolotesto____ {
	float: left;
	width: auto;
	height: 21px;
	background-color: White;
	line-height: 100%;
}

.icotitolo {

	/*
		float: left;
		width:30px;
		height: 21px;
		background-image: url(immagini/icotitolo.png); 
		background-position: left;
		background-repeat: no-repeat;
		*/
	width: 0px;
	height: 0px;
	display:none;
}

.bullettitolo {
	/*
		float: left;
		width:24px;
		height: 21px;
		background-image: url(immagini/bulletriga.png); 
		background-position: left;
		background-repeat: no-repeat;
		*/
		display:none;
}

.slider_scheda_cnt {
	width: 540px;
	height: 471px;
	float: left;
	margin: 0px;
}

.des_scheda_cnt {
	width: 392px;
	height: auto;
	float: left;
	margin-left: 16px;
	margin-top: 37px;
}

.slider_scheda {
	position: relative;
	left: 0px;
	height: 417px;
	width: 540px;
	top: 16px;
	background-color: silver;
}

.separatore_scheda {
	position: relative;
	top: 0px;
	left: 5px;
	width: 530px;
	border-bottom: solid 1px #eeeeee;
	height: 10px;
}

.scheda_testo {
	padding: 5px;
}

#tree {
	position: absolute;
	width: auto;
	height: 27px;
	right: 60px;
	top: 58px;
	background-color: White;
	background-image: url(img_catalogo/treehome.jpg);
	background-position: left;
	background-repeat: no-repeat;
}

#tree p {
	padding: 4px;
	padding-left: 28px;
	color: #777777;
	padding-top: 5px;
}

.colonna50 {
	width: 470px;
	height: auto;
	float: left;
	margin: 0px;
}

.cliccabile,
.imgcliccabile,
.pointer {
	cursor: pointer;
	border: none;
}

.cliccabile:hover {
	text-decoration: underline;
}
.imgcliccabile:hover {
	transform: scale(1.05, 1.05);
}

.riga {
	height: 36px;
	margin-top: 7px;
	width: 90%;
}

.riga p {
	padding-top: 4px;
	padding-left: 44px
}

.riga_home {
	background-image: url(immagini/home.jpg);
	background-position: left;
	background-repeat: no-repeat;

}

.riga_tel {
	background-image: url(immagini/telefono.jpg);
	background-position: left;
	background-repeat: no-repeat;

}

.riga_fax {
	background-image: url(immagini/fax.jpg);
	background-position: left;
	background-repeat: no-repeat;

}

.riga_scrivi {
	background-image: url(immagini/scrivi.jpg);
	background-position: left;
	background-repeat: no-repeat;

}

.riga_star {
	background-image: url(immagini/star.jpg);
	background-position: left;
	background-repeat: no-repeat;

}

.thumbgridx {
	float: left;
	width: auto;
	height: 50px;
	margin: 4px;
	margin-left: 20px;
}



.item {
	width: 218px;
	height: 280px;/*306px;*/
	float: left;
	margin-top: 38px;/*50px;*/
	margin-left: 18px;
	/*
		border-top-left-radius: 8px; 
		border-top-right-radius: 8px;
		border-bottom-left-radius: 8px; 
		border-bottom-right-radius: 8px;
		*/
	border: solid 1px #dddddd;
}
.item_fullwidth {
	width: 100%;
	height: 150px;
	max-width:922px;
}
.bigitem {
	width: 284px;
	height: 349px;
	float: left;
	margin-top: 50px;
	margin-left: 4px;
    background-color: #ffffff;
	border: solid 1px #dddddd;
}

.smitem {
	width: 96px;
	height: 114px;
	float: left;
	/*	
		border-top-left-radius: 8px; 
		border-top-right-radius: 8px;
		border-bottom-left-radius: 8px; 
		border-bottom-right-radius: 8px;
		*/
	border: solid 1px #dddddd;

	margin-bottom: 10px;
}

.itemsCnt {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.itemP {
	width: 200px;
	height: 200px;
	border: solid 1px silver;
	text-align: center;
	margin: 9px;

}

.itemP img {
	max-width: 160px;
	max-height: 160px;
	margin: 20px;
}

.itemPR {
	width: 200px;
	height: 200px;
	border: solid 1px silver;
	text-align: center;
	margin-left: 18px;
	margin-top: 18px;
	display: inline-table;
	border-radius: 100px;
}

.itemPR img {
	max-width: 140px;
	max-height: 140px;
	margin-top: 35px;
}

.smitem:hover {
	border-color: #F06100;
}

.schedaprodotto {

	width: 624px;
	height: auto;
	float: left;
	margin-top: 50px;
	margin-left: 18px;



}

.underlined {
	border: none;
	border-bottom: solid 1px #00548A;
	;
}

.itemnews {
	width: 468px;
	height: 106px;
	float: left;
	margin-top: 50px;
	margin-left: 32px;
}

.item_titolo,
.item_titolo_logged,
.itemoffertabig_titolo {
	position: absolute;
	left: 0px;
	width: 216px;
	height: 53px;
	line-height: 120%;
	overflow: hidden;
	text-align: center;
	background-color: #F6F6F6;
	z-index: 100;
}

.item_titolo {
	top: 222px;
}

.item_titolo_logged {
	top: 190px;
}

.itemoffertabig_titolo {

	left: 12px;
	width: 260px;

}

.titolo_prodotto {
	margin: 8px;
}

.item_prezzo {
	position: absolute;
	height: 35px;
	top: 243px;
	width: 216px;
	background: #f6f6f6;
	/* color: #F47926;*/
	text-align: center;
	line-height: 120%;
	z-index: 100;
	font-weight: bold;
	border-top: solid 1px white;
}

.itemOver {
	position: absolute;
	height: 42px;
	top: 234px;
	width: 216px;
	background: #E34A43;
	color: #ffffff;
	text-align: center;
	line-height: 120%;
	-webkit-transition: top 1000ms;
	transition: top 1000ms;
	-moz-transition: top 1000ms;
	-o-transition: top 1000ms;
}

.itemOverH {
	position: absolute;
	height: 42px;

	width: 216px;
	background: #bf0000;
	color: #ffffff;
	text-align: center;
	line-height: 120%;
	top: 230px;
}

.itemnews_titolo {
	position: absolute;
	top: 0px;
	left: 153px;
	width: 297px;
	height: 24px;
	line-height: 120%;
	overflow: hidden;
	text-align: left;
}

.itemofferta_subtitolo,
.itemoffertabig_subtitolo {
	position: relative;
	top: 4px;
	left: 9px;
	width: 200px;
	height: 20px;
	line-height: 120%;

	text-align: center;
}

.itemoffertabig_subtitolo {

	left: 12px;
	width: 260px;

}


.itemnews_subtitolo {
	position: absolute;
	top: 20px;
	left: 153px;
	width: 297px;
	height: 20px;
	line-height: 120%;
	overflow: hidden;
	text-align: left;
}

.itemofferta_testo {
	position: absolute;
	top: 40px;
	left: 153px;
	width: 172px;
	height: 59px;
	line-height: 150%;
	overflow: hidden;
	text-align: left;
}

.itemnews_testo {
	position: absolute;
	top: 40px;
	left: 153px;
	width: 297px;
	height: 59px;
	line-height: 150%;
	overflow: hidden;
	text-align: left;
}

.itemofferta_button {
	position: absolute;
	top: 76px;
	right: 0px;
	width: 172px;
	height: 18px;

}

.itemofferta_imgcnt {
	position: relative;
	top: 9px;
	left: 9px;
	width: 200px;
	height: 240px;


}

.item_imgcnt {
	position: absolute;
	top: 9px;
	left: 9px;
	width: 200px;
	height: 160px;

}

.item_imgcnt_logged {
	position: relative;
	top: 9px;
	left: 9px;
	width: 200px;
	height: 160px;

}

.itemFullWrapper
{
	position:relative; display:flex; align-items:center; height:150px;
	padding: 9px; /* sostituisce i margin dei singoli elementi */
}
.item_imgcnt_logged_fw {
	/*position: absolute;
	top: 9px;
	left: 9px;*/
	width: 200px;
	height: 140px;
	flex: 0 0 200px; /* larghezza fissa */
    margin-right: 20px;

}
.item_descriz_logged_fw
{
	/*position: absolute;
	top: 9px;
	left: 200px;*/
	flex: 1; /* si espande per occupare tutto lo spazio rimanente */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	width: 100%;
	height: 140px;
    
}

.itemofferta_img {
	max-width: 200px;
	max-height: 240px;
	margin: 0px;
}
.item_prezzo_fw
{
	font-weight: bold;
	width: 100%;
}

.item_img {
	max-width: 200px;
	max-height: 236px;
	margin: 0px;
}

.item_img_logged {
	max-width: 190px;
	max-height: 200px;
	margin: 0px;
}

.itemofferta_bigimgcnt {
	/*position: relative;
	top: 9px;
	left: 12px;
	width: 260px;
	height: 324px;*/
    width: 100%;
	max-width: none;
	height: auto;              /* niente altezze rigide */
}

.itemofferta_bigimg {
	/*max-width: 260px;
	max-height: 324px;
	margin: 0px;*/
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;           /* niente “260px” rigidi */
	max-height: none;
	object-fit: contain;
}

/* === Product detail layout === */
.product-grid{
  display: grid;
  grid-template-columns: minmax(280px, 460px) 1fr; /* img | contenuti */
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
}

/* il blocco immagine esistente */
.product-grid .bigitem{
  margin: 0;                 /* via i margini legacy */
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 12px;
  padding: clamp(10px, 2vw, 16px);
  box-shadow: var(--shadow);
}
/* colonna contenuti */
.product-grid .schedaprodotto{
  margin: 0;
}

.smimgcnt {
	position: relative;
	top: 6px;
	left: 8px;
	width: 81px;
	height: 101px;
	background-color: White;

}

.smimg {
	max-width: 81px;
	max-height: 101px;
	margin: 0px;
}

.itemnews_imgcnt {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 130px;
	height: 99px;
	background-color: #dddddd;

}

.itemnews_img {
	width: 128px;

	margin: 14px;
}

.itemnews_imgth {
	width: 124px;

	margin: 3px;
}

.rigaboxgrande {
	margin: auto;
	width: 950px;
	text-align: center;
	position: relative;
	height: 285px;
}

.icobox21 {
	position: absolute;
	width: 64px;
	height: 76px;
	top: -38px;
	left: 50%;
	margin-left: -32px;
	z-index: 100;
	background-image: url(immagini/icobox1.png);
}

.icobox22 {
	position: absolute;
	width: 64px;
	height: 76px;
	top: -38px;
	left: 50%;
	margin-left: -32px;
	z-index: 100;
	background-image: url(immagini/icobox2.png);
}

.icobox23 {
	position: absolute;
	width: 64px;
	height: 76px;
	top: -38px;
	left: 50%;
	margin-left: -32px;
	z-index: 100;
	background-image: url(immagini/icobox3.png);
}

.icoboxcerca {
	position: absolute;
	width: 64px;
	height: 76px;
	top: -38px;
	left: 50%;
	margin-left: -32px;
	z-index: 100;
	background-image: url(immagini/icoboxusers.png);
}

.rigafullgray {
	background-image: url(immagini/bgrigagray2.jpg);
	height: 465px;
	width: 100%;
	background-repeat: repeat-x;
}

.fascia1
{
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 0;              /* Rimuovi padding per controllo preciso */
  min-height: 60px;        /* Altezza minima per garantire spazio */	
}
.fascia1 .box_in{

  display: flex;
  justify-content: space-between;
  /*flex-wrap: wrap;
  gap: 12px;
  padding: clamp(12px, 2.4vw, 18px);
  flex: 1;                 /* Occupa tutto lo spazio disponibile * /
  background: #f6fbff;     /* facoltativo: leggero azzurro come nel tuo screenshot * /
  */
   border-radius: 14px;
  width: 100%;
}
.fascia1 .titolo_big{
  margin: 0;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.2; /* aiuta ad allineare meglio al centro */
}
.fascia1 > * {              /* Tutti i figli diretti */
  flex-shrink: 0;          /* Non si restringono */
}

.bordered {
	border: none;
	border-bottom: solid 1px #eeeeee;
	border-top: solid 1px #eeeeee;
}

.borderedfull {
	border: solid 1px #e7e7e7;
}




.boxpagoff {
	width: 22px;
	height: 22px;
	color: gray;
	border: 1px solid #e0e0e0;

	background-color: #fafafa;
	float: left;
	margin-left: 6px;
}

.boxpagon {
	width: 22px;
	height: 22px;
	color: white;
	border: 1px solid #B56127;
	background-color: #EA8B49;

	float: left;
	margin-left: 6px;
}
.boxpag {
	padding-top: 4px;
}

ul.submenu {
	list-style: disc;
	list-style-position: outside;
	line-height: 130%;
	font-size: 13px;
}

.boxmenu {
	width: auto;
	height: auto;
	background-color: #F6F6F6;
}

.piumenowrapper {}

ul.piumeno {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 28px;
	top: -7px;
	position: relative;
}
ul.piumeno li {
	height: 18px;
	font-size: 20px;
	margin-left: 2px;
	text-align: center;
}

ul.elenco {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 150%;
}

ul.elenco3 {
	list-style: none;
	margin: 0;
	padding: 0;
	margin-left: 20px;
	line-height: 100%;

}

ul.elenco2 {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 130%;
}

ul.elenco3 li {
	text-align: left;
	font-size: 13px;
	padding-top: 8px;
}

ul.elenco li {
	margin-left: 0px;
	padding: 6px;
	text-align: left;
	border: none;
	/*height: 44px;
	background-image: url(immagini/freccia-grigia.png);
 	 background-position:  -6px 9px ;
	 background-repeat: no-repeat; */
	border-bottom: solid 2px #ffffff;
	color: #333333;
}

ul.elenco li p {

	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
}

ul.elenco li p.titolo:hover {}

ul.elenco li:hover,
ul.elenco li.sel {
	background-color: var(--accent);
	color: white;
}


ul.elenco li.elenco2,
ul.elenco li.elenco3 {
	margin-left: 0px;
	padding-left: 20px;

	/*height: 32px;*/
	border: none;

	background-image: none;

}

#selectAzCnt {
	overflow: auto;
}

#slider2cnt {
	position: relative;
	height: auto;
	width: 960px;
	overflow: hidden;
}

ul#slider2 {
	background-color: transparent;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	position: relative;
	top: 0px;
	left: 0px;
	width: 4000px;
	height: 240px
}

ul#slider2 li {
	float: left;
}

.bullet {
	cursor: pointer;
}

a.elenco,
a.elenco2 {

	font-size: 14px;
	font-style: normal;

	text-decoration: none;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;

	font-weight: normal;


}

a.elenco {
	font-size: 13px;
	color: #ffffff;
}

a.elenco2 {
	font-size: 14px;
	color: #222222;
	/*#00548A;*/
}

a.elenco:hover,
a.elenco2:hover {
	text-decoration: underline;
}

#thumbsprod {

	float: left;
	width: 118px;
	height: 370px;
	margin: 0px;
	margin-top: 50px;
	overflow-y: auto;
}



.coccarda {
	position: absolute;
	top: -18px;
	left: -18px;
	width: 148px;
	height: 26px;
	background: #E34A43;
	color: white;
	z-index: 100;
	box-shadow: silver 2px 2px 3px;
	font-size:15px;
	text-align:center;
}
.etichettagray {
	position: absolute;
	top: -18px;
	left: -18px;
	width: 148px;
	height: 26px;
	background: #2b2c35;
	color: white;
	z-index: 100;
	box-shadow: silver 2px 2px 3px;
	font-size:15px;
	text-align:center;
}

.imgcoccarda {
	width: 30px;

}

.barrato {
	text-decoration: line-through;
}

.boxevi1 {

	text-align: center;
	width: 100%;
	position: relative;
	left: 0px;
	top: 0px;
}

.boxevi1 {
	color: #ed1e2d;
	;
	background-color: #F5F296;
	font-weight: bold;
}

.divelencocat {
	background-color: #bf0000;
}

.divBrand,
.divBrandevi {
	width: 214px;
	height: 94px;

	margin: 4px;
	border: solid 1px #e7e7e7;
	cursor: pointer;
}


.divBrandevi {
	border: solid 2px #FF1000;

}

.divBrand:hover {

	border: solid 1px #FF1000;
	cursor: pointer;
}

.divBrandevi:hover {
	border: solid 2px #FF1000;

}

.tablegrid,
table.tablegrid td,
table.tablegrid th {
	border-style: solid;
	border-width: 1px;
	border-color: #cccccc;
	border-collapse: collapse;
	text-align: center;
	line-height: 120%;
	padding: 6px;
	font-size:14px;
}

table.tablegrid th {
	font-weight: bold;
	color: #bf0000;
}

table.tablegrid td {}

.tablegrid2,
table.tablegrid2 td,
table.tablegrid2 th {
	border-style: solid;
	border-width: 1px;
	border-color: #cccccc;
	border-collapse: collapse;
	text-align: center;
	line-height: 120%;
}

table.tablegrid2 th {
	background-color: White;
	color: #00548A;
	font-weight: normal;
}

table.tablegrid2 td {
	background-color: White;
}

.basketoff {
	background-image: url(immagini/add2cart.png);
	background-position: left;
	height: 36px;
	width: 36px;
    transition: opacity 300ms ease 200ms; /* 200ms delay */
}
.basketoff:hover {
	opacity: 0.7;
	 transition: opacity 300ms ease; /* nessun delay all'ingresso dell'hover */
}

#searchFormCnt {
	text-align: center;
}

#searchForm {
	display: inline-block;
}


#searchFormCnt {
	position: relative;
	width: 100%;
	height: 140px;
}

#searchForm {
	height: 142px;
	width: 100%;
	padding: 24px;
	background-color: #f6f6f6;
	border-radius: 12px;
	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12), 0 1.5px 4px 0 rgba(0, 0, 0, 0.10);
}

/*
.basketoff:hover {
   background-image: url(immagini/Basket-icon-on-36.png);
}
*/

#sbasketoff,
#mywishlistico {

	height: 36px;
	/*position:absolute;
	right: 0px;*/
	max-width: 200px;
	color: #ffffff;
	font-size: 16px;
	font-weight: normal;
	float: left;
}
#logoutdiv
{
    height: 36px;
	/*position:absolute;
	right: 0px;*/
	max-width: 200px;
	color: #ffffff;
	font-size: 16px;
	font-weight: normal;
	float: left;
	margin-left:10px;
	padding: 4px;
}

#sbasketoff {
	margin-left: 8px;
}

#sbasketoff img,
#mywishlistico img {
	height: 20px;
	margin-left: 3px;
	margin-top: 7px;
}

#logoutLabel,
#carrelloMsg,
#carrelloLabel {
	margin-top: 4px;
	color:white;
}
#logoutLabel
{
	padding:4px;
}
#logoutLabel:hover
{
	text-decoration: underline;
}

#datifatt {
	width: 48%;
	float: left;

	margin-left: 1%;
	padding: 6px;
}

#datisped {
	
	margin: 0px;
	padding: 6px;
	
}
.tableresp {
	/*table-layout: fixed;*/
}

.icoDelItem1 {
	display: none;
}

.tdIntResp {
	display: none
}

#btnAcquistaLogged2 {
	display: none;
	margin-left: 20px;
}

/* ====== Responsive ====== */
@media (max-width: 1024px){
  .schedaprodotto{
    width:480px;  /* si adatta */
  }
}
@media (max-width:800px){
  .product-grid{
    grid-template-columns: 1fr;    /* impila */
  }
}
@media (max-width: 640px){
  /* prezzo su due righe + CTA full width */
  .fascia1 .box_in{
    flex-direction: column;
    align-items: stretch;
  }
  .buttonadd{
	margin-top: 20px;
  }
  
}
/* ---------------------------------------------------------------- */

.form-section, .page-section {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
	min-width: 336px;
}
.page-section {
   padding: clamp(16px, 3vw, 24px);
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #E34A43;;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.form-field {
    display: flex;
    flex-direction: column;
}

.form-field label {
    font-weight: 500;
    color: #555;
    margin-bottom: 5px;
    font-size: 14px;
}

/* ---------------------------------------------------------------- */
#fssPrev {
	position: absolute;
	top: 404px;
	left: 254px;
	background: url(immagini/sliderleft.jpg);
	width: 27px;
	height: 27px;
	text-indent: -999999px;
}

#fssNext {
	position: absolute;
	top: 404px;
	left: 283px;
	background: url(immagini/sliderright.jpg);
	width: 27px;
	height: 27px;
	text-indent: -999999px;
}

#fssNext:hover {
	background: url(immagini/sliderrighton.jpg);
}

#fssPrev:hover {
	background: url(immagini/sliderlefton.jpg);
}

#fssPlayPause {
	display: none;
	/*
position:absolute;top:435px;right:20px;background:url(white.png) repeat;padding:4px 0 5px 0;
-moz-border-radius:5px;border-radius:5px;width:60px;text-align:center;display:block;color:#333;text-decoration:none;
*/
}

ul#slideshow {
	list-style: none;
	border: none;
	padding: 0px;
	margin: auto;
	margin: 0;
	width: 260px;
	height: 324px;
	overflow: hidden;
}

#fssList {
	list-style: none;
	width: 646px;
	margin: auto;
	padding: 5px 0 0 45%;
	display: none
}

#fssList li {
	display: inline;
	padding-right: 10px;
}

#fssList li a {
	color: #999;
	text-decoration: none;
}

#fssList li.fssActive a {
	font-weight: bold;
	color: #333;
}

#fssPrev,
#fssNext {
	display: none;
}


/* Responsive breakpoints 

@media screen and (min-width: 1280px) {

#_container {
	
	width: 1280px;
}

	
}
*/


@media screen and (max-width: 1330px) and (min-width: 1050px) {

	.content {

		width: 980px;

	}

	.right {
		max-width: calc(100% - 360px);
	}

	.item {
		margin-left: 6px;
	}

	.box8 {
		margin-left: 0px;
	}
/*
	.colonnafoo,
	.colonnafoo2 {
		max-width: 412px;
	}

	.colonnafoo2 {
		margin-left: 2px;
	}
*/
	#catalogoWrapperIn {
		max-width: 910px;

	}

}

@media screen and (max-width: 1200px)  {

	#catalogoBar {
		float:left;
		margin-top:16px;
	}

}

@media screen and (max-width: 1050px) and (min-width: 880px) {

	.content {

		width: 800px;

	}

	.right {
		width: 510px;
		margin-top: 36px;
	}

	.left {
		width: 290px;
		margin-top: 36px;
	}

	.item {
		margin-left: 6px;
	}
	.item .item_fullwidth, .item_fullwidth {
		height: auto;
		min-width:510px;
	}
	.itemFullWrapper, .item_descriz_logged_fw
	{
		height:auto;
		flex-wrap: wrap;
	}

	.box8 {
		margin-left: 0px;
	}


	#catalogoWrapperIn {
		max-width: 684px;

	}

}


@media screen and (max-width: 1000px) {

	#searchForm {
		right: auto;
		left: 0px;
	}

	#spessoreSearchForm {
		height: 40px;
	}

	#right {
		width: auto
	}
    #fooinfo {
		position: relative;
	}


	#menu3 {
		position:relative;
		right:auto;
		/*left: 14px;
		top: 42px;*/
	}



	#datifatt {}

	#datisped {
		margin-top: 28px;
		border: none;
	}

	.tdIntResp {
		display: inline;
	}

	.tdInt {
		display: none;
	}


}



/* === FIX RESPONSIVE HEADER <= 880px === */
@media (max-width: 880px){
  #top{
    height: auto !important;     /* niente 190px fissi */
    min-height: 64px;
  }
  #logo{
    position: relative;           /* evita overlay strani */
    max-width: 150px;
  }
}
@media (max-width: 660px) {
  #categoryBox
  {
	display:none;
  }
}

@media (max-width: 880px) {

	  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea{
    width: 100%;
    max-width: 100%;
  }


	.content {

		width: 100%
	}

	.right {
		width: 320px;
		margin-top: 36px;
	}
		.item .item_fullwidth, .item_fullwidth {
		height: auto;
		width:260px;
	}
	.itemFullWrapper, .item_descriz_logged_fw
	{
		height:auto;
		flex-wrap: wrap;
	}

	.left {
		width: 290px;
		margin-top: 36px;
	}

	#toolbar {
		height: auto;
	}

	#menu2 {

		display: none;
	}

	#toolbar2 {
		display: inline;
	}

	#paginazione {
		width: 100%;
		height: 32px;
		text-align: center;
		line-height: 200%;
	}



	.boxtitolo {
		margin-left: 10px;
	}

	.box1,
	.box7 {
		width: 94%;
		margin: 2%;
		text-align: left;
	}

	.schedaprodotto {
		width: auto;
		min-width: 320px;
	}



}

@media screen and (max-width: 640px) {


	#img_logo {
		width: 150px;
	}

	#toolbar {
		display: none;
	}

	#icotoolbar2 {
		display: inline;
	}

	#btn_REGISTRATI {
		display: none
	}



	#menu3 li {
		display: inherit
	}



	#menu3 {
		height: auto;
	}



	#menu3 li.li3sep,
	.li3sep {
		display: none
	}

	#menu3 li {
		height: 24px
	}

	#catalogoWrapperIn {
		max-width: 480px;

	}

	#carrelloLabel {
		display: none
	}

    #datifatt, #datisped {
		width: 100%;
		float: none;
		margin: 0;
		border: none;
	}

}

/*====================================RESPONSIVE LEGACY DA VERIFICARE========================*/

@media screen and (max-width: 580px) {
	

	#btnAcquistaLogged2 {
		display: inline
	}


}

@media screen and (max-width: 480px) {
	#catalogoWrapperIn {
		max-width: 240px;

	}
}

@media screen and (max-width: 1280px) {
	.boxinfo {
		float: left;
	}
}

/* popup */
@media screen and (max-width: 1050px) {

	#cnt_overlay {
		width: 96%;
		margin-left: 2%;
	}

	#overlayframe {
		width: 100%;
	}



}

/* ==== BRANDS STRIP ==== */
.brands__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: clamp(12px, 2vw, 24px);
  align-items: center;
  justify-items: center;
  margin-top: 24px;
}

.brand img {
  max-height: 60px;   /* controlla l’altezza */
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) contrast(1.1);
  opacity: 0.8;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}

.brand img:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.05);
}

/* ==== CAROUSEL HOME (testo sx / immagine dx) ==== */
.carousel{
  position: relative;
  overflow: hidden;
  background: #2b2e36;
  border-radius: 12px;
  box-shadow: var(--shadow);
  margin: clamp(12px, 3vw, 24px) auto;
  max-width: 1200px;
}

.carousel__track{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  transition: transform .5s ease;
}

.carousel__slide{
  width: 100%;
}
.carousel__slide .slide__inner{
  display: grid;
  grid-template-columns: 1.2fr 1fr;  /* testo più largo */
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
  padding: clamp(22px, 4vw, 48px);
  min-height: clamp(320px, 46vh, 520px);
  background: linear-gradient(180deg, #f6f7f8 0%, #ffffff 60%);
  border-right: 1px solid #f0f0f0;
}

.slide__text{ text-align: left; margin-left:20px;}
.slide__title{
  margin: 0 0 .4rem;
  font-size: clamp(1.4rem, 3.2vw, 2.2rem);
  line-height: 1.2;
  color: #444;
  font-weight: 800;
}
.slide__title .accent{ color: var(--accent); display:block; }
.slide__desc{ color:#666; margin: .5rem 0 1rem; max-width: 58ch; font-size:16px; }
.slide__cta{ display:flex; gap:10px; flex-wrap:wrap; }

.slide__media{ text-align: center; }
.slide__media img{
  max-width: min(92%, 520px);
  height: auto;
  display: inline-block;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.12));
}

/* frecce */
.carousel__arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; border: 0; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow); cursor: pointer;
  display: grid; place-items: center; font-size: 18px; color:#c7463f;
}
.carousel__arrow.prev{ left: clamp(6px, 1vw, 12px); }
.carousel__arrow.next{ right: clamp(6px, 1vw, 12px); }
.carousel__arrow:hover{ filter: brightness(0.97); }

/* dots */
.carousel__dots{
  display: flex; gap: 8px; justify-content: center; padding: 12px 0 18px;
}
.carousel__dots button{
  width: 9px; height: 9px; border-radius: 999px; border: 0;
  background: #d9d9d9; cursor: pointer;
}
.carousel__dots button[aria-selected="true"]{
  background: var(--accent);
}

/* responsive */
@media (max-width: 900px){
  .carousel__slide .slide__inner{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .slide__text{ text-align: center; }
  .slide__desc{ margin-left: auto; margin-right: auto; }
}

/* Sezione disponibilità */
.availability-section {
    margin: 15px 0;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 4px solid #e9ecef;
}

.availability-label {
    font-weight: 600;
    color: #495057;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: block;
}

.availability-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.availability-icon {
    font-size: 16px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.availability-text {
    font-weight: 600;
    font-size: 15px;
}

.availability-count {
    font-size: 13px;
    color: #6c757d;
    font-weight: 400;
}

/* Stati disponibilità */
.availability-status.available {
    color: #28a745;
}

.availability-status.available .availability-section {
    border-left-color: #28a745;
    background: rgba(40, 167, 69, 0.05);
}

.availability-status.limited {
    color: #ffc107;
}

.availability-status.limited + .availability-section {
    border-left-color: #ffc107;
    background: rgba(255, 193, 7, 0.05);
}

.availability-status.unavailable {
    color: #dc3545;
}

.availability-status.unavailable + .notify-form-container {
    border-left-color: #dc3545;
}

/* ===== SISTEMA ALERT/AVVISI ===== */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 8px;
    border-left: 4px solid;
    margin: 16px 0;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.alert__icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.alert__content {
    flex: 1;
}

.alert__title {
    font-weight: 600;
    margin: 0 0 4px;
    font-size: 15px;
}

.alert__message {
    margin: 0;
    color: #4a5568;
}

/* Varianti colore */
.alert--success {
    background: #f0fdf4;
    border-left-color: #10b981;
    color: #065f46;
}

.alert--success .alert__icon {
    color: #10b981;
}

.alert--warning {
    background: #fffbeb;
    border-left-color: #f59e0b;
    color: #92400e;
}

.alert--warning .alert__icon {
    color: #f59e0b;
}

.alert--error {
    background: #fef2f2;
    border-left-color: #ef4444;
    color: #991b1b;
}

.alert--error .alert__icon {
    color: #ef4444;
}

.alert--info {
    background: #eff6ff;
    border-left-color: #3b82f6;
    color: #1e3a8a;
}

.alert--info .alert__icon {
    color: #3b82f6;
}

/* Dismissible alert */
.alert--dismissible {
    position: relative;
    padding-right: 48px;
}

.alert__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 20px;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: opacity 0.2s;
}

.alert__close:hover {
    opacity: 1;
}

/* Responsive */
@media (max-width: 640px) {
    .alert {
        flex-direction: column;
        gap: 8px;
    }
    
    .alert__icon {
        margin-top: 0;
    }
}
/* =====================================================
   SMARTER Home v3
   Scoped on .smarter-home
   ===================================================== */
.smarter-home {
    --white: #ffffff;
    --snow: #f7f8fa;
    --cloud: #eef0f4;
    --mist: #dde1e8;
    --silver: #9ca3af;
    --slate: #6b7280;
    --ink: #1f2937;
    --blue: #00447c;
    --blue-dark: #003362;
    --blue-light: #e8f0f8;
    --blue-mid: #5b9bd5;
    --orange: #e8913a;
    --orange-hover: #d17d2d;
    --orange-soft: #fef3e7;
    --font: 'Outfit', -apple-system, sans-serif;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.7;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

.smarter-home *,
.smarter-home *::before,
.smarter-home *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.smarter-home #container {
    position: static !important;
    min-height: auto;
    display: block;
    padding: 0;
    margin: 0;
}

.smarter-home #container > .content {
    width: min(100%, 1280px) !important;
    max-width: 1280px;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
}

.smarter-home .bi {
    vertical-align: -0.125em;
}

.smarter-home .navbar {
    background: var(--blue);
    padding: 0 48px;
    height: 64px;
    display: flex;
    align-items: center;
}

.smarter-home .navbar-logo {
    font-weight: 800;
    font-size: 20px;
    color: var(--white);
    letter-spacing: 2px;
    text-decoration: none;
}

/* 08/10: logo immagine (smarter-logo-300x73.png, blu) reso bianco sul fondo blu della navbar */
.smarter-home .navbar-logo img {
    display: block;
    height: 36px;
    width: auto;
    filter: brightness(0) invert(1);
}

.smarter-home .navbar-links {
    display: flex;
    gap: 28px;
    list-style: none;
    margin-left: auto;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}

.smarter-home .navbar-links a {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: color 0.2s;
}

.smarter-home .navbar-links a:hover {
    color: var(--white);
}

.smarter-home .navbar-cta {
    background: var(--orange) !important;
    color: var(--white) !important;
    padding: 8px 20px;
    border-radius: 4px;
    font-weight: 600 !important;
    transition: background 0.2s !important;
}

.smarter-home .navbar-cta:hover {
    background: var(--orange-hover) !important;
}

.smarter-home .hero {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 48px;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(135deg, #001a33 0%, var(--blue) 40%, #1a5a8c 80%, #2a7ab5 100%);
}

.smarter-home .hero::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
}

.smarter-home .hero::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: 20%;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
}

.smarter-home .hero-inner {
    position: relative;
    max-width: 640px;
}

.smarter-home .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 24px;
}

.smarter-home .hero h1 {
    color: var(--white);
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin-bottom: 14px;
}

.smarter-home .hero p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    max-width: 480px;
    margin: 0 auto;
}

.smarter-home .main-section {
    padding: 64px 48px;
    background: var(--snow);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.smarter-home .access-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 760px;
    width: 100%;
    position: relative;
}

.smarter-home .access-card {
    background: var(--white);
    border: 1px solid var(--mist);
    border-radius: 12px;
    padding: 40px 36px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.smarter-home .access-card:hover {
    box-shadow: 0 8px 32px rgba(0, 68, 124, 0.1);
    transform: translateY(-4px);
    border-color: var(--blue-mid);
}

.smarter-home .access-card.primary {
    border-color: var(--blue);
    border-width: 2px;
}

.smarter-home .access-card.primary:hover {
    box-shadow: 0 12px 40px rgba(0, 68, 124, 0.15);
}

.smarter-home .access-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.smarter-home .access-icon.blue {
    background: var(--blue-light);
    color: var(--blue);
}

.smarter-home .access-card.primary .access-icon.blue {
    background: var(--blue);
    color: var(--white);
}

.smarter-home .access-icon.warm {
    background: var(--orange-soft);
    color: var(--orange);
}

.smarter-home .access-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
}

.smarter-home .access-desc {
    font-size: 14px;
    color: var(--slate);
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 250px;
}

.smarter-home .access-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 28px;
    border-radius: 4px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.smarter-home .btn-blue {
    background: var(--blue);
    color: var(--white);
}

.smarter-home .btn-blue:hover {
    background: var(--blue-dark);
}

.smarter-home .btn-outline {
    background: transparent;
    color: var(--blue);
    border: 1.5px solid var(--blue);
}

.smarter-home .btn-outline:hover {
    background: var(--blue);
    color: var(--white);
}

.smarter-home .access-divider {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    background: var(--snow);
    border: 1.5px solid var(--mist);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--silver);
    z-index: 2;
}

.smarter-home .features-strip {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid var(--mist);
    max-width: 760px;
    width: 100%;
}

.smarter-home .feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--slate);
    font-weight: 500;
}

.smarter-home .feature-item i {
    color: var(--blue);
    font-size: 15px;
}

.smarter-home .cta-bottom {
    text-align: center;
    padding: 56px 48px;
    background: var(--white);
    border-top: 1px solid var(--cloud);
}

.smarter-home .cta-logo {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--ink);
    margin-bottom: 14px;
}

.smarter-home .cta-text {
    font-size: 15px;
    color: var(--slate);
    margin-bottom: 24px;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.smarter-home .cta-btn-orange {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--orange);
    color: var(--white);
    text-decoration: none;
    padding: 12px 32px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    transition: background 0.2s;
}

.smarter-home .cta-btn-orange:hover {
    background: var(--orange-hover);
}

.smarter-home .footer {
    background: var(--blue-dark);
    color: rgba(255, 255, 255, 0.5);
    padding: 40px 48px;
}

.smarter-home .footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
}

.smarter-home .footer-col h4 {
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

.smarter-home .footer-col p,
.smarter-home .footer-col a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.7;
    text-decoration: none;
    display: block;
    transition: color 0.2s;
}

.smarter-home .footer-col a:hover {
    color: rgba(255, 255, 255, 0.8);
}

.smarter-home .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 32px;
    padding-top: 20px;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
}

.smarter-home .footer-bottom a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    display: inline;
}

@media (max-width: 700px) {
    /* H1 (27/09): Registrati e Accedi stanno solo nel menu, quindi su mobile il menu resta visibile */
    .smarter-home .navbar {
        padding: 10px 16px;
        height: auto;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .smarter-home .navbar-links {
        margin-left: 0;
        gap: 14px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .smarter-home .navbar-links a {
        font-size: 12px;
        letter-spacing: 0.4px;
    }

    .smarter-home .navbar-cta {
        padding: 6px 12px;
    }

    .smarter-home .hero {
        padding: 48px 24px;
        min-height: 260px;
    }

    .smarter-home .main-section {
        padding: 40px 20px;
    }

    .smarter-home .access-row {
        grid-template-columns: 1fr;
        max-width: 380px;
    }

    .smarter-home .access-divider {
        display: none;
    }

    .smarter-home .features-strip {
        flex-direction: column;
        gap: 14px;
        align-items: center;
    }

    .smarter-home .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }

    .smarter-home .cta-bottom {
        padding: 40px 20px;
    }
}

/* =====================================================
   SMARTER Login
   Scoped on .smarter-home
   ===================================================== */
.smarter-home .login-page {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: calc(100vh - 64px - 160px);
    padding: 0;
}

.smarter-home .login-panel {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 24px;
    align-items: stretch;
    padding: 40px 24px;
}

.smarter-home .login-intro {
    background: linear-gradient(135deg, #001a33 0%, var(--blue) 40%, #1a5a8c 80%, #2a7ab5 100%);
    color: #fff;
    border-radius: 20px;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.smarter-home .login-intro::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
}

.smarter-home .login-intro .hero-badge {
    align-self: flex-start;
}

.smarter-home .login-intro h1 {
    margin: 0 0 16px;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #fff;
}

.smarter-home .login-intro p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    max-width: 420px;
}

.smarter-home .login-profile-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.smarter-home .login-profile-list span {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 100px;
    padding: 7px 16px;
    font-weight: 600;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.smarter-home .login-profile-list span i {
    font-size: 14px;
}

.smarter-home .login-forms {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.smarter-home .login-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
}

.smarter-home .login-alert--success {
    background: #e8f8ef;
    color: #0d6e3f;
    border: 1px solid #b3dfca;
}

.smarter-home .login-alert--error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

.smarter-home .login-alert i {
    font-size: 18px;
    flex-shrink: 0;
}

.smarter-home .login-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px 28px;
    box-shadow: 0 10px 28px rgba(0, 68, 124, 0.10);
    border: 1px solid var(--mist);
}

.smarter-home .login-card h2 {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 700;
    color: var(--blue);
    display: flex;
    align-items: center;
    gap: 8px;
}

.smarter-home .login-card h2 i {
    font-size: 20px;
}

.smarter-home .login-card label {
    display: block;
    font-weight: 700;
    color: var(--blue);
    margin: 16px 0 6px;
    font-size: 14px;
}

.smarter-home .login-card label:first-of-type {
    margin-top: 0;
}

.smarter-home .login-card input[type="text"],
.smarter-home .login-card input[type="password"],
.smarter-home .login-card input[type="email"] {
    width: 100%;
    border: 1.5px solid var(--mist);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 15px;
    font-family: var(--font);
    color: var(--ink);
    background: var(--snow);
    transition: border-color 0.2s, box-shadow 0.2s;
    height: auto;
}

.smarter-home .login-card input:focus {
    outline: none;
    border-color: var(--blue-mid);
    box-shadow: 0 0 0 3px rgba(0, 68, 124, 0.08);
    background: #fff;
}

.smarter-home .login-card input.login-input--error {
    border-color: #ef4444;
    background: #fef8f8;
}

.smarter-home .login-submit {
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: var(--blue);
    color: #fff;
    min-height: 46px;
    font-weight: 700;
    cursor: pointer;
    font-size: 15px;
    font-family: var(--font);
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.3px;
    transition: background 0.2s;
}

.smarter-home .login-submit:hover {
    background: var(--blue-dark);
}

.smarter-home .login-submit--sm {
    margin-top: 10px;
    min-height: 40px;
    font-size: 14px;
    background: var(--orange);
}

.smarter-home .login-submit--sm:hover {
    background: var(--orange-hover);
}

.smarter-home .login-forgot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue) !important;
    text-decoration: none !important;
    transition: color 0.2s;
}

.smarter-home .login-forgot:hover {
    color: var(--orange) !important;
}

.smarter-home .login-recover {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.smarter-home .login-recover-inner {
    padding: 18px 0 4px;
    border-top: 1px solid var(--mist);
    margin-top: 14px;
}

.smarter-home .login-recover-title {
    font-weight: 700;
    color: var(--ink);
    font-size: 15px;
    margin-bottom: 4px;
}

.smarter-home .login-recover-desc {
    font-size: 13px;
    color: var(--slate);
    margin-bottom: 12px;
}

.smarter-home .login-recover input[type="text"] {
    width: 100%;
    border: 1.5px solid var(--mist);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: var(--font);
    background: var(--snow);
    height: auto;
}

.smarter-home .login-recover-error {
    color: #dc2626;
    font-size: 13px;
    font-weight: 600;
    margin-top: 8px;
}

.smarter-home .login-recover-note {
    font-size: 12px;
    color: var(--silver);
    margin-top: 10px;
}

.smarter-home .login-register-card {
    background: var(--snow);
    border: 1.5px solid var(--mist);
    border-radius: 16px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.smarter-home .login-register-card:hover {
    border-color: var(--blue-mid);
    box-shadow: 0 4px 16px rgba(0, 68, 124, 0.08);
}

.smarter-home .login-register-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--blue-light);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.smarter-home .login-register-text {
    flex: 1;
}

.smarter-home .login-register-text h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
}

.smarter-home .login-register-text p {
    font-size: 13px;
    color: var(--slate);
    margin: 0;
    line-height: 1.5;
}

.smarter-home .login-register-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    background: var(--orange);
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: background 0.2s;
    flex-shrink: 0;
}

.smarter-home .login-register-btn:hover {
    background: var(--orange-hover);
    color: #fff !important;
}

@media (max-width: 900px) {
    .smarter-home .login-panel {
        grid-template-columns: 1fr;
        max-width: 480px;
        padding: 24px 16px;
    }

    .smarter-home .login-intro {
        padding: 32px 28px;
    }

    .smarter-home .login-intro h1 {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .smarter-home .login-card {
        padding: 24px 20px;
        border-radius: 14px;
    }

    .smarter-home .login-intro {
        padding: 28px 22px;
        border-radius: 16px;
    }

    .smarter-home .login-register-card {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
}

@keyframes smarterFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.smarter-home .anim {
    animation: smarterFadeUp 0.5s ease forwards;
}

.smarter-home .d1 {
    animation-delay: 0.08s;
    opacity: 0;
}

.smarter-home .d2 {
    animation-delay: 0.18s;
    opacity: 0;
}

/*
   Registration page
   Scoped on .smarter-home
*/

.smarter-home .register-page {
    display: flex;
    align-items: flex-start;
    width: 100%;
    min-height: calc(100vh - 64px - 160px);
}

.smarter-home .register-panel {
    align-items: stretch;
    max-width: 1280px;
    grid-template-columns: minmax(0, 1.08fr) minmax(520px, 560px);
    gap: 32px;
    padding: 48px 32px;
}

.smarter-home .register-intro {
    gap: 0;
    justify-content: flex-start;
    padding-top: 56px;
}

.smarter-home .register-intro-list {
    margin: 28px 0 0;
    padding-left: 18px;
    color: rgba(255, 255, 255, 0.82);
    display: grid;
    gap: 10px;
    line-height: 1.6;
    font-size: 14px;
}

.smarter-home .register-intro-image {
    margin-top: auto;
    padding-top: 40px;
    text-align: center;
    opacity: 0.15;
    pointer-events: none;
}

.smarter-home .register-intro-image i {
    font-size: 120px;
    color: #fff;
}

.smarter-home .register-field select {
    height: auto;
    color: var(--ink);
    cursor: pointer;
    appearance: auto;
}

.smarter-home .register-alert {
    align-items: flex-start;
}

.smarter-home .register-alert strong {
    display: block;
    margin-bottom: 4px;
}

.smarter-home .register-error-list {
    margin: 6px 0 0 18px;
    padding: 0;
}

.smarter-home .register-error-list li + li {
    margin-top: 4px;
}

.smarter-home .register-card {
    padding: 34px 32px 30px;
}

.smarter-home .register-lead {
    margin: -6px 0 22px;
    color: var(--slate);
    font-size: 14px;
    line-height: 1.6;
}

.smarter-home .register-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 18px;
}

.smarter-home .register-field {
    min-width: 0;
}

.smarter-home .register-field:last-child {
    grid-column: 1 / -1;
}

.smarter-home .register-field--full {
    grid-column: 1 / -1;
}

.smarter-home .register-field label {
    display: block;
    font-weight: 700;
    color: var(--blue);
    margin: 0 0 6px;
    font-size: 14px;
}

.smarter-home .register-field input[type="text"],
.smarter-home .register-field input[type="password"],
.smarter-home .register-field input[type="email"],
.smarter-home .register-field input[type="tel"],
.smarter-home .register-field input[type="number"],
.smarter-home .register-field select {
    width: 100%;
    border: 1.5px solid var(--mist);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 15px;
    font-family: var(--font);
    color: var(--ink);
    background: var(--snow);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.smarter-home .register-field input:focus {
    outline: none;
    border-color: var(--blue-mid);
    box-shadow: 0 0 0 4px rgba(52, 144, 220, 0.14);
}

.smarter-home .register-block {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--mist);
}

.smarter-home .register-block-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
}

.smarter-home .register-note {
    margin: 0 0 14px;
    color: var(--slate);
    font-size: 13px;
    line-height: 1.6;
}

.smarter-home .register-note a {
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
}

.smarter-home .register-note a:hover {
    color: var(--orange);
}

.smarter-home .register-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.6;
}

.smarter-home .register-checkbox input {
    margin-top: 3px;
    accent-color: var(--blue);
}

.smarter-home .register-choice-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.smarter-home .login-card label.register-choice,
.smarter-home .register-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--mist);
    border-radius: 12px;
    background: var(--snow);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    box-sizing: border-box;
}

.smarter-home .register-choice input {
    margin: 0;
    accent-color: var(--blue);
}

.smarter-home .register-side-card {
    align-items: center;
}

.smarter-home .register-success-card {
    text-align: left;
}

.smarter-home .register-success-body {
    color: var(--slate);
    line-height: 1.7;
    font-size: 14px;
}

.smarter-home .register-success-actions {
    margin-top: 22px;
}

.smarter-home .register-login-link {
    /*width: auto;*/
    text-decoration: none !important;
}

@media (max-width: 900px) {
    .smarter-home .register-panel {
        grid-template-columns: 1fr;
        max-width: 480px;
        padding: 24px 16px;
        gap: 24px;
    }

    .smarter-home .register-grid {
        grid-template-columns: 1fr;
    }

    .smarter-home .register-field:last-child {
        grid-column: auto;
    }

    .smarter-home .register-choice-group {
        grid-template-columns: 1fr;
    }
}