/* =====================================================================================================================
   Cloudster new design — STEP 4, home page structure (draft 3), PRIVATE PREVIEW ONLY.   v1.6.0  2026-10-05
   (v1.2.0: size finder answers = two sizes side by side, each with its own buy buttons;
    v1.4.0: the Mini line on every gun answer, .cpv2h-mini;
    v1.5.0: size-class buttons with their example guns, .cpv2h-chip--class / --gear; .cpv2h-eg removed;
    v1.6.0: the two size cards are identical: no tag, no marked card (.cpv2h-opt--on, .cpv2h-opt-tag, .cpv2h-opt-note
    removed); each card shows the size chart's flat size, .cpv2h-opt-dim. Keith 2026-10-05 ~22:55 PT: customers read
    the explanations and make the determination themselves.)
   Loaded only on the front page, only for a request with the preview key (~/cp-v2/10-home.php enqueues it).
   Styles the four new blocks (size finder, colour tiles + size strip, proof, bundles), the hero rating line, and the
   opened FAQ. Every rule starts with body.cp-v2. Tokens (--cp-*) come from the styling layer cloudster-v2.css.
   Draft: mockups/redesign-v3/t.css (.finder .chips .fab .sizes .proof .score .rev .facts .bun).
   ===================================================================================================================== */

/* ---- shared ------------------------------------------------------------------------------------------------------- */
body.cp-v2 .cpv2h,
body.cp-v2 .cpv2h *,
body.cp-v2 .cpv2h *::before,
body.cp-v2 .cpv2h *::after {
  box-sizing: border-box;
}
body.cp-v2 .cpv2h {
  font-family: var(--cp-text);
  font-size: 16px;
  line-height: 1.55;
  color: var(--cp-body);
}
body.cp-v2 .cpv2h p,
body.cp-v2 .cpv2h ul,
body.cp-v2 .cpv2h li {
  margin: 0;
  padding: 0;
}
body.cp-v2 .cpv2h ul {
  list-style: none;
}
body.cp-v2 .cpv2h li {
  list-style: none;
  margin-left: 0;
}
body.cp-v2 .cpv2h img {
  display: block;
  max-width: 100%;
  margin: 0;
}
body.cp-v2 .cpv2h a.plain {
  text-decoration: none;
  color: inherit;
}
body.cp-v2 .cpv2h-band {
  padding: 40px 0;
}
body.cp-v2 .cpv2h-band--dark {
  background-color: var(--cp-black);
  color: var(--cp-on-dark);
}
body.cp-v2 .cpv2h-band--bone {
  background-color: var(--cp-bone);
}
body.cp-v2 .cpv2h-band--white {
  background-color: #fff;
}
body.cp-v2 .cpv2h-wrap {
  max-width: 1170px;   /* = Flatsome .row: content edges line up with today's sections (15px / 150px at 390 / 1440) */
  margin: 0 auto;
  padding: 0 15px;
}
body.cp-v2 .cpv2h-kick {
  font-family: var(--cp-disp);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.35;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cp-coyote-dk);
}
body.cp-v2 .cpv2h-band--dark .cpv2h-kick {
  color: var(--cp-coyote);
}
body.cp-v2 .cpv2h-head {
  margin-bottom: 20px;
}
body.cp-v2 .cpv2h .cpv2h-h2 {
  font-size: 28px;
  line-height: 1.08;
  margin: 6px 0 0;
  padding: 0;
  color: var(--cp-ink);
}
body.cp-v2 .cpv2h-stars {
  color: var(--cp-star);
  letter-spacing: 2px;
}
body.cp-v2 .cpv2h-band--dark .cpv2h-stars {
  color: var(--cp-star-dk);
}

/* ---- hero: fade the photo's bottom into the finder band (draft 3), one left edge with the blocks below ------------- */
/* The overlay already tints the photo (step 3: rgba(13,15,17,.62)); this adds a gradient on top of that tint so the last
   150 px of the hero end in the band colour, and the size finder sits in one continuous dark area (no seam). */
