/*
 * OSB Mini Cart — floating trigger + slide-out bag drawer.
 * Tokens default to the Ocean Sushi kit globals; override on :root to retheme.
 */
:root {
	--osbmc-brand: #FF567B;
	--osbmc-brand-deep: #D23E5E;
	--osbmc-brand-soft: #FFE7ED;
	--osbmc-ink: #1E355E;
	--osbmc-ink-2: #45566F;
	--osbmc-muted: #7C6F76;
	--osbmc-surface: #FFFFFF;
	--osbmc-bar: #1E355E;
	--osbmc-bar-ink: #FFFFFF;
	--osbmc-line: #EFE1E6;
	--osbmc-radius: 999px;
	/* above xt-woo-floating-cart (90198) and the delivery-time popup (99999) */
	--osbmc-z: 100010;
	--osbmc-shadow: 0 6px 24px rgba(30, 53, 94, .22), 0 2px 6px rgba(30, 53, 94, .12);
	--osbmc-drawer-w: 420px;
}

/* ------------------------------------------------------------- the trigger */

.osbmc-trigger {
	position: fixed;
	right: 20px;
	/* raised by the client when another fixed widget already sits in this
	   corner — the site's delivery-time popup lives here too. */
	bottom: var(--osbmc-offset, 20px);
	z-index: var(--osbmc-z);
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 13px 22px 13px 13px;
	border: 0;
	border-radius: var(--osbmc-radius);
	background: var(--osbmc-bar);
	color: var(--osbmc-bar-ink);
	box-shadow: var(--osbmc-shadow);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease;
}

.osbmc-trigger[hidden] {
	display: none;
}

.osbmc-trigger:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 28px rgba(30, 53, 94, .28), 0 2px 6px rgba(30, 53, 94, .14);
}

.osbmc-trigger:active {
	transform: translateY(0);
}

.osbmc-trigger:focus-visible {
	outline: 3px solid var(--osbmc-brand);
	outline-offset: 3px;
}

.osbmc-trigger__count,
.osbmc-checkout__count {
	display: grid;
	place-items: center;
	min-width: 26px;
	height: 26px;
	padding: 0 7px;
	border-radius: var(--osbmc-radius);
	background: var(--osbmc-brand);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.osbmc-trigger__label {
	letter-spacing: .02em;
}

.osbmc-trigger__total {
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- the overlay */

.osbmc-overlay {
	position: fixed;
	inset: 0;
	z-index: calc(var(--osbmc-z) + 1);
	background: rgba(30, 53, 94, .45);
	opacity: 0;
	transition: opacity .25s ease;
}

.osbmc-overlay.is-open {
	opacity: 1;
}

.osbmc-overlay[hidden] {
	display: none;
}

html.osbmc-locked,
html.osbmc-locked body {
	overflow: hidden;
}

/*
 * Other floating widgets sit in the same corner and outrank the drawer:
 * the estimated-delivery-time popup is z-index 99999 and was covering the
 * checkout button. Hide them for as long as the bag is open.
 */
html.osbmc-locked .edt-popup,
html.osbmc-locked .xt_woofc-trigger,
html.osbmc-locked .sstt-btn {
	display: none !important;
}

/* -------------------------------------------------------------- the drawer */

.osbmc-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: calc(var(--osbmc-z) + 2);
	display: flex;
	flex-direction: column;
	width: min(var(--osbmc-drawer-w), 100vw);
	background: var(--osbmc-surface);
	box-shadow: -8px 0 32px rgba(30, 53, 94, .18);
	transform: translateX(100%);
	transition: transform .26s cubic-bezier(.2, .7, .3, 1);
}

.osbmc-drawer.is-open {
	transform: translateX(0);
}

.osbmc-drawer[hidden] {
	display: none;
}

.osbmc-drawer.is-busy {
	pointer-events: none;
}

.osbmc-drawer.is-busy .osbmc-items {
	opacity: .55;
}

.osbmc-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 20px 16px;
	border-bottom: 1px solid var(--osbmc-line);
}

