/* vop-r75l-ops
   Operator pass: overlay hero copy, unify card type, shorten Style,
   fill Our approach, equalize table cards, hide empty image bands,
   mobile popup image, exclusive mega-menu, four-collection slider.
   Palette, logo, fonts and the 42/36/24 ladder stay. */

/* 1. Hero copy sits on the image, on the light left wall. */
body.vop-pass-r75l.template-home #main-content #f-slider-hero.vop-hero.f-slider--content-stack .f-slide__wrapper,
body.vop-pass-r75l.template-home #main-content #f-slider-hero.vop-hero .f-slide__wrapper {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding: 40px 48px 36px !important;
  background: linear-gradient(90deg, rgba(246, 241, 232, 0.28) 0%, rgba(246, 241, 232, 0) 46%) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

body.vop-pass-r75l.template-home #main-content #f-slider-hero.vop-hero .f-slide__content {
  position: relative !important;
  width: auto !important;
  max-width: 420px !important;
  margin: 0 !important;
  padding: 18px 20px 16px !important;
  text-align: left !important;
  background: rgba(246, 241, 232, 0.86) !important;
  border-radius: 16px !important;
  pointer-events: auto !important;
}

body.vop-pass-r75l.template-home #main-content #f-slider-hero.vop-hero .f-slide__subtitle,
body.vop-pass-r75l.template-home #main-content #f-slider-hero.vop-hero .f-slide__title,
body.vop-pass-r75l.template-home #main-content #f-slider-hero.vop-hero .f-slide__description {
  color: #2C2622 !important;
  text-align: left !important;
  max-width: none !important;
}

body.vop-pass-r75l.template-home #main-content #f-slider-hero.vop-hero .f-slide__subtitle {
  margin: 0 0 6px !important;
  color: #6E5642 !important;
}

body.vop-pass-r75l.template-home #main-content #f-slider-hero.vop-hero .f-slide__title {
  margin: 0 !important;
  color: #3C332C !important;
}

body.vop-pass-r75l.template-home #main-content #f-slider-hero.vop-hero .f-richtext__button,
body.vop-pass-r75l.template-home #main-content #f-slider-hero.vop-hero .f-slide__button {
  justify-content: flex-start !important;
  margin-top: 14px !important;
}

body.vop-pass-r75l.template-home #main-content #f-slider-hero.vop-hero .f-slide__button .f-button,
body.vop-pass-r75l.template-home #main-content #f-slider-hero.vop-hero .f-slide__button-first {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-width: 168px !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
  background: #2C2622 !important;
  color: #F6F1E8 !important;
  border-color: #2C2622 !important;
}

@media screen and (max-width: 767px) {
  body.vop-pass-r75l.template-home #main-content #f-slider-hero.vop-hero .f-slide__wrapper {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    padding: 16px 16px 18px !important;
    background: linear-gradient(180deg, rgba(246, 241, 232, 0) 48%, rgba(246, 241, 232, 0.35) 100%) !important;
  }

  body.vop-pass-r75l.template-home #main-content #f-slider-hero.vop-hero .f-slide__content {
    width: min(100%, 320px) !important;
    max-width: calc(100% - 8px) !important;
    margin: 0 !important;
    text-align: left !important;
  }

  body.vop-pass-r75l.template-home #main-content #f-slider-hero.vop-hero .f-slide__title {
    max-width: none !important;
    font-size: 32px !important;
    line-height: 1.05 !important;
  }
}

/* 2. Categories, Rooms, Style share one title size and alignment. */
body.vop-pass-r75l.template-home #main-content #f-collection-list-category-index .f-section__heading,
body.vop-pass-r75l.template-home #main-content #f-collection-list-room-entries .f-section__heading,
body.vop-pass-r75l.template-home #main-content #f-collection-list-osa-stories .f-section__heading {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 36px !important;
  line-height: 1.15 !important;
  font-weight: 500 !important;
  color: #3C332C !important;
  text-align: center !important;
  margin-bottom: 8px !important;
}

body.vop-pass-r75l.template-home #main-content #f-collection-list-category-index .f-section__subheading,
body.vop-pass-r75l.template-home #main-content #f-collection-list-room-entries .f-section__subheading,
body.vop-pass-r75l.template-home #main-content #f-collection-list-osa-stories .f-section__subheading {
  display: block !important;
  max-width: 38em !important;
  margin: 0 auto 8px !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: #6E5642 !important;
  text-align: center !important;
}

