/*
Theme Name: Online Kamloops
Author: Level Up Enterprises
Author URI: https://levelupenterprises.ca
Description: Domains, hosting, email & security storefront — one theme, two brands (Online Kamloops and Level Up Webservices), built around GoDaddy's Reseller Store plugin.
Version: 1.5.1
Requires at least: 6.2
Requires PHP: 8.1
Tested up to: 6.8
Text Domain: online-kamloops
*/

/*
 * Self-hosted fonts — the only two weights actually used anywhere in this
 * file (checked directly: every font-weight declaration below is either
 * 400 or 600, nothing else). Originally loaded from Google Fonts
 * (fonts.googleapis.com -> fonts.gstatic.com, a 3-round-trip chain across
 * two external origins for ~44KB); self-hosting these two files removes
 * both external origins entirely. Swap for real files if the brand ever
 * needs 500/700 Barlow or 400 Barlow Condensed — check first, since the
 * previous version requested all five weights but only ever used two.
 */
@font-face {
  font-family: "Barlow";
  src: url("assets/fonts/barlow-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/*
 * "Industry" design system — ported from
 * `claude design files/_ds/industry-.../styles.css` (the project's design
 * mockups), kept verbatim wherever WordPress's plain-CSS enqueue model
 * allows (no Tailwind/build-step layer needed here, unlike the earlier
 * Next.js build — this is a more direct port of the original file).
 * Retune values here, not per-template — see that file's readme.md for the
 * full component-class reference.
 */
:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: oklch(52% 0.19 25);
  --color-accent-2: oklch(58% 0.10 211);
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — one shared lightness scale in OKLCH, so the same step of
     any role matches the others in visual value. This root set is Level
     Up Webservices' ramp (crimson primary, teal secondary, mostly
     unused); body.brand-ok below redefines both ramps wholesale (cyan
     primary, crimson secondary) rather than reusing these. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: oklch(97% 0.015 25);
  --color-accent-200: oklch(92% 0.045 25);
  --color-accent-300: oklch(85% 0.085 25);
  --color-accent-400: oklch(75% 0.13 25);
  --color-accent-500: oklch(65% 0.17 25);
  --color-accent-600: oklch(55% 0.19 25);
  --color-accent-700: oklch(43% 0.165 25);
  --color-accent-800: oklch(31% 0.12 25);
  --color-accent-900: oklch(21% 0.08 25);

  --color-accent-2-100: oklch(97% 0.012 211);
  --color-accent-2-200: oklch(92% 0.03 211);
  --color-accent-2-300: oklch(85% 0.055 211);
  --color-accent-2-400: oklch(75% 0.08 211);
  --color-accent-2-500: oklch(65% 0.10 211);
  --color-accent-2-600: oklch(55% 0.11 211);
  --color-accent-2-700: oklch(43% 0.095 211);
  --color-accent-2-800: oklch(31% 0.065 211);
  --color-accent-2-900: oklch(21% 0.045 211);

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);

  /* Container width used throughout — matches the original mockups'
     max-width:1200px sections. */
  --container: 1200px;

  /* — brand-varying shape/surface tokens — everything above this point is
       shared structure (spacing, type ramp, container width); everything
       below is redefined wholesale under body.brand-ok, a few lines down,
       so a single set of component rules (.card/.btn/.tag/etc., further
       below) can serve both brands with zero per-brand markup. Values
       here are the site's original "blueprint" look, now specifically
       Level Up Webservices' look — see the approved branding canvas
       ("Two Storefront Brands") for where these two directions came
       from. */
  --card-bg: transparent;
  --card-border: 1px solid var(--color-divider);
  --card-radius: 0px;
  --card-shadow: none;
  --btn-radius: 0px;
  --btn-primary-text: var(--color-bg);
  --btn-secondary-bg: transparent;
  --tag-radius: calc(var(--radius-md) * 0.75);
  --input-radius: 0px;
}

/*
 * Online Kamloops brand override — same token names as :root above,
 * different values, applied via the body class ok_get_current_brand()
 * sets in header.php (inc/brand.php resolves which brand a given
 * request gets: domain match, then ?brand=/cookie, then a site default).
 * Palette sampled from the real Online Kamloops logo: cream base, cyan
 * leading instead of crimson (so this doesn't just read as a recolor of
 * the other brand), crimson kept as a secondary accent for small pops
 * (the "Bundle" tag, the hero eyebrow). Rounded corners and soft warm
 * shadows replace the hairline-bordered "blueprint" corner-mark system —
 * .blueprint's tick marks are hidden outright for this brand, below.
 */
