/*
 * Brand theme for the Wood Ranger Electric Snow Blower campaign (Campaigns OS brand-theme v0 shape).
 * Generated artifact: .campaign-runtime/theme/brand-theme.css (medium confidence, sourced from
 * source/checkout/css/components.css, which resolved to a Webflow boilerplate blue #3898ec).
 * Operator correction (build stage, 2026-09-24, revised to match the delivered checkout exactly): token values
 * copied from the design's own stylesheet (source/checkout/css/next-staging-core.css :root): primary #acf4a1,
 * primary-dark #000, primary-light #ededed, accent #3d3d3d, surfaces #fafafa/#fafcff, border #dfdfdf.
 * primary-foreground is #000 (not the design core's white) so text on the light-green primary stays legible
 * on the stock upsell badges. The yellow submit (#FFC107) comes from the design's inline overrides in css/checkout-woodranger.css.
 * Safety: :root custom-property overrides only. No selectors, no SDK surfaces.
 */
:root {
  --brand--color--primary: #acf4a1;
  --brand--color--primary-dark: #000;
  --brand--color--primary-light: #ededed;
  --brand--color--primary-lighter: #f9fbff;
  --brand--color--primary-foreground: #000000;
  --brand--color--accent: #3d3d3d;
  --brand--color--accent-foreground: #ffffff;
  --brand--color--cta-primary: #000;
  --brand--color--cta-foreground: #ffffff;
  --brand--color--background: #fafafa;
  --brand--color--surface: #fafcff;
  --brand--color--border: #dfdfdf;
  --brand--color--foreground: #1a1a1a;
  --brand--color--text-primary: #000;
  --brand--color--text-inverse: #ffffff;
  --brand--color--rating-star: #000;
  --component--color--outline: #cccccc;
}

/* ===== Brand lockup (shared by checkout / receipt / upsell): 1:1 with the landing header =====
   wordmark clip window + (R) + Barlow "ELECTRIC SNOW BLOWER" tagline with red dashes. */
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-700.ttf') format('truetype'); font-weight: 700; font-display: swap; }
.wr-brand { display: flex; flex-direction: column; align-items: center; width: 245px; max-width: 100%; text-decoration: none; }
.wr-brand__row { display: flex; align-items: flex-start; gap: 3px; width: 100%; }
.wr-brand__mark { flex: 1 1 0; min-width: 0; width: auto; height: 20px; overflow: hidden; }
.wr-brand__mark img { display: block; width: 100%; max-width: 100%; height: auto; transform: translateY(-30%); }
.wr-brand__reg { font-family: Arial, sans-serif; font-size: 11px; line-height: 1; flex: 0 0 11px; color: #222; }
.wr-brand__line { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; font-family: 'Barlow', Arial, sans-serif; font-weight: 700; font-size: 11px; line-height: 1.1; letter-spacing: .12em; color: #3f4549; white-space: nowrap; }
.wr-brand__line > span { font: inherit; letter-spacing: inherit; line-height: inherit; margin: 0; }
.wr-brand__line:before, .wr-brand__line:after { content: ''; height: 1px; background: #db011c; flex: 1 1 12px; max-width: 27px; }
@media screen and (max-width: 767px) {
  .wr-brand { width: 200px; }
  .wr-brand__mark { height: 17px; }
  .wr-brand__reg { font-size: 9px; flex-basis: 9px; }
  .wr-brand__line { font-size: 9px; gap: 6px; margin-top: 6px; }
  .wr-brand__line:before, .wr-brand__line:after { max-width: 20px; }
}