/* ==========================================================================
   UG Lanamerino — stili degli elementi custom
   I token replicano il design system del wireframe. Se in Uncode imposti
   gli stessi colori nel Global Style, puoi sovrascriverli qui in un punto solo.
   ========================================================================== */

:root {
	--ug-cream: #FBF5EA;
	--ug-sand: #F4EAD9;
	--ug-blush: #F0DECF;
	--ug-clay: #EAD3C1;
	--ug-card: #FFFDF8;
	--ug-ink: #3A2D23;
	--ug-ink-2: #7B6A59;
	--ug-muted: #A2917E;
	/*
	 * Il grigio-bruno del wireframe come colore di TESTO non supera l'AA:
	 * 2,33:1 su blush, 2,81 su cream, 3,0 su card. Resta valido per bordi e
	 * decorazioni; per il testo si usa una versione piu' scura, che passa
	 * ovunque (4,82:1 sul fondo peggiore) restando smorzata.
	 */
	--ug-muted-text: #6E5D4C;
	--ug-line: #ECE0CE;
	--ug-line-2: #E0D0B9;
	--ug-brand: #4B3A2C;
	--ug-brand-2: #5E4A38;
	--ug-honey: #C6883F;
	--ug-honey-2: #B0742E;
	/* Oro per il testo su fondo chiaro. #B0742E si ferma a 3,84:1 sulla card,
	   sotto il 4,5:1 delle AA. Questo regge su tutti i fondi chiari della
	   palette: card 6,29 · crema 5,89 · sabbia 5,36 · blush 4,89. Resta
	   riconoscibilmente oro, e --ug-honey-2 continua a valere per bordi e
	   riempimenti, dove il contrasto del testo non c'entra. */
	--ug-honey-text: #85541E;
	--ug-rose: #C08A72;
	--ug-ok: #5B7A4E;
	--ug-sh-sm: 0 2px 8px rgba(74, 58, 44, .06);
	--ug-sh: 0 10px 34px -14px rgba(74, 58, 44, .28);
	--ug-sh-lg: 0 30px 60px -26px rgba(74, 58, 44, .4);
	--ug-r: 18px;
	--ug-r-lg: 26px;
	--ug-r-sm: 12px;
	--ug-ease: cubic-bezier(.22, .61, .36, 1);
	--ug-serif: "Fraunces", Georgia, serif;
	--ug-sans: "DM Sans", system-ui, sans-serif;
}

/* --------------------------------------------------------------- Primitivi */

.ug-kick {
	font-family: var(--ug-sans);
	font-weight: 600;
	font-size: .76rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ug-honey-text);
	display: block;
}

.ug-icon {
	width: 20px;
	height: 20px;
	flex: none;
}

/*
 * Uncode impone i colori dei controlli con selettori piu' specifici di una
 * classe singola, e vanno battuti su due fronti diversi:
 *
 *   `.style-light a`                    (0,1,1)  colore del testo dei link
 *   `.style-light button[type=submit]`  (0,2,1)  sfondo dei submit
 *
 * Da qui due livelli: classe raddoppiata (0,2,0) per i link, e per i submit
 * anche il tag con l'attributo (0,3,1). Nessun !important.
 */

.ug-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--ug-sans);
	font-weight: 600;
	font-size: .94rem;
	line-height: 1;
	padding: 14px 26px;
	border-radius: 40px;
	border: 2px solid transparent;
	transition: .2s var(--ug-ease);
	text-decoration: none;
	cursor: pointer;
}

.ug-btn.ug-btn-primary,
button.ug-btn.ug-btn-primary[type="submit"],
input.ug-btn.ug-btn-primary[type="submit"] {
	background: var(--ug-brand);
	color: #F7EEDD;
	box-shadow: 0 12px 24px -12px rgba(75, 58, 44, .6);
}

.ug-btn.ug-btn-primary:hover,
.ug-btn.ug-btn-primary:focus,
button.ug-btn.ug-btn-primary[type="submit"]:hover,
button.ug-btn.ug-btn-primary[type="submit"]:focus,
input.ug-btn.ug-btn-primary[type="submit"]:hover,
input.ug-btn.ug-btn-primary[type="submit"]:focus {
	background: var(--ug-brand-2);
	color: #F7EEDD;
}

.ug-btn.ug-btn-outline,
button.ug-btn.ug-btn-outline[type="submit"],
input.ug-btn.ug-btn-outline[type="submit"] {
	background: transparent;
	color: var(--ug-brand);
	border-color: var(--ug-line-2);
}

.ug-btn.ug-btn-outline:hover {
	border-color: var(--ug-brand);
	background: var(--ug-card);
}

.ug-btn-block {
	display: flex;
	width: 100%;
}

.ug-stars {
	display: inline-flex;
	gap: 1px;
	vertical-align: middle;
}

.ug-star {
	width: 14px;
	height: 14px;
	fill: var(--ug-honey);
	stroke: none;
}

