/* Kitchenu — product categories modal + header trigger */

body.ku-cat-modal-open {
	overflow: hidden !important;
	touch-action: none;
}

/* Header trigger — desktop nav-right */
#header .ku-categories-nav-item {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

#header .ku-cat-modal-trigger {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	min-height: 42px !important;
	padding: 0 14px !important;
	border: 1px solid rgba(251, 191, 36, 0.45) !important;
	border-radius: 999px !important;
	background: linear-gradient(145deg, #fffbeb 0%, #ffffff 100%) !important;
	color: #c2410c !important;
	font-family: var(--ku-font, 'Vazirmatn', Tahoma, Arial, sans-serif) !important;
	font-size: 12.5px !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	cursor: pointer !important;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.04),
		inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
	transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease !important;
}

#header .ku-cat-modal-trigger:hover,
#header .ku-cat-modal-trigger:focus-visible {
	border-color: #fb923c !important;
	color: #9a3412 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 8px 20px rgba(249, 115, 22, 0.14) !important;
	outline: none !important;
}

#header .ku-cat-modal-trigger__icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	border-radius: 9px !important;
	background: linear-gradient(135deg, #ffedd5 0%, #ffffff 100%) !important;
	border: 1px solid #fed7aa !important;
	color: #ea580c !important;
	flex: 0 0 28px !important;
}

#header .ku-cat-modal-trigger__icon svg {
	width: 16px !important;
	height: 16px !important;
}

#header .ku-cat-modal-trigger__label {
	display: inline-block !important;
	white-space: nowrap !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	word-break: keep-all !important;
	font-family: inherit !important;
}

/* Mobile header icon-only */
body.ku-mobile-header-active #header .ku-categories-nav-item {
	display: flex !important;
	align-items: center !important;
}

body.ku-mobile-header-active #header .ku-cat-modal-trigger {
	min-width: 44px !important;
	min-height: 44px !important;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	border-radius: 14px !important;
}

body.ku-mobile-header-active #header .ku-cat-modal-trigger__label {
	display: none !important;
}

body.ku-mobile-header-active #header .ku-cat-modal-trigger__icon {
	width: 22px !important;
	height: 22px !important;
	border: none !important;
	background: transparent !important;
}

body.ku-mobile-header-active #header .ku-cat-modal-trigger__icon svg {
	width: 20px !important;
	height: 20px !important;
}

/* Modal shell */
.ku-cat-modal {
	position: fixed !important;
	inset: 0 !important;
	z-index: 10000050 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 18px !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: opacity 0.22s ease, visibility 0.22s ease !important;
}

