:root {
  --ivory: #FAF9F6;
  --beige: #E9E0D6;
  --pink: #D8B4A6;
  --terracotta: #A67C6A;
  --gold: #C5A059;
  --rose: #BE3144;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--ivory);
  color: #44403c;
  font-weight: 300;
}
.bg-ivory { background-color: var(--ivory); }
.font-serif { font-family: 'Cormorant Garamond', serif; font-weight: 400; }

#site-header.scrolled {
  background: rgba(250, 249, 246, 0.92);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 30px rgba(0,0,0,0.04);
}

.nav-link { position: relative; transition: color 0.3s; }
.nav-link::after {
  content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px;
  background: var(--rose); transition: width 0.4s ease;
}
.nav-link:hover::after { width: 100%; }
.nav-link:hover { color: var(--rose); }

.btn-primary {
  display: inline-flex; align-items: center; padding: 16px 36px;
  background: #292524; color: #FAF9F6;
  font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
  border-radius: 2px; transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
  position: relative; overflow: hidden;
}
.btn-primary:hover { background: var(--rose); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(190,49,68,0.25); }

.btn-ghost {
  display: inline-flex; align-items: center; padding: 16px 36px;
  border: 1px solid var(--terracotta); color: var(--terracotta);
  font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
  border-radius: 2px; transition: all 0.4s;
}
.btn-ghost:hover { background: var(--terracotta); color: var(--ivory); }

.btn-link {
  display: inline-flex; align-items: center;
  font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
  color: #44403c; padding-bottom: 4px; border-bottom: 1px solid #44403c;
  transition: all 0.3s;
}
.btn-link:hover { color: var(--rose); border-color: var(--rose); }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

.hover-zoom { transition: transform 1.2s cubic-bezier(0.25,0.46,0.45,0.94); }
.hover-zoom:hover { transform: scale(1.05); }

.collection-card { position: relative; overflow: hidden; cursor: pointer; }
.collection-card .img-wrap { overflow: hidden; aspect-ratio: 3/4; }
.collection-card img { transition: transform 1.4s cubic-bezier(0.25,0.46,0.45,0.94); width: 100%; height: 100%; object-fit: cover; }
.collection-card:hover img { transform: scale(1.08); }
.collection-card .label-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 24px; }
.collection-card .arrow { transition: transform 0.5s; }
.collection-card:hover .arrow { transform: translateX(8px); color: var(--rose); }

.product-card { cursor: pointer; }
.product-card .img-wrap { aspect-ratio: 4/5; overflow: hidden; background: var(--beige); position: relative; }
.product-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s, opacity 0.6s; }
.product-card:hover img { transform: scale(1.05); }
.quick-add {
  position: absolute; bottom: 16px; left: 16px; right: 16px;
  background: rgba(250,249,246,0.95); backdrop-filter: blur(10px);
  padding: 12px; text-align: center; font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; opacity: 0; transform: translateY(10px);
  transition: all 0.4s; border-radius: 2px;
}
.product-card:hover .quick-add { opacity: 1; transform: translateY(0); }
.quick-add:hover { background: var(--rose); color: white; }

.testimonial { padding: 0 12px; }
.testimonial p { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; line-height: 1.5; font-style: italic; color: #57534e; }

@keyframes pulseSlow { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
.animate-pulse-slow { animation: pulseSlow 3s ease-in-out infinite; }

#cart-drawer.open { transform: translateX(0); }
#cart-overlay.open { opacity: 1; pointer-events: auto; }

.hero-img { transform: scale(1.05); transition: transform 8s ease-out; }
.hero-img.loaded { transform: scale(1); }

@media (max-width: 768px) {
  .hero h1 { font-size: 3rem; }
}