/* =====================================================================================================================
   CLOUDSTER PILLOW — NEW DESIGN, STEP 3 "STYLING ONLY"  (draft 3 look on the real site)
   ---------------------------------------------------------------------------------------------------------------------
   Every rule starts with body.cp-v2, so this file does NOTHING unless that class is on <body>
   (the private preview plugin adds it only for ?cpv2=<key>).
   STYLING ONLY: colours, lettering, borders, corners, shadows, a little padding. It never hides anything a visitor can
   read or tap (one exception: the old header/footer logo picture is made see-through, still in the page with its alt
   text, and the new CP mark + name are painted over it), never re-orders, never moves a block, never changes what is
   sticky, never shrinks a tap target, never removes a focus ring.
   The Dark / White / Camo pillow pages are in a test until 10/18: in their buy area only colours and lettering change
   (no padding, height, width or position changes there).
   Needs Oswald 500/600/700 from Google Fonts (see README.md).
   Built 2026-10-05 from draft 3 (mockups/redesign-v3/t.css) and the live markup of 10 pages.
   ===================================================================================================================== */


/* ---------------------------------------------------------------------------------------------------------------------
   0. TOKENS
   --------------------------------------------------------------------------------------------------------------------- */
body.cp-v2 {
  --cp-black: #121416;      /* dark frame: top line, header, hero band, footer */
  --cp-black-2: #090a0b;    /* footer floor */
  --cp-char: #1b1e22;       /* charcoal panels on dark */
  --cp-steel: #2b3035;      /* lines on dark */
  --cp-bone: #f3f1ec;       /* page (light reading panel) */
  --cp-white: #ffffff;      /* cards */
  --cp-ink: #111417;        /* headings, in-text links on light */
  --cp-body: #33383d;       /* running text */
  --cp-mute: #5f656b;       /* small print on light (5.6:1 on bone) */
  --cp-line: #dedad2;       /* lines on light */
  --cp-ctl: #7d8286;        /* control borders (3.4:1 on white) */
  --cp-coyote: #b99a67;     /* accent text on dark (6.9:1 on #121416) */
  --cp-coyote-dk: #7d6234;  /* accent text on light (5.4:1 on bone) */
  --cp-accent: #e8590c;     /* THE action colour (primary buttons only) */
  --cp-accent-hover: #f06a1f;
  --cp-accent-ink: #111111; /* label on the action colour (5.3:1) */
  --cp-star: #b07400;       /* stars on light (3.9:1 on white, 3.5:1 on the page colour; icons need 3:1) */
  --cp-star-dk: #f0a81e;    /* stars on dark */
  --cp-on-dark: #e9e5dc;    /* main text on dark */
  --cp-on-dark-2: #b9bcbf;  /* secondary text on dark (8.4:1 on #121416, 7.6:1 on #1b1e22) */
  --cp-disp: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --cp-text: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Flatsome's own colour variables, re-pointed so theme parts that use them follow along */
  --primary-color: var(--cp-ink);
  --fs-color-primary: var(--cp-ink);
  --fs-color-secondary: var(--cp-char);
  --fs-color-base: var(--cp-body);
  --fs-experimental-link-color: var(--cp-ink);
  --fs-experimental-link-color-hover: var(--cp-coyote-dk);

  --cp-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='332 219 374 533'%3E%3Cpath d='M0 0 C1.5 0 3 0 4.5 0 C8.5 0 12.5 0 16.5 0 C20.7 0 25 0 29.2 0 C36.3 0 43.4 0 50.5 0 C58.6 0 66.8 0 75 0 C82 0 89.1 0 96.1 0 C100.3 0 104.5 0 108.7 0 C112.7 0 116.6 0 120.6 0 C122 0 123.4 0 124.9 0 C137.5 -0.1 149.2 2 159 10.5 C166.7 18.6 170.5 27.9 170.4 39 C169.6 46.7 167.2 54.1 165 61.5 C164.6 62.9 164.6 62.9 164.2 64.3 C163.1 68.2 161.9 72.2 160.7 76.1 C158.2 84.9 155.8 93.7 153.4 102.6 C152 107.8 150.6 112.9 149 118 C147.7 122.3 146.4 126.6 145.2 130.9 C144.9 132.1 144.6 133.3 144.3 134.5 C141.6 144.5 141.6 144.5 139 154.5 C105.4 154.5 71.7 154.5 37 154.5 C38.1 146.6 38.1 146.6 39.1 143.4 C39.3 142.7 39.5 141.9 39.7 141.2 C39.9 140.5 40.1 139.7 40.3 139 C40.5 138.2 40.7 137.5 40.9 136.8 C41.4 135.3 41.8 133.7 42.2 132.2 C42.8 130.3 43.4 128.3 43.9 126.4 C45.7 120.1 47.5 113.8 49.4 107.5 C53.5 93.5 57.7 79.5 61.2 65.3 C61.5 64 61.5 64 61.9 62.7 C62 62 62.2 61.3 62.4 60.5 C63 58.5 63 58.5 65 54.5 C60.1 54.5 55.1 54.5 50 54.5 C49.7 56.3 49.3 58.1 48.9 60 C47.1 68.9 44.5 77.5 41.9 86.1 C40.1 92.3 38.3 98.4 36.6 104.6 C34.7 111.5 32.8 118.3 30.8 125.2 C30.6 125.8 30.4 126.5 30.2 127.2 C29.8 128.5 29.4 129.8 29 131.1 C25.9 141.8 22.9 152.5 20.2 163.2 C17.9 172.2 15.3 181 12.7 189.9 C9.4 200.8 6.4 211.8 3.6 222.8 C1.6 230.3 -0.5 237.8 -2.6 245.2 C-4.7 252.6 -6.8 260 -8.9 267.3 C-9.2 268.4 -9.5 269.6 -9.8 270.7 C-10.5 273.3 -11.3 275.9 -12 278.5 C-7.4 278.8 -2.7 279.2 2 279.5 C2.1 278.5 2.2 277.6 2.4 276.6 C3 272.2 4.1 268.1 5.3 263.9 C5.6 262.7 5.6 262.7 5.9 261.4 C6.7 258.8 7.4 256.2 8.1 253.5 C8.6 251.7 9.1 249.9 9.6 248 C12.5 237.8 15.5 227.5 18.6 217.3 C21 209.6 23.1 201.9 25.1 194 C25.3 193.2 25.5 192.3 25.7 191.3 C25.9 190.5 26.1 189.8 26.3 188.9 C27.1 186.1 28.1 183.3 29 180.5 C51.8 180.5 74.6 180.4 97.4 180.4 C108 180.4 118.6 180.4 129.2 180.4 C138.4 180.3 147.7 180.3 156.9 180.3 C161.8 180.3 166.7 180.3 171.6 180.3 C176.2 180.3 180.8 180.3 185.4 180.3 C187.1 180.3 188.8 180.3 190.4 180.3 C192.7 180.3 195.1 180.3 197.4 180.3 C198.7 180.3 199.9 180.3 201.3 180.3 C211.8 181 220.2 185.2 227.4 192.8 C235.7 203 236.3 212.7 235 225.5 C234.2 229.6 233 233.4 231.7 237.3 C230.2 242.2 228.9 247.2 227.6 252.1 C225.4 260.6 223 269.1 220.4 277.5 C218.2 284.8 216.1 292.1 213.9 299.4 C213.5 300.7 213.1 302.1 212.7 303.4 C210.8 310.1 208.9 316.7 207.4 323.5 C206.5 327.7 205.3 331.6 203.7 335.6 C202.3 339.4 201.5 343.5 200.5 347.5 C199.2 353.1 197.7 358.6 195.8 364.1 C194.2 368.9 193 373.8 191.6 378.6 C190.7 381.9 189.8 385.2 188.9 388.5 C188.3 390.4 187.8 392.2 187.3 394 C184 405.9 179.1 414.3 168.7 421.3 C161.4 424.7 154.3 426 146.2 425.9 C145.3 426 144.4 426 143.5 426 C140.5 426 137.5 426 134.5 426 C132.4 426 130.3 426.1 128.2 426.1 C122.7 426.1 117.2 426.2 111.7 426.2 C106.1 426.2 100.5 426.3 94.9 426.3 C84 426.4 73 426.5 62 426.5 C61.6 428.1 61.6 428.1 61.2 429.6 C60.8 431 60.5 432.3 60.1 433.7 C59.8 434.7 59.8 434.7 59.6 435.7 C58.2 441 56.7 446.3 55.1 451.5 C52.9 459.2 50.9 466.9 48.9 474.6 C47.4 480.5 45.9 486.3 43.9 492 C41.6 498.7 39.8 505.6 38 512.5 C4.7 512.5 -28.6 512.5 -63 512.5 C-61.9 502.5 -61.9 502.5 -60.2 497.6 C-58.6 492.5 -57.1 487.4 -55.7 482.2 C-55.5 481.5 -55.2 480.7 -55 479.9 C-52.4 470.4 -49.8 460.9 -47.3 451.4 C-44 439 -40.6 426.6 -36.8 414.3 C-34.1 405.4 -31.6 396.4 -29.3 387.3 C-27 377.9 -23.9 368.9 -21 359.5 C12.3 359.5 45.7 359.5 80 359.5 C77.8 373 77.8 373 76.3 377.5 C76 378.5 75.7 379.5 75.4 380.5 C74.9 382 74.9 382 74.4 383.5 C73.8 385.4 73.2 387.4 72.6 389.4 C72.3 390.3 72 391.1 71.7 392 C71 394.5 70.5 397 70 399.5 C74.6 399.2 79.3 398.9 84 398.5 C84.3 397.3 84.5 396.1 84.8 394.9 C86.4 387.4 88.6 380 90.9 372.7 C93.5 364.5 95.7 356.3 97.9 348 C100.7 337.4 103.6 326.8 106.6 316.3 C108 311.5 109.3 306.8 110.6 302 C112 297 113.4 292 115 287.1 C116.6 282.1 117.9 277 119.3 271.9 C122.5 259.3 126.3 246.9 130 234.5 C125.1 234.5 120.1 234.5 115 234.5 C114.9 236.4 114.9 236.4 114.7 238.3 C114.1 243.9 112.5 249.1 110.8 254.5 C110.1 256.5 109.5 258.6 108.8 260.6 C108.4 262.1 108.4 262.1 107.9 263.7 C104.9 273.3 102.4 283 99.9 292.7 C97.5 302.2 94.9 311.5 92.2 320.9 C91.9 321.9 91.6 323 91.3 324.1 C91 325 90.7 326 90.4 327 C90.2 327.8 89.9 328.7 89.7 329.6 C89 331.5 89 331.5 88 332.5 C85.7 332.6 83.4 332.7 81.2 332.7 C80.4 332.7 79.7 332.7 79 332.7 C76.5 332.7 74.1 332.7 71.6 332.7 C69.9 332.7 68.1 332.7 66.4 332.7 C61.6 332.7 56.8 332.7 52.1 332.8 C49.1 332.8 46.1 332.8 43.1 332.8 C33.8 332.8 24.5 332.8 15.2 332.8 C4.4 332.8 -6.3 332.8 -17.1 332.9 C-25.4 332.9 -33.7 332.9 -42 332.9 C-47 332.9 -52 332.9 -56.9 333 C-61.6 333 -66.3 333 -70.9 333 C-72.7 333 -74.4 333 -76.1 333 C-92.6 333.1 -92.6 333.1 -100 328.5 C-100.8 328 -101.6 327.6 -102.4 327.1 C-110.6 320.9 -115.6 313.6 -118 303.5 C-119.2 291.6 -116.5 281.5 -112.9 270.3 C-112.2 267.8 -111.4 265.2 -110.6 262.7 C-110.1 261 -109.6 259.4 -109.1 257.7 C-106.9 250.4 -105 243 -103.1 235.6 C-101.2 227.8 -99 220.4 -96.4 212.8 C-94.3 206.5 -92.7 200.1 -91 193.7 C-90.8 193 -90.6 192.4 -90.5 191.7 C-89.6 188.5 -88.8 185.2 -87.9 182 C-84.9 170.6 -81.7 159.4 -78.4 148.1 C-76.2 140.4 -74.1 132.7 -72 125 C-68.9 113.9 -65.8 102.8 -62.6 91.7 C-61.7 88.7 -60.9 85.7 -60.1 82.7 C-58.8 78.5 -57.6 74.2 -56.4 70 C-55.8 68 -55.2 65.9 -54.6 63.9 C-54.1 62.3 -54.1 62.3 -53.6 60.8 C-51.7 54.1 -50 47.5 -48.4 40.8 C-44.9 26.6 -40.4 14.2 -27.7 5.9 C-26.8 5.4 -25.9 5 -25 4.5 C-24.4 4.2 -23.7 3.9 -23.1 3.5 C-15.4 0 -8.3 -0.1 0 0Z' fill='%23FFFFFF' transform='translate(461,229.5)'/%3E%3C/svg%3E");

  background-color: var(--cp-bone);
  color: var(--cp-body);
  font-family: var(--cp-text);
  -webkit-font-smoothing: antialiased;
}


