.popular-section{padding:86px 0 70px;background:#f3f3f4;color:#010205;scroll-margin-top:20px}
.popular-heading,.gallery-bottom,.sample-disclosure{margin-inline:max(7.2%,calc((100% - 1360px)/2))}
.popular-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:44px}
.popular-heading h2{font-size:clamp(38px,3.8vw,54px);line-height:1.1;letter-spacing:-.025em}
.popular-heading p{font-size:16px;line-height:1.5;color:#535357;margin-top:18px}
.product-controls{display:flex;gap:12px;padding-bottom:2px}.product-controls[hidden]{display:none}
.gallery-button{width:50px;height:50px;display:grid;place-items:center;border:1px solid #747477;border-radius:50%;transition:background 180ms,color 180ms,opacity 180ms}
.gallery-button svg{width:23px;height:23px}.gallery-button:hover:not(:disabled){background:#010205;color:#fff;border-color:#010205}
.gallery-button:disabled{opacity:.3;cursor:default}
.popular-rail{--rail-gutter:max(7.2%,calc((100% - 1360px)/2));--card-width:calc((100vw - 2 * var(--rail-gutter) - 72px - 15px)/4);display:grid;grid-auto-flow:column;grid-auto-columns:var(--card-width);gap:24px;list-style:none;margin:0;padding:0 var(--rail-gutter) 14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--rail-gutter);scrollbar-width:none;outline-offset:-4px;scroll-behavior:smooth}
.popular-rail::-webkit-scrollbar{display:none}.popular-card{min-width:0;scroll-snap-align:start}
.sample-product{display:block;width:100%;min-height:44px}.sample-product:focus-visible{outline-offset:5px;border-radius:2px}
.product-stage{display:flex;align-items:center;justify-content:center;aspect-ratio:1;background:#f3f3f4;border-radius:3px;overflow:hidden}
.product-stage img{display:block;width:100%;height:100%;object-fit:contain;padding:30px;mix-blend-mode:darken;transition:transform 500ms cubic-bezier(.16,1,.3,1)}
.sample-product:hover .product-stage img{transform:scale(1.045)}
.product-caption{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:22px;min-height:54px}
.product-name{font-size:21px;line-height:1.25;letter-spacing:-.015em}
.product-caption svg{width:19px;height:19px;margin-top:4px;transition:transform 220ms cubic-bezier(.16,1,.3,1)}
.sample-product:hover .product-caption svg{transform:translateX(4px)}
.product-brand{display:block;color:#535357;font-size:14px;line-height:1.4;margin-top:7px}
.product-price{display:block;font-size:16px;line-height:1.4;margin-top:15px}
.gallery-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #d0d0d3;padding-top:20px;margin-top:32px;font-size:14px;color:#535357}
.sample-disclosure{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;padding:24px;background:#fff;margin-top:28px;outline-offset:4px}
.sample-disclosure[hidden]{display:none}.sample-disclosure h3{font-size:23px;line-height:1.3;margin-bottom:12px}.sample-disclosure p{font-size:17px;line-height:1.5;color:#404044;max-width:65ch}
.sample-disclosure button{display:grid;place-items:center;width:44px;height:44px;flex:none}
.popular-brands{padding:74px max(7.2%,calc((100% - 1360px)/2)) 84px;background:#fff;color:#010205}
.brands-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:40px}
.brands-heading h2{font-size:40px;line-height:1.12;letter-spacing:-.025em}
.brands-heading p{font-size:16px;line-height:1.5;color:#535357}
.brand-lineup{list-style:none;margin:42px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid #d9d9dc}
.brand-lineup li+li{border-left:1px solid #d9d9dc}
.brand-example{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:156px;padding:32px 44px;transition:background 180ms}
.brand-example:hover{background:#f3f3f4}.brand-example:focus-visible{outline-offset:-5px}
.brand-example img{display:block;object-fit:contain;filter:grayscale(1);max-width:100%;height:auto}
.brand-example .brand-moose{width:220px;filter:brightness(0)}.brand-percent{width:110px}.brand-warn{width:142px}
.brand-example svg{position:absolute;right:21px;bottom:21px;width:18px;height:18px;transition:transform 220ms cubic-bezier(.16,1,.3,1)}
.brand-example:hover svg{transform:translateX(4px)}
.brand-sample-status:empty{display:none}.brand-sample-status{font-size:16px;line-height:1.5;color:#404044;margin-top:22px;max-width:70ch}
@media(min-width:701px) and (max-width:1100px){
 .popular-heading,.gallery-bottom,.sample-disclosure{margin-inline:5%}
 .popular-rail{--rail-gutter:5%;--card-width:calc((100vw - 2 * var(--rail-gutter) - 48px - 15px)/3)}
 .product-stage img{padding:22px}.product-name{font-size:20px}.popular-brands{padding-inline:5%}.brand-example{padding:28px 30px}.brand-moose{width:190px}
}
@media(max-width:700px){
 .popular-section{padding:56px 0 48px;scroll-margin-top:0}
 .popular-heading,.gallery-bottom,.sample-disclosure{margin-inline:24px}
 .popular-heading{display:block;margin-bottom:30px;position:relative;padding-bottom:65px}
 .popular-heading h2{font-size:37px;line-height:1.1}.popular-heading p{font-size:15px;line-height:1.5;max-width:28ch;margin-top:16px}
 .product-controls{position:absolute;right:0;bottom:0;gap:10px}.gallery-button{width:46px;height:46px}
 .popular-rail{--rail-gutter:24px;--card-width:calc(100vw - 144px);gap:16px;scroll-padding-inline:24px}
 .product-stage img{padding:32px}.product-caption{margin-top:21px;min-height:52px}.product-name{font-size:22px}.product-brand{font-size:15px}.product-price{margin-top:14px}
 .gallery-bottom{padding-top:18px;margin-top:26px;font-size:13px}.gallery-hint{font-size:13px}
 .sample-disclosure{padding:20px;gap:14px}.sample-disclosure h3{font-size:21px}.sample-disclosure p{font-size:16px}
 .popular-brands{padding:52px 24px 58px}.brands-heading{display:block}.brands-heading h2{font-size:34px}.brands-heading p{font-size:15px;margin-top:17px}.brands-heading p br{display:none}
 .brand-lineup{margin-top:30px;grid-template-columns:1fr}.brand-lineup li+li{border-left:0;border-top:1px solid #d9d9dc}
 .brand-example{height:126px;padding:26px 50px}.brand-moose{width:220px}.brand-percent{width:98px}.brand-warn{width:125px}
 .brand-example svg{right:8px;bottom:54px}.brand-sample-status{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.popular-rail{scroll-behavior:auto}.product-stage img,.product-caption svg,.brand-example,.brand-example svg,.gallery-button{transition:none}.sample-product:hover .product-stage img,.sample-product:hover .product-caption svg,.brand-example:hover svg{transform:none}}
