/*
 * Promo tiles in category product grids.
 *
 * Sizing mechanism (all widths): the image NEVER drives the tile height. The tile is
 * position:relative/overflow:hidden; picture and link are absolutely positioned over the whole tile
 * and the img covers it (object-fit: cover). The tile height comes from:
 *  - views/js/front.js: inline height = offsetHeight of the nearest product card (previous, else next),
 *    re-synced on load, resize, product image loads and prestashop 'updatedProductList';
 *  - no-JS fallback: grid row stretch, min-height 200px, and aspect-ratio 204/400 (measured card at
 *    1920px) on multi-column layouts where supported, so a lone tile on the last row never collapses.
 *
 * Two distinct breakpoints:
 *  - IMAGE breakpoint 767px (module constant MOBILE_BREAKPOINT, <source media> in tile.tpl):
 *    <= 767px banner image, >= 768px desktop image.
 *  - LAYOUT breakpoint 991px (theme): the grid becomes a single column of wide horizontal cards;
 *    the tile is a banner with square corners there (radius 0); 5px radius above, like the card.
 *
 * Recommended images: Desktop 520x860 px; mobile 1000x400 px (banner, ratio ~2:1 to 2.8:1).
 * Important content centered: the image is cropped (object-fit: cover).
 */
.phyto-categorytile {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  border-radius: 5px;
  /* Same column width as the product cells: never let the tile widen its grid track. */
  min-width: 0;
  box-sizing: border-box;
  margin-top: 0;
  margin-bottom: 0;
}
/* Height set exactly by front.js: min-height / aspect-ratio are no-JS fallbacks only (min-height beats height). */
.phyto-categorytile.is-synced {
  min-height: 0;
  aspect-ratio: auto;
}
.phyto-categorytile picture,
.phyto-categorytile__link {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
}
.phyto-categorytile picture img.phyto-categorytile__img {
  /* 0,2,2: beats the theme's `img` and creativeelements' `.elementor img {height:auto; max-width:100%; border-radius:0}` */
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  object-fit: cover;
  border-radius: 5px;
}
@supports (aspect-ratio: 1 / 1) {
  @media (min-width: 992px) {
    /* Explicit stretch: with aspect-ratio, align-self:normal would behave as start in a grid. */
    .phyto-categorytile:not(.is-synced) {
      align-self: stretch;
      aspect-ratio: 204 / 400;
    }
  }
}
@media (max-width: 991px) {
  .phyto-categorytile,
  .phyto-categorytile picture img.phyto-categorytile__img {
    border-radius: 0;
  }
}