/* Cart drawer. */
html.mp-drawer-locked { overflow: hidden; }
html.mp-drawer-locked body { padding-right: var(--mp-drawer-gap, 0); }

.mp-drawer { position: fixed; inset: 0; z-index: 100000; overflow: hidden; visibility: hidden; transition: visibility 0s linear .28s; }
.mp-drawer.is-open { visibility: visible; transition-delay: 0s; }
.mp-drawer__overlay { position: absolute; inset: 0; background: rgba(56, 33, 15, .42); opacity: 0; touch-action: none; transition: opacity .28s ease; }
.mp-drawer.is-open .mp-drawer__overlay { opacity: 1; }

.mp-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(440px, 100%); background: var(--mp-bg); box-shadow: -24px 0 48px -32px rgba(120, 62, 14, .6); color: var(--mp-ink); transform: translateX(100%); transition: transform .28s ease; }
.mp-drawer.is-open .mp-drawer__panel { transform: none; }
.mp-drawer__panel:focus, .mp-drawer__title:focus { outline: none; }
.mp-drawer__panel[aria-busy="true"] .mp-drawer__body { opacity: .6; transition: opacity .15s ease .1s; }
.mp-drawer__panel[aria-busy="true"] [data-mp-drawer-action] { cursor: progress; }

.mp-drawer__head { display: flex; flex-shrink: 0; align-items: center; gap: 10px; padding: 14px 16px 14px 24px; border-bottom: 1px solid var(--mp-border); }
.mp-drawer__title { margin: 0; font-size: 1.4rem; }
.mp-drawer__count { color: var(--mp-muted); font-size: .85rem; font-weight: 700; white-space: nowrap; }
.mp-drawer__close { display: grid; flex-shrink: 0; width: 44px; height: 44px; margin-left: auto; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--mp-ink); cursor: pointer; }
.mp-drawer__close:hover { background: var(--mp-peach); }

.mp-drawer button:focus-visible, .mp-drawer a:focus-visible { outline: 2px solid var(--mp-primary-dark); outline-offset: 2px; }

.mp-drawer__status, .mp-drawer__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.mp-drawer__notice { flex-shrink: 0; padding: 10px 24px; border-bottom: 1px solid var(--mp-border); background: var(--mp-peach); font-size: .9rem; font-weight: 700; line-height: 1.4; }
.mp-drawer__notice[hidden] { display: none; }
.mp-drawer__notice a { display: inline-block; margin-left: 4px; }

