/* Shop: product grid, product sheet, cart drawer, checkout. */
/* shop */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.shop{display:grid;grid-template-rows:auto minmax(0,1fr);gap:16px;height:100%}
.shop-head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.shop-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.fchip{border:1px solid var(--line);background:var(--panel);border-radius:99px;padding:7px 13px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mute);transition:color .2s,background-color .2s,border-color .2s}
.fchip:hover{color:var(--frost);border-color:color-mix(in srgb,var(--kush) 45%,var(--line))}
.fchip[aria-pressed="true"]{background:var(--kush);border-color:var(--kush);color:var(--ink)}
.search input{width:180px;background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:8px 14px;color:var(--frost);font:inherit;font-size:13px;transition:border-color .2s,width .3s}
.search input:focus{outline:none;border-color:var(--kush);width:220px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:max-content;gap:14px;overflow:auto;min-height:0;align-content:start;padding:4px 2px 6px;margin:-4px -2px 0}
.prod{--p:var(--kush);border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;contain:paint;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .3s}
.prod:hover,.prod:focus-visible{transform:translateY(-4px);border-color:color-mix(in srgb,var(--p) 70%,var(--line));box-shadow:0 16px calc(34px * var(--glow)) color-mix(in srgb,var(--p) 18%,transparent)}
.prod:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.art{--p:var(--kush);height:112px;flex:none;position:relative;overflow:hidden;border-bottom:1px solid var(--line);isolation:isolate;
  background:radial-gradient(circle at 78% 18%,color-mix(in srgb,var(--p) 34%,transparent),transparent 62%),linear-gradient(135deg,var(--panel-2),var(--bg))}
.art.big{height:180px;border-radius:12px;border:1px solid var(--line)}
/* product photo sits under the strain overlay */
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:0;transform:scale(1.04);filter:saturate(1.15) contrast(1.05);
  transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.art img.ok{opacity:.7}
.prod:hover .art img{transform:scale(1.1)}
.art::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 10%,transparent) 0%,color-mix(in srgb,var(--bg) 25%,transparent) 45%,color-mix(in srgb,var(--panel) 96%,transparent) 100%),
    radial-gradient(circle at 80% 10%,color-mix(in srgb,var(--p) 30%,transparent),transparent 60%)}
