/*
Theme Name: Comelstile Landing
Theme URI: https://comelstile.it
Description: Child theme di Hello Elementor con il design system Comelstile: token in :root, layout interamente in flexbox, header e footer come componenti unici.
Author: Comelstile
Template: hello-elementor
Version: 1.12.1
Text Domain: comelstile-landing
*/

/* ==========================================================================
   1. DESIGN TOKENS — ogni colore, font, dimensione e spaziatura vive qui.
      Nel resto del foglio si usano esclusivamente var().
   ========================================================================== */
:root{
  /* --- colori --- */
  --color-ink:#282828;
  --color-ink-soft:#535353;
  --color-ink-muted:#8a8a8a;
  --color-surface:#ffffff;
  --color-surface-alt:#f6f2ef;
  --color-sand:#e6ddd6;
  --color-success:#006751;
  --color-danger:#971400;
  --color-on-dark:#ffffff;
  --color-on-dark-soft:rgba(255,255,255,.82);
  --color-on-dark-muted:rgba(255,255,255,.62);
  --color-line:rgba(40,40,40,.18);
  --color-line-soft:rgba(40,40,40,.09);
  --color-line-on-dark:rgba(255,255,255,.22);
  --color-line-on-dark-strong:rgba(255,255,255,.28);
  --color-header-bg:rgba(255,255,255,.94);
  --color-overlay-strong:rgba(18,18,18,.94);
  --color-overlay-mid:rgba(18,18,18,.82);
  --color-overlay-soft:rgba(18,18,18,.45);
  --color-overlay-faint:rgba(18,18,18,.30);
  --color-overlay-flat:rgba(18,18,18,.42);
  --color-highlight:#fff5cc;
  --color-highlight-line:#b38f00;

  /* --- tipografia --- */
  --font-base:"Jost","Helvetica Neue","Arial",sans-serif;
  --font-accent:"Cormorant","Georgia","Times New Roman",serif;

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;

  --text-xs:0.70rem;
  /* occhiello forzato su una riga: sotto i ~440px rimpicciolisce quel tanto
     che basta per non mandare la riga a capo ne far sbordare la pagina */
  --text-xs-single-line:min(0.70rem,2.55vw);
  --space-button-inline:2.25rem;
  /* riga singola: le misure seguono la larghezza della COLONNA (cqw), non
     quella della finestra. A 768px la colonna dello split e' 330px mentre il
     viewport resta largo: con i vw il bottone sporgeva dalla colonna. */
  --text-sm-single-line:min(0.76rem,2.85cqw);
  --space-button-inline-fluid:min(2.25rem,4cqw);
  --text-sm:0.76rem;
  --text-body:clamp(15px,.55vw + 13.5px,17px);
  --text-base:0.97rem;
  --text-md:1.05rem;
  --text-lg:clamp(1.02rem,0.4vw + 0.95rem,1.22rem);
  --text-quote:clamp(1.6rem,3.4vw,2.9rem);

  --heading-xl:clamp(2rem,calc(0.404126rem + 4.142395vw),4.75rem);
  --heading-lg:clamp(1.625rem,calc(0.859223rem + 2.200647vw),3.25rem);
  --heading-md:clamp(1.375rem,calc(1.192961rem + 0.776699vw),2.125rem);
  --heading-sm:clamp(1.125rem,calc(1.05rem + 0.35vw),1.5rem);
  /* titolo forzato su una riga: il corpo non supera mai la larghezza
     della colonna (cqw), cosi' resta intero senza sbordare */
  --heading-lg-single-line:min(clamp(1.625rem,calc(0.859223rem + 2.200647vw),3.25rem),6.8cqw);

  --leading-tight:1.06;
  --leading-heading:1.14;
  --leading-snug:1.5;
  --leading-body:1.65;

  --tracking-heading:0.01em;
  --tracking-label:0.14em;
  --tracking-kicker:0.20em;
  --tracking-wide:0.18em;

  /* --- spaziature --- */
  --space-3xs:0.25rem;
  --space-2xs:0.45rem;
  --space-xs:0.7rem;
  --space-sm:1rem;
  --space-md:1.4rem;
  --space-lg:2rem;
  --space-xl:2.6rem;
  --space-2xl:clamp(1.5rem,3vw,2.6rem);
  --space-3xl:clamp(1.75rem,4vw,3rem);
  --space-4xl:clamp(1.75rem,5vw,4rem);

  --gap-grid:clamp(1.75rem,4vw,4rem);
  --gap-cards:clamp(1.5rem,3vw,2.5rem);
  --gap-carousel:clamp(1rem,2.2vw,2rem);
  --gap-inline:1rem;

  --section-y:clamp(3.5rem,8vw,7.5rem);
  --section-y-tight:clamp(2.5rem,5vw,4.5rem);
  --page-gutter:clamp(1.25rem,5vw,4rem);

  /* --- misure --- */
  --page-max:1280px;
  --form-max:780px;
  --measure:66ch;
  --measure-narrow:56ch;
  --measure-tight:40ch;
  /* la colonna dell'hero e' dimensionata sul corpo massimo del titolo (4,75rem):
     "il controllo della" misura 762px, quindi 50rem garantisce che
     "vista GRATUITO" resti sempre su una riga propria e "della" non resti sola */
  --hero-col-max:50rem;
  --hero-list-max:34rem;
  --header-min-h:72px;
  --logo-w:clamp(148px,18vw,196px);
  --logo-w-footer:190px;
  --brand-logo-h:34px;
  --media-portrait-max:420px;
  --control-size:44px;
  --icon-size:16px;
  --social-size:38px;
  --check-size:9px;
  --dash-w:10px;
  --hairline:1px;
  --bullet-gap:1.9rem;

  /* --- forme --- */
  --radius-sm:3px;
  --radius-pill:2000px;

  /* --- carosello --- */
  --slides-per-view:2.25;
  --slide-basis-mobile:clamp(240px,78vw,300px);

  /* --- movimento --- */
  --ease:cubic-bezier(.25,.1,.25,1);
  --duration:.5s;
  --duration-fast:.15s;

  /* --- livelli --- */
  --layer-header:50;
}

