.header{transition:height .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,background .45s}
.header.is-scrolled{box-shadow:0 4px 24px #22251f0a;background:#f7f6f1f5}
.hero-word{will-change:translate}
.hero-caption a{position:relative}
.hero-caption a:after{content:'';position:absolute;bottom:-5px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(.15);transform-origin:left;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.hero-caption a:hover:after{transform:scaleX(1)}
.header nav a{position:relative;padding:10px 0}
.header nav a:after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s}
.header nav a:hover:after{transform:scaleX(1);transform-origin:left}
.primary-button,.outline-button,.card-detail,.close{transition:background .25s,color .25s,transform .3s}
.primary-button:not(:disabled):hover{background:var(--red)}
.primary-button:not(:disabled):active,.add:active{transform:scale(.97)}
.close:hover{transform:rotate(90deg)}
.filters button:hover{border-color:var(--ink)}
.card-detail:hover{transform:translateX(5px)}
.product-image img{transition:transform .8s cubic-bezier(.22,1,.36,1)}
.product-image .tag{transition:background .3s,color .3s}
.product-image:hover .tag{background:var(--ink);color:var(--paper)}
summary span{transition:transform .3s}
details[open] p{animation:answer-in .35s ease both}
@keyframes answer-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(hover:none){.hero-cta:hover,.close:hover,.card-detail:hover,.product-image:hover img{transform:none}}
@media(prefers-reduced-motion:reduce){.hero-word{translate:none!important;opacity:1!important;will-change:auto}*,*:before,*:after{animation:none!important;transition:none!important}}