body.dksn-order-page {
	--dksn-order-gutter: clamp( 16px, 2.5vw, 40px );
}

body.dksn-order-page header.wp-block-template-part,
body.dksn-order-page main > .wp-block-group.alignfull.has-tertiary-background-color {
	display: none;
}

body.dksn-order-page .entry-content {
	padding-inline: var(--dksn-order-gutter);
}

body.dksn-order-page .entry-content > .dinekit-order {
	width: min( 1600px, 100% );
	max-width: none;
	margin-inline: auto;
}

body.dksn-order-page .dinekit-order .dksn-nav {
	--dksn-nav-mode: top;
	position: sticky;
	top: calc( var(--dksn-sticky-base, 0px) + var(--dksn-heading-space, 0px) );
	z-index: 20;
	margin: 0 0 16px;
	padding: 8px 0;
	background: #f6f1ec;
	border-top: 1px solid #e6ded6;
	border-bottom: 1px solid #e6ded6;
}

body.dksn-order-page .dinekit-order > .dinekit-order__heading {
	position: sticky;
	top: var(--dksn-sticky-base, 0px);
	z-index: 30;
	margin: 0;
	padding-bottom: 20px;
	background: var(--dko-soft, #f8fafc);
}

body.dksn-order-page .dinekit-order .dinekit-order__table-banner {
	position: sticky;
	top: calc( var(--dksn-sticky-base, 0px) + var(--dksn-heading-space, 0px) + var(--dksn-nav-space, 0px) );
	z-index: 10;
	background: var(--dko-soft, #f8fafc);
}

body.dksn-order-page .dinekit-order .dksn-nav[hidden] {
	display: none;
}

body.dksn-order-page .dinekit-order .dksn-nav__scroller {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0 2px;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

body.dksn-order-page .dinekit-order .dksn-nav__scroller::-webkit-scrollbar {
	display: none;
}

body.dksn-order-page .dinekit-order .dksn-nav__item {
	flex: 0 0 auto;
	max-inline-size: min( 68vw, 240px );
	overflow: hidden;
	border: 1px solid #e6ded6;
	border-radius: 999px;
	padding: 8px 12px;
	background: #fff;
	color: var(--dko-ink2, #334155);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-align: left;
	text-overflow: ellipsis;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.dksn-order-page .dinekit-order .dksn-nav__item:hover {
	border-color: var(--dko-accent, #4f46e5);
	color: var(--dko-accent-dark, #4338ca);
}

body.dksn-order-page .dinekit-order .dksn-nav__item:focus-visible {
	outline: 3px solid color-mix( in srgb, var(--dko-accent, #4f46e5) 38%, transparent );
	outline-offset: 2px;
}

body.dksn-order-page .dinekit-order .dksn-nav__item--active {
	border-color: var(--dko-accent-dark, #312e81);
	background: var(--dko-accent-dark, #312e81);
	color: #fff;
	-webkit-text-fill-color: #fff;
	opacity: 1;
	visibility: visible;
	text-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	font-weight: 800;
}

/* WordPress applies its button focus palette after a touch/click. Keep the active
 * state readable while preserving the separate visible keyboard focus outline. */
body.dksn-order-page .dinekit-order .dksn-nav__item--active:focus,
body.dksn-order-page .dinekit-order .dksn-nav__item--active:focus-visible,
body.dksn-order-page .dinekit-order .dksn-nav__item--active:active {
	border-color: var(--dko-accent-dark, #312e81) !important;
	background: var(--dko-accent-dark, #312e81) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	opacity: 1 !important;
	visibility: visible !important;
	text-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	transition: none;
}

@media ( max-width: 720px ) {
	body.dksn-order-page .dinekit-order__grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	body.dksn-order-page .dinekit-order__item-info,
	body.dksn-order-page .dinekit-order__item-desc {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	body.dksn-order-page .dinekit-order .dksn-nav {
		margin-bottom: 12px;
	}

	body.dksn-order-page .dinekit-order .dksn-nav__item {
		padding: 8px 11px;
		min-block-size: 44px;
		font-size: 12px;
	}
}

@media ( max-width: 959px ) {
	body.dksn-order-page .dinekit-order .dksn-nav::after {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		width: 18px;
		background: linear-gradient( 90deg, rgb(246 241 236 / 0%), #f6f1ec 90% );
		pointer-events: none;
		content: '';
	}
}

@media ( min-width: 721px ) and ( max-width: 959px ) {
	body.dksn-order-page .dinekit-order__grid {
		grid-template-columns: minmax( 0, 1fr ) 300px;
		gap: 24px;
	}
}

@media ( min-width: 960px ) {
	body.dksn-order-page .dinekit-order {
		display: grid;
		grid-template-columns: clamp( 180px, 16vw, 220px ) minmax( 0, 1fr );
		column-gap: clamp( 20px, 2vw, 32px );
		align-items: start;
	}

	body.dksn-order-page .dinekit-order__heading {
		grid-column: 1 / -1;
	}

	body.dksn-order-page .dinekit-order .dksn-nav {
		--dksn-nav-mode: side;
		grid-column: 1;
		grid-row: 2;
		align-self: start;
		margin: 0;
		padding: 0 12px 0 0;
		background: transparent;
		border: 0;
		border-right: 1px solid var(--dko-border, #e6e8ee);
	}

	body.dksn-order-page .dinekit-order .dinekit-order__table-banner {
		top: calc( var(--dksn-sticky-base, 0px) + var(--dksn-heading-space, 0px) );
	}

	body.dksn-order-page .dinekit-order .dksn-nav__scroller {
		flex-direction: column;
		align-items: stretch;
		gap: 5px;
		max-height: calc( 100vh - var(--dksn-sticky-top, 0px) - 24px );
		overflow-x: hidden;
		overflow-y: auto;
		padding: 0 2px 0 0;
		scrollbar-width: thin;
	}

	body.dksn-order-page .dinekit-order .dksn-nav__item {
		width: 100%;
		max-inline-size: none;
		padding: 9px 11px;
		font-size: 12px;
	}

	body.dksn-order-page .dinekit-order__app {
		grid-column: 2;
		min-width: 0;
	}

	body.dksn-order-page .dinekit-order:has( .dksn-nav[hidden] ) .dinekit-order__app {
		grid-column: 1 / -1;
	}

	body.dksn-order-page .dinekit-order__grid {
		grid-template-columns: minmax( 0, 1fr ) clamp( 300px, 25vw, 340px );
		gap: clamp( 20px, 2vw, 32px );
	}

	body.dksn-order-page .dinekit-order__cart {
		position: sticky;
		top: var(--dksn-cart-top, 16px);
		max-height: calc( 100vh - var(--dksn-cart-top, 16px) - 16px );
		max-height: calc( 100dvh - var(--dksn-cart-top, 16px) - 16px );
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	body.dksn-order-page .dinekit-order__cart::-webkit-scrollbar {
		width: 6px;
	}

	body.dksn-order-page .dinekit-order__cart::-webkit-scrollbar-thumb {
		background: color-mix( in srgb, var(--dko-muted, #64748b) 45%, transparent );
		border-radius: 999px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	body.dksn-order-page .dinekit-order .dksn-nav__item {
		transition: none;
	}
}