body.brand-ok {
  --color-bg: #f8f2e7;
  --color-surface: #f0dfc8;
  --color-text: #2a2019;
  --color-divider: color-mix(in srgb, #2a2019 14%, transparent);

  --color-accent: oklch(64% 0.13 213);
  --color-accent-100: oklch(95% 0.03 213);
  --color-accent-200: oklch(90% 0.05 213);
  --color-accent-300: oklch(84% 0.075 213);
  --color-accent-400: oklch(76% 0.105 213);
  --color-accent-500: oklch(68% 0.125 213);
  --color-accent-600: oklch(56% 0.13 213);
  --color-accent-700: oklch(45% 0.11 213);
  --color-accent-800: oklch(33% 0.08 213);
  --color-accent-900: oklch(23% 0.055 213);

  /* Secondary accent flips too — crimson, the primary brand's whole
     identity, becomes Online Kamloops' small-dose pop color instead. */
  --color-accent-2: oklch(52% 0.19 25);
  --color-accent-2-100: oklch(95% 0.03 25);
  --color-accent-2-200: oklch(90% 0.05 25);
  --color-accent-2-300: oklch(83% 0.09 25);
  --color-accent-2-400: oklch(74% 0.135 25);
  --color-accent-2-500: oklch(64% 0.17 25);
  --color-accent-2-600: oklch(55% 0.19 25);
  --color-accent-2-700: oklch(43% 0.165 25);
  --color-accent-2-800: oklch(31% 0.12 25);
  --color-accent-2-900: oklch(21% 0.08 25);

  --shadow-sm: 0 2px 8px color-mix(in srgb, #5a371e 12%, transparent);
  --shadow-md: 0 6px 18px color-mix(in srgb, #5a371e 14%, transparent);
  --shadow-lg: 0 10px 28px color-mix(in srgb, #5a371e 14%, transparent);

  --card-bg: var(--color-surface);
  --card-border: none;
  --card-radius: 16px;
  --card-shadow: var(--shadow-md);
  --btn-radius: 999px;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #ffffff;
  --tag-radius: 999px;
  --input-radius: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-700); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* Same visual treatment as <h6> used as a purely decorative section
   kicker, but as a non-heading element — matches the a11y fix already
   made in the earlier Next.js build (see that project's globals.css). */
.eyebrow {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0 0 var(--space-2); font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
}

.container { max-width: var(--container); margin: 0 auto; padding-left: 24px; padding-right: 24px; }

.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* — blueprint corner marks — purely the tick-mark decoration now; the
     border/radius it used to also set are owned by .card/.btn themselves
     (via --card-border/--card-radius/--btn-radius) so each brand's shape
     comes from one place. Online Kamloops hides the marks outright —
     they're a Level Up Webservices-only detail, not a recolor target. */
.blueprint { position: relative; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }
body.brand-ok .blueprint > .corner { display: none; }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid var(--color-divider);
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--btn-radius);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--btn-primary-text); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--btn-primary-text); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { background: var(--btn-secondary-bg); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); border-color: transparent; }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms (ported from the fuller original design-system stylesheet —
     only pulled in now that a real dropdown needs it) — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--input-radius);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
select.input { cursor: pointer; }

/* — category selector (dropdown + add-to-cart) — */
.ok-selector { display: flex; flex-direction: column; gap: var(--space-3); }
.ok-selector__details { min-height: 60px; }
.ok-selector__excerpt { font-size: 13px; opacity: 0.85; }
.ok-selector .rstore-pricing { font-family: var(--font-heading); font-size: 22px; font-weight: 600; margin-bottom: var(--space-1); }

/* — reseller-store plugin JS state classes — the plugin's own store.css
     (which defines these) is dequeued in functions.php, so its
     add-to-cart loading/success/error states need equivalents here or
     the accumulate-mode buttons (redirect=false, see
     template-parts/category-selector.php and the bundle configurator
     pages) would show every state at once instead of toggling. — */
