/* Pool Perfectionists global brand system
 * Reference: premium homepage design, September 2026
 * Keeps typography, colour and sizing consistent across legacy and newer templates.
 */

:root {
  --pp-brand-blue: #087fc4;
  --pp-brand-blue-dark: #005f9e;
  --pp-brand-navy: #06345f;
  --pp-brand-text: #0a3155;
  --pp-brand-muted: #5d7488;
  --pp-brand-sky: #eaf7fd;
  --pp-brand-pale: #f6fbfe;
  --pp-brand-line: #d9e9f2;
  --pp-brand-yellow: #f3bb2d;
  --pp-brand-white: #ffffff;
  --pp-brand-font: "Poppins", "Avenir Next", Arial, sans-serif;
  --pp-type-body: 16px;
  --pp-type-small: 13px;
  --pp-type-h1: clamp(2.35rem, 4.4vw, 4rem);
  --pp-type-h2: clamp(1.9rem, 3.2vw, 3rem);
  --pp-type-h3: 1.35rem;
  --pp-type-h4: 1.1rem;

  /* Bring the legacy theme tokens onto the current brand palette. */
  --first-theme-color: var(--pp-brand-blue);
  --second-theme-color: var(--pp-brand-navy);
}

html {
  font-size: 16px;
}

body,
button,
input,
select,
textarea {
  font-family: var(--pp-brand-font) !important;
}

body {
  color: var(--pp-brand-text);
  font-size: var(--pp-type-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p,
li {
  font-size: var(--pp-type-body);
  line-height: 1.65;
}

p {
  color: var(--pp-brand-muted);
}

a {
  color: var(--pp-brand-blue);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--pp-brand-font) !important;
  color: var(--pp-brand-navy);
  font-weight: 800;
  letter-spacing: -0.025em;
}

h1 {
  font-size: var(--pp-type-h1);
  line-height: 1.02;
}

h2 {
  font-size: var(--pp-type-h2);
  line-height: 1.08;
}

h3 {
  font-size: var(--pp-type-h3);
  line-height: 1.2;
}

h4 {
  font-size: var(--pp-type-h4);
  line-height: 1.3;
}

button,
input[type="submit"],
.button,
.wp-element-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  font-family: var(--pp-brand-font) !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

/* Header and navigation use the same type system everywhere. */
.header-box,
.header-box a,
.primary-navigation,
.primary-navigation a,
.main-navigation,
.main-navigation a {
  font-family: var(--pp-brand-font) !important;
}

.primary-navigation > ul > li > a,
.main-navigation > ul > li > a {
  font-size: 15px;
  font-weight: 600;
}

/* WooCommerce: consistent hierarchy across shop, categories and products. */
.woocommerce,
.woocommerce-page,
.woocommerce .product,
.woocommerce-page .product {
  font-family: var(--pp-brand-font) !important;
}

body.single-product .product_title,
body.post-type-archive-product .page-title,
body.tax-product_cat .page-title,
body.tax-product_tag .page-title {
  color: var(--pp-brand-navy) !important;
  font-family: var(--pp-brand-font) !important;
  font-size: clamp(2.1rem, 3.8vw, 3.25rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--pp-brand-navy);
  font-family: var(--pp-brand-font) !important;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.3;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--pp-brand-font) !important;
}

.woocommerce-product-details__short-description,
.woocommerce-Tabs-panel,
.term-description {
  color: var(--pp-brand-muted);
  font-size: var(--pp-type-body);
  line-height: 1.65;
}

.woocommerce-Tabs-panel h2,
.woocommerce-Tabs-panel h3,
.woocommerce-Tabs-panel h4,
.woocommerce-product-details__short-description h2,
.woocommerce-product-details__short-description h3,
.woocommerce-product-details__short-description h4,
.term-description h2,
.term-description h3 {
  color: var(--pp-brand-navy);
  font-family: var(--pp-brand-font) !important;
}

/* Current premium homepage is the visual reference. */
.ppm2 {
  font-family: var(--pp-brand-font) !important;
}

/* Older maintenance / upgrades design: remap it to the current brand. */
#pp-upgrades-v2 {
  --pp-navy: var(--pp-brand-navy) !important;
  --pp-navy-2: var(--pp-brand-text) !important;
  --pp-blue: var(--pp-brand-blue) !important;
  --pp-cyan: var(--pp-brand-blue) !important;
  --pp-sky: var(--pp-brand-sky) !important;
  --pp-ice: var(--pp-brand-pale) !important;
  --pp-ink: var(--pp-brand-text) !important;
  --pp-muted: var(--pp-brand-muted) !important;
  --pp-line: var(--pp-brand-line) !important;
  font-family: var(--pp-brand-font) !important;
}

/* Suburb template: same palette and type scale as the homepage. */
.pp-suburb {
  --pp-suburb-navy: var(--pp-brand-navy) !important;
  --pp-suburb-blue: var(--pp-brand-blue) !important;
  --pp-suburb-aqua: var(--pp-brand-blue) !important;
  --pp-suburb-sky: var(--pp-brand-sky) !important;
  --pp-suburb-ink: var(--pp-brand-text) !important;
  --pp-suburb-muted: var(--pp-brand-muted) !important;
  --pp-suburb-line: var(--pp-brand-line) !important;
  font-family: var(--pp-brand-font) !important;
}

/* Beatbot comparison template: retain model accents, standardise core brand colours. */
.pp-sora-page {
  --pp-navy: var(--pp-brand-navy) !important;
  --pp-blue: var(--pp-brand-blue) !important;
  --pp-sky: var(--pp-brand-sky) !important;
  --pp-ink: var(--pp-brand-text) !important;
  --pp-muted: var(--pp-brand-muted) !important;
  --pp-line: var(--pp-brand-line) !important;
  --pp-soft: var(--pp-brand-pale) !important;
  font-family: var(--pp-brand-font) !important;
}

/* Other custom service/upgrade layouts. */
.pp-service-page,
.landing-page.pool-upgrades,
.pp-robot-guide {
  font-family: var(--pp-brand-font) !important;
}

.landing-page.pool-upgrades {
  --pp-text: var(--pp-brand-text) !important;
  --pp-muted: var(--pp-brand-muted) !important;
  --pp-panel: var(--pp-brand-pale) !important;
  --pp-accent: var(--pp-brand-blue) !important;
  --pp-accent-2: var(--pp-brand-blue-dark) !important;
}

/* One shared heading scale for custom page families. */
#pp-upgrades-v2 h1,
.pp-suburb__hero h1,
.pp-sora-hero h1,
.pp-service-page h1,
.landing-page.pool-upgrades h1 {
  font-family: var(--pp-brand-font) !important;
  font-size: var(--pp-type-h1) !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.02 !important;
}

