/*
 Theme Name:   Kubio Child — Telaio su misura
 Theme URI:    https://www.cantagallitelai.it
 Template:     kubio
 Version:      1.0.157
 Description:  Tema figlio di Kubio per Cantagalli Telai. Qui vanno tutte le personalizzazioni (CSS, override di template, codice in functions.php) così restano al sicuro dagli aggiornamenti del tema Kubio.
 Author:       Cantagalli
 Text Domain:  kubio-child
 License:      GNU General Public License v3 or later
*/

/* ─────────────────────────────────────────────────────────────
   PALETTE MARRONE (legno) — coerente con logo e shop2.
   Accento del tema (era blu) e sfondi pulsanti (era arancio) → marrone scuro
   #4A2E15; bronzo #B58347 (= logo) per le SOTTOLINEE dei titoli e gli hover.
   Sfondo crema e testo scuro restano invariati. Priorità leggibilità: i testi
   usano il marrone scuro (contrasto alto), il bronzo solo per linee/hover.
   ───────────────────────────────────────────────────────────── */
:root {
  --kubio-color-1: 74, 46, 21 !important;             /* #4A2E15 marrone scuro (linee/testi/accenti) */
  --kubio-color-1-variant-3: 107, 68, 35 !important;  /* #6B4423 */
  --kubio-color-1-variant-4: 62, 40, 22 !important;   /* #3E2816 (hover scuro) */
  --kubio-color-2: 74, 46, 21 !important;             /* #4A2E15 (sfondi pulsanti) */
  --kubio-color-2-variant-4: 181, 131, 71 !important; /* #B58347 bronzo (hover pulsanti) */
}
/* Sottolinee dei titoli → bronzo (decorativo, non testo) */
.wp-block-kubio-divider__line { border-bottom-color: #B58347 !important; }
.wp-block-kubio-divider svg, .wp-block-kubio-divider path, .wp-block-kubio-divider polygon { fill: #B58347 !important; }
/* Footer: link marroni (leggibili sul footer chiaro), hover bronzo */
.wp-block-kubio-footer a { color: #4A2E15 !important; }
.wp-block-kubio-footer a:hover { color: #B58347 !important; }

/* ─────────────────────────────────────────────────────────────
   UNIFORMITÀ FONT — WooCommerce (carrello, checkout, account, negozio)
   Il tema usa Open Sans; WooCommerce applica dimensioni piccole e disomogenee.
   Qui forziamo il font ereditato dal tema e una dimensione base leggibile,
   coerente con il resto del sito.
   ───────────────────────────────────────────────────────────── */
.woocommerce, .woocommerce-page,
.woocommerce p, .woocommerce li, .woocommerce dd, .woocommerce dt,
.woocommerce td, .woocommerce th,
.woocommerce label, .woocommerce input, .woocommerce select, .woocommerce textarea,
.woocommerce table.shop_table, .woocommerce table.cart, .woocommerce-cart table.cart,
.woocommerce .cart_totals, .woocommerce ul.order_details, .woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering, .woocommerce ul.products li.product,
.woocommerce-MyAccount-content, .woocommerce-MyAccount-navigation,
.woocommerce-checkout, .woocommerce-billing-fields, .woocommerce-order-details,
.woocommerce-order-received {
  font-family: inherit !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.woocommerce table.cart td, .woocommerce table.cart th,
.woocommerce-cart table.cart td, .woocommerce table.shop_table td,
.woocommerce table.shop_table th, .woocommerce .cart_totals th,
.woocommerce .cart_totals td, .woocommerce .order-total .amount {
  font-size: 16px !important;
}

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .button, .woocommerce .wc-block-components-button {
  font-family: inherit !important;
  font-size: 16px !important;
  line-height: 1.4;
}

.woocommerce .quantity .qty { font-size: 16px !important; padding: 8px; }

.woocommerce-message, .woocommerce-info, .woocommerce-error,
.woocommerce-error li, .woocommerce-notices-wrapper,
.wc-block-components-notice-banner { font-size: 16px !important; }

/* Titoli WooCommerce con lo stesso font del tema (dimensione dai titoli tema) */
.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce-order-received h1, .woocommerce-checkout h3 { font-family: inherit !important; }

/* ── Carrello/Checkout a BLOCCHI (WooCommerce Blocks: classi wc-block-*) ──
   È la versione nuova usata da questo sito. Allineo a 16px, la dimensione
   "normale" del tema (come la home). ── */
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout,
.wc-block-cart, .wc-block-checkout {
  font-family: inherit !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}
.wc-block-components-product-name { font-size: 17px !important; font-weight: 600; }
.wc-block-components-product-metadata, .wc-block-components-product-metadata *,
.wc-block-components-product-metadata__description,
.wc-block-components-product-details, .wc-block-components-product-details li {
  font-size: 15px !important; line-height: 1.5 !important;
}
.wc-block-components-formatted-money-amount,
.wc-block-components-order-summary-item__total-price,
.wc-block-cart-item__total .wc-block-components-formatted-money-amount { font-size: 16px !important; }
.wc-block-components-totals-item, .wc-block-components-totals-item__label,
.wc-block-components-totals-item__value { font-size: 16px !important; }
.wc-block-cart__totals-title, .wc-block-components-title { font-size: 15px !important; letter-spacing: .03em; }
.wc-block-cart-items__header th, .wc-block-cart-items__header { font-size: 14px !important; letter-spacing: .04em; }
.wc-block-components-quantity-selector, .wc-block-components-quantity-selector__input { font-size: 16px !important; }
.wc-block-components-panel__button, .wc-block-components-panel, .wc-block-components-panel__content { font-size: 15px !important; }
.wc-block-components-text-input input, .wc-block-components-text-input label,
.wc-block-components-address-form input, .wc-block-components-select { font-size: 16px !important; }
.wc-block-components-button, .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button, .wc-block-components-button__text { font-size: 16px !important; }

/* ─────────────────────────────────────────────────────────────
   HOME — SPAZIATURA UNIFORME TRA LE SEZIONI.
   Il tema dà a ogni sezione 100px sopra/sotto su desktop (div.h-section-
   global-spacing), quindi ~200px di vuoto tra un blocco e l'altro. L'unica
   diversa era "Dicono di noi" (regola vecchia 10/0) che dava ~110px, lo
   spazio "giusto" scelto dall'utente. Qui portiamo TUTTE le 12 sezioni della
   home a 55px sopra/sotto → gap uniforme di ~110px in tutta la pagina,
   identico a quello di Dicono di noi. Un solo numero da toccare per calibrare.
   (Su tablet/mobile il tema usa già valori più bassi: li lasciamo al tema.)

   ECCEZIONI: le sezioni a FOTO PIENA #content-1 e #content-3 sono progettate
   per TOCCARSI (padding 0, immagini a filo). E il #footer resta com'era. Questi
   3 sono esclusi dalla spaziatura uniforme, così restano come prima.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 993px) {
  body.page-id-9 div.h-section-global-spacing:not(#content-1):not(#content-3):not(#footer):not(#sez-dicono) {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }
  /* #content-1 (prima foto piena) deve toccare #content-3 SOTTO (bottom 0), ma
     SOPRA — contro i box "Scegli la tua area" — serve lo stacco come le altre
     sezioni: solo padding-top, il bottom resta 0 così le due foto combaciano. */
  body.page-id-9 div.h-section-global-spacing#content-1 {
    padding-top: 55px !important;
  }
  /* "Dicono di noi" (#sez-dicono) contiene titolo + bottone; il widget
     recensioni (.ctg-recensioni) è il FRATELLO subito dopo. Il vuoto tra bottone
     e logo Google era il padding-bottom (55px) di questa sezione: lo riduco a
     6px così titolo · bottone · recensioni sono un blocco unico. Il top resta
     55px come le altre sezioni. */
  body.page-id-9 #sez-dicono.h-section-global-spacing {
    padding-top: 55px !important;
    padding-bottom: 6px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   HEADER — BANNER BIANCO (STANDARD SU TUTTE LE PAGINE / TUTTI GLI HEADER)
   Gli header Kubio (front-header, header, 404-header) sono "overlap"
   (trasparenti, sovrapposti al contenuto) con testo chiaro
   (--kubio-color-5 = bianco), poco leggibile su sfondi chiari/foto.
   Selettori GENERICI (non legati al singolo styleRef) così valgono per ogni
   header del sito: sfondo bianco + voci menu e icona carrello in nero.
   ───────────────────────────────────────────────────────────── */
.wp-block-kubio-navigation-section__nav { background-color: #ffffff !important; }

/* Voci di menu in nero */
.wp-block-kubio-navigation-section .kubio-menu > ul > li > a { color: #1f1b16 !important; }
.wp-block-kubio-navigation-section .kubio-menu > ul > li > a:hover,
.wp-block-kubio-navigation-section .kubio-menu > ul > li.current_page_item > a { color: #000000 !important; }

/* Hamburger (menu mobile) scuro su barra bianca */
.wp-block-kubio-navigation-section .h-hamburger,
.wp-block-kubio-navigation-section .h-hamburger::before,
.wp-block-kubio-navigation-section .h-hamburger::after { background-color: #1f1b16 !important; }

/* Icona carrello scura quando è in linea col menu (non flottante) */
#ctg-cart-btn:not(.ctg-fixed) { color: #1f1b16 !important; }

/* ─────────────────────────────────────────────────────────────
   CONFIGURATORE (pagina id 56) — immagine di sfondo del banner titolo.
   Il titolo pagina Kubio usa di default hero3.jpg su TUTTE le pagine interne
   (#kubio .style-KFTMhA6WOVh-outer). Qui la sostituiamo SOLO sul configuratore.
   ───────────────────────────────────────────────────────────── */
body.page-id-56 #kubio .style-KFTMhA6WOVh-outer {
  background-image: url("/wp-content/uploads/2026/07/configuratore-artisti.jpg") !important;
  background-position: center center !important;
}

/* ─────────────────────────────────────────────────────────────
   NEGOZIO — archivio prodotti (/negozio/) e archivi categoria.
   Rifinitura della griglia standard WooCommerce per allinearla al look del
   sito: schede prodotto a "card", prezzo nel blu del brand, badge sconto e
   spaziature coerenti. I colori dei pulsanti restano quelli del tema Kubio.
   ───────────────────────────────────────────────────────────── */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: #ffffff;
  border: 1px solid #E6DFD2;
  border-radius: 14px;
  padding: 14px 14px 18px;
  text-align: center;
  transition: box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  box-shadow: 0 10px 26px rgba(31, 27, 22, .10);
  transform: translateY(-2px);
}
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  border-radius: 10px;
  margin-bottom: 12px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-weight: 600;
  padding: .3em 0 .2em;
  font-size: 17px !important;
}
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  color: #4A2E15;
  font-weight: 700;
}
.woocommerce ul.products li.product .price del { color: #9a9488; font-weight: 400; }
.woocommerce span.onsale {
  background: #4A2E15;
  border-radius: 20px;
  min-height: auto;
  min-width: auto;
  padding: 4px 12px;
  line-height: 1.3;
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { margin-bottom: 20px; }

/* Titolo pagina Negozio + intestazioni archivio categoria */
.woocommerce-products-header__title,
.woocommerce .page-title,
.woocommerce-page .woocommerce-products-header__title { font-weight: 600; }

/* Allineamento: i bottoni "Aggiungi al carrello" sulla stessa riga in ogni box.
   Scheda in colonna flex, immagine quadrata, titolo e prezzo ad altezza uniforme
   (così l'area sopra il bottone è identica) e bottone spinto in fondo. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product { display: flex; flex-direction: column; }
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title { min-height: 2.8em; }
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  display: block;
  min-height: 1.5em;
  margin-bottom: 14px;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.added_to_cart,
.woocommerce-page ul.products li.product .button { margin-top: auto; }

/* Rimuovi la sidebar vuota "Kubio info / Widget area not found" dagli archivi
   prodotto e porta la griglia a tutta larghezza. */
.woocommerce.archive .wp-block-kubio-widget-area { display: none !important; }
.woocommerce.archive .wp-block-kubio-row__inner > .wp-block-kubio-column:has(.wp-block-kubio-widget-area) {
  display: none !important;
}
.woocommerce.archive .wp-block-kubio-row__inner > .wp-block-kubio-column:has(ul.products) {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ─────────────────────────────────────────────────────────────
   NEGOZIO — barra categorie + ricerca (sopra la griglia prodotti).
   ───────────────────────────────────────────────────────────── */
.ctg-shopbar {
  display: flex; flex-wrap: wrap; gap: 14px 22px;
  align-items: center; justify-content: space-between;
  margin: 0 0 24px; padding-bottom: 18px; border-bottom: 1px solid #E6DFD2;
}
.ctg-shopbar__cats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.ctg-shopbar__cats a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border: 1px solid #DDD5C6; border-radius: 999px;
  color: #3a352d; text-decoration: none; font-size: 15px; line-height: 1.2;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ctg-shopbar__cats a:hover { border-color: #4A2E15; color: #4A2E15; }
.ctg-shopbar__cats li.is-active a { background: #4A2E15; border-color: #4A2E15; color: #fff; }
.ctg-shopbar__cats .ctg-count { font-size: 12px; opacity: .6; }
.ctg-shopbar__cats li.is-active .ctg-count { opacity: .9; }
.ctg-shopbar__search {
  display: flex; align-items: stretch; background: #fff;
  border: 1px solid #DDD5C6; border-radius: 999px; overflow: hidden;
}
.ctg-shopbar__search input[type="search"] {
  box-sizing: border-box; margin: 0; border: 0; background: transparent; outline: none;
  height: 44px; line-height: 44px !important; padding: 0 10px 0 18px;
  font-size: 15px; min-width: 210px; color: #1F1B16;
}
.ctg-shopbar__search button {
  border: 0; background: transparent; cursor: pointer; color: #4A2E15;
  padding: 0 16px; display: flex; align-items: center; justify-content: center;
}
.ctg-shopbar__search:focus-within { border-color: #4A2E15; }
@media (max-width: 640px) {
  .ctg-shopbar { gap: 14px; }
  .ctg-shopbar__search { width: 100%; }
  .ctg-shopbar__search input[type="search"] { flex: 1 1 auto; min-width: 0; }
}

/* ─────────────────────────────────────────────────────────────
   SHOP — popup "aggiunto al carrello" (coerente col configuratore).
   ───────────────────────────────────────────────────────────── */
.ctg-cartpop { position: fixed; inset: 0; z-index: 100000; display: flex;
  align-items: center; justify-content: center; padding: 20px; }
.ctg-cartpop[hidden] { display: none; }
.ctg-cartpop__backdrop { position: absolute; inset: 0; background: rgba(20,18,15,.55);
  opacity: 0; transition: opacity .2s ease; }
.ctg-cartpop.is-open .ctg-cartpop__backdrop { opacity: 1; }
.ctg-cartpop__card { position: relative; width: 100%; max-width: 440px; background: #fff;
  border-radius: 16px; padding: 30px 28px 26px; text-align: center;
  box-shadow: 0 24px 60px rgba(20,18,15,.28);
  transform: translateY(10px) scale(.98); opacity: 0; transition: transform .2s ease, opacity .2s ease; }
.ctg-cartpop.is-open .ctg-cartpop__card { transform: none; opacity: 1; }
.ctg-cartpop__check { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
  background: #2E6B3F; color: #fff; font-size: 28px; line-height: 54px; font-weight: 700; }
.ctg-cartpop__title { font-family: inherit; font-size: 22px; font-weight: 600; margin: 0 0 6px; color: #1F1B16; }
.ctg-cartpop__name { font-size: 16px; color: #3a352d; margin: 0 0 4px; }
.ctg-cartpop__meta { font-size: 14px; color: #7a7468; margin: 0 0 20px; min-height: 1.2em; }
.ctg-cartpop__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ctg-cartpop__actions > * { flex: 1 1 0; min-width: 150px; box-sizing: border-box;
  padding: 14px 16px; border-radius: 10px; font-size: 16px; font-weight: 600;
  cursor: pointer; text-align: center; text-decoration: none; line-height: 1.2; transition: background .15s ease, border-color .15s ease; }
.ctg-cartpop__continue { background: #fff; color: #1F1B16; border: 1px solid #DDD5C6; }
.ctg-cartpop__continue:hover { background: #F5F2EB; }
.ctg-cartpop__gocart { background: #4A2E15; color: #fff !important; border: 1px solid #4A2E15; }
.ctg-cartpop__gocart:hover { background: #3E2816; }

/* Variante CONFERMA rimozione (carrello): icona cestino + bottone distruttivo. */
.ctg-cartpop__icon {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
  background: #B23B3B; color: #fff; display: flex; align-items: center; justify-content: center;
}
.ctg-cartpop__delete { background: #B23B3B; color: #fff; border: 1px solid #B23B3B; }
.ctg-cartpop__delete:hover { background: #9a2f2f; }

/* ─────────────────────────────────────────────────────────────
   HOME (page-id-9) — CTA come PULSANTI PIENI invece che link testuali.
   I bottoni Kubio "Dud6AOZG0Hca/Hc" hanno background invisibile → sembrano solo
   testo. Qui li rendiamo pulsanti pieni nel blu del brand, mirando alle SINGOLE
   istanze (classi style-local-*) scoped a page-id-9, con !important (le regole
   Kubio #kubio non usano !important). "In arrivo" (Restauratori, non cliccabile)
   diventa una pill muta, per coerenza nei tre box.
   Pieni (blu): local-53 (Configura ora), 65 (Vai al negozio), 28/82/131 (i tre
   "Configura il tuo telaio"). Secondario (bianco): local-29 (Contatti), stessa
   forma/misura. Muto: local-59 (In arrivo). Tutti stessa geometria (bordo 2px,
   padding, raggio) così l'hover "inverte" i colori restando allineati.
   ───────────────────────────────────────────────────────────── */
body.page-id-9 a.style-local-53-link,
body.page-id-9 a.style-local-65-link,
body.page-id-9 a.style-local-28-link,
body.page-id-9 a.style-local-82-link,
body.page-id-9 a.style-local-131-link,
body.page-id-9 a.style-local-29-link,
body.page-id-9 a.style-local-59-link {
  display: inline-block !important;
  width: auto !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  padding: 14px 30px !important;
  border: 2px solid #4A2E15 !important;
  border-radius: 10px !important;
  transition: background-color .15s ease, color .15s ease !important;
}
/* CTA pieni: ORO CHIARO del logo → hover marrone pieno.
   Colore campionato dal file del logo: #E0C080 è il tono chiaro dominante
   (il tono scuro del logo, #482810, coincide di fatto con il nostro #4A2E15).
   Testo SCURO, non bianco: verificato col contrasto WCAG —
     bianco su #E0C080 = 1,75:1  → insufficiente (serve 4,5:1), illeggibile
     #4A2E15 su #E0C080 = 7,10:1 → ampiamente conforme
   Così il pulsante risalta di più sulle foto scure ed è anche più leggibile. */
body.page-id-9 a.style-local-53-link,
body.page-id-9 a.style-local-28-link,
body.page-id-9 a.style-local-82-link {
  background-color: #E0C080 !important;
  color: #4A2E15 !important;
}
body.page-id-9 a.style-local-53-link:hover,
body.page-id-9 a.style-local-28-link:hover,
body.page-id-9 a.style-local-82-link:hover {
  background-color: #4A2E15 !important;
  color: #ffffff !important;
}
/* Secondari: base BIANCA con testo marrone → hover marrone pieno.
   Contatti (local-29) + hero "Configura il tuo telaio" (local-131). */
body.page-id-9 a.style-local-29-link,
body.page-id-9 a.style-local-131-link {
  background-color: #ffffff !important;
  color: #4A2E15 !important;
}
body.page-id-9 a.style-local-29-link:hover,
body.page-id-9 a.style-local-131-link:hover {
  background-color: #4A2E15 !important;
  color: #ffffff !important;
}
/* "In arrivo": pill muta, non azionabile (solo Shop = local-65; Restauratori
   local-59 ora è attivo "Configura ora" → escluso da qui, vedi regola href sotto) */
body.page-id-9 a.style-local-65-link {
  background-color: #ECE7DC !important;
  border-color: #ECE7DC !important;
  color: #7a7468 !important;
  cursor: default !important;
  pointer-events: none !important;
}
/* HERO "Pronto a creare…": titolo + sottotitolo BIANCHI (sfondo foto scura). */
body.page-id-9 .style-local-128-text,
body.page-id-9 .style-local-128-text *,
body.page-id-9 .style-local-129-text,
body.page-id-9 .style-local-129-text * {
  color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────
   PULSANTI WOOCOMMERCE (shop, prodotto, carrello, checkout) — stesso effetto
   hover "inverti colori" dei CTA: pieni blu → al passaggio del mouse fondo
   bianco e testo blu.
   ───────────────────────────────────────────────────────────── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce ul.products li.product a.add_to_cart_button,
.wc-block-components-button {
  background-color: #4A2E15 !important;
  color: #ffffff !important;
  border: 2px solid #4A2E15 !important;
  border-radius: 8px !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.wc-block-components-button .wc-block-components-button__text { color: inherit !important; }
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.wc-block-components-button:hover {
  background-color: #ffffff !important;
  color: #4A2E15 !important;
}

/* ─────────────────────────────────────────────────────────────
   LINK TESTUALI — cambio colore al passaggio del mouse (scritte con URL).
   ───────────────────────────────────────────────────────────── */
.wp-block-kubio-text a:hover,
.wp-block-kubio-heading a:hover,
.woocommerce-breadcrumb a:hover,
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title,
a.wc-block-components-product-name:hover,
.woocommerce-MyAccount-navigation a:hover,
.site-footer a:hover {
  color: #3E2816 !important;
  text-decoration: underline !important;
}

/* ─────────────────────────────────────────────────────────────
   HOME — sezione "Contatti" sulla foto del laboratorio: la foto era troppo
   visibile e il testo scuro illeggibile. Scurisco la foto con un overlay e
   rendo tutto il testo (e le icone) BIANCO. (styleRef uoKeJFIYr6 — selettore STABILE: non usare style-local-NN, e posizionale e si rompe se si aggiungono/tolgono blocchi)
   ───────────────────────────────────────────────────────────── */
body.page-id-9 #kubio .style-uoKeJFIYr6-outer {
  background-image:
    linear-gradient(rgba(14, 12, 10, .89), rgba(14, 12, 10, .89)),
    url("/wp-content/uploads/2026/07/contatti-laboratorio.jpg") !important;
}
body.page-id-9 .style-uoKeJFIYr6-inner,
body.page-id-9 .style-uoKeJFIYr6-inner * {
  color: #ffffff !important;
}
body.page-id-9 .style-uoKeJFIYr6-inner svg { stroke: #ffffff !important; }
body.page-id-9 .style-uoKeJFIYr6-inner a:hover { color: #e8dcc4 !important; }
/* Mappa (colonna destra): più grande e spostata leggermente a destra. */
body.page-id-9 .cmplz-placeholder-parent {
  width: 104% !important;
  max-width: none !important;
  padding-bottom: 92% !important;   /* più alta (era 82%) */
  transform: translateX(5%) !important;
}
@media (max-width: 782px) {
  /* su tablet/mobile la colonna va a 100%: niente sconfinamenti né shift */
  body.page-id-9 .cmplz-placeholder-parent {
    width: 100% !important;
    padding-bottom: 82% !important;
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   BLOG (/blog/) — anteprima a CARD: 4 per riga, immagine grande, titolo + data.
   ───────────────────────────────────────────────────────────── */
/* Via la sidebar (Search + Latest Comments) → contenuto a tutta larghezza */
.blog .wp-block-kubio-row__inner > .wp-block-kubio-column:has(.wp-block-kubio-sidebar) {
  display: none !important;
}
.blog .wp-block-kubio-row__inner > .wp-block-kubio-column:has(.wp-block-kubio-query-loop) {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}
/* Griglia 4 colonne (override del layout masonry) */
.blog .wp-block-kubio-query-loop__inner {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 26px !important;
  column-count: unset !important;
  height: auto !important;
}
/* Ogni item riempie la cella della griglia (niente più card strette) */
.blog .wp-block-kubio-query-loop-item,
.blog .wp-block-kubio-query-loop-item__container {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
/* Card */
.blog .wp-block-kubio-query-loop-item__container {
  background: #ffffff !important;
  border: 1px solid #E6DFD2 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: box-shadow .2s ease, transform .2s ease !important;
}
.blog .wp-block-kubio-query-loop-item__container:hover {
  box-shadow: 0 14px 32px rgba(31, 27, 22, .12) !important;
  transform: translateY(-3px) !important;
}
.blog .wp-block-kubio-query-loop-item__inner { padding: 0 !important; }
/* Immagine grande, a tutta larghezza della card, ritaglio uniforme 16:9 */
.blog .wp-block-kubio-post-featured-image {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}
.blog .wp-block-kubio-post-featured-image a,
.blog .wp-block-kubio-post-featured-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}
/* Via l'excerpt (niente testo) */
.blog .wp-block-kubio-post-excerpt { display: none !important; }
/* Meta: mostra SOLO la data (nasconde autore vuoto, ora e separatori) */
.blog .wp-block-kubio-post-meta {
  display: block !important;
  padding: 14px 18px 0 !important;
  margin: 0 !important;
}
.blog .wp-block-kubio-post-meta .metadata-separator,
.blog .wp-block-kubio-post-meta .metadata-item:first-child,
.blog .wp-block-kubio-post-meta .metadata-item:last-child {
  display: none !important;
}
.blog .wp-block-kubio-post-meta .metadata-item,
.blog .wp-block-kubio-post-meta .metadata-item a {
  font-size: 12.5px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: #9A8C77 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
/* Titolo dimensionato per la card */
.blog .wp-block-kubio-post-title { padding: 6px 18px 20px !important; margin: 0 !important; }
.blog .wp-block-kubio-post-title,
.blog .wp-block-kubio-post-title a {
  font-size: 19px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  color: #1F1B16 !important;
}
.blog .wp-block-kubio-post-title a:hover { color: #B58347 !important; }
/* Titolo in alto del blog, dedicato al telaio */
.blog .wp-block-kubio-query-loop::before {
  content: "Il mondo del telaio";
  display: block;
  font-family: inherit;
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 600;
  line-height: 1.1;
  color: #1F1B16;
  padding-bottom: 14px;
  margin: 0 0 30px;
  border-bottom: 4px solid #B58347;
  width: max-content;
  max-width: 100%;
}
@media (max-width: 1100px) {
  .blog .wp-block-kubio-query-loop__inner { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 800px) {
  .blog .wp-block-kubio-query-loop__inner { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px) {
  .blog .wp-block-kubio-query-loop__inner { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────────────────────────────
   SINGOLO ARTICOLO — layout pulito a tutta larghezza.
   Sidebar (Search/Ultimi commenti) e i box Categorie/Tag/Precedente-
   Successivo sono stati RIMOSSI dal template. Qui allargo la colonna
   del contenuto (prima 2/3, ora piena) così titolo, foto, testo e
   commenti usano tutta la larghezza del contenitore.
   ───────────────────────────────────────────────────────────── */
.single .wp-block-kubio-column:has(> .wp-block-kubio-column__inner .wp-block-kubio-post-featured-image) {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ─────────────────────────────────────────────────────────────
   FORM COMMENTI (articolo) — layout pulito, coerente con la palette.
   ───────────────────────────────────────────────────────────── */
.comment-form-author,
.comment-form-email,
.comment-form-comment { margin: 0 0 16px !important; }
.comment-form label {
  display: block !important;
  font-weight: 600 !important;
  color: #1F1B16 !important;
  margin: 0 0 6px !important;
  font-size: 14px !important;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100% !important;
  max-width: 520px !important;
  padding: 11px 13px !important;
  border: 1px solid #DDD5C6 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #1F1B16 !important;
  font-size: 15px !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}
.comment-form textarea { max-width: 100% !important; }
.comment-form input:focus,
.comment-form textarea:focus {
  outline: none !important;
  border-color: #B58347 !important;
  box-shadow: 0 0 0 3px rgba(181, 131, 71, .18) !important;
}
.comment-form .required { color: #B23B3B !important; }

/* ─────────────────────────────────────────────────────────────
   FORM CONTATTI ([ctg_contact_form]) — coerente con la palette.
   ───────────────────────────────────────────────────────────── */
.ctg-form-wrap {
  max-width: 680px;
  margin: 40px auto 0;
  text-align: left;
}
.ctg-form__title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  color: #1F1B16;
  margin: 0 0 6px;
  padding-bottom: 12px;
  border-bottom: 3px solid #B58347;
  width: max-content;
  max-width: 100%;
}
.ctg-form__intro { color: #6B6355; margin: 14px 0 22px; }
.ctg-form__row { display: flex; gap: 18px; }
.ctg-form__row .ctg-form__field { flex: 1 1 0; }
.ctg-form__field { margin: 0 0 16px; }
.ctg-form__field label {
  display: block;
  font-weight: 600;
  color: #1F1B16;
  margin: 0 0 6px;
  font-size: 14px;
}
.ctg-form .req { color: #B23B3B; }
.ctg-form input[type="text"],
.ctg-form input[type="email"],
.ctg-form input[type="tel"],
.ctg-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #DDD5C6;
  border-radius: 8px;
  background: #ffffff;
  color: #1F1B16;
  font-size: 15px;
  font-family: inherit;
  box-sizing: border-box;
}
.ctg-form textarea { resize: vertical; min-height: 130px; }
.ctg-form input:focus,
.ctg-form textarea:focus {
  outline: none;
  border-color: #B58347;
  box-shadow: 0 0 0 3px rgba(181, 131, 71, .18);
}
.ctg-form__privacy { margin: 6px 0 20px; }
.ctg-form__privacy label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #4A2E15;
  line-height: 1.5;
  cursor: pointer;
}
.ctg-form__privacy input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: #4A2E15;
  flex: 0 0 auto;
}
.ctg-form__privacy a { color: #4A2E15; text-decoration: underline; }
.ctg-form__privacy a:hover { color: #B58347; }
.ctg-form__submit { margin: 0; }
.ctg-form__submit button {
  display: inline-block;
  background: #4A2E15;
  color: #ffffff;
  border: 2px solid #4A2E15;
  border-radius: 8px;
  padding: 13px 30px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.ctg-form__submit button:hover { background: #ffffff; color: #4A2E15; }
.ctg-form__note { font-size: 13px; color: #6B6355; margin: 14px 0 0; }
.ctg-form__note .req { color: #B23B3B; }
/* Honeypot anti-spam: nascosto agli umani */
.ctg-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}
/* Esiti invio */
.ctg-form__ok,
.ctg-form__err {
  padding: 14px 16px;
  border-radius: 8px;
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.5;
}
.ctg-form__ok { background: #EDF5EA; border: 1px solid #BCD9B4; color: #2F5B27; }
.ctg-form__err { background: #FBEDED; border: 1px solid #E7C3C3; color: #9A2A2A; }
@media (max-width: 560px) {
  .ctg-form__row { flex-direction: column; gap: 0; }
}

/* ─────────────────────────────────────────────────────────────
   TESTATA pagina "Configuratore Telai Restauratori" (#162)
   Sfondo dedicato solo su questa pagina (le altre restano su hero3.jpg).
   L'header è #kubio .style-KFTMhA6WOVh-outer (background cover).
   ───────────────────────────────────────────────────────────── */
body.page-id-162 #kubio .style-KFTMhA6WOVh-outer {
  background-image: url("/wp-content/uploads/2026/07/sfondo-restauratori.jpg") !important;
  background-position: center center !important;
}

/* ─────────────────────────────────────────────────────────────
   COMPLIANZ — tab "Gestisci consenso" spostato in basso a SINISTRA.
   (Di default sta a destra e si sovrappone alla chat Siteleads +
   pulsante contatti, che stanno in basso a destra.)
   ───────────────────────────────────────────────────────────── */
#cmplz-manage-consent {
  left: 16px !important;
  right: auto !important;
}
#cmplz-manage-consent .cmplz-manage-consent,
.cmplz-manage-consent.manage-consent-1 {
  left: 16px !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ─────────────────────────────────────────────────────────────
   HOME — pulsante "Lascia una recensione" (sotto i box recensioni).
   ───────────────────────────────────────────────────────────── */
.ctg-review-cta-wrap {
  text-align: center;
  /* Il bottone ora è iniettato SUBITO dopo il divider, dentro la colonna del
     titolo: bastano pochi px di stacco. (Se serve più/meno spazio dal titolo,
     è questo il numero da toccare.) */
  margin: 22px auto 0;
}
.ctg-review-cta {
  display: inline-block;
  background: #4A2E15;
  color: #ffffff !important;
  border: 2px solid #4A2E15;
  padding: 14px 34px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none !important;
  transition: background .18s ease, color .18s ease;
}
.ctg-review-cta:hover {
  background: #ffffff;
  color: #4A2E15 !important;
}

/* ─────────────────────────────────────────────────────────────
   FOOTER — banner "Pagamenti sicuri" (sostituisce i vecchi badge testuali).
   Sta sotto le colonne, a tutta larghezza, così i loghi restano leggibili.
   ───────────────────────────────────────────────────────────── */
.ctg-pay-banner {
  margin: 26px auto 6px;
  text-align: center;
}
.ctg-pay-banner img {
  width: 100%;
  max-width: 760px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
}

/* ─────────────────────────────────────────────────────────────
   HOME — box "Scegli la tua area": area immagine uniforme.
   Le tre immagini hanno proporzioni native diverse (1.50 / 1.72 / 1.61);
   senza questo i box risultano sfalsati in altezza. Rapporto unico 16:10
   (≈ l'originale) con ritaglio centrato minimo.
   ───────────────────────────────────────────────────────────── */
img.wp-image-149,
img.wp-image-150,
img.wp-image-151 {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ─────────────────────────────────────────────────────────────
   CARRELLO/CHECKOUT A BLOCCHI — allineamento dei pallini (radio).
   WooCommerce posiziona il pallino in ASSOLUTO (left:16px; top:50%) dentro
   un'opzione con padding-left:48px. Se il padding/contesto viene alterato, il
   pallino finisce sopra il testo. Qui l'opzione diventa un layout FLEX: il
   pallino è un elemento affiancato e centrato verticalmente → sempre allineato.
   ───────────────────────────────────────────────────────────── */
.wc-block-components-radio-control__option {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px !important;
  position: relative !important;
}
/* NB: 'relative' (non 'static'): il pallino di selezione è un ::before in
   position:absolute con left/top 50% — deve ancorarsi all'INPUT (il cerchietto),
   altrimenti finisce al centro dell'intero box. */
.wc-block-components-radio-control .wc-block-components-radio-control__input,
.wc-block-components-radio-control__input {
  position: relative !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}
.wc-block-components-radio-control__option-layout {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
/* Etichetta e prezzo sulla stessa riga, ben distanziati */
.wc-block-components-radio-control__label-group,
.wc-block-components-radio-control__description-group {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
}
/* Loghi/icone del metodo di pagamento: allineati a destra, dimensione uniforme */
.wc-block-components-payment-method-icons {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.wc-block-components-payment-method-icons img {
  max-height: 24px !important;
  width: auto !important;
}

/* Ritiro in laboratorio: label su 3 righe (gli \n arrivano dal rate, vedi
   functions.php) e niente prezzo duplicato, perché è già nella terza riga. */
/* ─────────────────────────────────────────────────────────────
   "Due modi per ordinare" — ospite vs account ([ctg_account_benefits]).
   ───────────────────────────────────────────────────────────── */
.ctg-acc { max-width: 900px; margin: 0 auto 34px; }
.ctg-acc__title {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  color: #1F1B16;
  margin: 0 0 16px;
}
.ctg-acc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ctg-acc__card {
  border: 1px solid #E6DFD2;
  border-radius: 12px;
  padding: 20px 22px;
  background: #ffffff;
  position: relative;
}
.ctg-acc__card--best { border: 2px solid #B58347; background: #FBF8F3; }
.ctg-acc__badge {
  position: absolute;
  top: -11px; left: 22px;
  background: #4A2E15;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.ctg-acc__card h4 { margin: 4px 0 10px; font-size: 18px; font-weight: 600; color: #1F1B16; }
.ctg-acc__card p { margin: 0 0 10px; color: #4A4034; font-size: 15px; line-height: 1.6; }
.ctg-acc__card ul { margin: 0; padding-left: 20px; }
.ctg-acc__card li { margin: 0 0 7px; font-size: 15px; line-height: 1.55; color: #4A4034; }
.ctg-acc__note { margin: 16px 0 0; font-size: 14px; color: #6B6355; }
@media (max-width: 700px) {
  .ctg-acc__grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ─────────────────────────────────────────────────────────────
   CHECKOUT — "Effettua ordine" attivo solo con i Termini accettati.
   Fatto in CSS puro con :has(): nessuna manipolazione del DOM, quindi nessun
   rischio di rompere React (vedi lezione in ctg-checkout-labels.js).
   Se il browser non supportasse :has(), il pulsante resta semplicemente
   attivo e interviene la validazione di WooCommerce → nessun danno.
   NB: è un aiuto visivo; il blocco vero resta comunque lato server.
   ───────────────────────────────────────────────────────────── */
.wp-block-woocommerce-checkout:has( .wc-block-checkout__terms input[type="checkbox"]:not(:checked) ) .wc-block-components-checkout-place-order-button {
  opacity: .45 !important;
  pointer-events: none !important;
  filter: grayscale(35%) !important;
}
/* Il cursore "vietato" va sul contenitore: il pulsante non riceve più eventi */
.wp-block-woocommerce-checkout:has( .wc-block-checkout__terms input[type="checkbox"]:not(:checked) ) .wp-block-woocommerce-checkout-actions-block {
  cursor: not-allowed !important;
}
/* Casella termini più evidente, così si capisce cosa sblocca il pulsante */
.wc-block-checkout__terms input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  accent-color: #4A2E15 !important;
}

/* ─────────────────────────────────────────────────────────────
   MINI CARRELLO (tendina del carrello in alto) — allineato alla palette.
   È il blocco woocommerce/mini-cart: usa i colori predefiniti di WooCommerce
   (blu), non toccati dal rebrand marrone. Qui li portiamo in palette.
   Solo CSS: nessuna manipolazione del DOM, quindi sicuro per React.
   ───────────────────────────────────────────────────────────── */
/* Link generici dentro la tendina (nomi prodotto, ecc.) — non i pulsanti */
.wc-block-mini-cart__drawer a:not(.wc-block-components-button),
.wc-block-mini-cart__template-part a:not(.wc-block-components-button) {
  color: #4A2E15 !important;
}
.wc-block-mini-cart__drawer a:not(.wc-block-components-button):hover,
.wc-block-mini-cart__template-part a:not(.wc-block-components-button):hover {
  color: #B58347 !important;
}
/* "Vai al carrello": pulsante pieno marrone, hover invertito */
.wp-block-woocommerce-mini-cart-cart-button-block .wc-block-components-button,
.wc-block-mini-cart__footer-actions .wc-block-components-button:not(.wc-block-components-button--text) {
  background-color: #4A2E15 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 2px solid #4A2E15 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.wp-block-woocommerce-mini-cart-cart-button-block .wc-block-components-button:hover,
.wc-block-mini-cart__footer-actions .wc-block-components-button:not(.wc-block-components-button--text):hover {
  background-color: #ffffff !important;
  color: #4A2E15 !important;
}
/* "Procedi all'ordine": link testuale marrone, hover bronzo */
.wp-block-woocommerce-mini-cart-checkout-button-block .wc-block-components-button,
.wc-block-mini-cart__footer-actions .wc-block-components-button--text {
  background-color: transparent !important;
  background-image: none !important;
  color: #4A2E15 !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.wp-block-woocommerce-mini-cart-checkout-button-block .wc-block-components-button:hover,
.wc-block-mini-cart__footer-actions .wc-block-components-button--text:hover {
  color: #B58347 !important;
}
/* Carrello vuoto: pulsante "continua lo shopping" coerente */
.wc-block-mini-cart__shopping-button a,
.wc-block-mini-cart__empty-cart-wrapper .wc-block-components-button {
  background-color: #4A2E15 !important;
  color: #ffffff !important;
  border: 2px solid #4A2E15 !important;
  border-radius: 10px !important;
}
.wc-block-mini-cart__shopping-button a:hover,
.wc-block-mini-cart__empty-cart-wrapper .wc-block-components-button:hover {
  background-color: #ffffff !important;
  color: #4A2E15 !important;
}
/* Titolo e totale della tendina in ink del sito */
.wc-block-mini-cart__title,
.wc-block-mini-cart__footer-subtotal { color: #1F1B16 !important; }

/* ─────────────────────────────────────────────────────────────
   CHECKOUT — "Ritiro in laboratorio" su 3 righe.
   L'etichetta arriva dal server su UNA riga (WooCommerce appiattisce gli a capo)
   e NON si può spezzare riscrivendo il DOM: farlo rompe React
   ("removeChild", checkout in errore). Qui invece il testo originale viene
   nascosto e le tre righe sono disegnate da uno pseudo-elemento ::before, che
   non è un nodo del DOM → invisibile a React, quindi sicuro.
   La classe .ctg-ritiro è applicata da assets/ctg-checkout-labels.js.
   ───────────────────────────────────────────────────────────── */
.ctg-ritiro {
  font-size: 0 !important;
  line-height: 0 !important;
}
.ctg-ritiro::before {
  content: "Ritiro in laboratorio\A(Via Soriso, 72 – 00166 ROMA)\ANo spedizione";
  white-space: pre-line;
  display: block;
  font-size: 16px;
  line-height: 1.45;
  color: #1F1B16;
}

/* ─────────────────────────────────────────────────────────────
   CHECKOUT — scelta "Privato / Azienda" a due bottoni (sostituisce la tendina;
   il <select> resta nel DOM ma nascosto, è lui che WooCommerce salva).
   ───────────────────────────────────────────────────────────── */
.ctg-tipo { margin: 0 0 20px; }
.ctg-tipo__lab {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1F1B16;
  margin: 0 0 8px;
}
.ctg-tipo__row { display: flex; gap: 12px; flex-wrap: wrap; }
/* !important: il tema e WooCommerce colorano di marrone TUTTI i <button>,
   altrimenti entrambe le scelte sembrerebbero selezionate. */
.ctg-tipo .ctg-tipo__btn {
  flex: 1 1 180px;
  padding: 14px 18px !important;
  border: 2px solid #DDD5C6 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #4A2E15 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ctg-tipo .ctg-tipo__btn:hover { border-color: #B58347 !important; }
.ctg-tipo .ctg-tipo__btn.is-active {
  background: #4A2E15 !important;
  border-color: #4A2E15 !important;
  color: #ffffff !important;
}

/* OPZIONI DI SPEDIZIONE — niente pallino: c'è un solo metodo, quindi la scelta
   non esiste e il radio sarebbe solo rumore. Resta invece su PAGAMENTI e su
   RITIRO, dove l'alternativa c'è davvero.
   ⚠️ Se in futuro si aggiunge un secondo metodo di spedizione, RIMUOVERE questo
   blocco: senza pallino l'utente non capirebbe quale è selezionato. */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__input {
  display: none !important;
}
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option {
  padding-left: 16px !important;
}

/* Etichetta ritiro su più righe: gli a capo sono inseriti da
   assets/ctg-checkout-labels.js (WooCommerce appiattisce l'etichetta lato
   server, vedi functions.php). Qui solo un'interlinea leggibile. */
.wc-block-components-radio-control__label,
.wc-block-components-totals-item__label {
  line-height: 1.45 !important;
}

/* Icona per "Bonifico bancario" (WooCommerce non ne fornisce una) */
label[for="radio-control-wc-payment-method-options-bacs"] .wc-block-components-radio-control__label-group::after {
  content: "";
  flex: 0 0 auto;
  width: 30px;
  height: 22px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A2E15' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 3 8h18z'/%3E%3Cpath d='M5 10v7M9.5 10v7M14.5 10v7M19 10v7'/%3E%3Cpath d='M3 20h18'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .8;
}

/* ─────────────────────────────────────────────────────────────
   NEWSLETTER — riquadro bordato solo su campo+pulsante.
   Nel CSS del footer era il <form> stesso ad essere il riquadro (display:flex):
   ora che l'etichetta privacy sta DENTRO il form (deve esserci, altrimenti non
   viene inviata) il riquadro la inglobava, deformando tutto. Qui il form torna
   un contenitore normale e il riquadro passa alla sola riga campo+pulsante.
   ───────────────────────────────────────────────────────────── */
.ctg-news form {
  display: block !important;
  border: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.ctg-news .ctg-news-row {
  display: flex;
  align-items: stretch;
  border: 1px solid #cfc7b6;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}
/* Campo e pulsante con la STESSA altezza esatta: altrimenti il pulsante (più
   alto) allarga la riga e sotto al campo resta una striscia bianca, che fa
   sembrare il testo spostato in alto. Altezza fissa + box-sizing = nessun gap. */
.ctg-news .ctg-news-row input[type="email"],
.ctg-news .ctg-news-row button {
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  box-sizing: border-box !important;
  align-self: center !important;
}
.ctg-news .ctg-news-row input[type="email"] {
  padding: 0 14px !important;
  margin: 0 !important;
  line-height: normal !important;
  background: transparent !important;
}
.ctg-news .ctg-news-row button {
  justify-content: center !important;
  margin: 0 !important;
}
/* Riempimento automatico del browser: toglie lo sfondo azzurro, che tagliava
   otticamente il campo. */
.ctg-news .ctg-news-row input[type="email"]:-webkit-autofill,
.ctg-news .ctg-news-row input[type="email"]:-webkit-autofill:hover,
.ctg-news .ctg-news-row input[type="email"]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 60px #ffffff inset !important;
  box-shadow: 0 0 0 60px #ffffff inset !important;
  -webkit-text-fill-color: #1F1B16 !important;
}
/* Pulsante disattivato finché non si accetta la privacy (oltre al blocco
   nativo del browser e a quello lato server). Solo CSS: nessun JS. */
.ctg-news form:has( input[name="ctg_privacy"]:not(:checked) ) button[type="submit"] {
  opacity: .4 !important;
  pointer-events: none !important;
  filter: grayscale(40%) !important;
}
.ctg-news form:has( input[name="ctg_privacy"]:not(:checked) ) .ctg-news-row {
  cursor: not-allowed;
}
.ctg-news form label {
  align-items: flex-start;
  width: 100%;
}
.ctg-news form label input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: #4A2E15;
}

/* ─────────────────────────────────────────────────────────────
   NEWSLETTER — campo anti-spam nascosto + messaggio di esito.
   ───────────────────────────────────────────────────────────── */
.ctg-news-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}
.ctg-news-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 99999;
  max-width: min(560px, calc(100vw - 32px));
  background: #4A2E15;
  color: #ffffff;
  padding: 14px 22px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 10px 30px rgba(31, 27, 22, .3);
  animation: ctgToastIn .25s ease-out;
}
@keyframes ctgToastIn {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ─────────────────────────────────────────────────────────────
   TESTATA MARRONE PIENA (.ctg-hero-plain) — pagine senza immagine dedicata.
   Il tema sovrappone al banner un velo scuro (#11121a al 60%): qui lo
   azzeriamo, altrimenti il marrone risulterebbe quasi nero. Titolo bianco.
   ───────────────────────────────────────────────────────────── */
.ctg-hero-plain .overlay-layer,
.ctg-hero-plain .overlay-image-layer {
  opacity: 0 !important;
  background: none !important;
}
.ctg-hero-plain .wp-block-kubio-page-title,
.ctg-hero-plain .wp-block-kubio-page-title *,
.ctg-hero-plain h1 {
  color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────
   HOME — foto dello staff ("Le mani dietro i telai") a 200×200, QUADRATE 1:1.
   ATTENZIONE: il tema pone max-width:120px in DUE punti — sull'immagine e sul
   suo contenitore (frameContainer). Vanno alzati ENTRAMBI: se si alza solo
   quello dell'immagine, la larghezza resta bloccata dal contenitore mentre
   l'altezza cresce, e le foto vengono rettangolari (stirate).
   Sorgenti 600×600 quadrate → a 200px restano nitide anche su retina.
   ───────────────────────────────────────────────────────────── */
#kubio .style-IJxCdpzIa-frameContainer {
  max-width: 200px !important;
}
#kubio .style-IJxCdpzIa-image {
  width: 200px !important;
  height: 200px !important;
  max-width: 200px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

/* ─────────────────────────────────────────────────────────────
   HOME — sezione "Chi siamo": la foto deve essere GRANDE, all'incirca quanto
   il blocco di testo a sinistra. La sua colonna è al 60%, quella del testo al
   40%: ~67% della propria colonna ≈ la larghezza del testo.
   Come per le foto staff, vanno allargati SIA l'immagine SIA i contenitori:
   agendo solo sull'immagine, il contenitore la ricomprimerebbe.
   Selettore verificato: styleRef qliv0cbsL presente 1 sola volta nel DOM.
   ───────────────────────────────────────────────────────────── */
body.page-id-9 #kubio .style-qliv0cbsL-outer,
body.page-id-9 #kubio .style-qliv0cbsL-captionContainer {
  width: 100% !important;
  max-width: 100% !important;
}
body.page-id-9 #kubio .style-qliv0cbsL-frameContainer {
  width: 67% !important;
  max-width: 100% !important;
}
body.page-id-9 #kubio .style-qliv0cbsL-image {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}
/* Su mobile le colonne si impilano: la foto usa tutta la larghezza. */
@media (max-width: 767px) {
  body.page-id-9 #kubio .style-qliv0cbsL-frameContainer { width: 100% !important; }
}

/* ─────────────────────────────────────────────────────────────
   SEO Blocco 2 — sezioni di contenuto (.ctg-seo-block) sotto configuratori,
   negozio e categorie. Testo VISIBILE (non nascosto), leggibile, palette.
   ───────────────────────────────────────────────────────────── */
.ctg-seo-block {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
  color: #3E2E22;
  font-size: 16px;
  line-height: 1.7;
}
.ctg-seo-block h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  color: #1F1B16;
  margin: 34px 0 14px;
}
.ctg-seo-block h2:first-child { margin-top: 0; }
.ctg-seo-block p { margin: 0 0 14px; }
.ctg-seo-block a { color: #4A2E15; text-decoration: underline; }
.ctg-seo-block a:hover { color: #B58347; }
.ctg-seo-block strong { color: #2A2018; }
/* FAQ a fisarmonica (native <details>): niente JS, accessibile, indicizzabile */
.ctg-seo-block details {
  border: 1px solid #E6DFD2;
  border-radius: 10px;
  padding: 0 18px;
  margin: 0 0 12px;
  background: #fff;
}
.ctg-seo-block details[open] { background: #FBF8F2; }
.ctg-seo-block summary {
  cursor: pointer;
  font-weight: 600;
  color: #1F1B16;
  padding: 15px 0;
  list-style: none;
  display: block; /* rimuove il triangolo predefinito del <summary> (era list-item) su tutti i browser; resta solo il +/- a destra */
  position: relative;
  padding-right: 28px;
}
.ctg-seo-block summary::-webkit-details-marker { display: none; }
.ctg-seo-block summary::marker { display: none; content: ""; }
.ctg-seo-block summary::after {
  content: "+";
  position: absolute;
  right: 2px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px; font-weight: 400; color: #B58347;
}
.ctg-seo-block details[open] summary::after { content: "−"; }
.ctg-seo-block details p { margin: 0 0 15px; }

/* ─────────────────────────────────────────────────────────────
   BLOG — titoli DENTRO il testo del post uniformi e contenuti,
   stessa dimensione del blocco .ctg-seo-block (no titoli giganti).
   Scopo stretto: post singoli (body.single-post) + pagina Chi siamo
   (body.page-id-86) + sezione Servizi (hub page-id-195 e le figlie
   parent-pageid-195), non altre pagine/archivi.
   Non tocca il titolo H1 (fuori da .entry-content).
   ───────────────────────────────────────────────────────────── */
body.single-post .entry-content h2,
body.single-post .wp-block-post-content h2,
body.page-id-86 .entry-content h2,
body.page-id-86 .wp-block-post-content h2,
body.page-id-195 .entry-content h2,
body.parent-pageid-195 .entry-content h2 {
  font-size: clamp(22px, 2.6vw, 30px) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 34px 0 14px !important;
}
body.single-post .entry-content h3,
body.single-post .wp-block-post-content h3,
body.page-id-86 .entry-content h3,
body.page-id-86 .wp-block-post-content h3,
body.page-id-195 .entry-content h3,
body.parent-pageid-195 .entry-content h3 {
  font-size: clamp(19px, 2.1vw, 23px) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  margin: 28px 0 12px !important;
}

/* ─────────────────────────────────────────────────────────────
   Sezione staff home "Le mani dietro i telai": il soprannome va
   su una SECONDA riga, in MAIUSCOLO e nel colore accento (oro/legno).
   Classe dedicata usata solo lì → nessun impatto altrove.
   ───────────────────────────────────────────────────────────── */
.ctg-nick {
  display: block;
  text-transform: uppercase;
  color: #B58347;
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: 0.07em;
  margin-top: 7px;
  line-height: 1.2;
}

/* Evidenziazione "Cantagalli" nel titolo hero (oro della palette). */
.ctg-brand-hl { color: #E0C080 !important; }

/* ─────────────────────────────────────────────────────────────
   Home (#9) — pulsante "Scopri di più" della sezione Chi siamo:
   da link tenue a BOTTONE PIENO marrone scuro con testo bianco.
   ATTENZIONE: lo styleRef Dud6AOZG0Hca è CONDIVISO da 4 pulsanti della home
   ("Scopri di più", "Configura ora", "In arrivo", "Configura il tuo telaio").
   Per colpire SOLO questo si aggiunge [href="/chi-siamo"] — gli altri 3
   devono restare com'erano.
   ───────────────────────────────────────────────────────────── */
body.page-id-9 a.wp-block-kubio-button__link.style-Dud6AOZG0Hca-link[href="/chi-siamo"] {
  background-color: #4A2E15 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}
body.page-id-9 a.wp-block-kubio-button__link.style-Dud6AOZG0Hca-link[href="/chi-siamo"]:hover {
  background-color: #6B4423 !important;
  color: #ffffff !important;
}
body.page-id-9 a.wp-block-kubio-button__link.style-Dud6AOZG0Hca-link[href="/chi-siamo"] svg,
body.page-id-9 a.wp-block-kubio-button__link.style-Dud6AOZG0Hca-link[href="/chi-siamo"] i {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* NB: NON sovrascrivere object-fit/height dell'immagine in evidenza dei post.
   Il contenitore ha altezza fissa: con height:auto l'immagine esce dal box e
   finisce sopra il testo. Il ritaglio (cover) del tema è voluto e va lasciato,
   così tutti i post del blog hanno la foto nella stessa identica posizione. */

/* ─────────────────────────────────────────────────────────────
   SERVIZI — pulsante "Per info e preventivi scrivici" a fine pagina.
   Classi usate SOLO nelle pagine servizio → nessun impatto altrove.
   ───────────────────────────────────────────────────────────── */
.ctg-cta-wrap {
  text-align: center;
  margin: 40px 0 12px;
}
.ctg-btn-preventivo {
  display: inline-block;
  background: #4A2E15;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 16px 34px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.3;
  transition: background .2s ease;
}
.ctg-btn-preventivo:hover {
  background: #6B4423;
  color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────
   MENU MOBILE — le tre stecche devono vedersi SEMPRE.
   Il tema le colorava di bianco (pensate sopra la testata scura):
   su fondo chiaro sparivano. Qui il colore è forzato al marrone
   della palette in ogni stato (normale, scroll, testata chiara).
   `.kubio-offscreen-icon-wrapper` è il pulsante che APRE il menu:
   verificato presente UNA sola volta per pagina, su tutte le pagine,
   e non esiste alcuna icona di chiusura con questa classe.
   NB: non si tocca display/opacity, altrimenti l'hamburger comparirebbe
   anche da desktop, dove il tema mostra giustamente il menu esteso.
   ───────────────────────────────────────────────────────────── */
.kubio-offscreen-icon-wrapper,
.kubio-offscreen-icon-wrapper .wp-block-kubio-menu-offscreen__icon,
.kubio-offscreen-icon-wrapper .h-svg-icon,
.kubio-offscreen-icon-wrapper svg,
.kubio-offscreen-icon-wrapper svg path {
  color: #4A2E15 !important;
  fill: #4A2E15 !important;
}

/* ─────────────────────────────────────────────────────────────
   SERVIZI — contenuto a PIENA LARGHEZZA e allineato a SINISTRA.
   La sezione è "boxed" e il post-content ha styleRef vuoto: WordPress
   stringe/centra i paragrafi mentre i titoli restano larghi (da cui il
   disallineamento) e la griglia eredita la larghezza stretta (solo 2 card).
   Forziamo tutti i figli diretti a piena larghezza, a sinistra → testo
   coerente + 4 card per riga. Il pulsante CTA resta centrato (regola propria).
   ───────────────────────────────────────────────────────────── */
#kubio body.page-id-195 .entry-content,
#kubio body.parent-pageid-195 .entry-content,
#kubio body.page-id-195 .entry-content > *,
#kubio body.parent-pageid-195 .entry-content > *,
#kubio body.page-id-86 .entry-content,
#kubio body.page-id-86 .entry-content > * {
  max-width: 100% !important;
  width: 100% !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   SERVIZI — griglia di card in stile "indice blog" nella pagina hub.
   Foto in alto + SOLO titolo (come le card del blog). 4 per riga → 2 → 1.
   Classi dedicate → usate solo nella pagina /servizi/.
   ───────────────────────────────────────────────────────────── */
#kubio body.page-id-195 .ctg-servizi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
  margin: 26px 0 42px !important;
  width: 100% !important;
}
#kubio body.page-id-195 .ctg-servizi-grid > .ctg-servizi-card {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}
/* wpautop può inserire <br> tra le card: nel grid occuperebbero una cella
   e ridurrebbero le colonne visibili. Li togliamo dal flusso. */
#kubio body.page-id-195 .ctg-servizi-grid > br { display: none !important; }
/* 8ª card segnaposto (senza foto), in attesa del servizio da definire */
.ctg-servizi-placeholder { cursor: default; }
.ctg-servizi-thumb--empty {
  background: repeating-linear-gradient(45deg, #f3efe7, #f3efe7 14px, #ece7dc 14px, #ece7dc 28px);
}
.ctg-servizi-placeholder .ctg-servizi-title { color: #B3A793; }
.ctg-servizi-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ECE6DA;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  transition: box-shadow .2s ease, transform .2s ease;
}
.ctg-servizi-card:hover {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .10);
  transform: translateY(-3px);
}
.ctg-servizi-thumb {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #f2eee6;
}
.ctg-servizi-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ctg-servizi-body { display: block; padding: 16px 18px 18px; }
.ctg-servizi-title {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #4A2E15;
  line-height: 1.3;
  margin: 0;
}
.ctg-servizi-card:hover .ctg-servizi-title { color: #B58347; }
@media (max-width: 782px) {
  #kubio body.page-id-195 .ctg-servizi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
}
@media (max-width: 480px) {
  #kubio body.page-id-195 .ctg-servizi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Home — foto del box "Configuratore Artisti" cliccabile (link al configuratore).
   Nessun effetto hover: la foto resta statica, cambia solo il cursore. */
.ctg-img-link { display: block; }

/* ─────────────────────────────────────────────────────────────
   Le tue personalizzazioni CSS vanno qui sotto.
   ───────────────────────────────────────────────────────────── */

/* Negozio: il titolo "Negozio" usa le classi native del page-title Kubio
   (font/peso/size responsive identici agli altri banner) ed è centrato via JS
   (vedi functions.php). Nessun override CSS necessario. */

/* ─────────────────────────────────────────────────────────────
   ALTEZZA UNIFORME dei banner/testata delle pagine INTERNE = 330px.
   L'hero ha height:auto (cresce col titolo: 1 vs 2 righe) → altezze diverse.
   min-height 330 le uniforma; l'hero è d-flex align-items-center, quindi il
   titolo resta centrato nella nuova altezza. La HOME (.home) ha il suo hero
   dedicato più grande → esclusa (e comunque min-height non la rimpicciolisce).
   ───────────────────────────────────────────────────────────── */
#kubio body:not(.home) .wp-block-kubio-hero__outer { min-height: 330px !important; }
/* Il Negozio (archivio) ha una struttura hero diversa: la min-height sull'outer
   non basta → la applico anche all'inner per uniformare l'altezza a 330. */
#kubio.woocommerce-shop .wp-block-kubio-hero__inner { min-height: 235px !important; }

/* ─────────────────────────────────────────────────────────────
   HOME (#9) — box "Configuratore Telai per Restauratori": pulsante
   "Configura ora" ATTIVO in oro, identico a quello del box Artisti.
   Scopo STRETTO via href (stabile, immune allo shift di style-local):
   colpisce SOLO il bottone che linka a /configuratore-restauratori/.
   Stessa geometria/colori dei CTA pieni (oro #E0C080 → hover marrone).
   ───────────────────────────────────────────────────────────── */
body.page-id-9 a.wp-block-kubio-button__link[href="/configuratore-restauratori/"] {
  display: inline-block !important;
  width: auto !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  padding: 14px 30px !important;
  border: 2px solid #4A2E15 !important;
  border-radius: 10px !important;
  background-color: #E0C080 !important;
  color: #4A2E15 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: background-color .15s ease, color .15s ease !important;
}
body.page-id-9 a.wp-block-kubio-button__link[href="/configuratore-restauratori/"]:hover {
  background-color: #4A2E15 !important;
  color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────
   HOME (#9) — riga "Scegli la tua area" (3 box): bottoni CTA allineati
   in BASSO in tutte le colonne, a prescindere dalla lunghezza del testo.
   Scopo stretto: solo quella riga (styleRef _pD0jMCZe, univoca).
   La colonna interna è già flex-column → il buttongroup va a fine colonna.
   ───────────────────────────────────────────────────────────── */
body.page-id-9 .style-_pD0jMCZe-inner .wp-block-kubio-column__container {
  display: flex !important;
  flex-direction: column !important;
}
body.page-id-9 .style-_pD0jMCZe-inner .wp-block-kubio-column__inner {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
body.page-id-9 .style-_pD0jMCZe-inner .wp-block-kubio-buttongroup__outer {
  margin-top: auto !important;
}
/* Rinforzo deterministico: quando i 3 box sono affiancati (>=768px), equalizzo
   l'altezza delle DESCRIZIONI (~3 righe) così i pulsanti partono tutti dalla
   stessa quota anche se il tema non "allunga" l'inner col flex. */
@media (min-width: 768px) {
  body.page-id-9 .style-_pD0jMCZe-inner .wp-block-kubio-text__text {
    min-height: 5.2em !important;
  }
}