:root {
  /*
   * System bridge
   * -------------
   * theme.json is the source of truth for shared WordPress/WooCommerce tokens.
   * Component CSS keeps the historical --batya-* names, but shared values now
   * resolve through WordPress presets instead of maintaining a second system.
   */
  --batya-text: var(--wp--preset--color--text, #1b1815);
  --batya-text-soft: var(--wp--preset--color--subtle-text, #706861);
  --batya-text-faint: #9a9087;
  --batya-bg: var(--wp--preset--color--background, #fbf7f2);
  --batya-card: var(--wp--preset--color--card, #ffffff);
  --batya-surface: var(--wp--preset--color--surface, #f6f1eb);
  --batya-surface-2: #eee7df;
  --batya-border: var(--wp--preset--color--border, #e7ddd3);
  --batya-border-strong: #d8cabd;

  --batya-brand: var(--wp--preset--color--accent, #ff6900);
  --batya-brand-dark: #c34b00;
  --batya-brand-soft: var(--wp--preset--color--brand-soft, #fff0e5);
  --batya-brand-border: #ffd0ae;

  /* Backward-compatible action aliases now point at the canonical brand CTA. */
  --batya-accent: var(--batya-brand);
  --batya-accent-soft: var(--batya-brand-dark);

  --batya-success-bg: #edf8f1;
  --batya-success-text: #176a43;
  --batya-danger-bg: #fff1f0;
  --batya-danger-text: #9a2c2c;
  --batya-footer-bg: #191715;
  --batya-footer-surface: #24211e;
  --batya-footer-text: #d8d0c9;

  /* Geometry system: keep a small, predictable set of radii and control sizes. */
  --batya-radius-xs: 8px;
  --batya-radius-sm: 10px;
  --batya-radius-control: 12px;
  --batya-radius: 14px;
  --batya-radius-card: 16px;
  --batya-radius-lg: 18px;
  --batya-radius-pill: 999px;
  --batya-control-compact: 38px;
  --batya-control: 44px;
  --batya-control-large: 46px;

  /* Keep the local API, but let theme.json own the shared spacing scale. */
  --batya-space-1: var(--wp--preset--spacing--micro, 4px);
  --batya-space-2: var(--wp--preset--spacing--xs, 8px);
  --batya-space-3: var(--wp--preset--spacing--s, 12px);
  --batya-space-4: var(--wp--preset--spacing--m, 16px);
  --batya-space-5: var(--wp--preset--spacing--l, 24px);
  --batya-space-6: var(--wp--preset--spacing--xl, 32px);

  --batya-shadow: none;
  --batya-container: var(--wp--style--global--wide-size, 1280px);
  --batya-product-media-ratio: 3 / 4;
  --batya-font: var(--wp--preset--font-family--system-sans, "Onest", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);

  /* Semantic typography shared with WordPress and WooCommerce blocks. */
  --batya-font-xs: var(--wp--preset--font-size--x-small, 12px);
  --batya-font-sm: var(--wp--preset--font-size--small, 14px);
  --batya-font-base: var(--wp--preset--font-size--base, 16px);
  --batya-font-md: var(--wp--preset--font-size--medium, 18px);
  --batya-font-lg: var(--wp--preset--font-size--large, 24px);
  --batya-font-xl: var(--wp--preset--font-size--x-large, 32px);
  --batya-font-xxl: var(--wp--preset--font-size--xx-large, 40px);

  --batya-weight-regular: 400;
  --batya-weight-medium: 500;
  --batya-weight-semibold: 600;

  /*
   * Compatibility with content saved before the canonical WordPress preset
   * slugs were adopted. New code should use x-small/small/base/medium/etc.
   */
  --wp--preset--font-size--xs: var(--wp--preset--font-size--small, 14px);
  --wp--preset--font-size--sm: var(--wp--preset--font-size--base, 16px);
  --wp--preset--font-size--md: var(--wp--preset--font-size--medium, 18px);
  --wp--preset--font-size--lg: var(--wp--preset--font-size--large, 24px);
  --wp--preset--font-size--xl: var(--wp--preset--font-size--x-large, 32px);
  --wp--preset--font-size--xxl: var(--wp--preset--font-size--xx-large, 40px);
}

/* Preserve old Gutenberg preset classes without keeping duplicate editor presets. */
.has-xs-font-size { font-size: var(--wp--preset--font-size--xs) !important; }
.has-sm-font-size { font-size: var(--wp--preset--font-size--sm) !important; }
.has-md-font-size { font-size: var(--wp--preset--font-size--md) !important; }
.has-lg-font-size { font-size: var(--wp--preset--font-size--lg) !important; }
.has-xl-font-size { font-size: var(--wp--preset--font-size--xl) !important; }
.has-xxl-font-size { font-size: var(--wp--preset--font-size--xxl) !important; }

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* Reserve the desktop scrollbar gutter from the first paint. During slow
     loads/AJAX sections the document can briefly be shorter than the viewport;
     without a stable gutter Chromium then widens the layout and shrinks it
     again as soon as the vertical scrollbar appears. */
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  font-family: var(--batya-font);
  color: var(--batya-text);
  background: var(--batya-bg);
  font-size: var(--batya-font-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-synthesis: style;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
strong, b { font-weight: var(--batya-weight-semibold); }

/* Chromium/WebKit add a colored tap flash to links and controls on touch
   devices. The theme already has explicit states, so suppress only that UA
   overlay while keeping the keyboard :focus-visible system below intact. */
:where(
  a[href],
  button,
  input,
  select,
  textarea,
  summary,
  label[for],
  [role="button"],
  [role="link"],
  [tabindex]:not([tabindex="-1"])
) {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: var(--batya-brand-soft);
  color: var(--batya-text);
}

/* Focus system ----------------------------------------------------------
   Reset Chromium's UA focus outline first, then restore one predictable brand
   ring on genuinely interactive controls. Programmatically focused status/error
   containers stay visually neutral; screen readers can still move focus to them. */
:focus {
  outline: none;
}

:where(
  a[href],
  button,
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [role="link"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--batya-brand);
  outline-offset: 2px;
}

/* Woo and other scripts often focus alerts a moment after AJAX completion.
   Some third-party styles re-add an outline/box-shadow later in the cascade,
   hence !important is intentional here. These nodes are not controls. */
:where(
  [role="alert"],
  [role="status"],
  .woocommerce-error,
  .woocommerce-info,
  .woocommerce-message,
  .woocommerce-notice
):focus,
:where(
  [role="alert"],
  [role="status"],
  .woocommerce-error,
  .woocommerce-info,
  .woocommerce-message,
  .woocommerce-notice
):focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* Generic script-only focus anchors should not get a UA rectangle either. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.75rem;
  line-height: 1.25;
  font-weight: var(--batya-weight-semibold);
}

p { margin: 0 0 1rem; }

.site-main { min-height: 60vh; }
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  top: var(--batya-space-2);
  left: var(--batya-space-2);
  z-index: 10000;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--batya-space-2) var(--batya-space-3);
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  border: 1px solid var(--batya-border-strong);
  border-radius: var(--batya-radius-sm);
  background: var(--batya-card);
  color: var(--batya-text);
  box-shadow: var(--batya-shadow);
}

/* Stable numeral widths improve price, phone and counter alignment. */
.price,
.woocommerce-Price-amount,
.product-card__price,
.single-product-card__price,
.single-sticky-bar__price,
.site-footer__phone,
.home-store-card__phone,
.header-cart-count,
.mobile-bottom-nav__count {
  font-variant-numeric: tabular-nums;
}