.rstore-loading-hidden, .rstore-cart-hidden, .rstore-message-hidden { display: none; }
.rstore-add-to-cart-form { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.rstore-add-to-cart-form .btn { width: 100%; }
.rstore-cart { display: flex; align-items: center; gap: 6px; color: var(--color-accent-700); font-size: 14px; }
.rstore-message { font-size: 13px; color: var(--color-accent-700); }
.rstore-loading { font-size: 13px; opacity: 0.7; }
.rstore-loading:not(.rstore-loading-hidden)::after { content: "Adding…"; }

/* — promo code chip — flex-wrap + a shared value+button group so a long
     code at a narrow width wraps the whole group onto its own line
     rather than breaking the two-word label apart (found on the
     Complete Business card at 375px — COMPLETE10 is long enough to
     starve "Promo code" of room when everything's forced onto one row). — */
.ok-promo-code {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border: 1px dashed var(--color-divider);
  border-radius: var(--input-radius);
}
.ok-promo-code__label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text); opacity: 0.6; white-space: nowrap; }
.ok-promo-code__value-group { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.ok-promo-code__value { font-family: monospace; font-size: 15px; font-weight: 600; letter-spacing: 0.03em; }
.ok-promo-code__copy { padding: 4px 10px; font-size: 12px; min-width: 84px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--card-radius); background: var(--card-bg);
  border: var(--card-border); box-shadow: var(--card-shadow);
}
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; }
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }

/* — tags — */
.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: var(--tag-radius); }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
/* Online Kamloops leads with cyan everywhere else, but its two small
   "eyebrow" tags (category label, "Bundle" badge) pop with the secondary
   crimson accent instead of a cyan outline — matches the approved
   branding canvas exactly; Level Up Webservices is untouched here. */
body.brand-ok .tag-outline { border-color: transparent; background: var(--color-accent-2-100); color: var(--color-accent-2-700); }
body.brand-ok .tag-accent { background: var(--color-accent-2-100); color: var(--color-accent-2-700); }

/* — nav — */
.site-nav {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; row-gap: 8px;
  padding: var(--space-3) 24px; border-bottom: 1px solid var(--color-divider);
  position: sticky; top: 0; z-index: 20; background: var(--color-bg);
}
.site-nav__logo { display: flex; align-items: center; gap: var(--space-2); margin-right: auto; }
.site-nav__logo img { height: 32px; width: auto; }
.site-nav__wordmark-text { font-family: var(--font-heading); font-weight: 600; font-size: 20px; color: var(--color-text); }
/* — Level Up Webservices' nav mark: no logo file (logo.png is the
     separate "Level Up Enterprises" corporate mark) — a small text +
     shape wordmark instead. Online Kamloops doesn't use any of this;
     it renders its real logo file plus .site-nav__wordmark-text. — */
.site-nav__wordmark { display: flex; align-items: baseline; gap: 7px; }
.site-nav__wordmark-main { font-family: var(--font-heading); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; color: var(--color-text); }
.site-nav__wordmark-mark {
  width: 11px; height: 11px; background: var(--color-accent);
  clip-path: polygon(20% 0%, 40% 0%, 100% 90%, 80% 100%, 60% 60%);
}
.site-nav__wordmark-sub { font-family: var(--font-heading); font-size: 11px; letter-spacing: 0.16em; color: var(--color-accent); }
.site-nav__links { display: flex; align-items: center; gap: var(--space-4); }
.site-nav__phone { margin-left: 8px; white-space: nowrap; }
.site-nav a { color: inherit; text-decoration: none; font-size: 14px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-accent); }
.site-nav__toggle { display: none; }

/* — footer — */
.site-footer { border-top: 1px solid var(--color-divider); margin-top: auto; }
.site-footer__brand { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 24px 24px 4px; }
.site-footer__brand img { height: 26px; width: auto; }
.site-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 16px 24px 32px; font-size: 13px; opacity: 0.7; }
.site-footer__links { display: flex; gap: 16px; }
.site-footer__links a { color: inherit; }

/* — page structure — */
.page-body { display: flex; min-height: 100vh; flex-direction: column; }
section.section { padding: 16px 24px; }
section.section:first-of-type { padding-top: 56px; }

