/* ==========================================================================
   2gmed refresh layer
   --------------------------------------------------------------------------
   Loaded AFTER main.css (see templates/layout.php) so it wins the cascade
   without editing 3,800 lines of legacy theme CSS. Same palette, same
   Futura PT, same navy/sky identity — modernized scale, spacing, and states.
   Everything here is additive: delete this file and the old site returns.
   ========================================================================== */

:root {
  /* Palette — lifted from the existing theme, just named */
  --navy: #0d3357;
  --navy-deep: #08243f;
  --navy-soft: #1b4a76;
  --sky: #6fc3ef;
  --sky-deep: #2f9bd4;
  --ink: #12253a;
  --muted: #5b7085;
  --line: #dde5ec;
  --surface: #fff;
  --surface-alt: #f4f8fb;

  /* Type scale — fluid, so it stops shouting on laptops */
  --step--1: clamp(0.875rem, 0.83rem + 0.2vw, 0.95rem);
  --step-0: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --step-2: clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.45rem + 1.4vw, 2.6rem);
  --step-4: clamp(2.25rem, 1.6rem + 3vw, 4rem);

  /* Spacing rhythm */
  --space-section: clamp(3.5rem, 6vw, 6.5rem);
  --space-block: clamp(1.5rem, 3vw, 2.5rem);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 26px;
  --shadow-sm: 0 1px 2px rgba(13, 51, 87, .06), 0 4px 12px rgba(13, 51, 87, .06);
  --shadow-md: 0 2px 6px rgba(13, 51, 87, .08), 0 14px 34px rgba(13, 51, 87, .1);
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* Reading measure. Legacy prose ran the full 1160px wrap, which is ~150
     characters a line — roughly twice a comfortable reading width. */
  --measure: 68ch;
}

/* --------------------------------------------------------------------------
   1. Foundations
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.6;
  max-width: none;               /* legacy capped the body at 1920px */
  background: var(--surface);
}

/* A single, visible keyboard focus ring. The legacy theme killed outlines
   globally (outline: 0) which made the site unusable by keyboard. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--sky-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link for keyboard + screen-reader users */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 12px 20px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  text-decoration: none;
}

/* min() rather than width + max-width, because pages/cart.php sets an inline
   max-width on .wrap that was overriding the theme's 94% gutter and pushing
   the cart page off-screen on phones. */
.wrap { width: min(1160px, 94%); }

/* Typography ------------------------------------------------------------- */

h1 {
  font-size: var(--step-4);
  line-height: 1.03;
  letter-spacing: -.02em;
  margin-bottom: .4em;
}

h2 {
  font-size: var(--step-3);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin-bottom: .5em;
}

h3 {
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
}

p {
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  padding-bottom: 1em;
}

/* Cap measure so 1160px containers don't produce 140-character lines */
.next-generation .text p,
.section-lead,
.purchase-note p,
.testimonials .item p,
.entry-content > p { max-width: 68ch; }

.section-lead { margin-left: auto; margin-right: auto; }

/* Section rhythm --------------------------------------------------------- */

.sections > section { padding-block: var(--space-section); }
.sections > section:first-child { padding-top: clamp(2.5rem, 4vw, 4rem); }

/* The decorative rule behind section titles was 8px of solid sky —
   heavy and it collided with long headings. Make it a hairline. */
.full-line-title { margin-bottom: var(--space-block); }
.full-line-title:before { height: 2px; background: var(--line); }
.full-line-title h2 { padding: 0 24px; background: var(--surface); }

/* --------------------------------------------------------------------------
   2. Buttons — one language, everywhere
   Legacy had two: a 34px/4px-border outlined pill on marketing sections and a
   small solid navy rounded-rect from WooCommerce. Same shape, same weights now.
   -------------------------------------------------------------------------- */

.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  font-family: 'Futura', Helvetica, Arial, sans-serif;
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: 16px 30px;
  min-height: 52px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-sm);
  transition: background .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease),
              box-shadow .2s var(--ease);
}

.btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--navy-soft);
  border-color: var(--navy-soft);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active { transform: translateY(0); background: var(--navy-deep); }

/* Secondary / outline variant. `.btn.none` is the legacy class used on the
   trust-marks pair; keep it working rather than rewriting that markup. */
.btn.btn-secondary,
.btn.none {
  background: transparent;
  color: var(--navy);
  box-shadow: none;
}
.btn.btn-secondary:hover,
.btn.none:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* On dark backgrounds */
.btn.on-dark {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}
.btn.on-dark:hover { background: var(--sky); border-color: var(--sky); color: var(--navy-deep); }

.btn em { font-size: 1.05em; }

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid rgba(13, 51, 87, .12);
  box-shadow: 0 1px 0 rgba(13, 51, 87, .04);
}

