html[data-site="commercialicemakers"] {
	--color-brand-50: #f6faff;
	--color-brand-100: #eef6ff;
	--color-brand-200: #d6ebff;
	--color-brand-300: #b5d9fd;
	--color-brand-400: #94bce3;
	--color-brand-500: #5980a6;
	--color-brand-600: #416180;
	--color-brand-700: #2c455d;
	--color-brand-800: #1d2d3d;
	--color-brand-900: #141f2a;
	--color-brand-950: #0b1118;
	--ui-color-secondary-50: var(--color-brand-50);
	--ui-color-secondary-100: var(--color-brand-100);
	--ui-color-secondary-200: var(--color-brand-200);
	--ui-color-secondary-300: var(--color-brand-300);
	--ui-color-secondary-400: var(--color-brand-400);
	--ui-color-secondary-500: var(--color-brand-500);
	--ui-color-secondary-600: var(--color-brand-600);
	--ui-color-secondary-700: var(--color-brand-700);
	--ui-color-secondary-800: var(--color-brand-800);
	--ui-color-secondary-900: var(--color-brand-900);
	--ui-color-secondary-950: var(--color-brand-950);
	--ui-color-neutral-50: oklch(98.5% 0 none);
	--ui-color-neutral-100: oklch(97% 0 none);
	--ui-color-neutral-200: oklch(92.2% 0 none);
	--ui-color-neutral-300: oklch(87% 0 none);
	--ui-color-neutral-400: oklch(70.8% 0 none);
	--ui-color-neutral-500: oklch(55.6% 0 none);
	--ui-color-neutral-600: oklch(43.9% 0 none);
	--ui-color-neutral-700: oklch(37.1% 0 none);
	--ui-color-neutral-800: oklch(26.9% 0 none);
	--ui-color-neutral-900: oklch(20.5% 0 none);
	--ui-color-neutral-950: oklch(14.5% 0 none);
	--ui-color-success-50: #f4f9f6;
	--ui-color-success-100: #e8f3ee;
	--ui-color-success-200: #bee0cc;
	--ui-color-success-300: #88c29f;
	--ui-color-success-400: #4f9d6c;
	--ui-color-success-500: #297d0b;
	--ui-color-success-600: #226a09;
	--ui-color-success-700: #1b5607;
	--ui-color-success-800: #154305;
	--ui-color-success-900: #0e2f04;
	--ui-color-success-950: #081c02;
	--ui-color-warning-50: #fffdfa;
	--ui-color-warning-100: #fef9f3;
	--ui-color-warning-200: #fcf1e2;
	--ui-color-warning-300: #faedd9;
	--ui-color-warning-400: #f6d9a8;
	--ui-color-warning-500: #f0bc66;
	--ui-color-warning-600: #e09f33;
	--ui-color-warning-700: #b57e22;
	--ui-color-warning-800: #875c19;
	--ui-color-warning-900: #593d11;
	--ui-color-warning-950: #2c1e08;
	--ui-color-error-50: #fdf2f2;
	--ui-color-error-100: #fbe5e6;
	--ui-color-error-200: #f5c0c2;
	--ui-color-error-300: #ed8f93;
	--ui-color-error-400: #de5359;
	--ui-color-error-500: #c51e26;
	--ui-color-error-600: #a8191f;
	--ui-color-error-700: #8a1419;
	--ui-color-error-800: #6b1013;
	--ui-color-error-900: #4d0b0e;
	--ui-color-error-950: #2e0608;
	--sf-link: #1d1f20;
	--font-sans: Arial, Helvetica, sans-serif;
	--font-heading: Arial, Helvetica, sans-serif;
	--ui-radius: 0;
	--ui-container: var(--container-7xl);
	--sf-page-width: var(--container-7xl);
	--sf-utility-bar-bg: #eef6ff;
	--sf-nav-bg: #ffffff;
	--sf-footer-bg: #f5f5f8;
}
html[data-site="commercialicemakers"] [data-surface="footer"] {
	--ui-text: #1d1f20;
	--ui-text-toned: #1d1f20;
	--ui-text-muted: #1d1f20;
	--ui-text-highlighted: #1d1f20;
}
@charset "UTF-8";
/*
 * The site's own styles (SPEC-078): what commercialicemakers draws differently from the engine — the
 * engine's components as CRM's v7 theme of the site draws them, and the site's own components. The
 * end of the style sheet of the site's theme (`/_theme/<hash>.css`, modules/site-styles.js), so no
 * other site loads a byte of it.
 *
 * The style sheet of a theme is linked before the engine's own, so every rule here stands inside
 * `html[data-site]` — a class and an element heavier than the rule of the engine it draws over — and
 * wins as it would coming after it.
 */
