/*
 * Abello Restyling — pagine di contenuto (Home, Storia, Il negozio, Prodotti), Blog, articolo.
 * Template "Align Wide Fix" del genitore (.is-align-system): colonne di testo, sezioni larghe, fasce piene.
 * Le regole per pagina usano la classe abello-page-<slug> aggiunta in functions.php.
 * Stili scritti nei blocchi (raggi, padding, spaziatori in vh) sono riallineati qui. Solo variabili di tokens.css.
 */

/* ================================================================ Impianto comune */
body .is-align-system > :where(:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright)) { max-width: var(--ab-width-text); }
body .is-align-system > .alignfull > :where(h1, h2, h3, h4, h5, h6, p, figure, .wp-block-group):not(.alignfull):not(.alignwide) { max-width: var(--ab-width-text); }
body .is-align-system .alignwide { max-width: var(--ab-width-wide); }
@media (min-width: 1440px) { body .is-align-system .alignwide { max-width: var(--ab-width-wide); } }

/* ritmo verticale: gli spaziatori dei contenuti (3vh, 5vh, 10vh…) diventano due misure fisse */
.is-align-system .wp-block-spacer { height: var(--ab-space-8) !important; }
.is-align-system .alignfull .wp-block-spacer,
.is-align-system .wp-block-group .wp-block-spacer { height: var(--ab-space-5) !important; }

/* titoli e testo nelle pagine */
.is-align-system h2.wp-block-heading { margin: 0 0 var(--ab-space-5); }
.is-align-system h2.wp-block-heading > br:first-child { display: none; }   /* "a capo" iniziale nei contenuti */
.is-align-system h3.wp-block-heading { margin: 0 0 var(--ab-space-3); }
.is-align-system p.wp-block-paragraph { margin: 0 0 var(--ab-space-4); max-width: var(--ab-measure); }
.is-align-system .has-text-align-center.wp-block-paragraph { margin-left: auto; margin-right: auto; }

/* immagini: angoli quasi vivi come nel resto del sito (i contenuti hanno 5, 10, 15, 20 px) */
.is-align-system .wp-block-image img,
.is-align-system .wp-block-image.has-custom-border img,
.is-align-system .wp-block-cover:not(.alignfull),
.is-align-system .wp-block-column[style*="border"] { border-radius: var(--ab-radius-1) !important; }
.is-align-system .wp-block-buttons .wp-block-button__link { border-radius: var(--ab-radius-1) !important; }

/* sezioni a due colonne (testo + immagine): allargate alla griglia */
.is-align-system > .wp-block-columns:not(.alignfull) {
	max-width: var(--ab-width-wide) !important;
	gap: var(--ab-space-8);
	align-items: center;
	margin-top: var(--ab-space-8);
	margin-bottom: var(--ab-space-8);
}

/* fasce a tutta larghezza con colore (verde scuro dal preset "link-color-hover") o tinta chiara */
.is-align-system .wp-block-group.alignfull.has-background {
	padding-top: var(--ab-section) !important;
	padding-bottom: var(--ab-section) !important;
}
.is-align-system .wp-block-group.alignfull.has-background:not(.has-link-color-hover-background-color) { background-color: var(--ab-color-stage) !important; }
.is-align-system .has-link-color-hover-background-color { color: var(--ab-color-on-dark); }
.is-align-system .has-link-color-hover-background-color :is(h2, h3, h4, h5) { color: var(--ab-color-on-dark); }
.is-align-system .has-link-color-hover-background-color p { color: var(--ab-color-on-dark-muted); }
.is-align-system .has-link-color-hover-background-color a:not(.wp-block-button__link) { color: var(--ab-color-on-dark); }
/* pulsanti sulle fasce verdi: chiari, per staccare dal fondo (prima verde su verde) */
.is-align-system .has-link-color-hover-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--ab-color-on-dark) !important;
	color: var(--ab-color-band) !important;
}
.is-align-system .has-link-color-hover-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background-color: var(--ab-color-on-dark-muted) !important; }
.is-align-system .has-link-color-hover-background-color .is-style-outline .wp-block-button__link {
	color: var(--ab-color-on-dark) !important;
	border: var(--ab-border-hair) solid var(--ab-color-on-dark-muted) !important;
	background: transparent !important;
}
.is-align-system .has-link-color-hover-background-color .is-style-outline .wp-block-button__link:hover { background: color-mix(in srgb, var(--ab-color-on-dark) 12%, transparent) !important; }
.is-align-system .has-link-color-hover-background-color :focus-visible { outline-color: var(--ab-color-focus-on-dark); }

