/* Optical material and component constraints, preserving the approved scene. */
.glass{background:linear-gradient(125deg,#ffffff35,#e7f5ff12 52%,#ffffff24);border:1px solid #fffffff0;box-shadow:inset 0 0 0 1px #a3cce957,inset 1px 2px 2px 1px #ffffffb8,inset -1px -2px 3px 1px #b5d9ee8c,0 2px 2px #3965842a,0 8px 24px #1e537b16;backdrop-filter:blur(2px) saturate(1.12);-webkit-backdrop-filter:blur(2px) saturate(1.12)}
.primary-nav,.menu-toggle{position:relative}
.contact-nav .contact-nav-action{background:#ffffff25;box-shadow:inset 0 1px 1px #ffffff7a}
.category-rail{display:grid;grid-template-rows:repeat(4,minmax(0,1fr));padding:8px 7px;overflow:hidden;background:linear-gradient(110deg,#ffffff3d,#eff9ff10 60%,#ffffff28)}
.category-rail button{min-width:0;min-height:0;padding:8px 2px;gap:7px;font-size:clamp(11px,.88vw,14px);line-height:1.2}
.category-rail button span{max-width:100%;overflow-wrap:normal}
.category-rail button svg{flex-shrink:0;width:24px;height:24px}
.category-rail button[aria-pressed=true]{background:linear-gradient(120deg,#dbf3ff6e,#ffffff40);box-shadow:inset 0 0 0 1px #fffffff2,inset 2px 0 2px #8bd0ff90,0 2px 6px #6ca5d51a}
.category-rail button:focus-visible{outline-offset:-4px}
.range-shelf{background:linear-gradient(115deg,#ffffff3c,#d9f3ff21 52%,#ffffff38);box-shadow:inset 0 0 0 1px #e7faffeb,inset 0 4px 4px #fff9,inset 0 -4px 4px #88cce85e,0 5px 2px #c0e8fb77,0 9px 12px #15506c55}
.range-shelf:before{inset:4px;border-color:#ffffff84;box-shadow:inset 0 -3px 2px #f6ffffa3,inset 0 2px 4px #fff9}
.range-shelf:after{height:7px;bottom:-4px;box-shadow:0 3px 3px #347eaa4a}
.model-card{background:#ffffff10;border-color:#ffffff70}
.model-card[aria-current=true]{background:#eaf8ff48;box-shadow:inset 0 -3px 0 #0053ff,inset 0 1px 1px #fff,0 2px 7px #285f8b24}
.nav-scrim{position:fixed;inset:0;z-index:45;border:0;background:#0b2e4b1a;cursor:default}
.mobile-nav{left:auto;right:22px;top:92px;width:min(330px,calc(100% - 44px));padding:12px;border-radius:23px;background:#f3faffed;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:inset 0 0 0 2px #ffffff94,0 18px 55px #16385540;max-height:calc(100svh - 112px);overflow:auto}
.mobile-nav a{border-radius:12px;padding:14px 17px;font-size:15px;min-height:48px}
.mobile-nav a:hover,.mobile-nav a:focus-visible{background:#e0effb}
.menu-toggle[aria-expanded=true]{background:#eff8fff2}
.customer-logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 35px;margin-top:43px;align-items:center}
.customer-logos figure{height:112px;margin:0;display:flex;align-items:center;justify-content:center;padding:18px 15px;background:#fff;border:1px solid #e0e9ef;border-radius:5px}
.customer-logos img{max-height:66px;max-width:165px;width:auto;height:auto;object-fit:contain}
.customer-logos .logo-harmony{max-width:130px;max-height:63px}.customer-logos .logo-sasol{max-height:72px;max-width:71px}
.editorial-section{background:#fff;padding-top:0}
.editorial-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
.editorial-grid figure{margin:0;min-width:0}
.editorial-grid img{width:100%;height:350px;object-fit:cover;border-radius:5px;background:#e4eff4}
.editorial-grid figcaption{font-size:12px;line-height:1.6;color:#526476;margin-top:14px}
.service-strip{display:flex;flex-wrap:wrap;gap:13px 30px;margin-top:31px;padding-top:25px;border-top:1px solid #d3e1ea;font-size:13px;color:#24465e}
.directions-link{display:inline-flex;min-height:44px;align-items:center;text-underline-offset:4px;font-size:12px;margin-top:8px}
.family-page-link{display:inline-flex;padding:12px 0;margin-top:8px;min-height:44px;font-size:12px;text-underline-offset:4px}
@media(max-width:1000px){.customer-logos{gap:20px}.customer-logos img{max-width:135px}.editorial-grid img{height:280px}}
@media(max-width:900px){.customer-logos{grid-template-columns:repeat(3,minmax(0,1fr))}.category-rail button{font-size:11px;gap:6px}}
@media(max-width:600px){.category-rail{padding:7px 5px}.category-rail button{min-height:0;padding:6px 1px;gap:5px;font-size:10px}.category-rail button svg{width:22px;height:22px}.mobile-nav{top:83px;right:16px;width:min(310px,calc(100% - 32px))}.customer-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.customer-logos figure{height:102px;padding:14px 9px}.customer-logos img{max-width:128px;max-height:62px}.customer-logos .logo-harmony{max-width:120px}.customer-logos .logo-sasol{max-height:66px}.editorial-grid{display:block}.editorial-grid figure+figure{margin-top:27px}.editorial-grid img{height:245px}.service-strip{gap:12px 22px;font-size:12px}}

.product-card:focus-within{outline:3px solid #0755ee;outline-offset:4px}
.selected-pump-group{display:flex;align-items:end;gap:16px;margin:20px 0;padding:16px;background:#eff7fc;border-radius:10px}.selected-pump-group label{flex:1;min-width:0}.selected-pump-group input{background:#fff}.selected-pump-group button{font-size:12px;flex-shrink:0;min-height:44px}

/* One crisp SVG system. Icons never depend on a font or emoji renderer. */
.ui-icon{display:inline-block;width:20px;height:20px;flex:0 0 auto;vertical-align:middle;overflow:visible}
.primary-nav summary{display:flex;align-items:center;gap:5px}
.primary-nav .ui-icon-chevron-down{width:13px;height:13px}
.contact-nav .ui-icon-email{width:22px;height:22px;fill:none;stroke:currentColor}
.contact-nav .whatsapp-icon{width:28px;height:28px;box-sizing:border-box;padding:5px;background:#25d366;border-radius:50%;fill:#fff;stroke:none}
.contact-nav .whatsapp-icon path{fill:inherit;stroke:none}
.menu-toggle,.dialog-close{padding:0}
.menu-toggle .ui-icon,.dialog-close .ui-icon{display:block;margin:auto;width:23px;height:23px}
.shelf-arrow{display:grid;place-items:center;flex:0 0 44px;width:44px;min-width:44px;height:44px;padding:0;border-radius:50%;transition:background .18s ease}
.shelf-arrow .ui-icon{width:24px;height:24px}
.shelf-arrow:hover{background:#ffffff70}
.shelf-arrow:active{background:#d9efffb3}
.explore-button .ui-icon{width:25px;height:25px}
.scroll-hint{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.scroll-hint .ui-icon{width:15px;height:15px}
.search-label>.ui-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none}
.text-link,.family-page-link,.product-card-copy>span,.catalogue-directory a{display:inline-flex;align-items:center;gap:9px}
.text-link .ui-icon,.family-page-link .ui-icon,.product-card-copy .ui-icon,.catalogue-directory .ui-icon{width:16px;height:16px}
.text-link span{padding:0}

/* Stable clear glass: no SVG backdrop displacement, content sampling or tiling.
   Bevel highlights belong to the material; text/icons remain one sharp layer. */
.glass{background:linear-gradient(125deg,#ffffff38,#e7f5ff14 52%,#ffffff29);border:1px solid #fffffff0;box-shadow:inset 0 0 0 1px #a3cce957,inset 1px 2px 2px 1px #ffffffb8,inset -1px -2px 3px 1px #b5d9ee8c,0 2px 2px #3965842a,0 8px 24px #1e537b16;backdrop-filter:blur(3px) saturate(1.12);-webkit-backdrop-filter:blur(3px) saturate(1.12)}
.contact-nav .contact-nav-action{background:transparent;box-shadow:none}
.range-shelf{transform:none;background:linear-gradient(115deg,#ffffff43,#d9f3ff24 52%,#ffffff38);backdrop-filter:blur(4px) saturate(1.12);-webkit-backdrop-filter:blur(4px) saturate(1.12)}
.range-shelf:before{inset:3px;border-color:#ffffffad;box-shadow:inset 0 -2px 2px #f6ffffa3,inset 0 2px 3px #fff9}
.range-shelf:after{height:4px;bottom:-3px;box-shadow:0 2px 3px #347eaa33}
.site-header.scrolled .glass{backdrop-filter:none;-webkit-backdrop-filter:none}
.mobile-nav.glass{background:#f3fafff5;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}

/* Fit the complete showroom to the available screen, independently of width. */
@media(min-width:901px) and (max-width:1100px){.primary-nav{display:none}.menu-toggle{display:block;flex-shrink:0}.contact-nav{margin-left:auto}.site-header .brand{margin-right:auto}.mobile-nav{top:100px}.site-header.scrolled .mobile-nav{top:78px}}
.showroom{height:100svh;min-height:0;max-height:none;aspect-ratio:auto;background-size:cover;background-position:center}
.site-header:not(.scrolled){padding-top:clamp(18px,3svh,40px)}
.site-header:not(.scrolled) .brand{width:clamp(190px,22vw,440px);min-width:190px}
.headline{top:18%;left:25%;right:16%}
.headline h1{font-size:clamp(28px,3.6svh,50px)}
.category-rail{top:28%;height:42%}
.pump-stage{inset:29% 7% 34% 16%}
.selection-name{bottom:26.5%}
.range-shelf{height:17%;min-height:112px;bottom:6.5%}
.scroll-hint{bottom:1.8%}
@media(max-width:900px){
  .site-header:not(.scrolled){padding:20px 22px 0}
  .site-header:not(.scrolled) .brand{width:210px;min-width:0}
  .headline{top:20%;left:20%;right:8%}
  .headline h1{font-size:clamp(28px,3.6svh,42px)}
  .category-rail{top:32%;height:38%}
  .pump-stage{inset:32% 1% 33% 20%}
  .selection-name{bottom:25.5%}
  .range-shelf{height:17%;bottom:6.5%;min-height:112px}
}
@media(max-width:600px){
  .site-header:not(.scrolled){padding:14px 16px 0}
  .site-header:not(.scrolled) .brand{width:190px;min-width:0}
  .contact-nav{top:79px}
  .contact-nav .ui-icon-email{width:18px;height:18px}
  .contact-nav .whatsapp-icon{width:23px;height:23px;padding:4px}
  .headline{top:clamp(122px,18svh,176px);left:13%;right:7%}
  .headline h1{font-size:clamp(26px,3.8svh,34px)}
  .category-rail{top:33%;height:34%}
  .pump-stage{inset:34% -17% 36% 24%}
  .selection-name{bottom:28%}
  .range-shelf{height:clamp(118px,18svh,158px);min-height:0;bottom:5%;padding:9px 4px 56px;gap:2px}
  .model-card{min-width:70px}
  .shelf-arrow{flex-basis:44px;width:44px;min-width:44px;height:44px}
  .shelf-arrow .ui-icon{width:21px;height:21px}
  .explore-button{min-height:44px;height:44px}
  .explore-button .ui-icon{width:22px;height:22px}
  .scroll-hint{bottom:1.3%}
}
@media(min-width:601px) and (max-height:650px){
  .site-header:not(.scrolled){padding:12px 3.5vw 0}
  .site-header:not(.scrolled) .brand{width:200px;min-width:0}
  .headline{top:21%}
  .headline h1{font-size:clamp(22px,4.5svh,29px)}
  .category-rail{top:31%;height:40%}
  .category-rail button{padding:3px 1px;gap:4px;font-size:10px}
  .category-rail button svg{width:20px;height:20px}
  .pump-stage{top:33%;bottom:35%}
  .selection-name{bottom:27%;gap:2px}
  .selection-name span:first-child{font-size:12px}
  .selection-name span:last-child{font-size:10px}
  .range-shelf{height:20%;min-height:78px;bottom:5%;padding:8px 12px;gap:5px}
  .model-card{font-size:10px;min-width:74px;padding:2px 5px 5px;gap:2px}
  .model-card img{height:calc(100% - 18px);max-height:70px}
  .explore-button{min-height:44px;min-width:155px;font-size:12px;padding:8px 13px;gap:10px}
  .explore-button .ui-icon{width:22px;height:22px}
  .scroll-hint{bottom:1%;font-size:10px}
}
@media(max-width:900px) and (min-width:601px) and (max-height:500px){
  .site-header:not(.scrolled) .brand{width:165px}
  .headline{top:21%;left:26%;right:16%}
  .headline h1{font-size:22px}
  .category-rail{top:22.5%;height:49.5%;width:13%;padding:6px 5px}
  .category-rail button{font-size:9px;gap:2px;padding:2px 0}
  .category-rail button svg{width:18px;height:18px}
  .pump-stage{top:34%;bottom:35%}
  .selection-name{bottom:27%;left:28%;right:15%}
  .selection-name span:last-child{font-size:9px}
  .range-shelf{left:4%;right:4%;height:20%;bottom:5.5%}
}
@media(max-width:600px) and (max-height:640px){
  .site-header:not(.scrolled){padding-top:10px}
  .site-header:not(.scrolled) .brand{width:170px}
  .contact-nav{top:69px}
  .headline{top:122px}
  .headline h1{font-size:26px}
  .category-rail{top:38%;height:35%}
  .category-rail button{padding:3px 0;gap:3px;font-size:9px}
  .category-rail button svg{width:18px;height:18px}
  .pump-stage{top:39%;bottom:36%}
}
@media(max-width:600px) and (max-height:539px){.showroom{height:560px}}