/* vop-r75o-ops
   Mobile style row shows the second image without a tap.
   Contact visit image fills its column, no offset plate, no outer color.
   Mobile contact image has no extra frame.
   Empty collection content matches the page.
   Login label is centered.
   Palette, logo, type ladder and the live theme stay unchanged. */

/* 1. Style: phone shows two images at once. No tap-to-reveal scroll. */
@media screen and (max-width: 767px) {
  body.vop-pass-r75o.template-home #main-content #f-collection-list-osa-stories .f-mixed-layout__wrapper,
  body.vop-pass-r75o.template-home #main-content .vop-r74-style .f-mixed-layout__wrapper {
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.vop-pass-r75o.template-home #main-content #f-collection-list-osa-stories .f-mixed-layout__inner,
  body.vop-pass-r75o.template-home #main-content .vop-r74-style .f-mixed-layout__inner {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
    transform: none !important;
  }

  body.vop-pass-r75o.template-home #main-content #f-collection-list-osa-stories .f-mixed-layout__inner > .m\:column,
  body.vop-pass-r75o.template-home #main-content .vop-r74-style .f-mixed-layout__inner > .m\:column,
  body.vop-pass-r75o.template-home #main-content #f-collection-list-osa-stories .f-collection-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

/* 2. Login text sits in the center of the dark button. */
body.vop-pass-r75o .f-menu-drawer .f-signin-button,
body.vop-pass-r75o .f-drawer .f-signin-button,
body.vop-pass-r75o a.f-signin-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
  width: 100% !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* 3. See it in the room: real 2:1 photo, no beige plate, no wide middle gap. */
body.vop-pass-r75o.template-contacts #main-content #f-section-visit-room .f-image-with-text__inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.72fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 28px !important;
  width: 100% !important;
}

body.vop-pass-r75o.template-contacts #main-content #f-section-visit-room .f-image-with-text__image,
body.vop-pass-r75o.template-contacts #main-content #f-section-visit-room .f-image-with-text__content {
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.vop-pass-r75o.template-contacts #main-content #f-section-visit-room f-image-layer,
body.vop-pass-r75o.template-contacts #main-content #f-section-visit-room .f-image-with-text__image-wrapper {
  --offset-top: 0% !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}

body.vop-pass-r75o.template-contacts #main-content #f-section-visit-room .f-image-with-text__image-first,
body.vop-pass-r75o.template-contacts #main-content #f-section-visit-room .f-image-with-text__image-first responsive-image,
body.vop-pass-r75o.template-contacts #main-content #f-section-visit-room .f-image-with-text__image-first .f-image,
body.vop-pass-r75o.template-contacts #main-content #f-section-visit-room responsive-image,
body.vop-pass-r75o.template-contacts #main-content #f-section-visit-room .f-image {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  aspect-ratio: 2 / 1 !important;
  --aspect-ratio: 2 !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

body.vop-pass-r75o.template-contacts #main-content #f-section-visit-room .f-image:before,
body.vop-pass-r75o.template-contacts #main-content #f-section-visit-room responsive-image:before,
body.vop-pass-r75o.template-contacts #main-content #f-section-visit-room .f-image-with-text__image-first:before {
  padding-top: 50% !important;
}

body.vop-pass-r75o.template-contacts #main-content #f-section-visit-room img {
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 16px !important;
  background: transparent !important;
}

@media screen and (max-width: 1023px) {
  body.vop-pass-r75o.template-contacts #main-content #f-section-visit-room .f-image-with-text__inner {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }
}

