/* Delivery / pickup panel (cart + checkout) */
.xo-dl {
	--dl-ink: #1f2328; --dl-line: #dfe3e8; --dl-bg: #f4f7fa; --dl-accent: var(--xof-accent, #1f1f1f);
	margin: 0 0 24px; border: 1px solid #e6eaee; border-radius: 8px; background: var(--dl-bg); color: var(--dl-ink);
	font-family: var(--xo-font-body, inherit); overflow: hidden; max-width: 100%; box-sizing: border-box;
	contain: inline-size; /* the swipeable tiles never make the page wider than the phone */
}
.xo-dl-paused { padding: 12px 22px; background: #fff4e5; color: #8a4b00; font-weight: 600; }
.xo-dl-where { display: flex; align-items: flex-start; gap: 14px; padding: 22px 26px 18px; }
.xo-dl-where > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.xo-dl-ico { flex: none; width: 30px; height: 30px; color: var(--dl-ink); }
.xo-dl-h { font-size: 1.3rem; font-weight: 700; line-height: 1.2; font-family: var(--xo-font-head, inherit); }
.xo-dl button.xo-dl-addr, .xo-dl button.xo-dl-switch, .xo-dl button.xo-dl-all {
	appearance: none; background: none !important; border: 0 !important; padding: 0 !important; margin: 0; box-shadow: none !important;
	color: var(--dl-ink) !important; font: inherit; cursor: pointer; text-align: left; min-height: 0; width: auto; border-radius: 0;
}
.xo-dl button.xo-dl-addr { font-size: 1.05rem; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.xo-dl button.xo-dl-switch { flex: none; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; font-size: .95rem; }
.xo-dl-when { margin: 0 26px; padding: 18px 0 22px; border-top: 1px solid var(--dl-line); }
.xo-dl-picked, .xo-dl-none { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; font-size: 1.1rem; font-weight: 600; }
.xo-dl-none { font-weight: 500; color: #5f6670; }
.xo-dl-row { display: flex; align-items: center; gap: 18px; padding-left: 44px; }
.xo-dl-tiles { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.xo-dl button.xo-dl-tile {
	appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin: 0; padding: 14px 16px !important;
	min-height: 0; width: 100%; border: 1px solid var(--dl-line) !important; border-radius: 4px !important; background: #fff !important; color: var(--dl-ink) !important;
	font: inherit; text-align: left; cursor: pointer; box-shadow: none !important; line-height: 1.25; transition: border-color .12s, box-shadow .12s;
}
.xo-dl button.xo-dl-tile strong { font-size: 1rem; font-weight: 700; }
.xo-dl button.xo-dl-tile span { font-size: .9rem; white-space: nowrap; }
.xo-dl button.xo-dl-tile small { font-size: .85rem; color: #5f6670; }
.xo-dl button.xo-dl-tile:hover { border-color: #9aa3ad !important; }
.xo-dl button.xo-dl-tile.is-on { border: 2px solid var(--dl-ink) !important; padding: 13px 15px !important; box-shadow: 0 1px 3px rgba(0,0,0,.08) !important; }
.xo-dl button.xo-dl-tile:focus-visible, .xo-dl button:focus-visible { outline: 3px solid #4dabf7; outline-offset: 2px; }
.xo-dl button.xo-dl-all { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.xo-dl button.xo-dl-all span { text-decoration: underline; text-underline-offset: 3px; }
.xo-dl button.xo-dl-all .xo-dl-ico { width: 22px; height: 22px; }
.xo-dl-more { margin: 18px 0 0 44px; padding-top: 6px; }
.xo-dl-more[hidden] { display: none; }
.xo-dl-day { margin: 14px 0 8px; font-size: .95rem; font-weight: 700; }
.xo-dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.xo-dl-note { margin: 12px 0 0 44px; color: #b42318; font-weight: 600; }

/* Sizes follow the panel's own width (the checkout column is narrower than the cart page). */
.xo-dl { container-type: inline-size; container-name: xodl; }
@container xodl (max-width: 900px) {
	.xo-dl-row { flex-direction: column; align-items: stretch; gap: 12px; }
	.xo-dl-tiles { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 4px; scroll-snap-type: x proximity; scrollbar-width: thin; }
	.xo-dl button.xo-dl-tile { flex: 0 0 140px; scroll-snap-align: start; }
	.xo-dl button.xo-dl-all { align-self: flex-start; }
}
@container xodl (max-width: 560px) {
	.xo-dl-where { padding: 16px 16px 14px; gap: 10px; }
	.xo-dl-when { margin: 0 16px; padding: 14px 0 16px; }
	.xo-dl-h { font-size: 1.15rem; }
	.xo-dl-row, .xo-dl-more, .xo-dl-note { padding-left: 0; margin-left: 0; }
	.xo-dl-tiles { scrollbar-width: none; }
	.xo-dl-tiles::-webkit-scrollbar { display: none; }
	.xo-dl button.xo-dl-tile { flex-basis: 128px; }
	.xo-dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Checkout: the panel replaces the old order-type and "When" boxes */
.xo-co .xo-dl { margin-bottom: 18px; }