/* Concept 5.3 action buttons. Load after the theme, cart, and checkout styles.
 * The reference draws its 2px border inside the button, without adding height.
 * An inset ring and background oval reproduce that treatment without changing
 * labels or occupying the pseudo-elements WooCommerce uses for loading states.
 */
body :is(
  .al-button,
  .woocommerce :is(a, button, input).button,
  .woocommerce div.product.al-pdp form.cart .single_add_to_cart_button,
  .single_add_to_cart_button,
  .wp-element-button,
  .al-sticky-cart__button,
  .al-pdp-mobile-action__button,
  .al-checkout-preview__continue,
  .al-checkout-preview__buy-button,
  .al-compare-tray__clear,
  .al-compare-tray__submit
):not(:where(.al-signup-dialog *, .al-signup-submit, .al-icon-button, .al-quantity-button, .al-review-toolbar.is-enhanced .al-review-toolbar__submit, [hidden])),
body.woocommerce #respond input#submit {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: var(--al-action-min-height, 3.125rem);
  max-height: 3.75rem;
  height: auto;
  padding: var(--al-action-padding-block, clamp(1.125rem, 1.2vw, 1.375rem)) var(--al-action-padding-inline, clamp(1.625rem, 1.473vw, 1.875rem));
  border: 0;
  border-radius: 3.75rem;
  box-shadow: inset 0 0 0 2px var(--al-action-border, var(--al-button-background, #171717));
  color: var(--al-action-ink, var(--al-button-text, #fff));
  background-color: var(--al-action-face, var(--al-button-background, #171717));
  background-image: radial-gradient(ellipse at center, var(--al-action-fill, var(--al-button-text, #fff)) 0 70%, transparent 71%);
  background-repeat: no-repeat;
  background-size: 150% 200%;
  background-position: 50% -200%;
  font-family: var(--al-font-body, Inter, sans-serif);
  font-size: clamp(0.875rem, 0.8115rem + 0.1587vw, 1rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  filter: none;
  transform: none;
  transition: background-position 0.6s cubic-bezier(0.7, 0, 0.2, 1), color 0.3s ease 0.1s, opacity 0.2s ease;
}

/* Color variants retain the site's configurable button and footer colors. */
.al-button--secondary,
.al-compare-tray__clear,
.wp-block-button.is-style-outline > .wp-element-button {
  --al-action-face: transparent;
  --al-action-ink: var(--al-button-background, #171717);
  --al-action-fill: var(--al-button-background, #171717);
  --al-action-hover-ink: var(--al-button-text, #fff);
}

.al-button--light {
  --al-action-face: #fff;
  --al-action-ink: #171717;
  --al-action-border: #fff;
  --al-action-fill: #171717;
  --al-action-hover-ink: #fff;
}

.al-button--ghost-light {
  --al-action-face: transparent;
  --al-action-ink: #fff;
  --al-action-border: #fff;
  --al-action-fill: #fff;
  --al-action-hover-ink: #171717;
}

.al-button--accent {
  --al-action-face: var(--al-accent, #ffddbf);
  --al-action-ink: var(--al-ink, #171717);
  --al-action-border: var(--al-accent, #ffddbf);
  --al-action-fill: var(--al-ink, #171717);
  --al-action-hover-ink: var(--al-accent, #ffddbf);
}

.al-footer-brand .al-button {
  --al-action-face: var(--al-footer-button-background, #fff);
  --al-action-ink: var(--al-footer-button-text, #171717);
  --al-action-border: var(--al-footer-button-background, #fff);
  --al-action-fill: var(--al-footer-button-text, #171717);
  --al-action-hover-ink: var(--al-footer-button-background, #fff);
}

/* The comparison tray uses Concept's small button spacing and a 44px target. */
.al-compare-tray__clear,
.al-compare-tray__submit {
  --al-action-min-height: 2.75rem;
  --al-action-padding-block: clamp(0.75rem, 1.2vw, 1rem);
  --al-action-padding-inline: clamp(1.25rem, 1.473vw, 1.5rem);
}

@media (hover: hover) and (pointer: fine) {
  body :is(
    .al-button,
    .woocommerce :is(a, button, input).button,
    .woocommerce div.product.al-pdp form.cart .single_add_to_cart_button,
    .single_add_to_cart_button,
    .wp-element-button,
    .al-sticky-cart__button,
    .al-pdp-mobile-action__button,
    .al-checkout-preview__continue,
    .al-checkout-preview__buy-button,
    .al-compare-tray__clear,
    .al-compare-tray__submit
  ):not(:where(.al-signup-dialog *, .al-signup-submit, .al-icon-button, .al-quantity-button, .al-review-toolbar.is-enhanced .al-review-toolbar__submit, [hidden], :disabled, [disabled], [aria-disabled="true"], .disabled, .loading, [aria-busy="true"])):hover,
  body.woocommerce #respond input#submit:not(:where(:disabled, [disabled], [aria-disabled="true"], .disabled, .loading, [aria-busy="true"])):hover {
    color: var(--al-action-hover-ink, var(--al-button-background, #171717));
    background-position: 50% 50%;
    filter: none;
    transform: none;
  }
}

body :is(
  .al-button,
  .woocommerce :is(a, button, input).button,
  .woocommerce div.product.al-pdp form.cart .single_add_to_cart_button,
  .single_add_to_cart_button,
  .wp-element-button,
  .al-sticky-cart__button,
  .al-pdp-mobile-action__button,
  .al-checkout-preview__continue,
  .al-checkout-preview__buy-button,
  .al-compare-tray__clear,
  .al-compare-tray__submit
):not(:where(.al-signup-dialog *, .al-signup-submit, .al-icon-button, .al-quantity-button, .al-review-toolbar.is-enhanced .al-review-toolbar__submit, [hidden])):focus-visible,
body.woocommerce #respond input#submit:focus-visible {
  outline: 2px solid var(--al-focus, #0b61cd);
  outline-offset: 3px;
}

body :is(
  .al-button,
  .woocommerce :is(a, button, input).button,
  .woocommerce div.product.al-pdp form.cart .single_add_to_cart_button,
  .single_add_to_cart_button,
  .wp-element-button,
  .al-sticky-cart__button,
  .al-pdp-mobile-action__button,
  .al-checkout-preview__continue,
  .al-checkout-preview__buy-button,
  .al-compare-tray__clear,
  .al-compare-tray__submit
):not(:where(.al-signup-dialog *, .al-signup-submit, .al-icon-button, .al-quantity-button, .al-review-toolbar.is-enhanced .al-review-toolbar__submit, [hidden])):is(:disabled, [disabled], [aria-disabled="true"], .disabled),
body.woocommerce #respond input#submit:is(:disabled, [disabled], [aria-disabled="true"], .disabled) {
  opacity: 0.6;
  cursor: not-allowed;
  background-position: 50% -200%;
  transition: none;
}

/* Keep the existing WooCommerce spinner and loading-label treatment intact. */
body:is(.woocommerce) div.product.al-pdp form.cart .single_add_to_cart_button.loading,
body .woocommerce div.product.al-pdp form.cart .single_add_to_cart_button.loading {
  color: transparent;
  opacity: 1;
  cursor: wait;
  background-position: 50% -200%;
}

@media (max-width: 639px) {
  body :is(.al-compare-tray__clear, .al-compare-tray__submit) {
    --al-action-padding-inline: 0.75rem;
  }

  body :is(.al-checkout-preview__continue, .al-pdp-mobile-action__button) {
    --al-action-padding-inline: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body :is(
    .al-button,
    .woocommerce :is(a, button, input).button,
    .woocommerce div.product.al-pdp form.cart .single_add_to_cart_button,
    .single_add_to_cart_button,
    .wp-element-button,
    .al-sticky-cart__button,
    .al-pdp-mobile-action__button,
    .al-checkout-preview__continue,
    .al-checkout-preview__buy-button,
    .al-compare-tray__clear,
    .al-compare-tray__submit
  ):not(:where(.al-signup-dialog *, .al-signup-submit, .al-icon-button, .al-quantity-button, .al-review-toolbar.is-enhanced .al-review-toolbar__submit, [hidden])),
  body.woocommerce #respond input#submit {
    transition: none;
  }
}