.hdt-sticky-bar {
  display: none;
  &[inted] {
    position: fixed;
    inset-inline: 0;
    bottom: var(--bar-mobile-height, 0px);
    z-index: var(--layer-sticky);
    box-shadow: 0px -6px 20px 0px rgba(0, 0, 0, 0.04);
    transform: translate3d(0, 105%, 0);
    &[transition] {
      transition: transform 0.25s cubic-bezier(0.19, 1, 0.22, 1);
    }
    &[shown] {
      transform: translate3d(0, 0, 0);
    }
    .hdt-slider__container {
      column-gap: 2.2rem;
    }
    .hdt-slider__slide {
      flex: 0 0 auto;
    }
  }
}
.hdt-sticky-bar-has-atc,
#MainContent:has([data-hdt-spy]) ~ .hdt-sticky-bar,
.hdt-sticky-bar[inted] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: var(--color-background);
  padding-block: 1.5rem;
  padding-inline: 3rem;
  /* min-height: var(--sticky-bar-height); */
}
/* body:has(.hdt-sticky-bar[inted]) {
  padding-bottom: calc(var(--bar-mobile-height, 0px) + var(--sticky-bar-height, 9.3rem));
}
body:has(.hdt-sticky-bar[inted][only="top"]) {
  padding-bottom: var(--bar-mobile-height, 0px);
} */
.hdt-sticky-bar[inted] + .hdt-sticky-bar--holder {
  height: var(--sticky-bar-height);
}
.shopify-section:has([data-hdt-spy]) {
  scroll-margin-top: calc(var(--header-height, 0px) + 10px);
}