body.cp-v2.home #content > section:first-of-type .banner .overlay {
  background-image: linear-gradient(180deg, rgba(18, 20, 22, 0) 0, rgba(18, 20, 22, 0) calc(100% - 150px), var(--cp-black) 100%) !important;
}
/* phones (< 550 px; the live mu-plugin cloudster-home-hero-mobile.php makes the text box 92 % wide and centred):
   the hero copy starts at the same 15 px edge as the finder and every block below it */
@media (max-width: 549px) {
  body.cp-v2.home #content > section:first-of-type .banner .text-box {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ---- hero rating line (inside today's hero text box) ------------------------------------------------------------- */
body.cp-v2 .banner p.cpv2h-rate {
  margin: -14px 0 22px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .9);
}
body.cp-v2 .banner p.cpv2h-rate .cpv2h-stars {
  color: var(--cp-star-dk);
  font-size: 14px;
  letter-spacing: 1px;
  margin-right: 4px;
}
body.cp-v2 .banner p.cpv2h-rate .cpv2h-nw {
  white-space: nowrap;
}

/* ---- 1. size finder ------------------------------------------------------------------------------------------------ */
body.cp-v2 .cpv2h-finder-band {
  padding-top: 24px;
}
body.cp-v2 .cpv2h-finder {
  background-color: var(--cp-char);
  border: 1px solid var(--cp-steel);
  border-radius: 4px;
  padding: 18px 16px;
}
body.cp-v2 .cpv2h-finder .cpv2h-q {
  margin-top: 10px;
  margin-bottom: 12px;
  font-family: var(--cp-disp);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}
body.cp-v2 .cpv2h-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.cp-v2 .cpv2h .cpv2h-chip {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  border: 1.5px solid #6b7279 !important;
  border-radius: 2px !important;
  background: transparent !important;
  color: #fff !important;
  font-family: var(--cp-text) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left;
  cursor: pointer;
  box-shadow: none !important;
  width: auto;
  max-width: 100%;
}
body.cp-v2 .cpv2h .cpv2h-chip:hover {
  border-color: #b9bcbf !important;
}
body.cp-v2 .cpv2h .cpv2h-chip[aria-pressed="true"] {
  border-color: var(--cp-accent) !important;
  box-shadow: inset 0 0 0 1px var(--cp-accent) !important;
}
/* v1.5.0: four size-class buttons (Keith 10/05: Full-Size, Compact, Subcompact, Micro-Compact), each with its three
   example guns under the class name, two per row on phones and four in a row from 700 px; the gear button ("Mag
   carrier, tourniquet or small gear") on its own row after them, as wide as its words, as before. */
body.cp-v2 .cpv2h-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.cp-v2 .cpv2h .cpv2h-chip--class {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  padding: 10px 12px 11px !important;
}
body.cp-v2 .cpv2h .cpv2h-chip--gear {
  grid-column: 1 / -1;
  justify-self: start;
}
body.cp-v2 .cpv2h .cpv2h-chip-n {
  display: block;
  font-family: var(--cp-disp);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}
body.cp-v2 .cpv2h .cpv2h-chip-g {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--cp-on-dark-2);
}
body.cp-v2 .cpv2h .cpv2h-chip-g > span {
  display: block;
}
body.cp-v2 .cpv2h .cpv2h-chip--class[aria-pressed="true"] .cpv2h-chip-g {
  color: var(--cp-on-dark);
}
body.cp-v2 .cpv2h-result {
  display: none;            /* .cpv2h-on is printed by the server with the Glock 19 answer */
  margin-top: 16px;
  padding: 16px;
  background-color: #fff;
  border-radius: 3px;
  color: var(--cp-body);
}
body.cp-v2 .cpv2h-result.cpv2h-on {
  display: block;
}
body.cp-v2 .cpv2h-result .cpv2h-size {
  font-family: var(--cp-disp);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cp-mute);
}
/* v1.2.0: two sizes side by side (Keith 10/05: show two, the customer chooses). v1.6.0: each card = size, live price,
   the size chart's flat size, its own buy buttons; both cards built and styled the same (no tag, no marked card). */
