/**
 * 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;
}

/* ================================================================
   DEFENSIVE THEME-BLEED RESET
   ----------------------------------------------------------------
   Reported by agency customer (Prit): aggressive page-builder themes
   (Elementor/Divi/Astra) ship UN-LAYERED global rules (a{underline},
   input/select{border,bg}, heading typography, inherited text color)
   that beat Tailwind's Preflight — because Tailwind emits its base
   reset inside @layer base, and per the CSS cascade ANY un-layered
   author rule beats ANY layered one regardless of specificity.

   This block is the defensive floor. It MUST stay UN-LAYERED (never
   move it into an @layer) — that is the whole point.

   Specificity design (deliberate):
   - Our own widget controls paint via `tw:` utilities, which carry a
     class selector + !important (0-1-0 !important). Every rule here is
     authored to sit BELOW that band so it neutralizes THEME bleed
     without ever stripping our own styling.
   - Form-control bg/border/box-shadow use `:where(.psfa-frontend-root)`
     (0-0-1) + surgical !important: that beats theme bare-tag rules
     (`input{…}`, incl. their !important, via footer source order) yet
     loses to our `tw:` utilities (0-1-0) so our search box / triggers
     keep their intended chrome.

   HARD CUSTOMER-COMPAT RULE: never !important on font-size or
   font-family (or anything a customer would reasonably tune). A live
   customer's WP Customizer "Additional CSS" (e.g.
   `.psfa-buy-button { font-size: .95rem !important }`) must always win.
   font-size is NOT reset here at all; font-family is reset without
   !important. Residual (theme ID-level / ancestor-!important rules) is
   covered by the psfa_frontend_css escape-hatch, out of scope here.
   ================================================================ */

/* Establish our own text baseline. Concrete !important floor so the
   force-inherit chain below resolves to OUR foreground, never the theme's.
   `.psfa-frontend-root` is 0-1-0 — but color-only + no font-size/family, so
   it does not touch the customer's Customizer typography overrides. */
.psfa-frontend-root {
  color: var(--color-foreground, #171717) !important;
}

/* COLOR FORCE-INHERIT — the residual Elementor bleed the founder caught:
   theme rules like `.elementor button { color: <pink> }` (specificity
   >= 0-0-1, NORMAL weight) beat an un-!important INHERITED color, so OUR
   text elements that carry no explicit `tw:text-*` utility (autocomplete
   suggestion <button>, Radix SelectTrigger value text) rendered pink.

   Links were already armored (`a:not(.psfa-buy-button){color:inherit
   !important}`). This closes the same path for buttons / form controls /
   general text — but at a LOWER specificity band so it never strips our
   own intended colors.

   Specificity math (deliberate — MUST stay 0-0-0):
   - Both compound selectors are wrapped in :where() → 0 each.
   - The buy-button exclusion uses :not(:where(.psfa-buy-button)); because
     :not() takes the specificity of its argument and :where() is 0, the
     :not() contributes 0. (A bare :not(.psfa-buy-button) would be 0-1-0 —
     that would tie/override our own tw:text-* and is WRONG here.)
   Result: 0-0-0 !important.
     - important > normal, so it beats theme NORMAL color rules regardless
       of their (higher) specificity.
     - Our own text utilities `.tw\:text-*` are 0-1-0 !important; same
       importance layer, higher specificity → they WIN. So muted-foreground
       eyebrows, tw:text-primary accents, price, and the placeholder rule
       (tw:data-[placeholder]:text-muted-foreground, 0-2-0) all keep their
       intended color. The buy button keeps its themed color via exclusion. */
:where(.psfa-frontend-root) :where(a, button, input, select, textarea, span, div, li, label, p, h1, h2, h3, h4, h5, h6):not(:where(.psfa-buy-button)) {
  color: inherit !important;
}

/* Inherited typography on text elements — neutralize theme heading/body
   typography bleed. No font-size. No !important. strong/em/b/i are
   intentionally excluded so their UA weight/style is preserved. */
.psfa-frontend-root h1, .psfa-frontend-root h2, .psfa-frontend-root h3,
.psfa-frontend-root h4, .psfa-frontend-root h5, .psfa-frontend-root h6,
.psfa-frontend-root p,  .psfa-frontend-root span, .psfa-frontend-root div,
.psfa-frontend-root a,  .psfa-frontend-root li,   .psfa-frontend-root label {
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-align: inherit;
  white-space: normal;
  text-shadow: none;
}

/* Box model — re-assert border-box (Tailwind Preflight sets it in a
   layer, so theme un-layered rules can flip it back). */
.psfa-frontend-root,
.psfa-frontend-root *,
.psfa-frontend-root *::before,
.psfa-frontend-root *::after {
  box-sizing: border-box;
}

/* Links — text-decoration + color are the #1 Elementor bleed. Surgical
   !important. The buy button is excluded from the color reset so its
   themed text color (tw utility) survives; it keeps text-decoration:none
   (which it wants anyway, and also carries tw:no-underline). */
.psfa-frontend-root a {
  text-decoration: none !important;
  background-color: transparent;
  text-indent: 0;
}
.psfa-frontend-root a:not(.psfa-buy-button) {
  color: inherit !important;
}

/* Form controls — font/color inherit; neutralize theme-imposed chrome.
   Scoped with :where() (0-0-1) so surgical !important on
   background/border/box-shadow beats theme bare-tag rules yet stays
   below our own tw: utilities (SelectTrigger, shadcn Input, buttons).
   outline is intentionally NOT reset (preserve keyboard focus ring). */
:where(.psfa-frontend-root) input,
:where(.psfa-frontend-root) select,
:where(.psfa-frontend-root) textarea,
:where(.psfa-frontend-root) button {
  font: inherit;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
  margin: 0;
  border-radius: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Lists — strip theme list chrome. Nothing of ours competes. */
.psfa-frontend-root ul,
.psfa-frontend-root ol,
.psfa-frontend-root li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Media — prevent theme img rules (oversize/border) from breaking layout.
   Normal props; our tw utilities on icons/images win where set. */
.psfa-frontend-root img {
  max-width: 100%;
  height: auto;
  display: block;
}