.art > :not(img){z-index:1}
.art .gl{position:absolute;left:16px;bottom:6px;font-family:var(--f-display);font-size:60px;line-height:1;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--p) 90%,transparent);letter-spacing:2px;text-shadow:0 0 calc(18px * var(--glow)) color-mix(in srgb,var(--p) 40%,transparent)}
.art.big .gl{font-size:78px}
.art svg{position:absolute;right:-16px;bottom:-26px;width:130px;height:130px;color:var(--p);opacity:.16;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.prod:hover .art svg{transform:rotate(14deg) scale(1.1)}
.pst{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:99px;background:color-mix(in srgb,var(--bg) 80%,transparent);border:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.pst i{width:7px;height:7px;border-radius:50%;background:var(--kush);box-shadow:0 0 8px var(--kush)}
.pst.upd i{background:var(--resin);box-shadow:0 0 8px var(--resin)}
.pst.down i{background:var(--ember);box-shadow:0 0 8px var(--ember)}
.sale{position:absolute;top:10px;right:10px;background:var(--ember);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:4px;letter-spacing:1.5px}
.pbody{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.g{font-family:var(--f-data);font-size:16px;color:var(--mute);line-height:1}
.pbody h3{margin:0;font-size:18px;font-weight:700;line-height:1.2}
.ptags{display:flex;gap:5px;flex-wrap:wrap}
.ptags span{font-size:11px;font-weight:600;padding:2px 8px;border:1px solid var(--line);border-radius:99px;color:var(--soft)}
.pfoot{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:8px}
.from{font-family:var(--f-data);font-size:15px;color:var(--mute);line-height:1}
.from b{display:flex;align-items:baseline;gap:6px;font-size:30px;font-weight:400;color:var(--resin);margin-top:2px}
.from s,.dp s{font-size:16px;color:var(--mute)}
.qadd{width:40px;height:40px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--frost);font-size:22px;line-height:1;display:grid;place-items:center;flex:none;transition:background-color .2s,color .2s,border-color .2s,transform .15s}
.qadd:hover{background:var(--p);border-color:var(--p);color:var(--ink)}
.qadd:active{transform:scale(.9)}
.empty-shop{grid-column:1/-1;padding:40px;text-align:center;color:var(--mute);border:1px dashed var(--line);border-radius:14px}

/* product sheet */
.sheet{width:min(900px,100%);max-height:100%;overflow:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;background:var(--panel);border:1px solid color-mix(in srgb,var(--kush) 30%,var(--line));border-radius:18px;padding:22px;position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 calc(50px * var(--glow)) color-mix(in srgb,var(--kush) 12%,transparent);animation:cardIn .4s cubic-bezier(.2,.9,.3,1.15)}
.sheet .x{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--mute);z-index:2}
.sheet .x:hover{color:var(--kush);border-color:var(--kush)}
.sh-l,.sh-r{display:flex;flex-direction:column;gap:12px;min-width:0}
.sh-meta h3{margin:4px 0 6px;font-family:var(--f-display);font-weight:400;font-size:28px;line-height:1.05}
.sh-meta p{margin:0 0 8px;color:var(--soft);font-size:14px}
.feats{display:flex;flex-direction:column;gap:6px}
.feats details{border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.feats summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:9px 12px;font-weight:600;font-size:14px}
.feats summary::-webkit-details-marker{display:none}
.feats summary::before{content:"+";font-family:var(--f-data);font-size:20px;color:var(--kush);width:12px;transition:transform .2s}
.feats details[open] summary::before{content:"–"}
.feats summary em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:1px;background:var(--resin);color:var(--ink);padding:1px 6px;border-radius:4px}
.feats summary span{margin-left:auto;font-family:var(--f-data);font-size:16px;color:var(--mute)}
.feats ul{margin:0;padding:0 12px 10px 32px;display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;font-size:13px;color:var(--soft)}
.sh-r h4{margin:6px 0 0;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--mute);font-weight:600}
.durs{display:flex;flex-direction:column;gap:8px}
.dur{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);text-align:left;transition:border-color .2s,background-color .2s,box-shadow .2s}
.dur:hover{border-color:color-mix(in srgb,var(--kush) 45%,var(--line))}
.dur[aria-checked="true"]{border-color:var(--kush);background:color-mix(in srgb,var(--kush) 8%,var(--bg));box-shadow:0 0 18px color-mix(in srgb,var(--kush) 18%,transparent)}
.rd{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;transition:border-color .2s}
.rd::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--kush);transform:scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.dur[aria-checked="true"] .rd{border-color:var(--kush)}
.dur[aria-checked="true"] .rd::after{transform:scale(1)}
.dl b{display:block;font-size:15px}
.dl small{font-family:var(--f-data);font-size:15px;color:var(--mute)}
.dp{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.dp b{font-family:var(--f-data);font-weight:400;font-size:26px;color:var(--resin)}
.dp em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-top:4px;color:var(--kush)}
.dp em.pop{background:var(--kush);color:var(--ink);padding:2px 6px;border-radius:4px}
.sh-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed var(--line);padding-top:10px}
.sh-total span{color:var(--mute);font-size:13px;letter-spacing:2px;text-transform:uppercase}
.sh-total b{font-family:var(--f-data);font-weight:400;font-size:38px;color:var(--frost);font-variant-numeric:tabular-nums}
.sh-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.assure{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--mute)}
.assure li::before{content:"✦ ";color:var(--kush)}

/* cart */
.cartbtn{position:relative;width:40px;height:34px;border-radius:999px;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;padding:0;transition:border-color .2s,color .2s}
.cartbtn:hover{border-color:var(--kush);color:var(--kush)}
.cartbtn svg{width:18px;height:18px}
.cartbtn b{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--kush);color:var(--ink);font-size:11px;font-weight:700;display:grid;place-items:center;transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.cartbtn b.has{transform:scale(1)}
.cartbtn.bump{animation:bump .4s}
.fly{position:fixed;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--kush);box-shadow:0 0 16px var(--kush);z-index:60;pointer-events:none}
.scrim{position:fixed;inset:0;z-index:34;background:color-mix(in srgb,var(--bg) 70%,transparent);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:35;width:min(410px,100%);background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;
  box-shadow:-30px 0 60px rgba(0,0,0,.5);transform:translateX(105%);transition:transform .42s cubic-bezier(.2,.85,.25,1);will-change:transform;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) 0}