body.vop-pass-r75l.template-home #main-content #f-collection-list-category-index .f-collection-card__title,
body.vop-pass-r75l.template-home #main-content #f-collection-list-category-index .f-collection-card__title a,
body.vop-pass-r75l.template-home #main-content #f-collection-list-room-entries .f-collection-card__title,
body.vop-pass-r75l.template-home #main-content #f-collection-list-room-entries .f-collection-card__title a,
body.vop-pass-r75l.template-home #main-content #f-collection-list-osa-stories .f-collection-card__title,
body.vop-pass-r75l.template-home #main-content #f-collection-list-osa-stories .f-collection-card__title a,
body.vop-pass-r75l.template-home #main-content .vop-r74-categories .f-collection-card__title,
body.vop-pass-r75l.template-home #main-content .vop-r74-rooms .f-collection-card__title,
body.vop-pass-r75l.template-home #main-content .vop-r74-style .f-collection-card__title,
body.vop-pass-r75l.template-home #main-content .vop-r74-style .f-collection-card__title a,
body.vop-pass-r75l.template-home #main-content .vop-r74-style .f-collection-card__link {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: #2C2622 !important;
  text-align: center !important;
  margin: 12px 0 0 !important;
}

/* 3. Style portraits were 4/5. Square keeps the lamp and shortens the row. */
body.vop-pass-r75l.template-home #main-content #f-collection-list-osa-stories .f-collection-card__image,
body.vop-pass-r75l.template-home #main-content #f-collection-list-osa-stories .f-image,
body.vop-pass-r75l.template-home #main-content #f-collection-list-osa-stories responsive-image,
body.vop-pass-r75l.template-home #main-content .vop-r74-style .f-image,
body.vop-pass-r75l.template-home #main-content .vop-r74-style .f-collection-card__image {
  --aspect-ratio: 1 !important;
  --aspect-ratio-mobile: 1 !important;
  aspect-ratio: 1 / 1 !important;
  max-height: none !important;
  height: auto !important;
}

body.vop-pass-r75l.template-home #main-content #f-collection-list-osa-stories .f-image:before,
body.vop-pass-r75l.template-home #main-content #f-collection-list-osa-stories responsive-image:before,
body.vop-pass-r75l.template-home #main-content .vop-r74-style .f-image:before,
body.vop-pass-r75l.template-home #main-content .vop-r74-style .f-collection-card__image:before {
  padding-top: 100% !important;
}

body.vop-pass-r75l.template-home #main-content #f-collection-list-osa-stories .f-mixed-layout__inner > :nth-child(1) img,
body.vop-pass-r75l.template-home #main-content #f-collection-list-osa-stories .f-mixed-layout__inner > .m\:column:first-child img {
  object-fit: cover !important;
  object-position: 68% 36% !important;
}

/* 4. Our approach: image fills the right side, no cream void. */
@media screen and (min-width: 1024px) {
  body.vop-pass-r75l.template-home #main-content #f-section-house-story.vop-house-story .container {
    width: min(1440px, calc(100% - 64px)) !important;
    max-width: 1440px !important;
  }

  body.vop-pass-r75l.template-home #main-content #f-section-house-story.vop-house-story .f-image-with-text__inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 28px !important;
    width: 100% !important;
  }

  body.vop-pass-r75l.template-home #main-content #f-section-house-story.vop-house-story .f-image-with-text__content {
    flex: 0 0 36% !important;
    width: 36% !important;
    max-width: 36% !important;
    order: 1 !important;
    margin: 0 !important;
  }

  body.vop-pass-r75l.template-home #main-content #f-section-house-story.vop-house-story .f-image-with-text__image,
  body.vop-pass-r75l.template-home #main-content #f-section-house-story.vop-house-story .f-image-with-text__image-first {
    flex: 1 1 64% !important;
    width: 64% !important;
    max-width: none !important;
    order: 2 !important;
    margin: 0 !important;
  }
}

body.vop-pass-r75l.template-home #main-content #f-section-house-story.vop-house-story .f-image,
body.vop-pass-r75l.template-home #main-content #f-section-house-story.vop-house-story responsive-image,
body.vop-pass-r75l.template-home #main-content #f-section-house-story.vop-house-story .f-image-with-text__image-first,
body.vop-pass-r75l.template-home #main-content .vop-r74-brand.vop-house-story .f-image,
body.vop-pass-r75l.template-home #main-content .vop-r74-brand.vop-house-story responsive-image,
body.vop-pass-r75l.template-home #main-content .vop-r74-brand.vop-house-story .f-image-with-text__image-first {
  --aspect-ratio: 1.333333 !important;
  aspect-ratio: 4 / 3 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
}

body.vop-pass-r75l.template-home #main-content #f-section-house-story.vop-house-story .f-image:before,
body.vop-pass-r75l.template-home #main-content #f-section-house-story.vop-house-story responsive-image:before,
body.vop-pass-r75l.template-home #main-content .vop-r74-brand.vop-house-story .f-image:before,
body.vop-pass-r75l.template-home #main-content .vop-r74-brand.vop-house-story responsive-image:before {
  padding-top: 75% !important;
}

