.btn-theme-green {
  --btn-border: var(--palette-green-top-border, #9fcd85);
  --btn-base: var(--palette-green-base, #dff0d2);
  --btn-text: var(--palette-green-text, #2c3a25);
}

.btn-theme-yellow {
  --btn-border: var(--palette-yellow-top-border, #d8b64b);
  --btn-base: var(--palette-yellow-base, #f6de8b);
  --btn-text: var(--palette-yellow-text, #4b3a12);
}

.btn-theme-blue {
  --btn-border: var(--palette-blue-top-border, #8fb9e8);
  --btn-base: var(--palette-blue-base, #dbeafe);
  --btn-text: var(--palette-blue-text, #23364d);
}

.btn-theme-gray {
  --btn-border: var(--palette-gray-top-border, #bcc4cf);
  --btn-base: var(--palette-gray-base, #e7ebf0);
  --btn-text: var(--palette-gray-text, #2e3640);
}

.btn3d-secondary {
  border-color: var(--btn-border);
  background-color: var(--color-surface, #ffffff);
  color: var(--btn-text);
}

.btn3d-base-layer {
  border-color: var(--btn-border);
  background-color: var(--btn-base);
}

.btn3d-primary {
  border-color: var(--btn-border);
  color: var(--btn-text);
  box-shadow: var(--shadow-card, 0 18px 40px rgba(0, 0, 0, 0.06));
}

.btn3d-gradient {
  background: linear-gradient(to bottom, #ffffff 0%, #ffffff 68%, #f7faf5 100%);
}

/* Locked Add-to-Cart style: yellow 3D look, size can vary with modifiers. */
.btn-add-to-cart {
  --btn-border: var(--palette-yellow-top-border, #d8b64b);
  --btn-base: var(--palette-yellow-base, #f6de8b);
  --btn-text: var(--palette-yellow-text, #4b3a12);
  --add-to-cart-depth: 8px;
  --add-to-cart-pad-y: 10px;
  --add-to-cart-pad-x: 20px;
  --add-to-cart-font-size: 0.875rem;
  --add-to-cart-hover-shift: 3px;
  --add-to-cart-active-shift: 7px;

  position: relative;
  display: inline-block;
}

.btn-add-to-cart--gray {
  --btn-border: var(--palette-gray-top-border, #bcc4cf);
  --btn-base: var(--palette-gray-base, #e7ebf0);
  --btn-text: var(--palette-gray-text, #2e3640);
}

.btn-add-to-cart__base {
  position: absolute;
  inset-inline: 0;
  top: var(--add-to-cart-depth);
  height: 100%;
  border: 2px solid var(--btn-border);
  border-radius: var(--radius-pill, 999px);
  background-color: var(--btn-base);
}

.btn-add-to-cart__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--btn-border);
  border-radius: var(--radius-pill, 999px);
  background-color: var(--color-surface, #ffffff);
  color: var(--btn-text);
  padding: var(--add-to-cart-pad-y) var(--add-to-cart-pad-x);
  font-size: var(--add-to-cart-font-size);
  font-weight: 600;
  line-height: 1.25rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-card, 0 18px 40px rgba(0, 0, 0, 0.06));
  overflow: hidden;
  transition: transform var(--transition-fast, 0.2s ease);
}

.btn-add-to-cart__button:hover {
  transform: translateY(var(--add-to-cart-hover-shift));
}

.btn-add-to-cart__button:active {
  transform: translateY(var(--add-to-cart-active-shift));
}

.btn-add-to-cart__button:focus-visible {
  outline: 2px solid var(--color-focus-ring, #4a84c8);
  outline-offset: 2px;
}

.btn-add-to-cart__gradient {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.btn-add-to-cart__label {
  position: relative;
}

.btn-add-to-cart-sm {
  --add-to-cart-depth: 8px;
  --add-to-cart-pad-y: 10px;
  --add-to-cart-pad-x: 20px;
  --add-to-cart-font-size: 0.875rem;
}

.btn-add-to-cart-lg {
  --add-to-cart-depth: 9px;
  --add-to-cart-pad-y: 14px;
  --add-to-cart-pad-x: 28px;
  --add-to-cart-font-size: 1rem;
}