/* =====================================================================================================
   INCITE FIRE - REDESIGN PREVIEW (this theme only)
   Loaded after every other stylesheet (see redesign.php). Uses the tokens from style.css (:root --incite-*).
   Sections: header bar, header and menu, the Products menu as a full-width panel, Home, footer branch strip,
   product categories, product page, Contact Us, phones.
   ===================================================================================================== */

/* * * * * FULL WIDTH * * * * */

/* redesign.php switches OceanWP to its "wide" layout, so every section's background runs edge to edge. The
   content sits in a centred column up to 1360px wide (OceanWP's own is 1200px or 90% of the window). Below a
   short page the window is the footer's colour, so the footer never stops half way down the screen. The
   :not(.boxed-layout) means none of this applies if the layout switch is ever taken out. */
html body:not(.boxed-layout) {
  background-color: #1c1f22;
}

html body:not(.boxed-layout) #main {
  background-color: #ffffff;
}

/* OceanWP's own top bar has nothing in it (the bar above is this theme's) - it only drew a pale line */
html #top-bar-wrap:has(> #top-bar.has-no-content) {
  display: none;
}

html body:not(.boxed-layout) #wrap .container {
  width: 1360px;
  max-width: calc(100% - 64px);
}

@media only screen and (max-width: 767px) {

  html body:not(.boxed-layout) #wrap .container {
    max-width: calc(100% - 40px);
  }
}

/* * * * * TYPE (every page) * * * * */

/* the site's two fonts everywhere - OceanWP asks for Open Sans, which is never loaded, so pages fell back to
   Arial. Elementor's own widgets keep the fonts set in Elementor. */
html body {
  font-family: var(--incite-font-body);
  color: var(--incite-text);
}

html body h1,
html body h2,
html body h3,
html body h4 {
  font-family: var(--incite-font-display);
  color: var(--incite-ink);
}

/* Elementor's site-wide settings (its "kit") still hold Elementor's demo defaults - Roboto, grey #7A7A7A text,
   light blue and green - and every Elementor text widget uses them, so About, Training, Non-compliance, the
   Firenet and company video pages set their text in grey Roboto (4.3:1, too faint). Point the kit's variables at
   the site's own type and colours. (Elementor > Site Settings is unchanged; this wins over it, for this theme.) */
html body[class*="elementor-kit-"] {
  --e-global-typography-primary-font-family: "Barlow Semi Condensed";
  --e-global-typography-primary-font-weight: 600;
  --e-global-typography-secondary-font-family: "IBM Plex Sans";
  --e-global-typography-secondary-font-weight: 400;
  --e-global-typography-text-font-family: "IBM Plex Sans";
  --e-global-typography-text-font-weight: 400;
  --e-global-typography-accent-font-family: "IBM Plex Sans";
  --e-global-typography-accent-font-weight: 600;
  --e-global-color-primary: #1c1f22;
  --e-global-color-secondary: #5f6770;
  --e-global-color-text: #3b4148;
  --e-global-color-accent: #C8261D;
  --e-global-color-4541aa37: #1c1f22;
  --e-global-color-1944199f: #2e6b3a;
}

/* * * * * SHARED * * * * */

.incite_rd-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.incite_rd-button {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--incite-radius);
  background: var(--incite-blue);
  color: #ffffff;
  font-family: var(--incite-font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.incite_rd-button:hover,
.incite_rd-button:focus {
  background: var(--incite-blue-dark);
  color: #ffffff;
}

.incite_rd-button-light {
  background: #ffffff;
  color: var(--incite-blue);
}

.incite_rd-button-light:hover,
.incite_rd-button-light:focus {
  background: var(--incite-blue-tint);
  color: var(--incite-blue-dark);
}

/* * * * * KEYBOARD FOCUS (every page) * * * * */

/* OceanWP's reset takes the outline off every link (a {outline: 0}) and nothing put one back outside the shop
   areas, so someone using the keyboard could not see where they were. A 2px ring in the accent colour on light
   areas, white on the dark ones (the bar above the header, the header, the Home opening, the trade band and the footer) where the red would not show. Only for the keyboard (:focus-visible) - a mouse click shows nothing. */
/* :where() keeps this a light fallback - it still beats the resets, but a component's own focus rule wins */
html body :where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--incite-blue);
  outline-offset: 2px;
}

html body .incite_rd-bar :focus-visible,
html body #site-header :focus-visible,
html body .incite_rd-hero :focus-visible,
html body .incite_rd-trade :focus-visible,
html body .incite_rd-footer :focus-visible,
html body #footer-bottom :focus-visible {
  outline-color: #ffffff;
}

/* OceanWP's back-to-top button floats over light, red and dark areas alike: a white ring edged in graphite shows
   on all of them */
html body #scroll-top:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--incite-ink);
}

/* the white drop-downs that open out of the black header (menus, search, the phone menu) */
html body #site-header .sub-menu :focus-visible,
html body #site-header #searchform-dropdown :focus-visible,
html body #site-header #mobile-dropdown :focus-visible {
  outline-color: var(--incite-blue);
}

/* the ring appears at once. OceanWP fades every link's changes over 0.3s (transition: all), which grew the ring
   from nothing - for its first moments it was a 1px line hard up against the text */
html body :is(a, button, summary, [tabindex]):focus-visible {
  transition-duration: 0s;
}

/* the header's menu items fill its height, so their ring sits just inside them */
html body #site-navigation-wrap .dropdown-menu > li > a:focus-visible {
  outline-offset: -6px;
}

/* * * * * SCROLLBARS (every page) * * * * */

/* The scrollbar as a slim rail floating over the page, with no box behind it (the way Firefox draws one), carrying the
   detector's status light - the same light as Browse the range on Home and the loading detector: a small signal-red light at
   the middle of a graphite rail, travelling with you as you scroll. Pointed at, the rail thickens and darkens and the
   light glows; held and dragged, the light is fully lit. The rail stands clear of the page (5.3:1 on white), so it is
   as easy to find as the browser's own. Chrome, Edge and Safari draw all of it; Firefox takes the rail's colour on a
   clear track (it cannot draw the light). */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 6px;
  background:
    radial-gradient(circle, rgba(200, 38, 29, 0.95) 0 1.8px, rgba(200, 38, 29, 0) 2.4px) center / 8px 8px no-repeat padding-box,
    #6b6b6b padding-box;
}

::-webkit-scrollbar-thumb:hover {
  border-width: 2px;
  background:
    radial-gradient(circle, #ff4a3d 0 2px, rgba(255, 74, 61, 0.45) 2.7px, rgba(255, 74, 61, 0) 4.5px) center / 10px 10px no-repeat padding-box,
    #3c3c3c padding-box;
}

::-webkit-scrollbar-thumb:active {
  border-width: 2px;
  background:
    radial-gradient(circle, #ff6a5e 0 2.3px, rgba(255, 74, 61, 0.65) 3px, rgba(255, 74, 61, 0) 5px) center / 10px 10px no-repeat padding-box,
    #1c1f22 padding-box;
}

@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: #6b6b6b transparent;
  }
}

/* * * * * FORMS (every WPForms form) * * * * */

/* style.css's FORMS rules only won where WPForms prints its own stylesheet first (the trade account form). On
   the Credit Application, RMA, LE2 and Training forms WPForms prints it after the theme's, at the same weight,
   so those forms kept WPForms' defaults (40px grey fields, bold 16px labels, a pure red star, a grey focus
   border). The same rules again with a doubled class, so they win wherever WPForms' CSS is printed. Styling
   only - the forms, their fields and their scripts are WPForms' and unchanged. */
html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-field-label {
  margin-bottom: 6px;
  font-family: var(--incite-font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: var(--incite-ink);
}

/* a repeating group's own title ("Users" on the LE2 form) is marked up as a label - keep it a section heading */
html body div.wpforms-container-full.wpforms-container-full .wpforms-form h3.wpforms-field-label {
  margin-bottom: 12px;
  font-family: var(--incite-font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
}

html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-field-label-inline {
  font-family: var(--incite-font-body);
  font-weight: 400;
  font-size: 15px;
  color: var(--incite-text);
}

html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-required-label {
  color: var(--incite-error);
  font-weight: 600;
}

html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-field-sublabel,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-field-description,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-field-limit-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--incite-muted);
}

/* the "0 of 50 max characters" counters only while typing in that field */
html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-field:not(:focus-within) .wpforms-field-limit-text {
  display: none;
}

html body div.wpforms-container-full.wpforms-container-full .wpforms-form input[type="text"],
html body div.wpforms-container-full.wpforms-container-full .wpforms-form input[type="email"],
html body div.wpforms-container-full.wpforms-container-full .wpforms-form input[type="tel"],
html body div.wpforms-container-full.wpforms-container-full .wpforms-form input[type="url"],
html body div.wpforms-container-full.wpforms-container-full .wpforms-form input[type="number"],
html body div.wpforms-container-full.wpforms-container-full .wpforms-form input[type="password"],
html body div.wpforms-container-full.wpforms-container-full .wpforms-form input[type="date"],
html body div.wpforms-container-full.wpforms-container-full .wpforms-form select {
  height: 46px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid var(--incite-border-strong);
  border-radius: var(--incite-radius);
  background-color: var(--incite-surface);
  box-shadow: none;
  font-family: var(--incite-font-body);
  font-size: 15px;
  color: var(--incite-ink);
}

html body div.wpforms-container-full.wpforms-container-full .wpforms-form select {
  padding-right: 44px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%233b4148' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}

html body div.wpforms-container-full.wpforms-container-full .wpforms-form textarea {
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--incite-border-strong);
  border-radius: var(--incite-radius);
  background-color: var(--incite-surface);
  box-shadow: none;
  font-family: var(--incite-font-body);
  font-size: 15px;
  color: var(--incite-ink);
}

html body div.wpforms-container-full.wpforms-container-full .wpforms-form input:hover,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form select:hover,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form textarea:hover {
  border-color: var(--incite-muted);
}

html body div.wpforms-container-full.wpforms-container-full .wpforms-form input:focus,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form select:focus,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form textarea:focus {
  border-color: var(--incite-blue);
  box-shadow: 0 0 0 3px var(--incite-blue-ring);
  outline: none;
}

/* radio buttons and tick boxes in the accent colour (they were the browser's blue) */
html body div.wpforms-container-full.wpforms-container-full .wpforms-form input[type="radio"],
html body div.wpforms-container-full.wpforms-container-full .wpforms-form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--incite-blue);
}

html body div.wpforms-container-full.wpforms-container-full .wpforms-form input[type="radio"]:focus-visible,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--incite-blue);
  outline-offset: 2px;
  box-shadow: none;
}

/* errors: a 2px border and the message with an icon, as everywhere else on the site */
html body div.wpforms-container-full.wpforms-container-full .wpforms-form input.wpforms-error,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form select.wpforms-error,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form textarea.wpforms-error {
  border: 2px solid var(--incite-error);
}

html body div.wpforms-container-full.wpforms-container-full .wpforms-form label.wpforms-error,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form em.wpforms-error {
  display: block;
  margin-top: 6px;
  padding-left: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.5h.01'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 2px;
  font-family: var(--incite-font-body);
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  color: var(--incite-error);
}

/* the keyboard ring on the form's buttons (Submit, Next, Back, Add, Remove) - they only darkened before. The
   theme's button rules for these use !important, so this does too. */
html body div.wpforms-container-full.wpforms-container-full .wpforms-form button:focus-visible,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form input[type="submit"]:focus-visible,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-page-button:focus-visible {
  outline: 2px solid var(--incite-blue) !important;
  outline-offset: 2px !important;
}

/* WPForms' "medium" fields were 60% of the column on some forms and full width on others - full width on all */
html body div.wpforms-container-full.wpforms-container-full .wpforms-form input.wpforms-field-medium,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form select.wpforms-field-medium,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form textarea.wpforms-field-medium,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-medium {
  max-width: 100%;
}

/* fields filled in for you and not editable (the training course and date): shaded, no focus ring */
html body div.wpforms-container-full.wpforms-container-full .wpforms-form input[readonly],
html body div.wpforms-container-full.wpforms-container-full .wpforms-form textarea[readonly] {
  border-color: var(--incite-border);
  background-color: var(--incite-surface-alt);
  color: var(--incite-text);
}

html body div.wpforms-container-full.wpforms-container-full .wpforms-form input[readonly]:focus,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form textarea[readonly]:focus {
  border-color: var(--incite-border-strong);
  box-shadow: none;
}

/* the LE2 users block was a "medium" (60%) block inside a full-width form - full width like the rest */
html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-field-layout-rows.wpforms-field-medium,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-field-repeater .wpforms-field-medium,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-field-repeater .wpforms-layout-column-100 {
  max-width: 100%;
  width: 100%;
}

/* section headings inside a form: one size, the forms' 22px / 600 (a repeating group's numbered copies were 700,
   and the international credit form's own heading 24px) */
html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-field-repeater-block-title,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-field-html h3 {
  margin: 0 0 12px;
  font-family: var(--incite-font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--incite-ink);
}

/* WPForms' own "Step 1 of 2" (the international credit form) drawn like the Australian form's phone step count:
   a plain line of text over a 4px bar in the accent colour, not a thick grey rounded bar */
html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-page-indicator.progress {
  margin: 0 0 22px;
}

html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-page-indicator.progress .wpforms-page-indicator-steps {
  margin: 0 0 8px;
  font-family: var(--incite-font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--incite-ink);
}

html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress-wrap {
  height: 4px;
  border-radius: 2px;
  background-color: var(--incite-rule);
}

html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress {
  height: 4px;
  border-radius: 2px;
}

/* the phone-number field's country button: its keyboard ring inside the field, not spilling over it */
html body div.wpforms-container-full.wpforms-container-full .wpforms-form .iti__selected-country:focus-visible,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form .iti__selected-flag:focus-visible,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form .iti--allow-dropdown .iti__country-container .iti__selected-country:focus-visible {
  outline: 2px solid var(--incite-blue) !important;
  outline-offset: -3px !important;
  box-shadow: none !important;
}

/* the international credit form's Back (functions.php moves it beside Next): the same quiet button as every
   other Back */
html body .incite_shop.incite_fp #incite-cra-4 .wpforms-form #incite_fp_back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 90px;
  min-height: 44px;
  margin: 0;
  padding: 0 22px;
  border: 1px solid var(--incite-blue);
  border-radius: var(--incite-radius);
  background-color: var(--incite-surface);
  background-image: none;
  box-shadow: none;
  font-family: var(--incite-font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--incite-blue);
  cursor: pointer;
}

html body .incite_shop.incite_fp #incite-cra-4 .wpforms-form #incite_fp_back:hover,
html body .incite_shop.incite_fp #incite-cra-4 .wpforms-form #incite_fp_back:focus {
  border-color: var(--incite-blue-dark);
  background-color: var(--incite-blue-tint);
  color: var(--incite-blue-dark);
}

/* the file drop area (RMA proof of purchase, credit authority letter) */
html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-uploader {
  border: 1px dashed var(--incite-border-strong);
  border-radius: var(--incite-radius-panel);
  background: var(--incite-surface-alt);
  color: var(--incite-muted);
}

html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-uploader:hover {
  border-color: var(--incite-blue);
}

/* keyboard focus lands on the drop area's hidden file input - show it on the area */
html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-uploader:focus-within,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-field-file-upload:has(.dropzone-input:focus-visible) .wpforms-uploader {
  border-color: var(--incite-blue);
  box-shadow: 0 0 0 3px var(--incite-blue-ring);
}

/* the "Add" / "Remove" buttons of repeating rows (LE2 users): outlined, like the site's other second buttons
   (colours and size only - WPForms decides when they show) */
html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-field-repeater-button-add,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-field-repeater-button-remove,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form [data-button-type] button.wpforms-field-repeater-button-add,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form [data-button-type] button.wpforms-field-repeater-button-remove {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--incite-blue);
  border-radius: var(--incite-radius);
  background: var(--incite-surface);
  font-family: var(--incite-font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--incite-blue);
  opacity: 1;
}

html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-field-repeater-button-add:hover,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-field-repeater-button-remove:hover,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form [data-button-type] button.wpforms-field-repeater-button-add:hover,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form [data-button-type] button.wpforms-field-repeater-button-remove:hover {
  background: var(--incite-blue-tint);
  color: var(--incite-blue-dark);
}

html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-field-repeater-button-remove.wpforms-disabled,
html body div.wpforms-container-full.wpforms-container-full .wpforms-form [data-button-type] button.wpforms-field-repeater-button-remove.wpforms-disabled {
  border-color: var(--incite-disabled);
  color: var(--incite-disabled-text);
  opacity: 0.6;
}

/* * * * * BAR ABOVE THE HEADER * * * * */

.incite_rd-bar {
  background: #0f1113;
  color: #c9cdd1;
  font-family: var(--incite-font-body);
  font-size: 13px;
  line-height: 1.4;
}

.incite_rd-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 36px;
}

.incite_rd-bar-links {
  display: flex;
  align-items: center;
  gap: 22px;
  white-space: nowrap;
}

.incite_rd-bar a {
  color: #e6e8ea;
  text-decoration: none;
}

.incite_rd-bar a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.incite_rd-bar .incite_rd-bar-phone {
  color: #ffffff;
  font-weight: 600;
}

/* * * * * HEADER AND MENU * * * * */

html #site-header {
  border-bottom: 1px solid #2a2e33;
}

/* The header stays pinned to the top of the window as the page scrolls (the bar above it and the test banner below
   it scroll away). Logged-in staff have WordPress's toolbar pinned above it, so it stops under that - except on
   phones under 600px, where the toolbar scrolls away with the page. --incite-rd-header-h is the header's height,
   measured by redesign.php's script, for everything that has to stop below it. */
:root {
  --incite-rd-header-h: 65px;
}

html body #site-header {
  position: sticky;
  top: 0;
  z-index: 2000;
}

@media screen and (min-width: 601px) {
  html body.admin-bar #site-header {
    top: var(--wp-admin--admin-bar--height, 32px);
  }
}

/* links to a place on the page (#...) stop below the pinned header */
html {
  scroll-padding-top: calc(var(--incite-rd-header-h) + 16px);
}

/* The pop-ups - the order review (the summary's Submit My Order), the Quick List and the website agreement - open
   below the pinned header, which stays above them (they were 75px from the top of the window, under the header),
   and end 16px above the bottom of the window. --incite-rd-top is the header, plus WordPress's toolbar above it for
   logged-in staff. */
:root {
  --incite-rd-top: var(--incite-rd-header-h);
}

@media screen and (min-width: 601px) {
  html body.admin-bar {
    --incite-rd-top: calc(var(--incite-rd-header-h) + var(--wp-admin--admin-bar--height, 32px));
  }
}

html body .incite_qa-content.incite_quicklist,
html body .incite_qa-content.incite_reviewframe,
html body .incite_agreement-content.incite_agreementbox {
  margin-top: calc(var(--incite-rd-top) + 16px);
  height: auto;
  max-height: calc(100% - var(--incite-rd-top) - 32px);
}

/* the Products panel opens below the pinned header, so it scrolls inside itself on shorter screens instead of
   running off the bottom */
@media only screen and (min-width: 959.02px) {
  html #site-navigation-wrap .dropdown-menu > li.menu-item:has(> a[href$="/product-category/"]) > ul.sub-menu {
    max-height: calc(100vh - var(--incite-rd-header-h) - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* a little taller than the Customizer's 48px, with room around the logo */
@media only screen and (min-width: 959.02px) {

  html #site-logo #site-logo-inner {
    height: 64px;
  }

  html #site-logo #site-logo-inner a img {
    max-height: 40px;
  }

  html #site-navigation-wrap .dropdown-menu > li > a {
    line-height: 64px;
  }
}

