/* Interaction rhythm shared by the public site and CMS. */
:root{--motion-fast:140ms;--motion-normal:220ms;--motion-ease:cubic-bezier(.2,.7,.2,1)}
:where(button,.cp-btn,.page-button,.admin-nav a,.cp-nav a,.cp-mobile-nav a,summary,.select-option,input,textarea){transition:background-color var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast),opacity var(--motion-fast)}
:where(.page-button,.cp-btn,.site-select,.calendar-actions button,.editor-actions button){transition:background-color var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast),opacity var(--motion-fast),translate var(--motion-fast)}
:where(.page-button,.cp-btn,.site-select,.calendar-actions button,.editor-actions button):active:not(:disabled){translate:0 1px}
.select-chevron{transition:transform var(--motion-normal) var(--motion-ease)}
.site-select[aria-expanded=true] .select-chevron{transform:rotate(180deg)}
.cp-menu span{display:inline-block;transition:transform var(--motion-normal) var(--motion-ease)}
.cp-menu[aria-expanded=true] span{transform:rotate(45deg)}
.select-options,.calendar-popup,.cp-mobile-nav{transform-origin:top center}
dialog::backdrop{animation:jump-backdrop 190ms ease-out}
dialog[inert]::backdrop{animation:jump-backdrop-out 140ms ease-in forwards}
@keyframes jump-backdrop{from{opacity:0}to{opacity:1}}
@keyframes jump-backdrop-out{to{opacity:0}}
@keyframes jump-content{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
.image-picker-grid,.enquiry-review:not([hidden]){animation:jump-content 220ms var(--motion-ease)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

:where(button:not(:disabled),a,summary){-webkit-tap-highlight-color:transparent}
:where(.product-thumbs button,.product-filters button,.admin-nav a,.view-3d){transition:background-color var(--motion-fast),border-color var(--motion-fast),opacity var(--motion-fast),box-shadow var(--motion-fast),translate var(--motion-fast)}
:where(.product-thumbs button,.product-filters button,.view-3d):active{translate:0 1px}
@media(hover:hover){:where(.page-button,.view-3d,.image-choice):hover{box-shadow:0 5px 16px #29231c18}}

/* Navigation keeps the page chrome and content opaque. */
html{background:#f3eee5;scrollbar-gutter:stable}
#content[aria-busy=true]{cursor:progress}
#cp-head{view-transition-name:site-header}
@view-transition{navigation:auto}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:jump-page-arrive 150ms ease-out}
::view-transition-old(site-header),::view-transition-new(site-header){animation:none}
@keyframes jump-page-arrive{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}