/* =============================================================================
   IL SALONE ESTETICA & BENESSERE — main.css
   Concept C · Contemporary Sharp (mood Augustinus Bader / UT Beauty / Aman).
   Palette "Contemporary Warm" (DESIGN.md). Type: Fraunces + Schibsted Grotesk.

   INDICE
   00. Tokens & reset
   01. Base & tipografia
   02. Utility (container, eyebrow, button, reveal, a11y)
   03. Header + nav + mobile overlay
   04. Hero
   05. Manifesto (band)
   06. Servizi
   07. Su misura
   08. Recensioni
   09. Visita / contatti
   10. Footer
   11. Motion / reduced-motion
   ============================================================================= */

/* ============================== 00. TOKENS ============================== */
:root{
  /* Palette Contemporary Warm (allineata a theme.json / DESIGN.md) */
  --c-base:#fdfcfa;
  --c-champagne:#f0e8da;
  --c-tortora:#c4b094;
  --c-bronze:#8a7355;
  --c-ebony:#2a2520;
  --c-rose-gold:#d4a89a;
  --c-salvia:#a8b09a;
  --c-ink-soft:#5b5246;            /* testo secondario su chiaro */
  --c-line:rgba(196,176,148,.45);  /* hairline tortora */

  --ff-sans:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --ff-disp:"Fraunces",Georgia,"Times New Roman",serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --gut:clamp(22px,4.5vw,64px);
  --maxw:1440px;

  /* Altezza reale dell'header = altezza logo + padding verticale.
     DEVE restare allineata a .brand--logo .custom-logo e a
     .site-header__inner: se diverge, l'immagine hero e le tab
     sticky del listino finiscono sotto l'header. */
  --ils-header-h:calc(clamp(90px,8.5vw,118px) + 40px);
  --ils-header-h-min:calc(clamp(60px,6.5vw,70px) + 26px);
}

/* ============================== reset ============================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
ul,ol{list-style:none}

/* ============================== 01. BASE ============================== */
html{scroll-behavior:smooth}
body{
  font-family:var(--ff-sans);
  background:var(--c-base);
  color:var(--c-ebony);
  font-size:clamp(14.5px,.5vw + 12px,16px);
  line-height:1.6;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Lenis smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

em{font-style:italic}

/* ============================== 02. UTILITY ============================== */
.ils-container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);width:100%}

.ils-eyebrow{
  display:inline-block;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.24em;color:var(--c-bronze);font-weight:600;
}
.ils-eyebrow--center{display:block;text-align:center}

/* Bottoni */
.ils-btn{
  display:inline-flex;align-items:center;gap:11px;
  padding:15px 28px;border-radius:999px;
  font-size:13px;font-weight:600;letter-spacing:.01em;
  transition:background .5s var(--ease),color .5s var(--ease),transform .5s var(--ease);
  white-space:nowrap;will-change:transform;
}
.ils-btn--primary{background:var(--c-ebony);color:var(--c-base)}
.ils-btn--primary:hover{background:var(--c-bronze)}
.ils-btn--ghost{border:1px solid var(--c-tortora);color:var(--c-ebony)}
.ils-btn--ghost:hover{border-color:var(--c-bronze);color:var(--c-bronze)}
.ils-btn__arr{display:inline-block;transition:transform .5s var(--ease)}
.ils-btn:hover .ils-btn__arr{transform:translateX(6px)}

/* reveal (JS aggiunge .is-in) */
.rv{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease)}
.clip.is-in{clip-path:inset(0 0 0 0)}

/* a11y */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-100px;left:16px;z-index:1000;background:var(--c-ebony);color:#fff;padding:10px 16px;border-radius:6px;transition:top .3s}
.skip-link:focus{top:16px}
:focus-visible{outline:2px solid var(--c-bronze);outline-offset:3px}

/* ============================== 03. HEADER ============================== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.site-header.is-scrolled{background:var(--c-base);border-bottom:1px solid var(--c-line)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:20px;transition:padding .5s var(--ease)}
.site-header.is-scrolled .site-header__inner{padding-block:13px}

.brand--logo{display:inline-flex;text-decoration:none}.brand--logo .custom-logo{height:clamp(90px,8.5vw,118px);width:auto;display:block}.site-header.is-scrolled .brand--logo .custom-logo{height:clamp(62px,6vw,76px);transition:height .5s var(--ease)}

.main-navigation__list{display:flex;gap:32px;font-size:13px;font-weight:500}
.main-navigation__list a{position:relative;padding-bottom:2px}
.main-navigation__list a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--c-bronze);transition:width .45s var(--ease)}
.main-navigation__list a:hover::after{width:100%}

.ils-cta{background:var(--c-ebony);color:var(--c-base);padding:11px 22px;border-radius:999px;font-size:12px;font-weight:600;transition:background .45s var(--ease)}
.ils-cta:hover{background:var(--c-bronze)}

/* hamburger (solo mobile) */
.nav-toggle{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--c-ebony);transition:transform .4s var(--ease),opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}