/* 9px white-on-#6fc3ef failed contrast and was near-unreadable. */
.header .top-header { background: var(--navy-deep); padding: 9px 5%; }
.header .top-header a {
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .85);
  margin: 0 14px;
}
.header .top-header a:hover { color: #fff; text-decoration: none; }

.header .middle-header { padding: 16px 0; }

.main_nav .level_a > li > a {
  font-size: 15px;
  letter-spacing: .01em;
  padding-block: 6px;
}
.main_nav .level_a > li > .sub-menu {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* Breadcrumb bar was #707070 — an off-palette grey slab under a navy header. */
.header .bottom-header { background: var(--surface-alt); padding: 12px 0; }
.header .bottom-header span { font-size: 11px; color: var(--muted); letter-spacing: .06em; }
.header .bottom-header a { color: var(--muted); }
.header .bottom-header a:hover { color: var(--navy); }
.header .bottom-header .current-item,
.header .bottom-header .current-item span { color: var(--navy); }

.header .middle-header .right-part .search-icon { margin-right: 28px; }
.header .middle-header .right-part .search-icon em:before { font-size: 24px; }
.header .middle-header .right-part a.cart-contents em:before { font-size: 26px; }

/* --------------------------------------------------------------------------
   4. Home — hero
   -------------------------------------------------------------------------- */

/* The splash artwork is the brand's water cue. On the packaging and the
   HydroSeal sell sheet it frames the row of product circles, so here it
   hangs off the picker (not the whole hero) and bleeds to the viewport edge. */
.water-design:before, .water-design:after { opacity: .32; background-size: auto 46%; }

.home-top-section { overflow-x: clip; }
.barrier-picker { position: relative; isolation: isolate; }
.barrier-picker:before, .barrier-picker:after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -12%;
  bottom: -18%;
  width: 34vw;
  background-repeat: no-repeat;
  background-size: auto 100%;
  pointer-events: none;
  /* the JPGs stop dead at their bottom edge; fade it into the page */
  -webkit-mask-image: linear-gradient(to top, transparent, #000 22%);
  mask-image: linear-gradient(to top, transparent, #000 22%);
}
.barrier-picker:before {
  right: calc(100% - 13vw);
  background-image: url('../img/left-before.jpg');
  background-position: right bottom;
}
.barrier-picker:after {
  left: calc(100% - 13vw);
  background-image: url('../img/right-after.jpg');
  background-position: left bottom;
}
@media (max-width: 1024px) {
  .barrier-picker:before, .barrier-picker:after { display: none; }
}

.home-top-section { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

.hero-lede {
  max-width: 760px;
  margin: 0 auto clamp(2.25rem, 4vw, 3.25rem);
  text-align: center;
}

.hero-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(111, 195, 239, .18);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.home-top-section h1 {
  margin-bottom: .25em;
  text-align: center;
  color: var(--navy);
}

.hero-sub {
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.5;
  color: var(--muted);
  max-width: 46ch;
  margin: 0 auto;
  padding-bottom: 0;
  text-wrap: balance;
}

.hero-lede h1, .qa-heading h2, .full-line-title h2 { text-wrap: balance; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 28px;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: center;
  margin-top: 26px;
  padding: 0;
  list-style: none;
}
.hero-facts li {
  font-size: var(--step--1);
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-facts li:before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sky-deep);
  flex: none;
}

.range-label {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
  padding-bottom: 0;
}

/* Product picker ---------------------------------------------------------
   Matches the HydroSeal sell sheet: navy-outlined circle illustration over a
   solid navy pill. No card chrome; the whole item is the target. */

.header-products .item {
  padding: 0;
  background: transparent;
  border: 0;
  text-align: center;
  transition: transform .25s var(--ease);
}
.header-products .item:hover { transform: translateY(-4px); text-decoration: none; }
.header-products .item .image { min-height: 0; margin-bottom: 22px; }
.header-products .item .image img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto;
  border-radius: 50%;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--surface);
  transition: box-shadow .25s var(--ease);
}
.header-products .item:hover .image img { box-shadow: var(--shadow-md); }
.header-products .item .image.framed img { max-width: none; aspect-ratio: auto; border-radius: var(--radius); }

.header-products .item .btn-top-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 64px;
  max-width: 260px;
  margin: 0 auto;
  padding: 10px 20px;
  border: 2px solid var(--navy-deep);
  border-radius: 20px;
  background: var(--navy-deep);
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.header-products .item:hover .btn-top-section { margin-top: 0; background: #fff; color: var(--navy-deep); }
.header-products .item .btn-top-section span.title {
  display: block;
  font-size: var(--step-0);
  font-weight: 700;
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
}
.header-products .item .btn-top-section span.learn-more {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: inherit;
  opacity: .75;
  text-transform: none;
  letter-spacing: 0;
}

.product-group { margin-top: clamp(3rem, 5vw, 4.5rem); }
.product-group h2 { text-align: center; margin-bottom: .15em; }
.product-group .group-sub {
  text-align: center;
  color: var(--muted);
  font-size: var(--step-0);
  margin-bottom: var(--space-block);
}
.product-group .header-products.center { justify-content: center; }
.product-group .header-products .item { max-width: 340px; }

/* Legacy dropped the picker straight from four-up to one-up at 768px, so a
   tablet had to scroll four full-height cards to compare the range. */
@media (min-width: 481px) and (max-width: 1024px) {
  .home-top-section .header-products { width: 100%; margin: 0; gap: 16px; }
  .home-top-section .header-products > .item { width: calc(50% - 8px); margin: 0; }
}

/* --------------------------------------------------------------------------
   5. Home — positioning band + intro
   -------------------------------------------------------------------------- */

.next-generation .top {
  background: var(--navy);
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
}
.next-generation .top .title {
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  max-width: 26ch;
  margin: 0 auto;
}
.next-generation .text p { color: var(--ink); }

/* The shower illustration is 740px tall and absolutely positioned, so it hung
   ~240px below this band and ran into the "Sizes" heading. Give the band
   room for it and centre the copy against it. Hidden below 1024px anyway. */
@media (min-width: 1025px) {
  .next-generation .bottom {
    display: flex;
    align-items: center;
    min-height: 720px;
  }
}
.next-generation .text strong { color: var(--navy); }

/* --------------------------------------------------------------------------
   6. Home — the five questions
   Was a five-panel pinwheel of rotated diamonds with 14px white text over a
   busy stock photo. Rotated text can't be read, doesn't reflow, and the
   copy was absolutely positioned at hand-tuned pixel offsets that only
   held together at exactly 996px. Same content, now a grid of cards.
   -------------------------------------------------------------------------- */

.wrap-qa {
  min-height: 0;
  padding-block: var(--space-section);
  background-position: center 30%;
}
.wrap-qa:before { background: linear-gradient(180deg, rgba(6, 26, 45, .9), rgba(6, 26, 45, .82)); }

.wrap-qa .center-image { display: none; }      /* the rotated 5Ws artwork */

.wrap-qa .wrap { display: block; text-align: left; }

.qa-heading {
  text-align: center;
  max-width: 34ch;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.qa-heading h2 { color: #fff; margin-bottom: .3em; }
.qa-heading p { color: rgba(255, 255, 255, .72); padding-bottom: 0; }

/* 6-track grid so five cards resolve to a clean 3 + 2 instead of leaving an
   orphan in a four-up row. */
.wrap-qa .qa {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.wrap-qa .qa .item { grid-column: span 2; }
.wrap-qa .qa .item:nth-child(4) { grid-column: 1 / span 3; }
.wrap-qa .qa .item:nth-child(5) { grid-column: 4 / span 3; }

@media (max-width: 900px) {
  .wrap-qa .qa { grid-template-columns: repeat(2, 1fr); }
  .wrap-qa .qa .item,
  .wrap-qa .qa .item:nth-child(4),
  .wrap-qa .qa .item:nth-child(5) { grid-column: auto / span 1; }
  .wrap-qa .qa .item:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .wrap-qa .qa { grid-template-columns: 1fr; }
  .wrap-qa .qa .item,
  .wrap-qa .qa .item:nth-child(4),
  .wrap-qa .qa .item:nth-child(5) { grid-column: 1 / -1; }
}

.wrap-qa .qa .item {
  position: static;
  margin: 0;
  padding: 26px 26px 28px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(2px);
}
/* Last card spans the leftover track on 2- and 3-up layouts */
.wrap-qa .qa .item h3 {
  font-size: var(--step-1);
  font-weight: 700;
  color: #fff;
  margin-bottom: .5em;
}
.wrap-qa .qa .item p {
  font-size: var(--step--1);
  line-height: 1.6;
  color: rgba(255, 255, 255, .8);
  padding-bottom: 0;
}
/* Hard <br> line breaks were tuned for the old fixed-width panels */
.wrap-qa .qa .item p br { display: none; }

.wrap-qa .order-btn {
  position: static;
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* --------------------------------------------------------------------------
   7. Home — gallery, video, applications, audience, packaging
   -------------------------------------------------------------------------- */

.gallery-video h2 { font-size: var(--step-3); }

.gallery-video .gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  margin: 0 0 var(--space-block);
}
.gallery-video .gallery > * { width: auto; margin: 0; }
/* Ratio lives on the tile, not the image, so a row of portrait and landscape
   source photos still lines up. Legacy pinned img height to 248px, which
   letterboxed the tall shots and stretched the wide ones. */
.gallery-video .gallery .item {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-alt);
  /* Several source photos are cut out on white, so without an edge those
     tiles lost their shape against the page and the grid looked ragged. */
  border: 1px solid var(--line);
  align-self: start;
}
.gallery-video .gallery .item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.gallery-video .gallery .item:hover img { transform: scale(1.04); }
.gallery-video .gallery .item:first-child { grid-column: 1 / -1; }
.gallery-video .gallery .item:first-child img { aspect-ratio: 21 / 9; }

@media (max-width: 768px) {
  .gallery-video .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .gallery-video .gallery { grid-template-columns: 1fr; }
  .gallery-video .gallery .item:first-child img { aspect-ratio: 16 / 9; }
}

/* Fixed height="558" iframe letterboxed on every viewport but one. */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-md);
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.directions-section .video p { padding-bottom: 0; }

.applications-section { background: var(--surface-alt); }
.applications-section .full-line-title h2 { background: var(--surface-alt); }
/* Legacy laid these out as flex rows with percentage widths. Switching the
   container to grid leaves those widths shrinking each item inside its own
   track, so they have to be reset. */
.applications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  width: 100%;
  margin: var(--space-block) 0 0;
}
.applications-grid .app-col {
  width: auto;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}
.applications-grid .app-col h3 { margin-bottom: 14px; }
.applications-section .custom-ul > ul > li { font-size: var(--step-0); }

/* Six items: pin to three columns so it resolves 3 + 3 rather than 4 + 2. */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
  margin: var(--space-block) 0 0;
}
@media (max-width: 860px) { .audience-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .audience-grid { grid-template-columns: 1fr; } }
.audience-grid .audience-item {
  width: auto;
  margin: 0;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--navy);
  text-align: center;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.audience-section .audience-item:hover {
  border-color: rgba(111, 195, 239, .8);
  box-shadow: var(--shadow-sm);
}

/* Sizes: one photo of the range, then the list — so sizes are stated once. */
.packaging-section .packaging-shot {
  margin: var(--space-block) 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.packaging-section .packaging-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.packaging-section .size-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 900px) { .packaging-section .size-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .packaging-section .size-list { grid-template-columns: repeat(2, 1fr); } }
.packaging-section .size-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}
.packaging-section .size-list .size {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--navy);
}
.packaging-section .size-list .code {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Glove/Sleeve and Boot: one photo of both cartons, captions underneath. */
.packaging-section .packaging-duo {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.packaging-section .packaging-duo img {
  display: block;
  width: 100%;
  height: auto;
}
.packaging-section .packaging-duo figcaption {
  display: grid;
  grid-template-columns: 2fr 3fr; /* the Sleeve carton is the smaller one */
  gap: 12px clamp(16px, 3vw, 28px);
  padding: 16px 20px 20px;
  font-size: var(--step--1);
  color: var(--muted);
}
@media (max-width: 760px) { .packaging-section .packaging-duo figcaption { grid-template-columns: 1fr; } }
.packaging-section .packaging-duo figcaption a { color: inherit; }
.packaging-section .packaging-duo figcaption a:hover { color: var(--navy); }
.packaging-section .packaging-duo figcaption strong { color: var(--navy); }

/* --------------------------------------------------------------------------
   8. Trust marks + testimonials
   -------------------------------------------------------------------------- */

.trust-marks { background: var(--surface); }
.trust-marks .trust-group-label {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted);
}
/* The -28px side margins spilled past the viewport on phones. Gap does the
   same job without breaking out of the container. */
.trust-marks .trust-logos { margin: 0; gap: clamp(20px, 5vw, 56px); }
.trust-marks .trust-logo { padding: 14px 0; }
/* Medline's asset is a white wordmark inside a filled blue square, so unlike
   the other marks it can't be flattened to grey type. Desaturate it so the
   tile reads as intentional next to the greyscale wordmarks. Replace with a
   transparent-background wordmark when one is available. */
.trust-marks .trust-logo img.logo-medline {
  filter: grayscale(1);
  opacity: .45;
  border-radius: 6px;
}
.trust-marks .trust-logo:hover img.logo-medline { filter: none; opacity: 1; }
.trust-marks .purchase-note p:last-child {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.trust-marks .trust-disclaimer { font-size: 12px; color: var(--muted); }

.testimonials { background: var(--surface-alt); }
.testimonials .full-line-title h2 { background: var(--surface-alt); }
.testimonials .testimonials-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  align-items: start;
}
.testimonials .testimonials-items .item {
  width: auto;
  margin: 0;
  padding: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.testimonials .testimonials-items .item p {
  font-size: var(--step-0);
  font-style: normal;
  color: var(--ink);
}
.testimonials .testimonials-items .item .name {
  font-weight: 700;
  color: var(--navy);
  margin-top: 8px;
}
.testimonials .testimonials-items .item .address { color: var(--muted); font-size: var(--step--1); }

.instructions .block-center img { border-radius: var(--radius); }
.instructions .text a {
  display: inline-block;
  margin-top: 18px;
  font-weight: 700;
  color: var(--sky-deep);
}

/* --------------------------------------------------------------------------
   9. Shop + product pages
   -------------------------------------------------------------------------- */

/* The legacy theme sets `.woocommerce .button` entirely in !important, so the
   shop CTA can only be brought into the shared button language in kind. */
.woocommerce .button {
  font-size: var(--step--1) !important;
  padding: 16px 30px !important;
  border-radius: 999px !important;
  border: 2px solid var(--navy) !important;
  background: var(--navy) !important;
  color: #fff !important;
}
.woocommerce .button:hover {
  border: 2px solid var(--navy-soft) !important;
  background: var(--navy-soft) !important;
  color: #fff !important;
}

.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 16px 22px;
  background: var(--surface);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}
/* Pin the CTA to the card floor so a two-line title doesn't stagger the row */
.woocommerce ul.products li.product .button { margin-top: auto; align-self: flex-start; }
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  border-color: rgba(111, 195, 239, .7);
  box-shadow: var(--shadow-md);
}
/* The 2px navy outline on every thumbnail double-framed the new card border. */
.woocommerce .products ul li.product a img,
.woocommerce ul.products li.product a img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 10px;
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0 0 16px;
  background: var(--surface-alt);
}
.woocommerce div.product div.images img { border: 0; border-radius: var(--radius); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--navy);
  padding: 0 0 12px;
}
.woocommerce ul.products li.product .price { color: var(--muted); font-size: var(--step-0); }