/* Mobile: si ingrandiscono solo i corpi di testo.
   I token dei titoli (--heading-*) non compaiono qui apposta: restano quelli
   fluidi definiti sopra, cosi' le gerarchie tipografiche non cambiano. */
@media (max-width:640px){
  :root{
    /* header opaco: su mobile il blur dietro un elemento sticky viene
       ricalcolato a ogni frame di scroll ed e' la causa piu' comune
       dello scorrimento che "traballa" */
    --color-header-bg:#ffffff;
    --text-body:1.0625rem;
    --text-base:1.0625rem;
    --text-md:1.15rem;
    --text-lg:1.15rem;
  }
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--color-surface);
  color:var(--color-ink);
  font-family:var(--font-base);
  font-size:var(--text-body);
  font-weight:var(--weight-regular);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
}

img,video{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,h4,h5{
  font-weight:var(--weight-regular);
  letter-spacing:var(--tracking-heading);
  line-height:var(--leading-heading);
  margin:0 0 var(--space-sm);
}
h1{font-size:var(--heading-xl);text-transform:uppercase;line-height:var(--leading-tight)}
h2{font-size:var(--heading-lg);text-transform:uppercase}
h3{font-size:var(--heading-md);text-transform:uppercase}
h4{font-size:var(--heading-sm);text-transform:uppercase;letter-spacing:var(--tracking-label);font-weight:var(--weight-medium)}
p{margin:0 0 var(--space-md);max-width:var(--measure)}

:focus-visible{outline:2px solid var(--color-ink);outline-offset:3px}

/* skip link: resta nel flusso, si apre solo al focus (niente posizionamento assoluto) */
.skip-link{
  display:block;width:0;height:0;padding:0;overflow:hidden;
  background:var(--color-surface);color:var(--color-ink);
  font-size:var(--text-sm);letter-spacing:var(--tracking-label);text-transform:uppercase;
}
.skip-link:focus{width:auto;height:auto;padding:var(--space-xs) var(--space-md)}

/* ==========================================================================
   3. LAYOUT — solo flexbox
   ========================================================================== */
.page-wrap{max-width:var(--page-max);margin-inline:auto;padding-inline:var(--page-gutter);width:100%}

.section{padding-block:var(--section-y)}
.section-tight{padding-block:var(--section-y-tight)}
.section-alt{background:var(--color-surface-alt)}
.section-dark{background:var(--color-ink);color:var(--color-on-dark)}
.section-dark p{color:var(--color-on-dark-soft)}

/* flex-direction dichiarata: i container Elementor impongono column per default */
.split{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--gap-grid);align-items:center}
/* due classi: pareggia .e-con.e-flex del builder, che ha specificita' 0-2-0 */
.split > .split-col{flex:1 1 320px;min-width:0;width:auto}
.split-reverse{flex-direction:row-reverse;flex-wrap:wrap}
.split-top{align-items:flex-start}

