/* DroneX v95 — targeted iOS/Android homepage layout corrections.
 * Full v94 theme is retained. Desktop carousel and navigation are unchanged.
 * Loaded after the v94 CSS to resolve actual legacy specificity conflicts.
 */
@media (max-width: 767px) {
  /* The original mobile .dx-hero used height:430px!important while its parent
     was forced to 100dvh; the resulting empty parent area was solid black.
     Let the parent measure the hero, without an unused viewport-height tail. */
  .dx-theme.main_page .dx-home-screen {
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    background:#060b10;
  }
  .dx-theme.main_page .dx-home-screen > .dx-hero.dx-hero--video {
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    height:clamp(450px, 66svh, 650px) !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
  }
  /* Mobile video/brand band are always contained by the real hero. */
  .dx-theme.main_page .dx-home-screen .dx-hero--video .dx-hero__poster,
  .dx-theme.main_page .dx-home-screen .dx-hero--video .dx-hero__video,
  .dx-theme.main_page .dx-home-screen .dx-hero--video .dx-hero__image {
    width:100%;height:100%;object-fit:cover;
  }
  .dx-theme.main_page .dx-home-screen .dx-hero__brand-band {
    bottom:12px !important;
  }
  /* A self-contained product section must include the full visible card
     height; the later Catalog heading may not occupy the same visual area. */
  .dx-theme.main_page .dx-home-content > section.homepage-popular.dx-section,
  .dx-theme.main_page .dx-home-content > section.homepage-catalog.dx-section {
    display:flow-root;
    position:relative;
    box-sizing:border-box;
    height:auto !important;
    min-height:0;
    margin:0 !important;
    padding:40px 0 !important;
    clear:both;
  }
  .dx-theme.main_page .homepage-popular .homepage-popular-slider {
    box-sizing:border-box;
    position:relative;
    display:block;
    height:auto !important;
    overflow:hidden !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
  }
  .dx-theme.main_page .homepage-popular .homepage-popular-slider > .swiper-wrapper {
    display:flex;
    flex-wrap:nowrap;
    align-items:stretch !important;
    height:auto !important;
  }
  .dx-theme.main_page .homepage-popular .homepage-popular-slider > .swiper-wrapper > .swiper-slide {
    height:auto !important;
    min-width:0;
    align-self:stretch;
  }
  .dx-theme.main_page .homepage-popular .product_preview {
    min-width:0;
  }
  .dx-theme.main_page .homepage-catalog .dx-section-heading {
    position:relative;
    z-index:1;
    margin-top:0 !important;
  }
  /* Keep the product Catalog as dots-only: Safari must not display a
     horizontal scroll indicator even in the pre-initialization fallback. */
  .dx-theme.main_page #fn_products_tab .dx-home-product-carousel {
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }
  .dx-theme.main_page #fn_products_tab .dx-home-product-carousel::-webkit-scrollbar {
    display:none !important;
    width:0 !important;
    height:0 !important;
  }
  /* The CMS category list becomes a single-row swiper. The fallback is a
     horizontal native snap list, never a three-column wrapping grid. */
  .dx-theme.main_page .dx-home-content > .dx-home-category-section {
    margin:0 !important;
    padding:40px 0 !important;
    border:0 !important;
  }
  .dx-theme.main_page .dx-home-category-section > .dx-category-strip.container.swiper-container {
    position:relative;
    display:block !important;
    box-sizing:border-box;
    width:calc(100% - 32px) !important;
    max-width:calc(100% - 32px) !important;
    margin:0 auto !important;
    padding:0 0 30px !important;
    border:0 !important;
    overflow:hidden !important;
  }
  .dx-theme.main_page .dx-home-category-section .dx-category-strip > .swiper-wrapper {
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    gap:0 !important;
    grid-template-columns:none !important;
    grid-auto-flow:unset !important;
    align-items:flex-start;
    width:100%;
    height:auto !important;
  }
  .dx-theme.main_page .dx-home-category-section .dx-category-strip > .swiper-wrapper > .dx-category-tile.swiper-slide {
    display:flex !important;
    flex-direction:column;
    flex:0 0 auto;
    flex-shrink:0 !important;
    min-width:0;
    max-width:none !important;
    margin:0 !important;
    padding:0 2px !important;
  }
  .dx-theme.main_page .dx-home-category-section .dx-category-tile__image {
    width:min(100%,110px) !important;
    aspect-ratio:1 / 1;
  }
  .dx-theme.main_page .dx-home-category-section .dx-mobile-category-dots {
    display:flex;
    bottom:0;
  }
  .dx-theme.main_page .dx-home-category-section > .dx-category-strip.container:not(.swiper-container-initialized) {
    overflow-x:auto !important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }
  .dx-theme.main_page .dx-home-category-section > .dx-category-strip.container:not(.swiper-container-initialized)::-webkit-scrollbar {
    display:none !important;
    width:0 !important;
    height:0 !important;
  }
  .dx-theme.main_page .dx-home-category-section .dx-category-strip:not(.swiper-container-initialized) > .swiper-wrapper > .dx-category-tile.swiper-slide {
    flex-basis:calc((100% - 24px)/3) !important;
    width:calc((100% - 24px)/3) !important;
    margin-right:12px !important;
    scroll-snap-align:start;
  }
}
@media (max-width:374px) {
  .dx-theme.main_page .dx-home-category-section .dx-category-strip:not(.swiper-container-initialized) > .swiper-wrapper > .dx-category-tile.swiper-slide {
    flex-basis:calc((100% - 12px)/2) !important;
    width:calc((100% - 12px)/2) !important;
  }
}
/* iPads preserve their existing layout, but keep sections in normal flow. */
@media (min-width:768px) and (max-width:991px) {
  /* The same legacy fixed-height hero vs 100dvh wrapper conflict also
     affects portrait tablets. Match the wrapper to its real hero. */
  .dx-theme.main_page .dx-home-screen {
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }
  .dx-theme.main_page .dx-home-screen > .dx-hero.dx-hero--video {
    position:relative !important;
    inset:auto !important;
    display:block !important;
    height:clamp(500px, 72svh, 720px) !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
  }
  .dx-theme.main_page .dx-home-content > section.homepage-popular.dx-section,
  .dx-theme.main_page .dx-home-content > section.homepage-catalog.dx-section {
    margin:0 !important;
    padding:60px 0 !important;
    height:auto !important;
    display:flow-root;
  }
}