/**
 * Barex Menu — mobile drawer.
 *
 * Palette follows the live site: near-black #101010 on white, #f6f6f6 for
 * inert surfaces, hairline #e4e4e2. Typography is inherited from the theme
 * (Roboto) on purpose — the drawer should read as part of the site, not as a
 * bolted-on widget.
 *
 * The panel is full-screen. Scape's own .header-mobile-side rules do not apply
 * because we deliberately do not carry that class.
 */

/*
 * The id selector is deliberate. Scape prints "#mobile-header { width: 320px }"
 * into its dynamic stylesheet from the hm-s-width theme option, and an id beats
 * a class. We must win here in CSS rather than by changing that option, because
 * the production deploy is files-only — staging's database is never pushed, so
 * a theme-option change would simply not exist on prod.
 */
#mobile-header.bmenu-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 100%;
	z-index: 100000;
	background: #fff;
	color: #101010;
	transform: translate3d(100%, 0, 0);
	visibility: hidden;
	transition: transform .34s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .34s;
	will-change: transform;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
}

body.mobile-header-open #mobile-header.bmenu-drawer {
	transform: translate3d(0, 0, 0);
	visibility: visible;
	transition: transform .34s cubic-bezier(.22, .61, .36, 1), visibility 0s linear 0s;
}

.bmenu-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(16, 16, 16, .35);
	opacity: 0;
	visibility: hidden;
	z-index: 99999;
	transition: opacity .3s ease, visibility 0s linear .3s;
}

body.mobile-header-open .bmenu-backdrop {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s ease, visibility 0s linear 0s;
}

body.bmenu-locked {
	overflow: hidden;
}

.bmenu {
	display: flex;
	flex-direction: column;
	height: 100%;
	height: 100dvh;
}

.bmenu *,
.bmenu *::before,
.bmenu *::after {
	box-sizing: border-box;
}

/* ---------------- sticky header: close is always reachable ------------- */

.bmenu-top {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 4px;
	min-height: 56px;
	padding: 8px 8px 8px 14px;
	border-bottom: 1px solid #e4e4e2;
	background: #fff;
}

.bmenu-heading {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * Specificity note: the close button deliberately keeps Scape's
 * .wtbx_mobile_close class so the theme's own close handler still works if our
 * JS ever fails to load. That class also picks up a themed dark circle from
 * style-custom.css, which is printed after our stylesheet — hence the id-scoped
 * selectors below, which win without !important.
 */
#mobile-header.bmenu-drawer .bmenu-back,
#mobile-header.bmenu-drawer .bmenu-close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	background-color: transparent;
	box-shadow: none;
	color: #101010;
	cursor: pointer;
	opacity: 1;
	-webkit-appearance: none;
	appearance: none;
}

/* Kill the themed X drawn with pseudo-elements — ours is an SVG. */
#mobile-header.bmenu-drawer .bmenu-close::before,
#mobile-header.bmenu-drawer .bmenu-close::after,
#mobile-header.bmenu-drawer .bmenu-back::before,
#mobile-header.bmenu-drawer .bmenu-back::after {
	display: none;
	content: none;
}

#mobile-header.bmenu-drawer .bmenu-back svg,
#mobile-header.bmenu-drawer .bmenu-close svg {
	width: 21px;
	height: 21px;
}

#mobile-header.bmenu-drawer .bmenu-back {
	margin-left: -10px;
}

#mobile-header.bmenu-drawer .bmenu-back[hidden] {
	display: none;
}

/* No round pill on tap either — a circle appearing under the finger was the
   thing that read as "a circle around the close button". */
#mobile-header.bmenu-drawer .bmenu-back:active,
#mobile-header.bmenu-drawer .bmenu-close:active {
	background-color: transparent;
	opacity: .5;
}

/* ---------------- search ---------------- */

.bmenu-search {
	flex: 0 0 auto;
	padding: 12px 14px;
	border-bottom: 1px solid #e4e4e2;
}

.bmenu-search .dgwt-wcas-search-wrapp {
	max-width: none;
	margin: 0;
}

/*
 * FiboSearch's rounded "pirx" field is left as the plugin ships it — it is the
 * same field the site uses elsewhere, and fighting its radius only produced a
 * square wrapper around a round input.
 */

.bmenu-search .search-field,
.bmenu-search input[type="search"],
.bmenu-search input[type="text"] {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	font-size: 16px; /* 16px or iOS zooms the page on focus */
	border: 1px solid #e4e4e2;
	border-radius: 2px;
	background: #f6f6f6;
	color: #101010;
}

