/*
 * Purity — design adjustments on top of main.css
 * ============================================================================
 * Loaded on every Purity page, right after main.css. main.css itself is left
 * as delivered, so these adjustments survive a new main.css from the agency.
 */

/*
 * Technology section, C-Sense block: the title ("Know more. Worry less.")
 * comes first, then the C-Sense badge, then the three points, on all screen
 * sizes. The points span the full width, and on desktop and tablet so does
 * the badge.
 */
.pu-technology[data-purity-technology=motion] .pu-technology__lead {
  grid-row: 1;
}

.pu-technology[data-purity-technology=motion] .pu-technology__badge {
  grid-row: 2;
}

.pu-technology[data-purity-technology=motion] .pu-technology__states {
  grid-column: 1 / -1;
}

@media (min-width: 769px) {
  .pu-technology[data-purity-technology=motion] .pu-technology__copy {
    row-gap: 0;
  }

  .pu-technology[data-purity-technology=motion] .pu-technology__lead {
    margin: 0 0 64px;
  }

  .pu-technology[data-purity-technology=motion] .pu-technology__badge {
    grid-column: 1 / -1;
    margin: 0 0 32px -5px;
  }

  .pu-technology[data-purity-technology=motion] .pu-technology__states {
    grid-row: 3;
  }
}

/*
 * Technology section, Purification technology: its own heading and intro,
 * shown only when they differ from the filtration ones. purity.js puts them
 * in place of the filtration heading and intro while the Firewall UVC block is
 * shown. In the plain version (reduced motion) they sit above that block.
 */
.purity-tech-alt {
  padding: 28px 32px 0;
  color: #fff;
}

.purity-tech-alt__heading {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -1.2px;
}

.purity-tech-alt__lede {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (max-width: 768px) {
  .purity-tech-alt {
    padding: 8% 6.3% 0;
  }
}

.pu-technology[data-purity-technology=motion] .purity-tech-alt {
  display: none;
}

/*
 * Technology section, filtration and Purification panel: it moves down when
 * the heading and intro above it need more room than the design gives them
 * (e.g. a three-line heading). Otherwise it stays where main.css puts it.
 * Desktop and tablet: in CSS, from the line count and intro height main.js
 * measures. Phones: purity.js sets data-purity-stacked, and the panel sits
 * below the intro, as main.css already does on short phones.
 * On desktop and tablet the panel and the heading are at most 650px wide.
 */
@media (min-width: 769px) {
  .pu-technology[data-purity-technology=motion] .pu-technology__filters-copy {
    --purity-panel-top: max(40.4%, calc(var(--pu-technology-filters-top) + var(--pu-technology-title-lines, 1) * 4rem + 16px + var(--pu-technology-lede-height, 48px) + 12px));
    top: var(--purity-panel-top);
    max-width: 650px;
    max-height: min(calc(78% - (var(--purity-panel-top) - 40.4%)), calc(100% - var(--purity-panel-top) - 16px));
  }

  .pu-technology[data-purity-technology=motion] .pu-technology__filters-heading {
    max-width: 650px;
  }
}

@media (max-width: 768px) {
  .pu-technology[data-purity-stacked][data-purity-technology=motion] .pu-technology__filters-copy {
    --pu-technology-panel-top: calc(var(--pu-technology-copy-top) + var(--pu-technology-title-lines, 1) * 2.25rem + 11px + var(--pu-technology-lede-height, 72px) + 16px);
    top: var(--pu-technology-panel-top);
    max-height: calc(100% - var(--pu-technology-panel-top) - 16px);
    max-height: calc(100svh - var(--pu-technology-panel-top) - 16px);
    transform: none;
  }
}

/*
 * Technology section, filtration panel: the filters are listed without their
 * numbers (01, 02…), on all screen sizes.
 */
.pu-technology__filters-number {
  display: none;
}

/*
 * Impact, bottle counter: tighter letter spacing.
 */
.pu-modes__counter {
  letter-spacing: -0.1em;
}

/*
 * Technology section, side navigation (desktop and tablet): the words next to
 * the dots are 20% larger and clickable like their dot. A label too long for
 * the space next to it wraps onto a second line.
 */
@media (min-width: 769px) {
  .pu-technology__dot-label {
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    width: max-content;
    max-width: calc(36vw - 110px);
    white-space: normal;
    text-align: left;
    font-size: calc(0.643rem * 1.2);
    pointer-events: auto;
  }
}

/*
 * Features carousel: the Pause/Play videos button is shown only while the card
 * in view has a video. Its space is kept, so nothing moves when it appears.
 */
.pu-evolution__playback {
  visibility: hidden;
}

#purity-evolution:has(.pu-evolution__slide[data-purity-evolution-shown="true"] video) .pu-evolution__playback {
  visibility: visible;
}