/* overlay mobile */
.mobile-nav{position:fixed;inset:0;z-index:99;background:var(--c-base);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.mobile-nav.is-open{opacity:1;visibility:visible}
.mobile-nav[hidden]{display:flex}
.mobile-nav nav{text-align:center}
.mobile-nav ul{display:grid;gap:22px;margin-bottom:40px}
.mobile-nav a{font-family:var(--ff-disp);font-size:clamp(2rem,9vw,3rem);font-weight:340;letter-spacing:-.02em}
.mobile-nav .ils-btn{font-family:var(--ff-sans)}

/* ============================== 04. HERO ============================== */
.ils-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--ils-header-h) + clamp(16px,3vh,40px)) var(--gut) clamp(36px,5vh,64px);position:relative}
.ils-hero__bg{position:absolute;top:calc(var(--ils-header-h) + 2vh);right:var(--gut);
  width:38vw;max-width:520px;height:min(66vh,620px);z-index:-1;overflow:hidden;
  background:var(--c-champagne);
  /* Angoli superiori arrotondati: l'immagine diventa un'arcata, non un rettangolo.
     Richiama le arcate del portico che si vedono nelle foto del salone. */
  border-radius:260px 260px 8px 8px;
  /* Ombra ampia e morbida: stacca l'immagine dal fondo senza pesare */
  box-shadow:0 30px 70px -30px rgba(42,37,32,.32);
  /* Entrata: sale e si rivela dal basso */
  animation:ilsHeroIn 1.4s var(--ease) .2s both}

/* Velo caldo sul bordo sinistro: l'immagine sfuma verso il testo invece
   di tagliarsi netta, così i due elementi si compenetrano. */
.ils-hero__bg::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,
    var(--c-base) 0%,
    rgba(253,252,250,.55) 12%,
    rgba(253,252,250,0) 34%)}

@keyframes ilsHeroIn{
  from{opacity:0;transform:translateY(38px) scale(1.04)}
  to{opacity:1;transform:none}
}

/* Il titolo passa SOPRA l'immagine: è il gesto che lega i due piani */
.ils-hero__word{position:relative;z-index:2}
.ils-hero__word em{position:relative}
.ils-hero__bg img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform 1.2s var(--ease);
  animation:ilsHeroZoom 2.4s var(--ease) .2s both}
@keyframes ilsHeroZoom{from{transform:scale(1.14)}to{transform:scale(1.06)}}
/* Al passaggio del mouse l'immagine respira appena */
.ils-hero:hover .ils-hero__bg img{transform:scale(1.02)}

.ils-hero__word{font-weight:700;letter-spacing:-.05em;line-height:.82;
  font-size:clamp(3.5rem,min(10.5vw,21vh),11rem);text-transform:uppercase}
.ils-hero__line{display:block;overflow:hidden}
.ils-hero__line>span{display:block;transform:translateY(105%);animation:ilsRise 1.1s var(--ease) .1s forwards}
.ils-hero__line:nth-child(2)>span{animation-delay:.22s}
.ils-hero__word em{font-family:var(--ff-disp);font-style:italic;font-weight:300;text-transform:none;letter-spacing:-.02em;color:var(--c-bronze)}
@keyframes ilsRise{to{transform:translateY(0)}}

.ils-hero__foot{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;
  margin-top:40px;padding-top:28px;border-top:1px solid var(--c-line)}
.ils-hero__foot p{max-width:42ch;font-size:clamp(15px,1.05vw,17px);color:var(--c-ink-soft)}
.ils-hero__foot .ils-eyebrow{margin-bottom:14px}

/* ============================== 05. MANIFESTO (band) ============================== */
.ils-band{background:var(--c-ebony);color:var(--c-base);padding:clamp(70px,10vh,120px) 0}
.ils-band__row{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end}
.ils-band__q{font-family:var(--ff-disp);font-style:italic;font-weight:300;
  font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.18;max-width:22ch;letter-spacing:-.01em}
.ils-band__q em{font-style:normal;color:var(--c-tortora)}
.ils-sign{margin-top:34px;font-family:var(--ff-disp);font-style:italic;font-size:1.3rem;color:var(--c-tortora)}
.ils-sign small{display:block;font-family:var(--ff-sans);font-style:normal;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#bdb09c;margin-top:6px;font-weight:500}
.ils-band__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid rgba(196,176,148,.3);padding-top:30px}
.ils-stat dd{display:block}
.ils-stat b{display:block;font-size:clamp(2rem,4vw,3.2rem);font-weight:600;letter-spacing:-.03em;line-height:1}
.ils-stat span{font-size:12px;color:#bdb09c;margin-top:8px;display:block}

/* ============================== 06. SERVIZI ============================== */
.ils-servizi{padding:clamp(80px,11vh,150px) 0}
.ils-servizi__head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:30px;margin-bottom:56px}
.ils-servizi__head .ils-eyebrow{margin-bottom:16px}
.ils-servizi__title{font-size:clamp(2rem,5vw,4.2rem);font-weight:600;letter-spacing:-.04em;line-height:.98}
.ils-servizi__title em{font-family:var(--ff-disp);font-style:italic;font-weight:300;color:var(--c-bronze)}
.ils-servizi__head p{max-width:30ch;color:var(--c-ink-soft);font-size:15px}

