/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/*****************************/
/******* GLOBAL STYLE ********/
/*****************************/

.padding-x-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.padding-y-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.e-con > .e-con-inner {
    min-width: 100% !important;
}

.elementor-icon-wrapper {
    height: 25px;
}

.nav-wrap > .elementor-element {
    width: 100%;
}

.nav-wrap > .elementor-element.elementor-hidden-mobile {
    display: inline-flex;
}

.nav-wrap > .elementor-element.elementor-hidden-desktop {
    display: none;
}

.nav-wrap > .elementor-element .elementor-nav-menu--layout-horizontal {
    width: 100%;
}

.nav-wrap > .elementor-element ul.elementor-nav-menu {
    justify-content: space-between !important;
}

.nav-wrap > .elementor-element ul.elementor-nav-menu:after {
    display: none;
    clear: unset;
    content: unset;
}

.nav-wrap > .elementor-element ul.elementor-nav-menu li {
    flex-grow: 0;
}

.nav-wrap > .elementor-element ul.elementor-nav-menu li a {
    padding: 0;
}

@media screen and (max-width: 880px) {
    .nav-wrap > .elementor-element.elementor-hidden-mobile {
        display: none;
    }
    
    .nav-wrap > .elementor-element.elementor-hidden-desktop {
        display: inline-flex;
    }
}

.banner-text-hp {
    transform: translateY(-50%);
}

/* base: tiene il testo inline per un underline della larghezza del contenuto */
.cta-underline {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.cta-underline a:hover {
	font-style: italic !important;
}
  
/* la linea "nascosta" (scaleX(0)) con origine a destra: così al mouse-out si ritira da destra→sinistra */
.cta-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;             /* regola se serve più vicino al testo */
    width: 100%;
    height: 1px;
    background: #000;
    transform: scaleX(0);
    transform-origin: left;  /* shrink da destra quando si esce */
    transition: transform 400ms ease;
}

/* hover: mostra la linea da sinistra→destra cambiando l’origine a sinistra */
.cta-underline:hover::after,
.cta-underline:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;   /* grow da sinistra quando si entra */
}

/* opzionale: rispetto preferenza di riduzione movimento */
@media (prefers-reduced-motion: reduce) {
    .cta-underline::after { transition: none; }
}

/* base: tiene il testo inline per un underline della larghezza del contenuto */
.cta-underline-yellow {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.cta-underline-yellow a:hover {
	font-style: italic;
}
  
/* la linea "nascosta" (scaleX(0)) con origine a destra: così al mouse-out si ritira da destra→sinistra */
.cta-underline-yellow::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;             /* regola se serve più vicino al testo */
    width: 100%;
    height: 1px;
    background: #ff0;
    transform: scaleX(0);
    transform-origin: left;  /* shrink da destra quando si esce */
    transition: transform 400ms ease;
}

/* hover: mostra la linea da sinistra→destra cambiando l’origine a sinistra */
.cta-underline-yellow:hover::after,
.cta-underline-yellow:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;   /* grow da sinistra quando si entra */
}

/* opzionale: rispetto preferenza di riduzione movimento */
@media (prefers-reduced-motion: reduce) {
    .cta-underline-yellow::after { transition: none; }
}

.get-in-touch {
    transform: scaleX(1);
    transform-origin: left;  /* shrink da destra quando si esce */
    transition: 400ms ease-in-out;
    display: inline-block;
}

.get-in-touch:hover {
    transform: scaleX(1);
    transform-origin: left;
    width: 100%;
    transition: 400ms ease-in-out;
}

.get-in-touch:hover span {
    font-style: italic;
}


.wpml-elementor-ls .wpml-ls-item span {
	font-weight: 100 !important;
	position: relative;
}

.wpml-elementor-ls .wpml-ls-current-language span {
	font-weight: 700 !important;
}

.wpml-elementor-ls .wpml-ls-first-item span::after {
	content: '/';
	position: absolute;
	top: -9px;
	right: -13px;
	font-size: 22px;
	color: currentColor;
	font-weight: 100 !important;
}

/**************************************************
 * HEADER COLOR SWITCH (ACF) + STICKY VARIANT
 * body classes richieste:
 *   - logo-yellow / logo-black              (colore header normale)
 *   - sticky-white / sticky-black           (tema del blocco sticky)
 *
 * JS aggiunge solo .is-sticky sull'header.
 **************************************************/