/* hover, open and the section you are in: white with a red bar under it (instead of yellow text) */
html #site-navigation-wrap .dropdown-menu > li > a:hover,
html #site-navigation-wrap .dropdown-menu > li.sfHover > a,
html #site-navigation-wrap .dropdown-menu > li.current-menu-item > a,
html #site-navigation-wrap .dropdown-menu > li.current-menu-ancestor > a {
  color: #ffffff;
  box-shadow: inset 0 -3px 0 var(--incite-blue);
}

html #site-navigation-wrap .dropdown-menu > li > a.menu-link {
  font-family: var(--incite-font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* The header is 1280px wide at every screen size, and with OceanWP's 16px either side of each of the ten menu
   items the menu is too wide to sit beside the logo, so it dropped onto a second row (the current theme does
   the same). A little less space between the items keeps the logo and menu on one row. */
html #site-navigation-wrap .dropdown-menu > li > a {
  padding-left: 10px;
  padding-right: 10px;
}

/* narrower windows, down to where the phone menu takes over at 959px (below about 1024px the menu still has
   to drop under the logo - there is not room for ten items beside it) */
@media only screen and (min-width: 959.02px) and (max-width: 1279px) {

  html #site-navigation-wrap .dropdown-menu > li > a {
    padding-left: 7px;
    padding-right: 7px;
  }

  html #site-navigation-wrap .dropdown-menu > li > a.menu-link {
    font-size: 14px;
    letter-spacing: 0.02em;
  }
}

@media only screen and (min-width: 959.02px) and (max-width: 1199px) {

  html #site-navigation-wrap .dropdown-menu > li > a {
    padding-left: 5px;
    padding-right: 5px;
  }

  html #site-navigation-wrap .dropdown-menu > li > a.menu-link {
    font-size: 13px;
    letter-spacing: 0;
  }
}

/* a drop-down near the right of the header (Information, redesign.php): its fly-outs open to the left, so they stay on
   the screen, their arrows pointing that way */
@media only screen and (min-width: 959.02px) {

  html body #site-navigation-wrap .dropdown-menu > li.incite_rd-menu-flip ul.sub-menu ul.sub-menu {
    left: auto;
    right: 100%;
  }

  html body #site-navigation-wrap .dropdown-menu > li.incite_rd-menu-flip ul.sub-menu .nav-arrow {
    transform: rotate(180deg);
  }
}

/* * * * * HEADER DROP-DOWNS AND SEARCH PANEL * * * * */

/* OceanWP draws a 3px bar in the accent colour along the top of every drop-down and the search panel - a
   coloured top stripe. A hairline edge and the floating-panel shadow instead (the Products panel already has
   none). The search panel's field is the site's field, with the red focus ring. */
html body #site-header .dropdown-menu .sub-menu.sub-menu,
html body #site-header #searchform-dropdown,
html body #site-header #icon-searchform-dropdown {
  border-top: 1px solid var(--incite-border);
  box-shadow: 0 18px 36px rgba(15, 17, 19, 0.22);
}

html body #site-header #searchform-dropdown {
  width: 400px;
  padding: 14px;
  border-radius: 0 0 var(--incite-radius-panel) var(--incite-radius-panel);
  background: #ffffff;
}

html body #site-header #searchform-dropdown input.field,
html body #mobile-dropdown .mobile-searchform input,
html body .sidr .mobile-searchform input {
  height: 46px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid var(--incite-border-strong);
  border-radius: var(--incite-radius);
  background: #ffffff;
  font-family: var(--incite-font-body);
  font-size: 15px;
  color: var(--incite-ink);
}

html body #site-header #searchform-dropdown input.field:focus,
html body #mobile-dropdown .mobile-searchform input:focus,
html body .sidr .mobile-searchform input:focus {
  border-color: var(--incite-blue);
  box-shadow: 0 0 0 3px var(--incite-blue-ring);
  outline: none;
}

/* the field and its Search button (redesign.php) joined in one 46px box, like the search on Home */
html body #site-header #searchform-dropdown form.searchform {
  display: flex;
  align-items: stretch;
}

html body #site-header #searchform-dropdown form.searchform input.field {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  border-right: 0;
  border-radius: var(--incite-radius) 0 0 var(--incite-radius);
}

html body #site-header #searchform-dropdown .incite_rd-searchbtn {
  flex: 0 0 auto;
  height: 46px;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 0 var(--incite-radius) var(--incite-radius) 0;
  background: var(--incite-blue);
  color: #ffffff;
  font-family: var(--incite-font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 46px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

html body #site-header #searchform-dropdown .incite_rd-searchbtn:hover,
html body #site-header #searchform-dropdown .incite_rd-searchbtn:focus {
  background: var(--incite-blue-dark);
  color: #ffffff;
}

html body #site-header #searchform-dropdown .incite_rd-searchbtn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -5px;
}

/* * * * * SIMPLE DROP-DOWNS AND THE PHONE MENU * * * * */

/* The Information, Videos, Training, My Account and Contact drop-downs kept OceanWP's 12px capitalised #333 on
   #f8f8f8 ("Book A Course", a five-line notice title). The site's type instead: 14px Plex, as written, in the ink
   colour, the accent on hover. (The Products panel's own rules are stronger and unaffected.) */
html body #site-navigation-wrap .dropdown-menu ul.sub-menu li a.menu-link {
  font-family: var(--incite-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--incite-ink);
}

html body #site-navigation-wrap .dropdown-menu ul.sub-menu li a.menu-link:hover,
html body #site-navigation-wrap .dropdown-menu ul.sub-menu li.sfHover > a.menu-link {
  background-color: var(--incite-surface-alt);
  color: var(--incite-blue);
}

/* The phone menu: its links in the ink colour (OceanWP's #333), no 400px box that hid Contact Us and the search
   below its fold (it now fits the screen, scrolling only if it must), the empty cart entry of a logged-out
   visitor left out, and the search moved to the top with a proper Search button */
html body #mobile-dropdown {
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
}

html body #mobile-dropdown ul li a {
  color: var(--incite-ink);
}

html body #mobile-dropdown ul li a:hover {
  color: var(--incite-blue);
}

/* the phone menu's sub-menus: the full width of the menu (a bare .sub-menu {width: 280px} for the desktop
   drop-downs also caught them, so their rows and +/- stopped short), and each level stepped in 16px from the one
   above (every row sat at the same 40px, so a sub-category looked like one more category) */
html body #mobile-dropdown ul.sub-menu {
  width: auto;
}

html body #mobile-dropdown ul.sub-menu > li > a {
  padding-left: 56px;
}

html body #mobile-dropdown ul.sub-menu ul.sub-menu > li > a {
  padding-left: 72px;
}

html body #mobile-dropdown ul.sub-menu ul.sub-menu ul.sub-menu > li > a {
  padding-left: 88px;
}

html body #mobile-dropdown ul.sub-menu ul.sub-menu ul.sub-menu ul.sub-menu > li > a {
  padding-left: 104px;
}

/* the Specials entry when there are no specials: its label is only a script that takes the link away, but it looks
   for the desktop menu's links (class menu-link) - the phone menu's link has no class, so it stayed as an empty row
   at the top of Products */
html body #mobile-dropdown li:has(> a > script:only-child) {
  display: none;
}

html body #mobile-dropdown li.menu-item-7426:has(> a:empty) {
  display: none;
}

html body #mobile-dropdown > nav {
  display: flex;
  flex-direction: column;
}

html body #mobile-dropdown #mobile-menu-search {
  order: -1;
  padding: 14px 20px;
  border-bottom: 1px solid var(--incite-border);
}

html body #mobile-dropdown .mobile-searchform {
  position: relative;
}

/* (OceanWP's rules here use two ids and !important, so these do too) */
html body #mobile-dropdown #mobile-menu-search form input {
  padding-right: 60px !important;
}

html body #mobile-dropdown #mobile-menu-search form .searchform-submit {
  position: absolute;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 52px !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 var(--incite-radius) var(--incite-radius) 0 !important;
  background-color: var(--incite-blue) !important;
  color: #ffffff !important;
  line-height: 46px !important;
  transform: none !important;
}

html body #mobile-dropdown #mobile-menu-search form .searchform-submit:hover,
html body #mobile-dropdown #mobile-menu-search form .searchform-submit:focus {
  background-color: var(--incite-blue-dark) !important;
  color: #ffffff !important;
}

html body #mobile-dropdown #mobile-menu-search form .searchform-submit:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: -5px !important;
}

/* * * * * THE FLOATING HEADER * * * * */
/* Over Home's opening, until the page moves, there is no bar: the logo and the menu sit on the drawing, ruled off by
   one fine white line, the red bar of the item open or hovered resting on it. Once the page is scrolled - and on every
   other page - the line gives way to a floating pane of dark glass, 12px down from the top of the window (8px on
   phones), the page showing through it blurred (redesign.php sets data-rd-scrolled). The logo and the menu stay put
   as one becomes the other: they keep to the page's column, and the glass reaches 20px past them each side (10px on
   phones). The opening on Home and the title band on every other page run up underneath it. The drop-downs, the two
   full-width panels and the phone menu open as panels of their own just under it, as wide as the glass.
   --incite-rd-header-h is the bar's height plus the gap above it (measured by redesign.php), so the test banner, the
   pop-ups and links to a place on the page all stop below it as before. */
:root {
  --incite-rd-float-gap: 12px;
  --incite-rd-glass-out: 20px;
}

@media only screen and (max-width: 959px) {
  :root {
    --incite-rd-float-gap: 8px;
    --incite-rd-glass-out: 10px;
  }
}

html body #site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding-top: var(--incite-rd-float-gap);
  border-bottom: 0;
  background: transparent !important;
  box-shadow: none;
  pointer-events: none;   /* only the bar and the phone menu take the pointer - the gap around them is the page */
}

@media screen and (min-width: 601px) {
  html body.admin-bar #site-header {
    top: var(--wp-admin--admin-bar--height, 32px);
  }
}

html body #site-header #site-header-inner,
html body #site-header #mobile-dropdown {
  pointer-events: auto;
}

html body #site-header #site-header-inner {
  position: relative;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
}

/* the glass and the line are drawn behind the logo and the menu (so the red bar of an open item sits on the line) */
html body #site-header #site-header-inner::before,
html body #site-header #site-header-inner::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* How one becomes the other. The glass grows out of the line: it starts as the line's own strip and opens upwards and
   out to its full size, settling softly, while the line fades into its foot. Back at the top it folds down into the
   line again, a little quicker, and the line comes back as it lands. Nothing else moves - the logo and the menu stay
   exactly where they are. (Its full size reaches past the glass so its shadow is not clipped.) */
:root {
  --incite-rd-glass-shut: inset(calc(100% - 2px) var(--incite-rd-glass-out) 0 var(--incite-rd-glass-out));
  --incite-rd-glass-open: inset(-24px -40px -56px -40px);
}

/* the glass */
html body #site-header #site-header-inner::before {
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--incite-rd-glass-out));
  right: calc(-1 * var(--incite-rd-glass-out));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--incite-radius-panel);
  background: rgba(14, 15, 17, 0.86);   /* deep graphite glass: reads over white pages; what scrolls under shows through */
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 12px 32px rgba(0, 0, 0, 0.28);
  clip-path: var(--incite-rd-glass-open);
  transition: clip-path 0.52s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease-out;
}

/* the line: the width of the column, a little heavier than the drawing's own lines */
html body #site-header #site-header-inner::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.42);
  visibility: visible;   /* (OceanWP's clearfix hides this one) */
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

/* over Home's opening, until the page moves: the line, no glass */
html:not([data-rd-scrolled]) body:has(.incite_rd-hero) #site-header #site-header-inner::before {
  opacity: 0;
  clip-path: var(--incite-rd-glass-shut);
  transition: clip-path 0.36s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.16s ease-in 0.2s;
}

html:not([data-rd-scrolled]) body:has(.incite_rd-hero) #site-header #site-header-inner::after {
  opacity: 1;
  transition: opacity 0.2s ease-out 0.24s;
}

/* no blur to be had, or less transparency asked for: near solid */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body #site-header #site-header-inner::before {
    background: rgba(14, 15, 17, 0.94);
  }
}

@media (prefers-reduced-transparency: reduce) {
  html body #site-header #site-header-inner::before {
    background: rgba(14, 15, 17, 0.96);
  }
}

/* less motion asked for: the glass does not grow - the line and the glass simply cross-fade */
@media (prefers-reduced-motion: reduce) {
  html body #site-header #site-header-inner::before,
  html:not([data-rd-scrolled]) body:has(.incite_rd-hero) #site-header #site-header-inner::before {
    clip-path: var(--incite-rd-glass-open);
    transition: opacity 0.2s ease;
  }

  html body #site-header #site-header-inner::after,
  html:not([data-rd-scrolled]) body:has(.incite_rd-hero) #site-header #site-header-inner::after {
    transition: opacity 0.2s ease;
  }
}

/* the page runs up under it: Home's opening, the title band everywhere else, or the top of the page where there is
   no title band */
html body .incite_rd-hero {
  padding-top: var(--incite-rd-header-h);
}

html body:not(:has(.incite_rd-hero)) .page-header {
  padding-top: calc(var(--incite-rd-header-h) + 28px);
}

html body:not(:has(.incite_rd-hero)):not(:has(.page-header)) #main {
  padding-top: var(--incite-rd-header-h);
}

/* the drop-downs and the two full-width panels: a panel of their own, 8px under the bar. While one is open, an
   invisible strip under its heading, as wide as the panel, bridges that gap - so moving down into it does not close it
   (the strip belongs to the heading's own item, as the panels scroll and clip anything outside themselves) */
@media only screen and (min-width: 959.02px) {

  html #site-navigation-wrap .dropdown-menu > li > ul.sub-menu {
    margin-top: 8px;
    border-radius: var(--incite-radius-panel);
  }

  html #site-navigation-wrap .dropdown-menu > li.menu-item-has-children::after {
    content: "";
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: max(100%, 320px);
    height: 10px;
  }

  html #site-navigation-wrap .dropdown-menu > li.menu-item-has-children:hover::after,
  html #site-navigation-wrap .dropdown-menu > li.menu-item-has-children.sfHover::after {
    display: block;
  }

  /* the full-width panels' strip runs the width of the bar (their items are placed from the bar, not themselves) */
  html #site-navigation-wrap .dropdown-menu > li.incite_rd-menu-panel::after,
  html #site-navigation-wrap .dropdown-menu > li.menu-item:has(> a[href$="/product-category/"])::after {
    right: 0;
    width: auto;
  }

  /* the plain drop-downs (Training, Contact Us), and any drop-down of their own flying out beside them: the same
     corners, the first and last rows' hover kept inside them (not clipped - that would cut off the fly-out) */
  html #site-navigation-wrap .dropdown-menu > li:not(.incite_rd-menu-panel):not(:has(> a[href$="/product-category/"])) ul.sub-menu {
    border-radius: var(--incite-radius-panel);
    box-shadow: 0 18px 36px rgba(15, 17, 19, 0.22);
  }

  html #site-navigation-wrap .dropdown-menu > li:not(.incite_rd-menu-panel):not(:has(> a[href$="/product-category/"])) ul.sub-menu > li:first-child > a.menu-link {
    border-top-left-radius: var(--incite-radius-panel);
    border-top-right-radius: var(--incite-radius-panel);
  }

  html #site-navigation-wrap .dropdown-menu > li:not(.incite_rd-menu-panel):not(:has(> a[href$="/product-category/"])) ul.sub-menu > li:last-child > a.menu-link {
    border-bottom-left-radius: var(--incite-radius-panel);
    border-bottom-right-radius: var(--incite-radius-panel);
  }

  /* those fly-outs open to the left, their arrow turned to match - the menu sits at the right of the header, so one
     opening to the right ran off the window */
  html #site-navigation-wrap .dropdown-menu > li:not(.incite_rd-menu-panel):not(:has(> a[href$="/product-category/"])) ul.sub-menu ul.sub-menu {
    left: auto;
    right: 100%;
  }

  html #site-navigation-wrap .dropdown-menu > li:not(.incite_rd-menu-panel):not(:has(> a[href$="/product-category/"])) ul.sub-menu .nav-arrow {
    transform: rotate(180deg);
  }

  html #site-navigation-wrap .dropdown-menu > li.menu-item:has(> a[href$="/product-category/"]) > ul.sub-menu,
  html #site-navigation-wrap .dropdown-menu > li.incite_rd-menu-panel > ul.sub-menu {
    max-height: calc(100vh - var(--incite-rd-header-h) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* the two full-width panels: as wide as the glass */
  html body #site-header #site-navigation-wrap .dropdown-menu > li.menu-item:has(> a[href$="/product-category/"]) > ul.sub-menu,
  html body #site-header #site-navigation-wrap .dropdown-menu > li.incite_rd-menu-panel > ul.sub-menu {
    left: calc(-1 * var(--incite-rd-glass-out));
    right: calc(-1 * var(--incite-rd-glass-out));
  }

  /* (BUG-071) Contact Us, the last heading, opens leftwards from its right edge so it stays inside the window on laptops
     (its hover bridge too) */
  html #site-navigation-wrap .dropdown-menu > li.menu-item-has-children:has(> a[href$="/contact-us/"]) > ul.sub-menu {
    left: auto;
    right: 0;
  }

  html #site-navigation-wrap .dropdown-menu > li.menu-item-has-children:has(> a[href$="/contact-us/"])::after {
    left: auto;
    right: 0;
  }

  /* the search panel too: 8px under the bar, with the same corners, its right edge on the glass's */
  html body #site-header #searchform-dropdown {
    right: calc(-1 * var(--incite-rd-glass-out));
    margin-top: 8px;
    border-radius: var(--incite-radius-panel);
  }
}

/* the phone menu: a panel the width of the glass, just under it, scrolling inside itself */
@media only screen and (max-width: 959px) {

  html body #site-header #mobile-dropdown {
    box-sizing: border-box;
    left: 0;
    right: 0;
    width: calc(var(--incite-rd-bar-w, calc(100% - 40px)) + 2 * var(--incite-rd-glass-out));
    margin: 8px auto 0;
    border-radius: var(--incite-radius-panel);
    max-height: calc(100vh - var(--incite-rd-header-h) - 16px);
    max-height: calc(100dvh - var(--incite-rd-header-h) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 18px 36px rgba(15, 17, 19, 0.28);
  }
}

/* * * * * PAGE TITLES (every page except Home) * * * * */

/* OceanWP's grey title band, in the site's type: breadcrumbs above a large title rather than squeezed in on
   the right, and a rule under it */
html .page-header {
  padding: 28px 0 26px;
  border-bottom: 1px solid var(--incite-border);
  background-color: var(--incite-surface-alt);
}

html .page-header .page-header-inner {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 6px;
}

html .page-header .page-header-title {
  margin: 0;
  color: var(--incite-ink);
  font-family: var(--incite-font-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
}

html .page-header .site-breadcrumbs {
  position: static;
  max-width: 100%;
  height: auto;
  margin: 0;
  color: var(--incite-muted);
  font-size: 13px;
  line-height: 1.5;
  white-space: normal;
}

html .page-header .site-breadcrumbs a {
  color: var(--incite-blue);
}

html .page-header .site-breadcrumbs a:hover {
  color: var(--incite-blue-dark);
  text-decoration: underline;
}

html .page-header .site-breadcrumbs .breadcrumb-sep {
  margin: 0 7px;
  color: #aab0b6;
}

/* Pages built in Elementor keep their content in Elementor's own 1140px column (a comfortable line length for
   reading), so on those pages the title lines up with that column instead of the wider site column (the 10px
   matches the padding inside Elementor's columns) */
html body:has(#content-wrap .elementor-top-section.elementor-section-boxed) .page-header .container {
  width: 1140px;
}

html body:has(#content-wrap .elementor-top-section.elementor-section-boxed) .page-header .page-header-inner {
  padding-left: 10px;
  padding-right: 10px;
}

/* The form pages (Credit Application, trade account, RMA request, Support - incite_form_page() in functions.php)
   use the same 1140px column as the Elementor pages, title included */
html body:not(.boxed-layout) #wrap #content-wrap.incite_fp-wrap {
  width: 1140px;
}

