/* Restore the visible state of captured Payhip sections whose reveal scripts
   are intentionally absent from the local storefront. */
body.cds-local-storefront .cds-wallpaper-faq.is-motion-ready
  :is(.cds-wallpaper-faq__title, .cds-wallpaper-faq__item) {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0ms !important;
}

body.cds-local-storefront .section-wrapper[data-section-key="image-and-text"].animation-enabled
  :is(.image-column-contents, .text-column-contents) {
  opacity: 1 !important;
  transform: none !important;
}

/* The source HTML stores the image-wrapper height measured at capture time.
   Let each actual image set the height at the current viewport instead. */
body.cds-local-storefront .section-wrapper[data-section-key="image-and-text"]
  .image-block .image-wrapper {
  height: auto !important;
}

body.cds-local-storefront .section-wrapper[data-section-key="image-and-text"]
  .image-block .image-wrapper img.section-image {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
}

/* Payhip normally adds .narrow-width with JavaScript. The captured desktop
   class is static here, so restore its image-first phone layout in CSS. */
@media (max-width: 767px) {
  body.cds-local-storefront .section-wrapper[data-section-key="image-and-text"]
    .columns-block .columns-wrapper {
    display: block !important;
  }

  body.cds-local-storefront .section-wrapper[data-section-key="image-and-text"]
    .columns-block .columns-wrapper > :is(.image-column, .text-column) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  body.cds-local-storefront .section-wrapper[data-section-key="image-and-text"]
    .columns-block .columns-wrapper > .text-column {
    margin-top: 10%;
  }
}