.osbmc-drawer__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--osbmc-ink);
}

.osbmc-close {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--osbmc-brand-soft);
	color: var(--osbmc-ink);
	cursor: pointer;
	transition: background .15s ease;
}

.osbmc-close:hover {
	background: var(--osbmc-brand);
	color: #fff;
}

.osbmc-close:focus-visible {
	outline: 2px solid var(--osbmc-brand);
	outline-offset: 2px;
}

.osbmc-close svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.osbmc-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 4px 20px;
}

.osbmc-empty {
	margin: 40px 0;
	text-align: center;
	color: var(--osbmc-muted);
}

.osbmc-empty[hidden] {
	display: none;
}

.osbmc-items {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------------------------------------------------------------- one line */

.osbmc-item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid var(--osbmc-line);
	list-style: none;
}

.osbmc-item:last-child {
	border-bottom: 0;
}

.osbmc-item__img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	border-radius: 8px;
	background: var(--osbmc-brand-soft);
}

.osbmc-item__main {
	min-width: 0;
}

.osbmc-item__name {
	margin: 0 0 3px;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--osbmc-ink);
}

.osbmc-item__num {
	color: var(--osbmc-brand);
	font-variant-numeric: tabular-nums;
}

.osbmc-item__meta {
	margin: 0 0 5px;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--osbmc-ink-2);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.osbmc-item__options {
	margin: 0 0 5px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1px;
}

.osbmc-item__options li {
	margin: 0;
	font-size: 12px;
	line-height: 1.3;
	color: var(--osbmc-ink);
	font-weight: 500;
}

.osbmc-item__options span {
	color: var(--osbmc-muted);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

.osbmc-item__price {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--osbmc-brand-deep);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- the stepper */

.osbmc-step {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	border: 1px solid var(--osbmc-line);
	border-radius: var(--osbmc-radius);
	overflow: hidden;
}

.osbmc-step button {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--osbmc-brand);
	font: inherit;
	font-size: 19px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background .12s ease;
}

.osbmc-step button:hover {
	background: var(--osbmc-brand-soft);
	color: var(--osbmc-brand);
}

.osbmc-step button:focus-visible {
	outline: 2px solid var(--osbmc-brand);
	outline-offset: -3px;
}

.osbmc-qty {
	min-width: 26px;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	color: var(--osbmc-ink);
	font-variant-numeric: tabular-nums;
	user-select: none;
}

.osbmc-qty--fixed {
	padding: 0 10px;
}

/* --------------------------------------------------------- checkout footer */

.osbmc-drawer__foot {
	flex: 0 0 auto;
	padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--osbmc-line);
	background: var(--osbmc-surface);
}

.osbmc-checkout {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 20px;
	border-radius: var(--osbmc-radius);
	background: var(--osbmc-bar);
	color: var(--osbmc-bar-ink);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter .15s ease;
}

.osbmc-checkout:hover,
.osbmc-checkout:focus {
	color: var(--osbmc-bar-ink);
	filter: brightness(1.12);
}

.osbmc-checkout:focus-visible {
	outline: 3px solid var(--osbmc-brand);
	outline-offset: 2px;
}

.osbmc-checkout[hidden] {
	display: none;
}

.osbmc-checkout__total {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 600px) {
	:root {
		--osbmc-drawer-w: 100vw;
	}

	.osbmc-trigger {
		right: 12px;
		bottom: var(--osbmc-offset, 12px);
		left: 12px;
		justify-content: center;
		padding: 14px 18px;
	}

	.osbmc-item {
		grid-template-columns: 56px minmax(0, 1fr) auto;
		gap: 12px;
	}

	.osbmc-item__img {
		width: 56px;
		height: 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.osbmc-drawer,
	.osbmc-overlay,
	.osbmc-trigger {
		transition: none;
	}
}