@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");


:root {
  --click-navy: #0b1f3a;
  --click-blue: #005dff;
  --click-cyan: #59d9ff;
  --click-orange: #f58220;
  --click-ice: #f5f7fa;
  --click-text: #4b5665;
  --click-line: #dfe6ef;
  --theme: #005dff;
  --theme-2: #59d9ff;
  --theme-3: #0b1f3a;
  --theme-4: #f58220;
  --header: #0b1f3a;
  --bg: #f5f7fa;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--click-text);
  background: #ffffff;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

.click-topbar {
  background: var(--click-navy);
  color: #fff;
  padding: 9px 0;
  font-size: 13px;
}

.click-topbar .topbar-items {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

.click-topbar .tagline {
  margin-left: auto;
  font-weight: 700;
}

.header-1 {
  background: #fff;
  box-shadow: 0 6px 24px rgba(11, 31, 58, 0.08);
  position: sticky;
  top: 0;
  z-index: 99;
}

.header-main {
  min-height: 76px;
}

.click-header-logo img {
  width: 165px;
  max-height: 58px;
  object-fit: contain;
}

.click-header-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-svg-link {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(11, 31, 58, 0.15);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--click-navy);
  position: relative;
}

.header-svg-link:hover {
  color: var(--click-blue);
  border-color: var(--click-blue);
}

.header-cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  line-height: 19px;
  text-align: center;
  border-radius: 20px;
  background: var(--click-orange);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.header-1 .main-menu > nav > ul {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
}

.header-1 .main-menu ul li {
  list-style: none;
  position: relative;
}

.header-1 .main-menu ul li a {
  color: var(--click-navy);
  font-size: 14px;
  font-weight: 700;
  padding: 26px 0;
  display: block;
}

.header-1 .main-menu ul li a:hover {
  color: var(--click-blue);
}

.header-1 .main-menu .submenu {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 230px;
  background: #fff;
  padding: 10px 0;
  border-top: 3px solid var(--click-blue);
  box-shadow: 0 15px 35px rgba(11, 31, 58, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 0.2s ease;
  z-index: 100;
}

.header-1 .main-menu li:hover > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-1 .main-menu .submenu li a {
  padding: 10px 20px;
}

.click-account-button {
  display: inline-flex !important;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}

.theme-btn,
.theme-btn.theme-btn-2 {
  background: var(--click-blue) !important;
  color: #fff !important;
  border: none !important;
}

.theme-btn:hover,
.theme-btn.theme-btn-2:hover {
  background: var(--click-navy) !important;
}

.theme-btn.black-btn,
.black-btn {
  background: var(--click-navy) !important;
}

.theme-btn.orange-btn {
  background: var(--click-orange) !important;
}

.section-bg {
  background: var(--click-ice) !important;
}

.section-title .sub-title span {
  color: var(--click-blue) !important;
}

/* HOME 1 HERO: preserve template structure and do not apply any overlay. */
.click-home-hero {
  position: relative;
  overflow: hidden;
}

.click-home-hero::before,
.click-home-hero::after,
.click-home-hero .hero-bg::before,
.click-home-hero .hero-bg::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.click-home-hero .hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  border-radius: 0 !important;
  z-index: 0;
}

.click-home-hero .container {
  position: relative;
  z-index: 2;
}

.click-home-hero .hero-content {
  padding-top: 120px;
  padding-bottom: 110px;
}

.click-home-hero .hero-content h1 {
  color: #fff;
  max-width: 740px;
}

.click-home-hero .hero-content > p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 640px;
}

.click-home-hero .hero-image {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}

.click-home-hero .hero-image img {
  width: min(610px, 96%);
  border-radius: 24px;
  filter: drop-shadow(0 24px 45px rgba(0, 0, 0, 0.22));
}

.click-hero-benefits {
  gap: 34px;
  flex-wrap: wrap;
}

.click-hero-benefits .infu {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff;
}

.click-hero-benefits .infu strong {
  display: block;
  color: var(--click-cyan);
}

.click-circle-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(89, 217, 255, 0.16);
  color: var(--click-cyan);
  flex: 0 0 auto;
}

.click-circle-icon svg,
.header-svg-link svg,
.feature-icon svg,
.footer-contact-icon svg {
  width: 22px;
  height: 22px;
}

/* Internal heroes use ONE solid black translucent overlay. No gradient overlays. */
.click-page-hero {
  min-height: 355px;
  position: relative;
  background-image: url("../img/hero/hero-3.jpg");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  isolation: isolate;
}

.click-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.68);
  z-index: -1;
}

.click-page-hero h1,
.click-page-hero p,
.click-page-hero a {
  color: #fff;
}

.click-page-hero h1 {
  font-size: clamp(42px, 6vw, 76px);
  margin-bottom: 10px;
}

.click-breadcrumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.8);
}

/* Image CTAs use ONE solid black translucent overlay. */
.click-cta {
  position: relative;
  isolation: isolate;
  background-image: url("../img/cta/cta-bg.png");
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  padding: 72px 55px;
  overflow: hidden;
}

.click-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.68);
}

.click-cta h2,
.click-cta p {
  color: #fff;
}

.click-cta p {
  max-width: 730px;
}

.click-card,
.click-product-card,
.click-form-card,
.click-legal-card,
.click-account-card,
.click-installer-card,
.click-guide-card {
  background: #fff;
  border: 1px solid var(--click-line);
  border-radius: 16px;
  padding: 28px;
  height: 100%;
  box-shadow: 0 10px 35px rgba(11, 31, 58, 0.05);
}

.click-card h4,
.click-product-card h4,
.click-guide-card h4,
.click-installer-card h4 {
  color: var(--click-navy);
}

.feature-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 93, 255, 0.08);
  color: var(--click-blue);
  margin-bottom: 18px;
}

.click-product-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
}

.click-product-card .product-image {
  background: var(--click-ice);
  border-radius: 14px;
  aspect-ratio: 1 / 0.82;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 20px;
}

.click-product-card .product-image img {
  width: 82%;
  max-height: 260px;
  object-fit: contain;
}

.click-product-card .product-meta {
  color: var(--click-blue);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.click-product-card .product-price {
  margin-top: 8px;
  margin-bottom: 8px;
  color: var(--click-navy);
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.home-product-card .product-image img {
  width: 88%;
  max-height: 205px;
  object-fit: contain;
}

.click-product-card .product-status {
  color: var(--click-text);
  font-size: 14px;
}

.click-product-card .product-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
  flex-wrap: wrap;
}

.click-small-btn {
  border: 0;
  background: var(--click-blue);
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
  padding: 10px 14px;
}

.click-small-btn.outline {
  background: #fff;
  color: var(--click-navy);
  border: 1px solid var(--click-line);
}

.click-shop-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.click-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.click-input,
.click-select,
.click-textarea {
  width: 100%;
  border: 1px solid var(--click-line);
  border-radius: 9px;
  background: #fff;
  padding: 13px 14px;
  color: var(--click-navy);
}

.click-textarea {
  min-height: 140px;
  resize: vertical;
}

.click-form-group {
  margin-bottom: 18px;
}

.click-form-group label {
  display: block;
  color: var(--click-navy);
  font-weight: 700;
  margin-bottom: 7px;
}

.click-form-note {
  background: rgba(0, 93, 255, 0.06);
  border-left: 4px solid var(--click-blue);
  padding: 15px 18px;
  border-radius: 8px;
}

.click-warning-note {
  background: rgba(245, 130, 32, 0.09);
  border-left: 4px solid var(--click-orange);
  padding: 15px 18px;
  border-radius: 8px;
}

.click-result-box {
  border-radius: 18px;
  background: var(--click-navy);
  color: #fff;
  padding: 34px;
}

.click-result-box h2,
.click-result-box h3 {
  color: #fff;
}

.click-result-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin: 26px 0;
}

.click-result-number {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 18px;
}

.click-result-number span {
  display: block;
  color: var(--click-cyan);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.click-result-number strong {
  display: block;
  color: #fff;
  font-size: 30px;
  margin-top: 4px;
}

.click-accordion-item {
  background: #fff;
  border: 1px solid var(--click-line);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.click-accordion-button {
  width: 100%;
  text-align: left;
  background: #fff;
  border: 0;
  padding: 20px 22px;
  color: var(--click-navy);
  font-weight: 800;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.click-accordion-content {
  display: none;
  padding: 0 22px 20px;
}

.click-accordion-item.open .click-accordion-content {
  display: block;
}

.click-legal-card h2,
.click-legal-card h3 {
  color: var(--click-navy);
  margin-top: 26px;
}

.click-legal-card h2:first-child,
.click-legal-card h3:first-child {
  margin-top: 0;
}

.click-legal-card ul,
.click-guide-article ul {
  padding-left: 21px;
}

.click-footer {
  background: var(--click-navy);
  color: rgba(255, 255, 255, 0.75);
}

.click-footer h4,
.click-footer h5,
.click-footer a {
  color: #fff;
}

.click-footer-logo img {
  width: 215px;
  background: #fff;
  border-radius: 8px;
  padding: 4px;
}

.click-footer .list-area {
  padding: 0;
  margin: 0;
}

.click-footer .list-area li {
  list-style: none;
  margin-bottom: 10px;
}

.click-footer .footer-contact-icon {
  width: 38px;
  color: var(--click-cyan);
  flex: 0 0 auto;
}

.click-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.click-mobile-toggle {
  display: none;
  border: 0;
  background: transparent;
  padding: 8px;
}

.click-mobile-toggle span {
  width: 27px;
  height: 2px;
  background: var(--click-navy);
  display: block;
  margin: 5px 0;
}

.click-mobile-panel {
  position: fixed;
  right: -330px;
  top: 0;
  width: 320px;
  max-width: 88vw;
  height: 100vh;
  background: #fff;
  z-index: 9999;
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.18);
  transition: right 0.25s ease;
  padding: 28px;
  overflow-y: auto;
}

.click-mobile-panel.open {
  right: 0;
}

.click-mobile-panel .mobile-close {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--click-navy);
  color: #fff;
  border: 0;
  float: right;
  font-size: 24px;
}

.click-mobile-panel nav {
  margin-top: 70px;
  display: flex;
  flex-direction: column;
}

.click-mobile-panel nav a {
  color: var(--click-navy);
  font-weight: 700;
  padding: 10px 0;
  border-bottom: 1px solid var(--click-line);
}

.click-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: var(--click-navy);
  color: #fff;
  border-radius: 10px;
  padding: 14px 18px;
  z-index: 10000;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: 0.2s ease;
}

.click-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.click-empty-state {
  text-align: center;
  background: var(--click-ice);
  border-radius: 14px;
  padding: 45px 25px;
}

.click-table-wrap {
  overflow-x: auto;
}

.click-table {
  width: 100%;
  border-collapse: collapse;
}

.click-table th,
.click-table td {
  border-bottom: 1px solid var(--click-line);
  padding: 15px;
  text-align: left;
  vertical-align: top;
}

.click-table th {
  color: var(--click-navy);
  background: var(--click-ice);
}

.click-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 99px;
  padding: 6px 10px;
  background: rgba(0, 93, 255, 0.08);
  color: var(--click-blue);
  font-weight: 800;
  font-size: 12px;
}

.click-guide-image {
  height: 230px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 18px;
}