body.cp-v2 .cpv2h-result .cpv2h-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
body.cp-v2 .cpv2h-result .cpv2h-opt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--cp-ctl);
  border-radius: 3px;
  background-color: #fff;
}
body.cp-v2 .cpv2h-result .cpv2h-opt-name {
  margin-top: 0;
}
body.cp-v2 .cpv2h-result .cpv2h-opt-name b {
  display: block;
  font-family: var(--cp-disp);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--cp-ink);
  overflow-wrap: anywhere;
}
body.cp-v2 .cpv2h-result .cpv2h-opt-pr {
  display: block;
  margin-top: 2px;
  font-family: var(--cp-disp);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  color: var(--cp-ink);
}
/* v1.6.0: the size chart's flat size (column name, then the chart's own value), the same on both cards */
body.cp-v2 .cpv2h-result .cpv2h-opt-dim {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--cp-ink);
}
body.cp-v2 .cpv2h-result .cpv2h-opt-dim-l {
  display: block;
  font-size: 12.5px;
  color: var(--cp-mute);
}
body.cp-v2 .cpv2h-result .cpv2h-opt-dim-v {
  display: block;
}
body.cp-v2 .cpv2h-result .cpv2h-opt-dim-n {
  white-space: nowrap;   /* "4.5″ × 3.75″" stays together; a narrow card breaks after "about" */
}
body.cp-v2 .cpv2h-result .cpv2h-why,
body.cp-v2 .cpv2h-result .cpv2h-step {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cp-body);
}
body.cp-v2 .cpv2h-result .cpv2h-step {
  padding-left: 10px;
  border-left: 3px solid var(--cp-coyote);
}
body.cp-v2 .cpv2h-result .cpv2h-frame {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cp-body);
}
/* v1.4.0: the Mini line on every gun answer; its link (a tap shows the Mini answer) is 44 px tall like the other links */
body.cp-v2 .cpv2h-result .cpv2h-mini {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cp-body);
}
body.cp-v2 #main .cpv2h-result .cpv2h-mini a.cpv2h-mini-go {
  display: inline-block;
  min-height: 44px;
  padding-top: 11px;
  padding-bottom: 11px;
  line-height: 22px;
  font-weight: 600;
  color: var(--cp-ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
body.cp-v2 .cpv2h-result .cpv2h-buy {
  margin-top: auto;           /* buttons sit at the bottom of each card, level with the other card's */
  padding-top: 10px;
}
body.cp-v2 .cpv2h-result .cpv2h-buy-l {
  font-family: var(--cp-disp);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cp-mute);
  margin-bottom: 6px;
}
body.cp-v2 .cpv2h-result .cpv2h-buy-row {
  display: grid;
  grid-template-columns: 1fr;   /* phones: the three colour buttons stack inside each card */
  gap: 6px;
}
body.cp-v2 .cpv2h .cpv2h-result a.cpv2h-buy-a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 4px;
  border-radius: 2px;
  background-color: var(--cp-accent);
  color: var(--cp-accent-ink) !important;
  font-family: var(--cp-disp);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none !important;
}
body.cp-v2 .cpv2h .cpv2h-result a.cpv2h-buy-a:hover {
  background-color: var(--cp-accent-hover);
}
body.cp-v2 .cpv2h-result .cpv2h-ask {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cp-body);
}
body.cp-v2 #main .cpv2h-result .cpv2h-ask a {
  color: var(--cp-ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
/* the finder's two text links ("Use the full size finder", "Tell us your gun, holster and carry position"): a box of at
   least 44 px tall so they are easy to tap; the underline stays under the words */
body.cp-v2 #main .cpv2h-result .cpv2h-ask a,
body.cp-v2 #main .cpv2h-finder-more a.cpv2h-tap {
  display: inline-block;
  min-height: 44px;
  padding-top: 11px;
  padding-bottom: 11px;
  line-height: 22px;
}
body.cp-v2 .cpv2h-finder-more {
  margin-top: 8px !important;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cp-on-dark-2);
}

