*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#0B0A07; --bg2:#100D08; --surface:#151109; --card:#19140C; --card2:#1F1910;
  --line:#2B2316; --line-2:#3A2F1D; --ink:#F1E9D8; --ink-soft:#D8CDB6;
  --muted:#998C72; --faint:#5B5040; --gold:#C7A24A; --gold-bright:#E6CC82;
  --gold-deep:#8A6C2A; --gold-glow:rgba(199,162,74,0.14); --clay:#C77E54; --clay-deep:#7E4A30;
  --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 24px 60px -20px rgba(0,0,0,.7),0 8px 24px -12px rgba(0,0,0,.5);
  --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:'T'; 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,.72); backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px); 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(900px,100%); max-height:90vh; overflow-y:auto; 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:1fr 1fr; transform:translateY(20px) scale(.98); transition:transform .4s var(--ease);}
.overlay.open .modal{transform:none;}
.modal::-webkit-scrollbar{width:8px;} .modal::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:8px;}
.mvisual{position:relative; background:radial-gradient(120% 90% at 50% 16%, var(--card2), var(--surface) 75%);
  border-right:1px solid var(--line); display:flex; align-items:center; justify-content:center; min-height:340px; padding:30px;}
.mvisual svg{width:74%; height:74%; filter:drop-shadow(0 24px 34px rgba(0,0,0,.6));}
.mclose{position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%;
  background:rgba(11,10,7,.6); border:1px solid var(--line-2); color:var(--ink-soft); cursor:pointer;
  font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center; z-index:5; transition:all .25s;}
.mclose:hover{color:var(--gold-bright); border-color:var(--gold-deep); transform:rotate(90deg);}
.mbody{padding:34px 32px;}
.mcat{font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold);}
.mtitle{font-family:var(--serif); font-size:34px; font-weight:500; line-height:1.08; margin:8px 0 4px;}
.msku{font-size:11px; letter-spacing:.16em; color:var(--faint); font-variant-numeric:tabular-nums;}
.mrule{height:1px; background:linear-gradient(90deg,var(--gold-deep),transparent); margin:20px 0;}
.specs{display:flex; flex-direction:column; gap:0;}
.spec{display:flex; gap:14px; padding:11px 0; border-bottom:1px solid var(--line);}
.spec:last-child{border-bottom:none;}
.spec .k{flex:0 0 116px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding-top:2px;}
.spec .v{font-size:13.5px; color:var(--ink-soft); line-height:1.5;}
.spec .v .swatch{display:inline-flex; align-items:center; gap:8px;}
.spec .v .swatch i{width:16px; height:16px; border-radius:50%; border:1px solid rgba(255,255,255,.15);}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:3px;}
.chip{font-size:10.5px; letter-spacing:.04em; color:var(--ink-soft); background:var(--card2);
  border:1px solid var(--line-2); padding:4px 10px; 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;}
.mfoot{margin-top:24px; display:flex; gap:10px; flex-wrap:wrap;}
.btn{font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; padding:13px 22px;
  border-radius:999px; cursor:pointer; border:1px solid var(--gold-deep); transition:all .3s var(--ease);}
.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);}
@media(max-width:720px){.modal{grid-template-columns:1fr;} .mvisual{border-right:none; border-bottom:1px solid var(--line); min-height:280px;}}

/* ── 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);}
/* ── Tasselora WordPress additions: real product photos ────────────────── */
.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;}

/* modal visual now shows a real photo + a gallery thumbnail strip */
.mvisual{flex-direction:column;padding:0;min-height:340px;overflow:hidden;}
.mvisual .mmain{width:100%;flex:1;min-height:300px;object-fit:cover;display:block;}
.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:56px;height:56px;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);}
.mdesc{font-size:14px;line-height:1.7;color:var(--ink-soft);margin:-6px 0 16px;font-weight:300;}
@media(max-width:720px){.mvisual .mmain{min-height:240px;}}