.ils-servizi__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--c-line);border:1px solid var(--c-line)}
.ils-scard{background:var(--c-base);padding:32px 26px 30px;min-height:340px;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:background .5s var(--ease)}
.ils-scard:hover{background:var(--c-champagne)}
.ils-scard__n{font-size:12px;font-weight:600;color:var(--c-tortora);letter-spacing:.05em;position:relative;z-index:1;transition:color .5s var(--ease)}
.ils-scard h3{font-size:clamp(1.4rem,2vw,1.85rem);font-weight:600;letter-spacing:-.02em;margin:auto 0 14px;position:relative;z-index:1;transition:color .5s var(--ease)}
.ils-scard p{font-size:13.5px;color:var(--c-ink-soft);line-height:1.55;margin-bottom:20px;min-height:4.65em;position:relative;z-index:1;transition:color .5s var(--ease)}
.ils-scard__go{font-size:12px;font-weight:600;color:var(--c-bronze);display:inline-flex;align-items:center;gap:9px;position:relative;z-index:1;transition:color .5s var(--ease)}
.ils-scard:hover .ils-scard__go .ils-btn__arr{transform:translateX(6px)}
.ils-scard__img{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .6s var(--ease)}
.ils-scard__img img{width:100%;height:100%;object-fit:cover}
.ils-scard__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,37,32,.12),rgba(42,37,32,.62))}
.ils-scard:hover .ils-scard__img{opacity:1}
.ils-scard:hover .ils-scard__n,.ils-scard:hover h3,.ils-scard:hover .ils-scard__go{color:#fff}
.ils-scard:hover p{color:rgba(255,255,255,.85)}

/* ============================== 07. SU MISURA ============================== */
.ils-sumisura{display:grid;grid-template-columns:1fr 1fr;min-height:90vh}
.ils-sumisura__media{position:relative;overflow:hidden;background:var(--c-champagne)}
.ils-sumisura__media img{width:100%;height:100%;object-fit:cover}
.ils-sumisura__txt{align-self:center;padding:clamp(60px,8vh,110px) clamp(var(--gut),6vw,96px)}
.ils-sumisura__txt .ils-eyebrow{margin-bottom:20px}
.ils-sumisura__txt h2{font-size:clamp(2rem,4vw,3.4rem);font-weight:600;letter-spacing:-.03em;line-height:1.02;margin-bottom:22px}
.ils-sumisura__txt h2 em{font-family:var(--ff-disp);font-style:italic;font-weight:300;color:var(--c-bronze)}
.ils-sumisura__txt>p{color:var(--c-ink-soft);max-width:42ch;margin-bottom:32px}
.ils-steps{counter-reset:s}
.ils-steps li{counter-increment:s;display:grid;grid-template-columns:48px 1fr;gap:18px;padding:20px 0;border-top:1px solid var(--c-line)}
.ils-steps li::before{content:counter(s,decimal-leading-zero);font-weight:600;color:var(--c-tortora);font-size:14px;padding-top:2px}
.ils-steps b{font-size:15px;font-weight:600}
.ils-steps__d{display:block;color:var(--c-ink-soft);font-size:13.5px;margin-top:3px}

/* ============================== 08. RECENSIONI ============================== */
.ils-rec{padding:clamp(80px,11vh,150px) 0}
.ils-rec .ils-eyebrow{margin-bottom:48px}
.ils-rec__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--c-line);border:1px solid var(--c-line)}
.ils-t{background:var(--c-base);padding:40px 34px}
.ils-t__stars{color:var(--c-tortora);letter-spacing:.25em;font-size:13px;margin-bottom:22px}
.ils-t blockquote p{font-family:var(--ff-disp);font-style:italic;font-weight:300;font-size:clamp(1.1rem,1.5vw,1.4rem);line-height:1.4}
.ils-t cite{display:block;margin-top:24px;font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-bronze);font-weight:600;font-family:var(--ff-sans)}

/* ============================== 09. VISITA ============================== */
.ils-visita{background:var(--c-champagne);padding:clamp(80px,11vh,140px) 0}
.ils-visita__in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,90px);align-items:center}
.ils-visita .ils-eyebrow{margin-bottom:18px}
.ils-visita h2{font-size:clamp(2rem,4.4vw,3.6rem);font-weight:600;letter-spacing:-.03em;line-height:1;margin-bottom:32px}
.ils-visita__row{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid rgba(196,176,148,.55);font-size:15px}
.ils-visita__row .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-bronze);font-weight:600;padding-top:3px}
.ils-visita__row dd a:hover{color:var(--c-bronze)}
.ils-visita .ils-btn{margin-top:34px}
.ils-visita__map{aspect-ratio:1/1;overflow:hidden}
.ils-visita__map img{width:100%;height:100%;object-fit:cover}

