/* ============================================================
   KHABSTORE — Mobile drawer + bottom navigation
   ============================================================ */

.khs-drawer { position: fixed; inset: 0; z-index: 100; }
.khs-drawer__overlay {
	position: absolute; inset: 0; background: rgba(14, 42, 64, .55);
	opacity: 0; transition: opacity 200ms var(--khs-ease);
}
.khs-drawer__panel {
	position: absolute; inset-block: 0; inset-inline-end: 0;
	width: min(86vw, 380px);
	background: var(--khs-surface);
	display: flex; flex-direction: column;
	transform: translateX(-100%);
	transition: transform 240ms var(--khs-ease);
	box-shadow: var(--khs-shadow-2);
}
[dir="rtl"] .khs-drawer__panel { transform: translateX(100%); }
.khs-drawer.is-open .khs-drawer__overlay { opacity: 1; }
.khs-drawer.is-open .khs-drawer__panel { transform: translateX(0); }

.khs-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--khs-s3) var(--khs-s4);
	border-bottom: 1px solid var(--khs-line);
}
.khs-drawer__title { font-weight: 800; color: var(--khs-primary-900); }
.khs-drawer__close {
	width: 40px; height: 40px; border: 0; background: transparent; border-radius: var(--khs-radius);
	display: inline-flex; align-items: center; justify-content: center; color: var(--khs-text-2);
}
.khs-drawer__close:hover { background: var(--khs-primary-050); color: var(--khs-primary-900); }

.khs-drawer__search { padding: var(--khs-s3) var(--khs-s4); border-bottom: 1px solid var(--khs-line); }

.khs-drawer__nav { flex: 1; overflow-y: auto; padding: var(--khs-s2) var(--khs-s2) var(--khs-s4); }
.khs-acc { border-bottom: 1px solid var(--khs-line); }
.khs-acc__summary {
	display: flex; align-items: center; justify-content: space-between;
	list-style: none; cursor: pointer;
	padding: var(--khs-s3) var(--khs-s2);
	font-size: var(--khs-fs-14); font-weight: 700; color: var(--khs-text);
}
.khs-acc__summary::-webkit-details-marker { display: none; }
.khs-acc__summary .khs-icon { width: 18px; height: 18px; color: var(--khs-text-3); transition: transform var(--khs-dur) var(--khs-ease); }
.khs-acc[open] > .khs-acc__summary .khs-icon { transform: rotate(180deg); color: var(--khs-primary-700); }
.khs-acc__list { padding: 0 var(--khs-s3) var(--khs-s2); }
.khs-acc__list .khs-acc__summary { font-weight: 500; font-size: var(--khs-fs-13); color: var(--khs-text-2); }
.khs-drawer__link {
	display: flex; align-items: center; gap: var(--khs-s2);
	padding: var(--khs-s3) var(--khs-s2);
	font-size: var(--khs-fs-14); color: var(--khs-text);
	border-bottom: 1px solid var(--khs-line);
}
.khs-acc__list .khs-drawer__link { font-size: var(--khs-fs-13); color: var(--khs-text-2); border-bottom: 0; padding-block: 8px; }
.khs-drawer__link:hover { color: var(--khs-primary-700); }

.khs-drawer__foot { border-top: 1px solid var(--khs-line); padding: var(--khs-s2) var(--khs-s4); }
.khs-drawer__foot .khs-drawer__link { border-bottom: 0; }

/* ---- Bottom navigation ---- */
.khs-bottomnav {
	display: none;
	position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
	background: var(--khs-surface); border-top: 1px solid var(--khs-line);
	padding-block: 4px;
	padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
}
.khs-bottomnav__item {
	position: relative; flex: 1;
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	background: none; border: 0; color: var(--khs-text-2);
	font-size: 11px; font-weight: 500;
	padding: 6px 0; border-radius: var(--khs-radius-sm);
}
.khs-bottomnav__item .khs-icon { width: 22px; height: 22px; }
.khs-bottomnav__item:hover, .khs-bottomnav__item[aria-expanded="true"] { color: var(--khs-primary-700); }
.khs-bottomnav__badge {
	position: absolute; top: 0; inset-inline-end: calc(50% - 18px);
	min-width: 16px; height: 16px; padding-inline: 4px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--khs-accent); color: #fff;
	font-size: 10px; font-weight: 700; border-radius: var(--khs-radius-pill);
}

@media (max-width: 767px) {
	.khs-bottomnav { display: flex; }
	body { padding-bottom: 64px; }
}