/* DK Mobile Categories – all selectors are prefixed and reset to avoid Woodmart / Elementor / Woo clashes */

html.dkmc-lock,
html.dkmc-lock body { overflow: hidden !important; }

.dkmc-root,
.dkmc-root *,
.dkmc-root *::before,
.dkmc-root *::after { box-sizing: border-box; }

.dkmc-root [hidden] { display: none !important; }

.dkmc-root {
	display: none;
	position: fixed;
	top: var(--dkmc-top, 0px);
	right: 0;
	left: 0;
	bottom: var(--dkmc-bottom, 0px);
	z-index: 99990;
	flex-direction: column;
	margin: 0;
	padding: 0;
	background: #fff;
	color: #23254e;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.6;
	text-align: start;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease;
}
.dkmc-root.is-visible { opacity: 1; transform: none; }

.dkmc-root ul,
.dkmc-root li { list-style: none; margin: 0; padding: 0; }
.dkmc-root h3 { margin: 0; padding: 0; }

.dkmc-root .dkmc-ico { display: block; flex: 0 0 auto; }

/* ---------- Header ---------- */
.dkmc-root .dkmc-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	padding: 12px 16px;
	background: #fff;
}
.dkmc-root .dkmc-back,
.dkmc-root .dkmc-close {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #1a1a1a;
	box-shadow: none;
	cursor: pointer;
}
.dkmc-root .dkmc-back:hover,
.dkmc-root .dkmc-back:focus,
.dkmc-root .dkmc-close:hover,
.dkmc-root .dkmc-close:focus { background: #f0f0f1; color: #1a1a1a; }
.dkmc-root[dir="ltr"] .dkmc-back .dkmc-ico { transform: scaleX(-1); }

.dkmc-root .dkmc-search {
	position: relative;
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
}
.dkmc-root .dkmc-search .dkmc-search-ico {
	position: absolute;
	top: 50%;
	inset-inline-start: 14px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	color: #81858b;
	pointer-events: none;
}
.dkmc-root .dkmc-search input[type="search"] {
	display: block;
	width: 100% !important;
	height: 44px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 14px !important;
	padding-inline-start: 44px !important;
	border: 1px solid #e0e0e6 !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: #23254e !important;
	font: inherit !important;
	font-size: 16px !important; /* prevents iOS zoom */
	box-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none;
	appearance: none;
}
.dkmc-root .dkmc-search input[type="search"]:focus { border-color: var(--dkmc-accent, #ef394e) !important; }
.dkmc-root .dkmc-search input[type="search"]::placeholder { color: #81858b; opacity: 1; }
.dkmc-root .dkmc-search input[type="search"]::-webkit-search-cancel-button { display: none; }

/* ---------- Body ---------- */
.dkmc-root .dkmc-body {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.dkmc-root .dkmc-side {
	flex: 0 0 90px;
	width: 90px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: #f0f0f1;
	scrollbar-width: none;
}
.dkmc-root .dkmc-side::-webkit-scrollbar { display: none; }

.dkmc-root .dkmc-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 80px;
	margin: 0;
	padding: 10px 4px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #81858b;
	font: inherit;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.dkmc-root .dkmc-tab img {
	display: block;
	width: 30px;
	height: 30px;
	max-width: none;
	margin: 0;
	object-fit: contain;
}
.dkmc-root .dkmc-tab .dkmc-tab-ico { width: 28px; height: 28px; }
.dkmc-root .dkmc-tab:hover,
.dkmc-root .dkmc-tab:focus { background: #f0f0f1; color: #81858b; }
.dkmc-root .dkmc-tab.is-active,
.dkmc-root .dkmc-tab.is-active:hover,
.dkmc-root .dkmc-tab.is-active:focus {
	background: #fff;
	color: var(--dkmc-accent, #ef394e);
	font-weight: 600;
}

.dkmc-root .dkmc-main {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 16px 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.dkmc-root .dkmc-all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 16px 0 0;
	color: #0c5ca8;
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	box-shadow: none;
}
.dkmc-root .dkmc-all:hover,
.dkmc-root .dkmc-all:focus { color: #0c5ca8; text-decoration: none; }
.dkmc-root .dkmc-all .dkmc-ico { width: 16px; height: 16px; }

.dkmc-root .dkmc-title {
	margin: 18px 0 6px;
	color: #23254e;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	text-transform: none;
	letter-spacing: 0;
}

.dkmc-root .dkmc-item { border-bottom: 1px solid #f0f0f1; }
.dkmc-root .dkmc-list > .dkmc-item:first-child { border-top: 1px solid #f0f0f1; }

.dkmc-root .dkmc-acc,
.dkmc-root .dkmc-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 12px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #23254e;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-align: start;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.dkmc-root .dkmc-acc:hover,
.dkmc-root .dkmc-acc:focus,
.dkmc-root .dkmc-link:hover,
.dkmc-root .dkmc-link:focus { background: transparent; color: #23254e; text-decoration: none; }

.dkmc-root .dkmc-acc .dkmc-ico,
.dkmc-root .dkmc-link .dkmc-ico { width: 18px; height: 18px; color: #81858b; transition: transform .2s ease; }
.dkmc-root .dkmc-acc[aria-expanded="true"] .dkmc-down { transform: rotate(180deg); }

.dkmc-root .dkmc-sub { margin: 0 0 8px; padding: 0; padding-inline-start: 12px; }
.dkmc-root .dkmc-sub a {
	display: block;
	padding: 10px 0;
	color: #62666d;
	font-size: 12.5px;
	font-weight: 400;
	text-decoration: none;
	box-shadow: none;
}
.dkmc-root .dkmc-sub a:hover,
.dkmc-root .dkmc-sub a:focus { color: var(--dkmc-accent, #ef394e); text-decoration: none; }
.dkmc-root .dkmc-sub a.dkmc-sub-all { color: #0c5ca8; font-weight: 500; }

/* Flip "end" chevrons for LTR sites */
.dkmc-root[dir="ltr"] .dkmc-chev { transform: scaleX(-1); }

/* ---------- Trigger highlight in theme toolbars ---------- */
.dkmc-active,
.dkmc-active * { color: var(--dkmc-accent, #ef394e); }

/* ---------- Optional own bottom bar ---------- */
.dkmc-bar {
	display: none;
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99995;
	height: calc(58px + env(safe-area-inset-bottom, 0px));
	padding: 0 0 env(safe-area-inset-bottom, 0px);
	margin: 0;
	background: #fff;
	border-top: 1px solid #e0e0e6;
	box-sizing: border-box;
}
.dkmc-bar *,
.dkmc-bar *::before,
.dkmc-bar *::after { box-sizing: border-box; }

.dkmc-bar .dkmc-bar-item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	color: #81858b;
	font-size: 10.5px;
	line-height: 1.3;
	text-decoration: none;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
}
.dkmc-bar .dkmc-bar-item:hover,
.dkmc-bar .dkmc-bar-item:focus { color: #81858b; text-decoration: none; }
.dkmc-bar .dkmc-bar-item.is-current,
.dkmc-bar .dkmc-bar-item.dkmc-active { color: #1a1a1a; font-weight: 700; }
.dkmc-bar .dkmc-bar-item.dkmc-active * { color: #1a1a1a; }
.dkmc-bar .dkmc-ico { width: 24px; height: 24px; }
.dkmc-bar .dkmc-bar-ico { position: relative; display: block; line-height: 0; }
.dkmc-bar .dkmc-cart-count {
	position: absolute;
	top: -6px;
	inset-inline-end: -10px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--dkmc-accent, #ef394e);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}
.dkmc-bar .dkmc-cart-count[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.dkmc-root { transition: none; }
	.dkmc-root .dkmc-ico { transition: none; }
}

.dkmc-root .dkmc-empty { margin: 0; padding: 24px 0; color: #81858b; font-size: 13px; }