/* Shared motion: fast feedback, gentle entrances, no delays before interaction. */
:root{--motion-fast:160ms;--motion-panel:240ms;--motion-ease:cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:no-preference){
 html{scroll-behavior:smooth}
 .button,.header-action,.customer-menu-toggle,.category-menu-label button,
 .category-menu-links>a,.customer-menu-panel a,.customer-menu-panel button,
 .mobile-category a,.dashboard-nav a,.order-colour-options button,
 .quantity-colour-tabs button,.product-colour-swatches button{
  transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease,
   border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,
   transform var(--motion-fast) var(--motion-ease);
 }
 .button:active,.order-colour-options button:active,.quantity-colour-tabs button:active{transform:scale(.98)}
 .shop-card,.range-card{transition:box-shadow var(--motion-panel) ease,translate var(--motion-panel) var(--motion-ease)}
 .shop-photo img,.product-thumbnails button,.category-menu-feature img{transition:transform 300ms var(--motion-ease),border-color var(--motion-fast) ease}
 @media(hover:hover){
  .shop-card:hover,.range-card:hover{translate:0 -3px;box-shadow:0 10px 24px #191d6310}
  .shop-photo:hover img:not(.catalogue-logo),.category-menu-feature:hover img{transform:scale(1.025)}
  .button:hover{transform:translateY(-1px)}
 }
 .category-menu-panel:not([hidden]),.customer-menu-panel:not([hidden]),
 .live-search-results:not([hidden]){animation:panel-enter var(--motion-panel) var(--motion-ease) both;transform-origin:top center}
 .mobile-drawer:not([hidden]){animation:drawer-enter 280ms var(--motion-ease) both}
 .search-modal:not([hidden]){animation:soft-fade 180ms ease both}
 .search-modal:not([hidden]) .search-modal-panel,dialog[open]{animation:dialog-enter var(--motion-panel) var(--motion-ease) both}
 dialog[open]::backdrop,body.category-menu-open:after{animation:soft-fade 180ms ease both}
 [data-dashboard-panel]:not([hidden]),[data-auth-panel]:not([hidden]),
 [data-order-colour]:not([hidden]),[data-branding-fields]:not([hidden]){animation:content-enter 200ms var(--motion-ease) both}
 details[open]>:not(summary){animation:content-enter 180ms var(--motion-ease)}
 .store-title,.customer-product-overview,.brand-hero-content{animation:content-enter 320ms var(--motion-ease) both}
 @keyframes panel-enter{from{opacity:0;translate:0 -7px}to{opacity:1;translate:0 0}}
 @keyframes drawer-enter{from{opacity:0;translate:-20px 0}to{opacity:1;translate:0 0}}
 @keyframes dialog-enter{from{opacity:0;translate:0 12px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
 @keyframes content-enter{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
 @keyframes soft-fade{from{opacity:0}to{opacity:1}}
 /* Native discrete transitions keep closing panels visible only for the fade. */
 @supports(transition-behavior:allow-discrete){
  .category-menu-panel,.customer-menu-panel,.live-search-results,.mobile-drawer,.search-modal,dialog{
   transition:opacity 180ms ease,translate 180ms var(--motion-ease),display 180ms allow-discrete,overlay 180ms allow-discrete;
  }
  .category-menu-panel[hidden],.customer-menu-panel[hidden],.live-search-results[hidden],.mobile-drawer[hidden],.search-modal[hidden],dialog:not([open]){opacity:0;translate:0 -5px;pointer-events:none}
  dialog::backdrop{transition:opacity 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete}
  dialog:not([open])::backdrop{opacity:0}
 }
 @supports(interpolate-size:allow-keywords){
  details{interpolate-size:allow-keywords}
  details::details-content{block-size:0;opacity:0;overflow:clip;transition:block-size var(--motion-panel) var(--motion-ease),opacity var(--motion-fast) ease,content-visibility var(--motion-panel) allow-discrete}
  details[open]::details-content{block-size:auto;opacity:1}
 }
}
/* Keep all controls and information immediate when motion is reduced. */
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}