.ug-star.ug-off {
	fill: var(--ug-line-2);
}

.ug-stars-count,
.ug-rate-count {
	color: var(--ug-muted-text);
	font-size: .78rem;
}

.ug-warm-bars {
	display: inline-flex;
	gap: 3px;
}

.ug-warm-bars i {
	width: 7px;
	height: 15px;
	border-radius: 2px;
	background: var(--ug-line-2);
	display: block;
}

.ug-warm-bars i.ug-on {
	background: var(--ug-honey);
}

/* --------------------------------------------------------- Announce bar */

.ug-announce {
	background: var(--ug-brand);
	color: #F3E9D8;
	font-family: var(--ug-sans);
	font-size: .8rem;
}

.ug-announce-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 40px;
	padding: 0 30px;
}

.ug-announce-heart {
	color: var(--ug-rose);
}

.ug-announce-rot {
	transition: opacity .25s;
}

.ug-announce-rot b {
	color: #E8B871;
	font-weight: 600;
}

.ug-announce-data {
	display: none;
}

.ug-announce-lang {
	position: absolute;
	right: 30px;
	display: flex;
	gap: 12px;
	font-size: .72rem;
	opacity: .8;
}

.ug-announce-lang a {
	color: inherit;
	text-decoration: none;
}

.ug-announce-lang a:hover {
	color: #E8B871;
}

@media (max-width: 720px) {
	.ug-announce-lang {
		display: none;
	}
}

/* --------------------------------------------------------- Trust pills */

.ug-pills {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.ug-pills-center {
	justify-content: center;
}

.ug-pill {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--ug-card);
	border: 1px solid var(--ug-line);
	border-radius: 40px;
	padding: 11px 20px;
	font-family: var(--ug-sans);
	font-weight: 500;
	font-size: .9rem;
	color: var(--ug-ink);
	box-shadow: var(--ug-sh-sm);
}

.ug-pill .ug-icon {
	width: 19px;
	height: 19px;
	stroke: var(--ug-honey-2);
}

/* --------------------------------------------------------- Card prodotto */

.ug-track {
	display: grid;
	gap: 20px;
}

.ug-track-carousel {
	grid-auto-flow: column;
	grid-auto-columns: minmax(268px, 1fr);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 6px 2px 10px;
	scrollbar-width: none;
}

.ug-track-carousel::-webkit-scrollbar {
	display: none;
}

.ug-track-carousel > * {
	scroll-snap-align: start;
}

.ug-track-grid.ug-cols-4 { grid-template-columns: repeat(4, 1fr); }
.ug-track-grid.ug-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ug-track-grid.ug-cols-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1040px) {
	.ug-track-grid.ug-cols-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
	.ug-track-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px; }
}

.ug-pcard {
	background: var(--ug-card);
	border-radius: var(--ug-r);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--ug-sh-sm);
	transition: .22s var(--ug-ease);
	position: relative;
}

.ug-pcard:hover {
	box-shadow: var(--ug-sh);
	transform: translateY(-4px);
}

.ug-pcard-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1.02;
}

.ug-pcard-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s var(--ug-ease);
}

.ug-pcard:hover .ug-pcard-media img {
	transform: scale(1.05);
}

.ug-flags {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
	z-index: 2;
}

.ug-flag {
	font-family: var(--ug-sans);
	font-weight: 600;
	font-size: .68rem;
	padding: 6px 11px;
	border-radius: 40px;
	background: rgba(251, 245, 234, .92);
	color: var(--ug-ink);
	box-shadow: var(--ug-sh-sm);
	white-space: nowrap;
}

.ug-flag-med {
	background: var(--ug-brand);
	color: #F7EEDD;
}

.ug-flag-sale {
	background: var(--ug-rose);
	color: #fff;
}

.ug-flag-gallery {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 3;
}

.ug-pcard-body {
	padding: 16px 17px 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ug-cat-label {
	font-family: var(--ug-sans);
	font-size: .76rem;
	color: var(--ug-honey-text);
	font-weight: 600;
	margin-bottom: 5px;
}

.ug-cat-label-single {
	font-size: .82rem;
	margin-bottom: 6px;
}

.ug-pcard-title {
	font-family: var(--ug-serif);
	font-weight: 600;
	font-size: 1.12rem;
	line-height: 1.12;
	margin: 0;
}

.ug-pcard .ug-pcard-title a {
	color: var(--ug-ink);
	text-decoration: none;
}

.ug-pcard .ug-pcard-title a:hover {
	color: var(--ug-honey-text);
}

.ug-rate {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 9px;
	font-size: .78rem;
}

.ug-swatches {
	display: flex;
	gap: 6px;
	margin-top: 11px;
}

.ug-swatches i {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1.5px solid #fff;
	box-shadow: 0 0 0 1px var(--ug-line-2);
	display: block;
}

.ug-pcard-price {
	margin-top: auto;
	padding-top: 14px;
	font-family: var(--ug-serif);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--ug-ink);
}

