/*
 * Staging (Classic theme): small layout fixes so the page looks like production. PrestaShop loads this file automatically:
 * themes/classic/assets/css/custom.css. To be replaced by real theme work when the new theme is built.
 */

/* Home page: the two banner images (from the welcome block) sit to the right of the slider, as in production. */
@media (min-width: 768px) {
  #content.page-home { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 1.25rem; }
  #content.page-home > * { grid-column: 1 / -1; }
  #content.page-home > #carousel { grid-column: 1; grid-row: 1; }
  #content.page-home > #custom-text { display: contents; }
  #content.page-home > #custom-text > * { grid-column: 1 / -1; }
  /* The banner column takes its height from the slider (it has no in-flow content itself); each banner fills half of it. */
  #content.page-home > #custom-text > .ibg-top-banners { grid-column: 2; grid-row: 1; position: relative; align-self: stretch; min-height: 8rem; }
  #content.page-home > #custom-text > .ibg-top-banners a { position: absolute; left: 0; right: 0; display: block; overflow: hidden; }
  #content.page-home > #custom-text > .ibg-top-banners a:first-child { top: 0; bottom: calc(50% + 0.625rem); }
  #content.page-home > #custom-text > .ibg-top-banners a:last-child { top: calc(50% + 0.625rem); bottom: 0; }
  #content.page-home > #custom-text > .ibg-top-banners img { display: block; width: 100%; height: 100%; object-fit: cover; }
}

/* Category page: the header image is a 870x217 file but is printed with the 141x180 attributes of the 8.x image type. */
#js-product-list-header .category-cover img { width: 100%; height: 217px; object-fit: cover; object-position: right center; }
#subcategories .subcategory-image img { object-fit: cover; }