/* contenitore di misura: i titoli e i bottoni a riga singola si adattano
   alla larghezza di questa colonna, non a quella della finestra */
.stack{display:flex;flex-direction:column;gap:var(--space-md);align-items:flex-start;container-type:inline-size}
.stack-center{align-items:center;text-align:center}

/* ==========================================================================
   4. TIPOGRAFIA DI COMPONENTE
   ========================================================================== */
.kicker{
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-kicker);
  text-transform:uppercase;
  font-weight:var(--weight-medium);
  color:var(--color-ink-soft);
  margin:0 0 var(--space-sm);
}
.section-dark .kicker,.hero .kicker{color:var(--color-on-dark-muted)}
.kicker-single-line{white-space:nowrap;max-width:none;font-size:var(--text-xs-single-line)}

.lede{font-size:var(--text-lg);color:var(--color-ink-soft);line-height:var(--leading-snug)}
.section-dark .lede{color:var(--color-on-dark-soft)}

.quote{
  font-family:var(--font-accent);
  font-style:italic;
  font-weight:var(--weight-regular);
  text-transform:none;
  letter-spacing:0;
  font-size:var(--text-quote);
  line-height:var(--leading-snug);
}
.note{
  font-family:var(--font-accent);
  font-style:italic;
  font-size:var(--text-md);
  color:var(--color-ink-soft);
  max-width:var(--measure-narrow);
}
.section-dark .note{color:var(--color-on-dark-muted)}

/* allineamento centrato: unica classe, valida per titoli, occhielli e testi.
   margin-inline centra anche la scatola, altrimenti un paragrafo con
   larghezza di lettura limitata resterebbe ancorato a sinistra */
.align-center{text-align:center;margin-inline:auto}

.heading-single-line .elementor-heading-title{
  white-space:nowrap;
  font-size:var(--heading-lg-single-line);
}

.measure-narrow{max-width:var(--measure-narrow)}

/* testo giustificato solo da desktop: sulle colonne strette della versione
   mobile la giustificazione aprirebbe spazi troppo larghi fra le parole */
@media (min-width:1020px){
  .text-justify-desktop{text-align:justify;hyphens:auto}
}
.measure-tight{max-width:var(--measure-tight)}

.field-placeholder{
  background:var(--color-highlight);
  padding-inline:var(--space-3xs);
  border-bottom:var(--hairline) dashed var(--color-highlight-line);
}

/* ==========================================================================
   5. BOTTONI E LINK
   ========================================================================== */
.button-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);
  background:var(--color-ink);color:var(--color-on-dark);
  border:var(--hairline) solid var(--color-ink);border-radius:var(--radius-sm);
  font-family:var(--font-base);font-size:var(--text-sm);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;text-decoration:none;
  padding:1.15rem var(--space-button-inline);cursor:pointer;
  transition:background var(--duration) var(--ease),border-color var(--duration) var(--ease),color var(--duration) var(--ease);
}
.button-primary:hover{background:var(--color-ink-soft);border-color:var(--color-ink-soft);color:var(--color-on-dark)}