/* ============================== 10. FOOTER ============================== */
.site-footer{background:var(--c-base);padding:clamp(70px,9vh,110px) 0 36px;border-top:1px solid var(--c-line)}
.site-footer__big{font-size:clamp(2.6rem,9vw,7rem);font-weight:700;letter-spacing:-.05em;line-height:.9;text-transform:uppercase;margin-bottom:50px}
.site-footer__big em{font-family:var(--ff-disp);font-style:italic;font-weight:300;text-transform:none;color:var(--c-bronze)}
.site-footer__top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding-bottom:46px;border-bottom:1px solid var(--c-line)}
.site-footer__col h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-bronze);margin-bottom:18px;font-weight:600}
.site-footer__col ul{display:grid;gap:10px;font-size:14px;color:#4f463d}
.site-footer__col a:hover{color:var(--c-bronze)}
.site-footer__col--news p{font-size:13.5px;color:var(--c-ink-soft);margin-bottom:8px}
.site-footer__news{display:flex;border-bottom:1.5px solid var(--c-ebony);margin-top:6px}
.site-footer__news input{flex:1;border:0;background:transparent;padding:12px 2px;font-family:inherit;font-size:14px;outline:none;color:var(--c-ebony)}
.site-footer__news button{padding:0 6px;font-size:18px;color:var(--c-bronze)}
.site-footer__bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:26px;font-size:12px;color:#8a8178}
.site-footer__bot a{text-decoration:underline;text-underline-offset:3px}
.site-footer__bot a:hover{color:var(--c-bronze)}

/* ============================== 11. MOTION ============================== */
@media (prefers-reduced-motion:reduce){
  .ils-hero__bg,.ils-hero__bg img{animation:none}
  .ils-hero__bg img{transform:scale(1.02)}
  .ils-hero:hover .ils-hero__bg img{transform:scale(1.02)}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv,.clip{opacity:1!important;transform:none!important;clip-path:none!important}
  .ils-hero__line>span{transform:none!important;animation:none!important}
}

/* ===== Pagine standard (page.php) — legali, carrello, checkout, account ===== */
.ils-page{padding-block:clamp(184px,20vh,240px) clamp(64px,10vh,120px)}
.ils-page__header{margin-bottom:clamp(28px,4vw,48px)}
.ils-page__title{font-family:var(--ff-disp);font-weight:500;font-size:clamp(32px,5vw,56px);line-height:1.05;letter-spacing:-.02em;color:var(--c-ebony);margin:0}
.ils-page__content{max-width:72ch;color:var(--c-ink-soft);font-size:clamp(15px,1.05vw,17px);line-height:1.7}
.ils-page--wc .ils-page__content{max-width:none}
.ils-page__content h2{font-family:var(--ff-disp);font-weight:500;font-size:clamp(22px,2.6vw,30px);line-height:1.2;letter-spacing:-.01em;color:var(--c-ebony);margin:2.2em 0 .6em}
.ils-page__content h2:first-child{margin-top:0}
.ils-page__content h3{font-family:var(--ff-sans);font-weight:600;font-size:clamp(16px,1.35vw,18px);color:var(--c-ebony);margin:1.9em 0 .5em}
.ils-page__content p{margin:0 0 1.1em}
.ils-page__content ul,.ils-page__content ol{margin:0 0 1.2em;padding-left:1.3em}
.ils-page__content li{margin-bottom:.4em}
.ils-page:not(.ils-page--wc) .ils-page__content a{color:var(--c-bronze);text-decoration:underline;text-underline-offset:3px;transition:color .3s var(--ease)}
.ils-page:not(.ils-page--wc) .ils-page__content a:hover{color:var(--c-ebony)}
.ils-page__content strong{color:var(--c-ebony);font-weight:600}
.ils-page__content hr{border:0;border-top:1px solid var(--c-line);margin:2.4em 0}

/* Link di ritorno al carrello (solo checkout) */
.ils-page__backlink{margin:0 0 clamp(20px,3vw,32px);font-family:var(--ff-sans);font-size:14px}
.ils-page__backlink a{color:var(--c-bronze);text-decoration:none;letter-spacing:.02em;transition:color .3s var(--ease)}
.ils-page__backlink a:hover{color:var(--c-ebony);text-decoration:underline;text-underline-offset:3px}

/* Pulsante express PayPal: larghezza contenuta su desktop, pieno su mobile */

/* Bottoni WooCommerce (carrello/checkout): il tema colora i link in bronzo
   all'hover e li sottolinea; su fondo scuro il testo spariva. */
.ils-page--wc .wc-block-components-button,
.ils-page--wc .wc-block-cart__submit-button,
.ils-page--wc .wp-block-button__link,
.ils-page--wc .wc-block-components-checkout-place-order-button{
	text-decoration:none;
	color:var(--c-base)
}
.ils-page--wc .wc-block-components-button:hover,
.ils-page--wc .wc-block-cart__submit-button:hover,
.ils-page--wc .wp-block-button__link:hover,
.ils-page--wc .wc-block-components-checkout-place-order-button:hover{
	text-decoration:none;
	color:var(--c-base);
	opacity:.9
}
.ils-page--wc .wc-block-components-button__text{color:inherit;text-decoration:none}
/* Varianti chiare/secondarie: testo scuro, non bianco */
.ils-page--wc .wc-block-components-button.wc-block-components-button--secondary,
.ils-page--wc .wc-block-components-button.outlined{color:var(--c-ebony)}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   Tre sole soglie, allineate ai dispositivi reali:
     ≤1024px  tablet orizzontale, finestre desktop strette
     ≤768px   tablet verticale
     ≤480px   telefono
   Ordine decrescente: le regole più strette sovrascrivono le altre.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────── ≤1024 — tablet orizzontale ─────────── */
@media (max-width:1024px){

  /* Navigazione a scomparsa: sotto questa soglia si è su touch o su
     finestra stretta. Il menu esteso resterebbe compresso accanto al
     logo, quindi si passa all'hamburger. */
  .main-navigation,
  .site-header .ils-cta{display:none}
  .nav-toggle{display:flex}

  /* Griglia servizi: da 4 a 2 colonne */
  .ils-servizi__grid{grid-template-columns:repeat(2,1fr)}
  .ils-scard{min-height:280px}
}

/* ─────────── ≤768 — tablet verticale ─────────── */
@media (max-width:768px){

  /* Logo ridimensionato: l'header deve restare compatto.
     La variabile va aggiornata di pari passo. */
  :root{--ils-header-h:calc(clamp(58px,9vw,72px) + 36px)}
  .brand--logo .custom-logo{height:clamp(58px,9vw,72px)}
  .site-header.is-scrolled .brand--logo .custom-logo{height:clamp(50px,7.5vw,60px)}
  .site-header__inner{padding-block:18px}

  /* Hero: immagine sopra, testo sotto */
  .ils-hero{justify-content:flex-start;min-height:auto;padding-top:96px}
  .ils-hero__bg{position:relative;top:auto;right:auto;width:auto;max-width:none;
    height:46svh;margin:0 calc(var(--gut)*-1) 28px;z-index:0;
    border-radius:0 0 8px 8px;box-shadow:none}
  /* Su schermo stretto il velo laterale non serve: l'immagine è a tutta larghezza */
  .ils-hero__bg::after{background:linear-gradient(180deg,
    rgba(253,252,250,.35) 0%, rgba(253,252,250,0) 30%)}
  .ils-hero__foot{grid-template-columns:1fr;gap:22px}

  /* Sezioni affiancate → impilate */
  .ils-band__row{grid-template-columns:1fr;gap:40px}
  .ils-sumisura{grid-template-columns:1fr}
  .ils-sumisura__media{min-height:55svh;order:-1}
  .ils-rec__grid{grid-template-columns:1fr}
  .ils-visita__in{grid-template-columns:1fr;gap:40px}

  /* Footer: da 4 a 2 colonne */
  .site-footer__top{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

  /* Pagine di testo: meno spazio sopra, l'header è più basso */
  .ils-page{padding-block:clamp(150px,18vh,190px) clamp(48px,8vh,80px)}
}

/* ─────────── ≤480 — telefono ─────────── */
@media (max-width:480px){

  /* Tutto su colonna singola */
  .ils-servizi__head{grid-template-columns:1fr;align-items:start}
  .ils-servizi__grid{grid-template-columns:1fr}
  .ils-scard{min-height:0}
  .ils-scard p{min-height:0}   /* in colonna singola non c'è nulla da allineare */
  .site-footer__top{grid-template-columns:1fr;gap:34px}

  /* Leggibilità: sul telefono 11px è sotto la soglia comoda.
     La clientela del salone non è solo giovane. */
  .ils-sign small,
  .ils-t cite,
  .ils-visita__row .k,
  .site-footer__col h4{font-size:12px}
  .ils-stat span,
  .ils-scard__n,
  .ils-scard__go,
  .site-footer__bot{font-size:13px}
  .ils-t__stars{font-size:14px}

  /* Pulsanti a piena larghezza: più facili da centrare col pollice */
  .ils-btn{width:100%;justify-content:center;min-height:48px}
  .ils-hero__foot .ils-btn,
  .ils-visita .ils-btn{width:100%}

  /* Hero più contenuto in altezza */
  .ils-hero{padding-top:88px}
  .ils-hero__bg{height:34svh}

  /* Righe contatto impilate (etichetta sopra, valore sotto) */
  .ils-visita__row{grid-template-columns:1fr;gap:4px;padding-block:14px}
}

/* ─────────── ≥769 — solo desktop/tablet orizzontale ─────────── */
@media (min-width:769px){
  /* Il pulsante di pagamento rapido a tutta larghezza è sproporzionato
     sui formati ampi; su telefono resta pieno, che è corretto. */
  .wp-block-woocommerce-checkout-express-payment-block{max-width:460px}
}

/* ─────────── WhatsApp: riquadro nella conferma ordine ─────────── */
.ils-wa{margin:clamp(28px,4vw,40px) 0;padding:clamp(22px,3vw,30px);
  background:var(--c-champagne);border-left:3px solid var(--c-bronze)}
.ils-wa__t{font-family:var(--ff-disp);font-weight:500;font-size:clamp(19px,2vw,23px);
  color:var(--c-ebony);margin:0 0 8px}
.ils-wa__d{color:var(--c-ink-soft);font-size:14.5px;line-height:1.6;margin:0 0 18px;max-width:56ch}
.ils-wa .ils-btn{text-decoration:none}
@media (max-width:480px){
  .ils-wa .ils-btn{width:100%;justify-content:center}
}

/* Aiuto WhatsApp in fondo al listino — discreto, non compete con la borsa */
.ils-listino__help{margin:18px 0 0;color:var(--c-ink-soft);
  font-size:14px;line-height:1.7;max-width:52ch}
.ils-listino__help a{color:var(--c-bronze);text-decoration:underline;
  text-underline-offset:3px;transition:color .3s var(--ease)}
.ils-listino__help a:hover{color:var(--c-ebony)}

/* ─────────── WhatsApp: pulsante flottante ───────────
   Nei colori del brand invece del verde: la forma resta riconoscibile
   ma non stona con la palette. Compare dopo un po' di scroll, così non
   accoglie il visitatore appena arriva. */
.ils-wafab{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:80;
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px 11px 13px;border-radius:999px;
  background:var(--c-bronze);color:var(--c-base);text-decoration:none;
  box-shadow:0 6px 20px rgba(42,37,32,.18);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);
  transition:opacity .4s var(--ease),transform .4s var(--ease),
             visibility .4s,background .3s var(--ease)
}
.ils-wafab__t{font-family:var(--ff-sans);font-size:13.5px;font-weight:500;
  letter-spacing:.01em;line-height:1;white-space:nowrap}
.ils-wafab svg{flex:0 0 auto}
.ils-wafab.is-visible{opacity:1;visibility:visible;transform:none}
.ils-wafab:hover,.ils-wafab:focus-visible{background:var(--c-ebony);color:var(--c-base)}
.ils-wafab:focus-visible{outline:2px solid var(--c-tortora);outline-offset:3px}

/* Sul listino la borsa è fissa in basso: il pulsante le sta sopra */
body:has(.ils-bag) .ils-wafab{bottom:calc(66px + clamp(16px,3vw,26px))}

@media (max-width:480px){
  .ils-wafab{padding:10px 14px 10px 12px;right:14px;bottom:14px;gap:7px}
  .ils-wafab__t{font-size:13px}
  body:has(.ils-bag) .ils-wafab{bottom:calc(66px + 14px)}
}
@media (prefers-reduced-motion:reduce){
  .ils-wafab{transition:opacity .2s,visibility .2s;transform:none}
}

/* ═══════════════════════════════════════════════════════════════
   RIFINITURE MOBILE / TABLET — audit
   ═══════════════════════════════════════════════════════════════ */

/* Parole lunghe (es. "Dermopigmentazione") non devono sfondare il
   contenitore su schermi stretti. */
@media (max-width:768px){
  h1,h2,h3,p,li,dd,dt{overflow-wrap:break-word}
  /* La citazione in evidenza a 4.4vw diventa minuscola sotto i 768 */
  .ils-band h2{font-size:clamp(1.6rem,5.6vw,2.4rem)}
  /* Numeri delle statistiche: su due colonne invece che tre schiacciate */
  .ils-band__stats{grid-template-columns:repeat(2,1fr);gap:24px 18px}
}

@media (max-width:480px){
  /* Le statistiche vanno in colonna: tre numeri affiancati a 390px
     sono illeggibili */
  .ils-band__stats{grid-template-columns:1fr;gap:20px}
  .ils-band__stats>div{display:flex;align-items:baseline;gap:12px}
  .ils-stat b{font-size:clamp(2.2rem,11vw,3rem)}

  /* Titoli di sezione: evita che restino sproporzionati */
  h2{font-size:clamp(1.75rem,8.5vw,2.2rem)}

  /* Interlinea più generosa per la lettura da telefono */
  p{line-height:1.65}

  /* Passi del metodo: la colonna fissa da 48px per il numero toglie
     spazio prezioso al testo su schermo stretto */
  .ils-steps li{grid-template-columns:32px 1fr;gap:12px;padding:16px 0}
  .ils-steps__d{font-size:14px}

  /* Descrizioni delle card: 13.5px è al limite sul telefono */
  .ils-scard p{font-size:14.5px}
}

/* Tablet orizzontale: la fascia 769-1024 aveva il menu già a scomparsa
   ma i contenuti restavano su misure desktop. */
@media (min-width:769px) and (max-width:1024px){
  .ils-hero__bg{width:42vw;max-width:none;height:min(56vh,520px)}
  .ils-hero__word{font-size:clamp(3rem,min(10vw,20vh),9rem)}
  .ils-visita__row{grid-template-columns:104px 1fr}
}

/* ─────────── Pagina vuota / 404 ─────────── */
.ils-empty{min-height:70svh;display:flex;flex-direction:column;justify-content:center}
.ils-empty .ils-page__title{font-size:clamp(40px,7vw,88px);line-height:1;letter-spacing:-.03em;margin:14px 0 22px}
.ils-empty .ils-page__title em{font-style:italic;font-weight:300;color:var(--c-bronze)}
.ils-empty__text{max-width:48ch;color:var(--c-ink-soft);font-size:clamp(15px,1.1vw,17px);line-height:1.7;margin:0 0 32px}
.ils-empty__cta{display:flex;flex-wrap:wrap;gap:12px}
.ils-empty__cta .ils-btn{text-decoration:none}
@media (max-width:480px){.ils-empty__cta .ils-btn{width:100%;justify-content:center}}

/* ═══════════════════════════════════════════════════════════════
   CARRELLO E CHECKOUT — allineati al linguaggio del sito
   (bordi tortora, angoli morbidi, pulsante principale ebano a pillola)
   ═══════════════════════════════════════════════════════════════ */
body .ils-page--wc{--ils-r:14px}

/* Campi */
body .ils-page--wc .wc-block-components-text-input input,
body .ils-page--wc .wc-block-components-text-input textarea,
body .ils-page--wc .wc-blocks-components-select__select,
body .ils-page--wc .wc-block-components-combobox .components-combobox-control__input{
  border:1px solid var(--c-tortora)!important;border-radius:12px!important;
  background:#fff!important;box-shadow:none!important;color:var(--c-ebony)}
body .ils-page--wc .wc-block-components-text-input input:focus,
body .ils-page--wc .wc-blocks-components-select__select:focus,
body .ils-page--wc .wc-block-components-combobox .components-combobox-control__input:focus{
  border-color:var(--c-ebony)!important;outline:none}
body .ils-page--wc .wc-block-components-text-input label,
body .ils-page--wc .wc-blocks-components-select__label{color:var(--c-ink-soft)}

/* Titoli di sezione del checkout */
body .ils-page--wc .wc-block-components-title,
body .ils-page--wc .wc-block-components-checkout-step__title{
  font-family:var(--ff-disp);font-weight:500;letter-spacing:-.01em;color:var(--c-ebony)}

/* Pagamento rapido (Apple/Google Pay) */
/* WooCommerce disegna gia' la cornice del "Pagamento rapido": aggiungerne
   una seconda creava un doppio bordo. Ne ricoloriamo solo le linee. */
body .ils-page--wc .wc-block-components-express-payment--checkout .wc-block-components-express-payment__content{
  border-color:var(--c-line)!important}
body .ils-page--wc .wc-block-components-express-payment__title-container::before,
body .ils-page--wc .wc-block-components-express-payment__title-container::after{border-color:var(--c-line)}
body .ils-page--wc .wc-block-components-express-payment-continue-rule{color:var(--c-ink-soft)}
body .ils-page--wc .wc-block-components-express-payment-continue-rule::before,
body .ils-page--wc .wc-block-components-express-payment-continue-rule::after{background:var(--c-line)}

/* Opzioni di pagamento: riquadro unico, opzione scelta evidenziata in ebano */
body .ils-page--wc .wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked{
  border:1px solid var(--c-line);border-radius:var(--ils-r);overflow:hidden}
body .ils-page--wc .wc-block-components-radio-control--highlight-checked::after{display:none}
body .ils-page--wc .wc-block-components-radio-control-accordion-option{box-shadow:none!important}
body .ils-page--wc .wc-block-components-radio-control-accordion-option--checked-option-highlighted{
  box-shadow:inset 0 0 0 1px var(--c-ebony)!important;border-radius:var(--ils-r)}
body .ils-page--wc .wc-block-components-radio-control__input:checked{border-color:var(--c-ebony)}
body .ils-page--wc .wc-block-components-radio-control__input:checked::before{background:var(--c-ebony)}
body .ils-page--wc .wc-block-components-radio-control__label{color:var(--c-ebony);font-weight:500}

/* Riepilogo ordine */
/* Checkout: il riepilogo ha gia' il suo bordo WooCommerce — un secondo
   bordo creava l'effetto riquadro-nel-riquadro. Lo ricoloriamo soltanto. */
body .ils-page--wc .wc-block-components-checkout-order-summary__content,
body .ils-page--wc .wc-block-components-order-summary{border-color:var(--c-line)!important}

/* Pulsante principale: "Effettua ordine" e "Procedi al pagamento" */
body .ils-page--wc .wc-block-components-checkout-place-order-button,
body .ils-page--wc .wc-block-cart__submit-button{
  background:var(--c-ebony)!important;color:var(--c-base)!important;border:0!important;
  border-radius:999px!important;min-height:56px;font-weight:500;letter-spacing:.01em;
  transition:opacity .3s var(--ease)}
body .ils-page--wc .wc-block-components-checkout-place-order-button:hover,
body .ils-page--wc .wc-block-cart__submit-button:hover{opacity:.88}

/* Messaggio "Paga in 3 rate": riquadro champagne con filetto bronzo,
   stesso linguaggio dei box WhatsApp e causale bonifico.
   Il testo lo disegna PayPal in un iframe (monocromatico, 12px): noi
   curiamo il contenitore. Se PayPal non mostra il messaggio (importo
   fuori fascia 30-2000 EUR) il riquadro sparisce invece di restare vuoto. */
body .ils-page--wc .ppcp-messages{
  position:relative;margin:16px 0 6px;padding:12px 16px 10px 18px;
  background:var(--c-champagne);border-radius:12px;overflow:hidden}
body .ils-page--wc .ppcp-messages::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c-bronze)}
body .ils-page--wc .ppcp-messages:empty,
body .ils-page--wc .ppcp-messages:not(:has(iframe)){display:none}
body .ils-page--wc .ppcp-messages iframe{display:block;width:100%!important}

