@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;1,6..96,400&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --lavender:#B7A2D4;
  --lavender-deep:#9A82BE;
  --silver:#AEB4BC;
  --tan:#C8B08A;
  --black:#111214;
  --offwhite:#F3F0EB;
  --serif:'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --sans:'Manrope', 'Helvetica Neue', Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--offwhite);
  font-family:var(--sans);
  color:var(--black);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--lavender-deep); text-decoration:none; }
a:hover{ color:var(--lavender); }
img{ max-width:100%; display:block; }
button{ font-family:var(--sans); border:none; cursor:pointer; }
input{ font-family:var(--sans); }

.wrap{ max-width:1280px; margin:0 auto; padding-left:56px; padding-right:56px; }

.eyebrow{
  font-size:11px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase;
}

.btn{
  font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; padding:17px 34px; display:inline-flex; align-items:center;
  justify-content:center; border:1px solid transparent; cursor:pointer; white-space:nowrap;
}
.btn-primary{ background:var(--lavender); color:var(--black); }
.btn-primary:hover{ background:var(--lavender-deep); color:var(--black); }
.btn-dark{ background:var(--black); color:var(--offwhite); }
.btn-dark:hover{ background:#000; color:var(--offwhite); }
.btn-outline{ background:transparent; color:var(--offwhite); border:1px solid rgba(243,240,235,0.55); }
.btn-outline:hover{ background:rgba(243,240,235,0.1); color:var(--offwhite); }

/* ---------- NAV ---------- */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:88px; background:var(--black); padding:0 56px; position:relative; z-index:40;
}
.nav-logo img{ height:38px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:38px; }
.nav-links a{
  font-size:12px; font-weight:700; letter-spacing:0.14em; color:var(--offwhite);
}
.nav-links a.active{ color:var(--lavender); border-bottom:1px solid var(--lavender); padding-bottom:4px; }
.nav-links a:hover{ color:var(--lavender); }
.nav-icons{ display:flex; align-items:center; gap:22px; }
.nav-icons svg{ display:block; }
.cart-badge{ position:relative; }
.cart-badge span{
  position:absolute; top:-9px; right:-10px; background:var(--lavender); color:var(--black);
  font-size:9px; font-weight:800; width:15px; height:15px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.nav-burger{ display:none; background:none; padding:6px; }
.nav-burger svg{ display:block; }
.mobile-menu{
  display:none; flex-direction:column; background:var(--black); padding:8px 24px 24px;
  position:absolute; top:88px; left:0; right:0; z-index:39; gap:0;
  border-top:1px solid rgba(243,240,235,0.12);
}
.mobile-menu a{
  font-size:13px; font-weight:700; letter-spacing:0.1em; color:var(--offwhite);
  padding:14px 0; border-bottom:1px solid rgba(243,240,235,0.08);
}
.mobile-menu.open{ display:flex; }

@media (max-width: 880px){
  .nav{ padding:0 20px; }
  .nav-links{ display:none; }
  .nav-burger{ display:block; }
  .wrap{ padding-left:20px; padding-right:20px; }
}

/* ---------- FOOTER ---------- */
.footer{ background:var(--black); padding:64px 0 0; }
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap:32px;
  padding-bottom:52px; border-bottom:1px solid rgba(243,240,235,0.14);
}
.footer-col{ display:flex; flex-direction:column; gap:14px; }
.footer-col h4{
  margin:0 0 2px; font-size:12px; font-weight:700; letter-spacing:0.14em; color:var(--lavender);
}
.footer-col a, .footer-col span{
  font-size:13px; color:rgba(243,240,235,0.72); text-decoration:none;
}
.footer-brand img{ width:44px; height:auto; }
.footer-brand .word{ font-family:var(--serif); font-size:20px; color:var(--offwhite); letter-spacing:0.04em; }
.footer-brand .word small{ display:block; font-size:12px; letter-spacing:0.3em; color:rgba(243,240,235,0.6); font-family:var(--sans); }
.footer-brand p{ font-size:12px; color:rgba(243,240,235,0.55); line-height:1.7; margin:0; }
.footer-social{ display:flex; gap:16px; margin-top:6px; }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; padding-top:22px; padding-bottom:22px; flex-wrap:wrap; gap:10px;
}
.footer-bottom span{ font-size:11px; color:rgba(243,240,235,0.5); }
.footer-legal{ display:flex; gap:24px; flex-wrap:wrap; }

@media (max-width: 880px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* ---------- MISC ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; }
@media (max-width: 880px){
  .grid-2{ grid-template-columns:1fr; }
}