/* Bushido Team Stores — shared shell.
   Per-team accent is injected at runtime as --gold. */

:root{
  --sumi:#0E0E0E; --ink:#141414; --carbon:#1B1B1B;
  --bone:#F4F1EA; --fog:#8E897C;
  --gold:#B4A26A;
  --rule:rgba(244,241,234,.12); --rule-strong:rgba(244,241,234,.24);
  --f-display:"Cinzel",Georgia,serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --shell:1240px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--sumi);color:var(--bone);
  font-family:var(--f-body);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
a{color:inherit}

.wrap{max-width:var(--shell);margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.display{font-family:var(--f-display);letter-spacing:.06em;text-transform:uppercase}
.eyebrow{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--fog)}
.muted{color:var(--fog)}

/* ---------- top bar ---------- */
.topbar{
  border-bottom:1px solid var(--rule);background:var(--ink);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
.topbar__in{display:flex;gap:16px;align-items:center;justify-content:center;
  padding:11px 0;text-align:center;color:var(--fog);flex-wrap:wrap}
.topbar strong{color:var(--gold);font-weight:600}

/* ---------- hero ---------- */
.hero{border-bottom:1px solid var(--rule);padding:clamp(34px,6vw,60px) 0 0}
.hero__top{display:flex;align-items:center;gap:22px;justify-content:space-between;flex-wrap:wrap}
.teamid{display:flex;align-items:center;gap:18px;min-width:0}
.crest{
  width:66px;height:66px;flex:0 0 auto;border:1px solid var(--gold);border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(70% 70% at 50% 40%,rgba(180,162,106,.18),transparent 70%);
}
.crest img{width:100%;height:100%;object-fit:cover}
.crest span{font-family:var(--f-display);font-size:22px;color:var(--gold)}
.teamid h1{font-size:clamp(27px,4.4vw,46px);line-height:1.05;margin:0}
.teamid p{font-size:12.5px;color:var(--fog);margin-top:7px;letter-spacing:.05em}

.sharebtn{
  border:1px solid var(--rule-strong);background:transparent;color:var(--bone);
  padding:12px 18px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  white-space:nowrap;transition:.18s;
}
.sharebtn:hover{border-color:var(--gold);color:var(--gold)}

.deadline{
  margin-top:26px;background:var(--carbon);border:1px solid var(--rule);
  border-left:3px solid var(--gold);padding:15px 20px;
  display:flex;gap:clamp(18px,4vw,40px);flex-wrap:wrap;align-items:center;
}
.deadline__i{display:flex;flex-direction:column;gap:3px}
.deadline__i span{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--fog)}
.deadline__i strong{font-family:var(--f-display);font-size:14.5px;color:var(--gold);letter-spacing:.05em}
.deadline--closed{border-left-color:#B4453C}
.deadline--closed .deadline__i strong{color:#E07A70}

.intro{margin:22px 0 0;max-width:74ch;font-size:14px;color:var(--fog);padding-bottom:26px}

/* ---------- ordering-for bar ---------- */
.orderfor{background:var(--ink);border-bottom:1px solid var(--rule);padding:18px 0}
.orderfor__in{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:7px;min-width:230px;flex:1}
.field label{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--fog)}
.field input,.field select{
  background:var(--sumi);border:1px solid var(--rule-strong);color:var(--bone);
  padding:11px 12px;font-size:14px;font-family:var(--f-body);outline:none;border-radius:0;
}
.field input:focus,.field select:focus{border-color:var(--gold)}
.field input::placeholder{color:#5C5850}

/* ---------- layout ---------- */
.grid{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);
  gap:clamp(26px,4vw,60px);padding:clamp(32px,5vw,60px) 0 110px;align-items:start;
}
@media(max-width:900px){.grid{grid-template-columns:1fr}}

.catgroup{margin-bottom:48px}
.catgroup:last-child{margin-bottom:0}
.cathead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  border-bottom:1px solid var(--rule);padding-bottom:12px}
.cathead h2{font-size:clamp(18px,2.2vw,24px)}
.cathead span{font-size:11.5px;color:var(--fog)}

/* ---------- item ---------- */
.item{display:grid;grid-template-columns:104px minmax(0,1fr);gap:20px;
  padding:24px 0;border-bottom:1px solid var(--rule)}
