.elementor-2491 .elementor-element.elementor-element-8717668{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS *//* ─── RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #fff; overflow-x: hidden; }
img  { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ─── FONT PRINCIPALE SITO ───────────────────────────────────────── 
   Neue Haas Display Black è già caricato dal tema via @font-face,
   non serve reimportarlo. Si usa come font UI/display principale.
   Cormorant Garamond resta per menu, prezzi, body serif.
────────────────────────────────────────────────────────────────── */

/* ─── HUD ────────────────────────────────────────────────────────── */
#es-hud {
  position: fixed;
  bottom: 28px; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 44px;
  z-index: 200;
  pointer-events: none;
  color: #0a0a0a;
  transition: color 0.4s ease;
}
#es-hud.es-hud--lt { color: #ffffff; }
#es-count, #es-scroll {
  font-family: 'Cormorant Garamond', serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.tis-footer {
    display: none;
}

/* ─── WRAPPER + TRACK ────────────────────────────────────────────── */
#es-story {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
#es-track {
  display: flex;
  height: 100vh;
  will-change: transform;
}

/* ─── PANEL BASE ─────────────────────────────────────────────────── */
.es-p {
  position: relative;
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  overflow: hidden;
  background: #ffffff;
  color: #0a0a0a;
}
.es-p--dk {
  background: #0a0a0a;
  color: #ffffff;
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────────────── */
.es-brand {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
}
.es-display {
  font-family: 'Neue Haas Display Black', 'Cormorant Garamond', serif;
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: 0.02em;
}
.es-display--xl { font-size: clamp(52px, 7.5vw, 100px); }
.es-display--lg { font-size: clamp(40px, 5.5vw, 72px); }
.es-display--md { font-size: clamp(28px, 3.5vw, 46px); }

.es-serif {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  line-height: 1.4;
}
.es-serif-i {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
}
.es-tag {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(14px, 1.6vw, 22px);
  line-height: 1.35;
}
.es-sub {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(12px, 1.3vw, 18px);
  letter-spacing: 0.06em;
}
.es-vert {
  position: absolute;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: clamp(60px, 8vw, 110px);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  letter-spacing: 0.02em;
  line-height: 1;
}

/* ─── LAYOUT ─────────────────────────────────────────────────────── */
.es-split {
  display: flex;
  width: 100%;
  height: 100%;
}
.es-col { height: 100%; }
.es-col-40 { width: 40%; }
.es-col-45 { width: 45%; }
.es-col-50 { width: 50%; }
.es-col-55 { width: 55%; }
.es-col-60 { width: 60%; }
.es-col-65 { width: 65%; }
.es-col-35 { width: 35%; }

.es-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 52px;
  height: 100%;
}
.es-content--top  { justify-content: flex-start; padding-top: 80px; }
.es-content--btm  { justify-content: flex-end;   padding-bottom: 70px; }
.es-content--sb   { justify-content: space-between; padding-top: 65px; padding-bottom: 55px; }
.es-content--ctr  { justify-content: center; align-items: center; text-align: center; }

/* ─── PHOTO HELPERS ──────────────────────────────────────────────── */
.es-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100% !important;
  object-fit: cover;
  object-position: center;
}
.es-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.es-overlay--dk  { background: rgba(10,10,10,0.48); }
.es-overlay--l   { background: rgba(10,10,10,0.22); }
.es-above { position: relative; z-index: 2; }

/* ─── MENU ROWS ──────────────────────────────────────────────────── */
.es-list { margin-top: 6px; }
.es-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid rgba(128,128,128,0.15);
  gap: 12px;
}
.es-row-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.04em;
  flex: 1;
  line-height: 1.4;
}
.es-row-price {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}

/* ─── ILLUSTRATION PLACEHOLDER ───────────────────────────────────── */
.es-illus-placeholder {
  background: #f0ede8;
  border: 1.5px dashed #b8b0a6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #8a8078;
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
}
.es-illus-placeholder svg {
  opacity: 0.35;
}

/* ─── GRID / COLLAGE ─────────────────────────────────────────────── */
.es-grid-3v {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  width: 100%;
  height: 100%;
}
.es-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  height: 100%;
  gap: 3px;
}
.es-grid-col {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
}