/* ---------------------------------------------------------------------------------------------------------------------
   1. TYPE
   Short headings, menu items, buttons, badges and small labels in Oswald capitals; all running text in the system font.
   --------------------------------------------------------------------------------------------------------------------- */
body.cp-v2 #wrapper,
body.cp-v2 #main {
  background-color: var(--cp-bone);
}
/* running text: the system font comes from <body> by inheritance; form controls are told to inherit */
body.cp-v2 :where(input, select, textarea, button, .alt-font) {
  font-family: inherit;
}
body.cp-v2 :is(h1, h2, h3, .heading-font, .banner h1, .banner h2) {
  font-family: var(--cp-disp) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .02em !important;
  color: var(--cp-ink);
}
/* tighter heading lines — except in the summary column of the three pillow pages (rule 3 hold until 10/18: the theme's
   own heading line heights keep the title and the "Pillow + Mag Deal" heading at today's height there) */
body.cp-v2 :is(h1, h2, h3, .heading-font, .banner h1, .banner h2):not(:is(.postid-139, .postid-143, .postid-264) .product-info *) {
  line-height: 1.12;
}
body.cp-v2 :is(h1, h2, h3) :is(strong, b, span, a, em) {
  font-family: inherit !important;
  font-weight: inherit;
}
body.cp-v2 :is(h4, h5, h6) {
  font-family: var(--cp-text);
  color: var(--cp-ink);
}
/* small uppercase labels Flatsome marks with .uppercase stay short -> Oswald */
body.cp-v2 :is(h4, h5, h6).uppercase {
  font-family: var(--cp-disp) !important;
  font-weight: 600;
  letter-spacing: .12em;
}
/* h3 inside long-form copy (article bodies, product description, the shop hub's text, category text) are questions and
   sub-points, often 50-100 characters: bold running-text face in sentence case, like the draft's FAQ questions
   (redesign-v3/t.css .faq h3). h1/h2 stay Oswald. Display-size h3s that carry their own inline font size and Flatsome
   .uppercase labels stay Oswald. */
body.cp-v2 :is(.entry-content, .woocommerce-tabs .panel, .term-description, .page-description) h3:not([style*="font-size"], .uppercase),
body.cp-v2 :is(.entry-content, .woocommerce-tabs .panel, .term-description, .page-description) h3:not([style*="font-size"], .uppercase) :is(b, strong, span, a, em) {
  font-family: var(--cp-text) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.cp-v2 :is(.entry-content, .woocommerce-tabs .panel, .term-description, .page-description) h3:not([style*="font-size"], .uppercase) {
  line-height: 1.35;
}
body.cp-v2 :is(strong, b) {
  color: inherit;
}
/* headings that are dark-on-dark get light (Flatsome .dark sections, banners) */
body.cp-v2 .dark :is(h1, h2, h3, h4, h5, h6),
body.cp-v2 .dark :is(h1, h2, h3, h4, h5, h6) :is(strong, b, span) {
  color: #fff;
}

/* in-text links: dark with an underline (light ones inside dark sections). Exclusions sit in :where() so the
   specificity stays predictable: light-on-dark rule (one more class) always wins over the base rule. */
body.cp-v2 #main :where(p, li, td, th, dd, blockquote, figcaption, .accordion-inner, .entry-content, .product-short-description) a:where(:not(.button, [class*="button"], .plain, [class*="cp-hero-cta"], .woocommerce-LoopProduct-link, [style*="background"], .cp-more-tile, .page-number)) {
  color: var(--cp-ink) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px;
  text-decoration-color: currentColor;
}
body.cp-v2 #main :where(p, li, td, th, dd, blockquote, figcaption, .accordion-inner, .entry-content, .product-short-description) a:where(:not(.button, [class*="button"], .plain, [class*="cp-hero-cta"], .woocommerce-LoopProduct-link, [style*="background"], .cp-more-tile, .page-number)):hover {
  color: var(--cp-coyote-dk) !important;
}
body.cp-v2 #main .dark :where(p, li, td, th, dd, blockquote, figcaption) a:where(:not(.button, [class*="button"], .plain, [style*="background"])),
body.cp-v2 #main .dark :where(p, li, td, th, dd, blockquote, figcaption) a:where(:not(.button, [class*="button"], .plain, [style*="background"])):hover {
  color: #fff !important;
}
/* in-text links that sit straight inside an inline-styled call-out box (no <p> around them: the hub's green "Having
   pain or printing…" box, the bordered boxes on the comparison articles) */
body.cp-v2 #main :is(div[style*="border-left"], div[style*="background: #f0f7f0"], div[style*="border: 2px solid"], div[style*="border:2px solid"]) > a:where(:not(.button, [class*="button"], .plain, [class*="cp-hero-cta"], [style*="background"])) {
  color: var(--cp-ink) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px;
}
body.cp-v2 #main :is(div[style*="border-left"], div[style*="background: #f0f7f0"], div[style*="border: 2px solid"], div[style*="border:2px solid"]) > a:where(:not(.button, [class*="button"], .plain, [class*="cp-hero-cta"], [style*="background"])):hover {
  color: var(--cp-coyote-dk) !important;
}
/* small-print links (product "Categories:", article date / author / category / tag lines): keep the muted colour,
   add the underline so they still read as links */
body.cp-v2 :is(.product_meta, .entry-meta, .posted-on, .byline, .meta-author) a {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px;
}
/* any other plain link that was blue (wp-custom-css sets every <a> to #0693e3). Buttons are skipped (:where keeps the
   specificity at 0,1,2) so a plain a.button keeps its own label colour — e.g. the mini cart's "View cart" was an ink
   label on an ink fill */
body.cp-v2 a:where(:not(.button)) {
  color: var(--cp-ink);
}
body.cp-v2 a:where(:not(.button)):hover {
  color: var(--cp-coyote-dk);
}