.woocommerce div.product .product_title { font-size: var(--step-3); }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--navy); font-size: var(--step-2); font-weight: 700; }
.woocommerce div.product form.cart .variations select {
  border-radius: 10px;
  border: 1px solid var(--line);
  min-height: 48px;
}
.woocommerce .quantity .qty {
  border-radius: 10px;
  border: 1px solid var(--line);
  min-height: 48px;
}

.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-radius: var(--radius);
  border-top-color: var(--sky-deep);
}

/* Form controls: legacy set every input to 24px/40px tall. */
input[type='text'], input[type='number'], input[type='email'],
input[type='password'], input[type='search'], input[type='tel'], textarea, select {
  font-size: var(--step-0);
  min-height: 48px;
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 10px 14px;
}
textarea { min-height: 140px; }
input[type='text']:focus, input[type='email']:focus,
input[type='tel']:focus, textarea:focus, select:focus {
  border-color: var(--sky-deep);
  box-shadow: 0 0 0 3px rgba(47, 155, 212, .16);
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

footer .top-footer { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
footer .top-footer .wrap { gap: 24px; flex-wrap: wrap; }
footer .top-footer a:not(.btn) { font-size: var(--step-0); }
footer #menu-footer-menu li a { font-size: var(--step--1); }
footer .top-footer .center .btn { background: #fff; border-color: #fff; color: var(--navy); }
footer .top-footer .center .btn:hover { background: var(--sky); border-color: var(--sky); color: var(--navy-deep); }

/* White on #6fc3ef was ~1.9:1. */
footer .bottom-footer { background: var(--navy-deep); }
footer .bottom-footer .copyright { color: rgba(255, 255, 255, .7); font-size: 13px; }

/* --------------------------------------------------------------------------
   11. Responsive touch-ups
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .header { position: static; }        /* burger menu overlays a fixed header */
}

@media (max-width: 768px) {
  .header .top-header { padding: 8px 16px; }
  .header .top-header a { font-size: 11px; margin: 0 8px; }
  .hero-actions .btn { flex: 1 1 220px; }
  .testimonials .testimonials-items .item { padding: 24px; }
  .applications-section .app-col { padding: 22px; }
}

@media (max-width: 480px) {
  .header-products .item .btn-top-section span.title { font-size: var(--step-0); }
  .wrap-qa .qa .item { padding: 22px; }
}

/* ==========================================================================
   12. Motion
   --------------------------------------------------------------------------
   Everything here is scoped behind .js-reveal, which reveal.js only adds when
   JavaScript is running AND the visitor has not asked for reduced motion. With
   JS off, or motion reduced, the page renders in its final state — no blank
   sections, no dependency on an animation firing.
   ========================================================================== */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* WP Rocket marks these sections data-wpr-lazyrender, which applies
   content-visibility: auto. The browser skips rendering them entirely until
   they approach the viewport, so IntersectionObserver cannot report them and
   they would sit hidden until the failsafe fires. WP Rocket is already doing
   progressive rendering there — don't stack a second mechanism on top. */
.js-reveal [data-wpr-lazyrender] [data-reveal],
.js-reveal [data-wpr-lazyrender] [data-reveal-stagger] > * {
  opacity: 1;
  transform: none;
}

/* Staggered containers reveal their children, not themselves. */
.js-reveal [data-reveal-stagger] { opacity: 1; transform: none; }
.js-reveal [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js-reveal [data-reveal-stagger] > *.is-revealed {
  opacity: 1;
  transform: none;
}

/* Hero copy leads on load rather than on scroll — it is already in view. */
.js-reveal .hero-lede > * {
  animation: rise-in .7s var(--ease) both;
}
.js-reveal .hero-eyebrow { animation-delay: .05s; }
.js-reveal .hero-lede h1 { animation-delay: .12s; }
.js-reveal .hero-sub     { animation-delay: .2s; }
.js-reveal .hero-actions { animation-delay: .28s; }
.js-reveal .hero-facts   { animation-delay: .36s; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Water artwork drifts almost imperceptibly, so the hero is not dead still. */
.js-reveal .water-design:before { animation: drift-l 14s ease-in-out infinite; }
.js-reveal .water-design:after  { animation: drift-r 16s ease-in-out infinite; }
.js-reveal .barrier-picker:before { animation: drift-l 14s ease-in-out infinite; }
.js-reveal .barrier-picker:after  { animation: drift-r 16s ease-in-out infinite; }

@keyframes drift-l {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-6px, -8px, 0); }
}
@keyframes drift-r {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(6px, -10px, 0); }
}

/* Sticky header compacts on scroll. */
.header {
  transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.header .middle-header {
  transition: padding .25s var(--ease);
}
.header.is-stuck { box-shadow: 0 4px 20px rgba(13, 51, 87, .14); }
.header.is-stuck .middle-header { padding: 9px 0; }
.header.is-stuck .top-header {
  /* Fold the contact strip away to buy back vertical space. */
  max-height: 0;
  padding-block: 0;
  overflow: hidden;
  transition: max-height .25s var(--ease), padding .25s var(--ease);
}
.header .top-header {
  max-height: 60px;
  transition: max-height .25s var(--ease), padding .25s var(--ease);
}
@media (max-width: 1024px) {
  /* Header is not sticky below this width, so nothing should collapse. */
  .header.is-stuck .top-header { max-height: 60px; padding-block: 8px; }
  .header.is-stuck .middle-header { padding: 15px 0; }
}

/* --- Micro-interactions -------------------------------------------------- */

/* Nav underline that grows from the centre instead of snapping on. */
.main_nav .level_a > li > a { position: relative; }
.main_nav .level_a > li > a:after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 2px;
  background: var(--sky);
  transition: left .25s var(--ease), right .25s var(--ease);
}
.main_nav .level_a > li > a:hover:after,
.main_nav .level_a > li.current-menu-item > a:after { left: 0; right: 0; }

/* Cart badge pops when the count changes. */
.header .middle-header .right-part a.cart-contents span {
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.header .middle-header .right-part a.cart-contents:hover span { transform: scale(1.12); }

/* Product tiles lift their image slightly, not just the card. */
.header-products .item .image img { transition: transform .35s var(--ease); }
.header-products .item:hover .image img { transform: scale(1.04); }

.header-products .item .btn-top-section span.learn-more {
  transition: transform .25s var(--ease);
  display: inline-block;
}
.header-products .item:hover .btn-top-section span.learn-more { transform: translateX(4px); }

/* Buttons get a subtle sheen on hover rather than only a colour change. */
.btn { position: relative; overflow: hidden; }
.btn:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease);
  pointer-events: none;
}
.btn:hover:after { transform: translateX(120%); }

/* Audience and application cards raise on hover. */
.audience-grid .audience-item,
.applications-grid .app-col {
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.audience-grid .audience-item:hover,
.applications-grid .app-col:hover { transform: translateY(-3px); }

/* Q&A cards brighten as the pointer passes. */
.wrap-qa .qa .item {
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.wrap-qa .qa .item:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .3);
  transform: translateY(-3px);
}

/* Trust logos come up to full strength individually. */
.trust-marks .trust-logo img { transition: filter .3s var(--ease), opacity .3s var(--ease); }

/* Honour the OS setting even for the decorative loops above. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .water-design:before,
  .js-reveal .barrier-picker:before,
  .js-reveal .barrier-picker:after,
  .js-reveal .water-design:after,
  .js-reveal .hero-lede > * { animation: none; }
  .btn:after { display: none; }
}

/* ==========================================================================
   13. Inner pages
   --------------------------------------------------------------------------
   Sections 4-9 modernised the home page, the shop and the product templates.
   Everything else — HydroSeal, Flex, Sleeve, Boot, ProNet, About, Blog,
   Contact — was still rendering on raw main.css: 80px hard-coded section
   padding, 24px bullet lists, square-cornered images at fixed pixel heights,
   and a 1160px measure on body copy.

   This section puts those pages on the same tokens the home page uses, so the
   spacing rhythm, type scale, corner radius and hover language carry across
   the whole site. Scoped to body:not(.home) throughout, so nothing here can
   reach back and disturb the home page.
   ========================================================================== */

/* 13.1 Page rhythm --------------------------------------------------------
   One vertical rhythm instead of per-section 80/60/20px guesses. */

body:not(.home) :is(
  .top-section, .applications, .features-include, .sizes, .directions-section,
  .instructions, .next-generation, .pronet, .hydroseal-boot, .hydroseal-sleeve,
  .hydroseal-flex, .comments, .related, .products, .trust-marks
) {
  padding-block: var(--space-section);
}

/* Pages built as a bare .wrap (About, Contact, Blog) rather than sections. */
body:not(.home) #wrap > div.wrap,
body:not(.home) #wrap > div > div.wrap {
  padding-block: var(--space-section);
}

