:root{
  /* ---- Premium palette: warm obsidian + muted gold + ivory ---- */
  --obsidian:#15100D;
  --obsidian-2:#1D1611;
  --charcoal:#241C17;
  --ink:#1B1512;
  --ivory:#F8F5EF;
  --ivory-dim:#EFE9DD;
  --ivory-card:#FCFAF5;
  --gold:#B9924F;
  --gold-light:#E3C384;
  --gold-deep:#8C6B34;
  --oxblood:#7A3430;
  --ok:#4F7A56;
  --low:#B98A34;
  --out:#8C3A34;
  --line:rgba(185,146,79,0.30);
  --line-dark:rgba(227,195,132,0.22);
  --radius:16px;
  --shadow-sm:0 4px 16px rgba(21,16,13,0.10);
  --shadow:0 14px 40px rgba(21,16,13,0.16);
  --shadow-lg:0 24px 64px rgba(21,16,13,0.28);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  background:var(--ivory);
  color:var(--ink);
  font-family:'Manrope',sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3,h4{font-family:'Fraunces',serif; margin:0; font-weight:600; letter-spacing:-0.015em;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--gold-light); color:var(--obsidian);}
img{max-width:100%; display:block;}

/* ---------- Layout scaffolding ---------- */
#app{min-height:100vh; padding-bottom:60px;}
.wrap{max-width:1200px; margin:0 auto; padding:0 28px;}
@media(max-width:640px){ .wrap{padding:0 18px;} }

/* ---------- Scroll reveal ---------- */
@keyframes fadeUp{
  from{opacity:0; transform:translateY(16px);}
  to{opacity:1; transform:translateY(0);}
}
.reveal{animation:fadeUp .65s var(--ease) both;}

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:40;
  background:rgba(21,16,13,0.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  color:var(--ivory);
  border-bottom:1px solid rgba(227,195,132,0.14);
  transition:background .3s var(--ease), box-shadow .3s var(--ease), padding .25s var(--ease);
}
header.site.scrolled{
  background:rgba(21,16,13,0.96);
  box-shadow:0 8px 30px rgba(0,0,0,0.25);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:20px; transition:padding .25s var(--ease);}