/* product lists in sidebars/widgets read as lists, not running text */
body.cp-v2 #main .product_list_widget a {
  text-decoration: none !important;
  color: var(--cp-ink) !important;
}
body.cp-v2 #main .product_list_widget .product-title {
  font-weight: 600;
}

/* focus ring: always visible, never removed */
body.cp-v2 :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--cp-accent) !important;
  outline-offset: 2px;
}


/* ---------------------------------------------------------------------------------------------------------------------
   2. FRAME — top line, header, menus, logo
   --------------------------------------------------------------------------------------------------------------------- */
/* top line */
body.cp-v2 .header-top,
body.cp-v2 #top-bar {
  background-color: var(--cp-black) !important;
  box-shadow: inset 0 -1px 0 var(--cp-steel);  /* a drawn-in line: a border made the bar 1px taller and moved every page */
}
body.cp-v2 #top-bar .html_topbar_left > div {
  font-family: var(--cp-disp) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: .06em !important;
  color: var(--cp-on-dark) !important;
}
/* social icons (desktop top line, phone slide-out menu): were blue / red tiles */
body.cp-v2 :is(#top-bar, .off-canvas, .mfp-content) .social-icons .button.icon {
  background-color: transparent !important;
  border-color: var(--cp-steel) !important;
  color: var(--cp-on-dark) !important;
}

/* header bar */
body.cp-v2 .header-bg-color,
body.cp-v2 .header-main,
body.cp-v2 .stuck .header-main {
  background-color: var(--cp-black) !important;
}
body.cp-v2 .header-wrapper .top-divider {
  border-top-color: var(--cp-steel) !important;
  opacity: 1;
}
body.cp-v2 .header-main .nav > li > a,
body.cp-v2 .header .header-nav-main.nav > li > a {
  color: var(--cp-on-dark) !important;
  font-family: var(--cp-disp) !important;
  font-weight: 500 !important;
  letter-spacing: .08em;
}
body.cp-v2 .header .header-nav-main.nav > li > a:hover,
body.cp-v2 .header .header-nav-main.nav > li.active > a,
body.cp-v2 .header .header-nav-main.nav > li.current > a {
  color: #fff !important;
}
/* desktop menu words: the nav-fit plugin shrank Poppins to 12.2px/0 spacing so the row fits from 850px up; Oswald is
   narrower, so 13.5px with .08em spacing takes no more room than today (checked 1024/1280/1440: one row at 1280+,
   and at 1024 it breaks onto a second row at the same word as today's menu does) */
@media (min-width: 850px) {
  body.cp-v2 #masthead .header-nav-main.nav > li > a {
    font-size: 13.5px !important;
    letter-spacing: .08em !important;
  }
}
/* the active-item line under the menu word: was blue */
body.cp-v2 .header-nav-main.nav-line-bottom > li > a::before,
body.cp-v2 .header-nav-main.nav-line > li > a::before {
  background-color: var(--cp-coyote) !important;
}
/* header icons (menu, cart, search, account) */
body.cp-v2 .header-main .nav > li > a > i,
body.cp-v2 .header-main .nav > li > a > i:not(.icon-angle-down),
body.cp-v2 .header-main .cart-icon strong {
  color: #fff !important;
}
body.cp-v2 .header-main .cart-icon strong,
body.cp-v2 .header-main .cart-icon strong::after {
  border-color: #fff !important;
}
body.cp-v2 .header-main .header-cart-title,
body.cp-v2 .header-main .cart-price {
  color: var(--cp-on-dark) !important;
}
/* cart count bubble */
body.cp-v2 [data-icon-label]::after {
  background-color: var(--cp-accent) !important;
  color: var(--cp-accent-ink) !important;
  font-family: var(--cp-text);
  font-weight: 700;
  box-shadow: none !important;
}

/* desktop drop-down menus: charcoal with light words */
body.cp-v2 .header .nav-dropdown {
  background-color: var(--cp-char) !important;
  border-color: var(--cp-steel) !important;
  color: var(--cp-on-dark);
}
body.cp-v2.nav-dropdown-has-arrow.nav-dropdown-has-border li.has-dropdown::before {
  border-bottom-color: var(--cp-steel) !important;
}
body.cp-v2.nav-dropdown-has-arrow li.has-dropdown::after {
  border-bottom-color: var(--cp-char) !important;
}
body.cp-v2 .header .nav-dropdown > li > a,
body.cp-v2 .header .nav-dropdown .nav-column li > a {
  color: var(--cp-on-dark) !important;
  font-family: var(--cp-disp) !important;
  font-weight: 500 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.cp-v2 .header .nav-dropdown > li > a:hover,
body.cp-v2 .header .nav-dropdown .nav-column li > a:hover {
  background-color: var(--cp-steel) !important;
  color: #fff !important;
}
/* the cart drop-down keeps a light panel so the product list reads like the cart */
body.cp-v2 .header .cart-item .nav-dropdown {
  background-color: #fff !important;
  color: var(--cp-body);
  border-color: var(--cp-line) !important;
}
body.cp-v2 .header .cart-item .nav-dropdown :is(p, a:not(.button), .woocommerce-mini-cart__total) {
  color: var(--cp-body) !important;
}

/* phone slide-out menu */
body.cp-v2 .off-canvas .mfp-content,
body.cp-v2 .off-canvas-left .mfp-content,
body.cp-v2 .off-canvas-right .mfp-content {
  background-color: var(--cp-black) !important;
}
body.cp-v2 .off-canvas .nav-sidebar.nav-vertical > li > a,
body.cp-v2 .off-canvas .nav-sidebar .sub-menu > li > a,
body.cp-v2 .off-canvas .nav-vertical li li > a {
  color: var(--cp-on-dark) !important;
  font-family: var(--cp-disp) !important;
  font-weight: 500 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.cp-v2 .off-canvas .nav-sidebar.nav-vertical > li + li,
body.cp-v2 .off-canvas .nav-vertical > li {
  border-color: var(--cp-steel) !important;
}
body.cp-v2 .off-canvas .toggle,
body.cp-v2 .off-canvas .toggle i,
body.cp-v2 .mfp-close {
  color: var(--cp-on-dark) !important;
}
body.cp-v2 .off-canvas .searchform input {
  background-color: var(--cp-char) !important;
  border-color: var(--cp-steel) !important;
  color: #fff !important;
}
/* cart slide-out (phone) keeps a light reading panel */
body.cp-v2 .off-canvas-cart .mfp-content,
body.cp-v2 #cart-popup .cart-popup-inner {
  background-color: #fff !important;
}
/* shop FILTER slide-out (category pages) is also a light reading panel: only the main menu is dark. #shop-sidebar is
   painted itself as well, so a browser without :has() still gets dark words on white. */
body.cp-v2 .off-canvas .mfp-content:has(#shop-sidebar),
body.cp-v2 .mfp-content #shop-sidebar {
  background-color: #fff !important;
  color: var(--cp-body);
}
body.cp-v2 #shop-sidebar .widget-title {
  color: var(--cp-ink) !important;
  font-family: var(--cp-disp) !important;
  font-weight: 600;
  letter-spacing: .12em;
}
body.cp-v2 #shop-sidebar a:not(.button) {
  color: var(--cp-ink) !important;
}
body.cp-v2 #shop-sidebar a:not(.button):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.cp-v2 #shop-sidebar :is(.count, .price_label, .price_slider_amount, .price_label *, .product_list_widget .amount, .product_list_widget del) {
  color: var(--cp-body) !important;
}
body.cp-v2 #shop-sidebar :is(.toggle, .toggle i) {
  color: var(--cp-ink) !important;
}
body.cp-v2 #shop-sidebar .is-divider {
  background-color: var(--cp-coyote-dk) !important;
}
/* the price filter's grey "FILTER" button -> outlined secondary */
body.cp-v2 #shop-sidebar .price_slider_amount .button {
  background-color: transparent !important;
  border: 1.5px solid var(--cp-ink) !important;
  color: var(--cp-ink) !important;
}
body.cp-v2 #shop-sidebar .price_slider_amount .button:hover {
  background-color: var(--cp-ink) !important;
  color: #fff !important;
}

/* LOGO — the CP mark + CLOUDSTER PILLOW replace the blue cloud (Keith 10/04: "start using my CP as my logo and remove
   that blue cloud"). The old <img> stays in the page with its alt text; it is only made see-through, and keeps the
   link the same size, so nothing moves. Name is painted with ::after (alt text "" so it is not read twice). */
body.cp-v2 #logo a {
  position: relative;
  display: block;
  background-image: var(--cp-mark);
  background-repeat: no-repeat;
  background-size: auto 38px;
  background-position: left center;
}
body.cp-v2 #logo img {
  opacity: 0 !important;
}
body.cp-v2 #logo a::after {
  content: "Cloudster Pillow";
  content: "Cloudster Pillow" / "";
  position: absolute;
  top: 50%;
  left: 37px;
  transform: translateY(-50%);
  font-family: var(--cp-disp);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.02;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 849px) {
  /* phones/tablets: logo sits in the middle of the bar; centre the mark + two-line name inside the same link box */
  body.cp-v2 #logo a {
    background-position: calc(50% - 54px) center;
  }
  body.cp-v2 #logo a::after {
    left: calc(50% - 30px);
    font-size: 19px;
    white-space: normal;
    width: 112px;
  }
}


/* ---------------------------------------------------------------------------------------------------------------------
   3. BUTTONS
   ONE action colour (#e8590c, near-black label) for every primary button; secondary buttons outlined; square corners.
   --------------------------------------------------------------------------------------------------------------------- */
