/* Anpassning till nya tullfrittsoder.se (okt 2026): kolsvart, röd #ff4a2b, cream #f3eadb, tejp- och prislappsdetaljer, kantiga knappar. */
body{background:var(--bg)}
.app{background:var(--bg)}
.btn{border-radius:4px;font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;font-size:20px;font-weight:700}
.btn-red{background:var(--red);color:var(--ink);box-shadow:none}
.btn-cream{background:var(--cream);color:var(--ink)}
.btn-ghost{background:transparent;border:2px solid var(--line-2)}
.tape{display:inline-block;background:var(--tape);color:var(--ink);font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;line-height:1;padding:8px 16px 7px;transform:rotate(-3deg);box-shadow:0 6px 18px #00000059;clip-path:polygon(0 8%,3% 0,6% 9%,9% 1%,13% 7%,100% 0,97% 30%,100% 55%,98% 80%,100% 100%,92% 94%,88% 100%,0 100%,2% 70%,0 45%,3% 22%)}
.ptag{display:inline-flex;align-items:baseline;gap:2px;background:var(--cream);color:var(--ink);font-family:var(--display);font-weight:700;font-size:22px;line-height:1;padding:7px 10px 6px;border-radius:3px;outline:2px dashed #0e0d0c8c;outline-offset:-5px;transform:rotate(-3deg);box-shadow:0 4px 14px #0006;white-space:nowrap}
.ptag small{font-size:.58em;text-transform:uppercase;letter-spacing:.04em}
.ptag .from{font-family:var(--body);font-size:11px;font-weight:600;text-transform:lowercase;margin-right:3px;align-self:center}
.kick{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.kick::before{content:"";width:28px;height:3px;background:var(--red)}
.dot{color:var(--red)}
.hl{color:var(--red)}

/* topbar */
.topbar{background:#0e0d0cf2;border-bottom:1px solid var(--line)}
.logo{font-size:24px}
.status{border-radius:999px;border:2px solid var(--line-2);background:transparent;font-size:12.5px}
.iconbtn{border-radius:4px;background:transparent;border:2px solid var(--line-2)}

/* hero */
.hero2{position:relative;margin:0;padding:0 16px}
.hero2 .media{position:relative;margin:0 -16px;height:250px;overflow:hidden;background:#10110e}
.hero2 .media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero2 .media::after{content:"";position:absolute;inset:auto 0 0;height:60px;background:linear-gradient(transparent,var(--bg))}
.hero2 .tape{position:absolute;top:16px;left:16px;font-size:20px;z-index:2}
.roundel{position:absolute;right:14px;bottom:8px;z-index:2;width:118px;height:118px;border-radius:50%;background:var(--red);color:var(--ink);display:grid;place-items:center;text-align:center;font-family:var(--display);text-transform:uppercase;line-height:.95;transform:rotate(-8deg);box-shadow:0 0 0 4px var(--ink),0 10px 24px #0008;outline:2px solid var(--ink);outline-offset:-8px}
.roundel small{display:block;font-size:12px;letter-spacing:.08em}
.roundel b{display:block;font-size:40px}
.roundel b i{font-style:normal;font-size:15px}
.roundel em{display:block;font-style:normal;font-size:10px;letter-spacing:.04em}
.hero2 .loc{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hero2 .loc svg{color:var(--red)}
.hero2 h1{font-family:var(--display);text-transform:uppercase;font-size:44px;line-height:.95;margin:12px 0 10px;letter-spacing:-.005em}
.hero2 p{margin:0;color:var(--muted);font-size:16px}
.quick div{border-radius:6px;background:var(--card)}
.quick svg{color:var(--red)}

/* tabs */
.tabs{background:#0e0d0cf5;top:65px}
.tab{height:44px;border-radius:999px;border:2px solid var(--line-2);background:transparent;color:var(--cream);font-family:var(--display);font-size:18px;text-transform:uppercase;letter-spacing:.03em;font-weight:700}
.tab.on{background:var(--red);border-color:var(--red);color:var(--ink)}

/* menu cards */
.cat{padding-top:26px}
.cat .kick{margin-bottom:8px}
.cat-head h3{font-size:40px}
.sizehint div{border-radius:4px;border:2px solid var(--line-2);background:transparent}
.sizehint b{font-size:21px;color:var(--cream)}
.item{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:12px;margin-top:12px;grid-template-columns:104px 1fr;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:1px solid var(--line)}
.item .thumb{width:104px;height:104px;border-radius:4px}
.item h4{font-family:var(--display);text-transform:uppercase;font-size:21px;letter-spacing:.01em;line-height:1.02;font-weight:700}
.item .inc{color:var(--cream);font-weight:500}
.item .row{margin-top:12px}
.add{border-radius:4px;background:var(--red);color:var(--ink);font-family:var(--display);text-transform:uppercase;font-size:17px;letter-spacing:.03em;box-shadow:none;height:44px}
.add.instore{border-radius:4px;border:2px solid var(--line-2);font-size:15px;color:var(--muted);background:transparent}
.incart{background:var(--ink);color:var(--cream);font-family:var(--body)}
.foot-note{border-radius:6px}
.foot-note b{color:var(--cream)}

/* cart bar */
.cartbar{border-radius:6px;background:var(--red);color:var(--ink);box-shadow:0 0 0 4px var(--ink),0 14px 36px #000c;font-family:var(--display);text-transform:uppercase;font-size:20px;letter-spacing:.03em}
.cartbar .count{border-radius:4px;background:var(--ink);color:var(--cream)}
.cartbar .sum{font-size:26px}

/* sheet */
.sheet{border-radius:10px 10px 0 0;background:var(--card)}
.sheet .media::after{background:linear-gradient(transparent,var(--card))}
.sheet-foot{background:linear-gradient(transparent,var(--card) 30%)}
.sheet h2{font-size:40px}
.pill-inc{border-radius:4px;background:transparent;border:2px solid var(--line-2);color:var(--cream)}
.req{border-radius:3px}
.size{border-radius:4px;border:2px solid var(--line-2);background:transparent}
.size.on{background:var(--cream);color:var(--ink);border-color:var(--cream);box-shadow:none}
.size.on .n{color:#0e0d0cb0}
.size.on::after{background:var(--red);color:var(--ink);border-radius:3px}
textarea,input.field{border-radius:4px;border:2px solid var(--line-2);background:var(--card)}
textarea:focus,input.field:focus{border-color:var(--cream)}
.stepper{border-radius:4px;border:2px solid var(--line-2);background:transparent}
.sheet-foot .btn,.bottom-cta .btn{justify-content:space-between}
.bottom-cta{background:linear-gradient(transparent,var(--bg) 28%)}
.bottom-cta .btn b{font-size:26px}
.info-box{border-radius:4px}

/* cart & checkout */
.backbar h1{font-size:30px}
.line img{border-radius:4px}
.line .note{color:var(--red)}
.link{color:var(--red);font-family:var(--display);text-transform:uppercase;font-size:17px;letter-spacing:.03em}
.summary{border-radius:6px}
.sec-h{font-size:28px}
.sec-h i{border-radius:3px;background:var(--red);color:var(--ink);font-family:var(--display);font-size:17px}
.opt{border-radius:6px;border:2px solid var(--line-2)}
.opt.on{border-color:var(--red);background:#ff4a2b12}
.slot{border-radius:4px;border:2px solid var(--line-2);font-family:var(--display);font-size:19px}
.slot.on{background:var(--cream);color:var(--ink)}
.paycard{border-radius:6px;border:2px solid var(--line-2)}
.paycard.on{border-color:var(--red);background:#ff4a2b12;box-shadow:none}
.paycard.on::after{border-radius:3px;color:var(--ink)}
.paycard b{font-family:var(--display);text-transform:uppercase;font-size:24px;font-weight:700;letter-spacing:.02em}
.pay-note{border-radius:6px}

/* confirmation */
.check{background:var(--red);color:var(--ink);border-radius:6px;box-shadow:none;transform:rotate(-4deg)}
.ordernum{border-radius:6px;background:var(--red);color:var(--ink);box-shadow:none}
.ordernum .eyebrow{color:var(--ink);font-weight:700}
.ordernum .when{background:var(--ink);color:var(--cream);border-radius:4px;font-family:var(--display);text-transform:uppercase;font-size:20px;letter-spacing:.03em}
.tracker div::before{border-radius:2px}
.tracker div.on::before{background:var(--red)}
.card{border-radius:6px}
.addr img{border-radius:4px}
.arrive li::before{border-radius:3px;background:var(--red);color:var(--ink)}
.arrive li b{color:var(--red)}
.receipt-note .ic{border-radius:4px;background:#ff4a2b1f;color:var(--red)}
.toast{border-radius:4px;background:var(--cream);font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;font-size:17px}
.add{white-space:nowrap;padding:0 14px 0 10px;font-size:16px}
.paybox{border-radius:8px}
.paybox .paybtn,.paybox .ap{border-radius:4px}
.pay-note{background:var(--card);border:1px dashed var(--line-2);color:var(--muted)}.pay-note b{color:var(--cream)}