/* =========================================================================
 * Glassberry Mobile Navigator — фронтенд
 * Кольори/розміри підставляються змінними з налаштувань (динамічний CSS).
 * Видимість керується медіазапитом, що генерується в PHP.
 * ===================================================================== */

/* --- Хедер ------------------------------------------------------------ */
#gbmn-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9990;
	display: none;               /* показується медіазапитом на мобільних */
	align-items: center;
	box-sizing: border-box;
	height: var(--gbmn-h-height, 56px);
	padding: 0 10px;
	background: var(--gbmn-h-bg, #ffffff);
	color: var(--gbmn-h-color, #008070);
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.08 );
}

#gbmn-header * {
	box-sizing: border-box;
}

.gbmn-trigger {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px;
	border: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
}

.gbmn-trigger i {
	font-size: var(--gbmn-h-icon, 22px);
}

/* Власна inline-іконка (SVG) масштабується під розмір іконок хедера. */
.gbmn-trigger .gbmn-ico {
	display: block;
	width: var(--gbmn-h-icon, 22px);
	height: var(--gbmn-h-icon, 22px);
}

.gbmn-trigger__label {
	font-size: var(--gbmn-h-font, 11px);
	white-space: nowrap;
}

.gbmn-trigger--right {
	flex-direction: row-reverse;
}

.gbmn-trigger--search {
	margin-right: var(--gbmn-search-mr, 8px);
}

.gbmn-logo {
	display: inline-flex;
	align-items: center;
	margin-left: var(--gbmn-logo-ml, 8px);
	color: inherit;
	text-decoration: none;
}

.gbmn-logo img {
	display: block;
	width: auto;
	height: var(--gbmn-logo-h, 32px);
}

.gbmn-logo__text {
	font-size: 16px;
	font-weight: 600;
}

.gbmn-header__spacer {
	flex: 1 1 auto;
}

/* Прибираємо hover/focus/active-ефекти теми на елементах хедера та їхніх
   дочірніх елементах. Видимий фокус лишаємо лише для клавіатури. */
#gbmn-header .gbmn-trigger,
#gbmn-header .gbmn-logo {
	-webkit-tap-highlight-color: transparent;
}

#gbmn-header .gbmn-trigger:hover,
#gbmn-header .gbmn-trigger:focus,
#gbmn-header .gbmn-trigger:active,
#gbmn-header .gbmn-logo:hover,
#gbmn-header .gbmn-logo:focus,
#gbmn-header .gbmn-logo:active,
#gbmn-header .gbmn-trigger:hover *,
#gbmn-header .gbmn-trigger:focus *,
#gbmn-header .gbmn-trigger:active *,
#gbmn-header .gbmn-logo:hover *,
#gbmn-header .gbmn-logo:focus *,
#gbmn-header .gbmn-logo:active * {
	background: transparent !important;
	color: inherit !important;
	text-decoration: none !important;
	box-shadow: none !important;
	outline: none !important;
	opacity: 1 !important;
	transform: none !important;
}

#gbmn-header .gbmn-trigger:focus-visible,
#gbmn-header .gbmn-logo:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: -2px;
}

/* --- Затемнення (overlay) --------------------------------------------- */
.gbmn-overlay {
	position: fixed;
	inset: 0;
	z-index: 9995;
	background: rgba( 0, 0, 0, 0.45 );
	opacity: 0;
	visibility: hidden;
	transition: opacity 250ms ease, visibility 0s linear 250ms;
}

.gbmn-overlay.is-visible {
	opacity: 1;
	visibility: visible;
	transition: opacity 250ms ease, visibility 0s;
}

/* --- Шторки (off-canvas) ---------------------------------------------- */
.gbmn-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: var(--gbmn-w, 85%);
	max-width: 100%;
	background: var(--gbmn-bg, #ffffff);
	visibility: hidden;
	transition:
		transform var(--gbmn-dur, 250ms) ease,
		opacity var(--gbmn-dur, 250ms) ease,
		visibility 0s linear var(--gbmn-dur, 250ms);
}

.gbmn-panel.is-open {
	visibility: visible;
	transition:
		transform var(--gbmn-dur, 250ms) ease,
		opacity var(--gbmn-dur, 250ms) ease,
		visibility 0s;
}

.gbmn-panel * {
	box-sizing: border-box;
}

/* Ліва шторка притиснута ліворуч. */
.gbmn-panel--left {
	left: 0;
}

/* Анімація: висування / плавна поява. */
.gbmn-panel.gbmn-anim-slide.gbmn-panel--left {
	transform: translateX( -100% );
}