/* shape + lettering for every real button. Exclusions sit in :where() so this stays low-specificity (0,1,1) and the
   specific rules below (Add to Cart tracking etc.) can refine it. */
body.cp-v2 :where(.button, button, input[type="submit"], input[type="button"], .wp-element-button):where(:not(.icon, .ux-quantity__button, .toggle, .pswp__button, .flickity-button, .slick-arrow, [id^="slick-slide-control"], .mfp-close, .show-password-input, .play, .pum-close, .ux-search-submit, .cr-ajax-reviews-cus-images-close, .cr-review-form-continue)) {
  border-radius: 2px !important;
  font-family: var(--cp-disp) !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  box-shadow: none !important;
}
/* WooCommerce "alt" buttons were forced into pills by the site's custom CSS (.woocommerce button.button.alt, 0-3-1,
   !important; .woocommerce is often <body> itself) — doubled class to out-rank it */
body.cp-v2 :is(a, button, input).button.button:not(.icon),
body.cp-v2 :is(a, button).checkout-button.checkout-button {
  border-radius: 2px !important;
}

/* primary = the action colour */
body.cp-v2 :is(
  .button.primary:not(.is-outline):not(.is-link):not(.is-underline):not(.icon),
  .button.alt:not(.is-outline),
  .single_add_to_cart_button,
  .checkout-button,
  .button.checkout,
  #place_order,
  .wc-backward,
  .cpw-sticky-atc__cta,
  .woocommerce-mini-cart__buttons .checkout
) {
  background-color: var(--cp-accent) !important;
  border-color: var(--cp-accent) !important;
  color: var(--cp-accent-ink) !important;
}
body.cp-v2 :is(
  .button.primary:not(.is-outline):not(.is-link):not(.is-underline):not(.icon),
  .button.alt:not(.is-outline),
  .single_add_to_cart_button,
  .checkout-button,
  .button.checkout,
  #place_order,
  .wc-backward,
  .cpw-sticky-atc__cta,
  .woocommerce-mini-cart__buttons .checkout
):hover {
  background-color: var(--cp-accent-hover) !important;
  border-color: var(--cp-accent-hover) !important;
  color: var(--cp-accent-ink) !important;
}
body.cp-v2 :is(.button.primary, .button.alt, .single_add_to_cart_button, .checkout-button) :is(span, i, strong) {
  color: inherit !important;
}

/* secondary = outlined (round icon buttons keep their own look) */
body.cp-v2 :is(.button.is-outline, .button.secondary, .button.white):not(.icon) {
  background-color: transparent !important;
  border: 1.5px solid currentColor !important;
  color: var(--cp-ink) !important;
}
body.cp-v2 :is(.button.is-outline, .button.secondary, .button.white):not(.icon):hover {
  background-color: var(--cp-ink) !important;
  border-color: var(--cp-ink) !important;
  color: #fff !important;
}
/* WooCommerce "View cart" (mini cart drop-down, phone cart drawer, add-to-cart notice): a plain a.button that Flatsome
   fills with the primary colour -> outlined secondary next to the orange Checkout */
body.cp-v2 .button.wc-forward:not(.checkout) {
  background-color: transparent !important;
  border: 1.5px solid var(--cp-ink) !important;
  color: var(--cp-ink) !important;
}
body.cp-v2 .button.wc-forward:not(.checkout):hover {
  background-color: var(--cp-ink) !important;
  border-color: var(--cp-ink) !important;
  color: #fff !important;
}
body.cp-v2 .dark :is(.button.is-outline, .button.secondary, .button.white) {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .7) !important;
}
body.cp-v2 .dark :is(.button.is-outline, .button.secondary, .button.white):hover {
  background-color: #fff !important;
  color: var(--cp-ink) !important;
}
/* Flatsome "colour" buttons on the home page (class names like "#f5a623", "#1a2332"): filled ones -> action colour,
   outlined ones -> outlined */
body.cp-v2 .button[class*="#"]:not(.is-outline) {
  background-color: var(--cp-accent) !important;
  border-color: var(--cp-accent) !important;
  color: var(--cp-accent-ink) !important;
}
body.cp-v2 .button[class*="#"].is-outline {
  background-color: transparent !important;
  border: 1.5px solid currentColor !important;
  color: var(--cp-ink) !important;
}
body.cp-v2 .dark .button[class*="#"].is-outline {
  color: #fff !important;
}
/* …and on hover they fill white like the other outlined buttons on dark, so the label turns ink (without this the rule
   above, same specificity and later, kept the label white on the white fill: "READ ALL 480+ REVIEWS", "SAVE WITH A
   BUNDLE" on the home page's dark bands) */
body.cp-v2 .dark .button[class*="#"].is-outline:hover {
  color: var(--cp-ink) !important;
}

/* size: at least 48px tall (never in the pillow buy area, never icon buttons) */
body.cp-v2 :where(.button, input[type="submit"]):where(:not(.icon, .ux-quantity__button, .is-link, .pswp__button, .ux-search-submit, form.cart *, .cpw-sticky-atc *, .product-info *, .header *)) {
  min-height: 48px;
  line-height: 1.25 !important;
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}
/* the newsletter form's Subscribe (every page) and the contact form's Send Message are Forminator <button>s with no
   .button class: same 48px minimum (they were 42px / 40px; neither is in the pillow buy area) */
body.cp-v2 .forminator-ui .forminator-button-submit {
  min-height: 48px !important;
  line-height: 1.25 !important;
}

/* Flatsome "back to top" — keep, just neutral */
body.cp-v2 #top-link {
  color: var(--cp-ink) !important;
  border-color: var(--cp-ctl) !important;
  background-color: rgba(255, 255, 255, .92) !important;
}


/* ---------------------------------------------------------------------------------------------------------------------
   4. FORMS
   --------------------------------------------------------------------------------------------------------------------- */
body.cp-v2 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], input[type="url"], textarea, select):not(.qty) {
  border: 1.5px solid var(--cp-ctl) !important;
  border-radius: 2px !important;
  background-color: #fff !important;
  color: var(--cp-ink) !important;
  box-shadow: none !important;
  font-family: var(--cp-text) !important;
}
/* small controls that were 40-42px tall (review search, category sort menu) get a full 44px */
body.cp-v2 :is(.cr-input-text, select.orderby) {
  min-height: 44px !important;
}
body.cp-v2 :is(input, textarea, select):focus {
  border-color: var(--cp-ink) !important;
}
body.cp-v2 ::placeholder {
  color: var(--cp-mute) !important;
  opacity: 1;
}
body.cp-v2 label,
body.cp-v2 .label {
  color: var(--cp-ink);
}
/* a field Forminator marks as wrong keeps a red edge (the field rule above would otherwise paint it the same grey as a
   valid field; colour only, the 1.5px width stays). #b20000: 7.3:1 on white, 6.0:1 on Forminator's pink error box.
   The newsletter fields on the dark footer have only a bottom line: light red there (section 10) */
body.cp-v2 .forminator-ui .forminator-field.forminator-has_error :is(.forminator-input, .forminator-textarea, select) {
  border-color: #b20000 !important;
}
body.cp-v2 .woocommerce-info,
body.cp-v2 .message-wrapper,
body.cp-v2 .woocommerce-message {
  color: var(--cp-body);
}
/* links inside WooCommerce / Flatsome notice boxes ("Have a coupon? Click here to enter your code", "Returning
   customer? Click here to login") sit straight in div.message-container, outside the in-text link rule: ink + underline
   so they do not read as plain text next to the #33383d notice text */
body.cp-v2 :is(.woocommerce-info, .woocommerce-message, .woocommerce-error, .message-container) a:not(.button) {
  color: var(--cp-ink) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px;
}
/* Flatsome's green success notice (#627d47) was 4.62:1 on white but 4.09:1 on the new page colour -> a darker green
   (5.4:1 on #f3f1ec) */
body.cp-v2 .message-container.success-color,
body.cp-v2 .message-container.success-color i {
  color: #4f6a35 !important;
}


/* ---------------------------------------------------------------------------------------------------------------------
   5. PRODUCT CARDS (home grid, shop hub, category pages) + stars, prices, badges
   --------------------------------------------------------------------------------------------------------------------- */
body.cp-v2 .product-small.box {
  background-color: #fff;
  border: 1px solid var(--cp-line);
  border-radius: 4px;
  overflow: hidden;
}
body.cp-v2 .product-small .box-text {
  background-color: #fff;
}
body.cp-v2 .product-small .name a,
body.cp-v2 .product-small .woocommerce-loop-product__title a {
  color: var(--cp-ink) !important;
  font-family: var(--cp-disp) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
body.cp-v2 .product-small .category,
body.cp-v2 .product-small .product-cat {
  color: var(--cp-mute) !important;
  font-family: var(--cp-disp);
  letter-spacing: .12em;
}
body.cp-v2 .price,
body.cp-v2 .price .amount,
body.cp-v2 .price bdi {
  color: var(--cp-ink) !important;
}
body.cp-v2 .price del,
body.cp-v2 .price del .amount {
  color: var(--cp-mute) !important;
}
body.cp-v2 .star-rating,
body.cp-v2 .star-rating::before,
body.cp-v2 .star-rating span::before,
body.cp-v2 .woocommerce-product-rating .star-rating span::before {
  color: var(--cp-star) !important;
}
body.cp-v2 .dark .star-rating span::before,
body.cp-v2 .dark .star-rating::before {
  color: var(--cp-star-dk) !important;
}
body.cp-v2 :is(.badge-inner, .onsale, .callout .badge-inner) {
  background-color: var(--cp-ink) !important;
  color: #fff !important;
  border-radius: 2px !important;
  font-family: var(--cp-disp) !important;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.cp-v2 .is-divider {
  background-color: var(--cp-coyote) !important;
}
/* page numbers under category grids: square like every other control (Flatsome draws 34px circles; the size stays
   34px). Not underlined (they are kept out of the in-text link rule); the hovered number is filled ink by Flatsome, so
   its number turns white (#main is needed to out-rank the in-text link hover colour) */
body.cp-v2 .page-numbers .page-number {
  border-radius: 2px !important;
  font-family: var(--cp-disp);
  font-weight: 600;
}
body.cp-v2 #main .nav-pagination > li > a {
  color: var(--cp-ink) !important;  /* number + its 2px ring (currentColor); Flatsome's base colour would be #33383d */
}
body.cp-v2 #main .nav-pagination > li > a:hover {
  color: #fff !important;
}
/* Flatsome quick view link on hover */
body.cp-v2 .grid-tools a,
body.cp-v2 .quick-view {
  background-color: var(--cp-ink) !important;
  color: #fff !important;
  font-family: var(--cp-disp);
  letter-spacing: .08em;
}