html body:has(#content-wrap.incite_fp-wrap) .page-header .container {
  width: 1140px;
}

/* ... and 10px in from that column's edge, like the Elementor pages, so the title and the text start at the same
   place on every reading page */
@media (min-width: 768px) {
  html body:not(.boxed-layout) #wrap #content-wrap.incite_fp-wrap,
  html body:has(#content-wrap.incite_fp-wrap) .page-header .page-header-inner {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* phones: the page's own 5% edge (20px) is enough - Elementor's column padding and the title's 10px added another
   10px, so the reading pages sat further in than Home, the shop and the forms. The container is drawn out by its
   columns' 10px, so their text lands on the 20px edge and a coloured column keeps its 10px inside */
@media (max-width: 767px) {
  html body:has(#content-wrap .elementor-top-section.elementor-section-boxed) .page-header .page-header-inner {
    padding-left: 0;
    padding-right: 0;
  }

  html body #content-wrap .elementor-top-section.elementor-section-boxed > .elementor-container {
    margin-left: -10px;
    margin-right: -10px;
  }
}

/* Elementor's text blocks: the site's 15px body text at a reading line height (they took OceanWP's 14px / 1.8),
   and paragraphs held to a readable line length inside the 1140px column (a block given its own size in Elementor
   keeps it) */
html body :where(#content-wrap) .elementor-widget-text-editor {
  font-size: 15px;
  line-height: 1.6;
}

html body :where(#content-wrap .elementor-widget-text-editor) :is(p, ul, ol, div:not([class])) {
  max-width: 75ch;
}

/* a product's title is already beside its picture, so its band just shows the breadcrumbs (the title stays in
   the page for screen readers and search engines, as the page's main heading) */
html body.single-product .page-header {
  padding: calc(var(--incite-rd-header-h) + 14px) 0 14px;   /* (BUG-071) under the floating header, not behind it */
}

html body.single-product .page-header .page-header-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* * * * * THE PRODUCTS MENU AS A FULL-WIDTH PANEL (desktop only - the phone menu is unchanged) * * * * */
/* The Products item is found by its link, so this works whatever its menu id is. Its categories flow down
   newspaper-style columns with their sub-categories listed underneath (they no longer fly out sideways). */

@media only screen and (min-width: 959.02px) {

  html #site-header-inner {
    position: relative;
  }

  /* the panel is measured from the header, not from the menu (OceanWP positions the menu to nudge it 15px
     right - the negative margin keeps that nudge) */
  html #site-navigation-wrap {
    position: static;
    margin-right: -15px;
  }

  html #site-navigation-wrap .dropdown-menu > li.menu-item:has(> a[href$="/product-category/"]) {
    position: static;
  }

  html #site-navigation-wrap .dropdown-menu > li.menu-item:has(> a[href$="/product-category/"]) > ul.sub-menu {
    left: 0;
    right: 0;
    width: auto !important;
    max-width: none;
    column-count: 5;
    column-gap: 32px;
    column-rule: 1px solid var(--incite-rule);
    padding: 26px 30px 12px;
    border-top: 0;
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(15, 17, 19, 0.22);
  }

  /* each category, kept whole within a column */
  html #site-navigation-wrap .dropdown-menu > li.menu-item:has(> a[href$="/product-category/"]) > ul.sub-menu > li {
    break-inside: avoid;
    display: block;
    margin: 0 0 16px;
  }

  /* the specials menu item has no text when there are no specials */
  html #site-navigation-wrap .dropdown-menu > li.menu-item:has(> a[href$="/product-category/"]) > ul.sub-menu > li:empty {
    display: none;
  }

  html #site-navigation-wrap .dropdown-menu > li.menu-item:has(> a[href$="/product-category/"]) > ul.sub-menu > li > a.menu-link {
    padding: 0 0 5px;
    border: 0;
    background: none;
    color: var(--incite-ink);
    font-family: var(--incite-font-display);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
  }

  /* the sub-categories: always shown, as a plain list under their category */
  html #site-navigation-wrap .dropdown-menu > li.menu-item:has(> a[href$="/product-category/"]) ul.sub-menu ul.sub-menu {
    display: block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  html #site-navigation-wrap .dropdown-menu > li.menu-item:has(> a[href$="/product-category/"]) ul.sub-menu ul.sub-menu a.menu-link {
    padding: 3px 0;
    border: 0;
    background: none;
    color: var(--incite-text);
    font-family: var(--incite-font-body);
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
  }

  /* a sub-category's own sub-categories (ASD > 2000 Series > Accessories, Detectors) indented under it on a hairline,
     so they read as part of it and not as more sub-categories of the heading */
  html #site-navigation-wrap .dropdown-menu > li.menu-item:has(> a[href$="/product-category/"]) ul.sub-menu ul.sub-menu ul.sub-menu {
    margin: 0 0 4px 2px;
    padding-left: 12px;
    border-left: 1px solid var(--incite-rule);
  }

  html #site-navigation-wrap .dropdown-menu > li.menu-item:has(> a[href$="/product-category/"]) ul.sub-menu a.menu-link:hover {
    color: var(--incite-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  html #site-navigation-wrap .dropdown-menu > li.menu-item:has(> a[href$="/product-category/"]) ul.sub-menu .nav-arrow {
    display: none;
  }
}

/* * * * * THE INFORMATION MENU AS A FULL-WIDTH PANEL (desktop only - the phone menu is unchanged) * * * * */
/* The menu is condensed to four headings (incite_rd_menu_regroup in redesign.php): everything to read and look up is
   under Information, which opens like Products - a full-width panel, here four columns side by side: Application
   Notes, Videos, Product Notices, Company. Each column's heading over its list, and a page's own pages (the notes
   under an application, the notices under Discontinuation Notices, the statements under Warranty Statement) indented
   under it, as in Products - at any depth. */

@media only screen and (min-width: 959.02px) {

  html #site-navigation-wrap .dropdown-menu > li.incite_rd-menu-panel {
    position: static;
  }

  html #site-navigation-wrap .dropdown-menu > li.incite_rd-menu-panel > ul.sub-menu {
    left: 0;
    right: 0;
    width: auto !important;
    max-width: none;
    column-count: 4;
    column-gap: 32px;
    column-rule: 1px solid var(--incite-rule);
    padding: 26px 30px 22px;
    border-top: 0;
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(15, 17, 19, 0.22);
  }

  /* one column each */
  html #site-navigation-wrap .dropdown-menu > li.incite_rd-menu-panel > ul.sub-menu > li {
    break-inside: avoid;
    display: block;
    margin: 0;
  }

  html #site-navigation-wrap .dropdown-menu > li.incite_rd-menu-panel > ul.sub-menu > li + li {
    break-before: column;
  }

  html #site-navigation-wrap .dropdown-menu > li.incite_rd-menu-panel > ul.sub-menu > li > a.menu-link {
    padding: 0 0 8px;
    border: 0;
    background: none;
    color: var(--incite-ink);
    font-family: var(--incite-font-display);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
  }

  /* Product Notices and Company are headings only */
  html #site-navigation-wrap .dropdown-menu > li.incite_rd-menu-panel > ul.sub-menu > li > a.menu-link:not([href]) {
    cursor: default;
  }

  /* each column's list: always shown, plain */
  html #site-navigation-wrap .dropdown-menu > li.incite_rd-menu-panel ul.sub-menu ul.sub-menu {
    display: block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  /* a page's own pages indented under it on a hairline, so they read as part of it and not as more of the heading's
     (each level deeper steps in again) */
  html #site-navigation-wrap .dropdown-menu > li.incite_rd-menu-panel ul.sub-menu ul.sub-menu ul.sub-menu {
    margin: 0 0 4px 2px;
    padding-left: 12px;
    border-left: 1px solid var(--incite-rule);
  }

  html #site-navigation-wrap .dropdown-menu > li.incite_rd-menu-panel ul.sub-menu ul.sub-menu a.menu-link {
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--incite-text);
    font-family: var(--incite-font-body);
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
  }

  html #site-navigation-wrap .dropdown-menu > li.incite_rd-menu-panel ul.sub-menu a.menu-link[href]:hover {
    color: var(--incite-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  html #site-navigation-wrap .dropdown-menu > li.incite_rd-menu-panel ul.sub-menu .nav-arrow {
    display: none;
  }
}

/* the cart (logged in) is at the end of the menu; logged out there is nothing in it, so no gap either - in the header,
   and no empty row in the phone menu */
html #site-navigation-wrap .dropdown-menu > li:has(> a[href$="/cart/"] > .text-wrap:empty),
html #mobile-dropdown li:has(> a[href$="/cart/"]:empty) {
  display: none;
}

/* * * * * DELIGHT (this test theme only) * * * * */

/* The status light in front of Browse the range, in the kit's own signal, reading the search: a slow red blink while
   it is empty, like a detector polling on its loop; steady green once what is typed looks like a product code;
   steady white while words are typed (front-page.php) */
.incite_rd-home .incite_rd-hero-links {
  display: flex;
  align-items: center;
  gap: 9px;
}

.incite_rd-led {
  flex: 0 0 auto;
  align-self: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4a3d;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  opacity: 0.28;
  animation: incite-rd-poll 4s ease-out infinite;
}

@keyframes incite-rd-poll {
  0%, 90%, 100% {
    opacity: 0.28;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  }

  93% {
    opacity: 1;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 7px 1px rgba(255, 74, 61, 0.75);
  }
}

.incite_rd-hero-links[data-state="code"] .incite_rd-led {
  animation: none;
  opacity: 1;
  background: #46d27a;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 8px 1px rgba(70, 210, 122, 0.6);
}

.incite_rd-hero-links[data-state="words"] .incite_rd-led {
  animation: none;
  opacity: 0.9;
  background: #f2f2f2;
}

/* 1300 INCITE shows its keypad digits: pointing at it (or reaching it by keyboard) rolls each letter over to the
   number on its key, one after another - I 4, N 6, C 2, I 4, T 8, E 3. The digits are also printed under it. */
.incite_rd-keys {
  display: inline;
  white-space: nowrap;
}

/* each letter keeps its own width; its digit waits just below it (drawn by CSS, so it is neither copied nor read
   out - the link still reads "1300 INCITE") and the two roll up together */
.incite_rd-key {
  position: relative;
  display: inline-block;
  min-width: 0;
  height: 1.1em;
  text-align: center;
  /* impeccable-disable-next-line layout-transition -- six inline letters on hover: the digits are wider than the letters, so the neighbours must move (a transform cannot) */
  transition: min-width 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i) * 45ms);
  overflow-x: visible;
  overflow-y: clip;
  vertical-align: top;
}

.incite_rd-key > span {
  display: inline-block;
}

.incite_rd-key > span,
.incite_rd-key::after {
  line-height: 1.1;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i) * 45ms);
}

.incite_rd-key::after {
  content: attr(data-d) / "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.incite_rd-support-phone:is(:hover, :focus-visible) .incite_rd-key {
  min-width: 0.56em;   /* a digit's width, so the narrow I's make room and the digits come out evenly spaced */
}

/* ...and open the space the number is written with, 1300 462 483 */
.incite_rd-key:nth-child(3) {
  margin-right: 0;
  /* impeccable-disable-next-line layout-transition -- the same, for the space in 1300 462 483 */
  transition-property: min-width, margin-right;
}

.incite_rd-support-phone:is(:hover, :focus-visible) .incite_rd-key:nth-child(3) {
  margin-right: 0.28em;
}

.incite_rd-support-phone:is(:hover, :focus-visible) .incite_rd-key > span {
  transform: translateY(-100%);
}

.incite_rd-support-phone:is(:hover, :focus-visible) .incite_rd-key::after {
  transform: translate(-50%, -100%);
}

/* the hover underline is drawn under the whole number (the text underline stops at the rolling letters, which sit
   in their own boxes): 2px at the foot of the number's own line, clear of the digits printed under it, and it
   stretches with the digits as they roll */
.incite_rd-home .incite_rd-support-phone {
  background: linear-gradient(currentColor, currentColor) left bottom / 0 2px no-repeat;
}

.incite_rd-home .incite_rd-support-phone:hover {
  text-decoration: none;
  background-size: 100% 2px;
}

@media (prefers-reduced-motion: reduce) {
  .incite_rd-led {
    animation: none;
    opacity: 0.6;
  }

  .incite_rd-key,
  .incite_rd-key > span,
  .incite_rd-key::after {
    transition: none;
  }
}

/* On touch screens the Home page's text links answer a finger across a 44px band - an invisible pad around each
   (centred on it, a little wider), so nothing on the page moves */
@media (pointer: coarse) {

  .incite_rd-bar .incite_rd-bar-phone,
  .incite_rd-hero-links a,
  .incite_rd-range-controls > a,
  .incite_rd-home .incite_rd-support-phone,
  .incite_rd-home .incite_rd-support-mail,
  .incite_rd-trade-credit,
  .incite_rd-brands .incite_rd-brands-list a {
    position: relative;
  }

  .incite_rd-bar .incite_rd-bar-phone::before,
  .incite_rd-hero-links a::before,
  .incite_rd-range-controls > a::before,
  .incite_rd-home .incite_rd-support-phone::before,
  .incite_rd-home .incite_rd-support-mail::before,
  .incite_rd-trade-credit::before,
  .incite_rd-brands-list a::before {
    content: "";
    position: absolute;
    top: calc(50% - 22px);
    bottom: calc(50% - 22px);
    left: -6px;
    right: -6px;
  }

  /* (two that need the room itself: the bar above the header, which the pinned header would otherwise cover the
     lower half of the phone number's pad, and the brands, whose rows sit closer together than 44px) */
  .incite_rd-bar-inner {
    min-height: 44px;
  }

}

/* * * * * MOTION (this test theme only) * * * * */

/* One authored moment as the page opens: the headline rises into place out of a slot. It runs once, is over in
   under a second, and the search is usable from the first moment (it does not move). Then, further down, the three
   trade-account steps fill in one after another as they come into view, each divider drawing across as its step
   arrives - the order of the steps is the point. Nothing here runs for anyone who has asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {

  .incite_rd-home .incite_rd-hero-title {
    animation: incite-rd-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .incite_rd-motion .incite_rd-trade-steps li {
    border-top-color: transparent;
    background: linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.28)) left top / 0 1px no-repeat;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease-out, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-size 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .incite_rd-motion .incite_rd-trade-steps li:nth-child(2) {
    transition-delay: 0.16s;
  }

  .incite_rd-motion .incite_rd-trade-steps li:nth-child(3) {
    transition-delay: 0.32s;
  }

  .incite_rd-motion .incite_rd-trade-steps.incite_rd-steps-in li {
    background-size: 100% 1px;
    opacity: 1;
    transform: none;
  }
}

/* The live surface (hero-live.js): the opening's surface relit by a light that follows the mouse, on a canvas over
   the picture and under the darkening gradient and the text. With the light at rest it draws exactly the picture, so
   it goes in without anything visibly swapping. hero-live.js does nothing on touch screens or with reduced motion, so
   this rule then never applies. */
.incite_rd-hero-live {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@keyframes incite-rd-rise {
  from {
    clip-path: inset(100% 0 0 0);
    transform: translateY(0.35em);
  }

  to {
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}

/* * * * * MY WEB ORDERS - TRACKING * * * * */

/* Each delivery's tracking number on its own line, under the carrier that has it - the number in the site's
   monospace, as codes are, so it reads and copies cleanly (incite_web_orders_tracking() in functions.php) */
.incite_shop .incite_weborders-tracking {
  display: block;
}

.incite_shop .incite_weborders-tracking + .incite_weborders-tracking {
  margin-top: 6px;
}

.incite_shop .incite_weborders-carrier {
  display: block;
  color: var(--incite-muted);
  font-size: 13px;
  line-height: 1.3;
}

.incite_shop .incite_weborders-trackno {
  font-family: var(--incite-font-mono);
  font-weight: 500;
  color: var(--incite-ink);
  user-select: all;   /* one click selects the whole number to copy */
}

/* (BUG-064) a carrier with online tracking: the number opens the carrier's page for it in a new tab - coloured and
   underlined on hover like the web order numbers, with the new-tab mark after it */
.incite_shop a.incite_weborders-tracklink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--incite-blue);
  text-decoration: none;
  user-select: auto;
}

.incite_shop a.incite_weborders-tracklink:hover {
  color: var(--incite-blue-dark);
  text-decoration: underline;
}

.incite_shop a.incite_weborders-tracklink svg {
  flex: none;
}

/* * * * * MY WEB ORDERS - INVOICES (BUG-068) * * * * */

/* Each order's invoices and credits, laid out as its tracking is: the type over the number, in the site's monospace.
   Where there is a copy to download, the number is a button that downloads it - coloured like the tracking links,
   with a download mark (incite_web_orders_invoice_links() in functions.php) */
.incite_shop .incite_weborders-invoices {
  display: block;
}

.incite_shop .incite_weborders-invoice {
  display: block;
  margin: 0;
}

.incite_shop .incite_weborders-invoice + .incite_weborders-invoice {
  margin-top: 6px;
}

.incite_shop .incite_weborders-invoicetype {
  display: block;
  color: var(--incite-muted);
  font-size: 13px;
  line-height: 1.3;
}

.incite_shop .incite_weborders-invoiceno {
  font-family: var(--incite-font-mono);
  font-weight: 500;
  color: var(--incite-ink);
  user-select: all;
}

.incite_shop button.incite_weborders-invoicelink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--incite-blue);
  font-size: inherit;
  line-height: inherit;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  user-select: auto;
}

.incite_shop button.incite_weborders-invoicelink:hover {
  background: none;
  color: var(--incite-blue-dark);
  text-decoration: underline;
}

.incite_shop button.incite_weborders-invoicelink:focus-visible {
  outline: 2px solid var(--incite-blue);
  outline-offset: 2px;
}

.incite_shop button.incite_weborders-invoicelink svg {
  flex: none;
}

/* the invoice list: the sales order(s) an invoice was raised for, each on its own line under the invoice's reference -
   a link when it is one of the login's own web orders */
.incite_shop .incite_invoices-order {
  display: block;
  margin-top: 2px;
  color: var(--incite-muted);
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
}

.incite_shop a.incite_invoices-order {
  color: var(--incite-blue);
  text-decoration: none;
}

.incite_shop a.incite_invoices-order:hover {
  color: var(--incite-blue-dark);
  text-decoration: underline;
}

/* * * * * SITE: HOW THE SITE ANSWERS (this test theme only) * * * * */

/* The site answers the way the kit it sells answers: a detector's status light polls while it is working and goes
   steady once something is confirmed. The Home search's light set that language; here it carries to the moments
   that matter across the site - waiting on the server, an order placed, a form sent, a code copied, a product added -
   and to the few overlays and timers where movement shows what is happening. Everything else stays still.
   For anyone who has asked for reduced motion nothing here travels or grows: the status lights still change in
   brightness, and the two timers (the 404 page's, the logout warning's) still run, because they are the information. */

/* Waiting on the server - the cart, the account, saving, placing an order (incite_loader_show() in functions.php):
   the grey spinner is now a detector head seen from below, its status light polling while a red ring runs round it.
   It appears only once the wait passes a quarter of a second, so quick pages don't flash it. The scripts still show
   and hide it with its visibility, and it keeps its place and z-index. */