/* =================================================
   0) COLORI BASE (HEADER NON STICKY)
   header-wrapper-1 controlla tutto l'header "top bar"
==================================================== */

body.logo-black  .header-wrapper-1 { 
    color:#000;
  }
  body.logo-yellow .header-wrapper-1 { 
    color:#ff0;
  }
  
  /* =================================================
     1) LOGO HEADER (widget HTML con SVG inline)
     Contenitore del logo: .elementor-element-d6165a6
  ==================================================== */
  
  /* Eredita il color dal wrapper per default */
  .header-wrapper-1 .elementor-element-d6165a6,
  .header-wrapper-1 .elementor-element-d6165a6 .elementor-widget-html,
  .header-wrapper-1 .elementor-element-d6165a6 .elementor-widget-html svg {
    color: inherit !important;
  }
  
  /* Colore esplicito base (non sticky) in base allo switch ACF principale */
  body.logo-yellow .header-wrapper-1 .elementor-element-d6165a6 .elementor-widget-html svg { 
    color:#ff0 !important; 
  }
  body.logo-black  .header-wrapper-1 .elementor-element-d6165a6 .elementor-widget-html svg { 
    color:#000 !important; 
  }
  
  /* Applica currentColor a tutti i path del logo anche se hanno fill="#ff0" ecc */
  .header-wrapper-1 .elementor-element-d6165a6 .elementor-widget-html svg [fill]:not([fill="none"]),
  .header-wrapper-1 .elementor-element-d6165a6 .elementor-widget-html svg [stroke]:not([stroke="none"]) {
    fill: currentColor !important;
    stroke: currentColor !important;
  }
  
  /* =================================================
     2) SVG GENERALI NELL’HEADER (icone hamburger, X, social, ecc.)
  ==================================================== */
  
  /* Se hanno fill attr */
  .header-wrapper-1 :is(svg, svg *)[fill]:not([fill="none"]) { 
    fill: currentColor !important; 
  }
  
  /* Se hanno stroke attr */
  .header-wrapper-1 :is(svg, svg *)[stroke]:not([stroke="none"]) { 
    stroke: currentColor !important; 
  }
  
  /* fallback generico */
  .header-wrapper-1 svg path,
  .header-wrapper-1 svg polygon,
  .header-wrapper-1 svg circle,
  .header-wrapper-1 svg ellipse,
  .header-wrapper-1 svg rect { 
    fill: currentColor !important; 
  }
  .header-wrapper-1 svg line,
  .header-wrapper-1 svg polyline,
  .header-wrapper-1 svg path[stroke],
  .header-wrapper-1 svg circle[stroke],
  .header-wrapper-1 svg rect[stroke] { 
    stroke: currentColor !important; 
  }
  
  /* Elementor icon widget deve usare il currentColor */
  .header-wrapper-1 .elementor-icon-wrapper .elementor-icon { 
    color: currentColor !important; 
  }
  .header-wrapper-1 .elementor-icon-wrapper .elementor-icon svg * {
    fill: currentColor !important;
    stroke: currentColor !important;
  }
  
  /* =================================================
     3) BUTTON NELL’HEADER (testo / bordo)
     Base (non sticky): seguono il currentColor
  ==================================================== */
  
  .header-wrapper-1 .elementor-button,
  .header-wrapper-1 .elementor-button .elementor-button-text {
    color: currentColor !important;
  }
  .header-wrapper-1 .elementor-button {
    border-color: currentColor !important;
  }
  
  /* =================================================
     4) TRANSIZIONI SOFT
  ==================================================== */
  
  .header-wrapper-1 svg {
    transition: fill .2s ease, stroke .2s ease, color .2s ease;
  }
  
  /* opzionale anti-style inline duri:
  .header-wrapper-1 svg [style*="fill"]   { fill: currentColor !important; }
  .header-wrapper-1 svg [style*="stroke"] { stroke: currentColor !important; }
  */

/* =================================================
   5) STATO STICKY: VARIANTI DA ACF
   body.sticky-white  -> header sticky bianco, contenuti neri
   body.sticky-black  -> header sticky nero, contenuti gialli
   JS aggiunge .is-sticky sull'header
==================================================== */

