:root{
  --bg: #FAF8F5;
  --surface: #FFFFFF;
  --text: #1A1A1A;
  --muted: #6F6F6F;
  --accent: #C6A27E;
  --accent-deep: #A07A53;
  --border: #E8E2DA;
  --radius: 12px;
  --shadow: 0 12px 40px rgba(0,0,0,0.06);
  --glass: rgba(255,255,255,0.6);
  --trans: 300ms cubic-bezier(.2,.9,.3,1);
  --max-width: 1200px;
}

/* Dark theme overrides */
body.dark{
  --bg: #0F0F10;
  --surface: #1E1E1E;
  --text: #F5F5F5;
  --muted: #BDBDBD;
  --accent: #D8B892;
  --accent-deep: #A07A53;
  --border: #2A2A2A;
  --glass: rgba(255,255,255,0.03);
  --shadow: 0 18px 60px rgba(0,0,0,0.6);
}

/* Reset + base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  transition:background var(--trans), color var(--trans);
}
.container{max-width:var(--max-width);margin:0 auto;padding:0 20px}

/* Navigation */
nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 0;
  position:sticky;
  top:0;
  z-index:40;
  background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.35));
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--border);
}
body.dark nav{
  background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.35));
}

.logo{
  font-family:"Playfair Display",serif;
  font-size:1.5rem;
  letter-spacing:2px;
  font-weight:600;
  color:var(--text);
}

.nav-links{display:flex;align-items:center;gap:18px}
.nav-links a{
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  padding:8px 10px;
  border-radius:8px;
  transition:background var(--trans), color var(--trans), transform var(--trans);
}
.nav-links a:hover{background:var(--glass); transform:translateY(-2px)}
.nav-actions{display:flex;gap:10px;align-items:center}

/* Buttons */
.btn{
  border:0;padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer;
  transition:transform var(--trans), box-shadow var(--trans);
}
.btn-primary{
  background:var(--accent);
  color:white;
  box-shadow:0 10px 30px rgba(198,162,126,0.12);
}
.btn-ghost{
  background:transparent;border:1px solid var(--border);color:var(--text);
}

/* Hero */
.hero{
  height:66vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 20px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.06)),
    url('assets/images/hero.jpg') center/cover no-repeat;
  color: #fff;
}
body.dark .hero{background:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.15)), url('assets/images/hero.jpg') center/cover no-repeat}
.hero .inner{max-width:900px}
.headline{
  font-family:"Playfair Display",serif;
  font-size:3.2rem;
  margin:0;
  letter-spacing:0.6px;
  text-shadow:0 10px 30px rgba(0,0,0,0.45);
}
.sub{
  margin-top:12px;color:rgba(255,255,255,0.92);font-size:1.05rem;
}
.hero .cta{margin-top:20px;display:flex;gap:12px;justify-content:center}

/* Sections */
section{padding:64px 0}
h2{font-family:"Playfair Display",serif;margin-bottom:8px}
h2::after{content:"";display:block;width:64px;height:4px;background:linear-gradient(90deg,var(--accent-deep),var(--accent));border-radius:3px;margin-top:12px}
.lead{color:var(--muted);max-width:760px;margin:12px 0 0;font-size:1.02rem}

/* Grid and cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;margin-top:20px}
.card{
  background:var(--surface);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform var(--trans), box-shadow var(--trans);
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-8px);box-shadow:0 22px 60px rgba(2,6,23,0.12)}
.card img{width:100%;height:320px;object-fit:cover;display:block}
.card-body{padding:16px;flex:1;display:flex;flex-direction:column}
.card h3{margin:0;font-size:1.05rem}
.card p{color:var(--muted);margin-top:8px;font-size:0.95rem;flex:1}
.price{margin-top:12px;color:var(--accent);font-weight:800}

/* Product detail */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.detail-img{width:100%;border-radius:12px;box-shadow:var(--shadow);object-fit:cover}
.detail-info h1{font-family:"Playfair Display",serif;font-size:2.4rem;margin-bottom:8px}
.buy-row{display:flex;gap:12px;align-items:center}

/* Forms — FIXED VERSION */
.input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-sizing: border-box;
}

.pill{padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text)}

/* Footer */
footer{padding:28px 0;border-top:1px solid var(--border);color:var(--muted);font-size:0.95rem;text-align:center}

/* Utilities */
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg, rgba(198,162,126,0.12), rgba(160,122,83,0.06));color:var(--accent-deep);font-weight:700;font-size:0.85rem}

/* Fade-in */
.fade-in{opacity:0;transform:translateY(18px);animation:fadeIn 700ms cubic-bezier(.2,.9,.3,1) forwards}
@keyframes fadeIn{to{opacity:1;transform:none}}

/* Responsive */
@media (max-width:900px){
  .headline{font-size:2rem}
  .hero{height:52vh}
  nav{padding:12px 10px}
  .card img{height:260px}
  .product-detail{grid-template-columns:1fr}
}

/* Mobile nav toggle button */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--text);
  transition: var(--trans);
}


/* MOBILE NAVIGATION — ANIMATED DROPDOWN */
@media (max-width: 820px) {

  /* Hide desktop actions */
  .nav-actions {
    display: none;
  }

  /* Show hamburger */
  .nav-toggle {
    display: block;
    background: transparent;
    border: 1px solid var(--border);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--text);
    transition: transform 0.3s ease;
  }

  .nav-toggle:active {
    transform: scale(0.9);
  }

  /* Dropdown container */
  .nav-links {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 0;
    text-align: center;
    box-shadow: var(--shadow);

    /* Closed state */
    max-height: 0;
    opacity: 0;
    transform: translateY(-12px);
    overflow: hidden;

    /* Smooth animation */
    transition:
      max-height 0.45s cubic-bezier(.2,.9,.3,1),
      opacity 0.35s ease,
      transform 0.35s ease;
    will-change: max-height, opacity, transform;
  }

  /* Open state */
  .nav-links.open {
    max-height: 420px;
    opacity: 1;
    transform: translateY(0);
    backdrop-filter: blur(6px);
    background: rgba(255,255,255,0.85);
  }

  /* Dark mode dropdown */
  body.dark .nav-links.open {
    background: rgba(0,0,0,0.75);
  }

  .nav-links a {
    padding: 10px 0;
    font-size: 1.15rem;
  }
}