/* Smooth product expand and collapse without DOM replacement. */
.product-extra {
  height: 0;
  display: grid;
  gap: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: height .48s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, visibility 0s linear .48s, gap .48s cubic-bezier(.22, 1, .36, 1);
  will-change: height, opacity;
}
.product-extra > .product-row {
  min-height: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .28s ease, transform .38s cubic-bezier(.22, 1, .36, 1);
}
.product-extra.is-expanded {
  gap: 6px;
  opacity: 1;
  visibility: visible;
  transition: height .48s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, visibility 0s, gap .48s cubic-bezier(.22, 1, .36, 1);
}
.product-extra.is-expanded > .product-row {
  opacity: 1;
  transform: translateY(0);
}
.product-extra.is-expanded > .product-row:nth-child(2) { transition-delay: .04s; }
.product-extra.is-expanded > .product-row:nth-child(3) { transition-delay: .08s; }

@media (prefers-reduced-motion: reduce) {
  .product-extra,
  .product-extra > .product-row {
    transition-duration: .01ms;
    transition-delay: 0s;
  }
}