html[data-site=commercialicemakers] {
  --sf-price: #1d1f20;
  --site-rule: color-mix(in srgb, #1d1f20 11%, transparent);
  --site-column: 1360px;
  --sf-page-width: var(--site-column);
  --ui-container: var(--site-column);
  /*
   * The page of the site (SPEC-083): the bands of the new design — the line over the header, the header,
   * the menu, the footer — run the whole width of any window, their content in the column of the site
   * (`--site-column`, index.scss), and so does every page: the home page, a listing, a product. The
   * buttons and fields keep the theme's square corners.
   */
}
html[data-site=commercialicemakers] .layout-page {
  width: 100%;
  overflow-x: clip;
}
html[data-site=commercialicemakers] {
  /* the bands of the home page one gap apart, the same everywhere: 72px on a wide screen, 48px on a
     narrow one; the gap opens the page under the menu and closes it over the footer too. A band's head
     — the line over its heading, the heading, the link at the end of its line — stands 24px over it */
}
html[data-site=commercialicemakers] .layout-main:has(> .home-opening) {
  --site-band-gap: 48px;
  row-gap: var(--site-band-gap);
  padding-block: 40px var(--site-band-gap);
}
@media (width >= 64rem) {
  html[data-site=commercialicemakers] .layout-main:has(> .home-opening) {
    --site-band-gap: 72px;
  }
}
html[data-site=commercialicemakers] {
  /* a text written in the bands of CRM's v7 — a band that keeps its own clamped gutter, a map with a card
     over it — runs the whole width of the window, as on CRM's own page; a text of plain blocks keeps the
     column. Closing the page, it sits on the footer, as a band of the whole width does (SPEC-078 REQ-013) */
}
html[data-site=commercialicemakers] .layout-main > .rich-text:has(.container-clamped, .google-map-cover) {
  grid-column: full;
}
html[data-site=commercialicemakers] .layout-main > .rich-text:has(.container-clamped, .google-map-cover):last-child {
  margin-bottom: -4rem;
}
html[data-site=commercialicemakers] {
  /* the headings of a text page — a policy, the terms — as CRM's theme of the site sets them: `h2` 16px
     and `h3` 13px, in medium weight, at every width. The page reads in sections: a heading stands further
     from the text over it than from its own, a section (`h2`) more than its parts (`h3`), where CRM puts
     10px over them (the owner's decision, 2026-11-03). The description of the home page, a text of bands,
     keeps its own gap (_home.scss) */
}
html[data-site=commercialicemakers] .layout-main > .cms-body:not(.home-intro) > :is(h2, h3) {
  color: #202020;
  font-weight: 500;
  line-height: 1.2;
}
html[data-site=commercialicemakers] .layout-main > .cms-body:not(.home-intro) > h2 {
  font-size: 16px;
}
html[data-site=commercialicemakers] .layout-main > .cms-body:not(.home-intro) > h3 {
  font-size: 13px;
}
html[data-site=commercialicemakers] .layout-main > .cms-body:not(.home-intro) > h2:not(:first-child) {
  margin-top: 2rem;
}
html[data-site=commercialicemakers] .layout-main > .cms-body:not(.home-intro) > h3:not(:first-child) {
  margin-top: 1.25rem;
}
html[data-site=commercialicemakers] {
  /*
   * The header of the site (SPEC-083 REQ-001 … REQ-003), as the new design draws it: a pale blue line of
   * 36px with the promises of the shop and, at its end, the hours and the phone, 13px in the design's
   * dark blue; a white row with the logo, a square search field 36px high with its blue button of a
   * magnifier, «Account» and the cart in a frame with its blue count; the menu under it a cell per
   * department, 48px high, dividers between them, the open one blue with white words.
   */
  /* every row of the header in the column of the site, centred in the window: the line over it, the row
     of the logo and the cells of the menu */
}
html[data-site=commercialicemakers] .layout-header-utility-row,
html[data-site=commercialicemakers] .layout-header-bar,
html[data-site=commercialicemakers] .layout-header .layout-menu-nav > .layout-menu-list {
  box-sizing: content-box;
  max-width: var(--site-column);
  margin-inline: auto;
}
html[data-site=commercialicemakers] {
  /* the line and the row of the logo 16px in from a narrow window and on the edge of the column in a wide
     one, as the menu, the page and the footer are — and as tall as the design draws them, 36px and 74px,
     the same as the theme of CRM draws them on the cart and the account (commercialicemakers.com,
     _storefront-design.scss) */
}
html[data-site=commercialicemakers] .layout-header-utility-row,
html[data-site=commercialicemakers] .layout-header-bar {
  box-sizing: border-box;
  max-width: calc(var(--site-column) + 32px);
  padding-inline: 16px;
}
@media (width >= 64rem) {
  html[data-site=commercialicemakers] .layout-header-utility-row,
  html[data-site=commercialicemakers] .layout-header-bar {
    padding-block: 0;
  }
}
html[data-site=commercialicemakers] {
  /* the line over the header */
}
html[data-site=commercialicemakers] .layout-header-utility {
  border-bottom: 1px solid var(--site-rule);
  color: #1d2d3d;
  font-size: 13px;
}
html[data-site=commercialicemakers] {
  /* the hours and the phone at the end of the line, whether or not the promises stand before them */
}
html[data-site=commercialicemakers] .layout-header-utility-row {
  min-height: 36px;
  justify-content: flex-end;
  gap: 0 24px;
}
html[data-site=commercialicemakers] {
  /* the promises of the shop, the site's content block, a line of words with 24px between them */
}
html[data-site=commercialicemakers] .layout-header-utility .content-block ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-site=commercialicemakers] .layout-header-utility .content-block {
  margin-inline-end: auto;
}
html[data-site=commercialicemakers] {
  /* the hours in one line, a dot between the days, and the phone after them in bold, no icon */
}
html[data-site=commercialicemakers] .layout-header-utility .layout-footer-hours-list.is-inline .layout-footer-hours-entry + .layout-footer-hours-entry::before {
  margin-inline-end: 0.5rem;
  content: "·";
}
html[data-site=commercialicemakers] .layout-header-phone {
  color: #1d2d3d;
  font-weight: 600;
}
html[data-site=commercialicemakers] .layout-header-phone > .ui-icon {
  display: none;
}
html[data-site=commercialicemakers] {
  /* the row of the logo: the logo as wide as itself, the search right after it */
}
html[data-site=commercialicemakers] .layout-header-bar {
  min-height: 74px;
  gap: 0 32px;
}
html[data-site=commercialicemakers] .layout-header-logo {
  flex-grow: 0;
}
html[data-site=commercialicemakers] {
  /* the search: a square field 36px high with a hairline, its button of a magnifier a blue square at
     its end */
}
@media (width >= 48rem) {
  html[data-site=commercialicemakers] .layout-header .quick-search {
    max-width: 640px;
    flex: 1 1 auto;
    margin-inline-end: auto;
  }
}
html[data-site=commercialicemakers] .layout-header .quick-search .ui-input-control {
  height: 36px;
  min-height: 36px;
  padding-inline: 10px 58px;
  border: 1px solid var(--site-rule);
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
}
html[data-site=commercialicemakers] .layout-header .quick-search .ui-input-trailing {
  inset-inline-end: 0;
  padding: 0;
}
html[data-site=commercialicemakers] .layout-header .quick-search .ui-input-trailing .ui-button {
  display: flex;
  width: 48px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  background-color: var(--ui-primary);
  color: #fff;
}
html[data-site=commercialicemakers] {
  /* the magnifier white, 18px, in the middle of its square */
}
html[data-site=commercialicemakers] .layout-header .quick-search .ui-input-trailing .ui-button .ui-icon {
  width: 18px;
  height: 18px;
  color: #fff;
}
html[data-site=commercialicemakers] .layout-header .quick-search .ui-input-trailing .ui-button:hover {
  background-color: var(--color-brand-600);
}
html[data-site=commercialicemakers] {
  /* «Account» and «Cart» written beside their icons, bold 16px — the word of the control where it is a
     word: «Account» for a visitor not signed in, the customer's name for one who is (the title of the
     dropdown); the cart in a frame with its count a blue square after the word. The blocks stay the
     engine's, so the session fragment draws them again for the visitor looking */
}
html[data-site=commercialicemakers] .layout-header .header-account :is(a.ui-button, .ui-dropdown-trigger),
html[data-site=commercialicemakers] .layout-header .header-cart .layout-header-cart {
  gap: 8px;
  color: var(--ui-text-highlighted);
  font-size: 16px;
  font-weight: 700;
}
html[data-site=commercialicemakers] .layout-header .header-cart .layout-header-cart {
  padding: 6px 12px;
  border: 1px solid var(--site-rule);
  border-radius: 0;
}
html[data-site=commercialicemakers] .layout-header :is(.header-account a.ui-button, .header-account .ui-dropdown-trigger, .header-cart .layout-header-cart)::after {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-site=commercialicemakers] .layout-header .header-account a.ui-button::after {
  content: "Account";
}
html[data-site=commercialicemakers] .layout-header .header-account .ui-dropdown-trigger::after {
  content: attr(title);
}
html[data-site=commercialicemakers] .layout-header .header-cart .layout-header-cart::after {
  content: "Cart";
}
html[data-site=commercialicemakers] {
  /* on a phone the row holds the menu button, the logo and both icons: the words would push the cart
     onto a row of its own */
}
@media (width < 48rem) {
  html[data-site=commercialicemakers] .layout-header-bar {
    gap: 0 12px;
  }
  html[data-site=commercialicemakers] .layout-header :is(.header-account a.ui-button, .header-account .ui-dropdown-trigger, .header-cart .layout-header-cart)::after {
    content: none;
  }
}
html[data-site=commercialicemakers] .layout-header .header-cart .layout-header-cart > .ui-badge,
html[data-site=commercialicemakers] .layout-header .header-cart .layout-header-cart:not(:has(> .ui-badge))::before {
  order: 1;
  min-width: 20px;
  border-radius: 0;
  background-color: var(--ui-primary);
  color: #fff;
}
html[data-site=commercialicemakers] {
  /* an empty cart says so, as the design draws it: a count of 0 where the badge of a full one stands */
}
html[data-site=commercialicemakers] .layout-header .header-cart .layout-header-cart:not(:has(> .ui-badge))::before {
  padding-inline: 6px;
  content: "0";
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}
html[data-site=commercialicemakers] {
  /* the menu: a cell per department across the column, 48px high, dividers between them and a hairline
     under them; the words 14px semibold with a chevron, the department whose panel is open blue with
     white words */
}
@media (width >= 64rem) {
  html[data-site=commercialicemakers] .layout-header .layout-menu-nav {
    border-top: 1px solid var(--site-rule);
    border-bottom: 1px solid var(--site-rule);
  }
  html[data-site=commercialicemakers] .layout-header .layout-menu-nav .layout-menu-item {
    border-left: 1px solid var(--site-rule);
  }
  html[data-site=commercialicemakers] .layout-header .layout-menu-nav .layout-menu-item:last-child {
    border-right: 1px solid var(--site-rule);
  }
  html[data-site=commercialicemakers] .layout-header .layout-menu-nav .layout-menu-link {
    height: 48px;
    padding: 13px 14px;
    color: var(--ui-text-highlighted);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
  }
  html[data-site=commercialicemakers] .layout-header .layout-menu-nav .layout-menu-item:is(:hover, :focus-within) > .layout-menu-link {
    background-color: var(--ui-primary);
    color: #fff;
  }
}
html[data-site=commercialicemakers] {
  /* the drawer of a phone: an item of a department with a picture shows it as a thumbnail before its
     name (the owner) — the picture is lazy, so it loads when its department opens */
}
@media (width < 64rem) {
  html[data-site=commercialicemakers] .layout-header .layout-menu-panel.is-cards > a {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  html[data-site=commercialicemakers] .layout-header .layout-menu-panel.is-cards > a > img {
    display: block;
    width: 56px;
    height: 42px;
    flex: none;
    background-color: #f5f5f8;
    object-fit: contain;
  }
}
html[data-site=commercialicemakers] {
  /* on a phone the header starts at once: the line over it is for a wide screen — as the theme of CRM draws
     the cart and the account (commercialicemakers.com, _storefront-design.scss) */
}
@media (width < 48rem) {
  html[data-site=commercialicemakers] .layout-header-utility {
    display: none;
  }
}
html[data-site=commercialicemakers] {
  /*
   * The footer (SPEC-083 REQ-004), as the new design draws it: on the light grey of the theme, in the
   * column of the site, the logo over the email, the phone, the address and the hours; beside it
   * the columns of CRM's menus under a heading of 16px bold, their links 14px; under them a hairline
   * and a bar with the copyright at its start and the links of the policies at its end, 13px grey.
   */
}
html[data-site=commercialicemakers] .layout-footer-inner,
html[data-site=commercialicemakers] .layout-footer-bottom {
  box-sizing: content-box;
  max-width: var(--site-column);
  margin-inline: auto;
}
html[data-site=commercialicemakers] .layout-footer-inner {
  gap: 32px;
  padding-block: 48px;
}
html[data-site=commercialicemakers] {
  /* from a wide screen up, the contact column and the three columns of the menus on one grid — the same
     the theme of CRM lays its footer out on (commercialicemakers.com, _storefront-design.scss) */
}
@media (width >= 64rem) {
  html[data-site=commercialicemakers] .layout-footer-inner {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  }
}
html[data-site=commercialicemakers] {
  /* the contact column: the lines without their icons and labels, as the design writes them */
}
html[data-site=commercialicemakers] .layout-footer-contact {
  font-size: 14px;
}
html[data-site=commercialicemakers] .layout-footer-contact-line > svg,
html[data-site=commercialicemakers] .layout-footer-contact-label {
  display: none;
}
html[data-site=commercialicemakers] .layout-footer-column-title {
  color: var(--ui-text-highlighted);
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
}
html[data-site=commercialicemakers] .layout-footer-column-link {
  color: var(--ui-text-highlighted);
  font-size: 14px;
}
html[data-site=commercialicemakers] .layout-footer-column-link:hover {
  color: var(--ui-primary);
}
html[data-site=commercialicemakers] {
  /* the bar: a hairline over it, the copyright at its start and the policies at its end */
}
html[data-site=commercialicemakers] .layout-footer-bottom {
  justify-content: space-between;
  padding-block: 20px;
  border-top: 1px solid var(--site-rule);
  color: var(--ui-text-muted);
  font-size: 13px;
}
html[data-site=commercialicemakers] .layout-footer-bottom .layout-header-menu-links {
  gap: 20px;
}
html[data-site=commercialicemakers] .layout-footer-bottom a {
  color: var(--ui-text-highlighted);
}
html[data-site=commercialicemakers] {
  /* the heading of a column is the word alone: no rule under it, 16px over its links */
}
html[data-site=commercialicemakers] .layout-footer-column-title {
  margin-bottom: 16px;
}
html[data-site=commercialicemakers] .layout-footer-column-title::after {
  display: none;
}
html[data-site=commercialicemakers] {
  /* on a phone the links of the bar wrap under the copyright instead of running off the window */
}
html[data-site=commercialicemakers] .layout-footer-bottom,
html[data-site=commercialicemakers] .layout-footer-bottom .layout-header-menu-links {
  flex-wrap: wrap;
  row-gap: 8px;
}
html[data-site=commercialicemakers] {
  /*
   * The bands of the home page that are CRM's content blocks of the site (SPEC-083 REQ-012), drawn as
   * the new design draws them: «Why buy from us» — the words and the showroom on the left, six cards in
   * two columns on the right — and «Outfitting multiple locations?» — the words and what a trade account
   * gets beside the form of a volume quote, in one hairline frame (`<ContactPanel>` of the template).
   * The blocks are the editor's markup (`why-us*`, `multi-location*`); the text styles of the engine's
   * rich text are put back to the design's, and the icons the design draws beside them are the site's own
   * (_icons.scss).
   */
  /*
   * The icons the new design draws beside the words of its bands (SPEC-083): lucide's outlines, the set
   * of the engine, as masks the colour of the text. A site's template cannot name an icon of the engine
   * — the set is compiled with the build, and a site is published without one — so the icons of the
   * bands that are CRM's content blocks and the engine's blocks are the site's own styles.
   */
  /* the icon as a box of the text's colour: a pseudo-element's whole content */
}
html[data-site=commercialicemakers] .why-us,
html[data-site=commercialicemakers] .multi-location {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--ui-text-highlighted);
  font-size: 15px;
  line-height: 1.55;
}
html[data-site=commercialicemakers] .why-us :where(h2, h3, p, ul),
html[data-site=commercialicemakers] .multi-location :where(h2, h3, p, ul) {
  margin: 0;
}
html[data-site=commercialicemakers] .why-us h2,
html[data-site=commercialicemakers] .multi-location h2 {
  color: var(--ui-text-highlighted);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}