html body .incite_loader {
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  margin: 0;
  border: 1px solid #d5d8db;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: visible;
  /* the face: a centre cap, a ring of chamber vents, the moulded rim */
  background:
    radial-gradient(circle, #fdfdfd 0 10px, #d9dcdf 10.5px 11px, transparent 11.5px),
    radial-gradient(circle, transparent 0 16px, #d9dcdf 16.5px 17px, #fbfbfb 17.5px),
    repeating-conic-gradient(#c3c7cb 0 7deg, #f4f4f2 7deg 18deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  opacity: 0;
  animation: none;
  transition: opacity 0.15s ease-out;
}

html body .incite_loader[style*="visible"] {
  opacity: 1;
  transition-delay: 0.25s;
}

/* its light */
html body .incite_loader::before {
  content: "";
  position: absolute;
  left: 41px;
  top: 41px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--incite-blue);
  opacity: 0.3;
}

/* the ring */
html body .incite_loader::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2px solid transparent;
  border-top-color: var(--incite-blue);
  border-radius: 50%;
}

/* (only while it shows - hidden, nothing runs) */
html body .incite_loader[style*="visible"]::before {
  animation: incite-rd-poll-fast 1.1s ease-out infinite;
}

html body .incite_loader[style*="visible"]::after {
  animation: incite-rd-sweep 0.9s linear infinite;
}

@keyframes incite-rd-poll-fast {
  0%, 40%, 100% {
    opacity: 0.3;
    box-shadow: none;
  }

  12% {
    opacity: 1;
    box-shadow: 0 0 6px 1px rgba(200, 38, 29, 0.7);
  }
}

@keyframes incite-rd-sweep {
  to {
    transform: rotate(360deg);
  }
}

/* An order placed (the cart's confirmation, incite_ordered): where the order stands, at a glance - received (done,
   green), confirmed by our sales team (next, its light polling a few times), dispatched or ready to collect (still to
   come, an outline) */
.incite_shop .incite_ordered-steps li:first-child .incite_ordered-number {
  background: var(--incite-success);
}

.incite_shop .incite_ordered-steps li:nth-child(3) .incite_ordered-number {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--incite-border-strong);
  color: var(--incite-muted);
}

/* A form sent (credit application, trade account, RMA, LE2 - WPForms' confirmation on the form pages): the same
   confirmed mark as an order placed, instead of WPForms' plain box (doubled class: WPForms prints its CSS after ours) */
html body .incite_fp-wrap .wpforms-confirmation-container-full.wpforms-confirmation-container-full {
  position: relative;
  margin: 0 0 24px;
  padding: 24px 28px 24px 86px;
  border: 1px solid var(--incite-border);
  border-radius: var(--incite-radius-panel);
  background: var(--incite-surface);
  color: var(--incite-ink);
  font-size: 16px;
  line-height: 1.6;
}

html body .incite_fp-wrap .wpforms-confirmation-container-full.wpforms-confirmation-container-full p {
  margin: 0 0 8px;
}

html body .incite_fp-wrap .wpforms-confirmation-container-full.wpforms-confirmation-container-full p:last-child {
  margin-bottom: 0;
}

html body .incite_fp-wrap .wpforms-confirmation-container-full.wpforms-confirmation-container-full::before,
html body .incite_fp-wrap .wpforms-confirmation-container-full.wpforms-confirmation-container-full::after {
  content: "";
  position: absolute;
  display: block;
}

html body .incite_fp-wrap .wpforms-confirmation-container-full.wpforms-confirmation-container-full::before {
  left: 28px;
  top: 22px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--incite-success-tint);
}

html body .incite_fp-wrap .wpforms-confirmation-container-full.wpforms-confirmation-container-full::after {
  left: 38px;
  top: 32px;
  width: 22px;
  height: 22px;
  background: var(--incite-success);
  -webkit-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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media only screen and (max-width: 600px) {

  html body .incite_fp-wrap .wpforms-confirmation-container-full.wpforms-confirmation-container-full {
    padding: 74px 20px 20px;
  }

  html body .incite_fp-wrap .wpforms-confirmation-container-full.wpforms-confirmation-container-full::before {
    left: 20px;
    top: 20px;
  }

  html body .incite_fp-wrap .wpforms-confirmation-container-full.wpforms-confirmation-container-full::after {
    left: 30px;
    top: 30px;
  }
}

/* The RMA request (BUG-056, functions.php): the notice under the invoice date (advisory in amber; a Change of Mind
   request that cannot go ahead in the error red), each return reason's checklist as a ruled list, and the Australian
   Consumer Law line just above the submit button */
html body .incite_fp-rma .incite_rma-notice {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid #e9d3ad;
  border-radius: var(--incite-radius);
  background: #fbf3e6;
  color: #6b4600;
  font-size: 14px;
  line-height: 1.5;
}

html body .incite_fp-rma .incite_rma-notice.incite_rma-notice-block {
  border-color: #efc2bf;
  background: var(--incite-error-tint);
  color: var(--incite-error-dark);
}

html body .incite_fp-rma div.wpforms-container-full .wpforms-form .incite_rma-checklist .wpforms-field-label {
  font-family: var(--incite-font-display);
  font-size: 19px;
  font-weight: 600;
}

html body .incite_fp-rma div.wpforms-container-full .wpforms-form .incite_rma-checklist ul {
  border-top: 1px solid var(--incite-border-strong);
}

html body .incite_fp-rma div.wpforms-container-full .wpforms-form .incite_rma-checklist ul li {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--incite-rule);
}

html body .incite_fp-rma div.wpforms-container-full .wpforms-form .incite_rma-checklist ul li label {
  line-height: 1.45;
}

html body .incite_fp-rma div.wpforms-container-full .wpforms-form .incite_rma-checklist .wpforms-field-description a {
  color: var(--incite-blue);
  font-weight: 500;
}

html body .incite_fp-rma .incite_rma-acl {
  margin: 8px 0 16px;
  color: var(--incite-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Copy code (product pages, redesign.php): copied, the link turns to a green tick and "Copied" */
html body .incite_rd-copycode button[data-copied],
html body .incite_rd-copycode button[data-copied]:hover {
  color: var(--incite-success);
  text-decoration: none;
}

html body .incite_rd-copycode button[data-copied]::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  background: currentColor;
  -webkit-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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Quick List (cart): each product added gets a steady green light by its line - the Home search's "confirmed" */
.incite_shop .incite_quicklist-added::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--incite-success);
  box-shadow: 0 0 0 3px rgba(46, 107, 58, 0.16);
  vertical-align: 1px;
}

/* Where a web order is up to (the order page - incite_web_orders_track() in functions.php): the order-placed steps
   carried on past the confirmation. Four stages on a rule - those done in green with their tick, the one it is at now
   in red, its light polling three times as the page opens, those still to come an outline. */
.incite_shop .incite_rd-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 4px 0 26px;
  padding: 0;
  list-style: none;
}

.incite_shop .incite_rd-track li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 0;
  font-family: var(--incite-font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--incite-muted);
}

/* the mark */
.incite_shop .incite_rd-track li::before {
  content: "";
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: inset 0 0 0 1.5px var(--incite-border-strong);
}

/* the rule to the next stage */
.incite_shop .incite_rd-track li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 18px;
  right: 0;
  height: 2px;
  background: var(--incite-rule);
}

.incite_shop .incite_rd-track li.incite_rd-track-done,
.incite_shop .incite_rd-track li.incite_rd-track-now {
  color: var(--incite-ink);
}