.ug-pcard-price del {
	font-family: var(--ug-sans);
	font-size: .9rem;
	color: var(--ug-muted-text);
	font-weight: 400;
	margin-left: 8px;
}

.ug-pcard-price ins {
	text-decoration: none;
	color: var(--ug-rose);
}

.ug-pcard .ug-btn {
	margin-top: 13px;
	width: 100%;
	padding: 12px;
}

/* --------------------------------------------------------- Tab filtro */

.ug-usetabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 26px;
}

.ug-usetab {
	font-family: var(--ug-sans);
	font-weight: 600;
	font-size: .9rem;
	padding: 9px 18px;
	border-radius: 40px;
	border: 1.5px solid var(--ug-line-2);
	color: var(--ug-ink-2);
	background: var(--ug-card);
	transition: .16s;
	cursor: pointer;
}

.ug-usetab:hover {
	border-color: var(--ug-brand);
}

.ug-usetab.ug-on {
	background: var(--ug-brand);
	color: #F7EEDD;
	border-color: var(--ug-brand);
}

.ug-cnav {
	display: flex;
	gap: 8px;
	margin-left: auto;
}

.ug-cnav button {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1.5px solid var(--ug-line-2);
	display: grid;
	place-items: center;
	background: var(--ug-card);
	color: var(--ug-ink);
	transition: .16s;
	cursor: pointer;
}

.ug-cnav button:hover {
	border-color: var(--ug-brand);
	background: var(--ug-brand);
	color: #F7EEDD;
}

.ug-products.ug-loading .ug-track {
	opacity: .35;
	pointer-events: none;
	transition: opacity .2s;
}

/* Barra filtro dell'archivio categoria. */

.ug-warm-tabs {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 18px 0;
	border-top: 1px solid var(--ug-line);
	border-bottom: 1px solid var(--ug-line);
	margin-bottom: 28px;
}

.ug-warm-tabs a.ug-usetab {
	text-decoration: none;
	color: var(--ug-ink-2);
}

.ug-warm-tabs a.ug-usetab.ug-on {
	color: #F7EEDD;
}

.ug-warm-count {
	margin-left: auto;
	font-size: .82rem;
	color: var(--ug-muted-text);
}

/* Link di sezione ("Vedi tutto"). */

.ug-link.ug-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--ug-sans);
	font-weight: 600;
	font-size: .92rem;
	color: var(--ug-brand);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid var(--ug-honey);
	padding-bottom: 3px;
	transition: color .16s var(--ug-ease);
}

.ug-link.ug-link:hover {
	color: var(--ug-honey-text);
}

.ug-link-arrow {
	width: 16px;
	height: 11px;
	transition: transform .22s var(--ug-ease);
}

.ug-link:hover .ug-link-arrow {
	transform: translateX(4px);
}

/* --------------------------------------------------------- Intro categoria */

.ug-cat-hero h1.ug-cat-title {
	font-family: var(--ug-serif);
	font-weight: 500;
	font-size: clamp(2.4rem, 5vw, 3.8rem);
	line-height: 1.05;
	letter-spacing: -.01em;
	margin: 8px 0 0;
	max-width: 820px;
}

.ug-cat-cols {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 44px;
	padding: 22px 0 32px;
	align-items: start;
}

.ug-cat-text p {
	color: var(--ug-ink-2);
}

