:root{
  --ink:#0b0b0b; --bone:#f6f4ef; --gold:#c9a84c; --muted:#737373; --border:#e5e5e5;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:#1a1a1a;background:#fff;-webkit-font-smoothing:antialiased;line-height:1.5}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;letter-spacing:-0.01em;font-weight:500}
em{font-style:italic}
.container{max-width:80rem;margin-inline:auto;padding-inline:1.5rem}
@media(min-width:768px){.container{padding-inline:2.5rem}}
.eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.25em;font-weight:500}

/* Header */
.header{position:fixed;inset:0 0 auto 0;z-index:40;background:var(--ink);color:#fff;padding:1rem 0;transition:padding .3s,box-shadow .3s}
.header.scrolled{padding:.5rem 0;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.header .row{display:flex;align-items:center;justify-content:space-between}
.header img.logo{height:3rem;transition:height .3s}
.header.scrolled img.logo{height:2.25rem}
.nav{display:none;gap:2.5rem;font-size:.875rem;color:rgba(255,255,255,.8)}
.nav a{position:relative;transition:color .2s}
.nav a:hover{color:#fff}
.nav a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--gold);transition:width .3s}
.nav a:hover::after{width:100%}
.btn-wpp{display:none;align-items:center;gap:.5rem;background:#25D366;color:#fff;padding:.625rem 1.25rem;border-radius:9999px;font-size:.875rem;font-weight:500;box-shadow:0 8px 24px -8px rgba(37,211,102,.7);transition:transform .2s}
.btn-wpp:hover{transform:translateY(-2px)}
.btn-wpp svg{width:1rem;height:1rem;fill:currentColor}
.menu-toggle{background:none;border:none;color:#fff;cursor:pointer}
.menu-toggle svg{width:1.5rem;height:1.5rem}
.mobile-menu{display:none;flex-direction:column;gap:1rem;border-top:1px solid rgba(255,255,255,.1);padding-top:1rem;margin-top:1rem}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:.875rem;color:rgba(255,255,255,.8)}
@media(min-width:768px){
  .nav{display:flex}
  .btn-wpp{display:inline-flex}
  .menu-toggle{display:none}
  .mobile-menu{display:none !important}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 2rem;font-size:.875rem;font-weight:500;transition:all .2s;cursor:pointer;border:0}
.btn-primary{background:#fff;color:var(--ink)}
.btn-primary:hover{background:var(--gold)}
.btn-whatsapp{background:#25D366;color:#fff}
.btn-whatsapp:hover{opacity:.9}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}

/* Hero */
.hero{position:relative;min-height:100vh;overflow:hidden;background:var(--ink);color:#fff}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.6),rgba(0,0,0,.3),var(--ink))}
.hero .content{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:10rem 0 6rem}
.hero .eyebrow{color:var(--gold)}
.hero h1{margin-top:1.5rem;max-width:64rem;font-size:3rem;line-height:1.05}
.hero h1 em{color:var(--gold)}
@media(min-width:768px){.hero h1{font-size:4.5rem}}
@media(min-width:1024px){.hero h1{font-size:5.5rem}}
.hero p{margin-top:2rem;max-width:36rem;font-size:1.125rem;color:rgba(255,255,255,.75)}
.hero .actions{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem}

/* Sections */
section{padding:7rem 0}
@media(min-width:768px){section{padding:10rem 0}}
.section-title{margin-top:1.5rem;font-size:2.25rem;line-height:1.1;color:var(--ink)}
@media(min-width:768px){.section-title{font-size:3rem}}

/* About */
.about{background:#fff}
.grid-2{display:grid;gap:4rem}
@media(min-width:768px){.grid-2{grid-template-columns:1fr 1fr;gap:6rem;align-items:center}}
.about p{margin-top:2rem;color:var(--muted);font-size:1rem;line-height:1.7}
.about p+p{margin-top:1rem}
@media(min-width:768px){.about p{font-size:1.125rem}}
.about .img-wrap{aspect-ratio:4/5;overflow:hidden}
.about .img-wrap img{width:100%;height:100%;object-fit:cover}

/* Collections */
.collections{background:var(--bone)}
.collections .head{display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem}
@media(min-width:768px){.collections .head{flex-direction:row;align-items:flex-end}}
.collections .head .lead{max-width:36rem;color:var(--muted)}
.collections .grid{margin-top:4rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#e5e5e5}
@media(min-width:640px){.collections .grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.collections .grid{grid-template-columns:repeat(4,1fr)}}
.card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:1;background:#fff;padding:1.5rem;overflow:hidden;transition:color .3s}
.card .gradient{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);opacity:0;transition:opacity .5s}
.card:hover .gradient{opacity:1}
.card .info{position:relative;z-index:1;transition:color .3s}
.card:hover .info{color:#fff}
.card h3{font-size:1rem;line-height:1.2;color:var(--ink);transition:color .3s}
.card:hover h3{color:#fff}
@media(min-width:640px){.card h3{font-size:1.25rem}}
@media(min-width:768px){.card h3{font-size:1.5rem}}
.card .more{margin-top:.75rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);transition:color .3s}
.card:hover .more{color:rgba(255,255,255,.8)}

/* Featured */
.featured{background:var(--ink);color:#fff}
.featured .eyebrow{color:var(--gold)}
.featured .track{margin-top:4rem;display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;scrollbar-width:none}
.featured .track::-webkit-scrollbar{display:none}
.featured .item{flex:none;width:80%;scroll-snap-align:start;background:#fff;color:var(--ink)}
@media(min-width:640px){.featured .item{width:48%}}
@media(min-width:768px){.featured .item{width:32%}}
@media(min-width:1024px){.featured .item{width:24%}}
.featured .item .ph{aspect-ratio:4/5;background:var(--bone);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:1.5rem;color:rgba(0,0,0,.4)}
.featured .item .body{padding:1.25rem}
.featured .item h3{font-size:1.125rem}
.featured .cta{margin-top:4rem;display:flex;justify-content:center}

/* Store */
.store{background:#fff}
.store .info{margin-top:2.5rem;display:flex;flex-direction:column;gap:1.5rem;font-size:.875rem;color:var(--muted)}
.store .info .label{font-weight:500;color:var(--ink)}
.store .actions{margin-top:3rem;display:flex;flex-wrap:wrap;gap:1rem}
.store iframe{width:100%;height:100%;border:0}
.store .map{aspect-ratio:4/5;overflow:hidden;background:var(--bone);box-shadow:0 30px 80px -20px rgba(0,0,0,.25)}
@media(min-width:768px){.store .map{aspect-ratio:5/6}}

/* Contact + Footer */
.contact{background:var(--ink);color:#fff;padding:0}
.contact .grid{display:grid;gap:4rem;padding:7rem 0}
@media(min-width:768px){.contact .grid{grid-template-columns:1fr 1fr;padding:10rem 0}}
.contact .eyebrow{color:var(--gold)}
.contact h2{color:#fff}
.contact h2 em{color:var(--gold)}
.contact .lead{margin-top:1.5rem;max-width:28rem;color:rgba(255,255,255,.7)}
.contact-info{margin-top:2.5rem;display:grid;gap:1.5rem;font-size:.875rem;color:rgba(255,255,255,.7)}
@media(min-width:640px){.contact-info{grid-template-columns:1fr 1fr}}
.contact-info .full{grid-column:1/-1}
.contact-info .label{font-weight:500;color:#fff;display:block;margin-bottom:.25rem}
form .field{margin-bottom:1.5rem}
form label{display:block;color:rgba(255,255,255,.6)}
form input,form textarea{margin-top:.5rem;width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.2);padding:.75rem 0;color:#fff;font:inherit;outline:none;transition:border-color .2s}
form input::placeholder,form textarea::placeholder{color:rgba(255,255,255,.3)}
form input:focus,form textarea:focus{border-color:var(--gold)}
form textarea{resize:none}
.form-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.5rem}
.footer{border-top:1px solid rgba(255,255,255,.1)}
.footer .row{display:flex;flex-direction:column;align-items:flex-start;gap:2rem;padding:2.5rem 0}
@media(min-width:768px){.footer .row{flex-direction:row;align-items:center;justify-content:space-between}}
.footer img{height:3rem}
.footer nav{display:flex;flex-wrap:wrap;gap:2rem;font-size:.875rem;color:rgba(255,255,255,.7)}
.footer nav a:hover{color:var(--gold)}
.copyright{padding-bottom:2rem;font-size:.75rem;color:rgba(255,255,255,.4)}

/* Floating WhatsApp */
.float-wpp{position:fixed;bottom:1.5rem;right:1.5rem;z-index:50;width:3.5rem;height:3.5rem;display:flex;align-items:center;justify-content:center;border-radius:9999px;background:#25D366;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .2s}
.float-wpp:hover{transform:scale(1.1)}
.float-wpp svg{width:1.75rem;height:1.75rem;fill:currentColor}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}
.reveal.in{opacity:1;transform:none}

/* Page (collection) */
.page{padding-top:8rem;padding-bottom:5rem;background:var(--bone);min-height:100vh}
.breadcrumb{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);margin-bottom:1.5rem}
.breadcrumb a:hover{color:var(--ink)}
.page h1{font-size:2.5rem;color:var(--ink)}
@media(min-width:768px){.page h1{font-size:3.5rem}}
.page .desc{margin-top:1rem;max-width:42rem;color:var(--muted);font-size:1rem}
.products{margin-top:3rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:640px){.products{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
@media(min-width:1024px){.products{grid-template-columns:repeat(4,1fr)}}
.product{background:#fff;overflow:hidden;display:block;transition:transform .3s,box-shadow .3s}
.product:hover{transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(0,0,0,.2)}
.product .img{aspect-ratio:1;overflow:hidden;background:var(--bone)}
.product .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.product:hover .img img{transform:scale(1.05)}
.product .info{padding:1rem}
.product .name{font-size:.875rem;color:var(--ink);font-weight:500}
.product .price{margin-top:.25rem;font-size:.75rem;color:var(--muted)}
.cta-block{margin-top:4rem;text-align:center}