:root {
  color-scheme: light;
  --pool-blue: #00a6dd;
  --pool-blue-deep: #0086e0;
  --ink: #111;
  --panel: rgba(255, 255, 255, .20);
  --line: #111;
  font-family: "Open Sans", Arial, sans-serif;
  color: var(--ink);
  background: #d9f1f6;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: #d9f1f6;
  background-image: url("img/background.png");
  background-repeat: repeat;
  line-height: 1.5;
}

a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid #111; outline-offset: 3px; }

.skip-link {
  position: absolute;
  z-index: 10;
  left: 1rem;
  top: -5rem;
  padding: .6rem 1rem;
  background: #fff;
  border: 2px solid var(--line);
}
.skip-link:focus { top: 1rem; }

.masthead {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1rem clamp(.75rem, 3vw, 2rem) 1.25rem;
  text-align: center;
}

.brand-logo { display: block; width: min(29rem, 84vw); height: auto; margin: 0 auto; }
.formerly { margin: .15rem 0; font-weight: 800; text-transform: uppercase; }
.slogan { margin: 0 auto 1rem; font-weight: 800; font-style: italic; font-size: clamp(1.1rem, 2.5vw, 1.55rem); }

.address-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  width: min(36rem, 100%);
  margin: 1rem auto .7rem;
}

.contact-card {
  min-width: 0;
  padding: .25rem .5rem;
  border: 3px solid var(--line);
  border-radius: 6px;
  font-weight: 700;
}

.contact-card h2 { margin: 0; font-size: .9rem; text-transform: uppercase; }
.contact-card address { font-style: normal; }
.hours-strip { margin: .7rem auto; text-align: center; font-weight: 800; }
.hours-strip h2 { margin: 0; font-size: 1rem; text-transform: uppercase; }
#hours-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.2rem; margin: 0; font-size: .95rem; }
.hours-list-item { display: inline-flex; gap: .3rem; }
.hours-days { font-weight: 800; }
.hours-time { margin: 0; }
.phones-strip ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem 1.4rem; margin: .8rem 0; padding: 0; list-style: none; font-weight: 800; }
.phones-strip li { white-space: nowrap; }
.phone-number { white-space: nowrap; }
.payment-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; margin: .8rem 0 0; font-weight: 700; }
.payment-note img { width: 168px; max-width: 45vw; height: auto; }

.main-nav {
  display: grid;
  gap: .35rem;
  width: min(37.5rem, calc(100% - 1.5rem));
  margin: 0 auto 1.25rem;
}
.main-nav a, .button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding: .35rem 1rem;
  border: 2px solid var(--line);
  border-radius: 1.1rem;
  background: var(--pool-blue);
  color: #111;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
