/* Phox Woo Builder: house tokens and shared primitives.
   Loaded by every element through \PhoxWoo\deps().

   TOKENS are declared at zero specificity on :root, so any element (or a
   builder container such as Cart Builder) can override them for its own
   subtree from css.twig:  %%SELECTOR%% { --pwb-primary: ...; }
   The sizes follow the Phox Elements originals (Phox Cart, Phox Checkout,
   Phox Account, Phox Thank You).

   BRAND COLOURS follow the site. Breakdance and Oxygen both print
   --bde-brand-primary-color, --bde-button-primary-text-color ... on :root
   from Global Settings, and their own buttons and Woo elements read them,
   so following them makes our buttons match the site's. The old fixed
   palette is the fallback (nothing set / base CSS used outside the builders).

   TEXT COLOURS DO NOT FOLLOW THE SITE. Cards, section boxes and panels are
   white surfaces (--pwb-surface) and set `color: var(--pwb-text)` on
   themselves; a dark site's body text is light and would vanish on them.
   Anything that sits directly on the page (no surface of its own) must not
   force a colour: it inherits, so it is light on a dark page and dark inside
   one of our cards. --pwb-soft / --pwb-faint / --pwb-line below are the
   inherit-friendly versions of the grey tokens for that kind of element.

   PRIMITIVES use :where() so they add no specificity: an element's own
   default.css and its design controls always win. */

:where(:root) {
  --pwb-text: #222;
  --pwb-text-2: #595959;
  --pwb-muted: #6b6b6b;
  --pwb-border: #e5e5e5;
  --pwb-input-border: #8f8f8f; /* 3:1 on white and #f9fafb (WCAG 1.4.11) */
  --pwb-surface: #fff;
  --pwb-surface-2: #f5f5f5;
  /* BUTTONS follow Breakdance's Global Settings > Buttons (Primary and
     Secondary), so ours match every other button on the site. Breakdance
     only sets those on its own button selectors, so helpers.php re-prints
     what is set there onto these tokens (style#pwb-bd-buttons). Without them
     (Oxygen, or nothing set) the brand colour and our own palette are used.
     A builder's Design > Colors, the plugin's Brand colours setting and each
     element's Button controls still win (they are set closer to the button). */
  --pwb-primary: var(--bde-button-primary-background-color, var(--bde-brand-primary-color, #222));
  --pwb-primary-text: var(--bde-button-primary-text-color, #fff);
  --pwb-primary-text-hover: var(--bde-button-primary-text-color-hover, var(--pwb-primary-text));
  /* Hover: Breakdance's primary button hover colour when it exists.
     Otherwise derived: mixing 14% of the button's own text colour in
     lightens a dark button and darkens a light one, so there is always
     visible feedback. Builders that re-set --pwb-primary / --pwb-primary-text
     re-derive it in their css.twig (custom properties are computed here, at
     :root, and inherited as values). */
  --pwb-primary-hover: var(--bde-button-primary-background-color-hover, color-mix(in srgb, var(--pwb-primary), var(--pwb-primary-text) 14%));
  --pwb-btn-radius: var(--bde-button-border-radius, var(--pwb-radius, 8px));
  --pwb-accent: var(--bde-brand-primary-color, #b83c0b);
  /* The brand colour when it is used as TEXT (links, prices, labels). Same
     colour as the brand unless it is below 4.5:1 on white, then helpers.php
     prints a darker mix (style#pwb-a11y). Button backgrounds never use it. */
  --pwb-accent-text: var(--pwb-accent);
  --pwb-primary-as-text: var(--pwb-primary);
  /* Meaning, not brand: these stay fixed. */
  --pwb-success: #1f7a43;
  --pwb-error: #b3292b;
  --pwb-warning: #dba617;
  --pwb-star: #f5a623;
  --pwb-radius: 8px;
  --pwb-radius-lg: 12px;
  --pwb-input-h: 44px;
  --pwb-gap: 16px;
  --pwb-font-sm: 13px;
  --pwb-font: 15px;
  --pwb-font-lg: 18px;
  --pwb-transition: .2s ease;
  /* Greys that follow the text they sit in (currentColor is read where the
     token is used, not here): secondary text, hints, hairlines. */
  --pwb-soft: color-mix(in srgb, currentColor 80%, transparent);
  /* Decoration only (borders, icons). Never use it for text: use --pwb-soft. */
  --pwb-faint: color-mix(in srgb, currentColor 55%, transparent);
  --pwb-line: color-mix(in srgb, currentColor 20%, transparent);
}

/* ---- Builder placeholder (\PhoxWoo\placeholder()) ---- */
.pwb-placeholder {
  display: block;
  padding: 16px;
  border: 1px dashed currentColor;
  border-radius: var(--pwb-radius);
  opacity: .6;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}

/* ---- Live refresh state ---- */
:where(.pwb-is-refreshing) {
  opacity: .55;
  pointer-events: none;
  transition: opacity var(--pwb-transition);
}

/* ---- Buttons ----
   One class of weight (not :where) because buttons are often <a> and
   themes/builders colour links with `a` and `a:hover` rules; hover states
   use two-class weight to beat `html a:hover`. Element default.css and
   design controls are still stronger (same or higher weight, later). */
.pwb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--pwb-input-h);
  /* Builders' Design > Buttons > Padding set these two. */
  padding: var(--pwb-btn-pad-y, 0) var(--pwb-btn-pad-x, 22px);
  border: 1px solid var(--pwb-primary-border, var(--pwb-primary));
  border-radius: var(--pwb-btn-radius);
  background: var(--pwb-primary);
  color: var(--pwb-primary-text);
  font: inherit;
  font-size: var(--pwb-font);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--pwb-transition), border-color var(--pwb-transition), color var(--pwb-transition), opacity var(--pwb-transition);
}
.pwb-btn.pwb-btn:is(:hover, :focus-visible) {
  background: var(--pwb-primary-hover);
  border-color: var(--pwb-primary-border-hover, var(--pwb-primary-hover));
  color: var(--pwb-primary-text-hover, var(--pwb-primary-text));
}
/* Outline buttons: Breakdance's Secondary button (--pwb-sec-* are printed
   from Global Settings > Buttons > Secondary, see helpers.php), then its
   default secondary colours. Otherwise (Oxygen) text and border follow the
   colour around them (they often sit straight on the page: dark on a light
   page or in a card, light on a dark page), and hover fills with the
   primary colour. */
.pwb-btn.pwb-btn--outline {
  background: var(--pwb-sec-bg, var(--bde-button-secondary-background-color, transparent));
  border-color: var(--pwb-sec-border, var(--bde-button-secondary-border-color, currentColor));
  /* Breakdance's secondary button does not take the primary corner radius. A
     builder's Buttons radius re-sets --pwb-sec-radius for its own subtree. */
  border-radius: var(--pwb-sec-radius, var(--bde-button-border-radius, var(--pwb-btn-radius)));
  color: var(--pwb-sec-text, var(--bde-button-secondary-text-color, inherit));
}
.pwb-btn.pwb-btn--outline:is(:hover, :focus-visible) {
  background: var(--pwb-sec-bg-hover, var(--bde-button-secondary-background-color-hover, var(--pwb-primary)));
  border-color: var(--pwb-sec-border-hover, var(--bde-button-secondary-border-color-hover, var(--pwb-primary)));
  color: var(--pwb-sec-text-hover, var(--bde-button-secondary-text-color-hover, var(--pwb-primary-text)));
}
.pwb-btn--block { display: flex; width: 100%; }
.pwb-btn[disabled], .pwb-btn.is-disabled { opacity: .5; cursor: not-allowed; }

/* ---- Inputs ---- */
:where(.pwb-input) {
  width: 100%;
  min-height: var(--pwb-input-h);
  padding: 0 14px;
  border: 1px solid var(--pwb-input-border);
  border-radius: var(--pwb-radius);
  background: var(--pwb-surface);
  color: var(--pwb-text);
  font: inherit;
  font-size: var(--pwb-font);
}
:where(.pwb-input):focus {
  outline: none;
  border-color: var(--pwb-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pwb-primary) 15%, transparent);
}