/* 5. Table cards share one height. Long titles stay visible, prices stay. */
body.vop-pass-r75l.template-home #main-content #f-section--kitchen-dining-products.vop-r74-table .f-mixed-layout__inner {
  align-items: stretch !important;
}

body.vop-pass-r75l.template-home #main-content #f-section--kitchen-dining-products.vop-r74-table .f-mixed-layout__inner > .m\:column,
body.vop-pass-r75l.template-home #main-content #f-section--kitchen-dining-products.vop-r74-table .f-product-card,
body.vop-pass-r75l.template-home #main-content #f-section--kitchen-dining-products.vop-r74-table .f-product-card__wrapper {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

body.vop-pass-r75l.template-home #main-content #f-section--kitchen-dining-products.vop-r74-table .f-product-card__info {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

body.vop-pass-r75l.template-home #main-content #f-section--kitchen-dining-products.vop-r74-table .f-product-card__title,
body.vop-pass-r75l.template-home #main-content #f-section--kitchen-dining-products.vop-r74-table .f-product-card__title a {
  min-height: 4.65em !important;
  -webkit-line-clamp: 3 !important;
}

body.vop-pass-r75l.template-home #main-content #f-section--kitchen-dining-products.vop-r74-table .f-price,
body.vop-pass-r75l.template-home #main-content #f-section--kitchen-dining-products.vop-r74-table .f-product-card__price {
  margin-top: auto !important;
}

/* 6. Empty rich-text image rows were a disconnected cream band. */
body.vop-pass-r75l .f-rich-text__images:not(:has(img)),
body.vop-pass-r75l .f-rich-text__image:not(:has(img)) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.vop-pass-r75l.template-page #main-content .vop-about-contact,
body.vop-pass-r75l.template-page #main-content .vop-about-principles {
  --section-padding-bottom: 8px !important;
  padding-bottom: 8px !important;
}

body.vop-pass-r75l.template-page #main-content .vop-about-contact .f-section-py,
body.vop-pass-r75l.template-page #main-content .vop-about-principles .f-section-py {
  padding-bottom: 8px !important;
}

/* 7. Mobile subscription popup keeps its image. */
@media screen and (max-width: 767px) {
  body.vop-pass-r75l .vop-popup-section [data-mobile-image="true"] .vop-popup-image,
  body.vop-pass-r75l .vop-popup-section vop-subscription-popup[data-mobile-image="true"] .vop-popup-image {
    display: block !important;
    order: 0 !important;
  }

  body.vop-pass-r75l .vop-popup-section [data-mobile-image="true"] .vop-popup-image-mobile {
    display: block !important;
    height: 210px !important;
    min-height: 210px !important;
  }

  body.vop-pass-r75l .vop-popup-section [data-mobile-image="true"] .vop-popup-image-mobile img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 42% !important;
  }
}

/* 8. Mega menu: only the item under the pointer stays open. */
@media screen and (min-width: 1024px) {
  body.vop-pass-r75l .f-header__menu .f-menu > .f-menu__item > .f-menu__link--main {
    position: relative !important;
    z-index: 30 !important;
  }

  body.vop-pass-r75l .f-header__menu .f-mega-menu {
    z-index: 20 !important;
  }

  body.vop-pass-r75l .f-header__menu:has(.vop-menu-open) .f-menu > .f-menu__item--has-submenu:not(.vop-menu-open):not(:focus-within) > .f-mega-menu {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.vop-pass-r75l .f-header__menu .f-menu > .f-menu__item--has-submenu.vop-menu-open > .f-mega-menu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* 9. About directory: four cards. Mobile uses buttons and a scrollbar. */
body.vop-pass-r75l.template-page #main-content .vop-about-rooms .vop-directory__nav {
  display: none;
}

@media screen and (max-width: 767px) {
  body.vop-pass-r75l.template-page #main-content .vop-about-rooms .vop-directory__nav {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
  }

  body.vop-pass-r75l.template-page #main-content .vop-about-rooms .vop-directory__nav button {
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    border: 1px solid #D9CBBA !important;
    background: #F6F1E8 !important;
    color: #2C2622 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  body.vop-pass-r75l.template-page #main-content .vop-about-rooms .vop-room-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: thin !important;
    scrollbar-color: #6E5642 #E7DCCD !important;
    padding-bottom: 8px !important;
  }

  body.vop-pass-r75l.template-page #main-content .vop-about-rooms .vop-room-card {
    flex: 0 0 86% !important;
    width: 86% !important;
    scroll-snap-align: start !important;
  }

  body.vop-pass-r75l.template-page #main-content .vop-about-rooms .vop-room-card__media {
    aspect-ratio: 1 / 1 !important;
    max-height: 320px !important;
  }
}

@media screen and (min-width: 768px) {
  body.vop-pass-r75l.template-page #main-content .vop-about-rooms .vop-room-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}