/* Start custom CSS *//* ===== Pool Sizes page (Figma 218:2 / 223:406 / 223:764) =====
   One native e-tabs widget. Sizes are Figma px at 1920 wide, scaled with clamp()/vw. Banner + CTA reuse the kit's cpn-banner / cpn-cta classes. */

/* ---------- Heading + tab pills share one row; panels sit underneath ---------- */
body .elementor .cpn-ps-sizes{position:relative;overflow-x:clip;padding:clamp(56px,6.198vw,119px) 0 clamp(72px,8.6vw,165px)}
body .elementor .cpn-ps-layout{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:40px}
body .elementor .cpn-ps-text{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;padding:0;min-width:0}
body .elementor .cpn-ps-text .cpn-h2{margin-top:11px;line-height:1.21}
/* e-tabs is only a wrapper for the tab script: let its menu and content area join the grid above */
body .elementor .cpn-ps-tabs{display:contents}
body .elementor .cpn-ps-menu{grid-column:2;grid-row:1;align-self:center;display:flex;flex-wrap:wrap;gap:clamp(12px,2.55vw,49px);width:auto;padding:0;margin-top:clamp(0px,2.6vw,50px)}

/* Figma pill: 61px tall, 28px bold label. Active = blue gradient, others = pale fill + hairline */
body .elementor .cpn-ps-tab{display:inline-flex;align-items:center;justify-content:center;width:auto;min-height:clamp(46px,3.186vw,61.18px);padding:0 clamp(20px,1.94vw,37.3px);border:clamp(1.5px,.11vw,2.1px) solid rgba(22,158,235,.3);border-radius:999px;background:rgba(236,248,254,.53);color:#169EEB;cursor:pointer;outline:none;transition:background-color var(--cpn-dur,.32s),border-color var(--cpn-dur,.32s),color var(--cpn-dur,.32s),box-shadow var(--cpn-dur,.32s),translate var(--cpn-dur,.32s)}
body .elementor .cpn-ps-tab .cpn-ps-tab-label{font-family:"Host Grotesk",sans-serif;font-size:clamp(17px,1.4745vw,28.311px);font-weight:700;line-height:1.058;letter-spacing:-0.02em;color:inherit;white-space:nowrap}
body .elementor .cpn-ps-tab:hover{background:#fff;border-color:#169EEB;translate:0 -2px}
body .elementor .cpn-ps-tab:focus-visible{box-shadow:0 0 0 4px rgba(22,158,235,.25)}
body .elementor .cpn-ps-tab.e--selected{border-color:transparent;background:linear-gradient(158deg,#0095EE 0%,#0079C1 100%);color:#fff;box-shadow:0 10px 22px -12px rgba(0,121,193,.8);translate:none}

/* ---------- Panels: 3-up grid of pool plan cards (Figma 488 × 577, gaps 115.6 / 79) ---------- */
body .elementor .cpn-ps-area{grid-column:1 / -1;grid-row:2;padding:0;margin-top:clamp(40px,4.3vw,83px)}
body .elementor .cpn-ps-panel{padding:0}
body .elementor .cpn-ps-panel.e--selected{animation:cpn-ps-in .5s ease both}
@keyframes cpn-ps-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
body .elementor .cpn-ps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,6.02vw,115.6px);row-gap:clamp(24px,4.11vw,79px);max-width:1695px;margin-inline:auto;padding:0}
body .elementor .cpn-ps-grid .cpn-ps-card{display:block;width:100%;height:auto;aspect-ratio:1185 / 1400;object-fit:contain}

@media (prefers-reduced-motion:reduce){
  body .elementor .cpn-ps-panel.e--selected{animation:none}
  body .elementor .cpn-ps-tab{transition:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  body .elementor .cpn-ps-layout{grid-template-columns:1fr}
  body .elementor .cpn-ps-menu{grid-column:1;grid-row:2;justify-content:flex-start;margin-top:28px}
  body .elementor .cpn-ps-area{grid-row:3}
  body .elementor .cpn-ps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  body .elementor .cpn-h2 br{display:none} /* Figma line breaks are for wide screens */
  /* three equal pills on one row */
  body .elementor .cpn-ps-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;margin-top:22px}
  body .elementor .cpn-ps-tab{min-height:42px;padding:0 6px}
  body .elementor .cpn-ps-tab .cpn-ps-tab-label{font-size:clamp(13px,3.7vw,15px)}
  body .elementor .cpn-ps-grid{grid-template-columns:minmax(0,1fr);row-gap:8px;max-width:440px}
  /* the cards carry ~11% transparent side padding; let them bleed so the plans and specs read larger */
  body .elementor .cpn-ps-grid .cpn-ps-card{width:122%;max-width:none;margin:-6% -11% -2%}
}/* End custom CSS */