.button-light{background:var(--color-surface);color:var(--color-ink);border-color:var(--color-surface)}
.button-light:hover{background:var(--color-sand);border-color:var(--color-sand);color:var(--color-ink)}

.button-ghost{background:transparent;color:inherit;border-color:currentColor}
.button-ghost:hover{background:var(--color-ink);color:var(--color-on-dark);border-color:var(--color-ink)}
.section-dark .button-ghost:hover,.site-footer .button-ghost:hover{background:var(--color-surface);color:var(--color-ink);border-color:var(--color-surface)}

.button-compact{padding:var(--space-xs) var(--space-md);font-size:var(--text-xs)}

/* variante su una riga sola: corpo ed estremita' si adattano perche'
   l'etichetta non vada a capo ne faccia sbordare la colonna */
.button-holder{container-type:inline-size;margin:0}
.button-nowrap{
  white-space:nowrap;
  font-size:var(--text-sm-single-line);
  padding-inline:var(--space-button-inline-fluid);
  max-width:100%;
}

/* bottone a piena larghezza della colonna, etichetta centrata su una riga */
.button-block{display:flex;width:100%}

.link-arrow{
  display:inline-flex;align-items:center;gap:var(--space-2xs);
  text-decoration:none;font-size:var(--text-sm);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  border-bottom:var(--hairline) solid currentColor;padding-bottom:var(--space-3xs);
  transition:opacity var(--duration) var(--ease);
}
.link-arrow:hover{opacity:.6}
.link-arrow-mark{line-height:1}

/* ==========================================================================
   6. HEADER (componente unico, unica eccezione sticky)
   ========================================================================== */
.site-header{
  width:100%;max-width:none;
  position:sticky;top:0;z-index:var(--layer-header);
  background:var(--color-header-bg);
  backdrop-filter:saturate(1.6) blur(8px);
  border-bottom:var(--hairline) solid var(--color-line-soft);
}
@media (max-width:640px){
  .site-header{backdrop-filter:none}
}

/* Hello Elementor ingabbia il main con
   body:not([class*="elementor-page-"]) .site-main  (specificita' 0-2-1),
   quindi le pagine non costruite in Elementor (privacy, cookie policy)
   restavano larghe 1140px e disallineate dal logo. Il template full width
   deve valere per tutte: stessa specificita', dichiarata dopo. */
body.page-template-template-full-width .site-main{
  max-width:none;width:100%;margin-inline:0;
}

.site-header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
  min-height:var(--header-min-h);padding-block:var(--space-xs);
}
.site-logo{display:flex;align-items:center}
.site-logo img{width:var(--logo-w);height:auto}

/* ==========================================================================
   7. HERO — overlay via background-image, nessun posizionamento assoluto
   ========================================================================== */
.hero{
  background-color:var(--color-ink);
  background-position:center 30%;
  background-size:cover;
  background-repeat:no-repeat;
  background-blend-mode:normal;
  color:var(--color-on-dark);
}
.hero-inner{
  display:flex;width:100%;
  padding-block:clamp(4rem,10vw,8.25rem);
  background-image:linear-gradient(105deg,var(--color-overlay-strong) 0%,var(--color-overlay-mid) 42%,var(--color-overlay-soft) 72%,var(--color-overlay-faint) 100%);
}
.hero-content{display:flex;flex-direction:column;align-items:flex-start;max-width:var(--hero-col-max);width:100%}
.hero-title{margin-bottom:var(--space-lg)}
/* elemento distinto con la sua classe, ma in linea: prosegue sulla stessa
   riga del titolo invece di andare a capo */
.hero-title-accent{
  display:inline;
  font-weight:var(--weight-medium);
  white-space:nowrap;
}

/* elenchi: widget icon-list di Elementor.
   L'icona e' un <svg> reale dentro uno <span>, non uno pseudo-elemento. */