/* Consecutive bands of the same colour would otherwise double their padding
   at the seam. */
body:not(.home) .sizes + .directions-section { padding-top: 0; }

/* The hero already ends on generous whitespace; a full section gap under it
   as well reads as a hole in the page. */
body:not(.home) .top-section { padding-bottom: clamp(2rem, 3.5vw, 3.5rem); }

/* 13.2 Page hero ----------------------------------------------------------
   .top-title was max-content wide with a right-aligned 46px h2 — a layout
   that only ever worked for the one page it was written for. Centred and put
   on the fluid scale, it reads as a smaller sibling of the home hero. */

body:not(.home) .top-title,
body:not(.home) .top-section .wrap > h1:first-child {
  max-width: 48rem;
  margin: 0 auto var(--space-block);
  text-align: center;
}

body:not(.home) :is(.top-title, .top-section) h1 {
  font-size: var(--step-4);
  line-height: 1.03;
  letter-spacing: -.02em;
  text-align: center;
  margin-bottom: .25em;
}

/* The h2 under a page title is a subtitle, not a second heading level. */
body:not(.home) :is(.top-title, .top-section) h2 {
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-align: center;
  color: var(--muted);
  max-width: var(--measure);
  margin: 0 auto var(--space-block);
}

/* 13.3 Galleries ----------------------------------------------------------
   Legacy: flex with -1% margins, 31.33% widths and a fixed 248px image
   height. Grid handles the wrap points on its own and keeps the gutters
   even at every width. */

body:not(.home) .top-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  width: 100%;
  margin: 0 0 var(--space-block);
}

body:not(.home) .top-gallery > * {
  width: auto;
  margin: 0;
}

body:not(.home) .top-gallery img {
  display: block;
  width: 100%;
  height: clamp(210px, 21vw, 290px);
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

body:not(.home) .top-gallery img:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Content images elsewhere on the page get the same corner + shadow so a
   photo never lands as a bare rectangle. */
body:not(.home) :is(.top-info, .main-info, .size-text, .post-content, .info, .image) img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  height: auto;
}

/* 13.4 Two-column intro blocks -------------------------------------------
   .top-info/.flex columns were butted together with no gutter and no shared
   baseline, so ProNet's two product shots sat at different heights with the
   copy jammed against the image edge. */

/* These rows are .flex + .col-6 (flex-basis: 48.5%) inside a space-between
   parent, so the 3% gutter is baked into the column width — adding a `gap`
   overflows the row and drops the second column onto its own line. Grid gives
   a real gutter and lets the columns take what is left. */
body:not(.home) .top-info.flex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-bottom: var(--space-block);
}

body:not(.home) .top-info.flex > * { width: auto; margin: 0; flex-basis: auto; }
body:not(.home) .top-info.flex p:last-child { margin-bottom: 0; }
body:not(.home) .top-info .btn { margin-top: 8px; }

/* 13.5 Prose + lists ------------------------------------------------------
   24px list items at 1160px wide is a 150-character measure set at heading
   size. Down to body scale, capped at a readable width, with the marker
   turned into a small sky dot that lines up with the text. */

body:not(.home) :is(.main-info, .custom-ul, .post-content, .fine-print) p {
  max-width: var(--measure);
}

body:not(.home) .custom-ul > ul {
  padding-left: 0;
  list-style: none;
  max-width: var(--measure);
}

body:not(.home) .custom-ul > ul > li {
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.5;
  color: var(--navy);
  margin-bottom: .8em;
  padding-left: 1.6em;
}

body:not(.home) .custom-ul > ul > li:before {
  top: .5em;
  left: .3em;
  width: 9px;
  height: 9px;
  background: var(--sky-deep);
}

/* Nested levels step down in size and marker weight instead of repeating the
   same 12px dot at three depths. */
body:not(.home) .custom-ul > ul > li > ul {
  margin-top: .6em;
  padding-left: 1.6em;
}

body:not(.home) .custom-ul > ul > li > ul > li {
  font-size: var(--step-0);
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: .45em;
  padding-left: 1.5em;
}

/* Third level. main.css only ever defined markers two deep, so these items
   inherited a 12px square positioned for a list that no longer indents that
   way — it landed outside the text column and read as unmarked. */
body:not(.home) .custom-ul > ul > li > ul > li > ul {
  margin-top: .45em;
  padding-left: 1.3em;
}

body:not(.home) .custom-ul > ul > li > ul > li > ul > li {
  font-size: var(--step--1);
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: .3em;
  padding-left: 1.3em;
}

body:not(.home) .custom-ul > ul > li > ul > li > ul > li:before {
  top: .62em;
  left: 0;
  width: 7px;
  height: 2px;
  border: 0;
  border-radius: 2px;
  background: var(--sky-deep);
  opacity: .7;
}

body:not(.home) .custom-ul > ul > li > ul > li:before {
  top: .6em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
  border: 1.5px solid var(--sky-deep);
}

body:not(.home) .main-info h2 {
  font-size: var(--step-2);
  margin-bottom: .6em;
}

/* 13.6 Callout panel ------------------------------------------------------
   The navy "Where HydroSeal Is Used" block was a hard-edged rectangle. */

body:not(.home) .applications .right-part,
body:not(.home) .applications .text {
  border-radius: var(--radius-lg);
}

body:not(.home) .applications .text {
  box-shadow: var(--shadow-md);
}

body:not(.home) .applications .wrap.flex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

body:not(.home) .applications .wrap.flex > * { width: auto; margin: 0; flex-basis: auto; }

/* 13.7 Features band ------------------------------------------------------ */

body:not(.home) .features-include {
  border-radius: var(--radius-lg);
  width: min(1160px, 94%);
  margin-inline: auto;
}

body:not(.home) .features-items .item .img-svg {
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

body:not(.home) .features-items .item:hover .img-svg {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}

body:not(.home) .features-items .item p {
  font-size: var(--step-0);
  line-height: 1.4;
}

/* 13.8 Sizes table --------------------------------------------------------
   Two columns of bare text with no cell padding, wrapping mid-product-name
   ("HydroSeal 7x9 / Flex" broke across lines while the code column sat on
   its own row). Given real padding, a hairline rule and a rounded frame. */

body:not(.home) .sizes .size-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-bottom: 0;
}

body:not(.home) .sizes .size-text > * { width: auto; margin: 0; flex-basis: auto; }

body:not(.home) .sizes .info > p:first-child strong {
  display: block;
  font-size: var(--step-2);
  color: var(--navy);
  margin-bottom: .6em;
}