header.site.scrolled .header-inner{padding:13px 0;}
.logo{display:flex; align-items:baseline; gap:9px; cursor:pointer; user-select:none;}
.logo .mark{font-family:'Fraunces',serif; font-weight:700; font-size:26px; letter-spacing:0.01em; background:linear-gradient(120deg, var(--gold-light), var(--gold) 60%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.logo .tag{font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(248,245,239,0.55); font-family:'IBM Plex Mono',monospace;}

nav.cats{display:flex; gap:2px; flex-wrap:wrap; align-items:center; position:relative; background:rgba(255,255,255,0.04); border-radius:999px; padding:4px;}
.hangtag{
  position:relative;
  background:transparent;
  color:rgba(248,245,239,0.68);
  border:none;
  border-radius:999px;
  padding:8px 16px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.03em;
  display:inline-flex; align-items:center; gap:6px;
  transition:color .2s ease;
  z-index:1;
}
.hangtag:hover{color:var(--ivory);}
.hangtag.active{color:var(--obsidian);}
.hangtag.active::before{
  content:''; position:absolute; inset:0; background:linear-gradient(120deg, var(--gold-light), var(--gold)); border-radius:999px; z-index:-1;
  box-shadow:0 4px 14px rgba(185,146,79,0.4);
}
.header-actions{display:flex; align-items:center; gap:14px;}
.icon-btn{background:none; border:none; color:var(--ivory); position:relative; padding:8px; border-radius:10px; display:flex; transition:background .2s ease, transform .15s ease;}
.icon-btn:hover{background:rgba(255,255,255,0.08); transform:translateY(-1px);}
.cart-count{
  position:absolute; top:-2px; right:-2px; background:var(--gold); color:var(--obsidian);
  font-size:10px; font-weight:800; width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace;
  box-shadow:0 2px 8px rgba(185,146,79,0.5);
}
@media(max-width:760px){
  .header-inner{flex-wrap:wrap;}
  nav.cats{order:3; width:100%; justify-content:center; padding-top:6px;}
}

/* ---------- Ticker ---------- */
.ticker-wrap{background:var(--gold-deep); overflow:hidden; white-space:nowrap; border-bottom:1px solid rgba(0,0,0,0.1);}
.ticker{display:inline-flex; animation:ticker 26s linear infinite;}
.ticker span{display:inline-flex; align-items:center; color:var(--ivory); font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; padding:8px 0;}
.ticker span::after{content:'◆'; margin:0 28px; color:rgba(248,245,239,0.5); font-size:8px;}
@keyframes ticker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 500px at 88% -15%, rgba(227,195,132,0.16), transparent 60%),
    radial-gradient(700px 400px at 10% 110%, rgba(185,146,79,0.10), transparent 60%),
    linear-gradient(160deg, var(--obsidian) 0%, var(--charcoal) 100%);
  color:var(--ivory);
  padding:76px 0 64px;
}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;}
@media(max-width:860px){ .hero-grid{grid-template-columns:1fr; text-align:center;} .hero-visual{margin:0 auto;} }
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-light); margin-bottom:18px; display:flex; align-items:center; gap:10px;}
.eyebrow::before{content:''; width:24px; height:1px; background:var(--gold-light);}
@media(max-width:860px){ .eyebrow{justify-content:center;} .eyebrow::before{display:none;} }
.hero h1{font-size:clamp(38px,5.6vw,64px); line-height:1.03; font-style:italic; font-weight:500;}
.hero h1 b{font-style:normal; font-weight:700;}
.hero p{margin-top:20px; font-size:16.5px; line-height:1.7; color:rgba(248,245,239,0.72); max-width:460px;}
@media(max-width:860px){ .hero p{margin-left:auto; margin-right:auto;} }

.btn{
  border-radius:11px; padding:14px 26px; font-weight:700; font-size:14.5px; border:1px solid transparent;
  display:inline-flex; align-items:center; gap:8px; transition:transform .18s var(--ease), box-shadow .25s ease, background .2s ease, color .2s ease;
  position:relative; overflow:hidden;
}
.btn:active{transform:scale(0.96);}
.btn-primary{background:linear-gradient(120deg, var(--gold-light), var(--gold) 70%); color:var(--obsidian);}
.btn-primary::after{
  content:''; position:absolute; inset:0; background:linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform:translateX(-120%) skewX(-15deg); transition:transform .55s ease;
}
.btn-primary:hover::after{transform:translateX(120%) skewX(-15deg);}
.btn-primary:hover{box-shadow:0 10px 28px rgba(185,146,79,0.4); transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--ivory); border-color:rgba(248,245,239,0.32);}
.btn-ghost:hover{background:rgba(255,255,255,0.07); border-color:rgba(248,245,239,0.5); transform:translateY(-2px);}
.btn-dark{background:var(--obsidian); color:var(--ivory);}
.btn-dark:hover{background:#2a2019; transform:translateY(-2px);}
.btn-danger{background:transparent; color:var(--out); border-color:var(--out);}
.btn-danger:hover{background:rgba(140,58,52,0.08);}
.btn-sm{padding:9px 15px; font-size:13px; border-radius:9px;}
.btn-full{width:100%; justify-content:center;}
.hero-actions{margin-top:30px; display:flex; gap:12px; flex-wrap:wrap;}
@media(max-width:860px){ .hero-actions{justify-content:center;} }

.hero-visual{
  width:100%; max-width:400px; aspect-ratio:1/1; border-radius:24px; position:relative;
  background:linear-gradient(150deg, var(--gold-deep) 0%, var(--charcoal) 55%, var(--obsidian) 100%);
  border:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg);
  animation:floaty 6s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.hero-visual svg{width:42%; height:42%; opacity:0.95; filter:drop-shadow(0 8px 20px rgba(0,0,0,0.3));}
.hero-visual .stamp{position:absolute; bottom:20px; right:20px; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.14em; color:rgba(248,245,239,0.55); text-transform:uppercase;}
.hero-visual::before{
  content:''; position:absolute; inset:14px; border:1px solid rgba(227,195,132,0.25); border-radius:16px; pointer-events:none;
}

/* ---------- Section titles ---------- */
.section{padding:60px 0;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:30px; gap:16px; flex-wrap:wrap;}
.section-head h2{font-size:30px;}
.section-head .count{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold-deep); opacity:0.85;}

