/* A shared motion rhythm: quick touch feedback, soft settling, staggered reveals. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-spring:cubic-bezier(.34,1.45,.64,1)}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .65s var(--ease-out),transform .75s var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
.reveal.is-revealed,.reveal:focus-within{opacity:1;transform:none}
.hero-media.reveal{transform:translateY(14px) scale(.985)}
.hero-media.is-revealed{transform:none}
.btn,.quick-add,.chip,.icon-button,.quantity button,.bag-trigger{transition:transform .3s var(--ease-spring),background-color .25s,color .25s,border-color .25s,opacity .2s}
.quick-add{display:grid;place-items:center;isolation:isolate}
.quick-add:hover{opacity:1}
.quick-add.is-added{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.add-icon{display:block;position:relative;width:22px;height:22px;flex:0 0 22px}
.add-icon i{position:absolute;display:block;left:3px;top:10px;width:16px;height:1.5px;background:currentColor;border-radius:2px;transform-origin:center;transition:transform .5s var(--ease-spring),width .5s var(--ease-spring)}
.add-icon i+ i{transform:rotate(90deg)}
.is-added .add-icon i:first-child{width:9px;transform:translate(-1px,3px) rotate(45deg)}
.is-added .add-icon i+ i{width:16px;transform:translate(4px,0px) rotate(-45deg)}
.quick-add::after{content:'';position:absolute;inset:-5px;border:1px solid var(--ink);border-radius:inherit;opacity:0;transform:scale(.8);transition:transform .55s var(--ease-out),opacity .35s;pointer-events:none}
.quick-add.is-added::after{opacity:.17;transform:scale(1.08)}
.btn:active,.quick-add:active,.chip:active,.icon-button:active,.quantity button:active,.bag-trigger:active{transform:scale(.96)}
.btn>span:not(.add-icon):not(.buy-label){transition:transform .3s var(--ease-out)}
.search{transition:border-color .25s,background-color .25s}
.search svg{transition:transform .35s var(--ease-spring)}
.search:focus-within{background:var(--surface)}
.search:focus-within svg{transform:rotate(-12deg) scale(1.08)}
.field input,.field textarea,.delivery-options label{transition:border-color .25s,background-color .25s}
.text-link{transition:color .2s,opacity .2s,transform .3s var(--ease-out)}
.product-media>.catalog-photo,.product-media>img,.editorial-card>img{transition:transform .75s var(--ease-out)}
.product-media:focus-visible>.catalog-photo{transform:scale(1.035)}
#bag-count{font-variant-numeric:tabular-nums}
.bag-trigger>svg{transform-origin:50% 15%}
@media(hover:hover){
  .product-media:hover>.catalog-photo,.product-media:hover>img,.editorial-card:hover>img{transform:scale(1.045)}
  .quick-add:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .btn:hover>span:not(.add-icon):not(.buy-label){transform:translateX(4px)}
  .chip:hover{transform:translateY(-2px)}
  .text-link:hover{transform:translateX(3px);text-decoration:none}
  .icon-button:hover{transform:rotate(90deg);opacity:1}
  .quantity button:not(:disabled):hover{background:var(--surface);opacity:1}
}
/* Keep dialogs in the native top layer until their exit finishes. */
dialog{opacity:0;transform:translateY(16px) scale(.98);transition:transform .38s var(--ease-out),opacity .26s ease}
dialog.bag{transform:translateX(100%);opacity:1;transition:transform .48s var(--ease-out)}
dialog.is-open{opacity:1;transform:none}
dialog.is-closing{transition-duration:.25s}
dialog::backdrop{background:rgba(25,26,23,0);transition:background-color .3s}
dialog.is-open::backdrop{background:rgba(25,26,23,.38)}
dialog.is-closing::backdrop{background:rgba(25,26,23,0)}
/* Toast remains mounted so dismissal can fade instead of disappearing. */
#toast{display:flex;align-items:center;gap:12px;bottom:max(24px,env(safe-area-inset-bottom));border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:16px 20px;box-shadow:0 8px 32px #20211f24;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,12px) scale(.98);transition:opacity .22s,transform .3s var(--ease-out),visibility 0s .3s}
#toast.visible{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1);transition-delay:0s}
.toast-check{display:grid;place-items:center;border:1px solid #ffffff50;border-radius:50%;width:26px;height:26px;flex:0 0 26px;font-size:16px}
.bag #toast{transform:translateY(12px) scale(.98)}
.bag #toast.visible{transform:none}
.detail-copy summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
.detail-copy summary::-webkit-details-marker{display:none}
.detail-copy summary::after{content:'+';font-size:22px;transition:transform .35s var(--ease-spring)}
.detail-copy details[open]:not([data-animated])>summary::after,.detail-copy details.is-expanded>summary::after{transform:rotate(45deg)}
@supports (interpolate-size:allow-keywords){
  .detail-copy details:not([data-animated]){interpolate-size:allow-keywords}
  .detail-copy details:not([data-animated])::details-content{height:0;opacity:0;overflow:clip;transition:height .35s var(--ease-out),opacity .25s,content-visibility .35s;transition-behavior:allow-discrete}
  .detail-copy details[open]:not([data-animated])::details-content{height:auto;opacity:1}
}
@media(max-width:700px){#toast{font-size:13px;padding:14px 16px;max-width:calc(100% - 32px);gap:10px}.reveal{transform:translateY(14px)}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.hero-media.reveal{opacity:1;transform:none}
  .btn:active,.quick-add:active,.chip:active,.chip:hover,.icon-button:hover,.quantity button:active,.bag-trigger:active,.text-link:hover,.search:focus-within svg{transform:none}
  .product-media:hover>.catalog-photo,.product-media:hover>img,.product-media:focus-visible>.catalog-photo,.editorial-card:hover>img,.btn:hover>span:not(.add-icon):not(.buy-label){transform:none}
}

/* Editorial motion across every screen. */
.header{transition:box-shadow .35s,background-color .35s,opacity .3s ease,transform .42s var(--ease-out)}
body:has(#bag.is-open) .header{opacity:0;transform:translateY(-12px);pointer-events:none}
@media(prefers-reduced-motion:reduce){body:has(#bag.is-open) .header{transform:none}}
.header.has-scrolled{box-shadow:0 8px 26px #20211f0a;background:#fdfdfcf5}
.header::after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:var(--ink);transform:scaleX(var(--page-progress,0));transform-origin:left;pointer-events:none}
.word-mask{display:inline-block;overflow:clip;vertical-align:bottom;padding:.08em .03em;margin:-.08em -.03em}
.heading-word{display:inline-block;transform:translateY(115%) rotate(3deg);transition:transform .95s var(--ease-out);transition-delay:calc(var(--reveal-delay,0ms) + var(--word-delay,0ms))}
.is-revealed .heading-word,.reveal:focus-within .heading-word{transform:none}
/* Headings outside a reveal group remain visible (orders / empty states). */
[data-split]:not(.reveal):not(.reveal *) .heading-word{transform:none}
.reveal{transform:translateY(34px);transition-duration:.8s,.95s}
.reveal.is-revealed,.reveal:focus-within{transform:none}
.hero-media.reveal{clip-path:inset(5% 6% 5% 6%);transform:translateY(18px);transition:clip-path 1.3s var(--ease-out),transform 1.3s var(--ease-out),opacity .8s}
.hero-media.is-revealed{clip-path:inset(0);transform:none}
.hero-media img{transform:scale(1.12);transition:transform 1.6s var(--ease-out)}
.hero-media.is-revealed img{transform:scale(1.02)}
.hero-caption{clip-path:inset(0 100% 0 0);translate:0 8px;transition:clip-path .85s var(--ease-out) .35s,translate .85s var(--ease-out) .35s}
.is-revealed .hero-caption{clip-path:inset(0);translate:0 0}
.product.reveal{transition-duration:.7s,.95s}
.product-media,.detail-photo{overflow:hidden}
.product-media>.catalog-photo,.detail-photo>.catalog-photo,.hero-media img{translate:var(--image-x,0px) var(--image-y,0px);transition:transform 1s var(--ease-out),translate .65s var(--ease-out)}
.is-tracking>.catalog-photo,.is-tracking>img{transform:scale(1.055)}
.tag{transition:translate .5s var(--ease-out),background-color .3s}
.product-info{transition:translate .45s var(--ease-out)}
.step{position:relative;transition:background-color .3s,padding-left .4s var(--ease-out),opacity .65s,transform .85s var(--ease-out);transition-delay:0s,0s,var(--reveal-delay,0ms),var(--reveal-delay,0ms)}
.step::after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out)}
.about>img.reveal{clip-path:inset(8% 5%);transition:clip-path 1.2s var(--ease-out),opacity .8s,transform 1s var(--ease-out)}
.about>img.is-revealed{clip-path:inset(0)}
.footer-top>*{transition-duration:.8s,1s}
.footer-top a:not(.footer-brand){transition:translate .35s var(--ease-out)}
.btn,.chip,.quantity button{position:relative;overflow:hidden;isolation:isolate}
.chip{flex-shrink:0}
.press-wave{position:absolute;border-radius:50%;background:currentColor;pointer-events:none;z-index:2}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,#ffffff20 50%,transparent 75%);translate:-110% 0;transition:translate .65s var(--ease-out);pointer-events:none}
.btn.secondary::before{background:linear-gradient(115deg,transparent 25%,#20211f0c 50%,transparent 75%)}
.quantity > [data-quantity-value]{display:inline-block}
.bag-item [data-row-total],#bag-total{display:inline-block;font-variant-numeric:tabular-nums;white-space:nowrap}
.bag .quantity > [data-quantity-value]{min-width:3ch;text-align:center}
@keyframes surface-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(hover:hover){
 .product:hover .product-info{translate:0 -3px}
 .product:hover .tag{translate:3px 3px}
 .step:hover{padding-left:12px}
 .step:hover::after{transform:scaleX(1)}
 .btn:hover::before{translate:110% 0}
 .footer-top a:not(.footer-brand):hover{translate:4px 0}
 .detail-photo:hover>.catalog-photo{transform:scale(1.055)}
}
@media(max-width:700px){
 .reveal{transform:translateY(20px)}
 .reveal.is-revealed,.reveal:focus-within{transform:none}
 .heading-word{transition-duration:.7s}
}
@media(prefers-reduced-motion:reduce){
 .heading-word,.hero-media img,.is-tracking>.catalog-photo,.is-tracking>img,.detail-photo:hover>.catalog-photo{transform:none!important;translate:none!important}
 .hero-media.reveal,.about>img.reveal,.hero-caption{clip-path:none;translate:none}
 .product:hover .product-info,.product:hover .tag,.footer-top a:not(.footer-brand):hover{translate:none}
 .step:hover{padding-left:0}
 .reveal{opacity:1;transform:none}
 .btn::before,.press-wave{display:none}
}

/* Product pages: a photographic opening, then a measured cascade of information. */
.detail-photo.reveal{clip-path:inset(7% 7% 7% 7%);transform:translateY(24px) scale(.97);transition:clip-path 1.2s var(--ease-out),transform 1.2s var(--ease-out),opacity .8s var(--ease-out)}
.detail-photo.reveal.is-revealed{clip-path:inset(0);transform:none}
.detail-photo>img,.detail-photo>.catalog-photo{translate:var(--image-x,0px) var(--image-y,0px);scale:1;transition:transform 1s var(--ease-out),translate .65s var(--ease-out),scale 1.3s var(--ease-out)}
.detail-photo.reveal:not(.is-revealed)>img,.detail-photo.reveal:not(.is-revealed)>.catalog-photo{scale:1.12}
.detail-copy>.reveal{transform:translateY(18px);transition:opacity .65s var(--ease-out),transform .85s var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
.detail-copy>.reveal.is-revealed,.detail-copy>.reveal:focus-within{transform:none}
.detail-copy .detail-price{font-variant-numeric:tabular-nums}
.detail-copy .volume{transform-origin:left center}
.detail-copy .volume.reveal:not(.is-revealed){transform:translateY(10px) scale(.94)}
.detail-copy details{position:relative}
.detail-copy details.is-resizing{overflow:hidden}
.detail-copy details::after{content:'';position:absolute;bottom:0;left:0;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.detail-copy details.is-expanded::after{transform:scaleX(1)}
.detail-copy summary{min-height:44px;transition:color .25s,padding-left .35s var(--ease-out)}
.detail-content{opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .4s var(--ease-out)}
.is-expanded>.detail-content{opacity:1;transform:none}
.detail-copy .quantity{transition:border-color .25s,background-color .25s}
.detail-copy .quantity:focus-within{background:var(--surface);border-color:var(--ink)}
.detail-copy .btn .buy-label{transition:translate .35s var(--ease-out)}
.detail-copy .btn.is-added .buy-label{translate:4px 0}
.detail-copy .btn.is-added{background:#41443d;border-color:#41443d}
@media(hover:hover){
 .detail-photo:hover>img{transform:scale(1.055)}
 .detail-copy summary:hover{padding-left:6px;color:var(--muted)}
}
@media(prefers-reduced-motion:reduce){
 .detail-photo.reveal{clip-path:none;transform:none}
 .detail-photo>img,.detail-photo>.catalog-photo,.detail-photo:hover>img{scale:1!important;translate:none!important;transform:none!important}
 .detail-copy>.reveal,.detail-copy .volume.reveal:not(.is-revealed),.detail-content{transform:none}
 .detail-copy summary:hover{padding-left:0}
 .detail-copy .btn.is-added .buy-label{translate:none}
}