.icon-list{margin-block-end:var(--space-lg)}
.icon-list .elementor-icon-list-items{
  display:flex;flex-direction:column;gap:var(--space-xs);
  margin:0;padding:0;list-style:none;
}
.icon-list .elementor-icon-list-item{
  display:flex;align-items:flex-start;gap:var(--space-sm);
  font-size:var(--text-base);line-height:var(--leading-snug);
}
.icon-list .elementor-icon-list-icon{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 var(--check-size);margin-top:.5em;
}
.icon-list.elementor-widget-icon-list .elementor-icon-list-icon svg{
  width:var(--check-size);height:var(--check-size);fill:currentColor;
}
.icon-list .elementor-icon-list-text{padding:0;color:inherit}
.icon-list-dash .elementor-icon-list-icon{flex-basis:var(--dash-w);margin-top:.55em}
.icon-list-dash.elementor-widget-icon-list .elementor-icon-list-icon svg{
  width:var(--dash-w);height:var(--dash-w);
}
.hero .icon-list,.section-dark .icon-list{color:var(--color-on-dark)}
.hero .icon-list{max-width:var(--hero-list-max)}

.actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center}

/* ==========================================================================
   8. MEDIA
   ========================================================================== */
.media{border-radius:var(--radius-sm);overflow:hidden;background:var(--color-surface-alt);margin:0;display:flex}
.media img,.media video{width:100%;height:100%;object-fit:cover}
.media-4x5{aspect-ratio:4 / 5}
.media-3x2{aspect-ratio:3 / 2}
.media-1x1{aspect-ratio:1 / 1}
.media-3x4{aspect-ratio:3 / 4}
.media-9x16{aspect-ratio:9 / 16;max-width:var(--media-portrait-max);align-self:center}
.media-column{display:flex;flex-direction:column;gap:var(--gap-carousel)}

/* banda a tutta larghezza: overlay in background-image */
.band{
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(20rem,46vw,35rem);
  background-color:var(--color-ink);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  text-align:center;
}
.band-overlay{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:clamp(20rem,46vw,35rem);
  padding:var(--page-gutter);
  background-image:linear-gradient(var(--color-overlay-flat),var(--color-overlay-flat));
}
.band-text{color:var(--color-on-dark);max-width:52rem;margin:0}

/* ==========================================================================
   9. CARD E GRIGLIE (flexbox)
   ========================================================================== */
.card-list{display:flex;flex-wrap:wrap;gap:var(--gap-cards)}
.card-list-2 > .card-service{flex:1 1 320px}
.card-service{display:flex;flex-direction:column;gap:var(--space-sm);min-width:0}
.card-service p{font-size:var(--text-base);color:var(--color-ink-soft);margin:0;max-width:var(--measure-tight)}
.section-dark .card-service p{color:var(--color-on-dark)}

.brand-list{display:flex;flex-wrap:wrap;gap:var(--gap-cards);align-items:center;margin-top:var(--space-xl)}
.brand-list > .brand-logo-item{flex:1 1 120px;display:flex;justify-content:center;width:auto}
.brand-logo-item img{
  max-height:var(--brand-logo-h);width:auto;object-fit:contain;
  opacity:.55;filter:grayscale(1);
  transition:opacity var(--duration) var(--ease);
}
.brand-logo-item img:hover{opacity:1}

.review-list{display:flex;flex-wrap:wrap;gap:var(--gap-cards);margin-top:var(--space-xl);padding:0;list-style:none}
.card-review{
  flex:1 1 280px;display:flex;flex-direction:column;gap:var(--space-sm);
  height:100%;
  border:var(--hairline) solid var(--color-line-soft);border-radius:var(--radius-sm);
  padding:var(--space-lg);background:var(--color-surface);
}
.card-review-stars{display:flex;gap:var(--space-3xs);font-size:var(--text-base)}
/* stella non assegnata: stesso glifo, colore attenuato */
.card-review-star-off{color:var(--color-line)}
.card-review-text{font-size:var(--text-base);color:var(--color-ink-soft);margin:0;flex:1}
.card-review-summary{
  font-size:var(--text-sm);letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--color-ink-soft);margin:0 auto var(--space-md);
  text-align:center;max-width:none;
}
.card-review-author{font-size:var(--text-sm);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-ink-muted);margin:0}
.placeholder-box{
  border:var(--hairline) dashed var(--color-line);border-radius:var(--radius-sm);
  padding:var(--space-lg);color:var(--color-ink-muted);
  font-size:var(--text-sm);background:var(--color-surface-alt);
}