.gbmn-panel.gbmn-anim-slide.gbmn-panel--left.is-open {
	transform: translateX( 0 );
}

/* Права шторка притиснута праворуч. */
.gbmn-panel--right {
	right: 0;
}

.gbmn-panel.gbmn-anim-slide.gbmn-panel--right {
	transform: translateX( 100% );
}

.gbmn-panel.gbmn-anim-slide.gbmn-panel--right.is-open {
	transform: translateX( 0 );
}

/* --- Панель пошуку (поверх хедера) ------------------------------------ */
.gbmn-panel--search {
	top: calc( var(--gbmn-bar, 0px) + var(--gbmn-s-offset, 4px) );
	left: var(--gbmn-s-offset, 4px);
	right: var(--gbmn-s-offset, 4px);
	bottom: auto;
	z-index: 9996;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	width: auto;
	max-width: none;
	padding: 0 4px 0 10px;
	background: var(--gbmn-s-bg, #ffffff);
	border-radius: var(--gbmn-s-radius, 6px);
}

.gbmn-panel--search.gbmn-anim-fade {
	opacity: 0;
}

.gbmn-panel--search.gbmn-anim-fade.is-open {
	opacity: 1;
}

.gbmn-panel--search.gbmn-anim-slide {
	opacity: 0;
	transform: translateY( -10px );
}

.gbmn-panel--search.gbmn-anim-slide.is-open {
	opacity: 1;
	transform: translateY( 0 );
}

.gbmn-search__form {
	flex: 1 1 auto;
	min-width: 0;
}

/* Форма AWS / WC має заповнювати ширину панелі. */
.gbmn-search__form form,
.gbmn-search__form .aws-container {
	width: 100%;
	margin: 0;
}

.gbmn-panel--search input {
	font-size: var(--gbmn-s-font, 15px);
	color: var(--gbmn-s-text, #333333);
}

/* Поле AWS має власний білий фон і темний текст — перекриваємо своїми
   (фон прозорий, щоб показувати фон панелі). AWS часто потребує !important. */
.gbmn-panel--search .aws-search-field {
	background: transparent !important;
	color: var(--gbmn-s-text, #333333) !important;
	font-size: var(--gbmn-s-font, 15px) !important;
	box-shadow: none !important;
}

.gbmn-panel--search .aws-search-field::placeholder {
	color: var(--gbmn-s-text, #333333);
	opacity: 0.6;
}

.gbmn-search__close {
	flex: 0 0 auto;
}

/* Кнопка очищення AWS дублює наш ✕ — ховаємо її (вага ID + підстраховка JS). */
#gbmn-search .aws-search-clear {
	display: none !important;
}

/* Випадні результати AWS у наших кольорах (позицію навмисно не чіпаємо). */
.gbmn-panel--search .aws-search-result {
	background: var(--gbmn-s-bg, #ffffff);
	color: var(--gbmn-s-text, #333333);
	border: 1px solid var(--gbmn-s-bc, #008070);
	border-radius: var(--gbmn-s-radius, 6px);
}

.gbmn-panel--search .aws-search-result a {
	color: var(--gbmn-s-text, #333333);
}

.gbmn-panel.gbmn-anim-fade {
	opacity: 0;
}

.gbmn-panel.gbmn-anim-fade.is-open {
	opacity: 1;
}

/* Шапка шторки. */
.gbmn-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;
	padding: 10px 14px;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.08 );
}

.gbmn-panel__title {
	font-weight: 600;
	font-size: 16px;
}

.gbmn-panel__close {
	margin: 0;
	padding: 4px 8px;
	border: 0;
	background: none;
	color: inherit;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

/* Заголовок і хрестик шторок керуються налаштуваннями лівого/правого меню. */
.gbmn-panel--left .gbmn-panel__title {
	font-size: var(--gbmn-left-title-size, 16px);
	color: var(--gbmn-left-title-color, #008070);
}

.gbmn-panel--left .gbmn-panel__close {
	color: var(--gbmn-left-title-color, #008070);
}

.gbmn-panel--right .gbmn-panel__title {
	font-size: var(--gbmn-right-title-size, 16px);
	color: var(--gbmn-right-title-color, #008070);
}

.gbmn-panel--right .gbmn-panel__close {
	color: var(--gbmn-right-title-color, #008070);
}

/* --- Список категорій ------------------------------------------------- */
.gbmn-cats {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.gbmn-cats__list,
.gbmn-cats__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Зсув вкладеного меню вправо. */
.gbmn-cats__sub {
	padding-left: 16px;
	background: rgba( 0, 0, 0, 0.02 );
}

.gbmn-cats__sub[hidden] {
	display: none;
}

.gbmn-cat__row {
	display: flex;
	align-items: center;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.05 );
}

.gbmn-cat__link {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 14px;
	color: var(--gbmn-left-text, #333333);
	font-size: var(--gbmn-left-font, 15px);
	text-decoration: none;
}

.gbmn-cat__link:hover .gbmn-cat__name,
.gbmn-cat__link:focus .gbmn-cat__name {
	color: var(--gbmn-left-hover, #008070);
}

.gbmn-cat__thumb {
	flex: 0 0 auto;
	width: var(--gbmn-left-thumb, 32px);
	height: var(--gbmn-left-thumb, 32px);
	object-fit: cover;
	border-radius: 4px;
}

.gbmn-cat__name {
	overflow: hidden;
	text-overflow: ellipsis;
}

.gbmn-cat__toggle {
	flex: 0 0 auto;
	margin: 0;
	padding: 10px 16px;
	border: 0;
	background: none;
	color: var(--gbmn-left-text, #333333);
	cursor: pointer;
}

.gbmn-cat__toggle i {
	transition: transform 0.2s ease;
}

/* Поворот стрілки для будь-якого розкритого підменю (ліве й праве). */
[data-gbmn-subtoggle][aria-expanded="true"] i {
	transform: rotate( 180deg );
}

/* Будь-яке вкладене меню всередині шторки ховається атрибутом hidden. */
.gbmn-panel ul[hidden] {
	display: none;
}

/* --- Праве меню (обране меню WordPress) ------------------------------- */

/* Спільний скрол-контейнер правої шторки (меню + віджети прокручуються разом). */
.gbmn-panel__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.gbmn-menu__list,
.gbmn-msub {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Зсув вкладеного меню вправо. */
.gbmn-msub {
	padding-left: 16px;
	background: rgba( 0, 0, 0, 0.02 );
}

.gbmn-mitem__row {
	display: flex;
	align-items: center;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.05 );
}

.gbmn-mitem__link {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 14px;
	color: var(--gbmn-right-text, #333333);
	font-size: var(--gbmn-right-font, 15px);
	text-decoration: none;
}

.gbmn-mitem__link:hover,
.gbmn-mitem__link:focus {
	color: var(--gbmn-right-hover, #008070);
}

.gbmn-mitem__toggle {
	flex: 0 0 auto;
	margin: 0;
	padding: 12px 16px;
	border: 0;
	background: none;
	color: var(--gbmn-right-text, #333333);
	cursor: pointer;
}

.gbmn-mitem__toggle i {
	transition: transform 0.2s ease;
}

/* --- Область віджетів «Mobile Menu» (під меню) ------------------------ */
.gbmn-widgets {
	padding: 8px 14px 16px;
	border-top: 1px solid rgba( 0, 0, 0, 0.08 );
	color: var(--gbmn-right-text, #333333);
	font-size: var(--gbmn-right-font, 15px);
}

.gbmn-widget {
	margin: 14px 0 0;
}

.gbmn-widget:first-child {
	margin-top: 6px;
}

.gbmn-widget__title {
	margin: 0 0 8px;
	font-size: 1em;
	font-weight: 600;
	color: var(--gbmn-right-text, #333333);
}

.gbmn-widgets a {
	color: var(--gbmn-right-text, #333333);
	text-decoration: none;
}

.gbmn-widgets a:hover,
.gbmn-widgets a:focus {
	color: var(--gbmn-right-hover, #008070);
}

.gbmn-widgets ul {
	margin: 0;
	padding-left: 18px;
}

/* --- Блокування прокрутки тіла при відкритій шторці ------------------- */
body.gbmn-lock {
	overflow: hidden;
}

/* =========================================================================
 * Нижнє меню (профіль / бажання / кошик)
 * ===================================================================== */
#gbmn-bottom {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	display: none;               /* показується медіазапитом на мобільних */
	box-sizing: border-box;
	height: var(--gbmn-b-height, 56px);
	background: var(--gbmn-b-bg, #ffffff);
	border-top: var(--gbmn-b-bw, 1px) solid var(--gbmn-b-bc, #D5E6E4);
	transition: transform 0.3s ease;
}

#gbmn-bottom * {
	box-sizing: border-box;
}

/* Зникнення біля футера. */
#gbmn-bottom.gbmn-bottom--hidden {
	transform: translateY( 100% );
}

.gbmn-bottom__list {
	display: flex;
	margin: 0;
	padding: 0;
	height: 100%;
	list-style: none;
}

.gbmn-bottom__item {
	flex: 1 1 0;
	min-width: 0;
}

.gbmn-bottom__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	height: 100%;
	padding: 4px;
	color: var(--gbmn-b-text, #008070);
	font-size: var(--gbmn-b-font, 11px);
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.gbmn-bottom__link:hover,
.gbmn-bottom__link:focus,
.gbmn-bottom__link:active {
	color: var(--gbmn-b-hover, #ED263B);
	text-decoration: none;
}

.gbmn-bottom__icon {
	position: relative;
	display: inline-flex;
	font-size: var(--gbmn-b-icon, 22px);
	line-height: 1;
}

.gbmn-bottom__label {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Бейдж кількості (кошик / бажання). */
.gbmn-badge {
	position: absolute;
	top: -6px;
	right: -10px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: #ED263B;
	color: #ffffff;
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
}

.gbmn-badge.is-empty {
	display: none;
}

/* =========================================================================
 * Шрифт плагіна — Comfortaa (іконки Font Awesome не чіпаємо)
 * ===================================================================== */
#gbmn-header, #gbmn-header *:not([class*="fa-"]),
.gbmn-panel, .gbmn-panel *:not([class*="fa-"]),
#gbmn-bottom, #gbmn-bottom *:not([class*="fa-"]),
.gbmn-catalog-widget, .gbmn-catalog-widget *:not([class*="fa-"]) {
	font-family: 'Comfortaa', 'Segoe UI', system-ui, sans-serif;
}

/* =========================================================================
 * Підсвітка поточної сторінки у шторках
 * ===================================================================== */
/* Ліва шторка: поточна категорія — кольором наведення. */
.gbmn-panel--left .gbmn-cat.is-current > .gbmn-cat__row .gbmn-cat__name,
.gbmn-panel--left .gbmn-cat.is-current > .gbmn-cat__row .gbmn-cat__toggle {
	color: var(--gbmn-left-hover, #008070);
}

/* Права шторка: поточний пункт меню WordPress — кольором наведення. */
.gbmn-panel--right .current-menu-item > .gbmn-mitem__row .gbmn-mitem__link,
.gbmn-panel--right .current_page_item > .gbmn-mitem__row .gbmn-mitem__link {
	color: var(--gbmn-right-hover, #008070);
}

/* =========================================================================
 * Віджет «Каталог» (сайдбар, лише десктоп)
 * ===================================================================== */
.gbmn-catalog-widget {
	background: var(--gbmn-cw-bg, #ffffff);
	border: var(--gbmn-cw-bw, 1px) solid var(--gbmn-cw-bc, #D5E6E4);
	border-radius: var(--gbmn-cw-radius, 8px);
	overflow: hidden; /* щоб заокруглення обрізало крайні рядки */
}

/* У сайдбарі внутрішній скрол не потрібен. */
.gbmn-catalog-widget .gbmn-cats {
	flex: none;
	overflow: visible;
}

.gbmn-catalog-widget .gbmn-cat__link {
	color: var(--gbmn-cw-text, #333333);
	font-size: var(--gbmn-cw-font, 14px);
}

.gbmn-catalog-widget .gbmn-cat__toggle {
	color: var(--gbmn-cw-text, #333333);
}

.gbmn-catalog-widget .gbmn-cat__thumb {
	width: var(--gbmn-cw-thumb, 40px);
	height: var(--gbmn-cw-thumb, 40px);
}

/* Наведення на рядок: фон + текст. */
.gbmn-catalog-widget .gbmn-cat__row:hover {
	background: var(--gbmn-cw-bghover, #D5E6E4);
}

.gbmn-catalog-widget .gbmn-cat__row:hover .gbmn-cat__name,
.gbmn-catalog-widget .gbmn-cat__row:hover .gbmn-cat__toggle {
	color: var(--gbmn-cw-texthover, #008070);
}

/* Поточна сторінка — постійний стан наведення. */
.gbmn-catalog-widget .gbmn-cat.is-current > .gbmn-cat__row {
	background: var(--gbmn-cw-bghover, #D5E6E4);
}

.gbmn-catalog-widget .gbmn-cat.is-current > .gbmn-cat__row .gbmn-cat__name,
.gbmn-catalog-widget .gbmn-cat.is-current > .gbmn-cat__row .gbmn-cat__toggle {
	color: var(--gbmn-cw-texthover, #008070);
}