/*
 * CLS Fixer CSS
 *
 * This stylesheet reserves space for images and other dynamic content on the
 * site to reduce cumulative layout shifts during page load and interaction.
 * All selectors are scoped to existing DOM structures on mojawoda.com and
 * PrestaShop default themes. Removing this module will revert all
 * styling automatically.
 */

/* Ensure product thumbnails maintain a consistent aspect ratio. The PrestaShop
   home_default image type is typically square (e.g. 250×250). Setting
   `aspect-ratio: 1 / 1` reserves space before the image loads. */
.thumbnail.product-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

/* Reserve space for category icons in the advanced menu. These SVGs are
   loaded lazily and can cause minor shifts when they first appear. */
/*
   Icons in the advanced top menu should reserve space but also align
   vertically with the associated label. Setting `vertical-align: middle`
   ensures the icon sits on the same baseline as the text. A small right
   margin keeps consistent spacing. The inline‑block display preserves
   their inline context.
*/
.adtm_menu_icon.img-responsive,
.adtm_menu_icon.img-fluid {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem;
}

/*
 * Align icons and labels inside the advanced top menu. The menu markup wraps
 * each icon and its label in a <span class="advtm_menu_span …"> element.
 * Turning that span into a flex container and centering its items
 * vertically ensures the icon and text line up neatly across the menu.
 */
.advtm_menu_span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Reserve space for the Google reviews avatars. Without explicit dimensions
   they briefly push neighbouring content when loaded. */
.mw-google-reviews-api__avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

/* Prevent shift when sticky menu or cart appears by reserving height. */
.stickymenu,
.stickycart {
  min-height: 60px;
}

/* Optimise font loading: use font-display swap for Poppins to avoid
   invisible text (FOIT) and reduce CLS. This is backed up by a preload link
   injected via the module. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfedw.woff2') format('woff2');
  font-display: swap;
}