.hdt-card-product {
  --atc-cl: rgb(var(--hdt-btn-color));
  --atc-bg-cl: rgb(var(--hdt-btn-bg));
  --atc-cl-hover: rgb(var(--hdt-btn-bg));
  --atc-bg-cl-hover: rgb(var(--hdt-btn-color));

  --wishlist-cl: rgb(var(--hdt-btn-color));
  --wishlist-bg-cl: rgb(var(--hdt-btn-bg));
  --wishlist-cl-hover: rgb(var(--hdt-btn-bg));
  --wishlist-bg-cl-hover: rgb(var(--hdt-btn-color));
  --wishlist-cl-active: rgb(var(--hdt-btn-color));
  --wishlist-bg-cl-active: rgb(var(--hdt-btn-bg));

  --quickview-cl: rgb(var(--hdt-btn-color));
  --quickview-bg-cl: rgb(var(--hdt-btn-bg));
  --quickview-cl-hover: rgb(var(--hdt-btn-bg));
  --quickview-bg-cl-hover: rgb(var(--hdt-btn-color));

  --compare-cl: rgb(var(--hdt-btn-color));
  --compare-bg-cl: rgb(var(--hdt-btn-bg));
  --compare-cl-hover: rgb(var(--hdt-btn-bg));
  --compare-bg-cl-hover: rgb(var(--hdt-btn-color));
  --pr-countdown-color: rgb(var(--hdt-btn-color));
  /* --pr-countdown-bg-color: rgb(var(--hdt-btn-bg)); */  
  --pr-countdown-bg-color: rgb(var(--hdt-btn-bg) / .75);
  --pr-background-overlay: rgb(var(--color-overlay) / 0.1);
}

.hdt-card-product__media-wrapp {
  border-start-start-radius: var(--radius-product-media);
  border-start-end-radius: var(--radius-product-media);
}

.hdt-card-product__media-wrapp hdt-video-player + img:not(:last-child){
  display: none;
}

.hdt-badge__on-sale {
  --badge-color-primary: rgb(var(--color-on-sale-badge-background));
  --badge-color-secondary: rgb(var(--color-on-sale-badge-text));
}
.hdt-badge__new {
  --badge-color-primary: rgb(var(--color-new-badge-background));
  --badge-color-secondary: rgb(var(--color-new-badge-text));
}
.hdt-badge__hot {
  --badge-color-primary: rgb(var(--color-on-sale-badge-background));
  --badge-color-secondary: rgb(var(--color-on-sale-badge-text));
}
.hdt-badge__sold_out {
  --badge-color-primary: rgb(var(--color-sold-out-badge-background));
  --badge-color-secondary: rgb(var(--color-sold-out-badge-text));
}
.hdt-badge__pre_order {
  --badge-color-primary: rgb(var(--color-pre-order-badge-background));
  --badge-color-secondary: rgb(var(--color-pre-order-badge-text));
}
.hdt-badge__custom {
  --badge-color-primary: rgb(var(--color-custom-badge-background));
  --badge-color-secondary: rgb(var(--color-custom-badge-text));
}

.hdt-card-product hdt-wishlist {
  color: var(--wishlist-cl);
  background-color: var(--wishlist-bg-cl);
}
.hdt-card-product hdt-wishlist:hover {
  color: var(--wishlist-cl-hover);
  background-color: var(--wishlist-bg-cl-hover);
}
.hdt-card-product hdt-compare {
  color: var(--compare-cl);
  background-color: var(--compare-bg-cl);
}
.hdt-card-product hdt-compare:hover {
  color: var(--compare-cl-hover);
  background-color: var(--compare-bg-cl-hover);
}
.hdt-card-product .hdt-card-product__btn-quick-view {
  color: var(--quickview-cl);
  background-color: var(--quickview-bg-cl);
}
.hdt-card-product .hdt-card-product__btn-quick-view:hover {
  color: var(--quickview-cl-hover);
  background-color: var(--quickview-bg-cl-hover);
}
.hdt-card-product .hdt-card-product__btn-ultra {
  color: var(--atc-cl);
  background-color: var(--atc-bg-cl);
}
.hdt-card-product .hdt-card-product__btn-ultra:hover {
  color: var(--atc-cl-hover);
  background-color: var(--atc-bg-cl-hover);
}
.hdt-card-product .hdt-quantity__input,
.hdt-card-product .hdt-quantity__button {
  color: rgb(var(--hdt-btn-bg));
  background-color: transparent;
}
.hdt-quantity-wrapp {
  background-color: var(--atc-cl);
}


hdt-card-product{
  container-name: card-product;
  container-type: inline-size
}

.hdt-badge__wrapp {
  position: absolute;
  z-index: 3;
  top: 5px;
  right: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: flex-end;
  gap: 8px; 
  transition: opacity .4s, transform .4s;
}