.ug-props {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.ug-prop {
	background: var(--ug-card);
	border-radius: var(--ug-r-sm);
	padding: 16px;
	box-shadow: var(--ug-sh-sm);
}

.ug-prop b {
	font-family: var(--ug-serif);
	font-weight: 600;
	display: block;
}

.ug-prop span {
	font-size: .8rem;
	color: var(--ug-muted-text);
}

@media (max-width: 760px) {
	.ug-cat-cols {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* --------------------------------------------------------- Mega menu calore */

.ug-warm-title {
	margin: 0 0 14px;
	font-family: var(--ug-sans);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: .68rem;
	color: var(--ug-muted-text);
	margin: 0 0 14px;
}

.ug-warm-nav .ug-warm-list a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--ug-line);
	font-family: var(--ug-sans);
	font-weight: 500;
	font-size: .95rem;
	color: var(--ug-ink);
	text-decoration: none;
}

.ug-warm-nav .ug-warm-list a:last-child {
	border-bottom: 0;
}

.ug-warm-nav .ug-warm-list a:hover {
	color: var(--ug-honey-text);
}

/* --------------------------------------------------------- Recensioni */

.ug-rv-top {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.ug-rv-big {
	font-family: var(--ug-serif);
	font-size: 3.1rem;
	font-weight: 600;
	line-height: 1;
	color: var(--ug-ink);
}

.ug-rv-meta .ug-star {
	width: 19px;
	height: 19px;
}

.ug-rv-meta span {
	display: block;
	font-size: .86rem;
	color: var(--ug-ink-2);
}

.ug-rv-source {
	margin-left: auto;
	font-size: .82rem;
	color: var(--ug-muted-text);
	display: flex;
	align-items: center;
	gap: 8px;
}

.ug-rv-dot {
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: #00B67A;
	display: block;
}

.ug-rv-grid {
	display: grid;
	gap: 18px;
}

.ug-rv-grid.ug-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ug-rv-grid.ug-cols-2 { grid-template-columns: repeat(2, 1fr); }

.ug-rv-card {
	background: var(--ug-card);
	border-radius: var(--ug-r);
	padding: 24px;
	box-shadow: var(--ug-sh-sm);
}

.ug-rv-card .ug-star {
	width: 15px;
	height: 15px;
}

.ug-rv-quote {
	font-family: var(--ug-serif);
	font-weight: 500;
	font-size: 1.12rem;
	line-height: 1.4;
	margin: 13px 0 16px;
	padding: 0;
	border: 0;
	color: var(--ug-ink);
}

.ug-rv-who {
	display: flex;
	align-items: center;
	gap: 11px;
}

.ug-rv-av {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--ug-clay);
	color: var(--ug-brand);
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: .86rem;
	text-transform: uppercase;
}

.ug-rv-who b {
	font-size: .9rem;
	display: block;
}

.ug-rv-who span {
	font-size: .72rem;
	color: var(--ug-ok);
}

@media (max-width: 860px) {
	.ug-rv-grid { grid-template-columns: 1fr !important; }
}

/* --------------------------------------------------------- PDP */

.ug-vat-note {
	font-size: .78rem;
	color: var(--ug-muted-text);
	/* Il margine negativo la incollava al prezzo: ora respira. */
	margin: 10px 0 24px;
}

.ug-guarantees {
	display: grid;
	gap: 12px;
	margin: 20px 0 8px;
	padding: 20px 22px;
	background: var(--ug-sand);
	border-radius: var(--ug-r);
}

.ug-guarantee {
	display: flex;
	gap: 12px;
	align-items: center;
	font-size: .88rem;
	color: var(--ug-ink);
}

.ug-guarantee .ug-icon {
	stroke: var(--ug-honey-2);
}

.ug-consult {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border-radius: var(--ug-r);
	background: var(--ug-blush);
	margin-top: 14px;
}

.ug-consult-ic {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ug-brand);
	display: grid;
	place-items: center;
	flex: none;
}

.ug-consult-ic .ug-icon {
	width: 19px;
	height: 19px;
	stroke: #F7EEDD;
}

.ug-consult-txt b {
	font-family: var(--ug-serif);
	font-weight: 600;
	font-size: 1rem;
	display: block;
}

.ug-consult-txt span {
	font-size: .82rem;
	color: var(--ug-ink-2);
}

.ug-consult .ug-consult-cta {
	margin-left: auto;
	white-space: nowrap;
	font-weight: 600;
	font-size: .85rem;
	color: var(--ug-honey-text);
	text-decoration: none;
}

.ug-check-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.ug-check-list li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	color: var(--ug-ink-2);
}

.ug-check-list .ug-icon {
	width: 19px;
	height: 19px;
	stroke: var(--ug-honey-2);
	stroke-width: 2;
	margin-top: 3px;
}

.ug-spec-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .92rem;
}

.ug-spec-table tr {
	border-bottom: 1px solid var(--ug-line);
}

.ug-spec-table td {
	padding: 13px 4px;
}

.ug-spec-table td:first-child {
	color: var(--ug-muted-text);
	width: 42%;
}

.ug-spec-table td:last-child {
	font-weight: 600;
}

/* Bottoni misura al posto del select variazioni.
   Anche qui background-color e non la scorciatoia: su un <select> la
   scorciatoia lascia in piedi la freccia del tema ma ne azzera repeat e
   position, e l'icona si ripete a piastrella. */

.ug-size-select select {
	padding: 12px 16px;
	border: 1.5px solid var(--ug-line-2);
	border-radius: 14px;
	background-color: var(--ug-card);
	font-weight: 600;
	font-size: .86rem;
}

/* --------------------------------------------------------- Cart progress */

.ug-ship-progress {
	padding: 16px 22px;
	background: var(--ug-sand);
	border-bottom: 1px solid var(--ug-line);
}

.ug-ship-msg {
	font-size: .84rem;
	margin-bottom: 9px;
	color: var(--ug-ink);
}

.ug-ship-msg b {
	color: var(--ug-honey-text);
}

.ug-ship-track {
	height: 7px;
	background: var(--ug-line-2);
	border-radius: 6px;
	overflow: hidden;
}

.ug-ship-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--ug-honey-2), var(--ug-honey));
	width: 0;
	transition: width .5s var(--ug-ease);
}