/* --- 5A. Sticky WHITE ---
   Sfondo header bianco, contenuti NERI.
*/
body.sticky-white header.elementor-location-header.is-sticky {
    background-color:#fff !important;
    color:#000 !important; /* fallback testo/icona */
  }
  
  /* imposta il colore di uscita dentro l'header sticky */
  body.sticky-white header.elementor-location-header.is-sticky .header-wrapper-1,
  body.sticky-white header.elementor-location-header.is-sticky .header-wrapper-2 {
    color:#000 !important;
  }
  
  /* testo bottoni sticky white */
  body.sticky-white header.elementor-location-header.is-sticky .header-wrapper-1 .elementor-button,
  body.sticky-white header.elementor-location-header.is-sticky .header-wrapper-2 .elementor-button,
  body.sticky-white header.elementor-location-header.is-sticky .header-wrapper-1 .elementor-button .elementor-button-text,
  body.sticky-white header.elementor-location-header.is-sticky .header-wrapper-2 .elementor-button .elementor-button-text {
    color:#000 !important;
    border-color:#000 !important;
  }
  
  /* icone hamburger / svg vari sticky white */
  body.sticky-white header.elementor-location-header.is-sticky .header-wrapper-1 .elementor-icon svg *,
  body.sticky-white header.elementor-location-header.is-sticky .header-wrapper-2 .elementor-icon svg * {
    fill:#000 !important;
    stroke:#000 !important;
  }
  
  /* logo sticky white -> nero */
  body.sticky-white header.elementor-location-header.is-sticky .header-wrapper-2 .elementor-widget-html svg {
    color:#000 !important;
  }
  body.sticky-white header.elementor-location-header.is-sticky .header-wrapper-2 .elementor-widget-html svg * {
    fill:#000 !important;
    stroke:#000 !important;
  }
  
  
  /* --- 5B. Sticky BLACK ---
     Sfondo header nero, contenuti GIALLI (#ff0)
  */
  body.sticky-black header.elementor-location-header.is-sticky {
    background-color:#000 !important;
    color:#ff0 !important; /* fallback testo/icona */
  }
  
  /* imposta il colore di uscita dentro l'header sticky */
  body.sticky-black header.elementor-location-header.is-sticky .header-wrapper-1,
  body.sticky-black header.elementor-location-header.is-sticky .header-wrapper-2 {
    color:#ff0 !important;
  }
  
  /* testo bottoni sticky black */
  body.sticky-black header.elementor-location-header.is-sticky .header-wrapper-1 .elementor-button,
  body.sticky-black header.elementor-location-header.is-sticky .header-wrapper-2 .elementor-button,
  body.sticky-black header.elementor-location-header.is-sticky .header-wrapper-1 .elementor-button .elementor-button-text,
  body.sticky-black header.elementor-location-header.is-sticky .header-wrapper-2 .elementor-button .elementor-button-text {
    color:#ff0 !important;
    border-color:#ff0 !important;
  }
  
  /* icone hamburger / svg vari sticky black */
  body.sticky-black header.elementor-location-header.is-sticky .header-wrapper-1 .elementor-icon svg *,
  body.sticky-black header.elementor-location-header.is-sticky .header-wrapper-2 .elementor-icon svg * {
    fill:#ff0 !important;
    stroke:#ff0 !important;
  }
  
  /* logo sticky black -> giallo */
  body.sticky-black header.elementor-location-header.is-sticky .header-wrapper-2 .elementor-widget-html svg {
    color:#ff0 !important;
  }
  body.sticky-black header.elementor-location-header.is-sticky .header-wrapper-2 .elementor-widget-html svg * {
    fill:#ff0 !important;
    stroke:#ff0 !important;
  }

/**************************************************
 * WPML LANGUAGE SWITCHER (EN / IT)
 * – eredita il colore dell’header (currentColor)
 **************************************************/

/* Wrapper WPML nello header: eredita il color */
.header-wrapper-1 .wpml-elementor-ls {
  color: currentColor !important;
}

/* Link EN / IT */
.header-wrapper-1 .wpml-elementor-ls .wpml-ls-link,
.header-wrapper-1 .wpml-elementor-ls .wpml-ls-link:visited {
  color: currentColor !important;
  text-decoration: none;
}

/* Span con il codice lingua (EN / IT) */
.header-wrapper-1 .wpml-elementor-ls .wpml-ls-native {
  color: currentColor !important;
}

/* Stato lingua corrente: niente override di colore WPML */
.header-wrapper-1 .wpml-elementor-ls .wpml-ls-item.wpml-ls-current-language .wpml-ls-link,
.header-wrapper-1 .wpml-elementor-ls .wpml-ls-item.wpml-ls-current-language .wpml-ls-native {
  color: currentColor !important;
}