/* ---------------------------------------------------------------------------------------------------------------------
   6. PRODUCT PAGE (colours + lettering only in the buy area — sizes and positions untouched)
   --------------------------------------------------------------------------------------------------------------------- */
body.cp-v2 .product-info .product-title,
body.cp-v2 .product_title {
  color: var(--cp-ink);
}
body.cp-v2 .woocommerce-breadcrumb,
body.cp-v2 .woocommerce-breadcrumb a,
body.cp-v2 .breadcrumbs a,
body.cp-v2 .breadcrumbs .divider {
  color: var(--cp-mute) !important;
  font-family: var(--cp-disp) !important;
  letter-spacing: .1em;
}
/* Flatsome draws the "/" separators at opacity .35 (1.8:1): full strength in the muted colour (5.6:1) */
body.cp-v2 :is(.breadcrumbs, .woocommerce-breadcrumb, .checkout-breadcrumbs) :is(.divider, .separator) {
  opacity: 1 !important;
}
body.cp-v2 .woocommerce-review-link,
body.cp-v2 .woocommerce-review-link .count {
  color: var(--cp-ink) !important;
  text-decoration: underline !important;  /* the site's own CSS removes it otherwise */
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px;
}
body.cp-v2 .product-info .price,
body.cp-v2 .product-info .price .amount,
body.cp-v2 .woocommerce-variation-price .amount {
  font-family: var(--cp-disp) !important;
  font-weight: 600;
  color: var(--cp-ink) !important;
}
/* "Choose Size" label: Oswald, tracked so the label column keeps today's width (99.3px) and the size menu does not
   move or narrow (measured 10/05 phone + desktop, Dark + White) */
body.cp-v2 form.cart table.variations th.label label {
  font-family: var(--cp-disp) !important;
  font-weight: 600;
  letter-spacing: 1.13px;
  text-transform: uppercase;
  color: var(--cp-ink) !important;
}
/* RULE 3 HOLD — DELETE AFTER THE TEST ENDS (10/18). On the three pillow pages (139 White, 143 Camo, 264 Dark) the copy
   that sits ABOVE the size menu keeps today's text metrics, so the size menu and Add to Cart stay where they are today
   (the system font set this copy 150-190px shorter on White/Camo phones and moved the buy area up by different amounts
   on the treated and comparison pages). Colours still change; only the face/line height are held. */
body.cp-v2:is(.postid-139, .postid-143, .postid-264) .product-info :is(.product-short-description, .product-short-description *, .cpw-addon-body, .cpw-addon-body *:not(h1, h2, h3), table.extra-options, table.extra-options *) {
  font-family: Poppins, sans-serif !important;  /* + the add-on drawers' inside (an OPENED drawer keeps today's height)
                                                   and the add-on option rows (desktop: they sit above Add to Cart) */
}
/* …and what WooCommerce shows once a SIZE IS CHOSEN (the normal state just before Add to Cart): that size's description,
   price and stock line. In the system font the description was 25.6px shorter (51.2px for Monster) and the price in
   Oswald 2px taller, so Add to Cart, quantity, Google Pay, trust strip and drawers moved by different amounts on the
   treated (Dark) and comparison (White/Camo) pages. Same hold: face kept, colours still change. Specificity 0,4,2+,
   after the .product-info .price .amount rule, so it wins. */
body.cp-v2:is(.postid-139, .postid-143, .postid-264) :is(.product-info, form.cart) :is(.woocommerce-variation-description, .woocommerce-variation-description *, .woocommerce-variation-price, .woocommerce-variation-price *, .woocommerce-variation-availability, .woocommerce-variation-availability *) {
  font-family: Poppins, sans-serif !important;
}
/* (headings in this column keep the theme's line height: see the line-height rule in section 1) */
/* Add to Cart and the sticky bar button: Oswald, tracked so each keeps today's exact width
   (171.6px and 173.9px — measured 10/05 on phone + desktop, Dark + White; rule 3, test until 10/18) */
body.cp-v2 .product-info .single_add_to_cart_button {
  letter-spacing: 2.5px !important;
}
body.cp-v2 .cpw-sticky-atc__cta {
  letter-spacing: 2.2px !important;
}
body.cp-v2 form.cart select {
  border-color: var(--cp-ctl) !important;
  border-radius: 2px !important;
}
/* Add to Cart before a size is chosen (WooCommerce's disabled state, opacity .6 = a washed-out salmon with a grey
   label, 2.3:1): a pale action colour at full opacity with the near-black label (10.4:1) — still reads "not ready".
   Colour only; Dark, White and Camo get the same. The :is(…, #cp-x) only lifts the specificity above the primary
   button rules (it never matches an id). */
