/* ============================================================
   Mobile menu — two columns: Новинки | Специальные предложения
   Scoped to #mobile-menu-modal, which only renders in the mobile
   header context → desktop is unaffected.
   Markup: wp-themes/durotan-child/inc/mobile-nav-menus.php
   Enqueued from: wp-themes/durotan-child/functions.php
   ============================================================ */
#mobile-menu-modal .offscreen-panel__header {
	padding: 0 !important;
}

#mobile-menu-modal .offscreen-panel__content.modal-content {
	padding-top: 0 !important;
}

#mobile-menu-modal .dc-mobile-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
}

#mobile-menu-modal .dc-mobile-col {
	flex: 1 1 0;
	min-width: 140px;
}

#mobile-menu-modal .dc-mobile-col__title {
	margin: 0 0 12px;
	font-size: 14px !important;
	line-height: 1.35 !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 1 !important;
}

/* "Новинки" heading rendered as a clickable link (same look as a title). */
#mobile-menu-modal a.dc-mobile-col__title--link {
	display: block;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}

#mobile-menu-modal .dc-mobile-cols .menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

#mobile-menu-modal .dc-mobile-cols .menu > li > a {
	display: block;
	font-size: 14px !important;
	line-height: 1.4 !important;
	font-weight: 400 !important;
	padding: 4px 0 !important;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* Sub-categories drill-in: handled by the theme's `click-item` accordion. */
#mobile-menu-modal .dc-mobile-cols .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 4px 12px;
}

/* Highlighted item (e.g. «Розпродаж»): add CSS class `sale` to the menu
   item in wp-admin → Меню → пункт → «Класи CSS». */
#mobile-menu-modal .dc-mobile-cols .menu-item.sale > a {
	color: #c0392b;
}

@media (min-width: 480px) {
	#mobile-menu-modal .dc-mobile-cols {
		gap: 40px;
	}
}

/* ------------------------------------------------------------
   Compact language dropdown in the drawer footer ("UA ∨").
   Collapses the theme's inline list into a tap-toggle dropdown
   that opens UPWARD (it sits near the bottom of the drawer).
   Toggle JS: durotan_child_mobile_language_toggle_js().
   ------------------------------------------------------------ */
#mobile-menu-modal .dc-mobile-language {
	margin-bottom: 16px;
}
#mobile-menu-modal .dc-mobile-language .durotan-language {
	position: relative;
	display: inline-block;
}
#mobile-menu-modal .dc-mobile-language .current {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 0.05em;
}
#mobile-menu-modal .dc-mobile-language .current svg {
	width: 10px;
	height: 10px;
	transition: transform 0.2s ease;
}
#mobile-menu-modal .dc-mobile-language .durotan-language.is-open .current svg {
	transform: rotate(180deg);
}
#mobile-menu-modal .dc-mobile-language .language-dropdown {
	display: none;
	position: absolute;
	left: 0;
	bottom: calc(100% + 6px);
	min-width: 150px;
	background: #fff;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.12);
	z-index: 1000;
}
#mobile-menu-modal .dc-mobile-language .durotan-language.is-open .language-dropdown {
	display: block;
}
#mobile-menu-modal .dc-mobile-language .language-dropdown ul {
	list-style: none;
	margin: 0;
	padding: 6px 0;
}
#mobile-menu-modal .dc-mobile-language .language-dropdown li a {
	display: block;
	padding: 8px 14px;
	font-size: 14px;
	text-transform: uppercase;
}

/* ------------------------------------------------------------
   Compact language switcher in the MOBILE HEADER, left of the
   hamburger ("УКР ∨"). Markup: durotan-child/template-parts/
   mobile/headers/menu.php
   ------------------------------------------------------------ */
.header__mobile .dc-header-menu {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	vertical-align: middle;
	padding: 0 !important;
}
/* Desktop: switcher next to the search icon, common wrapper. */
.dc-header-search-lang {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}
/* Switcher component — shared by mobile header and desktop header. */
.dc-header-lang {
	position: relative;
	display: inline-flex;
}
.dc-header-lang__current {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
	line-height: 1;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.dc-header-lang__current svg {
	width: 9px;
	height: 9px;
	transition: transform 0.2s ease;
}
.dc-header-lang.is-open .dc-header-lang__current svg {
	transform: rotate(180deg);
}
.dc-header-lang__list {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	min-width: 64px;
	background: #fff;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.12);
	z-index: 1001;
}
.dc-header-lang.is-open .dc-header-lang__list {
	display: block;
}
.dc-header-lang__list li a {
	display: block;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: inherit;
	text-decoration: none;
}
.dc-header-lang__list li.is-active a {
	opacity: 0.45;
	pointer-events: none;
}