/*! Roboto (latin + latin-ext) self-hosted - replaces the render-blocking
    fonts.googleapis.com request. font-display:optional preserved. */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display:optional;
  src: url('../fonts/roboto/roboto-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display:optional;
  src: url('../fonts/roboto/roboto-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display:optional;
  src: url('../fonts/roboto/roboto-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display:optional;
  src: url('../fonts/roboto/roboto-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display:optional;
  src: url('../fonts/roboto/roboto-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display:optional;
  src: url('../fonts/roboto/roboto-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display:optional;
  src: url('../fonts/roboto/roboto-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display:optional;
  src: url('../fonts/roboto/roboto-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------
   Layout stability (CLS) — desktop main navigation.
   The desktop mega-menu is server-rendered with short (26px) top-level items;
   when the jQuery UI menu widget initialises (late), each item grows to its
   real 58px height and the whole nav strip to 68px, shoving .belowHeader and
   <main> down. Measured (CDP layout-shift attribution) as a ~0.44 shift — the
   homepage's dominant CLS, and desktop-only (mobile uses the off-canvas menu,
   which is why mobile CLS was already fine).
   Reserving the final heights up-front (this file is render-blocking) makes the
   pre-init and post-init layouts identical, so the widget init shifts nothing.
   .nav-sections is safe on mobile: there it is position:fixed; height:100%, so
   min-height:68px is a no-op. The per-item height is scoped to desktop widths.
   --------------------------------------------------------------------------- */
.nav-sections { min-height: 68px; }

@media (min-width: 768px) {
  /* Root cause: the theme's horizontal flex bar is scoped to `.navigation>ul[role=menu]`,
     and jQuery UI only adds role=menu when the menu widget initialises (late). So pre-init
     the 12 top-level items stack into a taller block; on init the bar collapses to one 68px
     row and shoves the whole page up ~58px — the dominant desktop layout shift. Applying the
     same flex layout up-front (no role=menu dependency) makes pre-init == post-init. */
  .navigation > ul { display: flex; align-items: center; justify-content: space-between; padding: 0 15px; }
  .navigation .level0 > .level-top { min-height: 58px; box-sizing: border-box; }
}

/* ---------------------------------------------------------------------------
   Layout stability (CLS) — category sub-category tile grid (.category-cms .sub-cat).
   The sub-category tiles are square (1:1) PageBuilder images that are loading="lazy";
   their box was not being reserved before the image decoded, so the whole .category-cms
   block collapsed to ~0 then expanded to its full height during load (measured as the
   category page's sole ~0.41 layout shift, pushing the product area + footer down). All
   these tile images are square, so reserving a 1:1 aspect-ratio holds the grid from first
   paint. height:auto keeps the image undistorted inside the reserved square.
   --------------------------------------------------------------------------- */
.sub-cat img { aspect-ratio: 1 / 1; height: auto; }