/*
 * Compare section, dimensions: when a model has Countertop dimensions, the
 * Freestanding/Countertop switch shows the matching ones, as main.css does for
 * the photos and spec sheet links (purity_e_formats() in purity-setup.php).
 */
.pu-comparison:has(.pu-comparison__mode-radio[value=countertop]:checked) .pu-comparison__spec-value [data-purity-format=freestanding],
.pu-comparison:has(.pu-comparison__mode-radio[value=freestanding]:checked) .pu-comparison__spec-value [data-purity-format=countertop] {
  display: none;
}

/*
 * Compare section, model cards: a line below the specs, 12px under them.
 */
.pu-comparison__specs {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pu-comparison-rule);
}
.purity-model-note{
  font-size:12px;
  margin:0;
  padding:12px 0
}
/*
 * Footnotes, below the Service panel (main.css has them below the Compare
 * cards): the same look, lined up with the panel's left edge.
 */
.purity-footnotes {
  max-width: 861px;
  margin: 26.5px 0 0;
  color: #000e2e;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  font-feature-settings: "ss02" 1;
}

@media (max-width: 768px) {
  .purity-footnotes {
    max-width: none;
    margin-top: 24.5px;
  }
}

/*
 * Service section on tablets (769px to 1050px wide): the panel is as tall as
 * its content instead of keeping the desktop proportions, with 25px of space
 * above the heading.
 */
@media (min-width: 769px) and (max-width: 1050px) {
  .pu-service .pu-service__panel {
    aspect-ratio: unset;
    padding-top: 25px;
  }
}

/*
 * Navigation bar on phones and small tablets (up to 849px, where the desktop
 * bar is not shown): the logo and menu button, with the desktop bar's glass
 * background, always at the top of the screen, over every section. While the
 * Technology section fills the screen it is smaller, in line with that
 * section's close button and ending just before it. The open menu covers it.
 */
.purity-bar {
  display: none;
}

@media (max-width: 849.98px) {
  .purity-bar {
    position: fixed;
    top: 28px;
    left: 32px;
    right: 32px;
    z-index: 201;
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 3px 0 17px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 150.247px;
    background: rgba(0, 0, 0, 0.42);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3.1px);
    -webkit-backdrop-filter: blur(3.1px);
    transition: top 0.32s ease, right 0.32s ease, height 0.32s ease;
  }

  /* The Technology section is a layer of 200 (main.css). */
  .pu-launch__menu {
    z-index: 202;
  }

  /* Technology fills the screen: close button 45px, 30px from the top, 71px from the right. */
  body:has(.pu-technology[data-purity-modal=open]) .purity-bar {
    top: 30px;
    right: 124px;
    height: 45px;
  }

  /* Menu links: the heading lands below the bar, not under it. */
  #purity-features {
    scroll-margin-top: 92px;
  }

  #purity-technology {
    scroll-margin-top: 60px;
  }
}

@media (max-width: 849.98px) and (prefers-reduced-motion: reduce) {
  .purity-bar {
    transition: none;
  }
}

@media (max-width: 768px) {
  .purity-bar {
    top: 26px;
    left: 16px;
    right: 16px;
  }

  .purity-bar .pu-launch__menu-toggle {
    margin-right: 0;
  }

  /* Close button 44px, 7px from the top, 2.3% - 6px from the right. */
  body:has(.pu-technology[data-purity-modal=open]) .purity-bar {
    top: 7px;
    right: calc(2.3% + 46px);
    height: 44px;
  }
}

/*
 * Navigation bar on desktop (850px and wider): main.css's sticky bar
 * (pu-launch__nav), always at the top of the screen, from page load to the end
 * of the page. It is full width (logo, links, "Why Culligan Quench?") at the
 * top of the page and while scrolling up, and narrows to fit the links (the
 * Culligan "C" instead of the logo) while scrolling down: purity.js sets
 * purity-nav--narrow and measures that width (--purity-nav-narrow).
 *
 * main.js still switches the bar between its own states (at the bottom of the
 * screen during the hero, travelling up, narrow, full, out of the way while
 * "A mode for every mood" plays); these rules draw it the same way in all of
 * them. With reduced motion main.js hides the bar; it is shown here too, and
 * changes width without animating.
 */
