/* DroneX v89 — fixed per-row catalog flyouts, one product description and 1500px homepage rhythm.
   Scoped to the affected components; all category labels/URLs remain native OkayCMS data. */

/* DESKTOP CATALOG (v89): the LI is the positioning context for *its own*
   flyout, including second/third levels and Brands. No top:0 relative to the
   root dropdown, no inherited slide transforms, and no independent scroll. */
@media (min-width: 992px) {
  .dx-theme .dx-header .categories_nav.dx-catalog-menu,
  .dx-theme .dx-header .categories_nav.dx-catalog-menu .categories_nav__menu,
  .dx-theme .dx-header .categories_nav.dx-catalog-menu .categories_menu,
  .dx-theme .dx-header .categories_nav.dx-catalog-menu .subcategory,
  .dx-theme .dx-header .categories_nav.dx-catalog-menu .categories_nav__subcategory {
    overflow: visible !important;
    max-height: none !important;
  }

  /* Important: original OkayCMS styles use `position:static` for nested LI.
     Every depth must be a relative anchor, never the full menu container. */
  .dx-theme .dx-header .categories_nav.dx-catalog-menu li.categories_menu__item {
    position: relative !important;
    isolation: auto;
  }
  .dx-theme .dx-header .categories_nav.dx-catalog-menu li.categories_menu__item.has_child:hover,
  .dx-theme .dx-header .categories_nav.dx-catalog-menu li.categories_menu__item.has_child:focus-within,
  .dx-theme .dx-header .categories_nav.dx-catalog-menu li.categories_menu__item.dx-flyout-open {
    z-index: 50;
  }

  /* Direct-child selector is intentional: each submenu follows only its LI. */
  .dx-theme .dx-header .categories_nav.dx-catalog-menu li.categories_menu__item.has_child > .categories_nav__subcategory {
    box-sizing: border-box;
    display: block;
    position: absolute !important;
    inset-block-start: 0 !important;
    top: 0 !important;
    left: calc(100% - 1px) !important; /* 1px overlap eliminates hover gaps */
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0;
    width: 285px;
    height: auto !important;
    min-height: 44px !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    -webkit-transform: none !important;
    background: #fff;
    border: 1px solid #e4e9eb;
    border-radius: 0 10px 10px 0;
    box-shadow: 6px 12px 28px rgba(0,0,0,.16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 60;
    transition: opacity .12s ease, visibility .12s ease;
  }

  .dx-theme .dx-header .categories_nav.dx-catalog-menu li.categories_menu__item.has_child:hover > .categories_nav__subcategory,
  .dx-theme .dx-header .categories_nav.dx-catalog-menu li.categories_menu__item.has_child:focus-within > .categories_nav__subcategory,
  .dx-theme .dx-header .categories_nav.dx-catalog-menu li.categories_menu__item.dx-flyout-open > .categories_nav__subcategory,
  .dx-theme .dx-header .categories_nav.dx-catalog-menu li.categories_menu__item.dx-touch-open > .categories_nav__subcategory {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 60 !important;
  }

  /* Keep the origin category visibly active when moving into its submenu. */
  .dx-theme .dx-header .categories_nav.dx-catalog-menu li.categories_menu__item.has_child:hover > .categories_menu__link,
  .dx-theme .dx-header .categories_nav.dx-catalog-menu li.categories_menu__item.has_child:focus-within > .categories_menu__link,
  .dx-theme .dx-header .categories_nav.dx-catalog-menu li.categories_menu__item.dx-flyout-open > .categories_menu__link,
  .dx-theme .dx-header .categories_nav.dx-catalog-menu li.categories_menu__item.dx-touch-open > .categories_menu__link {
    background: #f3f7f8;
    color: var(--dx-cyan, #26afd6);
  }

  /* Third level starts beside the hovered second-level row, not the root. */
  .dx-theme .dx-header .categories_nav.dx-catalog-menu li.categories_menu__item.has_child > .level_3.categories_nav__subcategory {
    width: min(700px, calc(100vw - 650px)) !important;
    max-width: calc(100vw - 650px) !important;
    min-width: 280px;
  }
  .dx-theme .dx-header .categories_nav.dx-catalog-menu .categories_menu,
  .dx-theme .dx-header .categories_nav.dx-catalog-menu .subcategory {
    height: auto !important;
  }
}

/* MOBILE/TABLET: keep existing tap-to-expand submenu behavior. Nothing should
   appear as a sideways flyout or become clipped on narrow screens. */
@media (max-width: 991px) {
  .dx-theme .dx-header .categories_nav.dx-catalog-menu .categories_menu__item.has_child > .categories_nav__subcategory {
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    display:none !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto;
    border:0;
    border-radius:0;
    box-shadow:none;
    transition:none;
  }
  .dx-theme .dx-header .categories_nav.dx-catalog-menu .categories_menu__item.dx-touch-open > .categories_nav__subcategory {
    display:block !important;
  }
}

/* SINGLE PRODUCT: only the dark active Description tab remains below the
   product. The established in-panel interactive rating is left untouched. */
.dx-theme.dx-product-page .dx-product-only-description {
  scroll-margin-top:100px;
}
.dx-theme.dx-product-page .dx-product-only-description > .dx-ref-section-nav {
  display:flex;
  align-items:center;
  margin:0 0 28px !important;
  padding:0 0 14px !important;
  font-size:inherit;
  font-weight:inherit;
  border-bottom:1px solid #d8dcdf;
}
.dx-theme.dx-product-page .dx-product-only-description .dx-ref-section-nav__link.is-active {
  background:#23282b !important;
  color:#fff !important;
  border-radius:999px;
  font-weight:700;
  padding:13px 26px;
  text-decoration:none;
}
.dx-theme.dx-product-page .dx-product-only-description .dx-description-content,
.dx-theme.dx-product-page .dx-product-only-description .dx-description-body {
  display:block !important;
  background:transparent !important;
  color:#15191c !important;
  width:100%;
  max-width:100%;
  min-width:0;
}
.dx-theme.dx-product-page .dx-product-only-description .block__description,
.dx-theme.dx-product-page .dx-product-only-description .block__description p,
.dx-theme.dx-product-page .dx-product-only-description .block__description li {
  color:#15191c !important;
}

/* HOME: 1500px centered category strip; generous, equal vertical breathing
   room; responsive gaps and no stretched product/category images. */
.dx-theme.main_page .dx-home-content > .dx-home-category-section {
  --dx-v87-home-category-gap:80px;
  width:100%;
  box-sizing:border-box;
  margin:0 !important;
  padding:var(--dx-v87-home-category-gap) 0 !important;
}
.dx-theme.main_page .dx-home-content > .dx-home-category-section > .dx-category-strip.container {
  box-sizing:border-box;
  width:100% !important;
  max-width:1500px !important;
  margin-inline:auto !important;
  padding:0 32px !important;
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(100px,1fr)) !important;
  grid-auto-flow:row !important;
  align-items:start;
  column-gap:clamp(18px,1.5vw,30px) !important;
  row-gap:26px !important;
  overflow:visible !important;
}
/* Base grid.css adds clearfix pseudo-elements to .container. In a CSS grid,
   they would become an accidental extra grid cell; exclude them. */
.dx-theme.main_page .dx-home-category-section > .dx-category-strip.container::after,
.dx-theme.main_page .dx-home-category-section > .dx-category-strip.container::before {
  content:none !important;
  display:none !important;
}
.dx-theme.main_page .dx-home-category-section .dx-category-tile {
  min-width:0;
  width:100%;
  max-width:none;
  padding-inline:3px;
}
.dx-theme.main_page .dx-home-category-section .dx-category-tile__image {
  width:min(120px,100%);
  height:auto;
  aspect-ratio:1;
  max-width:120px;
  flex:0 0 auto;
}
.dx-theme.main_page .dx-home-category-section .dx-category-tile__image img,
.dx-theme.main_page .dx-home-category-section .dx-category-tile__image svg {
  width:100%;
  height:100%;
  object-fit:contain;
}
@media (max-width: 991px) {
  .dx-theme.main_page .dx-home-content > .dx-home-category-section {--dx-v87-home-category-gap:60px;}
  .dx-theme.main_page .dx-home-content > .dx-home-category-section > .dx-category-strip.container {
    padding-inline:24px !important;
    grid-template-columns:repeat(auto-fit,minmax(105px,1fr)) !important;
    gap:22px 16px !important;
  }
}
@media (max-width: 575px) {
  .dx-theme.main_page .dx-home-content > .dx-home-category-section {--dx-v87-home-category-gap:40px;}
  .dx-theme.main_page .dx-home-content > .dx-home-category-section > .dx-category-strip.container {
    padding-inline:16px !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    column-gap:12px !important;
    row-gap:20px !important;
  }
  .dx-theme.main_page .dx-home-category-section .dx-category-tile__image {
    width:min(100%,100px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dx-theme .dx-header .categories_nav.dx-catalog-menu .categories_menu__item.has_child > .categories_nav__subcategory {
    transition:none !important;
  }
}