body:not(.home) .table-bordered {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

body:not(.home) .table-bordered td {
  padding: 12px 18px;
  font-size: var(--step-0);
  line-height: 1.35;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

body:not(.home) .table-bordered tr:last-child td { border-bottom: 0; }
body:not(.home) .table-bordered tr:nth-child(even) td { background: var(--surface-alt); }
body:not(.home) .table-bordered td:last-child {
  font-weight: 700;
  color: var(--navy);
  text-align: right;
}

/* 13.9 Video --------------------------------------------------------------
   A fixed height="558" iframe in a <p>. Below ~990px wide that reserved more
   height than the video needed; above it, less. Aspect ratio instead. */

body:not(.home) .video { padding: 0; }
body:not(.home) .video p { margin: 0; }

body:not(.home) .video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: var(--surface-alt);
}

/* 13.10 Section titles + fine print --------------------------------------- */

body:not(.home) .full-line-title { margin-bottom: var(--space-block); }

body:not(.home) .full-line-title h2 {
  font-size: var(--step-3);
  margin-bottom: 0;
  padding-inline: clamp(16px, 3vw, 32px);
}

body:not(.home) .fine-print {
  margin-top: var(--space-block);
  padding-top: var(--space-block);
  font-size: var(--step--1);
  color: var(--muted);
}

body:not(.home) .fine-print ul { max-width: var(--measure); }
body:not(.home) .fine-print ul li { margin-bottom: .5em; }

/* 13.11 Blog --------------------------------------------------------------
   Post thumbnails were square-cornered with a grey Material-era shadow, and
   the sidebar boxes were 1px navy outlines with the same shadow underneath. */

body:not(.home) .index-style > .flex {
  display: grid;
  grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

body:not(.home) .index-style > .flex > * { width: auto; margin: 0; flex-basis: auto; }

body:not(.home) .index-style .post-item { margin-bottom: var(--space-block); }

body:not(.home) .index-style .post-thumbnail {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

body:not(.home) .index-style .post-thumbnail:hover {
  opacity: 1;
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

body:not(.home) .index-style .post-thumbnail img {
  border-radius: inherit;
  transition: transform .5s var(--ease);
}

body:not(.home) .index-style .post-thumbnail:hover img { transform: scale(1.03); }

body:not(.home) .index-style .post-title {
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -.01em;
}

body:not(.home) .index-style .post-content p { max-width: var(--measure); }

body:not(.home) .aside-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  margin-bottom: 18px;
  background: var(--surface);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}

body:not(.home) .aside-box:hover {
  border-color: var(--sky);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

body:not(.home) .aside-box h3 {
  font-size: var(--step-1);
  margin-bottom: .6em;
}

body:not(.home) .aside-box ul {
  list-style: none;
  padding-left: 0;
}

body:not(.home) .aside-box ul li { margin-bottom: .5em; }
body:not(.home) .aside-box ul li:last-child { margin-bottom: 0; }

body:not(.home) .aside-box a {
  color: var(--muted);
  transition: color .2s var(--ease);
}

body:not(.home) .aside-box a:hover { color: var(--navy); text-decoration: none; }

/* 13.12 Forms -------------------------------------------------------------
   Contact and comment fields were square, hairline-grey and gave no focus
   feedback beyond the browser default the theme had already suppressed. */

body:not(.home) :is(.input-field, .comment-form) :is(
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="url"], textarea, select
) {
  width: 100%;
  padding: 14px 16px;
  font-size: var(--step-0);
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

body:not(.home) :is(.input-field, .comment-form) :is(input, textarea, select):focus {
  border-color: var(--sky-deep);
  box-shadow: 0 0 0 3px rgba(47, 155, 212, .18);
  outline: none;
}

body:not(.home) :is(.input-field, .comment-form) :is(input, textarea)::placeholder {
  color: var(--muted);
  opacity: .8;
}

/* Same flex-basis story as the two-column rows: three .col-4 fields come to
   94.8% and the 3% gutter is inside that number, so any gap wraps the third
   field onto its own line. */
body:not(.home) .contact-form > .flex {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

body:not(.home) .contact-form > .flex > * { width: auto; margin: 0; flex-basis: auto; }
body:not(.home) .contact-form > .flex > .col-12 { grid-column: 1 / -1; }
body:not(.home) .input-field { margin-bottom: 0; }
body:not(.home) .contact-form textarea { min-height: 190px; resize: vertical; }

/* Contact Form 7 wraps its hidden inputs in a <fieldset>, which the theme
   never reset — the browser's default fieldset border was drawing a stray
   4px-tall rule across the top of the form. */
body:not(.home) .wpcf7 fieldset.hidden-fields-container {
  border: 0;
  margin: 0;
  padding: 0;
}

body:not(.home) .contact-form h2 {
  font-size: var(--step-2);
  margin-bottom: .8em;
}

body:not(.home) .contact-form .block-center { margin-top: 22px; }

@media (max-width: 620px) {
  body:not(.home) .contact-form > .flex { grid-template-columns: minmax(0, 1fr); }
}

/* Contact page: the info column and the form read as one pair. */
body:not(.home) .wpcf7 { margin-top: 0; }

/* 13.13 Comments ---------------------------------------------------------- */

body:not(.home) .comments {
  border-top: 1px solid var(--line);
  background: var(--surface-alt);
}

body:not(.home) .comment-reply-title { font-size: var(--step-2); }
body:not(.home) .comment_wrap { max-width: var(--measure); }

/* 13.14 Inner-page responsive --------------------------------------------
   The .sm-12 / .md-12 classes that used to collapse these rows only act on
   flex-basis, which grid ignores. Restate the breakpoints for the grids. */

@media (max-width: 900px) {
  body:not(.home) .index-style > .flex { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  body:not(.home) .top-info.flex,
  body:not(.home) .applications .wrap.flex,
  body:not(.home) .sizes .size-text {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Photo above the copy it belongs to, not stranded below it. */
  body:not(.home) .sizes .size-text > .image { order: -1; }

  body:not(.home) .top-gallery {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media (max-width: 520px) {
  body:not(.home) .top-gallery { grid-template-columns: minmax(0, 1fr); }
  body:not(.home) .table-bordered td { padding: 11px 14px; }
}

/* 13.15 Floated product images -------------------------------------------
   Boot, Sleeve and Flex put the product shot in the copy as a legacy
   `alignleft` float with an 80px right margin. A capped measure and a float
   fight each other: max-width is measured from the container's left edge, but
   the float eats the first 443px of that box, so the copy wrapped in a 250px
   ribbon down the right-hand side.

   Making each paragraph its own block formatting context sits it BESIDE the
   float rather than flowing around it, so the measure applies to the space
   that is genuinely available. */

body:not(.home) [class*="_info"] { display: flow-root; }

body:not(.home) [class*="_info"] > p { display: flow-root; }

body:not(.home) [class*="_info"] > p:has(> img) { display: block; }

body:not(.home) [class*="_info"] .alignleft {
  margin: 0 clamp(24px, 3.5vw, 48px) 16px 0;
}

body:not(.home) [class*="_info"] .alignright {
  margin: 0 0 16px clamp(24px, 3.5vw, 48px);
}

@media (max-width: 768px) {
  /* Below this the float leaves too little room for either side. */
  body:not(.home) [class*="_info"] :is(.alignleft, .alignright) {
    float: none;
    display: block;
    margin: 0 auto 24px;
  }
}

/* 13.16 Plain page prose --------------------------------------------------
   About and the policy pages are bare h1/p/h2/ul inside a .wrap with no
   content class to hook, so they ran the full 1160px — about 150 characters
   a line. Cap the measure and let headings breathe against it. */

body:not(.home) #wrap > div.wrap > :is(p, ul, ol, h2, h3, h4, blockquote),
body:not(.home) #wrap > div > div.wrap > :is(p, ul, ol, h2, h3, h4, blockquote) {
  max-width: var(--measure);
}

body:not(.home) #wrap > div.wrap > h2,
body:not(.home) #wrap > div > div.wrap > h2 {
  font-size: var(--step-2);
  margin-top: 1.4em;
}

body:not(.home) #wrap > div.wrap > ul,
body:not(.home) #wrap > div > div.wrap > ul {
  padding-left: 1.2em;
  margin-bottom: 1.2em;
}

body:not(.home) #wrap > div.wrap > ul li,
body:not(.home) #wrap > div > div.wrap > ul li {
  margin-bottom: .4em;
}

/* The page's own hero image shouldn't be pinned to the measure column. */
body:not(.home) #wrap > div.wrap > p:has(> img),
body:not(.home) #wrap > div > div.wrap > p:has(> img) {
  max-width: none;
  text-align: center;
}

/* ==========================================================================
   14. Shop grid
   --------------------------------------------------------------------------
   Section 9 gave the product cards their border, radius and hover, but two
   legacy rules underneath were still shaping the row:

     .post-type-archive-product .products .product img { width: 300px
       !important; height: 300px !important }

   which overflowed a 274px-wide card, and floated <li>s inside a display:block
   <ul>, which staggers rows whenever one title wraps to two lines. Grid and a
   matching !important put every card on the same footing.
   ========================================================================== */

.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(18px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  clear: none !important;
  height: 100%;
}

.woocommerce .products .product img,
.post-type-archive-product .products .product img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  border: 0 !important;
}

/* Title block takes the slack so the CTA still lands on the card floor when
   one product name wraps and its neighbours don't. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  min-height: 2.6em;
  line-height: 1.25;
}

@media (max-width: 480px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* Two cards to a phone row leaves ~150px of card; the full-size pill wrapped
   "Select options" onto two lines. */
@media (max-width: 480px) {
  .woocommerce ul.products li.product .button {
    padding: 13px 16px !important;
    font-size: 11px !important;
    letter-spacing: .04em;
    min-height: 44px;
    align-self: stretch;
  }
}

/* The copy in these blocks carries hard <br> line breaks, hand-placed to fit
   the 250px ribbon the float used to leave. With the text back at a real
   measure those breaks fossilise the old column width — a four-word line
   followed by half a page of white space. Let the text wrap itself. */
body:not(.home) :is([class*="_info"], .solution) > p > br,
body:not(.home) :is([class*="_info"], .solution) :is(.top, .bottom) p > br {
  display: none;
}

/* Single post: the featured image is a bare <img> straight inside <main>, so
   it missed the content-image rule above and stayed square. */
body:not(.home) .index-main > img,
body:not(.home) .index-main p > img,
body:not(.home) article img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  height: auto;
  max-width: 100%;
}

body:not(.home) .index-main > img { margin-bottom: var(--space-block); }

/* Post body rhythm — the steps list ran flush against its headings. */
body:not(.home) .index-main :is(h2, h3) { margin-top: 1.5em; }
body:not(.home) .index-main ul { margin-bottom: 1.2em; }
body:not(.home) .index-main ul li { margin-bottom: .35em; }

/* ==========================================================================
   15. Product page (PDP)
   --------------------------------------------------------------------------
   Styles templates/product-page.php, which replaced the five WooCommerce HTML
   snapshots. Nothing here touches .woocommerce selectors — the shop archive
   still runs on sections 9 and 14.
   ========================================================================== */

.pdp-main { padding-block: var(--space-section) 0; }

.pdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

/* --- Gallery ------------------------------------------------------------- */

.pdp-stage {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}

/* Absolutely placed so a portrait photo is letterboxed inside the 4:3 stage.
   As a grid child its 100% height resolved to the image's own height, so tall
   shots (Boot, Flex) overflowed and were clipped to their middle. */
.pdp-stage { position: relative; }
.pdp-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .25s var(--ease);
}

.pdp-thumbs {
  display: grid;
  /* Fixed four across so a two-photo product (ProNet) gets the same thumb
     size as the rest instead of two half-width tiles. */
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.pdp-thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}

.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb:hover { border-color: var(--sky); transform: translateY(-2px); }
.pdp-thumb.is-active { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy) inset; }

/* --- Buy box ------------------------------------------------------------- */

.pdp-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sky-deep);
  padding-bottom: .6em;
}

.pdp-title {
  font-size: var(--step-3);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--navy);
  margin-bottom: .25em;
}

.pdp-tagline {
  font-size: var(--step-1);
  color: var(--muted);
  line-height: 1.4;
  padding-bottom: .8em;
}

.pdp-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5em;
  padding: 14px 0 10px;
  border-top: 1px solid var(--line);
}

.pdp-price-from { font-size: var(--step--1); color: var(--muted); }
.pdp-price-value { font-size: var(--step-3); font-weight: 700; color: var(--navy); line-height: 1; }
.pdp-price-each {
  flex-basis: 100%;
  font-size: var(--step--1);
  color: var(--muted);
}

.pdp-blurb { color: var(--muted); padding-bottom: 1.2em; max-width: 46ch; }

/* --- Form ---------------------------------------------------------------- */

.pdp-field { margin-bottom: 14px; }

.pdp-field label {
  display: block;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}