/* ==========================================================================
   10. CAROSELLO
   ========================================================================== */
.carousel{display:flex;flex-direction:column;gap:var(--space-lg)}
.carousel-track{
  display:flex;gap:var(--gap-carousel);
  overflow-x:auto;overscroll-behavior-x:contain;
  /* proximity invece di mandatory: con lo snap obbligatorio il browser
     riaggancia le slide mentre si scorre la pagina in verticale */
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:var(--space-3xs);cursor:grab;
}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.carousel-track.is-dragging *{pointer-events:none}
.carousel-track > .carousel-slide{flex:0 0 var(--slide-basis-mobile);scroll-snap-align:start;display:flex}
.carousel-track > .carousel-slide > *{flex:1}
.carousel-review .carousel-slide{align-items:stretch}
.carousel-footer{display:flex;flex-direction:column;gap:var(--space-lg)}

.carousel-scrollbar{display:flex;height:var(--hairline);background:var(--color-line);border-radius:var(--radius-pill);overflow:hidden}
.section-dark .carousel-scrollbar{background:var(--color-line-on-dark)}
.carousel-thumb{
  flex:0 0 auto;width:25%;height:100%;
  background:var(--color-ink);border-radius:var(--radius-pill);
  transition:transform var(--duration-fast) linear;
}
.section-dark .carousel-thumb{background:var(--color-on-dark)}

.carousel-controls{display:flex;gap:var(--gap-inline);justify-content:center}
.carousel-button{
  display:flex;align-items:center;justify-content:center;
  width:var(--control-size);height:var(--control-size);padding:0;
  background:none;border:0;color:inherit;cursor:pointer;
  transition:opacity var(--duration) var(--ease);
}
.carousel-button svg{width:var(--control-size);height:var(--control-size)}
.carousel-button-prev svg{transform:scaleX(-1)}
.carousel-button:hover{opacity:.6}
.carousel-button[disabled]{opacity:.25;cursor:default}
.carousel.is-static .carousel-scrollbar,
.carousel.is-static .carousel-controls{display:none}
.carousel.is-static .carousel-track{cursor:default}

@media (min-width:640px){
  .carousel-track > .carousel-slide{flex-basis:calc((100% - (var(--slides-per-view) - 1) * var(--gap-carousel)) / var(--slides-per-view))}
}

/* ==========================================================================
   11. FORM
   ========================================================================== */
.form-section{background:var(--color-surface-alt)}
.form-layout{display:flex;flex-direction:column;max-width:var(--form-max);margin-inline:auto}
.form-intro{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:var(--space-3xl)}
.form-intro p{margin-inline:auto}
.form-intro .lede{max-width:var(--measure-narrow)}

.form-shell{
  background:var(--color-surface);
  border:var(--hairline) solid var(--color-line-soft);
  border-radius:var(--radius-sm);
  padding:var(--space-3xl);
}
.form-row{display:flex;flex-wrap:wrap;gap:var(--space-md)}
.form-field{display:flex;flex-direction:column;gap:var(--space-2xs);flex:1 1 220px;min-width:0;margin:0}
.form-field-full{flex:1 1 100%}
.form-field label{
  font-size:var(--text-xs);letter-spacing:var(--tracking-label);
  text-transform:uppercase;font-weight:var(--weight-medium);color:var(--color-ink-soft);
}
/* solo i campi veri: il wrapper .wpcf7-acceptance e' uno <span> e con il
   vecchio selettore prendeva bordo e padding, da cui il testo fuori dal box */
