:root{
  --cream:#F6F1E7;
  --cream-deep:#EFE7D6;
  --ink:#221D16;
  --gold:#A9843F;
  --gold-deep:#7C5E28;
  --line:#DDD1B4;
  --taupe:#726753;
  --white:#FFFDF8;
  --err:#9C3B2E;
  --whatsapp:#3E7A57;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Jost',sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:500;margin:0;}
.container{max-width:1180px;margin:0 auto;padding:0 28px;}

/* ---------- announcement bar ---------- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;letter-spacing:.03em;color:var(--taupe);
  padding:9px 28px;border-bottom:1px solid var(--line);
}
.topbar .socials{display:flex;gap:16px;}
.topbar a:hover{color:var(--gold-deep);}

/* ---------- header: logo left / tabs right ---------- */
header.site{border-bottom:1px solid var(--line);}
.header-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 28px;
}
.logo-mark{display:flex;align-items:center;gap:10px;}
.logo-mark svg{width:34px;height:34px;flex:none;}
.logo-text{font-family:'Cormorant Garamond',serif;line-height:1;}
.logo-text .l1{display:block;font-size:22px;letter-spacing:.14em;font-style:italic;color:var(--gold-deep);}
.logo-text .l2{display:block;font-family:'Jost',sans-serif;font-size:9.5px;letter-spacing:.28em;color:var(--taupe);margin-top:3px;}

nav.main{display:flex;align-items:center;gap:34px;}
nav.main a{
  font-size:14px;letter-spacing:.04em;color:var(--ink);
  padding:4px 2px;border-bottom:1px solid transparent;
}
nav.main a:hover,nav.main a.active{border-bottom:1px solid var(--gold);color:var(--gold-deep);}
.nav-toggle{display:none;background:none;border:1px solid var(--line);padding:8px 12px;font-size:13px;}

/* ---------- hero ---------- */
.hero{
  display:grid;grid-template-columns:1.1fr .9fr;gap:60px;
  padding:74px 0 68px;align-items:end;border-bottom:1px solid var(--line);
}
.hero h1{font-size:clamp(38px,5vw,64px);line-height:1.05;font-style:italic;font-weight:500;}
.hero .copy{max-width:380px;}
.hero .copy p{font-size:15.5px;line-height:1.75;color:var(--taupe);margin:0 0 22px;}
.btn{
  display:inline-block;border:1px solid var(--ink);padding:12px 26px;
  font-size:12.5px;letter-spacing:.06em;transition:all .25s ease;
}
.btn:hover{background:var(--ink);color:var(--white);}
.btn.gold{border-color:var(--gold-deep);color:var(--gold-deep);}
.btn.gold:hover{background:var(--gold-deep);color:var(--white);}
.btn.whatsapp{border-color:var(--whatsapp);color:var(--whatsapp);}
.btn.whatsapp:hover{background:var(--whatsapp);color:var(--white);}

/* ---------- section headings ---------- */
.section-head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:46px 0 20px;
}
.section-head h2{font-size:28px;font-style:italic;}
.section-head .note{font-size:12.5px;color:var(--taupe);}

/* ---------- product grid ---------- */
.grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.card{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:0 0 20px;}
.card .imgwrap{
  position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--cream-deep);
  cursor:pointer;
}
.card .imgwrap img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s ease;
}
.card .imgwrap img.on{opacity:1;}
.card .meta{padding:16px 20px 0;}
.card .meta .brand{font-size:11px;letter-spacing:.08em;color:var(--gold-deep);}
.card .meta h3{font-size:19px;margin-top:4px;font-weight:500;font-style:normal;}
.card .meta .price{font-size:13.5px;color:var(--taupe);margin-top:6px;}
.card .dots{display:flex;gap:5px;padding:10px 20px 0;}
.card .dots span{width:4px;height:4px;border-radius:50%;background:var(--line);}
.card .dots span.on{background:var(--gold);}
.empty-note{
  padding:60px 20px;text-align:center;color:var(--taupe);font-size:14px;
  grid-column:1/-1;
}

/* ---------- filters ---------- */
.filters{
  display:flex;gap:10px;flex-wrap:wrap;padding:0 0 28px;
}
.filters button{
  background:none;border:1px solid var(--line);padding:7px 16px;
  font-size:12px;letter-spacing:.03em;color:var(--taupe);
}
.filters button.on{border-color:var(--gold-deep);color:var(--gold-deep);}