.pdp-field select {
  width: 100%;
  min-height: 52px;
  padding: 12px 42px 12px 16px;
  font-size: var(--step-0);
  font-family: inherit;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  /* Native arrow varies wildly between platforms; draw a consistent one. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235b7085' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.pdp-field select:focus {
  border-color: var(--sky-deep);
  box-shadow: 0 0 0 3px rgba(47, 155, 212, .18);
  outline: none;
}

.pdp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  margin-top: 18px;
}

.pdp-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface);
}

.pdp-step {
  width: 46px;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}

.pdp-step:hover { background: var(--surface-alt); }

.pdp-qty input {
  width: 58px;
  border: 0;
  border-inline: 1px solid var(--line);
  text-align: center;
  font-size: var(--step-0);
  font-family: inherit;
  color: var(--ink);
  background: transparent;
  -moz-appearance: textfield;
}

.pdp-qty input::-webkit-outer-spin-button,
.pdp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pdp-add { flex: 1 1 200px; }

.pdp-add[aria-disabled="true"] {
  opacity: .45;
  pointer-events: none;
}

.pdp-note {
  font-size: var(--step--1);
  color: var(--muted);
  padding: 10px 0 0;
}

.pdp-assurances {
  list-style: none;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}

.pdp-assurances li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--step--1);
  color: var(--muted);
  margin-bottom: .55em;
}

.pdp-assurances span { color: #3fae6b; font-weight: 700; }

.pdp-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: var(--step--1);
  color: var(--muted);
  padding: 14px 0 0;
}

.pdp-meta a { color: var(--sky-deep); font-weight: 700; }

/* --- Detail -------------------------------------------------------------- */

.pdp-detail { padding-block: var(--space-section); }

.pdp-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.pdp-detail h2 {
  font-size: var(--step-2);
  margin-bottom: .8em;
}

.pdp-features ul { list-style: none; padding: 0; margin: 0; }

.pdp-features li {
  position: relative;
  padding-left: 1.7em;
  margin-bottom: .7em;
  line-height: 1.55;
}

.pdp-features li:before {
  content: '';
  position: absolute;
  left: .3em;
  top: .55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sky-deep);
}

.pdp-table-scroll { overflow-x: auto; }

.pdp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.pdp-table th,
.pdp-table td {
  padding: 12px 16px;
  font-size: var(--step--1);
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.pdp-table thead th {
  background: var(--surface-alt);
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11px;
}

.pdp-table tbody th { font-weight: 500; color: var(--ink); }
.pdp-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.pdp-table td:nth-child(2) { font-weight: 700; color: var(--navy); }
.pdp-table tr.is-oos { opacity: .5; }

.pdp-table-note {
  font-size: var(--step--1);
  color: var(--muted);
  padding: 12px 0 0;
}

/* --- Bulk band ----------------------------------------------------------- */

.pdp-bulk { padding-bottom: var(--space-section); }

.pdp-bulk-inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  justify-content: space-between;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.pdp-bulk-inner h2 { color: #fff; font-size: var(--step-2); margin-bottom: .4em; }
.pdp-bulk-inner p { color: rgba(255, 255, 255, .82); padding-bottom: 0; max-width: 52ch; }

/* --- Related ------------------------------------------------------------- */

.pdp-related { padding-bottom: var(--space-section); }

.pdp-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(18px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pdp-related-grid a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}

.pdp-related-grid a:hover {
  transform: translateY(-3px);
  border-color: rgba(111, 195, 239, .7);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.pdp-related-media {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-alt);
  margin-bottom: 14px;
  aspect-ratio: 1;
}

.pdp-related-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-related-name { font-weight: 700; color: var(--navy); line-height: 1.25; }
.pdp-related-price { font-size: var(--step--1); color: var(--muted); margin-top: auto; padding-top: 8px; }

@media (max-width: 900px) {
  .pdp-grid,
  .pdp-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .pdp-actions { flex-direction: column; }
  .pdp-qty { align-self: flex-start; }

  /* In a column, `flex: 1 1 200px` sets a 200px basis on the HEIGHT, which
     turned the pill button into a 200px-tall oval. */
  .pdp-add { flex: 0 0 auto; width: 100%; }

  .pdp-bulk-inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   16. Cart
   --------------------------------------------------------------------------
   The cart page used to be built entirely from inline style attributes — a
   bare table with hard-coded hex colours that no design token could reach.
   ========================================================================== */

.cart-section { padding-block: var(--space-section); }

.cart-title {
  font-size: var(--step-3);
  color: var(--navy);
  margin-bottom: .6em;
}

.cart-flash {
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 22px;
  font-size: var(--step--1);
}

.cart-flash--success { background: #e7f6ec; color: #1c7a3f; }
.cart-flash--error { background: #fdecea; color: #8a1c14; }

/* --- Empty state --------------------------------------------------------- */

.cart-empty {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 52px);
  background: var(--surface-alt);
  max-width: 620px;
}

.cart-empty-lead { font-size: var(--step-1); color: var(--navy); font-weight: 700; }
.cart-empty p { color: var(--muted); }
.cart-empty-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }

/* --- Layout -------------------------------------------------------------- */

.cart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

/* --- Lines --------------------------------------------------------------- */

.cart-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.cart-line {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto auto;
  grid-template-areas:
    'media info qty total'
    'media remove remove remove';
  align-items: center;
  gap: 6px 18px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.cart-line:last-child { border-bottom: 0; }

.cart-line-media {
  grid-area: media;
  display: block;
  width: 88px;
  height: 88px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  overflow: hidden;
}

.cart-line-media img { width: 100%; height: 100%; object-fit: contain; display: block; }

.cart-line-info { grid-area: info; }

.cart-line-name {
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  text-decoration: none;
}

.cart-line-name:hover { color: var(--sky-deep); text-decoration: none; }

.cart-line-variant,
.cart-line-unit {
  font-size: var(--step--1);
  color: var(--muted);
  padding: 2px 0 0;
  line-height: 1.4;
}

.cart-tag {
  color: #1c7a3f;
  font-weight: 700;
}

.cart-line-qty {
  grid-area: qty;
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.cart-step {
  width: 38px;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}

.cart-step:hover { background: var(--surface-alt); }

.cart-line-qty input {
  width: 48px;
  border: 0;
  border-inline: 1px solid var(--line);
  text-align: center;
  font-family: inherit;
  font-size: var(--step--1);
  color: var(--ink);
  background: transparent;
  -moz-appearance: textfield;
}

.cart-line-qty input::-webkit-outer-spin-button,
.cart-line-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-line-total {
  grid-area: total;
  font-weight: 700;
  color: var(--navy);
  padding: 0;
  min-width: 5.5em;
  text-align: right;
}

.cart-remove {
  grid-area: remove;
  justify-self: start;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: var(--step--1);
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  transition: color .2s var(--ease);
}

.cart-remove:hover { color: #b00020; }

.cart-lines-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.cart-continue { font-size: var(--step--1); color: var(--muted); }
.cart-continue:hover { color: var(--navy); text-decoration: none; }

[data-cart-form][aria-busy="true"] { opacity: .55; pointer-events: none; }

/* --- Summary ------------------------------------------------------------- */

.cart-summary {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  padding: clamp(20px, 2.4vw, 28px);
  position: sticky;
  top: 120px;
}

.cart-summary h2 {
  font-size: var(--step-1);
  color: var(--navy);
  margin-bottom: .8em;
}

.cart-totals { margin: 0 0 4px; }

.cart-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 5px 0;
  font-size: var(--step--1);
  color: var(--muted);
}

.cart-totals dd { margin: 0; color: var(--ink); }

.cart-ship-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  padding: 4px 0 0;
}

.cart-progress { margin-top: 14px; }
.cart-progress p { font-size: 12px; color: var(--muted); padding-bottom: 6px; }
.cart-progress strong { color: var(--navy); }

.cart-progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.cart-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sky), var(--sky-deep));
  transition: width .4s var(--ease);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--navy);
}

.cart-total strong { font-size: var(--step-2); }

.cart-checkout { width: 100%; margin-top: 18px; }

.cart-secure,
.cart-bulk {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  padding: 12px 0 0;
}

.cart-bulk a { color: var(--sky-deep); font-weight: 700; }

@media (max-width: 900px) {
  .cart-grid { grid-template-columns: minmax(0, 1fr); }
  .cart-summary { position: static; }
}

@media (max-width: 560px) {
  .cart-line {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
      'media info'
      'media qty'
      'total total'
      'remove remove';
    row-gap: 10px;
  }
  .cart-line-media { width: 64px; height: 64px; }
  .cart-line-total { text-align: left; }
}

/* ==========================================================================
   17. Bulk / facility inquiry page
   ========================================================================== */

.bulk-hero {
  background: var(--navy);
  color: #fff;
  padding-block: clamp(3rem, 5vw, 5rem);
}

.bulk-hero-inner { max-width: 46rem; }

.bulk-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sky);
  padding-bottom: .8em;
}

.bulk-hero h1 {
  color: #fff;
  font-size: var(--step-4);
  line-height: 1.03;
  margin-bottom: .3em;
}

.bulk-lede {
  color: rgba(255, 255, 255, .85);
  font-size: var(--step-1);
  line-height: 1.5;
  padding-bottom: 1.2em;
  max-width: 54ch;
}

.bulk-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bulk-facts li {
  position: relative;
  padding-left: 18px;
  font-size: var(--step--1);
  color: rgba(255, 255, 255, .8);
}

.bulk-facts li:before {
  content: '';
  position: absolute;
  left: 0;
  top: .5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sky);
}

.bulk-body { padding-block: var(--space-section); }

.bulk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.bulk-form-head h2 { font-size: var(--step-2); margin-bottom: .3em; }
.bulk-form-head p { color: var(--muted); padding-bottom: 1.4em; }