/* ---------- Product grid ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:24px;}
.card{
  background:var(--ivory-card); border-radius:var(--radius); overflow:hidden; cursor:pointer;
  border:1px solid rgba(21,16,13,0.07);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  display:flex; flex-direction:column;
  position:relative;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--line);}
.card-img{
  aspect-ratio:1/1; width:100%; background:linear-gradient(150deg,var(--ivory-dim),var(--ivory)); position:relative;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.card-img img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.card:hover .card-img img{transform:scale(1.07);}
.card-img svg{width:34%; height:34%; opacity:0.28; color:var(--gold-deep); transition:transform .5s var(--ease);}
.card:hover .card-img svg{transform:scale(1.08) rotate(-2deg);}
.card-img::after{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .35s ease; pointer-events:none;
  background:linear-gradient(to top, rgba(21,16,13,0.35), transparent 55%);
}
.card:hover .card-img::after{opacity:1;}
.corner{position:absolute; width:16px; height:16px; border-color:var(--gold-light); opacity:0; transition:opacity .35s ease;}
.corner.tl{top:10px; left:10px; border-top:1.5px solid; border-left:1.5px solid;}
.corner.br{bottom:10px; right:10px; border-bottom:1.5px solid; border-right:1.5px solid;}
.card:hover .corner{opacity:0.9;}
.badge{
  position:absolute; top:12px; left:12px; font-size:10px; font-family:'IBM Plex Mono',monospace; letter-spacing:0.08em;
  padding:5px 10px; border-radius:7px; text-transform:uppercase; font-weight:700; color:var(--ivory); z-index:2;
  box-shadow:0 3px 10px rgba(0,0,0,0.18);
}
.quick-add{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:2;
  background:rgba(21,16,13,0.88); color:var(--ivory); border:none; border-radius:9px; padding:10px;
  font-size:12.5px; font-weight:700; letter-spacing:0.02em;
  opacity:0; transform:translateY(8px); transition:opacity .3s var(--ease), transform .3s var(--ease), background .2s ease;
  backdrop-filter:blur(6px);
}
.card:hover .quick-add{opacity:1; transform:translateY(0);}
.quick-add:hover{background:var(--obsidian);}
.card-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; flex:1;}
.card-eyebrow{font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-deep); font-family:'IBM Plex Mono',monospace; font-weight:700;}
.card-title{font-size:16.5px; font-weight:600; font-family:'Fraunces',serif;}
.card-foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:10px;}
.price{font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:15px; color:var(--ink);}
.stock-line{font-size:11.5px; font-family:'IBM Plex Mono',monospace;}
.empty{text-align:center; padding:64px 20px; color:var(--gold-deep); opacity:0.85; border:1px dashed var(--line); border-radius:var(--radius);}

/* ---------- Footer ---------- */
footer.site{background:var(--obsidian); color:rgba(248,245,239,0.55); padding:40px 0; margin-top:24px; border-top:1px solid var(--line-dark);}
.foot-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-size:13px;}
.lockbtn{display:flex; align-items:center; gap:6px; background:none; border:none; color:rgba(248,245,239,0.4); font-size:12px; transition:color .2s ease;}
.lockbtn:hover{color:var(--gold-light);}

