*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#0C0A07; --bg2:#120E09; --surface:#16110A; --card:#1B1510; --card2:#221B12;
  --line:#2E2619; --line-2:#3E331F; --ink:#F4ECDB; --ink-soft:#DCD0B8;
  --muted:#9C8E72; --faint:#5E5240; --gold:#C9A24B; --gold-bright:#EAD08A;
  --gold-deep:#8B6B29; --gold-glow:rgba(201,162,75,0.15); --clay:#C77E54; --clay-deep:#7E4A30;
  --wa:#25D366; --wa-deep:#1DA851; --wa-ink:#05311C;
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:28px;
  --shadow-soft:0 2px 8px rgba(0,0,0,.35);
  --shadow-lift:0 32px 80px -24px rgba(0,0,0,.78),0 10px 30px -14px rgba(0,0,0,.55);
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost','DM Sans',system-ui,-apple-system,sans-serif;
}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans); color:var(--ink); min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; line-height:1.5;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(199,162,74,.07), transparent 60%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg2) 55%,var(--bg) 100%);
  background-attachment:fixed;
}
::selection{background:rgba(199,162,74,.28);color:var(--ink);}
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.wrap{position:relative; z-index:1; max-width:1320px; margin:0 auto; padding:0 24px;}

/* ── HEADER ── */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(11,10,7,.92),rgba(11,10,7,.72));
  border-bottom:1px solid var(--line);
}
.hbar{display:flex; align-items:center; justify-content:space-between; height:68px;}
.brand{display:flex; align-items:baseline; gap:10px; cursor:pointer;}
.brand .mark{font-family:var(--serif); font-weight:500; font-size:26px; letter-spacing:.02em; color:var(--ink);}
.brand .mark b{color:var(--gold); font-weight:500;}
.brand .reg{font-size:10px; color:var(--gold); transform:translateY(-8px);}
.brand .tag{font-size:9.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); border-left:1px solid var(--line-2); padding-left:10px;}
.hnav{display:flex; gap:26px; align-items:center;}
.hnav a{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .3s;}
.hnav a:hover{color:var(--gold-bright);}
@media(max-width:760px){.hnav,.brand .tag{display:none;}}

/* ── HERO ── */
.hero{position:relative; text-align:center; padding:clamp(64px,9vw,120px) 0 clamp(36px,5vw,64px); overflow:hidden;}
.hero::before{
  content:'M'; position:absolute; top:50%; left:50%; transform:translate(-50%,-44%);
  font-family:var(--serif); font-weight:300; font-style:italic; font-size:min(58vw,640px);
  line-height:1; color:rgba(199,162,74,.035); pointer-events:none; z-index:-1; letter-spacing:-.04em;
}
.eyebrow{display:inline-flex; align-items:center; gap:14px; font-size:11px; font-weight:500;
  letter-spacing:.42em; text-transform:uppercase; color:var(--gold); margin-bottom:26px;}
.eyebrow span{width:42px; height:1px; background:linear-gradient(90deg,transparent,var(--gold-deep),transparent);}
.hero h1{font-family:var(--serif); font-weight:300; font-size:clamp(42px,7vw,86px); line-height:1.02; letter-spacing:-.015em;}
.hero h1 i{color:var(--gold-bright); font-weight:400;}
.hero p{max-width:560px; margin:24px auto 0; color:var(--ink-soft); font-size:16px; font-weight:300; line-height:1.7;}
.hero .yr{font-family:var(--serif); font-style:italic; color:var(--gold); font-size:18px; letter-spacing:.05em; margin-top:18px;}

/* ── STATS ── */
.stats{display:flex; justify-content:center; gap:clamp(20px,5vw,72px); flex-wrap:wrap;
  padding:34px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:46px;}
.stat{text-align:center;}
.stat b{display:block; font-family:var(--serif); font-size:40px; font-weight:400; color:var(--gold-bright); line-height:1;}
.stat span{font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-top:8px; display:block;}