.hdt-badge {
  line-height: 1.2;
  padding: 0 6px;
  min-width: 36px;
  text-transform: capitalize;
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  text-align: center;
  background-color: var(--badge-color-primary);
  color: var(--badge-color-secondary);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hdt-badge__shape-circle .hdt-badge,
.hdt-badge__shape-round .hdt-badge {
  /* min-width: 60px; */
  padding: 3px 10px;
  min-height: 24px;
}

.hdt-badge__shape-round .hdt-badge {
  border-radius: 4px;
}

.hdt-badge__shape-circle .hdt-badge {
  width: 42px;
  aspect-ratio: 1;
  /* word-break: break-word; */
  padding: 5px;
  border-radius: 60px;
}

.hdt-card-product__vendor {
  line-height: 1;
  color: rgb(var(--color-tertiary));
}
.hdt-card-product__vendor:hover {
  color: rgb(var(--color-accent));
}

.hdt-pr_btn :where(a, button),
hdt-wishlist,
hdt-compare,
:where(.hdt-card-product__btn-wishlist,.hdt-card-product__btn-compare) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}
.hdt-card-product__btn-ultra span:not(.hdt-svg-pr-icon) {
  white-space: nowrap;
}
@keyframes beat_heart {  
  0%, 100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
.hdt-pr_btn :where(a, button):hover .hdt-svg-pr-icon,
hdt-wishlist:hover .hdt-svg-pr-icon,
hdt-compare:hover .hdt-svg-pr-icon,
:where(.hdt-card-product__btn-wishlist,.hdt-card-product__btn-compare):hover .hdt-svg-pr-icon {
  -webkit-animation: .6s ease-in-out infinite beat_heart;
  animation: .6s ease-in-out infinite beat_heart;
}
@keyframes hdt_rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.hdt-pr_btn :where(a, button):before,
hdt-wishlist:before,
hdt-compare:before,
:where(.hdt-card-product__btn-wishlist,.hdt-card-product__btn-compare):before {
  width: 1em;
  aspect-ratio: 1;
  border-radius: 100%;
  border: solid 1px;
  border-top-color: transparent !important;
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  margin-block-start: -.5em;
  margin-inline-start: -.5em;
  animation: hdt_rotator .6s linear infinite var(--hdt-anim-state, paused);
  opacity: 0;
}
.hdt-pr_btn :where(a, button)[aria-busy="true"] :where(svg, span),
hdt-wishlist[aria-busy="true"] :where(svg, span),
hdt-compare[aria-busy="true"] :where(svg, span),
:where(.hdt-card-product__btn-wishlist,.hdt-card-product__btn-compare)[aria-busy="true"] :where(svg, span) {
  opacity: 0 !important;
}
.hdt-pr_btn :where(a, button)[aria-busy="true"]:before,
hdt-wishlist[aria-busy="true"]:before,
hdt-compare[aria-busy="true"]:before,
:where(.hdt-card-product__btn-wishlist,.hdt-card-product__btn-compare)[aria-busy="true"]:before {
  opacity: 1;
  --hdt-anim-state: running;
}
svg.hdt-svg-pr-icon {
  width: 1em;
  height: 1em;
}
svg.hdt-svg-pr-icon:not([fill]) {
  fill: currentColor;
}
.hdt-pr_btn .hdt-pr-card-icon {
  font-size: var(--text-lg);
}

.hdt-product-form {
  display: flex;
  flex-wrap: nowrap;
  /* justify-content: flex-end; */
}
wrapp-hdt-pr-frm,
wrapp-hdt-pr-frm>form {
  width: 100%;
}
.hdt-card-product .hdt-quantity-wrapp {
  display: none;
  max-width: 100%;
  background-color: rgb(var(--hdt-btn-color) / .75);
  backdrop-filter: blur(5px);
  /* display: flex; */
  flex: 0 1 0%;
  max-width: 100%;
}
.hdt-card-product .hdt-quantity-wrapp *:focus-visible {
  outline-offset: -2px;
}
.hdt-card-product .hdt-quantity-wrapp .hdt-quantity__input {
  font-size: 16px;
  width: max(100%, 36px);
  background-color: transparent;
  text-align: center;
  transform: scale(0.95);
}

.hdt-card-product .hdt-quantity__input::-webkit-outer-spin-button,
.hdt-card-product .hdt-quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.hdt-card-product .hdt-quantity__input[type=number] {
  -moz-appearance: textfield;
}
.hdt-card-product .hdt-quantity__button {
  min-width: 24px;
}
.hdt-card-product .hdt-quantity__button svg {
  width: 8px;
  margin: auto;
}
.hdt-ultra_btn_parent {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}
.hdt-card-product .hdt-quantity-wrapp + .hdt-pr_btn :where(a, button) {
  min-width: auto !important;
}

.hdt-card-product .hdt-pr-countdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hdt-card-product .hdt-pr-countdown span {
  margin: 0 3px;
}
.hdt-card-product .hdt-card-product__media .hdt-pr-countdown {
  position: absolute;
  font-size: 12px;
  bottom: 0px;
  left: 0;
  right: 0;
  padding: 5px;
  color: var(--pr-countdown-color);
  background-color: var(--pr-countdown-bg-color);
  /* border-radius: var(--radius-product-media); */
  backdrop-filter: blur(5px);
  z-index: 1;
}
hdt-countdown:not(.hdt-cd--hide) + .hdt-product-btns,
hdt-countdown:not(.hdt-cd--hide) + .hdt-product-btns + .hdt-size-list,
hdt-countdown:not(.hdt-cd--hide) + .hdt-product-btns + .hdt-product-btns,
hdt-countdown:not(.hdt-cd--hide) + .hdt-product-btns + .hdt-product-btns + .hdt-size-list{
  --min-bottom: 35px;
}
hdt-countdown-amount {
  direction: ltr;
}

.hdt-product-btns {
  z-index: 1;
  transition: all .5s;
}

.hdt-card-product__title {
  line-height: var(--font-heading-line-height);
  transition: all .25s ease;
  font-size: var(--pr-title-size);
  color: rgb(var(--color-pr-text));
}
.hdt-card-product__title:hover {
  color: rgb(var(--color-accent));
}
.hdt-card-product .hdt-price {
  font-size: var(--pr-price-size);
  color: rgb(var(--color-pr-price));
  /* font-weight: var(--font-normal); */
}
.hdt-card-product .hdt-compare-at-price {
  color: rgb(var(--color-pr-price));
  font-size: var(--pr-price-size);
}
.hdt-card-product .hdt-compare-at-price + .hdt-money {
  color: rgb(var(--color-pr-sale-price));
}

.hdt-card-product .hdt-price__list {
  gap: 5px;
}
.hdt-card-product .hdt-card-align-center .hdt-price__list {
  justify-content: center;
}
.hdt-card-product .hdt-card-align-right .hdt-price__list {
  justify-content: flex-end;
}

wrapp-hdt-color-list {
  margin-block-start: 7px;
}
wrapp-hdt-color-list > label {
  display: none;
}
.hdt-color-list {
  column-gap: 1rem;
}
.hdt-size-list {
  max-width: calc(100% - 60px);
  color: rgb(var(--hdt-btn-color));
  position: absolute;
  bottom: var(--min-bottom, 5px);
  z-index: 1;
  margin-block-end: 10px;
  left: 15px;
  font-size: 12px;
  column-gap: 7px;
  transition: opacity .4s, transform .4s;
}
.hdt-size-list > label {
  display: none;
}
.hdt-size-list-item {
  text-shadow: 1px 1px 1px rgb(var(--hdt-btn-color) / .35);
  /* text-shadow: 1px 1px rgb(var(--hdt-btn-color) / .35); */
}
a.hdt-size-list-item::before {
  content: "";
  display: inline;
  border-inline-start: thin solid rgb(var(--hdt-btn-bg) / .35);
  padding-inline-end: 7px;
}
.hdt-size-list>span:not(:last-of-type):after {
  content: ",";
  display: inline-block;
}

.hdt-card-product{
  .hdt-card-product__widget {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    bottom: var(--bottom-widget, 0);
    pointer-events: none;
    & > *:not(.hdt-badge__wrapp,hdt-countdown){
      pointer-events: auto;
    }
  }
  @media (hover:hover){
    &:hover{
      .hdt-scrolling-badge{
        transform: translateY(100%);
      }
    }
  }
  @media (hover:none){
    :has(.hdt-scrolling-badge){
      --bottom-widget: 31px;
    }
  }
  .hdt-scrolling-badge{
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
    transition: all .3s ease-in-out;
    position: static;
    min-height: 31px;

    .hdt-scrolling-inner{
      padding: .5rem .6rem;
      gap: .7rem;
      min-height: 31px;
      font-size: var(--text-xs);
      color: rgb(var(--hdt-btn-color));
      svg{
        width: 15px;
        fill: currentColor;
      }
    }
    .hdt-badge{
      line-height: 21px;
      font-size: var(--text-xs);
      padding: 0 10px;
      width: auto;
      aspect-ratio: auto;
    }
  }
}

:is(.hdt-pr-style1, .hdt-pr-style7, .hdt-pr-style9, .hdt-pr-list) {
  --wishlist-cl: rgb(var(--hdt-btn-color));
  --wishlist-bg-cl: transparent;
  --wishlist-cl-hover: rgb(var(--hdt-btn-bg));
  --wishlist-bg-cl-hover: transparent;
  --wishlist-cl-active: rgb(var(--hdt-btn-color));
  --wishlist-bg-cl-active: rgb(var(--hdt-btn-bg));
  
  --compare-cl: rgb(var(--hdt-btn-color));
  --compare-bg-cl: transparent;
  --compare-cl-hover: rgb(var(--hdt-btn-bg));
  --compare-bg-cl-hover: transparent;

  --quickview-cl: rgb(var(--hdt-btn-bg));
  --quickview-bg-cl: rgb(var(--hdt-btn-color));
  --quickview-cl-hover: rgb(var(--hdt-btn-color));
  --quickview-bg-cl-hover: rgb(var(--hdt-btn-bg));

  --atc-cl: rgb(var(--hdt-btn-color));
  --atc-bg-cl: rgb(var(--color-accent));
  --atc-cl-hover: rgb(var(--hdt-btn-color));
  --atc-bg-cl-hover: rgb(var(--color-accent));
}
:is(.hdt-pr-style1, .hdt-pr-style9, .hdt-pr-list) .hdt-pr-btns-group2 {
  top: 5px;
  left: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  transition: opacity .15s, left .25s;
}
:is(.hdt-pr-style1, .hdt-pr-style7, .hdt-pr-style8, .hdt-pr-style9) :where(hdt-wishlist,hdt-compare,.hdt-card-product__btn-wishlist,.hdt-card-product__btn-compare),
:is(.hdt-pr-style7, .hdt-pr-style9) .hdt-pr_btn:not(button,a) :where(.hdt-card-product__btn-quick-view),
.hdt-pr-style8 .hdt-pr_btn:not(button,a) :where(button,a),
:is(.hdt-pr-list) :where(hdt-wishlist,hdt-compare,.hdt-card-product__btn-wishlist,.hdt-card-product__btn-compare) {
  position: relative;
  width: 22px;
  aspect-ratio: 1;
  filter: drop-shadow(1px 1px 1px rgb(var(--color-base-text) / .35));
  /* filter: drop-shadow(1px 1px rgb(var(--hdt-btn-color) / .35)); */
  transition: color .25s, background-color .5s;
}
:is(.hdt-pr-style1, .hdt-pr-style3, .hdt-pr-style7, .hdt-pr-style9) .hdt-pr-btns-group1 {
  bottom: var(--min-bottom, 5px);
  right: 5px;
  gap: 8px;
  display: flex;
  align-items: flex-end;
  transition: opacity .5s, transform .5s;
}
:is(.hdt-pr-style1, .hdt-pr-style2, .hdt-pr-style3) .hdt-pr_btn .hdt-card-product__btn-quick-view,
:is(.hdt-pr-style2, .hdt-pr-style3) :where(hdt-wishlist.hdt-pr_btn, hdt-compare.hdt-pr_btn,.hdt-card-product__btn-wishlist,.hdt-card-product__btn-compare) {
  position: relative;
  width: 36px;
  aspect-ratio: 1;
  border-radius: var(--radius-button);
  justify-content: center;
  transition: color .25s, background-color .5s;
}
:is(.hdt-pr-style1, .hdt-pr-style2, .hdt-pr-style3) .hdt-pr_btn:not(button,a) :where(.hdt-card-product__btn-ultra) {
  position: relative;
  width: 36px;
  aspect-ratio: 1;
  border-radius: var(--radius-button);
  justify-content: center;
  transition: color .25s, background-color .5s;

}
:is(.hdt-pr-style1, .hdt-pr-style3, .hdt-pr-style4, .hdt-pr-style5) .hdt-pr_btn:not(button,a) :where(a, button) span:not(.hdt-pr-card-icon) {
  display: none;
}
:is(.hdt-pr-style1, .hdt-pr-style3, .hdt-pr-style6, .hdt-pr-style7, .hdt-pr-style9, .hdt-pr-list) .hdt-quantity-wrapp {
  border-end-start-radius: var(--radius-button);
  border-start-start-radius: var(--radius-button);
}
:is(.hdt-pr-style1, .hdt-pr-style7, .hdt-pr-style8, .hdt-pr-style9, .hdt-pr-list) :where(.hdt-card-product__btn-wishlist,.hdt-card-product__btn-compare) .hdt-svg-pr-icon,
:is(.hdt-pr-style1, .hdt-pr-style7, .hdt-pr-style8, .hdt-pr-style9, .hdt-pr-list) .hdt-pr_btn:not(button,a) :where(.hdt-card-product__btn-quick-view) .hdt-svg-pr-icon {
  font-size: var(--text-xl);
}

:is(.hdt-pr-style2, .hdt-pr-style3, .hdt-pr-style4, .hdt-pr-style5) {
  --wishlist-cl: rgb(var(--hdt-btn-bg));
  --wishlist-bg-cl: rgb(var(--hdt-btn-color));
  --wishlist-cl-hover: rgb(var(--hdt-btn-color));
  --wishlist-bg-cl-hover: rgb(var(--hdt-btn-bg));
  --wishlist-cl-active: rgb(var(--hdt-btn-bg));
  --wishlist-bg-cl-active: rgb(var(--hdt-btn-color));
  
  --compare-cl: rgb(var(--hdt-btn-bg));
  --compare-bg-cl: rgb(var(--hdt-btn-color));
  --compare-cl-hover: rgb(var(--hdt-btn-color));
  --compare-bg-cl-hover: rgb(var(--hdt-btn-bg));

  --quickview-cl: rgb(var(--hdt-btn-bg));
  --quickview-bg-cl: rgb(var(--hdt-btn-color));
  --quickview-cl-hover: rgb(var(--hdt-btn-color));
  --quickview-bg-cl-hover: rgb(var(--hdt-btn-bg));

  --atc-cl: rgb(var(--hdt-btn-color));
  --atc-bg-cl: rgb(var(--color-accent));
  --atc-cl-hover: rgb(var(--hdt-btn-color));
  --atc-bg-cl-hover: rgb(var(--color-accent));
}
:is(.hdt-pr-style2){
  --atc-cl: rgb(var(--hdt-btn-bg));
  --atc-bg-cl: rgb(var(--hdt-btn-color));
  --atc-cl-hover: rgb(var(--hdt-btn-color));
  --atc-bg-cl-hover: rgb(var(--hdt-btn-bg));
}
:is(.hdt-pr-style2) .hdt-product-btns {
  transform: translateY(0);
  bottom: var(--min-bottom, 5px);
  gap: 5px;
  transition: opacity .4s, transform .4s;
}
:is(.hdt-pr-style2) wrapp-hdt-pr-frm {
  width: auto;
}

:is(.hdt-pr-style2, .hdt-pr-style4) .hdt-size-list {
  --min-bottom-plus: calc(var(--min-bottom, 0px) + 36px);
  bottom: max(var(--min-bottom-plus), 46px);
  right: 15px;
  justify-content: center;
}

:is(.hdt-pr-style3, .hdt-pr-style5) .hdt-pr-btns-group2  {
  right: 5px;
  row-gap: 5px;
  --min-bottom-plus: calc(var(--min-bottom, 0px) + 42px);
  bottom: max(var(--min-bottom-plus), 46px);
}
:is(.hdt-pr-style3, .hdt-pr-style5, .hdt-pr-style6, .hdt-pr-style7, .hdt-pr-style8) .hdt-badge__wrapp {
  right: auto;
  left: 5px;
}
:is(.hdt-pr-style3) .hdt-size-list {
  bottom: var(--min-bottom, 0px);
}

:is(.hdt-pr-style4, .hdt-pr-style5, .hdt-pr-style6) :where(hdt-wishlist.hdt-pr_btn, hdt-compare.hdt-pr_btn,.hdt-card-product__btn-wishlist,.hdt-card-product__btn-compare) {
  position: relative;
  z-index: auto;
  min-width: 36px;
  aspect-ratio: 1;
}
:is(.hdt-pr-style4, .hdt-pr-style5, .hdt-pr-style6) .hdt-pr_btn:not(button,a) :where(.hdt-card-product__btn-quick-view) {
  width: 36px;
  aspect-ratio: 1;
}
.hdt-pr-style4 .hdt-pr-btns-group1 {
  bottom: 0;
  background-color: var(--atc-bg-cl);
}
:is(.hdt-pr-style4, .hdt-pr-style5, .hdt-pr-style7, .hdt-pr-style9) .hdt-ultra_btn_parent  {
  flex: 1;
}
.hdt-pr-style4 .hdt-product-form,
.hdt-pr-style4 .hdt-pr_btn :where(a,button) {
  width: 100%;
  height: 36px;
}
:is(.hdt-pr-style4, .hdt-pr-style5) .hdt-card-product__media .hdt-pr-countdown {
  bottom: var(--min-bottom, 0);
  transition: bottom .75s;
}
:is(.hdt-pr-style4) hdt-countdown:not(.hdt-cd--hide),
:is(.hdt-pr-style4) hdt-countdown:not(.hdt-cd--hide) + .hdt-product-btns + .hdt-size-list {
  --min-bottom: 36px;
}

:is(.hdt-pr-style5) .hdt-pr-btns-group1 {
  bottom: var(--min-bottom, 5px);  
  right: 5px;
  left: auto;
  /* background-color: var(--atc-bg-cl); */
}
:is(.hdt-pr-style5) .hdt-pr_btn:not(button,a) :where(a,button) {
  width: 36px;
  aspect-ratio: 1;
}
:is(.hdt-pr-style5) :is(.hdt-pr_btn:not(button,a) :where(a,button), hdt-wishlist, hdt-compare,.hdt-card-product__btn-wishlist,.hdt-card-product__btn-compare) {
  transition: .5s;
}


:is(.hdt-pr-style6) {
  --wishlist-cl: rgb(var(--hdt-btn-bg));
  --wishlist-bg-cl: rgb(var(--hdt-btn-color));
  --wishlist-cl-hover: rgb(var(--hdt-btn-color));
  --wishlist-bg-cl-hover: rgb(var(--hdt-btn-bg));
  --wishlist-cl-active: rgb(var(--hdt-btn-bg));
  --wishlist-bg-cl-active: rgb(var(--hdt-btn-color));
  
  --compare-cl: rgb(var(--hdt-btn-bg));
  --compare-bg-cl: rgb(var(--hdt-btn-color));
  --compare-cl-hover: rgb(var(--hdt-btn-color));
  --compare-bg-cl-hover: rgb(var(--hdt-btn-bg));

  --quickview-cl: rgb(var(--hdt-btn-bg));
  --quickview-bg-cl: rgb(var(--hdt-btn-color));
  --quickview-cl-hover: rgb(var(--hdt-btn-color));
  --quickview-bg-cl-hover: rgb(var(--hdt-btn-bg));

  --atc-cl: rgb(var(--hdt-btn-color));
  --atc-bg-cl: rgb(var(--color-accent));
  --atc-cl-hover: rgb(var(--hdt-btn-color));
  --atc-bg-cl-hover: rgb(var(--color-accent));
}

:is(.hdt-pr-style6, .hdt-pr-style7, .hdt-pr-style8) .hdt-product-btns  {
  right: 5px;
  row-gap: 5px;
  bottom: var(--min-bottom, 5px);
}
:is(.hdt-pr-style6, .hdt-pr-style7, .hdt-pr-style9) :where(hdt-wishlist.hdt-pr_btn, hdt-compare.hdt-pr_btn,.hdt-card-product__btn-wishlist,.hdt-card-product__btn-compare),
:is(.hdt-pr-style6, .hdt-pr-style7, .hdt-pr-style9) .hdt-pr_btn:not(button,a) :where(button, a) {  
  border-radius: var(--radius-button);
  transition: color .25s, background-color .5s;
}
:is(.hdt-pr-style6) .hdt-pr-btns-group1 .hdt-pr_btn:not(button,a) :where(a, button) {
  width: auto;
  height: 40px;
  aspect-ratio: auto;
  padding: 5px 15px;
  overflow: hidden;
  min-width: 136px !important;
}
:is(.hdt-pr-style6, .hdt-pr-style7, .hdt-pr-style9) .hdt-pr-btns-group1 {
  margin-block-start: 10px;
}
:is(.hdt-pr-style6, .hdt-pr-list) .hdt-quantity-wrapp {
  background-color: color-mix(in oklab, rgb(var(--hdt-btn-color)) 95%, rgb(var(--hdt-btn-bg)));
}

:is(.hdt-pr-style7, .hdt-pr-style9) {  
  --atc-cl: rgb(var(--color-accent));
  --atc-bg-cl: transparent;
  --atc-cl-hover: rgb(var(--hdt-btn-color));
  --atc-bg-cl-hover: rgb(var(--color-accent));
  
  --quickview-cl: rgb(var(--hdt-btn-color));
  --quickview-bg-cl: transparent;
  --quickview-cl-hover: rgb(var(--hdt-btn-bg));
  --quickview-bg-cl-hover: transparent;
}
.text_may_break :is(.hdt-pr-style7, .hdt-pr-style9) {  
  --atc-bg-cl-hover: rgb(var(--hdt-btn-bg) / 0.1);
}
:is(.hdt-pr-style7, .hdt-pr-style9) .hdt-card-product__wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid rgb(var(--color-line-border) / .5);
  border-radius: max(var(--radius-product-media), var(--radius-product-card));
}
:is(.hdt-pr-style7, .hdt-pr-style9) .hdt-card-product__media-wrapp {
  border-start-start-radius: max(var(--radius-product-media), var(--radius-product-card));
  border-start-end-radius: max(var(--radius-product-media), var(--radius-product-card));
}
:is(.hdt-pr-style7, .hdt-pr-style9) .hdt-quantity-wrapp {
  background-color: rgb(var(--hdt-btn-bg) / .05);
}
.text_may_break :is(.hdt-pr-style7, .hdt-pr-style9, .hdt-pr-list) .hdt-quantity-wrapp {
  border: 1px solid rgb(var(--hdt-btn-bg) / .05);
  background-color: rgb(var(--hdt-btn-bg) / .05);
}
.text_may_break :is(.hdt-pr-style7, .hdt-pr-style9, .hdt-pr-list) .hdt-quantity__input,
.text_may_break :is(.hdt-pr-style7, .hdt-pr-style9, .hdt-pr-list) .hdt-quantity__button {
  --atc-cl: rgb(var(--hdt-btn-bg) / 1);
}
:is(.hdt-pr-style7, .hdt-pr-style9) .hdt-pr-btns-group1 .hdt-pr_btn:not(button,a) :where(a, button) {
  height: 40px;
  aspect-ratio: auto;
  padding: 5px 15px;
  overflow: hidden;
  width: 100%;
  border: 1px solid rgb(var(--color-accent));
  flex-direction: row-reverse;
}
:is(.hdt-pr-style7, .hdt-pr-style9) .hdt-pr-btns-group1 .hdt-pr_btn:not(button,a) :where(a, button):not(:hover) {
  border-color: rgb(var(--color-line-border) / .5);
}
:is(.hdt-pr-style7, .hdt-pr-style9) .hdt-card-product__info {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 5px 5px;
}
:is(.hdt-pr-style7, .hdt-pr-style9, .hdt-pr-list) .hdt-pr-btns-group1 {
  width: 100%;
  flex: 1;
}