/* Panel-specific: P07 collage (3 items: 2 foto + partial illus) */
.es-p07-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 60% 40%;
  width: 100%;
  height: 100%;
  gap: 3px;
}
.es-p07-layout .es-cell-full {
  grid-row: 1 / 3;
}

/* Panel-specific: P10 collage */
.es-p10-layout {
  display: grid;
  grid-template-columns: 38% 62%;
  width: 100%;
  height: 100%;
  gap: 3px;
  position: relative;
}

/* Panel-specific: P18 — FIX: 3 colonne (non 3 righe) */
.es-p18-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* ← FIX: era grid-template-rows */
  grid-template-rows: 1fr;
  width: 100%;
  height: 100%;
  gap: 3px;
}

/* ─── P05 TYPOGRAPHIC PANEL ──────────────────────────────────────── */
.es-p05-big {
  position: absolute;
  right: 48px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: 'Neue Haas Display Black', serif;
  font-weight: 300;
  font-size: clamp(36px, 5vw, 68px);
  letter-spacing: 0.04em;
  line-height: 1;
  color: #0a0a0a;
}
.es-p05-body {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(16px, 1.8vw, 24px);
  line-height: 1.7;
  color: #0a0a0a;
  white-space: nowrap;
}

/* ─── SCROLL HINT ────────────────────────────────────────────────── */
.es-scroll-arrow {
  position: absolute;
  bottom: 36px; right: 44px;
  z-index: 10;
  font-family: 'Cormorant Garamond', serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── LOGO CLOSING ───────────────────────────────────────────────── */
.es-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.es-logo-wrap img {
  width: auto;
  height: auto;
  max-width: 260px;
  object-fit: contain;
}

/* ═══════════════════════════════════════════════════════════════════
   ÉSTRO MENU — MOBILE RESPONSIVE PATCH  v5
   Target  : max-width 767px ONLY — zero impatto desktop (> 767px)

   LOGICA ALTEZZE:
   • .es-p base → height:auto, min-height:0, padding:40px 0
   • Panel full-bleed (solo foto) → min-height:100svh, padding:0
   • Panel con split/grid/testo → altezza = somma dei figli + 40px respiro
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── RESET CRITICO ────────────────────────────────────────── */
  #es-story {
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  #es-track {
    flex-direction: column !important;
    height: auto !important;
    transform: none !important;
    overflow: visible !important;
    will-change: auto !important;
  }


  /* ── PANEL BASE ───────────────────────────────────────────── */
  .es-p {
    height: auto !important;
    min-height: 0 !important;
    width: 100vw !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Full-bleed SCURI: sempre viewport height, niente padding */
  .es-p--dk {
    min-height: 100svh !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Full-bleed BIANCHI (P04, P16 — solo <picture> figlia diretta) */
  .es-p:has(> picture > .es-bg):not(:has(.es-split)):not(:has([class*="es-p0"])) {
    min-height: 100svh !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* P02 blank → azzerato */
  #es-track .es-p:nth-child(2) {
    min-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  /* P20 finale → ridotto */
  .es-p--dk:last-child {
    min-height: 0 !important;
    height: clamp(60px, 20vw, 120px) !important;
  }

  /* Panel con padding già gestito internamente */
  .es-p:has(> .es-p05-big),
  .es-p:nth-child(17),
  .es-p:has(> .es-logo-wrap) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }


  /* ── LAYOUT: split → colonna, colonne → full width ────────── */
  .es-split {
    flex-direction: column !important;
    height: auto !important;
  }

  .es-col,
  .es-col-30, .es-col-35, .es-col-40,
  .es-col-45, .es-col-50, .es-col-55,
  .es-col-60, .es-col-65 {
    width: 100% !important;
    height: 65vw !important;
    min-height: 240px !important;
    max-height: 420px !important;
  }

  /* Colonne con solo testo → height auto */
  .es-col:has(> .es-content),
  .es-col.es-content {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .es-content {
    padding: 36px 24px !important;
    height: auto !important;
  }

  .es-content--top { padding-top: 44px !important; }
  .es-content--btm { padding-bottom: 44px !important; }
  .es-content--ctr { align-items: flex-start !important; text-align: left !important; }


  /* ── TIPOGRAFIA ────────────────────────────────────────────── */
  .es-display--xl { font-size: 48px !important; }
  .es-display--lg { font-size: 34px !important; }
  .es-display--md { font-size: 26px !important; }


  /* ── ELEMENTI SOLO-DESKTOP ────────────────────────────────── */
  .es-vert         { display: none !important; }
  #es-hud          { display: none !important; }
  .es-scroll-arrow { display: none !important; }
  .tis-footer      { display: none !important; }


  /* ── FIX GLOBALE: <picture> wrapper WordPress ─────────────── */
  picture:has(> .es-bg) {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }


  /* ── ILLUSTRAZIONI (contain) ──────────────────────────────── */
  .es-col picture:has(> img[style*="contain"]),
  .es-col picture:has(> img[alt="fox"]),
  .es-col picture:has(> img[alt="rabbit"]),
  .es-col picture:has(> img[alt="owl"]),
  .es-col picture:has(> img[alt="cow"]),
  .es-col picture:has(> img[alt="cat"]) {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 65vw !important;
    max-height: 300px !important;
    display: block !important;
  }

  .es-col picture:has(> img[style*="contain"]) > img,
  .es-col picture:has(> img[alt="fox"]) > img,
  .es-col picture:has(> img[alt="rabbit"]) > img,
  .es-col picture:has(> img[alt="owl"]) > img,
  .es-col picture:has(> img[alt="cow"]) > img,
  .es-col picture:has(> img[alt="cat"]) > img {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .es-col > img[style*="contain"],
  .es-split img[alt="fox"],
  .es-split img[alt="rabbit"],
  .es-split img[alt="owl"],
  .es-split img[alt="cow"],
  .es-split img[alt="cat"] {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 65vw !important;
    max-height: 300px !important;
    display: block !important;
    object-fit: contain !important;
  }

  .es-col:has(picture > img[style*="contain"]),
  .es-col:has(picture > img[alt="fox"]),
  .es-col:has(picture > img[alt="rabbit"]),
  .es-col:has(picture > img[alt="owl"]),
  .es-col:has(picture > img[alt="cow"]),
  .es-col:has(picture > img[alt="cat"]),
  .es-col:has(> img[style*="contain"]) {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }


  /* ── P05 — TIPOGRAFICO ────────────────────────────────────── */
  .es-p:has(> .es-p05-big) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 56px 0 !important;
  }

  .es-p05-big {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    writing-mode: horizontal-tb !important;
    text-orientation: initial !important;
    font-size: clamp(26px, 7vw, 40px) !important;
    text-align: center !important;
    width: 100% !important;
    padding: 0 24px 28px !important;
  }

  .es-p05-body {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    white-space: normal !important;
    width: 88% !important;
    text-align: center !important;
    font-size: clamp(15px, 4vw, 20px) !important;
  }


  /* ── P06 — ÉSTRO TOUCHES ──────────────────────────────────── */
  .es-p:nth-child(6) .es-col-50:first-child {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .es-p:nth-child(6) .es-col-50:first-child > .es-content {
    flex: 0 0 auto !important;
    height: auto !important;
  }

  .es-p:nth-child(6) .es-col-50:first-child > picture {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 60vw !important;
    max-height: 280px !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  .es-p:nth-child(6) .es-col-50:first-child > picture > img {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }


  /* ── P07 — COLLAGE ────────────────────────────────────────── */
  .es-p07-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  .es-p07-layout .es-cell-full {
    grid-row: auto !important;
    grid-column: auto !important;
    height: 65vw !important;
    min-height: 220px !important;
  }

  .es-p07-layout > div:not(.es-cell-full) {
    height: 55vw !important;
    min-height: 180px !important;
  }

  .es-p07-layout > img {
    position: relative !important;
    height: 55vw !important;
    max-height: 260px !important;
    object-fit: contain !important;
  }


  /* ── P08 — ÉSTRO OPENS UP ─────────────────────────────────── */
  .es-p:nth-child(8) > div:first-child {
    height: 55vw !important;
    min-height: 220px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .es-p:nth-child(8) > div:last-child {
    height: auto !important;
    padding: 36px 24px !important;
    text-align: center !important;
  }


  /* ── P09 — LISTA PASTA ────────────────────────────────────── */
  .es-p:nth-child(9) .es-col-45 {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .es-p:nth-child(9) .es-col-45 > .es-content {
    flex: 0 0 auto !important;
    height: auto !important;
    padding-bottom: 0 !important;
  }

  .es-p:nth-child(9) .es-col-45 > div:last-child {
    flex-shrink: 0 !important;
    height: 50vw !important;
    min-height: 180px !important;
    position: relative !important;
    overflow: hidden !important;
  }


  /* ── P10 — COLLAGE "TOO MUCH" ─────────────────────────────── */
  .es-p10-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  .es-p10-layout > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }

  .es-p10-layout > div:first-child > div {
    height: 55vw !important;
    min-height: 200px !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 16px 16px 0 !important;
  }

  .es-p10-layout > div:first-child > div picture {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .es-p10-layout > div:last-child {
    height: 65vw !important;
    min-height: 220px !important;
    position: relative !important;
    overflow: hidden !important;
  }


  /* ── P12 — ÉSTRO HITS ─────────────────────────────────────── */
  .es-p:nth-child(12) .es-col-15 {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 24px 12px !important;
  }

  .es-p:nth-child(12) .es-col-15 .es-vert {
    display: block !important;
    position: relative !important;
    writing-mode: horizontal-tb !important;
    text-orientation: initial !important;
    transform: none !important;
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1 !important;
    bottom: auto !important;
    left: auto !important;
    color: #0a0a0a !important;
    letter-spacing: 0.04em !important;
  }

  .es-p:nth-child(12) .es-col:not(.es-col-15) {
    width: 100% !important;
    height: 65vw !important;
    min-height: 260px !important;
    max-height: 400px !important;
  }

  .es-p:nth-child(12) .es-col:not(.es-col-15) > div[style*="bottom"] {
    padding: 16px 24px 20px !important;
  }


  /* ── P13 — LISTA MAIN ─────────────────────────────────────── */
  .es-p:nth-child(13) .es-col-35:first-child {
    height: 55vw !important;
    max-height: 280px !important;
    min-height: 200px !important;
  }

  .es-p:nth-child(13) .es-col-35:nth-child(2) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 28px 24px !important;
  }

  .es-p:nth-child(13) .es-col-35:nth-child(2) .es-list {
    max-width: 100% !important;
    text-align: left !important;
  }

  .es-p:nth-child(13) .es-col-30 {
    height: 65vw !important;
    min-height: 220px !important;
    max-height: 380px !important;
  }


  /* ── P17 — FOTO CON CORNICE ───────────────────────────────── */
  .es-p:nth-child(17) {
    padding: 20px !important;
  }

  .es-p:nth-child(17) .es-content--ctr {
    padding: 0 !important;
    height: auto !important;
    align-items: stretch !important;
  }

  .es-p:nth-child(17) .es-content--ctr > div {
    width: 100% !important;
    height: 75vw !important;
    min-height: 260px !important;
    position: relative !important;
    overflow: hidden !important;
  }


  /* ── P18 — TRE FOTO IN COLONNE ───────────────────────────── */
  .es-p18-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  .es-p18-layout > div {
    height: 65vw !important;
    min-height: 200px !important;
    max-height: 380px !important;
    position: relative !important;
    overflow: hidden !important;
  }


  /* ── P19 — LOGO WRAP ──────────────────────────────────────── */
  .es-logo-wrap {
    height: auto !important;
    min-height: 0 !important;
    padding: 60px 24px !important;
  }

  .es-logo-wrap img {
    max-width: 180px !important;
  }

}
/* ═══════════════════════════════════════════════════════════════════
   END — nessuna regola fuori @media → zero impatto desktop
   ═══════════════════════════════════════════════════════════════════ *//* End custom CSS */