:root{--interaction-blue:#405e73;--interaction-pressed:#304a5d;--button-ease:cubic-bezier(.22,1,.36,1)}
/* One transition owner, shared by hover, touch approach and keyboard focus. */
:root body :is(button,.action-button,dialog nav a,.photo-entry-caption,.entry-action,.instagram-follow>a,.product-picture){
 -webkit-tap-highlight-color:transparent;
 transition:translate .85s var(--button-ease),scale .85s var(--button-ease),box-shadow .85s ease,background-color .85s ease,color .85s ease,border-color .85s ease,font-weight .4s ease;
}
:root body .cta-float{background:#fff;color:#222;border:1px solid #797b74}
:root body .motion-target:not(.product-picture){font-weight:400}
:root body :is(.circle-arrow,.photo-open,dialog nav a small,.instagram-follow>a small){transition:translate .85s var(--button-ease),background-color .85s ease,color .85s ease,border-color .85s ease}
/* Pointer classes are added only for a real mouse, avoiding sticky touch hover. */
:root body .motion-target:is(.pointer-near,.is-near,.is-lifted,:focus-visible){translate:0 -5px;scale:1.05;font-weight:600;box-shadow:0 12px 26px #263e5224}
:root body .cta-float:is(.pointer-near,.is-near,:focus-visible){background:var(--interaction-blue);color:#fff;border-color:var(--interaction-blue)}
:root body .cta-float:is(.pointer-near,.is-near,:focus-visible) :is(small,.circle-arrow){color:inherit}
:root body .cta-float:is(.pointer-near,.is-near,:focus-visible) .circle-arrow{background:#fff;color:var(--interaction-blue);border-color:#fff;translate:3px 0}
@media(hover:hover) and (pointer:fine){
 :root body :is(button,.action-button,dialog nav a,.instagram-follow>a):hover,
 :root body .photo-entry:hover .photo-entry-caption,
 :root body .brew-entry:hover .entry-action{translate:0 -5px;scale:1.05;font-weight:600;box-shadow:0 12px 26px #263e5224}
 :root body .cta-float:hover{background:var(--interaction-blue);color:#fff;border-color:var(--interaction-blue)}
 :root body .cta-float:hover small{color:inherit}
}
:root body :is(button,.action-button,dialog nav a,.instagram-follow>a):focus-visible{outline:2px solid var(--interaction-blue);outline-offset:4px}
/* A press is prompt; releasing resumes the full, gentle return transition. */
:root body .motion-target:is(:active,.is-pressed),
:root body .photo-entry:active .photo-entry-caption,
:root body .brew-entry:active .entry-action{
 translate:0 2px!important;scale:.98!important;box-shadow:none!important;
 transition-duration:.1s,.1s,.1s,.85s,.85s,.85s;
}
/* Consultation colors and selected quiz states are preserved. */
:root body a.action-button[href*="/inquiry/"]{background:#fff;color:#222;border-color:#797b74}
:root body button:disabled{translate:none!important;scale:1!important;box-shadow:none!important}
/* Suppress scroll-driven motion when requested; retain deliberate pointer feedback. */
@media(prefers-reduced-motion:reduce){
 :root body .motion-target:is(.is-near,.is-lifted):not(.pointer-near):not(:focus-visible){translate:none;scale:1;box-shadow:none}
 :root body :is(.circle-arrow,.photo-open){translate:none!important}
}

/* Product artwork stays at its original framing in every interaction state. */
:root body .product-picture,
:root body .product-picture:is(:hover,:focus-visible,:active,.pointer-near,.is-near,.is-lifted,.is-pressed),
:root body .product-picture img,
:root body .product-detail-grid > img {
 transform:none!important;
 translate:none!important;
 scale:1!important;
 box-shadow:none!important;
}
:root body .product-picture img,
:root body .product-detail-grid > img {object-fit:contain;}