.bmenu-search form {
	margin: 0;
}

/* ---------------- panes ---------------- */

.bmenu-body {
	flex: 1 1 auto;
	position: relative;
	overflow: hidden;
}

.bmenu-pane {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 14px 14px 40px;
	background: #fff;
	transform: translate3d(30px, 0, 0);
	opacity: 0;
	pointer-events: none;
	transition: transform .22s ease, opacity .22s ease;
}

.bmenu-pane.is-active {
	transform: none;
	opacity: 1;
	pointer-events: auto;
}

.bmenu-pane[hidden] {
	display: none;
}

/* ---------------- tabs ---------------- */

.bmenu-tabs {
	display: flex;
	gap: 0;
	margin: 0 0 14px;
	border-bottom: 1px solid #e4e4e2;
	overflow-x: auto;
	scrollbar-width: none;
}

.bmenu-tabs::-webkit-scrollbar {
	display: none;
}

.bmenu-tab {
	flex: 1 1 0;
	min-width: max-content;
	padding: 11px 6px;
	margin: 0;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: #8a8a8a;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.bmenu-tab[aria-selected="true"] {
	color: #101010;
	border-bottom-color: #101010;
}

.bmenu-panel[hidden] {
	display: none;
}

/* ---------------- tiles ---------------- */

.bmenu-set-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

@media (min-width: 560px) {
	.bmenu-set-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.bmenu-pane {
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (min-width: 820px) {
	.bmenu-set-tiles {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.bmenu-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 13px 6px 12px;
	border: 1px solid #e4e4e2;
	border-radius: 3px;
	text-decoration: none;
	color: inherit;
	background: #fff;
	text-align: center;
}

.bmenu-tile:active {
	border-color: #101010;
	background: #fafafa;
}

.bmenu-tile-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: #101010;
}

.bmenu-mark-svg {
	width: 30px;
	height: 30px;
	display: block;
}

.bmenu-mark-img {
	width: 32px;
	height: 32px;
	object-fit: contain;
	display: block;
}

.bmenu-tile-name {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.bmenu-tile-count {
	position: absolute;
	top: 5px;
	right: 6px;
	font-size: 9.5px;
	line-height: 1;
	color: #a0a0a0;
	font-variant-numeric: tabular-nums;
}

/* ---------------- line cards (monogram) ---------------- */

.bmenu-set-logos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

@media (min-width: 560px) {
	.bmenu-set-logos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 820px) {
	.bmenu-set-logos {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.bmenu-logo {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 10px;
	border: 1px solid #e4e4e2;
	border-radius: 3px;
	background: #fff;
	text-decoration: none;
	color: inherit;
}

.bmenu-logo:active {
	border-color: #101010;
	background: #fafafa;
}

.bmenu-logo-mark {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 2px;
	background: #f2f2f0;
}

.bmenu-monogram {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	color: #101010;
}

/*
 * Set as authored, not uppercased. Category and hair-type labels are sentence
 * case, so uppercasing the lines broke the unity between the tabs — and the
 * type scale here now matches .bmenu-tile-name exactly for the same reason.
 */
.bmenu-logo-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
	text-transform: none;
	overflow-wrap: anywhere;
}

.bmenu-logo-count {
	flex: 0 0 auto;
	font-size: 10px;
	color: #a0a0a0;
	font-variant-numeric: tabular-nums;
}

/* ---------------- chips ---------------- */

.bmenu-set-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bmenu-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 8px 13px 8px 10px;
	border: 1px solid #e4e4e2;
	border-radius: 999px;
	background: #fff;
	color: #101010;
	font-size: 13.5px;
	line-height: 1.2;
	text-decoration: none;
}

.bmenu-chip:active {
	background: #101010;
	border-color: #101010;
	color: #fff;
}

/* Each hair type has its own mark, so the chip leads with it. */
.bmenu-chip-icon {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	color: #101010;
}

.bmenu-chip:active .bmenu-chip-icon {
	color: #fff;
}

.bmenu-chip em {
	font-style: normal;
	font-size: 11px;
	color: #8a8a8a;
	font-variant-numeric: tabular-nums;
}

.bmenu-chip:active em {
	color: rgba(255, 255, 255, .7);
}

/* ---------------- rows ---------------- */

.bmenu-set-list,
.bmenu-links {
	display: flex;
	flex-direction: column;
}

.bmenu-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	padding: 14px 2px;
	margin: 0;
	border: 0;
	border-bottom: 1px solid #e4e4e2;
	background: none;
	color: #101010;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -.01em;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.bmenu-row:last-child {
	border-bottom: 0;
}

.bmenu-row:active {
	background: #f6f6f6;
}

.bmenu-row svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: #b4b4b0;
}

.bmenu-row-all {
	font-weight: 700;
}

.bmenu-count {
	font-style: normal;
	font-size: 12px;
	color: #8a8a8a;
	font-variant-numeric: tabular-nums;
}

.bmenu-links {
	margin-top: 20px;
	padding-top: 6px;
	border-top: 1px solid #e4e4e2;
}

/* ---------------- misc ---------------- */

.bmenu-subhead {
	margin: 18px 0 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8a8a8a;
}

.bmenu-set + .bmenu-subhead {
	margin-top: 22px;
}

.bmenu-more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	margin-top: 12px;
	padding: 12px 14px;
	border: 1px solid #101010;
	border-radius: 2px;
	background: #fff;
	color: #101010;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: -.01em;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.bmenu-more:active {
	background: #101010;
	color: #fff;
}