/* --------------------------------------------------------- Toast */

.ug-toast {
	position: fixed;
	bottom: 26px;
	left: 50%;
	transform: translate(-50%, 160%);
	background: var(--ug-brand);
	color: #F7EEDD;
	padding: 15px 24px;
	border-radius: 40px;
	z-index: 100000;
	font-family: var(--ug-sans);
	font-weight: 600;
	font-size: .92rem;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: var(--ug-sh);
	transition: .34s var(--ug-ease);
	pointer-events: none;
}

.ug-toast.ug-show {
	transform: translate(-50%, 0);
}

.ug-toast .ug-icon {
	width: 18px;
	height: 18px;
	stroke: #E8B871;
	stroke-width: 2.4;
}

/* --------------------------------------------------------- Exit intent */

.ug-modal-ov {
	position: fixed;
	inset: 0;
	background: rgba(58, 45, 35, .6);
	z-index: 100001;
	display: grid;
	place-items: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
}

.ug-modal-ov.ug-show {
	opacity: 1;
	visibility: visible;
}

.ug-modal {
	background: var(--ug-cream);
	max-width: 820px;
	width: 100%;
	border-radius: var(--ug-r-lg);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	transform: scale(.96);
	transition: .3s var(--ug-ease);
	box-shadow: var(--ug-sh-lg);
}

.ug-modal-ov.ug-show .ug-modal {
	transform: none;
}

.ug-modal-art {
	position: relative;
	min-height: 340px;
	overflow: hidden;
	background: var(--ug-clay);
}

.ug-modal-art img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ug-modal-badge {
	position: absolute;
	top: 20px;
	left: 20px;
	background: var(--ug-rose);
	color: #fff;
	font-family: var(--ug-serif);
	font-size: 1.5rem;
	font-weight: 600;
	padding: 10px 15px;
	border-radius: 14px;
	z-index: 2;
}

.ug-modal-badge small {
	display: block;
	font-size: .58rem;
	letter-spacing: .06em;
	font-family: var(--ug-sans);
}

.ug-modal-bd {
	padding: 40px 36px;
	position: relative;
}

.ug-modal-title {
	font-family: var(--ug-serif);
	font-weight: 500;
	font-size: 2rem;
	line-height: 1.02;
	margin: 10px 0 12px;
}

.ug-modal-bd p {
	font-size: .94rem;
	color: var(--ug-ink-2);
}

.ug-modal-x {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	border: 0;
	background: none;
	cursor: pointer;
}

.ug-modal-x:hover {
	background: var(--ug-sand);
}

.ug-subscribe {
	display: grid;
	gap: 10px;
	margin-top: 16px;
}

.ug-subscribe input[type="email"] {
	padding: 14px 16px;
	border: 1.5px solid var(--ug-line-2);
	border-radius: 40px;
	background-color: var(--ug-card);
	font: inherit;
	width: 100%;
}

.ug-subscribe input[type="email"]:focus {
	outline: none;
	border-color: var(--ug-honey);
}

.ug-fine {
	font-size: .68rem;
	color: var(--ug-muted-text);
}

@media (max-width: 640px) {
	.ug-modal {
		grid-template-columns: 1fr;
	}

	.ug-modal-art {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ug-pcard,
	.ug-link-arrow,
	.ug-toast,
	.ug-modal,
	.ug-ship-fill,
	.ug-announce-rot {
		transition-duration: .01ms;
	}
}

/* ---------------------------------------------------- Riga breadcrumb

Uncode cabla #f7f7f7 in library/css/style-breadcrumbs.css:52 e non espone
nessuna opzione di colore: le uniche sono mostra/nascondi e allineamento.
E' l'unico punto in cui un grigio estraneo alla palette entra nelle pagine,
quindi qui si scende all'ultimo gradino della convenzione e si sovrascrive.
La specificita' pareggia quella del tema (0,2,0), l'ordine di caricamento
del foglio del plugin fa il resto: nessun !important. */

.row-breadcrumb.row-breadcrumb-light {
	background-color: var(--ug-cream);
	border-color: var(--ug-line);
}

/* ------------------------------------------------ Griglia categorie

Riprende .cgrid / .ccard del wireframe (righe 192-204). La sfumatura in basso
arriva a .85: sull'immagine piu' chiara possibile, bianca, il testo bianco
resta a 7,4:1 — sopra il 4,5:1 richiesto dalle AA anche nel caso peggiore. */

.ug-cat-grid {
	display: grid;
	gap: 18px;
}

.ug-cat-cols-4 { grid-template-columns: repeat(4, 1fr); }
.ug-cat-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ug-cat-cols-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
	.ug-cat-cols-4,
	.ug-cat-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.ug-cat-grid { grid-template-columns: 1fr; }
}