.click-guide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.click-installer-image {
  background: var(--click-ice);
  border-radius: 12px;
  padding: 24px;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.click-installer-image img {
  max-height: 170px;
}

.click-checkout-summary {
  position: sticky;
  top: 120px;
}

.click-policy-intro {
  border-bottom: 1px solid var(--click-line);
  padding-bottom: 20px;
  margin-bottom: 24px;
}

@media (max-width: 1199px) {
  .header-1 .main-menu,
  .header-button {
    display: none !important;
  }

  .click-mobile-toggle {
    display: block;
  }

  .header-main {
    min-height: 72px;
  }

  .click-filter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .click-topbar .tagline {
    display: none;
  }

  .click-home-hero .hero-content {
    padding-top: 90px;
    padding-bottom: 25px;
    text-align: center;
  }

  .click-home-hero .hero-content h1,
  .click-home-hero .hero-content > p {
    margin-left: auto;
    margin-right: auto;
  }

  .click-home-hero .hero-image {
    padding: 20px 0 70px;
  }

  .click-hero-benefits {
    justify-content: center;
  }

  .click-result-numbers {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .click-topbar {
    display: none;
  }

  .click-header-logo img {
    width: 150px;
  }

  .header-svg-link.search-link {
    display: none;
  }

  .click-filter-grid {
    grid-template-columns: 1fr;
  }

  .click-cta {
    padding: 45px 25px;
  }

  .click-page-hero {
    min-height: 290px;
  }

  .click-footer-bottom {
    text-align: center;
    justify-content: center;
  }
}

/* CHANGES 1 - approved 2026-08-27 */

/* Typography follows the client's Poppins preference, with spacing and weights
   adjusted to echo the two levels of lettering used in the Click-Aircon logo. */
body,
button,
input,
select,
textarea {
  font-family: "Poppins", Arial, sans-serif !important;
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6,
.header-1 .main-menu ul li a {
  font-family: "Poppins", Arial, sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.section-title .sub-title span,
.click-pill,
.click-topbar .tagline {
  font-family: "Poppins", Arial, sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.section-title h2 {
  font-size: clamp(32px, 3vw, 42px) !important;
  line-height: 1.18 !important;
  margin-bottom: 0;
}

.section-title .section-description {
  max-width: 760px;
  margin-top: 15px;
  margin-bottom: 0;
  color: var(--click-text);
  line-height: 1.75;
}

.click-cta h2 {
  font-size: clamp(32px, 3vw, 42px) !important;
  line-height: 1.18 !important;
}

/* Header: keep the desktop navigation on one line and use an account icon. */
.header-1 .main-menu > nav > ul {
  flex-wrap: nowrap;
  gap: 14px;
}

.header-1 .main-menu ul li a {
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: -0.01em;
}

.click-header-tools {
  gap: 9px;
}

.account-icon-link svg {
  width: 21px;
  height: 21px;
}

.click-mobile-panel nav a.mobile-sub-link {
  padding-left: 18px;
  color: var(--click-blue);
  font-size: 14px;
}

/* Fix the template button animation so hover states stay inside Click-Aircon colours. */
.theme-btn::before,
.theme-btn::after {
  background: var(--click-navy) !important;
}

.theme-btn.black-btn::before,
.theme-btn.black-btn::after,
.black-btn::before,
.black-btn::after {
  background: var(--click-blue) !important;
}

.theme-btn:hover,
.theme-btn.theme-btn-2:hover,
.theme-btn.black-btn:hover,
.black-btn:hover {
  color: #fff !important;
}

/* Home feature cards directly after the hero. */
.click-home-features .home-feature-card {
  border: 2px solid var(--click-navy);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.click-home-features .home-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(11, 31, 58, 0.11);
}

.click-card-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
}

.click-card-heading .feature-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 0;
  flex: 0 0 auto;
}

.click-card-heading h4 {
  margin: 0;
  font-size: 18px;
  line-height: 1.28;
}

/* Shop Click-Aircon home section. */
.click-home-products .home-product-card {
  border: 2px solid var(--click-navy);
}

.click-home-products .section-description {
  margin-top: 14px;
}

.click-small-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.click-small-btn:hover {
  background: var(--click-navy);
  color: #fff;
  transform: translateY(-1px);
}

.click-small-btn.outline {
  border: 2px solid var(--click-navy);
  color: var(--click-navy);
  background: #fff;
}

.click-small-btn.outline:hover {
  background: var(--click-navy);
  border-color: var(--click-navy);
  color: #fff;
}

/* Size Calculator and Installer Network sections: same template layout, cleaner presentation. */
.click-home-info-section .click-info-copy {
  padding-top: 22px;
  padding-bottom: 22px;
}

.click-home-info-section .click-info-copy > p {
  margin-top: 20px;
  margin-bottom: 0;
  line-height: 1.8;
  max-width: 650px;
}

.click-home-info-section .click-info-copy > .theme-btn {
  margin-top: 28px;
}

.click-home-info-section img {
  border-radius: 18px !important;
  border: 2px solid rgba(11, 31, 58, 0.16);
  box-shadow: 0 18px 45px rgba(11, 31, 58, 0.10);
}

.click-home-calculator-section .row,
.click-home-installer-section .row {
  position: relative;
}

/* Buying Guides home section. */
.click-home-guides .home-guide-card {
  border: 2px solid var(--click-navy);
  display: flex;
  flex-direction: column;
}

.click-home-guides .home-guide-card h4 {
  margin-bottom: 12px;
}

.click-home-guides .home-guide-card p {
  margin-bottom: 22px;
  line-height: 1.7;
}

.click-home-guides .click-guide-btn {
  align-self: flex-start;
  margin-top: auto;
  min-width: 125px;
}

/* Footer changes requested in Changes 1. */
.click-footer-logo img {
  width: 300px;
  max-width: 100%;
}

.click-footer .footer-contact-icon + div {
  padding-top: 2px;
}

@media (max-width: 1399px) {
  .header-1 .main-menu > nav > ul {
    gap: 10px;
  }

  .header-1 .main-menu ul li a {
    font-size: 12.5px;
  }

  .click-header-logo img {
    width: 155px;
  }
}

@media (max-width: 991px) {
  .section-title h2,
  .click-cta h2 {
    font-size: 34px !important;
  }

  .click-home-info-section .click-info-copy {
    padding-top: 0;
    padding-bottom: 10px;
  }
}

@media (max-width: 767px) {
  .section-title h2,
  .click-cta h2 {
    font-size: 30px !important;
    line-height: 1.22 !important;
  }

  .click-card-heading {
    align-items: flex-start;
  }
}


/* CHANGES 3 - hero CTA/background, heading weight and dropdown chevrons */

/* Keep Poppins but reduce heading weight for a cleaner brand match. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600 !important;
}

/* Home hero: keep the Home 1 structure and no overlay; change only the background. */
.click-home-hero .hero-bg {
  background-image: none !important;
  background-color: var(--click-navy) !important;
  background: linear-gradient(115deg, #0b1f3a 0%, #123f7a 38%, #005dff 68%, #dff7ff 100%) !important;
}

/* Proper SVG dropdown chevrons in the desktop header. */
.header-1 .main-menu > nav > ul > li > a {
  display: flex;
  align-items: center;
  gap: 5px;
}

.header-1 .main-menu .menu-chevron {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 14px;
  transition: transform 0.2s ease;
}

.header-1 .main-menu .menu-chevron svg {
  width: 14px;
  height: 14px;
  display: block;
}

.header-1 .main-menu > nav > ul > li:hover > a .menu-chevron {
  transform: rotate(180deg);
}

/* CHANGES 5 - Home hero matched to the approved visual reference. */
.click-home-hero {
  min-height: 0;
  padding: 0;
  background: #0b1f3a;
}

.click-home-hero .hero-bg {
  background:
    radial-gradient(circle at 45% 70%, rgba(0, 93, 255, 0.95) 0%, rgba(0, 93, 255, 0.55) 18%, rgba(0, 93, 255, 0) 46%),
    radial-gradient(circle at 84% 45%, rgba(89, 217, 255, 0.72) 0%, rgba(89, 217, 255, 0.28) 29%, rgba(89, 217, 255, 0) 58%),
    linear-gradient(112deg, #06224b 0%, #063e91 37%, #0477e8 67%, #a9e7ff 100%) !important;
}

.click-home-hero .container {
  max-width: 1540px;
  padding-top: 72px;
  padding-bottom: 42px;
}

.click-home-hero .click-hero-main-row {
  min-height: 600px;
}

.click-home-hero .hero-content {
  padding-top: 36px;
  padding-right: 0;
  padding-bottom: 36px;
  padding-left: 32px;
}

.click-hero-kicker {
  color: #59d9ff;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.click-home-hero .hero-content h1 {
  color: #ffffff;
  font-size: clamp(48px, 4.05vw, 68px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.03 !important;
  margin: 0;
  max-width: 720px;
}

.click-home-hero .hero-content h1 span {
  color: #59d9ff;
  display: block;
}

.click-hero-rule {
  width: 92px;
  height: 5px;
  margin: 28px 0 26px;
  border-radius: 999px;
  background: #59d9ff;
}

.click-home-hero .hero-content > p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 18px;
  line-height: 1.75;
  margin: 0;
  max-width: 650px;
}

.click-hero-actions {
  margin-top: 34px !important;
}

.click-home-hero .click-hero-actions .theme-btn {
  min-width: 255px;
  min-height: 68px;
  padding: 18px 26px !important;
  border-radius: 14px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
}

.click-home-hero .click-hero-actions .theme-btn svg {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
}

.click-home-hero .click-hero-actions .theme-btn .click-btn-arrow {
  width: 20px;
  height: 20px;
  margin-left: 4px;
  transition: transform 0.2s ease;
}

.click-home-hero .click-hero-actions .theme-btn:hover .click-btn-arrow {
  transform: translateX(4px);
}

.click-home-hero .click-hero-primary-btn {
  background: #08aef4 !important;
  border: 2px solid #59d9ff !important;
  box-shadow: 0 12px 30px rgba(0, 93, 255, 0.28);
  color: #ffffff !important;
}

.click-home-hero .click-hero-primary-btn:hover {
  background: #005dff !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

.click-home-hero .click-hero-secondary-btn {
  background: rgba(5, 31, 70, 0.82) !important;
  border: 2px solid rgba(255, 255, 255, 0.95) !important;
  color: #ffffff !important;
}

.click-home-hero .click-hero-secondary-btn:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #0b1f3a !important;
}

.click-home-hero .click-hero-showcase {
  padding: 34px 0 34px 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.click-home-hero .click-hero-showcase img {
  width: min(800px, 100%);
  max-height: 620px;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.72);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0, 30, 80, 0.18);
  filter: none;
}

.click-home-hero .click-hero-benefits {
  width: 100%;
  margin-top: 8px;
  padding: 21px 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 54px;
  background: rgba(34, 102, 208, 0.30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
}

.click-home-hero .click-hero-benefits .infu {
  min-height: 62px;
  margin: 0;
  padding: 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: #ffffff;
  text-decoration: none;
  position: relative;
}

.click-home-hero .click-hero-benefits .infu:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 42px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.24);
}

.click-benefit-icon {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 54px;
  color: #59d9ff;
}

.click-benefit-icon svg {
  width: 46px;
  height: 46px;
}

.click-benefit-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #ffffff;
}

.click-home-hero .click-hero-benefits .infu strong {
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
}

.click-benefit-copy > span {
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 1.35;
}

@media (max-width: 1199px) {
  .click-home-hero .container {
    padding-top: 56px;
  }

  .click-home-hero .click-hero-main-row {
    min-height: 520px;
  }

  .click-home-hero .hero-content h1 {
    font-size: clamp(44px, 5vw, 58px) !important;
  }

  .click-home-hero .click-hero-showcase {
    padding-left: 18px;
  }

  .click-home-hero .click-hero-benefits .infu {
    padding: 0 18px;
  }
}

@media (max-width: 991px) {
  .click-home-hero .container {
    padding-top: 48px;
    padding-bottom: 36px;
  }

  .click-home-hero .hero-content {
    padding: 22px 0 24px;
    text-align: left;
  }

  .click-home-hero .hero-content h1,
  .click-home-hero .hero-content > p {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }

  .click-home-hero .click-hero-showcase {
    padding: 18px 0 34px;
  }

  .click-home-hero .click-hero-showcase img {
    width: 100%;
    max-height: none;
  }

  .click-home-hero .click-hero-benefits {
    grid-template-columns: 1fr;
    border-radius: 28px;
    padding: 8px 22px;
  }

  .click-home-hero .click-hero-benefits .infu {
    justify-content: flex-start;
    padding: 18px 4px;
  }

  .click-home-hero .click-hero-benefits .infu:not(:last-child)::after {
    width: 100%;
    height: 1px;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    transform: none;
  }
}

@media (max-width: 575px) {
  .click-home-hero .container {
    padding-top: 34px;
    padding-bottom: 28px;
  }

  .click-hero-kicker {
    font-size: 15px;
  }

  .click-home-hero .hero-content h1 {
    font-size: 38px !important;
    line-height: 1.08 !important;
  }

  .click-home-hero .hero-content > p {
    font-size: 16px;
    line-height: 1.65;
  }

  .click-home-hero .click-hero-actions {
    width: 100%;
  }

  .click-home-hero .click-hero-actions .theme-btn {
    width: 100%;
    min-width: 0;
  }

  .click-home-hero .click-hero-showcase img {
    border-radius: 18px;
  }

  .click-home-hero .click-hero-benefits {
    border-radius: 22px;
  }
}

/* CHANGES 7 - move hero content slightly upward without changing layout. */
@media (min-width: 1200px) {
  .click-home-hero .container {
    padding-top: 50px;
  }

  .click-page-hero > .container {
    transform: translateY(-16px);
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .click-home-hero .container {
    padding-top: 42px;
  }

  .click-page-hero > .container {
    transform: translateY(-12px);
  }
}

@media (max-width: 991px) {
  .click-home-hero .container {
    padding-top: 36px;
  }

  .click-page-hero > .container {
    transform: translateY(-10px);
  }
}

@media (max-width: 575px) {
  .click-home-hero .container {
    padding-top: 28px;
  }

  .click-page-hero > .container {
    transform: translateY(-8px);
  }
}

/* CHANGES 8 - compact header slightly and lift the Home hero. */
@media (min-width: 992px) {
  .header-main {
    min-height: 68px;
  }

  .click-header-logo img {
    width: 154px;
    max-height: 50px;
  }

  .header-1 .main-menu ul li a {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .header-svg-link {
    width: 40px;
    height: 40px;
  }

  .click-home-hero .container {
    padding-top: 34px;
  }
}

@media (min-width: 576px) and (max-width: 991px) {
  .header-main {
    min-height: 66px;
  }

  .click-header-logo img {
    max-height: 48px;
  }

  .click-home-hero .container {
    padding-top: 28px;
  }
}

@media (max-width: 575px) {
  .header-main {
    min-height: 62px;
  }

  .click-header-logo img {
    max-height: 44px;
  }

  .click-home-hero .container {
    padding-top: 20px;
  }
}

/* CHANGES 12 - desktop product search bar between the logo and main navigation. */
.click-header-search {
  width: 220px;
  height: 42px;
  flex: 0 0 220px;
  margin-left: 20px;
  margin-right: 18px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(11, 31, 58, 0.20);
  border-radius: 24px;
  background: #f5f7fa;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.click-header-search:focus-within {
  border-color: var(--click-blue);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 93, 255, 0.10);
}

.click-header-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 8px 0 16px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--click-navy);
  font-family: "Poppins", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.click-header-search input::placeholder {
  color: rgba(11, 31, 58, 0.58);
}

.click-header-search input::-webkit-search-cancel-button {
  cursor: pointer;
}

.click-header-search button {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--click-navy);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.click-header-search button:hover {
  background: rgba(0, 93, 255, 0.08);
  color: var(--click-blue);
}

.click-header-search button svg {
  width: 19px;
  height: 19px;
}

@media (min-width: 1400px) {
  .click-header-search {
    width: 235px;
    flex-basis: 235px;
  }

  .click-header-tools .search-link {
    display: none;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .click-header-search {
    width: 165px;
    flex-basis: 165px;
    margin-left: 12px;
    margin-right: 10px;
  }

  .click-header-search input {
    padding-left: 13px;
    font-size: 12px;
  }

  .click-header-tools .search-link {
    display: none;
  }
}

@media (max-width: 1199px) {
  .click-header-search {
    display: none;
  }
}



/* CHANGES 14 - fixed WhatsApp action button. */
.click-whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9998;
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(11, 31, 58, 0.24);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.click-whatsapp-float:hover {
  transform: translateY(-3px) scale(1.03);
  background: #1fbd59;
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(11, 31, 58, 0.30);
}

.click-whatsapp-float svg {
  width: 31px;
  height: 31px;
}

.click-whatsapp-float[aria-disabled="true"] {
  cursor: pointer;
}

@media (max-width: 575px) {
  .click-whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 54px;
    height: 54px;
  }

  .click-whatsapp-float svg {
    width: 29px;
    height: 29px;
  }
}


/* CHANGES 15 - floating cart shortcut and add-to-cart side drawer. */
.click-side-cart-float {
  position: fixed;
  right: 24px;
  bottom: 94px;
  z-index: 9998;
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #59d9ff;
  border-radius: 50%;
  background: #0b1f3a;
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(11, 31, 58, 0.24);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.click-side-cart-float:hover {
  transform: translateY(-3px) scale(1.03);
  background: #005dff;
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(11, 31, 58, 0.30);
}

.click-side-cart-float svg {
  width: 29px;
  height: 29px;
}

.click-side-cart-count {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #f58220;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.click-side-cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(4, 15, 32, 0.54);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.click-side-cart-overlay.open {
  opacity: 1;
  visibility: visible;
}

.click-side-cart {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10002;
  width: min(430px, 92vw);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  box-shadow: -20px 0 60px rgba(11, 31, 58, 0.22);
  transform: translateX(105%);
  transition: transform 0.32s ease;
}

.click-side-cart.open {
  transform: translateX(0);
}

body.click-side-cart-open {
  overflow: hidden;
}

.click-side-cart-header {
  min-height: 108px;
  padding: 24px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #dfe7f1;
  background: #f5f7fa;
}

.click-side-cart-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: #005dff;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.click-side-cart-header h3 {
  margin: 0;
  color: #0b1f3a;
  font-family: "Poppins", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}

.click-side-cart-close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  border: 1px solid #c9d6e5;
  border-radius: 50%;
  background: #ffffff;
  color: #0b1f3a;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.click-side-cart-close:hover {
  border-color: #005dff;
  background: #005dff;
  color: #ffffff;
}

.click-side-cart-close svg {
  width: 21px;
  height: 21px;
}

.click-side-cart-body {
  flex: 1;
  padding: 22px;
  overflow-y: auto;
  background: #ffffff;
}

.click-side-cart-item {
  padding: 16px 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  border-bottom: 1px solid #e1e8f0;
}

.click-side-cart-item:first-child {
  padding-top: 0;
}

.click-side-cart-thumb {
  width: 92px;
  height: 92px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dce5ef;
  border-radius: 14px;
  background: #f5f7fa;
}

.click-side-cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.click-side-cart-category {
  display: block;
  margin-bottom: 3px;
  color: #005dff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.click-side-cart-info h4 {
  margin: 0 0 3px;
  color: #0b1f3a;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.click-side-cart-info p {
  margin: 0 0 10px;
  color: #667085;
  font-size: 13px;
}

.click-side-cart-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.click-side-cart-qty {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd8e6;
  border-radius: 8px;
  background: #ffffff;
  color: #0b1f3a;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.click-side-cart-qty:hover {
  border-color: #005dff;
  background: #f2f7ff;
  color: #005dff;
}

.click-side-cart-controls > span {
  min-width: 22px;
  color: #0b1f3a;
  font-weight: 600;
  text-align: center;
}

.click-side-cart-remove {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #667085;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.click-side-cart-remove:hover {
  color: #005dff;
}

.click-side-cart-empty {
  min-height: 320px;
  padding: 34px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.click-side-cart-empty-icon {
  width: 76px;
  height: 76px;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #59d9ff;
  border-radius: 50%;
  background: #0b1f3a;
  color: #ffffff;
}

.click-side-cart-empty-icon svg {
  width: 35px;
  height: 35px;
}

.click-side-cart-empty h4 {
  margin: 0 0 8px;
  color: #0b1f3a;
  font-family: "Poppins", sans-serif;
  font-size: 21px;
  font-weight: 600;
}

.click-side-cart-empty p {
  max-width: 280px;
  margin: 0;
  color: #667085;
  font-size: 14px;
  line-height: 1.6;
}

.click-side-cart-footer {
  padding: 18px 22px 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border-top: 1px solid #dfe7f1;
  background: #f5f7fa;
}

.click-side-cart-view,
.click-side-cart-checkout {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.click-side-cart-view {
  border: 2px solid #0b1f3a;
  background: #ffffff;
  color: #0b1f3a;
}

.click-side-cart-view:hover {
  border-color: #005dff;
  background: #005dff;
  color: #ffffff;
}

.click-side-cart-checkout {
  border: 2px solid #005dff;
  background: #005dff;
  color: #ffffff;
}

.click-side-cart-checkout:hover {
  border-color: #0b1f3a;
  background: #0b1f3a;
  color: #ffffff;
}

@media (max-width: 575px) {
  .click-side-cart-float {
    right: 16px;
    bottom: 82px;
    width: 54px;
    height: 54px;
  }

  .click-side-cart-float svg {
    width: 27px;
    height: 27px;
  }

  .click-side-cart {
    width: 94vw;
  }

  .click-side-cart-header {
    min-height: 92px;
    padding: 20px;
  }

  .click-side-cart-header h3 {
    font-size: 24px;
  }

  .click-side-cart-body {
    padding: 18px;
  }

  .click-side-cart-footer {
    padding: 16px 18px 18px;
  }
}

/* Click-Aircon frost cursor effect */
@media (hover: hover) and (pointer: fine) {
  .click-ice-cursor-glow {
    position: fixed;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    z-index: 99999;
    pointer-events: none;
    border: 1px solid rgba(89, 217, 255, 0.72);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(89, 217, 255, 0.28) 0%, rgba(0, 93, 255, 0.12) 46%, rgba(0, 93, 255, 0) 72%);
    box-shadow: 0 0 12px rgba(89, 217, 255, 0.44), 0 0 24px rgba(0, 93, 255, 0.18);
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.85);
    transition: width 0.16s ease, height 0.16s ease, border-color 0.16s ease, opacity 0.16s ease, box-shadow 0.16s ease;
    will-change: transform;
  }

  .click-ice-cursor-glow.is-visible {
    opacity: 1;
  }

  .click-ice-cursor-glow.is-interactive {
    width: 38px;
    height: 38px;
    border-color: rgba(89, 217, 255, 0.95);
    box-shadow: 0 0 16px rgba(89, 217, 255, 0.62), 0 0 30px rgba(0, 93, 255, 0.26);
  }

  .click-ice-particle {
    position: fixed;
    left: 0;
    top: 0;
    width: 5px;
    height: 5px;
    z-index: 99998;
    pointer-events: none;
    border-radius: 50%;
    background: #59d9ff;
    box-shadow: 0 0 8px rgba(89, 217, 255, 0.9);
    transform: translate3d(-50%, -50%, 0);
    will-change: transform, opacity;
  }

  .click-ice-particle.is-crystal {
    width: 10px;
    height: 10px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .click-ice-particle.is-crystal::before,
  .click-ice-particle.is-crystal::after,
  .click-ice-particle.is-crystal span {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 10px;
    border-radius: 2px;
    background: rgba(222, 248, 255, 0.98);
    box-shadow: 0 0 5px rgba(89, 217, 255, 0.9);
    transform-origin: 50% 50%;
  }

  .click-ice-particle.is-crystal::before {
    transform: translateX(-50%) rotate(60deg);
  }

  .click-ice-particle.is-crystal::after {
    transform: translateX(-50%) rotate(-60deg);
  }

  .click-ice-particle.is-crystal span {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .click-ice-cursor-glow,
  .click-ice-particle {
    display: none !important;
  }
}


/* CHANGES 18 - Shop page updates from Changes 2 PDF. */
.click-shop-hero {
  min-height: 330px;
  background-image: linear-gradient(115deg, #071a34 0%, #0b1f3a 38%, #005dff 72%, #b8eeff 100%) !important;
  background-size: cover;
  background-position: center;
}

.click-shop-hero::before {
  content: none !important;
  display: none !important;
}

.click-shop-hero h1 {
  font-size: clamp(48px, 4.05vw, 68px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.03 !important;
}

.click-shop-hero p {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  line-height: 1.75;
}

.click-shop-feature-card {
  border: 2px solid #0b1f3a;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.click-shop-feature-card h4 {
  margin-bottom: 12px;
}

.click-shop-feature-card p {
  flex: 0 0 auto;
  line-height: 1.75;
  margin-bottom: 18px;
}

.click-shop-feature-card .theme-btn {
  margin-top: 0 !important;
}

.click-shop-page-section .click-shop-toolbar h2 {
  font-size: clamp(32px, 3vw, 42px) !important;
  line-height: 1.18 !important;
  margin-bottom: 10px;
}

.click-shop-page-section .click-shop-toolbar p {
  max-width: 760px;
  line-height: 1.75;
}

.click-shop-category-sidebar {
  border: 2px solid #0b1f3a;
  border-radius: 16px;
  background: #ffffff;
  padding: 24px;
}

.click-shop-category-sidebar h3 {
  margin: 0 0 18px;
  color: var(--click-navy);
  font-size: 22px;
}

.click-shop-category-sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.click-shop-category-sidebar a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid var(--click-line);
  border-radius: 9px;
  color: var(--click-navy);
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.click-shop-category-sidebar a::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.click-shop-category-sidebar a:hover,
.click-shop-category-sidebar a.active {
  background: var(--click-navy);
  border-color: var(--click-navy);
  color: #ffffff;
}

.click-shop-product-card {
  border: 2px solid #0b1f3a;
}

.click-shop-product-card .product-image img {
  width: 82%;
  max-height: 210px;
  object-fit: contain;
}

.click-shop-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 38px;
}

.click-shop-page-number,
.click-shop-page-control {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--click-navy);
  border-radius: 10px;
  background: #ffffff;
  color: var(--click-navy);
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}

.click-shop-page-number:hover,
.click-shop-page-control:hover,
.click-shop-page-number.active {
  background: var(--click-blue);
  border-color: var(--click-blue);
  color: #ffffff;
}

.click-shop-page-control svg {
  width: 20px;
  height: 20px;
}

.click-shop-page-control:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #ffffff;
  border-color: var(--click-line);
  color: var(--click-text);
}

.click-shop-calculator-overlay {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: rgba(11, 31, 58, 0.72);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.click-shop-calculator-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.click-shop-calculator-overlay.open,
.click-shop-calculator-modal.open {
  opacity: 1;
  visibility: visible;
}

.click-shop-calculator-modal.open {
  pointer-events: auto;
}

.click-shop-calculator-panel {
  width: min(980px, 100%);
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  border-radius: 20px;
  background: #f5f7fa;
  padding: 34px;
  box-shadow: 0 28px 80px rgba(11, 31, 58, 0.28);
}

.click-shop-calculator-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.click-shop-calculator-header .section-title h2 {
  margin-top: 8px;
}

.click-shop-calculator-close {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--click-navy);
  color: #ffffff;
}

.click-shop-calculator-close svg {
  width: 22px;
  height: 22px;
}

.click-shop-calculator-form {
  height: auto;
  border: 2px solid var(--click-navy);
}

.click-shop-calculator-result {
  margin-top: 20px;
}

body.click-shop-calculator-open {
  overflow: hidden;
}

@media (max-width: 991px) {
  .click-shop-category-sidebar {
    margin-bottom: 8px;
  }

  .click-shop-calculator-modal {
    padding: 18px;
  }

  .click-shop-calculator-panel {
    max-height: calc(100vh - 36px);
    padding: 24px;
  }
}

@media (max-width: 575px) {
  .click-shop-hero {
    min-height: 280px;
  }

  .click-shop-hero h1 {
    font-size: 44px !important;
  }

  .click-shop-calculator-modal {
    padding: 10px;
  }

  .click-shop-calculator-panel {
    max-height: calc(100vh - 20px);
    padding: 20px;
    border-radius: 16px;
  }

  .click-shop-calculator-header {
    gap: 12px;
  }

  .click-shop-calculator-header .section-title h2 {
    font-size: 28px !important;
  }
}


/* CHANGES 19 - Shop alignment, full-width filters, sample prices and centered logo placeholders. */
.click-shop-filter-full {
  width: 100%;
  margin-bottom: 28px;
}

.click-shop-content-row {
  margin-top: 0;
}

.click-shop-content-row > .col-lg-3,
.click-shop-content-row > .col-lg-9 {
  padding-top: 0;
}

.click-shop-product-card .product-image {
  padding: 0;
}

.click-shop-product-card .product-image a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.click-shop-product-card .product-image img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
}

@media (max-width: 991px) {
  .click-shop-filter-full {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .click-shop-filter-full {
    grid-template-columns: 1fr;
  }
}


/* CHANGES 21 - Shop sidebar categories filter products on the same page. */
.click-shop-category-sidebar button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid var(--click-line);
  border-radius: 9px;
  background: #ffffff;
  color: var(--click-navy);
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.click-shop-category-sidebar button::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  flex: 0 0 8px;
  margin-left: 12px;
}

.click-shop-category-sidebar button:hover,
.click-shop-category-sidebar button.active {
  background: var(--click-navy);
  border-color: var(--click-navy);
  color: #ffffff;
}

.click-shop-category-sidebar button:focus-visible {
  outline: 3px solid rgba(89, 217, 255, 0.55);
  outline-offset: 2px;
}

/* CHANGES 23 - Keep the Shop category filter visible while scrolling products. */
@media (min-width: 992px) {
  .click-shop-content-row > .col-lg-3 {
    align-self: stretch;
  }

  .click-shop-category-sidebar {
    position: sticky;
    top: 92px;
    z-index: 8;
  }
}


/* CHANGES 24 - Contact page layout repair.
   These rules are intentionally scoped to the Contact page so the shared card,
   form and section styles used elsewhere on the site remain untouched. */
.click-contact-section .click-contact-layout {
  align-items: stretch;
}

.click-contact-section .click-contact-details {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.click-contact-section .click-contact-details .click-card {
  height: 100%;
  min-height: 0;
  margin-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.click-contact-section .click-contact-form-wrap {
  display: flex;
}

.click-contact-section .click-contact-form-wrap .click-form-card {
  width: 100%;
  height: 100%;
}

@media (max-width: 991px) {
  .click-contact-section .click-contact-details {
    grid-template-rows: none;
  }

  .click-contact-section .click-contact-details .click-card,
  .click-contact-section .click-contact-form-wrap .click-form-card {
    height: auto;
  }
}


/* CHANGES 25 - in-page Contact Us popup for CTA buttons only. */
.click-contact-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 10010;
  background: rgba(5, 20, 42, 0.72);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.click-contact-popup-overlay.open {
  opacity: 1;
  visibility: visible;
}

.click-contact-popup-modal {
  position: fixed;
  inset: 0;
  z-index: 10011;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.click-contact-popup-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.click-contact-popup-open {
  overflow: hidden;
}

.click-contact-popup-panel {
  position: relative;
  width: min(1060px, 100%);
  max-height: calc(100vh - 56px);
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.45fr);
  overflow-y: auto;
  border: 2px solid #59d9ff;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 30px 90px rgba(4, 20, 42, 0.34);
}

.click-contact-popup-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(11, 31, 58, 0.16);
  border-radius: 50%;
  background: #ffffff;
  color: #0b1f3a;
  box-shadow: 0 8px 22px rgba(11, 31, 58, 0.10);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.click-contact-popup-close:hover {
  background: #0b1f3a;
  color: #ffffff;
  transform: rotate(4deg);
}

.click-contact-popup-close svg {
  width: 21px;
  height: 21px;
}

.click-contact-popup-info {
  padding: 42px 34px;
  background: #0b1f3a;
  color: #ffffff;
}

.click-contact-popup-logo {
  width: min(245px, 100%);
  margin-bottom: 34px;
  padding: 17px 20px;
  border-radius: 18px;
  background: #ffffff;
}

.click-contact-popup-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.click-contact-popup-kicker,
.click-contact-popup-heading > span {
  display: block;
  margin-bottom: 8px;
  color: #59d9ff;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.click-contact-popup-info h3 {
  margin: 0 0 12px;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
}

.click-contact-popup-info > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.80);
  line-height: 1.7;
}

.click-contact-popup-details {
  margin-top: 30px;
  display: grid;
  gap: 16px;
}

.click-contact-popup-detail {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
}

.click-contact-popup-detail-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(89, 217, 255, 0.42);
  border-radius: 13px;
  background: rgba(89, 217, 255, 0.10);
  color: #59d9ff;
}

.click-contact-popup-detail-icon svg {
  width: 21px;
  height: 21px;
}

.click-contact-popup-detail small {
  display: block;
  margin-bottom: 2px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  line-height: 1.35;
}

