/* =============================================================
   DHProduct — Mobile category drawer + hub + EN/BN font stability
   Isolated add-on stylesheet (loads site-wide, but the drawer/toggle
   only appear on phones ≤767px). Nothing here touches the header CSS.
   ============================================================= */

/* ---- desktop: the mobile-only pieces stay hidden ---- */
.dhp-mcat-toggle,
.dhp-mcat-drawer,
.dhp-mcat-backdrop { display: none; }

@media (max-width: 767px) {

	/* the injected "Categories" item sits in the existing bottom nav */
	.dhp-mcat-toggle {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		border: none;
		background: none;
		cursor: pointer;
		flex: 1 1 0;
		min-width: 0;
		padding: 4px 2px;
		color: inherit;
		font: inherit;
	}
	.dhp-mcat-toggle .dhp-mobile-nav__icon { font-size: 1.15rem; line-height: 1; }
	.dhp-mcat-toggle .dhp-mobile-nav__label { font-size: .64rem; font-weight: 700; }

	/* dim backdrop behind the drawer */
	.dhp-mcat-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .5);
		z-index: 3400;
	}
	.dhp-mcat-backdrop[hidden] { display: none; }

	/* slide-up off-canvas drawer */
	.dhp-mcat-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		max-height: 82vh;
		background: #fff;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -12px 40px rgba(0, 0, 0, .28);
		z-index: 3500;
		transform: translateY(100%);
		transition: transform .32s cubic-bezier(.4, 0, .2, 1);
		will-change: transform;
	}
	.dhp-mcat-drawer.open { transform: translateY(0); }

	.dhp-mcat-drawer__head {
		display: flex; align-items: center; justify-content: space-between;
		padding: 14px 18px;
		border-bottom: 1px solid #eef2ee;
		position: sticky; top: 0; background: #fff; border-radius: 20px 20px 0 0;
	}
	.dhp-mcat-drawer__head::before {
		content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
		width: 40px; height: 4px; border-radius: 99px; background: #d9e2d9;
	}
	.dhp-mcat-drawer__title { font-weight: 800; font-size: 1rem; color: #23301d; }
	.dhp-mcat-drawer__close {
		width: 34px; height: 34px; border: none; border-radius: 50%;
		background: #f2f6f0; color: #3a4a33; font-size: 1.3rem; line-height: 1; cursor: pointer;
	}

	.dhp-mcat-drawer__body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 0 20px; }

	.dhp-mcat-item { border-bottom: 1px solid #f2f5f1; }
	.dhp-mcat-parent {
		display: flex; align-items: center; justify-content: space-between; gap: 10px;
		width: 100%; text-align: left;
		padding: 14px 18px;
		border: none; background: none; cursor: pointer;
		font-size: .95rem; font-weight: 700; color: #23301d; text-decoration: none;
	}
	.dhp-mcat-parent__label { display: inline-flex; align-items: center; gap: 10px; }
	.dhp-mcat-chevron { font-size: .75rem; color: #8a9a80; transition: transform .2s ease; }
	.dhp-mcat-parent.open .dhp-mcat-chevron { transform: rotate(180deg); }
	.dhp-mcat-parent.open { color: var(--dp-primary, #4e8b1e); }

	.dhp-mcat-sub { background: #f8faf7; padding: 4px 0 8px; }
	.dhp-mcat-sub[hidden] { display: none; }
	.dhp-mcat-sub__all,
	.dhp-mcat-sub__link {
		display: flex; align-items: center; justify-content: space-between; gap: 8px;
		padding: 11px 18px 11px 42px;
		font-size: .86rem; color: #46543d; text-decoration: none; font-weight: 600;
	}
	.dhp-mcat-sub__all { font-weight: 800; color: var(--dp-primary, #4e8b1e); }
	.dhp-mcat-sub__link:active { background: #eef4ea; }
	.dhp-mcat-count { font-size: .7rem; color: #8a9a80; background: #eaf1e6; border-radius: 99px; padding: 1px 8px; font-weight: 700; }

	body.dhp-mcat-open { overflow: hidden; }
}

/* =============================================================
   EN / BN runtime font stability — no layout break on language flip
   ============================================================= */
:root {
	--font-bangla: 'Hind Siliguri', 'SolaimanLipi', 'Noto Sans Bengali', 'Nirmala UI', sans-serif;
	--font-latin: 'Inter', 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body.lang-bn,
body.lang-bn button,
body.lang-bn input,
body.lang-bn textarea,
body.lang-bn select {
	font-family: var(--font-bangla);
	line-height: 1.6;
}
body.lang-en,
body.lang-en button,
body.lang-en input,
body.lang-en textarea,
body.lang-en select {
	font-family: var(--font-latin);
	line-height: 1.5;
}
/* Bangla numerals / mixed text keep an even baseline so rows never jump */
body.lang-bn .dhp-mcat-drawer,
body.lang-bn .dhp-mobile-nav { font-family: var(--font-bangla); }