.main-nav a:hover, .main-nav a:focus-visible, .button-link:hover { background: var(--pool-blue-deep); color: #fff; }

main { max-width: 1180px; margin: 0 auto; padding: 0 clamp(.75rem, 3vw, 2rem) 2rem; }
.catalog-section, .info-panel { margin: 1rem 0 1.5rem; }
.section-heading { margin: 0 0 .9rem; text-align: center; }
.section-heading h1, .section-heading h2 { margin: 0; font-size: clamp(1.35rem, 3vw, 1.9rem); font-weight: 800; font-style: italic; }
.section-heading p { margin: .12rem 0 0; font-weight: 700; }
.small-note { font-size: .85rem; }

.pool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.pool-card, .accessory-card, .info-panel {
  border: 2px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
}
.pool-card { padding: .75rem .9rem; }
.sale-label { margin: 0 0 .2rem; color: #d00000; font-weight: 800; text-align: center; text-transform: uppercase; text-shadow: 1px 1px #fff, -1px -1px #fff; }
.pool-title { margin: .1rem 0; text-align: center; font-size: 1.35rem; line-height: 1.2; }
.pool-title-link { display: inline-block; padding: .3rem 1.25rem; border: 2px solid var(--line); border-radius: 1rem; background: var(--pool-blue); text-decoration: none; text-transform: uppercase; }
.pool-title-link:hover, .pool-title-link:focus-visible { background: var(--pool-blue-deep); color: #fff; }
.pool-spec { margin: .4rem 0 .55rem; text-align: center; font-weight: 700; }
.price-table { width: 100%; border-collapse: collapse; font-weight: 700; }
.price-table caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.price-table tr { border-top: 1px solid #555; }
.price-table th, .price-table td { padding: .34rem .45rem; }
.price-table th { width: 65%; border-right: 2px solid var(--line); text-align: right; }
.price-table td { border-left: 2px solid var(--line); text-align: left; white-space: nowrap; }
.price-note { display: block; font-size: .68rem; }
.install-callout { margin: .9rem 0 0; text-align: center; }

.accessory-section { padding-top: .3rem; }
.accessory-grid { display: grid; grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; border: 2px solid var(--line); }
.accessory-card { display: flex; align-items: center; padding: .35rem .55rem; border-bottom: 1px solid var(--line); }
.accessory-card:last-child { border-bottom: 0; }
.accessory-body { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; }
.accessory-name { font-weight: 700; }
.accessory-price { flex: 0 0 auto; }

.info-panel { padding: .9rem clamp(.75rem, 3vw, 1.5rem); }
.included-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1.6rem; margin: 0 auto 1rem; padding-left: 1.3rem; max-width: 850px; }
.chemicals, .centered, .installer-call { text-align: center; font-weight: 700; }
.chemicals { margin: .8rem 0; font-size: 1.2rem; }
.equipment-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; align-items: start; }
.equipment-photos figure { margin: 0; text-align: center; font-size: .85rem; font-weight: 700; }
.equipment-photos img { width: 100%; max-height: 8rem; object-fit: contain; }
.installer-call { margin: .8rem auto; }
.service-panel .centered { line-height: 1.8; }
.site-footer { padding: 1rem; text-align: center; font-weight: 700; }
.footer-logo { width: min(25rem, 80vw); height: auto; border-radius: 12px; }
.load-error { padding: .75rem; border: 2px solid #a00; background: white; text-align: center; }

.product-masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .8rem 1.25rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: .75rem clamp(.75rem, 3vw, 2rem);
}
.product-masthead img { display: block; width: min(20rem, 76vw); height: auto; }
.product-main { min-height: 55vh; }
.product-heading { margin: 0 0 1rem; padding: .75rem; border: 2px solid var(--line); border-radius: 5px; background: var(--panel); text-align: center; }
.product-heading h1 { margin: .1rem 0; font-size: clamp(1.5rem, 4vw, 2.2rem); font-style: italic; }
.product-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .95fr); gap: 1rem; align-items: start; }
.product-gallery, .product-information { min-width: 0; padding: .85rem; border: 2px solid var(--line); border-radius: 5px; background: var(--panel); }
.featured-image { display: block; width: 100%; max-height: 28rem; aspect-ratio: 4 / 3; object-fit: contain; background: rgba(255,255,255,.8); }
.gallery-controls { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin: .4rem 0; font-weight: 700; }
.gallery-arrow { min-width: 2.75rem; min-height: 2.5rem; border: 2px solid var(--line); border-radius: 1rem; background: var(--pool-blue); color: var(--ink); font-size: 1.5rem; font-weight: 800; cursor: pointer; }
.gallery-arrow:hover { background: var(--pool-blue-deep); color: white; }
.gallery-thumbnails { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.gallery-thumbnail { width: 4.75rem; height: 3.75rem; padding: .15rem; border: 2px solid #555; background: white; cursor: pointer; }
.gallery-thumbnail[aria-current="true"] { border-color: var(--pool-blue-deep); box-shadow: 0 0 0 2px var(--pool-blue-deep); }
.gallery-thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-information h2 { margin: 0 0 .5rem; text-align: center; }
.detail-price-table { margin: 0 auto .75rem; }
.detail-price-table th { text-align: left; }
.product-single-price { margin: .5rem 0 1rem; padding: .5rem; border: 2px solid var(--line); background: #fff; text-align: center; font-size: 1.2rem; font-weight: 800; }
.feature-list { margin: .75rem 0 0; padding-left: 1.25rem; }
.feature-list li { margin: .35rem 0; }

[hidden] { display: none !important; }

@media (max-width: 800px) {
  .equipment-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-layout { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .masthead { padding-top: .55rem; }
  .brand-logo { width: min(25rem, 92vw); }
  .address-grid { grid-template-columns: 1fr 1fr; gap: .35rem; }
  .contact-card { padding: .3rem .25rem; font-size: .88rem; }
  #hours-list { flex-direction: column; gap: 0; }
  .hours-list-item { justify-content: center; }
  .phones-strip ul { flex-direction: column; gap: .12rem; }
  .pool-grid { grid-template-columns: 1fr; gap: .6rem; }
  .pool-card { padding: .65rem; }
  .included-list { grid-template-columns: 1fr; }
  .price-table th, .price-table td { padding: .32rem .35rem; }
}

@media (min-width: 561px) {
  .pool-card:last-child { grid-column: 1 / -1; width: min(50%, 36rem); justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}