/* vop-osa-r62
   Unpublished theme 4825. Osalife page rhythm on Palette A.
   Desktop splits stay side by side. Does not copy Osalife color, copy, products or shipping. */

@media screen and (min-width: 1024px) {
  .vop-osa-hero .f-image-with-text__inner,
  .vop-osa-split .f-image-with-text__inner,
  .vop-osa-about .f-image-with-text__inner,
  .vop-osa-contact-split .f-image-with-text__inner,
  .vop-osa-product .vop-osa-split .f-image-with-text__inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 48px !important;
  }

  .vop-osa-hero .f-image-with-text__image,
  .vop-osa-hero .f-image-with-text__content,
  .vop-osa-split .f-image-with-text__image,
  .vop-osa-split .f-image-with-text__content,
  .vop-osa-about .f-image-with-text__image,
  .vop-osa-about .f-image-with-text__content,
  .vop-osa-contact-split .f-image-with-text__image,
  .vop-osa-contact-split .f-image-with-text__content {
    flex: 0 0 calc(50% - 24px) !important;
    width: calc(50% - 24px) !important;
    max-width: calc(50% - 24px) !important;
    min-width: 0 !important;
  }

  .vop-osa-hero .f-image-with-text__content,
  .vop-osa-split .f-image-with-text__content,
  .vop-osa-about .f-image-with-text__content,
  .vop-osa-contact-split .f-image-with-text__content {
    align-self: center !important;
    text-align: left !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .vop-osa-hero .f-image-with-text__image-first,
  .vop-osa-split .f-image-with-text__image-first,
  .vop-osa-about .f-image-with-text__image-first,
  .vop-osa-contact-split .f-image-with-text__image-first {
    aspect-ratio: 4 / 5 !important;
    max-height: none !important;
    height: auto !important;
    border-radius: 18px !important;
  }

  .vop-osa-hero .f-image-with-text__image-first responsive-image:before,
  .vop-osa-hero .f-image-with-text__image-first .f-image:before,
  .vop-osa-split .f-image-with-text__image-first responsive-image:before,
  .vop-osa-split .f-image-with-text__image-first .f-image:before,
  .vop-osa-about .f-image-with-text__image-first responsive-image:before,
  .vop-osa-about .f-image-with-text__image-first .f-image:before,
  .vop-osa-contact-split .f-image-with-text__image-first responsive-image:before,
  .vop-osa-contact-split .f-image-with-text__image-first .f-image:before {
    padding-top: 125% !important;
  }
}

.vop-osa-hero .f-image-with-text__image-first img {
  object-position: 58% center !important;
}

.vop-osa-about .f-image-with-text__image-first img,
.vop-about-viewpoint .f-image-with-text__image-first img {
  object-position: 18% center !important;
}

.vop-osa-contact-split .f-image-with-text__image-first img,
.vop-osa-split .f-image-with-text__image-first img {
  object-position: center center !important;
}

/* Collection: centered title on the page, no side banner or boxed panel. */
.vop-osa-collection .f-collection-page-header__wrapper {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.vop-osa-collection .vop-cat-visual,
.vop-osa-collection .f-collection-page-header__background,
.vop-osa-collection .f-collection-page-header__image,
.vop-osa-collection .f-image--pc,
.vop-osa-collection .f-image--mobile {
  display: none !important;
}

.vop-osa-collection .f-collection-page-header__inner {
  width: min(760px, 100%) !important;
  margin: 8px auto 4px !important;
  text-align: center !important;
}

.vop-osa-collection-grid {
  padding-top: 8px;
}

/* About directory: image on top, copy under, four across when it fits. */
@media screen and (min-width: 1024px) {
  .vop-osa-about-cards .vop-room-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

.vop-osa-about-cards .vop-room-card,
.vop-osa-about-cards .vop-room-card.is-flip {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 10px !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.vop-osa-about-cards .vop-room-card.is-flip .vop-room-card__media {
  order: 0 !important;
}

.vop-osa-about-cards .vop-room-card__media {
  aspect-ratio: 4 / 5 !important;
  max-height: none !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 16px !important;
}

.vop-osa-about-cards .vop-room-card__copy {
  padding: 0 2px 4px !important;
}

.vop-osa-about-cards .vop-room-card__title {
  font-size: 24px !important;
  color: #3C332C !important;
}

/* Product: gallery left, details right, rounded still. */
@media screen and (min-width: 1024px) {
  .vop-osa-product .f-product-single,
  .vop-osa-product .f-main-product__wrapper,
  .vop-osa-product .f-product {
    align-items: flex-start;
    gap: 36px;
  }
}

.vop-osa-product .f-product-media {
  border-radius: 16px;
  overflow: hidden;
}

.vop-osa-product .f-product-media img {
  border-radius: 16px;
}

/* Contact form card stays under the split, not a second empty band. */
.vop-osa-contact-form {
  padding-top: 8px !important;
}

@media screen and (max-width: 1023px) {
  .vop-osa-hero .f-image-with-text__inner,
  .vop-osa-split .f-image-with-text__inner,
  .vop-osa-about .f-image-with-text__inner,
  .vop-osa-contact-split .f-image-with-text__inner {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }

  .vop-osa-hero .f-image-with-text__image,
  .vop-osa-hero .f-image-with-text__content,
  .vop-osa-split .f-image-with-text__image,
  .vop-osa-split .f-image-with-text__content,
  .vop-osa-about .f-image-with-text__image,
  .vop-osa-about .f-image-with-text__content,
  .vop-osa-contact-split .f-image-with-text__image,
  .vop-osa-contact-split .f-image-with-text__content {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .vop-osa-hero .f-image-with-text__image-first,
  .vop-osa-split .f-image-with-text__image-first,
  .vop-osa-about .f-image-with-text__image-first,
  .vop-osa-contact-split .f-image-with-text__image-first {
    aspect-ratio: 1 / 1 !important;
    max-height: none !important;
  }

  .vop-osa-hero .f-image-with-text__image-first responsive-image:before,
  .vop-osa-hero .f-image-with-text__image-first .f-image:before,
  .vop-osa-split .f-image-with-text__image-first responsive-image:before,
  .vop-osa-split .f-image-with-text__image-first .f-image:before,
  .vop-osa-about .f-image-with-text__image-first responsive-image:before,
  .vop-osa-about .f-image-with-text__image-first .f-image:before,
  .vop-osa-contact-split .f-image-with-text__image-first responsive-image:before,
  .vop-osa-contact-split .f-image-with-text__image-first .f-image:before {
    padding-top: 100% !important;
  }

  .vop-osa-about-cards .vop-room-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  body[data-vop-layout="osa-r61"] .vop-osa-hero .f-richtext__title,
  body[data-vop-layout="osa-r61"] .vop-osa-about .f-richtext__title {
    font-size: 36px !important;
  }
}

@media screen and (max-width: 749px) {
  .vop-osa-about-cards .vop-room-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Collection title sits on the page, not inside a boxed banner. */
.vop-osa-collection,
.vop-osa-collection .f-collection-page-header__wrapper,
.vop-osa-collection .m\:blocks-radius {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}