button.cart { font: inherit; font-size: var(--fs-2); color: var(--ink2); border: 1px solid var(--line); background: var(--panel); padding: 7px 12px; cursor: pointer; transition: border-color .2s; }
button.cart:hover { border-color: var(--accent); }
button.cart b { display: inline-block; }
button.cart.bump b { animation: iq-bump .5s cubic-bezier(.22,1,.36,1); }
@keyframes iq-bump { 40% { transform: scale(1.4); color: var(--accent); } }

.iq-scrim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 55; background: rgba(20, 24, 34, .26); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.iq-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(400px, 100vw); display: flex; flex-direction: column; background: var(--surface-solid, #F6F2EE); border-left: 1px solid var(--line); box-shadow: -30px 0 60px -40px rgba(20, 24, 34, .5); color: var(--ink); font-size: var(--fs-2); transform: translateX(100%); visibility: hidden; transition: transform .4s cubic-bezier(.22,1,.36,1), visibility 0s .4s; }
.iq-on .iq-scrim { opacity: 1; visibility: visible; transition: opacity .3s; }
.iq-on .iq-drawer { transform: none; visibility: visible; transition: transform .4s cubic-bezier(.22,1,.36,1); }

.iq-top { flex: none; display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 14px 0 24px; border-bottom: 1px solid var(--line); }
.iq-top h2 { margin: 0; font-size: var(--fs-4); font-weight: 600; }
.iq-top h2 [data-n] { margin-left: 8px; font-weight: 500; color: var(--accent); }
body.iq-on { overflow: hidden; }
.iq-x { width: 40px; height: 40px; border: 0; background: none; font-size: var(--fs-5); line-height: 1; color: var(--ink2); cursor: pointer; }
.iq-x:hover { color: var(--ink); }
.iq-body { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 6px 24px 28px; }

.iq-items { list-style: none; margin: 0 0 24px; padding: 0; }
.iq-items li { display: flex; align-items: center; gap: 12px; min-height: 46px; border-bottom: 1px solid var(--line); }
.iq-items .sku { flex: none; width: 68px; font-size: var(--fs-1); color: var(--accent); }
.iq-items .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iq-rm { flex: none; width: 32px; height: 32px; border: 0; background: none; font-size: var(--fs-4); color: var(--ink3); cursor: pointer; }
.iq-rm:hover { color: var(--danger, #B3261E); }
.iq-empty { margin: 0 0 18px; padding: 16px 0 0; line-height: 1.7; color: var(--ink2); }

.iq-sub { margin: 0 0 10px; font-size: var(--fs-2); font-weight: 600; }
.iq-form { display: grid; gap: 10px; }
.iq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.iq-in { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 0; background: var(--field, #fff); font: inherit; font-size: var(--fs-2); color: var(--ink); outline: none; transition: border-color .2s; }
.iq-in::placeholder { color: var(--ink3); }
.iq-in:focus { border-color: var(--accent); }
.iq-in[aria-invalid="true"] { border-color: var(--danger, #B3261E); }
.iq-agree { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-1); line-height: 1.6; color: var(--ink2); cursor: pointer; }
.iq-agree input { appearance: none; -webkit-appearance: none; flex: none; width: 16px; height: 16px; margin: 1px 0 0; border: 1.5px solid var(--ink3); border-radius: 0; background: var(--field, #fff); display: grid; place-items: center; cursor: pointer; }
.iq-agree input:checked { background: var(--accent); border-color: var(--accent); }
.iq-agree input:checked::after { content: ""; width: 8px; height: 4px; border: 2px solid var(--on-ink, #fff); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.iq-agree a { color: var(--accent); }
.iq-err { margin: -4px 0 0; font-size: var(--fs-1); color: var(--danger, #B3261E); }
.iq-go { height: 46px; border: 1px solid var(--ink); background: var(--ink); color: var(--on-ink, #fff); font: inherit; font-size: var(--fs-2); cursor: pointer; transition: background-color .2s, border-color .2s; }
.iq-go:hover { background: var(--accent); border-color: var(--accent); }

.iq-done { padding: 4px 0 2px; }
.iq-done b { display: block; font-size: var(--fs-3); }
.iq-done p { margin: 6px 0 14px; line-height: 1.7; color: var(--ink2); }
.iq-done button { height: 40px; padding: 0 16px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: var(--fs-2); cursor: pointer; }
.iq-done button:hover { border-color: var(--accent); color: var(--accent); }

.iq-alt { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); }
.iq-alt dl { display: grid; grid-template-columns: 40px 1fr; gap: 8px 12px; margin: 0; font-size: var(--fs-2); }
.iq-alt dt { color: var(--ink3); }
.iq-alt dd { margin: 0; }
.iq-alt a { color: var(--ink); }
.iq-tbd { color: var(--ink3); }

@media (max-width: 420px) { .iq-row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .iq-drawer, .iq-scrim { transition: none !important; } button.cart.bump b { animation: none; } }