/* Shared narrow-screen typography. Text stays in the document and containers grow. */
.type-mobile-break{display:none}
.type-term,.type-phrase{font:inherit;color:inherit;letter-spacing:inherit}

@media(max-width:760px){
  :where(main,.contact-band,.site-footer){line-break:strict;word-break:normal;overflow-wrap:break-word}
  :where(main,.contact-band) :is(h1,h2,h3,h4,h5,h6){text-wrap:balance;word-break:normal;overflow-wrap:anywhere;min-width:0;max-width:100%}
  :where(main,.contact-band,.site-footer) :is(p,li,dd,figcaption){text-wrap:pretty;line-break:strict}
  :where(main,.contact-band) :is(h1,h2,h3,h4,h5,h6) .type-desktop-break{display:none}
  :where(main,.contact-band) :is(h1,h2,h3,h4,h5,h6) .type-mobile-break{display:inline}
  /* Short authored phrases move as a unit; long phrases can still wrap inside. */
  :where(main,.contact-band) :is(h1,h2,h3,h4,h5,h6) .type-phrase{display:inline-block;max-width:100%;white-space:normal;word-break:normal;overflow-wrap:break-word;line-break:strict;text-wrap:balance;vertical-align:baseline}
  :where(main,.contact-band) :is(h1,h2,h3,h4,h5,h6) .type-term{display:inline-block;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-wrap:balance;vertical-align:baseline}

  /* Grid/flex children must be allowed to shrink to the available column. */
  :where(.wrap,.narrow,.split,.section-head,.product-detail,.selection-grid,.signature-grid,.water-product-layout,.water-proof-grid,.home-water-entries,.ej-grid,.faq-hero-grid)>*{min-width:0}
  :where(.selection-copy,.product-body,.water-cm-copy,.water-lifestyle-copy,.water-product-order,.home-water-copy,.ej-card-copy,.faq-answer h3){min-width:0}
  :where(.breadcrumb,.selection-model,.selection-source,.detail-facts dd,.specs dd,.cart-row h2,.cart-row p){overflow-wrap:anywhere}
  :where(.btn,.text-link,.comparison-action,.related-links a,.catalog-category-links a){max-width:100%;white-space:normal;text-wrap:balance;overflow-wrap:break-word}
  :where(.btn,.text-link,.comparison-action):after{flex-shrink:0}

  /* Large display copy scales with the actual phone width, not the desktop line. */
  .hero h1{font-size:clamp(32px,8.6vw,39px);letter-spacing:.025em;line-height:1.55}
  .page-hero h1{font-size:clamp(27px,7.4vw,32px);letter-spacing:.02em;line-height:1.55}
  .catalog-hero h1,.water-cm-copy h1{font-size:clamp(34px,9.2vw,43px);letter-spacing:.025em;line-height:1.5}
  .water-product-layout h1{font-size:clamp(29px,7.9vw,35px);letter-spacing:.015em;line-height:1.55}
  .display,.water-editorial .display,.catalog-compare .display{font-size:clamp(27px,7.4vw,32px);letter-spacing:.015em;line-height:1.6}
  .home-renewal .home-film-copy h2,.home-renewal .home-product-heading h2{font-size:clamp(27px,7.5vw,32px);letter-spacing:.015em;line-height:1.6}
  .detail-section h2,.product-body h2,.ej-card h2,.ej-card h3{letter-spacing:0}

  /* Long product names retain all words. Price units remain readable as a group. */
  .selection-card h3{font-size:clamp(16px,4.3vw,19px);letter-spacing:0;line-height:1.55}
  .signature-grid .selection-card h3{font-size:clamp(20px,5.5vw,25px);letter-spacing:0;line-height:1.5}
  .selection-price>strong{font-size:clamp(21px,5.7vw,25px);letter-spacing:-.025em;word-break:normal;overflow-wrap:normal;font-variant-numeric:tabular-nums}
  .selection-rental>strong,.selection-open>strong{font-size:clamp(16px,4.3vw,20px);letter-spacing:0;text-wrap:balance;overflow-wrap:anywhere}
  .selection-price small{max-width:100%;white-space:normal;text-wrap:balance}
  .selection-price>strong>small{white-space:nowrap}
  .selected-detail .selection-price>strong,.water-product-order .selection-price>strong{font-size:clamp(30px,8.5vw,38px)}
  .selection-brand{display:flex;flex-wrap:wrap;gap:5px 8px;align-items:baseline}
  .selection-brand>span{float:none;max-width:100%;text-wrap:balance}
  .selection-tags>span{max-width:100%;text-wrap:balance}
  .selection-copy>.text-link{gap:8px;line-height:1.7}
  .selection-copy>.text-link:after{margin-left:0}
  .selection-copy .cart-add{padding-inline:10px;gap:8px;font-size:12px;line-height:1.7}

  /* Keep numerals and their smaller units on one line inside each metric. */
  .water-product-metrics>.wrap{grid-template-columns:repeat(3,minmax(0,1fr))}
  .water-product-metrics>.wrap>div{min-width:0;padding-inline:7px}
  .water-product-metrics strong{font-size:clamp(24px,6.7vw,30px);white-space:nowrap;letter-spacing:-.035em}
  .water-product-metrics small{font-size:clamp(12px,3.4vw,15px);margin-left:1px;letter-spacing:0;white-space:nowrap}
  .water-product-metrics span{font-size:10px;line-height:1.8;text-wrap:balance;overflow-wrap:break-word}
  .water-proof-card strong{white-space:nowrap;font-size:clamp(41px,11vw,54px);letter-spacing:-.04em}
  .water-proof-card strong span{font-size:.38em;margin-left:2px}
  .water-proof-card h3{font-size:clamp(20px,5.5vw,24px);letter-spacing:0;line-height:1.6}
  .mr-benefit-panel>strong{white-space:nowrap;letter-spacing:-.025em}

  .water-anchor-nav{flex-wrap:wrap}
  .water-anchor-nav a{min-width:0;white-space:normal;text-wrap:balance;line-height:1.7}
  .collection-caption{gap:15px;flex-wrap:wrap}
  .faq-answer summary:after{flex-shrink:0}
}