html[data-site=commercialicemakers] .why-us > p:not([class]),
html[data-site=commercialicemakers] .why-us .why-us-intro > p:not([class]),
html[data-site=commercialicemakers] .multi-location > p:not([class]),
html[data-site=commercialicemakers] .multi-location .why-us-intro > p:not([class]) {
  max-width: 420px;
  color: color-mix(in srgb, var(--ui-text-highlighted) 80%, transparent);
}
html[data-site=commercialicemakers] .why-us ul,
html[data-site=commercialicemakers] .multi-location ul {
  display: grid;
  padding: 0;
  gap: 10px;
  list-style: none;
}
html[data-site=commercialicemakers] .why-us-eyebrow,
html[data-site=commercialicemakers] .multi-location-eyebrow {
  color: #416180;
  font-size: 13px;
  font-weight: 700;
}
html[data-site=commercialicemakers] {
  /* «Why buy from us»: two halves 48px apart; the cards two by two, 24px apart, each in a hairline */
}
html[data-site=commercialicemakers] .why-us {
  display: grid;
  gap: 48px;
}
html[data-site=commercialicemakers] .why-us-intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
html[data-site=commercialicemakers] {
  /* the showroom and the service calls, each after its icon in the brand's blue */
}
html[data-site=commercialicemakers] .why-us .why-us-facts li {
  display: flex;
  align-items: center;
  gap: 10px;
}
html[data-site=commercialicemakers] .why-us .why-us-facts li::before {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentcolor;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<path d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/><circle cx='12' cy='10' r='3'/>%3C/svg%3E") center/contain no-repeat;
  color: var(--ui-primary);
}
html[data-site=commercialicemakers] .why-us .why-us-facts li:nth-child(2)::before {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentcolor;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<circle cx='12' cy='12' r='10'/><path d='M12 6v6l4 2'/>%3C/svg%3E") center/contain no-repeat;
}
html[data-site=commercialicemakers] .why-us .why-us-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
html[data-site=commercialicemakers] .why-us .why-us-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid var(--site-rule);
  color: var(--ui-text-highlighted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
html[data-site=commercialicemakers] .why-us .why-us-actions a:first-child {
  border-color: var(--ui-primary);
  background-color: var(--ui-primary);
  color: #fff;
}
html[data-site=commercialicemakers] .why-us .why-us-actions a:hover {
  border-color: var(--color-brand-600);
}
html[data-site=commercialicemakers] .why-us .why-us-actions a:first-child:hover {
  background-color: var(--color-brand-600);
}
html[data-site=commercialicemakers] .why-us .why-us-actions a:first-child::before {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentcolor;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/>%3C/svg%3E") center/contain no-repeat;
}
html[data-site=commercialicemakers] .why-us .why-us-cards {
  gap: 24px;
}
html[data-site=commercialicemakers] .why-us .why-us-cards li {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--site-rule);
  gap: 10px;
}
html[data-site=commercialicemakers] .why-us .why-us-cards {
  /* each promise under its icon, in the order the editor wrote them */
}
html[data-site=commercialicemakers] .why-us .why-us-cards li::before {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  background-color: currentcolor;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<path d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/><circle cx='7.5' cy='7.5' r='.5'/>%3C/svg%3E") center/contain no-repeat;
  margin-bottom: 4px;
  color: var(--ui-primary);
}
html[data-site=commercialicemakers] .why-us .why-us-cards li:nth-child(2)::before {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  background-color: currentcolor;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/>%3C/svg%3E") center/contain no-repeat;
}
html[data-site=commercialicemakers] .why-us .why-us-cards li:nth-child(3)::before {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  background-color: currentcolor;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/><path d='m9 12 2 2 4-4'/>%3C/svg%3E") center/contain no-repeat;
}
html[data-site=commercialicemakers] .why-us .why-us-cards li:nth-child(4)::before {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  background-color: currentcolor;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<rect width='20' height='14' x='2' y='5' rx='2'/><path d='M2 10h20'/>%3C/svg%3E") center/contain no-repeat;
}
html[data-site=commercialicemakers] .why-us .why-us-cards li:nth-child(5)::before {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  background-color: currentcolor;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<path d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2m10 0H9m10 0h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/><circle cx='17' cy='18' r='2'/><circle cx='7' cy='18' r='2'/>%3C/svg%3E") center/contain no-repeat;
}
html[data-site=commercialicemakers] .why-us .why-us-cards li:nth-child(6)::before {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  background-color: currentcolor;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<rect width='16' height='20' x='4' y='2' rx='2'/><path d='M8 6h8M16 14v4M16 10h.01M12 10h.01M8 10h.01M12 14h.01M8 14h.01M12 18h.01M8 18h.01'/>%3C/svg%3E") center/contain no-repeat;
}
html[data-site=commercialicemakers] .why-us .why-us-cards h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}
html[data-site=commercialicemakers] .why-us .why-us-cards p {
  font-size: 14px;
  line-height: 1.5;
}
@media (width >= 40rem) {
  html[data-site=commercialicemakers] .why-us .why-us-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width >= 64rem) {
  html[data-site=commercialicemakers] .why-us {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
html[data-site=commercialicemakers] {
  /* what a trade account gets, each line after a tick of the brand */
}
html[data-site=commercialicemakers] .multi-location ul li {
  display: flex;
  gap: 10px;
}
html[data-site=commercialicemakers] .multi-location ul li::before {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentcolor;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<path d='M20 6 9 17l-5-5'/>%3C/svg%3E") center/contain no-repeat;
  margin-top: 4px;
  color: var(--ui-primary);
}
html[data-site=commercialicemakers] {
  /* «Outfitting multiple locations?»: the words and the form in one hairline frame, a hairline between
     them, 48px inside each half */
}
html[data-site=commercialicemakers] .contact-panel:has(.multi-location) {
  gap: 0;
  border: 1px solid var(--site-rule);
}
html[data-site=commercialicemakers] .contact-panel:has(.multi-location) > * {
  padding: 32px 24px;
}
html[data-site=commercialicemakers] .contact-panel:has(.multi-location) .contact-panel-form {
  border-top: 1px solid var(--site-rule);
}
html[data-site=commercialicemakers] .contact-panel:has(.multi-location) .multi-location > p:not([class]) {
  font-size: 16px;
}
@media (width >= 64rem) {
  html[data-site=commercialicemakers] .contact-panel:has(.multi-location) > * {
    padding: 48px;
  }
  html[data-site=commercialicemakers] .contact-panel:has(.multi-location) .contact-panel-form {
    border-top: 0;
    border-left: 1px solid var(--site-rule);
  }
}
html[data-site=commercialicemakers] {
  /* the form of a volume quote: labels 13px over square hairline fields, the button the width of the
     form */
}
html[data-site=commercialicemakers] .contact-panel .site-form .ui-input-control,
html[data-site=commercialicemakers] .contact-panel .site-form textarea,
html[data-site=commercialicemakers] .contact-panel .site-form select {
  border-radius: 0;
  box-shadow: none;
  outline: 1px solid var(--site-rule);
}
html[data-site=commercialicemakers] .contact-panel .site-form .form-submit {
  width: 100%;
  border-radius: 0;
  font-weight: 700;
}
html[data-site=commercialicemakers] {
  /*
   * The icons the new design draws beside the words of its bands (SPEC-083): lucide's outlines, the set
   * of the engine, as masks the colour of the text. A site's template cannot name an icon of the engine
   * — the set is compiled with the build, and a site is published without one — so the icons of the
   * bands that are CRM's content blocks and the engine's blocks are the site's own styles.
   */
  /* the icon as a box of the text's colour: a pseudo-element's whole content */
  /*
   * The bands of the home page (SPEC-083 REQ-005 … REQ-012), as the new design draws them: every band
   * headed the same way — a line in the brand's dark blue over a heading of 28px, a link at the end of the
   * line — the opening band with its large buttons, the figures under their icons, the cards of the
   * featured catalogs, the featured machines with their tabs, the cooling beside the table of the daily
   * production, the brands by name and the showroom. The figures and the table are the site's content
   * blocks (`homeStats`, `homeCapacity`): the editor's markup, laid out here whole.
   */
  /* the head of a band */
}
html[data-site=commercialicemakers] :is(.category-cards-eyebrow, .capacity-table-eyebrow, .home-featured-eyebrow, .home-brands-eyebrow, .home-opening-eyebrow) {
  margin-bottom: 6px;
  color: #416180;
  font-size: 13px;
  font-weight: 700;
}
html[data-site=commercialicemakers] :is(.category-cards-title, .capacity-table-title, .home-featured-title, .home-brands.is-names .home-brands-title) {
  color: var(--ui-text-highlighted);
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  text-align: start;
  text-transform: none;
}
html[data-site=commercialicemakers] .category-cards-more {
  color: #416180;
  font-size: 15px;
}
html[data-site=commercialicemakers] {
  /* the opening band: a heading of 44px over a text of 17px, and its two buttons the large ones of the
     design */
}
html[data-site=commercialicemakers] .home-opening-title {
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.1;
}
html[data-site=commercialicemakers] .home-opening-text {
  font-size: 17px;
  line-height: 1.45;
}
html[data-site=commercialicemakers] .home-opening-actions .ui-button {
  padding: 14px 24px;
  border-radius: 0;
  font-size: 16px;
  font-weight: 700;
}
html[data-site=commercialicemakers] {
  /* the figures (the content block homeStats): a row of cells in one hairline frame, each centred, after
     an icon in the brand's blue — one under the other on a narrow window */
}
html[data-site=commercialicemakers] .catalog-stats {
  display: grid;
  border: 1px solid var(--ui-border);
}
html[data-site=commercialicemakers] .catalog-stats-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  border-top: 1px solid var(--ui-border);
  gap: 12px;
}
html[data-site=commercialicemakers] .catalog-stats-cell:first-child {
  border-top: 0;
}
@media (width >= 64rem) {
  html[data-site=commercialicemakers] .catalog-stats {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }
  html[data-site=commercialicemakers] .catalog-stats-cell {
    border-top: 0;
    border-left: 1px solid var(--ui-border);
  }
  html[data-site=commercialicemakers] .catalog-stats-cell:first-child {
    border-left: 0;
  }
}
html[data-site=commercialicemakers] .catalog-stats-label {
  color: var(--ui-text-muted);
  font-size: 14px;
  line-height: 20px;
}
html[data-site=commercialicemakers] .catalog-stats-cell::before {
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
  background-color: currentcolor;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<circle cx='12' cy='8' r='6'/><path d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/>%3C/svg%3E") center/contain no-repeat;
  align-self: center;
  color: var(--ui-primary);
}
html[data-site=commercialicemakers] .catalog-stats-cell:nth-child(2)::before {
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
  background-color: currentcolor;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<path d='M2 12h20M12 2v20m8-6-4-4 4-4M4 8l4 4-4 4M16 4l-4 4-4-4M8 20l4-4 4 4'/>%3C/svg%3E") center/contain no-repeat;
}
html[data-site=commercialicemakers] .catalog-stats-cell:nth-child(3)::before {
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
  background-color: currentcolor;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E<circle cx='12' cy='12' r='10'/><path d='M12 6v6l4 2'/>%3C/svg%3E") center/contain no-repeat;
}
html[data-site=commercialicemakers] .catalog-stats-figure {
  color: var(--ui-text-highlighted);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.33;
}
html[data-site=commercialicemakers] {
  /* the cards of the featured catalogs: the picture beside the words 140px wide, the name 17px; over them,
     one row of six, the name 20px; as a list, the name 17px over a muted line and the links of the tile */
}
html[data-site=commercialicemakers] .home-category-card.is-row .home-category-card-cover {
  width: 140px;
}
html[data-site=commercialicemakers] .home-category-card.is-row .home-category-card-title,
html[data-site=commercialicemakers] .home-category-card.is-list .home-category-card-title {
  font-size: 17px;
}
html[data-site=commercialicemakers] .home-category-card.is-column .home-category-card-title {
  font-size: 20px;
}
html[data-site=commercialicemakers] .home-category-card-text {
  font-size: 14px;
  line-height: 1.45;
}
html[data-site=commercialicemakers] .home-category-card.is-list .home-category-card-link {
  font-size: 15px;
}
html[data-site=commercialicemakers] .home-category-card.is-column .home-category-card-count {
  color: #416180;
  font-weight: 700;
}
html[data-site=commercialicemakers] {
  /* the cooling beside the table of the daily production, from a wide screen up: the column of the page
     in two halves 40px apart */
}
@media (width >= 64rem) {
  html[data-site=commercialicemakers] .layout-main:has(> .home-opening) {
    grid-template-columns: [full-start] minmax(var(--sf-page-gutter), 1fr) [content-start] minmax(0, calc((var(--sf-page-width) - 40px) / 2)) [half-end] 40px [half-start] minmax(0, calc((var(--sf-page-width) - 40px) / 2)) [content-end] minmax(var(--sf-page-gutter), 1fr) [full-end];
  }
  html[data-site=commercialicemakers] .layout-main:has(> .home-opening) > .category-cards.is-list {
    grid-column: content-start/half-end;
  }
  html[data-site=commercialicemakers] .layout-main:has(> .home-opening) > .category-cards.is-list + .content-block:has(> .capacity-table) {
    grid-column: half-start/content-end;
  }
}
html[data-site=commercialicemakers] {
  /* the table of the design (the content block homeCapacity): its head over a table in one hairline frame —
     a header of 11px grey capitals spaced apart, rows of 58px, the range 18px bold in a column of its own
     width, the use 15px, the count bold in the brand's dark blue */
}
html[data-site=commercialicemakers] .capacity-table {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
html[data-site=commercialicemakers] {
  /* the heading is inside rich text, whose margin under a heading the gap of the block replaces */
}
html[data-site=commercialicemakers] .capacity-table .capacity-table-title {
  margin-bottom: 0;
}
html[data-site=commercialicemakers] .capacity-table-grid {
  width: 100%;
  border: 1px solid var(--ui-border);
  text-align: left;
}
html[data-site=commercialicemakers] .capacity-table-column {
  border-bottom: 1px solid var(--ui-border);
  font-weight: 600;
  text-transform: uppercase;
}
html[data-site=commercialicemakers] .capacity-table-column:last-child,
html[data-site=commercialicemakers] .capacity-table-count {
  text-align: right;
}
html[data-site=commercialicemakers] .capacity-table-row + .capacity-table-row {
  border-top: 1px solid var(--ui-border);
}
html[data-site=commercialicemakers] .capacity-table-column {
  padding: 12px 18px;
  color: color-mix(in srgb, var(--ui-text-highlighted) 60%, transparent);
  font-size: 11px;
  letter-spacing: 0.1em;
}
html[data-site=commercialicemakers] .capacity-table-range {
  width: 32%;
  padding: 16px 18px;
  color: var(--ui-text-highlighted);
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}
html[data-site=commercialicemakers] .capacity-table-use {
  padding: 16px 18px;
  color: var(--ui-text-highlighted);
  font-size: 15px;
}
html[data-site=commercialicemakers] .capacity-table-count {
  padding: 16px 18px;
  font-size: 15px;
}
html[data-site=commercialicemakers] .capacity-table-count a {
  color: #416180;
  font-weight: 700;
}
html[data-site=commercialicemakers] .capacity-table-count a:hover {
  text-decoration: underline;
}
html[data-site=commercialicemakers] {
  /* the featured machines: the tabs of the capacity at the end of the heading's line, «Any capacity» —
     the grid itself — dark */
}
html[data-site=commercialicemakers] .home-featured-head {
  margin-bottom: 24px;
}
html[data-site=commercialicemakers] .home-featured-tab {
  color: var(--ui-text-highlighted);
  font-size: 14px;
}
html[data-site=commercialicemakers] .home-featured-tab:first-child {
  border-color: #1d1f20;
  background-color: #1d1f20;
  color: #fff;
}
html[data-site=commercialicemakers] {
  /* the brands by name: the head at the start of the column, not centred over a strip */
}
html[data-site=commercialicemakers] .home-brands.is-names .home-brands-title {
  margin-bottom: 24px;
}
html[data-site=commercialicemakers] .home-brand-name {
  font-size: 20px;
}
html[data-site=commercialicemakers] {
  /* the showroom: the card is the company's own blocks — the address and the phone, the hours a table of
     hairlines, the day at the start of its row and the hours at its end, and the way there the large blue
     button of the design */
}
html[data-site=commercialicemakers] .showroom-title {
  font-size: 20px;
}
html[data-site=commercialicemakers] .showroom .contact-hours-list {
  gap: 0;
  font-size: 15px;
}
html[data-site=commercialicemakers] .showroom .contact-hours-entry {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  border-bottom: 1px solid var(--ui-border);
  color: var(--ui-text);
  gap: 16px;
}
html[data-site=commercialicemakers] .showroom .contact-hours-entry > span {
  color: inherit;
}
html[data-site=commercialicemakers] .showroom .contact-map {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 12px 18px;
  background-color: var(--ui-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
html[data-site=commercialicemakers] .showroom .contact-map:hover {
  background-color: var(--color-brand-600);
  text-decoration: none;
}
html[data-site=commercialicemakers] {
  /* the featured machines four to a row, as the design draws them, the head 24px over them */
}
@media (width >= 64rem) {
  html[data-site=commercialicemakers] .home-featured .plp-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
html[data-site=commercialicemakers] .home-featured .plp-grid {
  margin-top: 0;
}
html[data-site=commercialicemakers] {
  /* the form of a volume quote: «What do you need?» the width of both columns, the button too */
}
html[data-site=commercialicemakers] .contact-panel .site-form .form-field:has(textarea),
html[data-site=commercialicemakers] .contact-panel .site-form .form-submit {
  grid-column: 1/-1;
}
html[data-site=commercialicemakers] {
  /* the buttons that act on a band — the finder's, the quote's — as tall as every other button of the
     design, 44px, their words bold */
}
html[data-site=commercialicemakers] .product-finder-submit,
html[data-site=commercialicemakers] .contact-panel .site-form .form-submit {
  min-height: 44px;
  border-radius: 0;
  font-size: 15px;
  font-weight: 700;
}
html[data-site=commercialicemakers] {
  /*
   * The card of a product (SPEC-083 REQ-013), as the new design draws it — the same on every card of the
   * site, a listing's and the home page's, a product with a MAP price included: in a hairline frame, the
   * picture the width of the card on the light grey of the design, «Free Freight» a dark tag over it;
   * under it, 18px in, the brand and the SKU in bold grey, the name 16px bold, the availability after a
   * dot in a pale blue plate, a hairline and «Your price» beside the price, the line of the volume
   * pricing, «Add to cart» a tall steel blue button and «View product» an outline under it. CRM's grade
   * of a brand («Premium») is not on the design's card, and not on the site's.
   */
}
html[data-site=commercialicemakers] .product-card {
  gap: 12px;
  padding: 0 0 18px;
  border: 1px solid var(--site-rule);
  background-color: #fff;
}
html[data-site=commercialicemakers] .product-card .product-card-label {
  display: none;
}
html[data-site=commercialicemakers] {
  /* everything but the picture stands 18px in from the frame */
}
html[data-site=commercialicemakers] .product-card > :not(.product-card-link, .product-card-free-freight),
html[data-site=commercialicemakers] .product-card .product-card-link > :not(.product-card-media) {
  margin-inline: 18px;
}
html[data-site=commercialicemakers] {
  /* the availability right under the name on every card; what a short name leaves stands over the price,
     so the prices and the buttons of a row line up */
}
html[data-site=commercialicemakers] .product-card .product-card-link {
  flex-grow: 0;
  gap: 12px;
}
html[data-site=commercialicemakers] {
  /* the picture: the whole width of the card, on the grey of the design, the product contained in it */
}
html[data-site=commercialicemakers] .product-card .product-card-media {
  aspect-ratio: 5/4;
  padding: 16px;
  background-color: #f5f5f8;
}
html[data-site=commercialicemakers] .product-card .product-card-free-freight {
  top: 12px;
  left: 12px;
  border-radius: 0;
  background-color: #1d1f20;
  color: #fff;
  font-size: 12px;
}
html[data-site=commercialicemakers] .product-card .product-card-head {
  color: #59626b;
  font-size: 13px;
  font-weight: 700;
}
html[data-site=commercialicemakers] .product-card .product-card-brand {
  color: #416180;
}
html[data-site=commercialicemakers] .product-card .product-card-name {
  color: var(--ui-text-highlighted);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
html[data-site=commercialicemakers] {
  /* the availability CRM names, after a dot, bold, in a pale blue plate, and under it when the product
     ships, as CRM words it */
}
html[data-site=commercialicemakers] .product-card .product-card-availability {
  display: grid;
  align-items: center;
  padding: 8px 12px;
  background-color: #eef6ff;
  color: #1d2d3d;
  column-gap: 10px;
  font-size: 15px;
  font-weight: 700;
  grid-template-columns: 7px minmax(0, 1fr);
}
html[data-site=commercialicemakers] .product-card .product-card-availability::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentcolor;
  content: "";
}
html[data-site=commercialicemakers] .product-card .product-card-ship {
  grid-column: 2;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
}
html[data-site=commercialicemakers] {
  /* the price under a hairline: «Your price» at the start of its line, the price large at its end */
}
html[data-site=commercialicemakers] .product-card .product-card-price {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--site-rule);
}
html[data-site=commercialicemakers] .product-card .product-card-price-value {
  display: flex;
  align-items: baseline;
  color: var(--ui-text-highlighted);
  font-size: 26px;
  font-weight: 700;
  gap: 4px;
}
html[data-site=commercialicemakers] .product-card .product-card-price-value::before {
  margin-inline-end: auto;
  content: "Your price";
  font-size: 14px;
  font-weight: 700;
}
html[data-site=commercialicemakers] .product-card .product-card-price-note {
  margin-top: 8px;
  border-radius: 0;
  font-size: 13px;
}
html[data-site=commercialicemakers] {
  /* the line of the volume pricing, then «Add to cart» 44px high, «View product» an outline under it */
}
html[data-site=commercialicemakers] .product-card .product-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
html[data-site=commercialicemakers] .product-card .product-card-volume {
  padding: 10px 8px;
  font-size: 14px;
  line-height: 1.35;
}
html[data-site=commercialicemakers] .product-card .product-card-actions .ui-button {
  width: 100%;
  justify-content: center;
  border-radius: 0;
  font-weight: 700;
}
html[data-site=commercialicemakers] .product-card .product-card-actions .ui-button-solid {
  --sf-button-bg: var(--ui-primary);
  min-height: 44px;
  font-size: 16px;
}
html[data-site=commercialicemakers] .product-card .product-card-actions .ui-button-solid:is(:hover, :active) {
  --sf-button-bg: var(--color-brand-600);
}
html[data-site=commercialicemakers] .product-card .product-card-actions .product-card-view {
  min-height: 44px;
  border-color: var(--site-rule);
  color: var(--ui-text-highlighted);
  font-size: 15px;
}
html[data-site=commercialicemakers] {
  /*
   * The engine's listing of a category or a search, as CRM's v7 theme of the site draws it (SPEC-078
   * REQ-006): a column of facets 260px wide (288px from 1400px, 320px from 1680px) with 16px inside it
   * and no gap to the products, whose grid keeps its own; over it «Filters» on a
   * grey plate, and beside it the count and «Sort by» in 13px on no bar at all.
   */
}
@media (width >= 64rem) {
  html[data-site=commercialicemakers] .listing:has(.listing-body-aside) {
    grid-template-columns: 260px minmax(0, 1fr);
  }
  html[data-site=commercialicemakers] .listing,
  html[data-site=commercialicemakers] .listing .listing-body,
  html[data-site=commercialicemakers] .listing .listing-toolbar {
    column-gap: 0;
  }
  html[data-site=commercialicemakers] .listing .listing-body-aside {
    padding-inline: 16px;
  }
  html[data-site=commercialicemakers] .listing .listing-toolbar {
    min-height: 60px;
    padding: 0;
    border-radius: 0;
    background: none;
  }
  html[data-site=commercialicemakers] .listing .listing-toolbar-caption {
    min-height: 60px;
    padding-inline: 16px;
    border-radius: 15px;
    background-color: var(--ui-bg-accented);
  }
  html[data-site=commercialicemakers] .listing .listing-filters-caption {
    color: var(--ui-text-highlighted);
    font-size: 16px;
    font-weight: 400;
  }
  html[data-site=commercialicemakers] .listing .listing-toolbar-main {
    padding-inline: 30px;
  }
}
@media (width >= 87.5rem) {
  html[data-site=commercialicemakers] .listing:has(.listing-body-aside) {
    grid-template-columns: 288px minmax(0, 1fr);
  }
}
@media (width >= 105rem) {
  html[data-site=commercialicemakers] .listing:has(.listing-body-aside) {
    grid-template-columns: 320px minmax(0, 1fr);
  }
}
html[data-site=commercialicemakers] .listing .plp-count {
  color: var(--ui-text-highlighted);
  font-size: 13px;
}
html[data-site=commercialicemakers] .listing .plp-sort::before {
  color: var(--ui-text-highlighted);
  font-size: 13px;
  content: "Sort by";
}
html[data-site=commercialicemakers] {
  /* «Sort by» a pill of CRM's `btn-outline-dark` with Bootstrap's caret of a `dropdown-toggle` — a
     solid triangle 8px by 4px — instead of the browser's own arrow */
}
html[data-site=commercialicemakers] .listing .plp-sort-select {
  width: auto;
  height: auto;
  padding: 6px 40px 6px 20px;
  border-color: #212529;
  border-radius: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 4'%3E%3Cpath d='M0 0h8L4 4z' fill='%23212529'/%3E%3C/svg%3E") no-repeat right 20px center/8px 4px;
  color: #212529;
  font-size: 15px;
  font-weight: 500;
  line-height: 22.5px;
  appearance: none;
}
html[data-site=commercialicemakers] {
  /* a group of facets: its heading in 16px, no rule between groups; an option a 13px name, the count
     in 12px grey at the end of its row without brackets, and CRM's grade of a brand under the name on
     a green skewed plate */
}
html[data-site=commercialicemakers] .listing .plp-facet-section {
  padding: 0 0 16px;
  border-bottom: 0;
}
html[data-site=commercialicemakers] .listing .plp-facet-section > summary {
  min-height: 32px;
  color: var(--ui-text-highlighted);
  font-size: 16px;
  font-weight: 600;
}
html[data-site=commercialicemakers] {
  /* a dotted rule between two options, and «Show more» centred under them in grey with CRM's
     `plus-square` before it — a `minus-square` before «Show less» — and no count */
}
html[data-site=commercialicemakers] .listing :is(.plp-facet-section-options > label:not(:first-child), .plp-facet-section-more > label) {
  border-top: 1px dotted #e3e3e3;
}
html[data-site=commercialicemakers] .listing .plp-facet-section-more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 0;
  padding: 8px 0;
  color: #666;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  list-style: none;
}
html[data-site=commercialicemakers] .listing .plp-facet-section-more > summary::-webkit-details-marker {
  display: none;
}
html[data-site=commercialicemakers] .listing .plp-facet-section-more > summary::before {
  width: 13px;
  height: 13px;
  border: 1px solid currentcolor;
  border-radius: 2px;
  background: linear-gradient(currentcolor, currentcolor) center/7px 1px no-repeat, linear-gradient(currentcolor, currentcolor) center/1px 7px no-repeat;
  content: "";
}
html[data-site=commercialicemakers] .listing .plp-facet-section-more[open] > summary::before {
  background-size: 7px 1px, 0 0;
}
html[data-site=commercialicemakers] .listing .plp-facet-section label {
  padding-block: 8px;
  font-size: 13px;
  line-height: 17px;
}
html[data-site=commercialicemakers] .listing .plp-facet-section label > :is(a, span) {
  color: var(--ui-text-highlighted);
}
html[data-site=commercialicemakers] .listing .plp-facet-section label > small {
  color: var(--ui-text-muted);
  font-size: 12px;
  font-weight: 300;
}
html[data-site=commercialicemakers] .listing .plp-facet-section label > b {
  position: relative;
  z-index: 0;
  /* beside the name, as tall as CRM's grade, and the row no taller than one without a grade */
  margin-block: -2px;
  padding: 4px 8px;
  border-radius: 0;
  background: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  text-shadow: 0 0.75px 0.75px rgba(0, 0, 0, 0.25);
}
html[data-site=commercialicemakers] .listing .plp-facet-section label > b::after {
  position: absolute;
  inset: 0 0 1%;
  z-index: -1;
  border-radius: 4px;
  background: var(--ui-success);
  transform: skewX(-20deg);
  transform-origin: left;
  content: "";
}
html[data-site=commercialicemakers] {
  /* the engine's pages as CRM's v7 pager looks: grey pills of 13px, the page it is on in CRM's gold */
}
html[data-site=commercialicemakers] .listing .plp-pagination {
  gap: 10px;
  margin-top: 30px;
}
html[data-site=commercialicemakers] .listing .plp-pagination > * {
  height: 37px;
  min-width: 35px;
  padding-inline: 12px;
  border-radius: 18px;
  background-color: var(--ui-bg-accented);
  color: color-mix(in srgb, var(--ui-text-highlighted) 75%, transparent);
  font-size: 13px;
  font-weight: 400;
}
html[data-site=commercialicemakers] .listing .plp-pagination > [aria-current=page] {
  border-color: var(--sf-brand-label);
  background-color: var(--sf-brand-label);
  color: #fff;
}
html[data-site=commercialicemakers] .listing .plp-pagination > :is(.plp-pagination-prev, .plp-pagination-next) {
  min-width: 90px;
}
html[data-site=commercialicemakers] {
  /* the grid of a listing: two columns, three from 1024px, four from 1280px — the listing stands in the
     column of the site (SPEC-083), so a fifth would only narrow the cards — with CRM's gaps and padding,
     over the columns the engine's grid of a listing fills by itself */
}
html[data-site=commercialicemakers] .listing .plp-grid.is-fill {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 10px;
  padding: 16px 10px;
}
@media (width >= 48rem) {
  html[data-site=commercialicemakers] .listing .plp-grid.is-fill {
    column-gap: 20px;
    padding-inline: 20px;
  }
}
@media (width >= 64rem) {
  html[data-site=commercialicemakers] .listing .plp-grid.is-fill {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (width >= 80rem) {
  html[data-site=commercialicemakers] .listing .plp-grid.is-fill {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    padding-inline: 0;
  }
}
html[data-site=commercialicemakers] {
  /* the engine's `<VendorsLine>` under the listing, as the site's own template in CRM draws it: a grey
     band the whole width of the page — `bg-secondary-subtle my-5` around `container-clamped py-4 py-xl-5` */
}
html[data-site=commercialicemakers] .layout-main > .vendors-line {
  grid-column: full;
  margin-block: 3rem;
  padding: 1.5rem clamp(20px, 20px + 83 * (100vw - 375px) / 1545, 103px);
  background-color: var(--ui-bg-accented);
  color: var(--ui-text-highlighted);
}
@media (width >= 75rem) {
  html[data-site=commercialicemakers] .layout-main > .vendors-line {
    padding-block: 3rem;
  }
}
html[data-site=commercialicemakers] .layout-main > .vendors-line a:hover {
  text-decoration: underline;
}
html[data-site=commercialicemakers] {
  /* closing the page, it sits on the footer, as a band the whole width of the page does (main.css) */
}
html[data-site=commercialicemakers] .layout-main > .vendors-line:last-child {
  margin-bottom: -4rem;
}
html[data-site=commercialicemakers] {
  /*
   * The product page (SPEC-078 REQ-007):
   * the trail in 11px, the heading of the product in 18px, the picture in a frame of #d1d1d1 with no
   * disclaimer over it, the column a visitor decides in 277px wide (353px from 1200px, 360px from
   * 1600px, 420px from 1920px) at 40px from the picture (73px from 1400px, 84px from 1600px, 94px from
   * 1920px), its buttons 51px high, and «Description» on CRM's grey tab. `--site-grey` is the grey of
   * that tab, of «Request a Quote» and of the caption of the price.
   */
}
html[data-site=commercialicemakers] .layout-main {
  --site-grey: #666;
  --site-rule: #d1d1d1;
}
html[data-site=commercialicemakers] .layout-main > .breadcrumb {
  padding: 10px 0 8px;
  font-size: 11px;
  line-height: 15px;
}
html[data-site=commercialicemakers] .layout-main > .breadcrumb .breadcrumb-list {
  gap: 3px;
}
html[data-site=commercialicemakers] .layout-main > .breadcrumb .breadcrumb-item {
  gap: 4px;
}
html[data-site=commercialicemakers] .layout-main > .breadcrumb .breadcrumb-link {
  color: var(--sf-link);
}
html[data-site=commercialicemakers] .layout-main > .breadcrumb :is([aria-current=page], .breadcrumb-separator) {
  color: color-mix(in srgb, var(--sf-link) 75%, transparent);
}
html[data-site=commercialicemakers] .layout-main > .breadcrumb .breadcrumb-separator {
  width: 8px;
  height: 8px;
}
html[data-site=commercialicemakers] {
  /* the heading in 18px, the SKU 8px under it in grey, and 13px of air over the picture (the gap of
     the column, 40px, taken back) */
}
html[data-site=commercialicemakers] .layout-main > .product-head {
  margin-bottom: -27px;
}
html[data-site=commercialicemakers] .layout-main > .product-head .page-title {
  color: var(--sf-link);
  font-size: 18px;
  line-height: 2.1;
}
html[data-site=commercialicemakers] .layout-main > .product-head .product-sku {
  color: var(--site-grey);
  line-height: 1.5;
}
html[data-site=commercialicemakers] .layout-main .product-top {
  row-gap: 50px;
}
@media (width >= 48rem) {
  html[data-site=commercialicemakers] .layout-main .product-top:has(.product-top-media) {
    grid-template-columns: minmax(0, 1fr) 277px;
    column-gap: 40px;
  }
}
@media (width >= 75rem) {
  html[data-site=commercialicemakers] .layout-main .product-top:has(.product-top-media) {
    grid-template-columns: minmax(0, 1fr) 353px;
  }
}
@media (width >= 87.5rem) {
  html[data-site=commercialicemakers] .layout-main .product-top:has(.product-top-media) {
    column-gap: 73px;
  }
}
@media (width >= 100rem) {
  html[data-site=commercialicemakers] .layout-main .product-top:has(.product-top-media) {
    grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: 84px;
  }
}
@media (width >= 120rem) {
  html[data-site=commercialicemakers] .layout-main .product-top:has(.product-top-media) {
    grid-template-columns: minmax(0, 1fr) 420px;
    column-gap: 94px;
  }
}
html[data-site=commercialicemakers] {
  /* the picture: no padding on a phone and 320px high, 15px round it from 768px, 20px over and beside
     it and 15px under it from 1400px; «Ask a Question» 10px under the frame, small and pale */
}
html[data-site=commercialicemakers] .layout-main .product-top-media {
  gap: 10px;
}
html[data-site=commercialicemakers] .layout-main .pdp-gallery {
  padding: 0;
  border-color: var(--site-rule);
}
html[data-site=commercialicemakers] .layout-main .pdp-gallery-note {
  display: none;
}
html[data-site=commercialicemakers] {
  /* a picture is never drawn larger than its file: CRM centres a 600px picture in a wider frame */
}
html[data-site=commercialicemakers] .layout-main .pdp-gallery-main {
  display: flex;
  align-items: center;
  justify-content: center;
}
html[data-site=commercialicemakers] .layout-main .pdp-gallery-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
html[data-site=commercialicemakers] {
  /* the picture stands on a stage of CRM's own height rather than a square: 320px, 430px, 600px */
}
html[data-site=commercialicemakers] .layout-main :is(.pdp-gallery-main, .pdp-gallery-blank) {
  height: 320px;
  max-height: none;
  aspect-ratio: auto;
}
@media (width >= 48rem) {
  html[data-site=commercialicemakers] .layout-main .pdp-gallery {
    padding: 15px;
  }
  html[data-site=commercialicemakers] .layout-main :is(.pdp-gallery-main, .pdp-gallery-blank) {
    height: 430px;
  }
}
@media (width >= 87.5rem) {
  html[data-site=commercialicemakers] .layout-main .pdp-gallery {
    padding: 20px 20px 15px;
  }
  html[data-site=commercialicemakers] .layout-main :is(.pdp-gallery-main, .pdp-gallery-blank) {
    height: 600px;
  }
}
html[data-site=commercialicemakers] .layout-main .pdp-ask {
  padding: 1.5px 14px;
  border: 1px solid var(--ui-color-warning-300);
  background-color: var(--ui-color-warning-300);
  color: #000;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}
html[data-site=commercialicemakers] {
  /* «Description» on a grey tab of 13px bold, over a frame with 30px and 40px inside it */
}
html[data-site=commercialicemakers] .layout-main .pdp-description-tab {
  padding: 12px 48px;
  font-family: var(--font-sans);
  border: 1px solid var(--site-grey);
  background-color: var(--site-grey);
  font-size: 13px;
  font-weight: 700;
  line-height: 15px;
}
html[data-site=commercialicemakers] .layout-main .pdp-description-box {
  margin-top: -1px;
  border-color: var(--site-rule);
}
@media (width >= 48rem) {
  html[data-site=commercialicemakers] .layout-main .pdp-description-box {
    padding: 30px 40px;
  }
}
html[data-site=commercialicemakers] {
  /* the column a visitor decides in: 50px between its sections, 60px under the buttons */
}
html[data-site=commercialicemakers] .layout-main .product-top-side {
  gap: 50px;
}
html[data-site=commercialicemakers] .layout-main .purchase-panel {
  margin-bottom: 10px;
}
html[data-site=commercialicemakers] {
  /* the stock and «Check Availability» side by side at the start, pills of 12px 30px high whose mark
     is the circle at their start, the «?» a small dot on the corner of the second */
}
html[data-site=commercialicemakers] .layout-main .purchase-line {
  justify-content: flex-start;
  gap: 0;
}
html[data-site=commercialicemakers] .layout-main .pdp-stock {
  gap: 5px;
  padding-right: 21px;
  color: var(--sf-link);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}
html[data-site=commercialicemakers] .layout-main .pdp-stock-mark {
  width: 30px;
  height: 30px;
}
html[data-site=commercialicemakers] .layout-main .pdp-availability {
  align-items: flex-start;
  gap: 0;
}
html[data-site=commercialicemakers] .layout-main .pdp-availability-open {
  height: 30px;
  gap: 5px;
  padding: 0 21px 0 0;
  border: 1px solid #f8f9fa;
  background-color: #f8f9fa;
  color: #000;
  font-size: 12px;
  font-weight: 500;
}
html[data-site=commercialicemakers] .layout-main .pdp-availability-mark {
  width: 30px;
  height: 30px;
  margin: -1px 0 -1px -1px;
}
html[data-site=commercialicemakers] .layout-main .pdp-availability-help {
  display: flex;
  align-self: flex-start;
  margin: -5px 0 0 -13px;
}
html[data-site=commercialicemakers] .layout-main .pdp-availability-help > summary {
  width: 13px;
  height: 13px;
  padding: 0;
  background-color: #ccc4b2;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 13px;
}
html[data-site=commercialicemakers] .layout-main .pdp-availability-help > summary::before {
  margin-inline: auto;
  content: "?";
}
html[data-site=commercialicemakers] .layout-main .pdp-availability-help > summary > svg {
  display: none;
}
html[data-site=commercialicemakers] {
  /* the price: its caption 20px grey, the figure 40px black, 13px over the button */
}
html[data-site=commercialicemakers] .layout-main .pdp-price-label {
  color: var(--site-grey);
  line-height: 1.5;
}
html[data-site=commercialicemakers] .layout-main .pdp-price {
  color: var(--sf-price);
  line-height: 56px;
}
html[data-site=commercialicemakers] .layout-main .pdp-price-unit {
  color: var(--site-grey);
}
html[data-site=commercialicemakers] .layout-main .purchase-panel > .price-block + * {
  margin-top: -7px;
}
html[data-site=commercialicemakers] {
  /* «Add to Cart» and «Request a Quote»: 51px high, 18px medium, the words alone */
}
html[data-site=commercialicemakers] .layout-main :is(.pdp-add, .pdp-quote) {
  padding: 11px 20px;
  border: 1px solid transparent;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
}
html[data-site=commercialicemakers] .layout-main .pdp-add {
  gap: 0;
}
html[data-site=commercialicemakers] .layout-main .pdp-add > :is(.pdp-add-price, svg) {
  display: none;
}
html[data-site=commercialicemakers] .layout-main .pdp-add .pdp-add-label {
  font-weight: inherit;
}
html[data-site=commercialicemakers] .layout-main .pdp-quote:not(.is-in-quote) {
  background-color: var(--site-grey);
}
html[data-site=commercialicemakers] .layout-main .pdp-quote:not(.is-in-quote):hover {
  background-color: #575757;
}
html[data-site=commercialicemakers] {
  /* the brand: its logo 61px high 20px in from the start, «View all …» in 11px beyond a solid rule */
}
html[data-site=commercialicemakers] .layout-main .pdp-brand-logo-cell {
  justify-content: flex-start;
  padding: 0 0 0 20px;
}
html[data-site=commercialicemakers] .layout-main .pdp-brand-logo {
  max-height: 61px;
}
html[data-site=commercialicemakers] .layout-main .pdp-brand-text {
  padding: 4px 20px;
  border-color: var(--site-rule);
  border-left-style: solid;
  font-size: 11px;
  line-height: 1.5;
}
html[data-site=commercialicemakers] {
  /* the characteristics: the heading in 15px, rows of 14px in black, a dotted rule between the two */
}
html[data-site=commercialicemakers] .layout-main .pdp-specs-title {
  font-size: 15px;
  line-height: 18px;
}
html[data-site=commercialicemakers] .layout-main .pdp-specs-table {
  margin-top: 15px;
}
html[data-site=commercialicemakers] .layout-main :is(.pdp-specs-name, .pdp-specs-value) {
  color: #000;
  line-height: 1.2536;
}
html[data-site=commercialicemakers] .layout-main .pdp-specs-name {
  border-right: 1px dotted rgba(0, 0, 0, 0.18);
}
html[data-site=commercialicemakers] {
  /*
   * The rich text of the site (SPEC-078 REQ-013): the buttons of CRM v7's palette and the components of
   * its theme (_rich-text-crm.scss) in the HTML its editors write, which the site keeps whole
   * (`richText.vocabulary: "crm-v7"`); rich-text.scss — CRM's Bootstrap inside rich text — is the
   * engine's own and stays as it is.
   *
   * The site's styles come after rich-text.scss, so a button of the palette, at the weight of its base
   * `.btn`, wins over it — and would win over its utilities too. In CRM a utility wins over any button
   * (Bootstrap writes them `!important`): the utilities a button of the palette may carry — its display,
   * its padding, its rounding, its gap — are written again for those buttons after them.
   */
  /* stylelint-disable selector-class-pattern -- the names are CRM's own, as its editor writes them */
}
html[data-site=commercialicemakers] .rich-text {
  /* a pill with an icon in a light circle */
}
html[data-site=commercialicemakers] .rich-text :where(.btn):is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0.375rem 1.25rem;
  border: 0.5px solid var(--btn-border, transparent);
  border-radius: 2rem;
  background-color: var(--btn-bg, transparent);
  color: var(--btn-color, #fff);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
}
html[data-site=commercialicemakers] .rich-text :where(.btn):is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue):hover {
  background-color: var(--btn-hover-bg, var(--btn-bg));
  color: var(--btn-hover-color, var(--btn-color, #fff));
}
html[data-site=commercialicemakers] .rich-text :where(.btn):is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue) .svg-icon {
  --size: 18px;
}
html[data-site=commercialicemakers] .rich-text .btn-brand,
html[data-site=commercialicemakers] .rich-text .btn-brand-blue {
  --btn-bg: var(--color-brand-blue);
  --btn-border: var(--color-brand-blue);
  --btn-hover-bg: var(--color-brand-dark);
}
html[data-site=commercialicemakers] .rich-text .btn-brand-red {
  --btn-bg: var(--color-brand-red);
  --btn-border: var(--color-brand-red);
  --btn-hover-bg: var(--ui-color-secondary-600);
}
html[data-site=commercialicemakers] .rich-text .btn-support-purple {
  --btn-bg: var(--color-support-purple);
  --btn-border: var(--color-support-purple);
  --btn-hover-bg: var(--color-support-purple-dark);
}
html[data-site=commercialicemakers] .rich-text .btn-danger {
  --btn-bg: var(--color-accent-red);
  --btn-border: var(--color-accent-red);
  --btn-hover-bg: #a8191f;
}
html[data-site=commercialicemakers] .rich-text .btn-store {
  --btn-bg: #000;
  --btn-border: rgb(255 255 255 / 30%);
  border-radius: 5px;
}
html[data-site=commercialicemakers] .rich-text .btn-outline-brand,
html[data-site=commercialicemakers] .rich-text .btn-outline-brand-blue {
  --btn-color: var(--color-brand-blue);
  --btn-border: var(--color-brand-blue);
  --btn-hover-bg: var(--color-brand-blue);
  --btn-hover-color: #fff;
}
html[data-site=commercialicemakers] .rich-text {
  /* the utilities a button of the palette may carry, which win over it, as in CRM */
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).rounded-4 {
  border-radius: 1rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).rounded-circle {
  border-radius: 50%;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).gap-0 {
  gap: 0;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).p-0 {
  padding: 0;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).pt-0 {
  padding-top: 0;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).pb-0 {
  padding-bottom: 0;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).ps-0 {
  padding-left: 0;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).pe-0 {
  padding-right: 0;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).px-0 {
  padding-inline: 0;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).py-0 {
  padding-block: 0;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).gap-1 {
  gap: 0.25rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).p-1 {
  padding: 0.25rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).pt-1 {
  padding-top: 0.25rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).pb-1 {
  padding-bottom: 0.25rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).ps-1 {
  padding-left: 0.25rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).pe-1 {
  padding-right: 0.25rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).px-1 {
  padding-inline: 0.25rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).py-1 {
  padding-block: 0.25rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).gap-2 {
  gap: 0.5rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).p-2 {
  padding: 0.5rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).pt-2 {
  padding-top: 0.5rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).pb-2 {
  padding-bottom: 0.5rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).ps-2 {
  padding-left: 0.5rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).pe-2 {
  padding-right: 0.5rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).px-2 {
  padding-inline: 0.5rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).py-2 {
  padding-block: 0.5rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).gap-3 {
  gap: 1rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).p-3 {
  padding: 1rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).pt-3 {
  padding-top: 1rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).pb-3 {
  padding-bottom: 1rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).ps-3 {
  padding-left: 1rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).pe-3 {
  padding-right: 1rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).px-3 {
  padding-inline: 1rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).py-3 {
  padding-block: 1rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).gap-4 {
  gap: 1.5rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).p-4 {
  padding: 1.5rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).pt-4 {
  padding-top: 1.5rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).pb-4 {
  padding-bottom: 1.5rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).ps-4 {
  padding-left: 1.5rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).pe-4 {
  padding-right: 1.5rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).px-4 {
  padding-inline: 1.5rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).py-4 {
  padding-block: 1.5rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).gap-5 {
  gap: 3rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).p-5 {
  padding: 3rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).pt-5 {
  padding-top: 3rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).pb-5 {
  padding-bottom: 3rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).ps-5 {
  padding-left: 3rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).pe-5 {
  padding-right: 3rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).px-5 {
  padding-inline: 3rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).py-5 {
  padding-block: 3rem;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-none {
  display: none;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-block {
  display: block;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-flex {
  display: flex;
}
html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-inline-flex {
  display: inline-flex;
}
@media (min-width: 576px) {
  html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-sm-none {
    display: none;
  }
  html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-sm-block {
    display: block;
  }
  html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-sm-flex {
    display: flex;
  }
  html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-sm-inline-flex {
    display: inline-flex;
  }
}
@media (min-width: 768px) {
  html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-md-none {
    display: none;
  }
  html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-md-block {
    display: block;
  }
  html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-md-flex {
    display: flex;
  }
  html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-md-inline-flex {
    display: inline-flex;
  }
}
@media (min-width: 992px) {
  html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-lg-none {
    display: none;
  }
  html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-lg-block {
    display: block;
  }
  html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-lg-flex {
    display: flex;
  }
  html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-lg-inline-flex {
    display: inline-flex;
  }
}
@media (min-width: 1200px) {
  html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-xl-none {
    display: none;
  }
  html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-xl-block {
    display: block;
  }
  html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-xl-flex {
    display: flex;
  }
  html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-xl-inline-flex {
    display: inline-flex;
  }
}
@media (min-width: 1400px) {
  html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-xxl-none {
    display: none;
  }
  html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-xxl-block {
    display: block;
  }
  html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-xxl-flex {
    display: flex;
  }
  html[data-site=commercialicemakers] .rich-text :is(.btn-brand, .btn-brand-blue, .btn-brand-red, .btn-support-purple, .btn-danger, .btn-store, .btn-outline-brand, .btn-outline-brand-blue).d-xxl-inline-flex {
    display: inline-flex;
  }
}
html[data-site=commercialicemakers] {
  /* the components of CRM v7 itself, after the palette */
  /*
   * The components of CRM's v7 theme in the HTML its editors write (SPEC-078 REQ-013): the rules of its
   * common stylesheet (`store/common/styles.css`) for the classes a home page of a site is written with
   * — the band of figures, the promo beside a picture, the cards of features, the map with a card over
   * it, the round social links, the skewed badge, the icons of its sprites, its type scale, its palette
   * and the buttons of that palette. Like rich-text.scss (its Bootstrap), it applies inside rich text
   * alone and stands outside the layers of Tailwind, so a rule here beats a utility of the same name.
   *
   * The brand of the palette is the site's theme; the rest of it is CRM's own, the same on every site.
   * A text of a site that writes none of these classes looks exactly as it did.
   */
  /* stylelint-disable selector-class-pattern -- the names are CRM's own, BEM as its editor writes them
     (stats-strip__item), not classes of the engine */
}
html[data-site=commercialicemakers] .rich-text {
  --color-brand: var(--ui-primary);
  --color-brand-dark: var(--ui-color-primary-600);
  --color-brand-blue: var(--ui-primary);
  --color-brand-red: var(--ui-secondary);
  --color-brand-key: #2c2c2c;
  --color-accent-blue: #2a68bc;
  --color-accent-cyan: #20aad7;
  --color-accent-green: #297d0b;
  --color-accent-green-grass: #749c05;
  --color-accent-orange: #e58600;
  --color-accent-red: #c51e26;
  --color-accent-yellow: #ebb000;
  --color-support-black: #000;
  --color-support-blue: #1a375d;
  --color-support-gray: #818181;
  --color-support-gray-light: #e2e2e2;
  --color-support-gray-pale: #f4f4f4;
  --color-support-purple: #5f36a6;
  --color-support-purple-light: #7d54c4;
  --color-support-purple-dark: #3f2a64;
  --color-support-purple-pale: #e8e0f6;
}
html[data-site=commercialicemakers] .rich-text .fs-e1 {
  font-size: clamp(35px, 35px + 15 * (100vw - 375px) / 1025, 50px);
}
html[data-site=commercialicemakers] .rich-text .fs-e2 {
  font-size: clamp(30px, 30px + 10 * (100vw - 375px) / 1025, 40px);
}
html[data-site=commercialicemakers] .rich-text .fs-e3 {
  font-size: clamp(26px, 26px + 4 * (100vw - 375px) / 1025, 30px);
}
html[data-site=commercialicemakers] .rich-text .fs-e4 {
  font-size: clamp(24px, 24px + 3 * (100vw - 375px) / 1025, 27px);
}
html[data-site=commercialicemakers] .rich-text .fs-e5 {
  font-size: clamp(21px, 21px + 3 * (100vw - 375px) / 1025, 24px);
}
html[data-site=commercialicemakers] .rich-text .fs-e6 {
  font-size: clamp(18px, 18px + 3 * (100vw - 375px) / 1025, 21px);
}
html[data-site=commercialicemakers] .rich-text .fs-e7 {
  font-size: clamp(18px, 18px + 1 * (100vw - 375px) / 1025, 19px);
}
html[data-site=commercialicemakers] .rich-text .f-headings {
  font-family: var(--font-heading);
}
html[data-site=commercialicemakers] .rich-text .fw-lighter {
  font-weight: lighter;
}
html[data-site=commercialicemakers] .rich-text .small {
  font-size: 0.875em;
}
html[data-site=commercialicemakers] .rich-text .shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
html[data-site=commercialicemakers] .rich-text .rounded-3 {
  border-radius: 0.5rem;
}
html[data-site=commercialicemakers] .rich-text .rounded-top-5 {
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
}
html[data-site=commercialicemakers] .rich-text .bg-white {
  background-color: #fff;
}
html[data-site=commercialicemakers] .rich-text .bg-body-secondary {
  background-color: #e9ecef;
}
html[data-site=commercialicemakers] .rich-text .object-fit-none {
  object-fit: none;
}
html[data-site=commercialicemakers] .rich-text .w-auto {
  width: auto;
}
html[data-site=commercialicemakers] .rich-text .h-auto {
  height: auto;
}
html[data-site=commercialicemakers] .rich-text .gap-md {
  gap: 10px;
}
html[data-site=commercialicemakers] .rich-text .align-items-end {
  align-items: flex-end;
}
html[data-site=commercialicemakers] .rich-text .justify-content-start {
  justify-content: flex-start;
}
html[data-site=commercialicemakers] .rich-text .color-brand {
  color: var(--color-brand);
  fill: var(--color-brand);
}
html[data-site=commercialicemakers] .rich-text .color-brand-blue {
  color: var(--color-brand-blue);
  fill: var(--color-brand-blue);
}
html[data-site=commercialicemakers] .rich-text .color-brand-red {
  color: var(--color-brand-red);
  fill: var(--color-brand-red);
}
html[data-site=commercialicemakers] .rich-text .color-brand-key {
  color: var(--color-brand-key);
  fill: var(--color-brand-key);
}
html[data-site=commercialicemakers] .rich-text .color-support-purple {
  color: var(--color-support-purple);
  fill: var(--color-support-purple);
}
html[data-site=commercialicemakers] .rich-text .color-support-purple-dark {
  color: var(--color-support-purple-dark);
  fill: var(--color-support-purple-dark);
}
html[data-site=commercialicemakers] .rich-text {
  /* the arrows of CRM's slider: a round outline of the brand on either side of the strip, stepped
     by the engine's slider script (app/engine/slider.js) — not there until it runs, nor while every
     logo fits in the row (it hides them then) */
}
html[data-site=commercialicemakers] .rich-text :is(.swiper-button-next, .swiper-button-prev) {
  z-index: 1;
  grid-area: strip;
  align-self: center;
  width: 42px;
  height: 34px;
  margin-inline: 10px;
  padding: 0;
}
html[data-site=commercialicemakers] .rich-text {
  /* the chevron is Swiper's own (its icon font over the button), not the arrow of the sprite the
     markup carries: drawn here by a mask, as the engine draws the chevrons of its menu */
}
html[data-site=commercialicemakers] .rich-text :is(.swiper-button-next, .swiper-button-prev) svg {
  display: none;
}
html[data-site=commercialicemakers] .rich-text :is(.swiper-button-next, .swiper-button-prev)::after {
  width: 20px;
  height: 20px;
  background-color: currentcolor;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18l6-6l-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
}
html[data-site=commercialicemakers] .rich-text .swiper-button-prev {
  justify-self: start;
}
html[data-site=commercialicemakers] .rich-text .swiper-button-prev::after {
  transform: rotate(180deg);
}
html[data-site=commercialicemakers] .rich-text .swiper-button-next {
  justify-self: end;
}
html[data-site=commercialicemakers] {
  /*
   * The components, at the weight of one class: a utility of CRM's Bootstrap on the same element wins,
   * as its `!important` makes it win in CRM — `p-2` on a round button, `w-auto` on a picture
   * (rich-text.scss holds the utilities at the weight of two)
   */
}
html[data-site=commercialicemakers] :where(.rich-text) {
  /* an icon of CRM's sprites (server/utils/sanitize.js): its size is `--size`, its colour the text's */
}
html[data-site=commercialicemakers] :where(.rich-text) .svg-icon {
  --size: 17px;
  width: var(--size);
  height: var(--size);
  vertical-align: middle;
  fill: currentcolor;
}
html[data-site=commercialicemakers] :where(.rich-text) .btn .ico-rounded {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: -13px;
  border-radius: 3rem;
  background-color: rgba(255, 255, 255, 0.3);
}
html[data-site=commercialicemakers] :where(.rich-text) .btn .ico-rounded.m-0 {
  margin: 0;
}
html[data-site=commercialicemakers] :where(.rich-text) {
  /* the clamped gutter of a band on both sides, 20px at 375px to 103px at 1920px — as , which a
     promo of the same element reads for its own padding */
}
html[data-site=commercialicemakers] :where(.rich-text) .container-clamped {
  --px: clamp(20px, calc(20px + 83 * (100vw - 375px) / 1545), 103px);
  padding-inline: var(--px);
}
@media (width >= 1400px) {
  html[data-site=commercialicemakers] :where(.rich-text) .container-clamped .container {
    max-width: 1262px;
    padding-inline: 0;
  }
}
html[data-site=commercialicemakers] :where(.rich-text) {
  /* the map with a card over it — Google's picture of the map in the style CRM's widget names, grey
     with Google's red pin, a link to the place on Google's own map — filling the band and cropped to it,
     as CRM's map runs past the band; grey under it while the picture loads */
}
html[data-site=commercialicemakers] :where(.rich-text) .google-map-cover {
  position: relative;
  height: calc(100vh - 330px);
  overflow: hidden;
}
@media (width >= 576px) {
  html[data-site=commercialicemakers] :where(.rich-text) .google-map-cover {
    height: 400px;
  }
}
html[data-site=commercialicemakers] :where(.rich-text) .google-map-cover > :is(iframe, .google-map) {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #e5e3df;
}
html[data-site=commercialicemakers] :where(.rich-text) .google-map-cover > .google-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
html[data-site=commercialicemakers] :where(.rich-text) .google-map-cover-body {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
html[data-site=commercialicemakers] :where(.rich-text) .google-map-cover-body .card {
  pointer-events: auto;
}
html[data-site=commercialicemakers] :where(.rich-text) {
  /* the band of figures: one column, two from 768px, four in a row from 1400px */
}
html[data-site=commercialicemakers] :where(.rich-text) ul.stats-strip {
  --border: 1px solid rgb(0 0 0 / 10%);
  --item-px: 30px;
  --item-py: 20px;
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  overflow: hidden;
  list-style: none;
}
html[data-site=commercialicemakers] :where(.rich-text) ul.stats-strip .svg-icon {
  --size: 40px;
}
@media (width >= 768px) and (width < 1400px) {
  html[data-site=commercialicemakers] :where(.rich-text) ul.stats-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (width >= 1400px) {
  html[data-site=commercialicemakers] :where(.rich-text) ul.stats-strip {
    --item-px: 40px;
    --item-py: 30px;
    grid-template-columns: repeat(4, 1fr);
  }
}
html[data-site=commercialicemakers] :where(.rich-text) .stats-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: var(--item-py) var(--item-px);
  border-top: var(--border);
  border-left: var(--border);
}
html[data-site=commercialicemakers] :where(.rich-text) .stats-strip__item:first-child {
  border-top: 0;
  border-left: 0;
}
@media (width < 768px) {
  html[data-site=commercialicemakers] :where(.rich-text) .stats-strip__item {
    border-left: 0;
  }
}
@media (width >= 768px) and (width < 1400px) {
  html[data-site=commercialicemakers] :where(.rich-text) .stats-strip__item:nth-child(-n+2) {
    border-top: 0;
  }
  html[data-site=commercialicemakers] :where(.rich-text) .stats-strip__item:nth-child(odd) {
    border-left: 0;
  }
}
@media (width >= 1400px) {
  html[data-site=commercialicemakers] :where(.rich-text) .stats-strip__item {
    border-top: 0;
  }
}
html[data-site=commercialicemakers] :where(.rich-text) .stats-strip__text {
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 20px;
}
html[data-site=commercialicemakers] :where(.rich-text) .stats-strip__value {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
html[data-site=commercialicemakers] :where(.rich-text) .stats-strip__label {
  font-size: 15px;
}
html[data-site=commercialicemakers] :where(.rich-text) {
  /* round links to the social pages; their colours are the knobs CRM's editor sets inline */
}
html[data-site=commercialicemakers] :where(.rich-text) .social-icons {
  display: flex;
  gap: 10px;
}
html[data-site=commercialicemakers] :where(.rich-text) .social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size, 40px);
  height: var(--size, 40px);
  border-radius: 3rem;
  background: var(--bg-color, #fff);
  color: var(--color, var(--color-brand-key));
  transition-property: color, background-color;
  transition-duration: 0.3s;
}
html[data-site=commercialicemakers] :where(.rich-text) .social-icons a:hover {
  background: var(--bg-color-hover, var(--color-brand));
  color: var(--color-hover, #fff);
}
html[data-site=commercialicemakers] :where(.rich-text) .social-icons svg {
  width: var(--svg-size, 17px);
  height: var(--svg-size, 17px);
  fill: currentcolor;
}
html[data-site=commercialicemakers] :where(.rich-text) {
  /* a promo: the text beside its picture from 1024px, over it below */
}
html[data-site=commercialicemakers] :where(.rich-text) .promo-hero {
  --px: 20px;
  --py: 35px;
  --br: 15px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  background: var(--bg-color, var(--color-support-gray-light));
}
@media (width >= 576px) {
  html[data-site=commercialicemakers] :where(.rich-text) .promo-hero {
    --px: 40px;
  }
}
@media (width >= 768px) {
  html[data-site=commercialicemakers] :where(.rich-text) .promo-hero {
    --px: 55px;
  }
}
@media (width >= 1024px) {
  html[data-site=commercialicemakers] :where(.rich-text) .promo-hero {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
}
html[data-site=commercialicemakers] :where(.rich-text) .promo-hero.radiused {
  border-radius: var(--br);
}
html[data-site=commercialicemakers] :where(.rich-text) .promo-hero > picture {
  position: absolute;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
html[data-site=commercialicemakers] :where(.rich-text) .promo-hero > picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
html[data-site=commercialicemakers] :where(.rich-text) .promo-hero__content {
  z-index: 1;
  flex-grow: 1;
  width: 100%;
  padding: var(--py) var(--px);
}
@media (width < 1024px) {
  html[data-site=commercialicemakers] :where(.rich-text) .promo-hero__content {
    padding-bottom: 0;
  }
}
html[data-site=commercialicemakers] :where(.rich-text) .promo-hero__media {
  z-index: 1;
  display: flex;
  flex-grow: 1;
  align-items: end;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@media (width < 1024px) {
  html[data-site=commercialicemakers] :where(.rich-text) .promo-hero__media {
    justify-content: center;
  }
}
html[data-site=commercialicemakers] :where(.rich-text) .promo-hero__media img {
  border-radius: 0;
}
html[data-site=commercialicemakers] :where(.rich-text) {
  /* a card of a feature: its icon half out of the card, on a disc of the page's colour */
}
html[data-site=commercialicemakers] :where(.rich-text) .feature-card {
  --color: var(--color-brand-key);
  --card-bg: #f3f3f3;
  --icon-scale: scale(1);
  position: relative;
  display: flex;
  margin-left: 20px;
  padding: 20px 20px 20px 45px;
  border-radius: 10px;
  background-color: var(--card-bg);
  transition: background-color 0.15s ease-in-out;
}
html[data-site=commercialicemakers] :where(.rich-text) .feature-card:hover {
  --card-bg: var(--color-support-gray-light);
  --icon-scale: scale(1.3);
}
html[data-site=commercialicemakers] :where(.rich-text) .feature-card__icon {
  position: absolute;
  top: 50%;
  left: -30px;
  padding: 10px;
  transform: translateY(-50%);
}
html[data-site=commercialicemakers] :where(.rich-text) .feature-card__icon::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background: var(--ui-bg);
  clip-path: inset(0 0 0 50%);
  transform: var(--icon-scale);
  transition: transform 0.3s ease-in-out 0.1s;
  content: "";
  pointer-events: none;
}
html[data-site=commercialicemakers] :where(.rich-text) .feature-card__icon svg {
  position: relative;
  z-index: 1;
  display: block;
  fill: var(--color-brand);
  transform: var(--icon-scale);
  transition: transform 0.25s ease-in-out 0.15s;
}
html[data-site=commercialicemakers] :where(.rich-text) .feature-card__body {
  display: flex;
  flex-direction: column;
}
html[data-site=commercialicemakers] :where(.rich-text) .feature-card__title {
  margin: 0 0 6px;
  color: var(--color);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}
html[data-site=commercialicemakers] :where(.rich-text) .feature-card__text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color);
  font-size: 15px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
html[data-site=commercialicemakers] :where(.rich-text) {
  /* a badge on a skewed plate of `--bg` */
}
html[data-site=commercialicemakers] :where(.rich-text) .badge--skew {
  --bg: var(--color-accent-green);
  position: relative;
  z-index: 0;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0.75px 0.75px rgba(0, 0, 0, 0.25);
}
html[data-site=commercialicemakers] :where(.rich-text) .badge--skew::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 99%;
  border-radius: 4px;
  background: var(--bg);
  transform: skewX(-20deg);
  transform-origin: left;
  content: "";
  pointer-events: none;
}
html[data-site=commercialicemakers] :where(.rich-text) {
  /* CRM's slider of logos (its Swiper, a script): a strip that scrolls and snaps, which the engine's
     slider script steps; the band that holds it and its arrows puts the arrows over the strip */
}
html[data-site=commercialicemakers] :where(.rich-text) :has(> .swiper-button-next) {
  display: grid;
  grid-template-areas: "head" "strip";
}
html[data-site=commercialicemakers] :where(.rich-text) .container-clamped:has(> .swiper) {
  grid-area: strip;
}
html[data-site=commercialicemakers] :where(.rich-text) ul.swiper-wrapper {
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
}
html[data-site=commercialicemakers] :where(.rich-text) .swiper-slide {
  display: flex;
  flex: 0 0 33.3333333333%;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}
@media (width >= 768px) {
  html[data-site=commercialicemakers] :where(.rich-text) .swiper-slide {
    flex-basis: 16.6666666667%;
  }
}
@media (width >= 1200px) {
  html[data-site=commercialicemakers] :where(.rich-text) .swiper-slide {
    flex-basis: 11.1111111111%;
  }
}
html[data-site=commercialicemakers] :where(.rich-text) .swiper-slide {
  /* the size CRM's slider gives a logo of a partner, whatever the size of its file */
}
html[data-site=commercialicemakers] :where(.rich-text) .swiper-slide img {
  width: 60px;
  height: auto;
  border-radius: 0;
}
html[data-site=commercialicemakers] :where(.rich-text) {
  /* a badge of an app store keeps its own height in a column of a footer that is laid out as a row,
     as it does at the top of CRM's own column */
}
@media (width >= 64rem) {
  html[data-site=commercialicemakers] :where(.rich-text) .btn-store {
    align-self: flex-start;
  }
}
html[data-site=commercialicemakers] :where(.rich-text) {
  /* CRM's skyline of a footer: a picture standing on the bar at its bottom (the band of FooterBottom,
     which it is written in), behind the columns of the footer */
}
html[data-site=commercialicemakers] :where(.rich-text) .page-footer-body-bgimg {
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 190px;
  object-fit: cover;
  pointer-events: none;
}

/* a slider of CRM in a text stands without its arrows until the script of the sliders moves it */
html:not([data-sliders]) .rich-text :is(.swiper-button-next, .swiper-button-prev) {
  display: none;
}