/* Motion + interaction polish. Direction: calm, editorial, unhurried —
   long ease-out curves, short distances, nothing bouncing. */
:root{
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --hdr-h:84px;
  --slide-ms:6000ms;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.no-scroll,html.no-scroll body{overflow:hidden}
x-dc{display:none}
section[id],footer[id]{scroll-margin-top:calc(var(--hdr-h) + 8px)}
#lista{scroll-margin-top:calc(var(--hdr-h) + 84px)}
:focus-visible{outline:2px solid #9A5F40;outline-offset:3px}
.result-label{font-size:13px;color:#6B5D54}

/* ── Header ───────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:30;background:rgba(247,242,238,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #E7DDD3;transition:box-shadow .5s var(--ease)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px;transition:min-height .5s var(--ease)}
.logo{transition:height .5s var(--ease)}
.hdr[data-scrolled]{box-shadow:0 16px 30px -26px rgba(58,42,34,.6)}
.hdr[data-scrolled] .hdr-in{min-height:66px}
.hdr[data-scrolled] .logo{height:46px}
.nav a{position:relative;border-bottom:none;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:#9A5F40;transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
.menu-btn{display:none}
.burger{position:relative;display:block;width:20px;height:12px}
.burger i{position:absolute;left:0;width:100%;height:1.6px;border-radius:2px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.burger i:first-child{top:0}
.burger i:last-child{top:10px}
.menu-btn.on .burger i:first-child{top:5px;transform:rotate(45deg)}
.menu-btn.on .burger i:last-child{top:5px;transform:rotate(-45deg)}
.mnav{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;padding:8px 18px 20px;background:#F7F2EE;border-bottom:1px solid #E7DDD3;box-shadow:0 30px 40px -30px rgba(58,42,34,.55);animation:menu-in .4s var(--ease) both}
.mnav a{display:flex;align-items:center;min-height:52px;color:#2B211C;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid #EAE0D6;animation:rv-rise .5s var(--ease) backwards}
.mnav a:nth-child(2){animation-delay:40ms}.mnav a:nth-child(3){animation-delay:80ms}.mnav a:nth-child(4){animation-delay:120ms}.mnav a:nth-child(5){animation-delay:160ms}.mnav a:nth-child(6){animation-delay:200ms}
.mnav a.mnav-wa{justify-content:center;margin-top:16px;min-height:50px;border:none;border-radius:999px;background:#3A2A22;color:#F7F2EE}
@keyframes menu-in{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 -40px 0)}}

/* ── Controls: press + hover feedback ─────────────── */
.btn,.addbtn,.pill,.arrow,.float,.iconbtn{transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .4s var(--ease),transform .25s var(--ease)}
.btn:active,.addbtn:active,.pill:active,.arrow:active,.iconbtn:active{transform:scale(.96)}
.btn-dark:hover{box-shadow:0 14px 26px -16px rgba(58,42,34,.7)}
.arrow svg{transition:transform .4s var(--ease)}
.arrow:first-child:hover svg{transform:translateX(-3px)}
.arrow:last-child:hover svg{transform:translateX(3px)}
.search{transition:border-color .3s,box-shadow .4s var(--ease)}
.search:focus-within{border-color:#3A2A22;box-shadow:0 0 0 4px rgba(154,95,64,.14)}
.field input,.field textarea{transition:border-color .3s,box-shadow .4s var(--ease)}
.field input:focus,.field textarea:focus{box-shadow:0 0 0 4px rgba(154,95,64,.14)}
.labs img{transition:opacity .5s var(--ease),filter .5s var(--ease)}
.step{animation:pop-in .4s var(--ease)}
@keyframes pop-in{from{opacity:0;scale:.9}}
.badge.bump0{animation:bump-a .5s var(--ease)}
.badge.bump1{animation:bump-b .5s var(--ease)}
.float.bump0{animation:bump-a .6s var(--ease)}
.float.bump1{animation:bump-b .6s var(--ease)}
/* two identical keyframes: alternating the name restarts the animation on every cart change */
@keyframes bump-a{0%{scale:1}35%{scale:1.14}100%{scale:1}}
@keyframes bump-b{0%{scale:1}35%{scale:1.14}100%{scale:1}}
.float.bump0,.float.bump1{animation-name:float-a}
.float.bump1{animation-name:float-b}
@keyframes float-a{0%{scale:.94;opacity:.6}45%{scale:1.03;opacity:1}100%{scale:1}}
@keyframes float-b{0%{scale:.94;opacity:.6}45%{scale:1.03;opacity:1}100%{scale:1}}

/* ── Hero carousel ────────────────────────────────── */
.slide,.slide.on{transition-timing-function:var(--ease-io)}
.slide-bg{transform:scale(1.08);transition:transform 8s cubic-bezier(.2,.6,.3,1)}
/* text enters line by line instead of as one block */
.stxt{opacity:1;transform:none;transition:none}
.stxt>*{opacity:0;translate:0 22px;transition:opacity .5s ease,translate .5s ease}
.slide.on .stxt>*{opacity:1;translate:none;transition:opacity .9s var(--ease),translate 1.1s var(--ease)}
.slide.on .stxt>:nth-child(1){transition-delay:.2s}
.slide.on .stxt>:nth-child(2){transition-delay:.29s}
.slide.on .stxt>:nth-child(3){transition-delay:.38s}
.slide.on .stxt>:nth-child(4){transition-delay:.47s}
.slide.on .stxt>:nth-child(5){transition-delay:.56s}
.arch,.pedestal{opacity:0;transition:opacity .6s ease,scale .6s ease}
.arch{scale:.94;transform-origin:50% 100%}
.slide.on .arch,.slide.on .pedestal{opacity:1;scale:1;transition:opacity 1s var(--ease) .1s,scale 1.3s var(--ease) .1s}
.art-pdrn,.bx,.v{transition-timing-function:var(--ease);transition-duration:1.1s}
/* products drift a few pixels once they have landed */
.slide.on .bx,.slide.on .v{animation:drift 7s ease-in-out 1.6s infinite}
.slide.on .bx2,.slide.on .v2{animation-delay:2.3s}
.slide.on .bx3,.slide.on .v3{animation-delay:3s}
.slide.on .bx4,.slide.on .v4{animation-delay:3.7s}
@keyframes drift{0%,100%{translate:0 0}50%{translate:0 -6px}}
/* active dot fills up over the time the slide stays on screen */
.dot{position:relative}
.dot::before{transition:width .5s var(--ease),background .4s}
.dot:hover::before{background:rgba(58,42,34,.55)}
.dot.on::before{background:rgba(58,42,34,.22)}
.dot.on::after{content:"";position:absolute;left:6px;top:50%;width:32px;height:8px;margin-top:-4px;border-radius:999px;background:#3A2A22;transform-origin:0 50%;animation:dot-fill var(--slide-ms) linear both}
.hero2.paused .dot.on::after{animation:none}
@keyframes dot-fill{from{clip-path:inset(0 100% 0 0 round 999px)}to{clip-path:inset(0 0 0 0 round 999px)}}

/* ── Scroll reveal (js/enhance.js sets data-rv) ───── */
[data-rv="wait"]{opacity:0}
[data-rv="in"]{animation:rv-rise 1s var(--ease) backwards;animation-delay:var(--rv-d,0ms)}
@keyframes rv-rise{from{opacity:0;translate:0 26px}}

/* ── Cards ────────────────────────────────────────── */
.card{transition:box-shadow .5s var(--ease),transform .5s var(--ease),border-color .4s}
.card-img{overflow:hidden}
.card-img img,.cat-ring img,.feat-img img{transition:transform .8s var(--ease)}
.cat-ring{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.feat{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.edit figure{overflow:hidden}
.edit img{transition:transform 1.2s var(--ease)}
@media (hover:hover){
  .card:hover{transform:translateY(-4px);border-color:#DCCDBF}
  .card:hover .card-img img{transform:scale(1.06)}
  .cat:hover .cat-ring{border-color:#9A5F40}
  .cat:hover .cat-ring img{transform:scale(1.08)}
  .feat:not(.mid):hover{transform:translateY(-6px)}
  .feat:hover .feat-img img{transform:scale(1.05)}
}
.pos-elleva{object-position:74% 62%}
/* stand-in for products whose photo has not been added yet */
.ph{width:44%;max-height:74%;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;border-radius:999px 999px 10px 10px;border:1px solid rgba(154,95,64,.32);background:rgba(255,255,255,.42);color:#9A5F40}
.ph .serif{font-size:46px;font-weight:500;line-height:1}
.ph-sm{width:62%;max-height:82%;border-radius:999px 999px 6px 6px}
.ph-sm .serif{font-size:24px}

/* ── Cart drawer, toast ───────────────────────────── */
.overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade-in .35s ease both}
.overlay-x{flex:1;border:none;background:transparent;cursor:pointer}
.drawer{animation:drawer-in .55s var(--ease) both}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid #E7DDD3}
.drawer-foot{padding:18px 24px 24px;border-top:1px solid #E7DDD3;background:#F7F2EE}
.drawer-body{overscroll-behavior:contain}
.overlay.closing{animation:fade-out .28s ease forwards}
.overlay.closing .drawer{animation:drawer-out .28s var(--ease-io) forwards}
@keyframes fade-in{from{opacity:0}}
@keyframes fade-out{to{opacity:0}}
@keyframes drawer-in{from{translate:100% 0}}
@keyframes drawer-out{to{translate:100% 0}}
.toast{animation:toast-in .45s var(--ease) both;box-shadow:0 18px 34px -18px rgba(0,0,0,.6)}
@keyframes toast-in{from{opacity:0;translate:0 14px}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  [data-rv="wait"]{opacity:1}
  .dot.on::after{animation:none}
}