/* Start custom CSS *//* ===== Pool Colours page (Figma 201:311) =====
   Swatch grid = Loop over the "Pool Colours" CPT (title, featured image = texture, ACF description).
   Picking a swatch updates the "Selected Colour" card: "CPN Pool Colours" JS snippet. */

/* ---------- Banner ---------- */
body .elementor .cpn-crumbs a{font:inherit;color:inherit;letter-spacing:inherit;text-decoration:none}
body .elementor .cpn-crumbs a:hover,body .elementor .cpn-crumbs a:focus-visible{text-decoration:underline}

/* ---------- Swatch grid (Loop) ---------- */
body .elementor .cpn-swatches{--cols:4;padding:0;--gx:clamp(16px,3.75vw,72px);--gy:clamp(28px,4.48vw,86px);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gy) var(--gx);grid-auto-rows:auto;max-width:1592px;margin:clamp(48px,6.771vw,130px) auto 0}
body .elementor .cpn-swatch{position:relative;flex:none;width:calc((100% - (var(--cols) - 1) * var(--gx)) / var(--cols));padding:clamp(8px,.885vw,17px);border-radius:clamp(18px,1.813vw,34.8px);background:#fff;box-shadow:0 0 21px rgba(91,202,244,.28);cursor:pointer;
  transition:transform var(--cpn-dur,.32s) var(--cpn-ease,ease),box-shadow var(--cpn-dur,.32s) var(--cpn-ease,ease)}