/* ---- 2. colour tiles + size strip --------------------------------------------------------------------------------- */
body.cp-v2 .cpv2h-fab {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
body.cp-v2 .cpv2h-fab a {
  display: block;
  height: 100%;
  background-color: #fff;
  border: 1px solid var(--cp-line);
  border-radius: 4px;
  overflow: hidden;
}
body.cp-v2 .cpv2h-fab a:hover {
  border-color: var(--cp-ctl);
}
body.cp-v2 .cpv2h-fab .cpv2h-ph {
  display: block;
  aspect-ratio: 1 / 1;
  background-color: #ddd;
  overflow: hidden;
}
body.cp-v2 .cpv2h-fab .cpv2h-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.cp-v2 .cpv2h-fab .cpv2h-tx {
  display: block;
  padding: 10px 6px 12px;
  text-align: center;
}
body.cp-v2 .cpv2h-fab .cpv2h-tx b {
  display: block;
  font-family: var(--cp-disp);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--cp-ink);
}
body.cp-v2 .cpv2h-fab .cpv2h-tx span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.25;
  color: var(--cp-body);
}
body.cp-v2 .cpv2h-fab .cpv2h-tx i {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-size: 12.5px;
  color: var(--cp-mute);
}
body.cp-v2 .cpv2h-sizes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 14px;
  background-color: #fff;
  border: 1px solid var(--cp-line);
  border-radius: 4px;
  overflow: hidden;
}
body.cp-v2 .cpv2h-sizes li {
  padding: 10px 4px;
  text-align: center;
  border-left: 1px solid var(--cp-line);
}
body.cp-v2 .cpv2h-sizes li:first-child {
  border-left: 0;
}
body.cp-v2 .cpv2h-sizes b {
  display: block;
  font-family: var(--cp-disp);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cp-ink);
}
body.cp-v2 .cpv2h-sizes span {
  font-size: 13px;
  color: var(--cp-mute);
}

/* ---- 3. proof ------------------------------------------------------------------------------------------------------- */
body.cp-v2 .cpv2h-proof {
  display: grid;
  gap: 18px;
}
body.cp-v2 .cpv2h-score {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
body.cp-v2 .cpv2h-score > b {
  font-family: var(--cp-disp);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  color: #fff;
}
body.cp-v2 .cpv2h-score > span {
  font-size: 15px;
  line-height: 1.45;
  color: var(--cp-on-dark);
}
body.cp-v2 .cpv2h-rev {
  background-color: #fff;
  border-radius: 4px;
  padding: 18px 16px;
}
body.cp-v2 .cpv2h-band--dark .cpv2h-rev .cpv2h-stars {
  color: var(--cp-star);
  font-size: 15px;
}
body.cp-v2 .cpv2h-rev .cpv2h-rev-t {
  margin-top: 8px;
  font-family: var(--cp-disp);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--cp-ink);
}
body.cp-v2 .cpv2h-rev .cpv2h-rev-q {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--cp-body);
}
body.cp-v2 .cpv2h-rev .cpv2h-rev-who {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--cp-mute);
}
body.cp-v2 .cpv2h-rev .cpv2h-rev-who b {
  font-weight: 600;
  color: var(--cp-ink);
}
body.cp-v2 .cpv2h-linkline {
  margin-top: 16px !important;
}
body.cp-v2 .cpv2h a.cpv2h-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--cp-disp);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 1.5px solid currentColor;
  padding: 0 0 2px;
  line-height: 1.2;
}
body.cp-v2 .cpv2h a.cpv2h-link > span {
  margin-left: 8px;   /* the arrow: inline-flex drops the space before it */
}
body.cp-v2 .cpv2h a.cpv2h-link:hover {
  color: var(--cp-coyote);
}
body.cp-v2 .cpv2h-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 22px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--cp-steel);
}
body.cp-v2 .cpv2h-facts li {
  text-align: center;
  font-family: var(--cp-disp);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}