/* gallerie */
.is-align-system .wp-block-gallery {
	max-width: var(--ab-width-wide) !important;
	gap: var(--ab-space-4) !important;
	margin-left: auto;
	margin-right: auto;
}
.is-align-system .wp-block-gallery.is-cropped .wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; }

/* ================================================================ Home */
/* "I migliori prodotti": l'elenco diventa un indice con filetti, senza punti elenco */
.abello-page-home .is-align-system > .wp-block-columns .wp-block-column[style*="border"] { padding: 0 !important; }
.abello-page-home .is-align-system .wp-block-list {
	margin: 0 0 var(--ab-space-6);
	padding: 0;
	list-style: none;
	border-top: var(--ab-border-rule) solid var(--ab-color-border-strong);
}
.abello-page-home .is-align-system .wp-block-list li {
	padding: var(--ab-space-3) 0 !important;
	border-bottom: var(--ab-border-hair) solid var(--ab-color-border);
	font-size: var(--ab-text-md);
}

/* fascia dei numeri */
.abello-stats {
	gap: var(--ab-space-6) !important;
	padding: var(--ab-space-8) var(--ab-gutter) !important;
	background-color: var(--ab-color-band) !important;
}
.abello-stats > .wp-block-group { flex: 1 1 0; max-width: var(--ab-width-text); }
.abello-stats h3.wp-block-heading {
	margin: 0 0 var(--ab-space-2);
	font-family: var(--ab-font-display);
	font-size: var(--ab-text-5xl) !important;
	font-weight: var(--ab-weight-medium);
	line-height: var(--ab-leading-display);
	color: var(--ab-color-on-dark) !important;
	font-variant-numeric: lining-nums tabular-nums;
}
/* etichette scritte in maiuscolo nei contenuti: tornano in minuscolo con l'iniziale maiuscola */
.abello-stats h5.wp-block-heading {
	margin: 0;
	font-family: var(--ab-font-text);
	font-size: var(--ab-text-ui) !important;
	font-weight: var(--ab-weight-regular);
	line-height: var(--ab-leading-snug);
	text-transform: lowercase;
	color: var(--ab-color-on-dark-muted) !important;
}
.abello-stats h5.wp-block-heading::first-letter { text-transform: uppercase; }
.abello-stats.is-animated > * {
	opacity: 0;
	transform: translateY(var(--ab-space-5));
	transition: opacity var(--ab-duration-slow) var(--ab-ease), transform var(--ab-duration-slow) var(--ab-ease);
}
.abello-stats.is-visible > * { opacity: 1; transform: none; }
.abello-stats.is-visible > :nth-child(2) { transition-delay: var(--ab-duration-fast); }
.abello-stats.is-visible > :nth-child(3) { transition-delay: calc(2 * var(--ab-duration-fast)); }
.abello-stats.is-visible > :nth-child(4) { transition-delay: calc(3 * var(--ab-duration-fast)); }
@media (max-width: 781.98px) {
	.abello-stats.is-layout-flex { flex-wrap: wrap; row-gap: var(--ab-space-6) !important; }
	.abello-stats > .wp-block-group { flex: 1 1 40%; }
}

/* "Chiamaci": testo su una misura leggibile */
.abello-page-home .is-align-system .has-link-color-hover-background-color p.wp-block-paragraph { max-width: var(--ab-measure); font-size: var(--ab-text-md); line-height: var(--ab-leading-text); }

/* "Il punto vendita" */
.abello-page-home .is-align-system > h2.has-text-align-center { margin-top: var(--ab-space-2); }