.bulk-error-summary {
  background: #fdecea;
  color: #8a1c14;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: var(--step--1);
}

.bulk-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.bulk-field { margin-bottom: 18px; }

.bulk-field label,
.bulk-fieldset legend {
  display: block;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
  padding: 0;
}

.bulk-field .req { color: #b00020; }

.bulk-field :is(input, select, textarea) {
  width: 100%;
  padding: 13px 16px;
  font-size: var(--step-0);
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.bulk-field select {
  min-height: 51px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235b7085' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  -webkit-appearance: none;
  appearance: none;
}

.bulk-field textarea { resize: vertical; min-height: 130px; }

/* The legacy theme sets a large placeholder size globally; inside these
   fields it outgrew the typed text. */
.bulk-field :is(input, textarea)::placeholder { font-size: inherit; color: #9aabba; opacity: 1; }

.bulk-field :is(input, select, textarea):focus {
  border-color: var(--sky-deep);
  box-shadow: 0 0 0 3px rgba(47, 155, 212, .18);
  outline: none;
}

.bulk-field [aria-invalid="true"] { border-color: #b00020; }

.bulk-field-error {
  font-size: 12px;
  color: #b00020;
  padding: 6px 0 0;
}

.bulk-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
}

.bulk-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.bulk-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
  margin-bottom: 0;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}

.bulk-check:hover { border-color: var(--sky); }
.bulk-check input { width: auto; accent-color: var(--navy); }
.bulk-check:has(input:checked) { border-color: var(--navy); background: var(--surface-alt); }

/* --- Products of interest ------------------------------------------------ */

.bulk-hint {
  font-size: var(--step--1);
  color: var(--muted);
  padding: 0 0 10px;
}

.bulk-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.bulk-product {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}

.bulk-product:hover { border-color: var(--sky); }
.bulk-product:has(.bulk-product-pick input:checked) {
  border-color: var(--navy);
  background: var(--surface-alt);
  box-shadow: var(--shadow-sm);
}

.bulk-product-pick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 0;
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
}

.bulk-product-pick input { width: auto; flex: none; accent-color: var(--navy); }

.bulk-product-pick img {
  width: 56px;
  height: 56px;
  flex: none;
  object-fit: cover;
  border-radius: 8px;
  background: #fff;
}

.bulk-product-name { font-size: var(--step--1); line-height: 1.3; }

/* Sizes and quantity open up once the product is ticked. */
.bulk-product-detail {
  display: none;
  padding: 0 14px 14px;
}

.bulk-product:has(.bulk-product-pick input:checked) .bulk-product-detail { display: block; }

.bulk-sizes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.bulk-sizes-label,
.bulk-qty > span {
  display: block;
  width: 100%;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.bulk-size { margin: 0; cursor: pointer; }
.bulk-size input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.bulk-size span {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}

.bulk-size input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.bulk-size input:focus-visible + span { outline: 2px solid var(--sky-deep); outline-offset: 2px; }

.bulk-qty { display: block; margin: 0; font-weight: 400; }

.bulk-qty input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: var(--step--1);
  background: #fff;
}

.bulk-qty input:focus { outline: none; border-color: var(--sky-deep); box-shadow: 0 0 0 3px rgba(47,155,212,.18); }

/* Browsers without :has() show sizes and quantity for every product. */
@supports not selector(:has(*)) {
  .bulk-product-detail { display: block; }
}

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.bulk-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bulk-submit { margin-top: 6px; }

.bulk-privacy {
  font-size: 12px;
  color: var(--muted);
  padding: 14px 0 0;
}

/* --- Success ------------------------------------------------------------- */

.bulk-sent {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  padding: clamp(28px, 4vw, 48px);
}

.bulk-sent-icon {
  font-size: 40px;
  line-height: 1;
  color: #3fae6b;
  margin-bottom: 12px;
}

.bulk-sent h2 { font-size: var(--step-2); margin-bottom: .4em; }
.bulk-sent p { color: var(--muted); }
.bulk-sent strong { color: var(--navy); }
.bulk-sent-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }

/* --- Aside --------------------------------------------------------------- */

.bulk-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px 24px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}

.bulk-card h3 { font-size: var(--step-1); margin-bottom: .6em; }
.bulk-card p { font-size: var(--step--1); color: var(--muted); padding-bottom: .8em; }
.bulk-card p:last-child { padding-bottom: 0; }
.bulk-card-lead { color: var(--ink) !important; font-weight: 700; }
.bulk-card-address { line-height: 1.6; }

.bulk-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bulk-card ul li {
  position: relative;
  padding-left: 1.5em;
  font-size: var(--step--1);
  color: var(--muted);
  margin-bottom: .5em;
  line-height: 1.45;
}

.bulk-card ul li:before {
  content: '';
  position: absolute;
  left: .2em;
  top: .5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sky-deep);
}

/* Needs to out-specify `.bulk-card ul li:before` above, which is (0,1,3). */
.bulk-card ul.bulk-lines li { padding-left: 0; margin-bottom: 0; }
.bulk-card ul.bulk-lines li:before { content: none; }

.bulk-lines a {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: color .2s var(--ease);
}

.bulk-lines li:last-child a { border-bottom: 0; }
.bulk-lines a span { color: var(--navy); font-weight: 700; font-size: var(--step--1); }
.bulk-lines a small { color: var(--muted); font-size: 12px; }
.bulk-lines a:hover span { color: var(--sky-deep); }

@media (max-width: 900px) {
  .bulk-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .bulk-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ==========================================================================
   18. Shop / category archive
   --------------------------------------------------------------------------
   templates/product-grid.php. Section 14 still handles any remaining
   .woocommerce ul.products markup; this styles the catalog-driven grid.
   ========================================================================== */

.shop-section { padding-block: var(--space-section); }

.shop-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 6px;
}

.shop-title { font-size: var(--step-3); color: var(--navy); margin-bottom: .2em; }
.shop-intro { color: var(--muted); max-width: 52ch; padding-bottom: 0; }

.shop-sort { display: flex; align-items: center; gap: 10px; }

.shop-sort label {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--muted);
}

.shop-sort select {
  min-height: 46px;
  padding: 10px 40px 10px 14px;
  font-family: inherit;
  font-size: var(--step--1);
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235b7085' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  -webkit-appearance: none;
  appearance: none;
}

.shop-count {
  font-size: var(--step--1);
  color: var(--muted);
  padding-bottom: var(--space-block);
}

.shop-empty { color: var(--muted); }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(18px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}

.shop-card:hover {
  transform: translateY(-3px);
  border-color: rgba(111, 195, 239, .7);
  box-shadow: var(--shadow-md);
}

.shop-card-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  text-decoration: none;
}

.shop-card-link:hover { text-decoration: none; }

.shop-card-media {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-alt);
  margin-bottom: 14px;
}

.shop-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s var(--ease);
}

.shop-card:hover .shop-card-media img { transform: scale(1.04); }

.shop-card-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sky-deep);
  margin-bottom: 6px;
}

.shop-card-name {
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}

.shop-card-tagline {
  font-size: var(--step--1);
  color: var(--muted);
  line-height: 1.4;
  margin-top: 6px;
}

.shop-card-price {
  font-size: var(--step--1);
  color: var(--muted);
  margin-top: auto;
  padding-top: 12px;
}

.shop-card-price strong { color: var(--navy); font-size: var(--step-0); }

.shop-card-btn { margin-top: 14px; align-self: flex-start; }

.shop-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: var(--space-section);
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
}

.shop-bulk p { padding-bottom: 0; color: var(--muted); max-width: 60ch; }
.shop-bulk strong { color: var(--navy); }

@media (max-width: 480px) {
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .shop-card-btn { align-self: stretch; padding: 13px 16px; font-size: 11px; }
}

/* --- Order help (the former dead /my-account login form) ------------------ */

.account-help { padding-block: var(--space-section); }
.account-help-inner { max-width: 62rem; }
.account-help h1 { font-size: var(--step-3); color: var(--navy); margin-bottom: .3em; }

.account-lede {
  font-size: var(--step-1);
  color: var(--muted);
  max-width: 52ch;
  padding-bottom: var(--space-block);
}

.account-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.account-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}

.account-card h2 { font-size: var(--step-1); margin-bottom: .5em; }
.account-card p { font-size: var(--step--1); color: var(--muted); padding-bottom: 0; line-height: 1.55; }
.account-card a { color: var(--sky-deep); font-weight: 700; }

.account-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-block); }

/* main.css centres headings below 768px. In the buy column that left the
   eyebrow and product name centred over left-aligned copy, price and form. */
@media (max-width: 900px) {
  .pdp-buy,
  .pdp-buy .pdp-title,
  .pdp-buy .pdp-eyebrow { text-align: left; }
}

/* ==========================================================================
   19. Review fixes
   ========================================================================== */

/* --- Sizes table ---------------------------------------------------------
   main.css pins this to `.info table.table-bordered { width: 290px
   !important }` — a hard-coded pixel width from the old fixed-width layout.
   Inside the half-width column that left the list squeezed to a quarter of
   the page with a gap beside it. Matching !important is the only way past a
   declaration like that short of editing main.css. */

body:not(.home) .info table.table-bordered {
  width: 100% !important;
  margin-bottom: 0;
}

body:not(.home) .sizes .table-bordered td { font-size: var(--step-0); }

