/* =========================================================
   ES BEAUTY STUDIO - COMPONENTI CONDIVISI
   Estratti dagli HTML dei trattamenti per evitare duplicazioni.
   ========================================================= */
.rating a.rating-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  cursor: pointer;
}
.rating a.rating-link .rating-link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.84em;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.rating a.rating-link:hover .rating-link-cta {
  transform: translateX(2px);
}
.rating a.rating-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 3px;
}
/* Pulsante menu mobile accessibile, con dimensione originale */
button.menu-toggle {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
    color: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
button.menu-toggle:focus-visible {
    outline: 3px solid var(--pink, #ff4f9d);
    outline-offset: 5px;
    border-radius: 4px;
}

/* Collegamenti interni tra trattamenti correlati */
.es-related-services{padding:90px 0;background:linear-gradient(180deg,#fff 0%,#fff7fb 100%)}
.es-related-services .es-related-intro{max-width:780px;margin:0 auto 42px;text-align:center;line-height:1.8;color:var(--text,#434956)}
.es-related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;max-width:1100px;margin:0 auto}
.es-related-card{display:flex;flex-direction:column;min-height:190px;padding:30px;border-radius:24px;background:#fff;border:1px solid rgba(0,109,119,.12);box-shadow:0 16px 38px rgba(0,0,0,.06);text-decoration:none;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.es-related-card:hover,.es-related-card:focus-visible{transform:translateY(-6px);box-shadow:0 24px 48px rgba(0,0,0,.1);border-color:rgba(255,79,157,.45)}
.es-related-card:focus-visible{outline:3px solid #ff4f9d;outline-offset:4px}
.es-related-card h3{margin:0 0 12px;font-family:'Cormorant Garamond',serif;font-size:1.75rem;line-height:1.1;color:var(--ottanio,#006d77)}
.es-related-card p{margin:0 0 20px;line-height:1.65;color:var(--text,#434956)}
.es-related-card span{margin-top:auto;font-weight:600;color:#b84a7e}
@media(max-width:768px){.es-related-services{padding:65px 0}.es-related-grid{grid-template-columns:1fr;gap:18px}.es-related-card{min-height:auto;padding:25px}}

.footer-legal .cookie-preferences-link {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
}
.footer-legal .cookie-preferences-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-legal .cookie-preferences-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

/* Accessibilita: contrasto dei pulsanti rosa su fondo chiaro */
.btn-secondary{border-color:#b84a7e;color:#b84a7e}
.btn-secondary:hover,.btn-secondary:focus-visible{background:#b84a7e;color:#fff}
.btn-whatsapp{background:#b84a7e;color:#fff}
/* Header CTA WhatsApp compatto - desktop */
@media (min-width:1367px){header .btn-whatsapp{padding:11px 20px!important;font-size:.92rem!important;line-height:1.2!important;white-space:nowrap!important}}

/* Immagini editoriali trattamenti: niente cornici decorative, solo angoli arrotondati e ombra leggera */
.intro-image::before,
.natural-result-image::after {
  content: none;
  display: none;
}

.intro-image img,
.natural-result-image img {
  border-radius: 28px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09);
}

/* =========================================================
   TABLET / MOBILE - rifiniture hero e recensioni (2026-08-10)
   ========================================================= */
/* Su telefono e tablet il CTA Google resta sotto la valutazione,
   perfettamente centrato rispetto alla riga delle recensioni. */
@media (max-width:1180px){
  .rating a.rating-link{
    display:inline-flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:.28rem !important;
    text-align:center !important;
    white-space:normal !important;
  }
  .rating a.rating-link .rating-link-label{
    display:block !important;
    text-align:center !important;
    white-space:normal !important;
  }
  .rating a.rating-link .rating-link-cta{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin-inline:auto !important;
    white-space:nowrap !important;
  }
}

/* Tablet verticale: meno altezza = meno crop orizzontale della foto 4:3.
   Le hero dei trattamenti restano allineate sul lato destro, dove sono
   composti i soggetti, senza modificare Home e Prodotti. */
@media (min-width:769px) and (max-width:1180px) and (orientation:portrait){
  main > section[class$="-hero"]{
    min-height:68svh !important;
    background-position:right center !important;
  }
  main > section[class$="-hero"] [class$="-hero-picture"] img,
  main > section[class$="-hero"] picture[class$="-hero-picture"] img{
    object-position:right center !important;
  }
}

/* =========================================================
   HERO TABLET / MOBILE - rifiniture layout 2026-08-10 v2
   Home e Prodotti sono esclusi: questo foglio è usato dalle
   pagine trattamento standard.
   ========================================================= */

/* CTA hero coerenti: stessa altezza visiva, larghezza guidata dal testo. */
@media (max-width:1180px){
  main > section[class$="-hero"] .hero-buttons{
    display:flex !important;
    flex-wrap:wrap !important;
    width:auto !important;
    max-width:100% !important;
    gap:12px !important;
  }
  main > section[class$="-hero"] .hero-buttons .btn-primary,
  main > section[class$="-hero"] .hero-buttons .btn-secondary{
    width:fit-content !important;
    min-width:220px !important;
    max-width:100% !important;
    min-height:50px !important;
    padding:13px 24px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    font-size:.94rem !important;
    line-height:1.2 !important;
    text-align:center !important;
    white-space:nowrap !important;
    flex:0 0 auto !important;
  }
}

@media (min-width:769px) and (max-width:1024px) and (orientation:portrait){
  main > section[class$="-hero"] .hero-buttons{
    flex-direction:column !important;
    align-items:flex-start !important;
  }
}

@media (max-width:768px){
  main > section[class$="-hero"] .hero-buttons{
    flex-direction:column !important;
    align-items:flex-start !important;
  }
  main > section[class$="-hero"] .hero-buttons .btn-primary,
  main > section[class$="-hero"] .hero-buttons .btn-secondary{
    min-width:210px !important;
    min-height:48px !important;
    padding:12px 20px !important;
    font-size:.84rem !important;
  }
}

/* Le precedenti rifiniture tablet sono state consolidate nella versione finale qui sotto. */
.epilazione-laser-location .laser-location-treatment,
.epilazione-laser-location .laser-location-place{display:inline;}

/* Ricostruzione unghie: schiarisce davvero il lato copy della hero. */
.ricostruzione-hero::before{
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.72) 26%,
    rgba(255,255,255,.38) 46%,
    rgba(255,255,255,.12) 58%,
    rgba(255,255,255,0) 70%
  ) !important;
}


/* =========================================================
   TABLET HERO - rifiniture v3 (2026-08-10)
   Testi piu leggibili e meno spezzati; correzioni portrait
   mirate per Massaggi, Laminazione Coreana ed Epilazione Laser.
   ========================================================= */

/* Tablet verticale: aumento generale della leggibilita senza allargare
   eccessivamente il blocco copy verso il soggetto. */
@media (min-width:769px) and (max-width:1023px) and (orientation:portrait){
  main > section[class$="-hero"] > .container[class$="-hero-content"],
  main > section[class$="-hero"] .container[class$="-hero-content"]{
    max-width:420px !important;
  }
  main > section[class$="-hero"] .hero-subtitle{
    font-size:1.02rem !important;
    line-height:1.35 !important;
    letter-spacing:2.6px !important;
  }
  main > section[class$="-hero"] [class$="-title-top"]{
    font-size:4.25rem !important;
    line-height:.98 !important;
  }
  main > section[class$="-hero"] [class$="-title-bottom"]{
    font-size:5.45rem !important;
    line-height:.88 !important;
  }
  main > section[class$="-hero"] [class$="-location"]{
    font-size:1.52rem !important;
    line-height:1.22 !important;
  }
  main > section[class$="-hero"] [class$="-hero-description"]{
    font-size:1.10rem !important;
    line-height:1.52 !important;
  }
  main > section[class$="-hero"] .rating{
    font-size:.94rem !important;
  }
}

/* Tablet orizzontale: sfrutta il vero spazio disponibile tra copy e soggetto. */
@media (min-width:1024px) and (max-width:1180px) and (orientation:landscape){
  main > section[class$="-hero"] .hero-buttons{
    flex-direction:row;
    align-items:center;
  }
  main > section[class$="-hero"] > .container[class$="-hero-content"],
  main > section[class$="-hero"] .container[class$="-hero-content"]{
    max-width:735px !important;
  }
  main > section[class$="-hero"] .hero-subtitle{
    font-size:1.06rem !important;
    line-height:1.3 !important;
    letter-spacing:2.8px !important;
  }
  main > section[class$="-hero"] [class$="-title-top"]{
    font-size:4.85rem !important;
    line-height:.96 !important;
  }
  main > section[class$="-hero"] [class$="-title-bottom"]{
    font-size:6.05rem !important;
    line-height:.86 !important;
  }
  main > section[class$="-hero"] [class$="-location"]{
    max-width:700px !important;
    font-size:1.72rem !important;
    line-height:1.2 !important;
  }
  main > section[class$="-hero"] [class$="-hero-description"]{
    max-width:680px !important;
    font-size:1.22rem !important;
    line-height:1.46 !important;
    text-wrap:pretty;
  }
  main > section[class$="-hero"] .hero-buttons .btn-primary,
  main > section[class$="-hero"] .hero-buttons .btn-secondary{
    min-height:52px !important;
    min-width:225px !important;
    padding:14px 25px !important;
    font-size:1rem !important;
  }
  main > section[class$="-hero"] .rating{
    font-size:.96rem !important;
  }
}

/* Massaggi portrait: conserva una colonna copy sicura e sposta il soggetto
   verso destra mostrando maggiormente lo spazio libero dell'immagine. */
@media (min-width:769px) and (max-width:1023px) and (orientation:portrait){
  .massaggi-hero .massaggi-hero-picture img{
    object-position:left center !important;
  }
  .massaggi-hero .massaggi-hero-content{
    max-width:350px !important;
    padding-left:20px;
    padding-right:8px;
  }
  .massaggi-hero .massaggi-hero-title{max-width:335px !important;}
  .massaggi-hero .massaggi-title-top{font-size:3.90rem !important;}
  .massaggi-hero .massaggi-title-bottom{font-size:4.95rem !important;}
  .massaggi-hero .massaggi-location{
    max-width:320px !important;
    font-size:1.44rem !important;
    line-height:1.24 !important;
  }
  .massaggi-hero .massaggi-hero-description{
    max-width:315px !important;
    font-size:1.08rem !important;
    line-height:1.52 !important;
  }
}

/* Laminazione coreana portrait: il lato sinistro resta libero per il copy;
   il viso viene volutamente ritagliato un po' sul lato destro. */
@media (min-width:769px) and (max-width:1023px) and (orientation:portrait){
  .laminazione-coreana-hero .laminazione-coreana-hero-picture img{
    object-position:left center !important;
  }
  .laminazione-coreana-hero .laminazione-coreana-hero-content{
    max-width:390px !important;
  }
}

/* Laser portrait: piu spazio vuoto a sinistra, titolo in due righe complessive
   e descrizione volutamente piu stretta per distribuirsi su piu righe. */
@media (min-width:769px) and (max-width:1023px) and (orientation:portrait){
  .epilazione-laser-hero{
    min-height:68svh !important;
  }
  .epilazione-laser-hero .epilazione-laser-hero-picture img{
    object-position:left center !important;
  }
  .epilazione-laser-hero .epilazione-laser-hero-content{
    max-width:335px !important;
  }
  .epilazione-laser-hero .epilazione-laser-hero-title{
    max-width:325px !important;
    flex-direction:row !important;
    align-items:baseline !important;
    flex-wrap:nowrap !important;
    gap:.34rem !important;
    margin-bottom:8px !important;
  }
  .epilazione-laser-hero .epilazione-laser-title-top{
    font-size:3.42rem !important;
    line-height:1 !important;
  }
  .epilazione-laser-hero .epilazione-laser-title-bottom{
    font-size:4.18rem !important;
    line-height:.9 !important;
    margin-top:0 !important;
  }
  .epilazione-laser-hero .epilazione-laser-location{
    margin-top:0 !important;
    font-size:1.50rem !important;
    line-height:1.2 !important;
  }
  .epilazione-laser-location .laser-location-treatment{display:none !important;}
  .epilazione-laser-location .laser-location-place{display:block !important;}
  .epilazione-laser-hero .epilazione-laser-hero-description{
    max-width:300px !important;
    font-size:1.08rem !important;
    line-height:1.50 !important;
  }
}

/* =========================================================
   EPILAZIONE LASER - tablet landscape final fix (2026-08-10)
   Usa la composizione mobile, con soggetti concentrati a destra,
   e limita il copy alla zona libera a sinistra.
   ========================================================= */
@media (min-width:1024px) and (max-width:1180px) and (orientation:landscape){
  .epilazione-laser-hero .epilazione-laser-hero-picture img{
    object-position:center 72% !important;
  }
  .epilazione-laser-hero .epilazione-laser-hero-content{
    max-width:550px !important;
  }
  .epilazione-laser-hero .epilazione-laser-location{
    max-width:530px !important;
  }
  .epilazione-laser-hero .epilazione-laser-hero-description{
    max-width:525px !important;
  }
}