/* ---- Card ----
   Sets its own text colour: the page behind it may be dark. */
:where(.pwb-card) {
  background: var(--pwb-surface);
  color: var(--pwb-text);
  border: 1px solid var(--pwb-border);
  border-radius: var(--pwb-radius-lg);
  padding: 24px;
}

/* ---- Quantity stepper ---- */
:where(.pwb-qty) {
  display: inline-flex;
  align-items: stretch;
  height: 40px;
  border: 1px solid var(--pwb-input-border);
  border-radius: var(--pwb-radius);
  background: var(--pwb-surface);
  overflow: hidden;
}
:where(.pwb-qty) button {
  width: 36px;
  border: 0;
  background: transparent;
  color: var(--pwb-text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
:where(.pwb-qty) button:hover { background: var(--pwb-surface-2); }
:where(.pwb-qty) button[disabled] { opacity: .35; cursor: not-allowed; }
:where(.pwb-qty) input {
  width: 44px;
  border: 0;
  border-left: 1px solid var(--pwb-border);
  border-right: 1px solid var(--pwb-border);
  background: transparent;
  color: var(--pwb-text);
  text-align: center;
  font: inherit;
  -moz-appearance: textfield;
  appearance: textfield;
}
:where(.pwb-qty) input::-webkit-outer-spin-button,
:where(.pwb-qty) input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- Totals rows (label left, amount right) ---- */
:where(.pwb-row) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: inherit;
}
:where(.pwb-row__label) { color: var(--pwb-soft); }
:where(.pwb-row__value) { font-weight: 600; text-align: right; }

/* ---- Notices ---- */
:where(.pwb-notice) {
  padding: 12px 16px;
  border-radius: var(--pwb-radius);
  border: 1px solid var(--pwb-border);
  background: var(--pwb-surface-2);
  color: var(--pwb-text);
  font-size: var(--pwb-font-sm);
}
:where(.pwb-notice--error) { border-color: color-mix(in srgb, var(--pwb-error) 35%, transparent); background: color-mix(in srgb, var(--pwb-error) 8%, var(--pwb-surface)); }
:where(.pwb-notice--success) { border-color: color-mix(in srgb, var(--pwb-success) 35%, transparent); background: color-mix(in srgb, var(--pwb-success) 8%, var(--pwb-surface)); }

/* ---- Screen-reader only ---- */
.pwb-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ---- Reduced motion (WCAG 2.3.3 / user preference) ----
   No transitions in our markup, no rotating spinners (a soft pulse says
   "working" without movement), no shimmer, no smooth scrolling. */
@keyframes pwb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  [class*="pwb-"], [class*="pwb-"]::before, [class*="pwb-"]::after { transition: none !important; scroll-behavior: auto !important; }
  .pwb-atc__spin, .pwb-buy-now__spin, .pwb-qv__spin { animation: pwb-pulse 1.4s ease-in-out infinite !important; }
  .pwb-qv__skeleton i, .pwb-qv__skeleton b { animation: none !important; }
}