.ug-cat-ratio-vertical  .ug-ccard { aspect-ratio: 3 / 3.8; }
.ug-cat-ratio-square    .ug-ccard { aspect-ratio: 1 / 1; }
.ug-cat-ratio-card      .ug-ccard { aspect-ratio: 16 / 10; }
.ug-cat-ratio-landscape .ug-ccard { aspect-ratio: 3 / 2; }
.ug-cat-ratio-wide      .ug-ccard { aspect-ratio: 16 / 9; }

.ug-ccard {
	position: relative;
	display: block;
	aspect-ratio: 3 / 3.8;
	border-radius: var(--ug-r);
	overflow: hidden;
	background: var(--ug-sand);
	box-shadow: var(--ug-sh-sm);
	transition: transform .22s ease, box-shadow .22s ease;
}

.ug-ccard:hover,
.ug-ccard:focus-visible {
	box-shadow: var(--ug-sh);
	transform: translateY(-4px);
}

.ug-ccard .ug-ccard-im {
	position: absolute;
	inset: 0;
	display: block;
}

.ug-ccard .ug-ccard-im img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .55s ease;
}

.ug-ccard:hover .ug-ccard-im img { transform: scale(1.06); }

.ug-ccard::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(58, 45, 35, .85), rgba(58, 45, 35, 0) 60%);
}

.ug-ccard .ug-ccard-lb {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 18px;
	z-index: 2;
	display: block;
	color: #fff;
}

.ug-ccard .ug-ccard-ct {
	display: block;
	font-size: .76rem;
	opacity: .92;
}

.ug-ccard .ug-ccard-name {
	display: block;
	margin-top: 3px;
	font-size: 1.4rem;
	line-height: 1.2;
	color: #fff;
}

.ug-ccard .ug-ccard-desc {
	display: block;
	margin-top: 6px;
	font-size: .82rem;
	opacity: .9;
}

.ug-ccard .ug-ccard-go {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(251, 245, 234, .92);
	display: grid;
	place-items: center;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .22s ease, transform .22s ease;
}

.ug-ccard:hover .ug-ccard-go,
.ug-ccard:focus-visible .ug-ccard-go {
	opacity: 1;
	transform: none;
}

.ug-ccard .ug-ccard-go svg {
	width: 15px;
	height: 15px;
	stroke: var(--ug-brand);
	fill: none;
	stroke-width: 2;
}

@media (prefers-reduced-motion: reduce) {
	.ug-ccard,
	.ug-ccard-im img,
	.ug-ccard-go { transition: none; }
	.ug-ccard:hover { transform: none; }
	.ug-ccard:hover .ug-ccard-im img { transform: none; }
}

/* Categoria senza immagine: invece del fondo sabbia slavato sotto la
   sfumatura, un pannello pieno nei toni del marchio. Cosi' una card vuota
   sembra una scelta e non un errore di caricamento. */

.ug-ccard-noimg {
	background: linear-gradient(160deg, var(--ug-clay), var(--ug-blush));
}

.ug-ccard-noimg::after {
	background: linear-gradient(0deg, rgba(58, 45, 35, .8), rgba(58, 45, 35, .28) 70%);
}

/* ------------------------------------------------- Griglia articoli

Riprende .bgrid / .bcard del wireframe (righe 270-280). L'intera card e' un
solo link: il titolo da solo sarebbe un bersaglio piccolo, e due link verso
la stessa pagina nella stessa card fanno ripetere la destinazione a chi usa
uno screen reader. */

.ug-bgrid {
	display: grid;
	gap: 20px;
}

.ug-bgrid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.ug-bgrid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ug-bgrid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ug-bgrid-cols-1 { grid-template-columns: 1fr; }

@media (max-width: 1100px) {
	.ug-bgrid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
	.ug-bgrid { grid-template-columns: 1fr; }
}

.ug-bcard {
	background: var(--ug-card);
	border-radius: var(--ug-r);
	overflow: hidden;
	box-shadow: var(--ug-sh-sm);
	transition: transform .22s ease, box-shadow .22s ease;
}

.ug-bcard:hover,
.ug-bcard:focus-within {
	box-shadow: var(--ug-sh);
	transform: translateY(-4px);
}

.ug-bcard .ug-bcard-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ug-bcard .ug-bcard-im {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--ug-sand);
	overflow: hidden;
}

.ug-bcard .ug-bcard-im img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .55s ease;
}

.ug-bcard:hover .ug-bcard-im img { transform: scale(1.04); }

.ug-bcard .ug-bcard-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba(251, 245, 234, .94);
	color: var(--ug-brand);
	font-size: .72rem;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 30px;
	box-shadow: var(--ug-sh-sm);
}

.ug-bcard .ug-bcard-bd {
	display: block;
	padding: 19px;
}

.ug-bcard .ug-bcard-date {
	display: block;
	font-size: .76rem;
	color: var(--ug-muted-text);
}

