/*
 * WooCommerce compatibility layer.
 *
 * This file aligns native WooCommerce and Woo Blocks primitives with the
 * Magnatype design system. Route-specific composition remains in page CSS.
 * Review selectors whenever WooCommerce is upgraded.
 */

:where(.woocommerce) :where(.button, button.button, input.button),
.wc-block-components-button:not(.is-link) {
  min-height: 48px;
  padding: 14px 24px;
  color: var(--mt-accent-ink);
  background: var(--mt-accent);
  border: 1px solid transparent;
  border-radius: var(--mt-radius-sm);
  font-family: var(--wp--preset--font-family--ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
}

:where(.woocommerce) :where(input.input-text, select, textarea),
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
  min-height: 60px;
  padding: 20px 16px 8px;
  color: var(--mt-text);
  background: var(--mt-surface-raised);
  border: 1px solid transparent;
  border-radius: var(--mt-radius-sm);
}

.woocommerce :is(input.input-text, select, textarea):focus,
.wc-block-components-text-input input:focus {
  border-color: var(--mt-selection-border);
  outline: 2px solid color-mix(in srgb, var(--mt-focus) 30%, transparent);
  outline-offset: 2px;
}

.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error),
.wc-block-components-notice-banner {
  padding: 16px;
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius-md);
}

.woocommerce .woocommerce-message,
.wc-block-components-notice-banner.is-success {
  color: var(--mt-success-text);
  background: var(--mt-success-bg);
}

.wc-block-components-totals-wrapper,
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
  border-radius: var(--mt-radius-md);
}