#pp-upgrades-v2 h2,
.pp-suburb h2,
.pp-sora-page .pp-sora-h2,
.pp-sora-page .pp-sora-cta h2,
.pp-service-page h2,
.landing-page.pool-upgrades h2 {
  font-family: var(--pp-brand-font) !important;
  font-size: var(--pp-type-h2) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.08 !important;
}

#pp-upgrades-v2 h3,
.pp-suburb h3,
.pp-sora-page h3,
.pp-service-page h3,
.landing-page.pool-upgrades h3 {
  font-family: var(--pp-brand-font) !important;
  font-size: var(--pp-type-h3) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* Keep lead copy consistent without flattening intentionally small card copy. */
#pp-upgrades-v2 .pp-lead,
#pp-upgrades-v2 .pp-hero-copy p,
.pp-suburb__lead,
.pp-sora-lead,
.pp-sora-hero > .pp-sora-wrap > div > p,
.pp-service-page .pp-lead,
.landing-page.pool-upgrades .hero-subtitle,
.landing-page.pool-upgrades .section-lead {
  font-family: var(--pp-brand-font) !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
}

/* Keep the same compact button typography used on the premium homepage. */
#pp-upgrades-v2 .pp-btn,
.pp-suburb__button,
.pp-sora-btn,
.pp-service-page .pp-btn,
.landing-page.pool-upgrades .btn {
  font-family: var(--pp-brand-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* Footer typography stays compact but on-brand. */
.footer-wp,
.footer-wp p,
.footer-wp li,
.footer-wp a,
.site-footer,
.site-footer p,
.site-footer li,
.site-footer a {
  font-family: var(--pp-brand-font) !important;
}

@media (max-width: 767px) {
  :root {
    --pp-type-h1: clamp(2.1rem, 10vw, 3.35rem);
    --pp-type-h2: clamp(1.75rem, 7.5vw, 2.55rem);
    --pp-type-h3: 1.25rem;
  }

  body {
    font-size: 15px;
  }

  p,
  li {
    font-size: 15px;
  }

  #pp-upgrades-v2 .pp-lead,
  #pp-upgrades-v2 .pp-hero-copy p,
  .pp-suburb__lead,
  .pp-sora-lead,
  .pp-sora-hero > .pp-sora-wrap > div > p,
  .pp-service-page .pp-lead,
  .landing-page.pool-upgrades .hero-subtitle,
  .landing-page.pool-upgrades .section-lead {
    font-size: 16px !important;
  }
}

/* =========================================================
   SERVICE PAGE FAMILY — PREMIUM HOMEPAGE ALIGNMENT
   Applies to every page using .pp-service-page.
   High-specificity rules intentionally beat older inline page CSS.
   ========================================================= */

html body .pp-service-page {
  --pp-navy: var(--pp-brand-navy) !important;
  --pp-navy-2: var(--pp-brand-text) !important;
  --pp-blue: var(--pp-brand-blue) !important;
  --pp-blue-dark: var(--pp-brand-blue-dark) !important;
  --pp-sky: var(--pp-brand-sky) !important;
  --pp-ink: var(--pp-brand-text) !important;
  --pp-muted: var(--pp-brand-muted) !important;
  --pp-line: var(--pp-brand-line) !important;
  --pp-soft: var(--pp-brand-pale) !important;
  --pp-white: #ffffff !important;
  --pp-spring: var(--pp-brand-yellow) !important;
  --pp-radius: 10px !important;
  --pp-radius-sm: 8px !important;
  --pp-shadow: 0 14px 36px rgba(5,55,91,.08) !important;
  font-family: var(--pp-brand-font) !important;
  color: var(--pp-brand-text) !important;
  background: #fff !important;
}

html body .pp-service-page,
html body .pp-service-page p,
html body .pp-service-page li,
html body .pp-service-page span,
html body .pp-service-page a,
html body .pp-service-page button {
  font-family: var(--pp-brand-font) !important;
}

html body .pp-service-page .pp-container {
  width: min(1180px, calc(100% - 40px)) !important;
}

html body .pp-service-page .pp-section {
  padding: 72px 0 !important;
}

html body .pp-service-page .pp-section.pp-soft {
  background: var(--pp-brand-pale) !important;
}

html body .pp-service-page .pp-section.pp-sky {
  background: var(--pp-brand-sky) !important;
}

html body .pp-service-page h1,
html body .pp-service-page h2,
html body .pp-service-page h3,
html body .pp-service-page h4 {
  font-family: var(--pp-brand-font) !important;
  color: var(--pp-brand-navy) !important;
  letter-spacing: -0.04em !important;
}

html body .pp-service-page h1 {
  font-size: clamp(2.65rem, 4.7vw, 4.55rem) !important;
  line-height: .98 !important;
  font-weight: 800 !important;
}

html body .pp-service-page h2 {
  font-size: clamp(2rem, 3.5vw, 3.25rem) !important;
  line-height: 1.04 !important;
  font-weight: 800 !important;
}

html body .pp-service-page h3 {
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}

html body .pp-service-page p {
  color: var(--pp-brand-muted) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

html body .pp-service-page .pp-section-head {
  max-width: 760px !important;
  margin-bottom: 34px !important;
}

html body .pp-service-page .pp-section-head p {
  font-size: 16px !important;
}

html body .pp-service-page .pp-eyebrow {
  gap: 0 !important;
  margin-bottom: 14px !important;
  color: var(--pp-brand-blue) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

html body .pp-service-page .pp-eyebrow::before {
  display: none !important;
}

/* Hero: same light, premium, photography-led treatment as the homepage. */
html body .pp-service-page .pp-hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-bottom: 1px solid var(--pp-brand-line) !important;
  background: linear-gradient(180deg,#fff 0%,#f8fcfe 100%) !important;
  color: var(--pp-brand-text) !important;
}

html body .pp-service-page .pp-hero-grid {
  min-height: 520px !important;
  grid-template-columns: minmax(0,1.02fr) minmax(390px,.98fr) !important;
  gap: 54px !important;
  padding-top: 46px !important;
  padding-bottom: 50px !important;
}

html body .pp-service-page .pp-hero h1,
html body .pp-service-page .pp-hero h2,
html body .pp-service-page .pp-hero h3 {
  color: var(--pp-brand-blue) !important;
}

html body .pp-service-page .pp-hero .pp-hero-copy > p {
  max-width: 650px !important;
  margin-bottom: 22px !important;
  color: #36566f !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

html body .pp-service-page .pp-hero .pp-eyebrow {
  color: var(--pp-brand-blue) !important;
}

html body .pp-service-page .pp-hero-img {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  box-shadow: 0 18px 44px rgba(5,55,91,.13) !important;
}

html body .pp-service-page .pp-image-note {
  right: 14px !important;
  bottom: 14px !important;
  max-width: 300px !important;
  padding: 10px 13px !important;
  border: 1px solid rgba(255,255,255,.68) !important;
  border-radius: 5px !important;
  background: rgba(255,255,255,.92) !important;
  color: var(--pp-brand-navy) !important;
  box-shadow: 0 6px 18px rgba(5,55,91,.10) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* Compact proof pills, no oversized rounded-chip look. */
html body .pp-service-page .pp-pill-row {
  gap: 8px !important;
  margin: 20px 0 25px !important;
}

html body .pp-service-page .pp-pill,
html body .pp-service-page .pp-hero .pp-hero-copy span.pp-pill {
  min-height: 32px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--pp-brand-line) !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: var(--pp-brand-navy) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  backdrop-filter: none !important;
}

html body .pp-service-page .pp-pill svg,
html body .pp-service-page .pp-hero .pp-hero-copy span.pp-pill svg {
  width: 14px !important;
  height: 14px !important;
  stroke: var(--pp-brand-blue) !important;
}

/* Buttons follow the premium homepage: compact, square-edged, clear hierarchy. */
html body .pp-service-page .pp-btn,
html body .pp-service-page .pp-btn span,
html body .pp-service-page .pp-btn strong {
  font-family: var(--pp-brand-font) !important;
}

html body .pp-service-page .pp-btn {
  min-height: 48px !important;
  padding: 12px 20px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

html body .pp-service-page .pp-btn-primary {
  border-color: var(--pp-brand-blue) !important;
  background: var(--pp-brand-blue) !important;
  color: #fff !important;
}

html body .pp-service-page .pp-btn-primary:hover {
  border-color: var(--pp-brand-blue-dark) !important;
  background: var(--pp-brand-blue-dark) !important;
  color: #fff !important;
}

html body .pp-service-page .pp-btn-secondary,
html body .pp-service-page .pp-btn-light {
  border-color: var(--pp-brand-blue) !important;
  background: #fff !important;
  color: var(--pp-brand-blue) !important;
}

/* Trust strip: leaner and consistent with the homepage. */
html body .pp-service-page .pp-trust {
  border-bottom: 1px solid var(--pp-brand-line) !important;
  background: #fff !important;
}

html body .pp-service-page .pp-trust-item {
  padding: 19px 22px !important;
  border-color: var(--pp-brand-line) !important;
}

html body .pp-service-page .pp-trust-item strong {
  color: var(--pp-brand-navy) !important;
  font-family: var(--pp-brand-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

html body .pp-service-page .pp-trust-item span {
  color: var(--pp-brand-muted) !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
}

/* Cards and panels use the same restrained geometry as the homepage. */
html body .pp-service-page .pp-grid-2,
html body .pp-service-page .pp-grid-3,
html body .pp-service-page .pp-grid-4 {
  gap: 20px !important;
}

html body .pp-service-page .pp-card {
  padding: 24px !important;
  border: 1px solid var(--pp-brand-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(5,55,91,.05) !important;
}

html body .pp-service-page .pp-card p {
  font-size: 13px !important;
  line-height: 1.65 !important;
}

html body .pp-service-page .pp-icon {
  width: 40px !important;
  height: 40px !important;
  margin-bottom: 16px !important;
  border-radius: 6px !important;
  background: var(--pp-brand-sky) !important;
  color: var(--pp-brand-blue) !important;
}

html body .pp-service-page .pp-icon svg {
  width: 21px !important;
  height: 21px !important;
}

html body .pp-service-page .pp-panel {
  padding: 30px !important;
  border: 1px solid var(--pp-brand-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 12px 32px rgba(5,55,91,.07) !important;
}

html body .pp-service-page .pp-mini-label {
  margin-bottom: 10px !important;
  padding: 5px 8px !important;
  border-radius: 3px !important;
  background: var(--pp-brand-yellow) !important;
  color: #4b3a00 !important;
  font-size: 10px !important;
}

html body .pp-service-page .pp-price {
  color: var(--pp-brand-blue) !important;
  font-family: var(--pp-brand-font) !important;
  font-size: clamp(2rem,3.3vw,3rem) !important;
  font-weight: 800 !important;
}

html body .pp-service-page .pp-price small {
  color: var(--pp-brand-muted) !important;
  font-family: var(--pp-brand-font) !important;
  font-size: 12px !important;
}

html body .pp-service-page .pp-note {
  margin-top: 16px !important;
  padding: 13px 15px !important;
  border-left: 3px solid var(--pp-brand-blue) !important;
  border-radius: 0 5px 5px 0 !important;
  background: var(--pp-brand-sky) !important;
  color: var(--pp-brand-text) !important;
  font-size: 12px !important;
}

html body .pp-service-page .pp-list li {
  color: var(--pp-brand-text) !important;
  font-size: 14px !important;
}

html body .pp-service-page .pp-list li::before {
  background: var(--pp-brand-sky) !important;
  color: var(--pp-brand-blue) !important;
}

html body .pp-service-page .pp-step {
  padding: 22px 20px !important;
  border-color: var(--pp-brand-line) !important;
}

html body .pp-service-page .pp-step::before {
  color: var(--pp-brand-blue) !important;
  font-family: var(--pp-brand-font) !important;
}

html body .pp-service-page .pp-step p {
  font-size: 12px !important;
}

/* Mid-page CTA becomes a light brand panel, not another heavy dark block. */
html body .pp-service-page .pp-callout {
  border: 1px solid var(--pp-brand-line) !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg,var(--pp-brand-sky),#fff) !important;
  color: var(--pp-brand-text) !important;
  box-shadow: none !important;
}

html body .pp-service-page .pp-callout-inner {
  padding: 34px 38px !important;
}

html body .pp-service-page .pp-callout h2,
html body .pp-service-page .pp-callout h3 {
  color: var(--pp-brand-navy) !important;
}

html body .pp-service-page .pp-callout p {
  color: var(--pp-brand-muted) !important;
}

/* FAQ spacing and type. */
html body .pp-service-page .pp-faq details {
  border-color: var(--pp-brand-line) !important;
}

html body .pp-service-page .pp-faq summary {
  padding: 19px 44px 19px 0 !important;
  color: var(--pp-brand-navy) !important;
  font-family: var(--pp-brand-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

html body .pp-service-page .pp-faq summary::after {
  top: 16px !important;
  width: 27px !important;
  height: 27px !important;
  background: var(--pp-brand-sky) !important;
  color: var(--pp-brand-blue) !important;
}

html body .pp-service-page .pp-faq details p {
  font-size: 13px !important;
}

/* Keep one strong dark close, matching the homepage final CTA. */
html body .pp-service-page .pp-final {
  padding: 64px 0 !important;
  border-top: 0 !important;
  background: var(--pp-brand-navy) !important;
  color: #fff !important;
}

html body .pp-service-page .pp-final h1,
html body .pp-service-page .pp-final h2,
html body .pp-service-page .pp-final h3,
html body .pp-service-page .pp-final p {
  color: #fff !important;
}

html body .pp-service-page .pp-final p {
  opacity: .84 !important;
  font-size: 15px !important;
}

html body .pp-service-page .pp-final .pp-btn-primary {
  border-color: #fff !important;
  background: #fff !important;
  color: var(--pp-brand-navy) !important;
}

html body .pp-service-page .pp-final .pp-btn-secondary {
  border-color: rgba(255,255,255,.66) !important;
  background: transparent !important;
  color: #fff !important;
}

html body .pp-service-page .pp-mobile-call {
  border-radius: 4px !important;
  background: var(--pp-brand-blue) !important;
  color: #fff !important;
  font-family: var(--pp-brand-font) !important;
}

@media (max-width: 980px) {
  html body .pp-service-page .pp-hero-grid {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  html body .pp-service-page .pp-hero-media {
    max-width: 760px !important;
  }
}

@media (max-width: 680px) {
  html body .pp-service-page .pp-container {
    width: calc(100% - 28px) !important;
  }

  html body .pp-service-page .pp-section {
    padding: 52px 0 !important;
  }

  html body .pp-service-page .pp-hero-grid {
    padding-top: 28px !important;
    padding-bottom: 34px !important;
  }

  html body .pp-service-page h1 {
    font-size: clamp(2.35rem,11.5vw,3.4rem) !important;
  }

  html body .pp-service-page h2 {
    font-size: clamp(1.8rem,8vw,2.5rem) !important;
  }

  html body .pp-service-page .pp-hero .pp-hero-copy > p,
  html body .pp-service-page .pp-section-head p {
    font-size: 15px !important;
  }

  html body .pp-service-page .pp-hero-img {
    aspect-ratio: 16 / 10 !important;
  }

  html body .pp-service-page .pp-card,
  html body .pp-service-page .pp-panel {
    padding: 21px !important;
  }

  html body .pp-service-page .pp-callout-inner {
    padding: 26px 22px !important;
  }

  html body .pp-service-page .pp-final {
    padding: 52px 0 94px !important;
  }
}

/* =========================================================
   PROFESSIONAL POOL CLEANING SERVICES — SERVICE HUB
   Give the main services page more presence than child pages.
   ========================================================= */
html body .pp-service-page[data-pp-page="professional-pool-cleaning-services"] .pp-hero {
  background: linear-gradient(180deg,#ffffff 0%,#f3faff 100%) !important;
}

html body .pp-service-page[data-pp-page="professional-pool-cleaning-services"] .pp-hero-grid {
  min-height: 610px !important;
  grid-template-columns: minmax(0,.92fr) minmax(480px,1.08fr) !important;
  gap: 64px !important;
  padding-top: 58px !important;
  padding-bottom: 58px !important;
}

html body .pp-service-page[data-pp-page="professional-pool-cleaning-services"] .pp-hero-copy {
  position: relative !important;
  z-index: 2 !important;
}

html body .pp-service-page[data-pp-page="professional-pool-cleaning-services"] .pp-hero h1 {
  max-width: 680px !important;
  color: var(--pp-brand-blue) !important;
  font-size: clamp(2.65rem,4.3vw,4.25rem) !important;
  line-height: 1.01 !important;
  letter-spacing: -.045em !important;
}

html body .pp-service-page[data-pp-page="professional-pool-cleaning-services"] .pp-hero .pp-hero-copy > p {
  max-width: 650px !important;
  font-size: 18px !important;
}

html body .pp-service-page[data-pp-page="professional-pool-cleaning-services"] .pp-hero-media {
  position: relative !important;
}

html body .pp-service-page[data-pp-page="professional-pool-cleaning-services"] .pp-hero-media::before {
  content: "" !important;
  position: absolute !important;
  inset: 18px -18px -18px 18px !important;
  border-radius: 12px !important;
  background: var(--pp-brand-sky) !important;
  z-index: 0 !important;
}

html body .pp-service-page[data-pp-page="professional-pool-cleaning-services"] .pp-hero-img {
  position: relative !important;
  z-index: 1 !important;
  aspect-ratio: 1.18 / 1 !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 55px rgba(5,55,91,.15) !important;
}

html body .pp-service-page[data-pp-page="professional-pool-cleaning-services"] .pp-image-note {
  z-index: 2 !important;
}

html body .pp-service-page[data-pp-page="professional-pool-cleaning-services"] .pp-trust {
  box-shadow: 0 8px 24px rgba(5,55,91,.04) !important;
}

html body .pp-service-page[data-pp-page="professional-pool-cleaning-services"] .pp-section:first-of-type {
  padding-top: 82px !important;
  padding-bottom: 82px !important;
}

html body .pp-service-page[data-pp-page="professional-pool-cleaning-services"] .pp-section:first-of-type .pp-section-head {
  max-width: 860px !important;
}

html body .pp-service-page[data-pp-page="professional-pool-cleaning-services"] .pp-section:first-of-type .pp-card {
  position: relative !important;
  min-height: 230px !important;
  padding: 28px !important;
  overflow: hidden !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

html body .pp-service-page[data-pp-page="professional-pool-cleaning-services"] .pp-section:first-of-type .pp-card::after {
  content: "" !important;
  display: block !important;
  width: 38px !important;
  height: 3px !important;
  margin-top: 20px !important;
  border-radius: 99px !important;
  background: var(--pp-brand-blue) !important;
}

html body .pp-service-page[data-pp-page="professional-pool-cleaning-services"] .pp-section:first-of-type .pp-card:hover {
  transform: translateY(-4px) !important;
  border-color: #b9dcea !important;
  box-shadow: 0 16px 34px rgba(5,55,91,.09) !important;
}

html body .pp-service-page[data-pp-page="professional-pool-cleaning-services"] .pp-callout {
  background: linear-gradient(135deg,#e8f6fd 0%,#ffffff 72%) !important;
}

@media (max-width: 980px) {
  html body .pp-service-page[data-pp-page="professional-pool-cleaning-services"] .pp-hero-grid {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  html body .pp-service-page[data-pp-page="professional-pool-cleaning-services"] .pp-hero-media {
    max-width: 780px !important;
  }
}

@media (max-width: 680px) {
  html body .pp-service-page[data-pp-page="professional-pool-cleaning-services"] .pp-hero-grid {
    padding-top: 32px !important;
    padding-bottom: 38px !important;
    gap: 30px !important;
  }

  html body .pp-service-page[data-pp-page="professional-pool-cleaning-services"] .pp-hero h1 {
    font-size: clamp(2.65rem,12.8vw,3.8rem) !important;
  }

  html body .pp-service-page[data-pp-page="professional-pool-cleaning-services"] .pp-hero-media::before {
    inset: 10px -8px -10px 8px !important;
  }

  html body .pp-service-page[data-pp-page="professional-pool-cleaning-services"] .pp-section:first-of-type {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
  }
}

/* =========================================================
   ROBOTIC CLEANERS CATEGORY — SHOPPING UX + BRAND ALIGNMENT
   ========================================================= */
html body.tax-product_cat.term-robotic-cleaners .pp-robot-guide {
  --navy: var(--pp-brand-navy) !important;
  --blue: var(--pp-brand-blue) !important;
  --sky: var(--pp-brand-sky) !important;
  --line: var(--pp-brand-line) !important;
  --ink: var(--pp-brand-text) !important;
  --muted: var(--pp-brand-muted) !important;
  font-family: var(--pp-brand-font) !important;
}

html body.tax-product_cat.term-robotic-cleaners .pp-robot-hero {
  padding: 40px !important;
  border: 1px solid var(--pp-brand-line) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg,#f7fcff 0%,#edf8fd 100%) !important;
  box-shadow: none !important;
}

html body.tax-product_cat.term-robotic-cleaners .pp-robot-eyebrow {
  color: var(--pp-brand-blue) !important;
  font-family: var(--pp-brand-font) !important;
  font-size: 12px !important;
  letter-spacing: .16em !important;
}

html body.tax-product_cat.term-robotic-cleaners .pp-robot-hero h1 {
  color: var(--pp-brand-blue) !important;
  font-family: var(--pp-brand-font) !important;
  font-size: clamp(2.8rem,4.8vw,4.5rem) !important;
  font-weight: 800 !important;
  line-height: .98 !important;
}

html body.tax-product_cat.term-robotic-cleaners .pp-robot-hero .pp-intro {
  color: var(--pp-brand-muted) !important;
  font-family: var(--pp-brand-font) !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

html body.tax-product_cat.term-robotic-cleaners .pp-question,
html body.tax-product_cat.term-robotic-cleaners .pp-recommendations,
html body.tax-product_cat.term-robotic-cleaners .pp-pick,
html body.tax-product_cat.term-robotic-cleaners .pp-shop-toolbar,
html body.tax-product_cat.term-robotic-cleaners .pp-reco-card,
html body.tax-product_cat.term-robotic-cleaners .pp-compare-dialog,
html body.tax-product_cat.term-robotic-cleaners .pp-compare-card {
  border-color: var(--pp-brand-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(5,55,91,.05) !important;
}

html body.tax-product_cat.term-robotic-cleaners .pp-question {
  background: #fff !important;
}

html body.tax-product_cat.term-robotic-cleaners .pp-rf-option,
html body.tax-product_cat.term-robotic-cleaners .pp-filter-chip,
html body.tax-product_cat.term-robotic-cleaners .pp-filter-select,
html body.tax-product_cat.term-robotic-cleaners .woocommerce-ordering select,
html body.tax-product_cat.term-robotic-cleaners .pp-compare-btn,
html body.tax-product_cat.term-robotic-cleaners .pp-pick a,
html body.tax-product_cat.term-robotic-cleaners ul.products li.product > .button,
html body.tax-product_cat.term-robotic-cleaners .pp-compare-card a {
  border-radius: 4px !important;
  font-family: var(--pp-brand-font) !important;
}

html body.tax-product_cat.term-robotic-cleaners .pp-rf-option:hover,
html body.tax-product_cat.term-robotic-cleaners .pp-rf-option.is-active,
html body.tax-product_cat.term-robotic-cleaners .pp-filter-chip.is-active,
html body.tax-product_cat.term-robotic-cleaners .pp-show-matches,
html body.tax-product_cat.term-robotic-cleaners .pp-compare-btn,
html body.tax-product_cat.term-robotic-cleaners .pp-pick a,
html body.tax-product_cat.term-robotic-cleaners ul.products li.product > .button,
html body.tax-product_cat.term-robotic-cleaners .pp-compare-card a {
  border-color: var(--pp-brand-blue) !important;
  background: var(--pp-brand-blue) !important;
  color: #fff !important;
}

html body.tax-product_cat.term-robotic-cleaners .pp-show-matches {
  border-radius: 4px !important;
  box-shadow: none !important;
  font-family: var(--pp-brand-font) !important;
}

html body.tax-product_cat.term-robotic-cleaners .pp-hero-note,
html body.tax-product_cat.term-robotic-cleaners .pp-trust,
html body.tax-product_cat.term-robotic-cleaners .pp-surface-link,
html body.tax-product_cat.term-robotic-cleaners .pp-compare-tray {
  border-radius: 6px !important;
}

html body.tax-product_cat.term-robotic-cleaners .pp-section-head h2,
html body.tax-product_cat.term-robotic-cleaners .pp-shop-top h2,
html body.tax-product_cat.term-robotic-cleaners .pp-reco-head h2 {
  color: var(--pp-brand-navy) !important;
  font-family: var(--pp-brand-font) !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
}

html body.tax-product_cat.term-robotic-cleaners .pp-pick {
  padding: 14px !important;
}

html body.tax-product_cat.term-robotic-cleaners .pp-pick-badge,
html body.tax-product_cat.term-robotic-cleaners .pp-mfd-badge,
html body.tax-product_cat.term-robotic-cleaners .onsale {
  border-radius: 3px !important;
  background: var(--pp-brand-blue) !important;
}

html body.tax-product_cat.term-robotic-cleaners .pp-pick h3,
html body.tax-product_cat.term-robotic-cleaners ul.products li.product h2 {
  color: var(--pp-brand-navy) !important;
  font-family: var(--pp-brand-font) !important;
  font-weight: 700 !important;
}

html body.tax-product_cat.term-robotic-cleaners ul.products li.product {
  border-color: var(--pp-brand-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(5,55,91,.05) !important;
}

html body.tax-product_cat.term-robotic-cleaners ul.products li.product img {
  border-radius: 7px !important;
  background: var(--pp-brand-pale) !important;
}

/* =========================================================
   BOOK A POOL SERVICE — CONVERSION PAGE
   ========================================================= */
html body .pp-booking {
  --pp-navy: var(--pp-brand-navy) !important;
  --pp-blue: var(--pp-brand-blue) !important;
  --pp-aqua: var(--pp-brand-sky) !important;
  --pp-sky: var(--pp-brand-pale) !important;
  --pp-coral: var(--pp-brand-blue) !important;
  --pp-ink: var(--pp-brand-text) !important;
  --pp-muted: var(--pp-brand-muted) !important;
  font-family: var(--pp-brand-font) !important;
}

html body .pp-booking-hero {
  min-height: 440px !important;
  border: 1px solid var(--pp-brand-line) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg,#f5fbfe 0%,#ffffff 64%,#edf8fd 100%) !important;
  box-shadow: 0 12px 34px rgba(5,55,91,.07) !important;
}

html body .pp-booking-copy {
  padding: 52px 50px !important;
}

html body .pp-booking .pp-eyebrow,
html body .pp-booking .pp-form-kicker {
  color: var(--pp-brand-blue) !important;
  font-family: var(--pp-brand-font) !important;
}

html body .pp-booking .pp-eyebrow::before {
  background: var(--pp-brand-blue) !important;
}

html body .pp-booking h1 {
  color: var(--pp-brand-blue) !important;
  font-family: var(--pp-brand-font) !important;
  font-size: clamp(2.8rem,4.8vw,4.6rem) !important;
  font-weight: 800 !important;
  line-height: .98 !important;
}

html body .pp-booking .pp-lead,
html body .pp-booking .pp-story > p,
html body .pp-booking .pp-form-intro {
  color: var(--pp-brand-muted) !important;
  font-family: var(--pp-brand-font) !important;
}

html body .pp-booking .pp-primary-link,
html body .pp-booking .srfm-submit-button {
  border-radius: 4px !important;
  background: var(--pp-brand-blue) !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: var(--pp-brand-font) !important;
}

html body .pp-booking .pp-trust-row,
html body .pp-booking .pp-service-point,
html body .pp-booking .pp-form-card,
html body .pp-booking .pp-quote {
  border-color: var(--pp-brand-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(5,55,91,.05) !important;
}

html body .pp-booking .pp-service-point,
html body .pp-booking .pp-quote {
  background: var(--pp-brand-pale) !important;
}

html body .pp-booking .pp-service-point::before {
  border-radius: 4px !important;
  background: var(--pp-brand-blue) !important;
}

html body .pp-booking .pp-form-card::before {
  height: 4px !important;
  background: var(--pp-brand-blue) !important;
}

html body .pp-booking .pp-form-card input,
html body .pp-booking .pp-form-card select,
html body .pp-booking .pp-form-card textarea {
  border-radius: 6px !important;
  border-color: var(--pp-brand-line) !important;
  background: #fbfdfe !important;
  font-family: var(--pp-brand-font) !important;
}

/* =========================================================
   SPRING SALE — CAMPAIGN PAGE, SAME BRAND WITH YELLOW ACCENT
   ========================================================= */
html body .pp-sale-page {
  --navy: var(--pp-brand-navy) !important;
  --navy2: var(--pp-brand-text) !important;
  --blue: var(--pp-brand-blue) !important;
  --aqua: var(--pp-brand-blue) !important;
  --pale: var(--pp-brand-sky) !important;
  --cream: var(--pp-brand-pale) !important;
  --yellow: var(--pp-brand-yellow) !important;
  --ink: var(--pp-brand-text) !important;
  --muted: var(--pp-brand-muted) !important;
  font-family: var(--pp-brand-font) !important;
}

html body .pp-sale-page .pp-hero {
  padding: 66px 0 60px !important;
  background: linear-gradient(135deg,var(--pp-brand-navy) 0%,var(--pp-brand-blue-dark) 62%,var(--pp-brand-blue) 100%) !important;
}

html body .pp-sale-page .pp-hero::after {
  display: none !important;
}

html body .pp-sale-page .pp-hero h1 {
  font-family: var(--pp-brand-font) !important;
  font-size: clamp(3.5rem,7vw,5.6rem) !important;
  font-weight: 800 !important;
  line-height: .9 !important;
}

html body .pp-sale-page .pp-btn,
html body .pp-sale-page .pp-eyebrow,
html body .pp-sale-page .pp-sale-chip,
html body .pp-sale-page .pp-brand small,
html body .pp-sale-page .pp-product-link {
  border-radius: 4px !important;
  font-family: var(--pp-brand-font) !important;
}

html body .pp-sale-page .pp-offer-card,
html body .pp-sale-page .pp-category-card,
html body .pp-sale-page .pp-product,
html body .pp-sale-page .pp-brand,
html body .pp-sale-page .pp-cta {
  border-radius: 10px !important;
}

html body .pp-sale-page .pp-category-card,
html body .pp-sale-page .pp-product {
  border-color: var(--pp-brand-line) !important;
  box-shadow: 0 8px 24px rgba(5,55,91,.05) !important;
}

html body .pp-sale-page .pp-icon {
  border-radius: 6px !important;
  background: var(--pp-brand-sky) !important;
  color: var(--pp-brand-blue) !important;
}

html body .pp-sale-page .pp-section-head h2,
html body .pp-sale-page .pp-category-card h3,
html body .pp-sale-page .pp-product-body h3 {
  color: var(--pp-brand-navy) !important;
  font-family: var(--pp-brand-font) !important;
  font-weight: 800 !important;
}

/* Clear blue hierarchy: navy = headings, brand blue = actions, pale sky = surfaces. */
html body .pp-sale-page .pp-blue {
  background: #f3f9fd !important;
}

html body .pp-sale-page .pp-section-head .pp-eyebrow {
  color: var(--pp-brand-blue) !important;
  background: var(--pp-brand-sky) !important;
  box-shadow: none !important;
}

html body .pp-sale-page .pp-inline-link,
html body .pp-sale-page .pp-product-body a:not(.pp-product-link) {
  color: var(--pp-brand-blue) !important;
}

html body .pp-sale-page .pp-product-link {
  background: var(--pp-brand-blue) !important;
  color: #fff !important;
}

html body .pp-sale-page .pp-product-link:hover {
  background: var(--pp-brand-blue-dark) !important;
}

html body .pp-sale-page .pp-product-visual {
  background: linear-gradient(145deg,#f7fbfe,#eaf7fd) !important;
}

html body .pp-sale-page .pp-product-body {
  background: #fff !important;
}

/* =========================================================
   CHEMICALS CATEGORY — CLEAN RETAIL LAYOUT
   ========================================================= */
html body.tax-product_cat.term-chemicals .woocommerce-products-header__title {
  display: none !important;
}

html body.tax-product_cat.term-chemicals .pp-chem-hero {
  margin-bottom: 30px !important;
  padding: 32px 34px !important;
  border-color: var(--pp-brand-line) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg,#f7fcff 0%,#edf8fd 100%) !important;
  box-shadow: none !important;
  font-family: var(--pp-brand-font) !important;
}

html body.tax-product_cat.term-chemicals .pp-chem-hero__eyebrow,
html body.tax-product_cat.term-chemicals .pp-chem-hero__offer span {
  color: var(--pp-brand-blue) !important;
  font-family: var(--pp-brand-font) !important;
}

html body.tax-product_cat.term-chemicals .pp-chem-hero h2 {
  color: var(--pp-brand-blue) !important;
  font-family: var(--pp-brand-font) !important;
  font-size: clamp(2.35rem,4vw,3.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.045em !important;
}

html body.tax-product_cat.term-chemicals .pp-chem-hero__lead {
  color: var(--pp-brand-muted) !important;
  font-family: var(--pp-brand-font) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

html body.tax-product_cat.term-chemicals .pp-chem-hero__offer {
  border-color: var(--pp-brand-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

html body.tax-product_cat.term-chemicals .pp-chem-hero__offer strong {
  color: var(--pp-brand-navy) !important;
  font-family: var(--pp-brand-font) !important;
}

html body.tax-product_cat.term-chemicals .pp-chem-hero__quick span {
  border-color: var(--pp-brand-line) !important;
  border-radius: 4px !important;
  color: var(--pp-brand-text) !important;
  font-family: var(--pp-brand-font) !important;
}

html body.tax-product_cat.term-chemicals ul.products {
  gap: 18px !important;
}

html body.tax-product_cat.term-chemicals ul.products li.product-category,
html body.tax-product_cat.term-chemicals ul.products li.product {
  overflow: hidden !important;
  border: 1px solid var(--pp-brand-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(5,55,91,.05) !important;
}

html body.tax-product_cat.term-chemicals ul.products li.product-category a,
html body.tax-product_cat.term-chemicals ul.products li.product a {
  text-decoration: none !important;
}

html body.tax-product_cat.term-chemicals ul.products li.product-category img,
html body.tax-product_cat.term-chemicals ul.products li.product img {
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  background: var(--pp-brand-pale) !important;
}

html body.tax-product_cat.term-chemicals ul.products li.product-category .woocommerce-loop-category__title,
html body.tax-product_cat.term-chemicals ul.products li.product .woocommerce-loop-product__title {
  padding: 15px 16px !important;
  color: var(--pp-brand-navy) !important;
  font-family: var(--pp-brand-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

html body.tax-product_cat.term-chemicals ul.products li.product-category mark.count {
  color: var(--pp-brand-muted) !important;
  background: transparent !important;
  font-size: 11px !important;
}

html body.tax-product_cat.term-chemicals .woof_show_auto_form,
html body.tax-product_cat.term-chemicals .woof_hide_auto_form,
html body.tax-product_cat.term-chemicals .woocommerce-ordering select,
html body.tax-product_cat.term-chemicals ul.products li.product .button {
  border-radius: 4px !important;
  font-family: var(--pp-brand-font) !important;
}

/* =========================================================
   FAQ HUB — CLEAN HELP CENTRE
   ========================================================= */
html body .pp-faq {
  --pp-blue: var(--pp-brand-blue) !important;
  --pp-sky: var(--pp-brand-sky) !important;
  --pp-ink: var(--pp-brand-text) !important;
  --pp-muted: var(--pp-brand-muted) !important;
  --pp-border: var(--pp-brand-line) !important;
  font-family: var(--pp-brand-font) !important;
}

html body .pp-faq-hero {
  margin-top: 0 !important;
  padding: 48px 50px !important;
  border-color: var(--pp-brand-line) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg,#f7fcff 0%,#ffffff 58%,#edf8fd 100%) !important;
}

html body .pp-faq-kicker {
  color: var(--pp-brand-blue) !important;
  font-family: var(--pp-brand-font) !important;
  letter-spacing: .16em !important;
}

html body .pp-faq h2 {
  color: var(--pp-brand-blue) !important;
  font-family: var(--pp-brand-font) !important;
  font-size: clamp(2.35rem,4.2vw,3.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.045em !important;
  line-height: 1.02 !important;
}

html body .pp-faq h3 {
  color: var(--pp-brand-navy) !important;
  font-family: var(--pp-brand-font) !important;
  font-weight: 800 !important;
}

html body .pp-faq-hero p,
html body .pp-faq .answer,
html body .pp-faq-section-head p {
  color: var(--pp-brand-muted) !important;
  font-family: var(--pp-brand-font) !important;
}

html body .pp-faq-btn,
html body .pp-faq-jump a {
  border-radius: 4px !important;
  font-family: var(--pp-brand-font) !important;
}

html body .pp-faq-btn {
  background: var(--pp-brand-blue) !important;
}

html body .pp-faq-btn.alt {
  border-color: var(--pp-brand-blue) !important;
  background: #fff !important;
  color: var(--pp-brand-blue) !important;
}

html body .pp-faq-jump {
  gap: 8px !important;
}

html body .pp-faq-jump a {
  border-color: var(--pp-brand-line) !important;
  color: var(--pp-brand-navy) !important;
  font-size: 13px !important;
}

html body .pp-faq-section {
  margin: 48px 0 !important;
}

html body .pp-faq-section-head {
  margin-bottom: 12px !important;
  padding: 18px 20px !important;
  border-left: 4px solid var(--pp-brand-blue) !important;
  border-radius: 0 !important;
  background: var(--pp-brand-pale) !important;
}

html body .pp-faq details {
  margin: 8px 0 !important;
  border-color: var(--pp-brand-line) !important;
  border-radius: 6px !important;
}

html body .pp-faq summary {
  padding: 17px 48px 17px 18px !important;
  color: var(--pp-brand-navy) !important;
  font-family: var(--pp-brand-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

html body .pp-faq summary::after {
  color: var(--pp-brand-blue) !important;
}

html body .pp-faq details[open] summary {
  background: var(--pp-brand-pale) !important;
}

html body .pp-faq-callout {
  border-radius: 10px !important;
  background: var(--pp-brand-navy) !important;
}

@media (max-width: 760px) {
  html body.tax-product_cat.term-robotic-cleaners .pp-robot-hero,
  html body .pp-faq-hero {
    padding: 28px 22px !important;
  }

  html body .pp-booking-copy {
    padding: 38px 26px !important;
  }

  html body.tax-product_cat.term-chemicals .pp-chem-hero {
    padding: 24px 22px !important;
  }
}

/* =========================================================
   CANONICAL SITE DESIGN SYSTEM
   Shared components below are the single visual source of truth.
   Page-level legacy CSS may supply structure, but not brand styling.
   ========================================================= */
:root {
  --pp-ui-primary: var(--pp-brand-blue);
  --pp-ui-primary-hover: var(--pp-brand-blue-dark);
  --pp-ui-heading: var(--pp-brand-navy);
  --pp-ui-text: var(--pp-brand-text);
  --pp-ui-muted: var(--pp-brand-muted);
  --pp-ui-surface: #ffffff;
  --pp-ui-surface-soft: var(--pp-brand-pale);
  --pp-ui-surface-blue: var(--pp-brand-sky);
  --pp-ui-border: var(--pp-brand-line);
  --pp-ui-radius-control: 6px;
  --pp-ui-radius-card: 12px;
  --pp-ui-shadow-card: 0 8px 24px rgba(5,55,91,.06);
  --pp-ui-shadow-raised: 0 18px 44px rgba(5,55,91,.12);
  --pp-ui-section-space: 72px;
}

/* Header hierarchy comes from this file, not the legacy theme palette. */
html body .header-box .topbar {
  background: var(--pp-ui-surface-blue) !important;
  color: var(--pp-ui-heading) !important;
}

html body .header-box .middle-header {
  background: #fff !important;
  color: var(--pp-ui-heading) !important;
}

html body .header-box .bottom-header {
  background: var(--pp-ui-primary) !important;
}

html body .header-box .primary-navigation > ul > li > a,
html body .header-box .main-navigation > ul > li > a {
  color: #fff !important;
  font-family: var(--pp-brand-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

html body .header-box .primary-navigation > ul > li > a:hover,
html body .header-box .main-navigation > ul > li > a:hover {
  color: var(--pp-brand-yellow) !important;
}

html body .header-box .header-btn {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

html body .header-box .book-btn {
  min-height: 38px !important;
  padding: 8px 18px !important;
  border: 1px solid var(--pp-ui-heading) !important;
  border-radius: var(--pp-ui-radius-control) !important;
  background: var(--pp-ui-heading) !important;
  color: #fff !important;
  font-family: var(--pp-brand-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}

html body .header-box .book-btn:hover {
  border-color: var(--pp-ui-primary-hover) !important;
  background: var(--pp-ui-primary-hover) !important;
}

/* One control system for every custom CTA family. */
html body .pp-service-page .pp-btn,
html body .pp-booking .pp-primary-link,
html body .pp-booking .srfm-submit-button,
html body .pp-sale-page .pp-btn,
html body .pp-sale-page .pp-product-link,
html body.tax-product_cat.term-robotic-cleaners .pp-show-matches,
html body.tax-product_cat.term-robotic-cleaners .pp-pick a,
html body.tax-product_cat.term-robotic-cleaners ul.products li.product > .button,
html body .pp-faq .pp-faq-btn,
html body .pp-suburb__button,
html body .ppm2-btn,
html body #pp-upgrades-v2 .pp-btn {
  min-height: 44px !important;
  padding: 10px 18px !important;
  border-radius: var(--pp-ui-radius-control) !important;
  font-family: var(--pp-brand-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

/* Primary action colour is always the same brand blue. */
html body .pp-service-page .pp-btn-primary,
html body .pp-booking .pp-primary-link,
html body .pp-booking .srfm-submit-button,
html body.tax-product_cat.term-robotic-cleaners .pp-show-matches,
html body.tax-product_cat.term-robotic-cleaners .pp-pick a,
html body.tax-product_cat.term-robotic-cleaners ul.products li.product > .button,
html body .pp-faq .pp-faq-btn:not(.alt),
html body .pp-suburb__button--primary,
html body .ppm2-btn-primary,
html body #pp-upgrades-v2 .pp-btn-primary {
  border-color: var(--pp-ui-primary) !important;
  background: var(--pp-ui-primary) !important;
  color: #fff !important;
}

/* Shared secondary action. */
html body .pp-service-page .pp-btn-secondary,
html body .pp-service-page .pp-btn-light,
html body .pp-faq .pp-faq-btn.alt,
html body .ppm2-btn-secondary,
html body .pp-suburb__button:not(.pp-suburb__button--primary) {
  border: 1px solid var(--pp-ui-border) !important;
  background: #fff !important;
  color: var(--pp-ui-heading) !important;
}

/* Shared card language across services, retail, campaign and help content. */
html body .pp-service-page .pp-card,
html body .pp-service-page .pp-panel,
html body .pp-booking .pp-form-card,
html body .pp-booking .pp-service-point,
html body .pp-sale-page .pp-category-card,
html body .pp-sale-page .pp-product,
html body.tax-product_cat.term-robotic-cleaners .pp-question,
html body.tax-product_cat.term-robotic-cleaners .pp-pick,
html body.tax-product_cat.term-robotic-cleaners .pp-shop-toolbar,
html body .pp-faq details,
html body.tax-product_cat.term-chemicals ul.products li.product-category,
html body.tax-product_cat.term-chemicals ul.products li.product {
  border: 1px solid var(--pp-ui-border) !important;
  border-radius: var(--pp-ui-radius-card) !important;
  background: var(--pp-ui-surface) !important;
  box-shadow: var(--pp-ui-shadow-card) !important;
}

/* Shared heading hierarchy across every custom family. */
html body .pp-service-page h1,
html body .pp-service-page h2,
html body .pp-booking h1,
html body .pp-booking h2,
html body .pp-sale-page h2,
html body.tax-product_cat.term-robotic-cleaners .pp-robot-hero h1,
html body.tax-product_cat.term-robotic-cleaners .pp-section-head h2,
html body .pp-faq h2,
html body .pp-faq h3,
html body .pp-suburb h1,
html body .pp-suburb h2,
html body #pp-upgrades-v2 h1,
html body #pp-upgrades-v2 h2 {
  color: var(--pp-ui-heading) !important;
  font-family: var(--pp-brand-font) !important;
}

/* Blue is reserved for actions and small emphasis, not every headline. */
html body .pp-eyebrow,
html body .pp-robot-eyebrow,
html body .pp-faq-kicker,
html body .pp-form-kicker,
html body .pp-chem-hero__eyebrow,
html body .pp-text-link,
html body .pp-inline-link {
  color: var(--pp-ui-primary) !important;
}

/* Soft backgrounds use one consistent tint. */
html body .pp-service-page .pp-section.pp-soft,
html body .pp-booking .pp-service-point,
html body.tax-product_cat.term-robotic-cleaners .pp-shop-toolbar,
html body .pp-faq-section-head {
  background: var(--pp-ui-surface-soft) !important;
}

html body .pp-service-page .pp-section.pp-sky,
html body.tax-product_cat.term-robotic-cleaners .pp-robot-hero,
html body.tax-product_cat.term-chemicals .pp-chem-hero,
html body .pp-faq-hero {
  background: var(--pp-ui-surface-blue) !important;
}

/* Consistent section rhythm. */
html body .pp-service-page .pp-section,
html body .pp-sale-page .pp-section {
  padding-top: var(--pp-ui-section-space) !important;
  padding-bottom: var(--pp-ui-section-space) !important;
}

@media (max-width: 767px) {
  :root {
    --pp-ui-section-space: 52px;
  }

  html body .header-box .header-btn {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  html body .header-box .book-btn {
    min-height: 34px !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
  }
}