/* VRL drawer checkout (phones). The cart widens from 96vw to the full screen; the checkout slides in over the cart inside it. */
/* Keep the cart controls above the staff toolbar, but below the research gate.
   A fading/closed drawer must never intercept a tap on the page behind it. */
#vrlDrawerOverlay { z-index: 100000; }
#vrlDrawer { z-index: 100001; }
#vrlDrawerOverlay:not(.is-open), #vrlDrawer:not(.is-open) { pointer-events: none; }
#vrlDrawer.vrl-dc-full { width: 100vw !important; max-width: none !important; box-shadow: none; }
#vrlDrawer { transition-property: transform, width; transition-duration: 300ms, 320ms; transition-timing-function: var(--vrl-ease-out, ease-out), cubic-bezier(.2, .8, .2, 1); }
.vrl-dc {
	position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column;
	background: var(--vrl-bg-subtle, #f5f7fa);
	transform: translateX(100%); transition: transform 340ms cubic-bezier(.2, .8, .2, 1);
	pointer-events: none;
}
.vrl-dc.is-open { transform: translateX(0); pointer-events: auto; }
.vrl-dc[hidden] { display: none !important; }
.vrl-dc__bar {
	flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; height: 50px; padding: 0 10px;
	background: var(--vrl-white, #fdfdfe); border-bottom: 1px solid var(--vrl-border, #e4e7ec);
	padding-top: env(safe-area-inset-top, 0px); box-sizing: content-box;
}
.vrl-dc__back {
	justify-self: start; display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 8px 0 2px; border: 0; background: none;
	color: var(--vrl-fg-subtle, #4c5260); font: 600 14px var(--vrl-font-ui, 'Manrope', system-ui, sans-serif); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.vrl-dc__back:active { opacity: .6; }
.vrl-dc__back:focus-visible { outline: 2px solid var(--vrl-link, #2563eb); outline-offset: 2px; border-radius: 8px; }
.vrl-dc__title { font: 700 15px var(--vrl-font-display, 'Archivo', system-ui, sans-serif); color: var(--vrl-fg-base, #181b21); }
.vrl-dc__secure { justify-self: end; display: inline-flex; align-items: center; gap: 4px; font: 600 12px var(--vrl-font-ui, 'Manrope', system-ui, sans-serif); color: var(--vrl-savings, #15803d); }
.vrl-dc__body { position: relative; flex: 1 1 auto; min-height: 0; }
.vrl-dc__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.vrl-dc.is-ready .vrl-dc__frame { opacity: 1; pointer-events: auto; }
.vrl-dc:not(.is-open) .vrl-dc__frame, #vrlDrawer:not(.is-open) .vrl-dc__frame { pointer-events: none; }
.vrl-dc__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; font: 500 14px var(--vrl-font-ui, 'Manrope', system-ui, sans-serif); color: var(--vrl-fg-muted, #6d7484); }
.vrl-dc.is-ready .vrl-dc__loading { display: none; }
.vrl-dc__spin { width: 18px; height: 18px; border: 2px solid var(--vrl-border-strong, #d1d5dd); border-top-color: var(--vrl-navy, #010f2d); border-radius: 50%; animation: vrl-dc-spin .8s linear infinite; }
@keyframes vrl-dc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #vrlDrawer, .vrl-dc, .vrl-dc__frame { transition: none !important; } .vrl-dc__spin { animation: none; } }