.hdt-compare-table {
  border: 0.1rem solid rgb(var(--color-line-border)); 
  border-radius: var(--rounded-input);
  color: rgb(var(--color-foreground2));
  max-height: 85vh;
  overflow: auto;
  border-radius: var(--rounded-xs);
}
.hdt-compare-row{
  --spacing-x:0;
  --spacing-y:0;
}
/* .hdt-compare-value{
  line-height: 1.4;
} */
.hdt-compare-field{
  font-size: var(--text-lg);
}
.hdt-compare-field span{
  position: absolute;
  top:50%;
  transform: translateY(-50%);
}
.hdt-compare-col {
  padding: var(--spacing-1-6) var(--spacing-1);
  word-break: break-word;
  min-width:18rem;
  flex: 1!important;
}
.hdt-compare-col:not(:last-child) {
  border-inline-end: 0.1rem solid rgb(var(--color-line-border));
}
.hdt-compare-row:nth-child(2n) .hdt-compare-col {
  background-color: rgb(var(--color-foreground)/.05);
}
.hdt-compare-basic__content{
  flex: 1;
  width: 100%;
}
.hdt-compare-basic__content .hdt-compare-group-btns{
  margin-top:auto;
}
.hdt-compare-remove{text-decoration: underline;transition: 0.3s ease;}

.hdt-main-compare .hdt-placeholder-svg {
  display: block;
  fill: #222;
  background-color: #f5f5f5;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: 0.1rem solid #ddd;
}
.hdt-compare-image{
  padding: var(--spacing-1-8) 0;
}
.hdt-compare-image img{
  border-radius: var(--rounded-product-card);
}
.hdt-compare-stock.is--in-stock{
  color:rgb(var(--color-custom-badge-background));
}
.hdt-compare-stock svg{
  margin-inline-end: var(--spacing-0-8);
  position: relative;
  top: -0.1rem;
}
.hdt-compare-title{transition: color .3s ease;}
.hdt-compare-price{margin-top: var(--spacing-1);}
.hdt-compare-price .hdt-price__list{justify-content: center;font-weight: var(--font-semibold);}
.hdt-compare-price .hdt-price__list .hdt-price{letter-spacing: 0;}

.hdt-compare-group-btns >div{
  margin-top: var(--spacing-2);
}
.hdt-compare-group-btns button,
.hdt-compare-group-btns a{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  width: 4.2rem;
  min-height: 4.2rem;
  border: 1px solid rgb(var(--color-line-border));
  border-radius: var(--rounded-button);
  transition: all .3s ease;
  position: relative;
}
.hdt-compare-group-btns button span,
.hdt-compare-group-btns a span{
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  line-height: 1;
  display: none;
}
.hdt-compare-group-btns button:before{
  content: "";
  position: absolute;
  z-index: 2;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: solid 0.2rem currentColor;
  border-top-color: transparent;
  animation: hdt_rotator .6s linear infinite var(--hdt-anim-state, paused);
  opacity: 0;
}
.hdt-compare-group-btns button[aria-busy=true]:before{
  opacity: 1;
  --hdt-anim-state: running;
}
.hdt-compare-group-btns button[aria-busy=true] svg,
.hdt-compare-group-btns button[aria-busy=true] span{
  opacity: 0;
}
.hdt-compare-empty >*+*{
  margin-top: var(--spacing-3);
}
@media(min-width:768px){
  .hdt-compare-col {
    min-width:30rem;
  }
}
@media(min-width:1150px){
  .hdt-compare-title{
    font-size: var(--text-lg);
  }
  .hdt-compare-field{
    font-size: var(--text-2xl);
  }
  .hdt-compare-col {
    min-width:36rem;
    padding-inline-start:var(--spacing-3-4); 
    padding-inline-end:var(--spacing-3-4); 
  }
  .hdt-compare-basic__content .hdt-compare-group-btns{
    margin-bottom: var(--spacing-2-4);
  }
  .hdt-compare-group-btns button,
  .hdt-compare-group-btns a{
    width: 100%;
    padding: 0 1rem;
  }
  .hdt-compare-group-btns button span,
  .hdt-compare-group-btns a span{
    display: block;
  }
}
@media (-moz-touch-enabled: 0), (hover: hover) and (min-width: 1150px){
  .hdt-compare-group-btns button:hover{
    color: rgb(var(--color-accent));
    border-color: rgb(var(--color-accent));
  }
  .hdt-compare-title:hover,
  .hdt-compare-remove:hover{
    color: rgb(var(--color-accent));
  }

}