.incite_shop .incite_rd-track li.incite_rd-track-done::before {
  background: var(--incite-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: none;
}

.incite_shop .incite_rd-track li.incite_rd-track-done:not(:last-child)::after {
  background: var(--incite-success);
}

.incite_shop .incite_rd-track li.incite_rd-track-now {
  font-weight: 700;
}

.incite_shop .incite_rd-track li.incite_rd-track-now::before {
  background: var(--incite-blue);
  box-shadow: inset 0 0 0 5px var(--incite-blue), inset 0 0 0 9px #ffffff;
}

@media only screen and (max-width: 600px) {

  .incite_shop .incite_rd-track li {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: no-preference) {

  .incite_shop .incite_rd-track li.incite_rd-track-now::before {
    animation: incite-rd-track-now 1.6s ease-out 0.5s 3;
  }
}

@keyframes incite-rd-track-now {
  0% {
    box-shadow: inset 0 0 0 5px var(--incite-blue), inset 0 0 0 9px #ffffff, 0 0 0 0 rgba(200, 38, 29, 0.45);
  }

  100% {
    box-shadow: inset 0 0 0 5px var(--incite-blue), inset 0 0 0 9px #ffffff, 0 0 0 9px rgba(200, 38, 29, 0);
  }
}

/* The 404 page moves to the home page after 3 seconds (404.php): the time left, as a line running down under
   "We'll take you to the home page in a moment" */
html body .incite_rd-404 .incite_rd-404-text::after {
  content: "";
  display: block;
  width: 240px;
  max-width: 100%;
  height: 2px;
  margin-top: 16px;
  background: linear-gradient(var(--incite-blue), var(--incite-blue)) left / 100% 100% no-repeat, var(--incite-rule);
  animation: incite-rd-timer 3s linear both;
}

@keyframes incite-rd-timer {
  to {
    background-size: 0 100%, auto;
  }
}

/* The logout warning (logged in, 2 minutes before the session ends - functions.php): the stopwatch's face runs down
   over those 2 minutes, beside the seconds counting in words */
.incite_session[style*="visible"] .incite_dialog-warning svg circle {
  stroke-dasharray: 50.3;
  transform: rotate(-90deg);
  transform-box: view-box;
  transform-origin: 12px 13px;
  animation: incite-rd-rundown 120s linear both;
}

@keyframes incite-rd-rundown {
  to {
    stroke-dashoffset: 50.3;
  }
}

@media (prefers-reduced-motion: no-preference) {

  /* the order confirmed: the mark seats and its tick draws, then the three steps arrive in order and the next one's
     light polls three times */
  .incite_shop .incite_ordered-icon {
    animation: incite-rd-seat 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .incite_shop .incite_ordered-icon path {
    stroke-dasharray: 21;
    animation: incite-rd-draw 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.25s both;
  }

  .incite_shop .incite_ordered-steps li {
    animation: incite-rd-arrive 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
  }

  .incite_shop .incite_ordered-steps li:nth-child(2) {
    animation-delay: 0.55s;
  }

  .incite_shop .incite_ordered-steps li:nth-child(3) {
    animation-delay: 0.65s;
  }

  .incite_shop .incite_ordered-steps li:nth-child(2) .incite_ordered-number {
    animation: incite-rd-next 1.6s ease-out 1.1s 3;
  }

  /* a form sent: the same */
  html body .incite_fp-wrap .wpforms-confirmation-container-full.wpforms-confirmation-container-full::before {
    animation: incite-rd-seat 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  html body .incite_fp-wrap .wpforms-confirmation-container-full.wpforms-confirmation-container-full::after {
    animation: incite-rd-wipe 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.25s both;
  }

  /* each step of a form comes in (WPForms shows one page at a time), and the list of steps down the side changes over */
  .incite_fp-wrap .wpforms-page {
    animation: incite-rd-arrive 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .incite_shop .incite_fp-stepnav li,
  .incite_shop .incite_fp-stepnav-number {
    transition: color 0.25s ease-out;
  }

  /* copied: the tick draws */
  html body .incite_rd-copycode button[data-copied]::before {
    animation: incite-rd-wipe 0.3s cubic-bezier(0.65, 0, 0.35, 1) both;
  }

  /* a product added in the Quick List: its line comes in */
  .incite_shop .incite_quicklist-added {
    animation: incite-rd-arrive 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* a quantity changed in the cart: its Update button nudges once, so the unsaved change is noticed */
  .incite_shop .incite_button_changed {
    animation: incite-rd-nudge 0.5s ease-out;
  }

  /* the overlays - a message after an action, Remove all?, the Quick List, the order review, the logout warning -
     come in over a fading backdrop instead of snapping on; they still go at once */
  .incite_information,
  .incite_question {
    animation: incite-rd-fade 0.2s ease-out;
  }

  .incite_information-content,
  .incite_question-content {
    animation: incite-rd-lift 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .incite_qa,
  .incite_session {
    opacity: 0;
    transition: opacity 0.2s ease-out;
  }

  .incite_qa[style*="visible"],
  .incite_session[style*="visible"] {
    opacity: 1;
  }

  .incite_qa-content,
  .incite_session-content {
    translate: 0 12px;
    transition: translate 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .incite_qa[style*="visible"] .incite_qa-content,
  .incite_session[style*="visible"] .incite_session-content {
    translate: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  /* the loader's ring stands still; its light still polls */
  html body .incite_loader[style*="visible"]::after {
    animation: none;
  }
}

@keyframes incite-rd-seat {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

@keyframes incite-rd-draw {
  from {
    stroke-dashoffset: 21;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes incite-rd-wipe {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes incite-rd-arrive {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes incite-rd-next {
  0% {
    box-shadow: 0 0 0 0 rgba(200, 38, 29, 0.45);
  }

  100% {
    box-shadow: 0 0 0 9px rgba(200, 38, 29, 0);
  }
}

@keyframes incite-rd-nudge {
  0% {
    box-shadow: 0 0 0 0 rgba(200, 38, 29, 0.5);
  }

  100% {
    box-shadow: 0 0 0 3px var(--incite-blue-ring);
  }
}

@keyframes incite-rd-fade {
  from {
    opacity: 0;
  }
}

@keyframes incite-rd-lift {
  from {
    opacity: 0;
    translate: 0 10px;
  }
}

/* * * * * HOME * * * * */

/* the new pages run edge to edge under the header (OceanWP pads the content area 50px top and bottom) */
html #main #content-wrap.incite_rd-home,
html #main #content-wrap.incite_rd-contact {
  padding-top: 0;
  padding-bottom: 0;
}

.incite_rd-home,
.incite_rd-contact {
  font-family: var(--incite-font-body);
  color: var(--incite-text);
}

.incite_rd-home h1,
.incite_rd-home h2,
.incite_rd-home h3,
.incite_rd-contact h1,
.incite_rd-contact h2,
.incite_rd-contact h3 {
  margin: 0;
  padding: 0;
  font-family: var(--incite-font-display);
  text-transform: none;
}

.incite_rd-home p,
.incite_rd-contact p {
  margin: 0;
}

/* Opening */
/* the background: a light grey low-poly picture (hero-poly-light.jpg, in this theme's folder, upscaled 4x from the
   original), under a smooth gradient that darkens it from the left - darkest at the left edge (#3c3c3c on average,
   the account box's colour; neutral greys, no blue in them), easing gently lighter across the whole width to about
   60% of the picture's brightness on the right. It multiplies rather than covers, so the facets show through the
   dark side too. The easing is slow at first so everything behind the headline, text and search stays dark enough for white text (4.6:1 at the worst,
   the end of a line at 960px over the palest facet); on tablets and phones it runs top to bottom instead.
   Also in the folder: the dark generated pattern (hero-poly.svg, with hero-poly-tall.svg for tablets and phones),
   the smoke pictures (hero-smoke-photo.jpg, hero-smoke.jpg - they need the red version's tablet and phone rules)
   and the fire alarm layout drawing (hero-plan.svg, the commented-out rules below) */
.incite_rd-hero {
  /* the picture: hero-poly-mesh.svg (generated by hero-poly-mesh.py, drawn as vectors so it is sharp at any size) - a
     low-poly surface lit from the top right, the very surface hero-live.js relights as the mouse moves (it draws
     exactly this picture when its light is at rest). Other pictures in the folder (no moving light with them):
     hero-poly-gen.svg, the earlier evenly lit facets, and hero-poly-light.jpg, the original picture */
  --incite-rd-hero-image: url("hero-poly-mesh.svg");
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #3c3c3c;
  background-image: var(--incite-rd-hero-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  color: #d6d6d6;
}

/* the darkening gradient, multiplied over the picture - and over the live surface when it is drawn, so both sit
   under the same values */
.incite_rd-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, #545454 0%, #545454 40%, #555555 45%, #585858 50%, #5c5c5c 55%, #626262 60%, #686868 65%, #6f6f6f 70%, #777777 75%, #7e7e7e 80%, #858585 85%, #8b8b8b 90%, #919191 95%, #959595 100%);
  mix-blend-mode: multiply;
}

/* the text and the account box above both */
.incite_rd-hero .incite_rd-hero-inner {
  position: relative;
  z-index: 2;
}


/* .incite_rd-hero {
  background-color: #1c1f22;
  background-image: url("hero-plan.svg"), radial-gradient(ellipse 50% 80% at 92% 50%, rgba(200, 38, 29, 0.22), transparent 70%);
  background-repeat: no-repeat;
  background-size: cover, auto;
  background-position: right center, center;
  color: #d5d8db;
} */

.incite_rd-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 56px;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 60px;
}

/* * * * * THE OPENING: A SECURITON ASD 2004 AND A DETECTOR, AS LINE SKETCHES (line sketch v2) * * * * */
/* The account box has gone from the opening (Log in is the red button in the header), so the text has the opening to
   itself. Beside it, standing on the bottom of the opening towards the middle, is a line sketch of a Securiton
   SecuriSmoke ASD 2004 (hero-asdsketch.svg, inline - drawn from Securiton's renders): a dimension line on its right
   like a drawing, its display strip in dark glass with the green power LED and the two red fire LEDs lit, and its four
   sampling pipes running down out of the bottom of the opening. (v3) Across the top runs the ceiling, in section, and
   to the right of the ASD the Hochiki heat detector hangs from it, seen from the side (g.sk-ceiling, its red LED
   flashing now and then like a detector polling); in the bottom right corner is the same detector face-on from below,
   running off the edges (g.sk-det) - the two views of it, as on a datasheet. Both are in the same svg: Chrome would not
   paint a second inline svg with its own draw-in there. On tablets the ceiling is left out and the face-on detector
   goes to the top right; on small tablets and phones there is just the ASD.
   As the page opens the ASD's lines draw themselves in, then the detector's; then the LEDs come on and air is drawn up
   the pipes into the ASD - which is what an aspirating detector does - and keeps flowing.
   The drawing is 384 x 560 (the ASD's housing 300 x 405 at 24, 50), shown --incite-rd-asd-w wide; the detector is
   drawn round its own centre and moved out past the drawing's box (up and to the right) per size. The line weights
   are set per size, so they look the same at every width. */
.incite_rd-hero-text {
  max-width: 600px;
}

.incite_rd-hero-inner {
  grid-template-columns: minmax(0, 1fr);
  min-height: 520px; /* tall enough for the ASD's pipes to show under it */
  align-items: start; /* the headline stays level with the drawing's ceiling */
}

.incite_rd-hero .incite_rd-hero-inner {
  z-index: 3;
}

.incite_rd-hero {
  --incite-rd-asd-w: 262px;
}

/* the ASD stands on the bottom of the opening, its pipes running out of it, close under the detector in the top right
   (both set from the right edge; never nearer the text than 660px) */
.incite_rd-asd {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: max(660px, calc(100% - 570px));
  width: var(--incite-rd-asd-w);
  aspect-ratio: 384 / 560;
  pointer-events: none;
}

/* (the pipes and the detector run on past the drawing's box - more specific than OceanWP's svg:not(:root) overflow:
   hidden) */
.incite_rd-asd .incite_rd-asdsketch {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.incite_rd-asdsketch path {
  fill: none;
  stroke: #ffffff;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* faint fills, so it reads as an object on the surface: the front, the top and right faces a little less, and the
   display strip's dark glass */
.incite_rd-asdsketch .sk-body {
  fill: rgba(255, 255, 255, 0.06);
  stroke: none;
}

.incite_rd-asdsketch .sk-side {
  fill: rgba(255, 255, 255, 0.03);
  stroke: none;
}

.incite_rd-asdsketch .sk-glass {
  fill: rgba(12, 13, 15, 0.55);
  stroke: none;
}

/* Securiton's logo across the top of the strip, printed in white as on the unit */
.incite_rd-asdsketch .sk-logo path {
  fill: #ffffff;
  stroke: none;
  opacity: 0.88;
}

.incite_rd-asdsketch .sk-guide {
  stroke-width: 1.2;
  opacity: 0.34;
}

.incite_rd-asdsketch .sk-main {
  stroke-width: 2.4;
  opacity: 0.92;
}

.incite_rd-asdsketch .sk-fine {
  stroke-width: 1.4;
  opacity: 0.7;
}

/* the strip's printed marks (as fine as on the unit), white; the dots filled */
.incite_rd-asdsketch .sk-print {
  stroke-width: 1;
  opacity: 0.88;
}

.incite_rd-asdsketch .sk-print-fill {
  fill: #ffffff;
  stroke: none;
  opacity: 0.8;
}

/* the marks that show only when lit (wireless, airflow level, fault) - faint, as on the unit when all is well */
.incite_rd-asdsketch .sk-unlit {
  opacity: 0.24;
}

/* the strip's marks for things that are not lit */
.incite_rd-asdsketch .sk-off {
  opacity: 0.36;
}

.incite_rd-asdsketch .sk-shine {
  opacity: 0.3;
}

.incite_rd-asdsketch .sk-hatch {
  stroke-width: 1.1;
  opacity: 0.4;
}

/* (v3) the detector face-on (the first face-on sketch, hero-topsketch.svg): in the bottom right corner, running off
   the right and the bottom - its centre about 60px in from the right and 80px up from the bottom, in drawing units from
   where the ASD stands. Above it the same detector hangs from the ceiling, seen from the side (g.sk-ceiling, drawn in
   place right of the ASD) - the two views of it, as on a datasheet. */
.incite_rd-asdsketch .sk-det {
  transform: translate(724px, 392px);
}

.incite_rd-asdsketch .sk-dot {
  fill: #ffffff;
  opacity: 0.4;
}

/* the air in the pipes: short dashes up the middle of each */
.incite_rd-asdsketch .sk-flow {
  stroke-width: 1.8;
  stroke-dasharray: 2 16;
  opacity: 0.55;
}

.incite_rd-asdsketch .sk-led-glow {
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
}

.incite_rd-asdsketch .sk-led-fire .sk-led-glow {
  fill: url(#asd-glow-red);
}

.incite_rd-asdsketch .sk-led-power .sk-led-glow {
  fill: url(#asd-glow-green);
  opacity: 0.8;
}

.incite_rd-asdsketch .sk-led-fire .sk-led-mark {
  stroke: #ff4a3d;
  stroke-width: 1;
  fill: rgba(255, 59, 47, 0.28);
}

.incite_rd-asdsketch .sk-led-sensor .sk-led-glow {
  fill: url(#asd-glow-red);
  opacity: 0.35;
}

.incite_rd-asdsketch .sk-led-core {
  fill: #ff3b2f;
  opacity: 0.75;
}

.incite_rd-asdsketch .sk-led-power .sk-led-mark {
  stroke: #52e08f;
  stroke-width: 1.1;
}

/* narrower desktops: a shorter text column, the drawing a little smaller */
@media only screen and (min-width: 959.02px) and (max-width: 1179px) {

  .incite_rd-hero-text {
    max-width: 540px;
  }

  .incite_rd-hero-inner {
    min-height: 424px;
  }

  .incite_rd-hero {
    --incite-rd-asd-w: 226px;
  }

  .incite_rd-asd {
    left: max(590px, calc(100% - 434px));
  }

  .incite_rd-asdsketch .sk-det {
    transform: translate(724px, 392px);
  }

  /* (v3) the opening is shorter here, so the ceiling comes down a little, level with the headline, and the detector
     hanging from it moves along it to the left, clear of the right edge */
  .incite_rd-asdsketch .sk-ceiling {
    transform: translate(0, 30px);
  }

  .incite_rd-asdsketch .sk-ceiling .sk-hang {
    transform: translate(-110px, 0);
  }

  .incite_rd-asdsketch .sk-led.sk-hang {
    transform: translate(-110px, 30px);
  }

  .incite_rd-asdsketch .sk-guide { stroke-width: 1.4; }
  .incite_rd-asdsketch .sk-main { stroke-width: 2.8; }
  .incite_rd-asdsketch .sk-fine { stroke-width: 1.65; }
  .incite_rd-asdsketch .sk-hatch { stroke-width: 1.3; }
  .incite_rd-asdsketch .sk-flow { stroke-width: 2.1; }
  .incite_rd-asdsketch .sk-led-mark { stroke-width: 1.2 !important; }
  .incite_rd-asdsketch .sk-print { stroke-width: 1.2; }
}

/* tablets: smaller, the text column held narrower so it stops short of it */
@media only screen and (max-width: 959px) {

  .incite_rd-hero-inner {
    min-height: 0;
  }

  .incite_rd-hero-text {
    max-width: 470px;
  }

  .incite_rd-hero {
    --incite-rd-asd-w: 190px;
  }

  .incite_rd-asd {
    left: auto;
    right: 48px;
  }

  .incite_rd-asdsketch .sk-det {
    transform: translate(356px, -355px);
  }

  /* (v3) no room for the ceiling and its detector beside the headline - the face-on one goes back to the top right */
  .incite_rd-asdsketch .sk-ceiling {
    display: none;
  }

  .incite_rd-asdsketch .sk-guide { stroke-width: 1.8; }
  .incite_rd-asdsketch .sk-main { stroke-width: 3.5; }
  .incite_rd-asdsketch .sk-fine { stroke-width: 2.1; }
  .incite_rd-asdsketch .sk-hatch { stroke-width: 1.6; }
  .incite_rd-asdsketch .sk-flow { stroke-width: 2.6; }
  .incite_rd-asdsketch .sk-led-mark { stroke-width: 1.5 !important; }
  .incite_rd-asdsketch .sk-print { stroke-width: 1.5; }
}

/* small tablets: no room for the detector beside the headline */
@media only screen and (max-width: 719px) {

  .incite_rd-asdsketch .sk-det {
    display: none;
  }
}

/* phones: the text takes the width, so the ASD sits low on the right, beside Browse the range, its
   pipes running out of the bottom (the opening is a little taller there to make the room) */
@media only screen and (max-width: 600px) {

  .incite_rd-hero .incite_rd-hero-inner {
    padding-bottom: 150px;
  }

  .incite_rd-hero {
    --incite-rd-asd-w: 108px;
  }

  .incite_rd-asd {
    right: 8px;
  }

  .incite_rd-asdsketch .sk-guide { stroke-width: 3.2; }
  .incite_rd-asdsketch .sk-main { stroke-width: 6.2; }
  .incite_rd-asdsketch .sk-fine { stroke-width: 3.8; }
  .incite_rd-asdsketch .sk-hatch { stroke-width: 2.9; }
  .incite_rd-asdsketch .sk-flow { stroke-width: 4.8; stroke-dasharray: 5 22; }
  .incite_rd-asdsketch .sk-led-mark { stroke-width: 2.4 !important; }
  .incite_rd-asdsketch .sk-print { stroke-width: 2.4; }
}

@keyframes incite-rd-asd-draw {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes incite-rd-asd-on {
  from {
    opacity: 0;
  }
}

/* the air: the dashes move up the pipe by one dash-and-gap each cycle, so it flows without a jump */
@keyframes incite-rd-asd-flow {
  to {
    stroke-dashoffset: 18;
  }
}

@keyframes incite-rd-asd-flow-phone {
  to {
    stroke-dashoffset: 27;
  }
}

/* the sensor's LED: a quick red flash every few seconds, as it is polled */
@keyframes incite-rd-asd-poll {
  0%, 10%, 100% {
    opacity: 0.35;
    transform: scale(1);
  }

  4% {
    opacity: 1;
    transform: scale(1.4);
  }
}

/* the fire LEDs glow a little brighter, and back, in turn */
@keyframes incite-rd-asd-glow {
  0%, 100% {
    opacity: 0.55;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

@media (prefers-reduced-motion: no-preference) {

  /* drawn in, line by line: the dimension lines first, then the housing, the glands and strip, the inlets and pipes,
     and the shading (each line's --d, from hero-asdsketch.py); the fills fade in under them */
  .incite_rd-asdsketch [style*="--d"] {
    stroke-dasharray: 1;
    animation: incite-rd-asd-draw 0.9s cubic-bezier(0.33, 1, 0.68, 1) both;
    animation-delay: calc(0.3s + var(--d, 0s));
  }

  /* the detector face-on follows the ASD and the ceiling (v3) */
  .incite_rd-asdsketch .sk-det [style*="--d"] {
    animation-delay: calc(2s + var(--d, 0s));
  }

  .incite_rd-asdsketch .sk-body,
  .incite_rd-asdsketch .sk-side,
  .incite_rd-asdsketch .sk-glass,
  .incite_rd-asdsketch .sk-logo,
  .incite_rd-asdsketch .sk-dot {
    animation: incite-rd-asd-on 1.2s ease-out 0.8s both;
  }

  /* then the LEDs come on... */
  .incite_rd-asdsketch .sk-led {
    animation: incite-rd-asd-on 0.5s ease-out 2.2s both;
  }

  /* (v3) ...the hanging detector's twin LEDs too - but Chrome does not paint that group at all while it fades in as a
     whole, so its dots fade in on their own instead (the glows already have their own flash) */
  .incite_rd-asdsketch .sk-led.sk-hang {
    animation: none;
  }

  .incite_rd-asdsketch .sk-led.sk-hang .sk-led-core {
    animation: incite-rd-asd-on 0.5s ease-out 2.2s both;
  }

  .incite_rd-asdsketch .sk-led-fire .sk-led-glow {
    animation: incite-rd-asd-glow 3.2s ease-in-out infinite;
    animation-delay: calc(2.7s + var(--i, 0) * 1.6s);
  }

  .incite_rd-asdsketch .sk-led-sensor .sk-led-glow {
    animation: incite-rd-asd-poll 4s ease-out 3s infinite;
  }

  /* ...and air is drawn up the pipes, each pipe at its own pace */
  .incite_rd-asdsketch .sk-flow {
    animation: incite-rd-asd-on 0.8s ease-out 2.4s both, incite-rd-asd-flow 1.3s linear infinite;
    animation-duration: 0.8s, calc(1.2s + var(--i, 0) * 0.13s);
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 600px) {

  .incite_rd-asdsketch .sk-flow {
    animation-name: incite-rd-asd-on, incite-rd-asd-flow-phone;
  }
}

/* * * * * LOG IN IN THE HEADER (sketch test, redesign.php) * * * * */
/* (Desktop rules start at 959.02px, not 960px: OceanWP's phone menu stops at 959px, and with browser zoom the window can
   be a fraction of a pixel wide - 959.5px matched neither, which showed the desktop menu with the tablet's buttons) */
/* The header is laid out as a row: the logo, then the menu pushed right - its last two items the red Log in button and
   the search icon - and on phones and tablets the button beside Menu. */
html #site-header-inner {
  display: flex;
  align-items: center;
}

html #site-header-inner::after {
  display: none;
}

html #site-header-inner > #site-logo {
  float: none;
  margin-right: auto;
}

html #site-header-inner > #site-navigation-wrap {
  float: none;
  order: 1;
}

html #site-header-inner > .incite_rd-headlogin {
  order: 2;
}

html #site-header-inner > .oceanwp-mobile-menu-icon {
  float: none;
  order: 3;
}

.incite_rd-headlogin-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--incite-radius);
  background: var(--incite-blue);
  color: #ffffff;
  font-family: var(--incite-font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.incite_rd-headlogin-button:hover,
.incite_rd-headlogin-button:focus,
.incite_rd-headlogin-button[aria-current="page"] {
  background: var(--incite-blue-dark);
  color: #ffffff;
}

.incite_rd-headlogin-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.incite_rd-headlogin-button svg {
  flex-shrink: 0;
}

/* just the icon (logged in, where the menu already has My Account; and on a crowded header): a square, its name still
   read out */
.incite_rd-headlogin-button.is-account,
html #site-header[data-fit="4"] .incite_rd-headlogin-button {
  justify-content: center;
  width: 38px;
  padding: 0;
}

.incite_rd-headlogin-button.is-account span,
html #site-header[data-fit="4"] .incite_rd-headlogin-button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* desktops: the button is the menu's last item but one, set a little apart from the menu, with the search icon after
   it; the copy beside Menu is for phones and tablets only */
@media only screen and (min-width: 959.02px) {

  html #site-header-inner > .incite_rd-headlogin {
    display: none;
  }

  html #site-navigation-wrap .dropdown-menu > li.incite_rd-headlogin-li {
    display: flex;
    align-items: center;
    height: 64px;
    margin: 0 4px 0 14px;
  }

  /* (OceanWP's menu links are blocks with a 64px line - the button keeps its own layout) */
  html #site-navigation-wrap .dropdown-menu > li.incite_rd-headlogin-li > a.incite_rd-headlogin-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    color: #ffffff;
    font-family: var(--incite-font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
    box-shadow: none;
  }

  html #site-navigation-wrap .dropdown-menu > li.incite_rd-headlogin-li > a.incite_rd-headlogin-button.is-account,
  html #site-header[data-fit="4"] #site-navigation-wrap .dropdown-menu > li.incite_rd-headlogin-li > a.incite_rd-headlogin-button {
    padding: 0;
  }

  /* the search icon, last: a clear 44px target */
  html #site-navigation-wrap .dropdown-menu > li.search-toggle-li > a {
    min-width: 44px;
    text-align: center;
  }
}

/* narrower desktops: a shorter button (no icon) and the menu items a little closer; then, only if the menu still does
   not fit on one row, the steps redesign.php's script sets (data-fit 1-4) */
@media only screen and (min-width: 959.02px) and (max-width: 1439px) {

  html #site-navigation-wrap .dropdown-menu > li.incite_rd-headlogin-li {
    margin-left: 8px;
  }

  html #site-navigation-wrap .dropdown-menu > li.incite_rd-headlogin-li > a.incite_rd-headlogin-button {
    height: 36px;
    padding: 0 12px;
    font-size: 14px;
    letter-spacing: 0.03em;
  }

  .incite_rd-headlogin-button:not(.is-account) svg {
    display: none;
  }

  html #site-header[data-fit="4"] .incite_rd-headlogin-button svg {
    display: block;
  }

  html #site-navigation-wrap .dropdown-menu > li.incite_rd-headlogin-li > a.incite_rd-headlogin-button.is-account,
  html #site-header[data-fit="4"] #site-navigation-wrap .dropdown-menu > li.incite_rd-headlogin-li > a.incite_rd-headlogin-button {
    width: 36px;
  }
}

@media only screen and (min-width: 1280px) and (max-width: 1439px) {

  html #site-navigation-wrap .dropdown-menu > li > a {
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media only screen and (min-width: 959.02px) and (max-width: 1099px) {

  html #site-navigation-wrap .dropdown-menu > li > a {
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* the steps, when the menu has not fitted on one row */
@media only screen and (min-width: 959.02px) {

  html #site-header[data-fit] #site-navigation-wrap .dropdown-menu > li > a.menu-link {
    padding-left: 3px;
    padding-right: 3px;
  }

  html #site-header[data-fit] #site-navigation-wrap .dropdown-menu > li.incite_rd-headlogin-li {
    margin-left: 6px;
  }

  html #site-header[data-fit="2"] #site-navigation-wrap .dropdown-menu > li > a .nav-arrow,
  html #site-header[data-fit="3"] #site-navigation-wrap .dropdown-menu > li > a .nav-arrow,
  html #site-header[data-fit="4"] #site-navigation-wrap .dropdown-menu > li > a .nav-arrow {
    display: none;
  }

  html #site-header[data-fit="3"] #site-navigation-wrap .dropdown-menu > li > a.menu-link,
  html #site-header[data-fit="4"] #site-navigation-wrap .dropdown-menu > li > a.menu-link {
    font-size: 13px;
    letter-spacing: 0;
  }

  html #site-header[data-fit="4"] #site-logo #site-logo-inner a img {
    width: 104px;
    max-height: none;
    height: auto;
  }
}

/* phones and tablets: the button beside Menu (the menu's copy is in the phone menu's list - not shown there) */
@media only screen and (max-width: 959px) {

  html #site-header-inner > .incite_rd-headlogin {
    margin-right: 16px;
  }

  .incite_rd-headlogin-button {
    height: 36px;
    padding: 0 12px;
    font-size: 14px;
  }

  .incite_rd-headlogin-button.is-account {
    width: 36px;
  }
}

html body #mobile-dropdown li.incite_rd-headlogin-li,
html body #site-navigation-wrap li.incite_rd-headlogin-li[hidden] {
  display: none;
}

/* * * * * THE PRODUCTS PAGE (page-products.php) * * * * */
/* The category tiles in a grid - the same tiles as the Home page's range row, three to a row (two on tablets, one on
   phones), each row's tiles the same height */
.incite_rd-section.incite_rd-products-grid-section {
  padding-top: 40px;
  padding-bottom: 64px;
}

.incite_rd-products-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.incite_rd-products-grid .incite_rd-range-item {
  flex: none;
  min-width: 0;
}

@media only screen and (max-width: 959px) {

  .incite_rd-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

@media only screen and (max-width: 600px) {

  .incite_rd-section.incite_rd-products-grid-section {
    padding-top: 24px;
    padding-bottom: 40px;
  }

  .incite_rd-products-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

/* Our range moved by hand: the copies of the tiles that let the glide go round and round are put away, so the row ends
   at the last category, where the bar under it ends (front-page.php's script) */
.incite_rd-range.incite_rd-range-still > .incite_rd-range-copy {
  display: none;
}

/* Our range gliding along by itself: no snapping to tiles while it glides (it would pull back against the glide), and no
   smooth-scrolling of each small step (front-page.php's script) */
.incite_rd-range.incite_rd-range-gliding,
.incite_rd-range.incite_rd-range-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

/* ...and the part of a pixel the scroll cannot move, slid by the tiles themselves (--incite-rd-glide, 0 to -1px), so the
   glide is even instead of a pixel-at-a-time judder */
.incite_rd-range.incite_rd-range-gliding > .incite_rd-range-item {
  transform: translateX(var(--incite-rd-glide, 0px));
  will-change: transform;
}

.incite_rd-hero-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* the headline is a long sentence, so it takes the column's width at a smaller size - three lines, not six */
.incite_rd-home .incite_rd-hero-title {
  max-width: none;
  color: #ffffff;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.06;
}

@media only screen and (min-width: 959.02px) and (max-width: 1179px) {

  .incite_rd-home .incite_rd-hero-title {
    font-size: 40px;
  }
}

.incite_rd-hero-lead {
  max-width: 52ch;
  font-size: 18px;
  line-height: 1.55;
}

.incite_rd-search {
  display: flex;
  max-width: 600px;
  height: 56px;
  margin: 4px 0 0;
  border-radius: var(--incite-radius-panel);
  background: #ffffff;
  overflow: hidden;
}

.incite_rd-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  color: var(--incite-ink);
  font-family: var(--incite-font-body);
  font-size: 16px;
  box-shadow: none;
}

.incite_rd-search button {
  flex: 0 0 auto;
  height: 100%;
  margin: 0;
  padding: 0 26px;
  border: 0;
  /* its right-hand corners rounded as the box's are, so the white border the site gives every button (the theme's
     button setting) follows the corners instead of being cut off by them */
  border-radius: 0 var(--incite-radius-panel) var(--incite-radius-panel) 0;
  background: var(--incite-blue);
  color: #ffffff;
  font-family: var(--incite-font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.incite_rd-search button:hover,
.incite_rd-search button:focus {
  background: var(--incite-blue-dark);
}

/* focus: the whole search box gets the pale accent ring (the box clips anything drawn outside the field), and the
   button a white ring inside its edge */
.incite_rd-search:focus-within {
  box-shadow: 0 0 0 3px var(--incite-blue-ring);
}

.incite_rd-search input[type="search"]:focus {
  outline: none;
}

.incite_rd-search button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -6px;
}

/* Browse the range sits just under the search, the way the example used to */
.incite_rd-home .incite_rd-hero-links {
  margin-top: -8px;
}

.incite_rd-hero-links a {
  color: #ffffff;
  font-weight: 600;
  text-underline-offset: 4px;
}

/* the account box beside the opening: what a trade login gives, or where things stand when logged in */
.incite_rd-account {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 28px;
  /* the dark end of the opening's gradient; the faint outline keeps its edge clear where it sits over the fade */
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--incite-radius-panel);
  background: #3c3c3c;
  color: #cfcfcf;
  font-size: 15px;
  line-height: 1.55;
}

.incite_rd-account-title {
  color: #ffffff;
  font-family: var(--incite-font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
}

.incite_rd-account-list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.incite_rd-account-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.incite_rd-account-list a {
  color: #ffffff;
  font-weight: 600;
}

.incite_rd-account-list span {
  font-size: 13px;
  color: #cfcfcf;
}

/* Log in: white outline, not a second solid red button - the search beside it is the opening's one red action */
.incite_rd-account .incite_rd-button {
  background: transparent;
  box-shadow: inset 0 0 0 2px #ffffff;
  color: #ffffff;
}

.incite_rd-account .incite_rd-button:hover,
.incite_rd-account .incite_rd-button:focus {
  background: #ffffff;
  color: var(--incite-ink);
}

.incite_rd-account-new a {
  color: #ffffff;
  font-weight: 600;
}

/* Brands: the label, then the suppliers' logos in a row - in greyscale and a little faded at rest, so six different
   brand colours do not compete with the page's one red; each shows its own colours under the pointer or keyboard */
.incite_rd-brands {
  border-bottom: 1px solid var(--incite-border);
  background: #ffffff;
}

.incite_rd-brands-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 44px;
  padding-top: 22px;
  padding-bottom: 22px;
}

.incite_rd-brands-label {
  color: var(--incite-muted);
  font-size: 14px;
}

.incite_rd-brands-list {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.incite_rd-brands-list li {
  margin: 0;
  padding: 0;
}

.incite_rd-brands-list a,
.incite_rd-brands-nolink {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.incite_rd-brands-list img {
  display: block;
  width: auto;
  max-width: none;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.incite_rd-brands-list a:hover img,
.incite_rd-brands-list a:focus-visible img {
  filter: none;
  opacity: 1;
}

.incite_rd-brands-list a:focus-visible {
  outline: 2px solid var(--incite-blue);
  outline-offset: 4px;
  border-radius: var(--incite-radius);
}

/* phones: three to a row, a little smaller */
@media only screen and (max-width: 600px) {

  .incite_rd-brands-list {
    justify-content: flex-start;
    gap: 14px 28px;
  }

  .incite_rd-brands-list img {
    zoom: 0.82;
  }
}

/* Product notice */
.incite_rd-notice {
  border-bottom: 1px solid #e9d3ad;
  background: #fbf3e6;
  color: #6b4600;
}

/* text-wrap: pretty keeps a last word from sitting alone on a line */
.incite_rd-notice-inner p {
  text-wrap: pretty;
}

.incite_rd-notice-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 15px;
}

.incite_rd-notice svg {
  flex: 0 0 auto;
  margin-top: 2px;
}

.incite_rd-notice a {
  color: #6b4600;
  font-weight: 600;
}

/* Sections */
.incite_rd-section {
  padding-top: 56px;
}

/* Our range comes straight after the opening, closer to it, so its products show on the first screen */
.incite_rd-section.incite_rd-range-section {
  padding-top: 36px;
}

.incite_rd-range-section .incite_rd-section-head {
  margin-bottom: 16px;
}

.incite_rd-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.incite_rd-home .incite_rd-section-title,
.incite_rd-contact .incite_rd-section-title {
  color: var(--incite-ink);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
}

.incite_rd-section-head a {
  color: var(--incite-blue);
  font-weight: 600;
}

/* The range: the old Home page's photo tiles (the name is part of each picture) with the sub-categories under
   each, in one row that scrolls sideways - by the arrows, a swipe or a trackpad, and on its own (front-page.php's
   script). A third of the next tile shows at the edge (a tile and a bit on phones), so it is clear there is more */
.incite_rd-range {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
}

.incite_rd-range:focus-visible {
  outline: 2px solid var(--incite-blue);
  outline-offset: 4px;
}

/* with the script running, the arrows and the bar under the row replace the scrollbar */
.incite_rd-range-js .incite_rd-range {
  scrollbar-width: none;
}

.incite_rd-range-js .incite_rd-range::-webkit-scrollbar {
  display: none;
}

@media only screen and (max-width: 959px) {

  .incite_rd-range {
    gap: 16px;
  }
}

.incite_rd-range-item {
  flex: 0 0 calc((100% - 60px) / 3.35);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--incite-border);
  border-radius: var(--incite-radius-panel);
  background: #ffffff;
  color: var(--incite-text);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.incite_rd-range-item:hover,
.incite_rd-range-item:focus {
  border-color: var(--incite-blue);
}

/* the row clips anything drawn outside a tile, so the keyboard ring sits just inside the tile's edge */
.incite_rd-range-item:focus-visible {
  outline-offset: -3px;
}

/* the picture: the category's products on a light drafting surface (range-tiles/, drawn by the tile composer) -
   while it loads, the surface's own colour; a hairline under it */
.incite_rd-range-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 768 / 307;
  object-fit: cover;
  background: #f1f0ed;
  border-bottom: 1px solid var(--incite-rule);
}

/* under it, the category's name and its sub-categories */
.incite_rd-range-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px 14px;
}

.incite_rd-range-name {
  color: var(--incite-ink);
  font-family: var(--incite-font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  transition: color 0.15s ease;
}

.incite_rd-range-subs {
  color: var(--incite-muted);
  font-size: 14px;
  line-height: 1.45;
}

.incite_rd-range-item:hover .incite_rd-range-name,
.incite_rd-range-item:focus-visible .incite_rd-range-name {
  color: var(--incite-blue);
}

.incite_rd-range-item:hover .incite_rd-range-subs {
  color: var(--incite-text);
}

/* the products lift a little towards you under the pointer */
@media (prefers-reduced-motion: no-preference) {

  .incite_rd-range-item img {
    transform-origin: 50% 100%;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .incite_rd-range-item:hover img {
    transform: scale(1.03);
  }
}

@media only screen and (max-width: 959px) {

  .incite_rd-range-item {
    flex-basis: calc((100% - 32px) / 2.3);
  }
}

/* beside the heading: View all */
.incite_rd-range-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.incite_rd-range-controls a {
  white-space: nowrap;
}

/* the arrows: dark blocks with a white chevron, straddling the ends of the row (half over the row, half in the page's
   margin), level with the middle of the pictures - the pictures are 768:307 and a tile is (row - 60px) / 3.35 wide,
   (row - 32px) / 2.3 on tablets. Signal Red under the pointer. They float over the tiles, so they carry the floating
   shadow */
.incite_rd-range-frame {
  position: relative;
  container-type: inline-size;
}

.incite_rd-range-frame > button {
  position: absolute;
  z-index: 2;
  top: 35%;
  top: calc((100cqw - 60px) / 3.35 * 0.2 + 1px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 56px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--incite-radius);
  background: rgba(28, 31, 34, 0.88);
  color: #ffffff;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(15, 17, 19, 0.28);
  transform: translateY(-50%);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.incite_rd-range-frame > .incite_rd-range-prev {
  left: -22px;
}

.incite_rd-range-frame > .incite_rd-range-next {
  right: -22px;
}

.incite_rd-range-frame > button:hover,
.incite_rd-range-frame > button:focus {
  background: var(--incite-blue);
  color: #ffffff;
}

.incite_rd-range-frame > button:active {
  background: var(--incite-blue-dark);
}

.incite_rd-range-frame > button:focus-visible {
  outline: 2px solid var(--incite-blue);
  outline-offset: 2px;
}

.incite_rd-range-frame > button svg {
  display: block;
  pointer-events: none;
}

.incite_rd-range-frame > button[hidden] {
  display: none;
}

@media only screen and (max-width: 959px) {

  .incite_rd-range-frame > button {
    top: calc((100cqw - 32px) / 2.3 * 0.2 + 1px);
  }

  .incite_rd-range-frame > .incite_rd-range-prev {
    left: -16px;
  }

  .incite_rd-range-frame > .incite_rd-range-next {
    right: -16px;
  }
}

/* how far along the row is, and a scrollbar: a thin line with the red thumb on it, in a taller band that takes the
   clicks; the thumb thickens under the pointer and while it is dragged */
.incite_rd-range-progress {
  position: relative;
  height: 20px;
  margin-top: 12px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.incite_rd-range-progress::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  border-radius: 2px;
  background: var(--incite-rule);
  transform: translateY(-50%);
}

.incite_rd-range-section:not(.incite_rd-range-js) .incite_rd-range-progress {
  display: none;
}

.incite_rd-range-progress span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 30%;
  height: 4px;
  border-radius: 3px;
  background: var(--incite-blue);
  transform: translateY(-50%);
  cursor: grab;
  transition: height 0.15s ease;
}

.incite_rd-range-progress:hover span,
.incite_rd-range-progress.is-dragging span {
  height: 8px;
}

.incite_rd-range-progress.is-dragging,
.incite_rd-range-progress.is-dragging span {
  cursor: grabbing;
}

/* New products & specials (logged in) - the shortcode's own heading, WooCommerce's product tiles and the button to the
   rest, centred on the page: the heading and button over the middle, and the tiles in a centred row however many
   there are (up to five; four then one on laptops, a row of four or three and the rest centred under them on tablets,
   one under another on phones). The tiles are sized from 216 to 256px rather than a fifth of the row each, so three
   products do not leave the right of the row empty. The "Product tiles" script still lines up each row's Order boxes
   (it groups tiles by their height on the page). */
.incite_rd-specials .incite_shop.incite_specials {
  margin-bottom: 28px;
  text-align: center;
}

/* the heading as every other section's on the Home page */
.incite_rd-specials .incite_shop .incite_specials-title {
  margin: 0;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: 0;
}

html .incite_rd-specials .woocommerce ul.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 36px 24px;
  margin: 0;
  padding: 0;
}

/* (WooCommerce's clearfix would be two empty tiles in the row) */
html .incite_rd-specials .woocommerce ul.products::before,
html .incite_rd-specials .woocommerce ul.products::after {
  display: none;
}

html .incite_rd-specials .woocommerce ul.products li.product {
  flex: 1 1 216px;
  width: auto;
  max-width: 256px;
  margin: 0;
  padding: 0;
  float: none;
  clear: none;
  overflow: visible;   /* (OceanWP clips the tile, which cut the New product ribbon's corner off) */
}

/* the pictures unframed alike - before, only the ones with a New product ribbon had a frame */
html .incite_rd-specials .woocommerce ul.products li.product .incite_ribbon_small-box {
  outline: 0;
}

/* the Order row under the middle of the tile, like everything above it */
html .incite_rd-specials .woocommerce ul.products li.product .incite_shop .incite_product-order {
  justify-content: center;
}

.incite_rd-specials .incite_shop.incite_specials-more {
  margin-top: 36px;
}

@media only screen and (max-width: 600px) {

  html .incite_rd-specials .woocommerce ul.products li.product {
    flex-basis: 100%;
    max-width: none;
  }

  .incite_rd-specials .incite_shop .incite_specials-title {
    font-size: 28px;
  }
}

/* On the Home page these tiles show the full product panel (stock for your state and national, and an Order
   box). The stock labels take only the room they need so the stock notes wrap less in the narrow tiles; the
   "Product tiles" script lines up the Order boxes across each row. */
.woocommerce ul.products li.product .incite_shop .incite_product-stock {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  text-align: left;
}

/* "Please contact your local branch for current pricing ..." (no price) is plain text and a link, which the
   price box's column layout split onto three lines - keep it as one sentence (still centred up and down when
   the Product tiles script makes the box taller than its text) */
.incite_shop .incite_product-price:not(:has(.incite_product-yourprice, .incite_button_primary)) {
  display: block;
  align-content: center;
  line-height: 1.5;
}

/* Key information - a row of plain links under a rule, not cards */
.incite_rd-keyinfo,
.incite_rd-contact-more {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}

.incite_rd-keyinfo a,
.incite_rd-contact-more a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 14px;
  border-top: 2px solid var(--incite-ink);
  color: var(--incite-text);
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
}

.incite_rd-keyinfo b,
.incite_rd-contact-more b {
  color: var(--incite-ink);
  font-family: var(--incite-font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
}

.incite_rd-keyinfo a:hover b,
.incite_rd-contact-more a:hover b {
  color: var(--incite-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Technical support: who to call on the left (the number the size of the footer's), help on the site on the right
   as the same ruled links, two by two */
.incite_rd-support {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 28px 56px;
  align-items: start;
}

.incite_rd-support-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.incite_rd-support-lead {
  max-width: 42ch;
  font-size: 17px;
  line-height: 1.55;
}

.incite_rd-home .incite_rd-support-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 6px;
}

.incite_rd-support-phone {
  color: var(--incite-ink);
  font-family: var(--incite-font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  text-decoration: none;
}

.incite_rd-support-phone:hover {
  color: var(--incite-blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.incite_rd-support-number {
  color: var(--incite-muted);
  font-size: 14px;
}

.incite_rd-support-mail {
  margin-top: 10px;
  padding: 4px 0;
  color: var(--incite-blue);
  font-weight: 600;
}

.incite_rd-support-mail:hover {
  color: var(--incite-blue-dark);
}

.incite_rd-support-links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
}

/* * * * * THE FIXED SLIDE (Home) * * * * */

/* One banner picture across the column, where the video and brochure tabs were - set in Appearance > Customize >
   Home page banner (incite_rd_banner() in redesign.php). The picture keeps its own shape (1300 x 250, or the phone
   picture's); the panels' corners; a quiet lift when it is a link and is pointed at. */
.incite_rd-home .incite_rd-banner-link {
  display: block;
  overflow: hidden;
  border-radius: var(--incite-radius-panel);
  background: var(--incite-surface-alt);
  line-height: 0;
}

.incite_rd-home .incite_rd-banner-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.incite_rd-home a.incite_rd-banner-link {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.incite_rd-home a.incite_rd-banner-link:hover {
  box-shadow: 0 12px 28px rgba(15, 17, 19, 0.18);
  transform: translateY(-2px);
}

.incite_rd-home a.incite_rd-banner-link:focus-visible {
  outline: 2px solid var(--incite-blue);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .incite_rd-home a.incite_rd-banner-link,
  .incite_rd-home a.incite_rd-banner-link:hover {
    transition: none;
    transform: none;
  }
}

/* (Home no longer has the brochure tabs - their styles below are kept, unused, in case they come back) */
/* * * * * PRODUCT NEWS AND BROCHURES (Home) - the [incite_flipbook] tabs * * * * */

/* Restyled to match the product page's tabs: as typed (not capitals), larger, left-aligned under one rule, the open one
   underlined in the accent colour. Styling only - the buttons, their onclick, the panels' ids and the video's
   autoplay are the plugin's and work as before, and nothing here sets display on the panels (the plugin's script
   does). The plugin's incite.css loads after this file, hence the longer selectors. */
/* the space between the tabs is a gap on the row, not a margin on each tab (a wrapping row counts the last tab's
   margin too, which pushed a tab onto a line of its own) */
.incite_rd-home .incite_flipbook {
  column-gap: 24px;
  row-gap: 0;
}

.incite_rd-home .incite_flipbook .incite_flipbook_button,
.incite_rd-home .incite_flipbook .incite_flipbook_button:hover,
.incite_rd-home .incite_flipbook .incite_flipbook_button.active {
  margin: 0 0 -1px;
  padding: 12px 0;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.incite_rd-home .incite_flipbook .incite_flipbook_button:focus-visible {
  outline: 2px solid var(--incite-blue);
  outline-offset: 2px;
}

/* the open panel sits straight under the tabs, without the box around it */
.incite_rd-home .incite_flipbook_content {
  padding: 16px 0 0;
  border: 0;
  border-radius: 0;
}

/* a video sits on the text baseline by default, which left a gap under it */
.incite_rd-home .incite_flipbook_content video {
  display: block;
}

/* Trade accounts */
/* well clear of the brochures above - the updates video is mostly red, so the red band needs white space between
   them (96px, 72px on phones) */
.incite_rd-trade {
  margin-top: 96px;
  background: var(--incite-blue);
  color: #FCEDEB;
}

/* what an account is and how credit terms differ on the left, the steps and the two applications on the right */
.incite_rd-trade-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 28px 56px;
  padding-top: 52px;
  padding-bottom: 52px;
}

.incite_rd-trade-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.incite_rd-home .incite_rd-trade-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  text-wrap: balance;
}

.incite_rd-trade-note {
  max-width: 46ch;
  text-wrap: pretty;
  font-size: 15px;
  line-height: 1.55;
}

.incite_rd-trade-action {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.incite_rd-trade-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: incite_rd_step;
}

/* the number in its own column and each step's words together in the other, lined up on the first line */
.incite_rd-trade-steps li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 14px;
  align-items: baseline;
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  counter-increment: incite_rd_step;
}

.incite_rd-trade-steps li::before {
  content: counter(incite_rd_step);
  color: #ffffff;
  font-family: var(--incite-font-display);
  font-weight: 700;
  font-size: 18px;
}

.incite_rd-trade-steps b {
  color: #ffffff;
}

.incite_rd-trade-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 22px;
}

.incite_rd-trade-credit {
  color: #ffffff;
  font-weight: 600;
  text-underline-offset: 4px;
}

.incite_rd-trade-credit:hover {
  color: #ffffff;
}

/* the page ends with some room before the branch strip (except when the trade band is last) */
.incite_rd-home #content > .incite_rd-section:last-child,
.incite_rd-contact #content > .incite_rd-section:last-child {
  padding-bottom: 64px;
}

/* * * * * FOOTER (every page) * * * * */

/* logo, phone and three columns of links; the four branches under a rule; then OceanWP's copyright line in the
   same colour */
.incite_rd-footer {
  background: #1c1f22;
  color: #aab0b6;
  font-family: var(--incite-font-body);
  font-size: 14px;
  line-height: 1.55;
}

.incite_rd-footer a {
  color: #e6e8ea;
  text-decoration: none;
}

.incite_rd-footer a:hover,
.incite_rd-footer a:focus {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.incite_rd-footer p {
  margin: 0;
}

.incite_rd-footer-top {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 3fr));
  gap: 40px;
  padding-top: 56px;
  padding-bottom: 44px;
}

.incite_rd-footer-about {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 34ch;
}

.incite_rd-footer-logo img {
  display: block;
  width: auto;
  height: 40px;
}

.incite_rd-footer-phone {
  display: flex;
  flex-direction: column;
}

.incite_rd-footer .incite_rd-footer-phone a {
  color: #ffffff;
  font-family: var(--incite-font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
}

.incite_rd-footer-phone span {
  font-size: 13px;
}

.incite_rd-footer .incite_rd-footer-heading {
  margin: 0 0 12px;
  padding: 0;
  color: #ffffff;
  font-family: var(--incite-font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  text-transform: none;
}

.incite_rd-footer-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the links themselves carry the spacing, so each is a taller target for a finger */
.incite_rd-footer-links li {
  margin: 0;
  padding: 0;
}

.incite_rd-footer-links a {
  display: inline-block;
  padding: 6px 0;
}

.incite_rd-branches-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  padding-top: 32px;
  padding-bottom: 40px;
  border-top: 1px solid #33373c;
}

.incite_rd-branch p {
  margin: 6px 0 0;
}

.incite_rd-footer .incite_rd-branch-city {
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-family: var(--incite-font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  text-transform: none;
}

/* OceanWP's copyright line */
html #footer-bottom {
  padding: 0;
  background-color: #1c1f22;
  color: #8a9199;
  font-family: var(--incite-font-body);
  font-size: 13px;
}

html #footer-bottom #footer-bottom-inner {
  padding-top: 18px;
  padding-bottom: 22px;
  border-top: 1px solid #33373c;
}

html #footer-bottom #footer-bottom-inner #copyright {
  text-align: left;
  line-height: 1.5;
}

/* * * * * SHOP - product tiles, toolbar, product page details * * * * */

/* (the woocommerce class is on <body> on shop pages, and on a block inside the page where Elementor pages show
   products - :is() matches either) */

/* product codes in the codes' typeface (IBM Plex Mono), in the ink colour (they were Plex Sans in OceanWP's #333) */
html :is(body.woocommerce, body .woocommerce) ul.products li.product li.title h2,
html :is(body.woocommerce, body .woocommerce) ul.products li.product li.title h2 a {
  font-family: var(--incite-font-mono);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--incite-ink);
}

html :is(body.woocommerce, body .woocommerce) ul.products li.product li.title h2 a:hover {
  color: var(--incite-blue);
}

html :is(body.woocommerce, body .woocommerce) ul.products.list > li.product li.title h2,
html :is(body.woocommerce, body .woocommerce) ul.products.list > li.product li.title h2 a {
  font-size: 18px;
}

html :is(body.woocommerce, body .woocommerce) div.product .product_meta .sku {
  font-family: var(--incite-font-mono);
  font-weight: 500;
  color: var(--incite-ink);
}

/* the rest of each tile's text in the site's greys, not OceanWP's #333 / #999 */
html :is(body.woocommerce, body .woocommerce) ul.products li.product {
  color: var(--incite-text);
}

/* "Read more" on every tile was a red outlined button - ten of them in a row. A quiet outlined button in the
   greys; red only on hover and focus. 44px tall. (woocommerce.css sets the old look with !important.) */
html :is(body.woocommerce, body .woocommerce) ul.products li.product .button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 16px !important;
  border: 1px solid var(--incite-border-strong) !important;
  background-color: #ffffff !important;
  color: var(--incite-ink) !important;
  font-size: 14px !important;
}

