/* ===========================================================================
   shared-ui.css — was plugin-compat.css

   RENAMED because the old name now describes a problem that no longer exists.
   It used to carry 84 selectors reaching into plugin internals (.wbsm-*,
   .wbbe-*, .wbcux-*, .wbpc-*), which COMPONENT-OWNERSHIP.md forbids. Those all
   moved into the plugins that own them. Nothing here selects another package's
   class names any more.

   Three things live here, and the first one is the interesting one.

   1. THE GENERIC .wb-ui-* LAYER — surface, title, eyebrow, badge, button.
      Plugins apply these classes to their own markup; this file gives them
      their appearance.

      IT STAYS IN THE THEME DELIBERATELY. The obvious next step is to move it to
      wb-ui-kit with the rest of the design system, and that would break it. The
      kit registers at wp_enqueue_scripts priority 1, ahead of everything, because
      tokens must resolve before any consumer reads them. This layer needs the
      opposite: it has to beat plugin CSS, which is measured on staging at
      stylesheet 15-18 against this file at 36.

      Concretely, wb-product-content declares
          .wbpc-block  ->  padding: clamp(1rem, 2vw, 1.25rem)   (max 20px)
      and .wb-ui-surface below declares
          .wb-ui-surface  ->  padding: var(--wb-ui-surface-padding)   (max 24px)
      Same specificity, so load order decides, and the live computed value is
      24px. Move this file into the kit and the plugin wins instead — a silent
      4px change on every product block, and the same class of flip for
      wb-login, wb-loyalty, wb-notifications and wb-bundle-engine, all of which
      apply .wb-ui-* to elements their own stylesheets also style.

      So this is a late-cascade override layer, and the theme is the only place
      that loads late enough. Moving it to the kit is only safe once the
      duplicate declarations are removed from those five plugins, which is a
      separate piece of work with its own regression.

   2. The theme's own .wb-cio-plugin-zone / .wb-cio-zone-section wrappers — the
      containers the theme provides for plugins to render into. Theme-owned by
      definition.

   3. WooCommerce normalisation — notices, form rows, shop tables. Brief 3.74
      puts this in the theme on purpose.

   KNOWN GAP: wb-loyalty markup applies .wb-ui-surface--success and
   .wb-ui-badge--success, and neither is defined in any stylesheet. Those
   elements get the base .wb-ui-surface / .wb-ui-badge appearance and the
   modifier does nothing. Either define them or drop them from the markup;
   leaving a class that looks meaningful and is inert is the worse option.
   =========================================================================== */

.wb-cio-plugin-zone,
.wb-cio-zone-section {
  width: 100%;
  min-width: 0;
  clear: both;
}

.wb-cio-plugin-zone[data-wb-cio-zone],
.wb-cio-zone-section[data-wb-cio-section] {
  isolation: isolate;
}

.wb-cio-plugin-zone--product,
.wb-cio-zone-section--product-support,
.wb-cio-zone-section--product-post-tabs {
  margin: 1rem 0;
}

.wb-cio-plugin-zone--archive,
.wb-cio-zone-section--archive-pre-grid,
.wb-cio-zone-section--archive-post-grid {
  margin: 1rem 0 1.4rem;
}.wb-ui-surface{
  border-color: var(--wb-ui-surface-border);
  border-radius: var(--wb-ui-surface-radius);
  background: var(--wb-ui-surface-bg);
  box-shadow: var(--wb-ui-surface-shadow);
}.wb-ui-surface--soft{
  border-color: var(--border-soft);
  border-radius: var(--wb-ui-surface-radius-sm);
  background: var(--wb-ui-surface-bg-soft);
}.wb-ui-surface--warm{
  background: var(--surface-warm);
}

/* Tonal variants. These were referenced by markup in two plugins and defined
   nowhere, so the elements rendered with the base surface and the modifier did
   nothing — a class that looks meaningful and is inert.

   wb-checkout-ux's SurfaceRenderer maps tone => class for success / warm / alert
   / soft, and wb-loyalty applies --success to its thank-you panel. Tints follow
   what wb-checkout-ux's own .wbcux-surface.is-success and .is-alert already use,
   so the shared class and the plugin's local rule agree rather than compete. */
.wb-ui-surface--success {
  border-color: color-mix(in srgb, var(--status-success) 28%, transparent);
  background: color-mix(in srgb, var(--status-success) 8%, var(--surface));
}

.wb-ui-surface--alert {
  border-color: color-mix(in srgb, var(--status-error) 28%, transparent);
  background: color-mix(in srgb, var(--status-error) 8%, var(--surface));
}.wb-ui-title{
  color: color-mix(in srgb, var(--text) 94%, var(--bg) 6%);
  font-size: clamp(var(--text-lg, 18px), 2vw, var(--text-xl, 24px));
  line-height: var(--leading-snug, 1.35);
}.wb-ui-eyebrow{
  color: color-mix(in srgb, var(--accent-2) 82%, var(--text) 18%);
  font-size: var(--text-xs, 12px);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Emitted by wb-checkout-ux's SurfaceRenderer next to .wbcux-surface__meta, and
   defined nowhere. The plugin's own rule supplies the layout
   (display:flex; flex-wrap:wrap; gap:.45rem); this is the shared equivalent, so
   the class carries its meaning for any other consumer rather than relying on a
   plugin-local rule that happens to sit on the same element. */
.wb-ui-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}.wb-ui-badge{
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: .3rem .7rem;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: color-mix(in srgb, var(--text) 84%, var(--bg) 16%);
  font-size: var(--text-xs, 12px);
  font-weight: 700;
}

.wb-ui-badge--quiet {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface) 92%);
  color: color-mix(in srgb, var(--accent-2) 68%, var(--text) 32%);
}

/* Also referenced and undefined — wb-loyalty's credit code. Same construction as
   --quiet, on the success hue. Measured across both themes: 78/22 gave only
   4.70:1 in dark, so the mix is 60/40 — raising the --text share helps BOTH
   modes, because --text flips with the theme. 6.89:1 light, 6.30:1 dark. */
.wb-ui-badge--success {
  border-color: color-mix(in srgb, var(--status-success) 24%, transparent);
  background: color-mix(in srgb, var(--status-success) 10%, var(--surface));
  color: color-mix(in srgb, var(--status-success) 60%, var(--text) 40%);
}.wb-ui-button{
  min-height: 44px;
  padding: .72rem 1rem;
  border-radius: var(--radius-pill, 999px);
  border-width: 1px;
  font-size: var(--text-sm, 14px);
  font-weight: 700;
  line-height: 1.2;
}.wb-ui-button--primary{
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  background: linear-gradient(180deg, var(--accent-2), var(--accent-strong));
  color: var(--on-accent);
  box-shadow: 0 10px 20px rgba(14, 20, 28, .12);
}.wb-ui-button--secondary{
  border-color: color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, var(--bg) 8%);
  color: var(--text);
}.wb-ui-surface,
.wb-login-card,
.wbc-auth__intro{
  padding: var(--wb-ui-surface-padding);
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error {
  margin: 0 0 var(--space-4, 16px);
  padding: var(--space-4, 16px) var(--space-5, 24px);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--surface) 76%);
  border-radius: var(--radius-lg, 16px);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(14, 20, 28, .06));
  color: var(--text);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row select,
.woocommerce-page form .form-row textarea {
  min-height: 44px;
  padding: .72rem .9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md, 12px);
  background: var(--surface);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(14, 20, 28, .03);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-page form .form-row input.input-text:focus,
.woocommerce-page form .form-row select:focus,
.woocommerce-page form .form-row textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 2px;
}

.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
}