body.cp-v2 .cpv2h-facts svg {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto 8px;
  fill: none;
  stroke: var(--cp-coyote);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- 4. bundles ----------------------------------------------------------------------------------------------------- */
body.cp-v2 .cpv2h-bun a {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--cp-line);
}
body.cp-v2 .cpv2h-bun li:first-child a {
  border-top: 0;
}
body.cp-v2 .cpv2h-bun img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 3px;
}
body.cp-v2 .cpv2h-bun .cpv2h-bun-tx b {
  display: block;
  font-family: var(--cp-disp);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--cp-ink);
}
body.cp-v2 .cpv2h-bun .cpv2h-bun-tx small {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--cp-mute);
}
body.cp-v2 .cpv2h-bun .cpv2h-bun-tx small.cpv2h-bun-n {
  margin-top: 2px;
  color: var(--cp-body);
}
body.cp-v2 .cpv2h-bun .cpv2h-pr {
  font-family: var(--cp-disp);
  font-size: 20px;
  font-weight: 600;
  color: var(--cp-ink);
}
body.cp-v2 .cpv2h-bun a:hover .cpv2h-bun-tx b {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- FAQ: every answer open, no plus/minus, a tap does not fold it ------------------------------------------------- */
body.cp-v2 .cp-faq details > summary {
  cursor: default;
  padding-right: 0;
}
body.cp-v2 .cp-faq details > summary::after {
  content: none !important;
}
body.cp-v2 .cp-faq details > summary::-webkit-details-marker {
  display: none;
}

/* ---- tablets and up: wider tiles get a 4:3 picture instead of a tall square ------------------------------------------- */
@media (min-width: 550px) {
  body.cp-v2 .cpv2h-fab .cpv2h-ph {
    aspect-ratio: 4 / 3;
  }
  /* Dark: keep the pillow's stitched top edge against the white background in the shorter 4:3 crop */
  body.cp-v2 .cpv2h-fab .cpv2h-fab-dark .cpv2h-ph img {
    object-position: 50% 20%;
  }
  /* hero copy starts on the content edge (150 px at 1440 wide) like the finder, "Choose your color" and every block
     below, as in draft 3. Flatsome centres this absolute text box with left:50% + translate(-50%,-50%). */
  body.cp-v2.home #content > section:first-of-type .banner .text-box {
    left: 15px !important;
    right: auto !important;
    transform: translateY(-50%) !important;
    max-width: 640px;
  }
  /* the copy now sits on the left half of the photo: darken that side a little more (draft 3 does the same) so the
     text keeps its contrast; the bottom fade is repeated so both gradients apply */
  body.cp-v2.home #content > section:first-of-type .banner .overlay {
    background-image: linear-gradient(180deg, rgba(18, 20, 22, 0) 0, rgba(18, 20, 22, 0) calc(100% - 150px), var(--cp-black) 100%),
      linear-gradient(90deg, rgba(18, 20, 22, .55) 0, rgba(18, 20, 22, .35) 45%, rgba(18, 20, 22, 0) 75%) !important;
  }
}