.bmenu-more svg {
	width: 15px;
	height: 15px;
}

.bmenu-extra {
	display: flex;
	flex-direction: column;
	margin-top: 18px;
	padding-top: 6px;
	border-top: 1px solid #e4e4e2;
}

.bmenu-extra-row {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 46px;
	padding: 11px 2px;
	border-bottom: 1px solid #e4e4e2;
	color: #41464a;
	font-size: 14px;
	line-height: 1.3;
	text-decoration: none;
}

.bmenu-extra-row:last-child {
	border-bottom: 0;
}

.bmenu-extra-row:active {
	background: #f6f6f6;
}

.bmenu-extra-icon {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	color: #8a8a8a;
}

.bmenu-footrow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin-top: 16px;
}

.bmenu-social {
	display: flex;
	gap: 10px;
}

.bmenu-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid #e4e4e2;
	border-radius: 3px;
	color: #101010;
	text-decoration: none;
}

.bmenu-social-link:active {
	background: #101010;
	border-color: #101010;
	color: #fff;
}

.bmenu-social-icon {
	width: 20px;
	height: 20px;
	display: block;
}

.bmenu-account {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	margin-top: 16px;
	padding: 12px 14px;
	border: 1px solid #e4e4e2;
	border-radius: 2px;
	background: #f6f6f6;
	color: #101010;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.bmenu-account svg {
	width: 18px;
	height: 18px;
}

.bmenu-foot {
	/* flex-basis keeps it beside the buttons while there is room, and drops it
	   to its own line once there is not. */
	flex: 1 1 150px;
	min-width: 0;
	margin: 0;
	font-size: 11px;
	line-height: 1.4;
	color: #a8a8a4;
}

/* ---------------- a11y / motion ---------------- */

.bmenu :focus-visible {
	outline: 2px solid #101010;
	outline-offset: 2px;
}

/* The drawer takes focus on open; it is a container, not a control. */
.bmenu:focus,
.bmenu:focus-visible {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.bmenu-drawer,
	.bmenu-backdrop,
	.bmenu-pane {
		transition: none !important;
	}
}

/* Desktop safety net: the drawer belongs to the mobile header only. */
@media (min-width: 1200px) {
	.bmenu-drawer,
	.bmenu-backdrop {
		display: none;
	}
}

/* "Visi produktai" tile: always last in its set, widened to fill the final row
   (span computed server-side per column count — see bmenu_tiles_shop_last()). */
.bmenu-tile-all { flex-direction: row; justify-content: center; gap: 10px; }
.bmenu-tile-all[data-span3="2"] { grid-column: span 2; }
.bmenu-tile-all[data-span3="3"] { grid-column: span 3; }
@media (min-width: 560px) {
	.bmenu-tile-all[data-span3] { grid-column: auto; }
	.bmenu-tile-all[data-span4="2"] { grid-column: span 2; }
	.bmenu-tile-all[data-span4="3"] { grid-column: span 3; }
	.bmenu-tile-all[data-span4="4"] { grid-column: span 4; }
}
@media (min-width: 820px) {
	.bmenu-tile-all[data-span4] { grid-column: auto; }
	.bmenu-tile-all[data-span6="2"] { grid-column: span 2; }
	.bmenu-tile-all[data-span6="3"] { grid-column: span 3; }
	.bmenu-tile-all[data-span6="4"] { grid-column: span 4; }
	.bmenu-tile-all[data-span6="5"] { grid-column: span 5; }
	.bmenu-tile-all[data-span6="6"] { grid-column: span 6; }
}