/* House of Scents — shared theme (cream / plum / gold), matches the homepage. */
@import url('/assets/fonts.css');
:root{
  --bg:#f4ecdf; --panel:#fbf7ef; --card:#ffffff; --ink:#2c2320; --muted:#8b7c6e;
  --gold:#c6a15b; --gold-d:#b0893f; --plum:#3a1e3f; --plum2:#2b1430; --line:#e7dbc7; --err:#c0492e;
}
:root[data-theme="dark"]{
  --bg:#141019; --panel:#1b1522; --card:#211a29; --ink:#ece7f1; --muted:#a99fb4;
  --gold:#c9a35c; --gold-d:#d9b56b; --line:#332b3d;
  --plum:#5a3a63; --plum2:#432a4b;   /* stays usable as .btn.solid background on dark */
}
:root[data-theme="dark"] h1,:root[data-theme="dark"] h2{color:#e8cff2}
*{box-sizing:border-box} html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:'Cairo','Segoe UI',Tahoma,Arial,sans-serif;line-height:1.6}
a{color:var(--gold-d);text-decoration:none}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
.narrow{max-width:460px}

/* headers */
header.top,header.mkhdr{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--line)}
header.top{max-width:none} .wrap header.top{padding:12px 0}
.logo{flex:0 0 auto;display:inline-flex;align-items:center} .logo img{height:46px;width:auto;display:block}
.brand b{font-size:1.05rem;display:block;line-height:1.1;color:var(--ink)} .brand span{color:var(--gold-d);font-size:.8rem}
header nav{display:flex;gap:10px;align-items:center}

h1{font-size:1.6rem;color:var(--plum)} h2{font-size:1.2rem;margin-top:26px;color:var(--plum)}

.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin:14px 0;box-shadow:0 6px 20px rgba(58,30,63,.05)}
label{display:block;color:var(--muted);font-size:.9rem;margin:12px 0 4px}
input,textarea,select{width:100%;background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:10px 12px;font:inherit}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold)}
textarea{min-height:90px}

.btn{display:inline-block;border:1px solid var(--gold);color:var(--gold-d);background:none;padding:9px 18px;border-radius:10px;font:inherit;cursor:pointer;margin-top:14px}
.btn.solid{background:var(--plum);color:#fff;border-color:var(--plum);font-weight:600}
.btn.gold{background:var(--gold);color:#3a2410;border-color:var(--gold);font-weight:700}
.btn.link{border:none;color:var(--muted);padding:0;margin:0}
.row{display:flex;gap:10px;flex-wrap:wrap} .row>*{flex:1;min-width:140px}
.muted{color:var(--muted)} .err{color:var(--err);min-height:1.2em;font-size:.9rem}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.chip{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:.85rem;cursor:pointer;color:var(--muted);background:#fff}
.chip input{width:auto;margin-inline-end:6px} .chip.on{border-color:var(--gold);color:var(--gold-d);background:#faf3e6}
.list .item{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:10px 0}
.badge{background:var(--gold);color:#3a2410;border-radius:6px;padding:1px 7px;font-size:.72rem;font-weight:700}

/* marketplace browse */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.filters select,.filters input{width:auto;flex:1;min-width:150px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin:8px 0 30px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:block}
.pcard:hover{border-color:var(--gold)}
.pcard .thumb{height:130px;background:#efe4d2 center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:2rem}
.pcard .b{padding:12px} .pcard .b b{font-size:.95rem;display:block;color:var(--ink)} .pcard .b small{color:var(--muted);font-size:.82rem}
.price{color:var(--gold-d);font-weight:700}
.cover{height:150px;border-radius:14px;background:radial-gradient(circle at 60% 40%,#f0e2c8,#e8d6bb 60%,#dcc6a4) center/cover no-repeat;border:1px solid var(--line);margin:14px 0}
.gallery{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px} .gallery img{height:110px;border-radius:10px;border:1px solid var(--line)}
@media(max-width:760px){ .cards{grid-template-columns:1fr 1fr;gap:10px} .pcard .thumb{height:110px} .cover{height:110px} .logo img{height:38px} }