html :is(body.woocommerce, body .woocommerce) ul.products li.product .button:hover,
html :is(body.woocommerce, body .woocommerce) ul.products li.product .button:focus-visible {
  border-color: var(--incite-blue) !important;
  background-color: #ffffff !important;
  color: var(--incite-blue) !important;
}

/* the toolbar (grid / list, sorting, how many per page): 44px controls in the site's greys */
html :is(body.woocommerce, body .woocommerce) .oceanwp-toolbar .oceanwp-grid-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--incite-border-strong);
  border-radius: var(--incite-radius);
  color: var(--incite-muted);
}

html :is(body.woocommerce, body .woocommerce) .oceanwp-toolbar .oceanwp-grid-list a.active,
html :is(body.woocommerce, body .woocommerce) .oceanwp-toolbar .oceanwp-grid-list a:hover {
  border-color: var(--incite-blue);
  color: var(--incite-blue);
}

html :is(body.woocommerce, body .woocommerce) .oceanwp-toolbar .woocommerce-ordering .orderby {
  height: 44px;
  box-sizing: border-box;
  padding: 0 40px 0 14px;
  border: 1px solid var(--incite-border-strong);
  border-radius: var(--incite-radius);
  font-family: var(--incite-font-body);
  font-size: 14px;
  color: var(--incite-ink);
}

