/**
 * Component Overrides - Application Layer
 *
 * Connects CSS variables from the 6 theming axes to component selectors.
 * Axis CSS files (base/, accent/, style/) DEFINE variables.
 * This file APPLIES them to .psfa-* components with !important to beat Tailwind tw: prefix.
 */

/* Buy button: chain accent vars → buy button vars */
.psfa-frontend-root {
  --button-buy-bg: var(--load-more-bg, var(--color-primary, #f97316));
  --button-buy-border: var(--load-more-border, var(--color-primary-hover, #ea580c));
  --button-buy-text: var(--load-more-text, var(--color-primary-foreground, #fafafa));
  --button-buy-hover-bg: var(--color-primary-hover, #ea580c);
  /* Font axis - applied globally, set via inline style --font-sans on container */
  font-family: var(--font-sans, inherit) !important;
}

/* Style axis: card shadow & border */
.psfa-frontend-root .psfa-product {
  box-shadow: var(--card-shadow, 0 1px 2px 0 rgb(0 0 0 / 0.05)) !important;
  border-width: var(--card-border-width, 1px) !important;
}
.psfa-frontend-root .psfa-product:hover {
  box-shadow: var(--card-hover-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)) !important;
}

/* Radius axis: card and image radius from --radius (set as inline style on container) */
.psfa-frontend-root .psfa-product {
  border-radius: var(--radius, 0.5rem) !important;
}

.psfa-frontend-root .psfa-product img {
  border-radius: calc(var(--radius, 0.5rem) * 0.6) !important;
}

/* Style axis: card content padding */
.psfa-frontend-root .psfa-product .psfa-product-content {
  padding: var(--card-padding, 1rem) !important;
}

/* Style axis: buy button radius + padding from style presets */
.psfa-frontend-root .psfa-buy-button {
  border-radius: var(--button-radius, 0.375rem) !important;
  padding: var(--button-padding-y, 0.5rem) var(--button-padding-x, 1rem) !important;
  /* Prevent hover flicker: shadcn Button adds tw:transition-colors which transitions
     background-color (longhand) while our tw:[background:var()] uses the shorthand.
     Disabling transition prevents the intermediate flash between states. */
  transition: none !important;
}

/* Style axis: grid gap */
.psfa-frontend-root .psfa-product-grid {
  gap: var(--spacing-gap, 1rem) !important;
}

/* Style axis: comparison table border-radius */
.psfa-frontend-root .psfa-comparison-table {
  border-radius: var(--radius, 0.5rem) !important;
}

/* Style axis: filter input padding */
.psfa-frontend-root .psfa-filter-group select,
.psfa-frontend-root .psfa-filter-group input {
  border-radius: calc(var(--radius, 0.5rem) * 0.8) !important;
  padding: var(--input-padding, 0.5rem 0.75rem) !important;
}