/* Checkbox condizioni */
body .ils-page--wc .wc-block-components-checkbox__input[type=checkbox]:checked{
  background:var(--c-ebony);border-color:var(--c-ebony)}
body .ils-page--wc .wc-block-checkout__terms a{color:var(--c-bronze);text-underline-offset:3px}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — rifiniture da audit a 390px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  /* Aree di tocco: link del footer e dei contatti erano alti 17-19px */
  .site-footer__col ul{gap:0}
  .site-footer__col li a{display:inline-block;padding:10px 0}
  main dd a{display:inline-block;padding:8px 0}
  .site-footer__bot a{display:inline-block;padding:8px 0}
  /* Quantità nel carrello: pulsanti ± da 30x23 a 40x40 */
  body .ils-page--wc .wc-block-components-quantity-selector__button{min-width:40px;min-height:40px}
  body .ils-page--wc .wc-block-components-quantity-selector__input{min-height:40px}
  /* Titolo del carrello: stesso stile delle pagine, ma più compatto */
  body .ils-page--wc .ils-page__title{font-size:clamp(30px,8vw,40px);margin-bottom:6px}
}
@media (max-width:480px){
  /* Etichette maiuscole: 10,5px è sotto la soglia su telefono */
  .ils-eyebrow{font-size:11.5px;letter-spacing:.2em}
}
/* Tab del listino: la tab attiva, centrata via JS, finiva a filo del bordo */
.ils-listino__tabs-track{scroll-padding-inline:var(--gut)}

