.cfg-option {
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.cfg-option:hover {
  transform: translateY(-1px);
}

.cfg-option.selected {
  border-color: var(--color-brand, #10b981);
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--color-brand, #10b981);
}

.cfg-preset-btn {
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.cfg-preset-btn.active {
  border-color: var(--color-brand, #10b981);
  color: var(--color-brand, #10b981);
  background: color-mix(in srgb, var(--color-brand, #10b981) 10%, #ffffff 90%);
}

.cfg-category {
  opacity: 0;
  transform: translateY(6px);
  animation: cfgCategoryIn 280ms ease forwards;
}

.cfg-category:nth-of-type(2) {
  animation-delay: 40ms;
}

.cfg-category:nth-of-type(3) {
  animation-delay: 80ms;
}

.cfg-category:nth-of-type(4) {
  animation-delay: 120ms;
}

.cfg-category:nth-of-type(5) {
  animation-delay: 160ms;
}

@keyframes cfgCategoryIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cfg-tier-card {
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.cfg-tier-card:hover {
  border-color: color-mix(in srgb, var(--color-brand, #10b981) 55%, #cbd5e1 45%);
  transform: translateY(-1px);
}

.cfg-tier-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cfg-tier-card:has(.cfg-tier-radio:checked) {
  border-color: var(--color-brand, #10b981);
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--color-brand, #10b981);
}

.cfg-calc-item {
  transition: background-color 160ms ease, border-color 160ms ease;
  border: 1px solid transparent;
}

.cfg-calc-item:has(.cfg-calc-check:checked) {
  background: color-mix(in srgb, var(--color-brand, #10b981) 18%, rgba(255, 255, 255, 0.2) 82%);
  border-color: color-mix(in srgb, var(--color-brand, #10b981) 50%, #ffffff 50%);
}

.cfg-calc-check {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-brand, #10b981);
}

.cfg-product-media .woocommerce-product-gallery,
.cfg-product-media .woocommerce-product-gallery__wrapper,
.cfg-product-media .woocommerce-product-gallery__image,
.cfg-product-media .woocommerce-product-gallery__image a,
.cfg-product-media .woocommerce-product-gallery__image img {
  width: 100%;
}

.cfg-product-media .woocommerce-product-gallery__image img {
  display: block;
  height: auto;
  max-width: none;
}

.cfg-sticky-bar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  transition: transform 220ms ease, opacity 220ms ease;
}

.cfg-sticky-bar.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (min-width: 1024px) {
  .cfg-grid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 2rem;
  }
}

@media (max-width: 640px) {
  #cfg-summary {
    padding: 1rem;
  }

  #cfg-volume-tiers {
    gap: 0.5rem;
  }

  .cfg-tier-content {
    align-items: center;
  }

  .cfg-sticky-inner {
    align-items: stretch;
  }
}