/*
 * KitSure SureCart <-> Etch compatibility: theme-bridge layer.
 *
 * Scoped under body.kitsure-sc-etch-theme-bridge -- the site-wide
 * light/dark token-sync layer that maps the shared --ks-sc-etch-* tokens
 * onto SureCart's --sc-* custom properties so SureCart UI (notably the
 * near-global floating cart drawer) follows the store's light/dark theme.
 * Enqueued (handle kitsure-surecart-etch-theme-bridge) exactly when the
 * theme-bridge script is -- i.e. gated on should_enqueue_theme_bridge()
 * (theme_bridge_enabled + master, wherever SureCart UI renders).
 *
 * Carries its own copy of the --ks-sc-etch-* token set (on
 * body.kitsure-sc-etch-theme-bridge) so the bridge stays correct on pages
 * that render only the drawer (no page-level compat surface). The
 * surface-polish rules live in the sibling surecart-etch-compat.css.
 */

body.kitsure-sc-etch-theme-bridge {
  --ks-sc-etch-page-max: 82rem;
  --ks-sc-etch-pad-inline: clamp(1rem, 3vw, 2rem);
  --ks-sc-etch-pad-block: clamp(1.25rem, 3vw, 2.5rem);
  --ks-sc-etch-card-radius: 14px;
  --ks-sc-etch-card-content-pad: clamp(0.9rem, 1.4vw, 1.05rem);
  /*
   * Every colour below resolves through an Etch/ACSS variable, so the shop follows the
   * site's palette and a merchant can restyle it from Etch. It did not use to: the page
   * background, the wash beneath it, the dot grid, the star colour and the whole dark
   * palette were hardcoded literals, so changing the Etch palette moved the text and the
   * accent and left the surfaces behind.
   *
   * That split also had a visible cost. The page background was a fixed pale mint while
   * the product card came from Etch's --body-bg-color: two unrelated sources that landed
   * 1.08:1 apart, so cards did not read as cards at all. Page and card are now derived
   * from the same pair of tokens, which makes the separation a property of the system
   * rather than a coincidence of two palettes.
   */
  --ks-sc-etch-panel: var(--body-bg-color, #ffffff);
  --ks-sc-etch-panel-soft: var(--neutral-ultra-light, #f5f7f9);
  --ks-sc-etch-panel-raised: var(--ks-bg, var(--body-bg-color, #ffffff));
  --ks-sc-etch-surface: var(--body-bg-color, #ffffff);
  --ks-sc-etch-ink: var(--text-dark, #132033);
  --ks-sc-etch-muted: var(--text-dark-muted, #596678);
  --ks-sc-etch-subtle: color-mix(in srgb, var(--ks-sc-etch-ink) 55%, var(--ks-sc-etch-page-bg));
  --ks-sc-etch-accent: var(--primary, var(--ks-brand, hsl(var(--ff-primary-h, 174) var(--ff-primary-s, 80%) var(--ff-primary-l, 40%))));
  --ks-sc-etch-accent-strong: var(--primary-hover, #0f766e);
  --ks-sc-etch-border: color-mix(in srgb, var(--ks-sc-etch-ink) 13%, transparent);
  --ks-sc-etch-soft-border: var(--ks-sc-etch-border);
  --ks-sc-etch-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--ks-sc-etch-ink) 10%, transparent);
  --ks-sc-etch-focus: color-mix(in srgb, var(--ks-sc-etch-accent) 28%, transparent);
  /* Glow vs ring: see the note beside the same pair in surecart-etch-compat.css. */
  --ks-sc-etch-focus-ring: var(--ks-sc-etch-ink);
  --ks-sc-etch-product-card: var(--ks-bg, var(--body-bg-color, #ffffff));
  --ks-sc-etch-page-bg: color-mix(in oklch, var(--ks-bg, var(--body-bg-color, #ffffff)), var(--ks-sc-etch-ink) var(--ks-sc-etch-page-tint, 9%));
  --ks-sc-etch-page-bg-deep: color-mix(in oklch, var(--ks-bg, var(--body-bg-color, #ffffff)), var(--ks-sc-etch-ink) calc(var(--ks-sc-etch-page-tint, 9%) + 5%));
  --ks-sc-etch-page-dot: color-mix(in srgb, var(--ks-sc-etch-accent) 14%, transparent);
  --ks-sc-etch-review-star: var(--warning, #f2b84b);
  --ks-sc-etch-review-star-empty: color-mix(in srgb, var(--ks-sc-etch-ink) 22%, var(--ks-sc-etch-product-card));
  --ks-sc-etch-buy-bg: var(--ks-sc-etch-ink);
  --ks-sc-etch-buy-hover-bg: var(--ks-sc-etch-ink);
  --ks-sc-etch-buy-ink: var(--text-light, #ffffff);
  --ks-sc-etch-buy-glow: 0 0.75rem 1.25rem color-mix(in srgb, var(--ks-sc-etch-ink) 16%, transparent);
  --ks-sc-etch-review-btn-bg: var(--ks-sc-etch-panel-raised);
  --ks-sc-etch-review-btn-ink: var(--ks-sc-etch-ink);
  --ks-sc-etch-review-btn-border: var(--ks-sc-etch-border);
  color: var(--ks-sc-etch-ink);
  color-scheme: light;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

html[data-ks-theme="dark"] body.kitsure-sc-etch-theme-bridge,
body.kitsure-sc-etch-theme-bridge.surecart-theme-dark {
  --ks-sc-etch-panel: var(--ks-bg, #101a2a);
  --ks-sc-etch-panel-soft: color-mix(in oklch, var(--ks-bg, #101a2a), var(--ks-sc-etch-ink) 5%);
  --ks-sc-etch-panel-raised: color-mix(in oklch, var(--ks-bg, #101a2a), var(--ks-sc-etch-ink) 9%);
  --ks-sc-etch-surface: var(--ks-bg, #101a2a);
  --ks-sc-etch-ink: var(--ks-ink, #edf7f6);
  --ks-sc-etch-muted: color-mix(in srgb, var(--ks-sc-etch-ink) 74%, var(--ks-sc-etch-page-bg));
  --ks-sc-etch-subtle: color-mix(in srgb, var(--ks-sc-etch-ink) 55%, var(--ks-sc-etch-page-bg));
  /*
   * Mixing the brand toward white in oklch LIGHTENS and DESATURATES: --primary
   * at chroma 0.095 came out as oklch(0.683 0.063 181), a dead sage green that
   * looked nothing like the brand and read as a disabled control. Prefer the
   * store's own dark brand token where one exists, and keep the old mix as the
   * fallback so a site without the token behaves exactly as before.
   */
  --ks-sc-etch-accent: var(--ks-brand, color-mix(in oklch, var(--primary, #14b8a6), white 34%));
  --ks-sc-etch-accent-strong: var(--ks-brand-hover, color-mix(in oklch, var(--primary, #14b8a6), white 52%));
  --ks-sc-etch-border: color-mix(in srgb, white 18%, transparent);
  --ks-sc-etch-soft-border: var(--ks-sc-etch-border);
  --ks-sc-etch-shadow: 0 1rem 2.5rem rgb(0 0 0 / 28%);
  --ks-sc-etch-page-bg: var(--ks-bg, #07111d);
  /* Raised is LIGHTER than the page in a dark scheme, the mirror of the light rule. */
  --ks-sc-etch-product-card: color-mix(in oklch, var(--ks-bg, #07111d), var(--ks-sc-etch-ink) 9%);
  --ks-sc-etch-page-bg-deep: color-mix(in oklch, var(--ks-bg, #07111d), var(--ks-sc-etch-ink) calc(var(--ks-sc-etch-page-tint, 9%) * 0.6));
  --ks-sc-etch-page-dot: color-mix(in srgb, var(--ks-sc-etch-accent) 12%, transparent);
  --ks-sc-etch-review-star: #ffd166;
  --ks-sc-etch-review-star-empty: color-mix(in srgb, var(--ks-sc-etch-ink) 26%, var(--ks-sc-etch-product-card));
  /*
   * The primary buy button MIRRORS the light rule rather than switching to the
   * accent. In light it is --ks-sc-etch-ink: near black on a white page, the
   * highest contrast thing on the screen, which is what makes it read as the
   * primary action. The dark branch used to reach for the accent instead, so
   * the same button arrived as a mid-tone green sitting beside an outlined
   * secondary that was brighter than it - the primary looked disabled and the
   * secondary looked primary.
   *
   * Using ink here means near-white on a dark page: the same idea, mirrored,
   * and it stays in the neutral family the outlined Buy Now button belongs to.
   */
  --ks-sc-etch-buy-bg: var(--ks-sc-etch-ink);
  --ks-sc-etch-buy-hover-bg: color-mix(in srgb, var(--ks-sc-etch-ink) 88%, var(--ks-sc-etch-accent));
  --ks-sc-etch-buy-ink: var(--ks-bg, #07111d);
  --ks-sc-etch-buy-glow: 0 0.8rem 1.5rem color-mix(in srgb, var(--ks-sc-etch-ink) 16%, transparent);
  --ks-sc-etch-review-btn-bg: var(--ks-sc-etch-accent);
  --ks-sc-etch-review-btn-ink: #07111d;
  --ks-sc-etch-review-btn-border: transparent;
  color-scheme: dark;
}

body.kitsure-sc-etch-theme-bridge {
  --sc-color-brand-primary: var(--ks-sc-etch-accent, hsl(var(--ff-primary-h, 174) var(--ff-primary-s, 80%) var(--ff-primary-l, 40%)));
  --sc-color-brand-secondary: var(--ks-sc-etch-accent-strong, #0f766e);
  --sc-color-brand-heading: var(--ks-sc-etch-ink, #132033);
  --sc-color-brand-body: var(--ks-sc-etch-muted, #596678);
  --sc-color-brand-main-background: var(--ks-sc-etch-page-bg, #f5fbfa);
  --sc-color-brand-content-background: var(--ks-sc-etch-panel, #ffffff);
  --sc-color-brand-stroke: var(--ks-sc-etch-border, #dce0e6);
  --sc-input-background-color: var(--ks-sc-etch-panel, #ffffff);
  --sc-input-background-color-hover: var(--ks-sc-etch-panel, #ffffff);
  --sc-input-background-color-focus: var(--ks-sc-etch-panel, #ffffff);
  --sc-input-border-color: var(--ks-sc-etch-border, #dce0e6);
  --sc-input-border-color-hover: color-mix(in srgb, var(--ks-sc-etch-accent, hsl(var(--ff-primary-h, 174) var(--ff-primary-s, 80%) var(--ff-primary-l, 40%))) 45%, var(--ks-sc-etch-border, #dce0e6));
  --sc-input-border-color-focus: var(--ks-sc-etch-accent, hsl(var(--ff-primary-h, 174) var(--ff-primary-s, 80%) var(--ff-primary-l, 40%)));
  --sc-input-color: var(--ks-sc-etch-ink, #132033);
  --sc-input-label-color: var(--ks-sc-etch-ink, #132033);
  --sc-input-help-text-color: var(--ks-sc-etch-muted, #596678);
  --sc-input-placeholder-color: var(--ks-sc-etch-subtle, #7a8798);
  --sc-panel-background-color: var(--ks-sc-etch-panel-raised, #ffffff);
  --sc-panel-border-color: var(--ks-sc-etch-border, #dce0e6);
  --sc-choice-background-color: var(--ks-sc-etch-panel, #ffffff);
  --sc-card-background-color: var(--ks-sc-etch-panel-raised, #ffffff);
  --sc-card-border-color: var(--ks-sc-etch-border, #dce0e6);
  --sc-drawer-border: solid 1px var(--ks-sc-etch-border, #dce0e6);
  --sc-overlay-background-color: rgb(7 17 29 / 56%);
  --sc-selected-price-color: var(--ks-sc-etch-ink, #132033);
  --sc-color-gray-500: var(--ks-sc-etch-muted, #596678);
  /* SureCart's primary-500/primary-text pair IS the component CTA pair
     (sc-button "primary" paints bg: primary-500, label: primary-text —
     their own default label is WHITE, i.e. "text ON primary"). These two
     tokens are also the ONLY levers that reach buttons nested inside other
     components' shadow roots (the login form's button), so they must be
     contrast-safe for ANY site --primary lightness. Map them to the house
     buy/ink treatment — AA by construction in both modes and it unifies the
     component CTAs (login, checkout submit) with the storefront buy
     buttons. Brand accenting elsewhere keeps riding brand-primary above.
     (The old accent-strong mapping misread primary-text as "primary-colored
     text" and produced accent-on-accent labels — a serious axe contrast
     failure on the dashboard login button, found by the audit finale.) */
  --sc-color-primary-500: var(--ks-sc-etch-buy-bg, #132033);
  --sc-color-primary-600: var(--ks-sc-etch-buy-hover-bg, #132033);
  --sc-color-primary-text: var(--ks-sc-etch-buy-ink, #ffffff);
  /* The floating cart icon block falls back to primary-500 + white; give
     it the buy treatment via SureCart's own tokens so it stays visible in
     both modes (dark: accent bg + near-black glyph). The counter chip
     rides ink/page-bg — a contrast pair in both modes. The glyph itself
     needs an element rule below: SureCart hardcodes its svg to white. */
  --sc-cart-icon-background: var(--ks-sc-etch-buy-bg, #132033);
  --sc-cart-icon-color: var(--ks-sc-etch-buy-ink, #ffffff);
  --sc-cart-counter-background: var(--ks-sc-etch-ink, #132033);
  --sc-cart-counter-color: var(--ks-sc-etch-page-bg, #ffffff);
}

/* SureCart's cart-icon stylesheet pins the svg glyph to --sc-color-white,
   ignoring the icon-color token — repoint it at the buy ink so the glyph
   stays legible on the buy background in both modes. */
body.kitsure-sc-etch-theme-bridge .wp-block-surecart-cart-icon__icon svg {
  color: var(--ks-sc-etch-buy-ink, #ffffff);
}

/* SureCart's stock checkout pattern SAVES its surfaces into post content:
   an inline background-color (#f3f4f6) on the columns wrapper and a
   has-white-background-color preset on the form column. Token remaps
   can't reach inline/preset styles, so in dark the checkout sat on light
   slabs with light inherited ink (ivacode field finding). Re-ground both
   to the dark surfaces; light mode stays merchant-owned (no override). */
html[data-ks-theme="dark"] body.kitsure-sc-etch-theme-bridge .wp-block-surecart-checkout-form .wp-block-surecart-columns.has-background,
body.kitsure-sc-etch-theme-bridge.surecart-theme-dark .wp-block-surecart-checkout-form .wp-block-surecart-columns.has-background {
  background-color: var(--ks-sc-etch-page-bg, #07111d) !important;
}

html[data-ks-theme="dark"] body.kitsure-sc-etch-theme-bridge .wp-block-surecart-checkout-form .wp-block-surecart-column.has-white-background-color,
body.kitsure-sc-etch-theme-bridge.surecart-theme-dark .wp-block-surecart-checkout-form .wp-block-surecart-column.has-white-background-color {
  background-color: var(--ks-sc-etch-panel, #101a2a) !important;
}

html[data-ks-theme="dark"] body.kitsure-sc-etch-theme-bridge,
body.kitsure-sc-etch-theme-bridge.surecart-theme-dark {
  --sc-color-gray-50: #edf7f6;
  --sc-color-gray-100: #d8e7e5;
  --sc-color-gray-200: #b9c7d4;
  --sc-color-gray-300: #9fb0be;
  --sc-color-gray-400: #8fa2b4;
  --sc-color-gray-500: #708499;
  --sc-color-gray-600: #4c6074;
  --sc-color-gray-700: #2b3d51;
  --sc-color-gray-800: #1d3045;
  --sc-color-gray-900: #142235;
  --sc-color-gray-950: #0b1724;
  --sc-color-primary: 174;
  --sc-color-primary-luminance: 63%;
  --sc-color-primary-saturation: 73%;
  --sc-input-background-color: var(--ks-sc-etch-panel, #101a2a);
  --sc-input-background-color-hover: var(--ks-sc-etch-panel, #101a2a);
  --sc-input-background-color-focus: var(--ks-sc-etch-panel, #101a2a);
  --sc-input-background-color-disabled: var(--ks-sc-etch-panel-soft, #142235);
  --sc-input-border-color: var(--ks-sc-etch-border, rgb(255 255 255 / 18%));
  --sc-input-border-color-hover: color-mix(in srgb, var(--ks-sc-etch-accent, #5ee4d3) 48%, transparent);
  --sc-input-color: var(--ks-sc-etch-ink, #edf7f6);
  --sc-input-label-color: var(--ks-sc-etch-ink, #edf7f6);
  --sc-input-help-text-color: var(--ks-sc-etch-muted, #b9c7d4);
  --sc-input-placeholder-color: var(--ks-sc-etch-subtle, #8fa2b4);
  --sc-panel-background-color: var(--ks-sc-etch-panel-raised, #17263a);
  --sc-panel-border-color: var(--ks-sc-etch-border, rgb(255 255 255 / 18%));
  --sc-choice-background-color: var(--ks-sc-etch-panel, #101a2a);
  --sc-card-background-color: var(--ks-sc-etch-panel-raised, #17263a);
  --sc-card-border-color: var(--ks-sc-etch-border, rgb(255 255 255 / 18%));
  --sc-overlay-background-color: rgb(0 0 0 / 62%);
  --sc-selected-price-color: var(--ks-sc-etch-ink, #edf7f6);
  /* NO primary-500/600/text overrides here: the light block already maps
     the component-CTA pair to the buy/ink tokens, and THOSE flip per mode
     (accent bg + #07111d ink in dark). The old dark override pointed BOTH
     primary-500 and primary-text at the accent — teal-on-teal CTA labels
     on checkout/login (ivacode field finding). */
}

body.kitsure-sc-etch-theme-bridge :where(sc-checkout, sc-form, sc-card, sc-dashboard-module, sc-order-confirmation, sc-order-confirmation-details, sc-order-confirmation-line-items, sc-order-confirmation-totals, .sc-dashboard, .wp-block-surecart-cart, .wp-block-surecart-checkout-form, .wp-block-surecart-order-confirmation) {
  color: var(--ks-sc-etch-ink);
}

body.kitsure-sc-etch-theme-bridge :where(.wp-block-surecart-product-title, .wp-block-surecart-product-title a, .wp-block-surecart-product-selected-price-amount, .wp-block-surecart-product-selected-price-interval, .wp-block-surecart-price-amount, .wp-block-surecart-product-price, .wp-block-surecart-product-review-list, .wp-block-surecart-product-reviews, .wp-block-surecart-product-review-form, .wp-block-surecart-product-list-related, .wp-block-surecart-product-list-related h2, .wp-block-surecart-product-list-related h3, .wp-block-surecart-product-list-related .sc-product-item, .wp-block-surecart-product-list-related .sc-product-item-link) {
  color: var(--ks-sc-etch-ink);
}

body.kitsure-sc-etch-theme-bridge :where(.wp-block-surecart-product-description, .wp-block-surecart-product-description p, .wp-block-surecart-product-review-list p, .wp-block-surecart-product-reviews p, .wp-block-surecart-product-list-related .wp-block-surecart-product-price, .wp-block-surecart-product-list-related .wp-block-surecart-product-selected-price-amount) {
  color: var(--ks-sc-etch-muted);
}

body.kitsure-sc-etch-theme-bridge :where(.wp-block-surecart-product-list-related [class*="price"], .wp-block-surecart-product-template [class*="price"]) {
  color: var(--ks-sc-etch-muted);
}

body.kitsure-sc-etch-theme-bridge :where(.wp-block-surecart-product-review-average-rating-stars, .wp-block-surecart-product-review-rating-stars) {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  width: auto;
  max-width: 100%;
  min-height: 1.15rem;
  color: var(--ks-sc-etch-review-star-empty);
  line-height: 1;
  vertical-align: middle;
}

body.kitsure-sc-etch-theme-bridge :where(.wp-block-surecart-product-template, form.wp-block-surecart-product-page, .wp-block-surecart-product-review-list) :where(.wp-block-surecart-product-review-average-rating-stars, .wp-block-surecart-product-review-rating-stars) svg {
  display: block;
  inline-size: 1.12rem;
  block-size: 1.12rem;
  flex: 0 0 auto;
  color: var(--ks-sc-etch-review-star-empty);
  fill: transparent;
  stroke: var(--ks-sc-etch-review-star-empty);
}

body.kitsure-sc-etch-theme-bridge :where(.wp-block-surecart-product-template, form.wp-block-surecart-product-page, .wp-block-surecart-product-review-list) :where(.wp-block-surecart-product-review-average-rating-stars, .wp-block-surecart-product-review-rating-stars) svg:not([fill-opacity="0"]) {
  color: var(--ks-sc-etch-review-star);
  fill: var(--ks-sc-etch-review-star) !important;
  stroke: var(--ks-sc-etch-review-star);
}

body.kitsure-sc-etch-theme-bridge :where(.sc-review-link, .wp-block-surecart-product-review-total-rating, .sc-review-count, .surecart-review-label) {
  color: color-mix(in srgb, var(--ks-sc-etch-accent) 82%, var(--ks-sc-etch-ink));
}

body.kitsure-sc-etch-theme-bridge :where(
  .wp-block-surecart-product-template,
  form.wp-block-surecart-product-page,
  .wp-block-surecart-product-list,
  .wp-block-surecart-product-list-related,
  .wp-block-surecart-product-reviews,
  .wp-block-surecart-product-review-list,
  .wp-block-surecart-cart,
  .wp-block-surecart-checkout-form,
  .wp-block-surecart-order-confirmation,
  .wp-block-surecart-customer-dashboard,
  sc-checkout,
  sc-form,
  sc-card,
  sc-dashboard-module,
  sc-order-confirmation
) :where(a) {
  color: color-mix(in srgb, var(--ks-sc-etch-accent) 82%, var(--ks-sc-etch-ink));
}

/* SureCart 4.6+ renders the cart drawer as class-based markup; the old
   web-component panel parts left with the 2026-09-05 liveness census. */
body.kitsure-sc-etch-theme-bridge :where(sc-card, sc-dashboard-module)::part(base),
body.kitsure-sc-etch-theme-bridge .sc-drawer.wp-block-surecart-slide-out-cart {
  background-color: var(--ks-sc-etch-panel-raised);
  border-color: var(--ks-sc-etch-border);
  color: var(--ks-sc-etch-ink);
}

/* SureCart 4.6.x renders the slide-out cart as class-based markup (no shadow
   parts), and the block's own attrs pin an INLINE light background that the
   ::part(panel) rule above can no longer reach — dark-mode shoppers got a
   light drawer stranded on a dark site (found by the 2026-08-21 audit).
   In light mode the merchant's configured background keeps winning (the
   inline attr outranks the classes on purpose); in dark mode the panel must
   follow the theme — the attr has no dark variant to respect — so this
   narrowly-scoped override outranks the inline style. The dark token remaps
   above carry the drawer's inner text and controls along. */
body.kitsure-sc-etch-theme-bridge.surecart-theme-dark .sc-drawer.wp-block-surecart-slide-out-cart {
  background-color: var(--ks-sc-etch-panel-raised) !important;
  color: var(--ks-sc-etch-ink);
}

/* The slide-out template's per-element text colors are light-mode values
   with no dark variant, and WP serializes block text colors as INLINE
   styles (has-text-color + style="color:…") — on the dark panel they read
   near-invisible and only an !important rule can reach them. Re-point
   primary text to ink and secondary text to muted, scoped to the dark
   drawer only so light mode keeps every merchant-configured color. The
   KitSure wishlist drawer entry ships its own dark label; same treatment. */
body.kitsure-sc-etch-theme-bridge.surecart-theme-dark .sc-drawer.wp-block-surecart-slide-out-cart :is(
  p.has-text-color,
  .wp-block-surecart-cart-line-item-title,
  .wp-block-surecart-cart-line-item-title a,
  .wp-block-surecart-cart-line-item-title span,
  .wp-block-surecart-cart-line-item-amount,
  .wp-block-surecart-cart-subtotal-amount,
  .kitsure-wl-entry,
  .kitsure-wl-entry__label
) {
  color: var(--ks-sc-etch-ink) !important;
}

body.kitsure-sc-etch-theme-bridge.surecart-theme-dark .sc-drawer.wp-block-surecart-slide-out-cart :is(
  .wp-block-surecart-cart-line-item-price-name,
  .wp-block-surecart-cart-line-item-scratch-amount,
  .wp-block-surecart-cart-line-item-remove,
  .wp-block-surecart-cart-line-item-remove__label,
  .sc-cart-line-item-details__toggle-label
) {
  color: var(--ks-sc-etch-muted) !important;
}

/* The same two helper texts in LIGHT mode. SureCart's slide-out pattern saves
   them with its own grey (#828c99: the "Taxes & shipping calculated at
   checkout" paragraph keeps the hex, the price-name block serializes the same
   grey as rgb(130, 140, 153)), 3.4:1 on the white panel. Only that shipped
   literal is re-pointed - matched on the inline value itself, in both
   spellings - so a merchant who picked another colour keeps it. The dark
   rules above carry one more class and keep winning there. */
body.kitsure-sc-etch-theme-bridge .sc-drawer.wp-block-surecart-slide-out-cart :is(
  .wp-block-surecart-cart-line-item-price-name,
  p.has-text-color
):is([style*="828c99"], [style*="130, 140, 153"]) {
  color: var(--ks-sc-etch-muted) !important;
}

/* The dark context is this layer's own construct, so embedded controls
   must stay readable in it (finale axe pass, shop-dark). Two different
   local grounds, two different fixes: SureCart's sort-group label sits on
   the DARK sidebar, so it takes the light muted ink; the KitSure Filters
   price-field labels sit INSIDE the filters panel, which deliberately
   stays a light card in dark mode — their slate was the classic
   4.34-on-tint near-miss, so they take the darker slate that clears AA on
   the tinted panel instead. */
body.kitsure-sc-etch-theme-bridge.surecart-theme-dark .sc-form-control {
  /* SureCart's label grey rides the UNINVERTED dark gray ramp (gray-700
     stays dark in dark mode) and its own rule outranks plain scoping —
     force the readable muted ink. Wider ramp inversion is recorded debt,
     not finale scope. */
  color: var(--ks-sc-etch-muted) !important;
}

body.kitsure-sc-etch-theme-bridge.surecart-theme-dark .kitsure-wrap .kitsure-price-filter .kitsure-control-field > span {
  color: var(--sc-color-gray-600, #4c6074);
}

/* Light chrome inside the dark drawer: the cart-count pill and the runtime
   close control keep light block/attr backgrounds — flip them to the soft
   dark surface (inline/attr-backed, so these two need the override force). */
body.kitsure-sc-etch-theme-bridge.surecart-theme-dark .sc-drawer.wp-block-surecart-slide-out-cart :is(
  .wp-block-surecart-cart-count,
  button.has-background,
  [class*="close"] button,
  button[class*="close"]
) {
  background-color: var(--ks-sc-etch-panel-soft) !important;
  color: var(--ks-sc-etch-ink) !important;
}

body.kitsure-sc-etch-theme-bridge .sc-drawer:not(.open):not([open]) {
  visibility: hidden;
  pointer-events: none;
  animation: none;
}

body.kitsure-sc-etch-theme-bridge .sc-drawer__backdrop:not(.show) {
  visibility: hidden;
  pointer-events: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Of SureCart's form components only sc-checkbox still reaches the light DOM
   in 4.7.2 (checkout's gift-card / terms rows); the input, select, textarea,
   radio, switch, choice and form-row elements now live inside other
   components' shadow roots, where a page stylesheet cannot reach them
   (2026-09-05 liveness census). Their tokens are mapped above instead. */
body.kitsure-sc-etch-theme-bridge :where(sc-checkbox) {
  color: var(--ks-sc-etch-ink);
}

body.kitsure-sc-etch-theme-bridge :where(sc-button)::part(base),
body.kitsure-sc-etch-theme-bridge :where(sc-button)::part(label) {
  color: inherit;
}

/* Primary component CTAs take the buy ink explicitly: the :where() inherit
   above is right for DEFAULT buttons but paints a primary label in context
   ink — ink-on-ink once primary-500 maps to the buy background. Top-level
   buttons (checkout submit) are reached here via ::part; buttons nested in
   another component's shadow (the login form's) are out of ::part reach and
   take --sc-color-primary-text instead — mapped to the same buy ink. */
body.kitsure-sc-etch-theme-bridge sc-button[type="primary"]::part(base),
body.kitsure-sc-etch-theme-bridge sc-button[type="primary"]::part(label) {
  color: var(--ks-sc-etch-buy-ink, #ffffff);
}

body.kitsure-sc-etch-theme-bridge :where(sc-button)::part(base) {
  border-radius: 999px;
}