@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Spectral:wght@300;400;500&display=swap');
:root{ --bg:#0b0b0e; --panel:#111117; --text:#eaeaea; --muted:#b8b8c0; --gold:#d4af37; --hero:url('assets/img/product_dark_1.jpg'); }
:root.light{ --bg:#f4f4f6; --panel:#ffffff; --text:#202124; --muted:#4f4f56; --gold:#b08a14; --hero:url('assets/img/product_light_1.jpg'); }
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Spectral',serif}
a{color:var(--text);text-decoration:none} .container{max-width:1200px;margin:0 auto;padding:0 24px}
nav{position:sticky;top:0;z-index:10;background:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,.2));backdrop-filter:blur(8px);border-bottom:1px solid rgba(212,175,55,.25)}
:root.light nav{background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.2));border-bottom-color:rgba(176,138,20,.3)}
nav .inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;gap:12px;align-items:center} .logo img{width:42px;height:42px}
.logo h1{font-family:'Cinzel',serif;font-size:20px;letter-spacing:.12em;color:var(--gold);margin:0}
nav .links a{margin-left:22px;font-weight:500;color:var(--muted)} nav .links a:hover{color:var(--gold)}
.toggle{border:1px solid var(--gold);border-radius:999px;padding:6px 12px;color:var(--gold);cursor:pointer;margin-left:16px}
.toggle:hover{background:rgba(212,175,55,.12)}
.hero{min-height:70vh;display:grid;place-items:center;text-align:center;background:var(--hero) center/cover fixed}
.hero .overlay{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.85));padding:80px 24px;border:1px solid rgba(212,175,55,.25);border-radius:16px}
:root.light .hero .overlay{background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.85));border-color:rgba(176,138,20,.25)}
.hero h2{font-family:'Cinzel',serif;font-size:48px;margin:0 0 10px;color:var(--gold);letter-spacing:.08em}
.hero p{color:var(--muted);max-width:780px;margin:0 auto 22px}
.cta{display:inline-block;padding:12px 24px;border:1px solid var(--gold);border-radius:999px;color:var(--gold)}
.cta:hover{background:rgba(212,175,55,.1)}
.section{padding:72px 0} .grid{display:grid;gap:20px}
.grid.products{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{background:var(--panel);border:1px solid rgba(212,175,55,.18);border-radius:16px;overflow:hidden;box-shadow:0 10px 22px rgba(0,0,0,.15)}
.card img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover}
.card .pad{padding:14px} .card h3{font-family:'Cinzel',serif;font-size:18px;margin:2px 0;color:inherit}
.price{color:var(--gold);font-weight:600}
.btn{display:inline-block;margin-top:8px;padding:8px 12px;border:1px solid var(--gold);border-radius:10px;color:var(--gold)}
.btn:hover{background:rgba(212,175,55,.12)}
footer{padding:28px 0;border-top:1px solid rgba(212,175,55,.25);color:var(--muted);text-align:center}