/*
 * Layout while the deferred scripts are still loading.
 *
 * The theme's carousels (Owl on the home page, bxSlider in the product
 * gallery) are plain lists until their plugin runs, and Owl's own stylesheet
 * hides an un-initialised carousel outright. With the scripts deferred the
 * page paints before that, so without these rules the banner would appear
 * from nothing and the gallery would show as a stack of full-size images —
 * both layout shifts. These rules make the pre-init page occupy exactly the
 * space the initialised one will. legacy-boot.js adds `legacy-ready` to
 * <html> in the same task in which it runs the plugins, so nothing
 * in-between is ever painted.
 */

/* Owl: show the carousel, first slide only, at the slide's own height. */
html:not(.legacy-ready) .owl-carousel {
  display: block;
}
html:not(.legacy-ready) .owl-carousel > *:not(:first-child) {
  display: none;
}

/* bxSlider gallery: first slide only, image fitted to the column as bxSlider fits it. */
html:not(.legacy-ready) ul#bxslider > li:not(:first-child),
html:not(.legacy-ready) ul#bxslider2 > li:not(:first-child) {
  display: none;
}
html:not(.legacy-ready) ul#bxslider img,
html:not(.legacy-ready) ul#bxslider2 img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Thumbnail strip: the height bxSlider gives it (--pager-height is set per product). */
html:not(.legacy-ready) #carousel,
html:not(.legacy-ready) #carousel2 {
  overflow: hidden;
  height: var(--pager-height, 660px);
}
@media (max-width: 767px) {
  html:not(.legacy-ready) #carousel,
  html:not(.legacy-ready) #carousel2 {
    height: 68px;
  }
}