/* Hover/focus: se vuoi, mantieni lo stesso colore (niente blu WP) */
.header-wrapper-1 .wpml-elementor-ls .wpml-ls-link:hover,
.header-wrapper-1 .wpml-elementor-ls .wpml-ls-link:focus {
  color: currentColor !important;
}

  
/*************************
 About page - Slider Maps
**************************/

/* ====== AREA SLIDER: layout sicuro per Swiper (fade) ====== */
/* Lascia a Swiper la gestione delle larghezze: niente max-width custom sul wrapper */
#about-custom-slider .swiper-wrapper.elementor-slides {
    width: 100% !important;
    max-width: none !important;
  }
  
  /* Background delle slide: ok tenerlo al 100% (Elementor gestisce cover/posizioni) */
  #about-custom-slider .swiper-slide-bg {
    width: 100%;
  }
  
  /* Crea lo spazio a destra per i "bullet" testuali senza alterare il wrapper */
  #about-custom-slider .elementor-slides-wrapper {
    position: relative;
    padding-right: 45%; /* fascia destra riservata alla paginazione custom */
  }
  
  /* ====== PAGINAZIONE A DESTRA (colonna titoli) ====== */
  #about-custom-slider .swiper-pagination-bullets {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 45%;
    height: 100%;
    transform: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    left: auto;
    padding-bottom: 30px;
  }
  
  /* Bullet base */
  #about-custom-slider .swiper-pagination-bullet {
    background: transparent;
  }
  
  /* Spaziatura verticale tra i bullet */
  #about-custom-slider .swiper-pagination-bullet {
    margin-bottom: 40px;
    margin-top: 25px;
    opacity: 1;
  }
  
  /* Tipografia dei titoli nei bullet */
  #about-custom-slider .swiper-pagination-bullet::before {
    font-family: 'IvyPresto Headline', serif;
    font-size: 32px;
    line-height: 40px;
    font-weight: 100;
    color: #fff;
    display: block;
    white-space: nowrap; /* i titoli restano su una riga; puoi rimuovere se preferisci wrapping */
    text-align: left;
    white-space: pre; /* rispetta \a per l'andata a capo */
  }
  
  /* Micro-animazione del bullet attivo */
  #about-custom-slider span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    transition: 300ms;
  }
  #about-custom-slider span.swiper-pagination-bullet.swiper-pagination-bullet-active::before {
    margin-left: 30px;
    color: #ff0;
    font-style: italic;
  }
  
  /* ====== CONTENUTI DINAMICI DEI BULLET (slide 1–4) ====== */
  /* Variabili predefinite (italiano) */
  #about-custom-slider {
    --slide-1-content: "Serena wines 1881";
    --slide-2-content: "Prosecco DOC";
    --slide-3-content: "Area Prosecco DOC Treviso";
    --slide-4-content: "Area Conegliano Valdobbiadene\aProsecco Superiore DOCG";
  }
  
  /* Variabili quando il sito è in lingua EN */
  html[lang="en-US"] #about-custom-slider {
    --slide-1-content: "Serena wines 1881";
    --slide-2-content: "Prosecco DOC";
    --slide-3-content: "Area Prosecco DOC Treviso";
	--slide-4-content: "Area Conegliano Valdobbiadene\aProsecco Superiore DOCG";
  }
  
  /* Mapping variabili → bullet */
  #about-custom-slider .swiper-pagination-bullet:first-child::before {
    content: var(--slide-1-content);
  }
  #about-custom-slider .swiper-pagination-bullet:nth-child(2)::before {
    content: var(--slide-2-content);
  }
  #about-custom-slider .swiper-pagination-bullet:nth-child(3)::before {
    content: var(--slide-3-content);
  }
  #about-custom-slider .swiper-pagination-bullet:nth-child(4)::before {
    content: var(--slide-4-content);
  }
  
  /* ====== FIX “ghosting” in modalità fade ====== */
  /* In fade, forza l'opacity delle non-attive per evitare che traspaiano */
  #about-custom-slider.swiper-fade .swiper-slide {
    opacity: 0 !important;
    pointer-events: none;
  }
  #about-custom-slider.swiper-fade .swiper-slide.swiper-slide-active {
    opacity: 1 !important;
    pointer-events: auto;
  }
  
  /* ====== RESPONSIVE ====== */

  @media (max-width: 1200px) {
    #about-custom-slider .swiper-pagination-bullet::before {
        font-size: 30px;
        line-height: 40px;
    }
  }

  @media (max-width: 1024px) {
    /* Rimuovi la colonna destra: i bullet scendono sotto */
    #about-custom-slider .elementor-slides-wrapper {
      padding-right: 0;
    }
  
    #about-custom-slider .swiper-pagination-bullets {
      position: static;
      width: 100%;
      height: auto;
	  min-height: 220px;
      left: 0;
      top: auto;
      bottom: -150px; /* come nel tuo CSS originale */
      transform: none;
      padding-bottom: 0;
      flex-direction: row; /* opzionale: metti i bullet in riga su mobile */
      flex-wrap: wrap;
      gap: 20px; /* opzionale: spaziatura tra i bullet su mobile */
      display: block;
    }

    #about-custom-slider .swiper-pagination-bullet {
        display: block;
    }

        /* Tipografia dei titoli nei bullet */
    #about-custom-slider .swiper-pagination-bullet::before {
        font-size: 24px;
        line-height: 36px;
    }
}

