/* ===== AMG // tech glass cart ===== */
:root{--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.glass{background:linear-gradient(150deg,rgba(46,224,240,.09),rgba(12,19,32,.6) 38%,rgba(6,10,18,.72));backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%);border:1px solid rgba(46,224,240,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 70px -24px rgba(0,0,0,.8),0 0 46px -20px rgba(46,224,240,.5)}

/* floating button with spinning ring */
.cart-fab{position:fixed;right:22px;bottom:22px;z-index:120;width:66px;height:66px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:0;background:rgba(6,10,18,.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:transform .25s}
.cart-fab::before{content:"";position:absolute;inset:-2px;border-radius:50%;padding:2px;background:conic-gradient(from var(--a,0deg),transparent 0 55%,var(--cy) 75%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ring 3.2s linear infinite}
.cart-fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(46,224,240,.35);box-shadow:0 0 24px -6px var(--cy)}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes ring{to{--a:360deg}}
.cart-fab:hover{transform:translateY(-3px) scale(1.05)}
.cart-fab svg{width:26px;height:26px;stroke:var(--cy2);fill:none;stroke-width:1.7;position:relative;z-index:1}
.cart-fab .n{position:absolute;z-index:2;top:-5px;right:-5px;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--cy);color:var(--cy-ink);font:700 12px/24px var(--mono);text-align:center;box-shadow:0 0 16px var(--cy)}
.cart-fab .n[data-zero]{display:none}
.cart-fab.bump{animation:bump .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{35%{transform:scale(1.22)}70%{transform:scale(.95)}}

/* drawer */
.cart-dim{position:fixed;inset:0;z-index:140;background:rgba(2,4,9,.55);opacity:0;pointer-events:none;transition:.35s;backdrop-filter:blur(2px)}
.cart-dim.open{opacity:1;pointer-events:auto}
.cart{position:fixed;top:12px;right:12px;bottom:12px;z-index:150;width:min(470px,calc(100% - 24px));display:flex;flex-direction:column;border-radius:20px;overflow:hidden;transform:translateX(calc(100% + 30px));transition:transform .55s cubic-bezier(.16,1,.3,1)}
.cart.open{transform:none}
.cart::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(46,224,240,.045) 1px,transparent 1px) 0 0/100% 28px,linear-gradient(90deg,rgba(46,224,240,.035) 1px,transparent 1px) 0 0/28px 100%;mask:linear-gradient(180deg,#000,transparent 70%)}
.cart::after{content:"";position:absolute;left:0;right:0;height:120px;top:-120px;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(46,224,240,.08),transparent);animation:scan 5.5s linear infinite}
@keyframes scan{to{top:100%}}
.hud{position:absolute;width:18px;height:18px;border:2px solid var(--cy);pointer-events:none;z-index:3;filter:drop-shadow(0 0 6px var(--cy))}
.hud.tl{top:10px;left:10px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}.hud.tr{top:10px;right:10px;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.hud.bl{bottom:10px;left:10px;border-right:0;border-top:0;border-radius:0 0 0 6px}.hud.br{bottom:10px;right:10px;border-left:0;border-top:0;border-radius:0 0 6px 0}
.cart-h{position:relative;z-index:2;padding:26px 28px 18px}
.cart-h .sys{font:500 11px var(--mono);letter-spacing:.22em;color:var(--cy);display:flex;justify-content:space-between;align-items:center}
.cart-h .sys i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cy);box-shadow:0 0 10px var(--cy);margin-right:8px;animation:bl 1.6s infinite}
@keyframes bl{50%{opacity:.25}}
.cart-h h3{font-size:26px;margin-top:10px;letter-spacing:-.01em}
.bar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:16px}
.bar i{height:3px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden;position:relative}
.bar i.on::after{content:"";position:absolute;inset:0;background:var(--cy);box-shadow:0 0 10px var(--cy);animation:fill .5s ease forwards;transform-origin:left}
@keyframes fill{from{transform:scaleX(0)}}
.cart-x{width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:#cfe3ee;font-size:20px;cursor:pointer;transition:.2s}
.cart-x:hover{border-color:var(--cy);color:var(--cy)}
.cart-b{position:relative;z-index:2;flex:1;overflow:auto;padding:4px 28px 18px;overscroll-behavior:contain}
.cart-b::-webkit-scrollbar{width:4px}.cart-b::-webkit-scrollbar-thumb{background:rgba(46,224,240,.3);border-radius:2px}
.ci{display:grid;grid-template-columns:42px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid rgba(46,224,240,.1);animation:ciIn .4s cubic-bezier(.16,1,.3,1) backwards}
.ci:nth-child(2){animation-delay:.05s}.ci:nth-child(3){animation-delay:.1s}.ci:nth-child(4){animation-delay:.15s}
@keyframes ciIn{from{opacity:0;transform:translateX(24px)}}
.ci .ic{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:rgba(46,224,240,.08);border:1px solid rgba(46,224,240,.28);font-size:19px}
.ci b{font-family:var(--display);font-size:16px;display:block;line-height:1.25}
.ci small{color:var(--muted);font:12px var(--mono);display:block;margin-top:4px;letter-spacing:.02em}
.ci .pr{text-align:right;font:600 15px var(--mono);color:#fff}
.ci .pr small{display:inline;font-size:11px}
.qty{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.12);border-radius:8px;margin-top:10px;overflow:hidden;background:rgba(0,0,0,.25)}
.qty button{width:30px;height:28px;background:none;border:0;color:#cfe3ee;cursor:pointer;font:15px var(--mono)}
.qty button:hover{color:var(--cy);background:rgba(46,224,240,.08)}
.qty span{min-width:26px;text-align:center;font:13px var(--mono)}
.ci .rm{background:none;border:0;color:var(--dim);font:11px var(--mono);letter-spacing:.1em;cursor:pointer;margin-top:12px;text-transform:uppercase}
.ci .rm:hover{color:#ff8d98}
.cart-empty{text-align:center;padding:50px 10px;color:var(--muted)}
.cart-empty .big{width:86px;height:86px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;font-size:36px;border:1px dashed rgba(46,224,240,.45);animation:spinb 14s linear infinite}
@keyframes spinb{to{transform:rotate(360deg)}}
.cart-f{position:relative;z-index:2;padding:18px 28px 26px;border-top:1px solid rgba(46,224,240,.16);background:linear-gradient(180deg,rgba(4,8,14,.2),rgba(4,8,14,.55))}
.tot{display:flex;justify-content:space-between;font:12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.tot span:last-child{color:#cfe3ee}
.tot.due{align-items:flex-end;margin:14px 0 16px;color:#fff}
.tot.due span:first-child{font-size:11px;color:var(--cy)}
.tot.due b{font:700 34px var(--mono);letter-spacing:-.02em;color:#fff;text-shadow:0 0 22px rgba(46,224,240,.55);text-transform:none}
.zipline{display:flex;gap:8px;align-items:center;margin:2px 0 12px}
.zipline label{font:11px var(--mono);letter-spacing:.14em;color:var(--muted);white-space:nowrap}
.zipline input{max-width:120px;padding:8px 10px;font:14px var(--mono)}
.go{position:relative;overflow:hidden;width:100%;padding:16px;border-radius:12px;border:0;cursor:pointer;background:var(--cy);color:var(--cy-ink);font:700 14px var(--mono);letter-spacing:.16em;text-transform:uppercase;box-shadow:0 0 0 1px var(--cy),0 12px 34px -10px var(--cy);transition:.2s}
.go::after{content:"";position:absolute;top:0;bottom:0;width:60px;left:-80px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:sheen 3.2s ease-in-out infinite}
@keyframes sheen{60%,100%{left:120%}}
.go:hover{background:var(--cy2);transform:translateY(-1px)}
.go:disabled{opacity:.6;cursor:wait}
.ghost-btn{width:100%;margin-top:10px;padding:12px;border-radius:12px;background:none;border:1px solid rgba(255,255,255,.12);color:#b9c9d7;font:12px var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.ghost-btn:hover{border-color:var(--cy);color:var(--cy)}
.secure{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:14px;font:11px var(--mono);letter-spacing:.08em;color:var(--dim)}
.secure svg{width:13px;height:13px;stroke:var(--cy);fill:none;stroke-width:2}
.cart .field{margin-bottom:14px}
.cart .field label{font:11px var(--mono);letter-spacing:.16em}
.cart .inp{background:rgba(3,6,12,.6);border-color:rgba(46,224,240,.16);border-radius:10px}
.cart .inp:focus{border-color:var(--cy)}
.cardbox{min-height:96px;margin:6px 0 4px}
.paylbl{font:11px var(--mono);letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin-bottom:8px;display:flex;justify-content:space-between}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#b9c9d7;margin-top:10px;line-height:1.45}
.consent input{margin-top:3px;accent-color:var(--cy);width:16px;height:16px;flex:none}
.sumbox{border:1px solid rgba(46,224,240,.16);border-radius:12px;padding:14px 16px;margin-bottom:16px;background:rgba(3,6,12,.4)}
.sumbox .tot{margin-bottom:6px}.sumbox .tot:last-child{margin-bottom:0}
.cart-ok{text-align:center;padding:36px 4px}
.cart-ok .chk{width:84px;height:84px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;color:var(--cy-ink);background:var(--cy);box-shadow:0 0 0 10px rgba(46,224,240,.12),0 0 50px var(--cy);animation:pop .6s cubic-bezier(.3,1.6,.5,1)}
.cart-ok .chk svg{width:40px;height:40px;stroke:var(--cy-ink);fill:none;stroke-width:3;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s .35s forwards}
@keyframes pop{from{transform:scale(.3);opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
.cart-ok .oid{font:13px var(--mono);letter-spacing:.14em;color:var(--cy);margin:8px 0 14px}
@media (max-width:600px){.cart{top:0;right:0;bottom:0;width:100%;border-radius:0}.cart-fab{right:16px;bottom:16px;width:60px;height:60px}.cart-h,.cart-b,.cart-f{padding-left:20px;padding-right:20px}.tot.due b{font-size:30px}}
@media (prefers-reduced-motion:reduce){.cart::after,.cart-fab::before,.go::after,.cart-empty .big{animation:none}}