/* Product codes read as codes, not prose. */
body:not(.home) .sizes .table-bordered td:last-child {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* --- Product photography -------------------------------------------------
   The size-lineup and packaging shots are photographed on white. A card
   shadow around them frames the white paper rather than the product, which
   reads as a grey smudge floating beside the boxes. */

body:not(.home) .sizes .image img,
body:not(.home) .sizes .image figure {
  box-shadow: none;
  border-radius: 0;
  background: transparent;
}



/* --- Testimonials --------------------------------------------------------
   The legacy alternating scheme put navy behind the second card while the
   text stayed at body ink (#12253a on #0d3357 — about 1.3:1, effectively
   invisible; the attribution line vanished entirely). Both cards now use the
   same light treatment, with a sky rule carrying the colour instead. */

/* main.css alternates these with :nth-child(odd/even) at (0,4,0), so a plain
   .item selector loses to it. Both pseudo-classes have to be named. */
.testimonials .testimonials-items .item,
.testimonials .testimonials-items .item:nth-child(odd),
.testimonials .testimonials-items .item:nth-child(even) {
  background: linear-gradient(180deg, #f2fafe 0%, #e8f4fc 100%);
  border: 1px solid rgba(111, 195, 239, .55);
  border-left: 4px solid var(--sky-deep);
  border-radius: var(--radius-lg);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.testimonials .testimonials-items .item p { color: var(--ink); }
.testimonials .testimonials-items .item .name { color: var(--navy); font-weight: 700; }
.testimonials .testimonials-items .item .address { color: var(--muted); }

/* ==========================================================================
   20. Water motif + colour
   --------------------------------------------------------------------------
   The inner pages were stark: white section after white section, with the
   water artwork only ever appearing on the home hero and the HydroSeal
   applications band.

   Two things carry the brand through the rest of the site now — a soft sky
   wash behind alternating sections, and the same splash artwork the home page
   uses, placed low and light so it frames content instead of competing.

   The artwork is a pair of JPEGs on white, not transparent PNGs, so it can
   only sit on a white background as-is. `mix-blend-mode: multiply` drops the
   white out and lets the splash composite onto a tint. Browsers without blend
   support fall back to the plain tint, which is fine — the wash is decoration.
   ========================================================================== */

:root {
  --tint: #f3f9fd;        /* soft sky wash for alternating sections */
  --tint-deep: #e9f3fb;
}

.water-wash {
  position: relative;
  isolation: isolate;
}

.water-wash::before,
.water-wash::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: auto 260px;
  mix-blend-mode: multiply;
  opacity: .28;
  pointer-events: none;
}

.water-wash::before {
  background-image: url('../img/left-before.jpg');
  background-position: left bottom;
}

.water-wash::after {
  background-image: url('../img/right-after.jpg');
  background-position: right bottom;
}

/* Below this the artwork crowds the content column rather than framing it. */
@media (max-width: 1024px) {
  .water-wash::before,
  .water-wash::after { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .js-reveal .water-wash::before { animation: drift-l 18s ease-in-out infinite; }
  .js-reveal .water-wash::after  { animation: drift-r 20s ease-in-out infinite; }
}

/* --- Where it goes -------------------------------------------------------
   Applied from CSS rather than by editing every template, so the rhythm can
   be retuned in one place. */

body:not(.home) .pdp-main,
body:not(.home) .shop-section,
body:not(.home) .cart-section,
body:not(.home) .bulk-body,
body:not(.home) .account-help,
body:not(.home) .top-section,
body:not(.home) .pronet,
body:not(.home) .hydroseal-boot,
body:not(.home) .hydroseal-sleeve,
body:not(.home) .hydroseal-flex {
  position: relative;
  isolation: isolate;
}

body:not(.home) :is(.pdp-main, .shop-section, .cart-section, .bulk-body,
                    .account-help, .top-section, .pronet, .hydroseal-boot,
                    .hydroseal-sleeve, .hydroseal-flex)::before,
body:not(.home) :is(.pdp-main, .shop-section, .cart-section, .bulk-body,
                    .account-help, .top-section, .pronet, .hydroseal-boot,
                    .hydroseal-sleeve, .hydroseal-flex)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-repeat: no-repeat;
  /* Fixed rather than a percentage of the section: a percentage scaled the
     splash with page height, so a long page got a wall of water behind the
     copy instead of a motif along the bottom edge. */
  background-size: auto 260px;
  mix-blend-mode: multiply;
  opacity: .28;
  pointer-events: none;
}

body:not(.home) :is(.pdp-main, .shop-section, .cart-section, .bulk-body,
                    .account-help, .top-section, .pronet, .hydroseal-boot,
                    .hydroseal-sleeve, .hydroseal-flex)::before {
  background-image: url('../img/left-before.jpg');
  background-position: left bottom;
}

body:not(.home) :is(.pdp-main, .shop-section, .cart-section, .bulk-body,
                    .account-help, .top-section, .pronet, .hydroseal-boot,
                    .hydroseal-sleeve, .hydroseal-flex)::after {
  background-image: url('../img/right-after.jpg');
  background-position: right bottom;
}

@media (max-width: 1024px) {
  body:not(.home) :is(.pdp-main, .shop-section, .cart-section, .bulk-body,
                      .account-help, .top-section, .pronet, .hydroseal-boot,
                      .hydroseal-sleeve, .hydroseal-flex)::before,
  body:not(.home) :is(.pdp-main, .shop-section, .cart-section, .bulk-body,
                      .account-help, .top-section, .pronet, .hydroseal-boot,
                      .hydroseal-sleeve, .hydroseal-flex)::after { display: none; }
}

/* --- Alternating section tint --------------------------------------------
   Breaks the run of white without introducing a second brand colour. */

body:not(.home) .pdp-detail,
body:not(.home) .directions-section,
body:not(.home) .index-style,
body:not(.home) .comments {
  background: var(--tint);
}

/* .sizes deliberately stays white: the size-lineup photograph is shot on a
   white ground, so a tint behind it leaves a white rectangle around the
   boxes. Alternation still reads — .applications above it and
   .directions-section below both carry a background. */

/* A tinted band needs its own top edge or it reads as an accident. */
body:not(.home) :is(.pdp-detail, .directions-section) {
  border-top: 1px solid rgba(111, 195, 239, .35);
  border-bottom: 1px solid rgba(111, 195, 239, .35);
}

/* Cards sitting on a tint need to lift off it rather than blend in. */
body:not(.home) .pdp-detail .pdp-table,
body:not(.home) .sizes .table-bordered { background: var(--surface); }

/* --- Colour accents ------------------------------------------------------
   Small, consistent doses: a sky rule under section titles, sky eyebrows,
   and a sky top edge on the product cards. */

body:not(.home) .full-line-title:before { background: rgba(111, 195, 239, .55); }
body:not(.home) .full-line-title h2 { background: transparent; }

/* The tinted bands have no white behind the heading, so the legacy
   white-background trick that hid the rule would show as a white slab. */
body:not(.home) :is(.pdp-detail, .directions-section) .full-line-title h2 {
  background: var(--tint);
}

.shop-card,
.pdp-related-grid a {
  border-top: 3px solid var(--sky);
}

.shop-card:hover,
.pdp-related-grid a:hover { border-top-color: var(--sky-deep); }

/* Assurance ticks and the free-ship tag were the only green on the site and
   read as a system message. Put them on the brand palette. */
.pdp-assurances span { color: var(--sky-deep); }

/* ==========================================================================
   21. Contact form
   --------------------------------------------------------------------------
   The page used to carry exported Contact Form 7 markup that posted nowhere.
   These styles dress the replacement, and reuse the bulk form's language so
   the two forms on the site look like siblings.
   ========================================================================== */

.contact-form .input-field { margin-bottom: 18px; }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
  border-color: var(--sky-deep);
  box-shadow: 0 0 0 3px rgba(111, 195, 239, .25);
  outline: none;
}

.contact-form textarea { resize: vertical; min-height: 160px; }

.contact-form [aria-invalid="true"] { border-color: #c0392b; }

.contact-error {
  display: block;
  margin-top: 6px;
  font-size: var(--step--1);
  color: #c0392b;
}

.contact-error-summary {
  margin-bottom: 18px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: #fdecea;
  border: 1px solid rgba(192, 57, 43, .3);
  color: #8a1c14;
  font-size: var(--step--1);
}

/* Honeypot: off-screen rather than display:none, because some bots skip
   fields that are explicitly hidden. */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-sent {
  padding: 32px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #f2fafe 0%, #e8f4fc 100%);
  border: 1px solid rgba(111, 195, 239, .55);
  border-left: 4px solid var(--sky-deep);
}

.contact-sent-icon {
  font-size: 40px;
  line-height: 1;
  color: var(--sky-deep);
  margin-bottom: 10px;
}

.contact-sent h2 { margin-bottom: .4em; }
.contact-ref { font-size: var(--step--1); color: var(--muted); }

/* Layout: form card on the left, contact details on the right. Field styling
   comes from the bulk form (.bulk-row / .bulk-field / .bulk-card), so the two
   forms on the site match. The old three-across row with placeholder-only
   labels is gone: the labels vanished as soon as anyone typed. */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.contact-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(24px, 3.5vw, 40px);
}

.contact-panel h2 { font-size: var(--step-2); margin-bottom: .25em; }
.contact-lead { color: var(--muted); padding-bottom: 1.4em; }
.contact-panel textarea { min-height: 170px; }

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
}
.contact-required { font-size: var(--step--1); color: var(--muted); }
.contact-required .req { color: #b00020; }

.contact-aside .bulk-card h3 { margin-bottom: .5em; }
.contact-aside .bulk-card-lead { padding-bottom: 0; }
.contact-role { font-weight: 400; color: var(--muted); }
.contact-details { margin: 0; font-size: var(--step--1); }
.contact-details dt {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-details dd { margin: 2px 0 0; color: var(--ink); line-height: 1.55; word-break: break-word; }
.contact-details a { color: var(--navy); font-weight: 600; }
.contact-details a:hover { color: var(--sky-deep); }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .contact-panel .bulk-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}