/* 4. Mobile contact photo: no padded beige frame. Radius stays on the photo. */
@media screen and (max-width: 767px) {
  body.vop-pass-r75o.template-contacts .vop-osa-contact-form .f-contact-2-form__info,
  body.vop-pass-r75o.template-contacts .vop-osa-contact-form .f-info-box,
  body.vop-pass-r75o.template-contacts .vop-osa-contact-form .f-info-box-frid,
  body.vop-pass-r75o.template-contacts .vop-osa-contact-form .f-info-box-left-img,
  body.vop-pass-r75o.template-contacts .vop-osa-contact-form .f-info-box-left-img .f-hover-box__wrapper,
  body.vop-pass-r75o.template-contacts .vop-osa-contact-form .f-info-box-left-img responsive-image,
  body.vop-pass-r75o.template-contacts .vop-osa-contact-form .f-info-box-left-img .f-image {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    max-width: none !important;
    width: 100% !important;
  }

  body.vop-pass-r75o.template-contacts .vop-osa-contact-form .f-info-box-frid {
    margin-top: 8px !important;
  }

  body.vop-pass-r75o.template-contacts .vop-osa-contact-form .f-info-box-left-img,
  body.vop-pass-r75o.template-contacts .vop-osa-contact-form .f-info-box-left-img .f-image,
  body.vop-pass-r75o.template-contacts .vop-osa-contact-form .f-info-box-left-img img {
    border-radius: 12px !important;
    width: 100% !important;
    max-width: none !important;
  }

  body.vop-pass-r75o.template-contacts .vop-osa-contact-form .f-info-box-left-img .f-image,
  body.vop-pass-r75o.template-contacts .vop-osa-contact-form .f-info-box-left-img responsive-image {
    aspect-ratio: 4 / 3 !important;
    --aspect-ratio: 1.333333 !important;
    margin-bottom: 0 !important;
  }

  body.vop-pass-r75o.template-contacts .vop-osa-contact-form .f-info-box-left-img img {
    object-fit: cover !important;
    height: 100% !important;
  }
}

/* 5. Empty collection content uses the page ground, not a white well. */
body.vop-pass-r75o.template-collection.vop-empty-collection,
body.vop-pass-r75o.template-collection.vop-empty-collection #main-content,
body.vop-pass-r75o.template-collection.vop-empty-collection .section_id_main,
body.vop-pass-r75o.template-collection.vop-empty-collection .f-collection,
body.vop-pass-r75o.template-collection.vop-empty-collection .f-collection-content,
body.vop-pass-r75o.template-collection.vop-empty-collection .f-collection-products,
body.vop-pass-r75o.template-collection.vop-empty-collection .f-collection-template,
body.vop-pass-r75o.template-collection.vop-empty-collection .f-toolbar,
body.vop-pass-r75o.template-collection.vop-empty-collection .f-collection-toolbar,
body.vop-pass-r75o.template-collection.vop-empty-collection .f-collection-toolbar--wrapper,
body.vop-pass-r75o.template-collection.vop-empty-collection .f-facets,
body.vop-pass-r75o.template-collection #main-content:not(:has(.f-product-card)),
body.vop-pass-r75o.template-collection #main-content:not(:has(.f-product-card)) .section_id_main,
body.vop-pass-r75o.template-collection #main-content:not(:has(.f-product-card)) .f-gradient,
body.vop-pass-r75o.template-collection #main-content:not(:has(.f-product-card)) .f-color-default {
  --color-background: 246, 241, 232 !important;
  background: #F6F1E8 !important;
  background-color: #F6F1E8 !important;
}

/* 6. Mobile contact/about: no leftover void under the last block. */
@media screen and (max-width: 767px) {
  body.vop-pass-r75o.template-page #main-content .vop-about-contact,
  body.vop-pass-r75o.template-contacts #main-content .f-contact-2-form,
  body.vop-pass-r75o.template-contacts #main-content .section_id_contact-form {
    margin-bottom: 0 !important;
    padding-bottom: 8px !important;
    min-height: 0 !important;
  }

  body.vop-pass-r75o.template-page #main-content,
  body.vop-pass-r75o.template-contacts #main-content {
    min-height: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  body.vop-pass-r75o.template-page .f-footer,
  body.vop-pass-r75o.template-contacts .f-footer {
    margin-top: 0 !important;
  }
}