/* DroneX v94 — only homepage responsive rhythm and category-strip behavior.
   v92 Catalog product autoplay and the v93 desktop icon layout are untouched. */

/* The earlier .dx-category-strip is the content container. It still defines
   the same 1500px centered grid on desktop; the Swiper wrapper is the grid. */
@media (min-width: 768px) {
  .dx-theme.main_page .dx-home-category-section > .dx-category-strip.container.swiper-container {
    display: block !important;
    overflow: visible !important;
  }
  .dx-theme.main_page .dx-home-category-section > .dx-category-strip.container > .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-auto-flow: row !important;
    column-gap: clamp(18px, 1.5vw, 30px) !important;
    row-gap: 26px !important;
    align-items: start;
    width: 100%;
    height: auto;
    transform: none !important;
  }
  .dx-theme.main_page .dx-home-category-section .dx-category-strip > .swiper-wrapper > .dx-category-tile.swiper-slide {
    width: 100% !important;
    margin: 0 !important;
  }
  .dx-theme.main_page .dx-home-category-section .dx-mobile-category-dots {
    display: none !important;
  }
}
@media (min-width:768px) and (max-width:991px) {
  .dx-theme.main_page .dx-home-category-section > .dx-category-strip.container > .swiper-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
    column-gap: 16px !important;
    row-gap: 22px !important;
  }
}

/* Tablet: the legacy 60px negative Popular/Catalog overlap comes from
   competing shared section rules. Keep both sections in normal flow. */
@media (min-width: 768px) and (max-width: 991px) {
  .dx-theme.main_page .dx-home-content > .homepage-popular.dx-section,
  .dx-theme.main_page .dx-home-content > .homepage-catalog.dx-section {
    margin-block: 0 !important;
    padding-block: 60px !important;
  }
}

/* 40px of genuine space at each section edge on phones. This overrides the
   legacy 80px margin and a competing @media bottom-padding rule responsible
   for the Catalog heading sitting against Popular Products. */
@media (max-width: 767px) {
  .dx-theme.main_page .dx-home-content > .homepage-popular.dx-section,
  .dx-theme.main_page .dx-home-content > .homepage-catalog.dx-section {
    box-sizing: border-box;
    margin-block: 0 !important;
    padding-block: 40px !important;
  }
  .dx-theme.main_page .homepage-popular .homepage-popular-slider {
    position: relative;
    height: auto !important;
    margin-bottom: 0 !important;
  }
  .dx-theme.main_page .dx-home-content > .dx-home-category-section {
    margin: 0 !important;
    padding-block: 40px !important;
  }
  .dx-theme.main_page .dx-home-category-section > .dx-category-strip.container.swiper-container {
    display: block !important;
    position: relative;
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    min-width: 0;
    padding: 0 0 30px !important; /* dots have their own reserved 30px */
    margin-inline: auto !important;
    overflow: hidden !important;
    border-top: 0 !important;
    scrollbar-width: none;
  }
  .dx-theme.main_page .dx-home-category-section .dx-category-strip > .swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
    gap: 0 !important;
    width: 100%;
    height: auto;
    grid-template-columns: none !important;
    grid-auto-flow: unset !important;
  }
  .dx-theme.main_page .dx-home-category-section .dx-category-strip > .swiper-wrapper > .dx-category-tile.swiper-slide {
    flex-shrink: 0 !important;
    display: flex;
    min-width: 0;
    max-width: none;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 2px !important;
    box-sizing: border-box;
  }
  .dx-theme.main_page .dx-home-category-section .dx-category-tile__image {
    width: min(100%, 100px) !important;
    aspect-ratio: 1/1;
  }
  .dx-theme.main_page .dx-home-category-section .dx-mobile-category-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0 !important;
    width: 100%;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 10px;
    pointer-events: auto;
    z-index: 3;
  }
  .dx-theme.main_page .dx-home-category-section .dx-mobile-category-dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 !important;
    opacity: 1;
    background: #b9c0c4;
    border-radius: 50%;
    border: 0;
    padding: 0;
    flex: 0 0 8px;
    cursor: pointer;
  }
  .dx-theme.main_page .dx-home-category-section .dx-mobile-category-dots .swiper-pagination-bullet-active {
    background: var(--dx-cyan, #27abd2);
  }
  .dx-theme.main_page .dx-home-category-section .dx-mobile-category-dots .swiper-pagination-bullet:focus-visible {
    outline: 2px solid #22282c;
    outline-offset: 3px;
  }
  .dx-theme.main_page .dx-home-category-section .dx-category-strip:not(.swiper-container-initialized) {
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none !important;
    -ms-overflow-style: none;
  }
  .dx-theme.main_page .dx-home-category-section .dx-category-strip:not(.swiper-container-initialized)::-webkit-scrollbar {
    display: none;
  }
  .dx-theme.main_page .dx-home-category-section .dx-category-strip:not(.swiper-container-initialized) > .swiper-wrapper > .dx-category-tile.swiper-slide {
    flex: 0 0 calc((100% - 24px) / 3);
    width: calc((100% - 24px) / 3);
    margin-right: 12px !important;
    scroll-snap-align: start;
  }
  .dx-theme.main_page .dx-home-category-section .dx-category-strip:not(.swiper-container-initialized) .dx-mobile-category-dots {
    display: none !important;
  }
}
@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);
    width: calc((100% - 12px) / 2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dx-theme.main_page .dx-home-category-section .dx-category-tile__image {
    transition: none !important;
  }
}