@media(max-width:430px){
  /* A full-width featured card gives its product name usable room on small phones. */
  .signature-grid .selection-card{grid-template-columns:minmax(0,1fr)}
  .signature-grid .selection-visual{height:auto;min-height:0;padding:14px}
  .signature-grid .selection-visual>img{max-height:250px}
  .signature-grid .selection-film{height:250px}
  .signature-grid .selection-copy{padding:23px 21px}
  .signature-grid .selection-card h3{font-size:25px}
  .signature-grid .selection-price>strong{font-size:29px}
  .signature-grid .selection-rental>strong,.signature-grid .selection-open>strong{font-size:23px}
  .selection-grid{gap:12px}
  .selection-copy{padding:16px 11px 18px}
  .selection-card h3{font-size:16px}
  .selection-brand{font-size:9px;letter-spacing:0}
  .selection-copy .cart-add{font-size:11px;padding-inline:7px}
  .collection-section .mr-benefit-panel{padding-inline:10px}
  .collection-section .mr-benefit-panel>strong{font-size:clamp(25px,7vw,30px)}
  .collection-section .mr-benefit-tags span{font-size:10px;padding-inline:4px}
  .home-renewal .home-water-copy h3{font-size:20px;letter-spacing:0;line-height:1.5}
  .water-ideal h2,.water-evidence h3{font-size:26px;letter-spacing:0}
  .water-evidence{padding-inline:20px}
  .water-evidence-heading .water-impact{font-size:22px}
  .water-evidence-heading .water-impact strong{font-size:56px}
  .water-volume-more .display{font-size:28px}
}