.click-contact-popup-detail a,
.click-contact-popup-detail strong {
  display: block;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.click-contact-popup-detail a:hover {
  color: #59d9ff;
}

.click-contact-popup-form-wrap {
  padding: 46px 46px 40px;
  background: #ffffff;
}

.click-contact-popup-heading {
  padding-right: 42px;
  margin-bottom: 25px;
}

.click-contact-popup-heading h2 {
  margin: 0;
  color: #0b1f3a;
  font-family: "Poppins", sans-serif;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 600;
  line-height: 1.15;
}

.click-contact-popup-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.click-contact-popup-message {
  grid-column: 1 / -1;
}

.click-contact-popup-form-wrap .click-form-group label {
  display: block;
  margin-bottom: 7px;
  color: #0b1f3a;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.click-contact-popup-form-wrap .click-input,
.click-contact-popup-form-wrap .click-select,
.click-contact-popup-form-wrap .click-textarea {
  width: 100%;
  border: 1px solid #d9e1eb;
  border-radius: 10px;
  background: #f8fafc;
}

.click-contact-popup-form-wrap .click-input,
.click-contact-popup-form-wrap .click-select {
  min-height: 52px;
}

.click-contact-popup-form-wrap .click-textarea {
  min-height: 118px;
  resize: vertical;
}

.click-contact-popup-submit {
  margin-top: 20px;
}

.click-contact-popup-status {
  display: none;
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(0, 93, 255, 0.18);
  border-radius: 10px;
  background: #f5f7fa;
  color: #0b1f3a;
  font-size: 13px;
  line-height: 1.5;
}

.click-contact-popup-status.show {
  display: block;
}

@media (max-width: 991px) {
  .click-contact-popup-modal {
    padding: 20px;
  }

  .click-contact-popup-panel {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 40px);
  }

  .click-contact-popup-info {
    padding: 34px 30px;
  }

  .click-contact-popup-logo {
    width: 210px;
    margin-bottom: 26px;
  }

  .click-contact-popup-form-wrap {
    padding: 34px 30px;
  }
}

@media (max-width: 575px) {
  .click-contact-popup-modal {
    padding: 12px;
    align-items: flex-start;
  }

  .click-contact-popup-panel {
    max-height: calc(100vh - 24px);
    border-radius: 18px;
  }

  .click-contact-popup-close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
  }

  .click-contact-popup-info,
  .click-contact-popup-form-wrap {
    padding: 26px 20px;
  }

  .click-contact-popup-logo {
    width: 185px;
    margin-bottom: 22px;
  }

  .click-contact-popup-info h3 {
    font-size: 25px;
  }

  .click-contact-popup-fields {
    grid-template-columns: 1fr;
  }

  .click-contact-popup-message {
    grid-column: auto;
  }

  .click-contact-popup-heading {
    padding-right: 36px;
  }
}


/* CHANGES 26 - Contact Us page updates from the approved contact changes PDF.
   All overrides are scoped to the Contact Us page components to avoid affecting
   shared cards, forms, heroes or buttons elsewhere on the website. */