/* ================================================================ Storia */
/* "Le tappe": linea del tempo (fascia chiara con righe data | testo) */
.abello-page-storia .is-align-system .wp-block-group.alignfull.has-background .wp-block-columns.are-vertically-aligned-top {
	position: relative;
	gap: var(--ab-space-6);
	margin: 0 auto !important;
	padding: 0 0 var(--ab-space-6);
}
.abello-page-storia .is-align-system .wp-block-group.alignfull.has-background .wp-block-columns.are-vertically-aligned-top > .wp-block-column:first-child h3 {
	margin: 0;
	font-family: var(--ab-font-display);
	font-size: var(--ab-text-2xl);
	font-weight: var(--ab-weight-medium);
	line-height: var(--ab-leading-title);
	text-align: right;
	font-variant-numeric: lining-nums;
}
.abello-page-storia .is-align-system .wp-block-group.alignfull.has-background .wp-block-columns.are-vertically-aligned-top > .wp-block-column:last-child {
	position: relative;
	padding-left: var(--ab-space-6);
	border-left: var(--ab-border-rule) solid var(--ab-color-border-strong);
}
.abello-page-storia .is-align-system .wp-block-group.alignfull.has-background .wp-block-columns.are-vertically-aligned-top > .wp-block-column:last-child::before {
	content: "";
	position: absolute;
	top: var(--ab-space-3);
	left: calc(-1 * (var(--ab-space-2) + var(--ab-border-hair)));
	width: var(--ab-space-4);
	height: var(--ab-space-4);
	border-radius: var(--ab-radius-round);
	background: var(--ab-color-stage);
	box-shadow: inset 0 0 0 var(--ab-border-rule) var(--ab-color-border-strong);
}
.abello-page-storia .is-align-system .wp-block-group.alignfull.has-background .wp-block-columns.are-vertically-aligned-top > .wp-block-column:last-child p:last-child { margin-bottom: 0; }
@media (max-width: 781.98px) {
	.abello-page-storia .is-align-system .wp-block-group.alignfull.has-background .wp-block-columns.are-vertically-aligned-top { gap: var(--ab-space-2); padding-left: var(--ab-space-6); border-left: var(--ab-border-rule) solid var(--ab-color-border-strong); padding-bottom: var(--ab-space-6); }
	.abello-page-storia .is-align-system .wp-block-group.alignfull.has-background .wp-block-columns.are-vertically-aligned-top > .wp-block-column:first-child h3 { text-align: left; }
	.abello-page-storia .is-align-system .wp-block-group.alignfull.has-background .wp-block-columns.are-vertically-aligned-top > .wp-block-column:last-child { padding-left: 0; border-left: 0; }
	.abello-page-storia .is-align-system .wp-block-group.alignfull.has-background .wp-block-columns.are-vertically-aligned-top > .wp-block-column:last-child::before { display: none; }
}

/* ================================================================ Il negozio */
/* "Cosa trovi in negozio": reparti con filetto, nome in Hanken */
.abello-page-il-negozio .is-align-system .wp-block-group.alignfull.has-background .wp-block-columns { gap: var(--ab-space-6); margin: 0 auto var(--ab-space-6) !important; }
.abello-page-il-negozio .is-align-system .wp-block-group.alignfull.has-background .wp-block-column {
	padding-top: var(--ab-space-3);
	border-top: var(--ab-border-rule) solid var(--ab-color-border-strong);
}
.abello-page-il-negozio .is-align-system .wp-block-group.alignfull.has-background h3.wp-block-heading {
	font-family: var(--ab-font-text);
	font-size: var(--ab-text-xl);
	font-weight: var(--ab-weight-semibold);
	line-height: var(--ab-leading-snug);
}
.abello-page-il-negozio .is-align-system .wp-block-group.alignfull.has-background h3 a { color: var(--ab-color-text); text-decoration: none; }
.abello-page-il-negozio .is-align-system .wp-block-group.alignfull.has-background h3 a:hover { text-decoration: underline; text-underline-offset: var(--ab-underline-offset); }
.abello-page-il-negozio .is-align-system .wp-block-group.alignfull.has-background p { color: var(--ab-color-text-muted); }