.hdt-pr-style8 {  
  --wishlist-cl: rgb(var(--color-foreground2));
  --wishlist-bg-cl: transparent;
  --wishlist-cl-hover: rgb(var(--hdt-btn-color));
  --wishlist-bg-cl-hover: transparent;
  --wishlist-cl-active: rgb(var(--hdt-btn-color));
  --wishlist-bg-cl-active: transparent;
  
  --compare-cl: rgb(var(--color-foreground2));
  --compare-bg-cl: transparent;
  --compare-cl-hover: rgb(var(--hdt-btn-color));
  --compare-bg-cl-hover: transparent;

  --quickview-cl: rgb(var(--color-foreground2));
  --quickview-bg-cl: transparent;
  --quickview-cl-hover: rgb(var(--hdt-btn-color));
  --quickview-bg-cl-hover: transparent;

  --atc-cl: rgb(var(--color-foreground2));
  --atc-bg-cl: transparent;
  --atc-cl-hover: rgb(var(--hdt-btn-color));
  --atc-bg-cl-hover: transparent;
}
.hdt-pr-style8 .hdt-card-product__btn-ultra svg.hdt-svg-atc {
  margin-inline-start: -2px;
}
.hdt-pr-style8 .hdt-size-list {
  color: rgb(var(--color-foreground2));
  margin-block-end: 5px;
}

