/* BE-CLONE — Buttons
   Shopify: --PRIMARY-BUTTONS-COLOR-BG: #000000
   ========================================= */

.be-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: var(--border-width) solid var(--color-btn-bg);
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  font-family: var(--font-button);
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  text-transform: var(--caps-button);
  letter-spacing: 0.96px;
  border-radius: var(--radius-btn, 10px);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  text-decoration: none;
}

.be-btn:hover {
  background: var(--color-text-light);
  border-color: var(--color-text-light);
}

.be-btn--outline {
  background: transparent;
  color: var(--color-btn-bg);
  border-color: var(--color-btn-bg);
}

.be-btn--outline:hover {
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
}

.be-btn--white {
  background: transparent;
  color: var(--color-btn-text);
  border-color: var(--color-btn-text);
}

.be-btn--white:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* WooCommerce button normalization */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-block-button__link {
  font-family: var(--font-button);
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  text-transform: var(--caps-button);
  letter-spacing: 0.96px;
  padding: 14px 28px;
  background-color: var(--color-btn-bg);
  color: var(--color-btn-text);
  border: var(--border-width) solid var(--color-btn-bg);
  border-radius: var(--radius-btn, 10px);
  transition: background var(--dur-fast) var(--ease);
  cursor: pointer;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--color-text-light);
  border-color: var(--color-text-light);
  color: var(--color-btn-text);
}