/* ── TOOLBAR ── */
.toolbar{position:sticky; top:68px; z-index:40; padding:18px 0 14px;
  background:linear-gradient(180deg,rgba(11,10,7,.95),rgba(11,10,7,.8)); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.search{position:relative; max-width:460px; margin:0 auto 18px;}
.search input{width:100%; background:var(--card); border:1px solid var(--line-2); color:var(--ink);
  font-family:var(--sans); font-size:14px; padding:13px 16px 13px 44px; border-radius:var(--r-md);
  letter-spacing:.02em; transition:border-color .3s, box-shadow .3s;}
.search input::placeholder{color:var(--faint);}
.search input:focus{outline:none; border-color:var(--gold-deep); box-shadow:0 0 0 3px var(--gold-glow);}
.search svg{position:absolute; left:15px; top:50%; transform:translateY(-50%); width:18px; height:18px; stroke:var(--gold); fill:none; stroke-width:1.6;}
.collections{display:flex; gap:7px; flex-wrap:wrap; justify-content:center; margin-bottom:12px;}
.ctab{font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  background:transparent; border:1px solid var(--line-2); padding:8px 15px; border-radius:999px; cursor:pointer;
  transition:all .28s var(--ease); white-space:nowrap;}
.ctab:hover{color:var(--ink-soft); border-color:var(--gold-deep); transform:translateY(-1px);}
.ctab.active{color:var(--bg); background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  border-color:var(--gold); font-weight:500; box-shadow:0 6px 18px -8px var(--gold-glow);}
.subfilters{display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap;}
.colorfilter{display:flex; gap:5px; flex-wrap:wrap; justify-content:center;}
.dot{width:22px; height:22px; border-radius:50%; cursor:pointer; border:1px solid rgba(255,255,255,.12);
  position:relative; transition:transform .2s; box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);}
.dot:hover{transform:scale(1.18);}
.dot.active{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--gold-bright); transform:scale(1.1);}
.dot.all{display:flex; align-items:center; justify-content:center; background:var(--card2); color:var(--muted); font-size:9px; letter-spacing:.1em;}
.dot.all.active{color:var(--gold-bright);}
select.sort{font-family:var(--sans); font-size:11px; letter-spacing:.08em; color:var(--ink-soft);
  background:var(--card); border:1px solid var(--line-2); padding:8px 12px; border-radius:var(--r-sm); cursor:pointer;}
select.sort:focus{outline:none; border-color:var(--gold-deep);}

/* ── COUNT ── */
.countbar{text-align:center; padding:26px 0 6px; color:var(--muted); font-size:12px; letter-spacing:.18em; text-transform:uppercase;}
.countbar b{color:var(--gold-bright); font-weight:500;}

/* ── GRID ── */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:24px; padding:18px 0 80px;}
.product{
  position:relative; background:linear-gradient(160deg,var(--card),var(--surface));
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; cursor:pointer;
  transition:transform .42s var(--ease), border-color .42s, box-shadow .42s; opacity:0; transform:translateY(18px);
  animation:rise .7s var(--ease) forwards;
}
@keyframes rise{to{opacity:1; transform:none;}}
.product:hover{transform:translateY(-6px); border-color:var(--gold-deep); box-shadow:var(--shadow-lift);}
.pthumb{position:relative; aspect-ratio:1/1.04; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 100% at 50% 14%, var(--card2), var(--surface) 72%); overflow:hidden;}
.pthumb svg{width:62%; height:62%; filter:drop-shadow(0 18px 26px rgba(0,0,0,.55));
  transition:transform .55s var(--ease);}
.product:hover .pthumb svg{transform:scale(1.06) translateY(-3px);}
.pthumb::after{content:''; position:absolute; inset:0;
  background:radial-gradient(80% 60% at 50% 120%, rgba(0,0,0,.5), transparent 70%); pointer-events:none;}
.pcat{position:absolute; top:14px; left:14px; font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); background:rgba(11,10,7,.55); padding:5px 9px; border-radius:999px; border:1px solid var(--line-2); z-index:2;}
.pstatus{position:absolute; top:14px; right:14px; font-size:8.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); display:flex; align-items:center; gap:5px; z-index:2;}
.pstatus i{width:6px; height:6px; border-radius:50%; background:#7FB069; box-shadow:0 0 8px #7FB069; display:inline-block;}
.pinfo{padding:18px 18px 20px; border-top:1px solid var(--line);}
.ptitle{font-family:var(--serif); font-size:21px; font-weight:500; line-height:1.15; letter-spacing:.01em;}
.psku{font-size:10px; letter-spacing:.14em; color:var(--faint); margin-top:5px; font-variant-numeric:tabular-nums;}
.pmeta{display:flex; align-items:center; gap:9px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--line);}
.pmeta .cw{width:18px; height:18px; border-radius:50%; flex:0 0 auto; border:1px solid rgba(255,255,255,.12);}
.pmeta .cn{font-size:11.5px; color:var(--ink-soft); line-height:1.3;}
.pmeta .pf{margin-left:auto; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:right;}
.empty{grid-column:1/-1; text-align:center; padding:80px 20px; color:var(--muted);}
.empty .e1{font-family:var(--serif); font-size:30px; color:var(--ink-soft); margin-bottom:10px;}

