/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader/index.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/sections/styles/_plp-subnav.scss ***!
  \********************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
.child_category {
  min-width: max-content;
  padding: 2rem 0 1.5rem 0;
}

.categories_list {
  display: flex;
  overflow-x: auto;
  gap: 4rem;
  padding-right: var(--padding-desktop, 4rem);
}
@media screen and (max-width: 768px) {
  .categories_list {
    gap: 2rem;
  }
}
.categories_list::-webkit-scrollbar {
  height: 6px;
}
.categories_list::-webkit-scrollbar-thumb {
  background-color: #fff;
}
.categories_list:hover::-webkit-scrollbar-thumb {
  background-color: var(--silver);
}
.categories_list::-webkit-scrollbar-track {
  background-color: #fff;
}

.active_subnav {
  min-width: max-content;
  display: flex;
}

.active_subnav a {
  padding: 2rem 0 2rem var(--padding-mobile, 2rem);
  font-weight: 600;
}
@media screen and (min-width: 990px) {
  .active_subnav a {
    padding-left: var(--padding-desktop, 4rem);
  }
}

.categories_subnav {
  border-bottom: 1px solid #000;
}
.categories_subnav--inner {
  display: flex;
  gap: 4rem;
  margin: 0 auto;
  width: 100%;
}

a.child_category.active,
a.child_category:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--dark-silver);
}

@media screen and (max-width: 750px) {
  .categories_subnav.desktop {
    display: none;
  }
  .categories_subnav.mobile {
    display: flex;
  }
}
@media screen and (min-width: 749px) {
  .categories_subnav.desktop {
    display: flex;
  }
  .categories_subnav.mobile {
    display: none;
  }
}
.categories_subnav.mobile .categories_list {
  padding: 0 var(--padding-desktop, 4rem);
}

@media screen and (max-width: 1024px) {
  .categories_subnav.mobile .categories_list {
    padding: 0 var(--padding-mobile, 1rem);
  }
}
.categories_subnav.mobile .active_subnav {
  display: none;
}

.plp-subnav {
  position: sticky;
  z-index: 9998;
  background: #fff;
  top: calc(var(--header-height, 69px) - 2px);
  transition: top 0.1s ease-out;
}

.section-header {
  border-bottom: 1px solid var(--black);
}

.section-header.shopify-section-header-hidden ~ main .plp-subnav {
  top: 0;
}

@media screen and (max-width: 750px) {
  .plp-subnav {
    top: calc(var(--header-height, 56px) - 2px);
  }
  .section-header.shopify-section-header-hidden ~ main .plp-subnav {
    top: 0;
  }
}
/* ---------------------------------------------------------------
   PLP Subnav — Custom Links
   Additive only. Nothing above this comment is modified.

   The bar renders a single DOM tree, so it cannot reuse the
   .desktop / .mobile classes above: those are equal-specificity
   and order-dependent, and an element carrying both resolves to
   display:none above 750px.
   --------------------------------------------------------------- */
.categories_subnav--custom {
  display: flex;
}

@media screen and (max-width: 750px) {
  /* mirrors .categories_subnav.mobile: heading hidden, list takes the inline padding */
  .categories_subnav--custom .active_subnav {
    display: none;
  }
  .categories_subnav--custom .categories_list {
    padding: 0 var(--padding-mobile, 1rem);
  }
  .subnav-hide-mobile {
    display: none;
  }
}
@media screen and (min-width: 751px) {
  .subnav-hide-desktop {
    display: none;
  }
}

/*# sourceMappingURL=plp-subnav.min.css.map*/