/* VIVERE 1.0.83 — Responsive Products mega menu.
 * Scoped to the actual Vahid Kiani Mega Menu and Elementor template #175.
 * No changes to menu data, checkout, Stripe or header behaviour.
 * The desktop panel becomes compact and independently scrollable on short screens.
 */
@media (min-width: 1121px) {
  body .vivere-luxury-header .eswmms-width-full > .eswmms-panel {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow: visible !important;
  }
  body .vivere-luxury-header .eswmms-width-full > .eswmms-panel > .eswmms-panel__inner {
    width: min(1520px, calc(100vw - 44px)) !important;
    max-width: 1520px !important;
    max-height: max(230px, calc(var(--eswmms-available-height, 75dvh) - 14px)) !important;
    padding: clamp(22px, 2.45vw, 36px) clamp(26px, 3.25vw, 54px) !important;
    margin-inline: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    border: 1px solid rgba(176, 141, 87, .22) !important;
    border-top: none !important;
    border-radius: 0 0 25px 25px !important;
    box-shadow: 0 30px 65px rgba(48, 11, 22, .16) !important;
    background: #f8f4ef !important;
  }
  /* Elementor's original 780px + 540px fixed-width combination causes clipping. */
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-wrap {
    width: 100% !important;
    max-width: 1400px !important;
    min-width: 0 !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-main {
    display: flex !important;
    flex-direction: row !important;
    gap: clamp(20px, 2.3vw, 38px) !important;
    align-items: stretch !important;
    margin-top: clamp(15px, 1.9vw, 26px) !important;
    min-height: 0 !important;
    width: 100% !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-links {
    display: flex !important;
    flex: 1 1 58% !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    gap: clamp(12px, 1.8vw, 28px) !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-col {
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 0% !important;
    gap: clamp(9px, .92vw, 13px) !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-col .elementor-widget {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-col .elementor-heading-title,
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-col .elementor-heading-title a {
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-link-item .elementor-heading-title,
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-link-item .elementor-heading-title a {
    font-size: clamp(10px, .77vw, 12px) !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    letter-spacing: .055em !important;
    color: #4a0f1e !important;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: color .16s ease;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-link-item a:hover,
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-link-item a:focus-visible {
    color: #98723a !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-col-title .elementor-heading-title {
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: clamp(17px, 1.3vw, 22px) !important;
    font-weight: 500 !important;
    letter-spacing: -.015em !important;
    line-height: 1.2 !important;
    color: #3a0915 !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-title .elementor-heading-title {
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: clamp(29px, 2.5vw, 39px) !important;
    font-weight: 500 !important;
    line-height: 1.12 !important;
    color: #3a0915 !important;
    letter-spacing: -.035em !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-subtitle {
    margin-top: 5px !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-subtitle p {
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #776366 !important;
    margin: 0 !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-image-card {
    flex: 0 1 39% !important;
    width: 39% !important;
    min-width: 0 !important;
    max-width: 460px !important;
    height: clamp(245px, 23vw, 340px) !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    align-self: center !important;
    border-radius: clamp(16px, 1.3vw, 22px) !important;
    background: #3a0915 !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-image-card .elementor-widget,
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-image-card .elementor-widget-container,
  body .vivere-luxury-header .eswmms-panel .elementor-175 .kx-collection-carousel,
  body .vivere-luxury-header .eswmms-panel .elementor-175 .kx-collection-carousel__card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .kx-collection-carousel__title {
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: clamp(26px, 2.1vw, 36px) !important;
    line-height: 1.12 !important;
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .kx-collection-carousel__description {
    color: #fffaf4 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .kx-collection-carousel__link {
    color: #fff !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.57) !important;
    border-radius: 999px !important;
    padding: 9px 14px !important;
    min-height: 34px !important;
    font-size: 10px !important;
    letter-spacing: .09em !important;
    text-decoration: none !important;
    width: fit-content !important;
    max-width: calc(100% - 15px) !important;
    position: relative;
    z-index: 2;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .kx-collection-carousel__link:hover,
  body .vivere-luxury-header .eswmms-panel .elementor-175 .kx-collection-carousel__link:focus-visible {
    background: rgba(255,255,255,.25) !important;
    color: #fff !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-footer {
    min-height: 0 !important;
    margin-top: clamp(17px, 2vw, 27px) !important;
    padding-top: 14px !important;
    gap: 14px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-help .elementor-heading-title,
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-footer-link .elementor-heading-title {
    font-size: 11px !important;
    line-height: 1.35 !important;
    letter-spacing: .025em !important;
    color: #4a0f1e !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-footer-links {
    flex-wrap: wrap !important;
    gap: clamp(12px, 1.6vw, 24px) !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 a:focus-visible,
  body .vivere-luxury-header .eswmms-panel .elementor-175 button:focus-visible {
    outline: 2px solid #b08d57 !important;
    outline-offset: 3px !important;
  }
}

/* Narrow laptops: change the entire mega panel's proportions, not the site's header. */
@media (min-width: 1121px) and (max-width: 1420px) {
  body .vivere-luxury-header .eswmms-width-full > .eswmms-panel > .eswmms-panel__inner {
    width: calc(100vw - 28px) !important;
    padding: 20px clamp(20px, 2.5vw, 32px) !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-main { gap: 18px !important; }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-links { gap: 12px !important; flex-basis: 62% !important; }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-image-card {
    flex: 0 1 32% !important;
    width: 32% !important;
    height: clamp(226px, 23vw, 294px) !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-link-item .elementor-heading-title,
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-link-item .elementor-heading-title a {
    font-size: 10px !important;
    letter-spacing: .025em !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-col-title .elementor-heading-title {
    font-size: 17px !important;
  }
}

/* Short laptop screens: use internal scrolling without exposing a cut-off footer. */
@media (min-width: 1121px) and (max-height: 850px) {
  body .vivere-luxury-header .eswmms-width-full > .eswmms-panel > .eswmms-panel__inner {
    padding-block: 16px !important;
    max-height: max(180px, calc(var(--eswmms-available-height, 65dvh) - 14px)) !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-main {
    margin-top: 16px !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-col { gap: 9px !important; }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-image-card {
    height: clamp(210px, 27vh, 255px) !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-footer {
    margin-top: 15px !important;
    padding-top: 12px !important;
  }
  body .vivere-luxury-header .eswmms-panel .elementor-175 .fc-title .elementor-heading-title {font-size: 30px !important;}
}

/* Below 1121px the independent VIVERE mobile drawer already replaces desktop navigation.
 * Suppress the hidden desktop mega panel rather than rendering an unusable second menu. */
@media (max-width: 1120px) {
  body .vivere-luxury-header .vivere-header-shell .eswmms-panel { display: none !important; }
  body .site-header.vivere-luxury-header .vmh-rooms summary {
    color: #3a0915 !important;
    border-radius: 0 !important;
  }
  body .site-header.vivere-luxury-header .vmh-room-grid a {
    min-height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(176,141,87,.15);
  }
  body .site-header.vivere-luxury-header .vmh-room-grid a:focus-visible { outline: 2px solid #b08d57 !important; outline-offset: -2px; }
}
@media (prefers-reduced-motion: reduce) {
  body .vivere-luxury-header .eswmms-panel,
  body .vivere-luxury-header .eswmms-panel * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}