/* ---------- Modal / drawer ---------- */
#modal-root{position:fixed; inset:0; z-index:100; pointer-events:none;}
.overlay{position:fixed; inset:0; background:rgba(21,16,13,0.62); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .25s var(--ease); z-index:100;}
.overlay.show{opacity:1; pointer-events:auto;}
.modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-46%) scale(0.97); background:var(--ivory-card);
  border-radius:20px; padding:30px; width:min(480px,92vw); max-height:86vh; overflow-y:auto;
  box-shadow:var(--shadow-lg); z-index:101; opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);
  border:1px solid var(--line);
}
.modal.show{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1);}
.modal.wide{width:min(640px,94vw);}
.modal-close{position:absolute; top:18px; right:18px; background:none; border:none; color:var(--gold-deep); padding:5px; border-radius:8px; transition:background .2s ease;}
.modal-close:hover{background:rgba(185,146,79,0.12);}
.modal h3{font-size:23px; margin-bottom:4px;}
.modal .sub{font-size:13px; color:var(--gold-deep); opacity:0.9; margin-bottom:22px;}
.field{margin-bottom:15px;}
.field label{display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--gold-deep); margin-bottom:7px;}
.field input, .field select, .field textarea{
  width:100%; padding:12px 13px; border-radius:10px; border:1px solid rgba(21,16,13,0.14); background:var(--ivory);
  font-family:inherit; font-size:14px; color:var(--ink); transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(185,146,79,0.18);}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.imgpicker{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.thumb{width:66px; height:66px; border-radius:10px; overflow:hidden; position:relative; border:1px solid var(--line);}
.thumb img{width:100%; height:100%; object-fit:cover;}
.thumb .rm{position:absolute; top:2px; right:2px; background:rgba(21,16,13,0.75); color:#fff; border:none; border-radius:50%; width:17px; height:17px; font-size:10px; line-height:1;}
.upload-tile{width:66px; height:66px; border-radius:10px; border:1.5px dashed var(--gold); display:flex; align-items:center; justify-content:center; color:var(--gold-deep); background:var(--ivory); position:relative; transition:border-color .2s ease, background .2s ease;}
.upload-tile:hover{background:rgba(185,146,79,0.08);}
.upload-tile input{position:absolute; inset:0; opacity:0; cursor:pointer;}

.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px,92vw); background:var(--ivory-card); z-index:101;
  box-shadow:-16px 0 50px rgba(0,0,0,0.28); transform:translateX(100%); transition:transform .38s var(--ease);
  display:flex; flex-direction:column; border-left:1px solid var(--line);
}
.drawer.show{transform:translateX(0);}
.drawer-head{padding:22px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;}
.drawer-body{flex:1; overflow-y:auto; padding:16px 22px;}
.drawer-foot{padding:20px 22px; border-top:1px solid var(--line);}
.cart-item{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid rgba(21,16,13,0.06);}
.cart-item img, .ci-ph{width:58px; height:58px; border-radius:10px; object-fit:cover; background:var(--ivory-dim);}
.qty-ctrl{display:flex; align-items:center; gap:8px; margin-top:8px;}
.qty-ctrl button{width:23px; height:23px; border-radius:6px; border:1px solid rgba(21,16,13,0.16); background:var(--ivory); font-size:13px; transition:background .2s ease;}
.qty-ctrl button:hover{background:var(--ivory-dim);}

.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(24px); background:var(--obsidian); color:var(--ivory);
  padding:14px 24px; border-radius:12px; font-size:14px; z-index:200; opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);
  box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:10px; border:1px solid var(--line-dark);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- Admin ---------- */
