/*
 * Desktop: fixed 900px section height.
 * standard_spacing provides 96px top+bottom padding (xl:p-24),
 * so inner content = 900 − 192 = 708px.
 */
@media (min-width: 1280px) {
  /* Main flex row — fixed inner height */
  .component-hero-with-cart-builder > div {
    height: 708px;
  }

  /* Content column scrolls as one unit (text + form together) */
  .component-hero-with-cart-builder .hero-cart-content-col {
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .component-hero-with-cart-builder .hero-cart-content-col::-webkit-scrollbar {
    display: none;
  }
}

.component-hero-with-cart-builder .donation-card {
  box-shadow: 0 6px 16px 0 rgba(10, 13, 18, 0.1);
  clip-path: inset(-1px -24px -24px -24px);
}

@media (min-width: 1280px) {
  .component-hero-with-cart-builder .donation-card {
    margin-left: 16px;
    margin-right: 16px;
    margin-bottom: 16px;
  }
}

.component-hero-with-cart-builder [data-amount-btn] {
  transition: background-color 150ms ease, outline-color 150ms ease,
    box-shadow 150ms ease, transform 100ms ease;
}

.component-hero-with-cart-builder [data-amount-btn] > div {
  transition: color 150ms ease, font-weight 150ms ease;
}

/* Hover — only when not already selected */
.component-hero-with-cart-builder [data-amount-btn]:hover:not([data-selected="true"]) {
  background-color: #f7f7f7;
  outline-color: #d5d7da;
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05),
    inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
    inset 0px -2px 0px 0px rgba(10, 13, 18, 0.05);
}

.component-hero-with-cart-builder [data-amount-btn]:hover:not([data-selected="true"]) > div {
  color: #333;
}

/* Selected / active */
.component-hero-with-cart-builder [data-amount-btn][data-selected="true"] {
  background-color: white;
  outline-color: #e76127;
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05),
    inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
    inset 0px -2px 0px 0px rgba(10, 13, 18, 0.05);
}

.component-hero-with-cart-builder [data-amount-btn][data-selected="true"] > div {
  color: #414651;
  font-weight: 600;
}