/* ── MODAL ─────────────────────────────────────────────────────────────── */
.overlay{position:fixed; inset:0; z-index:100; background:rgba(6,5,3,.78); backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .35s;}
.overlay.open{opacity:1; pointer-events:auto;}
.modal{width:min(960px,100%); max-height:88vh; overflow:hidden; background:linear-gradient(165deg,var(--card),var(--bg2));
  border:1px solid var(--line-2); border-radius:var(--r-xl); box-shadow:var(--shadow-lift);
  display:grid; grid-template-columns:1.05fr 1fr; transform:translateY(20px) scale(.98); transition:transform .4s var(--ease);}
.overlay.open .modal{transform:none;}

/* Static (non-overlay) modal used on the single-product page */
.modal.static{max-height:none; overflow:visible;}
.modal.static .mbody{max-height:none;}
.modal.static .mbody-scroll{overflow:visible;}

/* Left — the piece in focus */
.mvisual{position:relative; background:radial-gradient(120% 90% at 50% 16%, var(--card2), var(--surface) 75%);
  border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:340px; padding:0; overflow:hidden;}
.mvisual .mmain{width:100%; flex:1; min-height:300px; object-fit:cover; display:block;}
.mclose{position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%;
  background:rgba(11,10,7,.62); border:1px solid var(--line-2); color:var(--ink-soft); cursor:pointer;
  font-size:21px; line-height:1; display:flex; align-items:center; justify-content:center; z-index:5;
  backdrop-filter:blur(4px); transition:all .25s;}
.mclose:hover{color:var(--gold-bright); border-color:var(--gold-deep); transform:rotate(90deg);}
.mthumbs{display:flex; gap:8px; padding:12px; background:rgba(11,10,7,.55); border-top:1px solid var(--line); overflow-x:auto;}
.mthumb{flex:0 0 auto; width:58px; height:58px; border-radius:var(--r-sm); overflow:hidden;
  border:1px solid var(--line-2); background:none; cursor:pointer; padding:0; transition:border-color .25s, transform .25s;}
.mthumb img{width:100%; height:100%; object-fit:cover; display:block;}
.mthumb:hover{transform:translateY(-2px);}
.mthumb.active{border-color:var(--gold-bright); box-shadow:0 0 0 1px var(--gold-bright);}

/* Right — content scrolls; CTA stays pinned */
.mbody{display:flex; flex-direction:column; min-height:0; max-height:88vh;}
.mbody-scroll{flex:1; min-height:0; overflow-y:auto; padding:38px 38px 26px;}
.mbody-scroll::-webkit-scrollbar{width:7px;}
.mbody-scroll::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:8px;}
.mcat{font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);}
.mtitle{font-family:var(--serif); font-size:clamp(30px,3.4vw,40px); font-weight:500; line-height:1.05; margin:10px 0 6px; letter-spacing:-.01em;}
.msku{font-size:11px; letter-spacing:.18em; color:var(--faint); font-variant-numeric:tabular-nums;}
.mrule{height:1px; background:linear-gradient(90deg,var(--gold),transparent); margin:22px 0;}
.mdesc{font-size:14px; line-height:1.75; color:var(--ink-soft); margin:-4px 0 20px; font-weight:300;}