@media (min-width: 850px) {
  /* main.js keeps the rail hidden until the gallery comes in. */
  .pu-launch .pu-launch__rail {
    visibility: visible !important;
  }

  .pu-launch .pu-launch__rail .pu-launch__nav {
    position: fixed;
    top: calc(var(--pu-header-height) + var(--pu-launch-nav-gap));
    bottom: auto;
    left: 50%;
    z-index: 210;
    display: flex;
    width: min(100% - 64px, 1376px);
    height: 48px;
    gap: 0;
    padding: 0 3px;
    translate: -50%;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .pu-launch .pu-launch__rail .pu-launch__nav .pu-launch__brand {
    width: 151px;
    margin-left: 14px;
  }

  .pu-launch .pu-launch__rail .pu-launch__nav .pu-launch__mark {
    opacity: 0;
  }

  .pu-launch .pu-launch__rail .pu-launch__nav .pu-launch__nav-home {
    visibility: visible;
    opacity: 1;
  }

  .pu-launch .pu-launch__rail .pu-launch__nav .pu-launch__anchor,
  .pu-launch .pu-launch__rail .pu-launch__nav .pu-launch__nav-why {
    padding-inline: clamp(12px, 1.875vw, 27px);
  }

  .pu-launch .pu-launch__rail .pu-launch__nav .pu-launch__anchor--estimate {
    margin-left: 8px;
    padding-inline: 20px;
    border-width: 0;
  }

  /* "Why Culligan Quench?": shown from 1050px wide, in the full bar only. */
  .pu-launch .pu-launch__rail .pu-launch__nav .pu-launch__nav-reveal {
    grid-template-columns: 0fr;
    margin-left: 0;
  }

  .pu-launch .pu-launch__rail .pu-launch__nav .pu-launch__nav-why {
    visibility: hidden;
    opacity: 0;
    padding-inline: 0;
    border-inline-width: 0;
  }

  /* Narrow, while scrolling down. */
  .pu-launch .pu-launch__rail .pu-launch__nav.purity-nav--narrow {
    width: var(--purity-nav-narrow, max-content);
  }

  .pu-launch .pu-launch__rail .purity-nav--narrow .pu-launch__brand {
    width: 40px;
    margin-left: 0;
  }

  .pu-launch .pu-launch__rail .purity-nav--narrow .pu-launch__mark {
    opacity: 1;
  }

  .pu-launch .pu-launch__rail .purity-nav--narrow .pu-launch__nav-home {
    visibility: hidden;
    opacity: 0;
  }

  /* While purity.js measures the narrow width. */
  .pu-launch .pu-launch__rail .pu-launch__nav.purity-nav--measure {
    width: max-content;
  }

  .pu-launch .pu-launch__rail .purity-nav--measure,
  .pu-launch .pu-launch__rail .purity-nav--measure * {
    transition: none !important;
  }

  /* Widening: the logo and "Why Culligan Quench?" fade in once there is room. */
  .pu-launch[data-purity-launch=motion] .pu-launch__rail .pu-launch__nav:not(.purity-nav--narrow) .pu-launch__nav-home,
  .pu-launch[data-purity-launch=motion] .pu-launch__rail .pu-launch__nav:not(.purity-nav--narrow) .pu-launch__nav-why {
    transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, padding var(--pu-launch-nav-widen) cubic-bezier(0.4, 0, 0.2, 1), border-width var(--pu-launch-nav-widen) cubic-bezier(0.4, 0, 0.2, 1), opacity var(--pu-launch-nav-fade) ease calc(var(--pu-launch-nav-widen) - var(--pu-launch-nav-fade)), visibility 0s linear 0s;
  }
}

@media (min-width: 1050px) {
  .pu-launch .pu-launch__rail .pu-launch__nav:not(.purity-nav--narrow) .pu-launch__nav-reveal {
    grid-template-columns: 1fr;
  }

  .pu-launch .pu-launch__rail .pu-launch__nav:not(.purity-nav--narrow) .pu-launch__nav-why {
    visibility: visible;
    opacity: 1;
    padding-inline: clamp(12px, 1.875vw, 27px);
    border-inline-width: 1px;
  }
}

/*
 * Touch and click targets: at least 44 × 44 px (WCAG 2.5.5).
 */
@media (min-width: 769px) {
  .pu-launch__anchor,
  .pu-launch__nav-why {
    height: 44px;
  }
}

.pu-comparison__mode,
.pu-comparison__switch::before {
  height: 44px;
}

.pu-evolution__playback {
  min-height: 44px;
}

.pu-comparison__arrow,
.pu-service__arrow {
  width: 44px;
  height: 44px;
}
@media (max-width: 768px) {
.pu-evolution__card.pu-evolution__card--firewall{
  background-image: url(/wp-content/themes/culliganquench/purity/assets/images/purity-evolution-firewall-phone.webp) !important;
}
.pu-evolution__card.pu-evolution__card--filtration{
  background-image: url(/wp-content/themes/culliganquench/purity/assets/images/purity-evolution-filtration-phone.webp) !important;
}
}
.pu-comparison__panel:has(.pu-comparison__product--scene) .pu-comparison__name,
.pu-comparison__panel:has(.pu-comparison__product--scene) .pu-comparison__tagline{
  color:#fff !important;
}
.pu-comparison__product--scene{
  mask-image:none !important
}
@media (max-width: 768px) {
.pu-launch__tile--dispensing img{

padding-left:50%
}
}