.mp-drawer__body { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.mp-drawer__loading { margin: 0; padding: 32px 24px; color: var(--mp-muted); }
.mp-drawer__scroll { flex: 1; min-height: 0; padding: 0 24px 20px; overflow-y: auto; overscroll-behavior: contain; }

.mp-drawer__progress { flex-shrink: 0; padding: 12px 24px 14px; border-bottom: 1px solid var(--mp-border); background: var(--mp-card); font-size: .9rem; font-weight: 700; line-height: 1.4; }
.mp-drawer__progress p { margin: 0 0 8px; }
.mp-drawer__progress.is-free p { color: var(--mp-primary-dark); }
.mp-drawer__meter { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: var(--mp-peach); }
.mp-drawer__meter span { display: block; height: 100%; border-radius: inherit; background: var(--mp-primary); transition: width .28s ease; }

.mp-drawer__items { margin: 0; padding: 0; list-style: none; }
.mp-drawer__item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--mp-border); }
.mp-drawer__thumb { display: block; width: 72px; height: 72px; overflow: hidden; border-radius: .75rem; background: var(--mp-paw) center / 50% no-repeat var(--mp-peach); }
.mp-drawer__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mp-drawer__thumb img[src*="placeholder"] { opacity: 0; }
.mp-drawer__name { margin: 0; font: 600 1.02rem/1.25 var(--mp-display); overflow-wrap: anywhere; }
.mp-drawer__name a { color: inherit; text-decoration: none; }
.mp-drawer__name a:hover { color: var(--mp-primary); }
.mp-drawer__unit { margin: 4px 0 10px; color: var(--mp-muted); font-size: .85rem; line-height: 1.3; }
.mp-drawer__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mp-drawer__qty { display: inline-flex; align-items: center; border: 1px solid #e2c6a8; border-radius: 999px; background: var(--mp-card); }
.mp-drawer__qty button { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--mp-ink); cursor: pointer; font: 700 1.1rem/1 var(--mp-sans); }
.mp-drawer__qty button:hover:not(:disabled) { background: var(--mp-peach); }
.mp-drawer__qty button:disabled { color: #b49a84; cursor: not-allowed; }
.mp-drawer__qty-value { min-width: 1.6em; font-weight: 800; text-align: center; }
.mp-drawer__remove { min-height: 38px; padding: 0 2px; border: 0; background: transparent; color: var(--mp-muted); cursor: pointer; font: 700 .85rem var(--mp-sans); text-decoration: underline; text-underline-offset: 2px; }
.mp-drawer__remove:hover { color: var(--mp-primary-dark); }
.mp-drawer__line { margin: 0 0 0 auto; font: 600 1.05rem/1.2 var(--mp-display); white-space: nowrap; }

.mp-drawer__upsell { display: grid; gap: 12px; margin-top: 20px; padding: 16px; border: 1px dashed var(--mp-orange); border-radius: var(--mp-radius); background: var(--mp-peach); }
.mp-drawer__upsell p { margin: 0; }
.mp-drawer__upsell-label { color: var(--mp-primary-dark); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mp-drawer__upsell-name { margin-top: 2px !important; font: 600 1.02rem/1.25 var(--mp-display); overflow-wrap: anywhere; }
.mp-drawer__upsell-text { margin-top: 4px !important; color: var(--mp-muted); font-size: .85rem; line-height: 1.4; }
.mp-drawer__upsell-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mp-drawer__upsell-price { font: 600 1.15rem var(--mp-display); white-space: nowrap; }

.mp-drawer__foot { flex-shrink: 0; padding: 16px 24px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--mp-border); background: var(--mp-card); }
.mp-drawer__totals { margin: 0; }
.mp-drawer__totals > div { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.mp-drawer__totals dt { font-weight: 700; }
.mp-drawer__totals dd { margin: 0; font: 600 1.2rem/1.3 var(--mp-display); white-space: nowrap; }
.mp-drawer__grand { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--mp-border); }
.mp-drawer__tax { margin: 0 0 12px; color: var(--mp-muted); font-size: .8rem; }
.mp-drawer__foot .mp-btn { display: block; padding: 12px 20px; text-align: center; }
.mp-drawer__foot .mp-btn + .mp-btn { margin-top: 8px; }

.mp-drawer__empty { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; text-align: center; }
.mp-drawer__empty p { margin: 0 0 20px; color: var(--mp-muted); }
.mp-drawer__empty .mp-drawer__empty-title { margin-bottom: 8px; color: var(--mp-ink); font: 600 1.35rem/1.2 var(--mp-display); }
.mp-drawer__empty-icon { margin-bottom: 12px; color: var(--mp-orange); font-size: 2.6rem; line-height: 1; }

/* On short screens everything scrolls together, so the checkout button stays reachable. */
@media (max-height: 560px) {
	.mp-drawer__body { overflow-y: auto; overscroll-behavior: contain; }
	.mp-drawer__scroll { flex: none; overflow: visible; }
}
@media (max-width: 620px) {
	.mp-drawer__panel { width: 100%; }
	.mp-drawer__head { padding-left: 16px; padding-right: 8px; }
	.mp-drawer__notice, .mp-drawer__progress { padding-left: 16px; padding-right: 16px; }
	.mp-drawer__scroll { padding-left: 16px; padding-right: 16px; }
	.mp-drawer__foot { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.mp-drawer, .mp-drawer__overlay, .mp-drawer__panel, .mp-drawer__meter span, .mp-drawer__panel[aria-busy="true"] .mp-drawer__body { transition: none; }
}