@media(max-width:560px){.item{grid-template-columns:72px minmax(0,1fr);gap:14px}}
.item__media{
  border:1px solid var(--rule);aspect-ratio:1;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(60% 70% at 50% 60%,rgba(180,162,106,.09),transparent 70%);
}
.item__media img{width:100%;height:100%;object-fit:cover}
.item__media .ph{font-family:var(--f-display);font-size:11px;color:var(--fog);letter-spacing:.1em}
.item__head{display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap}
.item__name{font-family:var(--f-display);font-size:16px;letter-spacing:.07em;text-transform:uppercase}
.item__price{font-family:var(--f-display);font-size:16px;color:var(--gold);white-space:nowrap}
.item__desc{font-size:12.5px;color:var(--fog);margin:5px 0 14px;max-width:52ch}
.item__ctl{display:flex;gap:11px;flex-wrap:wrap;align-items:flex-end}
.mini{display:flex;flex-direction:column;gap:5px}
.mini label{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--fog)}
.mini input,.mini select{
  background:var(--sumi);border:1px solid var(--rule-strong);color:var(--bone);
  padding:9px 10px;font-size:13px;font-family:var(--f-body);outline:none;min-width:108px;border-radius:0;
}
.mini.qty input{min-width:62px;text-align:center}
.mini.num input{min-width:74px;text-align:center}
.mini input:focus,.mini select:focus{border-color:var(--gold)}
.mini input:invalid{border-color:#B4453C}
.addbtn{
  border:1px solid var(--gold);background:transparent;color:var(--bone);
  padding:10px 20px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;transition:.18s;
}
.addbtn:hover:not(:disabled){background:var(--gold);color:var(--sumi)}
.addbtn:disabled{opacity:.4;cursor:not-allowed}
.addbtn.ok{background:var(--gold);color:var(--sumi)}
.item__actions{flex-basis:100%;margin-top:2px}
.feeline{font-size:11px;color:var(--fog);margin-top:4px}

/* ---------- order panel ---------- */
.panel{
  background:var(--carbon);border:1px solid var(--rule);
  padding:clamp(20px,3vw,28px);position:sticky;top:22px;
}
@media(max-width:900px){.panel{position:static}}
.panel h3{font-family:var(--f-display);font-size:18px;letter-spacing:.1em;text-transform:uppercase}
.panel__sub{font-size:11.5px;color:var(--fog);margin:4px 0 16px}
.empty{font-size:12.5px;color:var(--fog);text-align:center;padding:30px 12px;
  border:1px dashed var(--rule-strong)}
.line{display:flex;gap:12px;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--rule)}
.line__n{font-size:13px;line-height:1.4}
.line__m{font-size:11px;color:var(--fog);margin-top:3px}
.line__r{text-align:right;white-space:nowrap}
.line__p{font-size:13px}
.rm{background:none;border:0;color:var(--fog);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 0 0;text-decoration:underline;text-underline-offset:3px}
.rm:hover{color:#E07A70}
.totals{margin-top:16px;font-size:13px}
.totals div{display:flex;justify-content:space-between;padding:5px 0}
.totals .grand{border-top:1px solid var(--rule-strong);margin-top:9px;padding-top:12px;
  font-family:var(--f-display);font-size:17px;color:var(--gold)}
.checkout{
  width:100%;margin-top:18px;border:0;background:var(--gold);color:var(--sumi);
  padding:15px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;transition:.18s;
}
.checkout:hover:not(:disabled){filter:brightness(1.1)}
.checkout:disabled{opacity:.45;cursor:not-allowed}
.panel__note{font-size:10.5px;color:var(--fog);margin-top:12px;line-height:1.5}
.err{background:rgba(180,69,60,.14);border:1px solid #B4453C;color:#E9A59E;
  padding:11px 13px;font-size:12.5px;margin-top:13px}

/* ---------- closed / error states ---------- */
.state{max-width:640px;margin:0 auto;padding:clamp(60px,12vw,130px) 24px;text-align:center}
.state h1{font-family:var(--f-display);font-size:clamp(24px,4vw,36px);letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:14px}
.state p{color:var(--fog);font-size:14.5px}

.foot{border-top:1px solid var(--rule);padding:26px 0;text-align:center;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fog)}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--gold);color:var(--sumi);padding:12px 22px;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:600;z-index:50;
  max-width:calc(100vw - 32px);text-align:center;
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s;
}
.toast.show{opacity:1;visibility:visible}