html :is(body.woocommerce, body .woocommerce) .oceanwp-toolbar .woocommerce-ordering select.orderby {
  height: 44px !important;
}

/* the sort box's visible label and its arrow, centred in the 44px box */
html :is(body.woocommerce, body .woocommerce) .oceanwp-toolbar .woocommerce-ordering .theme-select {
  line-height: 42px;
}

html :is(body.woocommerce, body .woocommerce) .oceanwp-toolbar .woocommerce-ordering .theme-select::after {
  height: 42px;
  line-height: 42px;
}

html :is(body.woocommerce, body .woocommerce) .oceanwp-toolbar .woocommerce-ordering .orderby:focus {
  border-color: var(--incite-blue);
  box-shadow: 0 0 0 3px var(--incite-blue-ring);
  outline: none;
}

html :is(body.woocommerce, body .woocommerce) .oceanwp-toolbar .result-count,
html :is(body.woocommerce, body .woocommerce) .oceanwp-toolbar .result-count a {
  color: var(--incite-muted);
}

html :is(body.woocommerce, body .woocommerce) .oceanwp-toolbar .result-count a:hover {
  color: var(--incite-blue);
}

/* no toolbar on a page with no products to sort (a category that only has sub-categories, a search with no
   results) */
html body.woocommerce:not(:has(ul.products li.product:not(.product-category))) .oceanwp-toolbar {
  display: none;
}

/* product page: the category link in the site's link colour (it was OceanWP's #ababab, too faint to read), and
   square 44px previous / next buttons (they were 28px circles) */
html :is(body.woocommerce, body .woocommerce) div.product .product_meta {
  color: var(--incite-text);
}

html :is(body.woocommerce, body .woocommerce) div.product .product_meta .posted_in a,
html :is(body.woocommerce, body .woocommerce) div.product .product_meta .tagged_as a {
  color: var(--incite-blue);
}

html body .owp-product-nav li a.owp-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--incite-border-strong);
  border-radius: var(--incite-radius);
  background: #ffffff;
  color: var(--incite-ink);
}

html body .owp-product-nav li a.owp-nav-link:hover {
  border-color: var(--incite-blue);
  background: #ffffff;
  color: var(--incite-blue);
}

/* the product code is the page's title already - the "SKU:" line under it repeated it */
html :is(body.woocommerce, body .woocommerce) div.product .product_meta .sku_wrapper {
  display: none;
}

/* the photo's enlarge button: a 44px square in the site's greys (it was OceanWP's grey 32px chip) */
html body.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--incite-border-strong);
  border-radius: var(--incite-radius);
  background: #ffffff;
}

html body.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger::before {
  line-height: 42px;
}

/* a tab bar with only one tab (Description, Downloads) reads as a heading, not a tab to choose */
html :is(body.woocommerce, body .woocommerce) div.product .woocommerce-tabs ul.tabs:not(:has(li + li)) li a,
html :is(body.woocommerce, body .woocommerce) div.product .woocommerce-tabs ul.tabs:not(:has(li + li)) li.active a,
html .woocommerce.woocommerce div.product .woocommerce-tabs ul.tabs:not(:has(li + li)) li.active a {
  border-bottom-color: transparent;
  color: var(--incite-ink);
  cursor: default;
  pointer-events: none;
}

.incite_shop.incite_documents .incite_tab:not(:has(button + button)) button,
.incite_shop.incite_documents .incite_tab:not(:has(button + button)) button.active {
  border-bottom-color: transparent;
  color: var(--incite-ink);
  cursor: default;
}

/* 44px targets: Copy code, the category chips and the page numbers */
html body .incite_rd-copycode button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

html body .incite_rd-sibling {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  box-sizing: border-box;
}

html body .woocommerce-pagination .page-numbers a,
html body .woocommerce-pagination .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  box-sizing: border-box;
  border-color: var(--incite-border-strong);
}

/* above the products when logged out: prices and stock come with a login (redesign.php) */
.incite_rd-pricehint {
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid var(--incite-border);
  border-radius: var(--incite-radius-panel);
  background: var(--incite-surface-alt);
  font-family: var(--incite-font-body);
  font-size: 14px;
  color: var(--incite-text);
}

.incite_rd-pricehint a {
  color: var(--incite-blue);
  font-weight: 600;
}

/* nothing found: a search with no matches, or a category with no products yet (redesign.php) */
.incite_rd-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 640px;
  margin: 8px 0 40px;
  font-family: var(--incite-font-body);
  color: var(--incite-text);
}

html body .incite_rd-empty .incite_rd-empty-title {
  margin: 0;
  font-family: var(--incite-font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--incite-ink);
}

.incite_rd-empty .incite_rd-empty-text,
.incite_rd-empty .incite_rd-empty-links {
  margin: 0;
  font-size: 15px;
}

.incite_rd-empty-search {
  display: flex;
  width: 100%;
  max-width: 560px;
  height: 46px;
  margin: 4px 0;
  border: 1px solid var(--incite-border-strong);
  border-radius: var(--incite-radius);
  background: #ffffff;
  overflow: hidden;
}

.incite_rd-empty-search:focus-within {
  border-color: var(--incite-blue);
  box-shadow: 0 0 0 3px var(--incite-blue-ring);
}

html body .incite_rd-empty-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  font-family: var(--incite-font-body);
  font-size: 15px;
  color: var(--incite-ink);
}

html body .incite_rd-empty-search input[type="search"]:focus {
  outline: none;
}

html body .incite_rd-empty-search button {
  flex: 0 0 auto;
  height: 100%;
  margin: 0;
  padding: 0 22px;
  border: 0;
  border-radius: 0;
  background: var(--incite-blue);
  color: #ffffff;
  font-family: var(--incite-font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

html body .incite_rd-empty-search button:hover,
html body .incite_rd-empty-search button:focus {
  background: var(--incite-blue-dark);
}

html body .incite_rd-empty-search button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -6px;
}

.incite_rd-empty .incite_rd-empty-links a {
  color: var(--incite-blue);
  font-weight: 600;
}

.incite_rd-empty .incite_rd-empty-links span {
  color: var(--incite-muted);
}

/* * * * * PAGE NOT FOUND (404.php) * * * * */

/* the page's heading in the page titles' style, a line on what happened, the product search (the shop's
   nothing-found search box) and the ways on */
/* (the blank error page has no header or footer - its white runs to the bottom of the window) */
html body.error404:not(:has(#site-header)) #main {
  min-height: 100vh;
  padding-top: 0;   /* (BUG-071) no header to make room for */
}

html body.error404 #main #content-wrap {
  padding-top: 0;
}

html body .error404-content.incite_rd-404 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 640px;
  margin: 0;
  padding: 72px 0 96px;
  text-align: left;
  font-family: var(--incite-font-body);
  color: var(--incite-text);
}

/* with the Customizer's "blank" error page there is no header: the logo on the header's black, across the window */
.incite_rd-404 .incite_rd-404-logo {
  align-self: stretch;
  margin: -72px 0 40px;
  padding: 18px 0;
  border-image: linear-gradient(#16181b 0 0) fill 0 / 0 / 0 100vw;
}

.incite_rd-404 .incite_rd-404-logo img {
  display: block;
  width: auto;
  height: 48px;
}

html body .incite_rd-404 .incite_rd-404-title {
  margin: 0;
  font-family: var(--incite-font-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--incite-ink);
}

html body .incite_rd-404 .incite_rd-404-text {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.6;
}

html body .incite_rd-404 .incite_rd-404-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 4px 0 0;
  font-size: 15px;
}

html body .incite_rd-404 .incite_rd-404-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--incite-blue);
  font-weight: 600;
}

html body .incite_rd-404 .incite_rd-404-links a:hover {
  color: var(--incite-blue-dark);
  text-decoration: underline;
}

@media (max-width: 767px) {
  html body .error404-content.incite_rd-404 {
    padding: 40px 0 64px;
  }

  .incite_rd-404 .incite_rd-404-logo {
    margin: -40px 0 28px;
    padding: 14px 0;
  }

  .incite_rd-404 .incite_rd-404-logo img {
    height: 40px;
  }

  html body .incite_rd-404 .incite_rd-404-title {
    font-size: 30px;
  }
}

/* * * * * CART (the My Cart page) * * * * */

/* the Order Summary is a panel like the others beside it - it had a 4px black bar across its top */
html body .incite_shop .incite_summary {
  border-top: 1px solid var(--incite-border);
}

/* "Before you submit": a short heading in the panel's own type over a ruled list, not small spaced capitals on a
   grey card */
html body .incite_shop .incite_checklist {
  padding: 14px 0 0;
  border-top: 1px solid var(--incite-rule);
  border-radius: 0;
  background: none;
}

html body .incite_shop .incite_checklist-title {
  margin: 0 0 10px;
  font-family: var(--incite-font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--incite-ink);
}

/* a panel's status ("Action needed", "Unsaved changes") as a plain line of text beside its title, not a tinted pill -
   the field it is about is already marked in red below it */
html body .incite_shop .incite_panel-header .incite_tag {
  padding: 0;
  background: none;
  font-size: 13px;
  font-weight: 600;
}

html body .incite_shop .incite_panel-header .incite_tag_action {
  color: var(--incite-error);
}

html body .incite_shop .incite_panel-header .incite_tag_unsaved {
  color: var(--incite-blue-dark);
}

/* Quick List and Products (ways to add more) in the quiet greys, so the red is left for what needs doing - Update,
   Save and Submit; red on hover and focus */
html body .incite_shop .incite_cart-actions .incite_cart-action {
  border-color: var(--incite-border-strong);
  background-color: #ffffff;
  color: var(--incite-ink);
}

html body .incite_shop .incite_cart-actions .incite_cart-action:hover,
html body .incite_shop .incite_cart-actions .incite_cart-action:focus {
  border-color: var(--incite-blue);
  background-color: #ffffff;
  color: var(--incite-blue);
}

/* phones: Current Order's title and "1 line - Prices exclude GST" on one line, its two buttons side by side under
   them (the title broke over two lines and the note over three beside the stacked buttons) */
@media only screen and (max-width: 767px) {
  html body .incite_shop #currentorder .incite_panel-header {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  html body .incite_shop #currentorder .incite_panel-meta {
    flex: 1 1 auto;
  }
}

/* * * * * TRAINING - course list and booking form * * * * */

/* course names as short headings, not letter-spaced capitals; Book now on one line, 44px */
html body .incite_shop table.incite_training-table td.incite_training-title {
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
}

html body .incite_shop .incite_training-book {
  min-height: 44px;
  padding: 0 16px;
  font-size: 14px;
  white-space: nowrap;
}

/* the booking form (the Elementor section incite-training-form, shown by Book now): the form pages' column
   width, its opening line as the section heading, and Submit and Cancel side by side - Cancel is a separate
   widget under the form, so it is lifted onto the Submit row at the right (styling only; ids and scripts are
   unchanged) */
#incite-training-form .elementor-widget-wrap {
  max-width: 776px;
}

#incite-training-form h5 {
  margin: 0 0 18px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--incite-border-strong);
  font-family: var(--incite-font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--incite-ink);
}

#incite-training-form .elementor-widget-html {
  margin-top: -58px;
  text-align: right;
  pointer-events: none;   /* its full-width box lies over Submit - let clicks through to it */
}

#incite-training-form .elementor-widget-html button {
  pointer-events: auto;
}

/* * * * * PRODUCT CATEGORIES * * * * */

.incite_rd-siblings {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  font-family: var(--incite-font-body);
  font-size: 14px;
}

.incite_rd-siblings-label {
  margin-right: 6px;
  color: var(--incite-muted);
}

.incite_rd-siblings-label a {
  color: var(--incite-blue);
  font-weight: 600;
}

.incite_rd-sibling {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid var(--incite-border-strong);
  border-radius: var(--incite-radius);
  color: var(--incite-ink);
  line-height: 1.2;
  text-decoration: none;
}

.incite_rd-sibling span {
  color: var(--incite-muted);
  font-size: 12px;
}

.incite_rd-sibling:hover {
  border-color: var(--incite-blue);
  color: var(--incite-blue);
}

.incite_rd-sibling-current,
.incite_rd-sibling-current:hover {
  border-color: var(--incite-blue);
  background: var(--incite-blue);
  color: #ffffff;
}

.incite_rd-sibling-current span {
  color: #FCE9E7;
}

/* the current page number under the products: white on the accent colour (style.css's general page-number rule is more
   specific than its "current" rule, so the number came out black) */
.page-numbers span.page-numbers.current,
.page-numbers span.page-numbers.current:hover {
  color: #ffffff;
}

/* * * * * PRODUCT PAGE * * * * */

/* the product code, larger, in the site's display type, with Copy code under it */
html .woocommerce div.product .product_title {
  margin: 0 0 2px;
  color: var(--incite-ink);
  font-family: var(--incite-font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: 0;
}

.incite_rd-copycode {
  margin: 0 0 16px;
}

/* the tabs (Description ...): left-aligned under one rule, the open one underlined in the site's accent colour */
html .woocommerce div.product .woocommerce-tabs ul.tabs {
  margin-bottom: 22px;
  border-top: 0;
  border-bottom: 1px solid var(--incite-border);
  text-align: left;
}

html .woocommerce div.product .woocommerce-tabs ul.tabs li a {
  margin: 0 28px -1px 0;
  padding: 12px 0;
  border-top: 0;
  border-bottom: 3px solid transparent;
  color: var(--incite-muted);
  font-family: var(--incite-font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
}

html .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--incite-ink);
}

html .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  border-bottom-color: var(--incite-blue);
  color: var(--incite-ink);
}

/* the Downloads (and flipbook) tabs under the description, to match */
.incite_shop.incite_documents .incite_tab button,
.incite_shop.incite_documents .incite_tab button:hover {
  margin-right: 24px;
  padding: 12px 0;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
}

.incite_shop.incite_documents .incite_tab_content {
  padding: 14px 0 0;
  border: 0;
}

html .woocommerce .related.products > h2,
html .woocommerce .up-sells > h2 {
  margin-bottom: 22px;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
}

.incite_rd-copycode button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--incite-blue);
  font-family: var(--incite-font-body);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.incite_rd-copycode button:hover {
  background: none;
  color: var(--incite-blue-dark);
}

/* * * * * CONTACT US * * * * */

/* The main number and the three teams on the left; a map of Australia on the right with the four branches pinned
   where they are. Below, the branches themselves: photo, number from the map, address, phone / e-mail / directions
   as 44px rows, and a Google map of the street. Pointing at a pin lights its branch and pointing at a branch lights
   its pin (CSS :has); the page's script takes a pin click to its branch. */
.incite_rd-contact-intro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:
    "call  atlas"
    "teams atlas";
  grid-template-rows: auto 1fr;
  column-gap: 56px;
  row-gap: 32px;
  align-items: start;
}

.incite_rd-contact-call {
  grid-area: call;
}

.incite_rd-contact-teams {
  grid-area: teams;
}

.incite_rd-contact-atlas {
  grid-area: atlas;
}

.incite_rd-contact-quick {
  grid-area: quick;
  display: none;
}

.incite_rd-contact .incite_rd-contact-number {
  margin: 0;
  font-family: var(--incite-font-display);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0;
}

.incite_rd-contact-number a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--incite-ink);
  text-decoration: none;
}

.incite_rd-contact-number a:hover {
  color: var(--incite-blue);
}

.incite_rd-contact-call-icon {
  flex: 0 0 auto;
  color: var(--incite-blue);
}

.incite_rd-contact .incite_rd-contact-digits {
  margin: 6px 0 0;
  color: var(--incite-muted);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

/* the teams: a ruled list, a heavier rule over the first */
.incite_rd-contact-teams {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--incite-ink);
}

.incite_rd-contact-team {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 2px;
  margin: 0;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--incite-rule);
}

.incite_rd-contact .incite_rd-contact-team h3 {
  color: var(--incite-ink);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
}

.incite_rd-contact .incite_rd-contact-team p {
  color: var(--incite-muted);
  font-size: 14px;
}

.incite_rd-contact-team > a {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: -4px;
  margin-bottom: -6px;
  color: var(--incite-blue);
  font-weight: 600;
  font-size: 15px;
}

.incite_rd-contact .incite_rd-contact-note {
  margin-top: 6px;
  color: var(--incite-muted);
  font-size: 13px;
}

.incite_rd-contact-note a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -12px 0;
  color: var(--incite-blue);
  font-weight: 600;
}

/* the map: the outline on the counter's warm off-white, a numbered red pin at each branch with its city beside it,
   the name on the land side of the pin */
.incite_rd-contact-atlas {
  margin: 0;
  padding: 28px;
  border-radius: var(--incite-radius-panel);
  background: var(--incite-surface-alt);
}

