/* Di Farracchi — phone catalogue fix
   Applies ONLY to Webflow phone breakpoints (<= 767px).
   Desktop and Tablet keep the original horizontal catalogue. */
@media screen and (max-width: 767px) {
  html,
  body.body-2 {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  /* Remove the tall horizontal-scroll runway on phones. */
  body.body-2 .contact-section.content-wrap.about {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.body-2 .horizontal-div-wrapper-catalogue {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* The fixed desktop backdrop can sit above/below content on iOS.
     It is not needed once the phone layout is vertical. */
  body.body-2 .fixed-background-catalogue {
    display: none !important;
  }

  body.body-2 .overflow-mask-catalogue {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Neutralize Webflow's desktop/tablet horizontal translate on phones. */
  body.body-2 .horizontal-scrollable-section.about,
  body.body-2 .horizontal-content-catalogue {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body.body-2 .horizontal-content-catalogue {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }

  /* Intro block returns to normal document flow. */
  body.body-2 .container-grid-catalogue {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100svh !important;
    transform: none !important;
  }

  /* Each wine is one vertical phone section. */
  body.body-2 .container-info-contact {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* Uniform phone image frame. Keep COVER — never CONTAIN. */
  body.body-2 .catalogue-bg,
  body.body-2 .catalogue-bg.riserva,
  body.body-2 .catalogue-bg.gran,
  body.body-2 .catalogue-bg.buy-now-button-second,
  body.body-2 .catalogue-bg._3,
  body.body-2 .catalogue-bg._4-copy,
  body.body-2 .catalogue-bg._7 {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: clamp(320px, 62svh, 560px) !important;
    min-height: 320px !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    -webkit-transform: none !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center;
    background-attachment: scroll !important;
  }

  /* Product text must expand naturally; no fixed-height clipping. */
  body.body-2 .info-contact,
  body.body-2 .info-contact.riserva1,
  body.body-2 .info-contact._1,
  body.body-2 .info-contact._2,
  body.body-2 .info-contact._4 {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  body.body-2 .heading-contact-info,
  body.body-2 .main-paragraph {
    max-width: 100% !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
  }

  /* Horizontal-scroll spacers create large blank gaps on phones. */
  body.body-2 .space-contact,
  body.body-2 .space-contact._2,
  body.body-2 .space-contact._3,
  body.body-2 .space-contact._4 {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.body-2 .awards,
  body.body-2 .catalogue-icon {
    max-width: 100% !important;
  }
}

/* Give portrait phones a slightly shallower, consistent crop. */
@media screen and (max-width: 479px) {
  body.body-2 .catalogue-bg,
  body.body-2 .catalogue-bg.riserva,
  body.body-2 .catalogue-bg.gran,
  body.body-2 .catalogue-bg.buy-now-button-second,
  body.body-2 .catalogue-bg._3,
  body.body-2 .catalogue-bg._4-copy,
  body.body-2 .catalogue-bg._7 {
    height: clamp(300px, 54svh, 480px) !important;
    min-height: 300px !important;
  }
}

/* v3 — source-specific phone frames for the two Chianti artworks.
   Chianti Classico uses a square artwork; Gran Selezione uses a tall portrait artwork.
   Keep COVER, but match each frame to the source aspect ratio so neither image is cropped. */
@media screen and (max-width: 767px) {
  /* First product: Chianti Classico — square source artwork */
  body.body-2 .catalogue-bg.riserva {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* Third product: Chianti Classico Gran Selezione — tall portrait source artwork (2:3). */
  body.body-2 .catalogue-bg.gran {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 2 / 3 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}

/* On phone landscape, keep the tall Gran Selezione artwork from becoming excessively large
   while preserving its full 2:3 composition. */
@media screen and (min-width: 480px) and (max-width: 767px) {
  body.body-2 .catalogue-bg.gran {
    width: min(72vw, 520px) !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}