/* Card servizi su dispositivi touch: l'immagine compariva solo al passaggio
   del mouse, quindi su telefono e tablet non si vedeva mai. Qui diventa una
   fascia fotografica in cima alla card, sempre visibile. */
@media (hover:none){
  .ils-scard{min-height:0}
  .ils-scard__img{position:relative;inset:auto;opacity:1;order:-1;
    height:clamp(150px,42vw,220px);margin:-32px -26px 22px}
  .ils-scard__img::after{background:linear-gradient(180deg,rgba(42,37,32,0),rgba(42,37,32,.18))}
  .ils-scard:hover{background:var(--c-base)}
}

/* Foto stock delle card: colori fuori palette (turchese, verde, viola).
   Un viraggio caldo leggero le accorda al marrone/champagne del sito. */
.ils-scard__img img{filter:saturate(.72) sepia(.14) contrast(1.02)}

/* ─────────── Pagina Contatti ───────────
   Riusa la sezione "Vieni a trovarci" della home, ma con un h1 (in home e'
   h2): senza queste regole il titolo restava senza stile, e il contenuto
   partiva sotto l'header fisso (cresciuto col logo a 118px). */
.ils-visita--page{padding-top:calc(var(--ils-header-h) + clamp(32px,6vh,72px))}
.ils-visita--page h1{font-size:clamp(2.2rem,4.8vw,4rem);font-weight:600;letter-spacing:-.03em;line-height:1;margin-bottom:34px;color:var(--c-ebony)}
/* In pagina la foto verticale si vede per intero, non ritagliata a quadrato */
.ils-visita--page .ils-visita__map{aspect-ratio:4/5}

/* Credito nel footer: discreto, stesso tono del copyright */
.site-footer__credit a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--c-line);transition:color .3s var(--ease)}
.site-footer__credit a:hover{color:var(--c-bronze)}

/* Telefono: niente pixel oltre il bordo (immagine hero ingrandita dall animazione) */
@media (max-width:768px){html,body{overflow-x:clip}.ils-hero__bg{overflow:hidden}}