.ug-bcard .ug-bcard-title {
	display: block;
	margin: 8px 0;
	font-size: 1.2rem;
	line-height: 1.12;
	font-weight: 600;
	color: var(--ug-ink);
}

.ug-bcard .ug-bcard-text {
	display: block;
	font-size: .88rem;
	color: var(--ug-ink-2);
}

@media (prefers-reduced-motion: reduce) {
	.ug-bcard,
	.ug-bcard-im img { transition: none; }
	.ug-bcard:hover { transform: none; }
	.ug-bcard:hover .ug-bcard-im img { transform: none; }
}

/* Numeri di pagina della griglia articoli. */

.ug-bnav {
	margin-top: 32px;
}

.ug-bnav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ug-bnav a,
.ug-bnav span {
	display: block;
	min-width: 40px;
	padding: 9px 14px;
	border-radius: 30px;
	text-align: center;
	font-size: .88rem;
	text-decoration: none;
	border: 1px solid var(--ug-line-2);
	color: var(--ug-brand);
	background: var(--ug-card);
	transition: background .18s ease, border-color .18s ease;
}

.ug-bnav a:hover,
.ug-bnav a:focus-visible {
	background: var(--ug-sand);
	border-color: var(--ug-honey);
}

.ug-bnav .current {
	background: var(--ug-brand);
	border-color: var(--ug-brand);
	color: #F7EEDD;
}

.ug-bnav .dots {
	border-color: transparent;
	background: none;
}

/* ---------------------------------------------------- Form contatti */

.ug-contatti { max-width: 680px; }

.ug-cf-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 18px;
}

@media (max-width: 640px) {
	.ug-cf-row { grid-template-columns: 1fr; }
}

.ug-cf-campo { margin: 0 0 16px; }

.ug-cf-campo label {
	display: block;
	margin-bottom: 6px;
	font-size: .84rem;
	color: var(--ug-ink);
}

.ug-cf-campo input,
.ug-cf-campo select,
.ug-cf-campo textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--ug-line-2);
	border-radius: 12px;
	/*
	 * background-color, non la scorciatoia background: quella azzera anche
	 * repeat e position, e la freccia della tendina — che il tema disegna
	 * come background-image con una regola piu' specifica — sopravvive e si
	 * ripete a piastrella su tutto il campo.
	 */
	background-color: var(--ug-card);
	color: var(--ug-ink);
	font: inherit;
	font-size: .92rem;
}

/* Spazio per la freccia del tema, altrimenti il testo ci finisce sotto. */
.ug-cf-campo select {
	padding-right: 42px;
}

.ug-cf-campo input:focus,
.ug-cf-campo select:focus,
.ug-cf-campo textarea:focus {
	outline: 2px solid var(--ug-honey-2);
	outline-offset: 1px;
	border-color: var(--ug-honey-text);
}

.ug-cf-campo textarea { resize: vertical; }

.ug-cf-consenso {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: .84rem;
	color: var(--ug-muted-text);
	margin: 4px 0 18px;
}

.ug-cf-consenso a { color: var(--ug-honey-text); }

/* L'esca deve sparire alla vista senza sparire dal DOM: display:none la
   rende evidente ai bot che leggono lo stile. */
.ug-cf-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ug-cf-azioni { margin: 0; }

.ug-contatti.ug-loading { opacity: .6; pointer-events: none; }

.ug-cf-esito:not(:empty) {
	margin-top: 16px;
	padding: 12px 14px;
	border-radius: 12px;
	font-size: .9rem;
}

.ug-cf-esito.ug-cf-ok {
	background: #EAF1E6;
	color: #33502A;
}

.ug-cf-esito.ug-cf-ko {
	background: #F7E4E2;
	color: #8A2C25;
}

/* --------------------------------------------- Contact Form 7

CF7 rende il pulsante come <input type="submit">, e il tema lo colpisce con
.style-light input[type="submit"] (0,2,1) per lo sfondo e input[type="submit"]
(0,1,1) per la spaziatura. Le classi .ug-btn da sole valgono (0,1,0) e (0,2,0):
perdono. Qui si riportano forma e misure del pulsante aggiungendo il tag e
l'attributo, che portano a (0,2,1) e (0,3,1). Nessun !important.

L'altro guaio e' wpautop, che dentro il form inserisce un <br> dopo ogni
apertura di paragrafo e dopo ogni etichetta: sono quelli a distanziare i
campi, non i margini. */

input.ug-btn[type="submit"] {
	padding: 14px 26px;
	border: 2px solid transparent;
	line-height: 1;
	height: auto;
}

.wpcf7-form br { display: none; }

.wpcf7-form .wpcf7-form-control-wrap { display: block; }

.wpcf7-form .ug-cf-campo,
.wpcf7-form .ug-cf-consenso,
.wpcf7-form .ug-cf-azioni {
	margin-top: 0;
}

