/**
 * Header mega menu — Deepak Sales.
 *
 * The desktop "Shop" dropdown this file used to style (trigger button,
 * panel, columns, side rail) was removed — on desktop "Shop" is now a
 * plain nav link straight to the homepage's Browse Categories section
 * (ds_primary_menu_fallback(), inc/template-functions.php), reusing the
 * ordinary .ds-nav__link styling from header.css, nothing here.
 *
 * What remains is just the mobile drawer "Shop" accordion. Depends on
 * tokens.css + base.css + header.css.
 */

/* ==========================================================================
   1. Mobile drawer "Shop" accordion
   ========================================================================== */
.ds-mobile-nav__mega-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.ds-mobile-nav__mega-chevron {
	transition: transform var(--ds-dur-fast) var(--ds-ease);
}

.ds-mobile-nav__mega-toggle[aria-expanded="true"] .ds-mobile-nav__mega-chevron {
	transform: rotate(180deg);
}

.ds-mobile-nav__mega-panel {
	transition: max-height var(--ds-dur-slow) var(--ds-ease);
}

.ds-mobile-nav__mega-link {
	display: block;
	padding-block: 0.55rem;
	padding-left: var(--ds-space-md);
	font-size: var(--ds-fs-small);
	color: var(--ds-muted);
}

.ds-mobile-nav__mega-link:hover {
	color: var(--ds-oxblood);
}

/* ==========================================================================
   2. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.ds-mobile-nav__mega-chevron,
	.ds-mobile-nav__mega-panel {
		transition: none;
	}
}