/* Preview 2.2: phone navigation and a restrained company-logo carousel. */
.demo-label-mobile{display:none}
header .button{white-space:nowrap}
.logo-carousel{min-width:0}
.logo-carousel .logo-rail{display:grid;grid-auto-flow:column;grid-auto-columns:25%;grid-template-columns:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;border:1px solid #d3e0e4;background:#fff;scroll-behavior:smooth}
.logo-carousel .logo-rail::-webkit-scrollbar{display:none}
.logo-carousel .logo-cell{position:relative;min-height:140px;padding:0;border:0;border-right:1px solid #d3e0e4;background:#fff;overflow:hidden;scroll-snap-align:start}
.logo-carousel .logo-cell:last-child{border-right:0}
.logo-carousel .logo-cell img{position:absolute;left:50%;top:50%;width:180px;max-width:calc(100% - 48px);height:auto;max-height:none;object-fit:contain;transform:translate(-50%,-50%);filter:grayscale(1);opacity:.76;mix-blend-mode:multiply}
.logo-carousel .logo-cell img[alt="Velocity Impact Products"]{width:146px;max-width:calc(100% - 72px)}
.logo-carousel .logo-cell img[alt="TigerStop"]{width:160px;max-width:calc(100% - 56px)}
.logo-carousel .logo-cell:hover img{filter:grayscale(1);opacity:1}
.logo-carousel-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:16px}
.logo-carousel-status{font-size:10px;letter-spacing:.12em;color:#55717d}
.logo-carousel-controls{display:flex;gap:8px}
.logo-carousel-controls button{width:42px;height:40px;border:1px solid #94b2bf;background:transparent;color:#174856;font:400 22px/1 Arial,sans-serif;cursor:pointer}
.logo-carousel-controls button:hover:not(:disabled){background:#e1edee;border-color:#3d8891}
.logo-carousel-controls button:disabled{opacity:.3;cursor:default}
.logo-carousel-controls button:focus-visible,.logo-carousel .logo-rail:focus-visible{outline:2px solid #16878c;outline-offset:3px}
@media(max-width:1050px) and (min-width:761px){.logo-carousel .logo-rail{grid-auto-columns:33.333333%}}
@media(max-width:760px){
 header .wrap.nav{width:calc(100% - 32px);min-height:64px;gap:10px;flex-wrap:nowrap}
 header .brand{flex:0 0 auto}
 header .brand img{width:clamp(105px,30vw,140px);height:auto}
 header .nav-links,header .navlinks{min-width:0;display:flex;align-items:center;gap:10px!important;flex:0 0 auto}
 header .customer-login summary{font-size:11px;line-height:1.2;gap:6px}
 header .nav-links .button,header .navlinks .button{padding:11px 10px!important;min-height:40px;font-size:11px!important;line-height:1.2;white-space:nowrap;letter-spacing:0}
 .demo-label-desktop{display:none}.demo-label-mobile{display:inline}
 .customer-login-menu{right:-95px;max-width:calc(100vw - 32px)}
 .product-page .product-nav .wrap{display:flex;flex-wrap:nowrap;align-items:center;gap:16px;padding-top:5px;padding-bottom:5px;min-height:38px}
 .product-page .product-nav nav{display:flex;flex:1 1 auto;flex-wrap:nowrap;gap:10px;margin-top:0;justify-content:flex-end;min-width:0}
 .product-page .product-nav nav a{font-size:10.5px;white-space:nowrap}
 .product-page .product-nav .wrap>.architectural-product{margin:0;flex:0 0 auto;font-size:12px;padding:4.5px 6px 3.75px 7px}
 .flow-steps .flow-step{display:flex;align-items:center;grid-template-columns:none;width:100%;min-width:0;min-height:48px;padding:14px 16px;white-space:normal;text-wrap:pretty;font-size:12px}
 .logo-carousel .logo-rail{grid-auto-columns:50%}
 .logo-carousel .logo-cell{min-height:112px}
 .logo-carousel .logo-cell img{width:144px;max-width:calc(100% - 28px)}
 .logo-carousel .logo-cell img[alt="Velocity Impact Products"]{width:118px;max-width:calc(100% - 48px)}
 .logo-carousel .logo-cell img[alt="TigerStop"]{width:132px;max-width:calc(100% - 32px)}
}
@media(max-width:359px){
 header .wrap.nav{width:calc(100% - 28px);gap:6px}
 header .brand img{width:98px}
 header .nav-links,header .navlinks{gap:6px!important}
 header .customer-login summary{font-size:10px;gap:4px}
 header .nav-links .button,header .navlinks .button{font-size:10px!important;padding:11px 8px!important}
 .product-page .product-nav .wrap{gap:12px}
 .product-page .product-nav nav{gap:8px}
 .product-page .product-nav nav a{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.logo-carousel .logo-rail{scroll-behavior:auto}}
@media(min-width:761px) and (max-width:1050px){
 header .wrap.nav{gap:20px}
 header .brand img{width:150px}
 header .nav-links,header .navlinks{gap:18px!important;font-size:12px}
 header .customer-login summary{font-size:11px}
 header .nav-links .button,header .navlinks .button{padding:10px 13px!important;font-size:11px;white-space:nowrap}
}

/* Preserve the complete supplied PHOS circular mark. */
.logo-carousel .logo-cell img[alt="PHŌS Window"],.logo-carousel .logo-cell:hover img[alt="PHŌS Window"]{width:250px;max-width:none;clip-path:none;filter:grayscale(1)}
@media(max-width:760px){.logo-carousel .logo-cell img[alt="PHŌS Window"]{width:215px;max-width:none}}

.logo-carousel-status{display:none}