body { font-family:'Geist',sans-serif; }
.material-symbols-outlined { font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 20; user-select:none; }
.custom-scrollbar::-webkit-scrollbar { width:4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background:#e0e2ed; border-radius:4px; }
.no-scrollbar { scrollbar-width:none; } .no-scrollbar::-webkit-scrollbar { display:none; }

/* Filters + nav states */
.filter-btn[aria-pressed="true"] { background:#000; color:#fff; }
.nav-link.is-active { color:#000; border-bottom-color:#000; font-weight:500; }

/* Cards lift slightly; buttons respond to press */
.lift { transition:transform .25s cubic-bezier(.16,1,.3,1), border-color .2s, box-shadow .25s; }
.lift:hover { transform:translateY(-3px); box-shadow:0 14px 30px -20px rgba(24,28,36,.35); }
.btn { transition:transform .15s ease, background-color .2s, border-color .2s, color .2s, opacity .2s; }
.btn:hover:not(:disabled) { transform:translateY(-1px); }
.btn:active:not(:disabled) { transform:scale(.98); }

/* Drawer */
#drawer { visibility:hidden; opacity:0; transition:opacity .3s ease, visibility 0s linear .35s; }
#drawer.open { visibility:visible; opacity:1; transition-delay:0s; }
#drawer-panel { transform:translateX(100%); transition:transform .35s cubic-bezier(.16,1,.3,1); }
#drawer.open #drawer-panel { transform:none; }

/* One quiet fade on load, one on scroll */
@keyframes hero-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.hero-in { animation:hero-in .7s cubic-bezier(.16,1,.3,1) both; }
.js .reveal { opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.js .reveal.in { opacity:1; transform:none; }

:focus-visible { outline:2px solid #0049df; outline-offset:2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline:none; }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .js .reveal { opacity:1; transform:none; }
}


/* Hero illustration: subtle inner vignette so the product photo
   sits inside the frame instead of floating on it. */
.hero-frame::after {
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(120% 80% at 50% 60%, transparent 55%, rgba(24,28,36,.05) 100%);
  pointer-events:none;
}