.admin-shell{min-height:100vh; background:var(--ivory);}
.admin-top{background:var(--obsidian); color:var(--ivory); padding:18px 0;}
.admin-top-inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.admin-tabs{display:flex; gap:6px; background:rgba(0,0,0,0.18); padding:16px 0 0;}
.admin-tab{padding:11px 20px; border-radius:10px 10px 0 0; font-size:13.5px; font-weight:700; background:none; border:none; color:rgba(248,245,239,0.5); transition:color .2s ease, background .2s ease;}
.admin-tab.active{background:var(--ivory); color:var(--ink);}
.admin-tab:not(.active):hover{color:var(--gold-light);}
.admin-body{padding:36px 0 60px;}

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:36px;}
@media(max-width:800px){ .stat-grid{grid-template-columns:repeat(2,1fr);} }
.stat-card{
  background:var(--ivory-card); border-radius:14px; padding:20px 22px; border:1px solid var(--line);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease); position:relative; overflow:hidden;
}
.stat-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm);}
.stat-card::before{content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--gold-light), var(--gold));}
.stat-card .lbl{font-size:11px; text-transform:uppercase; letter-spacing:0.09em; color:var(--gold-deep); opacity:0.85; font-family:'IBM Plex Mono',monospace;}
.stat-card .val{font-family:'IBM Plex Mono',monospace; font-size:28px; font-weight:700; margin-top:8px; color:var(--ink);}
.panel{background:var(--ivory-card); border-radius:16px; padding:24px; border:1px solid var(--line); margin-bottom:24px;}
.panel h4{font-size:16.5px; margin-bottom:18px; font-family:'Fraunces',serif;}
.bar-row{display:grid; grid-template-columns:130px 1fr 60px; align-items:center; gap:10px; margin-bottom:12px; font-size:13px;}
.bar-track{background:var(--ivory-dim); border-radius:6px; height:10px; overflow:hidden;}
.bar-fill{background:linear-gradient(90deg, var(--gold), var(--gold-light)); height:100%; border-radius:6px; transition:width 1s var(--ease); width:0;}
.lowstock-row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid rgba(21,16,13,0.06); font-size:13.5px;}

.inv-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:12px;}
.inv-list{display:flex; flex-direction:column; gap:10px;}
.inv-row{
  background:var(--ivory-card); border:1px solid var(--line); border-radius:14px; padding:13px 16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; transition:box-shadow .25s ease, transform .2s ease;
}
.inv-row:hover{box-shadow:var(--shadow-sm); transform:translateY(-1px);}
.inv-thumb{width:54px; height:54px; border-radius:10px; object-fit:cover; background:var(--ivory-dim); flex-shrink:0;}
.inv-main{flex:1; min-width:160px;}
.inv-main .nm{font-weight:700; font-size:14.5px; font-family:'Fraunces',serif;}
.inv-main .meta{font-size:12px; color:var(--gold-deep); opacity:0.85; font-family:'IBM Plex Mono',monospace;}
.stepper{display:flex; align-items:center; gap:8px; background:var(--ivory-dim); border-radius:9px; padding:4px 8px;}
.stepper button{width:25px; height:25px; border-radius:7px; border:none; background:var(--ivory-card); font-size:14px; transition:background .2s ease;}
.stepper button:hover{background:var(--gold-light);}
.stepper .n{font-family:'IBM Plex Mono',monospace; font-weight:700; min-width:22px; text-align:center;}
.icon-only{background:none; border:none; color:var(--gold-deep); padding:7px; border-radius:8px; transition:background .2s ease, color .2s ease;}
.icon-only:hover{background:rgba(185,146,79,0.12);}
.icon-only.danger:hover{color:var(--out); background:rgba(140,58,52,0.1);}

.order-row{background:var(--ivory-card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-bottom:10px; transition:box-shadow .25s ease;}
.order-row:hover{box-shadow:var(--shadow-sm);}
.order-top{display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; flex-wrap:wrap; gap:6px;}
.order-top .oid{font-family:'IBM Plex Mono',monospace; color:var(--gold-deep); font-weight:700;}
.order-items{font-size:12.5px; color:var(--ink); opacity:0.7;}

.pill-status{padding:4px 10px; border-radius:20px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; font-family:'IBM Plex Mono',monospace;}

@media(max-width:640px){
  .admin-tabs{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .row2{grid-template-columns:1fr;}
}