body.cp-v2 .product-info :is(.single_add_to_cart_button.disabled, #cp-x),
body.cp-v2 .product-info :is(.single_add_to_cart_button.disabled, #cp-x):hover {
  opacity: 1 !important;
  background-color: #f2b28c !important;
  border-color: #f2b28c !important;
  color: #111 !important;
}
/* quantity box */
body.cp-v2 .ux-quantity .ux-quantity__button,
body.cp-v2 .ux-quantity input.qty {
  background-color: #fff !important;
  color: var(--cp-ink) !important;
  border-color: var(--cp-ctl) !important;
}
/* …in the buy area the pieces are different heights (field 40px, − and + 63px): paint the wrapper as ONE white box with
   a drawn-in line and clear the pieces, so there is no notch (no size or position change; doubled class out-ranks the
   rule above) */
body.cp-v2 form.cart .ux-quantity {
  background-color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--cp-ctl);
  border-radius: 2px;
}
body.cp-v2 form.cart .ux-quantity.ux-quantity :is(.ux-quantity__button, input.qty) {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;  /* Flatsome's inset shadow on the field drew grey lines inside the box */
}
/* the "Complete your carry" 3-pack box injected under Add to Cart */
body.cp-v2 a[style*="background:#f0f6ff"] {
  background: #fff !important;
  border-color: var(--cp-ink) !important;
  border-radius: 3px !important;
  color: var(--cp-ink) !important;
}
body.cp-v2 a[style*="background:#f0f6ff"] > span:first-child {
  font-family: var(--cp-disp) !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
}
/* "GET THE 3-PACK & SAVE →" chip: outlined secondary (the line is drawn INSIDE the box, so its size does not change) */
body.cp-v2 a[style*="background:#f0f6ff"] span[style*="background:#2b6cb0"] {
  background: transparent !important;
  color: var(--cp-ink) !important;
  box-shadow: inset 0 0 0 1.5px var(--cp-ink);
  border-radius: 2px !important;
  font-family: var(--cp-disp) !important;
  font-weight: 600 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* trust strip */
body.cp-v2 .cps-trust-strip {
  background: #fff !important;
  border-color: var(--cp-line) !important;
  border-radius: 3px !important;
  color: var(--cp-ink) !important;
}
/* optional add-on drawers (Dark page) */
body.cp-v2 details.cpw-addon-accordion {
  background-color: #fff !important;
  border-color: var(--cp-line) !important;
  border-radius: 3px !important;
}
body.cp-v2 details.cpw-addon-accordion > summary,
body.cp-v2 details.cpw-addon-accordion > summary::after {
  color: var(--cp-ink) !important;  /* ::after = the + / − mark, was navy #0d3b66 */
}
body.cp-v2 form.cart .extra-options label.label-tag,
body.cp-v2 form.cart .extra-options label[style*="color:#0d3b66"] {
  color: var(--cp-ink) !important;
}
body.cp-v2 .bundle_sells_title h3,
body.cp-v2 .bundled_product .bundled_product_title {
  color: var(--cp-ink) !important;
}
/* sticky Add to Cart bar (phones) */
body.cp-v2 .cpw-sticky-atc {
  background-color: var(--cp-black) !important;
  border-color: var(--cp-steel) !important;
  color: var(--cp-on-dark) !important;
}
body.cp-v2 .cpw-sticky-atc :is(.cpw-sticky-atc__title, .cpw-sticky-atc__price, .cpw-sticky-atc__price *) {
  color: var(--cp-on-dark) !important;
}
body.cp-v2 .cpw-sticky-atc__title {
  font-family: var(--cp-disp) !important;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* gallery */
body.cp-v2 .product-gallery .flickity-button,
body.cp-v2 .product-images .flickity-button {
  color: var(--cp-ink) !important;
}
body.cp-v2 .product-thumbnails .is-nav-selected a,
body.cp-v2 .product-thumbnails a:hover {
  border-color: var(--cp-ink) !important;
}
/* tabs / description area */
body.cp-v2 .nav-tabs > li > a,
body.cp-v2 .tabs > li > a,
body.cp-v2 .product-tabs > li > a {
  font-family: var(--cp-disp) !important;
  font-weight: 600 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cp-mute) !important;
}
body.cp-v2 .nav-tabs > li.active > a,
body.cp-v2 .tabs > li.active > a,
body.cp-v2 .product-tabs > li.active > a {
  color: var(--cp-ink) !important;
  border-top-color: var(--cp-ink) !important;
  background-color: #fff !important;
}
body.cp-v2 .nav-tabs + .tab-panels {
  border-color: var(--cp-line) !important;
}


/* ---------------------------------------------------------------------------------------------------------------------
   7. CART
   --------------------------------------------------------------------------------------------------------------------- */
body.cp-v2 .checkout-breadcrumbs a,
body.cp-v2 .checkout-breadcrumbs .divider {
  color: var(--cp-mute) !important;
  font-family: var(--cp-disp) !important;
}
body.cp-v2 .checkout-breadcrumbs a.current {
  color: var(--cp-ink) !important;
}
body.cp-v2 .cart-container .woocommerce-info,
body.cp-v2 .wc-empty-cart-message .message-container {
  color: var(--cp-body) !important;
}
body.cp-v2 .shop_table,
body.cp-v2 .cart_totals,
body.cp-v2 .cart-collaterals .cart-sidebar {
  border-color: var(--cp-line) !important;
}
body.cp-v2 .shop_table thead th,
body.cp-v2 .cart_totals th,
body.cp-v2 .cart-sidebar .heading-font {
  font-family: var(--cp-disp) !important;
  letter-spacing: .1em;
  color: var(--cp-ink) !important;
}


/* ---------------------------------------------------------------------------------------------------------------------
   8. ARTICLES, FAQ AND TABLES
   --------------------------------------------------------------------------------------------------------------------- */
body.cp-v2 .entry-content,
body.cp-v2 .entry-content :is(p, li) {
  color: var(--cp-body);
}
body.cp-v2 .entry-header .entry-category a,
body.cp-v2 .entry-meta,
body.cp-v2 .entry-meta a {
  color: var(--cp-mute) !important;
}
/* Flatsome draws the category line above the article title at opacity .8 (3.48:1 at 11px): full strength (5.6:1) */
body.cp-v2 .entry-header .entry-category,
body.cp-v2 .entry-header .entry-category a {
  opacity: 1 !important;
}
body.cp-v2 #main table:not(.variations):not(.extra-options) {
  border-collapse: collapse;
  border-color: var(--cp-line);
  background-color: #fff;
}
body.cp-v2 #main table:not(.variations):not(.extra-options) :is(td, th) {
  border-color: var(--cp-line) !important;
  color: var(--cp-body);
}
body.cp-v2 #main table:not(.variations):not(.extra-options) th {
  font-family: var(--cp-disp) !important;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cp-ink);
}
body.cp-v2 blockquote {
  border-left-color: var(--cp-coyote) !important;
  color: var(--cp-body);
}
/* Flatsome accordion (FAQ page) — questions stay in the running-text face, like the draft's FAQ */
body.cp-v2 .accordion-title,
body.cp-v2 .accordion-title.plain {
  color: var(--cp-ink) !important;
  border-color: var(--cp-line) !important;
  font-family: var(--cp-text) !important;
}
body.cp-v2 .accordion-title.active {
  background-color: #fff !important;
  border-color: var(--cp-ink) !important;
}
body.cp-v2 .accordion-item .toggle,
body.cp-v2 .accordion-item .toggle i {
  color: var(--cp-ink) !important;
}
body.cp-v2 .accordion-inner {
  color: var(--cp-body);
}
/* <details> FAQs */
body.cp-v2 .cp-faq details {
  border-color: var(--cp-line) !important;
}
body.cp-v2 .cp-faq summary {
  color: var(--cp-ink) !important;
}
body.cp-v2 .cp-faq summary::after {
  color: var(--cp-coyote-dk) !important;
}
body.cp-v2 .cp-faq .faq-body {
  color: var(--cp-body) !important;
}


/* ---------------------------------------------------------------------------------------------------------------------
   9. PAGE SECTIONS + HOME PAGE inline colours brought into the palette
   --------------------------------------------------------------------------------------------------------------------- */
/* Flatsome dark sections (navy #1a2332 bands, the blue footer band) -> dark frame */
body.cp-v2 section.section.dark,
body.cp-v2 section.section.dark > .section-bg {
  background-color: var(--cp-black) !important;
}
body.cp-v2 .dark {
  color: var(--cp-on-dark);
}
/* banner (hero) — dark tint instead of plain black; banner fill colour was primary blue */
body.cp-v2 .banner {
  background-color: var(--cp-black) !important;
}
body.cp-v2 .banner .overlay {
  background-color: rgba(13, 15, 17, .62) !important;
}
/* hero kicker + small link (were sky blue #7ecfff) */
body.cp-v2 .banner p[style*="#7ecfff"] {
  color: #dcc69c !important;  /* a lighter coyote: the brightest 5% of the photo behind it still gives >= 5.2:1 */
  font-family: var(--cp-disp) !important;
  font-weight: 500 !important;
  letter-spacing: .2em !important;
}
body.cp-v2 #main .banner a[style*="#7ecfff"] {
  color: var(--cp-on-dark) !important;
}
/* hero main button (inline white) -> action colour */
body.cp-v2 a[style*="background: #ffffff"][style*="color: #111"] {
  background: var(--cp-accent) !important;
  color: var(--cp-accent-ink) !important;
  border-radius: 2px !important;
  font-family: var(--cp-disp) !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
}
/* light grey info cards -> white cards with a hairline */
body.cp-v2 div[style*="background: #f8f9fb"],
body.cp-v2 div[style*="background:#f8f9fb"] {
  background: #fff !important;
  border: 1px solid var(--cp-line);
  border-radius: 4px !important;
}
body.cp-v2 div[style*="border: 2px solid #e8ecf0"] {
  border-color: var(--cp-line) !important;
  border-radius: 4px !important;
}
/* "HOLSTER WEDGE SINGLES" label bar (blue) */
body.cp-v2 div[style*="background: #1a6fc4"] {
  background: var(--cp-black) !important;
  color: #fff !important;
  font-family: var(--cp-disp) !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  border-radius: 3px 3px 0 0 !important;
}
/* navy chips, table heads, step circles -> black */
body.cp-v2 :is(span, div, tr, td, th)[style*="background: #1a2332"] {
  background: var(--cp-black) !important;
  color: #fff !important;
}
body.cp-v2 span[style*="background: #1a2332"] {
  border-radius: 2px !important;
}
/* amber numbers inside navy circles -> coyote */
body.cp-v2 [style*="background: #1a2332"] [style*="color: #f5a623"],
body.cp-v2 [style*="background: #1a2332"][style*="color: #f5a623"] {
  color: var(--cp-coyote) !important;
}
/* amber chips / circles -> coyote with dark letters */
body.cp-v2 :is(span, div)[style*="background: #f5a623"] {
  background: var(--cp-coyote) !important;
  color: var(--cp-black) !important;
}
body.cp-v2 span[style*="background: #f5a623"] {
  border-radius: 2px !important;
}
/* navy table head row -> black with white words */
body.cp-v2 #main tr[style*="background: #1a2332"] > :is(th, td) {
  color: #fff !important;
}
/* step connector lines */
body.cp-v2 div[style*="background: #e0e4ea"] {
  background: var(--cp-line) !important;
}
/* review cards on the dark band ("What real carriers say"): WHITE cards like draft 3 (t.css .rev: #fff, 4px corners,
   ink title, body text, #b07400 stars, muted "who" line with the name in ink) */
body.cp-v2 div[style*="background: #253447"] {
  background: #fff !important;
  border: 0 !important;
  border-radius: 4px !important;
}
body.cp-v2 div[style*="background: #253447"] p[style*="font-weight: 700"] {
  font-family: var(--cp-disp) !important;
  font-weight: 600 !important;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: 17px !important;
}
body.cp-v2 .dark div[style*="background: #253447"] :is(p, span, div, strong) {
  color: var(--cp-body) !important;
}
body.cp-v2 .dark div[style*="background: #253447"] :is(p[style*="font-weight: 700"], p[style*="font-weight: bold"]) {
  color: var(--cp-ink) !important;
}
body.cp-v2 .dark div[style*="background: #253447"] [style*="color: #f5a623"] {
  color: var(--cp-star) !important;
}
body.cp-v2 .dark div[style*="background: #253447"] :is(p, span, div):is([style*="color: #7a9ab5"], [style*="color: #a0b4c8"]) {
  color: var(--cp-mute) !important;
}
body.cp-v2 .dark div[style*="background: #253447"] div[style*="border-radius: 50%"] {
  background: var(--cp-ink) !important;
  color: #fff !important;
}
body.cp-v2 p[style*="color: #e2eaf2"],
body.cp-v2 div[style*="color: #e2eaf2"] {
  color: var(--cp-on-dark) !important;
}
/* blue-grey small text on dark */
body.cp-v2 :is(p, span, div)[style*="color: #7a9ab5"],
body.cp-v2 :is(p, span, div)[style*="color: #a0b4c8"] {
  color: var(--cp-on-dark-2) !important;
}
/* the home page stats row labels ("Starting Price … Day Returns") are small labels -> Oswald. Oswald is narrower than
   the system font, which keeps the row wrapping where it wraps today (in the system font "Verified Reviews" grew
   117 -> 124px and pushed the row's last divider down to the start of the next row on a 390px phone) */
