*,*::before,*::after{box-sizing:border-box}
#cart-drawer{position:fixed;inset:0;z-index:1200;display:flex;justify-content:flex-end}
#cart-drawer[hidden]{display:none}
.drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.drawer-panel{position:relative;width:100%;max-width:min(420px,100vw);height:100%;background:#fff;display:flex;flex-direction:column;overflow:hidden;transform:translateX(100%);transition:transform .3s ease}
#cart-drawer:not([hidden]) .drawer-panel{transform:translateX(0)}
.drawer-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #eee}
.drawer-title{font-size:18px;font-weight:600;margin:0}
.drawer-close{background:none;border:none;font-size:20px;cursor:pointer;padding:4px 8px;color:#666;line-height:1}
.drawer-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px;display:flex;flex-direction:column;gap:16px;min-height:0}
.drawer-product-row{display:flex;gap:12px;align-items:flex-start}
.drawer-main-img{width:88px;height:88px;object-fit:cover;border-radius:8px;flex-shrink:0;border:1px solid #eee;background:#f5f5f5}
.drawer-product-meta{flex:1;min-width:0}
.drawer-product-name{font-size:15px;font-weight:600;margin:0 0 4px;line-height:1.4;word-break:break-word}
.drawer-sku-label{font-size:12px;color:#888;margin:0}
.drawer-variants{display:flex;flex-wrap:wrap;gap:8px}
.variant-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px;border:2px solid #eee;cursor:pointer;transition:border-color .15s;background:#f5f5f5}
.variant-thumb.active{border-color:#222}
.drawer-qty-row{display:flex;align-items:center;justify-content:space-between}
.drawer-qty-label{font-size:14px;color:#555}
.drawer-qty-ctrl{display:flex;align-items:center;border:1px solid #ddd;border-radius:6px;overflow:hidden}
.qty-btn{width:36px;height:36px;background:#f5f5f5;border:none;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.qty-btn:active{background:#e0e0e0}
.qty-value{width:40px;text-align:center;font-size:15px;font-weight:600;border-left:1px solid #ddd;border-right:1px solid #ddd;line-height:36px}
.drawer-price-breakdown{background:#f9f9f9;border-radius:8px;padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.price-row{display:flex;justify-content:space-between;font-size:14px;color:#555}
.price-row--total{font-size:16px;font-weight:700;color:#111;border-top:1px solid #eee;padding-top:8px;margin-top:4px}
.drawer-footer{flex-shrink:0;padding:16px 20px;padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px));border-top:1px solid #eee;display:flex;flex-direction:column;gap:10px}
.btn-pay{width:100%;padding:15px;background:#222;color:#fff;font-size:16px;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:background .2s}
.btn-pay:hover{background:#444}
.btn-pay:disabled{background:#999;cursor:not-allowed}
.drawer-secure-note{text-align:center;font-size:12px;color:#888;margin:0}
.drawer-error{font-size:13px;color:#c0392b;background:#fdecea;border-radius:6px;padding:8px 12px;margin:0;text-align:center}

#cart-fab{position:fixed;right:14px;bottom:14px;z-index:1190;border:none;background:#111;color:#fff;border-radius:999px;padding:12px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.18)}
#cart-fab:disabled{opacity:.6;cursor:not-allowed}
.cart-fab-label{font-size:14px;font-weight:600;line-height:1}
.cart-fab-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#e53e3e;font-size:12px;font-weight:700;line-height:1}
@media (max-width:768px){
  #cart-fab{bottom:calc(14px + env(safe-area-inset-bottom, 0px))}
}