.df-variations-wrapper {
  margin: var(--df-sp-6) 0;
}

.df-variation-selects {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.df-variation-select-hidden {
  display: block;
}

.df-variation-group {
  margin-bottom: var(--df-sp-6);
}

.df-variation-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--df-sp-3);
}

.df-size-guide-link {
  font-family: var(--df-font-body);
  font-size: 0.7rem;
  letter-spacing: var(--df-track-wide);
  text-transform: uppercase;
  color: var(--df-gray-mid);
  background: none;
  border: none;
  border-bottom: 1px solid currentColor;
  padding: 0;
  cursor: pointer;
  transition: color var(--df-ease);
}

.df-size-guide-link:hover {
  color: var(--df-dark);
}

.df-variation-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--df-sp-2);
}

.df-variation-btn {
  min-width: 48px;
  height: 44px;
  padding: 0 var(--df-sp-3);
  border: 1px solid var(--df-gray-light);
  background: var(--df-white);
  font-family: var(--df-font-body);
  font-size: 0.8rem;
  color: var(--df-dark);
  transition:
    border-color var(--df-ease),
    background var(--df-ease),
    color var(--df-ease);
  position: relative;
}

.df-variation-btn:hover:not(.is-disabled) {
  border-color: var(--df-dark);
}

.df-variation-btn.is-active {
  background: var(--df-dark);
  color: var(--df-white);
  border-color: var(--df-dark);
}

.df-variation-btn.is-disabled {
  color: var(--df-gray-light);
  border-color: var(--df-gray-light);
  cursor: not-allowed;
  pointer-events: none;
}

.df-variation-btn.is-disabled::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 1px;
  background: var(--df-gray-light);
  transform: rotate(-12deg);
}

.df-quantity-wrap {
  margin-bottom: var(--df-sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--df-sp-2);
}

.df-quantity-wrap .quantity {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.df-add-to-cart-btn {
  width: 100%;
}

.df-add-to-cart-btn.disabled,
.df-add-to-cart-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.woocommerce-variation.single_variation {
  margin-bottom: var(--df-sp-4);
  font-size: 0.875rem;
}

.woocommerce-variation-price .price {
  font-size: 1.1rem;
  color: var(--df-dark);
}

.woocommerce-variation-availability .stock.out-of-stock {
  color: var(--df-dark);
  font-size: 0.8rem;
}