/* Specs — refined two-column grid (long rows span full width) */
.specs{display:grid; grid-template-columns:1fr 1fr; gap:0 28px;}
.spec{display:flex; flex-direction:column; gap:4px; padding:13px 0; border-bottom:1px solid var(--line);}
.spec-wide{grid-column:1 / -1;}
.spec .k{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);}
.spec .v{font-size:13.5px; color:var(--ink); line-height:1.5;}
.spec .v .swatch{display:inline-flex; align-items:center; gap:9px;}
.spec .v .swatch i{width:17px; height:17px; border-radius:50%; border:1px solid rgba(255,255,255,.18); flex:0 0 auto;}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;}
.chip{font-size:10.5px; letter-spacing:.04em; color:var(--ink-soft); background:var(--card2);
  border:1px solid var(--line-2); padding:4px 11px; border-radius:999px;}
.note{font-size:12.5px; font-style:italic; font-family:var(--serif); color:var(--muted); line-height:1.55; margin-top:6px;}

/* CTA block — pinned to the foot of the right pane */
.mcta{padding:20px 38px 26px; border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,rgba(201,162,75,.04));}
.mcta-primary{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.mcta-secondary{margin-top:10px;}
.mcta-mini{display:flex; gap:18px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:16px;}

.btn{font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:14px 20px;
  border-radius:999px; cursor:pointer; border:1px solid var(--gold-deep); transition:all .3s var(--ease);
  display:inline-flex; align-items:center; justify-content:center; gap:9px; text-decoration:none; line-height:1; white-space:nowrap;}
.btn svg{width:16px; height:16px; flex:0 0 auto;}
.btn.wide{width:100%;}
.btn.whatsapp{background:linear-gradient(135deg,var(--wa),var(--wa-deep)); color:#fff; border-color:var(--wa-deep); font-weight:600;}
.btn.whatsapp svg{fill:#fff;}
.btn.whatsapp:hover{filter:brightness(1.06); transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(37,211,102,.5);}
.btn.custom{background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:var(--bg); border-color:var(--gold); font-weight:600;}
.btn.custom svg{fill:var(--bg);}
.btn.custom:hover{filter:brightness(1.07); transform:translateY(-2px); box-shadow:0 12px 26px -12px var(--gold-glow);}
.btn.primary{background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:var(--bg); border-color:var(--gold); font-weight:500;}
.btn.primary:hover{filter:brightness(1.08); transform:translateY(-2px); box-shadow:0 10px 24px -10px var(--gold-glow);}
.btn.ghost{background:transparent; color:var(--gold-bright);}
.btn.ghost:hover{background:var(--card2); border-color:var(--gold-deep);}

.mlink{font-family:var(--sans); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); background:none; border:none; cursor:pointer; padding:2px 0; text-decoration:none;
  border-bottom:1px solid transparent; transition:color .25s, border-color .25s;}
.mlink:hover{color:var(--gold-bright); border-color:var(--gold-deep);}

@media(max-width:760px){
  .modal{grid-template-columns:1fr; max-height:92vh; overflow-y:auto;}
  .mvisual{border-right:none; border-bottom:1px solid var(--line); min-height:auto;}
  .mvisual .mmain{min-height:260px; max-height:46vh;}
  .mbody{max-height:none;}
  .mbody-scroll{overflow:visible; padding:28px 24px 18px;}
  .mcta{padding:18px 24px 24px;}
  .mcta-primary{grid-template-columns:1fr;}
  .specs{grid-template-columns:1fr; gap:0;}
}

/* ── FOOTER ── */
footer{border-top:1px solid var(--line); padding:54px 0 64px; text-align:center;}
footer .fm{font-family:var(--serif); font-size:30px; color:var(--ink); font-weight:400;}
footer .fm b{color:var(--gold);}
footer p{color:var(--muted); font-size:12px; margin-top:12px; letter-spacing:.04em; line-height:1.7;}
footer .fl{display:flex; gap:22px; justify-content:center; margin-top:22px;}
footer .fl a{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .3s;}
footer .fl a:hover{color:var(--gold-bright);}
.toTop{position:fixed; bottom:26px; right:26px; z-index:60; width:46px; height:46px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:var(--bg); border:none; cursor:pointer;
  font-size:18px; box-shadow:0 10px 26px -10px rgba(0,0,0,.7); opacity:0; pointer-events:none; transition:opacity .3s, transform .3s;}
.toTop.show{opacity:1; pointer-events:auto;}
.toTop:hover{transform:translateY(-3px);}
/* ── Real product photos on catalogue cards ────────────────────────────── */
.pthumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s var(--ease);}
.product:hover .pthumb img{transform:scale(1.05);}
.pthumb{padding:0;}