.form-field input:not([type=checkbox]),
.form-field select,
.form-field textarea{
  width:100%;font-family:var(--font-base);font-size:var(--text-base);color:var(--color-ink);
  background:var(--color-surface);border:var(--hairline) solid var(--color-line);border-radius:0;
  padding:var(--space-xs) var(--space-sm);
  transition:border-color var(--duration) var(--ease);
}
.form-field textarea{min-height:7.5rem;resize:vertical}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus,.wpcf7-form-control:focus{
  outline:none;border-color:var(--color-ink);
}
.form-consent{display:flex;gap:var(--space-xs);align-items:flex-start;font-size:var(--text-sm);color:var(--color-ink-soft);line-height:var(--leading-snug)}
.form-consent input[type=checkbox]{flex:0 0 var(--icon-size);width:var(--icon-size);height:var(--icon-size);margin-top:.3em;accent-color:var(--color-ink)}
.form-footer{display:flex;flex-direction:column;gap:var(--space-sm);margin-top:var(--space-lg)}
.form-note{font-size:var(--text-sm);color:var(--color-ink-muted);margin:0;max-width:none}
.form-required{color:var(--color-ink)}

/* markup generato da Contact Form 7 */
.form-field .wpcf7-form-control-wrap{display:block;width:100%}
.form-consent .wpcf7-acceptance{border:0;padding:0;background:none}
.form-consent .wpcf7-list-item{margin:0}
.form-consent .wpcf7-list-item label{display:flex;align-items:flex-start;gap:var(--space-xs);cursor:pointer}
.form-consent .wpcf7-list-item-label{font-size:var(--text-sm);color:var(--color-ink-soft);line-height:var(--leading-snug)}
.form-shell .wpcf7 form > p:last-child{margin-bottom:0}

.wpcf7 .wpcf7-submit{
  display:flex;align-items:center;justify-content:center;width:100%;
  white-space:normal;height:auto;text-align:center;
  background:var(--color-ink);color:var(--color-on-dark);
  border:var(--hairline) solid var(--color-ink);border-radius:var(--radius-sm);
  font-family:var(--font-base);font-size:var(--text-sm);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  padding:1.15rem 2.25rem;cursor:pointer;
  transition:background var(--duration) var(--ease);
}
.wpcf7 .wpcf7-submit:hover{background:var(--color-ink-soft)}
.wpcf7 .wpcf7-not-valid-tip{color:var(--color-danger);font-size:var(--text-sm);margin-top:var(--space-3xs)}
.wpcf7 form .wpcf7-response-output{
  border:var(--hairline) solid var(--color-line);border-radius:var(--radius-sm);
  margin:var(--space-md) 0 0;padding:var(--space-xs) var(--space-sm);font-size:var(--text-sm);
}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--color-success);color:var(--color-success)}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{border-color:var(--color-danger);color:var(--color-danger)}

/* ==========================================================================
   12. FOOTER (componente unico)
   ========================================================================== */