/* ---- narrow phones (320–374 px): size cards are ~107 px wide, so the size name gets a smaller type ------------------ */
@media (max-width: 374px) {
  body.cp-v2 .cpv2h-result .cpv2h-opt {
    padding: 8px;
  }
  body.cp-v2 .cpv2h-result .cpv2h-opt-dim {
    font-size: 13px;
  }
  body.cp-v2 .cpv2h-result .cpv2h-opt-name b {
    font-size: 18px;
    letter-spacing: .01em;
  }
  body.cp-v2 .cpv2h-result .cpv2h-opt-pr {
    font-size: 17px;
  }
  /* v1.5.0: class buttons are ~124 px wide at 320; "MICRO-COMPACT" stays on one line */
  body.cp-v2 .cpv2h .cpv2h-chip--class {
    padding: 9px 8px 10px !important;
  }
  body.cp-v2 .cpv2h .cpv2h-chip-n {
    font-size: 14px;
    letter-spacing: .02em;
  }
  body.cp-v2 .cpv2h .cpv2h-chip-g {
    font-size: 12.5px;
  }
}

/* ---- wide enough for the three colour buttons in a row inside each size card (cards ≥ ~290 px) ------------------- */
@media (min-width: 700px) {
  /* v1.5.0: the four class buttons in one row */
  body.cp-v2 .cpv2h-chips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body.cp-v2 .cpv2h-result .cpv2h-buy-row {
    grid-template-columns: repeat(3, 1fr);
  }
  body.cp-v2 .cpv2h-result .cpv2h-opt {
    padding: 14px;
  }
  body.cp-v2 .cpv2h-result .cpv2h-opt-name b {
    display: inline;
    font-size: 26px;
  }
  body.cp-v2 .cpv2h-result .cpv2h-opt-pr {
    display: inline;
    margin-left: 10px;
    font-size: 20px;
  }
}

/* ---- computer screens ---------------------------------------------------------------------------------------------- */
@media (min-width: 900px) {
  body.cp-v2 .cpv2h-band {
    padding: 72px 0;
  }
  body.cp-v2 .cpv2h-finder-band {
    padding-top: 24px;
    padding-bottom: 56px;
  }
  body.cp-v2 .cpv2h .cpv2h-h2 {
    font-size: 40px;
  }
  body.cp-v2 .cpv2h-finder {
    padding: 22px 24px;
  }
  body.cp-v2 .cpv2h-result {
    max-width: 640px;
  }
  body.cp-v2 .cpv2h-fab {
    gap: 20px;
  }
  body.cp-v2 .cpv2h-fab .cpv2h-ph {
    aspect-ratio: 4 / 3;
  }
  body.cp-v2 .cpv2h-fab .cpv2h-tx b {
    font-size: 22px;
  }
  body.cp-v2 .cpv2h-fab .cpv2h-tx span {
    font-size: 15px;
  }
  body.cp-v2 .cpv2h-fab .cpv2h-tx i {
    font-size: 13.5px;
  }
  body.cp-v2 .cpv2h-sizes b {
    font-size: 15px;
  }
  body.cp-v2 .cpv2h-sizes span {
    font-size: 14px;
  }
  body.cp-v2 .cpv2h-proof {
    grid-template-columns: 1fr 1.3fr;
    gap: 48px;
    align-items: center;
  }
  body.cp-v2 .cpv2h-score > b {
    font-size: 64px;
  }
  body.cp-v2 .cpv2h-facts {
    max-width: 720px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.cp-v2 .cpv2h-bun {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  body.cp-v2 .cpv2h-bun a {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0 0 18px;
    text-align: center;
    background-color: #fff;
    border: 1px solid var(--cp-line);
    border-radius: 4px;
    overflow: hidden;
  }
  body.cp-v2 .cpv2h-bun li:first-child a {
    border-top: 1px solid var(--cp-line);
  }
  body.cp-v2 .cpv2h-bun img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 0;
    margin-bottom: 6px;
  }
  body.cp-v2 .cpv2h-bun .cpv2h-bun-tx,
  body.cp-v2 .cpv2h-bun .cpv2h-pr {
    padding: 0 14px;
  }
  body.cp-v2 .cpv2h-bun .cpv2h-bun-tx b {
    font-size: 20px;
  }
  body.cp-v2 .cpv2h-bun .cpv2h-pr {
    font-size: 22px;
  }
}