/* La casella del consenso, in CF7, e' annidata in tre span. */
.wpcf7-form .ug-cf-consenso .wpcf7-form-control-wrap { display: inline; }
.wpcf7-form .ug-cf-consenso .wpcf7-list-item { margin: 0; display: flex; gap: 10px; align-items: flex-start; }
.wpcf7-form .ug-cf-consenso label { display: flex; gap: 10px; align-items: flex-start; }
.wpcf7-form .ug-cf-consenso input[type="checkbox"] { width: auto; margin-top: 3px; flex: none; }

.wpcf7-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: .82rem;
	color: #8A2C25;
}

.wpcf7-form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 14px;
	border-radius: 12px;
	border: 0;
	background: #F7E4E2;
	color: #8A2C25;
	font-size: .9rem;
}

.wpcf7-form.sent .wpcf7-response-output {
	background: #EAF1E6;
	color: #33502A;
}

/* ------------------------------------- Allineamento del blocco categoria

L'intro di categoria viene stampata da woocommerce_archive_description, che
su Uncode la appende come figlia diretta di .sections-container: fuori da
.limit-width, quindi larga quanto la finestra e attaccata al bordo. Non era
un problema di text-align.

.limit-width misura 1200px centrati; con 20px di respiro per le finestre
strette il contenuto ricade sulla stessa colonna del resto della pagina:
(1440 - 1240) / 2 + 20 = 120, che e' il left misurato del tema. */

.ug-cat-intro {
	/*
	 * Misure prese dal tema, non stimate: .row-parent.limit-width e' largo
	 * al massimo 1200px centrati e ha 36px di padding orizzontale a ogni
	 * larghezza (verificato a 1440 e a 480). Con gli stessi due valori il
	 * contenuto cade sulla stessa colonna dei prodotti:
	 *   1440 → (1440-1200)/2 + 36 = 156   ·  i prodotti iniziano a 156
	 *    480 → il massimo non vincola, 0 + 36 = 36  ·  i prodotti a 36
	 * Prima erano 1240/20px: allineavano al bordo della riga invece che al
	 * suo contenuto, e sbordavano di 36px a sinistra.
	 */
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 36px;
	padding-right: 36px;
}

/* La riga breadcrumb: il tema la colora con .row-breadcrumb.row-breadcrumb-light
   (0,2,0), pari alla mia, e il suo style.css viene caricato DOPO il foglio del
   plugin — quindi a parita' vinceva lui, e la correzione della 1.4.0 non ha mai
   avuto effetto. Aggiungendo .row-container, che l'elemento ha gia', si sale a
   (0,3,0) e l'ordine di caricamento non conta piu'. */

.row-container.row-breadcrumb.row-breadcrumb-light {
	background-color: var(--ug-cream);
	border-color: var(--ug-line);
}

/* Le card vivono anche dentro il mega menu, dove Uncode governa i figli dei
   link con .menu-smart a span { position: relative; display: inline-flex }
   (0,1,2). I selettori qui sopra sono prefissati con la card, quindi valgono
   (0,2,0) e vincono ovunque. Queste due righe coprono i due <span> che devono
   riempire la card anche li'. */

.ug-ccard .ug-ccard-im,
.ug-bcard .ug-bcard-im {
	position: absolute;
	inset: 0;
	display: block;
}

.ug-bcard .ug-bcard-im {
	position: relative;
	inset: auto;
}

/* ------------------------------------ Categorie, disegno per il mega menu

Riprende .mm-cat del wireframe (righe 70-76): immagine sopra, sotto una barra
chiara con il nome a sinistra e il richiamo a destra. Nella tendina il testo
in sovrimpressione non c'era mai stato — quel disegno e' della home. */

.ug-cat-menu .ug-ccard {
	aspect-ratio: auto;
	background: var(--ug-card);
}

.ug-cat-menu .ug-ccard::after { content: none; }

.ug-cat-menu .ug-ccard .ug-ccard-im {
	position: relative;
	inset: auto;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.ug-cat-menu .ug-ccard .ug-ccard-lb {
	position: relative;
	left: auto;
	right: auto;
	bottom: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	padding: 12px 15px;
	color: var(--ug-ink);
}

.ug-cat-menu .ug-ccard .ug-ccard-name {
	margin: 0;
	font-size: 1rem;
	color: var(--ug-ink);
}

.ug-cat-menu .ug-ccard .ug-ccard-cta {
	font-size: .8rem;
	color: var(--ug-honey-text);
	white-space: nowrap;
}

.ug-cat-menu .ug-ccard .ug-ccard-ct {
	flex-basis: 100%;
	order: 3;
	font-size: .76rem;
	color: var(--ug-muted-text);
	opacity: 1;
}

.ug-cat-menu .ug-ccard .ug-ccard-desc {
	flex-basis: 100%;
	order: 4;
	color: var(--ug-ink-2);
	opacity: 1;
}

.ug-cat-menu .ug-ccard:hover { transform: translateY(-3px); }