.site-footer{width:100%;max-width:none;background:var(--color-ink);color:var(--color-on-dark);padding-top:var(--section-y-tight)}
.site-footer a{color:var(--color-on-dark-soft);text-decoration:none}
.site-footer a:hover{color:var(--color-on-dark)}
.footer-top{display:flex;flex-wrap:wrap;gap:var(--gap-grid)}
.footer-brand{flex:1 1 280px;display:flex;flex-direction:column;gap:var(--space-md)}
.footer-brand img{width:var(--logo-w-footer);height:auto}
.footer-brand p{color:var(--color-on-dark-soft);max-width:34ch;margin:0}
.footer-col{flex:1 1 240px;display:flex;flex-direction:column}
.footer-col h5{
  font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;
  font-weight:var(--weight-medium);margin:0 0 var(--space-md);color:var(--color-on-dark-muted);
}
.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-xs);font-size:var(--text-base)}
.store-list{display:flex;flex-direction:column;gap:var(--space-md);font-size:var(--text-base);color:var(--color-on-dark-soft)}
.store-item{display:flex;flex-direction:column;gap:var(--space-3xs)}
.store-name{
  color:var(--color-on-dark);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-label);text-transform:uppercase;font-size:var(--text-sm);
}
.social-list{display:flex;gap:var(--space-sm);list-style:none;margin:var(--space-sm) 0 0;padding:0}
.social-link{
  display:flex;align-items:center;justify-content:center;
  width:var(--social-size);height:var(--social-size);
  border:var(--hairline) solid var(--color-line-on-dark-strong);border-radius:var(--radius-pill);
  transition:background var(--duration) var(--ease);
}
.social-link:hover{background:var(--color-line-on-dark)}
.social-link svg{width:var(--icon-size);height:var(--icon-size);fill:currentColor}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-lg);
  align-items:center;justify-content:space-between;
  margin-top:var(--space-4xl);
  border-top:var(--hairline) solid var(--color-line-on-dark);
  padding-block:var(--space-md) var(--space-lg);
  font-size:var(--text-sm);color:var(--color-on-dark-muted);
}
.footer-bottom p{margin:0;max-width:none}
.footer-legal{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-md);list-style:none;margin:0;padding:0}

/* ==========================================================================
   13. THANK YOU / PAGINE LEGALI
   ========================================================================== */
.thankyou{display:flex;justify-content:center;text-align:center}
.thankyou-inner{display:flex;flex-direction:column;align-items:center;max-width:44rem;padding-block:var(--section-y)}
.thankyou-mark{
  display:flex;align-items:center;justify-content:center;
  width:4rem;height:4rem;border-radius:var(--radius-pill);
  border:var(--hairline) solid var(--color-ink);margin-bottom:var(--space-lg);
}
.thankyou-mark svg{width:1.6rem;height:1.6rem;fill:none;stroke:var(--color-ink);stroke-width:1.4}

/* colonna di lettura ancorata al bordo del wrap, non centrata:
   cosi' il testo parte dalla stessa verticale del logo */
.legal{max-width:52rem;margin-inline:0;padding-block:var(--section-y)}
.legal h2{font-size:var(--heading-md);margin-top:var(--space-xl)}
.legal h3{font-size:var(--heading-sm);margin-top:var(--space-lg)}
.legal p,.legal li{color:var(--color-ink-soft)}
.legal ul,.legal ol{padding-left:var(--space-md);display:flex;flex-direction:column;gap:var(--space-2xs);margin-bottom:var(--space-md)}

/* ==========================================================================
   14. ELEMENTOR — pagine a piena larghezza
   ========================================================================== */
.elementor-section.elementor-section-boxed > .elementor-container{max-width:var(--page-max)}
body.page-template-template-full-width .site-main{padding:0}
.elementor-widget-container > p:last-child{margin-bottom:0}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .carousel-track{scroll-behavior:auto}
}

/* ==========================================================================
   15. RESET DEI CONTAINER ELEMENTOR
   Le spaziature arrivano dai componenti del tema, non dalle impostazioni
   del builder: cosi' i valori restano uno solo, definito in :root.
   ========================================================================== */
.elementor-widget-container > *:last-child{margin-bottom:0}

/* i widget nativi immagine e video vivono dentro il frame .media */
.media > .elementor-widget-container{display:flex;width:100%;height:100%}
.media img,.media video{width:100%;height:100%;object-fit:cover}
.media .elementor-wrapper{width:100%}
/* quattro classi: pareggia .elementor.elementor .e-con > .elementor-widget (0-4-0),
   la regola con cui il builder forza max-width:100% su ogni widget */
.split > .media.video-portrait.elementor-widget{
  max-width:var(--media-portrait-max);align-self:center;width:100%;
}
.e-con,.e-con-inner{--padding-block-start:0;--padding-block-end:0;--padding-inline-start:0;--padding-inline-end:0}
.e-con > .elementor-widget:not(:last-child){margin-block-end:0}
.elementor-widget{width:100%}