/* Shared motion, with progressive wheel smoothing and native touch scrolling. */
:root{--ease-ui:cubic-bezier(.22,1,.36,1);--motion-fast:160ms;--motion-ui:260ms}
html{scrollbar-gutter:stable}
html.lenis{scroll-behavior:auto}
body,.site-header,.site-footer,.industry-section,.enquiry-panel,.finder-section,.contact-band,.search-box,.quick-search-field{transition:background-color 320ms ease,color 220ms ease,border-color 220ms ease}
.button,.icon-button,.dialog-close,.mobile-search-button,.mobile-theme-toggle,.home-search button,.active-filters button,.category-filter,.product-tools>button,.remove-item,.quick-result,.tray-clear{transition:color var(--motion-fast) ease,background-color var(--motion-ui) ease,border-color var(--motion-ui) ease,box-shadow var(--motion-ui) ease,transform var(--motion-fast) var(--ease-ui)}
.button:active,.icon-button:active,.dialog-close:active,.home-search button:active{transform:scale(.98)}
.text-link,.footer-column a,.product-name button,.product-bottom>a,.source-link,.reset-filters{transition:color 200ms ease,border-color 200ms ease,opacity 200ms ease}
.form-grid input,.form-grid select,.form-grid textarea,.finder-form select,.brand-control select,.sort-control select,.quote-quantity input{transition:border-color 200ms ease,background-color 260ms ease,box-shadow 200ms ease}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.finder-form select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.main-nav>a:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--motion-ui) var(--ease-ui)}
.main-nav>a.active:after,.main-nav>a:focus-visible:after{transform:scaleX(1)}
.category-image,.product-image-link{transition:background-color 300ms ease,border-color 240ms ease,box-shadow 300ms ease}
.category-image img,.product-image-link img{transition:transform 520ms var(--ease-ui)}
.category-card:hover img{transform:none}
.product-image-link:hover img{transform:none}
.accordion-symbol:after{transition:transform 260ms var(--ease-ui),opacity 180ms ease}
summary{transition:color 180ms ease}
summary[aria-expanded="false"] .accordion-symbol:after{transform:rotate(90deg)}
summary[aria-expanded="true"] .accordion-symbol:after{transform:rotate(0)}
.reveal.pending-reveal{opacity:1;transform:none;transition:none}
.motion-pending{opacity:0}
.motion-instant{transition:none!important}
.utility-dialog[open],.compare-tray{animation:none}
.product-dialog,.utility-dialog{overscroll-behavior:contain}
.motion-dialog-opening::backdrop{animation:motion-backdrop-in 260ms ease both}
.motion-dialog-closing::backdrop{animation:motion-backdrop-out 160ms ease both}
.status-toast{transition:opacity 220ms ease,transform 300ms var(--ease-ui),visibility 220ms}
.compare-check{transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease}
@keyframes motion-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes motion-backdrop-out{from{opacity:1}to{opacity:0}}

@media(hover:hover) and (pointer:fine){
  .button:hover{transform:translateY(-2px)}
  .button:active{transform:translateY(0) scale(.98)}
  .main-nav>a:hover:after{transform:scaleX(1)}
  .category-card:hover img{transform:scale(1.035)}
  .product-image-link:hover img{transform:scale(1.035)}
  .product-image-link:hover,.category-card:hover .category-image{box-shadow:0 8px 24px #172b480c}
  .product-name button:hover,.footer-column a:hover,summary:hover{color:var(--accent)}
}

@media(max-width:767px){
  .mobile-nav{display:flex;flex-direction:column;gap:8px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);transition:opacity 200ms ease,transform 280ms var(--ease-ui),visibility 0s 280ms;max-height:calc(100dvh - 70px);overflow-y:auto;overscroll-behavior:contain}
  .mobile-nav.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition-delay:0s}
  .mobile-nav>a{transition:color 180ms ease,background-color 200ms ease;border-radius:6px}
  .mobile-nav>a:active{background:var(--surface)}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .motion-pending{opacity:1}
  .button:hover,.button:active,.icon-button:active,.dialog-close:active,.home-search button:active,.category-card:hover img,.product-image-link:hover img{transform:none}
}