/* Static-restore fixes: re-enable lazy backgrounds + grid that depended on stripped lazy/masonry JS.
   Flatsome hides .bg until its lazyload JS adds .bg-loaded (display/opacity). That JS is removed in
   the static restore, so make backgrounds eager here. Masonry/grid rows need Packery JS to position
   floated cols; fall back to the normal flex grid. */

/* 1) Section / element backgrounds: show immediately (the lazy JS used to do this) */
.bg,
.bg.bg-loaded,
.section-bg,
.section-bg.bg-loaded,
.bg-fill {
  display: block !important;
  opacity: 1 !important;
}
.section-bg.fill,
.bg.fill {
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* 1b) Nested rows/cols must stretch to full width (flex children don't by default).
   Without the stripped JS some nested .row collapsed to shrink-to-content (~90px). */
.col-inner { width: 100% !important; }
.col-inner > .row {
  width: 100% !important;
}

/* 2) Product / content grids: masonry & grid rows rely on Packery JS (stripped). Use flex grid. */
.row.row-masonry,
.row.row-grid {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-flow: row wrap !important;
  flex-flow: row wrap !important;
}
.row.row-masonry > .col,
.row.row-grid > .col {
  float: none !important;
  position: relative !important;
}

/* 3) Lazy <img> safety: never leave restored images invisible */
img.lazy-load-active,
img[data-flatsome-lazy],
.has-hover .image-cover img,
.box-image img {
  opacity: 1 !important;
}

/* 4) Flickity carousels that didn't initialize: let slides wrap and stay visible */
.row.slider:not(.flickity-enabled) {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-flow: row wrap !important;
  flex-flow: row wrap !important;
}
.row.slider:not(.flickity-enabled) > .col {
  position: relative !important;
  left: auto !important;
}

/* 5) Primary buttons: the archive capture stripped Flatsome accent (--fs-color-primary
   is empty), leaving .button.primary as white text on a transparent fill = invisible.
   Restore the solid accent (--primary-color #446084 from theme custom-css) so the
   product/CTA buttons ("View available...", "Browse our mini goats", etc.) are visible. */
a.button.primary:not(.is-outline):not(.is-link),
.button.primary:not(.is-outline):not(.is-link) {
  background-color: var(--primary-color, #446084) !important;
  border-color: var(--primary-color, #446084) !important;
  color: #fff !important;
}
a.button.primary:not(.is-outline):not(.is-link):hover,
.button.primary:not(.is-outline):not(.is-link):hover {
  background-color: #375070 !important;
  border-color: #375070 !important;
  color: #fff !important;
}
