:root{
  --bg:#f5f2ea; --panel:#ffffff; --card:#ffffff; --ink:#111111; --muted:#6f6c64;
  --line:#e2ded2; --line-soft:#eae7dd; --pill:#111111; --pill-ink:#ffffff;
  --green:#5a9e34; --okbg:#e4f0db; --ok:#3e7d24; --lowbg:#f7e8d8; --low:#c05a0e;
  --outbg:#f0dfdc; --out:#8a3b32; --mtobg:#ddebea; --mto:#005b5b;
  --accent:#5a9e34;
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{font-family:"Helvetica Neue",Arial,sans-serif; background:var(--bg); color:var(--ink); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
.hvy{font-weight:900; text-transform:uppercase; letter-spacing:-.01em;}
.eyebrow{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--green); font-weight:700;}

/* header — black bar, Outdoor Brands style */
.hdr{display:flex; align-items:center; justify-content:space-between; padding:16px 34px; background:#080808; color:#fff; position:sticky; top:0; z-index:50;}
.hdr .mark{font-weight:900; letter-spacing:.08em; font-size:16px; text-transform:uppercase; font-style:italic;}
.hdr .mark img{height:30px; display:block;}
.hdr .mark em{font-style:italic; color:var(--green); letter-spacing:.2em; font-size:9px; display:block; margin-top:3px; font-weight:700;}
.hdr nav{display:flex; align-items:center; gap:22px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;}
.hdr nav a{color:#b9b6ad; padding:6px 2px;}
.hdr nav a:hover, .hdr nav a.on{color:#fff; border-bottom:2px solid var(--green);}
.cartlink{border:1px solid #fff; padding:7px 16px !important; color:#fff !important; border-bottom:1px solid #fff !important;}
.badge-demo{position:fixed; bottom:14px; right:16px; z-index:99; background:var(--green); color:#fff; font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:6px 12px; border-radius:999px; font-weight:700;}

.wrap{max-width:1160px; margin:0 auto; padding:38px 34px 90px;}
h1.pg{font-size:38px; font-weight:900; text-transform:uppercase; margin:6px 0 8px; letter-spacing:-.01em;}
p.sub{color:var(--muted); max-width:560px; margin:0 0 30px;}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:8px; background:var(--pill); color:var(--pill-ink); border:none; padding:13px 26px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; cursor:pointer;}
.btn:hover{background:#2c2c2c;}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--ink);}
.btn.sm{padding:8px 16px; font-size:11px;}
.btn:disabled{opacity:.4; cursor:not-allowed;}

/* login */
.login-shell{min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr;}
.login-left{background:#0a0a0a; color:#f5f2ea; padding:60px; display:flex; flex-direction:column; justify-content:space-between;}
.login-left .mark{font-weight:900; font-style:italic; letter-spacing:.06em; font-size:20px; text-transform:uppercase;}
.login-left .mark em{display:block; color:var(--green); font-size:10px; letter-spacing:.28em; font-weight:700; margin-top:2px;}
.login-left h2{font-weight:900; text-transform:uppercase; font-size:56px; line-height:1.02; max-width:440px; letter-spacing:-.01em;}
.login-left h2 span{color:var(--green);}
.login-left .foot{font-size:12px; color:#8f8c83; letter-spacing:.06em;}
.login-right{display:flex; align-items:center; justify-content:center; padding:40px;}
.login-card{width:100%; max-width:400px;}
.login-card h1{font-weight:900; text-transform:uppercase; font-size:26px; margin:8px 0 24px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:6px;}
.field input, .field select, .field textarea{width:100%; padding:12px 14px; border:1px solid var(--line); background:#fff; font-size:14px; font-family:inherit; color:var(--ink);}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--green); outline-offset:0;}
.quick{border-top:1px solid var(--line); margin-top:26px; padding-top:20px;}
.quick .eyebrow{margin-bottom:12px; display:block;}
.quick button{display:block; width:100%; text-align:left; background:#fff; border:1px solid var(--line); padding:12px 16px; margin-bottom:10px; cursor:pointer; font-family:inherit; font-size:13px;}
.quick button:hover{border-color:var(--green);}
.quick b{display:block; font-size:13px;}
.quick span{color:var(--muted); font-size:12px;}

/* brand tiles — shop by brand strip */
.tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:10px;}
.tile{padding:34px 30px 28px; min-height:190px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; position:relative; overflow:hidden; cursor:pointer; transition:transform .15s ease;}
.tile:hover{transform:translateY(-3px);}
.tile .bmark{font-weight:900; text-transform:uppercase; font-style:italic; font-size:26px; letter-spacing:.01em;}
.tile .blogo{align-self:flex-start; max-width:75%; object-fit:contain;}
.tile .bsub{font-size:11px; letter-spacing:.18em; text-transform:uppercase; opacity:.8; margin-top:6px; font-weight:700;}
.tile .cnt{position:absolute; top:22px; right:24px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; border:1px solid rgba(255,255,255,.45); padding:5px 12px; opacity:.95; font-weight:700;}
.tile .go{margin-top:10px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--green);}
.tile.lightgo .go{color:#fff;}

/* brand page */
.brandhero{padding:44px 40px; color:#fff; margin-bottom:26px;}
.brandhero h1{font-weight:900; text-transform:uppercase; font-style:italic; font-size:34px; margin:4px 0 6px;}
.brandhero p{opacity:.85; margin:0; max-width:520px; font-size:14px;}
.toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:24px;}
.chip{border:1px solid var(--line); background:#fff; padding:8px 18px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--muted); cursor:pointer;}
.chip.on{background:var(--pill); color:var(--pill-ink); border-color:var(--pill);}
.toolbar .search{margin-left:auto;}
.toolbar .search input{padding:9px 16px; border:1px solid var(--line); background:#fff; font-size:13px; width:210px;}

.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.pcard{background:#fff; border:1px solid var(--line-soft); overflow:hidden; cursor:pointer; transition:transform .15s ease; display:flex; flex-direction:column;}
.pcard:hover{transform:translateY(-3px); box-shadow:0 8px 24px rgba(20,20,10,.07);}
.pimg{height:180px; display:flex; align-items:center; justify-content:center; font-size:44px; background:#fff; border-bottom:1px solid var(--line-soft); padding:14px;}
.pimg img{max-width:100%; max-height:100%; object-fit:contain;}
.pbody{padding:14px 16px 16px; display:flex; flex-direction:column; flex:1;}
.pbody h3{margin:0 0 8px; font-weight:700; font-size:15px; line-height:1.3;}
.pbody .cat{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:3px;}
.prow{display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:10px; border-top:1px solid var(--line-soft);}
.val{font-size:13px; font-weight:700;}
.val small{display:block; font-size:9.5px; color:var(--muted); font-weight:700; letter-spacing:.08em; text-transform:uppercase;}
.stock{font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:800; padding:4px 9px;}
.stock.ok{background:var(--okbg); color:var(--ok);}
.stock.low{background:var(--lowbg); color:var(--low);}
.stock.out{background:var(--outbg); color:var(--out);}
.stock.mto{background:var(--mtobg); color:var(--mto);}

/* modal */
.overlay{position:fixed; inset:0; background:rgba(10,10,8,.5); display:none; align-items:center; justify-content:center; z-index:100; padding:24px;}
.overlay.open{display:flex;}
.modal{background:var(--bg); width:100%; max-width:680px; max-height:88vh; overflow:auto; padding:34px 36px;}
.modal .close{float:right; background:none; border:none; font-size:22px; cursor:pointer; color:var(--muted);}
.modal h2{font-weight:900; text-transform:uppercase; font-size:22px; margin:2px 0 4px;}
.modal .mimg{height:220px; background:#fff; border:1px solid var(--line-soft); display:flex; align-items:center; justify-content:center; font-size:54px; margin-bottom:16px; padding:14px;}
.modal .mimg img{max-width:100%; max-height:100%; object-fit:contain;}
.modal .desc{color:var(--muted); font-size:14px; margin:10px 0 18px;}
.sizes{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin:10px 0 6px;}
.sizes .s label{display:block; text-align:center; font-size:11px; letter-spacing:.1em; font-weight:800; margin-bottom:4px;}
.sizes .s input{width:100%; text-align:center; padding:9px 4px; border:1px solid var(--line); background:#fff;}
.qtyrow{display:flex; align-items:center; gap:14px; margin:12px 0;}
.qtyrow input{width:90px; padding:10px; border:1px solid var(--line); text-align:center; background:#fff;}
.meta-l{display:flex; flex-wrap:wrap; gap:8px 22px; font-size:12.5px; color:var(--muted); margin:6px 0 14px; align-items:center;}
.meta-l b{color:var(--ink);}
.modal .actions{display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding-top:18px; margin-top:14px;}

/* cart / checkout */
.cartgrid{display:grid; grid-template-columns:1.5fr 1fr; gap:30px; align-items:start;}
.cline{display:flex; gap:16px; background:#fff; border:1px solid var(--line-soft); padding:14px 16px; margin-bottom:12px; align-items:center;}
.cline .thumb{width:64px; height:64px; display:flex; align-items:center; justify-content:center; font-size:26px; flex:none; background:#fff; border:1px solid var(--line-soft); padding:4px;}
.cline .thumb img{max-width:100%; max-height:100%; object-fit:contain;}
.cline .inf{flex:1;}
.cline .inf b{font-size:14px;}
.cline .inf .d{font-size:12px; color:var(--muted);}
.cline .rm{background:none; border:none; color:var(--muted); cursor:pointer; font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;}
.cline .rm:hover{color:var(--out);}
.panelbox{background:#fff; border:1px solid var(--line-soft); padding:24px 26px; margin-bottom:18px;}
.panelbox h3{margin:0 0 14px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--green); font-weight:800;}
.sumrow{display:flex; justify-content:space-between; font-size:14px; padding:6px 0;}
.sumrow.total{border-top:2px solid var(--ink); margin-top:8px; padding-top:12px; font-weight:800; font-size:16px;}
.brandgroup{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:800; margin:18px 0 10px;}

/* orders */
.order{background:#fff; border:1px solid var(--line-soft); padding:22px 26px; margin-bottom:16px;}
.order .top{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;}
.order .num{font-weight:900; font-size:17px;}
.order .d{color:var(--muted); font-size:13px;}
.opill{font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; padding:5px 12px; background:var(--okbg); color:var(--ok);}
.order ul{margin:12px 0 0; padding-left:18px; font-size:13.5px; color:#4c4a43;}

/* admin */
.tabs{display:flex; gap:8px; margin-bottom:24px;}
table.adm{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line-soft); overflow:hidden; font-size:13.5px;}
table.adm th{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); text-align:left; padding:12px 14px; border-bottom:2px solid var(--ink);}
table.adm td{padding:12px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle;}
table.adm select, table.adm input{padding:7px 10px; border:1px solid var(--line); background:#fff; font-size:12.5px; font-family:inherit;}
.adj{display:inline-flex; gap:6px; align-items:center;}
.adj button{width:26px; height:26px; border:1px solid var(--line); background:#fff; cursor:pointer; font-weight:700;}
.audit{font-size:13px; background:#fff; border:1px solid var(--line-soft); padding:6px 0;}
.audit .a{padding:10px 18px; border-bottom:1px solid var(--line-soft); display:flex; gap:14px;}
.audit .a:last-child{border-bottom:none;}
.audit .t{color:var(--muted); font-size:12px; white-space:nowrap;}
.alertbar{background:var(--lowbg); border:1px solid #ecd3b4; color:#7a4a12; padding:14px 20px; font-size:13.5px; margin-bottom:20px;}

.empty{text-align:center; color:var(--muted); padding:70px 0;}
.empty .big{font-size:40px;}

@media (max-width:900px){
  .login-shell{grid-template-columns:1fr;}
  .login-left{display:none;}
  .tiles{grid-template-columns:1fr;}
  .grid{grid-template-columns:repeat(2,1fr);}
  .cartgrid{grid-template-columns:1fr;}
  .wrap{padding:26px 18px 80px;}
  .hdr{padding:14px 18px;}
  .hdr nav{gap:12px;}
}
@media (max-width:560px){ .grid{grid-template-columns:1fr;} .sizes{grid-template-columns:repeat(3,1fr);} }