/*
   CWV fixes (CLS + LCP) - Greg 2026-07-13
   owl.carousel css hides sliders until JS inits (.owl-carousel{display:none})
   -> hero painted seconds late (LCP) and whole page jumped (CLS).
   Pre-init we show ONLY the first slide at its final size, so Owl
   init causes zero net movement and the hero image paints early.
   Also: fixed logo box, product Fotorama gallery reservation,
   cookie-notice icon size. Mirrored in Porto custom_style_2 config.
   ============================================================ */
.mgz-carousel.owl-carousel:not(.owl-loaded) { display: block; width: 100%; }
.mgz-carousel.owl-carousel:not(.owl-loaded) .mgz-carousel-item { display: none; }
.mgz-carousel.owl-carousel:not(.owl-loaded) .mgz-carousel-item:first-child { display: block; position: relative; width: 100%; overflow: hidden; }
.mgz-carousel.owl-carousel[data-slider_height="1080"]:not(.owl-loaded) .mgz-carousel-item:first-child { aspect-ratio: 1 / 1; }
.mgz-carousel.owl-carousel[data-slider_height="600"]:not(.owl-loaded) .mgz-carousel-item:first-child { aspect-ratio: 1590 / 600; }
strong.logo img { aspect-ratio: 221 / 78; height: auto; }
img[src*="cookie_png"] { width: 20px; height: 20px; }
/* Greg 2026-07-14 (CLS): 536px was a fixed guess and never matched the real desktop
   height (= gallery width, square stage via Magento's own loading-mask
   padding-bottom:100%, + 108px thumbnail row) -> content jumped when Fotorama
   replaced the mask (0.15 lab CLS). Let the mask reserve the stage and add only
   the missing 108px, exact at every viewport. Mobile keeps its verified calc(). */
.gallery-placeholder._block-content-loading { min-height: 0; padding-bottom: 108px; }
@media (max-width: 767px) {
  .gallery-placeholder._block-content-loading { min-height: calc(100vw - 40px + 108px); padding-bottom: 0; }
}
/* end CWV fixes - Greg 2026-07-13 */
/* CWV addendum - Greg 2026-07-13: Fotorama builds thumbs-first then reorders
   when the stage image arrives (0.19 CLS inside the gallery). Keep internals
   invisible (unscored by CLS) + hold the box floor until the first stage
   image is loaded. :has() = Chrome 105+/Safari 15.4+; older browsers fall
   back to the _block-content-loading rules above. */
.gallery-placeholder:not(:has(.fotorama__stage__frame.fotorama__loaded)) { min-height: 536px; }
.gallery-placeholder .fotorama-item:not(:has(.fotorama__stage__frame.fotorama__loaded)) { visibility: hidden; }
@media (max-width: 767px) {
  .gallery-placeholder:not(:has(.fotorama__stage__frame.fotorama__loaded)) { min-height: calc(100vw - 40px + 108px); }
}
/* end CWV addendum - Greg 2026-07-13 */
/* CWV addendum 2 - Greg 2026-07-14: Fast Simon search renders into
   section.search-area AFTER load (a bare unstyled <input> shows first, then JS
   swaps the widget in) -> the section height flapped ~58px -> 0 -> final and
   shifted every page below the header (live product CLS 0.57 desktop @1280).
   Reserve the FINAL height from first paint: measured 60px < 992px viewport,
   100px >= 992px (FBR breakpoint = 992, verified live at 9 widths).
   NO overflow:hidden here - the autocomplete dropdown renders inside this section. */
section.search-area.amsearch-wrapper-block { height: 60px; }
@media (min-width: 992px) {
  section.search-area.amsearch-wrapper-block { height: 100px; }
}
/* end CWV addendum 2 - Greg 2026-07-14 */
/* CWV addendum 3 - Greg 2026-07-14: cold-load font swap (fallback is ~12% wider than
   Play) made the 7-item desktop menu wrap to a 2nd 48px row, which collapsed when Play
   arrived -> whole page jumped up 48px (remaining 0.42 CLS on desktop product pages).
   Keep the menu on ONE row: pre-font items overflow right for ~1s instead of wrapping.
   NOTE: if top-level menu items are ever added and stop fitting, they will overflow
   instead of wrapping - revisit then. Desktop mega-menu only (mobile panel untouched). */
@media (min-width: 768px) {
  /* !important: the winning wrap rule hides in an @import Porto sheet - plain
     specificity lost (verified live 14 Jul: computed stayed "wrap") */
  nav.navigation.sw-megamenu > ul { flex-wrap: nowrap !important; }
  nav.navigation.sw-megamenu > ul > li.level0 > a { white-space: nowrap; }
}
/* end CWV addendum 3 - Greg 2026-07-14 */
/* CWV addendum 4 - Greg 2026-07-14: the LAST deterministic product shift (0.144 every
   load). Served markup = eager main-photo <img> (NO width/height attrs) + loader div,
   and Porto JS later inline-styles the loader to padding-bottom:100% ("same size as
   gallery") -> during loading the photo AND the mask BOTH took flow height (400+400px),
   then Fotorama collapsed it to 508. Fix: photo reserves its square box from first
   paint; loader becomes an overlay (absolute) so it never adds flow height. The
   !important on padding beats the JS inline style. */
.gallery-placeholder._block-content-loading { position: relative; }
.gallery-placeholder._block-content-loading .gallery-placeholder__image {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
}
.gallery-placeholder._block-content-loading .loading-mask {
  position: absolute; top: 0; left: 0; right: 0; bottom: 108px; padding: 0 !important; margin: 0;
}
/* end CWV addendum 4 - Greg 2026-07-14 */

/* CWV addendum 5 - Greg 2026-07-14: mobile quick-info strip (cms_block 1259, row .shy7xby).
   Amasty 1x1 lazy placeholder has intrinsic 1:1 ratio which overrides the width=350 height=82
   attr ratio -> banners reserved 350x350 squares then collapsed on swap (row 1143px -> 339px,
   ~0.06 mobile CLS on home + search). Lock the true ratio; images stay lazy. */
.shy7xby img[width="350"][height="82"] { aspect-ratio: 350 / 82; height: auto; }
/* end CWV addendum 5 - Greg 2026-07-14 */