body.cp-v2 p[style*="color: #7a9ab5"][style*="text-transform: uppercase"] {
  font-family: var(--cp-disp) !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
}
/* coloured initials circles (blue / green / purple) -> steel */
body.cp-v2 div[style*="border-radius: 50%"][style*="width: 42px"] {
  background: var(--cp-steel) !important;
  color: #fff !important;
}
/* amber stars + amber words */
body.cp-v2 .dark :is(div, span)[style*="color: #f5a623"] {
  color: var(--cp-star-dk) !important;
}
body.cp-v2 :is(div, span)[style*="color: #f5a623"] {
  color: var(--cp-star) !important;
}
body.cp-v2 .dark p[style*="color: #f5a623"] {
  color: var(--cp-coyote) !important;
  font-family: var(--cp-disp) !important;
  font-weight: 600 !important;
}
body.cp-v2 p[style*="color: #f5a623"][style*="letter-spacing"] {
  font-weight: 500 !important;
}
/* inline navy / blue link + text colours on light */
body.cp-v2 :is(a, td, p, span, strong)[style*="color: #1a2332"],
body.cp-v2 :is(a, td, p, span, strong)[style*="color: #0d3b66"],
body.cp-v2 :is(a, td, p, span, strong)[style*="color:#0d3b66"],
body.cp-v2 :is(a, p, span)[style*="color: #08a2fc"],
body.cp-v2 :is(a, p, span)[style*="color:#08a2fc"],
body.cp-v2 :is(a, p, span)[style*="color: #0693e3"] {
  color: var(--cp-ink) !important;
}
body.cp-v2 tr[style*="border-bottom: 1px solid #e8ecf0"] {
  border-bottom-color: var(--cp-line) !important;
}
body.cp-v2 tr[style*="background: #fafbfc"] {
  background: var(--cp-bone) !important;
}
/* shop hub (page 8) hero: green / blue kickers -> coyote labels; the black "Pick your color" button -> action colour */
body.cp-v2 #main p[style*="color: #2e7d32"],
body.cp-v2 #main p[style*="color: #1a6fc4"] {
  color: var(--cp-coyote-dk) !important;
  font-family: var(--cp-disp) !important;
  font-weight: 500 !important;
  letter-spacing: .2em !important;
}
body.cp-v2 #main a.cp-hero-cta {
  border-radius: 2px !important;
  font-family: var(--cp-disp) !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
}
body.cp-v2 #main a.cp-hero-cta[style*="background: #111"] {
  background: var(--cp-accent) !important;
  color: var(--cp-accent-ink) !important;
}
body.cp-v2 #main a.cp-hero-cta[style*="background: #fff"] {
  border-width: 1.5px !important;
  border-color: var(--cp-ink) !important;
  color: var(--cp-ink) !important;
}
/* call-out boxes (green on the hub, navy-bordered on the two comparison articles) -> white card, ink / coyote edge */
body.cp-v2 #main div[style*="background: #f0f7f0"] {
  background: #fff !important;
  border-left-color: var(--cp-coyote) !important;
  border-radius: 3px !important;
}
body.cp-v2 #main div[style*="border: 2px solid #2c3e50"],
body.cp-v2 #main div[style*="border:2px solid #1e3a5f"] {
  border-color: var(--cp-ink) !important;
  background: #fff !important;
  border-radius: 3px !important;
}
body.cp-v2 #main div[style*="background: #f7f7f7"] {
  background: #fff !important;
}
body.cp-v2 #main tr[style*="background-color: #f2f2f2"],
body.cp-v2 #main tr[style*="background: #f5f5f5"] {
  background: var(--cp-bone) !important;
}
body.cp-v2 #main [style*="border: 1px solid #ddd"] {
  border-color: var(--cp-line) !important;
}
/* contact page: the two sky-blue icon pictures (clock, envelope) shown in ink instead of blue */
body.cp-v2 #main .img-inner img:is([src*="/2024/11/time-13"], [src*="/2024/11/email-24"], [data-lazy-src*="/2024/11/time-13"], [data-lazy-src*="/2024/11/email-24"]) {
  filter: brightness(0) saturate(100%);
  opacity: .88;
}
/* "More from Cloudster" tiles */
body.cp-v2 .cp-more-tile {
  border-color: var(--cp-line) !important;
  border-radius: 4px !important;
  background: #fff !important;
}
body.cp-v2 .cp-more-name {
  color: var(--cp-ink) !important;
  font-family: var(--cp-disp) !important;
  font-weight: 600 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}
body.cp-v2 .cp-more-price,
body.cp-v2 .cp-more-sub {
  color: var(--cp-mute) !important;
}
body.cp-v2 .cp-more-h {
  font-family: var(--cp-disp) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--cp-ink) !important;
}


/* ---------------------------------------------------------------------------------------------------------------------
   10. FOOTER — dark frame
   --------------------------------------------------------------------------------------------------------------------- */
body.cp-v2 #footer,
body.cp-v2 .footer-wrapper {
  background-color: var(--cp-black-2) !important;
  color: var(--cp-on-dark-2);
}
body.cp-v2 #footer section.section,
body.cp-v2 #footer section.section > .section-bg {
  background-color: transparent !important;
}
body.cp-v2 #footer > .is-divider {
  background-color: var(--cp-steel) !important;
}
body.cp-v2 #footer :is(h1, h2, h3, h4, h5, h6),
body.cp-v2 #footer .text[id^="text-"] > :is(h4, h5) {
  color: var(--cp-coyote) !important;
  font-family: var(--cp-disp) !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}
body.cp-v2 #footer :is(p, li, span, div) {
  color: var(--cp-on-dark-2);
}
body.cp-v2 #footer a {
  color: var(--cp-on-dark) !important;
  text-decoration: none;
}
body.cp-v2 #footer a:hover {
  color: #fff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
body.cp-v2 #footer .icon-box-text p {
  color: var(--cp-on-dark) !important;
}
/* footer logo picture (Logo.png: blue cloud + navy words on a transparent background, made for today's white footer).
   The brief allows hiding ONLY the header logo picture, so this one stays visible: it is recoloured light (like the
   contact-page icons) so the navy words read on the dark footer and no blue is left. Showing the CP mark here instead
   needs Keith's OK to extend the logo exception — ready-made rules in README.md. */
/* 2026-10-05: Keith chose the CP mark in place of the blue cloud on 10/04 ("start using my CP as my logo and remove that
   blue cloud"), so the footer gets the same treatment as the header (logo exception extended to this one picture). */
body.cp-v2 #footer .img .img-inner:has(> img[width="639"][height="170"]) {
  position: relative; background-image: var(--cp-mark); background-repeat: no-repeat;
  background-size: auto 46px; background-position: left center;
}
body.cp-v2 #footer .img .img-inner:has(> img[width="639"][height="170"]) > img { opacity: 0 !important; }
body.cp-v2 #footer .img .img-inner:has(> img[width="639"][height="170"])::after {
  content: "Cloudster Pillow"; content: "Cloudster Pillow" / ""; position: absolute; top: 50%; left: 44px;
  transform: translateY(-50%); font-family: var(--cp-disp); font-weight: 600; font-size: 24px; line-height: 1;
  letter-spacing: .09em; text-transform: uppercase; color: #fff; white-space: nowrap; pointer-events: none;
}
/* newsletter */
body.cp-v2 #footer .forminator-ui .forminator-label,
body.cp-v2 #footer .forminator-ui .forminator-label * {
  color: var(--cp-on-dark-2) !important;
}
body.cp-v2 #footer .forminator-ui .forminator-required {
  color: var(--cp-coyote) !important;
}
body.cp-v2 #footer .forminator-ui .forminator-input {
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1.5px solid var(--cp-ctl) !important;
  border-radius: 0 !important;
  color: #fff !important;
}
/* placeholders ("E.g. John") on the dark footer: light grey (10.4:1) instead of the page-wide muted grey (3.4:1) */
body.cp-v2 #footer .forminator-ui .forminator-input::placeholder {
  color: var(--cp-on-dark-2) !important;
}
/* Forminator's own focus line under each field grows in blue (#097baa) when a field is tapped -> coyote (dark coyote on
   the light contact page) */
body.cp-v2 .forminator-ui .forminator-field:not(.forminator-has_error) .forminator-input--wrap::after {
  background-color: var(--cp-coyote-dk) !important;
}
body.cp-v2 #footer .forminator-ui .forminator-field:not(.forminator-has_error) .forminator-input--wrap::after {
  background-color: var(--cp-coyote) !important;
}
/* Forminator's "This field is required…" red (#e51919) was 4.7:1 on today's white; on the new page colour it would be
   4.2:1 and on the dark footer 4.2:1 -> Flatsome's own error red on light (6.4:1), a light red on the dark footer (7.8:1) */
body.cp-v2 .forminator-ui .forminator-error-message {
  color: #b20000 !important;
}
body.cp-v2 #footer .forminator-ui .forminator-error-message {
  color: #ff7b72 !important;
}
body.cp-v2 #footer .forminator-ui .forminator-has_error .forminator-input--wrap::after {
  background-color: #ff7b72 !important;
}
body.cp-v2 #footer .forminator-ui .forminator-button-submit {
  background-color: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, .7) !important;
  color: #fff !important;
}
body.cp-v2 #footer .forminator-ui .forminator-button-submit:hover {
  background-color: #fff !important;
  color: var(--cp-ink) !important;
}
/* the Subscribe label is a <span>, which the footer text rule (#footer span) would paint grey itself: let it follow the
   button (white at rest, ink on the white hover fill) */
