/* ================================================================
   Flatsome UX-blocks Between Products – Frontend Styles
   Makes injected UX-blocks fill the same height as product cards.
   Author: Trender.nl
   ================================================================ */

/*
 * Flatsome's .products grid is a flex container with align-items: stretch.
 * Product cards fill the full row height automatically.
 * Our injected block needs the same flex-stretch treatment so its
 * content expands to match neighbouring products at every breakpoint.
 */

/* 1. The banner item itself: flex column so inner content can stretch */
.fub-uxblock {
  display: flex !important;
  flex-direction: column;
}

/* 2. Flatsome's .col-inner — make it fill the parent height */
.fub-uxblock > .col-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
}

/* 3. The direct UX Builder child inside col-inner (usually a div.is-root) */
.fub-uxblock > .col-inner > * {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* 4. Flatsome section/row wrappers inside the block */
.fub-uxblock .section,
.fub-uxblock .row,
.fub-uxblock .col {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.fub-uxblock .section-content,
.fub-uxblock .section-inner,
.fub-uxblock .row-inner,
.fub-uxblock .col-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* 5. Images and background covers fill the available area */
.fub-uxblock .col-inner img,
.fub-uxblock .section-bg,
.fub-uxblock .bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}