html { scroll-behavior: smooth; }
body {
  font-family: 'Satoshi', system-ui, sans-serif;
  background: #F7F2EA;
  color: #2A2520;
  -webkit-font-smoothing: antialiased;
}
.font-display { font-family: 'Cabinet Grotesk', system-ui, sans-serif; }

/* Grain overlay — fixed, pointer-events-none, no scroll repaint */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 60;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  pointer-events: none; opacity: .55; mix-blend-mode: multiply;
}

/* Marquee */
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.marquee-track { display: flex; width: max-content; animation: marquee 42s linear infinite; will-change: transform; }

/* Spring ease default */
.ease-spring { transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }

/* Reveal */
.reveal { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .9s cubic-bezier(0.16,1,0.3,1), transform .9s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: translate3d(0,0,0); }

/* Pulse dot */
@keyframes pulseDot { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.6); opacity: 0; } }
.pulse-ring { position: absolute; inset: 0; border-radius: 9999px; background: currentColor; animation: pulseDot 2.4s cubic-bezier(0.16,1,0.3,1) infinite; }

/* Tilt cards */
.tilt { transition: transform .55s cubic-bezier(0.16,1,0.3,1); will-change: transform; transform-style: preserve-3d; }

/* Masonry via CSS columns */
.masonry { column-count: 1; column-gap: 1.25rem; }
@media (min-width: 640px)  { .masonry { column-count: 2; } }
@media (min-width: 960px)  { .masonry { column-count: 3; } }
@media (min-width: 1280px) { .masonry { column-count: 4; } }
.masonry > * { break-inside: avoid; margin-bottom: 1.25rem; display: block; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Float */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.float-slow { animation: float 7s cubic-bezier(0.16,1,0.3,1) infinite; }

/* Liquid glass info chip refraction */
.glass {
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  background: rgba(251, 248, 242, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 10px 30px -10px rgba(60,40,25,0.18);
}

/* Active nav link */
.nav-link[data-active="true"] { color: #2A2520; }
.nav-link[data-active="true"]::after {
  content: ''; display: block; height: 2px; background: #B85C38;
  margin-top: 4px; border-radius: 2px;
}

/* Accordion */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .accordion-icon { transform: rotate(45deg); }
.accordion-icon { transition: transform .35s cubic-bezier(0.16,1,0.3,1); }

/* Number stepper */
.qty-btn { transition: background-color .25s cubic-bezier(0.16,1,0.3,1); }
.qty-btn:hover { background-color: #EFE7D7; }

/* Card action buttons (magnifier + quick add) — stacked top-right of each product card */
.quick-view-btn,
.quick-add-btn {
  position: absolute; right: 0.75rem; z-index: 10;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 9999px;
  backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%);
  background: rgba(251, 248, 242, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 6px 18px -6px rgba(60,40,25,0.25);
  color: #2A2520;
  transition: transform .35s cubic-bezier(0.16,1,0.3,1), background-color .25s cubic-bezier(0.16,1,0.3,1), color .25s;
  opacity: 0;
}
.quick-view-btn { top: 0.75rem; }
.quick-add-btn  { top: 3.5rem; }                           /* directly below the magnifier */

.group:hover .quick-view-btn,
.group:hover .quick-add-btn,
.quick-view-btn:focus-visible,
.quick-add-btn:focus-visible { opacity: 1; }
.quick-view-btn:hover, .quick-add-btn:hover { transform: scale(1.08); background: rgba(251, 248, 242, 0.92); }
.quick-add-btn:hover { color: #B85C38; }                   /* terracotta hint on the cart action */
.quick-view-btn:active, .quick-add-btn:active { transform: scale(0.95); }
.quick-add-btn[data-state="success"] { background: #2A2520; color: #FBF8F2; }
.quick-add-btn[data-state="error"]   { background: #B85C38; color: #FBF8F2; }
.quick-add-btn[disabled]             { opacity: 0.6; cursor: not-allowed; }
@media (max-width: 768px) {
  .quick-view-btn, .quick-add-btn { opacity: 1; }
}

/* Quick-view modal */
#qv-overlay { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 1rem; }
#qv-overlay.open { display: flex; }
.qv-backdrop {
  position: absolute; inset: 0; background: rgba(42, 37, 32, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .35s cubic-bezier(0.16,1,0.3,1);
}
#qv-overlay.in .qv-backdrop { opacity: 1; }
.qv-card {
  position: relative; width: 100%; max-width: 56rem; max-height: 90vh; overflow: hidden;
  background: #FBF8F2; border-radius: 2rem;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 40px 80px -25px rgba(60,40,25,0.35);
  transform: scale(0.96); opacity: 0;
  transition: transform .45s cubic-bezier(0.16,1,0.3,1), opacity .35s cubic-bezier(0.16,1,0.3,1);
}
#qv-overlay.in .qv-card { transform: scale(1); opacity: 1; }
.qv-close {
  position: absolute; right: 1rem; top: 1rem; z-index: 10;
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(251, 248, 242, 0.92); border: 1px solid rgba(60, 40, 25, 0.1);
  color: #2A2520; font-size: 1.25rem; line-height: 1;
  transition: background-color .25s cubic-bezier(0.16,1,0.3,1), transform .25s cubic-bezier(0.16,1,0.3,1);
}
.qv-close:hover { background: #EFE7D7; transform: rotate(90deg); }
body.qv-open { overflow: hidden; }