.drawer.open{transform:none}
.dh{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.dh h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:22px}
.dh span{font-family:var(--f-data);font-size:18px;color:var(--mute)}
.dh .x{margin-left:auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--mute)}
.dh .x:hover{color:var(--kush);border-color:var(--kush)}
.db{flex:1;overflow:auto;padding:14px 18px;display:flex;flex-direction:column;gap:10px;min-height:0}
.df{border-top:1px solid var(--line);padding:14px 18px 18px;display:flex;flex-direction:column;gap:12px}
.df:empty{display:none}
.cline{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--bg);animation:pop .35s cubic-bezier(.2,.8,.2,1) backwards}
.cline.out{animation:out .25s ease forwards}
@keyframes out{to{opacity:0;transform:translateX(30px)}}
.mart{--p:var(--kush);width:48px;height:48px;border-radius:10px;display:grid;place-items:center;overflow:hidden;position:relative;background-size:cover!important;font-family:var(--f-display);font-size:13px;color:var(--p);background:radial-gradient(circle at 70% 20%,color-mix(in srgb,var(--p) 30%,transparent),transparent 70%),var(--panel-2);border:1px solid var(--line)}
.cinfo{min-width:0;display:flex;flex-direction:column;gap:4px}
.cinfo b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cinfo select{background:var(--panel);border:1px solid var(--line);border-radius:6px;color:var(--soft);font:inherit;font-size:12px;padding:3px 6px;max-width:100%}
.cprice{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.cprice b{font-family:var(--f-data);font-weight:400;font-size:22px;color:var(--resin);line-height:1}
.rm{border:0;background:none;color:var(--mute);font-size:12px;text-decoration:underline;padding:0}
.rm:hover{color:var(--ember)}
.cempty{margin:auto;text-align:center;color:var(--mute);display:flex;flex-direction:column;gap:12px;align-items:center;padding:20px}
.cempty svg{width:70px;height:70px;color:var(--kush);opacity:.5}
.promo{display:flex;gap:8px}
.promo input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px 12px;color:var(--frost);font:inherit;font-size:13px;text-transform:uppercase}
.promo input:focus{outline:none;border-color:var(--kush)}
.promo .mini{padding:0 14px}
.pmeth{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pm{border:1.5px solid var(--line);border-radius:10px;background:var(--bg);padding:9px 6px;font-size:12px;font-weight:700;letter-spacing:.5px;display:flex;flex-direction:column;align-items:center;gap:2px;transition:border-color .2s,background-color .2s}
.pm small{font-weight:500;color:var(--mute);font-size:11px}
.pm[aria-checked="true"]{border-color:var(--kush);background:color-mix(in srgb,var(--kush) 8%,var(--bg))}
.pm:disabled{opacity:.45;cursor:not-allowed}
.sums{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:14px;color:var(--soft)}
.sums b{font-family:var(--f-data);font-weight:400;font-size:20px;text-align:right;font-variant-numeric:tabular-nums}
.sums .tot{font-size:16px;color:var(--frost);font-weight:700;padding-top:6px;border-top:1px dashed var(--line)}
.sums b.tot{font-size:32px;color:var(--kush)}
.sums .disc{color:var(--kush)}
.df .btn{width:100%}
.paybox{display:flex;flex-direction:column;gap:12px}
.coins{display:flex;gap:6px;flex-wrap:wrap}
.coin{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:6px 10px;font-family:var(--f-data);font-size:18px;line-height:1}
.coin[aria-pressed="true"]{border-color:var(--resin);color:var(--resin)}
.qr{width:150px;height:150px;margin:0 auto;border-radius:12px;background:var(--frost);padding:10px}
.qr canvas{width:100%;height:100%;image-rendering:pixelated;display:block}
.addr{display:flex;gap:6px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:var(--f-data);font-size:17px}
.addr span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wait{display:flex;align-items:center;gap:10px;font-family:var(--f-data);font-size:19px;color:var(--resin)}
.wait i{width:10px;height:10px;border-radius:50%;background:var(--resin);animation:blink 1s infinite}
.demo-note{font-size:12px;color:var(--mute);border:1px dashed var(--line);border-radius:8px;padding:8px 10px}
.done{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;padding-top:10px;position:relative}
.done .big{font-family:var(--f-display);font-size:30px;line-height:1;color:var(--kush);text-shadow:0 0 24px color-mix(in srgb,var(--kush) 60%,transparent)}
.done .order{font-family:var(--f-data);font-size:18px;color:var(--mute)}
.burst{position:absolute;left:50%;top:30px;width:18px;height:18px;color:var(--kush);pointer-events:none;animation:burst 1.1s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes burst{from{transform:translate(-50%,0) rotate(0) scale(.4);opacity:1}to{transform:translate(calc(-50% + var(--bx)),var(--by)) rotate(var(--br)) scale(1);opacity:0}}
.keys{width:100%;display:flex;flex-direction:column;gap:6px;text-align:left}
.empty-shop.loading{border-style:solid;animation:pulse 1.6s infinite}

.shop-closed{border:1px dashed color-mix(in srgb,var(--resin) 50%,var(--line));color:var(--resin);border-radius:10px;padding:12px;text-align:center;font-size:14px}