/* ---------- product detail ---------- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:50px 0 80px;}
.pdp .gallery{position:relative;aspect-ratio:3/4;background:var(--cream-deep);overflow:hidden;}
.pdp .gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease;}
.pdp .gallery img.on{opacity:1;}
.pdp .gdots{display:flex;gap:6px;justify-content:center;padding-top:14px;}
.pdp .gdots span{width:6px;height:6px;border-radius:50%;background:var(--line);cursor:pointer;}
.pdp .gdots span.on{background:var(--gold-deep);}
.pdp .info .back{font-size:12px;color:var(--taupe);}
.pdp .info .brand{font-size:12px;letter-spacing:.08em;color:var(--gold-deep);margin-top:22px;}
.pdp .info h1{font-size:36px;margin-top:8px;font-style:normal;}
.pdp .info .price{font-size:18px;color:var(--taupe);margin-top:12px;}
.pdp .info .desc{font-size:15px;line-height:1.8;color:#3c362b;margin-top:22px;max-width:440px;}
.pdp .info .actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;}

/* ---------- about ---------- */
.about-wrap{padding:60px 0 90px;display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;}
.about-wrap h1{font-size:40px;font-style:italic;line-height:1.15;}
.about-body p{font-size:15.5px;line-height:1.85;color:#3c362b;margin:0 0 22px;}
.about-body p:first-of-type:first-letter{
  font-family:'Cormorant Garamond',serif;font-size:58px;line-height:.75;
  float:left;padding:6px 8px 0 0;color:var(--gold-deep);font-style:italic;
}
.about-body .tag{font-style:italic;font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--ink);margin-top:34px;}

/* ---------- contact ---------- */
.contact-wrap{padding:60px 0 90px;display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;}
.contact-wrap h1{font-size:38px;font-style:italic;}
.contact-wrap .lead{font-size:15px;color:var(--taupe);line-height:1.75;margin:18px 0 30px;max-width:340px;}
.cinfo{font-size:14px;line-height:2.5;}
.cinfo a:hover{color:var(--gold-deep);}
.cinfo .whatsapp-line a{color:var(--whatsapp);}
form.contact-form label{display:block;font-size:12px;letter-spacing:.03em;color:var(--taupe);margin:0 0 6px;}
form.contact-form .row{margin-bottom:20px;}
form.contact-form input,form.contact-form textarea{
  width:100%;border:none;border-bottom:1px solid var(--line);background:transparent;
  padding:9px 2px;font-family:inherit;font-size:15px;color:var(--ink);outline:none;
}
form.contact-form input:focus,form.contact-form textarea:focus{border-color:var(--gold-deep);}
form.contact-form textarea{resize:vertical;min-height:100px;}
.form-note{font-size:12px;color:var(--taupe);margin-top:14px;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);margin-top:40px;padding:44px 0 30px;}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;}
footer h4{font-size:12px;letter-spacing:.06em;color:var(--taupe);margin:0 0 14px;font-weight:400;}
footer p{font-size:13.5px;color:var(--taupe);line-height:1.8;max-width:340px;margin:0;}
footer .flinks a{display:block;font-size:13.5px;padding:5px 0;color:var(--ink);}
footer .flinks a:hover{color:var(--gold-deep);}
.foot-bottom{
  display:flex;justify-content:space-between;padding-top:34px;margin-top:30px;
  border-top:1px solid var(--line);font-size:11.5px;color:#A69C85;
}

[data-view]{display:none;}
[data-view].active{display:block;}

@media(max-width:880px){
  .hero{grid-template-columns:1fr;gap:26px;padding:44px 0 40px;}
  .grid{grid-template-columns:repeat(2,1fr);}
  .pdp{grid-template-columns:1fr;gap:30px;padding:34px 0 60px;}
  .about-wrap,.contact-wrap{grid-template-columns:1fr;gap:30px;padding:40px 0 60px;}
  .foot-grid{grid-template-columns:1fr;gap:26px;}
  .topbar{flex-direction:column;gap:6px;text-align:center;padding:10px 16px;}

  .nav-toggle{display:block;}
  nav.main{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream);
    flex-direction:column;gap:0;border-bottom:1px solid var(--line);z-index:20;
  }
  nav.main.open{display:flex;}
  nav.main a{padding:14px 28px;border-bottom:1px solid var(--line);}
  .header-row{position:relative;}
}
@media(max-width:520px){
  .grid{grid-template-columns:1fr;}
}