/* v1.9.0 側邊購物車（前綴 mxd-；不使用 .mx-nav）。品牌紅 #8B1E1E */
.mx-drawer.mxd{--mxd-red:#8B1E1E;--mxd-red-d:#6f1818;--mxd-bone:#F7F4EE;--mxd-bone2:#EFEAE0;--mxd-stone:#6B6B6B;--mxd-line:rgba(11,11,11,.09);width:min(440px,100vw);background:var(--mxd-bone);box-shadow:-24px 0 60px rgba(11,11,11,.18);transition:transform .45s cubic-bezier(.22,.8,.24,1);display:flex;flex-direction:column;color:#0B0B0B}
.mx-drawer.mxd .mx-drawer-hd{padding:20px 24px 16px;border-bottom:1px solid var(--mxd-line);background:var(--mxd-bone)}
.mx-drawer.mxd .mx-drawer-hd b{font-family:"Noto Serif TC","Playfair Display",serif;font-size:1.25rem;letter-spacing:.08em}
.mx-drawer.mxd .mx-drawer-x{width:36px;height:36px;border-radius:50%;border:1px solid var(--mxd-line);background:#fff;display:grid;place-items:center;font-size:20px;line-height:1;padding:0}
.mx-drawer-scrim{background:rgba(11,11,11,.42)}
body.mx-drawer-on{overflow:hidden}
.mxd-body{padding:0!important;overflow:hidden!important;display:flex;flex-direction:column;flex:1;min-height:0}
.mxd-bar{padding:14px 24px 12px;background:#fff;border-bottom:1px solid var(--mxd-line);font-size:.86rem}
.mxd-bar-t{display:flex;justify-content:space-between;gap:8px}.mxd-bar-t b{font-weight:600}.mxd-bar-t em{font-style:normal;color:var(--mxd-stone);font-size:.74rem}
.mxd-bar-b{height:4px;border-radius:4px;background:var(--mxd-bone2);margin-top:9px;overflow:hidden}.mxd-bar-b i{display:block;height:100%;background:var(--mxd-red);border-radius:4px;transition:width .6s cubic-bezier(.22,.8,.24,1)}
.mxd-bar.ok .mxd-bar-t b{color:var(--mxd-red)}
.mxd-meta{padding:12px 24px 0;font-size:.78rem;color:var(--mxd-stone)}
.mxd-list{list-style:none;margin:0;padding:0 24px;overflow:auto;flex:1;min-height:0;overscroll-behavior:contain}
.mxd-item{display:grid;grid-template-columns:84px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--mxd-line);transition:opacity .25s,transform .28s;list-style:none;margin:0}
.mxd-item.leaving{opacity:0;transform:translateX(24px)}
.mxd-item.busy .mxd-qv,.mxd-item.busy .mxd-line{opacity:.35}
.mxd-thumb{display:block;width:84px;height:84px;border-radius:10px;overflow:hidden;background:var(--mxd-bone2);box-shadow:0 0 0 1px var(--mxd-line)}
.mxd-thumb img{display:block;width:84px;height:84px;object-fit:cover}
.mxd-info{display:flex;flex-direction:column;min-width:0}
.mxd-top{display:flex;justify-content:space-between;gap:10px}
.mxd-name{font-family:"Noto Serif TC",serif;font-size:1rem;font-weight:600;line-height:1.4;color:#0B0B0B;text-decoration:none}
.mxd-spec{font-size:.8rem;color:var(--mxd-stone);margin-top:2px}.mxd-unit{font-size:.8rem;color:var(--mxd-stone);margin-top:2px}
.mxd-rm{align-self:flex-start;border:0;background:none;padding:4px;margin:-4px -4px 0 0;color:#9a9a9a;border-radius:6px;line-height:0;cursor:pointer;width:auto;height:auto}
.mxd-rm:hover{color:var(--mxd-red);background:rgba(139,30,30,.07)}.mxd-rm svg{width:17px;height:17px}
.mxd-bot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px}
.mxd-qty{display:inline-flex;align-items:center;border:1px solid rgba(11,11,11,.16);border-radius:999px;background:#fff;height:36px}
.mxd-qty button{width:36px;height:34px;border:0;background:none;border-radius:999px;font-size:1.1rem;line-height:1;cursor:pointer;padding:0;color:#0B0B0B;display:grid;place-items:center}
.mxd-qty button:hover:not(:disabled){background:var(--mxd-bone2)}.mxd-qty button:disabled{color:#c3c3c3;cursor:not-allowed}
.mxd-qv{min-width:28px;text-align:center;font-weight:600;font-size:.92rem;font-variant-numeric:tabular-nums;transition:opacity .2s}
.mxd-line{font-weight:600;font-variant-numeric:tabular-nums}
.mxd-hint{font-size:.72rem;color:var(--mxd-red);margin-top:6px}.mxd-hint[hidden]{display:none}
.mxd-undo{margin:10px 24px 0;background:#0B0B0B;color:#fff;border-radius:10px;padding:10px 14px;font-size:.84rem;display:flex;justify-content:space-between;align-items:center}
.mxd-undo[hidden]{display:none}
.mxd-undo button{background:none;border:0;color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:600;cursor:pointer}
.mxd-empty{text-align:center;padding:64px 24px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mxd-empty h3{font-family:"Noto Serif TC",serif;font-size:1.15rem;margin:0 0 6px;letter-spacing:.06em}.mxd-empty p{color:var(--mxd-stone);font-size:.9rem;margin:0 0 24px}
.mxd-ft{background:#fff;border-top:1px solid var(--mxd-line);padding:14px 24px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -12px 28px rgba(11,11,11,.05)}
.mxd-ac{display:flex;align-items:center;gap:8px;font-size:.84rem;margin-bottom:6px}.mxd-ac span{flex:1}.mxd-ac-x{border:0;background:none;font-size:18px;line-height:1;cursor:pointer;color:var(--mxd-stone);padding:0 4px}
.mxd-cpt{background:none;border:0;padding:0;font-size:.86rem;color:var(--mxd-stone);display:flex;align-items:center;gap:6px;cursor:pointer}.mxd-cpt:hover{color:#0B0B0B}
.mxd-cpt svg{width:12px;height:12px;transition:transform .25s}.mxd-cpt[aria-expanded=true] svg{transform:rotate(180deg)}
.mxd-cp{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s}.mxd-cp.open{grid-template-rows:1fr}.mxd-cp>div{overflow:hidden}
.mxd-cpf{display:flex;gap:8px;padding-top:10px;margin:0}
.mxd-cpf input{flex:1;min-width:0;height:40px;border:1px solid rgba(11,11,11,.16);border-radius:10px;padding:0 12px;font:inherit;font-size:.9rem;background:var(--mxd-bone)}
.mxd-cpf input:focus{outline:2px solid rgba(139,30,30,.25);border-color:var(--mxd-red)}
.mxd-cpf button{height:40px;padding:0 16px;border-radius:10px;border:1px solid #0B0B0B;background:#fff;font-size:.88rem;font-weight:600;cursor:pointer;color:#0B0B0B}
.mxd-cpm{font-size:.76rem;color:var(--mxd-stone);padding-top:6px}.mxd-cpm.err{color:var(--mxd-red)}
.mxd-sum{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 2px}.mxd-sum span{font-size:.92rem}
.mxd-sum b{font-family:"Noto Serif TC",serif;font-size:1.4rem;font-variant-numeric:tabular-nums}
.mxd-note{font-size:.76rem;color:var(--mxd-stone);margin:0 0 12px}
.mxd-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;border-radius:12px;border:1px solid var(--mxd-red);background:var(--mxd-red);color:#fff!important;font-size:1rem;font-weight:600;letter-spacing:.12em;text-decoration:none;box-shadow:0 6px 16px rgba(139,30,30,.22);box-sizing:border-box}
.mxd-btn:hover{background:var(--mxd-red-d)}.mxd-btn svg{width:16px;height:16px}
.mxd-cont{display:block;width:100%;margin-top:6px;border:0;background:none;padding:12px;font-size:.9rem;color:var(--mxd-stone);letter-spacing:.06em;cursor:pointer}.mxd-cont:hover{color:#0B0B0B}
@media (prefers-reduced-motion:reduce){.mx-drawer.mxd,.mxd-item,.mxd-bar-b i,.mxd-cp{transition:none}}