/* ================================================================ Blog */
.abello-blog .wp-block-post-template { gap: var(--ab-space-8) var(--ab-space-6) !important; }
/* con due soli articoli la griglia a tre colonne lascia un vuoto: due colonne */
.abello-blog .wp-block-post-template.is-layout-grid:not(:has(> li:nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.abello-blog .wp-block-post { display: flex; flex-direction: column; }
.abello-blog .wp-block-post-featured-image { margin: 0 0 var(--ab-space-4); overflow: hidden; border-radius: var(--ab-radius-1); }
.abello-blog .wp-block-post-featured-image img { aspect-ratio: 3 / 2; object-fit: cover; }
.abello-blog .abello-blog-cat { margin-bottom: var(--ab-space-2); }
.abello-blog .abello-blog-cat a {
	font-size: var(--ab-text-sm);
	font-weight: var(--ab-weight-semibold);
	color: var(--ab-color-link);
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
}
.abello-blog .abello-blog-cat a:hover { text-decoration: underline; }
.abello-blog .wp-block-post-title {
	margin: 0 0 var(--ab-space-2);
	font-family: var(--ab-font-text);
	font-size: var(--ab-text-xl) !important;
	font-weight: var(--ab-weight-semibold);
	line-height: var(--ab-leading-snug);
	letter-spacing: normal;
}
.abello-blog .wp-block-post-title a { color: inherit; text-decoration: none; }
.abello-blog .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: var(--ab-underline-offset); }
.abello-blog .abello-blog-data { margin-bottom: var(--ab-space-3); font-size: var(--ab-text-sm); color: var(--ab-color-text-muted); opacity: 1; }
.abello-blog .wp-block-post-excerpt { margin: 0; }
.abello-blog .wp-block-post-excerpt__excerpt { font-size: var(--ab-text-ui); line-height: var(--ab-leading-text); margin-bottom: var(--ab-space-3); }
.abello-blog .wp-block-post-excerpt__more-link { font-weight: var(--ab-weight-semibold); }
.abello-blog .wp-block-query-pagination { margin-top: var(--ab-space-8); }
@media (max-width: 781.98px) {
	.abello-blog .wp-block-post-template.is-layout-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ================================================================ Articolo */
.single-post #content > .col-70 { width: 100%; max-width: var(--ab-width-text); flex-basis: 100%; margin: 0 auto; }
.single-post article > h1 { margin: 0 0 var(--ab-space-4); font-size: var(--ab-text-4xl); }
.single-post .meta-article {
	margin: 0 0 var(--ab-space-6);
	font-size: var(--ab-text-ui);
	text-transform: none;
	letter-spacing: normal;
	color: var(--ab-color-text-muted);
}
.single-post .meta-article strong { font-weight: var(--ab-weight-regular); }
.single-post .meta-article a { color: var(--ab-color-link); }
.single-post .img-res.img-16-9 { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--ab-radius-1); margin-bottom: var(--ab-space-7) !important; }
.single-post .text-content { font-size: var(--ab-text-md); line-height: var(--ab-leading-text); }
.single-post .text-content p { margin: 0 0 var(--ab-space-5); }
.single-post .text-content h2 { margin: var(--ab-space-8) 0 var(--ab-space-4); font-size: var(--ab-text-2xl); }
.single-post .text-content h3 { margin: var(--ab-space-7) 0 var(--ab-space-3); }
.single-post .text-content figure.wp-block-image { margin: var(--ab-space-7) 0; }
.single-post .text-content figure.wp-block-image img { border-radius: var(--ab-radius-1); }
.single-post .text-content figcaption { margin-top: var(--ab-space-2); font-size: var(--ab-text-sm); color: var(--ab-color-text-muted); text-align: left; opacity: 1; }
.single-post article hr { border: 0; border-top: var(--ab-border-hair) solid var(--ab-color-border); margin: var(--ab-space-8) 0 var(--ab-space-6) !important; }
.abello-torna-blog a { font-weight: var(--ab-weight-semibold); text-decoration: none; }
.abello-torna-blog a:hover { text-decoration: underline; text-underline-offset: var(--ab-underline-offset); }
.single-post article > p:not(.meta-article):not(.abello-torna-blog) a[rel="tag"] { font-size: var(--ab-text-sm); }

/* commenti */
.single-post #comments .comment-reply-title,
.single-post #comments h3 { font-family: var(--ab-font-text); font-size: var(--ab-text-xl); font-weight: var(--ab-weight-semibold); }
.single-post #comments label { display: block; margin-bottom: var(--ab-space-1); font-size: var(--ab-text-ui); font-weight: var(--ab-weight-semibold); }
.single-post #comments input[type="text"],
.single-post #comments input[type="email"],
.single-post #comments input[type="url"],
.single-post #comments textarea {
	width: 100%;
	min-height: var(--ab-tap);
	padding: var(--ab-space-2) var(--ab-space-3);
	border: var(--ab-border-hair) solid var(--ab-color-border-field);
	border-radius: var(--ab-radius-1);
	background: var(--ab-color-surface);
	font-family: var(--ab-font-text);
	font-size: var(--ab-text-ui);
}
.single-post #comments .comment-form-cookies-consent { display: flex; gap: var(--ab-space-2); align-items: flex-start; }
.single-post #comments .comment-form-cookies-consent label { flex: 1; min-width: 0; margin: 0; font-weight: var(--ab-weight-regular); line-height: var(--ab-leading-snug); }
.single-post #comments .comment-form-cookies-consent input[type="checkbox"] { flex: none; width: var(--ab-check); height: var(--ab-check); margin: var(--ab-space-1) 0 0; accent-color: var(--ab-color-action); }
.single-post #comments .comment-form-cookies-consent { flex-wrap: nowrap; float: none; clear: both; width: 100%; max-width: 100%; }
.single-post #comments input[type="submit"] {
	min-height: var(--ab-tap);
	padding: var(--ab-space-3) var(--ab-space-6);
	border: 0;
	border-radius: var(--ab-radius-1);
	background: var(--ab-color-action);
	color: var(--ab-color-on-action);
	font-family: var(--ab-font-text);
	font-size: var(--ab-text-ui);
	font-weight: var(--ab-weight-semibold);
	text-transform: none;
}
.single-post #comments input[type="submit"]:hover { background: var(--ab-color-action-hover); }
.single-post #comments > a[href*="feed"],
.single-post #comments .comments-rss { font-size: var(--ab-text-sm); }