/* — responsive: nothing in the original mockups had any @media handling
     at all (a known gap called out in the earlier Next.js build too) —
     added fresh here, not ported. Two breakpoints: 900px (tablet — grids
     drop to 2 columns, nav still fits in one row, verified directly at
     768/1024px) and 600px (phone — grids go single-column, nav collapses
     to the hamburger menu). — */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* Touch-target sizing: tablets and phones are touch-first, but the
     design system's own button/input proportions were sized for a mouse
     (measured ~32px tall) — short of the ~44px minimum recommended for a
     comfortable tap target (Apple HIG / Material both land near there).
     Scoped to this breakpoint rather than changed globally so desktop
     keeps the tighter, deliberately dense "blueprint" proportions. */
  .btn { padding-top: 12px; padding-bottom: 12px; }
  .ok-promo-code__copy { padding-top: 10px; padding-bottom: 10px; }
  .input { min-height: 44px; }
  /* Nav links are still inline (not stacked) between 600-900px — bare
     text with no padding is a thin tap target on a touch tablet even
     though the row layout itself has room to spare. Flex items get
     "blockified" per spec, so plain padding works here with no other
     layout changes needed. */
  .site-nav__links a { padding-block: 8px; }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  .site-nav__links {
    display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px;
    margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--color-divider);
  }
  .site-nav__links.is-open { display: flex; }
  /* Stacked links get real vertical padding instead of just a text line
     with a small gap between — a proper tap target, not a hairline. */
  .site-nav__links a { padding: 12px 4px; }
  /* Extra class-qualified selector (not just .site-nav__phone) to
     out-specificity the .site-nav__links a rule above, which would
     otherwise win on the shared `padding` property and silently drop
     this override — no !important needed. */
  .site-nav__links .site-nav__phone {
    margin-left: 0; margin-top: 6px; padding-top: 18px;
    border-top: 1px solid var(--color-divider); font-weight: 600;
  }
  .site-nav__toggle { display: inline-flex; }
}

/* — reseller-store plugin markup, restyled to match — the plugin's own
     store.css is dequeued (functions.php) and these rules target the
     same clean .rstore-* classes it ships, per the plugin's own
     documented pattern for full custom theming. — */
.rstore-product { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); }
.rstore-pricing { font-family: var(--font-heading); font-size: 26px; font-weight: 600; }
.rstore-add-to-cart .btn { width: 100%; margin-top: var(--space-2); }

/* — [rstore_domain_search] results — went unstyled and unnoticed until
     the reseller connection went live and real results existed to
     reveal the gap (before that, this always showed either an empty
     state or was itself the un-registered-shortcode bracket text). The
     plugin's own markup already groups each result correctly:
       .domain-result > .domain-name + .purchase-info > .rstore-message
                                                          > .salePrice, button
     — confirmed directly by inspecting a real live search. With zero
     layout applied, a domain name and the price+button that go with it
     rendered as two visually equal-weight lines in a flat list, no way
     to tell which button belonged to which domain. Turning each
     .domain-result into its own card (name and price+button on one row,
     wrapping to two only if the width forces it) puts them side by side
     *and* gives every result a visible separator, the two fixes asked
     for turning out to be one and the same. */
.rstore-domain-search .search-form { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.rstore-domain-search .search-field {
  flex: 1; min-width: 200px; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--input-radius);
}
.rstore-domain-search .continue-form { margin-top: var(--space-2); }
.rstore-domain-search .not-available { margin-top: var(--space-3); font-size: 14px; }

.rstore-domain-list, .rstore-exact-domain-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.domain-result {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-2) var(--space-4); padding: var(--space-3);
  background: var(--card-bg); border: var(--card-border);
  border-radius: var(--card-radius); box-shadow: var(--card-shadow);
}
.domain-result .domain-name { font-family: var(--font-heading); font-weight: 600; font-size: 16px; }
.domain-result .rstore-message { display: flex; align-items: center; gap: var(--space-3); }
.domain-result .salePrice { font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--color-accent-700); white-space: nowrap; }

/* Global disclaimers ("Taxes and ICANN fee not included…") first, then
   the narrower per-result one (nested in .domain-name, e.g. a .ca's
   "Restrictions apply") after it with one extra class of specificity —
   both match a per-result disclaimer since it sits inside both
   .rstore-domain-search and .domain-name, so the more specific rule has
   to come out ahead of the general one deliberately, not by accident of
   source order. */
.rstore-domain-search .rstore-disclaimer { display: block; font-size: 11px; opacity: 0.55; margin-top: var(--space-3); }
.domain-result .domain-name .rstore-disclaimer { font-family: var(--font-body); font-weight: 400; font-size: 11px; opacity: 0.6; margin-top: 2px; }
.domain-result .domain-name .rstore-disclaimer pre { font-family: inherit; white-space: normal; margin: 0; }