/* Fallback layout for the product page when the slider script (slick.js) has not started.
   Without it the 9 product photos and the thumbnail strips are just stacked under each other.
   Every rule only applies while the slider is NOT initialised, so nothing changes once the scripts work. */
.product-slider:not(.slick-initialized) {
  display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
}
.product-slider:not(.slick-initialized) > div { flex: 0 0 100%; max-width: 100%; scroll-snap-align: start; }
.product-slider:not(.slick-initialized) img { display: block; width: 100%; height: auto; }
.product-slider-nav:not(.slick-initialized),
.product-slider-nav2:not(.slick-initialized) {
  display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; overflow-y: hidden; margin-top: 8px;
}
.product-slider-nav:not(.slick-initialized) img,
.product-slider-nav2:not(.slick-initialized) img { flex: 0 0 auto; width: auto; height: 80px; cursor: pointer; }
.color-picker-slider:not(.slick-initialized) { display: flex; flex-wrap: wrap; gap: 8px; }

/* Top menu without SmartMenus: the "Lattiat" item has no link of its own, its sub menu is opened by the script.
   While the script has not started (no data-smartmenus-id on the menu) open the sub menu on hover / touch instead. */
#main-menu.sm:not([data-smartmenus-id]) > li > a:not([href]) { cursor: pointer; }
#main-menu.sm:not([data-smartmenus-id]) > li:hover > ul,
#main-menu.sm:not([data-smartmenus-id]) > li:focus-within > ul { display: block !important; visibility: visible; top: 100%; left: 0; z-index: 99999; }
/* invisible bridge across the gap between the menu text and the sub menu, so the hover is not lost on the way down */
#main-menu.sm:not([data-smartmenus-id]) > li:hover > ul::before,
#main-menu.sm:not([data-smartmenus-id]) > li:focus-within > ul::before { content: ""; position: absolute; left: 0; right: 0; top: -40px; height: 40px; background: transparent; }