/* JR Burguer's - pedidos online. Usa las variables de index.html */
.dish{align-items:start}
.dish img.noimg{object-fit:contain;padding:14%;background:#fff}
.dish-buy{display:flex;flex-direction:column;align-items:flex-end;gap:10px;align-self:start}
.dish-buy .dish-p{padding-top:0;font-size:clamp(22px,1.9vw,30px)}
.add{min-height:46px;padding:0 20px;border:0;background:var(--ember);color:#fff;font:800 19px/1 var(--d);text-transform:uppercase;letter-spacing:.01em;cursor:pointer;transition:background 160ms ease,transform 120ms ease}
.add:active{transform:scale(.96)}
@media (hover:hover){.add:hover{background:var(--ember-press)}}
.add.done{background:var(--jr-green);color:#10200a}
.vars{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.var{min-height:42px;padding:0 12px;border:1px solid #5c4b3d;background:transparent;color:var(--ink);font:700 16px/1 var(--t);cursor:pointer}
.var b{margin-left:.35em;color:var(--ink-2);font-variant-numeric:tabular-nums}
.var[aria-pressed="true"]{background:var(--ember);border-color:var(--ember);color:#fff}
.var[aria-pressed="true"] b{color:#fff}
@media (max-width:480px){.dish{grid-template-columns:88px minmax(0,1fr)}.dish-buy{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;width:100%}}
.pizza-box{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,56px);align-items:start}
.pizza-fig{margin:0;aspect-ratio:1;overflow:hidden;background:var(--ground-2)}
.pizza-fig img{width:100%;height:100%;object-fit:cover}
.sizes{list-style:none;margin:0 0 6px;padding:0}
.sizes li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #3b302a;font-size:19px}
.sizes b{font:800 26px/1 var(--d);text-transform:uppercase}
.sizes small{color:var(--ink-2);font-size:14px;font-weight:400}
.sizes li>span:last-child{font-variant-numeric:tabular-nums;font-weight:700;text-align:right}
.pizza-box .btn{margin-top:18px}
.flavors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,56px);margin-top:36px}
.flavors h5{margin:0 0 10px;font:900 28px/1 var(--d);text-transform:uppercase;color:var(--jr-green)}
.flavors ul{list-style:none;margin:0;padding:0}
.flavors li{padding:8px 0;border-bottom:1px solid #2f2621}
.flavors li b{display:block;font:800 21px/1.1 var(--d);text-transform:uppercase}
.flavors li span{color:var(--ink-2);font-size:15px}
@media (max-width:900px){.pizza-box,.flavors{grid-template-columns:1fr}.pizza-fig{max-height:60vw}}
/* como pedir */
.order{align-items:start}
.how ol{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s}
.how li{display:grid;grid-template-columns:64px 1fr;gap:4px 18px;padding:22px 0;border-bottom:1px solid #3b302a;counter-increment:s}
.how li::before{content:counter(s);grid-row:span 2;font:900 64px/.8 var(--d);color:var(--ember)}
.how li b{font:900 34px/1 var(--d);text-transform:uppercase}
.how li span{color:var(--ink-2);font-size:18px}
.how-cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0}
.locals-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.locals-list li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid #3b302a}
.locals-list b{font:800 22px/1 var(--d);text-transform:uppercase}
.locals-list a{color:var(--jr-green)}
/* barra del carrito */
#cartBar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--m) calc(10px + env(safe-area-inset-bottom,0px));background:var(--ember);color:#fff;border:0;width:100%;cursor:pointer;font:800 22px/1 var(--d);text-transform:uppercase;text-align:left}
#cartBar.show{display:flex}
#cartBar small{font:600 15px/1 var(--t);text-transform:none;opacity:.9}
#cartBar .go{background:#fff;color:var(--ground);padding:12px 18px}
body.has-cart .callbar{display:none}
body.has-cart .foot{padding-bottom:90px}
/* dialogos */
dialog.jrd{border:0;padding:0;background:var(--ground-2);color:var(--ink);width:min(720px,100%);max-width:100%;max-height:100dvh;height:auto;margin:auto;overflow:hidden}
dialog.jrd::backdrop{background:rgba(0,0,0,.72)}
@media (max-width:760px){dialog.jrd{width:100%;height:100dvh;max-height:100dvh;margin:0}}
.jrd-in{display:flex;flex-direction:column;max-height:100dvh}
.jrd-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;background:var(--ground);position:sticky;top:0}
.jrd-h h3{font-size:34px}
.jrd-x{min-width:48px;min-height:48px;border:0;background:var(--ground-3);color:var(--ink);font:700 26px/1 var(--t);cursor:pointer}
.jrd-b{padding:8px 20px 20px;overflow:auto;-webkit-overflow-scrolling:touch}
.jrd fieldset{border:0;margin:20px 0 0;padding:0;min-width:0}
.jrd legend{font:900 26px/1 var(--d);text-transform:uppercase;padding:0;margin-bottom:10px}
.jrd label.f{display:block;margin-top:12px;font-weight:600;font-size:16px;color:var(--ink-2)}
.jrd input[type=text],.jrd input[type=tel],.jrd input[type=number],.jrd textarea{display:block;width:100%;margin-top:6px;padding:13px 14px;min-height:50px;font:400 18px/1.3 var(--t);color:var(--ink);background:var(--ground);border:1px solid #5c4b3d;border-radius:0}
.jrd textarea{min-height:80px;resize:vertical}
.jrd input:focus-visible,.jrd textarea:focus-visible{outline:3px solid var(--ember);outline-offset:1px}
.opts{display:grid;gap:8px}
.opt{display:flex;align-items:center;gap:12px;min-height:54px;padding:10px 14px;background:var(--ground);border:1px solid #5c4b3d;cursor:pointer;font-size:17px}
.opt input{width:22px;height:22px;accent-color:var(--ember);flex:none}
.opt:has(input:checked){border-color:var(--ember);background:#2c1c15}
.opt.off{opacity:.45;cursor:not-allowed}
.opt small{display:block;color:var(--ink-2);font-size:14px}
.opt .pr{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.cl{list-style:none;margin:0;padding:0}
.cl li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px 0;border-bottom:1px solid #3b302a}
.cl .nm{font-weight:700;font-size:18px}.cl .sb{color:var(--ink-2);font-size:14px;grid-column:1}
.cl .qc{display:flex;align-items:center;gap:6px;grid-row:1/3;grid-column:2}
.cl .qc button{width:44px;height:44px;border:0;background:var(--ground-3);color:var(--ink);font:700 22px/1 var(--t);cursor:pointer}
.cl .qc output{min-width:28px;text-align:center;font-weight:700}
.cl .lt{grid-column:1;font-variant-numeric:tabular-nums;color:var(--ember);font-weight:700}
.tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;font:900 38px/1 var(--d);text-transform:uppercase}
.tot span:last-child{font-variant-numeric:tabular-nums}
.fine{color:var(--ink-2);font-size:14px;margin-top:8px}
.err{color:#ffb4b4;background:#3a1d1d;padding:10px 12px;margin-top:14px;display:none;font-weight:600}
.err.show{display:block}
.jrd-f{padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));background:var(--ground);display:grid;gap:8px}
.jrd-f .btn{width:100%}
.btn[disabled]{opacity:.5;cursor:wait}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.okbox{text-align:center;padding:30px 10px}
.okbox .code{font:900 120px/1 var(--d);color:var(--jr-green)}
.okbox p{margin:10px 0;font-size:19px}
.status-line{display:inline-block;margin-top:10px;padding:8px 16px;background:var(--ground-3);font-weight:700}
.hide{display:none!important}