.ku-cat-modal.ku-cat-modal--visible {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

.ku-cat-modal__backdrop {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(15, 23, 42, 0.45) !important;
	backdrop-filter: blur(10px) saturate(120%) !important;
	-webkit-backdrop-filter: blur(10px) saturate(120%) !important;
}

.ku-cat-modal__panel {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	width: min(980px, 100%) !important;
	max-height: min(86vh, 720px) !important;
	border-radius: 20px !important;
	border: 1px solid rgba(255, 255, 255, 0.78) !important;
	background:
		linear-gradient(165deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.92) 55%, rgba(255, 247, 237, 0.88) 100%) !important;
	backdrop-filter: blur(24px) saturate(165%) !important;
	-webkit-backdrop-filter: blur(24px) saturate(165%) !important;
	box-shadow:
		0 28px 64px rgba(15, 23, 42, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
	overflow: hidden !important;
	direction: rtl !important;
	transform: translateY(12px) scale(0.985) !important;
	transition: transform 0.24s ease !important;
}

.ku-cat-modal.ku-cat-modal--visible .ku-cat-modal__panel {
	transform: translateY(0) scale(1) !important;
}

.ku-cat-modal__head {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 16px 16px 12px !important;
	border-bottom: 1px solid #e2e8f0 !important;
	background: rgba(255, 255, 255, 0.82) !important;
}

.ku-cat-modal__badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	height: 42px !important;
	border-radius: 13px !important;
	background: linear-gradient(135deg, #ffedd5 0%, #ffffff 100%) !important;
	border: 1px solid #fdba74 !important;
	color: #ea580c !important;
	flex: 0 0 42px !important;
}

.ku-cat-modal__badge svg {
	width: 20px !important;
	height: 20px !important;
}

.ku-cat-modal__titles {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.ku-cat-modal__title {
	margin: 0 !important;
	color: #0f172a !important;
	font-size: 16px !important;
	font-weight: 900 !important;
	line-height: 1.35 !important;
}

.ku-cat-modal__subtitle {
	margin: 2px 0 0 !important;
	color: #64748b !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
}

.ku-cat-modal__close {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 11px !important;
	background: #ffffff !important;
	color: #64748b !important;
	font-size: 22px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	flex: 0 0 36px !important;
}

.ku-cat-modal__close:hover {
	border-color: #cbd5e1 !important;
	color: #0f172a !important;
}

.ku-cat-modal__search-wrap {
	padding: 0 16px 12px !important;
}

.ku-cat-modal__search {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 0 12px !important;
	min-height: 44px !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 14px !important;
	background: #ffffff !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.ku-cat-modal__search:focus-within {
	border-color: #fdba74 !important;
	box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18) !important;
}

.ku-cat-modal__search-icon {
	display: inline-flex !important;
	color: #94a3b8 !important;
	flex: 0 0 auto !important;
}

.ku-cat-modal__search-icon svg {
	width: 18px !important;
	height: 18px !important;
}

.ku-cat-modal__search-input {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	border: none !important;
	background: transparent !important;
	color: #0f172a !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	outline: none !important;
}

.ku-cat-modal__search-input::placeholder {
	color: #94a3b8 !important;
}

.ku-cat-modal__body {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	overflow: auto !important;
	padding: 4px 16px 14px !important;
	-webkit-overflow-scrolling: touch !important;
}

.ku-cat-modal__loading,
.ku-cat-modal__empty {
	padding: 28px 12px !important;
	text-align: center !important;
	color: #64748b !important;
	font-size: 13px !important;
	font-weight: 700 !important;
}

.ku-cat-modal__section + .ku-cat-modal__section {
	margin-top: 14px !important;
	padding-top: 12px !important;
	border-top: 1px solid rgba(226, 232, 240, 0.85) !important;
}

.ku-cat-modal__section-head {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin-bottom: 8px !important;
	padding: 0 2px !important;
}

.ku-cat-modal__section-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 30px !important;
	height: 30px !important;
	border-radius: 10px !important;
	flex: 0 0 30px !important;
}

.ku-cat-modal__section-icon svg {
	width: 15px !important;
	height: 15px !important;
}

.ku-cat-modal__section-title {
	margin: 0 !important;
	color: #0f172a !important;
	font-size: 12.5px !important;
	font-weight: 900 !important;
}

.ku-cat-modal__grid {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: 8px !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	padding: 2px 2px 8px !important;
	scroll-snap-type: x proximity !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: thin !important;
	scrollbar-color: #cbd5e1 transparent !important;
}

.ku-cat-modal__grid::-webkit-scrollbar {
	height: 6px !important;
}

.ku-cat-modal__grid::-webkit-scrollbar-thumb {
	background: #cbd5e1 !important;
	border-radius: 999px !important;
}

.ku-cat-tile {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex: 0 0 auto !important;
	min-width: 132px !important;
	max-width: 168px !important;
	min-height: 52px !important;
	padding: 8px 10px !important;
	border: 1px solid rgba(226, 232, 240, 0.95) !important;
	border-radius: 12px !important;
	background: rgba(255, 255, 255, 0.92) !important;
	color: inherit !important;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
	transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
	scroll-snap-align: start !important;
}

.ku-cat-tile:hover {
	border-color: #cbd5e1 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07) !important;
}

.ku-cat-tile__icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 30px !important;
	height: 30px !important;
	border-radius: 9px !important;
	flex: 0 0 30px !important;
}

.ku-cat-tile__icon svg {
	width: 15px !important;
	height: 15px !important;
}

.ku-cat-tile__body {
	min-width: 0 !important;
	flex: 1 1 auto !important;
}

.ku-cat-tile__name {
	display: block !important;
	color: #0f172a !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	line-height: 1.45 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.ku-cat-tile__count {
	display: block !important;
	margin-top: 1px !important;
	color: #94a3b8 !important;
	font-size: 9.5px !important;
	font-weight: 700 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* Icon tones */
.ku-cat-tile--orange .ku-cat-tile__icon,
.ku-cat-modal__section-icon.ku-cat-tone--orange {
	background: linear-gradient(135deg, #ffedd5 0%, #ffffff 100%) !important;
	border: 1px solid #fdba74 !important;
	color: #ea580c !important;
}

.ku-cat-tile--green .ku-cat-tile__icon,
.ku-cat-modal__section-icon.ku-cat-tone--green {
	background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%) !important;
	border: 1px solid #bbf7d0 !important;
	color: #059669 !important;
}

.ku-cat-tile--blue .ku-cat-tile__icon,
.ku-cat-modal__section-icon.ku-cat-tone--blue {
	background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%) !important;
	border: 1px solid #bfdbfe !important;
	color: #2563eb !important;
}