/* articoli correlati (template del child) */
.single-post article .alignfull > .grid { max-width: var(--ab-width-wide); margin: 0 auto; }
.single-post article .alignfull h3.text-center.text-2 { font-family: var(--ab-font-display); font-size: var(--ab-text-3xl); }
.single-post article .alignfull .col-33 h3 { font-family: var(--ab-font-text); font-size: var(--ab-text-xl); font-weight: var(--ab-weight-semibold); line-height: var(--ab-leading-snug); color: var(--ab-color-text); }
.single-post article .alignfull .col-33 img { border-radius: var(--ab-radius-1); }
@media (max-width: 781.98px) {
	/* il genitore mette Nome, Email e Sito su tre colonne flottanti anche su mobile */
	.single-post #comments :is(.comment-form-author, .comment-form-email, .comment-form-url) { float: none; width: 100%; margin: 0 0 var(--ab-space-4); }
}

/* ================================================================ Pagine con il template standard (es. Contatti)
   page.php del genitore: colonna al 70% con blocchi "alignwide" che ne escono; titolo e blocchi allineati alla griglia larga */
.page-template-default:not(.woocommerce-page) #content > .col-70 { width: 100%; max-width: var(--ab-width-wide); flex-basis: 100%; margin: 0 auto; }
.page-template-default:not(.woocommerce-page) #content article > h1 { margin: 0 0 var(--ab-space-7); }
.page-template-default:not(.woocommerce-page) .text-content .alignwide { width: auto; max-width: none; margin-left: 0; margin-right: 0; }
.page-template-default:not(.woocommerce-page) .text-content > .wp-block-columns { gap: var(--ab-space-8); }

/* ================================================================ Fascia "Consegna gratuita" (Home, 2026-10-06)
   Blocco Copertina con classe "abello-promo": foto a tutta larghezza con parallax, velo ghisa da sinistra
   (stesso linguaggio delle hero), testo e pulsante a sinistra. */
.is-align-system .wp-block-cover.abello-promo {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--ab-promo-min-h) !important;
	margin-top: 0;
	margin-bottom: 0;
	padding: var(--ab-section) 0 !important;
	overflow: hidden;
	color: var(--ab-color-on-dark);
	border-radius: 0 !important;
}
.is-align-system .wp-block-cover.abello-promo > .wp-block-cover__background { display: none !important; }
.is-align-system .wp-block-cover.abello-promo > .wp-block-cover__image-background { z-index: 0; }
.is-align-system .wp-block-cover.abello-promo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--ab-promo-veil);
	pointer-events: none;
}
.is-align-system .wp-block-cover.abello-promo > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--ab-width-wide) !important;
	margin: 0 auto;
	padding: 0 var(--ab-gutter);
}
.is-align-system .wp-block-cover.abello-promo > .wp-block-cover__inner-container::before {
	content: "";
	display: block;
	width: var(--ab-space-8);
	height: var(--ab-border-rule);
	margin-bottom: var(--ab-space-5);
	background: var(--ab-color-accent-on-dark);
}
.is-align-system .wp-block-cover.abello-promo > .wp-block-cover__inner-container > * {
	max-width: var(--ab-hero-copy);
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-align: left !important;
}
.is-align-system .wp-block-cover.abello-promo h2 {
	margin: 0 0 var(--ab-space-4);
	font-size: var(--ab-text-4xl) !important;
	font-weight: var(--ab-weight-regular);
	line-height: var(--ab-leading-title);
	color: var(--ab-color-on-dark);
}
.is-align-system .wp-block-cover.abello-promo p {
	margin: 0 0 var(--ab-space-6);
	max-width: var(--ab-measure-short);
	font-size: var(--ab-text-lg) !important;
	line-height: var(--ab-leading-snug);
	color: var(--ab-color-on-dark);
}
.is-align-system .wp-block-cover.abello-promo .wp-block-button__link { font-size: var(--ab-text-ui); padding: var(--ab-space-4) var(--ab-space-6); }
.is-align-system .wp-block-cover.abello-promo :focus-visible { outline-color: var(--ab-color-focus-on-dark); }
@media (max-width: 781.98px) {
	.is-align-system .wp-block-cover.abello-promo { align-items: flex-end; min-height: var(--ab-promo-min-h-mobile) !important; }
	.is-align-system .wp-block-cover.abello-promo::after { background: var(--ab-promo-veil-mobile); }
}