/* Motion is enabled before paint. Header actions keep their existing layout. */
[data-motion-control]{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
html[data-motion="full"] :is(.main-nav,.nav-tabs) [data-entry-icon-ready]::before{width:22px;height:22px;transition:transform 220ms cubic-bezier(.16,1,.3,1),opacity 180ms ease-out}
html[data-motion="full"] [data-entry-icon-ready]:not(:disabled):not([aria-busy="true"]):not([aria-disabled="true"]):is(:hover,:focus-visible)::before{transform:translateY(-3px) rotate(-9deg) scale(1.14)}
html[data-motion="full"] [data-entry-icon="mouse-side"]:is(:hover,:focus-visible)::before{transform:translateY(-2px) rotate(-12deg) scale(1.14)}
html[data-motion="full"] :is(.btn,.button,.adm-button,.primary-button,.secondary-button):not(:disabled):not([aria-busy="true"]){transition:transform 180ms cubic-bezier(.16,1,.3,1),background-color 160ms ease-out,border-color 160ms ease-out,box-shadow 180ms ease-out}
html[data-motion="full"] :is(.btn-primary,.button.primary,.adm-button-primary):not(:disabled):not([aria-busy="true"]):hover{transform:translateY(-2px);box-shadow:0 5px 13px #a4420f26}
html[data-motion="full"] .modal-backdrop:not([hidden]) .modal-panel{animation:zj-panel-arrive 300ms cubic-bezier(.16,1,.3,1)}
html[data-motion="full"] dialog[open]:not(.zj-dialog-fallback):not(#detailDialog):not(#contactDialog):not(#guideDialog){animation:zj-panel-arrive 280ms cubic-bezier(.16,1,.3,1)}
html[data-motion="full"] dialog.zj-dialog-fallback[open]:not(#detailDialog):not(#contactDialog):not(#guideDialog){animation:zj-panel-fade 180ms ease-out}
html[data-motion="full"] .adm-intent-details>summary::before{transition:transform 180ms ease-out}
html[data-motion="full"] .quantity-shortcuts button[aria-pressed="true"] svg{animation:zj-choice-mark 220ms ease-out}
@keyframes zj-panel-arrive{from{opacity:.45;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes zj-panel-fade{from{opacity:.45}to{opacity:1}}
@keyframes zj-choice-mark{from{opacity:.3;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@media(max-width:700px){[data-motion-control]{gap:7px}.header-links[data-motion-control]{max-width:54%;column-gap:8px;row-gap:3px}.header-links[data-motion-control] a{font-size:11px}}
@media(max-width:700px),(pointer:coarse){.header-links[data-motion-control] a:not(.desktop-link){display:inline-flex;align-items:center;min-height:44px;font-size:12px}.header-links[data-motion-control]{row-gap:0}}
@media(max-width:380px){
 .site-header .header-main.page-container{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;padding-top:10px}
 .site-header .header-main .brand-link{grid-column:1;grid-row:1;min-width:0}
 .site-header .header-links[data-motion-control]{display:contents}
 .site-header .header-links[data-motion-control] a:not(.desktop-link){grid-row:2}
}

/* One local preference, shared by all modules. Full mode keeps the established motion. */
#zj-motion-settings{margin-top:24px;padding-top:22px;border-top:1px solid #e1e4e9}
#zj-motion-settings:empty{display:none}
#zj-motion-settings label{display:block;margin-bottom:9px;font-size:14px;font-weight:700;color:#222630}
#zj-motion-settings select{display:block;min-height:44px;width:min(100%,280px);padding:9px 34px 9px 12px;border:1px solid #cfd3da;border-radius:6px;background:#fff;color:#222630;font:inherit}
#zj-motion-settings select:focus-visible{outline:3px solid #a84316;outline-offset:3px}
#zj-motion-settings .zj-motion-help{margin:9px 0 0;color:#5c6370;font-size:13px;line-height:1.65}
#zj-motion-settings .zj-motion-note{margin:4px 0 0;color:#5c6370;font-size:12px;line-height:1.65}
html[data-motion="full"] .face-card-cover img{transition:transform 180ms ease-out}
html[data-motion="full"] .face-card-cover:hover img{transform:scale(1.025)}
html[data-motion="full"] #stone-market .history-toggle-label svg{transition:transform 180ms ease-out}
html[data-motion="full"] :is(.face-button,.face-text-button,.face-sort button,.face-tag-filters button){transition:background-color 160ms ease-out,border-color 160ms ease-out,box-shadow 180ms ease-out,transform 180ms cubic-bezier(.16,1,.3,1)}

/* A gentle mode keeps acknowledgement visible without spatial movement. The
   explicit selectors also override older pages' blanket reduced-motion reset. */
html[data-motion="reduce"] :is(button,a,summary,select,input,textarea,.product-card,.face-card,.listing-row){transition:color 160ms ease-out,background-color 160ms ease-out,border-color 160ms ease-out,opacity 160ms ease-out,box-shadow 160ms ease-out!important}
html[data-motion="reduce"] :is(.btn,.button,.adm-button,.primary-button,.secondary-button,.face-button,.face-text-button,.zj-feedback-action):is(:hover,:focus-visible,:active){transform:none!important}
html[data-motion="reduce"] [data-entry-icon-ready]::before{transition:opacity 160ms ease-out,background-color 160ms ease-out!important;animation:none!important;transform:none!important}
html[data-motion="reduce"] [data-entry-icon-ready]:not(:disabled):not([aria-busy="true"]):not([aria-disabled="true"]):is(:hover,:focus-visible)::before{opacity:.7}
html[data-motion="reduce"] :is(.face-card-cover img,.product-image>img){transform:none!important;transition:opacity 160ms ease-out!important}
html[data-motion="reduce"] .modal-backdrop:not([hidden]) .modal-panel,
html[data-motion="reduce"] dialog[open]:not(#detailDialog):not(#contactDialog):not(#guideDialog){animation:zj-panel-fade 160ms ease-out!important}
html[data-motion="reduce"] :is(.service-avatar.is-started::after,.service-nudge .check-label){animation:none!important}
html[data-motion="reduce"] .toast{transform:translate(-50%,0)!important;transition:opacity 160ms ease-out!important}
@media(max-width:700px){#zj-motion-settings select{font-size:16px}}