body.cp-v2 #footer .forminator-button-submit :is(span, div) {
  color: inherit !important;
}
/* a newsletter field marked wrong: its bottom line in the light error red (the general error rule's #b20000 is for
   light backgrounds) */
body.cp-v2 #footer .forminator-ui .forminator-field.forminator-has_error .forminator-input {
  border-bottom-color: #ff7b72 !important;
}
/* payment-icons band */
body.cp-v2 #footer .payment-icon {
  background-color: var(--cp-char) !important;
  border-radius: 3px;
}
body.cp-v2 #footer .payment-icon svg {
  fill: var(--cp-on-dark-2) !important;
  opacity: 1 !important;
}
body.cp-v2 .absolute-footer {
  background-color: var(--cp-black-2) !important;
  color: var(--cp-on-dark-2) !important;
}


/* ---------------------------------------------------------------------------------------------------------------------
   11. THIRD-PARTY PIECES — restyled lightly; payment buttons (Apple Pay, Google Pay, PayPal, Stripe fields) untouched
   --------------------------------------------------------------------------------------------------------------------- */
/* Popup Maker (bundle upsell) */
body.cp-v2 .pum-theme-default-theme .pum-container {
  border-radius: 4px !important;
  background-color: #fff !important;
}
body.cp-v2 .pum-theme-default-theme .pum-title {
  font-family: var(--cp-disp) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--cp-ink) !important;
}
body.cp-v2 .pum-theme-default-theme .pum-content {
  color: var(--cp-body) !important;
}
body.cp-v2 .pum-theme-default-theme .pum-content + .pum-close,
body.cp-v2 .pum-theme-default-theme .pum-close {
  background-color: var(--cp-ink) !important;
  color: #fff !important;
  font-family: var(--cp-disp) !important;
  letter-spacing: .1em;
  border-radius: 2px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.cp-v2 .pum-content a[style*="background"] {
  background: var(--cp-accent) !important;
  color: var(--cp-accent-ink) !important;
  border-radius: 2px !important;
  font-family: var(--cp-disp) !important;
  font-weight: 600 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* CusRev reviews block */
body.cp-v2 :is(.cr-nosummary-add, .cr-show-more-button, .cr-show-more-reviews-prd, .cr-review-form-submit, .cr-review-form-cancel, .cr-button-search) {
  min-height: 48px !important;
  border-radius: 2px !important;
  font-family: var(--cp-disp) !important;
  letter-spacing: .08em;
  text-transform: uppercase !important;  /* CusRev sets text-transform: none on "Add a review" */
}
/* the review form's own Submit is that form's primary action -> action colour; "Add a review" is a secondary action
   (the draft has no filled-dark button) -> outlined */
body.cp-v2 .cr-review-form-submit {
  background-color: var(--cp-accent) !important;
  color: var(--cp-accent-ink) !important;
  border-color: var(--cp-accent) !important;
}
body.cp-v2 :is(.cr-nosummary-add, .cr-show-more-button, .cr-show-more-reviews-prd, .cr-review-form-cancel) {
  background-color: transparent !important;
  color: var(--cp-ink) !important;
  border: 1.5px solid var(--cp-ink) !important;
}
body.cp-v2 :is(.cr-nosummary-add, .cr-show-more-button, .cr-show-more-reviews-prd, .cr-review-form-cancel):hover {
  background-color: var(--cp-ink) !important;
  color: #fff !important;
}
/* the all-reviews SEARCH button (shop hub): the plugin's grey gradient fill -> outlined secondary. Colour only: its
   1px border width is kept so the button does not change size next to the search field */
body.cp-v2 .cr-button-search {
  background-image: none !important;
  background-color: transparent !important;
  border-color: var(--cp-ink) !important;
  color: var(--cp-ink) !important;
}
body.cp-v2 .cr-button-search:hover {
  background-color: var(--cp-ink) !important;
  color: #fff !important;
}
/* the "With media" filter chip: square like every other control, the palette's control line and ink words (colour and
   corners only; the 1px border stays so the chip keeps its size) */
body.cp-v2 .cr-review-tags-filter .cr-media-pill {
  border-radius: 2px !important;
  border-color: var(--cp-ctl) !important;
  color: var(--cp-ink) !important;
}
body.cp-v2 .cr-review-tags-filter .cr-media-pill:hover {
  border-color: var(--cp-ink) !important;
  background-color: #fff !important;  /* CusRev's hover tint was mint green */
}
/* chosen filter: CusRev fills it green (#31856c) with white words -> ink fill, white words (18.5:1) */
body.cp-v2 .cr-review-tags-filter .cr-media-pill.cr-tag-selected,
body.cp-v2 .cr-review-tags-filter .cr-media-pill.cr-tag-selected :is(span, svg) {
  background-color: var(--cp-ink) !important;
  border-color: var(--cp-ink) !important;
  color: #fff !important;
}
/* CusRev stars: the plugin's bright yellow (#ffbc00, 1.5:1 on the page colour) -> the palette's star colour on light.
   The <svg> uses fill="currentColor"; its first path is a fill="none" bounding box, so only the <svg> is set. */
body.cp-v2 .cr-rating-icon-frnt svg {
  color: var(--cp-star) !important;
  fill: var(--cp-star) !important;
}
body.cp-v2 .dark .cr-rating-icon-frnt svg {
  color: var(--cp-star-dk) !important;
  fill: var(--cp-star-dk) !important;
}
/* the big star next to "5.0 Rating" (inline-filled #F4DB6B / #F5CD5B) */
body.cp-v2 .cr-nosummary-rating-cnt > svg > path {
  fill: var(--cp-star) !important;
  stroke: var(--cp-star) !important;
}
/* rating histogram (shop hub, product pages): CusRev paints a yellow gradient OVER the bar colour, so the gradient goes;
   the bar is the star colour (3.9:1 on the white track; graphics need 3:1), the track white with a hairline, and the
   small stars next to 5/4/3/2/1 the star colour too */
body.cp-v2 .ivole-meter .ivole-meter-bar {
  background-color: var(--cp-star) !important;
  background-image: none !important;
  color: #111 !important;
}
body.cp-v2 .ivole-meter {
  background-image: none !important;
  background-color: #fff !important;
  box-shadow: inset 0 0 0 1px var(--cp-line);
}
body.cp-v2 .cr-histogram-rating-icon {
  fill: var(--cp-star) !important;
  color: var(--cp-star) !important;
}
/* the review form's rating stars (open "Add a review"). EMPTY stars (the control the visitor taps) were CusRev's pale
   grey #dfe4e7 (1.2:1 on the page colour); CHOSEN / hovered stars its pale yellow #f4db6b (1.2:1). Now: empty = white
   star with a control-grey outline (3.4:1 on the page colour, 3.9:1 on white), chosen = solid star colour (3.5:1 / 3.9:1).
   Hollow vs solid, so the chosen rating does not rely on colour alone (white vs star colour inside: 3.9:1). The outline
   is drawn on the path; overflow:visible only lets its outer half show at the star's points (no size change). */
body.cp-v2 .cr-review-form-rating .cr-rating-deact {
  overflow: visible;
}
body.cp-v2 .cr-review-form-rating .cr-rating-deact path {
  fill: #fff !important;
  stroke: var(--cp-ctl) !important;
  stroke-width: 1.5px;
  stroke-linejoin: round;
}
body.cp-v2 .cr-review-form-rating .cr-rating-act path {
  fill: var(--cp-star) !important;
}
body.cp-v2 .woocommerce-review__published-date,
body.cp-v2 .cr-review-date,
body.cp-v2 .cp-hero-trust {
  color: var(--cp-mute) !important;
}
/* light-grey inline text on light panels (#777 / #888 / #999 failed 4.5:1) -> muted ink */
body.cp-v2 #main :is(p, span, div, strong, small, li)[style*="color: #888"],
body.cp-v2 #main :is(p, span, div, strong, small, li)[style*="color:#888"],
body.cp-v2 #main :is(p, span, div, strong, small, li)[style*="color: #999"],
body.cp-v2 #main :is(p, span, div, strong, small, li)[style*="color:#999"],
body.cp-v2 #main :is(p, span, div, strong, small, li)[style*="color: #777"],
body.cp-v2 #main :is(p, span, div, strong, small, li)[style*="color:#777"],
body.cp-v2 #main :is(p, span, div, strong, small, li)[style*="color: #aaa"] {
  color: var(--cp-mute) !important;
}
body.cp-v2 #main .dark :is(p, span, div, strong, small, li)[style*="color: #888"],
body.cp-v2 #main .dark :is(p, span, div, strong, small, li)[style*="color: #999"],
body.cp-v2 #main .dark :is(p, span, div, strong, small, li)[style*="color: #aaa"] {
  color: var(--cp-on-dark-2) !important;
}
/* Forminator forms on the page (contact) */
body.cp-v2 #main .forminator-ui .forminator-button-submit {
  background-color: var(--cp-accent) !important;
  color: var(--cp-accent-ink) !important;
  border-radius: 2px !important;
  font-family: var(--cp-disp) !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
}
body.cp-v2 #main .forminator-ui .forminator-label {
  color: var(--cp-ink) !important;
  font-family: var(--cp-text) !important;
}