/* Magical Scents — storefront (Obsidian gold) */
:root{
  --gold:#C7A468; --gold-soft:#E3CEA1; --gold-deep:#8C6F3E;
  --ink:#0D0D0D; --panel:#161616; --panel-2:#1d1d1d; --cream:#F4EEE1;
  --muted:#9a9a9a; --line:rgba(199,164,104,.22); --ok:#86C28B; --err:#E0736B;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ink);color:var(--cream);font-family:Arial,Helvetica,sans-serif;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-soft)}
.serif{font-family:Georgia,'Times New Roman',serif}

/* header */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(13,13,13,.96);z-index:50;flex-wrap:wrap}
.site-head .logo img,.site-head .logo svg{height:46px;width:auto;display:block}
.nav{display:flex;gap:26px;align-items:center}
.nav a{font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--cream)}
.nav a:hover,.nav a.active{color:var(--gold)}
.head-tools{display:flex;gap:14px;align-items:center}
.btn-ghost{border:1px solid var(--gold);color:var(--gold);padding:7px 15px;border-radius:3px;font-size:13px;letter-spacing:1px}
.btn-ghost:hover{background:var(--gold);color:#1a1305}

/* hero */
.hero{text-align:center;padding:70px 24px 56px}
.hero h1{font-size:44px;letter-spacing:5px;color:var(--gold);margin-bottom:10px}
.hero-logo{width:300px;max-width:90%;height:auto;display:block;margin:0 auto}
.hero .rule{width:60px;height:1px;background:var(--gold);margin:18px auto}

/* home showcase: product | logo | product, then a row of four */
.showcase{padding:46px 0 10px}
.show-head{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:center;margin-bottom:24px}
.side-h{font-family:Georgia,serif;color:var(--gold);font-weight:normal;font-size:24px;letter-spacing:2px;text-align:center;margin:0}
.show-top{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:center;margin-bottom:24px}
.show-logo{text-align:center}
.show-logo img{width:300px;max-width:100%;height:auto;display:block;margin:0 auto}
.show-logo .rule{width:60px;height:1px;background:var(--gold);margin:16px auto 10px}
.show-logo p{color:var(--gold-soft);font-size:16px;letter-spacing:1px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:820px){.show-top{grid-template-columns:1fr;gap:18px}.grid-4{grid-template-columns:repeat(2,1fr)}}
.hero p{color:var(--gold-soft);font-size:18px;letter-spacing:1px}

/* sections */
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
.section{padding:44px 0}
.section h2{font-family:Georgia,serif;color:var(--gold);font-size:26px;font-weight:normal;letter-spacing:2px;text-align:center;margin-bottom:6px}
.section .sub{text-align:center;color:var(--muted);font-size:14px;margin-bottom:30px}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s}
.card:hover{border-color:var(--gold)}
.card .ph{aspect-ratio:1/1;background:var(--panel-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .ph .noimg{color:var(--gold-deep);font-size:13px}
.card .body{padding:14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .name{font-family:Georgia,serif;color:var(--cream);font-size:17px}
.card .meta{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:1px}
.card .price{color:var(--gold);font-size:16px;margin-top:auto}
.tag{display:inline-block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--gold-deep);border:1px solid var(--line);border-radius:3px;padding:2px 8px}

/* product detail */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:40px 0}
.pd .gallery .main{aspect-ratio:1/1;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.pd .gallery .main img{width:100%;height:100%;object-fit:cover}
.pd .thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.pd .thumbs img{width:64px;height:64px;object-fit:cover;border:1px solid var(--line);border-radius:5px;cursor:pointer}
.pd h1{font-family:Georgia,serif;color:var(--gold);font-size:32px;font-weight:normal;margin-bottom:8px}
.pd .desc{color:var(--cream);margin:16px 0}
.pd .sizes{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.pd .size{border:1px solid var(--gold);color:var(--gold);border-radius:4px;padding:8px 14px;cursor:pointer;font-size:14px}
.pd .size.sel{background:var(--gold);color:#1a1305}
.pd .price{font-size:26px;color:var(--gold);margin:14px 0}
.btn{display:inline-block;background:var(--gold);color:#1a1305;border:none;border-radius:4px;padding:13px 26px;font-size:15px;letter-spacing:1px;cursor:pointer}
.btn:hover{background:var(--gold-soft)}

/* footer */
.site-foot{margin-top:auto;border-top:1px solid var(--line);padding:24px;text-align:center;color:var(--muted);font-size:12px}
.site-foot a{color:var(--gold)}

/* rtl */
html[dir="rtl"] body{font-family:'Segoe UI',Tahoma,Arial,sans-serif}
html[dir="rtl"] .nav a{letter-spacing:0}

@media(max-width:760px){
  .pd{grid-template-columns:1fr}
  .hero h1{font-size:32px}
  .nav{gap:16px}
}