.click-contact-hero {
  min-height: 330px;
  background-image: linear-gradient(115deg, #071a34 0%, #0b1f3a 38%, #005dff 72%, #b8eeff 100%) !important;
  background-size: cover;
  background-position: center;
}

.click-contact-hero::before {
  content: none !important;
  display: none !important;
}

.click-contact-hero h1 {
  font-size: clamp(48px, 4.05vw, 68px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.03 !important;
}

.click-contact-hero p {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  line-height: 1.75;
}

.click-contact-hero .click-breadcrumbs {
  justify-content: center;
}

.click-contact-section .click-contact-details .click-card {
  border: 2px solid #0b1f3a;
}

.click-contact-section .click-contact-details .click-card-heading {
  margin-bottom: 14px;
}

.click-contact-section .click-contact-details .click-card-heading .feature-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 0;
}

.click-contact-section .click-contact-details .click-card-heading h4 {
  margin: 0;
  font-size: 18px;
  line-height: 1.28;
}

.click-contact-section .click-contact-form-wrap .click-form-card {
  border: 2px solid #0b1f3a;
}

.click-contact-section .click-contact-form-wrap .click-input,
.click-contact-section .click-contact-form-wrap .click-select,
.click-contact-section .click-contact-form-wrap .click-textarea {
  border: 1px solid var(--click-line);
}

.click-contact-section .click-contact-form-wrap .click-input:focus,
.click-contact-section .click-contact-form-wrap .click-select:focus,
.click-contact-section .click-contact-form-wrap .click-textarea:focus {
  border-color: #005dff;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 93, 255, 0.10);
}

.click-contact-section .click-contact-form-wrap .click-required {
  color: #005dff;
  font-weight: 700;
  margin-left: 3px;
}

/* CHANGES 28 - FAQ page visual refinement.
   All rules are scoped to the FAQ page so shared website components remain unchanged. */
.click-faq-page .click-faq-hero {
  min-height: 330px;
  background-image: linear-gradient(115deg, #071a34 0%, #0b1f3a 38%, #005dff 72%, #b8eeff 100%) !important;
  background-size: cover;
  background-position: center;
}

.click-faq-page .click-faq-hero::before {
  content: none !important;
  display: none !important;
}

.click-faq-page .click-faq-hero h1 {
  font-size: clamp(48px, 4.05vw, 68px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.03 !important;
}

.click-faq-page .click-faq-hero p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  line-height: 1.75;
}

.click-faq-page .click-faq-hero .click-breadcrumbs {
  justify-content: center;
}

.click-faq-page .click-faq-section {
  background: #f5f7fa;
}

.click-faq-page .click-faq-shell {
  padding: 34px;
  border: 2px solid #0b1f3a;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(11, 31, 58, 0.08);
}

.click-faq-page .click-accordion-item {
  margin-bottom: 16px;
  border: 1px solid #d9e1eb;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(11, 31, 58, 0.045);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.click-faq-page .click-accordion-item:last-child {
  margin-bottom: 0;
}

.click-faq-page .click-accordion-item:hover {
  border-color: rgba(0, 93, 255, 0.45);
  box-shadow: 0 12px 30px rgba(11, 31, 58, 0.075);
  transform: translateY(-1px);
}

.click-faq-page .click-accordion-item.open {
  border-color: #005dff;
  box-shadow: 0 14px 34px rgba(0, 93, 255, 0.10);
}

.click-faq-page .click-accordion-button {
  min-height: 72px;
  padding: 20px 22px;
  align-items: center;
  border-radius: 14px;
  color: #0b1f3a;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  transition: background 0.2s ease, color 0.2s ease;
}

.click-faq-page .click-accordion-item.open .click-accordion-button {
  background: rgba(89, 217, 255, 0.10);
}

.click-faq-page .click-accordion-button > span:last-child {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  border: 1px solid rgba(0, 93, 255, 0.24);
  border-radius: 50%;
  background: #f5f7fa;
  color: #005dff;
  font-size: 23px;
  font-weight: 400;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.click-faq-page .click-accordion-item.open .click-accordion-button > span:last-child {
  background: #005dff;
  color: #ffffff;
  transform: rotate(45deg);
}

.click-faq-page .click-accordion-content {
  padding: 0 76px 24px 22px;
}

.click-faq-page .click-accordion-content p {
  margin: 0;
  color: var(--click-text);
  font-size: 15px;
  line-height: 1.8;
}

.click-faq-page .click-faq-cta-section {
  background: #f5f7fa;
}

@media (max-width: 767px) {
  .click-faq-page .click-faq-shell {
    padding: 18px;
    border-radius: 18px;
  }

  .click-faq-page .click-accordion-button {
    min-height: 64px;
    padding: 17px 16px;
    font-size: 15px;
    gap: 14px;
  }

  .click-faq-page .click-accordion-button > span:last-child {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 21px;
  }

  .click-faq-page .click-accordion-content {
    padding: 0 16px 20px;
  }
}

/* CHANGES 29 - FAQ hero correction + two-column FAQ layout.
   Scoped to the FAQ page only to avoid affecting shared site components. */
.click-faq-page .click-faq-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 330px;
  text-align: center;
  background: linear-gradient(115deg, #071a34 0%, #0b1f3a 38%, #005dff 72%, #b8eeff 100%) !important;
}

.click-faq-page .click-faq-hero > .container {
  transform: none !important;
}

.click-faq-page .click-faq-hero .row {
  width: 100%;
  justify-content: center;
}

.click-faq-page .click-faq-hero h1,
.click-faq-page .click-faq-hero p,
.click-faq-page .click-faq-hero .click-breadcrumbs {
  text-align: center;
}

.click-faq-page .click-faq-hero .click-breadcrumbs {
  justify-content: center;
}

.click-faq-page .click-faq-shell {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.click-faq-page .click-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.click-faq-page .click-faq-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.click-faq-page .click-accordion-item,
.click-faq-page .click-accordion-item:last-child {
  margin-bottom: 0;
  border: 2px solid #0b1f3a;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

.click-faq-page .click-accordion-item:hover {
  border-color: #005dff;
}

.click-faq-page .click-accordion-item.open {
  border-color: #005dff;
}

@media (max-width: 991px) {
  .click-faq-page .click-faq-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* CHANGES 31 - Find an Installer page refinements.
   Scoped to this page only so shared frontend and backend styling is unaffected. */
.click-installer-page .click-installer-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 330px;
  text-align: center;
  background: linear-gradient(115deg, #071a34 0%, #0b1f3a 38%, #005dff 72%, #b8eeff 100%) !important;
  background-image: none !important;
}

.click-installer-page .click-installer-hero::before {
  content: none !important;
  display: none !important;
}

.click-installer-page .click-installer-hero > .container {
  transform: none !important;
}

.click-installer-page .click-installer-hero .row {
  width: 100%;
  justify-content: center;
}

.click-installer-page .click-installer-hero .col-lg-9 {
  margin-left: auto;
  margin-right: auto;
}

.click-installer-page .click-installer-hero h1 {
  font-size: clamp(48px, 4.05vw, 68px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.03 !important;
  text-align: center;
}

.click-installer-page .click-installer-hero p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  line-height: 1.75;
  text-align: center;
}

.click-installer-page .click-installer-hero .click-breadcrumbs {
  justify-content: center;
  text-align: center;
}

.click-installer-page .click-installer-search-card,
.click-installer-page .click-installer-match-card,
.click-installer-page .click-installer-card {
  border: 2px solid #0b1f3a;
}

.click-installer-page .click-installer-match-card p {
  margin-bottom: 28px;
}

@media (max-width: 767px) {
  .click-installer-page .click-installer-hero {
    min-height: 300px;
  }

  .click-installer-page .click-installer-hero h1 {
    font-size: clamp(40px, 10vw, 52px) !important;
  }
}

/* CHANGES 32 - Find an Installer hero visibility fix.
   Page-scoped to prevent any impact on other website or admin pages. */
.click-installer-page .click-installer-hero {
  position: relative !important;
  isolation: isolate !important;
  min-height: 330px !important;
  padding: 70px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background-color: #0b1f3a !important;
  background-image: linear-gradient(115deg, #071a34 0%, #0b1f3a 38%, #005dff 72%, #b8eeff 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  text-align: center !important;
}

.click-installer-page .click-installer-hero::before {
  display: none !important;
  content: none !important;
}

.click-installer-page .click-installer-hero > .container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  transform: none !important;
}

.click-installer-page .click-installer-hero .row {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: center !important;
}

.click-installer-page .click-installer-hero .col-lg-9 {
  margin-left: auto !important;
  margin-right: auto !important;
}

.click-installer-page .click-installer-hero h1,
.click-installer-page .click-installer-hero p,
.click-installer-page .click-installer-hero .click-breadcrumbs,
.click-installer-page .click-installer-hero .click-breadcrumbs a,
.click-installer-page .click-installer-hero .click-breadcrumbs span {
  position: relative !important;
  z-index: 3 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.click-installer-page .click-installer-hero h1 {
  margin-bottom: 14px !important;
}

.click-installer-page .click-installer-hero p {
  margin-bottom: 14px !important;
}

@media (max-width: 767px) {
  .click-installer-page .click-installer-hero {
    min-height: 300px !important;
    padding: 56px 0 !important;
  }
}


/* CHANGES 33 - Size Calculator page refinements.
   Scoped to the Size Calculator page so shared frontend/admin styling is unaffected. */
.click-size-calculator-page .click-size-calculator-hero {
  position: relative !important;
  isolation: isolate !important;
  min-height: 330px !important;
  padding: 70px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background-color: #0b1f3a !important;
  background-image: linear-gradient(115deg, #071a34 0%, #0b1f3a 38%, #005dff 72%, #b8eeff 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  text-align: center !important;
}

.click-size-calculator-page .click-size-calculator-hero::before {
  display: none !important;
  content: none !important;
}

.click-size-calculator-page .click-size-calculator-hero > .container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  transform: none !important;
}

.click-size-calculator-page .click-size-calculator-hero .row {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: center !important;
}

.click-size-calculator-page .click-size-calculator-hero .col-lg-9 {
  margin-left: auto !important;
  margin-right: auto !important;
}

.click-size-calculator-page .click-size-calculator-hero h1,
.click-size-calculator-page .click-size-calculator-hero p,
.click-size-calculator-page .click-size-calculator-hero .click-breadcrumbs,
.click-size-calculator-page .click-size-calculator-hero .click-breadcrumbs a,
.click-size-calculator-page .click-size-calculator-hero .click-breadcrumbs span {
  position: relative !important;
  z-index: 3 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-align: center !important;
}

.click-size-calculator-page .click-size-calculator-hero h1 {
  margin-bottom: 14px !important;
  font-size: clamp(48px, 4.05vw, 68px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.03 !important;
}

.click-size-calculator-page .click-size-calculator-hero p {
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 14px !important;
  font-size: 18px;
  line-height: 1.75;
}

.click-size-calculator-page .click-size-calculator-hero .click-breadcrumbs {
  justify-content: center !important;
}

.click-size-calculator-page #size-calculator-form {
  border: 2px solid #0b1f3a;
}

.click-size-calculator-page #size-calculator-form .theme-btn {
  font-family: "Poppins", Arial, sans-serif !important;
  font-weight: 600;
}

.click-size-calculator-page #size-calculator-form {
  font-family: "Poppins", Arial, sans-serif !important;
}

.click-size-calculator-page #size-calculator-form > .section-title h2 {
  font-family: "Poppins", Arial, sans-serif !important;
}

.click-size-calculator-page #size-calculator-form .click-form-group label,
.click-size-calculator-page #size-calculator-form .click-input,
.click-size-calculator-page #size-calculator-form .click-select,
.click-size-calculator-page #size-calculator-form .click-warning-note {
  font-family: "Poppins", Arial, sans-serif !important;
}

.click-size-calculator-page #size-calculator-form
  .click-warning-note
  + .theme-btn {
  font-family: "Poppins", Arial, sans-serif !important;
}

.click-size-calculator-page .section-padding > .container > .row.g-5 > .col-lg-4 .click-card {
  height: auto;
  border: 2px solid #0b1f3a;
}

.click-size-calculator-page .section-padding > .container > .row.g-5 > .col-lg-4 .click-card h4 {
  margin-bottom: 18px;
}

.click-size-calculator-page .section-padding > .container > .row.g-5 > .col-lg-4 .click-card p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .click-size-calculator-page .click-size-calculator-hero {
    min-height: 300px !important;
    padding: 56px 0 !important;
  }

  .click-size-calculator-page .click-size-calculator-hero h1 {
    font-size: clamp(40px, 10vw, 52px) !important;
  }
}


/* CHANGES 34 - Buying Guides page refinements.
   Scoped to the Buying Guides page so shared frontend/admin styling is unaffected. */
.click-buying-guides-page .click-buying-guides-hero {
  position: relative !important;
  isolation: isolate !important;
  min-height: 330px !important;
  padding: 70px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background-color: #0b1f3a !important;
  background-image: linear-gradient(115deg, #071a34 0%, #0b1f3a 38%, #005dff 72%, #b8eeff 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  text-align: center !important;
}

.click-buying-guides-page .click-buying-guides-hero::before {
  display: none !important;
  content: none !important;
}

.click-buying-guides-page .click-buying-guides-hero > .container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  transform: none !important;
}

.click-buying-guides-page .click-buying-guides-hero .row {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: center !important;
}

.click-buying-guides-page .click-buying-guides-hero .col-lg-9 {
  margin-left: auto !important;
  margin-right: auto !important;
}

.click-buying-guides-page .click-buying-guides-hero h1,
.click-buying-guides-page .click-buying-guides-hero p,
.click-buying-guides-page .click-buying-guides-hero .click-breadcrumbs,
.click-buying-guides-page .click-buying-guides-hero .click-breadcrumbs a,
.click-buying-guides-page .click-buying-guides-hero .click-breadcrumbs span {
  position: relative !important;
  z-index: 3 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-align: center !important;
}

.click-buying-guides-page .click-buying-guides-hero h1 {
  margin-bottom: 14px !important;
  font-size: clamp(48px, 4.05vw, 68px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.03 !important;
}

.click-buying-guides-page .click-buying-guides-hero p {
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 14px !important;
  font-size: 18px;
  line-height: 1.75;
}

.click-buying-guides-page .click-buying-guides-hero .click-breadcrumbs {
  justify-content: center !important;
}

.click-buying-guides-page .click-guide-card {
  border: 2px solid #0b1f3a;
  font-family: "Poppins", Arial, sans-serif;
}

.click-buying-guides-page .click-guide-card .click-guide-image {
  height: 235px;
  background: #f5f7fa;
  border-radius: 14px;
}

.click-buying-guides-page .click-guide-card .click-guide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.click-buying-guides-page .click-guide-card h4 {
  font-family: "Poppins", Arial, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
}

.click-buying-guides-page .click-guide-card p {
  font-family: "Poppins", Arial, sans-serif !important;
  line-height: 1.7;
}

.click-buying-guides-page .click-guide-card > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 8px;
  padding: 12px 20px;
  border: 2px solid #005dff;
  border-radius: 10px;
  background: #005dff;
  color: #ffffff !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.click-buying-guides-page .click-guide-card > a:hover {
  background: #0b1f3a;
  border-color: #0b1f3a;
  color: #ffffff !important;
}

@media (max-width: 767px) {
  .click-buying-guides-page .click-buying-guides-hero {
    min-height: 300px !important;
    padding: 56px 0 !important;
  }

  .click-buying-guides-page .click-buying-guides-hero h1 {
    font-size: clamp(40px, 10vw, 52px) !important;
  }

  .click-buying-guides-page .click-guide-card .click-guide-image {
    height: 220px;
  }
}


/* CHANGES 35 - Cart page refinements.
   Scoped to the Cart page so shared frontend/admin styling is unaffected. */
.click-cart-page .click-cart-hero {
  position: relative !important;
  isolation: isolate !important;
  min-height: 330px !important;
  padding: 70px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background-color: #0b1f3a !important;
  background-image: linear-gradient(115deg, #071a34 0%, #0b1f3a 38%, #005dff 72%, #b8eeff 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  text-align: center !important;
}

.click-cart-page .click-cart-hero::before {
  display: none !important;
  content: none !important;
}

.click-cart-page .click-cart-hero > .container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  transform: none !important;
}

.click-cart-page .click-cart-hero .row {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: center !important;
}

.click-cart-page .click-cart-hero .col-lg-9 {
  margin-left: auto !important;
  margin-right: auto !important;
}

.click-cart-page .click-cart-hero h1,
.click-cart-page .click-cart-hero p,
.click-cart-page .click-cart-hero .click-breadcrumbs,
.click-cart-page .click-cart-hero .click-breadcrumbs a,
.click-cart-page .click-cart-hero .click-breadcrumbs span {
  position: relative !important;
  z-index: 3 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-align: center !important;
}

.click-cart-page .click-cart-hero h1 {
  margin-bottom: 14px !important;
  font-size: clamp(48px, 4.05vw, 68px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.03 !important;
}

.click-cart-page .click-cart-hero p {
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 14px !important;
  font-size: 18px;
  line-height: 1.75;
}

.click-cart-page .click-cart-hero .click-breadcrumbs {
  justify-content: center !important;
}

.click-cart-page [data-cart-render] {
  height: auto;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  font-family: "Poppins", Arial, sans-serif;
}

.click-cart-page .section-padding {
  padding-top: 90px !important;
  padding-bottom: 90px !important;
}

.click-cart-page .click-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(320px, 0.75fr);
  gap: 38px;
  align-items: start;
}

.click-cart-page .click-cart-table-card,
.click-cart-page .click-cart-summary {
  background: #ffffff;
  border: 1.5px solid rgba(11, 31, 58, 0.18);
}

.click-cart-page .click-cart-table-wrap {
  overflow-x: auto;
}

.click-cart-page .click-cart-table {
  width: 100%;
  border-collapse: collapse;
}

.click-cart-page .click-cart-table thead th {
  padding: 22px 18px;
  border-bottom: 1px solid rgba(11, 31, 58, 0.18);
  color: #c87300;
  font-size: 14px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  white-space: nowrap;
}

.click-cart-page .click-cart-table tbody td {
  padding: 24px 18px;
  border-bottom: 1px solid rgba(11, 31, 58, 0.12);
  vertical-align: middle;
  color: #23324a;
  font-size: 18px;
  line-height: 1.5;
}

.click-cart-page .click-cart-table tbody tr:last-child td {
  border-bottom: 0;
}

.click-cart-page .click-cart-table th:first-child,
.click-cart-page .click-cart-table td:first-child {
  width: 48%;
}

.click-cart-page .click-cart-table th:nth-child(2),
.click-cart-page .click-cart-table td:nth-child(2),
.click-cart-page .click-cart-table th:nth-child(3),
.click-cart-page .click-cart-table td:nth-child(3),
.click-cart-page .click-cart-table th:nth-child(4),
.click-cart-page .click-cart-table td:nth-child(4) {
  width: 10%;
}

.click-cart-page .click-cart-table th:last-child,
.click-cart-page .click-cart-table td:last-child {
  width: 22%;
  text-align: right;
}

.click-cart-page .cart-product-title {
  color: #0b1f3a;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 700;
  margin-bottom: 6px;
}

.click-cart-page .cart-product-meta {
  color: #5f6f86;
  font-size: 14px;
  line-height: 1.5;
}

.click-cart-page .click-cart-table .cart-price-cell,
.click-cart-page .click-cart-table .cart-total-cell {
  color: #0b1f3a;
  font-weight: 500;
  white-space: nowrap;
}

.click-cart-page .click-cart-table .cart-qty-cell {
  min-width: 100px;
}

.click-cart-page [data-cart-render] .cart-qty {
  border: 1.5px solid rgba(11, 31, 58, 0.18) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #0b1f3a !important;
  -webkit-text-fill-color: #0b1f3a !important;
  background: #ffffff !important;
  min-height: 60px;
  width: 88px;
  padding: 12px 10px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}

.click-cart-page .cart-action-cell .click-small-btn {
  min-width: 180px;
  min-height: 62px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 15px;
  font-weight: 700;
  border-radius: 0 !important;
  border: 1.5px solid #0b1f3a !important;
  color: #0b1f3a !important;
  background: #ffffff !important;
}

.click-cart-page .cart-action-cell .click-small-btn:hover {
  background: #0b1f3a !important;
  color: #ffffff !important;
}

.click-cart-page .click-cart-summary {
  padding: 34px 32px;
}

.click-cart-page .click-cart-summary h3 {
  color: #0b1f3a;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.1;
  font-weight: 700;
  margin-bottom: 28px;
}

.click-cart-page .click-cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid rgba(11, 31, 58, 0.14);
  color: #23324a;
  font-size: 16px;
  line-height: 1.5;
}

.click-cart-page .click-cart-summary-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.click-cart-page .click-cart-summary-row.total {
  margin-top: 2px;
  padding-top: 18px;
}

.click-cart-page .click-cart-summary-row span:first-child,
.click-cart-page .click-cart-summary-row strong {
  color: #0b1f3a;
}

.click-cart-page .click-cart-summary-row strong {
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

.click-cart-page .click-cart-summary-row.total span,
.click-cart-page .click-cart-summary-row.total strong {
  font-size: 20px;
  font-weight: 700;
}

.click-cart-page .click-cart-checkout-btn {
  width: 100%;
  margin-top: 28px;
  min-height: 64px;
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 16px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (max-width: 1199px) {
  .click-cart-page .click-cart-layout {
    grid-template-columns: 1fr;
  }

  .click-cart-page .click-cart-summary {
    max-width: 520px;
  }
}

@media (max-width: 767px) {
  .click-cart-page .section-padding {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .click-cart-page .click-cart-table thead {
    display: none;
  }

  .click-cart-page .click-cart-table,
  .click-cart-page .click-cart-table tbody,
  .click-cart-page .click-cart-table tr,
  .click-cart-page .click-cart-table td {
    display: block;
    width: 100% !important;
  }

  .click-cart-page .click-cart-table tbody tr {
    padding: 20px 18px;
    border-bottom: 1px solid rgba(11, 31, 58, 0.12);
  }

  .click-cart-page .click-cart-table tbody td {
    padding: 10px 0;
    border-bottom: 0;
    text-align: left !important;
  }

  .click-cart-page .click-cart-table tbody td::before {
    display: block;
    margin-bottom: 4px;
    color: #c87300;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .click-cart-page .click-cart-table tbody td.cart-product-cell::before { content: "Product"; }
  .click-cart-page .click-cart-table tbody td.cart-price-cell::before { content: "Price"; }
  .click-cart-page .click-cart-table tbody td.cart-qty-cell::before { content: "Qty"; }
  .click-cart-page .click-cart-table tbody td.cart-total-cell::before { content: "Total"; }

  .click-cart-page .click-cart-table tbody td.cart-action-cell {
    padding-top: 16px;
  }

  .click-cart-page .cart-action-cell .click-small-btn,
  .click-cart-page .click-cart-checkout-btn {
    width: 100%;
  }

  .click-cart-page .click-cart-summary {
    padding: 28px 22px;
  }
}

.click-cart-page [data-cart-render] h1,
.click-cart-page [data-cart-render] h2,
.click-cart-page [data-cart-render] h3,
.click-cart-page [data-cart-render] h4,
.click-cart-page [data-cart-render] h5,
.click-cart-page [data-cart-render] h6,
.click-cart-page [data-cart-render] strong,
.click-cart-page [data-cart-render] th,
.click-cart-page [data-cart-render] .theme-btn,
.click-cart-page [data-cart-render] .click-small-btn {
  font-family: "Poppins", Arial, sans-serif !important;
}

.click-cart-page [data-cart-render] .theme-btn {
  font-weight: 600;
}

@media (max-width: 767px) {
  .click-cart-page .click-cart-hero {
    min-height: 300px !important;
    padding: 56px 0 !important;
  }

  .click-cart-page .click-cart-hero h1 {
    font-size: clamp(40px, 10vw, 52px) !important;
  }
}

/* CHANGES 36 - Checkout page refinements. */
.click-checkout-page .click-checkout-hero {
  position: relative !important;
  isolation: isolate !important;
  min-height: 330px !important;
  padding: 70px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background-color: #0b1f3a !important;
  background-image: linear-gradient(115deg, #071a34 0%, #0b1f3a 38%, #005dff 72%, #b8eeff 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  text-align: center !important;
}

.click-checkout-page .click-checkout-hero::before {
  display: none !important;
  content: none !important;
}

.click-checkout-page .click-checkout-hero > .container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  transform: none !important;
}

.click-checkout-page .click-checkout-hero .row {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: center !important;
}

.click-checkout-page .click-checkout-hero .col-lg-9 {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.click-checkout-page .click-checkout-hero h1 {
  color: #ffffff !important;
  font-family: "Poppins", sans-serif !important;
  font-size: clamp(42px, 4vw, 60px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
  margin: 0 0 16px !important;
  text-align: center !important;
}

.click-checkout-page .click-checkout-hero p {
  max-width: 760px !important;
  margin: 0 auto 12px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
  text-align: center !important;
}

.click-checkout-page .click-checkout-hero .breadcrumb,
.click-checkout-page .click-checkout-hero .click-breadcrumb {
  justify-content: center !important;
  text-align: center !important;
}

.click-checkout-page .click-checkout-hero .breadcrumb a,
.click-checkout-page .click-checkout-hero .breadcrumb-item,
.click-checkout-page .click-checkout-hero .breadcrumb-item.active,
.click-checkout-page .click-checkout-hero .click-breadcrumb,
.click-checkout-page .click-checkout-hero .click-breadcrumb a {
  color: #ffffff !important;
}

.click-checkout-page #checkout-form,
.click-checkout-page .click-checkout-summary {
  height: auto !important;
  border: 2px solid #0b1f3a !important;
  font-family: "Poppins", sans-serif !important;
}

.click-checkout-page #checkout-form h2,
.click-checkout-page #checkout-form h3,
.click-checkout-page .click-checkout-summary h3 {
  font-family: "Poppins", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

.click-checkout-page #checkout-form label,
.click-checkout-page #checkout-form input,
.click-checkout-page #checkout-form select,
.click-checkout-page #checkout-form textarea,
.click-checkout-page .click-checkout-summary,
.click-checkout-page .click-checkout-summary p,
.click-checkout-page .click-checkout-summary span,
.click-checkout-page .click-checkout-summary small {
  font-family: "Poppins", sans-serif !important;
}

.click-checkout-page #checkout-form .theme-btn {
  font-family: "Poppins", sans-serif !important;
  font-weight: 600 !important;
}

.click-checkout-page .col-lg-5 {
  align-self: flex-start !important;
}

.click-checkout-page .click-checkout-summary {
  align-self: flex-start !important;
  min-height: 0 !important;
}

@media (max-width: 767px) {
  .click-checkout-page .click-checkout-hero {
    min-height: 280px !important;
    padding: 56px 0 !important;
  }

  .click-checkout-page .click-checkout-hero h1 {
    font-size: clamp(36px, 10vw, 48px) !important;
  }

  .click-checkout-page .click-checkout-hero p {
    font-size: 16px !important;
  }
}



/* CHANGES 37 - Buying Guides card content alignment. */
.click-buying-guides-page .click-guide-card {
  display: flex;
  flex-direction: column;
}

.click-buying-guides-page .click-guide-card h4 {
  min-height: 84px;
  display: flex;
  align-items: flex-start;
}

.click-buying-guides-page .click-guide-card p {
  min-height: 92px;
  margin-bottom: 18px;
}

.click-buying-guides-page .click-guide-card > a {
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 767px) {
  .click-buying-guides-page .click-guide-card h4,
  .click-buying-guides-page .click-guide-card p {
    min-height: 0;
  }
}

/* CHANGES 38 - Checkout hero, Home Shop Aircons hover, and Home post-hero spacing. */
.click-checkout-page .click-checkout-hero {
  position: relative !important;
  isolation: isolate !important;
  min-height: 330px !important;
  padding: 70px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background-color: #0b1f3a !important;
  background-image: linear-gradient(115deg, #071a34 0%, #0b1f3a 38%, #005dff 72%, #b8eeff 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  text-align: center !important;
}

.click-checkout-page .click-checkout-hero::before {
  display: none !important;
  content: none !important;
}

.click-checkout-page .click-checkout-hero > .container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  transform: none !important;
}

.click-checkout-page .click-checkout-hero .row {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: center !important;
}

.click-checkout-page .click-checkout-hero .col-lg-9 {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.click-checkout-page .click-checkout-hero h1,
.click-checkout-page .click-checkout-hero p,
.click-checkout-page .click-checkout-hero .click-breadcrumbs,
.click-checkout-page .click-checkout-hero .click-breadcrumbs a,
.click-checkout-page .click-checkout-hero .click-breadcrumbs span {
  position: relative !important;
  z-index: 3 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-align: center !important;
}

.click-checkout-page .click-checkout-hero h1 {
  margin: 0 0 14px !important;
  font-family: "Poppins", sans-serif !important;
  font-size: clamp(48px, 4.05vw, 68px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.03 !important;
}

.click-checkout-page .click-checkout-hero p {
  max-width: 760px !important;
  margin: 0 auto 14px !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
}

.click-checkout-page .click-checkout-hero .click-breadcrumbs {
  justify-content: center !important;
}

/* Keep the Shop Aircons hover clean and prevent the template overlay animation from covering it. */
.click-home-hero .click-hero-secondary-btn::before,
.click-home-hero .click-hero-secondary-btn::after {
  display: none !important;
  content: none !important;
}

.click-home-hero .click-hero-secondary-btn,
.click-home-hero .click-hero-secondary-btn span,
.click-home-hero .click-hero-secondary-btn svg {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}

.click-home-hero .click-hero-secondary-btn:hover,
.click-home-hero .click-hero-secondary-btn:focus-visible {
  background: #ffffff !important;
  border-color: #59d9ff !important;
  color: #0b1f3a !important;
  box-shadow: 0 12px 30px rgba(0, 93, 255, 0.18) !important;
}

.click-home-hero .click-hero-secondary-btn:hover span,
.click-home-hero .click-hero-secondary-btn:hover svg,
.click-home-hero .click-hero-secondary-btn:focus-visible span,
.click-home-hero .click-hero-secondary-btn:focus-visible svg {
  color: #0b1f3a !important;
  stroke: currentColor !important;
}

/* Add a little more breathing room between the Home hero and the section below it. */
.click-home-features {
  margin-top: 34px;
}

@media (max-width: 767px) {
  .click-checkout-page .click-checkout-hero {
    min-height: 280px !important;
    padding: 56px 0 !important;
  }

  .click-checkout-page .click-checkout-hero h1 {
    font-size: clamp(36px, 10vw, 48px) !important;
  }

  .click-checkout-page .click-checkout-hero p {
    font-size: 16px !important;
  }

  .click-home-features {
    margin-top: 20px;
  }
}


/* CHANGES 39 - relevant section imagery only. */
.click-home-about .about-images .image-1 img,
.click-home-about .about-images .image-2 img {
  object-fit: cover !important;
}

.click-category-photo,
.click-section-photo {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.click-category-photo {
  height: 190px;
  margin-bottom: 20px;
}

.click-section-photo {
  height: 210px;
  margin-bottom: 22px;
}

.click-installer-image.click-installer-photo {
  height: 235px;
  min-height: 235px;
  padding: 0;
  overflow: hidden;
}

.click-installer-image.click-installer-photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

.click-installer-image.click-installer-profile-photo {
  height: 430px;
  min-height: 430px;
  padding: 0;
  overflow: hidden;
}

.click-installer-image.click-installer-profile-photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

@media (max-width: 767px) {
  .click-category-photo,
  .click-section-photo {
    height: 190px;
  }

  .click-installer-image.click-installer-photo {
    height: 220px;
    min-height: 220px;
  }

  .click-installer-image.click-installer-profile-photo {
    height: 320px;
    min-height: 320px;
  }
}

/* CHANGES 40 - Home hero Shop Aircons hover animation in Click-Aircon icy blue. */
.click-home-hero .click-hero-secondary-btn::before,
.click-home-hero .click-hero-secondary-btn::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  width: 50% !important;
  height: 0 !important;
  background: #59d9ff !important;
  transition: width 0.4s ease, height 0.4s ease !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.click-home-hero .click-hero-secondary-btn::before {
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
}

.click-home-hero .click-hero-secondary-btn::after {
  bottom: 0 !important;
  left: 0 !important;
  top: auto !important;
  right: auto !important;
}

.click-home-hero .click-hero-secondary-btn:hover::before,
.click-home-hero .click-hero-secondary-btn:hover::after,
.click-home-hero .click-hero-secondary-btn:focus-visible::before,
.click-home-hero .click-hero-secondary-btn:focus-visible::after {
  width: 100% !important;
  height: 100% !important;
}

.click-home-hero .click-hero-secondary-btn > span,
.click-home-hero .click-hero-secondary-btn > svg {
  position: relative !important;
  z-index: 1 !important;
}

.click-home-hero .click-hero-secondary-btn:hover,
.click-home-hero .click-hero-secondary-btn:focus-visible {
  background: rgba(5, 31, 70, 0.82) !important;
  border-color: #59d9ff !important;
  color: #0b1f3a !important;
  box-shadow: 0 12px 30px rgba(89, 217, 255, 0.28) !important;
}


/* CHANGES 41 - Home Mission, Vision & Promise section. */
.click-home-purpose-section {
  background: #ffffff;
}

.click-home-purpose-section .section-title {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.click-home-purpose-section .row > [class*="col-"] {
  display: flex;
}

.click-home-purpose-card {
  width: 100%;
  height: 100%;
  border: 2px solid var(--click-navy);
  display: flex;
  flex-direction: column;
}

.click-home-purpose-card .click-card-heading {
  min-height: 58px;
  margin-bottom: 18px;
}

.click-home-purpose-card .click-card-heading .feature-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
}

.click-home-purpose-card .click-card-heading .feature-icon svg {
  width: 25px;
  height: 25px;
}

.click-home-purpose-card .click-card-heading h4 {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.click-home-purpose-card p {
  margin: 0;
  line-height: 1.75;
}

@media (max-width: 991px) {
  .click-home-purpose-section .row > [class*="col-"] {
    display: block;
  }

  .click-home-purpose-card {
    height: 100%;
  }
}

/* CHANGES 42 - WEBSITE CHANGES document. Only requested page/section refinements. */

/* Home page - About imagery: keep both photos fully visible within the existing template composition. */
.click-home-about .about-images .image-1,
.click-home-about .about-images .image-2 {
  background: #ffffff;
}

.click-home-about .about-images .image-1 img,
.click-home-about .about-images .image-2 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Home page - Shop placeholder logo: full and centred rather than left-aligned. */
.click-home-products .home-product-card .product-image > a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.click-home-products .home-product-card .product-image img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto !important;
}

/* Home page - Installer Network image: retain the image but reduce its visual size in the section. */
.click-home-installer-section .col-lg-6:not(.click-info-copy) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.click-home-installer-section .col-lg-6:not(.click-info-copy) > img {
  width: 84% !important;
  max-width: 520px;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

/* Home page - Buying Guides buttons requested in blue. */
.click-home-guides .click-guide-btn,
.click-home-guides .click-guide-btn.outline {
  background: var(--click-blue) !important;
  border: 2px solid var(--click-blue) !important;
  color: #ffffff !important;
}

.click-home-guides .click-guide-btn:hover,
.click-home-guides .click-guide-btn:focus-visible {
  background: var(--click-navy) !important;
  border-color: var(--click-navy) !important;
  color: #ffffff !important;
}

/* Requested form-field visibility: entered values must display clearly in black. */
.click-size-calculator-page #size-calculator-form .click-input,
.click-size-calculator-page #size-calculator-form .click-select,
.click-size-calculator-page #size-calculator-form .click-textarea,
.click-installer-page #installer-search-form .click-input,
.click-installer-page #installer-search-form .click-select,
.click-installer-page #installer-search-form .click-textarea,
.click-request-installation-page .click-form-card .click-input,
.click-request-installation-page .click-form-card .click-select,
.click-request-installation-page .click-form-card .click-textarea,
.click-contact-page .click-contact-form-wrap .click-input,
.click-contact-page .click-contact-form-wrap .click-select,
.click-contact-page .click-contact-form-wrap .click-textarea {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  opacity: 1 !important;
}

.click-size-calculator-page #size-calculator-form .click-select option,
.click-installer-page #installer-search-form .click-select option,
.click-request-installation-page .click-form-card .click-select option,
.click-contact-page .click-contact-form-wrap .click-select option {
  color: #000000 !important;
  background: #ffffff !important;
}

/* Request Installation / Quote - requested borders and right-block spacing. */
.click-request-installation-page .section-padding > .container > .row > .col-lg-8 > .click-form-card,
.click-request-installation-page .section-padding > .container > .row > .col-lg-4 > .click-card {
  border: 2px solid #0b1f3a !important;
}

.click-request-installation-page .section-padding > .container > .row > .col-lg-4 > .click-card > p {
  margin-bottom: 24px !important;
}

.click-request-installation-page .section-padding > .container > .row > .col-lg-4 > .click-card .click-warning-note {
  margin-top: 0 !important;
}

/* About Us - centre hero, match the established icy/navy hero and requested section spacing/borders. */
.click-about-page .click-about-hero,
.click-legal-page .click-legal-hero {
  position: relative !important;
  isolation: isolate !important;
  min-height: 330px !important;
  padding: 70px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background-color: #0b1f3a !important;
  background-image: linear-gradient(115deg, #071a34 0%, #0b1f3a 38%, #005dff 72%, #b8eeff 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  text-align: center !important;
}

.click-about-page .click-about-hero::before,
.click-legal-page .click-legal-hero::before {
  display: none !important;
  content: none !important;
}

.click-about-page .click-about-hero > .container,
.click-legal-page .click-legal-hero > .container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  transform: none !important;
}

.click-about-page .click-about-hero .row,
.click-legal-page .click-legal-hero .row {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: center !important;
}

.click-about-page .click-about-hero .col-lg-9,
.click-legal-page .click-legal-hero .col-lg-9 {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.click-about-page .click-about-hero h1,
.click-about-page .click-about-hero p,
.click-about-page .click-about-hero .click-breadcrumbs,
.click-about-page .click-about-hero .click-breadcrumbs a,
.click-about-page .click-about-hero .click-breadcrumbs span,
.click-legal-page .click-legal-hero h1,
.click-legal-page .click-legal-hero p,
.click-legal-page .click-legal-hero .click-breadcrumbs,
.click-legal-page .click-legal-hero .click-breadcrumbs a,
.click-legal-page .click-legal-hero .click-breadcrumbs span {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-align: center !important;
}

.click-about-page .click-about-hero h1,
.click-legal-page .click-legal-hero h1 {
  margin-bottom: 14px !important;
  font-size: clamp(48px, 4.05vw, 68px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.03 !important;
}

.click-about-page .click-about-hero p,
.click-legal-page .click-legal-hero p {
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 14px !important;
  font-size: 18px;
  line-height: 1.75;
}

.click-about-page .click-about-hero .click-breadcrumbs,
.click-legal-page .click-legal-hero .click-breadcrumbs {
  justify-content: center !important;
}

.click-about-page .click-about-who .theme-btn {
  margin-top: 20px !important;
}

.click-about-page .click-about-why .click-card {
  border: 2px solid #0b1f3a !important;
}

/* Cart - quantity field/block gets the requested navy border. */
.click-cart-page [data-cart-render] .cart-qty {
  border: 2px solid #0b1f3a !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* Checkout - keep Billing & Delivery Details on one line while remaining responsive. */
.click-checkout-page #checkout-form > h2 {
  white-space: nowrap !important;
  font-size: clamp(22px, 2.4vw, 34px) !important;
  line-height: 1.2 !important;
}

/* Legal policy pages - slightly smaller content headings, as requested. */
.click-legal-page .click-legal-card h2,
.click-legal-page .click-legal-card h3 {
  font-size: 28px !important;
  line-height: 1.3 !important;
}

/* Website consistency request: section buttons use one shared blue treatment. Hero buttons stay untouched. */
.section-padding .theme-btn,
.section-bg .theme-btn {
  background: var(--click-blue) !important;
  border-color: var(--click-blue) !important;
  color: #ffffff !important;
}

.section-padding .theme-btn:hover,
.section-padding .theme-btn:focus-visible,
.section-bg .theme-btn:hover,
.section-bg .theme-btn:focus-visible {
  background: var(--click-navy) !important;
  border-color: var(--click-navy) !important;
  color: #ffffff !important;
}

@media (max-width: 991px) {
  .click-home-installer-section .col-lg-6:not(.click-info-copy) > img {
    width: 92% !important;
    max-width: 560px;
  }
}

@media (max-width: 767px) {
  .click-about-page .click-about-hero,
  .click-legal-page .click-legal-hero {
    min-height: 280px !important;
    padding: 56px 0 !important;
  }

  .click-about-page .click-about-hero h1,
  .click-legal-page .click-legal-hero h1 {
    font-size: clamp(36px, 10vw, 48px) !important;
  }

  .click-legal-page .click-legal-card h2,
  .click-legal-page .click-legal-card h3 {
    font-size: 24px !important;
  }

  .click-home-installer-section .col-lg-6:not(.click-info-copy) > img {
    width: 100% !important;
  }
}


/* CHANGES 44 - requested layout fixes only. */

/* Home About section: prevent the template masks/absolute overlap from distorting the two 4:3 photos. */
.click-home-about .about-images {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
  gap: 18px;
  align-items: end;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.click-home-about .about-images .image-1,
.click-home-about .about-images .image-2 {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  mask: none !important;
  -webkit-mask: none !important;
  background: transparent !important;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(11, 31, 58, 0.10);
}

.click-home-about .about-images .image-2 {
  margin-bottom: 34px !important;
}

.click-home-about .about-images .image-1 img,
.click-home-about .about-images .image-2 img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover !important;
  object-position: center !important;
}

/* Requested extra spacing above CTAs. */
.click-home-bottom-cta-section,
.click-installer-bottom-cta-section,
.click-about-bottom-cta-section {
  padding-top: 48px !important;
}

/* Request Installation hero: same centred icy/navy treatment used on the updated internal pages. */
.click-request-installation-page .click-request-installation-hero {
  position: relative !important;
  isolation: isolate !important;
  min-height: 330px !important;
  padding: 70px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background-color: #0b1f3a !important;
  background-image: linear-gradient(115deg, #071a34 0%, #0b1f3a 38%, #005dff 72%, #b8eeff 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  text-align: center !important;
}

.click-request-installation-page .click-request-installation-hero::before {
  display: none !important;
  content: none !important;
}

.click-request-installation-page .click-request-installation-hero > .container,
.click-request-installation-page .click-request-installation-hero .row,
.click-request-installation-page .click-request-installation-hero .col-lg-9 {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.click-request-installation-page .click-request-installation-hero > .container {
  position: relative !important;
  z-index: 2 !important;
  transform: none !important;
}

.click-request-installation-page .click-request-installation-hero .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: center !important;
}

.click-request-installation-page .click-request-installation-hero h1,
.click-request-installation-page .click-request-installation-hero p,
.click-request-installation-page .click-request-installation-hero .click-breadcrumbs,
.click-request-installation-page .click-request-installation-hero .click-breadcrumbs a,
.click-request-installation-page .click-request-installation-hero .click-breadcrumbs span {
  color: #ffffff !important;
}

.click-request-installation-page .click-request-installation-hero h1 {
  font-size: clamp(42px, 5vw, 64px) !important;
  margin-bottom: 12px !important;
}

.click-request-installation-page .click-request-installation-hero p {
  max-width: 760px;
  margin: 0 auto 14px !important;
  font-size: 17px;
  line-height: 1.7;
}

.click-request-installation-page .click-request-installation-hero .click-breadcrumbs {
  justify-content: center !important;
}

/* Request Installation right block: stop stretching it to the full form height. */
.click-request-installation-page .section-padding > .container > .row > .col-lg-4 {
  align-self: flex-start !important;
}

.click-request-installation-page .section-padding > .container > .row > .col-lg-4 > .click-card {
  height: auto !important;
  min-height: 0 !important;
}

@media (max-width: 991px) {
  .click-home-about .about-images {
    grid-template-columns: 1fr 1fr;
    max-width: 760px;
    margin-bottom: 10px;
  }

  .click-home-about .about-images .image-2 {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 575px) {
  .click-home-about .about-images {
    grid-template-columns: 1fr;
  }

  .click-home-about .about-images .image-2 {
    display: none !important;
  }

  .click-home-bottom-cta-section,
  .click-installer-bottom-cta-section,
  .click-about-bottom-cta-section {
    padding-top: 34px !important;
  }

  .click-request-installation-page .click-request-installation-hero {
    min-height: 280px !important;
    padding: 56px 0 !important;
  }

  .click-request-installation-page .click-request-installation-hero h1 {
    font-size: clamp(34px, 10vw, 46px) !important;
  }
}


/* CHANGES 45 - refine WhatsApp icon and increase header logo slightly. */
.click-whatsapp-float {
  line-height: 0;
}

.click-whatsapp-float svg {
  width: 30px;
  height: 30px;
  display: block;
  fill: currentColor;
  stroke: none;
}

@media (min-width: 1400px) {
  .click-header-logo img {
    width: 170px;
    max-height: 54px;
  }
}

@media (min-width: 992px) and (max-width: 1399px) {
  .click-header-logo img {
    width: 166px;
    max-height: 52px;
  }
}

@media (min-width: 576px) and (max-width: 991px) {
  .click-header-logo img {
    width: 158px;
    max-height: 50px;
  }
}

@media (max-width: 575px) {
  .click-header-logo img {
    width: 150px;
    max-height: 46px;
  }

  .click-whatsapp-float svg {
    width: 28px;
    height: 28px;
  }
}

/* CHANGES 46 - Home page image refinements requested by client. */
.click-home-about .click-home-about-single-image {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(11, 31, 58, 0.10);
}

.click-home-about .click-home-about-single-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

.click-home-installer-section .col-lg-6:not(.click-info-copy) > img {
  width: 84% !important;
  max-width: 520px !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 991px) {
  .click-home-about .click-home-about-single-image {
    max-width: 760px;
    margin-bottom: 10px;
  }

  .click-home-installer-section .col-lg-6:not(.click-info-copy) > img {
    width: 92% !important;
    max-width: 560px !important;
  }
}

@media (max-width: 575px) {
  .click-home-about .click-home-about-single-image {
    border-radius: 14px;
  }
}

/* CHANGES 47 - Single Product page refinements only. */
.click-single-product-page .click-single-product-hero {
  position: relative !important;
  isolation: isolate !important;
  min-height: 330px !important;
  padding: 70px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background-color: #0b1f3a !important;
  background-image: linear-gradient(115deg, #071a34 0%, #0b1f3a 38%, #005dff 72%, #b8eeff 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  text-align: center !important;
}

.click-single-product-page .click-single-product-hero::before {
  display: none !important;
  content: none !important;
}

.click-single-product-page .click-single-product-hero > .container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  transform: none !important;
}

.click-single-product-page .click-single-product-hero .row {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: center !important;
}

.click-single-product-page .click-single-product-hero .col-lg-9 {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.click-single-product-page .click-single-product-hero h1,
.click-single-product-page .click-single-product-hero p,
.click-single-product-page .click-single-product-hero .click-breadcrumbs,
.click-single-product-page .click-single-product-hero .click-breadcrumbs a,
.click-single-product-page .click-single-product-hero .click-breadcrumbs span {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-align: center !important;
}

.click-single-product-page .click-single-product-hero h1 {
  margin-bottom: 14px !important;
  font-size: clamp(48px, 4.05vw, 68px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.03 !important;
}

.click-single-product-page .click-single-product-hero p {
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 14px !important;
  font-size: 18px;
  line-height: 1.75;
}

.click-single-product-page .click-single-product-hero .click-breadcrumbs {
  justify-content: center !important;
}

.click-single-product-page .click-single-product-image-block {
  min-height: 430px;
  border: 2px solid #0b1f3a !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  overflow: hidden;
}

.click-single-product-page .click-single-product-image-block img {
  display: block;
  width: 90% !important;
  max-width: 560px;
  height: auto !important;
  max-height: 360px;
  object-fit: contain;
  object-position: center;
  margin: 0 auto;
}

.click-single-product-page .click-single-related-products .click-product-card {
  border: 2px solid #0b1f3a !important;
}

.click-single-product-page .click-single-related-products .product-image > a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.click-single-product-page .click-single-related-products .product-image img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto !important;
}

.click-single-product-page .click-single-product-cta-section {
  padding-top: 48px !important;
}

@media (max-width: 767px) {
  .click-single-product-page .click-single-product-hero {
    min-height: 280px !important;
    padding: 56px 0 !important;
  }

  .click-single-product-page .click-single-product-hero h1 {
    font-size: clamp(36px, 10vw, 48px) !important;
  }

  .click-single-product-page .click-single-product-image-block {
    min-height: 320px;
  }

  .click-single-product-page .click-single-product-cta-section {
    padding-top: 34px !important;
  }
}


/* CHANGES 48 - Buying Guide single-page refinements. */
.click-buying-guide-page .click-buying-guide-hero {
  position: relative !important;
  isolation: isolate !important;
  min-height: 330px !important;
  padding: 70px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background-color: #0b1f3a !important;
  background-image: linear-gradient(115deg, #071a34 0%, #0b1f3a 38%, #005dff 72%, #b8eeff 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  text-align: center !important;
}

.click-buying-guide-page .click-buying-guide-hero::before {
  display: none !important;
  content: none !important;
}

.click-buying-guide-page .click-buying-guide-hero > .container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  transform: none !important;
}

.click-buying-guide-page .click-buying-guide-hero .row {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: center !important;
}

.click-buying-guide-page .click-buying-guide-hero .col-lg-9 {
  margin-left: auto !important;
  margin-right: auto !important;
}

.click-buying-guide-page .click-buying-guide-hero h1,
.click-buying-guide-page .click-buying-guide-hero p,
.click-buying-guide-page .click-buying-guide-hero .click-breadcrumbs,
.click-buying-guide-page .click-buying-guide-hero .click-breadcrumbs a,
.click-buying-guide-page .click-buying-guide-hero .click-breadcrumbs span {
  position: relative !important;
  z-index: 3 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-align: center !important;
}

.click-buying-guide-page .click-buying-guide-hero h1 {
  margin-bottom: 14px !important;
  font-size: clamp(46px, 4vw, 66px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.08 !important;
}

.click-buying-guide-page .click-buying-guide-hero p {
  max-width: 820px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 14px !important;
  font-size: 18px;
  line-height: 1.75;
}

.click-buying-guide-page .click-buying-guide-hero .click-breadcrumbs {
  justify-content: center !important;
}

.click-buying-guide-page .click-guide-article {
  border: 2px solid #0b1f3a !important;
  border-radius: 18px !important;
  padding: 34px !important;
  font-family: "Poppins", Arial, sans-serif !important;
}

.click-buying-guide-page .click-guide-article > img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 14px;
  margin-bottom: 28px;
}

.click-buying-guide-page .click-guide-article h2,
.click-buying-guide-page .click-guide-article h3 {
  font-family: "Poppins", Arial, sans-serif !important;
  color: #0b1f3a;
}

.click-buying-guide-page .click-guide-article h2 {
  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1.18 !important;
}

.click-buying-guide-page .click-guide-article h3 {
  font-size: 23px !important;
  line-height: 1.35 !important;
  margin-top: 30px;
  margin-bottom: 12px;
}

.click-buying-guide-page .click-guide-article p,
.click-buying-guide-page .click-guide-article li {
  font-size: 16px;
  line-height: 1.75;
}

.click-buying-guide-page .click-guide-article ul {
  padding-left: 22px;
  margin-bottom: 18px;
}

@media (max-width: 767px) {
  .click-buying-guide-page .click-buying-guide-hero {
    min-height: 300px !important;
    padding: 56px 0 !important;
  }

  .click-buying-guide-page .click-buying-guide-hero h1 {
    font-size: clamp(38px, 10vw, 50px) !important;
  }

  .click-buying-guide-page .click-guide-article {
    padding: 22px !important;
  }

  .click-buying-guide-page .click-guide-article > img {
    height: 260px;
  }
}

/* CHANGES 49 - align all website section content with the Home hero Contact Us button. */
@media (min-width: 992px) {
  body > section:not(.click-page-hero) > .container,
  body > main > section:not(.click-home-hero):not(.click-page-hero) > .container {
    max-width: 1540px;
    padding-left: 44px;
    padding-right: 44px;
  }
}

@media (max-width: 991px) {
  body > section:not(.click-page-hero) > .container,
  body > main > section:not(.click-home-hero):not(.click-page-hero) > .container {
    max-width: 1540px;
  }
}

/* CHANGES 52 - align the complete Home hero image block to the shared right content edge. */
@media (min-width: 1400px) {
  .click-home-hero .click-hero-showcase {
    margin-left: auto !important;
    margin-right: 32px !important;
    padding-right: 0 !important;
    justify-content: center !important;
  }
}

@media (min-width: 992px) and (max-width: 1399px) {
  .click-home-hero .click-hero-showcase {
    width: calc(100% - 32px) !important;
    margin-left: auto !important;
    margin-right: 32px !important;
    padding-right: 0 !important;
    justify-content: center !important;
  }
}

/* CHANGES 53 - center only the Home hero image inside its existing image block. */
@media (min-width: 992px) {
  .click-home-hero .click-hero-showcase img {
    transform: translateX(-21px);
  }
}


/* CHANGES 54 - Home page section order/background only, plus requested centered shop button. */
.click-home-products.section-bg .home-product-card {
  background: #ffffff !important;
}

.click-home-products .click-home-products-bottom-button {
  width: 100%;
  text-align: center;
}

/* CHANGES 55 - centre only the artwork inside the existing Home hero image block. */
@media (min-width: 992px) {
  .click-home-hero .click-hero-showcase img {
    transform: none !important;
  }
}

/* CHANGES 56 - Home hero image only: restore the original artwork and centre it inside its existing right-side area. */
@media (min-width: 992px) {
  .click-home-hero .click-hero-showcase {
    padding-top: 34px !important;
    padding-right: 34px !important;
    padding-bottom: 34px !important;
    padding-left: 34px !important;
  }

  .click-home-hero .click-hero-showcase img {
    display: block !important;
    width: min(800px, 100%) !important;
    height: auto !important;
    margin: 0 auto !important;
    transform: none !important;
    object-position: center !important;
  }
}

/* CHANGES 56 final - prevent the hero artwork's built-in frame from being doubled by CSS. */
@media (min-width: 992px) {
  .click-home-hero .click-hero-showcase img {
    border: 0 !important;
    border-radius: 24px !important;
  }
}

/* CHANGES 59 - Calculator Results page only. */
.click-calculator-results-page .click-calculator-results-hero {
  position: relative !important;
  isolation: isolate !important;
  min-height: 330px !important;
  padding: 70px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background-color: #0b1f3a !important;
  background-image: linear-gradient(115deg, #071a34 0%, #0b1f3a 38%, #005dff 72%, #b8eeff 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  text-align: center !important;
}

.click-calculator-results-page .click-calculator-results-hero::before {
  display: none !important;
  content: none !important;
}

.click-calculator-results-page .click-calculator-results-hero > .container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  transform: none !important;
}

.click-calculator-results-page .click-calculator-results-hero .row {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: center !important;
}

.click-calculator-results-page .click-calculator-results-hero .col-lg-9 {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.click-calculator-results-page .click-calculator-results-hero h1,
.click-calculator-results-page .click-calculator-results-hero p,
.click-calculator-results-page .click-calculator-results-hero .click-breadcrumbs,
.click-calculator-results-page .click-calculator-results-hero .click-breadcrumbs a,
.click-calculator-results-page .click-calculator-results-hero .click-breadcrumbs span {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-align: center !important;
}

.click-calculator-results-page .click-calculator-results-hero h1 {
  margin-bottom: 14px !important;
  font-size: clamp(48px, 4.05vw, 68px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.03 !important;
}

.click-calculator-results-page .click-calculator-results-hero p {
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 14px !important;
  font-size: 18px;
  line-height: 1.75;
}

.click-calculator-results-page .click-calculator-results-hero .click-breadcrumbs {
  justify-content: center !important;
}

/* Match only the Calculator Results product blocks to the Home product cards. */
.click-calculator-results-page .click-calculator-products-section .click-calculator-product-card {
  border: 2px solid #0b1f3a !important;
  background: #ffffff !important;
}

.click-calculator-results-page .click-calculator-products-section .click-calculator-product-card .product-image > a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.click-calculator-results-page .click-calculator-products-section .click-calculator-product-card .product-image img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto !important;
}

@media (max-width: 767px) {
  .click-calculator-results-page .click-calculator-results-hero {
    min-height: 280px !important;
    padding: 56px 0 !important;
  }

  .click-calculator-results-page .click-calculator-results-hero h1 {
    font-size: clamp(36px, 10vw, 48px) !important;
  }
}

/* CHANGES 60 - keep calculator professional-assessment message readable on navy result card. */
.click-calculator-results-page .click-result-box p {
  color: #ffffff !important;
}


/* CHANGES 61 - Installer Results page only.
   Match the established internal hero treatment and add borders to the
   individual installer result cards without changing their layout/content. */
.click-installer-results-page .click-installer-results-hero {
  position: relative !important;
  isolation: isolate !important;
  min-height: 330px !important;
  padding: 70px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background-color: #0b1f3a !important;
  background-image: linear-gradient(115deg, #071a34 0%, #0b1f3a 38%, #005dff 72%, #b8eeff 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  text-align: center !important;
}

.click-installer-results-page .click-installer-results-hero::before {
  display: none !important;
  content: none !important;
}

.click-installer-results-page .click-installer-results-hero > .container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  transform: none !important;
}

.click-installer-results-page .click-installer-results-hero .row {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: center !important;
}

.click-installer-results-page .click-installer-results-hero .col-lg-9 {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.click-installer-results-page .click-installer-results-hero h1,
.click-installer-results-page .click-installer-results-hero p,
.click-installer-results-page .click-installer-results-hero .click-breadcrumbs,
.click-installer-results-page .click-installer-results-hero .click-breadcrumbs a,
.click-installer-results-page .click-installer-results-hero .click-breadcrumbs span {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-align: center !important;
}

.click-installer-results-page .click-installer-results-hero h1 {
  margin-bottom: 14px !important;
  font-size: clamp(48px, 4.05vw, 68px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.03 !important;
}

.click-installer-results-page .click-installer-results-hero p {
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 14px !important;
  font-size: 18px;
  line-height: 1.75;
}

.click-installer-results-page .click-installer-results-hero .click-breadcrumbs {
  justify-content: center !important;
}

.click-installer-results-page > section.section-padding:not(.click-page-hero) .click-installer-card {
  border: 2px solid #0b1f3a !important;
}

@media (max-width: 767px) {
  .click-installer-results-page .click-installer-results-hero {
    min-height: 280px !important;
    padding: 56px 0 !important;
  }

  .click-installer-results-page .click-installer-results-hero h1 {
    font-size: clamp(36px, 10vw, 48px) !important;
  }
}

/* CHANGES 62 - Installer Profile page hero only.
   Match the established internal hero treatment without changing page content. */
.click-installer-profile-page .click-installer-profile-hero {
  position: relative !important;
  isolation: isolate !important;
  min-height: 330px !important;
  padding: 70px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background-color: #0b1f3a !important;
  background-image: linear-gradient(115deg, #071a34 0%, #0b1f3a 38%, #005dff 72%, #b8eeff 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  text-align: center !important;
}

.click-installer-profile-page .click-installer-profile-hero::before {
  display: none !important;
  content: none !important;
}

.click-installer-profile-page .click-installer-profile-hero > .container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  transform: none !important;
}

.click-installer-profile-page .click-installer-profile-hero .row {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: center !important;
}

.click-installer-profile-page .click-installer-profile-hero .col-lg-9 {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.click-installer-profile-page .click-installer-profile-hero h1,
.click-installer-profile-page .click-installer-profile-hero p,
.click-installer-profile-page .click-installer-profile-hero .click-breadcrumbs,
.click-installer-profile-page .click-installer-profile-hero .click-breadcrumbs a,
.click-installer-profile-page .click-installer-profile-hero .click-breadcrumbs span {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-align: center !important;
}

.click-installer-profile-page .click-installer-profile-hero h1 {
  margin-bottom: 14px !important;
  font-size: clamp(48px, 4.05vw, 68px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.03 !important;
}

.click-installer-profile-page .click-installer-profile-hero p {
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 14px !important;
  font-size: 18px;
  line-height: 1.75;
}

.click-installer-profile-page .click-installer-profile-hero .click-breadcrumbs {
  justify-content: center !important;
}

@media (max-width: 767px) {
  .click-installer-profile-page .click-installer-profile-hero {
    min-height: 280px !important;
    padding: 56px 0 !important;
  }

  .click-installer-profile-page .click-installer-profile-hero h1 {
    font-size: clamp(36px, 10vw, 48px) !important;
  }
}


/* CHANGES 63 - My Account page only.
   Match the established internal hero, border only the two main account blocks,
   and add space below the support heading without changing the form fields. */
.click-my-account-page .click-my-account-hero {
  position: relative !important;
  isolation: isolate !important;
  min-height: 330px !important;
  padding: 70px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background-color: #0b1f3a !important;
  background-image: linear-gradient(115deg, #071a34 0%, #0b1f3a 38%, #005dff 72%, #b8eeff 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  text-align: center !important;
}

.click-my-account-page .click-my-account-hero::before {
  display: none !important;
  content: none !important;
}

.click-my-account-page .click-my-account-hero > .container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  transform: none !important;
}

.click-my-account-page .click-my-account-hero .row {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: center !important;
}

.click-my-account-page .click-my-account-hero .col-lg-9 {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.click-my-account-page .click-my-account-hero h1,
.click-my-account-page .click-my-account-hero p,
.click-my-account-page .click-my-account-hero .click-breadcrumbs,
.click-my-account-page .click-my-account-hero .click-breadcrumbs a,
.click-my-account-page .click-my-account-hero .click-breadcrumbs span {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-align: center !important;
}

.click-my-account-page .click-my-account-hero h1 {
  margin-bottom: 14px !important;
  font-size: clamp(48px, 4.05vw, 68px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.03 !important;
}

.click-my-account-page .click-my-account-hero p {
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 14px !important;
  font-size: 18px;
  line-height: 1.75;
}

.click-my-account-page .click-my-account-hero .click-breadcrumbs {
  justify-content: center !important;
}

/* Border only the two outer account blocks, not the fields or inner support cards. */
.click-my-account-page .click-account-section > .container > .row > [class*="col-"] > .click-account-card {
  border: 2px solid #0b1f3a !important;
}

/* Add breathing room between the support heading and its first row of blocks. */
.click-my-account-page .click-account-section .col-lg-7 > .click-account-card > h2 {
  margin-bottom: 30px !important;
}

@media (max-width: 767px) {
  .click-my-account-page .click-my-account-hero {
    min-height: 280px !important;
    padding: 56px 0 !important;
  }

  .click-my-account-page .click-my-account-hero h1 {
    font-size: clamp(36px, 10vw, 48px) !important;
  }
}

/* CHANGES 64 - My Account login fields only.
   Ensure entered email/password values remain clearly visible in black. */
.click-my-account-page .click-account-section .click-account-card .click-input {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  caret-color: #000000 !important;
  opacity: 1 !important;
}

.click-my-account-page .click-account-section .click-account-card .click-input::placeholder {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
  opacity: 1 !important;
}

.click-my-account-page .click-account-section .click-account-card .click-input:-webkit-autofill,
.click-my-account-page .click-account-section .click-account-card .click-input:-webkit-autofill:hover,
.click-my-account-page .click-account-section .click-account-card .click-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #000000 !important;
  caret-color: #000000 !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
}

/* CHANGES 68 - Checkout field visibility/layout and Search Results page refinement. */
.click-checkout-page #checkout-form input:not([type="radio"]):not([type="checkbox"]),
.click-checkout-page #checkout-form textarea,
.click-checkout-page #checkout-form select {
  color: #0b1f3a !important;
  caret-color: #0b1f3a !important;
  -webkit-text-fill-color: #0b1f3a !important;
  opacity: 1 !important;
}

.click-checkout-page #checkout-form input:not([type="radio"]):not([type="checkbox"])::placeholder,
.click-checkout-page #checkout-form textarea::placeholder {
  color: #6d7890 !important;
  -webkit-text-fill-color: #6d7890 !important;
  opacity: 1 !important;
}

.click-checkout-page #checkout-form input:-webkit-autofill,
.click-checkout-page #checkout-form input:-webkit-autofill:hover,
.click-checkout-page #checkout-form input:-webkit-autofill:focus,
.click-checkout-page #checkout-form textarea:-webkit-autofill {
  -webkit-text-fill-color: #0b1f3a !important;
  caret-color: #0b1f3a !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
}

.click-checkout-main-section .click-checkout-layout-form {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.click-checkout-main-section .click-checkout-panel {
  background: #ffffff;
  border: 2px solid #0b1f3a;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 10px 35px rgba(11, 31, 58, 0.05);
}

.click-checkout-main-section .click-checkout-billing h2,
.click-checkout-main-section .click-checkout-summary h3,
.click-checkout-main-section .click-checkout-payment h3 {
  margin: 0 0 24px !important;
  color: #0b1f3a;
  font-family: "Poppins", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
}

.click-checkout-main-section .click-checkout-billing h2 {
  font-size: clamp(30px, 2.4vw, 40px) !important;
  white-space: nowrap;
}

.click-checkout-main-section .click-form-group label {
  display: block;
  margin-bottom: 8px;
  color: #0b1f3a;
  font-weight: 600;
}

.click-checkout-main-section .click-input,
.click-checkout-main-section .click-textarea,
.click-checkout-main-section .click-select {
  width: 100%;
  border: 1px solid #d4deeb !important;
  background: #fff !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  min-height: 54px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.click-checkout-main-section .click-textarea {
  min-height: 128px;
  resize: vertical;
}

.click-checkout-main-section .click-input:focus,
.click-checkout-main-section .click-textarea:focus,
.click-checkout-main-section .click-select:focus {
  border-color: #005dff !important;
  box-shadow: 0 0 0 3px rgba(0, 93, 255, 0.10) !important;
}

.click-checkout-main-section .click-checkout-summary {
  position: static !important;
  top: auto !important;
  margin-bottom: 22px;
  min-height: 0 !important;
}

.click-payment-option {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid #e2e8f1;
  cursor: pointer;
}

.click-payment-option:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.click-payment-option input {
  margin-top: 4px;
  accent-color: #005dff;
}

.click-payment-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.click-payment-copy strong {
  color: #0b1f3a;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
}

.click-payment-copy small {
  color: #56627a;
  line-height: 1.55;
}

.click-checkout-installation {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  padding-top: 18px;
  border-top: 1px solid #e2e8f1;
}

.click-checkout-installation input {
  accent-color: #005dff;
}

.click-place-order-btn {
  width: 100%;
  margin-top: 22px;
  justify-content: center;
}

.click-search-results-page .click-search-results-hero {
  position: relative !important;
  isolation: isolate !important;
  min-height: 330px !important;
  padding: 70px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background-color: #0b1f3a !important;
  background-image: linear-gradient(115deg, #071a34 0%, #0b1f3a 38%, #005dff 72%, #b8eeff 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  text-align: center !important;
}

.click-search-results-page .click-search-results-hero::before {
  display: none !important;
  content: none !important;
}

.click-search-results-page .click-search-results-hero > .container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  transform: none !important;
}

.click-search-results-page .click-search-results-hero .row {
  width: 100% !important;
  margin: 0 !important;
  justify-content: center !important;
}

.click-search-results-page .click-search-results-hero .col-lg-9 {
  margin: 0 auto !important;
  text-align: center !important;
}

.click-search-results-page .click-search-results-hero h1,
.click-search-results-page .click-search-results-hero p,
.click-search-results-page .click-search-results-hero .click-breadcrumbs,
.click-search-results-page .click-search-results-hero .click-breadcrumbs a,
.click-search-results-page .click-search-results-hero .click-breadcrumbs span {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-align: center !important;
}

.click-search-results-page .click-search-results-hero h1 {
  margin: 0 0 14px !important;
  font-family: "Poppins", sans-serif !important;
  font-size: clamp(48px, 4.05vw, 68px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.03 !important;
}

.click-search-results-page .click-search-results-hero p {
  max-width: 760px !important;
  margin: 0 auto 14px !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
}

.click-search-results-page .click-search-results-hero .click-breadcrumbs {
  justify-content: center !important;
}

.click-search-results-page .click-search-results-form {
  height: auto !important;
  border: 2px solid #0b1f3a !important;
  border-radius: 16px !important;
  padding: 28px !important;
  background: #ffffff !important;
}

.click-search-results-page .click-search-results-form .click-input {
  color: #0b1f3a !important;
  -webkit-text-fill-color: #0b1f3a !important;
  caret-color: #0b1f3a !important;
  background: #ffffff !important;
}

.click-search-results-page .click-search-product-card {
  border: 2px solid #0b1f3a !important;
  background: #ffffff !important;
}

.click-search-results-page .click-search-product-card .product-image img {
  width: 88% !important;
  max-height: 205px !important;
  object-fit: contain !important;
}

@media (max-width: 991px) {
  .click-checkout-main-section .click-checkout-billing h2 {
    white-space: normal;
  }
  .click-checkout-main-section .click-checkout-panel {
    padding: 24px;
  }
}

@media (max-width: 767px) {
  .click-search-results-page .click-search-results-hero {
    min-height: 280px !important;
    padding: 56px 0 !important;
  }
  .click-search-results-page .click-search-results-hero h1 {
    font-size: clamp(36px, 10vw, 48px) !important;
  }
  .click-search-results-page .click-search-results-hero p {
    font-size: 16px !important;
  }
}

/* CHANGES 70 - Checkout page layout/styling only, based on supplied reference. */
.click-checkout-page .click-checkout-main-section {
  background: #f5f7fa !important;
}

.click-checkout-page .click-checkout-main-section .container {
  max-width: 1540px;
}

.click-checkout-page .click-checkout-layout-form {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.click-checkout-page .click-checkout-reference-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(350px, 0.92fr);
  gap: 34px;
  align-items: start;
}

.click-checkout-page .click-checkout-left,
.click-checkout-page .click-checkout-summary-card,
.click-checkout-page .click-checkout-payment-card {
  background: #ffffff;
  border: 2px solid #0b1f3a;
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(11, 31, 58, 0.05);
}

.click-checkout-page .click-checkout-left {
  padding: 36px 38px 38px;
}

.click-checkout-page .click-checkout-summary-card,
.click-checkout-page .click-checkout-payment-card {
  padding: 28px 30px;
}

.click-checkout-page .click-checkout-payment-card {
  margin-top: 22px;
}

.click-checkout-page .click-checkout-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: #005dff;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.click-checkout-page .click-checkout-billing-heading h2 {
  margin: 0 0 24px !important;
  color: #0b1f3a;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: clamp(36px, 3vw, 50px) !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  white-space: normal !important;
}

.click-checkout-page .click-checkout-fields {
  --bs-gutter-x: 18px;
  --bs-gutter-y: 18px;
}

.click-checkout-page .click-form-group label {
  display: block;
  margin-bottom: 7px;
  color: #0b1f3a;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.click-checkout-page .click-form-group label::after {
  content: " *";
  color: #005dff;
}

.click-checkout-page #checkout-form input:not([type="radio"]):not([type="checkbox"]),
.click-checkout-page #checkout-form textarea,
.click-checkout-page #checkout-form select {
  width: 100%;
  min-height: 56px;
  border: 1.5px solid #d4deeb !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  padding: 14px 15px !important;
  color: #0b1f3a !important;
  -webkit-text-fill-color: #0b1f3a !important;
  caret-color: #0b1f3a !important;
  box-shadow: none !important;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 15px;
}

.click-checkout-page #checkout-form textarea {
  min-height: 130px;
  resize: vertical;
}

.click-checkout-page #checkout-form input:not([type="radio"]):not([type="checkbox"]):focus,
.click-checkout-page #checkout-form textarea:focus,
.click-checkout-page #checkout-form select:focus {
  border-color: #005dff !important;
  box-shadow: 0 0 0 3px rgba(0, 93, 255, 0.09) !important;
  outline: 0 !important;
}

.click-checkout-page .click-checkout-section-divider {
  height: 1px;
  margin: 30px 0 24px;
  background: rgba(11, 31, 58, 0.15);
}

.click-checkout-page .click-checkout-delivery-heading {
  margin-bottom: 18px;
}

.click-checkout-page .click-checkout-delivery-heading p {
  margin: 0;
  color: #5e6b80;
  font-size: 14px;
  line-height: 1.65;
}

.click-checkout-page .click-checkout-shipping-note {
  margin-top: 16px;
  color: #667085;
  font-size: 13px;
  line-height: 1.65;
}

.click-checkout-page .click-place-order-btn {
  width: auto !important;
  min-width: 190px;
  min-height: 56px;
  margin-top: 24px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  background: #005dff !important;
  color: #ffffff !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.click-checkout-page .click-place-order-btn:hover {
  background: #0b1f3a !important;
  color: #ffffff !important;
}

.click-checkout-page .click-checkout-sidebar {
  position: static;
  top: auto;
}

.click-checkout-page .click-checkout-summary-card [data-checkout-summary] {
  margin-top: 2px;
}

.click-checkout-page .click-order-item,
.click-checkout-page .click-order-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(11, 31, 58, 0.14);
  color: #334155;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

.click-checkout-page .click-order-item:first-child {
  padding-top: 0;
}

.click-checkout-page .click-order-item > span {
  max-width: 72%;
}

.click-checkout-page .click-order-item small {
  color: #6b7280;
  font-size: 12px;
  white-space: nowrap;
}

.click-checkout-page .click-order-item strong,
.click-checkout-page .click-order-summary-row strong {
  color: #0b1f3a;
  font-weight: 700;
  white-space: nowrap;
}

.click-checkout-page .click-order-summary-row.total {
  padding-top: 18px;
  border-bottom: 0;
  color: #0b1f3a;
  font-size: 18px;
  font-weight: 700;
}

.click-checkout-page .click-order-summary-row.total strong {
  font-size: 20px;
}

.click-checkout-page .click-payment-option {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid rgba(11, 31, 58, 0.13);
  cursor: pointer;
}

.click-checkout-page .click-payment-option:first-of-type {
  border-top: 0;
  padding-top: 4px;
}

.click-checkout-page .click-payment-option input,
.click-checkout-page .click-checkout-installation input {
  accent-color: #005dff;
}

.click-checkout-page .click-payment-copy strong {
  color: #0b1f3a;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.click-checkout-page .click-payment-copy small {
  color: #667085;
  font-size: 13px;
  line-height: 1.55;
}

.click-checkout-page .click-checkout-installation {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(11, 31, 58, 0.13);
  color: #0b1f3a;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.click-checkout-page #checkout-payment-error:not([hidden]) {
  margin-top: 16px !important;
  padding: 12px 14px;
  border: 1px solid rgba(245, 130, 32, 0.4);
  border-radius: 8px;
  background: rgba(245, 130, 32, 0.08);
  color: #7a3b00;
}

.click-checkout-page .click-order-empty p {
  margin-bottom: 8px;
}

.click-checkout-page .click-order-empty a {
  color: #005dff;
  font-weight: 700;
}

@media (max-width: 1199px) {
  .click-checkout-page .click-checkout-reference-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.85fr);
    gap: 26px;
  }

  .click-checkout-page .click-checkout-left {
    padding: 30px;
  }
}

@media (max-width: 991px) {
  .click-checkout-page .click-checkout-reference-grid {
    grid-template-columns: 1fr;
  }

  .click-checkout-page .click-checkout-sidebar {
    position: static;
  }
}

@media (max-width: 575px) {
  .click-checkout-page .click-checkout-left,
  .click-checkout-page .click-checkout-summary-card,
  .click-checkout-page .click-checkout-payment-card {
    padding: 22px;
    border-radius: 12px;
  }

  .click-checkout-page .click-checkout-billing-heading h2 {
    font-size: 34px !important;
  }

  .click-checkout-page .click-place-order-btn {
    width: 100% !important;
  }

  .click-checkout-page .click-order-item,
  .click-checkout-page .click-order-summary-row {
    gap: 12px;
  }
}

/* CHANGES 71 - Checkout reference layout correction. Layout/styling only; no sticky panels. */
.click-checkout-page .click-checkout-main-section {
  background: #f5f7fa !important;
  padding-top: 76px !important;
  padding-bottom: 92px !important;
}

.click-checkout-page .click-checkout-main-section .container {
  max-width: 1540px !important;
}

.click-checkout-page .click-checkout-layout-form {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.click-checkout-page .click-checkout-reference-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.92fr) !important;
  gap: 34px !important;
  align-items: start !important;
}

.click-checkout-page .click-checkout-left,
.click-checkout-page .click-checkout-summary-card,
.click-checkout-page .click-checkout-payment-card {
  background: #ffffff !important;
  border: 1px solid #d6e0ec !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.click-checkout-page .click-checkout-left {
  padding: 31px 30px 30px !important;
}

.click-checkout-page .click-checkout-summary-card {
  padding: 31px 30px 28px !important;
}

.click-checkout-page .click-checkout-payment-card {
  margin-top: 28px !important;
  padding: 22px 24px !important;
}

.click-checkout-page .click-checkout-sidebar {
  position: static !important;
  top: auto !important;
  align-self: start !important;
}

.click-checkout-page .click-checkout-eyebrow {
  display: block !important;
  margin: 0 0 8px !important;
  color: #005dff !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: 0.17em !important;
  text-transform: uppercase !important;
}

.click-checkout-page .click-checkout-billing-heading h2,
.click-checkout-page .click-checkout-summary-card h3 {
  margin: 0 !important;
  color: #0b1f3a !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
}

.click-checkout-page .click-checkout-billing-heading h2 {
  margin-bottom: 24px !important;
  font-size: clamp(32px, 2.6vw, 44px) !important;
  line-height: 1.08 !important;
  white-space: normal !important;
}

.click-checkout-page .click-checkout-summary-card h3 {
  margin-bottom: 21px !important;
  font-size: clamp(29px, 2.4vw, 40px) !important;
  line-height: 1.1 !important;
}

.click-checkout-page .click-checkout-fields,
.click-checkout-page .click-checkout-address-grid {
  --bs-gutter-x: 18px !important;
  --bs-gutter-y: 17px !important;
}

.click-checkout-page .click-form-group label {
  display: block !important;
  margin-bottom: 6px !important;
  color: #0b1f3a !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.click-checkout-page .click-form-group label::after {
  content: " *" !important;
  color: #005dff !important;
}

.click-checkout-page .click-form-group-optional label::after {
  content: "" !important;
}

.click-checkout-page #checkout-form input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
.click-checkout-page #checkout-form textarea,
.click-checkout-page #checkout-form select {
  width: 100% !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid #cfd9e6 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  color: #0b1f3a !important;
  -webkit-text-fill-color: #0b1f3a !important;
  caret-color: #0b1f3a !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.click-checkout-page #checkout-form input::placeholder {
  color: #8a96a8 !important;
  -webkit-text-fill-color: #8a96a8 !important;
  opacity: 1 !important;
}

.click-checkout-page #checkout-form select {
  appearance: auto !important;
}

.click-checkout-page #checkout-form input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):focus,
.click-checkout-page #checkout-form textarea:focus,
.click-checkout-page #checkout-form select:focus {
  border-color: #005dff !important;
  box-shadow: 0 0 0 2px rgba(0, 93, 255, 0.08) !important;
  outline: 0 !important;
}

.click-checkout-page .click-checkout-section-divider {
  height: 1px !important;
  margin: 29px 0 23px !important;
  background: #d6e0ec !important;
}

.click-checkout-page .click-checkout-delivery-heading {
  margin-bottom: 18px !important;
}

.click-checkout-page .click-checkout-delivery-heading p {
  max-width: 760px !important;
  margin: 0 !important;
  color: #627086 !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

.click-checkout-page .click-place-order-btn {
  width: auto !important;
  min-width: 145px !important;
  min-height: 52px !important;
  margin-top: 25px !important;
  padding: 13px 24px !important;
  border: 1px solid #005dff !important;
  border-radius: 0 !important;
  background: #005dff !important;
  color: #ffffff !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.click-checkout-page .click-place-order-btn:hover {
  border-color: #0b1f3a !important;
  background: #0b1f3a !important;
  color: #ffffff !important;
}

.click-checkout-page .click-checkout-summary-card [data-checkout-summary] {
  margin-top: 0 !important;
}

.click-checkout-page .click-order-item,
.click-checkout-page .click-order-summary-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 20px !important;
  align-items: start !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid #dbe3ed !important;
  color: #334155 !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.click-checkout-page .click-order-item:first-child {
  padding-top: 0 !important;
}

.click-checkout-page .click-order-item > span {
  max-width: none !important;
  color: #344258 !important;
}

.click-checkout-page .click-order-item small {
  display: block !important;
  margin-top: 2px !important;
  color: #7a8798 !important;
  font-size: 12px !important;
  white-space: normal !important;
}

.click-checkout-page .click-order-item strong,
.click-checkout-page .click-order-summary-row strong {
  color: #0b1f3a !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.click-checkout-page .click-order-summary-row.total {
  padding-top: 17px !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  color: #0b1f3a !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

.click-checkout-page .click-order-summary-row.total strong {
  font-size: 19px !important;
}

.click-checkout-page .click-payment-option {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  cursor: pointer !important;
}

.click-checkout-page .click-payment-option input {
  flex: 0 0 auto !important;
  margin: 0 !important;
  accent-color: #005dff !important;
}

.click-checkout-page .click-payfast-option {
  min-height: 84px !important;
  padding: 15px 18px !important;
  border: 1px solid #d6e0ec !important;
  background: #ffffff !important;
}

.click-checkout-page .click-payment-brand {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  column-gap: 12px !important;
  row-gap: 2px !important;
  align-items: center !important;
  width: 100% !important;
}

.click-checkout-page .click-payment-brand strong {
  grid-row: 1 / span 2 !important;
  color: #005dff !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

.click-checkout-page .click-payment-brand > span {
  color: #0b1f3a !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.click-checkout-page .click-payment-brand small {
  color: #69778b !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.click-checkout-page .click-payflex-option {
  margin-top: 14px !important;
  padding: 13px 4px 1px !important;
  border-top: 1px solid #dbe3ed !important;
}

.click-checkout-page .click-payment-copy strong {
  display: block !important;
  color: #0b1f3a !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.click-checkout-page .click-payment-copy small {
  display: block !important;
  margin-top: 2px !important;
  color: #69778b !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.click-checkout-page #checkout-payment-error:not([hidden]) {
  margin-top: 18px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(245, 130, 32, 0.42) !important;
  border-radius: 0 !important;
  background: rgba(245, 130, 32, 0.08) !important;
  color: #7a3b00 !important;
}

@media (max-width: 1199px) {
  .click-checkout-page .click-checkout-reference-grid {
    grid-template-columns: minmax(0, 1.38fr) minmax(330px, 0.9fr) !important;
    gap: 26px !important;
  }
}

@media (max-width: 991px) {
  .click-checkout-page .click-checkout-reference-grid {
    grid-template-columns: 1fr !important;
  }

  .click-checkout-page .click-checkout-sidebar {
    position: static !important;
  }
}

@media (max-width: 575px) {
  .click-checkout-page .click-checkout-main-section {
    padding-top: 54px !important;
    padding-bottom: 64px !important;
  }

  .click-checkout-page .click-checkout-left,
  .click-checkout-page .click-checkout-summary-card,
  .click-checkout-page .click-checkout-payment-card {
    padding: 22px 18px !important;
    border-radius: 0 !important;
  }

  .click-checkout-page .click-checkout-billing-heading h2 {
    font-size: 32px !important;
  }

  .click-checkout-page .click-checkout-summary-card h3 {
    font-size: 28px !important;
  }

  .click-checkout-page .click-place-order-btn {
    width: 100% !important;
  }
}

/* CHANGES 72 - Home About section alignment only. */
@media (min-width: 1200px) {
  .click-home-about .click-home-about-single-image {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* CHANGES 76 - Home Installer Network section alignment only. */
@media (min-width: 1200px) {
  .click-home-installer-section .col-lg-6:not(.click-info-copy) > img {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Single product: center the Related Products section heading only. */
.click-single-product-page .click-single-related-products .section-title {
  text-align: center;
}

/* CHANGES 80 - align the Home hero benefits bar width with the hero content edges only. */
@media (min-width: 992px) {
  .click-home-hero .click-hero-benefits {
    width: calc(100% - 64px);
    margin-left: 32px;
    margin-right: 32px;
  }
}

/* CHANGES 81 - align the desktop header edges with the Home hero content only. */
@media (min-width: 1200px) {
  .header-1 > .container {
    max-width: 1540px;
  }

  .header-1 .header-main {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* CHANGES 82 - Back to top button positioned above the floating cart. */
.click-back-to-top {
  position: fixed;
  right: 24px;
  bottom: 164px;
  z-index: 9998;
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid #59d9ff;
  border-radius: 50%;
  background: #0b1f3a;
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(11, 31, 58, 0.24);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.click-back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.click-back-to-top:hover {
  transform: translateY(-3px) scale(1.03);
  background: #005dff;
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(11, 31, 58, 0.30);
}

.click-back-to-top svg {
  width: 27px;
  height: 27px;
  display: block;
}

@media (max-width: 575px) {
  .click-back-to-top {
    right: 16px;
    bottom: 148px;
    width: 54px;
    height: 54px;
  }

  .click-back-to-top svg {
    width: 25px;
    height: 25px;
  }
}


/* CHANGES 83 - align the visible desktop header logo with the Home hero content start. */
@media (min-width: 1200px) {
  .header-1 .click-header-logo {
    transform: translateX(-48px);
  }
}

/* CHANGES 91 - Contact Us popup field visibility.
   Match the other corrected front-end forms: entered values and dropdown options
   must remain clearly visible instead of inheriting light/white form text. */
.click-contact-popup-form-wrap .click-input,
.click-contact-popup-form-wrap .click-select,
.click-contact-popup-form-wrap .click-textarea {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  caret-color: #000000 !important;
  opacity: 1 !important;
}

.click-contact-popup-form-wrap .click-input::placeholder,
.click-contact-popup-form-wrap .click-textarea::placeholder {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
  opacity: 1 !important;
}

.click-contact-popup-form-wrap .click-select option {
  color: #000000 !important;
  background: #ffffff !important;
}

.click-contact-popup-form-wrap .click-input:-webkit-autofill,
.click-contact-popup-form-wrap .click-input:-webkit-autofill:hover,
.click-contact-popup-form-wrap .click-input:-webkit-autofill:focus,
.click-contact-popup-form-wrap .click-textarea:-webkit-autofill,
.click-contact-popup-form-wrap .click-textarea:-webkit-autofill:hover,
.click-contact-popup-form-wrap .click-textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #000000 !important;
  caret-color: #000000 !important;
  box-shadow: 0 0 0 1000px #f8fafc inset !important;
}

/* CHANGES 92 - Global front-end form field text visibility.
   Keep typed/selected values black across every customer-facing form, regardless
   of the original template's global white input text rule. Buttons, checkboxes,
   radios and other non-text controls are intentionally excluded. */
html body input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="image"]):not([type="hidden"]),
html body textarea,
html body select {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  caret-color: #000000 !important;
  opacity: 1 !important;
}

html body input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="image"]):not([type="hidden"]):focus,
html body textarea:focus,
html body select:focus {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  caret-color: #000000 !important;
}

html body input::placeholder,
html body textarea::placeholder {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
  opacity: 1 !important;
}

html body select option,
html body select optgroup {
  color: #000000 !important;
  background: #ffffff !important;
  -webkit-text-fill-color: #000000 !important;
}

html body input:-webkit-autofill,
html body input:-webkit-autofill:hover,
html body input:-webkit-autofill:focus,
html body textarea:-webkit-autofill,
html body textarea:-webkit-autofill:hover,
html body textarea:-webkit-autofill:focus,
html body select:-webkit-autofill,
html body select:-webkit-autofill:hover,
html body select:-webkit-autofill:focus {
  -webkit-text-fill-color: #000000 !important;
  caret-color: #000000 !important;
}

/* Native date/time controls can use an internal text node in WebKit browsers. */
html body input[type="date"]::-webkit-datetime-edit,
html body input[type="time"]::-webkit-datetime-edit,
html body input[type="datetime-local"]::-webkit-datetime-edit,
html body input[type="month"]::-webkit-datetime-edit,
html body input[type="week"]::-webkit-datetime-edit {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* If the template upgrades a select to Nice Select, keep its visible value black too. */
html body .nice-select .current,
html body .nice-select .option {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* Live contact form delivery states */
.click-contact-popup-status.error {
  border-color: rgba(190, 35, 35, 0.22);
  background: #fff4f4;
  color: #8f1f1f;
}

.click-contact-popup-status.success {
  border-color: rgba(0, 115, 72, 0.20);
  background: #f1fbf6;
  color: #075f3f;
}

button[type="submit"]:disabled {
  cursor: wait;
  opacity: 0.72;
}

/* CHANGES 97 - Checkout page: remove panel borders only. */
.click-checkout-page .click-checkout-left,
.click-checkout-page .click-checkout-summary-card,
.click-checkout-page .click-checkout-payment-card {
  border: none !important;
}

/* CHANGES 98 - Remove the large outer border from the checkout form wrapper only. */
.click-checkout-page #checkout-form {
  border: 0 !important;
  box-shadow: none !important;
}

/* CHANGES 101 - PayFast supported payment methods image beneath the PayFast checkout option. */
.click-checkout-page .click-payfast-supported-payments {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 18px 0 0 !important;
  object-fit: contain !important;
}

/* CHANGES 106 - Single product: render the saved backend Long Description before the bottom CTA. */
.click-single-product-page .click-single-product-long-description-section[hidden] {
  display: none !important;
}

.click-single-product-page .click-single-product-long-description {
  color: #0b1f3a;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.8;
}

.click-single-product-page .click-single-product-long-description > :first-child {
  margin-top: 0 !important;
}

.click-single-product-page .click-single-product-long-description > :last-child {
  margin-bottom: 0 !important;
}

.click-single-product-page .click-single-product-long-description h2,
.click-single-product-page .click-single-product-long-description h3,
.click-single-product-page .click-single-product-long-description h4 {
  color: #0b1f3a;
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.25;
  margin: 28px 0 14px;
}

.click-single-product-page .click-single-product-long-description p,
.click-single-product-page .click-single-product-long-description ul,
.click-single-product-page .click-single-product-long-description ol {
  margin: 0 0 18px;
}

.click-single-product-page .click-single-product-long-description ul,
.click-single-product-page .click-single-product-long-description ol {
  padding-left: 24px;
}

.click-single-product-page .click-single-product-long-description a {
  color: #005dff;
  text-decoration: underline;
}

/* CHANGES 107 - Single product: move Long Description between specifications and Related Products, with a Click-Aircon border. */
.click-single-product-page .click-single-product-long-description-section {
  background: #ffffff !important;
}

.click-single-product-page .click-single-product-long-description {
  background: #ffffff !important;
  border: 2px solid #0b1f3a !important;
  border-radius: 16px !important;
  padding: 30px 32px !important;
}

@media (max-width: 767px) {
  .click-single-product-page .click-single-product-long-description {
    padding: 24px 22px !important;
  }
}


/* CHANGES 109 - Cart coupon entry and checkout coupon summary. */
.click-cart-page .click-cart-coupon-block,
.click-checkout-page .click-checkout-coupon-block {
  padding: 16px 0 18px;
  border-top: 1px solid rgba(11, 31, 58, 0.14);
}

.click-cart-page .click-cart-coupon-block label,
.click-checkout-page .click-checkout-coupon-block label {
  display: block;
  margin-bottom: 9px;
  color: #0b1f3a;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.click-cart-page .click-cart-coupon-form,
.click-checkout-page .click-checkout-coupon-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.click-cart-page .click-cart-coupon-form input,
.click-checkout-page .click-checkout-coupon-form input {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 13px;
  border: 1px solid #cfd9e6 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 14px;
  outline: none;
}

.click-cart-page .click-cart-coupon-form input:focus,
.click-checkout-page .click-checkout-coupon-form input:focus {
  border-color: #005dff !important;
  box-shadow: 0 0 0 2px rgba(0, 93, 255, 0.08) !important;
}

.click-cart-page .click-cart-coupon-form button,
.click-checkout-page .click-checkout-coupon-form button {
  height: 48px;
  padding: 0 17px;
  border: 1px solid #005dff;
  border-radius: 0;
  background: #005dff;
  color: #ffffff;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.click-cart-page .click-cart-coupon-form button:disabled,
.click-checkout-page .click-checkout-coupon-form button:disabled {
  opacity: 0.65;
  cursor: wait;
}

.click-cart-page .click-cart-coupon-status,
.click-checkout-page .click-checkout-coupon-status {
  min-height: 0;
  margin-top: 7px;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.45;
}

.click-cart-page .click-cart-coupon-status.error,
.click-checkout-page .click-checkout-coupon-status.error { color: #0b1f3a; }
.click-cart-page .click-cart-coupon-status.success,
.click-checkout-page .click-checkout-coupon-status.success { color: #005dff; }

.click-cart-page .click-cart-coupon-remove,
.click-checkout-page .click-checkout-coupon-remove {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #005dff;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.click-cart-page .click-cart-coupon-discount strong,
.click-checkout-page .click-order-coupon-row strong {
  color: #005dff !important;
}

@media (max-width: 420px) {
  .click-cart-page .click-cart-coupon-form,
  .click-checkout-page .click-checkout-coupon-form {
    grid-template-columns: 1fr;
  }
  .click-cart-page .click-cart-coupon-form button,
  .click-checkout-page .click-checkout-coupon-form button {
    width: 100%;
  }
}

/* CHANGES 112 - Store Settings controlled public email addresses. */
a[data-store-email="support"] {
  display: inline-block;
  margin-top: 3px;
}
.click-contact-popup-detail a[data-store-email="support"] {
  display: inline-block;
}

/* CHANGES 118 - Home page mobile-only alignment refinements. */
@media (max-width: 767px) {
  /* Four feature cards directly after the hero: vertically center titles with their icons. */
  .click-home-features .home-feature-card .click-card-heading {
    align-items: center !important;
  }

  /* Shop Click-Aircon: left-align subheading, heading and description. */
  .click-home-products .section-title,
  .click-home-products .section-title .section-description {
    text-align: left !important;
  }

  /* About Click-Aircon: left-align subheading and heading. */
  .click-home-about .section-title {
    text-align: left !important;
  }

  /* Size Calculator: left-align subheading and heading. */
  .click-home-calculator-section .section-title {
    text-align: left !important;
  }

  /* Mission, Vision & Promise section title: left-align subheading and heading. */
  .click-home-purpose-section .section-title,
  .click-home-purpose-section .section-title.text-center {
    text-align: left !important;
  }

  /* Mission, Vision & Promise cards: vertically center each heading with its icon. */
  .click-home-purpose-card .click-card-heading {
    align-items: center !important;
  }

  /* Installer Network: left-align subheading and heading. */
  .click-home-installer-section .section-title {
    text-align: left !important;
  }

  /* Buying Guides: left-align subheading, heading and description. */
  .click-home-guides .section-title,
  .click-home-guides .section-title .section-description {
    text-align: left !important;
  }
}

/* CHANGES 119 - MOBILE ONLY: clean, compact and properly aligned footer. */
@media (max-width: 767px) {
  /* Reduce desktop footer whitespace on phones. */
  .click-footer > .container.section-padding {
    padding-top: 48px !important;
    padding-bottom: 34px !important;
  }

  /* Keep the footer aligned to the same mobile content edges as the site. */
  .click-footer > .container,
  .click-footer > .container.section-padding {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Remove the very large Bootstrap vertical gaps used by desktop. */
  .click-footer .row.g-5 {
    --bs-gutter-y: 30px !important;
    --bs-gutter-x: 18px !important;
  }

  /* Logo remains full quality but sized appropriately for a phone. */
  .click-footer-logo {
    margin-bottom: 0 !important;
  }

  .click-footer-logo img {
    width: 210px !important;
    max-width: 100% !important;
  }

  /* Footer headings and links align consistently to the left. */
  .click-footer h4 {
    margin-bottom: 14px !important;
    text-align: left !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  .click-footer .list-area {
    text-align: left !important;
  }

  .click-footer .list-area li {
    margin-bottom: 8px !important;
    line-height: 1.45 !important;
  }

  .click-footer .list-area li:last-child {
    margin-bottom: 0 !important;
  }

  /* Quick Links and Legal Policies sit neatly alongside one another on mobile. */
  .click-footer .row.g-5 > div:nth-child(2),
  .click-footer .row.g-5 > div:nth-child(3) {
    width: 50% !important;
    flex: 0 0 50% !important;
  }

  /* Logo and Contact retain the full row. */
  .click-footer .row.g-5 > div:nth-child(1),
  .click-footer .row.g-5 > div:nth-child(4) {
    width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Contact rows: align icons and text cleanly and prevent email overflow. */
  .click-footer .row.g-5 > div:nth-child(4) .d-flex {
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .click-footer .footer-contact-icon {
    width: 28px !important;
    min-width: 28px !important;
    flex: 0 0 28px !important;
    padding-top: 1px !important;
  }

  .click-footer .footer-contact-icon svg {
    width: 21px !important;
    height: 21px !important;
  }

  .click-footer .footer-contact-icon + div {
    min-width: 0 !important;
    padding-top: 0 !important;
  }

  .click-footer [data-store-email] {
    display: inline-block !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .click-footer [data-store-email="support"] {
    margin-top: 3px !important;
  }

  /* Compact lower footer and keep both lines centred and readable. */
  .click-footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 16px 0 20px !important;
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  .click-footer-bottom span {
    width: 100% !important;
  }
}

/* Extra-narrow phones: stack the two link columns to avoid cramped text. */
@media (max-width: 359px) {
  .click-footer .row.g-5 > div:nth-child(2),
  .click-footer .row.g-5 > div:nth-child(3) {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* CHANGES 121 - Same functional coupon entry on Checkout as Cart. */
.click-checkout-page .click-checkout-coupon-block {
  margin: 0;
}


/* CHANGES 122 - Cart and Checkout use the exact same coupon component. */
.click-cart-page .click-cart-coupon-block,
.click-checkout-page .click-cart-coupon-block {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 0 18px !important;
  border-top: 1px solid rgba(11, 31, 58, 0.14) !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

.click-cart-page .click-cart-coupon-block label,
.click-checkout-page .click-cart-coupon-block label {
  display: block !important;
  margin: 0 0 9px !important;
  padding: 0 !important;
  color: #0b1f3a !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.click-cart-page .click-cart-coupon-form,
.click-checkout-page .click-cart-coupon-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.click-cart-page .click-cart-coupon-form input,
.click-checkout-page .click-cart-coupon-form input {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  border: 1px solid #cfd9e6 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 48px !important;
  outline: none !important;
  box-shadow: none !important;
}

.click-cart-page .click-cart-coupon-form input:focus,
.click-checkout-page .click-cart-coupon-form input:focus {
  border-color: #005dff !important;
  box-shadow: 0 0 0 2px rgba(0, 93, 255, 0.08) !important;
}

.click-cart-page .click-cart-coupon-form button,
.click-checkout-page .click-cart-coupon-form button {
  box-sizing: border-box !important;
  height: 48px !important;
  min-width: 78px !important;
  margin: 0 !important;
  padding: 0 17px !important;
  border: 1px solid #005dff !important;
  border-radius: 0 !important;
  background: #005dff !important;
  color: #ffffff !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 46px !important;
  font-weight: 700 !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

.click-cart-page .click-cart-coupon-status,
.click-checkout-page .click-cart-coupon-status {
  min-height: 0 !important;
  margin: 7px 0 0 !important;
  padding: 0 !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.click-cart-page .click-cart-coupon-remove,
.click-checkout-page .click-cart-coupon-remove {
  display: inline-block !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #005dff !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

@media (max-width: 420px) {
  .click-cart-page .click-cart-coupon-form,
  .click-checkout-page .click-cart-coupon-form {
    grid-template-columns: 1fr !important;
  }
  .click-cart-page .click-cart-coupon-form button,
  .click-checkout-page .click-cart-coupon-form button {
    width: 100% !important;
  }
}

/* CHANGES 123 - Checkout coupon must visually match the Cart coupon exactly. */
.click-checkout-page .click-cart-coupon-block {
  width: 267px !important;
  max-width: 100% !important;
}
.click-checkout-page .click-cart-coupon-form {
  grid-template-columns: 198px 63px !important;
  gap: 6px !important;
  width: 267px !important;
  max-width: 100% !important;
}
.click-checkout-page .click-cart-coupon-form input {
  width: 198px !important;
  height: 38px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  line-height: 38px !important;
}
.click-checkout-page .click-cart-coupon-form button {
  width: 63px !important;
  min-width: 63px !important;
  height: 38px !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 36px !important;
}
.click-checkout-page .click-cart-coupon-block label {
  margin-bottom: 8px !important;
  font-size: 11px !important;
}
.click-checkout-page .click-cart-coupon-remove {
  margin-top: 7px !important;
  font-size: 11px !important;
}
@media (max-width: 420px) {
  .click-checkout-page .click-cart-coupon-block,
  .click-checkout-page .click-cart-coupon-form {
    width: 100% !important;
  }
  .click-checkout-page .click-cart-coupon-form {
    grid-template-columns: minmax(0, 1fr) 63px !important;
  }
  .click-checkout-page .click-cart-coupon-form input {
    width: 100% !important;
  }
  .click-checkout-page .click-cart-coupon-form button {
    width: 63px !important;
  }
}

/* CHANGES 124 - Checkout coupon row uses the exact Cart-style inline layout.
   It is a div rather than a nested form so the browser cannot break the row. */
.click-checkout-page .click-checkout-coupon-form {
  display: grid !important;
  grid-template-columns: 198px 63px !important;
  column-gap: 6px !important;
  align-items: stretch !important;
  width: 267px !important;
  max-width: 100% !important;
}
.click-checkout-page .click-checkout-coupon-form input {
  display: block !important;
  width: 198px !important;
  height: 38px !important;
}
.click-checkout-page .click-checkout-coupon-form button {
  display: block !important;
  width: 63px !important;
  min-width: 63px !important;
  height: 38px !important;
  margin: 0 !important;
}
@media (max-width: 420px) {
  .click-checkout-page .click-checkout-coupon-form {
    grid-template-columns: minmax(0, 1fr) 63px !important;
    width: 100% !important;
  }
  .click-checkout-page .click-checkout-coupon-form input {
    width: 100% !important;
  }
}

/* CHANGES 127 - Soft raised shadow treatment.
   Keeps the approved motion from Changes 126, while giving cards, images and buttons
   a more visible diffused shadow like the supplied reference. Layout and colours remain unchanged. */

/* Shared motion timings. */
:root {
  --click-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --click-soft-shadow: 0 5px 12px rgba(27, 44, 70, 0.12), 0 14px 28px rgba(27, 44, 70, 0.12);
  --click-soft-shadow-hover: 0 8px 18px rgba(27, 44, 70, 0.16), 0 20px 38px rgba(27, 44, 70, 0.14);
}

/* Soft, diffused card shadow inspired by the supplied raised-card reference. */
.click-card,
.click-product-card,
.click-form-card,
.click-legal-card,
.click-account-card,
.click-installer-card,
.click-guide-card,
.click-shop-feature-card,
.click-shop-product-card {
  box-shadow: var(--click-soft-shadow);
  transition:
    transform 0.28s var(--click-motion-ease),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

@media (hover: hover) and (pointer: fine) {
  .click-card:hover,
  .click-product-card:hover,
  .click-form-card:hover,
  .click-legal-card:hover,
  .click-account-card:hover,
  .click-installer-card:hover,
  .click-guide-card:hover,
  .click-shop-feature-card:hover,
  .click-shop-product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--click-soft-shadow-hover);
  }
}

/* Photo/image depth. Keep transparent product artwork clean by shadowing its wrapper. */
.click-home-about-single-image,
.click-home-info-section .col-lg-6 > img,
.click-guide-image,
.click-installer-image,
.click-product-card .product-image,
.click-shop-product-card .product-image {
  box-shadow: 0 5px 12px rgba(27, 44, 70, 0.12), 0 14px 28px rgba(27, 44, 70, 0.12);
  transition: transform 0.32s var(--click-motion-ease), box-shadow 0.32s ease;
}

.click-home-about-single-image {
  border-radius: 18px;
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .click-home-about-single-image:hover,
  .click-home-info-section .col-lg-6 > img:hover,
  .click-guide-image:hover,
  .click-installer-image:hover,
  .click-product-card .product-image:hover,
  .click-shop-product-card .product-image:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(27, 44, 70, 0.16), 0 20px 38px rgba(27, 44, 70, 0.14);
  }
}

/* Buttons use the same soft raised treatment, scaled down for their smaller size. */
.theme-btn,
.click-small-btn {
  box-shadow: 0 4px 9px rgba(27, 44, 70, 0.14), 0 9px 18px rgba(27, 44, 70, 0.12);
  transition:
    transform 0.24s var(--click-motion-ease),
    box-shadow 0.24s ease,
    background-color 0.24s ease,
    border-color 0.24s ease,
    color 0.24s ease;
}

@media (hover: hover) and (pointer: fine) {
  .theme-btn:hover,
  .click-small-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(27, 44, 70, 0.18), 0 13px 24px rgba(27, 44, 70, 0.15);
  }
}

/* Preserve the approved Home hero styling while adding premium depth. */
.click-home-hero .click-hero-actions .theme-btn {
  box-shadow: 0 5px 11px rgba(0, 30, 80, 0.18), 0 13px 26px rgba(0, 30, 80, 0.16);
}

.click-home-hero .click-hero-showcase img {
  box-shadow: 0 8px 18px rgba(0, 30, 80, 0.16), 0 24px 50px rgba(0, 30, 80, 0.18);
  transition: transform 0.45s var(--click-motion-ease), box-shadow 0.45s ease;
}

@media (hover: hover) and (pointer: fine) {
  .click-home-hero .click-hero-showcase:hover img {
    transform: translateY(-4px) scale(1.008);
    box-shadow: 0 10px 22px rgba(0, 30, 80, 0.20), 0 30px 58px rgba(0, 30, 80, 0.22);
  }

  .click-home-hero .click-hero-benefits .infu {
    transition: transform 0.25s var(--click-motion-ease), background-color 0.25s ease;
  }

  .click-home-hero .click-hero-benefits .infu:hover {
    transform: translateY(-2px);
  }
}

/* Home hero entry sequence. */
@keyframes clickHeroTextIn {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes clickHeroImageIn {
  from {
    opacity: 0;
    transform: translate3d(34px, 12px, 0) scale(0.965);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes clickHeroBenefitsIn {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.click-home-hero .click-hero-kicker {
  animation: clickHeroTextIn 0.62s var(--click-motion-ease) 0.08s both;
}

.click-home-hero .hero-content h1 {
  animation: clickHeroTextIn 0.78s var(--click-motion-ease) 0.16s both;
}

.click-home-hero .hero-content > p {
  animation: clickHeroTextIn 0.72s var(--click-motion-ease) 0.28s both;
}

.click-home-hero .click-hero-actions {
  animation: clickHeroTextIn 0.72s var(--click-motion-ease) 0.38s both;
}

.click-home-hero .click-hero-showcase {
  animation: clickHeroImageIn 0.92s var(--click-motion-ease) 0.20s both;
}

.click-home-hero .click-hero-benefits {
  animation: clickHeroBenefitsIn 0.78s var(--click-motion-ease) 0.52s both;
}

/* Internal page heroes use a smaller entrance so Home remains the main focal point. */
.click-page-hero h1,
.click-page-hero p,
.click-page-hero .click-breadcrumbs {
  animation: clickHeroTextIn 0.68s var(--click-motion-ease) both;
}

.click-page-hero p {
  animation-delay: 0.09s;
}

.click-page-hero .click-breadcrumbs {
  animation-delay: 0.16s;
}

/* Elements below the fold are activated by IntersectionObserver in the shared JS. */
.click-scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.66s var(--click-motion-ease) var(--click-reveal-delay, 0ms),
    transform 0.66s var(--click-motion-ease) var(--click-reveal-delay, 0ms);
  will-change: opacity, transform;
}

.click-scroll-reveal.click-reveal-from-left {
  transform: translate3d(-24px, 0, 0);
}

.click-scroll-reveal.click-reveal-from-right {
  transform: translate3d(24px, 0, 0);
}

.click-scroll-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* Respect reduced-motion preferences and keep all content immediately visible. */
@media (prefers-reduced-motion: reduce) {
  .click-home-hero .click-hero-kicker,
  .click-home-hero .hero-content h1,
  .click-home-hero .hero-content > p,
  .click-home-hero .click-hero-actions,
  .click-home-hero .click-hero-showcase,
  .click-home-hero .click-hero-benefits,
  .click-page-hero h1,
  .click-page-hero p,
  .click-page-hero .click-breadcrumbs {
    animation: none !important;
  }

  .click-scroll-reveal,
  .click-scroll-reveal.click-reveal-from-left,
  .click-scroll-reveal.click-reveal-from-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .theme-btn,
  .click-small-btn,
  .click-card,
  .click-product-card,
  .click-form-card,
  .click-legal-card,
  .click-account-card,
  .click-installer-card,
  .click-guide-card,
  .click-shop-feature-card,
  .click-shop-product-card,
  .click-home-about-single-image,
  .click-home-info-section .col-lg-6 > img,
  .click-guide-image,
  .click-installer-image,
  .click-product-card .product-image,
  .click-shop-product-card .product-image,
  .click-home-hero .click-hero-showcase img {
    transition: none !important;
  }
}

/* CHANGES 129 - Home feature blocks: retain icy-blue cards and use the site's body-text colour.
   Scope is intentionally limited to the four feature cards directly below the Home hero. */
.click-home-features .home-feature-card {
  background: var(--click-cyan);
  border: 0;
  color: var(--click-text);
}

.click-home-features .home-feature-card h4,
.click-home-features .home-feature-card p,
.click-home-features .home-feature-card a {
  color: var(--click-text);
}

.click-home-features .home-feature-card .feature-icon {
  background: rgba(255, 255, 255, 0.20);
  color: var(--click-text);
}

.click-home-features .home-feature-card a {
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  .click-home-features .home-feature-card:hover {
    border: 0;
  }
}

/* CHANGES 130 - Home feature icons now match the site body-text colour. */

/* CHANGES 131 - Home feature blocks: user-supplied deep blue with white content.
   Scope remains limited to the four feature cards directly below the Home hero. */
.click-home-features .home-feature-card {
  background: #062656;
  border: 0;
  color: #ffffff;
}

.click-home-features .home-feature-card h4,
.click-home-features .home-feature-card p,
.click-home-features .home-feature-card a {
  color: #ffffff;
}

.click-home-features .home-feature-card .feature-icon {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.click-home-features .home-feature-card .feature-icon svg {
  color: #ffffff;
}

.click-home-purpose-section .section-title .section-description {
  max-width: 760px;
  margin: 18px auto 0;
}

@media (hover: hover) and (pointer: fine) {
  .click-home-features .home-feature-card:hover {
    background: #062656;
    border: 0;
  }
}


/* CHANGES 132 - Section introduction above the four feature blocks directly below the Home hero. */
.click-home-features .click-home-features-intro .section-description {
  max-width: 760px;
  margin: 18px auto 0;
}

/* CHANGES 133 - Mission, Vision & Promise cards match the deep-blue Home feature blocks. */
.click-home-purpose-section .click-home-purpose-card {
  background: #062656;
  border: 0;
  color: #ffffff;
}

.click-home-purpose-section .click-home-purpose-card h4,
.click-home-purpose-section .click-home-purpose-card p {
  color: #ffffff;
}

.click-home-purpose-section .click-home-purpose-card .feature-icon {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.click-home-purpose-section .click-home-purpose-card .feature-icon svg {
  color: #ffffff;
}

@media (hover: hover) and (pointer: fine) {
  .click-home-purpose-section .click-home-purpose-card:hover {
    background: #062656;
    border: 0;
  }
}

/* CHANGES 134 - Our Foundation description spans the full Home section width. */
.click-home-purpose-section .section-title,
.click-home-purpose-section .section-title.text-center {
  max-width: none;
  width: 100%;
}

.click-home-purpose-section .section-title h2 {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.click-home-purpose-section .section-title .section-description {
  max-width: none;
  width: 100%;
  margin: 18px 0 0;
}

/* CHANGES 135 - Light blue borders on content blocks only.
   Backgrounds, text, icons, shadows, spacing and animations remain unchanged. */
:root {
  --click-block-border-light: #b8eeff;
}

.click-card,
.click-product-card,
.click-form-card,
.click-legal-card,
.click-account-card,
.click-installer-card,
.click-guide-card,
.click-shop-feature-card,
.click-shop-product-card,
.click-shop-category-sidebar,
.click-faq-page .click-faq-shell,
.click-faq-page .click-accordion-item,
.click-installer-page .click-installer-search-card,
.click-installer-page .click-installer-match-card,
.click-size-calculator-page #size-calculator-form,
.click-checkout-page #checkout-form,
.click-checkout-page .click-checkout-summary {
  border-color: var(--click-block-border-light) !important;
}


/* CHANGES 136 - Product photos only: remove the image-wrapper shadow.
   Product card shadows, borders, spacing and hover motion remain unchanged. */
.click-product-card .product-image,
.click-shop-product-card .product-image {
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .click-product-card .product-image:hover,
  .click-shop-product-card .product-image:hover {
    box-shadow: none !important;
  }
}

/* CHANGES 137 - About Us: restore soft raised shadow on the Who We Are image only. */
.click-about-page .click-about-who .col-lg-6 > img {
  box-shadow: 0 5px 12px rgba(27, 44, 70, 0.12), 0 14px 28px rgba(27, 44, 70, 0.12);
  transition: transform 0.32s var(--click-motion-ease), box-shadow 0.32s ease;
}

@media (hover: hover) and (pointer: fine) {
  .click-about-page .click-about-who .col-lg-6 > img:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(27, 44, 70, 0.16), 0 20px 38px rgba(27, 44, 70, 0.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  .click-about-page .click-about-who .col-lg-6 > img {
    transition: none !important;
  }
}

/* CHANGES 138 - live product suggestions for the existing desktop header search. */
.click-live-search-results {
  position: fixed;
  z-index: 10050;
  display: none;
  overflow: hidden;
  border: 1px solid rgba(11, 31, 58, 0.12);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(11, 31, 58, 0.20);
  font-family: "Poppins", Arial, sans-serif;
}

.click-live-search-results.is-open {
  display: block;
}

.click-live-search-list {
  margin: 0;
  padding: 7px;
  list-style: none;
}

.click-live-search-item + .click-live-search-item {
  border-top: 1px solid rgba(11, 31, 58, 0.08);
}

.click-live-search-link {
  display: block;
  padding: 10px 11px;
  border-radius: 9px;
  color: var(--click-navy);
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease;
}

.click-live-search-link:hover,
.click-live-search-link:focus,
.click-live-search-link.is-active {
  background: rgba(0, 93, 255, 0.08);
  color: var(--click-navy);
  outline: 0;
}

.click-live-search-name {
  display: block;
  margin-bottom: 3px;
  color: var(--click-navy);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.click-live-search-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(11, 31, 58, 0.68);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.click-live-search-price {
  flex: 0 0 auto;
  color: var(--click-blue);
  font-weight: 700;
}

.click-live-search-message {
  padding: 15px 16px;
  color: rgba(11, 31, 58, 0.72);
  font-size: 12px;
  line-height: 1.5;
}

.click-live-search-all {
  display: block;
  padding: 11px 14px;
  border-top: 1px solid rgba(11, 31, 58, 0.09);
  background: rgba(0, 93, 255, 0.045);
  color: var(--click-blue);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.click-live-search-all:hover,
.click-live-search-all:focus {
  background: rgba(0, 93, 255, 0.09);
  color: var(--click-blue);
}

@media (max-width: 1199px) {
  .click-live-search-results {
    display: none !important;
  }
}

/* CHANGES 141 - Mobile horizontal overflow fix.
   Keep the document viewport contained, move the off-canvas menu with transform
   instead of placing it outside the page, and avoid sideways reveal motion on phones. */
html,
body,
.page-wrapper {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body,
  .page-wrapper {
    overflow-x: clip;
  }
}

@media (max-width: 767px) {
  .click-mobile-panel {
    right: 0;
    transform: translate3d(110%, 0, 0);
    transition: transform 0.25s ease;
  }

  .click-mobile-panel.open {
    right: 0;
    transform: translate3d(0, 0, 0);
  }

  .click-scroll-reveal.click-reveal-from-left,
  .click-scroll-reveal.click-reveal-from-right {
    transform: translate3d(0, 22px, 0);
  }

  .click-scroll-reveal.click-reveal-from-left.is-visible,
  .click-scroll-reveal.click-reveal-from-right.is-visible {
    transform: translate3d(0, 0, 0);
  }

  img,
  video,
  canvas,
  iframe {
    max-width: 100%;
  }
}

/* Changes 142: client-supplied product catalogue */
.click-product-card .product-image img,
.click-single-product-image-block img { object-fit: contain; background: #fff; }
.click-product-card .product-image img { width: 100%; height: 220px; padding: 16px; }
.click-single-product-image-block img { width: 100%; max-height: 520px; padding: 24px; }
.click-catalogue-loading { margin: 0; padding: 22px; text-align: center; color: #667085; }


/* Changes 147: checkout delivery / collection choice */
.click-fulfilment-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0 22px}.click-fulfilment-option{display:flex;gap:12px;align-items:flex-start;border:1px solid #d8e2ee;border-radius:12px;padding:17px;background:#fff;cursor:pointer;transition:.2s ease}.click-fulfilment-option:hover,.click-fulfilment-option.is-selected{border-color:#005DFF;box-shadow:0 0 0 3px rgba(0,93,255,.08)}.click-fulfilment-option input{margin-top:4px;accent-color:#005DFF}.click-fulfilment-option span{display:flex;flex-direction:column;gap:3px}.click-fulfilment-option strong{color:#0B1F3A}.click-fulfilment-option small{color:#66758b;line-height:1.45}.click-pickup-notice{margin:0 0 22px;padding:17px 18px;border-radius:12px;background:#eef6ff;border:1px solid #cfe2ff}.click-pickup-notice strong,.click-pickup-notice span,.click-pickup-notice small{display:block}.click-pickup-notice span{font-weight:700;color:#0B1F3A;margin:4px 0}.click-pickup-notice small{color:#66758b;line-height:1.45}@media(max-width:767px){.click-fulfilment-options{grid-template-columns:1fr}}

/* Changes 152 - installer booking workflow */
body.click-booking-modal-open{overflow:hidden}
.click-booking-modal-backdrop{position:fixed;inset:0;z-index:99999;background:rgba(8,24,54,.72);display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}
.click-booking-modal{position:relative;width:min(760px,100%);max-height:calc(100vh - 48px);overflow:auto;background:#fff;border:1px solid #d8e3f3;border-radius:20px;box-shadow:0 28px 80px rgba(10,28,61,.28);padding:32px}
.click-booking-close{position:absolute;top:16px;right:18px;width:40px;height:40px;border:0;border-radius:50%;background:#eef4ff;color:#0b1f3a;font-size:28px;line-height:1;cursor:pointer}
.click-booking-modal h3{font-size:30px;line-height:1.15;margin:16px 48px 8px 0;color:#081b54}
.click-booking-intro{margin:0 0 22px;color:#536175}
.click-booking-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.click-booking-grid label{display:flex;flex-direction:column;gap:7px;font-weight:700;color:#0b1f3a}
.click-booking-grid input,.click-booking-grid textarea,.click-booking-grid select{width:100%;border:1px solid #cfdaea;border-radius:10px;background:#fff;color:#0b1f3a;padding:12px 14px;font:inherit;outline:none}
.click-booking-grid input:focus,.click-booking-grid textarea:focus,.click-booking-grid select:focus{border-color:#005dff;box-shadow:0 0 0 3px rgba(0,93,255,.1)}
.click-booking-grid small{font-weight:400;color:#6a7687}
.click-booking-full{grid-column:1/-1}
.click-booking-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.click-booking-actions{display:flex;justify-content:flex-end;gap:12px;align-items:center;margin-top:22px;flex-wrap:wrap}
.click-booking-cancel{border:1px solid #cbd8e9;background:#fff;color:#0b1f3a;border-radius:10px;padding:12px 18px;font-weight:700;cursor:pointer}
.click-booking-status{min-height:24px;margin-top:14px;font-weight:700}
.click-booking-status.success{color:#138a4b}.click-booking-status.warning{color:#a36500}.click-booking-status.error{color:#c62828}
@media(max-width:700px){.click-booking-modal-backdrop{padding:12px;align-items:flex-start}.click-booking-modal{padding:24px 18px;margin-top:12px;max-height:calc(100vh - 24px);border-radius:16px}.click-booking-grid{grid-template-columns:1fr}.click-booking-full{grid-column:auto}.click-booking-modal h3{font-size:24px}.click-booking-actions>*{width:100%}}


/* Changes 163 - Become an Installer */
.click-installer-join-intro p{color:#536175;font-size:17px;line-height:1.8}
.click-installer-join-image{border-radius:22px;overflow:hidden;box-shadow:0 20px 55px rgba(11,31,58,.16);min-height:360px;background:#eef5ff}
.click-installer-join-image img{display:block;width:100%;height:100%;min-height:360px;object-fit:cover}
.click-installer-membership-note{margin-top:24px;padding:20px 22px;border:1px solid #b9d7ff;border-radius:16px;background:#eef6ff;display:flex;flex-direction:column;gap:5px;color:#0b1f3a}
.click-installer-membership-note strong{font-size:19px;color:#005dff}.click-installer-membership-note span{line-height:1.6;color:#536175}
.click-installer-application-card{max-width:none}.click-installer-application-card .section-title p{color:#66758b;margin-top:10px}
.click-installer-application-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.click-installer-application-grid label{display:flex;flex-direction:column;gap:8px;color:#0b1f3a;font-weight:700}
.click-installer-application-grid textarea.click-input{min-height:120px;resize:vertical}
.click-installer-application-full{grid-column:1/-1}.click-installer-application-consent{flex-direction:row!important;align-items:flex-start!important;padding:16px 18px;border:1px solid #d6e2f2;border-radius:12px;background:#fff;font-weight:500!important;line-height:1.55}.click-installer-application-consent input{margin-top:4px;accent-color:#005dff;flex:0 0 auto}.click-installer-application-actions{margin-top:24px}.click-installer-application-status{min-height:25px;margin-top:16px;font-weight:700}.click-installer-application-status.success{color:#138a4b}.click-installer-application-status.error{color:#c62828}.click-installer-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important}
@media(max-width:767px){.click-installer-application-grid{grid-template-columns:1fr}.click-installer-application-full{grid-column:auto}.click-installer-join-image,.click-installer-join-image img{min-height:260px}}

/* CHANGES 167 - Match All Air Conditioners hero to the standard blue internal-page hero. */
.click-all-air-conditioners-hero {
  min-height: 330px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background-image: linear-gradient(115deg, #071a34 0%, #0b1f3a 38%, #005dff 72%, #b8eeff 100%) !important;
  background-size: cover !important;
  background-position: center !important;
  text-align: center !important;
}
.click-all-air-conditioners-hero::before {
  content: none !important;
  display: none !important;
}
.click-all-air-conditioners-hero .row {
  justify-content: center !important;
}
.click-all-air-conditioners-hero .col-lg-9 {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
.click-all-air-conditioners-hero h1 {
  font-size: clamp(48px, 4.05vw, 68px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.03 !important;
  color: #fff !important;
}
.click-all-air-conditioners-hero p {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: #fff !important;
}
.click-all-air-conditioners-hero .click-breadcrumbs {
  justify-content: center !important;
  color: rgba(255,255,255,.8) !important;
}
.click-all-air-conditioners-hero .click-breadcrumbs a,
.click-all-air-conditioners-hero .click-breadcrumbs span {
  color: #fff !important;
}
@media (max-width: 767px) {
  .click-all-air-conditioners-hero { min-height: 280px !important; }
  .click-all-air-conditioners-hero h1 { font-size: clamp(38px, 11vw, 52px) !important; }
}

/* Changes 169 - Align Become an Installer image with intro content */
.click-installer-join-intro .row{align-items:flex-start!important}
.click-installer-join-image{margin-top:0!important}

/* Changes 170 - Match Become an Installer image height to intro content */
.click-installer-join-intro .row{
  align-items:stretch!important;
}
.click-installer-join-intro .col-lg-6{
  display:flex;
  flex-direction:column;
}
.click-installer-join-intro .col-lg-6:last-child{
  align-self:stretch;
}
.click-installer-join-intro .click-installer-join-image{
  flex:1 1 auto;
  min-height:0!important;
  height:100%!important;
  margin-top:0!important;
}
.click-installer-join-intro .click-installer-join-image img{
  width:100%;
  height:100%!important;
  min-height:0!important;
  object-fit:cover;
}
@media(max-width:991px){
  .click-installer-join-intro .col-lg-6{display:block}
  .click-installer-join-intro .click-installer-join-image,
  .click-installer-join-intro .click-installer-join-image img{
    height:auto!important;
    min-height:260px!important;
  }
}

/* Changes 171 - Exact equal-height installer intro columns */
@media (min-width: 992px) {
  .click-installer-join-intro .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: stretch !important;
  }
  .click-installer-join-intro .row > .col-lg-6 {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
  }
  .click-installer-join-intro .row > .col-lg-6:last-child {
    position: relative;
    min-height: 0;
  }
  .click-installer-join-intro .click-installer-join-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  .click-installer-join-intro .click-installer-join-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover;
  }
}

/* Changes 172 - Nudge installer intro image crop down slightly so the face is fully visible. */
@media (min-width: 992px) {
  .click-installer-join-intro .click-installer-join-image img {
    object-position: center 28% !important;
  }
}


/* CHANGES 173 - Apply button for All Air Conditioners product filters. */
.click-filter-grid[data-aircon-filters] {
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: stretch;
}
.click-filter-button {
  min-width: 155px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
}
@media (max-width: 1199px) {
  .click-filter-grid[data-aircon-filters] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .click-filter-button {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .click-filter-grid[data-aircon-filters] {
    grid-template-columns: 1fr;
  }
}

/* Changes 174 - Installer application success page */
.click-installer-success-section{min-height:520px}
.click-installer-success-card{background:#fff;border:1px solid #d7e6f7;border-radius:20px;padding:48px;box-shadow:0 18px 45px rgba(11,31,58,.08);text-align:center}
.click-installer-success-icon{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;background:#eaf8f0;color:#138a4b}
.click-installer-success-icon svg{width:38px;height:38px}
.click-installer-success-card h2{color:#07195c;margin:14px auto 14px;max-width:760px}
.click-installer-success-lead{max-width:760px;margin:0 auto 26px;color:#5e6c80;font-size:17px;line-height:1.7}
.click-installer-success-reference{display:inline-flex;flex-direction:column;gap:4px;padding:12px 20px;margin-bottom:28px;border-radius:12px;background:#eef6ff;border:1px solid #b9d7ff;color:#0b1f3a}
.click-installer-success-reference[hidden]{display:none!important}
.click-installer-success-reference span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#005dff}
.click-installer-success-reference strong{font-size:16px}
.click-installer-success-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;text-align:left;margin:4px 0 26px}
.click-installer-success-step{display:flex;gap:14px;padding:20px;border:1px solid #dfe8f4;border-radius:14px;background:#fbfdff}
.click-installer-success-step>span{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#005dff;color:#fff;font-weight:800}
.click-installer-success-step strong{display:block;color:#0b1f3a;margin-bottom:4px}
.click-installer-success-step p{margin:0;color:#66758b;line-height:1.55}
.click-installer-success-note{display:flex;flex-direction:column;gap:5px;padding:18px 20px;border-radius:14px;background:#eef6ff;border:1px solid #b9d7ff;color:#0b1f3a;text-align:left}
.click-installer-success-note strong{color:#005dff}
.click-installer-success-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}
@media(max-width:767px){.click-installer-success-card{padding:30px 20px}.click-installer-success-steps{grid-template-columns:1fr}.click-installer-success-actions .theme-btn{width:100%;text-align:center;justify-content:center}}

/* Changes 177 - product sale pricing */
.click-sale-price{font-weight:800;color:inherit;margin-right:10px}.click-regular-price{opacity:.58;font-size:.9em}.product-price .click-sale-price{display:inline-block}.product-price .click-regular-price{display:inline-block}


/* Product gallery thumbnails */
.click-product-gallery-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}.click-product-gallery-thumb{border:1px solid #dbe5f0;background:#fff;border-radius:10px;padding:5px;cursor:pointer;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}.click-product-gallery-thumb img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:7px}.click-product-gallery-thumb:hover,.click-product-gallery-thumb.is-active{border-color:#0d6efd;box-shadow:0 0 0 2px rgba(13,110,253,.12)}@media(max-width:600px){.click-product-gallery-thumbs{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}