.ku-cat-tile--purple .ku-cat-tile__icon,
.ku-cat-modal__section-icon.ku-cat-tone--purple {
	background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 100%) !important;
	border: 1px solid #ddd6fe !important;
	color: #7c3aed !important;
}

.ku-cat-tile--rose .ku-cat-tile__icon,
.ku-cat-modal__section-icon.ku-cat-tone--rose {
	background: linear-gradient(135deg, #fff1f2 0%, #ffffff 100%) !important;
	border: 1px solid #fecdd3 !important;
	color: #e11d48 !important;
}

.ku-cat-tile--teal .ku-cat-tile__icon,
.ku-cat-modal__section-icon.ku-cat-tone--teal {
	background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 100%) !important;
	border: 1px solid #99f6e4 !important;
	color: #0d9488 !important;
}

.ku-cat-tile--amber .ku-cat-tile__icon,
.ku-cat-modal__section-icon.ku-cat-tone--amber {
	background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%) !important;
	border: 1px solid #fde68a !important;
	color: #d97706 !important;
}

.ku-cat-tile--indigo .ku-cat-tile__icon,
.ku-cat-modal__section-icon.ku-cat-tone--indigo {
	background: linear-gradient(135deg, #eef2ff 0%, #ffffff 100%) !important;
	border: 1px solid #c7d2fe !important;
	color: #4f46e5 !important;
}

.ku-cat-tile--cyan .ku-cat-tile__icon,
.ku-cat-modal__section-icon.ku-cat-tone--cyan {
	background: linear-gradient(135deg, #ecfeff 0%, #ffffff 100%) !important;
	border: 1px solid #a5f3fc !important;
	color: #0891b2 !important;
}

.ku-cat-tile--pink .ku-cat-tile__icon,
.ku-cat-modal__section-icon.ku-cat-tone--pink {
	background: linear-gradient(135deg, #fdf4ff 0%, #ffffff 100%) !important;
	border: 1px solid #f5d0fe !important;
	color: #c026d3 !important;
}

.ku-cat-modal__foot {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 10px 16px 14px !important;
	border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
	background: rgba(255, 255, 255, 0.86) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
}

.ku-cat-modal__shop-link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	min-height: 36px !important;
	padding: 0 12px !important;
	border-radius: 10px !important;
	background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
	color: #ffffff !important;
	font-size: 11.5px !important;
	font-weight: 800 !important;
	text-decoration: none !important;
	box-shadow: 0 6px 14px rgba(22, 163, 74, 0.18) !important;
	white-space: nowrap !important;
	flex: 0 0 auto !important;
}

.ku-cat-modal__shop-link svg {
	width: 15px !important;
	height: 15px !important;
	flex-shrink: 0 !important;
}

.ku-cat-modal__shop-link:hover {
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 8px 18px rgba(22, 163, 74, 0.24) !important;
}

.ku-cat-modal__hint {
	margin: 0 !important;
	color: #94a3b8 !important;
	font-size: 10.5px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

@media (max-width: 849px) {
	.ku-cat-modal {
		align-items: flex-end !important;
		padding: 0 !important;
	}

	.ku-cat-modal__panel {
		width: 100% !important;
		max-height: 92vh !important;
		border-radius: 22px 22px 0 0 !important;
		transform: translateY(100%) !important;
	}

	.ku-cat-modal.ku-cat-modal--visible .ku-cat-modal__panel {
		transform: translateY(0) !important;
	}

	.ku-cat-modal__handle {
		display: block !important;
		width: 42px !important;
		height: 4px !important;
		margin: 8px auto 0 !important;
		border-radius: 999px !important;
		background: #cbd5e1 !important;
	}

	.ku-cat-modal__grid {
		gap: 7px !important;
		padding-bottom: 6px !important;
	}

	.ku-cat-tile {
		min-width: 124px !important;
		max-width: 150px !important;
		min-height: 50px !important;
	}

	.ku-cat-modal__foot {
		flex-direction: row !important;
		align-items: center !important;
	}

	.ku-cat-modal__shop-link {
		width: auto !important;
		min-height: 36px !important;
	}

	.ku-cat-modal__hint {
		text-align: right !important;
	}
}

@media (min-width: 850px) {
	.ku-cat-modal__handle {
		display: none !important;
	}
}