/* =========================================
   Buttons
========================================= */

/* :where(
  .button,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit,
  .woocommerce a.added_to_cart
) {
  --button-bg: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --button-text: var(--color-white);
  --button-border: var(--color-primary-dark);

  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.95rem 1.35rem;

  border: 1px solid var(--button-border);
  background: var(--button-bg);
  color: var(--button-text);

  font: inherit;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;

  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    background var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    opacity var(--transition-base);
  cursor: pointer;
} */

/* :where(
  .button,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit,
  .woocommerce a.added_to_cart
):hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  color: var(--button-text);
  text-decoration: none;
} */

/* :where(
  .button,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit,
  .woocommerce a.added_to_cart
):active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
} */

/* :where(
  .button,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit,
  .woocommerce a.added_to_cart
):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
} */

/* :where(
  .button,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit
)[disabled],
:where(
  .button,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce #respond input#submit
).disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
} */

/* Button variants */

*.button.button--primary,
.kb-button.app-button.app-button--primary,
*.app-button.app-button--primary {
  --button-bg: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
  --button-text: var(--color-light);
  --button-border: var(--color-secondary-dark);

  background: var(--button-bg);
  color: var(--button-text);
  border-color: var(--button-border);
}

*.button.button--primary:hover,
.kb-button.app-button.app-button--primary:hover,
*.app-button.app-button--primary:hover {
   --button-bg: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);

  background: var(--button-bg);
  box-shadow: var(--shadow-sm);
}

*.button.button--secondary,
*.app-button.app-button--secondary {
  --button-bg: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
  --button-text: var(--color-white);
  --button-border: var(--color-secondary-dark);

  background: var(--button-bg);
  color: var(--button-text);
  border-color: var(--button-border);
}

*.button.button--rounded,
*.app-button.button--rounded {
  border-radius: 999px;
}

*.kb-button.button.button--rounded,
*.kb-button.app-button.app-button--rounded {
  border-radius: 999px;
}