.hdt-pr-style9 .hdt-pr-btns-group1 .hdt-pr_btn:not(button,a) :where(a,button) {
  width: 100%;
  border: 1px solid rgb(var(--hdt-btn-color) / .1);
}
.hdt-pr-style9 .hdt-size-list {
  right: 15px;
  justify-content: center;
}
.hdt-pr-style9 hdt-countdown:not(.hdt-cd--hide)+.hdt-product-btns,
.hdt-pr-style9 hdt-countdown:not(.hdt-cd--hide)+.hdt-product-btns+.hdt-size-list {
  --min-bottom: 36px;
}

.hdt-pr-style10:has(.hdt-cd--enabled) .hdt-card-product__info {
  --min-bottom: 40px;
}
.hdt-pr-style10 .hdt-size-list {
  position: static;
  margin-block-end: auto;
  opacity: 1 !important;
  transform: translateY(0px) !important;
}
.hdt-pr-style10 wrapp-hdt-color-list {
  /* margin-block-start: auto; */
}
.hdt-pr-style10 .hdt-size-list {
  color: rgb(var(--hdt-btn-color));
}

.hdt-pr-style10 .hdt-product__countdown-item hdt-countdown-text {
  display: none;
}
.hdt-product__countdown-item {
  display: -webkit-inline-box;
}
.hdt-product__countdown-item hdt-countdown-amount {
  font-size: var(--text-base);
  margin: 0;
  line-height: 1;
  display: inline-block;
}
.hdt-pr-style10 .hdt-product__countdown-item .hdt-cd-mini-text {
  display: inline-block;
}
.hdt-pr-style10 .hdt-product__countdown-item:last-child span {
  display: none;
}
@media(hover: hover) {
  .hdt-card-product{
    .hdt-scrolling-badge{
      position: absolute;
      --scroll-badge: 37px;
      min-height: 37px;

      .hdt-scrolling-inner{
        padding: 0.8rem 0.35rem;
        gap: 0.7rem;
        font-size: var(--text-sm);
        .hdt-badge{
          font-size: var(--text-sm);
        }
      }
    }
  }
  @container card-product (min-width: 300px) {
    .hdt-pr-style10 .hdt-card-product__media .hdt-pr-countdown {
      background-color: transparent;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      bottom: 20px;
      transition: bottom .3s;
    }
    .hdt-pr-style10 .hdt-card-product__media .hdt-countdown__inner {
      gap: 10px;
    }
    .hdt-pr-style10:has(.hdt-cd--enabled) .hdt-card-product__info {
      --min-bottom: 20px;
    }
    .hdt-pr-style10 .hdt-card-product__media .hdt-product__countdown-item {
      background-color: rgb(var(--hdt-btn-bg));
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
      min-width: 60px;
      aspect-ratio: 1;
      border-radius: max(var(--radius-product-card), 5px);
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .hdt-pr-style10 .hdt-product__countdown-item hdt-countdown-amount {
      font-size: var(--text-xl);
      margin: 0;
    }
    .hdt-pr-style10 .hdt-product__countdown-item hdt-countdown-text {
      display: grid;
      font-weight: 400;
      color: rgb(var(--color-tertiary));
    }
    .hdt-pr-style10 .hdt-product__countdown-item .hdt-cd-mini-text {
      display: none;
    }
    .hdt-pr-style10:hover .hdt-card-product__media .hdt-pr-countdown {
      bottom: -100px;
    }
  }
}

:is(.hdt-pr-list) {
  --atc-cl: rgb(var(--hdt-btn-color));
  --atc-bg-cl: rgb(var(--color-accent));
  --atc-cl-hover: rgb(var(--hdt-btn-color));
  --atc-bg-cl-hover: rgb(var(--color-accent));

  --quickview-cl: rgb(var(--color-accent));
  --quickview-bg-cl: transparent;
  --quickview-cl-hover: rgb(var(--hdt-btn-color));
  --quickview-bg-cl-hover: rgb(var(--hdt-btn-bg));
}
:is(.hdt-pr-list) :where(.hdt-card-product__btn-ultra),
:is(.hdt-pr-list) :where(.hdt-card-product__btn-quick-view) {
  position: relative;
  width: 36px;
  aspect-ratio: 1;
  border-radius: var(--radius-button);
  justify-content: center;
  transition: color .25s, background-color .5s, border-color .5s;
}
:is(.hdt-pr-list) .hdt-pr-btns-group1 .hdt-pr_btn:not(button,a) :where(a, button) {
  height: 40px;
  aspect-ratio: auto;
  padding: 5px 15px;
  overflow: hidden;
  width: 100%;
  flex-direction: row-reverse;
  border: 1px solid rgb(var(--hdt-btn-bg));
}
:is(.hdt-pr-list) .hdt-pr-btns-group1 .hdt-pr_btn:not(button,a) :where(a,button):not(:hover) {
  border: 1px solid rgb(var(--color-accent));
}
:is(.hdt-pr-list) .hdt-pr-btns-group1 .hdt-pr_btn:not(button,a) :where(.hdt-card-product__btn-ultra) {
  border: 1px solid rgb(var(--color-accent));
  box-shadow: 0 5px 15px rgb(var(--hdt-btn-bg) / 15%);
}
:is(.hdt-pr-list) wrapp-hdt-pr-frm :where(.hdt-ultra_btn_parent) {
  width: 100%;
  flex: 1 1 100%;
}
:is(.hdt-pr-list) .hdt-pr-btns-group1 {
  min-width: 136px;
  gap: 10px;
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 2;
}
:is(.hdt-pr-list) :where(.hdt-card-product__btn-ultra, .hdt-card-product__btn-quick-view) span:not(.hdt-pr-card-icon) {
  display: block;
  transform: translateY(0);
  transition: opacity .15s, transform .25s;
}
:is(.hdt-pr-list) :where(.hdt-card-product__btn-ultra, .hdt-card-product__btn-quick-view) .hdt-pr-card-icon {
  font-size: var(--text-2xl);
  transform: translateY(-1.7em);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-block-start: -.5em;
  margin-inline-start: -.5em;
  opacity: 0;
  transition: opacity .15s, transform .25s;
}
.dir--rtl :is(.hdt-pr-list) :where(.hdt-card-product__btn-ultra, .hdt-card-product__btn-quick-view) .hdt-pr-card-icon {
  left: auto;
  right: 50%;
}
:is(.hdt-pr-list) :where(.hdt-card-product__btn-ultra, .hdt-card-product__btn-quick-view):hover span:not(.hdt-pr-card-icon) {
  transform: translateY(2em);
  opacity: 0;
}
:is(.hdt-pr-list) :where(.hdt-card-product__btn-ultra, .hdt-card-product__btn-quick-view):hover .hdt-pr-card-icon {
  opacity: 1;
  transform: translateY(0);
}
:is(.hdt-pr-list) .hdt-size-list {
  position: static;
  margin-block-start: 10px;
  color: rgb(var(--color-foreground));
  opacity: 1 !important;
  transform: translateY(0) !important;
}
:is(.hdt-pr-list) .hdt-size-list-item {
  text-shadow: none;
}
:is(.hdt-pr-list).hdt-card-product .hdt-color-list-color {
  width: 30px;
  height: 30px;
  line-height: 28px;
}
:is(.hdt-pr-list) wrapp-hdt-color-list > label {
  display: block;
  font-weight: 500;
}
:is(.hdt-pr-list) .hdt-size-list > label {
  display: inline-block;
  font-weight: 500;
}
:is(.hdt-pr-list) .hdt-pr-description {
  display: none;
  margin-block-start: 15px;
}
:is(.hdt-pr-list) .hdt-card-product__wrapper {
  padding: 20px 10px;
  gap: 15px;
  border: solid 1px rgb(var(--color-line-border));
  /* grid-template-rows: repeat(var(--bs-rows, 2), 1fr);
  grid-template-columns: [thumb] 180px [infor] auto [atc] 200px; */
  grid-template: auto auto / max(min(40%, 180px), 120px) auto auto;
  align-items: flex-start;
}
:is(.hdt-pr-list) .hdt-card-product__wrapper .hdt-card-product__info {
  margin-block-start: 0;
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
}
:is(.hdt-pr-list) .hdt-card-product__media {
  min-width: 80px;
  width: 100%;
  max-width: 180px;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 3;
}
:is(.hdt-pr-list)  .hdt-card-product__media .hdt-pr-countdown {
  font-size: 10px;
}
.hdt-pr-uppercase_title .hdt-card-product__title {
  text-transform: uppercase;
}
@media (hover: hover) {
  .hdt-card-product:not(:hover) .hdt-size-list,
  .hdt-pr-style2:not(:hover) .hdt-product-btns {
    opacity: 0;
    transform: translateY(-100%);
  }
  .hdt-pr-style1:not(:hover) .hdt-pr-btns-group2,
  .hdt-pr-style9:not(:hover) .hdt-pr-btns-group2 {
    opacity: 0;
    left: -5px;
  }
  .hdt-pr-style1:not(:hover) .hdt-pr-btns-group1 {
    opacity: 0;
    transform: translate(50%, 0%);
  }  
  
  .hdt-pr-style3:not(:hover) .hdt-pr-btns-group1 {
    opacity: 0;
    transform: translate(50%, -50%);
  }
  :is(.hdt-pr-style3, .hdt-pr-style5, .hdt-pr-style6, .hdt-pr-style7):not(:hover) .hdt-pr-btns-group2,
  .hdt-pr-style8:not(:hover) .hdt-product-btns {
    opacity: 0;
    right: -5px;
  }

  .hdt-pr-style4:not(:hover) .hdt-product-btns {
    opacity: 0;
    transform: translateY(100%);
  }
  :is(.hdt-pr-style4, .hdt-pr-style5):not(:hover) .hdt-card-product__media .hdt-pr-countdown {
    --min-bottom: 0px;
    transition: bottom .25s;
  }

  .hdt-pr-style5:not(:hover) .hdt-pr-btns-group1 {
    opacity: 0;
    transform: translateY(100%);
  }

  :is(.hdt-pr-style7, .hdt-pr-style9) .hdt-pr_btn:not(button,a) :where(.hdt-card-product__btn-quick-view):hover  {
    color: var(--atc-hover-qv);
    background-color: var(--atc-hover-bg-qv);
  }

  .hdt-pr-style8 .hdt-product-btns {
    top: 5px;
    bottom: auto;
  } 
  
  @container card-product (min-width: 210px) {
    hdt-wishlist.hdt-pr_btn .hdt-svg-pr-icon,
    hdt-compare.hdt-pr_btn .hdt-svg-pr-icon,
    :where(.hdt-card-product__btn-wishlist,.hdt-card-product__btn-compare) .hdt-svg-pr-icon,
    :is(.hdt-pr-style7, .hdt-pr-style9) .hdt-pr_btn:not(button,a) :where(.hdt-card-product__btn-quick-view) .hdt-svg-pr-icon {
      font-size: var(--text-xl);
    }
    .hdt-badge__wrapp {
      top: 15px;
      right: 15px;
    }
    .hdt-badge {
      font-weight: var(--font-medium);
    }
    .hdt-size-list {
      max-width: 100%;
      font-size: 14px;
    }
    .hdt-card-product:not(:is(.hdt-pr-list)) .hdt-card-product__media .hdt-pr-countdown {
      font-size: 14px !important;
    }
    .hdt-card-product:not(:is(.hdt-pr-list)) .hdt-quantity-wrapp {
      display: flex;
      flex: 1 1 0%;
      padding-inline-end: 1px;
      margin-inline-end: -1px;
    }
    hdt-countdown:not(.hdt-cd--hide)+.hdt-product-btns,
    hdt-countdown:not(.hdt-cd--hide)+.hdt-product-btns+.hdt-size-list,
    hdt-countdown:not(.hdt-cd--hide)+.hdt-product-btns+.hdt-product-btns,
    hdt-countdown:not(.hdt-cd--hide)+.hdt-product-btns+.hdt-product-btns+.hdt-size-list {
      --min-bottom: 40px;
    }

    :is(.hdt-pr-style1, .hdt-pr-style9) .hdt-pr-btns-group2 {
      top: 11px;
      left: 11px;
    }
    .hdt-pr-style1 .hdt-pr-btns-group1 {
      bottom: 50%;
      right: 50%;
      transform: translate(50%, 50%);
      align-items: center;
    }  
    .hdt-pr-style1 .hdt-pr_btn:not(button,a) :where(a, button),  
    .hdt-pr-style3 .hdt-pr-btns-group1 .hdt-pr_btn:not(button,a) :where(a, button) {
      width: max-content;
      height: 40px;
      aspect-ratio: auto;
      padding: 5px 15px;
      overflow: hidden;
      min-width: 136px;
    }
    .hdt-pr-style1 .hdt-pr_btn:not(button,a) :where(a, button) span:not(.hdt-pr-card-icon),
    .hdt-pr-style3 .hdt-pr-btns-group1 .hdt-pr_btn:not(button,a) :where(a, button) span:not(.hdt-pr-card-icon),
    :is(.hdt-pr-style5, .hdt-pr-style6) .hdt-pr_btn:not(button,a) :where(a, button):not(.hdt-card-product__btn-quick-view) span:not(.hdt-pr-card-icon){
      display: block;
      transform: translateY(0);
      transition: opacity .15s, transform .25s;
    }
    .hdt-pr-style1 .hdt-pr_btn:not(button,a) :where(a, button) .hdt-pr-card-icon,
    .hdt-pr-style3 .hdt-pr-btns-group1 .hdt-pr_btn:not(button,a) .hdt-pr-card-icon,
    :is(.hdt-pr-style5, .hdt-pr-style6) .hdt-pr_btn:not(button,a) :where(a, button):not(.hdt-card-product__btn-quick-view) .hdt-pr-card-icon{
      font-size: var(--text-2xl);
      transform: translateY(-1.7em);
      position: absolute;
      top: 50%;
      left: 50%;
      margin-block-start: -.5em;
      margin-inline-start: -.5em;
      opacity: 0;
      transition: opacity .15s, transform .25s;
    }
    .hdt-pr-style1 .hdt-pr_btn:not(button,a) :where(a, button):hover span:not(.hdt-pr-card-icon),
    .hdt-pr-style3 .hdt-pr-btns-group1 .hdt-pr_btn:not(button,a):hover span:not(.hdt-pr-card-icon),
    :is(.hdt-pr-style5, .hdt-pr-style6) .hdt-pr_btn:not(button,a) :where(a, button):not(.hdt-card-product__btn-quick-view):hover span:not(.hdt-pr-card-icon) {
      transform: translateY(2em);
      opacity: 0;
    }
    .hdt-pr-style1 .hdt-pr_btn:not(button,a) :where(a, button):hover .hdt-pr-card-icon,
    .hdt-pr-style3 .hdt-pr-btns-group1 .hdt-pr_btn:not(button,a):hover .hdt-pr-card-icon,
    :is(.hdt-pr-style5, .hdt-pr-style6) .hdt-pr_btn:not(button,a) :where(a, button):not(.hdt-card-product__btn-quick-view):hover .hdt-pr-card-icon {
      opacity: 1;
      transform: translateY(0);
    }
    :is(.hdt-pr-style1, .hdt-pr-style5, .hdt-pr-style6) .hdt-size-list {
      right: 15px;
      justify-content: center;
    }
    :is(.hdt-pr-style1, .hdt-pr-style3, .hdt-pr-style6, .hdt-pr-style7, .hdt-pr-style9) .hdt-pr-btns-group1 .hdt-quantity-wrapp + .hdt-pr_btn :where(a, button) {
      border-end-start-radius: 0px;
      border-start-start-radius: 0px;
    }

    .hdt-pr-style2 .hdt-product-btns {
      bottom: var(--min-bottom, 20px);
      gap: 8px;
    }  
    :is(.hdt-pr-style2) .hdt-size-list {
      bottom: max(var(--min-bottom-plus), 55px);
    }

    :is(.hdt-pr-style3, .hdt-pr-style5, .hdt-pr-style6, .hdt-pr-style7, .hdt-pr-style8) .hdt-badge__wrapp {
      left: 15px;
      right: auto;
    }
    :is(.hdt-pr-style3, .hdt-pr-style5, .hdt-pr-style6) .hdt-pr-btns-group2 {
      top: 15px;
      right: 15px;
      bottom: auto;
    }
    .hdt-pr-style3 .hdt-pr-btns-group1 {
      bottom: var(--min-bottom, 15px);
      right: 50%;
      transform: translate(50%, 0%);
      align-items: center;
    }
    :is(.hdt-pr-style3) .hdt-size-list {
      --min-bottom-plus: calc(var(--min-bottom, 0px) + 36px);
      bottom: max(var(--min-bottom-plus), 55px);
      right: 15px;
      justify-content: center;
    }

    :is(.hdt-pr-style5) :where(hdt-wishlist.hdt-pr_btn, hdt-compare.hdt-pr_btn,.hdt-card-product__btn-wishlist,.hdt-card-product__btn-compare) {
      min-width: 40px;
    }
    :is(.hdt-pr-style5) .hdt-pr_btn:not(button,a) :where(.hdt-card-product__btn-quick-view) {
      width: 40px;
    }
    :is(.hdt-pr-style5) .hdt-product-form,
    :is(.hdt-pr-style5) .hdt-pr_btn :where(a,button) {
      height: 40px;
    }
    :is(.hdt-pr-style5) hdt-countdown:not(.hdt-cd--hide),
    :is(.hdt-pr-style5) hdt-countdown:not(.hdt-cd--hide) + .hdt-product-btns + .hdt-size-list {
      --min-bottom: 40px;
    }

    .hdt-pr-style5 .hdt-pr-btns-group1 {
      bottom: 0;
      right: 0;
      left: 0;
      /* background-color: var(--atc-bg-cl); */
    }
    :is(.hdt-pr-style5, .hdt-pr-style6, .hdt-pr-style7, .hdt-pr-style9) .hdt-quantity-wrapp {
      flex: 0 1 0%;
    }
    .hdt-pr-style5 .hdt-pr_btn :where(a,button).hdt-card-product__btn-ultra {
      width: 100%;
      aspect-ratio: auto;
      border-radius: 0 !important;
    }
    .hdt-pr-style5 .hdt-pr-btns-group2 {
      row-gap: 0;
    }
    :is(.hdt-pr-style5) .hdt-size-list {
      --min-bottom-plus: calc(var(--min-bottom, 0px) + 40px);
      bottom: max(var(--min-bottom-plus), 45px);
      right: 15px;
      justify-content: center;
    }
    :is(.hdt-pr-style5) hdt-countdown:not(.hdt-cd--hide)
    :is(.hdt-pr-style5) hdt-countdown:not(.hdt-cd--hide)+.hdt-product-btns,
    :is(.hdt-pr-style5) hdt-countdown:not(.hdt-cd--hide) + .hdt-product-btns + .hdt-size-list {
      --min-bottom: 40px;
    }
    .hdt-pr-style5 :where(hdt-wishlist.hdt-pr_btn,hdt-compare.hdt-pr_btn):last-child,
    .hdt-pr-style5 .hdt-pr_btn:not(button,a):last-child :where(a,button),
    .hdt-pr-style5 .hdt-pr_btn:not(button,a):last-child :where(.hdt-card-product__btn-wishlist,.hdt-card-product__btn-compare) {
      border-end-start-radius: var(--radius-button);
      border-end-end-radius: var(--radius-button);
    }
    .hdt-pr-style5 :where(hdt-wishlist.hdt-pr_btn,hdt-compare.hdt-pr_btn):first-child,
    .hdt-pr-style5 .hdt-pr_btn:not(button,a):first-child :where(a,button),
    .hdt-pr-style5 .hdt-pr_btn:not(button,a):first-child :where(.hdt-card-product__btn-wishlist,.hdt-card-product__btn-compare) {
      border-start-start-radius: var(--radius-button);
      border-start-end-radius: var(--radius-button);
    }
    
    .hdt-pr-style7 .hdt-pr-btns-group2,
    .hdt-pr-style8 .hdt-product-btns {
      top: 15px;
      right: 15px;
    }  
    :is(.hdt-pr-style7, .hdt-pr-style9) .hdt-quantity-wrapp + .hdt-pr_btn:not(button,a) :where(button,a) span:not(.hdt-pr-card-icon) {
      display: none;
    }
    :is(.hdt-pr-style7, .hdt-pr-style9) .hdt-card-product__info {
      padding: 0 15px 15px;
    }
    
    .hdt-pr-style8 .hdt-product-btns  {
      gap: 8px;
    }
    
    :is(.hdt-pr-list) .hdt-badge__wrapp .hdt-badge {    
      font-size: var(--text-xs);
    }
    .hdt-badge__shape-circle :is(.hdt-pr-list) .hdt-badge__wrapp .hdt-badge {
      width: 42px;
    }
    :is(.hdt-pr-list) .hdt-badge__wrapp {
      top: 5px;
      right: 5px;
    }
    :is(.hdt-pr-list) .hdt-badge {
      font-weight: var(--font-mormal);
    }
  }

  @container card-product (min-width: 240px) {
    .hdt-badge__wrapp .hdt-badge {
      font-size: var(--text-base);
    }
    .hdt-badge__shape-circle .hdt-badge__wrapp .hdt-badge {
      width: 60px;
    }
    :is(.hdt-pr-style4) .hdt-pr_btn:not(button,a) :where(a, button):not(.hdt-card-product__btn-quick-view) span:not(.hdt-pr-card-icon){
      display: block;
      transform: translateY(0);
      transition: opacity .15s, transform .25s;
    }
    :is(.hdt-pr-style4) .hdt-pr_btn:not(button,a) :where(a, button):not(.hdt-card-product__btn-quick-view) .hdt-pr-card-icon{
      font-size: var(--text-2xl);
      transform: translateY(-1.7em);
      position: absolute;
      top: 50%;
      left: 50%;
      margin-block-start: -.5em;
      margin-inline-start: -.5em;
      opacity: 0;
      transition: opacity .15s, transform .25s;
    }
    :is(.hdt-pr-style4) .hdt-pr_btn:not(button,a) :where(a, button):not(.hdt-card-product__btn-quick-view):hover span:not(.hdt-pr-card-icon) {
      transform: translateY(2em);
      opacity: 0;
    }
    :is(.hdt-pr-style4) .hdt-pr_btn:not(button,a) :where(a, button):not(.hdt-card-product__btn-quick-view):hover .hdt-pr-card-icon {
      opacity: 1;
      transform: translateY(0);
    }
    :is(.hdt-pr-style4) :where(hdt-wishlist.hdt-pr_btn, hdt-compare.hdt-pr_btn,.hdt-card-product__btn-wishlist,.hdt-card-product__btn-compare) {
      min-width: 40px;
    }
    :is(.hdt-pr-style4) .hdt-pr_btn:not(button,a) :where(.hdt-card-product__btn-quick-view) {
      width: 40px;
    }
    :is(.hdt-pr-style4) .hdt-product-form,
    :is(.hdt-pr-style4) .hdt-pr_btn :where(a,button) {
      height: 40px;
    }
    :is(.hdt-pr-style4) hdt-countdown:not(.hdt-cd--hide),
    :is(.hdt-pr-style4) hdt-countdown:not(.hdt-cd--hide) + .hdt-product-btns + .hdt-size-list {
      --min-bottom: 40px;
    }
    :is(.hdt-pr-style7, .hdt-pr-style9) .hdt-pr-btns-group1 .hdt-pr_btn:not(button,a) :where(a, button) {
      justify-content: space-between;
    }
    :is(.hdt-pr-style7,.hdt-pr-style9) .hdt-quantity-wrapp+.hdt-pr_btn:not(button,a) :where(button,a) span:not(.hdt-pr-card-icon) {
      display: block;
    }
    :is(.hdt-pr-style10):not(:hover) .hdt-card-product__info {
      opacity: 0;
    }
    :is(.hdt-pr-style10) .hdt-card-product__info {
      color: rgb(var(--hdt-btn-color));
      --color-pr-price: rgb(var(--hdt-btn-color));
      position: absolute;
      padding-block-start: 20px;
      padding-block-end: var(--min-bottom, 20px);
      padding-inline-start: 10px;
      padding-inline-end: 10px;
      transition: opacity .4s, transform .4s;
      margin-top: 0;
      background: linear-gradient(0deg, #0009 0, #0000);
    }
    :is(.hdt-pr-style10) .hdt-card-product__title,
    :is(.hdt-pr-style10) .hdt-size-list {
      color: rgb(var(--hdt-btn-color));
    }
  }

  @container card-product (min-width: 210px) and (max-width: 239px) {
    :is(.hdt-pr-style7, .hdt-pr-style9) .hdt-pr-btns-group1 .hdt-pr_btn:not(button,a) :where(a, button) {
      justify-content: space-between;
    }
    :is(.hdt-pr-style7, .hdt-pr-style9) .hdt-quantity-wrapp+.hdt-pr_btn:not(button,a) :where(a, button) {
      justify-content: center;
    }
  }
  @container card-product (min-width: 300px) {
    .hdt-card-product:not(:is(.hdt-pr-list)) .hdt-quantity-wrapp .hdt-quantity__input {
      width: 60px;
    }
    .hdt-card-product:not(:is(.hdt-pr-list)) .hdt-quantity-wrapp+.hdt-pr_btn :where(a,button) {
      min-width: 136px !important;
    }
  }
  @container card-product (min-width: 350px) {
    :is(.hdt-pr-list).hdt-card-product .hdt-quantity-wrapp {      
      display: flex;
      flex: 1 1 0%;
      padding-inline-end: 1px;
      margin-inline-end: -1px;
    }
    :is(.hdt-pr-list) .hdt-pr-btns-group1 .hdt-quantity-wrapp + .hdt-pr_btn :where(a, button) {
      border-end-start-radius: 0px;
      border-start-start-radius: 0px;
    }
  }
}

@media (min-width: 768px) {  
  .hdt-card-product:is(.hdt-pr-list) .hdt-pr-description {
    display: block;
    font-size: var(--text-sm);
    line-height: 1.5;
  }
  :is(.hdt-pr-list) .hdt-card-product__wrapper {
    padding: 20px;
    gap: 10px 30px;
    grid-template: auto auto / max(min(40%, 150px), 120px) auto max(min(40%, 220px), 120px);
  }
  :is(.hdt-pr-list) .hdt-card-product__wrapper .hdt-card-product__info {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  :is(.hdt-pr-list) .hdt-pr-btns-group1 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
    height: 100%;
    justify-content: center;
  }
}
@media (min-width: 1150px) {
  .hdt-card-product:is(.hdt-pr-list) .hdt-pr-description {
    font-size: var(--text-base);
    line-height: 2.1;
  }
  :is(.hdt-pr-list) .hdt-card-product__wrapper {
    padding: 20px;
    gap: 10px 30px;
    grid-template: auto auto / max(min(40%, 180px), 120px) auto max(min(40%, 220px), 120px);
  }
}