.hdt-sticky-bar{
  .hdt-sticky-add-to-cart{
    gap: 1.8rem;
    justify-content: space-between;
    .hdt-sticky-add-to-cart__info-wrap{
      gap: 1.7rem;
      align-items: center;
      .hdt-sticky-add-to-cart__variant{
        margin-block-start: 0.3rem;
        gap: 0.3rem 1.3rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        span{
          display: inline-flex;
          width: 0.1rem;
          height: 1.4rem;
          background: rgb(var(--color-text-rgb)/30%);
        }
      }
      .hdt-sticky-add-to-cart__price{line-height: 1;}
      .hdt-sticky-add-to-cart__title{--line-clamp-count: 1}
    }
    .hdt-sticky-add-to-cart__button{
      flex-shrink: 0;
      padding: 0.6rem 1.8rem;
      > span{
        transition: opacity 0.3s ease;
        display: inline-flex;
        gap: 0.6rem;
        align-items: center;
      }
      .hdt-loading-area__spinner{
        position: absolute;
        inset: 0;
        display: grid;
        align-items: center;
        .hdt-icon-spinner{
          place-self: center;
        }
      }
    }
    .hdt-sticky-add-to-cart__button[loading] {
      > span{opacity: 0;}
      .hdt-loading-area__spinner{
        --hdt-anim-state: running;
        .hdt-icon-spinner{
          opacity: 1;
        }
      }
    }
    .hdt-sticky-add-to-cart__image img {
      height: 68px;
      width: auto;
      border-radius: var(--rounded-xs);
    }
    .hdt-price-wrapp .hdt-price{font-weight: var(--font-semibold);}
  }
  .hdt-sticky-bar-group{
    gap: 2.6rem;
    .hdt-back-to-top{
      flex-shrink: 0;
      width: var(--size-backtop, 3.5rem);
      height: var(--size-backtop, 3.5rem);
      padding: 0;
      border: 1px solid var(--color-foreground);
      --rounded-button: var(--rounded-full);
      min-height: auto;
      svg{
        height: 1rem;
        width: auto;
      }
    }
  }
  &[only="top"]{
    box-shadow: none;
    background: transparent;
    padding: 0;
    inset-inline-start: auto;
    inset-inline-end: 1rem;
    width: auto;
    .hdt-sticky-bar-group{
      gap: 0;
      .hdt-back-to-top{
        margin-block-end: 2rem;
      }
    }
  }
  .hdt-scrollspy-item button{
    color: rgb(var(--color-text-rgb)/40%);
    padding-block: 0.6rem;
    position: relative;
    &.is--active, &:hover{
      color: var(--color-foreground);
    }
    &::after{
      content: "";
      display: block;
      height: 2px;
      width: 0;
      transition: width 0.3s ease;
      transform-origin: left center;
      position: absolute;
      inset-inline-start: 0;
      inset-block-start: 100%;
      background-color: var(--color-foreground);
    }
    &.is--active::after{
      width: 100%;
    }
  }
  &.hdt-sticky-bar-has-backtop.hdt-sticky-bar-has-atc:not(.hdt-sticky-bar-has-scrollspy) .hdt-sticky-bar-group .hdt-scrollspy,
  &[only="atc"] .hdt-sticky-bar-group{display: none;}
}
@media (max-width: 575.98px) {
  .hdt-sticky-bar {
    column-gap: 1.5rem;
    .hdt-sticky-add-to-cart .hdt-sticky-add-to-cart__image{display: none;}
    .hdt-sticky-bar-group{gap: 1.5rem;}
  }
}
@media (max-width: 1023.98px) {
  .hdt-sticky-bar{
    column-gap: 2rem;
    border-radius: var(--rounded-lg) var(--rounded-lg) 0 0;
    .hdt-sticky-bar-group{width: 100%; justify-content: space-between;}
    .hdt-sticky-add-to-cart{width: 100%;}
    &.hdt-sticky-bar-has-scrollspy{
      .hdt-sticky-bar-group .hdt-back-to-top{
        order: 2;
        --size-backtop: 2.1rem;
        svg{
          height: 0.7rem;
        }
      }
    }
    &.hdt-sticky-bar-has-scrollspy.hdt-sticky-bar-has-atc{
      flex-direction: column;
      .hdt-sticky-bar-group {
        border-bottom: 1px solid var(--color-line-border);
      }
      .hdt-slider__viewport{padding-block-end: 0.2rem;}
      .hdt-sticky-add-to-cart{
        padding-block: 1.5rem 0.7rem;
      }
    }
    /* &.hdt-sticky-bar-has-scrollspy.hdt-sticky-bar-has-atc:not(.hdt-sticky-bar-has-backtop) .hdt-sticky-add-to-cart{width: 100%;} */
    &.hdt-sticky-bar-has-backtop.hdt-sticky-bar-has-atc:not(.hdt-sticky-bar-has-scrollspy){
      .hdt-sticky-bar-group{width: auto;}
      .hdt-sticky-add-to-cart{flex-grow: 1;width: auto;}
    }
    &.hdt-sticky-bar-has-backtop.hdt-sticky-bar-has-scrollspy:not(.hdt-sticky-bar-has-atc){
      .hdt-sticky-bar-group{justify-content: space-between;}
    }
  }
}
@media (min-width: 1024px) {
  .hdt-sticky-bar {
    &[inted] {
      column-gap: 2rem;
      border-radius: 0;
      padding-block: 1.3rem;
      .hdt-slider__container {
        column-gap: 2.4rem;
      }
    }
    .hdt-sticky-add-to-cart{min-width: 36rem;}
    .hdt-sticky-bar-group{
      gap: var(--col-gap, 2rem);
      .hdt-scrollspy .hdt-slider{
        .hdt-scrollspy-item{
          padding-block: 0.5rem;
        }
      }
    }
    &:not(.hdt-sticky-bar-has-scrollspy) .hdt-sticky-add-to-cart{
      flex-grow: 1;
    }
    &.hdt-sticky-bar-has-scrollspy.hdt-sticky-bar-has-atc{
      flex-direction: row;
      .hdt-sticky-add-to-cart{
        max-width: 50%;
      }
      .hdt-sticky-bar-group{
        /* flex-grow: 1; */
        max-width: 50%;
        overflow: hidden;
        .hdt-scrollspy{
          max-width: calc(100% - var(--w-backtotop, 0));
        }
      }
      &.hdt-sticky-bar-has-backtop{
        --w-backtotop: calc(var(--size-backtop, 3.5rem) + var(--col-gap, 2rem))
      }
    }
  }
}
@media (min-width: 1440px) {
  .hdt-sticky-bar {
    &[inted] {
      column-gap: 3rem;
      .hdt-slider__container {
        column-gap: 5rem;
      }
    }
    .hdt-sticky-bar-group{
      --col-gap: 3.2rem;
      .hdt-back-to-top{
        --size-backtop: 4.6rem;
        svg{
          height: 1.5rem;
        }
      }
    }
    &.hdt-sticky-bar-has-scrollspy.hdt-sticky-bar-has-atc{
      .hdt-sticky-add-to-cart{
        max-width: 40%;
      }
      .hdt-sticky-bar-group{
        max-width: 70%;
      }
    }
  }
  .hdt-sticky-bar-has-atc, #MainContent:has([data-hdt-spy]) ~ .hdt-sticky-bar, .hdt-sticky-bar[inted]{
    padding-inline: 4.8rem;
  }
}