/* BOKAKO Street Heat - product lanes shared styles (black/gold/red poster look) */
:root{--red:#E8242A;--red-deep:#a5121a;--gold:#FFC831;--gold-deep:#C9A227;--black:#111010;--ink:#1a1816;--cream:#FFF6E5;--muted:#b9ab93;--panel:#221f1b}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--black);color:var(--cream);font-family:'Manrope',sans-serif;line-height:1.6;overflow-x:hidden}
.anton{font-family:'Anton',sans-serif;letter-spacing:.01em}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.demo-bar{position:sticky;top:0;z-index:60;background:var(--gold);color:#231a02;text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:7px 12px;font-weight:800}
.topnav{position:sticky;top:29px;z-index:59;background:rgba(17,16,16,.94);border-bottom:2px solid #000;padding:10px 0}
.topnav .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px}
.backlink{display:inline-flex;align-items:center;gap:8px;color:var(--cream);text-decoration:none;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;background:var(--panel);border:2px solid #000;border-radius:8px;padding:8px 13px;box-shadow:3px 3px 0 #000}
.backlink:hover{color:var(--gold)}
.laneswitch{display:flex;gap:6px}
.laneswitch a{width:34px;height:34px;border-radius:50%;border:2px solid #000;box-shadow:2px 2px 0 #000;background:var(--panel);color:var(--muted);text-decoration:none;font-family:'Anton',sans-serif;font-size:14px;display:flex;align-items:center;justify-content:center}
.laneswitch a.on{background:var(--red);color:#fff}
.laneswitch a:hover{border-color:var(--gold)}

/* hero */
.phero{padding:44px 0 60px;text-align:center;position:relative;
  background-image:radial-gradient(rgba(255,200,49,.13) 1.6px, transparent 1.7px);background-size:22px 22px}
.lane-num{display:inline-block;background:var(--red);color:#fff;font-family:'Anton',sans-serif;font-size:13px;letter-spacing:.22em;text-transform:uppercase;padding:7px 16px;border-radius:8px;transform:rotate(-2deg);box-shadow:4px 4px 0 #000;border:2px solid #000}
.phero h1{font-family:'Anton',sans-serif;font-size:clamp(32px,8.5vw,62px);line-height:1.02;text-transform:uppercase;margin-top:18px}
.phero h1 .gd{color:var(--gold)}.phero h1 .rd{color:var(--red)}
.brush{font-family:'Caveat',cursive;color:var(--gold);font-size:clamp(26px,6vw,36px);display:inline-block;transform:rotate(-2deg);margin-top:8px}
.brush-stroke{display:inline-block;background:var(--gold);color:#231a02;font-family:'Anton',sans-serif;text-transform:uppercase;padding:10px 22px;transform:rotate(-1.4deg);border:2px solid #000;box-shadow:5px 5px 0 #000;font-size:clamp(17px,4.6vw,26px);letter-spacing:.04em;margin-top:16px}
.polaroid{background:var(--cream);border:2px solid #000;box-shadow:8px 8px 0 #000;padding:10px 10px 14px;position:relative;width:min(330px,86%);margin:38px auto 0}
.polaroid img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border:2px solid #000}
.polaroid .cap{font-family:'Caveat',cursive;font-size:22px;color:#231a02;line-height:1.1;margin-top:8px}
.polaroid .tape{position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-3deg);width:96px;height:28px;background:rgba(255,200,49,.9);box-shadow:2px 2px 0 rgba(0,0,0,.65);z-index:3}
.polaroid.tilt-l{transform:rotate(-2.2deg)}
.polaroid.tilt-r{transform:rotate(2deg)}
.phero .sub{max-width:540px;margin:26px auto 0;color:var(--muted);font-size:15.5px}

section{padding:56px 0;border-top:2px solid #000;background:var(--ink)}
section:nth-of-type(even){background:var(--black)}
.kick{display:inline-block;background:var(--gold);color:#231a02;font-family:'Anton',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:6px 14px;border-radius:6px;transform:rotate(-1.5deg);margin-bottom:16px}
h2{font-family:'Anton',sans-serif;font-size:clamp(28px,7vw,48px);line-height:1;text-transform:uppercase;margin-bottom:12px}
h2 .rd{color:var(--red)}h2 .gd{color:var(--gold)}
.lede{color:var(--muted);max-width:600px;font-size:15px}

.checklist{list-style:none;margin-top:26px;display:grid;gap:12px}
.checklist li{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:2px solid #000;border-radius:12px;padding:15px 16px;box-shadow:4px 4px 0 #000;font-size:14.5px}
.checklist li:nth-child(odd){transform:rotate(-.5deg)}
.checklist li:nth-child(even){transform:rotate(.5deg)}
.tick{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--gold);border:2px solid #000;display:flex;align-items:center;justify-content:center;margin-top:1px}
.tick svg{width:12px;height:12px;stroke:#231a02;stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.checklist b{color:var(--gold)}
.checklist .tbc{display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:#3a3325;color:var(--gold);border-radius:5px;padding:2px 7px;margin-left:6px;vertical-align:middle;font-weight:800}

.notecard{margin-top:30px;background:#2c2410;border:2px dashed var(--gold-deep);border-radius:14px;padding:18px 20px;font-size:13px;color:var(--cream);line-height:1.7}
.notecard b{color:var(--gold)}
.notecard .brushline{font-family:'Caveat',cursive;font-size:21px;color:var(--gold);display:block;margin-top:6px}

/* forms */
.formcard{max-width:620px;margin:30px auto 0;background:var(--panel);border:2px solid #000;border-radius:18px;box-shadow:7px 7px 0 #000;padding:26px 22px}
.formcard form{display:grid;gap:14px;margin-top:16px}
.formcard label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:800;display:block;margin-bottom:6px}
.formcard input[type=text],.formcard input[type=email],.formcard input[type=tel],.formcard textarea,.formcard select{width:100%;background:#161412;border:2px solid #000;border-radius:10px;color:var(--cream);padding:14px 16px;font-family:'Manrope',sans-serif;font-size:15px}
.formcard input:disabled,.formcard textarea:disabled,.formcard select:disabled{opacity:.55;cursor:not-allowed}
.formcard textarea{min-height:110px;resize:vertical}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--muted)}
.consent input{width:auto;margin-top:3px}
.btn{justify-self:start;background:var(--gold);color:#231a02;border:2px solid #000;border-radius:10px;padding:15px 32px;font-family:'Anton',sans-serif;font-size:14px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;box-shadow:5px 5px 0 #000;text-decoration:none;display:inline-block}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.red{background:var(--red);color:#fff}
.btn.ghost{background:var(--panel);color:var(--cream)}
.form-note{font-size:12px;color:var(--red);font-weight:700}

/* option picker widgets */
.picker{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.opt{border:2px solid #000;background:var(--panel);color:var(--cream);border-radius:999px;padding:12px 20px;font-family:'Manrope',sans-serif;font-weight:700;font-size:13.5px;cursor:pointer;box-shadow:3px 3px 0 #000}
.opt.sel{background:var(--gold);color:#231a02}
.opt:hover{border-color:var(--gold)}
.resultcard{margin-top:22px;background:var(--red);border:2px solid #000;border-radius:16px;box-shadow:6px 6px 0 #000;padding:24px 22px;color:#fff;display:none}
.resultcard.show{display:block}
.resultcard h3{font-family:'Anton',sans-serif;font-size:26px;text-transform:uppercase}
.resultcard h3 span{color:var(--gold)}
.resultcard p{margin-top:8px;font-size:14px;color:#ffe3d9}
.resultcard .brushline{font-family:'Caveat',cursive;color:var(--gold);font-size:21px;display:block;margin-top:8px}

/* week accordion */
.weeks{margin-top:26px;display:grid;gap:10px}
.week{border:2px solid #000;border-radius:12px;background:var(--panel);box-shadow:4px 4px 0 #000;overflow:hidden}
.week button{width:100%;background:none;border:0;color:var(--cream);display:flex;align-items:center;gap:14px;padding:16px;text-align:left;cursor:pointer;font-family:'Manrope',sans-serif}
.week .wknum{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--red);border:2px solid #000;color:#fff;font-family:'Anton',sans-serif;font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:2px 2px 0 #000}
.week .wktitle{font-weight:800;font-size:15px;flex:1}
.week .wktoggle{color:var(--gold);font-family:'Anton',sans-serif;font-size:20px}
.week .wkbody{display:none;padding:0 16px 16px 70px;font-size:13.5px;color:var(--muted)}
.week.open .wkbody{display:block}
.week.open .wktoggle{transform:rotate(45deg)}

/* merch store */
.shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin-top:30px}
.item{background:var(--panel);border:2px solid #000;border-radius:16px;box-shadow:6px 6px 0 #000;padding:14px;text-align:center;position:relative}
.item:nth-child(odd){transform:rotate(-1deg)}
.item:nth-child(even){transform:rotate(1deg)}
.mock{aspect-ratio:1/1;border:2px solid #000;border-radius:12px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.mock svg{width:72%;height:auto;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.4))}
.mock .concept-ribbon{position:absolute;top:10px;left:-30px;background:var(--red);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:4px 34px;transform:rotate(-32deg)}
.item h4{font-family:'Anton',sans-serif;font-size:19px;text-transform:uppercase;margin-top:12px}
.item .iprice{font-size:12px;color:var(--gold);font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.item .idesc{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}
.item .addbtn{margin-top:12px;width:100%;background:var(--gold);color:#231a02;border:2px solid #000;border-radius:9px;padding:11px;font-family:'Anton',sans-serif;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:3px 3px 0 #000}
.item .addbtn:hover{background:var(--red);color:#fff}
.cartbar{position:sticky;bottom:14px;z-index:55;margin-top:34px}
.cartbtn{width:100%;background:var(--red);color:#fff;border:2px solid #000;border-radius:14px;box-shadow:5px 5px 0 #000;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;font-family:'Anton',sans-serif;font-size:15px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.cartbtn .count{background:var(--gold);color:#231a02;border-radius:999px;border:2px solid #000;padding:2px 12px;font-size:14px}
.cartpanel{display:none;margin-top:14px;background:var(--panel);border:2px solid #000;border-radius:14px;box-shadow:6px 6px 0 #000;padding:20px}
.cartpanel.show{display:block}
.crow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dashed #3a3325}
.crow:last-of-type{border-bottom:0}
.crow .cname{flex:1;font-weight:800;font-size:14px}
.crow .cprice{font-size:11px;color:var(--gold);display:block;font-weight:700}
.qty{display:flex;align-items:center;gap:8px}
.qty button{width:30px;height:30px;border-radius:8px;border:2px solid #000;background:var(--gold);color:#231a02;font-family:'Anton',sans-serif;font-size:16px;cursor:pointer;box-shadow:2px 2px 0 #000}
.qty span{min-width:22px;text-align:center;font-weight:800}
.cremove{background:none;border:0;color:var(--red);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;cursor:pointer;margin-top:4px}
.cartempty{text-align:center;color:var(--muted);font-size:14px;padding:14px 0}
.carttotal{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:2px solid #000;font-family:'Anton',sans-serif;font-size:16px;text-transform:uppercase}
.carttotal span{color:var(--gold)}

/* kit builder */
.kitgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:26px}
.kit-item{background:var(--panel);border:2px solid #000;border-radius:14px;box-shadow:4px 4px 0 #000;padding:18px 14px;text-align:center;cursor:pointer;transition:transform .15s}
.kit-item:hover{transform:translateY(-3px)}
.kit-item .kicon svg{width:44px;height:44px;stroke:var(--gold);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.kit-item .kname{font-weight:800;font-size:13px;margin-top:10px}
.kit-item .kstate{margin-top:8px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--muted)}
.kit-item.sel{outline:3px solid var(--gold)}
.kit-item.sel .kstate{color:var(--gold)}
.kit-item.sel .kicon svg{stroke:#231a02}
.kitsummary li.kempty:before{display:none}
.kitsummary{margin-top:24px;background:var(--gold);color:#231a02;border:2px solid #000;border-radius:14px;box-shadow:6px 6px 0 #000;padding:20px}
.kitsummary h3{font-family:'Anton',sans-serif;font-size:20px;text-transform:uppercase}
.kitsummary ul{list-style:none;margin-top:10px;font-size:14px;font-weight:700}
.kitsummary li{padding:4px 0 4px 22px;position:relative}
.kitsummary li:before{content:"";position:absolute;left:0;top:11px;width:10px;height:10px;background:var(--red);border:2px solid #000;border-radius:50%}
.kitsummary .kempty{font-weight:600;font-size:13.5px}

/* Thabo game */
.game{max-width:460px;margin:30px auto 0;background:var(--panel);border:2px solid #000;border-radius:20px;box-shadow:8px 8px 0 #000;padding:24px 18px 28px;text-align:center}
.game .hud{display:flex;justify-content:space-between;font-family:'Anton',sans-serif;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.movepad{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.move{border:2px solid #000;border-radius:16px;padding:26px 10px 18px;cursor:pointer;box-shadow:4px 4px 0 #000;transition:transform .1s;user-select:none;-webkit-user-select:none;background:#161412;color:var(--cream)}
.move .micon svg{width:46px;height:46px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;display:inline-block}
.move .mname{font-family:'Anton',sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-top:10px;display:block}
.move:active{transform:scale(.95)}
.move.lit{transform:scale(1.05);box-shadow:0 0 0 3px var(--gold),5px 5px 0 #000}
.move.m0.lit{background:var(--red);color:#fff}
.move.m1.lit{background:var(--gold);color:#231a02}
.move.m2.lit{background:#2e8fd4;color:#fff}
.move.m3.lit{background:#3d9e4d;color:#fff}
.game .gmsg{margin-top:20px;font-family:'Caveat',cursive;font-size:24px;color:var(--gold);min-height:34px}
.game .gstart{margin-top:6px}
.gamenote{margin-top:16px;font-size:11.5px;color:var(--muted)}

footer{padding:48px 0 60px;background:#0c0b0a;border-top:2px solid #000;color:#8b7f68;font-size:12.5px;line-height:1.9;text-align:center}
footer .foot-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px}
footer .foot-brand .markchip{width:46px;height:46px;background:var(--cream);border:2px solid #000;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;transform:rotate(-3deg)}
footer .foot-brand .markchip img{width:38px;height:38px;object-fit:contain}
footer b{color:var(--cream);font-family:'Anton',sans-serif;letter-spacing:.08em;font-size:16px}
footer a{color:var(--gold);text-decoration:none}
footer .fnote{max-width:620px;margin:14px auto 0}
@media(max-width:640px){
  .topnav{top:26px}
  .laneswitch a{width:30px;height:30px;font-size:12px}
}