/* ---------- Tipografia & base ---------- */
.cf7-two-col,
.cf7-two-col a{
  font-family:"Messina Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-size:16px;
  line-height:28px;
  color:#000;
  text-decoration:none;
}

/* Utility: nascondi visivamente ma mantieni accessibile */
.cf7-two-col .sr-only{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(1px,1px,1px,1px) !important;
  white-space:nowrap !important; border:0 !important;
}

/* ---------- Layout a griglia ---------- */
.cf7-two-col .grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:24px;
  margin:0 0 16px 0;
}
.cf7-two-col .col{ display:block; }
.cf7-two-col .span-2{ grid-column:1 / -1; } /* Messaggio su due colonne */

/* ---------- Campi (stile “sottolineato”) ---------- */
.cf7-two-col .input-underline,
.cf7-two-col textarea.input-underline{
  width:100%;
  border:0;
  border-bottom:1px solid #9da3a8;
  padding:6px 0 10px;
  background:transparent;
  outline: none;
  color:#000;
  border-radius: 0;
}

.cf7-two-col fieldset {
    border:0; margin:0; padding:0;
}

/* Placeholder neri (compat) */
.cf7-two-col ::placeholder{ color:#000; opacity:1; }
.cf7-two-col :-ms-input-placeholder{ color:#000; }
.cf7-two-col ::-ms-input-placeholder{ color:#000; }

/* Focus accessibile: oltre al cambio bordo, aggiungo un outline visibile */
.cf7-two-col .input-underline:focus,
.cf7-two-col textarea.input-underline:focus{
  border-bottom-color:#000;
  outline:2px dotted #000;
  outline-offset:2px;
}

/* Divider, privacy e link */
.cf7-two-col .divider{
  border:0; border-top:1px solid #9da3a8;
  margin:18px 0 16px;
}
.cf7-two-col .privacy{
  display:flex; align-items:flex-start; gap:10px;
  margin:0 0 24px 0;
}
.cf7-two-col .privacy a{text-decoration:underline;}
.cf7-two-col .privacy a:focus{outline:2px dotted #000; outline-offset:2px;}

/* ---------- Bottone ---------- */
.cf7-two-col .actions{ 
    margin-top:6px; 
}

.cf7-two-col .btn-black{
  background: #000; 
  color: #000 !important;
  border: 1px solid #000 !important;
  padding: 10px 120px 10px 120px !important;
  cursor: pointer;
  transition: .2s ease;
  font-weight: 700 !important;
}

.cf7-two-col .btn-black:hover{
    background:#ff0; 
    border: 1px solid #fff !important;
    transition: .2s ease;
}

.cf7-two-col br {
    display: none;
}

.cf7-two-col .btn-black:hover{ opacity:.9; }
.cf7-two-col .btn-black:focus{ outline:2px dotted #000; outline-offset:2px; }

/* Riduci motion per chi lo preferisce */
@media (prefers-reduced-motion: reduce){
  .cf7-two-col .btn-black{ transition:none; }
}

/* ---------- Breakpoint: sotto 880px una colonna ---------- */
@media (max-width:880px){
  .cf7-two-col .grid{ grid-template-columns:1fr; }
  .cf7-two-col .span-2{ grid-column:auto; }
}

.wpcf7-acceptance .wpcf7-list-item {
    margin-left: 0;
}

.wpcf7-acceptance .wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* === CF7 Acceptance: checkbox animato e accessibile === */
.chk-anim { --chk-size: 1.3rem; /* ≈20px */ }

/* Label wrapper */
.chk-anim .wpcf7-list-item > label{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Input reale: invisibile ma focusabile e cliccabile nell'area del box */
.chk-anim input[type="checkbox"]{
  position: absolute;
  inline-size: var(--chk-size);
  block-size: var(--chk-size);
  inset-inline-start: 0;
  inset-block-start: .1rem;
  margin: 0;
  opacity: 0;
  border-radius: 0;
}

/* Testo etichetta: spazio per il box disegnato via pseudo-elementi */
.chk-anim .wpcf7-list-item-label{
  position: relative;
  padding-inline-start: calc(var(--chk-size) + .5rem);
  line-height: 1.4;
}

/* BOX (stato base) */
.chk-anim .wpcf7-list-item-label::before{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .1rem;
  inline-size: var(--chk-size);
  block-size: var(--chk-size);
  box-sizing: border-box;
  border: 1px solid currentColor;
  background: transparent;
  transition:
    transform .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

/* SEGNO DI SPUNTA (disegnato con bordi) */
.chk-anim .wpcf7-list-item-label::after{
  content: "";
  position: absolute;
  margin: -1px 0px 3px 4px;
  inset-inline-start: calc(var(--chk-size) * 0.22);
  inset-block-start:  calc(var(--chk-size) * 0.55);
  inline-size:        calc(var(--chk-size) * 0.6);
  block-size:         calc(var(--chk-size) * 0.35);
  border: 2px solid transparent;
  border-inline-start-color: #000;
  border-block-end-color: #000;
  transform: rotate(-45deg) scale(0);
  transform-origin: left bottom;
  opacity: 0;
  transition:
    transform .22s cubic-bezier(.2,.7,.2,1.2),
    opacity .22s ease;
}

/* :HOVER (micro feedback) */
.chk-anim .wpcf7-list-item > label:hover .wpcf7-list-item-label::before{
  transform: scale(1.03);
}

/* :FOCUS (anello ben visibile sul box) */
.chk-anim input[type="checkbox"]:focus-visible + .wpcf7-list-item-label::before{
  box-shadow: 0 0 0 3px currentColor;
  outline: 0; /* evitiamo doppio focus ring */
}

/* :CHECKED (riempie il box e mostra il tick) */
.chk-anim input[type="checkbox"]:checked + .wpcf7-list-item-label::before{
  background: #ff0;
  border-color: currentColor;
  transform: scale(0.95); /* effetto “tap” */
}
.chk-anim input[type="checkbox"]:checked + .wpcf7-list-item-label::after{
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}

/* :DISABLED (stile attenuato e disattiva pointer) */
.chk-anim input[type="checkbox"][disabled] + .wpcf7-list-item-label{
  opacity: .55;
  cursor: not-allowed;
}
.chk-anim input[type="checkbox"][disabled] + .wpcf7-list-item-label::before{
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 10%, transparent);
}


.cocktail-card-text-content {
    visibility: hidden;
    opacity: 0;
    transition: 300ms ease;
}

.cocktail-card-wrapper:hover .cocktail-card-text-content {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 1024px) {
    .cocktail-card-text-content {
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Tabella ingredienti cocktail */
.cocktail-ingredienti-table {
	width: 100%;
	max-width: 100%;
	font-family: "Messina Sans", "Messina Sans Regular", sans-serif;
	font-size: 18px;
	line-height: 1.4;
	color: #ffffff;
}

.cocktail-ingredienti-table .cocktail-ingrediente-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	border-top: 1px solid #ffffff;
    column-gap: 30px;
	/* nessun bordo laterale */
}

.cocktail-ingredienti-table .cocktail-ingrediente-row:last-child {
	border-bottom: 1px solid #ffffff; /* chiudiamo visivamente l'ultima riga */
}

.cocktail-ingredienti-table .cocktail-ingrediente-col {
	padding: 8px 0;
}

.cocktail-ingredienti-table .cocktail-ingrediente-col.ingrediente {
	flex: 1 1 auto;
	text-align: left;
	/* l'ingrediente può andare a capo su più linee */
	word-break: break-word;
}

.cocktail-ingredienti-table .cocktail-ingrediente-col.dose {
	flex: 0 0 auto;
	text-align: right;
	padding-left: 12px;
	white-space: nowrap;
	/* così "20 ml" rimane su una riga se possibile */
	color: #ffffff;
}

/* opzionale: su schermi molto piccoli,
   permetti alla dose di andare a capo se troppo lunga */
@media (max-width: 767px) {
	.cocktail-ingredienti-table .cocktail-ingrediente-col.dose {
		white-space: normal;
	}

    .cocktail-ingredienti-table {
        font-size: 16px;
	    line-height: 1.2;
    }
}

.vini-carousel .elementor-swiper-button svg * {
    transition: stroke 300ms;
}

.vini-carousel .elementor-swiper-button:hover svg * {
    stroke: #ffff00 !important;
    fill: none !important;
}

.vini-hover {
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
}

.vini-hover:hover {
    opacity: 1;
}

.vini-hover-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}

.vini-hover-wrap:hover ~ .elementor-element.e-parent .vini-hover {
    opacity: 1;
    pointer-events: auto;
}


@media (max-width: 1200px) {
    .vini-hover {
        opacity: 1 !important;
    }
}

/* Controllo età */
.age-gate__buttons .age-gate__submit--no,
.age-gate__buttons .age-gate__submit--yes {
	padding: 10px 30px;
}

.age-gate {
	padding: 40px 60px 30px;
}

.home-vini-section a {
	font-family: 'IvyPresto Headline', serif !important;
    font-size: 32px;
    line-height: 45px;
    font-weight: 100 !important;
	font-style: normal;
}

.home-vini-section a:hover {
	font-style: oblique;
	cursor: pointer;
}


.cocktail-card-wrapper-special:hover .cocktail-title-content {
    opacity: 1;
    visibility: visible;
}

.cocktail-card-wrapper {
    display: flex;
}

@media (max-width: 767px) {
	.header-logo svg {
    width: 150px !important;
    height: auto;
}
}
/*

/* =========================================================
   LOOP 694 (card standard): rapporto 1:1 SEMPRE
   ========================================================= */
.elementor-694 .cocktail-card-wrapper {
  position: relative;
  display: flex;              /* stack: bg / contenuti / CTA */
	flex-direction: column;
	justify-content: space-between;
  aspect-ratio: 1 / 1;
  overflow: hidden;
	

  /* Annulla altezze fisse di Elementor */
  --min-height: 0 !important;
  min-height: 0 !important;
  height: auto !important;

  /* Background dinamico del container */
  background-size: cover;
  background-position: center;
}

/* Layering contenuti e CTA (cliccabile) */
.elementor-694 .cocktail-card-text-content {
  height: 70%;
  z-index: 1;
  pointer-events: none; /* non blocca i click sulla CTA */
}
.elementor-694 .cocktail-card-text-content * {
  pointer-events: none;
}
.elementor-694 .cocktail-card-cta {
  z-index: 2;
  pointer-events: none;
	align-items: end;
}
.elementor-694 .cocktail-card-cta a,
.elementor-694 .cocktail-card-cta .elementor-widget-button,
.elementor-694 .cocktail-card-cta .elementor-button {
  pointer-events: auto; /* CTA cliccabile */
}

/* Pulizia extra contro regole più specifiche del template 694 */
.elementor-694 .elementor-element.elementor-element-7375bb9 {
  --min-height: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* Fallback per browser senza aspect-ratio (solo 694) */
@supports not (aspect-ratio: 1 / 1) {
  .elementor-694 .cocktail-card-wrapper {
    position: relative;
  }
  .elementor-694 .cocktail-card-wrapper::before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 */
  }
  .elementor-694 .cocktail-card-wrapper > * {
    position: absolute;
    inset: 0;
  }
}


/* =========================================================
   TEMPLATE SPECIALE 1388: rapporto 1:1 SOLO sotto 1024px
   (sopra 1024px resta invariato)
   ========================================================= */
@media (max-width: 1024px) {
	.grid-loop-cocktails-wrapper {
		display: block;
	}
	
  .elementor-1388 .cocktail-card-wrapper-special {
    position: relative;
    display: grid;          /* stack: bg / contenuti / CTA */
    aspect-ratio: 1 / 1;
    overflow: hidden;

    /* Annulla min-height fissi del template speciale */
    --min-height: 0 !important;
    min-height: 0 !important;
    height: auto !important;

    /* Background del container speciale */
    background-size: cover;
    background-position: center;
  }

  /* Layering contenuti e CTA (cliccabile) */
  .elementor-1388 .cocktail-card-wrapper-special .cocktail-card-text-content {
    grid-area: 1 / 1;
    z-index: 1;
    pointer-events: none;
  }
  .elementor-1388 .cocktail-card-wrapper-special .cocktail-card-cta {
    z-index: 2;
    pointer-events: none;
	  align-items: end;
  }
  .elementor-1388 .cocktail-card-wrapper-special .cocktail-card-cta a,
  .elementor-1388 .cocktail-card-wrapper-special .cocktail-card-cta .elementor-widget-button,
  .elementor-1388 .cocktail-card-wrapper-special .cocktail-card-cta .elementor-button {
    pointer-events: auto;
  }

  /* Fallback per browser senza aspect-ratio (solo special <=1024px) */
  @supports not (aspect-ratio: 1 / 1) {
    .elementor-1388 .cocktail-card-wrapper-special::before {
      content: "";
      display: block;
      padding-top: 100%; /* 1:1 */
    }
    .elementor-1388 .cocktail-card-wrapper-special > * {
      position: absolute;
      inset: 0;
    }
  }
}

.cocktail-title-content {
	opacity: 0;
	visibility: hidden;
	transition: 300ms;
}

@media (max-width: 1024px) {
	.cocktail-title-content {
		opacity: 1;
		visibility: visible;
	}
}

.elementor-694 .elementor-button-text {
  font-size: clamp(24px, 1.6667vw, 32px);
  line-height: 1.2;
}

.cocktail-card-button-cta .elementor-button-link {
	padding: 0 !important;
}

.cocktail-title-120 h2 {
    font-size: clamp(48px, 6.25vw, 120px) !important;
}

.cocktail-title-73 h2 {
    font-size: clamp(48px, 3.80vw, 73px) !important;
}

.cocktail-card-button-cta:before {
    content: '';
    height: 1px;
    width: 40%;
    background-color: #ff0;
    position: absolute;
    top: 65%;
    right: -50%;
}

/* Colore del logo se usi fill="currentColor" */
.header-logo { color: #000; } /* o il colore che vuoi per il logo */

/* SVG del logo: niente bordi/filtri, niente transizioni su fill/stroke */
.header-logo svg,
.header-logo svg * {
  stroke: none !important;
  filter: none !important;
  transition: none !important;     /* evita che il tema animi fill/stroke */
}

/* Rendering pulito e dimensioni stabili */
.header-logo svg {
  display: block;
  height: 65px;       /* o quello che vuoi; width:auto mantiene il ratio */
  width: auto;
  shape-rendering: geometricPrecision;
}

/****** LOGO SVG – FIX COMPLETO ******/
/* 1) Colore del logo se l'SVG usa fill="currentColor" */
.header-logo { 
  color: #000; /* ← cambia qui il colore del logo se serve */
}

/* 2) Rendering pulito e dimensioni stabili del logo */
.header-logo svg {
  display: block;
  height: 65px;     /* altezza desiderata del logo */
  width: auto;      /* mantiene il rapporto dal viewBox */
  shape-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

/* 3) Niente bordi/ombre/transizioni ereditate (solo sul logo) */
.header-logo svg,
.header-logo svg * {
  stroke: none !important;       /* elimina il bordo che lo fa sembrare “bold” */
  filter: none !important;       /* niente drop-shadow/filtri del tema */
  transition: none !important;   /* evita animazioni su fill/stroke */
}

/* 4) (facoltativo ma consigliato) 
   Se il tema anima le icone, assicura che il logo non venga incluso */
header.elementor-location-header .elementor-widget-html svg {
  transition: transform 200ms ease !important; /* solo scaling del logo in sticky */
}

/* 5) Responsive: riduci il logo sotto 880px */
@media (max-width: 880px) {
  .header-logo svg { 
    height: 40px !important;
    width: auto !important;
  }
}

.about-scaled-carousel .e-con-inner {
    overflow-x: hidden;
}

.wpml-ls-legacy-list-horizontal {
	padding: 0 !important;
	border: none;
}

.wpml-ls-legacy-list-horizontal li:first-child a {
	padding: 0;
	padding-right: 10px;
}

.wpml-ls-legacy-list-horizontal li:last-child a {
	padding: 0;
	padding-left: 10px;
}