.incite_rd-contact-atlas-map {
  position: relative;
  max-width: 540px;
  margin: 0 auto;
}

.incite_rd-contact-atlas-map img {
  display: block;
  width: 100%;
  height: auto;
}

.incite_rd-contact-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  transform: translate(-17px, -50%);
  color: var(--incite-ink);
  text-decoration: none;
}

.incite_rd-contact-pin[data-side="left"] {
  flex-direction: row-reverse;
  transform: translate(calc(-100% + 17px), -50%);
}

.incite_rd-contact-pin-no {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--incite-blue);
  box-shadow: 0 0 0 2px #ffffff, 0 2px 6px rgba(15, 17, 19, 0.25);
  color: #ffffff;
  font-family: var(--incite-font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  transition: background-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.incite_rd-contact-pin-city {
  padding: 2px 6px;
  border-radius: var(--incite-radius);
  background: rgba(255, 255, 255, 0.86);
  font-family: var(--incite-font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  transition: color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.incite_rd-contact-pin:focus-visible {
  outline: none;
}

.incite_rd-contact-pin:focus-visible .incite_rd-contact-pin-city {
  outline: 2px solid var(--incite-blue);
  outline-offset: 2px;
}

.incite_rd-contact-pin:is(:hover, :focus-visible),
.incite_rd-contact:has(.incite_rd-contact-office[data-branch="sydney"]:is(:hover, :focus-within, [data-picked])) .incite_rd-contact-pin[data-branch="sydney"],
.incite_rd-contact:has(.incite_rd-contact-office[data-branch="melbourne"]:is(:hover, :focus-within, [data-picked])) .incite_rd-contact-pin[data-branch="melbourne"],
.incite_rd-contact:has(.incite_rd-contact-office[data-branch="brisbane"]:is(:hover, :focus-within, [data-picked])) .incite_rd-contact-pin[data-branch="brisbane"],
.incite_rd-contact:has(.incite_rd-contact-office[data-branch="perth"]:is(:hover, :focus-within, [data-picked])) .incite_rd-contact-pin[data-branch="perth"] {
  color: var(--incite-blue);
}

.incite_rd-contact-pin:is(:hover, :focus-visible) .incite_rd-contact-pin-no,
.incite_rd-contact:has(.incite_rd-contact-office[data-branch="sydney"]:is(:hover, :focus-within, [data-picked])) .incite_rd-contact-pin[data-branch="sydney"] .incite_rd-contact-pin-no,
.incite_rd-contact:has(.incite_rd-contact-office[data-branch="melbourne"]:is(:hover, :focus-within, [data-picked])) .incite_rd-contact-pin[data-branch="melbourne"] .incite_rd-contact-pin-no,
.incite_rd-contact:has(.incite_rd-contact-office[data-branch="brisbane"]:is(:hover, :focus-within, [data-picked])) .incite_rd-contact-pin[data-branch="brisbane"] .incite_rd-contact-pin-no,
.incite_rd-contact:has(.incite_rd-contact-office[data-branch="perth"]:is(:hover, :focus-within, [data-picked])) .incite_rd-contact-pin[data-branch="perth"] .incite_rd-contact-pin-no {
  background: var(--incite-blue-dark);
  transform: scale(1.15);
}

/* the branches: four columns (two on tablets, one on phones) */
.incite_rd-contact-offices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 28px;
}

/* the branches in a row share its rows - photo, name, address, phone and e-mail, note, map - so a longer address
   in one moves the rows below it down in all of them, and they stay level */
.incite_rd-contact-office {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 6;
  align-content: start;
  scroll-margin-top: 24px;
}

.incite_rd-contact-office-photo { grid-row: 1; }
.incite_rd-contact-office-head { grid-row: 2; }
.incite_rd-contact .incite_rd-contact-office-address { grid-row: 3; }
.incite_rd-contact-office-actions { grid-row: 4; }
.incite_rd-contact-office .incite_rd-contact-note { grid-row: 5; }
.incite_rd-contact-office-mapbox { grid-row: 6; }

.incite_rd-contact-office:focus {
  outline: none;
}

.incite_rd-contact-office-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--incite-radius-panel);
  background: var(--incite-surface-alt);
  outline: 2px solid transparent;
  outline-offset: 4px;
  transition: outline-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.incite_rd-contact-office-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--incite-ink);
}

.incite_rd-contact-office-no {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--incite-blue);
  color: #ffffff;
  font-family: var(--incite-font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}

.incite_rd-contact .incite_rd-contact-office h3 {
  color: var(--incite-ink);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  transition: color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.incite_rd-contact .incite_rd-contact-office-address {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
}

/* phone, e-mail and directions: one ruled list of 44px rows, what it is on the left, the link on the right */
.incite_rd-contact-office-actions {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--incite-rule);
}

.incite_rd-contact-office-actions li {
  margin: 0;
  border-bottom: 1px solid var(--incite-rule);
}

.incite_rd-contact-office-actions a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  color: var(--incite-blue);
  text-decoration: none;
}

.incite_rd-contact-office-label {
  flex: 0 0 auto;
  color: var(--incite-muted);
  font-size: 13px;
}

.incite_rd-contact-office-value {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.incite_rd-contact-office-actions a:hover .incite_rd-contact-office-value {
  color: var(--incite-blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.incite_rd-contact-office .incite_rd-contact-note {
  margin: -8px 0 18px;
}

/* the street map: Google's, loaded by the page's script when it comes near the screen. Until then (or if Google is
   blocked) the box says what it is, with a link; the map fades in over it once loaded. Pushed to the bottom, so the
   maps line up across the row. */
.incite_rd-contact-office-mapbox {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-top: 0;
  padding: 16px;
  box-sizing: border-box;
  border: 1px solid var(--incite-border);
  border-radius: var(--incite-radius-panel);
  background: var(--incite-surface-alt);
  overflow: hidden;
}

.incite_rd-contact .incite_rd-contact-office-mapbox p {
  max-width: 26ch;
  color: var(--incite-muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.incite_rd-contact-office-mapbox p a {
  color: var(--incite-blue);
  font-weight: 600;
  white-space: nowrap;
}

.incite_rd-contact-office-mapbox:focus-within p {
  position: relative;
  z-index: 1;
  padding: 10px 12px;
  border-radius: var(--incite-radius);
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 17, 19, 0.25);
}

.incite_rd-contact-office-mapbox iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.incite_rd-contact-office-mapbox[data-loaded] iframe {
  opacity: 1;
}

.incite_rd-contact-office[data-picked] .incite_rd-contact-office-photo,
.incite_rd-contact:has(.incite_rd-contact-pin[data-branch="sydney"]:is(:hover, :focus-visible)) .incite_rd-contact-office[data-branch="sydney"] .incite_rd-contact-office-photo,
.incite_rd-contact:has(.incite_rd-contact-pin[data-branch="melbourne"]:is(:hover, :focus-visible)) .incite_rd-contact-office[data-branch="melbourne"] .incite_rd-contact-office-photo,
.incite_rd-contact:has(.incite_rd-contact-pin[data-branch="brisbane"]:is(:hover, :focus-visible)) .incite_rd-contact-office[data-branch="brisbane"] .incite_rd-contact-office-photo,
.incite_rd-contact:has(.incite_rd-contact-pin[data-branch="perth"]:is(:hover, :focus-visible)) .incite_rd-contact-office[data-branch="perth"] .incite_rd-contact-office-photo {
  outline-color: var(--incite-blue);
}

.incite_rd-contact-office[data-picked] h3,
.incite_rd-contact:has(.incite_rd-contact-pin[data-branch="sydney"]:is(:hover, :focus-visible)) .incite_rd-contact-office[data-branch="sydney"] h3,
.incite_rd-contact:has(.incite_rd-contact-pin[data-branch="melbourne"]:is(:hover, :focus-visible)) .incite_rd-contact-office[data-branch="melbourne"] h3,
.incite_rd-contact:has(.incite_rd-contact-pin[data-branch="brisbane"]:is(:hover, :focus-visible)) .incite_rd-contact-office[data-branch="brisbane"] h3,
.incite_rd-contact:has(.incite_rd-contact-pin[data-branch="perth"]:is(:hover, :focus-visible)) .incite_rd-contact-office[data-branch="perth"] h3 {
  color: var(--incite-blue);
}

/* the branch numbers straight under the map - phones only (see below) */
.incite_rd-contact-quick {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--incite-ink);
}

.incite_rd-contact-quick li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  border-bottom: 1px solid var(--incite-rule);
}

.incite_rd-contact-quick li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.incite_rd-contact-quick li a:first-of-type {
  flex: 1 1 auto;
  color: var(--incite-ink);
  font-family: var(--incite-font-display);
  font-weight: 600;
  font-size: 19px;
}

.incite_rd-contact-quick li a:last-of-type {
  color: var(--incite-blue);
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.incite_rd-contact-more {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (prefers-reduced-motion: reduce) {
  .incite_rd-contact-pin-no,
  .incite_rd-contact-pin-city,
  .incite_rd-contact-office-photo,
  .incite_rd-contact .incite_rd-contact-office h3,
  .incite_rd-contact-office-mapbox iframe {
    transition: none;
  }
}

/* narrower desktops and tablets: the branches two across, so addresses and maps keep a readable width */
@media only screen and (max-width: 1100px) {
  .incite_rd-contact-offices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .incite_rd-contact-office-photo {
    aspect-ratio: 16 / 9;
  }

  /* held to 380px wide: any wider and Google adds its own business card ("No reviews") over the map */
  .incite_rd-contact-office-mapbox {
    max-width: 380px;
    aspect-ratio: 16 / 9;
    margin-bottom: 40px;
  }
}

/* tablets: the number, then the map, then the teams */
@media only screen and (max-width: 959px) {
  .incite_rd-contact-intro {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
      "call  call"
      "atlas quick"
      "teams teams";
    grid-template-rows: none;
    column-gap: 28px;
    row-gap: 28px;
  }

  .incite_rd-contact-quick {
    display: block;
  }

  .incite_rd-contact-teams {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
  }
}

/* phones: a smaller number; the map inset less with smaller pins, the four branch numbers under it; each branch with
   its photo small beside its name and a wide, shorter map */
@media only screen and (max-width: 767px) {
  .incite_rd-contact-intro {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "call"
      "atlas"
      "quick"
      "teams";
    row-gap: 20px;
  }

  .incite_rd-contact .incite_rd-contact-number {
    font-size: 44px;
  }

  .incite_rd-contact-call-icon {
    width: 32px;
    height: 32px;
  }

  .incite_rd-contact-teams {
    display: block;
  }

  .incite_rd-contact-atlas {
    padding: 12px;
  }

  .incite_rd-contact-atlas-map {
    max-width: 250px;
  }

  /* phones: each pin's target is its 26px circle and name (over the 24px minimum) - on the smaller map anything
     taller overlaps its neighbour; the 44px list under the map is the main way to a branch here */
  .incite_rd-contact-pin {
    gap: 5px;
    min-height: 26px;
    transform: translate(-13px, -50%);
  }

  .incite_rd-contact-pin[data-side="left"] {
    transform: translate(calc(-100% + 13px), -50%);
  }

  .incite_rd-contact-pin-no {
    width: 26px;
    height: 26px;
    font-size: 14px;
  }

  .incite_rd-contact-pin-city {
    padding: 1px 4px;
    font-size: 14px;
  }

  .incite_rd-contact-offices {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .incite_rd-contact-office {
    display: grid;
    grid-row: auto;
    grid-template-rows: none;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-areas:
      "photo head"
      "photo address"
      "actions actions"
      "note note"
      "map map";
    column-gap: 14px;
    align-items: start;
  }

  .incite_rd-contact-office-photo {
    grid-area: photo;
    aspect-ratio: 4 / 3;
  }

  .incite_rd-contact-office-head {
    grid-area: head;
    margin: 0 0 6px;
    padding-bottom: 6px;
  }

  .incite_rd-contact .incite_rd-contact-office h3 {
    font-size: 24px;
  }

  .incite_rd-contact .incite_rd-contact-office-address {
    grid-area: address;
    margin: 0 0 12px;
    font-size: 14px;
  }

  .incite_rd-contact-office-actions {
    grid-area: actions;
  }

  .incite_rd-contact-office .incite_rd-contact-note {
    grid-area: note;
  }

  .incite_rd-contact-office-mapbox {
    grid-area: map;
    max-width: none;
    aspect-ratio: 16 / 9;
    margin-top: 14px;
    margin-bottom: 0;
  }
}

/* * * * * PHONES AND TABLETS * * * * */

@media only screen and (max-width: 959px) {

  .incite_rd-bar-text {
    display: none;
  }

  .incite_rd-bar-inner {
    justify-content: flex-end;
  }

  .incite_rd-hero-inner,
  .incite_rd-trade-inner,
  .incite_rd-support {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  /* stacked (text above the account box): the same smooth gradient, top to bottom - the text ends a little over
     half way down, the account box is below it. (For the dark pattern, put back
     --incite-rd-hero-image: url("hero-poly-tall.svg") here, so its facets are not blown up to fill the height) */
  .incite_rd-hero::after {
    background: linear-gradient(to bottom, #545454 0%, #545454 40%, #555555 45%, #575757 50%, #5b5b5b 55%, #606060 60%, #666666 65%, #6e6e6e 70%, #757575 75%, #7d7d7d 80%, #848484 85%, #8b8b8b 90%, #909090 95%, #959595 100%);
  }

  .incite_rd-home .incite_rd-hero-title {
    font-size: 34px;
  }

  /* the brochure tabs a size smaller, so all five stay on one line on tablets */
  .incite_rd-home .incite_flipbook {
    column-gap: 20px;
  }

  .incite_rd-home .incite_flipbook .incite_flipbook_button,
  .incite_rd-home .incite_flipbook .incite_flipbook_button:hover,
  .incite_rd-home .incite_flipbook .incite_flipbook_button.active {
    font-size: 16px;
  }

  .incite_rd-keyinfo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .incite_rd-branches-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .incite_rd-footer-top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  .incite_rd-footer-about {
    grid-column: 1 / -1;
    max-width: none;
  }
}

@media only screen and (max-width: 600px) {

  .incite_rd-bar-links a:not(.incite_rd-bar-phone) {
    display: none;
  }

  .incite_rd-hero-inner {
    padding-top: 32px;
    padding-bottom: 36px;
  }

  /* the fire alarm layout drawing: small, behind the account box
  .incite_rd-hero {
    background-size: 1200px auto, auto;
    background-position: right bottom, center;
  }

  .incite_rd-hero-inner {
    padding-top: 32px;
    padding-bottom: 36px;
  } */

  .incite_rd-home .incite_rd-hero-title {
    font-size: 28px;
  }

  .incite_rd-search {
    height: 50px;
  }

  .incite_rd-search button {
    padding: 0 16px;
  }

  .incite_rd-section {
    padding-top: 40px;
  }

  .incite_rd-home .incite_rd-section-title,
  .incite_rd-contact .incite_rd-section-title {
    font-size: 28px;
  }

  .incite_rd-range {
    gap: 12px;
  }

  .incite_rd-range-item {
    flex-basis: 86%;
  }

  /* phones swipe the row: no arrows, and just "View all" */
  html .incite_rd-range-frame > .incite_rd-range-prev,
  html .incite_rd-range-frame > .incite_rd-range-next,
  .incite_rd-range-count {
    display: none;
  }

  .incite_rd-keyinfo,
  .incite_rd-contact-more,
  .incite_rd-branches-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .incite_rd-support-phone {
    font-size: 26px;
  }

  /* forms: every field the full width of the column - half-width pairs (ABN / ACN, Email / Confirm Email) were
     left 12px short, or squeezed side by side */
  html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-one-half,
  html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-layout-column-50,
  html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-field-row-block {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-field-row-block + .wpforms-field-row-block {
    margin-top: 12px;
  }

  html body div.wpforms-container-full.wpforms-container-full .wpforms-form .wpforms-field-layout-columns {
    margin-left: 0;
    margin-right: 0;
  }

  .incite_rd-trade {
    margin-top: 72px;
  }

  /* the brochure tabs wrap (every tab stays in view - a sideways-scrolling row hid some from mouse and keyboard
     users), in the buttons' 15px and closer together: two lines on phones from 360px wide, three below that */
  .incite_rd-home .incite_flipbook {
    column-gap: 12px;
  }

  .incite_rd-home .incite_flipbook .incite_flipbook_button,
  .incite_rd-home .incite_flipbook .incite_flipbook_button:hover,
  .incite_rd-home .incite_flipbook .incite_flipbook_button.active {
    padding: 10px 0;
    font-size: 15px;
  }

  .incite_rd-footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 40px;
    padding-bottom: 32px;
  }
}

/* * * * * WIDE SCREENS * * * * */
/* On wide screens (1680px and up, then 2200px and up) the site's column grows - 1520px, then 1720px - so the page
   uses the screen instead of sitting in a strip down the middle of it. The header, the drop-down panels, Home, the
   Products page, the shop and the account pages all follow the column. The reading pages (the Elementor pages and the
   forms) keep their 1140px column: a longer line is harder to read. The Home opening grows with it: a larger
   headline, and the line drawing drawn larger, its lines as fine as at every other size (they are set by the size it
   is drawn at, as for the smaller sizes), the opening as much taller as the drawing needs. The Products page takes
   four tiles to a row. */
@media only screen and (min-width: 1680px) {

  html body:not(.boxed-layout) #wrap .container {
    width: 1520px;
  }

  .incite_rd-hero {
    --incite-rd-asd-w: 300px;
  }

  .incite_rd-hero-inner {
    min-height: calc(var(--incite-rd-asd-w) * 1.985);
  }

  .incite_rd-asd {
    left: max(760px, calc(100% - var(--incite-rd-asd-w) * 2.1756));
  }

  .incite_rd-hero-text {
    max-width: 680px;
  }

  .incite_rd-home .incite_rd-hero-title {
    font-size: 52px;
  }

  .incite_rd-hero-lead {
    font-size: 19px;
  }

  .incite_rd-search {
    max-width: 680px;
  }

  .incite_rd-asdsketch .sk-guide { stroke-width: 1.05; }
  .incite_rd-asdsketch .sk-main { stroke-width: 2.1; }
  .incite_rd-asdsketch .sk-fine { stroke-width: 1.22; }
  .incite_rd-asdsketch .sk-hatch { stroke-width: 0.96; }
  .incite_rd-asdsketch .sk-flow { stroke-width: 1.57; }
  .incite_rd-asdsketch .sk-print { stroke-width: 0.87; }
  .incite_rd-asdsketch .sk-led-mark { stroke-width: 0.92 !important; }

  .incite_rd-products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media only screen and (min-width: 2200px) {

  html body:not(.boxed-layout) #wrap .container {
    width: 1720px;
  }

  .incite_rd-hero {
    --incite-rd-asd-w: 340px;
  }

  .incite_rd-asd {
    left: max(860px, calc(100% - var(--incite-rd-asd-w) * 2.1756));
  }

  .incite_rd-hero-text {
    max-width: 760px;
  }

  .incite_rd-home .incite_rd-hero-title {
    font-size: 58px;
  }

  .incite_rd-hero-lead {
    font-size: 20px;
  }

  .incite_rd-search {
    max-width: 720px;
    height: 60px;
  }

  .incite_rd-asdsketch .sk-guide { stroke-width: 0.92; }
  .incite_rd-asdsketch .sk-main { stroke-width: 1.85; }
  .incite_rd-asdsketch .sk-fine { stroke-width: 1.08; }
  .incite_rd-asdsketch .sk-hatch { stroke-width: 0.85; }
  .incite_rd-asdsketch .sk-flow { stroke-width: 1.39; }
  .incite_rd-asdsketch .sk-print { stroke-width: 0.77; }
  .incite_rd-asdsketch .sk-led-mark { stroke-width: 0.82 !important; }
}