body .elementor .cpn-swatch .cpn-swatch-img{display:block;width:100%;height:auto;aspect-ratio:309.558 / 251.604;object-fit:cover;border-radius:clamp(14px,1.297vw,24.9px) clamp(14px,1.297vw,24.9px) 0 0}
body .elementor .cpn-swatch .cpn-swatch-name{display:flex;align-items:center;min-height:clamp(48px,4.412vw,84.71px);padding:0 clamp(12px,1.464vw,28.1px);border-radius:0 0 clamp(14px,1.297vw,24.9px) clamp(14px,1.297vw,24.9px);background:var(--sw,#169EEB);color:#fff;font-family:"Host Grotesk",sans-serif;font-size:clamp(15px,1.489vw,28.592px);font-weight:500;line-height:1.317;letter-spacing:-0.02em;transition:background-color var(--cpn-dur,.32s)}
body .elementor .cpn-swatch .cpn-swatch-desc{display:none}
/* white tick, top-right; only shown on the selected swatch */
body .elementor .cpn-swatch .cpn-swatch-tick{position:absolute;top:clamp(18px,1.927vw,37px);right:clamp(18px,1.839vw,35.3px);width:clamp(28px,2.205vw,42.34px);min-width:0;height:auto;aspect-ratio:1;padding:0;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.7272' height='18.2958' viewBox='0 0 18.7272 18.2958' fill='none'%3E%3Cpath d='M1.75158 9.85794L8.94374 16.5442L16.9753 1.7519' stroke-width='3.50314' stroke-linecap='round' stroke-linejoin='round' stroke='%23169EEB'/%3E%3C/svg%3E") 54% 52%/37.6% auto no-repeat;
  opacity:0;transform:scale(.6);transition:opacity var(--cpn-dur,.32s),transform var(--cpn-dur,.32s) var(--cpn-ease,ease)}
body .elementor .cpn-swatch:hover{transform:translateY(-6px)}
body .elementor .cpn-swatch:focus-visible{outline:2px solid #5BCAF4;outline-offset:4px}
/* selected: lifted, with the blue card peeking out underneath (Figma "diamond pool hover") */
body .elementor .cpn-swatch.is-active,
body .elementor .cpn-swatches:not(:has(.is-active)) > .cpn-swatch:first-child{transform:translateY(-15.5px);box-shadow:0 8px 0 0 #0288D8,0 0 21px rgba(91,202,244,.35)}
body .elementor .cpn-swatch.is-active .cpn-swatch-tick,
body .elementor .cpn-swatches:not(:has(.is-active)) > .cpn-swatch:first-child .cpn-swatch-tick{opacity:1;transform:none}

/* Name-bar colours from Figma, keyed by each colour's texture (featured image) id.
   A colour added later without a line here gets a tone sampled from its texture by the JS. */
body .elementor .cpn-swatch:has(img[id="1501"]){--sw:#06D2F5} /* Aqua Mist */
body .elementor .cpn-swatch:has(img[id="1500"]){--sw:#88B2E2} /* Blue Mist */
body .elementor .cpn-swatch:has(img[id="1499"]){--sw:#0265D8} /* Century Blue */
body .elementor .cpn-swatch:has(img[id="1498"]){--sw:#868582} /* Century Silver */
body .elementor .cpn-swatch:has(img[id="1497"]){--sw:#646464} /* Graphite Grey */
body .elementor .cpn-swatch:has(img[id="1496"]){--sw:#225695} /* Graphite Blue */
body .elementor .cpn-swatch:has(img[id="1495"]){--sw:#91B4B6} /* Grey Mist */
body .elementor .cpn-swatch:has(img[id="1491"]){--sw:#055685} /* Imperial Shimmer */
body .elementor .cpn-swatch:has(img[id="1490"]){--sw:#0078DA} /* Marine Blue */
body .elementor .cpn-swatch:has(img[id="1489"]){--sw:#B8CCD3} /* Mystic Grey */
body .elementor .cpn-swatch:has(img[id="1488"]){--sw:#0036B1} /* Regal Blue */
body .elementor .cpn-swatch:has(img[id="1487"]){--sw:#5C5D61} /* Shadow Pearl */
body .elementor .cpn-swatch:has(img[id="1486"]){--sw:#1FB1E4} /* Teal Shimmer */
body .elementor .cpn-swatch:has(img[id="1485"]){--sw:#D0D1CC} /* White Glaze */

/* ---------- Selected colour section: ice lower half + Figma wave ---------- */
body .elementor .cpn-chosen-section{background:linear-gradient(to bottom,transparent 50%,#E9F7FF 50%)}
body .elementor .cpn-chosen-wave{position:absolute;z-index:0;left:-4vw;top:clamp(120px,15.625vw,300px);width:117.5vw;min-width:0;height:calc(50% - clamp(120px,15.625vw,300px) + 2px);padding:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2256.56 2483.44' preserveAspectRatio='none'%3E%3Cpath fill='%23E9F7FF' d='M933.947 580.669C269.979 490.128 135.348 180.565 0 0L46.3776 2483.44H2256.56V343.323C2012.67 534.173 1343.12 636.465 933.947 580.669Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}

/* ---------- Selected colour card ---------- */
body .elementor .cpn-chosen{display:grid;grid-template-columns:minmax(0,699.631fr) minmax(0,721.705fr);column-gap:clamp(24px,3.578vw,68.7px);align-items:start;width:100%;max-width:1626.537px;margin-inline:auto;padding:clamp(16px,3.573vw,68.6px);border-radius:clamp(26px,2.946vw,56.568px);background:#fff;box-shadow:1.236px 1.236px 11.984px rgba(0,0,0,.02),0 0 34.8px rgba(91,202,244,.3)}
body .elementor .cpn-chosen-swatch{display:flex;flex-direction:column;align-items:flex-start;padding:0;min-width:0}
body .elementor .cpn-chosen-media{position:relative;width:100%;aspect-ratio:699.631 / 519.945;padding:0;border-radius:clamp(20px,2.482vw,47.649px);overflow:hidden}
body .elementor .cpn-chosen-media .cpn-chosen-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s var(--cpn-ease,ease)}
body .elementor .cpn-chosen.is-swapping .cpn-chosen-img{opacity:.35}
body .elementor .cpn-chosen-badge{position:absolute;z-index:1;left:clamp(12px,1.806vw,34.67px);top:clamp(12px,2.033vw,39.03px);display:inline-flex;align-items:center;gap:clamp(8px,.875vw,16.8px);width:auto;height:clamp(36px,2.568vw,49.3px);padding:0 clamp(14px,1.18vw,22.7px) 0 clamp(7px,.748vw,14.36px);border-radius:999px;background:#fff}
body .elementor .cpn-chosen-badge-tick{flex:none;width:clamp(22px,1.542vw,29.6px);min-width:0;aspect-ratio:1;padding:0;border-radius:50%;
  background:#169EEB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.7272' height='18.2958' viewBox='0 0 18.7272 18.2958' fill='none'%3E%3Cpath d='M1.75158 9.85794L8.94374 16.5442L16.9753 1.7519' stroke-width='3.50314' stroke-linecap='round' stroke-linejoin='round' stroke='white'/%3E%3C/svg%3E") 54% 52%/37.6% auto no-repeat}
body .elementor .cpn-chosen-badge-text{font-family:"Host Grotesk",sans-serif;font-size:clamp(14px,1.117vw,21.446px);font-weight:500;line-height:1.317;letter-spacing:-0.02em;color:#002439;white-space:nowrap}
body .elementor .cpn-chosen-name-row{display:flex;align-items:center;gap:clamp(12px,1.274vw,24.46px);width:auto;padding:0;margin-top:clamp(20px,2.495vw,47.9px)}
body .elementor .cpn-chosen-dot{flex:none;width:clamp(28px,2.469vw,47.4px);min-width:0;aspect-ratio:1;padding:0;border-radius:50%;background:var(--sw,#06D2F5);transition:background-color var(--cpn-dur,.32s)}
body .elementor .cpn-chosen-name{font-family:"Host Grotesk",sans-serif;font-size:clamp(26px,2.39vw,45.897px);font-weight:500;line-height:1.317;letter-spacing:-0.02em;color:#002439}
body .elementor .cpn-chosen-range{margin-top:clamp(8px,1.08vw,20.7px);font-family:"Host Grotesk",sans-serif;font-size:clamp(15px,1.241vw,23.832px);font-weight:600;line-height:1.317;letter-spacing:.15em;color:#169EEB}
body .elementor .cpn-chosen-desc{max-width:635.547px;margin-top:clamp(10px,1.12vw,21.5px);font-family:"Host Grotesk",sans-serif;font-size:clamp(15px,1.198vw,23px);line-height:1.317;letter-spacing:-0.02em;color:#8B8B8B}
body .elementor .cpn-chosen-desc[hidden]{display:none}
body .elementor .cpn-chosen-photos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.12vw,21.5px);align-content:start;padding:0;min-width:0}
body .elementor .cpn-chosen-photos img{display:block;width:100%;height:auto;object-fit:cover;border-radius:clamp(18px,2.482vw,47.649px)}
body .elementor .cpn-chosen-photos img:first-child{grid-column:1 / -1;aspect-ratio:721.705 / 429.174}
body .elementor .cpn-chosen-photos img:not(:first-child){aspect-ratio:350.349 / 347.136}

/* ---------- How to choose: 4 factors ---------- */
body .elementor .cpn-factors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px clamp(24px,4.167vw,80px);padding:0;margin-top:clamp(48px,5.729vw,110px)}
body .elementor .cpn-factor{display:flex;flex-direction:column;align-items:flex-start;padding:0;min-width:0}
body .elementor .cpn-factor-icon{display:grid;place-items:center;width:clamp(110px,8.625vw,165.6px);min-width:0;aspect-ratio:1;padding:0;border-radius:50%;background:rgba(91,202,244,.08)}
/* Elementor gives every .e-con::before position:absolute (overlay layer) — reset it so the
   white disc is a centred grid item, not a left-pinned full-height ellipse */
body .elementor .cpn-factor-icon::before{content:"";position:static;grid-area:1 / 1;width:82.2%;height:auto;aspect-ratio:1;border-radius:50%;background:#fff}
body .elementor .cpn-factor-glyph{grid-area:1 / 1;position:relative;width:50%;min-width:0;aspect-ratio:1;padding:0;background:linear-gradient(180deg,#5BCAF4 0%,#169EEB 100%);-webkit-mask:var(--m) center / contain no-repeat;mask:var(--m) center / contain no-repeat}
body .elementor .cpn-glyph-sun{--m:url("https://centurypoolsnorthcoast.com.au/wp-content/uploads/2026/10/nnsw-glyph-sun.png")}
body .elementor .cpn-glyph-drop{--m:url("https://centurypoolsnorthcoast.com.au/wp-content/uploads/2026/10/nnsw-glyph-drop.png")}
body .elementor .cpn-glyph-house{--m:url("https://centurypoolsnorthcoast.com.au/wp-content/uploads/2026/10/nnsw-glyph-house.png")}
body .elementor .cpn-glyph-sparkle{--m:url("https://centurypoolsnorthcoast.com.au/wp-content/uploads/2026/10/nnsw-glyph-sparkle.png")}
body .elementor .cpn-factor-title{margin-top:clamp(16px,1.769vw,34px);padding-left:clamp(0px,.768vw,14.74px);font-family:"Host Grotesk",sans-serif;font-size:clamp(22px,1.674vw,32.141px);font-weight:700;line-height:1.317;letter-spacing:-0.02em;color:#002439}
body .elementor .cpn-factor-text{max-width:calc(296.513px + clamp(0px,.768vw,14.74px));margin-top:clamp(6px,.6vw,11.5px);padding-left:clamp(0px,.768vw,14.74px);font-family:"Host Grotesk",sans-serif;font-size:clamp(16px,1.116vw,21.427px);line-height:1.317;letter-spacing:-0.02em;color:#8B8B8B}

/* ---------- CTA: wave picks up the ice background above ---------- */
body .elementor .cpn-cta-wave.cpn-cta-wave-ice{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 1140 1979 116%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23E9F7FF%22 d=%22M0 0H1979.01V1160.16C1979.01 1160.16 1748.14 1255.28 1516.6 1255.28C1134.27 1255.28 916.755 1172.42 527.32 1148.2C322.706 1135.47 0 1162.16 0 1162.16L0 0Z%22/%3E%3C/svg%3E")}

/* ---------- Responsive (prototype breakpoints) ---------- */
@media (max-width:1279px){
  body .elementor .cpn-chosen{grid-template-columns:1fr;row-gap:32px}
  body .elementor .cpn-factors{grid-template-columns:repeat(2,minmax(0,1fr))}
  body .elementor .cpn-swatches{--gx:24px;--gy:40px}
}
@media (max-width:1024px){
  body .elementor .cpn-swatches{--cols:3}
}
@media (max-width:767px){
  body .elementor .cpn-h2 br,body .elementor .cpn-lead br{display:none} /* Figma line breaks are for wide screens */
  body .elementor .cpn-swatches{--cols:2;--gx:16px;--gy:28px}
  body .elementor .cpn-swatch.is-active,
  body .elementor .cpn-swatches:not(:has(.is-active)) > .cpn-swatch:first-child{transform:translateY(-8px);box-shadow:0 6px 0 0 #0288D8,0 0 21px rgba(91,202,244,.35)}
}
@media (max-width:600px){
  body .elementor .cpn-factors{grid-template-columns:1fr}
  body .elementor .cpn-chosen-wave{display:none}
  body .elementor .cpn-chosen-section{background:linear-gradient(to bottom,transparent 30%,#E9F7FF 30%)}
  body .elementor .cpn-swatch .cpn-swatch-name{padding-inline:10px}
}
@media (prefers-reduced-motion:reduce){
  body .elementor .cpn-swatch,body .elementor .cpn-chosen-img{transition:none}
}
/* QA-BLOCK */
/* QA 2026-10-30: visible hover on the swatches. Uses `translate` (not transform), which the entrance animation doesn't override */
@media (hover:hover){
  body .elementor .cpn-swatch{transition:translate .3s ease,box-shadow .3s ease}
  body .elementor .cpn-swatch:not(.is-active):hover{translate:0 -8px;box-shadow:0 6px 0 0 rgba(2,136,216,.45),0 14px 32px rgba(91,202,244,.45)}
  body .elementor .cpn-swatch:not(.is-active):hover .cpn-swatch-tick{opacity:.6;transform:none}
  body .elementor .cpn-swatch:not(.is-active):hover .cpn-swatch-name{filter:brightness(1.08)}
}
/* QA 2 (2026-10-30): while pressed, a swatch takes the selected look (deep blue edge underneath, tick showing) */
body .elementor .cpn-swatch:not(.is-active):active{translate:0 -12px;box-shadow:0 8px 0 0 #0288D8,0 0 21px rgba(91,202,244,.35)}
body .elementor .cpn-swatch:not(.is-active):active .cpn-swatch-tick{opacity:1;transform:none}
/* QA 3: the selected swatch lifts a little further on hover too */
@media (hover:hover){
  body .elementor .cpn-swatch.is-active:hover,body .elementor .cpn-swatches:not(:has(.is-active)) > .cpn-swatch:first-child:hover{translate:0 -6px;box-shadow:0 8px 0 0 #0288D8,0 14px 32px rgba(91,202,244,.5)}
}
/* QA 3: the Hello theme reset strips box-shadow from any clicked (focused) [tabindex] element, which removed the blue edge right after a click.
   Each state below names its shadow in --sw-sh, and a focused swatch re-applies it */
body .elementor .cpn-swatch{--sw-sh:0 0 21px rgba(91,202,244,.28)}
body .elementor .cpn-swatch.is-active,body .elementor .cpn-swatches:not(:has(.is-active)) > .cpn-swatch:first-child{--sw-sh:0 8px 0 0 #0288D8,0 0 21px rgba(91,202,244,.35)}
@media (max-width:767px){body .elementor .cpn-swatch.is-active,body .elementor .cpn-swatches:not(:has(.is-active)) > .cpn-swatch:first-child{--sw-sh:0 6px 0 0 #0288D8,0 0 21px rgba(91,202,244,.35)}}
body .elementor .cpn-swatch:not(.is-active):active{--sw-sh:0 8px 0 0 #0288D8,0 0 21px rgba(91,202,244,.35)}
@media (hover:hover){
  body .elementor .cpn-swatch:not(.is-active):hover{--sw-sh:0 6px 0 0 rgba(2,136,216,.45),0 14px 32px rgba(91,202,244,.45)}
  body .elementor .cpn-swatch.is-active:hover{--sw-sh:0 8px 0 0 #0288D8,0 14px 32px rgba(91,202,244,.5)}
}
body .elementor .cpn-swatch:focus{box-shadow:var(--sw-sh)!important}
/* /QA-BLOCK *//* End custom CSS */